JavaScript高级编程.ppt

第5章JavaScript高级编程,课程回顾,WebService具有以下优势：平台无关性编程语言无关性部署、升级和维护Web服务简单对于Web服务使用者来说，可以轻易实现多种数据、服务的聚合成本低数据不受防火墙阻挡.NET中创建的WebService都派生自System.Web.Services.WebService类Web服务方法都必须满足两个条件：由WebMethod特性标识、public访问修饰符简单对象访问协议（SOAP）是基于XML的轻量级协议，可以实现在Internet上任意位置调用已发布的WebServiceWSDL与SOAP和UDDI（统一描述、发现和集成机制）一起工作，支持Web服务与Internet上的其他服务、应用程序和设备交互作用。UDDI提供了发布和定位Web服务的功能，WSDL描述了Web服务，SOAP为Web服务提供了传输消息在.NET各种类型的应用程序中，都可以通过“添加Web引用”的方式创建客户端代理类来调用WebService，也可以通过动态生成客户端代理类来调用,本章内容,JavaScript变量作用域JavaScript函数JavaScript面向对象编程JavaScript闭包JavaScript处理JSON数据,本章目标,深入了解JavaScript的变量作用域能够使用JavaScript进行面向对象编程理解JavaScript中闭包的概念和作用理解JSON数据的格式及使用JavaScript处理JSON数据,1.JavaScript重点回顾,1.1数组,一个JavaScript数组的元素可以具有任意的数据类型，同一个数组的不同元素可以具有不同的类型，数组的元素设置可以包含其他数组,vara=北京,上海,true,1,20,深圳;with(document)writeln(遍历数组a的值是：);for(vari=0;ia.length;i+)writeln(a+i+=+ai);,使用创建数组,vara=newArray(北京,上海,true,1,20,深圳);with(document)writeln(遍历数组a的值是：);for(vari=0;ia.length;i+)writeln(a+i+=+ai);,使用new关键字创建数组对象Array(),数组,数组元素,数组的长度可以通过length属性获得，并且数组的长度是可变化的,vara=newArray();/起始长度为0varb=newArray(5,4,3,false,Tom,3.14);/长度为6varc=newArray(20);/长度为20/错误的数组定义，定义长度必须是整数；否则，至少要2个元素vard=newArray(3.14);vard=newArray(tom,3.14);/合法,长度为2a3=Test;/a的长度自动变为4,数组的元素可以是任何类型数据,数组的长度可以变化,数组,访问数组元素,访问数组的元素使用运算符，可以通过下标访问，也可以通过关键字访问,vara=newArray(jack,true,one:one,two:two,three:three);varb=newArray(5,4,3,false,Tom,3.14);a1.23=test;with(document)writeln(a1.23=+a1.23);writeln(a.length=+a.length);writeln(a2.one=+a2.one);writeln(a2two=+a2two);btrue=true;with(document)writeln(b.length=+b.length);writeln(btrue=+btrue);writeln(b6=+b6);/索引溢出，但不会出错，值是undefinedfor(iinb)document.writeln(b+i+=+bi);,为数组a添加了一个元素,访问第3个元素（对象）的属性,forin遍历数组元素,1.1数组,多维数组,数组元素可以是任何类型的数据（包括另一个数组），可以非常方便地模拟多维数组,varone=newArray(3);for(vari=0;ione.length;i+)onei=newArray(4);for(varj=0;jonei.length;j+)oneij=(i+1)*(j+1);,arrayA=21,22,23,31,32,33,34;for(vari=0;iarrayA+i+j+=+arrayAij);,使用newArray()创建多维数组,使用创建多维数组,1.1数组,数组排序,使用Array对象的sort()方法，该方法允许传递一个排序函数作为参数。如果不传递参数，则按照ASCII字符顺序升序排列,vara=newArray(10,215,324,3,1254,300);functionsortFunction(one,two)returnone-two;a.sort();for(iina)document.writeln(ai);document.writeln();a.sort(sortFunction);for(iina)document.writeln(ai);,作为sort()方法的参数传递的函数,无参数，按ASCII字符顺序升序排列,传递参数，按参数指定的排序规则排序,function函数名（形参列表）执行语句return返回值；/可选的语句,1.2函数,命名函数的创建和调用,函数也是一种数据类型，是function类型。所以只要使用function关键字标识一个函数名，就可以在大括号内编写代码，并且可以被调用、作为其他函数的参数或者作为对象的属性值,varn0=factorial$(0);varn10=factorial$(10);varn20=factorial$(20);alert(0的阶乘为:+n0+n10的阶乘为:+n10+n20的阶乘为:+n20);,调用函数,functionfactorial$(n)varout=1;if(n=0)returnout;for(vari=1;i=n;i+)out*=i;returnout;,创建计算阶乘的函数,函数,函数的参数和返回值参数名可以重复，但通过此参数名获取的值为实际传递参数的最后一个，如果实际传递参数值的个数小于重名参数的个数，那么通过此参数名获取的值为undefined即使声明了形参，调用时也可以不传递参数不管形参有几个，传递实参可以和形参个数不同在函数被调用时，会创建一个arguments对象，负责管理参数参数和返回值都可以是任何类型，包括function类型函数可以不需要return语句来返回值，即使没有return语句，函数也会返回值，这种情况下返回值是undefined,functionfnArgs()varresult=;for(vari=0;iarguments.length;i+)result+=argumentsi+,;result=result.substring(0,result.length-1);returnresult;functionfnReturn()functionfnArgsIterate()returna+b;vara=5,a=6,b=7;alert(为fnArgs()传递的实参是：+fnArgs(3,shanghai,3.14)+n函数fnReturn()返回值是：+fnReturn()+n为fnArgsInterate()传递了重复参数，结果是:+fnArgsIterate(a,a,b);,函数,内部函数和匿名函数,在一个函数内部，可以把另一个函数作为数据使用，这就形成了内部函数,varfn=function()returna+b;vara=10,b=20;document.writeln(fn(a,b)+);,创建匿名函数,varfunc=function()returnfunction()document.writeln(函数返回值是一个内部函数);func()();(function()document.writeln(创建即运行);)();,创建内部函数,调用内部函数,小结1,创建数组的方式有哪几种？如何创建多维数组？如何访问数组元素？如何对数组排序,2.JavaScript面向对象编程,2.1对象,对象是无序属性的集合，属性可以是任何类型的值，包括其他的对象或函数，当函数作为属性值时称作“方法”，即对象的行为,常用对象的内部属性,对象,对象的创建、访问和释放,创建对象,var对象名=new构造函数(),对象,常用内置对象,Global对象Global对象没有construct属性，所以无法使用new操作符构造没有call属性，所以无法像函数一样调用Global对象只是一个概念，表示全局对象，依据宿主不同而不同。例如在浏览器中，window就是Global对象,varlan=zh;varmoney=3000;functiongetLan()varmoney=5000;varg=this=window;/this指向window/lan是window的属性，money是window的money属性，值为3000document.writeln(g+n+this.lan+n+this.parseFloat(this.money);/getLan()是window的属性window.getLan();,所有的变量和函数都是Global对象的属性，如果有同名，则后定义的覆盖先定义,想想看：this.money的值是3000还是5000？,对象,常用内置对象,Object对象：Object对象是所有对象的基础，任何其他对象都是从Object对象原型扩展而来如果为Object对象使用原型扩展了属性，则所有对象都具有此属性,Ototype.money=3000;document.writeln(添加了原型属性money，值为：+Object.money);Object.money=5000;document.writeln(生成了对象属性money，值为：+Object.money);vars=newString();/String也因为Object原型扩展而拥有了money属性document.writeln(String对象继承了money属性，值为：+s.money);,想想看：s.money的值是3000还是5000？,对象,常用内置对象,Function对象：当使用function关键字定义了一个函数时，在系统内部实际上时创建了一个Function对象，因为函数也是对象,函数的调用,函数名()；apply(this，函数参数数组);call(this,函数参数列表);,vars=newString();s.money=1000;/money是String对象的属性varmoney=2000;/money是window对象的属性varfunc1=newFunction(a,b,document.writeln(a+b);document.writeln(this.money+););varfunc2=function(a,b)document.writeln(a+b);document.writeln(this.money+);/因为没有传递对象引用，所以func1()函数中的this指向windowfunc1(10,20);/传递了对象s,所以func1中的this指向sfunc1.apply(s,10,20);/传递的空引用，所以func2中的this指向了windowfunc2.call(null,10,20);,使用new关键字调用构造函数创建函数对象,this指向因调用方式不同而不同,对象,常用内置对象,Error对象：可以在发生错误时作为参数传递给catch子句，也可以使用new关键字构造自定义的Error对象,tryvarmyerr=newError(“自定义错误”);/自定义错误对象throwmyerr;/抛出自定义的错误对象catch(e)alert(e.message);/message属性是Error对象最主要的属性,2.2类的模拟,实体类,实体类是自定义类型，需要定义后才可以使用它创建对象。在JavaScript中没有class，但可以通过用function关键字和this关键字类定义类模板,function类名(参数1，参数2参数n)this.属性名=参数1;this.属性名=参数2;this.属性名=参数n;,functionTeacher(n,s,a)/绑定属性=n;this.sex=s;this.age=a;/绑定行为Ttotype.getDetails=function()document.writeln(教员的姓名：++教员的性别:+this.sex+教员的年龄:+this.age);/创建对象vartea=newTeacher(Mary,女,25);/调用方法tea.getDetails();,functionTeacher(n,s,a)/绑定属性=n;this.sex=s;this.age=a;/判断行为是否已经定义过if(Ttotype.getDetails=undefined)/绑定行为Ttotype.getDetails=function()document.writeln(教员的姓名：++教员的性别:+this.sex+教员的年龄:+this.age);,直接将行为的绑定放在类定义的括号内,类的模拟,类的继承,通过原型扩展的方式实现继承,functionPerson()=Jack;Ptotype.speak=function()document.writeln(Person类的原型扩展的方法speak被继承);Ptotype.eat=function()document.writeln(Person类的原型扩展的方法eat被继承);functionStudent()Stotype.study=function()document.writeln(Student类自己的方法);/实现继承Stotype=newPerson();/测试继承varstu=newStudent();/继承的方法stu.speak();stu.eat();/自己的方法stu.study();,小结2,Global对象与浏览器的window对象由什么关系？apply()与call()方法有什么区别？如何实现类的继承？,3.JavaScript闭包,3.1什么是JavaScript闭包,“闭包”是指一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分,在函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层函数体中的临时变量（闭包是一种间接保持变量值的机制）。当一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包,functionfuncTest()vartmpNum=100;/私有变量/在函数funcTest内定义另外的函数作为funcTest的方法函数functioninnerFuncTest()alert(tmpNum);/引用外层函数funcTest的临时变量tmpNumreturninnerFuncTest;/返回内部函数/调用函数varmyFuncTest=funcTest();myFuncTest();/弹出100/下面的调用将失败innerFuncTest();,什么是JavaScript闭包,变量作用域,内部函数也可以有自己的变量和函数，但其作用域只能是内部函数体内,functionfuncTest()vartmpNum=100;/私有变量/在函数funcTest内定义另外的函数作为funcTest的方法函数functioninnerFuncTest()varinnerVar=0;alert(innerVar+);alert(tmpNum+);/引用外层函数funcTest的临时变量tmpNumreturninnerFuncTest;/返回内部函数varmyFuncTest=funcTest();myFuncTest();/弹出0后再弹出100,innerVar的作用域仅限于函数innerFuncTest()内,什么是JavaScript闭包,变量作用域,内部函数可以引用全局变量或函数以及外部函数定义的变量或函数,varglobalVar=0;functionfuncTest()vartmpNum=100;/私有变量functioninnerFuncTest()varinnerVar=0;alert(innerVar+);/引用内部函数变量alert(tmpNum+);/引用外层函数funcTest的临时变量tmpNumalert(+globalVar);/引用全局变量returninnerFuncTest;/返回内部函数varmyFuncTest=funcTest();myFuncTest();/弹出0、100和1,什么是JavaScript闭包,变量作用域,如果内部函数引用了位于外部函数中的变量，相当于授权该变量能够被延迟使用。因此，当外部函数调用完成后，这些变量的内存不会释放，因为闭包还引用这它们,在JavaScript中，如果一个对象不再被引用，该对象将被GC回收。如果两个对象互相引用，而不再被第三者所引用，那么这两个互相引用的对象也会被回收,什么是JavaScript闭包,变量作用域,每次通过引用调用内部函数，内部函数内部的局部变量都会被重新创建,varglobalVar=0;functionfuncTest()vartmpNum=100;/私有变量/在函数funcTest内定义另外的函数作为funcTest的方法函数functioninnerFuncTest()varinnerVar=0;document.writeln(innerVar+,+tmpNum+,+globalVar+);returninnerFuncTest;/返回内部函数varfirst=funcTest();first();/显示0、100和1first();/显示0、101和2，注意：函数的局部变量tmpNum被保存下来，没有销毁varsecond=funcTest();second();/显示0、100和3second();/显示0、101和4,什么是JavaScript闭包,闭包的使用,利用闭包绑定参数为函数引用设置延时,functionclosureExample(msg)returnfunction()alert(msg);/使用闭包解决window.onload=function()varelement=document.getElementById(closuretest);if(element)vargood=closureExample(这个参数是由闭包绑定的);element.onclick=function()setTimeout(good,3000);/延迟3秒弹出提示,通过闭包为setTimeout传入参数,什么是JavaScript闭包,闭包的使用,通过对象实例方法关联函数,functionassociateObjWithEvent(obj,methodName)return(function()returnobjmethodName(this););functionHtmlEle(elementId)varel=document.getElementById(elementId);if(el)el.onclick=associateObjWithEvent(this,doOnClick);el.onmouseover=associateObjWithEvent(this,doMouseOver);el.onmouseout=associateObjWithEvent(this,doMouseOut);HtmlEtotype.doOnClick=function(element)alert(element);HtmlEtotype.doMouseOver=function(element)alert(鼠标移动到元素+element.id+上了);HtmlEtotype.doMouseOut=function(element)alert(鼠标移出了元素+element.id);vardiv=newHtmlEle(closuretest);/使用构造函数创建HtmlEle对象,内部函数将作为DOM元素的事件处理器，this指向obj，即传入的dom元素,为HtmlEle对象扩展3个属性，每个属性的值都是函数类型,3.2闭包之间的交互,当存在多个内部函数时，可能会出现意料之外的闭包。此时，假设多个内部函数（闭包）引用了同一个外部函数的变量，则内部函数共享同一个封闭环境。如果重新创建一个全局变量引用内部函数，则变量的值也重新初始化,functionouterFunc()varouterVar=0;functioninnerFunc1()document.writeln(+outerVar);functioninnerFunc2()outerVar+=5;document.writeln(,+outerVar+);/返回一个具有两个属性的对象returninnerFunc1:innerFunc1,innerFunc2:innerFunc2;varglobalVar=outerFunc();globalVar.innerFunc1();globalVar.innerFunc2();globalVar=outerFunc();globalVar.innerFunc1();globalVar.innerFunc2();,小结3,闭包是什么？举例说明闭包有哪些作用,4.JavaScript处理JSON格式数据,4.1JSON是什么？,JSON即javascript对象标记，是一种轻量级的数据交换格式,JSON的优势：同XML或HTML相比，JSON更简单灵活JSON是基于纯文本的数据格式，便于在网络上传入和解析JSON的数据格式简单，但却可以传输任何类型的数据JSON是JavaScript原生格式，在JavaScript中处理JSON数据不需要任何特殊的API或工具包,订单编号:OD-00001,订单日期:2010-1-23,订货人:Tom,订单详细:商品编号:SP-20100123,数量:5,单价:120,总价:600,商品编号:SP-20100124,数量:50,单价:100,总价:5000,JSON数据格式：可以是任何类型的数据，包括JavaScript对象和数组,4.2JavaScript处理JSON数据,JavaScript访问JSON数据直接可以通过“.”运算符访问JSON数据的属性，也可以直接使用“=”为属性赋值,functionhandleJSON()varuser=name:Michael,address:city:Beijing,street:ChaoyangRoad,postcode:100025;document.write(=+);document.write(user.address.city=+user.address.city);functionshowJSON()varuser=username:Tom,age:20,info:tel:123456,cellphone:98765,address:city:beijing,postcode:222333,city:newyork,postcode:555666with(document)writeln(user.username=+user.username);writeln(user.age=+user.age);writeln(.cellphone=+.cellphone);writeln(user.address0.city=+user.address0.city);/address是数组writeln(user.address0.postcode=+user.address0.postcode);user.username=Jack;document.writeln(user对象的usern