Transcript JavaScript
.......... JavaScript 資策會教育訓練處 楊宏文 [email protected] .......... .......... 入門篇 .......... .......... 歷史 www.hubert.idv.tw 1. 由網景公司(Netscape)發展而成。 2. 前身是Live Script文稿語言。 3. 網景與昇陽公司(Sun Micro)共同將之 推為WWW文稿語言的標準，改名為 JavaScript。 .......... .......... 特性 www.hubert.idv.tw 1. 容易使用、跨平台。 2. 直敘語言(Scripting Language)。 3. 直接嵌在(embedded)HTML文件中。 4. 補HTML及JAVA的不足。 5. 網頁設計者用以動態控制網頁間的互動。 6. 最大功能 -- 減低網路的流量、提昇使 用者滿意度。 .......... .......... 軟硬體需求 (1) www.hubert.idv.tw 於解譯程式(Interpreter)，無須編譯器 (Compiler)、聯結器(Linker)、除錯器 (Debugger)。 一般文書處理程式均可編輯。 (ex.Microsoft NotePad、Mac SimpleText、UNIX vi或emacs ...) .......... .......... 軟硬體需求 (2) www.hubert.idv.tw 支援JavaScript的瀏覽器均可閱讀。 (ex.Netscape Navigator 2.0 以上、 Microsoft IE3.0以上...) 許多平台均可使用。(ex.Windows、 Solaris、Macintosh、SunOS、HPUX、AIX、IRIX、Digital UNIX、 Linux、NetBSD、FreeBSD...) .......... .......... JavaScript 與 JAVA的相同點 www.hubert.idv.tw 1. 均為物件型態(Object Type)語言。 2. 程式控制流程類似。 3. 語法格式類似。 .......... .......... JavaScript 與 JAVA的相異點(1) www.hubert.idv.tw 1. JavaScript為解譯語言(Interpreted)﹔ JAVA為編譯語言(Compiled)。 2. JavaScript為鬆散(loose)資料型態﹔ JAVA為強制(strong)資料型態。 3. JavaScript嵌入HTML文件之中﹔ JAVA獨立於HTML文件之外。 .......... .......... JavaScript 與 JAVA的相異點(2) www.hubert.idv.tw 4. JavaScript為物件基礎(Objectbased)語言，沒有類別的繼承﹔ JAVA為物件導向(Object-Oriented) 語言，有類別的繼承。 .......... .......... 幾種常見的撰寫格式 www.hubert.idv.tw -- 利用專用標籤 • 包含於Script前後標籤(tag)之間。 • 指定使用語言及版本。 • 包含於說明標籤之中。 • 宣告成外部檔案。 -- 利用HTML標籤 • 放在Anchor當中。 • 透過 event handler .......... 格式一 - .......... 包含於Script前後標籤之間 www.hubert.idv.tw <Script> document.write("JavaScript程式一") </Script> document物件用於將目前的文件資訊輸出至使用者螢幕 write是document物件的眾多方法之一，作輸出的控制 .......... .......... 格式一(Con.) www.hubert.idv.tw 如果希望HTML一載入時即執行Script， 建議將<Script>……</Script>嵌入 <Head>前後標籤之中。 <Head> <Script> … </Script> </Head> .......... .......... 格式二 - 指定使用語言 www.hubert.idv.tw <Script language="JavaScript"> document.write("JavaScript程式二") </Script> .......... .......... 格式二 (Con.) www.hubert.idv.tw 因為直敘語言不只一種，可利用語言 屬性(language attribute)來標明所 使用的語言。 Language=JavaScript or Language=VBScript or Language=JScript .......... .......... 格式三 - 包含於說明標籤之中 www.hubert.idv.tw <Script> <!-document.write("JavaScript程式三") // --> </Script> .......... .......... 格式三 (Con.) www.hubert.idv.tw 如果使用者使用不支援JavaScript的 瀏覽器，置於文件說明標籤之中的程 式碼，將被視為一般說明文字，不至 於發生錯誤訊息。 .......... .......... 格式四 – 宣告成外部檔案 www.hubert.idv.tw <Script src = sayHello.js ></Script> 這一段標籤中並不包含任何程式碼，而是將程式寫在 另一個檔案中，利用 SRC 將該外部程式檔案指出，呼 叫並執行之。 .......... .......... sayHello.js 的內容 www.hubert.idv.tw alert("hello! 歡迎光臨我的網站") 宣告成外部檔案(*.js)的好處是，可以重複使用， 大量節省程式開發及維護的時程。 .......... .......... 格式五 – 整合在Anchor之中 www.hubert.idv.tw <Body> <A HREF="javascript:alert('這樣也可以')"> 按我吧！</A> </Body> 與超鏈結整合在一起也沒有問題。 但是要寫 “javascript:” .......... .......... 格式六 – 事件處理程序 www.hubert.idv.tw <Body> <input type="button" value=" 按我吧 " onClick="alert('很簡單吧！')"> </Body> 並不是所有Javascript的程式碼都會放在 <SCRIPT>… </SCRIPT>標籤組當中 .......... .......... 開始撰寫JavaScript(1) www.hubert.idv.tw 1. 檔案內容可以是單純的JavaScript 程式檔，或是JavaScript與HTML混 合的程式檔。 2. 檔案的副檔名必須是 htm 或 html。 3. 純粹的 JavaScript 程式檔，副檔名 是 js。 4. 瀏覽器載入程式後，立即依序由上 而下執行。 .......... .......... 開始撰寫JavaScript(2) www.hubert.idv.tw 4. 適當使用註解(Comment)，可以增 加程式的可讀性。 5. 可以利用瀏覽器所提供的除錯器， 進行簡單的偵測。 .......... .......... 常見的錯誤(一) <Script> document.write("歡迎光臨！) </Script> .......... www.hubert.idv.tw .......... 常見的錯誤(二) <Script> write("歡迎光臨！") </Script> .......... www.hubert.idv.tw .......... 常見的錯誤(三) <Script> document.Write("歡迎光臨！") </Script> .......... www.hubert.idv.tw .......... 常見的錯誤(四) <Script> document.write("歡迎光臨！") <Script> 沒有任何反應！？ 到底哪裡錯！ .......... www.hubert.idv.tw .......... 常見的錯誤(五) www.hubert.idv.tw <Script> <A HREF="javascript:alert('OK')">按我</A> </Script> 又是哪裡錯了？ .......... .......... 資料型態 .......... .......... 資料型態 •數值 (Number) ex. 18, 365.25, -12.7 •邏輯值 (Logical) ex. true, false •字串 (String) ex. This is a book. •空值 (Null) •未定義值 (Undefined) .......... www.hubert.idv.tw .......... 鬆散的資料型態 www.hubert.idv.tw •宣告變數時，無須宣告資料型態。 •程式執行時自動轉換。 var a = 18 //a為數值 var b = “姑娘今年18.” //b為字串 var c = true //c為邏輯值 .......... .......... 資料型態語法說明 www.hubert.idv.tw 如果運算式(Expression)中同時含有 ‘數值’及‘字串’，該數值會自動 被轉為字串。 str = “姑娘今年” + 18 + “。” 結果為 姑娘今年18。 .......... .......... 資料型態轉換 www.hubert.idv.tw 資料型態的轉換可以使用以下方法: 1. Object.toString() 2. Number(object) 3. parseInt(object) .......... //轉成字串 //轉成數值 //轉成數值 .......... 變數(variable)的命名 www.hubert.idv.tw 1. 變數名稱又稱識別字(identifier)。 2. 命名時第一個字母應為英文字母或底線。 3. 變數名稱中不可使用空白字元及標點符號 4. 宣告時，使用保留字 var。 5. 單行宣告兩變數，用逗號隔開。 6. 識別字的大小寫是有分別的(case-sensitive)。 var myage = ‘35’ var Myage = “35” .......... 宣告變數時， 使用VAR將發 生錯誤 .......... 常見的錯誤(六) www.hubert.idv.tw <Script> var Msg = "歡迎光臨"; //變數的初始化 document.write(msg); </Script> .......... .......... 常見的錯誤(七) <Script> var my name = "Hubert"; document.write(myname); </Script> .......... www.hubert.idv.tw .......... 範例 www.hubert.idv.tw <Script> var name = "Hubert", msg = "Hello"; document.write(msg, "<b> ", name, "</b>"); </Script> 注意在敘述句 中換行的方式 .......... .......... 溢出字元 .......... .......... 溢出字元(escape literal) www.hubert.idv.tw \n \r \t \’ \” \\ \b \f 換行 (new line) 游標回行首 (carriage return) 水平定位 (horizontal tab) 單引號(single quote) 雙引號(double quote) 反斜線(back slash) 倒退 (backspace) 有些溢出字元, 換頁 (form feed) .......... 只能用在alert() 中 .......... 溢出字元範例一 www.hubert.idv.tw 利用 \“ 來秀出雙引號 <script> window.alert("\"Hello\",歡迎光臨") </script> window物件代表使用者瀏覽器的一個視窗 alert是window物件的眾多方法之一，顯示警示對話框 .......... .......... 溢出字元範例二 www.hubert.idv.tw 利用 \t 來跳至下一個定位點 <script> alert("\" Hello\", \t 歡迎光臨 ") </script> 因為對瀏覽器而言，window為預設物件。 所以使用alert方法時，前面的window可以省略。 .......... .......... 溢出字元範例三 利用 \n 來換行 <script> alert("\" Hello\", \n歡迎光臨") </script> .......... www.hubert.idv.tw .......... 常見的錯誤(八) www.hubert.idv.tw <A href="javascript:alert("\" Hello\", hubert")"> 按我</A> 到底哪裡錯？ .......... .......... 常見的錯誤(九) <script> var name = "Hubert"; window.alert("hello", name); </script> 到底哪裡錯？ .......... www.hubert.idv.tw .......... 練習1-1 建構如下的畫面： .......... www.hubert.idv.tw .......... 運算式(expression) www.hubert.idv.tw •算數運算式 (arithmetic expression) 1+2=3 •字串運算式 (string expression) “我愛”+“JavaScript”=“我愛JavaScript” •邏輯運算式 (logical expression) a = true; b=false a && b=false .......... .......... 條件運算式 www.hubert.idv.tw 依條件值的真假，決定取第一個值或 第二個值。 sex = (no==1) ? “男生” : “女生” 若no的值為1，則該條件運算為true， 故sex = “男生” .......... .......... 一元運算子(unary) www.hubert.idv.tw •只有一個運算元，在前或在後。 運算子 運算元 ＋＋ 1 運算元 運算子 1 ++ .......... .......... 二元運算子(binary) •有二個運算元。 運算元 1 .......... 運算子 運算元 + 1 www.hubert.idv.tw .......... 三元運算子(ternary) www.hubert.idv.tw •有三個運算元。 運算元 運算子 運算元 運算子 運算元 (no==1) ? “男生” : “女生” 第一個運算元為條件運算式的條件邏輯值 .......... .......... 運算子 .......... .......... JavaScript支援的運算子 www.hubert.idv.tw • 指定運算子(assignment operator) • 比較運算子(comparison operator) • 算術運算子(arithmetic operator) • 逐位元運算子(bitwise operator) • 邏輯運算子(logical operator) • 字串運算子(string operator) • 特殊運算子(special operator) .......... .......... 指定運算子(Assignment operator) www.hubert.idv.tw •將右方運算元的值指定給左方變數。 a=5 //將數值5指定給變數a a=b //將變數b的值指定給變數a a = count(12) //將函數傳回值指定給變數a 運算元可以是數值、變數、運算式…... .......... .......... 指定運算子表 例子 = += –= *= /= %= <<= >>= >>>= &= ^= |= .......... y=a y += a y –= a y *= a y /= a y %= a y <<= a y >>= a y >>>= a y &= a y ^= a y |= a www.hubert.idv.tw 原運算式 y=a y = y+a y = y–a y = y*a y = y/a y = y%a y = y<<a y = y>>a y = y>>>a y = y&a y = y^a y = y|a + 表加 – 表減 * 表乘 / 表除 %表餘數 << 表左移 >> 表右移 >>>表無號右移 & 表逐位元AND ^ 表逐位元XOR | 表逐位元OR .......... 比較運算子(Comparison operator) www.hubert.idv.tw •比較左右兩個運算元，如果結果為 真則傳回true﹔否則傳回false •如果左右兩個運算元為字串，則逐 個字元依序比較，傳回true或false .......... .......... 比較運算子表 例子 == != > >= < <= www.hubert.idv.tw 意義 相等 30 = = 30 不相等 30 != 30 大於 15 > 30 大於等於 15 > = 30 小於 “OK” < “OX” “OK”< = “OX” 小於等於 傳回值 true false false false true true K的十進位值是75;X則是88 .......... .......... 練習1-2 www.hubert.idv.tw 計算下列各式的值，並秀出結果： a=5; b=7; c=9 (1) a+b < c (2) b*b – 4*a*c < = 0 (3) c*c > = a*a + b*b (4) c*c%2 = = 1 .......... .......... 練習1-3 www.hubert.idv.tw 依下列要求展示前一個練習的結果： 1.題目及結果均以 粗體字顯示。 2.於適當位置加入 程式註解。 .......... .......... 算數運算子(Arithmetic operator) www.hubert.idv.tw •以數值為運算元，不管常數或變數， 傳回單一數值。 •標準算數運算子：＋、—、＊、/ •餘數運算子：％ •遞增(加一)運算子：++ •遞減(減一)運算子：-•取負數運算子：.......... .......... 算數運算子 - 餘數運算子 www.hubert.idv.tw •傳回第一個數值除於第二個數值的餘數 a = 18 % 4 // 18/4餘數為2 b = 365 % 100 // 365/100餘數為65 .......... .......... 算數運算子 - 遞增運算子 www.hubert.idv.tw •傳回變數加1之值，運算子++在變數前後 意義及結果均不同。 •前置型(++var) b = 2* ++a //先把a加1，再將a乘2，所得值給b •後置型(var++) b = 2* a++ .......... //先把a乘2，所得值給b，再將a+1 .......... 算數運算子 - 遞增運算子 www.hubert.idv.tw var a=12,b=34,c=56 ++a //a值加1，結果為13 a++ //a值再加1，結果為14 c=++a+b //a值再加1為15，再加34，c值為49 c=a+b++ //a值為15，加34，c值為49 b值為34加1為35 .......... .......... 算數運算子 - 遞減運算子 www.hubert.idv.tw var a=12,b=34,c=56 --a //a值減1，結果為11 a-//a值再減1，結果為10 c=--a+b //a值再減1為9，再加34，c值為43 c=a+b-//a值為9，再加34， c值為43 b值為34減1為33 .......... .......... 算數運算子 - 取負數運算子 www.hubert.idv.tw •傳回運算元的負數。 y=-x .......... //取x的負值給予y .......... 算數運算子表 + – ＊ / % ++ –– – .......... www.hubert.idv.tw 例子 傳回值 1+1 2–1 2*2 3/2 3%2 + +3 – –3 –3 2 1 4 1.5 1 4 2 –3 .......... 邏輯運算子(logical operator) www.hubert.idv.tw •以邏輯值，或稱布林值為運算元，傳回 一個布林值。 AND(&&) OR (||) NOT (!) .......... a&&b a || b !a //當a與b均為true，傳回true //當a與b任一為true，傳回true //當a為false，傳回true .......... 邏輯運算子表 www.hubert.idv.tw a邏輯值 b邏輯值 a && b a || b !a false false false false true false true false true true true false false true false true true true true false .......... .......... 字串運算子(string operator) www.hubert.idv.tw •將兩個運算元字串連結並傳回字串。 •又稱為串聯運算子。符號同加法運算子。 a = “我愛” b = “JavaScript” //將字串指定給變數a //將字串指定給變數b c=a+b //將兩字串相加 .......... .......... 特殊運算子(special operator) www.hubert.idv.tw • new 運算子：建立自行定義之物件型態 • typeof 運算子：將運算元的型態傳回 • void 運算子：處理一個沒有傳回值的 計算式 .......... typeof運算子 .......... www.hubert.idv.tw var a=365; var b=true; var c="OK" document.write("typeof(a)=",typeof(a),"<BR>") //typeof(a)將傳回number document.write("typeof(b)=",typeof(b),"<BR>") //typeof(b)將傳回true document.write("typeof(c)=",typeof(c),"<BR>") //typeof(c)將傳回string .......... void運算子 .......... www.hubert.idv.tw • 利用超文字連結方式處理運算式。 將文件表格(form)傳送(submit)出去: <A HREF="javascript:void(document.form.submit())"> 送出</A> .......... .......... 指令與敘述 .......... .......... 程式基本語法 www.hubert.idv.tw • 每一行程式係由關鍵字(keyword)組成。 • 單一指令逐行撰寫。 • 同一行可包含多重指令，但須以分號 (semi-colon)隔開。 • 每一行的結尾可以加上“；”，但不寫 也可以。 .......... .......... 基本指令 www.hubert.idv.tw • comment 敘述 (comment statement) • while 敘述 (while statement) • for 敘述 (for statement) • if 敘述 (if statement) • break 敘述 (break statement) • continue 敘述 (continue statement) • with 敘述 (with statement) • switch 敘述(switch statement) .......... .......... 基本指令 - comment • 提高程式可讀性 • 增加程式維護方便 // 單列的註解敘述 /* 多列的 註解敘述 */ .......... www.hubert.idv.tw .......... 基本指令 - while www.hubert.idv.tw • 又稱while迴圈。 • 每一次迴圈均計算條件判斷式的值， 若其值為真(true)則執行內含的敘述， 否則跳出迴圈。 While (邏輯判斷式) {程式碼區塊} .......... .......... 基本指令 - while www.hubert.idv.tw <Script> var i=5 //全域變數i，初值為5 while (i>0) //while敘述，條件運算式為i>0 { document.write("i=",i,"<br>") i-} </Script> .......... .......... 基本指令 - for www.hubert.idv.tw •又稱為for迴圈(loop)。 •依括號內三個選擇性參數的值，決定 迴圈的次數。 for ([初值];[邏輯判斷式];[更新敘述]) .......... .......... 基本指令 - for www.hubert.idv.tw <Script> for (i=5; i>0; i--) { document.write("i=",i,"<br>") } </Script> .......... .......... 基本指令 - if www.hubert.idv.tw • if的單一敘述法。 如果條件判斷式的值為真，執行敘述式。 if (邏輯判斷式) 程式敘述 • if的多重敘述法。如果條件判斷式的值 為真，則執行敘述一，否則執行敘述二 if (邏輯判斷式) else .......... {程式敘述區塊} {程式敘述區塊} .......... 基本指令 - if <Script> if (5>3) document.write("楊宏文真棒") if (5>3) document.write("楊宏文真棒") else document.write("再加油吧！") </Script> .......... www.hubert.idv.tw .......... 常見的錯誤(十) www.hubert.idv.tw <script> var gender = "male"; if (gender = "female") alert("小姐! 妳好"); else alert("先生! 你好"); </script> 奈啊呢! .......... JavaScript 81 .......... 基本指令 - break 用來終止while或for迴圈。 .......... www.hubert.idv.tw .......... 基本指令 - break搭配for loop www.hubert.idv.tw <Script> for (i=5; i>0; i--) { if (i == 3) break document.write("i=",i,"<br>") } </Script> .......... .......... 基本指令 - break搭配while loop www.hubert.idv.tw <Script> var i=5 //全域變數i，初值為5 while (i>0) //while敘述，條件運算式為i>0 { if (i == 3) break document.write("i=",i,"<br>") i-} </Script> .......... .......... 基本指令 - continue www.hubert.idv.tw 僅僅終止while或for的某一個迴圈，然 後繼續進行下一個迴圈。 .......... .......... 基本指令 - continue搭配for loop www.hubert.idv.tw <Script> for (i=5; i>0; i--) { if (i == 3) continue document.write("i=",i,"<br>") } </Script> .......... .......... 基本指令 - continue搭配while loop www.hubert.idv.tw <Script> var i=5 //全域變數i，初值為5 while (i>0) //while敘述，條件運算式為i>0 { if (i == 3) continue document.write("i=",i,"<br>") i-} </Script> .......... .......... 基本指令 - with www.hubert.idv.tw •簡化物件的處理。 •建立敘述的預設物件(default object) with (物件名稱) 敘述 .......... .......... 基本指令 - with www.hubert.idv.tw <script> with(document) { write("Hello World!"); write("<br>"); write("這是我的第一支JavaScript程式"); } </script> .......... .......... 基本指令 - switch www.hubert.idv.tw • 依據不同情況執行敘述。 • 可以設定預設的敘述，來避免不符 合所設定的情況發生。 .......... .......... 範例 - switch www.hubert.idv.tw <Script> var yourgender = prompt("你的性別是：\r男生請按1，女生請按2"); switch(yourgender) { case "1" : alert("你好哇！"); break; case "2" : alert("妳好哇！"); break; default : alert("別鬧了！"); break; } </script> .......... .......... 函式(function) www.hubert.idv.tw • 結構化程式設計。 • 代表一段副程式。 • 利用關鍵字 function 宣告函式名稱。 function 函式名稱(引數) {敘述} .......... .......... 引數 (Arguments) www.hubert.idv.tw • • • • 函數用來執行作業或計算的值。 放置在函式名稱後面的括弧中。 用以將資訊傳遞至函式中。 若有多個引數(argument)，須用逗號 隔開。 • 引數的個數可以用以下變數來取得。 函數名稱.arguments.length • 引數的值可以用以下變數取得。 函數名稱.arguments[x] .......... .......... 函式的呼叫 www.hubert.idv.tw 有以下幾種模式： • 沒有參數的傳遞。 • 包含參數的傳遞(call by value)。 • 利用return傳值。 • 遞迴呼叫(recursive) 。 呼叫時必須加上小括號。 欲傳遞的參數則放在括號內。 .......... .......... 函數的呼叫 - 沒有參數傳遞 www.hubert.idv.tw <Script> function a(){ //定義函數a document.write("我是楊宏文"); } function b(){ //定義函數b document.write("<br>"); } a(); b(); a(); </Script> .......... //呼叫函數a //呼叫函數b .......... 函數的呼叫 - 參數傳遞 www.hubert.idv.tw <Script> function a(name){ document.write("我是", name); } function b(){ document.write("<br>"); } a("楊宏文"); //呼叫函數a, 同時傳入name的值 b(); a("Hubert Yang"); </Script> .......... .......... 常見的錯誤(十一) www.hubert.idv.tw <script> fuction show() { alert("JavaScript"); } document.onload = show(); </script> .......... JavaScript 97 .......... 常見的錯誤(十二) www.hubert.idv.tw <script> function say hello() { alert("你好嗎？"); } </script> .......... JavaScript 98 .......... 函數的呼叫 - 利用return傳值 www.hubert.idv.tw <Script> function add(x,y) { var sum = x+y; return sum; } document.write(add(1,2)); </Script> .......... .......... 函數的呼叫 - 利用return傳值 www.hubert.idv.tw <Script> function pickanumber() { var num = Math.random(); var luckynum = Math.floor(num * 100) % 43; return luckynum; } document.write("趕快去簽 ", pickanumber(), " 號"); </Script> .......... .......... 遞迴函數 www.hubert.idv.tw •在函數中直接引用函數本身，稱為 遞迴函數（recursive function）。 •遞迴函數會層層呼叫自己，必須設 計一個停止呼叫的機制，然後一層 一層的返回。 .......... .......... 遞迴函數 www.hubert.idv.tw <script> function factor(n){ if (n == 0) return 1 else return (n * factor(n-1)) } document.write("5! = ", factor(5)) </script> .......... .......... 引數與參數 www.hubert.idv.tw •主程式的引數，傳送給函數的參數。 •無論函數中的值如何改變，均不影 響 主程式的引數值。 •函數執行完畢後會將參數值所佔用 的 記憶體空間歸還。 .......... .......... 練習1-4 www.hubert.idv.tw 利用函數傳值建構同學通訊錄 .......... .......... 結合CSS綜合範例 – 開關選單 www.hubert.idv.tw <Script> function change(){ if (child.style.display == '') child.style.display = 'none'; else child.style.display = ''; } </Script> <font id="mother" style="cursor: hand" onclick="change()"> ■ 搜尋引擎</font> <span id="child" style="display: none; text-indent: 20pt"> <li><a href="http://tw.yahoo.com">YAHOO</a> <li><a href="http://www.google.com">Google</a> </span> .......... .......... 練習1-5 www.hubert.idv.tw 利用函數傳值建構彩色版通訊錄 .......... .......... 變數的宣告 www.hubert.idv.tw 區域性變數 (local variable) 1. 在函數(function)中宣告。 2. 必須使用 var 宣告。 全域性變數 (global variable) 1. 無須使用 var 宣告。 .......... JavaScript 107 .......... 變數的有效範圍 www.hubert.idv.tw 區域性變數 (local variable) 僅於所在函數中有效。 全域性變數 (global variable) 於該文件的所有<Script>標籤中 均有效。 .......... JavaScript 108 .......... 變數的使用範例 www.hubert.idv.tw <script> var arms = 2 //arms是全域變數 legs = 2 //legs是全域變數 function init() { var heads = 1 //heads是區域變數 eyes = heads * 2 //eyes是全域變數 } init() document.write("手臂有",arms,"隻<BR>") document.write("腿有"+legs+"條<BR>") document.write("頭有",heads,"個<BR>") 你知道如何 document.write("眼睛有"+eyes+"粒<BR>") 修改嗎？ </script> .......... JavaScript 109 .......... 變數宣告的整理(1) www.hubert.idv.tw 1. 在函數外宣告的變數，無論是否使 用保留字 var 宣告，均稱為全域變 數。 2. 在函數內宣告的變數，如使用 var 宣告，則為區域變數﹔未使用 var 宣告，則仍視為全域變數。 3. 請養成用 var 宣告變數的好習慣。 .......... JavaScript 110 .......... 變數宣告的整理(2) www.hubert.idv.tw 4. 如果在函數內有一個變數名稱與全域 變數名稱相同，則區域變數優先權 (precedence) 高於全域變數。 5. 函數內不可再包含另一個函數。 6. 區域變數有助於降低記憶體的浪費， 提高系統使用效率。 .......... JavaScript 111