Ajax 编程技术第二章 JavaScript 相关要点

Ajax编程技术第二章 JavaScript相关要点

2.1 JavaScript核心 • 编程要点 • JavaScript区分大小写； • 分号可选； • 让代码自动换行，一条语句中不能有硬回车； • 多添加注释。 2-2

2.1 JavaScript核心 • 原始数据类型 • 数值型； • 字符串型； • 布尔型； • 未定型：申明了一个变量而没赋值时，为未定型，它只有一个值：undefined; • Null型：没有申明的变量为Null型，它也只有一个值：null • 引用数据类型。 2-3

2.1 JavaScript核心 • 引用数据类型引用数据类型包含指向内存中存放数据的位置的引用，而不是直接指向数据本身。JavaScript中，Object类型，例如Array和Function，就是引用数据类型。如果对函数参数代以引用型物参，那么在函数内修改物参变量值，就会改变它所指向的原始数据。即使改变发生在函数内，数据也会在整个范围内发生变化。 Function myArray (a) { var a[0] =5; } Var nextArray = [1,2,3]; myArray(nextArray); Alert(“nextArray = “+ nextArray); 在调用myArray函数后， nextArray的值为： 5，2，3。 2-4

2.1 JavaScript核心 • 运算符注意两个比较运算符：===和!==。 • ===：等于且类型相同； • !==：不等于或类型不同。 2-5

2.2 面向对象的JavaScript • JavaScript有4种不同类型的对象： • 内置对象，如Date,Math； • 浏览器对象，如window,navigator,history； • 文档对象，如image,forms,links； • 用户自定义对象 2-6

2.2 面向对象的JavaScript • 内置对象通过使用 new 关键字和对象构造函数，来创建该对象的新实例： new myArray = new Array();// 创建了一个Array对象的新实例可以通过“.”来访问对象实例的任一属性和方法： myArray.reverse(); myArray.length; 2-7

2.2 面向对象的JavaScript • 浏览器对象浏览器对象(BOM)是一组用来与浏览器窗口进行交互的对象。包括： • window对象，BOM的顶层对象，用于移动窗口、调整窗口尺寸； • history对象，用于跟踪用户访问过的每个页面； • location对象，用于跳转至新页面； • navigator对象，包含浏览器名称、版本信息； • screen对象，提供显示特性； • document对象，它即属于浏览器对象模型，又属于文档对象模型。 2-8

2.2 面向对象的JavaScript • 用户自定义对象 • 构造函数 • 使用Object构造函数创建新的用户自定义对象： var member = new Object();// 定义一个新对象 • 然后为该对象添加属性： member.name = “zhangsan”; member.age = 19; • 为该对象添加方法： myObj.show=function() { document.wirte ( "I am "+myObj.name+ ”, My age is “+myObj.age); };//注意：本例中的函数是匿名的，且定义以分号结尾 • 调用此对象的方法的方法： member.show(); 2-9

2.2 面向对象的JavaScript 一般情况下，需要创建对象的多个实例，这样就可以拥有具有相同属性和方法、但属性取值不同的多个对象。可以这样创建： • 创建对象： function myObj(name,age) { this.name = name; //this 指针始终指向当前对象 this.age = age; this.show = function() { document.write(“I am “+name+”, my age is “+age} } • 创建对象的实例： var myObj1 = new myObj(“zhangsan”,19); var myObj2 = new myObj(“lisi”,20); • 为实例添加原始对象中没有的新属性： myObj2.sex = “male”; • 调用方法： myObj1.show(); myObj2.show(); alert(myObj2.sex); • 完整程序见下页 2-10

2.2 面向对象的JavaScript <html> <head> <script type="text/javascript"> function myObj(name,age) { this.name = name; this.age = age; this.show = function() { document.write("I am "+name+", my age is "+age+"<BR>"); } } </script> </head> <body> <script type="text/javascript"> var myObj1 = new myObj("zhangsan",19); var myObj2 = new myObj("lisi",20); myObj2.sex="male"; myObj1.show(); myObj2.show(); alert(myObj2.sex); </script> </body> </html> 2-11

2.2 面向对象的JavaScript • 原型 JavaScript中，每一个对象实例都基于原型（相当于C++中的类），每个对象实例都包括一个指向该原型属性和方法的prototype属性，可以用它为该类原型的所有对象实例来指定属性和方法。例如，程序创建了多个myObj对象的实例，并且在内存中创建、存储了多个show函数的副本。通过使用prototype 属性，并在构造函数定义外定义show函数，可以避免内存占用，但仍能使所有myObj对象的实例访问show函数。 • 销毁对象：对象是引用类型，会占用大量内存。如果用完对象，必须销毁，其方法就是将其值赋为null： myObj1 = null; 2-12

2.2 面向对象的JavaScript <html> <head> <script type="text/javascript"> function myObj(name) { this.name = name; this.age ; } myObj.prototype.show = function() { document.write("I am "+name+", my age is "+age+"<BR>"); } ; //用prototype属性为原型创建所有该类实例都能访问的方法 myObj.prototype.age=20; //用prototype属性为原型指定默认值 </script> </head> <body> <script type="text/javascript"> var myObj1 = new myObj("zhangsan"); var myObj2 = new myObj("lisi“); myObj2.age=30; // 改变某个实例的属性，默认值 myObj1.show(); myObj2.show(); myObj1 = null; //销毁对象 myObj2 = null; //销毁对象 </script> </body> </html> 2-13

2.3 JavaScript对象的操作 JavaScript提供了几个用于操作对象的语句和关键字及运算符： • For…in语句 • 基本格式：For（对象属性名称 in 已知对象名称）它通过将一个已知对象的所有属性反复置给一个变量而不是使用计数器来实现循环：Function showPro(object) { for (var i=0;i<30;i++) document.write(object[i]); } Function showPro2(object) { for (var pro in object) document.write(object[pro]); } 函数showPro2使For...in语句根本不需要知道对象属性的个数，在循环体中，For自动地将属性取出来，直到最后为止。 2-14

2.3 JavaScript对象的操作 • with语句 • 基本格式：with (object) { …… } 所有在with语句后花括号中的语句，都是在后面object对象作用域中的。下面的代码段显示两种访问HTML表单的元素的方法，一种是普通的方法，另外一种是使用with语句的方法： 2-15

2.3 JavaScript对象的操作 方法一：frames[1].document.forms[0].address.value 方法二：with (frames[1].document.forms[0]) { address.value = ""; name.value = ""; } 这种方式用在需要频繁或者批量访问一个对象的属性或者方法的地方。通过with语句暂时修改作用域链，执行完毕后再把作用域链恢复到初始状态。 2-16

2.3 JavaScript对象的操作 • this关键字 this是对当前的引用，在JavaScript中由于对象的引用是多层次、多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己也不知道现在引用的是哪一个对象，为此JavaScript提供了一个用于将对象指定当前对象的语句this。 2-17

2.4 文档对象模型 • 什么是DOM：DOM,Document Object Model是一种树型结构，它根据XML，HTML/XHTML的W3C规范创建。DOM提供一套表示文档结构的对象，以及访问这些对象的方法。 • DOM分类：分为三部分 • 核心DOM，包括XML、HTML共有的对象； • XML DOM，包括XML对象； • HTML DOM，包括XML对象。 2-18

2.4 文档对象模型 页面中所有对象都与顶级对象document有关。通过它，可以使用JavaScript访问HTML文档中的任一对象，并修改其属性。 2-19

2.4 文档对象模型 • 文档的家谱树结构 html head body title p ul li li 2-20

2.4 文档对象模型 • 文档的节点树结构除了可以从家谱树的角度分析文档外，还可以用节点树来分析。从节点树的角度来看，文档是节点的集合，节点是文档树的分支和叶子。 • 节点分类：文档节点可以分为三大类： • 元素节点； • 文本节点； • 属性节点。 2-21

2.4 文档对象模型 • 例如： <p class=“f1”>Welcom you.</p> p ←元素节点 class=“f1” Welcom you. 属性节点↑ 文本节点↑ 2-22

2.4 文档对象模型 • 用于访问对象的DOM方法 • getElementById：如果元素中有一个id，那么访问它的最简单的方法就是用此方法： <p id = “myPara”>Hi, world!</p> … var x=document.getElementById(“myPara”) 现在可以用x 便捷地访问id值为myPara的元素。例如：改变此元素的某些属性： x.style.fontWeight=“bold”; //将此元素中的文本用粗体显示； 2-23

2.4 文档对象模型 例：若有一页面有如下的代码： <head id=“e11”> … <body id=“e12”> … • 若要访问它们的父节点html元素，可以使用下面任意一行代码： document.getElementById(“e11”).parentNode; document.getElementById(“e12”).parentNode; • 若要访问body元素的所有子元素，可以使用以下代码： document.getElementById(“e12”).childNodes; • 子元素有多个，包含在一个数组中，可通过数组索引来访问每个子元素： document.getElementById(“e12”).childNodes[0]; // 访问第一个body的子元素 • 也可以用下面语句访问第一个子元素： document.getElementById(“e12”).firstChild; // 访问第一个body的子元素 • 访问body的兄弟节点(head节点)： document.getElementById(“e12”).previousSibling; //body元素的前趋兄弟是head元素 document.getElementById(“e11”).nextSibling; //head元素的后继兄弟是body元素 2-24

2.4 文档对象模型 • getElementsByTagName：使用tag名而不是id名访问元素。例如： <p>Hi, world!</p> <p>How are you?</p> 则可以这样访问它们： var y = document.getElementsByTagName(“p”); for (i=0;i<y.lemgth;i++) { y[i].style.color=“green”; } 如果只想改变第一个段落，则可这样使用： var z = document.getElementsByTagName(‘p’)[0]; 2-25

2.4 文档对象模型 • 创建节点 • 创建一个新段落，可以使用以下代码： var newNode = document.createElement(‘p’); • 添加新文本节点到段落中： var newText = document.createTextNode(‘这里是添加的新文本’); newNode.appendChild(newText); 2-26

2.4 文档对象模型 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Adding New Elements</title> <style type="text/css"> body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; font-weight: bold; } .newDiv { background-color:#ffcccc;} </style> <script type="text/javascript"> function newOne() { var newEl = document.createElement('p'); var newTx = document.createTextNode('This is the new paragraph.'); newEl.appendChild(newTx); var newPara =document.getElementById('newText'); newPara.appendChild(newEl); } function newColor() { document.getElementById('newText').style.color="red"; } </script> </head> <body> <p>这是本页第一段</p> <div class="newDiv" id="newText"></div> <p>这是本页第二原始段</p> <form> <input type="button" value="Add a new paragraph" onclick="newOne()" /><br /><br /> <input type="button" value="Make it red" onclick="newColor()" /> </form> </body> </html> 2-27

2.4 文档对象模型 • 另一种方案innerHTML 所有HTML元素都有innerHTML属性，该属性可以取代DOM方法来更改元素的内容。在Ajax应用中，它经常被用在回调函数中。通过innerHTML属性，可以用字符串替换任一HTML元素中的内容，该字符串可以包括HTML元素，这样不使用DOM方法也可以创建新元素。 2-28

2.4 文档对象模型 • 在上一示例中我们将使用DOM方法的函数变成使用innerHTML，代码更加简化，运行速度更快： function newOne() { var newEl = document.createElement('p'); var newTx = document.createTextNode('This is the new paragraph.'); newEl.appendChild(newTx); var newPara =document.getElementById('newText'); newPara.appendChild(newEl); } function newOne() { var newPara = document.getElementById('newText'); newPara.innerHTML = “<p>This is the new paragraph.</p>”; } 2-29

2.4 文档对象模型 问题在于，innerHTML还不是W3C标准。但目前大多数浏览器还是支持它。如firefox2, IE6/7, Opera9. 2-30

2.5 JavaScript和事件 浏览器事件是加载页面后运行JavaScript程序的关键。一旦浏览器窗口加载完Web页面后，所有JavaScript代码就已经被读取和执行。要在JavaScript和HTML之间交互，只能靠触发事件达到。 • HTML事件：如onclick, onblur, onload等，就是一种将事件与事件处理的JavaScript程序绑定的方法。例如，下面代码设定，当单击按钮时，将调用JavaScript的myResponse函数： <input type=“button” value=“click me” onclick=“myResponse”> 2-31

2.5 JavaScript和事件 • 事件模型处理事件流的技术主要有两种模型： • 事件冒泡(event bubbling)技术：事件从最具体(most-specific)的目标到最不具体(least-specific)的目标依次触发； • 事件捕获(event capturing)技术：事件从最不具体的目标到最具体的目标依次触发。 <div><p>Event oeder</p> </div> 上面的HTML代码中，P元素嵌套在div元素中，假设这两个元素都有onmouseover的事件处理程序，如果用户鼠标划国该元素，则在事件捕获技术中先触发父元素div的mouseover；而在事件冒泡技术中，先触发子元素p的mouseover。 • IE使用事件冒泡技术；W3C DOM既使用事件捕获又使用事件冒泡技术。 2-32

2.5 JavaScript和事件 • 事件注册程序 • 内联事件注册在JavaScript中使用事件的第一步是注册事件处理程序，以便浏览器在触发事件时能够运行相应的脚本程序。注册事件处理程序的常见方法是使用HTML属性进行内联事件注册(inine event registration)： <a href=“myPage.html” onclick=“startNow()”> 2-33

2.5 JavaScript和事件 • Web页面的层关系 2-34

2.5 JavaScript和事件 • 直接事件注册使用事件属性和函数名，直接将事件处理程序注册到元素中： var myElement = document.getElementById(‘1stpara’); myPara.onclick = startNow; //注意，这里函数startNow没有括号 • 事件注消 myElement.onclick = null; 这些方法跨浏览器兼容，但只允许为同一元素上的一个事件注册一个程序。要想注册多个程序，IE和W3C的方法各不相同。 2-35

2.5 JavaScript和事件 • IE事件注册模型 • 注册事件处理程序： var myElement = document.getElementById(‘1stpara’); myElement. attachEvent(‘onclick’,startNow); myElement.attachEvent(‘onclick’,startNow2); //注册另一个事件 • 注销注册事件程序： myElement.detachEvent(‘onclick’,startNow); myElement. detachEvent(‘onclick’,startNow2); attachEvent attachEvent detachEvent detachEvent 2-36

2.5 JavaScript和事件 • W3C DOM事件注册模型：该方法使用3个参数，事件名称、函数名称和一个布尔值。如果事件注册是在事件捕获阶段使用，则布尔值设为true，如果事件注册是在事件冒泡阶段使用，则布尔值塞为false。 • 注册： var myElement = document.getElementById(‘1stpara’); myElement.addEventListener(‘click’,startNow,false); myElement.addEventListener(‘click’,startNow2,false); //添加另一个事件注册在传统的事件注册中，事件注册被添加在事件的冒泡阶段 • 注销： myElement.removeEventListener(‘click’,startNow,false); 2-37

2.5 JavaScript和事件 • 事件对象事件对象用来访问事件，以便我们获得有关其属性信息。例如，用户按了哪个键。事件对象在事件发生时创建。事件对象有两种模型： • 事件对象模型 • IE模型：事件对象是window对象的属性(window.event)，window.event属性中包含了最后一个发生的事件。 var myEl=document.getElementById(‘1stpara’); myEl.onclick=startNow; function startNow(){ //window.event gives access to the event; } • W3C DOM模型：事件作为参数传递给事件处理函数： var myEl=document.getElementById(‘1stpara’); myEl.onclick=startNow; function startNow(e){ // e gives access to the event; } 2-38

2.5 JavaScript和事件 • 若使用两者都兼容的方法访问事件，可以这样处理： var myEl=document.getElementById(‘1stpara’); myEl.onclick=startNow; Function startNow(e){ if (!e) { var e = window.event; } // do something } 2-39

2.5 JavaScript和事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Event Registration</title> <script type="text/javascript"> function addHandler () { var addH = document.getElementById('p1'); if (addH.addEventListener) { addH.addEventListener('click', addBord, false); } // W3C DOM注册事件处理程序 else if (addH.attachEvent) { addH.attachEvent('onclick', addBord); } // IE注册事件处理程序 } function detHandler () { var detH = document.getElementById('p1'); detH.style.border = ''; detH.style.backgroundColor = '#ffffff'; if (detH.removeEventListener) { detH.removeEventListener('click', addBord, false); } // W3C DOM注销事件处理程序 else if (detH.detachEvent) { detH.detachEvent('onclick', addBord); } // IE注销事件处理程序 } function addBord () { var add = document.getElementById('p1'); add.style.border = '1px dotted #ff0000'; add.style.backgroundColor = '#ffff99'; } </script> </head> <body onload="addHandler()"> <p id='p1'>点击我，产生边框 </p> <p>一些其他信息</p> <form> <input type='button' value='取消边框' onclick='detHandler()'> </form> </body> </html> 2-40

图1 图2 图3 2.5 JavaScript和事件 • 运行时，用鼠标点击图1中“点击我，产生边框”这几个字，则页面变成图2的样式； • 点击“取消边框”按钮后，再用鼠标点击“点击我，产生边框”这几个字，则页面中边框消失，如图3 2-41

2.5 JavaScript和事件 • JavaScript与Ajax之间的相互联系 JavaScript是Ajax技术中最重要的一部分之一。Ajax利用Javascript的特性实现Web应用程序对用户行为触发的实时响应和处理，包括鼠标事件、键盘事件、页面载入离开或者事件、焦点事件等等。 Javascript将HTML与DOM、XMLHttpRequest等对象联系起来，作为他们之间沟通的渠道。 2-42

2.5 JavaScript和事件 HTML控件具有响应用户行为的事件属性，其中常用的事件包括： • onactivate：当控件对象为活动元素时触发。 • onblur：当控件对象失去焦点时触发。 • onchange：当控件对象或者选中区的值发生改变时触发。 • onclick：当用户用鼠标左键单击控件对象时触发。 • ondbclick：当用户双击控件对象时触发。 • ondeactivate：活动元素从当前控件对象变为父文档或者其他控件对象时触发。 • ondrag：当进行拖曳操作时在源控件对象上持续触发。 • ondragend：用户在拖曳操作结束后释放鼠标时在源控件对象上触发。 • ondragenter：用户拖曳对象到一个合法目标时在目标元素上触发。 • ondragleave：用户鼠标移出合法拖曳目标时在目标控件对象上触发。 • ondragover：拖曳鼠标划过目标时持续在目标元素上触发。 • ondragstart：开始拖曳选中对象时在源控件对象上触发。 • onfocus：当控件对象获得焦点时触发。 2-43

2.5 JavaScript和事件 • onkeydown：当用户按下键盘按键时触发。 • onkeypress：当用户按下字面按键时触发。 • onkeyup：当用户释放键盘按键时触发。 • onmousedown：当用户用任何鼠标按钮单击对象时触发。 • onmouseenter：当用户将鼠标指针移动到控件对象内时触发。 • onmouseleave：当用户将鼠标指针移出控件对象边界时触发。 • onmousemove：当用户将鼠标划过控件对象时触发。 • onmouseout：当用户将鼠标指针移出控件对象边界时触发。 • ommouseover：当用户将鼠标指针移动到控件对象内时触发。 • onmouseup：当用户在鼠标位于控件对象之上时释放鼠标按钮时触发。 • onresize：当控件对象的大小要改变时触发。 • onselect：当当前选中区改变时触发。 • onload：当文档载入的时候触发。 • onunload：当文档卸载的时候触发。 2-44

2.5 JavaScript和事件 Javascript在响应上述事件的函数中，提取表单Form的内容，调用XMLHttpRequest对象，将表单内容发送给服务器处理。有时候，在发送表单内容之前，要对表单内容的格式进行必要的校验和预处理，这些工作也交由Javascript处理。服务器返回浏览器客户端的处理数据，通常由XMLHttpReqeust对象取得。XMLHttpReqeust对象再将这些数据以普通文本或者XML文档的形式交给DOM对象。Javascript最终再操作DOM，利用这些数据更新Web页面内容。总之，Javascript在Ajax中起到了“承前启后”的作用，通过其特有的属性、方法、集合操纵HTML文档内容，使用DOM、XMLHttpReqeust对象相关属性和方法，与服务器实现异步交互通信。其在Ajax中的作用如下页图所示。 2-45

2.5 JavaScript和事件 2-46

2.5 JavaScript和事件 • outerHTML与outerText之间的区别: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>ajax</title> <script language="javascript"> function lzy(tid){ alert("1.outerText获得的内容(无标记):"+document.getElementById(tid).outerText+"\n2.outerHTML获得的内容(带标记):"+document.getElementById(tid).outerHTML); } </script> </head> <body> <div id="test1"><span style="font-weight:900;">outerText与outerText之间的区别</span></div> outerHTML是设置或返回HTML标签本身和其中嵌套的内容(含html代码)<br /> outerText是设置或返回HTML标签本身和其中嵌套的文本内容<br /><br /> 示例:<input type="button" value="测试结果1" onclick="lzy('test1');" /> </body> </html> 2-47

2.5 JavaScript和事件 • innerHTML与innerText之间的区别: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>ajax</title> <script language="javascript"> function lzy(tid){ alert("3.innerText获得的内容(无标记):“ +document.getElementById(tid).innerText+"\n4.innerHTML获得的内容(带标记):“ +document.getElementById(tid).innerHTML); } </script> </head> <body> <div id="test2"><span style="font-weight:900;">innerText与innerText之间的区别</span></div> &ltdiv id="test2"&gt&ltspan style="font-weight:900;">innerText与innerText之间的区别&lt/span&gt&lt/div&gt<BR /> innerText与innerHTML之间的区别:<br /> innerHTML是设置或返回HTML标签对之间的内容(含html代码)<br /> innerText是设置或返回HTML标签对之间的文本内容<br /><br /> 列子:<input type="button" value="测试结果2" onclick="lzy('test2');" /> </body> </html> 2-49

Ajax 编程技术第二章 JavaScript 相关要点