Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Разработка мобильных приложений для бизнеса. Учебное пособие
.pdf
тора самого по себе (в таком случае селектор начинается с «#»), так и свойство какого-нибудь элемента этого класса или с этим идентификатором.
Псевдоклассы
Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя. Примером такого состояния служит текстовая ссылка, которая меняет свой
цвет
при наведении на нее курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с их помощью
можно получить разные динамические эффекты на странице.
Синтаксис применения псевдоклассов следующий:
Элемент:Псевдокласс { Описание правил стиля }
Вначале следует элемент, к которому добавляется псевдокласс, затем
указывается двоеточие, после которого идет имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов и контекстным селекторам:
a.menu:hover {color: green};
.menu a:hover {background: #fc0};
active
Происходит при активации пользователем элемента. Например, при
наведении курсора на ссылку и нажатии левой кнопки мыши.
link
Применяется к непосещённым ссылкам, т.е. ссылкам, на которые
пользователь еще не нажимал. Браузер сохраняет историю посещений некоторое время, поэтому ссылка может быть помечена как посещённая хотя
бы потому, что
Замечание
Запись a {...} и a:link {...} по своему результату равноценна, поскольку в браузере дает один и тот же эффект, поэтому псевдокласс link можно не указывать.
по ней был зафиксирован переход раньше.
focus
Применяется к элементу при получении им фокуса. Например, для
текстового поля формы получение фокуса означает, что курсор установлен
в поле, и с помощью клавиатуры можно вводить в него текст.
Замечание 1
Результат будет виден только для тех элементов, которые могут получить фокус.
В частности, это теги <a>, <input>, <select> и <textarea>.
Замечание 2
Псевдокласс focus не поддерживается браузером Internet Explorer.
hover
Псевдокласс hover активизируется, когда курсор мыши находится в
пределах элемента, но щелчка по нему не происходит.
visited
11
Данный псевдокласс применяется к посещённым ссылкам. Обычно
такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно.
Псевдоклассы link и visited могут применяться только к ссылкам, а
псевдоклассы active и hover также и к другим элементам документа. Это
расширяет набор приёмов и позволяет создавать
эффект перекатывания,
когда стиль элемента меняется при наведении на него курсора мыши.
Замечание
Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы active
и hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере можно
добавлять и к другим элементам.
Псевдоэлементы
Служат для определения положения элемента в дереве документа.
Синтаксис описания псевдоэлементов идентичен синтаксису псевдоклассов:
Элемент:Псевдоэлемент { Описание правил стиля }
first-child
Применяется к первому дочернему элементу селектора, который
расположен в дереве элементов документа.
Замечание
Браузер Internet Explorer поддерживает псевдокласс first-child начиная с версии 7.0.
Псевдокласс first-child удобнее всего использовать в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных
элементов. Например, по правилам типографики красную строку для первого абзаца текста не устанавливают, а для остальных абзацев добавляют
отступ первой строки. С этой целью применяют параметр text-indent с
нужным значением отступа. Но чтобы
изменить стиль первого абзаца и
убрать для него отступ, потребуется воспользоваться псевдоклассом first-
child:
p {text-indent: 15px;}
p:first-child {text-indent: 0px;}
Наследование. Каскадирование. Приоритеты стилей CSS
Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том,
что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Однако далеко не все свойства CSS наследуются.
Например, если для элемента параграфа p средствами CSS задана рамка, то
она не будет наследоваться ни одним
тегом, содержащимся в данном теге
p. В то же время, если для параграфа p средствами CSS задан цвет шрифта,
то это свойство будет унаследовано каждым элементом, находящимся в
параграфе.
12
Принцип каскадирования применяется в случае, когда какому-то
элементу HTML одновременно поставлено в соответствие более одного
правила CSS, т.е. когда происходит конфликт значений этих правил. Чтобы
разрешить такие конфликты, вводятся правила приоритета (от низкого к
высокому):
1. Встроенный стиль браузера.
2. Стиль, заданный пользователем браузера в его настройках.
3. Стиль, заданный непосредственно
автором страницы. И далее, уже
в этом авторском стиле приоритеты расставляются следующим образом:
4. Стили, наследуемые в документе элементом от своих предков.
5. Стили, заданные во внешних таблицах стилей, подключённых к
документу.
6. Стили, заданные непосредственно селекторами, содержащимися в
контейнерах style данного документа.
Нередки случаи, когда к какому-нибудь элементу имеют
отношение,
задают его вид несколько таких селекторов. Такие конфликты между ними
разрешаются с помощью расчёта специфичности каждого такого селектора
и применения этих селекторов к данному элементу в порядке убывания их
специфичностей. При расчёте специфичности селектора принимается во
внимание:
количество идентификаторов (#id) в селекторе – ((1,0,0) за каждый
объявленный идентификатор в селекторе правила CSS);
количество классов (.class) и псевдоклассов (:pseudoclass) в селек-
торе – ((0,1,0) за каждый объявленный класс и псевдокласс в селекторе
правила CSS );
количество тегов в селекторе – ((0,0,1) за каждый объявленный тег
в селекторе правила CSS). (Принцип расчёта таков, что, например, (1,0,0)
будет иметь большую специфичность, соответственно – больший приоритет, чем даже (0,10,0), а (0,1,0) будет иметь большую специфичность,
больший
приоритет, чем (0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.)
7. Стили, объявленные непосредственно в теге данного элемента по-
средством атрибута style этого тега.
8. И, наконец, самым высоким приоритетом обладают стили, объяв-
ленные автором страницы или
пользователем с помощью сопроводительного слова !important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных
свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и
применять эти свойства в порядке убывания этих их специфичностей.
13
Пример таблицы стилей
Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css, либо же обрамлена тегами <style> и размещена в «шапке» той самой веб-страницы, на которую она действует):
p {
font-family: Garamond, serif;
}
h2 {
font-size: 110%;
color: red;
background: white;
}
.note {
color: red;
background: yellow;
font-weight: bold;
}
p#paragraph1 {
margin: 0;
}
a:hover {
text-decoration: none !important;
}
#news p {
color: blue;
}
Здесь приведено шесть правил CSS с селекторами p, h2, .note,
p#paragraph1, a:hover и #news p.
Первое правило присвоено HTML-элементу p (абзацу) – назначен
стиль. Абзацы будут отображаться шрифтом Garamond, или, если такой
шрифт недоступен, каким-либо другим шрифтом с засечками («serif»).
Второе правило присвоено HTML-элементу h2 (заголовку второго
уровня). Заголовок второго уровня будет отображаться красным на белом
фоне с увеличенным кеглем.
Третье правило
будет применено к любому элементу, атрибут class
которого равен 'note'. Например, к параграфу:
<p class="note">Этот абзац будет выведен полужирным шрифтом
красного цвета на желтом фоне.</p>
Четвёртое правило будет применяться только к элементам p, атрибут
id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).
14
Пятое правило определяет стиль hover для элементов a – гиперссылок. По умолчанию, в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами. Сопроводительное слово !important гарантирует отсутствие подчёркивания, даже если оно будет задано в пользовательских стилях (за исключением ситуации, когда пользовательский стиль
также
снабжён !important – приоритет будет у стиля пользователя).
Последнее, шестое правило применяется для элементов p, которые
находятся внутри какого-либо элемента с атрибутом id, равным «news».
JavaScript
JavaScript – объектно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript. Обычно используется
как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
Основными архитектурными чертами являются динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была
цель сделать язык похожим на Java, но при этом лёгким для использования
непрограммистами. Языком JavaScript не владеет какая-либо компания или
организация, что отличает его от ряда языков программирования, используемых в веб-разработке.
Семантика и синтаксис
Синтаксис языка JavaScript во многом напоминает синтаксис Си и
Java, семантически же язык гораздо ближе к Self, Smalltalk или даже Лиспу.
Все идентификаторы языка являются регистрозависимыми. Имена
переменных могут состоять из букв, арабских цифр, знака подчёркивания
и символа доллара. При этом первым символом имени не может быть цифра.
Структура языка
Структурно JavaScript можно представить в
чётко различимых друг от друга частей:
виде объединения трёх
15
ядро (ECMAScript),
объектная модель браузера (Browser Object Model или BOM (de)),
объектная модель документа (Document Object Model или DOM).
Если рассматривать JavaScript в отличных от браузера окружениях,
то объектная модель браузера и объектная модель документа могут не
поддерживаться.
Ядро (ECMAScript)
ECMAScript не является браузерным языком и на самом деле в нём
не определяются методы ввода и вывода информации. Это скорее основа
для построения скриптовых языков. Спецификация ECMAScript описывает
типы данных, инструкции, ключевые и зарезервированные слова, операторы, объекты, регулярные выражения, не ограничивая авторов производных
языков в расширении их новыми составляющими.
Объектная модель браузера
Объектная модель браузера – браузероспецифичная часть языка, являющаяся прослойкой между ядром и объектной моделью документа. Основное предназначение объектной модели браузера – управление окнами
браузера и обеспечение их взаимодействия. Каждое из окон браузера представляется объектом window, центральным объектом BOM. Объектная модель браузера на данный момент не стандартизирована, однако специфи
-
кация находится в разработке WHATWG и W3C.
Помимо управления окнами в рамках объектной модели браузера,
браузерами обычно обеспечивается поддержка следующих сущностей:
управление фреймами;
поддержка задержки в исполнении кода и зацикливания с
задержкой;
системные диалоги;
управление адресом открытой страницы;
управление информацией о браузере;
управление информацией о параметрах
монитора;
ограниченное управление историей просмотра страниц;
поддержка работы с HTTP-cookie.
Объектная модель документа
Объектная модель документа – интерфейс программирования приложений для HTML и XML-документов. Согласно DOM, документу можно
поставить в соответствие дерево объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции:
получение узлов,
изменение узлов,
изменение связей между узлами,
удаление узлов.
16
2. ПРОГРАММИРОВАНИЕ НА JAVASCRIPT
Типы данных
Описание типов данных
Язык JavaScript содержит всего шесть типов данных. Это относительно небольшое количество типов позволяет, тем не менее, создавать
полноценные сценарии для выполнения многих функций.
Тип Undefined (неопределенный)
Этот тип состоит из единственного значения undefined. Это значение, которое принимает переменная, которая объявлена в
программе, но
которой еще не присвоено никакого значения.
Тип Null (нулевой)
Этот тип состоит из единственного значения null. Это значение означает нулевую, пустую или несуществующую ссылку.
Тип Boolean (логический)
Этот тип состоит ровно из двух логических значений: true (истина) и
false (ложь).
Тип String (строковый)
Этот тип состоит из всех возможных текстовых строк. Каждая строка
представляет собой упорядоченный массив из нуля или более символов
Unicode (т. е. 16-битовых целых чисел без знака), называемых элементами
строки. Элементы строки нумеруются, начиная с нуля. Длина строки – это
количество элементов в ней; пустая строка состоит из нуля элементов.
Тип Number (числовой)
Этот тип имеет ровно
18 437 736 874 454 810 627 (т. е. 264 - 253 + 3)
значений, соответствующих 64-битовому формату плавающих чисел двойной точности IEEE 754 с тем единственным исключением, что
9 007 199 254 740 990 (т.е. 2
53
- 2) различных значений «Не число» данного
формата представляются в JavaScript одним значением NaN.
Еще два специальных значения – это положительная бесконечность
и отрицательная бесконечность, которым в JavaScript соответствуют выражения +Infinity (или просто Inifinity) и -Infinity. Отметим также, что в
данном формате различаются положительный нуль (+0 или 0) и отрица-
тельный нуль (-0).
Тип Object (объектный)
Значением этого типа являются объекты. Объект – это неупорядоченный набор свойств.
Преобразование типов
JavaScript – слаботипизированный язык. Это означает, что в декларации переменной мы не указываем ее тип и в дальнейшем можем присваивать ей значения любых типов. Исполняющая система JavaScript сама
17
выполняет автоматическое преобразование типов данных по мере необходимости. Для явного преобразования типов используются методы Boolean,
Number, Object и String.
Преобразования типов происходят по следующим правилам
(табл. 2.1-2.4):
Таблица 0.1
Преобразование к логическому типу
Исходный тип Результат
Undefined False
Null False
Boolean без изменений
Number
String false, если аргумент – пустая строка; true в остальных случаях
Object True
Исходный тип Результат
Undefined NaN
Null +0
Boolean
Number без изменений
String
false, если аргумент равен +0, -0 или NaN;
true в остальных случаях
Преобразование к числовому типу
1, если аргумент равен true;
0, если аргумент равен false
если строка содержит правильное число (возможно с пробелами перед
и/или после него), то это число;
NaN в противном случае
Таблица 0.2
Object результат преобразования значения объекта по умолчанию
Преобразование к строковому типу
Исходный тип Результат
Undefined "undefined"
Null "null"
18
Таблица 0.3
а
r
r
Boolean
Number текстовое представление числ
String без изменений
Object результат преобразования значения объекта по умолчанию
Исходный тип Результат
Undefined генерируется исключение TypeErro
Null генерируется исключение TypeErro
Boolean новый логический объект с данным значением по умолчанию
Number новый числовой объект с данным значением по умолчанию
String новый строковый объект с данным значением по умолчанию
"true", если аргумент равен true;
"false", если аргумент равен false
Преобразование к объектному типу
Таблица 0.4
Object без изменений
Примеры неявных преобразований
В выражениях, соединяющих числовые и строковые значения операцией +, JavaScript преобразует числа в строки, например:
x = "Ответ равен " + 21; // возвращает "Ответ равен 21"
y = 21 + " - вот ответ"; // возвращает "21 - вот ответ"
В остальных случаях JavaScript пытается преобразовать строку в
число, например:
a = "21" – 1; // возвращает 20
b = "21" + 1; // возвращает 211
Комментарии
Комментариями называются блоки текста, вставляемые в программный код, но никак не обрабатываемые интерпретатором. Служат для размещения в коде вспомогательной информации для разработчика.
В языке JavaScript применяются два вида комментариев:
1. Однострочный, или линейный.
Комментарий начинается комбинацией символов // и продолжается
ровно до конца текущей строки. Применяется для добавления небольших
замечаний или
для временного отключения одной строки кода.
...
// Пример однострочного комментария
...
19
2. Многострочный, блочный, или внутристрочный.
Комментарий начинается комбинацией символов /* и заканчивается
комбинацией */. При этом комментарий может содержать в себе знаки перевода строки. Применяется для вставки значительных текстовых фрагментов (подробное описание работы модуля) или для временного отключения блока кода.
...
/*
Пример многострочного комментария.
Комментарий может занимать множество строк.
*/
...
Ветвление
Оператор ветвления (условный оператор) – оператор, конструкция
языка программирования, обеспечивающая выполнение определённой команды (набора команд) только при условии истинности некоторого логического выражения, либо выполнение одной из нескольких команд (наборов команд) в зависимости от значения некоторого выражения.
Оператор ветвления применяется в случаях, когда выполнение или
невыполнение некоторого набора
или невыполнения некоторого условия. Ветвление – одна из трёх (наряду с
последовательным исполнением команд и циклом) базовых конструкций
структурного программирования.
В языке JavaScript существуют две формы условной инструкции: ус-
ловный оператор и оператор выбора (переключатель).
Условный оператор
Условный оператор if...else позволяет проверить определенное усло-
вие и, в зависимости
вательность операторов. Он имеет две формы:
if (условие) оператор_1
if (условие) оператор_1 else оператор_2
Здесь условие – это любое выражение, значение которого может
быть преобразовано к логическому типу, оператор_1 и оператор_2 – любые группы операторов JavaScript; если эти группы содержат более одного
оператора, то они должны быть заключены в фигурные скобки {}.
Первая форма оператора означает, что если значение условия истин
но, то выполняется оператор_1; если оно ложно, то управление передается
оператору, следующему за if.
от его истинности, выполнить ту или иную последо-
команд должно зависеть от выполнения
-
20
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]