Langkau ke kandungan
WANCODE
EN

Bina Kalkulator Interaktif

20 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

  • Simpan state aplikasi dalam beberapa variable dan kemas kini halaman berdasarkannya
  • Asingkan logik tulen (calculate) daripada kod DOM, dan kendalikan kes tepi seperti pembahagian dengan sifar
  • Sambungkan banyak butang dengan data attribute dan tambah pintasan papan kekunci

Idea utama

Aplikasi interaktif ialah satu kitaran: pengguna buat sesuatu → event handler mengemas kini state → halaman dilukis semula berdasarkan state. Asingkan tiga bahagian itu dan kalkulator pun kekal ringkas.

Ini projek penutup untuk trek setakat ini. HTML dan CSS sudah siap; anda akan menulis semua tingkah lakunya. Anda akan guna function, syarat, string, array, loop, DOM dan event — semuanya sekali gus.

1. Rancang state

Sebelum menulis kod, tanya: apa yang kalkulator perlu ingat? Untuk 12 + 3 = ia perlu tahu nombor yang sedang ditaip, nombor pertama, dan operator yang dipilih. Itulah state:

JavaScript
let current = "0";   // what's being typed — a STRING, so "1" then "2" makes "12"
let previous = null; // the first number, saved when you press an operator
let operator = null; // "+", "-", "*" or "/"
  1. Tekan 1, 2 → current menjadi "12".
  2. Tekan + → previous = 12, operator = "+", current kembali kepada "0".
  3. Tekan 3 → current ialah "3".
  4. Tekan = → calculate(12, "+", 3) memberi 15, yang menjadi current baharu.

2. Asingkan bahagian matematik

calculate(a, op, b) patut buat kerja matematik sahaja: nombor masuk, jawapan keluar. Tiada document, tiada event. Function begini mudah diuji dan mudah diguna semula — butang dan papan kekunci akan memanggilnya.

Function tulen ialah mesin: input yang sama sentiasa memberi output yang sama.

Dua kes tepi yang dikendalikan kalkulator sebenar

Pembahagian dengan sifar: dalam JavaScript 8 / 0 ialah Infinity, yang bukan jawapan berguna — paparkan Error sebagai ganti. Hingar titik terapung (floating-point): komputer menyimpan perpuluhan dalam binari, jadi 0.1 + 0.2 ialah 0.30000000000000004. Membundarkan kepada kira-kira 10 tempat perpuluhan — Math.round(result * 1e10) / 1e10 — akan menyembunyikannya.

3. Sambungkan banyak butang sekali gus

Setiap butang digit membawa nilainya dalam data attribute, seperti data-digit="7". JavaScript membacanya sebagai button.dataset.digit. Jadi, bukannya sepuluh listener berasingan, satu loop sudah memadai:

JavaScript
// <button data-digit="7">7</button>
for (const button of document.querySelectorAll("[data-digit]")) {
  button.addEventListener("click", () => inputDigit(button.dataset.digit));
}

Bina sedikit demi sedikit dan tekan Run dengan kerap: pastikan satu digit muncul, kemudian beberapa digit, kemudian operator, kemudian =. Bila ada yang rosak, console.log(current, previous, operator) di dalam function anda akan menunjukkan state semasa.

Tulis calculate(a, op, b). Ia memulangkan jawapan untuk +, -, * dan /, dan string "Error" apabila membahagi dengan sifar atau apabila op ialah sesuatu yang lain.

Bundarkan hasilnya supaya calculate(0.1, "+", 0.2) memberi tepat 0.3.

Semakan

  • Keempat-empat operator berfungsi
  • Bahagi dengan sifar dan operator tidak dikenali memberi "Error"
  • 0.1 + 0.2 memberi 0.3

Uji kefahaman

Q1

Kenapa current disimpan sebagai string ("12") dan bukan nombor semasa menaip?

Q2

Apakah nilai 8 / 0 dalam JavaScript?

Q3

Apakah kelebihan utama memastikan calculate bebas daripada sebarang kod DOM?

Apa yang anda pelajari

  • Rancang state dahulu: apa yang aplikasi perlu ingat antara setiap klik?
  • Asingkan logik tulen (calculate) daripada kod DOM dan event.
  • Data attribute + satu loop menyambungkan banyak butang yang serupa; dataset membacanya.
  • Kendalikan kes tepi dengan sengaja: pembahagian dengan sifar, titik berulang, hingar floating-point.
Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Langkah 1 daripada 3