JavaScript с нуля: Основы веб-программирования

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

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

Что такое JavaScript и зачем он нужен?

Представьте, что веб-сайт — это человек. В таком случае:

* HTML — это скелет. Он определяет структуру: где находится голова (заголовок), где руки (меню), где ноги (подвал сайта). * CSS — это кожа и одежда. Он отвечает за внешний вид: цвет глаз, фасон рубашки, стиль прически. * JavaScript (JS) — это мышцы и нервная система. Он заставляет человека двигаться, реагировать на прикосновения, говорить и взаимодействовать с миром.

!Аналогия строения веб-страницы: HTML как структура, CSS как стиль, JavaScript как функциональность.

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

Где писать код?

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

Откройте браузер Google Chrome.

Нажмите клавишу F12 (или кликните правой кнопкой мыши по странице и выберите «Просмотреть код» / «Inspect»).

Перейдите на вкладку Console.

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

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

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

Представьте переменную как коробку, на которую вы наклеили этикетку с названием. Вы можете положить в эту коробку что угодно, а потом найти это по названию этикетки.

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

1. let

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

2. const

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

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

А как же var?

В старых учебниках вы можете встретить объявление через var. Это устаревший способ. Он работает похоже на let, но имеет ряд особенностей, которые могут привести к ошибкам. В современном коде мы используем только let и const.

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

Имя переменной должно быть понятным. Не называйте переменные a, b, x (если это не математика). Называйте их userName, productPrice, isLoggedIn.

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

* Правильно: mySuperVariable * Неправильно: my-super-variable, MySuperVariable

Типы данных

В наши «коробки» можно класть разные вещи. В JavaScript существует 8 основных типов данных. Сегодня мы разберем самые важные из них, с которыми вы будете работать 90% времени.

1. Число (Number)

Используется для любых чисел: целых и дробных.

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

* Infinity (бесконечность). Например, если разделить на ноль. NaN (Not a Number — не число). Это результат вычислительной ошибки. Например, если попытаться умножить слово на число: 'Привет' 5 вернет NaN.

2. Строка (String)

Это текст. Строка всегда должна быть заключена в кавычки. В JavaScript есть три вида кавычек:

Одинарные: 'Привет'

Двойные: "Привет"

Обратные: ` Привет

Одинарные и двойные кавычки работают одинаково. А вот обратные кавычки (находятся на клавише с буквой Ё в английской раскладке) обладают суперсилой: они позволяют встраивать переменные прямо в текст.

3. Булевый тип (Boolean)

Самый простой тип. Имеет всего два значения: * true (истина, да, включено) * false (ложь, нет, выключено)

4. Null и Undefined

Эти два типа часто путают, так как оба означают «пустоту», но с разным смыслом.

* Undefined — «значение не задано». Если вы объявили переменную let a;, но ничего в неё не положили, её значение будет undefined. * Null — «значение отсутствует». Это специальное значение, которое программист присваивает переменной, чтобы сказать: «здесь ничего нет» или «значение неизвестно».

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

Оператор typeof

Если вы не знаете, какой тип данных лежит в переменной, можно использовать оператор typeof.

Базовые операторы

Мы научились создавать данные, теперь давайте научимся ими манипулировать.

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

Здесь всё как в школе:

* Сложение: + * Вычитание: - Умножение: * Деление: /

Но есть и специфические для программирования операторы:

#### Остаток от деления (%)

Не путайте с процентами! Этот оператор возвращает то, что осталось после целочисленного деления.

Это часто используется, чтобы проверить, является ли число четным (остаток от деления на 2 равен 0) или нечетным.

#### Возведение в степень (**)

Сложение строк (Конкатенация)

Знак плюса + работает не только с числами, но и со строками. Он «склеивает» их.

Важный момент: Если вы сложите строку и число, JavaScript превратит число в строку и склеит их.

Это называется приведением типов. Будьте внимательны: это частая причина ошибок у новичков.

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

Знак = в программировании — это не «равно», а «присвоить». Мы берем то, что справа, и кладем в коробку слева.

Существуют сокращенные записи:

* x += 2 то же самое, что x = x + 2 * x -= 1 то же самое, что x = x - 1

Заключение

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

В следующей статье мы разберем, как заставить программу принимать решения с помощью условных операторов if и else`.

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

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

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

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

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

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

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

Синтаксис очень похож на обычный английский язык:

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

!Схема работы условного оператора if: код выполняется только при соблюдении условия.

Блок else (иначе)

Часто нам нужно сделать что-то одно, если условие верно, и что-то другое, если нет. Для этого существует else.

Блок else if (иначе если)

А что, если вариантов больше двух? Например, светофор.

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

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

Чтобы создавать условия, нам нужно уметь сравнивать значения. Вот основные инструменты:

* > (больше), < (меньше) * >= (больше или равно), <= (меньше или равно) * === (строгое равенство) * !== (строгое неравенство)

Важное правило: Всегда используйте тройное равно === вместо двойного ==.

Почему? Двойное равно == пытается приводить типы, что может вызвать ошибки. Например, '5' == 5 вернет true (строка равна числу), что часто нелогично. Тройное равно === проверяет и значение, и тип данных. '5' === 5 вернет false, так как строка не является числом.

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

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

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

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

НЕ (!): Инвертирует значение (меняет true на false и наоборот).

Циклы: Сила повторения

Представьте, что вам нужно вывести в консоль числа от 1 до 100. Писать 100 строк console.log — это долго и глупо. Программисты ленивы, поэтому они придумали циклы.

Цикл while (Пока)

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

Осторожно: Если вы забудете строку counter++, условие counter <= 5 всегда будет истинным, и ваш браузер зависнет в бесконечном цикле.

Цикл for (Для)

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

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

Разберем, что происходит в круглых скобках:

Начало (let i = 0): Создается переменная-счетчик i (от слова index). Это происходит один раз перед стартом.

Условие (i < 5): Перед каждой итерацией (повторением) проверяется это условие. Если верно — тело цикла выполняется.

Шаг (i++): Выполняется после каждого прохода тела цикла. Обычно здесь увеличивают счетчик.

!Жизненный цикл итерации for: инициализация, проверка, действие, шаг.

Функции: Строительные блоки

Мы подошли к одной из самых мощных концепций. Пока что мы писали код, который выполняется сразу. Но что, если мы хотим сохранить кусок кода и использовать его позже, причем много раз и в разных местах?

Функция — это именованный блок кода, который можно вызвать по имени.

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

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

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

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

!Функция принимает входные данные (аргументы), обрабатывает их и выдает результат.

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

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

Для этого используется ключевое слово return.

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

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

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

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

Заключение

Поздравляю! Теперь вы владеете тремя китами программирования:

Условия (if/else) позволяют программе думать.

Циклы (for, while) позволяют программе работать быстро и многократно.

Функции позволяют структурировать код и использовать его повторно.

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

Структуры данных: работа с объектами, массивами и методами перебора

В предыдущих статьях мы научились хранить данные в переменных и управлять потоком программы с помощью условий и циклов. Но что, если нам нужно сохранить не одно имя пользователя, а список из тысячи имен? Или описать сложный товар в интернет-магазине, у которого есть цена, название, цвет и размер?

Создавать тысячи переменных name1, name2, name3 — это путь в никуда. Здесь нам на помощь приходят структуры данных. Сегодня мы разберем два главных кита JavaScript: Массивы и Объекты.

Массивы (Arrays): Упорядоченные списки

Представьте себе поезд. У него есть локомотив и вагоны. Каждый вагон имеет свой порядковый номер. Вы точно знаете, что за первым вагоном идет второй, а за вторым — третий.

!Аналогия массива как поезда с пронумерованными вагонами, где нумерация начинается с нуля

В JavaScript массив — это упорядоченная коллекция данных. Он создается с помощью квадратных скобок [].

Индексация: Счет начинается с нуля

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

Чтобы достать элемент из массива, мы указываем его индекс в квадратных скобках:

Если вы попробуете обратиться к индексу, которого нет (например, shoppingList[99]), JavaScript не выдаст ошибку, а вернет undefined.

Длина массива

У каждого массива есть свойство length, которое сообщает количество элементов внутри.

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

Массив — это не просто хранилище, это «умная» структура с встроенными инструментами (методами).

push() — добавляет элемент в конец массива.

pop() — удаляет последний элемент и возвращает его.

Объекты (Objects): Описание сущностей

Если массив — это просто список, то объект — это способ описать что-то сложное, имеющее характеристики. Представьте себе анкету или картотеку.

!Объект как хранилище данных по ключам, где каждому ключу соответствует значение

Объект создается с помощью фигурных скобок {} и состоит из пар «Ключ: Значение».

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

Есть два способа добраться до данных внутри объекта:

Через точку (Dot notation) — самый частый способ.

Через квадратные скобки (Bracket notation) — используется, если имя ключа сложное или хранится в переменной.

Изменение объектов

Объекты можно менять «на лету»:

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

Массив объектов: Реальная практика

В реальной веб-разработке мы постоянно комбинируем эти структуры. Например, список товаров в магазине — это массив, где каждый элемент — это объект товара.

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

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

1. forEach — «Для каждого»

Этот метод просто выполняет функцию для каждого элемента массива. Он ничего не возвращает.

2. map — «Трансформация»

Это один из самых полезных методов. Он берет массив, что-то делает с каждым элементом и возвращает новый массив такой же длины с измененными данными.

Представьте заводской конвейер: на входе сырой металл, на выходе — детали.

3. filter — «Фильтрация»

Этот метод создает новый массив, в который попадают только те элементы, которые прошли проверку (условие вернуло true). Похоже на фейс-контроль в клубе.

Стрелочные функции

В примерах выше мы писали function(item) { ... }. В современном JS это часто сокращают с помощью стрелочных функций (=>). Это делает код очень компактным.

Сравните:

Если функция занимает одну строку, можно убрать слово return и фигурные скобки. Результат вернется автоматически.

Заключение

Сегодня мы разобрали фундамент работы с данными:

* Массивы ([]) нужны для списков. * Объекты ({}) нужны для описания сущностей с именованными свойствами. * Методы map и filter позволяют элегантно обрабатывать данные, не создавая громоздкие циклы for.

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

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

До этого момента мы работали с JavaScript как с «вещью в себе». Мы создавали переменные, писали функции и перебирали массивы, но результат видели только в безликой консоли разработчика. Пользователь вашего сайта никогда не открывает консоль. Он видит кнопки, картинки, тексты и формы.

Настало время сломать эту стену. Сегодня мы научимся соединять логику JavaScript с визуальной частью HTML. Мы превратим статический документ в живое приложение.

Что такое DOM?

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

Представьте DOM как генеалогическое древо вашего сайта. Самый главный предок — это объект document. У него есть дети (<html>), внуки (<body>, <head>) и правнуки (заголовки, параграфы, кнопки).

!Структура DOM-дерева: иерархическая связь всех элементов на веб-странице.

Для JavaScript каждый тег на странице — это объект. А раз это объект (как те, что мы изучали в прошлой статье), значит, у него есть свойства, которые мы можем читать и менять, и методы, которые мы можем вызывать.

Поиск элементов: как схватить тег за хвост

Прежде чем чем-то управлять, это нужно найти. В JavaScript есть несколько способов найти нужный элемент в DOM-дереве. Самый современный и универсальный метод — querySelector.

Метод querySelector

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

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

Как нам получить доступ к этим элементам в JS?

Метод querySelectorAll

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

> Важно: querySelectorAll возвращает не массив, а коллекцию (NodeList). Она похожа на массив (у нее есть length и метод forEach), но у нее нет методов map или filter. Если они вам нужны, коллекцию придется превратить в настоящий массив.

Манипуляции с элементами

Теперь, когда мы нашли элемент и положили его в переменную, мы можем делать с ним всё что угодно.

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

Самый простой способ изменить текст внутри тега — свойство textContent.

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

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

2. Изменение стилей

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

* CSS: background-color * JS: backgroundColor

3. Управление классами

Менять стили напрямую через JS — не всегда хорошая идея. Это смешивает логику и дизайн. Гораздо профессиональнее заранее описать классы в CSS, а через JS просто переключать их.

Для этого используется свойство classList.

Создание новых элементов

В прошлой статье мы учились работать с массивами объектов. Давайте применим это знание. Представьте, что мы получили список задач с сервера, и нам нужно отобразить их на странице.

Метод document.createElement('tag') создает элемент в памяти, но не показывает его. Метод parent.append(child) берет этот элемент и физически вставляет его внутрь родителя на странице.

События: Оживление страницы

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

Чтобы научить элемент реагировать на событие, мы вешаем на него «слушателя» с помощью метода addEventListener.

Синтаксис

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

Событие: строка с названием события (например, 'click', 'input', 'scroll').

Функция: код, который выполнится, когда событие произойдет. Эту функцию часто называют callback (обратный вызов) или handler (обработчик).

Пример: Кнопка-счетчик

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

HTML:

JavaScript:

Каждый раз, когда пользователь кликает на кнопку, браузер запускает нашу функцию. Функция берет переменную count из внешней области видимости (помните замыкания?), меняет её и обновляет интерфейс.

Объект события (Event Object)

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

Принято называть этот аргумент event или просто e.

Здесь e.target — это ссылка на сам элемент, на котором произошло событие (наше поле ввода), а e.target.value — это текущий текст внутри поля.

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

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

HTML:

JavaScript:

В этом примере мы:

Нашли элементы через querySelector.

Обработали событие click.

Считали данные через свойство value.

Использовали условие if для валидации.

Создали элемент через createElement.

Назначили новому элементу свой собственный обработчик событий (удаление).

Добавили элемент на страницу через append.

Заключение

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

Мы изучили: * Как находить элементы (querySelector). * Как менять их текст и стили (textContent, style, classList). * Как создавать новые элементы (createElement, append). * Как реагировать на действия пользователя (addEventListener).

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

Продвинутые концепции: асинхронность, Promise и возможности стандарта ES6+

Мы прошли долгий путь. Мы научились создавать переменные, управлять логикой программы, работать со структурами данных и даже манипулировать элементами на веб-странице. Казалось бы, что еще нужно?

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

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

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

Асинхронность: как делать несколько дел одновременно

Давайте разберем разницу на примере из жизни.

Синхронный подход: Вы пришли в кофейню. Вы делаете заказ кассиру. Кассир идет варить кофе. Вы стоите у кассы и ждете. Очередь за вами тоже ждет. Пока вы не получите свой кофе, никто другой не может сделать заказ.

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

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

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

Таймеры: простейшая асинхронность

Самый простой пример асинхронной функции — setTimeout. Она позволяет отложить выполнение кода.

Если вы запустите этот код, результат вас удивит:

1. Начало

3. Конец

2. Прошло 2 секунды (появится позже)

JavaScript не стал ждать 2 секунды. Он «зарегистрировал» таймер и сразу побежал выполнять код дальше. Это и есть неблокирующее поведение.

Promise (Обещание): Конец эпохи хаоса

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

Чтобы решить эту проблему, в JavaScript добавили Promise (Промис, Обещание).

Promise — это специальный объект, который представляет собой результат успешного или неудачного завершения асинхронной операции. У него есть три состояния:

Pending (Ожидание): Операция запущена, результат еще неизвестен (кофе варится).

Fulfilled / Resolved (Выполнено): Операция завершилась успешно (кофе готов, вот ваш стакан).

Rejected (Отклонено): Произошла ошибка (кофемашина сломалась).

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

Как использовать Promise?

Представим, что у нас есть функция fetchData(), которая возвращает Промис. Чтобы получить результат, мы используем методы .then() и .catch().

Это читается почти как обычное предложение: «Попробуй загрузить данные, затем (then) выведи их, а если что-то пойдет не так — поймай (catch) ошибку».

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

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

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

Давайте перепишем предыдущий пример:

Обратите внимание на блок try...catch. Это стандартный способ обработки ошибок в async/await. Мы пытаемся (try) выполнить код, и если происходит сбой, выполнение перескакивает в блок catch.

Реальный пример: Fetch API

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

javascript const product = 'iPhone'; const price = 1000;

const message = Вы выбрали: {price}{name}!); }

welcome('Олег'); // Привет, Олег! welcome(); // Привет, Гость! ```

Заключение курса

Поздравляю! Вы прошли путь от «Что такое переменная?» до «Как делать асинхронные запросы к API?».

В этом курсе мы изучили:

Основы синтаксиса и типы данных.

Логические конструкции и циклы.

Массивы, объекты и методы работы с ними.

DOM-дерево и обработку событий.

Асинхронность и современные стандарты ES6+.

Этого фундамента достаточно, чтобы начать создавать свои первые интерактивные веб-приложения. Дальше вас ждет глубокое погружение в практику, изучение фреймворков (React, Vue, Angular) и серверной части (Node.js). Но база, которую вы получили здесь, останется с вами навсегда.

Программирование — это марафон, а не спринт. Практикуйтесь каждый день, пишите код, ломайте его и чините снова. Удачи в мире JavaScript!