JavaScript khác HTML và CSS thế nào?

HTML là nội dung (bộ khung), CSS là trang trí (diện mạo), còn JavaScript là tương tác (hành vi) — thứ khiến trang 'làm gì đó' khi người dùng bấm, gõ, cuộn. Ví dụ: bấm nút hiện thông báo, ẩn/hiện nội dung, kiểm tra form. Ba ngôn ngữ này phối hợp tạo nên một trang web hoàn chỉnh.

let và const trong JavaScript khác nhau thế nào?

Cả hai để khai báo biến. Dùng const cho giá trị KHÔNG đổi sau khi gán (hằng), dùng let cho giá trị CÓ thể đổi. Lời khuyên cho người mới: mặc định dùng const, chỉ đổi sang let khi bạn thật sự cần gán lại biến. Tránh dùng var (cách cũ, dễ gây lỗi phạm vi).

Sự kiện (event) trong JavaScript là gì?

Sự kiện là hành động của người dùng mà trang có thể 'lắng nghe' và phản ứng: click (bấm), input (gõ), submit (gửi form), mouseover (rê chuột)… Bạn dùng addEventListener để gắn một hàm chạy khi sự kiện xảy ra, ví dụ: nút.addEventListener('click', hienThongBao). Đây là cách trang trở nên tương tác.

Web cơ bản Bài 8: JavaScript — biến, hàm và sự kiện (30 phút)

Bài 7 bạn đã làm trang responsive. Đến giờ trang vẫn “tĩnh” — chỉ để xem. Bài này thêm tương tác bằng JavaScript (JS): lớp thứ ba của web (sau HTML nội dung và CSS trang trí). Bạn sẽ học biến, hàm và sự kiện, rồi làm một nút bấm đổi nội dung trang — bước đầu để trang “làm được việc” khi người dùng tương tác.

⏱️ Cách học bài này (~30 phút): đọc biến/hàm/sự kiện + code mẫu (12’), tự gõ và bấm thử trong trình duyệt (12’), lưu file mang về (6’).

Mục tiêu bài học

Sau bài này bạn sẽ:

Gắn JavaScript vào trang bằng thẻ <script>.
Khai báo biến (let/const) và viết hàm.
Bắt sự kiện click bằng addEventListener.
Làm một nút bấm đổi nội dung trên trang.

Nội dung: JavaScript cơ bản

1. Gắn JavaScript vào trang

Đặt thẻ <script> ngay trước thẻ đóng </body> (để HTML tải xong trước):

  <button id="nut">Bấm tôi</button>
  <p id="thongbao">Xin chào!</p>

  <script src="script.js"></script>
</body>

Tạo file script.js cùng thư mục. (Có thể viết JS thẳng trong <script>...</script>, nhưng tách file gọn hơn.)

2. Biến: let và const

const ten = "Lan";     // hằng: không đổi
let diem = 8;          // biến: có thể đổi
diem = 9;              // gán lại được (vì là let)
console.log(ten, diem); // in ra Console (F12) để kiểm

Mặc định dùng const; chỉ dùng let khi cần gán lại. Tránh var (cách cũ).

3. Hàm

function chao(ten) {
  return "Xin chào, " + ten + "!";
}
console.log(chao("Nam"));   // Xin chào, Nam!

Cú pháp: function tênHàm(thamSố) { ... return ... }. Khác Python: dùng { } và ;, không dựa vào thụt lề.

4. Sự kiện: bắt cú bấm nút

Lấy phần tử theo id rồi gắn hàm chạy khi click:

const nut = document.getElementById("nut");
const thongbao = document.getElementById("thongbao");

nut.addEventListener("click", function () {
  thongbao.textContent = "Bạn vừa bấm nút! 🎉";  // đổi nội dung thẻ <p>
});

addEventListener("click", ...) = “khi nút được bấm, chạy hàm này”. textContent đổi chữ bên trong phần tử.

Code mẫu có chú thích: nút đổi nội dung

HTML (trong <body>, trước </body> có <script src="script.js"></script>):

<button id="nut">Đổi lời chào</button>
<p id="thongbao">Xin chào, tôi là Lan.</p>

script.js:

const nut = document.getElementById("nut");        // lấy nút
const thongbao = document.getElementById("thongbao"); // lấy đoạn văn
let lanBam = 0;                                     // đếm số lần bấm

nut.addEventListener("click", function () {
  lanBam = lanBam + 1;                              // tăng biến đếm
  thongbao.textContent = "Cảm ơn đã bấm " + lanBam + " lần!";
});

Cách chạy: lưu cả hai file, mở index.html, bấm nút — dòng chữ đổi và đếm số lần bấm. Mở Console (F12) để xem lỗi nếu có.

Bài thực hành code (tự gõ)

Bài 1 — Biến & console: khai báo const ten và let tuoi, đổi tuoi, rồi console.log(ten, tuoi). Mở F12 xem kết quả.

Bài 2 — Hàm: viết function tong(a, b) { return a + b; } và console.log(tong(2, 3)).

Bài 3 — Sự kiện: thêm một nút; khi bấm, đổi textContent của một thẻ <p> thành lời nhắn của bạn.
✅ Gợi ý: getElementById + addEventListener("click", ...).

Lỗi thường gặp & cách sửa

null khi getElementById → sai id, hoặc <script> chạy trước khi HTML tải. Đặt <script> trước </body>.
Bấm nút không phản ứng → quên addEventListener, hoặc gõ nhầm tên sự kiện (đúng là "click").
Quên { } hoặc ; → JS báo lỗi cú pháp; JS dùng ngoặc nhọn, không dựa thụt lề như Python.
Sai chính tả tên hàm/biến → JS phân biệt hoa thường: textContent khác textcontent.
Xem lỗi ở đâu? Mở Console (F12 → Console) — mọi lỗi JS hiện ở đó.

💾 Mang về — nút tương tác đầu tiên

Lưu bộ HTML + JS này làm nền tương tác cho trang (Bài 9 sẽ thao tác DOM sâu hơn):

<!-- trong index.html, trước </body> -->
<button id="nut">Bấm tôi</button>
<p id="thongbao">Xin chào!</p>
<script src="script.js"></script>

// script.js
const nut = document.getElementById("nut");
const thongbao = document.getElementById("thongbao");
nut.addEventListener("click", function () {
  thongbao.textContent = "Bạn vừa bấm nút!";
});

Thuật ngữ chốt

Thuật ngữ	Giải thích ngắn
JavaScript	Ngôn ngữ tạo tương tác (hành vi) cho web
let / const	Khai báo biến đổi được / hằng không đổi
function	Hàm — khối lệnh tái dùng, có `return`
event (sự kiện)	Hành động người dùng: click, input, submit…
addEventListener	Gắn hàm chạy khi sự kiện xảy ra
getElementById	Lấy phần tử HTML theo `id`
textContent	Nội dung chữ bên trong một phần tử

Tự kiểm tra

Nên đặt thẻ <script> ở đâu? (Đáp án: ngay trước </body>)
Dùng const hay let cho giá trị sẽ đổi? (Đáp án: let)
Gắn hành động khi bấm nút bằng gì? (Đáp án: addEventListener("click", ...))

Ghi nhớ nhanh

Ba lớp web: HTML (nội dung) + CSS (trang trí) + JS (tương tác).
Biến: const mặc định, let khi cần đổi; hàm: function ten(){ ... return ... }.
Tương tác: getElementById lấy phần tử → addEventListener(“click”, …) → đổi textContent.

Bài tập về nhà: thêm một nút vào trang cá nhân, bấm để đổi textContent của một đoạn văn thành lời nhắn của bạn (ẩn/hiện phần tử bằng style.display sẽ học ở Bài 9). Bài tiếp theo: Bài 9 — JavaScript: thao tác DOM (sắp đăng).

Bài 8: JavaScript — biến, hàm và sự kiện