CH在网页中使用脚本语言实用实用教案

1、（1）脚本编写语言(yyn)（2）基于对象 （3）简单性 （4）安全性 （5）动态性 （6）跨平台 10.1.1 JavaScript的特点(tdin) 第1页/共44页第一页，共45页。 10.1.2 JavaScript的运行和编辑(binj)环境 运行环境：Internet Explorer 4.0或Netscape Navigator 3.0以上(yshng)。 编辑环境：任何可以编辑HTML文档的文本编辑器 或 专 门 的 网 页 编 辑 器 （ F r o n t P a g e 、Dreamweaver等）。 第2页/共44页第二页，共45页。 （1）使用SCRIPT标记符插入脚

2、本(jiobn) 在网页中最常用的一种插入脚本(jiobn)的方式是使用SCRIPT标记符，方法是：把脚本(jiobn)标记符置于网页上的HEAD部分或BODY部分，然后在其中加入脚本(jiobn)程序。尽管可以在网页上的多个位置使用SCRIPT标记符，但最好还是将脚本(jiobn)代码放在HEAD部分，以确保容易维护。 10.1.3 在网页(wn y)中使用JavaScript 第3页/共44页第三页，共45页。 书写JavaScript时应注意大小写. 在JavaScript中，行尾用换行符作为一行完整代码的终止字符. 若需要将几行代码放在一行中，应使用(shyng)分号将它们分开. 在J

3、avaScript中，/* 和 */也是注释标记。 用户在编写(binxi)JavaScript时应注意以下几点：第4页/共44页第四页，共45页。 （2）直接添加脚本 HTML可以直接在表单的输入元素标记符内添加脚本，以响应输入元素的事件。 （3）链接脚本文件 如果同一段脚本要在若干个Web页中使用，则没有必要在多处维护相同的冗余代码，此时可以将脚本放在单独(dnd)的一个文件里，然后再在任何需要该文件的Web页中调用该文件。 要引用外部脚本文件，应使用SCRIPT标记符的src属性来指定外部脚本文件的URL。 第5页/共44页第五页，共45页。 所谓变量，就是程序中一个已命名的存储单元。变

4、量的主要作用是存取数据和提供存放信息的容器。 JavaScript支持(zhch)的数据类型如下：Number（数字） 、Boolean（布尔） 、String（字符串） 、Null（空） 、Undefined（未定义） 、Object（对象） 。 10.2 JavaScript编程基础(jch) 10.2.1 JavaScript变量(binling) 第6页/共44页第六页，共45页。在JavaScript中定义变量(binling)应遵循以下规则：必须以字母或下划线（_）开头。在所说明的范围内必须是唯一的。用var来定义变量(binling)，也可以用赋值语句声明变量(binling)，

5、但不能既不用var声明变量(binling)，又不给它赋值。第7页/共44页第七页，共45页。 10.2.2 JavaScript运算符 在JavaScript中包括以下(yxi)8类运算符：（1）算术运算符 ：+、-、*、/、%、+ 、-（2）逻辑运算符：&、|、！（3）比较运算符： 、=、= =、！= （4）字符串运算符 ：+（字符串接合操作） （5）位操作运算符：&、|、-、第8页/共44页第八页，共45页。 （6）赋值运算符：=、+= 、-=、*=、 =、 =、 &=、 （7）条件(tiojin)运算符：？：（8）其他运算符：、 、（） 、delete 、new

6、 、void 第9页/共44页第九页，共45页。 10.2.3 JavaScript表达式 表达式是运算符和操作数的组合。表达式通过求值确定表达式的值，这个值是对操作数实施运算符所确定的运算后产生的结果。有些运算符将数值赋予一个变量，而另一些运算符则可以用在其他表达式中。 由于表达式是以运算符为基础的，因此表达式可以分为(fn wi)算术表达式、字符串表达式、赋值表达式以及逻辑表达式等等。 第10页/共44页第十页，共45页。 10.2.4 JavaScript语句(yj) （1）数据声明语句声明变量(binling)的语法如下： var 变量(binling)名=初始值 （2）赋值语句 赋值

7、语句是由赋值表达式组成的语句。 1一般(ybn)语句 第11页/共44页第十一页，共45页。（3）注释语句）注释语句(yj) /：表示单行注释，从：表示单行注释，从“/”开始到本行结开始到本行结束都为注释。束都为注释。 /*/：表示多行注释，从：表示多行注释，从“/*”开始到开始到“*/”结束为注释。结束为注释。 第12页/共44页第十二页，共45页。 在JavaScript中提供了if语句、if else语句以及switch语句等三种(sn zhn)条件语句。 （1）if语句 if（条件） 语句段； （2）if else语句 if（条件） 语句段1； else 语句段2； 2条件(tioji

8、n)语句 第13页/共44页第十三页，共45页。 （3）switch语句 如果需要对同一个表达式进行(jnxng)多次判断，那么就可以使用switch语句，格式如下： switch（条件） case value1: 语句段1; case value2：语句段2; case value3：语句段3; default：语句段4；第14页/共44页第十四页，共45页。（1）for语句语句(yj) for（初始化；条件；增量）（初始化；条件；增量） 语句语句(yj)段；段； （2）while语句语句(yj) while（条件）（条件） 语句语句(yj)段；段； 3循环(xnhun)语句 第15页/共4

9、4页第十五页，共45页。 （3）do while语句 do 语句段； while（条件）（4）break语句 break语句提供无条件跳出(tio ch)循环结构或switch语句的功能。（5）continue语句 continue语句的作用是终止当次循环，跳转到循环的开始处继续下一轮循环。 第16页/共44页第十六页，共45页。 4其他(qt)语句 除了以上(yshng)条件语句和循环语句以外，JavaScript中还包括以下语句：函数调用语句 函数调用语句用于调用函数。 return语句 用于返回函数调用的值。 with语句 用于表示默认对象。for in语句 用于对一个对象的所有属性进行

10、循环，直到每个属性都访问到。第17页/共44页第十七页，共45页。10.2.5 JavaScript函数(hnsh) 函数是已命名的代码块，代码块中的语句(yj)被作为一个整体引用和执行。 定义函数的格式如下： function 函数名（参数1，参数2，） 语句(yj)段； return 表达式； 第18页/共44页第十八页，共45页。 通常鼠标或热键的动作称为事件（Event），而由鼠标或热键引发的一连串程序的动作称为事件驱动（Event Driver）。比如，当单击鼠标按钮时就产生(chnshng)一个单击（onClick）事件，当打开一个网页时就产生(chnshng)一个网页的载入（on

11、Load）事件。 10.3 JavaScript的事件驱动 10.3.1 什么(shn me)是事件 第19页/共44页第十九页，共45页。 当用户单击鼠标按钮时，产生onClick事件，同时onClick指定的事件处理程序或代码被调用执行。OnClick事件通常在下列基本对象(duxing)中产生： （1）button（按钮） （2）checkbox（复选框） （3）radio（单选按钮） （4）reset button（重置按钮） （5）submit button（提交按钮） 10.3.2 事件(shjin)类型 1单击事件单击事件(shjin)onClick 第20页/共44页第二十页，

12、共45页。 当用户改变表单元素(yun s)的原有状态后，将产生该表单元素(yun s)的onChange事件。 2改变改变(gibin)事件事件onChange 当用户选中一段表单文本时，引发(yn f)该事件。 3选中事件选中事件onSelect 第21页/共44页第二十一页，共45页。 当用户单击鼠标或用Tab键激活(j hu)某一个表单元素时，产生该表单元素的聚焦事件，此时对象被选中。 4聚焦聚焦(jjio)事件事件onFocus 与onFocus事件相反，当前激活表单元素从激活状态变为非激活状态，即不再拥有焦点(jiodin)、而退到后台时，引发该事件。 5失去焦点事件失去焦点事件o

13、nBlur 第22页/共44页第二十二页，共45页。 当鼠标指针位于超链接上时(shn sh)，产生onMouseOver事件。 6鼠标移动鼠标移动(ydng)事件事件onMouseOver 当文档载入时引发该事件。OnLoad事件的作用是在首次(shu c)载入一个文档时检测cookie的值，并用一个变量为其赋值，使其可以被源代码调用。 7载入文件载入文件onLoad 当Web页面退出时引发onUnload事件。 8卸载文在件卸载文在件onUnload 第23页/共44页第二十三页，共45页。 对象就是客观世界中存在(cnzi)的特定实体。 10.4 JavaScript的对象的对象(dux

14、ing) 10.4.1 JavaScript的内部的内部(nib)对象对象 JavaScript提供了一些内部对象，下面介绍三种常用的对象，即String对象、Date对象和Math对象。 第24页/共44页第二十四页，共45页。 String对象用来存放字符串，是静态对象。 （1）String对象的属性 String对象只有一个属性，即length，它表示字符串中的所有的字符个数，包括所有符号(fho)。（2）String对象的方法 String对象的方法主要用于有关字符串在Web中的显示、字体大小、颜色、大小写转换等。String对象有19个方法。 1String对象对象(duxing)

15、第25页/共44页第二十五页，共45页。 创建日期对象可以使用(shyng)以下4种构造函数中的一种：var variable=new Date（）var variable=new Date（milliseconds）var variable=new Date（string）var variable=new Date（year，month，day，hours，minutes，seconds，milliseconds） 2Date对象对象(duxing) 第26页/共44页第二十六页，共45页。（1）获取）获取Date对象的常用对象的常用(chn yn)方法方法 getDate（） 返回(fnh

16、u)一个整数，表示一月中的某一天（131）。getDay（） 返回(fnhu)一个整数，表示星期中的某一天（06，0表示星期日，6表示星期六）。getHours（） 返回(fnhu)表示当前时间中的小时部分的整数（023）。getMinutes（） 返回(fnhu)表示当前时间中的分钟部分的整数（059）。getMonth（） 返回(fnhu)表示当前日期中月的整数（0-11）。第27页/共44页第二十七页，共45页。getSeconds（） 返回表示当前时间中的秒部分(b fen)的整数（059）。getTime（） 返回从GMT时间1970年1月1日凌晨到当前Date对象指定的时间之间的毫

17、秒数。getYear（） 返回日期对象中的年份，用2位或4位数字表示。toGMTString（） 返回表示日期对象的世界时间的字符串，日期在转换成字符串之前转换到GMT零时区。toLocalString（） 返回一个表示日期对象所表示的当地时间的字符串。toString（） 返回一个表示日期对象的字符串。第28页/共44页第二十八页，共45页。（2）设置）设置(shzh)Date对象的常用方法对象的常用方法 setDate（） 设置当月号数；setDay（） 设置星期(xngq)几。setHours（） 设置小时数。setMinutes（） 设置分钟数。setMonth（） 设置当月的月份数。

18、setSeconds（） 设置秒数。setTime（） 设置毫秒数。setYear（） 设置年。第29页/共44页第二十九页，共45页。 Math对象包含用来进行数学计算的属性(shxng)和方法。 （1）Math对象的主要属性(shxng) Math中提供了6个属性(shxng)，即：常数E、以10为底的自然对数ln10、以2为底的自然对数ln2、圆周率PI（3.1 4159）、1/2的平方根SQRT1-2、2的平方根SQRT2。 3Math对象对象(duxing) 第30页/共44页第三十页，共45页。 Math对象的主要方法有： 求绝对值：abs（）。 求正弦、余弦值：sin（），cos

19、（）。 求反正(fnzhng)弦、反余弦值：asin（），acos（）。 求正切、反正(fnzhng)切值：tan（），atan（）。 四舍五入：round（）。 求平方根：sqrt（）。 （2）Math对象的主要对象的主要(zhyo)方法方法 第31页/共44页第三十一页，共45页。 常用的浏览器有document对象和Windows对象。 1document对象 document对象代表当前浏览器窗口中的文档，使用它可以访问到文档中的所有其他对象（例如图像、表单等），因此该对象是实现各种( zhn)文档功能的最基本对象。 10.4.2 浏览器对象浏览器对象(duxing)第32页/共44页

20、第三十二页，共45页。（1）document对象的常用对象的常用(chn yn)属性属性 document 对象最常用对象最常用(chn yn)的属性如下：的属性如下： all 表示文档中所有表示文档中所有HTML标记符的标记符的数组。数组。 bgcolor 表示文档的背景颜色。表示文档的背景颜色。 forms 表示文档中所有表单的数组。表示文档中所有表单的数组。 title 表示文档的标题。表示文档的标题。第33页/共44页第三十三页，共45页。 （2）document对象的常用事件 在客户端脚本中，JavaScript通过对事件进行响应(xingyng)来获得与用户的交互。 documen

21、t对象的常用事件有：onclick事件，表示鼠标单击时产生的事件；onload事件，表示在文档装载完毕时产生的事件；onunload事件，表示在文档卸载完毕时产生的事件。另外还有onmouseover和onmouseout事件，分别表示鼠标移上去和移开时发生的事件。第34页/共44页第三十四页，共45页。（3）document对象的常用对象的常用(chn yn)方法方法 document对象的常用对象的常用(chn yn)方法有方法有clear、write和和writen方法。方法。 clear方法方法 clear方法一经调用将清除当前窗口中的内容。方法一经调用将清除当前窗口中的内容。注意，它

22、既不改变由注意，它既不改变由HTML定义的文档的实际内定义的文档的实际内容，也不清除变量值等其它内容，而只是将显容，也不清除变量值等其它内容，而只是将显示区清空。示区清空。第35页/共44页第三十五页，共45页。 write和writen方法 这两个方法用于向当前窗口输出代码，其参数是要在窗口中输出的HTML代码字符串。 write与writen的区别在于writen方法在输出串后自动添加一个文本换行符（不是(b shi)HTML的换行符）。此换行符只有在输出文本在标记块中才起作用，其它情况都被忽略。因此，在大多数情况下，这两种方法没有什么区别。第36页/共44页第三十六页，共45页。 Win

23、dow对象拥有12个属性、8种方法和2种事件。 （1）Window对象的属性 Window对象拥有以下属性： name属性：当前(dngqin)窗口的名字。 parent属性：该属性是一个窗口对象，它是当前(dngqin)窗口的父窗口，它拥有与生俱来的窗口的所有方法和事件。 self属性：该属性是当前(dngqin)窗口的Window对象。 2Window对象对象(duxing)第37页/共44页第三十七页，共45页。 top属性：该属性是一个Window对象(duxing)，它是窗口集合中最顶层的窗口。 history：该属性是一个对象(duxing)，它包含三种方法和一个属性。 locat

24、ion：该属性是窗口定位对象(duxing)。它拥有href、Protocol、host、Port等属性。 length：该属性反映在Parent窗口中框架（帧）的个数。 defaultstatus：该属性是左下角状态栏显示的缺省文本。 status：该属性改变左下角状态栏的显示文本。第38页/共44页第三十八页，共45页。 status：该属性改变左下角状态栏的显示文本。 frame：该属性是当前窗口所包含下标从零开始的框架（帧）数组。 navigator：该属性是一个对象，它包含当前所使用(shyng)浏览器的信息。 document：该属性是一个对象，它包含当前Web页内所有元素的引用情况。 第39页/共44页第三十九页，共45页。 （2）Window对象的方法 Window对象具有(jyu)如下方法： Alert：创建一个具有(jyu)说明信息的对话框。 Confirm：创建一个具有(jyu)说明信息，且有OK（确定）和Cancel（取消）按钮的对话框。 Prompt：创建一个可输入文本，具有(jyu)OK（确定）和Cancel（取消）按钮