JavaScript Установка (Подключение)
"Мы здесь, чтобы сделать свой вклад в этот мир. А иначе зачем мы здесь?"
Стив Джобс
Как подключить JavaScript к HTML-странице? Тег <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, который может быть выполнен при "вызове".
Например, функция может быть вызвана, когда происходит событие, например, когда пользователь нажимает кнопку.
Вы узнаете намного больше о функциях и событиях в следующих разделах этого учебника на нашем сайте W3Schools українською.
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
Скрипты также могут быть размещены во внешних JS-файлах:
Внешний файл: 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 на русском.
JavaScript - Как подключить? Видеоурок W3Schools
В этом видео показано, где разместить (включить) JavaScript в HTML.
Часть серии видеоуроков для изучения JavaScript для начинающих!
