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

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Продолжим разговор о взаимодействии форм и 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 — это тоже свойство.

Ваше задание

Составьте документ HTML с формой aform. В ней должно быть два текстовых поля, одно для геометрической фигуры, другое для цвета, и кнопка. Напишите функцию с переменной, которая содержит слова «Мне нравится ». Когда пользователь нажмет на кнопку, должно всплывать окно со следующей надписью:

  1. Мне нравится геометрическая фигура такого-то цвета. (по результатам тех данных, которые пользователь вводит в форму)
  2. Покажите длину (length) «фигуры».

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 20

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.
Hosted by uCoz