第4章 JavaScript脚本语言

ASP网络应用程序设计（第2版）人民邮电出版社浏览器（Browser）1993年伊利诺斯大学NCSA开发了浏览器Mosaic，支持图片1994年Netscape（网景）公司成立，推出NetscapeNavigator浏览器，后改名为NetscapeCommunicator1995年支持JavaApplet1996年发明JavaScript浏览器大战1995年8月IE1.0，11月IE2.01996年IE3.01998年Windows98捆绑IE41998年底Netscape战败，被美国在线公司收购2001年WindowsXP捆绑IE62002年最高占有率达到96%Firefox1998年Netscape开放源代码2002年Mozilla1.02004年Firefox1.0浏览器分类Trident排版引擎：IEGecko排版引擎：MozillaFirefoxWebKit排版引擎：GoogleChrome、AppleSafariPresto排版引擎：OperaIE内核浏览器MyIE→MyIE2→傲游MaxthonGreenBrowser世界之窗TheWorld360安全浏览器腾讯TT搜狗浏览器第4章JavaScript脚本语言4.1JavaScript简介JavaScript是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。前身为LiveScript，由Netscape公司在1996年为Navigator2.0的应用而开发。发布前改名为JavaScript微软在IE3.0开发了JScriptJavaScript的主要特点解释性基于对象事件驱动跨平台安全性JavaScript和Java的区别1、基于对象和面向对象。2、解释和编译。3、弱变量和强变量。4、代码格式不一样。5、嵌入方式不一样。6、动态联编和静态联编。AJAX技术AsynchronousJavaScriptandXML异步JavaScript和XML是指一种创建交互式网页应用的网页开发技术。主要包含了以下几种技术基于WEB标准XHTML+CSS的表示；使用DOM（DocumentObjectModel）进行动态显示及交互；使用XML和XSLT进行数据交换及相关操作；使用XMLHttpRequest进行异步数据查询、检索；使用JavaScript将所有的东西绑定在一起。异步这个词是指AJAX应用软件与主机服务器进行联系的方式。如果使用旧模式，每当用户执行某种操作、向服务器请求获得新数据，Web浏览器就会更新当前窗口。如果使用AJAX的异步模式，浏览器就不必等用户请求操作，也不必更新整个窗口就可以显示新获取的数据。只要来回传送采用XML格式的数据，在浏览器里面运行的JavaScript代码就可以与服务器进行联系。JavaScript代码还可以把样式表加到检索到的数据上，然后在现有网页的某个部分加以显示。该技术在1998年前后得到了应用。2005年初，许多事件使得Ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通讯，如Google讨论组、Google地图、Google搜索建议、Gmail等。对Mozilla/Gecko的支持使得该技术走向成熟，变得更为易用。使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。Tiobe编程语言排行榜TIOBE编程语言社区排行榜是编程语言流行趋势的一个指标，每月更新。这份排行榜排名基于互联网上有经验的程序员、课程和第三方厂商的数量，排名使用著名的搜索引擎（诸如Google、MSN、雅虎）以及Wikipedia和YouTube进行计算。请注意这个排行榜只是反映某个编程语言的热门程度，并不能说明一门编程语言好不好，或者一门语言所编写的代码数量多少。Tiobe编程语言排行榜这个排行榜可以用来考查你的编程技能是否与时俱进，也可以在开始开发新系统时选择语言时用来进行策略性的决策。需要特别注意的是，这个排名并不反映国内编程语言的现状，相对国内，它往往显得比较超前，但它代表的趋势很有参考意义。4.2JavaScript语法概述4.2.1JavaScript语法基础1．脚本语言设定2．语句与语句块3．语句注释4．赋值与等式4.2.2JavaScript变量1．变量声明2．变量命名4.2.3JavaScript运算符4.3JavaScript流程控制4.3.1If分支语句1.常用if语句格式if(condition)statements1;[elsestatements2;]2.多分枝结构if语句格式if(condition){statements;}elseif(condition){statements;}else{statements;}4.3JavaScript流程控制4.3.2Switch分支语句1.语句格式switch(expression){caselabel1:statements1;caselabel2:statements2;……default:statementsn;}2.执行过程给定expression的值与某个标签caselabel匹配时，即执行对应的一个或多个语句statements。4.3JavaScript流程控制4.3.3For循环语句1.语句格式for(initialization;test;increment){statements;}2.for循环示例for(counter=1;counter101;counter++){document.write(Thisislinenumber+counter+br);}4.3JavaScript流程控制4.3.4While循环语句语句格式：while(expression){statements;}4.3.5Do-While循环语句语句格式：do{statements;}while(expression);4.3.6break、continue语句4.4JavaScript对象4.4.1Array对象Array对象可用来创建任何数据类型的数组。创建Array对象的语法分别为：objectName=newArray()objectName=newArray(size)objectName=newArray(element0,element1,...)例如：myArray=newArray(4)例如：myArray=newArray(0,1,2,3,4)或者：varmyArray=[0,1,2,3,4]JavaScript允许创建一位数组或二维数组。4.4JavaScript对象4.4.2Date对象1.Date对象的创建objectName=newDate()2.Date对象常用方法getYear（取得年份）getMonth（取得月份，其值为：0~11）getDate（取得日期，其值为：1~31）getDay（取得星期几，其值为：0~6）getHours（取得小时数，其值为：0~23）getMinutes（取得分钟数，其值为：0~59）4.4JavaScript对象4.4.3Math对象Math对象用来提供编程中所需的基本数学函数和一些常量，不需要创建即可应用。Math对象常用方法：Math.absMath.floorMath.maxMath.minMath.sqrtMath.randomMath.round4.5JavaScript函数JavaScript普遍采用函数来执行各种操作任务，并返回运行结果。利用函数可将若干操作语句合并在一个名称之下，然后通过调用该名称并给其传递所需的参数来灵活地执行这些操作，从而简化整个程序的代码。JavaScript允许用户创建自定义函数并在需要的地方加以调用。一个自定义函数由一个function语句和一个JavaScript语句块组成。函数定义语法格式：function函数名(参数1[,参数2,…]){函数体（语句块）}4.5JavaScript函数函数定义与应用示例：scriptlanguage=JavaScriptfunctionfactorial(number){vartemp=1;for(varicount=1;icount=number;icount++){temp=temp*icount;}returntemp;}document.write(10的阶乘是：+factorial(10)+br);/script4.6JavaScript与DOM4.6.1DOM技术编程DOM技术可用来表示各种HTML文档元素以及有关的浏览器信息。W3C制定的DOM对象及其事件，多数情况下可通过JavaScript语言编程来更好地操纵。4.6.2DOM与表单验证设计优秀的Web表单通常包含客户端的JavaScript脚本程序，以便在将表单数据发送到Web服务器之前验证客户的输入。一般说来，在客户端尽可能多地验证表单数据将会有许多益处，除了能尽快提醒客户存在输入错误外，客户端验证更能提高响应速度并减少服务器和网络的负担。4.7JavaScript与DHTML4.7.1DHTML简介DHTML并不是一种新的语言，而是将HTML、CSS和客户端脚本代码集成在一起，使网页产生动态显示效果的技术。这里的HTML是指网页中的各种元素，这些元素及其CSS样式是可以被脚本代码动态操纵的对象。运用JavaScript语言编程，可显示和隐藏页面中指定的内容、修改网页元素的显示样式，激活特定页面元素并对某些元素进行特殊定位。所有这些功能均可由浏览器完成而无需请求Web服务器，同时也无需重新装载网页。4.7JavaScript与DHTML4.7.2DHTML举例