Блог

Главная - JavaScript язык программирования - Где поместить JavaScript в HTML — документ ?
You are currently viewing Где поместить JavaScript в HTML — документ ?

Где поместить JavaScript в HTML — документ ?

JavaScript в теле или в заголовке: Сценарии могут быть размещены внутри тела или в разделе заголовка HTML-страницы или как в голове, так и в теле.

JavaScript в голове: Функция JavaScript помещается в головной раздел HTML-страницы, и функция вызывается при нажатии кнопки.

<!DOCTYPE html>
<html>
<head>
	<script>
		function gfg() {
		document.getElementById("demo").innerHTML = "Geeks For Geeks";
		}
	</script>
</head>
<body>
	<h2>JavaScript in Head</h2>
	<p id="demo" style="color:green;">geeksforgeeks.</p>
	<button type="button" onclick="gfg()">click it</button>
</body>
</html>

Вывод:
Перед нажатием кнопки

После нажатия кнопки

JavaScript в теле: Функция JavaScript помещается в раздел тела HTML-страницы, и функция вызывается при нажатии кнопки.

Пример:

<!DOCTYPE html>
<html>
<center>
	<body>
		<h2>JavaScript in Body</h2>
		<p id="demo">geeksforgeeks.</p>
		<button type="button" onclick="gfg()">Try it</button>
		<script>
			function gfg() {
			document.getElementById("demo").innerHTML = "Geeks For Geeks";
			}
		</script>
	</body>
</center>
</html>

Вывод:
Перед нажатием кнопки

После нажатия на кнопку

Внешний JavaScript: JavaScript также может использоваться в качестве внешних файлов. Файлы JavaScript имеют расширение .js . Чтобы использовать внешний сценарий, поместите имя файла сценария в атрибут src тега сценария. Внешние сценарии не могут содержать теги сценариев.

Пример:

<!DOCTYPE html>
<html>
<center>
<body>
	<h2>External JavaScript</h2>
	<p id="demo">Geeks For Geeks.</p>
	<button type="button" onclick="myFunction()">Try it</button>
	<script src="myScript.js"></script>
</body>
<center>
</html>

Вывод перед щелчком:

Вывод после щелчка:

Преимущества внешнего JavaScript:

  • Кэшированные файлы JavaScript могут ускорить загрузку страниц
  • Это облегчает чтение и поддержку JavaScript и HTML
  • Он разделяет код HTML и JavaScript

Метки: