MyWiki

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

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

-----

===== Урок 1: Первая программа и консоль =====

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

**Твоя первая программа:**
<code javascript>
alert("Привет, мир!");
</code>

**Как запустить:**
  - Открой браузер (Chrome, Firefox, Edge)
  - Нажми клавишу **F12**
  - Выбери вкладку **Console**
  - Напиши ''alert("Привет")'' и нажми Enter

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

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

**Тренировка:**
<code javascript>
alert("Моя первая программа");
alert('Ура, получилось!');
</code>

-----

===== Урок 2: Переменные — коробки с данными =====

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

**Создать переменную (положить значение):**
<code javascript>
let имя = "Вася";
let возраст = 25;
let учится = true;
</code>

**Забрать значение из переменной:**
<code javascript>
console.log(имя);      // покажет "Вася" в консоли
console.log(возраст);  // покажет 25
</code>

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

**Переменную можно менять:**
<code javascript>
let x = 5;
x = 10;      // теперь x равен 10
x = x + 3;   // теперь x равен 13
console.log(x);
</code>

**Тренировка:**
<code javascript>
let myName = "твоё_имя";
let myAge = 20;
console.log("Меня зовут " + myName + ", мне " + myAge + " лет");
</code>

-----

===== Урок 3: Типы данных и математика =====

**Типы значений:**
^ Тип ^ Пример ^ Что это ^
| строка | ''"Привет"'' | Текст (всегда в кавычках) |
| число | ''42'', ''3.14'', ''-5'' | Цифры без кавычек |
| логический | ''true'', ''false'' | Да или нет |
| null | ''null'' | Пусто (специальное значение) |
| undefined | ''undefined'' | Не определено (нет значения) |

**Математика:**
<code javascript>
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 (остаток от деления)
</code>

**Склеивание текста (конкатенация):**
<code javascript>
let привет = "Привет";
let имя = "Аня";
console.log(привет + ", " + имя + "!");  // "Привет, Аня!"
</code>

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

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

-----

===== Урок 4: Взаимодействие с пользователем =====

**alert() — показать сообщение:**
<code javascript>
alert("Добро пожаловать!");
</code>

**prompt() — спросить текст:**
<code javascript>
let имя = prompt("Как тебя зовут?");
alert("Привет, " + имя + "!");
</code>

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

**Важно:** ''prompt()'' всегда возвращает текст (строку). Если нужно число:
<code javascript>
let возрастСтрока = prompt("Сколько лет?");
let возрастЧисло = Number(возрастСтрока);
console.log(возрастЧисло + 5);  // сложение чисел
</code>

**Тренировка:**
<code javascript>
let имя = prompt("Как тебя зовут?");
let город = prompt("Откуда ты?");
alert("Привет, " + имя + " из города " + город + "!");
</code>

-----

===== Урок 5: Условия (if / else) — выбор пути =====

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

**Простое условие:**
<code javascript>
let возраст = 18;

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

**Условие с else (иначе):**
<code javascript>
let температура = 25;

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

**Много вариантов (else if):**
<code javascript>
let оценка = 85;

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

**Таблица сравнений (внутри if):**
^ Символ ^ Значение ^ Пример (true) ^
| ''>'' | больше | ''5 > 3'' |
| ''<'' | меньше | ''2 < 4'' |
| ''>='' | больше или равно | ''5 >= 5'' |
| ''<='' | меньше или равно | ''3 <= 4'' |
| ''=='' | равно (по значению) | ''5 == "5"'' |
| ''==='' | строго равно | ''5 === 5'' |
| ''!='' | не равно | ''3 != 5'' |

**Сложные условия (И / ИЛИ):**
<code javascript>
let возраст = 20;
let имеетПрава = true;

// И (&&) — оба условия должны быть true
if (возраст >= 18 && имеетПрава === true) {
  alert("Можешь водить машину");
}

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

**Тренировка — угадай число:**
<code javascript>
let секрет = 7;
let ответ = Number(prompt("Угадай число от 1 до 10"));

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

-----

===== Урок 6: Циклы — повторяем действия =====

**for — когда знаешь сколько раз:**
<code javascript>
// вывести числа от 1 до 5
for (let счетчик = 1; счетчик <= 5; счетчик++) {
  console.log("Число: " + счетчик);
}
</code>

**Как читать for:**
  * ''let счетчик = 1'' — начальное значение
  * ''счетчик <= 5'' — условие (пока верно — крутим)
  * ''счетчик++'' — увеличиваем на 1 после каждого шага

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

**Практический пример — сумма чисел:**
<code javascript>
let сумма = 0;
for (let i = 1; i <= 10; i++) {
  сумма = сумма + i;
}
console.log("Сумма чисел от 1 до 10 = " + сумма);  // 55
</code>

**Таблица умножения:**
<code javascript>
let число = 5;
for (let i = 1; i <= 10; i++) {
  console.log(число + " x " + i + " = " + (число * i));
}
</code>

**Тренировка — считаем до 10:**
<code javascript>
for (let i = 10; i >= 1; i--) {
  console.log(i);
}
console.log("Поехали!");
</code>

-----

===== Урок 7: Массивы — списки значений =====

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

**Создать массив:**
<code javascript>
let фрукты = ["яблоко", "банан", "апельсин", "киви"];
let числа = [10, 20, 30];
let пустой = [];
</code>

**Доступ к элементам (индексы с 0!):**
<code javascript>
console.log(фрукты[0]);   // "яблоко"
console.log(фрукты[2]);   // "апельсин"
console.log(фрукты[5]);   // undefined (нет такого)
</code>

**Изменить элемент:**
<code javascript>
фрукты[1] = "груша";
console.log(фрукты);  // ["яблоко", "груша", "апельсин", "киви"]
</code>

**Полезные методы массивов:**
^ Метод ^ Что делает ^ Пример ^
| ''push()'' | добавить в конец | ''фрукты.push("виноград")'' |
| ''pop()'' | удалить последний | ''фрукты.pop()'' |
| ''length'' | длина массива | ''фрукты.length'' |
| ''indexOf()'' | найти индекс элемента | ''фрукты.indexOf("банан")'' |

**Перебор массива циклом:**
<code javascript>
let имена = ["Аня", "Вася", "Дима", "Маша"];

for (let i = 0; i < имена.length; i++) {
  console.log("Привет, " + имена[i]);
}
</code>

**Тренировка — список дел:**
<code javascript>
let дела = ["купить хлеб", "позвонить маме", "сделать уроки"];

console.log("У тебя " + дела.length + " дела:");
for (let i = 0; i < дела.length; i++) {
  console.log((i+1) + ". " + дела[i]);
}
</code>

-----

===== Урок 8: Функции — создаём свои команды =====

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

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

// вызываем функцию
сказатьПривет();
сказатьПривет();  // можно много раз
</code>

**Функция с параметрами (входными данными):**
<code javascript>
function приветствие(имя) {
  console.log("Привет, " + имя + "!");
}

приветствие("Аня");  // Привет, Аня!
приветствие("Вася"); // Привет, Вася!
</code>

**Функция с возвратом результата (return):**
<code javascript>
function сумма(a, b) {
  return a + b;
}

let результат = сумма(5, 3);
console.log(результат);  // 8

let еще = сумма(10, 20);
console.log(еще);  // 30
</code>

**Функция может быть сложнее:**
<code javascript>
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
</code>

**Тренировка — приветствие:**
<code javascript>
function показатьПриветствие(имя, возраст) {
  let сообщение = "Привет, " + имя + "! Тебе " + возраст + " лет.";
  return сообщение;
}

let текст = показатьПриветствие("Дима", 25);
alert(текст);
</code>

-----

===== Урок 9: Объекты — группируем данные =====

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

**Создание объекта:**
<code javascript>
let человек = {
  имя: "Петя",
  возраст: 30,
  город: "Москва",
  работает: true
};
</code>

**Доступ к свойствам:**
<code javascript>
console.log(человек.имя);       // "Петя"
console.log(человек["возраст"]); // 30
console.log(человек.город);      // "Москва"
</code>

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

**Объект с методами (функциями внутри):**
<code javascript>
let кошка = {
  имя: "Мурка",
  возраст: 3,
  мяукнуть: function() {
    alert("Мяу! Меня зовут " + this.имя);
  },
  постареть: function(лет) {
    this.возраст = this.возраст + лет;
  }
};

кошка.мяукнуть();       // Мяу! Меня зовут Мурка
кошка.постареть(2);
console.log(кошка.возраст);  // 5
</code>

**Массив объектов (очень полезно):**
<code javascript>
let студенты = [
  { имя: "Аня", оценка: 85 },
  { имя: "Вася", оценка: 92 },
  { имя: "Дима", оценка: 78 }
];

for (let i = 0; i < студенты.length; i++) {
  console.log(студенты[i].имя + " — " + студенты[i].оценка + " баллов");
}
</code>

**Тренировка — телефонная книга:**
<code javascript>
let контакты = [
  { имя: "Мама", телефон: "89123456789" },
  { имя: "Папа", телефон: "89876543210" }
];

function найтиТелефон(имя) {
  for (let i = 0; i < контакты.length; i++) {
    if (контакты[i].имя === имя) {
      return контакты[i].телефон;
    }
  }
  return "Контакт не найден";
}

console.log(найтиТелефон("Мама"));   // 89123456789
console.log(найтиТелефон("Друг"));   // Контакт не найден
</code>

-----

===== Урок 10: Работа с веб-страницей (DOM) =====

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

**Найти элемент на странице:**
<code javascript>
// по id (самый простой способ)
let заголовок = document.getElementById("myTitle");

// по CSS селектору (первый подходящий)
let кнопка = document.querySelector(".btn");

// все элементы по селектору
let всеПараграфы = document.querySelectorAll("p");
</code>

**Изменить содержимое:**
<code javascript>
// меняем текст внутри
заголовок.innerHTML = "Новый заголовок";

// меняем текст (безопаснее)
заголовок.textContent = "Ещё один текст";
</code>

**Изменить стиль:**
<code javascript>
заголовок.style.color = "red";
заголовок.style.fontSize = "24px";
заголовок.style.backgroundColor = "yellow";
</code>

**Создать новый элемент:**
<code javascript>
let новыйПараграф = document.createElement("p");
новыйПараграф.innerHTML = "Этот абзац создан через JS!";
document.body.appendChild(новыйПараграф);
</code>

**Полный пример — HTML + JS:**
<code html>
<!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>
</code>

-----

===== Урок 11: Обработка ошибок =====

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

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

^ Ошибка ^ Причина ^ Исправление ^
| ''Uncaught ReferenceError: x is not defined'' | Переменная не объявлена | Добавь ''let x = значение;'' |
| ''Uncaught TypeError: ... is not a function'' | Вызываешь как функцию то, что ей не является | Проверь тип переменной |
| ''Unexpected token'' | Синтаксическая ошибка (пропущена скобка/кавычка) | Проверь закрытие скобок и кавычек |

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

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

-----

===== Урок 12: Полезные приёмы на каждый день =====

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

**Короткий if (тернарный оператор):**
<code javascript>
let возраст = 18;
let статус = возраст >= 18 ? "взрослый" : "ребёнок";
console.log(статус);
</code>

**Случайное число:**
<code javascript>
let от0до1 = Math.random();                     // от 0 до 1
let от1до10 = Math.floor(Math.random() * 10) + 1;
let от0до100 = Math.floor(Math.random() * 101);
</code>

**Округление:**
<code javascript>
let число = 3.7;
Math.floor(число);  // 3 (вниз)
Math.ceil(число);   // 4 (вверх)
Math.round(число);  // 4 (по правилам)
</code>

**Таймер (отложенное выполнение):**
<code javascript>
// выполнится через 3 секунды
setTimeout(function() {
  alert("Прошло 3 секунды!");
}, 3000);

// повторять каждые 2 секунды
let интервал = setInterval(function() {
  console.log("Tick");
}, 2000);

// остановить интервал
clearInterval(интервал);
</code>

**Проверка, что переменная — число:**
<code javascript>
let значение = prompt("Введи число");
if (!isNaN(значение) && значение !== null && значение !== "") {
  alert(`Это число: ${Number(значение)}`);
} else {
  alert("Это не число!");
}
</code>

-----

===== Практические проекты для закрепления =====

**Проект 1 — Калькулятор возраста:**
<code javascript>
let годРождения = prompt("В каком году ты родился?");
let текущийГод = 2026;
let возраст = текущийГод - Number(годРождения);
alert(`Тебе ${возраст} лет (или около того)`);
</code>

**Проект 2 — Угадай число (игра):**
<code javascript>
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(`Игра окончена. Было загадано ${секрет}`);
  }
}
</code>

**Проект 3 — Список дел в браузере:**
Сохрани как ''todo.html'' и открой:
<code 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>
</code>

-----

===== Что делать дальше? =====

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

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

**Где брать помощь:**
  * Открой консоль (F12) — там все ошибки
  * MDN Web Docs (набери в поиске "MDN что-хочешь-узнать")
  * Загугли: "javascript как сделать ..."

-----

//[[antistatus@mail.ru|Antistatus]] 15.04.2026 08:36//