Введение
В этом уроке мы научимся различным способам подключения JavaScript к HTML и напишем нашу первую программу, которая выводит сообщение в консоль.
Шаг 1: Создание HTML и JavaScript файлов
Открытие Visual Studio Code
- Запустите Visual Studio Code на своем компьютере.
- Создайте новую папку для вашего проекта, например,
hello-world-project. - Откройте эту папку в Visual Studio Code.
Создание HTML файла
- В Visual Studio Code, в панели слева, нажмите правой кнопкой мыши на вашей папке проекта и выберите «New File».
- Назовите файл
index.htmlи нажмите Enter. - В файле
index.htmlнапишите следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript и HTML</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Шаг 2: Встраивание JavaScript внутри тега <script> в HTML
Добавление JavaScript кода внутри HTML файла
- Откройте файл
index.htmlв Visual Studio Code. - Добавьте следующий код внутри тега
<body>после тега<h1>:
<script>
console.log("Hello, World!");
</script>
- Итоговый код файла
index.htmlдолжен выглядеть так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript и HTML</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log("Hello, World!");
</script>
</body>
</html>
Открытие HTML файла в браузере
- Сохраните файл
index.html. - Откройте папку с вашим проектом на компьютере и дважды щелкните на
index.html, чтобы открыть его в браузере. - Откройте инструменты разработчика в браузере (обычно с помощью F12 или Ctrl+Shift+I).
- Перейдите на вкладку «Console» и убедитесь, что вы видите сообщение «Hello, World!».
Шаг 3: Подключение внешнего JavaScript файла с использованием тега <script src="script.js"></script>
Создание внешнего JavaScript файла
- В Visual Studio Code, в панели слева, нажмите правой кнопкой мыши на вашей папке проекта и выберите «New File».
- Назовите файл
script.jsи нажмите Enter. - В файле
script.jsнапишите следующий код:
console.log("Hello, World!");
Подключение внешнего файла в HTML
- Откройте файл
index.htmlв Visual Studio Code. - Замените встроенный JavaScript код на следующий код:
<script src="script.js"></script>
- Итоговый код файла
index.htmlдолжен выглядеть так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript и HTML</title>
</head>
<body>
<h1>Hello, World!</h1>
<script src="script.js"></script>
</body>
</html>
Открытие HTML файла в браузере
- Сохраните файлы
index.htmlиscript.js. - Обновите страницу
index.htmlв браузере. - Убедитесь, что в консоли вы видите сообщение «Hello, World!» от внешнего файла
script.js.
Заключение
Мы рассмотрели различные способы подключения JavaScript к HTML и написали нашу первую программу. Эти знания помогут вам лучше понимать, как структурировать ваши проекты и эффективно использовать JavaScript в веб-разработке.
Контрольные вопросы
Что такое тег <script> и как его используют в HTML?
- Тег для стилизации текста
- Тег для подключения JavaScript к HTML документу
- Тег для добавления изображений
- Тег для создания таблиц
Какие преимущества есть у подключения внешнего JavaScript файла по сравнению с написанием кода непосредственно в HTML?
- Упрощает обновление кода и повторное использование
- Увеличивает размер HTML файла
- Уменьшает производительность загрузки страницы
- Требует специального браузера для выполнения
Опишите процесс подключения внешнего JavaScript файла к HTML документу.
- Использование тега
<link src="script.js"> - Использование тега
<meta src="script.js"> - Использование тега
<script src="script.js"></script> - Использование тега
<div src="script.js">
Какие инструменты разработчика помогают просматривать вывод консоли в браузере?
- MS Word
- Блокнот
- Инструменты разработчика в браузере (DevTools)
- Проводник Windows
Что произойдет, если подключить JavaScript файл, который не существует? Как это можно обнаружить?
- Ничего не произойдет
- Браузер выдаст ошибку, и это можно увидеть в консоли разработчика
- Страница полностью перестанет загружаться
- Браузер автоматически создаст пустой файл
Почему важно использовать консоль для отладки кода? Приведите примеры команд, которые можно использовать в консоли.
- Для изменения стиля страницы
- Для мониторинга сетевых запросов
- Для вывода отладочной информации и выявления ошибок
- Для управления файлами на сервере
