1.這是甚麼 2.為甚麼要學這個 3.會用在哪裡

JS 目前最主流的兩個執行環境：瀏覽器、NODE.JS。這週主要學習是 runtime 給 js 的東西，為甚麼要學這個？因為要在瀏覽器上用 js 操控它的元素，換句話說，當網頁需要互動，都會需要用到。

因為瀏覽器在執行上是順序跑下來，所以可以利用將 1. script 標籤放到最後 2. 將要執行的內容放在 function() 中 document.addEventListener('DOMContentLoaded', function() {}) => 這個 eventListener 會在 dom 都 loaded 完才會被觸發 ，解決回傳東西是 null 的 eventListener 問題。

演習課

(部分節錄)

Q：程式狀態儲存所說 :「假設今天有一個點了畫面會變色的網頁，有些人變色之後幫背景加上一個 bg-changed 的 class，然後點畫面時根據背景有沒有這個 class 來決定變色了沒」，這樣跟多用 class，少直接改變 style所說的意思不是一樣嗎?

用 class 來取代直接改變 style 是可以的。但如果點畫面，依據 class 來決定直接變色沒，盡量不要這麼做。因為這個狀態可以利用一個變數去存，不需要用 class 去判斷。用變數的好處是，邏輯變得更單純，舉例來說，程式內會有個變數 isBgChanged，點了畫面依據這個變數決定要不要改東西。

Q：不理解 margin: auto 的作用。為甚麼 margin: 0 auto 就會置中對齊，另外為甚麼 當我對我的元素做固定定位，將它的 top bottom 都設為 0 然後加上 margin: auto 它就會垂直置中。如果再多加上 left right 為 0 就會完全置中在畫面 ?

margin: 0 auto 上下 0 沒有影響，左右 auto 代表對左右自動取他的邊距，自動取邊距的結果就是一半一半。所以瀏覽器上呈現就會是置中對齊。一定要設定寬度，他不知道寬會沒辦法做這件事。

運用 margin auto 置中 為甚麼進行 google。
參照、使用 absolute + margin auto 來達到CSS垂直置中效果

Q：想問老師對於一些不需要結尾標籤的標籤，例如 <img> 老師結尾都會加上 "/"，可是自己在寫作業和查網路上資料的時候發現其實很多範例都會直接不加 "/"，所以有點疑惑該不該加，請問這是不是就像 JavaScript 結尾要不要加 ";" 一樣，就是一種書寫習慣呢？

對，書寫習慣。補充、react 沒有結尾標籤都要加 "/"。

Q：203行 values[input.name] = input.value211行 values[r.name] = r.value能理解這兩行是要把輸入的值丟到變數values裡面但看不懂這邊方括號的用法

//假設今天有一個物件
const obj = {
    a : 123
}
var name = 'a'

//想取 obj 裡面的 a
obj.a
obj.name => undefined
obj['name'] === obj.name
obj[name] === obj['a'] // 要把變數當 key 就要用方括號的用法

Q：請問input裡的required (原生驗證) 跟js的驗證(紅字錯誤提示)可以同時顯示嗎? 因為目前知道的事 html 標籤裡面的原生驗證會submit前就驗證了，然後js的提示就沒被顯示出來了

通常不會兩個同時用。兩個不該同時出現，混用不是很好。

Q：請問 input type='button' 跟 button type='button' 的區別??為什麼有時候會把按鈕顯示名稱直接放在value?

google 輸入關鍵字：input type = button vs button參考連結

basically you can put html into a <button></button>
people avoid (Hint: IE6)
Without a type, button implicitly receives type of submit

Q：該怎麼去理解像 document.querySelector 和 .addEventListener 這樣的東西，它是本來就存在於 JS語法裡面的東西，還是類似於 DOM 或是說 瀏覽器提供我們做使用的屬性(功能?)

他們不是存在 js 語法內的東西，是瀏覽器提供的 api。他是跟 dom 有關係的東西，他是瀏覽器的執行環境提供給 js 介面可以操作介面上的東西。

Q：想問老師如果改 index.html 的名字會造成什麼問題嗎？（在作業裡面這樣改被助教糾正說最好不要改)

server 會預設去找 index.html, index.php, index.js ...不需要完整的去找路徑。這只在路徑就是檔案路徑的狀況，多數靜態網站都是這樣。所以會不建議改名稱。

Q：請問可以用 JS 動態改變 :after 的 content 文字內容嗎

可以用別的方式間接去改。

span:after {
  content : attr(data-abc);
}

<span data-abc="1234"></span>

Q：請問 todo list 的編輯功能可以怎麼實做？直接用 input 取代 div 嗎？

第一種、在render 先將 input 給藏好
第二種、點了之後，動態新增 input 上去，蓋過去。不太會用取代，取代完之後還要加回來，太麻煩了。

Q：以 480px 寫手機的 RWD，是不是還是無法滿足所有的手機型號？（寫作業時打開 dev tool 點按預設的手機型號，有些會跑版有些不會）

對壓，有一種方式是左右邊距調多一點。

Q：為甚麼 JSONP 現在越來越少人使用 ?

JSONP 只是一個過渡期的東西，可以直接用 xhr 或是 fetch 去拿，其實沒有必要去用 JSONP。此外，他只能用 get，所以用 put, post 只能用一般串 api 的方式去串。一部分 JSONP 一部分一般串接，何不都用同一種串 ?

Q：preventDefault() 是阻止預設行為，但不影響是件的傳遞對嗎?

preventDefault() 是阻止預設行為；事件的傳遞跟你的 listener 有無被觸發到有關。預設行為會否被觸發跟你有沒有 call preventDefault() 有關。

推薦方式、自己做實驗來理解

如果最後沒有跳轉 => 事件沒有傳到上面所以沒有跳轉
如果最後有跳轉 => e.stopPropagation() 只是不把事件傳到這邊的 listener <a herf='google.com'>click</a>，但對瀏覽器來說它還是有點，他還是會跳轉。只要沒有 call preventDefault 就會跳轉。

<a herf='google.com'>click</a>
<script>
//在一點的時候就觸發。
  window.addEventListener('click', e => {
    e.stopPropagation()
  },true)
</script>