Как добавить JavaScript в HTML - httpdoc.ru

Как добавить JavaScript в HTML

Как добавить JavaScript в HTML - Чтобы включить внешний файл JavaScript, мы можем использовать script тег JacaScript с атрибутом src . Атрибут src помогает указать путь к файлу сценария. В HTML , JavaScript Код должен быть вставлен между <script> и </script> тегами.

Есть три способа добавить JavaScript на веб-страницу:

  • Размещение кода JavaScript непосредственно внутри HTML-тег с событиями.
  • Встраивание кода JavaScript между парой <script> и </script> метки.
  • Создание внешнего файла JavaScript с .js расширением и его загрузка на странице с помощью атрибута src <script> тега.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> Embedding JavaScript </title> 
</head> 

<body>
  <script>
    var greet = "Hello World!";
    document.write(greet);
  </script>
</body>
</html>

Выход

Embedding JavaScript Examples Привет, мир!

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

JavaScript в разделе Body

Вы можете добавить JavaScript в основной раздел.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Change Body Section </title> 
</head> 

<body>

<h1>JavaScript in Body</h1>
<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>

Выход

JavaScript Change Body Section

Параграф.


Совет. Размещение скриптов в нижней части <body> элемента сокращает время загрузки веб-страницы, поскольку компиляция скриптов увеличивает время загрузки страницы.

JavaScript в разделе заголовка

Вы также можете добавить JavaScript в раздел заголовка, как и в разделе тела.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>  JavaScript in Head Tag  </title> 

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
		}
</script>
</head>

<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

Выход

JavaScript in Head Tag

Параграф


Внешний JavaScript

Код JavaScript также может быть добавлен из отдельного файла с .js расширением, а затем вы можете добавить этот файл в свой документ с помощью src атрибута <script> тега.

Это полезно, если вы хотите использовать один и тот же сценарий в нескольких документах.

Совет: рекомендуется отделить содержимое и структуру вашей веб-страницы (например, HTML) от представления (CSS) и поведения (JavaScript).
Синтаксис
< script src = "js / file.js" >

Файл JavaScript
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

</script>

Чтобы использовать внешний сценарий, поместите имя файла сценария в атрибут src (источник) <script> тега:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Add External File </title> 
</head> 

<body>
<h1>External JavaScript</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>

Выход

JavaScript Add External File

Параграф