Веб-программирование
Работа из раздела: «
Программирование, компьютеры и кибернетика»
/
Министерство образования и науки Российской Федерации
Федеральное государственное бюджетное образовательное учреждение
высшего образования
«Владимирский государственный университет
имени Александра Григорьевича и Николая Григорьевича Столетовых»
(ВлГУ)
Кафедра «Физика и прикладная математика»
Лабораторная работа №5
по дисциплине «Веб-программирование»
Выполнил:
ст. гр. АИСс-113
Афанасьев А.А.
Принял: Самойленко А.А.
Владимир 2016
Цель работы: освоение принципов написания клиентских сценариев JavaScript, управляемых событиями.
Теоретические сведения. Как отмечалось выше, язык сценариев JavaScript предназначен для написания приложений, работающих на стороне веб-клиента. Поэтому основой объектной системы являются объекты, представляющие свойства клиента и отображаемой его средствами гипертекстовой информации. Иерархия основных объектов показана на рис.
клиентский сценарий javascript ссылка
Необходимость в обработке событий возникает в основном при каких-либо действиях пользователя с элементами форм, то есть с объектами, хранящимися в массиве embeds[]. Но события могут быть связаны и с другими объектами. Например, при загрузке страницы возникает событие onLoad, при перемещении указателя мыши - события onMouseOver, onMouseOut и т.д. JavaScript на стороне клиента поддерживает несколько типов событий. В табл перечислены обработчики событий и объекты на стороне клиента, поддерживающие эти обработчики. Генерация некоторых событий, например двойного щелчка onDblClick, не на всех платформах происходит корректно.
|
Обработчик событий
|
Поддерживающие объекты
|
|
|
onAbort
|
Image (JavaScript 1.1)
|
|
|
onBlur, onFocus
|
Текстовые элементы; Window и все остальные элементы формы (JavaScript 1.1)
|
|
|
onChange
|
Select, элементы ввода текста
|
|
|
onClick
|
Элементы-кнопки, Link; для отмены действия по умолчанию нужно возвратить false
|
|
|
onDblClick
|
Document, Link, Image, элементы-кнопки (JavaScript 1.2)
|
|
|
onError
|
Image, Window (JavaScript 1.1)
|
|
|
onKeyDown, onKeyPress, onKeyUp
|
Document, Image, Link, текстовые элементы (JavaScript 1.2); для отмены действия по умолчанию нужно возвратить false
|
|
|
onLoad, onUnload
|
Window; Image (JavaScript 1.1)
|
|
|
onMouseDown, onMouseUp
|
Document, Link, Image, элементы-кнопки (JavaScript 1.2); для отмены действия по умолчанию нужно возвратить false
|
|
|
onMouseOver, onMouseOut
|
Link; Image и Layer (JavaScript 1.2); возвратить true для предотвращения вывода URL
|
|
|
onReset, onSubmit
|
Form (JavaScript 1.1); для предотвращения сброса или передачи нужно возвратить false
|
|
|
Для связи собственной функции JavaScript с обрабатываемым событием необходимо указать ее имя в качестве значения атрибута (которым служит название события) того дескриптора, работа которого вызывает данное событие. Например обработку нажатия кнопки можно реализовать строкой <INPUT type='button' onClick='MyFunction()'>.
Задание. Перед выполнением работы изучить размещенный на учебном сервере теоретический материал, касающийся обработки событий средствами языка сценариев JavaScript.
1. В файле index.htm (см. лабораторную работу №1) сделать ссылки на лабораторные работы в виде графических кнопок, изменяющих свой вид при наведении на них указателя мыши (графические изображения кнопок создать предварительно в любом графическом редакторе).
2. На каждой из страниц, полученных ранее в рамках лабораторных работ, создать навигационный элемент в виде выпадающего списка, содержащего названия этих страниц. При выборе какого-либо из названий должен происходить автоматический переход на соответ-ствующую страницу.
Листинг
StyleMain.css
#footer{
position: fixed; /* Фиксированное положение */
left: 0; bottom: 0; /* Левый нижний угол */
padding: 10px; /* Поля вокруг текста */
background: #39b54a; /* Цвет фона */
color: #fff; /* Цвет текста */
width: 100%; /* Ширина слоя */
}
.button {
cursor:pointer;
display:block;
height:69px;
width:180px;
line-height:60px;
text-align:center;
background-image:url('1.png');
background-repeat:no-repeat;
color: white;
}
StyleNavMenu.css
nav ul ul {
display:none;
position: absolute;}
nav ul {
background: #efefef;
padding: 10px 20px;
list-style: none;
position: relative;
display: inline-table;
border-radius: 10px;}
nav ul li {
padding: 20px 20px;}
nav ul li:hover{
background: #4b545f;}
nav ul li a{
color: #121212;
text-decoration: none;
}
Main.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>
Веб программирование
</TITLE>
<link rel='stylesheet' type='text/css' href='Лабораторная работа 5/styleMain.css'>
<script>
function f(e){
e.style.backgroundImage = 'url('Лабораторная работа 5/2.png')';
}
function f2(e){
e.style.backgroundImage = 'url('Лабораторная работа 5/1.png')';
}
</script>
</HEAD>
<BODY>
<h3>
Веб программирование<br><br>
<a href='Лабораторная работа 1/main.html' class='button' onmouseover='f(this);' onmouseout='f2(this);'>работа 1</a><br>
<a href='Лабораторная работа 2/main.html' class='button' onmouseover='f(this);' onmouseout='f2(this);'>работа 2</a><br>
<a href='Лабораторная работа 3/index.html' class='button' onmouseover='f(this);' onmouseout='f2(this);'>работа 3</a><br>
<a href='Лабораторная работа 4/index.html' class='button' onmouseover='f(this);' onmouseout='f2(this);'>работа 4</a><br>
<a href='' class='button' onmouseover='f(this);' onmouseout='f2(this);'>работа 5</a><br>
<a href='' class='button' onmouseover='f(this);' onmouseout='f2(this);'>работа 6</a><br>
</h3>
<div id='footer'>
© Афанасьев А.А. гр АИСс-113
</div>
</BODY>
</HTML>
Лаб 1.httml
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>1</TITLE>
<meta charset='utf-8'>
<link rel='stylesheet' type='text/css' href='../Лабораторная работа 5/styleNavMenu.css'>
<script type='text/javascript'>
function f(e){
document.getElementById('qwe').style.display='block';
}
function f2(){
document.getElementById('qwe').style.display='none';
}
</script>
</HEAD>
<BODY>
<nav>
<ul onmouseover='f();' onmouseout='f2();'>
<li><a href=''>Полный список работ</a></li>
<ul id='qwe'>
<li><a href=''>Работа 1</a></li>
<li><a href=''>Работа 2</a></li>
<li><a href=''>Работа 3</a></li>
<li><a href=''>Работа 4</a></li>
<li><a href=''>Работа 5</a></li>
<li><a href=''>Работа 6</a></li>
</ul>
</ul>
</nav>
<a href='1.html'>Устройства Samsung будут активнее следить за здоровьем пользователя </a><br>
<a href='2.html'>Vernee Apollo стал одним из самых продвинутых смартфонов на рынке</a><br>
<a href='3.html'>Google тестирует систему оффлайнового распознавания речи</a><br>
<a href='4.html'>Смартфоны смогут идентифицировать владельца через наушники</a><br>
</BODY></HTML>
Скриншоты
Рисунок 1
Рисунок 2
Вывод
В ходе данной работы были освоены принципы написания клиентских сценариев JavaScript, управляемых событиями.
