Синтаксис и методы JavaScript: шпаргалка

0
961
views
javascript logo

Хочешь проверить свои знания по 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..».

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here