Q1: 網路基礎與 REST 診斷
45 Marks
教授教學筆記:
• 重點在於讓學生區分「語法」與「設計規範」。
• 強調 HTTP 無狀態特性(Statelessness)在現代開發中的挑戰。
一名初級開發者寫了以下 HTTP 請求來更新密碼,但伺服器拒絕了:
1: GET /api/v1/updatePassword/99 HTTP/1.1
2: Host: security.example.com
3:
4: { "newPassword": "secure123" }
✦ 錯誤診斷與修正:
- 錯誤一: 動作錯誤。更新資料應使用 PUT 或 PATCH,而非 GET。GET 依法不應帶有 Body。
- 錯誤二: 缺少標頭。必須加上 ContentType: application/json 才能解析 JSON。
- 修正代碼:
PUT /api/v1/updatePassword/99 HTTP/1.1 ContentType: application/json { "newPassword": "secure123" }
Q2: JavaScript 邏輯審查
20 Marks
教授教學筆記:
• 測驗學生是否理解 JS 預設將數字轉為字串進行排序的陷阱。
• 正則表達式(RegExp)是前端開發的必備工具。
2A: 學生使用 `prices.sort()` 排序價格陣列 [25, 100, 5],結果 100 出現在 25 前面。請解釋原因並修正。
2B: 寫出一個 RegExp 來驗證 ID 格式:以 MUST_ 開頭,後接四位數字,以感嘆號結尾。
✦ 2A 解析:
JS 預設將數字轉為 Unicode 字串比較。"1" 的編碼比 "2" 小,所以 "100" < "25"。
prices.sort(function(a, b) { return b - a; });
✦ 2B 解析:
var regex = /^MUST_\d{4}!$/;
Q3: Spring Boot API 設計
15 Marks
教授教學筆記:
• 考核學生對註解(Annotations)的精準應用。
• 注意 PathVariable 與 RequestBody 的區分。
請為圖書館系統設計以下 API 的方法簽名與註解:
- 1. 根據 ID 獲取書籍。
- 2. 新增一本新書。
- 3. 根據 ID 刪除書籍。
✦ 參考實作:
@GetMapping("/books/{id}")
public ResponseEntity<Book> getBook(@PathVariable int id)
@PostMapping("/books")
public ResponseEntity<String> add(@RequestBody Book b)
@DeleteMapping("/books/{id}")
public ResponseEntity<Void> delete(@PathVariable int id)
Q4: CSS 權重戰場
10 Marks
教授教學筆記:
• 權重計算公式:ID (100) > Class (10) > Element (1)。
• 掌握 :not() 虛擬類別能大幅簡化 CSS 選取邏輯。
若 HTML 為 `<div id="box" class="active">`,且 CSS 中分別定義了標籤、類別與 ID 的背景色,哪一個會勝出?
✦ 優先級判定:
最終顯示:紅色 (Red)。因為 ID 選擇器的權重最高。
✦ 排除語法:div span:not(.highlight) { color: green; }
Q5: 現代 DOM 操作
10 Marks
教授教學筆記:
• 強調「職責分離」,JS 邏輯應與 HTML 結構解耦。
• 這是未來開發 React 或 Vue 等框架的基礎思維。
請使用 addEventListener 方法,讓一個按鈕在滑鼠移入時變為紫色,移出時變回白色。
✦ 現代化實作代碼:
var btn = document.getElementById('myBtn');
btn.addEventListener('mouseover', function() {
this.style.backgroundColor = 'purple';
});
btn.addEventListener('mouseout', function() {
this.style.backgroundColor = 'white';
});