跳到主要內容
Cypher's Practical Coding
正在準備工作環境...

JavaScript 是什麼?

JavaScript(簡稱 JS)是讓網頁「動起來」的程式語言。

你每天在用的網站——購物車、搜尋建議、彈出視窗——背後都是 JavaScript 在運作。

用生活來比喻

網頁組成生活比喻功能
HTML房子的骨架決定內容和結構
CSS房子的裝潢決定顏色、排版、外觀
JavaScript房子的電路和水管讓東西能互動、能動

沒有 JavaScript,網頁就是一張靜態海報。 有了 JavaScript,網頁才能:

  • 按按鈕會有反應
  • 即時驗證你填的表單
  • 動態顯示購物車數量
  • 自動載入更多商品

JavaScript 在哪裡用?

你可能以為 JS 只能做網頁,其實它無處不在:

場景說明
網頁前端按鈕互動、動畫效果、表單驗證
後端伺服器用 Node.js 寫 API、處理訂單
手機 AppReact Native 可以寫 iOS / Android
自動化腳本批次處理資料、自動發報表
AI 應用串接 ChatGPT API、做聊天機器人

為什麼業務人員也該懂一點 JS?

在 91APP 的工作中,懂一點 JavaScript 可以幫你:

  1. 看懂 GA4 追蹤碼:廣告追蹤碼就是 JavaScript
  2. 理解工程師在說什麼:當 RD 說「前端要加一段 JS」,你知道他在做什麼
  3. 自動化工作:用簡單的腳本處理重複性工作
  4. 看懂報表邏輯:資料怎麼被計算、怎麼被篩選

我們的第一段 JavaScript

JavaScript 用 console.log() 來「印出」結果,就像 Excel 的儲存格會顯示公式的計算結果。

試試簡單的數學運算:

把文字和數字組合在一起:

本課重點

  • JavaScript 是讓網頁有互動能力的程式語言
  • 幾乎所有網站都在用 JavaScript
  • console.log() 是我們觀察程式結果的工具
  • 這門課的所有練習都會在瀏覽器裡直接跑,不需要安裝任何東西

下一課我們來學「變數」——程式裡用來存放資料的容器!

AI 協作:學了這個,跟 AI 怎麼配合?

JavaScript 無所不在——網頁、自動化、小工具都用它。學會基礎,你就能看懂 AI 寫的 JS 程式。

你的人類優勢:

  • 你知道想用 JS 解決什麼問題(整理資料、做互動網頁、寫自動化腳本)
  • 你能判斷 AI 用 JS 寫的方案是否過度複雜

可以這樣跟 AI 說:

我想用 JavaScript 把一份客戶名單按城市分組,請用最簡單的方式寫。

練習題

互動示範

DEMO 1可以修改程式碼試玩
DEMO 2可以修改程式碼試玩
DEMO 3可以修改程式碼試玩

挑戰任務

Task 1

用 console.log() 印出「Hello, 91APP!」

Task 2

用 console.log() 印出 100 + 200 的計算結果

Next Lesson →