---
# System prepended metadata

title: JavaScript學習筆記
tags: [JavaScript]

---

---
tags: JavaScript
---
# JavaScript學習筆記

## 變數與資料型別

## let、const、var介紹

### var 

很早期都是用var來宣告變數
現在很多文章還是有很多介紹使用var
* var可以複寫，但很容易造成奇怪的問題、可以隨意更改內容的變數比較不嚴謹
* let 可以更改一個區域的變數
* const 不可以更改
* ES6是什麼
    * ES6 是 ECMAScript 2015 的簡稱，它是 JavaScript 的一個重要版本，引入了一些新的語言特性和功能，使得 JavaScript 更強大和現代化。
    * ES6 帶來了一些方便的功能，例如更好的模塊支援（import 和 export）、更簡潔的語法（箭頭函式、模板字串）、更容易使用的類和物件導向語法、更好的異步處理（Promise）等。
    * 簡單來說，ES6 讓開發人員能夠用更少的代碼來達到更多的功能，同時提供了更好的程式碼結構和可讀性。它已經成為 JavaScript 開發的主要標準之一，讓開發人員能夠以更現代化的方式建構 JavaScript 應用程式。
* 什麼是ECMA
ECMA 是一個國際標準化組織，負責制定和維護多種技術標準，其中包括 ECMAScript 規範，該規範定義了 JavaScript 語言的標準。

![](https://i.imgur.com/tEmeduL.png)


![](https://i.imgur.com/tX5Ve0k.png)


## 網頁與Code環境建立流程教學

## 數字型別與賦值運算子
* 賦值運算子`+=、-=`
* `a++、a--`

## 字串型別

1. 宣告字串流程

字串要用**單引號**包住，不然會出錯，
`let a = 'Hello' ; `
如下圖：
![](https://i.imgur.com/sckaty3.png)


單引號跟雙引號都可以~但單引號跟雙引號要一致

會有兩種原因在於有些字串內容會有'單引號
例如：今天寫let's go 裡面有單引號的可能性 就可能造成程式錯誤
建議用雙引號實做

2. 一次搞懂字串相加

let a ="Hello "+" 你好嗎？";
`console.log(a);`

空白要怎麼加? 可以在變數中加上空白的字串
let name = 'tom';
let content = '你好嗎?';
`let total = name+' '+content;`

3. 透過 typeof 瞭解當前變數型別

console.log(typeof a);
會印出 string


有些情況下雖然看的出來型別，但可能實際上並非我們認知的型別
例如：
let age = 18;
`console.log(typeof age);`
會印出 number

但以下範例就並非number
let ageString = "18";
`console.log(typeof ageString);`
會印出 String


所以透過此語法可以查當下變數是什麼型別

4. 數字與字串相加

數字與字串相加會 "自動轉型" 成字串

let myName = 'Tom'
let age = 18;
let total = myName+age;
`console.log("Hi ,我是"+myName+"我今年"+age+"歲")`
`console.log(typeof total);`
會印出 String


5. NaN產生時機

* NaN表示非數字
let myName = 'Tom'
let age = 18;
let total = myName * age;
`console.log(total);`
會印出 NaN =>異常無法累加
`console.log(typeof total);`
會印出 NaN Number =>數字型別 異常狀況還是回報 

* 使用 parseInt 可以把字串轉為數字型別=>要注意大小寫
let age2 = parseInt("30");
`console.log(typeof age2);`
會印出 number

* 若要強行把字串轉為數字型別，會回傳NaN

6. 字串處理實用方法

//字串的處理方式、方法
//JS本身有很多語法


* 字元數
變數.length

let a = "Mark";
a.length
=>4

* 前後去空白 =>頭尾濾掉

變數.trim();

很常使用在驗證使用者輸入帳密或email
使用者填寫帳號密碼，有時候誤觸到空白，程式比對時會比對不到

7. 變數記憶體指向講解

變數去前後空白之後，要指定賦予給變數，否則程式無法拿到修改後的結果，不會存到值
處理好結果，要宣告一個變數要賦予一個值，或是指定給本來就有的變數


8. 樣板字面值教學

let myName = "Tom"
let myAge = 18;
let content = "你好,我是"+myName+"我今年"+myAge+"歲";
以上寫法會有很多加號造成書寫不易，


#### es6提供新的語法:
![](https://i.imgur.com/gkObAhq.png)

* 字串前後用反單引號ˋ
* 字串連接變數，穿插用`${}` 呈現，不需要再用+
let content = `你好,我是${myName}我今年${myAge}歲`;


![](https://i.imgur.com/pNqj8cC.png)




## 變數：布林、undefined、null

1. 布林介紹

先前介紹了數值跟字串

布林值只有true跟false
因為電腦不知道什麼是對或錯
所以我們要告訴電腦邏輯結果
例如: 小明起床了嗎?

int isWakeUp = true;

`console.log(typeof isWakeUp);`
答案:boolean


console.log(2>1);
答案:true

`console.log(2>3);`
答案:false




2. undefined介紹
尚未賦予任何值，會回傳undefined

let a ;
`console.log(a);`
答案:undefined



3. null介紹

有被賦予值，是告知為空值，空資料
或想把值清空

let b = 1;
let c = null ;

`console.log(c);`

有些情況下會把資料清掉，它本來是有值的，所以用null把它清掉

後面會提到陣列與物件
如果大量資料放在記憶體,會很佔空間
只要清空為空值電腦就會釋放記憶體空間



4. 字串轉數字方法

let a = "1";
`console.log(a+1);`
答案:11

將字串轉型成數字
let a = parseInt("1");
或
let a = "1";
a=parseInt(a);
`console.log(a+1);`
答案:2


若轉型失敗會回傳NaN
let a = "中文";
a = parseInt(a);
答案:NaN


從表單文字取出的數字都是字串
所以要把字串轉為數字再做後面的運算

5. 數字轉字串方法

前面章節為字串轉數字

let b = 1;
`console.log(b+1);`
答案:2

此章節為數字轉字串

* 數字轉字串

let b =1;

b = b.toString();
`console.log(typeof b);`


* 會用到的情境
    * 大樂透號
    * 區碼加上後面的電話

* 字串加上數字=>還是字串

`console.log(b+1);`
11


## 比較與邏輯運算子

### 比較與邏輯運算子簡介
步驟1：任務拆解
步驟2：流程設計

### 比較運算子
> <  >= <= == !=
結果為boolean

`console.log(1>2)`
false

### 比較運算子搭配變數方法
let a = 2;
let b = 3;

`console.log(a == b)`
false

比較結果可賦予給變數
let c = a == b ; 
`console.log(c);`
false

let isWakeup = false;
`console.log(isWakeup);`
false

### 等號=、雙等號== 差異講解

1. 一個等於：賦予值的意思
2. 兩個等於：比較運算子的意思

### 雙等號==、三個等號=== 差異講解

let a = 1;
let b = 1;

//兩個等於，協助轉型
`console.log(a==b)`
結果為true

lat a = 1;
let b = "1"; //字串
`console.log(a==b);`
結果為true

//三個等於，會比較也會看型別，會比較嚴謹些
`console.log(a===b);`
結果為flase

### 邏輯運算子介紹
#### && 同時滿足條件、滿足其中一個條件

let a = 1;
let b = 2;
`console.log(a==1 && b ==2);`
結果為true

`console.log(a==2 && b==2);`
結果為false

這個常用於促銷條件
消費滿額並有購買指定商品時有促銷

#### || 只要其中一個條件滿足 or
let c = 3;
let d = 4;

`console.log(c==4||d==8);`
結果為true

`console.log(c==5||d==8);`
結果為false


#### 邏輯運算子增加多條件作法

||練習 or
小孩吃東西
只要冰箱有米飯或蘋果或牛買任一個，小朋友就願意進食

let haveRice = false;
let haveApple = false;
let haveMilk = false;

`console.log(haveRice == true || haveApple == false || haveMilk == true);`
結果為true

### 邏輯運算子範例情境

符合贈禮條件
必須同時符合以下兩個條件才贈禮
* 消費滿500(含蓋) >=500
* 是VIP 條件

let a = 600;
let isVip = true;
let buyCake = false;

`console.log(a>=500 && isVip ==true)`
結果為true

`console.log(a>=500 && isVip ==true && buyCake ==true);`
結果為false


## 流程判斷 - if、else if、else
### 為什麼要理解流程判斷
//小美在氣溫 15 度以下時依訂ˋ會穿上心愛的棉外套
//今天氣溫是 14 度，請試著用if來寫小美會如何行動
//console.log("小美穿上外套出門了");


let todayDegree = 14;
let isWearJacket = todayDegree < 15 ;
if (todayDegree < 15 ){
    console.log("小美穿上外套出門了");
}

if (isWearJacket ){
    console.log("小美穿上外套出門了");
}
 
### if、else、els if 講解

if (isWearJacket ){
    console.log("小美穿上外套出門了");
}else{
    `console.log("小美不穿上外套出門了");`
}
### if 詳細講解(一)

if、else 只能一組
else if 可以多組 

//小明不確定身上有多少錢
//小明想去外面用餐，想吃牛肉麵110元
//如果有80元就要去夜市吃牛排
//如果有35元就會去吃薯條
//於是他打開錢包前決定 錢不夠就回家吃飯


**let** wallet = 110 ; 
if(wallet >=110){
 console.log("小明去吃牛肉麵");
}else if(wallet>=80) {
 console.log("小明去吃牛排");
}else if(wallet >= 35){
 console.log("小明去吃薯條");
}else{
 console.log("小明錢不夠，回家吃飯");
}

### if 詳細講解(二)

* 每個判斷的程式碼寫完就測試，也算是一步一步的除錯．否則後續會不容易知道哪一段程式造成錯誤，

//下雨程度
//小華他的習慣是
1. 如果沒有下雨，就不會帶雨具
2. 如果下毛毛雨，他會帶輕便雨衣
3. 如果下普通的雨，他會帶折傘
4. 如果颱風天豪雨，他會帶長傘

let todayWeather = "沒有下雨";

if(todayWeather == "沒有下雨"){
    console.log("小華不會帶雨具");
    
}else if(todayWeather == "毛毛雨"){
    console.log("小華會輕便雨衣");
}else if(todayWeather == "普通的雨"){
    console.log("小華會帶折傘");
}else if(todayWeather == "颱風天豪雨){
    console.log("小華會帶長傘");
}else{
    console.log("小華遇到不在計畫內的特殊天氣");
}

console.log("小華出門了");

## if 流程圖規劃流程

寫程式之前要先拆解任務
流程出來，再寫code很容易

### 流程圖符號簡介

流程圖工具：whimsical
https://whimsical.com/js-8YBYe5kTEHJLrrzRgsjShi

流程圖符號最常使用：流程符號、起止符號、程式、決策判斷

![](https://i.imgur.com/uChFJnf.png)

![](https://i.imgur.com/o62RcMX.png)


Dora的流程圖:
https://whimsical.com/js-8YBYe5kTEHJLrrzRgsjShi

### 流程圖 let code 講解
小華他想出門，但不確定自己的錢包是否有錢
於是他想打開錢包看看有多少錢
打開後，他發現有 150 元，於是他就紀錄在腦袋裡，他擁有 150 元

### 流程圖 if code 講解

如果他有 100 元以上，他決定吃牛肉麵
如果沒有100元，就不吃任何東西，也不出門

最後計算自己剩下多少錢


let wallet = 0;
wallet += 150 ; 
if(wallet >=100){
    wallet -= 80;
}else{
    wallet-= 0;
}



## if 中階運用
### if 包 if 腰圍判斷流程圖設計
//腰圍指數測量
//男生腰圍大於 90 為過胖
//女生腰圍大於 80 為過胖

1. 判斷是男是女
2  判斷男女過胖的體重
    男生判斷腰圍90
    女生判斷腰圍80

### if 包 if 腰圍判斷 Code 設計


let gender  ; 
let weight ;

gender = "male" ;
weight = 90

if(gender == "male"){

    if( weighy >=90){
        console.log("體重過重ˋ");
    }else{
        console.log("體重正常");
    }
}else if(gender == "female"){
    
    if( weight >=80){
        console.log("體重過重ˋ");
    }else{
        console.log("體重正常");
    }
}else{
    console.log("您輸入的資料錯誤");
}

### 看圖說故事 - if練習一

let myDegree = 38;

if(myDegree > 37.5){
    console("不可進入");
}else{
    console("可以進入");
}

console.log("計算結束");


### 看圖說故事 - if、else if 練習二

let myScore = 60;

if(myScore >=60){
    console.log("您的成績及格");
}else{
    console.log("您的成績不及格);
}

### 看圖說故事 - if、else if 練習三


let myScor= 66;

if(mySocr >=80 ) {
    console.log("優秀");
}else if(myScore >=60 ){
    console.log("普通");
}else{
    console.log("不及格");
}


## 陣列教學
### 為什麼要學陣列？

1. 家庭成員宣告就要重複宣告很多次
2. 超市宣告不同變數就要宣告很多次

let colors = ['red','yello','black'];
let family = ['Bob','David'];

### 陣列寫法教學


let color1 = 'blue';
let color2 = 'pink';

//但如果有1000種顏色, 宣告變數就會很麻煩

let colors = ['blue','pink'];
=>要注意！JS的陣列是用中括號［］包住表示，並非｛｝

### 陣列不只能放字串，也能放數字與混合資料

let ary []; //陣列可以放空陣列

let boos = [5 ,30,40,100] //書櫃放的書本數
console.log(books);

ary=['blue',100,false]; //陣列可以放不同屬性的資料

### 陣列讀取教學

let colors = ['red','yello','black'];
//讀取陣列資料、了解陣列長度
console.log(colors[0]);
red

//陣列是從0開始

console.log(colors[1]);
印出為yello

### 讀取陣列資料，並賦予新變數流程

let colors = ['red','yello','black'];

let ilikeColor = color[2];
console.log(ilikeColor);

### length 讀取陣列長度流程

let colors = ['red','yello','black'];
let clolrslNum = colors.length;

console.log(clolrslNum);
印出為3


### 陣列預設寫入資料

let colors = [];
//寫入
console.log(colors);
印出為空值

colors[0] = "blue";
console.log(clolors);

colors[1] = "red";
colors[2] = "black";
colors[4] = "pink";
//雖然[3]是空值,陣列上還是會視為一筆資料
//為被定義的會被寫入undifined(empty)
console.log(colors.length);
印出5

### push 寫入資料流程

//push會在最後一個資料後方加值

let colors = ['red','yello','black'];
colors.push("pink");
colors.push(3);

console.log(colors);


### unshift 
//新增至陣列第一筆資料

let colors = ['red','yello','black'];
colors.unshift('pink');

console.log(colors);


### pop 與 shift 刪除資料

//新增 push,unshift
//刪除 pop,shift

colors.pop();
colors.shift();

### splice 刪除指定資料


//新增 push,unshift
//刪除 pop,shift
//刪除指定資料splice(起始位置,第幾筆);

let colors = ['red','yello','black'];

//第一個數字，起始位置
//第二個數字，要往後刪除幾筆資料

colors.splice(1,1);
刪除yello

console.log(colors);

//應用說明
網頁上會有顯示的刪除按鈕
按下刪除按鈕,會取得該筆資料在陣列的位置
用spice帶入位置之後刪除該筆資料


### 其他陣列總結
##### 六角講義
https://www.hexschool.com/2017/09/01/2017-09-01-javascript-for/


##### 處理陣列的方法：
https://codepen.io/mwebwvuq-the-flexboxer/pen/PoaNvyq

* **filter()**：filter() 會回傳一個陣列，其條件是 return 後方為 true 的物件，很適合用在搜尋符合條件的資料。
* **find()**：find() 與 filter() 很像，但 find() 只會回傳一次值，且是第一次為 true 的值。
* **forEach()**：forEach 是這幾個陣列函式最單純的一個，不會額外回傳值，只單純執行每個陣列內的物件或值。
* **map()**：使用 map() 時他需要回傳一個值，他會透過函式內所回傳的值組合成一個陣列。這很適合將原始的變數運算後重新組合一個新的陣列。
    * 如果不回傳則是 undefined
    * 回傳數量等於原始陣列的長度
* **every()**:every() 可以檢查所有的陣列是否符合條件，這僅會回傳一個值 true or false，可以用來檢查陣列中的內容是否符合特定條件。
* **some()**:some() 與 every() 非常接近，都是回傳 true or false，差異僅在 every() 需完全符合，some() 僅需要部分符合。
* **reduce()**:reduce() 和其他幾個差異就很大了，他可以與前一個回傳的值再次作運算，參數包含以下：
    * accumulator: 前一個參數，如果是第一個陣列的話，值是以另外傳入或初始化的值
    * currentValue: 當前變數
    * currentIndex: 當前索引
    * array: 全部陣列

## 物件教學

### 為什麼要有物件

買房子會看很多物件，比較詳細在描述一件東西裡面的詳細資訊
例如游泳池、房間、廚房等

### 物件格式教學

let colors = ['red','yello','black'];

//物件
//描述家庭

let motherName = "Mary";
let father = "Tom";
let dogs = 3;

//物件用｛｝表示
//宣告方式為 => 屬性:對應值,
//每筆資料要用逗號分開
//最後｝結尾要加上分號
//若有Boolean 要寫小寫

let home = {
    motherName : "ViVi",
    fatherName : "Bob",
    cats : 2 ,
    isWakeUP : true   
};

### 如何讀取物件的值

let home = {
    motherName : "ViVI",
    fatherName : "Bob",
    cats : 2 ,
    isWakeUP : true   
};

console.log(home.motherName);
let cats = home.cates;

用"點"去選擇物件

### 新增物件屬性

let home ={};

home.motherName = "Mary";
home.cats = 3;
console.log(home);

//新增屬性並賦予值

### 修改物件值

let home = {
    motherName : "ViVI",
    fatherName : "Bob",
    cats : 2 ,
    isWakeUP : true   
};

home.motherName = "Jane";
console.log(home);

### 刪除物件資料

delete home.motherName;

console.log(home.motherName);
顯示undefined


### 另一種讀取物件屬性方法

let a = "cats";
console.log(home[a]);
印出2

### 物件讀取資料判斷時間

陳列物件還有json格式資料
 "001":"hello"

 
let home = {
    motherName : "ViVI",
    fatherName : "Bob",
    cats : 2 ,
    isWakeUP : true,
    "001":"hello"
    
};

當物件內容為json格式，
使用"點"取得物件
因為開頭如果是數字,無法辨識會出錯

![](https://i.imgur.com/tI5KWRf.png)

在這種情況下就必須使用上述"字串讀取的方式" []

![](https://i.imgur.com/gzYkiVV.png)


## 陣列與物件整合運用

### 陣列與物件混合應用

知道什麼情況下要用陣列
什麼情況下要用物件
如何讀取資料定義資料結構

e.g. 情境
有兩個水果攤
第一個水果攤，老闆 Tom ，香蕉有６個，蘋果有５個，還沒關店
第二個水果攤，老闆 John，香蕉有９個，蘋果有８個，還沒關店 

拆解資訊
陣列來說都是放幾筆幾筆[0][1]
* 兩家店陣列內容有2筆
* 陣列內容也可以放物件
* 陣列格式 [陣列內容,陣列內容,陣列內容]
* 物件格式 { 屬性:值 }

let market = [
    {
        bossName  : "Tom",
        bananaNum : 6,
        appleNum  : 5,
        isOpen    : true
    },
    {
         bossName : "John",
         bananaNum : 9,
         appleNum  : 8,
         isOpen    : true
    }

]



### 一次搞懂陣列與物件混合讀取教學

![](https://i.imgur.com/lE4FxG6.png)

market是屬於 陣列

![](https://i.imgur.com/RBrJn9Y.png)

market[0]的內容為「物件」
若要取得物件內容要使用＂點＂


若要尋找陣列的第幾筆？用中括號[第幾筆]去尋找
如果要尋找物件屬性的值？要用＂點＂去尋找

舉例：
要找到 appleNum  : 8,的資料

console.log(market[1].appleNum);
![](https://i.imgur.com/FPnLHC8.png)


### JSON格式介紹

* 維基百科介紹JSON
https://zh.wikipedia.org/zh-tw/JSON

* WEB開發
JSON最開始被廣泛的應用於WEB應用的開發。不過目前JSON使用在JavaScript、Java、Node.js、C#應用的情況比較多，PHP等開發的WEB應用主要還是使用XML。

* 會有JSON格式的原因：
我們有很多不同的資料庫
每個資料庫結構都不一樣
如果要互相傳遞要用共通的格式做傳遞
普遍來說大家會使用JSON格式來做共通的格式

JSON格式範例(與先前的陣列物件格式很像)
![](https://i.imgur.com/PUZxGN9.png)


### 安裝 JSON 檢視 Chrome 套件

[高雄 OPEN DATA 開放資料官網網站](https://data.kcg.gov.tw/)
[JSONView 安裝網站](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=zh-TW)

有些Json格式會用中文編碼處理
所以用JSON View可以直接觀看

JSON格式是陣列格式，陣列格式是[]表示，陣列裡面包物件，物件用｛｝表示
![](https://i.imgur.com/kmNYauw.png)

JSON格式網頁>右鍵>檢視原始碼，就可以複製下載

VS code 在js 貼上json資料
let data = 貼上Json內容
console.log(data);


### JSON 讀取方式教學

console.log(data[0].物件);

### 物件裡還能包物件

let family = [

  {    motherstatus:
      {
          name:"Mary",
          age:35
      },
      fatherstatus:
      {
          name:"Mark",
          age:40
      },
      dogs : 3
  
  }

];
console.log(family[0].motherstatus);

下圖的JSON格式是陣列還是物件？
答案是物件，因為最外層是｛｝格式
此物件有兩個屬性
物件entries裡面包陣列
![](https://i.imgur.com/b1QPsNa.png)


### 小魔王題目：複雜 JSON 格式，你/妳撈得到嗎？

https://codepen.io/mwebwvuq-the-flexboxer/pen/JjvMyXa


## 函式 function

### 函式教學寫法

function wakeup(){
  console.log("起床");
  clean();
  console.log("出門");
  

}

wakeup();

function clean(){
  console.log("刷牙洗臉);
}

### 函式參數介紹

function a(num){
    console.log(num);  
}

function a(num,num2){
    console.log(num);  
    console.log(num2);  
}

a(3);
a(3,,3);


### 參數寫法-參數只存活在大括號

參數只存活在左右大括號

![](https://i.imgur.com/9ODePgL.png)


### 參數寫法-數字相加
function cal(num1,num2){
  console.log(`計算相+:${num1+num2}`);

}

cal(123,123);

### return 寫法教學


function cal(num1,num2){
  return `${(num1+num2)/2}`;
}

let DoraScroe = cal(90,80);

console.log(`DoraAvgScroe:${DoraScroe}`);



### return 可以有多個

return 可以中斷函式執行，後面的程式就不跑了

### 判斷是否為偶數-寫Code流程


function caltest(num){
  if(num%2==0){
    console.log("是偶數");
  }else{
    console.log("不是偶數");
  }
}

caltest(110);

畫流程圖確認流程
小步測試~反覆驗證


## Codewar 程式解題邏輯培養

### 為什麼要學 Codewars？
1. 訓練程式的邏輯
2. 解題若有卡關google搜尋關鍵字用雙引號包住""一定會包含此內容才會被搜尋出

## DOM - 選取網頁元素


## Event事件 - 讓您的網頁具有互動效果

## 陣列 forEach 資料處理方法

## forEach 題型練習




## CCC老師 Day5
### 建立外部JSON

![](https://i.imgur.com/Wa3nDnU.png)


### 語法練習
```javascript=
let ary = ["Dora","James","Tom"];
let answer_find = ary.find(x=>x=="James"); //James
let answer_indexif = ary.indexOf(x=>x=="James");//-1
let answer_findindex = ary.findIndex(x=>x=="James");//:1

let aryNumber = [12,33,54,777,344,555];
let aryNumber_findindex = aryNumber.findIndex(x=>x>300); //3
let aryNumber_findfilter = aryNumber.filter(x=>x>300); //777,344,555

```
* ary.find : 
Array.prototype.find()
find() 方法會回傳第一個滿足所提供之測試函式的元素值。否則回傳 undefined。



![](https://i.imgur.com/EAxYfkC.png)


[MDN - 解構賦值](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

```javascript=
let person = {
  name : "Dora",
  age : 5,
  email : "test@gmail.com",
  cat:3
};

let {cat,name,age,email} = person;
console.log(name); //Dora
console.log(cat);  //3
let {name: myname,age:myage,email:myemail} = person;

console.log(myname); //Dora
```

![](https://i.imgur.com/QuVjzDJ.png)


### XHR


https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

https://ithelp.ithome.com.tw/articles/10195896

bind() 方法，會建立一個新函式。該函式被呼叫時，會將 this 關鍵字設為給定的參數，並在呼叫時，帶有提供之前，給定順序的參數。

語法
fun.bind(thisArg[, arg1[, arg2[, ...]]])


https://notfalse.net/36/http-uri
統一資源識別符 (URI)

![](https://i.imgur.com/GkekJ11.png)


![](https://i.imgur.com/uicMSwf.png)



## JS作業檢討-行事曆
