Самоучитель по JavaScript

Этот самоучитель проведёт тебя с нуля до понимания основ. Читай по порядку, каждый пример печатай руками в консоли браузера (F12 → Console).

Что нужно знать: Компьютер выполняет команды строка за строкой.

Твоя первая программа:

alert("Привет, мир!");

Как запустить:

1. Открой браузер (Chrome, Firefox, Edge)
2. Нажми клавишу F12
3. Выбери вкладку Console
4. Напиши alert(«Привет») и нажми Enter

Что ты увидишь: Всплывающее окошко с текстом.

Важно: Кавычки могут быть «двойные» или 'одинарные' ' — разницы нет, главное не смешивать.

Тренировка:

alert("Моя первая программа");
alert('Ура, получилось!');

Что это: Переменная — это как коробка с именем, где лежит значение.

Создать переменную (положить значение):

let имя = "Вася";
let возраст = 25;
let учится = true;

Забрать значение из переменной:

console.log(имя);      // покажет "Вася" в консоли
console.log(возраст);  // покажет 25

Имена переменных:

• Можно: userName, user_name, user1, _private
• Нельзя: 1user (начинать с цифры), my-name (дефис), let (запрещённые слова)

Переменную можно менять:

let x = 5;
x = 10;      // теперь x равен 10
x = x + 3;   // теперь x равен 13
console.log(x);

Тренировка:

let myName = "твоё_имя";
let myAge = 20;
console.log("Меня зовут " + myName + ", мне " + myAge + " лет");

Типы значений:

Математика:

let a = 10;
let b = 3;
 
console.log(a + b);   // 13 (сложение)
console.log(a - b);   // 7 (вычитание)
console.log(a * b);   // 30 (умножение)
console.log(a / b);   // 3.333... (деление)
console.log(a % b);   // 1 (остаток от деления)

Склеивание текста (конкатенация):

let привет = "Привет";
let имя = "Аня";
console.log(привет + ", " + имя + "!");  // "Привет, Аня!"

Важно: 5 + 5 = 10 (число), но «5» + 5 = «55» (текст)!

Тренировка:

let ширина = 10;
let высота = 5;
let площадь = ширина * высота;
console.log("Площадь прямоугольника: " + площадь);

alert() — показать сообщение:

alert("Добро пожаловать!");

prompt() — спросить текст:

let имя = prompt("Как тебя зовут?");
alert("Привет, " + имя + "!");

confirm() — спросить да/нет:

let согласие = confirm("Ты готов учиться дальше?");
console.log(согласие);  // true если нажал ОК, false если Отмена

Важно: prompt() всегда возвращает текст (строку). Если нужно число:

let возрастСтрока = prompt("Сколько лет?");
let возрастЧисло = Number(возрастСтрока);
console.log(возрастЧисло + 5);  // сложение чисел

Тренировка:

let имя = prompt("Как тебя зовут?");
let город = prompt("Откуда ты?");
alert("Привет, " + имя + " из города " + город + "!");

Зачем: Выполнять разные действия в зависимости от условия.

Простое условие:

let возраст = 18;
 
if (возраст >= 18) {
  alert("Ты взрослый");
}

Условие с else (иначе):

let температура = 25;
 
if (температура > 20) {
  alert("Надень футболку");
} else {
  alert("Надень куртку");
}

Много вариантов (else if):

let оценка = 85;
 
if (оценка >= 90) {
  alert("Отлично!");
} else if (оценка >= 70) {
  alert("Хорошо");
} else if (оценка >= 50) {
  alert("Удовлетворительно");
} else {
  alert("Нужно учить больше");
}

Таблица сравнений (внутри if):

Сложные условия (И / ИЛИ):

let возраст = 20;
let имеетПрава = true;
 
// И (&&) — оба условия должны быть true
if (возраст >= 18 && имеетПрава === true) {
  alert("Можешь водить машину");
}
 
// ИЛИ (||) — хотя бы одно условие true
let день = "суббота";
let время = 10;
if (день === "суббота" || день === "воскресенье") {
  alert("Выходной!");
}

Тренировка — угадай число:

let секрет = 7;
let ответ = Number(prompt("Угадай число от 1 до 10"));
 
if (ответ === секрет) {
  alert("Поздравляю! Ты угадал!");
} else if (ответ > секрет) {
  alert("Много, попробуй меньше");
} else if (ответ < секрет) {
  alert("Мало, попробуй больше");
} else {
  alert("Введи нормальное число!");
}

for — когда знаешь сколько раз:

// вывести числа от 1 до 5
for (let счетчик = 1; счетчик <= 5; счетчик++) {
  console.log("Число: " + счетчик);
}

Как читать for:

• let счетчик = 1 — начальное значение
• счетчик ⇐ 5 — условие (пока верно — крутим)
• счетчик++ — увеличиваем на 1 после каждого шага

while — пока условие верно:

let счетчик = 1;
while (счетчик <= 5) {
  console.log("Шаг номер " + счетчик);
  счетчик++;  // не забудь увеличивать, иначе бесконечный цикл!
}

Практический пример — сумма чисел:

let сумма = 0;
for (let i = 1; i <= 10; i++) {
  сумма = сумма + i;
}
console.log("Сумма чисел от 1 до 10 = " + сумма);  // 55

Таблица умножения:

let число = 5;
for (let i = 1; i <= 10; i++) {
  console.log(число + " x " + i + " = " + (число * i));
}

Тренировка — считаем до 10:

for (let i = 10; i >= 1; i--) {
  console.log(i);
}
console.log("Поехали!");

Что такое массив: Упорядоченный список, где у каждого элемента есть номер (индекс), начиная с 0.

Создать массив:

let фрукты = ["яблоко", "банан", "апельсин", "киви"];
let числа = [10, 20, 30];
let пустой = [];

Доступ к элементам (индексы с 0!):

console.log(фрукты[0]);   // "яблоко"
console.log(фрукты[2]);   // "апельсин"
console.log(фрукты[5]);   // undefined (нет такого)

Изменить элемент:

фрукты[1] = "груша";
console.log(фрукты);  // ["яблоко", "груша", "апельсин", "киви"]

Полезные методы массивов:

Перебор массива циклом:

let имена = ["Аня", "Вася", "Дима", "Маша"];
 
for (let i = 0; i < имена.length; i++) {
  console.log("Привет, " + имена[i]);
}

Тренировка — список дел:

let дела = ["купить хлеб", "позвонить маме", "сделать уроки"];
 
console.log("У тебя " + дела.length + " дела:");
for (let i = 0; i < дела.length; i++) {
  console.log((i+1) + ". " + дела[i]);
}

Зачем: Написать код один раз и использовать много раз.

Создание и вызов функции:

// создаём функцию
function сказатьПривет() {
  console.log("Привет!");
  console.log("Как дела?");
}
 
// вызываем функцию
сказатьПривет();
сказатьПривет();  // можно много раз

Функция с параметрами (входными данными):

function приветствие(имя) {
  console.log("Привет, " + имя + "!");
}
 
приветствие("Аня");  // Привет, Аня!
приветствие("Вася"); // Привет, Вася!

Функция с возвратом результата (return):

function сумма(a, b) {
  return a + b;
}
 
let результат = сумма(5, 3);
console.log(результат);  // 8
 
let еще = сумма(10, 20);
console.log(еще);  // 30

Функция может быть сложнее:

function калькулятор(число1, число2, действие) {
  if (действие === "+") {
    return число1 + число2;
  } else if (действие === "-") {
    return число1 - число2;
  } else if (действие === "*") {
    return число1 * число2;
  } else if (действие === "/") {
    return число1 / число2;
  } else {
    return "Неизвестное действие";
  }
}
 
console.log(калькулятор(10, 5, "+"));  // 15
console.log(калькулятор(10, 5, "*"));  // 50

Тренировка — приветствие:

function показатьПриветствие(имя, возраст) {
  let сообщение = "Привет, " + имя + "! Тебе " + возраст + " лет.";
  return сообщение;
}
 
let текст = показатьПриветствие("Дима", 25);
alert(текст);

Что такое объект: Набор свойств (имя: значение), объединённых в одну сущность.

Создание объекта:

let человек = {
  имя: "Петя",
  возраст: 30,
  город: "Москва",
  работает: true
};

Доступ к свойствам:

console.log(человек.имя);       // "Петя"
console.log(человек["возраст"]); // 30
console.log(человек.город);      // "Москва"

Изменение и добавление свойств:

человек.возраст = 31;           // изменили
человек.хобби = "футбол";       // добавили новое свойство
console.log(человек);

Объект с методами (функциями внутри):

let кошка = {
  имя: "Мурка",
  возраст: 3,
  мяукнуть: function() {
    alert("Мяу! Меня зовут " + this.имя);
  },
  постареть: function(лет) {
    this.возраст = this.возраст + лет;
  }
};
 
кошка.мяукнуть();       // Мяу! Меня зовут Мурка
кошка.постареть(2);
console.log(кошка.возраст);  // 5

Массив объектов (очень полезно):

let студенты = [
  { имя: "Аня", оценка: 85 },
  { имя: "Вася", оценка: 92 },
  { имя: "Дима", оценка: 78 }
];
 
for (let i = 0; i < студенты.length; i++) {
  console.log(студенты[i].имя + " — " + студенты[i].оценка + " баллов");
}

Тренировка — телефонная книга:

let контакты = [
  { имя: "Мама", телефон: "89123456789" },
  { имя: "Папа", телефон: "89876543210" }
];
 
function найтиТелефон(имя) {
  for (let i = 0; i < контакты.length; i++) {
    if (контакты[i].имя === имя) {
      return контакты[i].телефон;
    }
  }
  return "Контакт не найден";
}
 
console.log(найтиТелефон("Мама"));   // 89123456789
console.log(найтиТелефон("Друг"));   // Контакт не найден

DOM — это представление страницы в виде дерева. JavaScript может его изменять.

Найти элемент на странице:

// по id (самый простой способ)
let заголовок = document.getElementById("myTitle");
 
// по CSS селектору (первый подходящий)
let кнопка = document.querySelector(".btn");
 
// все элементы по селектору
let всеПараграфы = document.querySelectorAll("p");

Изменить содержимое:

// меняем текст внутри
заголовок.innerHTML = "Новый заголовок";
 
// меняем текст (безопаснее)
заголовок.textContent = "Ещё один текст";

Изменить стиль:

заголовок.style.color = "red";
заголовок.style.fontSize = "24px";
заголовок.style.backgroundColor = "yellow";

Создать новый элемент:

let новыйПараграф = document.createElement("p");
новыйПараграф.innerHTML = "Этот абзац создан через JS!";
document.body.appendChild(новыйПараграф);

Полный пример — HTML + JS:

<!DOCTYPE html>
<html>
<head>
  <title>Моя страница</title>
</head>
<body>
  <h1 id="заголовок">Привет, мир!</h1>
  <button id="мояКнопка">Нажми меня</button>
  <div id="результат"></div>
 
  <script>
    let кнопка = document.getElementById("мояКнопка");
    let заголовок = document.getElementById("заголовок");
    let результат = document.getElementById("результат");
 
    кнопка.onclick = function() {
      заголовок.style.color = "blue";
      заголовок.innerHTML = "Ты нажал на кнопку!";
      результат.innerHTML = "<strong>Кнопка сработала!</strong>";
    };
  </script>
</body>
</html>

Консоль — твой лучший друг: При ошибке в консоли (F12) будет красное сообщение. Читай его!

Типичные ошибки и их исправление:

Проверка на ошибки (try/catch):

try {
  let результат = 10 / 0;
  console.log(результат);  // Infinity (не ошибка, но ладно)
 
  let x = неОбъявленнаяПеременная;  // тут будет ошибка
} catch (ошибка) {
  console.log("Произошла ошибка: " + ошибка.message);
}

Проверка существования элемента:

let элемент = document.getElementById("несуществующийId");
if (элемент) {
  элемент.innerHTML = "Нашёлся!";
} else {
  console.log("Элемент не найден на странице");
}

Шаблонные строки (вместо склеивания):

let имя = "Вася";
let возраст = 25;
console.log(`Привет, ${имя}! Тебе ${возраст} лет.`);
// Кавычки с обратным апострофом (на клавише Ё)

Короткий if (тернарный оператор):

let возраст = 18;
let статус = возраст >= 18 ? "взрослый" : "ребёнок";
console.log(статус);

Случайное число:

let от0до1 = Math.random();                     // от 0 до 1
let от1до10 = Math.floor(Math.random() * 10) + 1;
let от0до100 = Math.floor(Math.random() * 101);

Округление:

let число = 3.7;
Math.floor(число);  // 3 (вниз)
Math.ceil(число);   // 4 (вверх)
Math.round(число);  // 4 (по правилам)

Таймер (отложенное выполнение):

// выполнится через 3 секунды
setTimeout(function() {
  alert("Прошло 3 секунды!");
}, 3000);
 
// повторять каждые 2 секунды
let интервал = setInterval(function() {
  console.log("Tick");
}, 2000);
 
// остановить интервал
clearInterval(интервал);

Проверка, что переменная — число:

let значение = prompt("Введи число");
if (!isNaN(значение) && значение !== null && значение !== "") {
  alert(`Это число: ${Number(значение)}`);
} else {
  alert("Это не число!");
}

Проект 1 — Калькулятор возраста:

let годРождения = prompt("В каком году ты родился?");
let текущийГод = 2026;
let возраст = текущийГод - Number(годРождения);
alert(`Тебе ${возраст} лет (или около того)`);

Проект 2 — Угадай число (игра):

let секрет = Math.floor(Math.random() * 10) + 1;
let попытки = 3;
 
while (попытки > 0) {
  let ответ = Number(prompt(`Угадай число от 1 до 10. Осталось попыток: ${попытки}`));
 
  if (ответ === секрет) {
    alert("Поздравляю! Ты угадал!");
    break;
  } else if (ответ > секрет) {
    alert("Много");
  } else if (ответ < секрет) {
    alert("Мало");
  }
  попытки--;
 
  if (попытки === 0) {
    alert(`Игра окончена. Было загадано ${секрет}`);
  }
}

Проект 3 — Список дел в браузере: Сохрани как todo.html и открой:

<!DOCTYPE html>
<html>
<head>
  <title>Список дел</title>
</head>
<body>
  <h2>Мои дела</h2>
  <input type="text" id="новоеДело" placeholder="Новое дело...">
  <button onclick="добавитьДело()">Добавить</button>
  <ul id="списокДел"></ul>
 
  <script>
    let дела = [];
 
    function показатьДела() {
      let список = document.getElementById("списокДел");
      список.innerHTML = "";
      for (let i = 0; i < дела.length; i++) {
        список.innerHTML += `<li>${дела[i]} <button onclick="удалитьДело(${i})">Удалить</button></li>`;
      }
    }
 
    function добавитьДело() {
      let поле = document.getElementById("новоеДело");
      let текст = поле.value;
      if (текст !== "") {
        дела.push(текст);
        поле.value = "";
        показатьДела();
      }
    }
 
    function удалитьДело(индекс) {
      дела.splice(индекс, 1);
      показатьДела();
    }
  </script>
</body>
</html>

Ты уже знаешь:

• Переменные, типы данных, математику
• Условия (if/else) и циклы (for/while)
• Массивы и объекты
• Функции (создание и вызов)
• Работу с веб-страницей (DOM)

Куда двигаться:

• Изучи события (click, mouseover, keydown)
• Изучи fetch — как получать данные с сервера
• Изучи localStorage — как сохранять данные в браузере
• Попробуй фреймворки: React, Vue или Svelte

Где брать помощь:

• Открой консоль (F12) — там все ошибки
• MDN Web Docs (набери в поиске «MDN что-хочешь-узнать»)
• Загугли: «javascript как сделать …»

Antistatus 15.04.2026 08:36