JavaScript Куда
Тег <script>
В HTML код JavaScript вставляется между тегами <script>и .</script>
Пример
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
В старых примерах JavaScript может использоваться атрибут типа: <script type="text/javascript">.
Атрибут типа не требуется. 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 = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
JavaScript в <body>
В этом примере JavaScript functionпомещается в <body>раздел HTML-страницы.
Функция вызывается (вызывается) при нажатии кнопки:
Пример
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Размещение сценариев в нижней части элемента <body> повышает скорость отображения, поскольку интерпретация сценариев замедляет отображение.
Внешний JavaScript
Скрипты также можно размещать во внешних файлах:
Внешний файл: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
Внешние скрипты практичны, когда один и тот же код используется на многих разных веб-страницах.
Файлы JavaScript имеют расширение .js .
Чтобы использовать внешний сценарий, поместите имя файла сценария в srcатрибут (источник) <script>тега:
Пример
<script src="myScript.js"></script>
Вы можете поместить ссылку на внешний скрипт в <head>или <body>по своему усмотрению.
Скрипт будет вести себя так, как будто он находится именно там, где находится <script>тег.
Внешние скрипты не могут содержать <script>теги.
Преимущества внешнего JavaScript
Размещение скриптов во внешних файлах имеет ряд преимуществ:
- Он разделяет HTML и код
- Это упрощает чтение и обслуживание HTML и JavaScript.
- Кэшированные файлы JavaScript могут ускорить загрузку страниц
Чтобы добавить несколько файлов скриптов на одну страницу - используйте несколько тегов скрипта:
Пример
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Внешние ссылки
На внешний скрипт можно ссылаться тремя различными способами:
- С полным URL (полный веб-адрес)
- С путем к файлу (например, /js/)
- Без всякого пути
В этом примере используется полный URL -адрес для ссылки на myScript.js:
Пример
<script src="https://www.w3schools.com/js/myScript.js"></script>
В этом примере используется путь к файлу для ссылки на myScript.js:
Пример
<script src="/js/myScript.js"></script>
В этом примере не используется путь для ссылки на myScript.js:
Пример
<script src="myScript.js"></script>
Вы можете прочитать больше о путях к файлам в главе Пути к файлам HTML .