Первые шаги в JavaScript: создание калькулятора

Введение

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

Для тех, кто особенно интересуется устойчивостью веб-приложений к киберугрозам, этот язык становится еще более важным. Понимание того, как обеспечить безопасность веб-приложений и защитить их от таких атак, как XSS (межсайтовый скриптинг), крайне важно в условиях современного цифрового ландшафта.

В этой статье мы познакомимся с языком JavaScript на примере создания простого калькулятора. Вы получите базовое представление о синтаксисе JavaScript и о том, как использовать его для создания интерактивных веб-приложений. Независимо от того, на что вы ориентируетесь  —  фронтенд-разработку, полностековое проектирование или безопасность веб-приложений,  —  написание JavaScript-кода является ценным навыком, открывающим доступ к широкому спектру возможностей.

Что такое JavaScript?

JavaScript  —  это динамически типизированный скриптовый язык высокого уровня, известный прежде всего как язык веб-разработки. Он позволяет разработчикам добавлять динамическое поведение на сайты, делая их более интерактивными и отзывчивыми. JavaScript может манипулировать HTML и CSS, обрабатывать пользовательский ввод, а также взаимодействовать с веб-серверами для получения и обновления данных.

Настройка среды разработки

Чтобы начать работу с JavaScript, не нужна специальная среда разработки. Понадобится лишь веб-браузер и текстовый редактор.

В данном случае будем использовать простую HTML-страницу для демонстрации возможностей JavaScript.

Вот базовая HTML-структура для калькулятора:

<!DOCTYPE html>
<html>
<head>
 <title>Calculator</title>
</head>
<body>
 <! - Calculator content goes here →
</body>
</html>

Написание JavaScript-кода: сложение двух чисел

Теперь приступим к добавлению JavaScript-кода на HTML-страницу. JavaScript-код можно разместить в HTML-документе между тегами <script>. Будем создавать функции для обработки пользовательского ввода и выполнения вычислений. Вот простой пример функции JavaScript, которая складывает два числа:

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
</head>
<body>
    <input type="text" id="num1" placeholder="Enter first number">
    <input type="text" id="num2" placeholder="Enter second number">
    <button onclick="addNumbers()">Add</button>
    <div id="result">Result will be displayed here</div>

<script>
        function addNumbers() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 + num2;
            document.getElementById("result").innerText = "Result: " + result;
        }
        // Определение аналогичных функций для вычитания, умножения и деления
    </script>
</body>
</html>

В этом коде определяем функцию addNumbers, которая запрашивает у пользователя два числа, складывает их, а затем выводит результат на той же странице.

Создание простого калькулятора на JavaScript

Теперь добавим в программу функции вычитания, умножения и деления, а также комментарии, которые очень полезны для понимания и сопровождения кода.

Этот код создает простой калькулятор с полями ввода для двух чисел и кнопками для выполнения операций сложения, вычитания, умножения и деления.

<!DOCTYPE html>
<html>
<head>
    <title>Simple JavaScript Calculator</title>
</head>
<body>
    <!-- Поля для ввода чисел -->
    <input type="text" id="num1" placeholder="Enter first number">
    <input type="text" id "num2" placeholder="Enter second number">

    <!-- Кнопки для выполнения операций -->
    <button onclick="addNumbers()">Add</button>
    <button onclick="subtractNumbers()">Subtract</button>
    <button onclick="multiplyNumbers()">Multiply</button>
    <button onclick="divideNumbers()">Divide</button>

    <!-- Вывод результата сюда-->
    <div id="result">Result will be displayed here</div>

    <script>
        // Функция сложения двух чисел
        function addNumbers() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 + num2;
            document.getElementById("result").innerText = "Result: " + result;
        }

        // Функция вычитания одного числа из другого
        function subtractNumbers() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 - num2;
            document.getElementById("result").innerText = "Result: " + result;
        }

        // Функция умножения двух чисел
        function multiplyNumbers() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 * num2;
            document.getElementById("result").innerText = "Result: " + result;
        }

        // Функция деления одного числа на другое
        function divideNumbers() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            if (num2 === 0) {
                document.getElementById("result").innerText = "Result: Division by zero is not allowed";
            } else {
                var result = num1 / num2;
                document.getElementById("result").innerText = "Result: " + result;
            }
        }
        
        // Заголовок: простой JavaScript-калькулятор
        // Автор: Larbi OUIYZME
        // Версия: 1.0
    </script>
</body>
</html>

Создание другого калькулятора на JavaScript

Теперь расширим JavaScript-код и создадим еще один JavaScript-калькулятор.

<!DOCTYPE html>
<html>
<head>
    <title>Javascript Calculator - Version 1.0</title>
    <style>
        #calculator {
            width: 300px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            text-align: center;
        }

       #calculator button {
            width: 60px;
            height: 60px;
            font-size: 18px;
            margin: 5px;
            cursor: pointer;
        }

        #display {
            width: 80%;
            height: 40px;
            font-size: 24px; /* Настройте размер шрифта в соответствии с вашими предпочтениями */
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <h1>Javascript Calculator</h1>
    <p>Auteur: Larbi OUIYZME</p>
    <p>Version: 1.0</p>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <br>
        <button onclick="addToDisplay('7')">7</button>
        <button onclick="addToDisplay('8')">8</button>
        <button onclick="addToDisplay('9')">9</button>
        <button onclick="addToDisplay('+')">+</button>
        <br>
        <button onclick="addToDisplay('4')">4</button>
        <button onclick="addToDisplay('5')">5</button>
        <button onclick="addToDisplay('6')">6</button>
        <button onclick="addToDisplay('-')">-</button>
        <br>
        <button onclick="addToDisplay('1')">1</button>
        <button onclick="addToDisplay('2')">2</button>
        <button onclick="addToDisplay('3')">3</button>
        <button onclick="addToDisplay('*')">*</button>
        <br>
        <button onclick="addToDisplay('0')">0</button>
        <button onclick="clearDisplay()">C</button>
        <button onclick="calculateResult()">=</button>
        <button onclick="addToDisplay('/')">/</button>
    </div>

    <script>
        // Эта функция используется для добавления конкретного "value" (значения) на дисплей.
  function addToDisplay(value) {
            document.getElementById('display').value += value;
        }
        // Эта функция очищает дисплей, устанавливая его значение в пустую строку.
        function clearDisplay() {
            document.getElementById('display').value = '';
        }
        // Эта функция вычисляет результат выражения на дисплее с помощью функции 'eval'.
        // Она обрабатывает ошибки и выводит сообщение 'Error', если выражение недопустимо.
        function calculateResult() {
            try {
       // Получение результата выражения и вывод результата на дисплей.
                document.getElementById('display').value = eval(document.getElementById('display').value);
            } catch (error) {
       // Если в процессе вычисления возникла ошибка, на дисплее отобразится сообщение 'Error'.
                document.getElementById('display').value = 'Error';
            }
        }
    </script>
</body>
</html>

В приведенном JavaScript-коде арифметические операции выполняются функцией calculateResult(). Вот как это работает.

  1. Пользователь вводит в пользовательский интерфейс математическое выражение, например “2 + 3” или “10 х 5”.
  2. Когда пользователь нажимает кнопку для вычисления результата, вызывается функция calculateResult().
  3. Внутри функции calculateResult() имеется блок try…catch для обработки возможных ошибок. Функция eval() используется для вычисления выражения, содержащегося в элементе дисплея.
  4. Если выражение корректно, то eval() вернет результат арифметической операции, который затем будет отображен в элементе дисплея с помощью document.getElementById(‘display’).value = eval(…). Например, если выражение имело вид “2 + 3”, то после вычисления на дисплей будет выведено значение “5”.
  5. Если в процессе вычисления произойдет ошибка (например, пользователь введет некорректное выражение типа “2 / 0”), то код внутри блока catch будет выполнен, а в элементе дисплея появится надпись “Error” (“Ошибка”).

Таким образом, арифметические операции выполняются с помощью функции JavaScript eval(), которая вычисляет строку, содержащую математическое выражение, и возвращает результат.

Важно отметить, что использование eval() может быть рискованным из-за проблем безопасности, связанных с инъекцией кода, поэтому необходимо проверять и защищать вводимые пользователем данные, если они используются с функцией eval().

Ссылки на проект:

Заключение

JavaScript  —  мощный язык, который можно использовать для создания интерактивных веб-приложений. В этой статье мы создали простой калькулятор, чтобы продемонстрировать базовые функции JavaScript. По мере дальнейшего изучения и практического применения JavaScript вы откроете для себя его огромный потенциал для создания динамичных и увлекательных веб-приложений.

Читайте также:

Читайте нас в Telegram, VK и Дзен

Перевод статьи Larbi OUIYZME: First Steps in JavaScript and Building a Calculator

Предыдущая статьяСложные вопросы на собеседовании для тех, кто 7 лет работал с Java. Часть 2
Следующая статьяКлючевые вопросы для собеседования по Spring Boot в 2023 году. Часть 2