Содержание

Концепция
Сценарий
Результат работы сценария
Разбор сценария
Задание
Возможное решение

Концепция

Продолжим разговор о взаимодействии форм и JavaScript. Здесь становится особенно важно понимание иерархии объектов и работы функций.

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

Сценарий

Здесь снова представлен весь документ HTML, чтобы показать размещение отдельных элементов.

<HTML>
<HEAD>
<SCRIPT type="text/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" action="">
  Ваше имя? 
   <INPUT TYPE="text" NAME="fname"><p>
  Ваша фамилия? 
   <INPUT TYPE="text" NAME="lname"><p>
   <INPUT TYPE="button" 
     VALUE="Отправить" 
	 onClick="doit()">
</FORM>
</BODY>
</HTML>

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

На странице выводится два поля ввода с просьбой ввести имя и фамилию и кнопка "Отправить". После нажатия на кнопку введенные данные отображаются в последовательно появляющихся окнах alert.

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

Начнем с элементов формы:

<FORM NAME="myform" action="">
  Ваше имя: 
      <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 (приветствие). Содержимое greeting выводится с помощью команды alert(greeting).

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

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

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

Задание

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

Мне нравится город (страна). 
  (по результатам тех данных, которые пользователь вводит в форму)

Покажите длину ( length ) названия города.

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

Существуют разные решения, например, такое:

<html>
  <head>
  <SCRIPT type="text/javascript">
  function doit()
  {
    var greeting="Мне нравится "
    alert(greeting + document.aform.city.value 
	 + " (" + document.aform.state.value +").")
    alert
      ("В названии вашего города " + document.aform.city.value.length 
	 + " букв.")
  }
  </script>
  </head>
  <body >

  <form name="aform">
    В каком городе вы живете? 
	<INPUT TYPE="text" NAME="city">
    В какой стране? 
	<INPUT TYPE="text" NAME="state">
    <input type="button" 
	  value="Отослать" onClick="doit()">
  </form>
  </body>
  </html>

Легко видеть, что имена полей ввода из примера были изменены на city и state. Потом была убрана первая команда alert, а все остальное осталось почти без изменений.