--- title: JavaScript 與 DOM 以及事件機制 tags: 網頁組 --- # JavaScript 與 DOM 以及事件機制 - 前言 在學完 HTML 與 CSS 以後，我們可以來試著把 JavaScript 寫在瀏覽器上面了。只要是頁面上看得到的東西，我們都可以改。可以新增元素、刪除元素、更改樣式，我們也可以針對不同的元素加上不同的事件監聽器（Event listener）。 :::info 上課簡報：[網頁組教學簡報](https://docs.google.com/presentation/d/1mapPJPaK9ITkYkP0gv520cjGOCznPgxVSWwY3fHk19M/edit?usp=sharing) ::: # 本節目標 - 認識 JavaScript - 知道 DOM 的基本操作，例如說插入、刪除、更改屬性等等 - 認識事件機制 # JavaScript - 直譯式語言（無須編譯） - 非阻塞 - 函式導向（Functional Programming） 或 - 物件導向（Object-Oriented Programming） :::success [W3Schools 的 JavaScript 教程](https://www.w3schools.com/js/default.asp) [現代 JavaScript 教程](https://zh.javascript.info) ::: ## 阻塞，非阻塞 非阻塞是什麼呢？簡單來說，它不會等程式執行完才進到下一行 用一個小範例來說明，下面是一樣的功能，先呼叫一個函式，這個函式會等待兩秒才輸出 Logged 這串字，然後呼叫了這個函式之後再輸出 OK。 ### 非阻塞 JavaScript，OK 先出來才出現 JavaScript，簡單來說就是它不會等函式執行，而是會繼續下去。 ![](https://i.imgur.com/YrWUgkX.gif) ### 阻塞 java，只要進入等待，就是整個程式停下來了，你可以看到先出現 Logged 才出現 OK。 ![](https://i.imgur.com/y3HMbix.gif) ## 函式導向 同樣一張圖，我們也順便來說一下函式導向是什麼。 物件導向，就是用 class 包起來，一定要有 class，這個叫做物件導向，像是你們學的 Java 就是。 函式導向，就是用 function 即可，要呼叫的話就是以 function 為主，不過 JavaScript 其實也是可以寫物件導向的，只是主要還是函式導向。 #### 函式導向 ![](https://i.imgur.com/YrWUgkX.gif) #### 物件導向 ![](https://i.imgur.com/y3HMbix.gif) # 什麼是DOM DOM 全名為 Document Object Model 中文翻譯為 文件物件模型，看起來很抽象但其實就是把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件，而這些物件最終會形成一個樹狀結構，下面有一張示意圖可以參考。 ![](https://www.w3schools.com/js/pic_htmltree.gif) ## DOM解析 網頁是由瀏覽器負責運行，因此可以知道瀏覽器其實就是一種編譯器負責去編譯我們寫的網頁程式， W3C 定義了非常多的網頁規則好讓各大瀏覽器可以按照這些規則去設計瀏覽器，其中 DOM 就是其中的一個定義。 - Document > Document 就是指這份文件，也就是這份 HTML 檔的開端，所有的一切都會從 Document 開始往下進行。 - Element > Element 就是指文件內的各個標籤，因此像是 `<div>、<p>` 等等各種 HTML Tag 都是被歸類在 Element 裡面。 - Text > Text 就是指被各個標籤包起來的文字，舉例來說在 `<h1>Hello World</h1>` 中， Hello World 被 `<h1>` 這個 Element 包起來，因此 Hello World 就是此 Element 的 Text - Attribute > Attribute 就是指各個標籤內的相關屬性。 ## 範例 ``` <html> <head> <title>example</title> </head> <body> <h1 class="txt">Hello World</h1> </body> </html> ``` ![](https://i.imgur.com/quZtbSB.jpg) # 實際操作 ## 常見的 DOM API ### • document.getElementById('idName') 找尋 DOM 中符合此 id 名稱的元素，並回傳相對應的 element 。 ### • document.getElementsBytagName('tag') 找尋 DOM 中符合此 tag 名稱的所有元素，並回傳相對應的 element 集合，集合為 HTMLCollection 。 ### • document.getElementsByClassName('className') 找尋 DOM 中符合此 class 名稱的所有元素，並回傳相對應的 element 集合，集合為 HTMLCollection 。 ### • document.querySelector('selector') 利用 selector 來找尋 DOM 中的元素，並回傳相對應的第一個 element 。 ### • document.querySelectorAll('selector') 利用 selector 來找尋 DOM 中的所有元素，並回傳相對應的第一個 element ，集合為 NodeList 。 ![](https://i.imgur.com/Mwo0528.gif) # 事件機制 JavaScript 是一個事件驅動 (Event-driven) 的程式語言，當瀏覽器載入網頁開始讀取後，雖然馬上會讀取 JavaScript 事件相關的程式碼，但是必須等到「事件」被觸發(如使用者點擊、按下鍵盤等)後，才會再進行對應程式的執行。 ## 推薦文章 因為下面鐵人賽的文章寫得非常詳細，所以推薦大家直接前往觀看。 [重新認識 JavaScript: Day 14 事件機制的原理](https://ithelp.ithome.com.tw/articles/10191970) :::warning 鐵人賽有很多精彩的文章，假如對任何技術有疑問或有興趣，都很推薦可以查看鐵人賽的文章。 ::: # 練習題目 到這邊大家已經認識了基礎的 JavaScript，如果大家有興趣的話可以照著下面網址內的題目跟著練習，裡面有許多題目都很有趣喔。 :::success JavaScript 30： [JavaScript 30 - 官方 Github](https://github.com/wesbos/JavaScript30) [JavaScript 30 - Youtube](https://www.youtube.com/watch?v=VuN8qwZoego&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH) [GuaHsu - JavaScript30 練習＆心得紀錄](https://github.com/guahsu/JavaScript30) [soyaine - JavaScript-30 的中文练习指南](https://github.com/soyaine/JavaScript30) 100-days-100-projects： [florin-pop：100-days-100-projects](https://www.florin-pop.com/blog/2019/09/100-days-100-projects/) [W3Schools JavaScript](https://www.w3schools.com/js/default.asp) ::: 有些人可能會不太清楚那我要怎麼開始練習呢，我的推薦是直接照著影片開始進行練習，假如有不清楚的地方再去查找 W3Schools 的 JavaScript 教學，也可以查看心得記錄跟練習指南，一定要確認自己弄懂了，不要只是照抄程式碼。 :::warning 當然不論遇到什麼問題都能夠直接詢問學長姊，千萬不要害羞，也不要浪費了現有的資源❕❕❕ ::: ## 小提醒 推薦大家在寫不管甚麼東西時，都要習慣整理好自己的資料夾，替自己的資料夾分類， 假如你要練習的是 JavaScript 30 時，你可以直接把官方的專案下載下來練習。 那假如你對 100-days-100-projects 比較有興趣的話，我推薦你可以跟著我這樣做： 我們現在準備要練習一系列簡單的東西，我的習慣會先開好一個匯集我這次練習的資料夾。 例如：100-days-100-projects ![](https://i.imgur.com/J6buW74.png) 接著我會在裡面新增一個　basic 的資料夾 ![](https://i.imgur.com/K2oERaW.png) 這個 basic 資料夾內會放我在這次練習時所需要最基礎的東西，這樣每當我要進行下一個練習時，我只需要複製一次這個 basic，改個資料夾名稱就好，像下面這樣： ![](https://i.imgur.com/0on6wXq.png) 而我的 index.html 裡面會有： ![](https://i.imgur.com/FEjl06P.png) 練習後的資料夾就會像這樣子： ![](https://i.imgur.com/dNw5sQf.png) 這樣下次寫到類似的東西時，就能透過資料夾的名稱快速找到可以參考的東西，更重要的是你能夠把整個資料夾透過 Git 上傳到你的 Github 上面，你的 Github 上就能夠保留你每次的練習成果，版面也很乾淨。 如果你還不會 Git 的話，快去透過之前的文章學習一下吧❗ :::success - [Git 基礎介紹 + 安裝](/h66i_zldRg-Jd3lin5mIUA) - [Git 實際演練](/1cAZJzaOTCuoB2dRBxpASw) ::: --- ## 參考資料 :::info [Day03-深入理解網頁架構：DOM](https://ithelp.ithome.com.tw/articles/10202689) [重新認識 JavaScript: Day 14 事件機制的原理](https://ithelp.ithome.com.tw/articles/10191970) [JavaScript 30](https://javascript30.com) [JavaScript 30 - 官方 Github](https://github.com/wesbos/JavaScript30) [JavaScript 30 - Youtube](https://www.youtube.com/watch?v=VuN8qwZoego&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH) [GuaHsu - JavaScript30 練習＆心得紀錄](https://github.com/guahsu/JavaScript30) [soyaine - JavaScript-30 的中文练习指南](https://github.com/soyaine/JavaScript30) [W3Schools JavaScript](https://www.w3schools.com/js/default.asp) [florin-pop：100-days-100-projects](https://www.florin-pop.com/blog/2019/09/100-days-100-projects/) ::: --- 大家現在認識了 JavaScript 的基本操作以及事件的運作原理，[下一篇](/A80uSAxqSHK692ee1Lokiw)的內容，我們會介紹一個很適合新手入們的 JavaScript 函式庫 - [jQuery](https://jquery.com)。