Лабораторные работы / Web-технологии. Лабораторная работа 6
.pdfЛабораторная работа № 6
Объектная модель JavaScript
Цель работы: познакомиться с объектами JavaScript, представляющих объектную модель браузера (BOM) и объектную модель документа (DOM), изучить связь между тэгами HTML и свойствами каскадных таблиц стилей с одной стороны и объектами JavaScript с другой, научиться размещать элементы документа в окне с помощью специальных свойств таблиц CSS.
Задание.
1.С помощью простейшего текстового редактора подготовить шаблон для нового HTMLдокумента, сохраните документ по именем bom_name.htm.
2.В правой части окна документа поместить 4 кнопки с подписями “Window”, “Navigator”, “Location”, “Screen”.
3.Добавить в документ раздел <script> для вставки команд на JavaScript. С помощью кода на JavaScript вывести в строку состояния текст «Начало работы».
4.С помощью JavaScript поместить в документ заголовок произвольного содержания.
5.С помощью JavaScript поместить в документ информацию о последней модификации документа.
6.Подготовить обработчик сообщения кнопки “Window” – по нажатию кнопки должно появляться окно сообщения с информацией из строки состояния браузера, после закрытия окна сообщения содержимое строки состояния должно измениться.
7.Подготовить обработчик для кнопки “Navigator” - получить информацию об используемом браузере: тип, название, …. и вывести в окно браузера.
8.Подготовить обработчик для кнопки “Location” – с помощью окна приглашения ввести имя пользователя в специальную переменную, вывести в окно сообщения имя пользователя и адрес загруженного документа.
9.Подготовить обработчик для кнопки “Screen” - получить информацию о параметрах экрана, вывести её в окно подтверждения и, если будет нажата кнопка Ок, повторить вывод в окне браузера.
10.Подготовить скрипт, изменяющий текст в строке состояния: при наведении мыши на заголовок в строке состояния появляется текст: «Читай текст!», при отодвигании мыши строки состояния заменяется на тест «Продолжение работы».
11.Создайте новый html-документ dom_name.htm, в файл поместите заголовок, три абзаца произвольного содержания. В правом верхнем углу окна поместите две кнопки «Формат» и «Отмена». Выполните разметку с помощью только блоковых тэгов и CSS.
12.Добавьте скрипты, выполняющие следующие действия:
при наведении мыши на заголовок он изменяет цвет, скрипт встроить в тэг,
при наведении мыши на первый абзац он меняет шрифт, начертание, ширину, оформить в виде функции, при отодвигании мыши параметры абзаца восстанавливаются.
при нажатии на кнопку «Формат» должно выполняться форматирование второго абзаца: установка абзацного отступа 1,5 см, красной строки 2,5 см и полуторного междустрочного интервала. При нажатии на кнопку «Отмена» восстанавливаются первоначальные значения параметров абзаца.
13.Третий абзац поместите в отдельный слой. При наведении на него мыши абзац меняет положение (накладывается на предыдущий абзац), фон, цвет символов и ширину текста.
14.Вставьте таблицу 3х3 произвольного содержания, для таблицы разработайте два стиля оформления ячеек, стили примените в шахматном порядке.
15.Разработайте для каждого стиля альтернативный (инверсный) стиль. Установите применение альтернативных стилей при наведении мыши не ячейку и восстановление исходных стилей при отодвигании мыши.
16.Добавьте три рисунка, рисунки расположите в перекрывающихся слоях, укажите порядок отображения слоев.
17.Под рисунками расположите три кнопки, с кнопками свяжите обработчики:
делает невидимым рисунок в среднем слое,
делает видимым рисунок в среднем слое,
меняет местами нижний и верхний слои.
18.Результаты покажите преподавателю.
Справочный материал
Объектная модель браузера
Объект Navigator – представляет используемый браузер. С помощью этого объекта можно получить информацию об имени, версии браузера и другую дополнительную информацию.
Свойства объекта Navigator
appCodeName |
Представляет кодовое имя браузера |
appName |
Представляет официальное имя браузера |
appVersion |
Содержит информацию о версии браузера |
platform |
Хранит информацию о платформе, на которой выполняется браузер |
userAgent |
Хранит текст заголовка “user-agent” |
Пример. <html> <head>
<title>Объектная модель браузера_лаб7</title> <script type="text/javascript">
<!--
document.write("Браузер: "+navigator.appName+"<br> Версия: "+navigator.appVersion); -->
</script>
</head>
<body>
</body>
</html>
Объект Window – представляет окно браузера. Свойства объекта Window
status |
Сообщение в строке состояния |
|
|
Методы объекта Window |
|
open(URL, windowName) |
Открывает новое окно браузера |
close( ) |
Закрывает активное окно |
alert(message) |
Выводит окно предупреждения с |
|
сообщением и кнопкой ОК |
prompt(message, defaultText) |
Выводит окно приглашения с текстовым |
|
полем и кнопкой ОК |
confirm(message) |
Выводит окно подтверждения с двумя |
|
кнопками Ok и Cancel |
|
|
Примеры:
window.open(“mydoc.htm”, “Мой документ”); window.close( );
window.alert(“Сообщение”);
window.prompt(“Введите имя пользователя”, “Аноним”); window.confirm(“Вы не забыли выключить обогреватель?”);
Так как объект window представляет верхний уровень объектов, его имя при вызове методов можно опустить: alert(“Сообщение”);
Объект location
href |
Полный URL |
protocol |
Начальный элемент URL до двоеточия – |
|
название протокола |
hostname |
Хост или имя домена или IP-адрес |
pathname |
Элемент пути URL |
window.alert(location.protocol); |
|
Объект screen |
|
width |
Ширина экрана |
height |
высота экрана |
colorDepth |
глубина цвета изображения в пикселях |
availWidth |
Ширина экрана с учетом служебных |
|
элементов окна |
availHeight |
Высота экрана с учетом служебных |
|
элементов окна |
window.alert(“Глубина цвета: ”+ screen.colorDepth); |
|
Объект document |
|
alinkColor |
Цвет активной ссылки (мышь нажата, но |
|
еще не отпущена), соответствует <body |
|
alink= “color”> |
bgColor |
Цвет фона документа, соответствует <body |
|
bgcolor=”color”> |
fgColor |
Цвет текста документа, соответствует <body |
|
text=”color”> |
linkColor |
Цвет непосещенной ссылки, соответствует |
|
<body link= “color”> |
vlinkColor |
Цвет посещенной ссылки, соответствует |
|
<body vlink= “color”> |
title |
Название документа, определенное в тэге |
|
<title> |
body |
ссылка на элементы, включенные в тэг |
|
<body> |
lastModified |
Дата последнего изменения документа |
|
|
Методы объекта document |
|
write(text) |
Вывод текста в окно браузера без перевода |
|
строки |
writeln(text) |
Вывод текста в окно браузера с переводом |
|
строки |
close( ) |
Закрытие документа |
|
|
Примеры: document.write(document.title);
Коллекции объекта document
all |
Коллекция всех дескрипторов документа |
forms |
Коллекция всех форм |
images |
Коллекция всех изображений |
links |
Коллекция всех ссылок |
Обращение к первому элементу коллекции <img src=”my.gif” name=”my_image”>: |
|
document.images[0] или document.images[“my_image”] |
|
Определение количества элементов в коллекции: document.images.length |
|
События |
|
onClick |
Выполняется при нажатии на кнопку, |
|
используется в тэге input. |
onMouseOver |
Происходит, когда курсор мыши |
|
располагается над данным объектом. |
onMouseOut |
Происходит при отодвигании курсора |
|
мыши за пределы объекта. |
onLoad |
Выполняется, когда завершается загрузка |
|
окна браузера или фреймовой структуры, |
|
используется в тэгах body или frameset. |
Пример:
<body onLoad=”document.vlink=’green’; alert(‘В документе зеленые посещенные ссылки');”>
Связь между JavaScript, и тэгами HTML
<p align=”center” id=”p1” onMouseOver=”p1.innerText=’Новый текст!’”><b>Мой абзац</b></p> - вывод нового текста абзаца при наведении на него мыши.
Связь между JavaScript и CSS <head>
<style type=”text/css”>
.mystyle {color: red; font-style:”courier”}
.defstyle {color: blue; font-style: “arial”} </style>
<body>
…..
<p class="defstyle" onMouseOver="this.className='mystyle'">Абзац</p> ….
</body>
При наведении мыши на абзац изменяется стиль абзаца – свойству className присваивается другое значение.
<p style=”color:”blue”; onMouseOver="this.style.color='magenta'">
Для абзаца с внедренной таблицей стиля при наведении мыши изменяется цвет символов