JavaScript Базовый. Занятие 11.

Темы лекции: Обзор веб-фреймворков.
Тренер: Игорь Шкулипа, к.т.н.
JavaScript. Базовый курс
Занятие 11

http://www.slideshare.net/IgorShkulipa 2
jQuery
jQuery – это JavaScript-библиотека, фокусирующаяся на взаимодействии
JavaScript, HTML и CSS.
Что умеет jQuery:
• Обращаться к любому элементу DOM (объектной модели
документа) и не только обращаться, но и манипулировать ими.
• Работать с событиями.
• Легко осуществлять различные визуальные эффекты.
• Работать с AJAX.
• Имеет огромное количество JavaScript плагинов, предназначенных
для создания элементов пользовательских интерфейсов.

Функция $()
$("div") вернет все div-элементы на странице.
$(".someBlock") вернет все элементы с классом
someBlock.
$("#content") вернет элемент с идентификатором
content.
$("#content2 div.someBlock")
вернет div-элементы с классом
someBlock, которые находятся внутри
элемента с идентификатором
content2.
$("div:odd") вернет div-элементы, находящиеся на
странице под нечетными номерами.
$("[value = 5]") вернет все элементы с атрибутом
value, равным 5.
С помощью функции $() из библиотеки, можно находить элементы на
странице по различным параметрам

Функция $()
$("#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.

Цепочки методов
Важной особенностью большинства методов jQuery, является возможность
связывать их в цепочки. Методы, манипулирующие элементами
документа, обычно возвращают эти объекты для дальнейшего
использования, что позволяет писать примерно следующее:
$("#bigIt").empty().attr("class", "noContent");
// в результате, у элемента с идентификатором bigIt будет удалено
все содержимое,
// после чего ему будет установлен класс noContent.

Работа с набором элементов
Помимо манипуляций с выбранными элементами, 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-ов).

Анимационные эффекты
Ключевым методом, на которой базируются все остальные, является метод
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);

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");

Другие возможности
Существуют и другие возможности jQuery, например:
• $.browser поможет узнать тип браузера.
• $.support поможет узнать конкретные особенности браузера.
• .offset() и .position() позволят узнать или изменить позицию
выбранного элемента.
• .width() и .height() позволят узнать или изменить размеры
выбранного элемента.
• .scrollTop() и .scrollLeft() позволят работать с прокруткой.
Ссылка на русскоязычное описание библиотеки
И на сайт разработчиков

Пример «Крестики-нолики с jQuery»
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>jQuery XO</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script src="xo.js" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="xo.css" />
</head>
<body>
<table style="width:600px; height:600px;">
<tr><td id="11"></td>
<td id="12"></td>
<td id="13"></td></tr>
<tr><td id="21"></td>
<td id="22"></td>
<td id="23"></td></tr>
<tr><td id="31"></td>
<td id="32"></td>
<td id="33"></td></tr>
</table>
</body>
</html>
xo.html
td, tr {
border: 1px solid black;
text-align: center;
color:transparent;
width: 33.33%;
height: 33.33%;
}
xo.css

xo.js функция проверки победы
function CheckVictory(xo) {
if (
//Строки
(($("#11").text() == xo) && ($("#12").text() == xo) &&
($("#13").text() == xo)) ||
(($("#21").text() == xo) && ($("#22").text() == xo) &&
($("#23").text() == xo)) ||
(($("#31").text() == xo) && ($("#32").text() == xo) &&
($("#33").text() == xo)) ||
//Столбцы
(($("#11").text() == xo) && ($("#21").text() == xo) &&
($("#31").text() == xo)) ||
(($("#12").text() == xo) && ($("#22").text() == xo) &&
($("#32").text() == xo)) ||
(($("#13").text() == xo) && ($("#23").text() == xo) &&
($("#33").text() == xo)) ||
//Диагонали
(($("#11").text() == xo) && ($("#22").text() == xo) &&
($("#33").text() == xo)) ||
(($("#31").text() == xo) && ($("#22").text() == xo) &&
($("#13").text() == xo))) {
if (xo == 'X')
alert('Крестики победили!');
else
alert('Нолики победили!');
}
}

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')");
}

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("Занято!");
}
}

xo.js последняя «функция»
$(document).ready(
function () {
$('td').click(ClickLogic);
});
Эта запись «переводится», приблизительно, как «в качестве
обработчика $(document).ready установить функцию, которая
обработчиком клика td-шки устанавливает функцию
ClickLogic»

Результат

Bootstrap
http://bootstrap-ru.com/
Twitter Bootstrap - это фреймворк для создания современных, кросс-браузерных и
стандартизованных интерфейсов. Продуманная структура кода HTML, JavaScript
и CSS дает вам возможность создавать множество самых разнообразных
элементов интерфейса и сетку сайта.
Основные инструменты Bootstrap:
• Сетки — заранее заданные размеры колонок, которые можно сразу же
использовать, например ширина колонки 90px относится к классу .span2, который
мы можем использовать в CSS описании документа;
• Шаблоны — фиксированный или резиновый шаблон документа;
• Типографика — описания шрифтов, определение некоторых классов для
шрифтов таких как код, цитаты и т.п.;
• Медиа — представляет возможности управления изображениями и видео;
• Таблицы — средства оформления таблиц, вплоть до добавления
функциональности для обеспечения возможности сортировки;
• Формы — классы для оформления не только форм, но и некоторых событий
происходящих с ними;
• Навигация — классы оформления для вкладок, страниц, меню и панелей
инструментов;
• Алерты — оформление диалоговых окон, подсказок и всплывающих окон.

Компоненты Bootstrap
Все компоненты Bootstrap

Пример
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, World from Bootstrap</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Hello from Tab 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Hello from Tab 2</p>
</div>
</div>
</div>
</body>
</html>

Результат

AngularJS
AngularJS — JavaScript-фреймворк с открытым исходным кодом.
Предназначен для разработки одностраничных приложений. Его цель
— расширение браузерных приложений на основе MVC шаблона, а
также упрощение тестирования и разработки.
Фреймворк работает с HTML, содержащим дополнительные
пользовательские атрибуты, которые описываются директивами, и
связывает ввод или вывод области страницы с моделью,
представляющей собой обычные переменные JavaScript. Значения
этих переменных задаются вручную или извлекаются из статических
или динамических JSON-данных.
AngularJS спроектирован с убеждением, что декларативное
программирование лучше всего подходит для построения
пользовательских интерфейсов и описания программных
компонентов, в то время как императивное программирование
отлично подходит для описания бизнес-логики. Фреймворк
адаптирует и расширяет традиционный HTML, чтобы обеспечить
двустороннюю привязку данных для динамического контента, что
позволяет автоматически синхронизировать модель и представление.
В результате AngularJS уменьшает роль DOM-манипуляций и улучшает
тестируемость.

Популярные Angular-директивы
С помощью директив AngularJS можно создавать пользовательские HTML-
теги и атрибуты, чтобы добавить поведение некоторым элементам.
• ng-app - объявляет элемент корневым для приложения.
• ng-bind - автоматически заменяет текст HTML-элемента на значение
переданного выражения.
• ng-model - то же что и ng-bind, только обеспечивает двустороннее
связывание данных. Изменится содержимое элемента, ангуляр изменит
и значение модели. Изменится значение модели, ангуляр изменит
текст внутри элемента.
• ng-class - определяет классы для динамической загрузки.
• ng-controller - определяет JavaScript-контроллер для вычисления
HTML-выражений.
• ng-repeat - создает экземпляр для каждого элемента из коллекции.

Популярные Angular-директивы
• ng-show и ng-hide - показывает или скрывает элемент в зависимости
от значения логического выражения.
• ng-switch - создает экземпляр шаблона из множества вариантов, в
зависимости от значения выражения.
• ng-view - базовая директива, отвечает за обработку маршрутов,
которые принимают JSON перед отображением шаблонов,
управляемых указанными контроллерами.

Ссылки
http://angular.ru
http://habrahabr.ru/hub/angularjs/
http://metanit.com/web/angular/

Пример. Контроллеры (они же модели)
function HelloWorldController($scope) {
$scope.message = "Hello, World from AngularJS";
}
function PeopleController($scope) {
$scope.people = [
{
"name": "Ivan",
"middle":"Ivanovich",
"surname": "Ivanov",
"email":"ivan@ivanov.com"
},
{
"name": "Petr",
"middle": "Petrovich",
"surname": "Petrov",
"email": "petr@petrov.com"
},
{
"name": "Sidor",
"middle": "Sidorovich",
"surname": "Sidorov",
"email": "sidor@sidorov.com"
},
];
}

Пример. HTML
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS Example</title>
<script src="js/angular.min.js"></script>
<script src="js/mc.js"></script>
</head>
<body>
<h1 ng-controller="HelloWorldController">{{message}}</h1>
<ul ng-controller="PeopleController">
<li ng-repeat="per in people">
{{per.name}} {{per.middle}} {{per.surname}}
 - <strong>{{per.email}}</strong>
</li>
</ul>
</body>
</html>

Результат

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.

Каталог встроенных событий
• "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) — когда модель была успешно синхронизирована с
сервером.

Каталог встроенных событий
• "error" (model, xhr, options) — когда вызов save провалился на
сервере.
• "invalid" (model, error, options) — модель не прошла валидацию на
клиенте.
• "route:[name]" (params) — когда один конкретный роут находит
соответствие.
• "route" (router, route, params) — когда любой из роутов находит
соответствие.
• "all" — это специальное событие срабатывает каждый раз, когда
срабатывает любое событие, передавая имя события первым
аргументом.

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

Ссылки
http://backbonejs.org/
http://backbonejs.ru/
http://habrahabr.ru/post/127049/
https://github.com/kulakowka/Backbone.js-Russian

Пример. Заголовок
<!DOCTYPE html>
<html>
<head>
<title>BackboneJS Example</title>
<link href="css/bootstrap.css" rel="stylesheet"
media="screen">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
</head>
<body>
<h1>Hello, World from BackboneJS</h1>
<div id="maindiv">
</div>

Пример. Шаблон представления
<script type="text/template" id="maintemplate">
<ul>
<% People.each( function(per) { %>
<li>
<%= per.get("name") %> 
<%= per.get("middle") %> 
<%= per.get("surname") %> -<strong>
<%= per.get("email") %></strong>
</li>
<% }); %>
</ul>
</script>

Пример. Модель и остальное
<script type="text/javascript">
var Persone = Backbone.Model.extend({
defaults: {
name: "Name",
middle: "Middle",
surname: "Surname",
email: "address@domain.com"
}
});
var PeopleList = Backbone.Collection.extend({
models: Persone
});
var People = new PeopleList([
new Persone({ name: "Ivan", middle: "Ivanovich",
surname: "Ivanov", email: "ivan@ivanov.com" }),
new Persone({ name: "Petr", middle: "Petrovich",
surname: "Petrov", email: "petr@petrov.com" }),
new Persone({ name: "Sidor", middle: "Sidorovich",
surname: "Sidorov", email: "sidor@sidorov.com" })
]);

Пример. Модель и остальное
var MainView = Backbone.View.extend({
el: "#maindiv",
initialize: function () {
this.render();
},
render: function () {
var templ = _.template($("#maintemplate").html(),
{ People: People.models });
$("#maindiv").html(templ);
return this;
}
});
var mv = new MainView();
</script>
</body>
</html>

Результат

KnockoutJS
Knockout использует архитектуру (MVVM) Модель - Представление -
Модель представления.
Элементы страницы, из которых она будет состоять, могут быть
помещены в представление.
Сами данные, которые будут отображаться, могут быть представлены в
модели.
Третий компонент, модель представления, - это по сути состояние
интерфейса в данный момент времени (комбинация данных и
представления с уже применёнными интерактивными элементами).

Ссылки
http://knockoutjs.com/
https://github.com/knockout/knockout

Пример. ViewModel
function persone(nam, mid, surn, em) {
this.name = ko.observable(nam);
this.middle = ko.observable(mid);
this.surname = ko.observable(surn);
this.email = ko.observable(em);
this.fullname = ko.pureComputed({
read: function () {
return this.name() + " " +
this.middle() + " " +
this.surname();
},
write: function (value) {
var iFirstSpace = value.indexOf(" ");
var iSecondSpace = value.lastIndexOf(" ");
if ((iFirstSpace > 0)&&(iSecondSpace>0)) {
this.name(value.substring(0, iFirstSpace));
this.middle(value.substring(iFirstSpace+1, iSecondSpace));
this.surname(value.substring(iSecondSpace+1));
}
},
owner: this
});
return this;
}

Пример. ViewModel
var HelloWorldViewModel = {
message: "Hello, World from KnockoutJS",
people: ko.observableArray([
new persone("Ivan", "Ivanovich", "Ivanov", "ivan@ivanov.com"),
new persone("Petr", "Petrovich", "Petrov", "petr@petrov.com"),
new persone("Sidor", "Sidorovich", "Sidorov", "sidor@sidorov.com")
])
}

Пример. HTML
<!DOCTYPE html>
<html>
<head>
<title>KnockoutJS Example</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/knockout-3.2.0.js"></script>
<script type="text/javascript" src="js/mc.js"></script>
</head>
<body>
<h1 data-bind="text:HelloWorldViewModel.message" ></h1>
<table>
<thead>
<tr><th>Name</th><th>Middle</th><th>Surname</th>
<th>E-Mail</th><th>Full Name</th></tr>
</thead>
<tbody data-bind="foreach: HelloWorldViewModel.people">
<tr>
<td><input data-bind="value: name"/></td>
<td><input data-bind="value: middle"/></td>
<td><input data-bind="value: surname"/></td>
<td><input data-bind="value: email"/></td>
<td><input data-bind="value: fullname"/></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
ko.applyBindings(HelloWorldViewModel);
</script>
</body>
</html>

Результат

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 является предложить «простой
способ построения масштабируемых сетевых серверов».

Ссылки
http://nodejs.org/
http://www.nodebeginner.ru/

Пример. Самый простой сервер
var http = require("http");
http.createServer(function (request, response) {
response.writeHead(200, { “Content-Type”: “text/plain” });
response.end("Hello, World from NodeJS");
}).listen(12345);

Пример. Сервер немного сложнее
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);

Пример. Сервер еще немного сложнее
var fs = require("fs");
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>

Пример. Сервер еще чуть-чуть сложнее
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>
</head>
<body>
<h1>Hello, World from NodeJS</h1>
</body>
</html>
Index2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello, World from NodeJS and Index2</h1>
</body>
</html>

Результат

JavaScript Базовый. Занятие 11.

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to JavaScript Базовый. Занятие 11. (20)

More from Igor Shkulipa (20)

JavaScript Базовый. Занятие 11.