《网页制作与网站设计 第五章.ppt》由会员分享，可在线阅读，更多相关《网页制作与网站设计 第五章.ppt（66页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第五章 JavaScript语言与行为 网页制作与网站设计网页制作与网站设计第五章第五章 JavaScript语言语言与行为与行为【本章内容】5.1 JavaScript简介 5.2 JavaScript对象 5.3 行 为 网页制作与网站设计网页制作与网站设计第第5.1节节 JavaScript简介简介【本节内容】一.插入JavaScript脚本的方式 二.JavaScript语法基础 三.JavaScript事件 网页制作与网站设计网页制作与网站设计一一.插入插入JavaScript脚本的方式脚本的方式 脚本（脚本（ScriptScript）实际上就是一段程序，用来完成某些特殊实际上就是一
2、段程序，用来完成某些特殊的功能。脚本程序既可以在服务器端运行（称为服务器端脚本，的功能。脚本程序既可以在服务器端运行（称为服务器端脚本，例如例如ASPASP脚本、脚本、PHPPHP脚本等），也可以直接在浏览器端运行（称脚本等），也可以直接在浏览器端运行（称为客户端脚本）。为客户端脚本）。目前目前JavaScriptJavaScript是使用最广泛的脚是使用最广泛的脚本语言。本语言。网页中插入网页中插入JavaScript脚本的三种方式：脚本的三种方式：使用使用Script标记符插入脚本；标记符插入脚本；直接将脚本嵌入到直接将脚本嵌入到HTML标记符中；标记符中；在链接的外部脚本文件中。在链接的
3、外部脚本文件中。网页制作与网站设计网页制作与网站设计一一.插入插入JavaScript脚本的方式脚本的方式1.使用使用ScriptScript标记标记符插入脚本符插入脚本 方法：方法：把脚本把脚本标记标记符符 Script置于网置于网页页上的某一上的某一个地方，然后在其中加入脚本程序。个地方，然后在其中加入脚本程序。语法如下：语法如下：JavaScript语句；语句；注意：注意：最好将脚本代码放在最好将脚本代码放在HEADHEAD部分以确保容易维护。部分以确保容易维护。使用使用ScriptScript标记标记符符时时，一般同，一般同时时用用LanguageLanguage属性和属性和TypeT
4、ype属性明确属性明确规规定脚本的定脚本的类类型，以适型，以适应应不同的不同的浏览浏览器。器。网页制作与网站设计网页制作与网站设计一一.插入插入JavaScript脚本的方式脚本的方式例：例：HTML输出的文字。输出的文字。document.write(JavaScript的的Document.write()方法输出的文字。方法输出的文字。);/*JavaScript注释一：注释一：document.write()是在网页中输出文档的方法是在网页中输出文档的方法.*/网页制作与网站设计网页制作与网站设计一一.插入插入JavaScript脚本的方式脚本的方式当与之间有多条JavaScript语句
5、时，一般要用将它们括起来,它的作用是:当浏览器支持JavaScript时,它不起作用；若浏览器不支持JavaScript,将里面的内容全部作为注释,不提示错误。例如网页中含有：网页制作与网站设计网页制作与网站设计一一.插入插入JavaScript脚本的方式脚本的方式2.在在HTMLHTML标记符内添加标记符内添加JavaScriptJavaScript脚本脚本 在html标记内直接使用JavaScript语句的一般格式是：JavaScript:脚本命令语句;有时也省略词语JavaScript:，直接书写语句。例如有如下网页代码：网页制作与网站设计网页制作与网站设计一一.插入插入JavaScri
6、pt脚本的方式脚本的方式3.3.链接外部脚本文件链接外部脚本文件 把一段脚本存放在一个单独的扩展名为.js的文件内，然后在需要使用此脚本的网页中链接此文件的路径和文件名。例、5-3.js内容：function message()document.write(2010年上海世博会成功举办。年上海世博会成功举办。);alert(上海欢迎您！上海欢迎您！);网页制作与网站设计网页制作与网站设计一一.插入插入JavaScript脚本的方式脚本的方式3.3.链接外部脚本文件链接外部脚本文件 5-3-1.html：Js 网页制作与网站设计网页制作与网站设计二、二、JavaScriptJavaScript语
7、法基础语法基础1.JavaScriptJavaScript 变量所谓变量，就是已命名的存储单元。变量的主要作所谓变量，就是已命名的存储单元。变量的主要作用是存取数据和提供存放信息的容器。与用是存取数据和提供存放信息的容器。与JavaJava和其和其它一些高级语言（例如它一些高级语言（例如C C语言）不同，语言）不同，JavaScriptJavaScript并并不要求指定变量中包含的数据类型，这种特性通常不要求指定变量中包含的数据类型，这种特性通常使使 JavaScript JavaScript 被称为弱类型的语言。被称为弱类型的语言。在在JavaScriptJavaScript中，我们可以简单
8、地用中，我们可以简单地用varvar 变量来定变量来定义所有的变量，而不管将在变量中存放什么类型的义所有的变量，而不管将在变量中存放什么类型的数值。数值。网页制作与网站设计网页制作与网站设计二、二、JavaScriptJavaScript语法基础语法基础 JavaScriptJavaScript支持以下几种数据支持以下几种数据类型型：值数字：如：如26,3.1415926,-3.0526,3.1415926,-3.05E10E10；逻辑值：true,falsetrue,false；字符串：如字符串：如”Hello!Hello!”;null(null(空空):):包括一个包括一个nullnull
9、（空）值，定义空的或不存在的引用。JavaScriptJavaScript变量命名约定变量命名约定：变量名中可以包含数字变量名中可以包含数字0909、大小写字母和下划线；、大小写字母和下划线；变量名的首字符必须为字母或下划线；变量名的首字符必须为字母或下划线；变量名对大小写敏感；变量名对大小写敏感；变量名的长度必须在一行内；变量名的长度必须在一行内；变量名中不能有空格或其它标点符号。变量名中不能有空格或其它标点符号。网页制作与网站设计网页制作与网站设计二、二、JavaScriptJavaScript语法基础语法基础 2.2.JavaScript运算符与表达式运算符与表达式运算符运算符 运运算算
10、符符是是完完成成操操作作的的一一系系列列符符号号，也也称称为为操操作作符符。运运算算符符用用于于将将一一个个或或几几个个值值变变成成结结果果值值，使使用用运运算算符符的的值值称称为为算算子子或或操操作作数数。常常用用的的4 4类类运运算算符符为为算算术术运算符、逻辑运算符、比较运算符和连接运算符。运算符、逻辑运算符、比较运算符和连接运算符。表达式表达式 表表达达式式是是运运算算符符和和操操作作数数的的组组合合。表表达达式式可可以以分分为为算算术术表表达达式式、字字符符串串表表达达式式、赋赋值值表表达达式式以以及及逻逻辑表达式等等。辑表达式等等。网页制作与网站设计网页制作与网站设计二、二、Jav
11、aScriptJavaScript语法基础语法基础3.JavaScript3.JavaScript语句句 (1)(1)条件语句条件语句if if 语句语句 if if 语句是最基本的条件语句，它的格式为：语句是最基本的条件语句，它的格式为：if(condition)/ifif(condition)/if的判断语句，括号里是条件。的判断语句，括号里是条件。代码块代码块;/大括号内里是要执行的代码。大括号内里是要执行的代码。网页制作与网站设计网页制作与网站设计二、二、JavaScriptJavaScript语法基础语法基础 3.JavaScriptJavaScript语句句 (1)(1)条件语句条
12、件语句if else if else 语句语句如如果果需需要要在在表表达达式式为为假假时时执执行行另另外外一一个个语语句句，则则可可以以使使用用elseelse关键字扩展关键字扩展ifif语句。语句。if elseif else语句的格式为：语句的格式为：if(condition)if(condition)代码块代码块 1;1;elseelse 代码块代码块 2;2;网页制作与网站设计网页制作与网站设计二、二、JavaScriptJavaScript语法基础语法基础 3.JavaScriptJavaScript语句语句 (1)(1)条件语句条件语句switchswitch语句语句switch(
13、condition)switch(condition)/注意：必须用大括号将所有的注意：必须用大括号将所有的 case case 括起来。括起来。Case value1:Case value1:Statement1;Statement1;/注意：此外即使用了多条语句，也不能使用括号。注意：此外即使用了多条语句，也不能使用括号。Break;Break;/*/*注意：如果不使用注意：如果不使用breakbreak语句断开各个语句断开各个casecase，则在执行此则在执行此casecase中的语句结束后会接着执行下中的语句结束后会接着执行下一个一个casecase中的语句中的语句*/*/Case
14、value2Case value2Statement2;Statement2;Break;Break;.Case Case valueNvalueNstatementNstatementN;break;break;default:default:statement;statement;如果需要对同一个如果需要对同一个表达式表达式 进行多次判进行多次判断，那么就可以使断，那么就可以使用用switchswitch语句语句,格式格式如右：如右：网页制作与网站设计网页制作与网站设计二、二、JavaScriptJavaScript语法基础语法基础 3.JavaScriptJavaScript语句语句（2
15、 2）循环语句循环语句for for 循环语句循环语句 语法格式如下：语法格式如下：for(initial;condition;adjust)for(initial;condition;adjust)循环体代码；循环体代码；可以看出，可以看出，forfor循环语句由两部分构成：条件和循环体。循环语句由两部分构成：条件和循环体。网页制作与网站设计网页制作与网站设计二、二、JavaScriptJavaScript语法基础语法基础 3.JavaScriptJavaScript语句语句（2 2）循环语句循环语句例：例：var i=0;for(i=0;i100;i+)document.write(i+)
16、;网页制作与网站设计网页制作与网站设计二、二、JavaScriptJavaScript语法基础语法基础 3.JavaScript3.JavaScript语句语句 （2 2）循环语句循环语句 while while 循环语句循环语句 whilewhile循循环环语语句句是是另另一一种种基基本本的的循循环环语语句句，当当表表达达式为真时执行循环体语句，格式如下：式为真时执行循环体语句，格式如下：while(expressionwhile(expression)循环体代码；循环体代码；网页制作与网站设计网页制作与网站设计二、二、JavaScriptJavaScript语法基础语法基础 3.JavaS
17、criptJavaScript语句语句（2 2）循环语句循环语句 do while do while 循循环语句句 do while do while 语句是语句是whilewhile语句的变体，格式如下：语句的变体，格式如下：dodo 循环体代码；循环体代码；while(expression)while(expression)网页制作与网站设计网页制作与网站设计二、二、JavaScriptJavaScript语法基础语法基础 3.JavaScript3.JavaScript语句语句 （2 2）循环语句循环语句 break break 和和 continue continue 语句进一步控制循
18、环语句进一步控制循环 breakbreak语语句句提提供供无无条条件件跳跳当当前前出出循循环环结结构构的的功功能能。在多数情况下，在多数情况下，breakbreak语句都是单独使用的。语句都是单独使用的。continuecontinue语语句句的的作作用用是是终终止止当当次次循循环环，跳跳转转到到循循环环的的开开始始处处继继续续执执行行下下一一次次的的循循环环。同同样样，continuecontinue语句大多数情况下是单独使用的。语句大多数情况下是单独使用的。网页制作与网站设计网页制作与网站设计二、二、JavaScriptJavaScript语法基础语法基础 4.JavaScript4.Ja
19、vaScript函数函数 （1 1）定义函数定义函数函函数数是是已已定定义义的的代代码码块块，代代码码块块中中的的语语句句被被作作为为一一个个整体引用和执行。整体引用和执行。定义函数的格式如下：定义函数的格式如下：function functionName(parameter1,parameter2,.)function functionName(parameter1,parameter2,.)Statements Statements；网页制作与网站设计网页制作与网站设计二、二、JavaScriptJavaScript语法基础语法基础 4.JavaScriptJavaScript函数函数（2
20、）函数的返回值 如如果果需需要要函函数数返返回回值值，那那么么可可以以使使用用returnreturn语语句句,需需要要返返回回的的值值应应放放在在returnreturn之之后后。如如果果returnreturn后后没没有有指指明明数数值值或或没没有有returnreturn语语句句，则则函函数数返返回回值值为为不不确确定定值值。例例如如，清清单单5-15-1中中定定义义了了一一个个函函数数名名为为msgmsg的函数，它没有指明返回值。的函数，它没有指明返回值。另另外外，函函数数返返回回值值也也可可以以直直接接赋赋予予给给变变量量或或用用于表达式中，如于表达式中，如5-65-6中定义函数，且
21、有返回值。中定义函数，且有返回值。网页制作与网站设计网页制作与网站设计二、二、JavaScriptJavaScript语法基础语法基础 4.JavaScriptJavaScript函数函数例：例：定义函数定义函数function he(a,b)return(a+b);document.write(”8+7=”+he(8,7);网页制作与网站设计网页制作与网站设计三、三、JavaScriptJavaScript事件事件 事事件件驱驱动动是是JavaScript的的基基本本特特征征之之一一，JavaScript定定义义了了若若干干事事件件，如如鼠鼠标标的的单单击击、双双击击、按按下下键键盘盘、页页
22、面面被被载载入入等等等等。在在网网页页中中常常通过这些事件来触发程序或函数的执行。常常通过这些事件来触发程序或函数的执行。JavaScript事件分为鼠标键盘相关事件、浏览器相关事件和表单事件分为鼠标键盘相关事件、浏览器相关事件和表单样式相关事件几类。样式相关事件几类。与鼠标和键盘相关的事件有与鼠标和键盘相关的事件有:onClick、onDbClick、onMouseOver、onMouseOut、onMouseDown、onMouseUp、onMouseMve、onKeyPress、onKeyDown、onKeyUp；与浏览器有关的事件有：与浏览器有关的事件有：onLoad、onUnload
23、、onError、onAbort、onResize、onScroll；与表单样式有关的事件有：与表单样式有关的事件有：onFocus、onBlur、onChange、onSelect、onSubmit、onReset。网页制作与网站设计网页制作与网站设计三、三、JavaScriptJavaScript事件事件 1.onClick onClick事件在鼠标单击某对象时触发事件在鼠标单击某对象时触发,这些对象可以这些对象可以是单选框、复选框、列表框、提交按钮、重置按钮或一般是单选框、复选框、列表框、提交按钮、重置按钮或一般按钮、链接图片等。按钮、链接图片等。（1）应用于按钮对象）应用于按钮对象该代
24、码实现的功能是：在单击按钮时，网页的背景色变为该代码实现的功能是：在单击按钮时，网页的背景色变为兰色。其中兰色。其中bgColor是是document对象的属性，对大小写对象的属性，对大小写敏感。敏感。网页制作与网站设计网页制作与网站设计三、三、JavaScriptJavaScript事件事件 1.onClick（2）应用于图片对象）应用于图片对象该代码实现的功能是：先显示一个该代码实现的功能是：先显示一个50*50大小的图片（大小的图片（a.jpg），单击），单击图片后，弹出一个新窗口显示图片后，弹出一个新窗口显示500*400的图片（的图片（a.jpg）。）。（3）应用于复选框对象）应用于
25、复选框对象该代码实现的功能是：在勾选复选框时，弹出提示框该代码实现的功能是：在勾选复选框时，弹出提示框“您的信息将被您的信息将被保存保存”。网页制作与网站设计网页制作与网站设计三、三、JavaScriptJavaScript事件事件 1.onClick（4）应用于列表对象）应用于列表对象新浪新浪搜狐搜狐网易网易该代码的功能是：当点击相应选项时，页面自动跳转到相应的网址去。该代码的功能是：当点击相应选项时，页面自动跳转到相应的网址去。（5）应用于文本）应用于文本上海世博园上海世博园放大字体放大字体缩小字体缩小字体该代码的功能是：通过点击链接文字来放大或缩小目标文字该代码的功能是：通过点击链接文字
26、来放大或缩小目标文字“上海世博园上海世博园”大大小。小。网页制作与网站设计网页制作与网站设计三、三、JavaScriptJavaScript事件事件2.onChange当对象内容发生改变时触发，这些对象可以是文本字段、密码字段、文本域、菜单等。（1）应用于文本字段输入您的年龄：input type=text name=age onChange=JavaScript:if(this.value该代码的功能是对用户输入的年龄进行判断，并根据是否小于18岁做出相应动作。网页制作与网站设计网页制作与网站设计三、三、JavaScriptJavaScript事件事件 （2）应用于菜单对象）应用于菜单对象新
27、浪新浪搜狐搜狐网易网易该代码的功能是当选择菜单中的相应选项时，页面自动跳该代码的功能是当选择菜单中的相应选项时，页面自动跳转到相应的网址。转到相应的网址。网页制作与网站设计网页制作与网站设计三、三、JavaScriptJavaScript事件事件3.onMouseMove在鼠标移动时触发此事件。下面代码的功能是：当鼠标在在鼠标移动时触发此事件。下面代码的功能是：当鼠标在图片上移动时，在图片上方的图片上移动时，在图片上方的区域会实时显示当区域会实时显示当前的鼠标位置。前的鼠标位置。网页制作与网站设计网页制作与网站设计三、三、JavaScriptJavaScript事件事件4.onMouseOve
28、r和和onMouseOut 当鼠标移入或移出对象时分别触发这两个事件，这些对象可以是图片、按当鼠标移入或移出对象时分别触发这两个事件，这些对象可以是图片、按钮、表格、文字等网页元素。这两个事件通常成对使用，实现动态效果。钮、表格、文字等网页元素。这两个事件通常成对使用，实现动态效果。（1）用于图片交换）用于图片交换该代码实现的功能是：当鼠标移到图片上时，会在同一位置显示另一幅图片；该代码实现的功能是：当鼠标移到图片上时，会在同一位置显示另一幅图片；当鼠标移出时，又恢复显示原图片。当鼠标移出时，又恢复显示原图片。（2）用于放大图片）用于放大图片 该代码实现的功能是：当鼠标移到图片上时，图片自动放
29、大显示；当鼠标该代码实现的功能是：当鼠标移到图片上时，图片自动放大显示；当鼠标移出图片时，图片又恢复原尺寸。移出图片时，图片又恢复原尺寸。网页制作与网站设计网页制作与网站设计三、三、JavaScriptJavaScript事件事件4.onMouseOver和和onMouseOut 当鼠标移入或移出对象时分别触发这两个事件，这些对象可以是图片、按当鼠标移入或移出对象时分别触发这两个事件，这些对象可以是图片、按钮、表格、文字等网页元素。这两个事件通常成对使用，实现动态效果。钮、表格、文字等网页元素。这两个事件通常成对使用，实现动态效果。（1）用于图片交换）用于图片交换该代码实现的功能是：当鼠标移到
30、图片上时，会在同一位置显示另一幅图片；该代码实现的功能是：当鼠标移到图片上时，会在同一位置显示另一幅图片；当鼠标移出时，又恢复显示原图片。当鼠标移出时，又恢复显示原图片。（2）用于放大图片）用于放大图片 该代码实现的功能是：当鼠标移到图片上时，图片自动放大显示；当鼠标该代码实现的功能是：当鼠标移到图片上时，图片自动放大显示；当鼠标移出图片时，图片又恢复原尺寸。移出图片时，图片又恢复原尺寸。网页制作与网站设计网页制作与网站设计第第5.2节节 JavaScriptJavaScript对对象象【本节内容】一.JavaScript内置对象 二.浏览器对象 网页制作与网站设计网页制作与网站设计一一.Ja
31、vaScript JavaScript内置内置对象象 什么是什么是对象象 对象是客观世界中存在的实体。对象包含两个要素：对象是客观世界中存在的实体。对象包含两个要素：用用来来描描述述对对象象特特性性的的一一组组数数据据，也也就就是是若若干干变变量量，通通常称为常称为属性属性；用用来来操操作作对对象象特特性性的的若若干干动动作作，也也就就是是若若干干函函数数，通通常称为常称为方法方法。在在JavaScriptJavaScript中中可可以以操操作作的的对对象象通通常常包包括括两两种种类类型型：浏浏览器对象和览器对象和JavaScriptJavaScript内置对象。内置对象。JavaScript
32、内置对象有String、Array、Date、Math等。网页制作与网站设计网页制作与网站设计一一.JavaScriptJavaScript内置内置对象象 1.StringString对象象 String对象用于对文本字符串进行操作。对象用于对文本字符串进行操作。String对象属性只一个：对象属性只一个：length，即求字符串的长，即求字符串的长度的属性。度的属性。String对象的方法有如下一些：对象的方法有如下一些：italics()/将字符串变以为斜体将字符串变以为斜体bold()/将字符串变以为粗体将字符串变以为粗体big()/将字符串变大显示将字符串变大显示small()/将字符
33、串变小显示将字符串变小显示blink()/将字符串闪烁显示将字符串闪烁显示网页制作与网站设计网页制作与网站设计一一.JavaScriptJavaScript内置内置对象象 1.StringString对象象 fixed()/将字符串固定高亮度显示将字符串固定高亮度显示fontsize(size)/设定字符串字体大小设定字符串字体大小fontcolor(color)/设定字符串颜色设定字符串颜色toLowerCase()/将字符串全部转为小写将字符串全部转为小写toUpperCase()/将字符串全部转为大写将字符串全部转为大写indexOf(子串子串,起始位置起始位置)/从起始位置开始从起始位
34、置开始,求子串在字符串求子串在字符串中首次出现的位置中首次出现的位置substring(起始位置起始位置,结束位置结束位置)/取子串取子串split(特征字符特征字符)/利用特征字符对字符串进行分割利用特征字符对字符串进行分割,然后放在然后放在一个数组中一个数组中网页制作与网站设计网页制作与网站设计一一.JavaScriptJavaScript内置内置对象象 1.StringString对象象（例）（例）!-var str=Hello,How do you do!;/定义一个字符串变量定义一个字符串变量document.write(str+);/输出这个字符串输出这个字符串document.w
35、rite(str.length+);/结果为：结果为：20document.write(str.italics()+);/斜体显示斜体显示document.write(str.bold()+);/粗体显示粗体显示document.write(str.small()+);/变小显示变小显示document.write(str.fontsize(5)+);/蓝色字体蓝色字体document.write(str.fontcolor(blue)+);/显示指定为显示指定为5号字号字document.write(str.toLowerCase()+);/全部转换为小写字母全部转换为小写字母documen
36、t.write(str.toUpperCase()+);/全部转换为大写字母全部转换为大写字母document.write(str.indexOf(you)+);/结果为：结果为：13document.write(str.substring(0,6)+);/结果为：结果为：Hello,-网页制作与网站设计网页制作与网站设计一一.JavaScriptJavaScript内置内置对象象 2.数数组对象象 数数组组对对象象也也叫叫Array Array 对对象象，用用于于实实现现编编程程中中最最见见的的一一种种数数据据结结构构-数数组组。ArrayArray对对象象的的构构造造函函数数有有三三种种，
37、分分别别用用不不同同的的方方式式构构造造一一个个数数组组对对象象（构构造造函函数数是是面面向对象的一个概念，表示生成一个对象的函数）向对象的一个概念，表示生成一个对象的函数）:varvar variable=new Array()variable=new Array()varvar variable=new variable=new Array(intArray(int)varvar variable=new Array(arg1,arg2,.,variable=new Array(arg1,arg2,.,argNargN)网页制作与网站设计网页制作与网站设计一一.JavaScriptJava
38、Script内置内置对象象 getDate()返回一个表示一月中的某一天的整数（只可能是131）getDay()返回一个表示星期几的整数（只可以是06,0表星期日）getHours()返回表示当前时间中的小时部分的整数（023）getSeconds()返回表示当前时间中的秒部分的整数（059）getTime()返回从GMT时间1970年1月1日凌晨到当前Date对象指定时 间之间的时间间隔，以毫秒为单位getMonth()返回表示当前时间中的月的整数（011），注意1月份返 回0,2月份返回1.getYear()返回日期对象中的年份，用2位或4位数字表示toString()返回一个表示日期对象
39、的字符串3.日期日期对象象 日期对象也就是Date对象，它可以表示从年到毫秒的所有日期和时间。DateDate对象的常用方法对象的常用方法网页制作与网站设计网页制作与网站设计一一.JavaScriptJavaScript内置内置对象象 4.MathMath对象象 MathMath对对象象包包含含用用来来进进行行数数学学计计算算的的属属性性和和方方法法，其其属属性性也也就就是是标标准准数数学学常常量量，其其方方法法则则构构成成了了数数学学函函数数库库。MathMath对对象象可可以以在在不不使使用用构构造造函函数数的的情情况况下下使使用用，并并且且所所有有的的属属性性和和方方法法都都是是静静态态
40、的的。MathMath对对象的属性和方法见书本表象的属性和方法见书本表5-25-2所示。所示。网页制作与网站设计网页制作与网站设计二二.浏览器对象浏览器对象 1.文档对象模型文档对象模型 文文档档对对象象模模型型（Document Document Object Object Model,Model,简简称称DOMDOM）是是用用于于表表示示HTMLHTML元元素素以以及及WebWeb浏浏览览器器信信息息的的一一个个模模型型，它它使使脚脚本本能能够够访访问问WebWeb页页上上的的信信息息，并并可可以以访问诸如网页位置等特殊信息。访问诸如网页位置等特殊信息。JavaScriptJavaScri
41、pt对对象象模模型型与与IEIE对对象象模模型型非非常常相相似似，它它们们包包含含相相似似的的对对象象和和事事件件，反反映映了了如如下下图图所所示示的的对对象层次结构。象层次结构。网页制作与网站设计网页制作与网站设计二二.浏览器对象浏览器对象 文档对象模型 网页制作与网站设计网页制作与网站设计二二.浏览器对象浏览器对象 2.2.documentdocument对象对象 documentdocument对对象象代代表表当当前前浏浏览览器器窗窗口口中中的的文文档档，使使用用它它可可以以访访问问到到文文档档中中的的所所有有其其它它对对象象（例例如如图图像像、表表单单等等），因因此此该该对对象象是是实
42、实现现各各种种文文档档功功能能的的最最基基本对象。本对象。documentdocument最常用的属性有：最常用的属性有：（1）all:all:表示文档中所有表示文档中所有HTMLHTML标记符的数组；标记符的数组；（2）bgColorbgColor:表示文档的背景颜色；表示文档的背景颜色；（3）formsforms：表示文档中所有表单的数组；表示文档中所有表单的数组；（4）titletitle：表示文档的标题。表示文档的标题。网页制作与网站设计网页制作与网站设计二二.浏览器对象浏览器对象 2.documentdocument对象对象documentdocument对象的常用事件对象的常用事件
43、 事事件件（eventevent）的的含含义义就就是是用用户户与与WebWeb页页面面交交互互时时产产生生的的操操作作。浏浏览览器器响响应应事事件件并并进进行行处处理理的的过过程程称称为为事事件件处处理理，进进行行这这种种处处理理的的代代码码称称为为事事件件响响应应函函数数。对对于于documentdocument对对象象来来说说，常常用用的的事事件件：onclickonclick 、onloadonload 和和 onunloadonunload事件事件 。网页制作与网站设计网页制作与网站设计二二.浏览器对象浏览器对象 2.documentdocument对象对象 documentdocum
44、ent对象的常对象的常用方法用方法document对象如图所示存在几十种方法 网页制作与网站设计网页制作与网站设计二二.浏览器对象浏览器对象 3.WindowWindow对象对象windowwindow对对象象包包含含了了documentdocument、navigatornavigator、locationlocation、historyhistory等等子子对对象象，是是浏浏览览器器对对象象层层次次中中最最顶顶级级对对象象，代表当前窗口。代表当前窗口。windowwindow对象的常用属性对象的常用属性（1 1）documentdocument：表示窗口中显示的当前文档；表示窗口中显示的当
45、前文档；（2 2）historyhistory：表表示示窗窗口口中中最最近近访访问问过过后后URLURL列列表表;（3 3）location:location:表示窗口中显示的表示窗口中显示的URLURL；（4 4）stausstaus:表示窗口状态栏中的临时信息。表示窗口状态栏中的临时信息。网页制作与网站设计网页制作与网站设计二二.浏览器对象浏览器对象在状态栏中显示文字请看状态栏例如，以下示例显示了如何在状态栏中显示文字，效果如图所示。例如，以下示例显示了如何在状态栏中显示文字，效果如图所示。网页制作与网站设计网页制作与网站设计二二.浏览器对象浏览器对象 3.WindowWindow对象对象
46、 windowwindow对象的常用方法象的常用方法 (1)alert(stringalert(string)：显示提示信息对话框；显示提示信息对话框；(2)clearInterval(interval):(2)clearInterval(interval):清清 除除 由由 参参 数数 传传 入入 的的 先先 前前 用用 setIntervalsetInterval()()方法设置的重复操作；方法设置的重复操作；(3)close(3)close：关闭窗口；关闭窗口；(4)confirm():(4)confirm():显显示示确确认认对对话话框框，其其中中包包含含“确确定定”和和“取取消消”按
47、按钮钮（或或OKOK和和CancelCancel按按钮钮），如如果果用用户户单单击击“确确定定”按钮，按钮，confirm()confirm()返回返回truetrue；相反返回相反返回falsefalse；网页制作与网站设计网页制作与网站设计二二.浏览器对象浏览器对象 3.WindowWindow对象对象window对象的常用方法（5 5）open(pageURL,name,parameters);open(pageURL,name,parameters);创创建建一一个个新新窗窗口口实实例例，该该窗窗口口使使用用namename参参数数作作为为窗窗口口名名，装装入入pageURLpageU
48、RL指指定定的的页页面面，并并按按照照parametersparameters指指定定的的效效果果显示。显示。(6)prompt(string1,string2)(6)prompt(string1,string2)：弹弹出出一一个个键键盘盘输输入入的的提提示示对对话话框框，参参数数string1string1的的内内容容作作为为提提示示信信息息，参数参数string2string2的内容作为文本框中的默认文本。的内容作为文本框中的默认文本。网页制作与网站设计网页制作与网站设计4.formform对象象 formform对对象象也也叫叫表表单单对对象象，是是浏浏览览者者与与网网页页进进行行交交互
49、互的的重重要要工工具具，通通过过使使用用JavaScriptJavaScript中中表表单单中中的的各各种种控控件件对对象象（如如按按钮钮、文文本本域域等等）以以实实现现某某些些单单独独用用HTMLHTML不能实现的功能不能实现的功能。常常见见的的两两个个应应用用-提提交交表表单单时时文文本本域域中中的的最最少少字字限和在文本域输入字数统计来说明限和在文本域输入字数统计来说明formform对象的用法。对象的用法。1.提交表单文本域字数限制：例子见教材提交表单文本域字数限制：例子见教材5-15-10-1.html0-1.html；2 2、统计文本域中的字数：例子见教材统计文本域中的字数：例子见
50、教材5-5-11.html11.html.网页制作与网站设计网页制作与网站设计第第5.3节节 行行 为为【本节内容】一.行为概述 二.可视化编辑行为网页制作与网站设计网页制作与网站设计 一.行为概述 行为（行为（Behavior）是用来动态响应用户操作、改变当前页面）是用来动态响应用户操作、改变当前页面效果或执行特定任务的一种方式。效果或执行特定任务的一种方式。行为由事件（行为由事件（Event）和动作（）和动作（Action）构成。）构成。要在网页中应用行为要在网页中应用行为,需要做好三件事情：需要做好三件事情：选择对象；选择对象；确定对象动作；确定对象动作；选择触发事件。选择触发事件。事件