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

Giỏ Trái Cây Của Sóc (Mảng & Danh Sách)

Hôm nay chúng ta sẽ tìm hiểu cách quản lý nhiều thông tin cùng lúc bằng Mảng (Array) trong JavaScript và hiển thị chúng ngăn nắp bằng thẻ Danh Sách trong HTML.

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

Hiểu khái niệm Mảng (Array) dùng để chứa nhiều giá trị trong một biến duy nhất.
Sử dụng phương thức .push() để thêm một phần tử mới vào cuối mảng.
Sử dụng các thẻ danh sách HTML: <ul>, <ol>, <li> để trình bày thông tin.
Áp dụng thuộc tính CSS list-style-type: none; để ẩn dấu chấm đầu dòng mặc định.
Ánh xạ khái niệm mảng trong JavaScript sang khối Danh sách (List) tương ứng trong Scratch.

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

Mảng (Array) & Liên Hệ Danh Sách Scratch: 25 phút
Thêm Phần Tử Với .push(): 15 phút
Thẻ Danh Sách HTML (ul, ol, li): 20 phút
CSS Ẩn Ký Tự Đầu Dòng list-style-type: 15 phút
Dự án Giỏ Trái Cây Của Sóc: 45 phút

25 Phút Hoạt động 1: Mảng (Array) & Liên Hệ Danh Sách Scratch

"Trước đây, mỗi chiếc hộp biến số chỉ chứa được một món đồ (một chữ hoặc một số). Vậy nếu Sóc Candy muốn đi chợ mua 10 loại quả khác nhau, chẳng lẽ chúng ta phải tạo ra 10 biến số khác nhau sao?
Rất may là trong lập trình có một loại hộp đặc biệt tên là **Mảng (Array)**. Mảng giống như một chiếc giỏ siêu to khổng lồ giúp lưu trữ nhiều món đồ cùng lúc!"

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

Trong Scratch, các em đã làm quen với việc lưu trữ danh sách bằng mục:

📋 Tạo một danh sách (Make a List) trong nhóm Các biến số

Trong JavaScript, ta khai báo một mảng rỗng bằng cặp dấu ngoặc vuông []:

let gioTraiCay = []; // Chiếc giỏ rỗng chưa có quả nào

15 Phút Hoạt động 2: Thêm Phần Tử Với .push()

Để bỏ thêm một món đồ chơi mới hay một loại trái cây mới vào cuối chiếc giỏ mảng của mình, JavaScript cung cấp phương thức .push().

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

Trong Scratch, các em thêm phần tử vào danh sách bằng khối:

➕ thêm [táo] vào [danh sách quả] (add [apple] to [list])

Trong JavaScript, ta viết như sau:

gioTraiCay.push('Táo'); // Bỏ thêm quả Táo vào giỏ
gioTraiCay.push('Chuối'); // Bỏ thêm quả Chuối vào cuối giỏ

20 Phút Hoạt động 3: Thẻ Danh Sách HTML (ul, ol, li)

Để trình bày danh sách các loại quả lên màn hình cho người dùng thấy, HTML cung cấp hai định dạng danh sách chính:

Các loại thẻ danh sách:

Thẻ <ul> (Unordered List): Danh sách không thứ tự (các phần tử được đánh dấu bằng chấm tròn đen mặc định).
Thẻ <ol> (Ordered List): Danh sách có thứ tự (được đánh số tự động 1, 2, 3...).
Thẻ <li> (List Item): Thẻ con chứa nội dung từng dòng bên trong ul hoặc ol.

<ul>
  <li>Quả Cam</li>
  <li>Quả Xoài</li>
</ul>

15 Phút Hoạt động 4: CSS Ẩn Ký Tự Đầu Dòng list-style-type

Khi hiển thị danh sách dạng thẻ <ul>, các dấu chấm tròn đen trông khá thô sơ. Ta có thể dùng CSS để ẩn các dấu chấm này và tự do định dạng lại khoảng cách dòng.

CSS xóa chấm tròn danh sách:

ul {
    list-style-type: none; /* Xóa bỏ chấm tròn đen đầu dòng */
    padding: 0;           /* Xóa khoảng đệm mặc định của ul */
}
li {
    padding: 8px;
    margin: 5px 0;
    background-color: #f1f2f6;
    border-radius: 5px;
}

🎁 Dự án Thực hành: Giỏ Trái Cây Của Sóc

Mục tiêu: Tạo trang web cho phép người dùng gõ tên loại trái cây vào ô nhập, sau đó bấm nút "Thêm Quả" để thêm tên quả đó vào mảng JavaScript đồng thời chèn thêm một dòng <li> hiển thị lên màn hình.

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

Khởi tạo thư mục dự án bai19-1, thư mục con assets, tạo file index.html và style.css.
Trong index.html, thiết lập tiêu đề <h1>: GIỎ TRÁI CÂY CỦA SÓC.
Tạo ô nhập: <input type="text" id="trai-cay" placeholder="Gõ tên quả...">.
Tạo danh sách rỗng để chuẩn bị chứa các quả: <ul id="danh-sach-qua"></ul>.
Tạo nút bấm: <button onclick="themQua()">Thêm Quả</button>.

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

let gio = []; // Khai báo mảng chứa hoa quả ban đầu rỗng

function themQua() {
    // Lấy tên quả vừa nhập
    let tenQua = document.getElementById('trai-cay').value;
    
    if (tenQua.trim() !== "") {
        // Thêm vào mảng gio
        gio.push(tenQua);
        // Hiển thị thêm một thẻ li mới vào danh sách ul
        document.getElementById('danh-sach-qua').innerHTML += '' + tenQua + '';
        // Xóa sạch nội dung ô nhập để học sinh nhập quả tiếp theo
        document.getElementById('trai-cay').value = "";
    }
}

Trong style.css, định dạng cho thẻ ul có list-style-type: none; và căn chỉnh khoảng cách các dòng li cho đẹp mắt.