Web-сайт своїми руками

Сама функція описується в розділі , а її виклик відбувається в теледокументі. Для зв'язку елементів управління форм зі сценарієм застосовує параметр NAME тега. Його значення дорівнює змінній, яку використовують у сценарії для посилання на відповідний елемент управління. Як ім'я об'єкта в функцію передається значення якості значення об'єкта checkbox.

Виклик функції здійснюється після створення в документі елемента керування checkbox. Спроба викликати функцію properties () до створення в документі прапорця призведе до помилки інтерпретатора, оскільки об'єкт ще не буде (див. вище розділ "Об'єктні моделі мов сценаріїв") .

Оператор with задає стандартний об'єкт для блоку операторів, визначених у його тілі. Це означає, що всі властивості і методи, що зустрічаються в операторах цього блоку, є властивостями і методами зазначеного об'єкта. Застосування цього оператора позбавляє необхідності вказувати ієрархію приналежності об'єкта та скорочує вихідний текст програми.

Текст наведеного вище сценарію з використанням оператора with спроститься так:

Тут властивість value відноситься до об'єкта check 1 який вказаний в заголовку оператора with.

Корисно використовувати цей оператор для Math. Тоді звернення до його властивостей та методів здійснюється без явної вказівки префікса Math. Наприклад:

r = sin(2.0) // Обчислення синусу

1 = 2*РI*r // Обчислення довжини кола

При посиланні на форми та їх елементи необов'язково вказувати об'єкт верхнього рівня document. У наведеному прикладі послатися значення першого поля введення можна й так form1.studentName.value.

Для отримання властивостей об'єктів можна скористатися сценарієм прикладу 9.3.

Об'єкти window та Frame

Нове вікно створюється методом open(), який має наступний синтаксис:

ім'я_змін_вікна=window.open( [ім'я_файлу] , [ім'я_посилання_вікна] , [параметри] )

ім'я_посилання_вікна - ім'я, що вказується як мета в гіпертекстовому посиланні на це вікно з іншого документа HTML, параметри - задають значення параметрів вікна (ширина, висота, наявність панелей інструментів, смуг прокручування тощо).

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

Наприклад, наступний оператор:

Виведення у відкрите вікно здійснюється методом write() об'єкта document цього вікна. Наприклад, у прикладі 9.3 можна відобразити властивості об'єкта у новому вікні за допомогою наступного сценарію:

Результат виконання сценарію показано на рис. 9.7.

Закривається вікно методом close() без параметрів. Вікно документа, в якому знаходиться сценарій, закривається одним із наступних операторів:

Мал. 9.7.Відкриття нового вікна та відображення в ньому властивостей об'єкта

Для закриття вікна, відкритого методом open(), необхідно явно вказувати ім'я змінної цього вікна:

Метод alert () об'єкта window відображає діалогове вікно з текстом, що передається як параметр цього методу. Наприклад, наступний сценарій виводить діалогове вікно з інформацією користувача, якщо деяка змінна менше нуля:

Тег-контейнер може містити, крім тегів, що визначають фрейми, інші теги, утворюючи таким чином вкладені набори фреймів. Приклад HTML-сторінки з вкладеними наборами кадрів представлений нижче:

Значення параметра NAME задає ім'я, за якимможна посилатися на відповідний кадр в ієрархії об'єктів документа. Відображення сторінки з кадрами можна побачити на рис. 9.8.

Мал. 9.8.Відображення сторінки з кадрами

Ця сторінка містить три кадри, які утворюють ієрархічну модель об'єктів Frame. На верхньому рівні розташований об'єкт top, який є батьком усіх трьох кадрів на сторінці (clockFrame, menuFrame і content Frame). Для посилання на кадри сторінки можна використовувати символічні імена, або властивість-масив frames об'єкта top, в якому містяться посилання на всі кадри сторінки. Так, на перший кадр можна послатися двома способами:

Якщо документ, що завантажується у кадр, сам містить набір кадрів, то об'єктна модель трохи ускладнюється. У цьому випадку всі кадри, що відображаються у заданому кадрі документа, є підлеглими цьому кадру, який, у свою чергу, породжується від об'єкта верхнього рівня top. Якщо, наприклад, у попередньому прикладі файл menu.html міститиме наступний код HTML:

то кадри Frame1 і Frame2 будуть породжуватися кадром menuFrame, і для посилання на один з цих кадрів можна скористатися будь-якою з наступних конструкцій:

В останній конструкції використовується властивість-масив frames будь-якого об'єкта Frame.

Цей об'єкт використовується найчастіше у зв'язку з двома корисними методами write() і writeln(), які записують у документ інформацію і, тим самим, дозволяють динамічно його створювати.

Об'єкти location та history

Метод до () цього об'єкта завантажує сторінку зі списку відвідуваних. Поточна сторінка має індекс 0, попередні до поточної сторінки індексуються негативними цілими числами, а наступні - позитивними цілими числами. Наприклад, наступний оператор

завантажить сторінку, розташовану на три пункти тому по відношенню до поточної у списку відвіданих сторінок.

Кожна форма у документі, визначена тегом

Усі елементи форми породжують відповідні об'єкти, підпорядковані об'єкту батьківської форми (див. рис. 9.6). Таким чином, для посилання на об'єкт Text форми form1 слід користуватися будь-яким з наведених нижче операторів:

Кожен об'єкт Form також має властивість-масив елементів, що містить посилання на всі підлеглі формі елементи в тому порядку, як вони визначені в документі HTML.

Елементи форми, точніше їх об'єкти, мають властивість name, значення якого дорівнює значенню параметра тега NAME , а також властивість value, значення якого визначається змістом параметра VALUE елемента форми. Наприклад, для елементів text і textarea значення цієї властивості буде рядок вмісту полів введення цих елементів, для кнопки підтвердження - напис на кнопці і т.д.

Деякі об'єкти мають властивості, які масивами. Вони використовуються для зберігання інформації про підлеглі об'єкти, коли їх кількість заздалегідь не відома (наприклад, масив forms об'єкта document або масив elements об'єкта Form). У табл. 9.8 перераховані всі об'єкти, що мають властивості-масиви.

Відображає теги у порядку їх появи у документі

Інформація про подію залежить від конкретної події, що відбулася. Наприклад, об'єкт event події MouseDown містить інформацію про тип події (властивість type), яка кнопки миші була натиснута (властивість which), яка клавіша (Ait, shift або Ctrl) утримувалася при натисканні кнопкою миші (властивість modifiers), та значення координат курсора миші у момент виникнення події (властивості screenX та screenY).

Об'єктиevent спільно з оброблювачами подій дозволяють проводити досить тонку обробку події.

Виклик процедури обробки події

Виклик процедури обробки події можна здійснити двома способами:

явно - призначивши посилання на процедуру обробки події у відповідній властивості об'єкта;

неявно – у параметрі обробки події тега відповідного елемента.

Сама процедура задається наступним кодом:

alert("Відбулася подія:" + e.type)

Другий, неявний виклик процедури обробки події вимагає завдання звернення до неї в параметрі onMouseDown тега . При цьому необхідно явно вказувати параметр event, як показано у наступному фрагменті коду:

Насамперед створимо HTML-сторінку з текстовим полем, у яке виводитимемо поточний час:

При завантаженні документа викликається функція JSclock(), яка визначає і відображає в полі digits форми clockForm поточний час. Визначення самої функції розмістимо у розділі документа:

При викликі змінна time містить посилання на об'єкт Date, в якому зберігається поточний час. Методи getHours(), getMinutes() і getseconds() об'єкта Date визначають годинник, хвилини і секунди, що задаються системним годинником. У змінній temp формується рядок "годинник:хвилини: секунди" для відображення в полі digits форми clockForm. Найцікавіший оператор цієї процедури - оператор виклику функції setTimeout(). Ця функція виконує вказані в першому параметрі дії після закінчення інтервалу часу (у мілісекундах), що задається другим параметром. У нашому випадку через одну секунду знову викличеться функція JSclock(), відобразить у полі форми поточний час, і процес повториться знову.

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

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

Фон графічного файлу для команди відповідає фону вихідної картинки для меню (жовта кольорова гама); фон графічного файлу для вибраної команди реалізований у синіх тонах.

Мал. 9.9.Розбиття картинки фону на складові частини

Мал. 9.10.Графічні файли команди та обраної команди меню

Графічні зображення подібного типу досить просто можна зробити за допомогою, наприклад, програми Adobe Photoshop.

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