在网页中使用脚本语言.ppt

通过本章学习，应该掌握以下内容：JavaScript的特点及运行环境JavaScript编程基础JavaScript事件驱动JavaScript的对象,第10章在网页中使用JavaScript,10.1脚本语言简介,JavaScript是Netscape公司推出的跨平台、基于对象的脚本语言，用于客户端与服务器端的应用程序。JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。和VBScript一样，它可以被嵌入到HTML文件中，能直接被浏览器执行，从而产生各种各样的动态网页效果。JavaScript弥补了HTML语言的缺陷，它与HTML、CSS结合被人们称为DHTML。,（1）脚本编写语言（2）基于对象（3）简单性（4）安全性（5）动态性（6）跨平台,10.1.1JavaScript的特点,10.1.2JavaScript的运行和编辑环境,运行环境：InternetExplorer4.0或NetscapeNavigator3.0以上。编辑环境：任何可以编辑HTML文档的文本编辑器或专门的网页编辑器（FrontPage、Dreamweaver等）。,（1）使用SCRIPT标记符插入脚本在网页中最常用的一种插入脚本的方式是使用SCRIPT标记符，方法是：把脚本标记符置于网页上的HEAD部分或BODY部分，然后在其中加入脚本程序。尽管可以在网页上的多个位置使用SCRIPT标记符，但最好还是将脚本代码放在HEAD部分，以确保容易维护。,10.1.3在网页中使用JavaScript,书写JavaScript时应注意大小写.在JavaScript中，行尾用换行符作为一行完整代码的终止字符.若需要将几行代码放在一行中，应使用分号将它们分开.在JavaScript中，/*和*/也是注释标记。,用户在编写JavaScript时应注意以下几点：,（2）直接添加脚本HTML可以直接在表单的输入元素标记符内添加脚本，以响应输入元素的事件。（3）链接脚本文件如果同一段脚本要在若干个Web页中使用，则没有必要在多处维护相同的冗余代码，此时可以将脚本放在单独的一个文件里，然后再在任何需要该文件的Web页中调用该文件。要引用外部脚本文件，应使用SCRIPT标记符的src属性来指定外部脚本文件的URL。,所谓变量，就是程序中一个已命名的存储单元。变量的主要作用是存取数据和提供存放信息的容器。JavaScript支持的数据类型如下：Number（数字）、Boolean（布尔）、String（字符串）、Null（空）、Undefined（未定义）、Object（对象）。,10.2JavaScript编程基础,10.2.1JavaScript变量,在JavaScript中定义变量应遵循以下规则：必须以字母或下划线（_）开头。在所说明的范围内必须是唯一的。用var来定义变量，也可以用赋值语句声明变量，但不能既不用var声明变量，又不给它赋值。,10.2.2JavaScript运算符,在JavaScript中包括以下8类运算符：（1）算术运算符：+、-、*、/、%、+、-（2）逻辑运算符：casevalue2：语句段2;casevalue3：语句段3;default：语句段4；,（1）for语句for（初始化；条件；增量）语句段；（2）while语句while（条件）语句段；,3循环语句,（3）dowhile语句do语句段；while（条件）（4）break语句break语句提供无条件跳出循环结构或switch语句的功能。（5）continue语句continue语句的作用是终止当次循环，跳转到循环的开始处继续下一轮循环。,4其他语句,除了以上条件语句和循环语句以外，JavaScript中还包括以下语句：函数调用语句函数调用语句用于调用函数。return语句用于返回函数调用的值。with语句用于表示默认对象。forin语句用于对一个对象的所有属性进行循环，直到每个属性都访问到。,10.2.5JavaScript函数,函数是已命名的代码块，代码块中的语句被作为一个整体引用和执行。定义函数的格式如下：function函数名（参数1，参数2，）语句段；return表达式；,通常鼠标或热键的动作称为事件（Event），而由鼠标或热键引发的一连串程序的动作称为事件驱动（EventDriver）。比如，当单击鼠标按钮时就产生一个单击（onClick）事件，当打开一个网页时就产生一个网页的载入（onLoad）事件。,10.3JavaScript的事件驱动,10.3.1什么是事件,当用户单击鼠标按钮时，产生onClick事件，同时onClick指定的事件处理程序或代码被调用执行。OnClick事件通常在下列基本对象中产生：（1）button（按钮）（2）checkbox（复选框）（3）radio（单选按钮）（4）resetbutton（重置按钮）（5）submitbutton（提交按钮）,10.3.2事件类型,1单击事件onClick,当用户改变表单元素的原有状态后，将产生该表单元素的onChange事件。,2改变事件onChange,当用户选中一段表单文本时，引发该事件。,3选中事件onSelect,当用户单击鼠标或用Tab键激活某一个表单元素时，产生该表单元素的聚焦事件，此时对象被选中。,4聚焦事件onFocus,与onFocus事件相反，当前激活表单元素从激活状态变为非激活状态，即不再拥有焦点、而退到后台时，引发该事件。,5失去焦点事件onBlur,当鼠标指针位于超链接上时，产生onMouseOver事件。,6鼠标移动事件onMouseOver,当文档载入时引发该事件。OnLoad事件的作用是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使其可以被源代码调用。,7载入文件onLoad,当Web页面退出时引发onUnload事件。,8卸载文在件onUnload,对象就是客观世界中存在的特定实体。,10.4JavaScript的对象,10.4.1JavaScript的内部对象,JavaScript提供了一些内部对象，下面介绍三种常用的对象，即String对象、Date对象和Math对象。,String对象用来存放字符串，是静态对象。（1）String对象的属性String对象只有一个属性，即length，它表示字符串中的所有的字符个数，包括所有符号。（2）String对象的方法String对象的方法主要用于有关字符串在Web中的显示、字体大小、颜色、大小写转换等。String对象有19个方法。,1String对象,创建日期对象可以使用以下4种构造函数中的一种：varvariable=newDate（）varvariable=newDate（milliseconds）varvariable=newDate（string）varvariable=newDate（year，month，day，hours，minutes，seconds，milliseconds）,2Date对象,（1）获取Date对象的常用方法,getDate（）返回一个整数，表示一月中的某一天（131）。getDay（）返回一个整数，表示星期中的某一天（06，0表示星期日，6表示星期六）。getHours（）返回表示当前时间中的小时部分的整数（023）。getMinutes（）返回表示当前时间中的分钟部分的整数（059）。getMonth（）返回表示当前日期中月的整数（0-11）。,getSeconds（）返回表示当前时间中的秒部分的整数（059）。getTime（）返回从GMT时间1970年1月1日凌晨到当前Date对象指定的时间之间的毫秒数。getYear（）返回日期对象中的年份，用2位或4位数字表示。toGMTString（）返回表示日期对象的世界时间的字符串，日期在转换成字符串之前转换到GMT零时区。toLocalString（）返回一个表示日期对象所表示的当地时间的字符串。toString（）返回一个表示日期对象的字符串。,（2）设置Date对象的常用方法,setDate（）设置当月号数；setDay（）设置星期几。setHours（）设置小时数。setMinutes（）设置分钟数。setMonth（）设置当月的月份数。setSeconds（）设置秒数。setTime（）设置毫秒数。setYear（）设置年。,Math对象包含用来进行数学计算的属性和方法。（1）Math对象的主要属性Math中提供了6个属性，即：常数E、以10为底的自然对数ln10、以2为底的自然对数ln2、圆周率PI（3.14159）、1/2的平方根SQRT1-2、2的平方根SQRT2。,3Math对象,Math对象的主要方法有：求绝对值：abs（）。求正弦、余弦值：sin（），cos（）。求反正弦、反余弦值：asin（），acos（）。求正切、反正切值：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事件，表示鼠标单击时产生的事件；onload事件，表示在文档装载完毕时产生的事件；onunload事件，表示在文档卸载完毕时产生的事件。另外还有onmouseover和onmouseout事件，分别表示鼠标移上去和移开时发生的事件。,（3）document对象的常用方法document对象的常用方法有clear、write和writen方法。clear方法clear方法一经调用将清除当前窗口中的内容。注意，它既不改变由HTML定义的文档的实际内容，也不清除变量值等其它内容，而只是将显示区清空。,write和writen方法这两个方法用于向当前窗口输出代码，其参数是要在窗口中输出的HTML代码字符串。write与writen的区别在于writen方法在输出串后自动添加一个文本换行符（不是HTML的换行符）。此换行符只有在输出文本在标记块中才起作用，其它情况都被忽略。因此，在大多数情况下，这两种方法没有什么区别。,Window对象拥有12个属性、8种方法和2种事件。（1）Window对象的属性Window对象拥有以下属性：name属性：当前窗口的名字。parent属性：该属性是一个窗口对象，它是当前窗口的父窗口，它拥有与生俱来的窗口的所有方法和事件。self属性：该属性是当前窗口的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：清除计时器。Navigate：把一个URL对应的网页加载到窗口中。,（3）Window对象的事件Window对象具有如下两个事件：OnLoad事件：窗口加载时启动OnLoad事件。OnUnload事件：窗口关闭时启动OnUnload事件。,本章小结本章介绍在网页中使用JavaScript的方法。JavaScript是一种基于对象的脚本语言，学好它必须熟练掌握它的语法。除了掌握JavaScript的语法之外，还应该对它的内部对象、窗体对象和内部函数有一定的了解，熟悉它们的属性、方法和事件。另外，还需掌握在网页中插入脚本语言的3种方法：使用SCRIPT标记符插入脚本；直接添加脚本以及链接脚本文件。通过采用事件驱动机制，可以在浏览器端与用户之间实现交互，从而制作出奇妙的动态效果来。,