Как добавить JavaScript в HTML
Код, написанный на языке JavaScript, называется скриптом или сценарием.
Рассмотрим, как добавить и выполнить скрипт на странице.
Добавить JavaScript можно с помощью элемента <script>
двумя способами:
- Расположить код непосредственно между парой тегов
<script>
и</script>
. - Подключить внешний файл с JavaScript-кодом.
Встроенный скрипт
JavaScript-код можно вставить непосредственно внутри элемента <script>
. Скрипт, расположенный непосредственно внутри элемента, называется встроенным.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Название документа</title>
<script>
// Встроенный JavaScript-код
</script>
</head>
<body>
<script>
// Встроенный JavaScript-код
</script>
</body>
</html>
Внешний скрипт
На веб-страницу можно добавить JavaScript-код, расположенный во внешнем файле. Скрипт, расположенный внутри подключаемого файла, называется внешним. Подключение внешнего файла выполняется с помощью атрибута src
элемента <script>
.
Для примера, создадим папку и назовём её example, внутри этой папки создадим текстовый файл с расширением .js, и назовём его myscript.js (имя файла может быть любым). Открываем созданный файл и добавляем в него строку JavaScript-кода:
alert("Добро пожаловать!");
Внутри внешнего файла JavaScript-код не нужно располагать между тегами <script>
и </script>
. Сохраняем изменения в файле и закрываем его.
Осталось создать HTML-документ, к которому будет подключен внешний скрипт. В той же папке создаём HTML-документ и называем его к примеру test.html. Теперь c помощью элемента <script>
подключаем внешний скрипт:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Название документа</title>
<script src="myscript.js"></script>
</head>
<body>
</body>
</html>
Вот и всё! Сохраняем изменения в HTML-документе, открываем его в браузере и смотрим результат.
Примечание: если подключается внешний сценарий, то внутри того же самого элемента <script>
нельзя одновременно располагать встроенный сценарий.
Сравнение внешних и встроенных скриптов
Использование внешних скриптов даёт ряд преимуществ перед встроенными:
- HTML-документы становятся проще для редактирования, так как из них можно убрать большие блоки JavaScript-кода и отделить структуру от поведения страницы.
- Если один и тот же JavaScript-код, используется в нескольких HTML-документах, его лучше подключать в качестве внешнего сценария. Это намного облегчит в дальнейшем работу с сайтом, так как при внесении каких-либо изменений в JavaScript-код отпадает необходимость редактировать каждый HTML-документ в отдельности.
- Внешний сценарий загружается браузером всего один раз, при первом посещении страницы. Переходя на другие страницы, использующие тот же сценарий, он будет извлекаться из кэша браузера, что в свою очередь ускорит загрузку и обработку содержимого страницы, а так же снизит нагрузку на сервер, поскольку не нужно будет отдавать браузеру один и тот же код для каждой страницы.