Рассмотрим три ключевых отличия между объявлениями переменных в JavaScript:
Область видимости (Scope)
var: Имеет функциональную область видимости. Переменная доступна внутри функции, где объявлена, или глобально, если объявлена вне функции. let: Имеет блочную область видимости. Переменная доступна только внутри блока {}, где объявлена. const: Также имеет блочную область видимости, как и let.
Поднятие (Hoisting)
var: Поднимается. Может использоваться до объявления, но значение будет undefined. let: Тоже поднимается, но нельзя использовать до объявления (временная мертвая зона). const: Аналогично let, существует временная мертвая зона.
Переназначение и изменение
var: Можно переназначать и изменять. let: Можно изменять, но нельзя переобъявлять в той же области видимости. const: Нельзя переназначать, но если содержит объект, свойства объекта можно изменять.
Пример:
// var
var x = 1;
var x = 2; // Допустимо
if (true) {
var x = 3; // Изменит переменную x даже за пределами блока
}
console.log(x); // 3
// let
let y = 1;
// let y = 2; // Ошибка: нельзя повторно объявить
if (true) {
let y = 2; // Новая переменная, только для этого блока
}
console.log(y); // 1
// const
const z = 1;
// z = 2; // Ошибка: нельзя переназначить константу
const obj = { value: 1 };
obj.value = 2; // Допустимо: изменяем свойство, а не саму константу
console.log(obj.value); // 2
Добавление класса ‘js’ к корневому HTML-элементу обычно используется для того чтобы убедиться в поддержки JavaScript (чтобы можно было менять стили и поведение элементов в зависимости от поддержки JS)
Чистый JavaScript (ES6+):
document.documentElement.classList.add('js');
Vanilla JavaScript (более старый синтаксис):
document.documentElement.className += ' js';
С проверкой поддержки classList:
if (document.documentElement.classList) {
document.documentElement.classList.add('js');
}
Универсальный вариант, который:
Проверяет поддержку classList
Если поддерживает — использует classList.add()
Если не поддерживает — использует старый метод конкатенации className
Добавляет пробел перед ‘js’, только если className уже не пустой
if ('classList' in document.documentElement) {
document.documentElement.classList.add('js');
} else {
document.documentElement.className += (document.documentElement.className ? ' ' : '') + 'js';
}
Эти варианты полностью заменяют jQuery-версию и добавляют класс ‘js’ к корневому HTML-элементу, что обычно используется для индикации поддержки JavaScript в браузере.
Альтернативный вариант, который дополнительно удаляет класс ‘no-js’, если он был установлен заранее.
Чтобы выбрать соседний элемент после первого дочернего элемента в JavaScript, вы можете использовать свойство nextElementSibling. Вот пример кода:
// Получаем родительский элемент по классу
const parentElement = document.querySelector('.parent-class');
// Получаем первый дочерний элемент
const firstChild = parentElement.firstElementChild;
// Получаем соседний элемент после первого дочернего
const nextSibling = firstChild.nextElementSibling;
// Выводим результат в консоль
console.log(nextSibling);
Объяснение:
parentElement.firstElementChild возвращает первый дочерний элемент родителя.
firstChild.nextElementSibling возвращает следующий элемент-сосед после первого дочернего.
Таким образом, вы можете легко получить соседний элемент после первого дочернего. Замените '.parent-class' на ваш класс родителя.
В этой статье проведём обзор способов выбора элементов на чистом JavaScript.
Базовые методы querySelector:
// Выбор первого совпадения
const element1 = document.querySelector('.class'); // по классу
const element2 = document.querySelector('#id'); // по ID
const element3 = document.querySelector('div'); // по тегу
const element4 = document.querySelector('[data-attr]'); // по атрибуту
// Выбор ВСЕХ совпадений
const elements1 = document.querySelectorAll('.class');
Классические методы DOM:
// По ID
const elementById = document.getElementById('myId');
// По имени класса
const elementsByClass = document.getElementsByClassName('myClass');
// По тегу
const elementsByTag = document.getElementsByTagName('div');
// Первый и последний элемент
const [firstElement] = document.querySelectorAll('.items');
const [lastElement] = [...document.querySelectorAll('.items')].reverse();
Поиск ближайших элементов:
// Родительский элемент
const parentElement = currentElement.parentElement;
// Дочерние элементы
const childElements = currentElement.children;
// Соседние элементы
const nextSibling = currentElement.nextElementSibling;
const prevSibling = currentElement.previousElementSibling;
Безопасный выбор с проверкой:
Пример реализации через функцию:
function safeSelect(selector) {
const element = document.querySelector(selector);
if (!element) {
console.warn(`Элемент с селектором ${selector} не найден`);
return null;
}
return element;
}
? Рекомендации:
querySelector медленнее, чем getElementById
Используйте const для неизменяемых селекторов
Кэшируйте часто используемые элементы
Проверяйте существование элемента перед работой
Для производительности используйте делегирование событий
const currentYear = new Date().getFullYear().toString();
new Date() — создаём объект который хранит в себе текущий момент времени
getFullYear() — выдёргиваем из объекта год указанной даты. Так как мы создавали экземпляр Date() без аргументов, то год будет соответствовать текущему моменту, а следовательно быть актуальным
toString() — возвращаем тип данных строку.
Ну вот и всё! Теперь в константе currentYear будет находится текущий год
Задача: На странице оформления заказа в поле для ввода номера телефона задать предустановленную схему номера в формате пригодному для русскоязычного сегмента
+7 xxx-xxx-xx-xx (или вариант через 8-ку)
Решение: Выполнять поставленную задачу мы будем на JavaScript, в первом случае — на базе библиотеки jQuery, которая поставляется с WordPress и доступна «из коробки» и во-втором — решение на нативном JS (то есть без зависимостей от сторонних библиотек, в частности jQuery)
Мне встретилось в интернете уже готовое решение, поэтому придерживаясь принципа: «Зачем писать то, что уже написано», я взял его за пример. Единственное, нужно проинспектировать нашу форму отправления заказа и выяснить идентификатор нашего «инпута» для указания номера телефона.
Давайте взглянем на форму при оформлении заказа в WooCommerce.
Если требуется добавить в поле подсказку какой формат ввода номера телефона мы ожидаем от пользователя, то поможет нам в этом специальный фильтр, который отвечает за возможность изменения информации в полях. В документации есть подходящий для решения нашей под-задачи пример
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
$fields['order']['order_comments']['placeholder'] = 'My new placeholder';
$fields['order']['order_comments']['label'] = 'My new label';
return $fields;
}
В примерах из документации можно найти все названия полей. В нашем случае идентификатор нашего поля billing_phone (смотреть рисунок выше, с исследованием элемента) и он относится к группе Billing (эта информация получена тут). Поэтому наш код будет выглядеть следующим образом:
// Hook in
add_filter( 'woocommerce_checkout_fields', 'poet_override_checkout_fields' );
function poet_override_checkout_fields( $fields ) {
$fields['billing']['billing_phone']['placeholder'] = '+7 (123) 456-78-90';
$fields['billing']['billing_phone']['maxlength'] = 10; // ожидаем ввода 10 основных символов номера телефона
return $fields;
}
Выполнение данного кода привнесло в поле нашей формы подсказку-заполнитель
Естественно, мы не можем ручаться что именно так будет осуществлён ввод данных пользователем. Поэтому напишем вторую функцию, которая будет задавать правильное форматирование при вводе благодаря шаблону, который мы реализуем.
В WooCommerce для этого есть удобная функция wc_enqueue_js(), которая добавляет пользовательский код в вывод в нижней части сайта перед закрывающим тегом </body>. Вывод справедлив если страница каким то образом относится к WooCommerce. То есть на одиночной странице записи этого вывода не будет.
Найти функцию можно от корня вашего сайта в wp-contents/plugins/woocommerce/includes/wc-core-functions.php
Она позволяет добавлять в глобальную переменную (global $wc_queued_js) произвольный код. А её вызов можно увидеть чуть ниже по коду:
Обратите внимание, что обёртка для jQuery уже присутствует и можно просто пользоваться её методами. И вот изящное решение, от Rodolfo Melogli можно увидеть ниже.
Оно рабочее. Но зависит от библиотеки jQuery и «заточено» под американский стандарт, так сказать. Так же данное решение не сработает на страницах, которые не относятся к WooCommerce (справедливо для данного кода выше). Ещё мне не нравится пример заполнителя, пользовательский опыт говорит об обратном, вряд ли все будут придерживаться строгого заполнения.
Можно конечно доработать и всё исправить (в случае с примером выше основанным на jQuery), но мне больше понравилась библиотека Cleave.js и её аддон, который заточен под русские стандарты при вводе номера телефона, учитывая с «восьмёрки» или с «плюс, семёрки» начинает набирать пользователь номер.
Поэтому в данном примере мы подключим саму библиотеку и её аддон для страны с кодом RU (в целях уменьшения размера подключаемого кода) и проверим его работу в действии.
К тому же, подключать мы будет стандартной функцией WP для того чтобы решение было универсальным и могло использоваться на разных страницах к разным формам, в том числе популярного плагина Contact Form 7.
Важное примечание! Библиотека с минувшей осени (обращение автора от 25.11.23г) уже не поддерживается по ряду причин, которые описаны в обращении. Она переписана автором на TypeScript и ES6. Пример в статье просто иллюстрирует решение задачи. В целом рекомендуется эта библиотека.
Первым делом задействуем старую добрую функцию WP wp_enqueue_script(), которая будет подключать скрипт библиотеки Cleave.js и её аддон ориентированный на RU. Проверка ! is_checkout() гарантирует подключение только на странице оформления заказа и исключает подключение на прочих страницах
wp_add_inline_script( ‘cleave-phone’… инициализирует (вызывает функционал) на нужном нам поле с нужными параметрами, а частности разделителем в виде чёрточки.
Результатом выполнения кода будет предопределённая маска, которая не позволит пользователю вводит через чур много символов и будет учитывать начало ввода «+7» или «8»
Как подключить маску на других страницах, к другим формам?
Всё очень просто. Решение универсальное в пределах WP.
У нужной формы необходимо понять, как «зацепиться» за нужное поле, или «по айди» или «по классу»
Узнать «айди» страницы, для того чтобы добавить её в условие проверки, дабы не вызывать где не попадя 🙂
Например, у нас есть форма для обратной связи на странице контактов. Первым делом исследуем нужное поле:
Видим подходящий класс. Следовательно, понимаем, как будем делать «селект» — по классу. Далее, узнаем «айдишник» страницы на которой наша форма. В итоге наш код может выглядеть так:
Из примера видно, что мы просто, через запятую, добавили новый селектор по CSS классу. Теперь наша маска применяется к полу телефона созданной плагином Contact Form 7
Рекомендация. Старейтесь всегда проверять исходный код страницы и убеждаться, что нужный скрипт присутствует на ней.
Задача: для удобства сотрудников сделать копирование артикула по клику.
Реализовывать мы будем это на стороне клиента (браузера) при помощи JavaScript используя нужные нам методы при работе с DOM.
Давайте рассуждать. У нас есть артикул, значение которого выводится в строчном элементе <span>, благодаря атрибуту class мы можем «зацепиться за него» — это, условно говоря, его имя.
Так как нам нужно только его значение, отметим для себя элемент span с классом «sku»
Нам нужно его выдернуть из DOM (Объектная Модель Документа) и в этом нам поможет метод querySelector()
Согласитесь, что нашего элемента может на странице и не существовать, поэтому нужно проверить его существование. Если совпадений не будет найдено, то наш метод вернёт значение null.
Итак, событие клика мы отслеживаем и теперь настало время вызвать в момент клика нашу функцию, которая и будет осуществлять копирование содержимого.
Функцию назовём copyWooSKU()
Что должно находиться в функции? Очевидно, что нам нужно получить (зачитать) значение артикула, а затем его каким то чудесным образом скопировать в буфер обмена пользователя. Реализовывать мы это будем через современный API Async Clipboard (на замену синхронного метода document.execCommand())
Clipboard API предоставляет возможность реагировать на команды буфера обмена (вырезать, копировать и вставить), а также выполнять асинхронные чтение/запись в системный буфер обмена.
Обращу внимание, что стрелочные функции не имеют собственного контекста this. То есть в стрелочных функциях
e.currentTarget != this
Комментарий к коду:
async перед функцией, потому что в теле функции есть await и вернётся промис
try / catch для обработки исключения
e.target.innerText — это извлечение значения свойства (текста в нашем случае) элемента по которому кликаем
Как и многие новые API, API буфера обмена поддерживается только для страниц, обслуживаемых по протоколу HTTPS. Чтобы предотвратить злоупотребления, доступ к буферу обмена разрешен только тогда, когда страница является активной вкладкой. Страницы на активных вкладках могут записывать в буфер обмена без запроса разрешения, но чтение из буфера обмена всегда требует разрешения.
Учтите, что метод writeText() ожидает безопасного контекста HTTPS и если ваше соединение осуществляется по схеме протокола HTTP то может вылететь как раз таки ошибочка 🙂
Очевидно, что в момент клика непонятно, произошло копирование или нет. Если улучшать наш код для пользователя, то по доброму необходимо сделать уведомление, чтобы клиенту было понятно, что копирование осуществилось.
Давайте рассуждать. Нам нужно методами JavaScript создать элемент в котором будет содержаться текст нашего уведомления. После вызова функции необходимо отобразить это уведомление и спустя пару секунд скрыть. Весь наш код теперь выглядит следующим образом:
Метод preventDefault () — добавил на всякий случай для отмены обработки клика (до нашего обработчика)
document.createElement() — метод для создания элемента
style.color — присваиваем CSS-свойство для изменения цвета шрифта
Свойство .innerText — позволяет задавать текст нашему созданному элементу
Метод .appendChild() добавляет узел в конец списка дочерних элементов указанного родительского узла. Будьте внимательны! Селектор родительского элемента у вас может отличаться.
Функция .setTimeout() — для задержки выполнения
Метод .removeChild() удаляет дочерний элемент из DOM.
parentElement это родительский элемент текущего узла.
Возможно некоторые свойства, такие как : target, innerText станут понятнее, если мы на них взглянем. Для этого в этом отрезке кода, где мы отслеживаем действие по клику, можно вывести в консоль это событие клика мышкой:
