Trình xử lý sự kiện JavaScript của Máy tính

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 javascript

Xem 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 javascript

Tó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.

Máy tính Javascript đơn giản

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ọc

Phiê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ằng

trường hợp cạnh

Ví 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 javascript

Hã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 javascript

HTML

// 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
 
=           

2 và nó chứa hai vùng chứa con.

        
7
7
      
+ 
+
 
C
 
=           

3 và

        
7
7
      
+ 
+
 
C
 
=           

4

        
7
7
      
+ 
+
 
C
 
=           

3 chứa kết quả của các hoạt động

        
7
7
      
+ 
+
 
C
 
=           

4 là các nút

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
 
=           

7 sẽ được sử dụng trong Javascript để chọn mục đích

Và mọi thuộc tính đều mang tính mô tả

chữ số là

        
7
7
      
+ 
+
 
C
 
=           

8

hoạt động là

        
7
7
      
+ 
+
 
C
 
=           

9

✅ 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 = '';
};

Chức năng trường hợp cạnh

// 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');
};

Hàm nhập số

// 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 <= -1e20) {
      result.textContent = 'Overflow';
      a = '';
      return;
    }
  }
  // this case comes into play
  // when the very first operation is completed
  // check is:
  // if first number is not empty
  // and if second number is not empty
  // and our isCompleted flag is true
  // as you can see it will play only once
  // the entered digit will go into second number
  // and isCompleted flag will become "false"
  // next digits will go into second number in a normal way
  // see below
  else if (a !== '' && b !== '' && isCompleted) {
    b = symbol;
    isCompleted = false;
    result.textContent = parseInt(b, 10);
  }
  // second number input
  // as you can see it is "else"
  // all checks has been made
  // code is the same as first number's
  else {
    b += symbol;
    result.textContent = parseInt(b, 10);
  // simple overflow protection
  // during input phase
  // if number is too big or small
  // the message appears
    if (b >= 1e20 || b <= -1e20) {
      result.textContent = 'Overflow';
      b = '';
      return;
    }
  }
};

hàm bằng

// equalsFunction() function
const equalsFunction = () => {

  // non-standard behavior
  // when user enters a first number and operation
  // and then clicks "=" button
  // then second number is set to the first one 
  if (b === '') b = a;

  // the core
  // we determine what "currentOperation" variable holds
  // and act accordingly
  // parseInt(a, 10) is used to make sure
  // variables act as Number
  switch (currentOperation) {
    case '+':
      a = parseInt(a, 10) + parseInt(b, 10);
      break;
    case '-':
      a = parseInt(a, 10) - parseInt(b, 10);
      break;
    case '*':
      a = parseInt(a, 10) * parseInt(b, 10);
      break;
    case '/':
  // simple "division by 0" check
      if (b === '0') {
  // edgeCase function (see above)
        edgeCase('Error');
        return;
      }
      a = parseInt(a, 10) / parseInt(b, 10);
      break;
  }
  // we set "isCompleted" to "true"
  // to know that the very first operation
  // had taken place
  isCompleted = true;
  // simple overflow protection  
  // if the result is too big or small
  // the message appears
  if (a >= 1e20 || a <= -1e20) {
  // edgeCase function (see above)
    edgeCase('Overflow');
    a = 0;
    return;
  }
  result.textContent = a;
};

Hoạt động nhập chức năng

        
7
7
      
+ 
+
 
C
 
=           

0

Người nghe sự kiện

Ở đây mọi thứ khá đơn giản

Trình xử lý sự kiện cho tất cả các chữ số và các nút hoạt động đang được đính kèm thông qua vòng lặp

/* Basic reset */
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
/* font loading */
@font-face {
  font-family: "Windows 95";
    src: url('https://1674814792-20d01e3358a6b87a.wp-transfer.sgvps.net/wp-content/uploads/2022/08/w95.woff2')
    format('woff2');
  font-weight: normal;
  font-style: normal;
}
.red {
  color: #ff0000;
}
.blue {
  color: #0000ff;
}
.red-dark {
  color: #800000;
}
* {
  font-family: "Windows 95", sans-serif;
}
body {
  height: 100vh;
  background: #eaeaea;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.calculator {
  padding: 24px;
  background: #c0c0c0;
  border-width: 3px;
  border-style: solid;
  border-right-color: #606f6f;
  border-bottom-color: #606f6f;
  border-top-color: #f1f1f1;
  border-left-color: #f1f1f1;
}
.calculator .screen .result {
  width: 100%;
  max-width: 100%;
  height: 68px;
  text-align: right;
  padding: 16px;
  font-size: 32px;
  font-weight: bold;
  color: #000;
  background-color: #fff;
  border-width: 3px;
  border-style: solid;
  border-right-color: #f1f1f1;
  border-bottom-color: #f1f1f1;
  border-top-color: #606f6f;
  border-left-color: #606f6f;
}
.calculator .buttons {
/*CSS grid to layout all buttons */
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.calculator .buttons button {
  font-size: 32px;
  font-weight: bold;
}
.calculator .buttons button:hover {
  cursor: pointer;
}
/* button styles are copied from external css library */
.btn {
  position: relative;
  transition: all 0.2s ease;
  letter-spacing: 0.025em;
  padding: 0.7rem 2.1rem;
}
.btn:before,
.btn:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  display: block;
  background: transparent;
  z-index: 9;
  top: 0;
  left: 0;
}
.btn:before {
  width: 100%;
  height: 100%;
  border-top: 2px solid #f1f1f1;
  border-left: 2px solid #f1f1f1;
  border-right: 2px solid #606f6f;
  border-bottom: 2px solid #606f6f;
}
.btn:not(:disabled):not(.disabled):active:before,
.btn:not(:disabled):not(.disabled):active:focus:before {
  border-color: transparent;
}
.btn-primary {
  background-color: #c0c0c0;
  border-color: #a0a0a0;
}
.btn-primary:hover {
  background-color: #c0c0c0;
  border-color: #a0a0a0;
}
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: none;
}

0

        
7
7
      
+ 
+
 
C
 
=           

1Mã coder calc ☺

ý tưởng dự án

1️⃣ Để mở rộng thêm máy tính Javascript này. Để thêm dấu thập phân, xóa lùi và các hoạt động nâng cao như chức năng nguồn, v.v.

2️⃣ Để tạo máy tính như trong iPhone. Khi ở chế độ dọc, máy tính tối giản. Khi calc ở chế độ nằm ngang, nó sẽ hiển thị tất cả các chức năng

3️⃣ Nhiều ý tưởng từ máy tính Windows

Ý tưởng Máy tính Javascript

Phải làm gì tiếp theo?

Bạn có thể kiểm tra một số dự án giao diện người dùng của tôi

1️⃣ Trình đơn thả xuống tùy chỉnh Javascript

2️⃣ Hòa tấu Javascript

3️⃣ Cửa sổ bật lên Javascript

Phần kết luận

Đó là máy tính Javascript đầu tiên của tôi mà tôi đã xây dựng từ đầu. Tôi đã cố gắng bao gồm tất cả các chức năng cơ bản và các trường hợp cạnh. Và tôi có thể nói rằng tôi hài lòng với thử nghiệm đầu tiên của mình. Hi vọng trong tương lai mình sẽ build bản hoàn chỉnh với nhiều chức năng hơn

Hãy thử lập mô hình máy tính JS này và cho tôi biết nó hoạt động như thế nào trong phần nhận xét

Nếu bạn tìm thấy một số lỗi hoặc một số trường hợp Edge mới, vui lòng cho tôi biết

Ghi chú

Nếu bạn có dự án Javascript nào đó muốn tôi giải thích, vui lòng viết nó trong phần bình luận

Làm cách nào để tạo máy tính trong JavaScript bằng chức năng?

Làm cách nào để tạo máy tính khoa học trong JavaScript?