|
После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть? |
Опубликован: 19.10.2006 | Уровень: для всех | Доступ: свободно
Лекция 20:
Передача данных в функцию
< Лекция 19 || Лекция 20 || Лекция 21 >
Аннотация: Базовые аспекты обработки данных функциями.
Ключевые слова: HTML, Размещение, поле, пользователь, функция, объект, значение, переменная, greeting, команда, длина
Концепция
Продолжим разговор о взаимодействии форм и 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, а все остальное осталось почти без изменений.
< Лекция 19 || Лекция 20 || Лекция 21 >
Елена Сапегова
Эдуард Семынин
|
Здравствуйте. Перестали быть видны лекции и тесты практикума по программированию на JavaScript. Уже второй день из моего аккаунта виден лишь план занятий. В чем может быть проблема?
|
