├── README.md └── REGEX.md /README.md: -------------------------------------------------------------------------------- 1 | ## JavaScript Cheat Sheet на русском языке 2 | Вольный перевод JavaScript шпаргкалки с этого ресурса 3 | https://websitesetup.org/javascript-cheat-sheet/ 4 | 5 | Возможно в будущем будет корректироваться и дополняться информацией, не представленной по ссылке выше. 6 | Также стоит отметить, что некоторые устаревшие функции убраны из шпаргалки. Подробности: [MDN](https://developer.mozilla.org/ru/docs/Web "MDN web docs") 7 | 8 | # Основы JavaScript 9 | Начнем с простых вещей - как подключить JavaScript к веб-сайту 10 | 11 | ## Добавление JavaScript на HTML страницу 12 | Чтобы подключить JavaScript к странице, следует обернуть JS-код в тег 17 | ``` 18 | 19 | ## Вызываем JavaScript-фаил извне 20 | JavaScript код можно разместить в своем собственном файле и вызвать его изнутри HTML. Так делают, когда следует разделить скрипты, выполняющие разные функции, чтобы избежать путаницы. Если ваш код находится в файле с именем myscript.js, его можно подключить таким образом: 21 | ``` 22 | 23 | ``` 24 | 25 | ## Добавляем комментарии к коду 26 | Комментарии помогают понять, что происходит в вашем коде. Помните, что они должны быть помечены правильно, чтобы браузер не пытался их выполнить. 27 | 28 | JavaScript предлагает вам две опции: 29 | * Однострочные комментарии - комментируют лишь одну строку с помощью ```//``` 30 | * Многострочные комментарии - если вы хотите написать более длинные комментарии, поместите их в ```/ *``` и ```* /```, чтобы избежать их выполнения браузером. 31 | 32 | # Переменные в JS 33 | Переменная - зарезервированное место в памяти компьютера, которое можно использовать для сохранения некоторых данных и в последующем, выполнять нужные операций. Они могут быть вам знакомы со школьной скамьи. Как пример x, y, z использующиеся в уравнениях, в которые можно было подставить число для вычисления нужных значений. 34 | 35 | ## var, const, let 36 | У вас есть три различных способа объявления переменной в JavaScript, каждая из которых имеет свои особенности: 37 | 38 | * var — Переменная часто использующася в старых проектах. Может быть переназначена, но только внутри функции. Переменные типа ```var``` могут производить всплытие. Всплытие позволяет запускать объявленные функции выше, чем они объявлены в контексте функции. 39 | * const — Не может быть переназначена, объявленна повторно и не подвержена всплытию. 40 | * let — В отличии от ```const```, переменная ```let``` может быть переназначена, но не может быть объявлена повторно и тоже не подвержена всплытию. 41 | 42 | ## Типы данных 43 | Переменные могут содержать различные типы значений и типов данных. Используйте знак равенства ```=```, чтобы присвоить их: 44 | 45 | * Числа — ```var age = 23``` 46 | * Переменные — ```var x``` 47 | * Текст (строки) — ```var a = "init"``` 48 | * Операции — ```var b = 1 + 2 + 3``` 49 | * Истинные или ложные значения — ```var c = true``` 50 | * Константы — ```const PI = 3.14``` 51 | * Объекты — ```var name = {firstName:"John", lastName:"Doe"}``` 52 | 53 | Обратите внимание, что переменные чувствительны к регистру. Это означает, что ```lastname``` и ``` lastName``` будут обрабатываться как две разные переменные. 54 | 55 | ## Объекты 56 | Объекты - определенный вид переменных, которые могут иметь свои собственные значения и методы. Последние являются действиями, которые вы можете совершать над объектами. 57 | ``` 58 | var person = { 59 | firstName:"John", 60 | lastName:"Doe", 61 | age:20, 62 | nationality:"German" 63 | }; 64 | ``` 65 | 66 | # Следующий уровень: Массивы 67 | Далее в нашей шпаргалке JavaScript находятся массивы. Массивы являются частью разных языков программирования. Они помогают группировать переменные и свойства. Вот как это делается в JS: 68 | ``` 69 | var fruit = ["Banana", "Apple", "Pear"]; 70 | ``` 71 | Теперь у вас есть массив с именем ```fruit```, который содержит три элемента, которые вы можете использовать в последующих операциях. 72 | 73 | ## Методы для работы с массивами 74 | После того, как вы создали массивы, вы можете применить следующие методы: 75 | 76 | * ```concat()``` — Объединяет несколько массивов в один 77 | * ```indexOf()``` — Ищет индекс элемента в массиве, если элемента нет - возращает -1 78 | * ```join()``` — Объединяет элементы массива в одну строку и возращает эту строку 79 | * ```lastIndexOf()``` — Ищет последний встречающийся индекс элемента в массиве 80 | * ```pop()``` — Удаляет последний элемент массива 81 | * ```push()``` — Добавляет новый элемент в конце 82 | * ```reverse()``` — Сортировка элементов в обратном порядке 83 | * ```shift()``` — Удаляет первый элемент массива 84 | * ```slice()``` — Возвращает новый массив, содержащий копию части исходного массива 85 | * ```sort()``` — Сортирует элементы по алфавиту 86 | * ```splice()``` — Изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые. 87 | * ```toString()``` — Преобразует элементы в строку 88 | * ```unshift()``` — Добавляет новый элемент в начало массива 89 | * ```valueOf()``` — Возвращает примитивное значение указанного объекта, чаще всего используется для преобразования в число 90 | 91 | # Операторы 92 | Если у вас есть переменные, вы можете использовать их для выполнения различных видов операций: 93 | 94 | ## Простые операторы 95 | * ```+``` — Сложение 96 | * ```-``` — Вычитание 97 | * ```*``` — Умножение 98 | * ```/``` — Деление 99 | * ```(...)``` — Скобки - оператор группировки, операции в них выполняются раньше остальных внутри выражения 100 | * ```%``` — Остаток от деления 101 | * ```++``` — Инкремент числа (+1 к значению) 102 | * ```--``` — Декремент числа (-1 от значения) 103 | 104 | ## Операторы сравнения 105 | * ```==``` — Возвращает true, если операнды равны. 106 | * ```===``` — Строгое равенство. Возвращает true, если операнды равны и имеют одинаковый тип. 107 | * ```!=``` — Возвращает true, если операнды не равны. 108 | * ```!==``` — Строгое неравенство. Возвращает true, если операнды не равны и/или имеют разный тип. 109 | * ```>``` — Больше 110 | * ```<``` — Меньше 111 | * ```>=``` — Больше или равно 112 | * ```<=``` — Меньше или равно 113 | * ```?``` — Тернарный оператор (условие ? возращает значение если истина : возращает значение если ложь) 114 | 115 | ## Логические операторы 116 | * ```&&``` — Логический оператор И 117 | * ```||``` — Логический оператор ИЛИ 118 | * ```!``` — Логическое НЕ 119 | 120 | ## Битовые операторы 121 | * ```&``` — Возвращает единицу в каждой битовой позиции, для которой соответствующие биты обеих операндов являются единицами. 122 | * ```|``` — Возвращает единицу в каждой битовой позиции, для которой один из соответствующих битов или оба бита операндов являются единицами. 123 | * ```~``` — Заменяет биты операнда на противоположные 124 | * ```^``` — Возвращает единицу в каждой битовой позиции, для которой только один из соответствующих битов операндов является единицей. 125 | * ```<<``` — Сдвигает в двоичном представлении на бит влево 126 | * ```>>``` — Сдвигает в двоичном представлении на бит вправо 127 | * ```>>>``` — Сдвигает в двоичном представлении на бит вправо, отбрасывая сдвигаемые биты 128 | 129 | # Функции 130 | Функции JavaScript - блоки кода, которые выполняют определенную задачу. Простейшая функция выглядит следующим образом: 131 | ``` 132 | function name(parameter1, parameter2, parameter3) { 133 | // то, что должна выполнить функция 134 | } 135 | ``` 136 | Как видите, она состоит из ключевого слова ```function``` и ее имени. Параметры функции находятся в скобках, а в фигурных скобках - то что функция выполняет. Вы можете создать свою собственную функцию, но чтобы сделать вашу жизнь чуть проще - есть ряд функций и методов встроенных в JS. 137 | 138 | ## Вывод данных 139 | Используйте следующие функции для вывода данных: 140 | 141 | * ```alert()``` — Вывод данных в окне браузера (по идее должно использоваться как окно предупреждения, но чаще используется начинающими разработчиками для разработки первых программ) 142 | * ```confirm()``` — Открывает диалоговое окно с выбором "да / нет" и возвращает true / false в зависимости от клика пользователя 143 | * ```console.log()``` — Записывает информацию в консоль браузера, довольно неплохо подходит для отладки кода 144 | * ```document.write()``` — Дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM. 145 | * ```prompt()``` — Создает диалоговое окно для пользовательского ввода 146 | 147 | ## Глобальные функции 148 | Глобальные функции - функции встроенные в каждый браузерподдерживающий JavaScript. 149 | 150 | * ```decodeURI()``` — Декодирует [Uniform Resource Identifier](https://ru.wikipedia.org/wiki/URI "Википедия url") в читабельный вид 151 | * ```decodeURIComponent()``` — Декодирует последовательности символов в URI компоненте 152 | * ```encodeURI()``` — Кодирует URI в UTF-8 153 | * ```encodeURIComponent()``` — Тоже самое только для URI компонентов 154 | * ```eval()``` — Выполняет код JavaScript, представленный в виде строки (например, eval('2 + 2') вернет 4) 155 | * ```isFinite()``` — Определяет, является ли переданное значение конечным числом 156 | * ```isNaN()``` — Определяет, является ли значение NaN или нет 157 | * ```Number()``` — Возвращает число, преобразованное из его аргумента 158 | * ```parseFloat()``` — Принимает строку в качестве аргумента и возвращает десятичное число 159 | * ```parseInt()``` — принимает строку в качестве аргумента и возвращает целое число 160 | 161 | # Циклы в JavaScript 162 | Циклы являются частью большинства языков программирования. Они позволяют выполнять блоки кода нужное количество раз с разными значениями: 163 | ``` 164 | for (значение до запуска; условие прерывания; изменение значения после совершения итерации) { 165 | // необходимые действия во время цикла 166 | } 167 | ``` 168 | У вас есть несколько параметров для создания циклов: 169 | 170 | * ```for``` — Самый распространенный способ создания цикла в JavaScript 171 | * ```while``` — Устанавливает условия, при которых выполняется цикл 172 | * ```do while``` — Похожий на ```while``` цикл, но он выполняется по крайней мере один раз и в конце выполняет проверку, чтобы проверить, выполнено ли условие для повторного выполнения 173 | * ```break``` — Используется для остановки и выхода из цикла при определенных условиях 174 | * ```continue``` — Пропускает части цикла, если соблюдены определенные условия 175 | 176 | # Оператор If - Else 177 | Используя ```if``` и ```else```, вы cможете установить условия, для выполнения вашего кода. Если применяются определенные условия, что-то выполняется, если нет - выполняется что-то другое. 178 | ``` 179 | if (условие) { 180 | // выполняется, если условие выполнено 181 | } else { 182 | // выполняется, если условие не выполнено 183 | } 184 | ``` 185 | Концепция, похожая на ```if else```, - это выражение ``` switch```. Однако, используя ``` switch```, вы выбираете один из нескольких блоков кода для выполнения. 186 | ``` 187 | switch (состояние) { 188 | case state1: 189 | // выполняется, если состояние = state1 190 | break; 191 | case state2: 192 | // выполняется, если состояние = state2 193 | break; 194 | default: 195 | // выполняется, по умолчанию 196 | } 197 | ``` 198 | 199 | # Строки 200 | Строками в JS являются любые текстовые данные. 201 | ``` 202 | var person = "John Doe"; 203 | ``` 204 | В этом случае, ```John Doe``` является строкой. 205 | 206 | ## Спецсимволы 207 | В JavaScript строки помечаются одинарными или двойными кавычками. Если вы хотите использовать кавычки в строке, вам нужно использовать специальные символы: 208 | 209 | * ```\'``` — Ординарная кавычка 210 | * ```\"``` — Двойная кавычка 211 | 212 | Помимо этого у вас также есть дополнительные спецсимволы: 213 | * ```\\``` - Обратная косая черта 214 | * ```\n``` - Новая строка 215 | * ```\r``` - возврат каретки 216 | * ```\t``` - Горизонтальный табулятор 217 | 218 | ## Методы работы со строками 219 | 220 | * ```charAt()``` — Возвращает символ в указанной позиции внутри строки 221 | * ```charCodeAt()``` — Дает вам юникод символа в этой позиции 222 | * ```concat()``` — Объединяет (объединяет) две или более строки в одну 223 | * ```fromCharCode()``` — Возвращает строку, созданную из указанной последовательности единиц кода UTF-16 224 | * ```indexOf()``` — Предоставляет индекс первого вхождения указанного текста в строке 225 | * ```lastIndexOf()``` — То же, что ```indexOf ()```, но с последним вхождением, поиск в обратном направлении 226 | * ```match()``` — Возвращает получившиеся совпадения при сопоставлении строки с регулярным выражением. 227 | * ```replace()``` — Найти и заменить определенный текст в строке 228 | * ```search()``` — Выполняет поиск сопоставления между регулярным выражением и строкой 229 | * ```slice()``` — Извлекает часть строки и возвращает ее как новую строку 230 | * ```split()``` — Разбивает строку на массив строк путём разделения строки указанной подстрокой 231 | * ```substr()``` — Возвращает указанное количество символов из строки, начиная с указанной позиции 232 | * ```substring()``` — Возвращает подстроку строки между двумя индексами, или от одного индекса и до конца строки 233 | * ```toLowerCase()``` — Конвертирует значение строки в нижний регистр 234 | * ```toUpperCase()``` — Конвертирует значение строки в верхний регистр 235 | * ```valueOf()``` — Возвращает примитивное значение объекта String 236 | 237 | # Регулярные выражения 238 | Важная тема, но как будто бы не так сильно, относящаяся к JS. 239 | По этому я создал отдельный фаил где будет хранится перевод с регулярными выражениями: 240 | https://github.com/rocketrussia/js-cheat-sheet/blob/master/REGEX.md 241 | 242 | # Числа и Вычисления 243 | В JavaScript вы можете работать с числами, константами и выполнять математические функции. 244 | 245 | ## Свойства чисел 246 | * ```MAX_VALUE``` — Максимальное числовое значение 247 | * ```MIN_VALUE``` — Наименьшее положительное числовое значение, представимое в JavaScript 248 | * ```NaN``` — Значение "Не число". Является числом 🤷‍♂ 249 | * ```NEGATIVE_INFINITY``` — Отрицательное значение бесконечности 250 | * ```POSITIVE_INFINITY``` — Положительное значение бесконечности 251 | 252 | ## Числовые методы 253 | * ```toExponential()``` — Возвращает строку с округленным числом, записанным в виде экспоненциальной записи 254 | * ```toFixed()``` — Возвращает строку числа с указанным количеством десятичных знаков 255 | * ```toPrecision()``` — Строка числа, написанного с указанной длиной 256 | * ```toString()``` — Возвращает число в виде строки 257 | * ```valueOf()``` — Возвращает число как число 258 | 259 | ## Математические свойства 260 | * ```E``` — Основание натурального логарифма, математическая константа, иррациональное и трансцендентное число 261 | * ```LN2``` — Натуральный логарифм в степени 2 262 | * ```LN10``` — Натуральный логарифм в степени 10 263 | * ```LOG2E``` — Двоичный логарифм из e 264 | * ```LOG10E``` — Десятичный логарифм из e 265 | * ```PI``` — Число "Пи" 266 | * ```SQRT1_2``` — Квадратный корень из 1/2 267 | * ```SQRT2``` — Квадратный корень из 2 268 | 269 | ## Математические методы 270 | * ```abs(x)``` — Абсолютное значение числа от x 271 | * ```acos(x)``` — Арккосинус числа (в радианах) от x 272 | * ```asin(x)``` — Арксинус числа (в радианах) от x 273 | * ```atan(x)``` — Арктангенс числа (в радианах) от x 274 | * ```atan2(y,x)``` — Аарктангенс от частного аргументов y и x 275 | * ```ceil(x)``` — Округляет аргумент x до ближайшего большего целого 276 | * ```cos(x)``` — Косинус числа x 277 | * ```exp(x)``` — Кначение выражения e^x, где x — аргумент метода, а e — число Эйлера, основание натурального логарифма 278 | * ```floor(x)``` — Целое число, которое меньше или равно числу x. 279 | * ```log(x)``` — Натуральный логарифм от x 280 | * ```max(x,y,z,...,n)``` — Возращает максимальное число 281 | * ```min(x,y,z,...,n)``` — Возращает минимальное число 282 | * ```pow(x,y)``` — Возводит x в степень y 283 | * ```random()``` — Возращает рандомное число от 0 до 1 284 | * ```round(x)``` — Возвращает число, округлённое к ближайшему целому 285 | * ```sin(x)``` — Синус числа (в радианах) от x 286 | * ```sqrt(x)``` — Квадратный корень от x 287 | * ```tan(x)``` — Тангенс числа x 288 | 289 | # Работа с датами в JS 290 | Вы также можете работать с датами и временем и изменять их с помощью JavaScript. Это следующая глава в чит-листе JavaScript. 291 | 292 | ## Установка даты 293 | * ```Date()``` — Создает новый объект даты с текущей датой и временем 294 | * ```Date(2017, 5, 21, 3, 23, 10, 0)``` — Создает пользовательский объект даты. Числа представляют год, месяц, день, час, минуты, секунды, миллисекунды. Вы можете опустить все, что хотите, кроме года и месяца 295 | * ```Date("2017-06-23")``` — Объявление даты в виде строки 296 | 297 | ## Вытаскиваем дату и время 298 | * ```getDate()``` — День месяца (1-31) 299 | * ```getDay()``` — День недели числом (0-6) 300 | * ```getFullYear()``` — Четырхзначный год (yyyy) 301 | * ```getHours()``` — Получаем час (0-23) 302 | * ```getMilliseconds()``` — Миллисекунда (0-999) 303 | * ```getMinutes()``` — Минуты(0-59) 304 | * ```getMonth()``` — Месяц (0-11) 305 | * ```getSeconds()``` — Секунда (0-59) 306 | * ```getTime()``` — Время в миллисекунданх с 1го января 1970 года 307 | * ```getUTCDate()``` — День месяца указанной даты по UTC 308 | * ```parse()``` — разбирает строковое представление даты и возвращает количество миллисекунд, прошедших с 1го января 1970 года 309 | 310 | ## Методы установки даты и времени 311 | * ```setDate()``` — Устанавливает день (1-31) 312 | * ```setFullYear()``` — Год (опционально месяц и день) 313 | * ```setHours()``` — Час (0-23) 314 | * ```setMilliseconds()``` — Миллисекунда (0-999) 315 | * ```setMinutes()``` — Минута (0-59) 316 | * ```setMonth()``` — Месяц (0-11) 317 | * ```setSeconds()``` — Секунда (0-59) 318 | * ```setTime()``` — Время в миллисекунданх с 1го января 1970 года 319 | * ```setUTCDate()``` — День месяца указанной даты по UTC 320 | 321 | # Работаем с DOM 322 | DOM(Document Object Model) - объектная модель документа, представляет из себя структуру веб-страницы. JavaScript поставляется с множеством различных способов создания и управления HTML-элементами (называемыми узлами) - DOM API. 323 | 324 | ## Свойства Node 325 | Node это интерфейс, от которого наследуют несколько типов DOM, он так же позволяет различным типам быть обработанными(или протестированными). 326 | 327 | * ```attributes``` — Возвращает группу атрибутов всех узлов, зарегистрированных в указанном узле. 328 | * ```baseURI``` — Возвращает абсолютный базовый URL узла (Свойство Node.baseURI только для чтения) 329 | * ```childNode``` — Предоставляет коллекцию дочерних узлов элемента 330 | * ```firstChild``` — Возвращает первый дочерний узел элемента 331 | * ```lastChild``` — Последний дочерний узел элемента 332 | * ```nextSibling``` — Дает вам следующий узел на том же уровне дерева узлов 333 | * ```nodeName``` — Возвращает имя узла 334 | * ```nodeType``` — Возвращает тип узла 335 | * ```nodeValue``` — Устанавливает или возвращает значение узла 336 | * ```ownerDocument``` — Объект документа верхнего уровня для этого узла 337 | * ```parentNode``` — Возвращает родительский узел элемента 338 | * ```previousSibling``` — Возвращает узел, непосредственно предшествующий текущему 339 | * ```textContent``` — Устанавливает или возвращает текстовое содержимое узла и его потомков 340 | 341 | ## Node методы 342 | * ```appendChild()``` — Добавляет новый дочерний узел в элемент как последний дочерний узел 343 | * ```cloneNode()``` — Клонирует элемент HTML 344 | * ```compareDocumentPosition()``` — Сравнивает позицию текущего узла и другого узла в любом другом документе 345 | * ```getFeature()``` — Возвращает объект, который реализует API указанной функции 346 | * ```hasAttributes()``` — Возвращает true, если элемент имеет какие-либо атрибуты, иначе false 347 | * ```hasChildNodes()``` — Возвращает true, если элемент имеет дочерние узлы, в противном случае false 348 | * ```insertBefore()``` — Вставляет новый дочерний узел перед указанным существующим дочерним узлом 349 | * ```isDefaultNamespace()``` — Возвращает true, если заданный namespaceURI является значением по умолчанию, иначе false 350 | * ```isEqualNode()``` — Проверяет, равны ли два элемента 351 | * ```isSameNode()``` — Проверяет, являются ли два элемента одним узлом 352 | * ```isSupported()``` — Возвращает true, если указанная функция поддерживается для элемента 353 | * ```lookupNamespaceURI()``` — Возвращает URI пространства имен, связанный с данным узлом 354 | * ```lookupPrefix()``` — Возвращает DOMString, содержащую префикс для заданного URI пространства имен, если присутствует 355 | * ```normalize()``` — Объединяет смежные текстовые узлы и удаляет пустые текстовые узлы в элементе 356 | * ```removeChild()``` — Удаляет дочерний узел из элемента 357 | * ```replaceChild()``` — Заменяет дочерний узел в элементе 358 | 359 | ## Element Methods 360 | * ```getAttribute()``` - Возвращает указанное значение атрибута узла элемента 361 | * ```getAttributeNS()``` - Возвращает строковое значение атрибута с указанным пространством имен и именем 362 | * ```getAttributeNode()``` - Получает указанный узел атрибута 363 | * ```getAttributeNodeNS()``` - Возвращает узел атрибута для атрибута с заданным пространством имен и именем 364 | * ```getElementsByTagName()``` - Предоставляет коллекцию всех дочерних элементов с указанным именем тега 365 | * ```getElementsByTagNameNS()``` - Возвращает живую коллекцию HTMLCol элементов с определенным именем тега, принадлежащим данному пространству имен 366 | * ```hasAttribute()``` - Возвращает true, если элемент имеет какие-либо атрибуты, в противном случае false 367 | * ```hasAttributeNS()``` - Предоставляет значение true / false, указывающее, имеет ли текущий элемент в данном пространстве имен заданный атрибут 368 | * ```removeAttribute()``` - Удаляет указанный атрибут из элемента 369 | * ```removeAttributeNS()``` - Удаляет указанный атрибут из элемента в определенном пространстве имен 370 | * ```removeAttributeNode()``` - Забирает указанный узел атрибута и возвращает удаленный узел 371 | * ```setAttribute()``` - Устанавливает или изменяет указанный атрибут на указанное значение 372 | * ```setAttributeNS()``` - Добавляет новый атрибут или изменяет значение атрибута с заданным пространством имен и именем 373 | * ```setAttributeNode()``` - Устанавливает или изменяет указанный атрибут узла 374 | * ```setAttributeNodeNS()``` - Добавляет новый узел атрибута пространства имен к элементу 375 | 376 | # Работа с браузером пользователя 377 | Помимо элементов HTML, JavaScript также может учитывать браузер пользователя и включать его свойства в код. 378 | 379 | ## Window свойства 380 | * ```closed``` — Проверяет, было ли окно закрыто или нет, и возвращает true или false 381 | * ```defaultStatus``` — Устанавливает или возвращает текст по умолчанию в строке состояния окна 382 | * ```document``` — Возвращает объект документа для окна 383 | * ```frames``` — Возвращает все элементы iframe в текущем окне 384 | * ```history``` — Предоставляет объект History для окна 385 | * ```innerHeight``` — Внутренняя высота контента данного окна 386 | * ```innerWidth``` — Внутренняя ширина контента данного окна 387 | * ```length``` — Количество элементов iframe в окне 388 | * ```location``` — Возвращает местоположение объекта для данного окна 389 | * ```name``` — Устанавливает или возвращает имя окна 390 | * ```navigator``` — Возвращает объект Navigator для окна 391 | * ```opener``` — Возвращает ссылку на новое окно, которая была создано в первоначальном окне(при использовании метода open()) 392 | * ```outerHeight``` — Внешняя высота окна, включая панели инструментов / полосы прокрутки 393 | * ```outerWidth``` — Внешняя ширина окна, включая панели инструментов / полосы прокрутки 394 | * ```pageXOffset``` — Количество пикселей, по которому текущий документ прокручивается по горизонтали 395 | * ```pageYOffset``` — Количество пикселей, по которому текущий документ прокручивается по вертикали 396 | * ```parent``` — Родительское окно текущего окна 397 | * ```screen``` — Возвращает объект Screen для окна 398 | * ```screenX``` — Горизонтальная координата окна 399 | * ```screenY``` — Вертикальная координата окна 400 | * ```self``` — Возвращает текущее окно 401 | * ```status``` — Устанавливает или возвращает текст в строке состояния окна 402 | * ```top``` — Возвращает ссылку на корневое окно в иерархии окон 403 | 404 | ## Window методы 405 | * ```alert()``` — показывает диалоговое окно с опциональным сообщением и кнопкой OK. 406 | * ```blur()``` — Убирает фокус с окна 407 | * ```clearInterval()``` — Сбрасывает таймер, установленный с помощью setInterval () 408 | * ```clearTimeout()``` — Сбрасывает таймер, установленный с помощью setTimeout() 409 | * ```close()``` — Закрывает текущее окно 410 | * ```confirm()``` — Отображает диалоговое окно с сообщением и кнопкой ОК и Отмена 411 | * ```focus()``` — Устанавливает фокус на текущее окно 412 | * ```moveBy()``` — Перемещает окно относительно его текущей позиции 413 | * ```moveTo()``` — Перемещает окно в указанную позицию 414 | * ```open()``` — Открывает новое окно браузера 415 | * ```print()``` — Печатает содержимое текущего окна 416 | * ```prompt()``` — Отображает диалоговое окно, которое предлагает посетителю для ввода 417 | * ```resizeBy()``` — Изменяет размер окна на указанное количество пикселей 418 | * ```resizeTo()``` — Изменение размера окна до указанной ширины и высоты 419 | * ```scrollBy()``` — Прокручивает документ на указанное количество пикселей 420 | * ```scrollTo()``` — Прокручивает документ до указанных координат 421 | * ```setInterval()``` — Вызывает функцию или оценивает выражение через заданные интервалы 422 | * ```setTimeout()``` — Вызывает функцию или вычисляет выражение после указанного интервала 423 | * ```stop()``` — Останавливает окно загрузки 424 | 425 | ## Свойства экрана 426 | * ```availHeight``` — Высота, которую может иметь окно браузера, если она максимизирована, включая полосы браузера 427 | * ```availWidth``` — Ширина, которую может иметь окно браузера, если она максимизирована, включая полосы браузера 428 | * ```colorDepth``` — Возвращает битовую глубину цветовой палитры для отображения изображений 429 | * ```height``` — Общая высота экрана 430 | * ```pixelDepth``` — Цветовое разрешение экрана в битах на пиксель 431 | * ```width``` — Общая ширина экрана 432 | 433 | # События JavaScript 434 | События могут происходить с элементами HTML и выполняются пользователем. Язык программирования может прослушивать эти события и запускать действия в коде. Чит-лист JavaScript не будет полным без них. 435 | 436 | ## Мышь 437 | * ```onclick``` — Событие происходит, когда пользователь нажимает на элемент 438 | * ```oncontextmenu``` — Пользователь щелкает правой кнопкой мыши элемент, чтобы открыть контекстное меню 439 | * ```ondblclick``` — Пользователь дважды щелкает по элементу 440 | * ```onmousedown``` — Пользователь нажимает кнопку мыши(но еще не отпускает) 441 | * ```onmouseenter``` — Курсор перемещается в зону отображения элемента 442 | * ```onmouseleave``` — Курсор выходит из зоны отображения элемента 443 | * ```onmousemove``` — Курсор движется, когда он находится в зоне отображения элемента 444 | * ```onmouseover``` — Курсор перестал двигатся, вовремя нахождения в зоне отображения элемента 445 | * ```onmouseout``` — Пользователь перемещает указатель мыши на один из дочерних элементов элемента 446 | * ```onmouseup``` — Пользователь отпускает кнопку мыши над элементом 447 | 448 | ## Клавиатура 449 | * ```onkeydown``` — Пользователь нажимает клавишу вниз 450 | * ```onkeypress``` — Момент, когда пользователь начинает нажимать клавишу 451 | * ```onkeyup``` — Пользователь отпускает клавишу 452 | 453 | ## Фрейм 454 | * ```onabort``` — Загрузка фаила прервана 455 | * ```onbeforeunload``` — Событие происходит перед выгрузкой документа 456 | * ```onerror``` — При загрузке внешнего файла возникает ошибка 457 | * ```onhashchange``` — Произошли изменения в части привязки URL 458 | * ```onload``` — Как только объект загружен 459 | * ```onpagehide``` — Пользователь покидает веб-страницу 460 | * ```onpageshow``` — Когда пользователь переходит на веб-страницу 461 | * ```onresize``` — Отслеживает изменения размеров произвольного элемента на странице 462 | * ```onscroll``` — Полоса прокрутки элемента прокручивается 463 | * ```onunload``` — Когда страница не загрузилась по каким-либо причинам, либо при закрытии окна (вкладки) браузера. 464 | 465 | ## Форма 466 | * ```onblur``` — Когда элемент теряет фокус 467 | * ```onchange``` — Изменяется содержимое элемента формы (для input, select и textarea) 468 | * ```onfocus``` — Элемент в фокусе 469 | * ```onfocusin``` — Когда элемент собирается получить фокус 470 | * ```onfocusout``` — Элемент собирается потерять фокус 471 | * ```oninput``` — Пользовательский ввод 472 | * ```oninvalid``` — Элемент невалиден 473 | * ```onreset``` — Сброс формы 474 | * ```onsearch``` — Пользователь что-то пишет в поле поиска (для input="search") 475 | * ```onselect``` — Пользователь выбирает некоторый текст (для input и textarea) 476 | * ```onsubmit``` — Форма отправлена 477 | 478 | ## Перетаскивание 479 | * ```ondrag``` — Элемент перетаскивается 480 | * ```ondragend``` — Пользователь закончил перетаскивание элемента 481 | * ```ondragenter``` — Перетаскиваемый элемент входит в целевой объект 482 | * ```ondragleave``` — Перетаскиваемый элемент покидает целевой объект 483 | * ```ondragover``` — Перетаскиваемый элемент находится поверх цели сброса 484 | * ```ondragstart``` — Пользователь начал перетаскивать элемент 485 | * ```ondrop``` — Перетаскиваемый элемент сброшен в целевой объект 486 | 487 | ## Буфер обмена 488 | * ```oncopy``` — Пользователь копирует содержимое элемента 489 | * ```oncut``` — Пользователь вырезает содержимое элемента 490 | * ```onpaste``` — Пользователь вставляет содержимое в элемент 491 | 492 | ## Медиа 493 | * ```onabort``` — Загрузка медиа-фаила прервана 494 | * ```oncanplay``` — Браузер может начать воспроизведение медиа-фаила (например, файл достаточно буферизован) 495 | * ```oncanplaythrough``` — Браузер может воспроизводить медиа-файлы без остановки 496 | * ```ondurationchange``` — Продолжительность воспроизведения медиа-фаила изменена 497 | * ```onended``` — Достигнут конец медиа-фаила при воспроизведении 498 | * ```onerror``` — Когда при загрузке внешнего файла возникает ошибка 499 | * ```onloadeddata``` — Медиа данные загружены 500 | * ```onloadedmetadata``` — Метаданные (например, размеры и продолжительность) загружаются 501 | * ```onloadstart``` — Браузер начинает поиск указанного медиа-фаила 502 | * ```onpause``` — Воспроизведение медиа-фаила приостанавливается либо пользователем, либо автоматически 503 | * ```onplay``` — Медиа-фаил запущен или больше не приостановлен 504 | * ```onplaying``` — Медиа-фаил воспроизводится после того, как была приостановлена или остановлена для буферизации 505 | * ```onprogress``` — Браузер в процессе загрузки медиа-фаила 506 | * ```onratechange``` — Скорость воспроизведения медиа изменена 507 | * ```onseeked``` — Когда операция поиска завершена, текущая позиция воспроизведения изменилась 508 | * ```onseeking``` — Пользователь начинает движение / скипает 509 | * ```onstalled``` — Браузер пытается загрузить медиа-фаил, но он недоступен 510 | * ```onsuspend``` — Браузер намеренно не загружает медиа-фаил 511 | * ```ontimeupdate``` — Проигроваемая позиция изменилась (например, из-за ускоренной перемотки вперед) 512 | * ```onvolumechange``` — Громкость медиа-фаила изменилась (включая отключение звука) 513 | * ```onwaiting``` — Воспроизведение медиа-фаила приостановлено, но ожидается возобновление (например, буферизация) 514 | 515 | ## Анимации 516 | * ```animationstart``` — CSS анимация началась 517 | * ```animationiteration``` — CSS анимация повторяется 518 | * ```animationend``` — CSS анимация завершена 519 | 520 | ## Прочее 521 | * ```transitionend``` — Срабатывает после завершения CSS-перехода 522 | * ```onmessage``` — Сообщение получено через источник события 523 | * ```onoffline``` — Браузер начинает работать в автономном режиме 524 | * ```ononline``` — Браузер начинает работать в онлайн режиме 525 | * ```onpopstate``` — При изменении истории окна 526 | * ```onshow``` — Элемент меню отображается в виде контекстного меню 527 | * ```onstorage``` — Область веб-хранилища обновлена 528 | * ```ontoggle``` — Пользователь открывает или закрывает элемент данных 529 | * ```onwheel``` — Колесо мыши катится вверх или вниз по элементу 530 | * ```ontouchcancel``` — Сенсорный экран прерывается 531 | * ```ontouchend``` — Палец пользователя убран с сенсорного экрана 532 | * ```ontouchmove``` — Палец передвигается по экрану 533 | * ```ontouchstart``` — Палец коснулся сенсорного экрана 534 | 535 | # Ошибки 536 | При работе с JavaScript могут возникать разные ошибки. Есть несколько способов справиться с ними: 537 | 538 | * ```try``` — Позволяет определить блок кода для проверки на ошибки 539 | * ```catch``` — Настройте этот блок кода для выполнения в случае ошибки 540 | * ```throw``` — Создает пользовательское сообщеное об ошибках вместо стандартных ошибок JavaScript 541 | * ```finally``` — Позволяет выполнить код после try/catch, независимо от результата 542 | 543 | ## Значение ошибок 544 | JavaScript также имеет встроенный инструмент(объект) для выведения ошибки. У него есть два свойства: 545 | 546 | * ```name``` — Устанавливает или возвращает имя ошибки 547 | * ```message``` — Устанавливает или возвращает сообщение об ошибке строкой 548 | Свойство error может возвращать шесть разных значений в качестве своего имени: 549 | 550 | * ```EvalError``` — в функции ```eval()``` произошла ошибка 551 | * ```RangeError``` — Значение выходит за диапазон допустимых значений(или не входит во множество) 552 | * ```ReferenceError``` — Обращении к несуществующей переменной 553 | * ```SyntaxError``` — Синтаксически неправильный код 554 | * ```TypeError``` — Значение имеет не ожидаемый тип 555 | * ```URIError``` — Неправильное использование глобальных функций обработки URI 556 | 557 | # Вкратце об шпаргалке JavaScript 558 | В последние годы JavaScript приобрел большую популярность как язык программирования. Все большее число людей используют его для создания как относительно простых веб-страниц до монструозных приложений. Все это благодаря объемному послужному списку и большому числу преимуществ. 559 | 560 | В приведенной выше шпаргалке, мы собрали множество самых основных и важных операторов, функций, принципов и методов. Она предоставляет хороший обзор языка и справку для опытных и начинающих разработчиков. Мы надеемся, что вы смогли использовать в полной мере данный материал. 561 | -------------------------------------------------------------------------------- /REGEX.md: -------------------------------------------------------------------------------- 1 | # Синтаксис регулярных выражений 2 | Регулярные выражения - это шаблоны поиска, используемые для сопоставления комбинаций символов в строках. Шаблон поиска можно использовать для операций поиска текста и замены текста. 3 | 4 | ## Модификаторы 5 | * ```e``` — устаревший модификатор regex, который позволяет вам использовать PHP-код в вашем регулярном выражении 6 | * ```i``` — Выполнить сопоставление без учета регистра 7 | * ```g``` — Выполнить глобальное сопоставление 8 | * ```m``` — Выполнить сопоставление нескольких строк 9 | * ```s``` — Обрабатывать строки как одну строку 10 | * ```x``` — Разрешить комментарии и пробелы в шаблоне 11 | * ```U``` — Обрабатывать шаблон как последовательность Unicode 12 | 13 | ## Скобки 14 | * ```[abc]``` — Найти любой из символов в скобках 15 | * ```[^abc]``` — Найти любой символ, который не находится в скобках 16 | * ```[0-9]``` — Используется для поиска любой цифры от 0 до 9 17 | * ```[A-z]``` — Найти любой символ от заглавной буквы A до строчной z 18 | * ```(a|b|c)``` — Найти любую из альтернатив, разделенных | 19 | 20 | ## Метасимволы 21 | * ```.``` - Найти один символ, кроме символа новой строки или окончания строки 22 | * ```\w``` - Слово персонажа 23 | * ```\W``` - Несловарный символ 24 | * ```\d``` - Цифра 25 | * ```\D``` - Нецифровый символ 26 | * ```\s``` - Символ пробела 27 | * ```\S``` - Не пробельный символ 28 | * ```\b``` - Найти совпадение в начале / конце слова 29 | * ```\B``` - Совпадение не в начале / конце слова 30 | * ```\0``` - NUL символ 31 | * ```\n``` - Символ новой строки 32 | * ```\f``` - Символ фида формы 33 | * ```\r``` - Символ возврата каретки 34 | * ```\t``` - Символ табуляции 35 | * ```\v``` - Символ вертикальной табуляции 36 | * ```\xxx``` - Символ, указанный восьмеричным числом xxx 37 | * ```\xdd``` - Символ, указанный шестнадцатеричным числом dd 38 | * ```\uxxxx``` - Символ Unicode, указанный шестнадцатеричным числом xxxx 39 | 40 | ## Квантификаторы 41 | * ```n+``` — Соответствует любой строке, которая содержит хотя бы один n 42 | * ```n*``` — Любая строка, которая содержит ноль или более вхождений n 43 | * ```n?``` — Строка, которая содержит ноль или одно вхождение n 44 | * ```n{X}``` — Строка, содержащая последовательность из X n 45 | * ```n{X,Y}``` — Строки, содержащие последовательность от X до Y n 46 | * ```n{X,}``` — Соответствует любой строке, которая содержит последовательность не менее X n 47 | * ```n$``` — Любая строка с n в конце 48 | * ```^n``` — Строка с n в начале 49 | * ```?=n``` — Любая строка, за которой следует определенная строка n 50 | * ```?!n``` — Строка, за которой не следует определенная строка ni 51 | --------------------------------------------------------------------------------