2. Михаил Давыдов
Разработчик JavaScript
JavaScript

3. 3
История
• Брендан Айх
• 1995 год, Netscape
• Цель – альтернатива VBScript
• Разработан за 15 дней
• Имя JavaScript – маркетинговый ход

4. 4
ECMAScript и JavaScript
• JavaScript (c) Oracle Corporation
• JScript=JavaScript
• Основывается на стандарте ECMAScript
• Текущая версия ECMAScript – 5.1
• Все пишут на ECMAScript – 3
• Новые версии сохраняют совместимость

5. Особенности языка
Виртуальная машина
Автоматическое приведение типов
Утиная типизация
Мультипарадигменный

6. 6
Виртуальная машина
DOM
VM
JS
Среда
Виртуалка
GUI
Интерфейс

7. 7
Автоматическое приведение типов
• 2 + “3” == “23”!
• 2 + 3 == 5!
• [] + 1 == “1”!
• if ([1, 2, 4]) {}!
• 0 == “0”!

8. 8
Если оно выглядит как утка, плавает как утка и крякает как утка, то это,
вероятно, утка и есть.
var Duck = {
lookLikeDuck: true,
quackLikeDuck: true,
swimLikeDuck: true,
};
if (a.lookLikeDuck &&
a.quackLikeDuck &&
a.swimLikeDuck) {
return “Это Утка!”;
}
Утиная типизация

9. 9
Мультипарадигменный
• Очень гибкий
• Функциональный подход
• Классовый подход
– Классов в JavaScript нет
• Прототипный подход

10. 10
Используется библиотека Mootools!
var Animal = new Class({
initialize: function(age){
this.age = age;
}
});
var Cat = new Class({
Extends: Animal,
initialize: function(name, age){
this.parent(age);
this.name = name;
}
});
var myCat = new Cat('Pewpew', 20);
alert(myCat.name);
alert(myCat.age);
Классовый подход

11. 11
Используется ECMAScript 5.1
var items = [1, 2, 3, 4, {}];
var result = items.filter(function (item) {
return typeof item === “number”;
})
.map(function (item) {
return item * 2;
})
.every(function (item) {
return item > 2;
});
alert(result); // false
Функциональный подход

12. 12
var Animal = function(age){
this.age = age;
};
var Cat = function(name, age){
Animal.call(this, age);
this.name = name;
}
Cat.prototype = new Animal();
var myCat = new Cat('Pewpew', 20);
alert(myCat.name);
alert(myCat.age);
Прототипный подход

13. Распространение
Поддержка языка
Распостраненность
Популярность

14. 14
Разработка языка
• Google
• Mozilla
• Microsoft
• Opera
• Apple
• Oracle
• …

15. 15
Распостраненность языка
• Есть практически в любом устройстве
– Компьютеры
– Телевизоры
– Планшеты
– Телефоны
• Есть и на сервере
– Серверный JavaScript – Node.js, Narwal, Rhino
– Встроенная Виртуальаня машина в БД
• Можно программировать железо
– Arduino + johnny-five
• Не только браузер
– Microsoft Office
– OpenOffice.org
– PDF

16. 16
Распостраненность языка
• Огромное число библиотек для всего
– DOM
– 2D графика
– 3D графика
– Работа со звуком
• Транслирование в JavaScript
– CoffeeScript
– Dart
– TypeScript
• Возможно это самая распостраненная
виртуальная машина

17. 17
Популярность языка
• Низкий порог входа
– Блокнот и браузер
• № 1 на Github
• TIOBE Index – 11 место
– Год назад 12

18. Проблемы языка
XSS
Открытый код
Асинхронное программирование

19. 19
Проблемы безопасности
• XSS
– Атака на пользовательскую страницу
– Хищение сессионных данных
– Порча данных
– Боты
– DDOS
• Тщательная обработка полей
– Важно проверять все входные данные
• Ваш скрипт не единственный на странице
– Плагины
– Пользовательские скрипты
– Боты
– Вирусы

20. 20
<form>
<input id="name">
</form>
My name is <span id="result"></span>
XSS
var inputName = document.getElementById("name"),
result = document.getElementById("result");
inputName.addEventListener("keyup", function () {
result.innerHTML = inputName.value;
}, false);
http://jsfiddle.net/FfXaJ/2/

21. 21
<img src="a" onerror="alert(0)"/>

22. Демки
2D
3D
Видео
Мобильные приложения
Firefox OS

23. 23
2D – Графики
http://www.humblesoftware.com/flotr2

24. 24
2D – Игры
http://playbiolab.com/

25. 25
3D – WebGL, Three.js
http://mrdoob.github.com/three.js/

26. 26
Видео
http://media.chikuyonok.ru/ambilight/

27. 27
PhoneGap
- Карты
- Контакты
- Звонки
- Компас
- GPS
- Акселометр
http://phonegap.com/

28. 28
LinkedIn Mobile

29. 29
Firefox Mobile OS

30. Наш рабочий процесс

31. 31
Инструменты
• http://jsfiddle.net/
• http://jslint.com/

32. 32
a=function(b)
{
if(b)return 1
};a();
Качество кода
var█a█=█function█(b)█{
if█(b)█{
return 1;
}
};
a();
http://jsfiddle.net/4En9B/
http://jsfiddle.net/4En9B/1/

33. 33
Задание 1
• Причесать ваш код из тестового задания
• Ваш скрипт должен лежать отдельно от html
• Нужно отформатировать код
– Использовать http://jslint.com/
– Или выбрать свой кодстайл
• Обратить внимание
– Наличие var
– Отступы рядом с =, операторами и function
– Или табы или пробелы
– Заменить new Array() на []; new Object() на {};

34. Михаил Давыдов
Разработчик JavaScript
azproduction@yandex-team.ru
Спасибо