course js day 4

JavaScript
Georgy Grigoryev, Auriga, Inc.

2
1 вебинар
История js
Стандарт ECMAScript
IDE и редакторы
Запуск и отладка скриптов
Типы и операторы

3
2 вебинар
Массивы
Основные конструкции языка, и их применение
Объекты и JSON
Регулярные выражения
Контекст, this, bind, call, apply
ООП, прототипы, ООП в ECMAScript 6

4
3 вебинар
JavaScript и HTML
Работа с DOM
События, таймеры и AJAX

5
4 вебинар
jQuery
AngularJS
Knockout, Ember, Backbone
CoffeeScript
Node.js

6
jQuery.ajax
$.ajax.html
<html>
<head>
<title>jQuery AJAX</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
function load_data() {
$.ajax(
{
url: "data.html"
}).done(
function (data) {
document.getElementById("target").innerHTML = data
}
).fail(
function () {
alert("error when call server")
});
}
</script>
</head>
<body>
<button type="button" onclick="load_data()">Load</button>
<p id="target"></p>
</body>
</html>

7
jQuery
jQuery – самый популярный, свободно распространяемый, js
фреймворк
jQuery.UI – библиотека ui элементов основанная на jQuery
jQuery – имеет большую экосистему, создано огромное
количество плагинов
jQuery – имеет относительно большой вес (~ 100 КБ)
jQuery – кроссбраузерна (версия 1.хх поддерживает IE6!)

8
jQuery
<html>
<head>
<title>jQuery</title>
</head>
<body>
<script type="text/javascript">
console.log($);
console.log($(document));
</script>
</body>
</html>
$.html

9
jQuery selectors
<html>
<head>
<title>jQuery selectors</title>
$(document).ready(function () {
console.log($("span"));
console.log($(".main_p"));
})
</script>
</head>
<body>
<div>
<p class="main_p">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet feugiat ipsum.</span><br />
<span>Phasellus quis magna nulla. Ut non ornare metus, sit amet posuere dui.</span><br />
<span>Quisque placerat libero lacus, sit amet cursus mauris scelerisque vel.</span><br />
<span>Nunc ipsum justo, tempor sed felis in, porta elementum erat. Ut scelerisque iaculis sapien.</span><br />
<span>Integer a elit ultrices nisi gravida faucibus vitae non lacus.</span><br />
<span>Vestibulum convallis sagittis imperdiet. Donec lacinia sollicitudin tincidunt. Morbi vel viverra arcu, in convallis est.</span>
</p>
</div>
</body>
</html>
jquery selectors.html

10
Onload vs $(document).ready
onload vs $(document).ready.html
<html>
<head>
<title>load event</title>
var counter = 1;
log_msg('head loaded')
function log_msg(message) {
console.log(message + ", counter = " + counter);
var arr_p = [];
for (var i = 0; i < document.getElementsByTagName('p').length; i++) {
arr_p.push(document.getElementsByTagName('p')[i]);
}
console.log(arr_p);
counter++;
}
window.onload = log_msg.bind(null, 'window loaded');
$(document).ready(function () { log_msg("jQuery document ready") });
</script>
</head>
<body onload="log_msg('body loaded');">
<p>Paragraph 1</p>
<img src="http://localhost:1515/get_image.ashx" />
<script type="text/javascript">log_msg("inline call");</script>
<p>Paragraph 2</p>
</body>
</html>

11
Simple progress bar
jquery simple progress bar.html
<html>
<head>
<title>load event</title>
<script type="text/javascript" src="progress_bar.js"></script>
</head>
<body onload="log_msg('body loaded');">
<p>Paragraph 1</p>
<img src="http://localhost:1515/get_image.ashx" style="height:200" />
<script type="text/javascript">log_msg("inline call");</script>
<p>Paragraph 2</p>
</body>
</html>
var counter = 1;
log_msg('head loaded')
function log_msg(message) {
console.log(message + ": counter = " + counter);
var arr_p = [];
for (var i = 0; i < document.getElementsByTagName('p').length; i++) {
arr_p.push(document.getElementsByTagName('p')[i]);
}
console.log(arr_p);
counter++;
}
var window_loaded = false;
window.onload = function () {
log_msg('window loaded');
window_loaded = true;
$("#div_bar").remove();
}
log_msg("jQuery document ready");
if (!window_loaded) {
var div_bar = $('<div id="div_bar" style="position:fixed; top:0; left:0;
background-color:rgba(0,0,0,0.6) "/>').css("height", window.innerHeight).css("width",
window.innerWidth);
div_bar.append($('<div
style="position:fixed;top:40%;left:48%;color:#fff"/>').text("loading..."));
$("body").append(div_bar);
}
});
progress_bar.js

12
jquery each
jquery each.html
<html>
<head>
<title>jQuery array iterator</title>
$.each($("span"), function (i, val) {
console.log(i);
console.log(val);
});
})
</script>
</head>
<body>
<div>
<p class="main_p">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet feugiat ipsum.</span><br />
<span>Phasellus quis magna nulla. Ut non ornare metus, sit amet posuere dui.</span><br />
<span>Quisque placerat libero lacus, sit amet cursus mauris scelerisque vel.</span><br />
<span>Nunc ipsum justo, tempor sed felis in, porta elementum erat. Ut scelerisque iaculis sapien.</span><br />
<span>Integer a elit ultrices nisi gravida faucibus vitae non lacus.</span><br />
<span>Vestibulum convallis sagittis imperdiet. Donec lacinia sollicitudin tincidunt. Morbi vel viverra arcu, in convallis est.</span>
</p>
</div>
</body>
</html>

13
jQuery.ajax
$.ajax.html
<html>
<head>
<script>
$.ajax(
{
url: "http://localhost:1515/get_json.ashx"
}).done(
function (data) {
$(data).each(function (i, lang) {
var option = $("<option />").val(lang.Name).text(lang.Name);
$("#langs").append(option);
});
}
).fail(
function () {
alert("error when call server");
});
}
</script>
</head>
<body>
<select id="langs"></select>
</body>
</html>

14
$.getJSON
<html>
<head>
<script>
$.getJSON("http://localhost:1515/get_json.ashx").done(
function (data) {
$(data).each(function (i, lang) {
var option = $("<option />").val(lang.Name).text(lang.Name);
$("#langs").append(option);
});
}
).fail(
function () {
alert("error when call server");
});
}
</script>
</head>
<body>
<select id="langs"></select>
</body>
</html>
$.getJSON.html

15
getJSON, post
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});
$.getJSON()
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
$.post()

16
jQuery.UI
Из коробки поддерживает большое количество UI эффектов
Состоит из js скрипта и css файла темы
Темы оформления активно разрабатываются сообществом
Несколько стандартных виджетов
Сборку jquery.ui можно кастомизировать

17
jQuery.UI draggable
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css">
<style>
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
}
</style>
<script>
$(function () {
$("#draggable").draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
Source: http://jqueryui.com/draggable/

18
jQuery.datepicker
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-
lightness/jquery-ui.css">
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>
Date:
<input type="text" id="datepicker">
</p>
</body>
</html>
$.datepicker.html

19
jQuery pros
Очень функциональная библиотека
Низкий порог вхождения
Большое количество расширений и плагинов
Хорошая инфраструктура, легко использовать для
макетной разработки
Кроссбраузерна (IE6+ или IE9+)

20
jQuery cons
Весит порядка 100КБ
Большая часть функционала легко реализуема
на js

21
AngularJS
<html ng-app>
<head>
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-
beta.17/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
AngularJS.html

22
AngularJS
Превращает HTML+JS+CSS в MVC приложение
Развивается Google и сообществом
Размер сжатого ~ 110 КБ
Многократно повышает отзывчивость сайта
Имеет некоторые встроенные эффекты

23
<html ng-app>
<head>
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
function UserController($scope) {
$scope.User = {
Name: "",
WelcomeMessage: function () {
return "Hello " + $scope.User.Name + "!";
}
};
}
</script>
</head>
<body>
<div ng-app="" ng-controller="UserController">
<label>Name:</label>
<input type="text" ng-model="User.Name" placeholder="Enter a name here">
<hr>
<h1>{{User.WelcomeMessage()}}</h1>
</div>
</body>
</html>
AngularJS controllers
AngularJS controllers.html

24
AngularJS
<html ng-app>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
Специальные HTML
директивы AngularJS
<h1>Hello {{yourName}}!</h1>
Двойные фигурные
скобки для работы с
представлением
<div ng-app="" ng-controller="UserController">
function UserController($scope) {
Контроллеры
объявляются
через директивы

25
AngularJS example
http://angular.github.io

26
NodeJS
JavaScript Back-end
Использует Google V8
Кроссплатформенный
Имеет свой менеджер пакетов
https://github.com/joyent/node

27
node-webkit
Состоит из Chromium+Node.js
Кроссплатформенный
https://github.com/rogerwang/node-webkit

28
github Atom
https://atom.io/

29
KnockoutJS
MVVM
Создан сотрудником Microsoft, лицензия MIT
Содержит UI элементы

30
Contacts
Thank You and
We Look Forward to Working with You
Auriga, USA
92 Potter Rd, Ste 1
Wilton, NH 03086, USA
Phone: +1 (866) 645-1119
Fax: +1 (603) 386-6097
info@auriga.com
www.auriga.com
Auriga, Russia
125 Varshavskoe Shosse, Unit 16A
Moscow, 117587
Tel:+7 (495) 713-9900
Fax:+7 (495) 939-0300
info@auriga.com
www.auriga.com

course js day 4

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to course js day 4

Similar to course js day 4 (20)

course js day 4