Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Кнопка button
В общем виде кнопка класса button определяется в форме с помощью оператора <INPUT> следующим образом:
<INPUT TYPE="button"
NAME="Имя_кнопки"
VALUE="Надпись_на_кнопке"
onClick="Обработчик_события">
Параметр TYPE оператора <INPUT> должен иметь значение button, как это показано в нашем примере.
С помощью параметра NAME задается имя объекта, соответствующего кнопке (а не надпись на кнопке). Надпись на кнопке указывается с помощью параметра VALUE.
Определив обработчик события, вы можете задать сценарий JavaScript, который получит управление после того как пользователь нажмет на кнопку.
Свойства объекта button
Объект button имеет два свойства, отражающие значения соответствующих параметров оператора <INPUT>:
Свойство | Описание |
name | Значение параметра NAME |
value | Значение параметра VALUE |
Методы объекта button
Для объекта button определен всего один метод, не имеющий параметров, - click:
click()
Вызов этого метода приводит к такому же эффекту, что и щелчок левой клавишей мыши по кнопке.
Пример сценария
В качестве первого примера мы приведем сценарий, выполняющего обработку щелчка по кнопке с надписью Click me, расположенной в форме (рис. 3.1).
Рис. 3.1. Форма в документе HTML с кнопкой
Если нажать на эту кнопку, сценарий отобразит в окне браузера свойства кнопки как объекта класса button (рис. 3.2).
Рис. 3.2. Отображение свойств кнопки как объекта класса button
Исходный текст документа HTML со встроенным в него сценарием JavaScript приведен в листинге 3.1.
Листинг 3.1. Файл chapter3/button/button. html
<HTML>
<HEAD>
<TITLE>Button demo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function btnClick()
{
var szTxt="";
var szTxt1="";
szTxt=document. TestForm. bt. value;
szTxt1=document. TestForm. bt. name;
document. write("<HR>");
document. write("You press button: " + szTxt. bold()
+ ", name=" + szTxt1.bold());
document. write("<HR>");
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Click Button</H1>
<FORM NAME="TestForm">
<P><INPUT TYPE="button" NAME="bt" VALUE="Click me!"
onClick="btnClick();">
</FORM>
</BODY>
</HTML>
В теле документа HTML определена форма с именем TestForm, для чего в операторе <FORM> мы указали параметр NAME. Другие параметры этого оператора здесь не нужны.
Форма содержит одну-единственную кнопку с именем bt и надписью Click me. Для этой кнопки в качестве обработчика события мы назначили функцию btnClick, определенную в заголовке документа HTML.
Когда пользователь нажимает кнопку, функция btnClick получает управление и сохраняет в текстовых переменных szTxt и szTxt1 надпись и имя кнопки, соответственно:
szTxt=document. TestForm. bt. value;
szTxt1=document. TestForm. bt. name;
Затем функция выводит в окно браузера строку, ограниченную сверху и снизу разделительной линией, отображающую значение свойств value и name:
document. write("<HR>");
document. write("You press button: " + szTxt. bold()
+ ", name=" + szTxt1.bold());
document. write("<HR>");
Переключатель checkbox
Переключатели checkbox обычно применяются для выбора каких-либо независимых друг от друга параметров или возможностей.
В форме переключатель checkbox создается с помощью оператора <INPUT> с параметром TYPE, равным строке "checkbox":
<INPUT TYPE="checkbox"
NAME="Имя_переключателя_checkbox"
VALUE="Значение"
CHECKED
onClick="Обработчик_события">
Текст, отображаемый рядом с переключателем
Параметр NAME задает имя переключателя. Это имя можно использовать для определения состояния этого переключателя в сценарии JavaScript.
С помощью параметра VALUE вы можете определить строку, которая передается расширению сервера при посылке заполненной формы, если переключатель находится во включенном состоянии. Если этот параметр не указан, то по умолчанию посылается строка “on”. Сценарий JavaScript также может получить значение параметра VALUE.
Необязательный параметр CHECKED указывается в том случае, если при начальном отображении формы переключатель должен отображаться во включенном состоянии.
Если для переключателя определен обработчик события, вы можете задать сценарий JavaScript, получающий управление после того как пользователь изменит состояние переключателя.
Свойства объекта checkbox
Объект checkbox имеет несколько свойств, отражающих значения соответствующих параметров оператора <INPUT>:
Свойство | Описание |
name | Значение параметра NAME |
checked | Свойство типа Boolean, отражающее состояние переключателя. Если переключатель включен, свойство имеет значение true, в противном случае - false. С помощью этого свойства сценарий может изменять состояние переключателя |
value | Значение параметра VALUE |
defaultChecked | Свойство типа Boolean, отражающее значение параметра CHECKED. Если параметр CHECKED присутствует в определении переключателя, свойство имеет значение true, в противном случае - false. Сценарий может определять или устанавливать значение этого свойства |
Методы объекта checkbox
Для объекта checkbox определен один метод click, не имеющий параметров:
click()
При вызове этого метода переключатель устанавливается во включенное состояние.
Переключатель radio
Переключатели типа radio применяются в тех случаях, когда нужно организовать выбор одной из нескольких возможностей. Исходя из этого, в форме обычно располагается несколько таких переключателей.
Определение переключателя radio выглядит следующим образом:
<INPUT TYPE="radio"
NAME=" Имя_переключателя_radio"
VALUE="Значение"
CHECKED
onClick="Обработчик_события">
Текст, отображаемый рядом с переключателем
Назначение параметров NAME, VALUE и CHECKED переключателя radio такое же как и назначение аналогичных параметров переключателя checkbox. Отличие заключается в том, что все переключатели radio, принадлежащие к одной группе, должны иметь одинаковые имена, определенные параметром NAME. Что же касается переключателей checkbox, то если их несколько, то все они должны называться по-разному.
Для того чтобы расширение сервера Web или сценарий JavaScript, обрабатывающие форму, могли узнать, какой же из переключателей radio группы находится во включенном состоянии, все такие переключатели должны иметь различные значения VALUE.
Кроме того, только один из переключателей radio может быть определен с параметром CHECKED.
Свойства объекта radio
Объект radio имеет следующие свойства:
Свойство | Описание |
name | Значение параметра NAME |
checked | Свойство типа Boolean, отражающее состояние переключателя. Если переключатель включен, свойство имеет значение true, в противном случае - false. С помощью этого свойства сценарий может изменять состояние переключателя |
length | Количество переключателей типа radio, определенных в группе с именем, заданным параметром NAME |
value | Значение параметра VALUE |
defaultChecked | Свойство типа Boolean, отражающее значение параметра CHECKED. Если параметр CHECKED присутствует в определении переключателя, свойство имеет значение true, в противном случае - false. Сценарий может определять или устанавливать значение этого свойства |
Методы объекта radio
Для объекта radio определен метод click, не имеющий параметров:
click()
При вызове этого метода переключатель выбирается для работы.
Пример формы с переключателями
В этом разделе мы приведем исходный текст документа HTML со сценарием, предназначенным для динамического создания новой страницы при помощи сценария JavaScript. Параметры этой страницы определяются состоянием переключателей типа checkbox и radio, расположенными в этом документе (рис. 3.3).
Рис. 3.3. Форма с переключателями различных типов
Наш документ содержит одну форму, в которой есть три переключателя с независимой фиксацией типа checkbox (расположенные в группе Page elements), три переключателя с зависимой фиксацией (образующие группу Text color), и две кнопки - Create Page и Reset.
Если включен переключатель Show title, создаваемый сценарием JavaScript документ HTML будет снабжен заголовком. При включении переключателя Show horizontal lines информация о состоянии переключателей, отображаемая в документе, будет выделена сверху и снизу горизонтальными разделительными линиями.
Переключатель Table view влияет на способ отображения информации. Если он включен, информация будет показана в табличном виде, а если выключен - в виде списка (рис. 3.4).
Рис. 3.4. Отображение состояния переключателей в виде списка
Внешний вид страницы при включении всех трех переключателей группы Page elements показан на рис. 3.5.
Рис. 3.5. Отображение состояния переключателей в виде таблицы с заголовком, выделенной линиями
Переключатели с зависимой фиксацией группы Text color, расположенные в исходном документе HTML, задают цвет строк при отображении информации в виде списка или цвет названий переключателей при табличном отображении.
В нижней части формы находятся две кнопки с надписями Create Page и Reset. Если нажать на первую из этих кнопок, будет вызвана функция JavaScript, которая определит текущее состояние переключателей и сформирует новый документ HTML. Этот документ появится в окне браузера вместо исходного. С помощью кнопки Reset можно установить начальное состояние переключателей.
Текст документа HTML со сценарием, выполняющим все описанные выше действия, представлен в листинге 3.2.
Листинг 3.2. Файл chapter3/checkradio/checkradio. html
<HTML>
<HEAD>
<SCRIPT>
<!--
function resetRCHBox()
{
bTitle=false;
bHorzLine=false;
bTable=false;
szColor="Red";
}
function chkRadio(form, value)
{
szColor = value;
}
function btnClick(form)
{
var szTxt="";
document. write("<HEAD></HEAD><BODY>");
if(bTitle)
document. write("<H1>Switches Checkbox and Radio</H1>");
if(bHorzLine)
document. write("<HR>");
if(bTable)
{
document. write("<TABLE>");
szTxt=" " + bTitle;
document. write("<TR><TD><FONT COLOR=" + szColor
+ ">Title:</TD><TD>" + szTxt. bold() + "</TD></TR>");
szTxt=" " + bHorzLine;
document. write("<TR><TD><FONT COLOR=" + szColor
+ ">HorzLine:</TD><TD>" + szTxt. bold() + "</TD></TR>");
szTxt=" " + bTable;
document. write("<TR><TD><FONT COLOR=" + szColor
+ ">Table:</TD><TD>" + szTxt. bold() + "</TD></TR>");
document. write("<TR><TD><FONT COLOR=" + szColor
+ ">Color:</TD><TD>" + szColor. bold() + "</TD></TR>");
document. write("</TABLE>");
}
else
{
document. write("<FONT COLOR=" + szColor + ">");
szTxt=" " + bTitle;
document. write("<BR>Title: " + szTxt. bold());
szTxt=" " + bHorzLine;
document. write("<BR>HorzLine: " + szTxt. bold());
szTxt=" " + bTable;
document. write("<BR>Table: " + szTxt. bold());
document. write("<BR>Color: " + szColor. bold());
document. write("</FONT>");
}
if(bHorzLine)
document. write("<HR>");
document. write("</BODY>");
}
// -->
</SCRIPT>
<TITLE>Переключатели checkbox и radio</TITLE>
</HEAD>
<BODY>
<SCRIPT>
<!--
var bTitle=false;
var bHorzLine=false;
var bTable=false;
var szColor="Red";
// -->
</SCRIPT>
<FORM NAME="myform">
<B>Page elements:</B>
<P><INPUT TYPE="checkbox" NAME="chkTitle"
onClick="if(this. checked) {bTitle=true;}"> Show title
<BR><INPUT TYPE="checkbox" NAME="HorzLine"
onClick="if(this. checked) {bHorzLine=true;}"> Show horizontal lines
<BR><INPUT TYPE="checkbox" NAME="Table"
onClick="if(this. checked) {bTable=true;}"> Table view
<P><B>Text color:</B>
<P><INPUT TYPE="radio" NAME="Color" CHECKED VALUE="Red"
onClick="if(this. checked) {chkRadio(this. form, this. value);}"> Red
<BR><INPUT TYPE="radio" NAME="Color" VALUE="Green"
onClick="if(this. checked) {chkRadio(this. form, this. value);}"> Green
<BR><INPUT TYPE="radio" NAME="Color" VALUE="Blue"
onClick="if(this. checked) {chkRadio(this. form, this. value);}"> Blue
<TABLE>
<TR><TD><INPUT TYPE="button" NAME="btn" VALUE="Create Page"
onClick="btnClick(this. form);"></TD>
<TD><INPUT TYPE="reset" NAME="resetBtn" VALUE="Reset"
onClick="resetRCHBox();"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
В области заголовка документа HTML мы определили три функции с именами resetRCHBox, chkRadio и btnClick.
Первая из этих функций предназначена для инициализации переменных, в которых хранится текущее состояние переключателей:
function resetRCHBox()
{
bTitle=false;
bHorzLine=false;
bTable=false;
szColor="Red";
}
Функция resetRCHBox вызывается в тот момент, когда пользователь нажимает в исходном документе кнопку Reset. Она устанавливает значения четырех переменных.
Переменные bTitle, bHorzLine и bTable отражают состояние, соответственно, переключателей с независимой фиксацией Show title, Show horizontal lines и Table view. Если переключатель включен, в соответствующей переменной хранится значение true, если выключен - false.
В переменной szColor находится цвет текста, выбранный с помощью группы переключателей с зависимой фиксацией Text color.
Начальное состояние переменных, задаваемое функцией resetRCHBox, соответствует начальному состоянию переключателей сразу после загрузки исходного документа HTML в окно браузера.
Для того чтобы обеспечить вызов функции resetRCHBox при нажатии на кнопку Reset, в определении этой кнопки задан обработчик события onClick, как это показано ниже:
<INPUT TYPE="reset" NAME="resetBtn" VALUE="Reset"
onClick="resetRCHBox();">
Обработка события заключается в простом вызове функции.
Теперь мы займемся переключателями с зависимой фиксацией.
Эти переключатели определены в форме следующим образом:
<INPUT TYPE="radio" NAME="Color" CHECKED VALUE="Red"
onClick="if(this. checked)
{chkRadio(this. form, this. value);}"> Red
<BR><INPUT TYPE="radio" NAME="Color" VALUE="Green"
onClick="if(this. checked)
{chkRadio(this. form, this. value);}"> Green
<BR><INPUT TYPE="radio" NAME="Color" VALUE="Blue"
onClick="if(this. checked)
{chkRadio(this. form, this. value);}"> Blue
Когда пользователь изменяет состояние переключателя, делая по нему щелчок левой клавишей мыши, вызывается обработчик события onClick. Для всех кнопок этот обработчик выглядит одинаково:
if(this. checked)
{
chkRadio(this. form, this. value);
}
Прежде всего обработчик проверяет состояние переключателя, вызывая для этого метод checked. Ссылка на объект, для которого вызывается этот метод (то есть на переключатель), выполняется с помощью ключевого слова this.
В том случае, когда переключатель включен, обработчик вызывает функцию chkRadio, определенную в заголовке документа следующим образом:
function chkRadio(form, value)
{
szColor = value;
}
Хотя мы передаем функции два параметра (ссылку на форму, содержащую переключатель, и значение параметра VALUE текущего переключателя), используется только второй параметр. Значение этого параметра, определяющее цвет текста, сохраняется в переменной szColor.
Работа с переключателями типа checkbox выполняется немного проще:
<INPUT TYPE="checkbox" NAME="chkTitle"
onClick="if(this. checked) {bTitle=true;}"> Show title
<BR><INPUT TYPE="checkbox" NAME="HorzLine"
onClick="if(this. checked) {bHorzLine=true;}"> Show horizontal lines
<BR><INPUT TYPE="checkbox" NAME="Table"
onClick="if(this. checked) {bTable=true;}"> Table view
Когда пользователь включает переключатель, обработчик события onClick устанавливает в состояние true соответствующую переменную. Например, при изменении состояния переключателя Show title выполняются следующие действия:
if(this. checked)
{
bTitle=true;
}
Последний орган управления, который мы рассмотрим, это кнопка Create Page. Эта кнопка запускает процесс создания нового документа HTML. Для нее также определен обработчик события onClick:
<INPUT TYPE="button" NAME="btn" VALUE="Create Page"
onClick="btnClick(this. form);">
Этот обработчик вызывает функцию btnClick, передавая ей в качестве параметра ссылку на форму.
Функция btnClick определена в области заголовка документа HTML, исходный текст которого представлен в листинге 3.2.
Внутри этой функции мы определили рабочую текстовую переменную szTxt, присвоив ей значение пустой строки:
var szTxt="";
Когда функция btnClick получает управление, прежде всего она формирует пустую область заголовка документа HTML:
document. write("<HEAD></HEAD><BODY>");
Далее функция анализирует содержимое переменной bTitle:
if(bTitle)
document. write("<H1>Switches Checkbox and Radio</H1>");
Если перед тем как нажать кнопку Create Page пользователь включил переключатель Show title, в переменной bTitle будет находиться значение true. В этом случае сценарий снабдит формируемый документ заголовком “Switches Checkbox and Radio”, оформив его стилем <H1>.
Аналогичным образом анализируется содержимое переменной bHorzLine:
if(bHorzLine)
document. write("<HR>");
Эта переменная отражает состояние переключателя Show horizontal lines.
Далее функция btnClick анализирует содержимое переменной bTable, отвечающей за способ отображения информации о состоянии переключателей в создаваемом документе HTML:
if(bTable)
{
. . .
}
else
{
. . .
}
Если переключатель Table view находится во включенном состоянии, информация отображается в виде таблицы.
При формировании первого столбца таблицы цвет текста внутри ячейки устанавливается в соответствии с содержимым переменной szColor:
szTxt=" " + bTitle;
document. write("<TR><TD><FONT COLOR=" + szColor
+ ">Title:</TD><TD>" + szTxt. bold() + "</TD></TR>");
Напомним, что эта переменная хранит значение цвета текста, установленное группой переключателей с зависимой фиксацией Text color.
Если состояние переключателей отображается в виде списка строк, цвет текста устанавливается следующим образом:
document. write("<FONT COLOR=" + szColor + ">");
Список select
С помощью оператора <SELECT> вы можете разместить внутри формы список, допускающий выбор одной или просмотр нескольких строк. Формат оператора <SELECT> мы привели ниже:
<SELECT NAME="Имя_списка_select"
SIZE="Размер_списка"
MULTIPLE
onBlur="Обработчик_события"
onChange="Обработчик_события"
onFocus="Обработчик_события">
<OPTION VALUE="Значение" SELECTED> Текст
...
<OPTION> Текст
</SELECT>
Все параметры оператора <SELECT> необязательные, однако для того чтобы сценарий JavaScript мог работать со списком, необходимо указать по крайней мере параметр NAME, определяющий имя списка.
Параметр SIZE задает размер видимой части списка в строках.
Если указан необязательный параметр MULTIPLE, объект select является списком просмотра, а не списком выбора.
Список может быть создан пустым и впоследствии заполнен сценарием JavaScript, или уже содержащим один или несколько элементов. Для определения элементов списка предназначен оператор <OPTION>.
Оператор <OPTION> может иметь два параметра - VALUE и SELECTED.
Параметр VALUE определяет значение, которое передается расширению сервера Web. С помощью параметра SELECTED отмечается строка списка, выделенная по умолчанию при начальном отображении формы.
После оператора <OPTION> следует текст, отображаемый в строках списка.
Свойства объекта select
Ниже мы перечислили свойства объекта select, доступные сценарию JavaScript:
Свойство | Описание |
length | Количество элементов (строк) в списке |
name | Значение параметра NAME |
options | Массив объектов options, соответствующих элементам массива, заданным при помощи оператора <OPTION> |
selectedIndex | Номер выбранного элемента или первого элемента среди нескольких выбранных (если указан параметр MULTIPLE и пользователь выбрал в списке несколько элементов) |
Одним из свойств списка select является массив options. В этом массиве хранятся элементы списка, определенные оператором <OPTION>. Каждый элемент такого массива есть ни что иное как объект со следующим набором свойств:
Свойство | Описание |
defaultSelected | Отражает состояние параметра SELECTED |
index | Порядковый номер (индекс) элемента списка |
length | Количество элементов в выбранном объекте |
name | Значение параметра NAME |
selected | С помощью свойства selected сценарий JavaScript может выбрать данный элемент |
selectedIndex | Номер выбранного элемента |
text | Текст, указанный после оператора <OPTION> |
value | Значение параметра VALUE |
Методы объекта select
Для объекта select определено два метода, не имеющих параметров, - focus и blur. Первый из этих методов позволяет передать списку фокус ввода, а второй - отобрать этот фокус у списка.
Обработчики событий, связанные с объектом select
Как видно из формата оператора <SELECT>, рассмотренного выше, для списка вы можете определить три обработчика события: onFocus, onBlur и onChange.
События onFocus и onBlur возникают, когда список получает и теряет фокус ввода, соответственно. Что же касается события onChange, то оно создается, когда пользователь изменяет состояние списка, то есть выбирает в нем другой элемент.
Примеры сценариев, работающих со списками
В этом разделе мы приведем два примера сценариев, работающих со списками. Первый из этих примеров предназначен для работы с готовым списком, заполненным заранее, второй заполняет список динамически.
Работа с готовым списком
При работе со списками из сценария JavaScript чаще всего требуется определить, какие элементы были выбраны пользователем. На рис. 3.6 мы показали форму, в которой расположены два списка.
Рис. 3.6. Форма с двумя списками различного размера
Первый из этих списков предназначен для выбора цвета, а второй - размера некоторого предмета (в данном случае не имеет значение, какого именно).
Списки отличаются количеством элементов, видимых одновременно. Для того чтобы увидеть все элементы списка размеров вы можете воспользоваться полосой просмотра, расположенной в правой части этого списка. Что же касается первого списка, то для того чтобы выбрать из него нужный цвет, необходимо сделать щелчок по кнопке с треугольником. При этом список раскроется (рис. 3.7).
Рис. 3.7. Форма с раскрытым списком
Помимо списков, в форме есть две кнопки с надписями Complete и Reset. Кнопка Reset возвращает списки в исходное состояние, в котором они находились сразу после отображения документа HTML. Если же сделать щелчок по кнопке Complete, управление получит сценарий JavaScript, который отобразит выбранный цвет и размер на экране в виде диалоговой панели с сообщением (рис. 3.8).
Рис. 3.8. Выбранный цвет и размер
Исходный текст документа HTML, содержащего форму и сценарий для ее обработки, представлен в листинге 3.3.
Листинг 3.3. Файл chapter3/select/select. html
<HTML>
<HEAD>
<TITLE>Работа со списками</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
var szElement="";
szElement="Цвет: " +
Sel. ColorList. options[Sel. ColorList. selectedIndex].value +
" (" + Sel. ColorList. selectedIndex + ")" +
"\nРазмер: " +
Sel. SizeList. options[Sel. SizeList. selectedIndex].value +
" (" + Sel. SizeList. selectedIndex + ")";
alert(szElement);
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Работа со списками</H1>
<FORM NAME="Sel">
<P>Выберите цвет:<P>
<SELECT NAME="ColorList">
<OPTION VALUE=Черный SELECTED> Черный
<OPTION VALUE=Белый> Белый
<OPTION VALUE=Красный> Красный
<OPTION VALUE=Оранжевый> Оранжевый
<OPTION VALUE=Желтый> Желтый
<OPTION VALUE=Зеленый> Зеленый
<OPTION VALUE=Голубой> Голубой
<OPTION VALUE=Синий> Синий
<OPTION VALUE=Фиолетовый> Фиолетовый
</SELECT>
<P>Выберите размер:<P>
<SELECT NAME="SizeList" SIZE=3>
<OPTION VALUE=Стандартный SELECTED> Стандартный
<OPTION VALUE=Большой> Большой
<OPTION VALUE=Средний> Средний
<OPTION VALUE=Маленький> Маленький
<OPTION VALUE=Очень_маленький> Очень маленький
</SELECT>
<P>
<TABLE>
<TR><TD><INPUT TYPE="button" VALUE="Complete"
onClick="Complete();"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Как видно из этого листинга, в документе определена форма с именем Sel, содержащая списки ColorList и SizeList. Во втором списке мы задали размер видимой части, указав в операторе <SELECT> параметр SIZE со значением, равным трем. В результате, как это видно из рис. 3.6, в видимой части списка отображается три элемента.
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
