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

Всем привет! Мы попытались собрать все шпаргалки по 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..».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх