Javascript概述.ppt

《Javascript概述.ppt》由会员分享，可在线阅读，更多相关《Javascript概述.ppt（32页珍藏版）》请在三一办公上搜索。

1、Javascript概述,核心javaScript（简介）变量全局对象闭包客户端javaScriptDOM简介事件和事件处理,javaScript的兄弟姐妹,javaScript、Jscript、ActionScript都是ECMAScript的具体实现。许多程序，尤其是网页浏览器支持ECMAScript。浏览器中的ECMAScript实现添加了与DOM与BOM的接口，可以通过脚本改变网页的内容、结构和样式。,完整的javaScript组成,javaScript,DOM模型Document Object Model,BOM模型Browser Object Model,ECMAScript,ja

2、vaScript的变量,1、变量的声明js里的变量使用关键字var来声明。拓展：重复声明与遗漏声明如果没有var声明一个变量，系统会自动隐身声明它，此时，这个变会自动注册为全局对象（global）的一个属性，也就是说这个变量此时无论写在哪个作用域里，他会自动变成全局变量。如果重复使用var声明，那么之后的语句仅相当于一个赋值语句。,var x;var x=1;/x=1function()alert(x);/1,var x=1;function()var x=2;alert(x);/2,var x=1;function()alert(x);/undefinedvar x=2;,javaScrip

3、t的变量,2、变量的作用域（scope）一个变量的作用域是定义这个变量的区域，全局变量的作用域是全局性的；在函数里面用var定义的变量作用域在函数体内，也叫做局部变量。,function a()var z=3;,function b()var y=2;,function c()alert(z);,注意：js中没有块级作用域，在函数中声明的变量在整个函数中都是有定义的！,执行c();,z在b内吗？,z在c内吗？,z在a内吗？,在,在,在,找到值,找到值,找到值,不在,不在,不在,javaScript的变量,2.5作用域链scope chain每个JavaScript执行环境（Js解释器每次执行一

4、个function时，就会为该function创建一个新的执行环境。）都关联一个作用域链。作用域链是由一组对象组成的链表，Js代码需要查找变量x的值时，会首先从此链表的第一个对象查起，如果该对象含有名为x的属性，取用该属性值，如果没有，继续向下一个查找。,执行环境（运行期上下文）,scopechain,scopechain,0,1,2,3,全局对象,某对象,某对象,某对象,javaScript的变量,3、普通变量与作为对象属性的变量没错！他们的作用、用法是完全一样的！有没有什么根本的区别？所有全局变量都会被声明为全局对象的属性，而且，直接声明为全局对象的属性，也会成为全局变量，也就是说两者是等

5、价的。例1：var x=20;alert(window.x);/结果20例2：window.x=20;alert(x);/结果20,javaScript的全局对象,全局对象Global Object当JavaScript解释器启动时，首先执行的动作是创建一个全局对象（global object），这个对象的属性（property）就是程序的全局变量，解释程序会为该对象预定义一些属性（如Infinity、parseInt、等），用户则可通过定义变量来添加属性。在代码顶层，可以用this引用这个全局对象。var x=20;this.x;/20 window.x;/20对于客户端JavaScript

6、，展示在浏览器窗口中的Js代码的全局对象会用一个“窗口对象”（Window Object）来替代，并用window替代this来作对象引用。窗口对象中除了包含普通全局对象中的一些核心属性（parseInt，Math等），还另外定义了一些客户端特有的属性，如navigator和screen。,javaScript的变量,以上是全局变量，局部变量情况也类似。局部变量是存在于函数区域内的变量，当函数在使用时，局部变量会成为该函数所对应的活动对象的属性。,局部变量仍作为对象属性来使用,Js中的闭包closure,闭包，就是封闭了外部函数作用域中变量的内部函数。但是，如果外部函数不返回这个内部函数，闭包

7、的特性无法显现。如果外部函数返回这个内部函数，那么返回的内部函数就成了名副其实的闭包。,Js中的闭包closure,关于闭包，最简单的描述就是 ECMAScript 允许使用内部函数即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。也就是说，内部函数会在外部函数返回后被执行。而当这个内部函数执行时，它仍然必需访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函

8、数的影响。,Js中的闭包closure,作用：1、获得一个持续的局部变量；2、在面向对象编程方法中模拟私有属性；3、在函数外访问一个函数内的变量；,简单的闭包,function aaa(i)var i;return function()return+ivar x=aaa(3);x();/4x();/5x();/6,这个例子创建了持久的局部变量，类似的，可以创建持久的局部变量来当做全局变量使用。,Js中的闭包closure,function Car(color,price)var color;var price;returngetColor:function()return color,getP

9、rice:function()return price,setPrice:function(newPrice)price=newPricevar mycar=new Car(red,10000);mycar.getPrice();/10000mycar.setPrice(20000);mycar.getPrice();/20000;,如果不提供方法修改color与price的值，那么一个实例在创建之后属性就固定了，防止非法篡改。特别是私有的的量可以采用这种方式模拟。,Js中的闭包closure,function Car(color,price)var color;var price;this.

10、getColor=function()return color;var mycar=new Car(red,10000);mycar.getPrice();/10000mycar.setPrice(20000);mycar.getPrice();/20000;,如果不提供方法修改color与price的值，那么一个实例在创建之后属性就固定了，防止非法篡改。特别是私有的的量可以采用这种方式模拟。,标准文档对象模型W3C DOM,W3C：万维网联盟，是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。DOM:文档对象模型是一个与平台和语言无关的接口。将

11、允许程序和脚本动态访问和更新HTML、XML的内容，结构和风格。DOM先后经历了3个版本，分别是1998年10月发布DOM Level 1、2000年11月发布的DOM Level 2和2003年发布的DOM Level 3（3级DOM还没有被广泛支持）。,相对于W3C的1、2、3级 DOM标准，还有被人们称为遗留DOM的接口，他是浏览器混战时代的产物，几乎所有浏览器都支持该标准，他也被人们称之为“0级DOM”，不过它并不是一个正式标准。,0级DOM提供的文档属性与方法：方法：1、document.write()向文档里写东西2、document.writeln()同上3、document.o

12、pen()打开文档（是为了使用write方法向弹出的新窗口里写东西）4、document.close()正如上面写完东西后你必须把文档关掉，注意这里说的不是window.close()这是两回事属性：2、document.cookie 获得cookie3、document.domain 关于同源策略安全限制4、document.lastModified 一个字符串，包含文档的修改日期6、document.referrer 把浏览器带到当前页面的链接的URL7、document.title 文档的标题8、document.URL 文档的URL数组形式的属性：1、document.anchors

13、文档中锚的集合2、document.applets 文档中小应用程序的集合3、document.forms 文档中表单的集合4、document.images 文档中图片的集合5、document.links 文档中链接的集合 注意链接包括和,标准文档对象模型W3C DOM,DOM方法：document.createElement(tagName)document.createTextNode(文本)_dom.appendChild(子元素)_dom.getAttribute(属性名)_dom.setAttribute(属性名，属性值)_dom.inserBefore(新元素,子元素)_dom

14、.removeAttribute(属性名)_dom.removeChild_dom.replaceChild(新元素,子元素)_dom.hasChildNodes()childNodesfristChildlastChildnextSiblingpreviousSiblingnodeValueparentNodegetElementById(ID名)getElementsByTagName(TagName)getElementsByName(Name)hasChildNodes()getAttribute(属性名),事件和事件处理,1级DOM提供了文档映射功能，允许获取和操作文档的任意部分。2

15、级DOM提供了更加丰富的接口，通过对象接口增加了对鼠标和用户界面事件、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。,事件和事件处理,原始事件模型由0级DOM提供的API，在这种模型中，javascript代码不能直接操作事件，只能用HTML元素的属性设置事件处理代码。例如：,标准事件模型一种强大的具有完整特性的事件模型，2级DOM标准对它进行了标准化，除IE外的所有现代浏览器都支持它。,IE事件模型由IE4引入的一个事件处理机制，具有某些标准事件模型的特性，但是很多地方与标准模型不一致，所以js设计者必须为其编写特定的兼容性代码。,Js令人头疼的兼容性的根源！,标准事件模型,

16、1、事件传播第一阶段：捕捉阶段第二阶段：在目标第三阶段：冒泡阶段,在0级DOM中，浏览器把事件分派给发生事件的文档元素，如果那个文档元素有适合的事件句柄，就运行这个句柄。除此之外，不执行其他操作，而2级DOM中事件要复杂得多。当事件发生在文档元素上，目标的事件句柄被触发，此外，目标的每个祖先元素也有机会处理这个事件。,例1：2级DOM事件 之 捕捉阶段,例2：2级DOM事件 之 冒泡阶段,例3：2级DOM事件 之 所有阶段,标准事件模型,事件注册：addEventListener(eventType,handleFn,useCapture)方法例：判断鼠标按下的是哪一个按键var o=docu

17、ment.body;function eButton()alert(event.button)o.addEventListener(mousedown,eButton,false);handleFn会在事件发生时收到event对象作为其参数，这样就方便了我们在处理函数里对其加以利用。,标准事件模型,事件注册：addEventListener(eventType,handleFn,useCapture)方法在事件处理函数中，如果有this，则指向注册这个事件的那个对象（不等同于发生事件的那个对象）。要想调用发生事件的那个对象，需要使用event.target属性来引用。（由于标准中没有明确thi

18、s的指向，在事件处理函数中可以使用event.srcElement来引用正在这个事件的节点。）,标准事件模型,事件处理程序越来越多，越来越复杂，页面中随处可见的事件监听已经司空见惯，但这引出了一个性能的问题，事件监听得越多，页面运行性能就越差。主要原因来自两个方面：1.每添加一个事件监听，载入页面时都会增加一次对被监听节点的访问，这无疑增加了页面完全准备就绪所需的时间；2.每一个事件监听函数都会占用内存，而 JavaScript 并不具备分配内存的权利，有限的内存如果被事件监听函数占用得越多，页面性能下降得也越多。解决方法：减少事件监听器的使用，采用事件委托来获取事件目标。,例1：给每个行绑定

19、变色函数,例2：给表格绑定一个变色函数使用event.target访问目标元素,标准事件模型,事件注销：removeEventListener(eventType,handleFn,useCapture)方法例：注销了对象o的事件监听器var o=document.body;function eButton()alert(event.button)o.addEventListener(mousedown,eButton,false);o.removeEventListener(mousedown,eButton,false);,事件发生时可以得到什么,event对象在事件发生时产生，其带有很多

20、有用的属性。列举部分：type：时间类型；target：发生事件的节点；currentTarget：正在处理事件的节点；timeStamp：事件何时发生；clientX、clientY：事件发生时鼠标距客户区坐标；keyCode：按键事件发生时对应的键盘码值；detail：事件的额外信息，对于click事件，1代表单击，2代表双击，3代表点击三次；,IE事件模型,IE支持事件冒泡传播但是不支持捕捉形式的事件传播；IE的event对象不传递给事件处理函数，而是作为window对象的属性使用；IE的event对象的属性与标准模型有区别。,IE事件模型,IE中的事件注册：obj.attachEven

21、t(eventType,handleFn);如果需要停止事件起泡，在处理函数中需要设置event的cancelBubble为true。IE中的事件注销：obj.detachEvent(eventType,handleFn);,IE事件模型,在IE事件模型中，处理函数中的this指向的是window对象，与标准模型中this是指向注册这个事件的对象不同，所以，此处是js中涉及到IE兼容性的一大问题。,兼容的事件绑定,02functionbindEvent(elem,type,fn)03if(elem.attachEvent)04vartypeRef=_+type;05if(!elemtypeRe

22、f)06elemtypeRef=;0708for(variinelemtypeRef)09if(elemtypeRefi=fn)10return;111213elemtypeRef.push(fn);14elem“on”+type=function()15for(variinthistypeRef)16thistypeRefi.apply(this,arguments);171819else20elem.addEventListener(type,fn,false);2122,兼容的事件移除,25functionremoveEvent(elem,type,fn)26if(elem.detach

23、Event)27if(elem_+type)28for(variinelem_+type)29if(elem_+typei=fn)30elem_+type.splice(i,1);31break;32333435else36elem.removeEventListener(type,fn,false);3738,拖拽框的原理,相对X,相对Y,绑定一个mousedown事件，确定DIV处于被选中状态,绑定一个mousemove事件，在DIV被选中状态，使DIV跟随鼠标移动，即创建一个拖动处理函数来动态设置DIV的left与top属性。,绑定一个mouseup事件，当鼠标弹起时注销mousemove处理函数,声明两个全局变量DX、DY保存相对坐标X、Y,