JavaScript与Dreamweav.ppt

第六章JavaScript与Dreamweaver,主要内容,JavaScript语言基础JavaScript的浏览器对象Dreamweaver中的行为,6.1JavaScript语言基础6.1.1javaScript的概念,JavaScript是Sun公司和Netscape公司合作推出的一种描述性脚本语言，可以嵌入HTML文件中，无须编译即可在浏览器中运行特点：是一种脚本语言基于对象的语言简单性、安全性动态性与跨平台性,编写第一个JavaScript脚本,例：6-1.htm,JavaScript与Java的区别,Java是Sun公司推出的新一代完全面向对象的程序设计语言，支持类和继承，主要应用于网络程序设计；JavaScript只是基于对象的，用于编写网页中的脚本。Java程序需要编译，用Java虚拟机执行；JavaScript源代码无须编译，由浏览器解释执行。Java程序可以单独执行，但JavaScript程序只能嵌入HTML中，不能单独运行。Java程序的编辑、编译需要专门的开发工具；JavaScript不需要特殊的开发环境，一般的文本编辑器即可。,6.1.2JavaScript编程基础,1.JavaScript程序的编辑和调试编辑：文本编辑器嵌入到HTML文件中的方法使用标记例6-1.htm将JavaScript程序以扩展名“.js”单独存放，再引入：例6-2.htm,注意：JavaScript大小写敏感语句后用“;”结束注释符号单行注释：/这里是注释内容多行注释：/*这里是注释内容*/,2.常量和变量常量：整型、实型、布尔型、字符型、空值Null、特殊字符变量：整数、字符串、布尔型、实型变量的声明：VARmytestVARmytest=“thisisabook”注意：变量名以字母开头，由字母、数字、_组成变量名区分大小写,3.运算符和表达式,运算符：赋值运算符：=+=-=*=/=%=算术运算符：+-*/%+-逻辑运算符：Return表达式;例6-3.htm,调用函数：函数名（参数表）例6-4.htm,函数调用：,函数定义：,5.程序控制结构,ifswitchforwhiledowhilebreakcontinue,（1）if语句,if（条件）执行语句else执行语句,hour=13;if(hour12)document.write(Goodmorning);elseif(hour18)document.write(Goodafternoon);elsedocument.write(Goodevening);,例：6-5.htm,（2）Switch语句Switch(expression)Caselabel1:语句块1；Caselabel2:语句块2；Default:语句块N；,vard=newDate();theDay=d.getDay();/返回星期switch(theDay)case5:document.write(FinallyFriday);break;case6:document.write(SuperSaturday);break;case0:document.write(SleepySunday);break;default:document.write(Imlookingforwardtothisweekend!);,例：6-6.htm,（3）For语句：For(初始化部分；条件部分；更新部分)语句块；,Sum=0for(i=0;i,语法：varString对象实例名=newString(string)varString对象实例名=字符串值如：str1=newString(“Thisisasample.”);str2=“Thisisasample.”;,2.String对象,3.Math对象,Math对象本身就是一个实例，由系统创建的，称为静态对象，不能用new创建Math对象实例。方法：sin/cos/tan/asinexp/log/sqrt/abs/roundrandom如：Math.sin(3.2),4.Date对象,语法：varDate对象名=newDate(parameters)无参数：获得当前日期和时间“月日，年时:分:秒”创建指定日期和时间的实例“年,月,日,时,分,秒”创建指定日期和时间的实例方法：获取年月日：getYear、getMonth、getDate获取时间：getHour、getMinutes、getSeconds获取星期：getDay,例：6-20.htm6-21.htm,例6-21.htm,时间：日期：,6.2JavaScript的浏览器对象,6.2.1Navigator对象树Navigator：封装浏览器名称、版本等信息Window：封装有关窗口的属性和窗口操作Screen：屏幕对象History：包含浏览器的浏览历史信息Location：包含基于当前URL的信息Frame：在浏览器中使用框架时用到该对象Document：代表当前HTML文档Form：包含表单的属性和操作Anchor：包含页面中锚点的信息Button，radio等：Form的下层对象，对应Form中的相应元素,6.2.2Navigator对象,浏览器对象，反映了当前使用的浏览器的资料。常用属性：appCodeName：返回浏览器的代码名字，通常返回MozillaappName：返回浏览器名。IE返回MicrosoftInternetExplorer，NN返回Netscape。appVersion：返回浏览器版本，包括了大版本号、小版本号、语言、操作平台等信息。platform：返回浏览器的操作平台，对于Windows9x上的浏览器，返回Win32。userAgent：返回以上全部信息。例如，IE5.01返回Mozilla/4.0(compatible;MSIE5.01;Windows98)。javaEnabled()：返回一个布尔值，代表当前浏览器允许不允许Java。mimeType：浏览器中可以使用的MIME类型plugins：浏览器中可以使用的插件例：6-22.htm,6.2.3screen对象,反映了当前用户的屏幕设置。属性width：返回屏幕的宽度（像素数）。height：返回屏幕的高度。colorDepth：返回当前颜色设置所用的位数-1：黑白；8：256色；16：增强色；24/32：真彩色例：6-23.htm,6.2.4window对象,窗口对象，最大的对象，它描述的是一个浏览器窗口。一般要引用它的属性和方法时，不需要用“window.xxx”这种形式，而直接使用“xxx”。1.与窗口有关的属性：使用时，这些属性名称前不加对象名parent：当前窗口或框架的父窗口，在框架页面中使用self/window：当前窗口，最常用的是“self.close()”，放在标记中：“关闭窗口”。top：主窗口，是所有下级窗口的父窗口,2.与浏览器状态有关的属性：status：窗口下方的“状态栏”所显示的内容。通过对status赋值，可以改变状态栏的显示defaultStatus：状态栏显示的默认值如：搜狐3.与对话框有关的方法：alert(字符串)：显示字符串，无返回值confirm(字符串)：确定返回“True”，否则返回“False”prompt(字符串1,字符串2)：字符串1为显示内容，字符串2为输入框默认内容，确定返回输入框内容，取消返回null,4.与窗口生成、关闭有关的方法open方法：格式：open(“URL”,”WindowName”,”窗口参数”)top=#窗口顶部离开屏幕顶部的像素数left=#窗口左端离开屏幕左端的像素数width=#窗口的宽度height=#窗口的高度menubar=.窗口有没有菜单，取值yes或notoolbar=.窗口有没有工具条，取值yes或nolocation=.窗口有没有地址栏，取值yes或nodirectories=.窗口有没有连接区，取值yes或noscrollbars=.窗口有没有滚动条，取值yes或nostatus=.窗口有没有状态栏，取值yes或noresizable=.窗口给不给调整大小，取值yes或no,例：6-24.htm,曲阜师范大学,close方法例：6-24.htm超链接方式：关闭窗口关闭窗口按钮方式：,5.与窗口焦点有关的方法focus()：使窗口获得焦点blur()：使窗口失去焦点6.与超时有关的方法setTimeout(“表达式”,time)：每隔time毫秒将重新对表达式求值一次，返回一个标志clearTimeout(timeId)：清除指定的超时设置，timeId是setTimeout返回的标志例：6-21.htm6.其他属性和方法opener：一个窗口名，是由open()打开的最新窗口frames：一个数组，数组内的各成员是窗口内的各帧scroll(x,y)方法：使窗口滚动到x,y处,8.常用事件：onloadonunloadonresizeonbluronfocusonerror,例：6-25.htm内容：defaultStatus=“这是一个window对象使用实例”;window对象使用实例请输入您的姓名：请输入您的电话：,内容：定义函数functionconfSubmit()ok=confirm(您确定输入正确吗？);if(ok=true)varnw=open(a.htm,width=500,height=200);nw.focus();nw.document.write(您的名字是：+parent.document.input_form.nm.value);nw.document.write();nw.document.write(您的电话是：+parent.document.input_form.phone.value);elsealert(请您重新输入);,6.2.5Document对象,1.Document对象的属性（1）数值属性：Document对象的数值变量形式的属性,（2）数组属性anchor对象和anchors数组document.anchors是一个数组，包含了文档中所有锚标记（包含name属性的标记），按照在文档中的次序，从0开始给每个锚标记定义了一个下标。link对象和link数组document.links也是一个数组，包含了文档中所有连接标记（包含href属性的标记和标记段里的标记），按照在文档中的次序，从0开始给每个连接标记定义了一个下标。属性：protocol：协议hostname：主机名或IP地址port：端口号host：主机名和端口号pathname：路径hash：锚点名search：查询信息href：整个URL,例：6-26.htm,image对象和images数组HTML文件中的一个标记对应一个image对象image对象的属性：namesrcwidthheightborderhspacevspace一个HTML文件中的各个标记所对应的image对象，按照在文件中出现的先后顺序形成数组images,例：6-26.htmbody内容：varImageArray=newArray();for(i=1;i,head内容：varImageNum=1;functionBegin()document.MyImage.src=ImageArrayImageNum.src;ImageNum+;if(ImageNum3)ImageNum=1;,2.Document对象的方法,write和writelndocument.write(“欢迎访问本主页”);document.write(“您是第”+i+”个访问本站的贵宾”);document.write(“您是第”,i,”个访问本站的贵宾”);open：打开一个已存在的文件或创建一个新文件来写入内容close：关闭文件clear：清理文件中的内容,6.2.6Form对象,1.Form对象的属性actionnamemethodtargetencoding：被发送数据的编码方式，对应enctype属性elements：一个数组，元素是表单各个输入域对象，即form子对象length：表单中输入域的个数例：6-28.htm,例：6-28.htmdocument.write(本网页共有+document.forms.length+个表单。它们是：);for(vari=0;i);document.write(该表单共有：+document.formsi.length+个元素);,2.Form对象的方法submit：触发submit事件，触发后，该表单中用户输入的数据将被提交给相应的服务器程序onSubmit事件处理返回false值来阻止数据的提交，可以实现对用户输入数据合法性的检查reset恢复各输入域的值为初始值触发onReset事件处理的执行例：6-29.htm,6-29.htmbody内容：请输入您的手机号码：,head内容：函数定义functionVerify()varTel=document.TelForm.TelNo.value;if(Tel.length=11)alert(您输入的号码为：+Tel);elsealert(您输入的号码位数不正确!);returnfalse;,3.Form对象的子对象按钮对象：submit、reset、buttonname、type、value、width、height、form（按钮所属的表单）事件处理：onClick、onSubmit、onFocustext、textarea对象：onSelect、onChange、onFocus、onBlurpassword对象：没有onClick事件，其他同textcheckbox、radio对象：checked属性select对象,6.2.7History对象和Location对象,1.History对象历史清单对象，保存窗口访问过的URL属性：current：当前历史项的URLlength：历史列表中的项数next：下一个历史项的URLprevious：前一个历史项的URL方法：back：转到前一个URLforward：转到后一个URLgo：转到历史列表中与当前URL位置相距i的URLHistory.go(-1)后退History.go(1)前进History.go(0)刷新例：6-30.htm,2.Location对象用于存储当前的URL信息，以可对该对象赋值改变当前的URL属性同link对象例:Window.location.href=“”window.location=“”,6.2.8Frame对象,一个Frame对象对应一个标记定义属性：namelength：框架中包含的子框架数目parentself、windowtopframes数组：当前窗口中的所有框架方法：blurfocussetTimeoutclearTimeout事件处理：onloadonunload,实例：合法性验证6-31.htmfunctionsubmitit(myform)if(myform.username.value=)alert(用户名不能为空！);myform.username.focus();returnfalse;if(myform.username.value.length3)alert(用户名不能少于3位！);myform.username.focus();returnfalse;if(myform.password.value=)alert(密码不能为空！);myform.password.focus();returnfalse;,if(myform.password.value.length,表单设置：,6.3Dreamweaver中的行为,6.3.1行为概述,行为是一种事件和动作的组合，事件激发一个动作产生一定特殊效果，用户不用编写代码就可以轻松作出各种功能效果。动作是用JavaScript预先编好的功能，如打开浏览器窗口、播放声音等。事件是由浏览器在响应用户动作的时候引发的。,1行为面板,事件列表：显示设置的事件动作列表：添加行为：删除行为：,2常用的事件,onAbort：浏览器正载入图像，用户停止浏览器的运行onChange：