# JS console log / 變數和值概念(var,let,const) /
資料型態(DataType) / 流程控制(if..else,switch) / 迴圈(for,while)
---

### JS撰寫環境方式:

方法一、 F12到檢查程式碼- 主控台 - 即可寫Code

console.log("Helle World")


方法二、 HTML 中創立 script tag，就可以在裡面撰寫code

code:

result:

方法三、 創立一個副檔名為js的檔案，並在HTML下方導入JS檔案(例app.js)，即可在該檔案裡面撰寫code

HTML:


JS:


result:


---

### JS運用

console.log 通常用於檢視程式碼的流程

alert 視窗顯示內容

Comment(註解) : 說明該行或該段code的意義

prompt(輸入)

方式
1. // 內容
2. /* 內容 */

= => 指定 (assign)
== , === => 比較(compare)

---

### 變數

1. 可使用英文和數字，但第一個字元不能是數字
2. 不能使用程式本身內建的保留字 (例: function, if , do...)
3. 大小寫是有差的
:::warning
CamelCase是現在普遍常用的方式。
1. StudentScore // CamelCase
2. studentScore //camelCase
3. student_score // snakecase (Ruby)
:::
5. 宣告方式 let,var (為了解決var變數提昇的問題，而在ES6出了let 的變數宣告方式)

::: info
#### 變數提昇 Variable Hoisting
後面才宣告的情況下前面就先拿來用，結果不會顯示「not defined」則是顯示「undefined」。

JS

console.log(a);
var a;

result

undefined
:::

6. 本身沒有型態
---
### 值(value)

容器中指定的內容

---

### 變數和值的運用

舉例1:

var a = 1;
var b = a;
console.log(b); // 1

b = 2;
console.log(b); // 2
console.log(a); // 1

舉例2:

let a = ["a", "b", "c"];
let b = a;

console.log(a); // ['a', 'b', 'c']
console.log(b); // ['a', 'b', 'c']

a[0] = "x"; // change a[0] value not re-assign a

console.log(a); // ['x', 'b', 'c']
console.log(b); // ['x , 'b', 'c']

舉例3:

let a = 123;
let b = a;

console.log(a, b); // 123,123

a = 456; // re-assign a, b still keep a value
console.log(a, b);// 456,123

:::warning
#### 沒有定義 vs 未定義

1. not defined 沒有定義
2. undefined 有定義但沒有賦予值
:::

---

### 常數
宣告方式 const (通常用全部大寫來命名)，但常數不是不能改值，是不能re-assign

---
let , var, const怎麼選擇?
1. 能用const就用const,不能用const就用let
2. var 也可以用, 但它的範圍比較大
3. 不要沒宣告就使用，會造成全域汙染

---

### 安裝開發工具
1. Babel JavaScript 有更多JS快速tag可以選
2. Prettier 程式碼變好看
:::info
若無法作用的話可參考下方步驟

「設定」→ 右上方「開啟設定」
→ 最下方新增下方程式碼(記得逗號) → 存檔後即可

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier- vscode"
}

:::

4. Meterial Icon Theme 不同檔案類型的icon
5. Live server 存檔即更新code

---

### 資料型態(DataType)
原始型別:數字 字串 布林 空值 未定義 符號
物件型別:陣列 函數 物件
(型態之間是可以做轉換的)

let a = 123; //123
let b = "123"; //"123"
let c = Number("456"); //456
let d = Boolean(0); //false
let e = Number("ccc") // NaN = Not a Number

:::info

#### 看資料型別

console.log(typeof (data))

console.log(typeof 123); //number
console.log(typeof "123"); //string
console.log(typeof true); //boolean
console.log(typeof undefined); //undefined
console.log(typeof []); //object
console.log(typeof null); //object
console.log(typeof Symbol("hello"));//symbol
console.log(typeof NaN); // number

console.log(typeof typeof 123); //string
(等於typeof "number")
:::

### 數字(number)

### a++ vs ++a

a++(限定+1) => a=a+1 => a+=1
:::warning
console.log(a++) //1 (先print再+1)
console.log(a) //2
:::

++a

:::warning
console.log(++a) // 2 (先+1再print)
console.log(a) //2
:::

### 字串(string)

(string).repeat() 可以重複該string的內容，括號內可以輸入重複次數。(0則會輸出空字串)
範例:

let word = "abc";
console.log(word.repeat(2));
--------------------------------
result : abcabc

#### 字串串接
let username = "Albert";

console.log("My name is " + username + " , i am a boy.");
------------------------------------
result: My name is Albert , i am a boy.

``(backtick) 用法

console.log(`My name is ${username} , i am a boy.`);
// My name is Albert , i am a boy.

:::info
### 字串(String)和數字(Number)相加的型態
1 + 1 = 2 // num
3 + '2' = 32 //typeof string (強制轉型 Type Coercion)
'4' + 1 + 2 + '3' = 4123 //typeof string
2 + 3 + '4' + 5 = 545 // typeof string
1 + true = 2 // true 強制轉型成Num
[1,2,3]+[4,5,6] = 1,2,34,5,6 // typeof string
:::warning
字串加上數字會合併成字串(由左至右規則)

:::

### 布林值(boolean)

true , false(0,undifined,null,空字串,NaN)

---

### 流程控制

#### if 和 else (可以用else if 來增加條件)

範例:
若 age <= 10 則顯示Child，age <= 20 則顯示Teenager，若不是則Adult。

if (age <= 10) {
console.log("Child");
} else if (age <= 20){
console.log("Teenager");
}else{
console.log("Adult");
}
---------------------------------------------
三元運算值寫法
age <= 10
? console.log("Child")
: age <= 20
? console.log("Teenager")
: console.log("Adult");

#### switch

範例:
透過gender來判別執行的程式區，若輸入1則選到boy，2則選到girl，都不是則選到None。

let gender = 1;

switch (gender) {
case 1:
console.log("boy");
break;
case 2:
console.log("girl");
break;
default:
console.log("None");
break;
}

:::warning
* 需加break來中止程式，若沒加會無視條件往下執行，直到有break出現。
:::

AND(&&) OR(||) NOT(!)

AND 並且 (有0則0)
OR 或 (有1則1)
NOT 負面表述 (0→1;1→0)

範例:
判斷是不是閏年，條件如下:

公元年分非4的倍數，為平年。
公元年分為4的倍數但非100的倍數，為閏年。
公元年分為100的倍數但非400的倍數，為平年。
公元年分為400的倍數為閏年。

let year = prompt("輸入年份:");

if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
console.log(閏年);
} else {
console.log(平年);
}

### 迴圈 (for vs while)
for(宣告變數;條件;執行後要做的動作)

範例1:
印出1~10

for (let i = 1; i <= 10; i++) {
console.log(i);
}

範例2:
印出1~10的單數

for (let i = 1; i <= 10; i = i + 2) {
console.log(i);
}

---
### 課程資源
1. 瀏覽器語法支援度查詢 https://caniuse.com/

---