Java Script — это просто. Часть 2
Формы
Достаточно широкое применение на страницах Интернет имеют формы. Информация, введенная пользователем в форму, далее пересылается на сервер либо на какой-либо почтовый ящик. Но зачастую введенную информацию необходимо проверять на корректность. Язык JavaScript поможет нам реализовать эту задачу. Создадим простой пример, в котором пользователю необходимо ввести в форму адрес электронной почты. При нажатии на кнопку Отправить будем получать ответ в виде сообщения о корректности либо некорректности введенного адреса, если пользователь не ввел ничего в форму либо не использовал знак @.
<html>
<head>
<script language="JavaScript">
<!--
function emilo(form) {
if (form.text.value == "" ||
form.text.value.indexOf('@', 0) == -1)
alert("Адрес e-mail введен некорректно");
else alert("Адрес e-mail введен правильно");
}
// -->
</script>
</head>
<body>
<form name="emilo1">
Введите в форму e-mail адрес:<br>
<input type="text" name="text">
<P>
<input type="button" name="button" value="Отправить"
onClick="emilo(this.form)">
</body>
</html>
Рис. 1. Результат выполнения программы при неправильном вводе e-mail-адреса
Рассмотрим функцию emilo(form), в которой происходит сравнение. В строке if (form.text.value == "" || form.text.value.indexOf('@', 0) == -1) введенная строка сравнивается с пустой — "", а комбинация символов || называется оператором OR (ИЛИ). Во второй части строки проверяем строку на наличие символа @. Здесь form — это переменная, куда заносится значение, полученное при вызове функции от this.form. Извлечь строку, введенную в рассматриваемый элемент, можно если к form.text приписать "value". Чтобы убедиться, что строка не является пустой, мы сравниваем ее с "". Команда if указывает на то, чем заканчивается сравнение, т.е., если строка пуста или не использовался знак @, мы получим сообщение "Адрес e-mail введен некорректно", вызываемое командой alert, либо сообщение "Адрес e-mail введен правильно", если ошибок не допущено. В разделе body мы создаем элемент для ввода текста и кнопку. Кнопка при нажатии вызывает функцию emilo. В качестве аргумента к этой функции мы передаем комбинацию this.form, что позволяет адресоваться в самой функции именно к тем элементам, которые нам нужны. Итак, данные введены и проверены, теперь необходимо их передать. Самый простой способ состоит в передаче данных формы по электронной почте. Если же вы захотите, чтобы за введенной в форму информацией следил сервер, то необходимо использовать интерфейс CGI (Common Gateway Interface), который позволяет автоматически обрабатывать данные. JavaScript лишен возможности записывать данные в какой-либо файл на сервере. Рассмотрим пример пересылки данных по электронной почте. Создадим небольшой опрос, а результат выбора пользователя отправим на заданный e-mail.
<form method=post action="mailto:pawelk@server.by" enctype="text/plain">
Услугами какого провайдера вы пользуетесь для выхода в интернет?<P>
<input name="сhoice" type="radio" value="1" Checked>Белтелеком<br>
<input name="сhoice" type="radio" value="2" >Velcom GPRS<br>
<input name="сhoice" type="radio" value="3">Другой<P>
<input name="submit" type="submit" value="Отправить">
</form>
Рис. 2. Результат выполнения программы "Опрос"
Для пересылки данных используем HTML-команду "mailto", параметром которой и является заданный почтовый ящик. Параметр enctype="text/plain" используется для того, чтобы пересылать именно простой текст без каких-либо кодируемых частей, что значительно упрощает чтение такой почты. Далее создаем группу кнопок типа "RadioButton" и присваиваем им значения (1, 2, 3). Параметр checked указывает на значение по умолчанию. Строкой <input name="submit" type="submit" value="Отправить"> создаем кнопку, при нажатии на которую данные отправляются. Таким образом, на e-mail придет письмо следующего вида:
сhoice=2
submit=Отправить
Предопределенные объекты
В JavaScript имеется возможность использовать заранее заданные объекты. Полный список таких объектов (как и много другой полезной
информации) можно найти в официальной документации на язык фирмы Netscape. Для ознакомления и практики я ознакомлю вас только с объектами Date и Array. Начнем с примера, который выводит на экран часы и текущую дату.
<html>
<head>
<script Language="JavaScript">
<!--
var timePdpr, datePdpr;
function clock() {
newdat= new Date();
// тут пишем подпрограмму времени
hours= newdat.getHours();
minutes= newdat.getMinutes();
seconds= newdat.getSeconds();
timePdpr= "" + hours;
timePdpr+= ((minutes < 10) ? ":0" : ":") + minutes;
timePdpr+= ((seconds < 10) ? ":0" : ":") + seconds;
document.clock.time.value = timePdpr;
// тут пишем подпрограмму даты
date= newdat.getDate();
month= newdat.getMonth()+1;
year= newdat.getYear();
datePdpr= ((date < 10) ? "/0" : "") + date;
datePdpr+= "." + month;
datePdpr+= "." + year;
document.clock.date.value = datePdpr;
Timer= setTimeout("clock()",1000);
}
// -->
</script>
</head>
<body onLoad="clock()">
<form name="clock">
<b>Текущее время:</b>
<input type="text" name="time" size="6" value=""><br>
<b>Текущая дата:</b>
<input type="text" name="date" size="8" value=""><br>
</form>
</body>
</html>
Рис. 3. Результат выполнения программы "Часы"
Для начала рассмотрим общую структуру объекта Date, который позволяет работать как со временем, так и с датой. Вначале необходимо создать новый объект Date. Для этого используется оператор new: newdat= new Date(). Объекту Date присваиваем имя newdat. После выполнения команды newdat= new Date() вновь созданный объект newdat будет указывать дату и время, когда данная команда была выполнена. Объект Date предоставляет нам кое-какие методы, которые теперь могут применяться к нашему объекту newdat (например, getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth()). Хочу обратить ваше внимание на то, что объект Date не отслеживает автоматически время каждую миллисекунду (секунду), а лишь содержит определенную запись о дате и времени. Чтобы зафиксировать какие-либо другие дату и время, мы можем воспользоваться видоизмененным конструктором со следующим шаблоном: Date(year, month, day, hours, minutes, seconds). И еще одна заметка, в которой отмечу, что для обозначения января используется число 0, а не 1. Число 1 будет обозначать февраль.
Рассмотрим момент ежесекундной коррекции времени и даты. Для этого пользуемся методом setTimeout(). Фактически это сводится к кому, что каждую секунду создается новый объект Date, занося туда текущее время. Функция clock() вызывается программой обработки события onLoad, помещенной в тег <body>. В разделе body созданной HTML-страницы создаем два элемента формы для ввода текста. Функция clock() записывает в оба этих элемента в корректном формате текущие время и дату. Для этой цели используем две строки (созданные переменные): timePdpr и datePdpr. При задании минут в строке timeStr+= ((minutes < 10) ? ":0" : ":") + minutes решим также проблему с индикацией, когда количество минут меньше 10. Количество минут заносится в строку timeStr. Если у нас менее 10 минут, то мы еще должны приписать спереди 0. Упрощенный вид этой строки (более понятный) выглядит следующим образом:
if (minutes < 10) timeStr+= ":0" + minutes
else timeStr+= ":" + minutes;
Очень важным элементом в программировании также являются массивы. Допустим, вам необходимо хранить много имен, неудобно создавать для каждой из них отдельную переменную — гораздо проще создать для них массив. При этом к каждой переменной можно получить доступ, воспользовавшись общим названием и некоторым номером. В языке JavaScript для работы с массивами используется объект Array. Новый массив создается записью вида nameArray= new Array(). После чего можно заносить в массив значения. Очередное замечание: размер массива в JavaScript устанавливается динамически, поэтому старайтесь создавать компактные массивы.
Рассмотрим пример:
<script language="JavaScript">
<!--
testArray= new Array();
testArray[0]= "Иванов";
testArray[1]= "Петров";
testArray[2]= "Сидоров";
testArray[3]= 100;
testArray[4]= 250;
for (var i= 0; i< 5; i++) {
document.write(testArray[i] + "<br>");
}
// -->
</script>
Рис. 4. Результат выполнения программы работы с массивом
В программе мы создаем новый массив с именем testArray. Затем мы заносим в него 5 различных значений (3 текстовых и 2 числовых). Далее запускаем цикл, который выполняет команду document.write(testArray[i] + "<br>") пять раз. В переменной "i" ведется отсчет циклов от 0 до 4. Таким образом, в конструкции myArray[i] переменная "i" меняет значения от 0 до 4, и в итоге мы получаем пять различных вызовов document.write(). Если же нам необходимо вывести одну определенную запись, то необходимо просто указать ее номер в массиве вместо переменной "i".
Объект Image
С помощью объекта Image можно вносить изменения в графические образы, присутствующие на web-странице. В частности, это позволяет создавать мультипликацию. Адресация к изображениям в языке Java Script происходит следующим образом. Все изображения предстают в виде массива. Массив этот называется images и является свойством объекта document. Каждое изображение на странице получает порядковый номер (0 — первое изображение, 1 — второе и т.д.). Тогда адресация к изображению имеет следующую форму: document.images[n], где n — номер изображения. Объект Image имеет определенные свойства. Например, с помощью этих свойств можно определить размер изображения (свойства width и height). Таким образом, для определения ширины n-го изображения (в пикселях) используем запись: document.images[n].width. Уместно будет ваше замечание о том, что тяжело отслеживать индекс изображений, если их на странице большое количество. В таком случае необходимо присваивать изображениям собственные имена. К примеру, если вы создаете изображение с помощью строки: <img src="picture.gif" name="Im1" width=460 height=240>, то обратиться к нему можно строкой: document.Im1 либо document.images["Im1"].
Если стоит задача смены изображений на странице, необходимо использовать атрибут src, который также содержит адрес изображения. Назначив новый адрес изображению, уже загруженному в web-страницу, получим замену старого изображения на изображение с нового адреса. К примеру, если вначале записать строку: <img src="picture.gif" name="Im1" width=460 height=240>, которая загружает изображение picture.gif и получает имя Im1, а в последующей строке — document.Im1.src= "picture2.gif", то изображение с именем "picture.gif" будет заменено изображением "picture2.gif". Важно заметить, что размер поля изображения изменить при замене невозможно, новое изображение всегда получает тот же размер, что был у старого. Такой вид смены изображения имеет один большой недостаток: при записи в src нового адреса сразу начинается процесс загрузки соответствующего изображения. На эту операцию требуется дополнительное время, так как этого не было сделано заранее. Такая задержка, думаю, для вашего сайта будет неприемлема. Решением этой проблемы является упреждающая загрузка изображения. Для этого необходимо создать новый объект Image:
hiddenImg= new Image();
hiddenImg.src= "picture3.gif";
Первая строка, как и ранее, создает новый объект Image, а вторая указывает адрес изображения, которое в дальнейшем будет загружено с помощью объекта hiddenImg. Само название hiddenImg ("скрытая картинка") подразумевает, что после того, как браузер закончит загрузку, изображение на экране не появится, а оно лишь будет сохранено в кэше для последующего использования. Вызов изображения на экран в этом случае осуществляется строкой: document.Im1.src= hiddenImg.src. В завершение знакомства с объектом Image рассмотрим пример смены изображений, инициируемых пользователем. Код примера:
<a href="http:\\www.url.ru"
onMouseOver="document.Im1.src='1.jpg'"
onMouseOut="document.Im1.src='2.jpg'">
<img src="1.jpg" name="Im1" width=400 height=240 border=0></a>
В данном примере в окне браузера отображается изображение с именем "2.jpg", а при наведении курсора мыши на это изображение отображается картинка с именем "1.jpg". Если курсор теперь сместить с области картинки, то снова отобразится первоначальная картинка. Пример имеет ряд недостатков: второе изображение не было загружено, необходимо писать новые команды для каждого изображения на странице и др. Для решения этих проблем рекомендуется использовать массивы изображений. Реализацию этого кода я приводить не буду, потому как сам же при надобности использовал готовый текст программы Стефана Коха (Stefan Koch), который можно легко найти в Интернете.
Слои
Слои позволяют выполнять точное позиционирование изображения, перемещать объекты по странице, делать их невидимыми, вырезать части
изображений и многое другое. Язык Java Script обладает широкими возможностями для работы со слоями, но я не буду останавливаться на этом и просто поверхностно рассмотрю основные аспекты. Для создания слоев используются теги <layer> либо <ilayer>. Тег <layer> используется для тех слоев, которые можно точно позиционировать. Если же не указывается положение слоя, то по умолчанию он помещается в верхний левый угол окна. Тег <ilayer> создает слой, положение которого определяется при формировании документа. При работе со слоями используются основные параметры, которые сведены в таблицу 1.
Таблица 1. Параметры для работы со слоями
Рассмотрим один простой пример. Создадим два слоя. В первом из них мы помещаем изображение, а во втором — текст. Задача — показать этот текст поверх данного изображения.
<html>
<layer name=pictur z-index=0 left=200 top=100>
<img src="pictures1.gif" width=160 height=120>
</layer>
<layer name=txt z-index=1 left=200 top=100>
<font size=+4> <i> Помещенный текст </i> </font>
</layer>
</html>
С помощью тега <layer> формируются два слоя. Оба слоя через параметры left и top позиционируются как 200/100. Используем параметр z-index, определяя тем самым порядок появления указанных слоев, то есть в примере сообщаем браузеру, что текст будет написан поверх изображения. Для z- index можно выбирать не только значения 0 и 1, но и любое положительное число.
Заключение
На этом хочу закончить данную статью. Мы рассмотрели основные принципы работы с языком Java Script и немного попрактиковались. Много я решил не упоминать, не рассматривать потому, что массу дополнительной информации вы сможете найти в официальной документации фирмы Netscape, и, зная принципы программирования на Java, разобраться с ней вам не составит труда.
Кучинский Павел, p@welk, pawelk_kg@tut.by
Достаточно широкое применение на страницах Интернет имеют формы. Информация, введенная пользователем в форму, далее пересылается на сервер либо на какой-либо почтовый ящик. Но зачастую введенную информацию необходимо проверять на корректность. Язык JavaScript поможет нам реализовать эту задачу. Создадим простой пример, в котором пользователю необходимо ввести в форму адрес электронной почты. При нажатии на кнопку Отправить будем получать ответ в виде сообщения о корректности либо некорректности введенного адреса, если пользователь не ввел ничего в форму либо не использовал знак @.
<html>
<head>
<script language="JavaScript">
<!--
function emilo(form) {
if (form.text.value == "" ||
form.text.value.indexOf('@', 0) == -1)
alert("Адрес e-mail введен некорректно");
else alert("Адрес e-mail введен правильно");
}
// -->
</script>
</head>
<body>
<form name="emilo1">
Введите в форму e-mail адрес:<br>
<input type="text" name="text">
<P>
<input type="button" name="button" value="Отправить"
onClick="emilo(this.form)">
</body>
</html>
Рис. 1. Результат выполнения программы при неправильном вводе e-mail-адреса
Рассмотрим функцию emilo(form), в которой происходит сравнение. В строке if (form.text.value == "" || form.text.value.indexOf('@', 0) == -1) введенная строка сравнивается с пустой — "", а комбинация символов || называется оператором OR (ИЛИ). Во второй части строки проверяем строку на наличие символа @. Здесь form — это переменная, куда заносится значение, полученное при вызове функции от this.form. Извлечь строку, введенную в рассматриваемый элемент, можно если к form.text приписать "value". Чтобы убедиться, что строка не является пустой, мы сравниваем ее с "". Команда if указывает на то, чем заканчивается сравнение, т.е., если строка пуста или не использовался знак @, мы получим сообщение "Адрес e-mail введен некорректно", вызываемое командой alert, либо сообщение "Адрес e-mail введен правильно", если ошибок не допущено. В разделе body мы создаем элемент для ввода текста и кнопку. Кнопка при нажатии вызывает функцию emilo. В качестве аргумента к этой функции мы передаем комбинацию this.form, что позволяет адресоваться в самой функции именно к тем элементам, которые нам нужны. Итак, данные введены и проверены, теперь необходимо их передать. Самый простой способ состоит в передаче данных формы по электронной почте. Если же вы захотите, чтобы за введенной в форму информацией следил сервер, то необходимо использовать интерфейс CGI (Common Gateway Interface), который позволяет автоматически обрабатывать данные. JavaScript лишен возможности записывать данные в какой-либо файл на сервере. Рассмотрим пример пересылки данных по электронной почте. Создадим небольшой опрос, а результат выбора пользователя отправим на заданный e-mail.
<form method=post action="mailto:pawelk@server.by" enctype="text/plain">
Услугами какого провайдера вы пользуетесь для выхода в интернет?<P>
<input name="сhoice" type="radio" value="1" Checked>Белтелеком<br>
<input name="сhoice" type="radio" value="2" >Velcom GPRS<br>
<input name="сhoice" type="radio" value="3">Другой<P>
<input name="submit" type="submit" value="Отправить">
</form>
Рис. 2. Результат выполнения программы "Опрос"
Для пересылки данных используем HTML-команду "mailto", параметром которой и является заданный почтовый ящик. Параметр enctype="text/plain" используется для того, чтобы пересылать именно простой текст без каких-либо кодируемых частей, что значительно упрощает чтение такой почты. Далее создаем группу кнопок типа "RadioButton" и присваиваем им значения (1, 2, 3). Параметр checked указывает на значение по умолчанию. Строкой <input name="submit" type="submit" value="Отправить"> создаем кнопку, при нажатии на которую данные отправляются. Таким образом, на e-mail придет письмо следующего вида:
сhoice=2
submit=Отправить
Предопределенные объекты
В JavaScript имеется возможность использовать заранее заданные объекты. Полный список таких объектов (как и много другой полезной
информации) можно найти в официальной документации на язык фирмы Netscape. Для ознакомления и практики я ознакомлю вас только с объектами Date и Array. Начнем с примера, который выводит на экран часы и текущую дату.
<html>
<head>
<script Language="JavaScript">
<!--
var timePdpr, datePdpr;
function clock() {
newdat= new Date();
// тут пишем подпрограмму времени
hours= newdat.getHours();
minutes= newdat.getMinutes();
seconds= newdat.getSeconds();
timePdpr= "" + hours;
timePdpr+= ((minutes < 10) ? ":0" : ":") + minutes;
timePdpr+= ((seconds < 10) ? ":0" : ":") + seconds;
document.clock.time.value = timePdpr;
// тут пишем подпрограмму даты
date= newdat.getDate();
month= newdat.getMonth()+1;
year= newdat.getYear();
datePdpr= ((date < 10) ? "/0" : "") + date;
datePdpr+= "." + month;
datePdpr+= "." + year;
document.clock.date.value = datePdpr;
Timer= setTimeout("clock()",1000);
}
// -->
</script>
</head>
<body onLoad="clock()">
<form name="clock">
<b>Текущее время:</b>
<input type="text" name="time" size="6" value=""><br>
<b>Текущая дата:</b>
<input type="text" name="date" size="8" value=""><br>
</form>
</body>
</html>
Рис. 3. Результат выполнения программы "Часы"
Для начала рассмотрим общую структуру объекта Date, который позволяет работать как со временем, так и с датой. Вначале необходимо создать новый объект Date. Для этого используется оператор new: newdat= new Date(). Объекту Date присваиваем имя newdat. После выполнения команды newdat= new Date() вновь созданный объект newdat будет указывать дату и время, когда данная команда была выполнена. Объект Date предоставляет нам кое-какие методы, которые теперь могут применяться к нашему объекту newdat (например, getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth()). Хочу обратить ваше внимание на то, что объект Date не отслеживает автоматически время каждую миллисекунду (секунду), а лишь содержит определенную запись о дате и времени. Чтобы зафиксировать какие-либо другие дату и время, мы можем воспользоваться видоизмененным конструктором со следующим шаблоном: Date(year, month, day, hours, minutes, seconds). И еще одна заметка, в которой отмечу, что для обозначения января используется число 0, а не 1. Число 1 будет обозначать февраль.
Рассмотрим момент ежесекундной коррекции времени и даты. Для этого пользуемся методом setTimeout(). Фактически это сводится к кому, что каждую секунду создается новый объект Date, занося туда текущее время. Функция clock() вызывается программой обработки события onLoad, помещенной в тег <body>. В разделе body созданной HTML-страницы создаем два элемента формы для ввода текста. Функция clock() записывает в оба этих элемента в корректном формате текущие время и дату. Для этой цели используем две строки (созданные переменные): timePdpr и datePdpr. При задании минут в строке timeStr+= ((minutes < 10) ? ":0" : ":") + minutes решим также проблему с индикацией, когда количество минут меньше 10. Количество минут заносится в строку timeStr. Если у нас менее 10 минут, то мы еще должны приписать спереди 0. Упрощенный вид этой строки (более понятный) выглядит следующим образом:
if (minutes < 10) timeStr+= ":0" + minutes
else timeStr+= ":" + minutes;
Очень важным элементом в программировании также являются массивы. Допустим, вам необходимо хранить много имен, неудобно создавать для каждой из них отдельную переменную — гораздо проще создать для них массив. При этом к каждой переменной можно получить доступ, воспользовавшись общим названием и некоторым номером. В языке JavaScript для работы с массивами используется объект Array. Новый массив создается записью вида nameArray= new Array(). После чего можно заносить в массив значения. Очередное замечание: размер массива в JavaScript устанавливается динамически, поэтому старайтесь создавать компактные массивы.
Рассмотрим пример:
<script language="JavaScript">
<!--
testArray= new Array();
testArray[0]= "Иванов";
testArray[1]= "Петров";
testArray[2]= "Сидоров";
testArray[3]= 100;
testArray[4]= 250;
for (var i= 0; i< 5; i++) {
document.write(testArray[i] + "<br>");
}
// -->
</script>
Рис. 4. Результат выполнения программы работы с массивом
В программе мы создаем новый массив с именем testArray. Затем мы заносим в него 5 различных значений (3 текстовых и 2 числовых). Далее запускаем цикл, который выполняет команду document.write(testArray[i] + "<br>") пять раз. В переменной "i" ведется отсчет циклов от 0 до 4. Таким образом, в конструкции myArray[i] переменная "i" меняет значения от 0 до 4, и в итоге мы получаем пять различных вызовов document.write(). Если же нам необходимо вывести одну определенную запись, то необходимо просто указать ее номер в массиве вместо переменной "i".
Объект Image
С помощью объекта Image можно вносить изменения в графические образы, присутствующие на web-странице. В частности, это позволяет создавать мультипликацию. Адресация к изображениям в языке Java Script происходит следующим образом. Все изображения предстают в виде массива. Массив этот называется images и является свойством объекта document. Каждое изображение на странице получает порядковый номер (0 — первое изображение, 1 — второе и т.д.). Тогда адресация к изображению имеет следующую форму: document.images[n], где n — номер изображения. Объект Image имеет определенные свойства. Например, с помощью этих свойств можно определить размер изображения (свойства width и height). Таким образом, для определения ширины n-го изображения (в пикселях) используем запись: document.images[n].width. Уместно будет ваше замечание о том, что тяжело отслеживать индекс изображений, если их на странице большое количество. В таком случае необходимо присваивать изображениям собственные имена. К примеру, если вы создаете изображение с помощью строки: <img src="picture.gif" name="Im1" width=460 height=240>, то обратиться к нему можно строкой: document.Im1 либо document.images["Im1"].
Если стоит задача смены изображений на странице, необходимо использовать атрибут src, который также содержит адрес изображения. Назначив новый адрес изображению, уже загруженному в web-страницу, получим замену старого изображения на изображение с нового адреса. К примеру, если вначале записать строку: <img src="picture.gif" name="Im1" width=460 height=240>, которая загружает изображение picture.gif и получает имя Im1, а в последующей строке — document.Im1.src= "picture2.gif", то изображение с именем "picture.gif" будет заменено изображением "picture2.gif". Важно заметить, что размер поля изображения изменить при замене невозможно, новое изображение всегда получает тот же размер, что был у старого. Такой вид смены изображения имеет один большой недостаток: при записи в src нового адреса сразу начинается процесс загрузки соответствующего изображения. На эту операцию требуется дополнительное время, так как этого не было сделано заранее. Такая задержка, думаю, для вашего сайта будет неприемлема. Решением этой проблемы является упреждающая загрузка изображения. Для этого необходимо создать новый объект Image:
hiddenImg= new Image();
hiddenImg.src= "picture3.gif";
Первая строка, как и ранее, создает новый объект Image, а вторая указывает адрес изображения, которое в дальнейшем будет загружено с помощью объекта hiddenImg. Само название hiddenImg ("скрытая картинка") подразумевает, что после того, как браузер закончит загрузку, изображение на экране не появится, а оно лишь будет сохранено в кэше для последующего использования. Вызов изображения на экран в этом случае осуществляется строкой: document.Im1.src= hiddenImg.src. В завершение знакомства с объектом Image рассмотрим пример смены изображений, инициируемых пользователем. Код примера:
<a href="http:\\www.url.ru"
onMouseOver="document.Im1.src='1.jpg'"
onMouseOut="document.Im1.src='2.jpg'">
<img src="1.jpg" name="Im1" width=400 height=240 border=0></a>
В данном примере в окне браузера отображается изображение с именем "2.jpg", а при наведении курсора мыши на это изображение отображается картинка с именем "1.jpg". Если курсор теперь сместить с области картинки, то снова отобразится первоначальная картинка. Пример имеет ряд недостатков: второе изображение не было загружено, необходимо писать новые команды для каждого изображения на странице и др. Для решения этих проблем рекомендуется использовать массивы изображений. Реализацию этого кода я приводить не буду, потому как сам же при надобности использовал готовый текст программы Стефана Коха (Stefan Koch), который можно легко найти в Интернете.
Слои
Слои позволяют выполнять точное позиционирование изображения, перемещать объекты по странице, делать их невидимыми, вырезать части
изображений и многое другое. Язык Java Script обладает широкими возможностями для работы со слоями, но я не буду останавливаться на этом и просто поверхностно рассмотрю основные аспекты. Для создания слоев используются теги <layer> либо <ilayer>. Тег <layer> используется для тех слоев, которые можно точно позиционировать. Если же не указывается положение слоя, то по умолчанию он помещается в верхний левый угол окна. Тег <ilayer> создает слой, положение которого определяется при формировании документа. При работе со слоями используются основные параметры, которые сведены в таблицу 1.
Таблица 1. Параметры для работы со слоями
| Параметр | Описание |
| name="layerName" | Название слоя |
| left=xPosition | абсцисса левого верхнего угла |
| top=yPosition | ордината левого верхнего угла |
| z-index=layerIndex | номер индекса для слоя |
| width=layerWidth | ширина слоя в пикселях |
| clip="x1_offset,y1_offset,x2_offset,y2_offset" | задает видимую область слоя |
| above="layerName" | определяет, какой слой окажется под нашим |
| below="layerName" | определяется, какой слой окажется над нашим |
| Visibility=show|hide|inherit | видимость этого слоя |
| bgcolor="rgbColor" | цвет фона: либо название стандартного цвета, либо rgb-запись |
| background="imageURL" | фоновая картинка |
Рассмотрим один простой пример. Создадим два слоя. В первом из них мы помещаем изображение, а во втором — текст. Задача — показать этот текст поверх данного изображения.
<html>
<layer name=pictur z-index=0 left=200 top=100>
<img src="pictures1.gif" width=160 height=120>
</layer>
<layer name=txt z-index=1 left=200 top=100>
<font size=+4> <i> Помещенный текст </i> </font>
</layer>
</html>
С помощью тега <layer> формируются два слоя. Оба слоя через параметры left и top позиционируются как 200/100. Используем параметр z-index, определяя тем самым порядок появления указанных слоев, то есть в примере сообщаем браузеру, что текст будет написан поверх изображения. Для z- index можно выбирать не только значения 0 и 1, но и любое положительное число.
Заключение
На этом хочу закончить данную статью. Мы рассмотрели основные принципы работы с языком Java Script и немного попрактиковались. Много я решил не упоминать, не рассматривать потому, что массу дополнительной информации вы сможете найти в официальной документации фирмы Netscape, и, зная принципы программирования на Java, разобраться с ней вам не составит труда.
Кучинский Павел, p@welk, pawelk_kg@tut.by
Компьютерная газета. Статья была опубликована в номере 43 за 2005 год в рубрике программирование :: java
