第一章 JS、DIV和CSS

1、第第二章二章 JSJS、DIVDIV和和CSSCSS第一部分第一部分JavaScript语言语言学习目标学习目标v掌握JavaScript的基本编程思想能够创建图形用户界面v掌握基本的语法及应用v熟悉常用的变量定义、语法结构、事件以及在页面中的应用方式v掌握几种常用的技巧核心要点核心要点JavascriptJavascript介绍介绍vJavaScript是由Netscape公司开发、介于Java与HTML之间、基于对象事件驱动的编程语言。它的开发环境简单、不需要Java编译器、直接运行在Web浏览器中。JavaScript使得信息和用户之间不仅仅是一种显示和浏览的关系，而是实现了一种实时的、

2、动态的、可交式的表达能力 19.1 JavaScript19.1 JavaScript语言基础语言基础vJavaScript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它可以与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的 基本特点：基本特点： 基本特点：基本特点：v1.脚本编写语言 JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScrip

3、t同样已是一种解释性语言，它提供了一个易的开发过程。v2.基于对象的语言 JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用 基本特点：基本特点：v3.简单性 JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计。其次它的变量类型是采用弱类型，并未使用严格的数据类型。v4.安全性 JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或

4、动态交互。从而有效地防止数据的丢失。 基本特点：基本特点：v5.动态性 JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。v6.跨平台性 JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次，走遍天下”的梦想。 19.1.1 语法语法vJavaScript脚本语言同其它语言一样，有它自身的基本数据类型、表达式和算术运算符以及程序的基本框架结构。JavaScript提供了四种基本的数据类型用来处理数字和文字,

5、而变量提供存放信息的地方, 表达式则可以完成较复杂的信息处理。 1.基本数据类型基本数据类型：n3.3.四种基本的数据类型四种基本的数据类型：数值（整数和实数）、字符串型（用“”号或括起来的字符或数值）、布尔型（使True或False表示）和空值。n在JavaScript的基本类型中的数据可以是常量，也可以变量。由于JavaScript采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。 2. 变量的命名变量的命名v变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的

6、命名、变量的类型、变量的声明及其变量的作用域。vJavaScript中的变量命名同其计算机语言非常相似，这里要注意以下四点： 必须是一个有效的变量，即变量以字母开头，中间可以出现数字如test1、text2等。除下划线（）作为连字符外，变量名称不能有空格、（）、（）、（，）或其它符号。不能使用JavaScript中的关键字作为变量。在JavaScript中定义了多个类键字，这些关键是 JavaScript内部使用的，不能作为变量的名称。如Var、int、double、true不能作为变量的名称。在对变量命名时，最好把变量的意义与其代表的意思对应起来，以免出现错误。3.变量的类型变量的类型v定义

7、了一个mytest变量：var mytest;v定义了一个mytest变量, 同时赋予了它的值： Var mytest=”This is a book”;v在JavaScript中，变量可以不作声明，而在使用时再根据数据的类型来确定其变量的类型例子如下例子如下：vx=100 y=125 xy= True cost=19.5v其中x整数，y为字符串，xy为布尔型，cost为实型。 v在JavaScript中有全局变量和局部变量。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。v3.3.常量：是在程序执行过程中值保

8、持不变的变量常量：是在程序执行过程中值保持不变的变量。4.表达式表达式v在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常又用表达式来完成，可以说表达式是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等.5.函数函数v通常在进行一个复杂的程序设计时，总是将所要完成的复杂功能划分为一些相对独立的部分，每部分编写一个函数，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。然后根据需要来组合这些函数完成最终的功能。函数的定义形式如下。 Function 函数名 （参数,变元） 函数体; Return 表达式; v在函

9、数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments .Length来检查参数的个数。例如：v实例19-1 arguments .Length arguments .Length应用程序内容如下： Function function_Name(exp1,exp2,exp3,exp4) Number =function _Name.arguments.length; if (Number1） document.wrile(exp2); if (Number2) document.write(exp3

10、); if(Number3) document.write(exp4);6.注释注释v注释是在程序运行时被忽略的部分。注释是在程序运行时被忽略的部分。JavaScript JavaScript 注释有两种：注释有两种：单行注释单行注释和和多行注释多行注释。v单行注释单行注释用双反斜杠用双反斜杠“/”表示。表示。 当一行代码有当一行代码有“/”，那么，那么，“/”后面的部后面的部分将被忽略。分将被忽略。v多行注释多行注释是用是用“/ /* *”和和“* */ /”括起来的一行到多括起来的一行到多行文字。行文字。 程序执行到程序执行到“/ /* *”处，将忽略以后的所有文字，处，将忽略以后的所有文

11、字，直到出现直到出现“* */ /”为止。为止。19.1.2 运算符运算符v运算符完成操作的一系列符号，在运算符完成操作的一系列符号，在JavaScriptJavaScript中中有算术运算符，如、有算术运算符，如、- -、* *、/ /等；有比较运算符等；有比较运算符如如! !、等、等; ; 有逻辑布尔运算符如！（取反）、有逻辑布尔运算符如！（取反）、| |、|; |; 有字串运算如有字串运算如 、 等。等。v运算符分为：运算符分为：算数运算符算数运算符、比较运算符比较运算符和和布尔逻布尔逻辑运算符辑运算符三部分。三部分。1 1、算术运算符、算术运算符算数运算符分为双目运算符和单目运算符。双

12、目运算符：+（加） 、-（减）、 *（乘）、 /（除）、 %（取模） 、|（按位或）、&(按位与)、（右移）、 （右移，零填充）。单目运算符：-（取反）、（取补）、+（递加1）、-（递减1）。2 2、比较运算符、比较运算符有个比较运算符：(大于)、=(大于等于)、=(等于)、!=(不等于)3、布尔逻辑运算符、布尔逻辑运算符v!（取反)、&=（与之后赋值）、 &（逻辑与）、 |=（或之后赋值）、 |（逻辑或）、 =（异或之后赋值）、 （逻辑异或）、 ?:（三目操作符）、|（或）、=(等于)、|=(不等于)。v其中三目操作符主要格式如：操作数？结果：结果v若操作数的结果为真，则表述式的结果为结果，

13、否则为结果。19.1.3 控制和循环语句控制和循环语句v在任何一种语言中，程序控制流是必须的，它能使得整个程序减小混乱，使之顺利按其一定的方式执行。下面是JavaScript常用的程序控制流结构及语句：v1.if1.if条件语句条件语句v2.For2.For循环语句循环语句v3.while3.while循环循环v4.break4.break和和continuecontinue语句语句1.if条件语句条件语句vif（表述式） 语句段； . Else 语句段； .v功能：若表达式为true，则执行语句段；否则执行语句段。2.For2.For循环语句循环语句vfor（初始化；条件；增量） 语句集；v

14、功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体。3.while3.while循环循环vwhile（条件） 语句集；v该语句与For语句一样，当条件为真时，重复循环，否则退出循环。v4.break4.break和和continuecontinue语句语句v与C+语言相同，使用break语句使得循环从For或while中跳出，continue使得跳过循环内剩余的语句而进入下一次循环实例实例19-2 19-2 跑马灯程序内容跑马灯程序内容vvv var msg=这是一个跑马灯效果的JavaScript文档;v var interval = 100;var spacelen = 120;

15、v var space10= ; var seq=0;v function Scroll() v len = msg.length;v window.status = msg.substring(0, seq+1);v seq+;v if ( seq = len ) v seq = spacelen; 接上：接上： window.setTimeout(Scroll2();, interval ); else window.setTimeout(Scroll();, interval ); function Scroll2() var out=; for (i=1; i= len ) seq =

16、 0; ;v window.setTimeout(Scroll2();, interval );v vScroll();v19.2 表单校验表单校验v19.2.1 19.2.1 客户输入的有效性校验客户输入的有效性校验v表单的有效性检验是JavaScript一个很有用的方面。它可以用于检查一个给定的表单以及发现表单中的任何问题，比如一个空白的输入框或者一个无效的E-mail（电子邮件）地址，然后它可以通知用户并且就不会将这些错误的表单传给服务器以节省时间。另外，除此以外，对表单标签的一些修改跟其它类型的脚本是类似的。以下的例子是一个简单的表单，如下面表单所示。你可以让名字的方框留空白或者输入一

17、个电子邮件地址而没有符号，即是输入错误的内容，看看JavaScript是进行表单的有效性检验的。实例实例19-3 19-3 数据校验程序内容数据校验程序内容vvv function formCheck()接上：接上：v if (document.theform.user_name.value = )v alert(Please put in a name.);v return false;v vif(document.theform.email.value.indexOf() = -1 v| document.theform.email.value = ) v alert(Please inc

18、lude a proper email address.);v return false;vvv首先，formCheck()函数判断是否用户名字输入为空。如果为空，它也会警告用户并返回false值，这个表单也不会发送给服务器。接着formCheck()函数是判断是否Email地址输入包含一个符号或者是空的。如果没有包含符号或者是空的的任何一种情况，它就会警告用户并返回false值，这样这个表单就不会发送给服务器了。以上的任何一种错误都不会将表单发送给服务器的，直到正确填写完整个表单之后才将表单发送给服务器。n 以上程序的原理实质是获得表单中各元素的“value”，然后加上是否等于“”某些设定的

19、内容，或者说本身固有的内容（比如EMAIL的）。按此你可以加以扩充它的功能，比如完善Email的检验功能，加上判断“”后的邮件服务器的地址和一点“.”。19.2.2 创建可重用的校验代码创建可重用的校验代码v1、检查输入字符串是否为空或者全部都是空格 function isNull( str )/ 输入str if ( str = ) return true; var regu = +$; var re = new RegExp(regu); return re.test(str);/ 返回：如果全是空返 回true,否则返回false n 2、检查输入对象的值是否符合整数格式、检查输入对象的

20、值是否符合整数格式 function isInteger( str ) / str 输入的字符串 var regu = /-0,10-91,$/; return regu.test(str); / 如果通过验证返回 true,否则返回false n 3、检查输入手机号码是否正确、检查输入手机号码是否正确 function checkMobile( s ) /输入s字符串 var regu =/130-99$/; var re = new RegExp(regu); if (re.test(s) return true; else return false; /如果通过验证返回true,否则返回

21、false v4 4、检查输入对象的值是否符合、检查输入对象的值是否符合E-MailE-Mail格式格式 function isEmail( str ) /输入str的字符串 var myReg = /-_A-Za-z0-9+(_A- Za-z0-9+.)+A-Za-z0-92,3$/; if(myReg.test(str) return true; return false; /返回：如果通过验证返回true,否则返回falsev5、检查输入字符串是否只由英文字母和数字和、检查输入字符串是否只由英文字母和数字和下划线组成下划线组成 function isNumberOr_Letter( s

22、)/ 输入s字符串 var regu = 0-9a-zA-Z_+$; var re = new RegExp(regu); if (re.test(s) return true; else return false; /如果通过验证返回true,否则返回false v6 6、判断是否是日期、判断是否是日期v实例19-4 判断日期程序内容如下：v function isDate( date, fmt ) /输入：date：日期； fmt：日期格式v if (fmt=null) fmt=yyyyMMdd;v var yIndex = fmt.indexOf(yyyy);v if(yIndex=-1

23、) return false;v var year = date.substring(yIndex,yIndex+4);v var mIndex = fmt.indexOf(MM);v if(mIndex=-1) return false;v var month = date.substring(mIndex,mIndex+2);v 接上：接上：vvar dIndex = fmt.indexOf(dd);v if(dIndex=-1) return false;v var day = date.substring(dIndex,dIndex+2);vif(!isNumber(year)|yea

24、r2100 | year12 | monthgetMaxDay(year,month) | day 01) v return false;v return true;v/返回：如果通过验证返回true,否则返回falsev 接上：接上：v function getMaxDay(year,month) v if(month=4|month=6|month=9|month=11)v return 30;v if(month=2)v if(year%4=0&year%100!=0 | year%400=0)v return 29;v elsev return 28;v return 31;v19.3

25、 事件响应事件响应19.3.1 19.3.1 事件处理的基本概念事件处理的基本概念v事件是浏览器响应用户交互操作的一种机制，JavaScript的事件处理机制可以改变浏览器响应用户操作的方式，这样就开发出具有交互性，并易于使用的网页。v浏览器为了响应某个事件而进行的处理过程，叫做。事件定义了用户与页面交互时产生的各种操事件处理作，例如单击超级连接或按钮时，就产生一个单击（click）操作事件。浏览器在程序运行的大部分时间都等待交互事件的发生，并在事件发生时，自动调用事件处理函数，完成事件处理过程。 v事件不仅可以在用户交互过程中产生，而且浏览器自己的一些动作也可以产生事件，例：当载入一个页面时

26、，就会发生load事件，卸载一个页面时，就会发生unload事件等。归纳起来，必需使用的事件有三大类： 引起页面之间跳转的事件，主要是超连接事件。 事件浏览器自己引起的事件。 事件在表单内部同界面对象的交互19.3.2 JavaScript事件处理器事件处理器v1.onblur1.onblur事件事件v当一个对象失去焦点时，blur事件被触发。 2.onchange 2.onchange 事件事件v发生在文本输入区的内容被更改，然后焦点从文本输入区移走之后。捕捉此事件主要用于实时检测输入的有效性，或者立刻改变文档内容。 3.onclick 3.onclick 事件事件v发生在对象被单击的时候。

27、单击是指鼠标停留在对象上，按下鼠标键，没有移动鼠标而放开鼠标键这一个完整的过程。 4.onfocus 4.onfocus 事件事件v发生在一个对象得到焦点的时候。 5.onload 5.onload 事件事件v发生在文档全部下载完毕的时候。全部下载完毕意味着不但 HTML 文件，而且包含的图片，插件，控件，小程序等全部内容都下载完毕。本事件是 window 的事件，但是在 HTML 中指定事件处理程序的时候，我们是把它写在标记中的。 6.onmouseout 6.onmouseout 事件事件v发生在鼠标离开对象的时候。参考 onmouseover 事件。7.onmouseover 7.onm

28、ouseover 事件事件v发生在鼠标进入对象范围的时候。这个事件和 onmouseout 事件，再加上图片的预读，就可以做到当鼠标移到图像连接上，图像更改的效果了。有时我们看到，在指向一个连接时，状态栏上不显示地址，而显示其它的资料，看起来这些资料是可以随时更改的。它们是这样做出来的： 19.3.3 出错处理出错处理v1.onerror1.onerror事件处理函数事件处理函数 它是第一个用来协助JavaScript处理错误的机制。页面上出现异常时，error事件便在window对象上触发。实例实例19-5 19-5 错误事件程序内容错误事件程序内容vv v onerror例子v v win

29、dow.onerror=function()v alert(发生错误！);v v vvv在上述代码中，在页面载入时尝试调用不存在的函数，此时会引发一个异常。弹出“发生错误”的错误信息。但是，浏览器的错误信息也显示出来了，如何在浏览器上隐藏它呢，只需onerror方法返回一个true即可。v v window.onerror=function()v alert(“发生错误！”);v returntrue;v v 2.取出错误信息取出错误信息vonerror处理函数提供了三种信息来确定错误确切的性质： i）错误信息对于给定错误，浏览器会显示同样的信息； ii）URL在哪个文件中发生了错误；v行号给

30、定URL中发生错误的行号n 访问方法见如下例子访问方法见如下例子：vvwindow.onerror=function(sMessage,sUrl,sLine)v alert(发生错误！ n+sMessage+nURL:+sUrl+nLineNumber:+sLine);v returntrue;v v 3.处理语法错误处理语法错误n onerror还能处理语法错误。但有一点必须注意，事件处理函数必须是页面中第一个出现的代码，因为如果语法错误出现在设置事件处理函数之前出现，事件处理函数就没有用了。v注意：语法错误会完全停止代码的执行注意：语法错误会完全停止代码的执行4.trycatch语句语句t

31、ry window.openFile1(); alert(成功调用openFile1方法);catch(exception) alert(发生异常！);finally alert(try.catch测试结束!);19.3.4 图像装入出错处理图像装入出错处理vwindow对象并非唯一支持onerror事件处理函数的对象，它对图像对象也提供支持。当一个图像由于文件不存在等原因未能成功载入时，error事件便在这个图像上触发。让我们来看一个例子： v上例直接在HTML中分配onerror事件处理函数。当然也可以通过脚本来分配事件处理函数，在设置图像的src特性前，必须等待页面完全载入，代码如下：实

32、例实例19-6 图像装入出错程序内容图像装入出错程序内容 vv Image错误测试v v functionhandleLoad()v document.images0.onerror=function()v alert(载入图片时发生错误！);v ;v document.images0.src=amigo.jpg;v v 接上：接上：vvvvv注意：与window对象的onerror事件处理函数不同， image的onerror事件任何的额外信息的参数。19.3.5 计数器事件计数器事件v下面的代码使用下面的代码使用JavaScript代码完成计数器的代码完成计数器的功能：功能：v实例实例19

33、-7 19-7 计数器程序内容如下计数器程序内容如下：vv var seconds = 10;/记数时间v var handle;/事件柄v /开始记数器v function startTimer() v handle = setInterval(timer(),1000);v v /结束记数器接上：接上：v function stopTimer() v clearInterval(handle);v seconds = 10;v document.all.redhacker.innerHTML = 10秒钟倒 计时完成;v v /计数器v function timer() v seconds

34、 -= 1;v document.all.redhacker.innerHTML = 您还有 v v seconds + 秒;接上：接上：v if (seconds = 0) v stopTimer();v document.reTranForm.submit();v v v /1秒后显示计数器v setTimeout(startTimer(),1000); v19.4 JavaScript的使用技巧的使用技巧19.4.1 浏览器版本检测浏览器版本检测1、检测浏览器的名称、检测浏览器的名称v不同的浏览器对JavaScript的标准支持也有不同，有时希望脚本能够在不同的浏览器上都能运行良好，这时

35、需要对浏览器进行检测，确定其名称，以针对不同的浏览器编写相应的脚本。使用navigator对象的appName属性。v比如，要检测浏览器是否为IE，可以这么做： var isIE = (navigator.appName = Microsoft Internet Explorer); document.write(is IE? + isIE);v对于FireFox，navigator对象的appName属性值为Netscape；Opera9.02的appName属性值为Opera(其更早版本可能不同)v2、检测浏览器的版本号：、检测浏览器的版本号：v随着浏览器的版本的更迭，浏览器所支持的脚本特

36、性也在变化，有时候就需要针对不同的版本编写相应的脚本，通过解析navigator对象的userAgent属性来获得浏览器的完整版本号。实例实例19-8 检测浏览器版本检测浏览器版本vfunction getIEVersonNumber()v var ua = navigator.userAgent;v var msieOffset = ua.indexOf(MSIE );v if(msieOffset = 5);v if(isIE5Min)v / perform statements for IE 5 or laterv 19.4.2 如何实现浏览器上的右键菜单如何实现浏览器上的右键菜单v实例

37、实例19-9 实现浏览器上右键菜单程序如下：实现浏览器上右键菜单程序如下： VFish Test var x, y; document.onmousemove=moveMouse; document.onmousedown=click; 接上：接上：v function moveMouse() v Layer1.style.left = event.clientX - 2;v Layer1.style.top = event.clientY - 2; v v function click() v if (event.button=2)v x = event.clientX; y = event

38、.clientY;v Layer1.style.visibility=; window.setTimeout(v showMenu();, 500); v elsev 接上：接上：vHiddenPop(); PopMenu.style.visibility=hidden; vvfunction showMenu() v PopMenu.style.left = x- 2; PopMenu.style.top = y- 2; v PopMenu.style.visibility=; HiddenPop(); v v function HiddenPop() v Layer1.style.visi

39、bility=hidden;v v 接上：接上：v 在窗口中右击一下看看出什么:) v v v v v v v 唯鱼的菜单 v click it!:) v根据上面的例子，首先要解决的问题是在怎样的情况鼠标右击不会出现IE的菜单。思路可以有两个：n 一个是将焦点移开，n 还有一个就是点在网页的什么地方不会出现右键菜单，而且会响应鼠标点击消息。响应右键消息出一个ALERT框。 响应右键消息后弹出一个新的窗口。将初始页的的焦点移开。响应右键消息后弹出一个HTML的对话框。即使用showModalDialog来开启一个HTML对话框。使用这种方式可以让右键菜单不会出现。但是有一个问题是使用使用show

40、ModalDialog开启的对话框不会向使用Window.Open开启的对话框一样可以移出屏幕所在的范围。就是说始终可以看见有一个对话框出现在屏幕上。这条路也不能走了。在Select上进行鼠标右击或左击都不会有反应。那么如果每次鼠标都点在Select上，不就不会出现浏览器的右键菜单了。 19.4.3 制作浮动广告制作浮动广告“飞舞飞舞”特效特效v要做出浮动式广告的效果并不困难，如果你有JS基础的可以自己写一个，如果不写可以到网上下载一个特效工具，按提示粘贴一下代码就成了。不过，想要真正了解它是怎样做出来的，则需要掌握一些JS知识了。下面看一个简单的浮动广告做法。v在这里，你可以设置x、y的值来

41、设定所固定层的位置，改变setTimeout(MoveLayer(AdLayer);, 20)中20的值为你希望调用MoveLayer()的时间间隔。还有要注意的是，使用的图片最好为透明背景的gif图，以使图片的背景颜色不至于遮住后面的的内容实例实例19-10 检测浏览器版本检测浏览器版本v v initAd();/载入页面后，调用函数initAd()vvv v接上：接上：vvv v v v19.4.4 “飞舞飞舞”特效特效v将下面的JavaScript代码实现了一个“飞舞”效果，在应用时加入到区就成了。v实例实例19-11 检测浏览器版本如下检测浏览器版本如下： !Begin var no

42、= 30; /设定下落字符数量 var speed = 5; /设定字符下落的速度 var ns4up = (document.layers) ? 1 : 0; var ie4up = (document.all) ? 1 : 0; /NETSCAP和IE两种不同浏览器各自进行定义接上：接上：v var s, x, y, sn, cs;v var a, r, cx, cy;v var i, doc_width = 800, doc_height = 600;v /设定字符下落区域为800*600v if (ns4up) v doc_width = self.innerWidth;v doc_h

43、eight = self.innerHeight;v else if (ie4up) v doc_width = document.body.clientWidth;v doc_height = document.body.clientHeight;v v /NETSCAP和IE两种浏览器有别 接上：接上：v x = new Array();y = new Array();v r = new Array();cx = new Array();v cy = new Array();s = 8;v for (i = 0; i no; + i) v initRain();v /定义变量数组x, y, cx, cy, sv if (ns4up)v if (i = 0)v document.write(v );v document.write(,￥);v