javascript培训汇总

JS介绍与其框架比较主讲人：黄超日期：2013-05-10★js基本介绍★如何创建一个对象★js中的事件介绍★前端调试方法★js的常用框架比较★js网站和书籍介绍javascript的基本介绍一.脚本语言●.动态●.弱类型●.基于原型二.ECMAScript第一种：采用newObject（）方法scriptlanguage=javascripttype=text/javascript!–person=newObject()；person.name=“TimScarfe”；person.height=6Ftperson.run=function(){this.state=runningthis.speed=4ms^-1}//--/script第二种，json形式：scriptlanguage=javascripttype=text/javascript!--//ObjectLiteralstimObject={property1:Hello,property2:MmmMMm,property3:[mmm,2,3,6,kkk],method1:function(){alert(Methodhadbeencalled+this.property1)}};timObject.method1();alert(timObject.property3[2])//willyield3varcircle={x:0,y:0,radius:2}//anotherexamplevarrectangle={upperLeft:{x:2,y:2},lowerRight:{x:4,y:4}}alert(rectangle.upperLeft.x)//willyield2//--/scriptCopyright©2004ESRI.Allrightsreserved.第三种：采用构造器和prototype来构建对象scriptlanguage=javascripttype=text/javascript!–functioncat(name){this.name=name;this.talk=function(){alert(this.name+saymeeow!)}}cat1=newcat(felix);cat1.talk();//alertsfelixsaysmeeow!cat2=newcat(ginger);cat2.talk();//alertsgingersaysmeeow!//--/scriptscriptlanguage=javascripttype=text/javascript!–cat.prototype.changeName=function(name){this.name=name;}firstCat=newcat(pursur)firstCat.changeName(Bill)firstCat.talk()//alertsBillsaysmeeow!//--/script还可以用prototype来对javascript中已有的对象来进行扩展scriptlanguage=javascripttype=text/javascript!–functionsuperClass(){this.supertest=superTest;//attachmethodsuperTest}functionsubClass(){this.inheritFrom=superClass;this.inheritFrom();this.subtest=subTest;//attachmethodsubTest}functionsuperTest(){returnsuperTest;}functionsubTest(){returnsubTest;}varnewClass=newsubClass();alert(newClass.subtest());//yieldssubTestalert(newClass.supertest());//yieldssuperTest//--/script一般在js框架中，采用函数的apply/call方法来实现继承js中的事件介绍on系列：一般可以放到页面中去的事件，和html对象的属性来进行绑定；divid=“div”onclick=“clickme();”Js中添加：采用js来创建一个对象，然后给对象添加on系列事件，注意该对象在dom或ECMASCRIPT中必须有该事件名，否则报错如下：Vardivone=document.createElement(“div”);divone.onclick=function(evt){alert(e.clientX)};采用Dom中的对象函数来添加事件Exceptie:addEventListener(eventtype,listener,usecapture);div.addEventListener(“click”,function,true);Ie:attachEvent(eventtype,listener)div.attachEvent(“onclick”,function)前端调试方法1.采用alert（原始方法）2.采用editplus，ultraedit，dreamweaver，notepad++等3.采用主流浏览器ie8/9，FireBug，jseclipse，msjsdebuger等JS的常用框架与其之间比较一.定义二.好处1.函数2.扩展3.一部分实现面向对象1.简化开发进程2.跨浏览器3.丰富的UI4.封装ajax常用的框架如下：Dojo，JQuery，YUI，Prototype，Mootools，ExtJS，MochiKit，Kissy，ComoJS，JET，JavaScriptMVC，SproutCore等DOJO一.介绍1.面向对象2.core，Dijit，DojoX模块3.企业级二.优点1.背后强大的支持：IBM、Sun、BEA等2.扩展DHTML，图形图像支持。3.面向对象，结构规范，可扩展。三.缺点1.复杂，学习曲线陡2.文档不全3.API不稳定JQuery一.设计思想1.快速，简洁2.改变js编写方式二.优点1.代码量小，压缩后20k2.对selector和dom操作方便3.文档齐全，控件多三.缺点1.非面向对象2.扩展性不强Prototypeprototype是一个易于使用、面向对象JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程设计思想：面向对象优点：扩展了js，添加了一些有用的函数，兼容了各个浏览器。缺点：属于比较老的框架，能够使用的插件比较少Mootools一.设计思想1.简洁，模块化2.面向对象二.优点1.简洁，模块化2.面向对象3.代码量少，核心8k三.缺点在DOM和CSSSelector上不如jQuery强大EXTJS一.设计思想1.组件化2.推进RIA应用二.优点1.强大的性能优良的UI2.速度快，组件化3.文档完整三.缺点1.稍复杂2.体积大，压缩后500k3.重量级维基比较网址和书籍的介绍网址：1.开源软件网址2.脚本之家网址3.://书籍：1.深入浅出javascript.2.Javascript权威指南Thanks!人有了知识，就会具备各种分析能力，明辨是非的能力。所以我们要勤恳读书，广泛阅读，古人说“书中自有黄金屋。”通过阅读科技书籍，我们能丰富知识，培养逻辑思维能力；通过阅读文学作品，我们能提高文学鉴赏水平，培养文学情趣；通过阅读报刊，我们能增长见识，扩大自己的知识面。有许多书籍还能培养我们的道德情操，给我们巨大的精神力量，鼓舞我们前进。