1-1 、如何在瀏覽器上執行 JS ?

# 1-1 、如何在瀏覽器上執行 JS ? ###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/01 --- ## 在哪裡執行 ? - Node.js 和瀏覽器是執行環境。例如在 HTML中夾帶 ``<script></script>`` ，存成 index.html 檔案: ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>瀏覽器上執行 JS</title> <style></style> <script> alert('Hello'); </script> </head> <body> <div> Hello ? </div> </body> </html> ``` - 會彈出視窗跟你 Say Hello ; ``<script></script>`` 標籤可以放任何地方，但有差別。 - 不可能把 JS code 全部放在 HTML 內，因此會用 `<script src="./index.js"></script>` 指向(這邊是同個資料夾目錄下)，像是模組化。 - 這切成兩檔案蠻常用的，模組化，比較好維護。 --- 同個資料夾底下的 index.js 檔案: ``` alert("Hello !"); ``` --- ## 瀏覽器和 Node.js 跑 JS 的差別 - 跑 JS 時語法一樣，但不同執行環境可能支援度不同。 - 像是 `require('something')` 模組化在瀏覽器上就不能用。 --- 參考資料: [Node.js 是什麼？跟JavaScript 有什麼關係｜ALPHA Camp Blog](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwi_7tGomNvrAhUOG6YKHa2lAaQQFjAAegQIARAB&url=https%3A%2F%2Ftw.alphacamp.co%2Fblog%2Fnode-js-and-javascript&usg=AOvVaw3kDtS8gadcXN5Qx3WKBFV-) [不只是瀏覽器！JavaScript 征服世界的第一步- Node ... - iT 邦幫忙](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwi_7tGomNvrAhUOG6YKHa2lAaQQFjABegQIAhAB&url=https%3A%2F%2Fithelp.ithome.com.tw%2Farticles%2F10191345&usg=AOvVaw3UkIZ9Hu_WOZbtXr2Vk06x) [前端基礎JavaScript篇：JavaScript 與瀏覽器的溝通| by Hugh's ...](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwi_7tGomNvrAhUOG6YKHa2lAaQQFjACegQIBBAB&url=https%3A%2F%2Fmedium.com%2F%40hugh_Program_learning_diary_Js%2F%25E5%2589%258D%25E7%25AB%25AF%25E5%259F%25BA%25E7%25A4%258E-javascript%25E7%25AF%2587-javascript-%25E8%2588%2587%25E7%2580%258F%25E8%25A6%25BD%25E5%2599%25A8%25E7%259A%2584%25E6%25BA%259D%25E9%2580%259A-e00ff05d0fdc&usg=AOvVaw1rkmPmg-njFvWqgc-zaVM6) [JavaScript 是什麼? - 學習該如何開發Web | MDN](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwi_7tGomNvrAhUOG6YKHa2lAaQQFjADegQIBRAB&url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-TW%2Fdocs%2FLearn%2FJavaScript%2FFirst_steps%2FWhat_is_JavaScript&usg=AOvVaw1daw9wLJ2287KJ07A2PtyX) --- # 1-2 、 DOM Slayer ###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/01 --- ## 檔案物件模型( Document Object Model ) - 根據 https://www.w3.org/TR/dom41/ 將 HTML 內寫的 Document 轉換成 Obj 。 - 是提供一個樹狀結構化表示法，例如 Document 是整個文件，底下有很多節點(標籤)。 - 每個節點有繼承關係，像是 `<html></html>` 底下有 ``<head></head>`` 和 ``<body></body>`` 。 - 用 JS 去拿各個節點(標籤)元素，來對元素做修改，寫了 JS 後跟瀏覽器做溝通來改變視覺上的 UI 呈現。 ![](https://i.imgur.com/t9nTblC.png) - 瀏覽器提供了這個橋梁 ( DOM ) ，跟 JS 去溝通、改變元素來達到效果。 --- 參考資料: [文件物件模型(DOM) - Web APIs | MDN](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwjJueXWmtvrAhVBL6YKHbI1AqwQFjAAegQIAxAB&url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-TW%2Fdocs%2FWeb%2FAPI%2FDocument_Object_Model&usg=AOvVaw092UimTN6SSluvL2bX2hhE) [Day03-深入理解網頁架構：DOM - iT 邦幫忙::一起幫忙解決難題 ...](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwjJueXWmtvrAhVBL6YKHbI1AqwQFjABegQIARAB&url=https%3A%2F%2Fithelp.ithome.com.tw%2Farticles%2F10202689&usg=AOvVaw1qjbmD8kRF-TagjwdzvQCY) [W3C DOM 簡介 - OpenHome.cc](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwjJueXWmtvrAhVBL6YKHbI1AqwQFjACegQIBBAB&url=https%3A%2F%2Fopenhome.cc%2FGossip%2FJavaScript%2FW3CDOM.html&usg=AOvVaw1dTRe45A09dpf7OsF9OFF9) [什麼是DOM？ @ 學習日誌:: 痞客邦::](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwjJueXWmtvrAhVBL6YKHbI1AqwQFjADegQIAhAB&url=https%3A%2F%2Fchenmike.pixnet.net%2Fblog%2Fpost%2F25948952&usg=AOvVaw14ZUJBJBWCDaiZT5eg73-A) --- # 1-3 、選個魔法元素來用 ###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/01 --- ## getElements ### `Document.getElementsByTagName()` 可參考 [`Document.getElementsByTagName()`](https://developer.mozilla.org/zh-TW/docs/Web/API/Document/getElementsByTagName "The documentation about this has not yet been written; please consider contributing!") ; 這些 function 都放在瀏覽器提供的特殊物件 document 上。 --- 存成 index.html 檔案: ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>瀏覽器上執行 JS</title> <style></style> <script> const elements = document.getElementsByTagName('div') console.log(elements) </script> </head> <body> <div> Hello ? </div> </body> </html> ``` - 空陣列，怪怪 der ，根本不知道 Body 內的東西，因此會放在 ``</body>`` 之上。 --- ### `Document.getElementsByClassName()` __可參考 [`getElementsByClassName()` - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Document/getElementsByClassName) 。__ --- 假設 html 檔案有這行: ``` <div class='block'> Hello </div> <script>const elements = document.getElementsByClassName('block') console.log(elements)</script> ``` - 可以抓到 ``class='block'`` 的元素。 - HTMLCollection 像是特殊型態的陣列。 --- ### `Document.getElementById()` __可參考 [`document.getElementById()` - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Document/getElementById) 。__ - 通常 id 元素只有一個，雖然跟 class 一樣可重複。 --- 假設 html 檔案有這行: ``` <div id='block'> Hello </div> <script>const elements = document.getElementById('block') console.log(elements)</script> ``` - 可以抓到 ``id='block'`` 的元素。 - 直接印出來。 --- ### querySelector __可參考 [`querySelector` - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Document/querySelector") 。__ - querySelector : Selector 表示接的是 CSS 的選擇器。 --- 假設 html 檔案有這行: ``` <div id='block'> Hello </div> <script>const elements = document.querySelector('#block') console.log(elements)</script> ``` - 類似 CSS Selector 的選擇方式，例如: id 用 '#block' 、 class 用 '.block' 和 div 就直接用 'div' 。 - 也可以抓到標籤內的下層標籤，例如: 想抓 ``<a></a>`` 就直接用 'div a' 或是 'div > a' 。 - 這個會選到第一個符合的元素。 ### querySelectorAll __會選到所有的節點(標籤元素) 。__ 可參考 [`querySelectorAll()` -MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Document/querySelectorAll) 。 --- # 1-4 、用 JS 改變 CSS 的魔法 p.1 ! ###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/01 --- ## `element.style.()` 用 querySelector 並假設 html 檔案有這行，如要修改 background : ``` <div id='block'> Hello </div> <script>const elements = document.querySelector('#block') console.log(elements)</script> element.style.background = 'red' element.style.['padding-top'] = '10px' ``` - `element.style.['padding-top'] = '10px'` 可以換成 `element.style.paddingTop = '10px'` (Camel-Case) ，但注意不能用這樣 `element.style.padding-top = '10px` 來寫。 - 實作上不太會這樣改，會用 class 屬性分開。 --- # 1-5 、用 JS 改變 CSS 的魔法 p.2 ! ###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/01 --- 存成 index.html 檔案，實際上是 `<script src="./index.js"></script>` 指向 .js 檔案: ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>瀏覽器上執行 JS</title> <style> .active { background: red; } </style> <script> const elements = document.getElementsByTagName('div') console.log(elements) </script> </head> <body> <div id='block' class='active'> Hello ?! </div> <script> const element = document.querySelector('#block') </script> </body> </html> ``` - Hello ?! 會是紅色。 ![](https://i.imgur.com/sV5ARwq.png) ``` --- ## `element.classList.add()` 如果在 html 內這樣改: ``` <body> <div id='block'> Hello ?! </div> <script> const element = document.querySelector('#block') element.classList.add('active') </script> </body> - 會成功加上 active 。 ![](https://i.imgur.com/4vsNkeg.png) ``` --- ## element.classList.remove() 如果在 html 內這樣改: ``` <body> <div id='block' class='main'> Hello ?! </div> <script> const element = document.querySelector('#block') element.classList.add('active') element.classList.remove('main') </script> </body> ``` - 會把 class 屬性的 main 移除，加上 active 。 --- ## `element.classList.toggle()` - 本來沒有的話會新增，有的話會移除。 - 適合用在按鈕按下去會改變樣式，並且回復樣式。 ``` <body> <div id='block' class='main'> Hello ?! </div> <script> const element = document.querySelector('#block') element.classList.add('active') element.classList.remove('main') element.classList.toggle('main') element.classList.toggle('main') </script> </body> ``` - main 被秒新增然後又被秒移除了。 --- 參考資料: [Element.classList - Web APIs | MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/classList) --- # 1-6 、用 JS 觀測薛丁格的貓 ###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/01 --- ## 改變內容 - innerText - innerHTML - outerHTML __都可以拿來獲取某個元素的內容。__ --- ## innerText (常用來改變文字) 如果在 html 內這樣改: ``` <body> <div id='block'> Hello ?! <a>Yolo~</a> </div> <script> const element = document.querySelector('#block') console.log(element.innerText) </script> </body> ``` - 會在 Hello ?! 的後面加上 Yolo~ ; 會印出標籤內的文字。 - 甚至可以改變文字: ``` <body> <div id='block'> Hello ?! <a>Yolo~</a> </div> <script> const element = document.querySelector('#block') element.innerText = 'I am Link' console.log(element.innerText) </script> </body> ``` - 會印出 I am Link ，只會顯示文字，通常不會針對 id 只會針對底下標籤，如: ``<a></a>``。 ## innerHTML (常用) 如果在 html 內這樣改: ``` <body> <div id='block'> Hello ?! <a>Yolo~</a> </div> <script> const element = document.querySelector('#block') console.log(element.innerHTML) </script> </body> ``` - 會抓到 `Hello ?! <a>Yolo~</a>` 這串; 把標籤中的東西拿出來。 - 如果用`document.querySelector('#block a')` 就會只抓到 ``<a>Yolo~</a>`` 。 ## outerHTML (很少改整段) 如果在 html 內這樣改: ``` <body> <div id='block'> Hello ?! <a>Yolo~</a> </div> <script> const element = document.querySelector('#block') console.log(element.outerHTML) </script> </body> ``` - outerHTML 會把整段標籤抓出來，如果在 id 會連 id 也抓。 - 如: ``<div id="block"> Hello ?! <a>Yolo~</a> </div>`` 。 ## outerHTML 可以改變元素如果在 html 內這樣改: ``` <body> <div id='block'> Hello ?! <a>Yolo~</a> </div> <script> const element = document.querySelector('#block') element.outerHTML = '<h1>Hello~!?</h1>' console.log(element.outerHTML) </script> </body> ``` - outerHTML 會把整段元素都改成 `<h1></h1>` ，連文字都改成 Hello~!? 。 --- 參考資料: [理解textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用場景和區別](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/535058/) --- # 1-7 、用 JS 插入和刪除元素 ###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/02 --- ## `element.removeChild()` 如果在 html 內這樣改: ``` <body> <div id='block'> Hello ?! <a>Yolo~</a> </div> <script> const element = document.querySelector('#block') element.removeChild(document.querySelector('a')) </script> </body> ``` - 會只印出: Hello ?! 。 - 要刪掉元素要知道上一層的 parent 是誰。 - 如果 ``<body>`` 下面再放一個 ``<a>123</a>`` ，會刪除不了，因為不可能刪除掉 body ? - 可以參考 [`Node.removeChild()` - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Node/removeChild) 。 --- ## `element.removeChild()` 如果在 html 內這樣改: ``` <body> <div id='block'> Hello ?! <a>Yolo~</a> </div> <script> const element = document.querySelector('#block') const item = document.createElement('div') item.innerText = '123' const item2 = document.createTextNode('456') element.appendChild(item) element.appendChild(item2) </script> </body> ``` - `element.appendChild(item)` 會新增一個 ``<div></div>`` 標籤，和增加 123 的文字。 - `element.appendChild(item2)` 會新增一個純文字 456 。 - 可以參考 [`Node.appendChild()` - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Node/appendChild) 。 --- 參考資料: [Node - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Node)