Разбор скрипта
Начнем с элементов формы:
<FORM NAME="myform"> Ваше имя: <INPUT TYPE="text" NAME="fname"><p> Ваша фамилия: <INPUT TYPE="text" NAME="lname"><p> <INPUT TYPE="button" VALUE="Отправить" onClick="doit()"> </FORM>
Дали форме имя myform. Поле ввода для имени пользователя названо fname, а поле для фамилии — lname. Теперь у каждого элемента есть имя.
Данные, которые введет пользователь, станут значением (value) соответствующих текстовых полей. Тому, что написано в поле fname, будет присвоено имя fname.
Когда пользователь нажмет на кнопку (обработчик события onClick), запустится функция doit().
Теперь посмотрим на функцию:
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) }
Такой передачи данных, как рассматривали в предыдущих частях не происходит. Видите, в скобках функции doit() ничего нет. Но по иерархическим командам понятно, что функция вызывает данные, введенные в форму.
Следуем иерархии объектов: за объектом документ следует объект форма (на него указывает имя формы, myform), за ним следует объект поле формы (на него указывает имя поля, fname), за ним следует свойство значение (value). Без свойства value данные, переданные пользователем, не попали бы в иерархическую команду.
Дальше переменная greeting (приветствие). Приветствие показано в команде alert(greeting).
Когда пользователь нажимает на кнопку, всплывает окно с его именем.
Второе окно включает в себя переменную greeting. Появляется надпись: «Привет, (имя) (фамилия)», составленная с помощью данных, полученных через форму. Еще раз обратите внимание на value.
Наконец всплывает третье окно c неким текстом и вызывает следующее: document.myform.fname.value.length. Этo команда, которая передает длину (length) слова, введенного в поле формы. Если fname содержит «Коля», то длина равна 4. Команда length следует за value.Таким образом она точно сосчитает буквы в тексте, а не что-нибудь другое. length — это тоже свойство.
Задания Задание по первой части
Перепишите скрипт так, чтобы, открываясь, страница просила пользователя ввести имя. При выборе цвета должно всплывать окно со словами «Эй, (имя)! Вы выбрали (цвет)...» Желаю успеха.
Чтобы добиться нужного эффекта, вставьте запрос перед функцией, потом результат запроса в команду alert:
<html> <head> <SCRIPT LANGUAGE="JavaScript"> var user_name = prompt ("Можно узнать, как Вас зовут?","Ваше имя"); function newcolor(color) { alert("Эй, " + user_name + "! Вы выбрали " + color) document.bgColor=color } </SCRIPT> </head> <body bgcolor="хххххх"> <center><h3>Фон страницы</h3> </center> <form> <input type="button" value="Оранжевый" onClick="newcolor('orange')"> <input type="button" value="Салатовый" onClick="newcolor('lightgreen')"> </form> </body> </html>
Задание по второй части
Измените скрипт так, чтобы он вызывал другую поисковую систему. И еще, пусть при подаче запроса выскакивает окошко с надписью «Сейчас поищем...»
Начало формы
Поискать
в Яndex: 
Конец формы
Если вы знаете адрес поисковой машины, тогда никаких особых трудностей не будет. Но как его узнать? Идите на сайт, введите слово для поиска и скопируйте адрес из адресной строки.
Раз нам нужно, чтобы окно всплывало до завершения поиска, убедитесь, что оно стоит у вас первым. Примерно так:
<script language="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>