Рис. 10.22. Элементы формы
Доступ к объектам формы в данном сценарии организован путем присвоения каждому объекту формы уникального имени и перечисления всех объектов в соответствии с их иерархией в документе.
Самой форме присвоено имя aform. Каждому полю ввода также присвоены уникальные имена: geometr, color, prichina. Введенные пользователем данные передаются в функцию как значение value. В соответствии с иерархией объектов на первом месте стоит объект Document, далее идет форма, затем поле формы и, наконец, значение поля – текст, введенный пользователем.
В сценарии эта цепочка объектов выглядит следующим образом: document. aform.geometr.value. Таким образом, функция doit() получает данные пользователя из значения value поля geometr формы aform в HTML-документе document. Аналогично происходит передача данных в функцию из других полей формы.
Данные, полученные от формы, отображаются функцией в окне Alert (рис. 10.23).
Рис. 10.23. Результат работы сценария
Рассмотрим еще один пример сценария JavaScript (листинг 10.23).
Листинг 10.23. Смена изображений на веб-странице<html>
<head>
<title>Смена картинок через массив</title>
<!–Код JavaScript –>
<script language="JavaScript">
function myimage(pic) //функция
{
document.images[0].src=pic
}
</script>
</head>
<body text="#000000" bgcolor="#FFFFCC" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<!– Элементы страницы –>
<h1>
<font color="#000099">Просмотр фотографий</FONT>
</h1>
<center>
<table cols=2 width="100%">
<caption>
<font color="#000099" size=+2>Природа</font>
</caption>
<tr>
<td>
<ul>
<li><a href="javascript:myimage('a.jpg')">картинка1</li>
<li><a href="javascript:myimage('b.jpg')">картинка2</li>
<li><a href="javascript:myimage('c.jpg')">картинка3</li>
<li><a href="javascript:myimage('d.jpg')">картинка4</li>
<li><a href="javascript:myimage('e.jpg')">картинка5</li>
<li><a href="javascript:myimage('f.jpg')">картинка6</li>
<li><a href="javascript:myimage('g.jpg')">картинка7</li>
</ul>
</td>
<td align=center valign=center>
<img src="d.jpg"> </td>
</tr>
</table>
</center>
</body>
</html>
Данный сценарий позволяет просматривать различные фотографии природы на веб-странице (рис. 10.24).
Рис. 10.24. Просмотр фотографий на странице
В HTML-документе размещена таблица с двумя столбцами. В первом столбце находятся ссылки на изображения, которые загружаются во второй столбец. Без сценария JavaScript реализация такой задачи практически невозможна.
Сам сценарий находится в заголовке HEAD HTML-документа. Он содержит функцию myimage(pic), которой передаются названия рисунков. В функции определена строка, ответственная за смену изображений: document. images [0]. src=pic. Как видите, в данной строке указаны объект Document, массив изображений на странице (images [0]) и источник изображений (src). В массиве определен индекс [0], поскольку в веб-странице отображается только одна картинка. Как вы помните, нулевой индекс в коллекции соответствует первому изображению в HTML-документе.
Изначально на странице отображается картинка d.jpg. Это определено в строке <IMG SRC="d.jpg">. При щелчке кнопкой мыши на ссылке с названием картинки запускается сценарий: <A HREF="javascript: myimage ('a.jpg')">. Фотографии сменяют друг друга благодаря тому, что название изображения из скобок передается в строку document.images [0].src=pic. Значение pic заменяется названием фотографии из выбранной ссылки, например 'a.jpg'. При выборе следующей ссылки значение pic опять заменяется названием фотографии, а точнее именем файла с изображением.
С помощью данного сценария можно организовать удобный просмотр фотографий в одном окне браузера на одной веб-странице. Этот прием довольно часто используется в фотогалереях и интернет-магазинах.
Итак, мы рассмотрели объекты HTML-документа. Это сама веб-страница и расположенные на ней элементы. Все они обладают своими свойствами. К каждому из них можно применить определенные действия, или методы. Эти методы позволяют управлять содержимым веб-страницы и динамически его изменять.
Резюме
В этой главе вы познакомились с фундаментальными понятиями языка JavaScript – объектами, свойствами и методами. Теперь вы сможете использовать в сценариях различные элементы окна браузера и веб-страницы, изменять их свойства и управлять ими с помощью JavaScript. Помните, что все эти элементы являются объектами. Правильное применение их свойств и методов позволит вам стать профессиональным веб-разработчиком.
Глава 11 Основы языка JavaScript
11.1. Работа с информацией
11.2. Переменные и типы данных
11.3. Выражения
11.4. Условия и циклы
11.5. Функции и события
11.6. Встроенные объекты JavaScript
Эта глава является незаменимой для новичков, так как в ней разъясняются основные элементы языка JavaScript: переменные, типы данных, выражения, различные операторы, функции и т. д. Эти знания являются базовыми – без них невозможно понимание остального материала книги.
11.1. Работа с информацией
Любая программа или сценарий работают с информацией, то есть получают некие данные, обрабатывают их согласно своему алгоритму, а затем обычно возвращают результат в виде изображения на экране или бумаге, звука, файла, сигнала другой программе и т. д.
Серверные программы получают данные либо от пользователя, например через формы, либо из баз данных. При этом в качестве обрабатываемой информации могут выступать абсолютно любые данные: опросы, регистрационные данные, фотографии, почта, статистические данные.
Клиентские сценарии часто выступают буфером между пользователем и серверной программой, осуществляя предварительную обработку и верификацию данных. Следовательно, они работают с теми же данными.
Клиентские сценарии могут получать информацию различными способами, которые описаны ниже.
• Информация может быть заложена в сценарий разработчиком. Обычно это некие начальные значения.
• Информация может передаваться от пользователя с помощью форм.
• Передача через URL.
• Получение информации обработкой событий, например после перемещения указателя мыши, щелчка кнопкой мыши, нажатия клавиш.
• Получение данных с других сайтов или передача серверной программой.
Для знакомства с вводом/выводом информации в JavaScript понадобятся три метода: alert(), prompt() и confirm().
Эти методы генерируют различные окна сообщений.
Примечание
В действительности методы alert(), prompt() и confirm() являются методами объекта Window в браузере.
Метод alert()
Метод alert() отображает окно предупреждения с соответствующим сообщением. После прочтения сообщения пользователю необходимо нажать кнопку OK, чтобы закрыть окно. Аргументом данного метода является строка.
Примечание
О типах данных в JavaScript, в том числе и о строках, будет рассказано далее в этой главе.
В простейшем случае текст предупреждения, заключенный в кавычки, вводится внутри круглых скобок (листинг 11.1).
Листинг 11.1. Работа с предупреждением<html>
<head>
<title>Работа с предупреждением</title>
</head>
<script>
alert("Это мое предупреждение");
</script>
<body>
</body>
</html>
Окно предупреждения генерируется самим браузером, поэтому внешний вид окна в разных браузерах может различаться. На рис. 11.1, 11.2 и 11.3 представлен вид окна, сгенерированного в трех популярных браузерах с помощью описанного кода.
Рис. 11.1. Окно предупреждений в браузере Internet Explorer
Рис. 11.2. Окно предупреждений в браузере Mozilla Firefox
Рис. 11.3. Окно предупреждений в браузере Opera
Метод prompt()
Метод prompt() имеет противоположное предназначение. Он служит для получения данных от пользователя (листинг 11.2). При его вызове отображается окно приглашения с текстовым полем. Метод может содержать два аргумента. Оба этих аргумента должны быть строками. Первый аргумент – сообщение, которое отображается в окне. Второй аргумент – это текст по умолчанию, который должен появиться в соответствующем поле. Кроме того, этот метод, в свою очередь, возвращает значение, которое также является строкой, – это текст, который ввел пользователь.
Листинг 11.2. Работа с запросом<html>
<head>
<title>Работа с запросом</title>
</head>
<script>
//Объявляем переменную
var nameUser;
//Введенное пользователем значение присваивается переменной nameUser
nameUser=prompt("Здравствуйте, как вас зовут?", "аноним");
//Используем метод alert() для вывода введенного имени
alert("Рад вас видеть, "+ nameUser);
</script>
<body>
</body>
</html>
После запуска страницы с вышеприведенным кодом появится запрос (рис. 11.4), вслед за которым отобразится предупреждение.