 |
Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | |
Лабораторная работа № 6. Цель — познакомиться с использованием JavaScript в формах
|
|
Первая часть
Цель — познакомиться с использованием JavaScript в формах.
Рассмотрим скрипт, который через форму позволяет выбрать цвет фона.
Формы всегда начинаются командой <FORM> и заканчиваются командой </FORM>.
Скрипт:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function newcolor(color)
{
alert("Вы выбрали " + color)
document.bgColor=color
}
</SCRIPT>
</HEAD>
<BODY>
<p>Выбрать цвет фона</p>
<FORM>
<INPUT TYPE="button" VALUE="Голубой"
onClick="newcolor('lightblue')">
<INPUT TYPE="button" VALUE="Розовый"
onClick="newcolor('pink')">
<INPUT TYPE="button" VALUE="Вернуть"
onClick="newcolor('white')">
</FORM>
</BODY>
</HTML>
Разбор скрипта
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, она помещает текст на кнопку.
Вторая часть
Теперь попробуем передавать в функцию данные, которые пользователь введет в поле формы. Затем эти данные будут использованы для поиска в Yahoo.
Скрипт
<SCRIPT LANGUAGE="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>. Готово.
Третья часть
Продолжаем рассматривать взаимодействие форм и JavaScript.
Обычно JavaScript в соединении с формами используется для проверки ввода данных..
Скрипт
<HTML>
<HEAD>
<SCRIPT LANGUAGE="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">
Ваше имя:
<INPUT TYPE="text" NAME="fname"><p>
Ваша фамилия:
<INPUT TYPE="text" NAME="lname"><p>
<INPUT TYPE="button" VALUE="Отправить" onClick="doit()">
</FORM>
</BODY>
</HTML>
Разбор скрипта
Н ачнем с элементов формы:
<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 — это тоже свойство.
Задания
Дата публикования: 2015-11-01; Прочитано: 521 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!
