# Lecture 04 - JavaScript 簡介
## 使用邏輯積木編程嗎？
***
### 真正的程式設計師不這麼做...
***
### 真正的程式設計師僅用文字/單字編寫程式碼
***
### 程式語言
***
***
## 為什麼我們學習 JavaScript？
* 對於初學者來說相對容易學習
* 只需學習一次，可在任何地方使用 (Web / 桌面 / Linux)
* 在全球具有高度的普及度
* 有龐大的社群支援以及擁有豐富的庫支援 `npm`
### Javascript 可以運行於
* 🖥 網頁瀏覽器 (使用 V8 引擎)
* 📱 Android (使用 V8 引擎和瀏覽器)
* 📲 IOS (使用 V8 引擎和瀏覽器)
* 🖥 Windows (使用 Nodejs)
* 💻 MacOS (使用 Nodejs)
* 🖱 Linux (使用 Nodejs)
幾乎你日常生活中所看到的任何東西都可以運行 JavaScript。
***
### 撰寫歡迎程式
`app.js`
```js
let str = "reemo"
console.log("Hello all");
console.log(str);
console.log("This is " + str);
```
然後在終端機中輸入 node app.js 以執行腳本。
**注意**：如果您沒有安裝 nodejs，請立即從 安裝它。
***
### `console.log();`
這是 JavaScript 中用來列印訊息的基本函數
#### 用法
```js
console.log("Hello world"); // "Hello world"
console.log("Hello " + "Peter"); // "Hello Peter"
console.log("Hello", "Peter"); // "Hello May"
console.log(100); // 100
console.log(100 + 45); // 145
```
***
## 今天的 JavaScript 課程
* 資料類型 Data Types
* 算術運算子 Arithmetic Operators
* 賦值運算子 Assignment Operators
* 定義變數 Define variables
* 條件語句 Conditional Statements
* 比較語句 Compare Statements
* 函式 Functions
## JavaScript Comments 註解
> 用於解釋代碼，並使其更可讀 註解中的代碼將不會運行/執行/編譯
單行註解以 `//` 開頭。
```js
// I will not run
// console.log("Hello")
// Hello mate
console.log("yo hi")
```
多行註解以 `/*` 開頭，以 `*/` 結尾.
```js
/*
Hello
This is multi-line comments
I can contain a lot of stuff
in the same block
console.log("Yoooo")
*/
console.log("mate")
```
## 常見的資料型別
* `string` 字串型別，例如 `"Hello"`, `"Good day"`, `"I go to school by bus"`
* `number` 數值型別，例如 `12`, `-3`, `32.476`, `0x012`, `11010010`
* `boolean` 布林型別，例如 `true`, `false`
***
### `string`
顯示常見的字串 / 字元
* `"Hello world"`, `"a"`, `"😀"` (Using " ) （使用雙引號）
* `'Hello mate'`, `'b'`, `'😍'` (Using ' ) （使用單引號）
* `` `Hello mom` ``, `` `c` ``, `` `😎` `` (Using \` ) （使用反引號）
***
### `number`
代表數學運算中的數值資料型別 ( `+`, `-`, `*`, `/`, `%` )
* Integer 整數: `1`, `384`
* Signed Integer 有正負號的整數: `1`, `384`, `-43`
* Float / Double 浮點數 / 雙精度浮點數: `1.23`, `-34.3423`, `0.001` (Float 浮點數 = 單精度，Double 雙精度浮點數 = 雙精度)
* Infinity 無限大: `infinity`, `-infinity`
***
### `number` 基本算術運算子
* `+` : Addition 加法 (e.g. `3 + 5 = 8`)
* `-` : Subtraction 減法 (e.g. `8 - 2 = 6`)
* `*` : Multiplication 乘法 (e.g. `3 * 4 = 12`)
* `/` : Division 除法 (e.g. `10 / 5 = 2`, `14 / 5 = 2.8`)
通常在一般情況下使用的
* `**` : 指數運算 Exponentiation ( `2^3` => `2**3` )
* `%` : 取模運算 / 求餘數 Modulus / Remainder ( `5 % 2 == 1`, `10 % 2 == 0` )
通常在循環中使用的
(將在下一課中介紹更多)
* `++` : 自增 (`i++`)
* `--` : 自減 (`i--`)
***
### `boolean` 布爾值
它是一種用於確定條件是否發生的數據類型。在此數據類型中，僅出現 `true` 和 `false`。
* `true`: 表示條件將發生 / 匹配。
* `false`: 表示條件將不會發生 / 不匹配。
***
```js
13 == 100 // Is 13 equal to 100 ? false
100 > 50 // Is 100 bigger than 50 ? true
0 < 2 // Is 0 smaller than 2 ? true
"tom" == "hello tom" // Is "tom" equal to "hello tom" ? false
"apple" == "apple" // Is "apple" equal to "apple" ? true
```
### `boolean` `and &&`, `or ||`, `not !`
在所有的程式語言中，幾個符號代表邏輯運算。
* `and` : 使用 `&&`
* `or` : 使用 `||`
* `not` : 使用 `!`
***
1 = true, 0 = false
* `and` : 表示**兩個條件**都成立時，會回傳 true。
* `or` : 表示**其中一個條件**成立時，會回傳 true。
* `not` : 反轉條件 (`!true => false`, `!false => true`)
***
### 為什麼要使用 `and &&`, `or ||`, `not !`
其實這是一個現實生活中的簡單問題或邏輯句子。
如果我們要用表示一個條件：
```md
如果(If)今天是星期一，且(and)天氣沒有下雨，那麼我會去彼得家。
```
在程式語言中，我們會這樣寫：
```js
if(today.day == "monday" && today.weather != "raining"){
goToPeterHome();
}
```
***
### 為什麼要使用 `and`, `or`, `not`
更複雜的條件可能會像這樣：
```md
這是湯姆。嘿，彼得，我想跟你玩一個遊戲。
從1到6猜一個數字，我會開始擲骰子。
如果數字是偶數且是1或6，你將贏得遊戲。
如果數字是偶數但是是4，你將輸。
但如果數字是奇數，你會輸。
但如果數字是奇數且是3，你將贏得遊戲。
```
如果你是湯姆，想要跟彼得玩一個遊戲，你會在程式語言中如何寫呢？
`samples.js`
```js
// let's assume this function will return a random number of 1 to 6
let diceNumber = randomDiceNumber();
if(diceNumber % 2 == 0 && diceNumber == 4){
lose()
}
else if(diceNumber % 2 == 0 && (diceNumber == 1 || diceNumber == 6)){
win()
}
else if(diceNumber % 2 == 1 && diceNumber == 3){
win()
}
else if(diceNumber % 2 == 1){
lose()
}
```
***
## 在 JS 中的進階資料型別
（本課程中不會涵蓋，但在未來很重要）
**常用的**
* `物件（Object）` and `陣列（Array）`
* `Null` and `未定義（Undefined）`
**進階的**
* `錯誤（Error）`
* `日期（Date）`
* `映射（Map）` and `集合（Set）`
* `類別（Class）`
***
## Assignment Operators 指派運算子
| Operator Short hand 縮寫運算子 | Example 範例 | Same As 相同於 |
| ------------------------- | ---------- | ------------ |
| = | x = y | 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 |
| \*\*= | x \*\*= y | x = x \*\* y |
***
## Define a variable 定義變量
```js
var names = "reemo";
let age = 123;
const isMale = true;
```
一般來說，我們可以使用`var`、`let`或`const`來定義變量。
在大多數情況下（99.99%），由於歷史原因，我們不建議使用`var`. [了解更多](https://medium.com/@codingsam/awesome-javascript-no-more-var-working-title-999428999994)
```js
// =
let names = "reemo";
const age = 10;
```
* `let`是一個定義詞，用於告訴計算機定義一個可更改的變量。
* `const` 也是一樣的，但我們假設使用`const`定義的變量是在定義之後不能被更改的變量。
***
### `let`
1. 使用`let`定義的變量可以被重新定義
2. 具有區塊作用域 (block-scope)
```js
let names = "reemo";
console.log(names) // reemo
names = "tom"
console.log(names) // tom
```
***
### `const`
1. 通常情況下，使用`const`定義的變量不能被重新定義。
2. 具有區塊作用域 (block-scope)
```js
const names = "reemo";
console.log(names) // reemo
names = "tom" // Cannot assign to 'names' because it is a constant.
console.log(names) // error: Uncaught TypeError: Assignment to constant variable.
```
在像`array`和`object`這樣的數據類型中使用`const`有例外情況，但我們首先假設所有`const`變量都不能被重新分配。
***
## 條件語句
* Compare 比較運算子: `==`, `===`, `!=`, `!==`
* For Maths 數學運算子: `>`, `<`, `>=`, `<=`
* Logics 邏輯運算子: `if` , `else if`, `else`
***
## 比較運算子 `==`, `===`, `!=`, `!==`
* `==`: 弱等於
* `===`: 強等於
* `!=`: 弱不等於
* `!==`: 強不等於
## `Strong compare 強等` 和 `Weak compare 弱等` ?
* `Strong` 意味著不僅值相同，而且數據類型也需要匹配。
* `Weak` 意味著如果值相同（無論是字符串還是數字），且內容相同，則返回 true。
***
`強等與弱等的例子`
```js
let num = 100; // type: number
let stringNum = "100" // type: string
console.log( num == stringNum ) // Weak compare: true
console.log( num === stringNum ) // Strong compare: false
```
注意事項：在這個例子中，`num` 是一個 `number` 的資料型態，但是 `stringNum` 是一個 `string` 的資料型態，儘管兩者都代表了 `100`。
如果不確定要使用哪種比較類型，總是使用強比較 `===` `!==` 來確保安全。
## 數學比較運算子 : `>`, `<`, `>=`, `<=`
* `>`: 大於
* `>=`: 大於或等於s
* `<`: 小於
* `<=`: 小於或等於
```js
10 > 6 // true
5 < 89 // true
10 > 10 // false, why? Since 10 is not bigger than 10, is equal to 10
10 >= 10 // true
```
***
## 邏輯比較運算子: `if` , `else if`, `else`
內部程式碼將在條件滿足時運行
* `if(){}` 如果條件成立，運行這個區塊的程式碼。
* `else if(){}` 如果前面的條件不成立，則檢查這個條件，如果成立，運行這個區塊的程式碼。
* `else{}` 如果前面的所有條件都不成立，則運行這個區塊的程式碼。
## `if`
`demo.js`
```js
// Only the conditions between the () are true, the under code will run
if(true){
console.log("I will run yeah 😀")
}
if(false){
console.log("I will NOT run oh no 😥")
}
```
`ifDemo.js`
```js
let nums = 100;
if(nums > 10){
nums += 23 // this code will run since 100 > 10 is true
}
console.log(nums) // 123
```
`ifDemoTwo.js`
```js
let nums = 5;
if(nums > 10){
nums += 23 // this code will NOT run since 5 > 10 is false
}
console.log(nums) // 5
```
***
## `if` 與 `else`
`demo.js`
```js
// If the conditions in `if` is false, it will run the else code sections
if(false){
console.log("I will NOT run oh no 😥")
}
else{
console.log("I will run yeah 😀")
}
```
`ifElseDemo.js`
```js
let nums = 20;
if(nums > 10){
nums += 23 // if the nums > 10 is true, this line will run
}
else{
nums -= 10 // if the nums > 10 is false, this line will run
}
console.log(nums) // 43
```
`ifElseTwoDemo.js`
```js
let nums = 5;
if(nums > 10){
nums += 23 // if the nums > 10 is true, this line will run
}
else{
nums -= 10 // if the nums > 10 is false, this line will run
}
console.log(nums) // -5
```
***
## 進階 `if` 與 `else` 使用
以下代碼邏輯上是不一樣
```js
if(true){
console.log("I will run yeah 😀")
}
console.log("I will run no matter if() is true or false")
```
```js
if(false){
console.log("I will run yeah 😀")
}
else{
console.log("I will run But only if() is false")
}
```
***
## `if` 與 `else` 與 `else if`
`ifElseDemo.js`
```js
let nums = 50;
if(nums == 10){
console.log("I am a 10")
}
else if(nums == 20){
console.log("I am a 20")
}
else{
console.log("nope") // This line will printed
}
// "nope"
```
***
`ifElseDemo.js`
```js
let nums = 10;
if(nums == 10){
console.log("I am a 10") // This line will printed
}
else if(nums == 20){
console.log("I am a 20")
}
else{
console.log("nope")
}
// "I am a 10"
```
***
`ifElseDemo.js`
```js
let nums = 20;
if(nums == 10){
console.log("I am a 10")
}
else if(nums == 20){
console.log("I am a 20") // This line will printed
}
else{
console.log("nope")
}
// "I am a 20"
```
## Functions 函数
函數是一個為了完成特定任務而設計的代碼塊。
`basic-function.js`
```js
function myFunctionName(){
// Stuff to do when this function is called.
console.log("Hello mate.")
}
myFunctionName() // calling the function
```
***
### Functions with params 帶參數的函數
函數可以傳入參數，以便重複使用。
`basic-function-params.js`
```js
function greetings(names){
// Stuff to do when this function is called.
console.log("Hello " + names)
}
greetings("peter") // Hello peter
greetings("tom") // Hello tom
```
***
### Functions with more params 帶多個參數的函數
函數也可以傳入很多參數。
`basic-function-params.js`
```js
function greetings(names, ages){
// Stuff to do when this function is called.
console.log("Hello " + names)
console.log("Are you the age of " + ages + " ?")
}
greetings("peter", 18) // Hello peter / Are you the age of 18 ?
greetings("tom", 33) // Hello tom / Are you the age of 33 ?
```
***
### Functions return 函數回傳
函數可以回傳 `return` 一個值，讓其他變數使用。
`function-return.js`
```js
function returnSentences(names){
let sentences = "Hello " + names;
return sentences
}
let myNameSentences = returnSentences("peter"); //myNameSentences = "Hello peter"
console.log(myNameSentences); // "Hello peter"
console.log(returnSentences("tom")); // "Hello tom"
```
### 進階函數：箭頭函數
在 JavaScript 中，函數也可以像這樣編寫：
```js
let myFunction = (a, b) => a * b;
```
## Lab 01 - 定義變數和類型
Peter 想要定義一些變數，但他不知道該怎麼做。你可以幫他嗎？
1. 定義兩個 `let` 變數 `income` 和 `outcome`，其值分別為 `10000` 和 `4000`。
2. 定義兩個 `const` 變數 `names` 和 `date`，其值分別為 "Peter" 和 "2022-03-06"。
3. 定義一個 `let` 變數 `total`，它是基於 `income - outcome` 得出的總數。
`lab02-template.js`
```js
let someStuff = ...
const someStuffAlso = ...
```
## Lab 02 - 檢查學生階段
編寫一個程序，根據以下要求檢查學生的教育階段：
如果學生的年齡小於5歲，他/她將處於`未接受教育`狀態。 如果學生的年齡在6到12歲之間，他/她將處於`小學`狀態。 如果學生的年齡在13到18歲之間，他/她將處於`中學`狀態。 如果學生的年齡在19到22歲之間，他/她將處於`大學`狀態。 如果學生的年齡大於23歲，他/她將處於`工作`狀態。
***
`lab02-template.js`
```js
function calculateAgeStatus(age){
console.log(age)
// your code
}
// Testing
calculateAgeStatus(4) // 未接受教育
calculateAgeStatus(59) // 工作
calculateAgeStatus(16) // 中學
calculateAgeStatus(8) // 小學
calculateAgeStatus(21) // 大學
```
## 總結
我們學習了以下內容：
* 執行 `app.js`
* 用 `console.log` 輸出變量
* 資料型別 `string`, `number`, `boolean`
* 算術運算符 `++`, `*`, `/` 等等
* 賦值運算符 `=`, `+=`, `*=`, `/=` 等等
* 定義變量 `let`, `const`, `var`
* 條件語句 `if`, `else`
* 比較語句 `==`, `===`, `<=` 等等
* 函數 `function add(a,b){ return a + b }`
***
## 更多練習
[https://code.tecky.io/ ]()
#### 更多學習資料
在本課程中，我們沒有涉及以下內容：
* Object, Array, for loop (物件、陣列、for 迴圈)
* Array Looping (for, while) (陣列迴圈 (for, while))
* Scope (作用域)
但如果有興趣，您可以自行閱讀 `lecture-ex1` 的內容。
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://reemo.gitbook.io/life-is-possible-web-apps-workshop-sheng-ming-jiao-yu-shou-ji-cheng-shi-gong-zuo-fang/lecture-chinese/lecture-04-javascript-jian-jie.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.