Bài 25: Tổng ôn JavaScript – cốt lõi & thực hành

Đây là Bài 30 – Tổng ôn JavaScript, nơi bạn ôn lại toàn bộ kiến thức cốt lõi đã học trong 29 bài trước. Mục tiêu của bài này là giúp bạn nắm vững toàn cảnh và tự tin áp dụng vào thực tế.

---

1. Kiểu dữ liệu (data types)

Kiểu	Ví dụ
number	10, 3.14
string	"hello", 'xin chào'
boolean	true, false
array	[1, 2, 3], ["a", "b"]
object	{ name: "An", age: 20 }
null	null
undefined	undefined

---

2. Biến & Hàm

📋 Copylet x = 5

function greet(name) {
  return "Xin chào " + name
}

---

3. Câu lệnh điều kiện

📋 Copyif (x > 0) {
  console.log("x là số dương")
} else {
  console.log("x là số âm hoặc 0")
}

---

4. Vòng lặp

📋 Copyfor (let i = 0; i < 5; i++) {
  console.log(i)
}

📋 Copylet arr = [1, 2, 3]
arr.forEach(n => console.log(n))

---

5. Mảng & hàm mảng

Hàm	Công dụng
map()	Tạo mảng mới từ mảng cũ
filter()	Lọc phần tử
find()	Tìm phần tử đầu tiên
reduce()	Tổng hợp thành 1 giá trị
sort()	Sắp xếp
forEach()	Lặp qua từng phần tử

---

6. Object

📋 Copylet user = {
  name: "Bình",
  age: 22
}

console.log(user.name)

---

7. DOM

📋 Copydocument.getElementById("demo").innerHTML = "Hello"
document.querySelector("p").style.color = "blue"

---

8. Event

📋 Copybutton.addEventListener("click", () => {
  alert("Đã nhấn nút")
})

---

9. Form & Input

📋 Copyform.addEventListener("submit", (e) => {
  e.preventDefault()
  let email = input.value
  alert("Gửi: " + email)
})

---

10. setTimeout / setInterval

📋 CopysetTimeout(() => console.log("Chạy sau 2s"), 2000)

let timer = setInterval(() => {
  console.log("Mỗi 1s")
}, 1000)

---

GỢI Ý BÀI TẬP TỔNG HỢP

Mini project: Ứng dụng danh sách việc cần làm (To-do List)

1. Có input nhập công việc
2. Bấm nút “Thêm” → thêm vào danh sách
3. Hiển thị danh sách công việc (dùng ul, li)
4. Có nút xoá từng việc
5. Lưu danh sách vào localStorage (nâng cao)

---

Kết thúc khóa học JavaScript cơ bản

Bạn đã học xong 30 bài cốt lõi về JavaScript:

• Biến, kiểu dữ liệu, toán tử
• Vòng lặp, điều kiện, hàm
• Mảng, object, các hàm xử lý mảng
• DOM, sự kiện, form
• Timer, xử lý tương tác người dùng

---

Học gì tiếp theo?

Bạn có thể học tiếp:

• DOM nâng cao & Animation
• Lập trình hướng đối tượng (OOP)
• ES6+ (let, const, arrow function, destructuring…)
• Framework như Vue.js, React.js
• Kết nối API, fetch, async/await