範本檔

Size: px

Start display at page:

Download "範本檔"

聚绍米
9 years ago
Views:

1 第二章 JavaScript 2-1 網頁設計導論動態網頁與靜態網頁網頁依其資料展現性質, 大致可分為靜態網頁與動態網頁所謂靜態網頁是指資料的展現固定不變, 並不能依不同使用者的不同需求而有不同的輸出結果但是動態網頁是指當使用者瀏覽該網頁時, 才根據使用者的需求, 動態產生 HTML 文件, 所以每個人的不同輸入值, 都可產生不同的輸出結果客戶端程式 vs 伺服端程式為了減輕伺服器的負擔, 動態網頁程式大致可分為客戶端 (Client) 程式與伺服端 (Server) 程式所謂客戶端程式, 乃是當使用者連結伺服器下載所需網頁, 使用客戶端的電腦直接依照使用者的需求, 產生 HTML 文件例如, 使用者要求計算 34*55 的值, 或是按壓某一按鍵, 要讓某一物件上下左右移動等動作, 這些事情都可交由客戶端電腦處理即可, 不用後送伺服器, 以提高處理效率, 且減少網路流量常見的客戶端程式有 Java Applet JavaScript Jscript VBScript 等, 本書將於本章闡述 JavaScript 網頁設計伺服端程式是指客戶端電腦無法處理, 必須要求伺服器處理的工作例如, 當使用者查詢資料庫內容時, 此時因為資料庫僅儲存在伺服端電腦, 客戶端並無法回應使用者的要求, 所以乃將使用者的需求後送伺服器, 伺服器再依使用者的需求送出 HTML 文件給客戶端電腦, 最後再由客戶端電腦顯示結果, 此稱為伺服端程式, 常見的伺服端程式有 CGI ASP JSP 及 PHP JavaScript JavaScript 是由微軟公司與網景 (Netscape) 公司所聯合發展的網頁描述語言 (Script), 他的語法取自於 Java, 所以稱為 JavaScript 因為市面上主要的瀏覽器都支援此一標準, 也是目前客戶端程式市場佔有率最高的 Script 語言, 這也是我們選擇以 JavaScript 作為動態網頁設計的主要原因 FrontPage 網頁的編輯可以使用微軟的記事本微軟的 Script Editor 微軟的 FrontPage( 備註 : 如果是 Office2007, 則其軟體名稱改為 SharePoint Designer) 或 Adobe 的 Dreamweaver, 但是記事本與 Script Editor 都過於陽春,Dreamweaver 的功能又過於龐大, 價錢亦貴其次, 因為 FrontPage 的價錢適中, 幾乎每台電腦都有安裝, 且功能又足夠學習 JavaScript, 所以本書乃使用 FrontPage 作為 JavaScript 的編輯工具進入 FrontPage 的畫面如下圖, 共有 4 種頁籤, 分別是設計 " 分割 " " 程式碼 " 及 " 預覽 " 下圖是進入 FrontPage 時的程式碼頁籤, 已寫好一些 HTML 碼

(Server) 程式所謂客戶端程式, 乃是當使用者連結伺服器下載所需網頁, 使用客戶端的電腦直接依照使用者的需求, 產生 HTML 文件例如, 使用者要求計算 34*55 的值, 或是按壓某一按鍵, 要讓某一物件上下左右移動等動作, 這些事情

2 下圖是設計頁籤, 網頁所要顯示的文字與圖片, 還有文字與圖片的格式都可在此操作, 且都與 Word 接近 2-2 JavaScript 基本輸出入輸出與輸入是撰寫程式的第一步, 也是所有語言的第一步, 本節即是介紹 JavaScript 的基本輸出入

3 2_2_1 write write 是我們最為常用的輸出方法, 他隸屬 document 物件, 所以都是以 document.write 呈現例如, x=2; document.write(x); 即可輸出變數 x 之值範例 e2_2_1a 請編輯一個網頁, 可以執行以上結果操作步驟 1 開啟 FrontPage 2 按一下程式碼標籤, 已有現成程式如下 : <html> <head> <meta http-equiv="content-type" content="text/html; charset=big5"> <title> 新增網頁 1</title> </head> <body> </body> </html> 3 請於 <body> </body> 裡面插入以下程式碼 <body> <script language =javascript > var x; x=2; document.write(x); </script> </body> 4 按一下預覽 " 標籤, 即可瀏覽執行結果, 如下圖補充說明 1 以上程式 <script language =javascript >, 其中的 script language 大小寫不能寫錯, 若打錯了, 當然造成程式錯誤, 而 javascript 則可寫成 JavaScript JavaScript 或 javascript 都可接受

content="text/html; charset=big5"> <title> 新增網頁 1</title> </head> <body> </body> </html> 3 請於 <body> </body> 裡面插入以下程式碼 <body> <script language =javascript > var x; x=2;

4 2_2_2 alert alert 可彈出一個對話框, 並輸出結果, 其語法如下 : alert( 輸出內容 ); 例如, alert( Hello ); 其結果如下圖範例 e2_2_2a 請編輯一個網頁, 可以執行以上結果操作步驟 1 請於 <body> </body> 裡面插入以下程式碼 <body> <script language =javascript > alert("hello"); </script> </body> 2_2_3 prompt prompt 可彈出一個對話框, 並等待使用者輸入文字或數字, 其語法如下 : prompt( 輸入提示,[ 預設值 ]) 例如, a=prompt(" 請輸入 1~5",1); 的結果如下圖, 已經有預設值 1 2_2_4 表單表單如下圖所示, 筆者已經放置兩個文字方塊 ( 按鈕上面一個, 按鈕下面一個 ) 與一個按鈕文字方塊可用來輸出入文字或數字 ; 按鈕則用來執行某些程式片段

prompt 可彈出一個對話框, 並等待使用者輸入文字或數字, 其語法如下 : prompt( 輸入提示,[ 預設值 ]) 例如, a=prompt(" 請輸入 1~5",1); 的結果如下圖, 已經有預設

5 以下我們將先介紹以上表單文字方塊與按鈕等三種物件, 作為簡單的基本輸出入例如, 我們以輸入一數, 並輸出其平方值為例, 介紹以上三種常用輸出入物件此外, 表單尚可插入核取方塊選項按鈕下拉式清單方塊等輸出入物件, 我們會在第 2_9 節介紹插入以上表單與文字按鈕物件後, 其程式碼如下 : <form method="post" action="--webbot-self--"> <p><input type="text" name="t1" size="20"></p> <p><input type="button" value=" 按鈕 " name="b1"></p> <p><input type="text" name="t2" size="20"></p> </form> 共有四個物件, 分別是一個 form 兩個 text 及一個 button 分別說明如下 : I form form 稱為表單, 上面的 text button 都有 name, 唯獨 form 沒有, 為了能存取 form 內的物件, 必須自行增加 name 屬性 I text text 稱為文字方塊, 其內容屬性為 value 其次, 以上程式碼並沒有 value, 需自行加入 I type 文字方塊的 input type 預設值是 "text", 若將其修改為 "password, 則螢幕將會以黑點代替使用者所輸入的值, 以防別人窺視以下將以範例介紹以上三種常用輸出入物件的用法範例 2_2_4a 請設計一網頁, 可以輸入一數, 並輸出其平方值執行結果 1 預覽的初始畫面如下圖左 2 按一下執行 " 按鈕, 畫面如下圖右請讀者自行更改輸入值, 並執行程式

name="b1"></p> <p><input type="text" name="t2" size="20"></p> </form> 共有四個物件, 分別是一個 form 兩個 text 及一個 button 分別說明如下 : I form form 稱為表單, 上面的 text button 都有 name, 唯獨 form 沒有, 為

6 操作步驟 1 插入一個表單 ( 按一下插入 / 表單 / 表單 "), 畫面如下圖左 2 請刪除送出 " 與重新設定兩個物件, 畫面如下圖右 3 依序插入文字方塊按鈕文字方塊, 畫面如下圖 ( 以上物件均在功能表插入 / 表單選單內 ) 4 form 的 Html 碼如下 : <form method="post" action="--webbot-self--"> 請加入 name= myform, 其中 myform 可自訂, 如下所示 : <form name="myform" method="post" action="--webbot-self--"> 5 text 文字方塊的 Html 碼如下 :

Html 碼如下 : <form method="post" action="--webbot-self--"> 請加入 name= myform, 其中 myform 可自訂,

7 <p><input type="text" name="t1" size="20" ></p> 請加入 value=5, 如下所示 : <p><input type="text" name="t1" size="20" value=5></p> 其次, 亦可直接於設計畫面按兩下文字方塊, 如下圖, 即可於此畫面輸入預設值 6 button 按鈕的 Html 碼如下 : <p><input type="button" value=" 按鈕 " name="b1"></p> 請將 value 修改為執行 ", 並加入 onclick 事件執行 aa() 方法, 如下所示 : <p><input type="button" value=" 執行 " name="b1" onclick="aa()"></p> 7 完成以上設定, 設計 " 頁籤如下圖所示 : 8 鍵入程式碼請於 <head></head> 之間, 鍵入以下 JavaScript 程式碼 <head> <script language =javascript > function aa() { var m,n; // 輸入 m=eval(myform.t1.value); // 處理

入 onclick 事件執行 aa() 方法, 如下所示 : <p><input type="button" value=" 執行 " name="b1" onclick="aa()"></p> 7 完成以上設定, 設計 " 頁籤如下圖所示 : 8 鍵入程

8 n=m*m; // 輸出 myform.t2.value=n; </script> </head> 9 存檔請點選檔案 / 另存新檔, 並輸入檔名即可完成存檔程式列印 <html> <head> </head> <body> <form name="myform" method="post" action="--webbot-self--"> <p><input type="text" name="t1" size="20" value=5></p> <p><input type="button" value=" 執行 " name="b1" onclick ="aa()"></p> <p><input type="text" name="t2" size="20"></p> </form> <script language =javascript > function aa() { var m,n; // 輸入 m=eval(myform.t1.value); // 處理 n=m*m; // 輸出 myform.t2.value=n; </script> </body> </html> 範例 2_2_4b 請設計一網頁, 可以輸入兩數, 執行兩數相加, 並輸出相加結果執行結果 1 下圖左是網頁執行的初始畫面 2 下圖右是按一下相加 " 的畫面

action="--webbot-self--"> <p><input type="text" name="t1" size="20" value=5></p> <p><input type="button" value=" 執行 " name="b1" onclick ="aa()"></p> <p><input

9 操作步驟 1 插入表單 2 刪除提交重新設定等兩個物件 3 插入兩個文字方塊 ( 本例為 T1 及 T2) 一個按鈕 ( 本例為 B1) 一個文字方塊 ( 本例為 T3) 4 修改 B1 物件的 value 值 ( 本例將 value 值修改為相加 ) 5 新增 T1 T2 的 value 值 A 在 name= T1 後面加上 value=3 B 在 name= T2 後面加上 value=4 6 將表單命名 ( 在 <form 後面加上 name= myform ) 7 新增 onclick 事件 ( 在 name= B1 後面加上 onclick= aa() ) 8 寫入程式碼在 <title> </title> 下面加入以下程式碼大小寫要一致, 分號 (;) 不可遺漏 <script language=javascript> function aa(){ var r1,r2,r3; r1=eval(myform.t1.value); r2=eval(myform.t2.value); r3=r1+r2; myform.t3.value=r3; </script> 程式列印 <html> <head> <title> 兩數相加 </title> <script language=javascript> function aa(){

加上 onclick= aa() ) 8 寫入程式碼在 <title> </title> 下面加入以下程式碼大小寫要一致, 分號 (;) 不可遺漏 <script language=javascript> function aa(){ var r1,r2,r3;

10 var r1,r2,r3; r1=eval(myform.t1.value); r2=eval(myform.t2.value); r3=r1+r2; myform.t3.value=r3; </script> </head> <body> <form name="myform" method="post" action="--webbot-self--"> <p><input type="text" name="t1" size="11" value="4"> + <input type="text" name="t2" size="12" value="5"></p> <p><input type="button" value=" 相加 " name="b1" onclick ="aa()"></p> <p> 結果是 :<input type="text" name="t3" size="18"></p> </form> </body> </html> 自我練習 1 請設計一個網頁, 滿足以下條件 (1) 可以輸入兩個數字 (2) 安排四個按鈕, 其標題分別是 + - * 及 / (3) 按一下以上四個按鈕, 即可輸出以上兩個數字相加減乘及除的結果 2 輸入立方體的長寬高, 計算其表面積與體積範例 2_2_4c 請設計一網頁, 滿足以下條件 1 可以輸入兩個數字 2 交換此兩個數字 3 輸出交換的結果輸出結果如下圖右 :

size="12" value="5"></p> <p><input type="button" value=" 相加 " name="b1" onclick ="aa()"></p> <p> 結果是 :<input type="text" name="t3" size="18"></p> </form> </body> </html> 自我練習 1 請

11 程式列印 <script language=javascript> function aa(){ var a,b,t; a=eval(myform.t1.value); b=eval(myform.t2.value); //process t=a;a=b;b=t; //output myform.t3.value=a; myform.t4.value=b; </script> 程式說明兩個數要交換, 就如同兩隻手各拿一樣東西, 並要交換其位置所以假設兩隻手的名稱分別是 a 與 b, 現在要交換其內容, 則其方法如下 : 1. 先找來第三隻手, 並設定其名稱為 t 2. 將 a 的東西交給 t t=a; ( 此時 a 才是空的 ) 3. 將 b 的東西交給 a a=b; 4. 將 t 的東西交給 a, 而完成東西的交換 a=t; 5. 若未先找來第三隻空手 t, 而直接將 b 的東西交給 a, 再將 a 的東西交給 b, 如以下敘述 : a=b; b=a; 則當執行 a=b 時,a 的東西就已經消失, 此時再執行 b=a, 已是錯誤的結果 6. 當然不能同雜耍那樣, 同時將兩樣東西往上拋, 再同時接住, 因為電腦無此特技功能

先找來第三隻手, 並設定其名稱為 t 2. 將 a 的東西交給 t t=a; ( 此時 a 才是空的 ) 3. 將 b 的東西交給 a a=b; 4. 將 t 的東西交給 a, 而完成東西的交換 a=t; 5.

12 [ 自我練習 ] 1 假設某次考試成績資料如下 : A 請設計一網頁輸入以上資料 B 計算總和與平均 C 輸出總和與平均 2_2_5 Image Image 是隸屬 document 的物件, 主要功能是放置並顯示圖檔而下圖左是在 FrontPage 插入圖片的結果, 下圖右是其程式碼, 已經在 <body> </body> 之間插入 <img>, 其中 border 是其圖片外框的寬度,src 是圖檔名稱 ( 圖檔名稱的../ 代表是往上尋找父輩資料夾 ),width 是圖檔寬度,height 是圖檔高度其次, 若要撰寫程式控制圖片內容, 則應加上 name 屬性, 請看以下範例說明範例 2_2_5a 請設計一網頁, 可以使用按鈕載入指定圖片執行結果 1 下圖左是網頁執行的初始畫面 2 按一下 Mary" 的結果如下圖中 3 按一下 Tom 的結果如下圖右

13 程式列印 <html> <script language =javascript > function aa() { document.gra.src="../mary.jpg"; function bb() { document.gra.src="../g1.jpg"; </script> <body> <img name="gra" border="0" src="../joky.bmp" width="114" height="175"> <form name="myform" method="post" action="--webbot-self--"> <p><input type="button" value="mary" name="b1" onclick="aa()" > <input type="button" value="tom" name="b2" onclick="bb()"></p> </form> </body> </html> 範例 2_2_5b 請設計一網頁, 含有一圖片檔, 並於使用者載入網頁時可自動往右下方移動的效果執行結果如下圖

bmp" width="114" height="175"> <form name="myform" method="post" action="--webbot-self--"> <p><input type="button" value="mary"

14 操作步驟 1 於網頁插入一張圖片, 並加入 name 屬性 ( 不要先插入表單, 再插入圖片 ) 2 將圖片的位置屬性修改為絕對位置, 如以下敘述的 style 屬性, 如此才能移動位置 <img name="gra" style="position:absolute"> 3 網頁載入時, 每隔 1000ms 自動執行移動位置的 aa 方法, 程式如下,setInterval 請看 2_7_4 節 <body onload =setinterval("aa()",1000)> 4 aa 方法如下 : var x=20,y=20; function aa() { x=(x+10)% 800; y=(y+10)% 600; gra.style.left=x; gra.style.top=y; 程式列印 <html> <script language =javascript > var x=20,y=20; function aa() { x=(x+10)% 800; y=(y+10)% 600; gra.style.left=x; gra.style.top=y; </script> <body onload =setinterval("aa()",1000)> <img name="gra" style="position:absolute" border="0" src="../joky.bmp" width="114" height="175"> </body> </html> 程式說明 1 style 圖片的位置屬性 2 style="position:absolute" 位置採用絕對位置, 此時才能移動圖片

left=x; gra.style.top=y; 程式列印 <html> <script language =javascript > var x=20,y=20; function aa() { x=(x+10)% 800; y=(y+10)% 600; gra.style.left=x; gra.style.top=y; </script> <body onload =setinterval("aa()",1000)> <img name="gra" style="position:absolute" border="0" src=".

15 3 left top 圖片位置的 x,y 座標自我練習 1 請寫一程式, 可以安排一個圖片與六個按鈕, 此六個按鈕可使圖片放大縮小向左向右向下及向上移動 ( 提示 : 放大與縮小請參考 height 與 width 屬性 ) 2_3 基本語法本章將介紹一些程式語言的基本語法, 例如保留字識別字的命名資料型態運算子及運算式等 2_3_1 保留字與識別字本單元先介紹保留字與識別字 I 保留字 (Keywords) 保留字是任一程式語言已事先賦予某一識別字一個特別意義, 所以程式設計者不得再重複賦予不同的用途例如,if 已被賦予決策敘述, 程式設計者當然不得再定義 if 為另外的用途就如同現實的社會, 亦沒有人稱為洪電視或林冰箱以下是 JavaScript 的常見保留字 abstract alert Array boolean break byte case char close const continue do double else eval false final float for function if length long Math new Number print setinterval settimeout String var while I 識別字 (Identifier) 真實的世界裏, 每個人事及物都有一個名稱, 程式設計亦不例外例如, 於程式設計時我們必須為每一個變數常數及函式等命名, 以上所有變數常數函式等名稱, 統稱為程式語言的識別字 JavaScript 的識別字命名規則如下 : 1. 識別字必須是以字母 ( 大小寫的 A 至 Z) 或底線 ( _ ) 開頭例如, 以下是一些合法的識別字 a I sum Sum _sum 以下是一些非法的識別字 7eleven 不能由數字開頭 +a 不能由運算子開頭 %sum 不能由特殊符號開頭

重複賦予不同的用途例如,if 已被賦予決策敘述, 程式設計者當然不得再定義 if 為另外的用途就如同現實的社會, 亦沒有人稱為洪電視或林冰箱以下是 JavaScript 的常見保留字 abstract alert Array boolean break byte case

16 2. 識別字由字母開頭後, 僅可由字母數字及底線 (_) 組合而成, 但不得包含空白例如, 以下是一些合法的識別字 a123 A_123 以下是一些非法的識別字 A C 不能含空白 c+3 不能含加號 Age#3 不能含井字號 3. 識別字的長度上限為 255, 但是太長也徒增人工識別與鍵入的困擾 4. 識別字不得使用保留字, 如 if for 等 5. 識別字要盡量用有意義的單字例如,StudentNumber 或 AverageIncome 除非有效範圍很小 ( 或生命週期極短 ) 的變數才用 x i 或 a 等當識別字, 也千萬不要用像 k23erp 這種沒意義又難記的識別字 6. 識別字有多個單字時, 中間可以加上底線 (_) 例如, 上例的 StudentNumber 可寫成 Student_Number, 若擔心打字不靈光亦可寫成 Stu_Num stu_num StuNum 或 stunum, 其中 StuNum 又稱為駝峰表示法, 因為大寫字母看起來像駝峰一樣, 可以避免鍵入底線的困擾並且提昇閱讀效率自我練習 1 以下識別字何者正確 ( 是非題 ) 題號答案題目 1 a+ 2 3a 3 b&b 4 for 5 a% 2_3_2 資料的表示及資料型態 I 資料的表示電腦的主要工作就是處理資料,JavaScript 所能處理的資料為整數浮點數布林值及字串等, 分別說明如下 : II 整數 JavaScript 可以處理的整數有三種進位方式, 分別是十進位八進位 (Octal) 及十六進位 (Hexadecimal) 等十進位的表示方式同我們平常的書寫方式, 如 25; 八進位的表示方式為在數字的前面加上零 (0), 例如,011 則為十進位的 9; 十六進位的表示方式為在數字的前面加上零 x(0x), 例如,0x11 則為十進位的 17

識別字要盡量用有意義的單字例如,StudentNumber 或 AverageIncome 除非有效範圍很小 ( 或生命週期極短 ) 的變數才用 x i 或 a 等當識別字, 也千萬不要用像 k23erp 這種沒意義又難記的識別字 6.

17 II 浮點數數字中含有小數點或指數的稱為浮點數以指數為例,E 或 e 表示 10 的次方, 例如 E-3 及 2.3e-3 均是表示相同的浮點數 ; 又例如 2.3E+2 則代表 230 II 布林值 JavaScript 使用 true 與 false 表示布林值 II 字串不需加減乘除等運算的資料, 通常用字串表示且需使用雙引號 (") 或單引號 ( ) 將字串的兩旁括起來例如, 以下是一些合法的字串 "This is a book" 張中立 ( 代表 ) I m a teacher ( 代表 I m a teacher ) II null null 代表空值, 此與 0 不同 II undefined undefined 代表未定義的值 I 資料型態大部分的程式語言都要宣告資料型態, 以便安排記憶體, 但是 JavaScript 並不允許使用者如此費心, 也就是只要宣告所要的變數即可, 不用也不允許宣告其型態例如,a 宣告變數如下, var a; 往後即可指定任何型態的資料, 且 JavaScript 均可自動配置適當的記憶體 a=3; a= This is a book ; a=2.3e2; 2_3_3 變數與常數的宣告 I 變數的宣告變數的功能是用來輸入處理及儲存外界的資料, 而變數在使用以前均要於保留字 var 之後宣告, 才可使用在一些舊式的 Basic 語言中, 變數並不需要事先宣告, 卻也帶來極大的困擾以下式子即為變數未宣告的結果, 編譯器當然無法回應使用者在拼字上的錯誤, 進而造

中立 ( 代表 ) I m a teacher ( 代表 I m a teacher ) II null null 代表空值, 此與 0 不同 II undefined undefined 代表未定義的值 I 資料型態大部分的程式語言都要宣告資料型態, 以便安排記憶體, 但是 JavaScript 並不允許使

18 成除錯上的困難 student = studend+1 以上敘述若事先宣告 student 如下 : var student ; 則編譯器遇到 studend 時, 便會提醒使用者此 studend 並未宣告的錯誤訊息, 提醒使用者補宣告或注意拼字錯誤 JavaScript 變數的宣告語法如下 : var 變數名稱 ; 例如, 以下敘述可宣告變數 a var a ; 此與大部分的程式語言不同, 因為宣告變數的同時, 並不需宣告其資料型態因為 JavaScript 會自動選擇適當的資料型態例如, var a; a=2; document.write(typeof(a)); //typeof 函數可傳回其型態其結果是 number 又例如, var b; b="mary"; document.writeln (typeof(b)); 其結果是 string 其次, 若有兩個以上的變數有相同的型態, 亦可同時給予宣告, 但是變數之間需以逗號 (,) 隔開例如, 以下敘述可同時宣告變數 b c var b,c ; 2_3_4 運算子可以對運算元 (Operand) 執行特定功能的特殊符號稱為運算子一般而言, 運算子可分為以下幾類 : 指派 (Assignment) 運算子算術 (Arithmetic) 運算子關係 (Relational) 運算子邏輯 (Logical) 運算子字串 (String) 運算子及複合指派運算子其次, 運算子又可以分為一元 (Unary) 運算子與二元 (Binary) 運算子一元運算子只需要一個運算元就可以操作, 而二元運算子則需要兩個運算元才能夠操作在以下單元中, 我們除了檢視各種不同的運算子功能外, 還將討論運算子的優先順序 (Precedence) 優先順序是用來決定同一式子擁有多個運算子時, 每一個運算子進行運算的順序 I 指派運算子 (Assignment operator) 指派運算子的符號為 =, 其作用為將運算符號右邊運算式的值指派給運算符號左邊的運算元所以, 以下敘述 sum = a + b, 是將 a + b 的值指派給 sum sum = 0 ; a = 3 ; b = 5; sum = a + b;

write(typeof(a)); //typeof 函數可傳回其型態其結果是 number 又例如, var b; b="mary"; document.

19 上式與數學的等號是不同的, 所以不要一直懷疑為什麼 0 會等於 8 其次, 你不能將常數放在指派運算子的左邊例如, 8 = x; 為一個不合法的敘述, 但以下敘述將常數 8 指派給變數 x 為合法的 x = 8; I 算術運算子 (Arithmetic operators) 算術運算子用來執行一般的數學運算, 包括取正數 (+) 取負數 ( - ) 加 ( + ) 減 ( - ) 乘 ( * ) 除 ( / ) 取餘數 (%) 遞增 (++) 遞減 (--) 等, 如下表所示 : 運算子符號功能範例結果 + 取正數 +2 取負數 3 + 加減 * 乘 6 * 2 12 / 除 7 / % 取餘數 7 % 加 1 a=2;a++;document.write(a); 3 -- 減 1 a=2;a--; document.write(a); 1 += 相加且指定 a=1;a+=5; document.write(a); 6 (a=a+5) -= 相減且指定 a=3;a-=2; document.write(a); 1 (a=a-2) *= 相乘且指定 a=2;a*=4; document.write(a); 8 (a=a*4) /= 相除且指定 a=9;a/=3; document.write(a); 3 (a=a/3) %= 取餘數且指定 a=7;a%=3;document.write(a); 1 (a=a%3) 例如, var a=2; a++; document.write(a); 結果是 3 因為 a=a+1 這種遞增運算常用, 所以有如此簡便語法又例如 a=1; a+=5; document.write(a); 結果是 6 因為 a=a+ 常數 ; 這種運算也常用, 所以有如此簡便用法 I 關係運算子 (Relational operators) 關係運算子又稱為比較運算子, 用於資料之間的大小比較, 比較的結果可得到邏輯的 true 或 false, 下表是 JavaScript 中的關係運算子符號運算子符號功能範例結果 == 等於 2 == 3 false

6 2 4 * 乘 6 * 2 12 / 除 7 / 2 3.5 % 取餘數 7 %2 1 ++ 加 1 a=2;a++;document.write(a); 3 -- 減 1 a=2;a--; document.write(a); 1 += 相加且指定 a=1;a+=5; document.

20 != 不等於 2!= 3 true < 小於 2 < 3 true > 大於 2 > 3 false <= 小於或等於 2 <= 3 true >= 大於或等於 2 >= 3 false 例如, var a=2;b=3; document.write(a==b); 結果是 false I 邏輯運算子 (Logical operators) 當同一個運算式同時具有兩個以上的關係運算子時, 則每兩個關係運算子之間必須使用邏輯運算子連結 JavaScript 的邏輯運算子如下表所示 : 運算子符號功能範例結果 && And (3 > 2) && (3 == 1) false Or (3 > 2) (3==1) true! Not!(3>2) false! false true I 字串運算子 (String operator) 前面關係運算子的 = <> > < >= 及 <= 亦均適用於字串的大小比較例如, var a,b; a="a";b="b"; document.writeln (a>b); 其結果是 false( 字串的大小以 ascii 值的大小為依據,a 的 ascii 值為 65,b 的 ascii 值為 66, 所以字串 b 較大 ) 而下表的字串連結運算子 (+), 則可連結兩個字串運算子符號功能範例結果 + 字串連結 "abc" + "xyz" abcxyz I 雜項運算子以下是一些無法歸類的運算子, 列表如下這些運算子將會在往後各章節陸續介紹運算子符號使用範例說明. x.y 連結物件與其屬性成員 [] a[2] 一維陣列 [][] b[2][3] 二維陣列 ( ) f(3) 函式 f 的叫用 I 運算子的優先順序 (Precedence) 於較複雜的運算式中, 通常同時存在許多運算子, 此時就需要定義其優先順序, 下表即是

結果 && And (3 > 2) && (3 == 1) false Or (3 > 2) (3==1) true! Not!(3>2) false!

21 JavaScript 關於運算子的優先順序表分類運算子優先等級括號陣列函數 (),[],aa() 1( 最高 ) 一元 (Unary) +, - ( 取正負值 ),++,-- 2 乘法, 除法 *, /,% 3 加法, 減法 +, - 4 字串連結 + 5 關係 =, <>, <, >, <=, >=, 6 邏輯 NOT! 7 邏輯 AND && 8 邏輯 OR 9 指派與複合指派 =, +=, -=, *=, /= 10 ( 最低 ) 例如, a=2;b=3; c=++a+b; 則等效於以下敘述 : c =((++a)+b) ; 因為一元運算子的優先順序較高, 所以結果是 6 又例如, a=2;b=3; c=a+b*2; 則等效於以下敘述 : c=(a+(b*2)); 又例如, var x=3;y=4; z= x > 2 && y > 3; 則等效於以下敘述 z = ((x > 2)&& (y > 3)); 範例 2_3_4a 請將以下數學敘述以 JavaScript 敘述表示 1. ( a+ b+ c) x = 3 a + b 2. y= a b 3. y=a 2 4. y= a

22 5. y=b y= 程式列印 JavaScript 並沒有次方與開根號運算子, 所以次方必須使用 Math.pow () 方法, 開根號必須使用 Math.sqrt() 方法, 如以下敘述 <body> <script language =javascript > var a,b,c,x,y; a=3;b=2;c=1; x=(a+b+c)/3; document.writeln (x); y=(a+b)/(a-b); document.writeln (y); //y=a*a; y=math.pow (a,2); document.writeln (y); y=math.sqrt (2); document.writeln (y); y=math.pow (b,10); document.writeln (y); y=math.pow(1000,(1/3)); document.writeln (y); </script> </body> 自我練習 2 b+ b 4ac 1 令 a=1,b=-1,c=-6, y =, 請於 JavaScript 中求出 y 的結果 2a 2_3_5 敘述與運算式敘述 (Statement) 凡是控制執行的順序對運算式取值或不作任何事, 均可稱為敘述或陳述式其次, 每一敘述均應以分號 (;) 結束, 以下式子即是一個敘述 sum = sum + 1;

23 敘述區塊 (Block Statement) 或複合敘述 (Compund Statement) 在任何可以放單一敘述的地方, 也就能放敘述區塊, 敘述區塊亦稱為複合敘述一個複合敘述是由一對大括號組合而成, 如下所示 { t = a; a = b; b = t; 運算式 (Expression) 任何可求得值的式子, 均稱為運算式例如,5+3 會傳回一個數值, 所以 5+3 是一個運算式一般而言, 可以放在等號右邊的東西, 都可以稱為運算式例如, 以下等號右邊及括號內的東西均稱為運算式 a = 3 ; b = 5; c=a+b; if (a>0) 'true while (a==b) 'false 註解 (Comments) 適當的程式註解能增加程式的可讀性其次, 註解是給人看的, 解譯器均不予理會註解的內容 JavaScript 的註解有兩種表示方式, 分別是單列註解及多列註解 II 單列註解凡是雙斜線 (//) 以後的敘述,JavaScript 均視為註解例如, 以下敘述的將 y 值累加至 sum" 為註解, 不會被執行 sum=sum+y; // 將 y 值累加至 sum II 多列註解凡是 /* 以後的敘述,JavaScript 均視為註解, 直到 */ 為止例如, 以下敘述全為註解, 均不會被執行 /* 這是多列註解 sum=sum+y; 將 y 值累加至 sum */ 範例 2_3_5a 1 請設計一網頁, 滿足以下條件 : A 可以輸入座標平面上兩個點的座標 B 計算此兩點的距離

24 C 輸出此兩點距離 ( 提示 :JavaScript 並沒有開跟號運算子, 必須使用 Math.sqrt() 方法例如,Math.sqrt(4)=2 ) 執行結果程式列印 <html> <script language ="javascript"> function aa(){ //input x1=eval(myform.t1.value); y1=eval(myform.t2.value); x2=eval(myform.t3.value); y2=eval(myform.t4.value); //process d=math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)); //output myform.t5.value=d; </script> <body> <form name="myform" method="post" action="--webbot-self--"> <p> 請輸入 A 點座標 (<input type="text" name="t1" size="8" value="3">,<input type="text" name="t2" size="10" value="0">)</p> <p> 請輸入 B 點座標 (<input type="text" name="t3" size="8" value="0">,<input type="text" name="t4" size="10" value="4">)</p> <p><input type="button" value=" 計算 " name="b1" onclick="aa()"></p> <p> 兩點距離是 <input type="text" name="t5" size="20"></p> </form> </body> </html>

25 自我練習 1 輸入三角形三邊長 a b c, 求其面積 ( 面積 = d( d a)( d b)( d c), 其中 ( a + b + c) d=, 本例假設所入的三角形三邊長恰可圍成三角形, 例如, 輸入 3,4,5 其面積為 6) 2 習題 1 寫一個網頁, 可以輸入一個一元二次方程式, 並求其解 ( 本例假設所輸入的方程式有二解 ) 提示 A. 設有一元二次方程式如下 : ax 2 + bx + c = 0 B. 令 d= b 2 4ac b + d b d C. 則其二解為 x1 =, x2 = 2a 2a D 例如,2x 2-11x-6=0 其解為 x 1 =-0.5,x 2 =6 2 寫一個網頁, 可以輸入一個二元一次方程式, 並求其解 ( 本例假設所輸入的方程式恰有一解 ) 提示 C 設二元一次方程式如下 : a x + b y = 1 1 c1 2x + b2y c2 a = a1 b1 B. 令 d = ( 表示 d = a1b2 a2b1) a b 2 2 c 1 b 1 c2 b2 a 2 c2 C. 則其解分別是 x = = (c1b2 c2b1) / d y = = (a1c2 a 2c1) / d d d D 例如,3x+y=5 x-2y=-3 則其解為 x=1 y=2 a 1 c 1 3 請設計一網頁, 可以計算兩個複數的加減乘除開根號等運算 4 請設計一網頁, 可以計算兩個向量的加減乘除等運算 2_4 決策敘述人類的生活必須不斷面對決策問題, 連我家一個不到三歲的小孩, 也常要思考他手裡的十元是要坐電動車還是買棒棒糖程式語言是協助解決人類問題的工具, 當然也有決策敘述, JavaScript 依決策點的多寡, 分為以下三種決策敘述, 第一是單一分歧決策的 if, 例如肚子餓

26 了就吃飯 ; 第二是雙向分歧決策 if~else, 例如肚子餓了就吃飯, 否則繼續前進 ; 第三是多向分歧決策的 switch, 例如你身上 5000 元, 走進一家購物中心的美食街用餐, 你的分歧點就很多, 有自助餐中式套餐日本料理泰國餐點等等分歧點本節的重點即是探討 JavaScript 的決策敘述 2_4_1 if if 通常用於單一分歧的決策, 它的使用時機為假如 ~ 則 ~", 也就是條件成立時, 則執行某項工作, 但若條件不成立時, 則不予理會其語法如下 : if ( 條件運算式 ) { 敘述 1; 敘述 2; 以上語法說明如下 : 1 若運算式的值為 true 則執行敘述區塊, 運算式的值若為 false, 則不會被執行, 其流程如下 : 2 以下的敘述可以判斷變數 a 是否等於 0, 若條件成立則設定 b=5 if (a==0) { b=5; 3 若條件成立時, 僅需執行單一個敘述, 則可省略兩個大括號 () 例如, 以上敘述可簡化如下 : if (a==0) b=5; 4 若省略大括號, 則條件運算式為 true 時, 當然只執行一個敘述, 這是初學者較容易忽略的問題例如, 以下敘述的 c=0, 不管運算式結果為何, 一定執行

27 if (a==0) b=5; c=0; 範例 2_4_1a 請設計一網頁, 可以輸入一個成績, 並評定是否及格執行結果操作步驟 1 根據題意, 繪製流程圖如下 :

28 Start N=" 不及格 " Input M M>=60 true false N=" 及格 " Output N End 2 根據流程圖, 共需一個輸入, 一個輸出及一個按鈕, 所以表單配置如下圖左 3 根據流程圖, 網頁撰寫如下 : <script language =javascript > function aa() <form name="myform" method="post" action="--webbot-self--"> <p><input type="text" name="t1" size="20" value=65></p> </form> <p><input type="button" value=" 執行 " name="b1" onclick="aa()"></p> <p><input type="text" name="t2" size="20"></p>

29 { var m,n; n=" 不及格 "; // 還沒考當然不及格 // 輸入 m=eval(myform.t1.value); // 處理 if (m>=60) n=" 及格 "; // 輸出 myform.t2.value=n; </script> 程式說明 1 本例即是單一分歧決策的典型範例, 當條件成立時, 則執行某個敘述 2 n 要預設初值, 不然若 m<60 時, 將會出現沒有設定其值, 且硬要輸出結果的錯誤自我練習 1 請設計一網頁, 可以判斷所輸入的數是偶數或奇數 ( 提示 : 可用除以 2 的餘數作決策 ) 範例 2_4_1b 請寫一網頁, 滿足以下條件 : 1 輸入兩個數 2 求輸入兩數極大值 3 輸出極大值表單配置如下圖左執行結果如下圖右 :

30 操作步驟 1 本例根據題意, 畫出流程圖如下 : Start Input a Input b max=a b>max true false max=b Output max End 2 根據以上流程圖, 寫出演算法如下 :

31 (1) 輸入第一數, 本例以變數 a 儲存 (2) 輸入第二數, 本例以變數 b 儲存 (3) 設定極大值 (max) 為第一數 max=a; (4) 當第二數 (b) 大於極大值時, 極大值即以 b 取代 if (b>max) max=b; (5) 輸出極大值 (max) 即為所求自我練習 1 請寫一網頁, 滿足以下條件 : A 輸入三個數 B 求三個數極小值 C 輸出極小值 [ 演算法則 ] 1. 輸入第一個數, 本例以變數 a 儲存 2. 輸入第二個數, 本例以變數 b 儲存 3. 輸入第三個數, 本例以變數 c 儲存 4. 設定極小值 (min) 為第一數 5. 當第二數 (b) 小於極小值時, 極小值即以 b 取代 if (b<min) min = b; 6. 當第三數 (c) 小於極小值時, 極小值即以 c 取代 if (c<min) min = c; 7. 輸出極小值 min 2 請寫一網頁, 滿足以下條件 : A 輸入三個人名與分數 B 求三個人分數極小值 C 輸出極小值的人名與分數範例 2_4_1c 請寫一網頁, 滿足以下條件 1 輸入三個數 2 將此三個數由小而大輸出表單配置如下圖左 : 執行結果如下圖右 :

32 演算法則 1. 分別以 a b 及 c 表示欲排序的資料 2. 假如 a 大於 b, 則 a 與 b 交換, 如下圖的 (1) 3. 假如 b 大於 c, 則 b 與 c 交換, 如下圖的 (2) 4. 假如 a 大於 b, 則 a 與 b 交換, 如下圖的 (3), 此時排序完成, 共需進行 3 次的比較與交換, 如下圖所示 a b c (1) (2) (3) 5 此即為著名的泡沫排序法則程式列印 <script language =javascript > function aa() { var a,b,c,t; // 輸入 a=eval(myform.t1.value); b=eval(myform.t2.value); c=eval(myform.t3.value); // 處理 if (a> b){ t=a;a=b;b=t;

33 if (b > c) { t=b;b=c;c=t; if (a> b){ t=a;a=b;b=t; // 輸出 myform.t4.value=a; myform.t5.value=b; myform.t6.value=c; </script> [ 補充說明 ] 1. 若有 4 筆資料需要排序, 則共需進行 6 次比較與交換, 如下圖所示 a b c d (1) (2) (3) (4) (5) (6) 2. 若有 5 筆資料需排序, 則共需進行 10 次比較與交換, 如下圖所示 a b c d e (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) 3. 以上為 3 4 或 5 筆資料的比較與排序, 其比較與交換的次數尚可克服, 但若欲排序的資料超過 5 個, 例如 20 筆資料欲排序, 則應待迴圈與陣列敘述介紹以後, 才能縮短程式的長度

34 自我練習 1 請輸入 4 個數, 並將 4 個數由大而小排序輸出 2 請輸入 5 個數, 並將 5 個數由小而大排序輸出 3 請輸入 5 個人名與分數, 並將 5 個人名與分數由小而大排序輸出範例 2_4_1d 請設計一個時鐘網頁, 可以顯示秒分及時表單配置如下圖左 : 執行結果如下圖右 : 操作步驟 1 settimeout settimeout 的語法如下 : settimeout( 方法名稱, 停頓時間 ) 其功能是, 停頓若干時間 ( 單位是 ms) 後, 執行指定的方法本例可藉此方法, 每隔 1 秒鐘均執行秒數累加 1 的方法 ( 或稱函式 ) 2 onload 網頁載入時, 稱為 onload 事件, 所以網頁載入時, 即要執行的事, 可利用此事件觸發 3 表單配置的 Html 碼如下 : <form name="myform" method="post" action="--webbot-self--"> </form> <p><input type="text" name="t1" size="10" value=0>: <input type="text" name="t2" size="10" value=0>: <input type="text" name="t3" size="10" value=0></p> 4 秒數累加方法如下, 當秒數分數達 60 時, 均要歸零並進 1

35 <script language =javascript > var h=23,m=58,s=57; function aa(){ s++; if (s>=60){ m++; s=0; if (m>=60){ h++; m=0; if (h>=24) h=0; myform.t1.value =h; myform.t2.value=m; myform.t3.value=s; settimeout("aa()",1000); 5 表單載入時, 自動執行方法 aa(), 其程式如下 : <body onload="aa()"> 程式列印 <html> <head> <title> 新增網頁 1</title>

36 <script language =javascript > var h=23,m=58,s=57; function aa(){ s++; if (s>=60){ m++; s=0; if (m>=60){ h++; m=0; if (h>=24) h=0; myform.t1.value =h; myform.t2.value=m; myform.t3.value=s; settimeout("aa()",1000); </script> </head> <body onload="aa()"> <form name="myform" method="post" action="--webbot-self--"> <p><input type="text" name="t1" size="8" value=0>: <input type="text" name="t2" size="11" value=0>:

37 </form> </body> </html> <input type="text" name="t3" size="10" value=0></p> 程式說明本例使用 settimeout( aa()",1000)( 單位為 ms), 則停頓 1 秒並自動執行 aa() 的方法自我練習 1 同上範例, 但可設定分與時 2 同上範例, 但可設定鬧鐘的功能, 也就是可設定幾時幾分, 讓喇叭發出嗶聲 (Beep) ( 提示 : 時間到時執行 alert 方法 ) 2_4_2 if ~ else 上一節的 if 僅適合單一分歧的決策, 當條件成立時, 執行某一敘述 ; 當條件未成立時, 則未有任何處置但在日常生活領域中, 常出現假如 ~ 則 ~, 否則 ~", 此種決策模式有兩種解決問題的方案, 故稱為雙向分歧決策, 此時可使用 if ~else 敘述, 其敘述的語法如下 : if ( 條件運算式 ) { 敘述區塊 1; else { 敘述區塊 2; 以上語法說明如下 : 1. 運算式的值若為 true, 則執行敘述區塊 1; 運算式的值若為 false, 則執行敘述區塊 2, 其流程圖如下 : true 敘述區塊 1 條件式 false 敘述區塊 2 2. 敘述區塊內可以放置任何合法敘述, 當然也可以再放置 if;if 中有 if, 稱為巢狀 if, 請看範

38 例 2_4_2b 範例 2_4_2a 同範例 2_4_1a, 但改用 if else 表單配置如下圖左 : 執行結果如下圖右 : 程式列印 <script language="javascript"> function aa(){ var a,b; a=eval(myform.t1.value); if (a>=60) b=" 及格 "; else b=" 不及格 "; myform.t2.value =b; </script> 程式說明本例是典型的雙向分歧的決策, 此時可用 if~ else 實現程式的要求

39 範例 2_4_2b 請寫一個網頁, 可以判斷所輸入座標的所在象限操作步驟 1 依照題意繪製流程圖如下 :

40 2 根據題意, 共需 2 個輸入, 一個輸出及一個按鈕程式列印 <script language="javascript"> function aa(){ var x,y,b; x=eval(myform.t1.value); y=eval(myform.t2.value);

41 if (x>0 ) if (y>0) b="i"; else b="iv"; else if (y>0) b="ii"; else b="iii"; myform.t3.value=b; </script> 補充說明此題有些同學會將程式寫成如下, 這樣寫也對, 但其平均執行次數較多因為不管是第幾象限, 都要執行 4 次的判斷, 而且電腦執行判斷比執行計算的時間還要多 function aa(){ var x,y,b; x=eval(myform.t1.value); y=eval(myform.t2.value); if (x>0 && y>0) b="i"; if (x>0 && y<0) b="iv"; if (x<0 && y>0) b="ii";

42 if (x<0 && y<0) b="iii"; myform.t3.value=b; 自我練習 1 同上範例, 但可判斷是否在原點或座標軸上 2 請設計一網頁, 滿足以下條件 (1) 輸入密碼 (2) 檢查密碼是否等於 "123", 若是才可進行以上的象限判斷 (3) 密碼錯誤, 則告知密碼錯誤, 若錯誤三次, 則網頁結束範例 2_4_2c 請設計一網頁, 完成以下要求 : 1. 輸入一個 0 ~100 的分數 2. 當分數大於 90 時, 輸出 A 3. 當分數介於 80~89 時, 輸出 B 4. 當分數介於 70~79 時, 輸出 C 5. 當分數介於 0~69 時, 輸出 D 表單配置如下圖左 : 執行結果如下圖右 : 操作步驟

43 1 根據題意繪製流程圖如下 : Start Input A A>=90 false A>=80 false true true A>=70 false true B="A" B="B" B="C" B="D" Output B End 2 根據題意, 共需一個輸入, 一個輸出, 一個按鈕, 所以表單配置如上 3 以上每一個決策點, 都有兩個分歧點, 適用 if~else, 每一個 else 後面均需再放置 if 作進一步決策所以網頁 script 撰寫如下 : 程式列印 <script language="javascript"> function aa(){ var a,b;

44 a=eval(myform.t1.value); if (a>=90) b="a"; else if (a>=80) b="b"; else if (a>=70) b="c"; else b="d"; myform.t2.value=b; </script> 補充說明此題亦有同學將程式撰寫如下, 結果當然是對, 但是其平均執行次數較多, 因為不管 a 的值為何, 都要執行 4 次決策, 況且, 電腦執行決策所需的時間遠遠高於計算的時間, 所以其執行效率較差 function aa(){ var a,b; a=eval(myform.t1.value); if (a <=100 && a>=90) b="a"; if (a <90 && a>=80) b="b"; if (a<80 && a>=70) b="c"; if (a<70) b="d"; myform.t2.value=b; 範例 2_4_2d 所得稅計算假設所得稅稅率如下 : 1 淨所得 300 元以下, 則稅率為 0.06 例如, 淨所得是 200 元, 則所得稅是 200*0.06=12 元 2 淨所得 300~500 元, 則超過 300 元的部分稅率為 0.13, 未超過 300 元的部分還是 0.06 例如, 淨所得是 400 元, 則所得稅是 300* *0.13=21 元 3 淨所得 500 元以上, 則超過 500 元的部分稅率為 0.2 例如, 淨所得是 600 元, 則所得稅是

45 300* * *0.2=64 元 (300 以下是 0.06,300~500 的部分還是 0.13 ) 表單配置與執行結果操作步驟 1 根據題意, 繪製流程圖如下 : Start Input A A<=300 false true A<=500 false true B=A*0.06 B=300*0.06+(A-300)*0.13 B=300* *0.13+(A-500)*0.2 輸出 B End 2 根據流程圖, 共需一個輸入, 一個輸出及一個按鈕, 所以表單配置如上

46 程式列印 <script language="javascript"> function aa(){ var a,b; a=eval(myform.t1.value); if (a<=300) b=a*0.06; else if (a<=500) b=300*0.06+(a-300)*0.13; else b=300* *0.13+(a-500)*0.2; myform.t2.value=b; </script> 自我練習 1 假設自來水費率如下 : A 100 以下, 每度 3 元例如, 用水 50 度, 則水費 =50*3=150 元 B 100~300 度, 超過 100 度的部分, 每度 5 元例如, 用水 200 度, 則水費 =100*3+100*5=800 C 300 度以上, 超過 300 度的部分, 每度 6 元例如, 用水 400 度則水費 = 100*3+200*5+100*6=1900 元請設計一網頁, 可以計算自來水費 2_4_3 switch 敘述一個決策點若同時擁有三個或三個以上的解決方案, 此稱為多向分岐決策多向分岐決策雖也可使用逐一過濾條件的 elseif 解決, 但卻增加程式的複雜度及降低程式可讀性若決策點能找到適當的運算式, 能使問題同時找到分岐點, 則可使用 switch 敘述, 其語法如下 : switch( 運算式 ) { case 常數 1: 敘述區塊 1; break; case 常數 2: 敘述區塊 2; break; case 常數 3: 敘述區塊 3; break; [default:] 敘述區塊 n;

47 以上語法說明如下 : 1. switch 的運算式值僅能為整數或字元 2. case 的常數僅能整數或字元, 且其型別應與上面的 switch 運算式相同 3. 電腦將會依 switch 的運算式值, 逐一至常數 1 常數 2 尋找合乎條件的 case, 並執行相對應的敘述區塊, 直到遇到 break 敘述, 才能離開 switch 4. default 可放置特殊情況, 其兩旁加中括號表示此敘述可省略 ; 若省略 default, 且若沒有任何 case 滿足 switch 運算式, 則程式會默默離開 switch 敘述 5. 敘述區塊可放置任何合法的敘述, 當然也可放置 switch 或 if 6. 以下敘述, 可將轉為對應的季節 a=2; string b; // 季節 switch(a) { case 1: b= 春 ; break; case 2: b= 夏 ; break; case 3: b= 秋 ; break; case 4: b= 冬 ; break; default: b= error ; 自我練習 1 請寫一網頁, 將所輸入的 , 轉為星期日一二三四五六範例 2_4_3a 請設計一網頁, 可以於網頁顯示紅綠燈執行結果

48 操作步驟 1 規劃時序如下 : A 時序 , 顯示綠燈 B 時序 5 7 9, 顯示綠滅 C 時序 , 顯示綠燈 D 時序 11 12, 顯示黃燈 E 時序 , 顯示紅燈 2 準備 red.jpg yellow.jpg 及 yellow.jpg 等圖檔, 顯示紅黃綠等燈號 3 表單配置如下圖 : 4 為了保證時序在 0 至 17 之間, 所以將計數值除以 18, 取其餘數, 如以下敘述 s++; s=s%18; 5 其次, 為了使計數值能傳遞至下一次方法的呼叫, 一定要將 s 的宣告放在所屬方法外面例如, 本例放在 aa() 方法外面, 如以下敘述 var s; s=0;

49 function aa(){ s++; s=s%18; myform.t1.value =s; 程式列印 <html> <script language =javascript > var s,l; s=0; function aa(){ s++; s=s%18; switch(s) { case 0: case 1: case 2: case 3: case 5: case 7: l="green";

50 gra.src="green.jpg" break; case 4: case 6: l="green off"; gra.src="white.jpg" break; case 8: case 9: l="yello" gra.src="yellow.jpg" break; case 10: case 11: case 12: case 13: case 14: case 15: case 16: case 17: l="red"; gra.src="red.jpg" break; default: l="error";

51 myform.t1.value =s; myform.t2.value=l; settimeout("aa()",500); </script> </head> <body onload="aa()"> <form name="myform" method="post" action="--webbot-self--"> <p> 計數器 <input type="text" name="t1" size="20"> 燈號 <input type="text" name="t2" size="20"></p> </form> <p><img name="gra" border="0" src="green.jpg" width="50" height="46"></p> </body> </html> 自我練習 1 同上範例, 但去掉綠閃功能, 且增加綠燈倒數秒數 ( 字型顏色是綠色 ) 與紅燈倒數秒數 ( 字型顏色是紅色 ) 範例 2_4_3b 請寫一猜拳遊戲網頁, 使用者輸入 0 代表剪刀 1 代表石頭 2 代表布, 電腦亦產生 0~2 的亂數, 並評定猜拳結果 ( 提示 :0 到 2 的亂數是 Math.floor(3*Math.random())) 執行結果

52 程式列印本例使用巢狀 case 完成如下 : <html> <head> <script language =javascript > var s,l; s=0; function aa(){ var a,b; var a1=""; var b1=""; var r; a=eval(myform.t1.value) ;// 輸入值轉為數值 b=math.floor(3*math.random());// 產生 0 到 2 的亂數 switch (a){ case 0: a1=" 剪刀 "; switch (b) { case 0: b1=" 剪刀 ";

53 r=" 平手 "; break; case 1: b1=" 石頭 "; r=" 電腦贏 "; break; case 2 : b1=" 布 "; r="people win"; break; break; case 1: a1=" 石頭 "; switch (b) { case 0: b1=" 剪刀 "; r="people win"; break; case 1: b1=" 石頭 "; r=" 平手 "; break; case 2 : b1=" 布 ";

54 r=" 電腦贏 "; break; break; case 2: a1=" 布 "; switch (b) { case 0: b1=" 剪刀 "; r=" 電腦贏 "; break; case 1: b1=" 石頭 "; r="people win"; break; case 2 : b1=" 布 "; r=" 平手 "; break; break; myform.t4.value=a1; //people myform.t2.value =b1; //computer

55 myform.t3.value =r; // 結果 </script> </head> <body> <form name ="myform" method="post" action="--webbot-self--"> </form> </body> </html> <p> 請輸入剪刀 (0) 石頭 (1) 布 (2)</p> <p><input type="text" name="t1" size="6" value="0"> <input type="text" name="t4" size="5"> <input type="button" value=" 確定 " name="b1" onclick="aa()"> 電腦 <input type="text" name="t2" size="15"></p> <p> 結果 <input type="text" name="t3" size="20"></p><p></p> 自我練習 1 同上範例, 但使用三個按鍵, 分別代表剪刀石頭布 2 同上範例, 但增加顯示雙方贏拳的次數 3 同上自我練習, 但增加判斷誰先贏 3 次, 並輸出結果 2_4_4 綜合範例 I 一元二次方程式解一元二次方程式的演算法如下 : 1. 設有一元二次方程式如下 : ax 2 + bx + c = 0 2. 若 a=0 則應輸出輸入錯誤 " 3. 令 d=b 2-4ac b b + d 4. 若 d=0, 則方程式有唯一解 x =, 否則若 d>0, 則方程式有二解 x 1 =, 2a 2a

56 x 2 b d =, 否則無實數解以上演算分析, 以流程圖說明如下 : 2a 範例 2_4_4a 請設計一個網頁, 可以解一元二次方程式 ax 2 + bx + c = 0 表單配置如下圖左 : 1. 使用 T1 T2 T3 分別輸入方程式的三個係數 a b 及 c 2. 使用 T4 輸出結果執行結果如下圖右 :

57 程式列印 <html> <head> <script language =javascript > function aa() { var a,b,c,d; a = eval(myform.t1.value); b = eval(myform.t2.value); c = eval(myform.t3.value); //process d = (Math.pow(b,2)) - (4 * a * c) ; if (a==0) { f=" 輸入錯誤 " else { if (d == 0) { f = " 唯一解, 其解是 x= " + eval(-b / 2 * a); else{ if (d > 0) { f = " 二解, 其解是 x1= " + ((-b + Math.pow(d,0.5) ) / (2 * a)) + ",x2= " + ((-b - Math.pow(d,0.5)) / (2 * a)); else{ f = " 無實數解 "; //output myform.t4.value = f ; </script> </head> <body> <form name="myform" method="post" action="--webbot-self--">

58 <input type="text" name="t1" value=2 size="10">x<sup>2</sup>+ <input type="text" name="t2" value=5 size="9" >x+ <input type="text" name="t3" value=-3 size="12">=0<p> <input type="button" value=" 執行 " name="b1" onclick="aa()"></p></p><p> <input type="text" name="t4" size="33" ></p> </form> </body> </html> 二元一次方程式解二元一次方程式的演算法如下 : 1. 設二元一次方程式如下 : a 1x + b1y = c1 a x + b y = 2 2 c2 a1 b1 2. 令 d = ( 此符號稱為行列式, 表示 d = a1b2 a2b1) a b a 3. 假如 a a 4. 假如 a 範例 2_4_4b c 1 2 b 2 c = =, 則方程式無限多解, 且程式結束 2 b2 c =, 則方程式無解, 且程式結束 2 b 1 b b 2 c c c2 b2 5. x = = (c1b2 c2b1) / d d a 1 c 1 a 2 c2 6. y = = (a1c2 a 2c1) / d d 請設計一個網頁, 可以解二元一次方程式表單配置如下圖左 : 執行結果如下圖右 : 2

59 程式列印 <head> </head> <body> <form name="myform"> <input type = 'text' name='a1' value=3 size="12">x+ <input type = 'text' name='b1' value=2 size="9">y= <input type = 'text' name='c1' value=5 size="7"><br> <input type = 'text' name='a2' value=1 size="12">x+ <input type = 'text' name='b2' value=1 size="9">y= <input type = 'text' name='c2' value=2 size="7"><br> <input type = 'button' value = ' 計算 ' onclick = 'aa()'><br> 方程式之解 :<input type = 'text' name='ans'> </form> <script language = 'JavaScript'> function aa(){ a1=myform.a1.value; b1=myform.b1.value;

60 c1=myform.c1.value; a2=myform.a2.value; b2=myform.b2.value; c2=myform.c2.value; var d = a1*b2-a2*b1; var r; if ((d==0) && (b1*c2-b2*c1==0)){ r=' 無限多組解 '; else{ if (d==0){ r=' 無解 '; else{ r= 'x=' + (c1*b2-c2*b1)/d + ',' + 'y=' + (a1*c2-a2*c1)/d; myform.ans.value =r; </script> </body> </html> I 三角形面積若已知三角形三邊長, 計算三角形三邊長的演算法如下 : 1. 輸入三角形的三邊長 a b c 2. 將三邊長由小而大重新排列, 最小的放入 a, 其次放入 b, 最大的放入 c 3. 最小的兩邊之和若小於第三邊, 則此三邊未能構成三角形, 程式提早離開 4. 假如 a 2 + b 2 > c 2 則為銳角三角形, 否則假如 a 2 + b 2 = c 2, 則為直角三角形, 否則此三角形為鈍角三角形

61 1 5. 令 d = (a + b + c) 2 6. 三角形面積 = d(d a)(d b)(d c), 以上即為三角形面積的海龍公式範例 2_4_4c 請輸入三角形三邊長, 首先判斷是否構成三角形其次判別三角形的種類, 最後計算其面積表單配置 1. 表單配置如下圖左 2. 分別以 T1 T2 及 T3 輸入三角形三邊長 3. 以 B1 作為執行運算的依據 4. 以 T4 輸出三角形的種類 5. 以 T5 輸出三角形的面積執行結果如下圖右 : 程式列印 <head> </head> <body> <form name="myform">

62 a= <input type='text' name='t1' value=5 size="9"> b= <input type='text' name='t2' value=4 size="9"> c= <input type='text' name='t3' value=3 size="9"><p> <input type='button' value=' 計算 ' onclick='aa()'><br> 面績 :<input type='text' name='t4'><br> 三角形類型 :<input type='text' name='t5'></p> </form> <script language='javascript'> function aa(){ a=number(myform.t1.value); b=number(myform.t2.value); c=number(myform.t3.value); var e=0; var f=""; var t; //sort,a b c 由小而大排序 if( a > b){t=a;a=b;b=t; if (b > c ) {t=b;b=c;c=t; if( a > b){t=a;a=b;b=t; if(a+b<c){ f=' 無法構成三角形 '; e=0; else{ var d=(a+b+c)/2; e= Math.sqrt(d*(d-a)*(d-b)*(d-c));

63 if ((Math.pow(a,2) + Math.pow(b,2)) < Math.pow(c,2)){ f=' 鈍角三角形 '; else{ if ((Math.pow(a,2) + Math.pow(b,2)) == Math.pow(c,2)){ f=' 直角三角形 '; else{ f=' 銳角三角形 '; myform.t4.value=e; myform.t5.value=f; </script> </body> </html> 閏年的判斷西元的閏年為每 400 年必須有 97 次閏年, 其規劃方式如下 : (1) 4 的倍數依此條件共有 100 次, 分別是等 (2) 於 (1) 的條件, 閏年顯然太多, 所以扣掉 100 的倍數, 分別扣掉等依此條件, 共有 96 次 (3) 於 (2) 的條件, 離目標值 97, 還相差一個, 所以再加回 400 的倍數, 正好 97 次, 如下表所示 : 西元年份性質備註 3 平年 4 閏年

64 100 平年 200 平年 300 平年 400 閏年 600 平年 1200 閏年 2000 閏年 3. 以上演算分析, 流程圖分析如下 : 開始輸入西元年份 a a4=a % 4 ( 取餘數 ) a100=a % 100 a400=a % 400 a4=0 false true (1) strb=" 平年 " false a100=0 true (2) strb=" 閏年 " false a400=0 true (3) strb=" 平年 " (4) strb=" 閏年 "

65 輸出 strb 結束以上年份, 對照上面的流程圖, 所走的路線如下 : 西元年份性質流程路線 3 平年 (1) 4 閏年 (2) 100 平年 (3) 200 平年 (3) 300 平年 (3) 400 閏年 (4) 600 平年 (3) 1200 閏年 (4) 2000 閏年 (4) 範例 2_4_4d 請設計一網頁, 可以將使用者所輸入的西元年份, 判斷其為平年或閏年表單配置如下圖左 : 執行結果如下圖右 :

66 程式列印 <html> <body> <form name="myform" > 請輸入西元年 <input type='text' name='t1' value=2000><br> <input type='button' value=' 判斷 ' onclick='aa()'><br> <input type='text' name='t2'> </form> </body> <script language="javascript"> function aa(){ var a=number(myform.t1.value); var a4 = a % 4; var a100 = a % 100; var a400 = a % 400; if (a4==0){ if (a100==0){ if (a400==0){ r=' 潤年 (4)'; //4,100,400 的倍數

67 else{ r==' 平年 (3)'; //400,100 的倍數 else{ r=' 潤年 (2)'; else{ r=' 平年 (1)'; myform.t2.value=r; </script> </html> 習題 1. 假設所得稅稅率法則如下 : (1) 淨所得 30 萬以下 6% (2) 淨所得 30~80 萬之間 13% ( 前面的 30 萬仍扣 6%, 超過 30 萬的部分稅率為 13%, 不是全部都扣 13%) (3) 淨所得 80~200 萬 21% ( 前面的 30 萬仍扣 6%,30~80 萬的部分稅率為 13%, 不是全部都扣 20%) (4) 淨所得超過 200 萬 30% 試寫一網頁可以輸入淨所得, 並計算應繳稅額例如, 淨所得若為 40 萬, 則其納稅金額計算如下 :

68 30 x 6% + 10 x 13% = ( 超過 30 萬的部份稅率為 13%, 不是全部 40 萬都是 13%) 2. 寫一網頁輸入 x 值, 並印出其所對應的值, 其函數對應如下 : x+3 x>8 x 2 3<=x<=8 y=f(x)= x 0<x<3 0 x<=0 3. 某一貨品定價 100 元, 若購買 500 件 ( 含 ) 以上打 7 折, 若購買 499~300 件則打 8 折, 若購買 299~100 件則打 9 折, 購買 99 件以下則不打折, 試寫一網頁可以輸入購買件數而得總價 4. 假設電阻串聯的公式為 R=R1+R2+R3+R4, 並聯公式為 R=1/((1/R1)+(1/R2)+(1/R3)+(1/R4)), 請設計一網頁, 可以同時處理個電阻的串聯或並聯 ( 也就是您的網頁, 僅輸入 2 個 3 個或 4 個都可以計算串聯或併聯的值 ) 5 請完成一組雙向的紅綠燈提示 : 規劃時序如下 : 時序燈號 1 燈號 2 0 綠紅 1 綠紅 2 綠紅 3 綠紅 4 綠紅 5 綠滅紅 6 綠紅 7 綠滅紅 8 黃紅 9 黃紅 10 紅紅 11 紅綠

69 12 紅綠 13 紅綠 14 紅綠滅 15 紅綠 16 紅黃 17 紅黃 18 紅紅 6 同上題, 但去掉綠閃功能, 且顯示燈號剩餘秒數 2_5 迴圈結構前面第二四兩章, 我們已經介紹如何輸入一個人的成績, 及判斷一個人的成績是否及格, 也介紹如何輸入多人成績多人成績的極大值及排序問題我們發現, 當人數只要一多, 寫起程式來真是洋洋灑灑, 程式設計的領域果真如此折磨人嗎? 所幸, 答案是否定的因為本章要介紹一個高效率的敘述, 此稱為迴圈敘述 JavaScript 的迴圈敘述分別是 for 與 while 2_5_1 for 若於程式設計階段已知迴圈的執行次數, 則可使用 for 敘述,for 敘述的語法如下 : for ( 計數變數 = 起始值 ; 結束運算式 ; 計數變數的變量 ) { [ 敘述區塊 1] [break] [continue] [ 敘述區塊 2] 以上語法說明如下 : 1. 計數變數可為正或負的整數或實數, 正整數請看範例 2_5_1a, 負實數請看範例 2_5_1b 2. 程式若執行到 break, 則會提早離開 for 迴圈, 請看範例 2_5_1c 其次, 若執行到 continue 則會忽略敘述區塊 2, 並繼續執行下一個計數變量 3. 以下程式片段可印出 1 至 10 for (i=1;i<=10;i++) document.write (i+"<br>"); //<br> 是跳列

70 4. 以下程式片段可印出 1 至 10, 並統計其和其次,JavaScript 並不會自動將所宣告變數的初值設為 0, 所以若要執行累加的變數, 務必親自設定其初值 s=0 var i,s=0; for (i=1;i<=10;i++) { document.write (i); s=s+i; document.write ("<br>"); document.write (s); 5. 敘述區塊內可以放置任何合法的敘述, 當然也可含 for for 內有 for, 稱為巢狀迴圈例如, 以下敘述可印出 1 至 10 五次, 請看 2_5_2 節 for (i=1;i<=5;i++) { for (j=1;j<=10;j++) document.write (j); document.write ("<br>") 範例 2_5_1a 若 y=f(x)=x 2 +x-6, 其解在 -10 到 10 之間的整數, 請設計一網頁, 使用暴力代入法求其解執行結果程式列印所謂暴力代入法就是一個一個通通帶入, 促使 y=0 的 x 值即為其解所以本例只要將 x 從 -10 到 10 一一代入, 即可求解 var x,y=0; for (x=-10;x<=10;x++) { y=x*x+x-6; if (y==0) document.write (x+"<br>"); 自我練習 1 請設計一網頁, 計算之和

71 2 2 請設計一網頁, 計算 ( i ) 5 i= 1 3 若 y=f(x)=x 3 +6x 2 -x-6, 其解在 -10 到 10 之間的整數, 請設計一網頁, 求其解 4 假如沒有乘法運算子, 請用加法完成乘法運算例如, 輸入 3,5 則輸出 15 範例 2_5_1b 試求之和執行結果程式列印 <html> <body onload="aa()"> <form name="myform"> <input type="text" name="t1"> </form> <script language="javascript"> function aa(){ var sum = 0,i; for (i=2.1; i>0.9; i-=0.2){ sum += i; myform.t1.value=' 和等於 :' + sum; </script> </body> </html> 程式說明 1. 迴圈的起始值運算式及計量變數都可為整數或浮點數, 本例之初值為 2.1, 終值等於 -7.1, 變量為 -0.2 自我練習 1 請設計一網頁, 計算之和範例 2_5_1c 若 y=f(x)=x 2 +2x-1.25 的解在 -10 到 10 之間的實數, 請設計一網頁, 使用暴力法, 求其實數解

72 執行結果程式列印 var x,y=0; for (x=-10;x<=10;x=x+0.1) { y=x*x+2*x-1.25; if (Math.abs(y)<=0.001) document.write (x+"<br>"); 補充說明 1 因為實數運算有誤差, 本例若使用 if (f==0) 將會找不到答案, 所以將範圍擴大 if (Math.abs(f)<=0.001), 才能找到答案 2 本例應該繼續使用四捨五入, 才可得較佳的解答自我練習 1 同上, 求其解的整數範圍 ( 提示 : 若 (f(x)*f(x+1)) <0 則肯定 x 與 x+1 之間有一整數解 ) 2 若 y=f(x)=x 2 +x-6, 求函數極小值範例 2_5_1d 示範 continue break 敘述執行結果 1 當 x 等於 5 時, 執行 continue, 所以 5 未印出, 繼續執行下一個 i, 如下圖所示 2 當 x 等於 8 時, 執行 break, 所以 8 以後未印出, 且離開迴圈, 如下圖所示程式列印

73 <script language="javascript"> function aa(){ var x; for (x=1;x<=10;x++) { if (x==5 ) continue; if (x==8) break; document.write (x+"<br>"); </script> 自我練習 1 請設計一網頁, 計算加到何數, 其和剛好超過 100? 並列印出這些數字, 再計算其和為何? 範例 2_5_1e 同範例 2_4_4d, 列出西元元年至西元 2000 年的所有閏年執行結果如下圖, 共 485 個 (97*(2000/400)=485)

74 程式列印本題延續範例 2_4_4d, 只要將 a 等於 1 到 2000 一一檢驗是否為閏年即可, 所以適用 for 迴圈 <html> <head><title>2_5_1e</title></head> <body onload="aa()"> </body> <script> function aa(){

75 var i,a4,a100,a400; var n=0; for(i=1;i<=2000;i++){ a4 = i % 4; a100 = i % 100; a400 = i % 400; if (a4==0){ if (a100==0){ if (a400==0){ document.write(i+" "); n=n+1; if ((n % 20 )==0) document.write("<br>"); else{ document.write(i+" "); n=n+1; if ((n % 20 )==0) document.write("<br>"); document.write("<br>"); document.write(" 潤年個數為 :"+n); </script> </html> 自我練習 1 請找出 1~100 的整數中, 是 7 的倍數, 且不是 3 的倍數者, 並統計其個數 2 請找出 1~100 的整數中, 是 7 的倍數, 或是 3 的倍數, 且不是 21 的倍數者, 並統計其個數範例 2_5_1f 試設計一網頁, 可以輸入 2 至 9 的整數, 並輸出此數的九九乘法表執行結果

76 程式列印 function aa() { var m,i; m=eval(myform.t1.value); //eval() 可將字串轉為數值 for (i=1;i<=9;i++) document.write (m+"*"+i+"="+m*i+"<br>"); 自我練習 1 請輸入一整數, 並列出此數的因數例如, 輸入 18 輸出共 6 個因數範例 2_5_1g 請設計一網頁, 可以判斷所輸入的數是否為質數執行結果程式列印任一整數, 除了 1 和本身外, 若沒有任何數可以整除此數, 則稱此數為質數所以, 本例使

77 用 2 至該數減一的整數試除, 若無一數可整除, 則稱此數為質數 <html> <head> <body> <form name="myform"> <input type='text' name="t1" value =7 size="18"><p> <input type='button' value=' 判斷質數 ' onclick="aa()"></p><p> 結果是 <input type='text' name="t2" size="11"></p> </form> </body> <script language="javascript"> function aa(){ n=myform.t1.value; var i,t=true; for (i=2; i<n; i++){ if (n%i==0) { t=false; break; if (t) { r=n + ' 是質數 '; else{ r=n + ' 不是質數 '; myform.t2.value=r; </script> </html> 自我練習 1 費氏數列的定義如下 : F1=1,F2=1,Fn=Fn-1+Fn-2 n>=3 請設計一網頁, 可以印出費氏數列的指定項目例如, 輸入 3, 印出 1,1,2 輸入 4, 印出 1,1,2,3 輸入 5, 印出 1,1,2,3,5

78 輸入 6, 印出 1,1,2,3,5,8 ( 本例先不要使用陣列 ) 2_5_2 巢狀迴圈迴圈中又有迴圈, 稱為巢狀迴圈巢狀迴圈在程式設計的領域非常重要, 也是初學者最感頭疼的單元, 本節將使用若干範例來引領學生征服此領域範例 2_5_2a 請設計一網頁, 印出 2 至 1000 的所有質數執行結果演算法 1 本例要測試 2 to 1000 的質數, 所以外迴圈 for (i=2; i<=1000; i++) 2 每一數還沒檢驗前都是質數 t=true; 2 每一個數均要測試其是否質數, 所以內迴圈 for (j=2; j<i; j++) 3 每個數都要測試其是否質數 if (i%j==0) { t=false; break; 程式列印 <html> <body onload="aa()"> </body>

79 <script language="javascript"> function aa(){ var i,j,t=true,n=0; for (i=2; i<=1000; i++){ t=true; for (j=2; j<i; j++){ if (i%j==0) { t=false; break; if (t) { document.write( i + " " ); n++; if (n % 20 ==0){ document.write ("<br>"); document.write ("<br>"); document.write (" 質數個數為 "+n); </script> </html> 範例 2_5_2b 1 以下表格, 共一列兩行 A B 以 HTML 輸出的樣式如下 : <html> <body> <table border="1"> <tr> <td> A </td> <td>

80 B </td> </tr> </table> </body> </html> 2 若是以下二列三行, 其 HTML 輸出如下 : A B C D E F <html> <body> <table border="1"> <tr> <td> A </td> <td> B </td> <td> C </td> </tr> <tr> <td> D </td> <td> E </td> <td> F </td> </tr> </table> </body> </html> 3 請設計一網頁, 輸出如下的九九乘法表

81 程式列印 1 共九列, 所以外迴圈 for (i=1;i<=9;i++) 2 每列均有 9 個, 所以內迴圈 for (j=1;j<=9;j++) 3 全部程式如下 : <html> <body> <table border="1"> <script language=javascript> var i,j; for (i=1;i<=9;i++) { document.write("<tr>") ; for (j=1;j<=9;j++) { document.write("<td>") ; document.write(i,"*",j,"=",i*j); document.write("</td>") ; document.write("</tr>"); </script> </table> </body> </html>

82 範例 2_5_2c 試設計一網頁, 找出三位數阿姆斯壯數 " 所謂阿姆斯壯數是指一數等於各個位數的立方和, 即 abc=a 3 +b 3 +c 3, 例如 153= 執行結果程式列印 <html> <head> <title>2_5_2c</title> </head> <body onload="aa()"> </body> <script language="javascript"> function aa(){ var sum1=0,sum2=0; for (i=1;i<=9;i++){ for (j=0;j<=9;j++){ for (k=0;k<=9;k++){ sum1=100*i + 10*j + k; sum2=math.pow(i,3) + Math.pow(j,3) + Math.pow(k,3); if(sum1==sum2) document.write( sum1 + "<br>" ); </script> </html> 自我練習 1 試設計一網頁, 找出四位數阿姆斯壯數 " 例如,abcd=a 4 +b 4 +c 4 +d 4 2 請設計一網頁, 可以輸入一數, 並求出其可分解的平方和例如, 輸入 50, 可得 1,7 與

83 5,5 兩組答案 2_5_3 while 上一節的 for 是用於程式設計階段已知迴圈次數, 但有些情況, 我們於程式設計階段並不知迴圈的執行次數, 此時即可使用 while 敘述, 且有些迴圈可能一次都不執行, 所以 while 敘述又分為前測試迴圈與後測試迴圈 while 的前測試迴圈語法如下圖左, 後測試迴圈如下圖右 while( 運算式 ) { 敘述區塊 1; [continue;] [break;] 敘述區塊 2; do { 敘述區塊 1; [continue;] [break;] 敘述區塊 2; while ( 運算式 ) ; 以上語法說明如下 : 1. 不論是前測試或後測試迴圈, 均是運算式值為真 " 時, 繼續執行迴圈, 運算式為偽 " 時, 離開迴圈 2. 前測試與後測試迴圈的差別為, 前測試迴圈有可能一次均不執行迴圈, 但後測試迴圈至少執行一次 3. while 敘述區塊內亦適用 break, 提早離開迴圈 4. while 敘述區塊內亦適用 continue, 略過敘述區塊 2, 直接回到運算式 5. 以下程式片段, 使用前測試迴圈計算商與餘數, 因為程式設計階段並不知程式的結束值, 所以特別適合使用 while 迴圈只要被除數大於等於除數, 那就一直減去除數, 可以減去除數的個數就是商, 離開迴圈時所剩的被除數就是餘數 var q=0; a=7; // 被除數 b=3;// 除數 while(a>=b){ a-=b; q++; // 商 myform.t3.value= q +'.. '+ a; 商與餘數

84 6. 以下程式片段, 使用前測試迴圈統計 1 至 10 的和 i=0;s=0; while(i<=10) { document.write (i+"<br>"); s=s+i; i++; document.write (s+"<br>"); 7. 以下程式片段, 使用後測試迴圈統計 1 至 10 的和 i=0;s=0; do { document.write (i+"<br>"); s=s+i; i++; while (i<=10) ; document.write (s+"<br>"); 範例 2_5_3a 請設計一網頁, 計算 , 請問加至何值, 其和剛好超過 100? 執行結果程式列印

85 本例設計階段並不知道迴圈的終值, 所以特別適合使用 while 迴圈如下 : <html> <body onload="aa()"></body> <script language="javascript"> function aa(){ var sum=0,i=1; while (sum<=100){ sum+=i; document.write(i+", "); document.write(sum+"<br>"); i++; document.write(" 總和 :"+sum+ ",i="+i); </script> </html> 自我練習 1 若有一級數 s=3+6+9+, 請問加到第幾項, 其和剛好超過 100? 範例 2_5_3b 請設計一網頁, 滿足以下條件 : (1) 可以產生 0 至 6 的整數亂數 ( 隨機產生 0 至 1 之間的實數亂數為 Math.random(), 關於亂數的使用, 請先看第 9 章 ) (2) 累加以上亂數 (3) 輸出此亂數與其和 (4) 若亂數不為 0, 則重複步驟 (1)~(3), 直到亂數為 0, 則程式結束執行結果程式列印 var x,s=0; do { x=math.floor(math.random ()*7); document.write (x,","); s=s+x; while (x!=0);

86 document.write ("<br>",s); 自我練習 1 請設計一網頁, 滿足以下條件 :( 擲骰子遊戲 ) A 可以產生兩個 1 至 6 的亂數 B 累加以上亂數 C 輸出此亂數與其和 D 若亂數和大於 8, 則重複 (A)~(C), 直到亂數和小於等於 8, 則程式結束 2 請設計一網頁, 可以連續產生兩個 1~6 的亂數, 並輸出此兩個亂數, 直到後面的亂數大於前面的亂數 3 請設計一網頁, 可以連續產生 3 個 1~6 的亂數, 並輸出此 3 個亂數, 直到有其中兩個亂數相等為止, 並輸出另一亂數之值 4 請設計一網頁, 可以連續產生 4 個 1~6 的亂數, 並輸出此 4 個亂數, 直到有其中兩個亂數相等為止, 並輸出另兩亂數之和例如, 亂數為 1,5,2,6 則繼續產生亂數, 亂數若為 2,5,2,6 則輸出其和為 11 5 請設計一網頁, 可以讓人與電腦玩拾捌拉遊戲計算點數和方式是, 一直擲四顆骰子, 直到有兩顆相同, 並將此兩顆取走, 再計算另兩顆之和, 例如, 若擲出 2,4,1,6 則重來, 若擲出 1,3,1,6 則點數和是 9. 其次, 若擲出 2,6,6,2 則點數和為 12, 也就是取較高點數者遊戲規則是, 人先擲, 且每擲一次, 顯示一次, 無效時亦要求使用者再擲 6 設計一網頁, 可以累加所輸入的正數, 設計階段並不知數字個數, 直到輸入值是 -1 時, 印出所輸入數字的最大值最小值及平均 ( 提示 : 請用 prompt 函數 ) 7 請寫一猜拳遊戲程式, 電腦連續產生兩個 0~2 的亂數,0 代表剪刀 1 代表石頭 2 代表布, 並輸出結果, 直到有任一方贏 3 次為止範例 2_5_3c 假如沒有除法運算子, 請自行使用加減法, 完成除法運算執行結果只要被除數大於等於除數, 那就一直減去除數, 可以減去除數的個數就是商, 離開迴圈時所剩的被除數就是餘數程式列印 <html>

87 <body> <form name="myform"> <input type="text" name="t1" value=8 size="7" > / <input type="text" name="t2" value=3 size="8" > <input type="button" value="=" onclick="aa()"> <input type="text" name="t3" size="6"> </form> </body> <script> function aa(){ var q=0; a=number(myform.t1.value); b=number(myform.t2.value); while(a>=b){ a-=b; q++; myform.t3.value= q +'...'+ a; </script> </html> 程式說明 1. a= 被除數 2. b= 除數 3. 商數 q=0 4. 所謂的商就是被除數 a 共有幾個除數 b, 也就是只要 a 大於等於 b, 就要執行以下敘述 : a=a-b q=q+1 5. 本例以 8 除以 3, 實際演練如下 : (1) a=8;b=3 a>=b 成立, 所以執行迴圈敘述 a=a-b=5 q=q+1=1 (2) a=5;b=3 a>=b 成立, 所以執行迴圈敘述 a=a-b=2 q=q+1=2

88 (3) a=2;b=3 a>=b 不成立, 所以離開迴圈 q=2( 商 ) a=2( 餘數 ) 4. 本程式僅能使用前測試迴圈, 而不能使用後測試迴圈, 因為有可能一開始被除數就小於除數範例 2_5_3d 請將 10 進位數轉為 N 進位數 ( 本例暫討論 N<=9, 其餘 N>=11 時, 待陣列介紹之後再討論 ) 程式列印 <html> <body> <form name="myform"> <input type="text" name="t1" value=11 size="8"> 十進位轉 <input type="text" name="t2" value=2 size="8" > 進位 <br> <input type="button" value=" 轉換 " onclick="aa()"> <input type="text" name="t3" size="11"> </form> </body> <script language="javascript"> function aa(){ var r,strn=""; a=number(myform.t1.value); b=number(myform.t2.value); while(a>0){ r = a%b; strn = r.tostring() + strn;//tostring() 數值轉字串 a=math.floor(a/b);// 取整數

89 myform.t3.value=strn; </script> </html> 演算說明 1. a 為待轉換的十進位 2. b 為 N 進位數 3. r 為餘數 4. strn 為二進位數 5. 只要 a >0 則將 a 連續除以 b, 直到整數商為 0, 其餘數的字串累加, 即為 N 進位數 6. 本例以 11 轉為 2 進位, 實際演練如下 : (1) a=11;b=2;strn=" "; r=a Mod b=1 a=a\b=5 strn="1" a>0 成立, 所以繼續迴圈 (2) a=5;b=2;strn="1"; r=a Mod b=1 a=a\b=2 strn="11"( 剛出爐餘數的 1, 要放在原 strn 的左邊 ) a>0 成立, 所以繼續迴圈 (3) a=2;b=2;strn="11"; r=a Mod b=0 a=a\b=1 strn="011"( 剛出爐餘數的 0, 要放在原 strn 的左邊 ) a>0 成立, 所以繼續迴圈 (4) a=1;b=2;strn="011"; r=a Mod b=1 a=a\b=0 strn="1011"( 剛出爐的餘數 1, 要放在原 strn 的左邊 ) a> 0 不成立, 所以離開迴圈 7. 本例進入迴圈之前, 我們並無法預估迴圈次數, 所以較適用 while 迴圈 ( 亦可用 for, 但程式架構較不漂亮 ) 且有可能迴圈一次均不執行, 所以要用前測試迴圈原理解說

90 1. 若要將十進位的 a 轉為 2 進位, 則以數學式表示如下 : (a)10=a0+a12 1 +a22 2 +a32 3 +a =a0+2(a1+a22 1 +a32 2 +a ) //a1 以後, 提出 2 2. 上式的 a0 為 a 除以 2 的餘數,a1+a22 1 +a32 2 +a42 3 則為 a 除以 2 的整數商, 重複上式, 直至整數商等於零為止 3. 最先出爐的餘數應放在 2 進位的最右邊 (a)10=(an a3a2a1a0)2 範例 2_5_3e 請以輾轉相除法, 求兩數的最大公因數演算法 1. 輸入 a b 兩數 2. 調整 a,b 兩數, 使得 a>b ( 假如 b>a, 則兩者交換 ) 3. 設 r 為餘數 4. 將 a 除以 b, 得餘數 r, 假如餘數不為 0, 則以原除數為被除數, 原餘數為除數, 重複執行 a 除以 b, 直到餘數為 0, 促使餘數為 0 的除數, 即為最大公因數 5. 本例以 a=21,b=9, 實際演練如下 : (1) a=21;b=9; r=a % b=3 a=b=9 b=r=3 r>0 成立, 所以繼續執行迴圈 (2) a=9;b=3; r=a % b=0 a=b=3 b=r=0 r>0 不成立, 所以離開迴圈, 最大公因數為 a=3 6. 輾轉相除法的執行之初並無法預估執行次數, 所以較適用 while, 且本例迴圈至少執行一次, 所以用後測試迴圈執行結果

91 程式列印 <html> <body> <form name="myform"> 輸入 a 值 <input type="text" name="t1" value=21><br> 輸入 b 值 <input type="text" name="t2" value=9> <br> 最大公因數 <input type="text" name="t3"><br> <input type="button" value=" 計算 " onclick="aa()"><br> </form> </body> <script language="javascript"> function aa(){ var r,t; a=number(myform.t1.value); b=number(myform.t2.value); if (b>a){ t=a; a=b; b=t; do{ r=a%b; a=b; b=r; while(r>0) myform.t3.value=a; </script> </html> 自我練習 1 請使用二分猜值法, 計算一數的平方根提示 : 所謂二分猜值法, 就是先猜其中間值, 若猜得太大, 則調整上限值為所猜的中間值,

92 若猜的太小, 則調整期下限值為所猜的中間值, 且每次都可縮小一半的範圍, 直到上下限的範圍非常小為止, 此時的上限值或下限值即為其解至於要多小, 則要依您所要取的精密度而定以 9 為例, 因為其根必在 x1=0 與 x2=9 中間, 那就先猜中間值 x=4.5, 其次,4.5 的平方大於 9, 表示猜的太大, 此時請調整其上限值 x2=4.5, 那表示其根必在 x1=0 與 x2=4.5 之間, 且只要 x1 與 x2 的距離大於 0.1, 則要繼續重複猜值的動作此時 x1=0,x2=4.5, 那就繼續猜 x=2.25,2.25 的平方等於小於 9, 表示猜的太小, 當然要調整下限值 x1=x=2.25 ( 也就是說, 當 x1 與 x2 的距離非常小, 例如, 它們之間的距離已經小於 0.1, 那表示 x1 與 x2 都可當作其解了, 就如同一片西瓜, 其大小已經小於 01 公分, 那您可能就沒辦法再一分為 2, 其次, 電腦的精密度大於人類, 所以其精密度較大, 譬如只要大於即能在分割為 2, 其精密度當然較高 ) 2 請使用二分猜值法, 計算一數的立方根 3 請使用二分猜值法, 計算兩數相除的結果 2_5_4 實例探討 I 積分的剖析若有積分式如下 : 1 0 xdx 此積分式就如同求右圖邊長為 1 的等腰三角形, 則其面積依照公式是 0.5 此公式的由來, 解析如下 : (1) 若 dx=0.1, 也就是將三角形切為 10 個矩形, 每個矩形的底是 0.1, 則其面積如下 : sum = 0; dx = 0.1;' 每個矩形的高分別是 for(x=0;x<=1;x+=dx){ sum = sum + x * dx; document.write(sum); 結果是 0.55 (2) 若 dx=0.01, 也就是將三角形切為 100 個矩形, 則其面積如下 sum = 0; dx = 0.1;' 每個矩形的高分別是 for(x=0;x<=1;x+=dx){ sum = sum + x * dx; document.write(sum);

93 結果是 (3) 若 dx=0.001, 也就是將三角形切為 1000 個矩形, 則其面積如下 sum = 0; dx = 0.1;' 每個矩形的高分別是 for(x=0;x<=1;x+=dx){ sum = sum + x * dx; document.write(sum); 結果是 (5) 若 dx 取的非常小, 也就是切為無限多個矩形, 則其結果將會是 0.5, 這就是積分的道理範例 2_5_4a 請設計程式示範以上積分的剖析執行結果程式列印 <html> <head><title></title></head> <body> <form name="myform"> <input type="text" name="t1"><br> <input type="text" name="t2"><br> <input type="button" value="dx=0.1" onclick="aa()"> <input type="button" value="dx=0.01" onclick="ab()"> <input type="button" value="dx=0.001" onclick="ac()"> <input type="button" value="dx=0.0001" onclick="ad()"> </form> </body> <script language="javascript"> function aa(){ myform.t1.value="dx=0.1"; sum = 0;

94 dx = 0.1; for(x=0;x<=1;x+=dx){ sum = sum + x * dx; myform.t2.value=sum; function ab(){ myform.t1.value="dx=0.01"; sum = 0; dx = 0.01; for(x=0;x<=1;x+=dx){ sum = sum + x * dx myform.t2.value=sum; function ac(){ myform.t1.value="dx=0.001"; sum = 0; dx = 0.001; for(x=0;x<=1;x+=dx){ sum = sum + x * dx myform.t2.value=sum; function ad(){ myform.t1.value="dx=0.0001"; sum = 0; dx = ; for(x=0;x<=1;x+=dx){ sum = sum + x * dx myform.t2.value=sum; </script> </html> I Sinx 的剖析當我們欲求任意角度的 Sinx 值時, 電腦是以其泰勒展開式求其值, 如以下敘述 :

95 3 5 7 x x x sin x= x ! 5! 7! 例如,x=30 0 其徑度量是 x= , 若取 1 項 sin x 若取 2 項 = x = x sin x= x = ! 若取 3 項 3 5 x x sin x= x + = ! 5! 若取 4 項 x x x sin x= x + = ! 5! 7! 取的越多, 可說是精密度越大, 那到底要取幾項, 那就是依使用者精密度而定範例 2_5_4b 設計一網頁, 可依所需項數求解 sin 函數執行結果程式列印 <html> <body> <form name="myform"> 輸入項數 <input type="text" name="t1" value=2 size="16"><br> 結果 <input type="text" name="t2" size="20"><br> <input type="button" value=" 計算 " onclick="aa()"> </form> </body> <script language="javascript"> function aa(){ var y=0; pi = 4 * Math.atan(1); x = pi * 30 / 180 ;

96 n = Number(myform.t1.value); for (i=1;i<=n;i++){ y1 = Math.pow(-1,(i - 1))* (Math.pow(x,(2 * i - 1)) / nf(2 * i - 1)); y += y1; myform.t2.value=y; function nf(y){ sum = 1; for (j=1;j<=y;j++){ sum *= j; return sum ; </script> </html> 範例 2_5_4c 設計一網頁, 可依所需精密度求解 sin 函數執行結果程式列印 <html> <head><title></title></head> <body> <form name="myform"> 輸入精密度 <input type="text" name="t1" size="15" value=0.1><br> 結果 <input type="text" name="t2" size="21"><br> 所計算項數是 <input type="text" name="t3" size="12"><br> <input type="button" value=" 計算 " onclick="aa()"> </form> </body> <script language="javascript">

97 function aa(){ var y=0; pi = 4 * Math.atan(1); x = pi * 30 / 180 ; n = Number(myform.t1.value); i=1; do{ y1=math.pow(-1,(i - 1))* (Math.pow(x,(2 * i - 1)) / nf(2 * i - 1)); y+=y1; i++; while(math.abs(y1)>n) myform.t2.value=y; myform.t3.value=i-1; function nf(y){ sum = 1; for (j=1;j<=y;j++){ sum *= j; return sum ; </script> </html> 習題 1. 寫程式計算下列結果 : (1) s=7^2+10^2+13^2 +83^2 (2) s=(1-1/2)(1-1/3)(1-1/4)+ +(1-1/N) ( 要先輸入 N 值 ) (3) s=1-1/2^2+1/3^2-1/4^2+ +(-1)^N/N^2 ( 要先輸入 N 值 ) 2. 寫程式求以下數列之和 (n 可任意輸入 ), 此級數 ( 數列之和稱為級數 ) 是收斂或發散? ( 當 n 繼續增大時, 數列之和是否持續增大, 若不會增大, 稱為收斂, 否則為發散 ) n 3. 求至 n 項之總和 (n 可任意輸入 ) 4. 寫程式估計以下無窮級數 n 時之和

98 n 1 ( 1) k = 1 kk+ 5. 請設計一網頁, 輸入一正整數, 將其質因數分解後印出其式子, 例如 : 輸入 :319 輸出 :319=11*19 輸入 :19 輸出 :19 = 質數輸入 : 輸出 : = 2^3*7^2*11^3 6. 請設計一網頁, 可以處理分數的加減乘除運算, 運算之後的結果應約分化為最簡分數或整數例如 : = * = = _6 陣列處理少量的資料, 可以為每一筆資料設定一個變數, 但如果資料量非常龐大, 譬如一個班級的 50 位同學成績, 分別設定 A1 A2...A50 等 50 個變數, 是一件相當麻煩的事, 為了解決大批的資料處理, 遂有陣列 (Array) 的使用例如, 要儲存一個班級的數學成績可以宣告一個一維陣列代表 50 個人的數學成績, 則 a[50] 可以用來表示 1 號同學的數學成績,a[2] 可以用來表示 2 號同學的數學成績, 依此類推若要表達每班每人的國英數三科成績時, 可以宣告一個二維陣列來表示, 其中 a[1][1] 表示 1 號國文成績 a[1][2] 表示 1 號英文成績 a[1][3] 表示 1 號數學成績, 依此類推同理, 如果一年級有 12 班, 則可以宣告個三維陣列來儲存, 其中 a[7][42][2] 代表 1 年級 7 班 42 號英文成績 2_6_1 一維陣列 I 陣列的宣告當我們使用一般變數時, 必須先行宣告, 同樣地陣列變數也是如此, 其宣告方式如下 : var 陣列變數 = new Array(); 且其索引下限值是 0, 陣列的大小與型態都不用宣告,JavaScript 會自動安排, 例如, 以下敘述宣告一個 a 陣列, 其索引下限值是 0 var a=new Array(); I 陣列變數的存取

99 陣列可以在同一變數中儲存多個元素, 所以當你在存取陣列中的某個元素時, 必須指定一個索引值 (index) 來指向你所相要的元素 ; 其中索引值可以是整數常數, 但也可以是整數變數所以, 以下的敘述可以將陣列索引 0 的值設定為 3 a[0]=3; 以下敘述可取得 a[0] 的值 b=a[0]; 其次, 陣列宣告之後, 您可任意放入數值或字串, 例如, 以下敘述繼續將 a[1] 放入 "mary" 與數值的 80 a[1]="mary"; a[2]=80; I 陣列的初值設定陣列宣告與初值設定亦可同時設定, 例如, 以下敘述即為宣告 b 陣列, 並且宣告其內容 var b=new Array(0,1,2,3,4); 以上敘述, 亦可省略 new Array, 但應將小括號改為中括號, 如以下敘述 var b=[0,1,2,3,4]; 其次, 大部分的程式語言都規定所有陣列成員的資料型態要相符, 但是 JavaScript 並沒有如此規定, 所以, 以下敘述亦可初始化陣列內容 var b=new Array(4, mary, d,70); 此時 b[0]=4,b[1]="mary",b[2]='d',b[3]=70, 其次, 更神奇的是陣列亦可繼續增加其容量, 例如, 繼續設定 b[4]=90 則其容量即為 5 所以此時輸出其長度則為 5, 如以下敘述, document.write(b.length); 範例 2_6_1a 假如有資料如下 66,55,77,88,33 (1) 請用陣列儲存以上資料 (2) 請統計以上資料的和, 並輸出 (3) 請統計以上資料的平均, 並輸出 (4) 請統計以上資料的極大值, 並輸出執行結果

100 程式列印 <html> <body onload="aa()"> </body> <script language="javascript"> function aa(){ var a=[]; a[1]=77;a[2]=66;a[3]=99;a[4]=44;a[5]=55; max = a[1];min = a[1];sum = a[1]; for (i=2;i<=5;i++){ if (a[i] > max) { max = a[i]; if (a[i] < min) { min = a[i]; sum+=a[i]; avg = Math.floor(sum/5); document.write( " 平均 " + avg + "<br>"); document.write( " 最高 " + max + "<br>"); document.write( " 最低 " + min + "<br>"); </script> </html> 程式說明 1. 求最高分的方法為 : (1) 先設第一個人為最高分的擂台主 (2) 第二個人起逐一與擂台主比較, 若大於擂台主即取代擂台主 [ 自我練習 ] 1. 設有資料如下 : 22, 33, 44, 55, 66 (1) 請用陣列儲存以上資料 (2) 請將以上陣列複製至另一陣列

101 (3) 將以上兩個陣列內容逐一相加, 並放在第三個陣列範例 2_6_1b 請用陣列讀入 5 位學生的國文成績, 並可由使用者輸入座號來查詢成績執行結果 1 以下是程式執行結果的初始畫面 2 以下是查詢的畫面程式列印 <html> <body onload="ab()"> <form name="myform"> 輸入座號 <input type="text" name="t1"><br> 國文成績 <input type="text" name="t2"><br> <input type="button" value=" 查詢 " onclick="aa()"> </form> </body> <script language="javascript"> function aa(){ j=number(myform.t1.value); myform.t2.value=a[j]; var a=[]; function ab(){ for(i=1;i<=5;i++){ a[i]=number(prompt(" 請輸入 "+i.tostring()+" 號成績 ",10*i));//toString() 將數值轉字串

102 </script> </html> [ 自我練習 ] 1. 假設資料個數上限是 50, 但設計階段並不知道資料個數, 請寫一個程式, 可以輸入若干數字, 並由陣列儲存, 當輸入是 -1 時程式結束其次, 資料輸入完成, 亦可由索引查得輸入值 2 設有資料如下 : -1, 0, 3, 4, -5, 8 (1) 請以陣列儲存以上資料 (2) 統計正數 0 負數的個數 3 設有資料如下 : 3, 4, 3, 8,9,22,44,1,5,66 請問是否有資料重複 4 設有資料如下 : 3, 4, 3, 8,9,22,44,1,5,66,11,16,21,22,2,55,99,26,29,11,3,22,62,69,72,79,22 (1) 請以陣列儲存以上資料 (2) 統計有哪些數字重複, 其重複次數為何? (3) 請遞除重複的資料 5. 假設全班有 12 人, 請寫一網頁, 每人於到校時, 可鍵入自己的座號, 電腦並逐一回應未到校的座號 6 請寫程式完成以下條件 A 產生 10 個 1 到 6 的亂數 B 以陣列儲存以上資料 C 輸出以上資料 D 共有多少個 3 7 請寫程式完成以下條件 A 產生 20 個 3 到 8 的亂數 B 以陣列儲存以上資料 C 輸出以上資料 D 所有數字出現的次數為何? 8 請寫程式完成以下條件

103 A 產生 10 個 10 到 50 的亂數 B 以陣列儲存以上資料 C 輸出以上資料 D 有哪些數字重複出現, 其出現的次數為何? E 請扣除重複出現的數字, 並複製到另一陣列 9 請寫程式完成以下條件 A 產生 6 個 1 到 20 的亂數 B 以陣列儲存以上資料 C 產生 6 個 1 到 20 的亂數 D 以另一陣列儲存以上資料 E 以上兩陣列有哪些相同, 請列出相同的數字範例 2_6_1c 請寫一程式, 可將任意十進位數轉為 N 進位數 (2<=N<=16) 執行結果程式列印當餘數超過 9 時, 使用陣列做一個對照表如下 : <html> <body> <form name="myform"> 請輸入十進位 <input type="text" name="t1" value=255 size="15"><br> 輸入 n 值 <input type="text" name="t2" value=16><br> 結果 <input type="text" name="t3" size="23"><br> <input type="button" value=" 查詢 " onclick="aa()"> </form> </body> <script language="javascript"> function aa(){ var strn=""; var c=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");

104 a=number(myform.t1.value); b=number(myform.t2.value); while(a>0){ r = a%b ; strn = c[r] + strn ; a = Math.floor(a/b); myform.t3.value=strn; </script> </html> 自我練習 1 請以一維陣列重做人與電腦猜拳 2 請寫一程式, 可以輸入阿拉伯數字, 並轉為大寫例如, 輸入可以輸出五萬零壹十範例 2_6_1d 請以陣列重做費式數列, 並輸出結果執行結果程式列印 <html> <body onload="aa()"> </body> <script language="javascript"> function aa(){ var a=[]; a[1] = 1; a[2] = 1; for(i=3;i<=15;i++){ a[i] = a[i - 1] + a[i - 2]; for(i=1;i<=8;i++){

105 document.write (i); document.write( " "+ a[i] + "<br>");//&nbsp 可連續產生多個空白 </script> </html> 自我練習 1 請寫一程式, 可以每秒自動展示一張圖片 2 同上題, 但使用兩個按鈕, 分別是往前與往後的展示照片 3 假如樂透開獎號碼如下 2,5,13,18,21,33 特別號是 7, 請用陣列儲存其次, 張三買的號碼是 3,13,14,18,22,33 請以陣列儲存, 並核對中獎類別 2_6_2 二維與多維陣列含有兩個或兩個以上索引值的陣列稱為多維陣列, 一般最常應用的是二維陣列, 下面我們就以二維陣列為例, 來介紹如何使用多維陣列 I 二維陣列變數宣告一般的程式語言都是直接宣告幾列幾行即可宣告陣列的大小, 但是 JavaScript 卻不可以如此宣告, 他必須先行宣告陣列名稱, 再逐一宣告每一列例如, 以下敘述, 共含等 3 列, 且每一列的長度則是可變長度, 會依使用者的數量自動調配 var a=new Array(); a[0]=new Array(); a[1]=new Array(); a[2]=new Array(); 以上敘述, 亦可使用迴圈宣告如下 var a=new Array(); for (var i=0 ;i<=2 ;i++) a[i]=new Array(); I 二維陣列的存取以下敘述可以將第 0 列第 1 行這個陣列元素的值設定為 1 a[0][1]=1 以下敘述可以將第 0 列第 5 行這個陣列元素的值指派給變數 b b=a[0][5]; I 二維陣列的初始化

106 二維陣列亦可於宣告同時, 設定其初值例如, 假設有表格資料如下 : 則其 JavaScript 程式如下 : var b=new Array ([0,91,92,93,94], [1,81,82,83,84], [2,71,72,73,74]); 以上敘述, 亦可省略 new Array, 但應將小括號改為中括號, 如以下敘述 var b=[[0,91,92,93,94], [1,81,82,83,84], [2,71,72,73,74]]; 以上資料的索引值如下 : 0,0 0,1 0,2 0,3 0,4 1,0 1,1 1,2 1,3 1,4 2,0 2,1 2,2 2,3 2,4 例如, 以下敘述的結果是 91 document.write(b[0][1]); 以下敘述的結果是 73 document.write(b[2][3]); 範例 2_6_2a 假設有兩個矩陣如下 : 請以二維陣列儲存以上資料, 並求其相加的結果如下 : 執行結果

107 程式列印 <html> <head><title></title></head> <body onload="aa()"> </body> <script language="javascript"> function aa(){ var a=[[1,2,3],[4,5,6]]; var b=[[1,2,0],[2,1,3]]; var c =new Array(); c[0]=new Array(); c[1]=new Array(); //add for(i=0;i<=1;i++){ for(j=0;j<=2;j++){ c[i][j] = a[i][j] + b[i][j] ; //print a document.write("a:"+"<br>"); for(i=0;i<=1;i++){ for(j=0;j<=2;j++){ document.write( a[i][j]+" "); document.write( "<br>");

108 document.write( "<br>"); //print b document.write("b:"+"<br>"); for(i=0;i<=1;i++){ for(j=0;j<=2;j++){ document.write( b[i][j] +" "); document.write( "<br>"); document.write( "<br>"); //print c document.write("c:"+"<br>"); for(i=0;i<=1;i++){ for(j=0;j<=2;j++){ document.write( c[i][j] +" "); document.write( "<br>"); </script> </html> [ 自我練習 ] 1. 假設有矩陣如下 : 請以二維陣列儲存, 再將每一元素乘以 2 後輸出其次, 此矩陣共有幾個負數 2 設有矩陣如下 :

109 請以二維陣列儲存, 並求其轉置矩陣如下 : 範例 2_6_2b 假設有學生成績如下 : 座號姓名國文英文數學平均不及格科數 1 aa bb cc dd ee 平均 1. 請以二維陣列儲存以上資料 2. 計算每人平均 3. 統計每人不及格科數 4. 統計各科平均執行結果操作步驟 1 陣列初值設定如下 : var a=new Array([1,"aa",50,60,70,0,0],[2,"bb",30,40,50,0,0], [3,"cc",70,80,90,0,0],[4,"dd",66,77,88,0,0], [5,"ee",22,33,44,0,0],[" 平均 "," ",0,0,0,0,0]); 則其索引值如下 : 座號姓名國文英文數學平均不及格科數

110 程式列印 <html> <head><title></title></head> <body onload="aa()" > </body> <script language="javascript"> function aa(){ var a=new Array([1,"aa",50,60,70,0,0], [2,"bb",30,40,50,0,0], [3,"cc",70,80,90,0,0], [4,"dd",66,77,88,0,0], [5,"ee",22,33,44,0,0], [" 平均 "," ",0,0,0,0,0]); //average for(i=0;i<=5;i++){ sum =0; for(j=2;j<=4;j++){ sum+=a[i][j]; a[i][5] = Math.floor(sum / 3); // 不及格科數 for(i=0;i<=5;i++){ for(j=2;j<=4;j++){ if (a[i][j]<60){ a[i][6] = a[i][6] + 1 ; // 各科平均

111 for(i=2;i<=5;i++){ sum=0; for(j=0;j<=5;j++){ sum+=a[j][i]; a[5][i]=math.floor(sum/5); //print document.write ("<table border=1>"); for(i=0;i<=5;i++){ document.write("<tr>") ; for(j=0;j<=6;j++){ document.write("<td>") ; document.write( a[i][j] ); document.write("</td>") ; document.write("</tr>"); document.write ("</table>"); </script> </html> [ 自我練習 ] 1 同上範例, 但增加計算每科不及格人數每科最高分每科最低分 2 假設某一公司有三個業務員, 其每季的業績如下 : 編號第一季第二季第三季第四季和零的個數和零的個數 (1) 請以陣列儲存以上資料 (2) 計算每一個人的業績總和及零的個數 (3) 計算每一季的業績總和及零的個數 3 假設以下資料是張三預先買的八張樂透彩券號碼 : 編號

112 A 請以二維陣列儲存以上資料 B 請使用 7 個文書盒輸入開獎號碼, 七個號碼分別是 2,9,17,18,22,34,15,15 是特別號 C 請核對每張彩券的得獎情形, 並以表格輸出結果 4 請以二維陣列重作人與電腦猜拳 2_6_3 物件陣列前面的眾多資料可以使用陣列, 以縮短程式撰寫的長度, 那如果是許多物件, 是否可以使用陣列, 答案當然是肯定的例如, 下圖已經插入 5 張圖片物件 : 且其程式碼如下 : <html> <body> <p><img border="0" src="../g0.jpg" width="73" height="98"> <img border="0" src="../g1.jpg" width="72" height="99"> <img border="0" src="../g2.jpg" width="73" height="100"> <img border="0" src="../g3.jpg" width="74" height="99"> <img border="0" src="../g4.jpg" width="72" height="99"></p> </body> </html> 若我們將其 name 屬性都取相同, 例如, 本例均取 gra 如下 : <html> <body> <p><img name="gra" border="0" src="../g0.jpg" width="73" height="98">

113 <img name="gra" border="0" src="../g1.jpg" width="72" height="99"> <img name="gra" border="0" src="../g2.jpg" width="73" height="100"> <img name="gra" border="0" src="../g3.jpg" width="74" height="99"> <img name="gra" border="0" src="../g4.jpg" width="72" height="99"></p> </body> </html> 則以上 5 個物件即會以其出現的順序為索引, 分別是 gra[0] gra[1] gra[2] gra[3] gra[4] 請看以下範例說明範例 2_6_3a 請寫一網頁, 可以每次發 5 張樸克牌執行結果程式列印 <html> <script language="javascript"> var i,j; var d=new Array("g0.jpg","g1.jpg","g2.jpg","g3.jpg","g4.jpg","g5.jpg","g6.jpg","g7.jpg","g8.jpg","g9.jpg", ", "g10.jpg","g11.jpg","g12.jpg","g13.jpg","g14.jpg","g15.jpg","g16.jpg","g17.jpg","g18.jpg","g19.jpg ", "g20.jpg","g21.jpg","g22.jpg","g23.jpg","g24.jpg","g25.jpg","g26.jpg","g27.jpg","g28.jpg","g29.jpg ", "g30.jpg","g31.jpg","g32.jpg","g33.jpg","g34.jpg","g35.jpg","g36.jpg","g37.jpg","g38.jpg","g39.jpg ", "g40.jpg","g41.jpg","g42.jpg","g43.jpg","g44.jpg","g45.jpg","g46.jpg","g47.jpg","g48.jpg","g49.jpg "g50.jpg","g51.jpg") ;

114 function aa() { var r; for (i=0;i<=4;i++) { r=math.floor (Math.random ()*52); gra[i].src="../"+d[r];// 表示圖檔放在程式所在資料夾的上一層 </script> <body> <img name="gra" border="0" src="../g0.jpg" width="73" height="98"> <img name="gra" border="0" src="../g1.jpg" width="72" height="99"> <img name="gra" border="0" src="../g2.jpg" width="73" height="100"> <img name="gra" border="0" src="../g3.jpg" width="74" height="99"> <img name="gra" border="0" src="../g4.jpg" width="72" height="99"> <form method="post" action="--webbot-self--"> <p><input type="button" value=" 換牌 " name="b1" onclick ="aa()" ></p> </form> </body> </html> 自我練習 1 請設計一網頁, 可以每次展示 5 張照片, 並可由使用者每按鈕一次更換 5 張照片 2 同上範例, 可以自動每秒輪轉五張照片 2_6_4 實例探討 I 泡沫排序法在一數列當中, 從第一筆資料逐一往後兩兩給予比較, 若前者大於後者, 則兩者交換 ( 本例由小而大排序, 若由大而小排序, 則當前者小於後者時, 兩者交換 ), 每次的比較與交換的結果均可得該數列的最大值於數列最右邊 ( 或末端 ) 所以, 若有 N 筆資料進行排序, 則應作 N-1 階次的逐一比較, 且每階次的逐一比較範圍均逐漸減一個, 此即為泡沫排序法 (Bubble Sort) 若有五筆資料, 則其排序過程如下 : 1. 將資料由左而右排列如下 :

115 1. 共有五筆資料 n=5, 共需進行四個階次的逐一比較, 每一階次都能將該階次的最大值移至最右邊, 四個階次的逐一比較細節說明如下 : (1) 從第一筆到第五筆兩兩比較, 若前者大於後者則兩者交換如下, 得最大值 9 於最右邊 9 已是最大值, 待會兒不必參與比較, 所以下一次只要從第一筆比較至第四筆即可 ( 索引從零開始 ) i=0 比較前 j=0, 1, 2, 3 比較次數比較四次比較後 (2) 從第一筆到第四筆兩兩比較, 若前者大於後者, 則兩者交換如下, 得次大值 8 於右邊 8 與 9 已達定位, 待會兒不用參與比較 i=1 比較前 j=0,1, 2 比較次數比較三次比較後 (3) 從第一筆資料到第三筆資料兩兩比較, 若前者大於後者則兩者交換如下, 得第三大值 7 於右邊 i=2 比較前 j=0, 1 比較次數比較二次比較後 (4) 從第一筆資料到第二筆資料兩兩比較, 若前者大於後者則兩者交換如下, 排序完成 i=3 比較前 j=0 比較次數比較一次比較後若有 N 筆資料, 則應作 N-1 階次的比較與交換, 每階次的比較範圍均逐漸縮小 [N-1, N-2,...,1], 其比較次數總計約為 [N*N]/2, 資料交換次數約為 [N*N]/4 3. 以上每次均找到一個最大值於右邊, 若將該次搜尋所得最大值與右邊位置交換, 則可大大減少資料交換次數, 且其比較次數不變仍為 [N*N]/2, 但其資料交換次數總計約為 N, 請讀者自行練習範例 2_6_4a

116 示範泡沫排序法執行結果程式列印 <script language=javascript> var a=new Array(8,9,7,1,2); var i,j,t,n=5; for (i=0;i<=n-2;i++) { for (j=0;j<=(n-1)-i;j++) { if (a[j]<a[j+1]) { t=a[j];a[j]=a[j+1];a[j+1]=t; for (i=0;i<=n-1;i++) document.write (a[i])+" "; </script> 程式說明本例採用泡沫排序法, 其演算法如下 : 1. 設有 n 筆資料進行排序 2. 應進行 n-1 階次尋找最大值, 並將最大值移至最右邊但是陣列索引從 0 開始, 所以 for (i=0;i<=n-2;i++) 3. 每一階次均應逐次尋找最大值, 並移至右邊, 且每階次的比較次數 j 與外迴圈 i 的關係為 i+j=n-1, 所以內迴圈的比較次數 j 為 n-1-i for (j=0;j<=(n-1)-i;j++) 4. 兩兩逐一比較, 若前者大於後者則兩者交換 if (a[j]<a[j+1]){ t=a[j];a[j]=a[j+1];a[j+1]=t; [ 自我練習 ]

117 1. 同上範例, 但每階次均尋找一個最大值, 且逐次與最大值交換即可 2 請將範例 2_6_2b 的輸出由大而小排序輸出 I 計數排序法前面的泡沫排序法是採用兩者比較並交換, 達到由小而大或由大而小排列的效果, 不過本節的計數排序法則不移動資料, 但增加一個名次欄位, 並依照分數的高低, 計算此欄位的值為了充份理解計數排序法的原理, 你先假想一個 N 位學生的教室裡, 每人均舉著自己的分數, 每一學生如何知道自己是第幾名呢? 有一個辦法就是每個人均數一數分數比自己高的人數再加一, 就是自己的名次, 但其比較次數還是 N*N, 所以若令他們排成一排, 由第一個逐一往右比較, 且分數低的, 令其名次加 1, 則第二個人之後就不必再與第一個比較同理, 第二個也是往右比較即可, 不必與第一二個人比較, 所以其總比較次數約為 [N*N]/2, 此即為計數排序法若有數列資料則其演算過程如下 : 1. 先假設每人均為第一名分數名次 * * * * * 2. 共有五筆資料, 分別以前四筆資料為基準往右比較 : (1) 以第一筆資料 8 為基準往右 ( 第二三四五筆 ) 比較, 分數低的名次加一, 則其名次如下, 第一筆資料 8 確定為第二名, 下次不用再參與比較分數名次 ** ** * ** ** (2) 以第二筆資料 2 為基準往右 ( 第三四五筆 ) 比較, 分數低的名次加一, 則其名次如下, 第二筆資料 2 確定為第四名, 下次不用再參與比較分數名次 ** **** * ** *** (3) 以第三筆資料 9 為基準往右 ( 第四五筆 ) 比較, 分數低的名次加一, 則其名次如下, 第三筆資料 9 確定為第一名, 下次不用參與比較分數名次 ** **** * *** **** (4) 以第四筆資料 7 為基準往右 ( 第五筆 ) 比較, 分數低的名次加一, 則其名次如下, 全部名次確定, 排序完成

118 分數名次 ** **** * *** ***** 3. 若有 N 筆資料, 則須作 N-1 階次的比較, 每階次的比較次數均逐漸縮小, 分別為 N-1, N-2,...,1, 故其總比較次數約為 [N*N]/2 範例 2_6_4b 示範計數排序法執行結果程式列印 <script language=javascript> var a=new Array(8,2,9,7,1); var b=new Array(5) var i,j,t,n=5; // 先設定大家都是第一名 for (i=0;i<=n-1;i++) b[i]=1; // 分數 (a[]) 少的人, 名次 (b[]) 加一 for (i=0;i<=n-2;i++) for (j=i+1;j<=(n-1);j++) if (a[i]>a[j]) b[j]++; else b[i]++; // 輸出分數 for (i=0;i<=n-1;i++) document.write (a[i]+" "); document.write ("<br>"); // 輸出名次 for (i=0;i<=n-1;i++) document.write (b[i]+" "); </script>

119 自我練習 1 請將範例 2_6_2b, 增加名次欄位, 並協助計算每人的名次, 輸出則由座號由小而大輸出 I 線性搜尋法於序列中, 從頭到尾逐一比對搜尋的方式, 稱為線性搜尋法例如, 一個班級有 40 人, 您要找一個洪國勝 " 的人, 那您就逐一從 1 號 2 號 3 號開始核對, 直到找到洪國勝 " 為止, 請看以下範例範例 2_6_4c 假設有員工電話如下, 請以陣列儲存, 並能輸入姓名而查得電話號碼編號姓名電話號碼 1 aa hh cc gg ff ii ee bb jj dd kk ll 操作步驟 1 請將以上資料以陣列儲存 2 輸入姓名 3 使用迴圈逐一比對執行結果 1. 如輸入 hh 傳回 aa 的電話號碼 2. 如輸入 ww 則傳回查無此人 " 程式列印 <html> <head><title></title></head>

120 <body > <form name="myform"> 輸入姓名 <input type="text" name="t1" value="hh"><br> 電話號碼 <input type="text" name="t2"><br> <input type="button" value=" 查詢 " onclick="aa()"> </form> </body> <script language="javascript"> var a=new Array (["",""],[ "aa", " "],[ "hh", " "], ["cc", " "],["gg", " "], ["ff", " "], ["ii", " "], ["ee", " "],[ "bb", " "], ["jj", " "], ["dd", " "],["kk", " "],["ll", " "]); function aa(){ var found=false; var txt=myform.t1.value; for(i=1;i<=12;i++){ if (a[i][0]==txt){ found=true; break; if(found){ myform.t2.value= a[i][1]; else{ myform.t2.value= " 查無此人 " ; </script> </html> I 二分搜尋法前面的線性搜尋法, 是採用逐一訪視的方式搜尋所要的資料, 但當資料量龐大時, 就顯得毫無效率舉例而言, 資料數量若有 1000 筆, 則採用線性搜尋法平均搜尋次數為 500 次, 但若採用本節所討論的二分搜尋法, 則至多不會超過 10 次 (2 10 =1024) 首先, 先將待搜尋資料排序, 然後將待搜尋的關鍵資料與已排序的中間值比較, 若中間值比待搜尋資料大, 則待搜尋資料必在此中間值的前面, 並調整搜尋上限範圍 ; 反之則在前面, 並調整搜尋下限範圍, 此時搜尋範圍已經縮小一半也就是二分搜尋法每次可將搜尋範圍減半, 如此對於資料量龐大

121 時, 可提高搜尋效率請看以下範例說明範例 2_6_4d 同上範例, 但使用二分搜尋法執行結果程式列印 <html> <body > <form name="myform"> 輸入姓名 <input type="text" name="t1" value="cc"><br> 電話號碼 <input type="text" name="t2"><br> <input type="button" value=" 查詢 " onclick="aa()"> </form> </body> <script language="javascript"> var a=new Array (["",""],[ "aa", " "],[ "hh", " "], ["cc", " "],["gg", " "], ["ff", " "], ["ii", " "], ["ee", " "],[ "bb", " "], ["jj", " "], ["dd", " "],["kk", " "],["ll", " "]); var n=12; //sort for(i=1;i<=n-1;i++){ for(j=1;j<=n-i;j++){ if (a[j][0]>a[j+1][0]){ t = a[j][0]; a[j][0]=a[j+1][0];a[j+1][0] = t; t = a[j][1]; a[j][1]=a[j+1][1];a[j+1][1] = t; function aa(){

122 var found=false; name=myform.t1.value; l = 1; u = 12; while(l<=u){ m = Math.floor((l + u)/2); if (a[m][0]==name){ found = true; break; else{ if(a[m][0]> name){ u = m - 1; else{ l = m + 1; // 只要下限小於上限即可重複迴圈 if(found){ myform.t2.value= a[i][1]; else{ myform.t2.value= " 查無此人 " ; </script> </html> 2_6_5 陣列方法前面已經介紹許多陣列的操作, 本節則要介紹一些陣列所提供的方法, 以提升程式撰寫效率 I length length 屬性可傳回陣列的長度例如, var a=new Array(2,8,4,7,3); document.write (a.length ); 其結果是 5 I tostring() tostring() 方法可將陣列內容轉為以逗號 (,) 隔開的字串例如, var a=new Array(2,8,4,7,3); document.write (a.tostring () );

123 的結果是 2,8,4,7,3 I sort sort() 方法可將陣列內容排序例如, var a=new Array(2,8,4,7,3); a.sort(); document.write (a.tostring () ); 的結果是 2,3,4,7,8 I reverse() reverse() 方法可將陣列內容反轉例如, var a=new Array(2,8,4,7,3); a.sort(); a.reverse (); document.write (a.tostring ()); 的結果是 8,7,4,3,2 習題 1. 設某班有 5 人, 每人有 3 科成績, 其所佔學分分別為 6 4 及 3, 如下表所示, 請以陣列的方式初設姓名座號及成績, 並計算其學分平均, 輸出請以表格的方式, 按照學分平均由高而低排列座號姓名國文 6 英文 4 數學 3 學分平均名次 1 aa bb cc dd ee 不及格人數 2. 同上題, 增加名次欄位統計各科不及格人數及每人不及格科數, 且按照原欄位順序輸出 3. 假設 T 分數的轉換公式如下 :

124 n (1) 求平均 d = ( Ai) / n (Ai 為每人成績,n 為全班人數 ) i= 1 (2) 求標準差 sd = n ( Ai d) i= 1 n 2 (d 為平均 ) Ai d (3) 求每人 Z 分數 Zi = (Zi 為每人的 Z 分數 ) sd (4) 求每人 T 分數 Ti = * Zi (Ti 為每人的 T 分數 ) 請產生 100 個 1 至 100 的亂數, 其平均分數為何? 請依以上程序將每人成績轉為 T 分數, 列印如下, 並觀察名次 50 的人平均為何? 又 T 分數與名次的關係為何? 座號原始成績 T 分數名次請寫一程式, 可以輸入姓名, 而查得班上同學的電話, 亦可輸入電話號碼而查得其姓名 ( 提示 : 使用陣列預儲姓名與電話 ) 4 請設計一網頁, 滿足以下條件 A 某次考試共 10 題, 假設正確答案如下, 請用陣列儲存 : 1,4,2,4,2,3,3,3,1,1 B 某班共 5 人, 其答案如下, 請用陣列儲存, 請核對其成績 C 請統計每人分數 D 統計以下區間的人數區間人數 90~10 80~89 79~79 60~69 50~59 0~49

125 5 試寫一魔術矩陣程式, 例如輸入 3 得下圖左, 輸入 5 得下圖右 ( 請用表格輸出 ) 提示 : 本例演算分析如下 : 規則 1: 在第一列 (Row) 中間行 (Column) 的位置設定值為 1, 然後按照其相鄰的東北方向位置擺進下一個數值, 如下圖 1 規則 2: 根據規則 1 推算的位置, 若該位置超過了列的界限, 則列的位置為最大列的相對應位置如下圖的 2, 其列已超界, 移至最下面一列 1 規則 3: 根據規則 1 推算的位置, 若該位置超過了行的界限, 則其位置為最小行的相對應位置如下圖的 3, 其行已超界, 所以移至最左邊規則 4: 根據規則 1, 推算位置的所在, 已被其他值所佔, 則以原位置為基準, 將下一個數字擺於原位置的下一列的相同行之位置如下圖的 4, 原位置已被 1 佔去, 所以擺在 3 的下面 2

126 一列規則 5: 當行與列都超過界, 則採用規則 2 和規則 3 的綜合法則, 但因該位置已被佔有, 故再以規則 4 處理之如下圖左的 7 最後結果如下圖 _7 方法在程式設計時, 常會遇到某些程式片段需要在同一程式重覆出現許多次, 如果這些程式片段都分別在每個地方寫一次, 那是一件非常浪費時間的事, 且會使程式變得冗長而不易閱讀更糟的是, 萬一要調整此程式片段的部份功能, 更要至不同的地方修改, 造成程式維護的困難, 此時可透過本章所要介紹的方法 " 解決以上困難方法的使用方式為將常用的程式片段賦予一個名稱, 此稱為方法名稱, 寫在程式的最前面或最後面, 當程式設計者需要使用此程式片段時, 只要鍵入此方法名稱, 即可執行此程式片段 2_7_1 自訂方法自訂方法的語法如下 : function 方法名稱 ( 參數列 ) { 敘述區塊 ; [return 傳回值 ];

127 m! 例如, 若要計算 C m = 的組合運算, 因為階乘的運算共要 3 次, 此時可事先將階乘 n n!*( m n)! (m!) 運算寫成方法如下 : function sum(p) { var s=1,i; for (i=1;i<=p;i++) s=s*i; return s; 則於主程式即可使用 sum( 參數 ), 執行此方法例如, m1=sum(3); 則 m1 即可得 6 範例 2_7_1a 計算執行結果 C m n m! = 的組合運算, 但使用 function n!*( m n)! 程式列印 <html> <head> <script language =javascript > function sum(p) { var s=1,i; for (i=1;i<=p;i++) s=s*i; return s;

128 function aa() { var m,n,a; var m1,n1,mn; // 輸入 m=eval(myform.t1.value); n=eval(myform.t2.value); // 處理 m1=sum(m); n1=sum(n); mn=sum(m-n); a=m1/(n1*mn); // 輸出 myform.t3.value=a; </script> </head> <body> <form name="myform" method="post" action="--webbot-self--"> <p><input type="text" name="t1" size="10" value=4></p> <p><input type="text" name="t2" size="10" value=2></p> <p><input type="button" value=" 執行 " name="b1" onclick="aa()"></p> <p><input type="text" name="t3" size="20"></p> </form> </body> </html> [ 自我練習 ] 1 f(x)=2*x 2 +3x+1, 請寫一程式, 可以將 f(x) 寫成 Function, 且 f(0)=1 f(1)=6 2 f(x,y)=3x 2 +xy-6y 2, 請寫一程式, 可以將 f(x,y) 寫成 function, 且 f(0,1)=-4 f(1,1)=-2 3 請寫一個程式, 使用 function, 計算 1!+2!+3!+4!+5! 之值 4 請寫一個程式, 使用 function, 計算下表借貸金額與年利率所對應每月應還的利息 2% 3% 4% 5% 100 萬 200 萬 300 萬 400 萬

129 範例 2_7_1b 請使用 function 完成下表借貸 1 元的複利計算每年複每月複利 1 每日複利 1 次每時複利 1 次每分複利 1 次利 1 次次公 (1+1)^1 (1+1/12)^12 (1+1/365)^365 (1+/(365*24))^(365*24) (1+1/(365*24*60))^(365*24*60) 式是否可回答, 當每秒都在複利時, 則其本利和會趨近於何值? 執行結果程式列印 <html> <head><title></title></head> <body onload="aa()"> </body> <script language="javascript"> function aa(){ var a=[]; a[1] = 1; a[2] = 12; a[3] = 365; a[4] = 365 * 24; a[5] = ; var b= new Array (""," 每年複利一次 : "," 每月複利一次 :"," 每時複利一次 :"," 每分複利一次 :"," 每秒複利一次 :"); for(i=1;i<6;i++){ c = sum(a[i]); document.write( b[i]+c + "<br>" ); function sum(p){ sum2 = Math.pow( (1 + 1 / p), p); return sum2 ; </script>

130 </html> 遞迴所謂遞迴就是方法自己呼叫自己在程式設計的領域裏, 有許多情況使用遞迴可以減輕程式設計的負擔, 並增加程式的可讀性, 就如同人類日常思考模式常有重覆某一件事直到什麼條件時結束所以遞迴也是一種特殊的迴圈敘述, 尤其數值分析的問題用得最多範例 2_7_1c 若 f(n)=1 if n=1 =n+f(n-1) if n>1 請寫一程式計算 f(n) 之值程式列印 <html> <body> <form name="myform"> <input type="text" name="t1"><br> <input type="button" value=" 顯示 " onclick="aa()"> </form> </body> <script language="javascript"> function aa(){ d = f(4); myform.t1.value=d; function f(m){ if (m==1){ return 1; else{ return (m+f(m-1)); </script> </html>

131 程式說明以 d=f(4) 解說 m=4 執行 else f=4+f(3) 繼續呼叫 f 方法 m=3 執行 else f=4+3+f(2) 繼續呼叫 f 方法 m=2 執行 else f=4+3+2+f(1) 繼續呼叫 f 方法 m=1 執行 return 1; 已經可得 1, 此時 f= , 而且可離開 f 方法自我練習請以遞迴法求 n!, 且 n 可任意輸入範例 2_7_1d 費氏數列的定義如下 : f(n)=1 if n<3 f(n)=f(n-2)+f(n-1) if n >=3 請以以遞迴法求費式數列的第 n 項程式列印 <html> <head><title></title></head> <body onload="aa()"> </body> <script language="javascript"> function aa(){ k=number(prompt(" 輸入欲求費式數列第幾項 ",5)); d=fib(k); document.write( "f("+k+")="+d); function fib(k){ if (k<=2){ return 1; else{ return fib(k-1)+fib(k-2); </script> </html> 程式解說本例以 d=fib(5) 解說如下 : fib(5)=fib(4)+fib(3) =fib(3)+fib(2)+fib(3)

132 =fib(2)+fib(1)+1+fib(3) =1+1+1+fib(2)+fib(1) = ( 已無方法並結束遞迴 ) =5 範例 2_7_1e 試以遞迴法求輸入兩數的最大公因數 (Gcd) 提示 :gcd(a,b)= a if b=0 =gcd(b,a % b) if b >0 輸出結果程式列印 <html> <body> <form name="myform"> 輸入 a <input type="text" name="t1" value=21><br> 輸入 b <input type="text" name="t2" value=12><br> GCD = <input type="text" name="t3" size="20"><br> <input type="button" value=" 求解 GCD " onclick="aa()"> </form> </body> <script language="javascript"> function aa(){ var t,a,b; a = Number(myform.t1.value); b = Number(myform.t2.value); if (b > a){ t = a; a = b; b = t; // 交換 c = gcd(a,b); myform.t3.value = c; function gcd(a,b){ if (b==0){ return a;

133 else{ return gcd(b,a%b); </script> </html> I 參數列與傳回值 JavaScript 對於參數的傳遞有兩種方式, 分別是傳值呼叫 (Call By Value) 與傳址呼叫 (Call By Reference), 分別說明如下 : II 傳值呼叫如果參數的資料型態是數值字串或布林值時就採用傳值呼叫, 傳值呼叫只將來原變數的值傳給方法其次, 方法中的目的變數若有任何變動並不會回傳來源變數例如, 若有方法如下, 此方法的目的變數已經被修改, 但是其值並不會回傳主程式 function aa(a,b) { a=3;b="kk"; 其次, 其主程式如下 : var p=2,q="dd"; aa(p,q); document.write (p,q); 則 p 與 q 的結果還是 2 與 dd II 傳址呼叫如果參數的資料型態是陣列或物件時就採用傳址呼叫, 傳址呼叫將來源變數的值傳給方法其次, 方法中的目的變數若有任何改變都會回傳來源變數例如, 若有方法如下, 此方法的目的變數已經被修改, 則此修改值將會回傳主程式 function bb(c){ for ( i=0 ;i<=3;i++) c[i]=c[i]*2; 其次, 其主程式如下 : var r=new Array(1,2,3,4); bb(r); document.write (r.tostring()); 則因為 r 的型態是陣列, 不僅可將其值傳給方法, 方法中的改變值亦回傳主程式所以其值

134 是 2,4,6,8 範例 2_7_1f 示範以上參數列的傳遞執行結果程式列印 <html> <body> <script language =javascript > function aa(a,b) { a=3;b="kk"; function bb(c) { for ( i=0 ;i<=3;i++) c[i]=c[i]*2; var p=2,q="dd"; aa(p,q); document.write (p,q); document.write ("<br>"); var r=new Array(1,2,3,4); bb(r); document.write (r.tostring()); </script> </body> </html> 自我練習 1 請以遞迴重做二分猜值法, 求某數的平方根 2 請以遞迴重做二分猜值法, 求某數的立方根 3 請以遞迴重做除法, 例如 8/3 等於 2 於 2 ( 被除數一直減去除數 ) 2_7_2 數值處理 JavaScript 關於數值的處理提供 Math 及 Number 等物件, 請看以下說明

135 I Math Math 物件提供許多方法, 可協助處理一些數值運算, 請看以下說明 II abs(x) abs(x) 方法可傳回 x 的絕對值例如, 以下敘述傳回 3 document.write(math.abs(-3)); II floor(x) floor(x) 方法可傳回小於等於 x 的最大整數例如, 以下敘述傳回 3 Math.floor(3.2); 以下敘述則傳回 -4 Math.floor(-3.2); II ceil(x) ceil(x) 方法可可傳回大於等於 x 的最小整數例如, 以下敘述傳回 4 Math.ceil(3.4); 以下敘述則傳回 -3 Math.ceil(-3.4); II round(x) round(x) 方法可傳回四捨五入的結果例如, 以下敘述傳回 4 Math.round(3.5); II random() random() 方法可傳回大於等於 0 且小於 1 的實數亂數, 若要得到整數亂數, 則要少許運算例如, 以下敘述可傳回 1 到 6 之間的整數亂數 Math.floor(Math.random()*6)+1; II sqrt(x) sqrt(x) 可傳回 x 的平方根例如, 以下敘述傳回 2 Math.sqrt(4); II pow(m,n) pow(m,n) 可傳回 m 的 n 次方例如, 以下敘述傳回 8 Math.pow(2,3); 以下敘述則傳回 2 Math.pow(8,1/3);

136 II max(m,n) max(m,n) 傳回 m 與 n 的極大值例如, 以下敘述傳回 4 Math.max(3,4); II min(m,n) min(m,n) 傳回 m 與 n 的極小值例如, 以下敘述傳回 3 Math.min(3,4); I Number 輸出數值資料時, 若要控制其輸出格式, 例如, 轉為字串小數點後面取幾位數或科學符號表示時, 此時可使用 Number 物件所提供的方法以下將介紹一些 Number 物件常用的方法 II tostring() 將數值轉為字串例如, var x=2;var y=3; document.write(x+y+"<br>");//5 document.write(x.tostring()+y.tostring()); //23 II tofixed(m) tofixed(m) 可控制小數點後面取幾位例如, 以下敘述傳回小數點後面取兩位, 所以結果是 var a= ; document.write(a.tofixed(2)+"<br>"); II toprecision(m) toprecision(m) 可將原數值以科學符號法表示, 且有效位數 m 位例如, 以下敘述有效位數取 3 位, 所以結果是 1.23e+4 var a= ; document.write(a.toprecision(3)+"<br>"); II toexponential(m) toexponential(m) 可將原數值以科學符號法表示, 且小數部分取 m 位例如, 以下敘述小數部分取 2 位, 所以結果是 1.23e+4 var a= ; document.write(a.toexponential(2)+"<br>"); 範例 2_7_2a 請設計一網頁, 可以和電腦比賽擲兩顆骰子, 並可累計勝負的次數執行結果

137 程式列印 <html> <head> <script language =javascript > function aa(){ var a,b; var a1,a2; var b1,b2; var r; a1=1+math.floor(6*math.random());// 產生 1 到 6 的亂數 a2=1+math.floor(6*math.random()); a=a1+a2; b1=1+math.floor(6*math.random()); b2=1+math.floor(6*math.random()); b=b1+b2; if (a> b) r="people win"; else if (a==b) r="equal"; else r="computer win"; myform.t1.value=a1.tostring()+" "+a2.tostring()+" "+a.tostring(); myform.t2.value=b1.tostring()+" "+b2.tostring()+" "+b.tostring(); myform.t3.value =r; </script> </head> <body> <form name ="myform" method="post" action="--webbot-self--"> <p> 擲骰子遊戲 </p>

138 <p><input type="button" value=" 確定 " name="b1" onclick="aa()"> 人 <input type="text" name="t1" size="7"> 電腦 <input type="text" name="t2" size="8"></p> <p> 結果 <input type="text" name="t3" size="20"></p> <p> </p> </form> </body> </html> 範例 2_7_2b 請設計一網頁, 可以模擬樂透的開獎與對獎假設開獎號碼是 1 到 42 號, 請使用 7 個文字方塊輸出開獎情形, 其次, 有 6 個文字方塊可輸入使用者購買的號碼, 最後請安排兩個按鈕分別是開獎與對獎執行結果程式列印 <html> <head> <script language ="JavaScript" > // 開獎 var b =new Array(6); var sn; function aa(){ var a =new Array(); var i,j; // 放入彩球 for (i=0;i<=41;i++) a[i]=i+1;

139 // 滾動彩球 for (i=0;i<=41;i++) { j=math.floor(42*math.random()); t=a[i];a[i]=a[j];a[j]=t; // 前面 6 個球即為開獎號碼, 第七球是特別號 for (i=0 ;i<=5;i++) b[i]=a[i]; sn=a[6];//special number b.sort(); myform.t1.value =b[0]; myform.t2.value =b[1]; myform.t3.value =b[2]; myform.t4.value =b[3]; myform.t5.value =b[4]; myform.t6.value =b[5]; myform.t7.value =sn;// 特別號 myform.t8.value =b[0]; myform.t9.value =b[1]; myform.t10.value =b[2]; myform.t11.value =b[3]; myform.t12.value =b[4]; myform.t13.value =b[5]; // 對獎 function bb(){ var c =new Array(); var i,j; var special; var d=0; // 相同號碼個數 var e=" 槓龜 "; c[0]=eval(myform.t8.value); c[1]=eval(myform.t9.value); c[2]=eval(myform.t10.value); c[3]=eval(myform.t11.value); c[4]=eval(myform.t12.value); c[5]=eval(myform.t13.value); // 統計中獎球數

140 for (i=0 ;i<=5;i++) for (j=0 ;j<=5;j++) if (b[i]==c[j]) d++; special=false; for (i=0 ;i<=5;i++) if (c[i]==sn) special=true; switch (d){ case 6: e=" 頭獎 "; break; case 5: if (special){ e=" 貳獎 "; break; else { e=" 參獎 "; break; case 4: e=" 肆獎 " ; break case 3: e=" 伍獎 "; break; myform.t14.value =e; </script> </head> <body> <p> 樂透開獎與對獎 </p> <form name="myform" method="post" action="--webbot-self--"> <p><input type="button" value=" 開獎 " name="b1" onclick="aa()"></p>

141 <p><input type="text" name="t1" size="5"><input type="text" name="t2" size="5"><input type="text" name="t3" size="6"><input type="text" name="t4" size="6"><input type="text" name="t5" size="6"><input type="text" name="t6" size="5"> 特別號 <input type="text" name="t7" size="6"></p> <p> 請輸入您的號碼 </p> <p><input type="text" name="t8" size="6"><input type="text" name="t9" size="5"><input type="text" name="t10" size="6"><input type="text" name="t11" size="5"><input type="text" name="t12" size="6"><input type="text" name="t13" size="6"></p> <p><input type="button" value=" 對獎 " name="b2" onclick="bb()" > 結果是 <input type="text" name="t14" size="20"></p> </form><p> </p> </body> </html> 自我練習 1 請設計一網頁, 可以模擬樸克牌的洗牌, 並發給使用者 13 張牌其次, 為了方便使用者玩 13 支的遊戲, 請分別再安排兩個按鈕, 將輸出方式分為不分花色與分花色排序輸出 (PS: 本例共需 3 個按鈕, 分別是發牌不分花色排序分花色排序 ) 2 同上自我練習, 但可將此牌分給 4 個人, 並可依以下方式顯示 A 依發牌順序顯示 B 依牌面大小顯示 C 先依花色, 再依排面大小顯示 3 請寫一程式, 可以重複產生並輸出 0 到 99 的亂數, 直到有數字重複時停止, 並輸出亂數的個數及此重複數字 4 假設以下資料是張三預先買的八張樂透彩券號碼 : 編號 C 請以二維陣列儲存以上資料 D 開獎開獎的方式有兩種, 分別是手工鍵入開獎號碼與電腦自動開獎, 並使用 7 個文書

142 盒輸輸出開獎號碼 E 請核對每張彩券的得獎情形, 並以表格輸出結果 2_7_3 字串處理在程式的撰寫過程中, 常會遭遇字串的問題例如, 字串轉數值求字串的長度字串的相加字串的比對字串的大小寫轉換等, 以上這些問題, 因為經常會碰到, 所以 JavaScript 提供 String 物件, 內含許多字串處理方法, 以方便使用者使用, 本節的重點即是介紹這些字串處理方法 I String 物件 String 物件的常用方法如下 : II eval() 將字串格式轉為數值例如, x1=eval(myform.t1.value); // myform.t1.value ="3" y1=eval(myform.t2.value);// myform.t1.value="4" myform.t3.value=x1+y1; // 結果是 7 結果是 7, 但是 x1=myform.t1.value; // myform.t1.value ="3" y1=myform.t2.value;// myform.t1.value="4" myform.t3.value=x1+y1; // 結果是 34 結果是 34 II Number 將字串格式轉為數值, 其功能同 eval II 字串連結運算子字串連結運算子為 +", 例如, var s1="mary"; var s2="tom"; var s3=s1+s2; document.write(s3); 結果是 MaryTom II 文字修飾 String 的修飾文字的常用方法如下表 : 方法名稱 blod() 說明轉為粗體

143 fontcolor( color ) 設定顏色 fontsize(size) 設定字型大小 italics() 轉為斜體字 strike() 加上刪除線 sub() 下標字 sup() 上標字 tolowercase() 轉為小寫 touppercase() 轉為大寫例如, var a=new String( Mary ); document.write (a.bold()); 或 var a= Mary ; document.write (a.bold()); 都可將 Mary 以粗體輸出其次, 以上字串輸出方法可用點運算子同時加到同一字串, 例如, 以下敘述同時設定字體大小顏色及斜體 var a="mary"; document.write (a.fontsize(6).fontcolor("blue").italics ()); II tostring() 將數值或時間格式轉為字串格式例如, var x=2; var y=3; document.write(x+y); // 結果是 5 document.write(x.tostring()+y.tostring()); // 結果則是 23 II length 字串長度屬性例如, 以下敘述傳回 4 var a="mary"; document.write(a.length); II charat(n) charat(n) 可取字串的第 n 個字元, 字串索引從 0 開始例如, 以下敘述傳回 2 a="012345"; document.write (a.charat(2)); II match( string ) 字串比對方法若包含預比對的字串, 則傳回該字串, 否則傳回 null 例如, 以下敘述的結果是 is a="this is a book";

144 document.write (a.match("is")); 以下敘述的結果則是 null a="this is a book"; document.write (a.match("are")); II search( string ) 字串搜尋方法若包含要搜尋的字串, 則傳回該字串的啟始位置 ( 字串起始位置索引為 0), 否則傳回 -1 例如, 以下敘述的結果是 8 a="this is a book"; document.write (a.search("a")); 以下敘述的結果則是 -1 a="this is a book"; document.write (a.search("are")); II replace( string1, string2 ) 將找到的 string1 取代為 string2, 但原字串並沒有改變例如, a="this is a book "; b=a.replace("book","apple"); document.write(b); 的輸出結果是 This is a apple 但是原字串的內容並沒有改變, 也就是以下敘述的結果還是 This is a book document.write(a); II split(string) 字串分割方法將原字串以 string 為分割依據, 將原字串轉為一個 Array 物件例如, 以下敘述的結果是 This 讀者可自行據此研究英翻中程式, 應用範例請看範例 2_10b a="this is a book" var b=a.split(" "); document.write(b[0]); II substr(index,length) 將原字串從 index 開始, 取 length 長度的字元例如, 以下敘述的結果是 BC ( 字串索引從 0 開始 ) a="abcde" b=a.substr(1,2); document.write(b);

145 II substring(index1,index2) 取出 index1 到 index2( 不含 ) 之間的子字串例如, 以下敘述的結果是 BC ( 字串索引從 0 開始 ) a="abcde" b=a.substring(1,3); document.write(b); II slice(index1,index2) 將 index1 之前 ( 不含 index1) 到 index2 之後 ( 包含 index2) 的字元刪除例如, 以下敘述的結果是 BC ( 字串索引從 0 開始 ) a="abcde"; b=a.slice(1,3); document.write(b); 範例 2_7_3a 請寫一程式, 可以執行統一發票的對獎, 本例假設統一發票只有 6 碼, 且只有一組中獎號碼例如, 1 後面 6 個號碼相同, 中頭獎 2 後面 5 個號碼相同, 中二獎 3 後面 4 個號碼相同, 中三獎 4 後面 3 個號碼相同, 中四獎執行結果程式列印 <html> <head> <script language ="JavaScript" > function aa(){ a=myform.t1.value; b=myform.t2.value; c=" 槓龜 "; if (a==b)

146 c=" 頭獎 "; else if (a.substring(1,6)==b.substring(1,6)) c=" 貳獎 "; else if (a.substring(2,6)==b.substring(2,6)) c=" 參獎 "; else if (a.substring(3,6)==b.substring(3,6)) c=" 肆獎 "; myform.t3.value=c; </script> </head> <body> <form name="myform" method="post" action="--webbot-self--"> <p> 統一發票頭獎號碼 <input type="text" name="t1" size="20" value="012345"></p> <p> 輸入您的發票號碼 <input type="text" name="t2" size="20" value="012345"></p> <p><input type="button" value=" 對獎 " name="b1" onafterupdate onclick="aa()"> 結果是 : <input type="text" name="t3" size="20"></p> </form><p></p> </body> </html> 自我練習 1 同上範例, 但是頭獎號碼有 5 組範例 3_7_3b 請寫一程式, 可以核對兩個字串相同的程度, 數字與位置相同定義為 A, 數字相同, 位置不同定義為 B 例如, 字串 1 字串 2 比對結果 A0B A2B A4B 執行結果

147 程式列印 <html> <head> <script language ="JavaScript" > function aa(){ c=myform.t1.value; d=myform.t2.value; r=" 槓龜 "; a=0; b=0; for (i=0 ;i<=3;i++){ for (j=0;j<=3;j++) { c1=c.substr(i,1); d1=c.substr(j,1); if (c1==d1) b++; for (i=0 ;i<=3;i++){ c1=c.substr(i,1); d1=d.substr(i,1); if (c1==d1) a++; b=b-a; myform.t3.value=a.tostring()+" A "+ b.tostring()+" B"; </script> </head> <body> <form name="myform" method="post" action="--webbot-self--">

148 <p> 字串 1<input type="text" name="t1" size="20" value="6341"></p> <p> 字串 2<input type="text" name="t2" size="20" value="6341"></p> <p><input type="button" value=" 字串比對 " name="b1" onafterupdate onclick="aa()"> 結果是 :<input type="text" name="t3" size="6"></p> </form><p> </p> </body> </html> 自我練習 1 請設計一網頁, 讓標籤內文字自旋 2 請設計一網頁, 模擬走馬燈的功能 3 請設計一網頁, 可以找出指定字所出現的次數例如, 輸入 This is a book. My name is Hank 且詢問 is 出現的次數, 則輸出為 2 4 請設計一網頁, 可以讓使用者完 AB Game 遊戲步驟如下 : A 電腦產生一個四位數, 且所有數字不能重複的四位數, 例如不能 0123( 不是四位數 ) 不能 2808( 數字重複 ) B 使用者輸入所臆測的數字 C 電腦回應 A 與 B 的數目 D 使用者繼續猜, 直到猜到電腦原先的四位數 2_7_4 時間 JavaScript 與時間有關的物件, 常用的有 Date 與 window 物件, 分別說明如下 : I Date 物件 Date 物件可用來設定與取得系統的的日期與時間, 使用前應先宣告如下 : var d =new Date(); 往後即可使用 d 存取其屬性與方法, 以下是一些常用的方法取得方法設定方法說明 getfullyear() setfullyear(year,[month],[date]) 取得或設定年月日 getmonth() setmonth(month) 取得或設定月 getdate() setdate(date) 取得或設定日 (1~ 31) getday() 取得星期值, 範圍是 0~6,0 表示星期日 ) gethours() sethours(hour,[minutes],[seconds],[millisecond]) 設定或取得時分秒 getminutes() setminutes(minutes) 設定或取得分

149 getseconds() setseconds(seconds) 設定或取得秒 gettime() settime(time) 設定或取得從 1970 年 1 月日 0 時 0 分 0 秒到現在所經過的毫秒數 tostring() 轉為字串格式 todatestring() 轉為日期格式 totimestring() 轉為時間格式例如, 以下敘述可取得現在的日期與時間 var d=new Date(); document.write(d+"<br>"); 以下敘述可取得現在的年份 var d=new Date(); document.write(d.getfullyear()+"<br>"); 以下敘述可設定 d 物件的年月日 var d=new Date(); d.setfullyear(2002,3,2); document.write (d.getmonth()+"<br>"); //3 II 時間的差額兩個時間物件相減的結果會傳回其毫秒數差例如, 以下敘述將傳回 6, 代表相差 6 天 var d1=new Date(2008,3,2); var d2=new Date(2008,3,8); var a; a=d2-d1; document.write(a/(24*60*60*1000)+"<br>");// 將毫秒數轉為日數範例 2_7_4a 停車場計費假設某一停車場第一小時 60 元, 不足一小時以一小時計, 往後每半時為 20 元, 且不足半小時以半小時計, 請寫一網頁可以協助管理此停車場的計費網頁執行結果程式列印 <html> <body> <script language =javascript > var d1=new Date(2008,3,2,8,0);//8 點

150 var d2=new Date(2008,3,2,9,0); //9 點 var d2=new Date(2008,3,2,9,1); //9 點 1 分 var d2=new Date(2008,3,2,9,31); //9 點 31 分 var a=d2-d1; // 時間差, 單位是毫秒 var b=a/(1000*60);// 將毫秒轉為分鐘 document.write (b+" 分鐘 "+"<br>"); if (b<=60) c=60; else c=60+math.ceil((b-60)/30)*20; document.write (c+" 元 "+"<br>"); </script> </body> </html> 範例 2_7_4b 銀行活儲利息計算假設銀行的活儲利息是以每日餘額乘以日利率且累加每日的利息假設某一客戶的來往資料如下, 年利率為是百分之二, 請寫一網頁, 計算該客戶 6 月 20 日的利息所得 ( 提示 : 請用陣列儲存以下資料 ) 執行結果日期餘額 2007/4/ /4/ /5/ 程式列印 <html> <body> <script language =javascript > var d1=new Date(2008,4,5);//2008/4/5 var d2=new Date(2008,4,27); var d3=new Date(2008,5,20); var d4=new Date(2008,6,20); // 宣告二維陣列 var a=new Array(); for (var i=0 ;i<=3 ;i++) a[i]=new Array();

151 // 儲存初值 a[0][0]=30000;a[0][1]=d1; a[1][0]=40000;a[1][1]=d2; a[2][0]=20000;a[2][1]=d3; a[3][0]=20000;a[3][1]=d4 //var b=a[1][1]-a[0][1]; // 時間差, 單位是豪秒 //var c=b/(1000*60*60*24);// 將毫秒轉為日數 //document.write (c+" 天 "+"<br>"); var e=0.02; // 年利率 f=e/365; // 日利率 var c; // 日數 var s=0 ;// 利息 for (var i=1;i<=3;i++) { b=a[i][1]-a[i-1][1]; // 時間差, 單位是豪秒 c=b/(1000*60*60*24); // 將毫秒轉為日數 s=s+a[i-1][0]*c*f; document.write (" 利息共 "+Math.round(s,1)+" 元 "+"<br>"); </script> </body> </html> 補充說明 1 計算兩個日期所經過的天數如下 : var d1=new Date(2008,4,5);//2008/4/5 日期 1 var d2=new Date(2008,4,27); // 日期 2 a[0][0]=30000;a[0][1]=d1; a[1][0]=40000;a[1][1]=d2; var b=a[1][1]-a[0][1]; // 時間差, 單位是毫秒 var c=b/(1000*60*60*24);// 將毫秒轉為日數 document.write (c+" 天 "+"<br>"); 範例 2_7_4c 請設計一網頁, 一直顯示使用者開啟網頁所經過的秒數程式列印 <html> <script language =javascript > var t=0; function bb()

152 { t++; window.status=" 您已經開啟 "+t +" 秒 "; </script> </head> <body onload=setinterval("bb()",1000) > </body> </html> II 日期的檢查若某一網頁有其顯示的截止日期, 此時即可利用兩個時間物件的大小關係, 判斷是否顯示例如, 以下敘述傳回 true var d1=new Date(2008,3,2); var d2=new Date(2008,3,8); var b; b=d2 > d1; document.write (b+"<br>"); 範例 2_7_4d 請寫一網頁, 可以顯示以下報名公告, 當超過截止日期時, 則以另一顏色顯示 ( 提示 : 請用陣列儲存以下資料 ) 標題截止日期台大研究所報名 2008/3/2 交大研究所報名 2008/3/20 元智大學研究所報名 2008/4/2 執行結果程式列印 <html> <body> <script language =javascript >

153 var d0=new Date(2008,3,17,17); // 今天日期 var d1=new Date(2008,3,2,17);//2008/4/5 var d2=new Date(2008,3,20,17); var d3=new Date(2008,4,2,17); window.status =" 今天日期 :"+d0.tolocaledatestring (); // 宣告二維陣列 var a=new Array(); for (var i=0 ;i<=3 ;i++) a[i]=new Array(); a[0][0]=" 台大 ";a[0][1]=d1; a[1][0]=" 交大 ";a[1][1]=d2; a[2][0]=" 元智 ";a[2][1]=d3; //print document.write ("2008 研究所報名截止日期 "+"<br>") document.write (" 今天日期 :"+d0.tolocaledatestring ()); document.write ("<table border=1>"); document.write("<td>") ; document.write( " 校名 " ); document.write("</td>") ; document.write("<td>") ; document.write( " 截止日期 " ); document.write("</td>") ; for(i=0;i<=2;i++){ if ( a[i][1] < d0 ){ // 表示逾期 document.write("<tr>") ; for(j=0;j<=1;j++){ // 紅色粗體 document.write("<td>") ; document.write( a[i][j].tolocalestring ().bold().fontcolor ("red") ); document.write("</td>") ; document.write("</tr>");

154 else{ // 以正常顏色與字體顯示 document.write("<tr>") ; for(j=0;j<=1;j++){ // 正常字體 document.write("<td>") ; document.write( a[i][j].tolocalestring ()); document.write("</td>") ; document.write("</tr>"); document.write ("</table>"); </script> </body> </html> I window 物件 window 物件提供 settimeout() 及 setinterval() 等方法, 可協助有關計時等應用, 請看以下說明 II settimeout() settimeout() 的語法如下 : settimeout( 方法,t) 其中 t 是等候時間 t, 也就是等候 t 毫秒後執行指定的方法例如, 以下敘述是停頓 2 秒後執行 dd() 方法 settimeout( dd(),2000); 範例 2_7_4e 請寫一網頁, 當使用者按某一按鈕, 可將答案顯示兩秒後, 自動消失執行結果程式列印 <html> <head> <script language="javascript"> // 提示畫面

155 function bb(){ document.myform.b1.disabled=true; document.myform.t2.value =9; settimeout("b1()",2000);// 停留 2 秒後, 呼叫 b1, 將答案清除 // 清除答案 function b1(){ document.myform.t2.value =""; </script> </head> <body> <p> 請問邊長為 3 的正方形, 其面積是多少 </p> <form name="myform" method="post" action="--webbot-self--"> <p> 面積是 <input type="text" name="t1" size="20"><input type="button" value=" 提示 " name="b1" onclick= "bb()"> <input type="text" name="t2" size="20"></p> <p><input type="button" value=" 確定 " name="b2" onclick="aa()"></p> </form><p> </p> </body> </html> II setinterval() setinterval() 方法的語法如下 : setinterval( 方法,t) 其中 t 是停頓的毫秒數, 也就是每隔 t 毫秒自動執行指定的方法 " 例如, 以下敘述, 當網頁載入時, 每隔 1 秒即自動執行 bb() 方法 <html> <script language =javascript > var t=0; function bb() { t++; myform.t2.value=t; </script> </head>

156 <body onload=setinterval("bb()",500) > </body> </html> 範例 2_7_4f 請用 setinterval() 方法重做範例 2_4_3b 紅綠燈網頁程式列印 1 將以下敘述去掉 settimeout("aa()",500); 2 將以下敘述 <body onload="aa()" > 修改如下 : <body onload=setinterval("aa()",500) > 2_8 進階輸出入前面的 2_2 節已經介紹一些基本表單元件, 例如, 文字方塊按鈕與圖片等, 本單元則要介紹一些進階的輸出入物件, 例如, 核取方塊選項按鈕群組方塊下拉式清單方塊文字區域及圖層等輸出入物件 2_8_1 核取方塊 (checkbox) 核取方塊通常用來讓使用者勾選特定的選項例如, 下圖筆者已經放入 3 個核取方塊以下範例將示範核取方塊的用法範例 2_8_1a 示範核取方塊執行結果

157 操作步驟 1 插入 3 個核取方塊, 畫面如下圖 2 以上畫面的程式碼如下,value 筆者已經將其 value 值分別修改為羽球桌球與籃球 <input type="checkbox" name="c1" value=" 羽球 "> 右邊的羽球必須自行於設計畫面鍵入其次, 為了方便程式的撰寫, 請將 name 值修改為相同, 才能使用陣列存取其值, 本例通通改為 C1 <form name= myform method="post" action="--webbot-self--"> <p> 請勾選您的興趣 :</p> <p><input type="checkbox" name="c1" value=" 羽球 "> 羽球 <input type="checkbox" name="c1" value=" 桌球 "> 桌球 <input type="checkbox" name="c1" value=" 籃球 "> 籃球 </p> </form> 3 當使用者確定時, 輸出使用者的選項, 所以插入一個按鈕與一個文字方塊, 如下所示 : <p><input type="button" value=" 確定 " name="b1" onclick=aa()></p> <p><input type="text" name="t1" size="20"></p> 4 aa() 方法如下 : <script language =javascript > function aa() { var len=myform.c1.length; var i; var a=""; for (i=0 ;i<len;i++) if(myform.c1[i].checked ==true) a=a+myform.c1[i].value+" " ; myform.t1.value =a; </script> 5 length length 為選項鈕的個數 6 checked checked 紀錄每一選項是否選取 7 value

158 每一選項的值 2_8_2 選項按鈕前面的核取方塊可以多選, 但本節的選項按鈕則只能單選, 請看以下範例說明範例 2_8_2a 示範選項鈕執行結果操作步驟本例操作方式同上一範例, 全部程式列印如下 : <html> <script language =javascript > function aa() { var len=myform.c1.length; var i; var a=""; for (i=0 ;i<len;i++) if(myform.c1[i].checked ==true) a=a+myform.c1[i].value+" " ; myform.t1.value =a; </script> </head> <body> <form name="myform" method="post" action="--webbot-self--"> <p> 請勾選您的最高學歷 :</p> <p><input type="radio" name="c1" value=" 高中 "> 高中 <input type="radio" name="c1" value=" 大學 "> 大學 <input type="radio" name="c1" value=" 研究所 "> 研究所 </p> <p><input type="button" value=" 確定 " name="b1" onclick=aa()></p> <p><input type="text" name="t1" size="20"></p> </form>

159 </body> </html> 2_8_3 群組方塊前面的選項按鈕只能允許同一表單有一組選項按鈕, 若希望在同一表單有兩組以上的選項按鈕, 則可使用群組方塊給予分組, 請看以下範例說明範例 2_8_3a 示範群組方塊執行結果操作步驟 1 插入表單 2 分別插入兩個群組方塊, 並分別修改其標題為性別與最高學歷 3 分別於群組方塊內插入選項鈕 4 插入一個按鈕與一個文字方塊完成以上操作, 表單配置如下 : 程式列印 <html> <head> <script language =javascript > function aa() { var len=myform.r1.length;

160 var i; var a=""; for (i=0 ;i<len;i++) if(myform.r1[i].checked ==true) a=a+myform.r1[i].value+" " ; myform.t1.value =a; len=myform.r2.length; for (i=0 ;i<len;i++) if(myform.r2[i].checked ==true) a=a+myform.r2[i].value+" " ; myform.t1.value =a; </script> </head> <body> <form name="myform" method="post" action="--webbot-self--"> <fieldset style="padding: 2"> <legend> 性別 </legend> <input type="radio" value=" 男 " checked name="r1"> 男 <input type="radio" name="r1" value=" 女 "> 女 </fieldset> <fieldset style="padding: 2"> <legend> 最高學歷 </legend> <input type="radio" value=" 高中 " checked name="r2"> 高中 <input type="radio" name="r2" value=" 大學 "> 大學 <input type="radio" name="r2" value=" 研究所 "> 研究所 </fieldset> <p><input type="button" value=" 確定 " name="b1" onclick=aa()></p> <p><input type="text" name="t1" size="20"></p> </form> </body> </html> 2_8_4 下拉式清單方塊下拉式清單方塊有兩種表現方式, 一種是清單方塊, 如下圖左, 另一種稱為下拉式清單方塊, 如下圖右其差別是清單方塊的顯示範圍較大, 下拉式清單方塊僅顯示一列, 其餘必須拉開才能看到其值

161 以下是一些常用的屬性 I size 設定或取得清單方塊的欄位高度例如, 上圖左設為 3, 上圖右則設為 1, 也就是高度大於 1 時, 則為清單方塊 I length 傳回清單方塊所含的項目個數 I value 清單方塊中被選取的項目名稱 I multiple 傳回或設定清單方塊是否可複選 I selected 傳回或設定清單方塊某一項目是否被選取 I selectedindex 傳回清單方塊中, 被選取的項目索引值 I options[] 以陣列形式, 表現選單的項目 I options[n].text 第 n 個選項的文字 ( 索引從 0 開始 ) I options[n].value 第 n 個選項的 value 範例 2_8_4a 示範下拉式清單方塊執行結果操作步驟 1 插入表單 2 插入下拉式清單方塊設計畫面如下圖左, 程式碼如下圖右 <p><select size="1" name="d1"></select></p> 3 請於 <select> </select> 之間加入下圖右程式碼, 設計畫面將會如下圖左

162 <p><select size="1" name="d1" onchange=aa() > <option value=" 醫生 " > 醫生 </option> <option value=" 護士 " > 護士 </option> <option value=" 檢驗師 " > 檢驗師 </option> </select></p> 4 aa() 方法程式如下 <script language =javascript > function aa() { myform.t1.value=myform.d1.value; myform.t2.value=myform.d1.selectedindex ; </script> 補充說明 1 本例若修改 size=3, 則執行結果如下 : 範例 2_8_4b 示範可多選的清單方塊執行結果 ( 請先按住鍵盤的 Ctrl 鍵, 才能多選 ) 操作步驟 1 表單配置如下 :

163 2 表單程式如下, 請留意已經加入 multiple <form name="myform" method="post" action="--webbot-self--"> <p><select size="3" name="d1" multiple > <option value=" 川芎 " > 川芎 </option> <option value=" 生薑 " > 生薑 </option> <option value=" 紅棗 " > 紅棗 </option> <option value=" 木瓜 " > 木瓜 </option> </select></p> <p><input type="button" value=" 確定 " name="b1" onclick=aa()></p> <p> 您的選擇是 <input type="text" name="t1" size="20"></p> </form> 3 aa() 方法程式如下 : <script language =javascript > var a=""; function aa() { var len=myform.d1.length ; for (var i=0;i<len;i++) if( myform.d1.options [i].selected) a=a+myform.d1.options[i].value+" "; myform.t1.value=a; </script> 2_8_5 文字區域文字區域如下圖所示, 他的功能與文字方塊接近, 但卻可以以多列的方式顯示資料, 且當文字數量超過物件所在範圍時, 還會自動出現捲軸, 如下圖右

164 以下是常用的屬性 I value 文字區域的內容 I cols 物件表現的列數, 單位是字元數例如, 上圖右設定為 4, 表示物件可同時呈現 4 列 I rows 物件表現的行數, 單位是字元數例如, 上圖設定為 30, 表示物件的寬度為 30 個字元範例 2_8_5a 同範例 2_8_4b, 但使用文字區域輸出結果執行結果程式列印 <html> <head> <script language =javascript > var a=""; function aa() { var len=myform.d1.length ; for (var i=0;i<len;i++) if( myform.d1.options [i].selected) a=a+myform.d1.options[i].text+"\n"; //\n 跳列 myform.s1.value=a;

165 </script> </head> <body> <form name="myform" method="post" action="--webbot-self--"><p> <select size="3" name="d1" multiple > <option value=" 川芎 " > 川芎 </option> <option value=" 生薑 " > 生薑 </option> <option value=" 紅棗 " > 紅棗 </option> <option value=" 木瓜 " > 木瓜 </option> </select></p> <p><input type="button" value=" 確定 " name="b1" onclick=aa()></p> <p> 您的選擇是 <textarea rows="4" name="s1" cols="30"></textarea></p> </form> </body> </html> 2_8_6 圖層圖層顧名思義就是讓表單能有多層的效果, 也就是同一位置能放許多圖片其次, 若要達到圖片移動的動畫的效果, 亦要先將圖片放在圖層上, 才能有動畫的效果下圖是於設計頁籤插入圖層的畫面, 其程式碼如下圖右 <body> <div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="layer1"> </div> </body> 以下是移動圖層位置後的程式碼 : <div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 69px; top: 31px" id="layer1"> </div> I <div></div> 區塊設定, 將網頁中的段落設為區塊 I id 圖層的識別碼名稱, 與 name 屬性接近, 都可用來存取或設定圖層的屬性例如, 以下敘述可設定位置 document.all.layer1.style.left=x; 以上的 document.all 亦可省略如下 :

166 layer1.style.left=x; I z-index 圖層的 z 座標, 當同一位置存在多個圖層時, 其值越大者其位置越上面, 而且螢幕上僅可看到最上層的圖片 I width,height 圖層的寬度與高度屬性 I absolute 位置屬性, 分為 absolute( 絕對 ) 與 relative( 相對 ) I left,top 位置屬性, 分別是其 x,y 座標以下是移動圖層位置後的程式碼 : <div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 69px; top: 31px" id="layer1"> </div> 範例 2_8_6a 請寫一網頁, 可以讓圖片自動移動執行結果請自行開啟檔案 e2_8_6a.htm 程式列印 <html> <script language=javascript> var x=0; var y=0; function aa(){ x=(x+50) % 800; y=(y+40) % 500; document.all.layer1.style.left=x; document.all.layer1.style.top=x; settimeout("aa()",500); </script> </head> <body onload="aa()" > <div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="layer1"> <img name="gra" border="0" src="../g1.jpg" width="73" height="98"></div> </body> </html> 2_9 事件

167 JavaScript 的事件處理主要分為三大類, 分別是鍵盤事件滑鼠事件與狀態事件, 分別說明如下 : 2_9_1 鍵盤事件幾乎大部分的遊戲都會使用鍵盤事件, 常用的鍵盤事件有 keydown onkeypress 及 onkeyup, 這些事件都會傳回按鍵值 keycode I keycode 傳回鍵盤的按鍵值, 例如, 以下敘述傳回按鍵值 var a=event.keycode; 小寫的 a 是 97, 大寫的 A 是 65, 大寫的 B 是 66, 餘依此類推其次, 左移上移右移及下移等鍵的 keycode 分別是及 40 shiftkey 傳回按鍵的同時, 是否也按者 Shift 鍵 ctrlkey 傳回按鍵的同時, 是否也按者 Ctrl 鍵 altkey 傳回按鍵的同時, 是否也按者 Alt 鍵範例 2_9_1a 請設計一網頁, 可顯示使用者的按鍵值, 及是否按下 Shift Ctrl 或 Alt 鍵執行結果 1 請先於表單按一下, 讓表單致能 2 下圖是按一下 "PrtScrn 的結果 3 若按下 Shift Ctrl 或 Ctrl 等鍵, 則上圖對應輸出會得到 true 程式列印 <html> <head>

168 <script language =javascript > function aa(){ window.status =event.keycode; myform.t1.value=event.keycode; myform.t2.value=event.shiftkey; myform.t3.value=event.ctrlkey; myform.t4.value=event.altkey; </script> </head> <body onkeyup="aa()"> </body> </html> 範例 2_9_1b 請設計一網頁, 滿足以下條件 (1) 網頁載入時, 圖片 B 可任意上下左右自由移動 (2) 圖片 A 可隨者使用者按上下左右鍵自由移動 (3) 當圖片 A 與 B 重疊時, 顯示 "Game Over" 執行結果程式列印 <html> <script language =javascript > var xa=100,ya=100,xb=200,yb=150; // 依按鍵值移動 function aa(){ window.status =event.keycode; switch (event.keycode){ case 37: xa=xa-20; break; case 38:

169 ya=ya-20; break; case 39: xa=xa+20; break; case 40: ya=ya+20; break; graa.style.left=xa; graa.style.top=ya; // 隨亂數自由移動 function bb(){ xb=parseint(grab.style.left); yb=parseint(grab.style.top); x1=math.floor(math.random()*50)-25; y1=math.floor(math.random()*50)-25; xb=xb+x1; yb=yb+y1; grab.style.left =xb; grab.style.top=yb; if (Math.abs(xa-xb) <20 && Math.abs(ya-yb)<20){ alert("game over"); xa=0;ya=0; </script> <body onkeydown=aa() onload=setinterval("bb()",1000)><p> <img name= "graa" style="position:absolute; left:150; top:63" border="0" src="../red.jpg" width="50" height="46"> <img name= "grab" style="position:absolute; left:302; top:78" border="0" src="../green.jpg" width="50" height="46"></p> </body> </html> 自我練習請設計一個打飛機網頁, 滿足以下條件

170 (1) 飛機在網頁上方由左至右移動 (2) 當使用者按一下上移 " 鍵時, 可由下方發射砲彈, 此時砲彈即由下往上飛行 (3) 當砲彈打中飛機時, 顯示命中範例 2_9_1c 請設計一網頁, 滿足以下條件 (1) 當使用者開啟網頁時, 要求使用者輸入密碼 (2) 當密碼為 123 時, 才可使用網頁執行結果 1 下圖左是輸入 123 的結果 2 下圖右是輸入錯誤的結果, 此時無法執行網頁操作步驟 1 網頁執行按鈕預設 disable, 敘述如下 : <input type="button" value=" 執行 " name="b1" onclick="aa()" disabled > 2 請於輸入密碼的文字方塊加上 onkeyup 事件, 如以下敘述 <p> 請輸入密碼 :<input type="text" name="t3" size="20" onkeyup=bb()> 3 bb() 方法撰寫如下 : function bb(){ var b=event.keycode; var c=myform.t3.value; if (b==13) //Enter 鍵 if (c=="123") { myform.b1.disabled =false; // 密碼正確, 此時才可使用此按鈕 myform.t3.disabled =true; else{ myform.t3.value=""; // 清除使用者所輸入的密碼 myform.t2.value=" 密碼錯誤 " 自我練習 1 同上範例, 但是輸入錯誤三次, 即結束網頁

171 2 同上題, 按執行 " 按鈕後, 先出現對話視窗, 要求輸入密碼, 當密碼正確時才進行成績轉換, 錯誤 3 次, 則關閉網頁 3 請設計一網頁, 當使用者輸入答案, 並輸入 Enter 鍵時, 即檢查答案是否正確 2_9_2 滑鼠事件本章之前, 我們就一直使用滑鼠的 onclick 與 ondblclick 事件, 本節則要繼續探討其餘滑鼠事件, 例如 onmousedown onmouseup onmouseover onmousemove onmouseout 等事件 I onmousedown 物件上按一下滑鼠按鈕所引發的事件 I onmouseup 物件上放開滑鼠按鈕所引發的事件 I onmouseover 滑鼠移動經過物件時所引發的事件 I onmousemove 滑鼠在物件範圍內移動所引發的事件 I onmouseout 滑鼠離開物件時所引發的事件 I event.clientx 滑鼠事件發生時的 x 座標 I event.clienty 滑鼠事件發生時的 y 座標 I event.button 傳回滑鼠事件發生時, 滑鼠的哪些按鍵被按下 0 代表沒有任何鍵,1 代表左鍵被按下,2 代表右鍵被按下,4 代表中鍵被按下 I oncontextmenu 按滑鼠右鍵時, 產生此事件若要設定滑鼠右鍵無效, 可於網頁的 <body> 設定如下 : <body oncontextmenu= return false > 範例 2_9_2a 請設計一網頁, 可以顯示滑鼠座標, 並使圖片跟隨滑鼠移動執行結果

172 程式列印 <html> <head> <script language =javascript > function aa(){ window.status =event.clientx+","+event.clienty; gra.style.left=event.clientx; gra.style.top=event.clienty; </script> </head> <body onmousemove=aa()> <p><img name="gra" style="position:absolute" border="0" src="../green.jpg" width="50" height="46"></p> </body> </html> 範例 2_9_2b 請設計一網頁, 滿足以下條件 (1) 表單載入時顯示綠燈 (2) 滑鼠接近時顯示黃燈 (3) 滑鼠在物件移動時, 顯示紅燈 (4) 滑鼠離開時, 顯示白燈執行結果 1 本範例的目的主要是示範 onmouseover onmousemove onmouseup 等事件的差別 2 下圖左是滑鼠接近物件時的畫面, 顯示黃燈 3 下圖右是滑鼠在物件上移動的畫面, 顯示紅燈

173 2_9_3 狀態事件因為狀態的改變而引發的事件, 我們稱為狀態事件, 分別說明如下 : I onload 網頁載入所引發的事件 I onunload 關閉目前網頁所產生的事件 I onchange 物件內容改變時, 所產生的事件於文字方塊文字區域或選項按鈕的選取項目改變時, 都會產生此事件相關範例請看 2_8_4a I onsubmit 傳送表單資料時所引發的事件 onresize 物件改變大小時所引發的事件範例 2_9_3a 請設計一網頁, 當使用者瀏覽此一網頁時, 自動產生一歡迎光臨畫面, 關閉或離開時, 出現一謝謝 " 畫面執行結果程式列印 <html> <head> </head>

174 <script language =javascript > function hello(){ alert(" 歡迎光臨, 本店今日週年慶, 全面八折 "); function bye(){ alert(" 謝謝您, 再見 "); </script> <body onload ="hello();" onunload="bye();"> </body> </html> 範例 2_9_3b 請設計一開立藥品處方網頁, 當使用者選取藥品名稱與重量後, 可將藥品名稱與重量顯示在文字方塊執行結果程式列印 <html> <head> <script language =javascript > var b1=""; var b2=""; var b=""; function a1() { b1=myform.d1.value; function a2() { b2=myform.d2.value;

175 b=b+b1+" * "+b2+"\n"; myform.s1.value =b; </script> </head> <body> <form name="myform" method="post" action="--webbot-self--"> <p><select size="4" name="d1" onchange="a1()" > <option value=" 川芎 " > 川芎 </option> <option value=" 生薑 " > 生薑 </option> <option value=" 紅棗 " > 紅棗 </option> <option value=" 木瓜 " > 木瓜 </option> </select> <select size="4" name="d2" onchange="a2()" > <option value="1" >1 </option> //&nbsp 代表空白 <option value="2" >2 </option> <option value="3" >3 </option> <option value="4" >4 </option> <option value="5" >5 </option> <option value="6" >6 </option> </select></p> <p> 您的選擇是 <textarea rows="4" name="s1" cols="20"></textarea></p> </form> </body> </html> 2_9_4 動態選單同一網頁若同時提供太多選項, 常令使用者眼花撩亂, 此時可以選用動態選單, 也就是先將若干相同的選項分類, 放在同一選單, 當使用者點選該選單時, 才出現其選項, 此稱為動態選單例如下圖所示, 作品說明書基本觀念及電阻稱為選單, 這些選單下面分別有若干選項, 而且是點選該選單時, 才出現其選項

176 範例 2_9_4a 完成上圖的動態選單操作步驟 1 分割框架 A 分割框架的 HTML 標籤命令是 FRAMESET, 其語法如下 : <frameset> 分割框架內容 </frameset> B 本例並不使用手工輸入方式, 而是直接使用 FrontPage 的網頁範本, 如下圖所示

177 C 點選橫幅與目錄 ", 畫面如下圖

178 E 請分別新增網頁, 畫面如下圖,FrontPage 已經自動完成首頁 HTML

179 F 儲存檔案本例共四個檔案, 分別是首頁上面橫幅左邊選單與右邊內容放置框架所以請選擇儲存檔案 ", 電腦將會要求使用者分別輸入四個檔案名稱, 首先請輸入上面橫幅檔名, 本例輸入 top, 如下圖所示 :( 請留意其框架位置 )

180 接著儲存左邊選單, 本例輸入 left 如下圖 :( 請留意其框架位置 ) 接著輸入右邊內容網頁, 本例輸入 right, 如下圖 ( 請留意其框架位置 )

181 最後輸入首頁檔名, 本例輸入 index, 如下圖 ( 請留意其框架位置 ) 完成以上操作, 資料夾共四個檔名, 如下圖所示

182 2 完成選單及選項的 HTML 如下 : <body > <a class="mainmenu" href="javascript:showsubmenu(1)"> 作品說明書 </a> <div id="submenu1" class="submenu" style="display:none"> <a class="submenu" href="s1/s11.htm" target="main"> 專題動機 </a><br> <a class="submenu" href="s1/s12.htm" target="main"> 專題目的 </a><br> <a class="submenu" href="s1/s13.htm" target="main"> 專題設備及器材 </a><br> <a class="submenu" href="s1/s14.htm" target="main"> 專題原理 </a><br> <a class="submenu" href="s1/s15.htm" target="main"> 專題結果 </a><br> <a class="submenu" href="s1/s16.htm" target="main"> 結論 </a><br> <a class="submenu" href="s1/s17.htm" target="main"> 參考資料及其他 </a><br> </div> <a class="mainmenu" href="javascript:showsubmenu(2)"> 基本觀念 </a><br> <div id="submenu2" class="submenu" style="display:none"> <a class="submenu" href="s2/s21.htm" target="main"> 原子的組成 </a><br> <a class="submenu" href="s2/s22.htm" target="main"> 電能 </a><br> <a class="submenu" href="s2/s23.htm" target="main"> 庫倫定律 </a><br> </div> <a class="mainmenu" href="javascript:showsubmenu(3)"> 電阻 </a><br> <div id="submenu3" class="submenu" style="display:none"> <a class="submenu" href="s3/s31.htm" target="main"> 色碼電阻的辨識 </a><br> <a class="submenu" href="s3/s32.htm" target="main"> 毆姆定律 </a><br> <a class="submenu" href="s3/s33.htm" target="main"> 焦耳定律 </a><br> </div>

183 </body> 補充說明 A style= display:none 是設定不顯示此選項 B target 是超連結的目標框架 C class 稱為類別名稱,id 稱為識別碼, 這兩個屬性可用來協助樣式的設定或物件的存取 3 完成 CSS 的設計, 如下圖 <html> <head> <style type="text/css">  </style> 補充說明 A 能夠處理 <script> 標籤的瀏覽器, 必須支援 JavaScript 才行如果是不支援 JavaScript 的瀏覽器, 則會忽略 <script> 標籤, 而將 <script> 內的 JavaScript 程式當作網頁內容的一部份為了避免這個問題, 您可以將 <script> 標籤內的 JavaScript 程式碼, 以 HTML 標籤註解  包含起來, 如以上程式或以下程式 4 完成 Javascript 程式 <script language="javascript"> <!-- var currentmenu = 1; function ShowSubMenu(id) { if (document.all["submenu" + id].style.display == "") { document.all["submenu" + id].style.display = "none"; currentmenu = 0; else { if (currentmenu!= 0)

184 {document.all["submenu" + currentmenu].style.display = "none"; document.all["submenu" + id].style.display = ""; currentmenu = id; --> </script> 補充說明 A 使用者點選選單時, 首先判斷本選單是否已經開啟, 若已經開啟, 則關閉, 並設定目前未開啟任何選單 (currentmenu = 0;) (display 空字串代表選單顯示, none 代表隱藏 if (document.all["submenu" + id].style.display == "") { document.all["submenu" + id].style.display = "none"; currentmenu = 0; B 其次是否有未關閉的選單, 若有則關閉 if (currentmenu!= 0) {document.all["submenu" + currentmenu].style.display = "none"; D 開啟所選擇的選單, 並記錄已經開啟的選單編號 document.all["submenu" + id].style.display = ""; currentmenu = id; 4 將 <base target="main" 去掉, 否則常出現以下錯誤訊息 5 本例首頁檔名 index.htm 程式如下, 共分為三個框架, 分別是上面的橫幅 ( 檔名是 top.htm) 左邊的 contents( 檔名是 left.htm) 及右邊的 main( 檔名是 right.htm) noresize 代表分割線不允許位移 target 代表超連結的目標框架 <noframes> 代表若網頁不支援框架時, 所要顯示的文字 <html> <head> </head> <frameset rows="80,*">

185 <frame name=" 橫幅 " scrolling="no" noresize target="contents" src="top.htm"> <frameset cols="150,*"> <frame name="contents" target="main" src="left.htm"> <frame name="main" src="right.htm"> </frameset> <noframes> <body> <p> 此網頁使用框架, 但是您的瀏覽器不支援框架 </p> </body> </noframes> </frameset> </html> 補充說明 A rowls 蹤向分割畫面的數目與寬度本例首先將畫面分為上下兩個框架上面佔 80 像素, 剩下的給下面框架 <frameset rows="80,*"> B cols 橫向分割畫面的數目與寬度本例再將下面框架分為左右兩個框架左邊佔 150 像素, 剩下的給下面框架 <frameset cols="150,*"> <frame name="contents" target="main" src="left.htm"> <frame name="main" src="right.htm"> </frameset> 以下程式則可以分為三個框架, 劃分的方式以比率劃分, 比率分別是 15% 15% 與 70% <frameset cols="15%,15%,*"> <frame name="main1" src="m1.htm"> <frame name="main2" src="m2.htm"> <frame name="main3" src="m3.htm"> </frameset> 2_9_5 CSS 樣式表 CSS(Cascading Style Sheets) 樣式表的主要功能是讓網頁的內容與外觀樣式分開設計, 也就是網頁內容由網頁設計師處理, 外觀樣式則由美工人員處理 CSS 共有三種方式定義樣式表, 分別是使用 <style> 標籤於 HTML 的標籤內使用 style 屬性或使用獨立的.css 外部檔案以下僅介紹 <style> 標籤,<style> 標籤語法如下, 通常放在 <head></head> 指令之間 :

186 <head> <style type="text/css"> 樣式名稱 1 { 屬性 1: 值 1 ; 屬性 2: 值 2 ; 屬性 3: 值 3 ; 樣式名稱 2 { 屬性 1: 值 1 ; 屬性 2: 值 2 ; 屬性 3: 值 3 ; </style> </head> 樣式名稱樣式名稱有三種, 分別是標籤類別與識別碼, 分別說明下 : 標籤於 HTML 中,body p th td a 等 HTML 指令都是標籤名稱例如 <head> <style type="text/css"> body {color:green ;font-size=12pt </style> </head> 則是將 <body> 與 </body> 之間的內容套用本樣式又例如, <head> <style type="text/css"> p,a {color:green ;font-size=12pt;font-family: 標楷體 </style> </head> 則是將全部的 <p> </p> 與 <a> </a> 之間的內容套用本樣式類別與識別碼同一網頁可能有很多個 <p> </p>( 段落 ), 此時即可使用類別或識別碼, 若使用類別名稱則應於名稱前加點 (.), 若是識別名稱則應於識別名稱前加井號 (#) 例如, 以下程式可以定義類別名稱的樣式 <head> <style type="text/css">.main {color:green ;font-size=12pt;font-family: 標楷體 </style> </head> 例如, 以下程式可以定義識別碼名稱的樣式 <head>

187 <style type="text/css"> #Layer {color:green ;font-size=12pt;font-family: 標楷體 </style> </head> 以下程式則可以使用已經定義的類別名稱樣式, 例如 <div class= main > <div> 以下程式則可以使用已經定義的識別碼名稱樣式, 例如 <div id= Layer > <div> 同時使用標籤與類別有時同一段落可能好幾個類別, 此時可以同時使用標籤與類別名稱, 而將同一段落套用不同樣式以下程式則是標籤與類別名稱的聯合使用例如, <head> <style type="text/css"> p.main {color:green ;font-size=12pt;font-family: 標楷體 </style> </head> 則是將 <p> </p> 段落內的 main 類別套用本樣式 2_10 檔案網際網路的世界, 通常可存取伺服器與客戶端的檔案, 但是因為 JavaScript 是一種處理客戶端的 Script 語言, 所以僅提供客戶端的檔案處理伺服器的檔案處理則應使用 ASP JSP 或 PHP 等語言較為靈活 FileSystemObject FileSystemObject 物件是一個 ActiveX 物件, 能夠取得電腦磁碟機的相關資訊, 例如資料夾與檔案的新增移動更名或刪除等動作, 其次還可處理文字檔的讀寫動作使用此物件前應先宣如下 : var a=new ActiveXObject("Scripting.FileSystemObject"); CreateFolder() 建立資料夾例如, 以下敘述, 可於使用者 C: 磁碟機建立一個 test 資料夾 ( 請於 IE 執行, 本例無法於 Frontpage 預覽 ) <script language =javascript > var a=new ActiveXObject("Scripting.FileSystemObject"); var b=a.createfolder("c:\\test"); </script>

188 FolderExist() 傳回資料夾是否存在例如, 以下敘述可傳回 c:\test 資料夾是否存在 var a=new ActiveXObject("Scripting.FileSystemObject"); a.folderexists("c:\\test" ); CopyFolder() 複製資料夾例如, 以下敘述可將 c:\test 複製至 d:\test a.copyfolder ("c:\\test","d:\\test"); //a 物件同上 MoveFolder() 搬移資料夾例如, 以下敘述可將 c:\test 搬移至 d:\test a.copyfolder ("c:\\test","d:\\test"); //a 物件同上 DeleteFolder() 刪除資料夾例如, 以下敘述可刪除 d:\test 資料夾 a.deletefolder ("d:\\test"); CreateTextFile() 建立檔案例如, 以下敘述可建立一個空的 test1.txt 檔案,a 物件同上,b 物件待會可開啟檔案 true 代表可覆寫原檔案,false 代表不可覆寫原檔案 var b=a.createtextfile ("c:\\test\\test1.txt",true); //a 物件同上 CopyFile() 複製檔案例如, 以下敘述可從 c:\test 複製 test1.txt 至 d:\test 資料夾 a.copyfile ("c:\\test\\test1.txt","d:\\test\\test1.txt"); //a 物件同上 MoveFile() 搬移檔案例如, 以下敘述可從 c:\test 複製 test1.txt 至 d:\test 資料夾 a.movefile ("c:\\test\\test1.txt","d:\\test\\test1.txt"); DeleteFile() 刪除檔案例如, 以下敘述可刪除 test1.txt a.deletefile ("d:\\test\\test1.txt"); Write( 字串 ) 寫入一列資料例如, 以下敘述可寫入一列資料, 下圖是其執行結果 <script language =javascript >

189 var a=new ActiveXObject("Scripting.FileSystemObject"); b=a.createtextfile ("c:\\test\\test1.txt",true); b.write("this is a book."); b.close(); </script> WriteLine( 字串 ) 寫入一列資料並跳列例如, 以下敘述可寫入一列資料, 下圖是其執行結果 var a=new ActiveXObject("Scripting.FileSystemObject"); b=a.createtextfile ("c:\\test\\test1.txt",true); b.writeline("this is a book."); b.writeline(" 這是一本書 "); b.close(); OpenTextFile() 開啟文字檔案其語法如下 : OpenTextFile( 檔案名稱, 開啟模式 1, 開啟模式 2, 開啟模式 3) 以上語法說明如下 : 1 開啟模式 1 共有 3 種方式, 分別如下表 : 值說明 1 開啟後僅能唯讀 2 開啟後可寫入資料, 並取代原資料 8 開啟後可寫入資料, 且寫入的資料是放在原資料後面 2 開啟模式 2 為決定是否建立新檔案,false 表示不建立,true 表示不存在就建立一個 3 開啟模式 3 若為 false 表示使用 ASCII 編碼開啟檔案 ReadLine()

190 讀取一列資料, 且不含換列字元例如, 以下敘述可讀取一列資料, 執行結果如下圖 <script language =javascript > var a=new ActiveXObject("Scripting.FileSystemObject"); var b=a.opentextfile ("c:\\test\\test1.txt",1,false,false); var c=b.readline(); document.write (c); b.close(); </script> ReadLine() 讀取 n 個字元的資料例如, 以下敘述可讀取 4 個字元的資料執行結果如下圖 var a=new ActiveXObject("Scripting.FileSystemObject"); var b=a.opentextfile ("c:\\test\\test1.txt",1,false,false); var c=b.read(4); document.write (c); b.close(); ReadAll() 讀取全部的資料例如, 以下敘述可讀取 test1.txt 的所有資料執行結果如下圖 <script language =javascript > var a=new ActiveXObject("Scripting.FileSystemObject"); var b=a.opentextfile ("c:\\test\\test1.txt",1,false,false); var c=b.readall(); document.write (c); b.close(); </script> 範例 2_10a 請寫一網頁, 可以將文字方塊寫入硬碟, 亦可讀取硬碟資料寫入文字方塊執行結果

191 1 下圖左是程式執行的初始畫面 2 下圖右於文字方塊填入資料 3 下圖左是以記事本開啟的結果 4 下圖右是讀取資料的結果程式列印 <script language =javascript > // 將資料寫入硬碟 function aa(){ var a=new ActiveXObject("Scripting.FileSystemObject"); var b=a.createtextfile("c:\\pbook\\test2.txt",true); var c=myform.t1.value ; b.writeline(c); b.close(); // 從硬碟讀取資料 function bb(){ var a=new ActiveXObject("Scripting.FileSystemObject"); var b=a.opentextfile("c:\\pbook\\test2.txt",1,false,false); var c=b.readline(); b.close(); myform.t2.value=c; </script>

192 範例 2_10b 假設使用者已經將所購買彩券使用記事本記錄如下, 請寫一網頁, 可開啟網頁後, 協助其對獎, 並顯示對獎結果執行結果程式列印 <html> <head> <script language =javascript > // 從硬碟讀取資料 function aa(){ var e=new Array(2,5,12,16,28,32,20); // 開彩號碼 var a=new ActiveXObject("Scripting.FileSystemObject"); var b=a.opentextfile("c:\\jsbook\\test3.txt",1,false,false); var c=b.readline(); b.close(); var d=c.split(" "); // 以空白分割字串, 並儲存在 d 陣列 myform.t1.value =d.tostring(); // 使用者的彩券號碼 myform.t2.value=e.tostring(); var n=0; var special=false; var i,j; for (i=0 ;i<=5;i++) for (j=0;j<=5;j++)

193 if (e[i]==d[j]){ n++; break; for (i=0;i<=5;i++) if (e[6]==d[i]) { special=true; break; f=""; if (n==6) f="1"; else if (n==5) if (special) f="2"; else f="3"; else if (n==4) f="4"; else if (n==3) f="3"; else f=" 槓龜 "; myform.t3.value=f; </script> </head> <body> <form name="myform" method="post" action="--webbot-self--"> <p> 您的彩券號碼 :<input type="text" name="t1" size="20"></p> <p> 開彩號碼 :<input type="text" name="t2" size="20"></p> <p> 結果是 :<input type="text" name="t3" size="20"> 獎 </p> <p><input type="button" value=" 執行對獎 " name="b1" onclick=aa()> </p> </form> </body>

194 </html> 自我練習 1 假設使用者已經將所購買彩券號碼儲存如下 ( 第一列的 3 表示, 一共購買 3 張, 其次, 每列的起始號碼是彩券編號 ), 請寫一網頁, 可以協助使用者對獎

展开

Microsoft Word - 第四章.doc

Microsoft Word - 第四章.doc 第四章 - 試分別說明組合邏輯電路與序向邏輯電路之定義解 : 組合邏輯電路由基本邏輯閘所組成的此種邏輯電路之輸出為電路所有輸入的組合因此輸出狀態可完全由目前之輸入來決定而組合邏輯電路之示意圖如圖所 a 示 ; 而序向邏