Hôm nay chúng ta sẽ tìm hiểu cách gom nhóm các dòng mã lệnh JavaScript vào một chiếc "hộp phép thuật" gọi là Hàm (Function) để tái sử dụng mã nguồn một cách khoa học và chuyên nghiệp.
<script> độc lập đặt ở cuối trang để viết mã JavaScript.function và gọi hàm từ thuộc tính onclick."Khi muốn biểu diễn một chuỗi hành động như 'nhảy lên', 'xoay vòng', 'vỗ tay' nhiều lần, thay vì cứ mỗi lần lại nói cả 3 từ đó, chúng ta có thể đặt tên chung cho chuỗi hành động này là 'Hành động chào mừng'. Mỗi lần gọi tên 'Hành động chào mừng' là cả 3 việc kia tự động được thực hiện!
Trong lập trình, chiếc hộp gom nhóm đó gọi là **Hàm (Function)**."
Trong Scratch, khi muốn tạo một nhóm khối lệnh riêng để dùng nhiều lần, các em dùng mục:
🧱 Tạo một khối (Make a Block) -> Định nghĩa [Khối của tôi] (Define [My Block])
Trong JavaScript, chúng ta định nghĩa một khối lệnh tương đương bằng từ khóa function.
Trước đây, chúng ta viết các câu lệnh JS trực tiếp bên trong thuộc tính onclick="...". Việc này khiến thẻ HTML bị dài dòng, rối mắt. Để khắc phục, ta sẽ đưa toàn bộ code JS vào thẻ <script></script> đặt riêng biệt ở cuối thẻ <body>.
<body>
<h1>Trang web của em</h1>
<button onclick="tenHam()">Bấm vào đây</button>
<!-- Viết code JavaScript ở cuối trang -->
<script>
// Viết code JS ở đây
</script>
</body>
Học sinh tìm hiểu cú pháp để định nghĩa một hàm và cách liên kết hàm đó với sự kiện click chuột của thẻ HTML.
function chaoHoi() {
alert('Chào mừng em đến với khu rừng phép thuật! 🌳');
document.getElementById('tieu-de').style.color = 'green';
}
Khi muốn nút bấm chạy hàm này, ta gọi tên hàm kèm cặp dấu ngoặc đơn () trong thuộc tính onclick:
<button onclick="chaoHoi()">Bấm để gọi phép thuật</button>
Khi thiết kế các nút bấm hoặc khối hộp, ta cần hiểu nguyên lý **CSS Box Model** (Mô hình hộp) để tính toán kích thước thực tế của thẻ hiển thị trên màn hình trình duyệt.
Chiều rộng thực tế hiển thị trên trình duyệt của một phần tử bằng:
Chiều rộng thực tế = width + padding trái/phải + border trái/phải
.hop {
width: 200px;
padding: 20px;
border: 5px solid black;
/* Chiều rộng thực tế trên màn hình = 200 + 40 (padding) + 10 (border) = 250px */
}
Mô tả: Tạo một trang web chứa 3 nút bấm tương ứng với 3 loài vật: Chó 🐶, Mèo 🐱, Chim 🐦. Khi bấm nút nào, trang web hiển thị chữ mô tả tiếng kêu của con vật đó và đổi màu nền trang web tương ứng bằng cách gọi các hàm JavaScript tương ứng.
bai15-1, thư mục con assets, tạo file index.html và style.css.index.html, tạo tiêu đề <h1>: HỘP NHẠC RỪNG XANH và thẻ phụ <h2 id="tieng-keu">Bấm nút để nghe tiếng kêu</h2>.<button onclick="tiengCho()">Chú Chó 🐶</button>.<script> ở cuối body và viết 3 hàm:
function tiengCho() { document.getElementById('tieng-keu').innerHTML = 'Gâu gâu! 🐶'; document.body.style.backgroundColor = '#ffeaa7'; }function tiengMeo() { document.getElementById('tieng-keu').innerHTML = 'Meo meo! 🐱'; document.body.style.backgroundColor = '#fab1a0'; }function tiengChim() { document.getElementById('tieng-keu').innerHTML = 'Chíp chíp! 🐦'; document.body.style.backgroundColor = '#81ecec'; }style.css, căn giữa trang, định dạng nút bấm to rõ ràng bằng cách áp dụng padding và margin thích hợp dựa theo quy tắc Box Model.Vận dụng toàn diện kiến thức Bài 10 - Bài 15 để xây dựng hệ thống sân khấu âm thanh tương tác chuyên nghiệp!
🚀 Mở Bài Tập Về Nhà Bài 15 →