Студопедия

КАТЕГОРИИ:


Архитектура-(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.1. Файл chapter3/button/button. html




<HTML>

<HEAD>

<TITLE>Button demo</TITLE>

<SCRIPT LANGUAGE="JavaSсript">

function btnClick()

{

var szTxt="";

var szTxt1="";

szTxt=document.TestForm.bt.value;

szTxt1=document.Test Form.bt.name;

document.write("<HR>");

document. write("You press button: " + szTxt. bold() + ", name=" + szTxtl. bold());

document. write("<HR>");

}

//-->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<Hl>Click Button</Hl>

<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 і szTxtl, відповідно напис і ім'я кнопки:

 

szTxt=document. TestForm. bt. value;

szTxt1=document. TestForm. bt. name;

 

Потім функція виводить у вікно браузера рядок, обмежений поверх і знизу розділювальною лінією, що відображає значення властивостей value і name:

 

document.write("<HR>");

document.write ("You press button: " + szTxt.bold()

+ ", name=" + szTxtl. bold());

document. write("<HR>");

 

3.3.2. Перемикач checkbox

Перемикачі checkbox звичайно застосовуються для вибору яких-небудь незалежних друг від друга параметрів або можливостей.

У формі перемикач checkbox створитися за допомогою оператора <INPUT> із параметром TYPE, рівним рядку "checkbox":

 

<INPUT TYPE="checkbox"

NAME =" Ім'я перемикача_chесkbох"

VALUE="Значення" CHECKED

onClick="06pa6oтчик_coбытия"> Текст, відображуваний поруч із перемикачем

 

Параметр 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()

 

При виклику цього методу перемикач установлюється у включене cocтoяниe.

3.3.3. Перемикач radio

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

Визначення перемикача radio виглядає в такий спосіб:

 

<INPUT TYPE="radio"

NAME=" Ім'я перемикача radio"

VАLUЕ="Значення"

CHECKED

onClick="06pa6oтчик_події">

Текст, відображуваний поруч із перемикачем

 

Призначення параметрів NAME, VALUE і CHECKED перемикача radio таке ж, як і призначення аналогічних параметрів перемикача checkbox. Відмінність полягає в тому, що всі перемикачі radio, що належать до однієї групи, повинні мати однакові імена, визначені параметром NAME. Що ж стосується перемикачів checkbox, те, якщо їх декілька, усі вони повинні називатися по-різному.

Для того щоб розширення серверу Web або сценарій JavaScripl. обробну форму, могли дізнатися, який же з перемикачів 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()

 

При виклику цього методу перемикач вибирається для роботи.

3.3.4. Приклад форми з перемикачами

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

Документ містить одну форму, у якій є три перемикачі з незалежною фіксацією типу checkbox (розташовані в групі Page elements), три перемикачі з залежною фіксацією (утворюючу групу Text color) і дві кнопки - Create Page і Reset.

Якщо включений перемикач Show title, утворюваний сценарієм JavaScript, документ HTML буде постачений заголовком. При вмиканні перемикача Show horizontal lines інформація про стан перемикачів, відображуваний у документі, буде виділена поверх і знизу горизонтальними розділювальними лініями.

Перемикач Table view впливає на засіб відображення інформації. Якщо він включений, інформація буде показана в табличному виді, а якщо виключений - у виді списку.

Перемикачі з залежною фіксацією групи Text color, розташовані у вихідному документі HTML, задають цвіт рядків при відображенні інформації у виді списку або цвіт назв перемикачів при табличному відображенні.

У нижній частині форми знаходяться дві кнопки з написами Create Page і Reset. Якщо натиснути на першу з цих кнопок, буде викликана функція JavaScript, що визначить поточний стан перемикачів і сформує новий документ HTML. Цей документ з'явиться у вікні браузера замість вихідного. За допомогою кнопки Reset можна встановити початковий стан перемикачів.

Текст документа HTML із сценарієм, що виконує всі описані вище дії, подана в листинге 3.2.

 




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


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


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



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




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