01. Введение в JavaScript

Что такое JavaScript

JavaScript (JS) — это язык программирования, который делает веб-страницы интерактивными. Без него сайты были бы просто статичными — только текст и картинки.

Если HTML — это скелет страницы, CSS — её внешний вид, то JavaScript — это мозг, который заставляет всё двигаться и реагировать.

Где используется JavaScript

Создание интерактивных элементов (меню, кнопки, формы)
Разработка веб-приложений (YouTube, Gmail, Google Docs)
Создание игр прямо в браузере
Написание серверных приложений через Node.js

Подключение JavaScript к странице

JavaScript можно писать прямо внутри HTML или подключать отдельным файлом.

1. Встроенный скрипт


<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Моя первая страница</title>
</head>
<body>
  <h1>Привет, мир!</h1>
  <script>
    alert('JavaScript работает!');
  </script>
</body>
</html>

Этот код покажет всплывающее окно с сообщением. Именно так большинство разработчиков проверяют, что JS подключён.

2. Подключение внешнего файла

Создайте два файла:

index.html
script.js

index.html:


<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Мой сайт</title>
</head>
<body>
  <h1>Добро пожаловать!</h1>
  <script src='script.js'></script>
</body>
</html>

script.js:


alert('Привет из внешнего файла!');

При открытии страницы браузер выполнит код из script.js.

Первый код в консоли

Попробуйте открыть любую страницу, нажать F12 (или Ctrl + Shift + I) → вкладка Console, и ввести:


console.log('JavaScript работает!');

Вы увидите вывод в консоли разработчика.

Основные возможности JavaScript

Менять содержимое страницы (DOM).
Реагировать на действия пользователя (события).
Работать с данными (переменные, функции, массивы, объекты).
Создавать динамику — анимации, проверки форм и многое другое.

Мини-практика

Создайте простую кнопку, которая реагирует на клик.


<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>JS кнопка</title>
</head>
<body>
  <button onclick='sayHello()'>Нажми меня</button>
  <script>
    function sayHello() {
      alert('Привет! Вы нажали на кнопку.');
    }
  </script>
</body>
</html>

Теперь при клике на кнопку вы увидите сообщение. Это и есть взаимодействие JavaScript с пользователем.

Советы новичкам

Не бойтесь ошибок — они часть обучения. Читайте текст ошибки в консоли.
Пробуйте менять код и смотреть, что изменилось.
Сохраняйте простые примеры — они пригодятся позже.
Используйте сайт MDN JavaScript как главный справочник.

Итоги урока

Вы узнали:

Что такое JavaScript и зачем он нужен.
Как подключить JS к HTML-странице.
Как выводить сообщения и писать первые команды.
Как открыть консоль разработчика.