Чтобы реализовать интерактивное взаимодействие веб-страниц с пользователем тебе понадобится JavaScript. В этом руководстве ты узнаешь о различных методах привязки JavaScript файлов к HTML документам.

Различные методы привязки JavaScript к документу HTML

Ты можешь привязать JavaScript с документу HTML с помощью тега <script>:

  • Написать JavaScript-код внутри HTML
  • Привязать внешний файл JavaScript к HTML документу

Давай подробно посмотрим на оба метода.

Как написать JavaScript код внутри HTML

HTML тег <script> позволяет тебе писать JavaScript код в разделах <head> или <body> документа HTML.

Для этого не нужно делать ничего сверхъестественного.

  1. Открываем тег <script>
  2. Пишем JS код
  3. Закрываем тег </script>

Вот простой пример, в котором Javascript существует в разделе <body> HTML документа.

<!DOCTYPE html>
	<head>
		<title> A Sample Web Page </title>
	</head>
	<body>
      <button type ="button" onClick="displayAlert()"> Click </button>
	    <script>
				 function displayAlert() {
						alert("The button has been clicked.");
				 }
     </script>
  </body>
</html>

Как добавить внешний файл JavaScript к HTML документу

Ты можешь добавить внешние файлы JavaScript с расширением .js к HTML, используя тот же HTML тег<script>.

То, как ты это делаешь, немного отличается от предыдущего пример, поскольку теперь тебе нужно указать путь к скрипту. Для этого используют свойство src.

Предположим, у нас есть внешний файл Javascript testscript.js с кодом:

function displayAlert() {
	alert("The button has been clicked.");
}

Ты можешь добавить файл JavaScript testscript.js к HTML-файлу, добавив свойство src="testscript.js" внутри тега <script>.

<!DOCTYPE html>
	<head>
		<title> A Sample Web Page </title>
	</head>
	<body>
      <button type ="button" onClick="displayAlert()"> Click </button>
	    <script src="testscript.js"></script>
  </body>
</html>

Если же тебе нужно привязать несколько JS файлов к HTML-документу, то ты можешь использовать несколько тегов <script>.

Немного дополнительных деталей

Ты узнал как добавить JavaScript к HTML. Вот два важных фактора, которые следует учитывать при дальнейшей работе:

  • Написание или привязка JavaScript в нижней части раздела <body> помогает браузеру быстрее загрузить веб-страницу.
  • Добавление внешних файлов Javascript к HTML помогает лучше организовать код и управлять им. Это также улучшает время отклика твоей веб-страницы за счет кеширования файлов.