Js培训

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 是事件驱动的，当事件发生时，它可对之作出响应。具体如何响应某个事件取决于你的事件响应处理程序。

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 语言的比较
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 函数。

JavaScript 与 HTML
<html>
<head>
<title>js example</title>
<Script Language= “ JavaScript”> document.write(“hello world!”)
</Script>
</head>
<body>
// 可以包含事件响应代码等
</body>
</html>

JavaScript 包含文件
你可以将 JavaScript 文件在 HTML 文件外面存放！把你的零碎们放到一起，起个名字，再给它个 js 的文件尾。
非常重要： js 文件里不能有 <script></script> 或其它注释。
例如：把 pku.js 文件链接到 HTML 文件中的句型如下：
<script src= “ pku.js” language="JavaScript“></script>

第二章 : JavaScript 基本语法

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 和 else:
if( condition ) {...} else {... } ；
for 和 while ：
for( 初始化表达式 ; 条件 ; 增值表达式 ) { 执行语句 ; } ；
while( 条件 ) { 条件为真执行 ; } ；
break 可以用在 for 或 while 循环中，使循环中断，跳到 for 或 while 循环结束的位置；
continue 用在 for 或 while 循环可以跳过循环体中剩余的语句，直接进行循环的下一次迭代 . ；

第三章 JavaScript 对象

JavaScript 对象模型
JavaScript 被称为是“基于对象的” ( 而不是面向对象的 ) ，有对象的概念：数据和操作的封装 , 但没有继承的概念。从定义的角度看 , JavaScript 程序中有两种对象： JavaScript 提供的内置对象（ built-in object ）和程序中定义的对象。
一个对象是一个由变量、其他对象或方法组成的一个集合：
在一个对象中包含的其他对象和变量被称为特性 (property) ；
在一个对象内的函数 (function) 称为这个对象的方法 ( method) ；
在一个特定的对象中的一些特性的序列称为数组 , 例如 document 对象中的 image[] ；
多维数组是由含有数组特性的对象数组构造的

当一个文档加载到浏览器后，它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存。要有一种方法让 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> 把程序关闭。
　提示开始标记  来关闭提示。
　对所编程序加必要的注释。单行或多行注释加在 /**/ 号中间来标示；单行注释则加在 // 号后面。

第四章在浏览器中使用

1. 代表浏览器器所打开的窗口。 2. 通常代表目前正在使用 (focus) 的窗口。 3. 如果打开多个浏览器窗口时，可以利用别名 (alias) 来区别它们 , 如： ex. opener, parent, self, window, top 窗口对象 (Window object)

窗口对象使用语法 window. 特性 window. 方法 ( 参数群 ) self. 特性 //self 代表目前 window 或 frame 名称 self. 方法 ( 参数群 ) 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> <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> ... The End .... <body> 范例一 – 自动卷动窗口

打开新窗口对象的语法 [ 窗口对象名称 =] [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> 窗口对象范例 - 动态调整广告页大小

使用 Timer 的语法 1.Timer 又称为计时器或延迟器，常用来指定于特定时间后执行某程式。 2. 时间单位为毫秒 ( 千分之一秒 ) ex. 3000 milliseconds = 3 seconds [window.]setTimeout( “ 欲执行的程式码或函数” , 设定的时间 )

使用 Timer 的语法 ( 二 ) 如果利用循环将计时器设计成重复执行，欲终止计时器执行，请使用此一格式。　因为要终止计时器的执行，必须指定欲终止的计时器名称。计时器对象名称 = [window.]setTimeout(“ 欲执行的代码或函数” , 设定的时间 )

终止循环內 Timer 的语法终止计时器的执行，必须指定欲终止的计时器名称。 [window.]clearTimeout( 计时器对象名称 )

历史对象 (history object)
history 对象是用来存储客戶端访问过的 URL 资料。
这些历史记录是以串列 (list) 的方式存储。
各大浏览器均提供检视 history 工具
ex. IE -> 检视 / 移至
NC -> 前往 (go)

历史对象的使用语法如下。
history. 特性
history. 方法 ( 参数群 )
length ->history 对象中 URL 个数
back() -> 载入历史对象中上一个 URL
forward() -> 载入历史对象中下一个 URL
go() -> 载入指定的 URL
历史对象的使用语法

<body> <form> <input type=button value=" 上一页 " onClick= history.back() > <input type=button value=" 下一页 " onClick= history.forward() > </form> </body> 窗口对象范例 - history

<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(1)

<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> 窗口对象范例 - location(2)

Document 对象

1. 代表目前的文件信息。 2. 直接对应至 HTML 的 Body 标签。文档对象 (Document object)

document. 特性
d ocument. 方法 ( 参数群 )
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 对象

1. 用于定义表单，提供使用者输入资料。 2. 包含许多控制类型。 3. 直接对应至 HTML 的表单元件。表单对象 (Form object)

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)

type = text // 类型为本文
name = tel // Text 名称
value = 03-4257387 // 初始值
size = 20 // Text 大小
title = 提示值 // 提示值
AccessKey = L // 快捷键值
maxlength = 10 // 可输入资料长度
readonly // 指定成为只读属性
本文对象相关参数

文本对象的对象特性 defaultValue -> 该元件预设值 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值

1. 显示一个可供选择 ( 单选 ) 的按钮。 2. ON 表示确认﹔ OFF 表示不确认。可使用的事件处理程序： onBlur, onClick, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp 圆钮对象 (Radio object)

type = radio // 类型为圆钮
name = sex // 名称为 sex
value = boy // 传送值为 boy
checked // 设定为预设选项
圆钮对象相关参数 Input type=radio name=sex value=boy checked

圆钮对象的对象特性 checked -> 判断是否已經核取 defaultChecked -> 该元件预设为核取与否 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值

<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> 表单对象范例 - radio

1. 显示一个可供选择的复选框。 2. ON 表示确认﹔ OFF 表示不确认。可使用的事件处理程序： onBlur, onClick, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp 确认方块对象 (Checkbox object)

type = checkbox // 类型为确认方块
name = hobby // 名称
value = music // 传送值
checked // 设定为预设选项
确认方块对象相关参数 Input type=checked name=hobby value=music

1. 显示一个可供输入密码的输入框。 2. 利用 * 隐藏所输入的资料。可使用的事件处理程序： onBlur, onChange, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp 密码对象 (password object)

type = password // 类型为密码
name = password // 名称
value = 1234 // 初始值
size = 20 // 大小
maxlength = 10 // 可输入资料长度
密码对象相关参数 Input type=password name=pw

<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> 表单对象范例 - password(1)

密码对象的对象特性 defaultValue -> 该元件预设值 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值

<Script> function checkPwLgh(index,str){ if (str.length != 9){ alert(' 你只输入 '+str.length+' 位数请输入 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> 表单对象范例 - password(2)

提供一个隐藏域，用以储存
特殊资料值，以供运算或参考。
隐藏对象 (hidden object)

type = hidden // 类型为隐藏
name = dummy // 对象名称
value = 1234 // 元件初始值
隐藏对象相关参数 Input type=hidden name=dummy value=1234

提供一組选单，供使用者选择。
onClick, onDblClick
选择对象 (select object)

name = week // 名称
size = 3 // 下拉框大小
multiple // 设定为可多选
option // 定义选择的內容
selected // 预选项目
value // 定义传送值
选择对象相关参数

<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> 表单对象范例 - select(1)

选择对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值 selectedIndex -> 选项的索引值 length -> 选项个数 options -> 选项数组

<Script> url = new Array(2) url[0] = "http://www.seed.net.tw" url[1] = "http://www.hinet.net" 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> 表单对象范例 - select(2)

<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> 表单对象范例 – 动态选单

练习
设计一交换式选单：
所选取的项目应可列在右方。 ( 按按钮或鼠标点清单项目两下 )
加入右方选单后将左方选项清除。
设计一个刪除钮可将选项刪除。

提供一个按钮，供触发事件之用。
onBlur, onClick, onFocus
按钮对象 (button object)

type = button // 类型为按钮
name = button1 // 按钮名称
value = 请按我 // 按钮面显示值
title = 送至服务器 // 提示值
tabindex = 0 // 定位顺序
disabled // 使失效
按钮对象相关属性

按钮对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 该按钮面显示值 disabled -> 该元件生效否

<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> 表单对象范例 - button

用以将表格內资料送至服务器之用。
另外可在 Form 标签內搭配使用
onSubmit
提交对象 (submit object)

type = submit // 类型为呈送钮
name = submit1 // 按钮名称
value = 提交 // 提交钮表面显示值
提交对象相关参数 Input type=submit name=submit1 value= 送出

提交对象的对象特性 type -> 该元件类型 Name -> 该元件识別名称 value -> 该按钮面显示值

<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> 表单对象范例 - submit 1. 双引号不能省略 2. 当 onSubmit = true 时才提交到器

<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> 表单对象范例 - submit

用以将表格內资料还原为预设值，
即重新输入之意。
另外可在 Form 标签內搭配使用
onReset
重置对象 (reset object)

type = reset // 类型为重置钮
name = reset1 // 按钮名称
value = 重新输入 // 重置钮表面显示值
重置对象相关参数 Input type=reset name=reset1 value= 重新输入

重置对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 该按钮面显示值

<Form name=form1 onReset =alert(" 重新来吧！ ")> <input type=text name=text1> <input type=reset> </form> 表单对象范例 - reset

提供一个多列的本文域。
本文区域对象 (textarea object)

name = textarea1 // 按钮名称
rows = 8 // 列数
cols = 30 // 行数 ( 字元数 )
readonly // 定义为只读属性
本文区域对象相关参数 Input type=reset name=reset1 value= 重新输入

本文区域对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 本文区域的內容 defaultValue -> 本文区域的预设內容

<form name=form1> 意见留言版 ......<BR> <textarea name=textarea1 rows =8 cols =30> </textarea> <input type=button value= 显示留言內容 onClick= alert(' 您的留言是： --------- '+document.form1.textarea1 .value )> </form> 表单对象范例 - textarea

提供一个本文域与档案浏览按钮。
档案对象 (file/fileUpload object)

type = file // 型态为档案对象
name = file1 // 对象名称
档案对象相关参数 Input type=file name=file1

档案对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件內容值

<form> <input type=file name=file1> <input type=button onClick=alert(document.forms[0].file1. value )> </form> 表单对象范例 - file

Js培训

by yiditushe

Accessibility

Upload Details

Usage Rights

1 Embed 6

Statistics

Js培训 Presentation Transcript

Js培训

by yiditushe

Accessibility

Upload Details

Usage Rights

1 Embed 6

Statistics

Js培训 Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare