Стажировка 2016-07-14 02 Евгений Тарасенко. JavaScript

JavaScript (JS)
Евгений Тарасенко

Wikipedia
JavaScript is a high-level, dynamic, untyped, and
interpreted programming language.

Где применяется?
- На клиенте как скриптовый язык для
браузеров
- На сервере Node.js

Что умеет?
- Работать с HTML элементами и их
стилями через DOM
- Взаимодействовать с пользователем
через события браузера
- Посылать/принимать данные с сервера
(AJAX)
- Работать с cookie

Что запрещено?
- Нет доступа к файлам на диске
- Нет доступа к соседним вкладкам
- Ограничен доступ к чужим доменам

Версии
- ECMAScript 5 (ES5)
- ECMAScript 2015 (ES6)
- TypeScript
kangax.github.io/compat-table

Инструменты
- Любимая IDE
- developer.chrome.com/devtools
- Отладка кода

Как подключить?
- <script> ... </script>
- <script src="/path/to/script.js"></script>
- Атрибуты async/defer

Включаем ES5
"use strict";
Проблемы с IE9
ES5-shim для IE8

Переменные
var name;
var arrSize = 10;
var COLOR_RED = "#f00";

Области видимости
var a = 1;
function go() {
var a = 5;
console.log(a); // 5
}
go();
console.log(a); // 1

Типы данных
typeof undefined // "undefined"
typeof 0 // "number"
typeof true // "boolean"
typeof "foo" // "string"
typeof {} // "object"
typeof null // "object" (1)
typeof function(){} // "function" (2)

Сложение
alert(1 + 2); // 3, число
alert('1' + 2); // '12', строка
alert(1 + '2'); // '12', строка

Сравнения
С преобразованием типов:
0 == false // true
'' == false // true
Без преобразования типов:
0 === false // false

Сравнения
if (0) { // 0 преобразуется к false
...
}
Число 0, пустая строка "", null и undefined, а
также NaN являются false

Объекты
Копирование по ссылке:
var user = { name: 'Вася' };
var admin = user;
admin.name = 'Петя';
user.name === admin.name // true

Массивы
- push/pop, shift/unshift, splice – для
добавления и удаления элементов
- join/split – для преобразования строки в
массив и обратно
- slice – копирует участок массива.
- concat – объединяет массивы
- indexOf/lastIndexOf – возвращают
позицию элемента в массиве

Массивы
var arr = [ 1, 2, 15 ];
arr.sort();
arr // 1, 15, 2

Массивы
- forEach – для перебора массива
- filter – для фильтрации массива
- every/some – для проверки массива
- map – для трансформации массива в
массив
- reduce/reduceRight – для прохода по
массиву с вычислением значения

Дата и время
new Date(2011, 0, 1, 0, 0, 0, 0);
// 1 января 2011, 00:00:00

Замыкания
function makeCounter() {
var currentCount = 1;
return function() {
return currentCount++;
};
}
var counter = makeCounter();
// каждый вызов увеличивает счётчик и возвращает результат
console.log(counter()); // 1
console.log(counter()); // 2
// создать другой счётчик, он будет независим от первого
var counter2 = makeCounter();
console.log(counter2()); // 1

Методы объектов
var user = {
name: 'Василий',
sayHi: function() {
alert( this.name );
}
};
user.sayHi(); // sayHi в контексте user

Отличие this
Значение this называется контекстом вызова
и будет определено в момент вызова
функции.
this – это текущий объект при вызове «через
точку»

this без объекта
function func() {
alert( this ); // выведет [object Window] или [object global]
}
func();
function func() {
"use strict";
alert( this ); // выведет undefined (кроме IE9-)
}
func();

Потеря контекста
var user = {
name: "Вася",
hi: function() { alert(this.name); },
bye: function() { alert("Пока"); }
};
user.hi(); // Вася (простой вызов работает)
// вызовем user.hi или user.bye в зависимости от имени
(user.name == "Вася" ? user.hi : user.bye)(); // undefined

Явный this
func.call(context, arg1, arg2, ...)
// идентичен вызову
func.apply(context, [arg1, arg2]);
// привязывает контекст
var f = func.bind(context);
f(arg1, arg2);

Конструктор
function Animal(name) {
// this = {};
this.name = name;
this.canWalk = true;
// return this;
}
var animal = new Animal("ёжик");

Класс в функц-ом стиле
this.speed = 0;
this.name = name;
this.run = function(speed) {
this.speed += speed;
alert( this.name + ' бежит, скорость ' + this.speed );
};
};
var animal = new Animal('Зверь');
alert( animal.speed ); // 0, начальная скорость
animal.run(3); // Зверь бежит, скорость 3

Класс через прототип
// конструктор
this.name = name;
this.speed = 0;
}
// методы в прототипе
Animal.prototype.run = function(speed) {
this.speed += speed;
alert( this.name + ' бежит, скорость ' + this.speed );
};
var animal = new Animal('Зверь');
alert( animal.speed ); // 0, свойство взято из прототипа
animal.run(5); // Зверь бежит, скорость 5

Наследование
function Animal(name) {...}
Animal.prototype.stop = function() {...}
function Rabbit(name) {...}
// Наследование
Rabbit.prototype = Object.create(Animal.prototype);
Rabbit.prototype.constructor = Rabbit;
Rabbit.prototype.jump = function() {...}

Самостоятельно прочитать
Современный учебник JavaScript
learn.javascript.ru/js
или
Дуглас Крокфорд - JS сильные стороны
https://vk.com/doc10903696_272054170

Стажировка 2016-07-14 02 Евгений Тарасенко. JavaScript

More Related Content

What's hot (20)

Similar to Стажировка 2016-07-14 02 Евгений Тарасенко. JavaScript (20)

More from SmartTools (10)

Стажировка 2016-07-14 02 Евгений Тарасенко. JavaScript