SlideShare a Scribd company logo
1 of 51
Download to read offline
Михаил Давыдов
Разработчик JavaScript
JavaScript
Основы
Базовые типы
String
Number
Boolean
Undefined
Object
- Function, Array, …
4
Примитивы
•  String, Boolean, Number
•  Можно вызывать методы как у объекта
•  В памяти хранятся как константы
–  Менять нельзя
–  Можно переписывать значение переменной
5
Можно работать как с объектами
'string'.length; // 6
'name'.match(/^na/); // ["na"]
'name'.indexOf('a'); // 1
Работа с примитивами
String
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
"string";
"s'tri'ng";
'str'ing';
"str" + 'ing'; // "string";
"a,b,c".split(','); // ["a", "b", "c"]
Пример
9
// Конкатенация с ""
1 + ""; // "1"
// Можно привести явно
1.toString(); // "1"
String(1); // "object"
Приведение к строке
Number
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
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
// parseInt
parseInt("10", 10); // 10
parseInt("a", 10); // NaN
parseInt("a", 16); // 10
parseInt("01011", 2); // 11
parseInt("10px", 10); // 10!!
// Можно проще
+"10"; // 10
Привод к числу
Boolean
15
Boolean
•  Записывается литералами true, false
16
"1" == true; // true
"" == true; // false
!!1; // true
Привод к булеану
Undefined
18
Undefined
•  Этот тип имеют все переменные без
значения
19
var a;
typeof a === "undefined";
a = 0;
typeof a === "number";
function b(c){
typeof c === "undefined";
}
b();
Пример
20
Проверка на Undefined
•  someVar === undefined; // Bad
•  someVar == null; // Bad
•  someVar === void 0; // Ok
•  typeof someVar === "undefined";
Object
22
Object
•  Записывается литералом {}
•  Это хэш
•  Имена полей – это строка или число
•  Можно динамически менять поля
–  У любого объекта
–  Добавлять
–  Удалять
•  Null – нулевой, несуществующий объект
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";
Пример
Function
25
Function
•  Это вызываемый Объект
•  Можно дописывать любые свойства
•  Можно передавать куда угодно
•  Нет проверки на число аргументов
•  Легко перегружать
•  Создает область видимости
26
A(123); // Ok
function A(b) {
if (typeof b === "string") {
throw new TypeError("should be number");
}
return b * 2;
}
A.length; // 1
Пример функций
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
Пример функций
Array
29
Array
•  Это специальный Объект
•  Можно дописывать любые поля
–  Не обязательно числовые
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';
Пример
Операторы и блоки
Expression (Выражение, Оператор),
Statement (Блочное выражение, Блок)
32
Statement
•  Блочное выражение
–  if (){}, try{}catch(e){}, function a(){}
•  Директива интерпретатору
–  return, throw, break, continue, var, …
•  Может включать другие блочные выражения
•  Может включать выражения
•  Не возвращает значение
•  Не может быть аргументом Expression
•  Можно сделать из Expression – Expression;
http://es5.github.com/#x12
33
Expression
•  Оператор
–  С одним аргументом typeof, !, (), ++, --, new, +,…
–  С двумя ==, ===, >, <, instanceof, +, -,…
–  С тремя a?b:c,…
–  Вызов функции
–  Оператор запятая
•  Может включать другие операторы
•  Не может включать Statement
•  Возвращает значение
•  Может быть в составе Statement
http://es5.github.com/#x11
Приведение типов
35
Приведение типов
•  Утиная типизация
•  Зависит от оператора
–  Оператор имеет определенный алгоритм
•  Зависит от типа аргументов и мест
36
Сильно перегружен: сложение чисел, конкатенация строк
"2" + 3; // "23"
2 + 3; // 5
"2" + {}; // "2[object Object]"
[] + []; // "" Пустая строка
Пример: оператор +
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
Важные операторы
var
delete
typeof
|| и &&
39
Блок var
•  Это Statement
•  Объявляет имя переменной в текущей
области видимости
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
Фактически это выглядит так
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
Оператор delete
•  Это Expression
•  Удаляет ссылку на объект, а не сам объект
•  Возвращает Boolean
–  true – ссылка удалилась
–  false – ссылка осталась
43
var a = {c: 1},
b = a;
delete a; // false
a = void 0;
typeof b === "object";
delete b.c; // true
Оператор delete – пример
44
Оператор delete – в памяти
a
b
Object
c
1	
  
undefined	
  
a = {c: 1}
a = void 0
b = a
delete b.c
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
typeof [] === "object"; // !!!
typeof null === "object"; // !!!
typeof NaN === "number"; // !!!
typeof Infinity === "number"; // Ok
typeof {} === "object"; // Ok
typeof function(){} === ”function”;
Пример
47
Операторы || и &&
•  || – логическое или
–  Если первый аргумент можно привести к true – возвращаем его
–  Иначе возвращаем/выполняем второй
–  В JS применяется для установки значения по умолчанию
•  && – логическое и
–  Если первый аргумент приводится к false – возвращаем его
–  Иначе возвращаем/выполняем второй
–  Применяется для "коротких" if()
48
// Значения по умолчанию
// - Рекомендуется к использованию ;-)
function myObject(data) {
data = data || {};
data.name = data.name || 'Default';
}
myObject(); // {name: "Default"}
Пример ||
49
// Короткий if
// - Запись не явная
// - НЕ рекомендуется использовать
var a = true;
if (a) {
alert('ok');
}
// Это аналогично
a && alert('ok');
Пример &&
50
Заключение
•  Базовые типы
–  String
–  Number
–  Boolean
–  Undefined
–  Object: Array, Function, …
•  Statement
•  Expression
•  Хитрые операторы и блоки
–  var
–  typeof
–  delete
–  void
Михаил Давыдов
Разработчик JavaScript
azproduction@yandex-team.ru
azproduction
Спасибо

More Related Content

What's hot

JavaScript. Loops and functions (in russian)
JavaScript. Loops and functions (in russian)JavaScript. Loops and functions (in russian)
JavaScript. Loops and functions (in russian)
Mikhail Davydov
 
Объектно-Ориентированное Программирование на C++, Лекции 1 и 2
Объектно-Ориентированное Программирование на C++, Лекции 1 и 2Объектно-Ориентированное Программирование на C++, Лекции 1 и 2
Объектно-Ориентированное Программирование на C++, Лекции 1 и 2
Dima Dzuba
 
Cpp/cli types
Cpp/cli typesCpp/cli types
Cpp/cli types
mcroitor
 
Интуит. Разработка приложений для iOS. Лекция 3. Views
Интуит. Разработка приложений для iOS. Лекция 3. ViewsИнтуит. Разработка приложений для iOS. Лекция 3. Views
Интуит. Разработка приложений для iOS. Лекция 3. Views
Глеб Тарасов
 
Cpp/cli particularities
Cpp/cli particularitiesCpp/cli particularities
Cpp/cli particularities
mcroitor
 

What's hot (18)

Haskell
HaskellHaskell
Haskell
 
Объектно-Ориентированное Программирование на C++, Лекции 3 и 4
Объектно-Ориентированное Программирование на C++, Лекции  3 и 4 Объектно-Ориентированное Программирование на C++, Лекции  3 и 4
Объектно-Ориентированное Программирование на C++, Лекции 3 и 4
 
JavaScript. Loops and functions (in russian)
JavaScript. Loops and functions (in russian)JavaScript. Loops and functions (in russian)
JavaScript. Loops and functions (in russian)
 
5.1 Перегрузка операторов
5.1 Перегрузка операторов5.1 Перегрузка операторов
5.1 Перегрузка операторов
 
Erlang
ErlangErlang
Erlang
 
Статический анализатор кода для InterSystems Caché Object Script
Статический анализатор кода для InterSystems Caché Object ScriptСтатический анализатор кода для InterSystems Caché Object Script
Статический анализатор кода для InterSystems Caché Object Script
 
Concepts lite
Concepts liteConcepts lite
Concepts lite
 
Javascript 1
Javascript 1Javascript 1
Javascript 1
 
Статический анализ кода
Статический анализ кода Статический анализ кода
Статический анализ кода
 
Decorators' recipes
Decorators' recipesDecorators' recipes
Decorators' recipes
 
Догнать и перегнать boost::lexical_cast
Догнать и перегнать boost::lexical_castДогнать и перегнать boost::lexical_cast
Догнать и перегнать boost::lexical_cast
 
Объектно-Ориентированное Программирование на C++, Лекции 1 и 2
Объектно-Ориентированное Программирование на C++, Лекции 1 и 2Объектно-Ориентированное Программирование на C++, Лекции 1 и 2
Объектно-Ориентированное Программирование на C++, Лекции 1 и 2
 
Cpp/cli types
Cpp/cli typesCpp/cli types
Cpp/cli types
 
Объектно-ориентированное программирование. Лекция 5 и 6
Объектно-ориентированное программирование. Лекция 5 и 6Объектно-ориентированное программирование. Лекция 5 и 6
Объектно-ориентированное программирование. Лекция 5 и 6
 
Интуит. Разработка приложений для iOS. Лекция 3. Views
Интуит. Разработка приложений для iOS. Лекция 3. ViewsИнтуит. Разработка приложений для iOS. Лекция 3. Views
Интуит. Разработка приложений для iOS. Лекция 3. Views
 
Объектно-ориентированное программирование. Лекции 9 и 10
Объектно-ориентированное программирование. Лекции 9 и 10Объектно-ориентированное программирование. Лекции 9 и 10
Объектно-ориентированное программирование. Лекции 9 и 10
 
Cpp/cli particularities
Cpp/cli particularitiesCpp/cli particularities
Cpp/cli particularities
 
Очень вкусный фрукт Guava
Очень вкусный фрукт GuavaОчень вкусный фрукт Guava
Очень вкусный фрукт Guava
 

Viewers also liked

Олександр Пронін "Ідеальний sales-менеджер - hard-скіли і стальні яйця"
Олександр Пронін "Ідеальний sales-менеджер -  hard-скіли і стальні яйця"Олександр Пронін "Ідеальний sales-менеджер -  hard-скіли і стальні яйця"
Олександр Пронін "Ідеальний sales-менеджер - hard-скіли і стальні яйця"
Dakiry
 

Viewers also liked (9)

Основы ооп на языке C#. Часть 2. базовый синтаксис.
Основы ооп на языке C#. Часть 2. базовый синтаксис.Основы ооп на языке C#. Часть 2. базовый синтаксис.
Основы ооп на языке C#. Часть 2. базовый синтаксис.
 
основы ооп на языке C#. часть 1. введение в программирование
основы ооп на языке C#. часть 1. введение в программированиеосновы ооп на языке C#. часть 1. введение в программирование
основы ооп на языке C#. часть 1. введение в программирование
 
Оптимизация JavaScript в Drupal
Оптимизация JavaScript в DrupalОптимизация JavaScript в Drupal
Оптимизация JavaScript в Drupal
 
Эффективно закупаем трафик и правильно оцениваем его качество
Эффективно закупаем трафик и правильно оцениваем его качествоЭффективно закупаем трафик и правильно оцениваем его качество
Эффективно закупаем трафик и правильно оцениваем его качество
 
JQuery
JQueryJQuery
JQuery
 
Javascript in big project
Javascript in big projectJavascript in big project
Javascript in big project
 
Web-design: курс для новичков. День второй.
Web-design: курс для новичков. День второй.Web-design: курс для новичков. День второй.
Web-design: курс для новичков. День второй.
 
Олександр Пронін "Ідеальний sales-менеджер - hard-скіли і стальні яйця"
Олександр Пронін "Ідеальний sales-менеджер -  hard-скіли і стальні яйця"Олександр Пронін "Ідеальний sales-менеджер -  hard-скіли і стальні яйця"
Олександр Пронін "Ідеальний sales-менеджер - hard-скіли і стальні яйця"
 
2 6 1_buro-pirogova_karimova Золотой век Landing Page: как максимально повыси...
2 6 1_buro-pirogova_karimova Золотой век Landing Page: как максимально повыси...2 6 1_buro-pirogova_karimova Золотой век Landing Page: как максимально повыси...
2 6 1_buro-pirogova_karimova Золотой век Landing Page: как максимально повыси...
 

Similar to JavaScript. Basics (in russian)

Сергей Пузанков — XPath
Сергей Пузанков — XPathСергей Пузанков — XPath
Сергей Пузанков — XPath
Yandex
 
Евгений Рыжков, Андрей Карпов Как потратить 10 лет на разработку анализатора ...
Евгений Рыжков, Андрей Карпов Как потратить 10 лет на разработку анализатора ...Евгений Рыжков, Андрей Карпов Как потратить 10 лет на разработку анализатора ...
Евгений Рыжков, Андрей Карпов Как потратить 10 лет на разработку анализатора ...
Platonov Sergey
 
Solit 2014, EcmaScript 6 in Action, Трухин Юрий
Solit 2014, EcmaScript 6 in Action, Трухин Юрий Solit 2014, EcmaScript 6 in Action, Трухин Юрий
Solit 2014, EcmaScript 6 in Action, Трухин Юрий
solit
 
статический анализ кода
статический анализ кодастатический анализ кода
статический анализ кода
Andrey Karpov
 
Вторая лекция по основам ruby для студентов itc73.ru
Вторая лекция по основам ruby для студентов itc73.ruВторая лекция по основам ruby для студентов itc73.ru
Вторая лекция по основам ruby для студентов itc73.ru
Alexander Shcherbinin
 

Similar to JavaScript. Basics (in russian) (20)

C#. От основ к эффективному коду
C#. От основ к эффективному кодуC#. От основ к эффективному коду
C#. От основ к эффективному коду
 
Михаил Давыдов - Транспорт, ajax
Михаил Давыдов - Транспорт, ajaxМихаил Давыдов - Транспорт, ajax
Михаил Давыдов - Транспорт, ajax
 
Bytecode
BytecodeBytecode
Bytecode
 
Сергей Пузанков — XPath
Сергей Пузанков — XPathСергей Пузанков — XPath
Сергей Пузанков — XPath
 
Принципы работы статического анализатора кода PVS-Studio
Принципы работы статического анализатора кода PVS-StudioПринципы работы статического анализатора кода PVS-Studio
Принципы работы статического анализатора кода PVS-Studio
 
OOP in JavaScript - Presentation by Eugene Kalosha
OOP in JavaScript - Presentation by Eugene KaloshaOOP in JavaScript - Presentation by Eugene Kalosha
OOP in JavaScript - Presentation by Eugene Kalosha
 
Объектное и прототипное программирование в Javascript
Объектное и прототипное программирование в JavascriptОбъектное и прототипное программирование в Javascript
Объектное и прототипное программирование в Javascript
 
Groovy jug-moscow-part 1
Groovy jug-moscow-part 1Groovy jug-moscow-part 1
Groovy jug-moscow-part 1
 
основы Java переменные, циклы
основы Java   переменные, циклыосновы Java   переменные, циклы
основы Java переменные, циклы
 
Командная разработка “толстых клиентов”
Командная разработка “толстых клиентов”Командная разработка “толстых клиентов”
Командная разработка “толстых клиентов”
 
Евгений Рыжков, Андрей Карпов Как потратить 10 лет на разработку анализатора ...
Евгений Рыжков, Андрей Карпов Как потратить 10 лет на разработку анализатора ...Евгений Рыжков, Андрей Карпов Как потратить 10 лет на разработку анализатора ...
Евгений Рыжков, Андрей Карпов Как потратить 10 лет на разработку анализатора ...
 
Survive with OOP
Survive with OOPSurvive with OOP
Survive with OOP
 
Ecma script 6 in action
Ecma script 6 in actionEcma script 6 in action
Ecma script 6 in action
 
Solit 2014, EcmaScript 6 in Action, Трухин Юрий
Solit 2014, EcmaScript 6 in Action, Трухин Юрий Solit 2014, EcmaScript 6 in Action, Трухин Юрий
Solit 2014, EcmaScript 6 in Action, Трухин Юрий
 
Зачем нужна Scala?
Зачем нужна Scala?Зачем нужна Scala?
Зачем нужна Scala?
 
статический анализ кода
статический анализ кодастатический анализ кода
статический анализ кода
 
Выжить с помощью ООП. Максим Гопей
Выжить с помощью ООП. Максим ГопейВыжить с помощью ООП. Максим Гопей
Выжить с помощью ООП. Максим Гопей
 
Вторая лекция по основам ruby для студентов itc73.ru
Вторая лекция по основам ruby для студентов itc73.ruВторая лекция по основам ruby для студентов itc73.ru
Вторая лекция по основам ruby для студентов itc73.ru
 
Intro to Swift techitout
Intro to Swift techitoutIntro to Swift techitout
Intro to Swift techitout
 
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
 

More from Mikhail Davydov

JavaScript. Event Model (in russian)
JavaScript. Event Model (in russian)JavaScript. Event Model (in russian)
JavaScript. Event Model (in russian)
Mikhail Davydov
 
Ajax and Transports (in russian)
Ajax and Transports (in russian)Ajax and Transports (in russian)
Ajax and Transports (in russian)
Mikhail Davydov
 
Introduction in Node.js (in russian)
Introduction in Node.js (in russian)Introduction in Node.js (in russian)
Introduction in Node.js (in russian)
Mikhail Davydov
 
JavaScript. OOP (in russian)
JavaScript. OOP (in russian)JavaScript. OOP (in russian)
JavaScript. OOP (in russian)
Mikhail Davydov
 
JavaScript. Event Loop and Timers (in russian)
JavaScript. Event Loop and Timers (in russian)JavaScript. Event Loop and Timers (in russian)
JavaScript. Event Loop and Timers (in russian)
Mikhail Davydov
 
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Mikhail Davydov
 
JavaScript. Introduction (in russian)
JavaScript. Introduction (in russian)JavaScript. Introduction (in russian)
JavaScript. Introduction (in russian)
Mikhail Davydov
 
JavaScript. Async (in Russian)
JavaScript. Async (in Russian)JavaScript. Async (in Russian)
JavaScript. Async (in Russian)
Mikhail Davydov
 
JavaScript on frontend and backend (in Russian
JavaScript on frontend and backend (in RussianJavaScript on frontend and backend (in Russian
JavaScript on frontend and backend (in Russian
Mikhail Davydov
 
Making Scalable JavaScript Application
Making Scalable JavaScript ApplicationMaking Scalable JavaScript Application
Making Scalable JavaScript Application
Mikhail Davydov
 

More from Mikhail Davydov (15)

Components now! (in russian)
Components now! (in russian)Components now! (in russian)
Components now! (in russian)
 
JavaScript. Event Model (in russian)
JavaScript. Event Model (in russian)JavaScript. Event Model (in russian)
JavaScript. Event Model (in russian)
 
Code Style (in russian)
Code Style (in russian)Code Style (in russian)
Code Style (in russian)
 
Ajax and Transports (in russian)
Ajax and Transports (in russian)Ajax and Transports (in russian)
Ajax and Transports (in russian)
 
Introduction in Node.js (in russian)
Introduction in Node.js (in russian)Introduction in Node.js (in russian)
Introduction in Node.js (in russian)
 
JavaScript. OOP (in russian)
JavaScript. OOP (in russian)JavaScript. OOP (in russian)
JavaScript. OOP (in russian)
 
JavaScript. Event Loop and Timers (in russian)
JavaScript. Event Loop and Timers (in russian)JavaScript. Event Loop and Timers (in russian)
JavaScript. Event Loop and Timers (in russian)
 
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
 
JavaScript. Introduction (in russian)
JavaScript. Introduction (in russian)JavaScript. Introduction (in russian)
JavaScript. Introduction (in russian)
 
JavaScript. Async (in Russian)
JavaScript. Async (in Russian)JavaScript. Async (in Russian)
JavaScript. Async (in Russian)
 
JavaScript on frontend and backend (in Russian
JavaScript on frontend and backend (in RussianJavaScript on frontend and backend (in Russian
JavaScript on frontend and backend (in Russian
 
Components now!
Components now! Components now!
Components now!
 
Dump-IT Загрузка и инициализация JavaScript
Dump-IT Загрузка и инициализация JavaScriptDump-IT Загрузка и инициализация JavaScript
Dump-IT Загрузка и инициализация JavaScript
 
Dart - светлая сторона силы?
Dart - светлая сторона силы?Dart - светлая сторона силы?
Dart - светлая сторона силы?
 
Making Scalable JavaScript Application
Making Scalable JavaScript ApplicationMaking Scalable JavaScript Application
Making Scalable JavaScript Application
 

JavaScript. Basics (in russian)

  • 1.
  • 4. 4 Примитивы •  String, Boolean, Number •  Можно вызывать методы как у объекта •  В памяти хранятся как константы –  Менять нельзя –  Можно переписывать значение переменной
  • 5. 5 Можно работать как с объектами 'string'.length; // 6 'name'.match(/^na/); // ["na"] 'name'.indexOf('a'); // 1 Работа с примитивами
  • 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 "string"; "s'tri'ng"; 'str'ing'; "str" + 'ing'; // "string"; "a,b,c".split(','); // ["a", "b", "c"] Пример
  • 9. 9 // Конкатенация с "" 1 + ""; // "1" // Можно привести явно 1.toString(); // "1" String(1); // "object" Приведение к строке
  • 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 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 // parseInt parseInt("10", 10); // 10 parseInt("a", 10); // NaN parseInt("a", 16); // 10 parseInt("01011", 2); // 11 parseInt("10px", 10); // 10!! // Можно проще +"10"; // 10 Привод к числу
  • 16. 16 "1" == true; // true "" == true; // false !!1; // true Привод к булеану
  • 18. 18 Undefined •  Этот тип имеют все переменные без значения
  • 19. 19 var a; typeof a === "undefined"; a = 0; typeof a === "number"; function b(c){ typeof c === "undefined"; } b(); Пример
  • 20. 20 Проверка на Undefined •  someVar === undefined; // Bad •  someVar == null; // Bad •  someVar === void 0; // Ok •  typeof someVar === "undefined";
  • 22. 22 Object •  Записывается литералом {} •  Это хэш •  Имена полей – это строка или число •  Можно динамически менять поля –  У любого объекта –  Добавлять –  Удалять •  Null – нулевой, несуществующий объект
  • 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"; Пример
  • 25. 25 Function •  Это вызываемый Объект •  Можно дописывать любые свойства •  Можно передавать куда угодно •  Нет проверки на число аргументов •  Легко перегружать •  Создает область видимости
  • 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 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. Array
  • 29. 29 Array •  Это специальный Объект •  Можно дописывать любые поля –  Не обязательно числовые
  • 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. Операторы и блоки Expression (Выражение, Оператор), Statement (Блочное выражение, Блок)
  • 32. 32 Statement •  Блочное выражение –  if (){}, try{}catch(e){}, function a(){} •  Директива интерпретатору –  return, throw, break, continue, var, … •  Может включать другие блочные выражения •  Может включать выражения •  Не возвращает значение •  Не может быть аргументом Expression •  Можно сделать из Expression – Expression; http://es5.github.com/#x12
  • 33. 33 Expression •  Оператор –  С одним аргументом typeof, !, (), ++, --, new, +,… –  С двумя ==, ===, >, <, instanceof, +, -,… –  С тремя a?b:c,… –  Вызов функции –  Оператор запятая •  Может включать другие операторы •  Не может включать Statement •  Возвращает значение •  Может быть в составе Statement http://es5.github.com/#x11
  • 35. 35 Приведение типов •  Утиная типизация •  Зависит от оператора –  Оператор имеет определенный алгоритм •  Зависит от типа аргументов и мест
  • 36. 36 Сильно перегружен: сложение чисел, конкатенация строк "2" + 3; // "23" 2 + 3; // 5 "2" + {}; // "2[object Object]" [] + []; // "" Пустая строка Пример: оператор +
  • 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
  • 39. 39 Блок var •  Это Statement •  Объявляет имя переменной в текущей области видимости
  • 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 Фактически это выглядит так 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 Оператор delete •  Это Expression •  Удаляет ссылку на объект, а не сам объект •  Возвращает Boolean –  true – ссылка удалилась –  false – ссылка осталась
  • 43. 43 var a = {c: 1}, b = a; delete a; // false a = void 0; typeof b === "object"; delete b.c; // true Оператор delete – пример
  • 44. 44 Оператор delete – в памяти a b Object c 1   undefined   a = {c: 1} a = void 0 b = a delete b.c
  • 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 typeof [] === "object"; // !!! typeof null === "object"; // !!! typeof NaN === "number"; // !!! typeof Infinity === "number"; // Ok typeof {} === "object"; // Ok typeof function(){} === ”function”; Пример
  • 47. 47 Операторы || и && •  || – логическое или –  Если первый аргумент можно привести к true – возвращаем его –  Иначе возвращаем/выполняем второй –  В JS применяется для установки значения по умолчанию •  && – логическое и –  Если первый аргумент приводится к false – возвращаем его –  Иначе возвращаем/выполняем второй –  Применяется для "коротких" if()
  • 48. 48 // Значения по умолчанию // - Рекомендуется к использованию ;-) function myObject(data) { data = data || {}; data.name = data.name || 'Default'; } myObject(); // {name: "Default"} Пример ||
  • 49. 49 // Короткий if // - Запись не явная // - НЕ рекомендуется использовать var a = true; if (a) { alert('ok'); } // Это аналогично a && alert('ok'); Пример &&
  • 50. 50 Заключение •  Базовые типы –  String –  Number –  Boolean –  Undefined –  Object: Array, Function, … •  Statement •  Expression •  Хитрые операторы и блоки –  var –  typeof –  delete –  void