收信時看到博客來的一本推薦書，已向圖書館建構
一直以來我的英文程度僅只於可以讓我自學專業，去圖書館也不會刻意去翻英文雜誌看，看雜誌頂多只有看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.
- 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>的效果，成功。
另外從布魯克斯- 點部落這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
估狗自己的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的解釋。
發現一篇很有趣的文章，在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：
習得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進入
在讀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的名字，簡單例子如下
根據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才能使用，像是
(以上2014/11/14、11/15、11/16更新)
這篇未降讀，提到了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 屬性中為非必要項目。
- <a href="URL" target="_blank" style="text-decoration:none;color:red;">Wibibi </a>
另外從布魯克斯- 點部落這blogger習得一個好點子，可以外鑲JSBin來練習HTML5、CSS的基礎，來放到部落格上。
最後附上CSS 選擇器、選取器（Selector）種類簡介這網站裡介紹的各種pseudo classes，省得我要一一介紹 XD
:link //連結平常的樣式
:visited //連結查閱後的樣式
:hover //滑鼠滑入的樣式
:active //滑鼠按下的樣式
:focus //目標為焦點的樣式
:lang(E) //當語言為E的樣式
:first-child //第一個元素的樣式
到此暫時到一段落。不過我們回去看mike-map裡的code，很多都是自定義的pseudo classes，這又是???於是再度估狗，稍作瀏覽，有很多要學啊！！！！
開始讀這篇後很快就遇到新問題了，document.body，這些是什麼?這就要回到什麼是DOM來討論，估狗找到網頁 DOM 結構 | Camdemy這篇文章的圖，是最一目瞭然DOM是什麼。
估狗自己的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 來存取這些屬性，建立我們想要的互動網頁效果。
發現一篇很有趣的文章，在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，它的第一張圖
- 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.
在讀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這篇文章結束，一切功德圓滿。
沒有留言:
張貼留言