Лабораторна робота 9 на тему Створення інтерактивних Web-документів з курсу Сучасні Internet-технології, НУДПСУ
« НазадЛабораторна робота № 9 Створення інтерактивних Web-документівМета роботи: освоєння практики створення інтерактивних Web-документів засобами JavaScript та CSS. Хід роботи 1. У папці HTML створити файл anim.html та записати у ньому такий код ("кістяк" HTML-сторінки): <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Створення інтерактивних Web-документів</title> <script> </script> </head> <body> </body> </html> 2. Створимо скрипт для того, щоб ця Web-сторінка завжди відкривалась у повновіконному режимі. Для цього: Визначаємо вертикальний та горизонтальний розмір екрана: ... h=window.screen.height; w=window.screen.width; </script> Визначаємо функцію, яка буде переміщати вікно з нашою Web-сторінкою у лівий верхній кут екрана та встановить розміри вікна, рівні розмірам екрана: ... function wr() { window.moveTo(0,0); window.resizeTo(w,h); } </script> Модифікуємо тег <body> для звернення до функції wr() при завантаженні документа у вікно браузера: <body onload="wr()"> 3. Створимо на нашій Web-сторінці вертикальне меню із двох елементів (кнопок). Вибір користувачем певного елемента меню повинен призводити до показу на сторінці відповідної інформації. Для цього: Додамо на нашу Web-сторінку три таблиці. У першій таблиці розмістимо два управляючі елементи меню (кнопки), у другій таблиці запишемо зміст першого розділу меню, а у третій ― зміст другого розділу. Другій таблиці присвоїмо id="r1", а третій ― id="r2": ... <table align="left"> <tr><td><input type="button" value="Перший пункт меню" style="width: 200px;"></td></tr> <tr><td><input type="button" value="Другий пункт меню" style="width: 200px;"></td></tr> </table> <table id="r1"> <tr> <td>Зміст першого розділу меню (Таблиця 2)</td></tr> </table> <table id="r2" style="display: none;"> <tr> <td>Зміст другого розділу меню (Таблиця 3)</td></tr> </table> </body> Визначимо, що при завантаженні Web-сторінки відображатись буде тільки зміст першого розділу меню, тобто таблиця 3 буде не видимою. Для цього модифікуємо код третьої таблиці: <table id="r2" style="display: none;"> При перегляді нашої Web-сторінки зміст другого пункту меню (таблиця 3) повинен бути не видимим (рис.1). Додамо функцію, яка буде відображати на екрані тільки той елемент HTML-сторінки, id якого передається цій функції як параметр: ... function disp(myid) { document.getElementById('r1').style.display="none"; document.getElementById('r2').style.display="none"; document.getElementById(myid).style.display="block"; } </script> Модифікуємо код кнопок так, щоб вибір користувачем певної кнопки призводив до відображення тільки відповідного розділу меню: <input type="button" value="Перший пункт меню" style="width: 200px;" onClick="disp('r1')"> <input type="button" value="Другий пункт меню" style="width: 200px;" onClick="disp('r2')"> Перевіримо функціонування меню. При виборі кнопки меню повинен відображатись тільки відповідний розділ (рис. 2). 4. Створимо скрипт для прокрутки тексту "Привіт всім!!!" у статусному рядку браузера. Для цього, після визначення функції disp запишемо наведений нижче програмний код: //визначаємо змінну pos var pos=0; //визначаємо функцію для прокрутки тексту function status() { //визначаємо текст, призначений для відображення str=" Привіт всім!!! "; //визначаємо фрагмент тексту, що буде //показаний у рядку статуса //визначення ралізується за рахунок копіювання рядка str //з символу з номером pos по символ з номером pos+17 у рядок str1 str1=str.substring (pos, pos+27); //показуємо змінну str1 у рядку статуса window.defaultStatus=str1; //збільшуємо значення змінної pos на 1 pos++ //перевіряємо значення змінної pos if (pos == 27) pos=0; //рекурсивний виклик функції status з частотою 1 раз у 0,03 сек. setTimeout("status()",30); } </script> Зазначимо, що у даному випаку коментарі призначені для кращого розуміння принципів функціонування скрипта. З цієї причини записувати їх не обов’язково. 5. Модифікуємо функцію wr (викликається внаслідок реалізації події onload) для того, щоб прокрутка починалась після завантаження HTML-сторінки у вікно браузера: function wr() { window.moveTo(0,0); window.resizeTo(w,h); status(); myopen(); } 6. Перегляд HTML-сторінки (рис. 3) повинен підтвердити прокрутку тексту у статусному рядку. 7. Створимо функцію myopen, що реалізує завантаження нового HTML-документа у нове вікна браузера. Подібні функції досить часто використовуються для показу користувачеві короткої та особливо актуальної інформації сайта. Таку інфорацію можливо показувати у вікні браузера без панелі інстурментів, рядка меню та смуг прокрутки. Для цього використаємо метод open стандартного об’єкта window. Методу open необхідно передати три параметри: ім’я файлу, який буде відображено у новому вікні, ім’я та параметрами вікна (параметри задаються одим рядком). У даному випадку параметри такі: панель інструментів, рядок меню та смуги прокрутки відсутні, ширина вікна 300, а висота 140 пікселів, лівий верхній кут вікна знаходиться нижче на 100 і лівіше на 200 пікселів від верхнього лівого кута екрана. Запишемо код функції myopen: ... function myopen() { /* Увага! Значення змінної str необхідно записати у одному рядку без переносу та пробілів. */ str="toolbar=0,menubar=0,Scrollbars=0,width=300,height=140, top=100,left=200"; window.open("info.html","newa",str); } </script>
<html> <head> <title>Увага!!! Актуальна інформація!!!</title> </head> <body> <h1 align="center">Увага!!! <br>Актуальна інформація!!!</h1> </body> </html> 8. Зазначимо, що показувати користувачеві актуальну інформацію доцільно при перегляді ним певної сторінки сайта. Тому виклик функції myopen реалізуємо у функції wr, яка, у свою чергу, викликаєтсья при завантаженні нашої HTML-сторінки (anim.html). Для цього модифікуємо код функції wr так: function wr() { window.moveTo(0,0); window.resizeTo(w,h); status(); myopen(); } 9. Під час відкриття HTML-документа anim.html повинно відкритись нове вікно браузера із завантаженим у ньому файлом info.html (див. рис. 4). Завдання для самостійної роботи
Питання для самоперевірки
З повагою ІЦ “KURSOVIKS”! |