О JavaScripts часть 3 - О JavaScripts - Каталог статей - Webmasters clan - Все для создания сайтов

Webmasters clan - Все для создания сайтов 

Воскресенье, 19.05.2024, 4:45:02 
Приветствую Вас, Гость!
Ваш IP: 3.147.13.229
Нет аватара
Каждый клик по баннеру - это огромная благодарность создателю сайта...

Обязательно посетите:
Главная страница
Меню сайта
Категории каталога
Новичку [11]
начинающему вебмастеру
О JavaScripts [7]
описание языка JavaScripts
Разное [2]
статьи не попадающие ни под один раздел
Поиск по каталогу
Друзья сайта
пока не обзавелись
Статистика


Наш опрос
Оцените мой сайт
Всего ответов: 52


Начало » Статьи » О JavaScripts

О JavaScripts часть 3
Раздел "Формы" посвящен созданию различных элементов:
- строки,
- кнопки,
- линейки прокрутки, и др.
Дальнейшая задача состоит в обработке этих элементов:
- чтение информации из элементов форм,
- получение информации о нажатии кнопок,
- обработка полученной информации.

Рассмотрим примеры работы с различными элементами Форм.

Получение информации из текстовой строки:
Для определения текстовой строки мы задаем параметр TYPE="TEXT" в операторе INPUT. После заполнения строки пользователь нажимает правой кнокой мыши на какую-либо точку экрана вне поля текста (то есть элемент теряет фокус ввода). При этом управление получает созданная нами функция getname, задаваемая в параметре onBlur. В свою очередь, параметр этой функции this.value содержит значение строки текста. Эту строку в функции getname мы выведем на экран в специальном окне с помощью стандартной функции alert.
И все это выглядит следующим образом:
<SCRIPT LANGUAGE="JavaScript">
function getname(str) { alert(str); } </SCRIPT>

Введите текст:
<FORM>
<INPUT TYPE="TEXT" NAME="name" onBlur="getname(this.value)" VALUE="Введите текст">
</FORM>

Этот фрагмент выполняется следующим образом:

Введите текст: Боюсь, что программистам все ясно и беэ моих комментариев, а остальных я запутал окончательно. Но я советую разбирать этот пример, пока Вы не поймете, тогда будет легко понять дальнейшее. Данный пример можно упростить, удалив функцию getname, и записав: onBlur="alert(this.value)". Проверьте.
Кроме уже рассмотренного обработчика событий onBlur(), который вызывается, когда TEXT утрачивает фокус ввода, существуют еще два обработчика событий:
- onchange() - вызывается, когда пользователь изменяет значение в элементе TEXT и этот обьект утрачивает фокус ввода,
- onfocus() - вызывается, когда пользователь перемещает фокус ввода с клавиатуры в обьект TEXT.
Вставьте каждый из этих обработчиков событий в вышеприведенный пример вместо onBlur() и проверьте действие программы.

Получение информации из текстового поля:
Этот пример строится на тех же принципах, что и предыдущий.
<SCRIPT LANGUAGE="JavaScript">
function getname(str) {
alert(str);
}
</SCRIPT>
Введите все, что Вы хотите:
<FORM>
<TEXTAREA NAME="name" COLS=30 ROWS=5 WARP=VIRTUAL onBlur="getname(this.value)">
Введите любой текст
</TEXTAREA>
</FORM>

Посмотрите, как он выполняется:
Обработка нажатия кнопок:
Стандартная кнопка задается параметром TYPE="BUTTON" в операторе INPUT. При нажатии кнопки выполняется созданная нами функция, заданная в параметре onclick, то есть onPush().Эта функция выводит текст "HELLO" в новое окно.
Ниже приведен этот пример:
<SCRIPT LANGUAGE="JavaScript">
function onPush() {
alert("HELLO");
}
</SCRIPT>
<FORM>
<INPUT TYPE="BUTTON" NAME="Button1" VALUE="Нажмите" onclick="onPush()">
</FORM>

А теперь нажмите на нижеприведенную кнопку:

Выбор кнопки:
В первом примере данного раздела для указания значения текстового поля мы пользовались аттрибутом this.value, что означает "значение данного элемента". Но мы можем захотеть работать с полем другого элемента. Тогда применим полное имя, имеющее следующий формат:
document...value, где:
Имя-формы - значение параметра name команды form,
Имя-Элемента - значение параметра name команды input.

В данном примере мы обрабатываем форму myForm1, содержащую одно текстовое поле, названное myText и 2 кнопки: Button1 Button2. Для каждой из этих кнопок создана функция, записывающая в текстовое поле сообщение о нажатии "своей" кнопки.

Программа выглядит следующим образом:
<SCRIPT LANGUAGE="JavaScript">
function FirstFunction() {
document.myForm1.myText.value="Вы нажали первую кнопку";
}
function SecondFunction() {
document.myForm1.myText.value="Вы нажали вторую кнопку";
}
</SCRIPT>
<FORM NAME="myForm1">
<INPUT TYPE="TEXT" NAME="myText" SIZE=30 VALUE="Нажмите одну из кнопок">
<INPUT TYPE="BUTTON" NAME="Button1" VALUE="Первая кнопка" onclick="FirstFunction()">
<INPUT TYPE="BUTTON" NAME="Button2" VALUE="Вторая кнопка" onclick="SecondFunction()">
</FORM>

Посмотрите, как она выполняется:
Обработка кнопки отметки:
В форме, названной myForm2, вводим 2 элемента:
- текстовую строку myText, служащую для вывода текстовой информации,
- кнопка отметки- при включении (отключении) символа отметки управление передается пользовательской функции myFunction2.
В этой функции вводится текстовая переменная myString, в которую вначале записывается текст "кнопка". Если кнопка отмечена (то есть в ней присутствует символ "птичка" , то к тексту дописывается слово "отмечена" , иначе - "не отмечена". Полученный текст передается в текстовый элемент формы.

<SCRIPT LANGUAGE="JavaScript">
function myFunction2() {
var myString="Кнопка";
if (document.myForm2.myCheckBox.checked)
myString+=" отмечена";
else
myString+=" не отмечена";
document.myForm2.myText.value = myString;
}
</SCRIPT>
<FORM NAME="myForm2">
<INPUT TYPE="TEXT" NAME="myText" SIZE=30 VALUE="Нажмите кнопку">
<INPUT TYPE="CHECKBOX" NAME="myCheckBox" VALUE="Кнопка отметки" onclick="myFunction2()">
</FORM>

Нажмите несколько раз на кнопку отметки и посмотрите на изменения в текстовой строке.
Работа с меню:
Cписок в форме задается с помощью обьекта SELECT, обработка событий выполняется с помощью следующих параметров:
onChange - вызывается при изменении выбора,
onBlur - вызывается при снятии фокуса с обьекта,
onFocus - вызывается при перемещении фокуса на обьект
Рассмотрите следующий пример и проверьте его выполнение:
&tlSCRIPT LANGUAGE="JavaScript">
function SelectBlur() {
document.myForm7.myText.value="Вы нажали поле вне списка ";
}
function SelectFocus() {
document.myForm7.myText.value="Вы нажали ту же кнопку ";
}
function SelectChange() {
document.myForm7.myText.value="Вы нажали другую кнопку ";
}
&tl/SCRIPT>
&tlFORM NAME="myForm7">
&tlINPUT TYPE="TEXT" NAME="myText" SIZE=20 VALUE="Сюда будем писать доносы">
&tlSELECT NAME="script" MULTIPLE onBlur="SelectBlur()" onFocus="SelectFocus()" onChange="SelectChange()">
&tlOPTION VALUE="town1" SELECTED>Париж
&tlOPTION VALUE="town2">Лондон
&tlOPTION VALUE="town3">Колыма
&tlOPTION VALUE="town4">Хеврон
&tlOPTION VALUE="town5">Марс
&tlOPTION VALUE="town6">Шушенское
&tl/SELECT>
&tl/FORM>


Обработка кнопки Radio:
Для анализа нажатия на кнопку используется функция onClick, как в кнопке Botton. Думаю, Вам будет несложно самим придумать пример работы с кнопкой Radio.

Сброс значений формы:
Обьект Reset обрабатывается аналогично обьекту Button, но используется только для сброса значений формы. Это означает для каждого поля формы сброс в значение, заданное параметром VALUE, или "очистка" поля при отсутствии этого параметра. Проследить нажатие на кнопку Reset можно с помощью параметра onClick(), значение которого инициируется при нажатии кнопки.

Кнопка ввода данных:
Обьект Submit обрабатывается аналогично обьекту Button. При нажатии на кнопку Submit данные формы, содержащей зту кнопку, передаются на сервер. Проследить нажатие на кнопку Submit можно с помощью параметра onClick().


Другие материалы по теме
Категория: О JavaScripts | Добавил: Admin (16.04.2007)
Просмотров: 1702 | Рейтинг: 3.0 |


Copyright Webmasters clan - Все для создания сайтов © 2007 - 2024
Все права защищены.
Незаконное использование любой информации сайта без обратной ссылки или письменного разрешения администратора - преследуется по закону.
Обязательно посетите: