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

Введение в JavaScript: синтаксис, переменные и типы данных

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

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

Что такое JavaScript и где он живет?

Изначально JavaScript был создан для работы в браузере. Его задача заключалась в том, чтобы делать сайты интерактивными: показывать всплывающие окна, проверять правильность заполнения форм или менять картинки при наведении мыши. Сегодня JS вышел далеко за пределы браузера — на нем пишут серверы (Node.js), мобильные приложения и даже программы для роботов. Но мы начнем с классики — работы в браузере.

Браузер (Chrome, Firefox, Safari) имеет встроенный движок JavaScript — специальную программу, которая читает ваш код и выполняет его. Вам не нужно устанавливать ничего дополнительного, чтобы начать писать на JS. Достаточно открыть консоль разработчика в браузере.

!Схема взаимодействия HTML, CSS и JavaScript, где JS отвечает за логику.

Синтаксис: правила написания кода

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

Инструкции

Программа на JavaScript — это список инструкций (statements). Каждая инструкция — это команда компьютеру сделать что-то одно. Принято отделять инструкции друг от друга точкой с запятой ;.

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

Комментарии

Иногда нам нужно оставить заметку в коде для себя или других программистов. Эти заметки называются комментариями. Движок игнорирует их при выполнении программы.

* Однострочный комментарий начинается с двух косых черт //. Многострочный комментарий начинается с / и заканчивается */.

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

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

!Визуальная метафора переменной как коробки с именем (идентификатором) и содержимым (значением).

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

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

#### 1. let

Используется, когда мы знаем, что содержимое «коробки» может измениться в будущем.

#### 2. const

Используется для объявления констант — переменных, которые нельзя менять. Если вы попытаетесь записать новое значение в переменную, объявленную через const, программа выдаст ошибку.

> Совет: Профессиональные разработчики используют const по умолчанию. Используйте let только тогда, когда вы точно знаете, что значение переменной будет меняться (например, счетчик очков в игре).

#### А как же var?

В старых учебниках и коде вы можете встретить объявление через var.

var — это устаревший способ. Он работает почти как let, но имеет ряд особенностей, которые могут привести к ошибкам (например, переменные var видны за пределами блоков кода, где они были созданы). В современном коде мы стараемся избегать var.

Именование переменных

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

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

javascript typeof undefined // "undefined" typeof 0 // "number" typeof true // "boolean" typeof "foo" // "string" ``

Интересный факт (и известная ошибка языка): typeof null вернет "object". Это официально признанная ошибка в самом языке JavaScript, которая тянется с момента его создания, но её не исправляют ради совместимости со старым кодом. Просто запомните: null` — это не объект, это отдельный тип данных.

Заключение

Мы сделали первый шаг в изучении JavaScript. Теперь вы знаете, что код состоит из инструкций, данные хранятся в переменных-коробках, а сами данные бывают разных типов: числа, строки, логические значения и специальные типы пустоты.

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

Попробуйте выполнить домашнее задание, чтобы закрепить материал!

Управляющие конструкции и функции: создание логики приложения

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

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

Условные операторы: искусство выбора

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

Оператор if

Самая простая конструкция — это if (если). Она проверяет истинность условия. Если условие верно (true), то выполняется блок кода внутри фигурных скобок.

!Схема работы условного оператора if

Блок else

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

Цепочка else if

Иногда вариантов больше, чем два. Например, светофор. В этом случае мы можем выстраивать цепочки условий.

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

Чтобы условия работали, нам нужно уметь сравнивать значения. В JavaScript есть несколько важных операторов сравнения.

Строгое и нестрогое равенство

Это один из самых частых вопросов на собеседованиях и источник ошибок новичков.

* == (нестрогое равенство): сравнивает значения, приводя их к одному типу. * 5 == '5' вернет true. * === (строгое равенство): сравнивает и значения, и типы данных. * 5 === '5' вернет false, потому что число не равно строке.

> Золотое правило: Всегда используйте строгое равенство === и строгое неравенство !==, чтобы избежать неожиданных преобразований типов.

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

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

Где — итоговое решение (логический результат), — первое условие, — второе условие, а символ обозначает логическое «И» (конъюнкцию).

В JavaScript используются следующие обозначения:

Циклы: автоматизация повторений

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

Цикл while

Самый простой цикл. Он выполняется, пока условие истинно.

Важно: Если вы забудете увеличить счетчик (count++), условие count <= 5 всегда будет истинным, и программа зависнет в «бесконечном цикле». Это может «повесить» ваш браузер.

Цикл for

Это самый популярный цикл в JavaScript. Он собирает все настройки управления циклом в одну строку.

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

!Жизненный цикл итерации for

Пример:

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

Функции: строительные блоки программы

Пока что мы писали код, который выполняется линейно сверху вниз. Но что, если нам нужно использовать одну и ту же логику (например, показывать приветственное сообщение) в десяти разных местах программы? Копировать код — плохая идея. Если вы захотите изменить текст приветствия, придется править его в десяти местах.

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

Объявление функции (Function Declaration)

Мы создали функцию, но код внутри неё еще не выполнился. Чтобы он сработал, функцию нужно вызвать:

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

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

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

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

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

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

Важно: После выполнения команды return функция немедленно прекращает работу. Любой код, написанный после return внутри функции, выполнен не будет.

Стрелочные функции (Arrow Functions)

В современном JavaScript (начиная с 2015 года) появился более краткий синтаксис записи функций.

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

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

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

Представьте дом с тонированными окнами. Тот, кто внутри дома (локальная область), видит, что происходит на улице (глобальная область). Но тот, кто на улице, не видит, что происходит внутри дома.

Заключение

Сегодня мы сделали огромный шаг вперед. Мы научили наши программы думать (с помощью if/else), повторять действия (с помощью циклов for/while) и структурировать код (с помощью функций).

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

Объекты и массивы: методы работы со сложными структурами данных

В предыдущих статьях мы научились хранить простые данные: числа, строки и логические значения. Мы также освоили управление потоком программы с помощью условий и циклов. Но реальный мир устроен сложнее. Представьте, что вам нужно описать пользователя интернет-магазина. У него есть имя, возраст, адрес доставки, список прошлых заказов и текущая корзина. Создавать для этого десяток отдельных переменных (userName, userAge, userAddress...) неудобно и неэффективно.

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

Объекты: группировка по смыслу

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

!Визуальная метафора объекта как контейнера с именованными свойствами.

Создание объекта

Самый простой способ создать объект — использовать фигурные скобки {...}. Это называется «литерал объекта».

Здесь name, age и isAdmin — это ключи (или свойства), а "Алексей", 30 и true — их значения.

Доступ к свойствам

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

Существует и второй способ доступа — через квадратные скобки. Он полезен, если имя свойства хранится в переменной или содержит пробелы (что не рекомендуется, но возможно).

Изменение и добавление свойств

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

> Важно: Даже если объект объявлен через const, мы можем менять его свойства. const запрещает только присваивать переменной новый объект, но не запрещает менять содержимое текущего.

Массивы: упорядоченные списки

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

Массив — это как поезд, где каждый вагон имеет свой порядковый номер.

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

Создание массива

Массивы создаются с помощью квадратных скобок [...].

Индексы и длина

Главная особенность массивов — нумерация элементов начинается с нуля.

* Нулевой элемент: fruits[0] («Яблоко») * Первый элемент: fruits[1] («Банан»)

Чтобы узнать количество элементов в массиве, используется свойство length.

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

Где — индекс последнего элемента, а — общая длина массива (количество элементов). Например, если длина массива 3, то последний индекс .

Методы работы с массивами

Массив — это не просто список, это структура данных, у которой есть встроенные инструменты (методы) для работы с содержимым. Рассмотрим самые популярные.

Добавление и удаление элементов

Представьте, что массив — это стопка тарелок или очередь.

> Совет: Методы push и pop работают очень быстро. Методы shift и unshift работают медленнее, так как компьютеру приходится перенумеровывать все остальные элементы массива (сдвигать их индексы).

Перебор элементов

Часто нам нужно пройтись по всему массиву и сделать что-то с каждым элементом (например, вывести на экран). Для этого идеально подходит цикл for..of, который мы рассматривали в теме циклов, но теперь применим его к массивам.

``javascript let colors = ["Красный", "Зеленый", "Синий"];

for (let color of colors) { console.log(Цвет: N-1$.

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

Взаимодействие с DOM и обработка событий пользователя

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

Пришло время это изменить. В этой статье мы соединим «мозги» (JavaScript) с «телом» (HTML-страницей). Мы научимся находить элементы на странице, менять их содержимое, стили и, самое главное, реагировать на действия пользователя — клики, ввод текста и движения мыши.

Что такое DOM?

Когда вы открываете веб-страницу, браузер получает HTML-код и превращает его в структуру, понятную для программы. Эта структура называется DOM (Document Object Model) — Объектная Модель Документа.

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

!Схематичное представление DOM-дерева, где каждый HTML-тег является узлом.

Самый главный объект, точка входа в это дерево — это document. Именно через него мы получаем доступ ко всему, что есть на странице.

Поиск элементов на странице

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

querySelector

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

Метод querySelector возвращает только первый найденный элемент. Если элементов с таким селектором нет, он вернет null.

querySelectorAll

Если нам нужно найти все элементы (например, все пункты списка), мы используем querySelectorAll.

Этот метод возвращает коллекцию элементов (похожую на массив). Вы можете перебрать её с помощью цикла for..of, который мы изучили ранее.

getElementById

Старый, но очень быстрый метод. Он ищет элемент строго по его атрибуту id.

> Совет: В современной разработке чаще всего используют querySelector и querySelectorAll из-за их гибкости. Вы можете искать сложные вложенности, например: document.querySelector('.menu .item.active').

Изменение содержимого

Допустим, мы нашли заголовок. Как поменять в нем текст?

textContent

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

innerHTML

Свойство innerHTML мощнее. Оно позволяет менять HTML-содержимое внутри элемента. С его помощью можно добавить жирный текст, ссылки или даже вложить другие теги.

Будьте осторожны с innerHTML. Если вы вставляете туда текст, который ввел пользователь, злоумышленник может внедрить вредоносный скрипт. Это называется XSS-атакой. Для простого текста всегда безопаснее использовать textContent.

Работа со стилями и классами

JavaScript может работать стилистом. У нас есть два пути: менять стили напрямую или переключать CSS-классы.

Прямое изменение стилей (style)

У каждого DOM-элемента есть свойство style. Свойства пишутся в формате camelCase (верблюжий стиль), а не через дефис, как в CSS.

* CSS: background-color * JS: backgroundColor

Управление классами (classList)

Менять стили по одному неудобно и засоряет код. Профессиональный подход — заранее описать классы в CSS (например, .hidden, .active), а через JS просто добавлять или убирать их.

Для этого используется свойство classList и его методы:

* add('class-name') — добавить класс. * remove('class-name') — удалить класс. * toggle('class-name') — переключить (если есть — убрать, если нет — добавить). * contains('class-name') — проверить, есть ли класс (возвращает true или false).

События: оживляем интерфейс

Событие (Event) — это сигнал от браузера, что что-то произошло. Клик мышкой, нажатие клавиши, прокрутка страницы, загрузка картинки — всё это события.

Чтобы программа отреагировала на событие, нам нужно «повесить слушатель» (event listener). Это специальная функция, которая ждет определенного сигнала.

addEventListener

Основной метод для работы с событиями — addEventListener. Он принимает два главных аргумента:

Синтаксис: element.addEventListener(событие, функция);

Пример с кнопкой:

Мы также можем использовать стрелочные функции для краткости:

Объект события (event object)

Часто нам нужно знать детали события: в какой точке экрана был клик? Какая именно клавиша нажата? Что именно ввел пользователь?

Браузер автоматически передает объект с этой информацией первым аргументом в нашу функцию-обработчик. Обычно этот аргумент называют event или просто e.

Всплытие событий

Важная концепция DOM. Представьте, что у вас есть кнопка внутри блока div. Если вы кликнете на кнопку, событие сначала сработает на кнопке, потом на блоке div, потом на body и так далее вверх по дереву. Это называется всплытием (bubbling).

Иногда это полезно, но иногда мешает. Чтобы остановить всплытие, используется метод event.stopPropagation().

Практический пример: Интерактивный список задач

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

Предположим, у нас есть такой HTML:

Напишем JavaScript:

В этом примере мы использовали: * querySelectorAll для поиска списка. * Цикл for..of для перебора элементов. * addEventListener для реакции на клик. * classList.toggle для изменения состояния элемента. * style.display для скрытия элементов.

Заключение

DOM — это интерфейс, который превращает статичный HTML в живое приложение. Теперь вы умеете:

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

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

Асинхронный JavaScript и современные возможности стандарта ES6+

Мы уже научились управлять элементами на странице, реагировать на клики и хранить данные в объектах. Казалось бы, мы можем всё. Но есть одна проблема, с которой сталкивается любой начинающий разработчик: почему код иногда выполняется не в том порядке, в котором мы его написали? Или почему страница «зависает», когда мы пытаемся загрузить большую картинку?

Сегодня мы погрузимся в одну из самых сложных, но интересных тем — асинхронность. А заодно разберем современные инструменты стандарта ES6+, которые делают код чище и приятнее.

Синхронный vs Асинхронный код

По умолчанию JavaScript — синхронный и однопоточный язык. Это значит, что он выполняет команды строго по очереди, одну за другой. Представьте, что вы стоите в очереди в кассу магазина. Кассир (движок JavaScript) не может начать обслуживать следующего покупателя, пока не закончит с текущим.

Это работает отлично для простых операций. Но что, если вторая команда — это «Скачать огромный файл из интернета», которая занимает 10 секунд? В синхронном мире весь ваш сайт просто замерзнет на 10 секунд. Пользователь не сможет ни на что нажать, анимации остановятся. Это называется блокировкой потока.

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

!Сравнение блокирующего (синхронного) и неблокирующего (асинхронного) выполнения кода.

Таймеры: откладываем выполнение

Самый простой пример асинхронности — это таймеры. Они позволяют сказать браузеру: «Выполни эту функцию не сейчас, а через определенное время».

setTimeout

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

В каком порядке появятся сообщения в консоли?

Обратите внимание: JavaScript не стал ждать 2 секунды на строке с таймером. Он «зарегистрировал» таймер и мгновенно пошел дальше, к строке Конец.

setInterval

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

Промисы (Promises): обещание результата

Раньше для работы с асинхронными операциями использовали функции обратного вызова (callbacks). Но когда асинхронных действий становилось много (скачать данные -> обработать их -> сохранить в базу), код превращался в нечитаемую «лестницу», которую программисты назвали Callback Hell (Ад колбэков).

В стандарте ES6 (2015 год) появилось элегантное решение — Promise (Промис, Обещание).

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

Этот пейджер — и есть Промис. У него может быть три состояния:

!Жизненный цикл Промиса: от ожидания к успеху или ошибке.

Использование промисов

В современном JavaScript большинство операций с сетью возвращают промисы. Для обработки результата мы используем методы .then() (если всё хорошо) и .catch() (если произошла ошибка).

Async / Await: синтаксический сахар

Промисы — это круто, но цепочки .then().then() тоже могут выглядеть громоздко. В 2017 году в язык добавили ключевые слова async и await. Это «обертка» над промисами, которая позволяет писать асинхронный код так, будто он синхронный.

* async ставится перед объявлением функции. Это говорит браузеру: «Внутри этой функции будет асинхронный код». * await ставится перед промисом. Это говорит: «Подожди, пока этот промис выполнится, и только потом иди дальше».

Это тот же самый код, что и выше, но читать его гораздо проще. Конструкция try...catch используется здесь для обработки ошибок, заменяя .catch().

Современные возможности ES6+

Раз уж мы заговорили о стандартах, давайте рассмотрим еще пару фишек, которые появились вместе с промисами и стали стандартом де-факто в современной разработке.

Деструктуризация (Destructuring)

Это способ быстро извлечь значения из массивов или свойств из объектов в отдельные переменные.

Для объектов:

Обратите внимание: имена переменных должны совпадать с ключами объекта.

Для массивов:

Оператор Spread (Расширение) и Rest

Выглядит как три точки .... Он позволяет «распаковать» массив или объект.

Копирование массива:

В функциях (Rest):

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

Практическое применение: Fetch API

Давайте соединим всё вместе. В браузере есть встроенная функция fetch(), которая делает запросы к серверам. Она возвращает Промис.

Допустим, мы хотим получить данные о пользователе с сервера:

Этот небольшой фрагмент кода демонстрирует мощь современного JavaScript: асинхронность, обработку ошибок, шаблонные строки и деструктуризацию.

Заключение

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

Мы изучили:

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