← Trở về Lộ trình học
Giáo Án Bài 13 (Lớp 4)

Biến & Kiểu Dữ Liệu

Hôm nay chúng ta sẽ làm quen với khái niệm Biến (Variable) - "chiếc hộp phép thuật" lưu giữ thông tin, cùng cách tạo ô nhập dữ liệu tương tác để trò chuyện với người dùng.

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

  • Hiểu khái niệm biến số và phân biệt từ khóa let, const.
  • Sử dụng thẻ <input type="text"> và thẻ <label> để nhận dữ liệu từ người dùng.
  • Áp dụng thuộc tính CSS margin và padding để căn chỉnh khoảng cách các khối.
  • Thành thạo phép toán cộng chuỗi + để nối các đoạn văn bản.
  • Ánh xạ thành thạo biến và ô nhập liệu sang khối lệnh Scratch tương ứng.

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

  • Biến Số & Chiếc Hộp Phép Thuật: 25 phút
  • Ô Nhập Liệu & Liên Hệ Scratch: 15 phút
  • Phép Cộng Chuỗi Phép Thuật: 20 phút
  • Khoảng Cách Margin & Padding: 15 phút
  • Dự án Máy Tạo Lời Chào: 45 phút

25 Phút Hoạt động 1: Biến Số & Chiếc Hộp Phép Thuật

"Trong cuộc sống, để cất giữ một món đồ chơi hay một cuốn sách, các em sẽ dùng một chiếc hộp và dán nhãn ghi tên bên ngoài chiếc hộp đó để khi cần tìm là thấy ngay.
Trong lập trình cũng vậy! Máy tính cần nhớ tên của em, điểm số của em hay số kẹo em có. Để làm điều đó, JavaScript cung cấp cho chúng ta một chiếc hộp lưu trữ gọi là **Biến (Variable)**. Ta chỉ cần đặt tên cho chiếc hộp và cất dữ liệu vào bên trong!"

Giáo viên hướng dẫn cách khai báo biến bằng từ khóa let (biến có thể thay đổi dữ liệu bên trong) hoặc const (hằng số giữ nguyên không thay đổi):

Cú pháp tạo biến trong JavaScript:

let tenHocSinh = 'Sóc Candy'; // Hộp chứa chữ
const soKẹoBanDau = 10;       // Hộp chứa số không đổi

15 Phút Hoạt động 2: Ô Nhập Liệu & Liên Hệ Scratch

Để trang web có thể hỏi tên người dùng, chúng ta cần tạo một ô nhập văn bản trống bằng HTML và gán nhãn hướng dẫn bên cạnh.

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

Trong Scratch, các em dùng khối cảm biến để hỏi và nhận câu trả lời:

💬 Hỏi "Tên bạn là gì?" và đợi -> Lưu kết quả vào khối [trả lời] (answer)

Trong HTML/JS, chúng ta thiết lập ô nhập và nhãn nhãn như sau:

<label>Nhập tên của em:</label>
<input type="text" id="ten_nhap" placeholder="Gõ chữ ở đây...">

Để lấy dữ liệu mà học sinh đã gõ vào ô nhập trong JavaScript, ta có thể gọi trực tiếp tên ID của ô nhập đó kèm theo thuộc tính .value:

let ten = ten_nhap.value; // lấy giá trị của ô nhập (tương đương khối trả lời trong Scratch)

20 Phút Hoạt động 3: Phép Cộng Chuỗi Phép Thuật

Khi đã có tên người dùng lưu trữ trong biến hoặc lấy trực tiếp từ ô nhập, làm thế nào để ghép nó thành câu chào? Ta sử dụng ký tự cộng + để nối các chuỗi văn bản lại với nhau.

Ví dụ nối chuỗi:

Nếu biến let ten = 'Candy';, thì câu lệnh 'Chào bạn ' + ten sẽ ghép thành 'Chào bạn Candy'.

Cú pháp nút bấm gửi lời chào:

<button onclick="let name = ten_nhap.value; alert('Chào mừng ' + name + '! 🚀')">Gửi lời chào</button>

15 Phút Hoạt động 4: Khoảng Cách Margin & Padding

Khi đặt ô nhập văn bản và nút bấm cạnh nhau, chúng thường bị dính liền rất chật chội. Chúng ta sẽ dùng CSS để tạo khoảng cách giúp trang web trông thoáng đãng, dễ nhìn hơn.

CSS khoảng cách:

  • Padding (Khoảng đệm): Là khoảng cách từ chữ bên trong thẻ đến viền của thẻ đó (làm phồng thẻ lên).
  • Margin (Lề bên ngoài): Là khoảng cách từ viền của thẻ này đẩy ra xa các thẻ xung quanh nó.
.o-nhap {
    padding: 10px; /* Làm ô nhập to hơn, dễ gõ */
    margin: 10px;  /* Đẩy các thẻ xung quanh ra xa */
}

🎁 Dự án Thực hành: Máy Tạo Lời Chào Tự Động

Mục tiêu: Tạo trang web cho phép người dùng nhập tên vào ô văn bản, sau đó bấm nút để hiển thị hộp thoại alert chào mừng tùy biến chứa tên của chính họ.

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

  1. Khởi tạo thư mục dự án bai13-1 trên ổ Z, tạo file index.html, style.css và thư mục assets.
  2. Trong index.html, thiết lập tiêu đề <h1>: MÁY TẠO LỜI CHÀO CANDY.
  3. Thêm thẻ <label>: Hãy nhập tên của em: và thẻ <input type="text" id="ten_nhap" placeholder="Gõ tên ở đây...">.
  4. Tạo một nút bấm <button> có thuộc tính onclick="let name = ten_nhap.value; alert('Chào mừng bạn ' + name + ' đến với lớp học! 🚀')".
  5. Mở file style.css để định dạng:
    • Thiết lập padding: 10px; và margin: 5px; cho ô nhập và nút bấm.
    • Thiết lập bo góc border-radius: 8px; cho các phần tử.
    • Đổi con trỏ chuột thành hình bàn tay chỉ cursor: pointer; khi di qua nút bấm.