Основы
Переменные и константы
Переменные
Позволяют сохранять, получать и изменять данные.
В JavaScript переменные можно создавать командой var, за которой следует имя переменной:
var x; // Объявляем переменную console.log(x); // Выведет undefined
x = 20; // Присваиваем одно значение console.log(x); // Выведет 20
x = 'сорок'; // Переопределение значения переменной console.log(x); // Выведет строку "сорок"
Способы записи названия переменной:
- camelCase (верблюжья нотация) — все слова в названии переменной пишутся слитно и каждое новое слово начинается с большой буквы (myNumber, userName).
- snake_case (змеиная нотация) — все слова разделяются нижним подчёркиванием (my_number, my_name).
Константы
Переменные которые не должны изменяться после объявления.
Именуются особенным образом: заглавными буквами с разделением слов через змеиный регистр (snake_case).
var EARTH_RADIUS = 6731;
Основные операторы
Минимальная единица языка, команда. Оператор принимает несколько значений, преобразует их и возвращает новое значение.
Операторы делятся по количеству принимаемых значений:
- Унарные — операторы, которые работают с одним значением.
- Бинарные — операторы, работающие с двумя значениями.
- Тернарный — единственный в языке оператор, принимает на вход три значения. Возвращающий второе или третье переданное значение в зависимости от истинности первого.
var result = true ? 1 : 0; // Вернет 1
Операторы делятся по типу возвращаемого значения на математические, строковые, логические (сравнения и булевой логики) и служебные.
Арифметические операторы
- + cложение
- - вычитание
- * умножение
- / деление
- % остаток от деления
- Инкремент (увеличение на единицу)
i++ // i = i + 1
- Декремент (уменьшение на единицу)
i-- // i = i - 1
- Сложение, совмещённое с присваиванием
i += 2 // i = i + 2
- Вычитание, совмещённое с присваиванием
i -= 2 // i = i - 2
- Умножение, совмещённое с присваиванием
i *= 2 // i = i * 2
- Деление, совмещённое с присваиванием
i /= 2 // i = i / 2
- Вычисление остатка от деления, совмещённое с присваиванием
i %= 2 // i = i % 2
Если в операции сложения участвует строка, результат будет приведён к строке. Сложение строк — конкатенация.
Операторы сравнения
- > — больше
- < — меньше
- >= — больше или равно
- <= — меньше или равно
Операторы равенства
- == — нестрогое равенство (с приведением типов). Сравнивает два значения, перед этим приводит одно из значений к типу другого. Если значения равны, возвращает true.
- === — строгое равенство (без приведения типов). Сравнивает два значения. Если типы значений разные или значения не равны, возвращает false.
- != — неравенство (с приведением типов). Сравнивает два значения, перед этим приводит одно из значений к типу другого. Если значения не равны, возвращает true.
- !== — строгое неравенство (без приведения типов). Сравнивает два значения. Если типы значений разные или значения не равны, возвращает true.
Любые значения внутри проверок приводятся к булеву типу. Все числа кроме 0 — true, при этом 0 — false. Все строки, кроме пустой строки — true, пустая строка — false.
Логические операторы
- && — «логическое И», возвращает true только в том случае, если оба условия, слева и справа от него, возвращают true.
- || — «логическое ИЛИ», возвращает true если любое из условий слева или справа от него, возвращают true.
- ! — «логическое отрицание», меняет булево значение выражения справа от него на противоположное.
Математические методы
- Math.round() — округляет до целого к ближайшему целому.
- Math.floor() — округляет до целого в меньшую сторону.
- Math.ceil() — округляет до целого в большую сторону.
- Math.random() — возвращает псевдослучайное число с плавающей запятой из диапазона [0, 1), то есть, от 0 (включительно) до 1 (но не включая 1).
- Math.sqrt() — возвращает квадратный корень числа.
- Math.pow(base, exponent) — возвращает base, возведённое в степень exponent.
Условные операторы
Условный оператор if
Условные операторы — конструкция языка, выполняющая определенный набор действий только при выполнении некоего логического выражения
Условие:
if (условие) {
действия;
}
Условие с альтернативным действием:
if (условие) {
действия;
} else {
другие действия;
}
Вложенные условия:
if (условие1) {
if (условие2) {
действия;
}
}
Здесь «условие» — это выражение, возвращающее true или false, а «действия» внутри фигурных скобок — это команды, которые выполняются, если условие удовлетворено.
Оператор вопросительный знак „?“
Вопросительный знак – единственный оператор, у которого есть три аргумента, поэтому его называют «тернарный оператор».
Тернарный оператор состоит из трех частей:
условие ? значение1 : значение2
Проверяется условие, затем если оно верно – возвращается значение1, если неверно – значение2, например:
access = (age > 14) ? true : false;
Циклы
Цикл for
Выполняет действия из тела цикла снова и снова, пока условие возвращает true.
for (var i = 0; i < 10; i++) {
// повторяющиеся команды
}
Синтаксис
- var i = 0; — подготовительная часть, исходное значение для счётчика. Задаётся с помощью var, как обычная переменная.
- i < 10; — проверочная часть. Если условие возвращает true, цикл делает ещё одну итерацию иначе прекращает свою работу.
- i++ — дополняющая часть, запускается на каждой итерации после выполнения кода из тела цикла. Меняет значение счётчика.
Цикл while
Действия будут выполняться снова и снова пока условие не вернёт false.
while (условие) {
действия
}
Оператор break
Прерывает выполнение цикла.
while (total < victoryPoints) {
if (misses >= 3) {
break
}
}
Оператор continue
Переход к следующей итерации цикла.
Функции
Функция — кусок кода, который можно написать один раз, а затем многократно использовать. Функция не просто содержит в себе значение, как переменная, а выполняет какое-то действие и решает какую-то задачу: считает, сравнивает, ищет.
var calculateSum = function (numberFirst, numberSecond) {
var sum = numberFirst + numberSecond;
return sum;
};
или
function calculateSum(numberFirst, numberSecond) {
var sum = numberFirst + numberSecond;
return sum;
}
calculateSum(); // Вернёт NaN
calculateSum(2); // Вернёт NaN
calculateSum(2, 5); // Вернёт 7
calculateSum(9, 5); // Вернёт 14
В этом примере:
- calculateSum — имя, по которому можно обратиться к функции.
- numberFirst, numberSecond — параметры функции.
- return sum; — место кода, где происходит возвращение sum и выход из функции.
- calculateSum(2, 5); — аргументы, которые передаются в функции при вызове. Порядок аргументов такой же, как у параметров функции. Первый аргумент 2 записывается в первый параметр numberFirst, аргумент 5 записывается в параметр numberSecond. Важно соблюдать порядок параметров при вызове функции, чтобы избежать неочевидных ошибок.
Возвращение из функции
Функция может выполнить код и отдать результат операций для дальнейшей работы с этим результатом. Он подставится в то место кода, где мы вызвали функцию.
var increaseByTwo = function (number) {
var sum = 2 + number;
return sum;
};
increaseByTwo(1); // Функция вернёт 3
increaseByTwo(2); // Функция вернёт 4
Несколько вещей, которые нужно знать:
- Код, написанный на новой строке после return, не выполняется.
- Функция не может вернуть сразу много значений, она возвращает только один результат.
- Если внутри функции нет return или после return не указано, какое значение нужно вернуть, функция вернёт undefined, иными словами, ничего.
Области видимости
У каждой функции есть область видимости — все значения, доступные для этой функции.
Область видимости ограничена функцией, поэтому снаружи нельзя получить локальные переменные и параметры функции.
Области видимости:
- Локальная — в нее входят параметры функции и переменные, объявленные в ней.
- Родительская — область видимости, в которой объявлена функция. Если функция находится в другой функции, она будет видеть её параметры и переменные.
- Глобальная — набор значений доступный везде. Является объектом window, описывающим текущую вкладку браузера (исключая вложенные <iframe>, для каждого из них создается свой объект window).
Если внутри функции обратиться не к локальной переменной, JavaScript будет искать переменную снаружи, переходя наверх от уровня к уровню, пока не найдёт переменную. Если переменной не будет ни внутри функции ни снаружи, будет ошибка.
Так как функция может использовать переменные, объявленные снаружи, их можно переопределять.
function makeFunc() {
var name = "Mozilla";
function displayName() {
console.log(name);
}
return displayName;
};
var myFunc = makeFunc();
myFunc(); // Выведет "Mozilla"
function makeAdder(x) {
return function(y) {
return x + y;
};
};
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
Области видимости создаются только функциями. Поэтому, если переменная была создана в другой конструкции, например, в цикле, она будет доступна для чтения из функции.
Замыкания
Функция, которая помнит о своём окружении. Это функция + все значения вне локальной области видимости, которые она использует.
Благодаря замыканиям мы можем зафиксировать какое-то значение в функции, а использовать саму функцию позже.
var collectContainer = function (food) {
return function () {
console.log('Поел ' + food);
};
};
var schoolkid = collectContainer('макароны');
schoolkid(); // Выведет 'Поел макароны'
Потеря окружения — ситуация, в которой функция-замыкание обращается к внешним переменным, которые были изменены или удалены.
Замыкания и асинхронность
Некоторые функции выполняются асинхронно, поэтому в момент выполнения кода значение переменной может уже измениться. Чтобы избавиться от этой проблемы, нужно создать отдельную область видимости. Так все переменные будут под контролем и замыкания не позволят потерять необходимые значения.
var thumbnails = document.querySelectorAll('.gallery__photo-preview');
var fullPhoto = document.querySelector('.full-photo');
var addThumbnailClickHandler = function (thumbnail, photo) {
thumbnail.addEventListener('click', function () {
fullPhoto.src = photo;
});
};
for (var i = 0; i < thumbnails.length; i++) {
addThumbnailClickHandler(thumbnails[i], photos[i]);
}
IIFE
Immediately Invoked Function Expression - это JavaScript функция, которая выполняется сразу же после того, как она была определена.
Функция становится мгновенно выполняющимся функциональным выражением. Переменные внутри функции не могут быть использованы за пределами ее области видимости.
(function () {
statements
})();
Переменная, которой присвоено IIFE, хранит в себе результат выполнения функции, но не саму функцию.
var result = (function () {
var name = "Barry";
return name;
})();
// Immediately creates the output:
result; // "Barry"
Потеря окружения
Пример потери окружения:
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
button.addEventListener('click', function (evt) {
console.log(button.value); // button === buttons.length
});
}
Решение 1. Cоздание изолированной области видимости:
var buttons = document.querySelectorAll('button');
var addClickListener = function (button) {
button.addEventListener('click', function (evt) {
console.log(button.value);
});
}
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
addClickListener(button);
}
Решение 2. Создание IIFE функции для ограничения области видимости:
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
(function (button) {
button.addEventListener('click', function (evt) {
console.log(button.value);
});
})(buttons[i]);
}
Разное
API
ApplicaMon Public Interface — набор доступных свойств и методов для решения определенной задачи. Часто реализуется в виде объектов. Как правило, свойства задают параметры решения, а методы определяют действия.
Примеры API:
- DOM — работа с элементами страницы (в том числе SVG-графикой)
- BOM — работа с браузером
- Canvas — создание графики
- XMLHppRequest — отправка запросов на сервер
console.log()
Выводит в консоль результаты операций: числа, строки (их надо заключать в кавычки).
console.log(x + 50);
.toLowerCase()
Возвращает значение строки, на которой он был вызван, преобразованное в нижний регистр.
str.toLowerCase()
.toUpperCase()
Возвращает значение строки, на которой он был вызван, преобразованное в верхний регистр.
str.toUpperCase()