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

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

Рубрика Программирование, компьютеры и кибернетика
Вид лабораторная работа
Язык русский
Дата добавления 25.05.2016
Размер файла 605,9 K

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

Размещено на 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


Подобные документы

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

    лабораторная работа [58,6 K], добавлен 25.05.2016

  • Сравнительная характеристика, возможности и функции языков программирования JavaScript и PHP. Основные области их использования. Разработка интерактивного Web-приложения с применением JavaScript на примере теста по теме "Программирование на языке Delphi".

    курсовая работа [19,3 K], добавлен 01.07.2014

  • Назначение и применение JavaScript, общие сведения. Понятие объектной модели применительно к JavaScript. Размещение кода на HTML-странице. URL-схема. Вставка (контейнер SCRIPT, принудительный вызов интерпретатора). Программирование свойств окна браузера.

    лекция [517,1 K], добавлен 09.03.2009

  • Исследование возможностей и областей использования языка программирования JavaScript. Сравнительный анализ языков программирования JavaScript и PHP. Разработка интерактивного Web-приложения на примере теста по теме "Программирование на языке Delphi".

    практическая работа [26,0 K], добавлен 04.02.2015

  • Создание интерактивных веб-страниц. Что такое JavaScript. Полная интеграция с браузером. Мощные средства для создания сетевых соединений. Подключение и выполнение JavaScript. Загрузка данных без перезагрузки страницы. Объекты для работы с мультимедиа.

    лекция [16,2 K], добавлен 05.02.2012

  • Javascript як мова програмування, заснована на об'єктах: і мовні засоби, і можливості середовища представляються об'єктами. Структура програм на мові Javascript. Декларація змінних та сфер їх впливу. Типи даних та їх використання. Пріоритети операцій.

    курсовая работа [51,4 K], добавлен 12.12.2010

  • Размещение кода скрипта JavaScript непосредственно на HTML-странице. Сценарий JavaScript и список основных событий. Полезные конструкции на PHP. Некоторые функции для работы с массивами. Фрагмент кода JavaScript из "Эконометрической модели России".

    презентация [331,2 K], добавлен 25.09.2013

  • Характеристика комплекса технических средств для оснащения рабочего места и программного обеспечения ЭВМ. Разработка приложения для управления автоматизированной информационной системой с помощью сценариев JavaScript, HTML и базы данных MS Access.

    дипломная работа [9,6 M], добавлен 26.11.2013

  • Області застосування JavaScript. Об'єктна модель документа. Ієрархічна структура моделі та їх взаємозв'язки з іншими об'єктами. Іменування об'єктів і точковий синтаксис. Розміщення сценаріїв у документах. Способи визначення моменту запуску сценарію.

    реферат [26,5 K], добавлен 20.08.2011

  • Характеристика возможностей редактора DreamWeaver и Front Page. Особенности языков программирования PHP и JavaScript. Основные требования, предъявляемые к Web-странице. Специфика программного обеспечения для ее создания и эффективности использования.

    курсовая работа [44,6 K], добавлен 03.02.2011

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.