JavaScript Установка
Как подключить JavaScript? Тег <script>
На HTML-странице JavaScript код должен быть вставлен между тегами <script> и </script>.
Пример
<script>
document.getElementById("demo").innerHTML = "Мой первый JavaScript";
</script>
Старые примеры JavaScript могут использовать атрибут type с таким написанием: <script type="text/javascript">.
Согласно спецификации HTML5 для подключения JavaScript атрибут type - не обязателен. JavaScript является скриптовым языком в HTML по умолчанию.
Функции и события JavaScript
JavaScript function - это блок кода JavaScript, который может быть выполнен при "вызове".
Например, функция может быть вызвана, когда происходит событие, например, когда пользователь нажимает кнопку.
Вы узнаете намного больше о функциях и событиях в последующих главах этого учебника.
JavaScript в <head> или <body>?
Вы можете разместить любое количество скриптов в HTML-документе.
Скрипты могут быть размещены в разделах <body> или в <head> HTML страницы, или в обеих разделах.
JavaScript в <head>
В этом примере JavaScript function размещается в разделе <head> HTML страницы.
Функция вызывается при нажатии кнопки:
Пример
<!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>
В этом примере JavaScript function размещается в разделе <body> HTML страницы.
Функция вызывается при нажатии кнопки:
Пример
<!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> улучшает скорость отображения, поскольку интерпретация скриптов замедляет отображение веб-страницы. По возможности старайтесь размещать JavaScript-код именно в конце HTML-страницы.
Внешний JavaScript
Скрипты также могут быть размещены во внешних файлах:
Внешний файл: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Параграф изменён.";
}
Внешние скрипты удобны, когда один и тот же JavaScrip-код используется на разных веб-страницах (по аналогии с внешними файлами .css).
Файлы JavaScript имеют расширение .js.
Чтобы использовать внешний скрипт, укажите имя файла скрипта в атрибуте src (сокращенно от source) тега <script>:
Можно разместить внешнюю ссылку на скрипт в <head> или <body> - как вам нравится.
Скрипт будет вести себя так, как если бы он был расположен именно там, где находится тег <script>.
Внешние скрипты не могут содержать теги <script>. В них содержится непосредственно сам JavaScript-код.
Преимущества использования внешних файлов JavaScript
Размещение скриптов во внешних файлах имеет ряд преимуществ:
- Разделяются HTML-код и JavaScript-код
- Это облегчает чтение и поддержку отдельно HTML и JavaScript
- Кэшированные файлы JavaScript могут ускорить загрузку страниц
Чтобы добавить несколько файлов скриптов на одну страницу - используйте несколько тегов <script>:
Пример
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Внешние ссылки
На внешние скрипты можно ссылаться с помощью полного URL-адреса или пути относительно текущей веб-страницы.
В этом примере используется полный URL-адрес для ссылки на скрипт:
В этом примере используется скрипт, расположенный в указанной папке на текущем веб-сайте:
Этот пример ссылается на скрипт, расположенный в той же папке, что и текущая страница:
Вы можете прочитать больше о путях к файлам в главе HTML Пути к файлам на нашем сайте W3Schools на русском.
Для написания скриптов на языке JavaScript используются точно такие же редакторы кода, как и для написания обычного HTML-кода. О том, какие можно использовать редакторы кода, вы можете прочитать в разделе HTML Редакторы на нашем сайте W3Schools на русском.
