綜合練習

這份綜合練習分成兩部分：一部分是 HTML/CSS，另一部分是 JavaScript。題目內容都是原創的，重點放在常見基礎語法與短答練習。

本頁安排：Question 1 集中練習 HTML 和 CSS；Question 2 集中練習 arrays、objects 與短式 JavaScript 寫作。

使用方法

如何使用這份練習

不要直接照抄其他練習內容。
按題目要求寫出準確語法。
答案要短而準。
檢查 tag 名稱、selectors 和 JavaScript methods 的拼寫。

Question 1

HTML 與 CSS

請參考以下 HTML：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Study Cafe</title>
  <style>
    /* 在這裡寫 Question 1a 的答案 */
  </style>
</head>
<body>
  <h1>Study Cafe</h1>
  <img id="poster" src="./cafe.jpg" alt="study cafe poster">
  <p>Choose your favourite drink.</p>
  <ul>
    <li class="drink-item">Milk Tea</li>
    <li class="drink-item">Lemon Tea</li>
    <li class="drink-item">Coffee</li>
    <li class="drink-item">Hot Chocolate</li>
  </ul>
</body>
</html>

1a. Internal CSS (6 marks)

請寫出 internal CSS，把標題 Study Cafe 改成以下效果：

字體大小：30px
文字顏色：white
背景顏色：teal

1b. Selectors (4 marks)

請寫出任何兩個有效的 CSS selectors，用來選取所有 drink items。

1c. Image selector (2 marks)

請寫出一個可以選取圖片 cafe.jpg 的有效 selector。

Question 2

JavaScript

請參考以下程式碼：

let lessons = [
  {
    Title: "HTML Basics",
    Level: "Beginner",
    Duration: "40 mins"
  },
  {
    Title: "CSS Review",
    Level: "Beginner",
    Duration: "35 mins"
  }
];

2a. Reading data (2 marks)

執行 lessons[1]["Title"]; 的結果是什麼？

2b. Accessing data (2 marks)

請寫出一個有效方法，讀取 HTML Basics 的 duration。

2c. Adding data (6 marks)

請在陣列尾端加入一個新 object，內容如下：

Title: JavaScript Loop
Level: Beginner
Duration: 45 mins

2d. Loop writing (6 marks)

請寫一個 for loop，把每個 lesson title 輸出到 console。

重點清單

這份練習主要涵蓋

Internal CSS 語法
Selectors：tag、class、id
Array index 讀值
Object property 存取
利用 push() 加入新資料
撰寫基本 for loop

相關頁面

建議配合使用

打開必溫清單重溫 HTML2 重點重溫 selectors 與 forms

完成版

對應完成練習

這個較早期的完成版頁面對應本頁的表格與 tooltip 練習部分。

Exercise 3-2 Tables Tooltip 打開完成練習總覽