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

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

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

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

Позвольте мне подробно описать вам оба метода.

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

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

Вот простой пример, в котором 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>

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

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

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

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