JavaScript使用手冊
一、JavaScript 簡介 JavaScript 是網景（Netscape）公司開發的一種基於用戶端瀏覽器、面向（基於）對象、事件驅動式的網頁指令碼語言。JavaScript語言的前身叫作Livescript。
JavaScript的特點：簡單、易學、易用；支援IE、Navigator，符合ECMA（歐洲電腦製造協會）標準；事件驅動式的指令碼程式設計思想；動態、互動操作方式。
JavaScript的作用：互動式操作；表單驗證；網頁特效；Web遊戲；伺服器指令碼開發等。
JavaScript的編寫環境：文字編輯器。執行平台：Web瀏覽器。執行方式：解釋執行（由上而下）。JavaScript的版本：JavaScript1.0——JavaScript1.4
瀏覽器對JavaScript的支援：JavaScript/IE3.0、JavaScript1.2/IE4.0；微軟允許使用者自行設定對JavaScript處理模式。
JavaScript與Java、VBScript、JScript的關係：
JavaScript與Java的區別體現在：
首先，它們是兩個公司開發的不同的兩個產品，Java是SUN公司推出的新一代物件導向的程式設計語言，特別適合於Internet應用程式開發；而JavaScript是Netscape公司的產品，其目的是為了擴充Netscape Navigator功能而開發的一種可以嵌入Web頁面中的基於對象和事件驅動的解釋性語言。
其次，JavaScript是基於對象的，而Java是物件導向的，即Java是一種真正的物件導向的語言，即使是開發簡單的程式，必須設計對象。JavaScript是種指令碼語言，它可以用來製作與網路無關的，與使用者互動作用的複雜軟體。它是一種基於對象和事件驅動的程式設計語言。因而它本身提供了非常豐富的內部對象供設計人員使用。
第三，兩種語言在其瀏覽器中所執行的方式不一樣。Java的原始碼在傳遞到用戶端執行之前，必須經過編譯，因而用戶端上必須具有相應平台上的模擬器或解譯器，它可以通過編譯器或解譯器實現獨立於某個特定的平台編譯代碼的束縛。JavaScript是一種解釋性程式設計語言，其原始碼在發往用戶端執行之前不需經過編譯，而是將文字格式設定的字元代碼發送給客戶，由瀏覽器解釋執行。
第四，兩種語言所採取的變數是不一樣的。Java採用強型別變數檢查，即所有變數在編譯之前必須作聲明。JavaScript中變數聲明，採用其弱類型。即變數在使用前不需作聲明，而是解譯器在運行時檢查其資料類型。
第五，代碼格式不一樣。Java是一種與HTML無關的格式，必須通過像HTML中引用外媒體那麼進行裝載，其代碼以位元組代碼的形式儲存在獨立的文檔中。JavaScript的代碼是一種文本字元格式設定，可以直接嵌入HTML文檔中，並且可動態裝載。編寫HTML文檔就像編輯文字檔一樣方便。
第六，嵌入方式不一樣。在HTML文檔中，兩種程式設計語言的標識不同，JavaScript使用<script>...</script>來標識，而Java使用<applet> ... </applet> 來標識。
第七，靜態繫結和動態綁定。Java採用靜態聯編，即Java的對象引用必須在編譯時間的進行，以使編譯器能夠實現強型別檢查，如不經編譯則就無法實現對象引用的檢查。JavaScript採用動態聯編，即JavaScript的對象引用在運行時進行檢查。
二、JavaScript的格式： JavaScript區分大小寫；
JavaScript指令碼程式須嵌入在HTML檔案中；
JavaScript指令碼程式中不能包含HTML標記代碼；（雙引號）每行寫一條指令碼語句；
語句末尾可以加分號；
JavaScript指令碼程式可以獨立儲存為一個外部檔案，但其中不能包含<script></script>標籤。
JavaScript指令碼程式的幾種基本格式：
1 <script>
document.write("Hello World!!!");
</script>
2 <script language="JavaScript">
document.write("Hello World!!!");
</script>
3 <script language="JavaScript" type="text/JavaScript">
document.write("Hello World!!!");
</script>
4 <script language="JavaScript1.2">
document.write("Hello World!!!");
</script>
5 <script src="hello.js"></script>
注意：document.write("Hello World!!!"); 必須儲存為一個外部檔案：hello.js
6 <script language="JavaScript">
<!--
document.write("Hello World!!!");
-->
</script>
使用JavaScript的協議：
<a href="JavaScript:alert('Hello World!!!')">請單擊</a>
<a href="#" onclick="alert('Hello World!!!')">請單擊</a>
<a href="/JavaScript://" onclick="alert('Hello World!!!')">請單擊</a> 三、JavaScript的資料類型： 數值：整數（由加號或減號、數字構成，八進位、十進位、十六進位）、浮點數（由加號或減號、數字和小數點構成，常規記數法、科學記號標記法）；
邏輯值：布爾值（true、false）；
字串值：單引號、雙引號；
空值：null
未定義值：根本不存在的對象、已定義但沒有賦值的量； 四、JavaScript常量：
布爾常量：true false
整數常量：3721 0007 0xaff（0Xaff）
浮點數常量：3.14 .001 3.721e+3 -3.721E-3
字串常量："你的E-mail地址有誤！"
含逸出字元的字串常量：
\b 退格（Backspace）
\f 換頁（Form feed）
\n 換行（New line）
\r 返回（Carriage return）
\t 定位字元（Tab）
\' 單引號（'）
\" 雙引號（"）
\\ 反斜線（\）
樣本：
document.write("我愛\'JavaScript\'")
document.write("檔案在c:\\windows\\下")
document.write("<pre>未滿十八歲\n不得進入！</pre>")
document.write("未滿十八歲<br>不得進入！")
document.alert("密碼不對\n請重新輸入！")
常數陣列：
hobby=["聽音樂","看電影"]
hobby[0]、hobby[1]
hobby=["聽音樂",,"看電影",]
hobby[0]、hobby[1]、hobby[2]、hobby[3] 五、JavaScript變數：
1、變數命名規則：
首字元必須是大寫或小寫字母或底線（_）或美元符（$）; 後續的字元可以是字母、數字、底線或美元符; 變數名稱不能是保留字；長度是任意；區分大小寫；
約定：集中置頂；儘可能使用局部變數；易於理解：避免混亂。
2、聲明變數：
var stdId;
var name,sex;
var total=3721;
var notNull=true;
var name="李小龍"，sex="先生";
var i=j=0;
3、變數賦值：
stdId = 2004007;
3、變數範圍：（方式、位置）
全域變數：省略var，或在函數外聲明
局部變數：在函數內聲明
全域變數可在整個指令碼中被使用，可在不同的視窗中相互引用（指定視窗名）
例：
<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運算式：
算術運算式；
字串運算式；
關係（比較）運算式；
邏輯運算式。
七、JavaScript運算子：
1、根據處理對象的數目，有單元運算子；二元運算子；三元運算子。
2、賦值運算子：= += -= *= /= %=（取餘）
3、算術運算子：+ - * / %（取餘） ++（遞增） --（遞減） -
例１：
<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>
4、字串運算子：+ +=
5、比較子：==、!=、===（值及類型）、!==（值及類型）、<、<=、>、>=。
例：
<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);
//類型自動轉換
}
</Script>
6、邏輯運算子：&&，||，!
例１：
<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');
//&&：有一個不是邏輯值，只要第一個運算元的值為flase，則返回第一個運算元的值flase，否則，返回第二個運算元的值
}
</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');
//||：有一個不是邏輯值，只要第一個運算元為的值true、字元或非零的數字，則返回第一個運算元的值，否則，返回第二個運算元的值
}
</Script>
例３：
<Script>
with(document) {
write("<LI>!true 的結果是 ", !true);
write("<LI>!false 的結果是 ", !false);
write("<LI>!'A' 的結果是 ", !'A');
write("<LI>!0 的結果是 ", !0);}
</Script>
7、逐位元運算符；
特殊運算子：
①、new運算子：建立對象（執行個體）
格式：對象名稱=new 物件類型（參數）
②、this運算子：表示當前對象
格式：this[.屬性]
例：
<Script>
function validate(obj) {
alert("你輸入的值是："+ obj.value);
} </Script>
請輸入任一字元：<BR>
<INPUT TYPE="text" onKeyup="validate(this)">
③、條件運算子：三元運算子
格式：<條件運算式> ? 第一個值：第二個值
例：
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>
運算子執行的優先順序：
括弧 ()
一元 ! ~ - ++ -- typeof void delete
算術 * / + -
位位移 << >> >>>
比較 < <= > >= == !=
位邏輯 & ^（xor） |
邏輯 && ||
三元條件 ?
賦值 = += -= *= /= %= <<= >>= >>>= &= ^= |=
八、JavaScript語句：
1、備註陳述式：
單行注釋：//注釋文字
多行注釋：/*
注釋文字
*/
例：
/***************************************
* 源 碼 之 家 *
* http://www.mycodes.net *
* 下載:http://www.mycodes.net *
* 論壇http://www.mycodes.net/bbs *
*****************************************/ 2、with語句： （對象動作陳述式）
功能：為一段程式建立預設對象。
格式：
with (<對象>){
<語句組>
｝
例１：
with (document) {
write ("限時搶購物品：");
write ("<Li>ViewSonic 17\" 顯示器。");
write ("<Li>EPSON 印表機。");
}
例２：
document.write ("限時搶購物品：");
document.write ("<Li>ViewSonic 17\" 顯示器。");
document.write ("<Li>EPSON 印表機。");
例1與例2等效
2、if...else語句：
格式1：
if (<運算式>)
<語句1>;
else
<語句2>;
或
if (<運算式>) <語句1>;
else <語句2>;
例：
<Script>
var now = new Date();
var hour = now.getHours();
if (6 < hour && hour < 18)
document.write ("辛勤工作才能快樂收割！");
else
document.write ("休息一下，充電後再出發。");
</Script>
格式2：
if (<運算式>){
<語句組1>
}else{
<語句組2>
}
格式3：
if (<運算式1>){
<語句組1>
}else if (<運算式2>){
<語句組2>
}else{
<語句組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 ("今天是快樂的", 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 ("今天是快樂的", dayName);
</Script> while語句：
格式1：
while (<運算式>)
語句；
格式2：
while (<運算式>){
<語句組>
} 例：
<Script>
var i = 5;
while ( i > 0 ) {
document.write("i = " ,i ,"<BR>");
i--;
}
</Script> do...while語句：
格式：
do {
<語句組>
} while (<運算式>)
例：
<Script>
var i = 5;
do {
document.write("i = " ,i ,"<BR>");
i--;
} while ( i > 0 )
</Script> for語句：
格式：
for (<初始運算式>；<條件運算式>；<變動量運算式>){
<語句組>
}
例：
<Script>
for ( var i = 5; i > 0; i-- ) {
document.write("i = " ,i ,"<BR>");
}
</Script> for...in語句：重複執行指定對象的所有屬性
格式：
for ( 變數 in 對象 ){
<語句組>
}
例：
<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("楊宏文", "男生");//建立對象執行個體papa
document.write(showProperty(papa, "papa"))
</Script> break語句：
格式：break
例：
<Script>
var i = 5;
while ( i > 0 ) {
if ( i == 3 ) break;
document.write("i = " ,i ,"<BR>");
i--;
}
</Script>
continue語句：
格式：continue
例：
<Script>
var i = 5;
while ( i > 0 ) {
i--;
if ( i == 3 ) continue;
document.write("i = " ,i ,"<BR>");
}
</Script>
switch語句：
格式：
switch (<運算式>) {
case <數值1>:<語句組1>
break;
case <數值2>:<語句組2>
break;
...
default <語句組>
} 例：
<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> |
