$30 off During Our Annual Pro Sale. View Details »

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

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

Mikhail Davydov

October 11, 2012
Tweet

More Decks by Mikhail Davydov

Other Decks in Education

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. 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
    [email protected]
    Спасибо

    View Slide