---
disqus: chiaoshin369
---
# JS學習筆記 第一週進度
###### tags: `JS暑期線上學習` `六角學院` `技術重點筆記` `JavaScript 必修篇 - 前端修練全攻略`

## 變數(Variable)與資料型別(Data Type)
### 什麼是變數(Variable)?
> 電腦將 一個值 **儲存到記憶體的代稱**。
### 什麼是值(Value)?
> 就是**數字、中文字**，這些給予變數有意義的東西。

>如圖所示，A部分為變數，B部分為值

### 資料型別(Data Type)
>前面有說到變數可能為 香蕉價格、店長姓名、店面開啟狀態等
>而我們的值也可能不同

>可以把資料型別看作 **類別**，他可能是數字、文字等
>我們把資料型別分為

| 資料型別 | 說明 |
| ---------------- | ------------------------------------ |
| **[數字 Number](/lSatPl6jTl-doWpR9HsPjg?view#%E5%81%9A%E8%AE%8A%E6%95%B8%E8%A8%88%E7%AE%97%E3%80%81number%E5%9E%8B%E5%88%A5%E6%9C%89%E5%93%AA%E4%BA%9B)** | 用來存計算的**數值** |
| **[字串 String](/lSatPl6jTl-doWpR9HsPjg?view#%E5%AD%97%E4%B8%B2%E5%9E%8B%E5%88%A5-String)** | **文字** |
| **[布林 Boolean](/lSatPl6jTl-doWpR9HsPjg?view#%E5%B8%83%E6%9E%97Boolean%E6%98%AF%E4%BB%80%E9%BA%BC)** | **是、否** ( **True** 跟 **False** ) |
| [未定義 undefined](/lSatPl6jTl-doWpR9HsPjg?view#%E6%9C%AA%E5%AE%9A%E7%BE%A9undefined) | **尚未被賦予值**，提示使用者要給予值 |
| [空值 null](/lSatPl6jTl-doWpR9HsPjg?view#null) | 1.**賦予值**為**空資料** 2.**清空資料**，用來**釋放記憶體空間** |
| [非數字 NaN](/lSatPl6jTl-doWpR9HsPjg?view#%E4%BB%80%E9%BA%BC%E6%98%AFNaN) | **非數字 (Not a Number)**，警告字串相加有誤 |
| Symbol | 字串符號 |

### 透過 Chrome 開發人員工具來寫 JavaScript
>所有程式 debug(除錯、除蟲) 都需要用到工具
>而程式語言有分 [直譯與編譯](https://totoroliu.medium.com/%E7%B7%A8%E8%AD%AF%E8%AA%9E%E8%A8%80-vs-%E7%9B%B4%E8%AD%AF%E8%AA%9E%E8%A8%80-5f34e6bae051)

>先不討論差別，這些工具被稱作 [IDE](https://zh.wikipedia.org/wiki/%E9%9B%86%E6%88%90%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83)
>**IDE是用來讓程式碼開發更方便的工具**
>而不同程式，就有不同的工具可以使用

>像 **VS code** 就能將基本 **html+css+js** 開發出網頁
>而 **Dev C++** 則是將 **C++** 做出軟體、系統出來
>兩者都是IDE，但是每個程式debug的方式都不一樣

>而我們如何用 **Chrome的 開發人員工具** 來直譯 **JS** 程式碼
>:::spoiler
><font color="#EA0000">**開啟 開發人員工具 的四個方法:**</font>
> **1. F12 (最簡單)
> 2. Ctrl + Shift + I
> 3. 在網頁按下右鍵 > 檢查
> 4. 右上角三個點 > 更多工具 > 開發人員工具**
> :::

//程式碼片段 (可直接複製)  //文字用 單或雙引號 去包起來
alert('Hello World');    //單引號
alert("Hello World");    //雙引號

//此片段用來當作 提示、警告使用者 的訊息

每次學程式的起源 Hello World標配 :laughing:
![image alt](https://i.imgur.com/uEBw3pk.gif "title" =800x400)
> 可以按照上面圖片去操作 **(對圖片按右鍵，在新分頁中開啟圖片)**

### 如何宣告變數，賦予值給變數
>在數學裡頭，我們**設未知數**會寫成 **設 x 為某物、某值**
>變成數學就是 x=20、x=香蕉

>在一般常見的C++、JAVA程式中，
>我們會寫成`int x=20;`、`String x="香蕉";`

>而在JS裡面，**設 x 為 某值**，**宣告方式** 有三種
1. `let`
2. `const`
3. `var`

:paperclip:三種 宣告方式差別 可以透過 [**左側下方目錄**](https://hackmd.io/lSatPl6jTl-doWpR9HsPjg?view#let%E3%80%81const%E3%80%81var-%E5%B7%AE%E5%88%A5) 點擊觀看
#### 先用let宣告

> 看圖片我們可以得知
> **[設 a 為 某值]**
> **設** 變成 **let**，**為** 變成 **=**，**某值** 變成 **1**

>而`let a=1;`這個程式碼就是 **宣告一個變數a，賦予值為1**

#### 執行看看結果

//程式碼片段 (可直接複製) //注意 每結束一段程式 都需要 加上;
let a=1;                //令a=1
a                       //輸出a值

let bananaPrice=79;     //令bananaPrice=79
bananaPrice             //輸出bananaPrice值

<font color=#EA0000>:warning:**注意**</font> 當 **開新分頁** 或 **重新整理**，程式碼**不會將記憶體保存** (也就是一切歸0)
:::spoiler
> 跨分頁 **無法共用變數**
宣告變數 只在該分頁有效，其他分頁無法取得 該分頁的變數資訊。
💡每個頁面都有<font color=#EA0000>**獨立的記憶體空間**</font>，不會跨頁分享。

> 重新整理，**變數會被清除**
如果需要使用變數，要先重新宣告變數。
💡重新整理頁面會<font color=#EA0000>**釋放記憶體**</font>。
:::

### JS的算術運算子、IDE當計算機算
#### 什麼是[運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators)?
>先釐清什麼是**運算子**，他們是程式邏輯的核心
>可以想像成**電腦在做計算**，需要**用到的東西**

>這裡又會講到**運算元**，也就是**1234、Tom**這些**值**
>**運算元+運算子=運算式**

>例如 **1+1=2**
>就是 **運算元(1) 運算子(+) 運算元(1) 運算子(=) 運算元(2)** 組成

#### 運算子有哪些?常見的有哪三種?
>簡單來講，運算子除了是 **+ - * /** 外，還分為 **><==** 、 **&&||** 這些
>運算子**在程式語言基本上相通**，但**隨程式語法**會有一些變化 (**不一樣**的地方)。
>而運算子有很多，這裡就不一一敘述，點擊[文章](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators)可以自行參考

[JS簡易的運算子判斷](https://www.csie.ntu.edu.tw/~sylee/courses/jscript/operator.htm)
##### 常見的有哪三種?
1. [**算術**運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E7%AE%97%E8%A1%93%E9%81%8B%E7%AE%97%E5%AD%90)
>也就是簡單的**四則運算+ - * /**
>還有就是 **% (mod 取餘數)**、** (次方)、**++ (遞增)**、**-- (遞減)**
>Ex: 1+1=2

| 算術運算子 | 說明 |
| ---------- | ------------ |
| + | 加法 |
| - | 減法 |
| * | 乘 |
| / | 除(四捨五入) |
| % | 取餘數(mod) |
| ** | 次方(^) |
| ++ | 遞增 |
| -- | 遞減 |

2. [**比較**運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E6%AF%94%E8%BC%83%E9%81%8B%E7%AE%97%E5%AD%90)
>常見的有基本
> **> (大於)**、**< (小於)**、**>= (大於等於)**、**<= (小於等於)**、**== (等於)**、**!= (不等於)**
> Ex: 1>2、(1>2)==(2>3) [解答為T、F]

| 比較運算子 | 說明 |
| ---------- | -------- |
| > | 大於 |
| < | 小於 |
| >= | 大於等於 |
| <= | 小於等於 |
| == | 等於 |
| != | 不等於 |

3. [**邏輯**運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E9%82%8F%E8%BC%AF%E9%81%8B%E7%AE%97%E5%AD%90)
> 主要三個 **&&(AND)**、**||(OR)**、**!(NOT)**

| 邏輯運算子 | 說明 |
| -------- | -------- |
| && | AND |
| ll | OR |
| ! | NOT |

>以下 **T為True、F為False**
:::success
> **&& (AND)邏輯判斷:**

| 第一個元素 | 第二個元素 | 最終結果 |
| ---------- | ---------- | -------- |
| T(1) | T(1) | T(1) |
| T(1) | F(0) | F(0) |
| F(0) | T(1) | F(0) |
| F(0) | F(0) | F(0) |
>Ex: **T&&T =>T**
:::

:::success
>**|| (OR)邏輯判斷:**

| 第一個元素 | 第二個元素 | 最終結果 |
| ---------- | ---------- | -------- |
| T(1) | T(1) | T(1) |
| T(1) | F(0) | T(1) |
| F(0) | T(1) | T(1) |
| F(0) | F(0) | F(0) |
>Ex: **T||T =>T**
:::

:::success
>**! (NOT)邏輯判斷:**

>Ex: **!(3>4) =>T**
>解析: (3>4)先判斷，為F，!F變成T
:::

#### 運算子的順序其實有差
> 前面講到三個運算子
> 算術、比較、邏輯
> 而他們有**順序上的問題**
> 通常大多數程式語言中**權重為 算術 > 比較 > 邏輯**

>舉例來說:
>(2*3+25/5<12)&&(6%4>10/2)
>答案為 F

:::warning
<font color=#EA0000>**解析如何運算:**</font>
首先我們將 **2*3+25/5** 計算，出來為 **11**
再來計算 **6%4** 跟 **10/2**，結果為 **2** 和 **5**
判斷 **(11<12)&&(2>5)**
**11<12為T**，**2>5為F**
**T&&F**，最後結果為**F**
:::

>有發現嗎?
>你先運用**算術運算子**，再來**比較運算子**，最後才是用到**邏輯運算子**
>這就是所謂的**運算子的順序問題**。

[額外 **運算子順序** 文章補充](https://ithelp.ithome.com.tw/articles/10191292)

#### 拿算術運算子計算(IDE當計算機算)
>前面學到 **算術運算子** 是 **+ - * /** 這些
>我們可以直接在IDE上做計算
>像這樣:

1+5    //6    加
5-4    //1    減
30*8   //240  乘
4/2    //2    除
20%2   //0    取餘數(mod)
5**2   //25   次方(^)
5**3   //123  三次方

>上面並**沒有宣告變數**，**也沒有賦予值**，這些運算**結果**，**都不是任何一個變數的值**
>他就跟**一般計算機一樣**，可以去**做計算**。

### 做變數計算、number型別有哪些?
#### 宣告變數的計算
>而我們也可以透過 **宣告變數** 去做 **計算** 的動作。
>`let b=2+2+2;`，最終b值為 `6`
:::spoiler
他會先計算完6，再將6丟給b (賦與值給b)，`let b=6;`
:::

#### 變數之間的運算

let b = 2+2+2;
let c = 3;

b*c;    //18

#### 數字型別 Number 有哪些?
> Number可以是:

| Number | 舉例 |
|:----------:| ------- |
| **正整數** | 1、2、3 |
| **負整數** | -1、-2 |
| **浮點數** (小數點) | 3.14159 |

> 跟其他程式語言不同
> 有些數值通常會用 `int` 代表整數、負整數
> 用 `float(double)` 代表浮點數(小數點)

>在**JavaScript**中**數值**比較特別，他**同時代表整數、浮點數**。
##### 查詢型別 typeof

let a=1;
let b=-2;
let c=3.14159;

typeof a;    //利用typeof去查詢型態 a、b、c為number


#### 情境題:
:::info
**小明去超商，想到要幫媽媽買牛奶，走到冰櫃一看，
牛奶一瓶30元，於是他買了6罐，請問他總共花多少錢?**
:::

>**任務拆解:**
1. 牛奶一瓶30元
2. 買了6罐
3. 總共花多少錢?

let milkPrice = 30;       //牛奶價格
let milkNum = 6;          //牛奶數量
let total=milkPrice*milkNum;  //總額

total

##### 變數命名 小訣竅:

>**小駝峰命名法**
除了第一個單字外，後面單字的字首為大寫。
例如 milkPrice

#### 情境題2:
:::info
**小美去超商買冰塊，她帶了200元，走到冰櫃一看，
一包冰塊25元，於是她買了7包，請問他還剩多少錢?**
:::

>**任務拆解:**
1. 帶了200元
2. 一包冰塊25元
3. 買了7包
4. 剩多少錢?

let budget = 200;    //錢包預算
let icePrice = 25;   //冰塊價格
let iceNum = 7;      //冰塊數量

budget-=icePrice*iceNum; //budget=budget-(icePrice*iceNum);


#### 情境題3:
:::info
**小華去速食店吃午餐，但他擔心錢帶不夠，看了菜單，
漢堡一個50元，可樂一瓶30元，小華又餓又渴，所以他一個漢堡跟兩瓶可樂，
看了口袋的錢只有180元，請問小華買完還剩多少錢?**
:::

>**任務拆解:**
1. 漢堡一個50元
2. 可樂一瓶30元
3. 一個漢堡
4. 兩瓶可樂
5. 口袋的錢只有180元
6. 還剩多少錢?

let hamburgerPrice = 50;    //漢堡價格
let colaPrice = 30;         //可樂價格
let hamburgerNum = 1;       //漢堡數量
let colaNum = 2;            //可樂數量
let budget = 180;           //錢包預算

budget-=(hamburgerPrice*hamburgerNum+colaPrice*colaNum);

#### QA測驗:





---

## [let、const、var 差別](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types)

| 宣告 | 說明 |
| ---- | ---- |
| let | **一般宣告**，一個可隨意更改其內容的區塊區域變數 |
| [const](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/const) | **寫死(final)**，一個只可讀取的不可變常數 |
| var | **變數在整個地方都可用**，一個可隨意更改其內容的變數 |

更多關於 [let、const、var差別](https://shubo.io/javascript-hoisting/) 文章
### let跟const比較
>前面宣告都用let去執行
>現在我們用const宣告看看差別如何

let a=1;
const b=2;
const pi=3.14159;
a       //1
b       //2
pi      //3.14159

a=2;
b=5;
a      //2
b      //2


>像我們熟知**pi就是3.14159**，這個值我們就**不能去變動他**，所以**用const去宣告**。

> **const表示該變數一旦設定之後，就不可以再改變該變數的值。**
> 跟java的[final常數](https://hackmd.io/@chiaoshin369/java/https%3A%2F%2Fhackmd.io%2F%40chiaoshin369%2Fnkust_learn_java2#%E7%AC%AC%E4%B8%89%E9%A1%8CJPA02-%E8%BC%B8%E5%85%A5%E5%85%AC%E6%96%A4%E8%BD%89%E6%8F%9B%E7%82%BA%E7%A3%85%E6%95%B8%E4%BD%BF%E7%94%A8%E8%BC%B8%E5%85%A5%E5%87%BD%E6%95%B8%E3%80%81final%E5%B8%B8%E6%95%B8)類似

### let跟var比較
#### 情境
>在以前js都是用var去宣告
>但var的範圍變數過廣，會導致一些不可預期的問題

>簡單來說，今天公司有一個陳年老專案，裡頭程式碼又臭又長
>早期的工作人員都用var去宣告，導致一個問題，
>今天有一個 `var a=1;` 在專案裡頭
>這個 `a` 在這個專案被用到很多函式(副程式)上
>我剛好要用到 `a` 這個變數
>這時候就出問題了，你可能一宣告，整個陳年老專案直接陣亡

#### 為什麼用let就沒事，用var就出事?
>因為let是區塊區域變數，但var到處都可以用。

#### 區塊區域變數又是什麼?
>指的就是 只能在一個地方使用這些變數。

#### let var差在哪?

| 宣告 | 變數範圍 |
| -------- | ------------------------------------- |
| **let** | 區塊區域變數 **(只有一個地方可以用)** |
| **var** | 全域變數 **(全部都可以用)** |

>再舉個例子，更簡潔明瞭
>今天有個專案裡頭有這兩個東西

//主程式
//副程式(函數funtion)

>而我在主程式宣告 `var a=1;`
>這時 `主程式` 跟 `副程式` 都可以使用 `a` 這個變數
>如果我只用 `let a=1;` 去宣告，這樣只有 `主程式` 能使用

1.在主程式 宣告var a=1;
//主程式 a
//副程式 a

2.在主程式 宣告let a=1;
//主程式

>這就是區域跟全域的差別，
>可以把**全域**看成**共用變數**，代表到處都可以使用。
### 變數宣告的命名規則
:x: `let const=1;` 不能將宣告的保留字，當作命名變數

:x: `let 1qqq=1;` 開頭不能為數字

:x: `let 貓咪數量=3;` 開頭不能為中文(會影響編碼問題)

:warning: **大小寫** 會影響 **變數名稱不同**

let catNum=1;    //大寫 Num
let catnum=1;    //小寫 num

>**大小寫** 會影響 **變數名稱不同**，就會產生 **兩個變數**

#### 有哪些 [保留字、關鍵字](https://www.w3schools.com/js/js_reserved.asp) 會影響變數命名

| 保留字、關鍵字 | :x:變數不可命名 |
| -------------- | --------------- |
| 宣告 | let、const、var |
| 判斷式 | if、else |
| 迴圈 | for、while、do |
| 函式(副程式) | funtion |
| ... | ... |
[更多查看文章](https://www.w3schools.com/js/js_reserved.asp)

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

### 用 VSCode 直譯JavaScript (建立網頁環境)
>前面有用到chrome的開發人員工具來編譯
>但如果要用一個專案儲存，最好的方式就是用VSCode去編譯

#### VSCode建立環境 步驟:
1. 建立資料夾
2. 在 index.html 插入 `<script src="all.js"></script>`
>若看不清楚，可以對圖片，按右鍵，並在新分頁中開啟圖片
3. 打開index.html，按熱鍵F12，並執行JavaScript
>若看不清楚，可以對圖片，按右鍵，並在新分頁中開啟圖片
### 輸出有哪些?
>輸出，顧名思義就是將值在螢幕上呈現
>而js當中輸出有兩個

| 輸出 | 說明 |
| -------------- |:----------------------------------------------:|
| alert(); | **彈跳視窗**，用來當作 提示、警告使用者 的訊息 |
| console.log(); | **一般螢幕(IDE)顯示** 輸出 |

#### 示範輸出結果:

alert(a);           //彈跳視窗，用來當作 提示、警告使用者 的訊息
console.log(b);     //輸出
console.log(a,b);   //輸出兩個值，用 , 去隔開

>若看不清楚，可以對圖片，按右鍵，並在新分頁中開啟圖片

##### 註解是什麼?
>幫助開發者了解此段程式碼的意思、幫助記憶、回顧用。

| 程式語言 | 註解 |
| ---------- | ------------- |
| JavaScript | // |
| html | < ! - - - - > |
| css | /* */ |
| Scss、Sass | // |
| c++ | // |
| java | // |
| VB | // |

### 用 [CodePen](https://codepen.io/your-work) 直譯JavaScript
>最後 `console.log(a);` 要按 F12 才能觀看

## 數字型別與賦值運算子
### 計算

let a=50;     //a為50
a=a+150;      //a=50+150;   //a變為200
a=a+200;      //a=200+200;  //a最後為400

>答案為 400
>:::spoiler
>>首先，一開始**a設為50**
>但程式碼**由上而下**運作
>所以第二段 `a=a+150;` ，這段意思是a+150賦予值給a
>表示**50+150賦予值給a**，第二段**a就變為200**
>第三段 `a=a+200;` ，這段意思是a+200賦予值給a
>表示**200+200賦予值給a**，第三段**a就變為400**
>所以a最後解答才是400
>:::

>前面計算了 `a=a+150;`，對開發人員來說
>越簡寫優化會更方便，所以我們會學到 **賦值運算子**

>我們如何去優化剛剛那段程式碼呢?

a=a+150;    //程式碼可以做到簡寫，讓開發更快速
a+=150;     //兩者最終結果是一樣的

關於[**運算子是什麼**](https://hackmd.io/lSatPl6jTl-doWpR9HsPjg?view#JS%E7%9A%84%E7%AE%97%E8%A1%93%E9%81%8B%E7%AE%97%E5%AD%90%E3%80%81IDE%E7%95%B6%E8%A8%88%E7%AE%97%E6%A9%9F%E7%AE%97)，可以點擊此處。

### 什麼是 [賦值運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E8%B3%A6%E5%80%BC%E9%81%8B%E7%AE%97%E5%AD%90)?
>**右方的運算元**的值 賦予 **左方的運算元**

| 賦值運算子(簡寫) | 詳細 |
| -------- | -------- |
| x += y | x = x + y |
| x -= y | x = x - y |
| x *= y | x = x * y |
| x /= y | x = x / y |
| x %= y | x = x % y |
| x **= y | x = x ** y |

[**更多請查看這裡**](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E8%B3%A6%E5%80%BC%E9%81%8B%E7%AE%97%E5%AD%90)
### 算術運算子的 ++遞增 --遞減
>前面有提到[**算術運算子是什麼**](https://hackmd.io/lSatPl6jTl-doWpR9HsPjg?view#JS%E7%9A%84%E7%AE%97%E8%A1%93%E9%81%8B%E7%AE%97%E5%AD%90%E3%80%81IDE%E7%95%B6%E8%A8%88%E7%AE%97%E6%A9%9F%E7%AE%97)
>而除了用前面的[**賦值運算子**](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E8%B3%A6%E5%80%BC%E9%81%8B%E7%AE%97%E5%AD%90)去優化程式碼以外
>還可以用 `++` 跟 `--` 去優化程式碼

| 算術運算子 | 說明 |
| -------- | -------- |
| **i + +** | 遞增，i=i+1，通常指累次的意思 |
| **i - -** | 遞增，i=i-1 |

> `++` 跟 `--` 常用在迴圈計算較多
> 如果題目或專案未來常用到 `i=i+1;`
> 盡量用 `i++`簡化，這樣程式優化較易讀
### 遞增1、累加1的 <font color=#EA0000>三種寫法</font>

| 遞增1、累加1 | 說明 |
| -------- | -------- |
| **i=i+1;** | **基礎**寫法 |
| **i+=1;** | 用**賦值**運算子簡化 |
| **i++;** | 用**算術**運算子簡化 |

>沒有哪一種最好，依照使用者習慣去編譯
>但是論快速簡潔，`i++` 通常最好去使用

### 小節作業一
:::danger
a為50，需要讓a變為150，怎麼做?

:x: **不能直接賦予值給a**
這樣就跟老師要你計算，結果你抄答案一樣

let a=50;
a=150;
console.log(a);

:heavy_check_mark: **讓程式碼有運算式才正確**
因為專案不一定值會一樣，就跟計算機輸入值，a隨時會變

let a=50;
a+=100;
console.log(a);

:::
### 小節作業二
:::success
**第一題**
「阿貓與阿狗玩棒球，要記錄比分」
流程一：**第一回合，阿貓得 3 分，阿狗得 2 分**
流程二：**第二回合，阿貓得 20 分，阿狗得 3 分**
流程三：**中間有插曲，就是阿貓作弊，第二回合才得 2 分卻謊報 20 分，所以必須扣掉 18 分**
流程四：**第三回合，阿貓得 1 分，阿狗得 7 分**

// 顯示雙方總得分，console 應印出阿貓 6 分、阿狗 12 分
console.log(`總得分：阿貓 ${catScore} 分、阿狗 ${dogScore} 分`);
// 顯示比了幾回合
console.log(`總共比了 ${roundNum} 回合`);

**ANS:**

let roundNum = 0,catScore = 0,dogScore = 0;

roundNum++;    //第一回合
catScore+=3;
dogScore+=2;

roundNum++;    //第二回合
catScore+=20;
dogScore+=3;
catScore-=18;    //插曲，作弊事件

roundNum++;    //第三回合
catScore++;
dogScore+=7;

console.log("總得分:阿貓"+catScore+"分、阿狗"+dogScore+"分");
console.log("總共比了"+roundNum+"回合");

:::

:::success
**第二題** :boxing_glove:鍛鍊，**拆解任務流程** 與 **設定變數**
**「幫媽媽跑腿，紀錄花了多少錢，與跑腿了幾次」**
小明的媽媽請她跑腿，因為小明一天規定自己只能出門三次，所以和媽媽說**最多跑三次腿**，小明媽給了小明**300 元**，請他去**買兩罐牛奶**跟**兩份吐司**，小明到超商後看到**牛奶 30 元**、**吐司 20 元**，當她到櫃台結帳時，櫃台告訴他剛好今天**全部品項都打 5 折** !，買回家後，媽媽發現小明的東西都有買齊，就讓小明去玩耍了。

:exclamation: 請試著拆解流程，並透過註解告知您的解題流程
最後兩行 code 請用 console.log 印出最後小明花完剩下多少錢，以及當天還能跑腿幾次的變數

let legNum=3,budget=300;   //宣告最多跑腿次數、錢包預算
let milkNum=2,toastNum=2,milkPrice=30,toastPrice=20; //商品

legNum--;            //跑一次腿
milkPrice*=0.5;      //半價
toastPrice*=0.5;     //半價
budget-=(milkPrice*milkNum+toastPrice*toastNum); //花費

console.log("小明花完剩下"+budget+"元");    //輸出剩多少
console.log("當天還能跑腿"+legNum+"次");    //輸出還可跑腿幾次

:::

## 字串型別 String
### 字串String是什麼?
>就是一連串的字元。 Ex. abcde
### 字元Char是什麼?
>單一 一個字。 Ex. a
### 宣告字串
>在js當中，沒有特別指定宣告該值為字串
>所以需要用單雙引號去區分字串

let a='string'    //單引號
let b="字串"      //雙引號，大多數都用此

:warning: <font color=#EA0000>**注意**</font> 單雙引號都要成對，不能這樣宣告 `let a='字串";`
### 字串相加 (串字串)

let a="hello";
let b="你好嗎?";

console.log(a+b);    //結果為 hello你好嗎?

#### 產生留白

let a="hello";
let b="你好嗎?";

console.log(a+" "+b);    //結果為 hello 你好嗎?

### 用typeof查變數型別

let a="18";    //字串
let b=18;      //數值

console.log(typeof a);
console.log(typeof b);

### 數值與字串相加

let myname="Shin";
let age=19;

console.log(myname+" is "+age+" years old ");

### 什麼是[NaN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/NaN) (Not a Number)?
>**非數字**，警告字串相加有誤

#### 情況一:

let myname="Shin";
let age=19;

let total=myname*age;    //字串無法跟數值相乘，除非轉型態

console.log(total);

#### 情況二:
[**轉型態函式**](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/parseInt) `parse型態`
Ex. `parseInt`、`parseFloat`


let age="20";
let age2=30;

let total=parseInt(age)+age2;    //age字串轉型態為數值

console.log(total);

### 常見字串處理方法
#### 字串函式
>在程式語言中，**內建了許多功能**，就跟excel一樣
>我們統稱這些功能為**函式**
>前面提到的 `typeof()` ([查型別工具](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/typeof))，也是函式

>簡單來說，就是 **程式語言 寫好的功能funtion**
>然後我們拿來 **方便直譯使用**
##### 字串 長度函數Length
>`變數名稱.length`


let a="abcde";

console.log(a.length);    //字串長度函式運用

##### 去除空白字串 trim()
>`變數名稱.trim()`
>常用在輸入email時，防止他人誤輸入空白，導致找不到該email。


let a=" abcde ";    //左右兩邊有空白字串

console.log(a.length);
console.log(a.trim().length);

### ES6新語法 [樣版字面值 Template literals](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Template_literals)

>原先寫法:

let name="Shin";
let age=19;

console.log("你好~我是"+name+"，今年"+age+"歲");   //加號太多

>樣版字面值:


// `字串${數值}字串${數值}字串`
let name="Shin";
let age=19;

console.log(`你好~我是${name}，今年${age}歲`);  //樣版字面值作法

## 布林Boolean、undefined、null
### [布林Boolean](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Boolean)是什麼?
>用來判斷 true 跟 false 的型別
>電腦**邏輯判斷** 對 與 錯

### <font color=#EA0000>JS獨有</font> (其他程式語言沒有)的
#### 未定義undefined
>**尚未被賦予值**，提示 使用者要 給予值
>**型別**也是**未定義**，因為在**JS**中，**值**才能**定義資料型態**。


let a;    //一般初始值為設，通常a=0;
          //但JS當中，需要後續給予值，才能輸出結果
console.log(a);

#### null
>1. **賦予值** 為 **空資料**
>2. **清空資料**，用來 **釋放記憶體空間**


let a=null;    //賦予值為空資料

console.log(a);

### [轉型態函式](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/parseInt)
>前面有稍微提到，可以[**點此**](https://hackmd.io/lSatPl6jTl-doWpR9HsPjg?view#%E6%83%85%E6%B3%81%E4%BA%8C)回去觀看

>基本上是 `parse型態`

| parse型態 | 說明 |
| -------- | -------- |
| parseInt | 轉為數值 |
| [parseFloat](https://www.itread01.com/p/1341513.html) | 轉為z浮點數 |

#### 字串轉數值 [parseInt](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/parseInt)
>實務上，常用於 **==抓取表單上的資料==** 為 **==字串==** 的情況


let a="1";

console.log(parseInt(a)+1);    

:warning: <font color=#EA0000>**注意**</font>，此方法並不會將 **原先的a資料** 改為 **數值**，只是**輸出時改變形態**

>**若要把==原先資料改變==，需要用==賦予值的方法==**


let a="1";

console.log(parseInt(a)+1);
console.log(typeof(a));

a=parseInt(a);

console.log(typeof(a));

#### 數值轉字串 [.toString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString)
>`變數名稱.toString()`

>實務上，常用於 大樂透號碼、手機號碼 `"07"+"1234567"`


let b=1;

b=b.toString();

console.log(typeof(b));
console.log(b+1);

---