Существует гибкость, предоставляемая для включения кода JavaScript в любом месте документа HTML. Однако наиболее предпочтительные способы включить JavaScript в файл HTML следующие:
Содержание:
- Сценарий в разделе
head ... /head. - Сценарий в разделе
body ... /body. - Скрипт в разделах
body ... /bodyиhead>... /head. - Сценарий во внешнем файле, а затем включить в раздел
head ... /head.
В следующем разделе мы увидим, как мы можем поместить JavaScript в файл HTML по-разному.
JavaScript в разделе head ... /head
Если вы хотите, чтобы сценарий выполнялся на каком-либо событии, например, когда пользователь нажимает где-то, вы поместите этот скрипт в голову следующим образом:
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
JavaScript в разделе body ... /body
Если вам нужен сценарий для запуска при загрузке страницы, чтобы сценарий генерировал контент на странице, скрипт переходит в часть body документа. В этом случае у вас не будет функции, определенной с помощью JavaScript. Взгляните на следующий код.
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
JavaScript в body и head разделах
Вы можете поместить свой код JavaScript в раздел head и body в целом следующим образом:
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
JavaScript в внешнем файле
Когда вы начнете более активно работать с JavaScript, вы, скорее всего, обнаружите, что есть случаи, когда вы повторно используете идентичный код JavaScript на нескольких страницах сайта.
Вы не ограничены поддержкой одинакового кода в нескольких файлах HTML. Сценарий тег обеспечивает механизм, позволяющий хранить JavaScript во внешнем файле, а затем включить его в свои HTML - файлы.
Вот пример, показывающий, как вы можете включить внешний JavaScript-файл в свой HTML-код с помощью тега script и его атрибута src.
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>
Чтобы использовать JavaScript из внешнего источника файла, вам нужно записать весь исходный код JavaScript в простой текстовый файл с расширением «.js», а затем включить этот файл, как показано выше.
Например, вы можете сохранить следующий файл в файле filename.js, а затем вы можете использовать функцию sayHello в своем HTML-файле после включения файла filename.js.
function sayHello() {
alert("Hello World")
}