Hôm nay chúng ta sẽ làm quen với tư duy rẽ nhánh và đưa ra quyết định của máy tính thông qua câu lệnh điều kiện If - Else trong JavaScript.
if - else.== trong biểu thức điều kiện..className trong JS để thay đổi class CSS của thẻ động."Trong cuộc sống, chúng ta luôn đưa ra lựa chọn dựa trên điều kiện: 'Nếu trời mưa thì em đi xe buýt,
ngược lại nếu trời nắng thì em tự đạp xe đi học'.
Trong lập trình, để máy tính thông minh biết đưa ra quyết định khi người dùng nhập đúng hay nhập sai
mật khẩu, chúng ta sử dụng cấu trúc **If - Else**."
Trong Scratch, các em dùng khối điều kiện rẽ nhánh trong nhóm Điều khiển (Control):
🔶 Khối [Nếu... thì... nếu không thì...] (If... then... else)
Trong JavaScript, chúng ta viết như sau:
if (điều_kiện) {
// Code chạy khi điều kiện ĐÚNG
} else {
// Code chạy khi điều kiện SAI
}
Để kiểm tra hai giá trị có bằng nhau không (ví dụ: mật khẩu người dùng nhập có bằng mật khẩu bí mật
không), ta sử dụng toán tử so sánh bằng == (hai dấu bằng liên tiếp).
let ten = 'Candy';).
if (matkhau == 'candy')).Khi người dùng nhập đúng mật khẩu, ta muốn thông báo hiện chữ màu xanh lá cây; khi nhập sai, ta muốn chữ
đổi sang màu đỏ cảnh báo. Để thay đổi màu chữ nhanh chóng, ta dùng thuộc tính .className để
gán lớp CSS mới cho thẻ HTML.
// Gán class "thanh-cong" cho thẻ thông báo
document.getElementById('thong-bao').className = 'thanh-cong';
// Gán class "that-bai" cho thẻ thông báo
document.getElementById('thong-bao').className = 'that-bai';
Học sinh chuẩn bị sẵn các lớp CSS định hình màu sắc trạng thái trong file style.css để sẵn sàng cho JavaScript gọi gán lớp.
/* Định dạng màu xanh khi thành công */
.thanh-cong {
color: #2ecc71;
font-weight: bold;
}
/* Định dạng màu đỏ khi thất bại */
.that-bai {
color: #e74c3c;
font-weight: bold;
}
Mô tả: Thiết kế một ô nhập mật khẩu và một nút bấm "Mở Khóa". Nếu học sinh nhập đúng từ khóa mật khẩu là "candy", trang web hiển thị thông báo chữ màu xanh: "Chúc mừng! Khóa đã mở!". Nếu nhập bất kỳ từ khóa nào khác, trang hiển thị thông báo chữ màu đỏ: "Mật khẩu sai rồi!".
bai17-0, thư mục con assets, tạo file
index.html và style.css.index.html, tạo tiêu đề <h1>: MẬT KHẨU MỞ KHÓA.
<input type="text" id="o-mat-khau" placeholder="Nhập mật khẩu...">.<p id="thong-bao">Nhập mật khẩu và ấn Mở Khóa</p>.<button onclick="moKhoa()">Mở Khóa</button>.style.css, định dạng căn giữa trang và viết 2 class: .thanh-cong { color: green; } và .that-bai { color: red; }.
moKhoa() trong thẻ <script> ở cuối body:
function moKhoa() {
// Lấy nội dung chữ đã nhập vào ô nhập mật khẩu
let pass = document.getElementById('o-mat-khau').value;
let thongBao = document.getElementById('thong-bao');
if (pass == 'candy') {
thongBao.innerHTML = 'Chúc mừng! Khóa đã mở! 🎉';
thongBao.className = 'thanh-cong';
} else {
thongBao.innerHTML = 'Mật khẩu sai rồi! ❌';
thongBao.className = 'that-bai';
}
}