Выделение определенного элемента формы

С помощью метода focus() Вы можете сделать вашу форму более дружественной. Так, Вы можете выбрать, который элемент будет выделен в первую очередь. Либо Вы можете приказать браузеру выделить ту форму, куда были введены неверные данные. Сделать это Вы можете с помощью следующего фрагмента скрипта:

function setfocus() {

document.first.text1.focus();

}

Начало формы

 

Конец формы

Эта запись могла бы выделить первый элемент для ввода текста в скрипте. Вы должны указать имя для всей формы - в данном случае она называется first - и имя одного элемента формы - text1. Если Вы хотите, чтобы при загрузке страницы данный элемент выделялся, то для этого Вы можете дополнить тэг <body> атрибутом onLoad. Это будет выглядеть как:

<body onLoad="setfocus()">

 

Остается еще дополнить пример следующим образом:

 

function setfocus() {

document.first.text1.focus();

document.first.text1.select();

}

Попробуйте следующий код:

Начало формы

 

Конец формы

При этом не только будет выделен элемент, но и находящийся в нем текст.

Контрольные вопросы:

1. Для чего иногда нужно ограничивать информацию, вводимую в форму? Как это сделать на JavaScript?

2. Какие существуют способы передачи данных формы?

3. Для чего предназначен метод focus()?

4. В каких целях используется программа обработки событий onSubmit?



Лабораторная работа

Объект 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-странице (в пикселях).

К сожалению, отслеживать индекс всех изображений может оказаться затруднительным, особенно если на одной странице у Вас их довольно много. Эта проблема решается назначением изображениям своих собственных имен. Так, если Вы заводите изображение с помощью тэга

<img src="img.gif" name="myImage" height=100>

то Вы сможете обращаться к нему, написав document.myImage или document.images["myImage"].


Загрузка новых изображений

Хотя конечно и хорошо знать, как можно получить размер изображения на web-странице, это не совсем то, чего бы мы хотели. Мы хотим осуществлять смену изображений на web-странице и для этого нам понадобится атрибут src. Как и в случае тэга <img>, атрибут src содержит адрес представленного изображения. Теперь - в языке JavaScript 1.1 - Вы имеете возможность назначать новый адрес изображению, уже загруженному в web-страницу. И в результате, изображение будет загружено с этого нового адреса, заменив на web-странице старое. Рассмотрим к примеру запись:

<img src="img1.gif" name="myImage" height=100>

Здесь загружается изображение img1.gif и получает имя myImage. В следующей строке прежнее изображение img1.gif заменяется уже на новое - img2.gif:

document.myImage.src= "img2.src";

При этом новое изображение всегда получает тот же размер, что был у старого. И Вы уже не можете изменить размер поля, в котором это изображение размещается.

Начало формы

Конец формы

Дата: 2018-09-13, просмотров: 96.