習作6 - 完成答案版

✓ 1a 答案

HTML 代碼：

<form id="contactForm" method="POST" action="/api/contact">

說明：

• method="POST" 指定表單使用 POST 方法發送數據（更安全，適合敏感信息）
• action="/api/contact" 指定表單提交到的服務器端點
• 當用戶點擊「送出」按鈕時，表單數據會被發送到 /api/contact

✓ 1b 答案

CSS 代碼：

button {
  background-color: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

進階版（添加 hover 效果）：

button {
  background-color: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #2563eb;
}

✓ 2a 答案

簡易驗證：

function validateEmail(email) {
  return email.includes('@') && email.includes('.');
}

// 調用
console.log(validateEmail("alice@example.com"));  // true
console.log(validateEmail("invalid.email"));      // false

進階版（使用正則表達式）：

function validateEmail(email) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

✓ 2b 答案

function addContact(contacts, name, email, subject) {
  const newId = Math.max(...contacts.map(c => c.id)) + 1;
  contacts.push({
    id: newId,
    name: name,
    email: email,
    subject: subject
  });
}

// 調用
addContact(contacts, "David", "david@example.com", "Inquiry");

或使用物件簡寫語法：

function addContact(contacts, name, email, subject) {
  const newContact = { id: contacts.length + 1, name, email, subject };
  contacts.push(newContact);
}

✓ 2c 答案

let supportContacts = [];
for (let i = 0; i < contacts.length; i++) {
  if (contacts[i].subject === "Support") {
    supportContacts.push(contacts[i]);
  }
}
console.log(supportContacts);

或使用 filter()：

let supportContacts = contacts.filter(c => c.subject === "Support");
console.log(supportContacts);

結果：

[
  { id: 3, name: "Charlie", email: "charlie@example.com", subject: "Support" }
]