JavaScript – Урок 9. Объекты 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"                       < td> < input type=" text" name=" name" size=" 25" > < /td>                    < /tr>                    < tr> < td align=" right"                       < td> < input type=" text" name=" e-mail" size=" 25" > < /td>                    < /tr>                    < tr> < td align=" right" > Пароль< /td>                        < td> < input type=" password" name=" password" size=" 25" > < /td>                    < /tr>                    < tr> < td align=" right" > Повтор пароля< /td>                        < td> < input type=" password" name=" password1" size=" 25" > < /td>                    < /tr>                    < tr> < td align=" right" > Пол< /td>                        < td> < input type=" radio" name=" sex" value=" man" checked> мужской                           < input type=" radio" name=" sex" value=" woman" > женский                       < /td>                    < /tr>                    < tr> < td align=" right"                       < 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" пожелания< /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, найти в нем нужный объект и посмотреть его свойства и методы. Целью же этого урока было показать на примере, как обратиться к объекту страницы и использовать информацию введенную пользователем.

⇐ Предыдущая3456789101112Следующая ⇒

Поделиться: