JavaScript: Справочное руководство

Содержание

История появления
1. Создатель языка о его происхождении
Введение в JavaScript
Комментарии
JavaScript в HTML
Переменные
1. let
2. const
3. var
Операторы
Выражения и инструкции
Типы данных
Управляющие конструкции
Функции
Объекты
Массивы
Встроенные объекты
Объектно-ориентированное программирование
BOM (Объектная модель браузера)
DOM (Объектная модель документа)
События

История появления

Основатель языка, Брендан Айк (англ. Brendan Eich) – программист и создатель языка программирования JavaScript. На момент 2024 года исполнительный директор Brave Software. Был нанят в компанию Netscape 4 апреля 1995 года, где была поставлена задача внедрить язык программирования Scheme или что-то похожее в браузер Netscape. Поскольку требования были размыты Айка перевели в группу ответственную за серверные продукты, где он проработал месяц занимаясь улучшением протокола HTTP. В мае разработчик был переброшен обратно, в команду, занимающуюся клиентской частью (браузером), где он немедленно начал разрабатывать концепцию нового языка программирования.

Первоначально язык назывался LiveScript и предназначался как для программирования на стороне клиента, так и для программирования на стороне сервера.

JavaScript изначально был придуман для браузера Netscape Navigator. Microsoft первый кто позаимствовал этот язык для своего браузера Internet Explorer, добавив в него свои новые возможности. На что Netscape подала в суд в результате чего компания Microsoft выпустила аналог языка JavaScript, названный под именем JScript. Первым браузером, поддерживающим эту реализацию, был Internet Explorer 3.0.

По инициативе компании Netscape была проведена стандартизация языка ассоциацией ECMA. Стандартизированная версия имеет название ECMAScript. Первой версии спецификации соответствовал JavaScript версии 1.1. JavaScript после своего появления отличался оригинальностью и настолько понравился, что его начали портировать не только в браузеры, но и в другие среды.

Создатель языка о его происхождении

Создатель языка JavaScript Brendan Eich поделился историей происхождения языка и объяснил почему он такой, какой есть:

JS был обязан «выглядеть как Java», только поменьше, быть эдаким младшим братом-тупицей для Java. Кроме того, он должен был быть написан за 10 дней, а иначе мы бы имели что-то похуже JS.

что-то вроде PHP, только еще хуже. Его босс Netcsape быстро «зарубил» (в июле 1995, если мне не изменяет память; я сдлелал JS в начале/середине мая), т.к. это был уже третий язык после Java и JS. Было и так трудно обосновать то, что у нас 2 новых языка программирования для web.

В то время мы должны были двигаться очень быстро, т.к. знали, что Microsoft идет за нами.

Считайте, что JavaScript (пожалуйста, только не «JScript») спас вас от VBScript.

10 дней на то, чтобы сделать лексер, парсер, компилятор в байткод (bytecode emitter), интерпретатор, встроенные классы и декомпилятор. Помощь была только с файлом jsdate.c — от Ken Smith из Netscape (который, по нашему излишне оптимистичному соглашению, склонировал java.util.Date — Y2K баги и т.д. Джеймс Гослинг...).

Простите, времени было мало для того, чтобы сделать правильную оптимизацию хвостовой рекурсии. 10 дней почти без сна, чтобы сделать JS с чистого листа, заставить его «выглядеть как Java» (я сделал, чтобы он выглядел как C), и тайком протащить туда его спасительные фишки: first class functions (замыкания сделал позже, но они были частью плана сразу) и прототипы (примерно как в языке Self).

I'll do better in the next life.

Введение в JavaScript

JavaScript – алгоритмический язык программирования, интерпретируемый язык сценариев, основан на синтаксисе C и Java.

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

Популярность языка

JavaScript является самым популярным языком программирования, используемый для frontend-разработки на стороне клиента. Согласно рейтингу TIOBE Index, базирующемуся на данных поисковых систем Google, Bing, Yahoo!, Wikipedia, Amazon, YouTube и Baidu, на начало 2023 года JavaScript находится на 🏆 7 месте, постоянно улучшая свои позиции за последние несколько лет. 🏆 1 место в рейтинге GitHub 2021 года. 🏆 7 место в рейтинге IEEE (Институт инженеров электротехники и электроники) в 2022 году. По опросам разработчиков на StackOverflow в 2022 году JavaScript занимает 🏆 1 место уже 10 лет подряд как самый часто используемый язык программирования.

Некоторые отличительные особенности JavaScript:

Регистрозависимые конструкции, функции и операторы;
Все идентификаторы чувствительны к регистру;
В названиях переменных можно использовать буквы, символ подчёркивания, символ доллара, арабские цифры;
Названия переменных не могут начинаться с цифры.

Нотация – устоявшиеся правила записи

Все имена маленькими буквами;
На стыке слов большая буква (camelStyleNotation);
Переменные и свойства — существительные;
Массивы и коллекции — существительные во множественном числе;
Функции и методы — глаголы;
Названия классов с Большой буквы.

JavaScript в HTML

JavaScript может быть встроен в код HTML с помощью тега <script>. Если подключается внешний файл скриптов, то используется атрибут src в котором указывается ссылка на файл скрипта.

<script src="outer.js"></script>

Встроенный JavaScript-код заключается между тегами <script></script>. Встроенный JavaScript-код будет игнорироваться если у тега указан атрибут src.

<script>
// Код на JavaScript
</script>

Переменные

Переменная – именованный участок памяти;
Переменные объявляются ключевыми словами let, const и var;
Переменные принимают тот тип данных, который в них присваивается;
В JavaScript допускается присваивать значение переменной, которая еще не определена, но считается хорошим тоном сначала объявить переменную одним из ключевых слов (пункт 2);
JavaScript язык с динамической типизацией и переменные являются универсальными для всех типов данных, т.е. способны хранить значения любого типа.

Объявление и инициализация переменных

// Объявление переменных
const a
let b, c, d
var e

// Иницилизация переменных
const a = 15
let b = c = d = 50
var e = 'string', f = false, g

// Сокращенная запись
x += 1 // Сокращенная запись x = x + 1
// Доступна и для операторов "+", "-", "*", "/", "%"
i++ // инкремент
i-- // декремент
++i // преинкремент
--i // постдекремент

// Пример
var i = 1
let a = i++ // -> a = 1; i = 2;
let b = ++i // -> b = 3; i = 3;

let

Имеет блочную область видимости (как и const);
Переменная объявляемая как let ожидает, что её значение может изменяться;
Переменные let и const не участвуют в механизме "поднятия" (hoisting).

const

Переменные const (как и let) доступны только внутри блока, в котором они были объявлены (например, внутри цикла или условного оператора);
Главное отличие const в том, что значение переменной присваивается один раз и не может быть изменено позже;
В то же время для сложных типов данных таких как массив или объект допускается изменение содержимого, неизменным остаётся лишь ссылка на эту переменную;
Использование const для любой объявляемой переменной, если её значение не должно изменяться, является хорошей практикой, т.к. явно указывает на константное поведение переменной.

const arr = [1, 2, 3]
arr.push(4)
console.log(arr) // -> [1, 2, 3, 4]

var

var был первым способом объявления переменных в JavaScript, до появления стандарта ECMAScript 6 (ES6) в котором были добавлены let и const;
При использовании var переменная может быть объявлена повторно без выдачи ошибки;
Имеют функциональную область видимости (function scope), что означает, что они доступны только внутри функции, в которой они были объявлены;
Если переменная объявлена внутри блока кода (например, внутри цикла или условного оператора), она все равно будет доступна за пределами этого блока;
Переменные var участвуют в механизме "поднятия" (hoisting);
Используйте var только в случаях, когда вы знаете, что вам нужна функциональная область видимости, и вам нужно поведение поднятия (hoisting). В остальных случаях рекомендуется использовать let и const.

Операторы

Арифметические операторы

+ – плюс
- – минус
* – умножить
/ – разделить
% – целочисленный остаток от деления

Операторы сравнения

== – сравнение
=== – сравнение с учетом типа
!= – не равно
!== – не равно с учетом типа
> – больше
< – меньше
>= – больше или равно
<= – меньше или равно

Логические операторы

(в порядке приоритета)

! НЕ (отрицание)
&& И (конъюнкция)
|| ИЛИ (дизъюнкция)

1 && 2 // -> 2, значение на котором скрипт остановился
1 && 0 // -> 0
0 && 1 // -> 0, т.к. первый операнд false и нет смысла идти дальше
0 || 'false' // -> "false"

Операторы сравнения возвращают булево значение либо true либо false.

Параметры операторов называются операндами. Операторы у которых два операнда называются бинарными, один операнд — унарными, три — тернарными (только один унарный оператором ! (логическое "не"));

Выражения и инструкции

Выражения

Expression

5 + 10
'John'
!false

Инструкции

Statement

5 + 10
'John'
!false

Типы данных

Тип данных – набор операций, которые можно выполнить над данными. В JavaScript есть формально 8 типов:

Boolean – логический;
Number – числовой;
BigInt – числа произвольной длины;
String – строковый;
Array – массив;
Object – объект;

Тривиальные типы:

undefined – неопределенный тип, любая необъявленная переменная имеет такой тип, а также объявленные переменные, которым еще не присвоено значение или несуществующие свойства объекта;
null – отсутствие значения. Если переменная имеет значение null, то это означает, что в ней ничего не хранится.

Логический тип

Может принимать константу true или false. При проверке значения операндов преобразуются в логический тип.

Создание

const b = new Boolean(value) // где value значение для булева типа

В JavaScript есть как Boolean-объекты, так и примитивные Boolean значения. Не смешивайте их. Объект – это объект. В частности, JavaScript любой объект считается true, например при неявном приведении типа в операторе if.

const x = new Boolean(false)

if(x) {
 // этот код будет выполнен
}

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

const x = Boolean(expression) // предпочтительно
const y = new Boolean(expression) // не используйте

// с использованием двойного отрицания:
const z = !!expression

На основании «правила лжи» происходит приведение к логическому типу:

само значение false
0 или -0 (число ноль)
'' (пустая строка)

Тривиальные типы

Значение NULL
undefined
NaN (Not a Number)

В современном JavaScript-программировании new Boolean не используется.

Числа

Создание

// Полня форма
let n = new Number(value) //где value — числовое значение
//Литеральная форма записи
let n = 25
//Приведение к Number
let n = '123'
Number(n) //123
let n = '132A'
Number(n) //NaN

В числовой тип входят как целые числа, так и дробные. Экспоненциальные: $5E3$ (пять на 10 в третьей степени).

В JavaScript можно записать числа в 16-ричной или 8-ричной системе счисления, но только с целыми числами. Например, const y = 0xFF;. Префиксом числа восьмеричной системой счисления является цифра 0. Пример: const z = 040; будет 32 (в 10-тичной).

Особые числовые значения

В тип Number входят не только числа, но и еще три значения:

+бесконечность (Infinity);
-бесконечность (-Infinity);
особое значение NaN (Not a Number – значение числового типа не число). Возникает когда вычисление просто не может быть. Например:

const x = 0 / 0 // -> NaN, деление на ноль
const y = Math.sqrt(-1) // -> NaN, отрицательная степень

// Является ли значение числового типа не числом?
isNaN('x' * 10) // -> true

// Является ли значение бесконечным?
isFinite() // false, если значение NaN или ±Infinity, иначе true

Строки

Строка – набор символов, обрамляется в апострофы или двойные кавычки.

Экранирование символов

Экранирование символов – вставка специальных символов через знак обратного слэша после которого идет определенный символ.

\' – одинарные кавычки (апостроф);
\" – двойные кавычки;
\\ – обратный слэш (\u005C);
\b – backspace;
\f – form feed;
\n – переход на новую строку (\u000A);
\r – возврат каретки (\u000D);
\t – табуляция (\u0009);
\v – вертикальная табуляция;
\0 – символ NULL (\u0000);
\ddd – octal sequence (3 digits: ddd);
\xdd – hexadecimal sequence (2 digits: dd). Символ Latin-1, заданный двумя шестнадцатеричными цифрами;
\udddd – unicode sequence (4 hex digits: dddd). Символ Unicode, заданный четырьмя шестнадцатеричными цифрами.

В JavaScript все хранится в кодировке Unicode. Это означает, что мы можем использовать любые символы Unicode прямо в строке (в Юникоде первые 128 символов совпадают с соответствующими символами в ASCII).

// Полное обозначение символа Unicode
const s1 = '\u2014' // Длинное тире (—)
'\u2564' // Денежный знак валюты тенге (₸)

// Шестнадцатеричное
const s2 = '\x20' // Пробел

Конкатенация

Конкатенация – объединение (сцепление) строк.

"I " + 'am ' + `in ` + "love " + 'with ' +  ` JavaScript`

Сравнение строк

Строки сравниваются в соответствии со своей позицией в Unicode.

'a' > 'A' // -> true

Шаблонные литералы

Шаблонные литералы (англ. Template Literals, неоф. Template Strings или "шаблонные строки") – способ создания строк, позволяющий встраивать переменные и выражения непосредственно в строку, а также писать многострочные строки и теговые шаблоны.

Синтаксис создания таких строк определяется использованием обратных кавычек (англ. backticks), для вставки выражений используется конструкция ${выражение}:

const name = 'John'
let age = 33

console.log(`Hi, My name is ${name}. Next year I'll turn ${age + 1} years old!`)

Шаблонные литералы появились в стандарте ECMAScript 2015 (ES6) и призваны обеспечить более удобный и гибкий способ создания строк благодаря лучшей читабельности и простотой работы с динамическими данными по сравнению с традиционными двойными и одинарными кавычками.

Синтаксис создания таких строк определяется использованием обратных кавычек (англ. backticks), для вставки выражений используется конструкция ${выражение}:

const name = 'John'
let age = 33

console.log(`Hi, My name is ${name}. Next year I'll turn ${age + 1} years old!`)

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

Шаблонные литералы появились в стандарте ECMAScript 2015 (ES6) и призваны обеспечить более удобный и гибкий способ создания строк благодаря лучшей читабельности и простотой работы с динамическими данными по сравнению с традиционными двойными и одинарными кавычками.

Многострочный текст

Шаблонные литералы поддерживают многострочный текст без необходимости использования спецсимволов для перевода строки. Это делает их более удобными для написания кода, особенно для создания HTML-шаблонов или SQL-запросов.

// Создание HTML-кода
const term = 'Template Literals'
const description = 'are literals enclosed by backtick (`` ` ``)'

const html = `
<dl>
  <dt>${term}</dt>
  <dd>${description}</dd>
</dl>`

// Создание SQL-запросов
const id = 123
const sql = `SELECT *
FROM users
WHERE id = ${id}`

Тегированные шаблонные строки

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

function highlight(strings, nameExp, ...values) {
  // Обработка строк и значений
  strings[0] // -> "Hello, "
  strings[1] // -> "! You're "
  strings[2] // -> "years old"
  values[0] // -> 32
  nameExp // "Jane"
  return `${strings[0]}${nameExp} and Welcome${strings[1]}turning ${values[0] + 1}${strings[2]} next year.`
}

let name = 'Jane'
let age = 32
let message = highlight`Hello, ${name}! You're ${age} years old`
console.log(message)
// Hello, Jane and Welcome! You're turning 33 years old next year.

Безопасность

Использование шаблонных литералов делает код более безопасным, так как автоматически осуществляется экранирование символов. Это помогает предотвратить некоторые виды атак, такие как атаки внедрения SQL.

В шаблонных строках, как и в обычных строках, также можно использовать спецсимволы, такие как перенос строки \n или символ возврата каретки \r. Над шаблонными строками, как и с обычными, по-прежнему можно использовать встроенные функции JavaScript или методы строк, такие как .slice() или .toLowerCase().

Манипуляции с типами

'2' + '2' // -> строка "22"
2 + '2' // -> строка "22" (строка приоритетнее числа)
'' + true // -> строка "true" (строка приоритетнее булев типа)
2 + true // -> число 3 (число приоритетнее булев типа)
'2' * 10 // -> число 20 (если строка может быть преобразована в число)
'x' * 10 // -> NaN (Not a Namber)

const x = 'x' * 10 // -> NaN
const y = 'y' * 10 //-> NaN
// Однако
x == y // -> false, т.к. NaN != NaN

Для проверки типа есть оператор определения типа typeof возвращающая строку соответствующего типа.

typeof 5 // "number"
typeof true // "boolean"
typeof '5' // "string"

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

В JavaScript основными преобразованиями типов являются строковые, числовые и логические.

Преобразование в число

Числовое значение дают следующие преобразования:

Умножение строки (которая состоит только из чисел) на число;
Передать значение как аргумент функции Number;
parseInt() – целое число из значения до тех пор, пока не встретится нечисловое значение;
parseFloat() – дробное число из нечислового значения, тоже что и parseInt(), но допускается вхождение символа точки.

'5' * 1 // -> целое число 5
'5.5' * 1 // -> дробное число 5.5

parseInt('100.1JS') + 1 // -> целое число 101
parseFloat('10.5JS') // -> дробное число 10.5

Number(true) // -> число 1
Number(false) // -> число 0

Преобразование в строку

Строковое преобразование имеет приоритет при попытке сложения двух значений;
Передача значения как аргумент функции String;
Если в объекте реализован метод toString() он будет использован при попытке преобразования объекта в строку.

5 + '' // -> строка '5'
String(true) // -> строка "true"
false + '' // -> строка "false"

Логическое преобразование

Логическое сравнение преобразуется для значений при попытке их логического сравнения (==, ===, &&, || и !), в условных конструкциях if, while, switch;
В логическое значение преобразует функция Boolean().

!!5; // -> true
Boolean(15); // -> true

Таблица преобразования типов

Значение	Boolean	Number	String
true	true	1	"true"
false	false	0	"false"
0	false	0	"0"
1	true	1	"1"
"0"	true	0	"0"
"1"	true	1	"1"
NaN	false	NaN	"NaN"
Infinity	true	Infinity	"Infinity"
-Infinity	true	-Infinity	"-Infinity"
""	false	0	""
"строка"	true	NaN	"строка"
[ ]	true	0	""
{ }	true	NaN	"[object Object]"
[10]	true	10	"10"
[10,20]	true	NaN	"10,20"
["строка"]	true	NaN	"строка"
["один","два"]	true	NaN	"один,два"
function(){}	true	NaN	"function(){}"
null	false	0	"null"
undefined	false	NaN	"undefined"

Управляющие конструкции

if

Управляющая конструкция if выполняет инструкции если условие истинно.

В if может быть сколько угодно else if. Последнее else (без условий) можно опустить, хотя рекомендуется его использовать как «отстойник».

if (condition) {
   statement1
   statement2
} else if (condition 2) {
   statement3
   statement4
} else {
   statement5
   statement6
}

Тернарный оператор

Тернарный оператор – это оператор с тремя операндами. В JavaScript единственный тернарный оператор это сокращенный вариант записи условной конструкции if..else...

const result

// Обычная условная конструкция
if (условие)
  result = 'условие истинно'
else
  result = 'условие ложно'

// То же условие через тернарный оператор
b = (a > 1) ? 'условие истинно' : 'условие ложно'

Скобки в условии тернарного оператора можно опустить, но для лучшей читаемости не рекомендуется.

switch

Оператор переключения switch позволяет проанализировать множество вариантов значений, используя для анализа числовое или строковое значение.

Внутри конструкции switch обычно применяют оператор break, т.к. в отсутствии данного оператора если switch встретит значение которое соответствует значению в case, он выполнить все последующие (нижележащие) инструкции игнорируя все case словно их нет.

Оператор default сработает если интерпретатор не попадет ни в один case.

const a = 2

switch (a) {
  case 0:
  case 1:
  case 2:
    console.log('Two')
    break;
  case 3:
  case 4:
  case 5:
  default:
    alert("It's many!")
}

for

Цикл for – многократное выполнение одних и тех же действий заранее известное количество раз.

Итерация – однократное выполнение (шаг) цикла.

Как работает цикл for

for (часть A; часть B; часть C)
  часть D (тело цикла)

Когда интерпретатор встречает цикл for, он сперва заходит в часть А и выполняет то, что там написано ровно один раз. часть В выступает как условие, если оно истинно, то интерпретатор заходит в часть D (тело цикла), после выполнения которого переходит в часть С. Потом возвращается в часть В (проверяет условие) и если там истина, то переходит в часть D и далее как по треугольнику происходит переход:

часть В => часть D (тело цикла) => часть С

До тех пор пока часть В не вернет false

Любую из частей цикла for можно опустить, главное чтобы присутствовали точки с запятой как часть синтаксиса.

Если в часть А необходимо выполнить несколько инструкций, то разделять их следует запятой.

Цикл for с пустым телом

Ниже цикл возводит значение переменной result в 10-ую степень.

for (let i = 1, result = 2, exp = 10; i < exp; result += result, i++){}
console.log(result) // -> 1024

Цикл for с continue и break

continue в циклах for, while и do..while прерывает текущую итерацию и переход к следующей.

break немедленно заканчивает цикл и выходит за операторные скобки.

for (let i = 0; i < 10; i++) {
 if (i == 4)
   continue

 if (i == 8)
   break
}

while

Условие проверяется ПЕРЕД очередным проходом;
Выполняется пока условие истинно;
Если условие изначально ложно – не выполнится ни разу.

let num = 1

while (num < 1000) {
 num *= 2
 if(num == 32) continue
 if(num == 512) break
 console.log(num)
}

do..while

Условие проверяется ПОСЛЕ очередного прохода;
Выполняется пока условие истинно;
Если условие изначально ложно – выполнится хотя бы один раз.

let num = 1

do {
   num *= 2
   if (num == 32) continue
   else if (num == 512) break
   console.log(num)
} while (num < 1000)

Если в теле цикла do..while все лишь одна инструкция, то операторные скобки можно опустить.

let a = 0
do a++
while (a <= 5) // Одна инструкция в теле цикла
console.log(a) // -> 5

for..in

Предназначен для прохода по массивам, коллекциям, объектам.

for (let prop in navigator) {
  console.log(prop)
}

Метки

Иногда бывает нужно прервать вложенный цикл или цикл с n-количеством вложенности. В JavaScript это можно организовать с помощью меток. Названия меток не должны начинаться с цифры.

let i = 1

outer: while (i < 10) {
 inner: for (let j = 1; j <= i; j++) {
   if (j > 2)
    continue inner
   if (i * j > 10) {
     console.log(i, j)
     break outer
   }
 }
 i++
} // -> 6, 2

try..catch..finally

try..catch..finally – оператор обработки исключений служит для написания кроссбраузерных приложений. Так как при возникновении ошибки в JavaScript исполнение программы останавливается, конструкция try..catch..finally позволяет пропустить ошибочную конструкцию и перейти к следующей.

Сначала JavaScript пытается выполнить все что находится в блоке try, если внутри блока try ошибки не возникнет, то содержимое блока catch игнорируется.

Содержимое блока finally выполняется при любом случае, вне зависимости от того возникла ошибка или нет.

Разница между кодом в блоке finally и кодом в блоке всей этой конструкции проявляется в JavaScript только в случае если в блоке catch произойдет ошибка.

В случае возникновения ошибки в catch программа остановится за исключением если есть блок finally. В таком случае блок finally выполнится, а все что после него нет.

Допускается вкладывать конструкции try..catch..finally внутри друг друга.

try {
  console.log('До ошибки в блоке try')
  throw new Error() // В случае ошибки попадаем в блок catch
   console.log('После ошибки в блоке try')
} catch(e) { // В переменную "e" заносится информация об ошибке
  console.log('Сообщение об ошибке: ' + e.message)
} finally {
  console.log('Сообщение из блока «finally»')
}

console.log('Сообщение после конструкции try..catch..finally')

Функции

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

Имена функций чувствительны к регистру;
Если какой-либо фрагмент кода повторяется или предполагается использовать несколько раз, то это явный признак того, чтобы завести функцию (подпрограмму);
Внутри функции доступен массив arguments, в котором находятся переданные аргументы функции, а сама функция может быть продекларирована без единого аргумента;
Если функция ожидает два параметра, а передаем мы только один, то второй аргумент будет иметь значение undefined.

function sayHello(name) { // Формальные параметры
  if (name == null)
    name = 'Stranger'
  console.log('Hello, ' + name)
}

sayHello('John') // -> Hello, John
sayHello('Jane') // -> Hello, Jane
sayHello() // -> Hello, Stranger

Области видимости

Глобальные переменные объявляются до описания функций, объявляются вне тела функции и могут быть причиной сложно находимых ошибок;
Локальные переменные явно объявляются в теле функции и аргументы функции всегда локальные переменные;
У каждой функции своя область видимости;
Локальные переменные «живут» столько сколько живет функция.

В примере ниже в функции foo() произойдёт перезапись глобальной переменной x. В функции же bar() с использованием ключевых слов var, let, const.

var x = 'x-global'

function foo () {
  x = 'x-local-foo'
  return x // Возвратит глобальную переменную "x"
}

foo() // -> x-local-foo

function bar () {
 var x = 'x-local-bar'
 return x // Возвратит локальную переменную "x"
}

bar() // -> x-local-bar

Скорее правильней считать переменные не как глобальные или локальные, а в контексте вложенных функций, как родитель-ребенок. В примере ниже вызов переменной x в функции inner() произойдет из глобальной области видимости, т.к. переменная x не продекларирована внутри самой функции inner() и её родительской функции outer(). Вызов переменной y произойдет из родительской функции outer(), что касается переменной z, то она передается как аргумент функции inner(), что сама по себе является локальной.

function echo (str) {
  console.log(str.toString())
}

let x = 'x-global', y = 'y-global', z = 'z-global'

function outer() {
  let y = 'y-local'
  function inner(z) {
    echo(x) // -> x-global
    echo(y) // -> y-local
    echo(z) // -> z-local
    return 'inner function'
  }
  return inner('z-local')
}

outer() // -> inner function

В этом примере нельзя вызвать функцию inner() из глобальной области видимости. Она может быть вызвана только внутри функции родителя — outer().

Засада с областью видимости

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

var x = 100

function foo(x) {
  if(x)
    x = 10
  else
    var x = 20
}

foo(true)
console.log(x) // -> 100

Но при выполнении кода мы получим значение 100, т.к. JavaScript перед исполнением кода, помимо синтаксической проверки также исправляет код и выполнит его так, как если бы он выглядел следующим образом:

var x = 100

function foo(x) {
  var x
  if (x)
    x = 10 // это и
  else
    x = 20 // это относится к локальной области видимости
}

foo(true)
console.log(x) // -> 100

Функция как тип данных

Функция в JavaScript является таким же типом данных, как Boolean, String, Number, Object, ... Это значит, что с функциями можно производить такие же действия, как и с обычными типами.

function echo(str) {
  console.log(str.toString())
}

let print = echo
print('Теперь «print» это точная копия функции «echo»')

Свойства функций

имя_функции.length – возвратит количество ожидаемых параметров функции.

function foo(arg1, arg2, arg3) {}
// Сколько параметров ожидает функция?
console.log(foo.length); // -> 3

При создании функции автоматически создается объект arguments. Свойство arguments.length возвращает количество фактически переданных параметров.

function getArgs() {
  return arguments.length
}

getArgs(1, 2, 3, 4, 5, 6, 7, 8, 9) // -> 9

Все переданные параметры функции доступны в объекте arguments каждый под своим порядковым номером начиная с нуля.

function sum() {
  let i = result = 0
  while (arguments[i]) {
    result += arguments[i]
    i++
  }
  return result
}

console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9)) // -> 45

Анонимная функция

Анонимная функция – функция, объявляемая без определённого имени, который мог бы служить идентификатором для доступа к ней. В примере ниже анонимная функция присваивается переменной sum после чего, sum() становится функцией.

const sum = function(val) {
  return val + val;
}

sum(5) // -> 10

Разница между функциями декларированные словом function и функциями присваиваемые переменным в том, что первых можно вызывать до её объявления, т.к. в этом случае сработает механизм hoisting (поднятие).

В коде ниже вызов функции foo() не вызовет ошибку, в то время как вызов bar() выдаст ошибку:

TypeError: bar is not a function

Так как на момент выполнения скрипта функция bar() не была создана, а появилась только как результат выражения присваивания переменной.

foo()
bar() // -> TypeError: bar is not a function

const bar = function(args) {
  statements
}

function foo(parameters) {
  statements
}

Стрелочные функции

Стрелочные функции предоставляют более краткую форму записи функций.

// Стандартная функция
function sum(a, b) {
  return a + b
}

// Стрелочная функция
const add = (a, b) => a + b

Особенности стрелочных функций

Если функция принимает только один параметр, скобки вокруг параметров можно опустить;
Если тело функции состоит из одного выражения, то его не обязательно заключать в фигурные скобки, а оператор return можно также опустить;
Стрелочные функции не создают собственный контекст this, вместо этого они заимствуют контекст от родительской области видимости;
Стрелочные функции не могут быть использованы с оператором new для создания экземпляров объектов;
Стрелочные функции не имеют доступа к объекту arguments.

Замыкания

Замыкания – способность функции захватывать переменные родительского контекста.

function makeAdd(base) {
  return function(num) {
    return num + base;
  }
}

const addTen = makeAdd(5)
addTen(10) // -> 15

Пример со сравнением чисел

При первом вызове compare(10) функция возвратит внутреннюю функцию при этом сохранив в переменной x значение 10.

function compare(x) {
   return function innerCompare(y) {
      if (x === y) return null
      return x < y
   }
}

const checkNum = compare(10) // -> function "innerCompare"
checkNum(9) // -> false
checkNum(10) // -> null
checkNum(11) // -> true

Рекурсия

Рекурсия – вызов функции саму себя. Нахождение факториала числа наиболее распространённый пример рекурсивного вызова функции.

function factorial(n) {
  if(n === 0) return 1
  return n * factorial(n - 1)
}

factorial(5) // -> 120

Поднятие (Hoisting)

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

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

Здесь следует уточнить, что "поднимаются" только объявления, но не инициализация (присваивание значений).

Поднятие функций

Функция hi() исполняется без ошибок невзирая на позднее объявление:

hi() // -> "Greetings"

function hi() {
  return "Greetings"
}

Поднятие имён переменных

Одно из отличий var перед let и const в том, что последние имеют блочную область видимости:

console.log(x) // -> undefined
var x = 1

console.log(y) // -> ReferenceError:
// Cannot access 'y' before initialization
const y = 2

Объекты

Объектный тип данных – входят все объекты JavaScript (свойства, методы);
Объект – коллекция данных (свойств), функций (методов), и, возможно, других объектов;
Объект явно создается с помощью оператора new, литерала объекта {} или метода Object.create();
Объект явно уничтожается при уничтожении переменной или присваивании переменной значения null;
Когда мы присваиваем значение некоему свойству объекта, которого нет в объекте, происходит создание свойства;
В JavaScript почти всё является объектом. Даже примитивные типы данных при необходимости могут "упаковываться" в объекты-обёртки. Например, const x = 17.5 эквивалентно const x = new Number(17.5).

Создание объекта

// Создание объекта с помощью конструктора Object()
let Book = new Object()

// Сокращённая запись с помощью литерала объекта
let User = {
  say() {
    console.log('Hello!')
	}
}

// Создание объекта с методом Object.create() на основе прототипа (User)
const John = Object.create(User)
John.say() // -> "Hello!"

// Создание свойств
Book.title = 'JavaScript. Подробное руководство' // String
Book['author'] = 'Дэвид Флэнаган' // Имя как ключ массива
Book.year = 2021 // Number значение
Book.isAvailable = true // Boolean значение
Book.order() // вызов метода

// Недопустимая форма записи
obj.word1-word2 = true // -> Ошибка, SyntaxError
obj.'property' = true // -> Ошибка, SyntaxError

Другие способы создания объекта с помощью функции-конструктора и синтаксиса классов рассмотрены далее в разделе Объектно-ориентированное программирование.

Свойства объекта

Если имя свойства содержит символы недопустимые в названии переменной (пробелы, дефисы) или оно совпадает с зарезервированным словом (например: var, for, instanceof, ...), то необходимо имя свойства заключить в кавычки. В этом случае обращаться к свойству нужно с помощью квадратных скобок. Например, objName['object\'s property'].

Если свойство состоит из одного слова, то можно не заключать его в кавычки. Названия свойств с пробелами также обрамляются кавычками.

const Car = {
  speed: 220,
  color: 'orange',
  'year': 2025,
  'sport car': false
}

const Audi = Car // копия объектв
Audi['car-body'] = 'coupe'

Работа со свойствами объекта

Методы для работы со свойствами объекта рассмотрены в разделе Управление свойствами объекта

Удаление свойства объекта

delete Audi['car-body']
delete Audi.color

Проверка на наличие свойств в объекте

'color' in Audi // -> false
'sport car' in Audi // -> true

Динамическое обращение к свойствам объекта

Названия свойств могут формироваться динамически путём результата выражения.

const User = {
  isAdmin: 'yes',
  '2': 0
}

console.log(User[1 + 1]) // -> 0, обращение к свойству '2'
const x = 'is'
console.log(User[x + 'Admin']) // -> "yes"

Перебор свойств объекта

В принципе, если бы названия свойств объекта состояли только из чисел, то можно было бы воспользоваться циклом for. Например:

const NumberObject = {
  1 : 'свойство 1',
  2 : 'свойство 2',
  3 : 'свойство 3',
  4 : 'свойство 4',
}

for (let i = 1; i in NumberObject; i++) {
  console.log(NumberObject[i])
}

Для прохода по объектам или коллекциям используется конструкция for..in.

const AssocObj = {
  0 : 'male',
  age : 21,
  'name' : 'John',
  true : false
}

for (let current in AssocObj) { // где current – имя свойства
  console.log(current + ': ' + AssocObj[current])
}

Сравнение объектов

При присваивании переменной, которая хранит в себе объект происходит ссылка на этот самый объект. И при сравнении двух переменных возвратится значение true не по причине одинакового содержимого двух объектов, а потому, что обе переменные являются ссылкой на один и тот же объект. Так, в примере ниже объект o1 возвратит true при сравнении с объектом o2. И все дальнейшие изменения с объектов o2 отобразятся и на объекте o1.

В то же время, несмотря на одинаковое содержимое объектов o1 и o3 они возвратят false при сравнении, т.к. с точки зрения ООП это разные объекты.

const o1 = { x: 150 }
const o2 = o1 // -> ссылка на объект o1
const o3 = { x: 150 }

console.log(o1 == o2) // -> true
console.log(o1 == o3) // -> false

// Измение значение свойства "x" объекта "o2"
o2.x = 200
// Значение свойства "x" объекта "o1" также изменилось
console.log(o1.x)

Создание методов в объекте

Методы создаются путем присваивания анонимной функции.

const Methods = {
  one: function() {
    console.log('This is method "one"')
  },
  two: function(param) {
    console.log('I am a ' + param)
  }
}

methods.one() // -> This is method "one"
methods.two('JavaScript Student') // -> I am a JavaScript Student

Ключевое слово this?

Ключевое слово this используется в объектах для передачи ссылки на объект внутри которого он вызывается. Вместо this сработало бы и имя объекта, но принято использовать именно this.

const MyObject = {
  property: 'property value',
  method: function() {
    console.log(this.property)
  },
}

MyObject.method() // -> "property value"

Методы объекта Object

Доступ к свойствам объекта

Object.keys(obj) – возвращает массив ключей объекта.

const person = {
  name: 'John',
  age: 32,
  city: 'Almaty'
}

const keys = Object.keys(person)
console.log(keys) // -> ["name", "age", "city"]

Object.values(obj) – возвращает массив значений объекта.

const person = {
  name: 'Jane',
  age: 31,
  city: 'Astana'
}

const values = Object.values(person)
console.log(values) // -> ["Jane", 31, "Astana"]

Object.entries(obj) – возвращает массив пар "ключ-значение" объекта.

const person = {
  name: 'John',
  age: 32,
  city: 'Shymkent'
}

const entries = Object.entries(person)
console.log(entries) // -> [["name", "John"], ["age", 33], ["city", "Shymkent"]]

hasOwnProperty(prop) – проверяет, принадлежит ли свойство непосредственно объекту.

const person = {
  name: 'Jane',
  age: 31
}

console.log(person.hasOwnProperty('name')) // -> true
console.log(person.hasOwnProperty('toString')) // -> false

valueOf() – возвращает примитивное значение объектов Number, Boolean, ...

const n = new Number(5)  
n.valueOf() // -> 5

const obj = {
  name: 'John',
  age: 32,
  valueOf: function() {
    return this.age;
  }
}

console.log(obj + 10) // -> 42 (valueOf() преобразует объект в число)

имяОбъекта.hasOwnProperty(имяСвойства) – является ли свойство/метод унаследованным.

const user = {
  id: 123,
  login: 'Jane',
  password: '******',
}

console.log(user.hasOwnProperty('login')) // -> true
console.log(user.hasOwnProperty('toString')) // -> false (унаследовано от прототипа)

Object.prototype.myProperty = 'myValue'

// Напечатает только собственные свойства и методы
for (let i in user) {
  if (user.hasOwnProperty(i)) {
    console.log(user[i])
  }
} // -> 123, Jane, ******

имяОбъекта.propertyIsEnumerable(имяСвойства) – является ли свойство перечисляемым.

const user = {
  name: "John"
}

Object.defineProperty(user, 'age', {
  value: 32,
  enumerable: false
})

console.log(user.propertyIsEnumerable('name')) // -> true
console.log(user.propertyIsEnumerable('age')) // -> false (свойство не перечисляемое)

Object.prototype.isPrototypeOf(объект) – является ли прототип прототипом объекта.

const proto = {
  greet: function() {
    console.log('Hello! World')
  }
}

const obj = Object.create(proto)

console.log(proto.isPrototypeOf(obj)) // -> true

Управление свойствами объекта

Object.defineProperty(obj, prop, descriptor) – определяет новое свойство или изменяет существующее.

const person = {}

Object.defineProperty(person, 'name', {
  value: 'John',
  writable: false, // Нельзя изменить значение
  enumerable: true, // Можно перечислить свойство
  configurable: false // Нельзя удалить или изменить конфигурацию свойства
})

console.log(person.name) // -> "John"

person.name = 'Jane' // Ошибка, свойство name не перезаписывается

Object.defineProperties(obj, props) – определяет несколько свойств.

const person = {}

Object.defineProperties(person, {
  name: {
    value: 'John',
    writable: false
  },
  age: {
    value: 32,
    writable: true
  }
})

console.log(person.name) // -> "John"
console.log(person.age) // -> 32

person.age = 33 // Изменение значения свойства age
console.log(person.age) // 33

delete obj.prop – удаляет свойство из объекта.

const person = {
  name: 'John',
  age: 32
}

delete person.age

console.log(person.name) // "John"
console.log(person.age) // undefined

Прочие методы объекта

Object.assign(target, ...sources) – копирует свойства из исходных объектов в целевой объект.

const target = { name: 'John' }
const source1 = { age: 32 }
const source2 = { city: 'Almaty' }

Object.assign(target, source1, source2)
console.log(target) // -> { name: 'John', age: 32, city: "Almaty" }

Object.freeze(obj) – делает объект неизменяемым.

const user = {
	name: 'Jane',
	age: 31
}

Object.freeze(user)
user.age = 30 // -> false
console.log(user) // { name: "Jane", ag }

Object.seal(obj) – запрещает добавление новых свойств, но разрешает изменение существующих.

const user = {
	name: 'John',
	age: 32
}

Object.seal(user)
user.age = 31 // Свойство "age" будет изменено
user.sex = 'male' // Свойство "sex" не будет добавлено
delete user.name // Свойство "name" не будет удалено

console.log(user) // -> { name: "John", age: 32 }

Object.is(value1, value2) – определяет, являются ли два значения одинаковыми.

console.log(Object.is(10, 10)) // -> true
console.log(Object.is('hello', 'world')) // -> false
console.log(Object.is(NaN, NaN)) // -> true
console.log(Object.is(0, -0)) // -> false

Создание метода из имеющейся функции

function foo() {
  console.log(this.name)
}

const users = {
  name: 'John',
  getName: foo, // Присваивание имеющейся функции
}

users.getUserName = foo // Присваивание имеющейся функции
users.getName() // -> John

call / apply

Любую функцию в JavaScript можно вызывать в контексте любого объекта. Это нужно когда нет необходимости громоздить объект лишними функциями. Для этого есть методы call и apply. Метод apply очень похож на call, за исключением передачи аргументов. В apply используется массив аргументов вместо списка именованных параметров.

function outer(x, y) {
  return this.num + x + y
}

const ObjectOne = {
  num: 10,
}

// Первый аргумент задает значение this внутри функции
outer.call(ObjectOne, 50, 190); // -> 250

// Вызов функции внутри объекта
const ObjectTwo = {
  num: 15,
  method: function() {
    return outer.apply(this, [12, 8])
  },
}

ObjectTwo.method() // -> 35

Массивы

Массив – упорядоченный набор данных;
Доступ к элементам массива осуществляется по его номеру (индексу);
Элементы массива нумеруются с нуля.

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

Создание и работа с массивами

// С помощью литерала
let arr = [] // Иницилизация пустого массива
arr = ['string', 1, true]
typeof arr // -> "object" (массив это Объект)

// С помощью конструктора Array
let arr2 = new Array(5) // -> [undefined × 5]
arr2 = new Array(5, 10, 15, 20, 25, 30)

// Заполнение уже созданного массива
arr['name'] = 'John'
arr['surname'] = 'Doe'
arr.age = 30

// Создадим пару функций для последующего добавления их в массив
function sayHello() {
  return 'Hello! World'
}

const multiple = function() {
  let result = 1, i = 0

  do {
    result *= arguments[i]
    i++
  } while(arguments[i])

  return result
}

// Добавление данных при иницилизации массива
const user = [30, 'male', sayHello, multiple, true]

// Обращение к элементам массива
user[0] // -> 30
user[2]() // -> "Hello! World", произошел вызов функции «sayHello»
user[3](2, 2, 4, 2, 5, 3, 10) // -> 4800, вызов функции «multiple»

Добавление элементов в созданный массив

Чтобы безошибочно добавить элемент в существующий массив, можно воспользоваться свойством length, который возвращает количество(длину) элементов массива. Здесь действует аксиома:

Индекс последнего элемента массива на единицу меньше длины массива

Инициализируемый массив myArray имеет длину length = 3, т.к. последний занятый индекс 2.

После присваивания значения ячейке массива с индексом 10, в массиве myArray хранятся 11 элементов. Элементы с порядковым номером с 4 по 9 имеют значение undefined.

const myArray = [0, false, '25']
myArray[myArray.length] = 'еще один элемент в массиве'
console.log(myArray[3]) // -> "еще один элемент в массиве"

// Длина массива
myArray.length // -> 4
myArray[10] = 'x'
myArray.length // -> 11
myArray // [0, false, '25',
// 'еще один элемент в массиве', undefined × 4, 'x']

Свойство length у массивов доступны не только на чтение, но и на запись. Таким же образом можно сократить количество элементов в массиве.

myArray.length = 3
myArray // -> [0, false, '25']

Перебор элементов массива

const array = ['Jane', 36, true]
array.length = 2 // Сокращение массива (3-ий элемент будет удален)
array[7] = 'z'

for(let i = 0; i < array.length; i++) {
  console.log(i + ': ' + array[i])
  /* Напечатает:
  0: Jane
  1: 36
  2-6: undefined (x5)
  7: z
  */
}

for(let j in array) {
  console.log(j + ': ' + array[j])
  /* Напечатает:
  0: John
  1: 25
  7: z
  */
}

Цикл for..in чаще всего оказывается наиболее предпочтительным. В примере выше он опустил все элементы со значением undefined, однако он выведет элемент со значением undefined если таковой был присвоен явно, например, array[25] = undefined.

При удалении элемента массива, индекс массива принимает значение undefined. Причем есть разница от undefined который произошел в результате удаления и явно присваиваемого undefined. В первом случае, значение undefined рассматривается как неизвестное(неопределенное) значение, во втором случае, как конкретное значение типа undefined.

Удаление элемента массива

delete array[2]
array // ["Jane", 36, undefined]
array[array.length] = undefined
array // ["Jane", 36, undefined, undefined]

Методы для работы с массивами

Создание массивов

Array.from() – создает новый массив из итерируемого объекта или псевдомассива.

// Массив из строки
Array.from('hello') // -> ["h", "e", "l", "l", "o"]

// Массив из NodeList
let paragraphs = document.querySelectorAll('p')
Array.from(paragraphs) // -> массив элементов <p>

// Создание массива с преобразованием элементов
let numbers = [1, 2, 3]
Array.from(numbers, n => n * 2) // -> [2, 4, 6]

Array.fromAsync() – создает новый массив из асинхронного итерируемого объекта.

async function getFiles() {
  let dir = await openDir('.')
  let files = []
  for await (let file of dir) {
    files.push(file)
  }
  return files
}

let filesArr = await Array.fromAsync(getFiles()) // -> массив файлов в директории

Array.of() – создает новый массив из переданных аргументов.

Array.of('Hi', true, 3, [4], {5: 6}) // -> ['Hi', true, 3, [4], {5: 6}]

Доступ к элементам массива

at() – возвращает элемент массива по заданному индексу.

// Получение первого элемента
let arr = [1, 2, 3]
let firstElement = arr.at(0) // -> 1

// Получение последнего элемента
let arr = [1, 2, 3]
let lastElement = arr.at(-1) // -> 3

entries() – возвращает итератор, который содержит пары [ключ, значение] для каждого элемента массива.

let arr = ['a', 'b', 'c']
for (let [index, value] of arr.entries()) {
  console.log(index, value)
}
// Напечатает:
// 0 "a"
// 1 "b"
// 2 "c"

keys() – возвращает итератор, который содержит ключи (индексы) элементов массива.

let arr = ['a', 'b', 'c']
for (let key of arr.keys()) {
  console.log(key)
}
// Напечатает:
// 0
// 1
// 2

values() – возвращает итератор, который содержит значения элементов массива.

let arr = ['a', 'b', 'c']
for (let value of arr.values()) {
  console.log(value)
}
// Напечатает:
// "a"
// "b"
// "c"

Поиск элементов массива

every() – проверяет, удовлетворяют ли все элементы массива заданному условию.

const numbers = [1, 2, 3, 4, 5]
const allPositive = numbers.every(number => number > 0) // -> true
const allEven = numbers.every(number => number % 2 === 0) // -> false

filter() – создает новый массив с элементами, которые прошли проверку заданным условием.

const numbers = [1, 2, 3, 4, 5]
const evenNumbers = numbers.filter(number => number % 2 === 0) // -> [2, 4]

findLast() – возвращает последний элемент массива, который удовлетворяет заданному условию.

const numbers = [1, 2, 3, 4, 5]
const lastEvenNumber = numbers.findLast(number => number % 2 === 0) // -> 4

findLastIndex() – возвращает индекс последнего элемента массива, который удовлетворяет заданному условию.

const numbers = [1, 2, 3, 4, 5]
const lastEvenNumberIndex = numbers.findLastIndex(number => number % 2 === 0) // -> 3

some() – проверяет, удовлетворяет ли хотя бы один элемент массива заданному условию.

const numbers = [1, 2, 3, 4, 5]
const hasEvenNumber = numbers.some(number => number % 2 === 0) // -> true
const allNegative = numbers.some(number => number < 0) // -> false

Получение строки из массива

toString() – приводит к строке массив, разделяя элементы запятыми;
join() – делает то же самое, что и toString() за тем исключением, что в join() в качестве параметра можно передать разделитель.

const foo = () => 'Hello! World'
const bar = [20, 2, 25, foo]
const baz = bar.toString()
const qux = bar.join(' • ')

console.log(baz) // -> "20,2,25,() => 'Hello! World'"
console.log(qux) // -> "20 • 2 • 25 • () => 'Hello! World'"

Конкатенация массивов

concat() – возвращает новый массив в котором объеденины все перечисленные через запятую параметры. При этом исходный массив остаётся неизменным.

const foo = [1, 2]
const foo = [3, 4]
foo.concat(foo, 5, 6) // -> [1, 2, 3, 4, 5, 6]
foo // -> 1, 2; Массив foo остается неизменным

Оператор + в контексте массива приводит каждый массив к строке.

const bar = [1, 2] + [3, 4] // -> "1,23,4"

Получение части массива

slice() – вырезает часть массива. Функция slice не изменяет массив на котором вызывается эта функция, а в качестве результата возвращает копию массива.

В функциях для получения части массива (функции slice, splice) первый параметр (или если передается только один параметр) отсчет позиции начинается с нуля, если передается отрицательное значение, то отсчет начинается с конца и с единицы.

Если передается один параметр, то возвратит часть массива начиная с позиции переданного параметра и до конца массива.

const array = [23, 11, 5, 16, 98, 55]

array.slice(3) // -> 16, 98, 55

Можно передать отрицательное значение, тогда отсчет элементов массива начнется с конца.

array.slice(-2) // -> 98, 55

Вернется часть массива с позиции первого параметра до позиции второго параметра. Отсчет позиции второго параметра начинается сначала.

array.slice(2, 4) // -> 5, 16

В случае передачи неверных данных возвратится пустой массив.

array.slice(5, 2) // -> []

Вставка и удаление в любом месте

splice() – вырезает или вставляет элементы в массив.

С одним параметром. Если передается один параметр, то возвратится часть массива начиная с начала и длиной переданного параметра. Отсчет начинается с единицы.

const array = [14, 22, 'third', true, ['array']]
array.splice(3) // -> ["14, 22, third"]

С двумя параметрами. Если передается два параметра, то возвратится часть массива начиная с позиции первого параметра и длиной второго параметра.

array = [14, 22, 'third', true, ['array']]
const third = array.splice(2, 1) // -> ["third"]
array	// -> ["14, 22, true, array"]

С тремя параметрами. Если передается три и более параметра, то произойдет вставка всех элементов, переданные третьим (и более если есть) параметром(ов). Первый параметр означает перед каким элементом массива произойдет вставка, второй параметр – количество элементов, которые необходимо вырезать.

const sourceArray = ['1st', '2nd', '4th', '5th']
sourceArray.splice(2, 0, '3rd') // -> ["1st", "2nd", "4th", "5th"] 
sourceArray.join() // -> ["1st,2nd,3rd,4th,5th"]

Функции slice() и splice() отличаются тем, что в функции splice() второй параметр отсчитывается не с начала массива, а с позиции равной первому параметру. Также в функции splice() можно передать три и более параметра. В этом случае происходит вставка новых элементов в массив.

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

revers() – реверс массива, функция ничего не возвращает и применяется непосредственно к самому массиву.

const array = [23, 11, 5, 16, 98, 55]
array.reverse() // -> 55, 98, 16, 5, 11, 23

sort() – сортирует массив как строки (даже если массив имеет только числовые значения). Функция sort() может принимать необязательный параметр — имя функции. Если функция указана, то элементы массива будут отсортированы согласно значениям, возвращаемых функцией. Если параметр не указан, массив будет отсортирован в лексикографическом порядке (возрастающий порядок следования символов в таблице ASCII).

const array = [23, 11, 5, 16, 98, 55]
array.sort() // -> 11, 16, 23, 5, 55, 98

// sort(функция_сортировки)
const mySort = (a, b) => a - b
array.sort(mySort) // -> 5, 11, 16, 23, 55, 98

Работа с началом массива

shift() – извлекает и возвращает первый элемент массива. Исходный массив также смещается (остается без первого элемента).

const array = ['1st', '2nd', '3rd']
array.shift() // -> '1st'
array // -> ['2nd', '3rd']

unshift() – добавляет элементы в начало массива со смещением. Возвращает новую длину массива.

const array = ['3rd', '4th', '5th', 'last']
array.unshift('1st', '2nd') // -> 6 
array // -> ['1st', '2nd', '3rd', '4th', '5th', 'last']

Работа с концом массива

pop() – извлекает и возвращает последний элемент массива. Исходный массив также изменяется (остается без последнего элемента).

const array = [10, 'JavaScript', 101]
array.pop() // -> 101
array // -> [10, 'JavaScript']

push() – добавляет элементы в конец массива. Возвращает новую длину массива.

const array = ['Ecma']
array.push('Script', 2015) // -> 3
array.join() // -> 'Ecma,Script,2015'

Поиск элементов массива

indexOf(searchElement, fromIndex) – возвращает индекс первого найденного элемента, соответствующего searchElement.

const drinks = ['water', 'tea', 'coffee', 'cacao']
const firstAppleIndex = drinks.indexOf('water') // -> 0
const secondAppleIndex = drinks.indexOf('water', 2); // -> 3

lastIndexOf(searchElement, fromIndex) – возвращает индекс последнего найденного элемента, соответствующего searchElement.

const vegetables = ['tomato', 'cucumber', 'carrot', 'eggplant']
const lastAppleIndex = vegetables.lastIndexOf('tomato') // -> 3

includes(searchElement, fromIndex) – определяет, содержит ли массив searchElement.

const fruits = ['apple', 'banana', 'orange']
const hasApple = fruits.includes('apple') // -> true
const hasMango = fruits.includes('mango') // -> false

find(callbackFn, thisArg) – возвращает первый элемент, удовлетворяющий условию, заданному callbackFn.

const numbers = [5, 12, 8, 130, 44]
const foundNumber = numbers.find(element => element > 10) // -> 12

findIndex(callbackFn, thisArg) – возвращает индекс первого элемента, удовлетворяющего условию, заданному callbackFn.

const numbers = [5, 12, 8, 130, 44]
const foundIndex = numbers.findIndex(element => element > 10) // -> 1

Итерация по элементам массива

forEach(callbackFn, thisArg) – выполняет callbackFn для каждого элемента массива.

const numbers = [1, 2, 3, 4]
numbers.forEach(element => console.log(element * 2)) // -> 2, 4, 6, 8

map(callbackFn, thisArg) – создает новый массив с результатами вызова callbackFn для каждого элемента.

const numbers = [1, 2, 3, 4]
const doubledNumbers = numbers.map(element => element * 2) // -> [2, 4, 6, 8]

Сведение массива к одному значению

reduce(callbackFn, initialValue) – применяет callbackFn к аккумулятору и каждому элементу массива, чтобы получить одно значение.

const numbers = [1, 2, 3, 4]
const sum = numbers.reduce((accumulator, element) => accumulator + element, 0) // -> 10

reduceRight() – то же, что и reduce(), но применяет callback-функцию к элементам массива в обратном порядке (справа-налево).

const numbers = [1, 2, 3, 4, 5]
// Вычисление факториала 5 (5! = 5 * 4 * 3 * 2 * 1)
const factorial = numbers.reduceRight((acc, number) => acc * number, 1)
console.log(factorial) // -> 120

В примере выше callback-функция умножает аккумулятор acc на каждый элемент массива, начиная с последнего элемента 5 и заканчивая первым 1.

Преобразование массива

copyWithin() – копирует часть элементов массива в другую позицию внутри того же массива, перезаписывая существующие элементы.

// Копируем элементы с индекса 1 (включительно)
// начиная с позиции индекса 0
// до индекса 3 (не включительно)
[1, 2, 3, 4, 5].copyWithin(1, 0, 3) //-> [1, 1, 2, 3, 5]

fill() – заполняет элементы массива статическим значением.

const numbers = [1, 2, 3, 4, 5]

// Заполнит все элементы массива значением 0
numbers.fill(0) // -> [0, 0, 0, 0, 0]

// Заполнит значением 9
// элементы с индекса 1 (включительно)
// до индекса 4 (не включительно)
numbers.fill(9, 1, 4) // -> [0, 9, 9, 9, 0]

flat() – создает новый массив, рекурсивно объединяя элементы вложенных массивов.

const nestedArray = [1, 2, [3, 4], [5, [6, 7]]]

const flatArray = nestedArray.flat(2) // Уровень вложенности 2

console.log(flatArray) // [1, 2, 3, 4, 5, 6, 7]

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

const numbers = [1, 2, 3, 4]

const doubledAndFlattened = numbers.flatMap(number => [number, number * 2])

console.log(doubledAndFlattened) // [1, 2, 2, 4, 3, 6, 4, 8]

Другие методы массива

isArray(obj) – определяет, является ли объект массивом.

Array.isArray([]) // -> true
Array.isArray({}) // -> false

toLocaleString() – возвращает строковое представление массива с учетом локали.

prices = [7890, 120.31]

// Форматирование цен с учетом локали
formattedPrices = prices.toLocaleString('kk', {
  style: 'currency', currency: 'KZT'
})

console.log(formattedPrices) // -> 7 890,00 KZT, 120,31 KZT

toReversed() – создает новый массив с элементами в обратном порядке по сравнению с исходным массивом.

[1, 2, 3, 4, 5].toReversed() // -> [5, 4, 3, 2, 1]

toSorted() – создает новый отсортированный массив на основе исходного массива.

[3, 1, 4, 2, 5].toSorted() // -> [1, 2, 3, 4, 5]

toSpliced() – создает новый массив, применяя операцию splice() к исходному массиву.

// Начиная с индекса 1
// удаляем 2 элемента
// и вставляем элементы 10 и 20
[1, 2, 3, 4, 5].toSpliced(1, 2, 10, 20) // -> [1, 10, 20, 4, 5]

Встроенные объекты

В JavaScript все на самом деле является объектом или связано с объектом. Даже примитивные типы данных (числа, строки, логические значения, ...) наследуют свойства и методы от своих соответствующих глобальных объектов – Number, String и Boolean, а те в свою очередь являются унаследованными объектами глобального объекта, который так и называется Object.

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

Глобальный объект (Global Object) в JavaScript представляет собой специальный объект, доступный в любой точке кода и содержащий набор встроенных свойств и методов.

Глобальный объект также содержит ряд других встроенных объектов, таких как Object, Array, Date и Math, которые представляют собой конструкторы объектов и предоставляют различные методы для работы с соответствующими объектами.

Важно отметить, что в браузерной среде глобальный объект window представляет собой глобальный объект JavaScript, который содержит все встроенные свойства и методы, а также предоставляет доступ к DOM (Document Object Model) и BOM (Browser Object Model).

Глобальные свойства

Свойство	Определение
`±Infinity`	больше/меньше чем любое положительное/отрицательное число включая самого себя
`NaN`	тоже что и `Number.NaN`. Значение NaN не равно самому себе, т.е. `NaN != NaN`
`undefined`	неопределенное значение

Глобальные методы

Метод	Описание
`alert()`	выводит модальное окно с сообщением
`isFinite()`	проверяет, является ли аргумент конечным числом. Возвращает `false`, если аргумент является `NaN`, `Infinity` или `-Infinity`
`isNaN()`	является ли аргумент значением `NaN`. Метод пытается преобразовать переданный параметр в число и если это удается, то возвращается `true`
`parseInt()`	преобразует аргумент в целое число. Также можно передать вторым параметром основание для преобразования в систему счисления. Если в преобразуемом значении (первом параметре) встретится число или буква не входящая в диапазон системы счисления, то возвращается преобразованное значение полученное на данный момент (по умолчанию преобразует в 10-ую с.с.)
`parseFloat()`	преобразует аргумент в число, но допускает одно вхождение точки
`prompt()`	выводит окно для ввода пользовательского текста. Используется когда необходим ввод каких-нибудь данных от пользователя
`encodeURI()`	кодирует URI, заменяя каждое вхождение определенных символов на escape-последовательности, представляющие символ в кодировке UTF-8
`decodeURI()`	декодирует закодированную методом `encodeURI()` строку
`eval()`	переданный параметр рассматривается как код на JavaScript

Примеры использования

isNaN(0) // -> false
isFinite(Math.sqrt(-1)) // -> false

// Преобразование строки в число
const distance = '95.5km'
parseInt(distance) // -> 95
parseFloat(distance) // -> 95.5
parseFloat('$9000') // -> NaN
parseInt('ff', 16) // -> 255
const digits = 255
digits.toString(16) // -> 'ff', не имзеняет исходное значение,
// а возвращает новое в виде строки

// prompt всегда возвращает значение типа String
const myPrompt = prompt('Подсказка', 'значение') 

// encodeURI
const uri = encodeURI('http://example.com/phones?item=Apple%20iPhone')
// Декодирование закодированных методом encodeURI() строки
decodeURI(uri)

// eval переданный параметр рассматривает как код на JavaScript
eval('alert("Hello")')

Number

Свойства Number

У объекта Number есть статические свойства (константы):

Свойство	Определение
`Number.MAX_VALUE`	возвращает наибольшее число, которое может быть использовано в JavaScript. Зависит от машины которая в данный момент исполняет скрипт. Примерно равно 1.7976931348623157e+308
`Number.MIN_VALUE`	обратное `Number.MAX_VALUE`. Примерно равно 5E-324
`Number.POSITIVE_INFINITY`	возвращает `Infinity` (+бесконечность). Значение большее любого положительного числа
`Number.NEGATIVE_INFINITY`	возвращает `-Infinity` (-бесконечность). Значение, которое меньше любого отрицательного числа
`Number.NaN`	особое значение Not a Number, которое сообщает что результатом арифметического выражения является не число

Методы Number

Методы объекта Number возвращают строку, содержащее новое число, при этом не изменяют исходное значение.

Метод	Описание
`Number.toFixed()`	округляет число на длину переданного параметра после запятой
`Number.toExponential()`	экспоненциальное представление того же числа
`Number.toPrecision()`	округляет число на длину переданного параметра
`Number.toString()`	преобразования числа в строку

Метод toString() объекта Number перегружен от глобального метода toString() и может принимать параметр (число или строку значением от 2 до 36), который будет использован как основание для преобразования в переданную параметром систему счисления.

const digits = 12.3456789
digits.toFixed(3) // -> 12.346
digits.toExponential(5) // -> 1.23457e+1
digits.toPrecision(5) // -> 12.346

const numbers = 255
numbers.toString(16) // -> ff (255 в 16-ричной системе счисления)

String

Свойства String

length – длина строки на единицу превосходящее максимальный индекс строки. Свойство length у строк доступно только для чтения и недоступно для записи, как например, свойство length типа Array.

'Строка длиной 25 символов'.length; // -> 25

Методы String

Все методы объекта String не изменяют исходную строку, а возвращают новую. Отсчет позиции начинается с нуля. Если аргумент отрицателен (и метод принимает отрицательные значения), то отсчет начинается с конца и с единицы.

Метод	Описание
`concat()`	возвращает новую конкатенированную строку не изменяя исходную
`toLowerCase()`	переводит строку в нижний регистр
`toUpperCase()`	переводит строку в верхний регистр
`charAt()`	возвращает символ указанной позиции. Отсчет позиции начинается с нуля
`charCodeAt()`	возвращает число, соответствующее позиции в таблице кодировки Unicode
`fromCharCodeAt()`	возвращает символ, соответсвующий указанной позиции в таблице кодировки Unicode. Статический метод, обращение к нему происходит через сам объект `String.fromCharCodeAt()`
`slice()`	возвращает часть строки. Отсчет позиции второго аргумента начинается с начала строки, если аргумент отрицательный, то отсчет начинается с единицы от конца строки
`substring()`	возвращает подстроку строки. Если параметр меньше нуля, то он считается как нуль, т.е. метод `substring()` отрицательных значений не принимает. Отсчет позиции второго аргумента начинается с начала строки, если второй аргумент оказывается меньше первого аргумента, то значения параметров меняются местами
`substr()`	возвращает подстроку строки (метод не описан в стандарте языка). Отсчет второго аргумента начинается с позиции первого аргумента. Если второй аргумент меньше нуля, то он считается как нуль, т.е. метод не принимает отрицательных значений
`indexOf()`	находит и возвращает позицию первого вхождения подстроки. Если найти не удается, то возвращает `-1`. Второй параметр (если передается) указывает с какой позиции начинать поиск
`lastIndexOf()`	находит и возвращает позицию первого вхождения подстроки с конца. Второй параметр (если передается) ограничивает поиск от начала до указанной позиции. Возвращает `-1` если искомая подстрока не найдена
`replace()`	заменяет совпадение(-ия) регулярного выражения или подстроки в строке. Метод применяется к строке к которой нужно произвести замену. Первый параметр — искомая подстрока или регулярное выражение, второй параметр — строка на которую будут заменены все совпадения
`split()`	разбивает строку на массив по указанной подстроке или регулярному выражению. Если в качестве разделителя передать пустую строку, то возвратится массив из элементов строки (символов). Второй параметр — максимальное количество кусков, на которые может быть разбита строка
`search()`	возвращает позицию первого вхождения совпадающее с регулярным выражением или с подстрокой. Если совпадений нет, то возвращает `-1`
`match()`	возвращает массив, содержащий результаты поиска. Если в регулярном выражении установлен флаг `g`, метод возвращает массив всех соответствий, присутствующих в строке. Например: `"1 плюс 2 равно 3".match(/\d+/g)` вернет `["1", "2", "3"]`. Возвращает `null` если совпадений нет

Примеры String

Конкатенация

const str1 = 'строка '

str1.concat('была', ' конкатенирована')
// -> "строка была конкатенирована"

String.concat('Метод ', 'concat() ', 'объекта ', 'String')
// -> "Метод concat() объекта String"

Регистр символов

const str2 = 'эта в нижнем регистре, А ЭТО В ВЕРХНЕМ'

str2.toLowerCase()
// -> "это в нижнем регистре, а это в верхнем"

str2.toUpperCase()
// -> "ЭТО В НИЖНЕМ РЕГИСТРЕ, А ЭТО В ВЕРХНЕМ"

Получение символа из строки

const str3 = 'Получение символа из строки'

str3.charAt(12) // -> "м"
// если указанная позиция превышает длину строки,
// то возвратится пустая строка
str3.charAt(120) // -> "" (пустая строка)

str3.charCodeAt(12) // -> 1084
// если указанная позиция превышает длину строки,
// то возвратится NaN
str3.charCodeAt(120) // -> NaN

String.fromCharCode(83, 99, 114, 105, 112, 116) // -> "Script"

Получение части строки

const str4 = 'строка для примера'

// без параметров
str4.slice() // -> "строка для примера"
str4.substring() // -> "строка для примера"
str4.substr() // -> "строка для примера"

// с одним положительным параметром
str4.slice(11) // -> "примера"
str4.substring(11) // -> "примера"
str4.substr(11) // -> "примера"

// с одним отрицательным параметром
str4.slice(-7) // -> "примера"
str4.substring(-7) // -> "строка для примера"
str4.substr(-7) // -> "примера"

// первый параметр < второго параметра
str4.slice(7, 10) // -> "для"
str4.substring(7, 10) // -> "для"
// отсчет 2-го параметра substr() начинается с начала строки
str4.substr(7, 10) // -> "для пример"

// первый параметр > второго параметра
str4.slice(10, 7) // -> ""
// substring() поменяет местами аргументы, все равно что 7, 10
str4.substring(10, 7) // -> "для"
str4.substr(10, 7) // -> " пример"

// варианты с положительными и отрицательными параметрами
str4.slice(7, -8) // -> "для"
str4.slice(-11, 10) // -> "для"
str4.slice(-11, -8) // -> "для"
// substring() поменяет местами аргументы
str4.substring(6, -5) // -> "строка", все равно что 0, 6
str4.substring(-10, 6) // -> "строка", все равно что 0, 6
str4.substring(-10, -6) // -> "", все рано что 0, 0
str4.substr(7, -8) // -> "", все равно что 7, 0
str4.substr(-11, 3) // -> "для"
str4.substr(-11, -8) // -> "", все равно что -11, 0

Поиск подстроки в строке

const str5 = 'это — просто пример'

str5.indexOf('пр') // -> 6
// поиск подстроки начнется с указанной позиции – 7
str5.indexOf('пр', 7) // -> 13
// если указанный набор символов не найден, то возвратится -1
str5.indexOf('г') // -> -1

str5.lastIndexOf('пр') // -> 13
// второй аргумент ограничивает поиск от начала до указанной позиции
str5.lastIndexOf('пр', 7) // -> 6

Замена в строке

const str6 = 'Это строка для замены некой подстроки'

str6.replace('строк', 'линейк')
// -> "Это линейка для замены некой подстроки"

str6.replace(/строк/g, 'линейк')
// -> "Это линейка для замены некой подлинейки"

const str7 = 'Моя кошка любит есть рыбу и молоко'
const str8 = str7.replace(
  /кошка|рыбу/g,
  match => match === 'кошка' ? 'собака' : 'мясо'
)
str8 // -> "Моя собака любит есть мясо и молоко"

Разбиение строки на массив

const str9 = 'Эта строка будет разбита на мелкие кусочки'
str9.split(' ')
// -> ["Эта", "строка", "будет", "разбита", "на", "мелкие", "кусочки"]

// второй аргумент указывает максимальное количество кусков
// на которые может быть разбита строка
str9.split('', 10)
// -> ["Э", "т", "а", " ", "с", "т", "р", "о", "к", "а"]

Поиск в строке по регулярному выражению

const mail = '[email protected]'
const re = 'protonmail|gmail|hotmail|yahoo|live'

mail.search(re) // -> 8

// Возврат совпадений с шаблоном регулярного выражения
'ABCDEF'.match(/(ABC)(DE)(F)/) // -> ["ABCDEF, ABC, DE, F"]

Math

В отличие от других глобальных объектов, Math не является конструктором. Все свойства и методы Math статичны.

Свойства Math

Свойство	Определение
`Math.E`	константа Эйлера, основание натурального логарифма, приблизительно 2.718
`Math.LN2`	натуральный логарифм 2, приблизительно 0.693
`Math.LOG2E`	логарифм E по основанию 2, приблизительно 1.442
`Math.LOG10E`	логарифм E по основанию 10, приблизительно 0.434
`Math.PI`	отношение длины окружности к ее диаметру, приблизительно 3.14159
`Math.SQRT12`	квадратный корень из 1/2; иначе говоря, 1 поделить на корень из 2, приблизительно 0.707
`Math.SQRT2`	квадратный корень из 2, приблизительно 1.414
`Math.LN10`	натуральный логарифм 10, приблизительно 2.302

Методы Math

Свойство	Определение
`Math.abs()`	возвращает абсолютное значение числа
`Math.acos()`	возвращает арккосинус (в радианах) от числа
`Math.asin()`	возвращает арксинус (в радианах) от числа
`Math.atan()`	возвращает арктангенс (в радианах) от числа
`Math.atan2()`	возвращает арктангенс частного аргументов
`Math.ceil()`	округляет в большую сторону
`Math.floor()`	округляет в меньшую сторону
`Math.cos()`	вычисляет косинус числа
`Math.sin()`	вычисляет синус числа
`Math.exp()`	возвращает `Ex`, где `x` - аргумент, а `E` - основание натуральных логарифмов
`Math.log()`	возвращает натуральный (по основанию `E`) логарифм числа
`Math.pow()`	возводит число в степень, возвращает `base exponent`
`Math.max()`	возвращает наибольший из списка аргументов
`Math.min()`	возвращает наименьший из списка аргументов
`Math.random()`	возвращает псевдослучайное число в интервале `[0, 1]`, т.е. между 0 (включительно) и 1 (не включая)
`Math.round()`	возвращает значение, округленное до ближайшего целого числа
`Math.sqrt()`	возвращает квадратный корень из числа
`Math.tan()`	возвращает тангенс числа

Date

Объект Date – содержит методы для работы с датой и временем.

Время в JavaScript измеряется в миллисекундах, начиная от полуночи 01 января 1970 года GMT+0. День содержит 86,400,000 миллисекунд.

Дата в JavaScript поддерживается в двух форматах:

Greenwich Mean Time (GMT)
- Дата и время указывается в соответствии с местным часовым поясом;
- Указывается смещение относительно Гринвичского меридиана;
- Смещение зависит от переходов на летнее и зимнее время.
Universal Time Coordinated (UTC)
- Дата и время в любой точке планеты одинаково;
- Точка отсчета совпадает с точностью до долей секунды с точкой отсчета GMT;
- Никаких переходов на летнее и зимнее время в UTC нет.

Создание даты

const now = new Date() // Местное время в момент иницилизации
const newDate = new Date(dateVal)

Если параметр dateVal является числовым, то он интерпретируется как количество миллисекунд от 1-Янв-1970 00:00. Если строкой, то она разбирается и интерпретируется как дата по стандартным правилам Date.parse.

Конструктору объекта Date можно передать конкретное время в виде (год, месяц с нуля, день, часы, минуты, секунды, миллисекунды).

const date = new Date(year, month, date[, hours, minutes, seconds, ms])
const date1 = new Date('Jan 01 2024 01:00:00')
const date2 = new Date(1682995487612) // Временая метка
const date3 = new Date(2025, 5) // обязательные параметры: год и номер месяца
const date4 = new Date(2025, 5, 21)
const date5 = new Date(2024, 12, 120) // -> 30 апреля 2025
const date6 = new Date(2025, -1) // -> декабрь, 2014

Методы Date

Метод	Описание
`Date.UTC()`	Вычисляет количество миллисекунд, истекших с полуночи 1 января 1970 года до указанной даты, используя время в диапазоне формата UTC
`Date.parse()`	Анализирует строку, содержащую дату, и возвращает количество миллисекунд, прошедших с полуночи 1 января 1970 г. UTC до указанной даты
`toLocaleString()`	Возвращает дату, преобразованную в строковую величину в соответствии с текущими локальными установками
`getDate()`	Возвращает день месяца для указанной даты (согласно местному времени)
`getDay(0-6)`	где, 0 — воскресенье. Возвращает день недели для указанной даты (согласно местному времени)
`getFullYear()`	Возвращает год для указанной даты (согласно местному времени)
`getMilliseconds()`	Возвращает количество миллисекунд для указанной даты (согласно местному времени)
`getMinutes()`	Возвращает значение минут для указанной даты (согласно местному времени)
`getMonth()`	Возвращает месяц для указанной даты (согласно местному времени)
`getSeconds()`	Возвращает значение секунд для указанной даты (согласно местному времени)
`getTime()`	Возвращает численное значение для указанной даты (согласно универсальному времени)
`getTimezoneOffset()`	Возвращает смещение универсального времени относительно местного в минутах
`getUTCDate()`	Возвращает день месяца для указанной даты (согласно универсальному времени)
`getUTCDay()`	Возвращает день недели для указанной даты (согласно универсальному времени)
`getUTCHours()`	Возвращает час для указанной даты (согласно универсальному времени)
`getHours()`	Возвращает час для указанной даты (согласно местному времени)
`getUTCMilliseconds()`	Возвращает количество миллисекунд для указанной даты (согласно универсальному времени)
`getUTCMonth()`	Возвращает месяц для указанной даты (согласно универсальному времени)
`getUTCMinutes()`	Возвращает значение минут для указанной даты (согласно универсальному времени)
`getUTCSeconds()`	Возвращает значение секунд для указанной даты (согласно универсальному времени)
`getYear()`	Возвращает сокращённое значение года для указанной даты (согласно местному времени)
`setSeconds(0-59)`	Устанавливает для указанной даты значение секунд равным указанному (согласно местному времени)
`setFullYear()`	Устанавливает для указанной даты год равным указанному значению (согласно местному времени)
`setMilliseconds(0-999)`	Устанавливает для указанной даты значение миллисекунд равным указанному (согласно местному времени)
`setTime()`	Устанавливает численное значение для указанной даты в миллисекундах, прошедших после полночи 1 января 1970 года (по универсальному времени)
`setYear()`	Устанавливает для указанной даты год равным указанному значению (согласно местному времени)
`setDate(1-31)`	Устанавливает день месяца равным указанному значению (согласно местному времени)
`setUTCDate()`	Устанавливает день месяца равным указанному значению (согласно местному времени)
`setUTCHours()`	Устанавливает для указанной даты час равным указанному значению (согласно универсальному времени)
`setHours()`	Устанавливает для указанной даты час равным указанному значению (согласно местному времени)
`setUTCMilliseconds()`	Устанавливает для указанной даты значение миллисекунд равным указанному (согласно местному времени)
`setUTCMinutes()`	Устанавливает для указанной даты значение минут равным указанному (согласно универсальному времени)
`setMinutes(0-59)`	Устанавливает для указанной даты значение минут равным указанному (согласно местному времени)
`setMonth(0-11)`	Устанавливает для указанной даты месяц равным указанному значению (согласно местному времени)
`setUTCSeconds()`	Устанавливает для указанной даты значение секунд равным указанному (согласно местному времени)
`setUTCFullYear()`	Устанавливает для указанной даты год равным указанному значению (согласно универсальному времени)
`setUTCMonth()`	Устанавливает для указанной даты месяц равным указанному значению (согласно местному времени)
`toGMTString()`	Преобразовывает дату в строку (согласно времени по Гринвичу)
`toLocaleFormat()`	Преобразовывает дату в строку согласно текущим языковым настройкам и указанному формату
`toLocaleTimeString()`	Возвращает информацию о дате в виде текстовой строки согласно языковым настройкам системы
`toLocaleDateString()`	Возвращает информацию о дате в виде текстовой строки согласно языковым настройкам системы
`toString()`	Возвращает строку, представляющую текущий объект Date.
`toTimeString()`	Возвращает информацию о дате в виде текстовой строки в американском формате записи даты
`toDateString()`	Возвращает информацию о дате в виде текстовой строки в американском формате записи даты
`toUTCString()`	Преобразовывает дату в строку (согласно универсальному времени)
`valueOf()`	Возвращает примитивное значение объекта Date
`getUTCFullYear()`	Возвращает год для указанной даты (согласно универсальному времени)

Регулярные выражения

Создание RegExp

// Полная форма
const pattern1 = new RegExp(pattern [, flags])

// Сокращенная форма (литеральный формат)
const pattern2 = /pattern/flags

// Динамическое создание регулярного выражения
const emails = ['gmail', 'yahoo', 'hotmail', 'live', 'outlook']
const re = new RegExp(emails.join('|', 'i'))
// -> /gmail|yahoo|hotmail|live|rambler/i

где,

pattern – шаблон регулярного выражения;
flags – способ поиска по шаблону, порядок указания флагов не имеет значения, может принимать следующие значения:

Флаг	Значение
`g`	глобальный поиск (обрабатываются все совпадения с шаблоном поиска)
`i`	поиск без учета регистра
`m`	многострочный поиск

Специальные последовательности

Последовательность	Описание
`\'`	одинарные кавычки (апостроф)
`\"`	двойные кавычки
`\\`	обратный слеш (`\u005C`)
`\b`	backspace
`\f`	form feed
`\n`	переход на новую строку (`\u000A`)
`\r`	возврат каретки (`\u000D`)
`\t`	табуляция (`\u0009`)
`\v`	вертикальная табуляция
`\0`	символ NULL (`\u0000`)
`\ddd`	octal sequence (3 digits: ddd)
`\xdd`	hexadecimal sequence (2 digits: dd). Символ Latin-1, заданный двумя шестнадцатеричными цифрами
`\u{X...X}`	символ Unicode с кодом от `X...X` (от 1 до 6 шестнадцатеричных цифр)

Позиции соответствия

Знак	Значение
`^`	соответствует началу строки, т.е. выражение `/^a/` найдет соответствие если строка начинается строго с символа `а`
`$`	соответствует концу строки, т.е. выражение `/b$/` найдет соответствия только если строка заканчивается на `b`
`\b`	позиция между символом ASCII `[a-zA-Z0-9_]` и не символом ASCII `[^a-zA-Z0-9_]` (граница слова)
`\B`	позиция между двумя символами ASCII (не граница слова)

Операторы регулярного выражения

Оператор	Значение
`\`	обратный слеш, экранирует спецсимволы `*`, `+`, `?`, `❘`, `(`, `)`, `[`, `{`, `}`, `.`, `$` и `\`.
`.`	любой символ, кроме перевода строки (`\n`)
`[]`	перечень символов перечисленных в наборе
`-`	указывается в диапазоне символов
`[a-e]`	диапазон символов, тоже что и `[abcde]`
`[^a-e]`	перечень символов, не входящие в набор, тоже что и `[^abcde]`
`()`	выделение групп регулярных выражений с присвоением порядкового номера для извлечения подстроки
`(?:x)`	захватывает соответствующее выражение без присваивания порядкового номера
`x(?=y)`	соответствует `x`, только если за ним следует `y`
`x(?!y)`	соответствует `x`, только если за ним НЕ следует `y`
`❘`	оператор ИЛИ
`{}`	находит повторения (примеры ниже)
`{n}`	шаблон повторяется точно `n` раз. Например, `/a{3}/` найдет ровно три символа `а` идущих один за другим
`{n,}`	шаблон повторяется не менее `n` раз. Например, `/a{3,}/` найдет 3 или более идущих один за другим символов `а`
`{n,m}`	шаблон повторяется не менее `n`, но и не более `m` раз. Например, `/a{5,10}/` ищет от 5 до 10 символов `а`
`\b`	соответствует границе слова
`\B`	соответствует любому месту, где нет границы слова
`\d`	любая цифра `[0-9]`
`\D`	противоположное `\d` `[^0-9]`
`\s`	любой символ-разделитель Unicode (`\r`, `\n`, `\t`, `\v`, пробел, ...)
`\S`	противоположное `\s`
`\w`	любой символ ASCII `[a-zA-Z0-9_]`
`\W`	противоположное `\w` (`[^a-zA-Z0-9_]`)

Квантификаторы

Вид	Значение
`*`	эквивалентно `{0,}` (может не быть, а может сколько угодно быть)
`+`	эквивалентно `{1,}` (минимум одно вхождение, но должно быть)
`?`	эквивалентно `{0,1}` (может быть, а может не быть)

Методы регулярного выражения

Метод	Значение
`test()`	обратно методу `search()` проверяет совпадение регулярного выражения в передаваемой строке. Возвращает `true` если есть совпадения, иначе `false`
`exec()`	возвращает массив с результатами поиска по шаблону, если совпадений нет, то возвращается `null`

Примеры RegEx

Экранирование и перечисления

'folder/file.js'.search(/\//) // -> 6, экранирование прямого слеша
/[abcde]/.test('protocol') // -> true, найден символ "c" указанный в наборе
'ecmascript'.search(/[^a-e]/) // -> 2, найден символ "m", первый символ не входящий в набор

Повторения {n}, {n,m}, {n,}

const str = `JavaScript – объектно-ориентированный язык.
Но используемое в языке прототипирование обуславливает
отличия в работе с объектами по сравнению с традиционными
класс-ориентированнннными языками`

str.search(/н{1}/) // -> 19, позиция символа "н", который встречается в 1-ый раз
str.search(/н{2,5}/) // -> 33, позиция символа "н", который впервые встречатся после 2 до 5 раз
str.search(/н{5,}/) // -> 174, позиция символа "н", который встречается после 5 раз и более раза
/js{3}/.test('jsjsjs') // -> false, на самом деле будет искаться вхождение подстроки "jsss"

Позиции соответствия

Спецсимвол ^ в начале и спецсимвол $ в конце, говорят что строка должна строго начинаться и заканчиваться в соответствии с шаблоном регулярного выражения.

/^\d\d?-\d\d?-\d{4}$/
/\bJava\b/.test('Java Script') // -> true
/\BScript\b/.test('JavaScript') // -> true

Флаги

const str = 'JavaScript\nis\nthe\nprogramming\nlanguage\nof\nthe\nWeb'
str.search(/s/i) // -> 4, ищется как "s", так и "S"
str.search(/^language/m) // -> 30, многострочный поиск

Группировка и ссылки

// Внутренние ссылки (ссылка в шаблоне регулярного выражения)
const str1 = 'JavaScript is using the "Unicode\' character set'
const str2 = 'JavaScript is using the "Unicode\" character set'
str1.search(/["'][^"']*["']/) // -> 24
str1.search(/(["'])[^"']*\1/) // -> -1
str2.search(/(["'])[^"']*\1/) // -> 24

// Внешние ссылки (ссылка вне шаблона регулярного выражения)
'Script Java'.replace(/(\w+) (\w+$)/, '$2$1') // -> "JavaScript"
const beatles = `
  Lennon, John
  McCartney, Paul
  Harrison, George
  Starr, Ringo`
beatles.replace(/([\w ]+), ([\w ]+)/g, '$2 $1')
// -> "John Lennon\nPaul McCartney\nGeorge Harrison\nRingo Starr"
  
// Возврат совпадений с шаблоном регулярного выражения
/(ABC)(DE)(F)/.exec('ABCDEF') // -> ["ABCDEF, ABC, DE, F"]

Error

Объект Error служит для генерации ошибок возникающих в ходе выполнения JavaScript кода. Имеет следующие подклассы Error:

EvalError – ошибка при выполнении eval();
RangeError – эта ошибка происходит, когда переданный параметр лежит за границами допустимого диапазона;
ReferenceError – ошибка при разыменовании неверной ссылки;
SyntaxError – синтаксическая ошибка, которая произошла при разборе кода, переданного eval();
TypeError – переменная или параметр неправильного типа;
URIError – ошибка происходит, когда encodeURI() или decodeURI() вызваны с неправильными параметрами.

Чтобы отловить ошибку применяется конструкция try..catch..finally.

try {
  const x = 10
  console.log(y)
} catch(e) {
  console.error(e.name) // -> ReferenceError
  console.error(e.message) // -> y is not defined
} finally {
  console.info('Содержимое конструкции finally выполнится всегда')
}

console.info('Эта инструкция также выполнится')

Инициирование исключения

Используйте throw для генерации исключения, аналогично Java/PHP и другим языкам. В отличие от них, JavaScript позволяет бросать исключение любого формата:

try {
  const x = 10
  const y = 0

  if (y == 0) {
    throw RangeError('деление на ноль')
  }

  const z = x / y
} catch(e) {
	console.error(e.name) // -> RangeError
	console.error(e.message) // -> деление на ноль
}

Еще один вариант использование конструкции throw.

try {
  throw {
    name: 403,
    message: 'Access denied'
  }
} catch(e) {
  console.error(e.name) // -> 403
  console.error(e.message) // -> Access denied
}

Объектно-ориентированное программирование

JavaScript, хоть и не является "классическим" объектно-ориентированным языком программирования (ООП), поддержка принципов ООП в нём обеспечена на основе прототипного наследования.

Принципы ООП

Инкапсуляция – объединение данных и методов в единую структуру, скрывая внутреннюю реализацию и предоставляя интерфейс для взаимодействия;
Наследование – создание новых классов (дочерних) на основе существующих (родительских), наследуя их свойства и методы;
Полиморфизм – способность объектов разных классов с одинаковым интерфейсом иметь различную реализацию, т.е. реагировать на один и тот же вызов метода по-разному. Это может быть достигнуто через перегрузку методов, переопределение методов и использование абстрактных классов и интерфейсов;
Классы – шаблоны для создания объектов с определенными свойствами и методами;
Объекты и сообщения – основные строительные блоки, представляющие сущности с данными (свойства) и поведением (методы). ООП сосредотачивается на обмене сообщениями между объектами, что способствует модульности и повышает уровень абстракции в программировании.

В общем и целом, ООП это подход разработки, где программа рассматривается как набор объектов, взаимодействующих друг с другом.

Функция-конструктор

Функции-конструкторы могут быть использованы для создания объектов с определёнными методами и свойствами. Имена таких функций принято писать с большой буквы.

Ключевое слово this в пределах функции-конструктора ссылается на создаваемый объект;
Оператор new создаёт новый объект путём инициализации функции-конструктора;
Все типы данных в JavaScript, кроме тривиальных типов (null, undefined) имеют собственные классы-конструкторы.

function User(name) {
  this.name = name
  this.age = null
  this.greetings = function(word) {
    if (typeof word == 'string') {
      console.info(`Hello, ${word} from ${this.name}`)
    }
    return false
  }
}

// Иницилизация объектов от конструктора "User"
const user1 = new User('John')
const user2 = new User('Jane')

user1.age = 30
user1.greetings('Alice') // -> "Hello, Alice from John"
user2.greetings('Bob') // -> "Hello, Bob from Jane"

Свойство constructor позволяет узнать какой конструктор был использован при создании какой-либо переменной.

ИмяОбъекта.constructor – возвращает конструктор объекта, т.е. функцию-конструктор от которой был создан объект;
Оператор instanceof проверяет принадлежность объекта к цепочке прототипов другого объекта. Другими словами, он проверяет, является ли объект экземпляром определенного класса или его потомков. Оператор не работает с примитивами.

let x = 5
x.constructor; // -> function Number(){[native code]}
user1.constructor // -> код функции-конструктора User

// Оператор instanceof
x instanceof Number // -> false, x здесь примитив
x = new Number(5)
x instanceof Number // -> true, x здесь объект конструктора Number
x instanceof Object // -> true, все объекты наследуются от Object

Прототипы

В JavaScript другой механизм наследования в отличие от других класс-ориентированных языков программирования. В основе ООП в JavaScript лежит прототипное наследование, когда каждый объект имеет свойство prototype, которое в свою очередь ссылается на другой объект (прототип). Новый объект наследует свойства и методы своего прототипа.

Прототипное программирование – стиль объектно-ориентированного программирования, при котором отсутствует понятие класса, а наследование производится путём клонирования существующего экземпляра объекта (прототипа).

У любой функции определено свойство prototype и вступает оно в действие при использовании этой функции с оператором new, то есть при использовании ее в качестве функции-конструктора. Это свойство ссылается на так называемый «объект-прототип» – виртуальный предок всех экземпляров этого класса-конструктора. С помощью данного свойства можно создать любое другое свойство или метод, который будет наследоваться всеми экземплярами этого класса-конструктора.

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

Добавление свойства к вышеописанному прототипу User:

User.prototype.married = false

Теперь наследуемые от класса-конструктора User объекты user1 и user2 имеют свойство married со значением false.

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

user1.constructor.prototype.info = function() {
  return `Name: ${this.name};
  Age: ${this.age};
  ${this.married ? 'Married: Yes' : 'Married: No'}`
}

Классы

Классы называют синтаксическим сахаром поверх прототипного наследования в JavaScript, делающий код более читаемым и похожим на другие ООП языки.

class Animal {
  constructor(species) {
    this.species = species
  }
  
  breathe() {
    console.log('The animal is breathes')
  }
}

class Dog extends Animal {
  bark() {
    console.log('Woof! Woof!')
  }
}

const Rex = new Dog('canids')
Rex.breathe() // -> The animal is breathes
Rex.bark() // -> Woof! Woof!

BOM (Объектная модель браузера)

BOM (Browser Object Model) – объектная модель браузера, набор объектов предоставляющий JavaScript доступ к свойствам и методам браузера.

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

DOM (Document Object Model) – объектная модель документа, представляет содержимое веб-страницы в виде иерархической структуры узлов, с которыми можно взаимодействовать.

DOM является частью BOM, поскольку document является дочерним объектом корневого объекта BOM — window.

Стандартные объекты JavaScript (Function, Object, Date, Math, String, Number, RegExp и т.д.) в браузерной среде также являются частью BOM и могут быть рассмотрены как дочерние узлы объекта window. Однако, по сравнению с DOM, эти объекты находятся на более низком уровне и не являются частью структуры веб-страницы.

Если изобразить дочерние узлы BOM в общей схеме браузерного окружения в виде древовидной структуры, то получится следующее:

window
│
├── JavaScript
│   ├── Object
│   ├── Number
│   ├── String
│   ├── ...
├── BOM
│   ├── navigator
│   │   ├── geolocation
│   ├── location
│   ├── history
│   ├── screen
├── DOM
│   ├── document
│   │   ├── html
│   │   ├── head
│   │   │   ├── title
│   │   │   ├── meta
│   │   │   ├── ...
│   │   ├── body
│   │   │   ├── header
│   │   │   ├── main
│   │   │   ├── ...
├── XMLHttpRequest
├── setTimeout
├── setInterval 
└── ...

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

Работа с окнами и фреймами

Свойство/Метод	Значение
`window.frames`	коллекция фреймов на текущей странице
`window.parent`	ссылка на родительское окно текущего фрейма
`window.opener`	ссылка на окно, которое открыло текущее окно или фрейм
`window.open()`	открывает новое окно браузера или фрейм
`window.close()`	закрывает текущее окно браузера

Работа с окном браузера

Свойства	Значение
`innerWidth`/`innerHeight`	содержат текущую ширину и высоту окна браузера без учета панелей инструментов
`outerWidth`/`outerHeight`	содержат текущую ширину и высоту окна браузера вместе с панелями инструментов

Положение и размеры окна

Метод	Описание
`moveTo(x, y)`	перемещает окно в абсолютную позицию на экране
`resizeTo(x, y)`	устанавливает абсолютные размеры окна
`scrollTo(x, y)`	выполняет смещение в указанную позицию координат
`moveBy(x, y)`	перемещает окно на x пикселей по горизонтали и y пикселей по вертикали относительно текущей позиции
`resizeBy(x, y)`	расширяет или сжимает окно на указанное аргументами количества пикселей
`scrollBy(x, y)`	выполняет смещение на указанное количество пикселей

Работа с диалоговыми окнами

Метод	Значение
`alert()`	выводит модальное диалоговое окно с заданным текстом
`prompt()`	выводит модальное диалоговое окно с текстовым полем для ввода пользовательского текста
`confirm()`	выводит модальное диалоговое окно с двумя кнопками "ОК" и "Отмена"

Работа с таймерами

Метод	Значение
`setTimeout()`	вызывает функцию один раз через определенный промежуток времени
`setInterval()`	вызывает функцию каждый раз через определенный промежуток времени
`clearTimeout()`	отменяет запланированный вызов функции, установленный с помощью `setTimeout()`
`clearInterval()`	отменяет запланированный вызов функции, установленный с помощью `setInterval()`

Вспомогательные методы

Метод	Значение
`isNaN`	проверяет, является ли значение `NaN` (не числом)
`isFinite()`	проверяет, является ли значение конечным числом
`parseInt()`	преобразует строку в целое число
`parseFloat()`	преобразует строку в число с плавающей точкой

Работа с событиями

Метод	Описание
`addEventListener()`	регистрирует функцию обработчика событий на объекте Window
`removeEventListener()`	удаляет зарегистрированный обработчик событий из объекта Window
`dispatchEvent()`	инициирует событие определенного типа на объекте Window

Это далеко не полный список всех свойств и методов объекта Window, полный список доступен в документации.

Фреймы

Свойство window.frames содержит коллекцию всех дочерних фреймов, загруженных в текущую страницу сайта, в том числе и вложенные фреймы в других фреймах.

Внутри каждого фрейма находится собственный window с дочерними объектами также, как и в родительском окне. Доступ к фреймам из родительского окна будет иметь в случае только если эти фреймы имеют тот же домен и порт, что и родительское окно.

По соображениям безопасности действует политика Same Origin Policy (Одинаковый источник), которая запрещает скриптам из одной страницы взаимодействовать со страницами, расположенными на других доменах или портах.

Работа с окнами

Создание фреймов на странице

<iframe name="top" src="top.html"></iframe>
<iframe name="bottom" src="bottom.html"></iframe>

Обращение к элементам фреймов

frameElement – ссылка на HTML-элемент, содержащий текущий фрейм;
frames[<index>] – обращение к фрейму по индексу;
frames[<name>] – обращение к фрейму в коллекции по имени;
frames.namedItem(<name>) – обращение к фрейму по имени;
frames.length – количество фреймов в коллекции;
frames.parent – родительское окно window;
frames.self – ссылка на текущий window;
frames.top – родительский window верхнего уровня.

Использование фреймов на веб-сайтах не рекомендуется, из-за сложностей в доступности, SEO и безопасность сайта.

navigator

Объект window.navigator содержит информацию о браузере и операционной системе устройства пользователя. В зависимости от этих двух вещей некоторые из свойств этого объекта могут быть недоступны. Следующие свойства одни из наиболее часто используемых:

Свойство	Описание
`connection`	предоставляет информацию о типе подключения пользователя к интернету (например, Wi-Fi, мобильный интернет)
`cookieEnabled`	возвращает булево значение, указывающее, включены ли cookie в браузере
`geolocation`	предоставляет доступ к геопозиции пользователя
`hardwareConcurrency`	возвращает количество логических процессоров, доступных на устройстве пользователя
`mediaDevices`	предоставляет доступ к устройствам ввода, таким как камера и микрофон
`onLine`	возвращает булево значение, указывающее, находится ли устройство пользователя в режиме онлайн или офлайн
`platform`	возвращает строку, содержащую информацию об операционной системе устройства пользователя
`plugins`	возвращает коллекцию объектов `Plugin` с информацией о плагинах, установленных в браузере пользователя
`userAgent`	возвращает строку, содержащую информацию о браузере, версии браузера и операционной системе

Более подробную информацию обо всех свойствах можно найти в документации.

history

Объект window.history предоставляет историю посещений пользователя в текущей вкладке браузера. В целях безопасности объект window.history не позволяет получить доступ к хранящимся в объекте URL-адресам, а лишь перемещаться вперед и назад по истории посещений и добавлять в нее новые записи.

Свойства	Значение
`length`	количество записей в истории браузера

Методы	Описание
`back()`	переход на предыдущую страницу в истории браузера
`forward()`	переход на следующую страницу в истории браузера
`go(n)`	переход на страницу `n` от текущей страницы в истории браузера

Если n в методе go() отрицательное, то произойдёт переход на предыдущие страницы, если положительное, то на следующие.

location

Свойство window.location ссылается на объект Location, представляющий текущий URL-адрес документа, и определяющий методы для изменения этого адреса. Свойство document.location также ссылается на объект Location (window.location === document.location).

Свойство	Значение
`href`	полный URL-адрес текущей страницы
`protocol`	протокол текущей страницы (например, `http:`, `https:`, `file:`, `ftp:`)
`host`	хост и порт текущей страницы (например, `www.example.com:80`)
`hostname`	имя хоста текущей страницы (например, `www.example.com`)
`port`	порт текущей страницы (например, `80`)
`pathname`	путь к текущей странице на сервере (например, `/path/to/page.html`)
`search`	строка запроса текущей страницы (например, `?id=123&name=John`)
`hash`	якорь текущей страницы (например, `#section1`)

Метод	Описание
`assign(url)`	переход по указанному `url`
`replace(url)`	переходит и заменяет текущий `url` на новый в журнале браузера
`reload()`	перезагрузка страницы

По умолчанию метод reload() перезагружает документ из кэша, но если передать в качестве параметра reload(true), то страница будет запрошена с сервера, как если было нажато Ctrl + F5.

screen

Свойство window.screen ссылается на объект Screen, предоставляющий информацию о характеристиках экрана пользователя на котором в данный момент открыта страница.

Свойство	Значение
`height`	разрешение экрана по вертикали в пикселях
`width`	разрешение экрана по горизонтали в пикселях
`colorDepth`	количество битов, используемых для хранения цветовой информации
`pixelDepth`	количество битов, используемых для представления цвета каждого пикселя на экране
`availHeight`	высота экрана пользователя в пикселях без учета элементов оформления окна
`availWidth`	ширина экрана пользователя в пикселях без учета элементов оформления окна

DOM: Объектная модель документа

DOM (Document Object Model) – объектная модель документа, стандартная спецификация JavaScript, определяющая структуру и способ доступа к элементам и содержимому веб-страницы.

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

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

Объект document является главным объектом в объектной модели документа (DOM) и представляет веб-страницу, загруженную в браузере. Он предоставляет доступ к содержимому документа, его структуре и свойствам, и может быть использован для манипуляции с элементами страницы.

Свойства document

Элементы документа

Свойство	Значение
`document.URL`	возвращает текущий URL документа
`document.title`	устанавливает или возвращает заголовок документа
`document.body`	возвращает объект тела документа
`document.head`	возвращает объект заголовка документа
`document.documentElement`	возвращает объект корневого элемента документа

Информация о документе

Свойство	Значение
`document.defaultView`	ссылка на глобальное окно, в котором отображается документ
`document.lastModified`	дата последней модификации документа
`document.readyState`	статус загрузки документа
`document.cookie`	устанавливает или возвращает cookie для текущего документа

Методы document

Работы с элементами страницы

Метод	Описание
`getElementById()`	возвращает элемент на странице с указанным идентификатором
`getElementsByTagName()`	возвращает массив элементов на странице с указанным тегом
`getElementsByClassName()`	возвращает массив элементов на странице с указанным классом
`querySelector()`	возвращает первый элемент, соответствующий указанному селектору CSS
`querySelectorAll()`	возвращает все элементы, соответствующие указанному селектору CSS

Работа с содержимым страницы

Метод	Описание
`write()`	выводит текст или HTML на страницу в место вызова
`createElement()`	создает новый элемент на странице
`createTextNode()`	создает новый текстовый узел
`appendChild()`	добавляет новый элемент в конец дочерних элементов указанного родительского элемента
`replaceChild()`	заменяет указанный дочерний элемент новым элементом
`remove()`	удаляет элемент со страницы

Работа с событиями

Метод	Описание
`addEventListener()`	регистрирует функцию обработчика событий для указанного элемента на странице
`removeEventListener()`	удаляет ранее зарегистрированный обработчик событий
`createEvent()`	создает новый объект события
`dispatchEvent()`	вызывает указанное событие на элементе на странице

Типы узлов документа

В DOM (Document Object Model) существуют различные виды узлов, которые представляют разные типы элементов в документе. Некоторые из них перечислены в таблице ниже:

Код типа	Тип узла	Описание	Пример
1	ELEMENT_NODE	Узел, который представляет элемент на странице, такой как `div`, `p`, `img` и т.д.	`<p>...</p>`
2	ATTRIBUTE_NODE	Узел, который представляет атрибут элемента, такой как `class`, `id`, `src` и т.д.	`align="center"`
3	TEXT_NODE	Узел, который представляет текстовое содержимое элемента	`просто текст`
8	COMMENT_NODE	Узел, который представляет комментарий в HTML-коде	`<!--comment-->`
9	DOCUMENT_NODE	Корневой узел, который представляет весь документ	`document.nodeType === 9`
10	DOCUMENT_TYPE_NODE	Узел, который представляет объявление типа документа (doctype) в начале HTML-кода	`<!DOCTYPE html>`
11	DOCUMENT_FRAGMENT_NODE	Узел, который представляет фрагмент документа, который не имеет корневого узла	`document.createDocumentFragment()

Код типа узла – это числовое значение, которое указывает на тип конкретного узла в документе. Это свойство nodeType доступно для всех узлов в DOM и используется для определения типа узла. Для каждого типа узла существуют свои методы и свойства, которые могут быть использованы в JavaScript. Эти свойства и методы рассмотрены ниже.

Связи между DOM-элементами

Разберём связи следующих DOM-элементов:

<p>Это <em>простой</em> пример</p>

Схематично их можно представить так:

                         <p>
 ┌────── parentNode ─────>├───── childNodes ─────>
 │                        │                      │
Это <─ previousSibling ─ <em> ─ nextSibling ─> пример
                          │
                      firstChild
                          │
                       простой

В данном случае:

parentNode для элементов Это, <em> и пример является элемент <p>;
childNodes для элемента <p> включает элементы Это, <em> и пример;
previousSibling для элемента <em> является текстовый узел, содержащий слово Это;
nextSibling для элемента <em> является текстовый узел, содержащий слово пример;
firstChild для элемента <em> является текстовый узел, содержащий слово простой.

Свойства и методы типов узлов DOM

DOM (Document Object Model) – это иерархическая структура, которая представляет HTML-документ в виде дерева объектов. Каждый узел в дереве представляет отдельный элемент документа, который может иметь разные типы.

Ниже представлены свойства и методы основных типов узлов DOM.

Node

Node – является базовым типом узлов и представляет общие свойства и методы, которые присутствуют у всех типов узлов.

Свойство	Значение
`childNodes`	возвращает коллекцию всех дочерних узлов данного узла
`firstChild`	возвращает первый дочерний узел у данного узла
`lastChild`	возвращает последний дочерний узел у данного узла
`nextSibling`	возвращает следующий соседний узел от данного узла
`nodeName`	возвращает имя узла в виде строки
`nodeType`	возвращает тип узла в виде числа
`nodeValue`	возвращает или устанавливает значение узла
`parentNode`	возвращает родительский узел данного узла
`textContent`	возвращает текстовое содержимое всех дочерних узлов данного узла в виде строки

Метод	Описание
`appendChild(node)`	добавляет узел `node` в конец списка дочерних узлов данного узла
`cloneNode(deep)`	создает копию данного узла. Если deep равен `true`, то будут скопированы все дочерние узлы
`hasChildNodes()`	возвращает `true`, если данный узел имеет дочерние узлы
`insertBefore(node, referenceNode)`	вставляет узел `node` перед узлом
`removeChild(node)`	удаляет узел `node` из списка дочерних узлов данного узла
`replaceChild(newNode, oldNode)`	заменяет узел `oldNode` на узел `newNode` в списке дочерних узлов данного узла

Полный список свойств и методов Node в документации.

Element

Element является подтипом типа Node и расширяет его свойства и методы. Этот тип представляет HTML-элементы и имеет ряд специфичных свойств и методов. Ниже приведены наиболее распространенные свойства и методы класса Element:

Свойство	Значение
`classList`	возвращает коллекцию классов данного элемента
`className`	возвращает или устанавливает атрибут `class` элемента
`id`	возвращает или устанавливает атрибут `id` элемента
`innerHTML`	возвращает или устанавливает содержимое элемента в виде HTML-кода
`outerHTML`	возвращает или устанавливает содержимое элемента в виде HTML-кода вместе с самим элементом
`tagName`	возвращает имя тега элемента в верхнем регистре

Метод	Описание
`getAttribute(name)`	возвращает значение атрибута элемента с именем `name`
`setAttribute(name, value)`	устанавливает значение атрибута элемента с именем `name` на `value`
`hasAttribute(name)`	возвращает `true`, если элемент имеет атрибут с именем `name`
`removeAttribute(name)`	удаляет атрибут элемента с именем `name`
`getElementsByTagName(name)`	возвращает коллекцию элементов с заданным именем тега `name`
`getElementsByClassName(name)`	возвращает коллекцию элементов с заданным именем класса `name`
`querySelector(selector)`	возвращает первый элемент, который соответствует заданному CSS-селектору
`querySelectorAll(selector)`	возвращает коллекцию всех элементов, которые соответствуют заданному CSS-селектору

Полный список свойств и методов Element в документации.

HTMLElement

HTMLElement – это подтип класса Element, который расширяет его свойства и методы, предоставляя дополнительные свойства и методы, специфичные для HTML элементов. Ниже приведены наиболее распространенные свойства и методы класса HTMLElement:

Свойство	Значение
`contentEditable`	возвращает или устанавливает значение, указывающее, может ли содержимое элемента быть редактируемым пользователем
`draggable`	возвращает или устанавливает значение, указывающее, может ли элемент быть перетаскиваемым пользователем
`hidden`	возвращает или устанавливает значение, указывающее, должен ли элемент быть скрытым отображением
`hidden`	возвращает или устанавливает значение, указывающее, должен ли элемент быть скрытым отображением
`offsetHeight`	возвращает высоту элемента включая высоту границы
`offsetWidth`	возвращает ширину элемента включая ширину границы
`scrollHeight`	возвращает высоту содержимого элемента включая содержимое, которое не отображается в окне просмотра
`scrollWidth`	возвращает ширину содержимого элемента включая содержимое, которое не отображается в окне просмотра

Метод	Описание
`click()`	имитирует щелчок мыши на элементе
`focus()`	устанавливает фокус на элементе
`blur()`	снимает фокус с элемента

Полный список свойств и методов HTMLElement в документации.

Document

Объект Document представляет собой HTML или XML документ и предоставляет доступ к элементам и свойствам документа. Ниже приведены наиболее распространенные свойства, методы и коллекции объекта Document.

Коллекция	Описание
`images`	коллекция изображений (объектов Image) на странице
`links`	коллекция ссылок (объектов Link) на странице
`forms`	коллекция форм (объектов Form) на странице
`scripts`	коллекция скриптов на странице
`anchors`	коллекция якорных ссылок (объектов Anchor) на странице
`all`	коллекция всех элементов на странице

Свойство	Значение
`cookie`	возвращает или устанавливает значение cookie для документа
`defaultView`	возвращает объект `window`, связанный с документом
`documentElement`	возвращает корневой элемент документа
`domain`	возвращает или устанавливает доменное имя сервера, который отдает документ
`location`	возвращает объект `Location`, который содержит информацию о текущем URL-адресе документа
`referrer`	возвращает URL-адрес документа, который вызвал текущий документ
`head`	возвращает элемент `<head>` документа
`title`	возвращает или устанавливает значение тега `<title>` документа
`body`	возвращает элемент `<body>` документа

Метод	Описание
`appendChild(node)`	добавляет узел в конец списка дочерних элементов указанного родительского элемента
`createElement(tagName)`	создает новый элемент с указанным именем тега
`createTextNode(text)`	создает новый текстовый узел с указанным текстом
`getElementById(id)`	возвращает элемент с указанным идентификатором
`getElementsByTagName(tagName)`	возвращает коллекцию элементов с заданным именем тега
`getElementsByClassName(className)`	возвращает коллекцию элементов с заданным именем класса
`replaceChild(newNode, oldNode)`	заменяет дочерний элемент `oldNode` на `newNode`
`removeChild(node)`	удаляет узел из списка дочерних элементов указанного родительского элемента

Полный список свойств и методов Document в документации.

Примеры свойств и методов узлов DOM

Создание элемента и текстовых узлов

// Создание нового элемента <p>
const p = document.createElement('p')
// Создание текстового узла
const txt = document.createTextNode('Это новый параграф в конце')
// Вставка в элемент
p.appendChild(txt)
// Вставить в конец элемента body
document.body.appendChild(e)

Способ с insertBefore()

const p = document.createElement('p')
p.appendChild(document.createTextNode('Это новый параграф вначале'))
// Второй аргумент – перед каким элементом
document.body.insertBefore(e, document.body.firstChild)

Создание фрагмента

const p = document.createElement('p')
p.textContent = '... fragment text ...'

// Создание фрагмента
const fragment = document.createDocumentFragment()
// Вставка в фрагмент
fragment.appendChild(p)
// Вставка клонированного фрагмента в <div>
const div = document.getElementById('div')
// Параметр true скопирует элемент с содержимым
div.appendChild(fragment.cloneNode(true))

Удаление элементов

// Последний дочерний элемент в секции body
const lastElement = document.body.lastChild
// Фильтруем текстовые узлы
while (lastElement.nodeType == 3)
  // Присвоение предыдущего соседнего узла
  lastElement = lastElement.previousSibling

// Если в body есть дочерние узлы
if (document.body.hasChildNodes())
  // Удаляем последний дочерний элемент
  document.body.removeChild(lastElement)

Модифицирование элемента

// Первыый попавшийся элемент h1
const e = document.getElementsByTagName('h1')[0]
// Изменение стилей
e.style.font = '28px Impact, Tahoma, Segoe, monospace'
e.style.color = '#45D'
e.style.textShadow = '#A2C 0 0 5px'
e.innerHTML = '<em>innerText</em>' // Вставит как код HTML
e.childNodes[0].nodeValue = '<em>innerText</em>' // Вставит как текст

Манипуляция атрибутами элемента

// Формируем массив абзацев
const paragraphes = document.getElementsByTagName('p')

// Смена атрибута align на противоположный
for (let i in paragraphes) {
  if (paragraphes[i].getAttribute('align') == 'right')
    paragraphes[i].setAttribute('align', 'left')
  else if (paragraphes[i].getAttribute('align') == 'left')
    paragraphes[i].setAttribute('align', 'right')
  else
    paragraphes[i].removeAttribute('align') // Пример удаления
}

События

События в JavaScript позволяют реагировать на различные пользовательские действия и изменения состояния страницы. События могут быть связаны как с HTML-элементами (кнопки, ссылки, формы), так и непосредственно с изменением самой страницы (её загрузка/выгрузка, изменение размера окна, скроллинг).

Обработчики событий

Для обработки событий JavaScript использует слушатели событий (Event Listeners) – это функции JavaScript, которые вызываются в ответ на определённое действие. Эти функции могут быть назначены различным HTML-элементам либо другим состояниям веб-страницы. Пример обработчика события onlclik (одинарный щелчок мыши):

<button class="btn">Нажми меня</button>

// Получаем ссылку на кнопку
const button = document.querySelector('btn')

// Создаем функцию-обработчик события onclick
function handleClick() {
  console.log('Кнопка была нажата!')
}

// Регистрируем обработчик события onclick для кнопки
button.onclick = handleClick

Также обработчик события может быть назначен с помощью HTML-атрибута, например атрибутом onclick.

Объект события

JavaScript создает объект события (Event) в момент его возникновения. Этот объект передается в обработчик события и содержит всю информацию о событии, например, координаты мыши, нажатые клавиши и т.д.

Создание объекта события:

element.addEventListener('click', function(event) {
  // event – объект события
})

В примере выше event и есть объект события, который будет передан обработчику события click. Название события event может быть любым каким зададите.

Свойства объекта события:

Свойство	Значение
`event.type`	тип события, например, `click`, `keydown` и т.д.
`event.target`	элемент, на котором произошло событие
`event.currentTarget`	элемент, на котором был зарегистрирован обработчик события
`event.keyCode`	(устарел) код клавиши, нажатой при событии клавиатуры.
`event.pageX`/`event.pageY`	координаты указателя мыши относительно документа

Свойства объекта события могут варьироваться в зависимости от типа события. Полный их список доступен в документации.

Отмена действия по умолчанию

В JavaScript можно отменить действие по умолчанию, связанное с определенным событием. Например, при обработке события submit формы можно отменить отправку формы на сервер, чтобы выполнить дополнительные действия с данным событием.

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

element.addEventListener('submit', function(event) {
  // Некоторые проверки и логика...
  if (неудовлетворяет условию) {
    return false // Отменяет отправку формы
  }
})

Другой способ заключается в вызов метода preventDefault() в обработчике события.

Методы объекта события

Метод	Описание
`preventDefault()`	предотвращает стандартное действие, связанное с событием
`stopPropagation()`	останавливает дальнейшее распространение события по дереву элементов. Предотвращает всплытие события
`stopImmediatePropagation()`	останавливает дальнейшее распространение события и предотвращает вызов других обработчиков событий для этого элемента

Распространенные типы событий

События мыши

Событие	Описание
`click`	происходит при клике на элементе
`dblclick`	при двойном клике на элементе
`mousedown`	при нажатии кнопки мыши на элементе
`mouseup`	при отпускании кнопки мыши на элементе
`mousemove`	при перемещении мыши над элементом
`mouseover`	происходит, когда курсор мыши пересекает границу элемента
`mouseout`	когда курсор мыши покидает границу элемента

События клавиатуры

Событие	Описание
`keydown`	происходит при нажатии клавиши на клавиатуре
`keyup`	при отпускании клавиши на клавиатуре
`keypress`	клавиша нажата и отпущена

События формы

Событие	Описание
`submit`	происходит при отправке формы
`input`	при изменении значения элемента ввода (`input`, `textarea`, `select`)
`change`	при изменении значения элемента формы (`input`, `select`, `textarea`)

События окна и документа

Событие	Описание
`load`	при полной загрузке веб-страницы или ресурса
`unload`	перед закрытием страницы или переходом на другую страницу
`resize`	при изменении размеров окна браузера
`scroll`	при прокрутке содержимого страницы

События фокуса

Событие	Описание
`focus`	при получении элементом фокуса
`blur`	при потере элементом фокуса

События навигации

Событие	Описание
`hashchange`	при изменении URL-фрагмента (хэша) в адресной строке браузера
`popstate`	при изменении истории переходов (например, при нажатии кнопок "назад" и "вперед" в браузере)

Name		Name	Last commit message	Last commit date
Latest commit History 125 Commits
LICENSE		LICENSE
README.md		README.md

License

sa2kasov/javascript-reference-guide

Folders and files

Latest commit

History

Repository files navigation

JavaScript: Справочное руководство

Содержание

История появления

Создатель языка о его происхождении

Введение в JavaScript

Комментарии

JavaScript в HTML

Переменные

let

const

var

Операторы

Арифметические операторы

Операторы сравнения

Логические операторы

Выражения и инструкции

Выражения

Инструкции

Типы данных

Логический тип

Числа

Строки

Экранирование символов

Конкатенация

Сравнение строк

Шаблонные литералы

Манипуляции с типами

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

Таблица преобразования типов

Управляющие конструкции

if

Тернарный оператор

switch

for

while

do..while

for..in

Метки

try..catch..finally

Функции

Области видимости

Функция как тип данных

Свойства функций

Анонимная функция

Стрелочные функции

Замыкания

Рекурсия

Поднятие (Hoisting)

Объекты

Создание объекта

Свойства объекта

Работа со свойствами объекта

Перебор свойств объекта

Сравнение объектов

Создание методов в объекте

Методы объекта Object

Доступ к свойствам объекта

Управление свойствами объекта

Прочие методы объекта

Создание метода из имеющейся функции

call / apply

Массивы

Создание и работа с массивами

Добавление элементов в созданный массив

Перебор элементов массива

Удаление элемента массива

Методы для работы с массивами

Создание массивов

Доступ к элементам массива

Поиск элементов массива

Получение строки из массива

Конкатенация массивов

Получение части массива

Вставка и удаление в любом месте