[雜記]使用JavaScript對DOM進行新增/複製/修改/移除/取代

只是一個小練習，當然一定有更好的寫法，請別鞭我><。

• 新增: appendChild
• 複製: cloneNode
• 修改: innerHTML
• 移除: removeChild
• 取代: replaceChild

appendChild:

Check out this Pen!

cloneNode:

Check out this Pen!

innerHTML:

Check out this Pen!

removeChild:

Check out this Pen!

replaceChild:
example:http://www.maht0x0r.net/library/computing/replaceChildExample.htm


還不錯的學習網站:

• IT學院
• Javascript入门到高阶

準備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!

IE9的window.open的神秘問題..

情境:

我下了一句a標籤onclick時的window.open事件，

在IE10可以開啟新的window，在IE9卻不行

(被其他Developer發現..，然後我的IE，默默的被更新到ie10我也沒發現><)

以下是簡陋版demo:

<a href="javascript:;" 

onclick="window.open('http://tw.yahoo.com','This-is-yahoo',config='height=480,width=600')">Go to yahoo</a>

想想看為什麼不行?

在console並無任何的錯誤，

明明照著規格寫，怎麼沒辦法window.open呢？

規格我是參考Mozilla Developer的網站

window.open(strUrl, strWindowName[, strWindowFeatures]);

我的問題出在第二個參數strWindowName

規格只有限制strWindowName不能有任何的空白(The name should not contain any blank space-引用自Mozilla Developer Network)

我的'This-is-yahoo'問題出在連 '-' 都不能有，'_'反而可以

結論:

將'-'改成"_'，就可以work了，神奇吧!

<a href="javascript:;" onclick="window.open('http://tw.yahoo.com','This_is_yahoo',config='height=480,width=600')">Go to yahoo</a>

BTW，其實我的strWindowName也可以用'_blank'之類的取代，只是這樣可能會違背我原先的意思，因為我可能需要判斷被window.open頁面是否有window.name而去做不同的事情或是UI顯示元件的不同。

解決windows下vim中文亂碼

在window底下的vim，打開檔案發現中文亂碼了..
解決方法依舊是修改vimrc這個檔



我是參考:
解决VIM中文乱码
(可行!)
執行結果:

其他參考:
http://yanue.net/archives/442.html
http://www.cnblogs.com/hopeworld/archive/2011/04/20/2022331.html

Note:

在window下打開vimrc的兩種方法:

或是衝到目錄找檔案，打開後修改，也可以!

為了工作的方便，這種小技巧還是必備的!

JSDC2013心得

今年是我第一次參加JSDC，也是第一次當志工，雖然我認為今年的議程非常的不錯，蠻高的百分比都鎖定在JavaScript的部分，如果不當會眾或許會有點可惜，不過我希望自己明年看看自己的程度怎麼樣在來考慮要當會眾還是志工:P，好! 以上都不是重點，接下來我要聊的是我印象比較深刻的議程:

長頸鹿(liberation) / Ragic 
- Ragic Interface 設計經驗分享 的演講:

這場演講對我來說收穫非常的大，思考前端如何去開發一個產品而不只是一個網站或是一個專案，用產品的角度去做，會有非常多的細節跟問題可能不是做一般的web可以想像的，也有一些技巧的運用是我平常沒有去想到的。

講者也介紹很多他們如何開發Ragic的雲端資料庫前端介面，這個雲端資料庫其實是很像Microsoft access+Microsoft的excel的感覺，那我覺得能夠將網頁的介面做得像應用程式而且又有即時儲存(local storage)的功能背後應該有很多問題是需要去解決的，當然我最想知道的是在這個開發過程中有遇到甚麼"問題"，以及這些"問題"是如何被"解決"，如何去處data的部分。 不過，我想這是講者40分鐘內講不完的事情，如果有機會我希望我可以了解的更深..


今年的贊助商搬出很多紀念品，我也去amazon拿了一個小提袋:)

阿修的演講其實我不是很了解內情，因為我沒碰app >< ，不過大概知道他在講些甚麼。

然後在最後一個議程結束後馬上衝到前面找Josephj合照一張 ><
不知道為甚麼總覺得Josephj充滿了前端魂!

結尾，

連續兩天下來其實還蠻累的呢，好久沒有幫忙這種大型的活動

這兩天準備好好的閱讀講者們的slide，然後更精進自己的實力:P
期待活動影片摟!

alt與title標籤

其實我拿這兩個標籤來講本來就有點怪，
alt與title本質上就是不一樣的東西，
一個是替代文字，一個是tooltip，
只是前幾天在看ㄧ題HTML5考題的時候，
突然腦筋轉不過來有點忘記了，所以真是印象深刻。

先來看看這兩個題目的問法:

• A題: 問當圖片無法顯示的時候，要在圖片上顯示替代文字時，可使用哪種屬性?
• B題: 滑過滑過一個a標籤時要產生類似tooltip的提示文字可以使用哪種屬性?

要釐清的點是
1. title屬性是全域屬性，alt是給img標籤使用的
2. alt的作用是當圖片無法正常顯示的時候才會有

所以，搞清楚了嗎xd

20130613更新:
"An img element must have an alt attribute."使用img標籤時alt是必要的。

JavaScript-同源策略

同源策略又稱同源準則(same-origin policy)
(通常看書應該是不知道在說些什麼，遇到了才知道xd，我覺得這是需要經驗才知道的事...)
它的定義大概是，不同來源的script不能讀寫對方的script，(除非有明確的授權，ex:Access-Control-Allow-Origin)
這裡只寫script是因為client-side的語言不只JavaScript，還有可能有ActionScript, ECMAScript。

怎樣算是同源?
就是這樣...

所謂相同協議就是http://這種。
所謂域名就是(只是舉例) http://www.blogger.com跟http://test.blogger.com ，www跟test屬於不同域。
怎樣算是不同port呢，比方說在做網站開發時你有自己的sandbox，你的網址是http://www.wintest.com:1234而正式的developer環境是http://www.wintest.com:8080，1234跟8080屬於不同port。


舉例來說
你在你的頁面加入了Facebook的按讚功能的iframe，你想要使用google分析偵測使用者有沒有按下那個讚，這是不可能的，因為這個行為並沒有遵守同源準則，這是我以前犯的錯，我並不能存取那個facebook按讚的DOM。

http不能存取https，http跟https這兩個是不同協議。
還有更多的範例請參考wiki ，我發現wiki的例子非常不錯!。

前端工程師阿...

Frontend?
(喃喃自語ing...)
在我大學畢業後的一年來，一直持續關注著人力銀行上的前端職缺，並不是100%想要換工作的心態在做這件事情，而是我想要知道，到底需要什麼技能，好讓我有個方向，不要走歪，才剛踏入這行沒多久而已，至今我還覺得我算是半張白紙，還有好好認真的空間，畢竟我想以前端為職(當然也並沒有特別排斥了解後端的事情，只是更愛前端多一點xd)，殊不知...到現在，我還是覺得好像很多職缺，對前端的定義，並沒有很一致，大致上，分為三種情況 :

• 很偏UI的前端 (心理曾經OS到底是找UI還是找f2e?! xd)
• 很偏後端的前端
• 前端(略懂後端)

看來看去就是這樣情況，總之零零總總，我已經迷糊了。

現在這種地步讓我覺得，只要會用plugin，就好像誰都會寫javascript了 ?!
好像會jQuery，就是會javascript了?!
所以我最近一直在思考這個問題，到底該如何讓自己在眾多前端人員內擁有差異化?
這件事情也讓我困擾很久(<--也有可能是我想太多了...)，我也跟普通人一樣曾經上網爬文過什麼前端該具備的技能阿~，前端工程師該知道的事啊~ 什麼有的沒有超級多文章，我不知道為什麼我突然最近心裡很爆發，我再也不想管這些了，再這樣下去煩惱有的沒有的人生太辛苦了，就這樣吧，好好把握自己擁有的技術，想學甚麼就學，不用管太多了。好好跟自己的內心商量一下，就不會這麼困擾了。

好文 -jQuery最佳实践

jQuery最佳实践  作者 阮一峰
今天碰巧在網路上看到的文章，覺得很不錯，看完之後對jQuery有更深的認識，以及 更知道怎麼用，推薦給也正在用jQuery的朋友們! 不過我對於第一點，使用最新版的jquery還是挺害怕的，(自從我經歷過jquery1.9的版本之後有點嚇到)xdd
 

在apache啟動gzip功能

在apache啟動gzip壓縮的功能對網站的效能有蠻大的幫助。
今天我找到了幾個如何在apache設定gzip的文章
(我的作業是系統是windows下架設的apache)

• 修改Apache配置文件开启gzip压缩传输
• Apache2 使用 mod_gzip 增進傳輸效能
• [Apache]mod_deflate(gzip)

步驟並沒有很複雜，就是做個設定
效果還不差呢!
我用page speed比較有沒有裝gzip的前後差異後，還真的有不少的落差(不過還是依個案而有不同)