Как добавить 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>Выход
<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>Выход
Параграф.
<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
Код JavaScript также может быть добавлен из отдельного файла с
.js
расширением, а затем вы можете добавить этот файл в свой документ с помощью
src
атрибута
<script>
тега.
Это полезно, если вы хотите использовать один и тот же сценарий в нескольких документах.
< script src = "js / file.js" ><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>Выход
Параграф