JavaScript

3/27社課 JS基礎語法

講師介紹

姓名：張雲淞

綽號：章魚

社團：建中資訊社 INFOR

職位：外交長兼學術

學術力：JavaScript、網頁前後端、Python、C++

教學課程：上學期放課 Discord.js、下學期社課 JavaScript、下學期放課 React

Instagram

社帳 Instagram

複習

輸出、資料型別與變數、運算式與運算子

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

流程判斷與迴圈

判斷式、迴圈

型別判斷

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

函式

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

實作練習

函式

實作練習

函式

為了不要吃太多韓式料理，阿銓決定寫一個函式來通過體重、身高，計算自己的 BMI (身體質量指數) 數值。請寫一個程式，通過函式計算出體重為 A (kg)、身高為 B (cm) 時，BMI 為多少。

例如

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

則輸出 270、54、53、62

The End

記得做考幹作業！

Made with Slides.com