Веб-программирование

Размещено на http://www.allbest.ru/

Министерство образования и науки Российской Федерации

Федеральное государственное бюджетное образовательное учреждение

высшего образования

«Владимирский государственный университет

имени Александра Григорьевича и Николая Григорьевича Столетовых»

(ВлГУ)

Кафедра «Физика и прикладная математика»

Лабораторная работа №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">

&copy; Афанасьев А.А. гр АИСс-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, управляемых событиями.

Размещено на Allbest.ru