Formatting using css classes
<spanclass="shortDateFormat">2009-12-18 10:54:50.546</span><spanclass="longDateFormat">2009-12-18 10:54:50.546</span>
jQuery(function(){var shortDateFormat ='dd/MM/yyyy';var longDateFormat ='dd/MM/yyyy HH:mm:ss';jQuery(".shortDateFormat").each(function(idx,elem){if(jQuery(elem).is(":input")){jQuery(elem).val(jQuery.format.date(jQuery(elem).val(), shortDateFormat));}else{jQuery(elem).text(jQuery.format.date(jQuery(elem).text(), shortDateFormat));}});jQuery(".longDateFormat").each(function(idx,elem){if(jQuery(elem).is(":input")){jQuery(elem).val(jQuery.format.date(jQuery(elem).val(), longDateFormat));}else{jQuery(elem).text(jQuery.format.date(jQuery(elem).text(), longDateFormat));}});});
Output
Что такое lazy loading изображений
Lazy loading или «ленивая загрузка» — это способ отложенной загрузки изображений, когда картинки подгружаются не сразу вместе с запрашиваемой страницей, а по мере надобности, асинхронно. Функция работает на технологии AJAX с помощью JavaScript.
Способ работает для картинок img и фреймов iframe. У этих элементов есть атрибут src, указывающий на источник.
Варианты отложенного отображения контента:
Метод ленивой загрузки позволяет увеличить скорость отображения страницы, потому что загрузка элементов растянута на время, пока пользователь изучает контент.
На демонстрационной странице indexoid.com/speed картинки загружаются по мере просмотра:
Отображение загрузки картинок на странице при скроллингеКод страницы indexoid.com/speed
Не стоит настраивать такую загрузку для элементов на первом экране — они должны загружаться сразу же, как только пользователь зашел на страницу.
Как ПС относятся к отложенной загрузке
Раньше у Google была проблема с индексированием контента с атрибутом loading, сейчас бот воспринимает такие элементы. Но нужно убедиться, что все материалы страницы доступны для Googlebot.
Добавление правил валидации для полей ввода
Вы также можете передать определенные правила в метод validate() для установления правил, в соответствии с которыми должна проверяться введенная информация. Значением параметра rules должны быть пары «ключ-значение». Ключом в каждом случае является название проверяемого элемента, а значением – набор правил для проверки информации.
Также можно добавить проверку условий данных в различных полях – с использованием ключевого слова depends («зависит от») и возвращая, соответственно, результат true («истинно») или false («ложно»). Ниже приведен пример использования простого набора правил для определения корректности введенных данных:
$(document).ready(function() {
$("#basic-form").validate({
rules: {
name : {
required: true,
minlength: 3
},
age: {
required: true,
number: true,
min: 18
},
email: {
required: true,
email: true
},
weight: {
required: {
depends: function(elem) {
return $("#age").val() > 50
}
},
number: true,
min: 0
}
}
});
});
Такие опции валидации схожи с атрибутами, которые вы можете добавить в разметку формы. Например, установка параметра required на true сделает элемент обязательно необходимым для успешной отправки формы. Установление minlength на значение 3 обяжет пользователей вводить в поле как минимум три символа. Есть и другие встроенные методы валидации, с которыми можно ознакомиться на странице с технической документацией.
Важный момент, на который необходимо обратить внимание в приведенном выше коде – использование depends для того, чтобы сделать обязательным условием ввод веса, если возраст превышает 50 лет. Условие реализовано с помощью возвращения значения true функцией обратного вызова в том случае, если значение, введенное в поле age, превышает 50
Получение конкретных компонентов даты и времени
Если у вас есть подходящий объект даты, вам доступен ряд методов для его извлечения, например, значение месяца, даты, часов, минут и т. д. Теперь рассмотрим различные методы извлечения отдельных фрагментов информации из объекта Date.
Получение года, месяца и даты
Объект Date предоставляет несколько методов, таких как , , и т.д., которые можно использовать для извлечения определенных компонентов даты из объекта Date, таких как год, день месяца, день недели соответственно В следующем примере показано, как получить определенные компоненты даты из объекта Date с помощью этих методов:
Метод возвращает число, представляющее день недели (от 0 до 6), вместо возврата имени, такого как воскресенье или понедельник, таким образом, если день — воскресенье, метод возвращает 0; и если день — понедельник, метод возвращает 1 и так далее.
Аналогично, метод возвращает количество месяцев (от 0 до 11) вместо имени месяца. Здесь 0 представляет первый месяц года. Поэтому, если это январь, метод возвращается 0, а не 1; а если это август, метод возвращает 7.
Получение часов, минут, секунд и миллисекунд
Аналогично, объект Date предоставляет такие методы, как , , , и т. д. для получения компонентов времени из объекта Date.
Метод возвращает количество часов в дне (от 0 до 23) согласно 24-часовым часам. Когда наступает полночь, метод возвращает 0; в 3:00 дня метод возвращает 15.
У объектов Date также есть методы для получения компонентов UTC. Просто поместите UTC после get, например , , и так далее.
Как сделать обновление скриптов в кеше браузера
Один из часто задаваемых вопросов звучит примерно так: «Почему я изменяю css файл, но эти изменения не видны на сайте?».
Ответ на него достаточно простой: при первом посещении сайта браузер скачивает файлы стилей, скриптов, изображения и т.д. себе в кеш. При каждом последующем посещении браузер уже не будет скачивать их заново, а возьмет из своего локального хранилища (кеша). Это работает в целях оптимизации посещения интернет-ресурсов.
Но есть отличный способ динамически сообщать браузеру об изменениях в ваших файлах — указывать их версии. Это удобно делать с помощью функции .
Теперь браузер будет проверять, изменилась ли версия (время последнего изменения) файла и только в случае положительного ответа скачивать файл заново.
К тому же, в одной из последних версий добавили функцию , которая проверяет наличие файла в дочерней теме перед подключением, это довольно удобно.
Если мы применим эти советы, то получим примерно следующее:
Популярный генератор тем underscores в качестве версии скриптов указывает некую магическую константу , предварительно определив ее . Как вы понимаете, версия не будет меняться динамически при таком подходе и ее указание довольно бессмысленно.
JS сравнение дат
В JavaScript для сравнения дат используются операторы , , и .
const earlier = new Date(2019, 0, 26) const later = new Date(2019, 0, 27) console.log(earlier < later) // true
Сложнее сравнить даты по времени суток (часам и минутам). Вы не сможете сравнить их с помощью или :
const a = new Date(2019, 0, 26) const b = new Date(2019, 0, 26) console.log(a == b) // false console.log(a === b) // false
Чтобы проверить, совпадает ли в двух датах значение времени, нужно сравнить их временные метки с помощью .
const isSameTime = (a, b) => {
return a.getTime() === b.getTime()
}
const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)
console.log(isSameTime(a, b)) // true
Чтобы проверить, совпадают ли в датах дни недели, сравните их значения с помощью методов , и .
const isSameDay = (a, b) => {
return a.getFullYear() === b.getFullYear() &&
a.getMonth() === b.getMonth() &&
a.getDate()=== b.getDate()
}
const a = new Date(2019, 0, 26, 10) // 26 января 2019, 10:00
const b = new Date(2019, 0, 26, 12) // 26 января 2019, 12:00
console.log(isSameDay(a, b)) // true
Как добавить один скрипт после другого
Еще, при работе со скриптами полезно знать, что в третьем параметре функции можно указать зависимость этого скрипта от других. Например, если вы укажите , то скрипт example.min.js будет подключен после скрипта jquery.min.js.
Кроме того, существует полезная функция , которая позволит вам добавить скрипт прямо в html документ, после указанного. Аналогично для стилей будет работать функция . Рассмотрим пример подключения slick-слайдера:
Как видите, сначала нужные файлы подключаются с помощью функций и , после чего скрипт инициализации слайдера вставляется с помощью после основного slick.min.js.
Создание собственных сообщений об ошибках
Рассматриваемый нами плагин позволяет создавать собственный набор сообщений об ошибках, соответствующих различным правилам проверки данных, введенных в форму. Создание сообщения об ошибке начинается с задания объекта-значения для ключа messages. Для каждого поля ввода определяется такая пара ключа и значения, и соответствующее сообщение об ошибке.
Ниже приведен пример кода, который обеспечивает вывод сообщений об ошибках при вводе неверных данных в любое из полей формы:
messages : {
name: {
minlength: "Name should be at least 3 characters"
},
age: {
required: "Please enter your age",
number: "Please enter your age as a numerical value",
min: "You must be at least 18 years old"
},
email: {
email: "The email should be in the format: [email protected]"
},
weight: {
required: "People with age over 50 have to enter their weight",
number: "Please enter your weight as a numerical value"
}
}
Как и правила, messages опираются на названия полей ввода. Каждое из этих полей принимает объект, состоящий из ключа и значения. Ключом является правило валидации, а значением – сообщение об ошибке, которое выводится в случае нарушения правила.
Например, поле age с помощью свойства required вызовет сообщение об ошибке, если останется незаполненным. Кроме того, если введенная информация не является числовым значением, поле вызовет ошибку number.
Как вы сможете убедиться, плагин отображает сообщения об ошибках, используемые по умолчанию в том случае, если вы не предоставили ему свои собственные. Попробуйте ввести различные данные в приведенный ниже демонстрационный образец, и вы увидите как стандартные, так и кастомные уведомления об ошибках.
Автоматическая коррекция даты
Допустим, мы установили дату на 33 марта 2019 года. (В календаре нет 33 марта). В этом случае JavaScript автоматически переведёт 33 марта во 2 апреля.
// 33е марта => 2е апреля new Date(2019, 2, 33)
33 марта автоматически преобразуется во 2 апреля.
Поэтому не стоит беспокоиться о расчете минут, часов, дней, месяцев при добавлении периода времени. JavaScript делает это автоматически.
// 33е марта => 2е апреля new Date(2019, 2, 30 + 3)
30+3=33. 33 марта автоматически преобразуется во 2 апреля.
И это всё, что вам нужно знать о JavaScript-объекте Date.
Вадим Дворниковавтор-переводчик статьи «Everything You Need to Know About Date in JavaScript»
Как сделать предварительную регистрацию скриптов
Еще одной важной особенностью работы со скриптами является то, что скрипт можно только зарегистрировать c помощью функции , а выполнять подключение уже в любом другом месте проекта по необходимым условиям. Рассмотрим на примере:. Сначала мы регистрируем скрипты библиотеки masonry для того, чтобы сделать красивые фото-галереи у нас на сайте
Эти скрипты не будут подключены в html-документ до тех пор, пока вы не используете функцию или
Сначала мы регистрируем скрипты библиотеки masonry для того, чтобы сделать красивые фото-галереи у нас на сайте. Эти скрипты не будут подключены в html-документ до тех пор, пока вы не используете функцию или .
Сами фото-галереи выводятся с помощью шорткодов и мы можем прямо здесь выполнить их подключение. Таким образом эти скрипты будут подключены в html-документе только в том случае, если на странице будет использован этот шорткод.
toBrowserTimeZone
converts into browsers timezone.
- value = String representing date in ISO time («2013-09-14T23:22:33Z») or String representing default JAXB formatting of («2013-09-14T16:22:33.527-07:00») or String representing Unix Timestamp (Sat Sep 14 2013 16:22:33 GMT-0700 (PDT)) or javascript date object.
- format = All input formats valid for are valid for this method. The defaut format is MM/dd/yyyy HH:mm:ss.
var date1 ="2013-09-14T23:22:33Z";var date2 ="2013-09-14T16:22:33.527-07:00";var date3 ="Sat Sep 14 2013 16:22:33 GMT-0700 (PDT)";$.format.toBrowserTimeZone(date1)$.format.toBrowserTimeZone(date2)$.format.toBrowserTimeZone(date3)
To compile jquery-dateFormat (generate dist files):
npm run compile
Возможные ошибки. Консоль браузера
Бывает такое, что вроде бы все сделали правильно, а не работает. Что не так и где искать ошибку? В первую очередь необходимо заглянуть в консоль браузера на наличии в нем ошибок. Чтобы открыть консоль на открытой в браузере странице нажимаем клавишу «F12» и в открывшемся инспекторе кода переключаемся на вкладку «Console». Вот как выглядит консоль в браузере Google Chrome.
Вот как выглядит консоль в Mozilla Firefox:
Консоль в Firebug браузера Mozilla Firefox. Для тех, кто не знает что такое Firebug — это расширение для Firefox инспектора кода, написанный сторонним разработчиком.
Обычно для верстки сайтов я использую браузер Firefox, и пользуюсь встроенной консолью, но бывает и такое, что открываю Firebug. Поэтому я его держу на всякий случай.
С консолью разобрались, теперь перейдем к ошибкам…
Uncaught referenceError: JQuery is not defined
Данная ошибка говорит о том, что не найдена библиотека jQuery. Тут есть два варианта — либо вы неправильно указали путь до jQuery, либо у вас jQuery подключена ниже других скриптов. Решение я думаю вы поняли какое должно быть.
TypeError: $(…).*** is not a function
Вместо *** будет подставлен метод, который создает плагин jQuery. Например, в Magnific Popup это метод — «magnificPopup();«. Так вот, если вы не подключите сам плагин Magnific Popup (я беру его для примера) и создадите вызов данного плагина, то в консоле у вас может появиться следующая ошибка — «TypeError: $(…).magnificPopup is not a function». Такая ошибка может возникнуть также, если вы подключите сам плагин ниже кода инициализации скрипта.
TypeError: $(…).ready is not a function
Данная ошибка может возникнуть, если вы не локализовали алиас «$«. Например, если на вашем joomla сайте подключена библиотека Mootools, то вам следует знать, что Mootools также, как и jQuery использует алиас «$«, поэтому нужно ее локализовать. Как это сделать я писал выше и показывал три варианта.
Пока и до новых встреч!
Что именно вызывает конфликты JavaScript?
Прежде чем перейти к методам обнаружения конфликтов JavaScript, давайте разберемся с причинами их появления.
Как правило, к подобным проблемам с совместимостью приводит установка модулей и плагинов, использующих разные версии библиотек JQuery или Mootools. Это могут быть различные слайдеры изображений, модули галереи, таймеры, и другие подобные расширения, в которых присутствует анимация.
Но это еще не все, даже в тех ситуациях, когда расширения используют одинаковые версии jQuery или Mootools, эти библиотеки могут конфликтовать между собой. Это же касается и пользовательских скриптов, которые вы вручную добавляете на страницы сайта. Они могут быть несовместимы как со встроенными библиотеками Joomla, так и с отдельными модулями.
Удалить код JavaScript и CSS из верхней части страницы
В верхней части кода HTML-страницы используйте только контент, нужный для загрузки первого экрана, остальной перенесите вниз. Скрипты JS и CSS влияют на отклик страницы, но не нужны в той части, которая загружается первой. Они тормозят браузер, и получается, что пользователь не видит часть страницы, на которую они влияют, но уже ждет ее загрузку.
Исходный HTML-код страницы:
<link rel="stylesheet" href="<a>small.css< a>"="">
<div class="black">
Текст
</div>
</a>small.css<></a>small.css<>
Стили small.css:
yellow {background-color: white;}
.blue {color: black;}
.big { font-size: 8em; }
.bold { font-weight: bold; }
Встраиваем CSS:
<style>
.black{color:black;}
</style>
<div class="black">
Текст
</div>
<link rel="stylesheet" href="small.css">
Файл стилей small.css будет подгружаться после загрузки первой страницы.
Получение отдельных компонентов даты и времени
В JavaScript для получения отдельных компонентов даты и времени предназначены следующие методы:
- – возвращает год, состоящий из 4 чисел;
- – возвращает месяц в формате числа от 0 до 11 (0 – январь, 1 – февраль, 2 – март, …, 11 – декабрь);
- – возвращает число месяца от 1 до 31;
- – возвращает количество часов от 0 до 23;
- – возвращает количество минут от 0 до 59;
- – возвращает количество секунд от 0 до 59;
- – возвращает количество миллисекунд от 0 до 999.
Все эти методы возвращают отдельные компоненты даты и времени в соответствии с часовым поясом установленном на локальном устройстве пользователя.
Пример:
// создадим дату 11.11.2019 00:00 по UTC var newDate = new Date(Date.UTC(2019,11,11)); // получим компоненты даты, если на устройстве пользователя местное время равно UTC+10:00 newDate.getFullYear(); //2019 newDate.getMonth(); // 10 newDate.getDate(); // 11 newDate.getHours(); // 10 newDate.getMinutes(); // 0 newDate.getSeconds(); // 0 newDate.getMilliseconds(); // 0
Пример, в котором поприветствуем пользователя в зависимости от того какой сейчас у него интервал времени:
// получим текущее время пользователя и компоненты этого времени
var
now = new Date(),
hour = now.getHours(),
minute = now.getMinutes(),
second = now.getSeconds(),
message = '';
// определим фразу приветствия в зависимости от местного времени пользователя
if (hour <= 6) {
message = 'Доброе время суток';
} else if (hour <= 12) {
message = 'Доброе утро';
} else if (hour <= 18) {
message = 'Добрый день';
} else {
message = 'Добрый вечер';
}
// выполним форматирование времени с использованием тернарного оператора
minute = (minute < 10) ? '0' + minute : minute;
second = (second < 10) ? '0' + second : second;
hour = (hour < 10) ? '0' + hour : hour;
message += ', сейчас ' + hour + ':' + minute + ':' + second;
// выведем приветствие и время в консоль
console.log(message); // Добрый вечер, сейчас 22:50:39
В этом примере вывод времени в нужном формате осуществлён с использованием тернарного оператора.
В JavaScript имеются аналоги этих методов для получения отдельных компонентов даты и времени для часового пояса UTC+0. Эти методы называются аналогично, но с добавленным «UTC» после «get»: , , , , , , .
Получить номер дня недели в JavaScript можно с помощью метода .
Данный метод возвращает число от 0 до 6 (0 – воскресенье, 1 – понедельник, …, 6 – суббота).
Пример, в котором переведём день недели из числового в строковое представление:
var days =;
// получим текущую дату
var now = new Date();
// выведем в консоль день недели
console.log('Сегодня ' + days);
Получить количество миллисекунд прошедших с 01.01.1970 00:00:00 UTC в JavaScript можно с помощью метода .
Узнать разницу (в минутах) между часовым поясом локального устройства и UTC в JavaScript можно с помощью метода .
Использовать асинхронную загрузку Javascript и CSS
Браузер загружает код HTML построчно, но загрузка множества файлов Javascript может тормозить весь процесс. Для некоторых пользователей с медленным интернетом тормозить могут и файлы стилей. Чтобы браузер не останавливался на загрузке этих файлов, а продолжал подгружать остальной код, настраивают асинхронную загрузку Javascript и CSS.
Асинхронная загрузка позволит браузеру продолжать загружать основной код HTML и другие нужные ресурсы независимо от загрузки сторонних элементов.
Настроить асинхронную загрузку Javascript
Если на сайте есть видео со сторонних сервисов или другие внешние элементы, браузеру придется ждать загрузки всех элементов Javascript. Недоступное видео или другие проблемы с контентом могут вообще заблокировать загрузку сайта. Чтобы этого не произошло, используют
Friendly iFrame или асинхронную загрузку.
Создайте пустой div блок в том месте, где нужно отобразить элемент:
<div id="script_block" class="script_block"></div>
Перейдите в конец страницы и вставьте скрипт для асинхронной загрузки перед :
<div id="script_ad" class="script_ad" style="display:none;">
файл или скрипт для загрузки</div>
<script type="text/javascript">
*переместить на реальную позицию отображения*
document.getElementById('script_block').appendChild(document.getElementById('script_ad'));
*показать*
document.getElementById('script_ad').style.display = 'block';
</script>
Скрипт работает во всех современных браузерах.
Настроить асинхронную загрузку CSS
Быстрее показать страницу пользователю с медленным интернетом поможет асинхронная загрузка CSS. Рекомендуют применять ее только к вспомогательным CSS, иначе страница появится сначала вообще без стилей, а потом будет перерисовываться.
Настроить асинхронную загрузку CSS можно несколькими способами, к примеру, через «rel=preload»:
<link type="text/css" href="style.css" rel="preload" as="style" onload="this.rel='stylesheet'"> <noscript> <link type="text/css" href="style.css" rel="stylesheet" /> </noscript>
В некоторых версиях браузеров, к примеру, в Firefox 57, «preload» по умолчанию отключен, поэтому событие «onload» не сработает. Учитывайте это и догружайте данные скриптом:
Скрипт
cssrelpreload.js by loadCSS на GitHub включает поддержку rel=preload для файлов CSS файлов. Он сработает, если в браузере нет родной поддержки «preload».
Добавление пользовательского JavaScript на WordPress
Чтобы добавить собственный JavaScript-код на WordPress- сайт, нужно использовать:
- Различные типы плагинов.
- Функции и хуки WordPress в файле functions.php:
- хуки действий wp_head и wp_footer;
- хуки действий wp_enqueue_scripts, admin_enqueue_scripts и login_enqueue_scripts;
- функция WordPress wp_enqueue_script().
Чего не нужно делать
Самый простой способ добавить пользовательский скрипт в WordPress – это использовать тег <script> в файл шаблона header.php или footer.php. Но лучше этого не делать. Так как WordPress использует определенную последовательность загрузки ресурсов, которую необходимо соблюдать.
Вставка пользовательского JavaScript-кода в шаблон хедера или футера может вызвать сбои в работе тем, плагинов или ядра WordPress.
Поэтому никогда не добавляйте приведенный ниже код в файл header.php или footer.php:
<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>
