Зачем нужен JavaScript
До сих пор мы создавали статичные страницы. HTML описывает структуру, CSS делает красиво, но страница не реагирует на действия. Нажимаете кнопку, ничего не происходит. Вводите текст в поле, никто не проверяет. Страница как фотография, смотреть можно, взаимодействовать нельзя.
Посмотрите на дизайн ADC. Видите иконки Telegram и VK справа внизу в футере? Кликаете на них, открываются соцсети. Видите видеоплеер с кнопкой воспроизведения? Кликаете, видео запускается. Это работа JavaScript.
JavaScript это язык программирования, который делает страницу живой. HTML скелет, CSS одежда, JavaScript мышцы и мозг. Без JavaScript страница статична. С ним страница реагирует, двигается, отвечает на действия.
Способ 1: Встроенные скрипты (не используйте)
Как CSS, JavaScript можно подключить тремя способами. Первый встроенные скрипты, inline. Пишете JavaScript прямо в HTML-атрибутах:
<button onclick="alert('Привет!')">Нажми меня</button>Кликаете кнопку, появляется окно с текстом «Привет!». Но это плохой способ. Код смешивается с разметкой, становится нечитаемым. Как встроенные стили, не используйте это.
Способ 2: Внутренние скрипты
Второй способ внутренние скрипты. Пишете JavaScript внутри HTML, в теге <script>:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>ADC</title>
</head>
<body>
<h1>ADC Community</h1>
<button id="myButton">Нажми меня</button>
<script>
document.getElementById("myButton").onclick = function() {
alert("Привет!");
};
</script>
</body>
</html>Код организован лучше, но всё ещё внутри HTML. Это приемлемо для маленьких скриптов, но не для больших проектов.
Способ 3: Внешние скрипты (правильный)
Третий способ внешние скрипты. Создаёте отдельный файл с расширением .js и подключаете к HTML. Это правильный способ. Именно так делают профессиональные сайты.
Создайте новый файл в VS Code. Назовите его script.js. Напишите простой JavaScript:
console.log("Скрипт загружен");
document.addEventListener("DOMContentLoaded", function() {
console.log("Страница готова");
});Сохраните файл. Теперь создайте HTML-файл index.html и подключите JavaScript:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>ADC</title>
</head>
<body>
<h1>ADC Community</h1>
<script src="script.js"></script>
</body>
</html>Тег <script> подключает внешний JavaScript-файл. Атрибут src указывает путь к файлу. Обычно <script> ставят в конец <body>, перед закрывающим тегом. Это позволяет странице загрузиться сначала, а скриптам выполниться потом.
Консоль разработчика
Сохраните и откройте index.html в браузере. Визуально ничего не изменилось. Страница выглядит так же. Но скрипт выполнился. Как это проверить?
Для этого существует консоль разработчика. Developer Console. Это инструмент внутри браузера, где видите сообщения от JavaScript. Как экран диагностики в машине, показывает, что происходит под капотом.
Откройте консоль. В Chrome нажмите F12 или Cmd+Option+J на Mac. В Firefox F12 или Cmd+Shift+K. Появится панель инструментов разработчика. Выберите вкладку Console.
Видите сообщения? «Скрипт загружен» и «Страница готова». Это вывел ваш JavaScript через console.log().
Работа с console.log()
Консоль это ваш главный инструмент отладки. Когда JavaScript не работает, в консоли видите ошибки. Красным цветом, с указанием строки, где проблема. Когда хотите проверить, что происходит в коде, пишете console.log() и смотрите результат в консоли.
Попробуйте добавить больше сообщений в script.js:
console.log("Скрипт загружен");
// Это комментарий в JavaScript
// Комментарии помогают понять, что делает код
document.addEventListener("DOMContentLoaded", function() {
console.log("Страница готова");
console.log("Начинаем работу");
// Проверим, что элементы загрузились
let heading = document.querySelector("h1");
console.log("Заголовок найден:", heading);
});Сохраните. Обновите страницу. Откройте консоль. Видите три сообщения? Последнее показывает элемент h1, который нашёл JavaScript. Это доказывает, что скрипт видит HTML и может с ним работать.
Эксперименты в консоли
Консоль не только показывает сообщения. В ней можете писать JavaScript прямо во время работы страницы. Попробуйте. В консоли напишите:
alert("Привет из консоли!");Нажмите Enter. Появилось окно с сообщением. Напишите:
document.querySelector("h1").style.color = "red";Нажмите Enter. Заголовок стал красным. Вы изменили страницу через консоль. Это временно, обновите страницу, и всё вернётся. Но это мощный инструмент для экспериментов.
Интерактивная кнопка
Создайте файл с интерактивным элементом:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>ADC</title>
</head>
<body>
<h1>ADC Community</h1>
<button id="greetButton">Поприветствовать</button>
<script src="script.js"></script>
</body>
</html>В script.js:
console.log("Скрипт загружен");
document.addEventListener("DOMContentLoaded", function() {
console.log("Страница готова");
let button = document.getElementById("greetButton");
console.log("Кнопка найдена:", button);
button.onclick = function() {
console.log("Кнопка нажата!");
alert("Добро пожаловать в ADC!");
};
});Сохраните. Обновите страницу. Откройте консоль. Видите сообщения о загрузке. Нажмите кнопку. В консоли появилось «Кнопка нажата!». На экране появилось окно с приветствием. JavaScript отреагировал на клик.
Заключение
Запомните главное. JavaScript подключается через <script src="script.js"></script> в конце <body>. Консоль открывается через F12, вкладка Console. console.log() выводит сообщения в консоль. Консоль показывает ошибки и позволяет экспериментировать с кодом.
Всегда держите консоль открытой, когда пишете JavaScript. Видите ошибку красным, читайте её. Браузер подсказывает, где проблема. Не знаете, что происходит в коде, добавьте console.log() в нужном месте. Консоль ваш союзник, а не враг.
Какой способ подключения JavaScript является правильным?
Где рекомендуется размещать тег <script> в HTML?
Для чего используется console.log()?
Введение в JavaScript — справочник на MDN