[雜記]使用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的前後差異後，還真的有不少的落差(不過還是依個案而有不同)

4月份講座&聚會 總筆記

這一兩個月以來真是風風雨雨....，主要是對於自己的能力還是有些許的沮喪，還好不論再怎麼忙碌並不會影響參加聚會:P，而且偶爾多多接觸人群也是好事，消除我一點宅氣xd

我打算將這個月參加的活動做個總結，因為後來發現能寫的也不多，那就湊成一篇吧!

按照參加的倒序分別是:

• 04/29  BizLePro [BizLePro] 主題講座 #4：給資訊人的智財導論
• 04/27  2013iT邦幫忙交流聚第2回
• 04/13  JavaScript x Yahoo Group

---

BizLePro 講座 #4：給資訊人的智財導論


是說我對智慧財產權涉略很少(可以說是非常)，難得有時間可以遇到這樣的活動
有興趣的朋友可以趕快把握下一次的聚會
[BizLePro] 漫談小聚 #5 @20130513
時間: 19:00   地點名稱: Changee (台北市大同區南京西路 18 巷 8 之 2 號 3 樓)

以下是我凌亂&粗淺的筆記:
程式碼有著作權嗎? 有
怎樣算是有侵權的可能性? 造描，拿別人的東西來改
著作權以前是需要經過註冊的，現在不用註冊
著作權擁有50年的保護(人的話是以那個人掛掉之後開始算，法人的話是以出版之後開始算起)
專利權是為了保護一份技術，需要申請(申請皆需要一段時間)
專利權分三種(發明,新型,設計)
程式碼在申請專利上尚有爭議
以美國來說的話傾向讓軟體有專利
商標權(需要註冊)，所謂的商標包含形狀,文字,立體商標
營業秘密雖然不用登記(且無期限)，但不登記的話較無保障
 ex:可樂的祕方

Public Domain -->完全沒有任何權利在上面，有點類似公共財的感覺

另外可參考:
網路自由與法律
零時政府
我後來在知識+找到一篇文章可以參考:關於程式碼的著作權

我還有很多問題等著慢慢被解開，下次再來補充吧! 另外感謝強哥解答我的問題 and
也很感謝ant提供這個網址讓我了解更多關於設計師vs著作財產權的事情
設計師不可不知的著作權概念

---

iT邦幫忙交流聚第2回

(為甚麼整場只有拍自己的識別證呢?! 對不起.....我也不知道><)
這是我第一次參加it邦幫忙的聚會，主要是希望聽到php big data的相關知識
it邦的網站也有分享出那天兩位主講者的ppt，
可以去看看
【更新:食夢黑貘簡報上傳】2013iT邦幫忙交流聚第2回照片集

不過很酷的是，去了之後我發現我誤解了php big data的意思了，雖然我聽完了仍然沒有很理解，可能是我的功力太低(淚奔)，不過這是一個很難得的經驗啦，畢竟我覺得工作上要遇到有這樣需要處理big data的開發環境的機率應該是不高

---

JavaScript x Yahoo Group

這一場是由JavaScript.tw , JSDC , Yahoo Taiwan共同主辦的活動，
主講的內容主要是TonyQ介紹websocket 跟socket IO以及 ant帶來的前端資安分享
最後還有聊到一些backbone.js的內容，以及大致參觀YahooTaiwan的環境
我對於yahoo那個提供早中餐的地方實在非常感興趣，可能是第一次看到有公司可以這樣吧(超級興奮地拍下他們的菜單)
雖然那天天氣不怎麼好，現場還有空位，不過收穫很多，主要是難得有機會參觀yahoo的工作環境，另外ant會在今年JSDC對前端資安有更深入的介紹。

在apache關閉X-Powered-By的方法

為了在Response Headers避免暴露了自己的php版本
像這樣:

所以要去做些設定
首先打開php.ini
將expose_php=On

改成expose_php=Off


然後重啟apache，完成!

有興趣可以參考:

关闭 php X-Powered-By 信息

Apache Tips & Tricks: Hide PHP Version (X-Powered-By)

解決https不能存取http CDN url 的問題

恩...這問題挺有趣的，答案簡單可是我第一次遇到的時候還真是挺傻眼
個人猜測這是跟網站的同源策略有關係。

比方說我有個https的網站，要存取http://開頭的某些javascript的CDN

像這樣的話:
https://myweb.com 去存取
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

就會出錯(奇怪的是只發生在Chrome)。
而且console.log還會吐錯誤給我看，
不過我現在有點忘記那個錯誤訊息是什麼了
類似:
The page at https  ..........   ran insecure content from http

解法就是把原本的
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
改成
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
把http:整個刪掉，(雖然這樣寫看起來很詭異，但是是完全有效的src的值，不要刻意去指定cdn的url是http還是https)，屆時不論是用http或是https去存去這個cdn，就不會出現剛才的問題。

• 參考:
  HTTP and HTTPS with Google CDN

HTML的全域屬性

所謂的屬性就是attritube，我這裡所寫的就是我們在HTML標籤所下的屬性 :
像是...
<標籤名  屬性="值">Content</標籤名>
example : <a title="Hello!">你好!</a>
這裡的title就是一個全域屬性，可以用在所有的元素上面。

全域屬性的表:

屬性名稱	值	功能	備註:
accesskey	單 [A-Z] 字元	存取該元素的鍵盤快捷鍵	過去html4不支援，html5回復支援
class	類別的名稱	對該元素取個類別名
contenteditable	布林值(true/false)	該元素是否可以被使用者編輯
contextmenu	menu_id	定義元素的上下文功能表	主流瀏覽器大部分都沒有支援
dir	ltr/rtl	文字顯示的方向	很少聽到有人在用這個..
draggable	true/false/auto	是否可以對該元素進行拖曳
hidden	hidden	對該元素隱藏
id	id名	對該元素指定一個id名	他是唯一值，一個檔案不能有重複的id
lang	自然語言程式碼	存取該元素的鍵盤快捷鍵	lang="en"
spellcheck	布林值(true/false)	是否對該元素進行語法(拚寫)檢查	html5新增的屬性，大部分瀏覽器已經支援
style	該元素的樣式	定義該元素的行內樣式	style="font-sizt:12px;color:#fff"
tabindex	數字	用tab鍵可依序指到該元素的位子
title	文字/內容	該元素的相關描述

當然還有另外一種屬性叫做事件屬性(事件屬性也有全域的，常見的onClick就是)，主要是用來觸發執行javascript之類的屬性。

不過要注意一件事情是，雖然事件的全域屬性可以用在所有的元素，
但他不一定會作用。

(且基於安全性的問題，
若非罕見情況或是逼不得已的情況，我已經盡量不用事件屬性了(<--僅供參考))

git 的 cherry-pick

不是很確定文，只是隨手紀錄一下.... ，
可以忽略此篇文章，若有寫錯煩請糾正我一下，感謝!

cherry-pick 的定義是:Apply the changes introduced by some existing commits 

或者說...只合併指定的 commit
可以選擇某一個branch(分支)的一個或好幾個commit(s)操作
或者說...針對已經存在的commit 進行再次提交

講白話一點就是比方說我想要merge某些特定的commits從一個branch到另外一的branch，會這樣做是因為我希望只有某些特定修改的項目要merge，而剩下的就留在原來的地方，可能是我不需要上那個功能等等。


假設有兩個branch(staging, development)
在沒有做任何修改是這樣 :


A-B  staging
       \
        C-D-E-F-G  development


然後我新增了兩次 commit
分別是 H 跟  I 到 development 環境，就會變成:

A-B  staging
       \
        C-D-E-F-G-H-I  development


接下來可能因為專案的需要我必須只上H,跟I到staging的branch
其他的部分留在development，這時可以用cherry-pick
cherry是櫻桃的意思
這時候的櫻桃就是指 H,跟 I 了 ，把他pick起來送到staging這個branch

首先先切換到staging:
$ git checkout staging

然後cherry-pick H,跟I :
$ git cherry-pick H
$ git cherry-pick I
如果當初推的順序是先H再I，cherry-pick也要照這個順序
cherry-pick的行為有點類似merge

然後就可以push了

如果是使用cherry-pick 後不用 commit
因為對cherry -pick來說就是一次新的commit

但若使用cherry-pick -n(一次合併好幾個) 後要重新 commit



希望我有機會實作到這個部分再來寫更多的筆記。

參考:
Git 初學筆記- 指令操作教學| Tsung's Blog
Cherry-Picking specific commits from another branch