ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Передача данных в функцию

Передача данных в функцию

Продолжим разговор о взаимодействии форм и JavaScript. Форма — это по сути тот же бланк, в который пользователь вносит необходимую информацию для дальнейшей передачи на сервер или электронную почту.

Обычно JavaScript в соединении с формами используется для проверки ввода данных. У нас еще будет разговор на эту тему. Последующие уроки подготовят вас к нему.

Рассмотрим как будет осуществляться передача данных в функцию. Давайте создадим форму с двумя полями ввода, где запрашивается имя и фамилия, и кнопкой Отправить.

<form action="" method="get" name="myform">
Ваше имя<br>
<input name="iname" type="text" >
<br>
Ваша Фамилия<br>
<input name="fname" type="text" >
<br>
<br>
<input name="" type="button" value="Отправить">
</form>

Видите, мы дали форме имя myform. Поле ввода для имени пользователя названо iname, а поле для фамилии — fname. Теперь у каждого элемента есть имя.

Данные, которые введет пользователь, станут значением (value) соответствующих текстовых полей. Тому, что написано в поле iname, будет присвоено имя iname.

Когда пользователь нажмет на кнопку (обработчик события onClick), запустится функция . Таким образом осуществляется передача данных в функцию.

Давайте напишем ее.

<script language="JavaScript">
function robt()
{
alert("document.myform.iname.value-это"+document.myform.iname.value);
var amt="Привет!";
alert(amt+document.myform.iname.value+" "+document.myform.fname.value);
alert("Количество букв в имени " + document.myform.iname.value.length);
}
</script>

Такой передачи данных, как на предыдущих уроках, не происходит. Видите, в скобках функции robt() ничего нет. Но по иерархическим командам понятно, что функция вызывает данные, введенные в форму. Мы тщательно следуем иерархии объектов: за объектом документ следует объект форма (на него указывает имя формы, myform), за ним следует объект поле формы (на него указывает имя поля, iname), за ним следует свойство значение (value). Без свойства value данные, переданные пользователем, не попали бы в иерархическую команду.

Дальше переменная amt (приветствие). Приветствие показано в команде alert(amt).

Когда пользователь нажимает на кнопку, всплывает окно с его именем.

Второе окно включает в себя переменную amt. Появляется надпись: «Привет, (имя) (фамилия)», составленная с помощью данных, полученных через форму. Еще раз обратите внимание на value.

Наконец всплывает третье окно c неким текстом и вызывает следующее: document.myform.iname.value.length. Этo команда, которая передает длину (length) слова, введенного в поле формы. Если fname содержит «Петя», то длина равна 4. Команда length следует за value. Таким образом она точно сосчитает буквы в тексте, а не что-нибудь другое. length — это тоже свойство.

Посмотрим, что у нас получилось.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Передача данных</title>
<script language="JavaScript">
function robt(){
alert("document.myform.iname.value-это"+document.myform.iname.value);
var amt="Привет!";
alert(amt+document.myform.iname.value+" "+document.myform.fname.value);
alert("Количество букв в имени " + document.myform.iname.value.length);
}
</script>
</head>

<body>
<form action="" method="get" name="myform">
Ваше имя<br>
<input name="iname" type="text" >
<br>
Ваша фамилия<br>
<input name="fname" type="text" >
<br>
<br>
<input name="" type="button" value="Отправить" onClick="robt()">
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

А теперь, для закрепления пройденного материала, давайте создадим документ светло-зеленого цвета, с формой опроса "sport". В форме должны быть два текстовых поля:

  • В первом поле нужно ответить на вопрос:"Какие виды спорта предпочитаете: летние или зиние?".
  • Во втором поле нужно ответить на вопрос:"Чему отдаете наибольшее предпочтение". и кнопка "Отправить".

При открытии страницы должно появится два диалоговых окна. Первое окно запрашивает имя пользователя, второе отчество. После заполнения запрашиваемых данных должно появиться следующее окно с текстом: "Здравствуйте уважаемый(ая) имя отчество! Просим Вас, принять участие в предлагаемом опросе".

После заполнения и отправки формы должно появиться два окна:

  • Первое сообщает: "Хорошо, что Вы любите выбраный вид виды спорта. Это здорово! А выбраный вид заслуживает всяческого уважения."
  • Второе, благодарит за участие в опросе.

У меня это получилось ТАК.

Вот HTML-код страницы.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<script language="JavaScript">
function drob (color){
document.bgColor=color;
a_name=prompt("Введите ваше имя", "");
h_name=prompt("Введите ваше отчество", "");
txt="Здравствуйте уважаемый(ая) ";
txt1="! Просим Вас, принять участие в предлагаемом опросе.";
alert(txt+a_name+h_name+txt1);
}
function drob1(){
txt2="Хорошо, что Вы любите ";
txt3=" виды спорта. Это здорово! А ";
txt4=" заслуживает всяческого уважения.";
alert(txt2+document.sport.start.value+txt3+document.sport.start1.value+txt4);
txt4=" Спасибо за участие в опросе.";
alert(txt4);
}
</script>
</head>

<body onLoad="drob(color='#CCFFFF')">
<h3>Опрос</h3>
<br>
<br>
<form action="" method="get" name="sport">
Какие виды спорта предпочитаете: летние или зимние?<br>
<input name="start" type="text" >
<br>
<br>
Чему отдаете наибольшее предпочтение:
<br>
<input name="start1" type="text" >
<br>
<br>
<input name="" type="button" value="Отправить" onClick="drob1()">
</form>
</body>
</html>

В данном документе использовались две функции:

  • drob (color) - запрашивается командой onLoad, после открытия страницы, задает цвет документу и вызывает диалоговые окна и окно предупреждения.
  • drob1()-запрашивается командой onClick, после нажатия кнопки "Отправить"и вызывает два окна предупреждения.

Остальное комментировать нет необходимости. Все рассмотрено в первом примере.