1. Темы лекции: Обзор веб-фреймворков.
Тренер: Игорь Шкулипа, к.т.н.
JavaScript. Базовый курс
Занятие 11
2. http://www.slideshare.net/IgorShkulipa 2
jQuery
jQuery – это JavaScript-библиотека, фокусирующаяся на взаимодействии
JavaScript, HTML и CSS.
Что умеет jQuery:
• Обращаться к любому элементу DOM (объектной модели
документа) и не только обращаться, но и манипулировать ими.
• Работать с событиями.
• Легко осуществлять различные визуальные эффекты.
• Работать с AJAX.
• Имеет огромное количество JavaScript плагинов, предназначенных
для создания элементов пользовательских интерфейсов.
3. http://www.slideshare.net/IgorShkulipa 3
Функция $()
$("div") вернет все div-элементы на странице.
$(".someBlock") вернет все элементы с классом
someBlock.
$("#content") вернет элемент с идентификатором
content.
$("#content2 div.someBlock")
вернет div-элементы с классом
someBlock, которые находятся внутри
элемента с идентификатором
content2.
$("div:odd") вернет div-элементы, находящиеся на
странице под нечетными номерами.
$("[value = 5]") вернет все элементы с атрибутом
value, равным 5.
С помощью функции $() из библиотеки, можно находить элементы на
странице по различным параметрам
4. http://www.slideshare.net/IgorShkulipa 4
Функция $()
$("#bigIt").css("height") возвратит значение высоты у
элемента с идентификатором bigIt.
$("div").css("width", "20px") установит новое значение ширины
всем div-элемента на странице.
$("#bigIt").attr("class") возвратит значение класса элемента с
id = bigIt.
$("#bigIt").attr("class", "box") установит новое значение атрибута
class у элемента с id = bigIt.
$("#bigIt").html(<p>Новый!</p>)
изменит все html-содержимое
элемента с id = bigIt, на заданное в
методе html.
$("#bigIt").text() возвратит текст, находящийся внутри
элемента с id = bigIt.
$(".someBox").empty() очистить от содержимого элементы с
классом someBox.
5. http://www.slideshare.net/IgorShkulipa 5
Цепочки методов
Важной особенностью большинства методов jQuery, является возможность
связывать их в цепочки. Методы, манипулирующие элементами
документа, обычно возвращают эти объекты для дальнейшего
использования, что позволяет писать примерно следующее:
$("#bigIt").empty().attr("class", "noContent");
// в результате, у элемента с идентификатором bigIt будет удалено
все содержимое,
// после чего ему будет установлен класс noContent.
6. http://www.slideshare.net/IgorShkulipa 6
Работа с набором элементов
Помимо манипуляций с выбранными элементами, jQuery позволяет
работать с самим набором: изменять его, а так же работать с
элементами по отдельности.
$("div").parent() вернет родительские элементы всех div-ов.
$("div").children() вернет дочерние элементы всех div-ов.
$("#someId").next() вернет элемент, лежащий сразу после someId.
$("div").prev() вернет элементы, лежащие перед div'ами.
$("div").eq(i) вернет div-элемент, с индексом i в наборе.
$("div").get(i) вернет DOM-объект div'а, с индексом i.
$("div").get() вернет массив DOM-объеков всех div-ов.
$("div").size() вернет размер набора (количествово div-ов).
7. http://www.slideshare.net/IgorShkulipa 7
Анимационные эффекты
Ключевым методом, на которой базируются все остальные, является метод
animate(), с помощью которого можно задавать плавное изменение
различных CSS-свойств:
.animate(properties, [duration], [easing], [callback])
• properties — список CSS-свойств, участвующих в анимации и их
конечных значений. Задаются объектом, в формате
{ключ:значение}, например:{opacity: 50, width: 100, height: 200}.
• duration — продолжительность выполнения анимации. Может быть
задана в миллисекундах или строковым значением 'fast' или 'slow'
(200 и 600 миллисекунд).
• easing — изменение скорости анимации (будет ли она замедляется
к концу выполнения или наоборот ускорится). Задается строковым
значением: "linear" и "swing" (для равномерной анимации и
анимации с ускорением). Другие варианты можно найти в плагинах.
• callback — функция, которая будет вызвана после завершения
анимации.
$("#mydiv")
.animate({height: "hide"}, 300)
.text("Новый текст")
.animate({height: "show"}, 300);
8. http://www.slideshare.net/IgorShkulipa 8
Ajax
В jQuery реализована возможность выполнения запросов к серверу без
перезагрузки страницы (ajax). Базовыми функциями для ее работы
являются post() и get():
$.post(url, [params], [callback], [dataType])
$.get(url, [params], [callback], [dataType])
• url — url-адрес, по которому будет отправлен запрос.
• data — данные, которые будут отправлены на сервер. Они
должны быть представлены объектом, в формате: {fName1:value1,
fName2:value2, ...}.
• callback — пользовательская функция, которая будет вызвана
после ответа сервера.
• dataType — ожидаемый тип данных, которые пришлет сервер в
ответ на запрос.
Простейший пример:
$.get(“http://random.org");
9. http://www.slideshare.net/IgorShkulipa 9
Другие возможности
Существуют и другие возможности jQuery, например:
• $.browser поможет узнать тип браузера.
• $.support поможет узнать конкретные особенности браузера.
• .offset() и .position() позволят узнать или изменить позицию
выбранного элемента.
• .width() и .height() позволят узнать или изменить размеры
выбранного элемента.
• .scrollTop() и .scrollLeft() позволят работать с прокруткой.
Ссылка на русскоязычное описание библиотеки
И на сайт разработчиков
12. http://www.slideshare.net/IgorShkulipa 12
xo.js функция, отмечающая ход
function MarkXO(elem, xo) {
elem.text(xo);
elem.css("background-repeat", "no-repeat");
elem.css("background-position", "center");
if (xo == 'X')
elem.css("background-image", "url('x.png')");
else
elem.css("background-image", "url('o.png')");
}
13. http://www.slideshare.net/IgorShkulipa 13
xo.js функция-обработчик клика ячейки
var xoGlobal = 'O';
function ClickLogic() {
text = $(this).text();
if (text == '') {
if (xoGlobal == 'X') {
xoGlobal = 'O'
} else {
xoGlobal = 'X'
};
MarkXO($(this), xoGlobal);
CheckVictory(xoGlobal);
} else {
alert("Занято!");
}
}
14. http://www.slideshare.net/IgorShkulipa 14
xo.js последняя «функция»
$(document).ready(
function () {
$('td').click(ClickLogic);
});
Эта запись «переводится», приблизительно, как «в качестве
обработчика $(document).ready установить функцию, которая
обработчиком клика td-шки устанавливает функцию
ClickLogic»
18. http://www.slideshare.net/IgorShkulipa 18
Bootstrap
http://bootstrap-ru.com/
Twitter Bootstrap - это фреймворк для создания современных, кросс-браузерных и
стандартизованных интерфейсов. Продуманная структура кода HTML, JavaScript
и CSS дает вам возможность создавать множество самых разнообразных
элементов интерфейса и сетку сайта.
Основные инструменты Bootstrap:
• Сетки — заранее заданные размеры колонок, которые можно сразу же
использовать, например ширина колонки 90px относится к классу .span2, который
мы можем использовать в CSS описании документа;
• Шаблоны — фиксированный или резиновый шаблон документа;
• Типографика — описания шрифтов, определение некоторых классов для
шрифтов таких как код, цитаты и т.п.;
• Медиа — представляет возможности управления изображениями и видео;
• Таблицы — средства оформления таблиц, вплоть до добавления
функциональности для обеспечения возможности сортировки;
• Формы — классы для оформления не только форм, но и некоторых событий
происходящих с ними;
• Навигация — классы оформления для вкладок, страниц, меню и панелей
инструментов;
• Алерты — оформление диалоговых окон, подсказок и всплывающих окон.
22. http://www.slideshare.net/IgorShkulipa 22
AngularJS
AngularJS — JavaScript-фреймворк с открытым исходным кодом.
Предназначен для разработки одностраничных приложений. Его цель
— расширение браузерных приложений на основе MVC шаблона, а
также упрощение тестирования и разработки.
Фреймворк работает с HTML, содержащим дополнительные
пользовательские атрибуты, которые описываются директивами, и
связывает ввод или вывод области страницы с моделью,
представляющей собой обычные переменные JavaScript. Значения
этих переменных задаются вручную или извлекаются из статических
или динамических JSON-данных.
AngularJS спроектирован с убеждением, что декларативное
программирование лучше всего подходит для построения
пользовательских интерфейсов и описания программных
компонентов, в то время как императивное программирование
отлично подходит для описания бизнес-логики. Фреймворк
адаптирует и расширяет традиционный HTML, чтобы обеспечить
двустороннюю привязку данных для динамического контента, что
позволяет автоматически синхронизировать модель и представление.
В результате AngularJS уменьшает роль DOM-манипуляций и улучшает
тестируемость.
23. http://www.slideshare.net/IgorShkulipa 23
Популярные Angular-директивы
С помощью директив AngularJS можно создавать пользовательские HTML-
теги и атрибуты, чтобы добавить поведение некоторым элементам.
• ng-app - объявляет элемент корневым для приложения.
• ng-bind - автоматически заменяет текст HTML-элемента на значение
переданного выражения.
• ng-model - то же что и ng-bind, только обеспечивает двустороннее
связывание данных. Изменится содержимое элемента, ангуляр изменит
и значение модели. Изменится значение модели, ангуляр изменит
текст внутри элемента.
• ng-class - определяет классы для динамической загрузки.
• ng-controller - определяет JavaScript-контроллер для вычисления
HTML-выражений.
• ng-repeat - создает экземпляр для каждого элемента из коллекции.
24. http://www.slideshare.net/IgorShkulipa 24
Популярные Angular-директивы
• ng-show и ng-hide - показывает или скрывает элемент в зависимости
от значения логического выражения.
• ng-switch - создает экземпляр шаблона из множества вариантов, в
зависимости от значения выражения.
• ng-view - базовая директива, отвечает за обработку маршрутов,
которые принимают JSON перед отображением шаблонов,
управляемых указанными контроллерами.
29. http://www.slideshare.net/IgorShkulipa 29
BackboneJS
BackboneJS — JavaScript-библиотека, основанная на шаблоне
проектирования Model-View-Presenter (MVP), предназначена для
разработки веб-приложений с поддержкой RESTful JSON интерфейса.
Backbone — очень лёгкая библиотека (упакованная и gzip-сжатая 6.3 Кб),
но для работы необходима библиотека Underscore.js, а для
поддержки REST API и работы с DOM элементами рекомендуется
подключить jQuery-подобную библиотеку: jQuery или Zepto.
Backbone.js создан Джереми Ашкенасом, который известен также как
создатель CoffeeScript.
Проект размещается на GitHub, с доступным аннотированным исходным
кодом, с онлайновыми тестами с примером приложения, со списком
туториалов и списком реальных проектов, которые используют
Backbone. Backbone доступен под лицензией MIT.
30. http://www.slideshare.net/IgorShkulipa 30
Каталог встроенных событий
• "add" (model, collection, options) — когда модель добавляется в коллекцию.
• "remove" (model, collection, options) — когда модель удаляется из коллекции.
• "reset" (collection, options) — когда всё содержимое коллекции заменяется.
• "sort" (collection, options) — когда коллекция была отсортирована.
• "change" (model, options) — когда атрибут модели меняется.
• "change:[attribute]" (model, value, options) — когда меняется конкретный
атрибут модели.
• "destroy" (model, collection, options) — когда модель уничтожена.
• "request" (model, xhr, options) — когда модель (или коллекция) отправляет
запрос на сервер.
• "sync" (model, resp, options) — когда модель была успешно синхронизирована с
сервером.
31. http://www.slideshare.net/IgorShkulipa 31
Каталог встроенных событий
• "error" (model, xhr, options) — когда вызов save провалился на
сервере.
• "invalid" (model, error, options) — модель не прошла валидацию на
клиенте.
• "route:[name]" (params) — когда один конкретный роут находит
соответствие.
• "route" (router, route, params) — когда любой из роутов находит
соответствие.
• "all" — это специальное событие срабатывает каждый раз, когда
срабатывает любое событие, передавая имя события первым
аргументом.
32. http://www.slideshare.net/IgorShkulipa 32
Backbone.Model
Модели содержат как интерактивные данные, так и большую часть
соответствующей логики: конвертации, валидации, вычисленные
свойства и контроль доступа.
Вы расширяете Backbone.Model методами своей предметной области, а
Model предоставляет базовый набор функциональности по управлению
изменениями.
39. http://www.slideshare.net/IgorShkulipa 39
KnockoutJS
Knockout использует архитектуру (MVVM) Модель - Представление -
Модель представления.
Элементы страницы, из которых она будет состоять, могут быть
помещены в представление.
Сами данные, которые будут отображаться, могут быть представлены в
модели.
Третий компонент, модель представления, - это по сути состояние
интерфейса в данный момент времени (комбинация данных и
представления с уже применёнными интерактивными элементами).
45. http://www.slideshare.net/IgorShkulipa 45
NodeJS
Node или Node.js — программная платформа, основанная на движке V8
(транслирующем JavaScript в машинный код), превращающая JavaScript из
узкоспециализированного языка в язык общего назначения.
Node.js добавляет возможность JavaScript взаимодействовать с устройствами ввода-
вывода через свой API (написанный на C++), подключать другие внешние
библиотеки, написанные на разных языках, обеспечивая вызовы к ним из
JavaScript-кода.
Node.js применяется преимущественно на сервере, выполняя роль веб-сервера, но
есть возможность разрабатывать на Node.js и десктопные оконные приложения
(при помощи node-webkit и AppJS для Linux, Windows и Mac OS) и даже
программировать микроконтроллеры (например, tessel и espruino). В основе
Node.js лежит событийно-ориентированное и асинхронное (или реактивное)
программирование с неблокирующим вводом/выводом.
Node разработал Райан Дал (англ. Ryan Dahl) в 2009 году после двух лет
экспериментирования над созданием серверных веб-компонентов. В ходе своих
исследований он пришёл к выводу, что вместо традиционной модели
параллелизма на основе потоков следует обратиться к событийно-
ориентированным системам. Эта модель была выбрана из-за простоты, низких
накладных расходов (по сравнению с идеологией «один поток на каждое
соединение») и быстродействия. Целью Node является предложить «простой
способ построения масштабируемых сетевых серверов».
47. http://www.slideshare.net/IgorShkulipa 47
Пример. Самый простой сервер
var http = require("http");
http.createServer(function (request, response) {
response.writeHead(200, { “Content-Type”: “text/plain” });
response.end("Hello, World from NodeJS");
}).listen(12345);
48. http://www.slideshare.net/IgorShkulipa 48
Пример. Сервер немного сложнее
var http = require("http");
http.createServer(function (request, response) {
response.writeHead(200, { “Content-Type”: “text/html” });
response.write("<!DOCTYPE html><html><head>");
response.write("<title>"+"NodeJS Example"+"</title>");
response.write("</head><body>");
response.write("<h1>"+"Hello, World from NodeJS"+"</h1>");
response.end("</body></html>");
}).listen(12345);
49. http://www.slideshare.net/IgorShkulipa 49
Пример. Сервер еще немного сложнее
var http = require("http");
var fs = require("fs");
http.createServer(function (request, response) {
var index = fs.readFileSync("./index.html");
response.writeHead(200,
{ “Content-Type”: “text/html” });
response.end(index);
}).listen(12345);
Index.html
<!DOCTYPE html>
<html>
<head>
<title>NodeJS Example</title>
</head>
<body>
<h1>Hello, World from NodeJS</h1>
</body>
</html>
50. http://www.slideshare.net/IgorShkulipa 50
Пример. Сервер еще чуть-чуть сложнее
var http = require("http");
var url = require("url");
var fs = require("fs");
function Respond(request, response) {
var pathname = url.parse(request.url).pathname;
var index = fs.readFileSync("./" + pathname);
response.writeHead(200, { “Content-Type”: “text/html” });
response.end(index);
}
http.createServer(Respond).listen(12345);
Index.html
<!DOCTYPE html>
<html>
<head>
<title>NodeJS Example</title>
</head>
<body>
<h1>Hello, World from NodeJS</h1>
</body>
</html>
Index2.html
<!DOCTYPE html>
<html>
<head>
<title>NodeJS Example</title>
</head>
<body>
<h1>Hello, World from NodeJS and Index2</h1>
</body>
</html>