《网页制作教程（第二版）》-齐建玲-电子教案 CH10 在网页中使用脚本语言

《《网页制作教程（第二版）》-齐建玲-电子教案 CH10 在网页中使用脚本语言》由会员分享，可在线阅读，更多相关《《网页制作教程（第二版）》-齐建玲-电子教案 CH10 在网页中使用脚本语言（45页珍藏版）》请在金锄头文库上搜索。

1、通过本章学习，应该掌握以下内容： JavaScript的特点及运行环境 JavaScript编程基础 JavaScript事件驱动 JavaScript的对象,第10章 在网页中使用JavaScript,10.1 脚本语言简介,JavaScript是Netscape公司推出的跨平台、基于对象的脚本语言，用于客户端与服务器端的应用程序。 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。和VBScript一样，它可以被嵌入到HTML文件中，能直接被浏览器执行，从而产生各种各样的动态网页效果。JavaScript弥补了HTML语言的缺陷，它与HTML、CSS结合被人们称为DHT

2、ML。,（1）脚本编写语言 （2）基于对象 （3）简单性 （4）安全性 （5）动态性 （6）跨平台,10.1.1 JavaScript的特点,10.1.2 JavaScript的运行和编辑环境,运行环境：Internet Explorer 4.0或Netscape Navigator 3.0以上。 编辑环境：任何可以编辑HTML文档的文本编辑器或专门的网页编辑器（FrontPage、Dreamweaver等）。,（1）使用SCRIPT标记符插入脚本 在网页中最常用的一种插入脚本的方式是使用SCRIPT标记符，方法是：把脚本标记符置于网页上的HEAD部分或BODY部分，然后在其中加入脚本程序。尽

3、管可以在网页上的多个位置使用SCRIPT标记符，但最好还是将脚本代码放在HEAD部分，以确保容易维护。,10.1.3 在网页中使用JavaScript, 书写JavaScript时应注意大小写. 在JavaScript中，行尾用换行符作为一行完整代码的终止字符. 若需要将几行代码放在一行中，应使用分号将它们分开. 在JavaScript中，/* 和 */也是注释标记。,用户在编写JavaScript时应注意以下几点：,（2）直接添加脚本 HTML可以直接在表单的输入元素标记符内添加脚本，以响应输入元素的事件。 （3）链接脚本文件 如果同一段脚本要在若干个Web页中使用，则没有必要在多处维护相同

4、的冗余代码，此时可以将脚本放在单独的一个文件里，然后再在任何需要该文件的Web页中调用该文件。 要引用外部脚本文件，应使用SCRIPT标记符的src属性来指定外部脚本文件的URL。,所谓变量，就是程序中一个已命名的存储单元。变量的主要作用是存取数据和提供存放信息的容器。 JavaScript支持的数据类型如下：Number（数字） 、Boolean（布尔） 、String（字符串） 、Null（空） 、Undefined（未定义） 、Object（对象） 。,10.2 JavaScript编程基础,10.2.1 JavaScript变量,在JavaScript中定义变量应遵循以下规则： 必须以

5、字母或下划线（_）开头。 在所说明的范围内必须是唯一的。 用var来定义变量，也可以用赋值语句声明变量，但不能既不用var声明变量，又不给它赋值。,10.2.2 JavaScript运算符,在JavaScript中包括以下8类运算符： （1）算术运算符 ：+、-、*、/、%、+ 、- （2）逻辑运算符：&、|、！ （3）比较运算符： 、=、= =、！= （4）字符串运算符 ：+（字符串接合操作） （5）位操作运算符：&、|、-、,（6）赋值运算符：=、+= 、-=、*=、 =、 =、 &=、 （7）条件运算符：？： （8）其他运算符：、 、（） 、delete 、new 、void,10.2.

6、3 JavaScript表达式,表达式是运算符和操作数的组合。表达式通过求值确定表达式的值，这个值是对操作数实施运算符所确定的运算后产生的结果。有些运算符将数值赋予一个变量，而另一些运算符则可以用在其他表达式中。 由于表达式是以运算符为基础的，因此表达式可以分为算术表达式、字符串表达式、赋值表达式以及逻辑表达式等等。,10.2.4 JavaScript语句,（1）数据声明语句 声明变量的语法如下： var 变量名=初始值 （2）赋值语句 赋值语句是由赋值表达式组成的语句。,1一般语句,（3）注释语句 /：表示单行注释，从“/”开始到本行结束都为注释。 /*/：表示多行注释，从“/*”开始到“*

7、/”结束为注释。,在JavaScript中提供了if语句、if else语句以及switch语句等三种条件语句。 （1）if语句 if（条件） 语句段； （2）if else语句 if（条件） 语句段1； else 语句段2；,2条件语句,（3）switch语句 如果需要对同一个表达式进行多次判断，那么就可以使用switch语句，格式如下： switch（条件） case value1: 语句段1; case value2：语句段2; case value3：语句段3; default：语句段4；,（1）for语句 for（初始化；条件；增量） 语句段； （2）while语句 while（条件

8、） 语句段； ,3循环语句,（3）do while语句 do 语句段； while（条件） （4）break语句 break语句提供无条件跳出循环结构或switch语句的功能。 （5）continue语句 continue语句的作用是终止当次循环，跳转到循环的开始处继续下一轮循环。,4其他语句,除了以上条件语句和循环语句以外，JavaScript中还包括以下语句： 函数调用语句 函数调用语句用于调用函数。 return语句 用于返回函数调用的值。 with语句 用于表示默认对象。 for in语句 用于对一个对象的所有属性进行循环，直到每个属性都访问到。,10.2.5 JavaScript函数

9、,函数是已命名的代码块，代码块中的语句被作为一个整体引用和执行。 定义函数的格式如下： function 函数名（参数1，参数2，） 语句段； return 表达式； ,通常鼠标或热键的动作称为事件（Event），而由鼠标或热键引发的一连串程序的动作称为事件驱动（Event Driver）。比如，当单击鼠标按钮时就产生一个单击（onClick）事件，当打开一个网页时就产生一个网页的载入（onLoad）事件。,10.3 JavaScript的事件驱动,10.3.1 什么是事件,当用户单击鼠标按钮时，产生onClick事件，同时onClick指定的事件处理程序或代码被调用执行。OnClick事件通

10、常在下列基本对象中产生： （1）button（按钮） （2）checkbox（复选框） （3）radio（单选按钮） （4）reset button（重置按钮） （5）submit button（提交按钮）,10.3.2 事件类型,1单击事件onClick,当用户改变表单元素的原有状态后，将产生该表单元素的onChange事件。,2改变事件onChange,当用户选中一段表单文本时，引发该事件。,3选中事件onSelect,当用户单击鼠标或用Tab键激活某一个表单元素时，产生该表单元素的聚焦事件，此时对象被选中。,4聚焦事件onFocus,与onFocus事件相反，当前激活表单元素从激活状态变

11、为非激活状态，即不再拥有焦点、而退到后台时，引发该事件。,5失去焦点事件onBlur,当鼠标指针位于超链接上时，产生onMouseOver事件。,6鼠标移动事件onMouseOver,当文档载入时引发该事件。OnLoad事件的作用是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使其可以被源代码调用。,7载入文件onLoad,当Web页面退出时引发onUnload事件。,8卸载文在件onUnload,对象就是客观世界中存在的特定实体。,10.4 JavaScript的对象,10.4.1 JavaScript的内部对象,JavaScript提供了一些内部对象，下面介绍三种常用的对

12、象，即String对象、Date对象和Math对象。,String对象用来存放字符串，是静态对象。 （1）String对象的属性 String对象只有一个属性，即length，它表示字符串中的所有的字符个数，包括所有符号。 （2）String对象的方法 String对象的方法主要用于有关字符串在Web中的显示、字体大小、颜色、大小写转换等。String对象有19个方法。,1String对象,创建日期对象可以使用以下4种构造函数中的一种： var variable=new Date（） var variable=new Date（milliseconds） var variable=new Da

13、te（string） var variable=new Date（year，month，day，hours，minutes，seconds，milliseconds）,2Date对象,（1）获取Date对象的常用方法,getDate（） 返回一个整数，表示一月中的某一天（131）。 getDay（） 返回一个整数，表示星期中的某一天（06，0表示星期日，6表示星期六）。 getHours（） 返回表示当前时间中的小时部分的整数（023）。 getMinutes（） 返回表示当前时间中的分钟部分的整数（059）。 getMonth（） 返回表示当前日期中月的整数（0-11）。,getSecond

14、s（） 返回表示当前时间中的秒部分的整数（059）。 getTime（） 返回从GMT时间1970年1月1日凌晨到当前Date对象指定的时间之间的毫秒数。 getYear（） 返回日期对象中的年份，用2位或4位数字表示。 toGMTString（） 返回表示日期对象的世界时间的字符串，日期在转换成字符串之前转换到GMT零时区。 toLocalString（） 返回一个表示日期对象所表示的当地时间的字符串。 toString（） 返回一个表示日期对象的字符串。,（2）设置Date对象的常用方法,setDate（） 设置当月号数； setDay（） 设置星期几。 setHours（） 设置小时数。

15、 setMinutes（） 设置分钟数。 setMonth（） 设置当月的月份数。 setSeconds（） 设置秒数。 setTime（） 设置毫秒数。 setYear（） 设置年。,Math对象包含用来进行数学计算的属性和方法。 （1）Math对象的主要属性 Math中提供了6个属性，即：常数E、以10为底的自然对数ln10、以2为底的自然对数ln2、圆周率PI（3.1 4159）、1/2的平方根SQRT1-2、2的平方根SQRT2。,3Math对象,Math对象的主要方法有： 求绝对值：abs（）。 求正弦、余弦值：sin（），cos（）。 求反正弦、反余弦值：asin（），acos（）

16、。 求正切、反正切值：tan（），atan（）。 四舍五入：round（）。 求平方根：sqrt（）。,（2）Math对象的主要方法,常用的浏览器有document对象和Windows对象。 1document对象 document对象代表当前浏览器窗口中的文档，使用它可以访问到文档中的所有其他对象（例如图像、表单等），因此该对象是实现各种文档功能的最基本对象。,10.4.2 浏览器对象,（1）document对象的常用属性 document 对象最常用的属性如下： all 表示文档中所有HTML标记符的数组。 bgcolor 表示文档的背景颜色。 forms 表示文档中所有表单的数组。 title 表示文档的标题。,（2）document对象的常用事件 在客户端脚本中，JavaScript通过对事件进行响应来获得与用户的交互。 document对象的常用事件有：onclick事件，表示鼠标单击时产生的事件；on