Upgrade to Pro — share decks privately, control downloads, hide ads and more …

КРиПИ - Основы JavaScript

КРиПИ - Основы JavaScript

Mikhail Davydov

October 11, 2012
Tweet

More Decks by Mikhail Davydov

Other Decks in Education

Transcript

  1. Михаил Давыдов
    Разработчик JavaScript
    JavaScript
    Основы

    View full-size slide

  2. Базовые типы
    String
    Number
    Boolean
    Undefined
    Object
    - Function, Array, …

    View full-size slide

  3. 4
    Примитивы
    •  String, Boolean, Number
    •  Можно вызывать методы как у объекта
    •  В памяти хранятся как константы
    –  Менять нельзя
    –  Можно переписывать значение переменной

    View full-size slide

  4. 5
    Можно работать как с объектами
    'string'.length; // 6
    'name'.match(/^na/); // ["na"]
    'name'.indexOf('a'); // 1
    Работа с примитивами

    View full-size slide

  5. 7
    String
    •  Создается из литерала "string" или 'string'
    •  Внутренняя кодировка UTF-8
    –  "δϟόεΫϦϓτ".length – 8
    –  Исключение – символы UTF-16
    •  К элементам можно обращаться как в
    массиве
    –  Кроме IE6 - .charAt(0)
    •  Строки можно складывать через +
    https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String

    View full-size slide

  6. 8
    "string";
    "s'tri'ng";
    'str\'ing';
    "str" + 'ing'; // "string";
    "a,b,c".split(','); // ["a", "b", "c"]
    Пример

    View full-size slide

  7. 9
    // Конкатенация с ""
    1 + ""; // "1"
    // Можно привести явно
    1.toString(); // "1"
    String(1); // "object"
    Приведение к строке

    View full-size slide

  8. 11
    Number
    •  Все числа с плавающей точкой
    •  Можно записывать в 4 вариантах
    –  В десятеричной системе 105
    –  В 16-ричной 0x10
    –  В 8-ричной 010 – Deprecated!
    –  В экспоненциальной 1.5e3
    •  NaN – Not a Number
    •  +Infinity, -Infinity
    •  Объект Math
    –  .floor() .random()
    •  isNaN(), isFinite(), parseInt()
    https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Number

    View full-size slide

  9. 12
    10 + 0x10; // 26
    5 / 2 = 2.5;
    (10.15158).toFixed(2); // "10.15" – строка!
    .3; // == 0.3
    5.; // 5
    Math.round(5.1); // 5
    isNaN(0 / 0); // true
    isFinite(1 / 0); // false
    Пример

    View full-size slide

  10. 13
    // parseInt
    parseInt("10", 10); // 10
    parseInt("a", 10); // NaN
    parseInt("a", 16); // 10
    parseInt("01011", 2); // 11
    parseInt("10px", 10); // 10!!
    // Можно проще
    +"10"; // 10
    Привод к числу

    View full-size slide

  11. 15
    Boolean
    •  Записывается литералами true, false

    View full-size slide

  12. 16
    "1" == true; // true
    "" == true; // false
    !!1; // true
    Привод к булеану

    View full-size slide

  13. 18
    Undefined
    •  Этот тип имеют все переменные без
    значения

    View full-size slide

  14. 19
    var a;
    typeof a === "undefined";
    a = 0;
    typeof a === "number";
    function b(c){
    typeof c === "undefined";
    }
    b();
    Пример

    View full-size slide

  15. 20
    Проверка на Undefined
    •  someVar === undefined; // Bad
    •  someVar == null; // Bad
    •  someVar === void 0; // Ok
    •  typeof someVar === "undefined";

    View full-size slide

  16. 22
    Object
    •  Записывается литералом {}
    •  Это хэш
    •  Имена полей – это строка или число
    •  Можно динамически менять поля
    –  У любого объекта
    –  Добавлять
    –  Удалять
    •  Null – нулевой, несуществующий объект

    View full-size slide

  17. 23
    var a = {
    "b": 123,
    '--c': function () {
    return 1;
    }
    d: {}
    };
    a.d; // {}
    a['--c'](); // 1
    a['--' + 'c'](); // 1
    a.b === 123; // true
    a[0] = 45;
    typeof a[0] === "number";
    typeof a[1] === "undefined";
    Пример

    View full-size slide

  18. 25
    Function
    •  Это вызываемый Объект
    •  Можно дописывать любые свойства
    •  Можно передавать куда угодно
    •  Нет проверки на число аргументов
    •  Легко перегружать
    •  Создает область видимости

    View full-size slide

  19. 26
    A(123); // Ok
    function A(b) {
    if (typeof b === "string") {
    throw new TypeError("should be number");
    }
    return b * 2;
    }
    A.length; // 1
    Пример функций

    View full-size slide

  20. 27
    A(123); // Error – функции еще нет
    var A = function(b) {
    if (typeof b === "string") {
    throw new TypeError("should be number");
    }
    return b * 2;
    }
    A(1); // Ok
    A.length; // 1
    Пример функций

    View full-size slide

  21. 29
    Array
    •  Это специальный Объект
    •  Можно дописывать любые поля
    –  Не обязательно числовые

    View full-size slide

  22. 30
    typeof [] === "object"; // !!!
    var a = [1, 2, 3, 4];
    a[1] *= 2;
    a.length; // 4
    a + ''; // "1,2,3,4"
    a.push(5); // .splice(), .pop(), .shift(), .unshift() ...
    a.map(function (item) {
    return Math.sin(Math.PI / item);
    });
    a['pewpew-ololo'] = 'ufo';
    Пример

    View full-size slide

  23. Операторы и блоки
    Expression (Выражение, Оператор),
    Statement (Блочное выражение, Блок)

    View full-size slide

  24. 32
    Statement
    •  Блочное выражение
    –  if (){}, try{}catch(e){}, function a(){}
    •  Директива интерпретатору
    –  return, throw, break, continue, var, …
    •  Может включать другие блочные выражения
    •  Может включать выражения
    •  Не возвращает значение
    •  Не может быть аргументом Expression
    •  Можно сделать из Expression – Expression;
    http://es5.github.com/#x12

    View full-size slide

  25. 33
    Expression
    •  Оператор
    –  С одним аргументом typeof, !, (), ++, --, new, +,…
    –  С двумя ==, ===, >, <, instanceof, +, -,…
    –  С тремя a?b:c,…
    –  Вызов функции
    –  Оператор запятая
    •  Может включать другие операторы
    •  Не может включать Statement
    •  Возвращает значение
    •  Может быть в составе Statement
    http://es5.github.com/#x11

    View full-size slide

  26. Приведение типов

    View full-size slide

  27. 35
    Приведение типов
    •  Утиная типизация
    •  Зависит от оператора
    –  Оператор имеет определенный алгоритм
    •  Зависит от типа аргументов и мест

    View full-size slide

  28. 36
    Сильно перегружен: сложение чисел, конкатенация строк
    "2" + 3; // "23"
    2 + 3; // 5
    "2" + {}; // "2[object Object]"
    [] + []; // "" Пустая строка
    Пример: оператор +

    View full-size slide

  29. 37
    The Abstract Equality Comparison Algorithm
    http://es5.github.com/#x11.9.3
    '' === '0' // false
    0 === '' // false
    0 === '0' // false
    false === undefined // false
    false === null // false
    null === undefined // false
    +0 === -0 // true
    Операторы == и ===
    '' == '0' // false
    0 == '' // true
    0 == '0' // true
    false == undefined // false
    false == null // false
    null == undefined // true
    The Strict Equality Comparison Algorithm
    http://es5.github.com/#x11.9.6

    View full-size slide

  30. Важные операторы
    var
    delete
    typeof
    || и &&

    View full-size slide

  31. 39
    Блок var
    •  Это Statement
    •  Объявляет имя переменной в текущей
    области видимости

    View full-size slide

  32. 40
    function A() {
    // Переменная i существует уже тут!
    typeof i === "undefined";
    i = 5; // OK!
    for (var i = 0; i < 10; i++) {
    console.log(i);
    }
    }
    // Не выходит за границы
    typeof i === "undefined";
    A();
    Пример var

    View full-size slide

  33. 41
    Фактически это выглядит так
    function A() {
    var i; // <<<
    typeof i === "undefined";
    i = 5; // OK!
    for (i = 0; i < 10; i++) { // <<<
    console.log(i);
    }
    }
    // Не выходит за границы
    typeof i === "undefined";
    A();
    Пример var

    View full-size slide

  34. 42
    Оператор delete
    •  Это Expression
    •  Удаляет ссылку на объект, а не сам объект
    •  Возвращает Boolean
    –  true – ссылка удалилась
    –  false – ссылка осталась

    View full-size slide

  35. 43
    var a = {c: 1},
    b = a;
    delete a; // false
    a = void 0;
    typeof b === "object";
    delete b.c; // true
    Оператор delete – пример

    View full-size slide

  36. 44
    Оператор delete – в памяти
    a
    b
    Object
    c
    1  
    undefined  
    a = {c: 1}
    a = void 0
    b = a
    delete b.c

    View full-size slide

  37. 45
    Оператор typeof
    Внутренний тип* Результат
    Undefined "undefined"
    Null "object"
    Boolean "boolean"
    Number "number"
    String "string"
    Object "object"
    Function "function"
    Array "object"
    http://es5.github.com/#x11.4.3
    Это Expression, возвращает String.
    Алгоритм
    - Ссылка не достижима (IsUnresolvableReference) – возвращаем "undefined"
    - Иначе смотрим по таблице

    View full-size slide

  38. 46
    typeof [] === "object"; // !!!
    typeof null === "object"; // !!!
    typeof NaN === "number"; // !!!
    typeof Infinity === "number"; // Ok
    typeof {} === "object"; // Ok
    typeof function(){} === ”function”;
    Пример

    View full-size slide

  39. 47
    Операторы || и &&
    •  || – логическое или
    –  Если первый аргумент можно привести к true – возвращаем его
    –  Иначе возвращаем/выполняем второй
    –  В JS применяется для установки значения по умолчанию
    •  && – логическое и
    –  Если первый аргумент приводится к false – возвращаем его
    –  Иначе возвращаем/выполняем второй
    –  Применяется для "коротких" if()

    View full-size slide

  40. 48
    // Значения по умолчанию
    // - Рекомендуется к использованию ;-)
    function myObject(data) {
    data = data || {};
    data.name = data.name || 'Default';
    }
    myObject(); // {name: "Default"}
    Пример ||

    View full-size slide

  41. 49
    // Короткий if
    // - Запись не явная
    // - НЕ рекомендуется использовать
    var a = true;
    if (a) {
    alert('ok');
    }
    // Это аналогично
    a && alert('ok');
    Пример &&

    View full-size slide

  42. 50
    Заключение
    •  Базовые типы
    –  String
    –  Number
    –  Boolean
    –  Undefined
    –  Object: Array, Function, …
    •  Statement
    •  Expression
    •  Хитрые операторы и блоки
    –  var
    –  typeof
    –  delete
    –  void

    View full-size slide

  43. Михаил Давыдов
    Разработчик JavaScript
    [email protected]
    azproduction
    Спасибо

    View full-size slide