《网页行为语言JavaScript.ppt》由会员分享，可在线阅读，更多相关《网页行为语言JavaScript.ppt（62页珍藏版）》请在三一办公上搜索。
1、第5章 网页行为语言JavaScriptJavaScript是制作网页的行为（Behavior）语言之一。,5.1 JavaScript简介脚本程序既可以在服务器端运行，也可以直接在浏览器端运行（称为客户端脚本）。JavaScript是一种基于对象（Object）和事件驱动（Event Driven）的脚本语言。,5.2 把JavaScript加到网页中的方法,5.2.1 在HTML文档中嵌入脚本程序JavaScript的脚本程序包括在HTML中，使之成为HTML文档的一部分。其格式为：JavaScript语言代码;JavaScript语言代码;【例5-1】需要提醒的是，在中的程序代码有大、小
2、写之分，例如将document.write()写成Document.write()，程序将无法正确执行。【例5-2】,5.2.2 链接脚本文件引用外部脚本文件的格式为：脚本文件的扩展名为.js，内容是脚本，不能包含HTML标记。其格式为：JavaScript语言代码;/注释JavaScript语言代码;JavaScript语言代码;【例5-3】,5.2.3 在标记内添加脚本可以在HTML表单的输入标记符内添加脚本，以响应输入的事件。【例5-4】,5.3 JavaScript的基本数据类型和表达式JavaScript脚本语言同其他计算机语言一样，有它自身的基本数据类型、运算符和表达式。,5.3.
3、1 基本数据类型JavaScript有4种基本的数据类型。number（数值）类型。string（字符）类型。boolean（布尔）类型。object（对象）类型。JavaScript还有一个特殊的数据类型undefined（未定义）。,5.3.2 常量,1基本常量（1）字符型常量（2）数值型常量（3）布尔型常量,2特殊常量(1）空值（2）控制字符,5.3.3 变量,1变量的命名,2变量的类型,3变量的声明变量的声明和赋值语句var的语法为：var 变量名称1=初始值1,变量名称2=初始值2;一个var可以声明多个变量，其间用“,”分隔。,4变量的作用域,5.3.4 运算符和表达式双目运算符格
4、式如下：操作数1 运算符 操作数21算术运算符2字符串运算符3比较运算符4布尔运算符5位运算符6运算符的优先顺序,5.4 JavaScript的程序结构,5.4.1 简单语句,1赋值语句格式为：变量名=表达式;,2注释语句单行注释语句的格式为：/注释内容多行注释语句的格式为：/*注释内容 注释内容*/,3输出字符串（1）用document对象的write()方法输出字符串document对象的write()方法的功能是向页面内写文本，其格式为：document.write(字符串1,字符串2,);（2）用window对象的alert()方法输出字符串window对象的alert()方法的功能是
5、弹出提示对话框，其格式为：alert(字符串);其应用见例5-1。,4输入字符串（1）用window对象的prompt()方法输入字符串其格式为：prompt(提示字符串,默认值字符串);var name=prompt(请输入您的姓名：,);document.write(您好！+name);（2）用文本框输入字符串【例5-5】【例5-6】,5.4.2 程序控制语句1条件语句（1）if else语句if else语句的格式为：if(条件)语句段1;else 语句段2;“条件”要用()括起来。【例5-7】,（2）switch语句switch语句的格式为：switch(表达式)case 值1:语句段
6、1;break;default:缺省语句段;,例如，下面程序段根据输入的水果英文名称i，给出水果的价格。switch(i)case Oranges:document.write(Oranges are$0.59 a pound.);break;case Apples:document.write(Apples are$0.32 a pound.);break;case Bananas:document.write(Bananas are$0.48 a pound.);break;case Cherries:document.write(Cherries are$3.00 a pound.);b
7、reak;default:document.write(Sorry,we are out of+i+.);【例5-8】,2循环语句（1）for循环语句for循环语句的格式为：for(初始化;条件;增量)语句段;【例5-9】下面代码利用for循环自动显示标记的各级标题：for(i=1;i本行是+i+级标题);,（2）while循环语句while循环语句的格式为：while(条件)语句段;例如，下面的while循环当n小于3时重复执行循环体。n=0 x=0while(n 3)n+x+=n【例5-10】,（3）do while语句do while语句是while的变体，其格式为：do 语句段;whi
8、le(条件)例如，在下面程序中，do循环至少执行一次，并且重复执行直到i不再小于5。do i+=1 document.write(i);while(i5);,（4）标号语句label语句格式为：标号名称:语句;（5）break语句break语句的功能是无条件跳出循环结构或switch语句。【例5-11】（6）continue语句continue语句的功能是结束本轮循环，跳转到循环的开始处，从而开始下一轮循环。【例5-12】,5.4.3 函数,1函数的定义JavaScript并不区分函数（Function）和过程（Procedure），在JavaScript中只有函数。JavaScript也遵循
9、先定义函数，后调用函数的规则。定义函数的格式为：function 函数名(参数1,参数2,)语句段;return 表达式;/return语句指明被返回的值【例5-13】,2函数的调用（1）无返回值的调用如果函数没有返回值或调用程序不关心函数的返回值，可用下面的格式调用定义的函数：函数名(传递给函数的参数1,传递给函数的参数2,);（2）有返回值的调用如调用程序需要函数的返回结果，则要用下面的格式调用定义的函数：变量名=函数名(传递给函数的参数1,传递给函数的参数2,);例如，result=multiple(10,20);对于有返回值的函数调用，也可以在程序中直接利用其返回的值。例如，docum
10、ent.write(multiple(10,20)。,（3）在超链接标记中调用函数当单击超链接时，可以触发调用函数。有两种方法：使用标记的onClick属性调用函数，其格式为：热点文本 使用标记的href属性，其格式为：热点文本【例5-14】,（4）在装载网页时调用函数有时希望在装载（执行）一个网页时仅执行一次JavaScript代码，这时可使用标记的onLoad属性，其代码形式为：function 函数名(参数表)当网页装载完成后执行的代码;网页的内容【例5-15】,3全局变量与局部变量【例5-16】,4JavaScript内置的函数（1）escape():将字符转换成Unicode码（2）
11、eval():计算表达式的结果。（3）parseInt()和parseFloat():将字符串转换成符点数、整数形式。（4）isNaN():测试是(true)否(false)不是一个数字,5.5 基于对象的JavaScript语言,1对象（1）对象的概念JavaScript中的对象是由属性（properties）和方法（methods）两个基本的元素构成的。用来描述对象特性的一组数据，也就是若干个变量，称为属性。用来操作对象特性的若干个动作，也就是若干函数，称为方法。在JavaScript中，可以使用的对象有：l JavaScript的内置对象l 由浏览器根据Web页面的内容自动提供的对象l
12、用户自定义的对象。JavaScript中的对象名、属性名与变量名一样要区分大小写。,（2）对象的使用要使用一个对象，有下面3种方法：引用JavaScript内置对象。由浏览器环境中提供。创建新对象。一个对象在被引用之前必须已经存在。（3）对象的操作语句1）forin语句。forin语句的基本格式为：for(变量 in 对象)语句段;【例5-17】,2）with语句。with语句的基本格式为：with(对象)语句段;该语句的功能用于声明一个对象，代码块中的语句都被认为是对这一对象属性进行的操作。3）this关键字。this用于将对象指定为当前对象。4）new关键字。使用new可以创建指定对象的一
13、个实例。其创建对象实例的格式为：对象实例名=new 对象名(参数表);5）delete操作符。delete操作符可以删除一个对象的实例。其格式为：delete 对象名;,2对象的属性对象属性的引用有3种方式。（1）点（）运算符把点放在对象实例名和它对应的属性之间，以此指向一个惟一的属性。属性的使用格式为：对象名.属性名=属性值;例如：一个名为person的对象实例，它包含了sex、name、age 3个属性，对它们的赋值可用如下代码：person.sex=female;person.name=Jane;person.age=18;,（2）对象的数组下标通过“对象下标”的格式也可以实现对象的访问
14、。在用对象的下标访问对象属性时，下标是从0开始，而不是从1开始的。例如前面代码可改为：person0=female;person1=Jane;person2=18;通过下标形式访问属性，可以使用循环操作获取其值。对上面的例子可用如下方式获取每个属性的值：function show_number(person)for(var i=0;i3;i+)document.write(personi);,若采用forin语句，则不知其属性的个数也可以实现：function show_number(person)for(var prop in this)document.write(thisprop);,（
15、3）通过字符串的形式实现通过“对象字符串”的格式实现对象的访问：personsex=female;personname=Jane;personage=18;,3对象的事件事件就是对象上所发生的事情。,4对象的方法其格式为：对象名.方法()例如，引用person对象中已存在的一个方法howold()，则可使用：document.write(person.howold();如果引用math内部对象中sin()的方法，则：with(math)document.write(sin(30);document.write(sin(75);若不使用with，则引用时相对要复杂些：document.write
16、(math.sin(30);document.write(math.sin(75);,5.6 JavaScript的内置对象JavaScript编程中常用的内置对象的特点和使用方法，包括：l数组对象l字符串对象l日期对象l时间对象l数学对象l.JavaScript中提供的内部对象按使用方法可分为两种情况：l一种是动态对象，必须使用new关键字创建一个对象实例。l一种是静态对象，不需要使用new关键字创建对象实例。,5.6.1 数组对象,1数组对象的定义方法数组对象的定义有3种方法：var 数组对象名=new Array();var 数组对象名=new Array(数组元素个数);var 数组对
17、象名=new Array(第1个数组元素的值,第2个数组元素的值,);例如，定义数组：order=new Array();/定义有0个数组元素的数组order12=abc123;/用 引用数组下标,第2种方法。例如，定义数组：var person=new Array(10);/定义有10个元素的数组person20=Jhon;/为数组元素赋值，数组自动扩充为21个元素第3种方法。例如：新建一个名为person的数组，其中包含ZhangSan、LiSi、WangWu 3个元素。var person=new Array(ZhangSan,LiSi,WangWu);【例5-18】【例5-19】,2数
18、组对象的属性数组对象的属性主要是length，它用于获得数组中元素的个数，即数组中最大下标加一。,3数组对象的方法 sort():将数组元素重新排序。reverse():将数组元素顺序颠倒。concat(array1,arrayn)join(string):转换并连接数组中的所有元素为一个字符串,string为分隔符。slice(start,stop):返回一个新的数组，包含从start 到 end的arrayObject 中的元素。tostring():将数组转换成字符串，且返回这个字符串。【例5-20】,5.6.2 字符串对象,1字符串（String）对象的定义方法String对象是动态对
19、象。其格式为：字符串变量名=字符串;字符串变量名=new String(字符串);,2字符串对象的属性字符串对象的最常用属性是length，功能是得到字符串的字符个数。例如：var myUrl=http:/;var myUrlLen=myUrl.length;/或 var myUrlLen=http:/.length;,3字符串对象的方法String对象的方法主要用于字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。anchor(字符串)：为字符串对象中的内容两端加上HTML的定位锚点标记，如同文本。例如：var strcmp=机械工业出版社网站;strcmp=s
20、trcmp.anchor(机工);得到的strcmp值为：机械工业出版社网站1ink()：用于创建一个超链接。【例5-21】,5.6.3 日期对象,1日期对象的定义方法日期对象的定义方法有4种：1）其格式为：var 日期对象名=new Date();2）其格式为：var日期对象名=new Date(milliseconds);3）其格式为：var日期对象名=new Date(string);4）其格式为：var日期对象名=new Date(year,month,day,hours,mintues,seconds,milliseconds);,2日期对象的方法Date对象没有提供直接访问的属性。
21、只具有获得日期、时间，设置日期、时间，格式转换的方法。（1）获取日期、时间的方法获得日期、时间的方法主要有：getYear()：得到当前年份数。getMonth()：得到当前月份数，0代表一月，1代表二月，11代表12月。getDate()：得到当前日期数。getDay()：得到当前星期几。getHours()：得到当前小时数。getMinutes()：得到当前分钟数。getSeconds()：得到当前秒数。getTimeZoneOffset()：得到时区的偏移信息。,（2）设置日期和时间的方法设置日期、时间的方法主要有：setFullYear()：设置年份。setMonth()：设置月份。s
22、etDate()：设置日数。setHours()：设置小时。setMinutes()：设置分钟。setSeconds()：设置秒数。,（3）格式转换的方法格式转换的方法主要有：toGMTString()：转换成格林威治标准时间表达的字符串。toLocaleString()：转换成以当地时间表达的字符串。toString()：把时间信息转换为字符串。parse：从表示时间的字符串中读出时间。UTC：返回从格林威治标准时间到指定时间的差距（单位为ms）。【例5-22】【例5-23】,5.6.4 数学对象数学对象是静态对象，不能用new关键字创建对象的实例，数学对象的调用方式为：Math.数学函数名
23、(参数表),1数学对象的属性与其他对象属性不同的是，数学对象中的属性是只读的，可以使用的常数包括：E：代表数学常数e（=2.7182）。LN10：10的自然对数（=2.30259）。LN2：2的自然对数（=0.69315）。PI：圆周率（=3.1415926）。SQRT1_2：1/2（即0.5）的平方根（=0.7071）。SQRT2：2的平方根（=1.4142）。LOG2E：以2为底e（自然对数的底）的对数（=1.44269）。LOG10E：以10为底e（自然对数的底）的对数（=0.4349）。数学对象的常量和函数与其他对象一样，是区分大小写的。,2数学对象的方法数学对象的主要函数包括：sin
24、(a)：求a的正弦值。cos(a)：求a的余弦值。tan(a)：求a的正切值。asin(a)：求a的反正弦值。acos(a)：求a的反余弦值。atan(a)：求a的反正切值。exp(a)：求a的指数。log(a)：求a的自然对数。pow(base,exponent)：求base为底，exponent为指数的乘方值。round(a)：对a进行四舍五入运算。,floor(a)：得到不大于a的最大整数。sqrt(a)：求a的平方根。abs(a)：求a的绝对值。random()：取随机数，返回01之间的伪随机数。max(a,b)：取a和b中的较大者。min(a,b)：取a和b中的较小者。数学对象中，函
25、数的参数均为浮点型，且三角函数中的参数为弧度值。【例5-24】,5.7 自定义对象,1初始化对象这是一种通过初始化对象的值，来建立自定义对象的方法。初始化对象的一般格式为：对象=属性1:属性值1;属性2:属性值2;属性n:属性值n;,2定义对象的构造函数这种方法的一般格式为：function 对象名(属性1,属性2,属性n)this.属性1=属性值1;this.属性2=属性值2;this.属性n=属性值n;this.方法1=函数名1;this.方法2=函数名2;this.方法m=函数名m;【例5-25】,5.8 DOM对象及编程如图5-22所示，显示了DOM对象的从属关系。,5.8.1 窗口对
26、象,1属性它的主要属性有：closed：用于判断一个窗口是否被关闭。下面一行代码可关闭当前窗口：关闭窗口下面代码将在2s后关闭当前页：setTimeout(window.close();,2000);opener：存放open()方法打开窗口的父窗口。defaultstatus：浏览器状态栏默认的显示信息。status：浏览器状态栏当前显示的信息。【例5-26】print：打印当前窗口中的内容。【例5-27】document、location、history：这3个下级对象也被作为window对象的属性。【例5-28】,2方法window对象的主要方法有：1）open（URL，windowNa
27、me,parameterList）：根据页面地址、窗口名称、窗口风格打开一个窗口。【例5-29】2）alert(text)：弹出警告框，参数为警告信息。3）confirm(text)：弹出确认框，参数为确认信息。4）prompt(text,defaultText)：弹出提示框，参数为提示信息和默认值。【例5-30】5）setTimeout(functionName(),schedule time)：延时schedule time ms（毫秒）后调用functionName()函数。【例5-31】,5.8.2 文档对象文档（document）对象包含当前网页的各种特征，如标题、背景、使用的语言等
28、。,1属性主要属性有：title：文档标题。lastmodified：文档最后修改时间。URL：文档对应的页面地址。cookie：用来创建和获得信息Cookie。bgcolor：文档的背景色。fgcolor：文档的前景色。location：保存文档所有的页面地址信息。alinkcolor：激活链接的颜色。linkcolor：链接的颜色。vlinkcolor：已浏览过的链接颜色。【例5-32】,2方法主要方法有：write(text)：向页面内写文本或标签（不换行）。writeln(text)：向页面内写文本或标签，在最后一个字符后换行。open()：打开一个新文档。close()：关闭当前文档
29、。【例5-33】,5.8.3 位置对象位置（location）对象提供了与当前打开的URL一起工作的方法和属性。,1属性主要属性有：protocol：通信协议。host：页面所在Web服务器的主机名称。port：服务器通信的端口号。pathname：页面在服务器上的路径。hash：页面跳转的锚标信息。search：提交到服务器上进行搜索的信息。hostname：记录主机名称和端口号，中间用“:”分开。href：完整的URL地址。,2方法主要方法有：assign(URL)：将页面导航到另一个地址上去。reload：将页面全部刷新。replace(URL)：使用制定的URL所对应的页面代替当前页面
30、。,5.8.4 历史对象历史（history）对象含有以前访问过的URL地址。,1属性主要属性是length，它反映浏览器访问历史记录的数量。,2方法主要方法有：back()：加载前一个浏览过的URL。forward()：加载后一个浏览过的URL。go(int)：载入相对于整数个位置之前或之后的链接。例如，history.go(6)表示进入历史清单中后面的第6个URL，history.go(-3)表示进入历史清单之前的第3页。【例5-34】,5.9 JavaScript的对象事件处理程序,5.9.1 对象的事件对象事件有3类：l用户引起的事件，如网页装载、表单提交等。l引起页面之间跳转的事件，
31、主要是超链接。l表单内部与界面对象的交互，包括界面对象的改变等。这类事件可以按照应用程序的具体功能自由设计。,5.9.2 常用的事件及处理,1浏览器事件浏览器事件主要由Load、unLoad、DragDrop以及Submit等事件组成。（1）Load事件Load事件发生在浏览器完成一个窗口或一组帧的装载之后。onLoad句柄在Load事件发生后由JavaScript自动调用执行。例如：网页开始显示时并不触发Load事件，只有当所有元素包含图像、声音等被加载完成后才触发Load事件。【例5-35】,（2）Unload事件发生在用户在浏览器的地址栏中输入一个新的URL。【例5-36】（3）Subm
32、it事件Submit事件在完成信息的输入，准备将信息提交给服务器处理时发生。【例5-37】（4）DragDrop事件DragDrop将一个对象拖放到浏览器窗口中。,2鼠标事件常用的鼠标事件有MouseDown、MouseMove、MoMseUp、MouseOver、MouseOot、C1ick、Blur以及Focus等事件。（1）MouseDown事件（2）MouseMove事件（3）MouseUp事件（4）MouseOver事件（5）MouseOut事件【例5-38】（6）Click事件【例5-39】（7）Blur事件【例5-40】（8）Focus事件【例5-41】,3键盘事件（1）KeyD
33、own事件（2）KeyPress事件（3）KeyUp事件（4）Change事件【例5-42】（5）Select事件（6）Move事件（7）Resize事件,5.9.3 错误处理,1Error事件【例5-43】,2错误处理语句（1）throw语句throw语句用于扔出异常。其语法格式为：throw expression;throw 装载错误;（2）try和catch语句try和catch语句结合使用，一起支持异常处理的过程，其语法格式为：try statements;/扔出异常catch(exception)statements;/处理异常,5.9.4 表单对象与交互性调用Form对象的一般格式
34、为：,1Text单行单列输入元素功能：对Text标识中的元素实施有效的控制。属性：name：设定提交信息时的信息名称。对应于HTML文档中的name。value：用以设定出现在窗口中对应HTML文档中value的信息。defaultvalue：包括Text元素的默认值。方法：blur()：将当前焦点移到后台。select()：加亮文字。事件：onFocus：当Text获得焦点时，产生该事件。onBlur：当元素失去焦点时，产生该事件。onselect：当文字被加亮显示后，产生该文件。onchange：当Text元素值改变时，产生该文件。【例5-44】,2Textarea多行多列输入元素功能：对
35、Textarea中的元素进行控制。属性：name：设定提交信息时的信息名称，对应HTML文档Textarea的name。value：设定出现在窗口中对应HTML文档中value的信息。defaultvalue：元素的默认值。方法：blur()：将输入焦点失去。select()：加亮文字。事件：onBlur：当失去输入焦点后产生该事件。onFocus：当输入获得焦点后，产生该文件。onChange：当文字值改变时，产生该事件。onSelect：加亮文字，产生该文件。,3Select选择元素功能：实施对滚动选择元素的控制。属性：name：设定提交信息时的信息名称，对应文档select中的name。
36、value：用以设定出现在窗口中对应HTML文档中value的信息。length：对应文档select中的length。options：组成多个选项的数组。selectIndex：指明一个选项。text：选项对应的文字。selected：指明当前选项是否被选中。index：指明当前选项的位置。defaultselected：默认选项。事件：onBlur：当select选项失去焦点时，产生该文件：onFocas：当select获得焦点时，产生该文件。onChange：选项状态改变后，产生该事件。【例5-45】,4Button按钮功能：对Button按钮的控制。属性：name：设定提交信息时的信息
37、名称，对应文档中button的name。value：设定出现在窗口中对应HTML文档中value的信息。方法：click()：该方法类似于单击一个按钮。事件：onclick：当单击button按钮时，产生该事件。下例演示一个单击按钮的事件：【例5-46】,5checkbox检查框功能：实施对一个具有复选框中元素的控制。属性：name：设定提交信息时的信息名称。value：用以设定出现在窗口中对应HTML文档中value的信息。checked：该属性指明框的状态true/false。defauitchecked：默认状态。方法：click()：使得框的某一个项被选中。事件：onclick：当框被
38、选中时，产生该事件。下面程序中，单击链接，将显示是否选中复选框的提示：Check MeAm I Checked?,6Password口令功能：对具有口令输入的元素的控制。属性：name：设定提交信息时的信息名称，对应HTML文档中password中的name。value：设定出现在窗口中对应HTML文档中value的信息。defaultvalu：默认值。方法：select()：加亮输入口令域。blur()：失去passward输入焦点。focus()：获得password输入焦点。,7submit提交元素功能：对一个具有提交功能按钮的控制。属性：name：设定提交信息时的信息名称，对应HTML
39、文档中submit。value：用以设定出现在窗口中对应HTML文档中value的信息。方法：click()：相当于单击submit按钮。事件：onclick：当单击该按钮时，产生该事件。【例5-47】,6Password口令功能：对具有口令输入的元素的控制。属性：name：设定提交信息时的信息名称，对应HTML文档中password中的name。value：设定出现在窗口中对应HTML文档中value的信息。defaultvalu：默认值。方法：select()：加亮输入口令域。blur()：失去passward输入焦点。focus()：获得password输入焦点。,7submit提交元素功能：对一个具有提交功能按钮的控制。属性：name：设定提交信息时的信息名称，对应HTML文档中submit。value：用以设定出现在窗口中对应HTML文档中value的信息。方法：click()：相当于单击submit按钮。事件：onclick：当单击该按钮时，产生该事件。【例5-47】,
