Первые Шаги с JavaScript

Добро пожаловать в твой первый JavaScript lesson.

Здесь твои web pages перестают быть тихими плакатами и начинают становиться interactive.

HTML даёт page structure.

CSS даёт page style.

JavaScript даёт page behavior.

Это значит, что JavaScript может реагировать, когда user нажимает button, пишет что-то в form, открывает menu, отправляет data или делает что-то подозрительное — например, нажимает один и тот же button 47 раз.

JavaScript — это language, который говорит:

“Что-то произошло. Дай я отвечу.”

Очень useful.

Иногда очень dramatic.

Но мы начнём спокойно.

Без frameworks.

Без complicated tools.

Без гигантского setup.

Только HTML, CSS, JavaScript и твой browser.

Красивый маленький chaos laboratory.

Что Ты Изучишь

В этом lesson ты узнаешь:

что такое JavaScript;
где работает JavaScript;
как создать простой project;
как подключить JavaScript к HTML;
как написать свой первый JavaScript code;
как использовать console.log;
как открыть browser console;
как избегать common beginner mistakes.

К концу этого lesson у тебя будет маленькая web page, подключённая к JavaScript file.

И да, browser наконец начнёт тебя слушать.

В основном.

Browsers вежливые, но строгие.

Что Такое JavaScript?

JavaScript — это programming language, который используется в основном в web development.

Он может работать в browser и контролировать, что происходит на web page.

С JavaScript ты можешь:

менять text;
менять styles;
реагировать на clicks;
validate forms;
создавать menus;
показывать messages;
получать data из APIs;
строить interactive web apps.

Пример:

console.log("Hello, JavaScript!");

Эта строка выводит message в browser console.

Она не показывает message на page.

Она показывает его в developer tools.

Console — это место, где JavaScript говорит, когда не хочет тревожить мебель.

JavaScript в Browser

Твой browser понимает три главных frontend languages:

HTML;
CSS;
JavaScript.

HTML создаёт content.

CSS стилизует content.

JavaScript контролирует behavior.

Представь button.

HTML создаёт button.

CSS делает его красивым.

JavaScript решает, что произойдёт, когда кто-то его нажмёт.

Без JavaScript button может существовать.

С JavaScript button может что-то делать.

Это разница между decorative button и button с работой.

Никто не любит безработные buttons.

Создай Project

Создай folder для этого lesson:

mkdir javascript-lesson1
cd javascript-lesson1
touch index.html
touch script.js

Твой project должен выглядеть так:

javascript-lesson1/
  index.html
  script.js

Мы оставим всё simple.

Один HTML file.

Один JavaScript file.

Без build tools.

Без npm.

Без “установи 900 packages, прежде чем написать hello”.

Только чистый beginner JavaScript.

Напиши HTML

Открой index.html и добавь это:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Первые Шаги с JavaScript</title>
</head>
<body>
  <h1>Первые Шаги с JavaScript</h1>

  <p id="message">JavaScript ещё не работает.</p>

  <button id="changeButton">Изменить Сообщение</button>

  <script src="script.js"></script>
</body>
</html>

Самая важная часть:

<script src="script.js"></script>

Эта строка подключает JavaScript file к HTML file.

Мы ставим её перед closing body tag.

Так HTML elements загружаются первыми, а потом JavaScript может их найти.

Если JavaScript пытается найти element до того, как browser его создал, JavaScript путается.

Как искать кофе, ещё не зайдя на кухню.

Напиши Свой Первый JavaScript

Открой script.js и добавь:

console.log("JavaScript подключён!");

Теперь открой index.html в browser.

Ты не увидишь message на page.

Это нормально.

console.log() выводит messages в browser console.

Чтобы открыть console:

нажми правой кнопкой на page;
выбери Inspect;
открой tab Console.

Ты должен увидеть:

JavaScript подключён!

Поздравляю.

Твой JavaScript file подключён.

Маленькая победа.

Большой эмоциональный момент.

Фейерверков ещё нет, но console жива.

Используй alert

JavaScript также может показать popup message.

Добавь это в script.js:

alert("Привет из JavaScript!");

Обнови page.

Browser покажет popup.

Это доказывает, что JavaScript работает.

Но будь осторожен с alert().

Он useful для быстрых tests, но annoying на real websites.

Website, который показывает слишком много alerts, похож на человека, который постоянно трогает тебя за плечо и говорит: “смотри, смотри, смотри”.

Во время обучения чаще используй console.log().

Users тебе поблагодарят.

И твой future self тоже.

Измени Text на Page

Теперь сделаем так, чтобы JavaScript изменил page.

Замени code в script.js на это:

const message = document.getElementById("message");

message.textContent = "JavaScript теперь работает!";

Обнови browser.

Paragraph должен измениться с:

JavaScript ещё не работает.

на:

JavaScript теперь работает!

Это твоё первое DOM change.

DOM означает Document Object Model.

Звучит официально и немного страшно.

Но пока думай о DOM как о structure page, которую JavaScript может читать и менять.

JavaScript нашёл paragraph.

Потом JavaScript изменил его text.

Очень simple.

Очень powerful.

Именно здесь webpages начинают ощущаться alive.

Добавь Button Click

Теперь сделаем так, чтобы button что-то делал.

Замени свой script.js на это:

const message = document.getElementById("message");
const button = document.getElementById("changeButton");

button.addEventListener("click", function () {
  message.textContent = "Ты нажал button. JavaScript это заметил.";
});

Обнови page.

Нажми button.

Message должен измениться.

Что произошло?

const message = document.getElementById("message");

Это находит paragraph.

const button = document.getElementById("changeButton");

Это находит button.

button.addEventListener("click", function () {
  message.textContent = "Ты нажал button. JavaScript это заметил.";
});

Это говорит browser:

“Когда user нажмёт button, запусти этот code.”

Это называется event listener.

Events — это вещи, которые происходят на page.

Примеры:

click;
typing;
form submit;
mouse movement;
page load.

JavaScript может слушать эти events и реагировать.

Как очень внимательный waiter, но с меньшим количеством тарелок.

Добавь Немного Style

Мы учим JavaScript, но немного CSS сделает page приятнее.

Обнови index.html так:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Первые Шаги с JavaScript</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }

    button {
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background-color: #1d4ed8;
    }
  </style>
</head>
<body>
  <h1>Первые Шаги с JavaScript</h1>

  <p id="message">JavaScript ещё не работает.</p>

  <button id="changeButton">Изменить Сообщение</button>

  <script src="script.js"></script>
</body>
</html>

Теперь page выглядит clean.

HTML даёт structure.

CSS даёт style.

JavaScript даёт behavior.

Трое друзей наконец работают вместе.

Пока никто не бросил стул.

Хорошее начало.

Запусти с Local Server

Можно открыть HTML file напрямую в browser.

Но можно также запустить simple local server.

Если ты используешь Caddy, запусти это внутри project folder:

caddy file-server --listen :8080

Потом открой:

http://localhost:8080

Это useful, потому что многие real web features лучше работают с local server.

Для этого lesson прямое открытие file достаточно.

Но local server — это хорошая habit.

Professional habit.

Маленькая DevOps energy.

Common Mistakes

Неправильное Имя File

Если твой HTML говорит:

<script src="script.js"></script>

то file должен называться:

script.js

Не:

scripts.js
main.js
Script.js
javascript.js
please-work.js

Имя должно совпадать точно.

Browsers не читают мысли.

К сожалению.

Script Tag в Неправильном Месте

Если поставить script в head, JavaScript может запуститься до того, как HTML elements существуют.

Это может вызвать errors.

Beginner-friendly solution:

<script src="script.js"></script>

Поставь его перед closing body tag.

Позже ты также изучишь defer.

Но сегодня держим beast calm.

Забыть Сохранить Files

Это случается чаще, чем люди признают.

Ты пишешь правильный code.

Обновляешь browser.

Ничего не меняется.

Паника.

Потом понимаешь, что file не был saved.

Классика.

Сначала save.

Потом refresh.

Panic never.

Ну хорошо, almost never.

Не Открывать Console

Console — твой friend.

Serious friend.

Friend, который говорит, когда code wrong.

Открывай её часто.

Читай errors.

Errors — это не insults.

Это clues.

Иногда rude clues, но всё равно clues.

Практика

Создай свою версию page.

Измени:

heading;
paragraph text;
button text;
message, который появляется после click;
colors.

Потом добавь ещё один console.log() message:

console.log("Button готов.");

Попробуй понять, где появляется message.

Чем чаще ты используешь console, тем менее страшной она становится.

Как тёмный подвал.

Всё ещё тёмный.

Но теперь ты знаешь, где выключатель.

Мини-Задание

Добавь второй button.

Первый button должен говорить:

Показать Весёлое Сообщение

Второй button должен говорить:

Показать Серьёзное Сообщение

Когда нажимаешь первый button, покажи:

JavaScript — это весело!

Когда нажимаешь второй button, покажи:

JavaScript требует внимания.

Тебе понадобятся:

два buttons;
два разных IDs;
два event listeners.

Попробуй сам перед тем, как искать help.

Struggle is part of learning.

Не forever.

Только достаточно, чтобы brain проснулся.

Итог

Сегодня ты узнал, что:

JavaScript делает webpages interactive;
JavaScript может работать в browser;
HTML, CSS и JavaScript работают вместе;
script.js можно подключить через script tag;
console.log() выводит messages в console;
alert() показывает popup messages;
document.getElementById() находит HTML elements;
textContent меняет text;
addEventListener() реагирует на user actions;
browser console помогает debug code.

Это начало.

Small code.

Big door.

JavaScript огромный, но не нужно изучить всё today.

Сегодня ты подключил file, изменил text и отреагировал на button click.

Это уже real JavaScript.

Следующий Урок

В следующем lesson мы изучим variables и data types.

Ты познакомишься с let, const, strings, numbers и booleans.

То есть JavaScript начнёт что-то помнить.

Больше, чем некоторые browsers после refresh.