Đây là một bài viết hoành tráng nơi bạn học cách xây dựng một máy tính từ đầu. Chúng tôi sẽ tập trung vào JavaScript mà bạn cần viết—cách suy nghĩ về việc xây dựng máy tính, cách viết mã và cuối cùng là cách làm sạch mã của bạn
Đến cuối bài viết, bạn sẽ nhận được một máy tính hoạt động chính xác như máy tính iPhone [không có chức năng
if [!action] {
if [displayedNum === '0'] {
display.textContent = keyContent
}
}điều kiện tiên quyết
Trước khi bạn cố gắng theo dõi hết bài học, vui lòng đảm bảo rằng bạn có trình độ JavaScript tốt. Tối thiểu, bạn cần biết những điều này
- Câu lệnh if/else
- Đối với vòng lặp
- hàm JavaScript
- Toán tử
3 vàif [!action] { if [displayedNum === '0'] { display.textContent = keyContent } }
4if [!action] { if [displayedNum === '0'] { display.textContent = keyContent } } - Cách thay đổi văn bản với thuộc tính
5if [!action] { if [displayedNum === '0'] { display.textContent = keyContent } } - Cách thêm trình xử lý sự kiện với mẫu ủy quyền sự kiện
Trước khi bắt đầu
Tôi khuyên bạn nên thử và tự xây dựng máy tính trước khi làm theo bài học. Đó là một cách thực hành tốt vì bạn sẽ rèn luyện bản thân để suy nghĩ như một nhà phát triển
Hãy quay lại bài học này sau khi bạn đã cố gắng trong một giờ [không quan trọng bạn thành công hay thất bại. Khi bạn cố gắng, bạn nghĩ, và điều đó sẽ giúp bạn tiếp thu bài học nhanh gấp đôi]
Cùng với đó, hãy bắt đầu bằng cách tìm hiểu cách thức hoạt động của một máy tính
Xây dựng máy tính
Đầu tiên, chúng tôi muốn xây dựng máy tính
Máy tính bao gồm hai phần. màn hình và các phím
0
…
Chúng ta có thể sử dụng CSS Grid để tạo các phím vì chúng được sắp xếp theo định dạng giống như lưới. Điều này đã được thực hiện cho bạn trong tệp khởi động. Bạn có thể tìm thấy tệp khởi động tại bút này
.calculator__keys {
display: grid;
/* other necessary CSS */
}Để giúp chúng tôi xác định các khóa toán tử, thập phân, rõ ràng và bằng nhau, chúng tôi sẽ cung cấp một thuộc tính hành động dữ liệu mô tả những gì họ làm
+
-
Chủ Đề