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';
});