Trong hướng dẫn này, tôi sẽ chia sẻ cách tôi xây dựng Javascript Calculator đơn giản từ đầu. Tôi sẽ giải thích tất cả logic và các bước chi tiết
Mục tiêu của tôi là rèn luyện kỹ năng xây dựng máy tính Javascript đơn giản, nhưng đồng thời làm cho nó hoạt động đầy đủ và bao gồm tất cả các trường hợp cạnh có thể xảy ra
Thành thật mà nói, nó khó hơn tôi nghĩ 🤔, vì các hướng dẫn tôi tìm thấy, không đầy đủ. Do đó, một số giải pháp và trường hợp cạnh tôi phải tự tìm
Là một nhà thiết kế giao diện người dùng, tôi đã quyết định tạo kiểu cho máy tính JS theo kiểu giao diện người dùng Windows 95/98 🤟
Vì vậy, hãy cùng xem dự án đang hoạt động bên dưới ⬇️
Dự án. Máy tính Javascript đơn giản
// cách tạo máy tính javascriptXem Bút không có tiêu đề của jsSecrets [@jssecrets] trên CodePen
Nguyên tắc làm việc cơ bản
// cách xây dựng máy tính javascriptTóm lại, Máy tính JavaScript là gì?
Máy tính cơ bản có thể cộng, trừ, nhân và chia các số
Máy tính cao cấp hơn có nhiều chức năng hơn như. lũy thừa, căn bậc hai, phần trăm, v.v.
nguyên tắc làm việc
Phiên bản làm việc đơn giản nhất [SWV]
hàm toán họcPhiên bản hoạt động đơn giản nhất của máy tính JS phải có bốn hàm toán học cơ bản
1️⃣ Bổ sung
2️⃣ Phép trừ
3️⃣ Phép nhân
4️⃣ Bộ phận
hàm bằngtrường hợp cạnhVí dụ, phép chia cho số không
Khái niệm cốt lõi
// cách xây dựng ứng dụng máy tính javascriptHãy tiếp tục với khái niệm cốt lõi về cách máy tính JS hoạt động
Hiểu khái niệm cốt lõi là một phần quan trọng. Vì khi nắm được nguyên lý – phương pháp có thể khác
1️⃣ HTML
Chúng tôi có màn hình và các nút
2️⃣ CSS
Tôi đã sử dụng CSS Grid để bố trí tất cả các nút. Mọi thứ khác là CSS cơ bản
3️⃣ Javascript
Tất cả công việc được thực hiện ở đây 😊
Trong máy tính của chúng tôi có bốn phần để xem xét
1️⃣ để nhận dạng số được nhập đầu tiên
2️⃣ để nhận biết phép toán [+, -, * hoặc /]
3️⃣ để nhận dạng số đã nhập thứ hai
4️⃣ nối 1, 2 và 3 với “bằng”
?
giải thích mã
// cách xây dựng máy tính javascriptHTML
// cách viết mã máy tính javascript
0
7
8
9
+
4
5
6
-
1
2
3
*
0
C
=
/
Ở đây tôi đã tạo vùng chứa chính
7
7
+
+
C
=
7
7
+
+
C
=
7
7
+
+
C
=
7
7
+
+
C
=
7
7
+
+
C
= Tìm hiểu sâu hơn về đánh dấu nút
// cách tạo một máy tính javascript
7
7
+
+
C
= Mỗi nút có thuộc tính
7
7
+
+
C
= Và mọi thuộc tính đều mang tính mô tả
chữ số là
7
7
+
+
C
= hoạt động là
7
7
+
+
C
= ✅ Nên đặt tên mô tả cho biến, lớp, v.v.
CSS
// cách thiết kế máy tính javascript____10_______Không có quá nhiều kiểu dáng đặc biệt trong dự án máy tính JS của tôi
Đầu tiên là thiết lập lại CSS cơ bản
Sau đó, tôi đã sử dụng CSS Grid để bố trí tất cả các nút
Đối với kiểu giao diện người dùng Windows 95/98, tôi đã sử dụng các kiểu từ thư viện bên ngoài [liên kết ở cuối bài viết]
JS
// cách tạo một máy tính javascript____11_______Mã JS là trọng tâm chính của dự án, vì vậy tôi sẽ chia nhỏ từng bước về cách tôi xây dựng máy tính
Biến
// cách tạo ứng dụng máy tính javascript//// Variables
// variable "a" will hold a first number
let a = '';
// variable "b" will hold a second number
let b = '';
// variable "currentOperation" will hold a current operation [+,-,* or /]
let currentOperation = '';
// variable "isCompleted" is needed for operation logic purposes
// operation is completed or not
let isCompleted = false;
// DOM elements
const result = document.querySelector['.result'];
const digits = document.querySelectorAll['[data-digit]'];
const operations = document.querySelectorAll['[data-operation]'];
const equalsBtn = document.querySelector['[data-equals]'];
const clearBtn = document.querySelector['[data-clear]']; Chức năng
Chức năng làm sạch màn hình// cleanScreen[] function
// it cleans the result screen
// it is used as a utility "invisible" function
// to create effect of concating digits into number
const cleanScreen = [] => {
result.textContent = '';
};// edgeCase[] function
// this is sort of "zeroing"
// reverts everything to default state
// there are some edge cases
// - division by 0
// - overflow
// the "message" parameter is used
// as we have a different messages to display
// in each case
// and as you can see
// all variables go back to original state
const edgeCase = [message] => {
result.textContent = message;
a = '';
b = '';
currentOperation = '';
isCompleted = false;
};
// reusable functions are good practice
// create once - use many times
// DRY - Don't Repeat Yourself ?Mẹo
Bạn nên viết một hàm nếu mã được sử dụng nhiều lần
DRY – Đừng lặp lại chính mình?
Xóa tất cả chức năng// clearAll[] function
// this function is attached to "C" button
// it sets everything to its original state
const clearAll = [] => {
edgeCase['0'];
};// enterDigit[] function
// this functions attached only to the digit buttons
const enterDigit = [event] => {
// we use "event" argument to be able
// to retrieve the data from the digit
// which is clicked
// [as we have more than one "digit"element]
// "event.currentTarget" allows us to do that
// "symbol" is local variable that holds
// digit character from the button clicked
// the value is taken from
// data-digit="VALUE" attribute
let symbol = event.currentTarget.dataset.digit;
// utility function [explained above]
cleanScreen[];
// first number input
// check is: if second number is empty
// and operation is empty
// then add a entered symbol into first number
if [b === '' && currentOperation === ''] {
a += symbol;
// "result" pane will display first number
// parseInt[a, 10] is used to prevent
// leading zero case [02078]
// as JS removes it by default
// parseInt[02078, 10] = 2078
result.textContent = parseInt[a, 10];
// simple overflow protection
// during input phase
// if number is too big or small
// the message appears
if [a >= 1e20 || a