How to Add JavaScript to HTML
In this tutorial, we’ll show you how to add JavaScript to HTML. The beginning will include a short introduction to JavaScript, while the rest of the guide will focus on various ways of adding JavaScript to HTML.
If you want to display static content, for example, a set of images, then HTML can do the job for you. However, static pages are slowly becoming a thing of the past. Most of the content today is interactive and includes flashy slideshows, forms, and menus. They enhance user experience and add dynamicity to the website.
This is achieved by scripting languages and JavaScript is one of the most famous in this regard. It lets developers make websites that interact with the user and vice versa. Even though there are many other languages available, none of them is as popular as JavaScript. In order to utilize it to the greatest potential, it’s used in tandem with HTML.
How to Add JavaScript to HTML
There are two ways to add JavaScript to HTML and make them work together. Now that we have talked about JavaScript and have seen what some of its advantages can be, let’s take a look at some of the ways we can link JavaScript to HTML.
How to Add JavaScript Directly to a HTML File
The first way to add JavaScript to HTML is a direct one. You can do so by using the <script></script> tag that should encompass all the JS code you write. JS code can be added:
- between the <head> tags
- between the <body> tags
Depending on where you add the code the JavaScript in your HTML file, the loading will differ. The recommended practice is to add it in the <head> section so that it stays separated from the actual content of your HTML file. But placing it in the <body> can improve loading speed, as the actual website content will be loaded quicker, and only then the JavaScript will be parsed. For this example, let’s take a look at the following HTML file that is supposed to show the current time:
Right now, the above code doesn’t involve JavaScript and hence can’t show the actual time. We can add the following code to make sure it displays the correct time:
We will surround this code by <script> and </script> tags and put it in the head of the HTML code to ensure that whenever the page loads, an alert is generated that shows the current time to the user. Here’s how the HTML file will look after we add the code:
If you want to display the time within the body of the page, you will have to include the script within the <body> tags of the HTML page. Here’s how the code will look when you do so:
Here’s what the final result would look like:
How to Add JavaScript Code to a Separate File
Sometimes adding JavaScript to HTML directly doesn’t look like the best way to go about it. Mostly because some JS scripts need to be used on multiple pages, therefore it’s best to keep JavaScript code in separate files. This is why the more acceptable way to add JavaScript to HTML is via external file importing. These files can be referenced from within the HTML documents, just like we reference CSS documents. Some of the benefits of adding JS code in separate files are:
- When HTML code and JavaScript code is separated, the design principle of separation of concerns is met and it makes everything a lot more sustainable and reusable.
- Code readability and maintenance is made a lot easier.
- Cached JavaScript files improve overall website performance by decreasing the time taken by pages to load.
We can reference the JavaScript file within HTML like this:
The contents of the myscript.js file will be:
Important! Here it’s assumed that the myscript.js file is present in the same directory as the HTML file.
JavaScript Example to Validate an Email Address
JavaScript powers your application by helping you validate user input at the client side. One of the most important user inputs that often need validation is email addresses. This JavaScript function can help you validate the entered email address before sending it to the server:
In order to attach this function to a form input, you can use the following code:
Here’s the result that you would get after combining all the ingredients together in a HTML file:
And if the validation is incorrect, the result will differ:
Congratulations! You have learned how to add JavaScript to HTML with a few basic examples.
Advantages of JavaScript
JavaScript was first known as LiveScript. But because Java was the talk of the town (the world really), Netscape deemed it right to rename it to JavaScript. Its first appearance dates back to 1995 within Netscape 2.0. Here are some of the best advantages of using JavaScript:
Minimalized Server Interaction
It’s a well-known fact that if you want to optimize the performance of a website, the best way is to reduce the communication with the server. JavaScript helps in this regard by validating user input at the client-side. It only sends requests to the server after running the initial validation checks. As a result, resource usage and amount of requests to the server reduces significantly.
Richer, User-Friendly Interfaces
By using JavaScript, you can create interactive client-side interfaces. For example adding sliders, slideshows, mouse roll-over effects, drag-and-drop features and so on.
Immediate Feedback to the User
By using JavaScript, you can ensure that users get an immediate response. For example, let’s imagine a user has filled a form and left one field empty. Without JavaScript validation, they will have to wait for the page to reload only to realize that they left an empty field. However, with JavaScript, they will be alerted instantly.
Easy Debugging
JavaScript is an interpreted language, which means that written code gets deciphered line by line. In case any errors pop up, you will get the exact line number where the problem lies.
Conclusion
In this article, we talked about the two different ways to add JavaScript in HTML code and once you get a hang of things, the possibilities of doing great things by using the two programming languages are endless. JavaScript can be used in combination with HTML to power modern web applications that are intuitive, interactive and user-friendly. By using simple client-side validation, it reduces server traffic and improves the overall efficiency of the website.
Domantas leads the content and SEO teams forward with fresh ideas and out of the box approaches. Armed with extensive SEO and marketing knowledge, he aims to spread the word of Hostinger to every corner of the world. During his free time, Domantas likes to hone his web development skills and travel to exotic places.
Where to put a script tag — into head or body end?
Let’s make simple tests to figure out what is the best place for a script tag.
In a browser JavaScript can be used to do many things, but usually the primary task of JavaScript is generation of interactive content or, in other words, dynamic construction of the DOM. Considering that, what place in a HTML file is most suitable for a script tag? There are two reasonable options…
Добавление кода JavaScript в HTML
JavaScript (JS) – это язык программирования, используемый в веб-разработке. Наряду с HTML и CSS JavaScript является одной из основных технологий и используется для создания интерактивных веб-страниц и приложений. Современные веб-браузеры, которые придерживаются базовых стандартов отображения, поддерживают JavaScript через встроенные модули и не требуют дополнительных плагинов.
Создавая файлы приложения, JavaScript необходимо загружать и запускать вместе с разметкой HTML. Это можно сделать либо внутри HTML-документа, либо в отдельном файле, который браузер загрузит вместе с HTML-документом.
Данный манул научит внедрять JavaScript в HTML-документы и отдельные файлы программы.
Добавление JavaScript в HTML-документ
Чтобы вставить JavaScript в HTML-документ, используйте специальный тег <script>, который охватывает код JavaScript.
Тег <script> можно вставить в раздел <head> и в <body> или после закрывающего тега </body> в зависимости от того, когда нужно загрузить JavaScript.
Как правило, код JavaScript размещается внутри раздела <head>, что позволяет отделить его от основного содержимого документа HTML.
Однако если скрипт должен запускаться в определенной точке разметки страницы, его нужно размещать именно в этой точке. Обычно она находится внутри раздела <body>.
Рассмотрим следующий HTML-документ с заголовком Today’s Date.
На данный момент этот файл содержит только разметку HTML. Предположим, в документ нужно добавить следующий код JavaScript:
let d = new Date();
alert(«Today’s date is » + d);
Этот код позволит веб-странице отображать сообщение с текущей датой независимо от того, когда пользователь загружает сайт.
Для этого нужно добавить тег <script> и поместить в него код JavaScript.
Добавьте код JavaScript в раздел <head>. В этом случае браузер будет обрабатывать JavaScript прежде остального содержимого страницы. Добавьте следующий код JavaScript в теги <title>.
<!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>
<script>
let d = new Date();
alert(«Today’s date is » + d);
</script>
</head>
<body>
</body>
</html>
Загрузите страницу. На ней появится следующее предупреждение:
Today’s date is Thu Jun 29 2017 10:46:47 GMT-0400 (EDT)
Попробуйте добавить этот код в раздел <body> и вынести его за этот раздел. Поскольку этот HTML-документ довольно прост, это не особо повлияет на отображение страницы.
Чтобы дата отображалась не в отдельном предупреждении, а прямо на странице, нужно добавить скрипт в раздел <body>.
<!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>
<script>
let d = new Date();
document.body.innerHTML = «<h1>Today’s date is » + d + «</h1>»
</script>
</body>
</html>
Загрузите эту страницу в браузере. Теперь дата будет указана прямо в теле страницы.
Today’s date is Thu Jun 29 2017 14:04:45 GMT-0400 (EDT)
Небольшие скрипты и скрипты для одной страницы будут хорошо работать внутри HTML-документа. Но объемные скрипты, предназначенные для нескольких страниц, помещать в документ не очень эффективно. Такие скрипты будут лучше обрабатываться в отдельных файлах.
Отдельные файлы JavaScript
Большие скрипты JavaScript помещают в специальные файлы js, а затем ссылаются на них внутри HTML-документа. Подобный механизм используется в CSS.
Преимущества такого подхода:
- Разметку HTML и скрипты JavaScript проще читать по отдельности.
- Такой код проще поддерживать.
- Если JavaScript кэшируется, страницы будут быстрее загружаться.
Чтобы научиться связывать файлы JavaScript с HTML, создайте небольшой тестовый проект. Он будет состоять из таких файлов:
- script.js в каталоге js/,
- style.css в каталоге css/,
- главный файл index.html в корневом каталоге проекта.
project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html
Начать можно с файла index.html и шаблона, который мы рассмотрели в предыдущем разделе.
Затем перейдите к файлу script.js, в котором хранится скрипт JavaScript. Он будет отображать заголовок <h1>.
let d = new Date();
document.body.innerHTML = «<h1>Today’s date is » + d + «</h1>»
Добавьте ссылку на этот скрипт в раздел <body> или под ним:
Тег <script> указывает на скрипт script.js в каталоге js/.
Теперь главный документ index.html будет выглядеть так:
Теперь отредактируйте файл style.css и укажите в нем цвет фона и стиль заголовка <h1>.
body <
background-color: #0080ff;
>
h1 <
color: #fff;
font-family: Arial, Helvetica, sans-serif;
>
После этого нужно сослаться на файл CSS в разделе <head> HTML-документа index.html:
<!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>
<link rel=»stylesheet» href=»css/style.css»>
</head>
<body>
</body>
<script src=»https://www.8host.com/blog/dobavlenie-koda-javascript-v-html/js/script.js»></script>
</html>
Попробуйте загрузить эту страницу в браузере. Она будет выглядеть так:
Today’s date is Thu Jun 29 2017 14:08:55 GMT-0400 (EDT)
На этот файл JavaScript могут ссылаться и другие HTML-документы.
Заключение
Теперь вы умеете внедрять код JavaScript в HTML-документы, создавать специальные файлы для скриптов JavaScript и ссылаться на них.
<script>: элемент для написания скриптов
HTML Элемент <script> используется для встраивания или подключения исполняемого JavaScript кода. Элемент <script> также может использоваться с другими языками, такими как GLSL (en-US) от WebGL.
| Content categories | Метаданные, Потоковый контент, Фразовый контент. |
|---|---|
| Допустимый контент | Динамический скрипт, используя атрибут text/javascript . |
| Пропуск тегов | Нет. Открывающий и закрывающий теги обязательны |
| Допустимые родители | Любые элементы в которых разрешены метаданные или фразовый контент |
| Допустимые ARIA-роли | нет |
| DOM-интерфейс | HTMLScriptElement |
Атрибуты
Это логический атрибут, указывающий браузеру, если возможно, загружать скрипт, указанный в атрибуте src , асинхронно.
Предупреждение: Атрибут async не будет оказывать никакого эффекта, если атрибут src отсутствует. Обычно браузеры загружают <script> синхронно, (т.е. async=»false» ) во время разбора документа. Динамически вставленный <script> (используя, например, document.createElement ) по умолчанию загружаются браузером асинхронно, поэтому для включения синхронной загрузки (т.е. когда скрипты загружаются в порядке их вставки) укажите async=»false» .
Обычные элементы тега script передают мало информации в window.onerror для скриптов, которые не проходят проверку CORS (en-US) . Чтобы разрешить ведение журнала ошибок сайта, которые используют отдельный домен для статических файлов (например, изображение, видео-файл, CSS-стили или Javascript-код), используйте атрибут crossorigin . Посмотрите статью «настройки атрибутов CORS» для более наглядного объяснения его допустимых аргументов.
Это логический атрибут, указывающий браузеру, что скрипт должен выполняться после разбора документа, но до события DOMContentLoaded (en-US) . Скрипты с атрибутом defer будут предотвращать запуск события DOMContentLoaded (en-US) до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.
Предупреждение: Атрибут defer не будет оказывать никакого эффекта, если атрибут src отсутствует. Чтобы достигнуть такого же эффекта для динамически вставленных скриптов используйте async=false . Скрипты с атрибутом defer будут выполняться в том порядке, в котором они появились при разборе документа.
Этот атрибут содержит встроенные метаданные, которые агент пользователя (браузер) может использовать для проверки того, что выбранный ресурс был доставлен без непредвиденных манипуляций. Смотрите Целостность субресурса (en-US) .
Булевый атрибут, который устанавливается для того, чтобы скрипт не выполнялся в браузерах, поддерживающих ES6-модули (англ.). Таким образом, может быть использован для предоставления резервных сценариев в старых браузерах, которые не поддерживают модульный код JavaScript.
Криптографический одноразовый номер (номер, используемый один раз) для внесения встроенных скриптов в белый список в script-src Content-Security-Policy (en-US) . Сервер должен генерировать уникальное одноразовое значение каждый раз, когда он передает политику. Крайне важно предоставить одноразовый номер, который нельзя угадать, поскольку в противном случае обход политики ресурса является тривиальным.
Определяет URI внешнего скрипта; является альтернативой встраиванию скрипта непосредственно в документ.
Предупреждение: Если у элемента script будет указан атрибут src , то он не должен иметь встроенный скрипт между тегами.
Как и атрибут textContent , этот атрибут задает текстовое содержимое элемента. Однако, в отличие от атрибута textContent , этот атрибут оценивается как исполняемый код после того, как узел вставлен в DOM.
Этот атрибут указывает тип представленного скрипта. Значение этого атрибута будет находиться в одной из следующих категорий:
- Атрибут не установлен (по-умолчанию), пустая строка или установлен как MIME-тип JavaScript
- : Обозначает, что скрипт является «классическим скриптом», содержащим JavaScript-код. Рекомендуется не указывать MIME-тип, а пропускать атрибут вообще. MIME-типы JavaScript указаны в спецификации.
- : Данное значение даёт браузеру инструкцию, что код является JavaScript-модулем. Обработка содержимого скрипта отложенная. Атрибуты charset и defer игнорируются. Для дополнительной информации по использованию module , смотрите руководство по JavaScript-модулям. В отличие от классчических скриптов, модули требуют использования CORS-протокола для cross-origin загрузок.
- : Данное значение сигнализирует о том, что содержимое тега является словарём импортов. Словарь импортов — это JSON-объект, который может использоваться для задания алиасов при импорте JavaScript-модулей.
Устаревшие атрибуты
Если присутствует, его значение должно соответствовать «utf-8» без учета регистра ASCII. И в том, и в другом случае нет необходимости указывать атрибут charset, поскольку документы должны использовать UTF-8, а элемент script наследует свою кодировку символов от документа.
Как и атрибут type , этот атрибут определяет используемый язык сценариев. Однако, в отличие от type , возможные значения language никогда не были стандартизированы. Вместо него следует использовать атрибут type .
Примечания
Элемент <script> без указания атрибутов async , defer или type=»module» , а также встроенный скрипт, загружается и выполняется сразу, до того как браузер продолжит разбор документа.
Для обработки скрипт должен иметь тип данных text/javascript , но браузеры снисходительны и блокируют обработку только в том случае, если скрипт представляет данные одного из типов: изображение ( image/* ); видео ( video/* ); аудио ( audio/* ); или text/csv . Если скрипт заблокирован, элементу отправляется событие error (en-US) , если не было отправлено событие load (en-US) .
Примеры
Основное использование
Эти примеры показывают как импортировать скрипт используя элемент <script> в HTML4 и HTML5.
Фолбэк-модуль
Браузеры, поддерживающие использование значения module для атрибута type , игнорируют любые скрипты с атрибутом nomodule . Это разрешает использовать модульные скрипты, и в тот же самый момент позволяет использовать nomodule- скрипты для браузеров без поддержки модульных скриптов.