Курс Котодаты · JavaScript в браузере

JavaScript с нуля

Язык, на котором написана почти каждая страница в интернете

Начинаем с команды console.log и за 26 уроков доходим до программы, которая ведёт список трат, фильтрует его, считает итоги и выдаёт отчёт. Справа — не картинка: это тот же тренажёр, что в уроках. Поменяйте код и запустите.

1 490 ₽ за весь курс, один раз и навсегда. Первый урок открыт бесплатно — нужна только регистрация.

  • Код запускается прямо в уроке
  • 138 задач с проверкой запуском
  • 8 проектов: от счёта в кафе до трекера расходов
  • Ничего не нужно устанавливать
Попробуйте формат
Настоящий код

Измените код и нажмите «Запустить»

Ctrl + Enter

Код выполняет тот же тренажёр, что в уроках. Он загружается по первому нажатию «Запустить» и занимает около 220 КБ.

Нажмите «Запустить» — вывод программы появится здесь.

Зачем это вам

С чего начинать, если хочется «в программирование»

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

Хочу научиться делать сайты, но все уроки сразу про кнопки, цвета и вёрстку — и я ничего не понимаю.
Модули 1–6

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

Хочу автоматизировать отчёты и сводки, чтобы не пересчитывать одно и то же руками каждый месяц.
Модули 4, 6 и 7

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

Уже начинал учить: посмотрел ролики, кивал, а через неделю не смог написать ни строчки.
Весь курс

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

Результат

Четыре вещи, которые вы будете делать сами

Каждую из них проверяет итоговый проект — если он сдан, значит, умеете.

Разобрать данные

Превратить текст JSON в записи с числами, отбросить испорченные строки и не упасть на них.

Посчитать и свести

Итоги по группам, среднее, самая крупная категория, отбор за период, сортировка без порчи исходных данных.

Прочитать сообщение об ошибке

Найти в нём строку и причину и отличить свою опечатку от плохих данных на входе.

Собрать программу

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

Где вы окажетесь после курса

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

Проекты

8 проектов: каждый следующий умеет больше предыдущего

Первый делит счёт в кафе на всех гостей. Последний ведёт список трат, фильтрует его, считает итоги по категориям и печатает отчёт. Между ними — шесть ступенек, и на каждой программа умеет чуть больше.

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

  1. Модуль 1

    Счёт в кафе

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

  2. Модуль 2

    Скидки в магазине

    Программа считает цену со скидкой по правилам: по сумме заказа, по статусу клиента и по дню недели.

  3. Модуль 3

    Копилка

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

  4. Модуль 4

    Журнал оценок

    Программа считает средний балл группы, находит лучших и печатает отсортированную ведомость.

  5. Модуль 5

    Калькулятор цены

    Набор функций: цена с налогом, цена со скидкой, итог по корзине — и отчёт, который их собирает.

  6. Модуль 6

    Склад магазина

    Программа ведёт остатки товаров по командам прихода и расхода, не даёт уйти в минус и печатает отчёт по складу.

  7. Модуль 7

    Учёт расходов

    Программа разбирает расходы из JSON, пропускает испорченные записи, считает траты по категориям и выдаёт сводку.

  8. Модуль 8

    Трекер расходов

    Программа ведёт список трат: добавляет, фильтрует по категории, считает итоги и выдаёт отчёт за период.

Как проходит урок

Абзац — запуск — задача

Один приём за раз: объяснили, показали в работе, дали попробовать. И так до конца урока.

Пример уже выполнен. Добавьте в массив ещё одну цену и запустите ещё раз
  1. 1
    Примеры живые

    Под каждым куском кода — его настоящий вывод. Любой пример одной кнопкой открывается в редакторе.

  2. 2
    Ломать можно и нужно

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

  3. 3
    Ошибка — с переводом

    Рядом с сообщением на английском — что оно значит по-русски и с какой строки искать причину.

Два теста прошли, третий подал пустой массив — и деление на ноль вернуло NaN
  1. 4
    Тесты вызывают ваш код

    Не сверяют с образцом, а запускают функцию с разными данными. Как вы её написали — ваше дело.

  2. 5
    Проверяют то, о чём забывают

    Пустой массив, ноль, значение ровно на границе, испорченная строка. Через пару модулей вы начнёте думать о них заранее.

  3. 6
    Подсказки, а не ответы

    Первая наводит на мысль, следующая сужает поиск. Готовое решение открывается последним.

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

Программа

8 модулей, 26 уроков

Первая половина курса — сам язык: значения, условия, циклы, массивы. Вторая — то, ради чего его учат: функции, объекты, данные в формате JSON, ошибки и своя программа. Раскройте модуль — под каждым уроком написано, что вы в нём делаете.

8 модулей · 26 уроков · 8 проектов
1Первая программа4 урока
  1. Первая программа: console.log, строки и числаВы запускаете первую программу и меняете то, что она печатает.
  2. Переменные и типы: let, constВы заводите переменные под цену, количество и название и выводите их.
  3. Арифметика: деление, остаток, округлениеВы считаете сумму, сдачу и среднее и разбираетесь, откуда берутся дробные хвосты.
  4. Строки: длина, методы и шаблонные строкиВы собираете из частей готовые фразы и приводите текст в порядок.

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

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

2Условия3 урока
  1. Сравнения и if/elseВы учите программу выбирать одну из веток.
  2. Логические операторы &&, || и !Вы соединяете несколько проверок в одно условие и ловите ошибки на границах.
  3. switch и тернарный операторВы выбираете из многих вариантов и пишете короткие условия в одну строку.

Проект: Скидки в магазине. Программа считает цену со скидкой по правилам: по сумме заказа, по статусу клиента и по дню недели.

В итоге: программа сама принимает решения по заданным правилам.

3Циклы3 урока
  1. Цикл whileВы повторяете действие, пока условие остаётся верным.
  2. Цикл forВы считаете суммы и печатаете таблицы, повторяя действие заданное число раз.
  3. break, continue и вложенные циклыВы останавливаете цикл досрочно и строите таблицу из строк и столбцов.

Проект: Копилка. Программа откладывает деньги неделя за неделей, пока не накопится цель, и подводит итог: сколько недель и какой был самый большой взнос.

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

4Массивы4 урока
  1. Массивы: создание, индексы и изменениеВы храните много значений в одной переменной, добавляете и убираете элементы.
  2. Обход массива: for...of, сумма и поискВы считаете итог, среднее и находите нужный элемент.
  3. map и filterВы одной строкой преобразуете и отбираете элементы массива.
  4. find, reduce и sortВы находите, сворачиваете в одно значение и сортируете, не портя исходные данные.

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

В итоге: работаете с наборами данных: считаете, ищете, сортируете, отбираете.

5Функции4 урока
  1. Функции: параметры и returnВы даёте имя куску программы и вызываете его с разными данными.
  2. Стрелочные функции и значения по умолчаниюВы пишете короткие функции и делаете часть параметров необязательными.
  3. Область видимости и замыканияВы разбираетесь, какие переменные видит функция и откуда берётся «память» у функции.
  4. Функции как значения: callbackВы передаёте одну функцию другой и пишете свой аналог map и filter.

Проект: Калькулятор цены. Набор функций: цена с налогом, цена со скидкой, итог по корзине — и отчёт, который их собирает.

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

6Объекты4 урока
  1. Объекты: свойства и значенияВы описываете товар или клиента одной записью с полями.
  2. Методы объектов и thisВы учите объект считать и печатать себя.
  3. Деструктуризация, spread и restВы достаёте поля одной строкой и копируете данные, не портя оригинал.
  4. Массивы объектовВы описываете заказы как записи и считаете по ним выручку.

Проект: Склад магазина. Программа ведёт остатки товаров по командам прихода и расхода, не даёт уйти в минус и печатает отчёт по складу.

В итоге: описываете данные так, как они устроены в жизни, и работаете с ними списками записей.

7Данные и ошибки2 урока
  1. JSON: данные в виде текстаВы превращаете объекты в текст и обратно.
  2. Ошибки: try, catch и throwВы не даёте программе упасть на плохих данных и сообщаете понятную причину.

Проект: Учёт расходов. Программа разбирает расходы из JSON, пропускает испорченные записи, считает траты по категориям и выдаёт сводку.

В итоге: программа переживает плохие данные и умеет передавать их дальше в виде текста.

8Итоговый проект2 урока
  1. Как собрать программу: план и заготовкаВы разбиваете задачу на функции и описываете данные до написания кода.
  2. Итоговый проект: трекер расходовВы собираете законченную программу из функций, объектов и массивов.

Проект: Трекер расходов. Программа ведёт список трат: добавляет, фильтрует по категории, считает итоги и выдаёт отчёт за период.

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

Цена

За что вы платите

  • 26 уроков в 8 модулях. Текст, живые примеры и редактор для экспериментов в каждом.
  • 138 задач. С тестами, подсказками и разбором после решения.
  • 8 проектов. Счёт в кафе, скидки в магазине, копилка, журнал оценок, калькулятор цены, склад, учёт расходов и итоговый трекер.
  • Тренажёр в браузере. Код выполняется прямо во вкладке, настраивать и устанавливать нечего. Консоль показывает вывод так же, как в привычных инструментах разработчика.
  • Без расписания. Нет ни групп, ни сроков сдачи. Прогресс привязан к аккаунту, доступ не заканчивается.
Для кого

Кому этот курс подойдёт

Ни разу не писали код

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

Хотите в веб-разработку

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

Уже знаете SQL, Excel или Python

Тогда многое покажется знакомым: отбор, подсчёт по группам, сортировка. Курс покажет, как то же самое выглядит в языке, на котором работают браузеры.

Границы курса

Чего здесь не будет

Шесть вещей, о которых честнее сказать до покупки.

  • Страниц, кнопок и вёрстки. Курс — про сам язык: все программы выводят результат в консоль. Работа со страницей сайта — отдельная тема, в этот курс она не входит.
  • Классов, async/await и сетевых запросов. Их нет в программе курса, а тренажёр их не поддерживает. Всё, что вы пишете в уроках, будет работать так же и в браузере, и в Node.js.
  • Обещаний про работу. После курса вы пишете свои программы. До вакансии разработчика — ещё несколько тем, и гарантий трудоустройства мы не даём.
  • Установки на компьютер. Всё проходит на сайте. Как поставить редактор кода или Node.js, курс не рассказывает.
  • Наставника. Решения проверяют тесты, а не человек. Поддержка поможет с оплатой, доступом и работой сайта, но код разбирать не будет.
  • Результата без практики. Прочитанный урок без решённых задач почти ничего не оставляет. Этот курс работает только руками.
Вопросы

Что спрашивают перед покупкой

Остался вопрос — напишите на support@kotodata.ru.

Открыть первый урок
JavaScript и Java — это одно и то же?

Нет. Это два разных языка, которые связывает только похожее название. JavaScript работает в браузерах и на серверах, Java чаще пишут для крупных систем и Android. Курс по Java у нас отдельный.

Это настоящий JavaScript или учебная копия?

Язык настоящий. Код разбирает известный парсер acorn, а выполняет интерпретатор Котодаты; массивы, строки, математика и JSON — встроенные возможности вашего браузера. Из-за ограничений безопасности сайтов тренажёр не поддерживает классы, асинхронный код и очень глубокую рекурсию. Всё, что есть в программе курса, работает так же, как в обычном JavaScript.

Я никогда не программировал. Справлюсь?

Курс на это и рассчитан. Первая программа — одна строка, первая задача — угадать, что она напечатает. Из математики нужны четыре действия и проценты.

Сколько это займёт?

Около 20 часов: полчаса-час на обычный урок, больше — на уроки с проектами. Если заниматься по часу в будний день, выйдет примерно месяц. Торопить вас никто не будет.

Что будет после этого курса?

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

Что останется у меня после курса?

Код ваших программ — его можно скопировать и сохранить у себя — и умение писать такие же. Это консольные программы: они общаются текстом, без окон и кнопок. Сертификата и документа об образовании курс не даёт.

А если я застряну на задаче?

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

Можно учиться с телефона?

Читать и решать короткие задачи — да. Проекты второй половины курса удобнее писать на компьютере: в них десятки строк.

Первая строка уже написана — осталось её запустить

Откройте первый урок: через полчаса вы будете знать, как JavaScript печатает, считает и сообщает об ошибках. Дальше — ещё 25 уроков и 8 проектов за 1 490 ₽.

JavaScript с нуля · 1 490 ₽Один платёж · без подписки
Начать

Кабинет