Uchebno-metodicheskoe_posobie

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

федеральное государственное бюджетное образовательное учреждение высшего профессионального образования

«Омский государственный педагогический университет» Факультет математики, информатики, физики и технологии Кафедра прикладной математики и информатики

Разработка программных приложений на языке JavaScript с использованием библиотек jQuery

Учебно-методическое пособие

Омск, 2015

Редакционная коллегия:

к.п.н., доцент, доцент кафедры прикладной информатики и математики Омского государственного педагогического универси-

тета Курганова Н.А.; студентка Омского государственного педагогического уни-

верситета факультета математики информатики физики и технологии, направление: прикладная информатика, профиль: прикладная информатика в образовании и образовательных технологиях, группы ПИ-33, Землякова Е.О.

Разработка программных приложений: учебно-методиче- ское пособие / Под ред., Кургановой Н.А., Земляковой Е.О.– Омск, 2015. – 51с.

В настоящем учебно-методическом пособие представлен курс, посвященный изучению разработки программных приложений на языке JavaScript с использованием библиотек JQuery. Пособие предназначено для школьников и студентов, желающих познакомиться с азами разработки программных приложений на языке JavaScript с использованием библиотек JQuery.

© Коллектив авторов: студенты 3 курса группы ПИ-33 ОмГПУ, 2015 © Кафедра прикладной информатики и математики, 2015

Оглавление

Введение 5
Основные понятия		6
Глава 1. JQuery в Web 2.0		11
1.1	JQuery – как эволюция HTML и JavaScript.	11
1.2	Разнообразие возможностей JQuery	12
1.3	Инструментарий JQuery.	15
	1.3.1 Интерфейс пользователя UI	17
1.4	Аналоги JQuery	19
Глава 2. Разработка модуля JQuery		23
2.1	Правила создания модуля	23
2.2	Создание меню	28
2.3	Работа с текстом	31
2.4	Кнопки	38
2.5	Галерея фотографий	44
2.6	Прокрутка html-страницы методами JQuery	47
Заключение		54

Введение

В настоящее время использование интернет-сер- висов является неотъемлемой частью образовательного процесса. И чем интереснее ресурс, чем красочнее его оформление, чем больше интерактивных возможностей, тем интереснее с ним работать. Для того чтобы любой Интернет-ресурс был интересным и увлекательным в работе необходимо разработать для него удобное и интерактивное представление. И в этом могут помочь библиотеки языка JavaScript - JQuery. Разнообразие возможностей и инструментов этого языка позволят создать уникальный сайт, возможности которого будут ограничиваться лишь вашей фантазией.

5

Основные понятия

Разработка — это часть процесса, в ходе которого ученые, инженеры и специалисты создают желаемый продукт.

Библиотека — это сборник вспомогательных подпрограмм и объектов, необходимых для реализации программы, приложения, модуля.

Сайт — это совокупность электронных страниц, которые находятся в сети Интернет, объединённых целевой тематикой и оформлением.

Веб-страница — это документ, содержимое которого можно просмотреть средствами веб-браузера.

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

Модуль — это один из элементов приложения, который представляет собой файл с исходным кодом и возможностью интеграции в одну или более программных приложений.

Жизненный цикл программных приложений

(ЖЦПП) — это непрерывный процесс, который начинается с момента принятия решения о необходимости создания ПП и заканчивается в момент его полного изъятия из эксплуатации.

Приложения любого вида характеризуются жизненным циклом, состоящим из отдельных этапов:

1)маркетинг рынка программных средств, спецификация требований к программному приложению.

Требования к приложению можно разделить на 4

этапа:

•Определение концепций продукта – по окон-

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

•Сбор требований – целью этого этапа -точно определить функции продукта и способы его интеграции

всуществующие процессы.

•Анализ требований – цель –предоставить четкий список не дублируемых требований к системе, которые должны быть выделены из избыточных и частично дублирующихся сценариев и пользовательских историй, которые были получены на предыдущем этапе.

•Проектирование системы - это первый этап,

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

2)проектирование структуры программного приложения.

Проектирование включает три типа деятельности:

1. Структурирование системы. Система структу-

рируется на несколько подсистем, где под подсистемой понимается независимый программный компонент. Определяются взаимодействия подсистем.

2. Моделирование управления. Определяется модель

6

7

связей управления между частями системы.

3. Декомпозиция подсистем на модули. Каждая подсистема разбивается на модули. Определяются типы модулей и межмодульные соединения.

3)программирование (создание программного кода), тестирование, автономная и комплексная отладка программ.

Создание самого приложения, написание кода, оформление интерфейса. Проверка корректной работы программы, исправление допущенных ошибок.

4)документирование программного приложения, подготовка эксплуатационной и технологической документации.

Любое программное приложение должно соответствовать единой системе программной документации (ЕСПД) вот некоторые из них:

•ГОСТ 19.001-77. ЕСПД. Общие положения.

•ГОСТ 19.003-80. ЕСПД. Схемы алгоритмов и программ. Обозначения условные графические. — Заменен на ГОСТ 19.701-90

•ГОСТ 19.005-85. ЕСПД. Р-схемы алгоритмов

ипрограмм. Обозначения условные графические и правила выполнения.

•ГОСТ 19.103-77. ЕСПД. Обозначение программ и программных документов.

•ГОСТ 19.105-78. ЕСПД. Общие требования к программным документам.

•ГОСТ 19.202-78. ЕСПД. Спецификация. Требования к содержанию и оформлению.

•ГОСТ 19.301-79. ЕСПД. Программа и методика испытаний. Требования к содержанию и оформлению.

•ГОСТ 19.401-78. ЕСПД. Текст программы. Требования к содержанию и оформлению.

•ГОСТ 19.402-78. ЕСПД. Описание програм-

мы.

•ГОСТ 19.503-79. ЕСПД. Руководство системного программиста. Требования к содержанию и оформлению.

•ГОСТ 19.504-79. ЕСПД. Руководство программиста. Требования к содержанию и оформлению.

5)выход на рынок программных средств, распространение программного приложения.

Когда программное приложение готово к использованию оно выходит на рынок, где его можно приобрести другим пользователям.

6)эксплуатация программного приложения пользователями.

После приобретения программного приложения, его начинают активно эксплуатировать.

7)завершение эксплуатации программного приложения пользователями.

При появлении более удобного или нового программного приложения, от его постепенно отказываются по причине устаревания.

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

8

9

•Dreamweaver — Программа для создания профессиональных сайтов, лучший инструмент вебмастера. Это визуальный html-редактор с мощнейшим функционалом.

•JSDoc – генератор документации в htmlформате, предназначен для работы с языком Java Script.

•CMS(англ. Content Management System) –

информационная система или компьютерная программа для редактирования и управления данными сайта.

•Denwer – набор дистрибутивов и программная оболочка, предназначенные для создания и отладки сайтов (веб-приложений, прочего динамического содержимого интернет-страниц) на локальном ПК (без необходимости подключения к сети Интернет) под управлением ОС Windows.

•Набор библиотек для JQuery UI – вспомога-

тельные модули с открытым кодом готовым для редактирования функционала и изменения дизайна.

Нами была выбрана библиотека JQuery, исходя из того, что она является удобной для использования, также JQuery является весьма популярной и часто употребляемой библиотекой при разработке Web-ресурса.

Глава 1. JQuery в Web 2.0

1.1JQuery – как эволюция HTML и JavaScript

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

На первый взгляд кажется, что сложно выбрать, с чего начать, потому что библиотека jQuery реализует весьма широкие функциональные возможности. Тем не менее она имеет согласованную и симметричную архитектуру; большая часть концепций заимствована из

HTML и каскадных таблиц стилей (Cascading Style Sheets, CSS). Архитектуру библиотеки быстро осваивается дизайнерами даже с малым опытом программирования, поскольку многие веб-разработчики, как правило имеют больший опыт работы с указанными технологиями, чем с

JavaScript.

Но почему же мы пользуемся jQuery, почему мы не используем JavaScript в чистом виде? Ответ прост, с jQuery намного удобней, зачем усложнять себе жизнь огромным количеством строк кода, когда с помощью

10

11

jQuery можно обойтись всего одной строкой. Зачем забивать себе голову написанием кода под каждый браузер, если с помощью jQuery можно написать программный код сразу под все браузеры разом(кроссбраузерность). И это всего малая часть причин использования jQuery. JQuery – это “Швейцарский нож” веб-программирования, имеющий огромную перечень возможностей, облегчающую процесс программирования на JavaScript + Html и не требующий огромного опыта в программирование, это высшая ступень развития JavaScript и HTML.

1.2 Разнообразие возможностей JQuery

Можно бесконечно говорить о преимуществах JQuery, но что же все-таки можно создать с помощью этой библиотеки? Прежде всего стоит рассказать о теоретических возможностях этой библиотеки. Итак, библиотека jQuery помогает легко получать доступ к любому элементу DOM (не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов), обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобныйAPI для работы сAJAX.

С помощью этого можно создать впечатляющие вещи, например:

Рис. 1 Полноразмерное слайдшоу

Рис. 2 Стена из картинок

12

13

Рис. 3 Слайдер с движущимися картинками

Рис. 4 Анимированные диалоговые окна

Рис. 5 Меню с появляющийся картинкой

1.3 Инструментарий JQuery.

Инструментарий JQuery подразделяется на несколько категорий:

1.Идентификация браузера и его возможно-

стей

a.jQuery.support набор свойств, которые представляют собой наличие различных функций браузера или ошибок. Предназначен для jQuery внутреннего использования; специфические свойства могут быть удалены, когда они больше не нужны внутренне, чтобы улучшить производительность при запуске страницы.

b.jQuery.browser (не рекомендуется к использованию начиная с jQuery.support)

14

15

c.jQuery.browser.version(не рекомендует-

ся к использованию начиная с jQuery.support)

d.jQuery.boxModel Позволяет определить использует ли текущая модель стандарт W3C

2.Операции с массивами и объектами

a.jQuery.each Общая функция для построения циклов, которую можно использовать для итераций над объектами и массивами. Массивы и мас- сиво-подобные объекты, обладающие свойством длины, обрабатываются по индексу, от 0 до length-1. Остальные объекты — по именованным свойствам.

b.jQuery.extend Расширяет объект другими объектами и возвращает модифицированный объект. Если не указан аргумент target, то расширяется само пространство имен jQuery. Это может быть полезно для авторов дополнений, желающих добавить новый метод в jQuery. Помните, целевой объект будет модифицирован

ивозвращен от функции extend(). Если в качестве первого аргумента указано true, то JQuery сделает «глубокое» копирование, рекурсивно копируя абсолютно все объекты, которые сможет найти. Иначе, копия будет разделять свою структуру с оригинальными объектами(ом).

c.jQuery.grep Отыскивает элементы удовлетворяющие заданному фильтру. Исходный массив не изменяется.

d.jQuery.makeArray Превращает все в

массив.

e. jQuery.map Переводит все элементы массива в другой массив элементов.

f.jQuery.inArray Определяет индекс первого параметра в массиве (если возвращается -1, то значение не найдено).

g.jQuery.merge Объединяет два массива.

h.jQuery.unique Удаляет дубликаты из массива элементов. Обратите внимание, этот метод работает только с массивами элементов DOM.

3.Операции тестирования

a.jQuery.isArray Определяет, является-ли переданный объект массивом.

b.jQuery.isFunction Определяет, является-

ли переданный объект функцией Javascript.

4.Операции со строками

a.jQuery.trim Удаляет пустые места с начала и конца строки. Для удаления пустого места используется регулярное выражение.

5.Работа с ссылками

a.jQuery.param Упорядочивает набор элементов формы или объект

1.3.1Интерфейс пользователя UI

JQuery UI, что означает User Interface («Пользо-

вательские интерфейсы») — это библиотека на основе jQuery, реализующая более 20 плагинов, среди которых плагины организующие различное поведение (например перетаскивание или растягивание элементов), восемь видов виджетов (такие как календарь, диалоговые окна, систему вкладок и.т.д) и анимационные эффекты. Кроме этого, UI обладает несколькими темами оформления, с

16

17

помощью которых оформляются виджеты и которые содержат набор полезных иконок (173 штуки).

Подключение jQuery UI

Для того, чтобы воспользоваться возможностями плагинов jQuery UI их необходимо вначале подключить к странице, на которой они будут использоваться. Существуют два варианта подключения jQuery UI:

•Локальное подключение. Данный способ требует скачивание специального файла с официального сайта;

Стандартная комплектация jQuery UI включает в себя все существующие плагины и имеет стандартную тему оформления. Для того, чтобы скачать стандартную комплектацию просто перейдите на сайт jQuery UI

инажмите кнопку Download. Теперь (вне зависимости скачали ли Вы стандартную комплектацию или собрали свою собственную) необходимо подключить jQuery UI к скрипту. Для этого необходимо распаковать скаченный файл и указать пути к файлам jquery-ui-версия.custom.css

иjquery-ui-версия.custom.min.js в секции head скрипта.

•Удаленное подключение. Данный способ не требует скачивание файла, а вместо этого использует его удаленно (данная услуга предоставляется компанией

Google).

В этом варианте подключения Вы не можете настраивать комплектацию jQuery UI и можете использовать только ее стандартную версию.

Работа с плагинами

Все плагины поведения и виджетов обладают схожим принципом работы. Каждый плагин jQuery UI представлен одним основным методом, который вызывается на выбранных элементах. Его имя всегда совпадает с именем плагина. С помощью этого метода можно инстанцировать (устанавливать) плагин на элементы, узнавать и изменять свойства плагина, устанавливать обработчики событий, а так же, запускать функции плагина, которые обычно называют методами (хотя они не являются методами в обычном смысле этого понятия).

Оформление

Все плагины jQuery UI спроектированы так, чтобы UI-виджеты можно было подстраивать под особенности оформления и работы большинства сайтов. Оформление каждого виджета описано с помощью CSS и содержит два уровня правил оформления: базовые стили CSSфреймворка и специфические стили, описывающие правила выбранной темы оформления

Для всех компонентов интерфейса jQuery UI используется единая тема оформления, которая может быть выбрана из нескольких существующих, либо легко создана разработчиком с помощью ThemeRoller на сайте jQuery UI.

1.4 Аналоги JQuery

18

19