# JS 個人筆記
:::warning
多行註釋 Alt + Shift + A
自動排版 Alt + Shift + F
刪除一行 Ctrl + Shift + K
:::
[TOC]
# JS 書寫方法
## **<font color="#D92D71">行內式</font>**
## **<font color="#D92D71">內嵌式</font>**
## **<font color="#D92D71">外部式</font>**
## 註釋
## 輸出語句
# 變數
## 變數 特點
* **<font color="#D92D71">更新變數</font>**
* **<font color="#D92D71">同時聲明多個變數</font>**
* **<font color="#D92D71">不宣告, 不賦值, 會報錯</font>**
* **<font color="#D92D71">不宣告, 直接賦值使用, 是OK的</font>**
## 案例：變數的使用
## 變數命名規則
## 案例：交換變數
## 變數類型
* **<font color="#D92D71">JS是弱類型、動態語言</font>**
* **<font color="#D92D71">相同變數可以做不同的類型</font>**
* **<font color="#D92D71">變數類型 分兩類：</font>**
* **<font color="#D92D71">數字型支持八進制(前面加),十六進制(前面加0x)</font>**
* **<font color="#D92D71">JS中的最大值,最小值, 超過就會變成無窮大(Infinity), 無窮小(-Infinity)</font>**
* **<font color="#D92D71">NaN (Not a number)代表一個非數值</font>**
## 字符串 String
* **<font color="#D92D71">HTML屬性使用雙引號, 因此JS推薦使用單引號</font>**
* **<font color="#D92D71">引號嵌套範例</font>**
* **<font color="#D92D71">轉譯符</font>**
* **<font color="#D92D71">字符串拼接,結果會回傳字符串</font>**
## 不同變數類型一起運算
* **<font color="#D92D71">布爾型 + 數字型</font>**
>true當作1運算, false當作0運算
* **<font color="#D92D71">undefined + 字串型</font>**
> 'undefined' + '字串內容'
* **<font color="#D92D71">undefined + 數字型</font>**
> NaN
* **<font color="#D92D71">null + 字串型</font>**
> 'null' + '字串內容'
* **<font color="#D92D71">null + 數字型</font>**
> 返回原先數字
* **<font color="#D92D71">null + 布爾型</font>**
> 0 或是 1
## typeof() 獲取數據類型
## 強轉數據類型
### **<font color="#D92D71">轉換成字符類型</font>**
### **<font color="#D92D71">轉換成數字類型</font>**
>
>**<font color="#D92D71">parseInt() 得到的是整數</font>**
>
>
>**<font color="#D92D71">parseFloat() 得到的是整數</font>**
>
>:::info
>:bulb:注意別寫錯parseInt()與parseFloat()的大小寫
>:::
>
>**<font color="#D92D71">Number()</font>**
>
>
>**<font color="#D92D71">利用算式運算 </font>**
>
### **<font color="#D92D71">轉換成布爾類型</font>**
## 標誌符, 關鍵字, 保留字
### **<font color="#D92D71">標誌符</font>**
>
### **<font color="#D92D71">關鍵字</font>**
>
### **<font color="#D92D71">保留字</font>**
# 運算符
## **<font color="#D92D71">算數運算符</font>**
## **<font color="#D92D71">遞增遞減運算符</font>**
>(略)
## **<font color="#D92D71">比較運算符</font>**
>:::info
>:bulb:'=='默認轉換數據類型, 會把字符型轉換成數字型
>:::
## **<font color="#D92D71">邏輯運算符</font>**
>**<font color="#6eb22d">短路運算(邏輯中斷)</font>**
**當有多個表達式或值,左邊的表達式可以確定結果時,就不再運算右邊表達式的值。**
>
## **<font color="#D92D71">賦值運算符</font>**
>
## **<font color="#D92D71">運算符優先級</font>**
## **<font color="#D92D71">instanceof運算符</font>**
==用來檢測數據類型==
>**格式：變數/物件/陣列 名稱 instanceof 數據類型
返回值為true , false**
# 流程控制
**<font color="#497c18">流程控制有三種順序結構, 分支結構, 循環結構, 代表三種代碼執行的順序</font>**
* **<font color="#D92D71">三元表達式</font>**
>**包含三元運算符**
* **<font color="#D92D71">分支流程控制 - if</font>**
>
* **<font color="#D92D71">分支流程控制 - switch</font>**
**表達式與值是 "===" 的關係, 意即值與數據類型要一致才可以。**
# 循環
* **for 循環**
(略)
* **雙重for 循環**
(略)
* **while 循環**
(略)
* **do while 循環**
(略)
* **continue break**
# 陣列(數組)
* **<font color="#D92D71">JS創建陣列的方式：利用new創建陣列</font>**
>:::info
>:memo: 第二種創建方式()裡的是陣列長度; 第三種創建方式()裡的是值、元素。
>:bulb:1. 陣列是物件的一種。
>:bulb:2. Arrar(), A要大寫。
>:bulb:3. Java陣列是用{ }, JS是用[ ]
>:::
* **<font color="#D92D71">JS創建陣列的方式：利用數組字面量創建陣列</font>**
>:::info
>:bulb:1. JS陣列可以放任意類型的數據
>:::
* **<font color="#D92D71">JS的陣列, 只要通過陣列下標賦值, 最大的下標值, 會自動給陣列做擴容操作。</font>**
**<font color="#D92D71">如下列案例：下標[2]並賦值為"abc",數組長度即為3,
但[1]並沒有被賦值, 因此訪問後, 出現undefined的結果。</font>**
## 陣列的長度
## 陣列的遍歷
## 陣列的排序
**※需特別注意sort()的缺陷**
https://www.fooish.com/javascript/array/sort.html
# 二維陣列
```javascript=
格式： var arr = [ [1,2], [1,2,3] , [1,2,3,4];
```
# 函數(函式[台])
>:::info
>:bulb:函式宣告又稱"==具名函式==", 是以 function statement 的方式被建立，有hoist現象； <br>函數表達式又稱 "==匿名函式==", 要等待解釋器執行到函式的該行敘述時才會執行，這表示在解讀到他之前，我們都無法去呼叫他。
>:::
>:::warning
>+ 函式本身是一個物件
>+ 可以重覆被定義
>+ 不支援overloading (會有覆蓋問題)
>+ 要避免跟瀏覽器的全域方法取同個名字，會覆寫掉
>+ 可以用arguments來取得呼叫此函式時的所有實際引數資料
>+ 可以設定參數預設值
>:::
## 函數可以調用另一個函數
* **<font color="#D92D71">callback function 回調函式</font>**
(略)
## 函數實參與行參個數不匹配的結果
## 函數的重載與輸出結果
## Return
* **<font color="#D92D71">return 只能返回一個值, 如果有多個值, 會傳回最後一個</font>**
* **<font color="#D92D71">return 可以返回陣列與物件</font>**
* **<font color="#D92D71">如果有return, 則返回return後面的值, 如果沒有return, 則返回 undefined</font>**
* **<font color="#D92D71">如果有return, 則返回return後面的值, 如果沒有return, 則返回 undefined</font>**
* **<font color="#D92D71">return, break, continue的區別：</font>**
## arguements
* **<font color="#D92D71">範例：利用函數求陣列最大值(具名函數)</font>**
* **<font color="#D92D71">範例：利用函數求陣列最大值(匿名函數)</font>**
## 給參數預設值 (ES6)
## 立即函式(執行函式)
指的是可以立即執行的 Functions Expressions 函式表示式, 立即函式常用來限制作用域, 如果透過立即函式, 就連同函式宣告都能限制作用域。
```javascript=
（function(){
console.log(‘立即函式’);
}
）( );
(function IIFE2() {
console.log(‘立即函式2’);
}());
// 執行的小括號也可以直接寫在大括號後面
```
:::info
但即便他有名字，立即函式也不能在函式外被呼叫。
:::
立即函式也可以傳參數可以回傳值, 並以變數接收回傳值。下面的範例是將一個立即函式的執行結果傳遞給另一個立即函式：
```javascript=
var obj = {};
(function (a) {
a.person = ‘小明’;
})(obj);
(function (b) {
console.log(b.person);
})(obj);
```
將上面的範例修改一下, 將傳進第一個立即函式的參數改為全域物件window。第二個立即函式印出全域物件的屬性person：
```javascript=
(function(global) {
global.person = ‘小明’;
})(window);
(function(c) {
console.log(person);
})();
```
----
## 箭頭函數（Arrow Functions）ES6
```javascript=
let myFunction = () => {
document.write("換個方式哈囉~<br>");
};
myFunction();
let myU = (name) => {
document.write("哈囉~" + name + "<br>");
};
myU("Fan");
```
>:::info
>:bulb:延伸閱讀:https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/arrow_function.html
----
* **<font color="#D92D71">範例：箭頭函數與回調函數</font>**
==回調函數 callback function==(待學習 待更新)
```javascript=
function A_function(x) {
document.write("這是A<br>");
x();
//x參數等於B_function;
//因此 x(); 就是等於 B_function();
};
function B_function() {
document.write("這是B<br>");
};
A_function(B_function);
```
:::info
用來確保方法的使用時機, A方法必 會比B方法先執行。
:::
==箭頭函數 Arrow Functions (ES6)==(待學習 待更新)
```javascript=
let A_function = (x) => {
document.write("這是A<br>");
x();
//x=B_function;
//x();=B_function();
};
let B_function = () => {
document.write("這是B<br>");
};
A_function(B_function);
```
:::info
ES6 的箭頭函式 (Arrow Function) 沒有提供 arguments
:::
# 作用域
* **<font color="#D92D71">JS 採用詞法作用域(靜態作用域)：
執行環境下去查找變數, 如果在裡面找不到的話, 就會去找外面一層, 若是再找不到就會繼續往上一層找, 以此類推。</font>**
* **<font color="#D92D71">JS的作用域又分作三層：
Global Level Scope 全局作用域
Function Level Scope (Local Scope) 局部作用域
Block Level Scope (ES6) ,只存在{}裡面 </font>**
>:::info
>在 ES6 之前，我們宣告變數只能使用 var 來宣告，而使用 var 宣告變數會有不少缺點，也無法形成 Block Scope 。
>以至於 ES6 推出了另外兩個宣告變數的方式：const 和 let。
>:::
## 變量的作用域
* **<font color="#D92D71">全域變數(全局變量)</font>**
+ 宣告在函式外的變數皆為全域變數。
+ 函式外未宣告直接使用之變數也為全域變數。
+ 全域變數指的是全域物件的屬性。
:::info
所有在函式外的變數皆為全域變數都是window的變數，<br>使用變數時可加上" window. "來呼叫變數( 省略也沒影響)。
:::
* **<font color="#D92D71">區域變數(局部變量)</font>**
+ 區域變數是在進入函式時被建立出來的，只能在函式中使用，函式結束時會將此變數空間收回。
+ 在函式內的都是區域變數。
+ 函式中的參數也是區域變數。
+ ==函式中使用變數時，會先以函式內開始找，找不到才會出去找==。
## var, let, const
>:::info
>:bulb:**1. 如果沒有區塊級作用域, 在{}宣告的變數, 在外面仍然可以使用**
>:bulb:**2. Hoist現象, 為變數預解析**
>:::
# 預解析
* **<font color="#D92D71">變數, 函數預解析 </font>**
>
# 物件(對象)
**<font color="#D92D71">JS物件分三種：
自定義物件, 內建物件(內置對象), 瀏覽器物件。
以下為自定義對象。</font>**
## 創建物件
* **<font color="#D92D71">創建物件三種方法 </font>**
* **<font color="#D92D71">利用字面量創建物件 </font>**
* **<font color="#D92D71">利用new Object創建物件 </font>**
* **<font color="#D92D71">利用構造函數創建物件 </font>**
>:::info
>:bulb:構造函數方便創建多個物件。
>:bulb:構造函數類似於Java中的類。
>:bulb:new值執行時, 創建一個空物件。
>:bulb:this.用函數參數賦予屬性。
>:bulb:構造函數不需要添加return, 直接調用其產生的物件, 即可有返回值。
>:::
## 物件的調用
>:::info
>:bulb:**物件裡的資料為屬性與方法, 而非變數與函數。**
> 
>:::
## 物件的遍歷
* **<font color="#D92D71">for (變數名稱 in 物件名稱) {<br>}</font>**
>:::info
>:bulb:通常使用k 或 key 作為遍歷變數名稱。
>:::
# js的內建函式(內置對象)
https://developer.mozilla.org/zh-CN/
https://www.w3schools.com/
* **<font color="#D92D71">Math (待更新) </font>**
* **<font color="#D92D71">Date (待更新) </font>**
* **<font color="#D92D71">Array (待更新) </font>**
:::info
:bulb: **呼叫陣列方法：物件.方法();**
:::
| 方法 | 說明 |
| -------------------------- | -------------------------------------------------------------- |
| sort() | 排序(有缺陷,只能比較個位數整數),排序會把數字轉乘文字串再轉乘unicode去比較unicode的大小。 |
| toString() | 將陣列中的元素以逗點結合起來，傳回一個字串 |
| reverse() | 將陣列中的資料順序反轉（會改變陣列內容） |
| join(字元) | 將陣列中的元素以特定的符號結合起來，傳回一個字串 |
| concat(參數…) | 將陣列結合成一個新的陣列，並傳回陣列長度 |
| ==push(資料)== | 將新的元素加到陣列的後便，並回傳陣列長度 |
| pop() | 傳回陣列中的最後一個元素，並移除該元素 |
| slice(start, end) | 傳回索引值start處到end-1處的子陣列 ==(不會從原陣列中移除)== |
| ==splice(start,n,ele1,ele2…)== | 傳回索引值start處後的n個元素 ==(會被移除)== 並插入ele1, ele2… |
| shift() | 傳回陣列中第一個元素，並移除該元素 |
| unshift(資料) | 將新的元素加入陣列的最前面 |
| ==indexOf(data, start)== | 自索引start處找出data在array中的位置索引值 ==(如果找不到會傳-1)== |
* **<font color="#D92D71">String (待更新) </font>**
* **<font color="#D92D71">其他 (待更新) </font>**
| 方法 | 說明 |
| --------------- |:----------------------------------------------------------------------------------- |
| parseInt() | 將輸入的字串轉成整數 |
| isNaN() | 檢查參數是否非數字 ex:‘123’-> false 2021/12/12->true(false代表是數字，true代表不是) |
| eval() | 計算字串，js代碼 |
| Array.isArray() | 檢查是否為陣列, 該方法有優於instanceof, 因為 Array.isArray()能檢測iframes |
| ------ | ------ |
## 日期相關
# foreach / map
## foreach
```javascript=
const array1 = ['a', 'b', { c: 'tibame' }];
array1.forEach(function (element, index, arr) {
console.log(element, index, arr)}); //參數可以全寫,也可寫部分
const array2 = []; //新增空陣列
array1.forEach(function (element) {
array2.push(element)}); // 傳值給新陣列
```
## map
```javascript=
const array1 = [1, 4, 9, 16, { c: 'tibame' }];
const map1 = array1.map(function(x){
return x;});
//map()會分配記憶體空間儲存新陣列並具備回傳值
//所以不用像forEach()要搭配push來產生另一個陣列
console.log(map1);
console.log(map1 === array1);//新陣列, 所以false
map1[0] = 11111;
console.log(map1[0], array1[0]);//11111 1
console.log(map1[0] === array1[0]);//新陣列,互不影響 所以false
map1[4].c ="TIBAME";
console.log(map1[4], array1[4]);//{c: "TIBAME"} {c: "TIBAME"}
console.log(map1[4] === array1[4]);//物件一定是傳址,所以會被改動到 true
```
## foreach / map比較
map可以直接塞資料到新陣列, foreach不行
```javascript=
const array1 = [1, 4, 9, 16];
const map1 = array1.map(function (item) {
return item
});
const forEach1 = array1.forEach(function (item) {
return item
});
console.log(map1);//[1, 4, 9, 16]
console.log(forEach1);//undefined
```
# 數據類型
## 簡單類型 (值類型)
>:::info
>:bulb:null數據類型 返回的是一個空的物件。
>:::
## 複雜類型 (引用類型)
## 棧跟堆的概念
>:::info
>:bulb:一般程式語言有棧跟堆的概念,但是 **<font color="#D92D71">JS沒有</font>**, 只是用來方便理解：
>:::
# BOM (Browser Object Model，瀏覽器物件模型)
| 屬性名 | 作用 |
| ----------- | ---------------------------- |
| name | 指定視窗的名稱 |
| document | 文件物件 |
| history | 歷史物件(回上一頁) |
| loaction | 位置物件 |
| screen | 螢幕物件 |
| console | 主控台物件 |
| innerHeight | 視窗內的高度（含捲軸） |
| innerWidth | 視窗內的寬度（含捲軸） |
| outerHeight | 視窗的高度（含捲軸、工具列） |
|outerWidth | 視窗的寬度（含捲軸、工具列） |
|pageXOffset | 文件左上角被捲出的寬度 |
|pageYOffset | 文件左上角被捲出的高度 |
# DOM (Document Object Model，文件物件模型/頁面文檔模型)
* **<font color="#D92D71">用來處理可擴展標記語言(HTML或XML)的標準編接口<br>通過DOM接口, 改變網頁的內容, 結構, 樣式。</font>**
* **<font color="#D92D71">DOM樹</font>**
## 獲取頁面元素
* **<font color="#D92D71">根據ID名獲取</font>**
```javascript=
var element = document.getElementById(id);
```
>
* **<font color="#D92D71">根據標籤名獲取</font>**
```javascript=
var list = document.getElementByTagName(標籤名);
```
* **<font color="#D92D71">根據類名獲取(HTML5)</font>**
* **<font color="#D92D71">獲取特殊元素</font>**
## 元素註冊事件 事件基礎
* **<font color="#D92D71">事件三要素：事件源、事件類型、事件處理程序</font>**
* **<font color="#D92D71">常見滑鼠事件</font>**
## 操作屬性
### 修改元素屬性
### 修改樣式屬性
### 表單元素的屬性操作
* **<font color="#D92D71">練習：密碼明文輸入欄</font>**
## 創建元素
## 操作節點
>:::info
>:bulb:
>:::
Sign in with Wallet
Connect another wallet