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

Transcript

1. 1.

   None
2. 2.

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

3. 3.

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

   …
4. 4.

   4 Примитивы •  String, Boolean, Number •  Можно вызывать методы

   как у объекта •  В памяти хранятся как константы –  Менять нельзя –  Можно переписывать значение переменной
5. 5.

   5 Можно работать как с объектами 'string'.length; // 6 'name'.match(/^na/);

   // ["na"] 'name'.indexOf('a'); // 1 Работа с примитивами
6. 6.

   String

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

   8 "string"; "s'tri'ng"; 'str\'ing'; "str" + 'ing'; // "string"; "a,b,c".split(',');

   // ["a", "b", "c"] Пример
9. 9.

   9 // Конкатенация с "" 1 + ""; // "1"

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

    Number

11. 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
12. 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 Пример
13. 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 Привод к числу
14. 14.

    Boolean

15. 15.

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

16. 16.

    16 "1" == true; // true "" == true; //

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

    Undefined

18. 18.

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

19. 19.

    19 var a; typeof a === "undefined"; a = 0;

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

    20 Проверка на Undefined •  someVar === undefined; // Bad

    •  someVar == null; // Bad •  someVar === void 0; // Ok •  typeof someVar === "undefined";
21. 21.

    Object

22. 22.

    22 Object •  Записывается литералом {} •  Это хэш • 

    Имена полей – это строка или число •  Можно динамически менять поля –  У любого объекта –  Добавлять –  Удалять •  Null – нулевой, несуществующий объект
23. 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"; Пример
24. 24.

    Function

25. 25.

    25 Function •  Это вызываемый Объект •  Можно дописывать любые

    свойства •  Можно передавать куда угодно •  Нет проверки на число аргументов •  Легко перегружать •  Создает область видимости
26. 26.

    26 A(123); // Ok function A(b) { if (typeof b

    === "string") { throw new TypeError("should be number"); } return b * 2; } A.length; // 1 Пример функций
27. 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 Пример функций
28. 28.

    Array

29. 29.

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

    поля –  Не обязательно числовые
30. 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'; Пример
31. 31.

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

32. 32.

    32 Statement •  Блочное выражение –  if (){}, try{}catch(e){}, function

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

    33 Expression •  Оператор –  С одним аргументом typeof, !,

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

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

35. 35.

    35 Приведение типов •  Утиная типизация •  Зависит от оператора

    –  Оператор имеет определенный алгоритм •  Зависит от типа аргументов и мест
36. 36.

    36 Сильно перегружен: сложение чисел, конкатенация строк "2" + 3;

    // "23" 2 + 3; // 5 "2" + {}; // "2[object Object]" [] + []; // "" Пустая строка Пример: оператор +
37. 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
38. 38.

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

39. 39.

    39 Блок var •  Это Statement •  Объявляет имя переменной

    в текущей области видимости
40. 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
41. 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
42. 42.

    42 Оператор delete •  Это Expression •  Удаляет ссылку на

    объект, а не сам объект •  Возвращает Boolean –  true – ссылка удалилась –  false – ссылка осталась
43. 43.

    43 var a = {c: 1}, b = a; delete

    a; // false a = void 0; typeof b === "object"; delete b.c; // true Оператор delete – пример
44. 44.

    44 Оператор delete – в памяти a b Object c

    1   undefined   a = {c: 1} a = void 0 b = a delete b.c
45. 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" - Иначе смотрим по таблице
46. 46.

    46 typeof [] === "object"; // !!! typeof null ===

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

    47 Операторы || и && •  || – логическое или

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

    48 // Значения по умолчанию // - Рекомендуется к использованию

    ;-) function myObject(data) { data = data || {}; data.name = data.name || 'Default'; } myObject(); // {name: "Default"} Пример ||
49. 49.

    49 // Короткий if // - Запись не явная //

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

    50 Заключение •  Базовые типы –  String –  Number – 

    Boolean –  Undefined –  Object: Array, Function, … •  Statement •  Expression •  Хитрые операторы и блоки –  var –  typeof –  delete –  void
51. 51.

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