Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Разработка мобильных приложений для бизнеса. Учебное пособие
.pdf
Министерство образования и науки Российской Федерации
Саратовский государственный технический университет
Д.М. Верескун
РАЗРАБОТКА МОБИЛЬНЫХ ПРИЛОЖЕНИЙ
ДЛЯ БИЗНЕСА
Учебное пособие для студентов технических вузов
Электронное издание локального и сетевого распространения
Одобрено
редакционно-издательским советом
Саратовского государственного
технического университета
Саратов 2012
УДК 004.4
ББК 32.973-01
В 32
Рецензенты:
Профессор, заведующий кафедрой «Информационные системы в экономике» Саратов-
ского государственного социально-экономического университета
д.э.н. Кальянов Л.В.
Кафедра математической экономики Саратовского государственного
университета имени Н.Г. Чернышевского
(заведующий кафедрой д. физ-мат. н. Дудов С.И.)
Одобрено
редакционно-издательским советом
Саратовского государственного технического университета
Верескун Д.М.
В 32 Разработка мобильных приложений для бизнеса: учеб. пособие /
Д.М. Верескун.– Саратов: Сарат. гос. техн. ун-т, 2012, 51 с.
ISBN 978-5-7433-2515-3
Данное учебное пособие рассматривает основные принципы создания
мобильных приложений. В центре внимания находятся веб-технологии, в
частности, HTML 5. Подробно рассматриваются каскадные таблицы стилей
в редакции CSS 3. Особое внимание уделяется скриптовому языку программирования JavaScript, включая такие популярные его расширения как jQuery
и jQuery UI. Отдельно рассматривается технология клиент-серверного взаимодействия на базе асинхронного JavaScript (AJAX). В завершении
приведён пример использования фреймворка Enyo для создания насыщенных веб-приложений.
пособия
УДК 004.4
ББК 32.973-01
© Саратовский государственный
технический университет, 2012
ISBN 978-5-7433-2515-3 © Верескун Д.М., 2012
2
ОГЛАВЛЕНИЕ
1. Введение в веб-технологии .......................................................................... 4
HTML 5 ............................................................................................................. 4
Каскадные таблицы стилей ............................................................................ 6
JavaScript ........................................................................................................ 15
2. Программирование на JavaScript ............................................................ 17
Типы данных .................................................................................................. 17
Комментарии ................................................................................................. 19
Ветвление ....................................................................................................... 20
Циклы ............................................................................................................. 22
3. Расширенное программирование на JavaScript.................................... 25
Строки ............................................................................................................ 25
Методы ........................................................................................................... 25
Дополнительные функции для работы со строками .................................. 28
Даты ................................................................................................................ 29
Введение в jQuery .......................................................................................... 32
События .......................................................................................................... 34
Эффекты ......................................................................................................... 37
Элементы пользовательского интерфейса (jQuery UI) ............................. 39
4. Клиент-серверное взаимодействие .......................................................... 41
AJAX ............................................................................................................... 41
Преимущества................................................................................................ 41
Недостатки ..................................................................................................... 42
Принцип работы ............................................................................................ 42
Пpимepы AJAX .............................................................................................. 45
5. Enyo ................................................................................................................ 49
Концепция ядра
............................................................................................. 49
Пример приложения на Enyo ....................................................................... 50
3
1. ВВЕДЕНИЕ В ВЕБ-ТЕХНОЛОГИИ
HTML 5
HTML (от англ. HyperText Markup Language – «язык разметки гипер-
текста») – стандартный язык разметки документов во Всемирной паутине.
Большинство веб-страниц создаются при помощи языка HTML (или
XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.
HTML является приложением («частным случаем») SGML (стан-
дартного обобщённого языка разметки) и соответствует международному
стандарту ISO 8879. XHTML
Язык HTML был разработан британским учёным Тимом Бернерсом-
Ли в 1989-1991 гг. в стенах Европейского совета по ядерным исследованиям (CERN) в Женеве (Швейцария). HTML создавался как язык для обмена
научной и технической документацией, пригодный для использования
людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой
большого набора структурных и семантических элементов – дескрипторов.
Дескрипторы также часто называют «тегами». С помощью HTML можно
легко создать относительно простой, но красиво оформленный документ.
Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.
Изначально язык HTML был задуман и создан как средство структу-
рирования
и форматирования документов без их привязки к средствам
воспроизведения (отображения). В идеале текст с разметкой HTML должен
был без стилистических и структурных искажений воспроизводиться на
оборудовании с различной технической оснащённостью (цветной экран
современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы
голосового воспроизведения текстов).
HTML очень далеко от его изначальной задачи. Например, тег <TABLE>
предназначен для создания в документах самых обычных таблиц, но зачастую используется с целью создания разметки страницы без каких-либо
таблиц. С течением времени основная идея платформенной независимости
языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном
же является приложением XML.
Общее представление
сложности SGML путём определения не-
Однако современное применение
и графическом оформлении.
4
Браузеры
Текстовые документы, содержащие разметку на языке HTML (такие
документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его
форматированном виде. Такие приложения, называемые «браузерами»,
или «интернет-обозревателями», обычно предоставляют пользователю
удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на
иные внешние устройства) и, при необходимости
, отправки введённых
пользователем данных на сервер. Наиболее популярными на сегодняшний
день браузерами являются Microsoft Internet Explorer, Mozilla Firefox, Apple
Safari, Google Chrome и Opera.
HTML 5
Это пятая версия HTML-стандарта, которая находится на стадии разработки по состоянию на октябрь 2011 г. Основной её целью является
улучшение языка, поддержка работы с новейшими мультимедийными
приложениями, при сохранении легкости чтения кода для человека
и ясности исполнения для компьютеров и различных приспособлений (веббраузеры, синтаксические анализаторы и т.д.). HTML5 включает в себя
такие ранее разработанные технологии, как HTML 4, XHTML 1.1,
DOM2HTML.
HTML 5 считается микстурой будущего с различными введенными
спецификациями. HTML 5 – попытка определить единый язык разметки,
синтаксически корректный с точки зрения как HTML, так и XHTML.
Он включает в себя детальные модели
обработки, чтобы поддерживать
больше взаимодействующих процессов; он расширяет, улучшает и рационализирует разметку, пригодную для документов, и вводит разметку и API
для сложных веб-приложений.
В особенности HTML 5 добавляет много новых синтаксических особенностей. Например, элементы <video>, <audio>, <header> и <canvas> ,
аналогичные одноимённым в SVG. Эти особенности разработаны для того,
чтобы сделать проще внедрение и управление графическими
и мультимедийными объектами в вебе без необходимости обращаться к собственным
плагинам и API. Другие новые элементы, такие как <section>, <article>,
<header> и <nav> разработаны для того, чтобы обогащать семантическое
содержимое документа (страницы). Новые атрибуты были введены с той
же целью, хотя некоторые элементы и атрибуты были удалены. Некоторые
элементы, например, <a> <menu> и <cite> были изменены, переопределены или стандартизированы. API и DOM являются фундаментальными частями спецификации HTML 5. HTML 5 также определяет некоторые детали
для обработки недопустимых документов, поэтому синтаксические ошибки будут рассматриваться одинаково всеми приспособленными браузерами
и другими пользовательскими агентами.
5
Пример веб-страницы, написанной с использованием новых элемен-
тов HTML 5.
<!DOCTYPE html>
<html>
<head>
<title>Пример веб-страницы HTML5</title>
</head>
<body>
<header>
<h1>...</h1>
</header>
<section>
<article>
<h1>...</h1>
<p>...</p>
</article>
<article>
<h1>...</h1>
<p>...</p>
</article>
<nav>
<a href="http://...">...</a>
<a href="http://...">...</a>
</nav>
</section>
<footer>
<p>...</p>
</footer>
</body>
</html>
Каскадные таблицы стилей
Каскадные таблицы стилей (англ. Cascading Style Sheets, CSS) –
формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления
внешнего вида веб-страниц, написанных с помощью языков разметки
HTML и XHTML, но может также применяться к любым XMLдокументам, например, к SVG или XUL.
6
Цель создания CSS
CSS используется создателями веб-страниц для задания цветов,
шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое
производится с помощью HTML или других языков разметки) от описания
внешнего вида этой веб-страницы (которое
теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в
структурном содержимом. Кроме того, CSS позволяет представлять один и
тот же документ в различных стилях или методах вывода, таких как экранное
представление, печатное представление, чтение голосом (специальным
голосовым браузером или программой чтения с экрана), или при выводе
устройствами, использующими шрифт Брайля.
Способы подключения CSS к HTML-документу
Правила CSS пишутся на формальном языке CSS и располагаются в
таблицах стилей, которые могут располагаться как в самом веб-документе,
внешний вид которого они описывают, так и в
отдельных файлах, имеющих формат CSS. Формат CSS – это обычный текстовый файл. В файле .css
содержится перечень правил CSS и комментарии к ним.
В зависимости от способа подключения или внедрения CSS в доку-
мент различают внутренние и внешние таблицы стилей.
Внутренние таблицы стилей
Внутренними называются таблицы стилей, описанные непосредст-
венно в теле документа, к которому
они относятся. Использование внутренних таблиц стилей подразумевает отсутствие потребности в повторном
использовании тех же стилей в других документах.
Различают два вида внутренних таблиц стилей в зависимости от мес-
та расположения и, как следствие, области действия:
1. Расположение внутри элемента <style>, находящегося в элементе
<head>. В этом случае стиль действует на протяжении
всего документа.
<head>
.....
<style type="text/css">
body {
color: red;
}
</style>
</head>
7
2. Расположение внутри атрибута style какого-либо элемента. В этом
случае стиль действует только на содержащий его элемент.
<p style="font-size: 21px; color: blue;">Подзаголовок</p>
Внешние таблицы стилей
Внешними называются таблицы стилей, описанные в отдельном
файле с расширением .css. Каждый из таких файлов может содержать неограниченное число различных стилей. Файл, содержащий стили, может
быть использован во множестве документов, равно как и каждый из документов может использовать множество файлов стилей.
Различают два способа подключения
внешних таблиц стилей:
1. Подключение с использованием элемента <link>, находящегося в
элементе <head>.
<head>
.....
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Элемент <link> не имеет закрывающего тега и может быть использован в документе многократно.
2. Подключение посредством директивы @import, находящейся на
первой позиции в элементе <style>, находящемся в элементе <head>.
<head>
.....
<style type="text/css" media="all">
@import url(style.css);
</style>
</head>
Директива @import может использовать в документе многократно.
Главное условие: все внутренние стили, описываемые в элементе <style>,
должны быть заданы строго после всех директив.
Иерархия элементов внутри документа
Как известно, HTML-документы строятся на основе иерархии элементов, которая может быть наглядно представлена в древовидной форме.
Элементы HTML друг для друга могут быть родительскими (parent), до
черними (child), элементами-предками (ancestor), элементами-потомками
(descendant), одноуровневыми (sibling).
Элемент является родителем другого элемента, если в иерархической
структуре документа он находится непосредственно над этим элементом.
Элемент является предком другого элемента, если в иерархической структуре документа он находится выше этого элемента.
Пускай, например, в документе присутствуют два абзаца <p>, включающие в себя шрифт
с полужирным начертанием <b>. Тогда элементы
<b> будут дочерними элементами своих родительских элементов <p>, и
8
потомками своих предков <body>. В свою очередь, для элементов <p>
элемент <body> будет являться только родителем. И кроме того, эти два
элемента <p> будут являться одноуровневыми элементами, как имеющими
одного и того же родителя – <body>.
<body>
<p>
<b>.....</b>
</p>
<p>
<b>.....</b>
</p>
</body>
Синтаксис CSS позволяет задавать стиль не только одиночных элементов, но и элементов, являющихся потомками, дочерними или одноуровневыми элементами других элементов (см. подраздел «виды селекторов» ниже).
Построение правила CSS
Во всех случаях подключения таблицы к документу, за исключением
внутриэлементного описания (внутренние таблицы, п.2), каждое правило
CSS имеет две основные части – селектор
и блок объявлений. Селектор,
расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой
части правила. Он помещается в фигурные скобки и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое
объявление представляет собой сочетание свойства CSS и значения,
разделённых знаком «:». Селекторы могут группироваться в одной строке через
запятую. В таком случае свойство применяется к каждому из них.
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
При внутриэлементном подключении правило CSS представляет собой перечень объявлений («свойство CSS : значение»), разделённых знаком «;».
<p style="font-size: 21px; color: blue;">Подзаголовок</p>
Виды селекторов
Селекторы правила CSS могут быть
1. селекторами элементов;
p {font-family: Garamond, serif;}
2. селекторами классов;
.note {color: red; background: yellow; font-weight: bold;}
9
3. селекторами идентификаторов;
#paragraph1 {margin: 0;}
4. селекторами атрибутов;
a[href="http://www.sstu.ru"]{font-weight:bold;}
5. селекторами потомков (контекстными селекторами);
div#paragraph1 p.note {color: red;}
6. селекторами дочерних элементов;
p.note > b {color: green;}
7. селекторами одноуровневых элементов;
h1 + p {font-size: 24pt;}
8. селекторами псевдоклассов;
a:active {color:yellow;}
9. селекторами псевдоэлементов.
p:first-letter {font-size: 32pc;}
10. Также в CSS существует так называемый универсальный селек-
тор *, обозначающий любой элемент, встречающийся в документе.
* {color:red;}
Перед любым селектором, задающим класс или идентификатор,
можно поставить знак универсального селектора, в результате получится
эквивалентное выражение. Например, следующие два селектора полностью эквивалентны.
.first {...}
*.first {...}
Классы элементов. Идентификаторы элементов
Класс или идентификатор может быть присвоен какому-нибудь элементу HTML посредством атрибутов class или id этого элемента:
<div id="first"> ... </div>
<p class="big"> ... </p>
Основное отличие между классами элементов и идентификаторами
элементов в том, что в документе какой-нибудь класс может быть присвоен сразу нескольким элементам, а идентификатор - только одному. Также
отличие в том, что могут существовать множественные классы (когда
класс элемента состоит из нескольких слов, разделённых пробелами). Для
идентификаторов такое невозможно.
Важно
отметить следующее отличие идентификатора от класса:
идентификаторы широко используются в JavaScript для нахождения уникального элемента в документе.
Имена классов и идентификаторов, в отличие от названий тегов и их
атрибутов, чувствительны к регистру ввода букв.
Свойства классов и идентификаторов задаются с помощью соответ-
ствующих селекторов. Причём может быть задано как свойство класса
в це-
лом (в таком случае селектор начинается с «.»), или свойство идентифика-
10
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]