網站規劃與設計上課補充教材

第十五堂課： HTML5、Java script 與 DOM 基礎

HTML5 真的是很迷人，尤其是那個瀏覽器原生的影音多媒體支援，比起需要其他額外的外掛程式來說，HTML5 有相當重要的支援能力！ 此外，HTML5 一定要有 Java script 以及 Java script API 的支援才算是一個優秀良好的 HTML5 網頁程式！其中 HTML5 強調在『互動』！ 誰跟誰互動？其實是使用者與網頁的互動！不是使用者與伺服器喔！是我們與網頁的互動而已！相當有趣吧！那就來瞧瞧～
本章重點目標：
  1. 什麼是 HTML5 ？再次回想一下，我們這學期初就立刻切入網站整體風格設計的環境中時，不是有提到要有 <!doctype html> 等等的東西嗎？ 還有哪些需要修訂的呢？基本的 HTML5 除了我們談到的許多標籤之外，整體網頁設計應該要呈現如此的樣貌： 
    <!doctype html>
<html>
<head>
    <meta charset="utf8" />
    <title>網站規劃與設計</title>
    <link rel="stylesheet" href="/webdesign/include/style_2013.css" />
    <script>
	java script code...;
    </script>
    <script src="filename.js"></script>
</head>
<body>
    your content
</body>
</html>
    由於 CSS 與 Java script 已經是 HTML5 的預設支援風格與程式語言，因此在 <link...> 與 <script...> 的部份，已經不需要再撰寫 type 的宣告了！同時， meta 也變得比較簡單，一堆宣告也都取消了！同時，加上前面幾周談到的 header, footer, aside.. 等等標籤， 加上影音多媒體的 video, audio 等新的標籤，讓我們的瀏覽器主動變成串流功能！真是棒！

  2. HTML5 的運作方式：
    1. 瀏覽器載入 html5 的網頁，同時載入了 CSS 與 Java script 等多媒體項目；
    2. 瀏覽器分析了網頁內容，根據內容建立了 DOM 文件模型；
    3. 載入的 java script 開始根據 DOM 模型，在特定的元素之間與使用者互動；
    4. 如果設定得宜，更多的 java script APIs 就開始一起應用了(例如影音多媒體)
    所以，簡單的說，HTML5 就是：標記(markup, tag) + Java Script APIs + CSS 就對了！

  3. Javascript 變數宣告、迴圈的測試功能～直接透過 Javascript 來設計出雙層迴圈，然後處理出 9x9 的九九乘法表輸出訊息吧！
    • 複製出一個之前的網頁，請取名為 class15-1.php 好了，在網頁顯示的中央部份，增加一個 <div>，這個 div 風格隨便你處理！
    • 在上述 div 之後，嵌入一個 scirpt 標籤；
    • 因為九九乘法，所以需要兩個變數，現在請用 var 宣告兩個名為 x y 的變數；
    • 請透過『 for ( x=1; x<=9; x++ ) { ... } 』設計出兩層迴圈；
    • 在迴圈內部請透過『 window.document.write("相關輸出"); 』的函數，來處理 x*y 的結果，最終使用 br 來換行；
    • 請注意，在 window.document.write() 函數內，你可以透過 "文字"+x*y+"文字" 之類的方式，將文字與數字、文字等其他資料相結合

  4. 承上題，那麼現在請透過 table 的方式，讓上述的輸出可以變得比較好看些！

  5. 上面是直接使用 javascript 來處理，並沒有使用者與之互動的按鈕。現在，我們使用一個『當按下按鈕才會執行』的方式來處理。 此時你可以這樣做：
    • 將剛剛的檔案複製成新的檔案，例如 class15-2.php 好了，然後將 9x9 乘法表的程式碼中，以 function mynine() {...} 來函蓋， 也就是說，要執行 mynine 這個函數，才會輸出正確的資料的意思！
    • 在 script 標籤的上方，增加一個按鈕，使用名稱為 button 的成對標籤，標籤內元素加入一個 OnClick="mynine()" 的項目， 該項目點選就會執行 mynine() 函數的意思！兩個成對標籤中央則是顯是讓使用者按下的文字說明即可！

  6. 一般來說，我們的 Javascript 主要是透過標籤內的 "id" 來取得相關的資料，當然也能夠透過標籤內的 name 來取得該標籤的元素。 如上面的 99 乘法表的案例中，按下按鈕後，竟然整頁的資料通通被覆蓋，實在不合理。因此，我們可以這樣做， 讓輸出的資料可以顯示到某個元素當中！
    • 將 class15-2.php 複製成為 class15-3.php
    • 將 div 的標籤中，加入一個名為 id 的元素，元素值設定為 showme 即可！
    • 修改 mynine() 這個函數，另宣告一個變數名稱為 msg 好了，這個 msg 會將之前的輸出全部指定！ 亦即原本是 window.document.write... 變成了 msg=msg+... 的模樣！將結果存入 msg 這個變數中
    • 額外設定一個變數，取名為 showmeid 好了，這個變數的內容就是 document.getElementById("showme") 的相關參數！
    • 透過 showmeid.innerHTML = msg; 來轉換該標籤內的資料！到此就可以先執行一次！看看輸出的資訊對不對！
    • 將 button 標籤內加入 id 元素，該元素值可以自訂！
    • 當使用者按下 button 並且順利輸出 9x9 乘法表之後，請將 button 標籤中的顯示變化一下，例如變成：『結果輸出給妳看囉！』之類的字樣！ 其實同樣是透過 getElementById 來處理即可！

  7. 我們在 12 堂課當中，有個算命的 PHP 表單，能不能使用 javascript 來完成即可？也是可以的！現在，請複製第 12 堂課的算命一則的題目， 將該資料複製成 class15-4.php 囉！
    • 先將算命題目的格式排列整齊，不需要 form 這個標籤也沒有關係！
    • 在題目底下新增一個 div ，未來會將答案輸出到這裡，所以請將這個 div 設定一個 id 的元素與元素值
    • 設計 javascript，訂定一個名為 myans() 的函數，這個函數的內容執行依序為：
      1. 請注意，在問題的選項中，每個 radio 的內容都加入 OnClick="myans()" 才對！
      2. 先宣告變數，該變數會取得 document.getElementsByName("radio 的 name 填寫"); 這樣 (注意，Elements 有 s 喔！！！！)
      3. 使用 for ( i = 0; i < 變數.length; i++ ) { 變數[i].checked 看看是否為 true ，若為 true 就設定 myselectid 為 變數[i].value 的內容！}
      4. 透過 myselectid 的數值，來給予 msg 一個正確的資料顯示內容

  8. 你應該會看過某些複選 (checkbox) 的環境下，都會有個『全選』與『全不選』的按鈕，透過該按鈕，你就可以勾選全部的 checkbox 了！ 我們現在來做個 class15-5.php 來測試一下這個功能吧！
    • 先製作至少 10 個以上的 checkbox 環境，名稱通通指定為 myname[] 這樣的陣列格式
    • 製作一個 button ，當點下 button 之後，可以觸發 myselectyes() 函數，且顯示為『勾選』
    • 製作一個 button ，當點下 button 之後，可以觸發 myselectno() 函數，且顯示為『不勾選』
    • 製作 myselectyes() 函數的功能如下：
      1. 宣告一個名為 mynameyes 的變數，這個變數就是 document.getElementsByName("myname[]") 的方式來取的！
      2. 透過 for 的迴圈 (與上一題的方式相同) 去指定 mynameyes.checked = true 即可！
    • 同理，製作 myselectno() 函數，只是取得變數後，內容變成 mynameno.checked = false 囉！

  9. 承上題，如果不要用按鈕，單純用另外一個 checkbox ，該 checkbox 是 checked 就指定為全部勾選，若該 checkbox 為取消， 那就全部取消勾選，又該如何處理？
    • 將上述的檔案複製成為 class15-6.php 來處理囉！同時刪除 button 的資料，另外以 checkbox 的功能來處理
    • 這個新的 checkbox 指定一個 id 為 mycheck 的名稱，同時勾選與否時，會觸發 myselect 函數
    • myselect() 函數主要的功能如下：
      1. 指定變數 mycheck 透過 getElementById 取得 mycheck 的內容
      2. 指定變數 myselectall 透過 getElementsByName 取得 myselectall 的內容
      3. 判斷 mycheck.checked 是否為 true ，若為 true 則全部的 myselectall 皆為 true，若為 false 則全部都為 false 囉！

  10. 網頁上面經常有隨著時間變動的資料在跑，包括可能的自動倒數時間等。我們現在設計一個會自動倒數 30 秒的環境， 等到倒數結束後，讓某個資料或圖片變化，來瞧瞧可能的狀態！
    • 先製作兩張圖，一張正常，一張會有突發性的變化這樣，假設圖片檔名為 normal.jpg 與 non-normal.jpg 這樣
    • 在 class15-7.php 當中，先顯示 normal.jpg 的圖示，且該 img 的 id 假設為 myfig 好了；
    • 在該圖示底下增加一個 div 的標籤，設定一下大小，同時指定 id 為 mynu 好了！
    • 現在開始處理 javascript 的腳本：
      1. 先指定一個名為 timer 的變數，且這個變數的內容會去定時執行某個函數，假設為 myreturn()， 設定的方式為： setInterval("myreturn()",1000); 那個 1000 指的是毫秒，所以 1000 毫秒等於 1 秒這樣！
      2. 指定一個初始數字的變數，以本例中，就是 30 秒這樣。假設這個變數名稱為 myinit 好了！
      3. 開始處理 myreturn() 函數的內容，包括： (A)指定 myinit - 1 秒； (B)取得 mynu ，同時將數值 (innerHTML) 指定為秒數； (C)判斷 myinit 是否有小於等於 0 ，若小於等於 0 就開始進行 (D)取得 myfig 並且將 var.src 的內容改成 non-normal.jpg 圖檔 (E)接下來使用 clearInterval(timer) 來取消倒數！

  11. 過去的跑馬燈都只是簡單的跑跑，如果我們需要的跑馬燈是『每隔 3 秒切換一次內容』呢？意思是，該跑馬燈的內容是會改變的， 而不是只是跑來跑去而已這樣。如果要這樣做，就得透過剛剛的 setInterval 搭配陣列來處理囉！詳細作法可以這樣處理看看：
    • 撰寫 class15-8.php 的內容，切出一塊大約 500px 寬 30px 高的 div ，假設 id 設定為 myshow 好了。內容顯示『跑馬燈』
    • 在 javascript 一開始，設定 timer 為每 3 秒執行 myrun() 這個函數一次，
    • 同時設定一個 mystart 初始值為 0 號。
    • 設定一個名為 showme 的陣列 (var showme = new Array())，設定如 showme[0] = "<a href='index.php'>看看我的首頁</a>"; 這樣，多做幾個！
    • 將剛剛上面提到的 div 內容改成第 0 個 showme 顯示的內容即可！
    • 至於 myrun() 的內容如下：
      • 先讓 mystart = mystart + 1;
      • 判斷一下 mystart 的長度有沒有大於 showme 這個陣列的長度 (showme.length)，若 mystart 比較大(或等於)，就將 mystart 改為 0 ，若比較小， 就不要改變
      • 取得 myshow ，修改 myshow 的 innerHTML 內容！

  12. 某些時刻你需要取得現在的時間。javascript 可以取得的是『本機的時間』而不是伺服器的時間喔！可以透過『 var mydate = new Date() 』來取得一個時間參數！ 接下來讓我們來處理看看：
    • 製作 class15-9.php 的檔案，內容透過一個 input type="text" 且 id 設定為 myshowtime 好了！長度與資料請自訂
    • 開始製作 javascript，第一要務是取得時間的變數，亦即是『 var mydate = new Date() 』這東西！
    • 在你取得一個時間參數的變數 (本例中是 mydate 這個變數)，你就可以取得底下的相關資料：
      • mydate.toString()：取得所有的時間參數；
      • mydate.getFullYear()：取得西元年
      • mydate.getMonth()：取得月份，不過是從 0~11 喔！所以換算成為我們的月份，必須要加上 1 才行！
      • mydate.getDate()：取得日期，從 1~31 喔！
      • mydate.getHours()：取得小時值，從 0 - 23 喔！
      • mydate.getMinutes()：取得分鐘，從 0~59 喔！
      • mydate.getSeconds()：取得秒鐘，從 0~59 喔！
      • mydate.getWeeks()：取得秒鐘，從 0~59 喔！
    • 透過上面的說明，請製作出 20xx-xx-xx HH:MM:SS 的時間格式，且這個格式是每秒鐘更新一次時間！

本章練習與習題：
  1. 請透過上述的『跑馬燈』設計方法，在你的 aside 部份，增加最新消息的跑馬燈動態顯示(最少加上五條訊息！)！！！
  2. 請透過上述的『時間』設計方法，在你的 aside 部份，增加目前的時間，同時加上時間相關的問候語 (早安、午安、晚安等等)！
  3. 將上述資料進行完畢，並於首頁加入正確的連結，將結果上傳後，到上傳網站查閱是否正確處理才可以！