JavaScript статьи и уроки по веб-программированию - Страница 2 из 4

Живой поиск jQuery

Живой поиск jQuery

Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek.

Как конвертировать HTML в Word на JavaScript

Как конвертировать HTML в Word на JavaScript

Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда HTML-файл прост без какой-либо сложной разметки, тогда можно экспортировать HTML-содержимое в формат .doc без особых усилий. Мне даже не нужны сторонние библиотеки. Если вы хотите преобразовать HTML в документ Word, без плагинов или библиотек простым JavaScript-кодом, тогда читайте эту статью.

Сохранение данных в форме после обновления страницы

Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность хранить строковые значения в локальных или сеансовых переменных. Переменная localStorage может сохраняться между сеансами и может иметь любой размер. Это похоже на cookie, но имеет гораздо меньше ограничений.

В этом руководстве мы будем использовать механизм localStorage для хранения текущего состояния формы. Это означает, что когда страница перезагружается или пользователь повторно открывает страницу после ее закрытия, форма заполняется предыдущими значениями. Для повышения сложности мы будем хранить данные в виде сериализованных строк JSON.

Как создать таймер обратного отчёта на чистом JavaScript

Как создать таймер обратного отчёта на чистом JavaScript

Вам не обязательно нужен jQuery для добавления таймера обратного отсчета на ваш сайт. Требуется всего несколько строк JavaScript для создания настраиваемого таймера, который ведет обратный отсчет до предварительно определенной даты и времени. Вы можете встроить таймер на несколько видов страниц, таких как страницы «Скоро в продаже» и «Техническое обслуживание», магазины электронной коммерции, лендинг пейдж, веб-сайты ежедневных сделок и страницы регистрации событий.

В этой статье шаг за шагом создадим таймер обратного отсчета, чтобы вы могли все понять. Вы можете найти весь код JavaScript в конце статьи.

Chart.js примеры создания диаграмм и графиков

Chart.js примеры создания диаграмм и графиков

Если у вас есть насыщенный информацией веб-сайт или приложение, вы можете визуализировать свои данные, чтобы пользователи могли лучше понять их. Хотя таблицы могут быть весьма полезны в некоторых случаях, таких как таблицы сравнения цен и характеристик, другие виды информации легче обрабатывать с помощью некоторой визуализации данных. Библиотеки JavaScript, такие как Chart.js, позволяют создавать различные типы диаграмм HTML5, такие как линейные, барные, круговые, кольцевые диаграммы, графики и многое другое.

Chart.js — это универсальная библиотека, которая позволяет создавать диаграммы JavaScript за пару минут. Она имеет много опций, с помощью которых вы можете настроить все аспекты ваших графиков. В этой статье мы рассмотрим, как настроить библиотеку Chart.js, какие у вас есть варианты и чего вы можете достичь с помощью нее. Мы также создадим две диаграммы: гистограмму, показывающую ожидаемую продолжительность жизни в шести странах, и круговую диаграмму, показывающую рекомендуемый дневной рацион.

Кастомный виджет переводчик для сайта с флагами

Кастомный виджет переводчик для сайта с флагами

Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный виджет так же продолжает работать, и вы можете пользоваться им на ваших сайтах и модернизировать его по своему вкусу.

Графики, диаграммы и многое другое на сайте с помощью Google Charts

Графики, диаграммы и многое другое на сайте с помощью Google Charts

Google Charts предоставляет идеальный способ визуализации данных на вашем сайте. От простых линейных диаграмм до сложных иерархических древовидных карт галерея диаграмм предоставляет большое количество готовых типов диаграмм.