Команды javascript языка программирования

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

Всем привет! Мы попытались собрать все шпаргалки по JavaScript (синтаксис и самые полезные методы) в одной статье. Надеемся, вам пригодится.

Основы JavaScript

Здесь представлен базовый синтаксис JavaScript для добавления, выполнения и написания основных парадигм программирования.

Скрипт в самой странице

Добавление внутреннего JavaScript в HTML.

Внешний JS-файл

Добавление внешнего JavaScript в HTML.

Функции

Синтаксис функций в JavaScript.

Элемент DOM

Изменение содержимого DOM-элемента.

document.getElementById("elementID").innerHTML = "Hello World!";

Output

Этот код выведет значение в консоль.

Условные конструкции

Для выполнения кода в зависимости от соблюдения заданных условий используются условные операторы.

if

Блок кода выполняется, когда указанное условие оценивается как истинное (true).

if-else

Если условие в блоке if ложно, выполняется код из блока else.

else-if

Базовая лестница блоков if-else.

if (condition1) < // блок кода, который выполнится, если условие condition1 истинно >else if (condition2) < // блок кода, который выполнится, если условие condition1 ложно, а condition2 истинно >else < // блок кода, который выполнится, если условия condition1 и condition2 ложны >

Оператор switch

Использование switch в JavaScript.

Циклы (итеративное выполнение кода)

Итерации позволяют выполнять любой блок кода многократно. То, когда и как выполняются циклы, может регулироваться при помощи условий.

Цикл for

Синтаксис цикла for в JavaScript.

for (statement 1; statement 2; statement 3) < // блок кода, который должен выполняться >

Цикл while

Код выполняется, пока заданное условие истинно.

Цикл do while

Код выполняется хотя бы раз вне зависимости от того, ложно условие или истинно.

Строки

Строка — это последовательность символов. Используется для хранения текстовых данных и работы с ними.

От редакции Techrocks. Рекомендуем статью «Работа со строками в современном JavaScript».

Метод charAt

Возвращает символ, имеющий указанный индекс.

Метод concat

Объединяет две или более строк.

Метод indexOf

Возвращает индекс первого вхождения указанного символа в строке. Если символ не найден, возвращает -1.

Метод match

Ищет в строке совпадение с заданным регулярным выражением.

От редакции Techrocks. Рекомендуем статью «Как использовать регулярные выражения в JavaScript».

Метод replace

Ищет в строке совпадение с указанной строкой или символом. Возвращает новую строку с замененными указанными значениями.

Метод search

Ищет в строке указанное значение.

Метод split

Разбивает строку, превращая ее в массив подстрок.

Метод substring

Извлекает из строки символы между указанными индексами и возвращает эту подстроку.

Массивы

Массив — это коллекция элементов данных одного типа. Если говорить по-простому, это переменная, содержащая несколько значений.

Переменная

Контейнер для хранения данных.

var fruit = ["element1", "element2", "element3"];

Метод concat

Объединяет два или более массивов.

Метод indexOf

Возвращает индекс указанного элемента массива.

Метод join

Преобразует элементы массива в строку.

Метод pop

Удаляет последний элемент из массива.

Метод reverse

Этот метод выстраивает элементы массива в обратном (реверсивном) порядке.

Метод sort

Сортирует элементы массива указанным способом.

Метод toString

Преобразует элементы массива в строку.

Метод valueOf

Возвращает релевантный числовой объект, содержащий значение переданного аргумента.

Числовые методы JavaScript

Для осуществления математических операций в JS есть несколько констант и методов.

Метод toExponential

Преобразует число в экспоненциальную форму.

Метод toPrecision

Форматирует число в строку указанной длины.

Метод toString

Преобразует объект в строку.

Метод valueOf

Возвращает примитивное значение числа.

Математические методы JavaScript

Метод ceil

Округляет число в большую сторону до ближайшего целого числа и возвращает результат.

Метод exp

Метод log

Возвращает логарифмическое значение x.

Метод pow

Возвращает значение x в степени y.

Метод random

Возвращает случайное число между 0 и 1.

Метод 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.

Методы Window

Методы, доступные из объекта Window.

Метод alert

Используется для вызова на экран модального окна с сообщением.

Метод blur

Этот метод убирает фокус с текущего окна.

Метод setInterval

Выполняет код через равные промежутки времени (регулярно).

Метод setTimeout

Выполняет код после определенного промежутка времени (один раз).

Метод 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.

Метод clearTimeout

Убирает setTimeout. var — значение, возвращаемое вызовом setTimeout.

Метод 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.

Создание новых элементов в DOM

createElement

createTextNode

Создает новый текстовый узел.

document.createTextNode('some text here')

Перевод статьи «JavaScript Cheatsheet from beginners to advance..».

Источник