Справочник по HTML, CSS и JavaScript

Справочник по HTML, CSS и JavaScript — Frontend

HTML: базовые теги

Структура документа

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Заголовок</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Текст

Тег	Назначение
`<h1>`–`<h6>`	Заголовки
`<p>`	Абзац
`<strong>`	Жирный (важный)
`<em>`	Курсив
`<br>`	Перенос строки
`<hr>`	Горизонтальная линия

Списки

<ul><li>Пункт</li></ul>
<ol><li>Шаг</li></ol>

Ссылки и изображения

<a href="url" target="_blank" title="подсказка">Текст</a>
<a href="#id">Якорь</a>
<img src="path" alt="описание" width="300" height="200">

Таблицы

<table>
  <tr><th>Заголовок</th></tr>
  <tr><td>Ячейка</td></tr>
</table>

colspan, rowspan — объединение ячеек.

Формы

<form>
  <label for="id">Подпись</label>
  <input type="text" id="id" name="field" placeholder="Подсказка">
  <input type="number" name="n" min="1" max="100">
  <input type="email">
  <

Семантические теги HTML5

Семантика задаёт смысл блока. Важно для доступности и SEO.

Тег	Назначение
`<header>`	Шапка страницы или секции
`<main>`	Основной контент (одна на странице)
`<section>`	Смысловая секция
`<article>`	Независимая статья/запись
`<nav>`	Навигация
`<aside>`	Боковая колонка, доп. информация
`<footer>`	Подвал страницы или секции

<body>
  <header>...</header>
  <main>
    <section>...</section>
    <article>...</article>
  </main>
  <aside>...</aside>
  <footer>...</footer>
</body>

Атрибуты форм

Атрибут	Применение	Описание
`required`	`input`, `select`, `textarea`	Обязательное поле
`disabled`	`input`, `button`	Неактивное поле
`readonly`	`input`, `textarea`	Только чтение
`min`, `max`	number, date	Границы значения
`step`	number	Шаг (0.1, 1, 10)
`pattern`	text	Регулярное выражение для валидации
`placeholder`	text, `textarea`	Подсказка в пустом поле

Медиа: `audio` и `video`

<audio src="track.mp3" controls loop></audio>
<video src="clip.mp4" controls width="640" height="360"></video>

Атрибуты: controls (плеер), autoplay, loop, muted, src или вложенные <source>.

CSS: селекторы и свойства

Селекторы

Селектор	Пример	Описание
Элемент	`p { }`	Все параграфы
Класс	`.class { }`	`class`="`class`"
`id`	`#id { }`	`id`="`id`"
Псевдокласс	`a:hover { }`	При наведении
Псевдоэлемент	`::before { }`	Виртуальный элемент

Комбинаторы

Комбинатор	Пример	Описание
Потомок	`div p { }`	Любой `p` внутри `div`
Дочерний	`div > p { }`	`p` — прямой ребенок `div`
Сосед	`h2 + p { }`	`p` сразу после `h2`
Следующие братья	`h2 ~ p { }`	Все `p` после `h2` на том же уровне

Псевдоклассы

:first-child   /* первый дочерний элемент */
:last-child    /* последний дочерний */
:nth-child(n)  /* n-й (1, 2, 3... или 2n, 2n+1, odd, even) */
:not(selector) /* не совпадает с селектором */
:hover         /* при наведении */
:focus         /* при фокусе */

Цвета и фон

color: red;
background-color: #fff;
background: linear-gradient(135deg, #667eea, #764ba2);

Шрифты и текст

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
line-height: 1.5;
text-align: center;
text-decoration: none;

Блочная модель

width: 300px;
height: 200px;
padding: 20px;
margin: 20px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;

Display и Flexbox

display: block | inline | inline-block | flex;
flex-direction: row | column;
justify-content: flex-start | center | space-between;
align-items: flex-start | center;
flex-wrap: wrap;
gap: 20px;
flex: 1;

Позиционирование

position: static | relative | absolute | fixed | sticky;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 10;

Адаптивность

@media (min-width: 768px) { }
@media (max-width: 767px) { }
max-width: 100%;

`transition` и `animation`

transition: property duration timing-function delay;
transition: all 0.3s ease;
 
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
animation: fadeIn 1s ease;

Дополнительные свойства

box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
opacity: 0.8;
transform: translateX(10px) rotate(5deg) scale(1.1);
cursor: pointer;

JavaScript: переменные и типы

Объявление

let x = 5;
const PI = 3.14;

Типы

typeof "текст" // "string"
typeof 42 // "number"
typeof true // "boolean"
typeof undefined // "undefined"
typeof null // "object"

Строки: конкатенация и шаблоны

"текст" + " ещё"
`Шаблон: ${переменная}`

Методы строк

`charAt()`

Возвращает символ по указанному индексу (или пустую строку, если индекс вне диапазона).

str.charAt(index)

Примеры

"hello".charAt(0) // "h"
"hello".charAt(10) // ""

`charCodeAt()`

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

str.charCodeAt(index)

Примеры

"A".charCodeAt(0) // 65
"а".charCodeAt(0) // 1072 (кириллица)

`includes()`

Проверяет, содержит ли строка подстроку. Возвращает true или false.

str.includes(searchString)
str.includes(searchString, position)

Примеры

"hello".includes("ell") // true
"hello".includes("xyz") // false
"hello".includes("l", 3) // false (поиск с индекса 3)

`endsWith()`

Возвращает true, если строка заканчивается указанной подстрокой.

str.endsWith(searchString)
str.endsWith(searchString, length)

Примеры

"hello.txt".endsWith(".txt") // true
"hello".endsWith("lo") // true

`startsWith()`

Возвращает true, если строка начинается с указанной подстроки.

str.startsWith(searchString)
str.startsWith(searchString, position)

Примеры

"hello".startsWith("he") // true
"hello".startsWith("lo") // false

`indexOf()`

Возвращает индекс первого вхождения подстроки или -1, если не найдена.

str.indexOf(searchValue)
str.indexOf(searchValue, fromIndex)

Примеры

"hello world".indexOf("world") // 6
"hello".indexOf("x") // -1
"hello".indexOf("l", 3) // 3

`lastIndexOf()`

Возвращает индекс последнего вхождения подстроки или -1.

str.lastIndexOf(searchValue)
str.lastIndexOf(searchValue, fromIndex)

Примеры

"hello".lastIndexOf("l") // 3
"hello".lastIndexOf("x") // -1

`slice()`

Возвращает подстроку по начальному и конечному индексам. Отрицательные индексы считаются с конца.

str.slice(startIndex)
str.slice(startIndex, endIndex)

Примеры

"hello".slice(1, 4) // "ell"
"hello".slice(2) // "llo"
"hello".slice(-2) // "lo"
"hello".slice(1, -1) // "ell"

`substring()`

Возвращает подстроку между двумя индексами. Отрицательные значения трактуются как 0.

str.substring(indexStart)
str.substring(indexStart, indexEnd)

Примеры

"hello".substring(1, 4) // "ell"
"hello".substring(2) // "llo"

`toLowerCase()`

Возвращает копию строки в нижнем регистре.

str.toLowerCase()

Примеры

"HELLO".toLowerCase() // "hello"

`toUpperCase()`

Возвращает копию строки в верхнем регистре.

str.toUpperCase()

Примеры

"hello".toUpperCase() // "HELLO"

`trim()`

Удаляет пробелы с обоих концов строки.

str.trim()

Примеры

"  hello  ".trim() // "hello"

`trimStart()`

Удаляет пробелы только в начале строки.

str.trimStart()

`trimEnd()`

Удаляет пробелы только в конце строки.

str.trimEnd()

`replace()`

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

str.replace(searchValue, newValue)

Примеры

"hello".replace("l", "L") // "heLlo"
"hello".replace(/l/g, "L") // "heLLo" (с регулярным выражением)

`replaceAll()`

Заменяет все вхождения подстроки на новую.

str.replaceAll(searchValue, newValue)

Примеры

"hello".replaceAll("l", "L") // "heLLo"

`split()`

Разбивает строку на массив подстрок по разделителю.

str.split(separator)
str.split(separator, limit)

Примеры

"a-b-c".split("-") // ["a", "b", "c"]
"hello".split("") // ["h", "e", "l", "l", "o"]
"a,b,c".split(",", 2) // ["a", "b"]

`repeat()`

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

str.repeat(count)

Примеры

"ab".repeat(3) // "ababab"
"x".repeat(0) // ""

`padStart()`

Дополняет строку в начале до указанной длины.

str.padStart(targetLength)
str.padStart(targetLength, padString)

Примеры

"5".padStart(3, "0") // "005"
"42".padStart(5, " ") // "   42"

`padEnd()`

Дополняет строку в конце до указанной длины.

str.padEnd(targetLength)
str.padEnd(targetLength, padString)

Примеры

"hi".padEnd(5, "!") // "hi!!!"

JavaScript: числа

+, -, *, /, %, **
Number("5")
parseInt("10"), parseFloat("3.14")

Методы массивов

`push()`

Добавляет один или несколько элементов в конец массива. Возвращает новую длину.

arr.push(item1, item2, ...)

Примеры

const arr = [1, 2];
arr.push(3); // 3, arr = [1, 2, 3]
arr.push(4, 5); // 5, arr = [1, 2, 3, 4, 5]

`pop()`

Удаляет последний элемент и возвращает его. Мутирует массив.

arr.pop()

Примеры

[1, 2, 3].pop() // 3, массив стал [1, 2]
[].pop() // undefined

`shift()`

Удаляет первый элемент и возвращает его. Сдвигает индексы.

arr.shift()

`unshift()`

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

arr.unshift(item1, item2, ...)

`splice()`

Изменяет массив: удаляет, вставляет или заменяет элементы. Возвращает массив удалённых элементов.

arr.splice(start, deleteCount, item1, item2, ...)

Примеры

const arr = [1, 2, 3, 4];
arr.splice(1, 2); // [2, 3], arr = [1, 4]
arr.splice(1, 0, 9); // [], arr = [1, 9, 4] (вставка)
arr.splice(1, 1, 8); // [9], arr = [1, 8, 4] (замена)

`slice()`

Возвращает копию части массива (не мутирует).

arr.slice(start)
arr.slice(start, end)

Примеры

[1, 2, 3, 4].slice(1, 3) // [2, 3]
[1, 2, 3].slice(-2) // [2, 3]

`concat()`

Объединяет массивы, возвращает новый массив.

arr.concat(arr2, arr3, ...)

Примеры

[1, 2].concat([3, 4]) // [1, 2, 3, 4]
[1].concat([2], [3]) // [1, 2, 3]

`join()`

Объединяет элементы массива в строку через разделитель.

arr.join(separator)

Примеры

["a", "b", "c"].join("-") // "a-b-c"
[1, 2, 3].join("") // "123"

`indexOf()`

Возвращает индекс первого вхождения элемента или -1.

arr.indexOf(searchElement)
arr.indexOf(searchElement, fromIndex)

`includes()`

Проверяет наличие элемента. Возвращает true или false.

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

Примеры

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(5) // false

`find()`

Возвращает первый элемент, для которого функция возвращает истину, или undefined.

arr.find(callback)

Примеры

[1, 5, 3, 8].find(x => x > 4) // 5
[1, 2, 3].find(x => x > 10) // undefined

`findIndex()`

Возвращает индекс первого элемента, удовлетворяющего условию, или -1.

arr.findIndex(callback)

`forEach()`

Выполняет функцию для каждого элемента. Не возвращает значение.

arr.forEach(callback)

Примеры

[1, 2, 3].forEach(x => console.log(x)); // выводит 1, 2, 3

`map()`

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

arr.map(callback)

Примеры

[1, 2, 3].map(x => x * 2) // [2, 4, 6]
["a", "b"].map(s => s.toUpperCase()) // ["A", "B"]

`filter()`

Создаёт новый массив из элементов, для которых функция возвращает истину.

arr.filter(callback)

Примеры

[1, 2, 3, 4].filter(x => x > 2) // [3, 4]

`reduce()`

Сводит массив к одному значению, вызывая функцию для каждого элемента.

arr.reduce(callback, initialValue)

Примеры

[1, 2, 3, 4].reduce((a, b) => a + b, 0) // 10
[1, 2, 3].reduce((a, b) => a + b) // 6 (начальное = первый элемент)

`some()`

Возвращает true, если хотя бы один элемент удовлетворяет условию.

arr.some(callback)

Примеры

[1, 2, 3].some(x => x > 2) // true
[1, 2].some(x => x > 5) // false

`every()`

Возвращает true, если все элементы удовлетворяют условию.

arr.every(callback)

Примеры

[2, 4, 6].every(x => x % 2 === 0) // true
[2, 3, 6].every(x => x % 2 === 0) // false

`sort()`

Сортирует массив на месте. По умолчанию — как строки. Можно передать компаратор.

arr.sort()
arr.sort(compareFunction)

Примеры

[3, 1, 2].sort() // [1, 2, 3]
[10, 2, 30].sort() // [10, 2, 30] (лексикографически!)
[10, 2, 30].sort((a, b) => a - b) // [2, 10, 30]

`reverse()`

Переворачивает порядок элементов на месте.

arr.reverse()

`flat()`

Сглаживает вложенные массивы на указанную глубину.

arr.flat(depth)

Примеры

[1, [2, 3], [4]].flat() // [1, 2, 3, 4]
[1, [2, [3]]].flat(2) // [1, 2, 3]

`fill()`

Заполняет все элементы массива одним значением. Мутирует массив.

arr.fill(value)
arr.fill(value, start, end)

Примеры

Array(3).fill(0) // [0, 0, 0]
[1, 2, 3].fill(9, 1, 3) // [1, 9, 9]

JavaScript: объекты и Math

Обращение к свойствам

const obj = { a: 1, b: 2 };
obj.a
obj["b"]
obj[variable] // имя свойства из переменной

`Object.keys()`

Возвращает массив ключей объекта.

Object.keys(obj)

Примеры

Object.keys({ a: 1, b: 2 }) // ["a", "b"]

`Object.values()`

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

Object.values(obj)

Примеры

Object.values({ a: 1, b: 2 }) // [1, 2]

`Object.entries()`

Возвращает массив пар [ключ, значение].

Object.entries(obj)

Примеры

Object.entries({ a: 1, b: 2 }) // [["a", 1], ["b", 2]]

`Object.assign()`

Копирует свойства из нескольких объектов в целевой. Возвращает целевой объект.

Object.assign(target, source1, source2, ...)

Примеры

const a = { x: 1 };
Object.assign(a, { y: 2 }, { z: 3 }); // a = { x: 1, y: 2, z: 3 }

`hasOwnProperty()`

Проверяет, есть ли у объекта собственное (не унаследованное) свойство.

obj.hasOwnProperty(prop)

Примеры

const o = { a: 1 };
o.hasOwnProperty("a") // true
o.hasOwnProperty("b") // false

`Math.floor()`

Округляет вниз до целого.

Math.floor(x)

Примеры

Math.floor(3.7) // 3
Math.floor(-1.2) // -2

`Math.ceil()`

Округляет вверх до целого.

Math.ceil(x)

Примеры

Math.ceil(3.2) // 4
Math.ceil(-1.2) // -1

`Math.round()`

Округляет до ближайшего целого.

Math.round(x)

`Math.trunc()`

Удаляет дробную часть (округление к нулю).

Math.trunc(x)

`Math.min()`, `Math.max()`

Возвращают минимальное или максимальное значение из аргументов.

Math.min(a, b, c, ...)
Math.max(a, b, c, ...)

Примеры

Math.min(3, 1, 4) // 1
Math.max(3, 1, 4) // 4
Math.max(...[1, 2, 3]) // 3 (с spread)

`Math.abs()`

Возвращает абсолютное значение числа.

Math.abs(x)

`Math.random()`

Возвращает псевдослучайное число от 0 (включительно) до 1 (исключительно).

Math.random()

Примеры

Math.random() // 0.123...
Math.floor(Math.random() * 6) + 1 // целое от 1 до 6

`Math.pow()`, `Math.sqrt()`

Возведение в степень и квадратный корень.

Math.pow(base, exponent)
Math.sqrt(x)

Примеры

Math.pow(2, 3) // 8
Math.sqrt(9) // 3
2 ** 3 // 8 (современный синтаксис)

JavaScript: DOM API

`getElementById()`

Возвращает элемент по уникальному id или null, если не найден.

document.getElementById("id")

Примеры

const header = document.getElementById("header");
if (header) header.textContent = "Новый заголовок";

`querySelector()`

Возвращает первый элемент, совпадающий с CSS-селектором, или null.

document.querySelector(selector)
elem.querySelector(selector)

Примеры

document.querySelector(".class")
document.querySelector("#id")
document.querySelector("div.item")

`querySelectorAll()`

Возвращает NodeList всех элементов, совпадающих с селектором.

document.querySelectorAll(selector)

Примеры

document.querySelectorAll("p") // все параграфы
document.querySelectorAll(".item") // все с классом item

`createElement()`

Создаёт новый элемент по имени тега.

document.createElement(tagName)

Примеры

const div = document.createElement("div");
div.textContent = "Текст";

`append()`, `prepend()`

Добавляют узлы в конец или начало родителя. Поддерживают несколько аргументов.

parent.append(node1, node2, ...)
parent.prepend(node1, node2, ...)

`before()`, `after()`, `replaceWith()`

Вставка или замена относительно элемента.

elem.before(node)
elem.after(node)
elem.replaceWith(newNode)

`remove()`

Удаляет элемент из DOM.

elem.remove()

`textContent` vs `innerHTML`

textContent — только текст, безопасно от XSS. Не парсит HTML.
innerHTML — разметка HTML. Опасен, если содержимое от пользователя.

elem.textContent = "Простой текст"
elem.innerHTML = "<b>Жирный</b>"

`getAttribute()`, `setAttribute()`, `removeAttribute()`, `hasAttribute()`

Работа с атрибутами элемента.

elem.getAttribute("href")
elem.setAttribute("href", "https://example.com")
elem.removeAttribute("disabled")
elem.hasAttribute("required")

`dataset`

Доступ к data-атрибутам через свойство dataset.

elem.dataset.key // data-key="value"
elem.dataset.userId // data-user-id="123"

`classList`

Добавление, удаление и переключение классов.

elem.classList.add("active")
elem.classList.remove("active")
elem.classList.toggle("active")
elem.classList.contains("active")
elem.classList.replace("old", "new")

Навигация по DOM

elem.parentElement // родитель
elem.children // дочерние элементы (без текстовых узлов)
elem.nextElementSibling // следующий сосед
elem.previousElementSibling // предыдущий сосед
elem.closest("selector") // ближайший предок, совпадающий с селектором

Примеры

const btn = document.querySelector("button");
const card = btn.closest(".card"); // родительская карточка

JavaScript: события

`addEventListener()`

Подписывает элемент на событие. Можно добавить несколько обработчиков на одно событие.

elem.addEventListener(type, listener)
elem.addEventListener(type, listener, options)

Примеры

btn.addEventListener("click", () => alert("Клик!"));
form.addEventListener("submit", function(e) {
  e.preventDefault();
});

`removeEventListener()`

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

elem.removeEventListener(type, listener)

Примеры

const handler = () => console.log("click");
btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);

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

Свойства и методы объекта события, передаваемого в обработчик:

Свойство/метод	Описание
`e.target`	Элемент, на котором произошло событие (может быть вложенным)
`e.currentTarget`	Элемент, к которому привязан обработчик
`e.preventDefault()`	Отменяет стандартное действие (например, отправку формы)
`e.stopPropagation()`	Останавливает всплытие события

Примеры

div.addEventListener("click", function(e) {
  console.log(e.target); // на что кликнули
  console.log(e.currentTarget); // div (всегда)
  e.preventDefault(); // отменить действие по умолчанию
});

Типы событий

Событие	Когда срабатывает
`click`	Клик мышью
`dblclick`	Двойной клик
`input`	При изменении значения `input`, `textarea` (каждый символ)
`change`	При изменении и потере фокуса (`select`, checkbox, radio)
`submit`	Отправка формы
`keydown`, `keyup`	Нажатие и отпускание клавиши
`focus`, `blur`	Фокус на элементе и уход фокуса
`load`	Загрузка ресурса (`window`, `img`)
`resize`	Изменение размера окна

JavaScript: функции

Объявление

function greet(name) {
  return "Привет, " + name;
}
 
const add = (a, b) => a + b;
const sq = x => x * x;

Параметры по умолчанию

function f(a, b = 0) {
  return a + b;
}

JavaScript: `localStorage` и JSON

`localStorage`

Хранит данные в браузере между сессиями. Только строки. Объём ~5MB. Синхронный API.

localStorage.setItem("key", "value");
localStorage.getItem("key"); // "value" или null
localStorage.removeItem("key");
localStorage.clear(); // очистить всё

`sessionStorage`

То же, но данные удаляются при закрытии вкладки.

sessionStorage.setItem("key", "value");
sessionStorage.getItem("key");

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

localStorage хранит только строки. Для объектов используют JSON:

const user = { name: "Иван", score: 100 };
localStorage.setItem("user", JSON.stringify(user));
const saved = JSON.parse(localStorage.getItem("user"));

`JSON.stringify()`, `JSON.parse()`

Преобразование в строку и обратно. При ошибке JSON.parse() выбрасывает исключение — оборачивать в try/catch при ненадёжных данных.

JSON.stringify(obj) // '{"a":1,"b":2}'
JSON.stringify(obj, null, 2) // с отступами
JSON.parse('{"a":1}') // { a: 1 }

JavaScript: диалоги и консоль

`alert()`

Показывает модальное окно с сообщением. Блокирует выполнение до закрытия.

alert("Сообщение");

`confirm()`

Диалог «ОК / Отмена». Возвращает true или false.

if (confirm("Удалить?")) {
  // пользователь нажал ОК
}

`prompt()`

Запрос ввода. Возвращает строку или null, если отмена.

const name = prompt("Имя:", "Гость");
// name — строка или null

Консоль

console.log("обычный вывод");
console.warn("предупреждение");
console.error("ошибка");
console.table([{a:1, b:2}, {a:3, b:4}]); // таблица

Справочник по HTML, CSS и JavaScript

HTML: базовые теги

Структура документа

Текст

Списки

Ссылки и изображения

Таблицы

Формы

Семантические теги HTML5

Атрибуты форм

Медиа: audio и video

CSS: селекторы и свойства

Селекторы

Комбинаторы

Псевдоклассы

Цвета и фон

Шрифты и текст

Блочная модель

Display и Flexbox

Позиционирование

Адаптивность

transition и animation

Дополнительные свойства

JavaScript: переменные и типы

Объявление

Типы

Строки: конкатенация и шаблоны

Методы строк

charAt()

charCodeAt()

includes()

endsWith()

startsWith()

indexOf()

lastIndexOf()

slice()

substring()

toLowerCase()

toUpperCase()

trim()

trimStart()

trimEnd()

replace()

replaceAll()

split()

repeat()

padStart()

padEnd()

JavaScript: числа

Методы массивов

push()

pop()

shift()

unshift()

splice()

slice()

concat()

join()

indexOf()

includes()

find()

findIndex()

forEach()

map()

filter()

reduce()

some()

every()

sort()

reverse()

flat()

fill()

JavaScript: объекты и Math

Обращение к свойствам

Object.keys()

Object.values()

Object.entries()

Object.assign()

hasOwnProperty()

Math.floor()

Медиа: `audio` и `video`

`transition` и `animation`

`charAt()`

`charCodeAt()`

`includes()`

`endsWith()`

`startsWith()`

`indexOf()`

`lastIndexOf()`

`slice()`

`substring()`

`toLowerCase()`

`toUpperCase()`

`trim()`

`trimStart()`

`trimEnd()`

`replace()`

`replaceAll()`

`split()`

`repeat()`

`padStart()`

`padEnd()`

`push()`

`pop()`

`shift()`

`unshift()`

`splice()`

`slice()`

`concat()`

`join()`

`indexOf()`

`includes()`

`find()`

`findIndex()`

`forEach()`

`map()`

`filter()`

`reduce()`

`some()`

`every()`

`sort()`

`reverse()`

`flat()`

`fill()`

`Object.keys()`

`Object.values()`

`Object.entries()`

`Object.assign()`

`hasOwnProperty()`

`Math.floor()`

`Math.ceil()`

`Math.round()`

`Math.trunc()`

`Math.min()`, `Math.max()`

`Math.abs()`

`Math.random()`

`Math.pow()`, `Math.sqrt()`

`getElementById()`

`querySelector()`

`querySelectorAll()`

`createElement()`

`append()`, `prepend()`

`before()`, `after()`, `replaceWith()`

`remove()`

`textContent` vs `innerHTML`

`getAttribute()`, `setAttribute()`, `removeAttribute()`, `hasAttribute()`

`dataset`

`classList`

`addEventListener()`

`removeEventListener()`

JavaScript: `localStorage` и JSON

`localStorage`

`sessionStorage`

`JSON.stringify()`, `JSON.parse()`

`alert()`

`confirm()`

`prompt()`