Chào mừng bạn đến với một hướng dẫn về cách tạo một trang chấm điểm sinh viên đơn giản trong JavaScript. Tạo hệ thống chấm điểm của riêng bạn, hoặc có một trong số này như một nhiệm vụ nhàm chán? Chà, một trang chấm điểm của sinh viên không quá khó để đối phó. Đọc trên! Tôi đã bao gồm một tệp zip với tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không phải sao chép mọi thứ, hoặc nếu bạn chỉ muốn đi thẳng vào.MỤC LỤC
Tải xuống & demo
Thứ nhất, đây là liên kết tải xuống đến mã ví dụ như đã hứa.
Ghi chú nhanh
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới, nếu bạn cần câu trả lời khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận trợ giúp lập trình.
Mã hóa ví dụ Tải xuống
Nhấn vào đây để tải xuống tất cả các mã nguồn ví dụ, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên đó hoặc sử dụng nó trong dự án của riêng bạn.
Học sinh chấm điểm demo
Nhập 1-100 cho mỗi đối tượng, sau đó nhấn vào tính toán.
Được rồi, bây giờ chúng ta hãy vào một số chi tiết về cách hệ thống phân loại sinh viên đơn giản hoạt động.
Phần 1] HTML
js-grades.html
Total
Average
HTML nên khá đơn giản.
- Một hình thức HTML để nhập các điểm cho từng đối tượng. Chúng tôi sẽ sử dụng JavaScript để tạo các trường biểu mẫu.
- Tổng số điểm và trung bình.
Phần 2] JavaScript
2a] Thuộc tính
js-grades.js
var gradr = {
// [A] PROPERTIES
subjects : ["English", "Math", "Science", "Arts"],
min : 0, max: 100,
// ...
};Một lần nữa, phần đầu tiên của JavaScript là tự giải thích. Đây là những chủ đề và điểm tối thiểu/tối đa.
2b] init
js-grades.js
// [B] INIT
init : [] => {
// [B1] HTML FORM
let form = document.getElementById["gradeForm"];
form.onsubmit = [] => { return gradr.calc[]; };
// [B2] CREATE FORM FIELDS
let element;
for [let s of gradr.subjects] {
// [B2-1] SUBJECT LABEL
element = document.createElement["label"];
element.innerHTML = s;
form.appendChild[element];
// [B2-2] SUBJECT MARKS INPUT
element = document.createElement["div"];
element.name = s;
element.className = "row";
element.innerHTML = ``;
form.appendChild[element];
}
// [B2-3] SUBMIT BUTTON
element = document.createElement["input"];
element.type = "submit";
element.value = "Calculate";
form.appendChild[element];
},
// ...
window.onload = gradr.init;Trên tải cửa sổ, gradr.init[] sẽ chạy. Sẽ không giải thích từng dòng, nhưng những gì về cơ bản nó làm là lặp qua gradr.subjects và tạo các trường HTML Form.
2c] Tính toán
js-grades.js
// [C] CALCULATE GRADES
calc : [] => {
// [C1] VARIABLES
let marks, grade, average = 0, total = 0,
subjects = document.querySelectorAll["#gradeForm input[type=number]"];
// [C2] LOOP THROUGH SUBJECTS
for [let s of subjects] {
// [C2-1] ADD TO TOTAL
marks = parseInt[s.value];
total += marks;
// [C2-2] GRADE
if [marks>=70] { grade = "A"; }
else if [marks>=60] { grade = "B"; }
else if [marks>=50] { grade = "C"; }
else if [marks>=40] { grade = "D"; }
else if [marks>=30] { grade = "E"; }
else { grade = "F"; }
s.previousSibling.innerHTML = grade;
}
// [C3] TOTAL & AVERAGE
document.getElementById["gradeT"].innerHTML = total;
document.getElementById["gradeA"].innerHTML = [total / subjects.length].toFixed[2];
// [C4] PREVENT FORM SUBMIT
return false;
}Trên biểu mẫu gửi, gradr.calc[] sẽ chạy. Không cần phải hoảng sợ. Tất cả điều này làm là có được tất cả các trường , tính tổng số và cập nhật HTML. Kết thúc.
Kiểm tra khả năng tương thích
- Chức năng mũi tên - Caniuse
Ví dụ này sẽ hoạt động trên hầu hết các trình duyệt.
Liên kết & Tài liệu tham khảo
- Ví dụ về Codepen - Học sinh JavaScript
KẾT THÚC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cùng. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc!