Lecture 04 - JavaScript 簡介

使用邏輯積木編程嗎？

真正的程式設計師不這麼做...

真正的程式設計師僅用文字/單字編寫程式碼

程式語言

為什麼我們學習 JavaScript？

對於初學者來說相對容易學習
只需學習一次，可在任何地方使用 (Web / 桌面 / Linux)
在全球具有高度的普及度 https://www.stackscale.com/blog/most-popular-programming-languages/
有龐大的社群支援以及擁有豐富的庫支援 npm

Javascript 可以運行於

🖥 網頁瀏覽器 (使用 V8 引擎)
📱 Android (使用 V8 引擎和瀏覽器)
📲 IOS (使用 V8 引擎和瀏覽器)
🖥 Windows (使用 Nodejs)
💻 MacOS (使用 Nodejs)
🖱 Linux (使用 Nodejs)

幾乎你日常生活中所看到的任何東西都可以運行 JavaScript。

撰寫歡迎程式

app.js

let str = "reemo"
console.log("Hello all");
console.log(str);
console.log("This is " + str);

然後在終端機中輸入 node app.js 以執行腳本。

注意：如果您沒有安裝 nodejs，請立即從 https://nodejs.org/en/ 安裝它。

`console.log();`

這是 JavaScript 中用來列印訊息的基本函數

用法

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 註解

用於解釋代碼，並使其更可讀註解中的代碼將不會運行/執行/編譯

單行註解以 // 開頭。

// I will not run
// console.log("Hello")
// Hello mate

console.log("yo hi")

多行註解以 /* 開頭，以 */ 結尾.

/*
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: 表示條件將不會發生 / 不匹配。

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 !`

其實這是一個現實生活中的簡單問題或邏輯句子。

如果我們要用表示一個條件：

如果(If)今天是星期一，且(and)天氣沒有下雨，那麼我會去彼得家。

在程式語言中，我們會這樣寫：

if(today.day == "monday" && today.weather != "raining"){
    goToPeterHome();
}

為什麼要使用 `and`, `or`, `not`

更複雜的條件可能會像這樣：

這是湯姆。嘿，彼得，我想跟你玩一個遊戲。
從1到6猜一個數字，我會開始擲骰子。

如果數字是偶數且是1或6，你將贏得遊戲。
如果數字是偶數但是是4，你將輸。
但如果數字是奇數，你會輸。
但如果數字是奇數且是3，你將贏得遊戲。

如果你是湯姆，想要跟彼得玩一個遊戲，你會在程式語言中如何寫呢？

samples.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

Operator Short hand 縮寫運算子

Example 範例

Same As 相同於

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 定義變量

var names = "reemo";
let age = 123;
const isMale = true;

一般來說，我們可以使用var、let或const來定義變量。

在大多數情況下（99.99%），由於歷史原因，我們不建議使用var. 了解更多

// <declare_words> <declare_variables_name> = <data_values>
let names = "reemo";
const age = 10;

let是一個定義詞，用於告訴計算機定義一個可更改的變量。
const 也是一樣的，但我們假設使用const定義的變量是在定義之後不能被更改的變量。

`let`

使用let定義的變量可以被重新定義
具有區塊作用域 (block-scope)

let names = "reemo";
console.log(names) // reemo

names = "tom"
console.log(names) // tom

`const`

通常情況下，使用const定義的變量不能被重新定義。
具有區塊作用域 (block-scope)

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。

強等與弱等的例子

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
<: 小於
<=: 小於或等於

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

// 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

let nums = 100;

if(nums > 10){
    nums += 23 // this code will run since 100 > 10 is true
}

console.log(nums) // 123

ifDemoTwo.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

// 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

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

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` 使用

以下代碼邏輯上是不一樣

if(true){
    console.log("I will run yeah 😀")
}

console.log("I will run no matter if() is true or false")

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

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

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

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

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

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

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

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 中，函數也可以像這樣編寫：

let myFunction = (a, b) => a * b;

Lab 01 - 定義變數和類型

Peter 想要定義一些變數，但他不知道該怎麼做。你可以幫他嗎？

定義兩個 let 變數 income 和 outcome，其值分別為 10000 和 4000。
定義兩個 const 變數 names 和 date，其值分別為 "Peter" 和 "2022-03-06"。
定義一個 let 變數 total，它是基於 income - outcome 得出的總數。

lab02-template.js

let someStuff = ...
const someStuffAlso = ...

Lab 02 - 檢查學生階段

編寫一個程序，根據以下要求檢查學生的教育階段：

如果學生的年齡小於5歲，他/她將處於未接受教育狀態。如果學生的年齡在6到12歲之間，他/她將處於小學狀態。如果學生的年齡在13到18歲之間，他/她將處於中學狀態。如果學生的年齡在19到22歲之間，他/她將處於大學狀態。如果學生的年齡大於23歲，他/她將處於工作狀態。

lab02-template.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://js.checkio.org/

https://code.tecky.io/

使用邏輯積木編程嗎？

真正的程式設計師不這麼做...

真正的程式設計師僅用文字/單字編寫程式碼

程式語言

為什麼我們學習 JavaScript？

Javascript 可以運行於

撰寫歡迎程式

console.log();

用法

今天的 JavaScript 課程

JavaScript Comments 註解

常見的資料型別

string

number

number 基本算術運算子

boolean 布爾值

boolean and &&, or ||, not !

為什麼要使用 and &&, or ||, not !

為什麼要使用 and, or, not

在 JS 中的進階資料型別

Assignment Operators 指派運算子

Define a variable 定義變量

let

const

條件語句

比較運算子 ==, ===, !=, !==

Strong compare 強等 和 Weak compare 弱等 ?

數學比較運算子 : >, <, >=, <=

邏輯比較運算子: if , else if, else

if

if 與 else

進階 if 與 else 使用

if 與 else 與 else if

Functions 函数

Functions with params 帶參數的函數

Functions with more params 帶多個參數的函數

Functions return 函數回傳

進階函數：箭頭函數

Lab 01 - 定義變數和類型

Lab 02 - 檢查學生階段

總結

更多練習

更多學習資料

`console.log();`

`string`

`number`

`number` 基本算術運算子

`boolean` 布爾值

`boolean` `and &&`, `or ||`, `not !`

為什麼要使用 `and &&`, `or ||`, `not !`

為什麼要使用 `and`, `or`, `not`

`let`

`const`

比較運算子 `==`, `===`, `!=`, `!==`

`Strong compare 強等` 和 `Weak compare 弱等` ?

數學比較運算子 : `>`, `<`, `>=`, `<=`

邏輯比較運算子: `if` , `else if`, `else`

`if`

`if` 與 `else`

進階 `if` 與 `else` 使用

`if` 與 `else` 與 `else if`