- •Формы html
- •Обработка данных формы
- •Поля ввода
- •Логические элементы
- •Передача данных формы на сервер
- •Примеры форм
- •Использование тега meta
- •Язык сценариев Java Script
- •Размещение Java Script в документе
- •Встроенные функции Java Script
- •Объектная модель Java Script
- •Обработчики событий JavaScript
- •Объекты Java Script Массивы
- •Объект window
- •Объект navigator
- •Объект history
- •Объект document
- •Объект form (массив forms)
- •Объект location
- •Объект link (массив links)
- •Объект image (массив images)
- •Массив elements
- •Объект text
- •Объект password
- •Объект fileUpload
- •Объект hidden
- •Объект checkbox
- •Объект radio
- •Объект submit
- •Объект reset
- •Объект button
- •Объект textarea
- •Объект select
- •Объект Option
- •Объект Date
- •Объект Math
- •Объект string
- •Примеры скриптов Обработка событий элементов формы.
- •Изменение картинки из формы
- •Использование таймера (скроллинг в строке статуса)
- •Гистограмма
- •Работа с окнами
- •Соответствие операторов и выражений языков Паскаль и Java Script.
- •Список использованной и рекомендуемой литературы
- •61070, Харьков-70, ул. Чкалова, 17
- •61070, Харьков-70, ул. Чкалова, 17
Примеры скриптов Обработка событий элементов формы.
1. Проверка данных, введенных в форме:
<HTML>
<HEAD>
<SCRIPT>
function test_form() {
var ok = false;
if (document.Form1.email.value.length<3) { ok=false; alert('error 1'); }
else if (document.forms[0].elements[0].value.indexOf('@')==-1)
{ ok=false; alert('error 2'); }
else ok=true;
return ok;}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Form1" TARGET=_new>
your email <INPUT TYPE="text" NAME="email" VALUE="12@43"> <BR>
text <INPUT TYPE="text" NAME="data" onChange = "alert('change');"> <BR>
pass <INPUT TYPE="password" NAME="pass" VALUE='123' > <BR>
<BR>
<INPUT TYPE="submit" VALUE="Send form" onClick="return test_form();"> .
<INPUT TYPE="reset" VALUE="Clear form" onClick="return confirm('Clear form?');">
</FORM>
</BODY><HTML>
При нажатии кнопки reset выдается запрос пользователю на подтверждение очистки формы. При отрицательном ответе действие по умолчанию (очистка формы) не выполняется. Отмена достигается возвратом в обработчике значения false. Отмена действия по умолчанию для кнопки reset работает только в NN4.0 и выше.
При нажатии кнопки submit проверяется правильность ввода (адрес e-mail должен содержать '@' и иметь не менее трех символов). При ошибке выдается сообщение (функция alert()) и отменяется отправка формы на сервер.
Изменение картинки из формы
При выборе пункта из меню изменяется картинка в документе.
<HTML><HEAD></HEAD>
<BODY>
<IMG SRC='1.gif'><BR>
<FORM NAME="Form1" TARGET=_new>
<SELECT SIZE=4 onChange="document.images[0].src= this.options[this.selectedIndex].value">
<OPTION VALUE="1.gif">picture 1
<OPTION VALUE="2.gif">picture 2
<OPTION VALUE="3.gif">picture 3
</SELECT>
</FORM>
</BODY><HTML>
Объект this используется для доступа к текущему объекту, в данном случае - select. Если бы мы в обработчике onChange использовали вызов функции JavaScript, то в этой функции мы должны были бы использовать полную адресацию:
document.images[0].src=document.Form1.elements[0]. options[document.Form1.elements[0].selectedIndex].value.
Использование таймера (скроллинг в строке статуса)
<HTML><HEAD>
<SCRIPT>
var mesg0 = 'Ваше сообщение';
var i=0;
function sline() {
if (i<mesg0.length) {
i++;
window.status=mesg0.substring(0,i);
setTimeout('sline()',100);
} }
</SCRIPT>
</HEAD>
<BODY onload="sline()">......
</BODY></HTML>
В данном примере прокрутка сообщения начинается при загрузке документа и выполняется один раз. Обратите внимание на то, что функция setTimeout() планирует только одно событие (в данном случае вызов функции sline()), а не серию вызовов через указанный интервал времени.
Аналогичным образом можно, например, изменять изображение:
<SCRIPT>
var i=0;
function multi() {
if (i) document.images[0].src='2.gif';
else document.images[0].src='1.gif';
i=1-i; //изменение номера изображения
setTimeout('multi()',1000); }
</SCRIPT>
А вот реализация функции задержки с использование объекта Date. В качестве параметра функции передается длительность задержки в миллисекундах.
<SCRIPT>
function pause(mSec) {
clock = new Date();
justMinute = clock.getTime();
while (true) {
just = new Date();
if (just.getTime() - justMinute > mSec) break;
} }
</SCRIPT>