2015-10-22
189
На странице выводится строка "Найдите в Yahoo:", поле ввода и кнопка с надписью "Искать".
Разбор сценария
Этот сценарий снова требует четкого понимания иерархии объектов.
1. Во-первых, создаем функцию с переменной searchfor(искать) под названием formsearch, внутри элемента findthis (найти), который обладает свойством value (значение). Она будет результатом чего-то происходящего в объекте document.
2. Вторую функцию помещаем внутри первой. Видите вторую пару {фигурных скобок}?
3. Для второй функции создаем еще одну переменную FullSearchUrl, которая представляет собой адрес поисковой машины Yahoo плюс значение переменной searchfor, полученное через команду document.formsearch.find.value.
4. Наконец, location.href приравнивается переменной FullSearchUrl. После выполнения функции пользователь попадет на итоговую страницу поиска.
5. Теперь переходим к командам формы. Их две: текстовое поле (TEXT), куда пользователь вводит свой запрос, и кнопка, запускающая функцию.
6. Обратите внимание, что форма в целом называется formsearch. Помните, что мы говорили об иерархии объектов?
7. Затем для текстового поля задаем имя findthis. Опять иерархия. Видите, как мы идем от большого к малому?
8. Дальше соединяем кнопку с командой onClick, которая запускает функцию.
9. Наконец заканчиваем форму командой </FORM>. Готово.
Задание
Измените сценарий так, чтобы он вызывал другую поисковую систему. И еще, пусть при отправке запроса появляется окошко с надписью "Сейчас поищем..."
Возможное решение
Поиск в Яndex
Если известен адрес поисковой машины, тогда никаких особых трудностей не будет. Но как его узнать? Идите на сайт, начните поиск и скопируйте адрес из адресной строки.
Раз нам нужно, чтобы окно всплывало до завершения поиска, убедитесь, что оно стоит у вас первым. Вот сценарий, который выполняет эту работу:
<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> <form name="formsearch"> Поискать в Яndex: <input type="button" value="Найти" onClick="Gofindit()"> </form>19. Урок: Передача данных в функцию
Базовые аспекты обработки данных функциями.
Концепция
Продолжим разговор о взаимодействии форм и JavaScript. Здесь становится особенно важно понимание иерархии объектов и работы функций.
Обычно JavaScript в соединении с формами используется для проверки ввода данных. Мы еще поговорим на эту тему.
Сценарий
Здесь снова представлен весь документ HTML, чтобы показать размещение отдельных элементов.
<HTML><HEAD><SCRIPT type="text/javascript">function doit(){ alert("document.myform.fname.value — это " + document.myform.fname.value) var greeting="Привет " alert(greeting + document.myform.fname.value + " " + document.myform.lname.value) alert("Длина имени " + document.myform.fname.value.length)}</SCRIPT></HEAD><BODY><FORM NAME="myform" action=""> Ваше имя? <INPUT TYPE="text" NAME="fname"><p> Ваша фамилия? <INPUT TYPE="text" NAME="lname"><p> <INPUT TYPE="button" VALUE="Отправить" onClick="doit()"></FORM></BODY></HTML>
