计算机JavaScript客户端验证和高级特效制作

1、第一章 JavaScript的基本语法1、为什么要学习JavaScript 为什么学习JavaScript，主要是JavaScript的两大功能表单验证和页面动态效果。2、什么是JavaScriptJavaScript前身叫做LiveScript，是由Netscape公司开发的，自从Sun公司推出著名的Java语言之后，Netscape公司引进Sun公司有关的Java的程序设计概念，将自己原有的LiveScript重新设计，并更名为JavaScript。JavaScript是一种描述语言，也是一种基于对象和事件驱动，并具有安全性能的脚本语言。使用它的目的是与Html超文本标记语言一起实现在一个

2、Web页面中连接多个对象，与Web客户实现交互。无论是在客户端还是在服务器端，JavaScript应用程序都要下载到浏览器的客户端执行，从而减轻服务器端的压力。（1）脚本基本结构JavaScript代码放置在标签对中，可以放在网页的任何位置，而且一个Html可以嵌入多个脚本。3、JavaScript的基本语法与学过的Java和C语言一样，也是一门编程语言，也包括下面几部分:变量，运算符，逻辑控制语句，注释和类型转换；(1) 变量定义变量：var count; 赋值：count = 5;“var” 用于声明变量的关键字； “count” 变量名。同时声明和赋值变量：var count = 10;

3、声明多个变量：var x, y, z = 10;变量命名规则：标识符可以由任意的大小写字母、数字、下划线组成，第一个字母必须是英文字母或下划线，即不可以是数字，而且不可以使用Javascript中关键字作为变量名。JavaScript中标识符严格区分大小写。（2）运算符运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值。根据所执行的运算，运算符可分为以下类别：算术运算符 +、-、 * 、 / 、%、+、-、-(求反)比较运算符=、!=、=、=逻辑运算符&、|、！ （3）逻辑控制语句if条件语句if(条件) /JavaScript代码;else /JavaScript代码;switch

4、多分支语句switch (表达式) case 常量1 : JavaScript语句1; break; case 常量2 : JavaScript语句2; break; . default : JavaScript语句3; for、while循环语句for(初始化; 条件; 增量) 语句集; while(条件) 语句集;（4）注释单行注释以 / 开始，以行末结束。多行注释以 /* 开始，以 */ 结束，符号 /* */ 指示中间的语句是该程序中的注释。（5）类型转换parseInt (String) 将字符串转换为整型数字 如: parseInt (“86”)将字符串“86”转换为整型值86pa

5、rseFloat(String) 将字符串转换为浮点型数字 如: parseInt (“34.45”)将字符串“34.45”转换为浮点值34.454、自定义函数JavaScript中的函数与Java中的类似。函数就是完成特定功能的一段程序代码。函数不仅能在一个或多个Html页面中被多次调用。而且能够在不同网站中应用，从而提高了代码的重用率。 创建函数 function 函数名( 参数1,参数2， ) 语句; 其中，function是定义函数的关键字，函数名命名规则也必须符合标识符命名，而且严格区分大小写。参数列表时传递给函数使用或操作的值；如果需要返回结果，请使用return语句。函数可以没有

6、任何参数，但仍然必须保留圆括号，如下所示：function 函数名() 语句; 函数的定义放在之间。示例如下：function showHello( ) var count=document.myForm.txtCount.value ; for(i=0; icount; i+) document.write(HelloWorld); 调用函数函数调用一般和表单元素的事件一起使用，调用格式为： 事件名“函数名” ;调用上述函数：第二章 DOM编程-Window对象1、DOM的介绍DOM模型定义了一套标准的方法来访问和操纵HTML文档。由此图可知，模型是一个分层结构，会使用DOM模型查找某个元素

7、。2、window对象常用的属性、方法、事件（1） 常用属性名称 说明 status 指定浏览器状态栏中显示的临时消息screen有关客户端的屏幕和显示性能的信息。history 有关客户访问过的URL的信息。location有关当前 URL 的信息。document表示浏览器窗口中的HTML文档（2） 常用方法名称 说明 alert (提示信息)显示一个带有提示信息和确定按钮的对话框confirm(提示信息“)显示一个带有提示信息、确定和取消按钮的对话框open (url,name)打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一个空白文档close

8、 ( )关闭当前窗口showModalDialog( )在一个模式窗口中显示指定的HTML文档setTimeout(函数,毫秒数) 设置定时器：经过指定毫秒值后执行某个函数（3） 常用事件 onLoad事件：在窗口或框架完成文档加载时触发open()方法：打开一个新窗口语法：open（”打开窗口的url”，”窗口名”，”窗口特征”）showModalDialog()方法：来创建一个显示HTML内容的模态对话框，默认打开一个无地址栏、菜单栏、滚动条的对话框。a.在父窗口之上，必须关子窗口，才能访问父窗口。否则，不能访问父窗口。b.showModalDialog()方法用而且可以通过window.

9、returnValue向打开对话框的窗口返回信息。而且此方法打开的窗口会始终保持输入焦点，除非对话框被关闭，否则用户无法切换到主窗口。setTimeout的用法语法：setTimeout（“调用的函数”,”定时的时间”）：定时器函数，表示每隔多少时间，循环调用某个函数。 例：var myTimesetTimeout( “disptime( )”, 1000 ) ;setTimeout（）方法的返回值是一个唯一的数值，这个数值有什么作用呢？如果你想要终止setTimeout（）方法的执行，那就必须使用clearTimeout()方法来终止，而使用这个方法的时候，系统必须知道，你到底终止哪一个se

10、tTimeout（）方法，这样clearTimeout()方法就需要一个参数，这个参数就是setTimeout（）方法的返回值，用这个数值来唯一确定结束哪一个setTimeout（）方法。3. Date对象Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫秒数。语法：var 日期对象 = new Date (年、月、日等参数)；其中，日期对象是存储Date对象的变量。参数可以使形式：没有参数，即如果没有指定参数，则表示党情日期和时间，例如：var today = new Date( ) 字符长一格式“MM DD,YYYY,hh:mm:ss”来表示日期和时间，

11、例如：var mydate=new Date(July 29, 2007,10:30:00 ) Date对象的方法很重要，set和get方法。下去自己总结，一定要掌握。4、history对象History对象是通过JavaScript运行时引擎自动创建的，并且由一系列URLs组成的。常用方法见表2-6.名称 说明 back( )加载 History 列表中的上一个 URL。forward( )加载 History 列表中的下一个 URL。go(url or number)加载 History 列表中的一个 URL，或要求浏览器移动指定的页面数。back ( )方法相当于后退按钮；forward

12、 ( ) 方法相当于前进按钮；go (1)代表前进1页，等价于forward( )方法；go(-1) 代表后退1页，等价于back( )方法。5、location对象Location对象是通过JavaScript运行时引擎自动创建的，此对象相当于IE浏览器中的地址栏，包含了关于当前URL地址的信息，提供了一种重新加载窗口当前URL的方法。名称 说明 host设置或检索位置或 URL 的主机名和端口号hostname设置或检索位置或 URL 的主机名部分href设置或检索完整的 URL 字符串Location对象方法见表。名称说明assign(url)加载 URL 指定的新的 HTML 文档。r

13、eload()重新加载当前页replace(url) 通过加载 URL 指定的文档来替换当前文档本章特效：动态时钟的显示；第三章 DOM编程-document对象1、document对象的常用属性和方法（1）document对象的属性Document对象的属性包括对应HTML的标签的一些属性和描述网页文档自身的一些属性，对标签相关的属性有：文本颜色，背景色、超链接等等。下面简单罗列一些：名 称 说 明bgColor设置或检索 Document 对象的背景色fgColor设置前景色即文本颜色linkColor未点击过的链接颜色alinkColor激活链接的颜色vlinkColor已点击过的链接的

14、颜色（2）document对象的方法document方法很多，不过我们这章主要讲述最重要的两个。表3-2 document对象方法名称 说明getElementByID( )根据HTML元素指定的ID，获得唯一的一个HTML元素。如：访问DIV层对象、图片Img对象getElementsByName( )根据HTML元素指定的name，获得相同名称的一组元素。如：访问表单元素(全选功能)当访问某一特定元素尽量用标准的getElementById()，访问重复姓名时用getElementsByName()。Document对象中并没有特别的事件，它所支持的事件都是通用的，在document对象上

15、讲解这些事件处理不具有典型性，大家只要掌握了某个事件在一个对象上的处理方式，也就自然掌握了在其它对象上处理此事件的方法，所以对document对象的事件不再专门介绍。本章特效：1、制作浮动的广告图片实现思路：在页面中插入层，然后在层中插入图片。编写脚本：1、使用getElementByID( )方法获取层对象2、捕获鼠标滚动事件，改变层对象的位置坐标注意事项：常见的页面坐标的介绍top:指定元素的上边界位置。pixelTop:设置或返回元素的上边界。left:指定元素的左边界位置。scrolltop:页面滚动的高度2、制作带关闭按钮的广告图片实现思路：在页面中插入层，在层中插入图片。编写脚本：

16、1、使用getElementById( )方法获得层对象。2、设置层的样式style的显示属性display=none。把实现过程编成函数，有层的单击鼠标事件（OnClick）触发。3、制作带关闭按钮的浮动窗口分析问题：让关闭图标所在的层像浮动窗口一样，也跟随滚动条同步滚动。4、制作实现全选效果分析问题：1、复选框是否选中的属性是哪个？checked属性 2、写代码逐个复选框设置为true，有没有更好的办法？ 解决办法: 使用复选框数组，通过循环给checked属性赋值实现思路：创建一组同名的复选框编写脚本1、使用getElementsByName( )方法获得一组同名的复选框对象。2、通过循

17、环来改变复选框是否被选中属性checked的值。第四章 CSS样式特效1、CSS样式表的相关知识总结CSS（CasCading Style Sheets）的缩写，译作层叠样式表，它的作用是定义HTML元素的显示形式，是一种格式化网页内容的技术。（1）CSS语法CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。 基本格式如下：selector property: value （选择符 属性：值） 选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE，你可以通过此方法定义它的属性和值，属性和值要用冒号

18、隔开，如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开。用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。（2）CSS样式表加入方式行内样式表此方法是直接在标签内部定义，用这种方法，可以简单的对页面中的任何标签单独定义样式，不过此种方法会使HTML文档代码凌乱、臃肿、不易读。内嵌样式表内嵌样式表也称为嵌入样式表，它放置在标签内，并且以开始，以结束，这些定义的样式可以应用到页面中。外部样式表外部样式表是一个独立的文件，文件里定义了各种样式规则。这样，外部样式表可以被多个HTML文档应用。在应用外部样式表时有两种方式：一种是在页面中使

19、用link标签链接到外部样式文件；另一种是在页面中使用import方法导入外部样式表。（3）常用样式我们复习一下常用的CSS样式。常用的文本属性文本属性说明font-size字体大小font-family字体类型font-style字体样式color设置或检索文本的颜色text-align文本对齐常用的背景属性背景属性说 明background-color设置背景颜色background-image设置背景图像background-repeat设置一个指定的图像如何被重复常用的组合属性样式名称说 明不带下划线的超连接A color: blue;text-decoration: none; A:

20、hover color: red; 细边框样式.boxBorder border-width:1px; border-style:solid; 图片按钮样式.picButtonbackground-image: url(images/back2.jpg); border: 0px; margin: 0px; padding: 0px; height: 23px; width: 82px; font-size: 14px; 本章特效：1、制作改变字体大小的样式特效实现思路：1、创建改变样式的JavaScript代码this.style.fontSize=24pxthis.style.fontSi

21、ze=14px2、利用鼠标相关事件调用JavaScript代码 onMouseOver=this.style.fontSize=24px“onMouseOut=this.style.fontSize=14px注意事项：JavaScript的标识符不能包含短横线，并且若标识符中包含多个单词时，后面单词的首字母要大写，所以CSS中属性都去掉短横线，并且第二个单词首字母大写。2、制作改变按钮背景图片的特效实现思路：创建mouseOver和mouseOut两种类样式，然后使用className类属性进行切换3、层的显示/隐藏特效实现思路：1、插入两个层，分别插入对应图片，注意设置两个层的z-index

22、属性2、写脚本函数，当单击时同时关闭这两个层。4、图片的显示/隐藏特效实现思路：1、可以使用DIV中插入图片来实现，但更简洁的办法是直接使用图片的display属性。2、访问图片Img对象的方法：document.getElementById(图片ID)第5章基本的表单验证技术1、表单验证的思路1、获取表单元素的值（String类型），然后进行判断2、触发表单（FORM）的提交事件（onSubmit）2、String对象使用 var 语句：var newstr = 这是我的字符串；创建 String 对象： var newstr = new String(这是我的字符串“)；调用方法和属性：字

23、符串对象.属性名；字符串对象.方法名( )；String对象常用的属性和方法：名称说明属性length获取字符串字符的个数方法indexOf(“子字符串”，起始位置) 查找子字符串的位置charAt(index)获取位于指定索引位置的字符substring(index1,index2 )求子串toLowerCase( )将字符串转换成小写toUpperCase( )将字符串转换成大写3、文本框控件（1）文本框对象的常用属性、方法、事件名称说明属性value设置或获取文本框的值方法focus( )获得焦点select( )选中文本内容，突出显示输入区域事件onFocus光标进入某个文本框脚本运行

24、onBlur文本框失去焦点脚本运行onKeyPress当一个键按下并释放时去触发一个事件本章掌握验证技术：在本章学习中要掌握登录页面和注册页面的基本表单验证，包括用户名、密码、电子邮件、出生日期等等的验证。第6章表单验证的相关事件和辅助特效本章理论1、Form对象的submit()方法：此方法用来提交表单，它与表单中的提交按钮具有相同的功能，就是提交表单。但是submit()提交表单是不会触发表单的onsubmit()事件的。2、event对象Event代表事件的状态，通过属性表示相关事件的各种信息，例如，鼠标的位置和状态，以及键盘按键的状态等等。Event对象只在事件发生的过程中才有效。Ev

25、ent对象的某些书香只对特定的事件有意义。比如：fromElement和toElement属性只对onmouseover和onmouseout事件有意义。Event对象的属性有很多，在本章中我们主要学习以下几个：keyCode：检测键盘事件相对应的内码。srcElement：返回触发事件的元素。fromElement：检测onmouseover和onmouseout事件发生时，鼠标所离开的元素。同理toElement是接触的元素。3、触发键盘的事件罗列：Onkeydown：用户按下任何键盘键（包括系统按键）是触发；Onkeyup：用户放开任何先前按下的键盘时发生；Onkeypress：用户在按

26、下并放开任何数字字母键是发生，系统按键（箭头键、功能键）无法得到识别。本章特效：1、用图片代替提交按钮实现思路：1、使用图片的单击事件。onClick=checkForm( )；2、因为图片不具备“提交”按钮的提交功能，所以需要人工调用提交方法 submit( ) 。2、制作回车切换输入的效果实现思路：1、使用键盘输入事件onKeyDown事件。2、检查输入是否是回车键ASCII码13，若是则将输入改为Tab键ASCII码9。3、制作即时提示错误的特效使用DIV层的内容动态改变。在每个输入框后添加一个DIV层, 根据用户的输入, 动态显示错误信息。实现思路；1、在登录文本框后插入DIV标签lo

27、ginError （即没有样式的DIV层）2、修改源代码，设置DIV的显示方式为inline，即和文本框在同一行 3、添加文本框失去焦点的事件函数。4、制作内容动态改变的层特效实现动态改变页面内容：方法1：当动态显示的内容较少时，使用 myDiv.innerHTML=“HTML代码”；方法2： innerText当动态显示的内容较多，并相对固定时，则预先制作好DIV内容，然后使用myDiv.style.display=“none/block”；实现思路：1、预先插入两个DIV标签，分别放置不同计算方式显示的内容：2、添加函数，初始化DIV1不显示，3、添加函数，根据“计算方式”的选择，隐藏/显示对应DI