Подробная презентация JavaScript 6 в 1

1. JavaScript
Александр Березневатый,
Senior Java Developer & Team Lead

3. > new Array() + new Array() = ?

4. > new Array() + new Array() = ‘’

5. > new Array() + new Array() = “
> new Array() + new Object() = ?

6. > new Array() + new Array() = “
> new Array() + new Object() = [object Object]

7. > new Array() + new Array() = “
> new Array() + new Object() = [object Object]
> 0 == ‘’ ?

8. > new Array() + new Array() = “
> new Array() + new Object() = [object Object]
> 0 == ‘’ => true
> 0 == ‘0’ ?

9. > new Array() + new Array() = “
> new Array() + new Object() = [object Object]
> 0 == ‘’ => true
> 0 == ‘0’ => true
> 0 == false ?

10. > new Array() + new Array() = “
> new Array() + new Object() = [object Object]
> 0 == ‘’ => true
> 0 == ‘0’ => true
> 0 == false => true
> '0' == false ?

11. > new Array() + new Array() = “
> new Array() + new Object() = [object Object]
> 0 == ‘’ => true
> 0 == ‘0’ => true
> 0 == false => true
> '0' == false => true
> 0 == ' r t n t ‘ ?

12. > new Array() + new Array() = “
> new Array() + new Object() = [object Object]
> 0 == ‘’ => true
> 0 == ‘0’ => true
> 0 == false => true
> '0' == false => true
> 0 == ' r t n t ‘ => true
> NaN == NaN ?

13. > new Array() + new Array() = “
> new Array() + new Object() = [object Object]
> 0 == ‘’ => true
> 0 == ‘0’ => true
> 0 == false => true
> '0' == false => true
> 0 == ' r t n t ‘ => true
> NaN == NaN => false

15. План дня
> История Web (продолжение)
> Синтаксис
> Работа с DOM
> Good Parts & Bad Parts
> Libraries
> Performance notes
> Домашнее задание

16. Цели
> Общее понимание языка
> Часто встречающиеся сложности
> Заинтересовать в изучении
> Best practice

17. Жалобы
> Программирование в браузере это ужас
> JS тормозит
> я плохо знаю JS
> JS просто большая куча ошибок

19. История: JavaScript
> Разработан за две недели
> Много чего бездумно скопировано
> Пострадал в результате войны браузеров
> Стандартизируется ECMA + W3C

21. Синтаксис

22. Синтаксис: Объекты
> неупорядоченный набор свойств
> var x = new Object()
> var y = {};

23. Синтаксис: JSON
> очень краткий и емкий формат
> {}, []
> свойства в кавычках

24. Синтаксис: JSON
{
“status” : “success”
“result” : [
12, 22, { “id”: 45, “name”: “Alex” }
]
}

25. Синтаксис: Функции
> функция тоже объект
> ключевое слово function
> аргументы и локальные переменные

26. Синтаксис: Функции
var myFunc = function(arg0, arg1) {
arguments[0] === arg0;//true
arguments[2] === 3;//true
};
myFunc(1, 2, 3);

27. Синтаксис: Функции
function iter(fn, array) {
for (var i = 0; i < array.length; i++) {
fn(array[i]);
}
};
iter(function(el){
alert(el);
},
[1, 2, 3, 4]);

28. Синтаксис: Глобальный контекст
> глобальные переменные это свойства
объекта window
> ключевое слово var
> ключевое слово delete

29. Синтаксис: Видимость переменных
> ключевое слово var (продолжение)
> цепочки скоупов
> ключевое слово with

30. Синтаксис: Видимость переменных

31. Синтаксис: Контекст
> ключевое слово this
> варианты контекста
> методы call и apply

32. Синтаксис: Контекст
function myFunc() {
console.log(this);
}
var obj = { method : myFunc };
myFunc(); // this === window
obj.method(); // this === obj
obj.method.call(document); // this === document
obj.method.apply(console); // this === console

33. Синтаксис: Прототипы и наследование
> наследуются объекты
> цепочки свойств
> перезапись и удаление свойств

34. Синтаксис: Прототипы и наследование
var x = {
name: ‘Alex’
};
var y = {};
assert(y.name === undefined);
y.prototype = x;
assert(y.name === x.name);
y.name = ‘Sasha’;
assert(y.name === ‘Sasha’);
assert(x.name === ‘Alex’);

35. Синтаксис: Прототипы и наследование
var JSProgrammer = {
skills: ‘javascript’
};
var LuxoftJsProgrammer = function(name, city) {
this.name = name;
this.city = city || ‘unknown’;
};
LuxoftJsProgrammer.prototype = JSProgrammer;
var me = new LuxoftJsProgrammer(‘Alex’);
assert(me instanceof LuxoftJsProgrammer);

36. Синтаксис: Прототипы и наследование

37. Синтаксис: Прототипы и наследование

38. Синтаксис: Прототипы и наследование

39. Синтаксис: eval() == evil
> вызывется в той же области видимости
> хуже по производительности
> потенциальная дыра в безопасности
> используйте заменители когда это возможно

40. Синтаксис: strict mode
> "use strict";
> запрещает «скрытые» ошибки
> улучшает безопасность кода
> не разрешает пользоваться
«неправильными» инструментами

41. Синтаксис: Вопросы

42. Работа с DOM

43. Document
> <div id=“myElementId”/>
> document.getElementById(“myElementId”);
> document.getElementsByTagName(“div”);
> xpath

44. Live collections
var divs = document.getElementsByTagName(“div”);
for (var i = 0; i < divs.length; i++) {
var el = divs[i];
el.parentNode.removeChild(el);// хитрая ошибка
}

45. Node
> Document, Element, TextNode
> appendChild/removeChild
> firstChild/lastChild
> childNodes
> getAttribute/setAttribute

46. Window
> setTimeout/clearTimeout
> концепция кадров
> Некоторый контроль над браузером
> alert/confirm/prompt

47. События
> addEventListener/attachEvent
> фазы просачивания и перехвата
> удаление обработчиков
> не используйте html аттрибуты!

48. События

49. События
function on(el, event, fn) {
if (el.addEventListener) {
el.addEventListener(event, fn, false);
} else if (el.attachEvent) {
el.attachEvent(‘on’ + event, fn);
} else {
// выдать ошибку – странный браузер
}
}
on(element, ‘click’, function() {
alert(‘Hi’);
});

50. События
element.addEventListener(‘click’, function() {
alert(‘hi’);
}, false);
// …
// скрытая ошибка
element.removeEventListener(‘click’, function() {
alert(‘hi’);
}, false);

51. События
var listener = function() {
alert(‘hi’);
};
element.addEventListener(‘click’, listener, false);
// …
element.removeEventListener(‘click’, listener, false);

52. Стили
> element.style.borderBottom = “1px solid red”;
> document.defaultView (хорошие браузеры)
> element.currentStyle (только IE)

53. Reflow
for (var i = 0; i < array.length; i++) {
element.innerHTML += array[i]; // возможен reflow
if (element.offsetWidth > 50) { // тут уж точно reflow
// do something
}
}

54. AJAX
> Asynchronous JavaScript And XML
> Баги и особенности в разных браузерах
> Используйте библиотечные реализации

55. Comet
> server push
> Периодически опрашиваем сервер
> Помним о висячих соединениях

56. DOM: Вопросы

57. Best practices

58. Bad parts
> Глобальные переменные
> Оператор +
> typeof
> with и eval
> Ложные массивы
> == и !=
> false, null, undefined, NaN
> Автоматическая вставка ;

59. Bad parts
function myFunc() {
return {
ok: true
};
}

60. Bad parts
function myFunc() {
return
{
ok: false
};
}

61. Bad parts
function myFunc() {
return; // упс
{
ok: false
};
}

62. Bad parts
function myFunc() {
return;
{ // блок
ok: false
};
}

63. Bad parts
function myFunc() {
return;
{
ok: false // label
};
}

64. Bad parts
function myFunc() {
return;
{
ok: false // бессмысленный оператор
};
}

65. Bad parts
function myFunc() {
return;
{
ok: false;
};
}

66. Bad parts
function myFunc() {
return;
{
ok: false;
}; // пустой оператор
}

67. Bad parts
function myFunc() {
return;
// код недостижим, но JS промолчит
{
ok: false;
};
}

68. Bad parts

69. Good parts
> функции, замыкания
> операторы || и &&
> JSON, {}, []
> динамические объекты и типы
> JSLint

70. Good parts

71. Патерны: локальная глобальность
(function(window, undefined) {
var document = window.document,
navigator = window.navigator,
location = window.location;
// ваш код
}) (window);

72. Патерны: синглетон
var singleton = (function() {
var privateVar = 3;
return {
publicFn: function(arg) {
return arg + privateVar;
}
};
}) ();
singleton.publicFn(5);

73. Патерны: callback
Array.prototype.each = function(fn) {
for (int i = 0; i < this.length; i++) {
fn.call(this, this[i], i);
}
};
var myNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
myNumbers.each(function(el, i) {
// this === myNumbers
});

74. Патерны: условные операторы
function(arg1, arg2) {
var name = arg1 || arg2 || ‘unknown’;
// вместо:
var other = arg1;
if (!other) {
other = arg2;
}
if (!other) {
other = ‘unknown’;
}
}

75. Патерны: длинный список параметров
// кривовато:
function fn(arg1,arg2, arg3, arg4, arg5, arg6 …);
// лучше:
function fn(cfg) {
cfg.arg1, cfg.arg2…
}
fn({
arg1: ‘ss’
});

76. Патерны: полиморфные функции
function ajax(url, fn) {
var method = ‘get’;
if (typeof(url) !== ‘string’) {
method = url.method;
fn = url.fn; url = url.url;
}
// do ajax …
}
ajax(‘myUrl’, myCallback);
ajax({
method: ‘post’,
url: ‘myUrl’,
fn: myCallback
});

77. Патерны: цепочечные вызовы
var obj = {
initialize : function() {
return this;
},
animate : function() {
return delayController;
}
};
obj.initialize().animate().oncomplete(function(){
// работа по завершению анимации
});

78. Performance
> контролируйте reflow
> помните о живых колекциях
> осторожно работайте с DOM
> пользуйтесь DocumentFragment
> используйте локальные переменные
> сжимайте свой код обфускатором

79. Отладка
> FireBug, Draggonfly, WebInspector
> IE: Visual Studio, Companion.JS, DebugBar
> debugger
> console.log()
> Старые добрые window.alert()

80. Best Practices: Вопросы

81. Libraries: JQuery
> Легковесная, простая, мощная
> Основана на селекторах близких к CSS
> Практикует «ненавязчивость»

82. Libraries: JQuery
$(“#myButtonId”).click( function(){
$.ajax(“/myActionUrl”).done(function(response) {
var el = $(“<div>”);
el.html(response);
$(“#results”).append(el);
});
});

83. Libraries: ExtJS
> Тяжелая библиотека компонентов
> Легка в освоении
> Хорошая архитектура
> Много компонентов out-of-box

84. Libraries: ExtJS
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'grid',
border: false,
columns: [{header: 'World'}],
store: Ext.create('Ext.data.ArrayStore', {})
}
}).show();

85. Libraries
> Dojo
> Prototype
> SmartClient
> GWT

86. Что упустили?
> Наследование (подробнее)
> Детали синтаксиса
> Система типов
> Многое другое

87. Что почитать?
> Дэвид Флэнаган: JavaScript. Подробное руководство
> JavaScript: The Good Parts. Douglas Crockford
> High Performance JavaScript. Nicholas C. Zakas
> http://jonraasch.com/blog/10-javascript-performance-boosting-
tips-from-nicholas-zakas
> http://learn.jquery.com/
> https://developer.mozilla.org/ru/
> http://w3fools.com

88. Что посмотреть?
> The Good Parts. http://www.youtube.com/watch?
v=hQVTIJBZook
> Speed up you javascript
http://www.youtube.com/watch?v=mHtdZgou0qU
> 10 things I’ve learned from jquery source
http://www.youtube.com/watch?v=i_qE1iAmjFg

89. Вопросы

90. Домашнее задание
> прикручиваем джаваскрипт к нашему
toprankу
> используем JQuery