Предположим, у нас есть вот такая web-страница:
Ее 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, найти в нем нужный объект и посмотреть его свойства и методы. Целью же этого урока было показать на примере, как обратиться к объекту страницы и использовать информацию введенную пользователем.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как создать сайт → Уроки JavaScript → Объекты JavaScript
Объекты JavaScript
В уроке 3 мы уже затрагивали эту тему. Сейчас поговорим об этом более подробно. В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент представляется в виде объекта. И каждый такой объект может иметь определенные свойства и методы.Предположим, у нас есть вот такая web-страница:
Ее html-код:
Чтобы получить доступ к объекту, следует указать весь путь от вершины иерархии до нужного элемента. Так, путь к первой картинке выглядит так:
Например, наша форма имеет имя forma1, а первое текстовое поле - имя name. Тогда, чтобы получить к нему доступ, мы должны написать:
Предположим, мы хотим, чтобы в зависимости от выбранных пола и увлечения, пользователю выдавалось какое-либо сообщение. Перепишем функцию prov():
В JavaScript много объектов. Чтобы выяснить, какое из свойств и методов объекта позволяет получить доступ к нужной информации, необходимо обратиться к какому-либо справочнику по JavaScript, найти в нем нужный объект и посмотреть его свойства и методы. Целью же этого урока было показать на примере, как обратиться к объекту страницы и использовать информацию введенную пользователем.
Предыдущий урок Вернуться в раздел Следующий урок
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
|
Код кнопки: |
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
|
|