Практикум по программированию на JavaScript

Поля формы и свойство value

Показывать лекцию целиком

Концепция

Сегодня мы продолжим начатое в Уроке 17. Будем передавать в функцию данные, которые пользователь введет в поле формы. Затем эти данные будут использованы для поиска в Yahoo.

Сценарий

<SCRIPT type="text/javascript">

function Gofindit(){
 var searchfor = document.formsearch.findthis.value;    
{                                
 var FullSearchUrl = 
"http://www.yahoo.com/bin/query?p=" + searchfor ;
location.href = FullSearchUrl;
}}

</SCRIPT>

<FORM NAME="formsearch" action="">
Найдите в Yahoo:
<INPUT NAME="findthis" SIZE="40" TYPE="text">
<INPUT TYPE="button" VALUE="Искать"
onClick="Gofindit()">
</FORM>

Результат работы сценария

На странице выводится строка "Найдите в Yahoo:", поле ввода и кнопка с надписью "Искать".

Разбор сценария

Этот сценарий снова требует четкого понимания иерархии объектов.

  • Во-первых, создаем функцию с переменной searchfor (искать) под названием formsearch, внутри элемента findthis (найти), который обладает свойством value (значение). Она будет результатом чего-то происходящего в объекте document.
  • Вторую функцию помещаем внутри первой. Видите вторую пару {фигурных скобок}?
  • Для второй функции создаем еще одну переменную FullSearchUrl, которая представляет собой адрес поисковой машины Yahoo плюс значение переменной searchfor, полученное через команду document.formsearch.find.value.
  • Наконец, location.href приравнивается переменной FullSearchUrl. После выполнения функции пользователь попадет на итоговую страницу поиска.
  • Теперь переходим к командам формы. Их две: текстовое поле ( TEXT ), куда пользователь вводит свой запрос, и кнопка, запускающая функцию.
  • Обратите внимание, что форма в целом называется formsearch. Помните, что мы говорили об иерархии объектов?
  • Затем для текстового поля задаем имя findthis. Опять иерархия. Видите, как мы идем от большого к малому?
  • Дальше соединяем кнопку с командой onClick, которая запускает функцию.
  • Наконец заканчиваем форму командой </FORM>. Готово.
    •

    Задание

    Измените сценарий так, чтобы он вызывал другую поисковую систему. И еще, пусть при отправке запроса появляется окошко с надписью "Сейчас поищем..."

    Возможное решение

    Поиск в Яndex

    Если известен адрес поисковой машины, тогда никаких особых трудностей не будет. Но как его узнать? Идите на сайт, начните поиск и скопируйте адрес из адресной строки.

    Раз нам нужно, чтобы окно всплывало до завершения поиска, убедитесь, что оно стоит у вас первым. Вот сценарий, который выполняет эту работу:

    <SCRIPT type="text/javascript">

function Gofindit()
{ 
alert("Сейчас поищем..."); 
var search = document.formsearch.find.value; 
{ 
var searchUrl = "http://www.yandex.ru/yandsearch?ctgl=11657text=" + search;
location.href = searchUrl; 
}}

</script>


<form name="formsearch"> 
Поискать в Яndex:  
<input type="button" value="Найти" onClick="Gofindit()"> 
</form>
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^