Beyond Technology JavaScript(Ver1.0)
目的与目标 能够熟练的使用JavaScript语言对页面中的元素进行动态操作，对Form中的控件可以进行合法性，有效性校验等等。
课程概述 本课程主要是介绍JavaScript语言的语法，如何使用JavaScript对页面中的元素进行动态操作和对页面中可输入，可选择的控件进行校验等。
第一章: JavaScript简介 第二章: JavaScript基本语法 第三掌 JavaScript对象 第四章 在浏览器中使用
第一章: JavaScript简介
JavaScript 历史 JavaScript是由Netscape公司开发的一种脚本语言，结构简单，使用方便，对用户自身知识水平的要求并不高，易学易懂。 Netscape将这种脚本语言命名为LiveScript，它的整个语法以Java为基础，但比Java要简单，同时，由于它是一种脚本语言，所以无需编译，可由浏览器直接解释运行，而不象Java那样需要经过编译。 Netscape见LiveScript大有发展前途，而SUN也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript，造就了这个强力的WEB页开发工具。
JavaScript的特点 1.JavaScript是一种脚本语言 语法和规则没有可编译的编程语言那样严格和复杂，主要用于格式化文本和使用以编程语言编写的已编译好的组件。 2.JavaScript是基于对象的语言 面向对象程序设计力图将程序设计为一些可以完成不同功能的独立部分(即对象)的组合体。基于对象的语言本身已具有创建完成的对象。例如，“日期”对象。 3.JavaScript是事件驱动的语言 当你在Web主页中进行某种操作时，就产生了一个“事件”。事件几乎可以是任何事情:敲击一个按钮、拖动鼠标等均可视为事件。JavaScript是事件驱动的，当事件发生时，它可对之作出响应。具体如何响应某个事件取决于你的事件响应处理程序。 脚本语言是介于 HTML 和 Java、C++ 和 Visual Basic 之类的编程语言之间的语言。HTML 通常用于格式化文本和链接网页。编程语言通常用于向计算机发送一系列复杂指令。脚本语言也可用来向计算机发送指令，但它们的语法和规则没有可编译的编程语言那样严格和复杂。脚本语言主要用于格式化文本和使用以编程语言编写的已编译好的组件。
JavaScript的特点 4.JavaScript是安全的语言 JavaScript被设计为通过浏览器来处理并显示信息，但它不能修改其它文件中的内容。也就是说，它不能将数据存储在Web服务器或用户的计算机上，更不能对用户文件进行修改或删除操作。 5.JavaScript是平台无关的语言 对于一般的计算机程序，它们的运行与平台有关。例如，除非你使用一个仿真器来模拟Windows环境，否则不可能在Macintosh上运行一个Windows应用程序。JavaScript则并不依赖于具体的计算机平台（虽然有一些限制），它只与解释它的浏览器有关。不论你使用Macintosh还是Windows，或是UNIX版本的NetscapeNavigator，JavaScript都可正常运行。
JavaScript的功能 JavaScript的功能总体可以归结为两类： 1、交互性 使用JavaScript可以大大加强WEB页的交互性，如轻松的在你的WEB页中加入按钮，显示带有控制的文本，建立交互式表格等。 2、动态性 JavaScript可以使WEB页上显示的文本信息动起来或是加入一些动画，从而使你的WEB页看上去活泼诱人。
JavaScript与Java语言的比较 Java是由Sun公司开发,与平台无关的、面向对象的程序设计语言，它与JavaScript基于对象的结构相反。Java可以用来设计独立的应用程序，也可以用来创建一种称为Applets的小应用程序。经过编译后，Applets成为一种平台无关的字节代码，这种Applets可以运行在任何平台上，只要该平台具备能够操作Applets的Java虚拟机即可。
JavaScript与Java语言的比较 １、Java程序被编译成为字节代码文件；JavaScript则是将字符正文传递给客户方并由客户方解释执行。 ２、JavaScript是基于对象的，它自身具有已创建完毕的对象；而Java则是面向对象的，对象必须从类中创建。 ３、JavaScript的代码以字符的形式嵌入在HTML文档中；Javaapplets则是由文档引用，其代码以字节代码的形式保存在另一个独立的文件中。
JavaScript与Java语言的比较 ４、在HTML文档中，用标识<SCRIPT>标明JavaScript脚本；而Javaapplets则用标识<APPLET>来标明。 ５、JavaScript采用弱类型；而Java则采用强类型。 ６、JavaScript采用动态联编;而Java，则采用静态联编。 静态联编 静态联编是指联编工作出现在编译连接阶段，这种联编又称早期联编，因为这种联编过程是在程序开始运行之前完成的。 动态联编 编译程序在编译阶段并不能确切知道将要调用的函数，只有在程序执行时才能确定将要调用的函数，为此要确切知道该调用的函数，要求联编工作要在程序运行时进行，这种在程序运行时进行联编工作被称为动态联编，或称动态束定，又叫晚期联编。
JavaScript的局限性 JavaScript为Web内容设计人员提供了极大的灵活性和控制手段。它是一种优秀的“粘合剂”，能够将一个Web节点中的不同组成部分捆绑在一起，成为一个紧密结合的信息源。然而，像任何事物一样，JavaScript也有它的局限性。 浏览器相关的局限性：IE,Nectscape 平台相关的局限性:Windows,Unix
JavaScript的局限性 安全性有关的局限性 JavaScript的设计目标在于“Web安全性”，它比以前任何一种方法都更能保证Web的安全(例如：perl和CGI)，这自然是牺牲JavaScript的一些功能换来的。 (1) JavaScript不能打开、读、写、保存用户计算机上的文件。它有权访问的唯一信息就是它所嵌入的那一个Web主页中的信息。 (2) JavaScript不能打开、读、写、保存Web服务器上的文件。尽管你可以使用它来提交HTML命令，但HTML命令也不能打开那些文件。
JavaScript与HTML 在HTML文档里面，<html>标签对内包容了<head>和<body>标签对。<head>标签对内包容了<title>标签对, <title>标签对内的文字串是显示窗口的标题。<body>标签对内包容了显示页面的内容。JavaScript的基本成分—变量、函数和事件处理方法—和HTML代码编织在一起，变量和函数被包容在新标签对<script>内，而<script>标签对则一般放在<head>标签对内；事件处理方法可以被包容在任何<body>中的标签对内，用于响应某事件，激发某 JavaScrip函数。 包括两部分： (1)<Script>标识，它用来通知解释器，有脚本嵌入在此标识之中； (2)Language属性，它用来说明在标识之中是脚本语言。 通过使用语句document.write()，可以显示用户信息，它是JavaScript基本的输出。
JavaScript与HTML <html> <head> <title>js example</title> <Script Language=“JavaScript”> document.write(“hello world!”) </Script> </head> <body> //可以包含事件响应代码等 </body> </html> 包括两部分： (1)<Script>标识，它用来通知解释器，有脚本嵌入在此标识之中； (2)Language属性，它用来说明在标识之中是脚本语言。 通过使用语句document.write()，可以显示用户信息，它是JavaScript基本的输出。
JavaScript包含文件 非常重要：js文件里不能有<script></script>或其它注释。 你可以将JavaScript文件在HTML文件外面存放！把你的零碎们放到一起，起个名字，再给它个js的文件尾。 非常重要：js文件里不能有<script></script>或其它注释。 例如：把pku.js文件链接到HTML文件中的句型如下： <script src=“pku.js” language="JavaScript“></script>
第二章: JavaScript基本语法
JavaScript的语法结构 JavaScript的语言结构既宽松又简单； JavaScript的基本概念： 变量：一个代表某个值的名字就是变量。 表达式：A=1+B；就是表达式。 函数：具有一定功能的程序段； 1、parseInt可以将字符串转化为整型数。 2、paseFloat将字符串转化为附点数。
JavaScript的数据类型 JavaScript支持的数据类型共有四种 1、数值型：其中包括整型数和浮点型数。 2、布尔型：即逻辑值，true或flase。 3、字符串型：由单个或多个文本字符组成。 4、空值：由关键字null代表。 JavaScript的命名规则 1、变量名中可以包含数字0-9、大写或小写的拉丁字母和下划线。 2、变量名的首字符必须为字母或下划线。 3、变量名对字母的大小写敏感。 4、变量名的长度必须在一行内。 5、变量名中不能有空格与其它标点符号。
变量与表达式 创建变量 var anumber = 137;//变量的值是一个数 var anumber1=2; var astring = “1”; // 变量的值也可以是一个字符串 var astring1=“hello”; 表达式 xx=astring1+astring //结果是x=“hello1” xx=anumber+anumber1//结果是xx=139 xx=anumber+astring //结果是xx=“1371”
表达式与操作符 赋值操作符： =、+=、-=、*=、 /=、%=、<<=、>>=、>>>=、&=、^=、|=； 条件表达式： status = (age >= 18) ? "adult" : "minor"； 算数操作符： +、- 、* 、/ 、% 、++和--，y = ++x； 位逻辑运算符： &、|、^; <<、 >>、 >>> 布尔操作符： &&、||、! 比较操作符： 有 ==、>、>=、<、<=、!=； 连接操作符 + 用于连接两个字符串： x= "Hello "; y= "World!"; x + y 为 "Hello World!" 其他操作符 in, typeof instanceof等
JavaScript流程控制语句 if( condition ) {...} else {... }； if和else: if( condition ) {...} else {... }； for和while： for( 初始化表达式; 条件; 增值表达式) { 执行语句; }； while(条件) {条件为真执行; }； break可以用在for或while循环中，使循环中断，跳到for或while循环结束的位置； continue用在for或while循环可以跳过循环体中剩余的语句，直接进行循环的下一次迭代.；
第三章 JavaScript对象
JavaScript对象模型 在一个对象中包含的其他对象和变量被称为特性 (property)； JavaScript被称为是“基于对象的” (而不是面向对象的)，有对象的概念：数据和操作的封装, 但没有继承的概念。从定义的角度看, JavaScript程序中有两种对象：JavaScript提供的内置对象（built-in object）和程序中定义的对象。 一个对象是一个由变量、其他对象或方法组成的一个集合： 在一个对象中包含的其他对象和变量被称为特性 (property)； 在一个对象内的函数(function)称为这个对象的方法( method)； 在一个特定的对象中的一些特性的序列称为数组, 例如document对象中的image[]； 多维数组是由含有数组特性的对象数组构造的
父对象.特性1[索引1].特性2..最后特性[索引N] 对象的方法(method)可以如此引用： 对象.方法(参数组)； 当一个文档加载到浏览器后，它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存。要有一种方法让Script指出它要的是哪一个对象，这就是对象引用。JavaScript用严格的层次结构引导Script至文档的任何区域，对每个对象的引用必须包括从顶部到对象的所有层次，直至对象名，路径中各个相连的对象之间用句点分开。 变量可以写成下面的形式： 父对象.特性1[索引1].特性2..最后特性[索引N] 对象的方法(method)可以如此引用： 对象.方法(参数组)； 一个含有典型特性和方法的对象的例子： document 是对应一个 .html文档的对象，浏览器读进文档后生成； document.writeln(“hello”) 是这个对象的一个方法，输出带换行的字符串； document.location 是该对象的一个特性，含有它的URL。
用户对象的定义 JavaScript定义“类”、“函数”的语法是一样的，而且这样的函数就成了该类的构造函数! 用户用函数定义来定义类，然后用new语句创建该类的一个实例。以下是“类”的例子。（实际效果） <HEAD><script language=“javascript”> function add() { this.result = this.left + this.right; } function MyClass(n) { this.left = n; this.right = 6; this.result = 0; this.sum = add;} </script></HEAD> <BODY><script language=“javascript” > x = new MyClass(4); x.sum(); document.write(x.result); </script></BODY>
prototype 属性 返回对象类型原型的引用。 引用方式： objectName.prototype objectName 参数是对象的名称。
JavaScript的对象: Array 属性：length，它指明了数组的长度。 方法： join() 将数组值连接变为一个字符串； reverse()将数组值倒序； sort() 将对数组值进行排序; AAA=new Array(3); AAA[0]="B"; AAA[1]="A"; AAA[2]="C"; document.write(AAA.length+"<br>"); document.write(AAA.join()+"<br>"); document.write(AAA.reverse().join()+"<br>"); document.write(AAA.sort().join())+"<br>";
JavaScript的对象:String 属性：length属性表明字符串长度。 方法 字符串的转换； toUpperCase()将字符串所有字符转为大写； toLowerCase()将字符串所有字符转为小写； toString()将非字符串对象显示转化为字符串。 字符串的处理； substring()将括号中参数所指的字符串片段返回； charAt()返回括号中指定位置字符串的内容； split()根据指定的分隔符把一个字符串划分为一个字符串数组。 如:newstring = astring.substring(index1,index2); // 返回一个位置在 index1和index2-1之间的字符串，特别是如果 index2 < index1，子串返回 index2和index1-1之间的部分!
JavaScript的对象:Date 属性：无 方法： a、设定日期 setDate(),setMonth(),setYear()； setTime()设定时间1970.1.1开始用毫秒数来计时； b、日期格式转换 .Date.UTC()返回一个通用时间，距1970年1月1日午夜的毫秒。 c、获取日期 .Date.getDate(), .Date.getMonth(), .Date.getYear(), .Date.parse(), Date.getDay(); d、处理时区 .toGMTString()将日期时间值转换为的字符串(GMT时间)； .tolocaleString()将日期时间值转换为的字符串(当地时间)。
JavaScript的对象:Math 属性： .E：为自然对数的底(约为2.718)； .PI：为圆周率(约为3.14159)； …… 方法： .abs()绝对值计算； .pow()数的幂； .sqrt()计算平方根； .cos()、.sin()、.tan() 、.acos、.asin()、.atan(); ……
JavaScript的屏幕对象 显示器－screen。各种相关特征涵义参数举例说明 screen.height屏幕高度 screen.width屏幕宽度 screen.availHeight屏幕可见高度 screen.availWidth屏幕可见宽度 screen.colorDepth色深8 ，16，32位颜色
JavaScript事件模型 事件：用户对网页的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统行为。例如加载一张网页，点击一个超链等。 事件处理程序的引入（如何使一段JavaScript程序和事件的发生联系起来？）。 “on事件名”是JavaScript规定的对应事件处理程序柄（event handler）的名字。例如onClick、onfocus、onSubmit等等。
JavaScript事件模型(续) 第一种引入方式：事件处理程序柄名以属性名的形式在HTML文本中某些适当的标记中出现，而对应的属性值是由网页编写者提供的JavaScript程序段（或事件处理函数名） <input type=“text” name=“age” onChange=“isNumber(this)”>； 第二种引入方式：将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性（property） document.forms[0].age.onchange=isNumber； 例：让事件处理程序作为“属性值” <BODY onLoad = "window.defaultStatus = 'This is my page'; return true"> 这里，事件处理程序柄的名字是大小写不敏感的。这与HTML文本中对标记的属性名的松散要求是一致的。 OnLoad在网页完全加载完后执行(即包括图像,applet等)； OnUnLoad在网页退出之前执行。
JavaScript程序的注意事项 最好把源码写进HTML文件头里，<title>及</head>之间是合适的地方。 JavaScript程序要用<script>，language这个限定参数也是必要的。再用</script>把程序关闭。 提示开始标记<!--。最后得用结束标记//-->来关闭提示。 对所编程序加必要的注释。单行或多行注释加在/**/号中间来标示；单行注释则加在//号后面。
第四章 在浏览器中使用
窗口对象(Window object) 1.代表浏览器器所打开的窗口。 2.通常代表目前正在使用(focus)的窗口。 3.如果打开多个浏览器窗口时，可以利用别名(alias)来区别它们,如： ex. opener, parent, self, window, top
窗口对象使用语法 window.特性 window.方法(参数群) self.特性 //self代表目前window或frame名称 top.特性 //top代表最顶层的窗口 top.方法(参数群) parent.特性 //parent代表目前框架的父框架 parent.方法(参数群) 窗口名称.特性 窗口名称.方法(参数) 特性 方法(参数)
窗口对象的属性 closed ->说明窗口是否已经关闭 defaultStatus ->浏览器底部预设的状态列讯息 length ->窗口重的框架个数 Frame ->窗口中的frame frames ->窗口中的frame数组 name ->窗口的名称 opener ->打开该窗口的窗口名称 status ->浏览器底部自行设定的状态信 document ->窗口中的document对象 history ->窗口history对象 location ->窗口对象的对象中的location对象
窗口对象的方法 alert() ->显示警告讯息 confirm() ->显示确认讯息 prompt() ->显示提示讯息 focus() ->成为焦点 blur() ->移开焦点(成为背景处理) open() ->打开新浏览窗口 close() ->开关已打开的浏览窗口 eval() ->执行引数运算式计算
窗口对象的方法 resizeBy(x, y) ->将窗口尺寸向X轴及Y轴调整 moveBy(x, y) ->将窗口向X轴及Y轴移动 scroll(x,y) ->卷动至指定的座標 print() ->列印指定之窗口內容 setTimeout() ->设定一定时程序(计时器) clearTimeout() ->撤销一定时程序(计时器) toString() ->传回字串表示值 valueOf() -->传回数值表示值
范例 – 自动放大窗口 <Script> function grow(){ window.resizeBy( 50, 50) } function shrink(){ window.resizeBy( -50, -50) </script> <body onMouseOver=grow() onMouseOut=shrink()> <H1>将窗口放大与缩小</H1> </body>
范例一 – 自动卷动窗口 <Script> function scrollIt() { for (y=1; y<=1000; y++){ scroll(1,y) } </Script> <body onDblClick=scrollIt()> 按鼠标左键兩下，画面自动卷动.... <br><br><br><br><br><br><br><br><br><br><br><br><br> ... The End .... <body>
[窗口对象名称 =] [Window.] open (‘[URL]‘ , ‘[新窗口名称] ‘ , [‘窗口的规格‘] ) 打开新窗口对象的语法 [窗口对象名称 =] [Window.] open (‘[URL]‘ , ‘[新窗口名称] ‘ , [‘窗口的规格‘] ) 窗口对象名称：用以使用窗口对象的特性与方法。 ex.窗口对象名称.close 窗口名称：用以识別该窗口。 ex.<a href=“http://www.seed.net.tw” target=“窗口名称”>
窗口对象范例 - 打开与开关窗口 <form> <input type=button value="打开窗口一(newWin)" onClick="newWin=window.open('test.htm','')"><P> <input type=button value="height为150点,width为200点" onClick="open('test.htm','','height=150,width=200')"><P> <input type=button value="只有工具列的窗口" onClick="open('test.htm','','toolbar=yes')"><P> <input type=button value="开关窗口一(newWin)" onClick=newWin.close()><P> <input type=button value="开关目前窗口" onClick=window.close()><P> </form>
窗口对象范例- 动态调整广告页大小 <Script> function grow(){ window.resizeBy( 0, 150) } function shrink(){ window.resizeBy( 0, -150) </script> <body onMouseOver=grow() onMouseOut=shrink()> 广告页 here </body>
[window.]setTimeout(“欲执行的程式码或函数”, 设定的时间) 使用 Timer 的语法 [window.]setTimeout(“欲执行的程式码或函数”, 设定的时间) 1.Timer又称为计时器或延迟器，常用来指定于 特定时间后执行某程式。 2.时间单位为毫秒(千分之一秒) ex. 3000 milliseconds = 3 seconds
使用 Timer 的语法(二) 如果利用循环将计时器设计成重复执行，欲终止计时器执行，请使用此一格式。 计时器对象名称 = [window.]setTimeout(“欲执行的代码或函数”, 设定的时间) 如果利用循环将计时器设计成重复执行，欲终止计时器执行，请使用此一格式。 因为要终止计时器的执行，必须指定欲终止 的计时器名称。
[window.]clearTimeout(计时器对象名称) 终止循环內 Timer 的语法 [window.]clearTimeout(计时器对象名称) 终止计时器的执行，必须指定欲终止的计时器名称。
窗口对象范例 - timer(1) <script> function timer() { setTimeout("alert('3秒到了!')",3000) } </script> <body><form> <input type=button value="计时开始" onClick=timer()> </form></body>
窗口对象范例 - timer(2) <script> var counter=0 setTimeout(" upDate() ",3000) //三秒钟后呼叫upDate() function upDate() { counter ++ status = "第" + counter + "次载入" timer1 = setTimeout("upDate()",3000) } </script> <body><form> <input type=button value="计时结束" onClick=clearTimeout(timer1)> </form></body>
历史对象(history object) history对象是用来存储客戶端访问过的URL资料。 这些历史记录是以串列(list)的方式存储。 各大浏览器均提供检视history工具 ex. IE -> 检视/移至 NC -> 前往(go)
历史对象的使用语法如下。 历史对象的使用语法 history.特性 history.方法(参数群) length ->history对象中URL个数 back() ->载入历史对象中上一个URL forward() ->载入历史对象中下一个URL go() ->载入指定的URL
窗口对象范例 - history <body> <form> <input type=button value="上一页" onClick=history.back()> <input type=button value="下一页" onClick=history.forward()> </form> </body>
窗口对象范例 - location(1) <Script> with (document) { write("<a href=javascript:location.reload()>重新载入此页</a><p>") write("<a href =javascript:location.replace('http://www.seed.net.tw')> 前往SeedNet方法一</a><p>") write("前往SeedNet方法二<p>".link('http://www.seed.net.tw')) write("<a href='http://www.seed.net.tw'>前往SeedNet方法三</a><p>") } </Script> <body> <a href="http://www.seed.net.tw">前往SeedNet方法四</a> </body>
窗口对象范例 - location(2) <body> <a href='#' onMouseOver=location.replace('http://www.seed.net.tw')> 前往SeedNet方法五</a><p> <a href='#' onMouseOver=location.href='http://www.seed.net.tw'> 前往SeedNet方法六</a><p> <a href='#' onMouseOver=window.location='http://www.seed.net.tw'> 前往SeedNet方法七</a> </body>
Document 对象
文档对象(Document object) 1.代表目前的文件信息。 2.直接对应至HTML的Body标签。
文档对象的使用语法 document.特性 document.方法(参数群) bgColor ->相当于 HTML 的 BGCOLOR alinkColor ->相当于 HTML 的 ALINK linkColor ->相当于 HTML 的 LINK vlinkColor ->相当于 HTML 的 VLINK fgColor ->相当于 HTML 的 TEXT title ->相当于 HTML 的 <title> lastModified ->最近更新日期 URL ->文件的 URL
文档对象的对象阶层图 Document Anchor Applet Area Image Form Link
文档对象范例 – 最近更新时间 <Script> document.write("◎本页最后更新日期： ") document.write(document.lastModified) </Script>
Form 对象
表单对象(Form object) 1.用于定义表单，提供使用者输入资料。 2.包含许多控制类型。 3.直接对应至HTML的表单元件。
表单对象的对象阶层图 Form Button Checkbox FileUpload Hidden Password Radio Reset Select Submit Text Textarea
表单对象的使用语法 表单名称.特性 表单名称.方法(参数群) forms[索引值].特性 forms[索引值].方法(参数群)
表单对象的特性 action ->ACTION属性设定值 elements ->以陣列代表表单內所有元件 encoding ->使用POST传送时之编码方式 length ->表单內元件个数 method ->指定传送方式 (POST/GET) target ->将执行结果于特定窗口內执行
表单对象的方法 表单对象可使用的方法如下。 reset() ->模拟按下 reset 按钮的动作 submit() ->模拟按下 submit 按钮的动作 toString() ->传回字串表示值
onBlur, onChange, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp 本文对象(Text object) 显示一个可供输入的域。 可使用的事件处理程序： onBlur, onChange, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp
type = text //类型为本文 name = tel //Text名称 value = 03-4257387 //初始值 本文对象相关参数 type = text //类型为本文 name = tel //Text名称 value = 03-4257387 //初始值 size = 20 //Text大小 title = 提示值 //提示值 AccessKey = L //快捷键值 maxlength = 10 //可输入资料长度 readonly //指定成为只读属性
文本对象的对象特性 defaultValue -> 该元件预设值 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值
onBlur, onClick, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp 圆钮对象(Radio object) 1. 显示一个可供选择(单选)的按钮。 2. ON 表示确认﹔OFF 表示不确认。 可使用的事件处理程序： onBlur, onClick, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp
Input type=radio name=sex value=boy checked 圆钮对象相关参数 type = radio //类型为圆钮 name = sex //名称为sex value = boy //传送值为boy checked //设定为预设选项 Input type=radio name=sex value=boy checked
圆钮对象的对象特性 checked ->判断是否已經核取 defaultChecked ->该元件预设为核取与否 type ->该元件类型 name ->该元件识別名称 value ->该元件目前输入值
表单对象范例 - radio <form name=form1> 性別： <input type=radio name=sex>男生<BR> <input type=radio name=sex checked>女生<BR> <input type=button value="判断使用者输入" onclick=SEX()> </form> <script> function SEX(){ if (document.form1.elements[0].checked) sex="男生" else sex="女生" alert('性別是：'+sex) } </script>
确认方块对象(Checkbox object) 1. 显示一个可供选择的复选框。 2. ON 表示确认﹔OFF 表示不确认。 可使用的事件处理程序： onBlur, onClick, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp
Input type=checked name=hobby value=music 确认方块对象相关参数 type = checkbox //类型为确认方块 name = hobby //名称 value = music //传送值 checked //设定为预设选项 Input type=checked name=hobby value=music
密码对象(password object) 1.显示一个可供输入密码的输入框。 2.利用 * 隐藏所输入的资料。 可使用的事件处理程序： onBlur, onChange, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp
Input type=password name=pw 密码对象相关参数 type = password //类型为密码 name = password //名称 value = 1234 //初始值 size = 20 //大小 maxlength = 10 //可输入资料长度 Input type=password name=pw
表单对象范例 - password(1) <form name=form1> 输入密码：<input type=password name=pw1><BR> 重新输入：<input type=password name=pw2><BR> <input type=button value=开始检查 onClick=checkPw()> </form> <Script> function checkPw(){ if (document.form1.pw1.value != document.form1.pw2.value) alert ("兩組密码不符，请重新输入") else alert ("OK!") } </Script>
密码对象的对象特性 defaultValue -> 该元件预设值 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值
表单对象范例 - password(2) <Script> function checkPwLgh(index,str){ if (str.length != 9){ alert('你只输入'+str.length+'位数\n请输入9位数密码') document.form1.elements[index].value = '' document.form1.elements[index].focus() }} function checkRetype(){ if (document.form1.pw.value != document.form1.retypePw.value){ alert ("兩組密码不符，请重新输入") document.form1.retypePw.value = '' document.form1.retypePw.focus() } else alert ("密码检查作業完成!")} </Script> …<下页续>
表单对象范例 - password(2) ……<接上页> <form name=form1> 输入密码： <input type=password name=pw size=9 maxlength=9 onChange=checkPwLgh(0,this.value)><BR> 重新输入： <input type=password name=retypePw size=9 maxlength=9 onChange=checkPwLgh(1,this.value)><BR> <input type=button value=密码检查 onClick=checkRetype()> </form>
隐藏对象(hidden object) 提供一个隐藏域，用以储存 特殊资料值，以供运算或参考。
Input type=hidden name=dummy value=1234 隐藏对象相关参数 type = hidden //类型为隐藏 name = dummy //对象名称 value = 1234 //元件初始值 Input type=hidden name=dummy value=1234
选择对象(select object) 提供一組选单，供使用者选择。 可使用的事件处理程序： onBlur, onChange, onFocus onClick, onDblClick
选择对象相关参数 name = week //名称 size = 3 //下拉框大小 multiple //设定为可多选 option //定义选择的內容 selected //预选项目 value //定义传送值
表单对象范例 - select(1) <form> <select size=2> <option value=0>Sunday <option value=1>Monday <option value=2>Tuesday <option value=3>Wednesday <option value=4>Thursday <option value=5>Friday <option value=6 Selected>Saturday </select> </form>
选择对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值 selectedIndex -> 选项的索引值 length -> 选项个数 options -> 选项数组
表单对象范例 - select(2) <Script> url = new Array(2) function jumpPage(form) { i = form.menu.selectedIndex; if (i>0) window.location.href = url[i-1] } </Script> <Form><Select name=menu onChange="jumpPage(this.form)"> <option>--选择ISP--<option>Seednet<option>Hinet </Select></Form>
表单对象范例 – 动态选单 <Html><Script> function createOptions(){ var option = new Option(document.form1.select1.value) document.form1.select2.options[2] = option } </script> <form name=form1> <select name=select1 size=10> <option>可选择项目 <option>--------------- <option value=香蕉>香蕉 <option value=芭樂>芭樂 <option value=蘋果>蘋果 <option value=梨子>梨子 </select> …下页续 …
表单对象范例 – 动态选单 …接上页… <input type=button value="-->" onClick=createOptions()> <select name=select2 size=10> <option>选择项目 <option>--------------- </select></form> </Body> </Html>
练习 设计一交换式选单： 所选取的项目应可列在右方。(按按钮或鼠标点清单项目两下) 加入右方选单后将左方选项清除。 设计一个刪除钮可将选项刪除。
按钮对象(button object) 提供一个按钮，供触发事件之用。 可使用的事件处理程序： onBlur, onClick, onFocus
按钮对象相关属性 type = button //类型为按钮 name = button1 //按钮名称 value = 请按我 //按钮面显示值 title = 送至服务器 //提示值 tabindex = 0 //定位顺序 disabled //使失效
按钮对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 该按钮面显示值 disabled -> 该元件生效否
表单对象范例 - button <form name=form1> 动态设定按钮的显示字樣：<BR> 请输入： <input type=text onChange="document.form1.button1.value=this.value"> <BR> <input type=button name=button1 value=' '> </form>
表单对象范例 - button <FORM onReset="this.button1.disabled=true"> <INPUT TYPE=text onClick="this.form.button1.disabled=false"> <INPUT TYPE=button name=button1 disabled value=" 传 送 "> <INPUT TYPE=reset value=" 重 来 "> </FORM>
提交对象(submit object) 用以将表格內资料送至服务器之用。 可使用的事件处理程序： onBlur, onClick, onFocus 另外可在Form标签內搭配使用 onSubmit
Input type=submit name=submit1 value=送出 提交对象相关参数 type = submit //类型为呈送钮 name = submit1 //按钮名称 value = 提交 //提交钮表面显示值 Input type=submit name=submit1 value=送出
提交对象的对象特性 type -> 该元件类型 Name -> 该元件识別名称 value -> 该按钮面显示值
表单对象范例 - submit <Script> function isReady() { if (document.form1.text1.value.length == 9) return true else alert("请输入9位数密码");return false } </Script> <Form name=form1 onSubmit="return isReady()"> <input type=text name=text1> <input type=submit> </form> 1.双引号不能省略 2.当onSubmit = true 时才提交到器
表单对象范例 - submit <Script> function isReady(form) { if (form.text1.value.length == 9) return true else alert("请输入9位数密码") form.text1.focus() //将焦点移回 text return false } </Script> <Form name=form1 onSubmit="return isReady(this)"> <input type=text name=text1> <input type=submit> </form>
重置对象(reset object) 用以将表格內资料还原为预设值， 即重新输入之意。 可使用的事件处理程序： onBlur, onClick, onFocus 另外可在Form标签內搭配使用 onReset
Input type=reset name=reset1 value=重新输入 重置对象相关参数 type = reset //类型为重置钮 name = reset1 //按钮名称 value = 重新输入 //重置钮表面显示值 Input type=reset name=reset1 value=重新输入
重置对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 该按钮面显示值
表单对象范例 - reset <Form name=form1 onReset=alert("重新来吧！")> <input type=text name=text1> <input type=reset> </form>
本文区域对象(textarea object) 提供一个多列的本文域。 可使用的事件处理程序： onBlur, onChange, onFocus
Input type=reset name=reset1 value=重新输入 本文区域对象相关参数 name = textarea1 //按钮名称 rows = 8 //列数 cols = 30 //行数(字元数) readonly //定义为只读属性 Input type=reset name=reset1 value=重新输入
本文区域对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 本文区域的內容 defaultValue -> 本文区域的预设內容
表单对象范例 - textarea <form name=form1> 意见留言版......<BR> <textarea name=textarea1 rows=8 cols=30> </textarea> <input type=button value=显示留言內容 onClick= alert('您的留言是：\n---------\n'+document.form1.textarea1.value)> </form>
档案对象(file/fileUpload object) 提供一个本文域与档案浏览按钮。 可使用的事件处理程序： onBlur, onChange, onFocus
Input type=file name=file1 档案对象相关参数 type = file //型态为档案对象 name = file1 //对象名称 Input type=file name=file1
档案对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件內容值
表单对象范例 - file <form> <input type=file name=file1> <input type=button onClick=alert(document.forms[0].file1.value)> </form>