Chapter 3: Exercises

選擇題


簡答題

  1. 在用戶端的 JavaScript,若要將使用者輸入的字串以整數讀入,請問要使用什麼函數?若要以浮點數讀入,請問要使用什麼函數?
  2. 對於一個數值 x,請問其方法 x.toString(2) 的功能為何?
  3. 如果 text = "我願是千萬條江河",則
    1. text.length 的回傳值是?
    2. text.substr(3,5) 的回傳值是?
    3. text.substring(3,5) 的回傳值是?
  4. 如果 text = "多情卻似總無情,唯覺尊前笑不成",則
    1. text.charAt(10) 的回傳值是?
    2. text.indexOf("情") 的回傳值是?
    3. text.lastIndexOf("情") 的回傳值是?
  5. 給定一個字串變數 x,請問
    1. 呼叫何方法可以將此字串變數之值轉換成大寫字母?
    2. 呼叫何方法可以將此字串變數之值轉換成小寫字母?
  6. 請問函數 eval() 的功能為何?請舉一個簡單的範例來說明。
  7. 在以下的 JavaScript 程式碼中,請問印出的訊息為何? <script> x=5; y=5; z=x==y; document.write(z); </script>
  8. 如果 today 是一個日期物件,包含目前的日期(2007年12月30日 上午 11:47:13,星期日),請問下列指令的回傳值為何?
    1. today.getFullYear()
    2. today.getMonth()
    3. today.getDate()
    4. today.getHours()
    5. today.getMinutes()
    6. today.getSeconds()
    7. today.getDay()
  9. 如果 today 是一個日期物件,請問 today.toLocaleString() 的功能為何?
  10. 如果 today 是一個日期物件,請問 today.getDate() 和 today.getDay() 各有何功能?
  11. 如果 date1 和 date2 是兩個日期物件,請問如何計算它們之間的差值(以秒為單位)?
  12. 請問 with(Math) 的功能為何?
  13. 對於一個數值變數 x,請問下列指令的功能為何?
    1. Math.floor(x)
    2. Math.ceil(x)
    3. Math.round(x)
  14. 對於一個影像物件 myImage,請問使用何種性質可以達成下列功能?
    1. 設定影像的網址。
    2. 設定影像顯示的高度。
    3. 設定影像顯示的寬度。
  15. 請舉例說明如何使用影像物件及陣列物件來達到影像快取(Cache)的功能。
  16. 如果我們使用 obj 代表下列物件: <a target=_blank href="myHome.htm">linked text</a> 則下列性質的對應值為何?
    1. obj.outerHTML
    2. obj.innerHTML

程式題

請使用本章所學到的 JavaScript 程式技巧來完成下列作業:
  1. (*) 字串的方法對應到的HTML標籤: JavaScript 的字串有一些方法,能夠改變字串在瀏覽器的呈現方式,例如 string.bold() 相當於對字串加上標籤:<b>string</b>。請使用 <xmp> 和 </xmp> 標籤來秀出 JavaScript 所產生的輸出(未被瀏覽器解譯前),以便列出這些方法所對應到的 HTML 標籤。
  2. (**) 一元二次方程式: 請寫一個網頁,上面有一個表單,具有三個文字欄位,分別代表一元二次方程式 ax2 + bx + c = 0 的三個係數 a、b、c 的值。使用者按下「送出」後,請用警告視窗列出這個一元二次方程式的解。你的程式碼,應該要能夠處理下列幾種情況,請務必測試看看:
    1. a=1, b=2, c=1
    2. a=1, b=1, c=1
    3. a=0, b=1, c=1
    4. a=0, b=0, c=1
  3. (***) 英文日期至中文日期的轉換: 本題目測試同學對字串與時間的處理。簡單地說,你的工作就是要設計一個網頁,能夠將英文的日期和時間轉換為中文的日期和時間。基本上,你的程式碼必須符合下列要求:
    • 時間必須採用12小時制,並加入「上午」或「下午」。
    • 必須進行表單資料驗證,換句話說,如果使用者輸入不合理的資料,程式碼必須能夠以警告視窗(Alert windows)來提醒使用者。
    以下是一個功能不完全的範例:

    Example(English2ChineseDate.htm):

    上述範例的原始檔如下:

    原始檔(English2ChineseDate.htm):(灰色區域按兩下即可拷貝)
    <html>
    <head>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
    </head>
    
    <body>
    <h2 align=center>英文日期至中文日期的轉換</h2>
    <hr>
    
    <script language=javascript>
    function updateTime(form) {
    	year = form.year.value;
    	month = form.month.value;
    	day = form.day.value;
    	minute = form.minute.value;
    	hour = form.hour.value;
    	second = form.second.value;
    	string1 = "今天是中華民國"+(year-1911)+"年"+month+"月"+day+"日,";
    	string2 = "時間是下午"+hour+"點"+minute+"分"+second+"秒。"
    	form.ChineseDate.value = string1+string2;
    }
    </script>
    
    <form>
    請輸入西元年代與時間:<br>
    Year:  <input type="text" size=4 name="year"   value="2000">
    Month: <input type="text" size=4 name="month"  value="3">
    Day:   <input type="text" size=4 name="day"    value="15">
    Hour   <input type="text" size=4 name="hour"   value="18">
    Minute <input type="text" size=4 name="minute" value="45">
    Second <input type="text" size=4 name="second" value="32">
    
    <p>
    <input type="button" name="Transform" value="轉換"
    onClick="updateTime(this.form)">
    <p>
    轉換後的中文元年代與時間:<br>
    <textarea name="ChineseDate" rows=2 cols=80></textarea>
    <br>(不可出現阿拉伯數字喔!)
    </form>
    
    <hr>
    </body>
    </html>

    評分標準如下:

    1. (30%) 基本要求是要能夠將所有數字轉換成功,並分辨上、下午(採用12小時制)。
    2. (30%) 關於每個欄位的值,必須做以下的檢查:
      1. 欄位的範圍如下
        年:1912-9999, 月:1-12, 日:1-31, 時:0-23, 分:0-59, 秒:0-59
      2. 如果輸入字串當中,有阿拉伯數字之外的字元,則必須出現警告視窗,告訴使用者這是不合法的輸入。
    3. (10%) 能夠將時間(Minute,Second部分)顯示做適當調整者,例如:
      1. 下午三點二十分零秒 -> 下午三點二十分
      2. 下午三點零分零秒  -> 下午三點整
    4. (10%) 能夠將時間(Hour部分)做以下的區分者:
      1. 0-5 : 凌晨(零-五)點
      2. 6-11 : 上午(六-十一)點
      3. 12 : 中午十二點
      4. 13-18 : 下午(一-六)點
      5. 19-23 : 晚上(七-十一)點
    5. (10%) 檢查每個月的實際天數,例如使用者輸入6月31日,那就必須出現警告視窗。特別是要檢查閏年,閏年的規則:四年一閏,一百年不閏,但四百年又閏等。(閏年的二月有29天。)
    6. (10%) 其他加分項目。(請主動向助教說明,並由助教依繳交情況自訂評分標準)。
  4. (**) 由「日期」到「星期幾」的轉換: 請寫一個網頁,可以執行由「日期」到「星期幾」的轉換:
    • 此網頁有「年」、「月」、「日」的下拉式選單,當第一次載入時,下拉式選單的預設值就是今天。
    • 當你改變任一個下拉式選單的值時,即會出現警告視窗顯示所給的日期是星期幾。
    (提示:可用 new Date(year, month, day) 來產生一個日期物件,再用 getDay() 的方法來求取是星期幾。)
  5. (**) 計算相差天數: 請寫一個網頁,可以算出由今天到某個特定日期之間的天數:
    • 此網頁有「年」、「月」、「日」的下拉式選單,當第一次載入時,下拉式選單的預設值就是今天。
    • 當你改變任一個下拉式選單的值時,即會出現警告視窗顯示由今天到選單日期之間的天數。
    (提示:可用 new Date(year, month, day) 來產生一個日期物件。)
  6. (***) 五秒時間感的測驗: 本題目測試同學對網頁事件的瞭解與時間的處理。你必須設計一個網頁,其功能為「五秒時間感的測驗」,必須能夠測驗使用者對於「五秒」的時間長度的感覺。此網頁的功能如下:
    1. 網頁載入後,起始畫面如下:
    2. 按下「開始玩遊戲」後,按鈕出現「五秒後按我...」的字樣。此時使用者必須在內心默數五秒。畫面如下:
    3. 默數五秒後,使用者按下此按鈕,程式即可計算使用者點選時間,將結果顯示在「按下時間」的文字欄位,並計算和 5 秒的差異,記錄在「相差時間」的欄位,且同時記錄「最佳紀錄」,最後將「嘗試次數」加 1。典型畫面如下:
    4. 從第二次使用時,若「相差時間」大於或等於「最佳紀錄」,則不修改「最佳紀錄」的欄位,典型畫面如下:
      同時也會出現譏笑訊息的警告視窗,如下:
    5. 反之,若「相差時間」小於「最佳紀錄」,則將相差時間填入「最佳紀錄」的欄位,典型畫面如下:
      同時也會出現鼓勵訊息的警告視窗,如下:
    6. 最後,記得將按鈕文字改回「開始玩遊戲」。
  7. (**) 使用影像物件來實作快取功能: 請寫一個網頁來證明「使用影像物件可以實作快取功能」。請務必使用夠多、夠大的影像檔案來檢測此功能,並詳細說明你的驗證方法。(請務必使用你自己的方式來驗證,不要使用 4-1 節的範例來說明。)

JavaScript 程式設計與應用:用於網頁用戶端