JavaScript程序设计[行业经验]

《JavaScript程序设计[行业经验]》由会员分享，可在线阅读，更多相关《JavaScript程序设计[行业经验]（100页珍藏版）》请在金锄头文库上搜索。

1、Neusoft Institute of InformationIT Education & Training JavaScript 程序设计入门ASP.NET Web应用开发（C#） JavaScript程序设计入门 授课人： 黄 波 Email： Tel：82878185 QQ：569960256 1沐风书屋eNeusoft Institute of InformationIT Education & Training主体纲要第一部分 JavaScript简介第二部分 JavaScript组成第三部分 JavaScript案例演示第四部分 JavaScript编程简介第五部分 JavaSc

2、ript编程基础第六部分 BOM（浏览器对象模型）第七部分 DOM（文档对象模型）2沐风书屋eNeusoft Institute of InformationIT Education & Training第一部分 JavaScript简介一、JavaScript的起源 1995年NetScape（网景浏览器）中出现，前身叫作LiveScript，NetScape公司与Sun公司联手开发，为了利用Java这个时髦记汇，将其更名为JavaScript。 JavaScript和Java根本就是两种语言！ 微软为了进军浏览器市场，开发了一个JavaScript的克隆版，叫JScript。 1997年，

3、JavaScript作为一个草案提交给ECMA（欧洲计算机制造商协会），定义了ECMAScript.3沐风书屋eNeusoft Institute of InformationIT Education & Training二、JavaScript的特点 1、脚本编写语言 它是一种脚本语言，采用小程序段的方式进行编程。它的基本结构形式如我们已学过的C#，但它不像C#必须先编译，而网页在浏览器中运行时逐行被“翻译”，它与HTML标签结合在一起。2、跨平台性 JavaScript是依赖于浏览器本身，与操作系统无关。 3、基于对象 它是一种基于对象（Object Based）和事件驱动（Event D

4、river）的编程语言，它本身提供了非常丰富的内部对象供设计人员使用。4沐风书屋eNeusoft Institute of InformationIT Education & Training 4、用于客户端 事先在网页中编写好代码，此代码随HTML文件一起发送到客户端的浏览器上，由浏览器对这些代码进行解释执行，这样就减轻了服务器的负担。三、JavaScript的作用 1. 校验用户输入内容； 2. 动态显示网页内容； 3. 为静态网页增加一些特效 4. AJAX程序的核心技术之一程序的核心技术之一 如果你有一些编程经验，会觉得JavaScript比较熟悉，即使没有任何编程经验，也没什么问题，

5、网上有很多JavaScript特效，你可以直接Copy进网页使用。5沐风书屋eNeusoft Institute of InformationIT Education & Training第二部分 JavaScript的组成 ECMAScriptECMAScript：不与任何具体浏览器相绑定，只描述以下内容：语法、类型、语句、关键字、保留字、运算符、对象。 DOMDOM：文档对象模型，是HTML和XML的应用程序接口（API），DOM把整个页面规划成由节点层级构成的文档。6沐风书屋eNeusoft Institute of InformationIT Education & Training

6、Sample Page Hello World! DOM通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用DOM API可以轻松地删除、添加和替换节点。7沐风书屋eNeusoft Institute of InformationIT Education & Training BOM：浏览器对象模型，可以对浏览器窗口进行访问和操作，由于没有相关的BOM标准，每种浏览器都有自己的BOM实现。 主要实现： 弹出新的窗口； 移动、关闭浏览器窗口以及调整大小； 提供用户屏幕分辨详细信息的屏幕对象 .8沐风书屋eNeusoft Institute of InformationIT E

7、ducation & Training第三部分 Java案例演示 1. 一些有趣的例子； 2. 见案例中的JavaScript各种特效.rar 3. 网络资源： http:/ 收录了很多JavaScript实现的特效； 4. 一个类似于Windows XP的网络操作系统界面，这也是 JavaScript与其他技术结合完成的 请用FireFox访问： http:/9沐风书屋eNeusoft Institute of InformationIT Education & Training10沐风书屋eNeusoft Institute of InformationIT Education & Tra

8、ining第四部分 JavaScript编程简介一、编辑软件 编辑JavaScript可以使用任何一种文本编辑器，例如记事本，为降低JavaScript难度，我们使用1st JavaScript Editor，由于破解不完善，智能提示必须自己手工启动 菜单：Edit Preference TextEditor IntelliSense二、调试器 使用VS.NET 2005，同样支持断点设置，F10、F11操作但有两条必须注意： 11沐风书屋eNeusoft Institute of InformationIT Education & Training1.设置IE中的Internet选项 将高级

9、设置中的禁用脚本调试（Internet Explorer）（英文：Disable Script Debugging（Internet Explorer)关闭2.在VS.NET 2005 IDE中直接运行三、JavaScript的编写形式1.直接把JavaScript嵌入在HTML任何标签中 这里的document对象指的是当前的HTML文档12沐风书屋eNeusoft Institute of InformationIT Education & Training2. 使用JavaScript函数时，将函数定义在标签中13沐风书屋eNeusoft Institute of Information

10、IT Education & Training3. 使用单独的.js文件 在标签中链接外部.js文件 利用 Jscript.js内容14沐风书屋eNeusoft Institute of InformationIT Education & Training第五部分 JavaScript编程基础一、JavaScript的变量 区分大小写，变量是弱类型的，ECMAScript中的变量无特定的类型，变量的声明，使用关键字 var 可以随时改变变量所存数据的类型 var color=“red”; var num = 25; var visible = false; 这种特性在.NET 3.5框架中已被

11、引入！ 与C#中的变量不同，变量并不一定要被初始化15沐风书屋eNeusoft Institute of InformationIT Education & Training var test; test=55; test=“hi”;二、 原始类型 ECMAScript有5种原始类型（primitive type)：undefined、null、boolean、number和string。 1、undefined类型 var oTemp； 声明的变量未初始化时，该变量的初始值是undefined. 函数（function）无明确16沐风书屋eNeusoft Institute of Infor

12、mationIT Education & Training2 、null类型 用于尚未存在的对象，值undefined实际是从值null派生的，ECMAScript把它们定义为相等 null = = undefined;/ 这个表达式返回true3、 boolean类型 只有两个值 true和false;4、 number类型 任何数字都被看作number类型的字面量 var num = 55; var num = 070；/56的八进制 var num = 0x1f; /31的16进制 var num = 5.0;17沐风书屋eNeusoft Institute of Information

13、IT Education & Training 有一个特殊的值是NaN，表示非数（Not a Number）可以使用isNaN函数判断，例如 :isNaN(“blue”); 返回true5、string类型 字符串类型三、typeof运算符 对变量或值调用typeof运算符将返回下列的值之一： “undefined” 变量是undefined类型的 “boolean” 变量是boolean类型的 “number” 变量是number型的 “string” 变量是string型的 “object” 变量是一种引用类型或null类型 例： var i=2; alert(typeof(i); /得到

14、number类型18沐风书屋eNeusoft Institute of InformationIT Education & Training四、 类型转换 （1）转换成字符串 3种主要的原始值 boolean、number和string都有toString方法 （2）转换成数字 parseInt方法和parseflota方法 只有对string类型调用这些方法，它们才能正确运行；对其他类型都返回NaN; parseInt方法首先检查位置0处的字符，判断它是否是个有效数字，若有效，再往下检查，直到发现非数字，并返回前面的检查结果。 例：var num1 = parseInt(“1234”); /

15、得到1234 19沐风书屋eNeusoft Institute of InformationIT Education & Training var num2= parseInt（”1234blue”）;/返回1234 var num3 = parseInt (“blue”）; /返回NaN parseFloat的使用类似： var fnum1 = parseFloat（”1234blue”); /返回1234.0 var fnum2 = parseFloat (“blue”）;/返回NaN五、 函数 1. 语法规则 function 函数名(参数1，参数2） return 值； 20沐风书屋e

16、Neusoft Institute of InformationIT Education & Training说明： （1）JavaScript的函数与C#的方法或函数不同，function后面不需要定义返回值类型； （2）当使用多个参数时，参数间以逗号隔开； （3）JavaScript中函数的传递也是分两种，按值传递和按引用传递；2. argument对象 使用特殊对象arguments，开发者无需指出参数名，就能访问它们。例如：21沐风书屋eNeusoft Institute of InformationIT Education & Training function SayHi() if

17、(arguments0 =bye) return; alert(arguments0); 调用形式调用形式1:1: SayHi(test);调用形式调用形式2 2： SayHi(test”,123); 与其他语言不同，ECMAScript不会验证传递给函数的参数的个数是否相等，函数可以接受任意个数的参数（Netscape的文档最多25个），而不会引发任何错误。22沐风书屋eNeusoft Institute of InformationIT Education & Training 还可以在函数内使用argument.length属性检测参数个数 function HowManyArgs()

18、alert(arguments.length); 利用arguments对象判断传递给函数的参数个数，即可模拟函数重载。 23沐风书屋eNeusoft Institute of InformationIT Education & Training六、事件驱动及事件处理 Event Drive：JavaScript是基于对象(object-based）的语言，基于对象的基体特征，就是采用事件驱动（event drive) 事件：鼠标或键盘的动作； 事件驱动：由鼠标或键盘的动作引发的一连串程序的动作叫事件驱动（event drive） 事件处理程序（Event Handler）：通常由函数执行。

19、网页中的事件一般分为鼠标事件、键盘事件及其他事件。1. 一些常用的事件24沐风书屋eNeusoft Institute of InformationIT Education & Training 表表1 1 常用鼠标事件常用鼠标事件事件事件意义意义onmousedown按下鼠标键onmousemove移动鼠标onmouseout鼠标离开某一个网页对象onmouseover鼠标移动到某一个网页对象onmouseup松开鼠标键onclick单击鼠标键ondbclick双击鼠标键表表2 2 常用键盘事件常用键盘事件事件事件意义意义onkeydown按下一个键onkeyup松开一个键onkeypres

20、s按下然后松开一个键25沐风书屋eNeusoft Institute of InformationIT Education & Training 表表3 3 其他事件其他事件事件事件意义意义onfocus焦点到一个对象上onblur从一个对象失去焦点onload载入网页文档onunLoad卸载网页文档 onselect文本框中选择了文本内容onchange文字变化或列表选项变化onerror出错onsubmit 提交表单onreset重置表单onabort中断显示图片26沐风书屋eNeusoft Institute of InformationIT Education & Training3.

21、 用JavaScript处理事件 JavaScript语言与HTML文档相关联主要是通过“事件”，JavaScript的函数就是用于处理事件的程序，语法规则是： 事件 = “函数名”或 事件 = “JavaScript语句” 例如： （1） （2）也可以定义好函数后再调用 function message() alert(hello world); 27沐风书屋eNeusoft Institute of InformationIT Education & Training4. JavaScript练习 （1） 当装入HTML文档时调用LoadForm（）函数，而退出 该文档进入另一个HTML文

22、档时则首先调用 UnLoadForm（）函数，确认后方可进入 LoadForm（）函数：提示用户“这是一个自动装载例子”UnLoadForm（）函数：提示用户“这是一个自动卸载的例子”28沐风书屋eNeusoft Institute of InformationIT Education & Training 无标题页 function LoadForm() alert(这是一个装载的例子); function UnLoadForm() alert(这是一个卸载的例子); 测试29沐风书屋eNeusoft Institute of InformationIT Education & Traini

23、ng （2）一个输入框中，当没有输入值时，提示用户：请输入！ 无标题页 function validate() if(user.value=) alert(请输入!); 30沐风书屋eNeusoft Institute of InformationIT Education & Training 若要验证form中提交的数据 31沐风书屋eNeusoft Institute of InformationIT Education & TrainingJavaScript脚本为： function validate() if(document.data.user.value=) alert(wron

24、g); return false; 32沐风书屋eNeusoft Institute of InformationIT Education & Training七、 数组对象 1. JavaScript数组的定义 （1）新建一个长度为0的数组 var myArray= new Array（）; （2）长度为n的数组 var myArray = new Array(n); （3）新建一个指定长度的数组，并赋初值 var myArray = new Array(1,2,3); （4）访问数组的某个元素 myArray2=4; var i = myArray2; 33沐风书屋eNeusoft Ins

25、titute of InformationIT Education & Training2. 动态数组 JavaScript的数组的长度不是固定不变，若要增加数组的长度，只要直接赋值。 例如： var myArray = new Array(1,2,3); myArray3 = 4; 这时myArray的长度为4 如果 var myArray = new Array(1,2,3); myArray4=4; 则长度为5,其中myArra3的值为undefined34沐风书屋eNeusoft Institute of InformationIT Education & Training3. 数组的

26、常用属性和方法（1）length属性：获取数组长度（2）concat方法 例：var a = new Array(1,2,3); var b = new Array(4,5,6); alert(a.concat(b); /输出1,2,3,4,5,6 alert(a.length); /长度不变，仍为3 也可以直接连接数值 a.concat(4,5,6); （3）join方法，连接数组，缺省为”,” 例：var a = new Array(1,2,3); alert(a.join(); /输出1,2,3 35沐风书屋eNeusoft Institute of InformationIT Educ

27、ation & Training 也可用指定的符号连接，例 alert(a.join(“-”);（4）push方法，在数组的结尾添加一个或多个项，同时更改数组的长度 例：var a = new Array(1,2,3); a.push(4,5,6); alert(a.length);/输出为6（5）pop方法，删除最后一个数组项，将其作为函数值返回 例：var a1=new Array(1,2,3); alert(a1.pop(); /输出3 alert(a1.length); /输出2 36沐风书屋eNeusoft Institute of InformationIT Education &

28、 Training（6）shift方法:删除数组中的第一个项，将其作为函数值返回 例如：var a1=new Array(1,2,3); alert(a1.shift(); /输出1 alert(a1.length); /输出2（7）unshift方法:添加元素至数组开始处 例如： var a1=new Array(1,2,3); a1.unshift(4,5,6) alert(a1); /输出4,5,6,1,2,337沐风书屋eNeusoft Institute of InformationIT Education & Training（8）slice方法：返回数组的片断。（或者说子数组）。

29、有两个参数，分别指定开始和结束的索引（不包括第二个参数索引本身）。如果只有一个参数该方法返回从该位置开始到数组结尾的所有项。如果任意一个参数为负的，则表示是从尾部向前的索引计数。比如-1 表示最后一个，-3 表示倒数第三个。 var a1=new Array(1,2,3,4,5); alert(a1.slice(1,3); /输出2,3 alert(a1.slice(1); /输出2,3,4,5 alert(a1.slice(1,-1); /输出2,3,4 alert(a1.slice(-3,-2); /输出338沐风书屋eNeusoft Institute of InformationIT

30、Education & Training（9）splice方法：从数组中替换或删除元素。第一个参数指定删除或插入将发生的位置。第二个参数指定将要删除的元素数目，如果省略该参数，则从第一个参数的位置到最后都会被删除。splice()会返回被删除元素的数组。如果没有元素被删，则返回空数组。例： var a1=new Array(1,2,3,4,5); alert(a1.splice(3); /输出4,5 alert(a1.length); /输出3 var a1=new Array(1,2,3,4,5); alert(a1.splice(1,3);/输出2,3,4 alert(a1.length)

31、; /输出239沐风书屋eNeusoft Institute of InformationIT Education & Training（10）sort方法：数组排序 var a1=new Array(1,4,2,3,5); alert(a1.sort(); /输出1,2,3,4,5 另外它的sort方法可以指定比较函数，根据比较函数进行排序，例： function compare(a,b) return (b-a); var a1=new Array(1,4,2,3,5); alert(a1.sort(compare); /输出5,4,3,2,1 （11）reverse方法：将数组倒序 40

32、沐风书屋eNeusoft Institute of InformationIT Education & Training八、String对象主要属性和方法 例如：var myString = “This is a sample”;（1）charAt：返回字串对象在指定位置处的字符 myString.charAt(2)；/返回i（2）charCodeAt：返回字串对象在指定位置处字符的10进制的ASCII码 myString.charCodeAt(2)；/返回105（3）indexOf：要查找的字串在字串对象中的位置 myString.indexOf(“is”)；/返回2（4）lastIndex

33、Of：要查找的字串在字串对象中的最后位置 myString.lastIndexOf(“is”)；41沐风书屋eNeusoft Institute of InformationIT Education & Training（5）substr方法：截取字串 myString.substr(10,3)；/返回sam，其中10表示位置，3表示长度 （6）substring方法：截取字串 myString.substring(5,9)；/返回is a,其中5表示开始位置，9表示结束位置（7）split方法：分隔字串到一个数组中 var a = myString.split( ); /a0 = “This

34、” a1=“is” a2=“a” a3=“sample”（8）replace方法 myString.replace(“sample”,”apple”); /结果”This is a apple”42沐风书屋eNeusoft Institute of InformationIT Education & Training（9）toLowerCase方法：变成小写字母 myString.toLowerCase()；/ this is a sample（10）toUpperCase方法，变成大写字母 myString. toUpperCase();/THIS IS A SAMPLE （11）proto

35、type属性 注：JavaScript中的string没有像C#中的Trim（）方法，但可以利用prototype属性为其添加 例如，我们设计三个函数LTrim、RTrim、Trim分别剪切字串的左边多余空格、右边多余空格、左右多余空格43沐风书屋eNeusoft Institute of InformationIT Education & Training function RTrim(str) var i= str.length-1; while(str.charAt(i) = & i=0) -i; str = str.substring(0,i+1); return str;44沐风书屋

36、eNeusoft Institute of InformationIT Education & Trainingfunction LTrim(str) var i =0; while(str.charAt(i) = & istr.length) +i; str = str.substring(i,str.length) return str;function Trim(str) return(LTrim(RTrim(str);45沐风书屋eNeusoft Institute of InformationIT Education & Training使用prototype属性为String类添加

37、Trim方法 String.prototype.Trim = function() return Trim(this); 这里表示为String类添加了一个方法叫作Trim方法，这个Trim方法调用Trim函数实现。同理，还可以为String类添加LTrim和RTrim方法 String.prototype.LTrim = function() return LTrim(this); String.prototype.RTrim = function()return RTrim(this);46沐风书屋eNeusoft Institute of InformationIT Education

38、& Training第六部分 BOM（浏览器对象模型） 它提供了独立于内容而与浏览器窗口进行交互的对象一、体系结构47沐风书屋eNeusoft Institute of InformationIT Education & Training二、Window对象1.导航和打开新窗口 使用window.open（）方法，该方法接受4个参数，即url、新窗口的名字、特性字符串和说明是否用新载入的页面替换当前载入的页面的boolean值，一般只用前三个. 特性字符串是用逗号分隔的设置列表，它定义新创建的窗口的某些方面。 例： window.open(“1.htm”,”mywindow”,”height=

39、150,width=300, top=10,left=10,resizable=yes”); 48沐风书屋eNeusoft Institute of InformationIT Education & Training 设置值说明left Number 新创建的窗口的左坐标，不能为负topNumber 新创建的窗口的顶坐标，不能为负heightNumber 高度，不能小于100widthNumber 宽度，不能小于100resizableyes,no 是否可拖动调整大小，缺省为falsescrollable yes,no不能容纳内容时是否滚动，缺省为falsetoolbaryes,no 是否显

40、示工具栏，缺省为falsestatusyes,no 是否显示状态栏，缺省为falselocationyes,no 是否显示地址栏，缺省为false特性字符串设置特性字符串设置49沐风书屋eNeusoft Institute of InformationIT Education & Training2. 关闭窗口 window.close(); 关闭前有的浏览器（IE）会提示。3.系统对话框 （1）alert方法，显示一个警告框； （2）confirm方法 confirm（“你真的要删除么?”);50沐风书屋eNeusoft Institute of InformationIT Educatio

41、n & Training 当用户点击确定，返回true，取消则返回false if(confirm(你真的要删除么？) alert(删除); else alert(不删除); （3）prompt方法 接受两个参数：显示文本和缺省答案51沐风书屋eNeusoft Institute of InformationIT Education & Training 若点击确定，则返回输入值，取消则返回null值 var result= prompt(你的姓名, 黄波); if(result!=null) alert(result); 注：这三种对话框都是模式化的，即用户不操作，不能在浏览器中作任何操作!

42、52沐风书屋eNeusoft Institute of InformationIT Education & Training4. 状态栏 使用window.status=“”设置状态栏信息；5. 时间间隔和暂停 所谓暂停，是在指定的毫秒数后执行指定的代码。时间间隔是指反复执行指定的代码，每次执行之间等待指定的毫秒数。 （1）使用setTimeout实现暂停 setTimeout(“alert(hello)”,3000)； 或 setTimeout(函数名，3000);53沐风书屋eNeusoft Institute of InformationIT Education & Training f

43、unction sayHello() alert(hello); 第一个参数使用函数指针或引用，例如 setTimeout(sayHello,3000); 若有参数，则必须 setTimeout(function()sayHello(1,2);,3000); 调用setTimeout时，会创建一个数字暂停ID，要取消可使用clearTimeout，并把暂停ID传给它 var tid= setTimeout(sayHello,3000); clearTimeout(tid); 54沐风书屋eNeusoft Institute of InformationIT Education & Traini

44、ng（2）使用setInterval定义间隔 用法与setTimeout基本类似，如 setInterval(sayHello,3000); 如果调用函数时要想传递参数，必须： setInterval(function()sayHello(1,2);,3000); 它也会创建间隔ID，若不取消，一直执行，直到页面卸载为止，使用clearInterval取消 var sid= setInterval(sayHello,3000); clearInterval(sid); 55沐风书屋eNeusoft Institute of InformationIT Education & Training6

45、. 历史 后退： window.history.go（-1）; 后退一页 与此类推 window.history.go(-2)；后退两页 前进 window.history.go(1); 也可用： window.history.back(); window.history.forward();56沐风书屋eNeusoft Institute of InformationIT Education & Training三、document对象 这个对象比较独特，它既属于BOM，又属于DOM。1. document对象集合集合集合说明说明anchors页面中所有锚的集合（由表示）applets页面中

46、所有applet的集合embeds页面中所有潜入对象的集合（由标签表示forms页面中所有表单的集合images页面中所有图像的集合links页面中所有链接的集合（由表示）57沐风书屋eNeusoft Institute of InformationIT Education & Training例如： 要访问body中的img图像，可用 document.images“imgHome” 访问表单中的输入框 document.forms“data”.txtEmail 58沐风书屋eNeusoft Institute of InformationIT Education & Training 这时

47、这些对象的所有特性都变成了该对象的属性，可以进行设置或读取，例如： function showMessage() alert(document.imagesimgHome.src); alert(document.formsdata.txtEmail.value); document.imagesimgHome.src=pop.gif; document.formsdata.txtEmail.value = 这是测试一下; 59沐风书屋eNeusoft Institute of InformationIT Education & Training2. write和writeln方法 这两个方法

48、都接受一个字符串参数，在当前HTML文档中输出字符串，唯一区别：writeln在字串末尾加一个（n） 动态引入.js文件的办法 document.write(); 注意：这种写法会导致错误，因为浏览器一遇到，它会假定其中代码是完整的（即使它出现字符串中). document.write(“” + “”); /正确写法，将分成两部分 60沐风书屋eNeusoft Institute of InformationIT Education & Training四、location对象1.导航 使用location.href= URL 属性 例： 2.重新载入 location.reload()；/重

49、新从缓存中载入页面 location.reload(true); /重新从服务器载入页面3.清空网页 location.href=“about:blank”; 61沐风书屋eNeusoft Institute of InformationIT Education & Training五、frame对象 1. 框架实例：62沐风书屋eNeusoft Institute of InformationIT Education & Training2. 框架的使用 （1）创建普通的XHTML网页； （2）创建框架集文档 在框架集文档也是XHTML页面，在页面中指示网页浏览器将窗口分为几个框架，并指定每

50、一框架应显示哪个网页。 要注意的是，框架集的XHTML所使用的DOCTYPE必须是 XHTML 1.1不支持框架！63沐风书屋eNeusoft Institute of InformationIT Education & Training 例1：在一个窗口下同时显示三个页面64沐风书屋eNeusoft Institute of InformationIT Education & Training 无标题页 65沐风书屋eNeusoft Institute of InformationIT Education & Training 框架集文档中，可以不使用body标签，必须使用标签，它有两个属性

51、cols和rows，cols表示按列分布网页，rows表示按行分布网页。可以使用像素值或%，*表示尽可能占据窗口的可用空间。同时使用标签，利用其src属性指定链接的网页url。 对于不支持框架的浏览器，可以在标签中使用来显示内容例如： 这是浏览器不支持框架时显示的内容 66沐风书屋eNeusoft Institute of InformationIT Education & Training 例2：既有行显示，也有列显示67沐风书屋eNeusoft Institute of InformationIT Education & Training 当框架中既有行显示，也有列显示时，必须使用框架标签

52、的嵌套 68沐风书屋eNeusoft Institute of InformationIT Education & Training 例3：框架的导航 在导航中地址栏的url是保持不变的69沐风书屋eNeusoft Institute of InformationIT Education & Training框架文件内容： 左边导航页面的内容： 淘宝网 新浪这里表示在框架showframe中显示70沐风书屋eNeusoft Institute of InformationIT Education & Training3.框架中一些特别的属性 （1）控制边框 在每个标签中，使用属性framebo

53、rder=“0”不显示，frameborder=1显示 （2）是否允许调整框架大小 在每个标签中，使用属性noresize=“noresize”控制； （3）是否有滚动条 在每个标签中，使用属性scrolling=“yes/no/auto”控制 71沐风书屋eNeusoft Institute of InformationIT Education & Training4. 标签 它用来在一个HTML文档内部显示一个框架，例如 这只是一个iframe的测试 72沐风书屋eNeusoft Institute of InformationIT Education & Training5. 框架(fr

54、ame）对象控制上下框架：框架组窗口对象.document.body.rows=尺寸字串；左右框架：框架组窗口对象.document.body.cols=尺寸字串；例如：window.parent.document.body.rows=“50%,*”;73沐风书屋eNeusoft Institute of InformationIT Education & Training第七部分 DOM（文档对象模型） DOM是文档对象模型(Document Object Model，是基于浏览器编程的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接

55、近，几乎支持所有的DOM Level 2，以及部分DOM Level 3。Opera和Safari也支持所有的DOM Level1和大部分DOM Level 2。IE对DOM Level1的实现最差，还有待完善！74沐风书屋eNeusoft Institute of InformationIT Education & Training一、访问指定节点 1. getElementsByTagName() 返回一个包含所有指定标签名的的集合返回一个包含所有指定标签名的的集合 例如：返回文档中所有元素的列表： var oImgs = document.getElementsByTagName(img

56、); 在把所有的img标签存储在oImgs中后，可以使用序号或名称进行子项的访问 alert (oImgs0.tagName)；/ 输出标签名“IMG”或 alert(oImgs“img1”.tagName); /img1为某个img的name属性 75沐风书屋eNeusoft Institute of InformationIT Education & Training 获取所有元素 在FireFox等浏览器下： var oAllElement = document. getElementsByTagName（“*”）； 在IE 6.0下： var oAllElement = documen

57、t. all; /使用这句，可用来判断是否是IE浏览器2. getElementsByName（） 用来获取所有用来获取所有name属性等于指定值的元素集合属性等于指定值的元素集合 例如：获取所有name属性等于”img1”的所有元素 var oImgs = document.getElementsByName(img1); alert(oImgs0.alt); /输出第一个元素的alt属性值 76沐风书屋eNeusoft Institute of InformationIT Education & Training3. getElementById（） 返回返回id属性等于指定值的元素属性等

58、于指定值的元素. 在HTML中，id是唯一的，这也是从DOM文档树中获取单个指定元素的最快的方法。 例如：获取id属性为img1的元素 var oImgs = document.getElementById(img1); alert(oImgs.alt); /输出找到元素的alt属性值 注：IE中有个严重的Bug! 77沐风书屋eNeusoft Institute of InformationIT Education & Training 当var oImgs = document.getElementById(“img1”);时，由于第一个img标签排在前面，它的name属性也为img1，使

59、用这个方法时，获得的却是第一个img标签对象，使用 alert(oImgs.src); /输出的是2.gif二、处理元素属性1.getAttribute 获取元素的某个属性 例如： var oImgs = document.getElementById(“img1”); alert(oImgs. getAttribute(“src”);2.setAttribute 设置元素的某个属性 78沐风书屋eNeusoft Institute of InformationIT Education & Training例如： var oImgs = document.getElementById(“img

60、1”); oImgs.setAttribute(src,test.gif); /设置图片对象的src属性为test.gif3. removeAttribute 移除元素的某个属性 例如：相移除email中的value属性 可用 var iHid = document.getElementById(email); iHid.removeAttribute(“value”,1);/1表示忽略大小写 但这个方法在IE上工作不正常 79沐风书屋eNeusoft Institute of InformationIT Education & Training三、一些高级DOM技术1.动态修改文档内容 （1

61、）使用innerHTML 用来读取、添加或删除指定标签中的内容，其中改变后的内容也可以包括HTML标签 例如：页面源代码如下 80沐风书屋eNeusoft Institute of InformationIT Education & Training读取 function test() var oDiv = document.getElementById(content); alert(oDiv.innerHTML); /输出： 修改 function test() var oDiv = document.getElementById(content); oDiv.innerHTML= 81沐

62、风书屋eNeusoft Institute of InformationIT Education & Training（2）使用outerHTML 将删除指定的标签本身，把它替换成新的HTML内容 例如： function test() var oDiv = document.getElementById(content); oDiv.outerHTML=; 将删除div标签本身，将其替换成 注：这个方法仅IE支持82沐风书屋eNeusoft Institute of InformationIT Education & Training2. 样式表编程 （1）style对象 style对象包含

63、与每个CSS样式对应的特性，虽然格式不同，但它的样式属性有一定的规律，和CSS样式能对应起来 例如： CSS样式特性样式特性 JavaScript样式属性样式属性 background-color style.backgroundColor color style.color font-family style.fontFamily 83沐风书屋eNeusoft Institute of InformationIT Education & Training练习1： 在body中有个层div，其id为”content”，请实现一个翻转效果，当鼠标放置在层上时，控制该层的背景色为蓝色，鼠标离开时，

64、层的背景恢复成红色。 层的设计： 要用到的事件为： onmouseover（放置）和onmouseout（离开）84沐风书屋eNeusoft Institute of InformationIT Education & Training function ChangeBlue() var oDiv = document.getElementById(content); oDiv.style.backgroundColor=Blue; function ChangeRed() var oDiv = document.getElementById(content); oDiv.style.back

65、groundColor=Red; 85沐风书屋eNeusoft Institute of InformationIT Education & Training练习2： 86沐风书屋eNeusoft Institute of InformationIT Education & Training（2）访问内联样式表 但是，style对象用来读取样式时，只能获取在HTML标签的Style属性中定义的CSS样式。当css样式是在标签中定义或在外部的.css文件定义时，无法使用style对象获取某个元素的Css样式。例如： #Content height : 100px ; width : 200px

66、; background-color : red ; var oDiv = var oDiv = document.getElementById(Content); document.getElementById(Content); alert(oDiv.style.width); alert(oDiv.style.width);打印出来的是空值打印出来的是空值87沐风书屋eNeusoft Institute of InformationIT Education & Training（3）获取标签样式表的集合 document.styleSheets可以代表样式表的集合。 document.s

67、tyleSheets0代表1.css样式表集合 document.styleSheets1代表样式表集合 反之若标签排在标签前，则 document.styleSheets0代表样式表集合 document.styleSheets1代表1.css样式表集合88沐风书屋eNeusoft Institute of InformationIT Education & Training（4）获取样式表中规则的引用 DOM标准（FireFox和Safari)：使用cssRules集合； IE ：使用rules集合var oCssRules = document.styleSheets0.cssRules

68、|document.styleSheets0.rules; alert(oCssRules0.style.backgroundColor); /读取出第一个style标签中设置的第一个样式的背景色 当然，也可以通过程序进行设置 oCssRules0.style.backgroundColor=Gray; 注意：最好只修改单个元素的style对象，不要更改CSS规则 最简单的还是使用下面这种方式修改单独对象：89沐风书屋eNeusoft Institute of InformationIT Education & Trainingvar oDiv = document.getElementByI

69、d(Content);oDiv.style.backgroundColor=blue;（3）如何获取有选择器的CSS规则 比较复杂，请参看网页： http:/ 在IE中 使用currentStyle对象 例如：获取div使用的最终颜色 var oDiv = document.getElementById(Content); alert(oDiv.currentStyle.backgroundColor);90沐风书屋eNeusoft Institute of InformationIT Education & Training 注：所有currentStyle特性都是只读的，若赋值会引发错误D

70、OM中的最终样式 使用 document.defaultView.getComputedStyle(oDiv ,null).backgroundColor可以获取 但取出来的颜色值在FireFox下表示成RGB形式91沐风书屋eNeusoft Institute of InformationIT Education & Training四、DOM获取标签的尺寸 假设 obj 为某个 HTML 标签，则 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。obj.offsetWid

71、th 指 obj 控件自身的宽度，整型，单位像素obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素 其他还有类似的clientTop、scrollTop、clientHeight，使用比较复杂，有兴趣的参看： http:/ 92沐风书屋eNeusoft Institute of InformationIT Education & Training 练习1： 93沐风书屋eNeusoft Institute of InformationIT Education & Training练习2：94沐风书屋eNeusoft Institute of InformationIT

72、 Education & Training练习3： 练习4： 复习框架 （1）控制页面导航：从一个框架中输入网页地址，然后在另一个框架中打开该地址； （2）清空网页 （3）向另外一个框架页写内容95沐风书屋eNeusoft Institute of InformationIT Education & TrainingJavaScript的其他使用1.使用正则表达式进行验证： 正则表达式是一种用来描述一定数量文本的模式，你的文本必须与这个模式匹配，例如：这个文本必须是中文的，或者这个文本必须是数字并且只有6位. 参考资料： 常用正则表达式.doc 使用原则：先找到相应的正则表达式，例如验证ema

73、il的w+(-+.w+)*w+(-.w+)*.w+(-.w+)* 96沐风书屋eNeusoft Institute of InformationIT Education & Training JavaScript验证： var emailReg= /w+(-+.w+)*w+(-.w+)*.w+(-.w+)*/; /在正则表达式前后各加一个”/” if(!emailReg.test(e) alert(“email不合法”); 97沐风书屋eNeusoft Institute of InformationIT Education & Training2. 标签 标签可包含任何HTML代码（除）。它

74、用在浏览器不支持或关闭JavaScript时，显示中定义的内容，若浏览器支持或启用了JavaScript，将忽略其中定义的HTML代码。 例：在中不支持JavaScript时 应启用 JavaScript，才能使用新极速风格。然而，JavaScript 似乎已被禁用，要么就是您的浏览器不支持 JavaScript。要使用新极速风格，请更改您的浏览器选项以启用 JavaScript，然后重新登陆。 98沐风书屋eNeusoft Institute of InformationIT Education & Training3. 一些流行的JavaScript包： jQuery 参考资料 （1）中文官方论坛:http:/ （2）使用 jQuery 简化 Ajax 开发 http:/ youNeusoft Institute of Information谢谢100沐风书屋e