Download presentation
Presentation is loading. Please wait.
1
P303 HTML/DHTML/CSS/JavaScript 專業HTML網頁設計 陳錦輝
2
第十四章 JavaScript程式設計 14.1 客戶端所執行的程式 14.2 <script>標籤
客戶端所執行的程式 <script>標籤 『JavaScript』的基礎 決策與迴圈(流程控制) JavaScript與物件導向程式設計 函數 引用外部的JavaScript檔案 JavaScript整合範例 網頁DIY
3
14.1 客戶端所執行的程式 在WWW的Client/Server架構中，程式的執行分為兩種，就是在伺服器端(Server端)執行的程式及在客戶端(Client端)執行的程式。 伺服器端就是在第12章所安裝的網頁伺服器，每一種網頁伺服器所能夠執行的網頁程式語言並不相同。 這些語言所依靠的基礎語法也不相同，常常會根據程式設計師的習慣或作業平台的要求來決定使用哪一種網頁設計程式語言。
4
14.1 客戶端所執行的程式 客戶端其實就是瀏覽器，同樣地由於瀏覽器的不同，所能執行的客戶端程式語言也有所不同。
14.1 客戶端所執行的程式 客戶端其實就是瀏覽器，同樣地由於瀏覽器的不同，所能執行的客戶端程式語言也有所不同。 客戶端是架構於每台電腦上，並且每台電腦所執行的瀏覽器視窗可能不只一個。
5
14.1 客戶端所執行的程式 伺服器也是由一台電腦或數台電腦組合而成，等級通常比家庭用個人電腦高一些，但由於同時連線的客戶端瀏覽器可能多達成千上萬，因此如果所有的程式都必須由伺服器來執行，伺服器的效能必定下降許多，這將影響所有連線至該伺服器的瀏覽器，瀏覽網頁時的順暢度。 撰寫瀏覽器程式的工作應該交由網頁程式設計師來做，不過由於這些程式可以被瀏覽器執行，因此常常可以造就許多更新奇的網頁變化。
6
14.2 <script>標籤 不論是JavaScript或VBScript程式碼都是包含在<script>與</script>當中，並且可以位於HTML文件的任何地方，例如：<head>、</head>之間，<body>、</body>之間，但為了使程式碼與HTML標籤分開，建議將包含JavaScript或VBScript程式碼的<script>標籤寫在<head>與</head>之間。 屬性language：用來指定所要使用的語言為VBScript還是JavaScript。預設值為JavaScript。
7
14.3 『JavaScript』的基礎 JavaScript是一種可以由客戶端瀏覽器執行的程式語言，由Sun與Netscape合作發展，將Java語言簡化而來。 JavaScript不需要事先翻譯成可執行檔，當瀏覽器從伺服器端取得JavaScript程式碼時，只是取得未經過處理的文字資料，等到要執行這些程式碼時，才逐行翻譯，稱為直譯式語言。 JavaScript比Java語言簡單了許多，同時JavaScript也是物件導向語言，同樣採用事件主導方式。
8
14.3.1 撰寫第一個JavaScript程式 範例14-1： 內容 執行結果 範例說明：
內容 執行結果 範例說明： 在第7~12列為<script>標籤內容，將<script>置於<head>標籤內，以便更清楚的分辨程式碼與HTML標籤，也可以將<script>放置於其他地方。第7列的language屬性設為JavaScript，代表所使用是JavaScript語言；不設定也沒關係，因為預設值為JavaScript。第8~11列為JavaScript程式碼。
9
14.3.2 變數型態與宣告 變數是用來儲存程式執行時各項資料的一個記憶體位置名稱，因此任何程式語言都必須使用變數來為各項資料命名。
14.3.2 變數型態與宣告 變數是用來儲存程式執行時各項資料的一個記憶體位置名稱，因此任何程式語言都必須使用變數來為各項資料命名。 在JavaScript中，變數宣告使用的指令是var。變數經宣告之後，便可以在程式中做為運算或判別之用。JavaScript的變數宣告可以將變數宣告與變數值指定放在同一列撰寫，也可以不宣告變數就直接指定變數值。
10
14.3.2 變數型態與宣告 JavaScript的變數分為許多種資料型態，下表就是最常用的4種JavaScript資料型態。 變數種類
變數型態與宣告 JavaScript的變數分為許多種資料型態，下表就是最常用的4種JavaScript資料型態。 變數種類 說明 字串 字串是由多個字元所組合而成。字串的指定必須包含在『"』之內或『'』之內。通常使用『"』，當字串中也包含『"』符號時，才使用『'』來包裝字串。 整數 可以表示10進制整數、16進制整數(前面加上Ox或OX)、8進制整數(前面加上O)。 浮點數 浮點數即小數，在JavaScript中，浮點數有兩種表示的方法，第一種是一般的小數表示法，第二種是用指數的方法(科學記號)來宣告，即在小數後面加上指數符號E或e。 布林 布林資料型態的變數值只有兩種，『真(true)』與『假(false)』，通常用來儲存兩項資料比較後的結果，然後依照所比較的值為true或false來決定要執行哪一段程式。 4種JavaScript資料型態
11
14.3.3 陣列 陣列是一堆元素依照順序排列在一起，然後放在某個變數之中，而陣列中的每個元素都可以利用索引方式取得元素值。以下是JavaScript宣告陣列的方式： A1 = new Array() A1 [1] = 2 A1 [2] = 17 …………… A1 [20] = 14 上面的陣列為20個元素的一維陣列，其中1到20就是索引值。透過索引可以輕鬆取出元素值，例如：若B=A1[2]，則B=17。除了一維陣列之外，JavaScript也支援多維陣列。
![陣列 陣列是一堆元素依照順序排列在一起，然後放在某個變數之中，而陣列中的每個元素都可以利用索引方式取得元素值。以下是JavaScript宣告陣列的方式： A1 = new Array() A1 [1] = 2 A1 [2] = 17 …………… A1 [20] = 14.](http://slidesplayer.com/slide/11533278/62/images/11/%E9%99%A3%E5%88%97+%E9%99%A3%E5%88%97%E6%98%AF%E4%B8%80%E5%A0%86%E5%85%83%E7%B4%A0%E4%BE%9D%E7%85%A7%E9%A0%86%E5%BA%8F%E6%8E%92%E5%88%97%E5%9C%A8%E4%B8%80%E8%B5%B7%EF%BC%8C%E7%84%B6%E5%BE%8C%E6%94%BE%E5%9C%A8%E6%9F%90%E5%80%8B%E8%AE%8A%E6%95%B8%E4%B9%8B%E4%B8%AD%EF%BC%8C%E8%80%8C%E9%99%A3%E5%88%97%E4%B8%AD%E7%9A%84%E6%AF%8F%E5%80%8B%E5%85%83%E7%B4%A0%E9%83%BD%E5%8F%AF%E4%BB%A5%E5%88%A9%E7%94%A8%E7%B4%A2%E5%BC%95%E6%96%B9%E5%BC%8F%E5%8F%96%E5%BE%97%E5%85%83%E7%B4%A0%E5%80%BC%E3%80%82%E4%BB%A5%E4%B8%8B%E6%98%AFJavaScript%E5%AE%A3%E5%91%8A%E9%99%A3%E5%88%97%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%9A+A1+%3D+new+Array%28%29+A1+%5B1%5D+%3D+2+A1+%5B2%5D+%3D+17+%E2%80%A6%E2%80%A6%E2%80%A6%E2%80%A6%E2%80%A6+A1+%5B20%5D+%3D+14..jpg "上面的陣列為20個元素的一維陣列，其中1到20就是索引值。透過索引可以輕鬆取出元素值，例如：若B=A1[2]，則B=17。除了一維陣列之外，JavaScript也支援多維陣列。")
12
14.3.3 陣列 陣列宣告也可以給定元素初值，例如： A2 = new Array(“cat”,“dog”,“pig”) 。利用此種方式所宣告的陣列索引是從0開始，而不是從1開始。另外宣告陣列變數時，並不需要事先給定陣列大小。 由於陣列所需要的記憶體空間較大，因此陣列不可以未宣告就直接使用。否則，將出現變數未定義的錯誤。
13
14.3.4 基本運算與運算子 任何程式語言都是依靠變數與變數之間的運算來完成某些資料的交換，這些運算所依靠的符號便稱為運算子(例如：+與-)。 JavaScript使用了物件導向的重載技術，也就是說，同樣的運算子若使用在不同的資料型態，就可能會有產生不同的結果，例如：數字與字串的相加符號都是『+』，但實際運作的結果卻大不相同。以下是JavaScript的各種基本運算列表。
14
14.3.4 基本運算與運算子 運算 符號 說明 範例 加法 + 加法在不同的資料型態所呈現的效果不太相同。允許的資料型態如下：(1) 數字：把兩個數字加起來。(2) 字串：相加的字串會被接起來。(3) 字串與數字：會把數字也當作是字串然後連結起來。 (1) 數字： = 23(2) 字串："Go" + "od" = "Good"(3) 字串與數字："Go" ="Go2003" 減法 - 減法只允許做數字資料型態的運算，將兩個數字相減。 數字： = -11 各種基本運算
15
14.3.4 基本運算與運算子 運算 符號 說明 範例 乘法 * 乘法僅適用於數字(整數、浮點數)相乘
14.3.4 基本運算與運算子 運算 符號 說明 範例 乘法 * 乘法僅適用於數字(整數、浮點數)相乘 8 * 7 = * 3 = 4.5 除法 / 除法僅適用於數字(整數、浮點數)相除 1000 / 4 = 250 取餘數 % 取餘數就是小學所學直式除法的餘數 38%5 = 3 遞增 ++ 可以使變數值+1。共有兩種指定方法：++var與var++。見【遞增與遞減】 var2=++var1var2=var1++ 遞減 -- 可以使變數值-1。共有兩種指定方法：--var與var--。見【遞增與遞減】 var2=--var1var2=var1-- 各種基本運算
16
14.3.5 邏輯比較符號 程式的流程控制常常是依靠邏輯比較符號來完成，邏輯比較是依照邏輯比較運算符號的定義對左右兩邊的運算式做一些比較，然後獲得一個true或false布林值，依照此布林值決定接下來要執行的動作。 JavaScript提供六種邏輯比較符號(如下表)。
17
14.3.5 邏輯比較符號 符號 意義 範例 == 判斷左右運算式是否相等 Expr1 == Expr 2 != 判斷左右運算式是否不相等
14.3.5 邏輯比較符號 符號 意義 範例 == 判斷左右運算式是否相等 Expr1 == Expr 2 != 判斷左右運算式是否不相等 Expr1 != Expr2 < 判斷左運算式結果是否小於右運算式結果 Expr1 < Expr2 > 判斷左運算式結果是否大於右運算式結果 Expr1 > Expr2 <= 判斷左運算式結果是否小於或等於右運算式結果 Expr1 <= Expr2 >= 判斷左運算式結果是否大於或等於右運算式結果 Expr1 >= Expr2 JavaScript的六種邏輯比較符號
18
14.3.5 邏輯比較符號 邏輯運算符號可以將布林型別(true或false)的資料作某些運算，若將邏輯運算符號與其他邏輯比較符號搭配使用，運算結果將仍然是邏輯型別(布林值)。 JavaScript提供的邏輯運算符號如下，以真值表方式來加以介紹。
19
14.3.5 邏輯比較符號 (1) !『!』是Not邏輯運算符號，「!」會將輸入的值反相，若輸入的值為true，輸出的值將為false。反之，輸入的值為false，輸出的值將為true。 (2) &&『&&』是And邏輯運算符號，當輸入的兩個運算式都是true，輸出才會是true，其餘的各種情況都是輸出false。 X !X false true 真值表：!X X Y X && Y false true 真值表： X & Y
20
14.3.5 邏輯比較符號 (3) ||『||』是Or邏輯運算符號，當輸入的兩個運算式中只要有一個是true，輸出就會是true，只有當兩個運算式都是false時，輸出才會是false。 X Y X || Y false true 真值表： X || Y
21
14.3.7 指定運算子 指定運算子可用來簡化一些基本運算式，通常只使用等號『=』這個最普遍的指定運算子，但在JavaScript中還有一些特殊的指定運算子可以使用(如下表)。使用這些運算子可以加快程式的執行效率。 運算子 範例 等同效力 += a+=b a=a+b -= a-=b a=a-b *= a*=b a=a*b /= a/=b a=a/b
22
14.3.8 運算優先權 運算子的優先權決定了一個運算式的最終答案，必須依照運算子的優先權來撰寫運算式，才不致發生非預期的結果。
14.3.8 運算優先權 運算子的優先權決定了一個運算式的最終答案，必須依照運算子的優先權來撰寫運算式，才不致發生非預期的結果。 如果不確定該運算子優先權的話，建議使用小括號將想要先做的部分運算式包起來，因為小括號內的運算會先被執行。 運算子優先權首先會以運算類別劃分，同類別的運算符號也是具某些順序性，如下表。
23
14.3.8 運算優先權 優先權 運算符號類別 優先順序(由高到低) 高 低 算術運算符號 !、- (負號)、++、-- *、/、% +、-
14.3.8 運算優先權 優先權 運算符號類別 優先順序(由高到低) 高 低 算術運算符號 !、- (負號)、++、-- *、/、% +、- 比較邏輯符號 <>、<、>、<=、>= !=、== 位元運算符號 & ^ | 邏輯及位元運算符號 && || 指定運算子 =、+=、-=、*=、/=、%=、&=、^=、|=
24
14.3.9 JavaScript的註解 HTML的註解為『<!--…..-->』，為了怕某些瀏覽器不支援JavaScript，因此可以把JavaScript程式碼包裝在HTML的註解符號內，但『<!--…..-->』並不是真正的JavaScript註解符號。 其實JavaScript的註解符號是『//』，『//』符號之後整列的任何東西都會被判定為JavaScript程式的註解，直譯器將不加以處理。
25
14.4 決策與迴圈(流程控制) 任何一種程式語言都必須具有流程控制能力，否則將無法提供各類變化的執行結果。流程控制是由決策與跳躍組成，而決策與跳躍也可以合成迴圈。 在一般的結構化程式語言中，都不允許使用者自行定義跳躍，而把跳躍移到決策與迴圈之內，在JavaScript也是如此，並且具備了一些流程控制指令。
26
14.4.1 if決策 if決策很簡單，就是當某個條件運算式(或稱判斷式)成立時，就去做某件事(或某些事)，當條件運算式不成立時，就不會做這些事，下面是一個生活實例。 if (下雨) 打傘; 在JavaScript中，寫上述的實例程式也是同樣的道理，只不過將『下雨』使用條件運算式及邏輯來表達。把『打傘』用程式指令來表達。例如：if (A>1) B=100，就是當A>1時，將B的變數值指定為100。
27
14.4.1 if決策 如果要做的事不只一件的時候，又該如何撰寫呢？以下是一個生活實例。 if (感冒了) { 多喝水; 多休息; }
同樣地，上述範例也符合JavaScript的語法，從『{』到『}』之內所有事情就是當if之後的條件運算式邏輯成立時所要做的事情，以下是if決策的兩個完整語法。
28
14.4.1 if決策 if決策語法一： if決策語法二： 範例14-2： 內容 執行結果 if (判斷式) 要執行的單一敘述;
內容 執行結果 if (判斷式) 要執行的單一敘述; if(判斷式) { 要執行的敘述區塊; }
29
14.4.2 if…else…決策 使用if決策無法在當判斷式不成立時，指定所執行的動作。而if…else…就可以在判斷式不成立的狀況下，執行某些指定的程式碼(判斷式成立則不會執行這些程式碼)，其語法如下。 if…else…語法： if (判斷式) { 判斷式成立時要執行的敘述區塊 } else 判斷式不成立時所執行的敘述區塊 if…else…流程圖：
30
14.4.2 if…else…決策 範例14-3： 內容 執行結果 範例說明：
內容 執行結果 範例說明： 本範例與範例14-2的差異 僅僅多了第17~20列的else 部分，因此，當輸入的值 小於等於5時，則第19列 會被執行(第14~15列不會被執行)。
31
14.4.3 switch…case決策 當狀況不只一個的時候，除了使用多個或巢狀式if...else...決策之外，還可以使用switch…case決策。swith…case可以使得程式碼看起來更加來得清楚。當判斷式的條件為同一個變數的時候，就可以使用switch…case來做決策，其語法如下所示。 switch…case語法： switch(變數名稱) { case 條件值1 : …執行敘述區塊1……… break; case 條件值2 : …執行敘述區塊2……… break; ： default : …執行敘述區塊……… break; }
32
14.4.3 switch…case決策 switch…case流程圖
33
14.4.3 switch…case決策 範例14-4： 內容 執行結果 範例說明：
內容 執行結果 範例說明： 當輸入的值為1時，第14列『:』後面的指令會被執行，當輸入的值為2時，第15列『:』後面的指令會被執行，當輸入的值為3時，第16列『:』後面的指令會被執行，當輸入的值不為1,2,3時，第17列『:』後面的指令會被執行。第11列的parseInt()函數是用來將字串轉換為整數，否則case的條件式就必須指定為字串，例如：『case "1":』。
34
14.4.4 for迴圈 迴圈是結構化程式語言另一項重要的設計，它可以重複不停的做某些動作直到某個條件成立或不成立時，動作才會停止。
在下面的小範例中，迴圈一共會被執行10次，因此『總和=總和+次數』也總共會被執行10次。最開始迴圈條件變數『次數』值為1，每次重複執行迴圈時，「次數」值都會加1， 所以如果「總和」變數一開始指定為0的話，當迴圈執行完畢，「總和」值就會是1~10的總和55。 for(次數=1; 次數<=10; 次數++) { 總和=總和+次數; }
35
14.4.4 for迴圈 for迴圈一共需要三個元素，分別是條件變數初始值、迴圈不結束條件、迴圈每次的變化，三個元素之間用分號『;』隔開，迴圈內部指令使用大括號包起來，就是一個完整的for迴圈敘述。 迴圈每次的變化就是一個指令，一般常見的為遞增或遞減。但如果是其他指令也無妨，例如：i=i+2就可以用來做為每次遞增2的迴圈變化。 for(次數=1; 次數<=10; 次數=次數+2) { 總和=總和+次數; }
36
14.4.4 for迴圈 for迴圈語法： for執行順序： for(條件變數初始值;迴圈不結束條件;迴圈每次的變化) { ……………………
迴圈內的敘述區塊 }
37
14.4.4 for迴圈 for迴圈執行的詳細步驟如下： Step0：條件變數初始化。
Step5：回到Step1。
38
14.4.4 for迴圈 for迴圈流程圖：
39
14.4.4 for迴圈 break指令 continue指令
continue指令和break指令不太相同，break指令會跳出整個迴圈，而continue指令只會跳過該次迴圈剩餘的步驟，回到迴圈的開頭，也就是跳過尚未執行的Step2~3，直接到Step4。因此若符合迴圈不結束條件的話，迴圈仍然會繼續執行。
40
14.4.4 for迴圈 範例14-5： 內容 執行結果 範例說明：
內容 執行結果 範例說明： 在第18~19列中，出現了一個每次減1的迴圈，該迴圈依照所輸入的數值來決定迴圈執行的次數，目的是求出階乘。例如：您所輸入的數值為6，M則會等於6*5*4*3*2*1=720。
41
14.4.5 while迴圈 在for迴圈中，必須設定迴圈變數的起始值與結束值，若不使用break指令，則在迴圈一開始被執行的時候就可以決定迴圈內部指令的執行次數。 for迴圈一般用在與數字相關的運算。但並非所有的狀況都適合用for迴圈來寫。例如希望程式一直重複做某件事，直到某條件成立或不成立為止，而非執行固定的次數，就可以採用while迴圈。 while迴圈在一開始會先判斷while的迴圈不結束條件是否成立，若成立則執行迴圈內部指令，若不成立就跳出迴圈。
42
14.4.5 while迴圈 while迴圈語法： while迴圈流程圖： while(迴圈不結束條件) { 迴圈內敘述區塊 }
43
14.4.5 while迴圈 範例14-6： 內容 執行結果 範例說明：
內容 執行結果 範例說明： (1) 在第17~24列中出現了一個while迴圈，迴圈執行的次數完全依照A的變數值變化決定，除非A的變數值為0，否則迴圈將一直重複執行。 (2) 在15、22列中使用了『Temp=A;A=B;B=A;』的片段程式，目的是為了將A與B的值對調，否則將更難撰寫輾轉相除法的程式。
44
14.4.6 do…while迴圈 除了for與while兩種迴圈之外，另外一種迴圈流程控制稱為do...while迴圈，在do…while迴圈內的指令，不論條件式是否成立，一定會先被執行一次，然後才依照迴圈不結束條件是否成立，決定是否重複執行迴圈。 若迴圈不結束條件成立則執行迴圈內部指令，若不成立就跳出迴圈。
45
14.4.6 do…while迴圈 do…while迴圈語法： do…while迴圈流程圖： do { ……迴圈內敘述區塊……
46
14.5 JavaScript與物件導向程式設計 JavaScript也是一個物件導向語言，並且採用物件驅動的觀念。什麼是物件(Object)？ 可以把一架飛機想像成是一個物件(Object)。必須透過一些方法(Method)使飛機便得有些用途，例如：起飛、降落、逃生等等。每個方法都有許多的細節，例如起飛，可能包含『發動引擎、、、、直到拉動操縱桿』，這些就是起飛方法的細節。 另外，飛機也有許多的零件與參數，例如：座椅、引擎、操縱桿等等。每個零件都可以視為飛機的屬性(Property)，可以藉由改變屬性值來改變整個物件的某些特性。 有些物件則可能包含有事件(Event)，例如：逃生鈕物件，會有一個事件稱為『被按下』。而當逃生鈕真的被按下時，可能會自動執行某些已經事先設定好的程序，例如：彈出座椅。
47
14.5 JavaScript與物件導向程式設計 JavaScript針對瀏覽器視窗以及HTML所能產生的各種元件定義了許多的物件
例如：當一份HTML被載入的同時，至少會產生2種以上的物件，分別是document物件(HTML物件)以及window物件(IE開啟的視窗物件)。 物件之下還可以包含其他物件 例如在HTML文件中宣告了一個form元件(名稱為F1)，form元件中包含text輸入元件(名稱為T1)以及button按鈕元件(名稱為B1) 此時，在document物件下就包含由<form>標籤產生的F1物件，F1物件下又包含由<input name="T1" type=text>所產生的T1物件以及由<input name="B1" type=button>所產生的B1物件。
48
14.5 JavaScript與物件導向程式設計 每個物件都有一些屬性(Property)、方法(Method)或事件(Event)。
49
14.5 JavaScript與物件導向程式設計 物件 事件 事件發生時機 常用物件與事件的列表 window物件 onload
網頁被載入時 onunload 網頁被關閉 links物件 onclick 滑鼠指標按下超鏈結時 onmouseover 滑鼠指標移到超鏈結上方時 form物件 submit 送出資料時 form內的輸入介面物件 onclick(submit,reset,button,radio,checkbox適用) 按下物件時 onfocus(text,textarea,password,select適用) 取得Focus時 onblur(text,textarea,password,select適用) 喪失Focus時 onchage(text,textarea,password適用) 欄位內容遭修改時 onselect(text,textarea適用) 文字遭選取時 常用物件與事件的列表
50
14.6 函數 JavaScript提供的函數功能與數學的函數類似 在數學函數中，輸入函數的參數並經過函數處理後，將可以得到函數的輸出結果。
14.6 函數 JavaScript提供的函數功能與數學的函數類似 在數學函數中，輸入函數的參數並經過函數處理後，將可以得到函數的輸出結果。 在JavaScript的函數中，同樣地也是可以輸入函數的引數(Argument)，經過函數的處理之後，可以獲得一個輸出結果(即函數回傳值)，例如：可以撰寫一個函數add_func1( )來計算兩數相加，並把相加之結果回傳。兩者的比較如下圖示意。 數學函數與程式函數的異同
51
14.6.1 函數的優點與特性 程式語言的函數雖然與數學的函數有些類似，但設計的目的則略有不同，程式語言的函數可以視為一群敘述的集合，因此常常會將某些經常使用的敘述群，直接用一個函數加以封裝，然後在需要使用時，直接呼叫該函數，如此便可以有效重複利用程式碼。
52
14.6.2 JavaScript的函數種類 JavaScript的函數可以分為三大類如下： (1)自訂函數：
由程式設計師自行撰寫函數內容的函數。 (2)JavaScript物件所提供的函數： 許多JavaScript物件都會提供一些函數來完成特定功能，這些物件提供的函數稱之為『方法』。例如String物件提供了length方法來計算字串長度，form物件提供了submit方法來傳送資料。 (3)JavaScript內定的其他函數： 某些JavaScript提供的函數並未被歸類到任一個物件之下，例如parseInt函數(parseInt可以將資料型態轉變為整數)。
53
14.6.3 呼叫函式的執行流程 當執行呼叫函數的指令時，程式的控制權將會轉移到相對應的函數開頭處，然後執行函數中的程式碼，程式碼執行完畢後，程式控制權將重新回到主程式碼(呼叫敘述)的下一個敘述，繼續往下執行。 函數呼叫與返回(程式控制權轉移)示意圖
54
14.6.3 呼叫函式的執行流程 除了透過呼叫函數指令來執行函數之外，也可以在物件的各個事件發生時指定要執行的函數，如此一來，當事件真的發生時，就會自動執行某個函數了。 例如可以在按鈕物件的onclick事件中，指定要執行Compute()函數，如此一來，當該按鈕真的被按下時，Compute()函數就會被執行。 範例14-7： 內容 執行結果
55
14.6.3 呼叫函式的執行流程 範例說明： (1) 按下第46列的按鈕後，會自動執行自訂函數Compute()。
14.6.3 呼叫函式的執行流程 範例說明： (1) 按下第46列的按鈕後，會自動執行自訂函數Compute()。 (2) 第11~14列宣告了六個變數，其中StrA、StrB、StrC為字串變數。 (3) 第16~17列，設定StrA、StrB的字串內容為使用者填入文字方塊的內容。 (4) 第19~20列，利用parseInt函數將StrA、StrB的資料型態轉換為整數，並將其值指定給整數變數A、B。 (5) 第22列呼叫自訂函數add_func1。此時控制權將轉移到第30列。第31~39列的功能是計算絕對值相加，當遇到第38列的return指令時，將會回傳相加結果給變數C。然後繼續執行第24列。(執行順序為11、12、13…22、30、31、32…37、38、24、25、26、27列) (6) 第24列，呼叫JavaScript的String 函數，將C的整數資料轉換為字串型態，並指定為StrC的內容。 (7) 第26列，使用對話方塊，將相加結果顯示出來。 (8) 第27列，呼叫document物件的writeln方法，將HTML文件內容改變，更新為相加結果本，範例的的執行結果如下。
56
14.7 引用外部的JavaScript檔案 除了將JavaScript程式碼直接寫在<script>標籤內，也可以將JavaScript程式碼獨立成一個附檔名為『.js』的檔案，然後透過<script>的src屬性記錄檔案的URL位置即可，如下範例。 範例14-8： HTML內容 外部JavaScript檔內容 執行結果 範例說明： 在第7列，使用src屬性載入外部JavaScript檔案。
57
14.8 JavaScript整合範例 鎖住滑鼠右鍵範例： 範例14-9：
眾所皆知，在瀏覽器中若按下右鍵將可以執行另存圖片或檢視原始檔指令，而網頁與圖片的製作往往是網頁與美工設計人員的心血結晶，因此常常不希望被他人取得圖片及網頁原始檔。 範例14-9： 內容 執行結果
58
14.8 JavaScript整合範例 範例說明： (1) 第9列中，指定當滑鼠按鍵(不限定哪一個按鍵)被按下這個事件發生時，執行NoRightOnClick函數。 (2) 第11~18列的NoRightOnClick函數中，判斷瀏覽器種類以及按鍵是否為中鍵或右鍵。若為中鍵或右鍵則會執行第14、17列，顯示警告視窗。(return是用來回傳函數值) (3) 本範例只供鎖住右鍵，但不能保證原始網頁內容或圖片不被客戶端使用者取得，因為，在瀏覽器的檔案功能表中，仍舊存在另存新檔指令，因此若要使用者也無法執行這些指令的話，必須關閉功能表列。 再一次強調，即使將功能表列關閉，右鍵鎖死，仍舊不能防止熟悉電腦知識的使用者取得網頁原始檔，這是因為所有的HTML內容必須由瀏覽器執行，因此該檔案一定會被下載到客戶端的電腦中，如果使用者仔細搜尋Temporary Internet Files資料夾的話，還是可以找到原始的HTML檔案。
59
14.8 JavaScript整合範例 變色按鈕 範例14-10： 內容 執行結果 範例說明：
內容 執行結果 範例說明： (1)第20、21列的按鈕都採用第8列的CSS樣式，所以按鈕預設為粉紅色。 (2)第19列透過onmouseover屬性設定當滑鼠移到<form>表單上方時要執行的函數及傳入參數為ChangeColor('yellow') ，透過onmouseout屬性設定當滑鼠移開<form>表單時要執行的函數及傳入參數為ChangeColor('pink')。 (3)第11~16列的ChangeColor(color)函數，可接受一個參數color。第13列代表取得發生事件的HTML元素。第14列判斷發生事件的元素是否為<input>標籤，以及type是否為button。若符合第14列的判斷式，則執行第15列，將發生事件的元素設定背景顏色為輸入參數color，所以當傳入參數為yellow時，就會變成黃色按鈕，傳入參數為pink時，就會變成粉紅色按鈕。
60
14.8 JavaScript整合範例 加入我的最愛： 範例14-11：
加入我的最愛是網站的一項貼心功能，方法很簡單，只要使用windows物件就可以達成了。 範例14-11： 內容 執行結果 範例說明： 按下超鏈結後，會執行addFav()函數，第10列為「加入我的最愛」函數，第一個參數為網址，第二個參數為該項目在我的最愛內的名稱。
61
14.8 JavaScript整合範例 使用JavaScript能夠達到許多HTML無法達到的功能，特別是將JavaScript結合CSS的時候更能讓網頁產生徹底的改變。 在第16章，將結合動態HTML標籤、CSS與JavaScript，完成更多的功能。
62
14.9 網頁DIY 請翻閱至18.14節，透過JavaScript的協助，將網頁加入一些特殊功能。
63
本章習題
Similar presentations
