Объясняется как добавить JavaScript на веб-страницу: внутренним скриптом, внешним файлом и инлайн. Примеры кода помогут новичкам освоить основы работы с JavaScript.
JavaScript – это язык программирования, который позволяет добавлять интерактивность к веб-страницам. Он может использоваться для выполнения различных задач: от простого изменения текста до сложных анимаций и взаимодействий с пользователем. Для того чтобы добавить JavaScript-код на страницу, существует несколько способов.
12.1. Внутренний скрипт
Этот способ подразумевает размещение JavaScript-кода непосредственно внутри HTML-документа. Скрипы можно разместить в любом месте документа, будь то внутри тега <head>, <body> или даже внутри другого элемента.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Внутренний скрипт</title>
</head>
<body>
<h1>Это пример внутреннего скрипта</h1>
<!-- Здесь размещаем JavaScript -->
<script>
// Функция для вывода приветствия
function sayHello() {
alert("Привет!");
}
// Вызываем функцию при загрузке страницы
window.onload = sayHello;
</script>
</body>
</html>
Комментарий:
- Мы добавили скрипт прямо внутрь тега
<body>. Этот код будет выполнен сразу после загрузки страницы. - Внутри функции
sayHelloиспользуется методalert, который выводит сообщение «Привет!» в виде всплывающего окна. - При помощи события
window.onloadмы вызываем нашу функциюsayHelloсразу после полной загрузки страницы.
12.2. Внешний js-файл
Для улучшения структуры проекта и упрощения поддержки кода рекомендуется выносить JavaScript в отдельные файлы. Это также улучшает кэширование браузера, так как внешние файлы могут загружаться быстрее за счет их повторного использования. Внешние JavaScript-файлы можно подключать в любом месте HTML-документа. Однако чаще всего их размещают либо в заголовочной части <head>, либо перед закрывающим тегом </body>. Размещение перед </body> может улучшить производительность, так как браузер сначала отрендерит всю разметку, прежде чем начнет выполнять скрипты.
Пример:
Создаем внешний файл script.js со следующим содержимым:
// script.js
function changeText() {
const element = document.getElementById('my-text');
if (element) {
element.textContent = 'Измененный текст!';
}
}
Теперь подключим этот файл в нашем HTML-документе:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Внешний скрипт</title>
</head>
<body>
<h1 id="my-text">Оригинальный текст</h1>
<button onclick="changeText()">Изменить текст</button>
<!-- Подключаем внешний JavaScript-файл -->
<script src="script.js"></script>
</body>
</html>
Комментарий:
- Мы создали файл
script.js, где находится функцияchangeText, которая изменяет текст элемента с идентификаторомmy-text. - В HTML-документе мы подключили этот файл через тег
<script>с атрибутомsrc, указав путь к файлу. - Кнопка с обработчиком
onclickвызывает функциюchangeText, когда пользователь нажимает на нее.
12.3. Инлайновый JavaScript
Иногда бывает удобно использовать небольшие фрагменты JavaScript-кода прямо в HTML-элементах. Это называется инлайновой обработкой событий.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Инлайновый JavaScript</title>
</head>
<body>
<h1>Пример инлайнового JavaScript</h1>
<button onclick="alert('Вы нажали кнопку!')">Нажмите меня!</button>
</body>
</html>
Комментарий:
- В этом примере мы использовали инлайновый JavaScript-код в атрибуте
onclickкнопки. Когда пользователь нажимает на эту кнопку, появляется окно с сообщением «Вы нажали кнопку!».
