- •Работа с библиотекой jQuery. Создание объектов в javascript методические указания
- •09.03.01 «Информатика и вычислительная техника»,
- •1. Лабораторная работа № 5.
- •1.1. Общие методические указания по выполнению
- •1.2. Теоретические сведения
- •1.3. Задания на лабораторную работу № 5
- •2. Лабораторная работа № 6.
- •2.1. Общие методические указания по выполнению
- •2.2. Теоретические сведения
- •2.3. Задания на лабораторную работу № 6
- •3. Лабораторная работа № 7.
- •3.1. Общие методические указания по выполнению
- •3.2. Теоретические сведения
- •3.3. Задания на лабораторную работу № 7
- •4. Лабораторная работа № 8.
- •4.1. Общие методические указания по выполнению
- •4.2. Теоретические сведения
- •4.3. Задание на лабораторную работу № 8
- •5. Лабораторная работа № 9.
- •5.1. Общие методические указания по выполнению
- •5.2. Теоретические сведения
- •5.3. Задание на лабораторную работу № 9
- •09.03.01 «Информатика и вычислительная техника»,
- •394026 Воронеж, Московский просп., 14
3.3. Задания на лабораторную работу № 7
Задание № 1. Модифицировать HTML-код, хранящийся в документе z1.html, добавив следующие встроенные события:
– при загрузке веб-страницы должно быть видимо только поле со списком;
– при выборе элемента в списке должен появляться блок «Данные для расчета», причем в нем видны должны быть только те поля, в которые требуется ввести данные (в случае расчета скорости должны быть видны поля «Время» и «Расстояние», в случае расчета времени – «Скорость» и «Расстояние», в случае расчета расстояния – «Время» и «Скорость») и кнопка «Рассчитать»;
– при щелчке по кнопке «Рассчитать» должен появляться блок «Результат» с рассчитанным значением, рядом с которым должна находиться правильная подпись (в случае расчета времени вместо слова «Результат» должно быть «Время, ч» и т.д.), а также должна появляться на экране кнопка «Сброс».
Задание 2. Модифицировать HTML-код, хранящийся в документе z2.html, добавив следующие встроенные события:
– при загрузке веб-страницы поля с ID “warning” и “partner_data” были скрытыми, а все переключатели (радиокнопки) – выключенными;
– при загрузке страницы курсор ставился в поле для ввода ФИО;
– при щелчках мышью по переключателю «Женат/замужем» показывалось или скрывалось поле «ФИО супруга (супруги)»;
– при нажатии кнопки ОК происходила проверка, что все нужные данные введены; поля где отсутствуют данные выделить каким-либо цветом; в случае успешной отправки данных вывести сообщение «Данные приняты!».
4. Лабораторная работа № 8.
ИСПОЛЬЗОВАНИЕ AJAX И ПЛАГИНОВ В JAVASCRIPT
4.1. Общие методические указания по выполнению
лабораторной работы
Цели работы:
– освоить методы JavaScript для реализации технологии AJAX;
– ознакомиться с принципами подключения пользовательских библиотек JavaScript к веб-странице.
Среда выполнения и отладки:
Текстовый редактор Notepad++, веб-браузер (Firebox, Internet Explorer, Opera или др.).
4.2. Теоретические сведения
Ajax позволяет веб-странице запрашивать веб-сервер и получать ответ, после чего обновляться без необходимости загружать новую страницу.
Термин Ajax появился в 2005 г. с целью охарактеризовать сущность новых сайтов, разработанных Google: Google Maps, Gmail и Google Suggest. Слово сложилось из нескольких: Asynchronous JavaScript и XML (асинхронные JavaScript и XML). Ajax является не официальной технологией типа HTML, JavaScript или CSS. од этим термином следует понимать сочетание ряда технологий – JavaScript, браузера и веб-сервера – для получения и представления обновленной информации без загрузки новой страницы.
Технология Ajax помогает реализовать следующие вещи:
– показ нового HTML-содержимого без перезагрузки страницы;
– отсылка формы и немедленный показ результата;
– регистрация без необходимости покидать страницу;
– назначение рейтинга (например, на сайте с каталогом музыкальных альбомов или кинофильмов);
– обзор информации базы данных.
Использование функции load()
Простейшей из функций Ajax, предлагаемых jQuery, является load(). Она загружает HTML-файл в указанный элемент на странице (например, страницу с новостями в блок для новостей и т.д.).
Чтобы применить функцию load(), сначала следует воспользоваться селектором jQuery для идентификации элемента на странице, где должен быть размещен запрашиваемый HTML; затем необходимо вызвать функцию load() и передать URL страницы, которую нужно получить. Например, есть тег <div> с ID headlines и требуется загрузить HTML из файла todays_news.html в данный тег. Сделать это можно следующим образом:
$('#headlines').load ('todays_news.html');
В процессе выполнения кода браузер запрашивает todays_news.html у веб-сервера. После его загрузки браузер заменяет текущее содержимое тега <div> с ID headlines данными из нового файла.
HTML-файл может представлять собой полную веб-страницу (включая теги <html>, <head> и <body>) или только ее фрагмент, например, запрашиваемый файл может иметь всего лишь тег <p> и абзац текста. В этом случае этот фрагмент HTML и вставляется на текущую (полную) страницу.
Кроме того, функция load() позволяет определять, какую часть загруженного HTML-файла добавлять на страницу. Например, запрашиваемая страница является обычной страницей с сайта: она включает такие привычные элементы, как баннер, панель навигации и нижний колонтитул. Допустим, пользователя интересует лишь часть содержимого этой страницы, хранящаяся в отдельно взятом теге <div> с ID news. Для этого можно использовать следующий код:
$('#headlines').load('todays_news.html #news');
В данном случае браузер загружает страницу todays_news. html, но не вставляет все ее содержимое в тег headlines, а извлекает только тег <div> (и все, что там есть) с ID news.
Создание галереи с использованием плагина JQuery lightbox 2
jQuery lightBox очень проста в использовании. Просто нужно добавить на веб-страницу ссылки на изображения, которые требуется отобразить, прикрепить к странице файлы .css и .js и добавить строку кода, которая вызывает lightBox и приводит ее в действие.
Файлы плагина находятся в каталоге lightbox.
Для активации плагина на сайте требуется выполнить следующие действия.
1. Подключить файл со сценарием JavaScript - lightbox-2.6.min.js. Он находится в подкаталоге js каталога lightbox. Также не следует забывать о том, что нужно подключить файл с последней версией библиотеки jQuery.
2. Добавить CSS-файл для корректного отображения галереи. Файл называется lightbox.css и находится в подкаталоге css каталога lightbox. Подключить этот файл следует как обычный файл с таблицами стилей.
3. Скопировать в свой каталог изображений файлы close.png, loading,gif, next.png и prev.png. Они находятся в подкаталоге img каталога lightbox и используются для отображения управляющих кнопок галереи. По умолчанию они настроены на нахождение в подкаталоге img сайта. Если на создаваемом сайте они находятся в другом каталоге, то следует скорректировать соответствующим образом содержимое файла lightbox.css.
4. Добавить атрибут data-lightbox для ссылки на каждое изображение, размещаемое в галерее. Для значения атрибута можно использовать какое-либо уникальное имя (image-1, например):
<a href="img/image-1.jpg" data-lightbox="image-1" title="My caption">image #1</a>
5. Если на странице присутствует два или более изображения, которые нужно объединить в одну галерею, то следует указать для них одинаковое значение атрибута data-lightbox:
<a href="img/image-2.jpg" data-lightbox="roadtrip">image #2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">image #3</a>
<a href="img/image-4.jpg" data-lightbox="roadtrip">image #4</a>
Создание складывающихся панелей с использованием плагина accordion
Обилие информации может смутить посетителя, создавая впечатление переполненности страницы. JavaScript предлагает много способов представить большое количество сведений в малом пространстве. Одним из них является эффект «аккордеона». Он позволяет помещать данные в отдельных панелях, только одна из которых видима в определенный момент времени. Когда посетитель нажимает на раздел над скрытой панелью, текущая панель исчезает, а скрытая – появляется.
Плагин jQuery Accordion предоставляет удобный и легкий способ добавить эффект «аккордеона» на сайт.
Благодаря программным возможностям плагина создание «аккордеона», состоит из четырех шагов.
1. Присоединение плагина Accordion и несколько других файлов JavaScript к странице.
Кроме библиотеки jQuery, для работы плагина нужен дополнительный файл: ui.accordion.js.
Присоединение этого файла осуществляется подобно присоединению дpyгиx внeшниx фaйлoв JavaScript:
<script type="text/javascript" src="js/ui.accordion.js">
</script>
Также следует присоединить к веб-странице файл accordion.css для настройки стиля складывающихся панелей.
2. Создание HTML-тега в качестве контейнера для элементов «аккордеона».
В HTML-теге будут храниться лишь разделы и панели «аккордеона». Чтобы сделать это, можно добавить HTML «аккордеона» в тег <div> с ID:
<div id="accordion">
<!-- HTML "аккордеона" разместится здесь -->
</div>
Можно добавить несколько «аккордеонов» на страницу. При этом следует обеспечить уникальный ID для каждого составного элемента «аккордеона».
3. Структура HTML для «аккордеона».
Плагин Accordion предполагает особое структурирование HTML. Должен быть один тег, действующий как триггер (вкладка, раздел), открывающий панель «аккордеона». Тогда элемент, следующий за этой вкладкой, действует как панель.
Один из простых способов сделать это – использовать тег заголовка в качестве триггера, за которым следуют теги <div>, соответствующие элементу «аккордеона». Например:
<div id="accordion">
<h2>Вкладка "аккордеона"</h2>
<div>Содержимое для панели "аккордеона" 1
помещается сюда</div>
<h2>Вкладка "аккордеона" 2</h2>
<div>Содержимое для панели "аккордеона" 2
помещается сюда</div>
</div>
Здесь теги <h2> являются вкладками, тогда как каждый тег <div> это панель «аккордеона». Внутрь каждой панели можно добавить свое содержимое (текст, иллюстрации, таблицы и прочее).
4. Применение функции accordion() к элементу контейнера и идентификация элементов раздела.
Для создания эффекта «аккордеона» необходимо с помощью jQuery выбрать контейнер и применить к нему функцию «аккордеона». Кроме того, необходимо сообщить функции «аккордеона», какой элемент действует как вкладка. Например, если тег <h2> используется как вкладка (элемент, щелчок на котором показывает панель «аккордеона»), код JavaScript должен выглядеть так:
<script>
$( "#accordion" ).accordion({ heightStyle: "content"});
$( "#accordion" ).accordion({ collapsible: true });
$( "#accordion" ).accordion({ header: "h2"});
</script>
Здесь тег <div> с ID accordion является контейнером, к нему применена функция accordion(). Она принимает литерал объекта JavaScript как аргумент, содержащий любые настройки, которые требуется задать для «аккордеона».
В данном случае используются три настройки:
– header, требующая строку, которая соответствует элементу, используемому как раздел. В данном случае это элемент <h2>.
– heightStyle, задающая высоту панели аккордеона. В данном случае указано значение content, указывающее, что высота панели должна соответствовать ее содержимому.
– collapsible, указывающее положение панелей аккордеона при загрузке страницы. В данном случае указано значение true, что делает все панели при загрузки страницы закрытыми.