Поведение

JavaScript.

Оживи страницы: формы, данные, асинхронность и свои приложения.

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

  • 100 уроков
  • 20 модулей
  • 6000 XP
Приступить → Программа курса ›
Иллюстрация курса JavaScript
О КУРСЕ

Зачем это нужно.

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

Образ

Мышцы и нервы

У страницы есть скелет (HTML) и внешность (CSS), но сама она неподвижна. JavaScript — мышцы и нервы: он замечает, что пользователь нажал кнопку, решает, что делать, и меняет страницу в ответ.

РЕЗУЛЬТАТ

Чему ты научишься.

1

Писать логику

Переменные, типы, условия, циклы и функции — фундамент любого кода.

2

Работать с данными

Массивы, объекты, методы map, filter, reduce, деструктуризация и spread.

3

Управлять страницей

DOM, события, формы, классы и динамическое добавление элементов.

4

Работать с асинхронностью

Таймеры, промисы, async/await и запросы к серверу через fetch.

5

Хранить данные

localStorage и сохранение состояния приложения между визитами.

6

Находить и исправлять ошибки

Чтение сообщений об ошибках, отладка и аккуратная обработка сбоев.

ПРАКТИКА

Что ты создашь.

Калькулятор

Разметка, ввод цифр, логика операций и обработка крайних случаев.

Менеджер задач

Добавление, отметка, удаление, фильтры и сохранение в localStorage.

Приложение с данными из сети

Погода и список пользователей через fetch: загрузка, поиск, ошибки.

ПРОГРАММА

Все темы по порядку.

20 модулей, 100 уроков. Уроки открываются по очереди: следующий — после того, как закончишь текущий. Пройденные отмечаются галочкой.

1Первые шагиЧто такое JavaScript и как запустить свой первый код.5 уроков
300 XP
  1. Что такое JavaScript и где он работает50 XP
  2. Консоль, вывод и комментарии50 XP
  3. Переменные: let и const50 XP
  4. Имена и стиль кода50 XP
  5. Практика: визитка в консоли100 XP
2Типы данных и операторыЧисла, строки, логика и преобразования.5 уроков
300 XP
  1. Числа и арифметика50 XP
  2. Строки и шаблонные строки50 XP
  3. Логический тип и сравнение50 XP
  4. Преобразование типов50 XP
  5. Практика: калькулятор чека100 XP
3УсловияПрограмма принимает решения.5 уроков
300 XP
  1. if и else50 XP
  2. else if: несколько вариантов50 XP
  3. Логические операторы: &&, || и !50 XP
  4. switch и тернарный оператор50 XP
  5. Практика: определитель тарифа100 XP
4ЦиклыПовторяем действия без копирования кода.5 уроков
300 XP
  1. Цикл for50 XP
  2. Циклы while и do…while50 XP
  3. break и continue50 XP
  4. Вложенные циклы50 XP
  5. Практика: таблицы и фигуры100 XP
5ФункцииБлоки кода, которые можно использовать снова и снова.5 уроков
300 XP
  1. Объявление и вызов функций50 XP
  2. Параметры и return50 XP
  3. Стрелочные функции50 XP
  4. Область видимости и замыкания50 XP
  5. Практика: набор функций-помощников100 XP
6МассивыСписки данных и работа с ними.5 уроков
300 XP
  1. Массивы: создание и индексы50 XP
  2. Добавление и удаление элементов50 XP
  3. Перебор: for…of и forEach50 XP
  4. map и filter50 XP
  5. Практика: список покупок100 XP
7ОбъектыДанные с именованными свойствами.5 уроков
300 XP
  1. Объекты: свойства и значения50 XP
  2. Методы и this50 XP
  3. Перебор объектов: keys, values, entries50 XP
  4. Вложенные данные и копирование50 XP
  5. Практика: каталог товаров100 XP
8Работа с даннымиСтроки, массивы и объекты на практике.5 уроков
300 XP
  1. Методы строк50 XP
  2. find, some, every и includes50 XP
  3. sort и reduce50 XP
  4. Деструктуризация, spread и rest50 XP
  5. Практика: обработка данных100 XP
9DOMКак JavaScript видит и меняет страницу.5 уроков
300 XP
  1. Что такое DOM50 XP
  2. Поиск элементов: querySelector50 XP
  3. Текст и содержимое элементов50 XP
  4. Атрибуты, классы и стили50 XP
  5. Практика: оживляем карточку100 XP
10СобытияРеакция на действия пользователя.5 уроков
300 XP
  1. Событие click50 XP
  2. Ввод: input и change50 XP
  3. Объект события и клавиатура50 XP
  4. Делегирование событий50 XP
  5. Практика: счётчик и переключатели100 XP
11Динамические элементыСоздаём и удаляем элементы на лету.5 уроков
300 XP
  1. createElement и append50 XP
  2. Удаление и очистка50 XP
  3. Отрисовка списка из массива50 XP
  4. Формы: submit и preventDefault50 XP
  5. Практика: список дел100 XP
12Формы, таймеры, интерактивПроверка данных и движение на странице.5 уроков
300 XP
  1. Валидация формы50 XP
  2. Чекбоксы, селекты и радиокнопки50 XP
  3. setTimeout и setInterval50 XP
  4. Интерактивные элементы: вкладки и аккордеон50 XP
  5. Практика: секундомер и игра100 XP
13АсинхронностьКод, который ждёт.5 уроков
300 XP
  1. Колбэки и порядок выполнения50 XP
  2. Promise50 XP
  3. async и await50 XP
  4. Ошибки: try, catch, finally50 XP
  5. Практика: цепочка асинхронных действий100 XP
14Работа с даннымиJSON, сеть и хранилище браузера.5 уроков
300 XP
  1. JSON: формат обмена данными50 XP
  2. fetch: запросы к серверу50 XP
  3. Данные из API на странице50 XP
  4. localStorage50 XP
  5. Практика: заметки с сохранением100 XP
15Современный JavaScriptМодули, классы и работа со временем.5 уроков
300 XP
  1. Модули: import и export50 XP
  2. Классы50 XP
  3. Наследование, геттеры и сеттеры50 XP
  4. Дата, время и Math50 XP
  5. Практика: система классов100 XP
16Качество кодаОшибки, отладка и чистый код.5 уроков
300 XP
  1. Ошибки и отладка в DevTools50 XP
  2. Регулярные выражения50 XP
  3. Чистый код и рефакторинг50 XP
  4. Проверка своего кода: console.assert50 XP
  5. Практика: исправляем чужой код100 XP
17Проект 1: КалькуляторИнтерфейс, логика и обработка ошибок.5 уроков
300 XP
  1. Планирование калькулятора50 XP
  2. Разметка и ввод цифр50 XP
  3. Логика операций50 XP
  4. Ошибки и крайние случаи50 XP
  5. Проверка и доработка100 XP
18Проект 2: Менеджер задачПриложение с хранением данных.5 уроков
300 XP
  1. Планирование приложения50 XP
  2. Добавление и отображение задач50 XP
  3. Отметка, удаление и фильтры50 XP
  4. Сохранение в localStorage50 XP
  5. Проверка и доработка100 XP
19Проект 3: Приложение с данными из сетиПогода и список пользователей через fetch.5 уроков
300 XP
  1. Планирование приложения50 XP
  2. Запрос и отображение данных50 XP
  3. Поиск и фильтрация50 XP
  4. Загрузка и ошибки сети50 XP
  5. Проверка и доработка100 XP
20ФиналПубликация, портфолио и дальнейший путь.5 уроков
300 XP
  1. Git и GitHub: основы50 XP
  2. Публикация проекта50 XP
  3. Портфолио разработчика50 XP
  4. Что дальше: Python, Node.js и фреймворки50 XP
  5. Финальный экзамен100 XP
ДЛЯ КОГО

Подойдёт ли тебе этот курс.

Кому подойдёт

  • Тем, кто прошёл HTML и CSS и хочет оживить страницы
  • Будущим веб-разработчикам
  • Тем, кто хочет научиться программировать на практике

Что нужно знать и иметь

  • HTML и CSS — желательно: в курсе есть задания на работу со страницей
  • Основы программирования помогут, но не обязательны: все понятия объясняются с нуля
  • Код запускается прямо в браузере на странице урока
КАК ЭТО РАБОТАЕТ

Каждый урок — четыре шага.

Теория, вопросы, практика и итоговое задание. Рядом всегда есть помощник Nox-AI: он подскажет, но не решит за тебя.

  1. 1Теория

    Короткое объяснение с примерами.

  2. 2Проверь себя

    Вопросы на понимание.

  3. 3Практика

    Пишешь код — проверка мгновенная.

  4. 4Challenge

    Итог урока и очки XP.

Подробнее, как проходит урок ›    Что умеет Nox-AI ›

ПУТЬ

Что было до и что будет после.

← Сначала

CSS

Этот курс опирается на него. Если ты уже знаком с темой, можно пропустить.

О курсе →Дальше →

Python

Отдельное направление: данные и автоматизация.

О курсе →
ВОПРОСЫ

О курсе JavaScript.

Нужно ли знать HTML и CSS?

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

Как проверяется код?

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

Что дальше?

Python — отдельное направление: данные, автоматизация и серверная часть. Его можно начинать в любой момент после «Основ».

Готов начать?

Открой курс и пройди первый урок. Прогресс сохраняется в твоём аккаунте.

Приступить → Путь обучения ›

Курсы