Введение в операторы и выражения

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

Арифметические операторы

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

Основные арифметические операторы:

• + — оператор сложения
• — — оператор вычитания
• * — оператор умножения
• / — оператор деления

Пример использования:

let x = 5;

let y = 3;

let z = x + y;

console.log(z); // Выведет 8

Логические операторы

Логические операторы управляют потоками выполнения программы на основе условий. Они позволяют проверять, удовлетворяются ли те или иные условия, и выполнять соответствующие действия.

Основные логические операторы:

• == — оператор равенства
• != — оператор неравенства
• && — оператор логической конъюнкции
• || — оператор логического ИЛИ

Пример использования:

if (x == 5) {

    console.log("x равно 5");

} else {

    console.log("x не равно 5");

}

Оператор логической конъюнкции, а именно &&, объединяет два логических выражения таким образом, что если оба выражения истинны, результат тоже будет истинным.

Пример использования:

if (x > 10 && y < 5) {

    console.log("Условие выполнено");

} else {

    console.log("Условие не выполнено");

}

let result = x > 10 && y < 5;

if (result) {

    console.log("Логическая конверсия прошла успешно");

} else {

    console.log("Логическая конверсия не удалась");

}

В этом примере `result` является результатом логической конъюнкции двух выражений `x > 10` и `y < 5`. Если оба выражения истинны, то `result` также станет истинным.

Оператор логического ИЛИ (||) 

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

Пример использования:

let x = 8;
let y = 20;

if (x < 10 || y > 15) {
    console.log("Условие не выполнено");
} else {
    console.log("Условие выполнено");
}

let result = x < 10 || y > 15;
if (result) {
    console.log("Логическое ИЛИ прошло успешно");
} else {
    console.log("Логическое ИЛИ не прошло успешно");
}

Описание. В этом примере условие проверяется на два выражения: x<10 и y>15. Если хотя бы одно из них лож, то результат будет ложным. Если оба выражения ложные, то результат тоже будет ложным.

Операторы сравнения

Они позволяют сравнивать значения переменных и выражений на предмет равенства, больше, меньше, равно и т.д.

Основные операторы сравнения:

• == — проверка на равенство
• != — проверка на неравенство
• === — оператор строго равенства
• >= — проверка на большее или равное значение
• <= — проверка на меньшее или равное значение

Пример использования:

x=7

if (x >= 10) {

    console.log("x больше или равно 10");

} else {

    console.log("x меньше или равно 10");

}

Отдельно остановимся на операторе «===»

В JavaScript оператор «===» (три знака «равно» подряд) называется строгим сравнением или операцией идентичности. Он проверяет не только равенство значений, но и их типы. Это делает его полезным инструментом для предотвращения неожиданных результатов сравнения, связанных с автоматическим приведением типов. Две величины будут равны только тогда, когда они имеют одинаковый тип и одинаковое значение. Например, сравнение 1 === "1" даст результат false, потому что 1 — это число, а "1" — это строка, несмотря на то, что их значения визуально одинаковы‍1‍.

Различие между == и ===

Рассмотрим подробнее разницу между этими двумя операторами на примере:

console.log(1 == "1");  // true

console.log(1 === "1"); // false

В первом сравнении 1 == «1» используется обычный оператор равенства ==, который преобразует строку «1» в число 1 перед сравнением, и результатом становится true. Во втором сравнении 1 === «1» используется оператор строгого равенства ===, который учитывает типы данных, и поскольку 1 (число) и «1» (строка) имеют разные типы, результат сравнения будет false.

Рассмотрим другой пример:

let value = "42";

if (value == 42) { // Автоматическое приведение типа
    console.log("Значение равно 42!");
} else {
    console.log("Значение не равно 42.");
}

if (value === 42) { // Строгое сравнение
    console.log("Значение строго равно 42!");
} else {
    console.log("Значение не строго равно 42.");
}

В этом примере первый блок кода выведет «Значение равно 42!», потому что JavaScript автоматически преобразует строку «42» в число 42 перед сравнением. Однако второй блок выведет «Значение не строго равно 42.», так как оператор === учитывает различие в типах данных.

Приведём ещё примеры.

Сравнение чисел и строк

console.log(1 === 1);     // true
console.log(1 === "1");   // false
console.log("1" === "1"); // true

Сравнение булевых значений

console.log(true === true);    // true
console.log(false === false);  // true
console.log(true === 1);       // false
console.log(false === 0);      // false

Сравнение объектов

let obj1 = { key: "value" };
let obj2 = { key: "value" };

console.log(obj1 === obj2); // false
console.log(obj1 === obj1); // true

Обратите внимание, что объекты сравниваются по ссылке, а не по содержимому. Поэтому даже если два объекта содержат одинаковые данные, они считаются разными объектами, если хранятся в разных местах памяти.

Условные операторы (if/else)

Условные операторы if и switch используются для выполнения блоков кода в зависимости от совершения определенного условия.

Оператор if

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

Синтаксис оператора if выглядит следующим образом:

if (условие) {

    // код, который выполняется, если условие истинно

}

Если условие внутри круглых скобок после ключевого слова if оценивается как true, то выполняется блок кода, заключенный в фигурные скобки. Если условие ложно (false), то этот блок пропускается.

Также часто используются дополнительные конструкции else и else if, позволяющие создавать более сложные ветвления:

if (условие1) {

    // код, который выполняется, если условие1 истинно

} else if (условие2) {

    // код, который выполняется, если условие1 ложно, а условие2 истинно

} else {

    // код, который выполняется, если ни одно из условий не истинно

}

Эти конструкции позволяют гибко управлять выполнением различных блоков кода в зависимости от нескольких условий. Оператор if широко применяется в программировании для реализации логики принятия решений и обработки различных сценариев поведения программы.

x=57
if (x > 100) {
    console.log("x больше 100");
} else {
    console.log("x меньше или равно 100");
}

Оператор switch

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

Синтаксис оператора switch выглядит следующим образом:

switch (выражение) {

    case значение1:

        // код, который выполняется, если выражение совпадает со значением1

        break;

    case значение2:

        // код, который выполняется, если выражение совпадает со значением2

        break;

    …

    default:

        // код, который выполняется, если ни одно из значений не совпало

        break;

}

Когда выражение вычислено, его значение сравнивается последовательно с каждым из указанных значений (case). Если совпадение найдено, выполняется соответствующий блок кода до первого встретившегося оператора break. Если ни одно из значений не соответствует выражению, выполняется блок кода, указанный в секции default (если такая секция присутствует).

Примером использования оператора switch может служить обработка дня недели:

let day = new Date().getDay();

switch (day) {
    case 0:
        console.log("Сегодня воскресенье.");
        break;
    case 1:
        console.log("Сегодня понедельник.");
        break;
    case 2:
        console.log("Сегодня вторник.");
        break;
    case 3:
        console.log("Сегодня среда.");
        break;
    case 4:
        console.log("Сегодня четверг.");
        break;
    case 5:
        console.log("Сегодня пятница.");
        break;
    case 6:
        console.log("Сегодня суббота.");
        break;
    default:
        console.log("Неизвестный день недели.");
        break;
}

Оператор switch полезен, когда нужно обработать множество возможных значений одной переменной, особенно если каждое значение требует уникального набора действий.

Давайте рассмотрим примеры программ, иллюстрирующие использование операторов и выражений, которые были описаны в статье. Эти примеры будут реальными задачами, решающимися с помощью программирования.

Ещё примеры

Постараемся сделать их разнообразными.

Пример с арифметическим оператором +

Задание: Найти сумму чисел от 1 до 10 включительно.

Решение:

let sum = 0;
for (let i = 1; i <= 10; i++) {
    sum += i;
}
console.log(sum); // Выведет 55

Описание: Программа суммирует числа от 1 до 10, используя цикл for. В результате получается сумма 55, которая выводится на экран.

Пример с логическим оператором &&

Задание: Проверить, есть ли студенты старше 18 лет, и если да, поздравить их.

Решение:

let students = [
    { name: "Иван", age: 19 },
    { name: "Анна", age: 17 },
    { name: "Сергей", age: 21 },
    { name: "Ольга", age: 23 }
];

students.forEach((student) => {
    if (student.age >= 18) {
        console.log(`Поздравление для студента старше 18 лет`);
    }
})

Описание: Программа проходит список студентов и проверяет, кто из них старше 18 лет. Если студент старше 18 лет, ему отправляется поздравление.

Пример на оператор сравнения >=

Задание: Определить, сколько раз пользователь кликал на кнопку, если его клики превышают 5.

Решение:

let clicks = 0;
let buttonClicked = document.getElementById('button');
buttonClicked.addEventListener('click', () => {
    clicks++;
    if (clicks > 5) {
       console.log("Пользователь кликнул на кнопку больше пяти раз.");
    }
})

Описание: Программа считает количество кликов пользователя на кнопку. Если пользователь нажимает кнопку больше пяти раз, выводится сообщение о том, что произошло нарушение ограничения.

Учтите, эта программа предназначена для выполнения в браузере, а не в консоли. Если запустить эту программу в обычной консоли, она вызовет ошибку, так как объект document недоступен вне контекста браузера. В браузере программа выполнит свою задачу, если в HTML-документе действительно существует элемент с ID button.

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

Шаг 1: Создаём HTML-файл

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример программы</title>
</head>
<body>
    <!-- Кнопка с идентификатором 'button' -->
    <button id="button">Нажми меня!</button>
    
    <!-- Подключение скрипта -->
    <script src="script.js"></script>
</body>
</html>

Здесь мы создали простую страницу с кнопкой, у которой установлен идентификатор id=»button». Также подключили внешний JavaScript-файл script.js, куда поместим ваш скрипт.

Шаг 2: Создаём JavaScript-файл

Создайте файл с именем script.js и вставьте туда ваш JavaScript-код:

// Объявляем переменную для подсчета кликов
let clicks = 0;

// Получаем ссылку на кнопку по ее идентификатору
let buttonClicked = document.getElementById('button');

// Добавляем слушатель событий на кнопку
buttonClicked.addEventListener('click', () => {
    // Увеличиваем счетчик кликов
    clicks++;

    // Проверяем условие
    if (clicks > 5) {
        console.log("Пользователь кликнул на кнопку больше пяти раз.");
    }
});

Шаг 3: Запускаем страницу в браузере

Откройте файл index.html в любом современном браузере. Вы увидите кнопку с надписью «Нажми меня!». Каждый раз, когда вы нажимаете на нее, счетчик кликов увеличивается. После пятого клика в консоле разработчика появится сообщение «Пользователь кликнул на кнопку больше пяти раз».

Как открыть консоль разработчика:

1. Откройте браузер (например, Google Chrome).
2. Нажмите клавишу F12 или правой кнопкой мыши щелкните на странице и выберите пункт «Просмотреть код» («Inspect»).
3. Перейдите на вкладку «Console», чтобы увидеть сообщения от вашего скрипта.

Теперь ваша программа полностью готова к работе в браузере!

Пример с оператором `switch`

Задание: в зависимости от значения переменной «x», вывести разное сообщение.

Решение:

let x = 500;
switch (x) {
    case 500:
        console.log("Сумма составляет 500 долларов.");
    case 700:
        console.log("Сумма превышает 500 долларов.")
    default:
        console.error("Недостаточно информации для точного расчета суммы.");
}

Описание: программа использует оператор `switch`, чтобы определить, какая сумма ближе к 500 долларов или больше, и вывести соответствующее сообщение.

Сначала копируем программку в консоль, затем сразу под введённым кодом вводим числа 500, 700 или другое. Понимаю, что пример несколько надуманный, но работу оператора иллюстрирует.

Для демонстрации работы операторов if и switch можно рассмотреть ещё четыре примера, которые решают различные задачи, но используют одинаковые принципы.

Проверка статуса подключения к Интернету с использованием оператора if

Задача: Определить, подключён ли пользователь к Интернету, и вывести сообщение о статусе подключения.

Решение:

let connectionStatus = navigator.online() ? "Подключение к Интернету установлено" : "Нет подключения к Интернету.";

if (connectionStatus === "Подключение к Интернету установлено") {
    console.log("Интернет подключен.");
} else {
    console.log("Интернет отключен.");
}

Описание: программа проверяет статус подключения к Интернету с помощью функции `navigator.online()`. Если подключение есть, выводится сообщение «Интернет подключен.», иначе — «Интернет отключен.»

Программа может быть выполнена в консоли браузера, поскольку она использует свойство navigator.onLine, доступное в среде браузера. Однако стоит отметить несколько моментов:

Свойство onLine: Это свойство возвращает логический результат, показывающий текущее состояние соединения устройства с сетью. Оно не всегда точно отражает реальное подключение к интернету, потому что может зависеть от настроек сети устройства.

Использование консоли: Чтобы проверить работу этого кода, откройте консоль разработчика в браузере (обычно через комбинацию клавиш F12 или Ctrl+Shift+I), вставьте код и нажмите Enter. Код выполнится сразу же, и вы увидите соответствующее сообщение в консоли.

Определение уровня сложности задания с использованием оператора `if`

Задача: Определить уровень сложности задания, основываясь на количестве вопросов в анкете.

Решение:

let questionsCount = 10;
if (questionsCount < 5) {
    console.log("Задание уровня сложности: Легкое.");
} else if (questionsCount >= 5 && questionsCount < 10) {
    console.log("Задание уровня сложности: Среднее.");
} else {
    console.log("Задание уровня сложности: Сложное.");
}

Описание: программа проверяет количество вопросов в анкете и классифицирует задание по уровню сложности. Если вопросов мало — это легкое задание, если много — сложное.

Проверка наличия активности пользователя с использованием оператора `if`

Задача: проверить наличие активности пользователя, и если он неактивен, отключить систему оповещения.

Решение:

let userActivity = true;
if (!userActivity) {
    console.log("Пользователь неактивен. Система оповещения отключена.");
    document.getElementById('notificationSystem').removeAttribute("active"); // отключение системы оповещения
} else {
    console.log("Пользователь активен. Система оповещения включена.");
    document.getElementById('notificationSystem').setAttribute("active", true); // включение системы оповещения
}

Описание: программа проверяет активность пользователя и, если он неактивен, отключает систему оповещения. Если пользователь активен, система остается включённой.

Управление несколькими состояниями с использованием оператора `switch`

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

Решение:

let windowState = "закрыт";
switch(windowState) {
    case "закрыт":
        window.open(); // открытие окна
    case "открыто":
        window.close(); // закрытие окна
    default:
       console.log("Окно находится в неизвестном состоянии.");
}

Описание: программа управляет окном браузера: если окно закрыто, оно открывается, а если открыто — закрывается. Используется оператор `switch` для переключения между этими состояниями.

Заключение

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