Giáo Án Bài 14 (Lớp 4)

Thay Đổi Nội Dung Trang Web

Hôm nay chúng ta sẽ tìm hiểu cách JavaScript tương tác và thay đổi nội dung chữ cũng như hình ảnh trên trang web ngay khi người dùng bấm nút mà không cần tải lại trang.

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

Hiểu cách sử dụng document.getElementById() để tìm thẻ HTML trên trang web.
Sử dụng thuộc tính .innerHTML để thay đổi nội dung chữ trong các thẻ.
Sử dụng thuộc tính .src để thay đổi linh hoạt hình ảnh hiển thị.
Áp dụng thuộc tính CSS box-shadow tạo hiệu ứng bóng đổ và outline tạo viền ngoài.
Ánh xạ sự kiện thay đổi chữ và ảnh sang khối lệnh Scratch tương ứng.

⏱️ Thời lượng & Phân bổ

Tìm Thẻ Bằng ID (getElementById): 20 phút
Thay Đổi Chữ Với innerHTML: 20 phút
Phép Thuật Thay Đổi Ảnh (.src): 20 phút
Đổ Bóng box-shadow & Viền outline: 15 phút
Dự án Công Tắc Đèn Thần Kỳ: 45 phút

20 Phút Hoạt động 1: Tìm Thẻ Bằng ID (getElementById)

"Muốn tặng quà cho một bạn trong lớp, việc đầu tiên thầy/cô phải làm là gọi đúng tên của bạn đó. Trong trang web cũng vậy, muốn thay đổi chữ hay ảnh của một thẻ nào đó, JavaScript cần phải tìm và chọn đúng thẻ đó thông qua chiếc nhãn đặc biệt là **ID** của thẻ."

Giáo viên hướng dẫn cú pháp document.getElementById('id-cua-the') để tìm kiếm một thẻ trên trang:

Cú pháp tìm kiếm thẻ trong JS:

// Tìm thẻ có tên id là "tieu-de-chinh"
document.getElementById('tieu-de-chinh')

20 Phút Hoạt động 2: Thay Đổi Chữ Với innerHTML

Sau khi đã tìm thấy thẻ, ta có thể thay đổi nội dung chữ nằm bên trong thẻ đó bằng thuộc tính .innerHTML.

Sự so sánh trực quan với Scratch:

Trong Scratch, để nhân vật thay đổi câu nói trên màn hình, các em dùng khối:

💬 Nói [Chào bạn!] trong [2] giây (Say [Hello!] for [2] secs)

Trong HTML/JS, chúng ta gán nội dung mới trực tiếp cho innerHTML:

document.getElementById('tieu-de').innerHTML = 'Chào mừng bạn đến với Candy! 🍭';

20 Phút Hoạt động 3: Phép Thuật Thay Đổi Ảnh (.src)

Không chỉ thay đổi chữ, JavaScript còn có thể đổi hình ảnh hiển thị bằng cách gán lại đường dẫn của ảnh thông qua thuộc tính .src của thẻ <img>.

Sự so sánh trực quan với Scratch:

Trong Scratch, các em thay đổi hình dáng nhân vật bằng khối:

👕 Chuyển sang trang phục [Costume 2] (Switch costume to [Costume 2])

Trong HTML/JS, ta thay đổi thuộc tính src tương ứng:

document.getElementById('anh-nhan-vat').src = 'anh_moi.png';

15 Phút Hoạt động 4: Đổ Bóng box-shadow & Viền outline

Để giao diện trang web hiện đại và các nút bấm trông nổi bật 3D chân thật hơn, ta sử dụng thuộc tính đổ bóng và đường bao viền trong CSS.

CSS nâng cao:

box-shadow (Bóng đổ): Tạo bóng mờ phía sau thẻ. Cú pháp: box-shadow: dịch_ngang dịch_dọc độ_mờ màu_sắc;.
outline (Đường bao viền): Viền ngoài của thẻ, không làm thay đổi kích thước thẻ như border.

.nut-bam {
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2); /* Tạo bóng 3D */
    outline: none; /* Bỏ viền mặc định khi click */
}

🎁 Dự án Thực hành: Công Tắc Đèn Thần Kỳ

Mô tả: Thiết lập một trang web hiển thị bóng đèn. Khi bấm nút "Bật", hình ảnh chuyển thành bóng đèn phát sáng và dòng chữ trạng thái đổi thành "Đèn đang BẬT". Khi bấm nút "Tắt", bóng đèn tối lại và chữ đổi thành "Đèn đang TẮT".

Các bước lập trình chi tiết:

Tạo thư mục dự án 14-0 và thư mục con assets chứa 2 ảnh bóng đèn (bulboff.png, bulbon.png). Tạo file index.html và style.css.
Trong index.html, tạo tiêu đề <h1>: CÔNG TẮC ĐÈN THẦN KỲ.
Tạo thẻ tiêu đề phụ <h2 id="trang-thai">Đèn đang TẮT</h2> và thẻ ảnh <img id="anh-den" src="bulboff.png" style="width: 150px;">.
Tạo 2 nút bấm:
- Nút Bật: <button onclick="document.getElementById('anh-den').src='bulbon.png'; document.getElementById('trang-thai').innerHTML='Đèn đang BẬT';">Bật</button>.
- Nút Tắt: <button onclick="document.getElementById('anh-den').src='bulboff.png'; document.getElementById('trang-thai').innerHTML='Đèn đang TẮT';">Tắt</button>.
Trong style.css, định dạng căn giữa cho nội dung, đặt cursor: pointer; cho nút bấm và thêm hiệu ứng box-shadow cho các nút bấm trông nổi bật 3D.