chunwen's blog

前端學習資源整理 提供想踏入前端面試、自我學習、作品準備方向    coggle連結 六角免費前端大補帖(超多豐富資源 推薦)    coggle連結 Amos老師三十天金魚都能懂的網頁設計入門   youtube連結 保哥給 JavaScript 新手的建議與學習資源整理   文章 個人覺得淺顯易懂，蠻適合新手學習觀念 彭彭老師的課程 youtube連結 每個單元都簡短、清晰，也非常適合新手上手 Alex 宅幹嘛 youtube連結

什麼是DOM? DOM 全名為 Document Object Model 中文翻譯為 文件物件模型，看起來很抽象但其實就是把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件，而這些物件最終會形成一個 樹狀結構。 我們可以透過Javascript來改變、存取物件上架構。 為何需要DOM呢? 網頁是由瀏覽器負責運行，因此可以知道瀏覽器其實就是一種編譯器負責去編譯我們寫的網頁程式。今天有非常多間公司都在設計瀏覽器，假如沒有先定好一個規則讓各個瀏覽器都必須要按照這個規則去編譯我們的網頁程式的話，工程師就頭痛了，處理一個IE已經夠煩了還要去針對各個瀏覽器去寫出他們的規則，也因此 W3C 出現了， W3C 定義了非常多的網頁規則好讓各大瀏覽器可以按照這些規則去設計瀏覽器，其中 DOM 就是其中的一個定義。 DOM解析 上面有提到DOM是一個樹狀結構，而樹狀結構最重要的就是各個節點(node)。 節點通常可以分成下面四種 1.Document --指的就是這份文件，HTML開端 2.Element     --指的就是標籤           EX：<div>、<p>等各種HTML Tag 3.text            --指的就是文字 4.Attribute    --指的就是屬性           EX：class、href DOM階層關係圖 1.父子關係(Parent and Child) 上下層節點，上層為 Parent Node ，下層為 Child Node 。 2.兄弟關係 同一層節點，彼此間只有 Previous 以及 Next 兩種 圖片來源-How To Traverse the DOM 備註：上述內容引用自IT邦幫忙 Day03-深入理解網頁架構：DOM 實務上應用中，DOM樹主要有兩項功能 1.存取元件   EX：getElementById( )、querySelector( )、 queryselectorAll( )、parentNode等 2.操作元件(變更元件) EX：innerHTML( )、setAttribute( )、getAttri

何謂變數？ 變數是用來 儲存資料 與 進行運算 的基本單位。 變數規則命名 1.開頭不能用數字    2.不能用-跟. (可以使用__) 3.大小寫有區分 4.變數需有語意化 5.不能使用保留字(reserved word)、關鍵字（keyword） EX：if、boolean  補充資料： W3cscool--JavaScript Reserved Words 、 MDN 關鍵字與保留字列表 看完上面變數介紹，我們就來簡單示範幾個例子吧！ 變數寫法介紹： 宣告變數 變數名稱(可以自行命名) 指定內容(數值、字串、布林) var price = 30; 透過 var 宣告變數 burgerPrice，因為沒有給 burgerPrice 數值，此時 burgerPrice 的內容為 undefined。 var burgerPrice; //undefined 宣告變數 burgerPrice 的同時也給了變數 burgerPrice 值，此時 burgerPrice 的內容為數字的 10。 var burgerPrice = 10; console.log(burgerPrice) //10 因為未宣告變數，直接存取時候會出現Uncaught ReferenceError: hello is not defined console.log('hello') 補充幾點科普小知識： 1.JavaScript支援 Unicode ，代表變數用中文命名也ｏｋ，但是為了日後程式維護性還是建議不要  2. JavaScript 是個「弱型別」的語言，變數本身無需宣告型別，型別的資訊只在值或物件本身 3. 所有沒有透過 var 宣告的變數都會自動變成全域變數 變數資料型別共有七種： 備註：範例只會介紹上面三種，其餘就請參考 JavaScript 的資料型別與資料結構 1.數字 EX：10、20、35 2.字串(string) EX："hello world" 3.布林 EX：true、false 4.null 5.undefined 6.symbol 7.object 補