Hôm nay chúng ta sẽ tìm hiểu cách nhận dữ liệu dạng số, chuyển đổi kiểu dữ liệu bằng hàm Number() và thực hiện các phép tính số học cơ bản cộng, trừ, nhân, chia.
<input type="number"> để giới hạn chỉ cho phép nhập số.Number() để quy đổi.+, trừ -, nhân *, chia /."Khi làm các ứng dụng tính toán như máy tính bỏ túi hoặc nhập số lượng kẹo, nếu người dùng vô tình gõ chữ vào ô nhập thì máy tính sẽ không tính được và báo lỗi.
Để tránh điều này, HTML cung cấp một loại ô nhập dữ liệu đặc biệt là **input type="number"** chỉ cho phép nhập các ký tự số, giúp bảo vệ dữ liệu đầu vào luôn chuẩn xác!"
Giáo viên hướng dẫn cú pháp thiết lập thẻ nhập số:
<input type="number" id="o-so-a" placeholder="Nhập số thứ nhất...">
Khi ta lấy giá trị từ ô nhập bằng lệnh .value, máy tính luôn coi đó là kiểu Chuỗi (văn bản) kể cả khi ta gõ số. Ví dụ, nếu nhập số 5 và 10, máy tính sẽ hiểu là chữ '5' và chữ '10'. Khi thực hiện phép cộng '5' + '10', kết quả sẽ là '510' chứ không phải là 15!
Để xử lý đúng phép cộng toán học, ta phải dùng hàm Number() để đổi kiểu văn bản sang kiểu số thực sự.
Trong Scratch, khi ta gõ số vào ô hỏi, Scratch tự động chuyển đổi sang dạng số học để thực hiện các phép tính trong nhóm Các phép toán (Operators).
Trong JavaScript, chúng ta phải chuyển đổi thủ công bằng hàm Number():
let soA = Number(document.getElementById('o-so-a').value);
let soB = Number(document.getElementById('o-so-b').value);
let ketQua = soA + soB; // Kết quả sẽ là phép cộng số học chính xác
Học sinh làm quen với các ký hiệu phép toán số học cơ bản trong JavaScript:
+. Ví dụ: a + b-. Ví dụ: a - b* (dấu sao). Ví dụ: a * b/ (dấu gạch chéo). Ví dụ: a / bĐể các ô nhập số và các nút phép toán hiển thị ngăn nắp, thẳng hàng như một chiếc máy tính thật, ta sử dụng CSS để định dạng kích thước, khoảng cách và bo góc.
.o-so {
width: 80px;
padding: 10px;
font-size: 18px;
text-align: center;
border-radius: 5px;
border: 2px solid #ccc;
}
.nut-tinh {
padding: 10px 15px;
font-size: 16px;
margin: 5px;
cursor: pointer;
border-radius: 5px;
}
Mô tả: Tạo trang web Máy tính bỏ túi đơn giản cho phép học sinh nhập vào 2 số, sau đó bấm các nút "Cộng (+)", "Trừ (-)" để tính toán và hiển thị kết quả chính xác lên màn hình.
bai18-1, thư mục con assets, tạo file index.html và style.css.index.html, thiết lập tiêu đề <h1>: MÁY TÍNH CANDY.<input type="number" id="so-a" class="o-so" placeholder="Số A"> và <input type="number" id="so-b" class="o-so" placeholder="Số B">.
<button class="nut-tinh" onclick="tinhCong()">Cộng (+)</button> và <button class="nut-tinh" onclick="tinhTru()">Trừ (-)</button>.
<h2 id="ket-qua">Kết quả: ?</h2>.<script> ở cuối body:
function tinhCong() {
let a = Number(document.getElementById('so-a').value);
let b = Number(document.getElementById('so-b').value);
let tong = a + b;
document.getElementById('ket-qua').innerHTML = 'Kết quả: ' + tong;
}
function tinhTru() {
let a = Number(document.getElementById('so-a').value);
let b = Number(document.getElementById('so-b').value);
let hieu = a - b;
document.getElementById('ket-qua').innerHTML = 'Kết quả: ' + hieu;
}
style.css, căn chỉnh các ô nhập và nút bấm thẳng hàng, định dạng phông chữ to rõ ràng, dễ nhìn.