Hôm nay chúng ta sẽ làm quen với JavaScript (JS) - "năng lượng phép thuật" giúp thổi hồn cho trang web tĩnh trở nên sống động và biết phản hồi khi người dùng tương tác.
alert() hiển thị hộp thư thoại.onclick nội dòng trên thẻ HTML.cursor: pointer để định hình con trỏ chuột tương tác."Các em đã học HTML để dựng khung xương cho ngôi nhà (trang web), và học CSS để sơn màu, trang trí cho ngôi nhà thật đẹp. Nhưng ngôi nhà đó vẫn đang đứng yên, giống như một bức tranh tĩnh.
Hôm nay, cô/thầy sẽ đưa cho các em một chiếc 'đũa phép' mang tên **JavaScript**. JavaScript sẽ giúp trang web biết hoạt động: khi ta gõ cửa (click chuột), cửa sẽ mở; khi ta bấm nút, trang web sẽ trò chuyện với chúng ta!"
Giáo viên lấy ví dụ thực tế: Một chiếc tivi (HTML là vỏ và màn hình, CSS là màu sắc và viền tivi đẹp mắt, còn JavaScript chính là mạch điện và điều khiển từ xa giúp tivi chuyển kênh khi ta bấm nút).
Để bắt đầu tương tác, ta cần nói cho máy tính biết khi nào thì thực hiện hành động. Cách dễ nhất là khi ta click chuột vào một phần tử nào đó.
Trong Scratch, khi muốn nhân vật hoạt động khi bấm chuột, các em dùng khối:
🖱️ Khi bấm vào nhân vật này (When this sprite clicked)
Trong HTML/JS, chúng ta sử dụng thuộc tính tương đương đặt ngay bên trong thẻ:
onclick="..."
Bất kỳ câu lệnh JavaScript nào đặt bên trong dấu ngoặc kép của onclick sẽ được chạy khi người dùng nhấp chuột vào thẻ đó.
Câu lệnh đơn giản nhất để gửi một lời chào từ JavaScript là alert(). Câu lệnh này sẽ hiện một hộp thư nhỏ nhảy ra giữa màn hình trình duyệt.
<button onclick="alert('Lời chào của em')">Bấm vào đây!</button>
Lưu ý quan trọng cho học sinh lớp 4:
alert() phải được bọc trong dấu nháy đơn '' (vì dấu nháy kép "" đã dùng cho thuộc tính onclick bên ngoài rồi).Để người dùng biết một hình ảnh hoặc một khối có thể click được, ta nên đổi hình dạng con trỏ chuột từ hình mũi tên sang hình bàn tay chỉ ngón tay khi rê chuột qua.
.nut-bam {
cursor: pointer;
}
Từ bây giờ, bất kỳ thẻ nào có class nut-bam sẽ tự động xuất hiện ngón tay chỉ khi rê chuột qua, báo hiệu: "Hãy click vào tôi đi!".
Mục tiêu: Tạo một trang web chứa một hình ảnh hộp quà. Khi rê chuột vào hộp quà, con trỏ đổi thành bàn tay chỉ. Khi bấm vào hộp quà, trang web hiện thông báo tặng kẹo ngọt ngào!
bai12-1 trong thư mục của em trên ổ Z.index.html và file style.css.<body> của index.html, tạo một tiêu đề <h1>: VƯƠNG QUỐC QUÀ TẶNG CANDY.<div class="gift-box" onclick="alert('Bùm! Chúc mừng em đã nhận được một viên kẹo mút khổng lồ! 🍭')">..gift-box:
width: 200px;).cursor: pointer; để đổi trỏ chuột thành hình bàn tay chỉ.