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. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. String

    View Slide

  7. 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 Slide

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

    View Slide

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

    View Slide

  10. Number

    View Slide

  11. 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 Slide

  12. 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 Slide

  13. 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 Slide

  14. Boolean

    View Slide

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

    View Slide

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

    View Slide

  17. Undefined

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. Object

    View Slide

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

    View Slide

  23. 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 Slide

  24. Function

    View Slide

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

    View Slide

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

    View Slide

  27. 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 Slide

  28. Array

    View Slide

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

    View Slide

  30. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  37. 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 Slide

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

    View Slide

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

    View Slide

  40. 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 Slide

  41. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide