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

Trò Chơi Trốn Tìm (Ẩn/Hiện Phần Tử)

Hôm nay chúng ta sẽ khám phá kỹ thuật ẩn và hiển thị các phần tử trên trang web bằng JavaScript - tựa như một trò chơi trốn tìm đầy phép thuật.

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

Hiểu cách điều khiển ẩn/hiện các khối nội dung bằng thuộc tính style.display.
Sử dụng thuộc tính CSS display: none; để ẩn phần tử ban đầu khi tải trang.
Biết cách gán giá trị block hoặc inline để hiển thị lại phần tử bằng JS.
Kết hợp thay đổi ảnh (src) và hiển thị chữ (innerHTML) để tạo tương tác trò chơi mở khóa.
Ánh xạ sự kiện ẩn/hiện trong JS sang khối lệnh Ẩn/Hiện tương ứng trong Scratch.

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

Ẩn Hiện Phần Tử & Liên Hệ Scratch: 25 phút
CSS display: none & display: block: 15 phút
Điều Khiển style.display Bằng JavaScript: 20 phút
Kết Hợp Đổi Ảnh Và Hiện Khối Ẩn: 15 phút
Dự án Rương Kho Báu Khóa: 45 phút

25 Phút Hoạt động 1: Ẩn Hiện Phần Tử & Liên Hệ Scratch

"Trong lập trình trò chơi, chúng ta rất hay gặp tình huống: khi nhân vật nhặt được chìa khóa thì chiếc rương mới xuất hiện, hoặc khi bấm vào nút 'Hướng dẫn' thì một bảng thông tin mới hiện ra.
Hôm nay, chúng ta sẽ học cách làm cho các thẻ HTML 'tàng hình' hoặc 'xuất hiện' theo ý muốn của mình!"

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

Trong Scratch, các em dùng 2 khối lệnh rất quen thuộc trong nhóm Hiển thị (Looks):

👁️ Khối lệnh [hiện] (show) và khối lệnh [ẩn] (hide)

Trong JavaScript, chúng ta điều khiển hành vi này thông qua thuộc tính:

style.display = 'none' (để ẩn) hoặc style.display = 'block' (để hiện)

15 Phút Hoạt động 2: CSS display: none & display: block

Để một phần tử (ví dụ: hộp quà hoặc thông báo chiến thắng) không xuất hiện ngay khi vừa mở trang web, ta thiết lập CSS ẩn nó đi trước.

Khai báo thuộc tính ẩn trong CSS:

.hop-qua-an {
    display: none; /* Khối này sẽ bị tàng hình hoàn toàn trên trang */
}

Khi muốn khối này hiện ra bình thường dưới dạng một khối độc lập chiếm toàn bộ chiều ngang dòng, CSS sẽ chuyển trạng thái hiển thị của nó thành:

.hop-qua-hien {
    display: block; /* Khối hiển thị lại bình thường */
}

20 Phút Hoạt động 3: Điều Khiển style.display Bằng JavaScript

JavaScript có thể can thiệp vào CSS của thẻ thông qua thuộc tính .style. Chúng ta sẽ dùng lệnh gán để đổi giá trị display động khi có sự kiện click chuột.

Lệnh JS thay đổi hiển thị:

// Tìm thẻ có id là 'hop-qua' và làm nó hiện lên
document.getElementById('hop-qua').style.display = 'block';

// Tìm thẻ có id là 'nut-bam' và ẩn nó đi
document.getElementById('nut-bam').style.display = 'none';

15 Phút Hoạt động 4: Kết Hợp Đổi Ảnh Và Hiện Khối Ẩn

Học sinh tìm hiểu cách kết hợp cả hai phép thuật đã học: thay đổi thuộc tính .src của thẻ ảnh và thay đổi .style.display của khối nội dung để tạo ra hiệu ứng mở hòm kho báu chân thực.

Ví dụ hàm JS kết hợp:

function moHopQua() {
    // 1. Đổi hình ảnh sang trạng thái đã mở
    document.getElementById('anh-hop').src = 'open_box.png';
    // 2. Cho dòng thông điệp chúc mừng hiện ra
    document.getElementById('loi-chuc').style.display = 'block';
}

🎁 Dự án Thực hành: Rương Kho Báu Khóa

Mô tả: Tạo trang web hiển thị một chiếc rương kho báu đang đóng khóa. Khi bấm nút "Mở rương", hình ảnh chiếc rương sẽ chuyển sang trạng thái mở ra, đồng thời xuất hiện một khối thông báo quà tặng lấp lánh (vốn bị ẩn ban đầu).

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

Khởi tạo thư mục dự án bai16-1, thư mục con assets chứa 2 ảnh chiếc rương (chestclose.png, chestopen.png), tạo file index.html và style.css.
Trong index.html, thiết lập tiêu đề <h1>: RƯƠNG KHO BÁU BÍ MẬT.
Tạo thẻ ảnh chiếc rương: <img id="anh-ruong" src="chestclose.png" style="width: 150px;">.
Tạo một khối chứa thông tin quà tặng bị ẩn ban đầu bằng style nội dòng:
<div id="hop-qua" style="display: none;"><h3>Chúc mừng em đã nhận được 10 hạt dẻ phép thuật! 🌰</h3></div>.
Tạo nút bấm: <button onclick="moRuong()">Mở Rương</button>.

Viết mã JavaScript trong thẻ <script> ở cuối body:

function moRuong() {
    // Thay đổi ảnh rương thành rương mở
    document.getElementById('anh-ruong').src = 'chestopen.png';
    // Hiển thị phần tử chứa quà tặng
    document.getElementById('hop-qua').style.display = 'block';
}

Trong style.css, định dạng căn giữa giao diện, đặt kiểu chữ đẹp mắt, tô màu nền rực rỡ cho khối thông báo quà tặng.