5.1. Включение скриптов 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>

В настоящее время помещение скрипта в комментарий не используется. Устаревшим (deprecated) считается и использование атрибута language="JavaScript". Вместо него используется атрибут type ="text/ javascript", принимаемое также по умолчанию. Рассмотрим пример:

<!-- пример 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> можно вообще не указывать, Они будут установлены по умолчанию.

В следующем примере используется атрибут src, чтобы выбрать скрипт из файла myscript.js и поместить в заголовок документа

<DOCTYPE HTML >

<html>

<head>

<title> заголовок страницы идет здесь </ title>

<script src="js/myscript.js"> </ script>

<link rel="stylesheet" href="css/code.css" type="text/css">

</ head>

<body>

<p>содержание страницы.</ p>

</ body>

</ html>

Код скрипта выполняется сразу, как встретится, если только это не функция. Функция вызывается из скрипта в теге <body> или как обработчик события. Код может размещаться в различных частях документа.

1. В отдельном файле с расширением js. B этом случае файл включается с помощью тега <script> с атрибутом src, в котором прописывается путь к файлу. Например:

<script type="text/javascript" src="js/pr.js"></script>

2. В разделе body. В этом случае результат сценария отображается на Web-странице при ее загрузке в браузере.

3. В заголовке программы между <head> и </head>. Это гарантирует выполнение скрипта до начала загрузки HTML-кода страницы. В заголовке часто размещаются функции, которые не выполняются при загрузке страницы, а вызываются по имени из различных мест скрипта.

4. В теге HTML. Такая конструкция называется обработчиком событий и представляет собой отдельный тип сценария, который даже не требует использования дескриптора <script>. Рассмотрим пример:

<!-- Использование кнопки и события -->

<html> <body>

<form>

<input type="button" value="click me" onclick="window.alert(' Hello!')">

</form>

<a href="delete.php" onclick="return confirm('Вы уверены?'); ">

Удалить</a>

</body> </html>

В приведённом примере при нажатии на ссылку, функция confirm('Вы уверены?') вызывает модальное окно с надписью «Вы уве­рены?», а return false – блокирует переход по ссылке.

Символы нижнего и верхнего регистров в JavaScript различаются, как и в C++. Операторы записываются на нижнем регистре и отделяются друг от друга точкой с запятой, только если находятся в одной строке.