Получите свидетельство
Вход
Сегодня на уроке мы пропишем JavaScript-код для калькуляторов, которые создали ранее, чтобы они заработали. Мы уже прописали HTML-код, тем самым создав структуру web-страницы, а затем придали странице красивый вид, прописав CSS-правила.
В коде нам понадобится создать условные конструкции, функции и конструкции для обработки ошибок. Давайте узнаем, что это такое и как их создавать.
Условные конструкции позволяют выполнять определённые действия в зависимости от условий.
Конструкция if..else проверяет определенное условие и, если оно истинно, выполняет определённые действия. Простейшая форма конструкции if..else выглядит следующим образом:
if (условие) {
// некоторые действия
}
После ключевого слова if в круглых скобках указывается условие, а после условия идёт блок кода с нужными действиями. Если условие истинно, то выполняются действия из блока кода.
Выражение else предоставляет возможность определить действия, которые выполняются, если условие после оператора if является ложным. Блок else содержит инструкции, которые выполняются, когда условие после if равно false:
if(условие){
действия, если условие истинно
}
else{
действия, если условие ложно
}
Таким образом, если условие после if истинно, выполняется блок кода после if. Если условие ложно, то выполняется блок else.
В JavaScript есть конструкция try...catch...finally, которые предоставляет возможность обработки ошибок и выполнения некоторых действий даже при их возникновении. Давайте рассмотрим основные аспекты этой конструкции:
· Блок try: этот блок содержит инструкции, которые могут вызвать ошибку.
· Блок catch: если в блоке try происходит ошибка, управление переходит к блоку catch. Здесь можно определить действия, которые должны быть выполнены при возникновении ошибки. Параметр error содержит информацию об ошибке.
· Блок finally (необязательный): этот блок содержит инструкции, которые будут выполнены вне зависимости от того, произошла ошибка или нет.
try {
Tron();
console.log("Конец блока try");
}
catch (error) {
console.log("Возникла ошибка!");
console.log(error);
}
finally {
console.log("Блок finally");
}
Если функция Tron() не определена и вызовет ошибку, управление перейдёт в блок catch, который выведет сообщение об ошибке и саму ошибку. Затем выполнится блок finally, который выведет сообщение о выполнении блока finally.
Блок catch и finally могут использоваться вместе или отдельно, в зависимости от требуемой логики обработки ошибок.
Функции – это набор команд, который можно повторно вызывать в разных частях программы по имени функции. Обычно синтаксис определения функции выглядит так:
function имя_функции(параметры){
// Инструкции
}
Формирование функции начинается с использования ключевого слова function, за которым следует название функции.
Название функции подчиняется таким же правилам, что и у переменных: оно может содержать только буквы, цифры, символы подчёркивания и доллара ($) и должно начинаться с буквы, символа подчёркивания или $.
После указания имени функции в круглых скобках перечисляются параметры. Если у функции отсутствуют параметры, то круглые скобки остаются пустыми. Затем в фигурных скобках следует тело функции, содержащее набор инструкций.
Чтобы функция выполнила свою задачу, её нужно вызвать. Общий синтаксис вызова функции, следующий:
имя_функции(параметры)
При вызове функции после её имени в скобках указывается список параметров. Если функция не принимает параметры, то в скобках указываются пустые скобки.
Ну, что же, теперь напишем JavaScript-код для калькуляторов.
Создаём функцию с именем add, которая будет выполнять сложение чисел и обновлять результат на web-странице.
function add() {
Объявляем переменную num1 и присваиваем ей значение, которое пользователь введёт в поле с идентификатором 'num1', преобразованное в число с плавающей точкой.
var num1 = parseFloat(document.getElementById('num1').value);
Аналогично, объявляем переменную num2 и присваиваем ей значение из поля с идентификатором 'num2', также преобразованное в число с плавающей точкой.
var num2 = parseFloat(document.getElementById('num2').value);
Объявим переменную result и присвоим ей сумму значений num1 и num2.
var result = num1 + num2;
Обновляем текстовое содержимое элемента на web-странице с идентификатором 'result', устанавливая его равным значению переменной result.
document.getElementById('result').innerText = result;
}
Таким образом, функция add() берет значения из двух полей ввода на web-странице, складывает их, а затем отображает результат на странице.
Аналогичным образом создадим функции для выполнения вычитания subtract() и умножения multiply().
Далее создаём функцию с именем divide, которая будет выполнять деление чисел и обновлять результат на web-странице.
function divide() {
Объявляем переменную num1 и присваиваем ей значение, которое пользователь введёт в поле с идентификатором 'num1', преобразованное в число с плавающей точкой.
var num1 = parseFloat(document.getElementById('num1').value);
Аналогично объявляем переменную num2 и присваиваем ей значение из поля с идентификатором 'num2', также преобразованное в число с плавающей точкой.
var num2 = parseFloat(document.getElementById('num2').value);
Проверяем, равно ли значение num2 нулю.
if(num2 === 0) {
Если num2 равно нулю, выводим сообщение об ошибке с помощью функции alert.
Завершаем выполнение функции.
return;
}
Объявляем переменную result и присваиваем ей результат деления чисел num1 на num2.
var result = num1 / num2;
Обновляем текстовое содержимое элемента на web-странице с идентификатором 'result', устанавливая его равным значению переменной result.
document.getElementById('result').innerText = result;
}
Таким образом, функция divide() берет значения из двух полей ввода на web-странице, проверяет, не является ли второе число нулём, а затем выполняет деление и отображает результат на странице. Если второе число равно нулю, функция выводит сообщение об ошибке и завершает свою работу без выполнения деления.
Приступим ко второму калькулятору.
Создаём функцию с именем appendToScreen, которая добавляет значение на экран.
function appendToScreen(value) {
Получаем элемент с идентификатором 'output' и добавляем к его содержимому переданное значение.
document.getElementById('output').textContent += value;
}
Создаем функцию с именем deleteLast, которая удаляет последний символ на экране.
function deleteLast() {
Получаем текущее содержимое элемента с идентификатором 'output'.
let output = document.getElementById('output').textContent;
Устанавливаем содержимое элемента 'output' равным строке без последнего символа.
document.getElementById('output').textContent = output.slice(0, -1);
}
Создаём функцию с именем clearScreen, которая очищает экран.
function clearScreen() {
Устанавливаем текстовое содержимое элемента 'output' равным пустой строке.
document.getElementById('output').textContent = '';
}
Создаём функцию с именем calculate, которая выполняет вычисления на экране.
function calculate() {
try {
Вычисляем результат арифметического выражения, содержащегося на экране.
const result = eval(document.getElementById('output').textContent);
Обновляем текстовое содержимое элемента 'output' результатом вычисления.
document.getElementById('output').textContent = result;
} catch (error) {
В случае ошибки выводим сообщение об ошибке на экране.
document.getElementById('output').textContent = 'Error';
}
}
В конце урока попробуйте ответить на следующие вопросы:
Какая конструкция предоставляет возможность обработки ошибок и выполнения некоторых действий даже при их возникновении?
Приведите общий синтаксис вызова функции.
Внимательно посмотрев урок, вам не составит труда ответить на вопросы.
42
