PPT
【文档说明】东软内部培训教程JavaScri课件.ppt，共(115)页，870.524 KB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-3324.html
以下为本文档部分文字说明：
NeusoftCo.,Ltd.BeyondTechnologyJavaScript(Ver1.0)演讲人：丁海波NeusoftCo.,Ltd.目的与目标•能够熟练的使用JavaScript语言对页面中的元素进行动态操作，对Form中的控件可以进行合法性，有效性校验等等。Neus
oftCo.,Ltd.课程概述•本课程主要是介绍JavaScript语言的语法，如何使用JavaScript对页面中的元素进行动态操作和对页面中可输入，可选择的控件进行校验等。NeusoftCo.,Ltd.•第一章:Ja
vaScript简介•第二章:JavaScript基本语法•第三掌JavaScript对象•第四章在浏览器中使用NeusoftCo.,Ltd.第一章:JavaScript简介NeusoftCo.,Ltd.JavaScript历史•JavaScript是由Netscape公司开发的一种脚本语言，结
构简单，使用方便，对用户自身知识水平的要求并不高，易学易懂。•Netscape将这种脚本语言命名为LiveScript，它的整个语法以Java为基础，但比Java要简单，同时，由于它是一种脚本语言，所以无需编译，可由浏览器直接解释运行，而不象Java
那样需要经过编译。•Netscape见LiveScript大有发展前途，而SUN也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript，造就了这个强力的
WEB页开发工具。NeusoftCo.,Ltd.JavaScript的特点•1.JavaScript是一种脚本语言–语法和规则没有可编译的编程语言那样严格和复杂，主要用于格式化文本和使用以编程语言编写的已编译好的组件。•2.JavaScr
ipt是基于对象的语言–面向对象程序设计力图将程序设计为一些可以完成不同功能的独立部分(即对象)的组合体。基于对象的语言本身已具有创建完成的对象。例如，“日期”对象。•3.JavaScript是事件驱动的语言–当你在
Web主页中进行某种操作时，就产生了一个“事件”。事件几乎可以是任何事情:敲击一个按钮、拖动鼠标等均可视为事件。JavaScript是事件驱动的，当事件发生时，它可对之作出响应。具体如何响应某个事件取决于你的事件响应处理程序。NeusoftCo.,Ltd.JavaScript的
特点•4.JavaScript是安全的语言–JavaScript被设计为通过浏览器来处理并显示信息，但它不能修改其它文件中的内容。也就是说，它不能将数据存储在Web服务器或用户的计算机上，更不能对用户文件进行
修改或删除操作。•5.JavaScript是平台无关的语言–对于一般的计算机程序，它们的运行与平台有关。例如，除非你使用一个仿真器来模拟Windows环境，否则不可能在Macintosh上运行一个Windows应用程序。JavaScript则并不依赖于具体的计算机平台（虽
然有一些限制），它只与解释它的浏览器有关。不论你使用Macintosh还是Windows，或是UNIX版本的NetscapeNavigator，JavaScript都可正常运行。NeusoftCo.,Ltd.Jav
aScript的功能JavaScript的功能总体可以归结为两类：1、交互性使用JavaScript可以大大加强WEB页的交互性，如轻松的在你的WEB页中加入按钮，显示带有控制的文本，建立交互式表格等。2、动态性JavaScript可以使WEB页上显示的文本信息动起来或是加
入一些动画，从而使你的WEB页看上去活泼诱人。NeusoftCo.,Ltd.JavaScript与Java语言的比较JavaScript不是JavaJava是由Sun公司开发,与平台无关的、面向对象的程序设计语言，它与JavaScript基于对象的结构相反。Java可以用来
设计独立的应用程序，也可以用来创建一种称为Applets的小应用程序。经过编译后，Applets成为一种平台无关的字节代码，这种Applets可以运行在任何平台上，只要该平台具备能够操作Applets的Java虚拟机即可。NeusoftCo.
,Ltd.JavaScript与Java语言的比较JavaScript与Java之间其它的一些主要区别１、Java程序被编译成为字节代码文件；JavaScript则是将字符正文传递给客户方并由客户方解释执行。２、JavaScript是
基于对象的，它自身具有已创建完毕的对象；而Java则是面向对象的，对象必须从类中创建。３、JavaScript的代码以字符的形式嵌入在HTML文档中；Javaapplets则是由文档引用，其代码以字节代码的形式保存在另一个独立的文件中。NeusoftCo.,Ltd.JavaScript与Java语
言的比较JavaScript与Java之间其它的一些主要区别４、在HTML文档中，用标识<SCRIPT>标明JavaScript脚本；而Javaapplets则用标识<APPLET>来标明。５、JavaScript采用弱类型；而Java则采用强类型。６、JavaScrip
t采用动态联编;而Java，则采用静态联编。NeusoftCo.,Ltd.JavaScript的局限性JavaScript为Web内容设计人员提供了极大的灵活性和控制手段。它是一种优秀的“粘合剂”，能够将一个Web节点中的不同组成部分捆绑在一起，成为一个紧密
结合的信息源。然而，像任何事物一样，JavaScript也有它的局限性。浏览器相关的局限性：IE,Nectscape平台相关的局限性:Windows,UnixNeusoftCo.,Ltd.JavaScript的局限性安全性有关的局限性JavaScript的设计目标在于“Web安全性”，它比以
前任何一种方法都更能保证Web的安全(例如：perl和CGI)，这自然是牺牲JavaScript的一些功能换来的。(1)JavaScript不能打开、读、写、保存用户计算机上的文件。它有权访问的唯一信息就是它所嵌入的那一个Web主页中的信息。(2)JavaScript不能打开、读、写、保存Web服
务器上的文件。尽管你可以使用它来提交HTML命令，但HTML命令也不能打开那些文件。NeusoftCo.,Ltd.JavaScript与HTML在HTML文档里面，<html>标签对内包容了<head>和<body>标签对。<head>标签对
内包容了<title>标签对,<title>标签对内的文字串是显示窗口的标题。<body>标签对内包容了显示页面的内容。JavaScript的基本成分—变量、函数和事件处理方法—和HTML代码编织在一起，变量和函
数被包容在新标签对<script>内，而<script>标签对则一般放在<head>标签对内；事件处理方法可以被包容在任何<body>中的标签对内，用于响应某事件，激发某JavaScrip函数。NeusoftCo.,Ltd.JavaScript与HTML<
html><head><title>jsexample</title><ScriptLanguage=“JavaScript”>document.write(“helloworld!”)</Script></he
ad><body>//可以包含事件响应代码等</body></html>NeusoftCo.,Ltd.JavaScript包含文件•你可以将JavaScript文件在HTML文件外面存放！把你的零碎们放到一起，起个名字，再给它个js的文件尾。–非常重要：js文
件里不能有<script></script>或其它注释。•例如：把pku.js文件链接到HTML文件中的句型如下：–<scriptsrc=“pku.js”language="JavaScript“></script>NeusoftCo.,Ltd.第二章:J
avaScript基本语法NeusoftCo.,Ltd.JavaScript的语法结构JavaScript的语言结构既宽松又简单；JavaScript的基本概念：•语句：一条由计算机完成的、帮助你达到某种目的的指令，JavaScript中的每一行都可认为
是一条语句。•变量：一个代表某个值的名字就是变量。•表达式：A=1+B；就是表达式。•函数：具有一定功能的程序段；1、parseInt可以将字符串转化为整型数。2、paseFloat将字符串转化为附点数
。NeusoftCo.,Ltd.JavaScript的数据类型•JavaScript支持的数据类型共有四种–1、数值型：其中包括整型数和浮点型数。–2、布尔型：即逻辑值，true或flase。–3、字符串型：由单个或多个文本字符组成。–4、空值：由
关键字null代表。•JavaScript的命名规则–1、变量名中可以包含数字0-9、大写或小写的拉丁字母和下划线。–2、变量名的首字符必须为字母或下划线。–3、变量名对字母的大小写敏感。–4、变量名的长度必须在一行内。–5、变量名中不能有空
格与其它标点符号。NeusoftCo.,Ltd.变量与表达式•创建变量–varanumber=137;//变量的值是一个数–varanumber1=2;–varastring=“1”;//变量的值也可以是一个字符串–varastring1=“hello”;•表达式–xx=astring1+as
tring//结果是x=“hello1”–xx=anumber+anumber1//结果是xx=139–xx=anumber+astring//结果是xx=“1371”NeusoftCo.,Ltd.表
达式与操作符•赋值操作符：–=、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=；•条件表达式：–status=(age>=18)?"adult":"minor"；•算数操作符：–+、-、*、/、%、++和--，y=++x；
•位逻辑运算符：–&、|、^;<<、>>、>>>•布尔操作符：–&&、||、!•比较操作符：–有==、>、>=、<、<=、!=；•连接操作符+用于连接两个字符串：–x="Hello";y="World!";x+y
为"HelloWorld!"•其他操作符–in,typeofinstanceof等NeusoftCo.,Ltd.JavaScript流程控制语句•if和else:–if(condition){...}else{...}；•for和while：–for(初始化表达式;条件;增值表达式){执行语句
;}；–while(条件){条件为真执行;}；–break可以用在for或while循环中，使循环中断，跳到for或while循环结束的位置；–continue用在for或while循环可以跳过循环体中剩余的语句，直接进行循环的下一次迭代.；N
eusoftCo.,Ltd.第三章JavaScript对象NeusoftCo.,Ltd.JavaScript对象模型•JavaScript被称为是“基于对象的”(而不是面向对象的)，有对象的概念：数据和操作的封装,但没有继承的概念。从定义的角度看,JavaScript程序中有两种对象：Java
Script提供的内置对象（built-inobject）和程序中定义的对象。•一个对象是一个由变量、其他对象或方法组成的一个集合：–在一个对象中包含的其他对象和变量被称为特性(property)；–在一个对象内的函数(func
tion)称为这个对象的方法(method)；–在一个特定的对象中的一些特性的序列称为数组,例如document对象中的image[]；–多维数组是由含有数组特性的对象数组构造的NeusoftCo.,Ltd.•当一个文档加载到浏览器后，它所有的
对象都按照浏览器的文档对象所规定的严格层次结构存放到内存。要有一种方法让Script指出它要的是哪一个对象，这就是对象引用。JavaScript用严格的层次结构引导Script至文档的任何区域，对每个对象的引用必须包括从顶部到对象的所有层次，直至对象名，路
径中各个相连的对象之间用句点分开。•变量可以写成下面的形式：–父对象.特性1[索引1].特性2..最后特性[索引N]•对象的方法(method)可以如此引用：–对象.方法(参数组)；•一个含有典型特性和方法的对象的例子：–document是对应一个.html文档的对象，浏览器
读进文档后生成；–document.writeln(“hello”)是这个对象的一个方法，输出带换行的字符串；–document.location是该对象的一个特性，含有它的URL。NeusoftCo.,Ltd.用户对象的定义•JavaScript定义“类”、“函数”的语法
是一样的，而且这样的函数就成了该类的构造函数!–用户用函数定义来定义类，然后用new语句创建该类的一个实例。以下是“类”的例子。（实际效果）<HEAD><scriptlanguage=“javascript”>functionadd(){this.result=this.le
ft+this.right;}functionMyClass(n){this.left=n;this.right=6;this.result=0;this.sum=add;}</script></HEAD><BODY><scriptlanguage=“j
avascript”>x=newMyClass(4);x.sum();document.write(x.result);</script></BODY>NeusoftCo.,Ltd.•prototype属性•返回对
象类型原型的引用。•引用方式：•objectName.prototype•objectName参数是对象的名称。NeusoftCo.,Ltd.JavaScript的对象:Array属性：length，它指明了数组的长度。方法：join()将数组值连接
变为一个字符串；reverse()将数组值倒序；sort()将对数组值进行排序;AAA=newArray(3);AAA[0]="B";AAA[1]="A";AAA[2]="C";document.write(AAA.lengt
h+"<br>");document.write(AAA.join()+"<br>");document.write(AAA.reverse().join()+"<br>");document.write(AAA.
sort().join())+"<br>";NeusoftCo.,Ltd.JavaScript的对象:String属性：length属性表明字符串长度。方法字符串的转换；toUpperCase()将字符串所有字符转为大写；toLower
Case()将字符串所有字符转为小写；toString()将非字符串对象显示转化为字符串。字符串的处理；substring()将括号中参数所指的字符串片段返回；charAt()返回括号中指定位置字符串的内容；split()根据指定的分隔符把一个字符串划分为一个字符串数组。–
如:newstring=astring.substring(index1,index2);//返回一个位置在index1和index2-1之间的字符串，特别是如果index2<index1，子串返回index2和index1-
1之间的部分!NeusoftCo.,Ltd.JavaScript的对象:Date属性：无方法：a、设定日期setDate(),setMonth(),setYear()；setTime()设定时间1970.1.1开始用毫秒数来计时；b、日期格式转换.Da
te.UTC()返回一个通用时间，距1970年1月1日午夜的毫秒。c、获取日期.Date.getDate(),.Date.getMonth(),.Date.getYear(),.Date.parse(),Date.g
etDay();d、处理时区.toGMTString()将日期时间值转换为的字符串(GMT时间)；.tolocaleString()将日期时间值转换为的字符串(当地时间)。NeusoftCo.,Ltd.Jav
aScript的对象:Math属性：.E：为自然对数的底(约为2.718)；.PI：为圆周率(约为3.14159)；„„方法：.abs()绝对值计算；.pow()数的幂；.sqrt()计算平方根；.cos()、.sin()、.tan()、.acos、.asin()、.atan();„„Ne
usoftCo.,Ltd.JavaScript的屏幕对象显示器－screen。各种相关特征涵义参数举例说明screen.height屏幕高度screen.width屏幕宽度screen.availHeight屏
幕可见高度screen.availWidth屏幕可见宽度screen.colorDepth色深8，16，32位颜色NeusoftCo.,Ltd.JavaScript事件模型•事件：用户对网页的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统行为。例如加载一张网页，点击一个超
链等。•事件处理程序的引入（如何使一段JavaScript程序和事件的发生联系起来？）。•“on事件名”是JavaScript规定的对应事件处理程序柄（eventhandler）的名字。例如onClick、onfocus、onSubmit等等。NeusoftC
o.,Ltd.JavaScript事件模型(续)•第一种引入方式：事件处理程序柄名以属性名的形式在HTML文本中某些适当的标记中出现，而对应的属性值是由网页编写者提供的JavaScript程序段（或事件处理函数名）
–<inputtype=“text”name=“age”onChange=“isNumber(this)”>；•第二种引入方式：将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性（property）–document.forms[0].age.onchange
=isNumber；•例：让事件处理程序作为“属性值”–<BODYonLoad="window.defaultStatus='Thisismypage';returntrue">–这里，事件处理程序柄的名字是大小写不敏感的。
这与HTML文本中对标记的属性名的松散要求是一致的。–OnLoad在网页完全加载完后执行(即包括图像,applet等)；–OnUnLoad在网页退出之前执行。NeusoftCo.,Ltd.JavaScript程序的注意事项最好把源码写进HTML文件头里，<title>及</head>之间是合
适的地方。JavaScript程序要用<script>，language这个限定参数也是必要的。再用</script>把程序关闭。提示开始标记<!--。最后得用结束标记//-->来关闭提示。对所编程序加必要的注释。单行或多行注释加在/**/号中间来标示；
单行注释则加在//号后面。NeusoftCo.,Ltd.第四章在浏览器中使用NeusoftCo.,Ltd.1.代表浏览器器所打开的窗口。2.通常代表目前正在使用(focus)的窗口。3.如果打开多个浏览器窗口时，可以利用别名(
alias)来区别它们,如：ex.opener,parent,self,window,top窗口对象(Windowobject)NeusoftCo.,Ltd.窗口对象使用语法window.特性window.方法(参数群)self.特性//s
elf代表目前window或frame名称self.方法(参数群)top.特性//top代表最顶层的窗口top.方法(参数群)parent.特性//parent代表目前框架的父框架parent.方法(参数群)窗口名称.特性窗口名称.方法
(参数)特性方法(参数)NeusoftCo.,Ltd.•closed->说明窗口是否已经关闭•defaultStatus->浏览器底部预设的状态列讯息•length->窗口重的框架个数•Frame->窗口中的frame•frames->窗口中的frame数组•name
->窗口的名称•opener->打开该窗口的窗口名称•status->浏览器底部自行设定的状态信•document->窗口中的document对象•history->窗口history对象•locat
ion->窗口对象的对象中的location对象窗口对象的属性NeusoftCo.,Ltd.•alert()->显示警告讯息•confirm()->显示确认讯息•prompt()->显示提示讯息•focus()->成为焦点•blur(
)->移开焦点(成为背景处理)•open()->打开新浏览窗口•close()->开关已打开的浏览窗口•eval()->执行引数运算式计算窗口对象的方法NeusoftCo.,Ltd.•resizeBy(x,y)-
>将窗口尺寸向X轴及Y轴调整•moveBy(x,y)->将窗口向X轴及Y轴移动•scroll(x,y)->卷动至指定的座標•print()->列印指定之窗口內容•setTimeout()->设定一定时程序(计时器)•clea
rTimeout()->撤销一定时程序(计时器)•toString()->传回字串表示值•valueOf()-->传回数值表示值窗口对象的方法NeusoftCo.,Ltd.<Script>functiongrow(){window.resizeBy(50,50)}funct
ionshrink(){window.resizeBy(-50,-50)}</script><bodyonMouseOver=grow()onMouseOut=shrink()><H1>将窗口放大与缩小</H1></body>范例–自动放大窗口NeusoftCo.,Ltd.<Script
>functionscrollIt(){for(y=1;y<=1000;y++){scroll(1,y)}}</Script><bodyonDblClick=scrollIt()>按鼠标左键兩下，画面自动卷动....<br><br><br><br><br><br><
br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>...TheEnd....<body>范例一–自动卷动窗口NeusoftCo.,Ltd.打开新窗口对象的语法[窗口对象名称=][Win
dow.]open(‘[URL]‘,‘[新窗口名称]‘,[‘窗口的规格‘])1.窗口对象名称：用以使用窗口对象的特性与方法。ex.窗口对象名称.close2.窗口名称：用以识別该窗口。ex.<ahref=“http://ww
w.seed.net.tw”target=“窗口名称”>NeusoftCo.,Ltd.<form><inputtype=buttonvalue="打开窗口一(newWin)"onClick="newWin=window.open('te
st.htm','')"><P><inputtype=buttonvalue="height为150点,width为200点"onClick="open('test.htm','','height=150,width=200')"><P><inputtype=buttonvalue="只有
工具列的窗口"onClick="open('test.htm','','toolbar=yes')"><P><inputtype=buttonvalue="开关窗口一(newWin)"onClick=newWin.close()><P><inputty
pe=buttonvalue="开关目前窗口"onClick=window.close()><P></form>窗口对象范例-打开与开关窗口NeusoftCo.,Ltd.<Script>functiongrow(){window
.resizeBy(0,150)}functionshrink(){window.resizeBy(0,-150)}</script><bodyonMouseOver=grow()onMouseOut=shrink()>广告页here</body
>窗口对象范例-动态调整广告页大小NeusoftCo.,Ltd.使用Timer的语法1.Timer又称为计时器或延迟器，常用来指定于特定时间后执行某程式。2.时间单位为毫秒(千分之一秒)ex.3000
milliseconds=3seconds[window.]setTimeout(“欲执行的程式码或函数”,设定的时间)NeusoftCo.,Ltd.使用Timer的语法(二)如果利用循环将计时器设计成重
复执行，欲终止计时器执行，请使用此一格式。因为要终止计时器的执行，必须指定欲终止的计时器名称。计时器对象名称=[window.]setTimeout(“欲执行的代码或函数”,设定的时间)NeusoftCo.
,Ltd.终止循环內Timer的语法终止计时器的执行，必须指定欲终止的计时器名称。[window.]clearTimeout(计时器对象名称)NeusoftCo.,Ltd.<script>functiontimer(){setTimeo
ut("alert('3秒到了!')",3000)}</script><body><form><inputtype=buttonvalue="计时开始"onClick=timer()></form></body>窗口对象范例-t
imer(1)NeusoftCo.,Ltd.<script>varcounter=0setTimeout("upDate()",3000)//三秒钟后呼叫upDate()functionupDate(){co
unter++status="第"+counter+"次载入"timer1=setTimeout("upDate()",3000)}</script><body><form><inputtype=buttonvalue="计时结束"onClick=cl
earTimeout(timer1)></form></body>窗口对象范例-timer(2)NeusoftCo.,Ltd.历史对象(historyobject)1.history对象是用来存储客戶端访问过的URL资
料。2.这些历史记录是以串列(list)的方式存储。3.各大浏览器均提供检视history工具ex.IE->检视/移至NC->前往(go)NeusoftCo.,Ltd.•历史对象的使用语法如下。•history.特性•history.方法(参数群)•length->history对象中U
RL个数•back()->载入历史对象中上一个URL•forward()->载入历史对象中下一个URL•go()->载入指定的URL历史对象的使用语法NeusoftCo.,Ltd.<body><form><inputtype=buttonvalue="
上一页"onClick=history.back()><inputtype=buttonvalue="下一页"onClick=history.forward()></form></body>窗口对象范例-historyNeusoftCo.,Ltd.<Script>with(
document){write("<ahref=javascript:location.reload()>重新载入此页</a><p>")write("<ahref=javascript:location.re
place('http://www.seed.net.tw')>前往SeedNet方法一</a><p>")write("前往SeedNet方法二<p>".link('http://www.seed.net.tw'))write("<ahref='h
ttp://www.seed.net.tw'>前往SeedNet方法三</a><p>")}</Script><body><ahref="http://www.seed.net.tw">前往SeedNet方
法四</a></body>窗口对象范例-location(1)NeusoftCo.,Ltd.<body><ahref='#'onMouseOver=location.replace('http://www.seed.net.tw')>前往SeedNet方法五</a><p><ahref=
'#'onMouseOver=location.href='http://www.seed.net.tw'>前往SeedNet方法六</a><p><ahref='#'onMouseOver=window.location='htt
p://www.seed.net.tw'>前往SeedNet方法七</a></body>窗口对象范例-location(2)NeusoftCo.,Ltd.Document对象NeusoftCo.,Ltd.1.代表目前的文件信息。2.直接对应至HTML的Body
标签。文档对象(Documentobject)NeusoftCo.,Ltd.•document.特性•document.方法(参数群)•bgColor->相当于HTML的BGCOLOR•alinkColor->相当于HTML的ALINK•linkColor->相
当于HTML的LINK•vlinkColor->相当于HTML的VLINK•fgColor->相当于HTML的TEXT•title->相当于HTML的<title>•lastModified->最近更新日期•URL->文件的U
RL文档对象的使用语法NeusoftCo.,Ltd.DocumentAnchorAppletAreaImageFormLink文档对象的对象阶层图NeusoftCo.,Ltd.<Script>document.write("◎本页最后更新日期：")document.writ
e(document.lastModified)</Script>文档对象范例–最近更新时间NeusoftCo.,Ltd.Form对象NeusoftCo.,Ltd.1.用于定义表单，提供使用者输入资料。2.包含许多控制类型。3.直接对应至HTML的表单元件。表单对象(Formobject)Neus
oftCo.,Ltd.FormButtonCheckboxFileUploadHiddenPasswordRadioResetSelectSubmitTextTextarea表单对象的对象阶层图NeusoftCo.,Ltd.•表单名称
.特性•表单名称.方法(参数群)•forms[索引值].特性•forms[索引值].方法(参数群)表单对象的使用语法NeusoftCo.,Ltd.•action->ACTION属性设定值•elements->以陣列代表表单內所有元件•encoding->使用POST传送时之编码方式•length
->表单內元件个数•method->指定传送方式(POST/GET)•target->将执行结果于特定窗口內执行表单对象的特性NeusoftCo.,Ltd.•表单对象可使用的方法如下。•reset()->模拟按下reset按钮的动作•submit()->模拟按下su
bmit按钮的动作•toString()->传回字串表示值表单对象的方法NeusoftCo.,Ltd.•显示一个可供输入的域。可使用的事件处理程序：onBlur,onChange,onFocusonKeyDown,onKeyUponMouseDown,onM
ouseUp本文对象(Textobject)NeusoftCo.,Ltd.•type=text//类型为本文•name=tel//Text名称•value=03-4257387//初始值•size=20//Text大小•title=提示值//提示值•AccessKey=L//快捷键
值•maxlength=10//可输入资料长度•readonly//指定成为只读属性本文对象相关参数NeusoftCo.,Ltd.文本对象的对象特性defaultValue->该元件预设值type->该元件类型name->该元件识別名称value->
该元件目前输入值NeusoftCo.,Ltd.1.显示一个可供选择(单选)的按钮。2.ON表示确认﹔OFF表示不确认。可使用的事件处理程序：onBlur,onClick,onFocusonKeyDown,onKeyUponMouse
Down,onMouseUp圆钮对象(Radioobject)NeusoftCo.,Ltd.•type=radio//类型为圆钮•name=sex//名称为sex•value=boy//传送值为boy•checked//设定为预设选项圆钮对象相关参数Inputty
pe=radioname=sexvalue=boycheckedNeusoftCo.,Ltd.圆钮对象的对象特性checked->判断是否已經核取defaultChecked->该元件预设为核取与否type->该元件类型name->该元件识別名称valu
e->该元件目前输入值NeusoftCo.,Ltd.<formname=form1>性別：<inputtype=radioname=sex>男生<BR><inputtype=radioname=sexchecked
>女生<BR><inputtype=buttonvalue="判断使用者输入"onclick=SEX()></form><script>functionSEX(){if(document.form1.elements[0].checked)sex="男生"elsesex="女生"alert(
'性別是：'+sex)}</script>表单对象范例-radioNeusoftCo.,Ltd.1.显示一个可供选择的复选框。2.ON表示确认﹔OFF表示不确认。可使用的事件处理程序：onBlur,onClick,onFocusonKeyDown,onKeyUponMouseDown,onMou
seUp确认方块对象(Checkboxobject)NeusoftCo.,Ltd.•type=checkbox//类型为确认方块•name=hobby//名称•value=music//传送值•checked//设定为预设选项确认方块对象相关参数I
nputtype=checkedname=hobbyvalue=musicNeusoftCo.,Ltd.1.显示一个可供输入密码的输入框。2.利用*隐藏所输入的资料。可使用的事件处理程序：onBlur,onChange,onFocusonKeyDown
,onKeyUponMouseDown,onMouseUp密码对象(passwordobject)NeusoftCo.,Ltd.•type=password//类型为密码•name=password//名称•value=1234//初始值•size
=20//大小•maxlength=10//可输入资料长度密码对象相关参数Inputtype=passwordname=pwNeusoftCo.,Ltd.<formname=form1>输入密码：<in
puttype=passwordname=pw1><BR>重新输入：<inputtype=passwordname=pw2><BR><inputtype=buttonvalue=开始检查onClick=che
ckPw()></form><Script>functioncheckPw(){if(document.form1.pw1.value!=document.form1.pw2.value)alert("兩組密码不符，请重新输入")elsealert("OK!")}</Scrip
t>表单对象范例-password(1)NeusoftCo.,Ltd.密码对象的对象特性defaultValue->该元件预设值type->该元件类型name->该元件识別名称value->该元件目前输入值NeusoftCo.,Ltd.<Script>functioncheckPwLgh(
index,str){if(str.length!=9){alert('你只输入'+str.length+'位数\n请输入9位数密码')document.form1.elements[index].value=''document.form1.elements[index].f
ocus()}}functioncheckRetype(){if(document.form1.pw.value!=document.form1.retypePw.value){alert("兩組密码不符，请重新输入")document.form1.retypePw.value=''docu
ment.form1.retypePw.focus()}elsealert("密码检查作業完成!")}</Script>…<下页续>表单对象范例-password(2)NeusoftCo.,Ltd.……<接上页><formname=form1>输入
密码：<inputtype=passwordname=pwsize=9maxlength=9onChange=checkPwLgh(0,this.value)><BR>重新输入：<inputtype=passwordna
me=retypePwsize=9maxlength=9onChange=checkPwLgh(1,this.value)><BR><inputtype=buttonvalue=密码检查onClick=checkRetype()></form>表单对象范例-passwor
d(2)NeusoftCo.,Ltd.•提供一个隐藏域，用以储存特殊资料值，以供运算或参考。隐藏对象(hiddenobject)NeusoftCo.,Ltd.•type=hidden//类型为隐藏•name=dummy//对象名称•value=1234//元件
初始值隐藏对象相关参数Inputtype=hiddenname=dummyvalue=1234NeusoftCo.,Ltd.•提供一組选单，供使用者选择。可使用的事件处理程序：onBlur,onChange,onFocus
onClick,onDblClick选择对象(selectobject)NeusoftCo.,Ltd.•name=week//名称•size=3//下拉框大小•multiple//设定为可多选•option//定
义选择的內容•selected//预选项目•value//定义传送值选择对象相关参数NeusoftCo.,Ltd.<form><selectsize=2><optionvalue=0>Sunday<optionvalue=
1>Monday<optionvalue=2>Tuesday<optionvalue=3>Wednesday<optionvalue=4>Thursday<optionvalue=5>Friday<optionvalue=6Sele
cted>Saturday</select></form>表单对象范例-select(1)NeusoftCo.,Ltd.选择对象的对象特性type->该元件类型name->该元件识別名称value->该元件目前输入值selectedIndex-
>选项的索引值length->选项个数options->选项数组NeusoftCo.,Ltd.<Script>url=newArray(2)url[0]="http://www.seed.net.tw"url[1]="ht
tp://www.hinet.net"functionjumpPage(form){i=form.menu.selectedIndex;if(i>0)window.location.href=url[i-
1]}</Script><Form><Selectname=menuonChange="jumpPage(this.form)"><option>--选择ISP--<option>Seednet<optio
n>Hinet</Select></Form>表单对象范例-select(2)NeusoftCo.,Ltd.<Html><Script>functioncreateOptions(){varoption=newOption(document.fo
rm1.select1.value)document.form1.select2.options[2]=option}</script><formname=form1><selectname=select
1size=10><option>可选择项目<option>---------------<optionvalue=香蕉>香蕉<optionvalue=芭樂>芭樂<optionvalue=蘋果>蘋果<o
ptionvalue=梨子>梨子</select>…下页续…表单对象范例–动态选单NeusoftCo.,Ltd.…接上页…<inputtype=buttonvalue="-->"onClick=createOptions
()><selectname=select2size=10><option>选择项目<option>---------------</select></form></Body></Html>表单对象范
例–动态选单NeusoftCo.,Ltd.练习•设计一交换式选单：1.所选取的项目应可列在右方。(按按钮或鼠标点清单项目两下)2.加入右方选单后将左方选项清除。3.设计一个刪除钮可将选项刪除。NeusoftCo.,Lt
d.•提供一个按钮，供触发事件之用。可使用的事件处理程序：onBlur,onClick,onFocus按钮对象(buttonobject)NeusoftCo.,Ltd.•type=button//类型为按钮•name=button1//按钮名称•value=请按我//按钮面显示值•title=送至
服务器//提示值•tabindex=0//定位顺序•disabled//使失效按钮对象相关属性NeusoftCo.,Ltd.按钮对象的对象特性type->该元件类型name->该元件识別名称value->该按钮面显示值di
sabled->该元件生效否NeusoftCo.,Ltd.<formname=form1>动态设定按钮的显示字樣：<BR>请输入：<inputtype=textonChange="document.form1.b
utton1.value=this.value"><BR><inputtype=buttonname=button1value=''></form>表单对象范例-buttonNeusoftCo.,Ltd.<FORMonReset="this.button1.disabled=tru
e"><INPUTTYPE=textonClick="this.form.button1.disabled=false"><INPUTTYPE=buttonname=button1disabledvalue="传送"><INP
UTTYPE=resetvalue="重来"></FORM>表单对象范例-buttonNeusoftCo.,Ltd.•用以将表格內资料送至服务器之用。可使用的事件处理程序：onBlur,onClick,onFocus另外可在F
orm标签內搭配使用onSubmit提交对象(submitobject)NeusoftCo.,Ltd.•type=submit//类型为呈送钮•name=submit1//按钮名称•value=提交//提交钮表面显示值提交对象相关参数Inputtype=submitname=submi
t1value=送出NeusoftCo.,Ltd.提交对象的对象特性type->该元件类型Name->该元件识別名称value->该按钮面显示值NeusoftCo.,Ltd.<Script>functionisReady(){if(docum
ent.form1.text1.value.length==9)returntrueelsealert("请输入9位数密码");returnfalse}</Script><Formname=form1onSubmit="returnisReady()"><i
nputtype=textname=text1><inputtype=submit></form>表单对象范例-submit1.双引号不能省略2.当onSubmit=true时才提交到器Neusoft
Co.,Ltd.<Script>functionisReady(form){if(form.text1.value.length==9)returntrueelsealert("请输入9位数密码")form.text1.focus(
)//将焦点移回textreturnfalse}</Script><Formname=form1onSubmit="returnisReady(this)"><inputtype=textname=text1><inputtype=submit></form>表单对象范例-submi
tNeusoftCo.,Ltd.•用以将表格內资料还原为预设值，即重新输入之意。可使用的事件处理程序：onBlur,onClick,onFocus另外可在Form标签內搭配使用onReset重置对象(resetob
ject)NeusoftCo.,Ltd.•type=reset//类型为重置钮•name=reset1//按钮名称•value=重新输入//重置钮表面显示值重置对象相关参数Inputtype=resetname=reset1value=重新输入NeusoftCo.,Ltd.重置
对象的对象特性type->该元件类型name->该元件识別名称value->该按钮面显示值NeusoftCo.,Ltd.<Formname=form1onReset=alert("重新来吧！")><inputtype=textname=text1><i
nputtype=reset></form>表单对象范例-resetNeusoftCo.,Ltd.•提供一个多列的本文域。可使用的事件处理程序：onBlur,onChange,onFocus本文区域对象(textareaobject)NeusoftC
o.,Ltd.•name=textarea1//按钮名称•rows=8//列数•cols=30//行数(字元数)•readonly//定义为只读属性本文区域对象相关参数Inputtype=resetname=reset1value=重新输入NeusoftCo.,Ltd.本文区域对象的对
象特性type->该元件类型name->该元件识別名称value->本文区域的內容defaultValue->本文区域的预设內容NeusoftCo.,Ltd.<formname=form1>意见留言版......<BR><tex
tareaname=textarea1rows=8cols=30></textarea><inputtype=buttonvalue=显示留言內容onClick=alert('您的留言是：\n---------\n'+document.form1.textarea1.value)>
</form>表单对象范例-textareaNeusoftCo.,Ltd.•提供一个本文域与档案浏览按钮。可使用的事件处理程序：onBlur,onChange,onFocus档案对象(file/fileUploadobject)NeusoftCo.,Ltd.•type=f
ile//型态为档案对象•name=file1//对象名称档案对象相关参数Inputtype=filename=file1NeusoftCo.,Ltd.档案对象的对象特性type->该元件类型name->该元件识別名称value->该元件內容值NeusoftCo.,Ltd.<for
m><inputtype=filename=file1><inputtype=buttononClick=alert(document.forms[0].file1.value)></form>表单对象范例-file
辽公网安备 21102102000191号
营业执照
