Chức năng cho máy tính javascript

Đâ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
  }
}

2 và tỷ lệ phần trăm)

đ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

1. Câu lệnh if/else
2. Đối với vòng lặp
3. hàm JavaScript
5. Toán tử

   if (!action) {
     if (displayedNum === '0') {
       display.textContent = keyContent
     }
   }

   3 và

   if (!action) {
     if (displayedNum === '0') {
       display.textContent = keyContent
     }
   }

   4
6. Cách thay đổi văn bản với thuộc tính

   if (!action) {
     if (displayedNum === '0') {
       display.textContent = keyContent
     }
   }

   5
7. 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

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

Nghe phím bấm

Năm điều có thể xảy ra khi một người cầm máy tính. Họ có thể đánh

1. một phím số (0–9)
2. một phím toán tử (+, -, ×, ÷)
3. phím thập phân
4. phím bằng
5. chìa khóa rõ ràng

Các bước đầu tiên để xây dựng máy tính này là có thể (1) lắng nghe tất cả các lần nhấn phím và (2) xác định loại phím được nhấn. Trong trường hợp này, chúng ta có thể sử dụng mẫu ủy quyền sự kiện để lắng nghe, vì các khóa đều là con của

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

6

________số 8_______

Tiếp theo, chúng ta có thể sử dụng thuộc tính

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

7 để xác định loại phím được nhấp

const key = e.target
const action = key.dataset.action

Nếu khóa không có thuộc tính

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

7 thì đó phải là khóa số

if (!action) {
  console.log('number key!')
}

Nếu khóa có

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

7 hoặc là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

00,

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

01,

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

02 hoặc

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

03, thì chúng tôi biết khóa đó là toán tử

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  console.log('operator key!')
}

Nếu khóa

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

7 là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

05, chúng tôi biết người dùng đã nhấp vào khóa thập phân

Theo quy trình suy nghĩ tương tự, nếu phím

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

7 là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

07, chúng tôi biết người dùng đã nhấp vào phím rõ ràng (phím có chữ AC). Nếu khóa

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

7 là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

09, chúng tôi biết người dùng đã nhấp vào khóa bằng

if (action === 'decimal') {
  console.log('decimal key!')
}

if (action === 'clear') {
  console.log('clear key!')
}

if (action === 'calculate') {
  console.log('equal key!')
}

Tại thời điểm này, bạn sẽ nhận được phản hồi

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

10 từ mọi phím máy tính

Xây dựng con đường hạnh phúc

Hãy xem xét những gì một người bình thường sẽ làm khi họ cầm một chiếc máy tính. “Điều mà một người bình thường sẽ làm” này được gọi là con đường hạnh phúc

Hãy gọi người bình thường của chúng ta là Mary

Khi Mary cầm một chiếc máy tính, cô ấy có thể nhấn bất kỳ phím nào trong số này

1. một phím số (0–9)
2. một phím toán tử (+, -, ×, ÷)
3. phím thập phân
4. chìa khóa bằng nhau
5. chìa khóa rõ ràng

Có thể quá sức khi xem xét năm loại khóa cùng một lúc, vì vậy hãy thực hiện từng bước

Khi người dùng nhấn một phím số

Tại thời điểm này, nếu máy tính hiển thị 0 (số mặc định), số mục tiêu sẽ thay thế số không

Nếu máy tính hiển thị một số khác 0, thì số mục tiêu sẽ được thêm vào số được hiển thị

Ở đây, chúng ta cần biết hai điều

1. Số lượng phím đã được nhấp
2. Số hiển thị hiện tại

Chúng tôi có thể nhận được hai giá trị này thông qua thuộc tính

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

5 của khóa được nhấp và

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

12 , tương ứng

const display = document.querySelector('.calculator__display')

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target
    const action = key.dataset.action
    const keyContent = key.textContent
    const displayedNum = display.textContent
    // ...
  }
})

Nếu máy tính hiển thị 0, chúng tôi muốn thay thế màn hình của máy tính bằng phím được nhấp. Chúng ta có thể làm như vậy bằng cách thay thế thuộc tính textContent của màn hình

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

Nếu máy tính hiển thị số khác 0, chúng tôi muốn nối phím đã nhấp vào số được hiển thị. Để nối thêm một số, chúng ta nối một chuỗi

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

0

Tại thời điểm này, Mary có thể nhấp vào một trong hai phím này

1. Một khóa thập phân
2. Một phím điều hành

Giả sử Mary nhấn phím thập phân

Khi người dùng nhấn phím thập phân

Khi Mary nhấn phím thập phân, một số thập phân sẽ xuất hiện trên màn hình. Nếu Mary nhấn bất kỳ số nào sau khi nhấn phím thập phân, thì số đó cũng sẽ được thêm vào màn hình

Để tạo hiệu ứng này, chúng ta có thể nối

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

13 với số được hiển thị

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

1

Tiếp theo, giả sử Mary tiếp tục phép tính của mình bằng cách nhấn một phím toán tử

Khi người dùng nhấn phím toán tử

Nếu Mary nhấn một phím toán tử, thì toán tử đó sẽ được đánh dấu để Mary biết toán tử đó đang hoạt động

Để làm như vậy, chúng ta có thể thêm lớp

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

14 vào phím toán tử

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

2

Khi Mary đã nhấn một phím toán tử, cô ấy sẽ nhấn một phím số khác

Khi người dùng nhấn một phím số sau phím toán tử

Khi Mary nhấn lại một phím số, màn hình trước đó sẽ được thay thế bằng số mới. Phím điều hành cũng sẽ giải phóng trạng thái nhấn của nó

Để giải phóng trạng thái nhấn, chúng ta loại bỏ lớp

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

14 khỏi tất cả các phím thông qua vòng lặp

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

16

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

3

Tiếp theo, chúng tôi muốn cập nhật màn hình thành phím đã nhấp. Trước khi làm điều này, chúng ta cần một cách để biết liệu phím trước đó có phải là phím toán tử hay không

Một cách để làm điều này là thông qua một thuộc tính tùy chỉnh. Hãy gọi thuộc tính tùy chỉnh này là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

17

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

4

Nếu

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

18 là toán tử, chúng tôi muốn thay thế số được hiển thị bằng số được nhấp

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

5

Tiếp theo, giả sử Mary quyết định hoàn thành phép tính của mình bằng cách nhấn phím bằng

Khi người dùng nhấn phím bằng

Khi Mary nhấn phím bằng, máy tính sẽ tính kết quả phụ thuộc vào ba giá trị

1. Số đầu tiên được nhập vào máy tính
2. người điều hành
3. Số thứ hai được nhập vào máy tính

Sau khi tính toán, kết quả sẽ thay thế giá trị được hiển thị

Tại thời điểm này, chúng tôi chỉ biết số thứ hai — tức là số hiện đang hiển thị

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

6

Để có được số đầu tiên, chúng ta cần lưu trữ giá trị được hiển thị của máy tính trước khi xóa sạch. Một cách để lưu số đầu tiên này là thêm nó vào một thuộc tính tùy chỉnh khi nút của nhà điều hành được nhấp vào

Để lấy toán tử, chúng ta cũng có thể sử dụng kỹ thuật tương tự

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

7

Khi chúng tôi có ba giá trị chúng tôi cần, chúng tôi có thể thực hiện phép tính. Cuối cùng, chúng tôi muốn mã trông giống như thế này

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

8

Điều đó có nghĩa là chúng ta cần tạo một hàm

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

09. Nó sẽ có ba tham số. số đầu tiên, toán tử và số thứ hai

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

9

Nếu toán tử là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

00, chúng tôi muốn cộng các giá trị lại với nhau. Nếu toán tử là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

01, chúng tôi muốn trừ các giá trị, v.v.

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

0

Hãy nhớ rằng

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

22 và

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

23 là các chuỗi tại thời điểm này. Nếu bạn cộng các chuỗi lại với nhau, bạn sẽ nối chúng lại (

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

24)

Vì vậy, trước khi tính toán kết quả, chúng tôi muốn chuyển đổi chuỗi thành số. Chúng ta có thể làm như vậy với hai chức năng

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

25 và

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

26

• .calculator__keys { 
    display: grid; 
    /* other necessary CSS */ 
  }

  25 chuyển đổi một chuỗi thành một số nguyên

• .calculator__keys { 
    display: grid; 
    /* other necessary CSS */ 
  }

  26 chuyển đổi một chuỗi thành một số float (điều này có nghĩa là một số có chữ số thập phân)

Đối với một máy tính, chúng ta cần một phao

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

1

Đó là con đường hạnh phúc

Bạn có thể lấy mã nguồn cho con đường hạnh phúc thông qua liên kết này (cuộn xuống và nhập địa chỉ email của bạn vào hộp và tôi sẽ gửi mã nguồn ngay vào hộp thư của bạn)

Các trường hợp cạnh

Con đường hạnh phúc là không đủ. Để xây dựng một máy tính mạnh mẽ, bạn cần làm cho máy tính của mình linh hoạt với các kiểu nhập liệu kỳ lạ. Để làm như vậy, bạn phải tưởng tượng một kẻ phá rối cố gắng phá vỡ máy tính của bạn bằng cách nhấn các phím sai thứ tự. Hãy gọi kẻ gây rối này là Tim

Tim có thể nhấn các phím này theo thứ tự bất kỳ

1. Một phím số (0–9)
2. Một phím toán tử (+, -, ×, ÷)
3. phím thập phân
4. phím bằng
5. chìa khóa rõ ràng

Điều gì xảy ra nếu Tim nhấn phím thập phân

Nếu Tim nhấn phím thập phân khi màn hình đã hiển thị dấu thập phân, sẽ không có gì xảy ra

Tại đây, chúng ta có thể kiểm tra xem số được hiển thị có chứa một

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

13 hay không bằng phương thức

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

30

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

30 kiểm tra các chuỗi cho một trận đấu nhất định. Nếu một chuỗi được tìm thấy, nó sẽ trả về

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

32;

Ghi chú.

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

30 phân biệt chữ hoa chữ thường

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

2

Để kiểm tra chuỗi đã có dấu chấm chưa ta làm như sau

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

3

Tiếp theo, nếu Tim nhấn phím thập phân sau khi nhấn phím toán tử, màn hình sẽ hiển thị

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

35

Ở đây chúng ta cần biết liệu khóa trước đó có phải là toán tử hay không. Chúng ta có thể biết bằng cách kiểm tra thuộc tính tùy chỉnh,

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

17, chúng ta đã đặt trong bài học trước

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

17 vẫn chưa hoàn thành. Để xác định chính xác liệu

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

18 có phải là toán tử hay không, chúng tôi cần cập nhật

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

18 cho mỗi phím được nhấp

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

4

Khi chúng tôi có đúng

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

18, chúng tôi có thể sử dụng nó để kiểm tra xem khóa trước đó có phải là toán tử hay không

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

5

Điều gì xảy ra nếu Tim nhấn phím toán tử

Nếu Tim nhấn phím toán tử trước, phím toán tử sẽ sáng lên. (Chúng tôi đã đề cập đến trường hợp cạnh này, nhưng bằng cách nào? Hãy xem liệu bạn có thể xác định những gì chúng tôi đã làm không)

Thứ hai, sẽ không có gì xảy ra nếu Tim nhấn cùng một phím toán tử nhiều lần. (Chúng tôi cũng đã đề cập đến trường hợp cạnh này)

Ghi chú. nếu bạn muốn cung cấp UX tốt hơn, bạn có thể hiển thị toán tử được nhấp liên tục với một số thay đổi CSS. Chúng tôi đã không làm điều đó ở đây, nhưng hãy xem liệu bạn có thể tự lập trình điều đó như một thử thách mã hóa bổ sung không

Thứ ba, nếu Tim nhấn phím toán tử khác sau khi nhấn phím toán tử đầu tiên, thì phím toán tử đầu tiên sẽ được nhả ra. Sau đó, nhấn phím toán tử thứ hai. (Chúng tôi cũng bảo hiểm cho trường hợp cạnh này - nhưng bằng cách nào?)

Thứ tư, nếu Tim chạm vào một số, một toán tử, một số và một toán tử khác, theo thứ tự đó, màn hình sẽ được cập nhật thành một giá trị được tính toán

Điều này có nghĩa là chúng ta cần sử dụng hàm

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

09 khi tồn tại

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

22,

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

43 và

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

23

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

6

Mặc dù chúng tôi có thể tính toán một giá trị khi phím toán tử được bấm lần thứ hai, nhưng chúng tôi cũng đã đưa ra một lỗi tại thời điểm này — các lần bấm bổ sung vào phím toán tử sẽ tính toán một giá trị khi giá trị đó không nên

Để ngăn máy tính thực hiện phép tính trong các lần nhấp tiếp theo vào phím toán tử, chúng ta cần kiểm tra xem

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

18 có phải là toán tử hay không. Nếu đúng như vậy, chúng tôi không thực hiện phép tính

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

7

Thứ năm, sau khi phím toán tử tính toán một số, nếu Tim nhấn vào một số, tiếp theo là một toán tử khác, toán tử sẽ tiếp tục phép tính, như thế này.

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

46,

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

47,

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

48

Ngay bây giờ, máy tính của chúng tôi không thể thực hiện các phép tính liên tiếp. Giá trị tính toán thứ hai là sai. Đây là những gì chúng ta có.

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

49,

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

50

Giá trị thứ hai được tính toán sai, bởi vì chúng tôi đã nhập các giá trị sai vào hàm

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

09. Hãy xem qua một số hình ảnh để hiểu mã của chúng ta làm gì

Hiểu chức năng tính toán của chúng tôi

Đầu tiên, giả sử người dùng nhấp vào một số, 99. Tại thời điểm này, chưa có gì được đăng ký trong máy tính

Thứ hai, giả sử người dùng nhấp vào toán tử trừ. Sau khi họ nhấp vào toán tử trừ, chúng tôi đặt

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

22 thành 99. Chúng tôi cũng đặt

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

43 để trừ

Thứ ba, giả sử người dùng nhấp vào giá trị thứ hai — lần này là 1. Tại thời điểm này, số được hiển thị được cập nhật thành 1, nhưng

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

22,

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

43 và

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

23 của chúng tôi vẫn không thay đổi

Thứ tư, người dùng nhấp lại vào phép trừ. Ngay sau khi họ nhấp vào phép trừ, trước khi tính toán kết quả, chúng tôi đặt

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

23 làm số được hiển thị

Thứ năm, chúng tôi thực hiện phép tính với

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

22 99, trừ

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

43 và

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

23 1. Kết quả là 98

Khi kết quả được tính toán, chúng tôi đặt hiển thị thành kết quả. Sau đó, chúng tôi đặt

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

43 để trừ và

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

22 thành số được hiển thị trước đó

Vâng, đó là sai lầm khủng khiếp. Nếu chúng tôi muốn tiếp tục tính toán, chúng tôi cần cập nhật

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

22 với giá trị được tính toán

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

8

Với bản sửa lỗi này, các phép tính liên tiếp được thực hiện bởi các phím toán tử giờ đây sẽ chính xác

Điều gì xảy ra nếu Tim nhấn phím bằng?

Đầu tiên, sẽ không có gì xảy ra nếu Tim nhấn phím bằng trước bất kỳ phím toán tử nào

Chúng tôi biết rằng các phím toán tử chưa được nhấp nếu

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

22 không được đặt thành một số. Chúng ta có thể sử dụng kiến ​​thức này để ngăn việc tính toán bằng

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

9

Thứ hai, nếu Tim đánh một số, tiếp theo là một toán tử, tiếp theo là một dấu bằng, thì máy tính sẽ tính toán kết quả sao cho

1. .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   65 —>

   .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   66

2. .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   67 —>

   .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   68

3. .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   69 —>

   .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   70

4. .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   71 —>

   .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   72

Chúng tôi đã tính đến đầu vào kỳ lạ này. Bạn có thể hiểu tại sao?. )

Thứ ba, nếu Tim nhấn phím bằng sau khi hoàn thành phép tính, phép tính khác sẽ được thực hiện lại. Đây là cách tính toán nên đọc

1. Tim nhấn phím 5–1
2. Tim chạm bằng nhau. Giá trị tính toán là

   .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   73
3. Tim chạm bằng nhau. Giá trị tính toán là

   .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   74
4. Tim chạm bằng nhau. Giá trị tính toán là

   .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   75
5. Tim chạm bằng nhau. Giá trị tính toán là

   .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   76
6. Tim chạm bằng nhau. Giá trị tính toán là

   .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   77

Thật không may, máy tính của chúng tôi làm hỏng phép tính này. Đây là những gì máy tính của chúng tôi hiển thị

1. Tim nhấn phím 5–1
2. Tim chạm bằng nhau. Giá trị tính toán là

   .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   78
3. Tim chạm bằng nhau. Giá trị tính toán là

   .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   79

Sửa lỗi tính toán

Đầu tiên, giả sử người dùng của chúng tôi nhấp vào 5. Tại thời điểm này, chưa có gì được đăng ký trong máy tính

Thứ hai, giả sử người dùng nhấp vào toán tử trừ. Sau khi họ nhấp vào toán tử trừ, chúng tôi đặt

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

22 thành 5. Chúng tôi cũng đặt

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

43 để trừ

Thứ ba, người dùng nhấp vào giá trị thứ hai. Giả sử đó là 1. Tại thời điểm này, số được hiển thị được cập nhật thành 1, nhưng

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

22,

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

43 và

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

23 của chúng tôi vẫn không thay đổi

Thứ tư, người dùng nhấp vào phím bằng. Ngay sau khi họ nhấp vào bằng, nhưng trước khi tính toán, chúng tôi đặt

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

23 là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

86

Thứ năm, máy tính tính toán kết quả của

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

87 và đưa ra kết quả

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

78. Kết quả được cập nhật lên màn hình.

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

22 và

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

43 được chuyển sang phép tính tiếp theo vì chúng tôi không cập nhật chúng

Thứ sáu, khi người dùng truy cập bằng một lần nữa, chúng tôi đặt

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

23 thành

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

86 trước khi tính toán

Bạn có thể nói những gì sai ở đây

Thay vì

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

23, chúng tôi muốn đặt

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

22 thành số được hiển thị

const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)

keys.addEventListener(‘click’, e => {
 if (e.target.matches(‘button’)) {
   // Do something
 }
})

0

Chúng tôi cũng muốn chuyển

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

23 trước đó sang phép tính mới. Để

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

23 tiếp tục tính toán tiếp theo, chúng tôi cần lưu trữ nó trong một thuộc tính tùy chỉnh khác. Hãy gọi thuộc tính tùy chỉnh này là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

97 (viết tắt của giá trị sửa đổi)

const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)

keys.addEventListener(‘click’, e => {
 if (e.target.matches(‘button’)) {
   // Do something
 }
})

1

Nếu

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

18 là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

09, chúng tôi biết rằng chúng tôi có thể sử dụng

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

00 như

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

23. Khi chúng ta biết điều này, chúng ta có thể thực hiện phép tính

const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)

keys.addEventListener(‘click’, e => {
 if (e.target.matches(‘button’)) {
   // Do something
 }
})

2

Từ đó ta có phép tính đúng khi bấm liên tiếp phím bằng

Quay lại phím bằng

Thứ tư, nếu Tim nhấn phím thập phân hoặc phím số sau phím máy tính, màn hình sẽ được thay thế bằng

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

35 hoặc số mới tương ứng

Ở đây, thay vì chỉ kiểm tra xem

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

18 có phải là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

43 hay không, chúng ta cũng cần kiểm tra xem đó có phải là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

09 không

const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)

keys.addEventListener(‘click’, e => {
 if (e.target.matches(‘button’)) {
   // Do something
 }
})

3

Thứ năm, nếu Tim nhấn một phím toán tử ngay sau phím bằng, máy tính sẽ không tính toán

Để làm điều này, chúng tôi kiểm tra xem

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

18 có phải là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

09 hay không trước khi thực hiện phép tính bằng các phím toán tử

const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)

keys.addEventListener(‘click’, e => {
 if (e.target.matches(‘button’)) {
   // Do something
 }
})

4

Phím xóa có hai cách sử dụng

1. Xóa tất cả (ký hiệu là

   
     +
     -×
     ÷7
     8
     9
     4
     5
     6
     1
     2
     3
     0
     .
     AC
     =
   

   08) xóa mọi thứ và đặt lại máy tính về trạng thái ban đầu
2. Xóa mục nhập (ký hiệu là

   
     +
     -×
     ÷7
     8
     9
     4
     5
     6
     1
     2
     3
     0
     .
     AC
     =
   

   09) xóa mục nhập hiện tại. Nó giữ các số trước đó trong bộ nhớ

Khi máy tính ở trạng thái mặc định,

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

08 sẽ được hiển thị

Đầu tiên, nếu Tim nhấn một phím (bất kỳ phím nào trừ phím trống), thì nên đổi

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

08 thành

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

09

Chúng tôi làm điều này bằng cách kiểm tra xem

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

7 có phải là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

07 không. Nếu nó không phải là

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

07, chúng tôi sẽ tìm nút rõ ràng và thay đổi nó thành

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

5

const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)

keys.addEventListener(‘click’, e => {
 if (e.target.matches(‘button’)) {
   // Do something
 }
})

5

Thứ hai, nếu Tim chạm vào

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

09, màn hình sẽ hiển thị 0. Đồng thời,

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

09 nên được hoàn nguyên về

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

08 để Tim có thể đặt lại máy tính về trạng thái ban đầu. **

const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)

keys.addEventListener(‘click’, e => {
 if (e.target.matches(‘button’)) {
   // Do something
 }
})

6

Thứ ba, nếu Tim chạm vào

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

08, hãy đặt lại máy tính về trạng thái ban đầu

Để đặt lại máy tính về trạng thái ban đầu, chúng tôi cần xóa tất cả các thuộc tính tùy chỉnh mà chúng tôi đã đặt

const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)

keys.addEventListener(‘click’, e => {
 if (e.target.matches(‘button’)) {
   // Do something
 }
})

7

Thế là xong - dù sao thì đối với phần trường hợp cạnh

Bạn có thể lấy mã nguồn cho phần trường hợp cạnh thông qua liên kết này (cuộn xuống và nhập địa chỉ email của bạn vào hộp và tôi sẽ gửi mã nguồn ngay vào hộp thư của bạn)

Tại thời điểm này, mã chúng tôi đã tạo cùng nhau khá khó hiểu. Bạn có thể bị lạc nếu cố tự đọc mã. Hãy cấu trúc lại nó để làm cho nó sạch hơn

Tái cấu trúc mã

Khi tái cấu trúc, bạn sẽ thường bắt đầu với những cải tiến rõ ràng nhất. Trong trường hợp này, hãy bắt đầu với

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

09

Trước khi tiếp tục, hãy đảm bảo bạn biết các tính năng/thực hành JavaScript này. Chúng tôi sẽ sử dụng chúng trong quá trình tái cấu trúc

1. Trả lại sớm
2. nhà khai thác ternary
3. chức năng thuần túy

Với điều đó, hãy bắt đầu

Tái cấu trúc chức năng tính toán

Đây là những gì chúng ta có cho đến nay

const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)

keys.addEventListener(‘click’, e => {
 if (e.target.matches(‘button’)) {
   // Do something
 }
})

8

Bạn đã học được rằng chúng ta nên giảm thiểu việc chỉ định lại càng nhiều càng tốt. Ở đây, chúng ta có thể loại bỏ các phép gán nếu chúng ta trả về kết quả của phép tính trong các câu lệnh

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

22 và

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

23

const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)

keys.addEventListener(‘click’, e => {
 if (e.target.matches(‘button’)) {
   // Do something
 }
})

9

Vì chúng tôi trả về tất cả các giá trị, chúng tôi có thể sử dụng trả về sớm. Nếu chúng tôi làm như vậy, thì không cần bất kỳ điều kiện

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

23 nào

const key = e.target
const action = key.dataset.action

0

Và vì chúng tôi có một câu lệnh cho mỗi điều kiện

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

22, chúng tôi có thể xóa dấu ngoặc. (Ghi chú. Tuy nhiên, một số nhà phát triển thề bằng dấu ngoặc nhọn). Đây là mã sẽ trông như thế nào

const key = e.target
const action = key.dataset.action

1

Cuối cùng, chúng tôi đã gọi

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

26 tám lần trong hàm. Chúng ta có thể đơn giản hóa nó bằng cách tạo hai biến để chứa các giá trị float

const key = e.target
const action = key.dataset.action

2

Bây giờ chúng ta đã hoàn thành với

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

09. Bạn không nghĩ rằng nó dễ đọc hơn so với trước đây sao?

Tái cấu trúc trình nghe sự kiện

Mã chúng tôi tạo cho trình xử lý sự kiện rất lớn. Đây là những gì chúng tôi có tại thời điểm này

const key = e.target
const action = key.dataset.action

3

Làm thế nào để bạn bắt đầu tái cấu trúc đoạn mã này?

const key = e.target
const action = key.dataset.action

4

Đừng làm điều này. Nó không giúp được gì, bởi vì bạn chỉ đang chia nhỏ các khối mã. Khi bạn làm như vậy, hàm sẽ khó đọc hơn

Cách tốt hơn là chia mã thành các hàm thuần túy và không thuần túy. Nếu bạn làm như vậy, bạn sẽ nhận được mã giống như thế này

const key = e.target
const action = key.dataset.action

5

Ở đây,

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28 là một hàm thuần túy trả về những gì cần hiển thị trên máy tính.

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

29 là một hàm không thuần túy làm thay đổi giao diện trực quan và các thuộc tính tùy chỉnh của máy tính

Tạo createResultString

Như đã đề cập trước đây,

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28 sẽ trả về giá trị cần được hiển thị trên máy tính
Bạn có thể lấy các giá trị này thông qua các phần của mã có nội dung

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

31

const key = e.target
const action = key.dataset.action

6

Thay vì

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

32, chúng tôi muốn trả lại từng giá trị để chúng tôi có thể sử dụng nó sau

const key = e.target
const action = key.dataset.action

7

Hãy cùng nhau giải quyết vấn đề này, từng bước một, bắt đầu bằng các phím số

Tạo chuỗi kết quả cho các phím số

Đây là mã chúng tôi có cho các phím số

const key = e.target
const action = key.dataset.action

8

Bước đầu tiên là sao chép các phần có nội dung

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

32 thành

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28. Khi bạn làm điều này, hãy chắc chắn rằng bạn thay đổi

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

35 thành

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

36

const key = e.target
const action = key.dataset.action

9

Tiếp theo, chúng ta có thể chuyển đổi câu lệnh

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

37 thành toán tử bậc ba

if (!action) {
  console.log('number key!')
}

0

Khi bạn tái cấu trúc, hãy nhớ ghi lại danh sách các biến bạn cần. Chúng tôi sẽ quay lại danh sách sau

if (!action) {
  console.log('number key!')
}

1

Tạo chuỗi kết quả cho khóa thập phân

Đây là mã chúng tôi có cho khóa thập phân

if (!action) {
  console.log('number key!')
}

2

Như trước đây, chúng tôi muốn chuyển bất kỳ thứ gì thay đổi

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

38 thành

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28

if (!action) {
  console.log('number key!')
}

3

Vì chúng tôi muốn trả về tất cả các giá trị, chúng tôi có thể chuyển đổi câu lệnh

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

23 thành trả về sớm

if (!action) {
  console.log('number key!')
}

4

Một lỗi phổ biến ở đây là quên trả về số đang hiển thị khi cả hai điều kiện đều không khớp. Chúng tôi cần điều này bởi vì chúng tôi sẽ thay thế

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

38 bằng giá trị được trả về từ

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28. Nếu chúng tôi bỏ lỡ nó,

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28 sẽ trả lại

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

44, đó không phải là điều chúng tôi mong muốn

if (!action) {
  console.log('number key!')
}

5

Như mọi khi, hãy lưu ý các biến được yêu cầu. Tại thời điểm này, các biến cần thiết vẫn giữ nguyên như trước

if (!action) {
  console.log('number key!')
}

6

Tạo chuỗi kết quả cho các phím toán tử

Đây là mã chúng tôi đã viết cho các phím toán tử

if (!action) {
  console.log('number key!')
}

7

Bạn biết tính kỷ luật từ giờ rồi đấy. chúng tôi muốn chuyển mọi thứ thay đổi

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

38 thành

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28. Đây là những gì cần phải được di chuyển

if (!action) {
  console.log('number key!')
}

8

Hãy nhớ rằng,

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28 cần trả về giá trị được hiển thị trên máy tính. Nếu điều kiện

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

22 không khớp, chúng tôi vẫn muốn trả về số được hiển thị

if (!action) {
  console.log('number key!')
}

9

Sau đó, chúng ta có thể cấu trúc lại câu lệnh

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

37 thành một toán tử bậc ba

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  console.log('operator key!')
}

0

Nếu quan sát kỹ, bạn sẽ nhận ra rằng không cần lưu trữ biến

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

23. Chúng ta có thể sử dụng trực tiếp

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

86 trong hàm

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

09

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  console.log('operator key!')
}

1

Cuối cùng, lưu ý các biến và thuộc tính cần thiết. Lần này, chúng ta cần

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

53 và

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

54

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  console.log('operator key!')
}

2

Tạo chuỗi kết quả cho khóa rõ ràng

Chúng tôi đã viết đoạn mã sau để xử lý khóa

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

07

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  console.log('operator key!')
}

3

Như trên, muốn chuyển mọi thứ thay đổi

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

38 thành

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  console.log('operator key!')
}

4

Tạo chuỗi kết quả cho khóa bằng

Đây là mã chúng tôi đã viết cho khóa bằng

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  console.log('operator key!')
}

5

Như trên, chúng tôi muốn sao chép mọi thứ thay đổi

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

38 thành

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28. Đây là những gì cần được sao chép

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  console.log('operator key!')
}

6

Khi sao chép mã vào

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28, hãy đảm bảo rằng bạn trả về các giá trị cho mọi trường hợp có thể xảy ra

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  console.log('operator key!')
}

7

Tiếp theo, chúng tôi muốn giảm bớt việc chỉ định lại. Chúng ta có thể làm như vậy bằng cách chuyển các giá trị chính xác vào

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

09 thông qua một toán tử bậc ba

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  console.log('operator key!')
}

8

Bạn có thể đơn giản hóa hơn nữa đoạn mã trên bằng một toán tử bậc ba khác nếu bạn cảm thấy thoải mái với nó

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  console.log('operator key!')
}

9

Tại thời điểm này, chúng tôi muốn lưu ý lại các thuộc tính và biến cần thiết

if (action === 'decimal') {
  console.log('decimal key!')
}

if (action === 'clear') {
  console.log('clear key!')
}

if (action === 'calculate') {
  console.log('equal key!')
}

0

Truyền vào các biến cần thiết

Chúng tôi cần bảy thuộc tính/biến trong

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28

1. 
     +
     -×
     ÷7
     8
     9
     4
     5
     6
     1
     2
     3
     0
     .
     AC
     =
   

   63

2. .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   86

3. .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   18

4. 
     +
     -×
     ÷7
     8
     9
     4
     5
     6
     1
     2
     3
     0
     .
     AC
     =
   

   66

5. .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   22

6. .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   97

7. .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   43

Chúng tôi có thể nhận được

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

63 và

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

66 từ

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

72. Chúng tôi cũng có thể nhận được

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

22,

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

97,

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

43 và

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

18 từ

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

77

Điều đó có nghĩa là hàm

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28 cần ba biến—

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

72,

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

86 và

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

77. Vì

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

77 đại diện cho trạng thái của máy tính, hãy sử dụng một biến có tên là

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

83 để thay thế

if (action === 'decimal') {
  console.log('decimal key!')
}

if (action === 'clear') {
  console.log('clear key!')
}

if (action === 'calculate') {
  console.log('equal key!')
}

1

Vui lòng hủy cấu trúc các biến nếu bạn muốn

if (action === 'decimal') {
  console.log('decimal key!')
}

if (action === 'clear') {
  console.log('clear key!')
}

if (action === 'calculate') {
  console.log('equal key!')
}

2

Tính nhất quán trong các câu lệnh if

Trong

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28, chúng tôi đã sử dụng các điều kiện sau để kiểm tra loại phím được bấm

if (action === 'decimal') {
  console.log('decimal key!')
}

if (action === 'clear') {
  console.log('clear key!')
}

if (action === 'calculate') {
  console.log('equal key!')
}

3

Chúng không nhất quán nên khó đọc. Nếu có thể, chúng tôi muốn làm cho chúng nhất quán để chúng tôi có thể viết một cái gì đó như thế này

if (action === 'decimal') {
  console.log('decimal key!')
}

if (action === 'clear') {
  console.log('clear key!')
}

if (action === 'calculate') {
  console.log('equal key!')
}

4

Để làm như vậy, chúng ta có thể tạo một hàm có tên là

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

85. Hàm này sẽ trả về loại khóa đã được nhấp

if (action === 'decimal') {
  console.log('decimal key!')
}

if (action === 'clear') {
  console.log('clear key!')
}

if (action === 'calculate') {
  console.log('equal key!')
}

5

Đây là cách bạn sử dụng chức năng

if (action === 'decimal') {
  console.log('decimal key!')
}

if (action === 'clear') {
  console.log('clear key!')
}

if (action === 'calculate') {
  console.log('equal key!')
}

6

Chúng tôi đã hoàn thành với

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28. Hãy chuyển sang

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

29

Thực hiện cập nhậtCalculatorState

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

29 là chức năng thay đổi giao diện trực quan và các thuộc tính tùy chỉnh của máy tính

Như với

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28, chúng ta cần kiểm tra loại phím được bấm. Ở đây, chúng ta có thể tái sử dụng

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

85

if (action === 'decimal') {
  console.log('decimal key!')
}

if (action === 'clear') {
  console.log('clear key!')
}

if (action === 'calculate') {
  console.log('equal key!')
}

7

Nếu bạn nhìn vào mã còn sót lại, bạn có thể nhận thấy chúng tôi thay đổi _______5_______17 cho mọi loại khóa. Đây là mã trông như thế nào

if (action === 'decimal') {
  console.log('decimal key!')
}

if (action === 'clear') {
  console.log('clear key!')
}

if (action === 'calculate') {
  console.log('equal key!')
}

8

Điều này là dư thừa vì chúng ta đã biết loại khóa có

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

85. Chúng ta có thể cấu trúc lại ở trên để

if (action === 'decimal') {
  console.log('decimal key!')
}

if (action === 'clear') {
  console.log('clear key!')
}

if (action === 'calculate') {
  console.log('equal key!')
}

9

Tạo __6_______29 cho các phím điều hành

Về mặt trực quan, chúng ta cần đảm bảo rằng tất cả các phím giải phóng trạng thái chán nản của chúng. Tại đây, chúng tôi có thể sao chép và dán mã chúng tôi có trước đó

const display = document.querySelector('.calculator__display')

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target
    const action = key.dataset.action
    const keyContent = key.textContent
    const displayedNum = display.textContent
    // ...
  }
})

0

Đây là những gì còn lại từ những gì chúng tôi đã viết cho các phím điều hành, sau khi di chuyển các phần liên quan đến

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

38 thành

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

28

const display = document.querySelector('.calculator__display')

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target
    const action = key.dataset.action
    const keyContent = key.textContent
    const displayedNum = display.textContent
    // ...
  }
})

1

Bạn có thể nhận thấy rằng chúng ta có thể rút ngắn mã bằng toán tử bậc ba

const display = document.querySelector('.calculator__display')

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target
    const action = key.dataset.action
    const keyContent = key.textContent
    const displayedNum = display.textContent
    // ...
  }
})

2

Như trước đây, hãy lưu ý các biến và thuộc tính bạn cần. Ở đây, chúng ta cần

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

96 và

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

86

const display = document.querySelector('.calculator__display')

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target
    const action = key.dataset.action
    const keyContent = key.textContent
    const displayedNum = display.textContent
    // ...
  }
})

3

Tạo

+ -× ÷7 8 9 4 5 6 1 2 3 0 . AC =

29 cho khóa rõ ràng

Đây là mã còn lại cho khóa rõ ràng

const display = document.querySelector('.calculator__display')

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target
    const action = key.dataset.action
    const keyContent = key.textContent
    const displayedNum = display.textContent
    // ...
  }
})

4

Không có gì nhiều chúng ta có thể cấu trúc lại ở đây. Vui lòng sao chép/dán mọi thứ vào

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

29

Tạo

+ -× ÷7 8 9 4 5 6 1 2 3 0 . AC =

29 cho khóa bằng

Đây là mã chúng tôi đã viết cho khóa bằng

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  console.log('operator key!')
}

5

Đây là những gì chúng tôi còn lại nếu chúng tôi loại bỏ mọi thứ liên quan đến

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

38

const display = document.querySelector('.calculator__display')

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target
    const action = key.dataset.action
    const keyContent = key.textContent
    const displayedNum = display.textContent
    // ...
  }
})

6

Chúng ta có thể cấu trúc lại điều này thành như sau

const display = document.querySelector('.calculator__display')

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target
    const action = key.dataset.action
    const keyContent = key.textContent
    const displayedNum = display.textContent
    // ...
  }
})

7

Như mọi khi, hãy lưu ý các thuộc tính và biến được sử dụng

const display = document.querySelector('.calculator__display')

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target
    const action = key.dataset.action
    const keyContent = key.textContent
    const displayedNum = display.textContent
    // ...
  }
})

8

Truyền vào các biến cần thiết

Chúng tôi biết rằng chúng tôi cần năm biến/thuộc tính cho

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

29

1. 
     +
     -×
     ÷7
     8
     9
     4
     5
     6
     1
     2
     3
     0
     .
     AC
     =
   

   72

2. const calculator = document.querySelector(‘.calculator’)
   const keys = calculator.querySelector(‘.calculator__keys’)
   
   keys.addEventListener(‘click’, e => {
    if (e.target.matches(‘button’)) {
      // Do something
    }
   })

   04

3. 
     +
     -×
     ÷7
     8
     9
     4
     5
     6
     1
     2
     3
     0
     .
     AC
     =
   

   96

4. .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   86

5. .calculator__keys { 
     display: grid; 
     /* other necessary CSS */ 
   }

   97

Vì

.calculator__keys { 
  display: grid; 
  /* other necessary CSS */ 
}

97 có thể được truy xuất từ ​​

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

77, nên chúng tôi chỉ cần chuyển vào bốn giá trị

const display = document.querySelector('.calculator__display')

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target
    const action = key.dataset.action
    const keyContent = key.textContent
    const displayedNum = display.textContent
    // ...
  }
})

9

Tái cấu trúc updateCalculatorState một lần nữa

Chúng tôi đã thay đổi ba loại giá trị trong

  +
  -×
  ÷7
  8
  9
  4
  5
  6
  1
  2
  3
  0
  .
  AC
  =

29

1. 
     +
     -×
     ÷7
     8
     9
     4
     5
     6
     1
     2
     3
     0
     .
     AC
     =
   

   77
2. Lớp dành cho các toán tử nhấn/hạ
3. Văn bản

   
     +
     -×
     ÷7
     8
     9
     4
     5
     6
     1
     2
     3
     0
     .
     AC
     =
   

   08 so với

   
     +
     -×
     ÷7
     8
     9
     4
     5
     6
     1
     2
     3
     0
     .
     AC
     =
   

   09

Nếu muốn gọn gàng hơn, bạn có thể tách (2) và (3) thành chức năng khác —

const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)

keys.addEventListener(‘click’, e => {
 if (e.target.matches(‘button’)) {
   // Do something
 }
})

14. Đây là những gì

const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)

keys.addEventListener(‘click’, e => {
 if (e.target.matches(‘button’)) {
   // Do something
 }
})

14 có thể trông như thế nào

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

0

kết thúc

Mã trở nên sạch hơn nhiều sau khi tái cấu trúc. Nếu bạn xem xét trình xử lý sự kiện, bạn sẽ biết chức năng của từng chức năng. Đây là giao diện của trình xử lý sự kiện ở phần cuối

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

1

Bạn có thể lấy mã nguồn cho phần tái cấu trúc thông qua liên kết này (cuộn xuống và nhập địa chỉ email của bạn vào hộp và tôi sẽ gửi mã nguồn ngay vào hộp thư của bạn)

Tôi hy vọng bạn thích bài viết này. Nếu bạn đã làm như vậy, bạn có thể thích Tìm hiểu JavaScript—một khóa học trong đó tôi chỉ cho bạn cách xây dựng 20 thành phần, từng bước một, giống như cách chúng tôi xây dựng máy tính này ngày hôm nay

Ghi chú. chúng tôi có thể cải thiện máy tính hơn nữa bằng cách thêm các tính năng trợ năng và hỗ trợ bàn phím như Vùng trực tiếp. Bạn muốn tìm hiểu làm thế nào? . )

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Zell Liew

Đọc thêm bài viết

---

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để sử dụng eval trong JavaScript cho máy tính?

Chức năng của máy tính là gì?

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

Làm cách nào để tạo máy tính trong JavaScript mà không cần đánh giá?