Чем дальше web, тем больше JavaScript-а

Чем дальше web, тем больше JavaScript-а

От автора: «Что нужно знать, чтобы реализовать такое, как тут (ссылка)?» — именно такой вопрос часто встречается на нашем форуме в службе поддержки или приходит к нам на e-mail.

Пользователи, посещая всевозможные веб-ресурсы, часто встречают на них интересные нестандартные решения и хотят сделать подобное на своих сайтах. Чаще всего такие решения завязаны с использованием JavaScript.

В данной статье я расскажу вам о JavaScript — скриптовом языке, предназначенном для создания интерактивных веб-страниц, и о том, что можно делать с помощью JS. Мы рассмотрим примеры использования JavaScript и узнаем, чем он может быть нам полезен.

Что можно делать, используя JavaScript?

Изменять страницу, писать на ней текст, добавлять и удалять теги, менять стили элементов.

Реагировать на события: скрипт может ждать, пока что-нибудь случится (клик/наведение мыши, окончание загрузки страницы) и реагировать на это выполнением функции.
Например, по наведению мыши на ссылку или картинку можно показывать всплывающую подсказку. По клику мыши можно переключать содержимое блока. По окончании загрузки страницы — показывать рекламное попап-окно. Можно изменять внешний вид страницы в зависимости от времени суток.

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

Устанавливать и считывать cookie, валидировать данные, выводить сообщения и многое другое.
Например, при первом посещении сайта пользователю показывается попап-окно и устанавливается cookie. А при последующих посещениях этого ресурса попап-окно не показывается, потому что cookie уже установлены.
Также можно проверять корректность введенного e-mail, проверять на соответствие нужному формату введенный номер телефона и сразу выводить сообщение о правильности или неправильности введенных данных.

Примеры использования JavaScript

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

Конечно, галерея, представленная в примере, — не единственная. Подобных галерей, как и всего остального, можно было представить сотни. И я, чтобы не раздувать список до бесконечности, привел по одному примеру из наиболее популярных групп скриптов.

Что это дает нам?

1. Удобная многоуровневая навигация

Использование JavaScript позволяет делать компактными многоуровневые меню, многоуровневую навигацию в side-bar-ах. Подпункты меню открываются либо по клику, либо по наведению мыши.

Во многих интернет-магазинах есть боковая выпадающая навигация. Рассмотрим для примера shop.by. Представьте, насколько бы она растянулась вниз, если бы подпункты не выпадали по наведению или по клику, а были видны все сразу!

2. Использование галерей и слайдеров дает нам возможность показать фотографии, картинки дополнительных видов товаров, удобно и компактно расположить портфолио фотографа.

Особенно галереи актуальны для детального просмотра товаров в интернет-магазинах, когда нужно показать различные виды товара. С их помощью мы можем показать пользователю в небольшом блоке сразу все изображения, предоставив для просмотра как маленькие изображения, так и увеличенные.

Сколько бы понадобилось места для галереи, представленной на картинке ниже?

3. Последнее время в боковых колонках сайтов отображается очень много виждетов. Это виджеты популярных социальных сетей, категорий, архивов записей, календарей, последних комментариев на блоге, популярных записей и много чего другого.

Нужно отметить, что на многих сайтах часть виджетов можно просто удалить, потому что никакого смысла от них нет, а место они занимают.

Но что делать, если все-таки нужно компактно вместить много виждетов?

Тут на помощь приходит решение JavaScript с «табами».

С их помощью можно хорошо вместить все виджеты в боковых колонках сайта. Для лучшего восприятия можно группировать виджеты в «табы».

Например, в один «таб» можно поместить виджеты социальных сетей, во второй — категории и архивы и т.д. Это позволит сэкономить место и сделает сайт более удобным для использования.

4. Используя JavaScript, можно также существенно улучшить страницу контактов для вашего сайта или сайтов ваших клиентов.

встроить подсказки в поля форм;

проверять вводимые в поля форм данные и выводить сообщения об ошибках;

отправлять данные формы без перезагрузки страницы;

разместить карту с маршрутом.

5. Для тех, кто размещает на сайте табличные данные, очень полезным будет использование сортировки данных в таблице.

6. Тем, кто размещает на сайте какую-либо статистику в виде графиков и диаграмм, очень пригодится возможность создавать на JavaScript интерактивных диаграмм и графиков.

Также, используя JavaScript, можно делать всевозможные эффекты на сайте — такие как плавное выскальзывание элементов, их перемещение, постепенное появление и исчезновение и все то, на что хватит вашей фантазии.

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

Заключение

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

Я думаю, что каждый для себя может найти полезное применение JavaScript и использовать на своих сайтах или сайтах своих клиентов.

Надеюсь, статья вам понравилась, и вы узнали из нее о новых возможностях, которые можно реализовать, благодаря JS.

А вы используете JavaScript на своих сайтах? Какие у вас основные трудности при использовании JavaScript?

Расскажите об этом в комментариях к статье.

P.S. «Чем дальше web, тем больше JavaScript-а».

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (10)

  1. solders

    Ребята, курс будет практический или в основном больше по теоретическим аспектам? Меня лично интересует именно практика, поскольку теоретически и я JavaScript знаю не плохо. Очень хотелось чтобы в курсе был сделан упор именно на практическую разработку интерфейсов и прочего, а не просто был приведен и рассмотрен набор методов и свойств, на высосанных из пальца примерах, которые к реальной жизни ничего общего не имеют. Нужна практика и чем больше, тем лучше!

    • Виктор Гавриленко

      Здравствуйте!
      Курс по JavaScript&jQuery — это теоретический курс, включающий в себя ряд практических занятий по изучению языка web-программирования JavaScript и фреймворка, написанного на нем — jQuery.
      То есть в курсе практически для каждого урока подготовлено домашнее задание — для закрепления полученных знаний. Примеры заданий различны, как от простейших, так и до более сложных — с применением рекурсий и создания собственной анимации.

  2. Валерий

    Денег не жалко за классически созданный курс по JS-от простого к сложному,подробная методика использования методов JS в конкретных практических примерах, возможные ошибки — их устранение и экзамен. Благодарю за внимание! Удачи всем!!!

  3. Виктор

    Скажите, что нибудь по HTML5 и CSS3 и верстке с использованием этих технологий, планируется, какой-нибудь полноценный курс?

  4. Борис

    Вам бы здесь дать ссылки на другие статьи по практике использования JS. Реальные коды и примеры

  5. Serge78rus

    Реальные примеры использования javascript для отображения динамических SVG мнемосхем можно посмотреть на сайте svgmnemo.ru

  6. Serge78rus

    Отрисовка различных динамических гаджетов (часов, графиков и тд) javascript-ом: jsgadget.ru

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree