7 Лабораторная работа № 7. Создание анимационных
эффектов на веб-страницах средствами языка сценариев
JavaScript и библиотеки jQuery
7.1 Цель работы
Закрепление теоретических знаний и приобретение практических
навыков использования элементов языка JavaScript и библиотеки jQuery для
создания визуальных эффектов на веб-страницах сайта. Помимо этого целью
является закрепление теоретических знаний и приобретение практических
навыков использования скриптовых языков при обработке данных форм
пользоваелей на сайте.
7.2 Постановка задачи
Создать веб-сайт “Интернет-магазин” для расчета стоимости
заказываемых пользователями товаров и услуг. На главной странице сайта
необходимо представить покупателям перечень товаров и услуг, с описанием
их характеристик и стоимостью.
На сайте следует, с помощью элементов языка JavaScript, осуществить
расчет стоимости выбранных пользователем товаров и услуг, применяя
стандартные операторы и функции, объекты и события, а также
пользовательские функции языка JavaScript. Также следует реализовать вывод
стоимости корзины пользователя на экран. С использованием библиотеки
jQuery на веб-страницах требуется создать визуальные эффекты, такие как
выпадающее меню, изменение цвета кнопок управления при наведении мыши.
7.3 Варианты заданий
1 Расчет стоимости строительных материалов для ремонта.
2 Расчет стоимости туристического снаряжения для путешествий.
3 Расчет стоимости заказа при покупке стационарного компьютера.
4 Расчет стоимости костюма жениха при покупке в свадебном салоне.
5 Расчет стоимости комплекта спортивной одежды и инвентаря для
занятий хоккеем при покупке в спортивном магазине.
6 Расчет стоимости заказа при покупке канцелярских товаров.
7 Расчет стоимости полной комплектации автомобиля при заказе в
автосалоне.
8 Расчет стоимости компьютерных игр при покупке в интернетмагазине..
9 Расчет стоимости заказа при покупке одежды в интернет-магазине.
10 Расчет стоимости костюма жениха при покупке в свадебном салоне.
11 Расчет стоимости наряда невесты при покупке в свадебном салоне.
12 Расчет стоимости обеда в ресторане при составлении бизнес-меню.
13 Расчет стоимости услуг стоматолога при лечении в клинике.
14 Расчет стоимости оборудования для профессиональной фотосъемки.
15 Расчет стоимости путевки в туристическом агентстве.
16 Расчет стоимости заказа мебели в салоне.
17 Расчет стоимости услуг клининговой фирмы.
18 Расчет стоимости услуги по мойке автомобилей.
19 Расчет стоимости растений, семян и инвентаря для садоводов.
20 Расчет стоимости комплекта одежды для новорожденного в детском
магазине.
21 Расчет стоимости игрушек в детском магазине.
22 Расчет стоимости букета цветов при заказе в цветочном магазине.
23 Расчет стоимости кондитерских изделий.
24 Расчет стоимости книг в книжном интернет-магазине.
25 Расчет стоимости инвентаря для спортивного клуба.
При разработке веб-сайта связать между собой 10-15 веб-страниц. В
отчете к лабораторной работе в исходном коде использовать комментарии.
7.4 Теоретические основы разработки веб-страниц
Подключение JavaScript. Интерактивное взаимодействие со страницей,
как и все современное программирование, основано прежде всею на обработке
событий. События в программировании – это реальные физические действия,
такие как перемещение мыши, нажатие клавиши, или виртуальные, которые
происходят, например, в процессе выполнения программы - открытие окна,
его активация и т.п. Сам HTML не предусматривает обработку событий, если
не считать переходы но ссылкам и отправку форм. Для этого используется
язык клиентские языки программирования.
JavaScript - это полноценный динамический язык программирования,
который применяется к HTML документу, и может обеспечить динамическую
интерактивность на веб-сайтах [15].
JavaScript добавляется на веб-страницы с помощью тэга <script>.
Далее представлен пример подключения JavaScript.
<HTML>
<TITLE>Подключение JavaScript</TITLE>
<BODY>
<SCRIPT type='text/javascript'>
document.write('Данный текст выведен на страницу с помощью
JavaScript.');
</SCRIPT>
</BODY>
</HTML>
На рисунке 7.1 представлен результат работы программы при подключении
JavaScript.
Рисунок 7.1 – Вывод текста на экран с использованием JavaScript
В приведенном примере использовались следующие теги:
- Атрибут type тэга <SCRIPT> указывает браузеру какой скриптовый
язык мы встраиваем. В случае если это JavaScript атрибут type должен иметь
значение text/javascript;
- document.write() - это команда JavaScript позволяющая выводить
произвольное содержимое на страницу;
- Разместив document.write() между тэгами <SCRIPT> и </SCRIPT> мы
сообщаем браузеру обрабатывать ее как команду JavaScript, поэтому после
загрузки страницы браузер выведет: “Данный текст выведен на страницу с
помощью JavaScript.”.
Следует обратить внимание, что если команда document.write будет
вставлена за пределами <SCRIPT> она будет обрабатываться браузером как
обычный текст.
Для удобства, чтобы JavaScript код не смешивался с HTML разметкой
можно размещать его в секции <HEAD>
<HTML>
<TITLE>Подключение JavaScript в секции HEAD </TITLE>
<HEAD>
<SCRIPT TYPE='text/javascript'>
function example(){
alert('Если Вы видите это сообщение, значит страница была полностью
загружена.'); }
</SCRIPT>
</HEAD>
<BODY ONLOAD='example()'>
</BODY>
</HTML>
На рисунке 7.2 представлен результат подключения JavaScript в секции
<HEAD>.
Рисунок 7.2 – Выполнение кода JavaScript в секции <HEAD>
JavaScript может быть размещен в секции <BODY>. Размещать
JavaScript следует в самом конце секции <BODY> (перед </BODY>), чтобы
скрипт не начал выполняться до полной загрузки документа и это не привело
к ошибкам.
Следует обратить внимание, что если на странице может быть
размещено неограниченное количество скриптов в том числе и в <BODY>, и в
<HEAD> одновременно[15].
JavaScript код необязательно должен непосредственно содержаться в
HTML документе, он также может храниться во внешнем текстовом файле с
расширением .js. Использовать внешние файлы скриптов удобно в случаях,
когда необходимо определять код, который будет работать на нескольких
страницах веб-сайта.
Внешние скрипты также как и обычные подключаются к страницам с
помощью тэга <SCRIPT> однако в этом случае содержимое тэга должно
оставаться пустым и к нему должен быть добавлен атрибут src содержащий
адрес внешнего .js файла.
Далее представлен пример подключения JavaScript через внешний файл.
<HTML>
<TITLE>Подключение JavaScript через внешний файл </TITLE>
<HEAD>
<SCRIPT type='text/javascript' src='ex.js'></SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Содержимое файла ex.js:
document.write('Данный текст выведен на страницу с помощью
JavaScript.')
На рисунке 7.3 представлен результат подключения JavaScript из
внешнего файла.
Рисунок 7.3 - Выполнение кода JavaScript из внешнего файла
JavaScript код является последовательностью JavaScript команд.
Команды исполняются браузером сверху вниз.
Следующий пример выводит два абзаца, написанных жирным и
курсивным текстом, на страницу:
<HTML>
<TITLE>Последовательное выполнение команд </TITLE>
<BODY>
<SCRIPT TYPE='text/javascript'>
document.write('<P><B>Это абзац написанный жирным
шрифтом.</B></P>');
document.write('<P><I>Это абзац написанный курсивным
шрифтом.</I></P>');
</SCRIPT>
</BODY>
</HTML>
На рисунке 7.4 показан результат последовательности выполнения
команд JavaScript.
Рисунок 7.4 – Последовательность выполнения команд JavaScript
Функции в JavaScript являются одним из наиболее важных строительных
блоков кода. Функции состоят из набора команд и обычно выполняют какую-
то одну определенную задачу (например, суммирование чисел, вычисление
корня и т.д.)[15].
Код помещенный в функцию будет выполнен только после явного
вызова этой функции.
В примере ниже функция messageWrite() будет выполнена только после
нажатия на кнопку.
Следует обратить внимание, что в этом примере используется событие
onclick.
<HTML>
<TITLE>Использование функций </TITLE>
<HEAD>
<SCRIPT TYPE='text/javascript'>
// Функция выводит текст на страницу
function messageWrite()
{
document.write('Данный текст был выведен на страницу с помощью
JavaScript!');
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE='button' VALUE='Нажми на меня' CLICK='messageWrite()'
/>
</BODY>
</HTML>
На рисунке 7.5 представлен результат выполнения функции.
Рисунок 7.5 – Результат работы программы до срабатывания функции
На рисунке 7.6 представлен результат выполнения функции при
нажатии на кнопку.
Рисунок 7.6 – Результат выполнения функции
Обработка событий. События - это функции, которые могут быть
привязаны к элементам HTML страниц.
Код событий выполнится только после того, как произойдет их
активирующее действие. Разные типы событий имеют разные активирующие
действия.
Примеры активирующих действий JavaScript:
- Щелчок мыши (событие onclick);
- Нажатие клавиши (onkeypress);
- Отправление формы (onsubmit);
- Наведение курсора мыши на элемент (onmouseover) или выведение
курсора мыши за пределы границ элемента (onmouseout);
- Полная загрузка страницы или картинки (onload);
- Изменение содержимого элемента, например содержимого текстового
поля формы (onchange).
Код события onclick будет выполнен после того, как пользователь
щелкнет на элемент, к которому привязано это событие.
<HTML>
<TITLE>Событие onclick </TITLE>
<HEAD>
<SCRIPT TYPE='text/javascript'>
function messageShow() {
document.write('Вы нажали на кнопку!');
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE='button' VALUE='Нажмите на кнопку'
ONCLICK='messageShow()'/>
</BODY>
</HTML>
На рисунке 7.7 представлен результат работы программы до
наступления события onclick.
Рисунок 7.7 – Результат работы программы до наступления события
onclick
На рисунке 7.8 представлен результат работы программы после
наступления события onclick.
Рисунок 7.8 – Результат наступления события onclick
События onmouseover и onmouseout часто используются, чтобы создать
“анимированные” кнопки.
Код события onmouseover будет выполнен, когда на элемент, к которому
привязано событие, будет наведен курсор мыши.
Код события onmouseout будет выполнен при выведении курсора мыши
за пределы элемента.
Далее приведен фрагмент кода, отвечающий за изменение цвета при
наведении курсора на кнопку.
<SCRIPT TYPE='text/javascript'>
function textChange() {
document.getElementById('mes').style.backgroundColor='green';
}
function textReturn() {
document.getElementById('mes').style.color='white';
document.getElementById('mes').style.backgroundColor='blue';
}
</SCRIPT>
</HEAD>
<BODY>
<P ID='mes' ONMOUSEOVER='textChange()'
ONMOUSEOUT='textReturn()'>Наведите на этот текст курсор мыши.</P>
</BODY>
На рисунке 7.9 представлено выполнения программы при наступлении
события onmouseout.
Рисунок 7.9 – Результат выполенния программы
На рисунке 7.10 представлено выполение программы принаведении
курсора на текст.
Рисунок 7.10 – Результат наведения курсора на текст
Далее представлен простой пример обработки формы. Обработка формы
на JavaScript уменьшает загрузку на сервер.
Форма состоится из одного поля для логина, и кнопки отправить. При
отправке формы, проверяется длина логина. Его длина должна быть больше
трёх символов.
К тегу формы следует добавить в качестве атрибута обработчик
onsubmit, события submit. Событие submit срабатывает при отправке формы.
Оператора return написан для того, чтобы запретить отправку формы, в случае
обнаружения ошибки в вводе данных. Если функция вернёт значение false, то
значение обработчика onsubmit будет “return false”, это значит, что форма не
отправиться на сервер. В противном случае, если форма вернёт true, то
значение обработчика будет «return true» и форма отправится без проблем.
СheckForm - это название функции, которая вызовется, когда сработает
событие submit. В ней записано следующее условие: если длина логина
меньше трёх символов, то возвращается false и форма не отправится, в
противном случае, если данные были введены правильно, то форма
отпрпвляется на сервер.
<HTML>
<TITLE>Обработка формы </TITLE>
<HEAD>
<SCRIPT TYPE='text/javascript'>
function checkForm(form){
// Получение значение поля формы, у которой name равен login
var login = form.login.value;
//Проверка длины логина, если меньше трёх символов то выводится
сообщение об ошибке и отменяется отправка формы.
if( login.length < 3){
alert('Длина логина должна быть больше трёх символов');
return false;
}else{
return true;
}
}</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD="GET" NAME="myform" ACTION="" ONSUBMIT =
"checkForm(this); return false;" >
<P>
<INPUT TYPE="text" NAME="login" />
</P>
<P>
<INPUT TYPE="submit" NAME="send" VALUE="Отправить" />
</P>
</FORM>
</BODY>
</HTML>
Таким вот образом можно проверить форму на языке JavaScript и
отменить её отправку в случае ошибки.
На рисунке 7.11 представлен результат выполнения программы.
Рисунок 7.11 –Результат обработки формы
Основы jQuery. jQuery - это библиотека, которая значительно упрощает
и ускоряет написание JavaScript кода.
jQuery – библиотека JavaScript, которая позволяет получать доступ к
любому элементу модели DOM, обращаться к атрибутам и содержимому, а
также манипулировать ими. Кроме этого библиотека предоставляет удобный
API для работы с технологией AJAX [16].
Подключив библиотеку jQuery вместо десятков команд на JavaScript
можно написать несколько команд. Девиз jQuery “write less, do more” (пиши
меньше, делай больше) отражает ее главное предназначение. Команды
основаны на селекторах и классах CSS [16].
Для того, чтобы начать использовать jQuery необходимо:
1 Скачать библиотеку jQuery можно с официального сайта. Существуют
две версии jQuery: для использования в готовых приложениях (production) и
для разработки (development). Версия для разработки содержит комментарии и
структурированный код. В сокращенной версии нет комментариев и код в ней
не структурирован зато она занимает меньше места и поэтому страницы с ней
будут загружаться быстрее. После того, как Вы выберите подходящую версию
нажмите на кнопку “Download ( jQuery )”.
2 Добавить ее на страницу. Для этого следующий код должен быть
добавлен на страницу в секцию <HEAD>:
<SCRIPT TYPE="text/javascript"
SRC="путь_к_скачанному_файлу/jquery.js">
</SCRIPT>
Так же можно удаленно использовать библиотеку jQuery
предоставленную компанией Google.
Для того, чтобы использовать jQuery удаленно просто добавьте на
страницу в секцию <HEAD> следующий код:
<SCRIPT
TYPE="text/javascript"
SRC="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</SCRIPT>
Код jQuery как и код JavaScript состоит из последовательно идущих
команд. Команды являются основной структурной единицей jQuery.
Стандартный синтаксис jQuery команд:
1) $(селектор).метод();
2) Знак $ сообщает, что символы идущие после него являются jQuery
кодом;
3) Селектор позволяет выбрать элемент на странице;
4) Метод задает действие, которое необходимо совершить над
выбранным элементом.
Методы в jQuery разделяются на следующие группы:
- Методы для манипулирования DOM;
- Методы для оформления элементов;
- Методы для создания AJAX запросов;
- Методы для создания эффектов;
- Методы для привязки обработчиков событий.
JQuery можно комбинировать с обычным JavaScript. Если строка
начинается с $ - это jQuery, если $ вначале строки отсутствует - это строка
JavaScript кода.
Некоторые JavaScript библиотеки тоже используют $ для обозначения
своего кода. Для того, чтобы избежать конфликта имен между ними в jQuery
предусмотрена команда noConflict(). С помощью команды noConflict() Вы
можете заменить знак $ на любой другой.
//Изменяется стандартный символ $ на nsign
var nsign=jQuery.noConflict();
//Изменяется цвет абзаца используя nsign вместо $
nsign(document).ready(function(){
nsign("p").css("color","green");
});
Ниже представлен полный код программы.
<HTML>
<TITLE> Изменение цвета jQuery </TITLE>
<HEAD>
<SCRIPT TYPE="text/javascript"
SRC="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</SCRIPT>
<SCRIPT TYPE="text/javascript">
// Изменяется стандартный символ $ на nsign
var nsign=jQuery.noConflict();
// Изменяется цвет абзаца используя nsign вместо $
nsign(document).ready(function()
{
nsign("p").css("color","green");
});
</SCRIPT>
</HEAD>
<BODY>
<P>Это первый абзац на странице.</P>
</BODY>
</HTML>
На рисунке 7.12 представлен результат работы программы с заменой
символа $ и изменением цвета.
Рисунок 7.12 – Результат работы программы
С помощью метода slideToggle() имеется возможность создавать на
страницах удобные выпадающие меню.
Фрагмент кода, отвечающий за выпадающее меню:
$(document).ready(function(){
// Код обработчика click будет выполнен после одинарного щелчка мыши на
элементе.
$("#menu").click(function(){$("#list").slideToggle(2000)});
// Метод jQuery toggle() позволяет переключаться между различными
обработчиками событий по щелчку мыши.
$("#menu").toggle(function(){
// С помощью метода attr() можно узнать или изменить содержимое
указанного атрибута у выбранного элемента.
$("#img").attr("src","menudown.gif")},function(){
$("#img").attr("src","menuup.gif")
});
$("#menu").mouseover(function(){$("#menu").css("backgroundcolor","#01939a")});
$("#menu").mouseout(function(){$("#menu").css("backgroundcolor","#006064")});
});
На рисунке 7.13 представлен результат выполнения программы.
Рисунок 7.13 – Результат работы выпадающего меню
На рисунке 7.14 представлен результат работы программы при сворачивания
меню после нажатие на заголовок списка меню.
Рисунок 7.14 – Результат выполнения свертки меню
7.5 Контрольные вопросы
1)
2)
3)
4)
5)
Что такое jQuery?
Как добавить jQuery на веб-страницу?
Правила добавления jQuery на страницу.
Какие существуют события?
Привкести пример обработки событий.
7.6 Тесты
1 jQuery это...
а) Язык программирования (расширение языка JavaScript);
б) Независимый язык программирования;
в) Аналог AJAX;
г) Обычная библиотека JavaScript;
д) Язык разметки гипертекста.
2 Как правильно спрятать элемент с идентификатором “el”?
а) $("#el").hide(true);
б) $("#el").show(false);
в) $("#el").hide();
г) $("#el").display("none");
д) $("#element").hide();
3 jQuery можно расширять, добавляя новые методы. Как правильно
определить метод “debug”, чтобы он был доступен для всех объектов jQuery?
а) jQuery.function.debug = function() { /* код */ };
б) jQuery.method.debug = function() { /* код */ };
в) jQuery.md.debug = function() { /* код */ };
г) jQuery.fn.debug = function() { /* код */ }
д) jQuery.debug = function() { /* код */ }.
4 Как правильно убрать атрибут “title” у элемента img?
а) $("img").removeAttr("title");
б) $("img").removeTitle();
в) $("img").deleteTitle();
г) $("img").remove("title");
д) $("img").removeAttribute("title").
5 Какое выражение выведет сообщение с текстом "hello" после загрузки
всего документа?
а) $(document).ready(function() {alert("hello");});
б) $.document.ready() {alert("hello");};
в) $.document.ready(function() {alert("hello");});
г) $.ready(document, function() {alert("hello");});
д) $.ready(document, function() {print("hello");}).
