Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Разработка мобильных приложений для бизнеса. Учебное пособие
.pdf
toTimeString Возвращает строковое представление времени (строка содержит
только время).
toDateString Возвращает строковое представление даты (строка содержит
только дату).
toLocaleTimeString Аналог toTimeString, но возвращает строковое представление
времени, отформатированное в соответствии с настройками ло-
кализации пользователя.
toLocaleDateString Аналог toDateString, но возвращает строковое представление да-
ты, отформатированное в соответствии с настройками локализа-
ции пользователя.
Дополнительные функции
getTimezoneOffset Возвращает смещение локального времени на компьютере поль-
зователя относительно времени UTC. Смещение возвращается в
минутах.
parse Функция позволяет проверить корректность даты и времени, за-
писанных в виде строки. Если строка корректна – будет создан
объект Date.
Также объект Date содержит ряд методов для работы с UTC-датами.
Эти функции полностью аналогичны уже рассмотренным, но содержат в
имени префикс «UTC» и работают только с «универсальным» временем:
getUTCSeconds, setUTCFullYear и т.д.
Рассмотрим пример работы с датами:
var tmp = new Date(now.getTime());
var arrNames = new Array('Сегодня', 'Завтра', 'Через 1 год 6 месяцев
15 дней');
var arrNormal = new Array();
var arrLocal = new Array();
var arrUTC = new Array();
// сейчас
arrLocal[0] = tmp.toLocaleString();
arrNormal[0] = tmp.toString();
arrUTC[0] = tmp.toUTCString();
// завтра
tmp.setDate(tmp.getDate() + 1);
arrLocal[1] = tmp.toLocaleString();
arrNormal[1] = tmp.toString();
arrUTC[1] = tmp.toUTCString();
// через 1 год 6 месяцев 15 дней
tmp.setFullYear(tmp.getFullYear() + 1);
tmp.setMonth(tmp.getMonth() + 6);
tmp.setDate(tmp.getDate() + 15);
31
arrLocal[2] = tmp.toLocaleString();
arrNormal[2] = tmp.toString();
arrUTC[2] = tmp.toUTCString();
// выводим результаты в таблицу
document.write('<table border="0"><tr>'
+ '<td>Дата</td>'
+ '<td>Локализованная</td>'
+ '<td>Не локализованная</td>'
+ '<td>UTC</td></tr>');
for (i = 0; i < 3; i++)
{
document.write('<tr>'
+ '<td>' + arrNames[i] + '</td>
+ '<td>' + arrLocal[i] + '</td>
+ '<td>' + arrNormal[i] + '</td>
+ '<td>' + arrUTC[i] + '</td>
+ '</tr>');
}
document.write('</table>');
Введение в jQuery
jQuery – библиотека JavaScript, фокусирующаяся на взаимодействии
JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к
любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет
удобный API по работе с AJAX.
Возможности
Движок кроссбраузерных CSS-селекторов Sizzle, выделившийся в
отдельный проект.
Переход по дереву DOM, включая поддержку XPath как плагина.
События.
Визуальные эффекты.
AJAX-дополнения.
JavaScript-плагины.
32
Философия
Точно так же, как CSS отделяет визуализацию от структуры HTML,
JQuery отделяет поведение от структуры HTML. Например, вместо прямого указания на обработчик события нажатия кнопки управление передаётся
JQuery идентифицирующей кнопки и затем преобразовывающий его в об-
работчик события клика. Такое разделение поведения и структуры также
называется принципом ненавязчивого JavaScript.
Библиотека jQuery содержит функциональность, полезную для
максимально широкого круга задач. Тем не менее, разработчиками библиотеки не ставилась задача совмещения в jQuery функций, которые подошли
бы всюду, поскольку это привело бы к большому коду, большая часть которого не востребована. Поэтому была реализована архитектура компактного универсального ядра библиотеки и плагинов. Это позволяет собрать
для ресурса
именно ту JavaScript-функциональность, которая на нём была
бы востребована.
Использование
jQuery, как правило, включается в веб-страницу как один внешний
JavaScript-файл:
<head>
<script type="text/javascript" src="путь/к/jQuery.js">
</script>
</head>
Вся работа с jQuery ведётся с помощью функции $. Если на сайте
применяются другие JavaScript библиотеки, где $ может использоваться
для своих нужд, то можно использовать её синоним – jQuery. Второй способ считается более правильным, а чтобы код не получался слишком громоздким, можно писать его следующим образом:
jQuery(function($) {
// здесь код скрипта, где в $ будет находиться объект, предостав-
ляющий доступ к функциям jQuery
})
Работу с jQuery можно разделить на 2 типа:
Получение jQuery-объекта с помощью функции $(). Например, пе-
редав в неё CSS-селектор, можно получить jQuery-объект всех элементов
HTML, попадающих под критерий и далее работать с ними с помощью
различных методов jQuery-объекта. В случае, если метод не должен возвращать какого-либо значения, он возвращает ссылку
на jQuery объект, что
позволяет вести цепочку вызовов методов согласно концепции текучего
интерфейса.
Вызов глобальных методов у объекта $, например, удобных итера-
торов по массиву.
33
Типичный пример манипуляции сразу несколькими узлами DOM
заключается в вызове $ функции со строкой селектора CSS, что возвращает объект jQuery, содержащий некоторое количество элементов
HTML-страницы. Эти элементы затем обрабатываются методами jQuery.
Например,
$("div.test").add("p.quote").addClass("blue").slideDown("slow");
находит все элементы div с классом test, а также все элементы p с
классом quote, и затем добавляет им всем класс blue и визуально плавно
спускает вниз. Здесь методы add, addClass и slideDown возвращают ссылку
на исходный объект $("div.test"), поэтому возможно вести такую цепочку.
Методы, начинающиеся с $., удобно применять для обработки глобальных объектов. Например:
$.each([1,2,3], function() {
document.write(this + 1);
});
добавит на страницу текст 234.
$.ajax и соответствующие функции позволяют использовать методы
AJAX. Например:
$.ajax({
type: "POST",
url: "some.php",
data: {name: 'John', location: 'Boston'},
success: function(msg){
alert( "Data Saved: " + msg );
}
});
В этом примере идет обращение к скрипту some.php с параметрами
name=John&location=Boston, и полученный результат выдается в сообще-
нии посредством alert().
Пример добавления к элементу обработчика события click с помощью jQuery:
jQuery(function($) {
$("a").click(function() {
alert("Hello world!");
});
});
В данном случае при нажатии на элемент <A> происходит вызов
alert("Hello world!").
События
Практически все команды jQuery, реагирующие на события, возвращают jQuery. Если результат выполнения отличается, это будет оговорено
отдельно.
34
Загрузка страницы:
ready(функция)
Добавляет функцию, выполняющуюся всякий раз, когда объектная
модель документа (DOM) готова к использованию.
Управление событиями:
bind(тип, данные, функция)
Назначает обработчик к одному или более событиям (например,
click) для каждого совпавшего элемента. Можно связывать также и пользовательские события.
one(тип, данные, данные)
Назначает обработчик одному или более событиям для каждого совпавшего элемента, который выполняется единожды.
trigger(событие, данные)
Вызывает событие для каждого элемента набора.
triggerHandler(событие, данные)
Возвращает Object. Вызывает все связанные с элементом обработчики (для указанного типа события) без выполнения действия браузера по
умолчанию, передачи события или «живых» событий.
unbind(тип, функция)
Действие этой функции противоположно функции bind: удаляет привязанные события из каждого элемента набора.
«Живые» события:
live(тип, функция)
Привязывает обработчик к событию (например, click) для всех текущих и будущих элементов набора. Может также связывать пользовательские события.
die(тип, функция)
Действие данной функции противоположно методу live – удаляет
привязанные «живые» события.
Взаимодействие:
hover(over, out)
Имитирует эффект hovering (отслеживание попадания указателя
мыши в пределы объекта).
toggle(fn, fn2, fn3, fn4, ...)
Переключается между двумя или более функциями, вызывающимися
поочередно каждым следующим нажатием ЛКМ.
События:
blur()
Вызывает событие blur для каждого элемента набора.
blur(функция)
Назначает функцию к событию blur для каждого элемента набора.
change()
Вызывает событие change для каждого элемента набора.
35
change(функция)
Назначает функцию к событию change для каждого элемента набора.
click()
Вызывает событие click для каждого элемента набора.
click(функция)
Назначает функцию к событию click для каждого элемента набора.
dblclick()
Вызывает событие dblclick для каждого элемента набора.
dblclick(функция)
Назначает функцию к событию dblclick для каждого элемента набора.
error()
Вызывает событие error для каждого элемента набора.
error(функция)
Назначает функцию к событию error для каждого элемента набора.
focus()
Вызывает событие focus для каждого элемента набора.
focus(функция)
Назначает функцию к событию focus для каждого элемента набора.
keydown()
Вызывает событие keydown для каждого элемента набора.
keydown(функция)
Назначает функцию к событию keydown для каждого элемента набора.
keypress()
Вызывает событие keypress для каждого элемента набора.
keypress(функция)
Назначает функцию к событию keypress для каждого элемента набора.
keyup()
Вызывает событие keyup для каждого элемента набора.
keyup(функция)
Назначает функцию к событию keyup для каждого элемента набора.
load(функция)
Назначает функцию к событию load для каждого элемента набора.
mousedown(функция)
Назначает функцию к событию mousedown для каждого элемента
набора.
mouseenter(функция)
Назначает функцию к событию mouseenter для каждого элемента
набора.
mouseleave(функция)
Назначает функцию к событию mouseleave для каждого элемента
набора.
mousemove(функция)
36
Назначает функцию к событию mousemove для каждого элемента
набора.
mouseout(функция)
Назначает функцию к событию mouseout для каждого элемента
набора.
mouseover(функция)
Назначает функцию к событию mouseover для каждого элемента
набора.
mouseup(функция)
Назначает функцию к событию mouseup для каждого элемента набора.
resize(функция)
Назначает функцию к событию resize для каждого элемента набора.
scroll(функция)
Назначает функцию к событию scroll для каждого элемента набора.
select()
Вызывает событие select для каждого элемента набора.
select(функция)
Назначает функцию к событию select для каждого элемента набора.
submit()
Вызывает событие submit для каждого элемента набора.
submit(функция)
Назначает функцию к событию submit для каждого элемента набора.
unload(функция)
Назначает функцию к событию unload для каждого элемента набора.
Эффекты
Базовые:
show()
Отображает каждый из совпавших элементов набора, если они были
скрыты (не имеет значения как: либо через функцию hide(), либо посредством display:none в таблице стилей).
show(скорость, вызов)
Отображает все совпавшие элементы набора с использованием анимационных эффектов, после чего опционально запускает указанную в аргументе вызов функцию.
hide()
Скрывает каждый из совпавших элементов набора, если они были
видимыми.
hide(скорость, вызов)
Скрывает все совпавшие элементы набора с использованием анимационных эффектов, после чего опционально запускает указанную в аргументе вызов функцию.
37
toggle()
Переключает режим отображения каждого из элементов набора.
toggle(переключатель)
Переключает режим отображения каждого из элементов набора в зависимости от значения переключателя (true – отображает элементы, false –
скрывает элементы).
toggle(скорость, вызов)
Переключает режим отображения всех совпавших элементов набора
с использованием анимационных эффектов, после чего опционально запускает указанную в аргументе вызов функцию.
Эффект «скольжения»:
slideDown(скорость, вызов)
Раскрывает все элементы набора, используя эффект изменения высоты элементов. Также по завершению операции возможен запуск функции,
переданной в аргумент «вызов».
slideUp(скорость, вызов)
Скрывает все элементы набора, используя эффект изменения высоты
элементов. Также по завершению операции возможен запуск функции, переданной в аргумент «вызов».
slideToggle(скорость, вызов)
Переключает видимость всех совпавших элементов набора, используя эффект изменения высоты элементов. Также по завершению операции
возможен запуск функции, переданной в аргумент «вызов».
Эффекты появления/исчезания:
fadeIn(скорость, вызов)
Делает видимыми все элементы набора, используя изменение прозрачности элементов. Также по завершению операции возможен запуск
функции, переданной в аргумент «вызов».
fadeOut(скорость, вызов)
Делает невидимыми все элементы набора, затем устанавливает CSS
свойство display в «none». Также по завершению операции возможен запуск функции, переданной в аргумент «вызов».
fadeTo(скорость, видимость, вызов)
Делает менее видимыми все элементы набора, изменяя прозрачность
элементов до величины, указанной в аргументе «видимость».
Пользовательская анимация:
animate(параметры, duration, easing, вызов)
Данная функция предназначена для создания пользовательской анимации.
animate(параметры, опции)
Данная функция предназначена для создания пользовательской анимации.
stop(clearQueue, gotoEnd)
38
Останавливает все запущенные анимационные эффекты для всех
указанных элементов.
Настройки:
jQuery.fx.off
Возвращает логическое значение. Глобально отключает все анимационные эффекты.
Элементы пользовательского интерфейса (jQuery UI)
jQuery UI – библиотека JavaScript с открытым исходным кодом для
создания насыщенного пользовательского интерфейса в веб-приложениях,
часть проекта jQuery. Построена поверх главной библиотеки jQuery и предоставляет разработчику упрощенный доступ к её функциям взаимодействия, анимации и эффектам, а также набор виджетов.
Возможности
Взаимодействия
Draggable – предоставляет элементу возможность быть переме-
щенным
с помощью мыши.
Droppable – контролирует, где перетаскиваемый (draggable) элемент может быть брошен.
Resizable – предоставляет возможность динамически изменять
размеры элемента с помощью мыши.
Selectable – предоставляет возможность выделять один или несколько элементов пользовательского интерфейса из группы.
Sortable – предоставляет возможность сортировки для группы эле-
ментов.
Виджеты
Accordion – виджет «Аккордеон».
Autocomplete – поле ввода с автодополнением.
Button – улучшенная кнопка, может также быть флажком (check
box) или радио-кнопкой (radio button); все виды кнопки могут располагаться на панели инструментов (toolbar).
Datepicker – виджет для выбора даты или диапазона дат.
Dialog – диалоговое окно, которое может иметь любое содержимое.
Progressbar – полоса прогресса.
Slider – слайдер.
Tabs – вкладки.
Эффекты
Color Animation – анимирует изменение цвета компонента.
Toggle Class, Add Class, Remove Class, Switch Class – анимируют
изменение набора класса стилей компонента.
39
Effect – множество эффектов, связанных с появлением и исчезно-
вением компонентов интерфейса.
Toggle – функция переключения между режимами видимости
компонентов с использованием эффектов.
Hide – функция исчезновения компонента с использованием
эффектов.
Show – функция появления компонента с использованием эффектов.
Утилиты
Position – установка положения элемента относительно позиции
другого элемента (выравнивание).
Пример:
<script type="text/javascript">
// $(f) – сокращение для $(document).ready(f),
// f выполняется после окончания загрузки документа.
$(function() {
$("#draggable").draggable();
});
</script>
<div id="draggable" style="width: 150px; height: 150px; padding:
0.5em;" class="ui-widget-content">
<p>Drag me around</p>
</div>
Вышеприведённый пример добавляет элементу с id=”draggable” возможность перетаскивания с помощью мыши.
40
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]