JavaScript to język programowania, który umożliwia tworzenie dynamicznych aplikacji internetowych. W tym wpisie pokażemy, jak zbudować prosty kalkulator przy użyciu JavaScript.
Pierwszym krokiem jest stworzenie szkieletu HTML, który będzie zawierał elementy potrzebne do działania kalkulatora:
<div id="kalkulator"> <input type="text" id="wynik" readonly> <br> <button id="przycisk_1">1</button> <button id="przycisk_2">2</button> <button id="przycisk_3">3</button> <button id="przycisk_dodaj">+</button> <br> <button id="przycisk_4">4</button> <button id="przycisk_5">5</button> <button id="przycisk_6">6</button> <button id="przycisk_odejmij">-</button> <br> <button id="przycisk_7">7</button> <button id="przycisk_8">8</button> <button id="przycisk_9">9</button> <button id="przycisk_mnozenie">*</button> <br> <button id="przycisk_czysc">C</button> <button id="przycisk_0">0</button> <button id="przycisk_wynik">=</button> <button id="przycisk_dzielenie">/</button> </div>
Następnie możemy zdefiniować funkcje JavaScript, które będą obsługiwać działania wykonywane przez kalkulator:
// Pobierz elementy HTML
const przyciski = document.querySelectorAll('#kalkulator button');
const wynik = document.querySelector('#kalkulator input');
// Funkcja, która obsługuje wciśnięcie przycisku
function wcisnietoPrzycisk() {
// Pobierz wartość przycisku
const przycisk = this.innerHTML;
// Wykonaj odpowiednie działanie
if (przycisk === '=') {
wynik.value = eval(wynik.value);
} else if (przycisk === 'C') {
wynik.value = '';
} else {
wynik.value += przycisk;
}
}
// Dodaj obsługę zdarzenia dla każdego przycisku
przyciski.forEach(przycisk => {
przycisk.addEventListener('click', wcisnietoPrzycisk);
});
W powyższym kodzie użyliśmy metody querySelectorAll do pobrania wszystkich przycisków znajdujących się w elemencie #kalkulator. Następnie zdefiniowaliśmy funkcję wcisnietoPrzycisk, która jest wywoływana każdorazowo, gdy użytkownik wciśnie jeden z przycisków. Funkcja pobiera wartość wciśniętego przycisku, a następnie wykonywane jest odpowiednie działanie, w zależności od tego, który przycisk został wciśnięty. Jeśli wciśnięto przycisk „=” to wywoływana jest funkcja eval, która oblicza wynik, a następnie wyświetla go w polu tekstowym. Jeśli wciśnięto przycisk „C”, to pole tekstowe zostaje wyczyszczone. W przeciwnym razie wartość przycisku jest dodawana do pola tekstowego.
Na koniec, dla każdego przycisku dodajemy obsługę zdarzenia „click”, która wywołuje funkcję wcisnietoPrzycisk.
Cały kod można z łatwością umieścić w pliku HTML lub osobnym pliku JavaScript i załadować go na stronie, tak jak każdy inny skrypt.
Mam nadzieję, że ten wpis pomógł Ci zrozumieć, jak zbudować prosty kalkulator w JavaScript. Powyższy kod może być rozwijany i ulepszany w celu dostosowania do specyficznych potrzeb projektu, ale stanowi on dobry punkt wyjścia dla rozpoczęcia pracy z JavaScript.