Рассмотрим теперь функцию
test2(form) . Здесь вновь сравнивается введенная строка с пустой - "" (чтобы удостовериться, что что-то действительно было введено читателем). Однако к команде if мы добавили еще кое-чего. Комбинация символов || называется оператором OR (ИЛИ).
Команда if проверяет, чем заканчивается первое или второе сравнения. Если хотя бы одно из них выполняется, то и в целом команда if имеет результатом true, а стало быть будет выполняться следующая команда скрипта. Словом,
Вы получите сообщение об ошибке, если либо предоставленная Вами строка пуста, либо в ней отсутствует символ @. (Второй оператор в команде if следит за тем, чтобы введенная строка содержала @.)
Проверка на присутствие определенных символов В некоторых
случаях Вам понадобится ограничивать информацию , вводимую в форму, лишь некоторым набором символов или чисел.
Достаточно вспомнить о телефонных номерах - представленная информация должна содержать лишь цифры (предполагается, что номер телефона, как таковой, не содержит никаких символов). Нам необходимо проверять, являются ли введенные данные числом. Сложность ситуации состоит в том, что большинство людей вставляют в номер телефона еще и разные символы - например: 01234-56789, 01234/56789 or 01234 56789 (с символом пробела внутри). Не следует принуждать пользователя отказываться от таких символов в телефонном номере. А потому мы должны дополнить наш скрипт процедурой проверки цифр и некоторых символов.
Telephone:
Исходный код этого скрипта:
enctype="text/plain"> enctype="text/plain" используется для того, чтобы пересылать именно простой текст без каких-либо кодируемых частей.
function setfocus() { document.first.text1.focus(); document.first.text1.select();
}
Попробуйте следующий код: bla bla bl
При
этом не только будет выделен элемент , но и находящийся в нем текст.
Контрольные вопросы: 1.
Для чего иногда нужно ограничивать информацию, вводимую в форму? Как это сделать на JavaScript?
2.
Какие существуют способы передачи данных формы?
3.
Для чего предназначен метод focus()?
4.
В каких целях используется программа обработки событий onSubmit?
Лабораторная работа № 14 Объект Image Цели: Изучить возможности объекта Image. Разобрать способы загрузки изображений.
Изображения на web-странице Рассмотрим теперь объект Image, который стал доступен, начиная с версии с 1.1 языка JavaScript (то есть с Netscape Navigator 3.0). С помощью объекта Image Вы можете вносить изменения в графические образы, присутствующие на web-странице. В частности, это позволяет нам создавать мультипликацию.
Заметим, что пользователи браузеров более старых версий (таких как
Netscape Navigator 2.0 или Microsoft Internet Explorer 3.0 - т.е. использующих версию 1.0 языка JavaScript) не смогут запускать скрипты, приведенные в этой части описания. Или, в лучшем случае, на них нельзя будет получить польный эффект.
Давайте сначала рассмотрим, как из JavaScript можно адресоваться к изображениям, представленным на web-странице. В рассматриваемом языке все изображения предстают в виде массива. Массив этот называется
images и является свойством объекта document. Каждое изображение на web-странице получает порядковый номер: первое изображение получает номер 0, второе - номер 1 и т.д. Таким образом, к первому изображению мы можем адресоваться, записав document.images[0].
Каждое изображение в HTML-документе рассматривается в качестве объекта Image. Объект Image имеет определенные свойства, к которым и можно обращаться из языка JavaScript. Например, Вы можете определить, который размер имеет изображение, обратившись к его свойствам
width и
height . То есть по записи document.images[0].width Вы можете определить ширину первого изображения на web-странице (в пикселях).
К сожалению, отслеживать индекс всех изображений может оказаться затруднительным, особенно если на одной странице у Вас их довольно много. Эта проблема решается назначением изображениям своих собственных имен. Так, если Вы заводите изображение с помощью
тэга то Вы сможете обращаться к нему , написав document.myImage или document.images["myImage"].
Загрузка новых изображений Хотя конечно и хорошо знать, как можно получить размер изображения на web-странице, это не совсем то, чего бы мы хотели. Мы хотим осуществлять смену изображений на web-странице и для этого нам понадобится атрибут
src . Как и в случае тэга
, атрибут
src содержит адрес представленного изображения. Теперь - в языке JavaScript 1.1 - Вы имеете возможность назначать новый адрес изображению, уже загруженному в web-страницу. И в результате, изображение будет загружено с этого нового адреса, заменив на web-странице старое. Рассмотрим к примеру запись:
Здесь загружается изображение
img1.gif и получает имя
myImage . В следующей строке прежнее изображение
img1.gif заменяется уже на новое -
img2.gif : document.myImage.src= "img2.src";
При этом новое изображение всегда получает тот же размер, что был у старого. И Вы уже не можете изменить размер поля, в котором это изображение размещается.
Упреждающая загрузка изображения Один из недостатков такого подхода может заключаться в том, что
после записи в
src нового адреса начинает процесс загрузки соответствующего изображения. И поскольку этого не было сделано заранее, то еще пройдет некоторое время, прежде чем новое изображение будет передано через Интернет и встанет на свое место. В
некоторых ситуациях это допустимо , однако часто подобные задержки неприемлемы. И что же мы можем сделать с этим? Конечно, решением проблемы была бы упреждающая загрузка изображения. Для этого мы должны создать новый объект Image.
Рассмотрим следующие строки: hiddenImg= new Image(); hiddenImg.src= "img3.gif";
В первой строке создается новый объект Image. Во второй строке указывается адрес изображения, которое в дальнейшем будет представлено с помощью объекта
hiddenImg . Как мы уже видели, запись нового адреса в атрибуте
src заставляет браузер загружать изображение с указанного адреса.
Поэтому, когда выполняется вторая строка нашего примера, начинает загружаться изображение
img2.gif . Но как подразумевается самим названием
hiddenImg ("скрытая картинка"), после того, как браузер закончит загрузку, изображение на экране не появится. Оно будет лишь будет сохранено в памяти компьютера (или точнее в кэше) для последующего использования.
Чтобы вызвать изображение на экран, мы можем воспользоваться строкой: document.myImage.src= hiddenImg.src;
Но теперь изображение уже немедленно извлекается из кэша и показывается на экране. Таким образом, сейчас мы управляли упреждающей загрузкой изображения.
Конечно браузер должен был к моменту запроса закончить упреждающую загрузку, чтобы необходимое изображение было показано без задержки. Поэтому, если Вы должны предварительно загрузить большое количество изображений, то может иметь место задержка, поскольку браузер будет занят загрузкой всех картинок. Вы всегда должны учитывать скорость связи с Интернет - загрузка изображений не станет быстрее, если пользоваться только что показанными командами. Мы лишь пытаемся чуть раньше загрузить изображение - поэтому и пользователь может увидеть их раньше. В результате и весь процесс пройдет более гладко.
Изменение изображений в связи с событиями Вы
можете создать красивые эффекты , используя смену изображений в качестве реакции на определенные события. Например, Вы можете изменять изображения в тот момент, когда курсор мыши попадает на определенную часть страницы. Проверьте, как работает следующий пример, просто поместив курсор мыши на картинку (впрочем, при этом Вы получите сообщение об ошибке, если пользуетесь браузером, поддерживающим лишь
JavaScript 1.)
Исходный код этого примера выглядит следующим образом: onMouseOver="document.myImage2.src='img2.gif'" onMouseOut="document.myImage2.src='img1.gif'"> border=0>
При этом могут возникнуть следующие проблемы:
• пользователь пользуется браузером, не имеющим поддержки JavaScript 1.1.
•
Второе изображение не было загружено.
•
Для этого мы должны писать новые команды для каждого изображения на web-странице.
•
Мы хотели бы иметь такой скрипт, который можно было бы использовать во многих web-страницах вновь и вновь, и без больших переделок.
Теперь мы рассмотрим полный вариант скрипта, который мог бы решить эти проблемы. Хотя скрипт и стал намного длиннее - но написав его один раз, Вы не больше будете беспокоиться об этих проблемах.
Чтобы этот скрипт сохранял свою гибкость, следует соблюдать два условия:
•
Не оговоривается количество изображений - не должно иметь значения, сколько их используется, 10 или 100
•
Не оговоривается порядок следования изображений - должна существовать возможность изменять этот порядок без изменения самого кода
Посмотрим этот код в работе:
Рассмотрим скрипт:
onMouseOut="off()"> width="140" height="50" border="0"> onMouseOut="off()"> width="140" height="50" border="0"> onMouseOut="off()"> width="140" height="50" border="0">
представлена, пока курсор мыши не попадает в область изображение. Когда же пользователь помещает курсор мыши на изображение, то появляется вторая картинка. При вызове функции preload() в качестве первого аргумента мы указываем слово
"link1" и тем самым задаем на web-странице объект
Image, которому и будут принадлежать оба предварительно загруженных изображения. Если Вы посмотрите в нашем примере в раздел , то обнаружите изображение с тем же именем
link1 . Мы пользуем не порядковый номер, а именно имя изображения для того, чтобы иметь возможность переставлять изображения на web-странице, не переписывая при этом сам скрипт.
Обе функции on() и off() вызываются посредством программ обработки событий onMouseOver и onMouseOut. Поскольку сам элемент image не может отслеживать события MouseOver и MouseOut, то мы обязаны сделать на этих изображениях еще и ссылки.
Можно видеть, что функция on() возвращает все изображения, кроме указанного, в исходное состояние. Делать это необходимо потому, что в противном случае выделеными могут оказаться сразу несколько изображений (дело в том, что событие MouseOut не
будет зарегистрировано , если пользователь переместит курсор с изображения сразу за пределы окна).
Изображения - без сомнения могучее средство улучшения Вашей web- страницы. Объект Image дает Вам возможность создавать действительно сложные эффекты. Однако заметим, что
не всякое изображение или программа JavaScript способно улучшить Вашу страницу. Если Вы пройдетесь по Сети, то сможете увидеть множество примеров, где изображения использованы самым ужасным способом. Не количество изображений делает Вашу web-страницу привлекательной, а их качество.
Сама загрузка 50 килобайт плохой графики способна вызвать раздражение.
При создании специальных эффектов с изображениями с помощью JavaScript помните об этом и ваши посетителями/клиентами будут чаще возвращаться на Ваши страницы.
Контрольные вопросы: 1.
Для чего предназначен объект Image?
2.
Как из JavaScript можно адресоваться к изображениям?
3.
Для чего служит атрибут
src тэга
?
4.
Чтобы скрипт смены изображений сохранял свою гибкость, какие условия следует соблюдать?
5.
Объясните назначение функции функция preload().
Скачать 368.4 Kb.