準備TQC+ HTML5之讀書筆記

因為最近沒有專案可以涉略到html5的領域，剛好有看到TQC有出HTML5的考試，就很高興地報名了，藉此好好push自己多了解html5-->理解-->當未來有機會碰到時，就不會太過於茫然。

老實說證照對求職沒有太大幫助，不過重要的是好好靜下來看書決心。

整體狀況:
TQC+ HTML5的考題比之前的HTML4反而感覺還要簡單一點，或許是因為我已經比以前更上手了吧，畢竟我已經完全脫離使用dreamweaver到使用notepad++..。然後我個人認為比較有困難的部分是第四類，第六類，第七類。

嚴格來講應該不能說是'難'，而是因為平常少接觸，然後第七類的考題我認為太少了，整個第七類都可以說是HTML5最重要的部分，比方說web Worker, local storage, Index db, WebSocket，Geo location等等，這麼重要的content竟然只有一類的考題(驚)，有一種沒有搔到癢處的感覺xdd。
以下只是自己個人的note，若有問題還麻煩多多指正!

有個有趣的網站可以先玩玩，首先先知道自己知道多少個html5標籤吧!
http://thehtml5quiz.com/

第一類:

• 1-02 : JavaScript是單執行緒的
• 1-09 : ===三個等號是嚴格相等運算子(測試嚴格相等性)
• 1-30 : 這題的答案C我認為有點怪，JavaScript也可以跑在server-side(Ex:node.js)
• 1-31 :  B跟C的答案JavaScript跟CSS剛好顛倒過來
• 1-32 :  HTML的元素名稱並沒有大小寫之分 (PS:其實元素跟屬姓名都沒有大小寫之分，但是我自己認為要盡量統一，還有屬性值有些是有區分大小寫的，比方說id跟class就有區分大小寫)
• 1-33 : (A)AccessKey要搭配Alt鍵
• 1-34 : 既然css已經分出去到另外的XXX.css檔案，就不需要加style標籤了
• 1-37 : title就算沒有放到head標籤也可以作用，不信就實驗看看就可以了:P
• 1-39 : for/in是循環遍歷對象的屬性，自己做個小練習就可以多了解:
  

  var obj = {"湯類"   : "酥皮玉米濃湯", 
             "小菜"   : "炒杏胞菇", 
             "麵類"   : "泰式酸辣麵", 
             "主菜"   : "香菇山藥枸杞粥", 
             "副主菜" : "天香火鍋" 
            };
  for(var k in obj){
     console.log("菜色編號: " + k + " 名稱: " +obj[k]);
  }   
  
  console.log("請問今天有主菜嗎?");
  
  if(obj.hasOwnProperty("主菜")){
        console.log('Yap,今天有主菜!');
  }
  console.log("那今天有飲料嗎?");
  
  if(obj.hasOwnProperty("飲料")){
        console.log("有");
  }else{
        console.log("沒有");
  }Check out this Pen!

• 1-46 : shift是將陣列第一個元素取出來
              push是堆疊，reverse是順序顛倒排序的意思
• 1-47 : C應該是72

第二類: 
第二類其實只要多看看w3c school就好了，但過來人的經驗請不要輕忽基本的問題，因為通常都會敗在最簡單的問題XD

• 2-10 : cite標籤適合拿來做為文獻的引用，書名等標題
• 2-11 : dfn標籤通常拿來放一些術語，比方說<dfn>HTML</dfn>
• 2-20 : 順帶一提，q跟blockquote的差別有點像是:
  q適合比較短的文字，幾乎是一行就可以解決的引用;
  而blockquote適合比較長的一段內容

第三章:

• 3-04 :用for屬性 ex: <label for="XXX"></label>
• 3-07 :是max而不是maxlength
• 3-39 : input type="file" 若要可以多選的屬性可以這樣寫:
  multiple 或是 multiple="multiple" 或 multiple=""

第四章:

• 4-14 : audioElement沒有stop()這種方法 (我沒找到stop過，只看過pause() )
• 4-34 : canvas的linejoin有以下這三種屬性: bevel | mitter | round，預設是mitter
             (linejoin是用來 當兩條線交會的時候建立一個圓形的邊角)
• 4-54: 我自己個人的理解是，如果要畫一條線，需要這三個步驟
  
  
  

第五章:
搜尋w3c

第六章:
搜尋w3c

• 6-01 : 這題跟考SVG的大寫有甚麼兩樣? SVG (Scalable Vector Graph)
• 6-18 : Marquee-style所允許的value情況有 : Scroll | slide | alternate

第七章:

• Web儲存方面: HTML5提供server-side兩種儲存資料的方式
  
  1.   localStorage (7-01的解答)
  2.   sessionStorage
  localStorage 與 sessionStorage 的差別是，localStorage可以永久儲存(沒有時間的限制)，而sessionStorage針對單一的session做儲存
  
  localStorage跟以往的cookie的差別是，cookie能夠儲存的容量有限(每筆cookie不可以超過4KB，超過會被裁掉)，localStorage較能儲存大量的資料
• 應用程序緩存方面:  為什麼需要mainfest?
  
  • 讓用戶可以離線時也能瀏覽
  • 將ㄧ些資料做cache，加快速度
  • 減少跟server互動，只需要去跟server要更新過的資料，白話ㄧ點就是減少server的負擔
   
•  Web Worker是屬於外部的js，不能存取window, document, parent。
• 7-03 : 關於Navigator.geolocation.getCurrentPosition，如果使用者不願意被知道所在的地點，error.code會有三種情況
• PERMISSION_DENIED=> 1
• POSITION_UNAVAILABLE => 2
• TIMEOUT=> 3
• 應該沒有0這個error.code，所以答案不會是D
• 可以參考這個網站 : http://dev.w3.org/geo/api/spec-source.html#position_error_interface ，裡面有error.code發生的情況解釋。
• 7-10 : 我想題目有錯字...
• 7-53 : WebSocket有ws或是wss的協定，ws就相當於http，wss則是相當於https。

總結:
第七章才是精華，要注意關鍵字，是問server-side還是client-side。
加油:)



後記:
考後成績98，證照get!