JavaScript程序设计提高篇.ppt

JavaScript程序设计,提高篇,CompanyLogo,JavaScript概述,JavaScript是一种客户端语言，主要应用于Web浏览器。其主要的功能是做客户端的数据有效性验证，以及与服务器、其他浏览器窗口进行交互。同时，可以使页面动态化。,CompanyLogo,JavaScript概述,JavaScript组成核心ECMAScript（语法和基本对象）描述了：语法、类型、语句、关键字、保留字、运算符、对象文档对象模型DOM（处理页面内容的方法和接口）即标准HTML语言，以节点为主要思想，用于规划页面结构，如：SamplePage浏览器对象模型BOM（与浏览器进行交互的方法和接口）通常指对浏览器特定的JavaScript扩展，包括Ajax、弹出新的窗口、移动和关闭浏览器窗口、对cookie的支持等等,CompanyLogo,课程安排,CompanyLogo,Ajax简要介绍,Ajax含义Ajax不是一种技术，而是一种方法，其结合了JavaScript、XML、CSS等技术，可以让开发人员构建基于Java技术的Web应用。简单说就是开发人员的一种创新的程序设计思路。使用Ajax可以实现异步通讯。使用AJAX的异步模式，浏览器就不必等用户请求操作，也不必更新整个窗口就可以显示新获取的数据Ajax可以传输两种信息，一种是字符串、一种是XML格式的文本数据,CompanyLogo,Ajax简要介绍,Ajax实例JS前台代码：functioncommit(url,param)if(window.XMLHttpRequest)req=newXMLHttpRequest();elseif(window.ActiveXObject)req=newActiveXObject(Microsoft.XMLHTTP);if(req)req.open(post,url,true);req.onreadystatechange=completed;req.send(param);,url：与后台交互的请求路径param：传给后台的参数,CompanyLogo,Ajax简要介绍,Ajax实例JS前台代码：functioncompleted()if(req.readyState=4)if(req.status=200)vartextString=unescape(req.responseText);functionelsealert(系统异常！);return;,req.responseText：获取返回的文本，固定格式,CompanyLogo,Ajax简要介绍,Ajax实例Java后台代码publicStringgetCookiePwd()throwsExceptiongetResponse().setContentType(text/xml;charset=UTF-8);getResponse().setHeader(Cache-Control,no-cache);Stringname=getRequest().getParameter(uName);PrintWriterout=getResponse().getWriter();out.write(“success”);out.close();returnnull;,CompanyLogo,Ajax简要介绍,Ajax注意事项由于ajax是异步调用的故其函数实现的功能是独立的，不能在一个函数中实现ajax和此外的一些功能。如：functionexample()commit(url,param);alert();该例子中，即使commit方法没有运行完毕，一样会往下运行alert方法，因此，我们只能将其放在ajax返回函数中进行调用alert使用实例请参考commonObject.js,CompanyLogo,课程安排,CompanyLogo,JavaScript对象编程法,面向对象的编程模式和java一样，JavaScript也是面向对象的编程语言，在编写公共js方法时，对于实现某一模块的代码、或对某一类标签的各种通用使用方法，我们都可以用对象的方式进行独立的管理，从而使代码得以简化，提高可读性和可维护性。编程模式：工厂方式、构造函数方式、原型方式、混合的构造函数/原型方式、动态原型方式、混合工厂方式,CompanyLogo,JavaScript对象编程法,工厂方式functioncreateChar(col,doors)varobj=newObject();obj.color=col;obj.doors=doors;obj.showColor=function()alert(this.color);returnobj;调用方式varoCar=newcreateChar(“red”,4);oCar.showColor();-red,CompanyLogo,JavaScript对象编程法,工厂方式的局限性每调用一次createChar()函数时，都会创建一个对象，并创建对象自己的showColor方法，而实际上该方法是所有对象都共享的一个函数。针对这种现象，我们可以采取在外部创建一个函数的方式进行解决，如functioncreateChar(col,doors)varobj=newObject();obj.showColor=showColor;returnobj;functionshowColor()alert(this.color);但这样就不像是对象的方法了，而成了直接的对外部函数的引用。,CompanyLogo,JavaScript对象编程法,构造函数方式functioncreateChar(col,doors)this.color=col;this.doors=doors;this.showColor=function()alert(this.color);returnobj;调用方式varoCar=newcreateChar(“red”,4);oCar.showColor();-red和工厂方式的差别在于函数使用了this，不需要创建一个Object对象，但局限性和工厂方式一样,CompanyLogo,JavaScript对象编程法,原型方式functionCar()Ctotype.color=“red”;Ctotype.doors=4;Ctotype.dirver=newArray(1,2)Ctotype.showColor=function()alert(this.color);调用方式varoCar=newCar();oCar.showColor();-red,CompanyLogo,JavaScript对象编程法,原型方式的局限性首先，该构造函数没有参数，不能通过给构造函数传递参数初始化属性的值，但可以通过调用对象下的一个函数进行带参数，并初始化，如totype.init=function(col,doors)this.color=col;this.doors=doors;调用方式varoCar=newCar();oCar.init(“yellow”,5)oCar.showColor();-yellow,CompanyLogo,JavaScript对象编程法,原型方式的局限性其次，可以正确实现函数共享，但对象是不应该被共享，在次模式下也被共享了，如（还是前面的例子）当我们进行以下调用时：varoCar1=newCar();varoCar2=newCar();oCar1.driver.push(3);alert(oCar1);-1,2,3alert(oCar2);-1,2,3只是在oCar1中进行的对数组driver添加数据3的操作，但在对象oCar2中也看到了一样的结果，原因是driver属性是一个引用，而非函数或值,CompanyLogo,JavaScript对象编程法,混合的构造函数/原型方式鉴于构造函数和原型方式的局限性，我们可以混合使用此两种方式，从而各取所长，如functioncar(col,doors)this.color=col;this.doors=doors;this.driver=newArray(1,2);totype.showColor=function()returnthis.color;,CompanyLogo,JavaScript对象编程法,变量编程模式以上的几种面向对象的方式都有一个共同点，就是每个对象都是一个构造函数。个人总结后，还有一种变量方式，即把变量作为一个对象，在该对象里定义自己的属性和方法。varAjax=method:null,commit:function(url,param,onsuccess)this.mothod=onsuccess;,completed:function()调用方式：Amit(“url”,”param”,”onsuccess”),CompanyLogo,JavaScript对象编程法,将函数作为变量进行调用一般情况下，变量的值都是字符串、数字等具体类型的数值，但有时候我们希望变量中内容是具体实现功能的函数的调用，对此我们需要用到一个函数：eval(funStr)，如functionexample(color)alert(color);functionexec()varcolor=“red”;eval(“example(color)”);functionexec()varcolor=“red”;example(color);,CompanyLogo,课程安排,CompanyLogo,HTML自定义标签,什么是HTML自定义标签自定义标签是可重用的组件代码，并且允许开发人员为复杂的操作提供逻辑名称。简单的说，就是开发人员利用标准标签通过一定的语法规则封装而成的组件。自定义标签的最终形式还是标准的HTML标签，只不过由开发人员分离出一个中间层，该层用于解析自定义标签组件。自定义标签封装好后，开发人员只要编写上一层的简单的代码，即可得到下一层编译过后的复杂的代码。该过程就像是计算机不能直接运行C语言，而需要将其转换成机器语言才能被运行一样，我们编写的C语言的代码，而解析后的是机器码。,CompanyLogo,HTML自定义标签,HTML自定义标签的要素标签（Tag）标签是一种XML元素，通过标签可以使JSP网页变得简洁并且易于维护，还可以方便地实现同一个JSP文件支持多种语言版本，其大小写敏感。在使用自定义标签时，需要在jsp页面进行以下声明：其中：uri包含了一个字符串，容器用它来定位TLD文件。在TLD文件中可以找到标签库中所有标签处理类的名称。Prefix定义了该标签的引用名称，如标准的标签为，而自定义标签我们要写成,CompanyLogo,HTML自定义标签,HTML自定义标签的要素标签库（TagLibrary）由一系列功能相似、逻辑上互相联系的标签构成的集合称为标签库，就是标签对应的TLD文件。该文件我们一般放在/WebRoot/WEB-INF/tld目录下，当然也可以另外存放，但需要在web.xml文件中指向对于的目录即可1.01.1ltcmmainmenu,CompanyLogo,HTML自定义标签,HTML自定义标签的要素标签库（TagLibrary）com.taglib.MainMenuTagjspdatalisttrue.,CompanyLogo,HTML自定义标签,HTML自定义标签的要素标签库描述文件(TagLibraryDescriptor)标签库描述文件是一个XML文件，这个文件提供了标签库中类和JSP中对标签引用的映射关系。它是一个配置文件，和web.xml是类似的。实际上，我们都习惯于写在web.xml文件中，如,CompanyLogo,HTML自定义标签,HTML自定义标签的要素标签处理类(TagHandleClass)标签处理类是一个Java类，这个类继承了TagSupport或者扩展了SimpleTag接口，通过这个类可以实现自定义JSP标签的具体功能，即我们前面所说的解析自定义标签的功能自定义标签的处理流程jsp页面编写后台class类解析目标码写入jsp页面页面加载该过程实现了对于循环处理时，只需要解析一次代码的优化功能；在语法上，即使是被注释的自定义标签，也要保证代码的正确性，否则页面一样会报错,CompanyLogo,课程安排,CompanyLogo,学习与总结,学习资料要培养作为设计者的能力，任何代码都是最基础的层次，但我们可以进行个性化的利用，从而简化我们的编码以及维护工作关于Ajax、Javascript、CSS的学习可参考资料里对应的目录前台框架项目frameWeb里对应的js目录下有js的各种实例，css目录可用于css设计的一些实例,CompanyLogo,学习与总结,问题总结标签特别说明该标签在html中存在一个bug，即在页面上的显示始终位于最顶层，其他的标签无法将其覆盖（除了或标签）。因此设计弹出的界面为非窗口界面时，解决方法有：1.在弹出框中内嵌或标签2.js处理将弹出窗口下的标签进行隐藏关于标签隐藏的两个属性display：隐藏标签后，释放标签所占的页面空间visibility：隐藏标签后，不释放所占的页面空间关于标签的内容标签.innerHTML：输出的是含标签在内的所有内容，如abc，那么Object.innerHTML=abc标签.innerText：输出的是标签内的文本内容，如abc，那么Object.innerText=abc,CompanyL