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

Dự án JavaScript dành cho người mới bắt đầu (sê-ri 8 phần)

• 1 Tạo ứng dụng JavaScript đầu tiên của bạn — Trình tạo trích dẫn ngẫu nhiên
• 2 Cách tạo Ứng dụng Tìm kiếm Wikipedia bằng JavaScript
• 3 Cách tạo Ứng dụng Máy tính bằng JavaScript
• 4 Cách tạo Ứng dụng Todo List bằng JavaScript
• 5 Cách tạo Trình phát video HTML5 tùy chỉnh bằng JavaScript
• 6 Cách xây dựng Trò chơi Simon bằng JavaScript
• 7 Cách tạo Ứng dụng hẹn giờ Pomodoro bằng JavaScript
• 8 Cách tạo tiện ích mở rộng Chrome đầu tiên của bạn

Ứng dụng máy tính mà chúng ta sẽ phát triển trong hướng dẫn này rất đơn giản. Nó ít nhiều theo cách của những máy tính được tìm thấy tại các cửa hàng tạp hóa. Bố cục của ứng dụng được tạo bằng lưới CSS. Nếu bạn muốn tìm hiểu cách đạt được nó, hãy nhớ xem hướng dẫn này vì hướng dẫn này chỉ tập trung vào logic JavaScript được sử dụng để làm cho máy tính hoạt động

Đây là bản demo trực tiếp của dự án đã hoàn thành. Bạn có thể chơi xung quanh nó để cảm nhận về những gì bạn sẽ xây dựng trước khi lao vào

điều kiện tiên quyết

Hướng dẫn này giả định rằng bạn đã có kiến ​​thức cơ bản về JavaScript. Tôi sẽ chia nhỏ từng bước một cách tốt nhất có thể để bạn có thể dễ dàng làm theo ngay cả khi bạn chưa có kinh nghiệm xây dựng ứng dụng trong trình duyệt trước đó

Trước khi bắt đầu

Bạn có thể tìm điểm bắt đầu cho hướng dẫn này trên JSFiddle. Nó chứa tất cả các đánh dấu và kiểu cần thiết được sử dụng để tạo bố cục máy tính. Đánh dấu gần giống với trạng thái cuối cùng của hướng dẫn trước, trong đó tôi đã thảo luận về cách tạo bố cục máy tính, nhưng tôi đã thực hiện một số thay đổi nhỏ, vì vậy hãy đảm bảo sử dụng thay đổi này

Bắt đầu bằng cách rẽ nhánh mã sang một câu đố mới và làm theo bằng cách nhập từng bước cho đến khi kết thúc. Vui lòng thực hiện hướng dẫn này trên các sân chơi mã trực tuyến khác hoặc trên máy cục bộ của bạn nếu bạn thích

Bắt đầu

Bất kỳ ai cũng có thể thực hiện bốn phép toán số học phổ biến nhất (cộng, trừ, nhân và chia) trên ứng dụng máy tính của chúng tôi bằng cách xây dựng một biểu thức hợp lệ bằng cách sử dụng các nút nhập và hiển thị kết quả trên màn hình. Một ví dụ về biểu thức hợp lệ được hiển thị bên dưới

12 + 10

Để xây dựng một biểu thức số học hợp lệ, chúng ta cần theo dõi một số điều. toán hạng thứ nhất (

function updateDisplay() {
  // select the element with class of `calculator-screen`
  const display = document.querySelector('.calculator-screen');
  // update the value of the element with the contents of `displayValue`
  display.value = calculator.displayValue;
}

updateDisplay();

<input type="text" class="calculator-screen" value="" disabled />

Hãy bắt đầu bằng cách tạo một đối tượng để giúp chúng tôi theo dõi các giá trị này. Thêm mã sau vào đầu ngăn JavaScript trong JSFiddle

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Đối tượng

<input type="text" class="calculator-screen" value="" disabled />

• <input type="text" class="calculator-screen" value="" disabled />

  3 giữ một giá trị chuỗi đại diện cho đầu vào của người dùng hoặc kết quả của một hoạt động. Đó là cách chúng tôi theo dõi những gì sẽ được hiển thị trên màn hình

• <input type="text" class="calculator-screen" value="" disabled />

  4 sẽ lưu trữ toán hạng đầu tiên cho bất kỳ biểu thức nào. Hiện tại, nó được đặt thành

  <input type="text" class="calculator-screen" value="" disabled />

  5
• Phím

  <input type="text" class="calculator-screen" value="" disabled />

  6 sẽ lưu trữ toán tử cho một biểu thức. Giá trị ban đầu của nó cũng là

  <input type="text" class="calculator-screen" value="" disabled />

  5

• <input type="text" class="calculator-screen" value="" disabled />

  8 về cơ bản phục vụ như một cách để kiểm tra xem cả toán hạng đầu tiên và toán tử đã được nhập chưa. Nếu là

  <input type="text" class="calculator-screen" value="" disabled />

  9, các số tiếp theo mà người dùng nhập sẽ tạo thành toán hạng thứ hai

Cập nhật màn hình

Hiện tại, màn hình máy tính trống. Chúng tôi cần nội dung của thuộc tính

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

Hãy tiếp tục và nhập nội dung này bên dưới đối tượng

<input type="text" class="calculator-screen" value="" disabled />

function updateDisplay() {
  // select the element with class of `calculator-screen`
  const display = document.querySelector('.calculator-screen');
  // update the value of the element with the contents of `displayValue`
  display.value = calculator.displayValue;
}

updateDisplay();

Nếu bạn nhìn vào mã HTML của ứng dụng, bạn sẽ thấy rằng “màn hình” thực sự chỉ là một kiểu nhập văn bản bị vô hiệu hóa

<input type="text" class="calculator-screen" value="" disabled />

Chúng tôi không thể nhập trực tiếp bằng bàn phím, nhưng chúng tôi có thể thay đổi giá trị của nó bằng JavaScript. Và đó là chức năng của hàm

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
  // Access the clicked element
  const { target } = event;

  // Check if the clicked element is a button.
  // If not, exit from the function
  if (!target.matches('button')) {
    return;
  }

  if (target.classList.contains('operator')) {
    console.log('operator', target.value);
    return;
  }

  if (target.classList.contains('decimal')) {
    console.log('decimal', target.value);
    return;
  }

  if (target.classList.contains('all-clear')) {
    console.log('clear', target.value);
    return;
  }

  console.log('digit', target.value);
});

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

Xử lý phím bấm

Chúng tôi có bốn bộ chìa khóa trên máy tính. chữ số (0-9), toán tử (+, −, ⨉, ÷, =), dấu thập phân (. ) và phím đặt lại (AC). Trong phần này, chúng tôi sẽ lắng nghe tiếng bấm trên các phím máy tính và xác định loại phím nào đã được bấm

Thêm đoạn mã này vào cuối tab JavaScript

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
  // Access the clicked element
  const { target } = event;

  // Check if the clicked element is a button.
  // If not, exit from the function
  if (!target.matches('button')) {
    return;
  }

  if (target.classList.contains('operator')) {
    console.log('operator', target.value);
    return;
  }

  if (target.classList.contains('decimal')) {
    console.log('decimal', target.value);
    return;
  }

  if (target.classList.contains('all-clear')) {
    console.log('clear', target.value);
    return;
  }

  console.log('digit', target.value);
});

Trong đoạn mã trên, chúng ta đang lắng nghe một sự kiện

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
  // Access the clicked element
  const { target } = event;

  // Check if the clicked element is a button.
  // If not, exit from the function
  if (!target.matches('button')) {
    return;
  }

  if (target.classList.contains('operator')) {
    console.log('operator', target.value);
    return;
  }

  if (target.classList.contains('decimal')) {
    console.log('decimal', target.value);
    return;
  }

  if (target.classList.contains('all-clear')) {
    console.log('clear', target.value);
    return;
  }

  console.log('digit', target.value);
});

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
  // Access the clicked element
  const { target } = event;

  // Check if the clicked element is a button.
  // If not, exit from the function
  if (!target.matches('button')) {
    return;
  }

  if (target.classList.contains('operator')) {
    console.log('operator', target.value);
    return;
  }

  if (target.classList.contains('decimal')) {
    console.log('decimal', target.value);
    return;
  }

  if (target.classList.contains('all-clear')) {
    console.log('clear', target.value);
    return;
  }

  console.log('digit', target.value);
});

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
  // Access the clicked element
  const { target } = event;

  // Check if the clicked element is a button.
  // If not, exit from the function
  if (!target.matches('button')) {
    return;
  }

  if (target.classList.contains('operator')) {
    console.log('operator', target.value);
    return;
  }

  if (target.classList.contains('decimal')) {
    console.log('decimal', target.value);
    return;
  }

  if (target.classList.contains('all-clear')) {
    console.log('clear', target.value);
    return;
  }

  console.log('digit', target.value);
});

Bên trong chức năng gọi lại của trình xử lý sự kiện, chúng tôi trích xuất thuộc tính

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
  // Access the clicked element
  const { target } = event;

  // Check if the clicked element is a button.
  // If not, exit from the function
  if (!target.matches('button')) {
    return;
  }

  if (target.classList.contains('operator')) {
    console.log('operator', target.value);
    return;
  }

  if (target.classList.contains('decimal')) {
    console.log('decimal', target.value);
    return;
  }

  if (target.classList.contains('all-clear')) {
    console.log('clear', target.value);
    return;
  }

  console.log('digit', target.value);
});

const { target } = event;
// is equivalent to
const target = event.target;

Biến

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
  // Access the clicked element
  const { target } = event;

  // Check if the clicked element is a button.
  // If not, exit from the function
  if (!target.matches('button')) {
    return;
  }

  if (target.classList.contains('operator')) {
    console.log('operator', target.value);
    return;
  }

  if (target.classList.contains('decimal')) {
    console.log('decimal', target.value);
    return;
  }

  if (target.classList.contains('all-clear')) {
    console.log('clear', target.value);
    return;
  }

  console.log('digit', target.value);
});

Hãy chắc chắn dùng thử trước khi chuyển sang bước tiếp theo. Mở bảng điều khiển trình duyệt của bạn và nhấp vào bất kỳ nút nào. Loại và giá trị của khóa phải được ghi vào bảng điều khiển tương ứng

Loại khóa chính xác được phát hiện và ghi vào bảng điều khiển

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

Nhập các chữ số

Trong bước này, chúng tôi sẽ làm cho các nút chữ số hoạt động để khi nhấp vào bất kỳ nút nào trong số chúng, giá trị tương ứng sẽ được hiển thị trên màn hình

Vì thuộc tính

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

const { target } = event;
// is equivalent to
const target = event.target;

<input type="text" class="calculator-screen" value="" disabled />

function inputDigit(digit) {
  const { displayValue } = calculator;
  // Overwrite `displayValue` if the current value is '0' otherwise append to it
  calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}

Tiếp theo, thay thế dòng sau trong chức năng gọi lại trình nghe sự kiện

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
  // Access the clicked element
  const { target } = event;

  // Check if the clicked element is a button.
  // If not, exit from the function
  if (!target.matches('button')) {
    return;
  }

  if (target.classList.contains('operator')) {
    console.log('operator', target.value);
    return;
  }

  if (target.classList.contains('decimal')) {
    console.log('decimal', target.value);
    return;
  }

  if (target.classList.contains('all-clear')) {
    console.log('clear', target.value);
    return;
  }

  console.log('digit', target.value);
});

console.log('digit', target.value);

với đoạn mã sau

inputDigit(target.value);
updateDisplay();

Trong hàm

const { target } = event;
// is equivalent to
const target = event.target;

const { target } = event;
// is equivalent to
const target = event.target;

const { target } = event;
// is equivalent to
const target = event.target;

<input type="text" class="calculator-screen" value="" disabled />

Cuối cùng, hàm

const { target } = event;
// is equivalent to
const target = event.target;

<input type="text" class="calculator-screen" value="" disabled />

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

Nhập một dấu thập phân

Khi bấm vào phím dấu thập phân, chúng ta cần thêm dấu thập phân vào bất kỳ nội dung nào được hiển thị trên màn hình trừ khi nó đã chứa dấu thập phân

Đây là cách chúng ta có thể đạt được điều đó. Tạo một chức năng mới gọi là

function inputDigit(digit) {
  const { displayValue } = calculator;
  // Overwrite `displayValue` if the current value is '0' otherwise append to it
  calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}

const { target } = event;
// is equivalent to
const target = event.target;

function inputDecimal(dot) {
  // If the `displayValue` property does not contain a decimal point
  if (!calculator.displayValue.includes(dot)) {
    // Append the decimal point
    calculator.displayValue += dot;
  }
}

Trong hàm

function inputDigit(digit) {
  const { displayValue } = calculator;
  // Overwrite `displayValue` if the current value is '0' otherwise append to it
  calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}

<input type="text" class="calculator-screen" value="" disabled />

Sau đó, thay thế dòng sau trong chức năng gọi lại trình nghe sự kiện của phím

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

với các dòng mã sau

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Tại thời điểm này, bạn sẽ có thể thêm đầu vào thành công một dấu thập phân và nó hiển thị trên màn hình

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

xử lý các nhà khai thác

Bước tiếp theo là làm cho các toán tử (+, −, ⨉, ÷, =) trên máy tính hoạt động. Có ba kịch bản để giải thích

1. Khi người dùng nhấn một toán tử sau khi nhập toán hạng đầu tiên

Tại thời điểm này, nội dung của

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

Tạo một chức năng mới gọi là

function inputDigit(digit) {
  const { displayValue } = calculator;
  // Overwrite `displayValue` if the current value is '0' otherwise append to it
  calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}

function inputDigit(digit) {
  const { displayValue } = calculator;
  // Overwrite `displayValue` if the current value is '0' otherwise append to it
  calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Khi nhấn phím toán tử, nội dung của

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

Thuộc tính

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

Tại thời điểm này, thật hữu ích khi xem các thuộc tính của đối tượng

<input type="text" class="calculator-screen" value="" disabled />

const { target } = event;
// is equivalent to
const target = event.target;

function inputDigit(digit) {
  const { displayValue } = calculator;
  // Overwrite `displayValue` if the current value is '0' otherwise append to it
  calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Sau đó, thay thế dòng sau trong hàm gọi lại trình nghe sự kiện

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
  // Access the clicked element
  const { target } = event;

  // Check if the clicked element is a button.
  // If not, exit from the function
  if (!target.matches('button')) {
    return;
  }

  if (target.classList.contains('operator')) {
    console.log('operator', target.value);
    return;
  }

  if (target.classList.contains('decimal')) {
    console.log('decimal', target.value);
    return;
  }

  if (target.classList.contains('all-clear')) {
    console.log('clear', target.value);
    return;
  }

  console.log('digit', target.value);
});

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

với đoạn mã sau

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Tại thời điểm này, hãy cố gắng xây dựng một phép tính số học hợp lệ bằng cách nhấp lần lượt vào các phím sau.

console.log('digit', target.value);

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

function updateDisplay() {
  // select the element with class of `calculator-screen`
  const display = document.querySelector('.calculator-screen');
  // update the value of the element with the contents of `displayValue`
  display.value = calculator.displayValue;
}

updateDisplay();

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

Nếu bạn cố gắng nhập toán hạng thứ hai, bạn sẽ nhận thấy rằng toán hạng này được thêm vào toán hạng thứ nhất thay vì ghi đè lên toán hạng đó

Hãy khắc phục điều đó bằng cách cập nhật chức năng

const { target } = event;
// is equivalent to
const target = event.target;

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Nếu thuộc tính

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

2. Khi người dùng nhấn một toán tử sau khi nhập toán hạng thứ hai

Tình huống thứ hai chúng ta cần xử lý xảy ra khi người dùng nhập toán hạng thứ hai và nhấn phím toán tử. Khi đó đã có đầy đủ các thành phần để đánh giá biểu thức nên ta cần thực hiện và hiển thị kết quả ra màn hình.

<input type="text" class="calculator-screen" value="" disabled />

Tạo một chức năng mới gọi là

function inputDecimal(dot) {
  // If the `displayValue` property does not contain a decimal point
  if (!calculator.displayValue.includes(dot)) {
    // Append the decimal point
    calculator.displayValue += dot;
  }
}

function inputDigit(digit) {
  const { displayValue } = calculator;
  // Overwrite `displayValue` if the current value is '0' otherwise append to it
  calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Hàm này lấy toán hạng thứ nhất, toán hạng thứ hai và toán tử làm đối số và kiểm tra giá trị của toán tử để xác định cách đánh giá biểu thức. Nếu toán tử là

function inputDecimal(dot) {
  // If the `displayValue` property does not contain a decimal point
  if (!calculator.displayValue.includes(dot)) {
    // Append the decimal point
    calculator.displayValue += dot;
  }
}

Tiếp theo, cập nhật chức năng

function inputDigit(digit) {
  const { displayValue } = calculator;
  // Overwrite `displayValue` if the current value is '0' otherwise append to it
  calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Khối

function inputDecimal(dot) {
  // If the `displayValue` property does not contain a decimal point
  if (!calculator.displayValue.includes(dot)) {
    // Append the decimal point
    calculator.displayValue += dot;
  }
}

function inputDigit(digit) {
  const { displayValue } = calculator;
  // Overwrite `displayValue` if the current value is '0' otherwise append to it
  calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}

<input type="text" class="calculator-screen" value="" disabled />

function inputDecimal(dot) {
  // If the `displayValue` property does not contain a decimal point
  if (!calculator.displayValue.includes(dot)) {
    // Append the decimal point
    calculator.displayValue += dot;
  }
}

function inputDecimal(dot) {
  // If the `displayValue` property does not contain a decimal point
  if (!calculator.displayValue.includes(dot)) {
    // Append the decimal point
    calculator.displayValue += dot;
  }
}

Kết quả này sau đó được hiển thị cho người dùng bằng cách cập nhật thuộc tính

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

dùng thử. Nhập

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Điều này là do việc nhấn phím trừ sẽ kích hoạt tính toán của phép toán đầu tiên (

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

<input type="text" class="calculator-screen" value="" disabled />

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

function inputDecimal(dot) {
  // If the `displayValue` property does not contain a decimal point
  if (!calculator.displayValue.includes(dot)) {
    // Append the decimal point
    calculator.displayValue += dot;
  }
}

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

3. Khi hai hoặc nhiều toán tử được nhập liên tiếp

Việc một người thay đổi suy nghĩ về loại hoạt động mà người đó muốn thực hiện là điều khá phổ biến nên máy tính phải xử lý việc này đúng cách

Giả sử bạn muốn cộng bảy và hai lại với nhau, bạn sẽ nhấp vào

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Hãy nhớ rằng tại thời điểm nhập toán tử,

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

Sửa hàm

function inputDigit(digit) {
  const { displayValue } = calculator;
  // Overwrite `displayValue` if the current value is '0' otherwise append to it
  calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Thay đổi có liên quan được đánh dấu ở trên. Câu lệnh

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

dùng thử. Nhấp vào nhiều toán tử sau khi nhập một số chữ số và theo dõi đối tượng máy tính trong bảng điều khiển. Lưu ý rằng thuộc tính

<input type="text" class="calculator-screen" value="" disabled />

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

Đặt lại máy tính

Nhiệm vụ cuối cùng là đảm bảo người dùng có thể đặt lại máy tính về trạng thái ban đầu bằng cách nhấn một phím. Trong hầu hết các máy tính, nút

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Hãy tiếp tục và tạo một chức năng mới bên dưới

function inputDecimal(dot) {
  // If the `displayValue` property does not contain a decimal point
  if (!calculator.displayValue.includes(dot)) {
    // Append the decimal point
    calculator.displayValue += dot;
  }
}

function updateDisplay() {
  // select the element with class of `calculator-screen`
  const display = document.querySelector('.calculator-screen');
  // update the value of the element with the contents of `displayValue`
  display.value = calculator.displayValue;
}

updateDisplay();

Sau đó thay thế dòng sau trong chức năng gọi lại trình nghe sự kiện của phím

function updateDisplay() {
  // select the element with class of `calculator-screen`
  const display = document.querySelector('.calculator-screen');
  // update the value of the element with the contents of `displayValue`
  display.value = calculator.displayValue;
}

updateDisplay();

với đoạn mã sau

function updateDisplay() {
  // select the element with class of `calculator-screen`
  const display = document.querySelector('.calculator-screen');
  // update the value of the element with the contents of `displayValue`
  display.value = calculator.displayValue;
}

updateDisplay();

Hàm

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

<input type="text" class="calculator-screen" value="" disabled />

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

<input type="text" class="calculator-screen" value="" disabled />

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

Sửa lỗi thập phân

Nếu bạn nhập một dấu thập phân sau khi bấm vào một toán tử, nó sẽ được thêm vào toán hạng đầu tiên thay vì là một phần của toán hạng thứ hai

Chúng ta có thể sửa lỗi này bằng cách thực hiện sửa đổi sau đối với chức năng

function inputDigit(digit) {
  const { displayValue } = calculator;
  // Overwrite `displayValue` if the current value is '0' otherwise append to it
  calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}

function updateDisplay() {
  // select the element with class of `calculator-screen`
  const display = document.querySelector('.calculator-screen');
  // update the value of the element with the contents of `displayValue`
  display.value = calculator.displayValue;
}

updateDisplay();

Nếu

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

<input type="text" class="calculator-screen" value="" disabled />

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

<input type="text" class="calculator-screen" value="" disabled />

Lỗi hiện đã được sửa

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

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

Cập nhật trình xử lý sự kiện của khóa như hình bên dưới. Tất cả các khối

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

const { target } = event;
// is equivalent to
const target = event.target;

function updateDisplay() {
  // select the element with class of `calculator-screen`
  const display = document.querySelector('.calculator-screen');
  // update the value of the element with the contents of `displayValue`
  display.value = calculator.displayValue;
}

updateDisplay();

Bằng cách này, việc thêm các hàm mới vào máy tính sẽ dễ dàng hơn rất nhiều và bạn không cần phải gọi hàm

const { target } = event;
// is equivalent to
const target = event.target;

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

Độ chính xác của dấu phẩy động

Tôi muốn bạn chú ý đến một vấn đề xảy ra khi kết quả của một phép toán là một số động. Ví dụ:

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Trong các trường hợp khác, bạn nhận được kết quả mong đợi. Ví dụ:

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Một trong những giải pháp tiềm năng cho vấn đề này được đề xuất trong trang được liên kết ở trên là định dạng kết quả thành một số vị trí thập phân cố định để các vị trí khác bị loại bỏ. Chúng ta có thể kết hợp hàm parseFloat của JavaScript với Số. toFixed để triển khai giải pháp này trong ứng dụng máy tính của chúng tôi

Trong hàm

function inputDigit(digit) {
  const { displayValue } = calculator;
  // Overwrite `displayValue` if the current value is '0' otherwise append to it
  calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}

function updateDisplay() {
  // select the element with class of `calculator-screen`
  const display = document.querySelector('.calculator-screen');
  // update the value of the element with the contents of `displayValue`
  display.value = calculator.displayValue;
}

updateDisplay();

với đoạn mã sau

function updateDisplay() {
  // select the element with class of `calculator-screen`
  const display = document.querySelector('.calculator-screen');
  // update the value of the element with the contents of `displayValue`
  display.value = calculator.displayValue;
}

updateDisplay();

Phương thức

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

Trong ví dụ trước,

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

function updateDisplay() {
  // select the element with class of `calculator-screen`
  const display = document.querySelector('.calculator-screen');
  // update the value of the element with the contents of `displayValue`
  display.value = calculator.displayValue;
}

updateDisplay();

Những số không thừa đó không quan trọng, vì vậy chúng ta có thể sử dụng

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

function updateDisplay() {
  // select the element with class of `calculator-screen`
  const display = document.querySelector('.calculator-screen');
  // update the value of the element with the contents of `displayValue`
  display.value = calculator.displayValue;
}

updateDisplay();

Và đó là cách chúng tôi có thể khắc phục sự cố này trong ứng dụng của mình. Tôi chọn số 7 trong trường hợp này vì nó đủ chính xác cho ứng dụng máy tính này. Một lượng chính xác cao hơn có thể được yêu cầu trong các tình huống khác

Là một phần thưởng bổ sung, kết quả hiện vừa vặn trên màn hình

Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này

Nội dung thưởng

Tôi đã chuẩn bị thêm một số cải tiến cho ứng dụng máy tính này cho những người ủng hộ Patreon của tôi. Các chức năng sau đã được thêm vào ứng dụng. sin, cos, tan, log, bình phương, căn bậc hai, giai thừa, phần trăm, cộng/trừ, π và ce

Hỗ trợ tôi trên Patreon để mở khóa phần tiếp theo của hướng dẫn này

Nếu bạn muốn có quyền truy cập vào tất cả nội dung thưởng của tôi (bao gồm cả nội dung này), hãy cân nhắc hỗ trợ Sinh viên năm nhất trên Patreon. Sự hỗ trợ của bạn sẽ giúp tôi tạo ra nhiều hướng dẫn hơn với tốc độ nhanh hơn

Phần kết luận

Điều đó kết thúc hướng dẫn của tôi, tôi hy vọng bạn đã học được nhiều điều từ nó. Vui lòng để lại nhận xét nếu một phần của bài viết không đủ rõ ràng đối với bạn và đăng ký nhận bản tin của tôi để nhận thêm các hướng dẫn tuyệt vời như hướng dẫn này trong hộp thư đến của bạn

Tôi có thể tạo máy tính bằng JavaScript không?

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 Làm cách nào để tạo máy tính trong JavaScript bằng dấu nhắc? hàm myFunction() { var x,y,z,oper; x=prompt("Nhập số đầu tiên"); y=prompt("Nhập số thứ hai"); oper=prompt("Nhập toán tử"); if(oper=="+"){ z=Số(x)+Số(y); Làm cách nào để tạo một máy tính trong HTML? Ví dụ về Máy tính sử dụng HTML. Đọc tiếp programming javascript Reply 7 0 Chia sẻ Bài Viết Liên Quan Văn miếu quốc tử giám được xây dựng năm nào năm 2024 mẹo hay Xây Đựng Xây Văn Miếu Trọng Văn Miếu Ngân hàng deutsche bank ag là ngân hàng gì năm 2024 là ai Khoa Học Ngân hà Deutsche Bank Vietnam Viết số thích hợp vào ô trống toán lớp 4 năm 2024 mẹo hay Bản sao trích lục giấy khai sinh là gì năm 2024 là ai Hỏi Đáp Là gì Bài 42 vật lí 9 sách bài tập năm 2024 mẹo hay Khỏe Đẹp Bài tập Học Tốt Sách Khi bị chặn facebook sẽ như thế nào năm 2024 mẹo hay Hỏi Đáp Thế nào Công Nghệ Facebook Chúa trời có phải là nhà toán học fahasa năm 2024 mẹo hay Học Tốt Học Xây Đựng Nhà Giá bán hàng hóa là gì năm 2024 là ai Hỏi Đáp Là gì Cryto Giá Mua Sắm Giá bán Cần tìm phần mềm bán hàng thanh hóa năm 2024 mẹo hay Tỷ lệ chênh lệch giàu nghèo tiếng anh là gì năm 2024 là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Phương pháp dạy toán cho trẻ 5 tuổi năm 2024 mẹo hay Học Tốt Phương pháp Dung dịch vệ sinh xe hơi tiếng anh là gì năm 2024 là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Ngôn ngữ Dịch Hạch toán phí bảo hiểm xe ô tô năm 2024 mẹo hay Văn 11 thao tác lập luận so sánh năm 2024 mẹo hay So Sánh So sánh Nguyễn bá trung và nguyễn bình trường 2023 năm 2024 mẹo hay Chất khô không béo trong sữa là gì năm 2024 là ai Hỏi Đáp Là gì Bài tập tự luận ba định luật niuton năm 2024 mẹo hay Khỏe Đẹp Bài tập Bài tập rút gọn biểu thức toán lớp 8 năm 2024 mẹo hay Khỏe Đẹp Bài tập Danh sách bị hạn chế trên fb là gì năm 2024 là ai Hỏi Đáp Là gì Học Tốt Sách Top List Danh sách Clo hóa ankan x theo tỉ lệ 1 1 năm 2024 mẹo hay Quảng Cáo Có thể bạn quan tâm Bài toán hình lớp 7 khó nhất thế giới năm 2024 1 ngày trước . bởi InnovativeFastball Năng lực sư phạm là gì năm 2024 1 ngày trước . bởi PreparatoryCabot Bài tập sắp xếp câu trong tiếng anh năm 2024 1 ngày trước . bởi DelightedMeantime Các dạng toán khó trong hình học lướp 9 năm 2024 1 ngày trước . bởi DazzlingAllegation Cho a 2 5 hỏi điểm nào sau đây năm 2024 1 ngày trước . bởi GnarledLowry Xúc bình xăng con trong massage là gì năm 2024 1 ngày trước . bởi FiscalBreaker Các đề văn về bài thơ đồng chí năm 2024 1 ngày trước . bởi HornyCanonization Nối dõi tông đường là gì năm 2024 1 ngày trước . bởi IntolerantCilantro Công ty nước ngoài tuyển dụng kế toán tại huế năm 2024 1 ngày trước . bởi PassionateOutfield Tin học lớp 5 bài 2 luyện tập năm 2024 1 ngày trước . bởi GingerAdaptation Toplist được quan tâm #1 Top 9 tập bản đồ lớp 8 bài 31 2023 5 tháng trước #2 Top 6 kết quả thi hsg đà nẵng 2022 2023 5 tháng trước #3 Top 9 tủ nhựa đài loan 4 cánh 3d 2023 5 tháng trước #4 Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023 5 tháng trước #5 Top 8 tìm việc làm tiện, phay bảo q7 2023 5 tháng trước #6 Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023 5 tháng trước #7 Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023 5 tháng trước #8 Top 2 bài the dục phát triển chung lớp 6 2022 2023 5 tháng trước #9 Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023 5 tháng trước Quảng cáo Xem Nhiều Giải bài 85 sgk toán 8 trang 109 năm 2024 1 tuần trước . bởi Anti-inflationFinale D là ký hiệu gì trong hóa học năm 2024 3 ngày trước . bởi PreposterousTheology Top diễn viên nam u 50 ấn độ nổi tiếng năm 2024 5 ngày trước . bởi ForthrightBallet Chuyên viên tư vấn khách hàng doanh nghiệpn là gì năm 2024 6 ngày trước . bởi UncaringDigress Nhà hàng phố đêm 346 phạm văn đồng năm 2024 13 giờ trước . bởi UnregulatedIntersection Ngôn ngữ dịch sang tiếng anh là gì năm 2024 5 ngày trước . bởi UnsuccessfulFooting Balo đi phượt tầm bao nhiêu lít là vừa năm 2024 1 tuần trước . bởi Self-effacingOrchestra Bài 42 vật lí 9 sách bài tập năm 2024 1 giờ trước . bởi One-manReceptor Top trường có khoa marketing ở hà nội năm 2024 1 tuần trước . bởi MistyTerror Thẻ đông á chuyển khoản 1 ngày được bao nhiêu năm 2024 6 ngày trước . bởi FragrantLowry Quảng cáo 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 Xây Nhà Inc.