当前位置： >>
网页设计与制作 第十章讲稿
《网页设计与制作教程》作者：孟显勇 北京理工大学出版社第十章 Javascript? ?? ??Javascript是由Netscape公司开发的基于对象脚 本语言，而不是面向对象的脚本语言。 基于对象是指Javascript使用已经存在的系统对 象进行程序设计，通过调用和设置对象的方法和 属性实现对页面对象的控制。 为保证扩展性Javascript也提供了用户自定义对 象的功能。J avascript可以被嵌入到HTML文档中，通过控制 页面内的文本、图像、视频等页面对象实现动态 效果。 JavaScript主要应用于客户端脚本程序，常用于 验证客户端输入数据和制作网页特效。10.1 JavaScript基础????Javascript是基于对象的脚本语言，对象 主要包含属性和方法两个基本元素。 属性就是对象具有的特征，例如文字的颜 色、大小、字体等。 方法就是对象能执行的操作，比如输出信 息到浏览器窗口就是一个对象方法。 Javascript中对象主要包括Javascript内 部对象、用户自定义对象和HTML页面内对 象。10.1.1 语法?JavaScript脚本语言与其它程序语言类似， 也拥有自己的基本数据类型、常量和变量、 表达式等。10.1.1 语法基本数据类型???几种常用的JavaScript基本数据类型： 数值型：包括整数和浮点数。整数包括正整数、0、 负整数，可以用十进制、八进制和十六进制表示。 八进制数以0开头表示，如“0123”表示八进制数 “123”。 十六进制数以0x开头表示，如“0xEF”表示十六 进制数“EF”。浮点数用于存储高精度的小数。如： “8.19”，“2.7e6”，“3”，“8e-10”。10.1.1 语法10.1.1 语法基本数据类 型??字符串型：是用双引号或单引号括起来的 任意长度的一串字符。 JavaScript中在引号里再嵌套引号时需要 前面加上转义字符斜杠“\”，其中\?表示单 引号、\”表示双引号、\n表示换行符、\r表 示回车等。10.1.1 语法???基本数据类型 逻辑型：表示逻辑值，逻辑型变量只有两 个值可选：true(真)和false（假）。 true和false属于JavaScript的保留字，它 们是“常数”。 空值：JavaScript中空值用null表示，表 示什么都没有。10.1.1 语法????常量和变量 常量 常量是指数值保持不变的量。 常量可以是一个数字，也可以是一串字符，常量 值可以为整型、实型、逻辑型、字符串型。 “null”是一个特殊的JavaScript常量，当变量未 定义，或者未赋值之前，它的值就是“null”， 另外，企图调用一个不存在的对象时也会返回 null值10.1.1 语法? ???变量 变量是指其值可以改变的量。 JavaScript脚本语言具有在没有事先定义（声明） 变量的情况下对变量直接使用的特点，并且可以 在变量中存储任何类型的值。 而像Java和C这样的程序语言，必须在使用变量 前对其进行定义（声明），同时变量只能存储定 义类型的值。 JavaScript用关键字var定义变量，或使用赋值 的形式定义变量。变量在程序的主要作用是存取 数据，即提供存放信息的容器。10.1.1 语法JavaScript中的变量命名需要注意以下几点： ? Javascript定义的变量只能包含字母、数 字和下划线 ? 并且只能以字母或下划线开头 ? 并且Javascript的变量名是区分大小写的。?不能使用JavaScript的保留字作为关键字， 例如，var、 int、double、true等。10.1.1 语法?如果变量名是由多个单词组成习惯上第一 个单词用小写，其它单词的第一个字母用 大写。如myVariable和 myAnotherVariable。在对变量命名时，最好使变量的名字与其 功能对应，这样定义便于阅读和管理代码。?10.1.2 运算符?运算符是用于各种运算的符号， JavaScript中常用的运算符包括赋值运算 符、算术运算符、比较运算符和逻辑运算 符。10.1.2 运算符? ??赋值运算符 赋值运算符是将一个值赋给另外一个变量， JavaScript赋值运算符主要包括：基本赋值运算 符“=”，复合赋值运算符：+=，-=，*=，/= 和%=。 例如，下面一段赋值代码： x=100； //将值100赋值给变量x a+=10; //是赋值表达式a=a+10的简写形式赋值运算符的结合性是从右到左，每个赋值表达 式都有一个值，即赋值运算符右边的值。?10.1.2 运算符?算术运算符 算术运算符的操作数和结果都是数值型值， JavaScript算术运算符分为双目运算符和单目运 算符。双目运算符包括：+、-、*、/、%（取模）、| （按位或）、&（按位与）等。 单目运算符包括：！（取反）、~（取补）、++ （自增1）、--（自减1）。??10.1.2 运算符???比较运算符 比较运算符又叫关系运算符，比较运算符 的操作数主要是字符串或数字。 比较运算符对参与运算的操作数进行比较， 得到逻辑型结果值，即true或false。 常用的比较运算符有：==（相等）、！= （不等）、&（小于）、&（大于）、& = （小于或等于）、& =（大于或等于）。10.1.2 运算符?逻辑运算符 逻辑运算符用于逻辑运算，运算对象和结果都是逻辑值， 常用的逻辑运算符如下： &&表示逻辑与运算，是双目运算符。运算规则为：仅当 两个参与运算的数都为true时，运算结果才为true，否则 结果为false。 ||表示逻辑或运算，是双目运算。运算规则为：只要参与 运算的数有一个是true时，运算结果就为true，否则结果 为false。 !表示逻辑非运算，是单目运算。运算规则为：结果是对 当前的操作数的值取反。???10.1.3 控制和循环语句??程序语言通过控制语句和循环语句对数据 和对象的进行复杂的控制，实现各种程序 功能。 JavaScript脚本语言提供了常用的的程序 控制语句和循环控制语句。10.1.3 控制和循环语句?If选择控制语句 Javascript中If条件语句是选择控制语句， 控制当某一条件满足时执行一个语句或一 个语句组，语句或语句组用“｛｝”括起 来，每个语句用分号结尾。10.1.3 控制和循环语句? ? ?根据选择条件的数量可以将if语句分成三类： 只有一种选择时的if语句结构： if(表述式) ｛语句组;｝ 有两种选择时的if语句结构： If（表达式） ｛语句组1;｝ else ｛语句组2;｝ 表示表达式成立执行语句组1，否则执行语句组2。?10.1.3 控制和循环语句? ?表示有两种以上的选择时的if语句结构： If（表达式1） ｛语句组1;｝ Else if（表达式2） ｛语句组2;｝ Else if（表达式3） ｛语句组3;｝ ﹒﹒﹒﹒﹒﹒ Else ｛语句组n;｝?程序【例10-1】实现了一个条件选择语句，制作季度判断程序，首 先获取系统当前时间，提取时间中月份信息，并根据月份进行判断， 效果如图10-1所示。图10-1 if…else控制语句10.1.3 控制和循环语句?程序（ch10-1.html）代码如下： &html& &body& &script type=“text/javascript”& var d = new Date() var time = d.getMonth() if (time&=3) { document.write(“&b&这是第一季度&/b&”) } else if (time&3 && time&=6) { document.write(“&b&这是第二季度&/b&”) } else if (time&6 && time&=8) { document.write(“&b&这是第三季度&/b&”) } else { document.write(“&b&这是第四季度&/b&”) } &/script& &/body& &/html&10.1.3 控制和循环语句?While循环控制语句 Javascript循环控制语句是指在循环控制条件满足时，可 以控制程序块中的代码重复执行。循环语句主要有while 循环语句和do…while循环语句，结构分别是： While循环： while(控制条件) ｛ 语句组； ｝??10.1.3 控制和循环语句?While循环运行规则：当执行while循环前先判断 控制条件是否满足，如果控制条件不满足，则循 环体内的语句组不会被执行，如果控制条件满足， 语句组会重复执行，直到控制条件不满足为止。do…while循环： do ｛ 语句组； ｝while（控制条件）?10.1.3 控制和循环语句?do…while循环运行规则：首先执行循环体 内的语句组，然后对控制条件进行判断， 如果控制条件满足，继续执行循环体内语 句组，否则跳出循环，执行循环体后面的 语句。10.1.3 控制和循环语句? ?for循环语句Javascript还提供for循环语句实现循环控制功能， 功能与while循环类似，for循环便于计算循环执 行次数，for循环体定义的格式为： for(初始化表达式;循环控制条件;循环变量自增 或自减) ｛ 语句组; ｝?10.1.3 控制和循环语句?For循环运算规则：执行for循环前先执行 初始化表达式，然后判断循环控制条件， 如果循环控制条件不满足，跳出循环体执 行循环体下面的语句，如果条件满足，执 行循环体，执行一次循环体后，循环变量 自增或自减，一次循环结束。然后判断循 环控制条件，进行下一次循环，直到控制 条件不满足为止。10.1.3 控制和循环语句?switch选择控制语句 Javascript中switch语句用于实现选择控制，功能与if选择语句类似，当有 多个条件时可以使用switch语句实现控制，switch语句的格式如下： switch(表达式) { case 值1: 语句组1; B case 值2: 语句组2; B ﹒﹒﹒﹒﹒﹒ default: 语句组n; B }?10.1.3 控制和循环语句?Switch控制语句执行规则：首先计算表达 式，如果表达式的值与值1相同，就执行语 句组1，如果表达式值与值2相同，就执行 语句组2，以此类推，当表达式值与上述值 都不相同时，执行语句组n。10.1.3 控制和循环语句?程序【例10-2】使用for循环控制输出信息，效果如图10-2所示，程序 （ch10-2.html）代码如下： &html& &head& &title&for循环示例&/title& &/head& &body& &p& &script type=“text/javascript”& for (i = 0; i &= 5; i++) { document.write(“Javascript祝大家学习快乐！”) document.write(“&br&”) } &/script& &/p& &/body& &/html&10.1.3 控制和循环语句? ? ?break和continue语句 Javascript程序设计过程中有时需要终止循环体的循环，其中break和 continue语句就可以实现终止循环的功能。 break语句与continue语句有明显的区别，break语句是终止整个循环，跳 出循环体执行循环体下一个语句； continue语句是终止本次循环，继续执行循环体的下一次循环。嵌入break 语句的循环代码段如下： i=1; while(i&100){ if(i==10) else {语句组;} i++; } 上述代码段中，如果执行到i=10时，执行break语句,则整个while循环结束。??10.1.3 控制和循环语句?continue语句是结束本次循环，但会继续进行下一次的循环，嵌入 continue语句的循环代码如下： i=1; while(i&100){ if(i==10) {i++;} else {语句组;} i++; } 上述代码段中，当i=10时此次循环结束，继续下一次循环，一直循 环到i=100为止。??10.2 Javascript函数???Javascript函数包括自定义函数和内部函数（也 叫内置函数），函数是进行模块化程序设计的基 础，是完成特定功能的程序块。 Javascript脚本语言提供了大量的内部函数，设 计开发人员可以直接使用这些内部函数设计网页 脚本程序。 Javascript也提供了自定义函数的开发方式，根 据功能要求自定义函数。Javascript语言是基于 对象的脚本语言，其中函数都作为一个对象被维 护、运行和调用。10.2.1 内部函数?Javascript提供了大量的内部函数供开发 人员使用，本节主要介绍网页设计过程中 常用的Javascript内部函数。10.2.1 内部函数常规函数 ? Javascript常规函数主要有： ? alert函数功能是弹出一个提示信息对话框，对话框上只 包含一个确定按钮； ? conform函数的功能是弹出一个确认对话框，包含确定按 钮和取消按钮； ? prompt函数的功能是弹出一个输入信息对话框，可以获 取客户输入数据； ? eval函数的功能是对一个表达式进行计算并得到运算结果； ? parseInt函数的功能是将字符串转换成为数值。下面一段 代码描述了常规函数的使用方法。10.2.1 内部函数?&script language=&javascript&& alert(&这是一个提示对话框！&); prompt(&这是一个输入对话框，可以输入数据。&,& 在这里输入 你想输入的数据！&); confirm(&这是一个确定对话框！&); document.write(&eval函数可以为你计算表达式的值： &+eval(8*8+16)+&&br&&); document.write(&parse函数可以将字符串变成整数值：&) document.write(eval(parseInt(&12&)+parseInt(&18&))); &/script&10.2.1 内部函数时间和日期函数 ? Javascript常用的时间和日期函数主要有两类， 一类是获取时间和日期的函数，此类函数以get开 头； ? 另外一类是设置时间和日期函数，此类函数以set 开头。 ? 其中获取日期和时间函数主要有：getDate、 getDay、getHours、getMinutes、getMonth、 getSeconds、getTime。 ? 设置时间和日期的函数名与获取函数对应，例如 getDate函数就对应着setDate函数。10.2.1 内部函数?程序【例10-3】使用时间日期函数输出系统时间和日期，程序（ch10-3.html）代码如下： &script language=&javascript&& var date, str = &今天是: &; date = new Date(); str += date.getYear()+&年&; str += (date.getMonth() + 1) + &月&; // “月”返回值为0~11 str += date.getDate() + &日&; // “日”的返回值为1~31 day = date.getDay(); // “星期”返回值为0~6 switch(day) { case 0: str +=& 星期日&; case 1: str +=& 星期一&; case 2: str +=& 星期二&; case 3: str +=& 星期三&; case 4: str +=& 星期四&; case 5: str +=& 星期五&; default: str +=& 星期六&; } str+=& 当前北京时间是：& str+=date.getHours()+&点&; str+=date.getMinutes()+&分&; str+=date.getSeconds()+&秒。&; document.write(str); &/script&10.2.1 内部函数数学函数 ? Javascript提供了常用数学函数，例如，乘方、 三角和对数函数等。 ? Javascript数学函数来源于Math对象的属性和方 法，Math对象的属性表示的是一些常用的数学常 量，Math对象的方法是常用的数学函数。 ? 其中常用的数学常量及其含义请见表10-1所示 ? 常用的数学函数及其功能请见表10-2所示。表10-1 Math对象的属性值Math对象属性名 Math.e Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E Math.PI Math.SQRT1_2 含义 表示自然对数的底，常量2.718 2的自然对数值 10的自然对数值 底数为2，e的对数 以10为底，e的对数 圆周率π 的值 1/2的平方根表10-2 Math对象的函数函数名 Math.max( ) Math.min( ) Math.pow( ) Math.random( ) 功能 求两个数的最大值 求两个数的最小值 求乘方 求0～1的随机数 函数名 Math.abs( ) 功能 求绝对值Math.acos( ) 求反余弦值 Math.asin( ) 求反正弦值 Math.atan( ) 求反正切值Math.round( ) 四舍五入Math.sin( ) Math.sqrt( ) Math.cos( ) 求正弦值 求平方根 求余弦值Math.ceil( ) 求大于或等于此数的最小整 数Math.exp( ) Math.floor( ) Math.log( ) 求e的指数次方 求小于或等于此数的最大整 数 求一个数的自然对数值。10.2.1 内部函数?字符串函数 Javascript中的字符串函数主要实现对字 符串的处理，包括对文字大小和颜色的修 改，获取字符串的长度和对字符串进行查 找等，主要字符串处理函数如表10-3所示。表10-3 字符串处理函数函数名 anchor big blink bold 功能 将字符串定义为一个锚点 字符串字体变为大号字体 实现字符串闪烁功能 使字符串字体加粗charAtfixed fontcolor fontsize indexOf返回指定位置的字符，起始值为0字符串字体设置为固定宽度字体 设置字符串字体颜色 设置字符串字体大小 从被查找字符串左边开始，返回找到子串的位置值，左起位置值为0italicslastIndexOf length link small设置字符串字体为斜体从被查找字符串右边开始，返回找到子串的位置值，左起位置值为0 获取字符串长度值 将字符串设置为超级链接 字符串以小号字体显示strikesub substring sup toLowerCase在字符串文字上添加删除线将字符串设置为下标 返回字符串中一段字符 将字符串设置为上标 将字符串转换为小写。10.2.1 内部函数?程序【例10-4】使用常用字符串处理函数实现基本的字符串处理功能，程序（ch10-4.html）代 码如下： &SCRIPT language=&JavaScript&& //定义字符串格式 var strTest=&欢迎您学习Javascript！&; strTest=strTest.fontcolor(&red&); strTest=strTest.italics(); strTest=strTest.fontsize(&18&) document.write(strTest+&&br&&); //查找字符串 var strText = &各位同学大家好，希望大家能学会Javascript！&; var strKeyword = strText.indexOf(&学会&); document.write(&恭喜您，搜索的位置在：&+strKeyword+&&br&&); //定义一个锚点 var strAnchor = &这是锚点& ; strAnchor = strAnchor.anchor(&AnchorName&); document.write(strAnchor+&&br&&); //定义一个超级链接 var strCluster = &这是超级链接&; strCluster = strCluster.link(&&); document.write(strCluster+&&br&&); &/SCRIPT&?10.2.1 内部函数??数组函数 Javascript的数组函数实际上是Javascript语言 中Array对象的方法，创建数组可以使用new运 算符创建一个Array对象，通过Array对象的方法 实现数组元素的控制和操作。 Javascript数组的长度是可以扩展的，也就是 Javascript提供了动态数组的功能，根据程序设 计的需要来扩展数组的长度。引用数组的方式与 其它程序设计语言一样，即通过数组的下标来引 用，第一个数组元素的下标为[0]。10.2.1 内部函数?Javascript定义数组的格式有两种：第一种格式定义一个数组对象：var 数组 变量名称 = new Array(); 第二种格式直接定义数组变量并赋值：var arrayName = Array(&how&,&are&,&you&);??10.2.1 内部函数?访问数组对象的属性和方法格式为：数组 变量名.属性（或方法） 数组对象的属性length的使用格式为：数 组变量名.length，其返回值为数组的长度， 即数组元素的个数。 通过给数组的length属性赋值可以修改数 组的长度。??10.2.1 内部函数?数组对象的常用方法请参考表10-4所示，下面代码段使 用数组的sort方法对数据进行排序，输出结果为： “f,e,d,c,b,a”，代码段如下： &script& var array1=new Array(“c”,“a”,“b”); var array2=new Array(“e”,“d”,“f”); array1.sort(); array2.sort(); var array3 = array1.concat(array2); array3.reverse(); document.write( array3 ); &/script&?表10-4主要数组函数函数名 concat( ) sort( ) toString() reverse( ) join( ) pop( ) 功能 连接两个或多个数组 对数组的元素进行排序 将数组转换为字符串 倒置数组中元素的顺序 将数组中的所有元素放入一个字符串 返回数组的最后一个元素并删除shift( )splice( )返回数组的第一个元素并删除插入、删除或替换数组的元素10.2.2 自定义函数?Javascript程序设计过程中，开发设计人员可以 根据程序设计需要自定义函数，自定义函数使用 function关键字，其定义格式主要有四种方式：function functionName1(参数1，参数 2，…){函数体；} var functionName2=function(参数1，参 数2，…){函数体；}??10.2.2 自定义函数??var functionName4=function functionName 3 (参数1，参数 2，…){函数体；} var functionName5=new function(参数1，参数2，…，函数体；)10.2.2 自定义函数?程序【例10-5】自定义了一个Javascript函数，程序（ch10-5.html）代码 如下： &html& &head& &script type=&text/javascript&& function popMessage() { alert(&欢迎大家学习Javascript！&) } &/script& &/head& &body& &form& &input type=&button& value=&点击，显示提示信息& onclick=&popMessage()& & &/form& &/body& &/html&?10.3 内部对象?Javascript语言是基于对象的语言，而不 是面向对象的语言，主要是由于 Javascript语言没有提供更多的像抽象、 继承和重载等面向对象语言的一些基本功 能和方法，而是主要通过提供大量的系统 对象，使程序设计人员基于这些系统对象 设计和开发系统，所以将其称为基于对象 的语言。10.3 内部对象????Javascript对象由属性（properties）和方法 （methods）两个基本元素构成。 对象的属性引用通过点运算符“﹒”，格式为： “ObjectName. properties”，即“对象﹒属 性”， 例如，document.form.name.value表示获取 表单上控件的值； 对象的方法的引用也是通过运算符“﹒”，格式为： “ObjectName.methods()”，即“对象﹒ 方法（）”。10.3 内部对象? ? ???Javascript引用对象的属性和方法有两种情况： 第一种是静态对象，引用静态对象时不需要为对 象先创建实例； 第二种是动态对象，引用动态对象时需要先创建 一个该对象的实例，然后才能引用该实例的属性 和方法，即该对象动态创建的。 例如，数学运算对象Math就属于静态对象，日期 和事件对象Date就是动态对象。 Javascript提供了大量的内部对象以及对象的方 法和属性，Javascript内部对象层次结构如图 10-3所示。图10-3 Javascript内部对象结构windowframenavigato r linkdocumen t formhistorylocationanchorbodyelementtextpasswor dsubmitcheckbo xbutton10.3.1 窗口对象Window?窗口对象Window主要实现对网页窗口的操 作和控制，常用Windows对象的方法如表 10-5所示。表10-5 常用Window对象方法方法 功能 方法 功能open( )moveTo( ) promt( )创建一个新窗口移动窗口到（x，y） 弹出提示对话框alert( )back( ) forward( ) home( ) stop( ) print( ) close( )显示提示信息窗口后退页面 前进页面 返回主页 终止加载页面 打印页面 关闭窗口setTimeout( ) 定时器设置 clearTimeout( 取消定时器 ) setInterval( ) 设定一个时间间隔 clearInterval 取消时间间隔设定 ( )10.3.1 窗口对象?Window窗口对象Window的方法open是打开 一个新的窗口，其调用格式为：open(&URL &, &窗口名称&, &窗口属性&); 其中，&URL &表示新窗口页面的URL（网页地 址）； &窗口名称&定义的是新窗口的名称，窗口名称与 “&a href=”...“ target=”...“&”里的“target” 属性功能相同； &窗口属性&定义新窗口的外观样式的属性，可以 定义多个属性，属性间用逗号隔开。? ? ??10.3.1 窗口对象??Window下面代码段使用Window对象open方 法创建一个新窗口，open方法的参数及其含义如 表10-6所示，open方法创建新窗口代码如下： window.open(&new.html&, &WindowName&, &width=400,height=100, menubar= yes, toolbar=yes, location=yes, status=yes, scrollbars=yes, resizable=yes&)表10-6 Window对象open方法主要 参数Open参数 top left width height menubar 参数含义 新窗口与屏幕的上边距 新窗口与屏幕的左边距 新窗口的宽度 新窗口的高度 新窗口是否显示菜单栏，yes显示， no不显示toolbarlocation scrollbars新窗口是否显示工具栏，yes显示， no不显示新窗口是否显示地址栏，yes显示， no不显示 新窗口是否显示滚动条，yes有， no不显示statusresizable新窗口是否显示状态栏，yes显示， no不显示新窗口尺寸是否可调，yes可调， no不可调10.3.2Javascript文档对象??文档对象document代表的是整个的HTML页面， 使用文档对象可以访问和控制页面中的所有元素。 文档对象是显示于当前窗口中的文档，从 Javascript对象结构图中可以知道document对 象是window对象的一个属性，用 window.document格式来调用一个文档对象， 当表示当前窗口时省略window，只写 document。 Javascript的主要文档对象及其含义如表10-7所 示，Javascript文档对象主要属性及其含义请见 表10-8所示，Javascript文档对象包含的主要方 法如表10-9所示。表10-7 主要文档对象文档对象 all anchors links forms 含义 代表页面中所有对象 代表页面中的所有锚对象 代表页面中所有超级链接对象 代表页面中的所有表单对象images代表页面中的所有图像对象表10-8 文档对象document主要属性文档属性 body title URL referrer domain fileCreatedDate fileSize 含义 对文档内body标签的内容进行控制 对文档的标题内容进行控制 对文档的URL的内容进行控制 获取当前文档前一个页面的URL 获取服务器域名 返回文件建立日期 获取文档大小cookiebgColor linkColor alinkColor vlinkColor对文档的所有cookies进行控制对文档背景色进行控制 对文档内超级链接的颜色进行控制 对文档内激活的超级链接颜色进行控制 对文档内已经访问过的超级链接的颜色进行控制表10-9 文档对象方法文档对象方法 getElementsByName() getElementById() getElementsByTagName() write() writeln() 含义 通过页面对象的名字来控制页面对象 通过页面对象的ID值来控制页面对象 通过页面对象的标签名来控制页面对象 输出字符串到文档 输出字符串到文档，输出文字后自动换行open()close()在窗口里打开新文档关闭文档输出，并显示文档内容10.3.2Javascript文档对象? ?程序【例10-6】列举一些常用文档对象方法和属性的使用方法，程序（ch10-6.html）代码如下： &html& &head& &title&文档对象&/title& &/head& &body & &script& document.bgColor=&FF99CC&; document.write(&页面背景色RGB值：&+document.bgColor+&&br /&&); document.body.text= &blue&; document.write(&文字颜色RGB值：&+document.body.text+&&br /&&); document.write(&文件创建日期是：&+document.fileCreatedDate+&&br /&&); document.write(&文档大小是：&+document.fileSize+&Byte&); &/script& &form name=&form_1&& &input name=&btn_1& type=&button& value=&添加标签文字& onClick=&document.getElementById('text_1').innerHTML = '欢迎您！';&& &input name=&btn_2& type=&button& value=&修改标签文字颜色和字体& onClick=&document.getElementById('text_1').style.color ='yellow'; document.getElementById('text_1').style.fontSize =&& &/form& &div id=&text_1&&&&/div& &/body& &/html&10.3.3 历史对象history??历史对象history保存的是历史浏览列表，可以对 历史访问页面进行操作，实现在历史页面中跳转 的功能。 History对象是Window对象的一个属性，可通过 window.history属性来访问。如果引用的是当前 窗口的History对象，可以省略window。 History对象的属性length获取历史页面的数量， history对象的主要方法有back表示后退到上一 个页面，forward表示前进到下一个页面，方法 go是跳到指定的一个页面。?10.3.3 历史对象history? ?History对象的back方法调用格式： history.back()，功能为后退到浏览历史 列表中的前一个页面，功能与history.go(1)相同。History对象的forward方法调用格式： history.forward()，功能为前进到浏览历 史列表中的下一个页面，功能与 history.go(1)相同。?10.3.3 历史对象history? ?History对象的go方法调用格式： history. go (number)，功能为跳转到浏 览历史列表中的指定页面，其中number参 数表示要访问的页面在浏览历史列表中的 相对位置，其中-1代表前一个，0代表当前， 1代表后一个等。10.3.3 历史对象history?程序【例10-7】实现了history对象的功能，实现在多个页面之间的跳转，程序 （ch10-7.html）代码如下： &/head& &body& &script type=&text/javascript&& document.write( &历史数量：&+history.length ); &/script& &br& &a href=&third.html&&链接到第三个页面&/a& &form& &input type=&button& value=&&-后退& onclick=&history.back()& /& &input type=&button& value=&前进-&& onclick=&history.forward()& /&&br& &input type=&button& value=&go方法实现后退& onclick=&history.go(-1)& /& &input type=&button& value=&go方法实现前进& onclick=&history.go(1)& /& &br& &input type=&button& value=&跳转& onclick=&history.go(-2)& /& &input type=&button& value=&刷新当前页& onclick=&history.go(0)& /& &/form& &/body& &/html&?10.4 表单校验?Javascript常用于客户端数据的校验，就 是在将表单输入的数据传输到服务器之前 首先对数据的有效性进行校验。10.4.1 客户输入数据的有效性校验????Javascript的客户数据校验功能，既可以保证数 据的有效性，又可以防止无效数据传递到服务器， 浪费服务器更多资源和网络带宽。 程序【例10-8】实现表单数据校验的功能 首先，对输入的用户名和密码是否为空进行校验， 如果为空提示信息。 其次，对用户E-mail地址的字符进行校验，如果 含有非法字符提示错误信息，最后，判断E-mail 地址是否含有“@”，“.”两个关键字符，如果没 有提示出错信息。10.4.1 客户输入数据的有效性校验?程序（ch10-8.html）代码如下： &html& &body& &script language =&JavaScript&& function formCheck() { var flag = var charSet = &abcdefghijklmnopqrstuvwxyz_-.@&; var rForm.userMail. rForm.userName.value==&&) {alert(&用户名不能为空！&); } if(checkChar==&&) {alert(&邮件名不能为空！&); } for (var i=0; i & checkChar. i++) { var subChar = checkChar.charAt(i).toLowerCase(); if (charSet.indexOf(subChar) != -1) alert(&E-mail中包含非法字符: & + subChar); flag = } if(checkChar.indexOf(&@&)== -1||checkChar.indexOf(&.&)== -1) flag= if(flag){ alert(&恭喜您，您的电子邮件是有效！&); } else { alert(&对不起，您的电子邮件是无效！&); } } &/script& &form name=&inforForm& method=&post& onSubmit=&return formCheck()&& &p& &label&用户名： &/label& &input type=text name=userName& &/p& &p& &label&E-MAIL： &/label&&input type=text name=userMail& &/p& &p& &input type=submit value=&提交信息& /& &/p& &/form& &/body& &/html&10.5 事件响应?Windows操作系统通过消息处理机制来实 现人机交互，当点击键盘或鼠标时会触发 相应的键盘或鼠标事件，操作系统接收到 相应事件后将其交给相应的应用程序处理。10.5.1 事件处理的基本概念???Javascript将浏览器为了响应某个事件而 进行的处理过程，叫做事件处理。 浏览器接收到键盘或鼠标等事件时，调用 相应的事件处理函数，完成对事件的处理， 这样就实现了人机的信息交互。 Javascript事件主要有窗口事件、鼠标事 件、键盘事件和表单事件等。10.5.1 事件处理的基本概念Javascript处理事件的格式，主要有以下几种：? ?标签内添加事件处理在标签中添加事件的格式为： &标签 事件1=&事件处理程序1&， 事件2=&事 件处理程序2& ，…& 例如下列代码段： &body onload=&alert('欢迎您光临本站！ ')& onunload=&alert('谢谢浏览！')&&?10.5.1 事件处理的基本概念?上述代码段在&BODY&标签里添加事件处理程序， onload事件是指加载页面时触发的事件，onunload事件 是指退出页面时触发的事件，当两事件触发时自动调用 alert函数显示提示信息。?指定对象的事件处理为特定对象添加事件的格式为： &script language=&JavaScript& for=&Javascript对象& event=&事件&& 事件处理代码； &/script&?10.5.1 事件处理的基本概念?例如下列代码段：&script language=&JavaScript& for=&window& event=&onload&& alert('欢迎您光临本站！'); &/script&?10.5.1 事件处理的基本概念?上述代码段通过for属性指向对象Window，当对 象Window触发onload事件触时调用该事件处理 过程。 调用function函数 定义相应的事件处理函数的格式：Function 函 数名（函数参数表）｛函数体；｝当页面对象触发某个事件时调用函数的格式： Javascript对象.事件 = 事件处理程序;??10.5.1 事件处理的基本概念?例如，下面的代码定义了一个processFun 函数，当widow对象触发了onload事件时， 调用事件处理程序processFun。function processFun() { alert('欢迎您光临本站！');} 页面调用代码为：window.onload = processF?10.5.2 JavaScript事件处理应用??Javascript的窗口事件主要是指对窗口操 作时产生的事件，鼠标事件是点击鼠标时 产生的事件，键盘事件是点击键盘时触发 的事件，表单事件是对表单对象操作时产 生的事件。 常用Javascript事件及其含义请见表1010所示。表10-10 Javascript事件事件 onclick onDblClick onMouseDown 含义 单击鼠标 双击鼠标 按下鼠标按钮 事件 onLoad onUnload onMove 含义 加载当前页面 离开当前页面 窗口移动onMouseUponMouseOver弹起鼠标按钮鼠标指向对象onResizeonScroll窗口改变大小窗口滚动滚动条onMouseMoveonKeyPress onKeyDown onKeyUp onError鼠标移动onStop页面停止加载或下载表单提交 表单上控件失去焦点 表单控件内容发生改 变 表单控件获取焦点键盘上某个指定的键按 onSubmit 下 键盘上有键被按下 键盘上有键被弹起 页面出错 onBlur onChange onFocus10.5.2 JavaScript事件处理应用?鼠标单击事件应用 当鼠标单击时触发onclick事件，程序【例10-9】实现Javascript脚 本代码响应onclick事件，显示信息提示对话框，执行效果如图10-4 所示，程序（ch10-9.html）代码如下： &html& &head& &title&单击事件&/title& &/head& &body& &Form& &Input type=“button” value=“点击按钮” onClick=“alert(?欢迎 学习Javascript！’)”& &/Form& &/body& &/html&?图10-4 鼠标事件10.5.2 JavaScript事件处理应用?&html& &head& &script type=“text/javascript”& function mouseOver() { document.imgOut.src =“images/Garden.jpg” } function mouseOut() { document.imgOut.src =“images/flower.jpg” } &/script& &/head& &body& &img bordercolor=“blue” border=“3” height=“180” width=“180” src=“images/flower.jpg” name=“imgOut” onmouseOver=“mouseOver()” onmouseOut=“mouseOut()” /& &/body& &/html&10.5.3 出错处理Javascript程序执行过程中出现错误时触发 onerror事件，浏览器将相关错误信息发给 错误处理函数，错误处理函数的参数表依 次获得数据包括： ? 第一个参数获得错误消息内容 ? 第二个参数获得发生错误的页面URL ? 第三个参数获得发生错误的代码行。10.5.3 出错处理??程序【例10-11】实现捕捉页面错误事件并将具 体错误信息显示出来，程序中设计一个错误处理 函数errorMessage，其三个参数依次取名为 message，url，line（函数参数名称可以自己定 义）。 程序模拟页面指定对象不能找到时发生的错误， 即当点击页面按钮时触发onclick事件，但事件处 理函数order不存在，因此，发生不能找到对象 的错误，触发Window对象的onerror事件，显 示提示信息，页面效果如图10-7所示。图10-5 触发onmouseover事件10.5.3 出错处理? ?程序(ch10-11.html)代码如下： &html& &head& &script type=“text/javascript”& window.onerror=errorM function errorMessage(message,url,line) { var messageOut=“”; messageOut=“页面执行出现错误！\n\n”; messageOut+=“错误类型: ” + message + “\n”; messageOut+=“错误页面: ” + url + “\n”; messageOut+=“错误位于第: ” + line + “行。\n”; alert(messageOut); } &/script& &/head& &body& &input type=“button” value=“提交信息” onclick=“order()” /& &/body& &/html&10.6 JavaScript应用?使用Javascript不仅可以对客户端的数据 进行校验，还可以制作一些网页动态的特 效。Javascript语言与HTML语言中的层结 合可以设计出网页多种动态的特效。10.6.1 循环显示图片动画??使用Dreamweaver可以设计Javascript代码， 点击菜单栏的【文件】→【新建】，弹出【文档 新建】对话框，选择【类别】基本页面，选择 【基本页面】→【Javascript】，创建 Javascript文件。 Dreamweaver可以创建一个单独存放 Javascript代码的文件，文件扩展名为.Js。需要 调用.js文件的页面，将.js文件引用到程序代码中 即可，引用格式为：&script language=“javascript” src=“include.js”&&/script&。10.6.1 循环显示图片动画?程序【例10-12】使用Javascript设计了 一个循环显示图片的页面动画，此类动画 常用于广告宣传，在各大门户网站经常看 到。页面对四张图像循环显示，将四张图 像的路径信息存储于数组的四个元素中， 通过定时器实现四张图像循环显示。10.6.1 循环显示图片动画? ?程序（ch10-12.html）代码如下： &html& &head& &title&循环顺序显示图片&/title& &script language=“javascript” src=“include.js”&&/script& &/head& &body onLoad=“changeImage(?initialImage?)”& &img name=“initialImage” src=“flower.jpg” width=180 height=180& &/body& &/html& 使用Dreamweaver创建程序【例10-12】的Javascript文件，新建一个Javascript文件（include.js）代码如下： var interval=1000; var imageNumber=0; imageArray=new Array(); imageArray[imageNumber++]=new addImage(“images/flower.jpg”); imageArray[imageNumber++]=new addImage(“images/green.jpg”); imageArray[imageNumber++]=new addImage(“images/Garden.jpg”); imageArray[imageNumber++]=new addImage(“images/blue.jpg”); var allImages=imageArray. function addImage(imagePath){ this.imageMember=new Image(); this.imageMember.src=imageP } function getNewImage(){ imageNumber=(imageNumber+1)%allI var new_image=imageArray[imageNumber].imageMember. return(new_image); } function changeImage(iniImg){ var nextImage=getNewImage(); document[iniImg].src=nextI var reCall=“changeImage(?”+iniImg+“?)”; setTimeout(reCall,interval); }本章小结?本章主要讲解了Javascript脚本语言的基本知识， 需要重点掌握Javascript基本数据类型和控制语 句的基本知识；掌握Javascript的内部函数的功 能和基本用法，并熟悉自定义函数的特点和基本 设计、使用方法；掌握Javascript对象的概念， 并掌握Javascript对象的属性和方法的含义，并 熟悉常用方法和属性的功能和使用方法；掌握 Javascript事件响应机制，通过常用的事件处理 程序来了解事件处理的过程；通过Javascript具 体应用实例了解Javascript在网页设计的功能和 所处地位。思考与练习1. 2. 3.4.5.请简述Javascript常用的数据类型，并分别举例 说明。 请简述Javascript常用的算术运算符、关系运算 符和逻辑运算符。 请简述Javascript常用的条件控制语句和循环控 制语句的功能和语法结构。请简述Javascript内 部函数和自定义函数的区别，并举例说出六个常 用内部函数的功能。 请简述Javascript对象的方法和属性的含义，并 举例说明属性和方法引用的格式。 请简述Javascript的事件处理相应机制，并举例 说明常用事件处理的方法。实例1.请制作一个六张图像循环显示的 Javascript动画效果，要求将Javascript 代码放入单独的include.js文件中，显示 动画的页面文件（case10.html）通过引 用include.js文件实现动画效果。
更多搜索：
All rights reserved Powered by
文档资料库内容来自网络，如有侵犯请联系***。