JavaScript с нуля онлайн: как учить синтаксис и DOM

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

Главная ошибка на старте — долго решать только консольные примеры и бояться DOM. Консоль нужна для базы, но уже после первых тем стоит переносить маленькие задачи на страницу

По этой теме полезно отдельно посмотреть Идеи приложений на JavaScript для портфолио, чтобы расширить контекст и сравнить подходы

По этой теме полезно отдельно посмотреть Вопросы JavaScript на собеседовании, чтобы расширить контекст и сравнить подходы

Что вы должны понять сначала

На старте достаточно пяти вещей:

• где подключается JavaScript-файл
• как объявить переменную
• как написать условие
• как создать функцию
• как найти элемент страницы через querySelector

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

Минимальный пример с синтаксисом

Сначала проверьте обычный JavaScript без страницы:

const userName = 'Анна';
const lessonsDone = 3;

if (lessonsDone >= 3) {
  console.log(`${userName} готова переходить к DOM`);
} else {
  console.log(`${userName} пока повторяет базу`);
}

В этом примере есть переменные, число, условие и строка с подстановкой. Поменяйте lessonsDone на 0, 2 и 5. Если заранее понятно, какой текст появится в консоли, можно двигаться дальше

Как перейти от консоли к DOM

DOM — это представление HTML-страницы для JavaScript. Через DOM код может найти кнопку, прочитать поле ввода, поменять текст, добавить элемент в список или скрыть блок

Минимальная HTML-разметка:

<input id="nameInput" placeholder="Ваше имя">
<button id="helloButton">Поздороваться</button>
<p id="result"></p>
<script src="script.js"></script>

Код в script.js:

const input = document.querySelector('#nameInput');
const button = document.querySelector('#helloButton');
const result = document.querySelector('#result');

button.addEventListener('click', () => {
  const name = input.value.trim();

  if (!name) {
    result.textContent = 'Введите имя';
    return;
  }

  result.textContent = `Привет, ${name}`;
});

Здесь уже видно, как синтаксис становится интерфейсом: переменные хранят элементы, условие проверяет пустой ввод, функция внутри addEventListener запускается после клика

В каком порядке учить темы

Сначала пройдите переменные, строки, числа и условия. После этого напишите 5-7 маленьких функций: расчет скидки, проверка возраста, форматирование имени, проверка пустой строки, сумма двух чисел

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

Только после этого идите в DOM: поиск элемента, чтение value, изменение textContent, создание элемента, обработчики событий

Практика 1. Проверка поля формы

Сделайте форму, где пользователь вводит email. На первом шаге не нужна сложная регулярка, достаточно простой проверки

function isEmailLike(email) {
  const cleanEmail = email.trim();
  return cleanEmail.includes('@') && cleanEmail.includes('.');
}

console.log(isEmailLike('name@example.com'));
console.log(isEmailLike('wrong-email'));
console.log(isEmailLike('  user@test.ru  '));

После проверки в консоли перенесите функцию в обработчик формы. Так вы увидите, что функция остается той же, меняется только источник данных

Практика 2. Список задач

Список задач хорошо показывает связь синтаксиса и DOM: массив хранит данные, функция рисует список, обработчик добавляет новую задачу

const tasks = [];

function addTask(title) {
  const cleanTitle = title.trim();

  if (!cleanTitle) {
    return;
  }

  tasks.push({
    id: Date.now(),
    title: cleanTitle,
    done: false,
  });
}

addTask('Повторить функции');
addTask('  ');
addTask('Сделать DOM-задачу');

console.log(tasks);

Когда массив работает в консоли, добавьте вывод на страницу через createElement

function renderTasks() {
  taskList.innerHTML = '';

  tasks.forEach((task) => {
    const item = document.createElement('li');
    item.textContent = task.title;
    taskList.append(item);
  });
}

Проверьте пустой ввод, две одинаковые задачи и добавление нескольких задач подряд

Практика 3. Фильтр списка

Фильтр помогает закрепить массивы, строки и ввод с клавиатуры

const products = [
  { title: 'Книга', category: 'books' },
  { title: 'Клавиатура', category: 'tech' },
  { title: 'Монитор', category: 'tech' },
];

function findProducts(query) {
  const cleanQuery = query.trim().toLowerCase();

  return products.filter((product) => {
    return product.title.toLowerCase().includes(cleanQuery);
  });
}

console.log(findProducts('мон'));
console.log(findProducts(''));

Дальше можно подключить поле поиска и вызывать findProducts(input.value) при каждом вводе. Если запрос пустой, решите заранее: показывать все товары или сообщение с подсказкой

Частые ошибки новичков

Первая ошибка — не подключить файл правильно. Если код не работает вообще, проверьте путь в <script src="script.js"></script> и откройте консоль браузера

Вторая ошибка — искать элемент до того, как он появился на странице. Самый простой вариант для старта: подключайте скрипт перед закрывающим </body> или используйте defer

Третья ошибка — читать значение поля один раз при загрузке страницы. Значение input.value нужно брать внутри обработчика, когда пользователь уже ввел текст

Четвертая ошибка — менять только DOM и забывать про данные. Если список должен фильтроваться, удаляться и сохраняться, лучше хранить задачи в массиве, а страницу перерисовывать из массива

Как проверять себя

• код запускается без ошибок в консоли
• пустое поле не ломает интерфейс
• повторный клик не создает странное состояние
• список можно очистить и заполнить заново
• функция работает отдельно от DOM
• DOM-код использует результат функции, а не дублирует всю логику

Контрольный мини-проект

В конце первой учебной недели соберите маленькую страницу «Список покупок». В ней должны быть поле ввода, кнопка, массив товаров и вывод списка на страницу

Минимальная логика такая:

const products = [];

function addProduct(title) {
  const cleanTitle = title.trim();

  if (!cleanTitle) {
    return false;
  }

  products.push(cleanTitle);
  return true;
}

function getProductsText() {
  return products.map((product, index) => `${index + 1}. ${product}`);
}

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

Что добавить после первой версии:

• сообщение при пустом вводе
• очистку поля после добавления
• удаление товара по кнопке
• счетчик количества товаров
• сохранение списка в localStorage

Когда переходить дальше

Переходите к асинхронности, fetch, модулям и React только после того, как можете сами собрать маленькую страницу: поле ввода, кнопку, список, проверку пустого значения и обработчик события

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