JS-TRAIN

01 — Что такое JavaScript

Язык, который оживляет сайты

HTML — скелет, CSS — внешность, JavaScript — мозг. Он делает страницу живой и интерактивной.

Что такое JavaScript?

Знакомство с языком

▶

JavaScript (JS) — единственный язык программирования, который браузер понимает нативно. Если HTML строит структуру, а CSS добавляет стили, то JS делает страницу живой: обрабатывает клики, проверяет формы, загружает данные, показывает анимации.

Без JS современный интернет невозможен. Каждый раз, когда ты нажимаешь кнопку "лайк", видишь выпадающее меню или получаешь уведомление — это JavaScript.

💡

JavaScript был создан за 10 дней в 1995 году. Сегодня это один из самых популярных языков мира — он работает и в браузере, и на сервере (Node.js), и в мобильных приложениях.

Как подключить JS?

Тег <script>

▶

JavaScript добавляется на страницу через тег <script>. Его обычно ставят перед закрывающим тегом </body> — чтобы HTML успел загрузиться раньше, чем JS начнёт с ним работать.

подключение JS
<body>

  <h1>Привет!</h1>

  <!-- JS — в самом конце body -->
  <script>
    
    console.log('JS работает!');
  </script>

</body>

Результат

✓

console.log() — команда вывода в консоль браузера. Открой DevTools (F12) → вкладка Console. Это главный инструмент отладки JS-кода.

02 — Переменные и типы данных

Хранение информации

Переменные — это именованные "ящики" для хранения данных. Без них программирование невозможно.

let, const, var

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

▶

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

переменные

const name = 'Макс';
const year = 2025;

let count = 0;
count = 5; 

console.log(name);  
console.log(count); 
            
Результат

const

Константа — нельзя переназначить

let

Переменная — можно изменить

var

Устаревший способ, не используй

Типы данных

Строка, число, булево, массив, объект

▶

JavaScript умеет работать с разными видами данных. Главное — понять, что строки пишутся в кавычках, числа — без, булевы — true или false.

типы данных

const text = 'Привет, мир!';

const age = 21;
const pi  = 3.14;

const isActive = true;

const colors = ['red', 'green', 'blue'];

const user = {
  name: 'Макс',
  age:  21
};

💡

Узнать тип данных можно через typeof. Например: typeof 'hello' вернёт "string", а typeof 42 — "number".

03 — Функции и условия

Логика и действия

Функции — переиспользуемые блоки кода. Условия — принятие решений. Это сердце любой программы.

Функции

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

▶

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

функции

function greet(name) {
  return 'Привет, ' + name + '!';
}

console.log(greet('Макс'));

const add = (a, b) => a + b;
console.log(add(3, 4)); 
            
Результат

Условия if / else

Принятие решений

▶

Условие if проверяет выражение: если оно true — выполняется первый блок, иначе — блок else. Это основа любой логики в коде.

условия
const age = 20;

if (age >= 18) {
  console.log('Вход разрешён');
} else {
  console.log('Вход запрещён');
}

Результат

04 — DOM и управление страницей

JavaScript меняет HTML

DOM (Document Object Model) — это представление HTML-страницы в виде объектов. JS может менять любой элемент на лету.

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

getElementById, querySelector

▶

Прежде чем изменить элемент — нужно его найти. Самые популярные методы: getElementById — по ID, и querySelector — по любому CSS-селектору (как в CSS: #id, .class, тег).

поиск элементов

const title =
  document.getElementById('title');

const btn =
  document.querySelector('button');

const card =
  document.querySelector('.card');

Результат

Изменение элементов

textContent, style, classList

▶

Найдя элемент, можно изменить его текст, стили или классы прямо из JS. Это позволяет обновлять страницу без перезагрузки.

изменение DOM
const title = document.querySelector('h1');

title.textContent = 'Новый текст!';

title.style.color = '#fb923c';
title.style.fontSize = '2rem';

title.classList.add('active');
title.classList.remove('hidden');
title.classList.toggle('visible');

Результат

textContent

Текст внутри элемента

innerHTML

HTML-код внутри элемента

style.prop

CSS-свойство элемента

classList

add / remove / toggle класса

05 — События и навигация

Реакция на действия пользователя

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

addEventListener

Слушатели событий

▶

Метод addEventListener "подписывает" элемент на событие. Когда событие происходит — вызывается функция-обработчик. Это основной способ сделать сайт интерактивным.

события
const btn = document.querySelector('button');


btn.addEventListener('click', function() {
  alert('Ты нажал кнопку!');
});


btn.addEventListener('click', () => {
  console.log('Клик!');
});

Попробуй!

click

Клик мышью или тап

input

Ввод текста в поле

mouseover

Наведение курсора

keydown

Нажатие клавиши

submit

Отправка формы

load

Загрузка страницы

Переход на страницу

window.location.href

▶

Чтобы отправить пользователя на другую страницу через JavaScript — используй window.location.href. Это самый простой способ навигации программно.

навигация
const btn = document.querySelector('#go-btn');

btn.addEventListener('click', () => {
  
  window.location.href = 'https://google.com';
});

Пример

💡

В практике нужно сделать кнопку, которая при нажатии переходит на другой сайт. Используй onclick="window.location.href='https://...'" прямо в HTML-теге — это удобнее всего.

Создай интерактивный сайт

Используй HTML, CSS и JS вместе. Редактор обновляет предпросмотр мгновенно.

🎨

Фон #1C1C1C

🔤

Шрифт Google Fonts

📝

Заголовок h1

🔘

Стильная кнопка

⚡

Кнопка → переход

Live

Редактор кода

Предпросмотр

Прогресс задания 0 / 5

✓

Фон страницы задан цветом #1C1C1C

✓

Подключён внешний шрифт (Google Fonts)

✓

Есть заголовок <h1>

✓

Есть кнопка <button> с CSS-стилями

✓

Кнопка переходит на страницу (window.location.href или onclick)

🚀

JavaScript освоен!

Потрясающе! Ты прошёл путь от нуля до интерактивного сайта с HTML, CSS и JavaScript. Теперь ты понимаешь, как работает каждый сайт в интернете.

Следующие шаги: fetch API для запросов к серверу, React для больших приложений, или Node.js для серверного JS. Ты на верном пути!

🏆

JS Developer

Первый интерактивный сайт · JS-TRAIN

✦ Задания

5 практических заданий

Нарастающая сложность. Напиши код → ▶ Запустить → ✓ Проверить.

Выполнено0 / 5

Легко

Счётчик кликов

Кнопки «+1», «−1» (≥0), «Сброс». Цвет числа меняется при росте/уменьшении.

HTML+JS

Предпросмотр

Легко

Переключатель темы

classList.toggle() тёмная↔светлая тема. Меняй иконку и текст кнопки.

HTML+JS

Предпросмотр

Средне

Todo-список

Поле + «Добавить». Клик = зачёркивание, ✕ = удаление. localStorage.

HTML+JS

Предпросмотр

Средне

Калькулятор

Кнопки 0–9, +−×÷. Дисплей: выражение + результат. Обработка деления на ноль.

HTML+JS

Предпросмотр

Сложно

Квиз-викторина

5 вопросов с вариантами. По одному. Итог: «X из 5» + анимация + перезапуск.

HTML+JS

Предпросмотр

Учи JavaScriptс нуля

Язык, который оживляет сайты

Хранение информации

Логика и действия

JavaScript меняет HTML

Реакция на действия пользователя

Создай интерактивный сайт

5 практических заданий

Учи JavaScript
с нуля