Подключение сценариев к HTML-документу

Антон Шепель Фев 21, 2023 • 1 мин чтения

Для подключения JavaScript-сценариев к HTML-документу существует несколько способов:

Внешнее подключение скрипта через тег <script> с указанием пути к файлу, содержащему сценарий. Например:

<!DOCTYPE html>
<html>
<head>
  <title>Мой документ</title>
</head>
<body>
  <h1>Привет, мир!</h1>
  <script src="path/to/my/script.js"></script>
</body>
</html>

Вставка скрипта в тег <head> или <body> с помощью тега <script>. Например:

<!DOCTYPE html>
<html>
<head>
  <title>Мой документ</title>
  <script>
    // JavaScript-код здесь
  </script>
</head>
<body>
  <h1>Привет, мир!</h1>
</body>
</html>

Использование атрибута onclick для привязки события к элементу HTML. Например:

<!DOCTYPE html>
<html>
<head>
  <title>Мой документ</title>
</head>
<body>
  <h1 id="myHeading">Привет, мир!</h1>
  <button onclick="changeText()">Изменить текст</button>
  <script>
    function changeText() {
      document.getElementById("myHeading").innerHTML = "Новый текст!";
    }
  </script>
</body>
</html>

Использование встроенных событий в JavaScript, таких как onload и onsubmit, для привязки событий к элементам HTML. Например:

<!DOCTYPE html>
<html>
<head>
  <title>Мой документ</title>
  <script>
    function pageLoaded() {
      alert("Документ загружен!");
    }
  </script>
</head>
<body onload="pageLoaded()">
  <h1>Привет, мир!</h1>
</body>
</html>

Независимо от выбранного способа, важно помнить о том, что JavaScript-код должен находиться внутри тега <script>, а не быть вставлен в тело HTML-документа напрямую. Кроме того, рекомендуется использовать внешние файлы для хранения больших скриптов и подключать их через тег <script src="...">, чтобы улучшить читаемость и поддерживаемость кода.