КРиПИ - Введение в JavaScript

Transcript

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 Спасибо