КАТЕГОРИИ:
Архитектура-(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.3. Файл chaptcr3/select/select. html
|
|
|
|
<HTML>
<HEAD>
<TITLE>Pa6oтa із списками</Т1ТLЕ>
<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>Робота зі списками</Н1>
<FORM NAME="Sel">
<Р>Виберіть цвіт:<P>
<SELECT NAME="ColorList">
<OPTION VАLUЕ=Черный SELECTED> Черный
<OPTION VАLUЕ=Белый> Белый
<OPTION VАLUЕ=Червоний> Червоний
<OPTION VАLUЕ=Жовтогарячий> Жовтогарячий
<OPTION VАLUЕ=Жовтий> Жовтий
<OPTION VАLUЕ=Зелений> Зелений
<ОРТION VАLUЕ=Блакитний> Блакитний
<OPTION VАLUЕ=Синій> Синій
<OPTION VАLUЕ=Фіолетовий> Фіолетовий </SELECT>
<Р>Виберіть розмір:<Р>
<SELECT NAМЕ="SizeList" SIZE=3>
<OPTION VALUE=Стандартний SELECTED> Стандартний
<OPTION VALUE=Великий> Великий
<OPTION VАLUЕ=Середній> Середній
<OPTION VАLUЕ=Маленький> Маленький
<OPTION VALUE=Дуже маленький> Дуже маленький
</SELECT>
<Р>
<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 і Size List. В другому списку заданий розмір видимої частини вказівкою в операторі <SELECT> параметра SIZE із значенням, рівним трем. У результаті, у видимій частині списку відображається три елементи.
Для кнопки з написом Complete визначений оброблювач події onClick. Коли користувач робить щиголь мишею по цій кнопці, визивається функція Complete, що визначає обрані елементи для обох списків і відображає їхнього значення в діалоговій панелі за допомогою функції alert:
|
|
|
szElement="Цвіт: " +
Sel.ColorList.options[Sel.ColorList.selectedIndex].value +
" (" + Sel.ColorList.selectedIndex + ")" +
"\nРазмер: " + Sel.SizeList.options[Sel.SizeList.selectedIndex].value +
" (" + Sel. SizeList. selectedIndex + ")";
alert(szElement);
При цьому, насамперед визначаються номера елементів, обраних із списків. Ці номера рівні відповідно Sel.ColorList.selectedIndex (для списку цвітів) і Sel.SizeList.selectedIndex (для списку розмірів).
Далі ці номера використовуються як індекси в масивах options відповідних списків, що містять властивості елементів списків. Інтерес подає властивість value, за допомогою якого можна визначити значення для обраних елементів списків. Кожний елемент наших списків має таке значення, задане за допомогою параметра VALUE оператора <OPTION>.
Динамічне заповнення списку
Сценарій JavaScript може змінювати список, додаючи в нього нові елементи. Приклад такого сценарію вже приводився в поділі попередньої глави. Раніше створювався в документі HTML порожній список з ім'ям ListOfLinks розташуванням його у формі Sel:
<FORM NAME="Sel">
<SELECT NAME="ListOfLinks">
</SELECT>
<INPUT TYPE="button" VALUE="Jump!"
onClick="urlJump();">
</FORM>
Перед заповненням цього списку створювався масив елементів elem:
elem = new Array();
Заповнення цього масиву виконувалося в циклі, причому для створення елемента масиву визивався конструктор Option із завданням для нього чотири параметри:
elem[i] = new Option("Elem" + i, i, false, false);
Перший параметр задає текст, що відображається в списку, другий - значення, призначуване елементу списку за допомогою параметра VALUE. третій і четвертий параметри сообразуются відповідно з властивостями defaultSelected і selected.
Перемінна i - це параметр циклу, що змінює своє значення від нуля до кількості елементів, що добавляються в список.
Після того як елемент списку створений як об'єкт класу option, його потрібно записати у відповідний елемент масиву options:
|
|
|
Sel. ListOfLinks. options[i] = elem[i];
Sel. ListOfLinks. options[i]. text = document. links[i];
Тут також додатково встановлюється значення для властивості text елемента цього масиву і записується текст, що повинний відображатися в списку.
Визначення обраного зі списку елемента виконується аналогічно тому, як це зроблено в попередньому прикладі:
function urIJump()
{
var szNewURL="";
szNewURL=document.links[Sel.ListOfLinks.selectedIndex];
window. location. href=szNewURL;
}
Спочатку визначається номер обраного елемента як значення Sel. ListOfLinks. selectedIndex. Потім це значення використовується як індекс у масиві document. links, із якого в циклі відбувалося заповнення нашого списку.
3.3.7. Однострочное поле text
Часто у формах, розміщених на сторінках серверів Web, зустрічаються однострочные поля, призначені для запровадження і редагування тексту. Для того щоб вбудувати таке поле у форму, необхідно використовувати оператор <INPUT> із параметром TYPE, рівним значенню "text":
<INPUT TYPE="text"
NAME="Ім'я_поля_ text"
VALUE="Значення"
SIZE=Paзмep_поля оnВlur="Оброблювач_події" оnChаnge="Оброблювач_події"
оnFocus="Оброблювач події"
onSelect="Оброблювач_події">
Додатково можна зазначити параметри NAME, VALUE і SIZE, а також чотири оброблювачі подій, утворюваних текстовим полемо.
Параметр NAME дозволяє задати ім'я поля, необхідне для обертання до властивостей об'єкта text, що відповідає цьому полю.
За допомогою параметра VALUE можна записати в поле довільний текстовий рядок. Цей рядок буде відображатися відразу після завантаження документа HTML у вікно браузера.
Параметр SIZE визначає розмір (ширину) текстового поля в символах. Це розмір видимої частини поля. Він не обмежує довжину рядка, що можна ввести в даному полі.
Властивості об'єкта text
Сценаріям JavaScript доступні три властивості поля редагування як об'єкта класу text:
Властивість Опис
defaultValue Відбиває стан параметра VALUE
name Значення параметра NAME
value Поточний уміст поля редагування
Відразу після відображення нуля редагування властивості defaultValue і value бережуть однакові рядки. Коли користувач редагує текст, усі зміни відбиваються у властивості value.
Змінюючи уміст властивості value, сценарій JavnSnipt може змінити вміст поля редагування.
|
|
|
Методи об'єкта text
Для об'єкта text визначені методи focus, blur і select, що не мають параметрів. За допомогою методу focus сценарій JavaScript може передати фокус полю редагування, а за допомогою методу blur - відібрати фокус у цього поля. Виклик методу select призводить до виділення вмісту поля редагування.
Оброблювачі подій об'єкта text
Оброблювачі подій визиваються в таких випадках:№
Оброблювач Коли визивається
onFocus Поле редагування одержує фокус запровадження
onBlur Поле редагування утрачає фокус запровадження
onChange Змінюється вміст поля редагування
onSelect Виділяється вміст поля редагування
3.3.8. Перевірка анкети
Методика роботи з текстовими полями в сценаріях JavaScript буде розглянута на прикладі документа HTML із формою для запровадження анкети.
Приведений сценарій виконує нескладне опрацювання інформації, що вводиться в текстових полях цієї форми. Зокрема, сценарій перетворює символи прізвища в прописні. Якщо зазначити вік, менший 18 років, сценарій зробить його рівним нулю.
Якщо після заповнення анкети натиснути кнопку Complete, на екрані з'явиться діалогова панель, що відображає вміст окремих полів форми.
Кнопка Reset установлює поля у вихідний стан. Вихідний текст документа HTML з описаною вище формою і сценарієм JavaScript ви знайдете в листинге 3.4.
|
|
|
|
|
Дата добавления: 2014-11-29; Просмотров: 362; Нарушение авторских прав?; Мы поможем в написании вашей работы!