Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Листинг 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><B0DY>");

if(bTltle)

document.write("<H1 >Switches Checkbox and Radio></Hl>");

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>

<ТIТLЕ>Перемикачі 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=" reset RCHBox();"></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"

onCli ck="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

 

Коли користувач включає перемикач, оброблювач події on-Click встановлює в стан true відповідну перемінну. Наприклад, при зміні стани перемикача Show title виконуються такі дії:

 

if(this.checked)

{

btitie=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("<Hl>Switches Checkbox and Radio</Hl>");

Якщо перед тим як натиснути кнопку Create Page користувач уключив перемикач Show title, у перемінної bTitle буде знаходитися значення true. У цьому випадку сценарій постачить формований документ заголовком "Switches Checkbox and Radio", оформивши його стилем <Н1>.

Аналогічною уявою аналізується вміст перемінної 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 +">");

 

3.3.5. Список select

За допомогою оператора <SELECT> можна розмістити усередині форми список, що припускає вибір однієї або перегляд декількох рядків. Формат оператора <SELECT> приведений нижче:

 

<SELECT МАМІ="Ім'я_списку_sе1есt" SIZE="Paзмep_cпискa" MULTIPLE оnВ1uг="Оброблювач_події"

оnСhаngе="Оброблювач_події"

onFосus="Оброблювач_події">

<OPTION VАLUЕ="Значення" SELECTED> Текст

<OPTION> Текст

</SELЕСТ>

 

Всі параметри оператора <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 може выбрать даний элемент

selectedlndex Номер обраного елемента

text Текст, зазначений після оператора <OPTION>

value Значення параметра VALUE

Методи об'єкта select

Для об'єкта select визначено два методи, що не мають параметрів, - focus і blur. Перший із цих методів дозволяє передати списку фокус запровадження а другий - відібрати цей фокус у списку.

Оброблювачі подій, пов'язані з об'єктом select

Як очевидно з формату оператора <SELECT>, розглянутого вище, для списку можна визначити трьох оброблювача події: onFocus, onBlur і onChange.

Події onFocus і onBlur виникають, коли список відповідно одержує і утрачає фокус запровадження. Що ж стосується події onChange, те воно створитися, коли користувач змінює стан списку, тобто вибирає в ньому інший елемент.

3.3.6. Приклади сценаріїв, що працюють із списками

У цьому поділі приведені два приклади сценаріїв, що працюють із списками. Перший із цих прикладів призначений для роботи з готовим списком, заповненим заздалегідь, другий заповнює список динамічно.

Робота з готовим списком

При роботі зі списками зі сценарію JavaScript частіше усього потрібно визначити, які елементи були обрані користувачем.

Перший із цих списків призначений для вибору цвіту, а другий - розміру деякого предмета (у даному випадку не має значення якого саме).

Списки відрізняються кількістю елементів, видимих одночасно. Для того щоб побачити всі елементи списку розмірів, можна скористатися смугою перегляду, розташованої в правій частині цього списку.

Що ж стосується першого списку, то для того, щоб вибрати з нього потрібний цвіт, необхідно зробити щиголь по кнопці з трикутником. При цьому список розкриється.

Крім списків, у формі є дві кнопки з написами Complete і Reset. Кнопка Reset повертає списки у вихідний стан, у якому вони знаходилися відразу після відображення документа HTML. Якщо ж зробити щиголь по кнопці Complete, керування одержить сценарій JavaScript, що відобразить обраний цвіт і розмір на екрані у виді діалогової панелі з повідомленням.

Вихідний текст документа HTML, що містить форму і сценарій для опрацювання, поданий у листинге 3.3.

 




Поделиться с друзьями:


Дата добавления: 2014-11-29; Просмотров: 400; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.075 сек.