JavaScript程序设计.ppt

《JavaScript程序设计.ppt》由会员分享，可在线阅读，更多相关《JavaScript程序设计.ppt（101页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Neusoft Institute of InformationIT Education & Training主体纲要 第一部分 JavaScript简介 第二部分 JavaScript组成 第三部分 JavaScript案例演示 第四部分 JavaScript编程简介 第五部分 JavaScript编程基础 第六部分 BOM（浏览器对象模型） 第七部分 DOM（文档对象模型）Neusoft Institute of InformationIT Education & Training第一部分 JavaScript简介一、JavaScript的起源 1995年NetScape（网景浏览器）中出

2、现，前身叫作LiveScript，NetScape公司与Sun公司联手开发，为了利用Java这个时髦记汇，将其更名为JavaScript。 JavaScript和Java根本就是两种语言！ 微软为了进军浏览器市场，开发了一个JavaScript的克隆版，叫JScript。 1997年，JavaScript作为一个草案提交给ECMA（欧洲计算机制造商协会），定义了ECMAScript.Neusoft Institute of InformationIT Education & Training二、JavaScript的特点 1、脚本编写语言 它是一种脚本语言，采用小程序段的方式进行编程。它的基本

3、结构形式如我们已学过的C#，但它不像C#必须先编译，而网页在浏览器中运行时逐行被“翻译”，它与HTML标签结合在一起。2、跨平台性 JavaScript是依赖于浏览器本身，与操作系统无关。 3、基于对象 它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言，它本身提供了非常丰富的内部对象供设计人员使用。Neusoft Institute of InformationIT Education & Training 4、用于客户端 事先在网页中编写好代码，此代码随HTML文件一起发送到客户端的浏览器上，由浏览器对这些代码进行解释执行，这样就减轻了服务器的负担

4、。三、JavaScript的作用 1. 校验用户输入内容； 2. 动态显示网页内容； 3. 为静态网页增加一些特效 4. AJAX程序的核心技术之一程序的核心技术之一 如果你有一些编程经验，会觉得JavaScript比较熟悉，即使没有任何编程经验，也没什么问题，网上有很多JavaScript特效，你可以直接Copy进网页使用。Neusoft Institute of InformationIT Education & Training第二部分 JavaScript的组成 ECMAScriptECMAScript：不与任何具体浏览器相绑定，只描述以下内容：语法、类型、语句、关键字、保留字、运算符

5、、对象。 DOMDOM：文档对象模型，是HTML和XML的应用程序接口（API），DOM把整个页面规划成由节点层级构成的文档。Neusoft Institute of InformationIT Education & Training Sample Page Hello World! DOM通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用DOM API可以轻松地删除、添加和替换节点。Neusoft Institute of InformationIT Education & Training BOM：浏览器对象模型，可以对浏览器窗口进行访问和操作，由于没有相关的BOM

6、标准，每种浏览器都有自己的BOM实现。 主要实现： 弹出新的窗口； 移动、关闭浏览器窗口以及调整大小； 提供用户屏幕分辨详细信息的屏幕对象 .Neusoft Institute of InformationIT Education & Training第三部分 Java案例演示 1. 一些有趣的例子； 2. 见案例中的JavaScript各种特效.rar 3. 网络资源： http:/ 收录了很多JavaScript实现的特效； 4. 一个类似于Windows XP的网络操作系统界面，这也是 JavaScript与其他技术结合完成的 请用FireFox访问： http:/Neusoft Ins

7、titute of InformationIT Education & TrainingNeusoft Institute of InformationIT Education & Training第四部分 JavaScript编程简介一、编辑软件 编辑JavaScript可以使用任何一种文本编辑器，例如记事本，为降低JavaScript难度，我们使用1st JavaScript Editor，由于破解不完善，智能提示必须自己手工启动 菜单：Edit Preference TextEditor IntelliSense二、调试器 使用VS.NET 2005，同样支持断点设置，F10、F11操作

8、但有两条必须注意： Neusoft Institute of InformationIT Education & Training设置IE中的Internet选项 将高级设置中的禁用脚本调试（Internet Explorer）（英文：Disable Script Debugging（Internet Explorer)关闭在VS.NET 2005 IDE中直接运行三、JavaScript的编写形式直接把JavaScript嵌入在HTML任何标签中 这里的document对象指的是当前的HTML文档Neusoft Institute of InformationIT Education & T

9、raining2. 使用JavaScript函数时，将函数定义在标签中Neusoft Institute of InformationIT Education & Training3. 使用单独的.js文件 在标签中链接外部.js文件 利用 Jscript.js内容Neusoft Institute of InformationIT Education & Training第五部分 JavaScript编程基础一、JavaScript的变量 区分大小写，变量是弱类型的，ECMAScript中的变量无特定的类型，变量的声明，使用关键字 var 可以随时改变变量所存数据的类型 var color=

10、“red”; var num = 25; var visible = false; 这种特性在.NET 3.5框架中已被引入！ 与C#中的变量不同，变量并不一定要被初始化Neusoft Institute of InformationIT Education & Training var test; test=55; test=“hi”;二、 原始类型 ECMAScript有5种原始类型（primitive type)：undefined、null、boolean、number和string。 1、undefined类型 var oTemp； 声明的变量未初始化时，该变量的初始值是undefi

11、ned. 函数（function）无明确Neusoft Institute of InformationIT Education & Training2 、null类型 用于尚未存在的对象，值undefined实际是从值null派生的，ECMAScript把它们定义为相等 null = = undefined;/ 这个表达式返回true3、 boolean类型 只有两个值 true和false;4、 number类型 任何数字都被看作number类型的字面量 var num = 55; var num = 070；/56的八进制 var num = 0 x1f; /31的16进制 var nu

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

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

14、 例：var num1 = parseInt(“1234”); /得到1234 Neusoft 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 函数名(

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

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

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

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

19、键Neusoft Institute of InformationIT Education & Training 表表3 3 其他事件其他事件事件事件意义意义onfocus焦点到一个对象上onblur从一个对象失去焦点onload载入网页文档onunLoad卸载网页文档 onselect文本框中选择了文本内容onchange文字变化或列表选项变化onerror出错onsubmit 提交表单onreset重置表单onabort中断显示图片Neusoft Institute of InformationIT Education & Training3. 用JavaScript处理事件 JavaSc

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

21、 LoadForm（）函数：提示用户“这是一个自动装载例子” UnLoadForm（）函数：提示用户“这是一个自动卸载的例子”Neusoft Institute of InformationIT Education & Training 无标题页 function LoadForm() alert(这是一个装载的例子); function UnLoadForm() alert(这是一个卸载的例子); 测试Neusoft Institute of InformationIT Education & Training （2）一个输入框中，当没有输入值时，提示用户：请输入！ 无标题页 functio

22、n validate() if(user.value=) alert(请输入!); Neusoft Institute of InformationIT Education & Training 若要验证form中提交的数据 Neusoft Institute of InformationIT Education & TrainingJavaScript脚本为： function validate() if(document.data.user.value=) alert(wrong); return false; Neusoft Institute of InformationIT Educ

23、ation & 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; Neusoft Institute of InformationIT Education & Training2. 动态数组 JavaScript的数组的长度不是固

24、定不变，若要增加数组的长度，只要直接赋值。 例如： var myArray = new Array(1,2,3); myArray3 = 4; 这时myArray的长度为4 如果 var myArray = new Array(1,2,3); myArray4=4; 则长度为5,其中myArra3的值为undefinedNeusoft Institute of InformationIT Education & Training3. 数组的常用属性和方法（1）length属性：获取数组长度（2）concat方法 例：var a = new Array(1,2,3); var b = new A

25、rray(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 Neusoft Institute of InformationIT Education & Training 也可用指定的符号连接，例 alert(a.join(“-”);（4）push方法，在数组的结尾添加一个或多个项，同时更改数组的长度 例：

26、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 Neusoft Institute of InformationIT Education & Training（6）shift方法:删除数组中的第一个项，将其作为函数值返回 例如：var a1=new Array(1,2,3); alert(a1.shift(); /输出1

27、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,3Neusoft Institute of InformationIT Education & Training（8）slice方法：返回数组的片断。（或者说子数组）。有两个参数，分别指定开始和结束的索引（不包括第二个参数索引本身）。如果只有一个参数该方法返回从该位置开始到数组结尾的所有项。如果任意一个参数为负的，则表示是从尾部向前的索引计数。比如-1 表示最后一

28、个，-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); /输出3Neusoft Institute of InformationIT Education & Training（9）splice方法：从数组中替换或删除元素。第一个参数指定删除或插入将发生的位置。第二个参数指定将要删除的元素数目，如果省略该参数，则从第一个参数的位置到最后都会被删除

29、。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); /输出2Neusoft Institute of InformationIT Education & Training（10）sort方法：数组排序 var a1=new Array(1,4,2,3,5);

30、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方法：将数组倒序 Neusoft Institute of InformationIT Education & Training八、String对象主要属性和方法 例如：var myString = “This is a sample”;（1）ch

31、arAt：返回字串对象在指定位置处的字符 myString.charAt(2)；/返回i（2）charCodeAt：返回字串对象在指定位置处字符的10进制的ASCII码 myString.charCodeAt(2)；/返回105（3）indexOf：要查找的字串在字串对象中的位置 myString.indexOf(“is”)；/返回2（4）lastIndexOf：要查找的字串在字串对象中的最后位置 myString.lastIndexOf(“is”)；Neusoft Institute of InformationIT Education & Training（5）substr方法：截取字串

32、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” a1=“is” a2=“a” a3=“sample”（8）replace方法 myString.replace(“sample”,”apple”); /结果”This is a apple”Neusoft Institute of Informati

33、onIT Education & Training（9）toLowerCase方法：变成小写字母 myString.toLowerCase()；/ this is a sample（10）toUpperCase方法，变成大写字母 myString. toUpperCase();/THIS IS A SAMPLE （11）prototype属性 注：JavaScript中的string没有像C#中的Trim（）方法，但可以利用prototype属性为其添加 例如，我们设计三个函数LTrim、RTrim、Trim分别剪切字串的左边多余空格、右边多余空格、左右多余空格Neusoft Institut

34、e 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;Neusoft Institute of InformationIT Education & Trainingfunction LTrim(str) var i =0; while(str.charAt(i) = & istr.length) +i; str = str.substring(i

35、,str.length) return str;function Trim(str) return(LTrim(RTrim(str);Neusoft Institute of InformationIT Education & Training使用prototype属性为String类添加Trim方法 String.prototype.Trim = function() return Trim(this); 这里表示为String类添加了一个方法叫作Trim方法，这个Trim方法调用Trim函数实现。同理，还可以为String类添加LTrim和RTrim方法 String.prototype.

36、LTrim = function() return LTrim(this); String.prototype.RTrim = function()return RTrim(this);Neusoft Institute of InformationIT Education & Training第六部分 BOM（浏览器对象模型） 它提供了独立于内容而与浏览器窗口进行交互的对象一、体系结构Neusoft Institute of InformationIT Education & Training二、Window对象导航和打开新窗口 使用window.open（）方法，该方法接受4个参数，即ur

37、l、新窗口的名字、特性字符串和说明是否用新载入的页面替换当前载入的页面的boolean值，一般只用前三个. 特性字符串是用逗号分隔的设置列表，它定义新创建的窗口的某些方面。 例： window.open(“1.htm”,”mywindow”,”height=150,width=300, 1. top=10,left=10,resizable=yes”); Neusoft Institute of InformationIT Education & Training 设置值说明left Number 新创建的窗口的左坐标，不能为负topNumber 新创建的窗口的顶坐标，不能为负heightNu

38、mber 高度，不能小于100widthNumber 宽度，不能小于100resizableyes,no 是否可拖动调整大小，缺省为falsescrollable yes,no不能容纳内容时是否滚动，缺省为falsetoolbaryes,no 是否显示工具栏，缺省为falsestatusyes,no 是否显示状态栏，缺省为falselocationyes,no 是否显示地址栏，缺省为false特性字符串设置特性字符串设置Neusoft Institute of InformationIT Education & Training2. 关闭窗口 window.close(); 关闭前有的浏览器（

39、IE）会提示。系统对话框 （1）alert方法，显示一个警告框； （2）confirm方法3. confirm（“你真的要删除么?”);Neusoft Institute of InformationIT Education & Training 当用户点击确定，返回true，取消则返回false if(confirm(你真的要删除么？) alert(删除); else alert(不删除); （3）prompt方法 接受两个参数：显示文本和缺省答案Neusoft Institute of InformationIT Education & Training 若点击确定，则返回输入值，取消则返

40、回null值 var result= prompt(你的姓名, 黄波); if(result!=null) alert(result); 注：这三种对话框都是模式化的，即用户不操作，不能在浏览器中作任何操作!Neusoft Institute of InformationIT Education & Training4. 状态栏 使用window.status=“”设置状态栏信息；5. 时间间隔和暂停 所谓暂停，是在指定的毫秒数后执行指定的代码。时间间隔是指反复执行指定的代码，每次执行之间等待指定的毫秒数。 （1）使用setTimeout实现暂停 setTimeout(“alert(hello

41、)”,3000)； 或 setTimeout(函数名，3000);Neusoft Institute of InformationIT Education & Training function sayHello() alert(hello); 第一个参数使用函数指针或引用，例如 setTimeout(sayHello,3000); 若有参数，则必须 setTimeout(function()sayHello(1,2);,3000); 调用setTimeout时，会创建一个数字暂停ID，要取消可使用clearTimeout，并把暂停ID传给它 var tid= setTimeout(sayHe

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

43、clearInterval(sid); Neusoft Institute of InformationIT Education & Training6. 历史 后退： window.history.go（-1）; 后退一页 与此类推 window.history.go(-2)；后退两页 前进 window.history.go(1); 也可用： window.history.back(); window.history.forward();Neusoft Institute of InformationIT Education & Training三、document对象 这个对象比较独特，

44、它既属于BOM，又属于DOM。1. document对象集合集合集合说明说明anchors页面中所有锚的集合（由表示）applets页面中所有applet的集合embeds页面中所有潜入对象的集合（由标签表示forms页面中所有表单的集合images页面中所有图像的集合links页面中所有链接的集合（由表示）Neusoft Institute of InformationIT Education & Training例如： 要访问body中的img图像，可用 document.images“imgHome” 访问表单中的输入框 document.forms“data”.txtEmail Neu

45、soft Institute of InformationIT Education & Training 这时这些对象的所有特性都变成了该对象的属性，可以进行设置或读取，例如： function showMessage() alert(document.imagesimgHome.src); alert(document.formsdata.txtEmail.value); document.imagesimgHome.src=pop.gif; document.formsdata.txtEmail.value = 这是测试一下; Neusoft Institute of Informatio

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

47、= URL 属性 例： 重新载入 location.reload()；/重新从缓存中载入页面 location.reload(true); /重新从服务器载入页面清空网页 location.href=“about:blank”; Neusoft Institute of InformationIT Education & Training五、frame对象 1. 框架实例：Neusoft Institute of InformationIT Education & Training2. 框架的使用 （1）创建普通的XHTML网页； （2）创建框架集文档 在框架集文档也是XHTML页面，在页面中

48、指示网页浏览器将窗口分为几个框架，并指定每一框架应显示哪个网页。 要注意的是，框架集的XHTML所使用的DOCTYPE必须是 XHTML 1.1不支持框架！Neusoft Institute of InformationIT Education & Training 例1：在一个窗口下同时显示三个页面Neusoft Institute of InformationIT Education & Training 无标题页 Neusoft Institute of InformationIT Education & Training 框架集文档中，可以不使用body标签，必须使用标签，它有两个属性

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

50、stitute of InformationIT Education & Training 例3：框架的导航 在导航中地址栏的url是保持不变的Neusoft Institute of InformationIT Education & Training框架文件内容： 左边导航页面的内容： 淘宝网 新浪这里表示在框架showframe中显示Neusoft Institute of InformationIT Education & Training3.框架中一些特别的属性 （1）控制边框 在每个标签中，使用属性frameborder=“0”不显示，frameborder=1显示 （2）是否允许