javascript. introduction (in russian)

Михаил Давыдов Разработчик 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

Спасибо