第四章 JavaScript 语言(1).ppt

1、第四章 JavaScript 基础知识,前言:Web 中的静态和动态网页,早期的网页完全使用HTML编制，此类网页不会随着时间、场合等其他因素而变化，被称为“静态网页”。 随着Web技术的发展，单一的HTML已经不能满足网页制作的要求。例如，如果用户要求服务器发布其机器内部的时间信息，仅使用HTML无法完成这种要求。 需要使用程序语言来把“静态”的HTML网页，变成“动态”的HTML网页。,Web 中动态网页工作模式:,动态网页的工作模式有两种， 一种是将程序代码镶嵌在HTML网页中，下载到用户浏览器中，由用户浏览器进程对下载的代码进行解读和执行后，将执行结果显示在浏览器屏幕上。 另一种工作模

2、式是由服务器执行镶嵌在HTML网页中的程序，并将解释的结果发布到网络上，由用户浏览器并将结果在屏幕上展示。,Web 中动态网页一种模式:将程序代码镶嵌在HTML网页中由浏览器解释执行,这类动态网页实现的语言之一就是JavaScript,它是一种嵌入在HTML文档中的脚本语言，弥补了HTML语言交互功能差、控制呆板单调的缺陷。 如： JavaScript可以对浏览器和用户的交互进行控制，如对单击鼠标和键盘操作等用户输入信息作出反应。 可以访问和修改HTML文档中任何元素的CSS属性和内容，能够使得形式上的静态文本具有高度的动态性。,Web 中的动态网页的另一种工作模式：服务器执行镶嵌在HTML网

3、页中的程序，并将解释的结果发布到浏览器上,目前，比较流行的服务器端动态网页程序设计语言有JSP、ASP、PHP等。 特点: 1 、主要支持文件操作，数据库访问，网络连接等功能。 2、与浏览器无关 3、高可靠性，减轻客户端的负担 4、较为简单方便学习,第一节 JavaScript 概述 （4.1）,JavaScript的历史 JavaScript语言和Java语言 什么是JavaScript 及用途 JavaScript组成部分,JavaScript 历史,最初的时候，Netscape公司计划推出的语言名称是LiveScript ， 1995年， Netscape和Sun Microsystem

4、推出新版本并将其更名为JavaScript。最初的JavaScript版本是JavaScript 1.0，并能在Navigator 2.0上运行 20世纪九十年代末，欧洲计算机厂商协会（European Computer Manufacturers Association）发布了 JavaScript 标准（JavaScript 1.1），亦称ECMAScript，ISO-16262。 目前，JavaScript已经发展到了JavaScript 1.5 ，它也和ECMA-262的V3完全兼容。 Internet Explorer 6.0（ JScript ）和Navigator 7.0都能够支

5、持ECMAScript的标准。不同的是，两种浏览器都在ECMAScript的基础上加入了许多自己的内容，所以它们对于JavaScript仍然不能完全兼容，特别在于文档对象模型(DOM)方面。,第一节 JavaScript 概述,JavaScript的历史 JavaScript语言和Java语言 什么是JavaScript 及用途 JavaScript组成部分,JavaScript语言和Java语言比较（1）,JavaScript语言与Java语言之间虽然从字面上来讲，似乎关系密切，它们完全是两种不同的语言。 首先，JavaScript是Netscape公司的产品，而Java是Sun公司的产品。

6、 Java是一种面向对象的编程语言，支持面向对象编程，是一种强类型的语言，语法十分严谨，变量必须进行声明指定其数据类型。必须进行编译。,JavaScript语言和Java语言比较（2）,和java相比JavaScript是一种基于对象的解释型脚本语言： 它将源代码直接写入HTML页面中，并不需要预先的编译工作，当浏览器将HTML文本下载下来后，由浏览器进行解释执行。 JavaScript是一种弱类型的语言，相对而言，JavaScript的语法要自由得多。在JavaScript中，变量不一定要进行声明，在声明中也不需要指定其数据类型。而且，JavaScript也不进行强制类型检查， 在Java和

7、JavaScript中同样都要使用到对象，但Java是一种基于类(class)的语言，在Java编程时需要先定义类，定义类的属性和方法，在使用时必须创建类的实例。而JavaScript是一种基于原型(prototype)的语言，编程时并不区分类和实例，在使用对象时，也不需要关心对象的所有属性和方法。,第一节 JavaScript 概述,JavaScript的历史 JavaScript语言和Java语言 什么是JavaScript 及用途 JavaScript组成部分,什么是JavaScript,JavaScript是一种脚本语言，可以直接嵌入到HTML文档中，javascript代码的集合称为

8、脚本。一个HTML文档可以包含任意数量的嵌入式脚本。 浏览器能够理解其中的JavaScript脚本，并对这些JavaScript脚本进行解释执行。 由于JavaScript是在浏览器中解释执行的，所以JavaScript具有平台无关性。,JavaScript的用途（1）,JavaScript是一种功能强大的语言，它可以和HTML页面完美地结合在一起， JavaScript提供了许多内置的对象和浏览器的对象，运用JavaScript可以控制HTML页面，并对页面中某些鼠标与键盘输入等事件作出响应。 可以完成一些本来是通过服务器完成的编程任务。减轻服务器的负载压力。 可以作为Java applet

9、的替代。,JavaScript的用途（2）,具体来说： 创建生动的用户界面 :控制文档的外观和内容 既保持页面的美观，又使页面变得生动活泼。 数据有效性验证工作 JavaScript能够实现在客户端进行一次数据有效性验证。不论是遗漏了某些数据，还是填入了无效数据，都可以在表单提交前检验出来，立即反馈给用户，而不将无效的数据发往服务器。 数据查找 在数据量不大的情况下，运用JavaScript可以将数据存放在页面中，用户填入关键词后并不送往服务器，而是在客户端直接进行查找，然后直接在客户端将检索结果反馈给用户。,第一节 JavaScript 概述,JavaScript的历史 JavaScript

10、语言和Java语言 什么是JavaScript 及用途 JavaScript组成部分,JavaScript组成部分,JavaScript是Netscape公司提出的一种跨平台的、基于对象的脚本语言。在JavaScript语言中分为三个部分： JavaScript核心语言 JavaScript客户端扩展 JavaScript服务器端扩展。,1.JavaScript核心语言,是语言的核心，定义的是在客户端和服务器端都会用到的基本的语法。 核心语言部分已经相当成熟。在ECMA-262（ ISO-16262 ）规范中进行了详细的描述， 在JavaScript核心语言部分中包括了JavaScript的基

11、本语法： 操作符 表达式 语句 函数 JavaScript内置的对象Array对象、Date对象和Math对象。,2.JavaScript客户端扩展,在客户端应用的JavaScript是一组对象的集合，这就是JavaScript在核心语言的基础上扩展了控制浏览器和文档对象模型DOM (Document Object Model)。 利用这组对象可以对浏览器，html文档中元素的内容与CSS属性，用户交互（鼠标和键盘等输入信息作出反应）这样， JavaScript在客户端编写的脚本中，就可以对页面上的对象进行控制。 对于JavaScript客户端扩展部分的标准化还不是很完善，Navigator和

12、Internet Explorer浏览器对客户端JavaScript的支持还有一定的差异,特别是文档对象模型 .,3. JavaScript服务器端扩展,在服务器端运行的JavaScript在核心语言的基础上扩展了在服务器上运行需要的一组对象的集合。 这些对象可以应用于Web服务器编程，比如，支持与数据库管理系统之间的通信等； JavaScript在服务端的应用远少于在客户端的应用。,Javascript讲解的内容,Javascript程序的组成(4.3 4.4 4.5 4.6 4.7 4.8 4.9 4.11) 变量（数据类型）(4.3 4.4.1 4.4.2 4.4.3 4.4.4) 表达

13、式与操作符(4.4.8 4.4.9 4.4.10 4.4.13) 程序结构（语句：条件，循环等） (4.6) 函数（自定义,内置函数）（4.9） 对象（核心语言对象）(4.2 4.7 4.11 4.4.6 4.4.7 4.4.11 4.4.14 4.8 ) 如何将Javascript程序嵌入html文件中(4.3 4.1.4 4.1.5) 文档对象模型：如何改变html文档中的标记的内容和属性包括CSS属性(4.5 第五章 第六章),第二节 JavaScript 语法基础,变 量 (4.3 4.4.1 4.4.2 4.4.3 4.4.4) 表达式与操作符 (4.4.8 4.4.9 4.4.10

14、 4.4.13) 语 句 (4.6) 函 数 ）（4.9）,变 量,变量名称(4.3) 首先在JavaScript中定义的变量名称不能和保留字冲突，保留字是JavaScript中已经使用的单词或者保留在以后的版本中可能使用的单词。 变量名必须以字母或者 (_)或$ 开始，不能以数字或者其他非字母字符作为变量名的开始字符。接下来的字符可以是字母、下划线(_)、$ ，数字。 变量名中不能包含空格 JavaScript是区分大小写的 建议：多个单词组合在一起作为一个变量的名称，一方面可以使变量的定义显得更加清晰，而另外一方面也可以避免变量与保留字的冲突问题。,合法的变量 vs.无效的变量名称,合法的

15、变量名称示例： _pagecount Part9 Number_Items 一些无效的变量名称： 99Balloons / 以数字开头。 Smith theMessage = youre the most freckly person.; theMessage = “D:bookfiles;,数值类型,在JavaScript中，数值类型即可以代表整数又可以代表浮点型格式（包含小数点或指数)，例如，123 ， 1.414，7.2e-2 7E4，0 xff。 例如，我们可以将1.414赋给变量theNumber，其语句如下所示： theNumber = 1.414;,布尔类型,布尔类型用于逻辑运算

16、中，在布尔类型的变量里，只有两种取值情况，一种是真(true)，另外一种是假(false)。一般情况下，布尔类型的变量用于逻辑判断中，例如，对于35的逻辑表达式，我们知道它的结果为假，我们也可以将它赋给一个变量，那么这个变量的值就是false。 例如，我们可以把35的逻辑运算结果赋给变量theBoolean，其语句如下所示： theBoolean = (35);,空类型,空类型只有一个取值，就是null。如果当布尔值使用，是false,如果作为数字使用，它相当于0. 例如，我们可以把null赋给变量theNull，其语句如下所示： theNull = null; 注意： 一定不要把空类型和数值

17、类型中的0混淆起来，null意味着什么都没有，而0代表的是一个数值。但当强制转化到数值用时就是0。 未定义类型也只有一个取值，就是undefined 如果一个变量不存在或者声明了一个变量没有赋值，就是undefined。如果当布尔值使用，是false,如果作为数字使用，它相当于NaN.,对象类型,JavaScript是一种基于对象的语言，在以后两章中将要讨论window对象、表单对象等对象，这些都是对象类型的数据。,变 量,变量的定义/声明方式 （4.4.4） JavaScript是使用关键字var来定义变量的。虽然，JavaScript并没有强制要求必须先定义变量才能使用变量，但先定义变量再

18、使用它是一种良好的编程风格。 例：,1.变量的定义和初始化工作分开完成。 var myBook; ;/显式 (myBook的值是undefined) yourBook = 5;/隐式（没有使用var语句） 将5存储到名称为 myBook的单元中 2.变量的定义和初始化工作在一条语句中完成。 var myBook = 5; /将5存储到名称为myBook的单元中 例子： var yourBook=“Javascript”; var yourBook= true;,表达式与操作符 （4.4.5）,表达式将变量、常量(常量就是直接的字符串类型、数值类型等数据类型的数据，例如“hello”、3)和操作

19、符结合起来，可以运算产生一定运算结果，表达式运算后产生的结果可以是数值类型、字符串类型和布尔类型的数据。 JavaScript有两种类型的表达式： 赋值表达式：是把数据赋给变量的一种表达式。 例如，myBook = 3；/将3赋给变量myBook，同时，这个表达式本 身也有一个运算结果，那就是3。 运算表达式，运算表达式只运算产生一个运算结果而不进行赋值操作的表达式 例如，1+2；/一个运算表达式，在这个表达式运算产生的结果是3，但这个表达式并没有把运算结果赋给变量。,操作符,在表达式运算的过程中，表达式中操作一个或者两个数据产生运算结果的符号称作操作符，被操作符操作的数据称作操作数。在Jav

20、aScript中会使用到各种操作符 比较操作符 逻辑操作符 运算操作符 位操作符 赋值操作符 其他操作符,比较操作符 (4.6.1控制表达式),比较操作符将操作数进行比较，然后返回一个逻辑值，表明这个比较操作的结果是否为真，比较操作符的操作数可以是数值类型或者字符串类型的数据。比较操作符共有6种 : =(等于操作符) !=(不等操作符) (大于操作符) =(大于等于操作符) =(小于等于操作符) =(严格等于) !=(严格不等于),字符串比较,在比较字符串的过程中，JavaScript把字符串中的每个字母转换成相应的ASCII码值，然后从第一个字符开始比较两个字符串中相应的字符，比较它们的AS

21、CII码值。 例： hello=Hello“/返回结果为false，h的ASCII码值为104，H的ASCII码值为72 helloHello和hello=Hello，返回结果都为true came=come“/返回结果为false.第一个字符，都是c，第二个字符a的ASCII码值为97，o的ASCII码值为111 在比较字符串中，使用得最多的一种情况是判断某个字符串类型的变量是否为空串。 theMessage=“”; /如果theMessage为空串，则表达式为true，否则为false。,逻辑操作符 （4.6.1控制表达式）,逻辑操作符可以将布尔类型的表达式组合起来，完成逻辑运算操作，然后

22、返回逻辑运算的结果真或假，这样就可以完成比较复杂的逻辑判断工作。逻辑操作符共有3种： var theTo = 10; var doWhat = Count from ; doWhat = doWhat + theFrom + to + theTo + .; 执行该代码后，doWhat 变量的值为 Count from 1 to 10. 其中的数字数据被强制为字符串格式。 例： var nowThat = 0; var nowThen = 0; nowThat += 1 + “10”; / 在本例中，由于 “10” 是一个字符串，nowWhat 变 /量的值为 0110 nowThen += 1

23、 + parseInt(“10”); / 在本例中 “+=” 执行加法, nowThen 变 /量值为整数 11 但7 * “3” 例外, 7*”august” (NaN) var n=null; var m=n+10; /m为10 null为0 var u; var v=u+0; /u为undefined;v 为NaN,关系操作符导致强制/隐形转换(4.6.1),在比较表达式中，会将两个操作数转换成相同的类型(操作符不是=或 !=) “3” =3 ；/true 将字符串数值转换成数值 (35) = 0;/true 将布尔值转换成为数值。true为1，false为0 在逻辑表达式中，也会出现强

24、制转换（隐式） 字符串-布尔 var newString = “123”; var newBool=“34” /false,显示转换（4.4.10）,一般情况,数值 类型易于被强制转换(隐式)成字符串,但字符串不能直接强制转换包含到数值中。为此提供了显式的转换函数 parseInt() 和 parseFloat(),或通过Number对象的构造函数。 var a = parseInt(“123”); var f = parseFloat(“123.4”); var number =Number(aString); 数值也可通过toString()方法或通过String的构造函数转换成字符串 v

25、ar num = 6; var str_value = num.toString();/str_value为“6” var str_value = num.toString(2);/str_value为“110” var str_value = String(Value);,位操作符,位操作符在运算时先将操作数转化为32位的二进制数，然后对每个操作数分别按位进行运算，运算后再将二进制的结果按照标准JavaScript数值类型返回运算结果。操作符共有以下7种 ： else status=fail;,switch语句（1）,运用switch语句可以计算一个表达式，并根据表达式的计算结果分别执行相应

26、的代码块，它的一般表达形式如下所示： switch (表达式) case 标签1: 代码块1; break; case 标签2: 代码块2; break; default: 缺省代码块; ,switch语句在计算出表达式的运算结果后，将结果分别和标签1、标签2匹配。如果运算结果和标签x符合，那么就执行代码块x，如果和所有的标签都不符合，则执行缺省代码块。 在运用switch语句时，需要注意break语句，在每个代码块后面都应该有一个break语句。如果在代码块x后面没有break语句，那么，如果表达式的计算结果和标签x符合的话，在执行完代码块x后会继续执行代码块x+1，虽然表达式的计算结果和标

27、签x+1并不符合，程序会一直执行其后的各代码块直到遇到一个break语句或者switch语句结束。,switch语句（2）,运用ifelse判定学生成绩等级。 if (score=90) degree=A; else if (score=80) degree=B; else if (score=70) degree=C; else if (score=60) degree=D; else degree=F;,运用switch语句判定学生成绩等级。 switch (Math.floor(score/10) case 10: case 9: degree=A; break; case 8: deg

28、ree=B; break; case 7: degree=C; break; case 6: degree=D; break; default: degree=F; ,循环语句,使用循环语句可以反复执行某个代码块，直到满足循环结束条件后才停止。在JavaScript中有3种循环语句： for语句 while语句 dowhile语句。,for语句,for语句的一般表达形式如下所示： for (初始表达式;循环条件;递增表达式) 代码块 在执行for语句有以下几个步骤： (1) 执行初始表达式，在一般情况下，初始表达式完成的功能是在循环中对循环计数器赋初值； (2) 判断循环条件，如果循环条件为真

29、，则执行循环中的语句，如果循环条件为假，则跳出循环； (3) 执行循环代码，然后再执行递增表达式，一般情况下在递增表达式中对循环计数器进行处理，最后再返回步骤2执行。,for (var j=0;j=9;j+) window.document.writeln(hello);,while语句,while语句的一般表达形式如下所示： while (循环条件) 代码块 在while语句的执行过程中，有以下几个步骤： (1) 判断循环条件是否为真，如果循环条件为真，则执行循环，如果为假，则跳出循环； (2) 执行循环中的代码块，然后返回步骤1。 注意：在代码块中一定要能够改变循环条件中的变量，否则，很有

30、可能会陷入死循环而不能终止。,var j=0; while (j=9) window.document.write(hello); j+; ,dowhile语句,dowhile语句的一般表达形式如下所示： do 代码块 while (循环条件) 执行dowhile语句有以下几个步骤： (1) 执行循环中的代码块； (2) 判断循环条件是否为真，如果循环条件为真，则返回步骤(1)，继续执行循环，如果循环条件为假，则跳出循环。 注意：dowhile语句和for语句、while语句最大的不同之处在于，dowhile语句在执行完一次循环中的代码块后然后再判断循环条件。和while语句一样,代码块中一定

31、要能够改变循环条件中的变量,var j=0; do window.document.write(hello); while (j=9),其他语句,在JavaScript中，另外还提供了一些语句，可以完成枚举集合中元素、指定缺省对象、语句注释以及函数返回等功能。 forin语句 with语句 注释 return语句,forin语句,forin语句的一般表达形式如下所示： for (变量 in 对象) 代码块 JavaScript是一种基于对象的语言，forin是循环语句在对象上的一种应用方式。在这个语句中，变量将会列举对象的每一个属性. 在这个循环中，i将列举document对象的每一个属性，然

32、后使用window.document.write()方法在页面上显示出来。,for (var i in document) window.document.write (i+); ,with语句,with语句的一般表达形式如下所示： with (对象) 代码块 with语句用于声明代码块的缺省对象，代码块可以直接使用with语句声明的对象的属性和方法，而不必写出这个属性和方法的完整引用。 如果在代码块中有许多语句需要使用同一个对象的属性和方法，使用with语句后，只需要写一次这个对象的完整引用，然后可以在代码块中直接调用对象的属性和方法，这样能够极大地减少代码编写的工作量。,with(wind

33、ow.document) write(hello); ,注释,注释在程序执行的时候没有任何作用，但是可以用于对程序进行解释，增强程序的可读性。作为良好的编程风格，应该养成书写注释的良好习惯。注释有两种表达方式： 通过双斜线注释一行，这样在双斜线后的字符将成为注释而不被执行，例如，可以进行如下所示的注释： j=0; /j is initialized here 通过符号/*和*/来规定注释语句，这种注释方式可以进行多行注释，符号/*和*/之间的内容就是注释语句，例如，可以进行如下所示的多行注释： /*multiple-line comment*/,return语句,return语句用于函数中，在

34、函数结束前，可以通过return语句，将函数处理的结果返回给调用函数的语句。,函 数 （4.9）,在JavaScript中，函数是一种能够完成某种功能的代码块，函数可以在脚本中被事件处理或被其他语句调用。 当脚本中的代码长度很长时，就应该根据功能的不同将代码块写入一个或几个函数中。通过函数的运用，能够使得脚本更加具有可读性，也便于脚本的编写与调试。 如果在脚本中有多处具有相同的代码块，也可以将这些代码块写为一个函数，然后在脚本中调用这个函数，从而提高代码的重用性，简化代码的编写工作。,函数的定义,函数定义的一般方式： function 函数名称(参数列表) 代码块 /由两部分组成 函数的定义组

35、成第1部分： 函数标题：保留字function，函数名称和一对括号，及括号里的参数列表。 函数名称：调用函数时通过函数名进行调用。对于函数的命名，一般应该使用能够描述函数功能的单词进行描述 参数列表。参数列表是可选的，在必要的时候，可以使用参数列表，向函数传递一些参数，使得在函数中可以使用这些参数。,function theMaxNumber(number1,number2) if (number1number2) return number1; else return number2; function fun() var newString = “This surely is fun!”;

36、 document.write(newString ); ,函数的定义(续),function 函数名称(参数列表) 代码块 函数的定义组成的第2部分： 函数主体：一组复合语句。函数主体的代码包含在一对大括号中，通过代码块的执行完成函数的功能，如果需要返回一个值给调用函数的语句，应该在代码块中使用return语句。否则函数的返回值为undefined. 函数是可以嵌套的，即在一个函数中还可以调用其他函数。,function theMaxNumber(number1,number2) if (number1number2) return number1; else return number2;

37、 function fun() var newString = “This surely is fun!”; document.write(newString ); ,函数的调用（4.9.1）,JavaScript中定义了函数后并不会立即执行，只有在该函数被调用的时候才执行。 参数的传递 在函数定义中，theMaxNumber(number1,number2)，number1和number2都是函数的形式参数。因为它们只是一种形式而已， 他们所指代的实际值在函数被调用的时候才会赋给number1和number2 函数值的返回 有return语句的：var result = theMaxNumb

38、er(1,2)； 无return语句的：var result= fun()；/函数如无return语句，返回值 /为undefined。所以result的 /值是undefined； 对于没有返回值的函数调用时，就需要一个单独的语句。如： fun(); 注意区别: result= fun();和ref_fun=fun; ref_fun是一个函数对象， fun();/a call to fun ref_fun();/also a call to fun,局部变量 ，全局变量（4.9.2）,变量的作用范围就是能够访问该变量的语句范围，当javascript脚本嵌入到HTML文档中时，所谓变量的范围指的是文档的那些行中可以访问该变量。 全局变量： 对整个HTML文档都是可访问的，如在函数之外的显示声明的变量，或所有隐式声明的变量 局部变量：仅在函数主体中才可以被访问与使用 function theMaxNumber(number1,number2) /number1,number2也