第03部分-JavaScript程序设计.ppt

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

1、Neusoft Institute of InformationOct 2009IT Education&Training JavaScript 程序设计入门ASP.NET 程序设计 JavaScript设计基础 授课人：代霞 Email： Tel：82878177 QQ：75085881 Neusoft Institute of InformationOct 2009IT Education&Training主体纲要第一部分 JavaScript简介第二部分 JavaScript组成第三部分 JavaScript案例演示第四部分 JavaScript编程简介第五部分 JavaScript编程

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

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

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

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

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

7、分 Java案例演示 1.一些有趣的例子；2.见案例中的JavaScript各种特效.rar 3.网络资源：http:/ 收录了很多JavaScript实现的特效；4.一个类似于Windows XP的网络操作系统界面，这也是 JavaScript与其他技术结合完成的 请用FireFox访问：http:/Neusoft Institute of InformationOct 2009IT Education&TrainingNeusoft Institute of InformationOct 2009IT Education&Training第四部分 JavaScript编程简介一、编辑软件

8、编辑JavaScript可以使用任何一种文本编辑器，例如记事本，为降低JavaScript难度，我们使用1st JavaScript Editor，由于破解不完善，智能提示必须自己手工启动 菜单：Edit Preference TextEditor IntelliSense二、调试器 使用VS.NET 2005，同样支持断点设置，F10、F11操作但有两条必须注意：Neusoft Institute of InformationOct 2009IT Education&Training1.设置IE中的Internet选项 将高级设置中的禁用脚本调试（Internet Explorer）（英文：

9、Disable Script Debugging（Internet Explorer)关闭2.在VS.NET 2005 IDE中直接运行三、JavaScript的编写形式用函数写的代码不能马上执行1.直接把JavaScript嵌入在HTML任何标签中 这里的document对象指的是当前的HTML文档Neusoft Institute of InformationOct 2009IT Education&Training2.使用JavaScript函数时，将函数定义在标签中JavaScrip可以放在任何位置Neusoft Institute of InformationOct 2009IT E

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

11、并不一定要被初始化Neusoft Institute of InformationOct 2009IT Education&Training var test;test=55;test=“hi”;二、原始类型 ECMAScript有5种原始类型（primitive type)：undefined、null、boolean、number和string。1、undefined类型 var oTemp；声明的变量未初始化时，该变量的初始值是undefined.函数（function）无明确Neusoft Institute of InformationOct 2009IT Education&Tra

12、ining2、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 num=5.0;Neusoft Institute of InformationOct 2009IT Education&Training 有一个特殊的值是NaN，表示非数（N

13、ot 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);/得到number类型Neusoft Institute of InformationOct 2009IT Ed

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

15、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 值；Neusoft Institute of InformationOct 2009IT Education&Training说明：（1）JavaScript的函数与C#

16、的方法或函数不同，function后面不需要定义返回值类型；（2）当使用多个参数时，参数间以逗号隔开；（3）JavaScript中函数的传递也是分两种，按值传递和按引用传递；2.argument对象 使用特殊对象arguments，开发者无需指出参数名，就能访问它们。例如：Neusoft Institute of InformationOct 2009IT Education&Training function SayHi()if(arguments0=bye)return;alert(arguments0);调用形式调用形式1:1:SayHi(test);调用形式调用形式2 2：SayHi(

17、test”,123);与其他语言不同，ECMAScript不会验证传递给函数的参数的个数是否相等，函数可以接受任意个数的参数（Netscape的文档最多25个），而不会引发任何错误。Neusoft Institute of InformationOct 2009IT Education&Training 还可以在函数内使用argument.length属性检测参数个数 function HowManyArgs()alert(arguments.length);利用arguments对象判断传递给函数的参数个数，即可模拟函数重载。Neusoft Institute of InformationO

18、ct 2009IT Education&Training六、事件驱动及事件处理 Event Drive：JavaScript是基于对象(object-based）的语言，基于对象的基体特征，就是采用事件驱动（event drive)事件：鼠标或键盘的动作；事件驱动：由鼠标或键盘的动作引发的一连串程序的动作叫事件驱动（event drive）事件处理程序（Event Handler）：通常由函数执行。网页中的事件一般分为鼠标事件、键盘事件及其他事件。1.一些常用的事件Neusoft Institute of InformationOct 2009IT Education&Training 表表1

19、 1 常用鼠标事件常用鼠标事件事件事件意义意义onmousedown按下鼠标键onmousemove移动鼠标onmouseout鼠标离开某一个网页对象onmouseover鼠标移动到某一个网页对象onmouseup松开鼠标键onclick单击鼠标键ondbclick双击鼠标键表表2 2 常用键盘事件常用键盘事件事件事件意义意义onkeydown按下一个键onkeyup松开一个键onkeypress按下然后松开一个键Neusoft Institute of InformationOct 2009IT Education&Training 表表3 3 其他事件其他事件事件事件意义意义onfocus

20、焦点到一个对象上onblur从一个对象失去焦点Onload载入网页文档onunLoad卸载网页文档 onselect文本框中选择了文本内容onchange文字变化或列表选项变化onerror出错onsubmit 提交表单onreset重置表单onabort中断显示图片Neusoft Institute of InformationOct 2009IT Education&Training3.用JavaScript处理事件 JavaScript语言与HTML文档相关联主要是通过“事件”，JavaScript的函数就是用于处理事件的程序，语法规则是：事件=“函数名”或 事件=“JavaScript

21、语句”例如：（1）（2）也可以定义好函数后再调用 function message()alert(hello world);Neusoft Institute of InformationOct 2009IT Education&Training4.JavaScript练习 （1）当装入HTML文档时调用LoadForm（）函数，而退出 该文档进入另一个HTML文档时则首先调用 UnLoadForm（）函数，确认后方可进入 LoadForm（）函数：提示用户“这是一个自动装载例子”UnLoadForm（）函数：提示用户“这是一个自动卸载的例子”Neusoft Institute of Info

22、rmationOct 2009IT Education&Training 无标题页 function LoadForm()alert(这是一个装载的例子);function UnLoadForm()alert(这是一个卸载的例子);测试Neusoft Institute of InformationOct 2009IT Education&Training （2）一个输入框中，当没有输入值时，提示用户：请输入！无标题页 function validate()if(user.value=)alert(请输入!);Neusoft Institute of InformationOct 2009IT

23、 Education&Training 若要验证form中提交的数据 Neusoft Institute of InformationOct 2009IT Education&TrainingJavaScript脚本为：function validate()if(document.data.user.value=)alert(wrong);return false;Neusoft Institute of InformationOct 2009IT Education&Training七、数组对象 1.JavaScript数组的定义 （1）新建一个长度为0的数组 var myArray=new

24、 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 InformationOct 2009IT Education&Training2.动态数组 JavaScript的数组的长度不是固定不变，若要增加数组的长度，只要直接赋值。例如：var myArray=new Array(1,2,3);myArray3=4;这时myArray的长度为4 如

25、果 var myArray=new Array(1,2,3);myArray4=4;则长度为5,其中myArra3的值为undefinedNeusoft Institute of InformationOct 2009IT Education&Training3.数组的常用属性和方法（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,

26、5,6);（3）join方法，连接数组，缺省为”,”例：var a=new Array(1,2,3);alert(a.join();/输出1,2,3 Neusoft Institute of InformationOct 2009IT Education&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

27、=new Array(1,2,3);alert(a1.pop();/输出3 alert(a1.length);/输出2 Neusoft Institute of InformationOct 2009IT Education&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)

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

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

30、t(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 InformationOct 2009IT 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

31、a1=new Array(1,4,2,3,5);alert(a1.sort(compare);/输出5,4,3,2,1 （11）reverse方法：将数组倒序 Neusoft Institute of InformationOct 2009IT Education&Training八、String对象主要属性和方法 例如：var myString=“This is a sample”;（1）charAt：返回字串对象在指定位置处的字符 myString.charAt(2)；/返回i（2）charCodeAt：返回字串对象在指定位置处字符的10进制的ASCII码 myString.charCod

32、eAt(2)；/返回105（3）indexOf：要查找的字串在字串对象中的位置 myString.indexOf(“is”)；/返回2（4）lastIndexOf：要查找的字串在字串对象中的最后位置 myString.lastIndexOf(“is”)；Neusoft Institute of InformationOct 2009IT Education&Training（5）substr方法：截取字串 myString.substr(10,3)；/返回sam，其中10表示位置，3表示长度（6）substring方法：截取字串 myString.substring(5,9)；/返回is a,

33、其中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 InformationOct 2009IT Education&Training（9）toLowerCase方法：变成小写字母 myString.toLowerCase()；/this is a sample（10）toUpper

34、Case方法，变成大写字母 myString.toUpperCase();/THIS IS A SAMPLE（11）prototype属性 注：JavaScript中的string没有像C#中的Trim（）方法，但可以利用prototype属性为其添加 例如，我们设计三个函数LTrim、RTrim、Trim分别剪切字串的左边多余空格、右边多余空格、左右多余空格Neusoft Institute of InformationOct 2009IT Education&Training function RTrim(str)var i=str.length-1;while(str.charAt(i)

35、=&i=0)-i;str=str.substring(0,i+1);return str;Neusoft Institute of InformationOct 2009IT 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);Neusoft Institute of InformationOct 2009IT Educ

36、ation&Training使用prototype属性为String类添加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);Neusoft Institute of Info

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

38、”,”mywindow”,”height=150,width=300,top=10,left=10,resizable=yes”);Neusoft Institute of InformationOct 2009IT Education&Training 设置值说明left Number 新创建的窗口的左坐标，不能为负topNumber 新创建的窗口的顶坐标，不能为负heightNumber 高度，不能小于100widthNumber 宽度，不能小于100resizableyes,no 是否可拖动调整大小，缺省为falsescrollable yes,no不能容纳内容时是否滚动，缺省为fals

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

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

41、何操作!Neusoft Institute of InformationOct 2009IT Education&Training4.状态栏 使用window.status=“”设置状态栏信息；5.时间间隔和暂停 所谓暂停，是在指定的毫秒数后执行指定的代码。时间间隔是指反复执行指定的代码，每次执行之间等待指定的毫秒数。（1）使用setTimeout实现暂停 setTimeout(“alert(hello)”,3000)；或 setTimeout(函数名，3000);暂停的实践效果-3秒Neusoft Institute of InformationOct 2009IT Education&Tr

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

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

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

45、合embeds页面中所有潜入对象的集合（由标签表示forms页面中所有表单的集合images页面中所有图像的集合links页面中所有链接的集合（由表示）Neusoft Institute of InformationOct 2009IT Education&Training例如：要访问body中的img图像，可用 document.images“imgHome”访问表单中的输入框 document.forms“data”.txtEmail Neusoft Institute of InformationOct 2009IT Education&Training 这时这些对象的所有特性都变成了该

46、对象的属性，可以进行设置或读取，例如：function showMessage()alert(document.imagesimgHome.src);alert(document.formsdata.txtEmail.value);document.imagesimgHome.src=pop.gif;document.formsdata.txtEmail.value=这是测试一下;document.write在第一行显示内容Neusoft Institute of InformationOct 2009IT Education&Training2.write和writeln方法 这两个方法都接

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

48、ocation.reload(true);/重新从服务器载入页面3.清空网页 location.href=“about:blank”;Neusoft Institute of InformationOct 2009IT Education&Training五、frame对象 1.框架实例：Neusoft Institute of InformationOct 2009IT Education&Training2.框架的使用 （1）创建普通的XHTML网页；（2）创建框架集文档 在框架集文档也是XHTML页面，在页面中指示网页浏览器将窗口分为几个框架，并指定每一框架应显示哪个网页。要注意的是，框

49、架集的XHTML所使用的DOCTYPE必须是 XHTML 1.1不支持框架！Neusoft Institute of InformationOct 2009IT Education&Training 例1：在一个窗口下同时显示三个页面Neusoft Institute of InformationOct 2009IT Education&Training 无标题页 Neusoft Institute of InformationOct 2009IT Education&Training 框架集文档中，可以不使用body标签，必须使用标签，它有两个属性cols和rows，cols表示按列分布网页

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