javaScript编程.ppt

1、JavaScript编程,主讲人：孟褔奎,JavaScript面向对象编程,JavaScript函数,JavaScript语法,JavaScript简介,JavaScript编程,JavaScript处理JSON数据,JavaScritp简介,一、JavaScript的起源 1995年NetScape（网景浏览器）中出现，前身叫作LiveScript，NetScape公司与Sun公司联手开发，为了利用 Java这个时髦记汇，将其更名为JavaScript。 JavaScript和Java根本就是两种语言！ 微软为了进军浏览器市场，开发了一个JavaScript的克隆版，叫JScript。 19

2、97年，JavaScript作为一个草案提交给ECMA（欧洲计算机制造商协会），定义了ECMAScript.,二、JavaScript的特点 1、脚本编写语言 它是一种脚本语言，采用小程序段的方式进行编程。它 的基本结构形式像java、C#，但它不像java、C#必须先编 译，而网页在浏览器中运行时逐行被“翻译”，它与HTML标 签结合在一起。 2、跨平台性 JavaScript是依赖于浏览器本身，与操作系统无关。 3、基于对象 它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言，它本身提供了非常丰富的内部对象供 设计人员使用。,JavaScritp简

3、介,4、用于客户端 事先在网页中编写好代码，此代码随HTML文件一起发 送到客户端的浏览器上，由浏览器对这些代码进行解释执 行，这样就减轻了服务器的负担。 三、JavaScript的作用 1. 校验用户输入内容； 2. 动态显示网页内容； 3. 为静态网页增加一些特效 4. AJAX程序的核心技术之一 如果你有一些编程经验，会觉得JavaScript比较熟悉，即 使没有任何编程经验，也没什么问题，网上有很多 JavaScript特效，你可以直接Copy进网页使用。,JavaScritp简介,四、JavaScript组成,JavaScritp简介,ECMAScript：不与任何具体浏览器相绑定，

4、只描述以下内容：语法、类型、语句、关键字、保留字、运算符、对象。 DOM：文档对象模型，是HTML和XML的应用程序接口（API），DOM把整个页面规划成由节点层级构成的文档。,JavaScritp简介, Sample Page Hello World! ,DOM通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用DOM API可以轻松地删除、添加和替换节点。,BOM：浏览器对象模型，可以对浏览器窗口进行访问和操作，由于没有相关的BOM标准，每种浏览器都有自己的BOM实现。 主要实现： 弹出新的窗口； 移动、关闭浏览器窗口以及调整大小； 提供用户屏幕分辨详细信息的屏幕对象

5、.,JavaScritp简介,JavaScript语法,JavaScript变量定义 JavaScript数据类型 JavaScript运算符 JavaScript语句,JavaScript变量定义,一、变量的命名： 不能使用数字开头 不能用.符号 大小写区分 不能使用保留字,JavaScript变量定义,二、变量的声明： 声明一个变量用var a1 声明多个变量用var a1,a2 声明的同时还可以赋值var a1=100; 直接也可以赋值a1=100; 如该变量不存在返回一个undefined,JavaScript语法(数据类型),Javascript 有三种主要数据类型、两种复合数据类型

6、和两种特殊数据类型。 主要（基本）数据类型是： （1）字符串 （2）数值 （3）布尔 复合（引用）数据类型是： （1）对象 （2）数组 特殊数据类型是： （1）Null （2）Undefined,字符串数据类型,一个字符串值是排在一起的一串零或零以上的 Unicode 字符（字母、数字和标点符号）。字符串数据类型用来表示 JavaScript 中的文本。脚本中可以包含字符串文字，这些字符串文字放在一对匹配的的单引号或双引号中。字符串中可以包含双引号，该双引号两边需加单引号，也可以包含单引号，该单引号两边需加双引号。下面是字符串的示例： Happy am I; from care Im free

7、!“ Avast, ye lubbers! roared the technician. 42“ c 注意: JavaScript中没有表示单个字符的类型。要表示 JavaScript 中的单个字符， 应创建一个只包含一个字符的字符串。包含零个字符（“”）的字符串是空 （零长度）字符串。,数值数据类型,在 JavaScript 中整数和浮点值没有差别； JavaScript 数值可以是其中任意一种（ JavaScript 内部将所有的数值表示为浮点值）。 1.整型值 整型值可以是正整数，负整数和 0。可以用 10 进制，8 进制和 16 进制来表示。在 Jscript 中大多数字是用十进制表示

8、的。加前缀“0”表示 8 进制的整型值，只能包含 0 到 7 的数字。前缀为“0”同时包含数字“8”或“9”的数被解释为十进制数。 加前缀“0 x”（零和x|X）表示 16 进制整型值。可以包含数字 0 到 9，以及字母 A 到 F（大写或小写）。使用字母 A 到 F 表示十进制 10 到 15 的单个数字。就是说 0 xF 与 15 相等，同时 0 x10 等于 16。 八进制和十六进制数可以为负，但不能有小数位，同时不能以科学计数法（指数）表示。,2.浮点值 浮点值为带小数部分的数。也可以用科学计数法来表示。这就是说，大写或小写“e”用来表示 10 的次方。Jscript用数值表示的八字节

9、 IEEE754 浮点标准。这意味着数字最大可以到 1.7976931348623157x10308，最小到 5x10-324。以“0”开始且包含小数点的数字被解释为小数浮点数。 注意以“0 x”或“00”开始并包含小数点的数将发生错误。以下是 Javascript 中数字的例子。,另外，Javascript 包含特殊值数字。它们是： NaN （不是数）。当对不适当的数据进行数学运算时使用，例如字符串或未定义值。 正无穷大。在 Javascript 中如果一个正数太大的话使用它来表示。 负无穷大。在 Javascript 中如果一个负数太大的话使用它来表示。 正 0 和负 0。Javascri

10、pt 区分正 0 和负 0。,Boolean 数据类型,只有两个值 true和false Boolean 值在结构控制中尤其有用。可以将直接创建 Boolean 值的比较与用使用该 Boolean 值的语句相组合 可以使用任意表达式作比较表达式。任何值为 0、null、未定义或空字符串的表达式被解释为 false。其他任意值的表达式解释为 true。例如，可以使用如下表达式： if (x = y + z) / 这可能不是想要的结果 如下！ 注意上面的代码并不检查 x 是否与 y+z 相等，因为仅使用了一个等号（赋值）。相反的，上面的代码将 y+z 赋给变量 x，然后检查整个表达式的值是否为零。

11、要检查 x 是否与 y+z 相等，使用如下代码。 if (x = y + z) / 这与上面的代码不同！ 有关比较的详细信息，请参见控制程序的流程。,Null 数据类型,在 Javascript 中数据类型 null 只有一个值：null。关键字 null 不能用作函数或变量的名称。 包含 null 的变量包含“无值”或“无对象”。换句话说，该变量没有保存有效的数、字符串、Boolean、数组或对象。可以通过给一个变量赋 null 值来清除变量的内容。 注意:在 Javascript 中，null 与 0 不相等（与在 C 和 C+ 中不同）。 同时应该指出的是，Jscript中 typeof

12、 运算符将报告 null 值为 Object 类型，而非类型 null。这点潜在的混淆是为了向下兼容。,Undefined 数据类型,如下情况使返回 undefined 值： 对象属性不存在， 声明了变量但从未赋值。 注意不能通过与 undefined 做比较来测试一个变量是否存在，虽然可以检查它的类型是否为“undefined”。在以下的代码范例中，假设程序员想测试是否已经声明变量 x ： / 这种方法不起作用 if (x = undefined) / 作某些操作 / 这个方法同样不起作用- 必须检查 / 字符串 undefined“ if (typeof(x) = undefined) /

13、 作某些操作 / 这个方法有效 if (typeof(x) = undefined) / 作某些操作 考虑将 undefined 值与null做比较。 someOp = null; 如下情况时，比较的结果为 true， 如果属性 someOp 包含 null 值， 如果属性 someOp 不存在。 要检查一个对象属性是否存在，可以使用新的 in 运算符： if (prop in someObject) / someObject 有属性 prop,typeof运算符运算符,对变量或值调用typeof运算符将返回下列的值之一： “undefin

14、ed” 变量是undefined类型的 “boolean” 变量是boolean类型的 “number” 变量是number型的 “string” 变量是string型的 “object” 变量是一种引用类型或null类型 例： var i=2; alert(typeof(i); /得到number类型,javaScript语句,一判断语句： if (condition) . , if (condition) .else . , if (condition) . else if (condition) . else .,二循环语句: while (condition) . , do . whi

15、le (condition) , for (initialization; expression; post-loop-expression) statement; for (var key in obj) . 三with 语句用于设置代码在特定对象中的作用域。,注意：with 语句是运行缓慢的代码块，尤其是在已设置了属性值时。 大多数情况下，如果可能，最好避免使用它。,function 函数名（形参列表） 执行语句 return 返回值；/可选的语句 ,命名函数的创建和调用,函数也是一种数据类型，是function类型。所以只要使用function关键字标识一个函数名，就可以在大括号内编写代

16、码，并且可以被调用、作为其他函数的参数或者作为对象的属性值,var n0 = factorial$(0); var n10 = factorial$(10); var n20 = factorial$(20); alert(0的阶乘为: + n0 + n10的阶乘为: + n10 + n20的阶乘为: + n20);,调用函数,function factorial$(n) var out=1; if (n = 0) return out; for (var i = 1; i = n; i+) out *= i; return out; ,创建计算阶乘的函数,JavaScript函数,函数的参数

17、和返回值 参数名可以重复，但通过此参数名获取的值为实际传递参数的最后一个，如果实际传递参数值的个数小于重名参数的个数，那么通过此参数名获取的值为undefined 即使声明了形参，调用时也可以不传递参数 不管形参有几个，传递实参可以和形参个数不同 在函数被调用时，会创建一个arguments对象，负责管理参数 参数和返回值都可以是任何类型，包括function类型 函数可以不需要return语句来返回值，即使没有return语句，函数也会返回值，这种情况下返回值是undefined,function fnArgs() var result = ; for (var i = 0; i argum

18、ents.length; i+) result += argumentsi + ,; result = result.substring(0, result.length - 1); return result; function fnReturn() function fnArgsIterate() return a + b; var a=5,a=6,b=7; alert(为fnArgs()传递的实参是： + fnArgs(3, shanghai, 3.14) + n函数fnReturn()返回值是： + fnReturn() + n为fnArgsInterate()传递了重复参数，结果是:

19、 + fnArgsIterate(a, a, b);,JavaScript函数,内部函数和匿名函数,在一个函数内部，可以把另一个函数作为数据使用，这就形成了内部函数,var fn = function() return a+b; var a = 10, b = 20; document.writeln(fn(a, b)+);,创建匿名函数,var func = function() return function() document.writeln(函数返回值是一个内部函数); func()(); (function() document.writeln(创建即运行); )();,创建内部函

20、数,调用内部函数,JavaScript函数,JavaScript面向对象编程,对象 类的模拟,对象是无序属性的集合，属性可以是任何类型的值，包括其他的对象或函数，当函数作为属性值时称作“方法”，即对象的行为,常用对象的内部属性,对象,对象,对象的创建、访问和释放,创建对象,var 对象名=new 构造函数(),对象,常用内置对象,Global对象 Global对象没有construct属性，所以无法使用new操作符构造 没有call属性，所以无法像函数一样调用 Global对象只是一个概念，表示全局对象，依据宿主不同而不同。例如在浏览器中，window就是Global对象,var lan =

21、zh; var money = 3000; function getLan() var money = 5000; var g = this = window; /this指向window /lan是window的属性，money是window的money属性，值为3000 document.writeln(g + n + this.lan + n+this.parseFloat(this.money); /getLan()是window的属性 window.getLan();,所有的变量和函数都是Global对象的属性，如果有同名，则后定义的覆盖先定义,想想看：this.money的值是30

22、00还是5000？,对象,常用内置对象,Object对象： Object对象是所有对象的基础，任何其他对象都是从Object对象原型扩展而来 如果为Object对象使用原型扩展了属性，则所有对象都具有此属性,Ototype.money = 3000; document.writeln(添加了原型属性money，值为： + Object.money); Object.money=5000; document.writeln(生成了对象属性money，值为： + Object.money); var s = new String(); / String也因为Object原型扩展而

23、拥有了money属性 document.writeln(String对象继承了money属性，值为： + s.money);,想想看：s.money的值是3000还是5000？,对象,常用内置对象,Function对象：当使用function关键字定义了一个函数时，在系统内部实际上时创建了一个Function对象，因为函数也是对象,函数的调用,函数名()； apply(this，函数参数数组); call(this,函数参数列表);,var s= new String(); s.money = 1000;/money是String对象的属性 var money = 2000;/money是wi

24、ndow对象的属性 var func1 = new Function(a, b, document.writeln(a+b);document.writeln(this.money+);); var func2 = function(a, b) document.writeln(a + b); document.writeln(this.money+); /因为没有传递对象引用，所以func1()函数中的this指向window func1(10, 20); /传递了对象s,所以func1中的this指向s func1.apply(s, 10, 20); /传递的空引用，所以func2中的th

25、is指向了window func2.call(null, 10, 20);,使用new关键字调用构造函数创建函数对象,this指向因调用方式不同而不同,对象,常用内置对象,Error对象：可以在发生错误时作为参数传递给catch子句，也可以使用new关键字构造自定义的Error对象,try var myerr=new Error(“自定义错误”);/自定义错误对象 throw myerr;/抛出自定义的错误对象 catch(e) alert(e.message);/message属性是Error对象最主要的属性 ,类的模拟,实体类,实体类是自定义类型，需要定义后才可以使用它创建对象。在Java

26、Script中没有class，但可以通过用function关键字和this关键字类定义类模板,function 类名(参数1，参数2参数n) this.属性名=参数1; this.属性名=参数2; this.属性名=参数n; ,function Teacher(n, s, a) /绑定属性 = n; this.sex = s; this.age = a; /绑定行为 Ttotype.getDetails=function() document.writeln(教员的姓名： + + 教员的性别: + this.sex + 教员的年龄:

27、+ this.age); /创建对象 var tea = new Teacher(Mary, 女, 25); /调用方法 tea.getDetails();,function Teacher(n, s, a) /绑定属性 = n; this.sex = s; this.age = a; /判断行为是否已经定义过 if (Ttotype.getDetails = undefined) /绑定行为 Ttotype.getDetails = function() document.writeln(教员的姓名： + + 教

28、员的性别: + this.sex + 教员的年龄: + this.age); ,直接将行为的绑定放在类定义的括号内,类的模拟,类的继承,通过原型扩展的方式实现继承,function Person() = Jack; Ptotype.speak = function() document.writeln(Person类的原型扩展的方法speak被继承); Ptotype.eat = function() document.writeln(Person类的原型扩展的方法eat被继承); function Student() Student.p

29、rototype.study = function() document.writeln(Student类自己的方法); /实现继承 Stotype = new Person(); /测试继承 var stu = new Student(); /继承的方法 stu.speak(); stu.eat(); /自己的方法 stu.study();,JSON是什么？,JSON即javascript对象标记，是一种轻量级的数据交换格式,JSON的优势： 同XML或HTML相比，JSON 更简单灵活 JSON是基于纯文本的数据格式，便于在网络上传入和解析 JSON的数据格式简单，但却

30、可以传输任何类型的数据 JSON是JavaScript原生格式，在JavaScript中处理JSON数据不需要任何 特殊的 API 或工具包, 订单编号:OD-00001, 订单日期:2010-1-23, 订货人:Tom, 订单详细:商品编号:SP-20100123, 数量:5, 单价:120, 总价:600, 商品编号:SP-20100124, 数量:50, 单价:100, 总价:5000 ,JSON数据格式：可以是任何类型的数据，包括JavaScript对象和数组,JavaScript处理JSON格式数据,JavaScript访问JSON数据直接可以通过“.”运算符访问JSON数据的属性，

31、也可以直接使用“=”为属性赋值,function handleJSON() var user = name: Michael, address: city: Beijing, street: Chaoyang Road , postcode: 100025 ; document.write(= + ); document.write(user.address.city= + user.address.city); function showJSON() var user =username: Tom, age: 20,info: tel: 123456, cellphone: 98765 , address: city: beijing, postcode: 222333 , city: newyork, postcode: 555666 with (document) writeln(user.usern