Куда вставлять Javasсript

Чтобы код Javascript сработал в браузере пользователя, его необходимо вставить между тегами <script> и </script>.


<html>
<head>
	<title>Пример JavaScript</title>
</head>
<body>
<script>
	document.getElementById("demo").innerHTML = "Первый сценарий на JavaScript";
</script>

<noscript>
	Ваш браузер не поддерживает JavaScript или поддержка отключена в настройках.
</noscript>

<div id="demo"></div>
</body>
</html>

В данном примере, как только HTML страница будет загружена, браузер запустит команду document.getElementById("demo").innerHTML = "Первый сценарий на JavaScript", которая ищет элемент с идентификатором "demo" и, найдя его, помещает в него строку "Первый сценарий на JavaScript".

В действительности полная запись тега <script> имеет следующий вид: <script type="text/javascript">. В атрибуте type указывается используемый язык скриптов. Однако в настоящее время существует не так уж много таких языков, и в HTML язык Javascript установлен как язык скриптов по умолчанию. Поэтому атрибут type использовать не нужно.

Также, обратите внимание на теги <noscript> и </noscript>. Этот тег срабатывает, когда по той или иной причине, например, выполнение сценариев отключено в настройках браузера, невозможно выполнить сценарий Javasсript.

Функции и события JavaScript

Функция JavaScript — это блок кода, который выполняется по "вызову".

Например, функция может вызываться при возникновении какого-нибудь события, вроде нажатия пользователем на кнопку мыши.

Подробнее о функциях и событиях вы узнаете позже в соответствующих главах.

JavaScript в теге <head> и <body>

В HTML документ можно вставлять любое число скриптов.

На HTML странице скрипты можно размещать внутри секции <body> или <head>, либо в обоих сразу.

В следующем примере функция JavaScript размещена в секции <head>. Эта функция вызывается при нажатии пользователем на кнопку:


<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Параграф изменен.";
}
</script>
</head>

<body>

<h1>Веб-страница</h1>
<p id="demo">Параграф</p>
<button type="button" onclick="myFunction()">Изменить</button>

</body>
</html> 

В следующем примере функция JavaScript размещена в секции <body>:


<!DOCTYPE html>
<html>

<body>

<h1>Веб-страница</h1>
<p id="demo">Параграф</p>
<button type="button" onclick="myFunction()">Изменить</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Параграф изменен.";
}
</script>
</body>
</html> 

Размещение скриптов в нижней части элемента <body> увеличивает скорость отображения HTML документа, так как компиляция скриптов замедляет рендеринг веб-страницы.

Внешний JavaScript

Скрипты также можно размещать во внешних файлах:

Внешний файл: myScript.js


function myFunction() {
   document.getElementById("demo").innerHTML = "Параграф изменен.";
} 

Внешние скрипты оправданы тогда, когда нужно один и тот же сценарий использовать в нескольких HTML документах.

Обычно у файлов JavaScript расширение .js.

Чтобы использовать внешний скрипт, нужно поместить имя файла Javascript в атрибут src тега <script>:


<script src="//msiter.ru/myScript.js"></script>

Подключать внешние скрипты можно внутри тега <head> или <body>.

Скрипт будет вести себя так же, как если бы он был вставлен непосредственно внутри тега <script>.

Внимание! Внешние скрипты не могут содержать теги <script>.

Преимущества внешних JavaScript

У размещения скриптов во внешних файлах есть ряд преимуществ:

  • Разделяется HTML и Javascript код
  • Становится проще читать и обслуживать HTML и JavaScript
  • Благодаря кешированию файлов JavaScript увеличивается скорость загрузки веб-страницы

Чтобы добавить несколько файлов скриптов на HTML страницу, достаточно вставить нужное число тегов <script>:


<script src="//msiter.ru/myScript1.js"></script>
<script src="//msiter.ru/myScript2.js"></script>

Внешние ссылки

В качестве ссылок на внешние скрипты может использоваться либо абсолютный URL, либо относительный путь к текущей веб-странице.

В следующем примере для подключения внешнего скрипта используется полный URL:


<script src="//msiter.ru/js/myScript1.js"></script>

В следующем примере скрипт расположен в подкаталоге текущего веб-сайта:


<script src="//msiter.ru/js/myScript1.js"></script>

В следующем примере скрипт расположен в том же подкаталоге что и текущая страница:


<script src="//msiter.ru/myScript1.js"></script>

Устаревшие и нестандартные браузеры

Для обеспечения совместимости со старыми браузерами, которые не умеют работать со скриптами Javascript, код скрипта размещают внутри тегов комментариев HTML <!-- и -->. Если пренебречь этой предосторожностью, то браузер, не знающий Javascript, просто выведет на экран код скрипта в виде обычного текста. К счастью таких нестандартных браузеров в настоящее время практически не осталось. Однако подобный код все еще встречается, и стоит знать для чего он используется.


<html>
<head>
	<title>Пример JavaScript</title>
</head>

<body>
<script type="text/javascript">
<!--
	document.write("Привет, Мир!")
// -->
</script>

</body>
</html>

В приведенном выше примере сразу же после тега <script type="text/javascript"> вставлен открывающий тег HTML комментария <!--, а перед тегом </script> вставлен закрывающий тег комментария -->. При этом перед закрывающим тегом HTML комментария поставлен двойной прямой слэш //, который является уже комментарием JavaScript, показывающий, что строка после него является комментарием с точки зрения JavaScript. Назначения этого комментария JavaScript — указать браузерам, умеющим работат с JavaScript, что символы → следует проигнорировать.