Как создать сайтУроки JavaScript → Объекты JavaScript

Объекты JavaScript

В уроке 3 мы уже затрагивали эту тему. Сейчас поговорим об этом более подробно. В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент представляется в виде объекта. И каждый такой объект может иметь определенные свойства и методы.

Предположим, у нас есть вот такая web-страница:


Перед регистрацией ознакомьтесь с правилами.

Форма регистрации
Имя
e-mail
Пароль
Повтор пароля
Полмужской женский
Увлечения
Ваши пожелания


Ее html-код:
<html> <head> <title>javascript if</title> <link rel="stylesheet" type="text/css" href="style1.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <img src="images/pict1.gif"><br><br> <center> Перед регистрацией ознакомьтесь <a href="#">с правилами</a>.<br><br> <form name="forma1"> <table border="0" cellspacing="5" cellpadding="5"> <caption>Форма регистрации</caption> <tr><td align="right" valign="top">Имя</td> <td><input type="text" name="name" size="25"></td> </tr> <tr><td align="right" valign="top">e-mail</td> <td><input type="text" name="e-mail" size="25"></td> </tr> <tr><td align="right" valign="top" >Пароль</td> <td><input type="password" name="password" size="25"></td> </tr> <tr><td align="right" valign="top" >Повтор пароля</td> <td><input type="password" name="password1" size="25"></td> </tr> <tr><td align="right" valign="top" >Пол</td> <td><input type="radio" name="sex" value="man" checked>мужской <input type="radio" name="sex" value="woman"> женский </td> </tr> <tr><td align="right" valign="top">Увлечения</td> <td><select name="hobby" size="7" multiple> <option selected value="1">компьютеры <option value="2">спорт <option value="3">игры <option value="4">животные <option value="5">автомобили <option value="6">клубы <option value="7">музыка </select> </td> </tr> <tr><td align="right" valign="top">Ваши пожелания</td> <td><textarea cols="30" rows="3" wrap="physical"></textarea> </td> </tr> <tr><td align="right" colspan="2"> <input type="submit" name="submit" value="Отправить"> <input type="reset" name="reset" value="Очистить"> </td> </tr> </table> </form> <img src="images/pict2.gif"> </center> </body> </html>
Иерархия объектов, создаваемая этой html-страницей, выглядит так:



Каждый объект этой структуры имеет свое имя и индекс. Индекс определяется положением объекта на странице (сверху вниз). Поэтому картинка, которая расположена выше на странице имеет меньший номер. Нумерация начинается с 0. Объект forms имеет свойство-массив - elements , в котором содержатся ссылки на элементы формы в порядке их перечисления в теге form . Их нумерация также начинается с 0. У объектов формы могут быть свои подчиненные объекты. В нашем примере у объекта elements[6] , который является списком, это пункты списка, которые имеют свою внутреннюю нумерацию.

Чтобы получить доступ к объекту, следует указать весь путь от вершины иерархии до нужного элемента. Так, путь к первой картинке выглядит так:
document.images[0]
Путь к форме:
document.forms[0]
Путь к списку:
document.forms[0].elements[6]
А путь к третьему пункту списка:
document.forms[0].elements[6][2]
Согласитесь, что такой подход не всегда удобен, так как легко запутаться во всех этих индексах. Поэтому всем элементам на странице обычно даются имена и доступ к элементам осуществляется по именам.

Например, наша форма имеет имя forma1, а первое текстовое поле - имя name. Тогда, чтобы получить к нему доступ, мы должны написать:
document.forma1.name
Чтобы узнать, что пользователь ввел в это текстовое поле, используется свойство value:
document.forma1.name.value
Предположим, мы хотим осуществлять проверку на совпадение двух полей ввода пароля в нашем примере. Для этого напишем следующую функцию:
function prov(){ var a=document.forma1.elements[2].value; var b=document.forma1.elements[3].value; if (a==b){ alert ("Вы зарегистрированы!"); } else { alert ("Введите правильный пароль."); } }
Пусть эта функция срабатывает при нажатии на кнопку "Отправить":
... ... ... <input type="submit" name="submit" value="Отправить" onclick="prov();"> ... ... ...
Чтобы узнать, какой пол указал пользователь, используется свойство переключателей checked. А для определения выбранного пользователем пункта из списка - свойство selected.

Предположим, мы хотим, чтобы в зависимости от выбранных пола и увлечения, пользователю выдавалось какое-либо сообщение. Перепишем функцию prov():
function prov(){ if (document.forma1.elements[4].checked && document.forma1.elements[6][3].selected){ alert ("Мужчина, который любит животных заслуживает уважения."); } else if (document.forma1.elements[5].checked && document.forma1.elements[6][4].selected) { alert ("Женщина за рулем всегда вызывает интерес."); } else { alert ("Отличное увлечение."); } }
* && - логическое И, было рассмотрено в уроке 1 *

В JavaScript много объектов. Чтобы выяснить, какое из свойств и методов объекта позволяет получить доступ к нужной информации, необходимо обратиться к какому-либо справочнику по JavaScript, найти в нем нужный объект и посмотреть его свойства и методы. Целью же этого урока было показать на примере, как обратиться к объекту страницы и использовать информацию введенную пользователем.



Предыдущий урок Вернуться в раздел Следующий урок 
Если этот сайт оказался вам полезен, вы можете помочь в его развитии, поставив одну из этих ссылок на свой сайт.
Уроки PHP Уроки PHP Уроки PHP Уроки PHP Уроки PHP Уроки PHP
Код кнопки:



Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.