网页设计与制作 第9章 在网页中使用JavaScript.ppt

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

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

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

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

5、_）开头。 在所说明的范围内必须是唯一的。 用var来定义变量，也可以用赋值语句声明变量，但不能既不用var声明变量，又不给它赋值。,9.2.2 JavaScript运算符,在JavaScript中包括以下8类运算符： （1）算术运算符 ：+、-、*、/、%、+ 、- （2）逻辑运算符： case value2：语句段2; case value3：语句段3; default：语句段4；,（1）for语句 for（初始化；条件；增量） 语句段； （2）while语句 while（条件） 语句段； ,3循环语句,（3）do while语句 do 语句段； while（条件） （4）break语句

6、break语句提供无条件跳出循环结构或switch语句的功能。 （5）continue语句 continue语句的作用是终止当次循环，跳转到循环的开始处继续下一轮循环。,4其他语句,除了以上条件语句和循环语句以外，JavaScript中还包括以下语句： 函数调用语句 函数调用语句用于调用函数。 return语句 用于返回函数调用的值。 with语句 用于表示默认对象。 for in语句 用于对一个对象的所有属性进行循环，直到每个属性都访问到。,9.2.5 JavaScript函数,数是已命名的代码块，代码块中的语句被作为一个整体引用和执行。 定义函数的格式如下： function 函数名（参数

7、1，参数2，） 语句段； return 表达式； ,通常鼠标或热键的动作称为事件（Event），而由鼠标或热键引发的一连串程序的动作称为事件驱动（Event Driver）。比如，当单击鼠标按钮时就产生一个单击（onClick）事件，当打开一个网页时就产生一个网页的载入（onLoad）事件。,9.3 JavaScript的事件驱动,9.3.1 什么是事件,当用户单击鼠标按钮时，产生onClick事件，同时onClick指定的事件处理程序或代码被调用执行。OnClick事件通常在下列基本对象中产生： （1）button（按钮） （2）checkbox（复选框） （3）radio（单选按钮） （4

8、）reset button（重置按钮） （5）submit button（提交按钮）,9.3.2 事件类型,1单击事件onClick,当用户改变表单元素的原有状态后，将产生该表单元素的onChange事件。,2改变事件onChange,当用户选中一段表单文本时，引发该事件。,3选中事件onSelect,当用户单击鼠标或用Tab键激活某一个表单元素时，产生该表单元素的聚焦事件，此时对象被选中。,4聚焦事件onFocus,与onFocus事件相反，当前激活表单元素从激活状态变为非激活状态，即不再拥有焦点、而退到后台时，引发该事件。,5失去焦点事件onBlur,当鼠标指针位于超链接上时，产生onMo

9、useOver事件。,6鼠标移动事件onMouseOver,当文档载入时引发该事件。OnLoad事件的作用是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使其可以被源代码调用。,7载入文件onLoad,当Web页面退出时引发onUnload事件。,8卸载文在件onUnload,对象就是客观世界中存在的特定实体。,9.4 JavaScript的对象,9.4.1 JavaScript的内部对象,JavaScript提供了一些内部对象，下面介绍三种常用的对象，即String对象、Date对象和Math对象。,String对象用来存放字符串，是静态对象。 （1）String对象的属性

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

11、conds，milliseconds） （1）获取Date对象的常用方法 （2）设置Date对象的常用方法,2Date对象,Math对象包含用来进行数学计算的属性和方法。 （1）Math对象的主要属性 Math中提供了6个属性，即：常数E、以10为底的自然对数ln10、以2为底的自然对数ln2、圆周率PI（3.1 4159）、1/2的平方根SQRT1-2、2的平方根SQRT2。,3Math对象,（ 2）Math对象的主要方法 Math对象的主要方法有： 求绝对值：abs（）。 求正弦、余弦值：sin（），cos（）。 求反正弦、反余弦值：asin（），acos（）。 求正切、反正切值：tan（

12、），atan（）。 四舍五入：round（）。 求平方根：sqrt（）。,常用的浏览器有document对象和Windows对象。 1document对象 document对象代表当前浏览器窗口中的文档，使用它可以访问到文档中的所有其他对象（例如图像、表单等），因此该对象是实现各种文档功能的最基本对象。,9.4.2 浏览器对象,（1）document对象的常用属性 document对象最常用的属性如下： all 表示文档中所有HTML标记符的数组。 bgcolor 表示文档的背景颜色。 forms 表示文档中所有表单的数组。 title 表示文档的标题。,在客户端脚本中，JavaScript通

13、过对事件进行响应来获得与用户的交互。 document对象的常用事件有：onclick事件，表示鼠标单击时产生的事件；onload事件，表示在文档装载完毕时产生的事件；onunload事件，表示在文档卸载完毕时产生的事件。另外还有onmouseover和onmouseout事件，分别表示鼠标移上去和移开时发生的事件。,（3）document对象的常用方法 document对象的常用方法有clear、write和writen方法。 clear方法 clear方法一经调用将清除当前窗口中的内容。注意，它既不改变由HTML定义的文档的实际内容，也不清除变量值等其它内容，而只是将显示区清空。, wri

14、te和writen方法 这两个方法用于向当前窗口输出代码，其参数是要在窗口中输出的HTML代码字符串。 write与writen的区别在于writen方法在输出串后自动添加一个文本换行符（不是HTML的换行符）。此换行符只有在输出文本在标记块中才起作用，其它情况都被忽略。因此，在大多数情况下，这两种方法没有什么区别。,Window对象拥有12个属性、8种方法和2种事件。 （1）Window对象的属性 Window对象拥有以下属性： name属性：当前窗口的名字。 parent属性：该属性是一个窗口对象，它是当前窗口的父窗口，它拥有与生俱来的窗口的所有方法和事件。 self属性：该属性是当前窗口

15、的Window对象。,2Window对象,top属性：该属性是一个Window对象，它是窗口集合中最顶层的窗口。 history：该属性是一个对象，它包含三种方法和一个属性。 location：该属性是窗口定位对象。它拥有href、Protocol、host、Port等属性。 length：该属性反映在Parent窗口中框架（帧）的个数。 defaultstatus：该属性是左下角状态栏显示的缺省文本。 status：该属性改变左下角状态栏的显示文本。,status：该属性改变左下角状态栏的显示文本。 frame：该属性是当前窗口所包含下标从零开始的框架（帧）数组。 navigator：该属性是一个对象，它包含当前所使用浏览器的信息。 document：该属性是一个对象，它包含当前Web页内所有元素的引用情况。,（2）Window对象的方法 Window对象具有如下方法： Alert：创建一个具有说明信息的对话框。 Confirm：创建一个具有说明信息，且有OK（确定）和Cancel（取消）按钮的对话框。 Prompt：创建一个可输入文本，具有OK（确定）和Cancel（取消）按钮的对话框。 Open：打开另一个浏览器窗口。 Close：关闭浏览器窗口。,SetTimeout：设置计时器。 ClearTimeout：清除计时器。 Navig