2015-10-22
296На странице выводится два поля ввода с просьбой ввести имя и фамилию и кнопка "Отправить". После нажатия на кнопку введенные данные отображаются в последовательно появляющихся окнах 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, а все остальное осталось почти без изменений.
20. Урок: Создание случайных чисел
Методы создания случайных событий и работа с ними.
Концепция
В этом примере рассматриваются случайные числа. Для генерации случайных чисел JavaScript использует дату и время.
Обратите в сценарии внимание на следующее: число после знака % является ограничивающим числом. Пример ниже выбирает случайное число между 1 и 10.
Сценарий
<HTML><HEAD><SCRIPT type="text/javascript"> function rand() { var now=new Date() var num=(now.getSeconds())%10 var num=num+1 alert(num) }</SCRIPT></HEAD><BODY> <h1>Случайные числа</h1> <form> <INPUT TYPE="button" VALUE="Случайные числа от 1 до 10" onClick="rand()"> </FORM></BODY></HTML>
