HTML, XHTML и CSS на 100%, Квинт Игорь

HTML, XHTML и CSS на 100%

на обложку

Квинт Игорь

Шрифт:

Точно так же нужно поступать по отношению к любому элементу формы. Вместо elements[0] вы можете указывать оператор name. Вместо name = document. forms[0].elements[0].value можно записать name = document.myf orm. element name.value.

Такой прием значительно упрощает доступ к элементам HTML-документа, а следовательно, и программирование на JavaScript, особенно в случае с большими веб-страницами, содержащими множество объектов.

Внимание!

При написании имен объектов обязательно следите за положением регистра. Нельзя писать Myform вместо myform, поскольку язык JavaScript чувствителен к регистру и будет воспринимать их как совершенно разные имена объектов.

Таким образом, доступ к объектам HTML-документа можно получить двумя способами:

• используя коллекции и нумерацию объектов;

• присваивая каждому объекту уникальное имя.

В любом из этих случаев вам необходимо будет определить имя объекта и всех его предков. Объект высшего уровня всегда находится слева в выражении, и слева направо происходит переход к дочерним объектам. По правилам языка JavaScript родительские и дочерние объекты отделяются друг от друга точками.

Рассмотрим несколько примеров, иллюстрирующих способы доступа к объектам веб-страницы.

В листинге 10.22 приведен текст сценария, в котором данные, введенные пользователем в поле формы, передаются в функцию для дальнейшей обработки.

Листинг 10.22. Передача данных в функцию

<html>

<head>

<!–Код JavaScript –>

function doit

{

var greeting="Мне нравится "

alert(greeting + document.aform.color.value

+ " " + document.aform.geometr.value)

var prich="Потому, что "

alert(prich + document.aform.prichina.value)

alert("Количество букв в названии вашей фигуры "

+ document.aform.geometr.value.length)

}

</script>

</head>

<body>

<!–Форма –>

Ваша любимая геометрическая фигура:

Ваш любимый цвет:

Почему вам нравится эта фигура:

</form>

</center>

</body>

</html>

В данном HTML-документе расположена форма с полями ввода и кнопкой (рис. 10.22). При ее нажатии обработчик событий onClick запускает функцию doit, обрабатывающую данные, введенные пользователем в поля формы.

Рис. 10.22. Элементы формы

Доступ к объектам формы в данном сценарии организован путем присвоения каждому объекту формы уникального имени и перечисления всех объектов в соответствии с их иерархией в документе.

Самой форме присвоено имя aform. Каждому полю ввода также присвоены уникальные имена: geometr, color, prichina. Введенные пользователем данные передаются в функцию как значение value. В соответствии с иерархией объектов на первом месте стоит объект Document, далее идет форма, затем поле формы и, наконец, значение поля – текст, введенный пользователем.

В сценарии эта цепочка объектов выглядит следующим образом: document. aform.geometr.value. Таким образом, функция doit получает данные пользователя из значения value поля geometr формы aform в HTML-документе document. Аналогично происходит передача данных в функцию из других полей формы.

Данные, полученные от формы, отображаются функцией в окне Alert (рис. 10.23).