Михаил Давыдов
Разработчик JavaScript
JavaScript
3
История
•  Брендан Айх
•  1995 год, Netscape
•  Цель – альтернатива VBScript
•  Разработан за 15 дней
•  Имя JavaScript – маркетинговый ход
4
ECMAScript и JavaScript
•  JavaScript (c) Oracle Corporation
•  JScript=JavaScript
•  Основывается на стандарте ECMAScript
•  Текущая версия ECMAScript – 5.1
•  Все пишут на ECMAScript – 3
•  Новые версии сохраняют совместимость
Особенности языка
Виртуальная машина
Автоматическое приведение типов
Утиная типизация
Мультипарадигменный
6
Виртуальная машина
DOM	
  VM	
  JS	
  
Среда	

Виртуалка	

GUI	
  
Интерфейс
7
Автоматическое приведение типов
•  2 + “3” == “23”!
•  2 + 3 == 5!
•  [] + 1 == “1”!
•  if ([1, 2, 4]) {}!
•  0 == “0”!
8
Если оно выглядит как утка, плавает как утка и крякает как утка, то это,
вероятно, утка и есть.
var Duck = {
lookLikeDuck: true,
quackLikeDuck: true,
swimLikeDuck: true,
};
if (a.lookLikeDuck &&
a.quackLikeDuck &&
a.swimLikeDuck) {
return “Это Утка!”;
}
Утиная типизация
9
Мультипарадигменный
•  Очень гибкий
•  Функциональный подход
•  Классовый подход
–  Классов в JavaScript нет
•  Прототипный подход
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
Используется 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
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);
Прототипный подход
Распространение
Поддержка языка
Распостраненность
Популярность
14
Разработка языка
•  Google
•  Mozilla
•  Microsoft
•  Opera
•  Apple
•  Oracle
•  …
15
Распостраненность языка
•  Есть практически в любом устройстве
–  Компьютеры
–  Телевизоры
–  Планшеты
–  Телефоны
•  Есть и на сервере
–  Серверный JavaScript – Node.js, Narwal, Rhino
–  Встроенная Виртуальаня машина в БД
•  Можно программировать железо
–  Arduino + johnny-five
•  Не только браузер
–  Microsoft Office
–  OpenOffice.org
–  PDF
16
Распостраненность языка
•  Огромное число библиотек для всего
–  DOM
–  2D графика
–  3D графика
–  Работа со звуком
•  Транслирование в JavaScript
–  CoffeeScript
–  Dart
–  TypeScript
•  Возможно это самая распостраненная
виртуальная машина
17
Популярность языка
•  Низкий порог входа
–  Блокнот и браузер
•  № 1 на Github
•  TIOBE Index – 11 место
–  Год назад 12
Проблемы языка
XSS
Открытый код
Асинхронное программирование
19
Проблемы безопасности
•  XSS
–  Атака на пользовательскую страницу
–  Хищение сессионных данных
–  Порча данных
–  Боты
–  DDOS
•  Тщательная обработка полей
–  Важно проверять все входные данные
•  Ваш скрипт не единственный на странице
–  Плагины
–  Пользовательские скрипты
–  Боты
–  Вирусы
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
<img src="a" onerror="alert(0)"/>
Демки
2D
3D
Видео
Мобильные приложения
Firefox OS
23
2D – Графики
http://www.humblesoftware.com/flotr2
24
2D – Игры
http://playbiolab.com/
25
3D – WebGL, Three.js
http://mrdoob.github.com/three.js/
26
Видео
http://media.chikuyonok.ru/ambilight/
27
PhoneGap
- Карты
- Контакты
- Звонки
- Компас
- GPS
- Акселометр
http://phonegap.com/
28
LinkedIn Mobile
29
Firefox Mobile OS
Наш рабочий процесс
31
Инструменты
• http://jsfiddle.net/
• http://jslint.com/
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
Задание 1
•  Причесать ваш код из тестового задания
•  Ваш скрипт должен лежать отдельно от html
•  Нужно отформатировать код
–  Использовать http://jslint.com/
–  Или выбрать свой кодстайл
•  Обратить внимание
–  Наличие var
–  Отступы рядом с =, операторами и function
–  Или табы или пробелы
–  Заменить new Array() на []; new Object() на {};
Михаил Давыдов
Разработчик JavaScript
azproduction@yandex-team.ru
Спасибо

JavaScript. Introduction (in russian)