第3章web开发中客户端技术

3章WebJavaScript技术对页面进行控制，与服务端进行通信等。常用的客户HTML、CSS、DOM、JavaScript、AJAX等。读者通过学习这些客户端技术，可以很容易地编写具有丰富用户体验的Web程序。本章将主要介绍JavaScript的基本功能，同时还涉及到了CSS、AJAX等技术。本章的主要内容如下：DOMNetBeans、Dreamweaver、VisualStudio2008IDEJavaScript程序上各有千IDEJavaScript，读者可以在实际项目中根据需要和实际情况选择适合自己的JavaScriptIDE。MyEclipse中使用MyEclipseJavaIDE。MyEclipseJavaEE的开发，也同时点，如图3.1所示。单击【Next】按钮，进入下一步操作。在【Filename】文本框中输入一个文件名（不用带文件扩展名），单击【Finish】按钮建立一个新的JavaScript程序文件。MyEclipseJavaScriptJavaScript的内置对象，如window、等，在输入“.”后，都可以列出这些对象的内部成员。如在输入“window.”后，就会出现如图3.2所示的成员列表。 图3.1新建JavaScript文 图3.2window对象的成员列EclipseIDEforJavaEEEclipseIDEforJavaEEJavaEEEclipse。这个插件的功能从总体来说，没SourceFile】节点3.3所示。单击【Next】按钮，进入下一步操作。在【Filename】文本框中输入一个文件名（不用带文件扩展名），单击【Finish】按钮建立一个新的JavaScript程序文件。EclipseIDEforJavaEE中的JavaScript编辑器和MyEclipse中的JavaScript编辑器类似，只是更加智能一点。如图3.4所示列出了String对象（其他类型的对象，如Object也可以）图3.3新建JavaScript程序文 图3.4列出String对象成NetBeans中使用NetBeansSunJavaIDE（NetBeansPHP、C++等）。NetBeansJavaScript的支持也非常好，笔者感觉NetBeansJavaScriptJavaIDE更加智能。因为它不仅可以列出对象Web工程，在弹出的快捷菜单框中【Web】选项，在【FileTypes】列认值，也可以在【FileName钮建立一个JavaScript文件。

3.5NetBeans中建立一JavaScript程序文览器，如图3.6所示。3.6String对象的成员和支持这些成员的JavaScript3IDE外Dreamweaver来编辑JavaScriptDreaweaverJavaScript编辑器除了可以使关键字变色外，其他的功能和记事本差不多。因此，单纯使用Dreamweaver来编辑JavaScript程序并不是可取的。JavaScriptJava的编辑JavaScriptVisualStudio2008JavaScript编辑器来编JavaScript程序。VisualStudio2008JavaScriptNetBeans中的JavaScriptNetBeans中可以指明对象成员所适合的浏览VisualStudio2008JavaScript编辑器中NetBeans的这些功能。VisualStudio2008JavaScript代码时，就会自动列出当前可能输入的内容，如面曾定义的JavaScript变量、JavaScript的内置对象等，如图3.7所示。MyEclipseEclipseIDEforJavaEE中通过执行【ContentAssist】命令（快捷键）也可以显示当前可能输入的内容（VisualStudio2008JavaScript编辑器类似）。读者可以选择【Window】|【Preferences】命令，打开【Preferences】框。选择框左侧的【General】|【Keys】节点，在其右侧的列表中找到【ContentAssist】选项，并在下面的图3.7VisualStudio2008的JavaScript编辑 图3.8设置【ContentAssist】命令的快捷本节将介绍JavaScript的基本语法，内容包括JavaScript的基本数据类型、类型，以及类型之间的转换。在JavaScript中还经常会使用到函数和类，因此，本节还介绍了函实例：编写第一个JavaScript程序<!--<!--greet.html--<!--JavaScript代码<script//由按钮单击事件调用的函function{varname //得到【name】文如果找到【name】文本 o"+ //显 }用于输入消息的文本<inputtype="text"id="name"<!--调用greet方法的按钮<inputtype="button"value="Greet"JavaScriptHTMLJavaScript代码写//////显示问候语JavaScript函function{varname //得到【name】文本如果找到【name】文本 o"+ //显 }IEFirefox3中将无法正常工作，只有在Firefox2中可以正常运行。 的Web服务器（如IIS、Apache等）来运行本章提供的例子。变namename=age=//定义name变//定义age变//显示name变量//varvarproduct自行车var关键字定product变//product变量的虽然这两种定义变量的方法类似，但使用var来定义变量会有一些不同，如在MyEclipse中通过“ContentAssistvar来寻找这些变var来定义变量，这些变量将不会在列表框中显示。因此，笔者建议使varvarp1abcp2 //定义两个变量，中间使用逗JavaScript是弱类型语言，因此，在第一次为变量赋值时，JavaScript解析器就会为变量创建一个相应类型的值，如为p1创建一个字符串值，为p2创建一个整型的值。与varvarp="abc";p=//当前值类型//当前值类型// 变量名需要遵循如下两条JavaScript有5种原始类型，即Undefined、Null、Boolean、Number和String。每一种JavaScripttypeof运算符来获得typeof来判断一个变量是否属于原始类型，以及属于哪一个原始variValue=varsValue字符串";alert(typeofiValue);alert(typeofsValue);

定义整型变定义字符串变原始类型中的两个。typeof运算符可以返回如下5个值中的一个：下面就分别介绍上面的5种返回值。UndefinedUndefinedundefinedvar定义的变量是否为undefined。需要编写如下的代码：alert(typeofalert(typeof if(typeofabcundefined")alert("abc未定义");typeofundefined的字符串形式，不能使用如下的代码来判断abc是否为Undefined类型。////if(typeofabcundefined)alert("abc未定义");如果变量是使用关键字var来定义的，并且未初始化，这个变量的初始值就是varvar//name变//if(name==undefined)varvar//name变//if(typeofnameundefined")alert("name未初始化");注意：varif(name=undefined)形式判断变量类型是否为以用1表示true，0表示false，如下面代码所示：varvarbYes=true;varbNo=false;//定义bYes变//定义bNo变显示bYes变//显示bNo变if(bYes==alert("bYes的值是if(bNo==0)alert("bNo的值是Number类NumberJavaScript32位整数，也可以表示64位的浮点数。如下面的代码了一个存放整数值的变量，这个变量的值是varvar须以0x开头，如下面代码所示：variOctalNum=variHexNum=显示十进制数显示十进制数varfNum1=23.0;varvarfNum1=23.0;varfNum2=12.45;如果表示的浮点数非常大，也可以采用科学来表示浮点数，如，可以将这个数表示成4.3245*10^8。在科学中，使用e或E表示10^，因此，可以使用varvarfNum=////显表也可以用科学表示非常小的数，如0. variNum5.67e- // //5.67e-JavaScript默认会将具有6个或6个以上前导0的浮点数自动用科学表示。3.1Number类型的特殊特殊值含义表示某个值是否可以被转换Number类型的值，可以使isNaN函数来判为true，这说明“12”可以被转换Number类型的值，而“12a”无法转（"0x12a"）返回false。这个值不String类型是JavaScript中唯一没有固定大小的原始类型。它可以0个或的UCS2编码的字符（UCS2Unicode编码，Unicode编码是一种国际通用varvarsName1未来varsName2希望定义字符串变定义字符串变varvarsName聪慧定义字符串变StringUCS21，如中文的每一个汉字的长度是1。如果要以字节为单位获得字符串的长度，可以编写如下的////StringprototypeString对象添加新方Stotype.lenB=function{//将每一个中文替换成}varsName="a聪慧b"; //定义包含中文和英文的字符串变量sName //显示6String（Stringstring原始类型的对象表示JavaScript中有一些特殊的符号，如果这些特殊的符号要想在字符串中表示的话，就需要使用如表3.2所示的转义符号。3.2String类型中的转义符 String类型的值。任何类型的变量toString方法，通过这个方法，可以将相应类型的值转换成字符串，如下面的代varvariNum=varsStr=iNum.toString();//定义整型变//将整数转换成字符//toString方法仍然以十进制输出这些数，varvariOctalNum 定义八进制整variHexNum=0xF1; //定义十六进制整数varsOctalNum=iOctalNum.toString();//sOctalNum的值是229varsHexNum=iHexNum.toString(); //sHexNum的值是241 //显示229 //variNum=JavaScriptparseInt和值。使用parseInt函数的示例代码如下：====parseInt函数的基模式，将二进制、八进制、十六进制或其他进制的字符串转换成整数。基是由parseInt方法的第2个参数指定的，代码如下：===parseFloatparseIntparseFloat函数所转换的0xAB，parseFloat0。下面的代码是一个使用parseFloat函数的例子。======JavaScript中还可以使用强制类型转换来处理变量值的类型。下面是JavaScript支持的3种强制类型转换。//Boolean类varb1=Boolean("");varb2=Boolean("abc");varb3=Boolean(100);varb4=Boolean(0);varb5=Boolean(null);varb6=Boolean(new

//true（非空//true（非0数都返Number()parseInt()parseFloat()Number()转换的是整个值，而不是部分“12ab”，使用parseInt()转换后返回12，而使用Number()转换后返回NaN。下面的代码演示了Number()强制类型转换的各种情况。n1成Number类=======Number(newString()3toString方法唯一不同的是可以将null和undefined值强制转换成相应的字符串（"null"和"undefined"）而不错误，如===函数与函数调函数是JavaScript中最重要的技术之一。函数需要使用关键字function来，函数functionfunctionfunName(arg0,arg1,{}////定义并实现一JavaScript函function{alert("} 中的函数没有返回类型，但也可以return语句来返回值，代

3.9greet函数弹出的警告//求n1和n2的 functionfunctionsum(n1,{returnn1+}n1n2varvariSum=sum(12,22);//1222的functionfunction{}fun1覆盖了上一fun1functionfun1(){} 在JavaScript中，函数还可以使用arguments对象实现动态参数，也就是在函数时arguments对象来获得当前函数的参数值，如下面function{varn=//arguments对象中取出sum函数的参数值，并将for(vari=0;i<arguments.length;{n }return}alert(sum(-JavaScriptFunction类来建立任何的函数，使用Function类建立函数的语法如下： varfnSum=new varfnSum=newFunction("n1","n2","returnn1+varfunName=newFunction(arg1,arg2,...,argN,String、Number等。在创建对象时，要使用new关键字，如下面的代码创建了一个数组varaValues=newArray();aValues[0]="v1";aValues[1]=aValues[2]=

定义一个数组变varvaraValuesnew //用省略括号的方式定义一个数组变JavaScript对象的属性可以动态加入，因此，可以使用下面的代码来创建一个对象，并调用其中的study方法。varoStudent=newoStudent.id=定义id属oStudent.xm= 定义xm属oStudent.age=定义age属//study方oStudent.study={alert(this.xm开始学习 ////Student对象的工厂函functioncreateStudent(id,xm,{varoStudent=newObject;oStudent.id=id;oStudent.xm=xm;oStudent.age=age;oStudent.study=定义id属性定义xm属性定义age属性{alert(this.xm开始学习return //oStudent对}varvaroStudent1=createStudent('02', ',varoStudent2=createStudent('03','bill',//使用createStudent函数创建oStudent2对象 //调用oStudent1对象的study方法 //调用oStudent2对象的study方法虽然上面的代码可以方便地建立Student对象，但是每次建立Student对象时，都要重新创study方法。实际上，也可以使多个对象可以共享同一个study函数，如下面的代码////多个对象共享study方function{alert(this.xm开始学习}Student对象的工厂函数，可以共study方functioncreateStudent(id,xm,{varoStudent=newObject;oStudent.id=id; oStudent.age= oStudent.study=study;return 定义id属xm属性返回oStudent对象}////多个对象共享study方function{alert(this.xm开始学习}//Student类的构造方functionStudent(id,xm,{this.id=id;this.xm=xm;this.age=age;this.study=study;//id属//xm属//age属//}varoStudent1=newStudent('10','Mike',//oStudent1对varoStudent2=newStudent('20', ',//使用构造方法创建oStudent2对象 //调用oStudent1对象的study方法 //调用oStudent2对象的study方Student函数内部建立对象，而是直接使用this来代表当前的对象实例。实际上，Student函数就是Student类prototypeprototype属性看成是创建新对象所依赖性和方法），如下面的代码使用原型方式重写了Student类。////建立一个空的构function{}//prototypeStudent类添加属性Stotype.id='12';Stotype.xm='bill';Stotype.age=20;//prototypeStudent类添加方Stotype.study={alert(this.xm开始学习varoStudent=newStudent();String类添加一个可以获得字节长度的lenB方法Stotype.lenBStotype.lenB=function{//将每一个中文替换成}vars="超人 //定义一个包含中文和英文的字符串变 //在本节将介绍一些关于JavaScript的高级技术，如操作HTML的DOM、JavaScript的DOM技术概套API，使开发人员可以用面向对象的方式来处理这些文档。对于XML文档来说，有专在后面的内容中，如果不特别说明，DOM指的都是HTMLDOM。DOMHTML语言中的各个元素（div、form等），从而可以很DOM的对象实际如果要直接操作HTML文档，可以使用Element属性，如下面代码所示：varvaroHtml. varvaroHead=varoBody=//head对//body对firstChildlastChildchildNodes属性来获得同varvaroHead=oHtml.childNodes[0];varoBody=//head对//body对括元素本身和不包括元素本身的HTML代码，代码如下： //显示包括 //显示不包括 <script//显示 function{varoHtml varoHead=//Html对//Head对//outerHTML属性的//innerHTML属性的}//显示 function{varoHtml varoBody=oHtml.childNodes[1];//得到body对象 //显示outerHTML属性值 //显示innerHTML属性}<inputtype="buttononclick="showHeadvalue="容<inputtype="buttononclick="showBodyvalue="容的的内容的框，如图3.10所示。在关闭图3.10所示的框后，又会弹出如图3.11所示的显示innerHTML属性值的DOMHTML图3.10outerHTML属性的 图3.11innerHTML属性的这3种方法也就是HTML的3个方法：geementById、geementByName和geementById是这3个方法中最简单的一个，这个方法可以根据HTML元素的idHTMLHTML文档中，id属性值是唯一的，也就是说，没有两个HTML元素的id属性值是相同的。假设有如下的HTML代码：<inputtype="text"id=在其中有一个id值为“my_test”的文本框。现在通过geementById方法可以使用varvaroText oText.value小超人3.12 这个方法可以通过HTML元素的name属性获得相应的HTML元素集合HTMLnamegeementsByName方法有可能得到多个相同name属性值的HTML元素。假设有如下的HTML文档：<!--5个文本框<inputtype="text"id="text"/><inputtype="text"id="text"/><inputtype="text"id="text"/><inputtype="text"id="text"/><inputtype="text"id="text"/>varvaroTexts ementsByName("text");//获得一个文本框对5个文本框赋for(vari=0;i<oTexts.length;i++)oTexts[i].value=i;图3.12用DOM技术修改文本框中的 图3.13用DOM技术修改多个文本框的内varvaroInputs ");////循环Inputtypefor(vari=0;i<oInputs.length;i++)上面的代码可获得当前HTML文档内所有的<input>。如果想获得所有的 varoAllElements实例：图像自动切JavaScript的定时器来按照一定的时间间隔更新<img>标签中的src属性。JavaScript中的定时器可通过setInterval函数实现，代码如下： 其中第一个参数是定时器要调用的函数名（带括号），interval表示时间间隔，单位是35jpg图像文件，也可以使用随书光盘中的jpg图像文件，将这些图像文件放到WebRoot\images中，并取名为01.jpg、02.jpg、...、05.jpg，然后编写下面的代码：<title>自动切换图像<scripttype="text/javascript">varimages=['01.jpg','02.jpg','03.jpg','04.jpg',vari //装载图像文件（定时器调用function{//当显5个图像文件时，再1个图像开始循if(i==i=varoImage //得到ImgvaroLabel //oImage.src='../images/'+//为 oLabel.innerText //显示当前的图像}当前图像名：<label<imgsrc="../images/01.jpg"id="image"width="320"height=<script<scriptvaroLabel //oLabel.innerText=3loadImage函数来装载图像文件，并显示要在初始化时为<label>赋值，就要将JavaScript代码放到<label>的后面，在运行这段代码后，显示的效果如图3.14所示。3.14自动切换图正则表达“i”开头的字符串，可以使用正则表达式“^i\w*JavaScript中使用以下两种方式定varvarreExp=new//2个参数是一些控制正则表达式的指令。在默认情况下，正则表达式是varvarreExpnewRegExp("abc //varvarreg //使用两个斜杠来定义正则表达式变varreg=

////varvarreg1 ab结尾，中间是一个单词字varvarreg1=/a\wb/gi;vars=alert(s.replace(reg1ok"));//使用"ok"来替换所有满足条件的子串，替换结果正则表达式经常被用来进行客户端验证，如号、E-mail等，如下面是验证号码和E-mail的代码：varvarregPhone=/^0\d{2,3}\-varreg=验验证E-mail的正则表面可跟两位或三位数字，号是7位或8位的数字。E-mail的规则只有如下两种：E-mail的正则表达式中的“?01次，“+1次，“*”0或多次。由于“.”在正则表达式中有特殊含义，因此，使用转义符“\.”来表实例：表格排占用等问题。但如果使用JavaScript对表格进行排序，这些问题就会迎刃而解。须用sort方法的第二种形式。ort在这个比较函数中指定。在本节中将采用比较函数对表格进行排序。假设有如下的表格代码：<table<tableborder="1"id=<th>序号 <td>超人 产生比较函数的函 {returnfunctioncompare(tr1,{varv1=//获得上一个单元varv2=//获得下一个单元if(iCol=={v1v2时返回-1if(parseInt(v1)>parseInt(v2))return-1;elseif(parseInt(v1)<parseInt(v2))return1;return} {v1v21，为降序if(v1>v2)returnv1v2时返回-1elseif(v1<v2)return-1;v1v2return}} 排序表格的函function{varoTable varoTBody= varaRows= varaTRs=new 存aRows中的行//循环将 for(vari=0;i<aRows.length;{} varoFragment Fragment();//创建一个文档碎for(vari=0;i<aTRs.length;{ //向文档碎片中加入每一};//删除原来表中的数据，并添加新的已排序后的数}图3.15按升序排序的结CSSCSSCascadingStyleSheet（层叠样式化表单）的简称，是一种格式化网页的语言。这是由W3C（WorldWideWebConsortium）为了弥补HTML在样式编排上的不足而很难，而CSS的出现解决了这个问题，它专门用于网页的样式设置，使网页内容和样CSS的基本语 其格式分为两部分：选择器（Selector）和样式规则（Rule）。在上例中，H3为选择 {} {{}Style属性中定义样<bodystyle="background-color:<ared;font-size:"定义好的样式就可以了，这就是3.4.3HTML中定义样式。HTML中定义样只要它的id属性值为选择器名，就会应用这个样式，如下面的代码所示：<a " 在选择器前加实心点（.<a " <body HTMLHTML元素都会应用这个样h3{font- 下面的例子演示了如何将3.4.2节的样式放到<style>中，然后通过选择器来应用<style.bg{background-color:'#0000FF'};#link{color:red;font-size:<body<h3"在外部文件中定义样HTMLHTML页面之间，却无法共享样式，因此，CSS标准中允许将样式单独写在一个.css文件中，然后通过<link>HTML3.4.3节中的样式写在了一个style.css文件中（与html页面在同一个下），style.css文件的HTML代<!-- style.css文件<linktype="text/css"rel="stylesheet"<body<!--应用style.css文件中定义的样式<a"<h3样式的继<!--继承 的样式--<a"在上面的代码中，<a>未设置font-size样式，而其父元素<h3>设置了font-size样式，因此，<a>也会应用font-size样式。AJAXAJAXWebAJAX技术，可以实现以无刷新的方式更新HTML元素中的内容。因此，在本节将介绍一下AJAX技术的基本原理和一些常用的技巧，如通过XMLHttpRequest服务端资源，垮域以及信息传输的几种方法。AJAX概实际上，AJAX44种技术是JavaScript、CSS、DOM和XMLHttpRequest。其中前3种技术面已经讲过了，和服务端的关系却密不可分。可以说，AJAX的最，可能也是最简单的部分就是用JavaScript做出非常酷的效果，但不管多酷，使用的也只是客户端的数据。XMLHttpRequestDHTML原有的技术，并利用从服务端获HTTP请求的客户端组件。开发人员可以根据不同的情况选择以同步或异步的方式来发送HTTP请求，并获得服务端的响应消息。C/SXMLHttpRequest组件和服务端通信的方式来编写Web程序和编写C/S模式的程序的方式非常类似。在C/S程序中，客户端一般可直接运行.exe文件，界面叫做form。在更新form中控件的数据时，整个form并不据，并按照某些规则更新form中控件的数据。Web客户端程序中使XMLHttpRequest组件和上述的方法类似，通过同步或异步的方式从服务端获得相应的数据，然后使用DOM技术找到要更新的某些HTML元素（相况下，编写过基于C/S系统的开发人员会更容易适应AJAX的开发方式。注意：在本书中如未特殊指明，使用XMLHttpRequest开发Web应用程序，都只适合于IEAJAXWeb实例：使用XMLHttpRequest获得Web资码来创建一个XMLHttpRequest对象。varvar.XMLHTTP在XMLHttpRequest对象中有一个open方法，负责向服务端发送HTTP请求消息，这31HTTP请求方法（GET、POST等）2个参数是服务端的URL，第3个参数指定了XMLHttpRequest对象是以同步，还是以异步的方式发送请求消息。如果为true，表示以异步的方式发送，如果为false，表示以同步的方式发送。XMLHttpRequestsend方法负责向服务端发送数据。下面的代码演示了如何用同步的方式发送HTTP请求消息，并接收服务端的响应消息。varvarmyRequest=//XMLHTTPRequest对XMLHttpRequest对象创建成功，以同步的方式向服务端发送请求，并接收响应消if{myRequest.open("POSTurl //同步发送HTTP // //获得并显示HTTP}varvarmyRequest=//XMLHTTPRequest对XMLHttpRequest对象创建成功，以异步的方式向服务端发送请求，并接收响应消if{myRequest.onreadystatechange=function{状态4时表示响应消息成if(myRequest.readyState=={ //获得响应消息并显示这}myRequest.open("POST","/webdemo/servlet/AjaxEncode",//HTTP请求消 向服务端发送空数}由于使用异步方式发送HTTP请求后，send方立即返回，因此，不能直接在open方法后responseText属性，而要使有XMLHttpRequest对象的一个onreadystatechange方法，这个方法在XMLHttpRequest服务端资源的过程中在不同的状态调用。其中当readState的状态是4时，表示成功获得了响应实例：使用XMLHttpRequest跨域Web资为了安全起见，在默认情况下，XMLHttpRequest不允许跨域Web资源。但可以通过某些方法这些安全措施。在Firefox中，可以通过如下两步来打开跨域WebFirefox，在地址栏中输入“about:config3.16所示的配置3.16Firefox的配置项列动找到这个配置，如图3.17所示。3.17signed.applets.codebase_principal_support的配选中【signed.applets.codebase_principal_supporttrue（如果已经是true了，就继续执行下一步）。////只适用于Firefox{{//打开跨域 }catch{}}码。但在跨域时会出现一个如图3.19所示的提示框。图3.18Firefox的安全询问 图3.19IE6的安全提示单击【是(Y)】按钮后，就可以跨域了实例：AJAX3种交换数据方XMLHttpRequest组