《《网页设计与制作实用技术》电子教案－齐建玲 CH13》由会员分享，可在线阅读，更多相关《《网页设计与制作实用技术》电子教案－齐建玲 CH13（48页珍藏版）》请在金锄头文库上搜索。
1、通过本章学习，应该掌握以下内容： JavaScript的特点及运行环境 JavaScript编程基础 JavaScript事件驱动 JavaScript的对象,第13章 在网页中使用JavaScript,13.1 脚本语言简介,JavaScript是Netscape公司推出的跨平台、基于对象的脚本语言，用于客户端与服务器端的应用程序。 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。和VBScript一样，它可以被嵌入到HTML文件中，能直接被浏览器执行，从而产生各种各样的动态网页效果。JavaScript弥补了HTML语言的缺陷，它与HTML、CSS结合被人们称为DHT
2、ML。,（1）脚本编写语言 （2）基于对象 （3）简单性 （4）安全性 （5）动态性 （6）跨平台,13.1.1 JavaScript的特点,13.1.2 JavaScript的运行和编辑环境,运行环境：Internet Explorer 4.0或Netscape Navigator 3.0以上。 编辑环境：任何可以编辑HTML文档的文本编辑器或专门的网页编辑器（FrontPage、Dreamweaver等）。,（1）使用SCRIPT标记符插入脚本 在网页中最常用的一种插入脚本的方式是使用SCRIPT标记符，方法是：把脚本标记符置于网页上的HEAD部分或BODY部分，然后在其中加入脚本程序。尽
3、管可以在网页上的多个位置使用SCRIPT标记符，但最好还是将脚本代码放在HEAD部分，以确保容易维护。,13.1.3 在网页中使用JavaScript, 书写JavaScript时应注意大小写. 在JavaScript中，行尾用换行符作为一行完整代码的终止字符. 若需要将几行代码放在一行中，应使用分号将它们分开. 在JavaScript中，/* 和 */也是注释标记。,用户在编写JavaScript时应注意以下几点：,（2）直接添加脚本 HTML可以直接在表单的输入元素标记符内添加脚本，以响应输入元素的事件。 （3）链接脚本文件 如果同一段脚本要在若干个Web页中使用，则没有必要在多处维护相同
4、的冗余代码，此时可以将脚本放在单独的一个文件里，然后再在任何需要该文件的Web页中调用该文件。 要引用外部脚本文件，应使用SCRIPT标记符的src属性来指定外部脚本文件的URL。,所谓变量，就是程序中一个已命名的存储单元。变量的主要作用是存取数据和提供存放信息的容器。 JavaScript支持的数据类型如下：Number（数字） 、Boolean（布尔） 、String（字符串） 、Null（空） 、Undefined（未定义） 、Object（对象） 。,13.2 JavaScript编程基础,13.2.1 JavaScript变量,在JavaScript中定义变量应遵循以下规则： 必须以
5、字母或下划线（_）开头。 在所说明的范围内必须是唯一的。 用var来定义变量，也可以用赋值语句声明变量，但不能既不用var声明变量，又不给它赋值。,13.2.2 JavaScript运算符,在JavaScript中包括以下8类运算符： （1）算术运算符 ：+、-、*、/、%、+ 、- （2）逻辑运算符：&、|、！ （3）比较运算符： 、=、= =、！= （4）字符串运算符 ：+（字符串接合操作） （5）位操作运算符：&、|、-、 （6）赋值运算符：=、+= 、-=、*=、 =、 =、 &=、 （7）条件运算符：？： （8）其他运算符：、 、（） 、delete 、new 、void,13.2.
6、3 JavaScript表达式,表达式是运算符和操作数的组合。表达式通过求值确定表达式的值，这个值是对操作数实施运算符所确定的运算后产生的结果。有些运算符将数值赋予一个变量，而另一些运算符则可以用在其他表达式中。 由于表达式是以运算符为基础的，因此表达式可以分为算术表达式、字符串表达式、赋值表达式以及逻辑表达式等等。,13.2.4 JavaScript语句,（1）数据声明语句 声明变量的语法如下： var 变量名=初始值 （2）赋值语句 赋值语句是由赋值表达式组成的语句。 （3）注释语句 /：表示单行注释，从“/”开始到本行结束都为注释。 /*/：表示多行注释，从“/*”开始到“*/”结束为注
7、释。,1一般语句,在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语句 用于对一个对象的所有属性进行循环，直到每个属性都访问到。,13.2.5 JavaScript函数
9、,数是已命名的代码块，代码块中的语句被作为一个整体引用和执行。 定义函数的格式如下： function 函数名（参数1，参数2，） 语句段； return 表达式； ,通常鼠标或热键的动作称为事件（Event），而由鼠标或热键引发的一连串程序的动作称为事件驱动（Event Driver）。比如，当单击鼠标按钮时就产生一个单击（onClick）事件，当打开一个网页时就产生一个网页的载入（onLoad）事件。,13.3 JavaScript的事件驱动,13.3.1 什么是事件,当用户单击鼠标按钮时，产生onClick事件，同时onClick指定的事件处理程序或代码被调用执行。OnClick事件通常
10、在下列基本对象中产生： （1）button（按钮） （2）checkbox（复选框） （3）radio（单选按钮） （4）reset button（重置按钮） （5）submit button（提交按钮）,13.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,对象就是客观世界中存在的特定实体。,13.4 JavaScript的对象,13.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 Dat
13、e（string） var variable=new Date（year，month，day，hours，minutes，seconds，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对象,文字修饰属性可以对特定选项的文本进行修饰，它的取值为：none、underl
14、ine、overline、line-through、blink，默认值为none，表示不加任何修饰。underline表示添加下划线；overline表示添加上划线；line-through表示添加删除线；blink表示添加闪烁效果。 另外IE浏览器并不支持文字修饰属性值blink（闪烁）。,6文字修饰属性（text-decoration）,行高属性决定了相邻行之间的间距。其取值可以是数字、长度或百分比，默认值是normal。当以数字指定值时，行高就是当前字体高度与该数字相乘的倍数。如果指定具体的长度值，则行高为该值。如果用百分比指定行高，则行高为当前字体高度与该百分比相乘。该属性不允许使用负
15、值。,7行高属性 (line-height),文本转换属性用于转换文本，取值为：capitalize、uppercase、lowercase、none，默认值是none表示使用原始值。capitalize值表示所选元素中文本的每个单词的首字母以大写显示；uppercase值表示所有的文本都以大写显示；lowercase值表示所有文本都以小写显示。,8文本转换属性(text-transform),background属性是一个组合属性，可用于同时设置background- color、background- image、back2round-attachment、background-posit
16、ion、background-repeat等背景属性。,11.4.3 颜色与背景属性,1background属性,用于设置HTML元素的背景颜色。此属性的默认值是transparent，表示没有任何颜色，此时上级元素的背景可以在子元素中显示出来。,2background-color属性,用于设置HTML元素的背景图案，取值为url或none。默认值为none，即没有背景图案。该属性相当于HTML中BODY标签的background属性，只是它可以定义更多元素的背景图像。,3background-image属性,用于控制背景图像是否随内容一起滚动，取值为scroll、fixed。默认值为scroll，表示背景图案随着内容一起滚动；fixed表示背景图案静止，而内容可以滚动。,4background-attachment属性,用于指定背景图案相对于关联区域左上角的位置。该属性通常指定由空格隔开的两个值。,5background
