Сделайте свое путешествие по JavaScript проще с помощью этой памятки
Если кто-нибудь спросит меня, какой язык программирования наиболее известен среди веб-разработчиков во всем мире, я отвечу: JavaScript. JavaScript, часто сокращенно JS, является наиболее широко используемым языком программирования для веб-разработки. Сегодня я пытаюсь облегчить ваше путешествие по JavaScript с помощью шпаргалки.
Итак, давайте проверим шпаргалку.
Основы JavaScript
- Включение JavaScript в HTML-страницу
<script type="text/javascript"> //JS code goes here </script>
- Вызов внешнего файла JavaScript
<script src="myscript.js"></script><code></code>
- Включая комментарии
//Single line comments /* comment here for Multi-line comments */
Переменные (var, const, let)
- var
Самая распространенная переменная. Может быть переназначен, но доступен только внутри функции. Переменные, определенные с помощью var, перемещаются вверх при выполнении кода. - const
Нельзя переназначить, и они недоступны до того, как появятся в коде. - let
Подобно const, переменная let может быть переназначена, но не объявлена повторно.
Типы данных
- Числа
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"}
- Объекты (человек)
var person = {
firstName:"John",
lastName:"Doe",
age:20,
nationality:"German"
};
Массивы
var fruit = ["Banana", "Apple", "Pear"];
Методы массива
- Объединение нескольких массивов в один
concat()
- Возвращает первую позицию, в которой данный элемент появляется в массиве
indexOf()
- Объединить элементы массива в одну строку и вернуть строку
join()
- Дает последнюю позицию, в которой данный элемент появляется в массиве
lastIndexOf()
- Удаляет последний элемент массива
pop()
- Добавить новый элемент в конце
push()
- Обратный порядок элементов в массиве
reverse()
- Удалить первый элемент массива
shift()
- Вытягивает копию части массива в новый массив
slice()
- Преобразует элементы в строки
toString()
- Добавляет новый элемент в начало
unshift()
- Возвращает примитивное значение указанного объекта
valueOf()
Операторы
- Основные операторы
+ Addition - Subtraction *. Multiplication /. Division (..) Grouping operator % Modulus (remainder) ++ Increment numbers -- Decrement numbers
- Операторы сравнения
== Equal to === Equal value and equal type != Not equal !== Not equal value or not equal type > Greater than < Less than >= Greater than or equal to <= Less than or equal to ? Ternary operator
- Логические операторы
&& Logical and || Logical or ! Logical not
- Побитовые операторы
& AND statement | OR statement ~. NOT ^ XOR << Left shift >> Right shift >>> Zero fill right shift
Функции
function name(parameter1, parameter2, parameter3) {
// what the function does
}
Вывод данных
- Вывод данных в окно оповещения в окне браузера
alert()
- Открывает диалоговое окно да/нет и возвращает true/false в зависимости от клика пользователя
confirm()
- Записывает информацию в консоль браузера, подходит для целей отладки.
console.log()
- Пишите прямо в HTML-документ
document.write()
- Создает диалог для пользовательского ввода
prompt()
Глобальные функции
- Декодирует универсальный идентификатор ресурса (URI), созданный с помощью encodeURI или аналогичного
decodeURI()
- Декодирует компонент URI
decodeURIComponent()
- Кодирует URI в UTF-8
encodeURI()
- То же, но для компонентов URI
encodeURIComponent()
- Оценивает код JavaScript, представленный в виде строки
eval()
- Определяет, является ли переданное значение конечным числом
isFinite()
- Определяет, является ли значение NaN или нет
isNaN()
- Возвращает число, преобразованное из его аргумента
Number()
- Разбирает аргумент и возвращает число с плавающей запятой
parseFloat()
- Разбирает свой аргумент и возвращает целое число
parseInt()
Циклы
for (before loop; condition for loop; execute after loop) {
// what to do during the loop
}
- Самый распространенный способ создания цикла в Javascript
for
- Устанавливает условия, при которых выполняется цикл
while
- Однако, подобно циклу while, он выполняется хотя бы один раз и в конце выполняет проверку, чтобы увидеть, выполняется ли условие для повторного выполнения.
do while
- Используется для остановки и выхода из цикла при определенных условиях.
break
- Пропускать части цикла, если выполняются определенные условия
continue
Инструкции If — Else
if (condition) {
// what to do if condition is met
} else {
// what to do if condition is not met
}
Строки
var person = "John Doe";
Экран-символы
\' — Single quote \" — Double quote \\ — Backslash \b — Backspace \f — Form feed \n — New line \r — Carriage return \t — Horizontal tabulator \v — Vertical tabulator
Строковые методы
- Возвращает символ в указанной позиции внутри строки
charAt()
- Дает вам юникод символа в этой позиции
charCodeAt()
- Объединяет (объединяет) две или более строк в одну
concat()
- Возвращает строку, созданную из указанной последовательности кодовых единиц UTF-16.
fromCharCode()
- Предоставляет позицию первого вхождения указанного текста в строке
indexOf()
- То же, что и indexOf(), но с последним вхождением, поиск в обратном направлении
lastIndexOf()
- Извлекает совпадения строки с шаблоном поиска
match()
- Найти и заменить определенный текст в строке
replace()
- Выполняет поиск соответствующего текста и возвращает его позицию
search()
- Извлекает раздел строки и возвращает его как новую строку
slice()
- Разбивает строковый объект на массив строк в указанной позиции
split()
- Аналогичен slice(), но извлекает подстроку в зависимости от указанного количества символов.
substr()
- Также похож на slice(), но не может принимать отрицательные индексы.
substring()
- Преобразование строк в нижний регистр
toLowerCase()
- Преобразование строк в верхний регистр
toUpperCase()
- Возвращает примитивное значение (не имеющее свойств или методов) строкового объекта.
valueOf()
Регулярные выражения
- Модификаторы узоров
e — Evaluate replacement i — Perform case-insensitive matching g — Perform global matching m — Perform multiple line matching s — Treat strings as single line x — Allow comments and whitespace in pattern U — Non Greedy pattern
- Кронштейны
[abc] Find any of the characters between the brackets [^abc] Find any character not in the brackets [0-9] Used to find any digit from 0 to 9 [A-z] Find any character from uppercase A to lowercase z (a|b|c) Find any of the alternatives separated with |
- Метасимволы
. — Find a single character, except newline or line terminator \w — Word character \W — Non-word character \d — A digit \D — A non-digit character \s — Whitespace character \S — Non-whitespace character \b — Find a match at the beginning/end of a word \B — A match not at the beginning/end of a word \0 — NUL character \n — A new line character \f — Form feed character \r — Carriage return character \t — Tab character \v — Vertical tab character \xxx — The character specified by an octal number xxx \xdd — Character specified by a hexadecimal number dd \uxxxx — The Unicode character specified by a hexadecimal number xxxx
- квантификаторы
n+ — Matches any string that contains at least one n
n* — Any string that contains zero or more occurrences of n
n? — A string that contains zero or one occurrences of n
n{X} — String that contains a sequence of X n’s
n{X,Y} — Strings that contains a sequence of X to Y n’s
n{X,} — Matches any string that contains a sequence of at least X n’s
n$ — Any string with n at the end of it
^n — String with n at the beginning of it
?=n — Any string that is followed by a specific string n
?!n — String that is not followed by a specific string n
Числа и математика
Свойства числа
- Максимальное числовое значение, которое может быть представлено в JavaScript
MAX_VALUE
- Наименьшее положительное числовое значение, которое можно представить в JavaScript
MIN_VALUE
- Значение «не число»
NaN
- Отрицательное значение бесконечности
NEGATIVE_INFINITY
- Положительное значение бесконечности
POSITIVE_INFINITY
Числовые методы
- Возвращает строку с округленным числом, записанным в экспоненциальной записи.
toExponential()
- Возвращает строку числа с указанным количеством десятичных знаков
toFixed()
- Строка числа, записанная с указанной длиной
toPrecision()
- Возвращает число в виде строки
toString()
- Возвращает число как число
valueOf()
Математические свойства
E Euler’s number LN2 The natural logarithm of 2 LN10 Natural logarithm of 10 LOG2E Base 2 logarithm of E LOG10E Base 10 logarithm of E PI The number PI SQRT1_2 Square root of 1/2 SQRT2 The square root of 2
Математические методы
- Возвращает абсолютное (положительное) значение x
abs(x)
- Арккосинус x, в радианах
acos(x)
- Арксинус x, в радианах
asin(x)
- Арктангенс x как числовое значение
atan(x)
- Арктангенс частного его аргументов
atan2(y,x)
- Значение x округлено до ближайшего целого числа
ceil(x)
- Косинус x (x в радианах)
cos(x)
- Значение Ex
exp(x)
- Значение x, округленное в меньшую сторону до ближайшего целого числа
floor(x)
- Натуральный логарифм (по основанию E) числа x
log(x)
- Возвращает число с наибольшим значением
max(x,y,z,...,n)
- То же самое для числа с наименьшим значением
min(x,y,z,...,n)
- X в степени y
pow(x,y)
- Возвращает случайное число от 0 до 1
random()
- Значение x, округленное до ближайшего целого числа
round(x)
- Синус x (x в радианах)
sin(x)
- Квадратный корень из х
sqrt(x)
- Тангенс угла
tan(x)
Работа с датами
Установка дат
- Создает новый объект даты с текущей датой и временем
Date()
- Создайте пользовательский объект даты. Цифры представляют год, месяц, день, час, минуты, секунды и миллисекунды. Вы можете опустить все, что хотите, кроме года и месяца.
Date(2017, 5, 21, 3, 23, 10, 0)
- Объявление даты в виде строки
Date("2017-06-23")
Извлечение значений даты и времени
- Получить день месяца в виде числа (1–31)
getDate()
- День недели в виде числа (0–6)
getDay()
- Год в виде четырехзначного числа (гггг)
getFullYear()
- Получить час (0–23)
getHours()
- Миллисекунда (0–999)
getMilliseconds()
- Получить минуты (0–59)
getMinutes()
- Месяц в виде числа (0–11)
getMonth()
- Получить второй (0–59)
getSeconds()
- Получить миллисекунды с 1 января 1970 года
getTime()
- День (число) месяца в указанную дату по всемирному времени (также доступно для дня, месяца, полного года, часов, минут и т. д.)
getUTCDate()
- Анализирует строковое представление даты и возвращает количество миллисекунд с 1 января 1970 г.
parse
Установить часть даты
- Установите день в виде числа (1–31)
setDate()
- Устанавливает год (необязательно месяц и день)
setFullYear()
- Установите час (0–23)
setHours()
- Установить миллисекунды (0–999)
setMilliseconds()
- Устанавливает минуты (0–59)
setMinutes()
- Установите месяц (0–11)
setMonth()
- Устанавливает секунды (0–59)
setSeconds()
- Установите время (в миллисекундах с 1 января 1970 г.)
setTime()
- Устанавливает день месяца для указанной даты в соответствии с универсальным временем (также доступно для дня, месяца, полного года, часов, минут и т. д.)
setUTCDate()
DOM-узел
Свойства узла
- Возвращает динамическую коллекцию всех атрибутов, зарегистрированных для элемента.
attributes
- Предоставляет абсолютный базовый URL-адрес HTML-элемента.
baseURI
- Дает коллекцию дочерних узлов элемента
childNodes
- Возвращает первый дочерний узел элемента
firstChild
- Последний дочерний узел элемента
lastChild
- Дает вам следующий узел на том же уровне дерева узлов
nextSibling
- Возвращает имя узла
nodeName
- Возвращает тип узла
nodeType
- Задает или возвращает значение узла
nodeValue
- Объект документа верхнего уровня для этого узла
ownerDocument
- Возвращает родительский узел элемента
parentNode
- Возвращает узел, непосредственно предшествующий текущему
previousSibling
- Задает или возвращает текстовое содержимое узла и его потомков
textContent
Методы узла
- Добавляет новый дочерний узел к элементу как последний дочерний узел
appendChild()
- Клонирует элемент HTML
cloneNode()
- Сравнивает позицию документа двух элементов
compareDocumentPosition()
- Возвращает объект, который реализует API указанной функции.
getFeature()
- Возвращает true, если элемент имеет какие-либо атрибуты, иначе false
hasAttributes()
- Возвращает true, если у элемента есть дочерние узлы, иначе false
hasChildNodes()
- Вставляет новый дочерний узел перед указанным существующим дочерним узлом
insertBefore()
- Возвращает true, если указанный namespaceURI является значением по умолчанию, иначе false
isDefaultNamespace()
- Проверяет, равны ли два элемента
isEqualNode()
- Проверяет, являются ли два элемента одним и тем же узлом
isSameNode()
- Возвращает true, если указанная функция поддерживается элементом
isSupported()
- Возвращает namespaceURI, связанный с данным узлом
lookupNamespaceURI()
- Возвращает DOMString, содержащую префикс для данного namespaceURI, если он присутствует.
lookupPrefix()
- Соединяет соседние текстовые узлы и удаляет пустые текстовые узлы в элементе
normalize()
- Удаляет дочерний узел из элемента
removeChild()
- Заменяет дочерний узел в элементе
replaceChild()
Методы элемента
- Возвращает указанное значение атрибута узла элемента
getAttribute()
- Возвращает строковое значение атрибута с указанным пространством имен и именем
getAttributeNS()
- Получает указанный узел атрибута
getAttributeNode()
- Возвращает узел атрибута для атрибута с заданным пространством имен и именем.
getAttributeNodeNS()
- Предоставляет коллекцию всех дочерних элементов с указанным именем тега.
getElementsByTagName()
- Возвращает живую HTMLCollection элементов с определенным именем тега, принадлежащим данному пространству имен.
getElementsByTagNameNS()
- Возвращает true, если элемент имеет какие-либо атрибуты, иначе false
hasAttribute()
- Предоставляет значение true/false, указывающее, имеет ли текущий элемент в заданном пространстве имен указанный атрибут.
hasAttributeNS()
- Удаляет указанный атрибут из элемента
removeAttribute()
- Удаляет указанный атрибут из элемента в пределах определенного пространства имен
removeAttributeNS()
- Забирает указанный узел атрибута и возвращает удаленный узел
removeAttributeNode()
- Устанавливает или изменяет указанный атрибут на указанное значение
setAttribute()
- Добавляет новый атрибут или изменяет значение атрибута с заданным пространством имен и именем.
setAttributeNS()
- Задает или изменяет указанный узел атрибута
setAttributeNode()
- Добавляет к элементу новый узел атрибута с пространством имен.
setAttributeNodeNS()
Работа с браузером
Свойства окна
- Проверяет, было ли окно закрыто или нет, и возвращает true или false
closed
- Задает или возвращает текст по умолчанию в строке состояния окна.
defaultStatus
- Возвращает объект документа для окна
document
- Возвращает все элементы ‹iframe› в текущем окне
frames
- Предоставляет объект History для окна
history
- Внутренняя высота области содержимого окна
innerHeight
- Внутренняя ширина области содержимого
innerWidth
- Узнать количество элементов ‹iframe› в окне
length
- Возвращает объект местоположения для окна
location
- Задает или возвращает имя окна
name
- Возвращает объект Navigator для окна
navigator
- Возвращает ссылку на окно, создавшее окно
opener
- Внешняя высота окна, включая панели инструментов/полосы прокрутки.
outerHeight
- Внешняя ширина окна, включая панели инструментов/полосы прокрутки.
outerWidth
- Количество пикселей, на которое текущий документ был прокручен по горизонтали
pageXOffset
- Количество пикселей, на которое документ был прокручен по вертикали
pageYOffset
- Родительское окно текущего окна
parent
- Возвращает объект Screen для окна
screen
- Горизонтальная координата окна (относительно экрана)
screenLeft
- Вертикальная координата окна
screenTop
- То же, что и screenLeft, но требуется для некоторых браузеров.
screenX
- То же, что и screenTop, но требуется для некоторых браузеров.
screenY
- Возвращает текущее окно
self
- Задает или возвращает текст в строке состояния окна
status
- Возвращает самое верхнее окно браузера
top
Методы окна
- Отображает окно предупреждения с сообщением и кнопкой OK
alert()
- Убирает фокус с текущего окна
blur()
- Очищает таймер, установленный с помощью setInterval()
clearInterval()
- Очищает таймер, установленный с помощью setTimeout()
clearTimeout()
- Закрывает текущее окно
close()
- Отображает диалоговое окно с сообщением и кнопками «ОК» и «Отмена».
confirm()
- Устанавливает фокус на текущее окно
focus()
- Перемещает окно относительно его текущей позиции
moveBy()
- Перемещает окно в указанную позицию
moveTo()
- Открывает новое окно браузера
open()
- Печатает содержимое текущего окна
print()
- Отображает диалоговое окно, предлагающее посетителю ввести данные
prompt()
- Изменяет размер окна на указанное количество пикселей
resizeBy()
- Изменяет размер окна до указанной ширины и высоты
resizeTo()
- Прокручивает документ на указанное количество пикселей
scrollBy()
- Прокручивает документ до определенных координат
scrollTo()
- Вызывает функцию или оценивает выражение через указанные интервалы
setInterval()
- Вызывает функцию или оценивает выражение после указанного интервала
setTimeout()
- Останавливает загрузку окна
stop()
Свойства экрана
- Возвращает высоту экрана (исключая панель задач Windows)
availHeight
- Возвращает ширину экрана (исключая панель задач Windows)
availWidth
- Возвращает разрядность цветовой палитры для отображения изображений
colorDepth
- Общая высота экрана
height
- Цветовое разрешение экрана в битах на пиксель
pixelDepth
- Общая ширина экрана
width
События
Мышь
- Событие происходит, когда пользователь нажимает на элемент
onclick
- Пользователь щелкает правой кнопкой мыши элемент, чтобы открыть контекстное меню.
oncontextmenu
- Пользователь дважды щелкает элемент
ondblclick
- Пользователь нажимает кнопку мыши над элементом
onmousedown
- Указатель перемещается на элемент
onmouseenter
- Указатель выходит из элемента
onmouseleave
- Указатель движется, пока он находится над элементом
onmousemove
- Когда указатель перемещается на элемент или один из его дочерних элементов
onmouseover
- Пользователь перемещает указатель мыши за пределы элемента или одного из его дочерних элементов.
onmouseout
- Пользователь отпускает кнопку мыши над элементом
onmouseup
Клавиатура
- Когда пользователь нажимает клавишу
onkeydown
- Момент, когда пользователь начинает нажимать клавишу
onkeypress
- Пользователь отпускает ключ
onkeyup
Фрейм
- Загрузка носителя прервана
onabort
- Событие происходит перед выгрузкой документа
onbeforeunload
- Ошибка при загрузке внешнего файла
onerror
- Были внесены изменения в якорную часть URL.
onhashchange
- Когда объект загружен
onload
- Пользователь уходит с веб-страницы
onpagehide
- Когда пользователь переходит на веб-страницу
onpageshow
- Вид документа изменен
onresize
- Полоса прокрутки элемента прокручивается
onscroll
- Событие происходит, когда страница выгружается
onunload
Форма
- Когда элемент теряет фокус
onblur
- Содержимое элемента формы изменяется (для ‹input›, ‹select›и ‹textarea›)
onchange
- Элемент получает фокус
onfocus
- Когда элемент вот-вот получит фокус
onfocusin
- Элемент вот-вот потеряет фокус
onfocusout
- Пользовательский ввод на элементе
oninput
- Элемент недействителен
oninvalid
- Форма сброшена
onreset
- Пользователь что-то пишет в поле поиска (для ‹input="search"›)
onsearch
- Пользователь выбирает текст (для ‹ввода› и ‹текстовой области›)
onselect
- Форма отправлена
onsubmit
Перетащите
- Элемент перетаскивается
ondrag
- Пользователь закончил перетаскивание элемента
ondragend
- Перетаскиваемый элемент попадает в цель перетаскивания
ondragenter
- Перетаскиваемый элемент покидает цель перетаскивания
ondragleave
- Перетаскиваемый элемент находится поверх цели перетаскивания
ondragover
- Пользователь начинает перетаскивать элемент
ondragstart
- Перетащенный элемент перетаскивается на цель перетаскивания
ondrop
Буфер обмена
- Пользователь копирует содержимое элемента
oncopy
- Пользователь вырезает содержимое элемента
oncut
- Пользователь вставляет содержимое в элемент
onpaste
Медиа
- Загрузка носителя прервана
onabort
- Браузер может начать воспроизведение мультимедиа (например, файл достаточно буферизован)
oncanplay
- Когда браузер может воспроизводить мультимедиа без остановки
oncanplaythrough
- Продолжительность смены СМИ
ondurationchange
- СМИ подошли к концу
onended
- Возникает при возникновении ошибки при загрузке внешнего файла
onerror
- Медиаданные загружаются
onloadeddata
- Метаданные (например, размеры и продолжительность) загружаются
onloadedmetadata
- Браузер начинает искать указанный носитель
onloadstart
- Медиа приостанавливается либо пользователем, либо автоматически
onpause
- Мультимедиа было запущено или больше не приостановлено
onplay
- Воспроизведение мультимедиа после приостановки или остановки для буферизации
onplaying
- Браузер находится в процессе загрузки мультимедиа
onprogress
- Скорость воспроизведения носителя меняется
onratechange
- Пользователь закончил перемещение/переход на новую позицию в медиа
onseeked
- Пользователь начинает двигаться/пропускать
onseeking
- Браузер пытается загрузить медиафайл, но он недоступен
onstalled
- Браузер намеренно не загружает медиа
onsuspend
- Игровая позиция изменилась (например, из-за быстрой перемотки вперед)
ontimeupdate
- Громкость мультимедиа изменилась (включая отключение звука)
onvolumechange
- Мультимедиа приостановлено, но ожидается возобновление (например, буферизация)
onwaiting
Анимация
- Анимация CSS завершена
animationend
- CSS-анимация повторяется
animationiteration
- CSS-анимация началась
animationstart
Другое
- Запускается после завершения перехода CSS
transitionend
- Сообщение получено через источник события
onmessage
- Браузер начинает работать в автономном режиме
onoffline
- Браузер начинает работать онлайн
onpopstate
- Элемент ‹menu› отображается как контекстное меню
onshow
- Область веб-хранилища обновлена
onstorage
- Пользователь открывает или закрывает элемент ‹details›
ontoggle
- Колесико мыши перемещается вверх или вниз по элементу
onwheel
- Касание экрана прерывается
ontouchcancel
- Палец пользователя удален с сенсорного экрана
ontouchend
- Палец скользит по экрану
ontouchmove
- Палец находится на сенсорном экране
ontouchstart
Ошибки
- Позволяет определить блок кода для проверки на наличие ошибок
try
- Настройте блок кода для выполнения в случае ошибки
catch
- Создавайте собственные сообщения об ошибках вместо стандартных ошибок JavaScript.
throw
- Позволяет выполнять код после попытки и перехвата, независимо от результата
finally
Значения названий ошибок
- Задает или возвращает имя ошибки
name
- Задает или возвращает сообщение об ошибке в строке из
message
- Произошла ошибка в функции eval()
EvalError
- Номер находится «вне диапазона»
RangeError
- Произошла недопустимая ссылка
ReferenceError
- Произошла синтаксическая ошибка
SyntaxError
- Произошла ошибка типа
TypeError
- Произошла ошибка encodeURI()
URIError
Я пытался скрыть большую часть вещей. Надеюсь, эта шпаргалка поможет вам с JavaScript.
Ваше здоровье!
Вот еще несколько статей. Надеюсь, вы также найдете их полезными.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
