СправошнаяПоиск

Шпаргалка по JavaScript

Включение JavaScript в HTML-страницу

Чтобы включить JavaScript внутри страницы, вам нужно заключить его в <script>теги:

 

<тип сценария="текст/javascript">
//здесь будет код JS
</скрипт>

 

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

Вызов внешнего файла JavaScript

Вы также можете поместить JavaScript в отдельный файл и назвать его внутри вашего HTML. Таким образом, вы можете хранить разные типы кода отдельно друг от друга, что позволяет лучше организовать файлы. Если ваш код находится в файле с именем myscript.js, вы бы назвали его:

 

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

 

Включите комментарии

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

В JavaScript у вас есть два разных варианта:

  • Однострочные комментарии — чтобы включить комментарий, который ограничен одной строкой, перед ним//
  • Многострочные комментарии. Если вы хотите написать более длинные комментарии между несколькими строками, заверните их в /* и избежите их выполнения */.

Переменные в JavaScript

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

var, const, let

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

  • var — Самая распространенная переменная. Его можно переназначить, но доступ к нему возможен только внутри функции. Переменные, определенные с помощью varперемещения наверх при выполнении кода.
  • const — Не могут быть переназначены и недоступны до того, как они появятся в коде.
  • let — Подобно constletпеременная может быть переназначена, но не объявлена ​​повторно.

Типы данных

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

  • Числа — var age = 23
  • Переменные — var x
  • Текст (строки) — var a = "init"
  • Операции — var b = 1 + 2 + 3
  • Верные или ложные утверждения — var c = true
  • Постоянные числа — const PI = 3.14
  • Объекты — var name = {firstName:"John", lastName:"Doe"}

Есть больше возможностей. Обратите внимание, что переменные чувствительны к регистру. Это означает, что lastnameи lastNameбудут обрабатываться как две разные переменные.

Объекты

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

 

var man = {
    Name: "Джон",
    LastName: "Доу",
    Age: 20,
    Nation: "немец"
};

 

Следующий уровень: массивы

Далее в нашей шпаргалке по JavaScript идут массивы. Массивы являются частью многих различных языков программирования. Это способ организации переменных и свойств в группы. Вот как создать его в JavaScript:

 

var fruit = ["Банан", "Яблоко", "Груша"];

 

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

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

После того, как вы создали массивы, вы можете сделать с ними несколько вещей:

  • concat() — Объединение нескольких массивов в один
  • indexOf() — Возвращает первую позицию, в которой данный элемент появляется в массиве
  • join() — Объединить элементы массива в одну строку и вернуть строку
  • lastIndexOf() — Дает последнюю позицию, в которой данный элемент появляется в массиве
  • pop() — Удаляет последний элемент массива
  • push() — Добавить новый элемент в конце
  • reverse() — Сортировать элементы в порядке убывания
  • shift() — Удалить первый элемент массива
  • slice() — Извлекает копию части массива в новый массив
  • sort() — Сортирует элементы по алфавиту
  • splice() — Добавляет элементы в указанном порядке и положении
  • toString() — Преобразует элементы в строки
  • unshift() — добавляет новый элемент в начало
  • valueOf() — Возвращает примитивное значение указанного объекта

Операторы

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

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

  • +- Добавление
  • - — Вычитание
  • * — Умножение
  • / — Деление
  • (...) — Оператор группировки, операции внутри скобок выполняются раньше, чем снаружи
  • % — Модуль (остаток)
  • ++ — Увеличение числа
  • -- — Уменьшение числа

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

  • == — Равно
  • === — Равное значение и одинаковый тип
  • != — Не равно
  • !== — Не равно значение или не равный тип
  • > — Больше чем
  • < — Меньше, чем
  • >= — Больше или равно
  • <= — Меньше или равно
  • ? — Тернарный оператор

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

  • && — Логическое и
  • || — Логическое или
  • ! — Логическое не

Побитовые операторы

  • & — оператор И
  • | — оператор ИЛИ
  • ~ — НЕТ
  • ^ — Исключающее ИЛИ
  • << — Сдвиг влево
  • >> — Правый сдвиг
  • >>> — Нулевое заполнение правым сдвигом

Функции

Функции JavaScript — это блоки кода, выполняющие определенную задачу. Базовая функция выглядит так:

 

function имя_функции (параметр1, параметр2, параметр3) {
    // что делает функция
}

 

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

Вывод данных

Обычным применением функций является вывод данных. Для вывода у вас есть следующие варианты:

  • alert() — Вывод данных в алертбокс в окне браузера
  • confirm() — Открывает диалоговое окно да/нет и возвращает true/false в зависимости от клика пользователя.
  • console.log() — Записывает информацию в консоль браузера, подходит для целей отладки.
  • document.write() — Запись непосредственно в HTML-документ
  • prompt() — Создает диалог для пользовательского ввода

Глобальные функции

Глобальные функции — это функции, встроенные в каждый браузер, поддерживающий JavaScript.

  • decodeURI() — Декодирует универсальный идентификатор ресурса (URI), созданный encodeURIили аналогичный
  • decodeURIComponent() — Декодирует компонент URI
  • encodeURI() — Кодирует URI в UTF-8.
  • encodeURIComponent() — То же, но для компонентов URI
  • eval() — Оценивает код JavaScript, представленный в виде строки
  • isFinite() — Определяет, является ли переданное значение конечным числом
  • isNaN() — Определяет, является ли значение NaN или нет
  • Number() — Возвращает число, преобразованное из его аргумента
  • parseFloat() — Разбирает аргумент и возвращает число с плавающей запятой
  • parseInt() — Разбирает свой аргумент и возвращает целое число

Циклы JavaScript

Циклы являются частью большинства языков программирования. Они позволяют выполнять блоки кода нужное количество раз с разными значениями:

 

for (перед циклом; условие цикла; выполнение после цикла) {
    // что делать во время цикла
}

 

У вас есть несколько параметров для создания циклов:

  • for — Самый распространенный способ создания цикла в JavaScript.
  • while — Устанавливает условия, при которых выполняется цикл
  • do while — Аналогичен whileциклу, но выполняется хотя бы один раз и в конце проверяется, выполняется ли условие для повторного выполнения.
  • break — Используется для остановки и выхода из цикла при определенных условиях.
  • continue — Пропускать части цикла, если выполняются определенные условия

Операторы IfElse

Эти типы утверждений легко понять. Используя их, вы можете установить условия выполнения вашего кода. Если выполняются определенные условия, что-то делается, если нет — выполняется что-то другое.

 

if (условие) {
    // что делать, если условие выполнено
} else {
    // что делать, если условие не выполнено
}

 

Аналогичным понятием if elseявляется  switchзаявление. Однако с помощью переключателя вы выбираете один из нескольких блоков кода для выполнения.

Строки

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

 

var person = "Джон Доу";

 

В данном случае John Doeэто строка.

Экранирующие символы

В JavaScript строки помечаются одинарными или двойными кавычками. Если вы хотите использовать кавычки в строке, вам нужно использовать специальные символы:

  • \' — Одинарная цитата
  • \" — Двойная кавычка

Помимо этого у вас также есть дополнительные escape-символы:

  • \\ — обратная косая черта
  • \b — Возврат
  • \f — Подача формы
  • \n — Новая линия
  • \r — Возврат каретки
  • \t — Горизонтальный табулятор
  • \v — Вертикальный табулятор

Строковые методы

Существует множество различных способов работы со строками:

  • charAt() — Возвращает символ в указанной позиции внутри строки
  • charCodeAt() — Дает вам Unicode символа в этой позиции
  • concat() — Объединяет (объединяет) две или более строк в одну
  • fromCharCode() — Возвращает строку, созданную из указанной последовательности кодовых единиц UTF-16.
  • indexOf() — Предоставляет позицию первого вхождения указанного текста в строке
  • lastIndexOf() — То же,  indexOf()но с последним вхождением, поиск назад
  • match() — Извлекает совпадения строки с шаблоном поиска
  • replace() — Найти и заменить указанный текст в строке
  • search() — Выполняет поиск совпадающего текста и возвращает его позицию
  • slice() — Извлекает часть строки и возвращает ее как новую строку
  • split() — Разбивает строковый объект на массив строк в указанной позиции
  • substr() — Аналогично, slice()но извлекает подстроку в зависимости от указанного количества символов
  • substring() — Также аналогично, slice()но не может принимать отрицательные индексы
  • toLowerCase() — Преобразование строк в нижний регистр
  • toUpperCase() — Преобразование строк в верхний регистр
  • valueOf() — Возвращает примитивное значение (у которого нет свойств или методов) строкового объекта.

Синтаксис регулярных выражений

Регулярные выражения — это шаблоны поиска, используемые для сопоставления комбинаций символов в строках. Шаблон поиска можно использовать для текстового поиска и операций замены текста.

Модификаторы узоров

  • e — оценить замену
  • i — Выполнять сопоставление без учета регистра
  • g — Выполнить глобальное сопоставление
  • m — Выполнить сопоставление нескольких строк
  • s — Рассматривать строки как одну строку
  • x — Разрешить комментарии и пробелы в шаблоне
  • U — Нежадный паттерн

Скобки

  • [abc] — Найдите любой из символов в скобках
  • [^abc] — Найти любой символ, которого нет в скобках
  • [0-9] — Используется для поиска любой цифры от 0 до 9
  • [A-z] — Найти любой символ от прописной A до строчной z
  • (a|b|c) — Найдите любую из альтернатив, разделенных знаком|

Метасимволы

  • . — Найти один символ, кроме символа новой строки или конца строки
  • \w — символ слова
  • \W — несловесный символ
  • \d — цифра
  • \D — Нецифровой символ
  • \s — пробельный символ
  • \S — Непробельный символ
  • \b — Найти совпадение в начале/конце слова
  • \B — Совпадение не в начале/конце слова
  • \0 — нулевой символ
  • \n — Новый символ строки
  • \f — Символ подачи формы
  • \r — символ возврата каретки
  • \t — символ табуляции
  • \v — Символ вертикальной табуляции
  • \xxx — Символ, указанный восьмеричным числом xxx
  • \xdd — Символ, заданный шестнадцатеричным числом dd
  • \uxxxx — Символ Unicode, заданный шестнадцатеричным числом XXXX.

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

  • n+ — Соответствует любой строке, содержащей хотя бы один n
  • n* — Любая строка, содержащая ноль или более вхождений n
  • n? — Строка, содержащая ноль или одно вхождение n
  • n{X} — Строка, содержащая последовательность X n
  • n{X,Y} — Строки, содержащие последовательность от X до Y n
  • n{X,} — Соответствует любой строке, содержащей последовательность не менее X n
  • n$ — Любая строка с n в конце
  • ^n — Строка с n в начале
  • ?=n — Любая строка, за которой следует определенная строка n
  • ?!n — Строка, за которой не следует определенная строка ni

Числа и математика

В JavaScript вы также можете работать с числами, константами и выполнять математические функции.

Свойства номера

  • MAX_VALUE — Максимальное числовое значение, которое может быть представлено в JavaScript
  • MIN_VALUE — Наименьшее положительное числовое значение, которое может быть представлено в JavaScript
  • NaN — Значение «Не число»
  • NEGATIVE_INFINITY — Отрицательное значение бесконечности
  • POSITIVE_INFINITY — Положительное значение бесконечности

Числовые методы

  • toExponential() — Возвращает строку с округленным числом, записанным в экспоненциальной записи
  • toFixed() — Возвращает строку числа с указанным количеством десятичных знаков
  • toPrecision() — Строка числа, записанная с указанной длиной
  • toString() — Возвращает число в виде строки
  • valueOf() — Возвращает число как число

Математические свойства

  • E — число Эйлера
  • LN2 — Натуральный логарифм 2
  • LN10 — Натуральный логарифм 10
  • LOG2E — Логарифм E по основанию 2
  • LOG10E — Логарифм E по основанию 10
  • PI — Число Пи
  • SQRT1_2 — Квадратный корень из 1/2
  • SQRT2 — Квадратный корень из 2

Математические методы

  • abs(x) — Возвращает абсолютное (положительное) значение x
  • acos(x) — Арккосинус x, в радианах
  • asin(x) — Арксинус x, в радианах
  • atan(x) — Арктангенс x как числовое значение
  • atan2(y,x) — Арктангенс частного его аргументов
  • ceil(x) — Значение x, округленное до ближайшего целого числа.
  • cos(x) — Косинус x (x в радианах)
  • exp(x) — Значение Е х
  • floor(x) — Значение x, округленное в меньшую сторону до ближайшего целого числа
  • log(x) — Натуральный логарифм (по основанию E) числа x
  • max(x,y,z,...,n) — Возвращает число с наибольшим значением
  • min(x,y,z,...,n) — То же самое для числа с наименьшим значением
  • pow(x,y) — X в степени y
  • random() — Возвращает случайное число от 0 до 1
  • round(x) — Значение x, округленное до ближайшего целого числа
  • sin(x) — Синус x (x в радианах)
  • sqrt(x) — Квадратный корень из х
  • tan(x) — Тангенс угла

Работа с датами в JavaScript

Вы также можете работать с датами и временем и изменять их с помощью JavaScript. Это следующая глава шпаргалки по JavaScript.

Установка дат

  • Date() — Создает новый объект даты с текущей датой и временем
  • Date(2017, 5, 21, 3, 23, 10, 0) — Создать пользовательский объект даты. Цифры обозначают год, месяц, день, час, минуты, секунды, миллисекунды. Вы можете опустить все, что хотите, кроме года и месяца.
  • Date("2017-06-23") — Объявление даты в виде строки

Извлечение значений даты и времени

  • getDate() — Получить день месяца в виде числа (1-31)
  • getDay() — День недели в виде числа (0-6)
  • getFullYear() — Год в виде четырехзначного числа (гггг)
  • getHours() — Получить час (0-23)
  • getMilliseconds() — Миллисекунда (0-999)
  • getMinutes() — Получить минуты (0-59)
  • getMonth() — Месяц в виде числа (0-11)
  • getSeconds() — Получить второй (0-59)
  • getTime() — Получить миллисекунды с 1 января 1970 года.
  • getUTCDate() — День (число) месяца в указанную дату по всемирному времени (также доступно для дня, месяца, полного года, часов, минут и т. д.)
  • parse — Разбирает строковое представление даты и возвращает количество миллисекунд с 1 января 1970 года.

Установить часть даты

  • setDate() — Установите день в виде числа (1-31)
  • setFullYear() — Устанавливает год (необязательно месяц и день)
  • setHours() — Установить час (0-23)
  • setMilliseconds() — Установить миллисекунды (0-999)
  • setMinutes() — Устанавливает минуты (0-59)
  • setMonth() — Установите месяц (0-11)
  • setSeconds() — Устанавливает секунды (0-59)
  • setTime() — Установите время (в миллисекундах с 1 января 1970 г.)
  • setUTCDate() — Устанавливает день месяца для указанной даты по универсальному времени (также доступно для дня, месяца, полного года, часов, минут и т. д.)

Режим DOM

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

Свойства узла

  • attributes — Возвращает динамическую коллекцию всех атрибутов, зарегистрированных для элемента.
  • baseURI — Предоставляет абсолютный базовый URL-адрес HTML-элемента.
  • childNodes — Дает коллекцию дочерних узлов элемента
  • firstChild — Возвращает первый дочерний узел элемента
  • lastChild — Последний дочерний узел элемента
  • nextSibling — Дает вам следующий узел на том же уровне дерева узлов
  • nodeName — возвращает имя узла
  • nodeType — Возвращает тип узла
  • nodeValue — Устанавливает или возвращает значение узла
  • ownerDocument — Объект документа верхнего уровня для этого узла
  • parentNode — Возвращает родительский узел элемента
  • previousSibling — Возвращает узел, непосредственно предшествующий текущему
  • textContent — Задает или возвращает текстовое содержимое узла и его потомков

Методы узла

  • appendChild() — Добавляет новый дочерний узел к элементу как последний дочерний узел
  • cloneNode() — Клонирует элемент HTML
  • compareDocumentPosition() — Сравнивает позицию документа двух элементов
  • getFeature() — Возвращает объект, который реализует API указанной функции.
  • hasAttributes() — Возвращает true, если элемент имеет какие-либо атрибуты, иначе false
  • hasChildNodes() — Возвращает true, если у элемента есть дочерние узлы, иначе false
  • insertBefore() — Вставляет новый дочерний узел перед указанным существующим дочерним узлом.
  • isDefaultNamespace() — Возвращает true, если указанный namespaceURI является значением по умолчанию, в противном случае — false.
  • isEqualNode() — Проверяет, равны ли два элемента
  • isSameNode() — Проверяет, являются ли два элемента одним и тем же узлом
  • isSupported() — Возвращает true, если указанная функция поддерживается элементом.
  • lookupNamespaceURI() — Возвращает URI пространства имен, связанный с данным узлом.
  • lookupPrefix() — Возвращает DOMString, содержащую префикс для заданного URI пространства имен, если он присутствует.
  • normalize() — Соединяет соседние текстовые узлы и удаляет пустые текстовые узлы в элементе.
  • removeChild() — Удаляет дочерний узел из элемента
  • replaceChild() — Заменяет дочерний узел в элементе

Методы элемента

  • getAttribute() — Возвращает указанное значение атрибута узла элемента
  • getAttributeNS() — Возвращает строковое значение атрибута с указанным пространством имен и именем
  • getAttributeNode() — Получает указанный узел атрибута
  • getAttributeNodeNS() — Возвращает узел атрибута для атрибута с заданным пространством имен и именем.
  • getElementsByTagName() — Предоставляет коллекцию всех дочерних элементов с указанным именем тега
  • getElementsByTagNameNS() — Возвращает живую HTMLCollection элементов с определенным именем тега, принадлежащим заданному пространству имен.
  • hasAttribute() — Возвращает true, если элемент имеет какие-либо атрибуты, иначе false
  • hasAttributeNS() — Предоставляет значение true/false, указывающее, имеет ли текущий элемент в заданном пространстве имен указанный атрибут.
  • removeAttribute() — Удаляет указанный атрибут из элемента
  • removeAttributeNS() — Удаляет указанный атрибут из элемента в пределах определенного пространства имен
  • removeAttributeNode() — Забирает указанный узел атрибута и возвращает удаленный узел
  • setAttribute() — Устанавливает или изменяет указанный атрибут на указанное значение
  • setAttributeNS() — Добавляет новый атрибут или изменяет значение атрибута с заданным пространством имен и именем
  • setAttributeNode() — Устанавливает или изменяет указанный узел атрибута
  • setAttributeNodeNS() — Добавляет к элементу новый узел атрибута с пространством имен.

Работа с браузером пользователей

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

Свойства окна

  • closed — Проверяет, было ли окно закрыто или нет, и возвращает true или false
  • defaultStatus — Задает или возвращает текст по умолчанию в строке состояния окна.
  • document — Возвращает объект документа для окна
  • frames — Возвращает все <iframe>элементы в текущем окне
  • history — Предоставляет объект History для окна
  • innerHeight — Внутренняя высота области содержимого окна.
  • innerWidth — Внутренняя ширина области содержимого
  • length — Узнать количество  <iframe>элементов в окне
  • location — Возвращает объект местоположения для окна
  • name — Задает или возвращает имя окна
  • navigator — Возвращает объект Navigator для окна
  • opener — Возвращает ссылку на окно, создавшее окно
  • outerHeight — Внешняя высота окна, включая панели инструментов/полосы прокрутки.
  • outerWidth — Внешняя ширина окна, включая панели инструментов/полосы прокрутки.
  • pageXOffset — Количество пикселей, на которое текущий документ был прокручен по горизонтали
  • pageYOffset — Количество пикселей, на которое документ был прокручен по вертикали
  • parent — Родительское окно текущего окна
  • screen — Возвращает объект Screen для окна
  • screenLeft — Горизонтальная координата окна (относительно экрана)
  • screenTop — Вертикальная координата окна
  • screenX — То же, что screenLeftи для некоторых браузеров
  • screenY — То же, что screenTopи для некоторых браузеров
  • self — Возвращает текущее окно
  • status — Задает или возвращает текст в строке состояния окна
  • top — Возвращает самое верхнее окно браузера

Оконные методы

  • alert() — Отображает окно предупреждения с сообщением и кнопкой OK.
  • blur() — Убирает фокус с текущего окна
  • clearInterval() — Очищает таймер, установленный с помощьюsetInterval()
  • clearTimeout() — Очищает таймер, установленный с помощьюsetTimeout()
  • close() — Закрывает текущее окно
  • confirm() — Отображает диалоговое окно с сообщением и кнопками « ОК » и « Отмена ».
  • focus() — Устанавливает фокус на текущее окно
  • moveBy() — Перемещает окно относительно его текущей позиции
  • moveTo() — Перемещает окно в указанную позицию
  • open() — Открывает новое окно браузера
  • print() — Печатает содержимое текущего окна
  • prompt() — Отображает диалоговое окно, предлагающее посетителю ввести данные
  • resizeBy() — Изменяет размер окна на указанное количество пикселей.
  • resizeTo() — Изменяет размер окна до указанной ширины и высоты
  • scrollBy() — прокручивает документ на указанное количество пикселей
  • scrollTo() — Прокручивает документ до указанных координат
  • setInterval() — Вызывает функцию или вычисляет выражение через заданные интервалы времени.
  • setTimeout() — Вызывает функцию или оценивает выражение после указанного интервала
  • stop() — Останавливает загрузку окна

Свойства экрана

  • availHeight — Возвращает высоту экрана (исключая панель задач Windows)
  • availWidth — Возвращает ширину экрана (исключая панель задач Windows)
  • colorDepth — Возвращает разрядность цветовой палитры для отображения изображений
  • height — Общая высота экрана
  • pixelDepth — Цветовое разрешение экрана в битах на пиксель
  • width — Общая ширина экрана

События JavaScript

События — это то, что может произойти с элементами HTML и выполняется пользователем. Язык программирования может прослушивать эти события и запускать действия в коде. Без них не обходится ни одна шпаргалка по JavaScript.

Мышь (mouse)

  • onclick — Событие происходит, когда пользователь нажимает на элемент
  • oncontextmenu — Пользователь щелкает правой кнопкой мыши элемент, чтобы открыть контекстное меню.
  • ondblclick — Пользователь дважды щелкает элемент
  • onmousedown — Пользователь нажимает кнопку мыши над элементом
  • onmouseenter — Указатель перемещается на элемент
  • onmouseleave — Указатель перемещается за пределы элемента
  • onmousemove — Указатель движется, пока он находится над элементом
  • onmouseover — Когда указатель перемещается на элемент или один из его дочерних элементов
  • onmouseout — Пользователь перемещает указатель мыши за пределы элемента или одного из его дочерних элементов.
  • onmouseup — Пользователь отпускает кнопку мыши над элементом

Клавиатура (keyboard)

  • onkeydown — Когда пользователь нажимает клавишу вниз
  • onkeypress — Момент, когда пользователь начинает нажимать клавишу
  • onkeyup — Пользователь отпускает клавишу

Рамка (frame)

  • onabort — Загрузка носителя прервана
  • onbeforeunload — Событие происходит перед выгрузкой документа
  • onerror — Ошибка при загрузке внешнего файла
  • onhashchange — Произошли изменения в якорной части URL.
  • onload — Когда объект загрузился
  • onpagehide — Пользователь уходит с веб-страницы
  • onpageshow — Когда пользователь переходит на веб-страницу
  • onresize — Вид документа изменен.
  • onscroll — Полоса прокрутки элемента прокручивается
  • onunload — Событие происходит, когда страница выгрузилась

Форма (form)

  • onblur — Когда элемент теряет фокус
  • onchange — Содержимое элемента формы меняется (для <input>, <select>и <textarea>)
  • onfocus — Элемент получает фокус
  • onfocusin — Когда элемент вот-вот получит фокус
  • onfocusout — Элемент вот-вот потеряет фокус
  • oninput — Пользовательский ввод на элементе
  • oninvalid — Элемент недействителен
  • onreset — Форма сброшена
  • onsearch — Пользователь что-то пишет в поле поиска (для <input="search">)
  • onselect — Пользователь выделяет некоторый текст (для <input>и <textarea>)
  • onsubmit — Форма отправлена

Перетаскивание (drag)

  • ondrag — Элемент перетаскивается
  • ondragend — Пользователь закончил перетаскивание элемента
  • ondragenter — Перетаскиваемый элемент попадает в цель перетаскивания
  • ondragleave — Перетаскиваемый элемент покидает цель перетаскивания
  • ondragover — Перетаскиваемый элемент находится поверх цели перетаскивания
  • ondragstart — Пользователь начинает перетаскивать элемент
  • ondrop — Перетащенный элемент перетаскивается на цель перетаскивания

Буфер обмена (clipboard)

  • oncopy — Пользователь копирует содержимое элемента
  • oncut — Пользователь вырезает содержимое элемента
  • onpaste — Пользователь вставляет содержимое в элемент

Медиа (media)

  • onabort — Загрузка носителя прервана
  • oncanplay — Браузер может начать воспроизведение мультимедиа (например, файл достаточно буферизован)
  • oncanplaythrough — Браузер может воспроизводить мультимедиа без остановки
  • ondurationchange — Продолжительность смены носителя
  • onended — СМИ подошли к концу
  • onerror — Возникает при возникновении ошибки при загрузке внешнего файла
  • onloadeddata — Медиаданные загружаются
  • onloadedmetadata — Метаданные (такие как размеры и продолжительность) загружаются
  • onloadstart — Браузер начинает искать указанный носитель
  • onpause — Медиа приостанавливается либо пользователем, либо автоматически
  • onplay — Медиа было запущено или больше не приостановлено
  • onplaying — Воспроизведение мультимедиа после приостановки или остановки для буферизации
  • onprogress — Браузер находится в процессе загрузки мультимедиа
  • onratechange — Скорость воспроизведения носителя меняется
  • onseeked — Пользователь закончил перемещение/переход на новую позицию в медиа
  • onseeking — Пользователь начинает двигаться/пропускать
  • onstalled — Браузер пытается загрузить медиафайл, но он недоступен
  • onsuspend — Браузер намеренно не загружает медиа
  • ontimeupdate — Изменилась игровая позиция (например, из-за быстрой перемотки вперед)
  • onvolumechange — Изменена громкость мультимедиа (включая отключение звука)
  • onwaiting — Мультимедиа приостановлено, но ожидается возобновление (например, буферизация)

Анимация (animation)

  • animationend — Анимация CSS завершена
  • animationiteration — CSS анимация повторяется
  • animationstart — Началась CSS анимация

Другой (other)

  • transitionend — Запускается после завершения перехода CSS
  • onmessage — Сообщение получено через источник события
  • onoffline — Браузер начинает работать в автономном режиме
  • ononline — Браузер начинает работать онлайн
  • onpopstate — При изменении истории окна
  • onshow<menu>Элемент отображается в виде контекстного меню
  • onstorage — Обновлена ​​область веб-хранилища
  • ontoggle — Пользователь открывает или закрывает <details>элемент
  • onwheel — Колесико мыши перемещается вверх или вниз по элементу
  • ontouchcancel — Экран-касание прерывается
  • ontouchend — Палец пользователя убран с сенсорного экрана
  • ontouchmove — Палец скользит по экрану
  • ontouchstart — Палец помещается на сенсорный экран

Ошибки

При работе с JavaScript могут возникать разные ошибки. Есть несколько способов справиться с ними:

  • try — Позволяет определить блок кода для проверки на наличие ошибок
  • catch — Настройте блок кода для выполнения в случае ошибки
  • throw — Создавайте собственные сообщения об ошибках вместо стандартных ошибок JavaScript.
  • finally — Позволяет выполнять код после попытки и перехвата, независимо от результата

Значения имени ошибки

JavaScript также имеет встроенный объект ошибки. Он имеет два свойства:

  • name — Задает или возвращает имя ошибки
  • message — Устанавливает или возвращает сообщение об ошибке в виде строки

Свойство error может возвращать шесть различных значений в качестве своего имени:

  • EvalError — Произошла ошибка в eval()функции
  • RangeError — Номер находится «вне диапазона»
  • ReferenceError — Произошла недопустимая ссылка
  • SyntaxError — Произошла синтаксическая ошибка
  • TypeError — Произошла ошибка типа
  • URIError — Произошла encodeURI()ошибка