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

Transcript

1. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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);
    Классовый подход
    

    View Slide

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
    Функциональный подход
    

    View Slide

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);
    Прототипный подход
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. 28
    LinkedIn Mobile
    

    View Slide

29. 29
    Firefox Mobile OS
    

    View Slide

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

    View Slide

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

    View Slide

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/
    
    

    View Slide

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

    View Slide

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

    View Slide