###### tags: `HTML助教作業`
# 第四週作業

第四週開始進入JavaScript課程，要讓同學先了解JavaScript有何用處，並且詳細介紹BOM和DOM是什麼，之後開始讓同學熟悉利用開發者工具(F12)Debug，從最簡單的console.log()開始，一定要讓同學養成console.log()的習慣，這週作業不用出太難，要先讓同學消化BOM和DOM，運算式的部分因為同學大多都有修過JAVA了，所以稍微講一下就可以了，重點是要讓同學了解兩個等於和三個等於差在哪，記得要提醒同學回家要預習下禮拜的課程，因為下禮拜的作業會偏難一些。

簡報上的好像有介紹到 **document.getElementById()** 和**document.getElementByClassName()** 等等又臭又長的語法，這個部分展示一下跟**document.querySelector()** 有什麼差別就好，然後讓同學一律使用**document.querySelector()**。

***學習重點***
- 學習如何抓取DOM元素
- 學習如何使用計時器
- 學習如何使用innerHTML(重要)
- 學習DOM基本語法(alert,prompt,confirm)
- 了解innerHTML和innerText差別
- 了解 == 與 === 的差別

***重點語法***
- == , ===
- console.log()
- document.querySelector()
- document.querySelectorAll()
- addEventListener
- document.write()
- innerHTML
- innerText
- location
- prompt
- confirm
- alert
- setInterval
- setTimeout
- clearInterval
- clearTimeout

***作業要求***
按下按鈕後跳出要求輸入文字的視窗，輸入完按下確認後，剛剛輸入的文字會顯示在畫面上，每隔2秒出現一次，總共會出現3次，3次出現完以後會出現輸入完畢，請同學試著用**setInterval**完成，並且按下清除文字時，會跳出視窗詢問是否確定要將文字清除，按下確定以後文字會從畫面上消失。

<iframe src="https://codesandbox.io/embed/disicizuoye-fmtp1?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="第四次作業"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>