Статьи из категории HTML CSS JS

HTML CSS JS

Создание структуры web-страницы, её стилизация и добавление интерактивности

Список статей категории HTML CSS JS

JavaScript: Работа с Массивами

JavaScript: Работа с Массивами

Дата размещения статьи 30/12/2020

В JavaScript работа с массивами происходит каждый день. Данная статья будет мини шпаргалкой по наиболее полезным методам для работы с массивами в JavaScript. Содержание: length; every; some; filter; forEach; concat; join; sort; reverse; slice; splice; indexOf; lastIndexOf; map; pop; push; shift; unshift; reduce. ['K', 'L', 'M'].length // 3...

Наличие Динамически Добавленного Элемента

Наличие Динамически Добавленного Элемента

Дата размещения статьи 09/05/2020

Рассмотрим, как проверить наличие динамически добавленного элемента в DOM-дерево с помощью JavaScript. Чтобы проверить наличие динамически добавленного элемента в DOM, воспользуйтесь следующим кодом. <button type="button" class="btn">Проверить наличие элемента</button> С помощью jQuery. jQuery(($) => { $('.btn').on('click', () => { if (!$('.new-element').length == 0) { alert('Есть элемент!') } else {...

Стилизация Input File

Стилизация Input File

Дата размещения статьи 19/04/2020

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

Предзагрузка Картинок - Предварительная Загрузка Изображений на JavaScript

Предзагрузка Картинок - Предварительная Загрузка Изображений на JavaScript

Дата размещения статьи 07/03/2020

Рассмотрим, как реализовать предзагрузку изображений на нативном JavaScript, jQuery, а так же при помощи rel="preload". Это может понадобиться, например, если картинки добавляются на страницу (в DOM) динамически. Чтобы страница не прыгала, и выглядело всё достойно, необходимо чтобы изображения были предварительно загружены. На JavaScript это будет выглядеть следующим образом....

Стилизация Скролла

Стилизация Скролла

Дата размещения статьи 31/01/2020

Сегодня будем стилизовать скролл с помощью CSS для webkit браузеров (Google Chrome / Safari / Opera / Яндекс.Браузер) и Mozilla Firefox. А так же рассмотрим изменение скролла при помощи плагина mCustomScrollbar. Содержание: стилизация скролла для Firefox; стилизация скролла для остальных браузеров; кроссбраузерная стилизация с помощью плагина mCustomScrollbar; добавление...

События Формы

События Формы

Дата размещения статьи 05/01/2020

Рассмотрим основные события форм: отправка формы, очистка полей, фокус элемента формы, потеря фокуса, события для input, select, checkbox и многое другое. Содержание: события формы: отправка формы (submit); очистка формы (reset); невалидность формы (valid); события элементов формы: input, textarea; select; checkbox, radio; range. Событие отправки формы Слушать событие отправки...

Checkbox Checked - Проверка Состояния Чекбокса ✔️

Checkbox Checked - Проверка Состояния Чекбокса ✔️

Дата размещения статьи 22/12/2019

В данной статье мы разберём различные способы проверки состояния чекбоксов. Это необходимо для эффективной работы с элементами форм. Содержание: метод .is(); метод .prop(); отметить/снять (checked); деактивация чекбокса (disabled); метод .trigger() - имитация клика по чекбоксу; селектор :checked - найти все выбранные checkbox/radio; свойство .length - подсчёт количества выбранных...

JavaScript: Window Location

JavaScript: Window Location

Дата размещения статьи 30/11/2019

Объект Window.location предоставляет информацию о текущем адресе страницы (URL), позволяет реализовать обновление (перезагрузку) страницы, перенаправление браузера на другой URL и многое другое. Объект Window.location содержит следующие свойства и методы. window.location.href; window.location.protocol; window.location.hostname; window.location.port; window.location.pathname; window.location.search; window.location.hash; window.location.assign(); window.location.reload(); window.location.replace(); window.location.toString(); пример. https://only-to-top.ru/blog/coding/2019-11-30-javascript-window-location.html?name=value#hash Свойства: window.location.href → 'https://only-to-top.loc/blog/coding/2019-11-30-javascript-window-location.html?name=value#hash' .origin →...

Как Преобразовать Объект в Массив (JS)

Как Преобразовать Объект в Массив (JS)

Дата размещения статьи 23/11/2019

Рассмотрим 4 способа, как преобразовать объект в массив при помощи JavaScript. Затем преобразуем массив в объект. Исходные данные. Пусть у нас есть объект (object). const populations = { russia: 146780, ukraine: 42153, belarus: 9475 } Нам необходимо преобразовать его в массив (array). Рассмотрим 4 способа. С помощью цикла....

Как Определить Мобильное Устройство с Помощью JavaScript

Как Определить Мобильное Устройство с Помощью JavaScript

Дата размещения статьи 16/11/2019

Сегодня вы научитесь определять мобильное устройство при помощи JavaScript. Затем реализуем это при помощи «mobile-detect.js». Он может также определять операционную систему и текущий браузер, используемый пользователем. Самый простой способ определить мобильное устройство с помощью JavaScript - это извлечь строку из navigator.userAgent. Будем искать совпадения на мобильные устройства. Если...

Кнопки «поделиться» для сайта

Кнопки «поделиться» для сайта

Дата размещения статьи 01/11/2019

Рассмотрим, как добавить социальные кнопки «поделиться» для вашего сайта. Для решения данной задачи мы не будем использовать сторонние сервисы, поэтому наши кнопки «поделиться» не будут оказывать отрицательного влияния на загрузку сайта и будут стабильно работать. HTML-структура кнопок: <div class="share-btns"> <a class="facebook" rel="nofollow" href="javascript: void(0)" onClick="window.open('https://www.facebook.com/sharer.php?u=АДРЕС_СТРАНИЦЫ','sharer','status=0,toolbar=0,width=650,height=500');" title="Поделиться в Facebook"></a>...