JavaScript

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

DC Bot

&

第一堂 導論與基礎語法I

講師介紹：張雲淞

社團：建中資訊 INFOR

職位：外交長兼學術

綽號：章魚

winsonotp

infor38_otp

infor38.otp@gmail.com

JavaScript 前後端

Python

學術力：

JS & DC Bot

基本介紹

JavaScript

JavaScript

  • 網頁瀏覽器中執行的腳本語言
  • 和 HTML、CSS 組成前端三件套

網頁

HTML

CSS

JS

網頁的架構

網頁的外觀

讓網頁能夠互動

順帶一提，JavaScript 跟 Java 不一樣！

JavaScript

  • 可運用於伺服器、手機應用、桌面應用等...
  • 物件導向
>_

一條一條的指令

類別 ex. 貓

屬性
 

 


方法

 

＆
 

毛

色

體

重

吃

飯

睡

覺

喝

水

物件

毛色：橘色

體重：4.2 kg

命令式 vs. 物件導向

Discord Bot

Discord Bot

  • 讓 Discord 增加更多功能
  • 管理伺服器、互動、提供資訊
  • 例如：歡迎使用者加入的訊息、領取身份組、RPG 遊戲、抓取天氣地震資訊、...

Discord Bot

常用的 Discord Bot

Carl Bot

YEE 式機器龍

MEE6

Discord Bot

常用的 Discord Bot

Carl Bot

YEE 式機器龍

MEE6

  • 管理伺服器
  • 自訂指令
  • 管理伺服器
  • RPG 遊戲
  • 播放音樂
  • 發起投票
  • 管理伺服器
  • 等級系統
  • 直播提醒

Discord Bot

常用的 Discord Bot

YEE 式機器龍

課程說明

時間、地點與規劃

課程說明

  • 時間：每週三 18:00 - 20:00
  • 地點：建中資源大樓三樓 電教二

段考當週、前一週停課

建資社網 也有這堂和其他放課的簡介喔！

課程說明

節次規劃

堂數 日期 內容 備註
第一節 10/01 簡介 一段前
第二～五節 10/22-11/12 JavaScript 二段前
第六～八節 12/03-12/24 Discord.js 三段前
第十節 12/31 成發 (待定) 最後一堂

如果有缺課都會有簡報可以看！有問題也都可以找講師。

課程說明

放課 DC 伺服器

  • 上課公告
  • 課程簡報
  • 問問題
  • 測試機器人

環境設置

Node.js 與 VSCode

環境設置：Node.js

  • JavaScript 執行環境
  • 可在 Windows、Linux、macOS 等作業系統上執行
  • 讓程式跳脫瀏覽器執行

安裝執行檔

一直按 Next/Install/Finish 就完成了！

環境設置：Node.js

  • Visual Studio Code

 

  • 微軟開發的免費程式碼編輯器
  • 擴充元件豐富

建中的電腦有安裝，但如果回家想安裝可以到 這個網址 下載

桌面有

環境設置：VSCode

隨便創一個資料夾並選擇

（e.g. 桌面/1001）

新增一個檔案 副檔名用 .js

（e.g. index.js）

環境設置：VSCode

畫面長這樣就完成了！

環境設置：VSCode

Hello World

第一個程式！

Hello World

console.log("Hello World");

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

存檔！

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

開啟終端機

VSCode 左上角的 Terminal

在終端機輸入 node 檔名.js

（e.g. node index.js）

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

Hello World

輸出

控制台

輸出

console.log("Hello World");

console 控制台

輸出

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

輸出

按鍵盤的 F12

在右上角切換到 Console

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

可以用於除錯、測試等

輸出

console.log("Hello World");

console

物件 (Object)

.log()

方法 (Methods)

分號

行末加分號

輸出

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 infor = 38;
console.log(infor); // output: 38

let 名稱;

let 名稱 = 值;

變數

操作變數

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

名稱 = 值;

變數

定義變數

const cmioc = 32;
console.log(cmioc); // 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

實作練習 (1)

第一個實作（輸出、變數）

實作練習

第一個實作！

設 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

實作練習

第一個實作！

let a = 25;
let b = 2;
console.log(a+b);
console.log(a-b);
console.log(a**b);
console.log(a**3>a*b);

流程判斷與迴圈

判斷式、迴圈

流程判斷與迴圈

  • 流程判斷：判斷條件並進行對應的動作
  • 迴圈：重複執行特定動作

流程判斷與迴圈

流程判斷

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

以此類推

流程判斷與迴圈

流程判斷

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

流程判斷與迴圈

流程判斷

let a = 115;
let b = 12;
if (a > b) {
    console.log("喵");
} else {
    console.log("呱");
}
// output: 喵

流程判斷與迴圈

迴圈：for

for (建立初始條件; 判斷條件; 更新條件) {
    do
}

初始變數定義

條件符合時會持續執行

每輪執行後會更新的條件

流程判斷與迴圈

迴圈：for

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

流程判斷與迴圈

迴圈：while

while (條件) {
    do 
}

條件滿足時會持續循環

流程判斷與迴圈

迴圈：while

let a = 0;
while (a < 5) {
    console.log("a");
    a++;
}
/* output:
 * a
 * a
 * a
 * a
 * a
 */

流程判斷與迴圈

for vs. while

  • for 常用在明確知道執行次數的情況
  • while 常用於不確定實際次數，依條件判斷是否結束的情形

實作練習 (2)

輸出、變數、判斷式

實作練習

閏年判斷

設一個變數為年份，判斷這一年是否是閏年並輸出結果

閏年規則

四年一閏，百年不閏，四百年閏

如：2000 年是閏年、1900 年不是、2024 年是

實作練習

閏年判斷

let year = 2025;
if (year % 400 == 0) {
    console.log(year + "是閏年");
} else if (year % 100 == 0) {
    console.log(year + "不是閏年")
} else if (year % 4 == 0) {
    console.log(year + "是閏年")
} else {
    console.log(year + "不是閏年")
}

實作練習 (3)

輸出、變數、判斷式

實作練習

日期差距

設四個變數分別為起始日期的月、日，及結束日期的月、日，並輸出這兩個日期之間的天數差距

例如

四個變數分別是 10 20 11 12

則輸出 23

假設每月都是 30 天

The End

下課囉！