JavaRush /Курсы /Модуль 1: Web Core /Зачем нужен JavaScript

Зачем нужен JavaScript

Модуль 1: Web Core

20 уровень , 0 лекция

Открыта

1. Введение

HTML и CSS — это как бумага и краски: вы можете нарисовать красивую картину, но она никогда не задвигает сама себя в сторону, не моргает, не реагирует на зрителя. Даже если вы добавите 100 кнопок, без JavaScript они останутся просто прямоугольниками с надписью.

JavaScript: Душа и мозги веб-страницы

JavaScript (или просто JS — для друзей) — это язык программирования, который позволяет делать сайты живыми. Вот что может JS:

Реагировать на действия пользователя: клик, ввод текста, движение мышки, нажатие клавиш.
Менять содержимое страницы на лету: показывать/скрывать элементы, менять текст, стили, картинки.
Проверять формы перед отправкой (например, чтобы не отправлять пустое поле "Имя").
Создавать анимации, всплывающие окна, слайдеры, выпадающие меню.
Загружать новые данные без перезагрузки страницы (например, подгружать новые сообщения в чате).
И даже общаться с сервером, чтобы, например, отправить лайк, загрузить новости и так далее.

Без JavaScript сайт — это как холодильник без электричества: вроде красивый, но ничего не делает.

Коротко: кто за что отвечает

Технология	За что отвечает?	Пример
HTML	Структура (что есть на странице)	Кнопки, текст, картинки
CSS	Оформление (как выглядит)	Цвета, шрифты, отступы
JavaScript	Логика, интерактивность (как себя ведёт)	Клик — появляется попап

Как браузер "видит" ваш сайт: роль JavaScript

Когда вы открываете сайт, браузер сначала читает HTML, потом применяет CSS, и только потом — если встретит JavaScript — начинает выполнять JS-код. JavaScript может "вмешиваться" в работу страницы после загрузки: менять, добавлять, удалять элементы, реагировать на действия пользователя.

Аналогия:
HTML — это скелет, CSS — одежда, макияж и причёска, а JavaScript — мышцы и мозг, которые двигают и оживляют всё это великолепие.

2. Как подключить JavaScript к HTML: основные способы

Перед тем как начать писать волшебный код, его нужно "пришить" к вашей странице. Для этого существует тег <script>. Давайте разберёмся, как он работает.

Встраивание кода прямо в HTML-файл

Самый простой способ — написать JS-код прямо внутри HTML-документа, обернув его в тег <script>.


<!DOCTYPE html>
<html>
  <head>
    <title>Мой первый JS</title>
  </head>
  <body>
    <h1>Привет, JavaScript!</h1>
    <script>
      // Ваш первый JS-код
      alert('Добро пожаловать на мой сайт!');
    </script>
  </body>
</html>

Всё, что внутри <script> ... </script>, — это JavaScript.
Такой код выполняется, как только браузер доходит до тега <script> при чтении страницы сверху вниз.

Плюсы:

Быстро, просто, отлично для экспериментов.

Минусы:

Если кода много, HTML-файл превращается в кашу: трудно читать и поддерживать.
Такой код нельзя переиспользовать на других страницах.

Внешний файл: рекомендуемый способ

На практике JavaScript почти всегда выносят в отдельный файл с расширением .js. Это удобно, как если бы вы хранили все свои рецепты в отдельной тетради, а не писали их на стенах кухни.

Как подключить внешний JS-файл:

Создайте файл, например, script.js:


// script.js
alert('Этот код из внешнего файла!');

Подключите его к HTML:


<!DOCTYPE html>
<html>
  <head>
    <title>JS из внешнего файла</title>
  </head>
  <body>
    <h1>Внешний JavaScript</h1>
    <script src="script.js"></script>
  </body>
</html>

Атрибут src указывает путь до файла.
Внутри такого <script src="..."></script> писать код нельзя! Всё должно быть в файле.

Плюсы:

Код отделён от разметки — читать и поддерживать проще.
Один и тот же файл можно подключать на разных страницах.
Браузер может кэшировать файл, сайт будет работать быстрее.

3. Где правильно размещать <script>: head или body?

Скрипт в <head>


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

Такой скрипт начнёт выполняться до того, как страница полностью отобразится.
Если в вашем JS-коде есть обращение к элементам страницы (например, кнопкам), они могут ещё не существовать — будет ошибка.

Скрипт внизу <body>


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

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

Совет:
99% времени размещайте <script> в самом конце <body> — так вы избежите головной боли и неожиданных ошибок.

Спец-атрибуты: defer и async

defer — скрипт загрузится параллельно с HTML, но выполнится только после полной загрузки страницы.
async — скрипт загрузится и выполнится сразу, как только будет готов.


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

Для новичков: пока что не используйте их, но знайте, что такие штуки существуют.

4. Порядок загрузки скриптов: почему это важно

В чём подвох?

Браузер читает HTML сверху вниз. Если он встречает <script>, он сразу начинает загружать и выполнять JS-код. Если этот код обращается к элементу, который ещё не создан, случится ошибка.

Пример неправильного порядка:


<head>
  <script>
    document.getElementById('myBtn').addEventListener('click', function() {
      alert('Кнопка нажата!');
    });
  </script>
</head>
<body>
  <button id="myBtn">Нажми меня</button>
</body>

Ошибка:
"Cannot read properties of null (reading 'addEventListener')" — потому что кнопка ещё не существует, когда скрипт выполняется.

Как делать правильно?

Вариант 1: Переносим <script> в самый низ <body>


<body>
  <button id="myBtn">Нажми меня</button>
  <script>
    document.getElementById('myBtn').onclick = function() {
      alert('Кнопка нажата!');
    };
  </script>
</body>

Вариант 2: Используем внешний файл, тоже внизу


<body>
  <button id="myBtn">Нажми меня</button>
  <script src="script.js"></script>
</body>

Вариант 3: (чуть сложнее) — использовать атрибут defer:


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

5. Практика: первый интерактив на странице

Давайте напишем простую страницу, где кнопка будет менять текст заголовка. Всё по-взрослому: внешний файл, правильный порядок.

HTML:


<!DOCTYPE html>
<html>
  <head>
    <title>Мой первый интерактив</title>
  </head>
  <body>
    <h1 id="mainTitle">Привет, мир!</h1>
    <button id="changeBtn">Поменять заголовок</button>
    <script src="script.js"></script>
  </body>
</html>

script.js:


// Находим элементы по id
const title = document.getElementById('mainTitle');
const btn = document.getElementById('changeBtn');

// Вешаем обработчик на клик по кнопке
btn.onclick = function() {
  title.textContent = 'Заголовок изменён! 🎉';
};

Как это работает?

JS-файл подключён в самом низу, после всех элементов.
Мы находим элементы по id (их уже можно искать — они существуют!).
При клике по кнопке меняем текст заголовка.

Поздравляю! Вы только что сделали первую интерактивную страницу с помощью JavaScript.

Как именно это работает мы как раз и разберем в следующих лекциях.

6. Типичные ошибки новичков при подключении JavaScript

Ошибка №1: Не тот путь к файлу
Если указать неверный путь в src, скрипт просто не загрузится. Проверьте, что файл действительно лежит там, где вы указали.

Ошибка №2: <script src="script.js">alert('hi')</script>
Если используете атрибут src, не пишите код внутри тега — он будет проигнорирован.

Ошибка №3: Подключение скрипта в <head>, а внутри — работа с элементами, которых ещё нет
В результате получаете ошибки типа "Cannot read property ... of null". Если не используете defer, всегда размещайте <script> внизу <body>.

Ошибка №4: Несовпадение имён файлов
Например, файл называется Script.js, а вы пишете script.js. На Windows может сработать, на других ОС — нет. Всегда придерживайтесь единого стиля.

Ошибка №5: Отсутствие расширения .js
Файл должен заканчиваться на .js. Не .txt, не .js.txt, а именно .js.

Ошибка №6: Опечатки в id или названиях переменных
Если в HTML написано id="myBtn", а в JS — getElementById('mybutton'), ничего не найдётся.

Предыдущая Предыдущая лекция

Следующая Следующая лекция

Комментарии

ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ