2.12 Функция внутри формы
Очень часто JavaScript используется в формах. Следующий скрипт через форму позволяет выбрать цвет фона.
Формы всегда начинаются командой <FORM> и заканчиваются командой </FORM>. Вот скрипт и форма:
function newcolor(color) { alert("Вы выбрали " + color) document.bgColor=color } <FORM> <INPUT TYPE="button" VALUE="Голубой" onClick="newcolor('lightblue')"> <INPUT TYPE="button" VALUE="Розовый" onClick="newcolor('pink')"> <INPUT TYPE="button" VALUE="Вернуть" onClick="newcolor('white')"> </FORM>
-
Обратите внимание, мы передаем в функцию newcolor() (новый цвет) неизменяемую строку текста, стоящую в скобках ('lightblue'). Она находится в одинарных кавычках, потому что имя функции стоит в двойных.
-
Когда вы нажимаете кнопку, строка в скобках передается в функцию newcolor().
-
Функция ждет, пока поступит необходимая ей информация. Во всех функциях до сих пор скобки были пустые потому, что у них были все необходимые данные. В данном случае дополнительная информация поступает в функцию, когда пользователь нажимает на кнопку. Кнопка содержит ту же функцию, только теперь у нее есть необходимые данные, то есть цвет. Форма передает цвет двум элементам в разделе <SCRIPT>: методу alert и строке document.bgColor. Получив все данные, функция вступает в действие: всплывает окно и меняется цвет фона.
-
Не запутайтесь: VALUE (значение) в команде INPUT не является свойством JavaScript, она помещает текст на кнопку.
Рассмотренные выше команды приведены в примере 2.14, а результат выполнения на рис. 2.14.
|
Пример 2.14. Выбор цвета фона через форму |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Выбор цвета фона</TITLE> <SCRIPT type="text/javascript"> function newcolor(color) { alert("Вы выбрали " + color) document.bgColor=color } </SCRIPT> </HEAD> <BODY aLink=#d0550b bgColor=white link=#334775 text=#334775 vLink=#334775> <FONT face="Arial Cyr"> <P>Выбрать цвет фонa</P> <FORM> <P> <INPUT onclick="newcolor('lightblue')" type=button value=Голубой> <INPUT onclick="newcolor('pink')" type=button value=Pозовый> <INPUT onclick="newcolor('white')" type=button value=Вернуть> </FORM> </FONT> </BODY> </HTML>
|
2.13 Поля форм и свойство value
Продолжим начатое в предыдущем примере - будем передавать в функцию данные, которые пользователь введет в поле формы. Затем эти данные будут использованы для поиска в Yahoo. Скрипт и форма:
<SCRIPT type="text/javascript"> function Gofindit() { var search = document.formsearch.find.value; { var searchUrl = "http://av.yahoo.com/bin/query?p=" + search; location.href = searchUrl;}} </SCRIPT>
<FORM NAME="formsearch">Найдите в Yahoo: <INPUT NAME="find" SIZE="40" TYPE="text"> <INPUT TYPE="button" VALUE="Искать" onClick="Gofindit()"> </FORM>
От вас снова потребуется четкое понимание иерархии объектов.
-
Во-первых, создаем функцию с переменной search(искать), которая будет результатом чего-то, происходящего в объекте document, под названием formsearch, внутри элемента find (найти), который обладает свойством value(значение).
-
Вторую функцию помещаем внутри первой. Видите вторую пару {фигурных скобок}?
-
Для второй функции создаем еще одну переменную searchUrl, представляющую собой адрес поисковой машины Yahoo плюс значение переменной search, полученное через команду document.formsearch.find.value.
-
Наконец, location.href приравнивается к переменной searchUrl. После выполнения функции пользователь попадет на итоговую страницу.
-
Теперь переходим к командам формы. Их две: текстовое поле, куда пользователь вводит свой запрос, и кнопка, запускающая функцию.
-
Обратите внимание, что форма в целом получила имя formsearch. Помните, что мы говорили об иерархии объектов?
-
Затем называем текстовое поле find. Опять иерархия. Видите, как мы идем от большого к малому?
-
Дальше соединяем кнопку с командой onClick, которая запускает функцию.
-
Наконец заканчиваем командой </FORM>. Готово.
В примере 2.15 приведен рассмотренный выше скрипт, измененный так, чтобы использовалась поисковая система Яndex, а при подаче запроса выскакивало окошко с надписью «Сейчас поищем...». Результат приведен на рис.2.15.
|
Пример 2.15. Поиск информации с помощью данных, введенных в форму |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Поиск информации</TITLE> <SCRIPT type="text/javascript"> function Gofindit(){ alert("Сейчас поищем..."); var search = document.formsearch.find.value; { var searchUrl = "http://www.yandex.ru/yandsearch?ctgl=11657&text=" + search; location.href = searchUrl; }} </SCRIPT> </HEAD> <BODY> <P> <FORM name=formsearch><B>Поискать в Яndex:</B> <INPUT name=find> <INPUT onclick=Gofindit() type=button value=Найти> </FORM> </BODY> </HTML>
|
