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

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

B827d6cfdfbcfce33700b0e6cc03e344?s=128

Mikhail Davydov

October 11, 2012
Tweet

Transcript

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