Федеральное агентство по образованию
Национальный Исследовательский Университет«БелГУ»
Факультет компьютерных наук и телекоммуникаций
Кафедра прикладной информатики
Отчет по лабораторной работе №8
Дисциплина: «Web-программирование»
Тема: «Объекты браузера»
Вариант №13
Выполнила: студентка группы 141003
Матвеева М.А..
Проверили:
Великая Я.Г.
Сунцова А.И.
URL для запуска сайта на выполнение:
Белгород 2011
Теоретическая часть
Объекты браузера в отличие от объектов ядра JavaScript не разобщены, а образуют иерархию. Корневым объектом является объект window, представляющий главное окно браузера и позволяющий создавать дополнительные окна. Объект document представляет загруженный в окно HTML – документ. Объект location управляет загрузкой HTML – документов и перемещением по ним. Объект history хранит список ранее загруженных в данное окно страниц и позволяет загружать их повторно.
Объект window имеет следующие свойства: frames (Содержит список фреймов, открытых в окне), name (Задает имя окна), opener (Ссылка на окно, из которого был сделан переход в текущее окно), parent (Ссылка на родительское окно), self (Ссылка на себя) и т. д. Объект window имеет следующие методы: alert() - создает окно сообщения с некоторым текстом, передаваемым в качестве параметра; open() - открывает новое окно;
close() - закрывает окно; confirm() - выводит окно выбора; prompt() - создает окно ввода строки; focus() - делает окно активным и т. д.
Хотя в языке HTML есть собственные средства определения содержимого окна браузера: гиперссылки, их во многих случаях недостаточно. Гиперссылки являются статическими элементами страницы, они не могут реагировать на интерактивный ввод пользователя. Подобные задачи проще решаются с помощью объектов Location и History.
Объект Location имеет следующие свойства: hash (Имя анкера, указанное в адресе после #), host (То же, что и pathname+ port), href (Полный адрес), pathname (Путь и имя документа), port (Номер порта, используемого при взаимодействии сервера и браузера) и т. д. Объект Location имеет небольшое число методов: reload() - повторно загружает страницу, replace() - Загружает другую страницу
При создании собственной системы навигации на сайте часто желательно иметь кнопки перехода на следующую или предыдущую страницы в некоторой последовательности страниц. Создавать подобные кнопки проще всего с помощью объекта History. Объект History хранит ссылки на страницы, загруженные ранее в данное окно браузера. Он хранит ссылки в специальном стеке, поэтому циклические ссылки хранению не подлежат. Объект History имеет следующие методы: back() - перемещает на предыдущую страницу, forward() - перемещает на следующую страницу, go() - перемещает на несколько страниц в начало go(-n) или вперед go(+n).
Свойства объекта document определяются содержимым самого документа: шрифт, цвет фона, формы, изображения и т.д. Объект document, в зависимости от своего содержимого, может иметь объекты, являющиеся для него подчиненными или дочерними. В частности, подчиненными для объекта document являются объекты form, image,link,area и т.д. Для каждой страницы создается один объект document, некоторые его свойства соответствуют параметрам тега <BODY>: bgColor, fgColor, linkColor, alinkColor, vlinkColor.
Наиболее используемые методы объекта document – write() и writeln(), для вывода текста в тело документа
Практическая часть
Вариант 13
Создать сайт кинотеатра. Создать форму. После опроса пользователю открывается новое окно, в котором содержатся все оставленные пользователем сведения. На каждой странице должны быть ссылки на предыдущую и последующую страницы. При оформлении страниц используйте свойства и методы объектов: window, document, location, history.
Листинг страницы index:
<html>
<head>
<title>Кинотеатр МАДАГАСКАР</title>
<style>
.title
{
border:dashed;
border-color:#FFF;
text-align:right;
font-size:24px;
color:#f8cfe1;
}
a
{
color:#FFF;
text-decoration:overline;
font-weight:bold;
margin:20px;
}
a:hover
{
color:pink;
background-color:#FFF;
font-weight:bold;
}
#nav
{
border:dashed;
color:#FFF
}
</style>
<script type="text/javascript" src="Script.js"></script>
</head>
<body>
<TABLE border="1" align="center"><TR><TD style="border:dashed; border-color:#ffffff">
<table bgcolor="#62324c" border="0" align="center" width="800" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr><td width="269">
<img src="images/images1.jpg" style="border:dashed; color:#FFF">
<td valign="center" align="center" style="color:#FFF">
<DIV ID="GlowId" STYLE="width:320; height:50; font-size:32pt;
filter:Glow(Color=#CC66CC, Strength=10)">
<CENTER>WELCOME</CENTER></DIV>
<tr><td colspan="2">
<div class="title">КИНОТЕАТР
<font color="#FF0000">М</font><font color="#FFFF00">А</font><font color="#00FF00">Д</font><font color="#3366FF">А</font><font color="#FF9933">Г</font><font color="#00CC99">А</font><font color="#00FFFF">С</font><font color="#FF66FF">К</font><font color="#66FF33">А</font><font color="#00FFFF">Р</font>
<h2><A href="javascript:void(0)" onClick="WinOpen();"> Заполните анкету</a></h2>
<script language="JavaScript">
document.alinkColor="Hotpink";
document.vlinkColor="Indianred";
</script>
</div>
</tr>
<tr><td rowspan="6" valign="top" id="nav">
<br><a href="index.html">Главная</a>
<br><a href="me.html">О кинотеатре</a>
<br><a href="films.html">Фильмы</a>
<br><a href="akcii.html">Акции</a>
</tr>
<tr><td align="center" style="color:#e2a2c4"><h2>Беременный</h2><img src="images/Beremennyy.jpg" border="5">
<br>16:00, 20:00 (Зал Комфорт)
<br>20:00 (Зал VIP)
<hr></tr>
<tr><td align="center" style="color:#e2a2c4"><h2>Хочу как ты</h2><img src="images/Want.jpg" border="5">
<br>17:00, 21:00 (Зал Кинолайф)
<br>22:00 (Зал VIP)
<hr></tr>
<tr><td align="center" style="color:#e2a2c4"><h2>Коломбиана</h2><img src="images/Colombiana.jpg" border="5">
<br>14:00, 18:00 (Зал Комфорт)
<br>18:00 (Зал VIP)
<hr></tr>
<tr><td align="center" style="color:#e2a2c4"><h2>Конан 3D</h2><img src="images/Conan-the-Barbarian.jpg" border="5">
<br>19:00, 23:00 (Зал Комфорт)
<br>00:00 (Зал VIP)
<hr></tr>
</table>
</table>
</TR></TABLE>
</body>
</html>