Конспекты по frontend

MDN.Справочник по JavaScript

Глобальные объекты

MDN.Стандартные встроенные объекты

Значения

Infinity — является числовым значением, представляющим бесконечность.
NaN — является значением, представляющим не-число (Not-A-Number).
undefined — представляет примитивное значение undefined.
null — представляет примитивное значение Null.

Числа и даты

Math — является встроенным объектом, хранящим в своих свойствах и методах различные математические константы и функции.

Обработка текста

String — является конструктором строк, или, последовательностей символов.
- length — представляет длину строки.
- concat() — объединяет текст из двух или более строк и возвращает новую строку.
- indexOf() — возвращает индекс первого вхождения указанного значения в String.
- lastIndexOf() — возвращает индекс последнего вхождения указанного значения String.
- toLowerCase() — возвращает значение строки, на которой он был вызван, преобразованное в нижний регистр.
- toUpperCase() — возвращает значение строки, на которой он был вызван, преобразованное в верхний регистр.
- split() — разбивает объект String на массив строк путём разделения строки указанной подстрокой.

Инструкции и объявления

MDN.Инструкции и объявления

Переменные и константы

var — объявляет переменную, инициализируя ее, при необходимости.
let — объявляет переменную с блочной областью видимости с возможностью инициализировать её значением.
const — значение констант не может быть изменено новым присваиванием, а также не может быть переопределено.

Способы записи названия переменной:

camelCase — верблюжья нотация.
snake_case — змеиная нотация.

Константы именуются заглавными буквами с разделением слов через snake_case.

Управление потоком выполнения

if...else — выполняет инструкцию, если указанное условие выполняется (истинно). Если условие не выполняется (ложно), то может быть выполнена другая инструкция.
switch — сравнивает выражение со случаями, перечисленными внутри неё, а затем выполняет соответствующие инструкции.
throw — позволяет генерировать исключения, определяемые пользователем.
try...catch — помечает блок инструкций как try, и в зависимости от того, произошла ошибка или нет, вызывает дополнительный блок инструкций catch.

Циклы и Итерации

for — создаёт цикл, состоящий из 3 необязательных выражений в круглых скобках, разделённых точками с запятой.
while — создает цикл, выполняющий заданную инструкцию, пока истинно проверяемое условие.
break — прерывает выполнение текущего цикла, переключателя switch, или метки (label) блочного выражения и переносит выполнение программы к оператору, следующему за прерванным.
continue — прерывает выполнение текущей итерации текущего или отмеченного цикла, и продолжает его выполнение на следующей итерации.

Прочее

debugger — открывает доступ к любому доступному в конкретном окружении отладочному функционалу, например к установке точек останова (т.н. брейкпоинтов).

Выражения и операторы

MDN.Выражения и операторы

Арифметические операции — принимают в качестве операндов числовые значения (это может быть и литерал и переменная) и возвращают результат в виде одного числового значения.
Операторы сравнения — имеются как строгие сравнения, так и сравнения с преобразованием типа операндов (Таблицы истинности для JavaScript).
Логические операторы — используются, как правило, с примитивами Boolean (логического) типа.
Операторы присваивания — присваивает левому операнду значение, основанное на значении правого операнда.
Условный (тернарный) оператор — единственный оператор в JavaScript, принимающий три операнда.
Приоритет операторов — определяет порядок, в котором операторы выполняются.

Функции

MDN.Функции MDN.Функции в JavaScript

Объявление функций

Два основных способа создания функций:

Функциональное выражение (Function Definition Expression) — объявление функции в контексте какого-либо выражения, например присваивания.
```
var sum = function(a, b) {
  return a + b;
}
```
Объявление функции (Function Declaration Statement) — функция, объявленная в основном потоке кода.
```
function sum(a, b) {
  return a + b;
}
```

Область видимости функций

Область видимости функции — все значения, доступные для этой функции.

Область видимости ограничена функцией, поэтому снаружи нельзя получить локальные переменные и параметры функции.

Области видимости создаются только функциями. Поэтому, если переменная была создана в другой конструкции, например, в цикле, она будет доступна для чтения из функции.

Локальная — параметры функции и переменные, объявленные в ней.
Родительская — область видимости, в которой объявлена функция. Если функция находится в другой функции, она будет видеть её параметры и переменные.
Глобальная — набор значений доступный везде. Является объектом window, описывающим текущую вкладку браузера (исключая вложенные <iframe>, для каждого из них создается свой объект window).

Замыкания

Замыкания — комбинация функции и лексического окружения, в котором эта функция была определена.

Потеря окружения — ситуация, в которой функция-замыкание обращается к внешним переменным, которые были изменены или удалены. Решение, создание изолированной области видимости:

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);
}

Свойства и методы

Свойства и методы объекта Function
apply() — вызывает функцию с указанным значением this и аргументами, предоставленными в виде массива (либо массивоподобного объекта).
bind() — создаёт новую функцию, которая при вызове устанавливает в качестве контекста выполнения this предоставленное значение.
call() — вызывает функцию с указанным значением this и индивидуально предоставленными аргументами.

Прочее

IIFE (Immediately Invoked Function Expression) — функция, которая выполняется сразу же после того, как она была определена.
Функция обратного вызова — функция, переданная в другую функцию в качестве аргумента, которая затем вызывается по завершению какого-либо действия.
return — завершает выполнение текущей функции и возвращает её значение.
this — ключевое слово this, в большинстве случаев определяется тем, каким образом вызвана функция.
arguments — подобный массиву объект, который содержит аргументы, переданные в функцию.

Типы и структуры данных

MDN.Типы данных JavaScript и структуры данных

Типы данных

Стандарт ECMAScript определяет 8 типов данных:

7 типов данных являются примитивами:
- Boolean (Булев, Логический тип)
- Null (Null тип)
- undefined (Неопределенный тип)
- Number (Число)
- String (Строка)
- BigInt
- Symbol (в ECMAScript 6)
Object (Объект)

Оператор typeof возвращает строку, указывающую тип операнда.

Преобразование типов данных

Функция parseInt() принимает строку в качестве аргумента и возвращает целое число в соответствии с указанным основанием системы счисления.
Функция parseFloat() принимает строку в качестве аргумента и возвращает десятичное число (число с плавающей точкой).
Метод toString() возвращает строку, представляющую объект.

Структуры данных

Bad programmers worry about the code. Good programmers worry about data structures and their relaRonships.

Linus Torvalds

Перечисление (enumeration) — структура данных, которая используется для перечисления набора фиксированных значений. Список констант.

var Code = {
  SUCCESS: 200, 
  CACHED: 302, 
  NOT_FOUND_ERROR: 404, 
  SERVER_ERROR: 500
};

Словарь (dictionary, map, associative array) — структура данных, которая используется для сопоставления одних значений другим. Представляет собой набор пар «ключ, значение».

var valueToAnotherValue = {
  'one': 'class-one',
  'two': 'class-two',
  'three': 'class-three' 
};

valueToAnotherValue['one'];
valueToAnotherValue[document.querySelector('input').value];

Именование словарей, например:

classListMap — упоминания типа данных в названии переменной.
stateToClassName — с использованием слова to.

Объекты

MDN.Работа с объектами MDN.Основы объектов в JavaScript

Передача по ссылке

Объект всегда один, в памяти не создаётся новое место под копию объекта. Каждая переменная содержит не новую отдельную сущность, а ссылку на один-единственный объект.

var increaseBy2 = function(obj) { 
obj.prop += 2; 
return obj;  }; 

var myObject = { prop: 2 }; 

console.log(increaseBy2(myObject)); // Вернет { prop: 4 }
console.log(myObject); // Вернет { prop: 4 }

Объект внутри функции increaseBy2 — тот же объект, что используется снаружи. При передаче объекта в функцию была передана ссылка на него, т.о. функция изменила исходный объект.

Методы объектов

В объектах могут храниться любые типы данных, в том числе и функции. Такие свойства-функции называются методами объектов. Вызов метода записывается так: объект.метод().

Изнутри методов можно обращаться к свойствам и другим методам объекта с помощью ключевого слова this. Оно указывает на текущий объект и называется контекстом вызова.

Важная деталь: пока функция не вызвана, this не содержит никакого значения, контекст появляется только в момент вызова функции.

Прочее

Property accessors — доступ к свойствам объекта представляют точечная и скобочная записи.
Свойства и методы Object

Массивы

MDN.Array

Свойства и методы

from() — создаёт новый экземпляр Array из массивоподобного или итерируемого объекта. (Не поддерживается ни одной версией браузера Internet Explorer)
Методы изменения:
- length — отражает количество элементов в массиве.
- pop() — вынимает последний элемент.
- push() — добавляет элемент в конец.
- shift() — вынимает первый элемент.
- unshift() — добавляет элемент в начало.
- sort() — сортирует массив.
- splice() — удаляет или заменяет несколько элементов в массиве.
- reverse() — разворачивает массив.
Методы доступа:
- concat() — объединяет два массива.
- join() — объединяет все элементы массива (или массивоподобного объекта) в строку.
- slice() — возвращает новый массив, содержащий копию части исходного массива.
- indexOf() — возвращает первый индекс, по которому данный элемент может быть найден в массиве или -1, если такого индекса нет.
- lastIndexOf() — возвращает последний индекс, по которому данный элемент может быть найден в массиве или -1, если такого индекса нет.
- join() — объединяет все элементы массива (или массивоподобного объекта) в строку.
Методы обхода:
- forEach() — выполняет указанную функцию один раз для каждого элемента в массиве.
- filter() — создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.
- map() — создаёт новый массив с результатом вызова указанной функции для каждого элемента массива.
- reduce() (свёртка) — сворачивает все элементы слева направо в одно значение.
- reduceRight() (свёртка) — сворачивает все элементы справа налево в одно значение.
- reduce() — применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению.
- every() — проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции.
- some() — проверяет, удовлетворяет ли хоть какой-нибудь элемент массива условию, заданному в передаваемой функции.

Сортировка массива

var numbers = [12, 3, 7, 9, 10, 5];

for (var i = 0; i <= numbers.length - 2; i++) {
  var minValue = numbers[i];

  for (var j = i + 1; j <= numbers.length - 1; j++) {
    if (numbers[j] < minValue) {
      minValue = numbers[j];
      var swap = numbers[i];
      numbers[i] = minValue;
      numbers[j] = swap;
    }
  }
}

console.log(numbers); // Выведет [3, 5, 7, 9, 10, 12];

Массив сортируется по возрастанию элементов. На каждой итерации происходит сравнение minValue с остальными элементами массива. Если какой-то из них окажется меньше, чем minValue, он запишется в minValue, перезаписав старое значение, и переместится в начало массива. Переменная swap — вспомогательная переменная, с помощью, которой мы можем поменять элементы местами.

Применение методов Array к псевдомассиву

Вызвов метода массива, подсунув вместо настоящиего массива псевдомассив.

var headers = document.querySelectorAll('h1');

console.log([].map.call(headers, function (it) {
  return it.textContent;
}));

Использование from()

var headers = document.querySelectorAll('h1');

console.log(Array.from(headers).map(function (it) {
  return it.textContent;
}));

DOM

MDN.Руководство по DOM MDN.DOM MDN.Введение в DOM MDN.Манипулирование документами

Document

Каждая веб-страница, которая загружается в браузер, имеет свой собственный объект document. Интерфейс документа служит точкой входа для получения содержимого веб-страницы (всего DOM - дерева, включая такие элементы как body и table), а также обеспечивает функциональность, которая является глобальной для документа, например, для получения URL-адреса страницы или создания новых элементов в документе).

Свойства и методы:

getElementById() — возвращает ссылку на элемент по его идентификатору (ID); идентификатор является строкой, которая может быть использована для идентификации элемента; она может быть определена при помощи атрибута id в HTML или из скрипта.
getElementsByTagName() — возвращает живую коллекцию элементов HTMLCollection, учитывая имя тэга.
querySelector() — возвращает первый элемент (Element) документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращает значение null.
querySelectorAll() — возвращает список элементов в пределах документа (поиск осуществляется в пределах указанного элемента), которые соответствуют указанной группе селекторов. Возвращает объект типа NodeList, содержащий все найденные элементы в том порядке, в котором они находятся в документе.
activeElement — возвращает текущий сфокусированный элемент, то есть элемент, на котором будут вызываться события клавиатуры, если пользователь начнёт с неё ввод.
createElement — создает указанный в аргументе элемент или HTMLUnknownElement, если элемент неизвестен.
createDocumentFragment() — Создает новый пустой DocumentFragment.

Node

Node это интерфейс, от которого наследуют несколько типов DOM, он так же позволяет различным типам быть обработанными(или протестированными).

Свойства и методы:

parentElement — возвращает родителя узла DOM Element, или null если узел не имеет родителя, или его родитель не DOM Element.
parentNode — возвращает родителя определенного элемента DOM дерева.
previousSibling — возвращает узел предшедствующий указанному в родительском элементе childNodes, или null, если указанный узел первый в своём родителе.
nextSibling — возвращает узел, непосредственно следующий за данным узлом в списке childNodes его родительского элемента, или null если данный узел последний в этом списке.
children — возвращает живую коллекцию (HTMLCollection) дочерних элементов узла.
childNodes — возвращает коллекцию дочерних элементов данного элемента.
contains — указывает, является ли узел потомком данного узла.
nodeName — возвращающие имя текущего узла в виде строки.
textContent — позволяет задавать или получать текстовое содержимое элемента и его потомков.
removeChild — удаляет дочерний элемент из DOM. Возвращает удаленный элемент.
remove() — удаляет узел из дерева DOM.
appendChild — добавляет элемент в конец списка дочерних элементов родителя. Если элемент уже существует он удаляется из текущего родителя и вставляется заново.
insertBefore() — добавляет элемент в список дочерних элементов родителя перед указанным элементом.
replaceChild — заменяет дочерний элемент на выбранный. Возвращает замененный элемент.
compareDocumentPosition — сравнивает позицию текущего узла и другого узла в любом другом документе.
cloneNode() — возвращает дубликат узла, из которого этот метод был вызван.

NonDocumentTypeChildNode

Интерфейс NonDocumentTypeChildNode содержит методы, специфичные для объектов Node, которые могут иметь родителя, но не подходят для DocumentType.

Свойства и методы:

previousElementSibling — возвращает Element элемент стоящий перед применяемым, из списка дочерних элементов родителя или возвращает null, если таковых не имеется.
nextElementSibling — возвращающее последующий элемент перед текущим, или null, если элемент является последним в своём родительском узле.

Element

Интерфейс Element представляет собой один из объектов в Document. Этот интерфейс описывает методы и свойства, общие для всех видов элементов. Конкретные модели поведения описаны в интерфейсах, которые наследуют от Element, и добавляют дополнительную функциональность.

Свойства и методы:

tagName — возвращает HTML-тег элемента ("div", "p", "a" и т.д).
className — отвечает за значение атрибута class элемента.
getAttribute() — возвращает значение указанного атрибута элемента.
setAttribute() — добавляет новый атрибут или изменяет значение существующего атрибута у выбранного элемента.
classList — возвращает псевдомассив DOMTokenList, содержащий все классы элемента.
- add — добавляет элементу указанные классы.
- remove — удаляет у элемента указанные классы.
- item — Результат аналогичен вызову сlassList[Number].
- toggle — если класс у элемента отсутствует - добавляет, иначе - убирает.
- contains — проверяет, есть ли данный класс у элемента (вернет true или false)
innerHTML — устанавливает или получает разметку дочерних элементов.
insertAdjacentHTML() — разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию.
insertAdjacentText() — помещает заданный текстовый узел в указанную позицию относительно элемента, который передан в вызове метода.
getBoundingClientRect() — возвращает размер элемента и его позицию относительно viewport (точки просмотра или ширины экрана в пикселях CSS в масштабе 100%.)

HTMLElement

Интерфейс HTMLElement представляет собой любой элемент HTML.

Свойства и методы:

HTMLElement.style — используется для получения и установки инлайновых стилей.
offsetTop — возвращает расстояние текущего элемента по отношению к верхней части offsetParent узла.
offsetLeft — возвращает смещение в пикселях верхнего левого угла текущего элемента от родительского offsetParent узла.

События:

input — срабатывает, когда значение элемента <input>, <select> или <textarea> было изменено.

Drag and drop

Drag and drop (на русском)

HTML Drag and Drop API (на английском)

События:

drag — вызывается каждые несколько сотен миллисекунд, поскольку пользователь или элемент перетаскивает выделенный элемент или текст.
dragend — вызывается, когда операция перетаскивания завершается (путем отпускания кнопки мыши или нажатия клавиши выхода).
dragenter — возникает, когда перетаскиваемый элемент или выделенный текст попадают в допустимую цель перетаскивания.
dragexit — вызывается, когда элемент больше не является целью немедленного выбора операции перетаскивания.
dragleave — наступает, когда перетаскиваемый элемент или выделенный текст оставляет действительную цель перетаскивания.
dragover — вызывается, когда элемент или текстовое выделение перетаскивается через допустимую цель удаления (каждые несколько сотен миллисекунд).
dragstart — вызывается, когда пользователь начинает перетаскивать выделенный элемент или текст.
drop — вызывается, когда элемент или текстовый элемент отбрасывается на допустимую цель удаления.

Глобальный атрибут draggable указывает, можно ли перетаскивать элемент с использованием собственного поведения браузера или API-интерфейса перетаскивания HTML.

Прочее

<template> — механизм для отложенного рендера клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.
DocumentFragment — представляет собой минимальный объект документа, который не имеет родителя. Пустой DocumentFragment может быть создан с помощью метода document.createDocumentFragment или конструктора.
NodeList — коллекция узлов, возвращаемая такими методами, как Node.childNodes и document.querySelectorAll.
HTMLCollection — является обобщённой коллекцией (объектом, ведущим себя подобно массиву) элементов (в порядке упоминания в документе) и предоставляет методы и свойства для получения хранящихся в нём элементов.

События

MDN.Введение в события MDN.Events and the DOM MDN.Типы событий MDN.Сравнение Event Targets

Event

Интерфейс Event представляет собой любое событие, которое происходит в DOM.

Свойства и методы:

currentTarget — определяет элемент, в котором в данный момент обрабатывается событие, при движении события внутри DOM.
target — ссылка на объект, который был инициатором события.
preventDefault() — отменяет событие, если оно отменяемое, без остановки дальнейшего распространения этого события.
stopPropagation() — прекращает дальнейшую передачу текущего события.
eventPhase — отображает текущую фазу процесса обработки события.

EventTarget

EventTarget - это интерфейс, реализуемый объектами, которые могут генерировать события и могут иметь подписчиков на эти события.

Методы:

addEventListener() — регистрирует определенный обработчик события, вызванного на EventTarget.
removeEventListener() — удаляет обработчик события, который был зарегистрирован при помощи EventTarget.addEventListener().

MouseEvent

Интерфейс MouseEvent представляет собой событие, которое происходит в результате взаимодествия пользователя с манипулятором ( например, мышью).

Свойства и методы:

clientX — является горизонтальной координатой в пределах клиентской области приложения, на которой произошло событие (в отличие от координат внутри страницы).
clientY — является вертикальной координатой в пределах клиентской области приложения, на которой произошло событие (в отличие от координат внутри страницы).
offsetX — показывает отступ курсора мыши по оси X от края целевого DOM узла.
offsetY — показывает отступ курсора мыши по оси Y от края целевого DOM узла.
pageX — возвращает значение равное горизонтальной координате, относительно всего документа.
pageY — возвращает значение равное вертикальной координате, относительно всего документа.

События:

mouseover — срабатывает, когда курсор появляется над элементом.
mouseout — срабатывает, когда курсор уходит из элемента.
mousemove — срабатывает при передвижении курсора.
mouseenter — срабатывает, когда курсор заходит на элемент, не учитываются переходы внутри элемента, не всплывает.
mouseleave — срабатывает, когда курсор уходит с элемента, не учитываются переходы внутри элемента, не всплывает.
mousedown — срабатывает, когда кнопка курсора нажата над элементом.
mouseup — срабатывает, когда кнопка курсора отпускается, когда указатель находится внутри элемента.
click — срабатывает, когда кнопка курсора одновременно нажата и отпущена, когда указатель находится внутри элемента. Т.е. происходит mousedown и затем mouseup.

KeyboardEvent

Объекты KeyboardEvent — описывают работу пользователя с клавиатурой.

Свойства и методы:

keyCode (устарело) — возвращает Number, представляющее системный и зависящий от конкретной реализации числовой код, идентифицирущий немодифицированное значение нажатой клавиши.
code — возвращает DOMString с кодом клавиши, представленного события.

Формы и валидация

MDN.Руководство по HTML-формам MDN.Формы в HTML MDN.<form> MDN.Проверка данных формы MDN.Валидация форм MDN.Отправка данных формы

HTMLFormElement

Интерфейс HTMLFormElement предоставляет методы для создания и изменения элементов <form>.

Свойства и методы:

reportValidity() — возвращает true если все дочерние элементы прошли проверку. Когда возвращается false, по каждому дочернему элементу не прошедшему проверку генерируется событие invalid и пользователю сообщаются проблемы проверки.
reset() — восстанавливает стандартные значения всем элементам формы.

События:

change — вызывается для элементов <input>, <select> и <textarea>, когда изменение фиксируется в значении элемента пользователем (когда состояние поля меняется).
submit — срабатывает при отправке <form>.

HTMLInputElement

Интерфейс HTMLInputElement предоставляет специальные свойства и методы для управления размещением и отображением элементов input.

Свойства и методы:

value — текущее значение поля.

События:

invalid — запускается, когда отправляемый элемент был проверен, но его содержимое не удовлетворило установленные ограничения.

HTMLSelectElement

Интерфейс HTMLSelectElement представляет элемент HTML <select>.

Свойства и методы:

setCustomValidity() — устанавливает специальное сообщение для выбранного элемента.
checkValidity() — проверяет, есть ли у элемента какие-либо ограничения и удовлетворяет ли он им. Если элемент не выполняет свои ограничения, браузер генерирует отменяемое недопустимое событие в элементе, а затем возвращает false.

ValidityState

Интерфейс ValidityState — представляет состояния достоверности, в которых может находиться элемент, относительно проверки ограничения.

Свойства:

tooLong — больше максимальной длины.
tooShort — слишком короткое значение.
badInput — введено неправильное значение.
customError — задано кастомное сообщение об ошибке.
patternMismatch — не соответствует паттерну.
rangeOverflow — больше значения max.
rangeUnderflow — меньше значения min.
stepMismatch — значение не попадает в step.
typeMismatch — не совпадает тип.
valid — валидно ли поле.

userNameInput.addEventListener('invalid', function (evt) {
  if (userNameInput.validity.tooShort) {
    userNameInput.setCustomValidity('Имя должно состоять минимум из 2-х символов');
  } else if (userNameInput.validity.tooLong) {
    userNameInput.setCustomValidity('Имя не должно превышать 25-ти символов');
  } else if (userNameInput.validity.valueMissing) {
    userNameInput.setCustomValidity('Обязательное поле');
  } else {
    userNameInput.setCustomValidity(''); // сбрасываем значение поля, если оно стало корректно
  }
});

Можно не только переопределять стандартное поведение валидации, а также расширять его и добавлять свои собственные обработчики форм.

userNameInput.addEventListener('input', function (evt) {
  var target = evt.target;
  if (target.value.length < 2) {
    target.setCustomValidity('Имя должно состоять минимум из 2-х символов');
  } else {
    target.setCustomValidity('');
  }
});

Прочее

<input> — используется для создания интерактивных элементов управления в веб-формах для принятия данных от пользователя.

Canvas

MDN.Руководство по Canvas MDN.<canvas>

CanvasRenderingContext2D

Интерфейс CanvasRenderingContext2D предоставляет контекст 2D рендеринга для поверхности рисования элемента <canvas>.

Размер канваса по умолчанию — 300×150px. Координатная сетка канваса изначально имеет такой же размер.

Если изменить размеры канваса, используя css, то изменятся внешние размеры блока, а координатная сетка останется прежней — 300×150px.

Чтобы изменить и размеры канваса и координатную сетку, нужно воспользоваться свойствами width и height DOM-элемента канваса.

<canvas id="canvas" width="120" height="120"></canvas>

Основы:

fillRect() — рисует залитый прямоугольник в позиции (x, y), размер которого определяется аргументами width и height, и стиль которого определяется атрибутом fillStyle.
fillStyle — задает цвет или стиль, используемый при заливке фигур, вызывается перед отрисовкой фигуры.
fill() — заливает отрисованный контур, контур зальётся так, как это указано в свойстве fillStyle.
strokeStyle — задает цвет или стиль, используемый при выполнении обводки фигур.
stroke() — обводит текущий или данный контур цветом strokeStyle.
clearRect() — очищает холст, устанавливает прозрачный черный цвет для всех пикселей, расположенных внутри прямоугольника, заданного начальной точкой (x, y) и размерами (width, height), таким образом стирая любое ранее нарисованное содержимое.

Сложные фигуры рисуются с помощью контуров. Контур — это описание формы фигуры, без заливки или обводки. Контуры описываются с помощью простых фигур, а потом управление, например, заливка или обводка, производится целиком над фигурами.

Начало контура задается методом beginPath, конец контура closePath, все, что будет нарисовано между этими вызовами, будет считаться одной фигурой.

beginPath() — запускает новый путь, опуская список подпутей.
moveTo() — перемещает начальную точку нового фрагмента контура в координаты (x, y).
lineTo() — добавляет линию к текущему под пути с конечной точкой с короординатами (x, y).
bezierCurveTo() — добавляет кубическую кривую Безье к контуру.
closePath() — добавляет в путь линию от текущей до первоначальной точки под пути и закрывает сам путь (давая возможность инициализировать новый).

ctx.beginPath(); // начало контура
ctx.moveTo(100, 100); // перемещает начальную точку нового фрагмента контура
ctx.lineTo(150, 100); // рисует линию из последней точки
ctx.bezierCurveTo(140, 90, 110, 90, 100, 100); //рисует кривую Безье
ctx.closePath(); //конец контура
ctx.stroke(); // рисует обводку
ctx.fill(); // заливает отрисованный контур

Вывод текста:

fillText() — рисует (заливает) заданнный текст в заданной позиции (x, y).
strokeText() — выполняет обводку заданного текста в заданной позиции (x, y).

ctx.fillText('Привет', 0, 10); // выводит залитый текст
ctx.strokeText('Привет', 0, 10); // выводит обведённый текст

Параметры текста:

font — определяющет текущие стили рисуемого текста.
textBaseline — указывающее на текущую базовую линию при рисовании текста.
fillText() — рисует (заливает) заданнный текст в заданной позиции (x, y).

ctx.font = '30px Tahoma';
ctx.textBaseline = 'hanging'; // выравнивает текст
ctx.fillText('Текст', 0, 10);

Сеть

MDN.Как работает Интернет MDN.Получение данных с сервера MDN.Клиент-сервер

JSONP

JSONP (JSON with padding) — способ загрузки данных, основанный на подключении из кода тега script, который вызывает заранее определенную функцию.

var CALLBACK_NAME = '__jsonpCallback';
  var DATA_URL = '//1510.dump.academy/code-and-magick/data';
  
  var renderItem = function (item) {
    var dataDiv = document.createElement('div');
    dataDiv.textContent = item.name;
    document.body.appendChild(dataDiv);
  };
  
  window[CALLBACK_NAME] = function (data) {
    for(var i = 0; i < data.length; i++) {
      renderItem(data[i]);
    }
  };
  
  var loader = document.createElement('script');
  loader.src = DATA_URL + '?callback=' + CALLBACK_NAME;
  document.body.append(loader);

AJAX

AJAX (Asynchronous JavaScript and XML) — способ загрузки данных асинхронно, без полного обновления страницы.

XMLHttpRequest

XMLHttpRequest — объект для работы с HTTP-запросами.

Свойства и методы:

open() — инициализирует запрос.
send() — отправляет запрос.
responseText — возвращает текст ответа от сервера на отправленный запрос.
response — возвращает содержимое тела ответа в виде ArrayBuffer, ArrayBuffer, Document, JavaScript Object или DOMString в зависимости от значения свойства responseType.
responseType — является перечислимым значением, которое возвращает тип ответа.
timeout — определяет количество миллисекунд, которое запрос будет выполняться, до того, как будет автоматически прерван.

События:

load — происходит когда ресурс и его зависимые ресурсы закончили загружаться.

XMLHttpRequest() — Конструктор, создаёт новый объект XMLHttpRequest.

Пример универсального кода по загрузке:

window.load = function (url, onSuccess, onError) {
      var xhr = new XMLHttpRequest();
  
      xhr.responseType = 'json';
  
      xhr.addEventListener('load', function () {
        if (xhr.status === 200) {
          onSuccess(xhr.response);
        } else {
          onError('Cтатус ответа: ' + xhr.status + ' ' + xhr.statusText);
        }
      });
  
      xhr.addEventListener('error', function () {
        onError('Произошла ошибка соединения');
      });
  
      xhr.addEventListener('timeout', function () {
        onError('Запрос не успел выполниться за ' + xhr.timeout + 'мс');
      });
  
      xhr.timeout = 10000; // 10s
  
      xhr.open('GET', url);
      xhr.send();
    }

JSON

MDN.Работа с JSON

Объект JSON (JavaScript Object Notation) — текстовый формат обмена данными, основанный на JavaScript объектах.

Методы:

JSON.parse() — разбирает строку JSON, возможно с преобразованием получаемого в процессе разбора значения.
JSON.stringify() — преобразует значение JavaScript в строку JSON, возможно с заменой значений, если указана функция замены, или с включением только определённых свойств, если указан массив замены.

HTTP

MDN.Обзор протокола HTTP

HTTP (Hypertext Transfer Protocol) — это прикладной протокол для передачи гипертекстовых документов, таких как HTML.

Методы HTTP запроса — указывают, какое желаемое действие выполнится для данного ресурса.

Коды ответа HTTP — показывают, был ли успешно выполнен определённый HTTP запрос.

XML

XML (Extensible Markup Language) — язык разметки подобный HTML.

Модули

Модуль

Обособленная часть программы (ограниченная в доступности к служебным переменным с помощью функций), которая может заменяться, использоваться повторно в разных  местах программы (или даже в нескольких проектах). Или же часть программы, решающая узкий набор задач.

Модуль это:

функция — отдельная часть файла, которая может несколько раз использоваться в одном файле
узкоспециализированный код  — код, который решает ровно одну задачу (например, валидация формы или работа всплывающего окна)
несколько функций, записанных в объект  — (неймспейс, пространство имен) например, объект Math. Набор функций и значений из одной области
набор функций (библиотека)  — полезный набор инструментов, который может переноситься из проекта в проект

Области видимости в модулях:

Локальная — используется для служебных функций и значений, которыми нельзя пользоваться снаружи
Глобальная — интерфейс функции. То, чем можно пользоваться снаружи модуля

Инкапсуляция

Изоляция служебных переменных, объектов, функций с целью сокрытия доступа и предотвращения возможности управления ими.

Локальные константы — служебные значения, которые используются только в одном модуле
Вспомогательные функции  — функции, которые используются во внутренних расчётах, но снаружи не нужны
Служебные переменные  — вспомогательные переменные, названия которых могут пересекаться с названиями переменных в других модулях

Экспорт

Возможность использовать части модуля в других модулях, для этого они должны быть доступны снаружи.

Порядок подключения модулей: сначала подключаются модули, которые не зависят от других модулей и только потом подключаются зависимые модули.

Чтобы воспользоваться значениями одного модуля из другого необходимо экспортировать их в глобальную область видимости window.

Вариант 1:

// Модуль util.js
(function () {
  var ESC_KEYCODE = 27;
  
  window.util = {
    isEscEvent: function (evt, action) {
      if (evt.keyCode === ESC_KEYCODE) {
         action();
       }
    }
  };
})();

Вариант 2:

// Модуль util.js
window.util = (function () {
   var ESC_KEYCODE = 27;
  
  return {
    isEscEvent: function (evt, action) {
      if (evt.keyCode === ESC_KEYCODE) {
         action();
       }
    }
  };
})();

Затем, чтобы воспользоваться экспортированными значениями необходимо импортировать их из глобальной области видимости window.

// Модуль dialog.js
(function () {
  console.log(window.util.ESC_KEYCODE);
  console.log(window.util.ENTER_KEYCODE);
})();

Объекты для хранения значений именуются также как сам модуль. Если имя модуля состоит из нескольких слов, то они записываются через дефис, а объект в котором хранится экспортируемое значение записывается по правилам именования переменных — через camelCase.

// Модуль create-element.js
(function () {
  window.createElement = function() {
     // здесь какой-то код
  };
})();

Алгоритм разделения проекта на модули

Разделить файлы логически, по тому, что они делают  — сделать так, чтобы код решающий разные, непересекающиеся задачи, хранился в разных файлах.
Найти повторяющийся код внутри модулей, вынести в функцию  — принцип DRY — не нужно писать один и тот же код несколько раз. Если задача уже была решена, можно воспользоваться готовым решением.
Eсли один и тот же код используется в нескольких файлах — вынести его в отдельный модуль  (расширение принципа DRY на уровень проекта).
Убедиться, что в модулях используется пространство имен  (один модуль — одно значение).

Прочее

Алгоритмы

Законченный и упорядоченный набор действий, которые нужно предпринять, чтобы достигнуть прогнозируемого результата

Подключение скриптов на страницу

Скрипты подключаются к странице с помощью тега <script> двумя способами:

Инлайновый код пишется внутри тега script.
```
<body>
  <script>console.log('Hello World');</script>
</body>
```
Внешний файл с кодом. Тегу script добавляется атрибут src, в котором указывается путь до файла со скриптом.
```
<body>
  <script src="script.js"></script>
</body>
```

Эти два способа не сочетаются друг с другом. Если у тега script указан атрибут src, инлайновый код игнорируется и не выполняется, поэтому он должен находиться в другом теге script.

Скрипты выполняются по мере подключения на страницу. Если за тегом script находится разметка, она не отрисуется пока не выполнится скрипт (в случае с инлайновым кодом) или пока он не скачается с внешнего ресурса и не будет выполнен (при подключении внешнего файла).

Атрибуты:

async — скрипт не блокирует выполнение страницы. Скрипт с таким атрибутом начинает загружаться сразу как встретится в разметке, а выполнится как только загрузка закончится.
defer — работает как async с той разницей, что код выполняется после полной загрузки страницы.

Советы:

Локальные скрипты приложения, которые работают с разметкой, лучше подключать внизу страницы, перед закрывающим тегом </body> потому что на момент их исполнения, элементы из DOM-дерева будут отрисованы и доступны.
Библиотеки, счетчики и прочие внешние ресурсы, как правило, подключаются в </head>. Это гарантирует, что библиотека всегда будет доступна для других скриптов, вне зависимости от того, где и как они были подключены.

Оптимизация

Дебаунс (устранение «дребезга») — обрабатывается только последний сигнал, частота может оказаться разной.

Tротлинг (прореживание кода) — сигнал обрабатывается не чаще, чем раз в определенное время, но с постоянной частотой.

Отладка

debugger — открывает доступ к любому доступному в конкретном окружении отладочному функционалу, например к установке точек останова (т.н. брейкпоинтов).

Прочее

MDN.Лексический синтаксис MDN.Strict mode MDN.Список зарезервированных слов

Конспекты по frontend

JavaScript

Глобальные объекты

Значения

Числа и даты

Обработка текста

Инструкции и объявления

Переменные и константы

Управление потоком выполнения

Циклы и Итерации

Прочее

Выражения и операторы

Функции

Объявление функций

Область видимости функций

Замыкания

Свойства и методы

Прочее

Типы и структуры данных

Типы данных

Преобразование типов данных

Структуры данных

Объекты

Передача по ссылке

Методы объектов

Прочее

Массивы

Свойства и методы

Сортировка массива

Применение методов Array к псевдомассиву

DOM

Document

Node

NonDocumentTypeChildNode

Element

HTMLElement

Drag and drop

Прочее

События

Event

EventTarget

MouseEvent

KeyboardEvent

Формы и валидация

HTMLFormElement

HTMLInputElement

HTMLSelectElement

ValidityState

Прочее

Canvas

CanvasRenderingContext2D

Сеть

JSONP

AJAX

XMLHttpRequest

JSON

HTTP

XML

Модули

Модуль

Инкапсуляция

Экспорт

Алгоритм разделения проекта на модули

Прочее

Алгоритмы

Подключение скриптов на страницу

Оптимизация

Отладка

Прочее

HTML

CSS