12.1 Тег <script>
JavaScript — это мощный язык программирования, который используется для создания динамичных и интерактивных веб-страниц. Он позволяет реагировать на действия пользователя, изменять содержимое веб-страниц, взаимодействовать с серверами и многими другими способами повышать удовольствие пользователя от взаимодействия с сайтом.
Тег <script> используется для встраивания JavaScript-кода в HTML-документ. Он может содержать либо встроенный код, либо ссылку на внешний файл.
Встраивание JavaScript-кода напрямую в HTML-документ:
<!DOCTYPE html>
<html lang="ru">
<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-кода, который показывает всплывающее окно с сообщением "Привет, мир!"
12.2 Подключаем скрипт
Иногда лучше хранить JavaScript-код в отдельном файле. Это улучшает организацию кода и его повторное использование.
Подключение внешнего файла JavaScript:
<!DOCTYPE html>
<html lang="ru">
<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>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Знакомство с JavaScript</title>
<script src="hello-world.js" defer></script>
</head>
<body>
<h1>Добро пожаловать на мой сайт!</h1>
</body>
</html>
Этот html-файл просит браузер подключить к нему JavaScript-файл, который называется hello-world.js, и может содержать тот же код, что и в примере выше:
//hello-world.js:
// Ваш JavaScript-код здесь
alert('Привет, мир!');
Атрибут defer используется для того, чтобы указать браузеру выполнять скрипт после того, как весь HTML-документ будет полностью загружен и разобран.
12.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: свойство, которое изменяет цвет текста элемента
12.4 Пишем в консоль
С помощью JavaScript можно писать текст прямо внутрь HTML-страницы, отображать его в диалоговые окна, а также писать в консоль.
Консоль разработчика — это крутой инструмент для отладки и тестирования JavaScript-кода. Команда console.log() позволяет выводить информацию в консоль браузера.
Пример использования console.log():
<!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>
console.log('Привет, мир!');
console.log('Это сообщение будет выведено в консоль браузера.');
</script>
</body>
</html>
Так как мы тут с вами Web-разработчики, то очевидно, что консоль разработчика внутри браузера предназначена именно для нас. Давайте изучим ее подробнее.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ