Первые шаги в JavaScript: создание калькулятора
https://t.me/javascriptv
Введение
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(). Вот как это работает.
- Пользователь вводит в пользовательский интерфейс математическое выражение, например “2 + 3” или “10 х 5”.
- Когда пользователь нажимает кнопку для вычисления результата, вызывается функция calculateResult().
- Внутри функции calculateResult() имеется блок try…catch для обработки возможных ошибок. Функция eval() используется для вычисления выражения, содержащегося в элементе дисплея.
- Если выражение корректно, то eval() вернет результат арифметической операции, который затем будет отображен в элементе дисплея с помощью document.getElementById(‘display’).value = eval(…). Например, если выражение имело вид “2 + 3”, то после вычисления на дисплей будет выведено значение “5”.
- Если в процессе вычисления произойдет ошибка (например, пользователь введет некорректное выражение типа “2 / 0”), то код внутри блока catch будет выполнен, а в элементе дисплея появится надпись “Error” (“Ошибка”).
Таким образом, арифметические операции выполняются с помощью функции JavaScript eval(), которая вычисляет строку, содержащую математическое выражение, и возвращает результат.
Важно отметить, что использование eval() может быть рискованным из-за проблем безопасности, связанных с инъекцией кода, поэтому необходимо проверять и защищать вводимые пользователем данные, если они используются с функцией eval().
Ссылки на проект:
Заключение
JavaScript — мощный язык, который можно использовать для создания интерактивных веб-приложений. В этой статье мы создали простой калькулятор, чтобы продемонстрировать базовые функции JavaScript. По мере дальнейшего изучения и практического применения JavaScript вы откроете для себя его огромный потенциал для создания динамичных и увлекательных веб-приложений.