Основы программирования на JavaScript

Введение в JavaScript: переменные, типы данных и базовые операторы

Добро пожаловать в курс «Основы программирования на JavaScript»! Если вы читаете эту статью, значит, вы решили освоить один из самых популярных и востребованных языков программирования в мире. JavaScript (или просто JS) — это язык, который «оживляет» веб-страницы. Если HTML отвечает за структуру сайта, а CSS — за его внешний вид, то JavaScript заставляет всё это работать, реагировать на действия пользователя и изменяться без перезагрузки страницы.

!Аналогия роли HTML, CSS и JavaScript в создании веб-сайтов

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

Переменные: коробки для данных

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

Объявление переменных

В современном JavaScript существует два основных способа создать (объявить) переменную: используя ключевые слова let и const.

let — используется для создания переменной, значение которой может измениться в будущем. Например, счет в игре или возраст пользователя.

const — используется для создания «константы», то есть переменной, значение которой задается один раз и никогда не меняется. Например, дата рождения или число Пи.

Раньше использовалось слово var, но в современном коде его стараются избегать из-за некоторых особенностей поведения, которые могут привести к ошибкам. Мы будем использовать let и const.

Пример кода:

!Визуализация концепции переменных как контейнеров для хранения данных

Правила именования

Имя переменной (идентификатор) должно быть понятным. Называть переменные a, b или x — плохая практика, если только вы не решаете абстрактную математическую задачу. Имя должно отвечать на вопрос: «Что лежит внутри?».

Существуют жесткие правила и рекомендации:

* Имя может содержать буквы, цифры, символы {name}!; // Результат: Привет, Алексей! javascript let isLightOn = true; let isDayTime = false; javascript typeof undefined // "undefined" typeof 0 // "number" typeof true // "boolean" typeof "foo" // "string" javascript let firstName = "Иван"; let lastName = "Иванов"; let fullName = firstName + " " + lastName; // "Иван Иванов" javascript let result = "5" + 2; // Получится строка "52", а не число 7! ``

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

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

Самый частый оператор — это знак равенства =. Он не означает «равно» в математическом смысле (для сравнения используются другие знаки). Он означает «присвоить значение».

Выражение x = 5` читается как: «Взять значение 5 и положить его в переменную x».

Заключение

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

Управление потоком выполнения: условные конструкции, циклы и функции

В предыдущей статье мы научились создавать «коробки» для данных (переменные) и класть в них информацию (типы данных). Но пока наши программы похожи на простой список покупок: они выполняются строго сверху вниз, строчка за строчкой.

В реальной жизни мы постоянно принимаем решения: «Если пойдет дождь, я возьму зонт, иначе пойду в футболке». Или повторяем действия: «Пока не помою всю посуду, я не уйду с кухни».

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

Условные конструкции: принятие решений

Условные операторы позволяют программе выбирать разные пути выполнения в зависимости от обстоятельств. Самый главный инструмент здесь — конструкция if (если).

Конструкция if-else

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

Как это работает:

Ключевое слово if проверяет условие в круглых скобках (age >= 18).

Если условие истинно (true), выполняется код внутри первых фигурных скобок {...}.

Если условие ложно (false), выполняется код после слова else (иначе).

!Визуализация логического ветвления программы с помощью блок-схемы

Множественный выбор: else if

Иногда вариантов больше, чем два. Например, светофор.

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

Чтобы задавать условия, нам нужны операторы сравнения. Большинство из них вам знакомы из математики:

* > (больше), < (меньше) * >= (больше или равно), <= (меньше или равно) * === (строгое равенство). Обратите внимание: три знака равно. Это означает «равно ли значение И тип данных?». * !== (строгое неравенство).

> Важно: В JavaScript есть оператор == (два равно), но он может вести себя непредсказуемо, так как пытается приводить типы. Профессионалы используют ===.

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

Часто нужно проверить сразу несколько условий. Для этого используются логические операторы:

И (&&): Истинно, только если оба условия верны.

if (age > 18 && hasTicket) — пустить, если есть 18 И есть билет.

ИЛИ (||): Истинно, если хотя бы одно условие верно.

if (isWeekend || isHoliday) — отдыхаем, если выходной ИЛИ праздник.

НЕ (!): Инвертирует значение.

if (!isLightOn) — если свет НЕ включен.

Циклы: повторение действий

Представьте, что вам нужно вывести в консоль числа от 1 до 100. Писать 100 строк кода console.log(1), console.log(2)... — это долго и неэффективно. Для этого существуют циклы.

Цикл while

Это самый простой цикл. Он переводится как «пока». Код внутри него выполняется, пока условие истинно.

Цикл for

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

Синтаксис: for (начало; условие; шаг) { ... }

Разберем по частям:

let i = 0 — Начало. Создаем переменную-счетчик i (от слова index).

i < 5 — Условие. Цикл работает, пока i меньше 5.

i++ — Шаг. Это сокращенная запись i = i + 1. Выполняется после каждого круга.

!Циклический процесс выполнения кода в конструкции for

Пример с математикой

Допустим, мы хотим посчитать сумму всех чисел от 1 до . В математике для арифметической прогрессии есть формула:

Где — сумма первых чисел, — последнее число последовательности, — первое число, а — делитель для нахождения среднего.

Но в программировании мы можем решить эту задачу простым перебором в цикле:

Функции: переиспользование кода

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

Объявление функции

Чтобы создать функцию, используем ключевое слово function.

Этот код сам по себе ничего не сделает. Мы только научили программу этому действию. Чтобы действие произошло, функцию нужно вызвать:

Параметры и аргументы

Функции становятся по-настоящему мощными, когда мы передаем им данные. Переменные в скобках при объявлении функции называются параметрами.

Здесь name — это параметр (коробка, которая ждет значение), а "Анна" — это аргумент (конкретное значение, которое мы положили в коробку).

Возврат значения (return)

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

Важное правило: Оператор return мгновенно останавливает выполнение функции. Всё, что написано после него, выполнено не будет.

!Концептуальная схема работы функции: вход, обработка, выход

Область видимости

Переменные, созданные внутри функции (или внутри цикла), не видны снаружи. Это называется локальной областью видимости.

Это сделано для безопасности и удобства: вы можете называть переменные внутри функций одинаковыми именами (например, count или result), и они не будут мешать друг другу.

Заключение

Поздравляю! Теперь вы владеете инструментами, которые превращают простой набор команд в настоящий алгоритм. Вы умеете:

Заставлять программу принимать решения с помощью if и else.

Повторять действия с помощью циклов for и while.

Упаковывать логику в функции для повторного использования.

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