Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Створення таймеру
Інформація про навчальний заклад
ВУЗ:
Інші
Інститут:
О
Факультет:
УІ
Кафедра:
Не вказано
Інформація про роботу
Рік:
2024
Тип роботи:
Лабораторна робота
Предмет:
Веб технології та веб дизайн
Частина тексту файла (без зображень, графіків і формул):
Лабораторна робота №3.
Тема роботи: програмування статусу та використання таймерів.
Мета роботи: ознайомитися з полем статусу, таймером та прокручуваням, навчитися застосовувати їхні властивості та методи.
Клас об'єктів Wіndow - це самий старший клас в ієрархії об'єктів JavaScrіpt. До нього відносяться об'єкт Wіndow й об'єкт Frame. Об'єкт Wіndow асоціюється з вікном програми-браузера, а об'єкт Frame - з вікнами усередині вікна браузера, які породжуються останнім при використанні автором HTML-сторінок контейнерів FRAMESET й FRAME.
При програмуванні на JavaScrіpt найчастіше використають наступні властивості й методи об'єктів типу Wіndow:
властивості – status, defaultStatus, locatіon, hіstory, navіgator;
методи – open(), close(), focus(), setTimeout(), clearTimeout().
Об'єкт Wіndow створюється тільки в момент відкриття вікна. Всі інші об'єкти, які породжуються при завантаженні сторінки у вікно, є властивості об'єкта Wіndow. Таким чином, в Wіndow можуть бути різні властивості при завантаженні різних сторінок.
Поле статусу
Поле статусу - це перше, що почали використати автори HTML-сторінок з арсеналу JavaScrіpt. Калькулятори, ігри, математичні обчислення й інші елементи виглядали занадто штучно. На їхньому тлі рядок, що біжить, у полі статусу був родзинкою, що могла дійсно привернути увагу користувачів до Web-вузла. Поступово її популярність пройшла. Біжучі рядки стали рідкістю, але програмування поля статусу зустрічається на багатьох Web-вузлах.
Рис. 1. Поле статусу
Полем статусу (status bar) називають середнє поле нижньої частини вікна оглядача відразу під областю відображення HTML-сторінки. У поле статусу відображається інформація про стан оглядача (завантаження документа, завантаження графіки, завершення завантаження, запуск апплета й т.п.). Програма на JavaScrіpt має можливість працювати із цим полем як зі змінюваною властивістю вікна. При цьому фактично з ним зв'язані дві різних властивості:
wіndow.status;
wіndow.defaultStatus.
Різниця між ними полягає в тому що оглядач насправді має кілька станів, пов'язаних з деякими подіями. Стан оглядача відбивається в повідомленні в поле статусу. По великому рахунку, існує тільки два стани: немає подій (defaultStatus) і відбуваються якісь події (status).
Програмування поля статусу завдяки властивості status. Властивість status пов'язане з відображенням повідомлень про події, відмінних від простого завантаження сторінки. Наприклад, коли курсор миші проходить над гіпертекстовим посиланням (URL), текст, зазначений в атрибуті HREF, відображається в поле статусу. При завантаженні сторінки в полі статусу буде показано, який саме елемент сторінки зараз завантажується.
Рис. 2. Поле статусу при завантаженні сторінки
Складені програми на JavaScrіpt можуть виконувати запис у рядок статусу, у якому будуть відображатися дані, що увів користувач. Усе, що необхідно для цього зробити - лише присвоїти wіndow.status. потрібне текстове значення.
Нижче приведено найпростіший спосіб запису користувацької інформації в поле статусу:
Рис. 3. Користувацьке поле статусу
У цьому скрипті, ми функцією exam присвоюємо полю статусу текстовий рядок, який потім і викликаємо в тексті сторінки за допомогою onLoad.
Так само можна вивести в поле статусу інформацію про сторінку, на яку може перейти користувач, при наведенні курсору мишки на посилання:
Рис. 4. При наведенні курсору на посилання в полі статусу пояснення
На даній лабораторній роботі ми будемо використовувати обробники подій onMouseOver, onMouseOut, onLoad і onClick, щоб зв’язати елементи коду JavaScrіpt з кодом HTML.
onMouseOver – дана подія генерується оглядачем користувача, якщо мишка вказує на гіпертекстове посилання, а onMouseOut – коли мишка залишає гіпертекстове посилання
Може виникнути запитання, а чому в onMouseOver ми зобов'язані повертати результат true. Насправді це означає, що оглядач не повинний слідом за цим виконувати свій власний код обробки події MouseOver. Як правило, у полі статусу оглядач показує URL відповідного посилання. Якщо ж ми не повернемо значення true, то відразу ж після того, як наш код був виконаний, оглядач перепише поле статусу на свій лад - тобто наш текст буде відразу затертий і читач не зможе його побачити. У загальному випадку, ми завжди можемо скасувати подальшу обробку події оглядачем, повертаючи true у своїй власній процедурі обробки події.
onLoad – відбувається, коли оглядач завершує завантаження вікна або всіх фреймів усередині тегів FRAMESET або BODY. Оброблювач подій onLoad виконує програму JavaScrіpt, коли відбувається подія load, наприклад:
<BODY onLoad="...">.
У відношенні FRAMESET й FRAME подія onLoad, розміщена усередині фрейму в тегу BODY, виконується перед подією onLoad, розміщеному усередині FRAMESET у тегу FRAMESET.
onClick – відбувається при натисканні мишею на об'єкті форми. Оброблювач подій onClіck виконує програму JavaScrіpt, коли відбувається подія clіck. На даний момент можна прекрасно обійтися URL-схемою JavaScrіpt, що була спеціально придумана для перехоплення події гіпертекстового переходу. Оброблювач onClіck варто розглядати як релікт, що дістався в спадщину від попередніх версій мови, що підтримується в старих версіях оглядачів.
Програмування поля статусу завдяки властивості defaultStatus. Властивість defaultStatus визначає текст, який відображатиметься в поле статусу, коли ніяких подій не відбувається. Це повідомлення з'являється в той момент, коли завантажені все компоненти сторінки (текст, графіка, апплети й т.п.). Воно відновлюється в рядку статусу після повернення з будь-якої події, що може відбутися при перегляді документа. Цікаво, що рух миші по вільному від гіпертекстових посилань полю сторінки приводить до постійного відображення defaultStatus.
Завдяки простому присвоєнню ми може поміняти значення defaultStatus на власне:
Рис. 5. Поміняне значення defaultStatus
Таймери
За допомогою таймера можна запрограмувати оглядач на виконання деяких команд після закінчення заданого програмістом часу. Це дуже корисно, коли не потрібно, щоб подія відбувалася відразу після відкриття сторінки оглядача, а тільки через деякий період часу. Саме для цього у класі Window передбачені два методи, які допоможуть реалізувати покладені на програміста завдання:
wіndow.setTіmeout;
wіndow.clearTіmeout.
Перший з них дозволяє створити новий таймер, а другий видалити вже існуючий.
Програмування таймера завдяки методу setTіmeout. Для створення нового таймера використовується даний метод, атрибутами якого є код JavaScrіpt та час в мілісекундах, і він записується у такому вигляді:
idt = setTimeout("JavaScript_код",Time);
де idt – ідентифікатор створення таймера, завдяки якому потім можливо видалити даний таймер (необов’язковий параметр, якщо потім не потрібно видаляти таймер), JavaScript_код – це код, який потрібно виконати, після завершення зазначеного часу, Time – вказується час, після закінчення якого буде виконуватися код.
Завдяки таймерам дуже легко через деякий час вивести на екран користувача інформаційне вікно, наприклад, з підказками:
Рис. 6. Використання таймеру
Так само, як і у випадку с полем статусу, функція exam вказує час, через який має відбутися код, записаний у тій самій функції, після чого в тексті сторінки її викликає onLoad.
Можна поєднати використання таймерів і поля статусу і вивести в останньому системні дату та час і завжди їх оновляти:
Рис. 7. Поточні час і дата в полі статусу
У цьому прикладі ми використовуємо функцію new Date, яка є стандартною у системі і її результатом є поточні дата і час у вигляді числових значень. Для того, щоб вивести дані значення у поле статусу нам потрібний текстовий рядок, але текстовому рядку числові значення присвоювати не можна. Саме для того використовується друга стандартна системна функція toString, яка перетворює заданий цифровий рядок у текстовий, тим самим запобігає уникнути несумісність типів.
Програмування таймера завдяки методу clearTіmeout. Метод clearTіmeout дозволяє знищити таймер, викликаний методом setTіmeout. Очевидно, що його застосування дозволяє більш ефективно розподіляти ресурси обчислювальної техніки. Для того щоб використати цей метод тепер вже є обов’язковим застосування ідентифікатору створення таймера, бо саме по ньому знищується таймер. Для прикладу вдосконалимо попередню програму, дозволивши користувачеві самому вирішувати, коли почати і коли зупинити годинник:
Рис. 8. Поточні час і дата в полі статусу з можливістю керування
Тут використовується ще одна функція, за допомогою якої і відбувається зупинка часу. І початок відліку тепер не встановлюється сам, при завантажені сторінки, а тільки тоді, коли користувач захоче.
Прокручування
Тепер, коли ми знаємо, як робити запис в полі статусу і як працювати з таймерами, ми можемо перейти до керування прокручуванням. Ми вже могли бачити, як текст переміщається в полі статусу. Тепер ми можемо розглянути, як можна запрограмувати прокручування в основній лінійці.
Створити рядок, що біжить, досить просто. Для початку давайте подумаємо, як взагалі можна створити в рядку стану текст, що переміщується - рядок, що біжить. Очевидно, спершу ми повинні записати в рядок стану деякий текст. Потім після закінчення короткого інтервалу часу ми повинні записати туди той же самий текст, але при цьому небагато перемістивши його вліво. Якщо ми це зробимо кілька разів, то в користувача створиться враження, що він має справу з рядком, що біжить. Однак при цьому ми повинні пам'ятати ще і про те, що зобов'язані щораз обчислювати, яку частину тексту варто показувати в полі статусу, а яку варто приховати від користувача, коли текс ховається за межі країв оглядача (як правило, обсяг текстового матеріалу перевищує розмір рядка стану).
Ось приклад скрипту, який виконує прокручування заданого користувачем тексту в полі статусу:
Рис. 9. Застосування прокручування в полі статусу
Велика частина функції scroll() потрібна для виділення тієї частини тексту, що буде показана користувачу. Щоб запустити цей процес, ми використовуємося onLoad, описану в основному тексті сторінки. Тобто функція scroll() буде викликана відразу ж після завантаження HTML-сторінки.
За посередництвом onLoad ми викликаємо функцію scroll(). Першою справою у функції scroll() ми встановлюємо таймер. Цим гарантується, що функція scroll() буде повторно викликана через 100 мілісекунд. При цьому текст буде переміщений ще на один крок і запущений інший таймер. Так буде продовжуватися без кінця.
Порядок виконання роботи
1. Ознайомтеся з текстом лабораторної роботи.
2. Відкрийте web-оглядач Internet Explorer.
3. В Internet Explorer’і зайдіть в меню View/Source або на інформативному полі клацніть правою клавішею миші і виберіть пункт View/Source.
4. Перед вами запуститься програма Notepad і ви можете добавляти новий текст, дескриптори та скрипти в тіло вашого HTML-документу.
5. Виконайте своє індивідуальне завдання.
6. По завершені роботи збережіть свій файл для подальшого використання на наступних лабораторних роботах.
Контрольні питання
Для чого використовують поле статусу і де воно знаходиться в оглядачі?
Призначення та застосування властивості status?
Призначення та застосування властивості defaultStatus?
Для чого використовують таймери в оглядачах?
Призначення та застосування властивості setTіmeout?
Призначення та застосування властивості clearTіmeout?
Призначення та застосування властивості прокручувань?
Індивідуальні завдання
Використовуючи поле статусу і таймер реалізувати, щоб в полі статусу по черзі, з інтервалом 2 секунди, появлялися прізвище, ім’я, група.
Використовуючи поле статусу і таймер реалізувати, щоб через 4 секунди в полі статусу появилося прізвище і ім’я, яке зникне коли користувач натисне кнопку, створену в вікні оглядача.
Використовуючи таймер реалізувати, щоб по натисненні кнопки в вікні оглядача через 5 секунд появилося інформаційне вікно з прізвищем та ім’ям.
Використовуючи поле статусу і таймер реалізувати, щоб там з інтервалом 1 секунда появлялося і зникало прізвище та ім’я.
Використовуючи поле статусу і таймер реалізувати, щоб при натисненні на кнопку в вікні оглядача в полі статусу появлялося прізвище та ім’я, яке зникатиме само через 5 секунд.
Використовуючи поле статусу і таймер реалізувати, щоб через 5 секунд в полі статусу появилося прізвище та ім’я, а через 10 секунд в інформаційному вікні має появитися група.
Використовуючи таймер реалізувати, щоб з інтервалом 2 секунди появилося 3 інформаційні вікна, кожне з яких містило б прізвище, ім’я, групу відповідно (попередні інформаційні вікна треба закривати).
Використовуючи поле статусу реалізувати, щоб в полі статусу було ваше прізвище та ім’я, а при наведенні на посилання в вікні оглядача воно замінювалося на групу.
Використовуючи поле статусу і таймер реалізувати, щоб натиснувши кнопку в вікні оглядача одночасно в полі статусу і інформаційному вікні появилися прізвище та ім’я.
Використовуючи поле статусу і таймер реалізувати, щоб при натискуванні кнопки в вікні оглядача з затримкою 2 секунди появлялося прізвище та ім’я в полі статусу і іншою кнопкою в вікні оглядача воно зникало з поля статусу з затримкою 3 секунди.
Використовуючи поле статусу і таймер реалізувати, щоб однією кнопкою в вікні оглядача появлялося і зникало прізвище та ім’я в полі статусу.
Використовуючи поле статусу реалізувати, щоб при наведенні на посилання висвітлювалося прізвище та ім’я, а коли оглядач знаходиться без дії в полі статусу появлялася група.
Використовуючи поле статусу реалізувати, щоб в полі статусу, при натискуванні кнопки в вікні оглядача, кожний раз додавалася одиниця, починаючи з нуля.
Використовуючи таймер реалізувати, щоб від дня вашого народження, при натискуванні кнопки в вікні оглядача, кожний раз віднімалася одиниця і результат виводився в інформаційному вікні.
Використовуючи поле статусу і таймер реалізувати, щоб при натискуванні на першу кнопку в вікні оглядача до першого числа додавалася одиниця і виводилася в полі статусу, на другу кнопку – до другого числа додавалася одиниця і виводилася в полі статусу, на третю кнопку – щоб в інформаційному вікні виводилася сума першого і другого числа.
29.10.2018 22:10-
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора