Лабораторна робота №5

Тема: Робота з Document Object Model. Обробка подій.

Мета роботи: вивчити засоби по роботі з об’єктною моделлю документа;
навчитися додавати, змінювати та видаляти елементи веб-сторінки; засвоїти
принципи роботи з CSS-стилями.

Завдання на лабораторну роботу

Для кожного наступного завдання розмістіть на сторінці потрібні елементи
форм та реалізуйте запуск відповідних функцій в обробниках подій. Усі завдання
реалізовуйте окремими функціями.
Завдання:
0). Опрацювати теорію по роботі з DOM:
- http://learn.javascript.ru/browser-environment
- http://learn.javascript.ru/dom-nodes
- http://learn.javascript.ru/dom-console
- http://learn.javascript.ru/traversing-dom
- http://learn.javascript.ru/searching-elements-dom
- http://learn.javascript.ru/searching-elements-internals
- http://learn.javascript.ru/basic-dom-node-properties
- http://learn.javascript.ru/attributes-and-custom-properties
- http://learn.javascript.ru/compare-document-position
- http://learn.javascript.ru/modifying-document
- http://learn.javascript.ru/multi-insert
Теорія по роботі з CSS-стилями:
- http://learn.javascript.ru/styles-and-classes
- http://learn.javascript.ru/metrics
- http://learn.javascript.ru/metrics-window
- http://learn.javascript.ru/coordinates
- http://learn.javascript.ru/coordinates-document
- http://learn.javascript.ru/dom-cheatsheet
Теорія по роботі з подіями:
- http://learn.javascript.ru/introduction-browser-events
- http://learn.javascript.ru/events-and-timing-depth
- http://learn.javascript.ru/obtaining-event-object
- http://learn.javascript.ru/event-bubbling
- http://learn.javascript.ru/event-delegation
- http://learn.javascript.ru/behavior
- http://learn.javascript.ru/default-browser-action
- http://learn.javascript.ru/dispatch-events

This study source was downloaded by 100000857481005 from CourseHero.com on 11-18-2022 04:03:52 GMT -06:00

https://www.coursehero.com/file/70026479/Laboratorna-robota-No-5/
 1). Створити код, який за величиною температури за шкалою Фаренгейта
обчислює величину температури в градусах Цельсія і навпаки. Веб-сторінка має
два текстових поля:
 температура за Фаренгейтом
 температура за Цельсієм
які містять відповідні числа.
Зовнішній вигляд:

Ніяких кнопок розміщувати не потрібно.

Сигналом для початку обчислення слугує зміна числа в текстовому полі.
Температура за Фаренгейтом (F) і температура за Цельсієм (C) зв'язані
формулою C=5/9 * (F-32).

2). Написати код, який перевіряє знання таблиці множення. Веб-сторінка

містить текстовий напис для показу загального рахунку, кнопку «наступне
завдання», текстовий напис для показу завдання, текстове поле для вводу
відповіді, кнопку «перевірити» та текстовий напис для виводу результатів
перевірки.
Завдання повинні генеруватися випадковим чином.
Зовнішній вигляд веб-сторінки:

3). Написати код, який перевіряє знання таблиці множення як і в завданні 2, але
для вибору правильної відповіді використайте радіокнопки. Вибір варіанту
відповіді є сигналом до початку перевірки. Для кожного завдання користувач має
лише одна спробу вибору.
Варіанти відповіді згенеруйти випадковичм чином.
Зовнішній вигляд веб-сторінки:

This study source was downloaded by 100000857481005 from CourseHero.com on 11-18-2022 04:03:52 GMT -06:00

https://www.coursehero.com/file/70026479/Laboratorna-robota-No-5/
This study source was downloaded by 100000857481005 from CourseHero.com on 11-18-2022 04:03:52 GMT -06:00

https://www.coursehero.com/file/70026479/Laboratorna-robota-No-5/
 4). Створити код для перелистування зображень.
Інформація про зображення зберігається у масиві об’єктів виду:
var imagesArray = [ {path: 'images/001.jpg',
title : 'ЖДТУ, ауд. 108',
description : 'Викладацька аудиторія'},
{path: 'images/002.jpg',
title : 'ЖДТУ, ауд. 103-а',
description : 'Лабораторія для студентів'},
{path: 'images/003.jpg',
title : 'ЖДТУ, ауд. 104',
description : 'Лабораторія для студентів'}];
Написати функцію, яка приймає ідентифікатор div-блоку, у якому
розміщуватиметься ротатор фотографій та масив зображень:
initPhotoRotator('rotator', imagesArray);

Ця функція повинна згенерувати необхідні теги та задати їх параметри і

оформлення. Для генерування тегів використовуйте document.createElement, не
допускається генерування контенту через запис тегів у html-коді.
На сторінці повинні відображатися посилання «Назад», «Вперед», які
дозволять змінювати зображення. Над зображення розмістити його номер та
загальну кількість зображень. Під зображенням вивести title та description. Для
першого зображення приховати посилання «Назад», для останнього – приховати
посилання «Вперед».
Зовнішній вигляд:

При переході між зображеннями не повинно бути ніяких «стрибків» сторінки.

5). Напишіть код для реалізації captcha. Алгоритм роботи капчі наступний:
- на вхід функції ініціалізації капчі передається ціле число – кількість цифр у
капці;
- випадковим чином генерується відповідна кількість цифр;
- число відображається у вигляді «набору пікселів» (span-блоки);
- користувач вводить число у текстове поле;

This study source was downloaded by 100000857481005 from CourseHero.com on 11-18-2022 04:03:52 GMT -06:00

https://www.coursehero.com/file/70026479/Laboratorna-robota-No-5/
 - відбувається перевірка правильності введення числа і відображається
відповідне повідомлення;
Приклад зовнішнього вигляду:

6). Створіть репозиторій IPLab5. Закомітьте у нього виконані завдання.

Надати доступ до репозиторію викладачам:
ПІК-14, ПІ-51, ПІ-52 morozov@ztu.edu.ua, evgenii2081991@gmail.com
ПІ-47в, КІ-1 morozov@ztu.edu.ua, alemcleod@gmail.com

This study source was downloaded by 100000857481005 from CourseHero.com on 11-18-2022 04:03:52 GMT -06:00

https://www.coursehero.com/file/70026479/Laboratorna-robota-No-5/
Powered by TCPDF (www.tcpdf.org)