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

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

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.

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

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ã

HTML

 
   

      

        
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

        
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

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

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

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

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;
}

        
7
7
      
+ 
+
 
C
 
=           

ý 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

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?

<đầu>

.

Bạn có thể thêm trình xử lý sự kiện vào hàm trong JavaScript không?

Phương thức addEventListener() hoạt động bằng cách thêm một hàm hoặc một đối tượng triển khai EventListener vào danh sách trình xử lý sự kiện cho loại sự kiện đã chỉ định trên EventTarget mà nó được gọi

Làm cách nào để tạo một máy tính đơn giản bằng JavaScript và html?

Các bước để tạo một máy tính đơn giản bằng HTML và JavaScript .

At first Insert a element within tag..

Create a table using

…. .. .

Insert two types of Input text and button within table data of table row using

…. .. . Chỉ định sự kiện OnClick cho tất cả các nút có số và toán tử số học

programming javascript

Reply 3 0 Chia sẻ

Bài Viết Liên Quan

Hướng dẫn dùng metjod JavaScript

How do i translate from french to english in python?

Bảng lương giáo viên sẽ hưởng lương mới từ 2023

Hướng dẫn dùng pandas series python

Hướng dẫn all event listeners javascript

Hướng dẫn mongodb aggregate

Hướng dẫn ubuntu install php5

Hướng dẫn integer iterator python

Hướng dẫn dùng proerties trong PHP

Tăng dung lượng onedrive miễn phí 2023

Var_dump to log file php

Get address from latlng php

How do you click a button in web scraping python?

Hướng dẫn dùng menthod JavaScript

Hướng dẫn dùng name cookies trong PHP

Hướng dẫn dùng re. meaning python

Float to bytes in python

Hướng dẫn read file in python

Hướng dẫn dùng python strtime python

Convert datetime into date in php

Chúng tôi

• Giới thiệu
• Liên hệ
• Tuyển dụng
• Quảng cáo

Điều khoản

• Điều khoản hoạt động
• Điều kiện tham gia
• Quy định cookie

Trợ giúp

• Hướng dẫn
• Loại bỏ câu hỏi
• Liên hệ

Mạng xã hội

• Facebook
• Twitter
• LinkedIn
• Instagram

---

Bản quyền © 2021 Học Tốt Inc.