1. Тег <script>
Прежде, чем мы погрузимся в детальное изучение HTML, хотелось бы вас познакомить еще с одной крутой штукой — языком JavaScript.
JavaScript — это мощный язык программирования, который используется для создания динамичных и интерактивных веб-страниц. Он позволяет реагировать на действия пользователя, изменять содержимое веб-страниц, взаимодействовать с серверами и многими другими способами повышать удовольствие пользователя от взаимодействия с сайтом.
Сейчас мы не будем изучать JavaScript, но иногда в примерах я все-таки его буду добавлять, поэтому давайте расскажу, как JavaScript встраивается в HTML-документ.
Тег <script>; используется для встраивания JavaScript-кода в HTML-документ.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Знакомство с JavaScript</title>
</head>
<body>
<h1>Добро пожаловать на мой сайт!</h1>
<script>
// Ваш JavaScript-код здесь alert('Привет, мир!');
</script>
</body>
</html>
В этом примере используется тег <script> для встраивания простого JavaScript-кода, который показывает всплывающее окно с сообщением "Привет, мир!".
2. Подключаем скрипт
Иногда лучше хранить JavaScript-код в отдельном файле. Это улучшает организацию кода и его повторное использование. Для подключения JavaScript-файла также используется тег <script>, а с помощью атрибута src можно задать имя JavaScript — файла.
Подключение внешнего файла JavaScript:
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Знакомство с JavaScript</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Добро пожаловать на мой сайт!</h1>
</body>
</html>
Этот html-файл просит браузер подключить к нему JavaScript-файл, который называется script.js, и может содержать тот же код, что и в примере выше:
//script.js:
// Ваш JavaScript-код здесь
alert('Привет, мир!');
Атрибут defer используется для того, чтобы указать браузеру выполнять скрипт после того, как весь HTML-документ будет полностью загружен и отображен.
3. Inline-код
Помните, как мы писали css-стили прямо внутри атрибута style у элемента?
<p style="color:red"> Красный</p>
Точно так же можно писать и JavaScript-код.
Допустим, мы хотим, чтобы элемент при клике на него менял цвет на синий. Тогда нам нужно написать такой код:
<p style="color:red" onclick="this.style.color = 'blue';">Красный</p>
Зеленым цветом выделен JavaScript-код, который исполнится, если пользователь кликнет по элементу <p>. Просто,не правда ли?
-
onclick: Атрибут HTML, который указывает функцию, выполняемую при клике на элемент. this: Ссылка на элемент, на который был совершён клик.-
style.color: CSS-свойство, изменяющее цвет текста элемента.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ