JavaScript 簡介與開發環境#
JavaScript（簡稱 JS）是目前唯一能在瀏覽器中原生執行的程式語言，負責網頁的互動行為。
現代 Web 開發由三層技術構成，JavaScript 負責最上層的互動邏輯：
| 技術 | 職責 |
|---|
| HTML | 網頁結構與內容 |
| CSS | 樣式與排版 |
| JavaScript | 互動行為與動態效果 |
JavaScript 不僅限於瀏覽器，透過 Node.js 也能執行於伺服器端。
開發環境設定#
瀏覽器開發者工具#
最快的入門方式：直接使用瀏覽器的開發者工具（DevTools）。
- 開啟 Chrome 或 Edge
- 按
F12 或 Ctrl + Shift + I - 點選 Console 分頁
- 輸入 JavaScript 並按 Enter 執行
1
2
| console.log("Hello, JavaScript!");
// Hello, JavaScript!
|
文字編輯器#
推薦使用 VS Code，安裝後可直接建立 .js 或 .html 檔案。
在網頁中引入 JavaScript#
有三種方式：
1. 行內（Inline）#
1
| <button onclick="alert('你好！')">點我</button>
|
2. 內嵌（Internal）— 放在 <script> 標籤內#
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html>
<head>
<title>JS 範例</title>
</head>
<body>
<h1>Hello</h1>
<script>
console.log("網頁載入完成");
</script>
</body>
</html>
|
3. 外部檔案（External）— 推薦做法#
1
2
| <!-- index.html -->
<script src="app.js"></script>
|
1
2
| // app.js
console.log("來自外部檔案");
|
<script> 標籤建議放在 </body> 前，確保 HTML 元素已載入。
console.log 輸出#
console.log() 是開發時最常用的除錯工具：
1
2
3
4
5
6
7
8
| console.log("字串"); // 字串
console.log(42); // 數字
console.log(true); // 布林值
console.log([1, 2, 3]); // 陣列
console.log({ name: "JS" }); // 物件
// 同時輸出多個值
console.log("版本:", 2024); // 版本: 2024
|
1
2
3
4
5
6
7
8
| // 這是單行註解
/*
這是
多行註解
*/
const x = 10; // 行尾註解
|
JavaScript 的特性#
- 動態型別：變數不需事先宣告型別，執行時自動判斷
- 直譯式語言：逐行執行，不需編譯
- 物件導向 + 函數式：支援多種程式設計風格
- ECMAScript 標準：現代 JS 遵循 ES6+（2015 年以後）規範
Reference#