JavaScript技术.ppt

《JavaScript技术.ppt》由会员分享，可在线阅读，更多相关《JavaScript技术.ppt（80页珍藏版）》请在三一办公上搜索。

1、第4章 JavaScript脚本技术,本章目标,了解JavaScript的定义和基本概念了解JavaScript的基本语法了解基于对象编程方法了解事件驱动概念掌握JavaScript中的对象掌握JavaScript中的事件掌握使用JavaScript处理表单,4.1 JavaScript基本概念,JavaScript的概念以及特点JavaScript和Java的区别程序运行环境,4.1.1 JavaScript的概念以及特点,JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现

2、弥补了HTML语言的缺陷，可以开发客户端的应用程序。JavaScript具有以下几个基本特点：是一种脚本编写语言基于对象的语言简单性安全性动态性跨平台性,4.1.2 JavaScript和Java的区别,两种语言间的异同作如下比较：基于对象和面向对象解释和编译强变量和弱变量代码格式不一样嵌入方式不一样,4.1.3 程序运行环境,软件环境：Windows 95/98或Windows NT。Netscape Navigator x.0或Internet Explorer x.0。用于编辑HTML文档的字符编辑器(Notepad等)或HTML文档编辑器。硬件环境：基本内存32M。CRT至少需要256

3、颜色，分辨率在640X480以上。CPU至少133以上。鼠标和其它外部设备（根据需要选用）。,4.2.1 JavaScript加入HTML,直接法：引用方式：,4.2.2 JavaScript的标识和说明语句,4.2.2 第一个JavaScript例子,Ch4_1 第一个JavaScript例子,4.3 变量、变量类型、作用域、数组,在JavaScript中四种基本的数据类型：数值（整数和实数）、字符串型（用“”号或括起来的字符或数值）、布尔型（使True或False表示）和空值。在JavaScript的基本类型中的数据可以是常量，也可以变量。由于JavaScript采用弱类型的形式，因而一个

4、数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。,4.3 变量、变量类型、作用域、数组（续）,常量整型常量实型常量布尔值字符型常量空值特殊字符,4.3 变量、变量类型、作用域、数组（续）,变量的定义变量的主要作用是存取数据、提供存放信息的容器。变量的命名变量以字母开头，中间可以出现数字除下划线作为连字符外，变量名称不能有空格、加号、减号、逗号或其它符号。不能使用JavaScript中的关键字作为变量。变量的类型在JavaScript中，变量可以不作声明，而在使用时再根据数据的类型来确其变量的类型。变量的声明及其作用域在JavaScript中同样有全局变量和局部变量。全局变

5、量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。,4.3 变量、变量类型、作用域、数组（续）,Ch4_2 变量定义,4.3 变量、变量类型、作用域、数组（续）,数组的定义,4.3 变量、变量类型、作用域、数组（续）,Ch4_3 数组定义,4.4 函数,函数为程序设计人员提供了一个丰常方便的方法。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。,4.4 函数（续）,4.4 函数（续）,Ch4_4

6、函数,?编一个求一个数立方的函数,4.4 函数（续）,Ch4_5 测试参数个数,4.5 运算符、表达式,在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常由表达式来完成，可以说它是变量、常量、布尔及运算符的集合。表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。,4.5 运算符、表达式（续）,JavaScript有双目运算符和单目运算符两种运算符。双目运算符由下列组成：操作数 运算符 操作数单目运算符：只需一个操作数，其运算符可在前或后。即：操作数 运算符或者 运算符 操作数,4.5 运算符、表达式（续）,算术运算符+（加）、-（减）、*（乘）、/（除）

7、、%（取模）、-（取反）、+（递加1）、-（递减1）比较运算符(大于)、=(大于等于)、=(等于)、!=(不等于)、=（绝对等于）布尔逻辑运算符!（取反）、&（逻辑与）、|（逻辑或）、（逻辑异或）三目运算符表达式？结果：结果,4.6 结构化程序设计基础,结构化程序设计的基本思想 自顶向下，模块化，逐步求精。3种基本结构顺序结构、选择结构和循环结构 3种基本结构的共同特点 只有一个入口。只有一个出口。结构内的每一部分都有机会被执行到。结构内不存在“死循环”。,4.6.1 结构化程序设计的基本思想,结构化程序设计的基本思想是：自顶向下，模块化，逐步求精。任何程序都可以用三种基本结构的组合来实现。这

8、三种基本结构是：顺序结构、选择结构和循环结构。这三种结构都具有也只具有一个入口和一个出口。,4.6.2 程序的三种基本结构,顺序结构流程图画法：,4.6.2 程序的三种基本结构（续）,分支结构流程图画法：,4.6.2 程序的三种基本结构（续）,循环结构流程图画法：,4.6.2 程序的三种基本结构（续）,三种基本结构的共同特点：只有一个入口；只有一个出口；结构内的每一部分都有机会被执行到；结构内不存在“死循环”。,程序流程图,N-S流程图 1973年美国学者提出了一种新型流程图，也称盒图特点：简单明了，逻辑清晰，结构严谨,程序流程图（续）,N-S图顺序结构：,程序流程图（续）,N-S图分支结构：

9、,程序流程图（续）,N-S图循环结构：,4.7 JavaScript的流程控制,在任何一种语言中，程序控制是必须的，它能使得整个程序顺利的按程序设计者希望的方式和顺序执行。下面是JavaScript常用的程序控制结构及语句，因为缺省情况下，程序是按照语句的顺序来依次执行的，所以顺序结构就是通过语句的顺序实现的。其他两种结构，分别是：分支结构循环结构,4.7 JavaScript的流程控制（续）,分支结构：,4.7 JavaScript的流程控制（续）,ch4_6 判断举例1,4.7 JavaScript的流程控制（续）,Ch4_7 判断举例2,4.7 JavaScript的流程控制（续）,分支

10、结构：,4.7 JavaScript的流程控制（续）,ch4_8多重分支举例,4.7 JavaScript的流程控制（续）,for循环,4.7 JavaScript的流程控制（续）,ch4_9 for循环举例,4.7 JavaScript的流程控制（续）,ch4_11 for循环嵌套举例,4.7 JavaScript的流程控制（续）,while循环,4.7 JavaScript的流程控制（续）,ch4_10 while循环举例,4.7 JavaScript的流程控制（续）,do while循环,4.7 JavaScript的流程控制（续）,ch4_12 do while循环举例,4.7 Jav

11、aScript的流程控制（续）,break和continue语句,4.7 JavaScript的流程控制（续）,ch4_13 break和continue,4.8 对象的基础知识,对象的基本结构JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素构成的。引用对象的途径一个对象要真正地被使用，可采用以下几种方式获得：引用JavaScript内部对象；由浏览器环境中提供；创建新对象。,4.8 对象的基础知识（续）,在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。,4.7 JavaScript的流程控制（续）,ch4_14 利用对象

12、访问数组元素,4.8 对象的基础知识（续）,4.7 JavaScript的流程控制（续）,ch4_15 with的用法,4.8 对象的基础知识（续）,this关键字this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，为此JavaScript提供了一个用于将对象指定当前对象的语句this。,4.8 对象的基础知识（续）,ch4_16 this的用法,4.8 对象的基础知识（续）,对象属性的引用可由下列三种方式之一实现：使用点运算符通过对象的下标实现引用通过字符串的形式

13、实现,4.8 对象的基础知识（续）,对象下标：,4.8 对象的基础知识（续）,字符串的形式：,4.8 对象的基础知识（续）,对象方法的使用：,4.8 对象的基础知识（续）,例子:Student.name=“张三”Student.age=23Student0=“张三”Student1=23Student“name”=“张三”Student“age”=23Student.study(),4.9JavaScript的内置对象和方法,JavaScript提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。在JavaScript提供了String（字符串

14、）、Math（数值计算）和Date（日期）三种对象和其他一些相关的方法。从而为编程人员快速开发强大的脚本程序提供了非常有利的条件。,常用内部对象,常用内部对象串对象该对象只有一个属性，即length。string对象的方法共有个，主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。算术函数的Math对象Math中提供了个属性，它们是数学中经常用到的常数、以为底的自然对数、以为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1_2,2的平方根为SQRT2。主要方法有：绝对值：abs()、正弦余弦值：sin(),cos()、反正弦反余弦:as

15、in(),acos()、正切反正切：tan(),atan()、四舍五入：round()、平方根：sqrt()、基于几方次的值：pow(base,exponent)。日期及时间对象Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。,常用内部对象举例,ch4_17 Date对象使用,JavaScript中的系统函数,JavaScript中的系统函数JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数，使用这些函数不需创建任何实例,可直接用。返回字符串表达式中的值:eval()返回字符串ASCI码:unEscape()返回字符的编码:escape()返回

16、实数:parseFloat()返回不同进制的数:parseInt(num,radix),4.10JavaScript可以使用的浏览器对象,对象模型如下图所示：,窗口对象,JavaScript是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关输入可通过窗口（window）对象来完成，而输出可通过文档（document）对象的方法来实现。窗口及输入输出窗口对象窗口对象的事件驱动窗口对象的方法窗口对象中的属性输出流及文档对象,窗口对象,window.open(“URL”,”窗口名字”,”窗口属性”)创建一个新窗口alert()创建一个具有OK按钮的对话框confirm()提供一

17、个具有OK和Cancel按钮的对话框prompt(“提示信息”,默认值)允许用户输入信息的对话框窗口对象属性:frames:一个窗口中的全部帧数Parent:当前窗口或帧的父窗口defaultstatus:默认状态,值显示在窗口的状态栏中status:包含文档窗口中帧中的当前信息top:用以实现所有的下级窗口的窗口window:指的是当前窗口 self:也是引用当前窗口,窗口对象,ch4_18 弹出窗口举例,窗口对象,ch4_19 打开新窗口举例,文档对象,文档对象是非常重要的,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。document中三个主要的

18、对象anchor锚对象链接links对象窗体（Form）对象文档对象中的attribute属性激活的链接颜色：alinkColor链接颜色：linkColor浏览过后的颜色：vlinkColor背景颜色：bgColor前景颜色：fgColor文档对象的基本元素表单属性锚属性链接属性,文档对象,ch4_20 表单取值举例,文档对象,ch4_21 表单验证举例,4.11JavaScript的事件处理,基本概念JavaScript是基于对象(object-based)的语言。而基于对象的基本特征，就是采用事件驱动(event-driven)。通常鼠标或热键的动作我们称之为事件，而由鼠标或热键引发的一

19、连串程序的动作，称之为事件驱动。而对事件进行处理的程序或函数，我们称之为事件处理程序（Event Handler）。事件处理程序在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。,4.11JavaScript的事件处理（续）,事件驱动单击事件onclick改变事件onchange选中事件onselect获得焦点事件onfocus失去焦点onblur载入文件onload卸载文件onunload鼠标左键按下onmousedown鼠标左键抬起onmouseup获取鼠标onmouseover失去鼠标onmou

20、seout,4.11JavaScript的事件处理（续）,ch4_22 单击按钮事件,4.11JavaScript的事件处理（续）,ch4_23 文本框事件,4.11JavaScript的事件处理（续）,ch4_24 onselect事件,4.11JavaScript的事件处理（续）,ch4_25 onblur事件验证,4.11JavaScript的事件处理（续）,ch4_26 onload事件,4.11JavaScript的事件处理（续）,ch4_27 onMouseUp和onMouseDown,本章总结,了解JavaScript的基本概念：JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言JavaScript的基本特点是一种脚本编写语言。基于对象的语言。简单性。安全性。动态性。跨平台性。掌握JavaScript的基本语法熟练掌握JavaScript中的对象，主要是window、document对象等常用对象。掌握事件驱动概念熟练掌握JavaScript中的事件，例如onmouseover、onmouseout、onsubmit等。熟练掌握使用JavaScript处理表单，例如表单内容的验证等。,