Лабораторная работа № 6. Объектная модель браузера (BOM)

 

Цель: познакомиться с объектной моделью браузера, изучить объекты и их свойства, позволяющие управлять поведением браузера из JavaScript.

 

Теория

С помощью объектной модели браузера (Browser Object Model) можно управлять поведением браузера из JavaScript.

Для каждого открытого окна браузер создает объект Window. Все объекты JavaScript, включая переменные и функции, хранятся в объекте window. Методы объекта: open() открывает новое окно, close() закрывает окно, alert() выводит окно оповещения.

Window включает перечисленные ниже объекты.

Объект Navigator позволяет определить, какой браузер использует пользователь. Следующий пример показывает, как с помощью свойства userAgent можно вывести на страницу информацию о браузере пользователя

document.write('Информация о браузере:'+navigator.userAgent);

 

С помощью свойства appVersion можно узнать версию браузера, свойства appName – название браузера, свойства appCodeName – кодовое название браузера, свойства platform – ОС, которую использует пользователь. Метод javaEnabled() объекта Navigator дает возможность проверить, включена ли поддержка Java в браузере пользователя или нет. Метод вернет true, если поддержка включена, и false, если нет.

Объект Screen содержит информацию об экране пользователя. Свойство width определяет ширину экрана пользователя, свойство height – высоту. С помощью свойства colorDepth можно узнать глубину цвета (измеряется в битах на пиксель).

Объект History содержит список URL, которые были посещены в данном окне браузера. С помощью свойства length можно узнать количество посещенных URL, хранящихся в списке.

Объект Location позволяет узнать информацию о URL текущего документа. Свойство href хранит URL текущего документа целиком. С помощью свойства pathnam можно узнать путь к загруженному документу. Свойство host содержит имя домена загруженного документа. Метода assign() позволяет загрузить новый документ в данное окно браузера (изменить текущий URL на желаемый).

 

Задания к лабораторной работе № 6

 

Задание 1. Создать кнопки, открывающие и закрывающие окна с произвольными именами. Создать кнопки, выводящие в каждое из окон какой-нибудь текст, включающий имя окна. Проверить работу скрипта в разных браузерах.

Задание 2. Узнать:

1) всю информацию о браузере пользователя;

2) версию браузера;

3) название браузера;

4) кодовое название браузера;

5) ОС, которую использует пользователь;

6) включена ли поддержка Java в браузере;

7) ширину и высоту экрана;

8) глубину цвета;

9) URL, которые были посещены в данном окне браузера;

10) URL текущего документа;

11) путь к загруженному документу;

12) имя домена загруженного документа.

 

Результаты вывести в таблице:

Таблица 9.

 

свойство	значение

 

Лабораторная работа № 7. Работа с формами

 

Цель: научиться создавать на веб-странице формы, изучить возможные элементы формы и их свойства, а также способы доступа к элементам формы.

Теория

 

HTML формы могут содержать такие элементы ввода как:

- текстовые поля;

- флажки;

- радио-кнопки;

- кнопки отправления и др.

Формы также могут содержать списки выбора, многострочные текстовые поля, метки и др.

Для создания формы в HTML используется тег <form>.

Элементы ввода используются для приема пользовательских данных. Они отличаются друг от друга в зависимости от значения атрибута type.

Текстовое поле <input type="text"/> определяет однострочное текстовое поле, в которое пользователь может вводить различную информацию.

Поле пароля <input type="password"/> определяет поле для ввода пароля.

Флажок <input type="checkbox"/> позволяет пользователям выбирать несколько пунктов с предварительно заполненной информацией из группы.

Радио-кнопка <input type="radio"/> позволяет выбрать только один пункт с предварительно заполненной информацией из группы.

Кнопка отправления <input type="submit"/> предназначена дл отправления на сервер введенных данных. Адрес, на который будут пересылаться данные формы, указывается в атрибуте тэга form – action. Если данный атрибут отсутствует, данные будут отправлены на текущую страницу.

Текстовая область <textarea> позволяет ввести многострочный текст.

Список <select> создает выпадающий списков, элементы которого определяются с помощью тэга <option>. С помощью атрибута multiple можно указать, что в выпадающем списке могут быть выбраны одновременно несколько элементов.

Заголовки в формах <fieldset> позволяют сгруппировать желаемую часть формы и затем с помощью тэга <legend> установить желаемое заглавие.

Пример формы:

 

 

Представленная выше форма создана следующим кодом:

<form>

<fieldset>

<legend>Данные о пользователе</legend>

Имя: <br /><input type='text' name='firstname' /><br />

Фамилия:<br /> <input type='text' name='lastname' /><br />

Отчество: <br /><input type='text' name='lastname' /><br />

<p>Укажите ваш пол:</p>

<input type='radio' name='s' value='m' /> Мужской<br />

<input type='radio' name='s' value='f' /> Женский

</fieldset>

<fieldset>

<legend> Анкета: </legend>

<p>Какую специальность Вы считаете перспективной?</p>

<input type='checkbox' name='space' value='1' />

Информационные системы и технологии<br />

<input type='checkbox' name='space' value='2' />

Программное обеспечение информационных технологий <br />

<input type='checkbox' name='space' value='3' />

ПО информационной безопасности мобильных систем <br />

<input type='checkbox' name='space' value='3' />

Дизайн электронных и веб-изданий <br />

</fieldset>

</form>

 

Доступ к элементам формы.

С помощью JavaScript можно отправить данные формы на сервер, очистить ее, а также получить доступ к любому элементу формы для изменения его значений.

Существует несколько способов обращения к формам с использованием объектной модели.

При создании формы автоматически создается массив forms. Для доступа к форме требуется указать номер элемента или имя формы, заданное параметром name.

 

<html> <body>

<form name=data>
...
</form>

<script>

alert(document.forms.length) // количество форм на странице

alert(document.forms[0].name) // имя первой формы

alert(document.forms.data.length) // количество элементов в форме с именем data

alert(document.forms["data"].length) // То же самое

</script>
</body> </html>

 

Нумерация элементов массива всегда начинается с нуля, поэтому обращение к первой форме будет document.forms[0], ко второй – document.forms[1].

Второй способ – через семейство all. Обращение к форме происходит как к элементу массива с именем, совпадающим с именем формы – document.all["data"] или напрямую – document.all.data.

 

<html> <body>

<form name=data>

...

</form>

<script>

alert(document.all["data"].length)

alert(document.all.data.name)

</script>
</body> </html>

 

Обращение к элементам формы осуществляется посредством семейства elements или напрямую по имени элемента.

 

<html><body>

<form name=data> <input type=text name=userName value="Введите ваше имя"> </form>

<script>

alert(document.forms.data.elements.length) // Общее число элементов в форме

alert(document.forms[0].elements[0].value) // Значение первого элемента

alert(document.forms["data"].userName.value) // Значение элемента с именем userName

</script>

</body></html>

 

Нумерация массива elements, как и в случае с семейством forms ведется с нуля, поэтому обращение к первому элементу формы будет elements[0]. Для большого количество данных в форме значения элементов лучше получать по их имени.

Доступ к элементам формы можно также осуществить по их ID с помощью метода document.getElementById().

 

Задания к лабораторной работе № 7

 

Задание 1. Проанализировать код для создания формы, представленный выше. Изучить правила создания элементов формы.

Задание 2. Создать форму, содержащую элементы (текстовая область, 2 текстовых поля, список, 4 радиокнопки, 5 флажков, командные кнопки). Вид формы представлен ниже.

 

 

Задание 3. Для кнопки «Напечатать» написать функцию, выводящую на страницу примерно такой текст (подчеркнутые фразы взять из элементов формы, используя обращение к ним по имени, а также по номеру элемента):

 

Факультет информационных технологий

Студент Фамилия специальность ИСиТ курс 1 должен сдавать следующие предметы:

· ОИТ

· История

· Математика

Задание 4. Создать еще одну форму с одним элементом – списком. Заполнить список предметами, выбранными на первой форме.

Можно придумать свою форму с разными элементами. Это приветствуется.

 

2.8. Лабораторная работа № 8. События. Динамические
эффекты на JS

 

Цель: научиться создавать динамические эффекты средствами JavaScript.

 

Теория

 

События – это функции, которые могут быть привязаны к элементам HTML страниц.

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

Дополнительную информацию о событиях, которые произошли, содержит объект события events, то есть в объекте events хранятся атрибуты событий. Например, атрибут screenX позволяет узнать горизонтальные координаты указателя мыши во время вызова события относительно границ экрана, атрибут screenY – вертикальные координаты, target позволяет узнать элемент, который вызвал событие, type – позволяет узнать имя события и т. д.

В любой момент времени существует не более одного объекта события. Все инициированные события заносятся операционной системой в буфер и выполняются последовательно в том порядке, в каком они туда попали.

Примеры активирующих действий JavaScript:

- щелчок мыши (событие onclick);

- нажатие клавиши (onkeypress);

- отправление формы (onsubmit);

- наведение курсора мыши на элемент (onmouseover);

- выведение курсора мыши за пределы границ элемента (onmouseout);

- полная загрузка страницы или картинки (onload);

- изменение содержимого элемента, например содержимого текстового поля формы (onchange).

Метод getElementById(значение_ID) позволяет обратиться к любому элементу по значению его идентификатора – значению атрибута ID. Если несколько элементов документа имеют одинаковый ID, метод возвращает первый элемент с указанным значением ID.

Свойство srcElement возвращает ссылку на объект элемента HTML-документа, который инициировал событие. При получении такой ссылки можно узнать или изменить значения свойств этого объекта и применить к нему любой из его методов.

Следующий код на JS позволяет при щелчке кнопкой мыши на картинке увеличивать изображение, а затем при щелчке на увеличенном изображении его уменьшать.

<script>

var pic_sm = new Array("mcat1.jpg", "mcat2.jpg", "mcat3.jpg")

var pic_bg = new Array("cat1.jpg", "cat2.jpg", "cat3.jpg")

var pic_flag = new Array(pic_sm.length) // массив флагов

 

/* Формирование строки тегов изображений */

var xstr = ""

for (i=0; i<pic_sm.length; i++)

xstr += '<img id="img'+i+'" src="'+pic_sm[i]+'" onclick="imgchange()">'

document.write(xstr)

 

function imgchange() {

var xid=event.srcElement.id //id изображения, на котором был щелчок

var n=parseInt(xid.substr(3)) // выделяем номер элемента

if (pic_flag[n]) document.all[xid].src=pic_sm[n]

else document.all[xid].src=pic_bg[n]

pic_flag[n] =!pic_flag[n]

}

</script>

Задания к лабораторной работе № 8

 

Задание 1. Создать программу на JS, изменяющую цвет слова в тексте при наведении курсора мыши (событие Onmouseover, свойство style.color).

Задание 2. Создать программу на JS, изменяющую размер шрифта слова щелчком мыши (событие Onclick, свойство style.fontSize).

Задание 3. Создать программу на JS замены картинки на другую при щелчке мышью с помощью метода getElementById и свойства src.

Задание 4. Создать программу на JS, заменяющую текст изображением, с использованием метода getElementById и свойства innerHTML.

Задание 5. Создать эффекты увеличения размера рисунка (свойство width) при наведении на него курсора мыши и возврата к первоначальному размеру при уходе курсора с рисунка (событие onmouseout)

Задание 6. Нарисовать цветную рамку произвольного стиля вокруг любого абзаца при двойном щелчке (событие dblclick) на абзац.