Введение
JavaScript не нуждается в представлении. Это один из самых популярных языков программирования для веб-разработки. Он работает аналогично HTML и CSS. Все эти языки помогают проектировать и разрабатывать веб-приложения и программы.
Так чем же конкретно полезен JavaScript? С помощью JavaScript вы можете сделать свои веб-приложения и веб-страницы весьма интерактивными. В современной сфере нет места самоуспокоенности. Вам нужно привлечь внимание зрителей в первые несколько секунд и удерживать их интерес. Нет сомнений, что интересный и адаптивный веб-дизайн — один из лучших способов сделать это. К счастью, большинство браузеров поддерживают JavaScript. Его можно запустить в вашем браузере с помощью встроенных движков.
Добавление JavaScript в HTML
Если вы хотите использовать файлы JavaScript для своего веб-приложения, вам нужно запускать их параллельно с HTML-разметкой. Существует два способа добавления JavaScript в HTML. Один из подходов — сделать это встроенным (inline) способом внутри HTML-документа. Другой способ — добавить его в виде отдельного файла. Этот файл будет загружаться вместе с HTML-документом.
В этом руководстве мы подробно рассмотрим, как можно добавить JavaScript в HTML с помощью этих двух методов.
Как добавить JavaScript в HTML-документы встроенным способом
Сначала мы посмотрим, как можно добавить JavaScript в HTML-документ встроенным способом. Для этого вам нужно использовать специальный HTML-тег. Это <script>. Этот тег оборачивает код JavaScript. Вы можете разместить этот тег в любом месте вашей HTML-разметки. Место его размещения зависит от того, когда вы хотите загрузить JavaScript.
Например, вы можете поместить его в раздел <head>, раздел <body> или даже после закрывающего тега </body>. Если вы хотите держать JavaScript подальше от основного содержимого HTML-кода, лучше поместить тег в раздел <head>. Он будет содержать код JavaScript. С другой стороны, вы можете захотеть, чтобы ваш код JavaScript выполнялся внутри макета вашей веб-страницы. В таком случае вам следует поместить тег в раздел <body>. Вы сделаете это, если, скажем, используете document.write для генерации контента.
Лучший способ понять это — рассмотреть пример с кодом. Представьте следующий пустой HTML-документ. Заголовок этого документа в браузере — Today’s Date:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> </html> |
Как видите, здесь нет никаких признаков JavaScript. На данный момент документ содержит только HTML-разметку. Теперь мы хотели бы добавить немного кода JavaScript встроенным способом, чтобы он загружался и выполнялся одновременно. Рассмотрим следующий фрагмент кода JavaScript:
|
1 2 |
let d = new Date(); alert("Today's date is " + d); |
Согласно приведенному выше коду, мы настраиваем нашу веб-страницу так, чтобы она показывала всплывающее окно с сегодняшней датой. Поэтому независимо от того, когда посетитель открывает сайт, на странице будет отображаться текущая дата.
Теперь, чтобы добавить этот фрагмент кода JavaScript в HTML-документ, мы будем использовать тег <script>. Прежде всего, вам нужно добавить код JavaScript между тегами <head>. Это сообщает веб-странице, что данный конкретный код должен загружаться перед остальным содержимым страницы. Вы можете добавить код под тегами <title>. Вот как это можно сделать:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Сегодняшняя дата</title> <script> let d = new Date(); alert("Сегодняшняя дата: " + d); </script> </head> <body> </body> </html> |
Ваш код JavaScript добавлен. Ваша веб-страница запустит и загрузит этот скрипт перед остальной частью страницы. При запуске сайта вы получите всплывающее окно с текущей датой, примерно такое:
Именно так вы можете добавить код в раздел <head> HTML-документа. Альтернативный вариант — добавить скрипт внутри или за пределами тегов <body>. Как вы увидите в примере ниже, мы добавим этот фрагмент кода после раздела <head>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Сегодняшняя дата</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>Сегодняшняя дата: " + d + "</h1>" </script> </body> </html> |
В результате этого изменения при перезагрузке страницы вы увидите следующее:
Как добавить JavaScript в HTML с помощью отдельного файла JavaScript
Небольшие скрипты JavaScript отлично работают с HTML-файлами. Это связано с тем, что они полностью выполняются на одной странице или даже меньше. Если вы работаете с более крупными скриптами, которые охватывают несколько страниц, файл может стать очень сложным для понимания. Вот почему вам может потребоваться добавить его в виде отдельного файла JavaScript. Этот файл будет загружаться одновременно с HTML-документом.
В этом разделе мы обсудим, как можно добавить JavaScript в HTML с помощью отдельного файла. Код обычно размещается в одном или нескольких файлах .js. HTML-документ будет ссылаться на эти файлы, как на любой другой внешний ресурс. Причин, по которым вы можете захотеть использовать отдельный файл JavaScript, множество. Главным образом, это делает код гораздо более простым для чтения и понимания. Не говоря уже о том, что отдельные файлы позволяют кэшированным страницам загружаться быстрее, а также их относительно проще поддерживать.
Чтобы воспользоваться этими преимуществами, вам нужно знать, как связать их друг с другом — файл JavaScript и HTML-документ. Для наглядности мы возьмем в качестве примера небольшой веб-проект. Этот предполагаемый проект содержит основной файл index.html в корне, style.css в каталоге css/ и script.js в каталоге js/. Вот наш небольшой проект:
|
1 2 3 4 5 6 7 8 9 10 11 |
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
Для нашей HTML-разметки мы будем использовать документ, который использовали ранее:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Сегодняшняя дата</title> </head> <body> </body> </html> |
Теперь, когда у нас есть два документа, мы можем начать их связывание. Нам нужно добавить код JavaScript, связанный с датой, в файл script.js. Вы добавите его в виде заголовка <h1> следующим образом:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>Сегодняшняя дата: " + d + "</h1>" |
Чтобы связать код с HTML-документом, вам нужно добавить ссылку на скрипт. Ссылка должна находиться либо внутри, либо под разделом <body> HTML-шаблона. Вот код, который вы будете использовать здесь:
|
1 |
<script src="js/script.js"></script> |
Как видите, мы используем тег <script>. Этот тег указывает на файл script.js, который находится в каталоге js/ проекта. Вот как код будет выглядеть в HTML-документе:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Сегодняшняя дата</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
При желании вы можете внесить некоторые стилистические изменения, чтобы украсить свою страницу. Например, давайте добавим фоновый цвет для заголовка <h1>. Мы сделаем это редактирование в файле style.css:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Поскольку изменения должны отображаться в заголовке, мы сошлемся на них в разделе <head> HTML-документа. Вот как вы сделаете ссылку на этот CSS-файл:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Сегодняшняя дата</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Теперь, когда мы сделали необходимые ссылки, вы можете визуализировать изменения. Загрузите index.html в свой браузер, и вы увидите страницу, подобную этой:
Если вы захотите обновить код, вы сможете редактировать все свои страницы из одного места. Это значительно упрощает обслуживание веб-страниц. В этом и заключается преимущество использования отдельного файла для ваших скриптов JavaScript.
Заключение
Надеемся, что это руководство помогло вам узнать больше о процессе добавления JavaScript в HTML. Мы рассмотрели, как сделать это непосредственно внутри HTML-документа, а также как добавить его в виде файла .js. Теперь, когда вы знаете основы, вы можете делать гораздо больше с помощью JavaScript в HTML.
Вот несколько ресурсов из нашего блога, которые помогут вам в дальнейшем использовании JavaScript:
- Если вы создаете собственное веб-приложение, ознакомьтесь с нашим руководством по выбору оптимальной конфигурации сервера.
- Если вы хотите узнать, как настроить блог с помощью Ghost, ознакомьтесь с этим руководством.
- Ознакомьтесь с этим руководством, чтобы узнать, как установить Node.js на Ubuntu 18.04.
Приятной работы!
Комментарии
Комментариев пока нет. Будьте первым.