JavaScript

— 建資外交長兼學術 張雲淞

DC Bot

&

第四堂 範例程式碼

環境配置

複習

輸出、資料型別與變數、運算式與運算子、流程判斷與迴圈

js 是什麼

輸出

console.log("Hello World");

控制台

Console (Object)

.log()

log (Methods)

行末加分號

資料型別

型別 簡述
布林值 (Boolean) 是 (true)、否 (false)，1 和 0 的概念
數字 (Number) 包含整數和浮點數，以及 NaN、Infinity
字串 (String) 文字資料，用 "雙引號" 或 '單引號' 包裹

變數

  • 存放資料（特定資料型別，如數字）並使用
  • 和數學的假設變數意義類似
let infor = 38;
console.log(infor); // output: 38

let izcc;
izcc = 117;
console.log(izcc); // output: 117

const cmioc = 32;
console.log(cmioc); // output: 32

1. let

2. const

Constant 常數

不可被修改

變數

  • 命名規則：開頭不可是數字，符號可用 _, $，其餘可用英文大小寫或數字，不可用保留字
  • 名稱區分大小寫

運算式與運算子

賦值運算子

e.g. =、+=

比較運算子

e.g. >、<=、==

算術運算子

e.g. +、-、*、/、

++、--、**

邏輯運算子

e.g. &&、||、!

字串運算子

e.g. +

流程判斷

if (condition) {
    do
}
if (condition) {
    do
} else {
    do
}
if (condition) {
    do
} else if {
    do
} else {
    do
}

🍊

迴圈

for (let i=0; i<6; i++) {
    console.log(i);
}
/* output: 
 * 0
 * 1
 * 2
 * 3
 * 4
 * 5
 */

型別判斷

typeof、資料型別補充

型別判斷

  • 判斷資料的型別
console.log(typeof 52); // output: "number"
console.log(typeof "字串"); // output: "string"
console.log(typeof NaN); // output: "number"

型別判斷

  • 判斷資料的型別
型別 typeof
Boolean "boolean"
Number "number"
String "string"
Undefined "undefined"
Null "object"

型別判斷

  • 比較運算子的補充：==、===

鬆散比較 (==)

loose equality

console.log(1 == "1"); // true
console.log(0 == false); // true
console.log(undefined == null); // true

型別判斷

  • 比較運算子的補充：==、===

嚴格比較 (===)

strict equality

console.log(1 === "1"); // false
console.log(0 === false); // false
console.log(undefined === null); // false

型別判斷

  • 比較運算子的補充：==、===

嚴格比較 (===)

strict equality

鬆散比較 (==)

loose equality

比較前會強制轉換型別

型別、值皆相同才會成立

運算子特性

各種神奇特性

一張梗圖

精度問題

  • 浮點數以二進制無法正常運算，會產生無窮迴圈
  • 記憶體有限，以致運算出現誤差

精度問題

0.1

0.0001100110011001100110011001100110011001100110011001101

0.2

0.001100110011001100110011001100110011001100110011001101

0.1+0.2

0.0100110011001100110011001100110011001100110011001100111

只取到小數點後 52 位，轉換十進制後為

0.30000000000000004

Math Max/Min

  • Math Max/Min 可用於得到一組數字的最大/小值
console.log(Math.max(-1, -3, -2)); //  output: -1
console.log(Math.min(-1, -3, -2)); //  output: -3

Math Max/Min

  • 原理類似於：

逐個值偵測是否比前一個值大/小，若成立則取代回傳值，最後輸出結果

let 目前最大值 = -Infinity;
for (逐一檢查每個值) {
    如果值比目前最大值大 {
        最大值 = 值;
    }
}
回傳目前最大值;

Math Max/Min

  • 原理類似於：

逐個值偵測是否比前一個值大/小，若成立則取代回傳值，最後輸出結果

函式有一個一定比任何值都小/大的「初始值」

Infinity/-Infinity

物件

陣列

物件

陣列 (Array)

  • 存放多個值
  • 例如：一個人多次考試的成績清單
let a = 45;
let b = 41;
let c = 98;
let d = 100;
let score = [45, 41, 98, 100];

物件

陣列 (Array)

let score = [45, 41, 98, 100];

定義變數

陣列

以中括號包裹，逗號分隔

物件

陣列操作方式：讀取、push、unshift

let score = [45, 41, 98, 100];
console.log(score[2]); // 讀取值（陣列名稱[索引值]，索引值從0開始）
score.push(70); // 插入新的值到最後
console.log(score); // output: [45, 41, 98, 100, 70]
score.unshift(21); // 插入新的值到最前
console.log(score); // output: [21, 45, 41, 98, 100, 70]

物件

陣列操作方式：pop、shift

let score = [45, 41, 98, 100];
score.pop(); // 刪除最後一個值
console.log(score); // output: [45, 41, 98]
score.shift(21); // 刪除第一個值
console.log(score); // output: [41, 98]

物件

陣列操作方式：length

let score = [45, 41, 98, 100];
console.log(score.length); // 陣列長度，output: 4

實作練習

迴圈、陣列

實作練習

迴圈、陣列

有一個陣列中，是某人的多次考試成績，請利用迴圈和陣列進行運算，算出他的總分、平均分數，以及中位數、最大值。

例如

考試成績：[61, 45, 41, 61, 62]

則輸出 270、54、53、62

物件

物件

物件

物件 (Object)

  • 存放一個物件和它的各種屬性
let user = {
	name : 'Monkey',
	email : 'monkey0110@gmail.com',
	age : 16,
	FavoriteSubject : ['Math']
};

物件

物件操作方式：讀取、編輯

let user = {
	name : 'Monkey',
	email : 'monkey0110@gmail.com',
	age : 16,
	FavoriteSubject : ['Math']
};

console.log(user.name); // 讀取 name 屬性，output: Monkey
user.name = 'Banana'; // 修改 name 屬性
console.log(user.name); // output: Banana

console.log(user.FavoriteSubject[0]); // output: Math

實作練習

身分證檢驗

實作練習

身分證檢驗

我國的身分證字號有底下這樣的規則，因此對於任意輸入的身分證字號可以有一些基本的判斷原則，請您來判斷一個身分證字號是否是正常的號碼。

(1) 英文代號以下表轉換成數字
      A=10 台北市     J=18 新竹縣     S=26 高雄縣
      B=11 台中市     K=19 苗栗縣     T=27 屏東縣
      C=12 基隆市     L=20 台中縣     U=28 花蓮縣
      D=13 台南市     M=21 南投縣     V=29 台東縣
      E=14 高雄市     N=22 彰化縣     W=32 金門縣
      F=15 台北縣     O=35 新竹市     X=30 澎湖縣
      G=16 宜蘭縣     P=23 雲林縣     Y=31 陽明山
      H=17 桃園縣     Q=24 嘉義縣     Z=33 連江縣
      I=34 嘉義市     R=25 台南縣

  (2) 英文轉成的數字, 個位數乘９再加上十位數的數字

  (3) 各數字從右到左依次乘 1、2、3、4......9

  (4) 求出 (2)、(3) 及最後一碼的和

  (5) (4)除以 10 若整除，則為 real，否則為 fake

函式

Function

函式

  • 簡化繁雜步驟
  • 帶入值進行操作或回傳值

Function

function square(number) {
  return number * number;
}

函式

Function

function square(number) {
  return number * number;
}

定義 function

函式名稱

代入值

函式

Function

function square(number) {
  return number * number;
}

回傳

回傳值的操作

函式

使用 Function

function square(number) {
  return number * number;
}

console.log(square(4)); // output: 16

使用定義後的 Function

實作練習

身分證檢驗

實作練習

身分證檢驗

我國的身分證字號有底下這樣的規則，因此對於任意輸入的身分證字號可以有一些基本的判斷原則，請您來判斷一個身分證字號是否是正常的號碼。

(1) 英文代號以下表轉換成數字
      A=10 台北市     J=18 新竹縣     S=26 高雄縣
      B=11 台中市     K=19 苗栗縣     T=27 屏東縣
      C=12 基隆市     L=20 台中縣     U=28 花蓮縣
      D=13 台南市     M=21 南投縣     V=29 台東縣
      E=14 高雄市     N=22 彰化縣     W=32 金門縣
      F=15 台北縣     O=35 新竹市     X=30 澎湖縣
      G=16 宜蘭縣     P=23 雲林縣     Y=31 陽明山
      H=17 桃園縣     Q=24 嘉義縣     Z=33 連江縣
      I=34 嘉義市     R=25 台南縣

  (2) 英文轉成的數字, 個位數乘９再加上十位數的數字

  (3) 各數字從右到左依次乘 1、2、3、4......9

  (4) 求出 (2)、(3) 及最後一碼的和

  (5) (4)除以 10 若整除，則為 real，否則為 fake

The End

下課囉！