Python_ex1 <<
Previous Next >> HTML and CSS
Javascript
JavaScript 初學者完整學習指引
一、為什麼學 JavaScript？
- JavaScript 是網頁開發必學語言，執行於所有主流瀏覽器。
- 可用於前端（瀏覽器）、後端（Node.js）、行動應用、桌面應用等。
- 社群大、資源多，學會 JS 等於打開 Web 世界大門。
二、學習流程建議
- 認識 JavaScript 應用場景及基礎語法。
- 熟悉開發與測試環境：
推薦直接在 Chrome、Edge、Firefox 等瀏覽器按 F12 開啟「開發人員工具」→「主控台(Console)」練習。
- 循序漸進學習語法與邏輯：從變數、流程控制、函式、物件等開始。
- 多做練習題與小專案。
- 了解 DOM 操作、事件處理與基礎網頁互動。
- 進階可學習 ES6+ 新語法與框架（如 React、Vue）。
三、JavaScript 必學基礎語法與範例
| 語法主題 |
說明 |
範例 |
| 變數宣告 |
用 let、const（現代 JS），
不要再用 var。 |
let x = 10;
const pi = 3.14; |
| 資料型態 |
數字（Number）、字串（String）、布林（Boolean）、陣列（Array）、物件（Object）、null、undefined |
let s = "hi";
let arr = [1,2,3];
let person = { name: "Tom", age: 20 }; |
| 輸出 |
用 console.log() 輸出到主控台 |
console.log("Hello!");
console.log(x + 2); |
| 運算子 |
數學（+、-、*、/、%）、比較（==、===、!=、!==、>、<）、邏輯（&&、||、!） |
let z = x + 5;
x === 10
(a > 0) && (b < 5) |
| 條件判斷 |
if、else if、else |
if (x > 0) {
console.log("正數");
} else {
console.log("非正數");
} |
| 迴圈 |
for、while、do...while |
for (let i = 0; i < 3; i++) {
console.log(i);
}
let count = 0;
while (count < 3) {
console.log(count);
count++;
} |
| 函式 |
定義與呼叫，
ES6 支援箭頭函式 |
function greet(name) {
console.log("Hi, " + name);
}
greet("Amy");
// 箭頭函式
const add = (a, b) => a + b;
console.log(add(2,3)); |
| 陣列與物件 |
基本操作：存取元素、方法如 push、forEach 等 |
let nums = [1,2,3];
nums.push(4);
nums.forEach(item => console.log(item));
let person = { name: "Tom", age: 20 };
console.log(person.name); |
| 註解 |
單行 //，多行 /* */ |
// 這是單行註解
/*
這是多行註解
*/ |
小提醒： JavaScript 語法彈性大，但容易出現隱含錯誤，建議使用嚴格模式 'use strict';，養成良好命名與註解習慣。
四、在網頁上的應用簡介
- JavaScript 主要用於網頁互動、動態內容與事件處理。
- 可透過
<script> 標籤直接在 HTML 內嵌或引用外部 JS 檔案：
<!DOCTYPE html>
<html>
<head><title>JS 範例</title></head>
<body>
<button onclick="sayHello()">點我</button>
<script>
function sayHello() {
alert("你好！");
}
</script>
</body>
</html>
五、常見錯誤與學習建議
- 常見錯誤：
- 少分號或括號（雖然 JS 支援自動補全，但還是建議加上）。
- 變數未宣告直接使用。
- 區分
==（寬鬆相等）與 ===（嚴格相等）。
- 陣列與物件存取語法錯誤。
- 學習建議：
- 多練習：在主控台嘗試各種語法。
- 閱讀 MDN（Mozilla Developer Network）文件，查詢 JS 語法與用法。
- 完成小專案，如計算機、Todo List、網頁互動等。
- 多與他人討論，參加線上社群。
六、進階主題（可視情況逐步學習）
- ES6+ 新語法（let、const、箭頭函式、解構賦值、展開運算子、模組化等）
- 事件處理、DOM 操作與網頁互動
- 非同步程式（callback、Promise、async/await）
- 物件導向程式設計、類別（class）
- 前端框架（如 React、Vue、Angular）
- Node.js 伺服器端開發
Python_ex1 <<
Previous Next >> HTML and CSS