CodeDala
JS
💻 For developers

JavaScript Start

11 topics, 99 lessons: variables, operators, conditions, loops, strings, numbers, arrays, objects, functions, DOM, and final projects

What you'll build
📘A solid foundation
⚡Practice in the browser
🎯Mini-projects
🎓Course certificate
📘 99 lessons⏱ 1-2 evenings🎓 Advanced
🎯 Mission
Master JavaScript Start
⚡+1040XP
🏆CertificatePDF
🎓Course complete
Progress0 / 99 · 0%
Next up: Что такое JavaScript

Course program

01

Переменные и типы

0 / 8 lessons
⌄
  1. 01

    Что такое JavaScript

    Язык программирования•console.log•Первый запуск⚡ +10
    ▶ Now
  2. 02

    Переменные: let и const

    Что такое переменная•let•const•Правила именования⚡ +10
    Open
  3. 03

    Строки

    Кавычки одинарные / двойные•Шаблонные строки `${ }`•Длина и склейка⚡ +10
    Open
  4. 04

    Числа

    Один тип `number`•Целые и дробные•Базовые операции⚡ +10
    Open
  5. 05

    Логический тип: true и false

    `true` / `false`•Сравнения возвращают boolean•Логические операторы⚡ +10
    Open
  6. 06

    null и undefined

    Два «нет значения»•`undefined` — не присвоено•`null` — пусто специально⚡ +10
    Open
  7. 07

    typeof — узнать тип

    Оператор `typeof`•Возвращает строку•Известная странность с null⚡ +10
    Open
  8. 08

    Динамическая типизация

    Тип привязан к ЗНАЧЕНИЮ•Переприсваивание меняет тип•Сравнение с другими языками⚡ +10
    Open
02

Операторы

0 / 6 lessons
⌄
  1. 09

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

    + - * /•Как в математике•Возвращают число⚡ +10
    Open
  2. 10

    Деление: / и %

    Дробное `/`•Остаток `%`•Чётность через `% 2`⚡ +10
    Open
  3. 11

    Степень: **

    `a ** b`•Современная замена `Math.pow`•Право-ассоциативный⚡ +10
    Open
  4. 12

    Сокращения: +=, -=, *=, /=

    `x += 1`•Эквивалент `x = x + 1`•Все 4 операции⚡ +10
    Open
  5. 13

    Инкремент и декремент: ++ и --

    `x++` и `x--`•Постфикс vs префикс•Когда уместно⚡ +10
    Open
  6. 14

    Конкатенация строк: + и шаблоны

    `+` со строками•Шаблонные строки `${}`•Когда что использовать⚡ +10
    Open
03

Условия

0 / 10 lessons
⌄
  1. 15

    if — простое условие

    Синтаксис `if`•Блок `{ ... }`•Когда срабатывает⚡ +10
    Open
  2. 16

    else — альтернативный путь

    `if ... else`•Один из двух вариантов•Вместе всегда⚡ +10
    Open
  3. 17

    else if — несколько веток

    Цепочка `else if`•Сверху вниз•Первое срабатывает — остальные нет⚡ +10
    Open
  4. 18

    Сравнение значений: == vs ===

    `===` строгое равенство•`==` мягкое (с приведением)•Почему всегда `===`⚡ +10
    Open
  5. 19

    Сравнение: <, >, <=, >=

    Реляционные операторы•Возвращают `true`/`false`•Чейнить нельзя⚡ +10
    Open
  6. 20

    Логические операторы: &&, ||, !

    `&&` — и•`||` — или•`!` — не⚡ +10
    Open
  7. 21

    Тернарный оператор: a ? b : c

    Короткая форма `if/else`•Возвращает значение•Когда уместно⚡ +10
    Open
  8. 22

    switch — выбор по значению

    `switch (val)`•`case` + `break`•`default`⚡ +10
    Open
  9. 23

    truthy и falsy значения

    JS превращает в boolean•Falsy: 6 особых значений•Всё остальное — truthy⚡ +10
    Open
  10. 24

    Современный JS: ?. и ??

    `?.` — optional chaining•`??` — nullish coalescing•Защита от `null`/`undefined`⚡ +10
    Open
04

Циклы

0 / 10 lessons
⌄
  1. 25

    for — стандартный счётчик

    3 части в скобках•Тело в `{ }`•Когда использовать⚡ +10
    Open
  2. 26

    while — цикл с проверкой условия

    `while (условие) { ... }`•Когда количество шагов неизвестно•Не забудь обновлять⚡ +10
    Open
  3. 27

    do...while — выполнить хотя бы раз

    Тело сначала, проверка потом•Гарантирует один проход•Редко, но бывает нужно⚡ +10
    Open
  4. 28

    for...of — пройти по элементам

    Цикл по массиву•Без индекса•Самый чистый способ⚡ +10
    Open
  5. 29

    for...in — пройти по ключам объекта

    Цикл по ключам объекта•НЕ для массивов!•Когда уместен⚡ +10
    Open
  6. 30

    break — выйти из цикла

    Прерывание досрочно•Сразу после `break`•Только текущий цикл⚡ +10
    Open
  7. 31

    continue — пропустить шаг

    Перейти к следующей итерации•Текущая обрывается•Удобно для фильтра⚡ +10
    Open
  8. 32

    .forEach — метод массива

    Метод массива, не цикл•Принимает функцию•Вместо `for...of` для простых случаев⚡ +10
    Open
  9. 33

    Вложенные циклы

    Цикл внутри цикла•Таблицы / сетки•Сложность растёт быстро⚡ +10
    Open
  10. 34

    Накопление: счётчик и сумма

    Шаблон счётчика•Шаблон суммы•Объяви ДО цикла⚡ +10
    Open
05

Строки

0 / 10 lessons
⌄
  1. 35

    Длина строки и доступ к символам

    `.length`•`s[i]` и `s.charAt(i)`•Индексация с 0⚡ +10
    Open
  2. 36

    Срез строки: .slice()

    `s.slice(start, end)`•`end` НЕ включается•Отрицательные индексы⚡ +10
    Open
  3. 37

    Регистр: .toUpperCase() и .toLowerCase()

    Все в верхний регистр•Все в нижний•Возвращают новую строку⚡ +10
    Open
  4. 38

    Поиск: .includes(), .indexOf()

    `.includes(sub)` → boolean•`.indexOf(sub)` → число•`-1` если не найдено⚡ +10
    Open
  5. 39

    Замена: .replace() и .replaceAll()

    Заменить ОДНО вхождение•`.replaceAll` — все•Возвращает новую строку⚡ +10
    Open
  6. 40

    Разбиение и склейка: .split() и .join()

    `s.split(sep)` → массив•`arr.join(sep)` → строка•Зеркальные операции⚡ +10
    Open
  7. 41

    .trim() — убрать пробелы по краям

    Убрать пробелы и `\n`•`.trimStart`, `.trimEnd`•Перед сохранением вводов⚡ +10
    Open
  8. 42

    startsWith и endsWith

    `s.startsWith(prefix)`•`s.endsWith(suffix)`•Возвращают boolean⚡ +10
    Open
  9. 43

    Многострочные шаблонные строки

    Бэктики позволяют переводы строк•`\n` тоже работает•Удобно для шаблонов⚡ +10
    Open
  10. 44

    Сравнение строк и Number()

    Сравнение по алфавиту•`Number("42")` → число•`String(42)` → строка⚡ +10
    Open
06

Числа и Math

0 / 8 lessons
⌄
  1. 45

    Math.round, .floor, .ceil — округление

    `round` — к ближайшему•`floor` — вниз•`ceil` — вверх⚡ +10
    Open
  2. 46

    Math.abs, Math.sign

    `abs(x)` — модуль•`sign(x)` — знак ±1 / 0•Чисто-числовые⚡ +10
    Open
  3. 47

    Math.min и Math.max

    Минимум / максимум из аргументов•С массивом — через `...`•Принимают ЛЮБОЕ количество⚡ +10
    Open
  4. 48

    Math.random — случайные числа

    Возвращает 0 ≤ x < 1•Целое в диапазоне•Игры, сэмплинг, тесты⚡ +10
    Open
  5. 49

    parseInt и Number — парсинг чисел

    `Number("42")` — строгий•`parseInt("42px")` — лояльный•`+x` — короткий способ⚡ +10
    Open
  6. 50

    .toFixed() — форматирование дробных

    Указанное число знаков после запятой•Возвращает СТРОКУ (!)•Цены, проценты⚡ +10
    Open
  7. 51

    NaN, Infinity и проверки

    `NaN` — не число•`Infinity` — бесконечность•`Number.isNaN`, `Number.isFinite`⚡ +10
    Open
  8. 52

    Number.isInteger и проверка чисел

    `Number.isInteger(x)`•Целое vs дробное•Безопасный диапазон⚡ +10
    Open
07

Массивы

0 / 12 lessons
⌄
  1. 53

    Создание массива и доступ

    `[a, b, c]`•`arr[i]`•Индекс с 0⚡ +10
    Open
  2. 54

    .length и итерация

    `.length`•for-цикл по индексу•for...of по элементам⚡ +10
    Open
  3. 55

    .push() и .pop() — конец массива

    `.push(x)` добавить•`.pop()` забрать•Мутация!⚡ +10
    Open
  4. 56

    .shift() и .unshift() — начало массива

    `.unshift(x)` в начало•`.shift()` забрать с начала•Медленнее push/pop⚡ +10
    Open
  5. 57

    .indexOf() и .includes() — поиск

    `.includes(x)` → boolean•`.indexOf(x)` → индекс / -1•Сравнение через `===`⚡ +10
    Open
  6. 58

    .slice() — копия куска

    `arr.slice(start, end)`•Возвращает НОВЫЙ массив•Не мутирует⚡ +10
    Open
  7. 59

    .map() — преобразование

    Каждый элемент → новый•Возвращает массив той же длины•Декларативный стиль⚡ +10
    Open
  8. 60

    .filter() — отбор по условию

    Только подходящие•Возвращает НОВЫЙ массив•Длина может быть меньше⚡ +10
    Open
  9. 61

    .reduce() — свёртка в одно значение

    `reduce(fn, init)`•Сумма / счёт / max / min•Аккумулятор + текущий⚡ +10
    Open
  10. 62

    .find(), .some(), .every()

    `.find` — первый подходящий•`.some` — есть хоть один?•`.every` — все подходят?⚡ +10
    Open
  11. 63

    Spread `...` — копии и слияние

    `[...arr]` копия•`[...a, ...b]` слияние•`Math.max(...nums)`⚡ +10
    Open
  12. 64

    Сортировка: .sort()

    Сортирует на месте•Без аргумента — лексикографически•Сравнитель `(a, b) => a - b`⚡ +10
    Open
08

Объекты

0 / 10 lessons
⌄
  1. 65

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

    `{ key: value }`•Несколько свойств•Запятая между⚡ +10
    Open
  2. 66

    Доступ: точка vs квадратные скобки

    `obj.field`•`obj["field"]`•Когда что нужно⚡ +10
    Open
  3. 67

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

    `obj.field = newVal`•Новое поле — присвоить•Работает с `const`⚡ +10
    Open
  4. 68

    delete — удалить поле

    `delete obj.field`•Поле исчезает•Иммутабельная альтернатива⚡ +10
    Open
  5. 69

    Object.keys, .values, .entries

    Все ключи / значения / пары•Возвращают массивы•Для итерации⚡ +10
    Open
  6. 70

    Деструктуризация объекта

    `const { a, b } = obj`•Несколько полей разом•Значения по умолчанию⚡ +10
    Open
  7. 71

    Shorthand: { name } вместо { name: name }

    Имя совпадает — пиши коротко•Современный стиль•Меньше повторов⚡ +10
    Open
  8. 72

    Spread `...` для объектов

    `{ ...obj }` копия•`{ ...a, ...b }` слияние•Иммутабельные обновления⚡ +10
    Open
  9. 73

    Computed keys: { [key]: value }

    Динамический ключ•Имя из переменной•`[...]` в литерале⚡ +10
    Open
  10. 74

    Методы и this

    Функция как поле•`this` = объект•НЕ стрелочные для методов⚡ +10
    Open
09

Функции

0 / 12 lessons
⌄
  1. 75

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

    `function name(args) { }`•Параметры и `return`•Вызов: `name(args)`⚡ +10
    Open
  2. 76

    Функция-выражение vs declaration

    `function name() { }`•`const name = function() { }`•Hoisting различается⚡ +10
    Open
  3. 77

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

    `(args) => ...`•Без `function` и `return`•Современный стиль⚡ +10
    Open
  4. 78

    Параметры по умолчанию

    `function f(x = 10)`•Если аргумент `undefined`•Любое выражение⚡ +10
    Open
  5. 79

    Rest-параметры: ...args

    `function f(...args)`•Собирает в массив•Любое количество⚡ +10
    Open
  6. 80

    Spread при вызове

    Распаковать массив в аргументы•Удобно с Math.max и т.п.•Зеркало rest-параметров⚡ +10
    Open
  7. 81

    Замыкания (closures)

    Функция помнит окружение•Счётчик через closure•Изоляция состояния⚡ +10
    Open
  8. 82

    Функция как аргумент (HOF)

    Higher-order functions•Передаём функцию•.map / .filter — примеры⚡ +10
    Open
  9. 83

    Возврат функции из функции

    Фабрики функций•Каррирование (curry)•Гибкие API⚡ +10
    Open
  10. 84

    this в обычной vs стрелочной

    Обычная — динамический this•Стрелочная — лексический this•Когда какую⚡ +10
    Open
  11. 85

    Hoisting: declaration vs expression

    Declaration «всплывает»•Expression — нет•Стиль современных команд⚡ +10
    Open
  12. 86

    IIFE — немедленно вызванная функция

    `(function() { ... })()`•Создаёт изолированную область•Старый паттерн⚡ +10
    Open
10

DOM и события

0 / 8 lessons
⌄
  1. 87

    getElementById — найти элемент

    Что такое DOM•Поиск элемента по id•Чтение и запись⚡ +10
    Open
  2. 88

    querySelector — CSS-селекторы

    Универсальный поиск•querySelector vs querySelectorAll•Знакомый синтаксис CSS⚡ +10
    Open
  3. 89

    textContent vs innerHTML

    Изменить текст элемента•textContent — безопасно•innerHTML — с HTML-тегами⚡ +10
    Open
  4. 90

    element.style — менять CSS из JS

    Прямой доступ к стилям•camelCase вместо kebab-case•Когда лучше classList⚡ +10
    Open
  5. 91

    classList — переключать классы

    Стили через CSS, логика через JS•add/remove/toggle/contains•Чище чем .style⚡ +10
    Open
  6. 92

    addEventListener — реагируем на клик

    Сердце интерактивности•Стрелочный колбэк•event vs e⚡ +10
    Open
  7. 93

    Создание элементов: createElement + appendChild

    Динамический DOM•createElement•appendChild / append⚡ +10
    Open
  8. 94

    Формы: input.value

    Чтение пользовательского ввода•.value у input•Событие input vs change⚡ +10
    Open
11

Финальные проекты

0 / 5 lessons
⌄
  1. 95

    Проект 1: Калькулятор

    Чтение из input•Преобразование в число•switch для операции⚡ +10
    Open
  2. 96

    Проект 2: Счётчик кликов

    Состояние в переменной•Обновление UI на каждое событие•Идея localStorage⚡ +10
    Open
  3. 97

    Проект 3: TODO-список

    Массив задач•Перерисовка списка•Удаление по индексу⚡ +10
    Open
  4. 98

    Проект 4: Таймер с setInterval

    setInterval / clearInterval•Хранение id таймера•Старт / стоп / сброс⚡ +10
    Open
  5. 99

    Проект 5: Мини-квиз

    Массив объектов-вопросов•Подсчёт правильных ответов•Финальный отчёт
    Course complete
    Open
JavaScript Start — online coding course