Menu

Матеріали для тих, хто починає кар'єру в IT

Як написати простий застосунок на JavaScript: Створюємо калькулятор

Publish DateMate academy Mate academy

В цій статті ми розглянемо, як створити простий веб-калькулятор з використанням HTML, CSS і JavaScript. Калькулятор буде виконувати основні математичні операції: додавання, віднімання, множення та ділення.

Основи JavaScript для створення калькулятора

Перш ніж ми почнемо, давайте розглянемо декілька основних концепцій JavaScript, які нам знадобляться:

  • Змінні: В JavaScript змінні використовуються для зберігання даних, як-от числові значення для обчислень.
  • Функції: Функції в JavaScript використовуються для виконання певних дій. У нашому випадку ми будемо використовувати функції для обчислення результатів математичних операцій.
  • Обробники подій: Обробники подій дозволяють виконувати код у відповідь на певні дії користувача, наприклад, на натискання кнопки.

Підготовка до роботи

Вам знадобиться текстовий редактор для написання коду та веб-браузер для його перегляду. Можна використовувати будь-який текстовий редактор, наприклад, Sublime Text, Atom або Visual Studio Code. Щодо веб-браузера, ви можете використовувати будь-який сучасний браузер, наприклад, Chrome, Firefox або Safari.

Створення HTML-структури онлайн калькулятора

Перш ніж почати писати JavaScript, нам потрібно створити основну структуру нашого калькулятора за допомогою HTML. Наш HTML-код може виглядати приблизно так:

<!DOCTYPE html>
<html>
<head>
    <title>Простий калькулятор</title>
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <div id="buttons">
            <div class="button">7</div>
            <div class="button">8</div>
            <div class="button">9</div>
            <div class="button">/</div>
            <div class="button">4</div>
            <div class="button">5</div>
            <div class="button">6</div>
            <div class="button">*</div>
            <div class="button">1</div>
            <div class="button">2</div>
            <div class="button">3</div>
            <div class="button">-</div>
            <div class="button">0</div>
            <div class="button">.</div>
            <div class="button">=</div>
            <div class="button">+</div>
        </div>
    </div>
</body>
</html>

Цей код створює веб-сторінку з калькулятором, що має дисплей для виводу результатів та кнопки для введення чисел та виконання операцій. Клас button доданий до кожної кнопки калькулятора, що дозволить нам легко маніпулювати цими кнопками в JavaScript.

Додавання стилів CSS для калькулятора

CSS є ключовим для створення привабливого візуального вигляду нашого калькулятора. Він дозволяє нам створити як прості, так і складні дизайни, і в той же час забезпечує добре розуміння структури нашого HTML. Зокрема, ми можемо використовувати CSS для зміни шрифтів, кольорів, відступів, рамок та іншого.

Розглянемо, як ми можемо написать наш CSS, щоб зробити наш калькулятор більш привабливим.

Стилізуємо калькулятор в цілому

    /* Стилізація для всього калькулятора */
    #calculator {
        width: 300px;
        margin: auto;
        padding: 20px;
        background-color: #f3f3f3;
        border-radius: 20px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    }

Стилізуємо дисплей калькулятора

/* Стилізація для дисплея */
    #display {
        width: 100%;
        height: 50px;
        text-align: right;
        margin-bottom: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        border: none;
        background-color: #fff;
        font-size: 20px;
        border-radius: 10px;
    }

Робимо стилі для кнопок

 /* Стилізація для кнопок */
    .button {
        width: 66px;
        height: 40px;
        margin: 5px;
        display: inline-block;
        background-color: #007BFF;
        color: white;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        border-radius: 5px;
        font-size: 18px;
        transition: background-color 0.3s ease;
    }

Додаємо додаткові стилі для наведення та кнопки “=”

/* Зміна кольору при наведенні на кнопку */
    .button:hover {
        background-color: #0056b3;
    }

    /* Додаткова стилізація для кнопки рівності */
    .button.equals {
        background-color: #4CAF50;
    }

    .button.equals:hover {
        background-color: #45a049;
    }

Фінальний вигляд CSS калькулятора

<style>
    #calculator {
        width: 300px;
        margin: auto;
        padding: 20px;
        background-color: #f3f3f3;
        border-radius: 20px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    }

    #display {
        width: 100%;
        height: 50px;
        text-align: right;
        margin-bottom: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        border: none;
        background-color: #fff;
        font-size: 20px;
        border-radius: 10px;
    }

    .button {
        width: 66px;
        height: 40px;
        margin: 5px;
        display: inline-block;
        background-color: #007BFF;
        color: white;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        border-radius: 5px;
        font-size: 18px;
        transition: background-color 0.3s ease;
    }

    .button:hover {
        background-color: #0056b3;
    }

    .button.equals {
        background-color: #4CAF50;
    }

    .button.equals:hover {
        background-color: #45a049;
    }
</style>

В цьому CSS ми використали кольори, тіні та переходи, щоб створити більш привабливий та динамічний вигляд. Це лише один з багатьох можливих варіантів оформлення калькулятора, і ви можете експериментувати з різними стилями та кольорами, щоб створити власний унікальний стиль калькулятора.

Пишемо логіку калькулятора з JavaScript

Наступним кроком є додавання логіки калькулятора з використанням JavaScript. Це включає в себе збереження введених чисел і виконання обчислень на основі натиснутої кнопки.

Спочатку додамо JavaScript код для обробки подій кліків по кнопках.

Отримуємо всі кнопки з документа:


var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '/'];
var decimalAdded = false;

Додаємо подію onclick до всіх клавіш та виконуємо дії


for (var i = 0; i < keys.length; i++) {
    keys[i].onclick = function(e) {

Отримуємо введення та значення кнопки:


var input = document.querySelector('#display');
var inputVal = input.innerHTML;
var btnVal = this.innerHTML;

Тепер просто додаємо значення клавіш (btnValue) до вхідної строки і, нарешті, використовуємо функцію eval JavaScript для отримання результату. Якщо натиснута клавіша очищення, стираємо все.


if (btnVal == 'C') {
    input.innerHTML = '';
    decimalAdded = false;
    }

Якщо натиснута клавіша рівності, обчислюємо та відображаємо результат.


    else if (btnVal == '=') {
         var equation = inputVal;
         var lastChar = equation[equation.length - 1];

Замінюємо всі випадки 'x' на '*' відповідно. Це можна з легкістю зробити з допомогою regex та тегу 'g', який замінить всі випадки знайденого символа / підрядка.


equation = equation.replace(/x/g, '*');

Останнє, що залишилося зробити, це перевірка останнього символа рівняння. Якщо це оператор або десятковий роздільник, видаляємо його.


if (operators.indexOf(lastChar) > -1 || lastChar == '.')
   equation = equation.replace(/.$/, '');
            
if (equation)
    input.innerHTML = eval(equation);
                
decimalAdded = false;

Основна функціональність калькулятора завершена. Але є деякі проблеми, такі як:

  1. Не повинно бути двох операторів один за одним.
  2. Рівняння не повинно починатися з оператора, крім мінуса
  3. В числі не повинно бути більше одного десяткового роздільника

Ми вирішимо ці проблеми за допомогою деяких простих перевірок.

indexOf (працює тільки в IE9+)


else if (operators.indexOf(btnVal) > -1) {

Натиснуто оператор. Отримуємо останній символ з рівняння


var lastChar = inputVal[inputVal.length - 1];

Додайте оператор, якщо вхідне значення не пусте і немає оператора в кінці


if (inputVal != '' && operators.indexOf(lastChar) == -1) 
    input.innerHTML += btnVal;

Дозвольте мінус, якщо рядок порожній


else if (inputVal == '' && btnVal == '-') 
         input.innerHTML += btnVal;

Замініть останній оператор (якщо він існує) на недавно натиснутий оператор.


if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) {

Тут '.' відповідає будь-якому символу, а $ означає кінець рядка, тому будь-що (буде оператором в цьому випадку) в кінці рядка буде замінено на новий оператор.


input.innerHTML = inputVal.replace(/.$/, btnVal);
                }  
decimalAdded =false;

Тепер залишилася тільки проблема з десятковим роздільником. Ми можемо вирішити її легко, використовуючи прапор 'decimalAdded', який ми встановимо один раз, коли додамо десятковий роздільник, і запобігатимо додаванню більше десяткових роздільників одразу після його встановлення. Він буде скинутий, коли натиснете оператор, eval або clear key


 else if (btnVal == '.') {
                if (!decimalAdded) {
                    input.innerHTML += btnVal;
                    decimalAdded = true;
                }
            }

Якщо натиснута будь-яка інша клавіша, просто додайте її


else {
      input.innerHTML += btnVal;
     }

Додатково, робимо запобігання перезавантаження сторінки після відправки.


e.preventDefault();

В фіналі наш JavaScript буде виглядати так:

<script>
    var keys = document.querySelectorAll('#calculator span');
    var operators = ['+', '-', 'x', '/'];
    var decimalAdded = false;

    for (var i = 0; i < keys.length; i++) {
        keys[i].onclick = function(e) {
            var input = document.querySelector('#display');
            var inputVal = input.innerHTML;
            var btnVal = this.innerHTML;
            
            if (btnVal == 'C') {
                input.innerHTML = '';
                decimalAdded = false;
            }

            else if (btnVal == '=') {
                var equation = inputVal;
                var lastChar = equation[equation.length - 1];
            
                equation = equation.replace(/x/g, '*');
            
                if (operators.indexOf(lastChar) > -1 || lastChar == '.')
                    equation = equation.replace(/.$/, '');
            
                if (equation)
                    input.innerHTML = eval(equation);
                
                decimalAdded = false;
            }
            
        
            
            else if (operators.indexOf(btnVal) > -1) {
                var lastChar = inputVal[inputVal.length - 1];
            
                if (inputVal != '' && operators.indexOf(lastChar) == -1) 
                    input.innerHTML += btnVal;
            
                else if (inputVal == '' && btnVal == '-') 
                    input.innerHTML += btnVal;
            
                if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
                    input.innerHTML = inputVal.replace(/.$/, btnVal);
                }
            
                decimalAdded =false;
            }
            
            else if (btnVal == '.') {
                if (!decimalAdded) {
                    input.innerHTML += btnVal;
                    decimalAdded = true;
                }
            }
            
            else {
                input.innerHTML += btnVal;
            }
            
            e.preventDefault();
        } 
    }
</script>

Цей код працює, обробляючи події кліку по всіх кнопках калькулятора. Він використовує цикл for для проходження через всі кнопки та додавання обробників подій onclick до кожної з них.

Цей код також містить перевірку, щоб уникнути наступних ситуацій:

  1. Два оператори не можуть бути додані послідовно.
  2. Рівняння не може починатися з оператора, крім мінуса.
  3. У числі не повинно бути більше одного десяткового роздільника.

Це реалізовано за допомогою декількох простих перевірок в коді.

Тестування та виправлення помилок

Одразу після розробки нашого простого калькулятора на JavaScript ми повинні провести його тестування, щоб переконатися, що все працює належним чином.

1. Основні функціональні тести

Основні функціональні тести мають на меті перевірити основну роботу калькулятора, тобто додавання, віднімання, множення та ділення чисел. Вони включають введення декількох чисел і виконання операцій між ними. Під час цих тестів важливо перевірити, що відображення на екрані оновлюється належним чином і показує правильні результати.

2. Тести меж

Тести меж є дуже важливими, оскільки вони допомагають виявити, як калькулятор веде себе в крайніх випадках. Ви могли б ввести дуже великі числа або виконувати операції, які викликають математичні помилки, наприклад, ділення на нуль. Такі тести допоможуть виявити можливі помилки або непередбачені поведінки в програмі.

3. Виправлення помилок

Після виявлення помилок або проблемних моментів на етапі тестування, наступним кроком є їх виправлення. Важливо внести відповідні зміни в код і повторно протестувати калькулятор, щоб переконатися, що проблема була вирішена. Це може включати зміну логіки JavaScript або навіть зміну HTML та CSS, якщо проблема пов'язана з відображенням.

Після завершення цього процесу наш калькулятор готовий до використання! Завжди пам'ятайте, що тестування - це важливий аспект розробки програмного забезпечення, і навіть найпростіший веб-застосунок має бути ретельно протестований перед запуском.

Заключення

Створення простого веб-калькулятора - це чудовий проект для початку роботи з JavaScript. Він допомагає розуміти основи мови, а також демонструє, як можна використовувати JavaScript для створення веб-застосунків.

Схожі матеріали:

Огляд CSS Grid та Flexbox: коли та як використовувати

Front end вебінар «Тестування в JavaScript»

Робота з JSON: серіалізація та десеріалізація даних, взаємодія з веб-сервером

Site Footer