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

Темы лекции: Обзор веб-фреймворков.

Тренер: Игорь Шкулипа, к.т.н.

JavaScript. Базовый курс

Занятие 11

http://www.slideshare.net/IgorShkulipa 2

jQuery

jQuery – это JavaScript-библиотека, фокусирующаяся на взаимодействииJavaScript, HTML и CSS.

Что умеет jQuery:

• Обращаться к любому элементу DOM (объектной моделидокумента) и не только обращаться, но и манипулировать ими.

• Работать с событиями.

• Легко осуществлять различные визуальные эффекты.

• Работать с AJAX.

• Имеет огромное количество JavaScript плагинов, предназначенныхдля создания элементов пользовательских интерфейсов.

http://www.slideshare.net/IgorShkulipa

http://jquery.com/

http://jquery.com/


Функция $()

$("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() позволят работать с прокруткой.

Ссылка на русскоязычное описание библиотеки

И на сайт разработчиков


http://jquery.page2page.ru/

http://jquery.com/


Пример «Крестики-нолики с 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 описании документа;

• Шаблоны — фиксированный или резиновый шаблон документа;• Типографика — описания шрифтов, определение некоторых классов для

шрифтов таких как код, цитаты и т.п.;• Медиа — представляет возможности управления изображениями и видео;• Таблицы — средства оформления таблиц, вплоть до добавления

функциональности для обеспечения возможности сортировки;• Формы — классы для оформления не только форм, но и некоторых событий

происходящих с ними;• Навигация — классы оформления для вкладок, страниц, меню и панелей

инструментов;• Алерты — оформление диалоговых окон, подсказок и всплывающих окон.


http://bootstrap-ru.com/


Компоненты Bootstrap

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


http://bootstrap-ru.com/components.php


Пример

<!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/


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":"[email protected]"

},

{

"name": "Petr",

"middle": "Petrovich",

"surname": "Petrov",

"email": "[email protected]"

},

{

"name": "Sidor",

"middle": "Sidorovich",

"surname": "Sidorov",

"email": "[email protected]"

},

];

}



Пример. 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


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: "[email protected]"

}

});

var PeopleList = Backbone.Collection.extend({

models: Persone

});

var People = new PeopleList([

new Persone({ name: "Ivan", middle: "Ivanovich",

surname: "Ivanov", email: "[email protected]" }),

new Persone({ name: "Petr", middle: "Petrovich",

surname: "Petrov", email: "[email protected]" }),

new Persone({ name: "Sidor", middle: "Sidorovich",

surname: "Sidorov", email: "[email protected]" })

]);



Пример. Модель и остальное

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


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", "[email protected]"),

new persone("Petr", "Petrovich", "Petrov", "[email protected]"),

new persone("Sidor", "Sidorovich", "Sidorov", "[email protected]")

])

}



Пример. 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/


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

Education