Обычно для организации модального окна (js) используют сторонние jQuery-плагины. В общем-то это не удивительно, поскольку для этого требуется не только особая html-разметка, но и отслеживание различных событий.

На нативном JavaScript модальное окно реализуется ещё сложнее, поскольку нужно отслеживать события для открытия, закрытия окна, а также клик вне самого окна. Конечно, всё это делается в виде отдельной функции. Например так я сделал свой вариант в Berry CSS.

Кроме этого, модальное окно как правило требует css-классов, поскольку нужно особое позиционирование. Всё это приводит к тому, что в 99% случаев модальные окна создаются через дополнительные зависимости. В этом разрезе интересно будет посмотреть как Alpine.js сможет справиться с этой задачкой.

Читать дальше...

Я рассматриваю Alpine.js в первую очередь, как альтернативу jQuery, поэтому нужно разобраться как в Alpine выполнять то, что давно уже привычно в jQuery. Отправка AJAX как раз один из таких моментов.

Хочу показать несколько примеров AJAX, правда вместо привычного XMLHttpRequest(), я буду использовать fetch(). Эта возможность уже года 3 как доступна во всех браузерах. Сам по себе fetch()несложен, хотя есть разные нюансы. Я к тому, если вы не понимаете что это такое, то погуглите, информации полно.

Итак, для начала сделаем простой пример получения json-данных и выводе их на сайте.

Читать дальше...

Я давно уже присматриваюсь к Alpine.js, поскольку этот js-фреймворк разительно выделяется из ряда других. По своей сути он очень близок к Vue.js, но при этом может работать как привычный jQuery.

Основной массе разработчиков просто не нужны все те «фишки», что предлагают React или Vue. Вообще работа с JavaScript всегда происходит по одному алгоритму — вначале получили элемент/элементы на странице, после делаем с ними какие-то манипуляции.

Точно также работает и система событий — прописали либо onclick к нужному html-элементу, либо навесили событие через «слушатель» addEventListener и дальше через js-функцию делаем что нужно. Поскольку JavaScript очень уж многословен, а во многих случаях и неочевиден, то и возникли библиотеки функций — jQuery как раз одна из них. С их помощью работать с js намного приятней.

Читать дальше...