2014年11月28日 星期五

20141128 今日學習

為了要搞遠端連線，搞了一個下午搞死我了，還好最後成功了
張貼者： 於 沒有留言:

2014年11月27日 星期四

20141127 今日學習

根據20141125的進度，該繼續補充20141117 今日學習的內容，要從Custom Elements: defining new elements in HTML的How elements are upgraded這節，同時也要繼續學習progress bar，繼續補充20141126 今日學習的內容。

從白色的力量算起，柯P的第三本書，柯P的第一本電子書，柯P真的走得很前面

在王景弘的動態看到一個沒看過的東西GitBook，估狗看了下面兩個網站，感覺是node.js相關的，目前還沒空研究，先記錄著吧

除了決定買ASUS 華碩 VS207T 20吋LED顯示器，2988＄放租屋處，但是三井的網站沒什麼介紹，所以找了光華的介紹，而且發現學校電腦週邊只准報2999＄。

最初原本要買i-gota VGA高畫質超細扁平線(3+6) 1.5米的線，因為評價似乎不錯，看了光華的介紹才注意到這螢幕可以用DVI，DVI的畫質比d sub好，三井只有兩種牌子可以選，到時候再問店員好了

看了織田紀香老師的演講，很有趣，老師人也很......瘋狂 XD，全台灣最正的偽娘


看這演講也順便去查了一下發現，他有老婆跟他老婆是一見鍾情，果然老天給每個人最適當的那個人陪伴在身邊
  • 講師：做自己都來不及了，織田紀香 | 女人迷 womany 
  • 很多人都會忍不住問他為什麼想要做偽娘的裝扮，那是因為很多人覺得那是 「不自然」 的事情，但是為什麼跟大眾不同，就是不自然呢？就像紀香說：『喜歡做女性裝扮這件事情，並不是我選擇的，我就喜歡這麼做。大眾能理解的或是不能理解的，其實也就是大眾能理解和不能理解的。所以對我來說，我就是我，這並不是一種選擇，我只是做我自己而已。』（值得更多尊重，中性：超越性別的美）
另外還有一個還沒看過的Ted x NCU演講，在此先備份


張貼者： 於 沒有留言:
標籤：

2014年11月26日 星期三

20141126 | Progress tag、meter tag

根據20141125的進度，該繼續補充20141117 今日學習的內容，要從Custom Elements: defining new elements in HTML的How elements are upgraded這節開始，但是我今天沒有如此做，而是去了解progress bar所需要學習的內容，明天11/27開始雙進度閱讀，同時學習不同的事物。

查看投票地點和名冊號次(第幾頁第幾號)，很重要!!!
討厭柯P的Xdite發佈她寫的Ruby書，For Free，雖然不認同她的政治理念，但我感謝她。
今天想看東瀛霸者李前市長的沃草專訪
發現該死的全程台語聽不懂QAQ，後來看沃草的動態發現有HackPad聯作逐字稿，HackPad真的太正了，這才是E化學習與分享模式
看到Teach for Taiwan發一篇動態，關於芬蘭教育的文章，真的很正
  • 芬蘭教育 世界第一的祕密 | 天下雜誌
  • 芬蘭不是砸更多錢辦教育，而是選擇「專注」策略，把資源配置在「最需要的地方」，也就是初級中學（相當於台灣國中階段）和學習遲緩者身上。 因為「這階段的小孩正發展自己的學習方法，需要最多的資源。」
  • 「我們強調的是學習，不是競爭，芬蘭絕對不會用競爭來刺激品質。」說得一口流利英文，亨卡拉再三強調，在芬蘭，教育的目的是學習，而非競爭。
從Custom Elements: defining new elements in HTML的How elements are upgraded這節開始。另外有必要研究昨天找到的Animated Progress Bar · CSS Demo，然後自行建構出我要的雙血條CSS，對於CSS的印象已經有點模糊了，所以先回去復習20141106 今日學習的內容，學習CSS的ID、class、span、div、grouping、nesting。20141113 今日學習的內容，學習CSS的Pseudo Classes、href，學習DOM，(15:40)。

測試了一下22-progress-bar-anim裡的index，(即Animated Progress Bar · CSS Demo)

套上CSS，文字置中風格美麗漂亮
未套上CSS，文字擠在左上角，醜陋
所以說要借鏡這CSS的美學，然後用custom element像是mike-map那樣，來當作我們遊戲的血條
偶然發現，Three.js裡有progress bar的code，請見這篇
progress bar、Meter資料查詢
由於要學習progress bar CSS的緣故，搜尋相關資料

看CSS3 Progress Bars | CSS-Tricks看到一個奇怪的寫法 ">"，估狗找到What does the ">" (greater-than sign) CSS selector mean? - Stack Overflow這篇文章   (尚未閱讀)

另外發現這篇文章的寫法似乎是較舊的寫法，較新的方法是透過HTML5內建的 progress tag、meter tag，基礎知識可看以下三篇文章

progress tag
meter tag
在這篇裡除了文字說明外，還有透過codePan來show demo，私心認為要練習HTML與CSS的基礎用CodePan會比用JSBin還要好
另外由於我們希望能直接操作progress bar，所以必要撰寫script，這篇文章有相關的範例
StackOverFlow上面也有如何撰寫script來操作我們的progress bar，有放demo在他的JSFiddle上，在輸入框裡按下鍵盤上的enter鍵，就可以讓血條上升
資料查詢就先到這裡，我不知我是否足夠聰明，但我知道我夠聰明來開始，當我完成時，我就更聰明了。

學習Progress Bar、Meter

從閱讀The HTML5 progress Element | CSS-Tricks這篇文章開始。我們透過progress element來生成progress bar，progress element有兩個基本attributes：max與value，我們可以先看<progress> - HTML (HyperText Markup Language) | MDN對這兩個attritube的介紹，一個簡單的例子<progress value="30" max="100">70 %</progress>，它的概念非常的簡單，我已經在JSFiddle上測試過了，它的概念真的很簡單max就是你的最大HP，value就是你現在的HP，所以這段code的結果就是我剩70%的血。
(以下2014/12/02更新)

現在讀The HTML5 progress Element的Styling progress bars這節。在CodePen上練習，早上在CodePen實作了-webkit-progress-bar與-webkit-progress-value這兩個。-webkit-progress-bar成功看到效果，但是-webkit-progress-value失敗，-webkit-progress-value的paradigm中看到一些gradient的東西，paradigm裡CSS裡的gradient在Cross Browser HTML5 Progress Bars In Depth這篇看到有相關介紹，這篇讀完可以找機會閱讀這篇。 (尚未閱讀)

在實作時遇到coding CSS卻沒讓我們DOM裡的elemetn產生變化，困惑一陣子看了Cross Browser HTML5 Progress Bars In Depth的But I Want To Style Them My Way!這節的第一小節Step 1: Turn off default styling裡第一個paradigm，在CSS的開頭加入progress, 如此一來就會讓All HTML5 progress enabled browsers。
終於有效果了
(以下2014/12/03更新)
現在讀The HTML5 progress Element的Adding Animation這節。學習到Adding Animation這節時發現學習成效不太好，換The progress element | HTML5 Doctor這篇文章閱讀，並開一個新CodePen一邊讀一邊實作。這一篇我們學習道可以撰寫<progress><span>0</span>%</progress>在透過script去操作progress bar的value，這篇中常使用到Math.floor，估狗看到Math.floor()最大整數 | Javascript，可以取得小於等於的整數，i.e Math.floor(46.385)，取得46。

在閱讀這篇時知道，若要修改progress bar的外型，在chrome與Safari，要修改progress bar的外貌要透過兩種pseudo-class，progress::-webkit-progress-value 修改progress bar裡value的color，progress::-webkit-progress-bar修改progress bar裡background的color。在閱讀這篇時，有提到一個keyword，meter tag。並提供一份資料可供閱讀
由於實作The progress element 的paradigm沒看到效果，所以先測試HTML 5 Tutorial Progress Bar For Progressive Javascript Events Processing這篇的paradigm在CodePen上面，確實可行，下午回家後繼續實驗與閱讀。

找到一個progress bar的demo
還需要更多progress bar的知識，於是先閱讀How to use the Meter & Progress Elements | Treehouse Blog，由於已經有一點知識了所以我直接從STYLING PROGRESS BARS這節開始讀，有趣了，我們可以先刪除browser內定的style，透過把-webkit-appearance、-moz-appearance、appearance這三個attributes設為none，就可以關掉browser預設的style，測試發現不同瀏覽器none style都不一樣 XD
(以下2014/12/04更新)
另外如果我們想要調整meter的長寬的話，則要在CSS設定meter{width:任意數字px, height:任意數字px}，width改變長度，height改變高度
接著我們來為progress bar做造型，透過progress::-webkit-progress-bar{修改style}。首先修改border-radius，測試結果如下
在撰寫CSS時要注意，與JavaScript不同的點在於，CSS每行都要加分號。不同於Chrome/Safari，FireFox只有-moz-progress-bar可以控制CSS style，這段先跳過。

現在繼續The Meter Element這節。meter tag與progress tag相似，但是卻有不同的purpose。progress tag是用來說"完成"了多少進度，meter tag是用來"量測"一個刻度、量尺
  • <meter> element is used to display a measurement on a known scale
照這樣看來，如果我要做血條，meter會比progress更適合。查了一下meter的意思：計量器，儀表。有趣了，meter的attritube好多喔 XD
  • min – The minimum value on the scale.
  • max – The maximum value on the scale.
  • low – The upper-boundary of the low section on the scale.
  • high – The lower-boundary of the high section on the scale.
  • optimum – The optimum value.
  • value – The measurement.
這裡面只有value是一定要有的，其他都使選擇性的。

插播一下，也順便估狗一下如何用three.js 做meter
另外這篇雖然是談音響動畫的，但也有提到一些meter的構想
很可惜，three.js裡meter相關的資訊真的不多。

另外也找了一下，如何用JavaScript操作meter以及demo
另一個JavaScript操作meter的demo

接著回到這篇文章繼續，有趣的是透過把-webkit-appearance、-moz-appearance、appearance這三個attributes設為none，在Chrome與FireFox測試，並沒有改變style，可能meter當初預設時就是如此style吧。讀到這時我跑去瀏覽另一篇文章The HTML5 meter Element | CSS-Tricks，好像不錯所以先跳到這篇讀，這篇的Experiment #1 - Different states of meter element這節，讀了後了解meter的attritube要怎麼用了，直接用progress bar with script pt.1來測試，low="25" high="75"，這是我們的正常範圍，value若是低於25或高於75，則會出現警告配色。
接著繼續瀏覽這篇，學習-webkit-meter-optimum-value這pseudo class並測試之發現一件有趣的事，配色若是沒有成對撰寫，會有漸層的效果
meter::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient(
  90deg, 
  #8bcf69 10%, 
  #e6d450 25%, 
  #f28f68 55%,
  #cf82bf 80%, 
  #719fd1 100%
  );
  background-size: 100% 100%;
}
若不想要看到漸層，想看到明確的分層，可以這樣做
meter::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient(
  90deg, 
  #8bcf69 10%,
 
  #e6d450 10%,
  #e6d450 25%, 

  #f28f68 25%,
  #f28f68 55%,

  #f28f68 55%,  
  #cf82bf 80%,

  #cf82bf 80%,  
  #719fd1 100%
  );
  background-size: 100% 100%;
}
他的概念其實很簡單，為了避免下一層的顏色漸層，所以你先讓下一層的顏色，重新塗一次上一層的範圍。

再來讀CSS3 Transition/Animation這節。剛剛我們撰寫meter的pseudo class，meter::-webkit-meter-optimum-value，使我們的血條色彩能分層，若我們想要與血條有所互動，可以用:hover來操作，以前沒學過:hover，所以我估狗讀了這篇教學 | CSS 網頁互動的好幫手 - hover的應用 @ Dribs & Drabs :: 痞客邦 PIXNET ::，原來:hover是讓滑鼠游標移到DOM理特定的child node時會產生特殊效果，它的概念如下node:hover{產生所要的特殊效果}，當滑鼠移到DOM中的node時，產生所要的特殊效果，恩....這不是我要的，我還是要從JavaScript去著手，所以這段瀏覽看看就好。

(以下2014/12/05更新)
The HTML5 meter Element從Pseudo Elements這節開始，在此之前我們先來練習一下透過JavaScript操作meter，首先閱讀meter - JSFiddle與HTML5 meter element - JSFiddle，並開啟一篇新的CodePen | control meter by script來練習，為了要創造button來操作meter，所以再加讀When To Use The Button Element | CSS-Tricks這篇，讀這篇時開了button by script - JSFiddle來練習最後面純用JavaScript創造button，實作時有個小插曲錯誤的寫法body.appendChild("button");應該要body.appendChild(button)這樣寫才對，但這樣寫有個缺點，不清楚頁面上到底有多少個button，個人還是較偏好在DOM裡用button tag再加上onclick attritube。

反思
稍微思索一下，為何會犯這錯誤，應該是因為前面寫document.createElement()與document.getElementsByTagName()以及addEventListener()都是要用"thing's name"，所以才會在用body.appendChild()時搞錯，再提醒一次appendChild(object)。

於是參考另外一篇onclick Event | W3School的第一個demo參考操作button的寫法，control meter by script | CodePen已成功瞬間砍血增血，但是沒有漸進的動化效果。起初有考慮像HTML5 meter element - JSFiddle使用setInterval，後來想起以前在20141027 今日學習有紀錄不要用setInterval與setTimeout，於是回去閱讀20141027 學習操作requestAnimationFrame。

(以下2014/12/06更新)
今天早上修改了control meter by script | CodePen，測試雙血條，以測試成功可以動了，一切功德圓滿可以上台北了。
  (從這開始)

(以上2014/12/02、12/03、12/04、12/05、12/06更新)
張貼者： 於 沒有留言:
標籤： ,

2014年11月25日 星期二

20141125 今日學習

終於，我們可以回來學習CSS相關知識了，根據20141120 今日學習要繼續學習get/set，繼續補充20141117 今日學習的內容，所以讓我們開始吧 (15:30)。
22:00結束今天這回合，確定學習完get/set以及descriptor，明天要從Custom Elements: defining new elements in HTML的How elements are upgraded這節開始。

看了V作戰的設計理念，居然是一位整型醫師(女生喔)設計UI遊戲界面的，真的太正點了，有許多可以參考當作遊戲點子的

從中啟發去估狗progress bar CSS，看到這DEMO真的太正了，下載下來學習了

玩一個心理測驗，好準 QQ
非常有趣的作品，太迷人了
看了很動人的一篇文章，年薪百萬的資訊人參與柯P的團隊，而且他也是寫JavaScript的王景弘先生，真的很優秀很棒，自己的城市(程式)自己救。


張貼者： 於 沒有留言:
標籤： ,

2014年11月24日 星期一

20141124 今日學習

看了黃國昌老師在Ted x Taipei的演講


由於昨天太累的緣故，現在才要來弄明天代班的投影片，我想讓學生重拾起勇氣、夢想，參考資料：蘇文鈺老師的program the world、LuLu Hand；Jserv的嵌入式系統課程

看到一篇文章說不推薦，W3School的教學文章
準備投影片時重讀了這篇文章，滿喜歡的

現在開始備份各種明天演講的投影片素材

演講順序：

從小我們被灌輸了不少觀念，但有多少是真正屬於你的?

你是誰

你在乎什麼

我教過的陸生，她追尋著她的舞蹈夢

不務正業

露露手、戰鬥法律人、業界打工仔、g0v、沃草

你該做你自己

你該順從自己的直覺

為何我要談這主題

我學弟跟我說一個3X歲還在重考要考台大的故事
張貼者： 於 沒有留言:
標籤：

2014年11月21日 星期五

20141121 今日學習

昨晚臨危授命，下週二11/25要代班機率，而且只要上一個小時，原本在思考要教什麼好，嬌機率嗎？一個小時其實可以教不少東西，但是今天早上突然想到，我應該跟這些學弟妹談談人生、談談思想、談談個人主義、談談夢想，於是演講內容決定。

看到一篇很正的文章，並擷取一段我喜歡的文字
  • 李歐梵：一流大學從不緊張排名 | 灼見名家
  • 教育的意義就是給予，理應不問收穫。「我在哈佛當教授的第一年，拿了筆奬學金，可是錢有點不夠，後來該校主動問我暑假要不要錢。他們給我錢的條件只有一項，就是要我學點東西，我說我要學俄文，他們也非常歡迎。你想想，我當時的專長是中國現代史，和俄文是絲毫沾不上邊兒的，為何他們願意給我錢，讓我學和工作完全無關的學科呢？原因就是，大學應該提供廣義的教育傳統，這也是教育的意義，不能要求一年生樹，二年結果。
  • 「專業化」扼殺創意 Bell Telephone Laboratories 的例子帶出了李教授的另一個辦學理論：「大學教育的最大悖論——愈專業化，創意愈少。追求專業化的後果，就是令大學環境出現變化，使學者愈來愈難寫出一本大書。我常常問人文學者，包括我自己，近10年、20年有哪一本書是全世界的學者都在讀？」
很正的另一篇文章，談所謂的薪資與社會
  • 台灣工程師的矽谷故事: 到底是魯蛇還是社會虧欠我們
  • 所以說穿了，年輕人能領的薪水，很大的決定因素是在於這個社會能夠如何運用他們，這個社會的掌權者、這個社會的中監份子，能為年輕人創造怎樣的舞台，如果掌權者創造的社會有價值，能夠利用年輕人創造更多的價值，那麼年輕人自然能夠領高薪。
張貼者： 於 沒有留言:
標籤：

2014年11月20日 星期四

20141120 今日學習

繼續補充20141117 今日學習的內容，正在學習get/set，尚未完成。

讀到一篇很正的文章，我尤其喜歡這兩句話：「時間也是一種感情，而且是無法抹滅的累積」、「幸福在於你有沒有體會，而不是對方有沒有給予」。
讀到一篇文章，非常之心有戚戚焉，想起我念大一後就自動放生課業成績，只為了找出我自己是誰，想起我弟沒勇氣玩自己有興趣的街舞，只得一味迎合我媽的乖乖念書
張貼者： 於 沒有留言:
標籤：

2014年11月19日 星期三

20141119 今日學習

繼續補充20141117 今日學習的內容，已學習完Object.create()，為了要徹底解document.registerElement()較快的寫法，正在學習get/set，學習尚未完成，明天繼續。
張貼者： 於 沒有留言:
標籤：

2014年11月18日 星期二

20141118 今日學習

昨天進度有點差，繼續補充20141117 今日學習的內容，學習DOM裡如何製作custom element。

還在學習Object.create()，且進度未完，明天繼續
張貼者： 於 沒有留言:
標籤：

2014年11月17日 星期一

20141117 今日學習

開始學習自定義的pseudo classes
對於這主題，估狗找到另外三篇相關文章

<第一種寫法>
首先我先閱讀Document.registerElement()這篇文章，如果我們想要用個客制化的element，就必須使用var container = document.registerElement(tagName, optional )。registerElement()的第一個parameter就是我們的custom Element的名字，第二個parameter是可有可無的，所以一般來說我們可以直接用var customTag = document.registerElement('tagName')即可，在下一段會討論如何用第二個parameter，不過要注意，到這一步你只是建構出了一個名為customTag的constructor，若你要生成一個可以用的object，則需透過new customTag()。接著你就可以把customTag加入你的DOM，透過以前學過的
document.body.appendChild(new customTag())
。到了這一步，你已經為你的body tag裡面生成了customTag這個element，裡頭還是空的啊，所以我們依舊要在script下繼續撰寫，以這篇的diagram為例，用Tag的名字取得Tag，透過var mytag = document.getElementByTagName('customTag')抓到你自己做的的customTag這個tag後(藉由mytag這object)，並為它加入些內容，例如mytag.textContent = "handsome"，這篇文章結束。

接著學習Custom Elements: defining new elements in HTML這篇，直接從Registering new elements這節開始，在這篇就提醒了剛剛疏忽的重點，我們客制化的tag，它的命名一中間一定要有dash，即"-"，於是我們會生成出像是<x-tag>、<my-tag>、<fresh-tag>...etc。所以應該改寫為var customTag=document.registerElement(custom-Tag)，為了讓parser解析器區別原生與客製的element，所以要加dash。

 這篇文章接著提到了registerElement()的第二個parameter，跳轉到同一篇的文章的Adding JS properties and methods這節，registerElement()的第二個parameter是可以讓我們為custom tag加入properties and method。

(以下2014/11/18更新)
這節的paradigm，提供了我們一個不錯的架構與思考邏輯，來學習如何為我們的custom tag 加入一些properties and method。在paradigm中可看到，它是在registerElement()的第二個parameter寫下{prototype:XFooProto}。這個XFooProto是一個variable，透過Object.create()所定義的，OK  那Object.create()是什麼? 於是估狗到這篇文章Object.create() - JavaScript | MDN。原來Object.create()會產生specified prototype object and properties。Object.create()的synatx如下Object.create(proto [, propertiesObject])。可以看到parenthesis內的寫法很奇怪，但她其實是代表Object.create()裡有兩個parameters。第一個proto是指prototype object，參考自Using "Object.create" instead of "new" - Stack Overflow，裡面的回覆裡有一段說得很好，Object.create()的優勢是可以直接繼承其他object
  • This methods allows you to easily implement differential inheritance, where objects can directly inherit from other objects.
接著讓我們先跳到Object.create() - JavaScript 第一個paradigm來實際體會吧。如paradigm所示，一開始先透過function keyword去創造一個名為Shape的constructor，並為Shape賦值x, y這兩個properties。但是我們的shape constructor裡沒有method，所以透過Shape.prototype.move=function{}來為我們的shape加入method。後來發現我對prototype的記憶有點模糊了，於是回去讀20141101 今日學習，並搜尋JavaScript Prototype in Plain Language | JavaScript is Sexy，回去讀自己的筆記，一開頭我就寫下property也是variable，換句話說，property是object，JavaScript Prototype in Plain Language這篇文章在Prototype Property: Prototype-based Inheritance這節有著下面的一段話
  • In JavaScript, you implement inheritance with the prototype property.
所以我們看到的Object.create(Shape.prototype)或var XFooProto = Object.create(HTMLElement.prototype)，Object.create()裡面的第一個parameter都是object。
注意，以Shape這constructor為例，你不能只寫Object.create(Shape)，這樣的寫法是錯誤的，Shape是由function keyword所定義的，他是一個constructor不是一個variable。對於Object.create()的第一個parameter是object有更深的體會，我們閱讀Object.create(): the New Way to Create Objects in JavaScript這篇文章的The Object.create() Method這節，請閱讀這節的第二個paradigm，另外也可閱讀"Object.create" instead of "new" - Stack Overflow打綠勾的paradigm，如此一來就一目瞭然了。

至於第二個parameter是作什麼用的呢?我們可以透過Object.create()來繼承其他的object，那如果我想要為我創造的這個object加入新的properties and methods呢，這時我們就要用第二個prarmeter了，請先回過頭來讀Object.create() - JavaScript 這篇的第三個paradigm。

(以下2014/11/19更新)
先讓我們繼續閱讀"Object.create" instead of "new" - Stack Overflow打綠勾的paradigm，它下面的文字就有說，Object.create()的第二個argument就是拿來為我們要新創的object設定properties，也可以透過另一種方式Object.defineProperties() and Object.defineProperty()。

OK，何謂Object.defineProperties() and Object.defineProperty()，以及要如何用？參考閱讀How to Create Custom HTML Elements | Treehouse Blog，搜尋：Object.defineProperty()，可以看到Object.defineProperty()有三個parameters，第一個要是你的prototype object是你想要加入property的那個object，第二個是name of property，第三個是property的內容，在第三個parameter，你可以設定property的value與writeable。
  • The first parameter should be your prototype object; the second is the name of the property; and the third should be an object describing the behavior of that property. This is where you can set a default value as well as specify whether the property is writable or read-only.
(以下2014/11/20更新)
在閱讀JavaScript Getters and Setters這篇的The official way: Object.defineProperty這節，裡面的第二個paradigm之後的文字，有著對Object.defineProperty()較妥當的例子，Object.defineProperty(person, 'age', {value: 42});創造出person.age，而且將age的value設為42。
(以上2014/11/20更新)

<第二種寫法>     <這邊有custom tag的完整邏輯> 
對於Object.create()有基本了解後，現在我們可以回到Custom Elements: defining new elements in HTML的Adding JS properties and methods這節，已經有能力閱讀這節的paradigm。透過Object.create()所產生的object，如果要加入method，用傳統的createdObject.method=function(){...}即可，這段paradigm為我們提供一個完整的架構，step.1 and 2我們自定義了var XFooProto的value，即XFooProto的method and popperty，但是這只是定義出來，在我們的DOM裡還沒有這個definition，於是Step.3，我們要為我們的DOM註冊這個定義，透過var XVoo=document.registerElement('x-foo', {prototype: XFooProto})。現在我們的DOM已經有了它的定義，下一步我們要創出instance aka 實體，透過xfoo=document.createElement('x-foo')，到此我們已經創出instance，現在我們要把這instance加入我們的DOM的body tag裡面，透過document.body.appendChild('x-foo')。

圖片化上面思維的概念   (以下2014/11/25更新)

以上是第一種方法，為我們的DOM register new element(只下定義，尚未create instance)，如果不想要寫那麼多步驟，也可以參考這節的第二個paradigm，直接寫
var XFoo=document.registerElement("tag-name",{
      prototype: Object.create(ProtoOnject, {values, use get and set})
    }
)

<第三種寫法>

 (以上2014/11/25更新)
個人較偏愛這樣子的寫法，你可以少寫一次var就盡量少寫，但是這樣的寫法要學習get/set，印象中在Object.create(): the New Way to Create Objects in JavaScript這篇文章的The Object.create() Method這節，在這節的第二個paradigm也有看到如此寫法，2nd paradigm後面的文字一學習發現就發現Descriptor這new term。Descriptor有Data Descriptor與Accessor Descriptor這兩種。我們先來討論Accessor Descriptor，因為我們要用get and set ，這兩個東西其實很簡單，如其字面意義一樣，get是取得，i.e: obj.prop，你只是取得object的property，你不修改property內的value，get: function(){return something}。而set是設置，i.e: obj.prop="fresh value"，你取得object的property後可以對其value做修改，
set:function(value){constructor's property=value.doSomeThing}。

(以下2014/11/20更新)
有約略的概念後我們繼續閱讀JavaScript Getters and Setters這篇文章，這篇一開頭就說傳統的JavaScript coding邏輯很醜 XDDDD，然後進入第一個paradigm，恩....很好，toString的用法是???於是我估狗找到JavaScript String toString() Method這篇，但僅是知道這樣還不夠，JavaScript Getters and Setters這篇的第一個paradigm裡還有一個split method，於是我又估狗JavaScript String split() Method這篇文章，這篇文章帶我們理解split method會透過","，把我們的string切割成數個substrings，然後return arrays。其用法如下，string.split(取代的內容)。

i.e: 若有一串string：var str = "How are you doing today?"，接著你把它用分割，若你想要以"a"為界線分割string，並把結果全都放在一起，則可以寫var res=str.split("a")，則output：How ,re you doing tod,y?，若你想要分割空格(" ")，則可以寫var res = str.split(" ")，如此一來output：How,are,you,doing,today?。在剛剛我們看到把分割結果都放在同一個object裡，那我能不能把分割節果分開來呢，當然還是可以，我們再回來看JavaScript Getters and Setters這篇的第一個paradigm，先寫var words = name.toString().split(' ')，
接著再寫this.firstName = words[0] || ' '與this.firstName = words[1] || ' '，
如此一來不用宣告array，你就直接把words這object當作一個array。

再來讓我們注意一下，為何JavaScript String split() Method的paradigm只要寫var res = str.split(" ")而JavaScript Getters and Setters的paradigm是寫var words = name.toString().split(' ')，這其實是因為要確保input進來的東西(name)是string，所以先用toString method把它轉成string，再用split method把它分割。

OK，基礎知識的學習完成後，我們還是要回歸正題學習JavaScript Getters and Setters。約略閱讀這篇後發現，在這篇文章所看到的第一個get/set的寫法並不是正統的寫法，請從The official way: Object.defineProperty這節開始，會發現到跟我們以前看過相同的，關於get/set的寫法，get:function(){...}與set:function(value){...}。另外發現有了get and set這兩個keyword，則稱之為accessor，這讓我們想起曾在Object.create(): the New Way to Create Objects in JavaScript這篇文章的The Object.create() Method這節看過。回去閱讀先前的記錄get and set這些accessor是用在設定object的property時用的。
(以下2014/11/25更新)
閱讀The official way: Object.defineProperty這節時，他有提到為何要用這寫法，最大的好處是我們不只可以使用get/set，還有configurable與enumerable這兩個keys可以用。
  • configurable (false by default): if this is true, the property's configuration will be modifiable in future.
  • enumerable (false by default): if true, the property will appear when looping over the object (for (var key in obj)).

但其實accessor裡不只這些，我們回去讀Object.create(): the New Way to Create Objects in JavaScript的Data Descriptors這節開始往下看，可以看到在處理object的property時，可以透過兩種descriptor還處理，分別是data descriptor與accesor descriptor。早先我們學的get/set是accesor descriptor，而writable、configurable、enumerable、value這些keys則是data descriptor。

data descriptor的default皆為false若要啟動起改為true，(i.e  writable: true)。要注意，若是想要讓你object裡的properties能夠修改，一定要把data descriptor改為true，若沒改就算你有修改，但是output結果並不會改變，compiler也不會報錯。

data descriptor
  • writable：讓你可以修改property裡value的值，JavaScript Getters and Setters的The official way: Object.defineProperty這節的第三個paradigm非常清楚。
  • configurable：讓你可以新增或移除object裡的property，透過delete operator，請參考delete operator - JavaScript | MDN。
  • enumerable：讓你可以使用for-in loop，for-in loop請看下面的討論。
  • value：就只是定義property的數值。

插曲：
來討論一下for-in loop，最早曾在20141101 今日學習這天學習過，但老實說觀念還不是很清楚，所以我們現在來學習for...in - JavaScript | MDN這篇文章。喔~~滿有趣的，for-in loop是專門設計給enumerable這descriptor用的，他是設計用來處理object裡的properties，透過跌代(interation)快速建立object不同的properties。寫法如下：for(propName in obj){...}。在這網頁的第一個paradigm可以清楚看到for-in loop的用途，首先先定義一個object，裡面有a,b,c三個properties，var obj ={a:1, b:2, c:3}。
接著用for(prop in obj ){console.log("show the obj." + prop + "=" + obj[prop])}
如此一來就會output出
show the obj.a=1
show the obj.b=2
show the obj.c=3
for-in loop就是一個簡單地快速顯示出你的object裡有哪些properties，以及他們的value。

data descriptor的各種example可參考JavaScript: Property Attributes: Writable, Enumerable, Configurable這篇，所以現在來學習這篇

到此get/set以及各種data descriptor的學習告一段落，學習完畢。

Custom Elements: defining new elements in HTML的Adding JS properties and methods這節
學習完畢，從Extending elements這節繼續。有趣了，透過registerElement，你可以繼承native elements或是custom elements。若你想繼承native elements，以button為例，在registerElement的第二個parameter可以用
{prototype: Object.create(HTMLButtonElement.prototype), extends:'button'}
custom element繼承native element，則稱之為type extension custom elements。

學習完inherit native elements後，接著學習繼承 custom elements，Extending a custom element這節開始。結果內容超短 XD，一樣寫extends:' custom-element '。(PS: 別忘了custom element的命名中間都要dash)

(以下2014/11/27更新)
How elements are upgraded這節開始。   從這裡開始

 

                                           

(以上2014/11/18、11/19、11/20、11/25、11/27更新)

張貼者： 於 沒有留言:
標籤： ,

2014年11月16日 星期日

20141116 今日學習

感謝Cindy招待我下午茶券，可以去君悅凱菲屋或君悅茶苑

12/29投票所地點
繼續昨天的學習，根據20141115的紀錄，繼續更新20141113 今日學習的進度，學習DOM。今天成功結束DOM的學習，明天繼續學習自定義的pseudo classes
對於這主題，估狗找到另外兩篇相關文章
張貼者： 於 沒有留言:
標籤：

2014年11月15日 星期六

20141115 今日學習

根據20141114 的紀錄，繼續更新20141113 今日學習的進度，學習DOM。學習完DOM後，要繼續學習自定義的pseudo classes
可惜的是依舊沒有完成學習DOM，只好明天11/16繼續了。

柯P爆炸帥氣的演講
我最喜歡下面這段

事實上我這次去美國，我到矽谷去看你知道嗎，我去矽谷和史丹佛大學看看，其實我還是有很多感觸。
  • 我去矽谷的時候，我就問說：矽谷為什麼會成功？有幾個秘訣：事實上，史丹佛大學開課，他是按照矽谷產業的需要去開課。我聽到那個史丹佛大學的教授在跟我講那個的時候，坦白講我內心有、震了一下。覺得滿慚愧的。因為我在台大也是當教授，我後來發現我們教的跟整個社會都脫節，所以噢、應該是整個大學的開課應當是社會需要什麼、產業需要什麼我們就開什麼樣的課。
看到高雄超帥氣圖書館的開箱文，大安總圖瞬間完敗 XD

轉貼台灣吧的報導時發了一則動態，與小賴有深度地討論，也觀賞了一段精彩的TED演講

想通了一些事，在此摘錄自己想通的結論
  • 看完這段演講讓我想起這幾天在思考的事，有時遇到價值觀衝突時，無論是自己或是對方都有可能脫口而出「我無法理解你的想法，怎麼有人會這樣想」，若雙方出現這樣的對話，我總覺得不太好，今天看完這演講，我更加確信，沒必要覺得"對方無法理解你或你無法理解對方"是一件糟糕的事，每個人成長背景不同，邏輯思維、思考模式根本性地不同也是理所當然的，真的沒必要評論無法理解對方或被評論自己無法被理解，想法不同，OK，無法接納，OK，但至少要能夠尊重與包容你我的不同
洗澡時突然有另一個領悟：

台灣這種海島環境，若要往海外發展跨國企業，企業裡的人更該要看過這段演講與理解你所說的。

會想到這是因為先前曾聽聞台大呂世浩老師在Coursera開的秦始皇，修課人數超過45000人，成為目前網路排名第一的中文課程。中國現在的環境充滿競爭，每每在新聞看到中國學生為了爭第一，連殺害同學的事都做得出來，狼性嚴重，這種競爭鬥爭心讓我想起呂世浩老師談秦始皇時，從始皇帝的崛起到衰敗的過程，非常值得處在高競爭的現在中國的環境與鬥爭文化，這應該算呂世浩老師的課"符合"現代中國人的"文化"，所引起的迴響

相同的概念，若一個外來企業想打入一個國家，應該先探討這國家的文化，如這段TED影片所講的，這樣才能少走較多冤枉路，而制定正確的策略。

讀了洪士灝的一篇文章：追求快樂人生的工程師。在此節錄我對這篇喜歡的幾段話
  • Sani在週一見到我時，劈頭就問，你最近有寫程式(coding)嗎？用什麼程式語言寫？這像是禪宗在提話頭、打機鋒，但對話細節就不足為外人道。他說他現在每天要寫三個小時的程式，一方面為了工作，一方面樂趣良多。我之前時跟大家提過一句標語：「改變世界最快的方法，就是寫程式」，我跟他說我在提倡程式教育，而且要提倡這些，必須由教授自身做起。
  • 我邀請他來我的場子演講，希望讓學生受惠。我認為，真正務實的國際化，不是請一堆大師來演講一些偉大卻對學生來說是遙不可及的研究成果，也不是校際之間彼此建立所謂的姊妹校、教授組團互訪的形式化的績效。學校「國際化」的主體應該是「學生」：我們如何讓許多學生有更多的機會直接感受外國的學術、文化，乃至於有那個見識、雄心、氣度去思考如何走出這個在很多方面還是頗封閉的島嶼，去開創自己和國家的未來。這些不是找些人來，或是出國遊歷幾週，膚淺地在形式上「交流」就行的。
  • 尤其是學生，不要只顧著眼前的利益，也不要有那種「覺得拿到學位就不必再學習了」的錯誤觀念。不要笑，我們很多人，包括我自己當年，也被這些錯誤觀念所誤。要明白傳統教育所包藏的禍心：讀書為考試，考試為功名，功名為利祿。搞到後來，沒錢的人不高興，有錢的人就真的高興嗎？
  • 作為研究生，做有意義的研究，應該是件快樂的事。如果不快樂的話，或許該趁還來得及的時候，研究一下如何追求快樂人生。你我的人生不同，我不能告訴你如何做，所以這是每個人自己的研究課題。工程、數理、哲學、宗教，是輔助研究的知識和工具；財富、名位、德行，頂多只是研究的資糧；心性和氣質，是研究者的境界，但非究竟。快樂是什麼？是人生中最關鍵的研究議題。

張貼者： 於 沒有留言:
標籤：

2014年11月14日 星期五

20141114 今日學習

滿有趣的一篇文章，老實說我比較喜歡法國人對性的態度
最近看到魔戒：魔多之影這遊戲時，偶然想到一個遊戲構想。一直以來我都把遊戲構想設定在戰鬥時切換畫面，但是這有一個問題，loading scene與model很花時間，若是遊走地圖與戰鬥在同一個scene呢，這樣就解決了畫面各自切換時loading time過長的問題


更新昨天20141113 今日學習的進度，學習DOM，尚未更新完畢，11/15繼續。

學習完DOM後，要繼續學習自定義的pseudo classes
張貼者： 於 沒有留言:
標籤： ,

2014年11月13日 星期四

20141113 今日學習

休息兩天，歸零，重新開始畫素描，畫圖與教書才是真正讓我喜悅的，學習與思考幾乎跟重訓沒兩樣，會耗費精力，只有音樂與繪畫不會讓我疲勞，可以一直專注。

收信時看到博客來的一本推薦書，已向圖書館建構
一直以來我的英文程度僅只於可以讓我自學專業，去圖書館也不會刻意去翻英文雜誌看，看雜誌頂多只有看GQ，除了裡面有各種妹的照片外，我還真的滿喜歡看人家打扮漂亮，今天翻這雜誌，以前就有看過一兩次，但都未認真讀過，今天隨手翻時，咦???這雜誌中英對照耶!!!
然後我覺得我可以多讀一些專業以外的英文了 
為此我特地用手機去載了一個離線字典，老實說滿好用的，英文戰力點滿！！！

昨晚的大消息，今天有中文報導了，M$開放Visual Studio與.Net
老實說我只對內文提到的Visual Studio Community 2013 免費有興趣，於是就去找了官方載點
仔細想想，我的電腦裡還在用Visual Studio 2010，好古老喔 XD

學習CSS的Pseudo Classes、href，學習DOM

根據20141110 今日學習的進度，要學習pseudo classes (發音：[ˋsudo] )，對於pseudo classes的定義，我較喜歡W3School於CSS Pseudo-classes所下的定義
  • A pseudo-class is used to define a special state of an element.
pseudo classes的syntax如下，selector:pseudo_class{property: value}。在CSS Pseudo-classes | W3School的第一個paradigm，看到一個不認識的keyword：href。估狗到這篇，簡單來說它就是拿來超連結用的
參考W3School的HTML a href Attribute，href這attritube其syntax如下：<a href="URL aka 你所要超連結的網址">超連結的文字</a>。但是僅是這樣是不夠的，我們在broswer上要顯示文字必須要用<p></p>這tag，所以組成的文字應該長得像這樣
<p><a href="URL">Sentence with link </a></p>

但僅知這些是不夠的，於是繼續閱讀Links | HTML Dog，這篇提到一個有趣的事，HTML名字的意義
  • The “H” and “T” in “HTML” stand for “hypertext”, which basically means a system of linked text.
另外他也說明了<a></a>，a這個tag代表的是anchor，也就是船的錨，錨可以固定，繫住其他的資訊
  • An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag - the destination of the link.
另外發現一件有趣的事，原來中文超連結的原文就是hypertext link。Links | HTML Dog這篇還提到另一個有趣的事，在href的URL，你可以改寫為href="#任意id"，透過在id前加上hash(#)，讓你在同一個頁面下跳到不同的section
  • A link can also send a user to another part of the same page they are on. You can add an id attribute to just about any tag
  • for example <h2 id="moss">Moss</h2>, and then link to it by using something like this: <a href="#moss">Go to moss</a>.
在這例子中我們又學到一個陌生的東西 h tag是什麼?，於是估狗之找到HTML h1 to h6 tag | W3School點入它的paradigm，一目瞭然， h tag是拿來控制字體大小的，h1 tag最大，h6 tag最小，它只適合拿來用在標題
  • The <h1> to <h6> tags are used to define HTML headings.
再來還是不太夠，我們需要知道多一些URL的資訊，估狗之找到
這篇未降讀，提到了ftp://與malto:，不過看code時還沒遇到，所以先跳過。

接著回去讀HTML a href 連結屬性依舊有許多值得學習之處。不同於前面幾篇在anchor tag裡只有用href這attritube，這篇另外提到在a tag裡可用target這attritube來決定你是要跳一個新分頁，我們已用HTML a href 連結屬性來測試<a href="URL" target="_blank"></a>的效果，成功。
  • a href 等號右邊用來放置要前往的連結網址（URL），target 是連結目標的意思，可以用來設定用何種方式前往連結，常見的有另開視窗（_blank）、直接於現在的視窗開起（_self）、開啟於父層框架（_parent）等，target 在 HTML a href 屬性中為非必要項目。
另外這篇也提到可以在anchor tag裡頭透過style attritube來改變CSS風格
  • <a href="URL" target="_blank" style="text-decoration:none;color:red;">Wibibi </a>
href的基礎知識學習結束，現在回頭讀Pseudo Classes | HTML Dog與CSS Pseudo-classes | W3School繼續學習pseudo classes。這兩篇一起讀，並透過CSS Pseudo-classes的paradigm進行實際測試，在paradigm當中可以看到style tag裡有a:link {}、a:visited{}、a:hover {}、a:active {}。如同我們一開始對pseudo classes的理解selector:pseudo_class{property:vlaue}，所以在paradigm所用的psuedo classes其效果會顯示在 a tag上面。再來看看這篇文章學習CSS-Pseudo-elements與Pseudo-classes - 布魯克斯- 點部落，這篇文章的paradigms可看到pseudo classes用在p tag、h1 tag。

另外從布魯克斯- 點部落這blogger習得一個好點子，可以外鑲JSBin來練習HTML5、CSS的基礎，來放到部落格上。

最後附上CSS 選擇器、選取器（Selector）種類簡介這網站裡介紹的各種pseudo classes，省得我要一一介紹 XD

:link   //連結平常的樣式
:visited   //連結查閱後的樣式
:hover   //滑鼠滑入的樣式
:active   //滑鼠按下的樣式
:focus   //目標為焦點的樣式
:lang(E)   //當語言為E的樣式
:first-child   //第一個元素的樣式

發現一件有趣的事，傳統CSS的selector用ID("#")或Class(".")，若用pseudo classes，則不用加hash character("#")或full stop(".")，可以比較對照Class and ID Selectors 與Pseudo Classes這兩篇文章。回去讀mike-map的code時發現，就算selector用ID或Class依舊可以用pseudo classes。

到此暫時到一段落。不過我們回去看mike-map裡的code，很多都是自定義的pseudo classes，這又是???於是再度估狗，稍作瀏覽，有很多要學啊！！！！
開始讀這篇後很快就遇到新問題了，document.body，這些是什麼?這就要回到什麼是DOM來討論，估狗找到網頁 DOM 結構 | Camdemy這篇文章的圖，是最一目瞭然DOM是什麼。
JavaScript HTML DOM | W3School
DOM HTML tree

估狗自己的bloger，發現先前記錄了一堆DOM的資料，2014/9/10 今日學習、2014/9/11 今日學習、2014/9/13 今日進度、2014/9/19 今日學習、2014/9/27 今日學習，結果居然沒有半篇好好討論與學習DOM，明天繼續，一定要弄懂。

(以下2014/11/14、11/15更新)

在上面網頁 DOM 結構 | Camdemy的圖中，我們對DOM有了初步的概念，接下來我喜歡JavaScript Document - Wibibi這篇文章裡，對DOM的解釋。
  • 當一個網頁載入瀏覽器的同時，就會自動建立關於該網頁的文件物件模型，簡稱 DOM（Document Object Model），這些文件物件模型都有他們專屬的屬性，既然有了這份 DOM 的存在，我們可以透過 JavaScript 來存取這些屬性，建立我們想要的互動網頁效果。
在上面的圖中，我們知道html tag是最大的，是父節點，它的子節點裡有各種elements，像是head tag、body tag，這些elements是子節點。父與子的觀念是相對的，在剛剛我們是以html tag的角度來看父子關係，相似的討論可以閱讀DOM节点和节点树_JavaScript编程学院這篇文章，不過很可惜的是這篇文章都只有中文翻譯，而少了原文名稱，所以我們有必要再讀一篇英文文章來習得原文的專有名詞。

發現一篇很有趣的文章，在JavaScript Document - Wibibi裡提到，所謂的DOM是在你的網頁載入時所自動建立的，但這段話實在太短，估狗找到What is the DOM? | CSS-Tricks這篇，很正，它用圖文淺談DOM與你電腦裡的.html檔是不同的東西。這篇文章的JavaScript can manipulate the DOM這節裡的paradigm，裡頭用document.getElementById("idName")來取得element(or tag，在這paradigm是取div)的ID，原本div tag的內容空無一物，取得id讓我們取得所要處理的element，於是我們再為這element加入一些內容，透過idName.innerHTML = "New Content!"，如此一來我為div這element加入了"New Content"這行字，原本的空無一物的頁面，因此多了"New Content"這一段字。

無聊查了一下manipulate，中譯：操作。估狗找了一下它的字根，mani=hand，pulate用字根去估狗，找到最多的是populate，中譯：居住於、移民於。恩....要動手做一些事你才能夠住在某處，硬要去講的確有操作的味道 XD

接下來，我繼續閱讀Javascript获取DOM节点_JavaScript编程学院，這篇清楚簡單，瀏覽過即可。接著下一篇JavaScript parentNode：获取父节点_JavaScript编程学院，這篇介紹parentNode，用法為document.getElementById("demo").parentNode。

但是老實說我覺得這篇的paradigm並不好，因為它的parentNode與childNode都是div tag，所以估狗找了另一篇Difference between DOM parentNode and parentElement - Stack Overflow，這篇Answer by lonesomeday裡提到的paradigm：
document.body.parentNode; // the <html> element
這個paradigm清楚的顯示body tag的parent是html tag。

習得parentNode後，我們繼續學習childNode，讀Javascript获取子节点_JavaScript编程学院這篇，稍微讀了一下，這篇的paradigm實在不是JavaScript的coding style，準備找另外一篇。

發現一件有趣的事，threeX裡的demo，它的.html檔裡都沒有html tag，但程式依舊可以run，為此我跑去找three.js - documentation - Manual - Creating a scene，three.js的官方文件看，如連結裡所示，它的程式也是像傳統網頁的寫法，把所有的code都包在<html></html>裡，有測試過把threeX裡的.html檔的code頭尾加上html tag，結果不變，程式依舊能run。

關於這問題，找到這篇Traversing the DOM | JavaScript Tutorial，這篇太正了，而且它更是何拿來學習childNode與children，它的第一張圖
這張圖其實是在說我們DOM的進入點，也就是root node，我們可以從html element或是body element進入
  • The root is the DOM always document.documentElement. This special property will give access to the topmost html tag.
  • Another starting point can be the document.body, which represents the body tag.
(2014/11/15更新)

在讀Javascript获取子节点_JavaScript编程学院時搞不懂的child element，讀Traversing the DOM | JavaScript Tutorial瞬間頓悟。討論child element有兩種方式，childNodes與children。個人較偏好children，因為她很清楚顯示我們有哪些child element node，而不會顯示text node。若用childNodes則會把所有的text node都顯示出來，老實說很容易搞混。

children本身可以當做一個array，若我想要找body element下有哪些 child element，只要用 var children = document.body.children，接著再寫一個for loop去讀children[i]即可。

接下來討論了firstChild與lastChild，其實它概念滿簡單的，一個parent node，以body element為例，body element裡，由上而下，第一個child element是firstChild，最後一個child element是lastChild，所有的child elements互相都是siblings，也就是兄弟。child elements由上而下，往下就用nextSibling，往上就用previousSibling。對於siblings的討論，這篇Javascript获取兄弟节点_JavaScript编程学院也有探討。

(2014/11/16更新)

再來繼續讀Basic DOM Node properties | JavaScript Tutorial這篇，第一節討論nodeType，看到原始碼知道每個type相對應的數字為何，可能沒什麼感覺，沒關係還可以讀JavaScript获取节点类型、节点名称和节点值_JavaScript编程学院這篇，也學習到最重要的是ELEMENT_NODE其nodeType = 1與TEXT_NODE其nodeType = 3，接著繼續讀到nodeName與tagName這兩個properties，就如字面所說，顯示node的名字，簡單例子如下
alert( document.body.nodeName ) // BODY
在閱讀JavaScript获取节点类型、节点名称和节点值時看到它的paradigm有著奇怪的寫法<script type=something>...</script>，關於這議題可以在Adding a script to HTML這篇文章的Modern markup for the <script> tag.的內容，可以得到答案，這寫法是老派的HTML4的產物，現在HTML5已經沒人這樣子寫了。

根據Basic DOM Node properties的內容，較推薦使用nodeName，tagName在有些情況無法用，也很不好使。接著繼續學習innerHTML這property。innerHTML是HTML5所加入的新property，可以讓我們去修改node的內容以文字的的方式(text form)，在上面的What is the DOM? 這篇文章的JavaScript can manipulate the DOM這節裡，是我們第一次看到innerHTM。若是想修改node裡顯示的文字，可以用node.innerHTML="文字內容"。但是innerHTML不只是可以這樣用，在JavaScript innerHTML_JavaScript编程学院這篇有另一種有趣的寫法，它用innerHTML="<div>...</div>"，讓我們讓innerHTML所要處理的node，又加入了新的child nodes。在這篇也提到innerHTML可以拿來顯示node裡的內容，不過一樣是僅能顯示text form，藉由alert(this.innerHTML)。

innerHTML只適用於element node(like：<div> 、 <p>、<ul>、<script>)，，若搞不清楚有哪些node type，可回去讀JavaScript获取节点类型這篇文章，node types常見的有：element node、attribute node、text node、document node、notation node...etc。對於其他種類的node，可以透過nodeValue這property請見Basic DOM Node properties裡nodeValue這節的paradigm並run之，就會很清楚了。它也提醒了我們當nodeValue跑到<script>時顯示null，是因為script tag是element node。

到此Basic DOM Node properties | JavaScript Tutorial這篇文章的學習結束。

穿插閱讀了Browser environment | JavaScript Tutorial，了解browser的global structure，原來JavaScript不只可操作DOM，也可操作BOM(Browser Object Model)，我們常用alert就是BOM的東西。

穿插閱讀了Adding a script to HTML | JavaScript Tutorial這篇文章，學習滿多有趣的基本知識，script element是我們操作browser的工具，透過在script element裡撰寫的JavaScript。如文章所說，script element有兩種寫法，一種寫在head tag裡，另一種是寫在body tag裡，反思threeX的範例的確都是<body><sctipt>....</script></body>。

接著最後學習Modifying the document | JavaScript Tutorial這篇文章，讀完後DOM的基礎知識學習就暫時告一段落。

現在我們在Creating elements這節，先來學如何create element，如果要加入新的element到DOM裡，可以用document.createElement("tag")，若想加入文字可以用document.createTextNode("text")，不同於innerHTML，使用這兩種properties時必須宣告一個variable才能使用，像是
var div = document.createElement('div')
在Modifying the document的paradigm裡可以看到小括號裡是用 ' ，參考另一篇文章Javascript创建节点_JavaScript编程学院則是使用 " ，於是我估狗其他資料，像是HTML DOM createElement() Method | W3School括號裡也是用 " ，所以我決定用如此寫法。

可以create element當然也可以複製(clone)啊，在此我們學習到兩種寫法，如果想把一個node包括它的child nodes都clone下來可以用element.cloneNode(true)，若只想複製node，不想要裡頭的child node可以改用element.cloneNode(false)。

接著在Adding elements這節，我們習得如何撰寫JavaScript，在parent node下加入child node，透過parentElemObj.appendChild(elemObj)。(PS：elem=element、obj=object)。在這節的paradigm，可看到清楚的過程，原本div tag裡只有「...」，接著我們在script tag裡，一開始先創建一個var div，script tag裡的div這個object，被指派為document.body.children[0]，如paradigm所示body element下第一個node是div tag，所以children[0]所指向的是div tag。接著撰寫var span = document.createElement('span')，我們在document下創建了span tag，並為span tag加入內容span.innerHTML = 'A new span!'，最後我們把我們創建的span tag(透過var span)這個element，加到div tag下面，透過div.appendChild(span)。

後來發現也可以讓code更精簡一些，請見There’s an empty DOM node elem. What’s the difference?的討論，寫法會像這樣子elem.appendChild(document.createTextNode(text))。

若想在指定的node前在新加一個node可以用parentElemObj.insertBefore(elemObj, Sibling)，insertBefore()裡的第二個parameter就是我們所想要指定的node，如果insertBefore()裡的第二個parameter設為null，那麼它的效果就跟appendChild()是一樣的。若是對nextSibling的印象有點模糊可以去讀Javascript获取兄弟节点這篇。

接著Removing nodes這節，如字面所說，我們可以添加node當然也可以移除node。若想要移除node可用parentElem.removeChild(elem)，若想把一個node用另一個node取代可用parentElem.replaceChild(elem, currentElem)。

到此，Modifying the document | JavaScript Tutorial這篇文章結束，一切功德圓滿。

(以上2014/11/14、11/15、11/16更新)

張貼者： 於 沒有留言:
標籤： ,

2014年11月10日 星期一

20141110 今日學習

看到賴裕昆學長推薦的一本書，已跟圖書館預約
楊翠老師給兒子魏揚的家書，可惜博客來還沒有可預購，所以也還沒填推薦書單
看到一篇文章，談女人的各種態，最近變溫柔，期許自己內化出最適合自己的一言一行一舉一止 ^_^
爆炸帥的玩具
從熱血時報動態的留言取得最新歐巴馬撐傘帥圖，可惜今天一直無法連上熱血時報的網站，可能又被匪區暴民攻擊了吧  QAQ 
先前想看葉丙成老師的TVBS專訪影片，但是苦無租屋處無電視，還好有偉大的youtube大神
看到賴佩霞在TedxTaipei的演講，恩...謝沛恩好像沒遺傳到身材的優勢 XD

她的話語摘錄：
一個不快樂的母親是養不出一個快樂的孩子來，她們需要榜樣，需要知道什麼是快樂，這世界上有錢人很多，但是快樂幸福的人實在是太少了。
只有快樂的人才能創造快樂的世界，不快樂的人只會創造不快樂的世界。
我經常在繪畫當中，走入母親的世界，也就是靜心，在那個世界沒有距離，我可以感受到她的存在，even到現在，我都能感受到她的支持。
當我們跟父母親真正地和平時，你才能真正地喜歡自己。

觀後感想：
今晚看賴佩霞的演講，我原本只是抱著好女色的心態來看漂亮保養良好的老女人，結果我自己一人在LAB聽她演講聽得情緒超滿眼眶泛淚，可能是因為我跟我爸媽都有傷痕，我的母親是個很不快樂很匱乏的人，我很嚴重受她影響，我過去暴躁易怒。我的父親在我小時後給我的感覺只有他只在乎我功課好不好，有沒有名列前茅，不在乎我其他的事情，小時候我有很嚴重的被剝奪感，我覺得他們不喜歡真正的我，只希望我長得是他們喜歡的樣子，而不是我想要的樣子，我討厭自己為了升學放棄繪畫放棄鋼琴，我重度藝術家傾向，我一直都不是他們希望的那樣。直到上了大學，我放下所有世俗眼光的評斷，去探索自己是誰，才真正地找到自己，與柯嘉怡相愛然後再分手，才真正地去探討何謂愛，去探討如何得到幸福。可能是因為我跟我爸媽都有傷痕，我希望自己現在能完全放下所有傷害來愛他們，以及愛自己。

看了Nike Lebron 12的各種配色介紹，發覺自己最喜歡的是Data這配色11/20發，200鎂，你是我的
更新了20141106 今日學習的內容，探討CSS裡的groping與nesting，學習完groping與nesting的知識後回去看mike-map的index.html，看到很多nesting的寫法，不過看到兩種奇怪的寫法，.osdFont.visible{...}與.clickableOsd:hover{...}，這是???該繼續找資料讀了。

才剛說要找資料讀，就找到這篇

有了許多基礎後，根據20141105 今日學習的紀錄，該去探討Creating a Body Border | CSS-Tricks這篇文章    (尚未閱讀)

Pseudo Classes這篇還沒讀完，Creating a Body Border | CSS-Tricks這篇也沒讀，今天進度有點弱，該戒臉書了，臉書上真的有太多事物讓我分心了，我懷念專注做一件事的感覺，我真的該戒了，今晚早點休息回家睡了。

張貼者： 於 沒有留言:
標籤：

2014年11月9日 星期日

20141109 今日學習

看到一個人家自製的烙印勇士主角的狂戰士，真的超扯超帥超狂的!!!
週五晚上去看阿堂推薦的Stone Throw，三位不同的DJ：Mndsgn、Pyramid Vritra、Knxwledge。個人偏愛前面兩位，第三位對我來說還好。


葉丙成老師受TVBS專訪後寫的一篇文章
過去彭明輝一些文章的論點，讓我不太喜歡他，但我喜歡這篇文章
張貼者： 於 沒有留言:
標籤：

2014年11月7日 星期五

20141107 今日學習

今天映綱推薦了一個中國鄉民的blog，裡頭透過coding實踐各種數學演算法，作者不給code但把理論講得很詳細，讓你我都能實踐之，真的非常不錯，特此紀錄一下
MaxG推薦的CrossFit影片，令人萬般感動，我甚至為這影片發了一段落落長的動態


張貼者： 於 沒有留言:
標籤：

2014年11月6日 星期四

20141106 今日學習

看到蛋堡分享一篇文章，非常認同文章的內容，讓我想起鄭捷事件發生時，為何我會支持廢死，你必需要靈魂提昇到一個程度，你才能看出每個憤怒暴力後面，那個拼命哭拼命哀嚎，聲嘶力竭的求救聲
看到大叔在老莫的動態留言，我喜歡他所說的
  • happiness is only real when shared .
看到沈易霖老師分享這段影片，一位老師從大學時補教名師到決定走向偏鄉，發揮創意激發孩子對學習的熱忱，進而成為自己的主人，真的太正了這段影片
讀了一篇還不錯的文章，讓我想起大學時偶爾讀原文書，大部分時間都拿來讀閒書探索自我，與來到這世界的意義

 學習CSS的ID、class、span、div、grouping、nesting

參考mike-map的index.html，一邊學習需要哪些HTML5與CSS的知識，看到這篇文章發現，可以把CSS風格寫在另一個外部檔案，然後
在這篇我們知道可以用<link> tag來從外部import進來.css來當作style sheet華麗大衣
  • Each page must include a link to the style sheet with the <link> tag.
由上數來第二個paradigm可以看到，類似我們在index.html裡出現的body{...}。不過要注意的是，.css檔裡面不能有html tag

另外也可以透過<style> tag直接寫在.html檔裡，寫成<style>body{...}</style>，在Internal Style Sheet這節的paradigm裡可看到，它是在<head>...</head>裡包入<style></style>，我回去看了一下index.html，它是把<style></style>寫在最前面，之後才寫<script>渲染動畫</script>。

於是我就去測了一下，發現就算不把<style> tag寫在<head></head>裡也可以，甚至寫在</html>之後也可以


參考mike-map的index.html，可以知道自己需要寫些什麼，在讀code時常看到#、@之類的東西，不知道它事幹嘛的，後來估狗發現Wiki裡就有說明了
在此讀到CSS全名cascading style sheet，cascade的意思是階層狀的瀑布。另外在這篇才知道，CSS裡的註解無法用傳統的//，但是可以用/**/，意即/*...註解內容...*/，從中我們也知道#elementname，#這符號英文讀作hash (from Hashtag - Wikipedia)，在CSS中代表我們的ID，對於這篇文章中的class與ID，解釋的還不夠清楚，找到了另一篇文章
(以下內容11/9更新)
首先來談談span與div這兩個tag(或稱之為element)有什麼不同吧。一開始的時候我閱讀CSS DIV 與 CSS Span - 1Keydata CSS 語法教學這篇，試圖去理解他們的差異，只知道兩者都是可以讓我們顯示出一個區域，然後在這區域裡放我們想要的文字，但是仍然難以體會其中的差別，後來改讀這篇文章
在這篇文章知道，span主要是拿來處理in-line，也就是只有一行的一小段文字，若是想處理block-line，也就是有一個區塊，較多的文字時，可以改用div這個element。div也就是division，division當作名詞時有分割、分開、分配、區域的意思。由於好奇，我也去查了一下sapn的意思，根據奇摩字典span當作名詞：跨度、指距、全長；動詞：橋、拱等、橫跨，跨越、以指距量、測量、持續、延伸到。

對於CSS語法的學習一開始是讀CSS 語法這篇，但老實說我還是較喜歡英文的這篇
下面這段文字非常地清楚解釋了HTML tag與CSS的關聯，這篇文章也另外介紹了CSS裡面的長度與百分比：px、em、pt、%個代表什麼
  • Whereas HTML has tags, CSS has selectors. Selectors are the names given to styles in internal and external style sheets.
但是只是這些還是不夠，所以我們繼續讀下一篇資料
喔喔喔，這篇很正，它解惑我長久以來的盲點。
  • In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).
  • The HTML refers to the CSS by using the attributes id and class. 

在這篇文章它提到id與class的差異
  • The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
簡單來說就是，ID (“#”)只能用一次，class(“.”) 可以重覆使用。

(以上內容11/9更新)

(以下內容11/10更新)
在11/9的內容，我們已經知道了CSS的基本觀念，再來我們要更進一步學習，來簡化我們的code
閱讀這篇知道，Groping可以把不同selector但相同的property寫在同一行，透過逗號","來分隔各個selector，以此來簡化我們的code。
  • You can simply separate selectors with commas in one line and apply the same properties to them all so

另一個有趣的做法Nesting，是直接在定義selector的properties時，就直接指派給所要用的tag。它的做法是在一個div裡，定義一次ID，然後讓這div裡不同的段落文字p、h1、2...etc都可用#IDname p、#IDname h1、#IDname h2，在客製的#IDname tag裡，properties可以不同於一開始在div所定義的ID
  • If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.
(以上內容11/10更新)

在這篇文章中，開始解構CSS Model
看到一篇文章滿有趣的，介紹html tag 與 body tag的意義
首先它先介紹div tag裡的overflow這property作為引子，透過div tag可以創建一個框框：
<div style="....; overflow:visible"> ...內容... </div>
  • 如果paragraph超出框框，依舊會讓你看見
<div style="....; overflow:hidden"> ...內容... </div>
  • 如果paragraph超出框框，依舊會讓你隱藏
<div style="....; overflow:auto"> ...內容... </div>
  • 如果paragraph超出框框，就會產生scrollbar，產生捲軸上下平移來看
有了overflow:auto的概念後，它的概念就像html與body一樣，body是你的網頁全部的內容，但礙於螢幕大小有限，所以只能顯示部分內容，也就是我們螢幕的大小，而這符合螢幕大小的內容就是html
張貼者： 於 1 則留言:
標籤： ,
訂閱： 文章 (Atom)