Хочешь проверить свои знания по JS?
Подпишись на наш канал с тестами по JS в Telegram!
Решать задачи
Всем привет! Мы попытались собрать все шпаргалки по JavaScript (синтаксис и самые полезные методы) в одной статье. Надеемся, вам пригодится.
Основы JavaScript
Здесь представлен базовый синтаксис JavaScript для добавления, выполнения и написания основных парадигм программирования.
Скрипт в самой странице
Добавление внутреннего JavaScript в HTML.
<script type="text/javascript"> //Здесь идет JS-код </script>
Внешний JS-файл
Добавление внешнего JavaScript в HTML.
<script src="filename.js"></script>
Функции
Синтаксис функций в JavaScript.
function nameOfFunction () {
// тело функции
}
Элемент DOM
Изменение содержимого DOM-элемента.
document.getElementById("elementID").innerHTML = "Hello
World!";
Output
Этот код выведет значение в консоль.
console.log(a);
Условные конструкции
Для выполнения кода в зависимости от соблюдения заданных условий используются условные операторы.
if
Блок кода выполняется, когда указанное условие оценивается как истинное (true).
if (condition) {
// блок кода, который выполнится, если условие истинно
}
if-else
Если условие в блоке if ложно, выполняется код из блока else.
if (condition) {
// блок кода, который выполнится, если условие истинно
} else {
// блок кода, который выполнится, если условие ложно
}
else-if
Базовая лестница блоков if-else.
if (condition1) {
// блок кода, который выполнится, если условие condition1 истинно
} else if (condition2) {
// блок кода, который выполнится, если условие condition1 ложно, а condition2 истинно
} else {
// блок кода, который выполнится, если условия condition1 и condition2 ложны
}
Оператор switch
Использование switch в JavaScript.
switch(expression) {
case x:
// блок кода
break;
case y:
// блок кода
break;
default:
// блок кода
}
Циклы (итеративное выполнение кода)
Итерации позволяют выполнять любой блок кода многократно. То, когда и как выполняются циклы, может регулироваться при помощи условий.
Цикл for
Синтаксис цикла for в JavaScript.
for (statement 1; statement 2; statement 3) {
// блок кода, который должен выполняться
}
Цикл while
Код выполняется, пока заданное условие истинно.
while (condition) {
// блок кода, который должен выполняться
}
Цикл do while
Код выполняется хотя бы раз вне зависимости от того, ложно условие или истинно.
do {
// этот блок кода запускается
i++;
} while (condition);
Строки
Строка — это последовательность символов. Используется для хранения текстовых данных и работы с ними.
От редакции Techrocks. Рекомендуем статью «Работа со строками в современном JavaScript».
Метод charAt
Возвращает символ, имеющий указанный индекс.
str.charAt(3)
Метод concat
Объединяет две или более строк.
str1.concat(str2)
Метод indexOf
Возвращает индекс первого вхождения указанного символа в строке. Если символ не найден, возвращает -1.
str.indexOf('substr')
Метод match
Ищет в строке совпадение с заданным регулярным выражением.
str.match(/(chapter \d+(\.\d)*)/i;)
От редакции Techrocks. Рекомендуем статью «Как использовать регулярные выражения в JavaScript».
Метод replace
Ищет в строке совпадение с указанной строкой или символом. Возвращает новую строку с замененными указанными значениями.
str1.replace(str2)
Метод search
Ищет в строке указанное значение.
str.search('term')
Метод split
Разбивает строку, превращая ее в массив подстрок.
str.split('\n')
Метод substring
Извлекает из строки символы между указанными индексами и возвращает эту подстроку.
str.substring(0,5)
Массивы
Массив — это коллекция элементов данных одного типа. Если говорить по-простому, это переменная, содержащая несколько значений.
Переменная
Контейнер для хранения данных.
var fruit = ["element1", "element2", "element3"];
Метод concat
Объединяет два или более массивов.
concat()
Метод indexOf
Возвращает индекс указанного элемента массива.
indexOf()
Метод join
Преобразует элементы массива в строку.
join()
Метод pop
Удаляет последний элемент из массива.
pop()
Метод reverse
Этот метод выстраивает элементы массива в обратном (реверсивном) порядке.
reverse()
Метод sort
Сортирует элементы массива указанным способом.
sort()
Метод toString
Преобразует элементы массива в строку.
toString()
Метод valueOf
Возвращает релевантный числовой объект, содержащий значение переданного аргумента.
valueOf()
Числовые методы JavaScript
Для осуществления математических операций в JS есть несколько констант и методов.
Метод toExponential
Преобразует число в экспоненциальную форму.
toExponential()
Метод toPrecision
Форматирует число в строку указанной длины.
toPrecision()
Метод toString
Преобразует объект в строку.
toString()
Метод valueOf
Возвращает примитивное значение числа.
valueOf()
Математические методы JavaScript
Метод ceil
Округляет число в большую сторону до ближайшего целого числа и возвращает результат.
ceil(x)
Метод exp
Возвращает значение E^x.
exp(x)
Метод log
Возвращает логарифмическое значение x.
log(x)
Метод pow
Возвращает значение x в степени y.
pow(x,y)
Метод random
Возвращает случайное число между 0 и 1.
random()
Метод sqrt
Возвращает квадратный корень из числа x.
sqrt(x)
Даты
Объект Date имеет методы для получения и установки дня, месяца, года, часов, минут и секунд.
Метод getDate() возвращает дату из объекта Date, getDay() — число, getHours() — часы, getMinutes() — минуты, getSeconds() — секунды, getTime() — время.
getDate() getDay() getHours() getMinutes() getSeconds() getTime()
События мыши
Любое изменение в состоянии объекта считается событием. С помощью JS вы можете управлять событиями. Например, можно управлять тем, как будет работать любой отдельно взятый элемент HTML, когда пользователь делает что-либо.
click
Происходит при клике на элемент.
element.addEventListener('click', ()=>{
// Код, который должен выполниться при наступлении события
});
oncontextmenu
Происходит при клике правой кнопкой мыши.
element.addEventListener('contextmenu', ()=>{
// Код, который должен выполниться при наступлении события
});
dblclick
Происходит при двойном щелчке.
element.addEventListener('dblclick', ()=>{
// Код, который должен выполниться при наступлении события
});
mouseenter
Происходит, когда курсор мыши переходит на элемент.
element.addEventListener('mouseenter', ()=>{
// Код, который должен выполниться при наступлении события
});
mouseleave
Происходит, когда курсор мыши убирается с элемента.
element.addEventListener('mouseleave', ()=>{
// Код, который должен выполниться при наступлении события
});
mousemove
Происходит, когда курсор мыши движется внутри элемента.
element.addEventListener('mousemove', ()=>{
// Код, который должен выполниться при наступлении события
});
События клавиатуры
keydown
Происходит, когда пользователь нажимает клавишу на клавиатуре.
element.addEventListener('keydown', ()=>{
// Код, который должен выполниться при наступлении события
});
keypress
Происходит, когда пользователь нажимает символьную клавишу на клавиатуре.
element.addEventListener('keypress', ()=>{
// Код, который должен выполниться при наступлении события
});
keyup
Происходит, когда пользователь отпускает нажатую клавишу.
element.addEventListener('keyup', ()=>{
// Код, который должен выполниться при наступлении события
});
Ошибки
Когда интерпретатор или компилятор обнаруживают недостатки в коде, они выбрасывают ошибки. Эти ошибки могут быть разными: синтаксическими, логическими, ошибками выполнения. Для работы с ошибками в JS есть специальные функции.
try… catch
Конструкция try…catch пытается выполнить инструкции в блоке try, и, в случае ошибки, выполняет блок catch.
try {
Блок кода, который нужно попытаться выполнить
}
catch(err) {
Блок кода для обработки ошибок
}
Методы Window
Методы, доступные из объекта Window.
Метод alert
Используется для вызова на экран модального окна с сообщением.
alert()
Метод blur
Этот метод убирает фокус с текущего окна.
blur()
Метод setInterval
Выполняет код через равные промежутки времени (регулярно).
setInterval(() => {
// Код, который должен быть выполнен
}, 1000);
Метод setTimeout
Выполняет код после определенного промежутка времени (один раз).
setTimeout(() => {
// Код, который должен быть выполнен
}, 1000);
Метод close
Закрывает текущее окно.
window.close()
Метод confirm
window.confirm() велит браузеру отобразить диалог с опциональным сообщением и ждать, пока пользователь подтвердит или отменит.
window.confirm('Are you sure?')
Метод open
Открывает новое окно.
window.open("https://www.anmolraj.com");
Метод prompt
Предлагает пользователю ввести данные и принимает значение. Второй параметр — значение по умолчанию.
var name = prompt("What is your name?", "Anmol");
Метод scrollBy
window.scrollBy(100, 0); // Прокрутка на 100px вправо
scrollTo
Прокрутка документа до указанных координат.
window.scrollTo(500, 0); // Прокрутка до позиции 500 по горизонтали
Метод clearInterval
Убирает setInterval. var — значение, возвращаемое вызовом setInterval.
clearInterval(var)
Метод clearTimeout
Убирает setTimeout. var — значение, возвращаемое вызовом setTimeout.
clearTimeout(var)
Метод stop
Останавливает дальнейшую загрузку ресурса.
stop()
Элементы Query/Get
При загрузке страницы браузер создает DOM (объектную модель документа). При помощи HTML DOM можно получить доступ ко всем элементам HTML-документа и модифицировать их.
querySelector
Селектор для выборки первого совпадающего элемента.
document.querySelector('css-selectors')
querySelectorAll
Селектор для выборки всех совпадающих элементов.
document.querySelectorAll('css-selectors', ...)
getElementsByTagName
Выбирает элементы по имени тега.
document.getElementsByTagName('element-name')
getElementsByClassName
Выбирает элементы по имени класса.
document.getElementsByClassName('class-name')
Get Element by Id
Выбирает элемент по его id.
document.getElementById('id')
Создание новых элементов в DOM
createElement
Создает новый элемент.
document.createElement('div')
createTextNode
Создает новый текстовый узел.
document.createTextNode('some text here')
Перевод статьи «JavaScript Cheatsheet from beginners to advance..».
