Сайт создан в системе uCoz

* Скрипты для ИТ * Описание и размещение JavaScript на странице * Переменные и функции в JS * Ветвления в JS * Основные элементы управления * полезные программы для дома и интернета * лекции предусмотренные учебной программой для ИТ по предмету "Распределенные системы обработки информации *" 



 Главное меню
Скрипты
Элементы управления
Циклы JavaScript
Переменные\функции
Лекции
Программы
 

н  а  с  т  а  р  т  о  в  у  ю



 Примечания

 

вся информация представленная в данном описании имеет гриф не секретно (свободно распространяется имеет общий доступ). Все программы представленные на сайте не проверялись антивирусной программой и распространяются абсолютно бесплатно


 



 P.S.
КАЛЕНДАРЬ

 

 

Основные элементы управления в JavaScript

Основными элементами управления в JavaScript являются: кнопка, текстовое поле, поле со списком, переключатели, выключатели и другие элементы. Все элементы в JavaScript предназначены для взаимодействия с пользователем и описываются в дескрипторе <FORM> </FORM>. Тип создаваемого элемента управления указывается в параметре TYPE дескриптора, описывающего назначение элемента управления.


 Текстовое поле

Рассмотрим создание текстового поля предназначенного для ввода текста.

<HTML>
<BODY>
<FORM>
<INPUT
            TYPE=TEXT
            NAME="Textbox"
            VALUE="Этот текст отобразится в текстовом поле"
            SIZE=30>
</FORM>
</BODY>
</HTML>
 

Результат выполнения

Сайт создан в системе uCoz

Дескриптор <INPUT> предназначен для организации ввода информации. Тег содержит ряд параметров:
TYPE описывает тип элемента управления, значение TEXT соответствует текстовому полю.
NAME – имя объекта, уникальное в пределах формы. Можно использовать кириллицу, пробелы нежелательны.
VALUE – значение по умолчанию
SIZE – размер текстового поля по горизонтали. Может принимать только целочисленные значения (количество символов).
Закрывающая угловая скобка ставится после описания последнего параметра. Для просмотра примера можно скопировать фрагмент кода в HTML-документ и открыть его в браузере.
Текстовое поле реагирует на такие события как onBlur, onChange, onFocus, onSelect. В следующем примере указан код, изменяющий значение текстового поля при щелчке по нему левой клавишей мышки.
<HTML>
<BODY>
<FORM>
<INPUT
            TYPE=TEXT
            NAME="Textbox"
            VALUE="111"
            SIZE=30
            onFocus="Textbox.value='666'">
</FORM>
</BODY>
</HTML>

Результат выполнения
Сайт создан в системе uCoz
 

Событие onFocus содержит описание действия, происходящего в ответ на данное событие. Действие может изменять любой параметр любого объекта формы. Синтаксис записи после знака равенства: “имя_объекта.параметр=’значение’” (кавычки обязательны – двойные для всего действия, одинарные для значения).
 

Кнопка

Стандартный элемент управления, предназначенный для взаимодействия с пользователем.
Рассмотрим код, создающий кнопку:
<HTML>
<BODY>
<INPUT
            TYPE=button
            NAME="b1"
            VALUE="Check"
</FORM>
</BODY>
</HTML>
Сайт создан в системе uCoz

Результатом будет кнопка
Сайт создан в системе uCoz

Параметры TYPE, NAME имеют стандартное значение. VALUE в данном случае задает текст, отображаемый на кнопке.
Кнопка реагирует на события onBlur, onClick, onFocus. Чаще всего используют событие Click.
<HTML>
<BODY>
<FORM>
<INPUT
            TYPE=TEXT
            NAME="Textbox"
            VALUE="111"
            SIZE=30>
<p></p>
<INPUT
            TYPE=button
            NAME="b1"
            VALUE="check"
            onclick="Textbox.value='777'">
</FORM>
</BODY>
</HTML>
Сайт создан в системе uCoz

Сайт создан в системе uCoz

Результат выполнения

 


Переключатели

Переключатели используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Создаются следующим образом.
<input type="radio" name="имя" параметры>
Параметры переключателей перечислены в таблице(таблицы есть в лекции на сервере)
Параметры переключателей
Параметр
Описание
 

checked
Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
name
Имя группы перелючателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
 

value
Задает, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.
Создание группы переключателей показано в примере 8.1.
Пример. Создание переключателей
<html>
<body>
<form>
<b>Какое у вас настроение?</b><br>
<input name="nastr" type="radio" value="good"> Хорошее<br>
<input name="nastr" type="radio" value="bad"> Плохое<br>
<input name="nastr" type="radio" value="so-so"> Так себе
<p><input type="submit" value="Выбрать"></p>
</form>


В результате получим следующее.

Какое у вас настроение?
Хорошее
Плохое
Так себе



Заметьте, что в данном примере параметр name для всех переключателей един, именно в таком случае браузер будет понимать, что переключатели связаны между собой и помечать только один пункт из предложенных. Значение параметра value же должно различаться, чтобы обработчик формы мог понять, какой вариант выбран пользователем.
 

Флажки (выключатели)

Флажки используют, когда необходимо выбрать два или более варианта из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажок создается следующим образом.
<input type="checkbox" параметры>

checked
Предварительное выделение флажка.


name
Имя флажка для его идентификации обработчиком формы.


value
Задает, какое значение будет отправлено на сервер.
Использование флажков показано в примере 9.1.
 Создание флажков
<html>
<body>

<form>
<b>С какими операционными системами вы знакомы?</b><br>
<input type="checkbox" name="option1" value="a1" checked> Windows 95/98<br>
<input type="checkbox" name="option2" value="a2"> Windows 2000<br>
<input type="checkbox" name="option3" value="a3"> System X<br>
<input type="checkbox" name="option4" value="a4"> Linux<br>
<input type="checkbox" name="option5" value="a5"> X3-DOS
<p><input type="submit" value="Выбрать"></p>
</form>

</body>
</html>


Сайт создан в системе uCoz

результате получим следующее.

С какими операционными системами вы знакомы?
Windows 95/98
Windows 2000
System X
Linux
X3-DOS

Сайт создан в системе uCoz

 










 


разработчики M@Xtor S.D.F. &  M.A.K.U.T.S.

Сайт создан в системе uCoz