JavaScript JS

Контент // window.BSN = require('bootstrap.native/dist/bootstrap-native-v4') // Подключение глобально в скрипты /* https://developer.mozilla.org/ru debugger // Ключевое слово в JS для дебага, при этом где оно указано код остановиться Операторы: + - * / % (действия) = < > == != === !== (сравнения) && || ! (логические) true ? 'если true' : 'если false' (тернарный) */ var i = 1 i = i + 1 // i++ (++i префиксная форма, вначале выводится результат потом операция инкремента) i = i + 3 // i += 3 (- * / для всех) // Проверка если не существует переменная if (typeof notVar !== 'undefined') {} // Проверить, есть ли во вложенном объекте ключ третьего уровня obj['level1']['level2']['level3'] var ifKeyInObj = (((obj || {})['level1'] || {})['level2'] || {})['level3'] /* Типы данных: Number String Boolean Object Null Undefined */ console.log(typeof 'test') // Проверить тип данных var int = parseInt('123') // Привести строку к числу var sum = new Intl.NumberFormat('ru-RU').format(123456.789) // Привести число к примеру к цене, чтобы получить такое 123 456,789 /* false (0 null undefined '' NaN) */ // Условия if (3 % 2) { console.log(1) } else if (2 % 2) { console.log(2) } else { console.log(3) } // условие ? да : нет var a = 3 % 2 ? 'ok' : 'no' // условие или (если нет первого, то возьмём второе) var a = 2 % 2 || 'no' // Switch switch ('red') { case 'green': console.log('green') break case 'grey': console.log('grey') break case 'red': console.log('red') break default: console.log('no color') } // Методы строк: var str = 'Hello world!' str.toString() // Привести к строке str.length // Длина строки str.toUpperCase() // К верхнему регистру str.toLowerCase() // К нижнему регистру str.substr(0, 1).toUpperCase() + str.substr(1) // Первая буква заглавная str.charAt(1) // Получить 2-й символ str.includes('world') // Содержится ли в строке str.indexOf('world') // Содержится ли в строке, возвращает позицию первого вхождения (если нет, то возвращает -1), как вариант str.search('world') str.substr(6, 5) // Начать с первого и взять 5 символов от начиная от 6-го символа str.substring(0, 5) // Начать с первого и взять 5 символов от начала строки str.replace('cat', 'dog') // Заменить один раз в строке cat на dog str.replace(/cat/g, 'dog') // Заменить в строке все cat на dog // JSON data = JSON.parse(str) // Приводим данные к Json из строки data = JSON.stringify(data) // Приводим данные из объекта к строке // Числа: var num = 2.66666666666666 +num // Привести из строки к числу num.toFixed(2) // После запятой 2 символа, округляется parseFloat(num) // Привести к дробному числу parseInt(num) // Привести к целому числу isNaN(num) // Проверить на NaN, возвращает true или false isFinite(num) // Проверить на infinity (бесконечность - false), возвращает true или false // Массивы var arr = ['one', 'two'] arr.length // Кол-во элементов в массиве arr.push('three') // Добавить в конец массива arr.unshift('zero') // Добавить в начало массива arr.pop() // Удаляет последний элемент массива и возвращает его arr.shift() // Удаляет первый элемент массива и возвращает его arr.includes('value') // Есть ли в массиве значение value arr.indexOf('one') // Есть ли в массиве элемент one, возращает индекс элемента или -1 var str = '1,2,3,4,5,6,7,8,9' var arr = str.split(',') // Из строки в массив var str = arr.join(',') // Из массива в строку arr.reverse() // Перевернуть массив arr.splice(key, 1); // Удалить из массива,key ключ удаляемого, с которого начинаем, 1 кол-во удаляемых arr.splice(1, 2, '10', '11') // Начать массив со 2-го элемента, удалить 2 элемента из массива, вставить в массив 10 и 11 var newArr = arr.concat([10,11]) // Соединить массивы var findToArr = arr.find(function (i) { // Метод find работает как цикл, перебирает все элементы, вернёт 5 return i == 5 }) var filter = arr.filter(function (i) { // Вернёт все нечётные return i % 2 != 0 }) var map = arr.map(function (i) { // работает как цикл, модифицирует массив, распарсит в int массиве return parseInt(i) }) var arr = <?= json_encode($arr) ?> // arr php to arr js // Объекты var obj = { a: 1, b: 2, [i]: 3, // Используем переменную в ключ c: function () { var item = 10 - this.a this.d = item } } console.log(obj.a) // Получить содержимое a console.log(obj['a']) // Получить содержимое a obj['key'] = 'value' // Добавить в объект delete obj['key'] // Удалить из объекта obj.hasOwnProperty('a') // Вернёт true, если не будет ключа а, то вернёт false // Циклы elements.forEach(function (el, i) { console.log(i) console.log(el) }) var nurbers = [1, 2, 3, 4, 5] for (var i = 0; i < nurbers.length; i++) { if (nurbers[i] % 2 === 0) { // Если число чётное console.log(nurbers[i]) } if (nurbers[i] % 2 !== 0) { // Другой способ вывести чётное число continue } console.log(nurbers[i]) } for (var key in obj) { if (obj.hasOwnProperty(key)) { // Цикл исключает свойства прототипа console.log(obj[key]) } } Object.keys(obj).forEach(function (key) { // Цикл исключает свойства прототипа console.log(obj[key]) if (key === 2) { return // Остановить даленейший цикл } }) Object.keys(obj).length // Кол-во элементов в объекте // DOM var id = document.getElementById('id-name') // Получить id var cl = document.getElementsByClassName('class-name') // Получить class (устаревший) var h1 = document.getElementsByTagName('h1') // Получить тег (устаревший) id.addEventListener('click', function (e) { }) var oneElement = document.querySelector('input[type=checkbox]') // Получить один элемент (id, тег, class), работает также как css var manyElements = document.querySelectorAll('.class-name') // Получить множество элементов (тег, class), работает также как css var input = document.querySelector('input') // Получить input input.setAttribute('disabled', 'true') // Заблокировать input, добавить атрибут, также вставить атрибут input.removeAttribute('disabled') // Разблокировать input, удалить атрибут input.checked = true; // Включить input, т.е. checked oneElement.innerHTML = '<p>Replace</p>' // Заменить содержимое элемента h1.textContent = 'Replace text h1' // Заменить текст h1 (вставить) h1.trim // Удалить все пробелы consol.log(input.value) // Получить значение input input.value = 'New' // Вставить значение input selectTitle = e.target.options[this.selectedIndex].textContent // Чтобы получить текст option у select при событии change var href = a.getAttribute('href') // Получить любой атрибут из тега a.setAttribute('href', 'https://ya.ru') // Заменить href в ссылке oneElement.classList.add('red') // Добавить к элементу класс red oneElement.classList.add('red', 'green') // Добавить к элементу множество классов oneElement.classList.remove('red') // Удалить у элемента класс red oneElement.classList.toggle('red') // Добавять и удалять класс red oneElement.classList.contains('red') // Есть ли класс red, возвращает true или false window.getComputedStyle(oneElement, null).getPropertyValue('padding-left') // У элемента oneElement получить padding-left, узнать стиль style элемента oneElement.closest('.class-parent') // Найти класс родителя в иерархии DOM, если у родителя нужно удалить тег p .removeChild('p') oneElement.childNodes // oneElement.parentNode // Родительский элемент oneElement.parentElement // Родительский элемент oneElement.children // Вложенные теги (бывает firstChild, lastChild) oneElement.firstElementChild // Первый вложенный элемент oneElement.firstChild // Первый дочений элемент oneElement.lastChild // Последний дочений элемент oneElement.nextSibling // Следующий за ним тег oneElement.previousSibling // Предыдущий тег var el = e.target el.parentNode.removeChild(el) // Удалить элемент через родителя el.remove() // Удалить элемент /* Дествия с DOM */ oneElement.remove() // Удалить элемент var newElement = document.createElement('div') // Создать элемент div, в который, к примеру, можно добавить стили var node = document.createTextNode('создаёт node с текстом, которую можно вставить') oneElement.insertAdjacentElement('afterbegin', newElement) // Поместить во внутрь oneElement созданный newElement var p = oneElement.querySelector('p') oneElement.replaceChild(p, newElement) // Заменить элемент р на newElement oneElement.appendChild(newElement) // Вставить элемента oneElement.insertBefore(sp1, sp2) // Вставляем sp1 перед sp2 /* События click focus blur - потеря фокуса change - при любом изменении input - при изменение input keyup mouseenter - при наведении мыши mouseleave - при убирании наведения DOMContentLoaded - после загрузки всего DOM submit - отправка формы */ window.onscroll = function() { var headerTop = document.querySelector('#header').offsetTop var headerHeight = document.querySelector('#header').offsetHeight var heightScreen = window.innerHeight var widthScreen = window.innerWidth || document.body.clientWidth var width = oneElement.getBoundingClientRect().width // Получить ширину элемента, также можно получить различные параметры, например высоту var heightAll = document.body.clientHeight var scrollTop = window.pageYOffset || document.documentElement.scrollTop // Расстояние до верхней точки экрана oneElement.getBoundingClientRect().top + pageYOffset // https://learn.javascript.ru/metrics console.log('Высота до блока Header: ' + headerTop) console.log('Высота блока Header: ' + headerHeight) console.log('Высота экрана пользователя: ' + heightScreen) console.log('Ширина экрана пользователя: ' + widthScreen) console.log('Высота всей веб-страницы: ' + heightAll) console.log('Высота точки на которой сейчас экран: ' + scrollTop) } oneElement.getBoundingClientRect() // Размеры элемента document.querySelector('div').addEventListener('scroll', function() { console.log('Позиция скрола у элемента: ' + pageYOffset) }) // Подробно на картинке https://omegakontur.ru/img/content/size_js.png // Click oneElement.addEventListener('click', function(e) { console.log(e.target) }) // Или btnOk.onclick = function(e) { // onchange e.preventDefault() // Отменить поведение ссылки console.log(e.target) } function functionName () { mouseenter this.style.color = 'red' // Изменить цвет текста this.style.BackgroundColor = 'transparent' // Изменить цвет фона } oneElement.addEventListener('click', functionName) // Можно 3-м параметром передать true, тогда событие будет идти на всплытие, т.е. от того элемента, по которому кликнули /* oneElement.addEventListener('click', function (e) { // e - объект события (event, можно не использовать) e.stopImmediatePropagation() // Останавливает событие e.stopPropagation() // Останавливает событие e.preventDefault() // Отменить действие ссылки e.target.style.color = 'red' // Поменять стиль через event e.target.dataset.example // Получить дата атрибут data-example e.target.closest('.row').style.color = 'red' // Найти выше стоящий элемент console.log('Меня кликнули!') }) */ color = window.getComputedStyle(e.target).backgroundColor // Получить цвет элемента rgb(101, 125, 137) // При наведении мыши oneElement.onmouseover = function(e) { // code... } // При уходе наведения oneElement.onmouseout = function(e) { // code... } // Делегирование событий document.getElementById('wrapper').addEventListener('click', function(e) { // Поменять цвет по клику var tagName = e.target.tagName.toLowerCase() // Получаю название тега и привожу к нижнему регистру if (tagName === 'p') { // По тегу p e.target.style.color = 'blue' } if (e.target.classList.contains('color')) { // По классу color e.target.style.color = 'red' } }) /* Async Defer <script async src="scripts.js"></script> Данный скрипт будет синхронно загружаться, не мешая зарузки html <script defer src="scripts.js"></script> Данный скрипт будет синхронно загружаться, не мешая зарузки html, при этом сохраниться очередность скриптов */ /* alert() confirm() // Возвращает true или false pront() // Возвращает введёное значение, 2-м параметром можно написать значение по-умолчанию console.log() console.info() console.warn() // Выводит предупреждение console.error() // Выводит ошибку throw new Error('Error') // Выводит ошибку и останавливает действие кода */ // Math Math.random() // Ромдомное число 3.1415... Math.PI() // Число PI Math.floor(num) // Округление в меньшую сторону Math.ceil(num) // Округление в большую сторону function getRandom(min, max) { // Функция для получение рамдомного числа, принимает минимальное и максимальное значение min = +min // Можно так написать или parseInt(min) max = parseInt(max) return min && max ? Math.floor(Math.random() * (min - max) + min) : 0 } // JSON var jsonToStr = JSON.stringify(obj) // Объект в строку var strToJson = JSON.parse(obj) // Строку в объект // Date var date = new Date() // Параметром можно передать новую дату в метке времени unix, если надо date.getFullYear() // Текущий год, можно использовать setFullYear(2016) при этом поменяется текущий год, также и ко все ниже можно использовать set date.getMonth() // Текущий месяц date.getDate() // Текущий день date.toLocaleDateString() // Текущая дата в формате 29.08.2019 date.getTime() // Метка времени от 1970 (date.now() тоже самое) new Date(1643981987826) // Получить время из метки времени timestamp to date // Form получить данные формы var formData = new FormData(form) // LocalStorage localStorage.setItem('name', value) // Сохранить данные, можно сохранять JSON localStorage.getItem('name') // Получить данные по имени localStorage.removeItem('name') // Удалить данные по имени localStorage.clear() // Удалить всё из localStorage localStorage.key(key) // Получить числовое значение и возвращает имя ключа из хранилища. Порядок ключей определяется браузером // Try Catch try { // Действие, которое может не сработать } catch(e) { // Если не сработает действие, то ошибка будет в е или можно к примеру изменить переменную } // Функции var interval = setInterval(function () { // Функция запускается через интервал времени, сколько нужно раз console.log('interval') }, 1000) // clearInterval(interval) // Если по какому-то условию надо остановить интервал setTimeout(function () { // Функция запускается через определённое время // var self = this // Можно контекст передать таким способом, тогда this заменить на self console.log('Name: ', this.name) }.bind(this), 1000) // Через bind передаю контекст this // Prototype function Car(name, year) { // Класс пишется с большой буквы this.name = name this.year = year } Car.prototype.getAge = function () { // Добавить метод в прототип return new Date().getFullYear() - this.year } Car.prototype.color = 'black' // Добавить свойство в прототип var ford = new Car('Ford', 2015) var bmw = new Car('BMW', 2015) bmw.color = 'red' console.log(ford) console.log(bmw) // Fetch document.querySelector('#load').addEventListener('click', load) // button#load async function load () { var url = 'https://jsonplaceholder.typicode.com/users' /* fetch(url) .then(function (response) { return response.json() }) .then(function (data) { var html = data.map(function (item) { return '<li>' + item.id + ' ' + item.name + ' ' + item.email + '</li>' }).join(' ') document.querySelector('#list').insertAdjacentHTML('afterbegin', html) // ul#list }) */ /* var request = new Request(url, { method: 'post', body: JSON.stringify(data) }) var response = await fetch(request) */ var response = await fetch(url) var data = await response.json() var html = data.map(function (item) { return '<li>' + item.id + ' ' + item.name + ' ' + item.email + '</li>' }).join(' ') document.querySelector('#list').insertAdjacentHTML('afterbegin', html) // ul#list } // Promise var promise = new Promise(function (resolve, reject) { // resolve - успешное, reject - ошибка setTimeout(function () { // code... resolve() }, 1000) }) promise.then(function () { // Когда resolve, тогда вызовется return new Promise(function (resolve, reject) { setTimeout(function () { // вложенный code... var data = {a1: 'one', a2: 'two'} resolve(data) // Можно передать данные в следующий промис }, 500) }) }) .then(function (data) { // Получаю данные из предыдущего промиса return new Promise(function (resolve, reject) { setTimeout(function () { // вложенный во вложенный code... console.log(data) // Здесь можно обработать полученные данные и передать далее, если надо resolve() }, 500) }) }) // Далее сколько угодно .then() .catch(function (e) { // Обработка ошибки, если возникнет console.error(e) }) .finally(function () { // Этот метод вызовется после проведения всех операций, даже если произошла ошибка }) // Ещё о промисах function sleep (ms) { return new Promise(function (resolve) { setTimeout(function () { resolve() }, ms) }) } var p1 = sleep(1000).then(function () { return { name: 'Promise 1000' } }) var p2 = sleep(2000).then(function () { return { name: 'Promise 2000' } }) Promise.race([p1, p2]).then(function (data) { // Отрабатывает, когда срабатывает 1-й промис, возвращает, что вернёт 1-й промис console.log(data) }) Promise.all([p1, p2]).then(function (data) { // Отрабатывает, когда срабатывает последний промис, возвращает, что вернут все промисы в массиве console.log(data) }) async function start () { // 2-й способ с использованием async await, сработает после завершения всей функции var dataRace = await Promise.race([p1, p2]) var dataAll = await Promise.all([p1, p2]) console.log(dataRace) console.log(dataAll) } start() // Удалить и добавить класс active у нескольких элементов с классом tab при клике document.querySelector('#menu').addEventListener('click', active) function active (event) { event.preventDefault() if (event.target.classList.contains('tab')) { Array.from(document.querySelectorAll('.tab')).forEach(tab => { tab.classList.remove('active') }) event.target.classList.add('active') } } // Если ширина экрана больше 768 if (document.body.clientWidth > 768) { // Для десктопов } else { // Для мобильных } // Переключатель toggle var test = true oneElement.onclick = function(e) { test = !test if (test) { test.style.display = 'none' } else { test.style.display = 'block' } } // Mutation Observer - следим за изменениями dom html, рабочий пример: // https://developer.mozilla.org/ru/docs/Web/API/MutationObserver // e.preventDefault() // Отменить поведение ссылки // Редирект на страницу success redirect document.location = '/success' document.location = document.location.href // Перезагрузка страницы // Функция после загрузки страницы document.addEventListener('DOMContentLoaded', function() { // Code... }, false)