# W_JS30紀錄本
[TOC]
## JS-01
下方兩個行為有相識，但能力不同
### onclick() 只能單一綁定事件
### addEventListener() 可以綁定多個事件
也就是說當在處理動作時，addEventListener()可以處理較多的動，而onclick()只能處理一次
addEventListener()可以放兩個參數
1. event 事件
設定指定要的動作，比方 click, mouseenter, mouseleave...，而這些動作稱之為type
2. function
是 callback func，設定觸發event時，會執行的動作
3. 先不論述
### querySelector 選擇器
主要功能是選取 HTML 的 DOM 元素，像 getElementById()，但是query...()可以選擇 id 跟 class，後者則只能選 id
### Event 事件
keydown：作用是按下鍵盤按鍵可觸發事件，任意按鍵都可，按住會連續觸發
keypress：不同於keypress在於，只能對文字件有反應，如esc、arrow、backspace...等無效
keyup：放開按鍵時觸發，不能連續觸發
### classList
是DOMTokenList一種實例，用來選取 html 裡的 class，並且管理與操縱 css 的元素。
在此題作用中，css 裡有一個 class，裡面建立放大屬性 .playing{...}(這題中它只是一個 css 工具包，html種沒有此class)
> //以下皆為DOMTokenList的方法，可以先想像是不同層級，緊接在class之後(ex : const.classList.add("css class without ."))
- add(className)：添加一個類別。
- remove(className)：移除指定的類別。
- toggle(className)：如果該類別存在就移除，否則添加。
- contains(className)：檢查元素是否包含某個類別。
### data-*
＊是一個屬性名稱，可以隨意取名，個人認知上用法有點類似object
### currentTime
是`HTML DOM API` 的其中一個接口 `HTMLMediaElement` 裡面的其中一個屬性(屬性很多)。特色是針對 HTML 裡面的 Media tag 做編輯，`audio`、`video`
---
## JS-02
### Date()
他是標準內建物件(build-in object)中的其中一個物件(array、function 也是喔)，範例中是` const now = new Date();`，而這個date()是基於世界標準時間(UTC)而運作。
#### getSeconds()
Date()底下的其中一個實例，所以關係可以理解為：標準內建物件 > Date > getSeconds，作用是取的UTC的秒數
### 改變 CSS style
前提要先提取class，使用前面教到的選取器 querySelector(".hand")，要改時就用，舉例 `hand.style.transition ＝ rotate(${...}deg)`，這樣就可以改了
### setInterval
操作func呼叫的間歇時間，比方設定1000毫秒(1秒)，它就會間隔1秒呼叫(使用)一次。
### 這題指針過0時會出現bug的解法
為什麼querySelectorAll可以使用forEach，目前已知：他跟NodeList有關連性，而NodeList 類似array ，可以操作array方法，但它只是像，並非array，如果是getElementById等等是HTMLCollection(日後更多案例在研究)
```javascript=
if (seconds === 0) {
pauseTransition();
}
function pauseTransition() {
document.querySelectorAll(".hand").forEach((hand) => {
hand.style.transition = `none`;
});
setTimeout(() => {
document.querySelectorAll(".hand").forEach((hand) => {
hand.style.transition = `all 0.05s`;
}, 1000);
});
}
```
---
## JS-03
### change 事件
作為addEventListener()旗下的事件，它能針對html裡面的 input、select、textarea 來調整內容，
### NodeList HTMLcollection
- NodeList 靜態
- HTMLcollection 動態
---
## JS-04
### ?
叫做條件運算子，作用是簡易的if else，已知只有簡易判斷true false的能力，以下為MDN範例
```javascript=
var age = 26;
var beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Beer"
---
function greeting(person) {
var name = person ? person.name : "stranger";
return "Howdy, " + name;
}
console.log(greeting({ name: "Alice" })); // "Howdy, Alice"
console.log(greeting(null)); // "Howdy, stranger"
```
---
## JS-05
---
## JS-06
### fetch
- window底下獲取資源方法，**請求**後，若成功會獲的一個 promise (產生Respnse)
- 如果沒有成功獲取資料，fetch 也不會提示https錯誤狀態碼(404等)，可透過.then檢查Response.ok 和/或 Response.status
### Wes bos 範例
```javascript=
fetch(e).then(blob => JSON.parse(blob))
```
>blob可以是一個表示污點的意思
上方，JSON.parse無法作用，blob必須使用原生data轉換成 JSON 檔，這是因為fetch最初不能解析檔案，即便我們都知道他是Json擋，這是因為fetch最一開始，所以Wes開啟devtool檢視發現blob的原型練中有json屬性，後來就改成如下
```javascript=
fetch(e).then(blob => blob.json())
```
使用成功後會在取到下一個promise，這時要再做一次`.then`
### ...展開運算符
可以理解為陣列剝香蕉皮
```javascript=
//建立一個func 裡面接收3個參數 abc
function pellBanana(a,b,c){
return a + b + c
}
//變數存放值
const BananaNotPellYet = [1,2,3]
//呼叫 pellBanana 並傳入 notPellYet
pellBanana(BananaNotPellYet)
pellBanana(...notPellYet)
```
在這裡 BananaNotPellYet 是陣列，如果直接將陣列傳入會變成
- a = [1,2,3]
- b,c 會是undefined
結果就是1,2,3undefinedundefined
而 pellBanana(...notPellYet) 其`...`是打開陣列(把[]香蕉皮剝掉)，這樣就可以變成三個引數，便可實現return，
### match()
是string.prototype.match()，match()顧名思義就是要符合才會match()，既然是string原型鍊底下方法，勢必是跟輸入文字有關，所以它可以針對使用者輸入的值做檢測，比如擷取一句話中指定的文字並印出，或是與regexp(正則表達式)配合，他是match()的參數
---
## JS-07
### Array.some()
Array.some 是用來檢查陣列裡面是否有一些符合條件。只要有一個以上符合條件就會回傳 true，全部都不是的話會回傳 false。- 回傳true、false值
- 三個參數
- element : 遍歷
- index：賦予索引
- array：array本身
> 可以使用Date().getFullYear()取到年份的值，並且可以做計算
### every()
Array.every 和 some 類似，不過要陣列裡面的所有東西都符合條件才會回傳 true，只要有一個不是就會回傳 false。
### find()
find() 方法會回傳第一個滿足所提供之測試函式的元素值。否則回傳 undefined。
```javascript=
const arr = [1,3,15,6,773,4]
const found = arr.find(num => num > 10)
console.log(found)//15
```
### findIndex()
跟上面差不多，只是找到所提供之測試值的索引
### splice
刪除陣列值的一個方法
```javascript=
//第一個1是陣列第一個數(非索引),第二個1是陣列索引
const removeTheNum = comments.splice(1, 1);
```
## JS-08 DevTool功能介紹
### string substitutions
他是只一個替換字串的功能，使用％做前綴，後綴則是一個特定英文字
```javascript=
Specifier Description
%s Format a variable as a string
%d Format a variable as an integer
%f Format a variable as a floating-point number
%o It can be used to print a DOM Element
%0 Used to print an object representation
%c Used to pass CSS to format a string
```
---
## JS-10
---
## JS-11 影片bar
這提我遇見bug，播放影片會大當機。這集的重點是賦予每條bar相應功能，快轉倒轉、音量、影片播放按鍵轉換等
---
## JS-12 先跳過
教當你使用特殊按鍵會有彩蛋，所以先跳過
---
## JS-13 文章圖片滑入
offsetTop 是HTMLElement系列的產物，目前已知作用是 JS 測量 HTML 元素的距離
---
## JS-14
.cancat 是 array 得一個方法，作用是將選到的陣列合併
```javascript=
let player = ['Watson','Jeremy']
let player2 = ['julia','Eva']
let team = player.concat(player2)
console.log(team)//['Watson', 'Jeremy', 'julia', 'Eva']
```
---
## JS-15 這是重要議題 可用在to do list 主軸是測試刷新頁面後 輸入文字與按鈕不會因為刷新頁面而消失。依舊保留在local storge
perserve log 是chrome dev得功能，可以保留所有在console執行得結果，有些時候執行頁面，畫面會自動刷新，此時dev紀錄就消失，這時就需要開啟它
vscode 快捷件 shift + 9 小括號(parentheses)
物件縮寫
```javascript=
let Frieza = '弗利沙'
const GinyuTeam = {
Ginyu: '基紐',
Jeice: '吉斯',
burter: '巴特',
// ...
}
// 原本寫法
const newTeam = {
GinyuTeam: GinyuTeam,
Frieza: Frieza
}
// 縮寫
const newTeam = {
GinyuTeam,
Frieza
}
```
事件冒泡：在HTML下了兩個div，並在最裡面的div放一個button，以及為他們三個都各設定一個**click**事件，但是當我點擊button的時候會發現同時觸發了外面兩層div的事件，因為三個DOM很剛好的重疊了，所以點擊後會觸發所有的click事件，這個現象我們稱呼為「事件冒泡」。
#### localStorge
跟 cookies 很像，一樣是存在本地，優點是可以永久儲存，空間也比較大，通常是5mb。
cookies:通常每條最大 4KB，儲存量有限且附加於請求會影響效能
#### setItem、getItem
---
# JS-16
offsetHeight
offsetWidth
---
# JS-17
定義strip函式
javascript
複製程式碼
```javascript=
function strip(bandName) {
return bandName.replace(/^(a |the |an )/i, "").trim();
}
```
功能：去掉樂團名字前面的特定單字 (A、An、The)，並刪除名字前後的多餘空格。
關鍵點：
正規表達式 ^(a |the |an )：
- ^：表示匹配開頭。
- a |the |an：匹配 A、The 或 An。
- i：表示正則表達式不區分大小寫。
- .replace()：將符合的部分替換為空字串。
- .trim()：移除字串前後的空格。
---
## JS-22 講解 hover 效果，
#### append
#### get
---
## JS-24 運用 js 製作 fixed-nav
---
## JS-25 事件冒泡處理，以及重複點擊問題
`once:true`阻止重複點擊問題
`capture`還不確定是
`stopPropagation`阻止冒泡，繁殖問題
---
## JS-26 用 JS 做 dropdown
#### `getBoundingClientRect()`
取得元素大小
#### `CSSStyleDeclaration`底下得`setProperty()`
可以動態改變css屬性
propertyName
- 要設定的 CSS 屬性名稱，通常以字串表示。
如果是多字組成的屬性（例如 background-color），需要用 kebab-case。
value
- 要賦予屬性的值，例如 10px, red, block 等。
priority（可選）
- 預設是空字串。如果要設定為 !important，可以明確傳入 "important"。
---
## JS-27 這題目是輪撥
Sign in with Wallet
Connect another wallet