Включение скриптов JavaScript в HTML-код
Для того чтобы добавить сценарий JavaScript на Web-страницу, используется пара дескрипторов <script> и </script>. Дескриптор <script> указывает браузеру рассматривать дальнейший текст как скрипт. Обнаружив дескриптор </script>, браузер возвращается к выполнению HTML.
Традиционное включение скрипта в HTML- документ имело вид:
<!-- пример #pr1: шаблон HTML для скрипта -->
<html>
<head>
<title> Шаблон HTML </title>
<script language="javascript">
<!--Маскируемся, начало JavaScript
//…код скрипта
// снятие маскировки; конец JavaScript -->
</script>
</head>
<body >
</body></html>
Использование атрибута language (language="JavaScript") является устаревшим (deprecated), отсутствует в DTD, поэтому считается некорректным. Вместо него используется атрибут type, значением которого является "text/javascript":
<script type="text/javascript">
//JavaScript код
</script>
Рассмотрим пример.
<!-- пример pr2 -->
<html>
<head>
<title>Наша начальная страница</title>
</head>
<body>
<p>Добро пожаловать на первую скриптовую web-страницу.</p>
<script type="text/javascript">
document.write("Hello");
</script>
</body>
</html>
Метод write() объекта document позволяет отображать результат сценария на Web-странице.
Атрибуты language и type тега <script> можно вообще не указывать, Они будут установлены по умолчанию. В следующем примере скрипт выбирается из файла myscript.js и помещается в заголовок HTML документа
<DOCTYPE HTML PUBLIC! "- / / W3C / / DTD HTML 4.01 / / EN"
"Http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> заголовок страницы идет здесь </ title>
<script src="myscript.js"> </ script>
<link rel="stylesheet" href="code.css" type="text/css">
</ HEAD>
<body>
<p>содержание страницы идет здесь, включая все HTML-теги.</ p>
</ Body>
</ HTML>
Код скрипта выполняется незамедлительно, если только этот код не является функцией. Скрипты могут размещаться во всех различных частях документа HTML.
1. В разделе body, как в приведенном выше примере. В этом случае результат сценария отображается на Web-странице при ее загрузке в браузере.
2. В заголовке программы между парой дескрипторов <head>. Это гарантирует выполнение скрипта до начала загрузки основного HTML-кода страницы. В заголовке часто размещаются функции, которые не выполняются при загрузке страницы, а вызываются по имени из различных мест сценариев JavaScript.
3. В дескрипторе HTML. Такая конструкция называется обработчиком событий и позволяет выполнять сценарий JavaScript вместе с дескриптором. Обработчик событий представляет собой отдельный тип сценария, который не требует использования дескриптора <script> для его обозначения. Рассмотрим пример:
<!-- Использование кнопки и события -->
<html> <body>
<form>
<input type="button" value="click me" onclick="window.alert
(' Hello!')">
</form>
</body>
</html>
Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий. Пример использования:
<a href="delete.php" onclick="return confirm('Вы уверены?');">Удалить</a>
В приведённом примере при нажатии на ссылку функция confirm('Вы уверены?'); вызывает модальное окно с надписью «Вы уверены?», а return false; блокирует переход по ссылке. Разумеется, этот код будет работать только если в браузере есть и включена поддержка JavaScript, иначе переход по ссылке произойдёт без предупреждения.
4. В отдельном файле с расширением js. B этом случае скрипт объявляется в HTML-коде с помощью тега <script> с атрибутом src, в котором прописывается путь к файлу. Например
<script type="text/javascript" src="/jspr/pr.js"></script>
В этом варианте в директории /jspr/ должен находиться файл pr.js, который содержит код JavaScript без тегов <script> и </script>.
Отметим, что символы нижнего и верхнего регистров в JavaScript различаются, как и в C++. Операторы должны отделяться друг от друга точкой с запятой, только если они находятся в одной строке.
Если придерживаться спецификации XHTML, то имена тегов и их атрибуты также должны быть указаны в нижнем регистре.