JavaScript добавляет глоток свежего воздуха в статичный HTML-файл. Вы можете внедрить JavaScript в HTML напрямую или в виде внешнего файла. Мы покажем вам преимущества и недостатки вставки JavaScript в HTML.
Зачем нужно встраивать JavaScript в HTML?
HTML, CSS и JavaScript — это три основных столпа современной всемирной паутины. Если вы хотите создать современный интерактивный веб-сайт, вам вряд ли удастся избежать оживления текстовых файлов HTML путем внедрения CSS и JavaScript. Файлы HTML — это обычные текстовые документы для создания и структурирования содержимого сайта. HTML легко изучить, и вы можете обойтись без форматирования. Он также удобен в использовании благодаря бесплатным редакторам кода, таким как Notepad++ или Kate. С другой стороны, творческий подход обеспечивают текстовые файлы CSS, встроенные в HTML, которые определяют макет, цветовую схему, шрифты и другие элементы дизайна веб-сайта.
Сайт становится по-настоящему интерактивным только с элементами JavaScript, которые добавляют динамическое поведение к содержимому. Файлы JavaScript, встроенные в HTML, например, позволяют активно изменять содержимое сайта, например, автоматически отображать дату, раскрашивать в зависимости от дня или автоматически отображать сообщения при посещении сайта. При включенном JavaScript содержимое JavaScript может выполняться непосредственно в большинстве браузеров. Это экономит вычислительную мощность и повышает скорость загрузки интерактивного содержимого и анимации на сайте.
Какие существуют варианты встраивания JavaScript?
Вы можете отметить или сослаться на элементы JavaScript в исходном коде HTML как на элементы сценария следующим образом.
<script> <script>
JavaScript-ElementЭлементы сценариев обычно встраиваются в область тела или головы HTML-документа.
В зависимости от способа включения JavaScript в HTML можно выбрать один из следующих вариантов:
- Заметить JavaScript непосредственно в HTML-странице: Прямые нотации в HTML выполняются в элементе head и обеспечивают максимально быструю загрузку файлов JavaScript с помощью прямых нотаций. Недостатком является то, что прямые пометки должны быть сделаны для каждого HTML-документа на сайте для загрузки содержимого.
- Ссылка на JavaScript как на внешний файл в HTML: Встраивание внешнего файла JavaScript приводит к ссылке на файл JavaScript в тексте HTML. Встраивание в качестве ссылки позволяет загружать внешние файлы JavaScript на нескольких страницах без необходимости указывать их непосредственно в виде элементов JavaScript в HTML-файлах.
Включение элементов JavaScript особенно просто при использовании специальных фреймворков JavaScript. JS-фреймворки объединяют предопределенные объекты и утверждения JavaScript и облегчают программирование.
Как внедрить JavaScript в HTML: практические примеры
Вы можете выбрать один из двух различных методов включения JavaScript. Мы познакомим вас с обоими.
Встраивание JavaScript в HTML напрямую
Чтобы элементы JavaScript загружались как можно быстрее, поместите элемент сценария в HTML head или body. В новых браузерах достаточно относительно простого исходного кода JS. В следующем примере сообщение «Привет, друг» написано на сайте с помощью интеграции JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript: Hello Friend</title>
<script>
alert(“Hello Friend!“);
</script>
</head>
<body>
<p>This website only displays a message box.</p>
</body>
</html>Сложные визуализации, анимации или интерактивные элементы также могут быть отмечены непосредственно в HTML. Преимущество прямого встраивания заключается в том, что элементы JavaScript редактируются непосредственно в HTML-файле. Недостатком является то, что функции JavaScript приходится отдельно указывать в исходном коде каждого HTML-документа. Это приводит к увеличению усилий при сопровождении исходного кода.
Встраивание JavaScript во внешний файл
Более эффективно и более распространено записывать JavaScript как внешний файл и ссылаться на него в HTML-документе. Таким образом, JavaScript может быть включен в HTML, как если бы файл был записан непосредственно в исходном коде.
В HTML-документе это выглядит следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Include external JavaScript file</title>
<script src="filename.js"></script>
</head>
</body>Встраивание JavaScript в качестве внешнего файла имеет то преимущество, что ссылается только ссылка на внешний файл. Таким образом, все нужные HTML-страницы с соответствующей ссылкой могут получить доступ к файлу и загрузить его быстрее. Кроме того, исходный код легче поддерживать, поскольку это не несколько HTML-документов, а только один файл JavaScript.
Элементы JavaScript были своего рода плюс-ультра для интерактивного контента на веб-сайтах и в браузерах. Однако, поскольку даже JavaScript не всегда загружается достаточно быстро, открытый стандарт WebAssembly сейчас все чаще используется в качестве дополнения к JavaScript.
Особенности в различных версиях HTML
При встраивании JavaScript в HTML следует учитывать, что старые браузеры требуют более подробного исходного кода. Вместо более простого тега HTML 5 <script>…</script>, включение JavaScript будет выглядеть следующим образом:
<script type="text/javascript">
JavaScript-Element
</script>Если вы хотите отобразить сообщение-заглушку для посетителей, у которых отключен JavaScript, используйте следующий тег noscript:
<head>
<script>
JavaScript-Element
</script>
<noscript>
Please enable JavaScript to see the JavaScript element.
</noscript>
</head>