---
# System prepended metadata

title: 基礎課程
tags: [JavaScript]

---

---
title: 基礎課程
tags: JavaScript
---
JavaScript概論
---
* 簡稱JS
* 是動態腳本
* 可以寫在瀏覽器上(前端) 也可以寫在Node.js上(後端)
* 可以讓網頁動起來
* 可應用到網頁的前端跟後端 Andoird還有IOS App上
* 可寫手機版網頁嵌入App內(如:line today)
* 兩個=是模糊的 三個=是嚴謹的

在HTML加入JS的兩種方法
---
1. 在head或body內用script tag去包JS的內容
```htmlembedded=
<script>
裡面包JS的語法
</script>
```
2. 也可在專案內加入一個副檔名.js的檔案
    在head或body內引入JS連結
```htmlembedded=
<script src="./index.js"></script>
```

console.log()
---
* 在console裡面log出我們紀錄的訊息
* 可以用來顯示提示用戶的訊息
```javascript=
console.log(裡面輸入要顯示在console的資訊)
```

alert
---
* BOM指令=全域的情況使用
* 跳出提示框
* 兩種alert的方式:
```javascript=
    alert('123');
    window.alert('456');
```
* 也可以用跳出的提示框詢問yes or no
```javascript=
        confirm ('Delete?');
        confirm ('submit?');
```
* 可以彈出視窗輸入數字
```javascript=
        prompt('input num1',0);
        window.prompt('input num1');
```

document.write
---
* 將單純的字串輸出，以及輸出變數字串
* 測試使用
```javascript=
　var TestString='Have a good time.';
　document.write('Welcome to Wibibi.<br>'+TestString);
```

查看資料
---
* 可以查看資料的指令
```javascript=
        typeof(123)
        number
```

null undefined NaN empty
---
* null 沒有東西 可以指定一個變數為null
* undefined 變數存在但未定義
* NaN(not a number) 數字*字串=NaN
* empty 初始值/判斷是否為空值

變數與常數
---
* 宣告變數的符號'=',代表把右邊的內容給左邊
* 宣告變數的三種方式：
    let 區域變數 - 取代var 可用的地方比較多 
                  同一個區域只能有一個被let宣告的變數 
    var 全域變數 - 可被改變的變數 
                  同一個區域重複使用var 新宣告的變數會替代之前宣告的舊變數
    const 常數 - 不可被改變的變數(常數)
* 修改變數內容
    ```javascript=
    let a1 = "aaa"
    console.log(a1) //此時的a1是aaa
    a1 = "bbb" //再次宣告不需要let
    console.log(a1) //此時的a1是bbb
    ```
* 宣告變數-字串 string
    * 跳脫字元 \n
    * 字串兩邊要用"或'包起來
    * 例：宣告一個名字的變數 並且顯示在console裡面
    ```javascript=
    let myName = '翎'//字串
    console.log(myName)
    ```
    * 如果let後面+的兩邊放的是字串
      不會變成運算
      會自動變成字串的連接
    * 例：宣告我的名字是翎 999歲
       相加後結果會顯示 翎999歲
    ```javascript=
    let myName = '翎'
    let age = '999歲'
    let word = myName + age
    console.log(word)       
    ```
    * 例：透過宣告字串實現提示訊息
       提示訊息：錯誤 或 提示訊息：成功
    ```javascript=
    let title = '提示訊息：'
    let title1 = '錯誤'
    let title2 = '成功'
    
    let alert1 = title + title1
    let alert2 = title + title2
    ```
* 宣告變數-數字 number
    * 數字可以直接輸入不需要用符號包起來
    * 小數與整數在JS是同一個類型
    * 例：宣告一個分數的變數 並顯示出來
    ```javascript=
    let score = 100
    console.log(score)
    ```
    * 例：用數字做四則運算
    ```javascript=
    let num = 100
    console.log(num + 200)
    ```
    * 例：取餘數 100取3的餘數 餘1
      可用來判斷奇偶數
    ```javascript=
    let num = 100
    console.log(num % 3)
    ```
    * 字串轉數字：
        如果數字要運算時
        建議要習慣轉換
        避免妳不知道他是字串還是數字
        結果錯誤
        例:
    ```javascript=
        let num1 = 123;//number
        let num2 = "456";//string
        // parseInt parsFloat Number
        combineNum = num1 + num2;
        // console.log(combineNum)//字串相加
        combineNum= num1 + parseInt(num2);
    ```
    * 數字轉字串：
        例:
    ```javascript=
        let num1 = 123;//number
        let num2 = "456";//string
        
        let newNum1 = num1.toString();
        console.log(newNum1);
        console.log(typeof(newNum1));
    ```
* 宣告變數-布林值 boolean
    * 只會有TURE跟FALSE
    * 例：宣告一個布林值 並顯示出來
    ```javascript=
    let isFake = false
    console.log(isFake)
    ```  
    * FLAG式紀錄狀態的標記
        只有1和0兩個數 
* 宣告變數-是否是空值
    * undefined跟null一樣都是空值
    * 例：宣告一個包包是空的 並顯示出來
    ```javascript=
    let bag = undefined
    console.log(bag)
    ```
    
陣列 Array
---
* 用[]框起來
* 比較偏向在資料處理
* 類似群組的概念
    例：A班裡面有 小新 妮妮 阿呆 風間 正男
    ```javascript=
    let classA = ['小新', '妮妮', '阿呆', '風間', '正男']
    ```
* 陣列沒有長度限制 可以不停往裡面加東西
* 新增陣列內容的語法
    例：在A班內加入小愛
    ```javascript=
    let classA = ['小新', '妮妮', '阿呆', '風間', '正男']
    console.log('轉學前：',classA)
    classA.push('小愛')
    console.log('轉學後：',classA)
    ```
* 陣列的索引稱為index
* 索引都是從0開始
* 顯示陣列內容
    例:將陣列內容顯示出來
    ```javascript=
    let classA = ['小新', '妮妮', '阿呆', '風間', '正男']
    console.log('第一筆', classA[0])
    console.log('第二筆', classA[1])
    console.log('第三筆', classA[2])
    ```
* 顯示陣列長度
    例：A班陣列的長度 會顯示5
    可用來放在迴圈內
    當作迴圈次數的依據
    ```javascript=
    let classA = ['小新', '妮妮', '阿呆', '風間', '正男']
    console.log(classA.length)
    ```
* 從陣列取value或加入value
    ![](https://i.imgur.com/07WLYbn.png)
    例:從尾端取值
    ```javascript=
    let reA=aryFirst.pop();//從末端取出值 原本的值取出後消失
    ```
    例:從前端取值
    ```javascript=
    let reB=aryFirst.shift();//從前端取出值 原本的值取出後消失
    ```
    例:從末端+值
    ```javascript=
    let reC=aryFirst.push();//從末端加入值
    ```
    例:從前端+值
    ```javascript=
    let reC=aryFirst.unshift();//從前端加入值
    ```

物件Object
---

* 用{}框起來
* 用在存放文字跟數據
* 可將物件放入陣列使用
* 宣告有屬性的物件
    例:一個名片
    ```javascript=
    const card = {
        name : '名片',
        adress： '台北市',
        age: 999,
    }
    ```
* 顯示物件內容
    例:宣告一個物件內容 名字 名片 年齡
        console.log Card裡面的name項目
    ```javascript=
    const card = {
        name : '名片',
        adress： '台北市',
        age: 999,
    }
    
    console.log('名字',card.name)
    ```
    
判斷式if else
---
* 判斷式是直接幫我們把條件轉成布林值
* 如果符合條件就執行A選項不符合就執行B選項
    例：如果小於100小餘50就顯示 大於 否則就顯示 錯誤
    ```javascript=
    if(100>50){
        console.log('大於')
    }else{
        console.log('錯誤')
    }
    ``` 
* 判斷式常用的邏輯運算子有 && || !
* && 兩邊都T = T
* || 兩邊只要有一邊是T = T
* ! 把結果反向
* === 判斷兩邊的東西是否相等
    如:兩個成績相等= T
    ```javascript=
    let scoreA = 100
    let scoreB = 100
    let condition = score === 100
    console.log('condition',condition)
    ```

流程控制switch case
---
* 有點類似if...else if...else
    例：如果把成績分成好幾個Case
```javascript=
let score = 100

switch(score){
    case :100
        console.log('考了100分')
        break;
    case 60:
        console.log('考了60分')
        break;
    case 30:
        console.log('考了30分')
        break;
    default:
        console.log('沒去考試')
        break;
}
```

for迴圈
---
* 條件裡面 宣告變數 宣告次數 每次+多少
* i++ → i = i + 1
* 例:i從0開始跑 跑到10時停止 每次跑完+1
     會顯示 0 1 2 3 4 5 6 7 8 9
```javascript=
for(let i = 0; i < 10; i = i ++){
    console.log('i:',i)
}
```
* i + = 2 → i = i + 2
* 基本迴圈
    例:i從5開始跑 跑到10時停止 每次跑完+2
     會顯示 5 7 9
```javascript=
for(let i = 5; i < 10; i+=2){
    console.log('i:',i)
}
```
* 陣列迴圈
    例：宣告一個classA班級裡面有三個人
    將陣列內容用迴圈印出來
```javascript=
let classA = [100, 70, 59]
for(let classA=0; i < classA.length; i++){
    console.log('i:', classA[i])
}
```
* 陣列迴圈進階
    例：先把迴圈加入一個40
     再讓迴圈跑到2就把索引2改成999
     所以console.log的結果會變成100 79 999 40
```javascript=
let classA = [100, 70, 59]
classA.push(40)
for(let classA=0; i < classA.length; i++){
    if(i===2){
        classA[i] = 999
    }
}

console.log('classA', classA)
```
* 物件迴圈
    例: 設定兩個物件
        用迴圈依次印出來
```javascript=
const post =[
    {
        name:'大雄'
        desc:'貼文一'
    },
    {
        name:'小叮噹'
        desc:'貼文一'
    }
]

for(let classA=0; i < posts.length; i++){
    if(i===1){
        let post = posts[i]
        console.log(post)
    }
}
```

while迴圈
---
* while迴圈條件如果是true會直接跑到當掉
* 例：給迴圈一個判斷式 跑到10 
        避免跑到當掉
```javascript=
let condition = true//如果是一直是true會一直無限迴圈
let target = 10//給他一個次數上限
let i = 0//從0開始

while(condition){
    if(i === target){//如果跑到10
        condition = false//就會變成false 就會停止
    }
    console.log(i)//沒停止的話印出i
    i++//每次+1
}
```

函數Function
---
* function的宣告與執行方式
    ```javascript=
    function hello () {
        console.log('你好')
    }

    hello()//要寫這個才會執行
    ```  
* 打包的概念 把函數內的東西打包 帶到哪裡都方便
* function的簡寫
![](https://i.imgur.com/y8ZdBpV.png)
* 沒參數的function
    例:宣告一個function以後可以在各頁面簡短的輸入獲取function內容
    ```javascript=
    function addMoney() {
    console.log(100 + 200)
    }

    //結帳頁面輸入
    addMoney()

    //購物車頁面
    addMoney()
    ```
* 有參數的function
    例:讓function裡面接受三個傳入的參數
        結果顯示出三個參數
        以及運算的結果
    ```javascript=
    function addMoney(price1, price2, discount) {
    console.log('price1', price1);
    console.log('price2', price2);
    console.log('discount', discount);
    console.log(price1 + price2 - discount)
    }

    //結帳頁面輸入
    addMoney(2000, 100, 50)

    //購物車頁面
    addMoney(3000, 200 , 100)
    ```
* return 有回傳值的function
    例:將function裡面的參數運算後
        return出去
        宣告一個變數顯示出來function的運算結果
    ```javascript=
    function addMoney(price1, price2, discount) {
    let result = price1 + price2 - discount
    return result//將結果傳出去
    }

    let total = addMoney(5000, 5000, 1000)
    console.log('total',total);
    ```
* 回傳值的function+if...else
    例:如果花費超過兩萬就是白金會員
        五萬就是尊榮會員
    ```javascript=
    function addMoney(price1, price2, discount) {
    let result = price1 + price2 - discount
    let message = '普通會員'
    
    if(result >= 50000){
    message = '尊榮會員'
    return message //跟break有同樣的效果
    //沒輸入return的話 他會繼續比對下面的條件
    }
        
    if(result >= 20000){
        message = '白金會員'
        return message
    }
    
    return message//將結果傳出去
    }

    let msg = addMoney(5000, 5000, 1000)//變數名稱可以隨便設定
    console.log('msg',msg);
    ```
* 結合物件使用function
    例:寫一個構造函數
```javascript=
    function createCard(initName){
        this.name = initName//this.→當下是什麼要執行函數本身
    }

    const a1 = new createCard('小明')//new→建立 構造
    const a2 = new createCard('小明2')
    const a3 = new createCard('小明3')
    const a4 = new createCard('小明4')
    const a5 = new createCard('小明5')
    const a6 = new createCard('小明6')
    console.log(a1);
    console.log(a2);
    console.log(a3);
    console.log(a4);
    console.log(a5);
    console.log(a6);
// 透過這樣的方式可以保證我的程式碼不會漏掉name這個屬性減少出錯
```
* 另一種function的宣告方式
    例:
```javascript=
let Hello = function() {}
```
* function的簡寫
```javascript=
let Hello = () => {}
```

迴圈的略過continue跟braeak
---
* 放在迴圈內可略過
    例:用while迴圈印出1.2.3.4.6.7.done
```javascript=
let k=0;
while(k<10){
    k++;
    if(k==5) continue;
    if(k==8) break;
    else console.log(k);
}
console.log("done")
```

類別class
---
* class是語法糖 並不是真正的class
* ????????????????????????? 

HTML DOM
---
* 瀏覽器下兩個重要的全域變數
    1. windows =>一整個瀏覽器的功能操作
        如 
        ```javascript=
        window.alert("")
        ```
    2. document =>可以拿到這個檔案的標籤
* 取得元素
    如:在window裝一個監聽器 讀取到頁面以後執行function
        設定一個變數 內容是一個函數
        這函數在document裡面 是透過id:title去取得的
        * 如果script標籤再上面的話有時會讀不到
    ```javascript=
    window.addEventListener('load', function () {
            document.getElementById('title')
            })
    ```
* 例:如果偵測到 click這個動作 就執行function console.log點下去
```javascript=
const b1 = document.getElementById('btn')

b1.addEventListener('click', function (){
    console.log('點下去')
})
```


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