Урок 96                                                                        Інформатика 11(ІКТ)

Чим більше знаєш, тим більше можеш.

Е. Абу

Створення інтерактивної книги зі сторінками, що відповідають частинам сюжету; організація навігації в книзі.

Мета.

Навчальна. Узагальнення та систематизація знань учнів з веб-дизайну, розвиток аналітичних і синтетичних здібностей учнів, виявлення в них літературного хисту та розвиток навичок само­стійного мислення.

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

Виховна. Виховувати наполегливість, естетичність у оформленні, грамотно висловлювати свої думки, вміння працювати у команді.

Завдання проекту

1. Вибрати тему для інтерактивної книги.
2. Знайти для неї текстовий та ілюстративний матеріал.
3. Розробити дерево сюжетних ліній.
4. Обрати технологію створення інтерактивної книги (PowerPoint, HTML, Publisher, середовище програмування).
5. Розробити дизайн та систему інтерфейсу.
6. Створити у книзі сторінки, що відповідають сюжету.
7. Організувати систему навігації книгою.
8. Виправити в тексті орфографічні, граматичні та логічні по­милки.
9. Створити звіт за вказаною формою.
10. Змонтувати відеокліп за допомогою програми Microsoft Movie Maker.

Зауваження, 

Інтерактивна книга має містити такі обов’язкові елементи:

• титульна сторінка;
• головне меню;
• відомості про авторів;
• правила користування книгою;
• відомості про використані матеріали;
• змістова частина.

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

На сторінці головного меню слід створити посилання на сторінки, що містять:

• відомості про авторів;
• правила користування книгою;
• відомості про використані матеріали;
• початок книги.

На сторінці відомостей про авторів видання потрібно подати таку інформацію:

• прізвища, імена та фото авторів;
• відомості про розподіл обов’язків між ними;
• стислі відомості про кожного з авторів (хобі, життєві інте­реси, кредо).

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

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

Кожна сюжетна лінія повинна мати структуру художнього твору, тобто включати зав’язку, розвиток дії, кульмінацію та розв’язку. У книзі має бути понад 10 ключових моментів. Обсяг кожної бічної сюжетної лінії повинен складати не менше трьох сторінок. По закінченні роботи необхідно надати файл в форматі Word зі схе­мою дерева сюжетних ліній, папку інтерактивної книги в електрон- ному вигляді з усіма сторінками, ілюстраціями, скриптами і до­поміжними матеріалами, звіт за вказаною формою та файл архіву всіх зазначених матеріалів.

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

Тип уроку. Засвоєння нових знань і навичок.

Уміння, необхідні учням: для роботи над проектом кожен учень повинен володіти базовими знаннями з теми «Текстовий проце­сор», однієї з таких тем, як «Створення комп’ютерних презента­цій» і «Мова HTML», вміти програмувати в певному середовищі.

Устаткування та програмні засоби: доступ до мережі Інтернет, програма Microsoft Word, графічний редактор, програма Power­Point або середовище програмування.

Матеріали для роботи з учнями:

• Костюков В.П., Мотурнак Є.В. Інформаційний працівник. Навч.посібник. - К.: Вид.група BHV, 2011.
• Мультимедійне обладнання

План

1. Організація початку уроку
2. Правила ТБ при роботі в кабінеті Інформатики.
3. Мотивація навчальної діяльності.
4. Актуалізація опорних знань.
5. Вивчення нового матеріалу.
6. Застосування знань.
7. Підсумки уроку.
8. Домашнє завдання.

Хід уроку

1. Організація початку уроку.

2. Інструктаж БЖД.

3. Актуалізація опорних знань.

4. Мотивація навчальної діяльності.

У кого з вас під час читання художніх творів не виникало ба­жання змінити щось у долі головних героїв? Чи не хотілося вам виступити в ролі співавтора, втрутитись у перебіг подій та спря­мувати їх в інше русло? Погодьтеся, це зовсім інший підхід до читання, реалізувати який дає змогу та обставина, що все більше літератури видається в електронному вигляді.

Отож запрошуємо вас прийняти участь у надзвичайно цікавій справі — створенні інтерактивної книги. Це книга, що читається не підряд, а в тій послідовності, яку визначає сам читач як ак­тивний творець сюжету.

Текст інтерактивної книги розбито на логічні відрізки між ключо­вими подіями, після яких хід сюжету може бути змінено. Читач обирає той варіант перебігу кожної ключової події, який йому до вподоби, і далі сюжет розвивається залежно від цього вибору. Першими творами, які можна віднести до категорії інтерактивних, були оповідання Хорхе Луї Борхеса «Сад стежинок, що розходять­ся» (1941 рік) та «Аналіз творчості Герберта Куейна» (1944 рік), що містять кілька розгалужень та сюжетних ліній.

Серед паперових видань представниками інтерактивної літерату­ри є так звані книги-ігри, у яких читачеві пропонується відчути себе головним героєм. Ці книги складаються з окремих розділів та містять посилання на інші розділи, до яких читач переходить залежно від ним же прийнятого рішення. Один з прикладів такої книги — роман Бориса Акуніна «Квест».

Із появою комп’ютерів під інтерактивною літературою (interactive fiction) почали розуміти також текстові квести, у яких взаємодія між користувачем і комп’ютером здійснюється шляхом введення та відображення текстових команд. Комп’ютер дає змогу досягти справжньої інтерактивності, забезпечуючи читачеві можливість більш повно взаємодіяти з уявним світом книги — використову­вати різні предмети, змінювати діалоги героїв тощо.

5. Вивчення нового матеріалу.

Створення сторінок книги

Створивши шаблон книги, можна приступати до її заповнення текстом та ілюстративним матеріалом. Фактично кількість зміс­тових сторінок книги дорівнюватиме кількості локацій у дереві сюжетних ліній.

Цю роботу можна розбити на кілька етапів:

• розробка файлової структури книги;
• розробка системи іменування файлів;
• створення сторінок та заповнення їх відповідним вмістом.

Організація файлової структури книги

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

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

Найкращим у подібних випадках вважається принцип золотої середини. Ми пропонуємо дотримуватись найрозповсюдженішої у веб-дизайні структури папок:

• файли веб-сторінок (html) зберігати у кореневій папці книги;
• файли зображень (gif, jpg, jpeg, png) розмістити у папці images, яка зберігається у кореневій папці книги;
• файли скриптів (js) розмістити у папці script, що зберігається в кореневій папці книги;
• відео-, аудіо- та їм подібні файли зберігати у папці media, що входить до складу кореневої папки книги;
• для зберігання документації (дерева сюжетних ліній, звітів, інструкцій тощо) у кореневій папці книги створити папку docs.

Зауважимо, що кореневій папці книги потрібно надати назву на кшталт ІпІегЬоок_Прізвище1_Прізвище2_ПрізвищеЗ_Прізвище4.

На рис. 4.20 показано, який вигляд повинна мати файлова струк­тура вашої книги.

Система іменування файлів та сторінок

Для будь-якого складного веб-сайту необхідно розробити чітку систему іменування файлів. Це запорука того, що вдасться уник­нути багатьох помилок, прискорити пошук файлів, забезпечити зручність тестування.

Перш за все потрібно визначити, файли яких типів використову­ватимуться у проекті. Припустимо, що інтерактивна книга буде складатися з файлів, у яких зберігатимуться:

• змістові сторінки книги у форматі HTML;
• службові сторінки: титул, правила користування, відомості про авторів тощо у форматі HTML;
• ілюстрації до книги у форматі JPG;
• фони сторінок у форматі JPG або GIF;
• елементи дизайну у форматі GIF;
• скрипти у форматі JS;
• Flash-анімація у форматі SWF;
• відеофайли у форматі FLV, AVI, WMV;
• аудіофайли у форматі MP3, WAV, WMA.

Одразу зауважимо, що всі файли мають міститися у відповідних папках.

Усі файли потребують власних імен. Зверніть увагу на те, що ми створюємо інтерактивну книгу у вигляді веб-сайту, тож рано чи пізно ця книга може бути розміщена у мережі Інтернет для загального доступу. Провайдери, які пропонують таку послугу, як розміщення власних сайтів, використовують на своїх серверах досить різні операційні системи. Найчастіше, це Unix-подібні сис­теми: Linux, FreeBSD та ін. З огляду на це на імена файлів на­кладаються певні обмеження як запорука того, що всі посилання і скрипти працюватимуть вірно.

• В іменах файлів можна використовувати лише літери ла­тиниці, набрані у нижньому регістрі, цифри та символ під­креслення. Заборонено використання кирилиці, пробілів та спецсимволів.
• Початковий файл книги повинен мати назву index.html.
• Імена мають бути інформативними, тобто відповідати вмісту файлу.

Деякі файли, зокрема сторінки з текстом, будуть подібні один до одного, тому для них можна використовувати імена, що вказува­тимуть на тип файлу (stor, img) і номер (01, 27, 0076), наприклад: stor01.html, stor27.html, img05.jpg.

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

Файли, які не повторюються (відомості про авторів, правила, ти­тул тощо), повинні мати інформативні імена.

Створення сторінок на базі розробленого шаблону та згідно з деревом сюжетних ліній

На практиці робота над сторінками книги полягає у створенні файлів усіх сторінок із використанням шаблону, про принцип підготовки якого розповідалося у підрозділі «Розробка дизайну та інтерфейсу».

1. Створіть копію файлу шаблону.
2. Перейменуйте його, давши сторінці ім’я відповідно до систе­ми іменування.
3. Відкрийте файл у програмі Блокнот
4. У програмі Microsoft Word наберіть текст сторінки, перевірте орфографію та синтаксис.
5. Вставте перевірений текст сторінки з Word до html-файлу сторінки, відкритого у Блокноті (замість напису «Текст сто­рінки»).
6. Замініть написи «Варіант ...» у клітинках навігації на описи можливих варіантів подальшого розвитку подій у книзі, по­передньо перевіривши їх у Word на наявність помилок.
7. Керуючись деревом сюжетних ліній, змініть посилання у клі­тинках навігації, записавши в атрибути href="..імена фай­лів відповідних сторінок.
8. У клітинці ілюстрації змініть ім’я файлу зображення у тегу <і mg,..>.
9. Якщо потрібно, змініть текст колонтитула, фонове зображен­ня, підключіть звук та відео.
10. За необхідності підключіть файли скриптів, надайте об’єктам імена та опишіть процедуру обробки подій (про те, як це робиться ви дізнаєтесь із підрозділу 4.6).

<html>

<head>

<meta content="charset=windows-1251" >

<title>Ha3sa інтерактивної книги</Ш1е>

</head>

<body background=”images\bfonl.jpg” text=#000000 vlink=#CC00CC 1 і nk=#CC00CC a1ink=red>

<table background="images\fon4.jpg" width=960 align=center border=0 cellspacing=0 cel 1padding=0 bgcolor="white">

<tr height=48>

<td width=202><img src="images\logo.gif" width=192 height=48></td> <td width=80l colspan=4 bgcolor=#FFFFFF align="center" valign="center"> <font color=#CC00CC size=6>

<b>

«Пригоди бравого солдата Швейка». Зустріч </b>

</font>

</td>

</tr>

<tr height=360>

<td width=60$ colspan=3 align="center" valign="top">

<table cellpadding="20">

<tr>

<td>

<p align="justify">

Текст сторінки </p>

</td>

</tr>

</table>

</td>

<td width=40Ј colspan=2 align="center" valign="center">

<img src="іmages\sweik.jpeg" width=300>

</td>

</tr>

<tr height=120>

<td width=20Ј bgcolor=#FFCCFF align="center" valign="center">

<a href="storOO.html">Варіант 1</а>

</td>

<td width=2(W bgcolor=#FFCCFF align="center" va1ign="center">

<a href="storOO.html">Bapiант 2</a>

</td>

<td width=20l bgcolor=#FFCCFF align="center" valign="center">

<a href="storOO.html">Bapiант 3</a>

</td>

<td width=20& bgcolor=#FFCCFF align="center" valign="center">

<a href="storOO.html">Bapiант 4</a>

</td>

<td width=20% bgcolor=#CC99FF align="center">

<a href="stor01.html">no4aTM заново</а><Ьг>

<a href="rules.html">Правила</а><Ьг>

<a href="authors.html">Автори</а>

</td>

</tr>

</table>

</body>

</html>

Службові сторінки можна створювати на основі шаблону або кож­ну окремо, зберігаючи при цьому дизайн.

Використання JavaScript

Інтерактивна книга, створена засобами HTML, має статичний ха­рактер. Для забезпечення більшої інтерактивності та занурення читача у світ видання необхідно використовувати засоби динаміч­ного HTML, наприклад код JavaScript. Розглянемо кілька при­йомів, що можуть стати у пригоді під час роботи над проектом.

Підключення файлу скрипта

Виконавши перелічені далі дії, ви підключите до HTML-документа файл із кодом JavaScript.

1. У папці script створіть текстовий документ та перейменуйте його, давши ім’я, що відповідає системі іменування та має розширення js (наприклад, book.js).
2. Запишіть у файл скрипта необхідний код та збережіть цей скрипт.
3. Відкрийте файл HTML-документа і в розділ <head>.. .</head> додайте тег <script language=”JavaScript" src =".\script\book. js"> </script> (замініть book.js іменем, що відповідає вашій системі іменування).

Наведемо приклад файлу скрипта для перевірки:

name=prompt("Введення імені", “Будь ласка, вкажіть своє ім'я"); alert (name+", ласкаво просимо!") ;

Тепер у разі завантаження HTML-документа у браузер автома­тично виконуватиметься код, записаний у файлі скрипта. Коли необхідно, щоб код виконувався не одразу після завантаження, а у відповідь на дії користувача, код скрипта слід оформити у вигляді функцій.

Створення функцій JavaScript

Порядок створення функції у файлі скрипта такий.

1. Відкрийте файл скрипта у програмі Блокнот.
2. Запишіть заголовок функції в форматі function NameO, де Name необхідно замінити іменем функції.
3. У наступному рядку введіть відкриваючу фігурну дужку — це буде початок функції.
4. Запишіть код функції, тобто послідовність операторів.
5. Завершіть функцію, ввівши закриваючу фігурну дужку.
6. Збережіть файл скрипта.

Наведемо приклад функції, яка виводить на екран повідомлення:

function HelloO {

name=prompt(“Введення імені", "Будь ласка, введіть своє ім’я"); alert (name+", ласкаво просимо!") ;

}

Створюючи подібні функції, ви зможете запобігати автоматич­ному виконанню коду під час завантаження сторінки. Тепер необхідно навчитися запускати код функції на виконання. Але спочатку слід ознайомитися з такими поняттями, як об’єкти HTML і події.

Об'єкти HTML. Обробка подій за допомогою JavaScript

Віртуальний світ HTML-документа, подібно до реального світу, містить певні об’єкти. Будь-який віртуальний об’єкт має атрибути:

• ім’я, властиве лише цьому об’єкту (за таким унікальним ім’ям здійснюється звернення до об’єкта);
• властивості, що описують зовнішній вигляд та внутрішній стан об’єкта;
• події, на які об’єкт може реагувати.

Для того щоб створити об’єкт на основі будь-якого тегу, слід до­дати до нього атрибут id="...”, вказавши в лапках ім’я об’єкта. Воно має бути унікальним, не співпадати з ключовими словами мови JavaScript, складатися з латинських літер, цифр та знака підкреслення і починатися з літери. Знак підкреслення, до речі, також вважається літерою. Літери верхнього та нижнього регі­стрів у мові JavaScript розрізняються, тобто Name, name та nAmE — це різні імена.

Події, на які може реагувати об’єкт, задають за допомогою певних ключових слів:

• опсі і ск — однократне клацання лівою кнопкою миші;
• onmouseover — наведення курсору миші;
• onmouseout — виведення курсору миші з області об’єкта;
• ondblclick — подвійне клацання лівою кнопкою миші.

Зокрема, запис onclick="HelloO" у тегу означає, що після одно­кратного клацання відповідного об’єкта лівою кнопкою миші буде виконана функція Неї 1 о().

Для прикладу підключимо до сторінки stor04.html скрипт, збе­режений у файлі book.js, і подбаємо, щоб в результаті клацання колонтитула лівою кнопкою миші виконувалася функція Неї 1 о(). Підключення файлу скрипта здійснюється так:

<html>

<head>

<meta content="charset=windows-1251" >

<title>Ha3Ba інтерактивної KHnrn</title>

<script language="JavaScript" src="./script/book.js">

</script>

</head>

Подію, на яку має реагувати колонтитул (клацання колонтитула лівою кнопкою миші), та її обробник задають у такий спосіб:

<body background="images\bfonl.jpg" text=#000000 vlink=#CC00CC 1 іnk=#CC00CC alink=red>

<table background="images\fon4.jpg" width=960 align=center border=0 cellspacing=0 cellpadding=0 bgcolor="white">

<tr height=48>

<td width=20Ј><img src="images\logo.gif" width=192 height=48></td>

<td width=80Ј colspan=4 bgcolor=#FFFFFF align="center" valign="center"> <font color=#CC00CC size=6 id="colon" onclіck="Hel1o()">

<b>

«Пригоди бравого солдата Швейка». Зустріч </b>

</font>

</td>

</tr>

Зум-ефект

Властивості об’єктів HTML задають за допомогою атрибутів, що використовуються в тегу, на основі якого створено об’єкт. Напри­клад, для тегу <img.. .> можна змінювати такі атрибути, як width та height, при цьому буде змінюватися розмір зображення на сторін­ці. У такий спосіб можна створювати зум-ефект для ілюстрацій.

Для створення зум-ефекту необхідно мати дві функції: одну для збільшення зображення, іншу — для його зменшення. А в тегу самого зображення потрібно вказати імена об’єкта та обробників подій — зазначені функції.

1.    У файл скрипта додайте код:

function BigO {

malunok.width="300";

}

function Small О {

malunok.width="50":

}

2.    У файлі сторінки змініть тег <img> таким чином:

<img src="images\sweik.jpeg" width=50 id="malunok" onmouseover="Big()" onmouseout=''Smal 1 () ”>

3.    Збережіть файли скрипта та сторінки.

Відкривши відредаговану сторінку у браузері, ви побачите, що ілюстрація має занадто малі розміри — її ширина становить лише 50 пікселів (рис. 4.21).

Проте достатньо навести на цей малюнок курсор миші, і він на­буде оптимальних розмірів (див. рис. 4.19). Коли ж ви переведете курсор у інше місце, малюнок знову стане невеличким.

Функції з параметрами. Використання умовного оператора

У попередньому підрозділі для реалізації зум-ефекту було вико­ристано дві функції. За допомогою умовного оператора їх можна об’єднати в одну. Тоді й у разі наведення курсору миші на малю­нок, й у разі його переміщення в інше місце буде викликатися одна і та сама функція. Вона міститиме умову: чи є розмір ма­люнка зараз невеликим? Якщо так, то його потрібно збільшити, якщо ні — зменшити.

Код цієї функції може бути, наприклад, таким:

function ZoomO {

if (malunok.width=="50") malunok.width="300" else malunok.width="50";

}

Відповідно, теги, що задають події та їх обробників, набудуть такого вигляду:

<img src="images\sweik.jpeg" width="50" id="malunok" onmouseover="Zoom()" onmouseout="Zoom()">

Зверніть увагу на те, як записана умова порівняння:

• два символи «==» — операція порівняння,
• один символ «=» — оператор присвоєння.

Ми створили єдину функцію для застосування зум-ефекту до од­нієї ілюстрації. Якщо ж ілюстрацій багато, то для всіх них дове­деться писати окремі функції. Спростити завдання можна, лише скориставшись функцією з параметрами. Розглянемо приклад такої функції.

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

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

1. Підготуйте необхідні зображення і надайте їхнім файлам іме­на, що мають спільний початок і відрізняються номерами наприкінці імені, наприклад: ima01.jpg, ima02.jpg, ima03.jpg.
2. У файл скрипта додайте функцію: function Changelmg(number)

{

malunok.src="./images/ima"+number+".jpg" ;

}

3. Знайдіть фрагмент тексту, що відповідатиме першому зобра­женню. Розмістіть відкриваючий тег <span> перед цим текстом та закриваючий тег </span> після нього. Тег <span> не виконує жодної функції і не змінює текст чи структуру сторінки. Його використовують як контейнер за потреби застосувати засоби, що виходять за рамки HTML (CSS, JavaScript).
4. У тег <span> додайте атрибут onmouseover="ChangeImg(' 01')". Звер­ніть увагу на те, що 01 взято в одинарні лапки. Якщо їх не писати, то 01 автоматично перетвориться на 1. Проте якщо замість одинарних лапок використати подвійні, станеться по­милка.
5. Повторіть описані у пунктах 3-4 дії для всіх фрагментів тек­сту, змінюючи номер, який передається до функції.

Нижче наведено приклад тексту із відміченими фрагментами. Активними словами тут є «клітинки», «атрибута» та «таблицю».

<р align="justify">

Відступ між межами <span onmouseover="ChangeImg(’0Г)">клітинки</5рап> та текстом слід збільшити, але цього не можна зробити за допомогою <span onmo useover="ChangeImg('02')">атрибута</зрап> cell padding у окремій клітинці. Зазначений атрибут задається лише для таблиці в цілому. Щоб обійти проблему, ми вставимо в клітинку Текст сторінки <span onmouseover="ChangeIm g(‘03')">таблицю</5рап>, яка складається лише з однієї клітинки, і для неї вкажемо значення цього атрибута. Власне текст буде розташований всередині такої вставленої таблиці.

</р>

Зверніть увагу, що функції Changelmg(number) передається значен­ня параметра number, яке задає номер зображення. Додаючи цей номер до спільної частини імені, ми отримуємо імена необхідних файлів зображень.

Використання випадкових чисел

Під час роботи над книгою може виникнути потреба у моделю­ванні випадкових ситуацій. Наприклад, якщо читач вирішить, що герой повинен прийняти участь у битві, то результат може бути непередбаченим. У 20 % випадків на нього чекає загибель, у 50 % — перемога, а у ЗО % випадків герой потрапляє в полон. Для реалізації такої функціональності можна скористатися об’єктом Math, а саме його функцією randomO, яка генерує випадко­ві числа у діапазоні від 0 до 1. Щоб визначити, за яким варіантом мають розвиватися події, потрібно встановити, в який діапазон воно потрапляє: (0; 0.2], (0.2; 0.7] чи (0.7;1).

Код функції може бути таким:

function chooseO {

var х = Math.randomЦ; іf(x<=0.2) 1ocation.href="stor05.html"; і f((x>0.2)&&(x<=0.7)) 1ocati on.href="stor06.html"; і f(x>0.7) 1ocation.href="stor07.html";

}

Під час виконання цієї функції змінна х приймає випадкове зна­чення в діапазоні від 0 до 1. Далі у програмі перевіряється, у який проміжок потрапляє значення х, і в залежності від цього здійснюється перехід до відповідної сторінки.

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

У залежності від задуму авторів виклик цієї функції можна вста­вити в панель навігації, в одне з гіперпосилань (чи замість нього) або приховати в тексті сторінки. Це дасть змогу урізноманітнити інтерактивну книгу, ускладнити її та зробити цікавішою.

6. Застосування отриманих знань

7.  ПІДБИТТЯ ПІДСУМКІВ УРОКУ

8. ДОМАШНЄ ЗАВДАННЯ

1. Вивчити конспект.
2. Виконати завдання.