Студопедия

КАТЕГОРИИ:


Архитектура-(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)

Листинг 2.10. Файл chapter2/ChangeBkg/ChangeBkg. html




<HTML>

<HEAD>

<TITLE>Color Links</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var nRed = 255;

var nGreen = 255;

var nBlue = 255;

function colorShift()

{

var cmd = "colorShift()";

document.bgColor = "#" +

dec2hex(nRed) +

dec2hex(nGreen) +

dec2hex(nBlue);

if(nRed > 0)

{

nRed -= 10;

nGreen -= 10;

nBlue -= 10;

}

timer = window.setTimeout(cmd, 50);

}

function dec2hex(nDec)

{

var szHexTable = "0123456789ABCDEF";

var szResult = "";

var szBuf = "";

var nRem = 0;

var bNegative = false;

if(nDec < 0)

{

bNegative=true;

nDec = -nDec;

}

nTmp = nDec;

while(true)

{

nRem = nTmp % 16;

nTmp = nTmp / 16;

if(Math.floor(nTmp) < 16)

break;

szBuf = szHexTable.charAt(nRem);

szResult = szBuf.concat(szResult);

}

szBuf = szHexTable.charAt(nRem);

szResult = szBuf.concat(szResult);

if(Math.floor (nTmp)!= 0)

{

szBuf = szHexTable.charAt(Math.floor(nTmp));

szResult = szBuf.concat(szResult);

}

if(bNegative == true)

return("-" + szResult);

else

return szResult;

}

//-->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<Н1>Зміна колірного оформлення</Н1>

<Р>Відвідайте ці сервери:

<Р><А HREF="http: //www. g las net.ru/~frolov/index.htiTil">Haшa домашня сторінка</А>

<P><A HREF="http://www. auramedia.ru">Каталог програм Auramedia</A>

<P><A HREF="http://www.microsoft.com/java/">Cтpaница серверу Microsoft про Java</A>

<P><A HREF="ColorLinks.html#Локальный роздів">Локальний поділ</А>

<HR>

<H1><A NАМЕ="Локальний поділ">Локальний поділ</А></Н1>

<Р>Цей локальньй роздів ви можете переглянути, навіть якщо ваш комп'ютер не залучений до Internet

<SCRIPT LANGUAGE="JavaScript">

<!--

colorShift();

//-->

</SCRIPT>

</BODY>

</HTML>

 

Робота сценарію починається після завантаження документа з виклику функції colorShift. Цей виклик розташований наприкінці області тіла документа HTML.

Функція поступово зменшує значення червоної, зеленої і блакитний компоненти цвіту. Початкові значення цих компонент зберігаються в глобальних перемінних nRed, nGreen і nBlue:

 

var nRed =255;

var nGreen = 255;

var nBlue = 255;

 

Значення цвіту фона формується в такий спосіб:

 

document. bgColor = "#" + dec2hex(nRed) + dec2hex(nGreen) + dec2hex (nBlue);

 

Тут за допомогою функції dec2hex преобразовывается десяткове значення колірний компоненти в шестнадцатеричное. Ця функція буде описана докладно пізніше в поділі "Шестнадцатеричный калькулятор" гл. 3.

Далі після установки цвіту фона проверяется значення червоніколірний компоненти, і, якщо воно більше нуля, зменшується і воно, і значення інший колірних компонент на 10:

 

if(nRed > 0)

{

nRed -= 10;

nGreen -= 10;

nBlue -= 10;

}

 

Для того щоб функція colorShift визивалася періодично, використовується метод setTimeout викликом його наприкінці функції:

 

var cmd = "colorShift()";

timer = window. setTimeout(cmd, 50);

 

У результаті функція colorShift буде визиватися кожні 50 мс.

3. РОБОТА З ФОРМАМИ

Сценарії JavaScript часто застосовуються для попереднього опрацювання даними, уведених користувачами у формах. Перевірені дані потім можуть передаватися розширенням CGI або ISAPI серверу Web. Крім того, за допомогою форм і сценаріїв JavaScript можна створювати активні сторінки, спроможні одержувати від користувача й опрацьовувати довільну інформацію.

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

3.1. Ієрархія об'єктів у формах

При завантаженні документа HTML у вікно браузера Internet створюється об'єкт класу document. Якщо в цьому документі визначені форми, то вони доступні сценаріям JavaScript як властивості об'єкта document.

У поділі "Посилання і мітки в документі" попередньої глави була визначена форма, через завдання для неї імені Sel за допомогою параметра NAME оператора <FORM>:

 

<FORM NAME="Sel">

<SELECT NAME="ListOfLinks">

</SELECT>

<INPUT TYPE="button" VALUE="Jump! " onClick="urlJump();">

</FORM>

 

У результаті в об'єкта document з'явилася властивість Sel. До цієї властивості можна адресуватися в такий спосіб:

 

Document. Sel

 

Будь-яка форма містить визначення полів і органів керування, таких, як списки, перемикачі і кнопки. При визначенні полів і органів керування їм можна задати ім'я, указавши його в параметрі NAME відповідного оператора мови HTML. У прикладі, приведеному вище, у формі визначений список з ім'ям ListOfLinks.

Для адресации зі сценарію JavaScript окремих органів керування можна скористатися тим фактом, що вони доступні як властивості їхніх форм, що містять. Наприклад, якщо у формі Sel визначений список ListOfLinks, те для доступу до списку як до об'єкта можна використовувати таке вираження:

 

Document. Sel. ListOfLinks

 

Тому що поля форми й органи керування є об'єктами, то для них визначені свої властивості і методи. Наприклад, властивість selectedIndex, що містить номер обраного користувачем елемента списку, доступно в такий спосіб:

 

Document. Sel. ListOfLinks. selectedIndex

 

У якості одного з властивостей об'єкта document визначена властивість forms. Це масив усіх форм, розташованих у документі HTML. Розмір масиву дорівнює document.forms.length.

Можливо адресуватися до форм як до елементів масиву forms, причому, перший елемент масиву (з індексом 0) відповідає самій першій формі, визначеної в документі, другий - такої і т.д. Проте зручніше обертатися до форм по їхніх іменах, заданим у параметрі NAME оператора <FORMS>.

3.2. Форма і її властивості

3.2.1. Оператор <FORM>

У найбільше загальному виді оператор <FORM>, призначений для створення форм у документах HTML, виглядає в такий спосіб:

 

<FORM

NAME ="Ім'я_форми" TARGET="Ім'я_окнa"

ACTION="Aдpec URL розширення серверу"

METHOD=GET або POST

ЕNСТУРЕ="Кодировка_даних"

onSubmit="О6pa6oтчик_co6ытия_Submit">

...

визначення полів і органів керування

...

</FORM>

 

Параметр NAME задає ім'я форми. Можна його не вказувати, якщо форма не призначена для спільної роботи зі сценарієм JavaScript. Тут (у главі) це ім'я потрібно для адресации форми як властивості об'єкта document, тому завжди будемо його задавати.

Призначення параметра TARGET аналогічно призначенню цього ж параметра в операторі <А>. Коли форма використовується для передачі запиту розширенню CGI або ISAPI серверу Web, відповідь, отриманий від серверу, відображається у вікні. Ім'я цього вікна задано параметром TARGET. Якщо відповідь повинна відображатися в тому ж вікні, у якому відображається і форма, то параметр TARGET задавати не потрібно.

За допомогою параметра ACTION вказується адреса URL завантажувального файла програми CGI або бібліотеки динамічного компонування DLL розширення ISAPI, а також передані розширенню параметри. У тому випадку, коли форма призначена для передачі даних розширенню серверу Web, параметр ACTION є обов'язковим. Але якщо дані, введені у формі, опрацьовуються сценарієм JavaScript локально і не передаються серверу Web, цей параметр можна опустити.

Параметр METHOD задає метод передачі даних із форми розширенню серверу Web і може приймати значення GET або POST. Якщо дані з полів форми опрацьовуються сценарієм JavaScript локально, параметр METHOD задавати не потрібно.

Параметр ENCTYPE задає тип MIME переданих даних і використовується дуже рідко. Якщо форма призначена для передачі текстових даних (як це звичайно буває), цей параметр по умовчанню має значення application/x-www-form-urlencoded. У цьому випадку для переданих даних використовується так називана кодировка URL. Тип даних multi-part/form-data дозволяє передавати як текстові, так і двоичные дані. При локальному опрацюванні даних сценарієм JavaScript параметр ENCTYPE не задається.

Крім параметрів для форми можна визначити оброблювач події, пов'язаний із кнопкою типу SUBMIT. Така кнопка призначена для посилки даних із заповненої форми розширенню серверу Web. Назначив оброблювач події, сценарій JavaScript може управляти цим процесом.

3.2.2. Властивості об'єкта form

Об'єкт form має два набори властивостей, склад одного з яких є фіксованим, а склад іншого залежить від того, які поля й органи керування визначені у формі.

Перший набір властивостей приведений нижче:

Властивість Опис

Action Містить значення параметра ACTION

Elements Масив всіх елементів (полів і органів керування), визначених у формі

encoding Містить значення параметра ENCTYPE

length Розмір масиву elements

method Містить значення параметра METHOD

target Містить значення параметра TARGET

Більшість властивостей першого набору просто відбиває значення відповідних параметрів оператора <FORM>. Можна їх використовувати в сценаріях JavaScript для перевірки параметрів.

Що ж стосується масиву elements, те в ньому знаходяться об'єкти, що відповідають полям і органам керування, визначеним у формі. Ці об'єкти утворять другий набір властивостей об'єкта form:

Властивість Опис

Button Кнопка з заданим написом

checkbox Перемикач типу Check Box. Може використовуватися в складі набору незалежних друг від друга перемикачів або окремо

hidden Сховане поле, що не відображається. Вміст цього поля може бути лічено і проаналізовано розширенням серверу Web або сценарієм JavaScript

password Текстове поле для запровадження паролів. Набраний у цьому полі текст не відображається на екрані

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

reset Кнопка, за допомогою якої користувач може скинути вміст поляж запровадження і стан перемикачів у їхній вихідний стан

select Список довільних текстових рядків

submit Кнопка для посилки даних із заповненої форми розширенню серверу Web. Для цієї кнопки можна задать довільну надпись

text Однострочное текстове поле

textarea Многострочное текстове поле

3.3. Об'єкти, що входять до складу форм

3.3.1. Кнопка button

У загальному виді кнопка класу button визначається у формі за допомогою оператора <INPUT> у такий спосіб:

 

<INPUT TYPE="button"

NАМЕ="Ім'я кнопки"

VАLUЕ="Напис_на_кнопці"

oпClick="Oбpaбoтчик_coбытия">

 

Параметр TYPE оператора <INPUT> повинний мати значення button, як це показано в прикладі.

За допомогою параметра NAME задається ім'я об'єкта, що відповідає кнопці (а не напис на кнопці). Напис на кнопці вказується за допомогою параметра VALUE.

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

Властивості об'єкта button

Об'єкт button має дві властивості, що відбивають значення відповідних параметрів оператора <INPUT>:

Властивість Опис

name Значення параметра NAME

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

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

Для об'єкта button визначений усього один метод, що не має параметрів, - click:

 

click()

 

Виклик цього методу призводить до такого ж ефекту, що і щиголь лівою клавішею миші по кнопці.

Приклад сценарію

У якості першого приклада призведемо сценарій, що виконує опрацювання щиголя по кнопці з написом Click me, розташованої у формі.

Якщо натиснути на цю кнопку, сценарій відобразить у вікні браузера властивості кнопки як об'єкта класу button.

Вихідний текст документа HTML з умонтованим у нього сценарієм JavaScript приведений у листинге 3.1.

 




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


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


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



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




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