---
title: 20200806 Astro Camp Javescript 工作坊
tags: Astro Camp, javascript, workshop
---
# 20200806 Astro Camp Javescript 工作坊
## 01 按下滑鼠，背景亮了！
```javascript=
<body>
<script>
document.body.addEventListener('click', function() {
document.body.classList.toggle('light')
})
</script>
</body>
```
`document.(任何標籤名稱)` => 選取你要做動作的地方
`addEventListener('click', function(){})`
當做'click'動作時，我要執行後面的function
`classList` 選取標籤時的class名稱
`toggle` 是將開關狀態轉換
## 02 用按鈕控制背景
```javascript=
<script>
window.addEventListener('DOMContentLoaded', function () {
document.getElementById('toggle').addEventListener('click', function () {
document.body.classList.toggle('light')
if (this.textContent === '開') {
this.textContent = '關'
}else{
this.textContent = '開'
}
})
})
</script>
```
`window.addEventListener('DOMContentLoaded', function (){}`
不確定甚麼時候要讀取script所以要加上這行，讓我們的腳本執行是在window將整個DOM讀取完才執行
`getElementById('id')` => 取到id
`textContent` 可以把文字內容改掉
要將文字切來切去，要用if去判斷
`this` => 被click這個動作綁定的東西
`this` 很複雜，不如直接用指定id的方式寫
```javascript=
<script>
window.addEventListener('DOMContentLoaded', function () {
const toggleBtn = document.getElementById('toggle');
toggleBtn.addEventListener('click', function () {
document.body.classList.toggle('light')
if (toggleBtn.textContent === '開') {
toggleBtn.textContent = '關'
}else{
toggleBtn.textContent = '開'
}
})
})
</script>
```
## 04 動態建立元件
index內
```htmlmixed=
<body>
<div class="left">
<button id='create-element'>.createElement('div.time') to append</button>
<button id='reset-inner-html'>.innerHTML = ...</button>
<button id='remove'>.remove()</button>
<button id='create-element-insert-adjacent'><div class="creat7"></div>eElement('div.time') to insert</button>
</div>
<div class="right">
<div class="title">DOM practice...</div>
<div class="time">Thu Jul 23 2020 14:39:39 GMT+0800 (Taipei Standard Time)</div>
</div>
</body>
```
1. 當按下create-element按鈕時，右邊能動態的長出現在的時間div
```javascript=
window.addEventListener('DOMContentLoaded', function () {
document.getElementById('create-element').addEventListener('click', function () {
const timeDiv = document.createElement('div')
//先宣告一個timeDiv的變數。
timeDiv.className = 'time'
//讓這個timeDiv的class名字設定成'time'。
const currentTime = new Date()
//將timeDiv的內容設定成現在的時間，並設定成字串。
timeDiv.textContent = currentTime.toString()
document.querySelector('.right').appendChild(timeDiv)
//將timeDiv用appendCild塞進class_name為right的物件內的最後一個
})
})
```
2. inner-HTML!
```javascript=
document.getElementById('reset-inner-html').addEventListener('click', function () {
document.querySelector('.right').innerHTML = '<div class="title">DOM practice...</div>'
})
```
`innerHTML` 會把所選的物件底下替換成所設定的東西，這邊用字串去處理HTML語法
使用時要小心使用者有沒有把重要的東西放在字串裡面(eg.駭客程式....)
3. 刪除最下面的欄位
```javascript=
document.getElementById('remove').addEventListener('click', function () {
const lastTime = document.querySelector('.right .time:last-child')
//選取right內最後一個time div
if (lastTime !== null) {
lastTime.remove()
}
//要判斷刪到沒有了，就不執行
})
```
4. 將建立的欄位插到title下面
```javascript=
document.getElementById('create-element-insert-adjacent').addEventListener('click', function() {
const timeDiv = document.createElement('div')
timeDiv.className = 'time'
const currentTime = new Date()
timeDiv.textContent = currentTime.toString()
//以上都跟建立新欄位都一樣
document.querySelector('.title').insertAdjacentElement('afterend',timeDiv)
//
```
## 05 Timer!
Sign in with Wallet
Connect another wallet