# 0304 - 開學 / JS
[MarkDown語法大全](/BVqowKshRH246Q7UDyodFA)
各位隨性筆記ヽ(￣▽￣)ﾉ
今天課程 變數提升見解
---
### 變數提升
> Javascripts在執行時會分兩個階段，第一個階段是建立期，第二個階段是執行期。以下先舉一段程式為例:
```js
1 console.log(a)
2 var a = 2
```
1. 根據以上的例子:在第一行 console.log(a) ，是Js第二段階段要做的事，所以在瀏覽器上得到的結果是 undefined，但為什麼會這樣?
A: 這是因為 Javascripts 在執行時在做第一階段的工作，會把 var a 先建立起來讓瀏覽器知道有變數 a 的存在，只不過他的初始值是 undefined，在第二階段才會做賦值與函數執行的事 a = 2，這樣也可以解釋腳本在運行時，第1行console.log(a) 的結果是 undefined 而不是 a is not defined。
如果想要印出 a = 2 的結果，以上的例子只要在第2行後的第3行加上 console.log(a)就可以得到這個結果，這是因為在第2行時 a 的變數被建立，然後也被賦予了值才會得到結果 a = 2
---
```js
1 console.log(a)
2 var a = 1
3 console.log(b)
4 var b = 2
5 console.log(c)
6 var c = 3
```
2. 再舉個例子來解整個腳本
從以上程式碼在瀏覽器得到的結果是
undefined app.js:2
undefined app.js:4
undefined app.js:6
A: 從這裡我們要了解到 Javascripts 在運行時會把==整個腳本==執行第一次階段的工作把整個腳本裡的 var 指定的變數全部都先建立起來，然後才開始執行第二階段的工作，所以在整個腳本裡第一階段跟第二階段的工作只會執行一次。
3. 再來我們來看看 let 跟 var 有什麼不同以下為程式範例
```js
1 console.log(a)
2 let a = 1
```
在瀏覽器得到的結果是 app.js:2 Uncaught ReferenceError: Cannot access 'a' before initialization 根據 Google 翻譯: 未捕獲的引用錯誤：初始化之前無法存取“a”。
A: 當我們使用 let 來宣告變數而未賦值的話，則會得到以上的錯誤訊息，在JS世界觀里 let 所宣告而未賦值的變數就像一個有標籤的存在但卻不能被拿來使用，這也為稱為暫時死區(TDZ)，也就是說我做了一個標籤沒貼到罐頭上，根據超市規定我不能對這個標籤做任何使用的動作，而是得等他貼到罐頭上才能用，相對來說 let 也是根據 ES2015 的規定給予以上程式碼得到的結果。所以 let 告的變數也是有提升只是因為 ES2015 新的規定跳出警告訴開發者程式瑪錯誤。
---
## 0304 課程複習用
### 程式
1. 程式語言有哪種編譯方式？
2. ＪＳ是屬於哪種？原因？
### ＪＳ相關
#### 變數
1. 何謂變數？
2. ＪＳ的變數的命名規則？（禁止怎樣的命名方式？
3. 變數的命名方法？有哪些種類？ＪＳ的習慣命名法為？
#### 變數提升
1. 什麼是變數提升？（ＪＳ變數提升的原因
2. ＪＳ編譯時會經過哪些過程？這過程分別做了什麼？
3. 宣告時使用 let 與 var 在編譯過程的差別？
### 名詞
1. terminal
2. shell
3. TDZ (Temporal Dead Zone)
### 命名法
* 命名**規則**：不能用變數名稱、程式用語（if, for...）和數字開頭
* 命名**選擇**：const >> let > var > 不命名
* 注意：name在瀏覽器預設為**空字元' '**，所以命名不能直接用name取
#### 命名類型
1. my_hero_name **蛇式snake case**
Ruby, Phyton常用
2. myHeroName **駝峰camel case**
JS常用
3. my-hero-name **烤肉串kebab case**
僅HTML使用，但程式語言不使用
- - -
# 變數
## * 命名規則
1.==不能以數字開頭==
2.JavaScript內部有保留字(reserved words)，例如:null、of、if、for、while、let、const、var等不能當作變數名稱
## * 命名習慣
1.my_hero_name 蛇式
2.myHeroName 駝峰式(Js命名習慣)
3.my-hero-name 烤肉串式(Js不接受-符號在命名中)
## * 變數宣告
Js內建var、let、const可作為變數宣告，但因var為以前"妥協"的規則，有諸如可以重複宣告，為全域變數等瑕疵，在程式碼複雜時可能產生預期外錯誤，==盡量不要使用==，宣告方式如下:
``` js
var a = 1;
let b = 2;
const c = 3;
```
let及const不能重複宣告(redeclaration)，const不接受重複賦值(reassignment)並且const一定要給定初始值
``` js
const c;
```
上述寫法會出現SyntaxError: Missing initializer in const declaration的錯誤訊息，但下述寫法卻是可以的
``` js
var a;
let b;
```
## * 變數提升(Hoisting)
```js
console.log(a);
let a = 1;
```
在一般邏輯下，變數應該在宣告後才可以使用它，但在運行上述程式碼時可能會發現一個奇怪的現象，印出來的錯誤為"ReferenceError: Cannot access 'a' before initialization"，並不是"a is not defined"的錯誤代碼，這是因為Js在運行程式碼時會遵循一套架構-Global execution context，以下圖說明
Global execution context主要分為兩階段:Creation phase和Execution phase，creation phase執行完畢才會進入execution phase，creation phase主要會進行四件事，先不管前面三件事(之後課程應該會說明)，直接看第四點Hoisting
在hoisting中，Js會將變數、function及Class分配至記憶體中，以上圖程式碼為例，變數a、b及函式area被分配至記憶體，但並未賦於值，這狀態下的變數可稱為TDZ(暫時死區)，分配完後進入execution phase
進入execution phase後，Js會由上而下運行程式碼、給予變數值並運行函式，所以在這階段，變數a、b才被初次賦於值(initailization)
```js
console.log(a);
let a = 1;
```
回到最上述例子，可以一步一步想想看，在creation phase時，第一行程式碼並不會有動作，第二行程式碼變數a被分配給記憶體，但尚未賦值(或可想成let a被Js提升到程式碼最上面)，接下來進入execution phase，第一行程式碼嘗試印出a，但這時候a並沒有被initaialization，為TDZ狀態，所以出現錯誤訊息"ReferenceError: Cannot access 'a' before initialization"
```js
console.log(a);
var a = 1;
```
但執行上述相似程式碼並不會得到一樣的錯誤訊息"ReferenceError: Cannot access 'a' before initialization"反而會給定一個值"undefined"，why?這是因為var是比較早開發出來的變數系統，為了使程式更簡單易寫做了一些"妥協"，當creation phase發生時，var一樣會被分配給記憶體，但這時系統會自動幫var賦予"undefined"的值，所以當進入execution phase的時候，console.log就會印出var被賦予的"undefined"值，如果在後續再印一次
```js
console.log(a);
var a = 1;
console.log(a);
```
，因為a在第二行被賦於1的值，結果則會出現"undefined"和1的值(印了兩次)
### 以上內容部分為自行搜尋整理，有誤歡迎指出
- - -
# 0305 - js
### 宣告
```
- let 區域變數，可以重新賦值
- const 常數，宣告後無法重新賦值，但如果宣告指向為陣列或物件，則可修改陣列或物件的內容(item)
- var 歷史，範圍較大，妥協度高
```
### a++ ++a
```
範例
let num=0
console.log(num++) 0 印完後再遞增1
console.log(++num) 2
console.log(num) 2
```
### REPL
```
REPL=read -evel-print loop
REPL環境所執行的
```
### 取索引值
```
取最後一個索引值
1.python rb可以[-1] js不可
2.js
console.log(chars[chars.length-1])
console.log(chars.pop())
補充：pop函式會將最晚被插入陣列中的元素刪除，並將他回傳。
以下方為例如果再次印出chars時 "d" 會被移除。
let chars = ["a", "b", "c", "d"];
console.log(chars.pop()); // d
console.log(chars); // [ 'a', 'b', 'c' ]
```
### falsey value
```
js中會判定為falsey value
0 /“ ”空字串 / NaN/ null/ undefined/ false
```
### 判斷NaN是NaN嗎
```
判斷NaN是NaN嗎
let a=NaN
方法：
if(a!=a)
if(isNaN(a))
if(Number.isNaN(a))
例如：
if (Number.isNaN(a)) {
console.log("它是 NaN");
} else {
console.log("不是 NaN");
}
```
### == vs ===
```
console.log(123==“123”) //true鬆散
console.log(123===“123”) //false嚴格
建議還是用===好了
==有些規定要看工具書
```
### 轉換數字方法
```
number()會出現小數點
parseInt()轉換成整數
```
---
### 這裡補充一下 const 常數的心得
- 範例一
```
1 const a = 1
2 a = 2
```
>這段程式為在覽器作時會報錯得到 TypeError: Assignment to constant variable 型別錯誤，對一個常數賦值的錯誤。常數命名通是會用大寫來表示 const COUNT = 1
範例一
## const 的值能否被改變?
- 範例一
```
let car1 = "Honda"
let car2 = car1
car1 = "Toyota"
console.log(car1) // car1 = "Toyota"
console.log(car2) // car2 = "Honda"
```
> 從以上範例來看， car1 的是 "Honda" 比較好理的話指向一個地方，
當我們再宣告一個 car2 的變數於 car1 時，(* car2 的值是指向 car1 的值的地方)，所以 car1 的值改變時，car2 的值還是只向原本 car1 值的地方。
>>白話解釋: 我有一台本田車，我平常叫他為 car1 ,後來我覺得車子有兩個名字也不錯，就給他一個名字為 car2,所以在這個當下只要我喊 car1 and car2 都代表(指向) "Honda" 這台車。過一陣子後我又買了一台豐田車，就把原本的 car1 的名稱給豐田車用，在這個當下我喊 car1 就是代表我的豐田車，car2 就是代表我的本田車。
- 範例二
```
const class1 = ["Amy", "John", "Mike"]
const class2 = class1
class1[0] = "Judy"
console.log(class1) // [ 'Judy', 'John', 'Mike' ]
console.log(class2) // [ 'Judy', 'John', 'Mike' ]尸難難
```
> 我們先用 const 宣告 class1 的值是一個陣列，裡面有三個內容，並且是指向一個地方，這時我們再宣告一個 class2 等於 class1 (*class2 的值指向 class1 值的地方)，接下來我們把 class1 裡的 [0] 內容改為 "Judy"，所以 console.log(class1) 會得到 [ 'Judy', 'John', 'Mike' ] 這個結果，console.log(class2)也會得到跟 class1 一樣的結果，(*這是因為 class1 跟 class2 是指向同一個地方，即時內容再怎麼改變都是一樣 class1 跟 class2 獲得的結果是一樣的。
>> 白話:我們指定學校某層樓的某地是一個 class1 班級，班級裡有三位同學，然後指定這個 class2 班級為 class1,如果 class1 班級裡的同學有異動，隔天點名時 class2 這個班級的學生也隨著改變，因為 class2 的值是指向 class1 的值
> (*但有個重點是指向的地方內容可以改變但地方不能改變。以下用一段程式範例)
---
## 0305 課程複習用
以下為今日課程摘要, 可試著回答並確認是否有了解, 回答的答案就可以成為自己的筆記
如果認為有重點缺漏或是有誤, 請各位善心同學們幫忙補上。 （跪謝
### 型態
#### 強制轉型
規則複雜，可以不用記，可注意幾點
1. 解釋：console.log(3>2>1) // false 為何會有此錯誤？
2. 加上 +號之後, 後方的值型態會被轉型為?
#### 其他有關型態議題
1. 使用 prompt() 取得用戶端所輸入的該資料型態為？
2. typeof()所回傳的結果為什麼型態？
3. 在網路上傳輸的都是以什麼型態傳輸？
#### Number VS parseInt
1. 此二種皆可以將型態轉為數字 (轉數字只有兩種結果, 成功或是失敗,若失敗會變成什麼？
2. 此二者差異, 如轉會的值有小數點、文字......等會有什麼差別？
#### Falsy/falsey
哪六種情況會在判斷布林值時會出現 false？
#### NaN
1. NaN 的型態為？代表的意思為？
2. NaN == NaN 成立或不成立？為什麼？
3. 如何判斷某個變數是否為 NaN？
#### Null Undefind
Null 與 Undefind 兩者最主要的差異為何？
### 常數
1. 常數的命名慣例？
2. 常數的特性？指定數字與指定陣列的差別？
3. 為什麼常數指定時需直接賦值？
### 符號
1. 運算符 += , * =...... 等, 其功用？
2. a = 3, console.log(a++) 與 console.log(++a) 分別會印出什麼？原因？
#### === VS ==
建議皆使用 === 以避免地雷,故 === 與 == 主要是甚麼原因造成嚴謹與寬鬆的差異？
#### 邏輯短路
1. || 此運算符的作用？
2. && 此運算符的作用？
3. A || B 此運算式, 何時會判斷Ｂ？
4. A && B 此運算式, 何時會判斷Ｂ？
#### = (指定 assign 與 REPL)
REPL 為read - eval - print loop 的縮寫, 為一種執行環境
JavaScript 有賦值的值為回傳值的特性, 故若在判斷式內寫成賦值則會得到皆為 true 的情況。
```jsx
if(a = 15){
//因寫錯成賦值所以此處判斷式的return值為15,一定會判斷為true,就喪失判斷的意義
} else {
//這行永遠不會發生...
}
```
要注意會因執行環境的不同導致程式碼的結果會有所差異。
### Array 相關（此題可跳過）
index 索引值為何從 0 開始？
---
# 0306 - HTML
除了第一標題h1只能有一個，其他標題階層無數量限制
標題階層建議照順序編排，不要跳層級
製作網頁先用HTML建構，再用CSS去修改呈現外觀
### 清單：要依資料性質決定類型
1. 有序OL: ordered list (有流程性)，例：烹飪順序
2. 無序UL: unordered list
3. 清單項目LI: list item
4. 定義
### 快速鍵
command+N >>開新檔案
command+K -> M >>選擇語言
shift+option+上/下 >>往上下複製
option+上下 >>上下對調
有前人做過[快捷鍵筆記整理](https://hackmd.io/@carlochuang/vscode-hotkey)，還附有[VSCcode官方快捷鍵說明檔](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)，供參考
### 作業
[百齡國小課表表格，大家可以隨時練習](https://images.app.goo.gl/kd3CBtEpQNTsRSYZ6)
* 不用做左側教師欄位
* 不用管格子欄位大小(寬度)
[金魚老師的CSS選取器學習地圖](https://ithelp.ithome.com.tw/articles/10228196)
### 總整理今日上課內容：
```
1.HTML重要觀念：語意、SEO
2.vscode快捷鍵使用
3.標題h1～h6
4.內文<p>段落
5.清單（根據語意去判斷、是否具有流程順序）
* ol
* ul
* li
* dl
6.引言blackquto
7.超連結 <a>
* target
* title
* href
8.表格
* caption
* table
* thead
* tbody
* tfoot
* tr
* th
* td
* colspan
* rowspan
9.欄column 列row：補充一張欄和列判斷方式
```
### 表格排列
```
<table>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
```
### SEO
```
1.SEO 搜尋引擎最佳化Search Engine Optimization
2.和「語意/結構」相關，語意不清會影響SEO
3.舉例：無障礙網頁
```
### 標籤
```
1.<標籤 屬性＝值 屬性＝值>...</標籤>
2.標籤語意資訊不足，以屬性和值來補充
3.屬性和值中間不要加空白
```
---
## 0306 複習用
### VS Code 操作
組合鍵：==comment + K, M== - 在 VS code 切換語言
快捷鍵：==shift + option + 上(下)== - 快速向上下複製
快捷鍵：==shift + comment + 左(右)== - 整行選取
快捷鍵：==alt + 上(下)== - 與上下標籤內容對換
快捷鍵：==option + comment== - 複製游標
### HTML 介紹
HTML 為何種語言 (非程式語言, JS 為腳本語言) ？
因其特性故主要由三個成分所組成
1. 標題
2. 內文
3. 標籤
所以對 HTML 而言最注重的要點為 ？？ 處理不好則會對 SEO 產生影響
前端或全端工程師要注意各瀏覽器的支援度 (APP 內的瀏覽器為 web view)
### SEO 與 優化相關
理論上能有幾個 h1, 若超過會如何影響網站？h2 數量限制為？
課堂上有敘述到影響 SEO 除上述, 還有提到大小標的語意, 何種狀況會影響？
除大小標語意外, 若 h1 -> h3 跳過 h2 會有何影響？原因？
政府機關會額外需注意哪方面？
### 標籤
#### 標籤組成
主要為 <標籤 屬性=“值” 屬性=“值”>文字內容</標籤> 所組成
屬性、等號、值, 若加入空白哪些地方不能加空白？
#### 清單 (有序清單 ol、無序清單 ul)
有序與無序的差異在於？？
可試著分類：SOP、購物清單、食譜 等
網站常見的麵包屑 (路徑) 適合用什麼清單？
#### 超連結
```htmlembedded
<a href="#" alt="" target="" title="">我是超連結</a>
網址 顯示文字 視窗開啟方式 額外顯示文字
```
該標籤為何？屬性 href 功用為何？屬性 target 功用為何？使用此屬性需注意什麼？
#### 表格
表格 `<table>`主要分為 頭 (thead)、身 (tbody)、腳 (tfoot) 其中什麼必須存在, 不可省略
表格的標題標籤為 ？？
column 欄 直的, row 列 橫的 標籤為 `<tr></tr>`, 每個格子為 `<td></td>`
故 一列 tr 裡有多少 td 就決定有幾欄
格子本身也有分為兩種, 普通的為 td, 若標題則標籤為 `<th></th>`
若要做合併儲存格, 其為跨欄的概念, 在要橫跨的格子加入屬性 colspan=”值” , 在值輸入要橫跨的欄數即可, 跨列同理, 屬性為 rowspan, 但要注意, thead tbody tfoot 不能交叉相跨
#### 其他
換行的標籤為？
如何在非 HTML 標籤內寫 CSS 樣式？
在 什麼 標籤內加入 什麼 標籤後便可在裡面寫 CSS 語法
可在 html 內寫一些基本的樣式, 用意為以防 CSS 若不支援而掛掉還能有基本樣式撐著
---
# 0307 - JS
### 今日上課主題（大家加油）
```
三元運算子
break / continue
乘法表 / tree
function
function scope / block scope
return value
arrow function
anonymous function
var vs let
strict mode
global vaiable: window
```
### 三元運算子
```
1.三元（...）?符合做此事:不符合就做這事
2.可以取代邏輯判斷 但建議只用在簡單的
3.舉例：
let age = 20
const message = (age > 18) ? "已成年" : "未成年"
console.log(message);
```
### break vs continue
continue
1.後面不執行
```javascript
for(let i=0 ;i<10 ;i++){
if(i==5){
continue
console.log(i)
}
}
```
2.放最後面沒意義
```javascript
for(let i=0;i<10;i++){
console.log(i)
if(i%2==1){
continue
}
//因為他是用來跳過這個執行,結果你又不寫東西給他，很沒意義
}
```
break
1.舉例1
```javascript
for(let i=0;i<10;i++){
if(i==5){
break
}
console.log(i)
}
//0 1 2 3 4
```
2.舉例2
```javascript
for(let i=0;i<10;i++){
console.log(i)
if(i==5){
break
}
}
//0 1 2 3 4 5
```
3.總結
```
1.break你可以視為終止執行
2.continue視為pass這回合
3.兩者必須配合在迴圈裡使用
```
### 九九乘法表(雙重迴圈的概念)
1.for寫法
```javascript
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= 9; j++) {
console.log(`${i}*${j}=${i * j}`);
}
}
```
2.while寫法
```javascript
let a = 1;
while (a <= 9) {
let b = 1;
while (b <= 9) {
console.log(`${a}*${b}=${a * b}`);
b++;
}
a++;
}
```
### 聖誕樹
1.for寫法
```javascript
for(let i=1;i<=5;i++){
console.log(" ".repeat(5-i)+"*".repeat(i*2-1))
}
```
2.while寫法
```javascript
let i=1
while(i<=5){
console.log(" ".repeat(5-i)+"*".repeat(i*2-1))
i++
}
```
### function函數
```
1.輸入值和輸出值的關係 參數和回傳值的關係
2.參數parameter 引數argumet
3.參數和引數數量不一致(一個東西一個坑）
* 多了：當沒看到
* 少了：undefined
* 補充：python會顯示錯誤（錯誤：少引數或多引數）
4.參數預設值
```
### scope範圍
* let/const=block scope 活不出{ }
* var =function scope活不出函數
1.舉例1
```javascript
for(let i=0;i<5;i++){
var a=123//可以，因為只有函式才能關他(for迴圈不是函式) 讓它消滅
}
console.log(a);
//123
//undefined(REPL 因為console.log這函式，本身沒有回傳值 undefined)
for(let i=0;i<5;i++){
let a=123//活不出block{ }
}
console.log(a);
//a is not defined
```
2.舉例2
```javascript
function run(flag) {
if (flag) {
let message = "YES";//let活不出block{ }
}
else {
let message = "No";//let活不出block{ }
}
//上述可以都不看了
console.log(message);
//根本沒有message給他去印
}
run(true);
//message is not defined at run
function run(flag) {
let message = "No"
if (flag) {
let message = "YES";//活不出block
}
//直接跳上去看 let message = "No"
console.log(message);
//有東西給他印了
}
run(true);
//No
function run(flag) {
var message = "No"//var活不出function
if (flag) {
let message = "YES";//let活不出block
}
}
console.log(message);
//根本沒有message給他去印
run(true);
//message is not defined
function hi(falg){
var uu=456
function ha(){
var message=123//var活不出function
}
}
hi()
console.log(message);//根本沒有message給他去印
//message is not defined
```
### 宣告非常重要！！！！
```javascript
let a=123
function hi(){
a=456
console.log(a)
//我想要把a改成456 但我找不到a
//所以我跑到外面找 找到一個let a=123 我污染了他
//指派不等於宣告（重要觀念） 會污染外面的a
}
hi()
console.log(a);
//456
//456
let a=123
function hi(a){
a=456
console.log(a)//改裡面的a為456
}
//要去找a修改456 因函式裡面已經有a存在了 只會改裡面的a 不污染外面的a
hi()
cosole.log(a)//外面的a不受影響
//456
//123
```
### 重複宣告
總觀念
* var可以重複宣告
* let const不可宣告
舉例
```javascript
function hi(a){//函式已經有a了
let a=456//居然給他重複宣告了一個
console.log(a);
}
hi(123)
//let不可以重複宣告，所以印不出東西，會顯示錯誤
//Identifier 'a' has already been declared
function hi(a){//函式已經有a了
var a=456//但var可以重複宣告
console.log(a);
}
hi(123)
//456
```
### 回傳值
回傳值 （做完這東西後會得到的結果）
```javascript
舉例
function hi(){
console.log(123);//本來就會印出123
//return undefined 因為沒有寫回傳值(只要未寫 代表函式沒有結果)
}
console.log(hi());
//123
//undefined
function hi(){
return console.log(123);//console.log本身會做的事（印出123） 但console.log本身沒有結果（沒有回傳值）
}
console.log(hi());
//123
//undefined
function isadult(age){
if(age>=18){
return true
}
return false//省略寫else
}
console.log(isadult(20))
//true
function isadult(age){
return(age>=18)//簡寫 (age>=18)是布林值 符合為true
}
console.log(isadult(20))
```
### 結合變數提升概念（我覺得這邊最難 我有放老師上課的截圖 供參）
```javascript
abc()
var abc=function(){
console.log(123);
}
//因為變數提升 var回傳undefined
//undefined() 不是函式
//TypeError: abc is not a function
abc()
let abc=function(){
console.log(123);
}
//abc is not defined
//有變數提升 TDZ
//未初始化
abc()
const abc=function(){
console.log(123);
}
// Cannot access 'abc' before initializatio
```
作用域相關比較
```javascript=
function run(flag) {
let message = "NO"
if (flag) {
let message = "YES"; //因message會先搜尋if內的變數,此{}沒有message,所以會同意新增一個message並印出來
console.log(message); //
}
console.log(message);
}
run(true);
VM330:5 YES //此處為第五行的message
VM330:7 NO //此處為第七行的message, 與 IF 無關
```
```javascript=
function run(flag) {
let message = "NO"
if (flag) {
var message = "YES"; // 此處因 IF 外有用let宣告該變數,故 var 會重複命名,並跳錯誤訊息
console.log(message);
}
}
run(false);
VM335:4 Uncaught SyntaxError: Identifier 'message' has already been declared
```
---
## 0307 複習用
今天很雜亂, 如果有缺少什麼概念在幫忙補上, 謝謝
主要同為講解內容, 試著去思考答案
### 三元運算子
使用方式為 ??
```jsx=
let age = 12;
if (age >= 18) {
console.log("已成年");
} else {
console.log("未成年");
}
// 程式碼 8 效果等同於程式碼 2 ~ 6
age >= 18 ? console.log("已成年") : console.log("未成年");
```
8. `運算子1` 變數 age 的值是否大於等於數字 18 ==**?**== `運算子2` 是，就執行印出字串已成年。==**：**== `運算子3` 不是，就執行印出字串未成年。
```jsx
let someNumber = 16
const isBigger = someNumber >= 18 ? '比較大':'比較小'
console.log(isBigger) // 此處會印出？
```
### 函數
#### 基本
函數代表什麼？？
有哪些宣告方式？？
```jsx
function test(x) {
console.log(x)
return "value"
}
console.log(test("word")) //最後會印出什麼？
//用 VSCode 看主控會跳兩個, 直接貼瀏覽器會跳三個(第三個為REPL回傳.log的undefined)
```
上述 test(x) 的 x 為??
console.log(x) 的 x 為??
“value” 為 ??
```jsx
//太長了...這邊自己能解釋印出來的是什麼還有為什麼即可...
//自行變換位置玩看看,解釋不出來就趕快問龍哥...
let i = "something"
let j = "something2"
function test(x) {
let k = "something3"
j = "something4"
l = "something5"
console.log(x) //此時會先尋找此函數有無x,此函數有參數x,故會印出該參數x,若沒帶引數會印出undefined
console.log(i) //此時會先尋找此函數有無i,此函數沒i,往函數外尋找有i,故印出第一行的i
console.log(j) //此函數沒有j,所以會找到外邊的j,但是j已被賦值(指定)了,故印出上面賦值後的值
console.log(k) //此函數有k,故印出該函數的k值
console.log(l) //此函數與外邊都沒有l,此為賦值,並未被宣告所以會直接成為全域變數並印出來
}
test()
```
#### 參數、引數、變數
若引數給的數量少於參數, 則少的部分會？？ 若多於參數的部分為？？
如何在參數上給予預設值？？預設值的作用是？？
在函數內的宣告變數只會存活在函數內, ::但賦值不受範圍影響:: 有執行就會變更變數的值, 即使該變數在函式外
#### 回傳值
若函式沒有設定回傳值會回傳？？
return 若放在函式中間會發生什麼事？
#### 命名
函數命名同變數命名規則
最好的狀況就可以將此命名為 輸入與輸出值的關係
#### 函式與變數的變數提升
function a () {} 用此方式宣告的函式該變數提升過程？？
但若以指定變數為某一匿名函式, 則會依照變數提升的流程判斷
#### 箭頭函式
```jsx
const hi = function(x){
console.log(123)
}
//如何改寫成箭頭函式？？
```
箭頭函式等同函式的縮寫嗎？什麼狀況下成立？
### SCOPE
用 var 宣告的變數出 function 後還能繼續用嗎？
用 let/const 宣告的變數出 function 後還能繼續用嗎？
用 var 宣告的變數出 { } block 後還能繼續用嗎？
用 let/const 宣告的變數出 { } block 後還能繼續用嗎？
什麼宣告方式會造成重複宣告？會發生什麼事？
若沒宣告直接賦值, 會發生什麼事？
### 嚴格模式
如何使用嚴格模式？
可以只限定某範圍(如：函式)內使用嗎？如何用？
### 補充
在迭代內使用 continue 會發生什麼事？
字串內如何加入變數？怎麼寫？
---
# 0308 - 自習練習
迴圈解題第一步，找出規律
```js!
* * * %
** *** *** % *
*** ***** ***** % * %
**** ******* ******* % * % *
***** ********* ********* % * % * %
* *
* *
簡易版 標準版 進階版 豪華版
```
簡易版
```javascript
for (let i = 1; i <= 5; i++) {
console.log("*".repeat(i));
}
```
標準版
```javascript
for(let i=1;i<=5;i++){
console.log(" ".repeat(5-i)+"*".repeat(i*2-1)+" ".repeat(5-i))
}
let str = '';
for(let i = 1; i <= 5; i++) {
str = ''
for(let j = 0; j < 5 - i; j++) {
str += "1"
}
for(let k = 0; k < i * 2 - 1; k++) {
str += "*"
}
console.log(str)
}
```
進階版
```javascript
for(let i=1;i<=7;i++){
if(i<6){
console.log(" ".repeat(5-i)+"*".repeat(i*2-1))
}
else{
console.log(" ".repeat(4)+"*")
}
}
```
豪華版
ˋˋˋ
思考邏輯
1.可以先整理好共要印多少行數
2.先做出圖型再去加空格
ˋˋˋ
```javascript
(我後來想到個比較簡易的寫法 供參)
for(let i=0;i<=6;i++){
let result=" "
if(i==5||i==6){
console.log(" ".repeat(6)+"*")
continue
}
for(let j=0;j<=i;j++){
if(j%2===0){
result+=" %"
}
else{
result+=" *"
}
}
console.log(" ".repeat(4-i)+result);
}
(參考GPT XDDDD)
let str = ["%", "*"];
for (let i = 1; i <= 7; i++) {
if(i==6||i==7){
console.log(" ".repeat(5)+"*")
continue
}
let space = " ".repeat(5 - i);
let symbols = " ";
for (let j = 0; j < i; j++) {
symbols += str[j % 2] + " ";
}
console.log(space + symbols);
}
```
```javascript
另解
for ( let i = 0 ; i < 5 ; i++){
let line = "";
for ( let j = 0 ; j < 5 - i ; j++){
line += " ";
}
for ( let k = 0 ; k < i+1 ; k++){
if ( k === 0 ){
line += "%"
}else if ( k % 2 == 0){
line += "%"
}else{
line += " x "
}
}
console.log(line);
}
再另解
let result = ""
let space =" "
let putIn = true
let index = 1
for (let i = 1; i <= 5; i++){
if(putIn){
console.log(`${space.repeat(5 - index)}${result += "% "}`)
putIn = false
index += 1
}else{
console.log(`${space.repeat(5 - index)}${result += "* "}`)
putIn = true
index += 1
}
}
再再另解
let arr = ["*", "%"];
for(let i = 1; i <= 6; i++){
let str = '';
let count = 0;
for(let j = 0; j < 6 - i; j++) {
str += ' '
}
for(let k = 0; k < i - 1; k++) {
count++
if(count > arr.length - 1) {
count = 0;
}
str += arr[count] + " "
}
console.log(str)
}
補個解法
let result1 = "";
let tmp = "";
const count2 = 7;
const layers = 5;
const middle1 = Math.floor(((count2 * 2) - 1) / 2);
for (let i = 1; i <= count2; i++) {
let spacesStr = "";
for (let n = 1; n < Math.floor(count2 - i) + 1; n++ ) {
spacesStr += " ";
}
if (i <= layers) {
if (i % 2 === 1) {
tmp += "% ";
} else {
tmp += "* ";
}
result1 = spacesStr + tmp;
} else {
result1 = "";
for (let j = 1 ; j <= middle1; j++) {
result1 += " ";
}
result1 += "*";
}
console.log("result1", result1);
}
補解之二版
const symbol7 = ["%", " ", "*", "% * "]
const count7 = 7
const layers7 = 5
const middle7 = Math.floor(((count7 * 2) - 1) / 2)
for (let i = 1; i <= count7; i++) {
let result7 = ""
let spacesStr = ""
for (let n = 1; n < Math.floor(count7 - i) + 1; n++ ) {
spacesStr += symbol7[1]
}
if (i <= layers7) {
const group = Math.floor(i / 2)
result7 = result7 + symbol7[3].repeat(group)
if (i % 2 === 1) {
result7 += symbol7[0]
}
result7 = spacesStr + result7
}
else {
for (let j = 1 ; j <= middle7; j++) {
result7 += symbol7[1]
}
result7 += symbol7[2]
}
console.log(result7)
}
寫個笨解讓大家笑笑
const syb1 = ' %'
const syb2 = ' '
const syb3 = ' % *'
for (let i = 1; i <= 7; i++){
if(i == 1){
console.log(`${syb2}`.repeat(2)+` ${syb1}`);
}else if(i == 2){
console.log(`${syb2}`.repeat(2)+` ${syb3}`);
}else if(i == 3 ){
console.log(` ${syb2}`+`${syb3}${syb1}`);
}else if(i == 4){
console.log(`${syb2}`+`${syb3}`.repeat(2));
}else if(i == 5){
console.log(`${syb3}`.repeat(2) + `${syb1}`);
}else{
console.log(`${syb2}`.repeat(5) + '*');
}
}
```
### bmi計算機
```javascript
let weight=parseInt(prompt("體重？"))
let height=parseInt(prompt("身高"))
function bmi_count(weight,height){
let w=weight
let h=height/100
let bmi=(w/(h*h)).toFixed(2)
return bmi
}
console.log(bmi_count(weight,height));
```
### 閏年判斷
```javascript
let year=parseInt(prompt("年份？"))
function count(year) {
return((year%4===0&&year%100!==0)||year%400===0)
}
console.log(count(year));
```
### 陣列array
```
1.像藥盒概念
2.let abc=[a,b,c,d]
3.索引值 ex:abc[0]
4.取最後一個元素 沒有abc[-1](python才有這種寫法)
* 應使用abc[abc.length-1]
5.方法
最後面
* abc.push()從最後面給陣列增加一個元素
* abc.pop() 會移除陣列最後一個元素
最前面
* abc.unshift()從最前面給陣列增加一個元素
* abc.shift()從最前面給陣列刪除一個元素
中間處理
*abc.splice(1,0,"x")
//在第一個位置b,砍掉0個元素並補上一個x
//[a,x,b,c,d]
置換元素
const abc=[a,b,c,d]
abc[0]="e"
console.log(abc)
//[e,b,c,d]
兩個陣列組合再一起的方法
let abc=[a,b,c,d]
let efg=[e,f,g,h]
abc.concat(efg)
//[a,b,c,d,e,f,g,h]
```
---
# 0311 - JS
## 0311複習用
今日多課堂練習與運用, 可能有漏記筆記, 有遺漏請善心人士幫忙補上
複習也可配合課堂的題目再重新練習, 以上, 大家加油～
### 函式
function 是一種什麼？同數字、字串......等用法, 可當值帶入, 也可輸出值
```javascript=
function hi(){
return "123"
}
function hey(x) {
console.log(x)
}
hey(hi)
hey(hi())
```
請問兩個 hey 分別會印出什麼, 為什麼？
#### 高階函式
高階函式的條件有二,分別為？
高階函式有什麼優點？
### forEach, map, filter, reduce
- forEach 的用途？回傳值是什麼？
- map 的用途？ 是否具有回傳值？
- filter 用途？ 判斷什麼？回傳值是什麼？
- reduce 組成為 array.reduce(function(x, y) {return x + y}, z ) ,若 array = [ 1, 2, 3], 那在array.reduce當中 x, y, z 分別為什麼？會怎麼運作？
### 名詞 (此 part 不重要)
一等公民 (first class citizen) - ＪＳ函式提到, 可參考[一級函式](https://developer.mozilla.org/zh-TW/docs/Glossary/First-class_Function)
bubble sort ？一種排序方法, 怎麼排？（請參考老師所貼影片
模除：我看不懂, 選擇跳過, 今日有提到的名詞, 故列上......
### indexOf vs includes
```
indexOf 回傳索引值回來
includes回傳布林值回來
```
---
# 0312 - HTML
## 0312複習用
今天狀況不好, 或有疏漏, 或覺得有重點沒記到, 可以直接編輯幫忙補上, 感謝各位大德
### HTML5
- 廣義解釋：是 HTML、CSS 和 JavaScript 的組合，為了讓各種資料能以更豐富的型態表現所以產生(賈伯斯murmur)
- 狹義解釋：為有更新並加入新的標籤等, 能更加地表現出網頁的語意
### 文字設定
若表格內寬度加總超出預設總欄寬, 會重新計算並以何種方式重新編制？
this is book. 請問調整字距與字元間距, 分別會發生什麼事？
英文 case：字元 = t, h, i, s...; 字距：this(字距)is(字距)...
中文 case：字元 = 字, 元...; 字距：字(字距)元(字距)...
### 標籤
有些標籤 (如：img) 不會有成對的標籤, 此種稱為閉鎖(自閉)標籤, 有些人會在下尖括號前加斜線像 “ />”, 也可以不加
### 路徑
若有插入圖片, 音訊…… 等檔案, 若需要從其他地方加入資源則有兩種路徑, 路徑上不建議名稱裡有中文字元、空白或花式符號
#### 絕對路徑
是指別人已經放在雲端伺服器裡的圖片，路徑為固定的不可更改
#### 相對路徑
若資料放在自身伺服器, 以何種方式找到檔案？
- 用 ./ 表示前往當前的下一個路徑
- 用 ../ 表示離開當前回到上一個路徑
### RWD
響應式網頁設計 (Responsive Web Design) 讓使用者不管用什麼尺寸解析度的載具觀看網站都能舒服，目的為提高使用者體驗
### 除錯 (看過即可)
可在網頁中點選右鍵 → 檢查, 會直接跳至該行
有錯誤可先檢查
- 檔案是否存在
- 檔名
- 路徑
### 圖片
有一檔案格式為 webp 檔案小, 畫質還行, 但有編碼漏洞 (此問題更新瀏覽器即可解決)
#### img
沒有結束標籤, 為獨立標籤, 有兩個主要屬性, 其一為來源, 其二是替代文字 (alt) 其用途為在連不到圖片時至少可以判讀文字，此與 SEO 有關
#### picture
可因應 RWD 而設置多個圖片, 因使用者裝置決定載入何種圖片, 標籤內什麼標籤為預設值？？其他圖片用什麼標籤？？什麼屬性來判斷使用者裝置？？怎麼設定值？？
#### Figure
為獨立內容, 不限於圖片, 插圖, 圖表, 程式碼等, 包含什麼標籤作為說明元素(通常為文字)
### 媒體
#### media (影片) / audio (音訊)
此標籤內可放多個 source 標籤,但使用時會如何運作？ 若有不能使用資源則會如何進行？
要讓影片自動播放需滿足哪些條件 (必須包含此些屬性)？autoplay
若為手機版, 需多增加什麼屬性？playsinline
影片格式可選擇 google 力推的 .webm
### 特殊區塊
#### div 與 span
div 此為「區塊」的概念，無語意(block)
span 此為「區段」的概念，無語意(inline)
#### nav
導航頁面用的, 但非所有的超連結都要放在此元素底下, 一個頁面可以有幾個 nav？
通常 nav 裡會包清單, 但沒有限定一定要以清單的形式撰寫, 若巢狀清單則必須以清單撰寫
#### article 與 section
article 為獨立文章, 如果裡面套 article 代表語意上有什麼意思？？
section 為獨立章節, 可包含 article
多個 section 內包 article, 與多個 article 獨立相比, 其語意在獨立的程度上更強
#### main
此為網頁的主要內容區 (在每個網頁頁面通常會有幾組？)
#### aside
該標籤可放入哪些項目？
#### hearder
通常固定於網頁最上方, 可放 nav 導覽或者 logo(home)或者會員註冊登入
#### footer
通常固定於網頁最底部，可放為版權、作者等資訊
### CSS
#### 選取器
如果選取器的屬性在一起, 如右 AB ,代表兩個屬性要如何才會選取到？
若是中間有空白, 如右 A B,代表要如何才能選取到？
---
# 0313 - HTML
## 0311複習用
這天我中途失神睡著, 請各路大神有缺幫忙補上, luv all
### HTML
HTML 內如何賦予多屬性 (class)？
### form 表單
form 主要給使用者填寫, 便將資料送出至後端, 其中屬性 action 用途為？
#### label & input
label 主要為 input 元素提供其定義或是標題, 一個 label 對應對應幾個 input ？
點擊 label 標籤的文字會有什麼效果？
有兩種寫法：
```html
<div> <!-- 第一種 -->
<label>
姓名:
<input type="text" />
</label>
</div>
<div> <!-- 第二種 -->
<label for="">姓名:</label>
<input type="text"/>
</div>
```
兩者效果一樣, 但第二種的 input 標籤內缺了什麼？
#### select
select 裡面會包含什麼標籤？
但因為此為多選, 所以不會用 label 包起來
### input 屬性
#### type
有文字、密碼、搜尋…等, 共 10 多項, 各屬性有其差異, 並在行動裝置上的什麼會有所差異？ 在輸入時所應對的情形也有所差異, 如輸入密碼會隱蔽輸入字元等
什麼屬性會有裝置不支援？
#### 其他屬性
以下各自用途？
- minlength / maxlength
- placeholder
- readonly
- require
- checked
- multiple
- range 內使用：max min step
#### radio / checkbox
radio button 點選後的特色為？？多用於什麼狀況？？(單選或多選？) 如果要再多選項中擇其一, 必須加入什麼標籤？
checkbox 多用於什麼狀況？？如果要限制最高選擇數則必須使用 JavaScript 等程式來限制
### 雜項 (看過就好)
可由檢查確認在其他平台的表現, 亦可用同一網路後, 用手機連線至網頁確認
對 UI 使用體驗而言, 點擊次數越少越好
### CSS
CSS 有三種寫法
1. inline-style
2. internal styling : 在 head 標籤內用什麼標籤寫？
3. 外部連結, 在 head 處加入什麼？
#### 優先權
什麼事情最重要, 課堂上一在重複？
選取器有優先權的差異, 優先度高的會蓋掉優先度低的, 若同優先度, 新跟舊會如何影響？
其優先順序由大到小如何排序：
- inline style
- !important
- tag
- animation
- id
* ＊
- class
* 繼承
若值都有 !important 會如何運作？？
＊ 為通用選取器, 作用是？
何種狀況下會有標籤樣式繼承？
#### 優先權的分數計算
上述排序內哪幾個選取方式沒有分數？？ ~, =, > 這些也都不計分
需要幾個低優先權的屬性才能蓋過高優先權的屬性？
偽類與屬性選取器 的分數, 同上方順序的何者？
---
# 0314 - 自習練習
[終端機及常用指令介紹](https://gitbook.tw/chapters/command-line/command-line)
```
明天要問的問題
1.DOM TREE運作
2.NODE vs Element不同
```
### 簡單計數器
```javascript
document.addEventListener("DOMContentLoaded",() => {
const minus =document.querySelector("#minus")
const counter=document.querySelector("#counter")
const plus=document.querySelector("#plus")
let result=parseInt(counter.value)
const minusNumber=()=>{
if(result>0){
result--
}
counter.value=result
}
const plusNumber=()=>{
result++
counter.value=result
}
minus.addEventListener("click",minusNumber)
plus.addEventListener("click",plusNumber)
})
```
### 健康計算器
```javascript
document.addEventListener("DOMContentLoaded",() => {
const height=document.querySelector("#bodyHeight")
const weight=document.querySelector("#bodyWeight")
const countbtn=document.querySelector("#countbtn")
const result=document.querySelector("#resultText")
const countBmi=()=>{
let h=parseInt(height.value)
let w=parseInt(weight.value)
let bmi= (w / ((h / 100) ** 2)).toFixed(2)
result.textContent=bmi
}
countbtn.addEventListener("click",countBmi)
})
```
---
# 0315 - JS
## 我先來補個解構
## 解構 可以把東西簡化，也可以把東西一個一個拆開來看
```js=
const drink = {
flavor: "apple",
ml: 300,
}
// const flavor = drink.flavor
// const ml = drink.ml
// 使用大括號的方式等於 drink 這個物件，其效果跟上面的程式碼一樣，也就是大括號裡的屬性名稱跟後面的物件裡的屬性一樣的話，我們就可以用這個方式去把物件裡的東西解出來，這個行為就叫做解構
// const { flavor, ml } = drink
// console.log(flavor)
// console.log(ml)
// 假設解構出來的名稱不是我們想要的或是己經有人宣告了這個名稱為變數，我們可以這麼做
// const flavor = orange
// const { flavor: asiaFlavor, ml } = drink
// console.log(asiaFlavor)
// console.log(ml)
// 再看一個情形，用解構去拿物件沒有的屬性，會得到 undefined
const { flavor, ml, city } = drink
const city1 = drink.city // 宣告了一個常數指向物件不存在的東西等於 undefined
const city2 = undefined // 這樣更直觀
console.log(flavor)
console.log(ml)
console.log(city) // undefined
console.log(city1) // undefined
console.log(city2) //undefined
// 解構也可以用在 function ，為什麼可以用，因為 function 是物件。
function printEat(eat) {
const food = eat.food
const hour = eat.hour
console.log(food)
console.log(hour)
}
// 改為第二個方式
function printEat1(eat) {
const { food, hour } = eat
console.log(food)
console.log(hour)
}
// 再改成更誇張的方式，這功能很棒常用到，寫 React.js 時會傳很多屬性進到物件的元件裡，若每一個屬性都要一個個再宣告會很麻煩，所以在寫 React 的時候，把整顆屬性丟掉元件之後，直接在參數宣告屬性，就不用在宣告常數跟變數，超方便的。
function printEat2({ food, hour }) {
console.log(food)
console.log(hour)
}
// 意外篇-1 printEat3 參數裡放了 eat 物件沒有的屬性，其結果是 undefined
function printEat3(eat) {
const food = eat.food
const hour = eat.hour
const money = eat.money // 宣告了 eat 物件沒有的屬性
console.log(food)
console.log(hour)
console.log(money) // undefined
}
// 意外篇-2 printEat3 參數裡放了 eat 物件沒有的屬性，其結果是 undefined
function printEat4({ food, hour, money}) {
console.log(food)
console.log(hour)
console.log(money) // undefined
}
const eat = {
food: "義大利麵",
hour: 2,
}
printEat(eat)
printEat1(eat)
printEat2(eat)
printEat3(eat)
printEat4(eat)
// ... 的功能有兩個 1.是可以把陣列展開來。2.剩下的我全收了
const nums1 = [1, 2, 3]
const nums2 = [4, 5, 6]
const newNums1 = nums1.concat(nums2)
const newNums2 = [...nums1, ...nums2]
console.log(newNums1)
console.log(newNums2)
// 陣列解構，需要解構的東西是陣列，我們可以用 [] 來解構
const kofGirls1 = ["布魯，瑪莉", "不知火舞", "蕾歐娜"]
const [girl1, girl2] = kofGirls1
console.log(girl1)
console.log(girl2)
// 或者我們可以用 ...的方式把其餘的元素收成一個陣列
const [girl3, ...girl4] = kofGirls1
console.log(girl3)
console.log(girl4)
// 解構陣列意外-1 如果解構的出來的元素是原生陣列所沒有的，那它的值就是 undefined
const [girl5, girl6, girl7, girl8] = kofGirls1
console.log(girl5)
console.log(girl6)
console.log(girl7)
console.log(girl8)
// 解構陣列意外-1 如果解構的出來的元素是原生陣列所沒有的，但又是用...去收集元素則會得到一個空陣列。
const [girl9, girl10, girl11, ...girl12] = kofGirls1
console.log(girl9)
console.log(girl10)
console.log(girl11)
console.log(girl12)
// 使用函數操作，當參數跟引數對不上的時候，就會被抛掉
// 範例一
function figthing(girl1, girl2) {
console.log(girl1)
console.log(girl2)
}
figthing("布魯，瑪莉", "不知火舞", "蕾歐娜")
// 範例二
function figthing1(girl1, girl2) {
console.log(girl1)
console.log(girl2) // 這裡會是 undefined
}
figthing1("布魯，瑪莉")
// 範例3
function figthing3(girl1, ...girl2) {
console.log(girl1)
console.log(girl2) // 這裡會把不是 girl1 的元素集合成一個陣列
}
figthing3("布魯，瑪莉", "不知火舞", "蕾歐娜")
```
---
## 0315複習用
### node / element
#### ＪＳ如何操作ＨＴＭＬ
正常來說ＪＳ是沒有辦法去處理 HTML 的資料, 而是藉由？？來操作
#### HTML 載入 JavaScript
實際上 <script></script>放哪都沒差, 但因瀏覽器的什麼原因會造成 JS 檔案錯誤？但
預防上述情況的解決方案？
1. 放在??
3. 在 JavaScript 內??
4. 在 <script></script> 標籤內加 ??
- async (非同步) 加入此屬性則會？
[可見](https://pjchender.dev/javascript/js-async-defer/)
#### 操作 DOM 來控制網頁
querySelector 只會抓取到幾個元素？？ (若要抓取全部則？？), 其選擇器的寫法同？？
藉由 document.querySelectorAll 會回傳？？而 document.getElementById 的方式則會回傳？？
prototype NodeList / HTMLCollection 並非陣列而是一種集合, 但有提供一些方式可供操作, 相較之下 nodeList 比較多方法, 且使用選取器較精準方便
如果確認所抓的物件為 iterator (迭代器), 要如何處理？
Iteration 迭代 意思為？
### 預設行為
最常見的有 bottun 跟超連結, 分別為什麼行為？如何阻止？
### SET 集合
集合不同於陣列, 是另一種型態, 其特色是？？
### 型態
**Null 的 類型是 object (JS 的 老 BUG**
Typeof 沒定義的東西 會出現 undefined
typeof(typeof) 會?? typeof a 跟 type of (a) 是否有差？為什麼？
### ES6 語法
解構與 ... 請參閱 志誠哥 上述
### 抓取網路資料
#### ajax
非同步 JavaScript 與 XML 是 Web 應用程式開發技術的組合，可讓 Web 應用程式更快速地回應使用者互動。
- Asynchronous：非同步
- JavaScript：使用的程式語言
- XML：Client 與 Server 交換資料用的資料與方法，近年由於 JSON 等格式的流行，使用 Ajax 處理的資料並不限於 XML。
### Fetch
#### API
Application Programming Interface 的縮寫，API中文是「應用程式介面」
#### JSON
JavaScript Object Notation, JS 物件表示法, 依 JS 物件所設計的, 所以一定像 JS 的物件, 特色為可供 JS 操作使用
#### 實行
Fetch(API 網址), 此時會有一個回傳值為 promise, 此回傳值類似 token, 確保會有資料回傳(資料會依網速狀況傳輸), 使用 then 來指定若資料接收到後在執行何種事情, 也有資料不符預期或是未有資料回傳的情況, 這時有其他處理方式, 目前暫跳過
正常來說第一次的 promise 會回傳檔案傳輸的文件格式, 需再藉由其他方式轉換該格式為能夠操作的格式, 如轉成 .json 檔, 但轉譯時間不定, 所以會獲得另一個 promise
```javascript
練習（抓回名字）
const userList="https://jsonplaceholder.typicode.com/users"
fetch(userList)
.then((response) => response.json()) //簡寫
.then((data) => {
data.forEach(({name}) => { //做解構
console.log(name);
})
})
```
---
# 0318 - JS
```
課堂內容重點
RESTFul API
setTimeout vs setInterval
Event Loop
proto vs prototype
```
### Event Loop
```
總觀念 Event Loop
-call stack
-callback queue
-web api
```
---
# 0319 - HTML
### inline vs block
| | inline | block |
|:-------------- | -------- | -------- |
| width/height | X | O |
| 預設寬度 | 內容撐開 | 填滿父層 |
| Margin左右 | O | O |
| Margin上下 | X | O |
| padding左右 | O | O |
| padding上下 | X | O |
| 預設排列方向 | 橫向 | 直向 |
| transform | X | O |
| 空白字元問題 | O | X |
| text-align | O | X |
| vertical-align | O | X |
#### 加上vertical align
| type | justify-content | align-content | align-items |
| ------------ | --------------- | ------------- | ----------- |
| 控制對象是誰 | 子物件 | 彈性列 | 子物件 |
| 空間是誰 | 父層 | 父層 | 彈性列 |
| 軸是誰 | 主軸 | 交叉軸 | 交叉軸 |
| 作用是什麼 | 對齊、分佈 | 對齊、分佈 | 位置 |
---
# 0320 - HTML
---
# 0321 - 自習
---
# 0322 - JS
---
# 0325 - JS
0325 JavaScript Note
## Regular Expression (REGEX) 常規表示法
[REGEX符號運用](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_expressions)
> "." => 任何字
> "+" => 1個以上
> "?" => 0個 || 1個
> 可以用反斜線區隔同樣符號不同功能
eq:
判斷是否為email //xx@gmil.com
REGEX:
.+@.+\..+
翻譯成中文 =>（很多個任何字＠很多個任何字.很多個任何字）
```JavaScript=
function isValidEmail(mail) {
const pattern = / .+@.+\..+ /
if (mail.match(pattern)){
return true;
}
return false;
}
const m = "xxg@gmil.com.tw";
console.log(isValidEmail(m))
```
```JavaScript=
function isValidEmail(mail) {
const pattern = /.+@.+\..+/
//記得用/ /把正規表示法包起來，不能留空！！
//return Boolean(mail.match(pattern))
return !!mail.match(pattern) //可以用‘兩個驚嘆號’代替Boolean()，來轉換回傳的值(要回傳布林值)
}
const m = "xxg@gmil.com.tw";
console.log(isValidEmail(m))
```
## this
> 通用
> 跟寫在哪無關，只跟怎麼被呼叫有關
#### this規則
1. 誰呼叫誰就是this , 無人呼叫this＝global 全域物件(window)
呼叫的前面有人：
```JavaScript=
const hero = {
name:"kk"
attack: function(){
console.log(this);
},
};
hero.attack() //前面有hero，所以this=hero
```
呼叫的前面沒人：
```JavaScript=
function cc(){
console.log(this)
}
cc() //印出windows，因為cc()前面沒人
```
兩層function時
```JavaScript=
function cc() {
function aa() {
console.log(this) //印出window
}
aa();
}
cc();
```
2. 確認是否有使用箭頭函數（箭頭函數沒有自己的this，所以會印出window）
箭頭函數沒有argument：
```JavaScript=
const hi = () => {
console.log(argument) //argument是ES6前用來印出不固定數的引數的方法，現在都用...(展開陣列)
}
hi(1, 2, 3, 4, 5) //output壞掉，因為箭頭函數沒有自己的argument
```
箭頭函數沒有this：
```JavaScript=
const hi = () => {
console.log(this)
}
hi(1, 2, 3, 4, 5) //箭頭函數沒有自己的this
```
比較一般函數 及 箭頭函數 使用this時：
```JavaScript=
const hero = {
name: "kk",
a: () => {
console.log(this);
},
b: function() {
console.log(this);
},
};
hero.a() // 印出window
hero.b() // 印出hero
```
3. 是否有使用new(有new走物件導向的流程) //{ }
舉例：
```JavaScript=
function a() {
console.log(this);
}
new a() //a{}
```
4. 是否有用call || apply (兩者用法皆是把this轉向)，bind(先把h帶入成this，產出新function)
call || apply舉例：
```JavaScript=
function a(){
console.log(this.name); //要印出kk
}
const h = { name: "kk" };
a.call(h);
a.apply(h) //兩種方式都能把h帶入function當作this(注意!!不是把h當參數，而是把h當作this!!)
```
如果，也想把引數帶進參數的話：
```JavaScript=
function a(x, y){
consolr.log(this.name)
}
const h = { name: "kk" }
const data = [1, 2] //apply用法
a.call(h, 1, 2) //引數一個一個帶進去
ca.apply(h, data) //引數一整包data帶進去
```
call || apply 使用情況：
```JavaScript=
const hero = {
hp: 100,
mp: 30,
attack: function() {
console.log("ATTACK!!");
}
};
const mage = {
hp: 60,
mp: 100,
attack: function() {
console.log("attack~~~");
},
heal: function() {
this.hp+ = 30
}
}
mage.heal() //這裡的法師只能幫自己補血
console.log(hero.hp); //印出100
mage.heal.apply(hero); //用apply把hero帶入成this，讓法師也能幫英雄補血
console.log(hero.hp) //印出130，因為已經補完血了
```
bind(一定要呼叫，才會有結果)舉例；
```JAvaScript=
function a() {
consolr.log(this);
}
const h = { name: "kk" }
const f = a.bind(h); //把h帶入成this，然後 產出一個新的function
f(); //啟動由bind產出的新function，如果想帶引數進去，從這邊帶
conaole.log(f) //
```
bind 使用時機：
```Javascript=
function ass(a, b) {
return a + b
}
//partial function(局部函數)
const add5 = add.bind(null, 5); //這邊的null是帶入成this，所以跟函數內要回傳的算式沒關係。這邊b都還沒有被帶入任何引數。
console.log(add5(10)); //15，這邊把10帶入給b
console.log(add5(3)); //8，這邊把3帶入給b
console.log(add5(8)); //13，這邊把8帶入給b
console.log(add5(100)); //105，這邊把100帶入給b
```
5. 是否有開啟strict mode(嚴格模式)
```JavaScript=
"use strict"
function a() {
console.log(this)
}
```
> 總結this的五點規則：
> 1. 是否有開起strict mode
> 2. 是否有使用new
> 3. 是否有使用箭頭函數
> 4. 是否有用call , apply , bind
> 5. 誰呼叫，誰就是this ; 無人呼叫 this = global全域物件
## 閉包 clousure
```JavaScript=
allBtn.forEach((btn) => {
btn.addEventListener("click", function() {
var that = this //閉包，把this變成that帶走做事
const handler = function() {
console.log(that)
};
})
})
```
bind：
```JavaScript=
allBtn.forEach((btn) => {
btn.addEventListener("click", function() {
const handler = function() {
console.log(this);
};
const nowHandler = handler.bind(this); //bind會先把this收著，
newHandler(); //這邊是在呼叫bind生成的新function，
setTimeout(newHandler, 1000); //在1秒後執行。
})
})
```
閉包舉例：
```JavaScript=
for(var i = 0; i < 3; i++){
setTimeout(()=> console.log(i))
}
// 印出 3 3 3
for(let i = 0; i < 3; i++){
setTimeout(()=> console.log(i))
}
// 印出 0 1 2
```
### IIFE (Immediately Invoke Function)：定義完馬上執行的function
> 在IIFE裡的東西不會流到外面去 => function scope
> jQuery就是一個IIFE
```JavaScript
for(var i = 0; i < 3; i++) {
setTimeout(((y) => {
console.log(y);
})(i), 0);
}
```
---
# 0326 - HTML
0326 CSS Note
## 屬性
### 文字折行
```html=
<style>
.box {
width: 200px
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>
<!-- -webkit-：前贅字 (參考金魚書p18) -->
```
### 錨點連結
```html=
<style>
/* 注意選取器 */
html,body{
scroll-behavior: smooth; /* 讓滾動時很絲滑的屬性，可搭配 */
}
</style>
<body>
<!-- section.section${$}*5 --> 快速新增寫法
<nav>
<a href="#sc1">S1</a> <!-- 點這顆超連結會跳到id為sc1的section頁面 -->
<a href="#sc2">S2</a>
<a href="#sc3">S3</a>
<a href="#sc4">S4</a>
<a href="#sc5">S5</a>
</nav>
<section class="section1" id="sc1">1</section>
<section class="section1" id="sc1">2</section>
<section class="section1" id="sc1">3</section>
<section class="section1" id="sc1">4</section>
<section class="section1" id="sc1">5</section>
</body>
```
### 定位（有定位會比沒有定位的層級高，會覆蓋到其他層）
**static**：取消定位時會使用，會覆寫下面的定位設定(使用時機很少)
**fixed(固定定位)**
> 1. 定位參考範圍：視口 viewport(可以看到頁面的範圍)
> 2. 會停在原地，即便捲動頁面，它依然在那邊(與視窗上緣的距離不變)
> 3. 情況：製作導覽列時，蓋到第一排的內容解法 => 從父層去更改高度：margin || padding
**absolote(絕對定位)**
> 1. 定在具有定位設定的父層padding box(邊框線內緣)，如父層都沒有定位及會找第一個視口的範圍
> 2. 父層可以是任何定位除了static
> 3. 獨立一層
**relative(相對定位)**
> 1. 定位參考範圍：自己原本的空間
> 2. 不會從原本的位置離開
**sticky**
#### z-index 控制層級，給值的那個比較大(會在上層)
> 1. 能夠不要用負值就不要用 (參考金魚書p388)
> 2. 用層去看
情況：
```HTML=
<div class="A fixed z3"></div>
<div class="B relative z4">
<div=class="B-1 relative z1“></div>
</div>
<!-- Ｂ-1在z4的第一層，所以還是比A上層 -->
```
---
# 0328 - Vue.js 簡介
```
* vue觀察被ref包裝的變數
只要被更新 畫面亦會自動更新（不等於渲染）
* ref是個function
* v-model
取值 又會寫回他對應的畫面
* template不用再加value
* v-bind:class
= :class
* v-on:click
= @click
* 重複元素是誰v-for就放誰身上
```
Sign in with Wallet
Connect another wallet