JavaScript脚本技术.ppt

《JavaScript脚本技术.ppt》由会员分享，可在线阅读，更多相关《JavaScript脚本技术.ppt（47页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第第4章章 JavaScript脚本技术脚本技术 WS-NE30-3-01 04-2北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有本章目标本章目标了解JavaScript的定义和基本概念了解JavaScript的基本语法了解基于对象编程方法了解事件驱动概念掌握JavaScript中的对象掌握JavaScript中的事件掌握使用JavaScript处理表单WS-NE30-3-01 04-3北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.1 JavaScript基本概念基本概念JavaScript的概念以及特点的概念以及特点Ja

2、vaScript和和Java的区别的区别程序运行环境程序运行环境WS-NE30-3-01 04-4北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.1.1 JavaScript的概念以及特点的概念以及特点JavaScript是一种基于对象是一种基于对象(Object)和事件驱动和事件驱动(Event Driven)并具有安全性能的脚本语言。它是通过嵌入或调入在并具有安全性能的脚本语言。它是通过嵌入或调入在标准的标准的HTML语言中实现的。它的出现弥补了语言中实现的。它的出现弥补了HTML语言的语言的缺陷，可以开发客户端的应用程序。缺陷，可以开发客户端的应用程序

3、。JavaScript具有以下几个基本特点：具有以下几个基本特点：是一种脚本编写语言基于对象的语言简单性安全性动态性跨平台性WS-NE30-3-01 04-5北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.1.2 JavaScript和和Java的区别的区别两种语言间的异同作如下比较：两种语言间的异同作如下比较：基于对象和面向对象解释和编译强变量和弱变量代码格式不一样嵌入方式不一样WS-NE30-3-01 04-6北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.1.3 程序运行环境程序运行环境软件环境：软件环境：Windo

4、ws 95/98或Windows NT。Netscape Navigator x.0或Internet Explorer x.0。用于编辑HTML文档的字符编辑器(Notepad等)或HTML文档编辑器。硬件环境：硬件环境：基本内存32M。CRT至少需要256颜色，分辨率在640X480以上。CPU至少133以上。鼠标和其它外部设备（根据需要选用）。WS-NE30-3-01 04-7北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.2 JavaScript的标识和说明语句的标识和说明语句语法:说明:通过标识通过标识.指明指明JavaScript脚本源代码将放脚

5、本源代码将放入其间。通过属性入其间。通过属性Language=“JavaScript”说明标识中是使说明标识中是使用的何种语言。用的何种语言。语法:/语句语句说明:单行注释，单行注释，JavaScript将忽略这一行后面的语句。将忽略这一行后面的语句。语法:/*语句集语句集*/说明:注释多行，注释多行，JavaScript将忽略将忽略/*和和*/之间的所有语句。之间的所有语句。WS-NE30-3-01 04-8北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.3 变量、变量类型、作用域、数组变量、变量类型、作用域、数组在在JavaScript中四种基本的数据类

6、型：数值（整数和中四种基本的数据类型：数值（整数和实数）、字符串型（用实数）、字符串型（用“”号或号或括起来的字符括起来的字符或数值）、布尔型（使或数值）、布尔型（使True或或False表示）和空值。表示）和空值。在在JavaScript的基本类型中的数据可以是常量，也可的基本类型中的数据可以是常量，也可以变量。以变量。由于由于JavaScript采用弱类型的形式，因而一个数据的采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。确定其数据的类型的。WS-NE30-3-01 04-9北京清华万博网络技术股

7、份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.3 变量、变量类型、作用域、数组（续）变量、变量类型、作用域、数组（续）常量常量整型常量实型常量布尔值字符型常量空值特殊字符WS-NE30-3-01 04-10北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.3 变量、变量类型、作用域、数组（续）变量、变量类型、作用域、数组（续）变量的定义变量的定义变量的主要作用是存取数据、提供存放信息的容器。变量的命名变量的命名变量以字母开头，中间可以出现数字除下划线作为连字符外，变量名称不能有空格、加号、减号、逗号或其它符号。不能使用JavaScript中的关

8、键字作为变量。变量的类型变量的类型在JavaScript中，变量可以不作声明，而在使用时再根据数据的类型来确其变量的类型。变量的声明及其作用域变量的声明及其作用域在JavaScript中同样有全局变量和局部变量。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。WS-NE30-3-01 04-11北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.3 变量、变量类型、作用域、数组（续）变量、变量类型、作用域、数组（续）数组的定义数组的定义语法:数组名数组名=new Array(数组

9、元素个数数组元素个数)说明:其中数组名表示程序中需要使用的数组引用，数组元素其中数组名表示程序中需要使用的数组引用，数组元素个数表示这个数组中有多少个元素。个数表示这个数组中有多少个元素。WS-NE30-3-01 04-12北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.4 函数函数函数为程序设计人员提供了一个丰常方便的方法。通函数为程序设计人员提供了一个丰常方便的方法。通常在进行一个复杂的程序设计时，总是根据所要完成常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分的功能，将程序划分为一些相对独立的部分，每部分编写

10、一个函数。从而，使各部分充分独立，任务单一，编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。程序清晰，易懂、易读、易维护。WS-NE30-3-01 04-13北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.4 函数（续）函数（续）语法:function 函数名函数名（参数（参数,变元）变元）函数体函数体;return 表达式表达式;说明:当调用函数时当调用函数时,所用变量或自变量均可作为变元传递。所用变量或自变量均可作为变元传递。函数由关键字函数由关键字function定义。函数名：定义自己函数定义。函数名：定义自己函数的名字。

11、参数表，是传递给函数使用或操作的值，其的名字。参数表，是传递给函数使用或操作的值，其值可以是常量值可以是常量，变量或其它表达式。，变量或其它表达式。在在JavaScript中中可通过可通过arguments.length来检查参数的个数。来检查参数的个数。通过指通过指定函数名（实参）来调用一个函数。必须使用定函数名（实参）来调用一个函数。必须使用return将值返回。函数名对大小写是敏感的。将值返回。函数名对大小写是敏感的。WS-NE30-3-01 04-14北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.5 运算符、表达式运算符、表达式在定义完变量后，就可

12、以对它们进行赋值、改变、在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常由表达式来完成，计算等一系列操作，这一过程通常由表达式来完成，可以说它是变量、常量、布尔及运算符的集合。表可以说它是变量、常量、布尔及运算符的集合。表达式可以分为算术表述式、字串表达式、赋值表达达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。式以及布尔表达式等。WS-NE30-3-01 04-15北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.5 运算符、表达式（续）运算符、表达式（续）JavaScript有双目运算符和单目运算符两种运算符。有双

13、目运算符和单目运算符两种运算符。双目运算符由下列组成：双目运算符由下列组成：操作数 运算符 操作数单目运算符：单目运算符：只需一个操作数，其运算符可在前或后。即：操作数 运算符或者 运算符 操作数 WS-NE30-3-01 04-16北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.5 运算符、表达式（续）运算符、表达式（续）算术运算符算术运算符+（加）、-（减）、*（乘）、/（除）、%（取模）、-（取反）、+（递加1）、-（递减1）比较运算符比较运算符(大于)、=(大于等于)、=(等于)、!=(不等于)、=（绝对等于）布尔逻辑运算符布尔逻辑运算符!（取反）、

14、&（逻辑与）、|（逻辑或）、（逻辑异或）三目运算符三目运算符表达式？结果：结果WS-NE30-3-01 04-17北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.6 结构化程序设计基础结构化程序设计基础 结构化程序设计的基本思想结构化程序设计的基本思想 自顶向下，模块化，逐步求精。3种基本结构种基本结构顺序结构、选择结构和循环结构 3种基本结构的共同特点种基本结构的共同特点 只有一个入口。只有一个出口。结构内的每一部分都有机会被执行到。结构内不存在“死循环”。WS-NE30-3-01 04-18北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份

15、有限公司版权所有4.6.1 结构化程序设计的基本思想结构化程序设计的基本思想结构化程序设计的基本思想是：自顶向下，模块化，结构化程序设计的基本思想是：自顶向下，模块化，逐步求精。任何程序都可以用三种基本结构的组合逐步求精。任何程序都可以用三种基本结构的组合来实现。这三种基本结构是：顺序结构、选择结构来实现。这三种基本结构是：顺序结构、选择结构和循环结构。这三种结构都具有也只具有一个入口和循环结构。这三种结构都具有也只具有一个入口和一个出口。和一个出口。WS-NE30-3-01 04-19北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.6.2 程序的三种基本结

16、构程序的三种基本结构 顺序结构流程图画法：顺序结构流程图画法：WS-NE30-3-01 04-20北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.6.2 程序的三种基本结构程序的三种基本结构（续）（续）分支结构流程图画法：分支结构流程图画法：WS-NE30-3-01 04-21北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.6.2 程序的三种基本结构程序的三种基本结构（续）（续）循环结构流程图画法：循环结构流程图画法：WS-NE30-3-01 04-22北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公

17、司版权所有4.6.2 程序的三种基本结构程序的三种基本结构（续）（续）三种基本结构的共同特点：三种基本结构的共同特点：只有一个入口；只有一个出口；结构内的每一部分都有机会被执行到；结构内不存在“死循环”。WS-NE30-3-01 04-23北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有程序流程图程序流程图 N-S流程图流程图 1973年美国学者提出了一种新型流程图，也称盒图特点：简单明了，逻辑清晰，结构严谨WS-NE30-3-01 04-24北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有程序流程图程序流程图（续）（续）N-SN

18、-S图顺序结构：图顺序结构：WS-NE30-3-01 04-25北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有程序流程图程序流程图（续）（续）N-SN-S图分支结构：图分支结构：WS-NE30-3-01 04-26北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有程序流程图程序流程图（续）（续）N-SN-S图循环结构：图循环结构：WS-NE30-3-01 04-27北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.7 JavaScript的流程控制的流程控制 在任何一种语言中，程序控制是必须的，它

19、能使在任何一种语言中，程序控制是必须的，它能使得整个程序顺利的按程序设计者希望的方式和顺得整个程序顺利的按程序设计者希望的方式和顺序执行。下面是序执行。下面是JavaScript常用的程序控制结构及常用的程序控制结构及语句，因为缺省情况下，程序是按照语句的顺序语句，因为缺省情况下，程序是按照语句的顺序来依次执行的，所以顺序结构就是通过语句的顺来依次执行的，所以顺序结构就是通过语句的顺序实现的。其他两种结构，分别是：序实现的。其他两种结构，分别是：分支结构循环结构WS-NE30-3-01 04-28北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.7 JavaS

20、cript的流程控制的流程控制（续）（续）分支结构：分支结构：语法:if（表述式）（表述式）语句段；语句段；else语句段；语句段；说明:若表达式为若表达式为true，则执行语句段；否则执行语句段。，则执行语句段；否则执行语句段。WS-NE30-3-01 04-29北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.7 JavaScript的流程控制的流程控制（续）（续）分支结构分支结构：语法:Switch(变量名变量名)Case 值值1:语句段语句段1Case 值值2:语句段语句段2default:语句段语句段n说明:Switch分支语句用来实现多支判断，根据

21、变量名指定的变量的变分支语句用来实现多支判断，根据变量名指定的变量的变量值和量值和case语句后面的值是否相等来决定是否执行后面的语句，语句后面的值是否相等来决定是否执行后面的语句，如果都不相等，则执行如果都不相等，则执行default后面的语句。后面的语句。WS-NE30-3-01 04-30北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.7 JavaScript的流程控制的流程控制（续）（续）循环结构：循环结构：语法:while（条件）（条件）语句段语句段说明:当条件为真时，重复循环，否则退出循环。当条件为真时，重复循环，否则退出循环。WS-NE30-3

22、-01 04-31北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.8 对象的基础知识对象的基础知识对象的基本结构对象的基本结构JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素构成的。引用对象的途径引用对象的途径一个对象要真正地被使用，可采用以下几种方式获得：引用JavaScript内部对象；由浏览器环境中提供；创建新对象。WS-NE30-3-01 04-32北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.8 对象的基础知识（续）对象的基础知识（续）在在JavaScript中

23、提供了几个用于操作对象的语句和关中提供了几个用于操作对象的语句和关键字及运算符。键字及运算符。语法:For（对象属性名（对象属性名 in 已知对象名）已知对象名）循环体循环体说明:该该语语句句的的功功能能是是用用于于对对已已知知对对象象的的所所有有属属性性进进行行操操作作的的控控制循环。制循环。WS-NE30-3-01 04-33北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.8 对象的基础知识（续）对象的基础知识（续）语法:With（对象名）（对象名）循环体循环体说明:使使用用该该语语句句的的意意思思是是：在在该该语语句句体体内内，任任何何对对变变量量的的

24、引引用用被被认为是这个对象的属性。认为是这个对象的属性。WS-NE30-3-01 04-34北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.8 对象的基础知识（续）对象的基础知识（续）this关键字关键字this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，为此JavaScript提供了一个用于将对象指定当前对象的语句this。WS-NE30-3-01 04-35北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公

25、司版权所有4.8 对象的基础知识（续）对象的基础知识（续）对象属性的引用可由下列三种方式之一实现：对象属性的引用可由下列三种方式之一实现：使用点运算符通过对象的下标实现引用通过字符串的形式实现WS-NE30-3-01 04-36北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.8 对象的基础知识（续）对象的基础知识（续）对象下标：对象下标：语法:Objectnum说明:其其中中ObjectObject是是对对象象名名称称，numnum是是属属性性在在这这个个对对象象中中是是第第几个属性的索引。几个属性的索引。WS-NE30-3-01 04-37北京清华万博网络

26、技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.8 对象的基础知识（续）对象的基础知识（续）字符串的形式字符串的形式：语法:Object“属性名称属性名称”说明:其其中中ObjectObject是是对对象象名名称称，numnum是是属属性性在在这这个个对对象象中中是是第第几几个个属属性性的的索引。索引。WS-NE30-3-01 04-38北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.8 对象的基础知识（续）对象的基础知识（续）对象方法的使用：对象方法的使用：语法:Object“属性名称属性名称”说明:其其中中ObjectObject是是

27、对对象象的的名名称称，MethodsMethods是是对对象象方方法法的的名名称。称。WS-NE30-3-01 04-39北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.9JavaScript的内置对象和方法的内置对象和方法JavaScript提供了一些非常有用的常用内部对象和提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。基于对象编程的真正目的。在在JavaScript提供了提供了String（字符串）、（字符串）、Math（数（数值计算）和值计算）和Date

28、（日期）三种对象和其他一些相关（日期）三种对象和其他一些相关的方法。从而为编程人员快速开发强大的脚本程序的方法。从而为编程人员快速开发强大的脚本程序提供了非常有利的条件。提供了非常有利的条件。WS-NE30-3-01 04-40北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有常用内部对象常用内部对象常用内部对象常用内部对象串对象该对象只有一个属性，即length。string对象的方法共有个，主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。算术函数的math对象math中提供了个属性，它们是数学中经常用到的常数、以为底

29、的自然对数、以为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1_2,2的平方根为SQRT2。主要方法有：绝对值：abs()、正弦余弦值：sin(),cos()、反正弦反余弦:asin(),acos()、正切反正切：tan(),atan()、四舍五入：round()、平方根：sqrt()、基于几方次的值：Pow(base,exponent)。日期及时间对象Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。WS-NE30-3-01 04-41北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有JavaScript中的系统函数中的系

30、统函数JavaScript中的系统函数中的系统函数JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数，使用这些函数不需创建任何实例,可直接用。返回字符串表达式中的值返回字符串ASCI码返回字符的编码返回实数返回不同进制的数WS-NE30-3-01 04-42北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.10JavaScript可以使用的浏览器对象可以使用的浏览器对象 对象模型如下图所示：对象模型如下图所示：WS-NE30-3-01 04-43北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有窗口对象

31、窗口对象JavaScript是基于对象的脚本编程语言，那么它的是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关输入输入输出就是通过对象来完成的。其中有关输入可通过窗口（可通过窗口（window）对象来完成，而输出可通）对象来完成，而输出可通过文档（过文档（document）对象的方法来实现。）对象的方法来实现。窗口及输入输出窗口及输入输出窗口对象窗口对象的事件驱动窗口对象的方法窗口对象中的属性输出流及文档对象WS-NE30-3-01 04-44北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有文档对象文档对象文档对象是非常重要的文档对象是非

32、常重要的,它位于最低层它位于最低层,但对于我们实现但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。页面信息交互起作关键作用。因而它是对象系统的核心部分。document中三个主要的对象anchor锚对象链接links对象窗体（Form）对象文档对象中的attribute属性激活的链接颜色：alinkcolor链接颜色：linkcolor浏览过后的颜色：VlinkColor背景颜色：bgcolor前景颜色：Fgcolor文档对象的基本元素表单属性锚属性链接属性WS-NE30-3-01 04-45北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权

33、所有4.11JavaScript的事件处理的事件处理 基本概念基本概念JavaScript是基于对象(object-based)的语言。而基于对象的基本特征，就是采用事件驱动(event-driven)。通常鼠标或热键的动作我们称之为事件，而由鼠标或热键引发的一连串程序的动作，称之为事件驱动。而对事件进行处理的程序或函数，我们称之为事件处理程序（Event Handler）。事件处理程序事件处理程序在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。WS-NE30-3-01 04-46北京清华万博网络技

34、术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有4.11JavaScript的事件处理的事件处理（续）（续）事件驱动事件驱动单击事件onclick改变事件onchange选中事件onselect获得焦点事件onfocus失去焦点onblur载入文件onload卸载文件onunload鼠标左键按下onmousedown鼠标左键抬起onmouseup获取鼠标onmouseover失去鼠标onmouseoutWS-NE30-3-01 04-47北京清华万博网络技术股份有限公司版权所有北京清华万博网络技术股份有限公司版权所有本章总结：本章总结：了解了解JavaScript的基本概念：的基

35、本概念：JavaScript是一种基于对象（是一种基于对象（Object）和事件驱动（和事件驱动（Event Driven）并具有安全性能的脚本语言）并具有安全性能的脚本语言JavaScript的基本特点的基本特点是一种脚本编写语言。基于对象的语言。简单性。安全性。动态性。跨平台性。掌握掌握JavaScript的基本语法的基本语法熟练掌握熟练掌握JavaScript中的对象，主要是中的对象，主要是window、document对象等常对象等常用对象。用对象。掌握事件驱动概念熟练掌握掌握事件驱动概念熟练掌握JavaScript中的事件，例如中的事件，例如onmouseover、onmouseout、onsubmit等。等。熟练掌握使用熟练掌握使用JavaScript处理表单，例如表单内容的验证等。处理表单，例如表单内容的验证等。