快樂的 JavaScript 啦

Slides

這東西好像不是 Power Point 欸

如何使用 Slides

Title A

Title B

Title C

Title D

Title E

A-1

A-2

B-1

C-1

C-2

D-1

D-2

D-3

E-1

如何使用 Slides

Title A

Title B

Title C

Title D

Title E

A-1

A-2

B-1

C-1

C-2

D-1

D-2

D-3

E-1

如何使用 Slides

Title A

Title B

Title C

Title D

Title E

A-1

A-2

B-1

C-1

C-2

D-1

D-2

D-3

E-1

如何使用 Slides

Title A

Title B

Title C

Title D

Title E

A-1

A-2

B-1

C-1

C-2

D-1

D-2

D-3

E-1

如何使用 Slides

Title A

Title B

Title C

Title D

Title E

A-1

A-2

B-1

C-1

C-2

D-1

D-2

D-3

E-1

如何使用 Slides

Title A

Title B

Title C

Title D

Title E

A-1

A-2

B-1

C-1

C-2

D-1

D-2

D-3

E-1

如何使用 Slides

Title A

Title B

Title C

Title D

Title E

A-1

A-2

B-1

C-1

C-2

D-1

D-2

D-3

E-1

如何使用 Slides

Title A

Title B

Title C

Title D

Title E

A-1

A-2

B-1

C-1

C-2

D-1

D-2

D-3

E-1

如何使用 Slides

Title A

Title B

Title C

Title D

Title E

A-1

A-2

B-1

C-1

C-2

D-1

D-2

D-3

E-1

如何使用 Slides

Title A

Title B

Title C

Title D

Title E

A-1

A-2

B-1

C-1

C-2

D-1

D-2

D-3

E-1

如何使用 Slides

Title A

Title B

Title C

Title D

Title E

A-1

A-2

B-1

C-1

C-2

D-1

D-2

D-3

E-1

如何使用 Slides

Title A

Title B

Title C

Title D

Title E

A-1

A-2

B-1

C-1

C-2

D-1

D-2

D-3

E-1

如何使用 Slides

Title A

Title B

Title C

Title D

Title E

A-1

A-2

B-1

C-1

C-2

D-1

D-2

D-3

E-1

關於這堂課

你 (大概) 可以學到的東西

JavaScript

什麼是 JavaScript 呢？

一種程式語言
有很多內建的強大功能

那它可以做什麼呢？

Discord Bot
架伺服器
算數學
其他可大可小的專案……

JS 語法速成班

這章要講完基礎中的基礎中的基礎

我們要做什麼

如果你對程式有一點理解的話
你就會知道我們一定是要

先來 "Hello World!" 一下

但如果你對程式一無所知
我可能就要來解釋一下了

就來解釋一下吧

嗯嗯沒錯

結果還是沒解釋

一個小物件

正式的解說：

我們今天要顯示

在螢幕上

Hello World!

要怎麼用程式達到這個目的呢？

程式碼

顯然不是這樣

欸你給我顯示 Hello World 在螢幕上喔！

Please print Hello World on screen, thank you.

也不是這樣

程式碼

Hello World!

顯然不是這樣

欸你給我顯示 Hello World 在螢幕上喔！

Please print Hello World on screen, thank you.

也不是這樣

我要輸出的東西

拿去輸出

程式碼

Hello World!

我要輸出的東西

拿去輸出

程式碼

物件

函數

也是物件

Hello World!

就是可以隨便丟來丟去的東西

程式碼

物件

函數

Hello World!

程式碼

函數

"Hello World!"

物件 - 字串

程式碼

"Hello World!"

物件 - 字串

輸出的函數 - console.log( )

程式碼

console.log("Hello World!")

等等目前好像只是紙上談兵

馬上實測

這裡有一個連結

可以線上編輯 & 看結果

分號

你可以想像一下假設今天我在這邊講話然後就像是你現在看到的這樣我都不使用
標點符號沒錯一個都不用這樣會造成什麼效果呢就是你雖然看得懂我在講什麼但
是這樣顯然很爛溝通效率會降低非常多於是我們還是使用標點符號會比較好的啦

分號，就是個標點符號，告訴電腦說

「欸這是兩個指令，你不要把他連在一起喔」

但是！

寫 JavaScript 是像 C++ 一樣要加分號，還是 Python 一樣不用加呢？

上一章節最後感覺有點玄對吧

為什麼有分號
那個 node ... 是啥
還有 console.log 又為什麼是 console.log

自動分號

JavaScript 很聰明，如果你把兩個指令放在不同行，它會自動加上分號！

console.log("Hello!"); console.log("World!");

合法！

console.log("Hello!")
console.log("World!")

也合法！

不過還是建議加一下分號，比較不會出事

console.log("Hello!");
console.log("World!");

Console 是什麼

Console in JavaScript

物件

console

error(   )

warn(   )

log(   )

console.error(   )

console.warn(   )

console.log(   )

寫法就長這樣

物件中的函數：方法

函數

一個函數的程式碼長這樣：

function (x, y, z) {
    console.log("...")
}

但上面這樣就好像是你製作了一隻機器人

但是沒取名字，然後隨便地放在旁邊，什麼用都沒有！

函數就像一隻機器人，會拿一些東西去做事情，然後回報結果給你

那當然也可以不拿任何東西就去做事情，也可以沒有回報任何結果

其他東西

← x, y, z 是傳入值

← 被呼叫時要執行的程式碼

函數

一個函數的程式碼長這樣：

function (x, y, z) {
    // do something
}

但上面這樣就好像是你製作了一隻機器人

但是沒取名字，然後隨便地放在旁邊，什麼用都沒有！

函數就像一隻機器人，會拿一些東西去做事情，然後回報結果給你

那當然也可以不拿任何東西就去做事情，也可以沒有回報任何結果

其他東西

這種想像有一個東西在那邊的概念

其實還有很多種其他東西

520.1314

例如這是一個數字

"Never gonna"

例如這是一個字串

直接這樣寫就什麼事都不會發生

變數

宣告一個變數：

var a = "Hi!"

console.log(a)

然後你就可以存取它：

var a = 20

那函數怎麼宣告呢？

宣告函數

可以存在一個變數中：

var test = function () {
  console.log("Test")
}

或者直接這樣寫比較短：

function test() {
  console.log("Test")
}

布林值與條件判斷

布林值就是只有這兩種值：

var isHappy = true

var isHappy = false

↑ isHappy 是真的

↑ isHappy 是假的

你可以把它放在 if 中來判斷條件是否通過：

if (isHappy) {
  console.log("I'm happy!")
}
else {
  console.log("I'm not happy")
}

關於 if & else

1. 不一定要有 else

if (condition) {
  // do something
}

這樣如果條件沒有通過就什麼事都不會做

2. 只有一行時可以省略大括號

if (condition)
  console.log("Cool")

關於 if & else

1. 不一定要有 else

if (condition) {
  // do something
}

這樣如果條件沒有通過就什麼事都不會做

2. 只有一行時可以省略大括號

if (condition)
  console.log("Cool")

所以可以實作 else if

if (condition) {
  
}
else {
  if (another) {
      
  }
  else {
    
  }
}

if (condition) {
  
}
else
  if (another) {
      
  }
  else {
    
  }

if (condition) {
  
}
else if (another) {
      
}
else {
    
}

運算

完全就跟你的直覺一樣：

(2 + 3) * 6 - 2 / 8

← 就是 \(29.75\)

比較難的可能就是取餘數：

100 % 17

← \(100\) 除以 \(17\) 的餘數，是 \(15\)

縮短

如果你想要：

a = a + 2

a += 2

那你可以寫成：

如果你想要：

a += 1

a++

那你可以寫成：

然後這傢伙可以寫在前面，但效果不太一樣：

var a = 10;
var b = a++;
// a == 11 && b == 10

var a = 10;
var b = ++a;
// a = 11 && b == 11

但你基本上不會這樣寫

實作時間

題目 1: 請寫出一個函數，可以傳入一個值 \(x\)，並輸出 \(x^2+2x+1\)

題目 2: 請寫出一個函數，可以傳入兩個值 \(x\) 和 \(y\)，並輸出 x 是否大於 y (Yes / No)

實作時間

題目 1: 請寫出一個函數，可以傳入一個值 \(x\)，並輸出 \(x^2+2x+1\)

題目 2: 請寫出一個函數，可以傳入兩個值 \(x\) 和 \(y\)，並輸出 \(x\) 是否大於 \(y\) (Yes / No)

function main(x) {
  console.log(x * x + 2 * x + 1)
}

function main(x, y) {
  if (x > y) {
    console.log("Yes")
  }
  else {
    console.log("No")
  }
}

實作時間

題目 1: 請寫出一個函數，可以傳入一個值 \(x\)，並輸出 \(x^2+2x+1\)

題目 2: 請寫出一個函數，可以傳入兩個值 \(x\) 和 \(y\)，並輸出 \(x\) 是否大於 \(y\) (Yes / No)

function main(x) {
  console.log(x * x + 2 * x + 1)
}

function main(x, y) {
  if (x > y)
    console.log("Yes")
  else
    console.log("No")
}

While 迴圈

如果條件符合就一直重複執行

while (condition) {
  
}

do {
  
}
while (condition);

For 迴圈

用來走遍某一段區間的東西

for (start; end; step) {
  
}

← 這三個都是要放程式碼，以分號分隔

for (var i = 0; i < 20; ++i) {
  
}

實作時間

題目 1: 請寫出一個函數，可以傳入兩個值 \(a\) 和 \(b\)

並輸出符合 \(a \leq x < b\) 的所有數字

function main(a, b) {
  for (var i = a; i < b; ++i) {
    console.log(i);
  }
}

Class

class person {
  weight;
  height;
  
  constructor (height, weight) {
    this.height = height;
    this.weight = weight;
  }
  
  calculateBMI() {
    return this.weight / Math.pow(this.height / 100, 2);
  }
}

Array

語法：中括號

var a = [ "iron_sword", "golden_apple", "water_bucket" ];

console.log(a[2]); // "water_bucket"

a.push("shield");

console.log(a.length); // 4

Object

語法：大括號

var a = {
  "health": 20,
  hungerLevel: 18,
  saturationLevel: 6
};

console.log(a.health); // 20

console.log(a["hungerLevel"]); // 18

Node.JS

神奇綠色六邊形

Node.js

解釋一下這個 Node 是什麼

Node.js

接下來要解釋一下那個 Node 是什麼了

反正先下載再說嘛！

Node.js 就是一個可以讓你直接在電腦終端機跑 JavaScript 的東西

Node.js

接下來要解釋一下那個 Node 是什麼了

Node.js 就是一個可以讓你直接在電腦終端機跑 JavaScript 的東西

等等……那 JavaScript 還可以在哪裡跑？

反正先下載再說嘛！

前端網頁

「超文本標記語言」

以不同標籤撰寫

用來表示網頁中有不同元件

<div class="box" onclick="fun()">
    <a>Click me!</a>
    <br>
    <a>Or me!</a>
</div>

「階層樣式表」

選取不同 html 元件

表示樣式、動畫等等

.box {
    padding: 20px;
    font-size: 64px;
    background-color: lightblue;
}

又稱作 ECMA Script

可以增加網頁的互動

但在網頁中只有前端而已

function fun() {
    alert("Hello!"); 
    alert("Nice to meet you!"); 
}

前端 / 後端

剛才講的都是前端網頁，那後端呢？

其實可以用 Node.js 架後端伺服器喔

前端：

一些漂亮、整理好的東西
要傳達給使用者看的東西

後端：

資料庫處理
很麻煩我不太會用

不是啊那太難了改天再講啦

非同步的動畫先暫時放這

但其實蠻亂的啦

漢堡

我剛才講了非同步

本來就不太好理解

何況只有一堆程式碼

所以我要舉個例子

比方說我們來做個漢堡 🍔

Overcooked...

做漢堡

切菜

煮肉

做漢堡

切菜

煮肉

高

麗

菜

切

好

的

菜

所

有

食

材

生

豬

肉

煮

好

的

肉

漢

堡

做漢堡

切菜

煮肉

做漢堡

切菜

煮肉

等肉和菜做好才結束！

回來看 code

一個人做漢堡，同步的做法：

function cut(thing) {
    // 略
    return thing;
}

function fry(thing) {
    // 略
    return thing;
}

function makeHamburger(vegetable, meat, bread) {
    var cutVegetable = cut(vegetable);
    var friedMeat    = fry(meat);
    
    return bread + cutVegetable + friedMeat;
}

makeHamburger();

回來看 code

三個人做漢堡，非同步的做法：

async function cut(thing) {
    // 略
    return thing;
}

async function fry(thing) {
    // 略
    return thing;
}

async function makeHamburger(vegetable, meat, bread) {
    var cutVegetable = await cut(vegetable);
    var friedMeat    = await fry(meat);
    
    return bread + cutVegetable + friedMeat;
}

makeHamburger();

回來看 code

好像不太對！

這樣寫的話應該是：

    var cutVegetable = await cut(vegetable);
    var friedMeat    = await fry(meat);

（等待）

煮肉

切菜

做漢堡

好像跟同步的一樣？

Promise

非同步的東西會回傳一個 Promise

……承諾？

回去看一下一開始的輸入：

const std = require("stdio");

function main() {
    const NAME = std.ask("Your name");
    console.log("Hello, " + NAME + "!");
}

main();

Your name: Hello, [object Promise]!

正解：

const std = require("stdio");

async function main() {
    const NAME = await std.ask("Your name");
    console.log("Hello, " + NAME + "!");
}

main();

Your name: Huey☆   
Hello, Huey☆!

結果：

（上面那行的 Huey☆ 是我輸入的）

Promise 帶有它的狀態，比方說：

當還沒完成處理時是 Promise { <pending> }

完成時可能是 Promise { 結果 }

若使用 await 等待它，就會直接回傳值

var a = myAsyncFunction()
// a 現在是 Promise { <pending> }

// 過了 10 秒以後
// a 是 Promise { 0 }

假設今天我有一個 10 秒後會回傳 0 的函數：

var b = await myAsyncFunction()
// 等待十秒後，b 是 0

同時做，一起等？

剛才那樣是先發派去切菜，等菜切完，再發派去煮肉

var cutVegetable = await cut(vegetable);
var friedMeat    = await fry(meat);

var promise1 = cut(vegetable);
var promise2 = fry(meat);

var cutVegetable = await promise1;
var friedMeat    = await promise2;

應該要兩邊都先法派去工作，然後等待兩個人做完

Promise

Value

同時做，一起等？

剛才那樣是先發派去切菜，等菜切完，再發派去煮肉

var cutVegetable = await cut(vegetable);
var friedMeat    = await fry(meat);

var promise1 = cut(vegetable);
var promise2 = fry(meat);

var cutVegetable = await promise1;
var friedMeat    = await promise2;

應該要兩邊都先法派去工作，然後等待兩個人做完

Value

Promise

JavaScript

Slides

如何使用 Slides

如何使用 Slides

如何使用 Slides

如何使用 Slides

如何使用 Slides

如何使用 Slides

如何使用 Slides

如何使用 Slides

如何使用 Slides

如何使用 Slides

如何使用 Slides

如何使用 Slides

如何使用 Slides

推薦的順序

關於這堂課

JavaScript

JS 語法速成班

我們要做什麼

一個小物件

程式碼

程式碼

程式碼

程式碼

程式碼

程式碼

程式碼

程式碼

馬上實測

分號

自動分號

Console 是什麼

Console in JavaScript

函數

其他東西

函數

其他東西

變數

宣告函數

布林值與條件判斷

關於 if & else

關於 if & else

運算

縮短

實作時間

實作時間

實作時間

While 迴圈

For 迴圈

實作時間

Class

Array

Object

Node.JS

Node.js

Node.js

Node.js

前端網頁

前端網頁

前端 / 後端

非同步的動畫先暫時放這

漢堡

回來看 code

回來看 code

回來看 code

同時做，一起等？

同時做，一起等？

快樂的 JavaScript 啦

More from 晴☆