JavaScript, куда

Оглавление

    Показать оглавление

Тег <script>

В HTML код JavaScript вставляется между тегами <script> и </script>.

Пример

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

</body>
</html>

Старые примеры JavaScript могут использовать атрибут типа: <script; type="text/javascript">.
Атрибут type не является обязательным. JavaScript — это язык сценариев по умолчанию в HTML.

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

функция JavaScript — это блок кода JavaScript, который может выполняться при «вызове».

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

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

JavaScript в <head> или <body>

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

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

JavaScript в <head>

В этом примере функция JavaScript помещается в раздел <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>

Попробуйте сами →

<!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 размещается в разделе <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>

Попробуйте сами →

<!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 (source) тег <script>:

Пример

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

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

</body>
</html>

Вы можете разместить ссылку на внешний скрипт в <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>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Click Me</button>

<p>This example uses a full web URL to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="https://www.w3schools.com/js/myScript.js"></script>

</body>
</html>

В этом примере используется путь к файлу для ссылки на myScript.js:

Пример

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example uses a file path to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

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

</body>
</html>

В этом примере не используется путь для ссылки на myScript.js:

Пример

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

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

</body>
</html>

Вы можете прочитать больше о путях к файлам в главе HTML. Пути к файлам.