Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Веб программирование.Начало пути.doc
Скачиваний:
2
Добавлен:
01.04.2025
Размер:
7.81 Mб
Скачать

Включение скриптов 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", принимаемое также по умолчанию:

<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> можно вообще не указы­вать, Они будут установлены по умолчанию. В следующем примере используется атрибут src, чтобы выбрать скрипт из файла myscript.js и поместить в заголовок документа

<DOCTYPE HTML >

<html>

<head>

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

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

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

</ head>

<body>

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

</ body>

</ html>

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

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

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

3. В дескрипторе(теге) 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 – блокирует переход по ссылке.

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

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

В директории /jspr/ должен находиться файл pr.js, который содержит код JavaScript без тегов <script> и </script>.

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