Практична робота №19

Тема: Модель подій динамічного HTML.

План виконання роботи:

1. Написати сценарій, що опрацьовує подію OnClick для ділянки тексту та для кнопки. В результаті натискання на текст та на кнопку повинно виводитись відповідне повідомлення за допомогою метода alert(). При написанні сценарію використати атрибути FOR та EVENT.

2. Написати сценарій, в якому свідомо допущено помилку. Використовуючи подію ONERROR необхідно попередити появу стандартного діалогового вікна з повідомленням про помилку та опрацювати її наступним чином: код помилки та номер строки в якій вона виявлена вивести в строку стану браузера.

3. Створити сторінку на якій міститься зображення. Написати сценарій, в якому використовується подія ONMOUSEMOVE для відображення у вікні браузера поточних координат миші. Положення миші повинно подаватись в координатній системі того об’єкта, на якому знаходиться курсор миші.

4. Створити сторінку яка містить таблицю із заголовком у вигляді зображення. У комірках таблиці розташувати цифрові коди основних HTML – кольорів, а атрибуту ID кожної комірки задати ім’я відповідного кольору. Написати сценарій, який при наведенні курсора миші на заголовок таблиці змінював би зображення – заголовок ; при наведенні на комірку таблиці – змінював колір елементів комірки на колір, заданий в атрибуті ID; як тільки курсор виходить за межі комірки – текст в комірці таблиці повинен бути замінений на ім’я кольору, в який пофарбований колір комірки.

5. Створити сторінку що містить HTML форму за наведеним прикладом:

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

6. Додати в сценарій з попереднього завдання опрацювання подій ONSUBMIT і ONRESET для кнопок очищення полів форми та відправлення даних на сервер. При натисканні на кнопки необхідно виводити діалогове вікно, в якому користувачу задається питання:

Якщо користувач підтвердив свій намір відправити введені в форму дані на опрацювання (натиснув кнопку ОК) властивості returnValue повертається значення true.

Вимоги до звіту:

1. Звіт повинен бути оформлений на аркуші А4 з дотриманням стандартних вимог.

2. Звіт повинен містити:

a. Скріншот виведених вікон запитів та діалогів.

b. Код сценаріїв сторінки.

c. Висновки.

Практична робота №20

Тема: Застосування об’єктної моделі DHTML

План виконання роботи:

1. Написати сценарій, що пропонує користувачу ввести в діалоговому вікні ім’я кольору і потім змінює колір фону на задане значення.

2. Написати сценарій, що демонструє застосування динамічного позиціонування, динамічної зміни стилю та динамічної зміни змісту. Необхідно:

• змінювати положення елементу на сторінці, звертаючись до його властивості CSS left;

• змінювати із сценарію властивості color і fontSize;

• змінювати зміст елементу , використовуючи властивість елементу innerHtml.

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

4. Написати сценарій, що демонструє використання об’єкту navigator для перенаправлення користувача на різні версії сторінок в залежності від того, в якому браузері переглядається сайт.

5. Посилання на об’єкти вікна. Створити сторінку, яка містить кнопку для відкриття нового пустого вікна яке потім можна закрити з головного вікна. Для кожної кнопки написати сценарій, що опрацьовує подію OnClick.

6. Властивості і методи вікна. Створити сторінку яка містить кнопки для виклику методів window.alert (), window.confirm(), та window.prompt(). Строка стану в нижній частині браузера повинна містити інформацію про ім’я, прізвище та групу студента, що виконав роботу.

7. Використання методу document.write(). Створити сторінку що містить кнопку яка викликає новий зміст документу, включаючи дескриптори HTML для заголовку нового документу і атрибути кольору дескриптора <BODY>.

8. Використання методу document.write() з іншим вікном. Написати сценарій, що створює підвікно, в яке записується документ згенерований сценарієм. Запис документу у вікно повинен виконуватись при натисканні відповідної кнопки.

9. Навігація з об’єктом SELECT Створити сторінку, яка містить випадаючий список з варіантами вибору сайта на який користувач бажає перейти з даної сторінки. Записи елементів списку повинні вказувати адреси, за якими проводиться переміщення всередині та зовні поточного Web вузла. В атрибуті VALUE необхідно задати адреси URL кінцевих Web сторінок.

10. Відправлення даних форм та перевірка їх правильності. Створити сторінку, яка містить HTML форму з декількома текстовими полями та кнопкою Submit. Написати сценарій, що при спробі відправити дані перевіряє чи заповнив користувач всі поля форми. У тому випадку, якщо хоча б одне поле не заповнене, вивести відповідне повідомлення.

Вимоги до звіту:

1. Звіт повинен бути оформлений на аркуші А4 з дотриманням стандартних вимог.

2. Звіт повинен містити:

a. Скріншот виведених вікон запитів та діалогів.

b. Код сценаріїв сторінки.

c. Висновки.