Меню сайта
Категории раздела
| HTML [44] |
| Visual C++ и MFC [21] |
| c++ [78] |
| php [19] |
| Javascript [15] |
| C# [51] |
| загрузки [0] |
|
XNA
[10]
создание игр с помощью xna
|
Наш опрос
Друзья сайта
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Реклама
| Главная » Статьи » Javascript |
Урок 9
Предположим, у нас есть вот такая 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, найти в нем нужный объект и посмотреть его свойства и методы. Целью же этого урока было показать на примере, как обратиться к объекту страницы и использовать информацию введенную пользователем. | |
| Просмотров: 1194 | Рейтинг: 0.0/0 |
| Всего комментариев: 0 | |
