JavaScript 簡(jiǎn)介
JavaScript 是網(wǎng)景（Netscape）公司開(kāi)發(fā)的一種基于客戶(hù)端瀏覽器、面向（基于）對象、事件驅動(dòng)式的網(wǎng)頁(yè)腳本語(yǔ)言。JavaScript語(yǔ)言的前身叫作Livescript。
JavaScript的特點(diǎn)：
簡(jiǎn)單、易學(xué)、易用；
跨平臺；IE、Navigator
符合ECMA（歐洲計算機制造協(xié)會(huì )）標準，可移植；
事件驅動(dòng)式的腳本程序設計思想；
動(dòng)態(tài)、交互式的操作方式。
JavaScript的作用：
交互式操作；
表單驗證；
網(wǎng)頁(yè)特效；
Web游戲
服務(wù)器腳本開(kāi)發(fā)等。
JavaScript的編寫(xiě)環(huán)境：文本編輯器
JavaScript的執行平臺：Web瀏覽器
JavaScript的執行方式：解釋執行（由上而下）
JavaScript的版本：JavaScript1.0——JavaScript1.4
瀏覽器對JavaScript的支持：
JavaScript/IE3.0、JavaScript1.2/IE4.0；
微軟允許用戶(hù)自行設置對JavaScript處理模式。
JavaScript與Java、VBScript、JScript的關(guān)系：
JavaScript與Java的區別體現在：
首先，它們是兩個(gè)公司開(kāi)發(fā)的不同的兩個(gè)產(chǎn)品，Java是SUN公司推出的新一代面向對象的程序設計語(yǔ)言，特別適合于Internet應用程序開(kāi)發(fā)；而JavaScript是Netscape公司的產(chǎn)品，其目的是為了擴展Netscape Navigator功能而開(kāi)發(fā)的一種可以嵌入Web頁(yè)面中的基于對象和事件驅動(dòng)的解釋性語(yǔ)言。
其次，JavaScript是基于對象的，而Java是面向對象的，即Java是一種真正的面向對象的語(yǔ)言，即使是開(kāi)發(fā)簡(jiǎn)單的程序，必須設計對象。JavaScript是種腳本語(yǔ)言，它可以用來(lái)制作與網(wǎng)絡(luò )無(wú)關(guān)的，與用戶(hù)交互作用的復雜軟件。它是一種基于對象和事件驅動(dòng)的編程語(yǔ)言。因而它本身提供了非常豐富的內部對象供設計人員使用。
第三，兩種語(yǔ)言在其瀏覽器中所執行的方式不一樣。Java的源代碼在傳遞到客戶(hù)端執行之前，必須經(jīng)過(guò)編譯，因而客戶(hù)端上必須具有相應平臺上的仿真器或解釋器，它可以通過(guò)編譯器或解釋器實(shí)現獨立于某個(gè)特定的平臺編譯代碼的束縛。JavaScript是一種解釋性編程語(yǔ)言，其源代碼在發(fā)往客戶(hù)端執行之前不需經(jīng)過(guò)編譯，而是將文本格式的字符代碼發(fā)送給客戶(hù)，由瀏覽器解釋執行。
第四，兩種語(yǔ)言所采取的變量是不一樣的。Java采用強類(lèi)型變量檢查，即所有變量在編譯之前必須作聲明。JavaScript中變量聲明，采用其弱類(lèi)型。即變量在使用前不需作聲明，而是解釋器在運行時(shí)檢查其數據類(lèi)型。
第五，代碼格式不一樣。Java是一種與HTML無(wú)關(guān)的格式，必須通過(guò)像HTML中引用外媒體那么進(jìn)行裝載，其代碼以字節代碼的形式保存在獨立的文檔中。JavaScript的代碼是一種文本字符格式，可以直接嵌入HTML文檔中，并且可動(dòng)態(tài)裝載。編寫(xiě)HTML文檔就像編輯文本文件一樣方便。
第六，嵌入方式不一樣。在HTML文檔中，兩種編程語(yǔ)言的標識不同，JavaScript使用<script>...</script>來(lái)標識，而Java使用<applet> ... </applet> 來(lái)標識。
第七，靜態(tài)綁定和動(dòng)態(tài)綁定。Java采用靜態(tài)聯(lián)編，即Java的對象引用必須在編譯時(shí)的進(jìn)行，以使編譯器能夠實(shí)現強類(lèi)型檢查，如不經(jīng)編譯則就無(wú)法實(shí)現對象引用的檢查。JavaScript采用動(dòng)態(tài)聯(lián)編，即JavaScript的對象引用在運行時(shí)進(jìn)行檢查。
JavaScript的格式：
JavaScript區分大小寫(xiě)；
JavaScript腳本程序須嵌入在HTML文件中；
JavaScript腳本程序中不能包含HTML標記代碼；（雙引號）
每行寫(xiě)一條腳本語(yǔ)句；
語(yǔ)句末尾可以加分號；
JavaScript腳本程序可以獨立保存為一個(gè)外部文件，但其中不能包含<script></script>標簽。
JavaScript腳本程序的幾種基本格式：
<script>
document.write("Hello World!!!");
</script>
<script language="JavaScript">
document.write("Hello World!!!");
</script>
<script language="JavaScript" type="text/JavaScript">
document.write("Hello World!!!");
</script>
<script language="JavaScript1.2">
document.write("Hello World!!!");
</script>
<script src="hello.js"></script>
注意：document.write("Hello World!!!"); 必須保存為一個(gè)外部文件：hello.js
<script language="JavaScript">
<!--
document.write("Hello World!!!");
-->
</script>
使用JavaScript協(xié)議：
<a href="JavaScript:alert('Hello World!!!')">請單擊</a>
<a href="#" onclick="alert('Hello World!!!')">請單擊</a>
<a href="JavaScript://" onclick="alert('Hello World!!!')">請單擊</a>
JavaScript的數據類(lèi)型：
數值：整數、浮點(diǎn)數；
邏輯值：布爾值；
字符串值：
空值：
未定義值：
JavaScript數據的表示：
整數：由正負號、數字構成，八進(jìn)制、十進(jìn)制、十六進(jìn)制；
浮點(diǎn)數：由正負號、數字和小數點(diǎn)構成，常規記數法、科學(xué)記數法；
邏輯值：true、false
字符串值：?jiǎn)我?、雙引號
空值：null
未定義值：根本不存在的對象、已定義但沒(méi)有賦值的量；
JavaScript常量：
布爾常量：true false
整數常量：3721 0007 0xaff（0Xaff）
浮點(diǎn)數常量：3.14 .001 3.721e+3 -3.721E-3
字符串常量："你的E-mail地址有誤！"
含轉義字符的字符串常量：
轉義字符 意義
\b 退格（Backspace）
\f 換頁(yè)（Form feed）
\n 換行（New line）
\r 返回（Carriage return）
\t 制表符（Tab）
\' 單引號（'）
\" 雙引號（"）
\\ 反斜線(xiàn)（\）
document.write("我愛(ài)\'JavaScript\'")
document.write("文件在c:\\windows\\下")
document.write("<pre>未滿(mǎn)十八歲\n不得進(jìn)入！</pre>")
document.write("未滿(mǎn)十八歲<br>不得進(jìn)入！")
document.alert("密碼不對\n請重新輸入！")
數組常量：
hobby=["聽(tīng)音樂(lè )","看電影"]
hobby[0]、hobby[1]
hobby=["聽(tīng)音樂(lè )",,"看電影",]
hobby[0]、hobby[1]、hobby[2]、hobby[3]
JavaScript變量：
變量命名規則：
首字符必須是大寫(xiě)或小寫(xiě)的字母或下劃線(xiàn)（_）或美元符（$）;
后續的字符可以是字母、數字、下劃線(xiàn)或美元符;
變量名稱(chēng)不能是保留字；
長(cháng)度是任意；
區分大小寫(xiě)；
約定：集中置頂；
使用局部變量；
易于理解； stdId
避免混亂?！ srname usrName
聲明變量：
var stdId;
var name,sex;
var total=3721;
var notNull=true;
var name="李小龍"，sex="先生";
var i=j=0;
變量賦值：
stdId = 2004007;
變量作用域：（方式、位置）
全局變量：省略var，或在函數外聲明
局部變量：在函數內聲明
全局變量可在整個(gè)腳本中被使用，可在不同的窗口中相互引用（指定窗口名）
例：
<Script>
var langJS = "JavaScript"; //langJS是全局變量
test();
function test() {
var langVBS = "VBScript"; //langVBS是局部變量
document.write("<LI>" + langJS);
document.write("<LI>" + langVBS);
}
document.write("<LI>" + langJS);
document.write("<LI>" + langVBS);
</Script>
JavaScript表達式：
算術(shù)表達式；
字符串表達式；
關(guān)系（比較）表達式；
邏輯表達式。
JavaScript運算符：
根據處理對象的數目：
單元運算符；
二元運算符；
三元運算符。
根據功能：
賦值運算符；
= += -= *= /= %=（取余）
算術(shù)運算符；
+ - * / %（取余） ++（遞增） --（遞減） -
例１：
<Script>
var x = 11;
var y = 5;
with (document) {
write("x = 11, y = 5");
write("<LI>x + y 是 ", x + y);
write("<LI>x - y 是 ", x - y);
write("<LI>x * y 是 ", x * y);
write("<LI>x / y 是 ", x / y);
write("<LI>x % y 是 ", x % y);
write("<LI>++ x 是 ", ++ x);
write("<LI>-- y 是 ", -- y);
}
</Script>
例２：
<Script>
var x = y = 3;
with (document) {
write("x = 3, y = 3 <br>");
write("若x = y++ 運算之后：");
x = y++;//y→x，y+1→y
write("x 是 ", x, "; y 是 ", y, "<br>");
write("再作x = ++y 運算：");
x = ++y;//y+1→x，y+1→y
write("x 是 ", x, "; y 是 ", y);
}
</Script>
字符串運算符；
+ +=
比較運算符；
== != ===（值及類(lèi)型） !==（值及類(lèi)型）
< <= > >=
例：
<Script>
var x = 5; //x 是數值5
var y = '5'; //y 是字符串5
var z = 6; //x 是數值6
with (document) {
write("x = 5, y = '5', z = 6");
write("<LI>x == y 嗎？", x == y);
write("<LI>x === y 嗎？", x === y);
write("<LI>x != y 嗎？", x != y);
write("<LI>x !== y 嗎？", x !== y);
write("<LI>x <= z 嗎？", x <= z);
write("<LI>y <= z 嗎？", y <= z);
//類(lèi)型自動(dòng)轉換
}
</Script>
邏輯運算符；
&& || !
例１：
<Script>
var t = true;
var f = false;
with(document) {
write("<OL><LI>true && true 的結果是 ", t && t);
write("<LI>true && false 的結果是 ", t && f);
write("<LI>false && true 的結果是 ", f && t);
write("<LI>false && false 的結果是 ", f && f);
write("<LI>true && (1==1) 的結果是 ", t && (1==1));
write("<LI>false && 'A' 的結果是 ", f && 'A');
write("<LI>'A' && false 的結果是 ", 'A' && f);
write("<LI>true && 'A' 的結果是 ", t && 'A');
write("<LI>'A' && true 的結果是 ", 'A' && t);
write("<LI>'A' && 'B' 的結果是 ", 'A' && 'B');
//&&：有一個(gè)不是邏輯值，只要第一個(gè)操作數的值為flase，則返回第一個(gè)操作數的值flase，否則，返回第二個(gè)操作數的值
}
</Script>
例２：
<Script>
var t = true;
var f = false;
with(document) {
write("<OL><LI>true || true 的結果是 ", t || t);
write("<LI>true || false 的結果是 ", t || f);
write("<LI>false || true 的結果是 ", f || t);
write("<LI>false || false 的結果是 ", f || f);
write("<LI>true || (1==1) 的結果是 ", t || (1==1));
write("<LI>false || 'A' 的結果是 ", f || 'A');
write("<LI>'A' || false 的結果是 ", 'A' || f);
write("<LI>true || 'A' 的結果是 ", t || 'A');
write("<LI>'A' || true 的結果是 ", 'A' || t);
write("<LI>'A' || 'B' 的結果是 ", 'A' || 'B');
//||：有一個(gè)不是邏輯值，只要第一個(gè)操作數為的值true、字符或非零的數字，則返回第一個(gè)操作數的值，否則，返回第二個(gè)操作數的值
}
</Script>
例３：
<Script>
with(document) {
write("<LI>!true 的結果是 ", !true);
write("<LI>!false 的結果是 ", !false);
write("<LI>!'A' 的結果是 ", !'A');
write("<LI>!0 的結果是 ", !0);}
</Script>
逐位運算符；
特殊運算符。
1、new運算符：創(chuàng )建對象（實(shí)例）
格式：對象名稱(chēng)=new 對象類(lèi)型（參數）
2、this運算符：表示當前對象
格式：this[.屬性]
例：
<Script>
function validate(obj) {
alert("你輸入的值是："+ obj.value);
} </Script>
請輸入任意字符：<BR>
<INPUT TYPE="text" onKeyup="validate(this)">
3、條件運算符：三元運算符
格式：<條件表達式> ? 第一個(gè)值：第二個(gè)值
例：
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
window.screen.width>800 ? imgheight=100:imgheight=100
window.screen.width>800 ? imgleft=15:imgleft=122
<Script>
function showSex() {
onOroff = document.forms[0].sex[0].checked
status = (onOroff)? "帥哥" : "美女"
alert("Hello! " + status)
}
</Script>
請輸入你的性別：
<FORM onClick=showSex()>
<INPUT TYPE=radio NAME=sex>男生
<INPUT TYPE=radio NAME=sex>女生
</FORM>
運算符執行的優(yōu)先順序：
類(lèi)型 運算符
括號 ()
一元 ! ~ - ++ -- typeof void delete
算術(shù) * / + -
位位移 << >> >>>
比較 < <= > >= == !=
位邏輯 & ^（xor） |
邏輯 && ||
三元條件 ?
賦值 = += -= *= /= %= <<= >>= >>>= &= ^= |=
JavaScript語(yǔ)句：
注釋語(yǔ)句：
單行注釋?zhuān)?/注釋文字
多行注釋?zhuān)?*
注釋文字
*/
例：
/***************************************
* 源 碼 之 家 *
* http://www.mycodes.net *
* 下載:http://www.mycodes.net *
* 論壇http://www.mycodes.net/bbs *
*****************************************/
with語(yǔ)句： （對象操作語(yǔ)句）
功能：為一段程序建立默認對象。
格式：
with (<對象>){
<語(yǔ)句組>
｝
例１：
with (document) {
write ("限時(shí)搶購物品：");
write ("<Li>ViewSonic 17\" 顯示器。");
write ("<Li>EPSON 打印機。");
}
例２：
document.write ("限時(shí)搶購物品：");
document.write ("<Li>ViewSonic 17\" 顯示器。");
document.write ("<Li>EPSON 打印機。");
if...else語(yǔ)句：
格式1：
if (<表達式>)
<語(yǔ)句1>;
else
<語(yǔ)句2>;
if (<表達式>) <語(yǔ)句1>;
else <語(yǔ)句2>;
例：
<Script>
var now = new Date();
var hour = now.getHours();
if (6 < hour && hour < 18)
document.write ("辛勤工作才能快樂(lè )收割！");
else
document.write ("休息一下，充電后再出發(fā)。");
</Script>
格式2：
if (<表達式>){
<語(yǔ)句組1>
}else{
<語(yǔ)句組2>
}
格式3：
if (<表達式1>){
<語(yǔ)句組1>
}else if (<表達式2>){
<語(yǔ)句組2>
}else{
<語(yǔ)句組3>
}
例1：
<Script>
var now = new Date();
var day = now.getDay();
var dayName;
if (day == 0) dayName = "星期日";
else if (day == 1) dayName = "星期一";
else if (day == 2) dayName = "星期二";
else if (day == 3) dayName = "星期三";
else if (day == 4) dayName = "星期四";
else if (day == 5) dayName = "星期五";
else dayName = "星期六";
document.write ("今天是快樂(lè )的", dayName);
</Script>
例2：
<Script>
var now = new Date();
var day = now.getDay();
var dayName;
if (day = 0) dayName = "星期日";
else if (day = 1) dayName = "星期一";
else if (day = 2) dayName = "星期二";
else if (day = 3) dayName = "星期三";
else if (day = 4) dayName = "星期四";
else if (day = 5) dayName = "星期五";
else dayName = "星期六";
document.write ("今天是快樂(lè )的", dayName);
</Script>
while語(yǔ)句：
格式1：
while (<表達式>)
語(yǔ)句；
格式2：
while (<表達式>){
<語(yǔ)句組>
}
例：
<Script>
var i = 5;
while ( i > 0 ) {
document.write("i = " ,i ,"<BR>");
i--;
}
</Script>
do...while語(yǔ)句：
格式：
do {
<語(yǔ)句組>
} while (<表達式>)
例：
<Script>
var i = 5;
do {
document.write("i = " ,i ,"<BR>");
i--;
} while ( i > 0 )
</Script>
for語(yǔ)句：
格式：
for (<初始表達式>；<條件表達式>；<變動(dòng)量表達式>){
<語(yǔ)句組>
}
例：
<Script>
for ( var i = 5; i > 0; i-- ) {
document.write("i = " ,i ,"<BR>");
}
</Script>
for...in語(yǔ)句：重復執行指定對象的所有屬性
格式：
for ( 變量 in 對象 ){
<語(yǔ)句組>
}
例：
<Script>
function member(name, sex) {//構造函數member
this.name = name;
this.sex = sex;
}
function showProperty(obj, objString) {
var str = "";
for (var i in obj)
str += objString + "." + i + " = " + obj[i] + "<BR>";
return str;
}
papa = new member("楊宏文", "男生");//建立對象實(shí)例papa
document.write(showProperty(papa, "papa"))
</Script>
break語(yǔ)句：
格式：break
例：
<Script>
var i = 5;
while ( i > 0 ) {
if ( i == 3 ) break;
document.write("i = " ,i ,"<BR>");
i--;
}
</Script>
continue語(yǔ)句：
格式：continue
例：
<Script>
var i = 5;
while ( i > 0 ) {
i--;
if ( i == 3 ) continue;
document.write("i = " ,i ,"<BR>");
}
</Script>
switch語(yǔ)句：
格式：
switch (<表達式>) {
case <數值1>:<語(yǔ)句組1>
break;
case <數值2>:<語(yǔ)句組2>
break;
...
default <語(yǔ)句組>
}
例：
<Script>
function greet(givenSex) {
switch(givenSex) {
case "帥哥" : alert("你好??！");
break;
case "美女" : alert("你好??！");
break;
}
}
</Script>
請輸入性別：
<FORM>
<INPUT TYPE="radio" NAME="sex" onClick="greet('帥哥')">
帥哥
<INPUT TYPE="radio" NAME="sex" onClick="greet('美女')">
美女
</FORM>
對象：
對象是一組具有屬性和方法的經(jīng)過(guò)組織的數據。
默認對象：
日期對象；（日期基線(xiàn)：1970年1月1日00：00：00）
建立日期對象(實(shí)例)：
格式：日期對象名稱(chēng)=new Date([日期參數])
日期參數：1.省略；
2.英文-數值格式：月 日，公元年 [時(shí)：分：秒]
如：today=new Date("October 1,2008 12:00:00")
3.數值格式：公元年，月，日，[時(shí)，分，秒]
如：today=new Date(2008,10,1)
日期對象的方法：
格式：日期對象名稱(chēng).方法（[參數]）
獲取當地時(shí)間：
getYear() 返回年份數
getFullYear() 返回年份數
getMonth() 返回月份數（0--11）
getDate() 返回日期數（1--31）
getDay() 返回星期數（0--6）
getHours() 返回時(shí)數（0--23）
getMinutes() 返回分數（0--59）
getSeconds() 返回秒數（0--59）
getMilliseconds() 返回毫秒數（0--999）
getTime() 返回對應日期基線(xiàn)的毫秒
Date.parse(日期字串) 返回對應日期基線(xiàn)的毫秒
setTime(時(shí)間值) 指定一日期對象的值
toGMTString() 以GMT格式表示日期對象
toUTCString() 以GMT格式表示日期對象
數組對象；
建立數組對象：
格式１：數組對象名稱(chēng)=new Array([元素個(gè)數])
格式２：數組對象名稱(chēng)=new Array([[元素1][，元素2，...]])
格式３：數組對象名稱(chēng)=[元素1[，元素2，...]]
例：
fruit=new Array(3);// fruit=new Array();
fruit[0]="蘋(píng)果";
fruit[1]="梨子";
fruit[2]="橘子";
fruit=new Array("蘋(píng)果"，"梨子"，"橘子");
fruit=["蘋(píng)果"，"梨子"，"橘子"];
數組對象的屬性：
格式：數組對象名稱(chēng).屬性
屬性：length 數組長(cháng)度
例：
<Script>
var fruit = new Array("蘋(píng)果", "梨子", "橘子");
var i;
for (i=0; i < fruit.length; i++) {
document.write("fruit [", i, "] = ", fruit[i], "<br>")
}
</Script>
數組對象的方法：
格式：數組對象名稱(chēng).方法([參數])
方法： join([分隔符]) 數組元素組合為字符串
toString() 以字符串表示數組
reverse() 數組反轉
valueOf() 返回數組值
例：
<Script>
var fruit = new Array("蘋(píng)果", "梨子", "橘子");
document.write("<LI>", fruit.join());
document.write("<LI>", fruit.join("、"));
document.write("<LI>", fruit.toString());
document.write("<LI>", fruit.reverse().join());
document.write("<LI>", fruit.valueOf());
</Script>
二維數組：
例：
<Script>
var fruit = new Array(3);
fruit[0] = new Array("蘋(píng)果", 2);
fruit[1] = new Array("梨子", 4);
fruit[2] = new Array("橘子", 2);
for (i=0; i < fruit.length; i++) {
for (j=0; j < fruit[0].length; j++) {
document.write("fruit [", i, "][", j, "] = ", fruit[i][j],"<br>");
}
document.write("<br>");
}
</Script>
字符串對象；
建立字符串對象：
格式：字符串對象名稱(chēng)=new String(字符串常量)
格式：字符串變量名稱(chēng)="字符串常量"
字符串對象的屬性：
格式：字符串對象名稱(chēng).屬性
屬性：length 字符串長(cháng)度
字符串對象的方法：
格式：字符串對象名稱(chēng).方法
方法： bold() 粗體
italtics() 斜體
strike() 刪除線(xiàn)
fontsize(字級大小) 文字大小
fontcolor(#rrggbb) 文字顏色
sup() 上標
sub() 下標
toUpperCase() 大寫(xiě)
toLowerCase() 小寫(xiě)
charAt(索引) 返回索引位置的字符
charCodeAt(索引) 返回索引位置的ASCII字符碼，十進(jìn)制表示
indexOf("字串"[,索引]) 返回字串在對象中的索引位置
lastIndexOf("字串"[,索引]) 返回字串在對象中的索引位置（反向搜索）
search("字串") 返回字串在對象中的索引位置
replace("字串1","字串2") 字串2替換字串1
slice(索引i[,索引j]) 返回索引i倒索引j-1的子串
split(["字串"][,限制]) 將字串從對象中刪除
substr(start[,length]) 返回特定長(cháng)度的字串
substring(索引i[,索引j]) 返回索引i倒索引j-1的子串
link("url") 設置鏈接
match(/匹配字符/) \d
匹配一個(gè)數字字符。
\D
匹配一個(gè)非數字字符。
\n
匹配一個(gè)換行符。
\r
匹配一個(gè)回車(chē)符。
\s
匹配一個(gè)空格符。
\S
匹配任意非空格符。
\t
匹配一個(gè)table符。
\W
匹配任何非單詞符。
\num
匹配正整數num。
/n/
匹配八進(jìn)制，十六進(jìn)制，十進(jìn)制的escape值。
toString() 返回字符串
valueOf() 返回字符串值
例1：
<Script>
var str = "JavaScript";
document.write(str.bold(),"<BR>");
document.write(str.fixed(),"<BR>");
document.write(str.fontcolor("red"),"<BR>");
document.write(str.fontsize(5),"<BR>");
</Script>
例2：
<Script>
var str = "JavaScript";
var num = 1234;
document.write(str.toUpperCase(), "<BR>");
document.write(num.toString().charAt(2),"<BR>");
document.write(str.substring(0,4), "<BR>");
</Script>
例3：
<Script>
var str = "JavaScript";
document.write(str, " 有 ", str.length, " 個(gè)字<BR>");
document.write(str.fontcolor("green"), " 不是 ");
document.write(str.substr(0,4).fontcolor("red"));
document.write(" 也不是 ", str.replace("Java", "VB"));
</Script>
例4：
<Script>
var str = "hubert@abc.com.cn";
var idx = str.search("@");
var usr = str.substr(0,idx);
document.write(usr.toUpperCase().fontsize(7), "<BR>");
document.write("你的電子信箱是", str);
</Script>
例5：
<Script>
function isEmail(){
var str = document.form1.add.value;
if (str.indexOf("@") == -1)
alert("請填寫(xiě)正確的EMail地址");
else
alert("OK!");
}
</Script>
<FORM name="form1">
請輸入你的 EMail 地址：
<INPUT TYPE="text" name="add">
<INPUT TYPE="button" value="開(kāi)始檢查" onClick="isEmail()">
</FORM>
布爾對象；
建立布爾對象：
格式：布爾對象名稱(chēng)=new Boolean(轉換值)
轉換值：null、未定義、0、或false均轉換成false
布爾對象的方法：
格式：布爾對象名稱(chēng).方法
方法：toString()
valueOf()
例：
<Script>
x = new Boolean();
y = new Boolean(true);
z = new Boolean(0);
document.write(x, "<br>");
document.write(y, "<br>");
document.write(z, "<br>");
</Script>
數學(xué)對象；（靜態(tài)對象）
數學(xué)對象的屬性：
格式：Math.屬性
屬性： E 自然對數的底數
LN2 2的自然對數
LN10 10的自然對數
LOG2E 以2為底e的對數
LOG10E 以10為底e的對數
PI 圓周率
SQRT1_2 1/2的平方根
SQRT2 2的平方根
數學(xué)對象的方法：
格式：Math.方法（參數）
方法： ceil(數值) 大于等于該數值的最小整數
floor(數值) 小于等于該數值的最大整數
min(數值1,數值2) 最小值
max(數值1,數值2) 最大值
pow(數值1,數值2) 數值1的數值2次方
random() 0倒1的隨機數
round(數值) 最接近該數值的整數
sqrt(數值) 開(kāi)平方根
abs、sin(弧度)、cos、tan、asin、acos、atan、exp、log
例1：
<Script>
with (document) {
write("<LI>2 的平方根值是 ", Math.sqrt(2));
write("<LI>2 <sup>3</sup> = ", Math.pow(2,3));
write("<LI>最接近 3.14 的整數是 ", Math.round(3.14));
}
</Script>
例2：
<Script>
var now = new Date();
var firstDay = new Date("Nov 10, 1999");
var duration = now - firstDay;
var msPerDay = 24 * 60 * 60 * 1000; //換算成毫秒
days = Math.round(duration/msPerDay);
document.write("本網(wǎng)站已經(jīng)開(kāi)幕" + days + "天了");
</Script>
例3：
<Script>
var promote = new Array(3);
promote[0] = "拍賣(mài)區又有新貨到了，趕快來(lái)?yè)毂阋税?....."
promote[1] = "成為會(huì )員，馬上享受八折優(yōu)惠，還可以參加抽獎！";
promote[2] = "慶祝訪(fǎng)問(wèn)人數突破十萬(wàn)人次，填問(wèn)卷就送大獎，快來(lái)??！";
index = Math.floor(Math.random() * promote.length);
document.write(promote[index]);
</Script>
數值對象；
函數對象；
自定義對象。
自定義對象；
構造函數定義對象類(lèi)型；
建立對象實(shí)例。
例：
<Script>
function member(name, sex) {
this.name = name;
this.sex = sex;
}
var papa = new member("楊宏文", "男生");
var mama = new member("黃雅玲", "女生");
var doggy = new member("奇 奇", "寵物狗");
document.write(papa.name);
document.write("是", papa.sex);
</Script>
動(dòng)態(tài)的定義對象屬性；
例：
為指定的對象實(shí)例定義屬性：papa.hobby="看電視";
為對象定義屬性：member.prototype.hobby=null;
papa.hobby="上網(wǎng)";
mama.hobby="逛街";
doggy.hobby="啃骨頭";
定義對象的方法；
構造函數定義對象方法名；
建立方法的描述函數。
例：
<Script>
function member(name, sex) {
this.name = name;
this.sex = sex;
this.display = display;
}
function display() {
var str = this.name + "是" + this.sex;
document.write("<LI>" + str);
}
var papa = new member("楊宏文", "男生");
var mama = new member("黃雅玲", "女生");
var doggy = new member("奇 奇", "寵物狗");
papa.display();
mama.display();
doggy.display();
</Script>
利用對象原型（prototype）為默認對象定義屬性：
<Script>
String.prototype.replaceAll = strReplace;
function strReplace(findText, replaceText) {
var str = new String(this);
while (str.indexOf(findText)!=-1) {
str = str.replace(findText, replaceText);
}
return str;
}
myStr = "告訴你 － 如果你正在尋找一本能幫助你徹底研究" +
"JavaScript的書(shū)籍，請你一定要認明碁峰的" +
"JavaScript教學(xué)范本，讓你事半功倍，功力大增。";
document.write("<LI>原稿是：<BLOCKQUOTE>" + myStr +"</BLOCKQUOTE>");
document.write("<LI>利用Replace()將「你」改成「您」："
+"<BLOCKQUOTE>" + myStr.replace('你','您') +"</BLOCKQUOTE>");
document.write("<LI>利用自定義的字符串方法 - 全部取代"
+"<BLOCKQUOTE>" + myStr.replaceAll('你','您') +"</BLOCKQUOTE>");
</Script>
默認函數：
編碼函數 escape()：將非字母、數字字符轉換成ASCII碼
例：sample/unescape
譯碼函數 unescape()：將ASCII碼轉換成字母、數字字符
例：sample/unescape
求值函數 eval()：
格式：eval(<表達式>)
例1：字符串運算
<Script>
x = 1 + 2;
y = "1 + 2";
z = eval("1 + 2");
document.write("<LI>1 + 2 = ", x);
document.write("<LI>\"1 + 2\" = ", y);
document.write("<LI>eval(\"1 + 2\") = ", z);
</Script>
例2：對象操作
<Script>
function show(obj){
var str=eval("document.form."+obj+".value");
alert(str);
}
</Script>
<form name="form" id="form">
姓名：
<input name="name" type="text" id="name">
<input type="button" name="Button" value="Button" onclick=show("name")>
</form>
數值判斷函數 isNaN()：是否為數值
格式：isNaN(<量>)
例：
<Script>
var x = 15;
var y = "黃雅玲";
document.write("<LI>x 不是數值嗎？",isNaN(x));
document.write("<LI>y 不是數值嗎？",isNaN(y));
</Script>
整數轉換函數 parseInt()：將不同進(jìn)制（二、八、十六）的數值轉換成十進(jìn)制整數
格式：parseInt(數值字串[，底數])
底數省略，則按內容轉換：
0x 0X 十六進(jìn)制
0 八進(jìn)制
其它 十進(jìn)制
例：
<Script>
// 二進(jìn)位轉成十進(jìn)位
document.write("1101<sub>2</sub> = " ,parseInt("1101", 2),"<sub>10</sub><br>");
// 十六進(jìn)位轉成十進(jìn)位
document.write("BFFF<sub>16</sub> = " ,parseInt("BFFF", 16),"<sub>10</sub><br>");
</Script>
浮點(diǎn)數轉換函數 parseFloat()：將數值字串轉換成浮點(diǎn)數
格式：parseFloat (數值字串)
例：
<Script>
document.write(parseInt("3.1234A56"), "<br>");
document.write(parseFloat("3.1234A56"), "<br>");
</Script>
函數：
獨立于主程序的、具有特定功能的一段程序代碼塊。
函數的定義：
格式：
function 函數名([參數[,參數...]]){
<語(yǔ)句組>
[return <表達式>；]
}
約定：
1、函數名：易于識別；（同變量命名規則）
2、程序代碼：模塊化設計；
3、函數位置：按邏輯順序，集中置頂。（<head>...</head>）
return語(yǔ)句：
格式：
return <表達式>；
功能：返回表達式的值。
函數的調用：
格式：
函數名([參數[,參數...]])
例1：
<Script>
function showName(name){
document.write ( "我是" + name );
}
showName("黃雅玲");
</Script>
例2：
<Script>
function showName(name){
str="我是" + name;
return str;
}
document.write(showName("黃雅玲"));
</Script>
事件：
用戶(hù)對瀏覽器所做的特定的動(dòng)作（操作），是實(shí)現交互操作的一種機制。
事件名稱(chēng) 適用對象 意義 說(shuō)明
Abort image 終止 當圖形尚未完全加載前
Blur 失去焦點(diǎn)
Change t/pw/ta/select 改變
DragDrop window 拖曳
Error img/win 錯誤加載文件或圖形時(shí)發(fā)生錯誤
Focus 取得焦點(diǎn)
Move window 移動(dòng)
Reset form 重置
Submit form
Click/DblClick、KeyDown/KeyPress/KeyUp、Load/Unload、MouseDown/MouseUp/MouseOver/MouseOut/MouseMove
事件處理程序：
瀏覽器響應某個(gè)事件，實(shí)現用戶(hù)的交互操作而進(jìn)行的處理（過(guò)程）。
事件處理程序的調用：
瀏覽器等待用戶(hù)的交互操作，并在事件發(fā)生時(shí)，自動(dòng)調用事件處理程序（函數），完成事件處理過(guò)程。
HTML標簽屬性：
格式：
<tag on事件=“<語(yǔ)句組>|<函數名>”>
例1：
<body onload="alert('建議瀏覽器的分辨率：800x600');">
<body onload="var str='建議瀏覽器的分辨率：800x600';alert(str);">
例2：
<script>
function show(){
var str="建議瀏覽器的分辨率：800x600";
alert(str);
}
</script>
<body onload="show();">
對象屬性：
格式：
對象名.on事件=<語(yǔ)句>|<函數名>
例1：
document.onload=alert("建議瀏覽器的分辨率：800x600");
var str="建議瀏覽器的分辨率：800x600";
document.onload=alert(str);
例2：
<script>
function show(){
var str="建議瀏覽器的分辨率：800x600";
alert(str);
}
document.onload=show();
</script>
例1：
<Body>
<FORM>
請輸入基本資料：<BR>
姓名：
<INPUT TYPE="text" NAME="usr" SIZE="8">
<INPUT TYPE="button" VALUE=" 請單擊" onClick="alert('謝謝你的填寫(xiě)...')">
</Body>
例2：
<Script>
function handelError(img){
msg = "有一圖文件，名為： \'" + img.name + "\'\n無(wú)法順利顯示，請通知系統管理人員" + "，敬備薄禮相送。";
alert(msg);
}
</Script>
<IMG SRC="abc.gif" NAME="中國電信的廣告" onError="handelError(this)">
例3：
<Body>
<A HREF="http://www.hubert.idv.tw/" onMouseOver="status='最棒的學(xué)習網(wǎng)站';return true;" onMouseOut="status='完畢'">文哥網(wǎng)絡(luò )技術(shù)學(xué)習網(wǎng)</A>
</Body>
例4：
<Body>
<FONT STYLE="cursor:hand" onClick="location='http://www.hubert.idv.tw/'" onMouseOver="status='最棒的在線(xiàn)學(xué)習網(wǎng)站'; this.color='red';return true;" onMouseOut="status='完畢'; this.color='blue';">文哥網(wǎng)絡(luò )技術(shù)學(xué)習網(wǎng)</FONT>
</Body>
例5：
<Script>
function mOver(object,msg){
status = msg;
object.color = "red";
object.face = "華文楷體";
}
function mOut(object){
status = '完畢';
object.color = "blue";
object.face = "幼圓";
}
</Script>
<Body>
<FONT STYLE="cursor:hand" onClick="location='http://www.hubert.idv.tw/'" onMouseOver="mOver(this,'最棒的線(xiàn)上學(xué)習網(wǎng)站'); return true;" onMouseOut="mOut(this)">文哥網(wǎng)絡(luò )技術(shù)學(xué)習網(wǎng)</FONT>
</Body>
例6：
<STYLE> A {text-decoration:none} </STYLE>
<BODY>
搜尋引擎：<BR>
<IMG SRC="images\snow1.gif" NAME=gif_1>
<A HREF="http://www.yam.com/" onMouseOver="document.gif_1.src='images\\snow.gif'" onMouseOut="document.gif_1.src='images\\snow1.gif'">蕃薯藤</A><BR>
<IMG SRC="images\snow1.gif" NAME=gif_2>
<A HREF="http://www.kimo.com.tw/" onMouseOver="document.gif_2.src='images\\snow.gif'" onMouseOut="document.gif_2.src='images\\snow1.gif'">奇摩站</A>
</BODY>
例7：
<Script>
var url = new Array(3);
url[0] = "http://www.yam.org.tw/";
url[1] = "http://www.kimo.com/";
url[2] = "http://chinese.yahoo.com/";
function goto(i) {
location = url[i];
}
</Script>
<table width=250><tr><td>
<form><fieldset>
<legend>搜尋引擎</legend>
<input name="go" type="radio" onClick="goto(0)">蕃薯藤
<input name="go" type="radio" onClick="goto(1)">奇摩
<input name="go" type="radio" onClick="goto(2)">中文雅虎
</fieldset></form>
</table>
定時(shí)器：（延遲器）
用以指定在一段特定的時(shí)間后執行某段程序。
setTimeout()：（1.0版）
格式：
[定時(shí)器對象名=] setTimeout(“<表達式>”，毫秒)
功能：執行<表達式>一次。
例1：
<Script>
function count() {
setTimeout("alert('三秒到了')",3000)
}
</Script>
<INPUT TYPE="button" VALUE=" 計時(shí)開(kāi)始" onClick="count()">
例2：
<Script>
function show() {
document.all['news'].style.display = "";
setTimeout("hide()",500);
}
function hide() {
document.all['news'].style.display = "none";
setTimeout("show()",500);
}
</Script>
<Body onload="show()">
最新消息：<FONT ID="news" STYLE="display:none">十面埋伏...</FONT>
</Body>
clearTimeout()：終止定時(shí)器
格式：
clearTimeout(定時(shí)器對象名)
setInterval()：（1.2版）
格式：
[定時(shí)器對象名=] setInterval(“<表達式>”，毫秒)
功能：重復執行<表達式>，直至窗口、框架被關(guān)閉或執行clearInterval。
clearInterval()：終止定時(shí)器
格式：
clearInterval(定時(shí)器對象名)
例1：
<Script>
var sec = 0;
timerID = setInterval("count()",1000);
function count() {
num.innerHTML = sec++;
}
</Script>
停留時(shí)間：
<FONT ID="num" FACE="impact">0</FONT>秒鐘
<INPUT TYPE="button" VALUE="停止" onClick="clearInterval(timerID)">
例2：
<Script>
var str = "這是一個(gè)在線(xiàn)拍賣(mài)的網(wǎng)站，請盡情血拼吧！";
var seq = 0;
function scroll() {
msg = str.substring(0, seq+1);
banner.innerHTML = msg;
seq++;
if (seq >= str.length) seq = 0;
}
</Script>
<Body onLoad="setInterval('scroll()',500)">
<FONT ID="banner"></FONT>
</Body>
圖像對象：
網(wǎng)頁(yè)中的圖像均會(huì )被自動(dòng)看作圖像對象，并依順序，分別表示為document.images[0]，document.images[1]...
建立圖像對象：
格式：
圖像對象名稱(chēng)=new Image([寬度],[高度]) //px
圖像對象的屬性：
border complete height hspace lowsrc name src vspace width
圖像對象的事件：
onAbort onError onKeyDown onKeyPress onKeyUop onLoad
例1：（預載）
<Script>
img0 = new Image();
img0.src = "images/snow0.gif";
img1 = new Image();
img1.src = "images/snow1.gif";
document.write ("已經(jīng)讀取兩個(gè)圖文件，但此時(shí)不顯示。");
</Script>
例2：
<Script>
function img-preload(idx){
eval("img"+idx+" = new Image()");
eval("img"+idx+".src = 'images/snow"+idx+".gif'");
}
img-preload(0);
img-preload(1);
document.write ("已經(jīng)讀取兩個(gè)圖文件，但此時(shí)不顯示。");
</Script>
例3：
<Script>
function img-preload(imgname,idx){
eval("img"+idx+" = new Image()");
eval("img"+idx+".src = 'images/"+imgname+".gif'");
}
img-preload("snow0",0);
img-preload("snow1",1);
document.write ("已經(jīng)讀取兩個(gè)圖文件，但此時(shí)不顯示。");
</Script>
Navigator對象：（領(lǐng)航員）
檢測瀏覽器的版本、所支持的MIME類(lèi)型、已安裝的外掛程序（plug-in）。該對象包含兩個(gè)子對象：外掛對象、MIME類(lèi)型對象。
Navigator對象的屬性：
格式： navigator.屬性
appCodeName 代碼
appName 名稱(chēng)
appVersion 版本
language 語(yǔ)言
mimeType 以數組表示所支持的MIME類(lèi)型
platform 編譯瀏覽器的機器類(lèi)型
plugins 以數組表示已安裝的外掛程序
userAgent 用戶(hù)代理程序的表頭
例1：
<Script>
with (document) {
write ("你的瀏覽器信息：<OL>");
write ("<LI>代碼："+navigator.appCodeName);
write ("<LI>名稱(chēng)："+navigator.appName);
write ("<LI>版本："+navigator.appVersion);
write ("<LI>語(yǔ)言："+navigator.language);
write ("<LI>編譯平臺："+navigator.platform);
write ("<LI>用戶(hù)表頭："+navigator.userAgent);
}
</Script>
例2：
<Script>
if (document.all) {
document.write("你的瀏覽器是：MSIE");
} else {
document.write("你的瀏覽器是：Navigator");
}
</Script>
plugin對象的屬性：
格式： navigator.plugins.屬性
description 外掛程序模塊的描述
filename 外掛程序模塊的文件名
length 外掛程序模塊的個(gè)數
name 外掛程序模塊的名稱(chēng)
例：
<Script>
var len = navigator.plugins.length;
with (document) {
write ("你的瀏覽器共支持" + len + "種plug-in：<BR>");
write ("<TABLE BORDER>")
write ("<CAPTION>PLUG-IN 清單</CAPTION>")
write ("<TR><TH> <TH>名稱(chēng)<TH>描述<TH>文件名")
for (var i=0; i<len; i++)
write("<TR><TD>" + i +
"<TD>" + navigator.plugins[i].name +
"<TD>" + navigator.plugins[i].description +
"<TD>" + navigator.plugins[i].filename);
}
</Script>
mimeType對象的屬性：
格式：navigator.mimeTypes.屬性
description MIME類(lèi)型的描述
enablePlugin 對應到哪個(gè)外掛模塊
length MIME類(lèi)型的數目
suffixes MIME類(lèi)型的擴展名
type MIME類(lèi)型的名稱(chēng)
例：
<Script>
var len = navigator.mimeTypes.length;
with (document) {
write ("你的瀏覽器共支持" + len + "種MIME類(lèi)型：");
write ("<TABLE BORDER>")
write ("<CAPTION>MIME type 清單</CAPTION>")
write ("<TR><TH> <TH>名稱(chēng)<TH>描述<TH>擴展名<TH>附注")
for (var i=0; i<len; i++) {
write("<TR><TD>" + i +
"<TD>" + navigator.mimeTypes[i].type +
"<TD>" + navigator.mimeTypes[i].description +
"<TD>" + navigator.mimeTypes[i].suffixes +
"<TD>" +
navigator.mimeTypes[i].enabledPlugin.name);
}
}
</Script>
窗口對象的屬性和方法：
格式：
[window.]屬性
[window.]方法（參數）
opener.屬性
opener.方法（參數）
self.屬性
self.方法（參數）
parent.屬性
parent.方法（參數）
top.屬性
top.方法（參數）
窗口名稱(chēng).屬性
窗口名稱(chēng).方法（參數）
窗口對象的屬性：
document 當前文件的信息
location 當前URL的信息
name 窗口名稱(chēng)
status 狀態(tài)欄的臨時(shí)信息
defaultStatus 狀態(tài)欄默認信息
history 該窗口最近查閱過(guò)的網(wǎng)頁(yè)
closed 判斷窗口是否關(guān)閉，返回布爾值
opner open方法打開(kāi)的窗口的源窗口
outerHeight 窗口邊界的垂直尺寸，px
outerWidth 窗口邊界的水平尺寸，px
pageXOffset 網(wǎng)頁(yè)x-position的位置
pageYOffset 網(wǎng)頁(yè)y-position的位置
innerHeight 窗口內容區的垂直尺寸，px
innerWidth 窗口內容區的水平尺寸，px
screenX 窗口左邊界的X坐標
screenY 窗口上邊界的Y坐標
self 當前窗口
top 最上方的窗口
parent 當前窗口或框架的框架組
frames 對應到窗口中的框架
length 框架的個(gè)數
locationbar 瀏覽器地址欄
menubar 瀏覽器菜單欄
scrollbars 瀏覽器滾動(dòng)條
statusbar 瀏覽器狀態(tài)欄
toolbar 瀏覽器工具欄
offscreenBuffering 是否更新窗口外的區域
personalbars 瀏覽器的個(gè)人工具欄，僅Navigator
窗口對象的方法：
alert(信息字串) 彈出警告信息
confirm(信息字串) 顯示確認信息對話(huà)框
prompt(提示字串[，默認值]) 顯示提示信息，并提供可輸入的字段
atob(譯碼字串) 對base-64編碼字串進(jìn)行譯碼
btoa(字串) 將進(jìn)行base-64編碼
back() 回到歷史記錄的上一網(wǎng)頁(yè)
forward() 加載歷史記錄中的下一網(wǎng)頁(yè)
open(URL，窗口名稱(chēng)[，窗口規格])
focus() 焦點(diǎn)移到該窗口
blur() 窗口轉成背景
stop() 停止加載網(wǎng)頁(yè)
close()
enableExternalCapture() 允許有框架的窗口獲取事件
disableExternalCapture() 關(guān)閉enableExternalCapture()
captureEvents(事件類(lèi)型) 捕捉窗口的特定事件
routeEvent(事件) 傳送已捕捉的事件
handleEvent(事件) 使特定事件的處理生效
releaseEvents(事件類(lèi)型) 釋放已獲取的事件
moveBy(水平點(diǎn)數，垂直點(diǎn)數) 相對定位
moveTo(x坐標，y坐標) 絕對定位
setResizable(true|false) 是否允許調整窗口大小
resizeBy(水平點(diǎn)數，垂直點(diǎn)數) 相對調整窗口大小
resizeTo(寬度，高度) 絕對調整窗口大小
scroll(x坐標，y坐標) 絕對滾動(dòng)窗口
scrollBy(水平點(diǎn)數，垂直點(diǎn)數) 相對滾動(dòng)窗口
scrollTo(x坐標，y坐標) 絕對滾動(dòng)窗口
setInterval(表達式，毫秒)
setTimeout(表達式，毫秒)
clearInterval(定時(shí)器對象)
clearTimeout(定時(shí)器對象)
home() 進(jìn)入瀏覽器設置的主頁(yè)
find([字串[,caseSensitivr,backward]]) 查找窗口中特定的字串
print()
setHotKeys(true|false) 激活或關(guān)閉組合鍵
setZOptions() 設置窗口重疊時(shí)的堆棧順序
窗口對象的事件處理程序：
onBlur onDragDrop onError onFocus onLoad onMove onResize onUnload
例1：
<Script>
function checkPassword(testObject) {
if (testObject.value.length < 4) {
alert("密碼長(cháng)度不得小于四");
testObject.focus();
testObject.select();
}
}
</Script>
請輸入密碼：
<INPUT TYPE="text" onBlur="checkPassword(this)">
例2：
<Script>
if (confirm("你滿(mǎn)十八歲了嗎?"))
location = "adult.htm";
else
alert("等你成年以後再來(lái)吧!");
</Script>
例3：
<Script>
var bgColor =
prompt("你喜歡哪一種底色：\n淺藍色請按1，粉紅色請按2",1)
if (bgColor == 1) document.bgColor = "#CCFFFF";
else if (bgColor == 2) document.bgColor = "#FFCCFF";
else document.bgColor = "#FFFFFF";
</Script>
例4：
<Script>
function grow() {
resizeBy(0, 50);
}
function shrink() {
resizeBy(0, -50);
}
</Script>
<Body onMouseOver="grow()" onMouseOut="shrink()">
將視窗放大與縮小
</Body>
例5：
<Script>
function scrollIt() {
for (y=1; y<=2000; y++) {
scrollTo(1,y);
}
}
</Script>
<Body onDblClick=scrollIt()>
雙擊鼠標，畫(huà)面會(huì )自動(dòng)卷動(dòng)...
<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><br><br><br><br>
... The End ...
</Body>
open方法的窗口規格參數：（yes/no，1/0）
格式：[var 新窗口對象名=]window.open("url","windowName","windowFeature")
alwaysLowered 是否將窗口顯示的堆棧后推一層
alwaysRaised 是否將窗口顯示的堆棧上推一層
dependent 是否將該窗口與當前窗口產(chǎn)生依存關(guān)系
fullscreen 是否滿(mǎn)屏顯示
directories 是否顯示連接工具欄
location 是否顯示網(wǎng)址工具欄
menubar 是否顯示菜單工具欄
scrollbars 是否顯示滾動(dòng)條
status 是否顯示狀態(tài)欄
titlebar 是否顯示標題欄
toolbar 是否顯示標準工具欄
resizable 是否可以改變窗口的大小
screenX 窗口左邊界距離
screenY 窗口上邊界距離
top 窗口上邊界
width 窗口寬度
height 窗口高度
left 窗口左邊界
outerHeight 窗口外邊界的高度
personalbar 是否顯示個(gè)人工具欄
注釋?zhuān)簅pen("","","menubar")
open("","","menubar=1")
open("","","menubar=yes")
例1：
<Script>
document.write ("文哥網(wǎng)絡(luò )技術(shù)學(xué)習網(wǎng)");
open ('1.htm','','height=100,width=300');
</Script>
<!-------- 1.htm -------->
<TITLE>歡迎光臨</TITLE>
<BODY onClick="self.close()">
<IMG SRC="images\welcome.gif" ALIGN="left">
<CENTER>
<FONT COLOR="blue" SIZE="5">歡迎光臨</FONT><BR>
這是一個(gè)技術(shù)研習的小天地<BR>
</CENTER>
</BODY>
例2：
<Script>
document.write("文哥網(wǎng)絡(luò )技術(shù)學(xué)習網(wǎng)")
helloWin = open ('1.htm','','height=100,width=300');
var line1 = "<FONT COLOR='blue' SIZE='5'>歡迎光臨</FONT><BR>"
var line2 = "這是一個(gè)技術(shù)研習的小天地"
helloWin.document.write (line1 + line2)
helloWin.document.title = "歡迎光臨"
</Script>
例3：
<Script>
window.defaultStatus = "最棒的線(xiàn)上學(xué)習網(wǎng)站";
</Script>
<A HREF="http://www.hubert.idv.tw" onMouseOver="status='內容很充實(shí)喔！';return true">
文哥網(wǎng)路技術(shù)學(xué)習網(wǎng)</A>
例4：
<Script>
queryWin = open('1.htm','','height=100,')
</Script>
利用子窗口來(lái)改變母窗口的底色
/* -------- 1.htm -------- */
<Script>
function passToOpener(color) {
opener.document.bgColor = color;
self.close();
}
</Script>
<CENTER>
請選擇你喜歡的顏色?<BR>
<FONT onClick="passToOpener('#CCFFFF')"> >淺藍色<</FONT>
<FONT onClick="passToOpener('#FFCCFF')"> >淺紅色<</FONT>
</CENTER>
屏幕對象：
描述屏幕的顯示及顏色屬性。
屏幕對象的屬性：
格式： screen.屬性
availHeight 屏幕區域的可用高度
availWidth 屏幕區域的可用寬度
colorDepth 顏色深度 256/8 16/16 32M/32
height 屏幕區域的實(shí)際高度
width 屏幕區域的實(shí)際寬度
例1：
<Script>
with (document) {
write ("您的屏幕顯示設定值如下：<P>");
write ("屏幕的實(shí)際高度為", screen.availHeight, "<BR>");
write ("屏幕的實(shí)際寬度為", screen.availWidth, "<BR>");
write ("屏幕的色盤(pán)深度為", screen.colorDepth, "<BR>");
write ("屏幕區域的高度為", screen.height, "<BR>");
write ("屏幕區域的寬度為", screen.width);
}
</Script>
例2：
<Script>
if ( screen.width < 800 || screen.colorDepth < 8 ){
var msg = "本網(wǎng)站最佳瀏覽模式為 800 * 600 * 256";
alert(msg);
}
</Script>
事件對象：
當事件發(fā)生時(shí)，瀏覽器自動(dòng)建立該對象，并包含該事件的類(lèi)型、鼠標坐標等。
事件對象的屬性：
格式：event.屬性
data 返回拖拽對象的URL字符串（dragDrop）
width 該窗口或框架的高度
height 該窗口或框架的高度
pageX 光標相對于該網(wǎng)頁(yè)的水平位置
pageY 光標相對于該網(wǎng)頁(yè)的垂直位置
screenX 光標相對于該屏幕的水平位置
screenY 光標相對于該屏幕的垂直位置
target 該事件被傳送到的對象
type 事件的類(lèi)型
which 數值表示的鍵盤(pán)或鼠標鍵：1/2/3（左鍵/中鍵/右鍵）
layerX 光標相對于事件發(fā)生層的水平位置
layerY 光標相對于事件發(fā)生層的垂直位置
x 相當于layerX
y 相當于layerY
例1：
<Script>
function getEvent(evnt) {
eventWin = open ('','','width=200,height=100');
with (eventWin.document) {
write("事件類(lèi)型：", event.type);
write("<br>鼠標的x坐標：", event.screenX);
write("<br>鼠標的y坐標：", event.screenY);
}
}
document.write ("單擊...")
document.onmousedown = getEvent;
</Script>
例2：
<Script>
function getCoordinate(evnt) {
if (document.all) {
x = event.screenX;
y = event.screenY;
}
else {
x = evnt.screenX;
y = evnt.screenY;
}
status = "水平坐標："+ x + "；垂直坐標："+ y;
}
document.onmousemove = getCoordinate;
</Script>
例3：
<Script>
function whichKey(evnt) {
if (document.all) {
x = event.button;
if( x==1 ) alert("你單擊了左鍵");
if( x==2 ) alert("你單擊了右鍵");
}
else {
x = evnt.button;
if( x==1 ) alert("你單擊了左鍵");
if( x==3 ) alert("你單擊了右鍵");
return false;
}
}
document.onmousedown = whichKey;
document.write("請單擊鼠標左/右鍵");
</Script>
歷史對象：
用以存儲客戶(hù)端最近訪(fǎng)問(wèn)的網(wǎng)址清單。
格式：
history.屬性
history.方法（參數）
歷史對象的屬性：
current 當前歷史記錄的網(wǎng)址
length 存儲在記錄清單中的網(wǎng)址數目
next 下一個(gè)歷史記錄的網(wǎng)址
previous 上一個(gè)歷史記錄的網(wǎng)址
歷史對象的方法：
back() 回到上一個(gè)歷史記錄中的網(wǎng)址
forward() 回到下一個(gè)歷史記錄中的網(wǎng)址
go(整數或URL) 前往歷史記錄中的網(wǎng)址
例1：
history.go(-1)
newWin.history.back()
parent.downFrame.histroy.back()
例2：
<A HREF="#" onClick="history.back()">上一頁(yè)</A>
<A HREF="javascript:history.back()">上一頁(yè)</A>
位置對象：
用來(lái)代表特定窗口的URL信息。
格式：
location.屬性
location.方法（參數）
URL的格式：
protocol//host:port/path#hash?search
URL的種類(lèi)：
javascript: javascript程序代碼
view-source: 顯示源代碼
http:
file:
ftp:
mailto:
news:
gopher
位置對象的屬性：
hash 錨點(diǎn)名稱(chēng)
host 主機名稱(chēng)
hostname host:port
href 完整的URL字符串
pathname 路徑
port 端口
protocol 協(xié)議
search 查詢(xún)信息
位置對象的方法：
reload() 重新加載
replace(網(wǎng)址) 用指定的網(wǎng)頁(yè)取代當前網(wǎng)頁(yè)
例1：
按下按鈕前往「文哥網(wǎng)絡(luò )技術(shù)學(xué)習網(wǎng)」<P>
<INPUT TYPE="button" VALUE="走吧！" onClick="location.href='http://www.hubert.idv.tw/'">
例2：
<FONT COLOR="red"
onClick="location='http://www.hubert.idv.tw/'">
文哥網(wǎng)絡(luò )技術(shù)學(xué)習網(wǎng)</FONT><P>
<FONT COLOR="blue" STYLE="cursor:hand"
onClick="location='http://www.hubert.idv.tw/'">
文哥網(wǎng)絡(luò )技術(shù)學(xué)習網(wǎng)</FONT>
例3：
<Script>
var sec = 5;
function countDown() {
if (sec > 0) {
num.innerHTML = sec--;
}
else
location = "http://www.hubert.idv.tw/";
}
</Script>
<BODY onLoad="setInterval('countDown()', 1000)">
<CENTER>
文哥網(wǎng)絡(luò )技術(shù)學(xué)習網(wǎng)
<H2>http://www.hubert.idv.tw/</H2>
五秒鐘后自動(dòng)帶你前往<BR>
<FONT ID="num" SIZE="7" FACE="impact">5</FONT>
例4：
<A HREF="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.hubert.idv.tw/');"><FONT COLOR="red"><U>設為首頁(yè)</U></FONT></A><P>
<A HREF="javascript:window.external.AddFavorite('http://www.hubert.idv.tw/','文哥網(wǎng)絡(luò )技術(shù)學(xué)習網(wǎng)');"><FONT COLOR="red"><U>加入收藏</U></FONT></A>
文件對象：
代表當前HTML對象，是由<body>標簽組構成的，對每個(gè)HTML文件會(huì )自動(dòng)建立一個(gè)文件對象。
格式：
document.屬性
document.方法（參數）
文件對象的屬性：
linkColor 設置超鏈接的顏色
alinkColor 作用中的超鏈接的顏色
vlinkColor 鏈接的超鏈接顏色
links 以數組索引值表示所有超鏈接
URL 該文件的網(wǎng)址
anchors 以數組索引值表示所有錨點(diǎn)
bgColor 背景顏色
fgColor 前景顏色
classes 文件中的class屬性
cookie 設置cookie
domain 指定服務(wù)器的域名
formName 以表單名稱(chēng)表示所有表單
forms 以數組索引值表示所有表單
images 以數組索引值表示所有圖像
layers 以數組索引值表示所有layer
embeds 文件中的plug-in
applets 以數組索引值表示所有applet
plugins 以數組索引值表示所有插件程序
referrer 代表當前打開(kāi)文件的網(wǎng)頁(yè)的網(wǎng)址
tags 指出HTML標簽的樣式
title 該文檔的標題
width 該文件的寬度（px）
lastModified 文件最后修改時(shí)間
文件對象的方法：
captureEvents(事件) 設置要獲取指定的事件
close() 關(guān)閉輸出字符流，強制顯示數據內容
getSelection() 取得當前選取的字串
handleEvent(事件) 使事件處理器生效
open([mimeType,[replace]]) 打開(kāi)字符流
releaseEvents(事件類(lèi)型) 釋放已獲取的事件
routeEvent(事件) 傳送已捕捉的事件
write(字串) 寫(xiě)字串或數值到文件中
writeln(字串) 分行寫(xiě)字串或數值到文件中（<pre>..</pre>）
文件對象的事件處理程序：
onClick onDbClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseOver
例1：
<Script>
document.bgColor = "white";
document.fgColor = "black";
document.linkColor = "red";
document.alinkColor = "blue";
document.vlinkColor = "purple";
</Script>
測試文件對象的顏色屬性：<BR>
<A HREF="http://www.hubert.idv.tw">文哥網(wǎng)路技術(shù)學(xué)習網(wǎng)</A>
例2：
<Script>
var update_date = document.lastModified;
var formated_date = update_date.substring(0,10);
document.write("本網(wǎng)頁(yè)更新日期：" + update_date + "<BR>")
document.write("本網(wǎng)頁(yè)更新日期：" + formated_date)
</Script>
錨點(diǎn)對象：
網(wǎng)頁(yè)中的錨點(diǎn)均會(huì )被自動(dòng)看作錨點(diǎn)對象，并依順序，分別表示為document.anchors[0]，document.anchors[1]...
定義錨點(diǎn)對象的格式：
字串.anchor(屬性)
錨點(diǎn)對象的屬性：
name 錨點(diǎn)名稱(chēng)
text 錨點(diǎn)字串
鏈接對象：
網(wǎng)頁(yè)中的鏈接均會(huì )被自動(dòng)看作鏈接對象，并依順序，分別表示為document.links[0]，document.links[1]...
定義鏈接對象的格式：
字串.link(屬性)
鏈接對象的屬性：
hash URL中的錨點(diǎn)名稱(chēng)
host 主機域名或IP地址
hostname URL中的host+port
href 完整的URL字串
pathname URL中path部分
port URL中端口部分
protocol URL中通訊協(xié)議部分
search URL中查詢(xún)字串部分
target 代表目標的窗口
text 表示A標簽中的文字
x 鏈接對象的左邊界
y 鏈接對象的右邊界
鏈接對象的方法：
handleEvent(事件)
激活對某事件的處理程序。
鏈接對象的事件處理程序：
onClick onDbClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp onMouseOver onMouseOut
例1：
<Script>
function linkGetter() {
msgWindow = open('','','width=250,height=200')
msgWindow.document.write("共有" + document.links.length + "個(gè)搜索引擎")
for (var i = 0; i < document.links.length; i++) {
msgWindow.document.write("<LI>"+document.links[i])
}
}
</Script>
常用的搜索引擎：<BR>
<A HREF="http://www.yam.org.tw/">蕃薯藤</A>
<A HREF="http://www.kimo.com/">奇摩</A>
<A HREF="http://chinese.yahoo.com/">雅虎</A>
<A HREF="http://gais.cs.ccu.edu.tw/">蓋世</A>
<A HREF="http://www.openfind.com.tw/">網(wǎng)擎</A>
<A HREF="http://www.dreamer.com.tw/">夢(mèng)想家</A><BR>
<INPUT TYPE="button" VALUE="網(wǎng)址一覽" onClick=linkGetter()>
框架對象：
可以被窗口中的框架引用的對象，具有窗口對象的屬性和方法。
格式：
top.frameName|frames[n].屬性|方法
parent.frameName|frames[n].屬性|方法
例：
/* -------- frameset.htm -------- */
<Script>
document.title = "框架組頁(yè)";
var usrID = "來(lái)賓";
</Script>
<FRAMESET COLS="20%,80%">
<FRAME SRC="menu.htm" NAME=leftFrame>
<FRAMESET ROWS="10%,90%">
<FRAME SRC="usrInfo.htm" NAME=upFrame>
<FRAME SRC="welcome.htm" NAME=downFrame>
</FRAMESET>
</FRAMESET>
<!-------- menu.htm -------->
<HEAD>
<TITLE>導航頁(yè)</TITLE>
<STYLE>A{text-decoration:none}</STYLE>
</HEAD>
<BODY>
<CENTER>
<A HREF="login.htm" TARGET="downFrame">會(huì )員登錄</A><BR>
<A HREF="hot.htm" TARGET="downFrame">熱門(mén)優(yōu)惠</A><BR>
<A HREF="welcome.htm" TARGET="downFrame">回 首 頁(yè)</A>
<BR>
</CENTER>
</BODY>
/* -------- usrInfo.htm -------- */
<Script>
document.title = "用戶(hù)信息";
var bye = "歡迎有空常來(lái)..."
document.write
("<MARQUEE>親愛(ài)的<FONT COLOR='gray'><U>",top.usrID,"</U></FONT>會(huì )員，歡迎您的光臨！</MARQUEE>");
</Script>
/* -------- login.htm -------- */
<Script>
document.title = "用戶(hù)登錄";
function login() {
top.usrID = document.loginForm.usr.value;
top.upFrame.location = "usrInfo.htm";
}
</Script>
<HTML>
<FORM NAME="loginForm">
請輸入您的大名：
<INPUT TYPE="text" NAME="usr">
<INPUT TYPE="button" VALUE="填寫(xiě)完畢" onClick=login()>
</FORM>
</HTML>
防止直接鏈接：
例：
<Script> /* -------- hot.htm -------- */
document.title = "熱門(mén)優(yōu)惠";
if (top.usrID == null) {
location = "frameset.htm";
}
</Script>
今日優(yōu)惠：
<LI>超級豪華大比薩。（原價(jià)$550，今天只要$450）
<LI>海鮮大比薩。（原價(jià)$550，今天只要$450）
檢查是否使用框架：
例：
<!-------- welcome.htm -------->
<HEAD>
<TITLE>首頁(yè)</TITLE>
<STYLE>A{text-decoration:none}</STYLE>
<Script>
if (top.frames.length == 0) {
location = "frameset.htm";
}
if (top.frames.length > 0) {
location = "frameset.htm";
}
</Script>
</HEAD>
<CENTER>
歡迎光臨<H1>
<FONT COLOR="green" FACE="arial">
My PIZZA</FONT></H1>
</CENTER>
表單對象：
文件對象的子對象，Javascript的runtime engine自動(dòng)為每一個(gè)表單建立一個(gè)表單對象。
格式：
document.forms[索引].屬性
document.forms[索引].方法（參數）
document.表單名稱(chēng).屬性
document.表單名稱(chēng).方法（參數）
表單對象的屬性：
action 表單動(dòng)作
elements 以索引表示的所有表單元素
encoding MIME的類(lèi)型
length 表單元素的個(gè)數
method 方法
name 表單名稱(chēng)
target 目標
表單對象的方法：
handleEvent(事件) 使事件處理程序生效
reset() 重置
submit() 提交
文本對象：
格式：
document.forms[索引].elements[索引].屬性
document.forms[索引].elements[索引].方法（參數）
document.表單名稱(chēng).文本對象名稱(chēng).屬性
document.表單名稱(chēng).文本對象名稱(chēng).方法（參數）
屬性：
defaultValue 該對象的value屬性
form 該對象所在的表單
name 該對象的name屬性
type 該對象的type屬性
value 該對象的value屬性
方法：
blur()
focus()
handleEvent(事件)
select() 該對象設置為選取狀態(tài)
事件處理程序：
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect
例1：
<FORM>
姓名：
<INPUT TYPE="text" NAME="name">
<INPUT TYPE="button" VALUE="請單擊" onClick=alert("謝謝你，"+this.form.name.value)>
</FORM>
例2：
<Script>
function getFocus(obj) {
obj.style.color='red';
obj.style.background='#DBDBDB';
}
function getBlur(obj) {
obj.style.color='black';
obj.style.background='white';
}
</Script>
<BODY onLoad=document.form1.name.focus()>
<FORM NAME="form1">
姓 名：<INPUT TYPE="text" NAME="name"
onFocus=getFocus(this) onBlur=getBlur(this)><BR>
電 話(huà)：<INPUT TYPE="text" NAME="tel"
onFocus=getFocus(this) onBlur=getBlur(this)><BR>
</FORM>
</BODY>
例3：
<Script>
var i = 0;
function movenext(obj,i) {
if(obj.value.length==4){
document.forms[0].elements[i+1].focus();
}
}
function result() {
fm = document.forms[0];
num = fm.elements[0].value +
fm.elements[1].value +
fm.elements[2].value +
fm.elements[3].value ;
alert("你輸入的信用卡號碼是"+ num);
}
</Script>
<BODY onLoad=document.forms[0].elements[i].focus()>
請輸入你的信用卡號碼：
<form>
<input type=text size=3 maxlength=4 onKeyup=movenext(this,0)> -
<input type=text size=3 maxlength=4 onKeyup=movenext(this,1)> -
<input type=text size=3 maxlength=4 onKeyup=movenext(this,2)> -
<input type=text size=3 maxlength=4 onKeyup=movenext(this,3)>
<input type=button value=顯示 onClick=result()>
</form>
</BODY>
密碼對象：
格式：
document.forms[索引].elements[索引].屬性
document.forms[索引].elements[索引].方法（參數）
document.表單名稱(chēng).密碼對象名稱(chēng).屬性
document.表單名稱(chēng).密碼對象名稱(chēng).方法（參數）
屬性：
defaultValue 該對象的value屬性
form 該對象所在的表單
name 該對象的name屬性
type 該對象的type屬性
value 該對象的value屬性
方法：
blur()
focus()
handleEvent(事件)
select() 該對象設置為選取狀態(tài)
事件處理程序：
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect
例1：
<Script>
function checkPw() {
fm = document.form1;
if (fm.pw2.value != fm.pw1.value) {
alert("密碼不符，請重新輸入");
document.form1.pw2.select();
}
else
alert("謝謝你，"+fm.name.value);
}
</Script>
<BODY onLoad=document.form1.name.focus()>
<FORM NAME="form1">
姓 名：<INPUT TYPE="text" NAME="name"><BR>
輸入密碼：<INPUT TYPE="password" NAME="pw1"><BR>
重新輸入：<INPUT TYPE="password" NAME="pw2"><BR>
<INPUT TYPE="button" VALUE="填好了" onClick=checkPw()>
<INPUT TYPE="reset" VALUE="重 填">
</FORM>
</BODY>
例2：
<Script>
function isInt(elm) {
if (isNaN(elm)) {
alert("你輸入的是" + elm + "\n不是數字！");
document.forms[0].pw.value = "";
return false;
}
if (elm.length != 4) {
alert("請輸入四位數數字！");
document.forms[0].pw.value = "";
return false;
}
}
</Script>
<form action="test.asp" onSubmit="return isInt(this.pw.value)">
請輸入四位數數字密碼：<BR>
<input type="password" name="pw">
<input type="submit" value="檢查">
</form>
按鈕對象、提交按鈕對象、重置按鈕對象：
格式：
document.forms[索引].elements[索引].屬性
document.forms[索引].elements[索引].方法（參數）
document.表單名稱(chēng).按鈕對象名稱(chēng).屬性
document.表單名稱(chēng).按鈕對象名稱(chēng).方法（參數）
屬性：
form 該對象所在的表單
name 該對象的name屬性
type 該對象的type屬性
value 該對象的value屬性
方法：
blur()
click()
focus()
handleEvent(事件)
事件處理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
隱藏對象：
格式：
document.forms[索引].elements[索引].屬性
document.forms[索引].elements[索引].方法（參數）
document.表單名稱(chēng).隱藏對象名稱(chēng).屬性
document.表單名稱(chēng).隱藏對象名稱(chēng).方法（參數）
屬性：
form 該對象所在的表單
name 該對象的name屬性
type 該對象的type屬性
value 該對象的value屬性
單選按鈕對象：
格式：
document.forms[索引].elements[索引](索引).屬性
document.forms[索引].elements[索引](索引).方法（參數）
document.表單名稱(chēng).單選對象名稱(chēng)[索引].屬性
document.表單名稱(chēng).單選對象名稱(chēng)[索引].方法（參數）
屬性：
checked 設置該對象為選定狀態(tài)
defaultChecked 對應該對象的默認選定狀態(tài)
form 該對象所在的表單
name 該對象的name屬性
type 該對象的type屬性
value 該對象的value屬性
方法：
blur()
click()
focus()
handleEvent(事件)
事件處理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
例：
<Script>
function show() {
var x = "先生";
if (document.form1.sex[1].checked)
x = "小姐";
alert(document.form1.name.value + x);
}
</Script>
<FORM NAME=form1>
姓名：<INPUT TYPE="text" NAME="name"><BR>
你是：<INPUT TYPE="radio" NAME="sex" CHECKED>帥哥
<INPUT TYPE="radio" NAME="sex">美女<BR>
<INPUT TYPE="button" VALUE="請單擊" onClick=show()>
</FORM>
復選框對象：
格式：
document.forms[索引].elements[索引].屬性
document.forms[索引].elements[索引].方法（參數）
document.表單名稱(chēng).單選對象名稱(chēng)[索引].屬性
document.表單名稱(chēng).單選對象名稱(chēng)[索引].方法（參數）
屬性：
checked 設置該對象為選定狀態(tài)
defaultChecked 對應該對象的默認選定狀態(tài)
form 該對象所在的表單
name 該對象的name屬性
type 該對象的type屬性
value 該對象的value屬性
方法：
blur()
click()
focus()
handleEvent(事件)
事件處理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
例：
<Script>
function count() {
var checkCount=0;
var num = document.form1.elements.length;
for (var i=0; i<num; i++) {
if (document.form1.elements[i].checked)
checkCount++;
}
alert ("你喜歡 "+ checkCount + "種顏色。")
}
</Script>
<FORM NAME=form1>
請選擇你喜歡的顏色：<BR>
<INPUT TYPE="checkbox" NAME="red">紅色
<INPUT TYPE="checkbox" NAME="green">綠色
<INPUT TYPE="checkbox" NAME="blue">藍色<BR>
<INPUT TYPE="button" VALUE="請單擊" onClick=count()>
</FORM>
選擇對象：
屬性：
form 該對象所在的表單
name 該對象的name屬性
length 選項的數目
options <option>標記
selectedIndex 所選項目的索引值
type 該對象的type屬性
方法：
blur()
focus()
handleEvent(事件)
事件處理程序：
onBlur onClick onChange onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
選項對象：選擇對象的子對象
格式：
<option value="值" selected>文字</option>
new Option([文字[,值[,defaultSelected[,selected]]]])
屬性：
selected 判斷該選項是否被選取
defaultSelected 指定該選項為默認選定狀態(tài)
index 所有選項所構成的數組索引值
length 選項的數目
text 該選項顯示的文字
value 所選項傳到服務(wù)器的值
例1：
<Script>
var url = new Array(3);
url[0] = "http://www.yam.org.tw/";
url[1] = "http://www.kimo.com/";
url[2] = "http://chinese.yahoo.com/";
function goto(form) {
var i = form.menu.selectedIndex;
if (i>0) {
location = url[i-1];
}
}
</Script>
<FORM>
<SELECT NAME="menu" onChange="goto(this.form)">
<OPTION>你喜歡哪一個(gè)搜索引擎?
<OPTION STYLE="color:red">◆蕃薯藤
<OPTION STYLE="color:red">◇奇摩
<OPTION STYLE="color:red">◆中文雅虎
</SELECT>
</FORM>
例2：
<Script>
function getText() {
sel = document.forms[0].weekday
ans = sel.options[sel.selectedIndex].text
return ans;
}
</Script>
<FORM>請選擇...
<SELECT name=weekday>
<OPTION VALUE="Monday">星期一
<OPTION VALUE="Tuesday">星期二
<OPTION VALUE="Wednesday">星期三
<OPTION VALUE="Thursday">星期四
<OPTION VALUE="Friday">星期五
<OPTION VALUE="Saturday">星期六
<OPTION VALUE="Sunday">星期日
</SELECT><P>
<INPUT TYPE="button" VALUE="取出選項的文字"
onClick="alert(getText())">
<INPUT TYPE="button" VALUE="取出選項的值"
onClick="alert(this.form.weekday.value)"><BR>
</FORM>
例3：
<FORM NAME="form1">
你最喜歡哪一種水果?
<INPUT TYPE="text" NAME="fruit">
<A HREF="#" onClick="javascript:open('1.htm','','width=100')">
查詢(xún)</A>
</FORM>
<Script> /* -------- 1.htm -------- */
function choice() {
sel = document.forms[0].elements[0];
document.form1.fruit.value =
sel.options[sel.selectedIndex].text;
self.close();
}
</Script>
<FORM>
<SELECT onChange="choice()">
<OPTION>請選擇
<OPTION>西瓜
<OPTION>香蕉
</SELECT>
</FORM>
例4：
<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="蘋(píng)果">蘋(píng)果 <option value="梨子">梨子
</select>
<input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>選擇項目 <option>---------------
</select>
</form>
例5：
<Script>
function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
var option = new Option(sel1.options[num].text);
sel2.options[2] = option;
}
</script>
<form name="form1">
<select name="select1" size="10">
<option>可選擇項目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="蘋(píng)果">蘋(píng)果 <option value="梨子">梨子
</select>
<input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>選擇項目 <option>---------------
</select>
</form>
例6：
<Script>
function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
var option = new Option(sel1.options[num].text);
var item = sel2.options.length;
sel2.options[item] = option;
}
</script>
<form name="form1">
<select name="select1" size="10">
<option>可選擇項目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="蘋(píng)果">蘋(píng)果 <option value="梨子">梨子
</select>
<input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>選擇項目 <option>---------------
</select>
</form>
例7：
<Script>
function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
if (num > 1) {
var option = new Option(sel1.options[num].text);
var item = sel2.options.length;
sel2.options[item] = option;
}
sel1.selectedIndex = 10000;
}
function delOptions() {
var num = document.form1.select2.selectedIndex;
if (num>1)
document.form1.select2.options[num] = null;
else
document.form1.select2.selectedIndex = 10000;
}
</script>
<form name="form1">
<select name="select1" size="10"
onDblClick="createOptions()">
<option>可選擇項目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="蘋(píng)果">蘋(píng)果 <option value="梨子">梨子
</select>
<input type="button" value="選擇" onClick="createOptions()">
<select name="select2" size="10">
<option>選擇項目 <option>---------------
</select>
<input type="button" value="刪除" onClick="delOptions()">
</form>
文本區域對象：
屬性：
defaultValue 對應該對象的默認值
form 該對象所在的表單
name 該對象的name屬性
type 該對象的type屬性
value 該對象的value屬性
方法：
blur()
select()
focus()
handleEvent(事件)
事件處理程序：
onBlur onClick onChange onSelect onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
例1：
<Script>
function isTooLong(elm){
if (elm.length > 50) {
alert("留言?xún)热萏L(cháng)，請修改后再發(fā)送....");
return false;
}
}
</script>
<FORM onSubmit="return isTooLong(this.msg.value)">
<TEXTAREA NAME="msg" COLS="30" ROWS="5" onFocus="this.value=''">
歡迎留言，不過(guò)請長(cháng)話(huà)短說(shuō)....
</textarea><BR>
<INPUT TYPE="submit" VALUE="留言完畢">
</FORM>
例2：
<STYLE>
INPUT {background-color:'99FFFF';color:"red"}
TEXTAREA {background-color:'99FFFF';color:"red"}
</STYLE>
<BODY BGCOLOR="99FFFF">
<FORM METHOD="post" ENCTYPE="text/plain" ACTION="mailto:hwyang@iii.org.tw?subject=不錯">
<TABLE>
<CAPTION>讀者回函</CAPTION>
<TR><TD>姓 名：
<TD><INPUT TYPE="text" NAME="userName">
<TR><TD>電子郵件：
<TD><INPUT TYPE="text" NAME="email">
<TR><TD VALIGN="top">內 容：
<TD><TEXTAREA NAME="msg" ROWS="2" COLS="30">
我非常喜歡你的書(shū)，加油!!!
</TEXTAREA>
<TR><TD COLSPAN="2" ALIGN="center">
<INPUT TYPE="submit" VALUE="填好了">
</TABLE>
</FORM>
</BODY>
文件上傳對象：
屬性：
form 該對象所在的表單
name 該對象的name屬性
type 該對象的type屬性
value 該對象的value屬性
方法：
blur()
select()
focus()
handleEvent(事件)
事件處理程序：
onBlur onClick onSelect onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
Cookie對象：
是一種以文件（Cookie文件）的形式保存在客戶(hù)端硬盤(pán)的Cookies文件夾中的用戶(hù)數據信息（Cookie數據）。Cookie文件由所訪(fǎng)問(wèn)的Web站點(diǎn)建立，以長(cháng)久的保存客戶(hù)端與Web站點(diǎn)間的會(huì )話(huà)數據，并且該Cookie數據只允許被所訪(fǎng)問(wèn)的Web站點(diǎn)進(jìn)行讀取。
Cookie文件的格式：
NS：Cookie.txt
IE：用戶(hù)名@域名.txt
寫(xiě)入Cookie：
格式：
document.cookie = " 關(guān)鍵字 = 值 [ ; expires = 有效日期 ] [;...]"
備注：
有效日期格式：Wdy,DD-Mon-YY HH:MM:SS GMT
Wdy / Mon：英文星期 / 月份；
還包含path、domain、secure屬性；
每個(gè)Web站點(diǎn)（domain）可建立20個(gè)Cookie數據；
每個(gè)瀏覽器可存儲300個(gè)Cookie數據，4k字節；
客戶(hù)有權禁止Cookie數據的寫(xiě)入。
例1：
<Script>
var today = new Date();
var expireDay = new Date();
var msPerMonth = 24*60*60*1000*31;
expireDay.setTime( today.getTime() + msPerMonth );
document.cookie = "name=Hubert;expires=" + expireDay.toGMTString();
document.write("已經(jīng)將 Cookie 寫(xiě)入你的硬盤(pán)中了!<br>");
document.write("內容是：", document.cookie, "<br>");
document.write("這個(gè) Cookie 的有效時(shí)間是：");
document.write(expireDay.toGMTString());
</Script>
例2：
<Script>
var today = new Date();
var expireDay = new Date();
var msPerMonth = 24*60*60*1000*31;
expireDay.setTime( today.getTime() + msPerMonth );
function setCookie(Key,value) {
document.cookie = Key + "=" + value + ";expires=" + expireDay.toGMTString();
}
setCookie("NAME","HUBERT");
document.write("累計的 Cookies 如下：<BR>");
document.write(document.cookie);
</Script>
讀取Cookie：
格式：
document.cookie
例
<Script>
function getCookie(Key){
var search = Key + "=";
begin = document.cookie.indexOf(search);
if (begin != -1) {
begin += search.length;
end = document.cookie.indexOf(";",begin);
if (end == -1) end = document.cookie.length;
return document.cookie.substring(begin,end);
}
}
document.write("嗨！ ",getCookie("name"), " 歡迎光臨..")
</Script>
刪除Cookie：
格式：
document.cookie = " 關(guān)鍵字 = ; expires = 當前日期"
例：
<Script>
var today = new Date();
function delCookie(Key) {
document.cookie = Key + "=;expires=today.toGMTString";
}
document.write("現有的 Cookies 如下：<BR>");
document.write(document.cookie, "<BR>");
delCookie("name");
document.write("刪除后的 Cookies 如下：<BR>");
document.write(document.cookie);
</Script>
聯(lián)系客服
