内部培训教程JavaScriptppt课件.ppt

1、Neusoft Co.,Ltd.Beyond TechnologyJavaScript(Ver1.0)演讲人：丁海波演讲人：丁海波Neusoft Co.,Ltd.目的与目标 能够熟练的使用JavaScript语言对页面中的元素进行动态操作，对Form中的控件可以进行合法性，有效性校验等等。Neusoft Co.,Ltd.课程概述 本课程主要是介绍JavaScript语言的语法，如何使用JavaScript对页面中的元素进行动态操作和对页面中可输入，可选择的控件进行校验等。Neusoft Co.,Ltd.第一章:JavaScript简介第二章:JavaScript基本语法第三掌 JavaScri

2、pt对象第四章 在浏览器中使用Neusoft Co.,Ltd.第一章:JavaScript简介Neusoft Co.,Ltd.JavaScript JavaScript 历史历史JavaScript是由Netscape公司开发的一种脚本语言，结构简单，使用方便，对用户自身知识水平的要求并不高，易学易懂。Netscape将这种脚本语言命名为LiveScript，它的整个语法以Java为基础，但比Java要简单，同时，由于它是一种脚本语言，所以无需编译，可由浏览器直接解释运行，而不象Java那样需要经过编译。Netscape见LiveScript大有发展前途，而SUN也觉得可以利用Livescri

3、pt为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript，造就了这个强力的WEB页开发工具。Neusoft Co.,Ltd.JavaScriptJavaScript的特点的特点1.JavaScript是一种脚本语言 语法和规则没有可编译的编程语言那样严格和复杂，主要用于格式化文本和使用以编程语言编写的已编译好的组件。2.JavaScript是基于对象的语言 面向对象程序设计力图将程序设计为一些可以完成不同功能的独立部分(即对象)的组合体。基于对象的语言本身已具有创建完成的对象。例如，“日期”对象。3.JavaScript是事件驱动的语言 当你在Web主页中进

4、行某种操作时，就产生了一个“事件”。事件几乎可以是任何事情:敲击一个按钮、拖动鼠标等均可视为事件。JavaScript是事件驱动的，当事件发生时，它可对之作出响应。具体如何响应某个事件取决于你的事件响应处理程序。Neusoft Co.,Ltd.JavaScriptJavaScript的特点的特点4.JavaScript是安全的语言 JavaScript被设计为通过浏览器来处理并显示信息，但它不能修改其它文件中的内容。也就是说，它不能将数据存储在Web服务器或用户的计算机上，更不能对用户文件进行修改或删除操作。5.JavaScript是平台无关的语言 对于一般的计算机程序，它们的运行与平台有关。

5、例如，除非你使用一个仿真器来模拟Windows环境，否则不可能在Macintosh上运行一个Windows应用程序。JavaScript则并不依赖于具体的计算机平台（虽然有一些限制），它只与解释它的浏览器有关。不论你使用Macintosh还是Windows，或是UNIX版本的NetscapeNavigator，JavaScript都可正常运行。Neusoft Co.,Ltd.JavaScriptJavaScript的功能的功能JavaScript的功能总体可以归结为两类：1、交互性使用JavaScript可以大大加强WEB页的交互性，如轻松的在你的WEB页中加入按钮，显示带有控制的文本，建立交

6、互式表格等。2、动态性JavaScript可以使WEB页上显示的文本信息动起来或是加入一些动画，从而使你的WEB页看上去活泼诱人。Neusoft Co.,Ltd.JavaScriptJavaScript与与JavaJava语言的比较语言的比较 JavaScriptJavaScript不是不是JavaJavaJava是由Sun公司开发,与平台无关的、面向对象的程序设计语言，它与JavaScript基于对象的结构相反。Java可以用来设计独立的应用程序，也可以用来创建一种称为Applets的小应用程序。经过编译后，Applets成为一种平台无关的字节代码，这种Applets可以运行在任何平台上，只

7、要该平台具备能够操作Applets的Java虚拟机即可。Neusoft Co.,Ltd.JavaScriptJavaScript与与JavaJava语言的比较语言的比较 JavaScriptJavaScript与与JavaJava之间其它的一些主要区别之间其它的一些主要区别、Java程序被编译成为字节代码文件；JavaScript则是将字符正文传递给客户方并由客户方解释执行。、JavaScript是基于对象的，它自身具有已创建完毕的对象；而Java则是面向对象的，对象必须从类中创建。、JavaScript的代码以字符的形式嵌入在HTML文档中；Javaapplets则是由文档引用，其代码以字节

8、代码的形式保存在另一个独立的文件中。Neusoft Co.,Ltd.JavaScriptJavaScript与与JavaJava语言的比较语言的比较 JavaScriptJavaScript与与JavaJava之间其它的一些主要区别之间其它的一些主要区别、在HTML文档中，用标识标明JavaScript脚本；而Javaapplets则用标识来标明。、JavaScript采用弱类型；而Java则采用强类型。、JavaScript采用动态联编;而Java，则采用静态联编。Neusoft Co.,Ltd.JavaScriptJavaScript的局限性的局限性JavaScript为Web内容设计人员

9、提供了极大的灵活性和控制手段。它是一种优秀的“粘合剂”，能够将一个Web节点中的不同组成部分捆绑在一起，成为一个紧密结合的信息源。然而，像任何事物一样，JavaScript也有它的局限性。浏览器相关的局限性：浏览器相关的局限性：IE,NectscapeIE,Nectscape 平台相关的局限性平台相关的局限性:Windows,UnixWindows,UnixNeusoft Co.,Ltd.JavaScriptJavaScript的局限性的局限性 安全性有关的局限性安全性有关的局限性JavaScript的设计目标在于“Web安全性”，它比以前任何一种方法都更能保证Web的安全(例如：perl和C

10、GI)，这自然是牺牲JavaScript的一些功能换来的。(1)JavaScript不能打开、读、写、保存用户计算机上的文件。它有权访问的唯一信息就是它所嵌入的那一个Web主页中的信息。(2)JavaScript不能打开、读、写、保存Web服务器上的文件。尽管你可以使用它来提交HTML命令，但HTML命令也不能打开那些文件。Neusoft Co.,Ltd.JavaScriptJavaScript与与HTMLHTML在HTML文档里面，标签对内包容了和标签对。标签对内包容了标签对,标签对内的文字串是显示窗口的标题。标签对内包容了显示页面的内容。JavaScript的基本成分变量、函数和事件处理方

11、法和HTML代码编织在一起，变量和函数被包容在新标签对内，而标签对则一般放在标签对内；事件处理方法可以被包容在任何中的标签对内，用于响应某事件，激发某 JavaScrip函数。Neusoft Co.,Ltd.JavaScriptJavaScript与与HTMLHTMLjs example document.write(“hello world!”)/可以包含事件响应代码等Neusoft Co.,Ltd.JavaScriptJavaScript包含文件包含文件你可以将JavaScript文件在HTML文件外面存放！把你的零碎们放到一起，起个名字，再给它个js的文件尾。非常重要：js文件里不能有或

12、其它注释。例如：把pku.js文件链接到HTML文件中的句型如下：language=JavaScript“Neusoft Co.,Ltd.第二章:JavaScript基本语法Neusoft Co.,Ltd.JavaScriptJavaScript的语法结构的语法结构JavaScript的语言结构既宽松又简单；JavaScript的基本概念：语句：一条由计算机完成的、帮助你达到某种目的的指令，JavaScript中的每一行都可认为是一条语句。变量：一个代表某个值的名字就是变量。表达式：A=1+B；就是表达式。函数：具有一定功能的程序段；1、parseInt可以将字符串转化为整型数。2、paseF

13、loat将字符串转化为附点数。Neusoft Co.,Ltd.JavaScript的数据类型 JavaScript支持的数据类型共有四种1、数值型：其中包括整型数和浮点型数。2、布尔型：即逻辑值，true或flase。3、字符串型：由单个或多个文本字符组成。4、空值：由关键字null代表。JavaScript的命名规则1、变量名中可以包含数字0-9、大写或小写的拉丁字母和下划线。2、变量名的首字符必须为字母或下划线。3、变量名对字母的大小写敏感。4、变量名的长度必须在一行内。5、变量名中不能有空格与其它标点符号。Neusoft Co.,Ltd.变量与表达式 创建变量 var anumber=1

14、37;/变量的值是一个数 var anumber1=2;var astring=“1”;/变量的值也可以是一个字符串 var astring1=“hello”;表达式 xx=astring1+astring/结果是x=“hello1”xx=anumber+anumber1/结果是xx=139 xx=anumber+astring/结果是xx=“1371”Neusoft Co.,Ltd.表达式与操作符 赋值操作符：=、+=、-=、*=、/=、%=、=、=、&=、=、|=；条件表达式：status=(age=18)?adult:minor；算数操作符：+、-、*、/、%、+和-，y=+x；位逻辑运

15、算符：&、|、;、布尔操作符：&、|、!比较操作符：有=、=、=、!=；连接操作符+用于连接两个字符串：x=Hello;y=World!;x+y 为 Hello World!其他操作符 in,typeof instanceof等Neusoft Co.,Ltd.JavaScript流程控制语句if和else:if(condition).else.；for和while：for(初始化表达式;条件;增值表达式)执行语句;；while(条件)条件为真执行;；break可以用在for或while循环中，使循环中断，跳到for或while循环结束的位置；continue用在for或while循环可以跳过循

16、环体中剩余的语句，直接进行循环的下一次迭代.；Neusoft Co.,Ltd.第三章 JavaScript对象Neusoft Co.,Ltd.JavaScript对象模型JavaScript被称为是“基于对象的”(而不是面向对象的)，有对象的概念：数据和操作的封装,但没有继承的概念。从定义的角度看,JavaScript程序中有两种对象：JavaScript提供的内置对象（built-in object）和程序中定义的对象。一个对象是一个由变量、其他对象或方法组成的一个集合：在一个对象中包含的其他对象和变量被称为特性(property)；在一个对象内的函数(function)称为这个对象的方法(

17、method)；在一个特定的对象中的一些特性的序列称为数组,例如document对象中的image；多维数组是由含有数组特性的对象数组构造的Neusoft Co.,Ltd.当一个文档加载到浏览器后，它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存。要有一种方法让Script指出它要的是哪一个对象，这就是对象引用。JavaScript用严格的层次结构引导Script至文档的任何区域，对每个对象的引用必须包括从顶部到对象的所有层次，直至对象名，路径中各个相连的对象之间用句点分开。变量可以写成下面的形式：父对象.特性1索引1.特性2.最后特性索引N 对象的方法(method)可以如此

18、引用：对象.方法(参数组)；一个含有典型特性和方法的对象的例子：document 是对应一个.html文档的对象，浏览器读进文档后生成；document.writeln(“hello”)是这个对象的一个方法，输出带换行的字符串；document.location 是该对象的一个特性，含有它的URL。Neusoft Co.,Ltd.用户对象的定义JavaScript定义“类”、“函数”的语法是一样的，而且这样的函数就成了该类的构造函数!用户用函数定义来定义类，然后用new语句创建该类的一个实例。以下是“类”的例子。（实际效果）function add()this.result=this.left

19、+this.right;function MyClass(n)this.left=n;this.right=6;this.result=0;this.sum=add;x=new MyClass(4);x.sum();document.write(x.result);Neusoft Co.,Ltd.prototype 属性返回对象类型原型的引用。引用方式：objectName.prototypeobjectName 参数是对象的名称。Neusoft Co.,Ltd.JavaScriptJavaScript的对象的对象:Arrayq 属性：length，它指明了数组的长度。方法：join()将数组

20、值连接变为一个字符串；reverse()将数组值倒序；sort()将对数组值进行排序;AAA=new Array(3);AAA0=B;AAA1=A;AAA2=C;document.write(AAA.length+);document.write(AAA.join()+);document.write(AAA.reverse().join()+);document.write(AAA.sort().join()+;Neusoft Co.,Ltd.JavaScriptJavaScript的对象的对象:StringStringq 属性：length属性表明字符串长度。q 方法字符串的转换；toUp

21、perCase()将字符串所有字符转为大写；toLowerCase()将字符串所有字符转为小写；toString()将非字符串对象显示转化为字符串。字符串的处理；substring()将括号中参数所指的字符串片段返回；charAt()返回括号中指定位置字符串的内容；split()根据指定的分隔符把一个字符串划分为一个字符串数组。如:newstring=astring.substring(index1,index2);/返回一个位置在 index1和index2-1之间的字符串，特别是如果 index2 index1，子串返回 index2和index1-1之间的部分!Neusoft Co.,L

22、td.JavaScriptJavaScript的对象的对象:DateDateq 属性：无q 方法：a a、设定日期设定日期setDate(),setMonth(),setYear()；setTime()设定时间1970.1.1开始用毫秒数来计时；b b、日期格式转换日期格式转换.Date.UTC()返回一个通用时间，距1970年1月1日午夜的毫秒。c c、获取日期获取日期 .Date.getDate(),.Date.getMonth(),.Date.getYear(),.Date.parse(),Date.getDay();d d、处理时区处理时区.toGMTString()将日期时间值转换为

23、的字符串(GMT时间)；.tolocaleString()将日期时间值转换为的字符串(当地时间)。Neusoft Co.,Ltd.JavaScriptJavaScript的对象的对象:MathMathq 属性：.E：为自然对数的底(约为2.718)；.PI：为圆周率(约为3.14159)；q 方法：.abs()绝对值计算；.pow()数的幂；.sqrt()计算平方根；.cos()、.sin()、.tan()、.acos、.asin()、.atan();Neusoft Co.,Ltd.JavaScriptJavaScript的屏幕对象的屏幕对象显示器screen。各种相关特征涵义参数举例说明sc

24、reen.height屏幕高度screen.width屏幕宽度screen.availHeight屏幕可见高度screen.availWidth屏幕可见宽度screen.colorDepth色深8，16，32位颜色Neusoft Co.,Ltd.JavaScript事件模型 事件：用户对网页的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统行为。例如加载一张网页，点击一个超链等。事件处理程序的引入（如何使一段JavaScript程序和事件的发生联系起来？）。“on事件名”是JavaScript规定的对应事件处理程序柄（event handler）的名字。例如onClick、onfocu

25、s、onSubmit等等。Neusoft Co.,Ltd.JavaScript事件模型(续)第一种引入方式：事件处理程序柄名以属性名的形式在HTML文本中某些适当的标记中出现，而对应的属性值是由网页编写者提供的JavaScript程序段（或事件处理函数名）；第二种引入方式：将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性（property）document.forms0.age.onchange=isNumber；例：让事件处理程序作为“属性值”这里，事件处理程序柄的名字是大小写不敏感的。这与HTML文本中对标记的属性名的松散要求是一致的。OnLoad在网页完全加载完后执行(即包括图像

26、,applet等)；OnUnLoad在网页退出之前执行。Neusoft Co.,Ltd.JavaScriptJavaScript程序的注意事项程序的注意事项最好把源码写进HTML文件头里，及之间是合适的地方。JavaScript程序要用，language这个限定参数也是必要的。再用把程序关闭。提示开始标记来关闭提示。对所编程序加必要的注释。单行或多行注释加在/*/号中间来标示；单行注释则加在/号后面。Neusoft Co.,Ltd.第四章 在浏览器中使用Neusoft Co.,Ltd.1.代表浏览器器所打开的窗口。2.通常代表目前正在使用(focus)的窗口。3.如果打开多个浏览器窗口时，可以

27、利用别名(alias)来区别它们,如：ex.opener,parent,self,window,top 窗口对象(Window object)Neusoft Co.,Ltd.窗口对象使用语法window.特性window.方法(参数群)self.特性/self代表目前window或frame名称self.方法(参数群)top.特性/top代表最顶层的窗口top.方法(参数群)parent.特性/parent代表目前框架的父框架parent.方法(参数群)窗口名称.特性窗口名称.方法(参数)特性方法(参数)Neusoft Co.,Ltd.closed-说明窗口是否已经关闭defaultStatu

28、s -浏览器底部预设的状态列讯息length-窗口重的框架个数Frame-窗口中的frameframes-窗口中的frame数组name-窗口的名称opener-打开该窗口的窗口名称status-浏览器底部自行设定的状态信document-窗口中的document对象history-窗口history对象location-窗口对象的对象中的location对象窗口对象的属性Neusoft Co.,Ltd.alert()-显示警告讯息confirm()-显示确认讯息prompt()-显示提示讯息focus()-成为焦点blur()-移开焦点(成为背景处理)open()-打开新浏览窗口close(

29、)-开关已打开的浏览窗口eval()-执行引数运算式计算窗口对象的方法Neusoft Co.,Ltd.resizeBy(x,y)-将窗口尺寸向X轴及Y轴调整moveBy(x,y)-将窗口向X轴及Y轴移动scroll(x,y)-卷动至指定的座標print()-列印指定之窗口內容setTimeout()-设定一定时程序(计时器)clearTimeout()-撤销一定时程序(计时器)toString()-传回字串表示值valueOf()-传回数值表示值窗口对象的方法Neusoft Co.,Ltd.function grow()window.resizeBy(50,50)function shrink

30、()window.resizeBy(-50,-50)将窗口放大与缩小范例 自动放大窗口Neusoft Co.,Ltd.function scrollIt()for(y=1;y=1000;y+)scroll(1,y)按鼠标左键兩下，画面自动卷动.The End.范例一 自动卷动窗口Neusoft Co.,Ltd.打开新窗口对象的语法窗口对象名称=Window.open(URL,新窗口名称 ,窗口的规格)1.窗口对象名称：用以使用窗口对象的特性与方法。ex.窗口对象名称.close2.窗口名称：用以识別该窗口。ex.Neusoft Co.,Ltd.窗口对象范例-打开与开关窗口Neusoft Co.

31、,Ltd.function grow()window.resizeBy(0,150)function shrink()window.resizeBy(0,-150)广告页 here窗口对象范例-动态调整广告页大小Neusoft Co.,Ltd.使用 Timer 的语法1.Timer又称为计时器或延迟器，常用来指定于 特定时间后执行某程式。2.时间单位为毫秒(千分之一秒)ex.3000 milliseconds=3 seconds window.setTimeout(“欲执行的程式码或函数”,设定的时间)Neusoft Co.,Ltd.使用 Timer 的语法(二)如果利用循环将计时器设计成重复

32、执行，欲终止计时器执行，请使用此一格式。因为要终止计时器的执行，必须指定欲终止 的计时器名称。计时器对象名称=window.setTimeout(“欲执行的代码或函数”,设定的时间)Neusoft Co.,Ltd.终止循环內 Timer 的语法终止计时器的执行，必须指定欲终止的计时器名称。window.clearTimeout(计时器对象名称)Neusoft Co.,Ltd.function timer()setTimeout(alert(3秒到了!),3000)窗口对象范例-timer(1)Neusoft Co.,Ltd.var counter=0 setTimeout(upDate(),3

33、000)/三秒钟后呼叫upDate()function upDate()counter+status=第+counter+次载入timer1=setTimeout(upDate(),3000)窗口对象范例-timer(2)Neusoft Co.,Ltd.历史对象(history object)1.history对象是用来存储客戶端访问过的URL资料。2.这些历史记录是以串列(list)的方式存储。3.各大浏览器均提供检视history工具ex.IE-检视/移至 NC-前往(go)Neusoft Co.,Ltd.历史对象的使用语法如下。history.特性history.方法(参数群)lengt

34、h-history对象中URL个数 back()-载入历史对象中上一个URLforward()-载入历史对象中下一个URLgo()-载入指定的URL历史对象的使用语法Neusoft Co.,Ltd.窗口对象范例-historyNeusoft Co.,Ltd.with(document)write(重新载入此页)write(前往SeedNet方法一)write(前往SeedNet方法二.link(http:/.tw)write(前往SeedNet方法三)前往SeedNet方法四窗口对象范例-location(1)Neusoft Co.,Ltd.前往SeedNet方法五前往SeedNet方法六前往

35、SeedNet方法七窗口对象范例-location(2)Neusoft Co.,Ltd.Document 对象Neusoft Co.,Ltd.1.代表目前的文件信息。2.直接对应至HTML的Body标签。文档对象(Document object)Neusoft Co.,Ltd.document.特性document.方法(参数群)bgColor-相当于 HTML 的 BGCOLORalinkColor-相当于 HTML 的 ALINK linkColor-相当于 HTML 的 LINK vlinkColor-相当于 HTML 的 VLINKfgColor-相当于 HTML 的 TEXTtitl

36、e-相当于 HTML 的 lastModified-最近更新日期URL-文件的 URL文档对象的使用语法Neusoft Co.,Ltd.DocumentAnchorAppletAreaImageFormLink文档对象的对象阶层图Neusoft Co.,Ltd.document.write(本页最后更新日期：)document.write(document.lastModified)文档对象范例 最近更新时间Neusoft Co.,Ltd.Form 对象Neusoft Co.,Ltd.1.用于定义表单，提供使用者输入资料。2.包含许多控制类型。3.直接对应至HTML的表单元件。表单对象(For

37、m object)Neusoft Co.,Ltd.FormButton CheckboxFileUploadHiddenPasswordRadioResetSelectSubmitTextTextarea表单对象的对象阶层图Neusoft Co.,Ltd.表单名称.特性表单名称.方法(参数群)forms索引值.特性forms索引值.方法(参数群)表单对象的使用语法Neusoft Co.,Ltd.action-ACTION属性设定值elements-以陣列代表表单內所有元件encoding-使用POST传送时之编码方式length-表单內元件个数method-指定传送方式(POST/GET)ta

38、rget-将执行结果于特定窗口內执行表单对象的特性Neusoft Co.,Ltd.表单对象可使用的方法如下。reset()-模拟按下 reset 按钮的动作submit()-模拟按下 submit 按钮的动作toString()-传回字串表示值表单对象的方法Neusoft Co.,Ltd.显示一个可供输入的域。可使用的事件处理程序：onBlur,onChange,onFocusonKeyDown,onKeyUponMouseDown,onMouseUp本文对象(Text object)Neusoft Co.,Ltd.type=text/类型为本文 name=tel/Text名称 value=0

39、3-4257387/初始值 size=20/Text大小 title=提示值/提示值 AccessKey=L/快捷键值 maxlength=10/可输入资料长度 readonly/指定成为只读属性本文对象相关参数Neusoft Co.,Ltd.文本对象的对象特性defaultValue-该元件预设值type-该元件类型name-该元件识別名称value-该元件目前输入值该元件目前输入值Neusoft Co.,Ltd.1.显示一个可供选择(单选)的按钮。2.ON 表示确认OFF 表示不确认。可使用的事件处理程序：onBlur,onClick,onFocusonKeyDown,onKeyUponM

40、ouseDown,onMouseUp圆钮对象(Radio object)Neusoft Co.,Ltd.type=radio/类型为圆钮 name=sex/名称为sex value=boy/传送值为boy checked/设定为预设选项圆钮对象相关参数Input type=radio name=sex value=boy checkedNeusoft Co.,Ltd.圆钮对象的对象特性checked-判断是否已經核取defaultChecked-该元件预设为核取与否type-该元件类型name-该元件识別名称value-该元件目前输入值Neusoft Co.,Ltd.性別：男生女生functi

41、on SEX()if(document.form1.elements0.checked)sex=男生elsesex=女生alert(性別是：+sex)表单对象范例-radioNeusoft Co.,Ltd.1.显示一个可供选择的复选框。2.ON 表示确认OFF 表示不确认。可使用的事件处理程序：onBlur,onClick,onFocusonKeyDown,onKeyUponMouseDown,onMouseUp确认方块对象(Checkbox object)Neusoft Co.,Ltd.type=checkbox/类型为确认方块 name=hobby/名称 value=music/传送值 c

42、hecked/设定为预设选项确认方块对象相关参数Input type=checked name=hobby value=musicNeusoft Co.,Ltd.1.显示一个可供输入密码的输入框。2.利用*隐藏所输入的资料。可使用的事件处理程序：onBlur,onChange,onFocusonKeyDown,onKeyUponMouseDown,onMouseUp密码对象(password object)Neusoft Co.,Ltd.type=password/类型为密码 name=password/名称 value=1234/初始值 size=20/大小 maxlength=10/可输入

43、资料长度密码对象相关参数Input type=password name=pwNeusoft Co.,Ltd.输入密码：重新输入：function checkPw()if(document.form1.pw1.value!=document.form1.pw2.value)alert(兩組密码不符，请重新输入)else alert(OK!)表单对象范例-password(1)Neusoft Co.,Ltd.密码对象的对象特性defaultValue-该元件预设值type-该元件类型name-该元件识別名称value-该元件目前输入值Neusoft Co.,Ltd.function checkP

44、wLgh(index,str)if(str.length!=9)alert(你只输入+str.length+位数n请输入9位数密码)document.form1.elementsindex.value=document.form1.elementsindex.focus()function checkRetype()if(document.form1.pw.value!=document.form1.retypePw.value)alert(兩組密码不符，请重新输入)document.form1.retypePw.value=document.form1.retypePw.focus()els

45、e alert(密码检查作業完成!)表单对象范例-password(2)Neusoft Co.,Ltd.输入密码：重新输入：表单对象范例-password(2)Neusoft Co.,Ltd.提供一个隐藏域，用以储存 特殊资料值，以供运算或参考。隐藏对象(hidden object)Neusoft Co.,Ltd.type=hidden/类型为隐藏 name=dummy/对象名称 value=1234/元件初始值 隐藏对象相关参数Input type=hidden name=dummy value=1234Neusoft Co.,Ltd.提供一組选单，供使用者选择。可使用的事件处理程序：onB

46、lur,onChange,onFocusonClick,onDblClick选择对象(select object)Neusoft Co.,Ltd.name=week/名称 size=3/下拉框大小 multiple/设定为可多选 option/定义选择的內容 selected/预选项目 value/定义传送值选择对象相关参数Neusoft Co.,Ltd.SundayMondayTuesdayWednesdayThursdayFridaySaturday表单对象范例-select(1)Neusoft Co.,Ltd.选择对象的对象特性type-该元件类型name-该元件识別名称value-该元

47、件目前输入值selectedIndex-选项的索引值length-选项个数options-选项数组Neusoft Co.,Ltd.url=new Array(2)url0=http:/.twurl1=http:/function jumpPage(form)i=form.menu.selectedIndex;if(i0)window.location.href=urli-1-选择ISP-SeednetHinet表单对象范例-select(2)Neusoft Co.,Ltd.function createOptions()var option=new Option(document.form1.

48、select1.value)document.form1.select2.options2=option可选择项目-香蕉芭樂蘋果梨子 下页续 表单对象范例 动态选单Neusoft Co.,Ltd.接上页 onClick=createOptions()选择项目-表单对象范例 动态选单Neusoft Co.,Ltd.练习 设计一交换式选单：1.所选取的项目应可列在右方。(按按钮或鼠标点清单项目两下)2.加入右方选单后将左方选项清除。3.设计一个刪除钮可将选项刪除。Neusoft Co.,Ltd.提供一个按钮，供触发事件之用。可使用的事件处理程序：onBlur,onClick,onFocus按钮对象

49、(button object)Neusoft Co.,Ltd.type=button/类型为按钮 name=button1/按钮名称 value=请按我/按钮面显示值 title=送至服务器/提示值 tabindex=0/定位顺序 disabled/使失效按钮对象相关属性Neusoft Co.,Ltd.按钮对象的对象特性type-该元件类型name-该元件识別名称value-该按钮面显示值disabled-该元件生效否Neusoft Co.,Ltd.动态设定按钮的显示字樣：请输入：表单对象范例-buttonNeusoft Co.,Ltd.表单对象范例-buttonNeusoft Co.,Ltd

50、.用以将表格內资料送至服务器之用。可使用的事件处理程序：onBlur,onClick,onFocus另外可在Form标签內搭配使用onSubmit提交对象(submit object)Neusoft Co.,Ltd.type=submit/类型为呈送钮 name=submit1/按钮名称 value=提交 /提交钮表面显示值 提交对象相关参数Input type=submit name=submit1 value=送出Neusoft Co.,Ltd.提交对象的对象特性type-该元件类型Name-该元件识別名称value-该按钮面显示值Neusoft Co.,Ltd.function isRe