{%hackmd BJqmTNgxD %}
ASTROCamp 5th JavaScript
===
#### 網頁中的互動以及行為
---
<div class="d-flex">
<div class="flex-1">
</div>
<div class="flex-2">
## 西瓜 / PastLeo
### [https://pastleo.me/](https://pastleo.me/)
#### [5xRuby.tw](http://5xruby.tw/) 工程師
</div>
</div>
---
### 本投影片連結
https://ppt.cc/fawaHx
### 下載隨堂練習包
https://ppt.cc/fpeMux
---
## 用 JS 讓網頁有互動
---
## `01_light-toggle`
### 從最簡單的互動開始
---
### `01_light-toggle`
```bash
ruby -run -ehttpd . -p8000
```
或是使用 [VSCode Live server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
---
### `01_light-toggle`
<style>
.light-toggle-steps ul > li:nth-child(2) code {
font-size: 24px;
}
</style>
<div class='light-toggle-steps'>
* `document.body`
* [`.addEventListener('event_name', function() { ... })`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
* [`.addEventListener('click', callback)`](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/click_event)
* [`.classList.toggle('class_name')`](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/classList)
</div>
---
## `02_light-toggle-button`
### 來用個按鈕來控制
---
### `02_light-toggle-button`
<style>
.light-toggle-button-steps ul > li:nth-child(2) code {
font-size: 24px;
}
</style>
<div class='light-toggle-button-steps'>
* [`document.getElementById('id')`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
* [`window.addEventListener('DOMContentLoaded', callback)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event)
* [`this`](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/this) ⚠
* [`.textContent` / `.textContent = ...`](https://developer.mozilla.org/zh-TW/docs/Web/API/Node/textContent)
</div>
---
## `03_light-on-off-buttons`
### 設定開或關，而非只是 toggle
---
### `03_light-on-off-buttons`
<style>
.light-on-off-buttons-steps ul > li:nth-child(3) code {
font-size: 32px;
}
</style>
<div class='light-on-off-buttons-steps'>
* `.classList.add('light')`
* `.classList.remove('light')`
* `document.querySelector('.status span')`
</div>
---
## BOM / DOM
---
## BOM
### Browser Object Model
### 瀏覽器視窗 `window`
---
### `window`
* 比較接近一個瀏覽器的 tab
* `window.` 看看有哪些東西
* [MDN: Window](https://developer.mozilla.org/zh-TW/docs/Web/API/Window)
---
### `window` 是全域變數
* `console.log`
* 等同於 `window.console.log`
* 直接寫 `a = 123`
* 等同於 `window.a = 123`
---
## DOM
### Document Object Model
### HTML 在 JavaScript 的界面
---
### DOM
* `document` / `window.document`
* [Document](https://developer.mozilla.org/zh-TW/docs/Web/API/Document)
* `.getElementById('id')`
* [Element](https://developer.mozilla.org/zh-TW/docs/Web/API/Element)
* [HTML 元素](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element)
---
## 動態建立元件
### `04_create-element`
---
### `04_create-element`:
#### Create & append
* [`document.createElement(...)`](https://developer.mozilla.org/zh-TW/docs/Web/API/Document/createElement)
* [`debugger`](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/debugger)
* [`parent.appendChild(el)`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)
---
### `04_create-element`:
#### 直接指定 innerHTML
* [`.innerHTML = ...`](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/innerHTML)
* 透過指定字串建立 DOM，很強大
* 要注意是否有使用者輸入的資料
---
### `04_create-element`:
#### 刪除 DOM
* [`.remove()`](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove)
* 如果找不到元素？
* [`el.parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)[`.removeChild(el)`](https://developer.mozilla.org/zh-TW/docs/Web/API/Node/removeChild)
---
### `04_create-element`:
#### 放至指定位置
```javascript
refEl.insertAdjacentElement('afterend', el)
```
* [MDN: insertAdjacentElement](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement)
* `'beforebegin'`
* `'afterbegin'`
---
## [jQuery](https://jquery.com/)
### `$` / `$()`
---
### Why jQuery?
* 早期 DOM API 有相容性問題
* `document.querySelector()` => `$()`
* [API](https://api.jquery.com/)
* [Effects](https://api.jquery.com/category/effects/)
---
## `05_timer-jquery`
### 來做個計時器！
---
### `05_timer-jquery`
#### 基本計秒功能
<style>
.timer-jquery-steps ul > li:nth-child(5) code {
font-size: 32px;
}
</style>
<div class='timer-jquery-steps'>
* [`<script>` 引入 jQuery](https://code.jquery.com/)
* [`$(window).ready(callback)`](https://api.jquery.com/ready/)
* [`$(...).click(callback)`](https://api.jquery.com/click/)
* [`$(...).text(...)`](https://api.jquery.com/text/)
* [`setInterval(callback, milliseconds)`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
</div>
---
### `05_timer-jquery`
#### 暫停功能
* [`timer = setInterval(...)`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
* [`clearInterval(timer)`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval)
* BTW, 只跑一次的
* [`timeout = setTimeout(...)`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
* [`clearTimeout(timeout)`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout)
---
### `05_timer-jquery`
#### 來點效果
<div style="font-size: 32px;">
* [`$(...).slideDown()`](https://api.jquery.com/slideDown/) / [`$(...).slideUp()`](https://api.jquery.com/slideUp/)
* [`$(...).prependTo()`](https://api.jquery.com/prependTo/) / [`$(...).appendTo()`](https://api.jquery.com/appendTo/)
* 最後來點速度感
</div>
---
## [You might not need jQuery](http://youmightnotneedjquery.com/)
#### 回家作業：
#### 用原生 DOM API 改寫 `05_timer-jquery`
---
### Web API 很多
#### 要學會自己尋找解決方案
#### [Web API 心智圖](https://drive.google.com/file/d/1KLNmPTFkvzWGTYuoMsQDG9WZcHgyC9dj/view?usp=sharing)
{"metaMigratedAt":"2023-06-15T11:01:31.188Z","metaMigratedFrom":"YAML","title":"網頁中的互動以及行為 - ASTROCamp 5th JavaScript","breaks":true,"slideOptions":"{\"spotlight\":{\"enabled\":true,\"size\":80,\"presentingCursor\":\"default\",\"toggleSpotlightOnMouseDown\":false,\"spotlightOnKeyPressAndHold\":90,\"initialPresentationMode\":true,\"disablingUserSelect\":false,\"fadeInAndOut\":500}}","contributors":"[{\"id\":\"0eb274f7-a3a4-4c8e-b0d4-e5c08eaf9e72\",\"add\":7713,\"del\":1414}]"}