Состав сооружений: решетки и песколовки: Решетки – это первое устройство в схеме очистных сооружений. Они представляют...
Типы сооружений для обработки осадков: Септиками называются сооружения, в которых одновременно происходят осветление сточной жидкости...
Топ:
Эволюция кровеносной системы позвоночных животных: Биологическая эволюция – необратимый процесс исторического развития живой природы...
Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов...
Генеалогическое древо Султанов Османской империи: Османские правители, вначале, будучи еще бейлербеями Анатолии, женились на дочерях византийских императоров...
Интересное:
Что нужно делать при лейкемии: Прежде всего, необходимо выяснить, не страдаете ли вы каким-либо душевным недугом...
Распространение рака на другие отдаленные от желудка органы: Характерных симптомов рака желудка не существует. Выраженные симптомы появляются, когда опухоль...
Подходы к решению темы фильма: Существует три основных типа исторического фильма, имеющих между собой много общего...
Дисциплины:
2017-09-30 | 1035 |
5.00
из
|
Заказать работу |
|
|
Цель: познакомиться с объектной моделью браузера, изучить объекты и их свойства, позволяющие управлять поведением браузера из 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) на абзац.
|
|
Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ - конструкции, предназначенные для поддерживания проводов на необходимой высоте над землей, водой...
Семя – орган полового размножения и расселения растений: наружи у семян имеется плотный покров – кожура...
Особенности сооружения опор в сложных условиях: Сооружение ВЛ в районах с суровыми климатическими и тяжелыми геологическими условиями...
История развития хранилищ для нефти: Первые склады нефти появились в XVII веке. Они представляли собой землянные ямы-амбара глубиной 4…5 м...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!