範本檔

Size: px

Start display at page:

Download "範本檔"

聚绍米
7 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);

展开

Microsoft Word - 第四章.doc

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