JavaScript与Dreamweav.ppt

第六章 JavaScript与Dreamweaver 主要内容 nJavaScript语言基础 nJavaScript的浏览器对象 nDreamweaver中的行为 6.1 JavaScript语言基础 6.1.1 javaScript的概念 nJavaScript是Sun公司和Netscape公司合作 推出的一种描述性脚本语言，可以嵌入 HTML文件中，无须编译即可在浏览器中运 行 n特点： 是一种脚本语言 基于对象的语言 简单性、安全性 动态性与跨平台性 编写第一个JavaScript脚本 例：6-1.htm JavaScript与Java的区别 nJava是Sun公司推出的新一代完全面向对象的程 序设计语言，支持类和继承，主要应用于网络程 序设计；JavaScript只是基于对象的，用于编写 网页中的脚本。 nJava程序需要编译，用Java虚拟机执行； JavaScript源代码无须编译，由浏览器解释执行 。 nJava程序可以单独执行，但JavaScript程序只能 嵌入HTML中，不能单独运行。 nJava程序的编辑、编译需要专门的开发工具； JavaScript不需要特殊的开发环境，一般的文本 编辑器即可。 6.1.2 JavaScript编程基础 1.JavaScript程序的编辑和调试 n编辑：文本编辑器 n嵌入到HTML文件中的方法 使用标记 例6-1.htm 将JavaScript程序以扩展名“.js”单独存放，再引 入： 例6-2.htm 注意： nJavaScript大小写敏感 n语句后用“;”结束 n注释符号 单行注释：/这里是注释内容 多行注释：/* 这里是注释内容 */ 2.常量和变量 n常量：整型、实型、布尔型、字符型、空 值Null、特殊字符 n变量：整数、字符串、布尔型、实型 n变量的声明： VAR mytest VAR mytest=“this is a book” n注意： 变量名以字母开头，由字母、数字、_组成 变量名区分大小写 3. 运算符和表达式 运算符： n赋值运算符：= += -= *= /= %= n算术运算符：+ - * / % + - n逻辑运算符： Return 表达式; 例6-3.htm n调用函数：函数名（参数表） 例 6-4.htm 函数调用： 函数定义： 5. 程序控制结构 nif nswitch nfor nwhile ndowhile nbreak ncontinue （1）if语句 if （条件） 执行语句 else 执行语句 hour=13; if (hour var d=new Date(); theDay=d.getDay(); /返回星期 switch (theDay) case 5: document.write(“Finally Friday“); break; case 6: document.write(“Super Saturday“); break; case 0: document.write(“Sleepy Sunday“); break; default: document.write(“Im looking forward to this weekend!“); 例：6-6.htm （3）For语句： For(初始化部分；条件部分；更新部分) 语句块； Sum=0 for (i=0;i”); （5）Do while语句 Do 语句块； while (条件) i=0; Do +i; Document.write(i+“”); while (i var i=0 for (i=0;i“); 例：6-7.htm （7）continue语句 n将打断当前这次循环，而继续执行下一个循环值 var i=0 for (i=0;i”); 例：6-8.htm 6. 事件的概念 n事件是浏览器响应用户操作的机制，JavaScript 的事件处理功能可改变浏览器响应这些操作的方 式，开发出更具有交互性并易使用的页面。 n事件说明用户与web页面交互操作时产生的操作 。 n响应某个事件，而进行的处理过程称为事件处理 ，进行这种处理的代码称为事件处理器。例如： 链接(Link)事件 窗口(window)事件 图形(Image)事件 窗体(Form)事件 n常用事件表 实例： nonclick：6-9.htm nonchange：6-10.htm nonselect：6-11.htm nonfocus：6-12.htm nonblur：6-13.htm nonload：6-14.htm nonunload：6-15.htm nonmouseover：6-16.htm nonmouseout：6-16.htm nonsubmit：6-17.htm 6.1.3 JavaScript对象 1.对象的概念 n对象由两种元素构成： 一组包含数据的属性 允许对属性中所包含的数据进行操作的方法 n如： document.bgColor： document.title： document.write： n对象的类型： 内建对象 用户自定义对象 2.自定义对象 n构造对象的属性 n定义对象的方法 function print() document.write(“书名为”++”); document.write(“作者为”+this.author+”); document.write(“出版社为”+this.publisher+”); document.write(“出版时间为”+this.date+”); document.write(“印数为”+this.num+”); function book(name, author, publisher, date, num) =name; this.author=author; this.publisher=publisher; this.date=date; this.num=num; this.print=print; 构造函数的名字 即对象名 this为一个特殊 对象，即当前构造 函数正在创建的对 象 每个对象必须定 义构造函数 3.对象的引用 n 引用对象，用new创建对象的实例 var 对象实例名new 对象名(实在参数表) 如： var book1=new book(“语文”,“集体编”,”人民教 育出版社”,”1999”,10000); n引用对象成员属性： 对象实例名.属性成员名 如：bookname= n引用对象方法成员： 对象实例名.方法成员名 book1.print 例：6-18.htm 4.有关对象操作的语句 （1）forin语句 n格式：for (变量名 in 对象实例名) n作用：对已有对象实例的所有属性进行操 作的控制循环，无须知道对象中属性的个 数 n例：6-19.htm “) var obj1=new person(“黎明“,18); var obj2=new book(“语文“,“集体编“,“人民教育出版社“,5.5); Show(obj1); Show(obj2); / (2) with语句 n格式： with object /引用object成员时，可不加前缀 n如： document.write(book1.title); document.write(book1.author); document.write(book1.publisher); n 改为： with book1 document.write(title); document.write(author); document.write(publisher); 6.1.4 常用的内建对象和函数 1.数组对象 n定义数组：var 数组名new Array(数组长度值 ) var arr1=new Array() Var arr2=new Array(10) n下标从0开始 ”); n语法： var String 对象实例名=new String(string) var String 对象实例名=字符串值 n如： str1=new String(“This is a sample.”); str2=“This is a sample.”; 2.String对象 3.Math对象 nMath对象本身就是一个实例，由系统创建 的，称为静态对象，不能用new创建Math 对象实例。 n方法： sin/cos/tan/asin exp/log/sqrt/abs/round random n如：Math.sin(3.2) 4.Date对象 n语法： var Date 对象名=new Date(parameters) 无参数：获得当前日期和时间 “月 日，年 时:分:秒” 创建指定日期和时间的实例 “年,月,日,时,分,秒” 创建指定日期和时间的实例 n方法： 获取年月日：getYear、getMonth、getDate 获取时间：getHour、getMinutes、getSeconds 获取星期：getDay 例：6-20.htm 6-21.htm 例6-21.htm 时间： 日期： 6.2 JavaScript的浏览器对象 6.2.1 Navigator对象树 nNavigator：封装浏览器名称、版本等信息 nWindow：封装有关窗口的属性和窗口操作 nScreen：屏幕对象 nHistory：包含浏览器的浏览历史信息 nLocation：包含基于当前URL的信息 nFrame：在浏览器中使用框架时用到该对象 nDocument：代表当前HTML文档 nForm：包含表单的属性和操作 nAnchor：包含页面中锚点的信息 nButton，radio等：Form的下层对象，对应Form 中的相应元素 navigator screen window history location frames; Frame document anchors; links; Link applets embeds forms; Form Button Checkbox elements; Element Hidden Password Radio Reset Select options; Option Submit Text Textarea images; Image 浏览浏览 器对对象 屏幕对对象 窗口对对象 历历史对对象 地址对对象 框架对对象 文档对对象 连连接对对象 Java小程序对对象 插件对对象 表单对单对 象 按钮对钮对 象 复选选框对对象 表单单元素对对象 隐隐藏对对象 密码输码输 入区对对象 单选单选 域对对象 重置按钮对钮对 象 选择选择 区（下拉菜单单、列表）对对 象 选择项对选择项对 象 提交按钮对钮对 象 文本框对对象 多行文本输输入区对对象 图图片对对象 6.2.2 Navigator对象 n浏览器对象，反映了当前使用的浏览器的资料。 n常用属性： appCodeName：返回浏览器的代码名字 ，通常返回 Mozilla appName：返回浏览器名。IE 返回 Microsoft Internet Explorer ，NN 返回 Netscape。 appVersion：返回浏览器版本，包括了大版本号、小版本号、语 言、操作平台等信息。 platform：返回浏览器的操作平台，对于 Windows 9x 上的浏览器 ，返回 Win32。 userAgent：返回以上全部信息。例如，IE5.01 返回 Mozilla/4.0 (compatible; MSIE 5.01; Windows 98)。 javaEnabled()：返回一个布尔值，代表当前浏览器允许不允许 Java。 mimeType：浏览器中可以使用的MIME类型 plugins：浏览器中可以使用的插件 n例：6-22.htm 6.2.3 screen对象 n反映了当前用户的屏幕设置。 n属性 width：返回屏幕的宽度（像素数）。 height：返回屏幕的高度。 colorDepth：返回当前颜色设置所用的位数 - 1 ：黑白；8：256色；16：增强色；24/32：真 彩色 n例：6-23.htm 6.2.4 window对象 n窗口对象，最大的对象，它描述的是一个浏览器 窗口。一般要引用它的属性和方法时，不需要用 “window.xxx”这种形式，而直接使用“xxx”。 1.与窗口有关的属性：使用时，这些属性名称前不 加对象名 parent：当前窗口或框架的父窗口，在框架页面中使用 self/window ：当前窗口，最常用的是“self.close()”，放 在标记中：“关闭 窗口”。 top：主窗口，是所有下级窗口的父窗口 2.与浏览器状态有关的属性： nstatus：窗口下方的“状态栏”所显示的内容。通过对 status 赋值，可以改变状态栏的显示 ndefaultStatus：状态栏显示的默认值 如： 搜狐 3.与对话框有关的方法： nalert(字符串)：显示字符串，无返回值 nconfirm(字符串)：确定返回“True”，否则返回“False” nprompt(字符串1,字符串2)：字符串1为显示内容，字符串 2为输入框默认内容，确定返回输入框内容，取消返回null 4.与窗口生成、关闭有关的方法 nopen方法： 格式：open(“URL”,”WindowName”,”窗口参数”) top=#窗口顶部离开屏幕顶部的像素数 left=#窗口左端离开屏幕左端的像素数 width=#窗口的宽度 height=#窗口的高度 menubar=.窗口有没有菜单，取值yes或no toolbar=.窗口有没有工具条，取值yes或no location=.窗口有没有地址栏，取值yes或no directories=.窗口有没有连接区，取值yes或no scrollbars=.窗口有没有滚动条，取值yes或no status=.窗口有没有状态栏，取值yes或no resizable=.窗口给不给调整大小，取值yes或no 例：6-24.htm n 曲阜师范大学 nclose方法 例：6-24.htm 超链接方式： 关闭窗口 关闭窗口 按钮方式： 5.与窗口焦点有关的方法 nfocus()：使窗口获得焦点 nblur()：使窗口失去焦点 6.与超时有关的方法 nsetTimeout(“表达式”,time)：每隔time 毫秒将重新对表 达式求值一次，返回一个标志 nclearTimeout(timeId)：清除指定的超时设置，timeId是 setTimeout返回的标志 n例：6-21.htm 6.其他属性和方法 nopener：一个窗口名，是由open()打开的最新窗口 nframes：一个数组，数组内的各成员是窗口内的各帧 nscroll(x,y)方法：使窗口滚动到x,y处 8.常用事件： nonload nonunload n onresize n onblur n onfocus nonerror 例：6-25.htm n内容： defaultStatus=“这是一个window对象使用实例”; window对象使用实例 请输入您的姓名： 请输入您的电话： n内容：定义函数 function confSubmit() ok=confirm(“您确定输入正确吗？“); if (ok=true) var nw=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); else alert(“请您重新输入“); 6.2.5 Document对象 1.Document对象的属性 n（1）数值属性：Document对象的数值变量形式的属性 （2）数组属性 nanchor对象和anchors数组 document.anchors 是一个数组，包含了文档中所有 锚标记（包含 name 属性的标记），按照在文档中 的次序，从 0 开始给每个锚标记定义了一个下标。 nlink对象和link数组 document.links 也是一个数组，包含了文档中所有连 接标记（包含 href 属性的标记和标记段里 的标记），按照在文档中的次序，从 0 开始给 每个连接标记定义了一个下标。 属性： nprotocol：协议 nhostname：主机名或IP地址 nport：端口号 nhost：主机名和端口号 npathname：路径 nhash：锚点名 nsearch：查询信息 nhref：整个URL 例：6-26.htm nimage对象和images数组 HTML文件中的一个标记对应一个image 对象 image对象的属性： nname nsrc nwidth nheight nborder nhspace nvspace 一个HTML文件中的各个标记所对应的 image对象，按照在文件中出现的先后顺序形 成数组images n例：6-26.htm body内容： var ImageArray=new Array(); for(i=1;i nhead内容： var ImageNum=1; function Begin() document.MyImage.src=ImageArrayImageNum.src; ImageNum+; if(ImageNum3) ImageNum=1; 2.Document对象的方法 nwrite和writeln document.write(“欢迎访问本主页”); document.write(“您是第”+i+”个访问本站的贵宾 ”); document.write(“您是第”,i,”个访问本站的贵宾 ”); nopen：打开一个已存在的文件或创建一个 新文件来写入内容 nclose：关闭文件 nclear：清理文件中的内容 6.2.6 Form对象 1.Form对象的属性 action name method target encoding：被发送数据的编码方式，对应enctype属 性 elements：一个数组，元素是表单各个输入域对象， 即form子对象 length：表单中输入域的个数 n例：6-28.htm 例：6-28.htm document.write(“本网页共有“+document.forms.length+“个表单。它们是： “); for(var i=0;i“); document.write(“该表单共有：“+document.formsi.length+“个元素“); 2.Form对象的方法 nsubmit： 触发submit事件，触发后，该表单中用户输入 的数据将被提交给相应的服务器程序 onSubmit事件处理返回false值来阻止数据的提 交，可以实现对用户输入数据合法性的检查 nreset 恢复各输入域的值为初始值 触发onReset事件处理的执行 n例：6-29.htm n6-29.htm body内容： 请输入您的手机号码： nhead内容：函数定义 function Verify() var Tel=document.TelForm.TelNo.value; if (Tel.length=11) alert(“您输入的号码为：“+Tel); else alert(“您输入的号码位数不正确!“); return false; 3.Form对象的子对象 n按钮对象：submit、reset、button name、type、value、width、height、form（ 按钮所属的表单） 事件处理：onClick、onSubmit、onFocus ntext、textarea对象：onSelect、onChange 、onFocus、onBlur npassword对象：没有onClick事件，其他同 text ncheckbox、radio对象：checked属性 nselect对象 6.2.7 History对象和Location对象 1.History对象 n历史清单对象，保存窗口访问过的URL n属性： current：当前历史项的URL length：历史列表中的项数 next：下一个历史项的URL previous：前一个历史项的URL n方法： back：转到前一个URL forward：转到后一个URL go：转到历史列表中与当前URL位置相距i的URL nHistory.go(-1) 后退 nHistory.go(1) 前进 nHistory.go(0) 刷新 n例：6-30.htm 2.Location对象 n用于存储当前的URL信息，以可对该对象赋 值改变当前的URL n属性同link对象 n例: Window.location.href=“” window.location=“” 6.2.8 Frame对象 n一个Frame对象对应一个标记定义 n属性： name length：框架中包含的子框架数目 parent self、window top frames数组：当前窗口中的所有框架 n方法： blur focus setTimeout clearTimeout n事件处理： onload onunload 实例：合法性验证 6-31.htm function submitit(myform) if (myform.username.value=“) alert(“用户名不能为空！“); myform.username.focus(); return false; if (myform.username.value.length 表单设置：表单设置： n n );“ 6.3 Dreamweaver 中的行为 6.3.1 行为概述 n行为是一种事件和动