JavaScript

3/13社課 JS基礎語法

講師介紹

姓名：張雲淞

綽號：章魚

社團：建中資訊社 INFOR

職位：外交長兼學術

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

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

Instagram

社帳 Instagram

JavaScript

什麼是 JavaScript？

JavaScript

誕生於 1995 年，用於瀏覽器互動效果
經歷發展迭代後，成為成熟的程式語言
能在瀏覽器裡直接執行的程式語言
網頁前端三大核心技術

JavaScript

HTML

CSS

JavaScript

前端三件套

JavaScript

HTML

CSS

JavaScript

超文字標記語言

利用標籤定義內容

網頁的架構與語意

層疊樣式表

定義網頁外觀與布局

設計網頁字體、顏色等

JavaScript

應用於前端互動

作為網頁的腳本語言

架構

樣式

互動

JavaScript

可運用於伺服器、手機應用、桌面應用
和 Java 不一樣也完全無關

Node.js

執行環境設置

Node.js

跨平台、開源的執行環境
讓程式跳脫瀏覽器運行

搭配 NPM (Node Package Manager)
進而擴充更多第三方套件

Node.js

環境設置（安裝 Node.js）

網址：https://nodejs.org

Node.js

環境設置（安裝 Node.js）

網址：https://nodejs.org

到最後這個畫面就是安裝完成了！

VSCode

Visual Studio Code

VSCode

微軟開發的跨平台程式碼編輯器
擴充元件豐富

建中的電腦有安裝！

網址：https://code.visualstudio.com/

VSCode

1. 開啟 VSCode

VSCode

2. 開啟一個新的資料夾

VSCode

3. 新增檔案

Hello World

第一個 JavaScript 程式

Hello World

console.log("Hello World");

把這段程式貼到剛剛建立的檔案

存檔！

記得每次要執行程式前都要存檔

Hello World

開啟終端機

VSCode 左上角的 Terminal

在終端機輸入 node 檔名.js

（e.g. node index.js）

結果是這樣的話就成功囉！

Hello World

console.log("Hello World");

console 控制台

Hello World

到 Chrome 隨便開一個網頁 e.g. google.com

Hello World

按鍵盤的 F12

在網頁的 JavaScript 中，console 的輸出會在這裡

可以用於除錯、測試等

Hello World

console.log("Hello World");

console

物件 (Object)

.log()

方法 (Methods)

分號

行末加分號

Hello World

console.log("Hello World"); // 用兩個斜線可以註解

註解

會被程式忽略

資料型別與變數

基本型別與變數介紹

資料型別與變數

描述數據的性質、範圍和用途
如：布林值（是或否）、數字

資料型別

資料型別與變數

型別	說明	範例
布林值 (Boolean)	是、否	true, false
數字 (Number)	-(2⁵³-1), 2⁵³-1 之間的數字	123, 5.2
字串 (String)	文字資料	'cat', "呱"
null	空值
undefined	未定義
超大整數 (BigInt)	比 Number 大的數	9007199254740992n
符號 (Symbol)	標示	symbol('Pig')

基本型別

資料型別與變數

基本型別：布林值 Boolean

二進制：「電腦由 0 和 1 組成」
0 代表 false、1 代表 true

console.log(true);
console.log(false);

資料型別與變數

基本型別：數字 Number

包括整數 (Integer)、浮點數 (Float)
範圍：-(2⁵³ - 1) ~ 2⁵³ - 1
Infinity（無限大）、NaN（Not a Number）

console.log(916.18);
console.log(Infinity);

資料型別與變數

基本型別：字串 String

文字資料
需用英文雙引號 " 或單引號 ' 包裹

console.log("Hello World");

剛剛範例的 Hello World 是字串

資料型別與變數

存放資料（如數字、字串、......）並使用
數學中的 x, y, z

變數

資料型別與變數

變數

放東西到箱子（存放資料到變數）

用一個標籤標記起來（取名的變數）

資料型別與變數

變數：定義變數 (let)

let infor = 38;
console.log(infor); // output: 38

let 名稱;

let 名稱 = 值;

資料型別與變數

變數：操作變數

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

名稱 = 值;

資料型別與變數

變數：定義變數 (const)

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

const 名稱 = 值;

常數

(Constant)

定義後不能進行改變

資料型別與變數

變數：命名規則

開頭必須是英文大小寫，或 _ 、 $，不可是數字
其餘字元可以使用數字
區分大小寫
不可使用 JavaScript 保留字詞

資料型別與變數

變數：命名保留字

資料型別與變數

變數：命名習慣

與變數的意義有關，如：次數 times
小駝峰式命名法，如：userName, isConnected

運算式與運算子

運算

進行數據的運算
如：加減乘除

運算子

運算式與運算子

賦值運算子

e.g. =、+=

比較運算子

e.g. >、<=、==

算術運算子

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

++、--、**

邏輯運算子

e.g. &&、||、!

字串運算子

e.g. +

運算式與運算子

算術運算子

運算子	意思	備註
+、-、*、/	加、減、乘、除	乘是米字符號、除是正斜線
%	取餘數	a % b：a 除以 b 的餘數
++	增加	a = 3，a++ 後 a = 4
--	減少	a = 3，a-- 後 a = 2
**	指數	3 ** 2 = 9

運算式與運算子

算術運算子

let a = 2;
let b = 4;
let c = a * b; // c = 8
c += a; // c = 10
c--; // c = 9
c = c ** 2;
console.log(c); // output: 81

運算式與運算子

賦值運算子

運算子	範例	等同於
+=	a += b	a = a + b
-=	a -= b	a = a - b
*=	a *= b	a = a * b
/=	a /= b	a = a / b

運算式與運算子

賦值運算子

let v = 3;
v = 4; // 4
v += 1; // 5
v -= 2 // 3
v *= 3 // 9
v /=3 // 3
console.log(v); // output: 3

運算式與運算子

比較運算子

運算子	意思	備註
>、<	大於、小於
>=、<=	大於等於、小於等於
==	等於	兩個等號
!=	不等於

運算式與運算子

比較運算子

console.log(5 > 3); // output: true
console.log(66 == 65); // output: false
console.log(2 != 3); // output: true

運算式與運算子

邏輯運算子

運算子	意思
&&	and
\|\|	or
!	not

運算式與運算子

邏輯運算子

console.log((5>3) && (7>6)); // output: true
console.log((12==22) || (78>79)); // output: false
console.log(!(7>8)); // output: true

運算式與運算子

字串運算子

運算子	意思	備註
+	字串相接	"ap" + "ple" = "apple"
+=	簡化字串相接	a += b = a + b

運算式與運算子

字串運算子

console.log("CK" + "CSC"); // output: CKCSC
let a = "Good";
let b = "Day";
a += b; // a = GoodDay

實作練習

輸出、變數、運算子實作練習

實作練習

設 A、B 兩個變數，

接下來三行分別輸出「A+B」、「A-B」、「A的B次方」的值

最後依「A 的三次方是否大於 A * B」輸出 true or false

e.g. A = 25, B = 2

output:

27
23
625
true

JavaScript

3/13社課 JS基礎語法

講師介紹

JavaScript

什麼是 JavaScript？

JavaScript

JavaScript

JavaScript

JavaScript

Node.js

執行環境設置

Node.js

Node.js

Node.js

VSCode

Visual Studio Code

VSCode

VSCode

VSCode

VSCode

Hello World

第一個 JavaScript 程式

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

資料型別與變數

基本型別與變數介紹

資料型別與變數

資料型別與變數

資料型別與變數

資料型別與變數

資料型別與變數

資料型別與變數

資料型別與變數

資料型別與變數

資料型別與變數

資料型別與變數

資料型別與變數

資料型別與變數

資料型別與變數

運算式與運算子

運算

運算式與運算子

運算式與運算子

運算式與運算子

運算式與運算子

運算式與運算子

運算式與運算子

運算式與運算子

運算式與運算子

運算式與運算子

運算式與運算子

運算式與運算子

運算式與運算子

實作練習

輸出、變數、運算子實作練習

實作練習

設 A、B 兩個變數，

接下來三行分別輸出「A+B」、「A-B」、「A的B次方」的值

最後依「A 的三次方是否大於 A * B」輸出 true or false

e.g. A = 25, B = 2

output:

The End

學弟來考幹！

JavaScript 第二堂社課

More from 章魚