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

20

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

Користувачі, відвідуючи веб-ресурси, часто зустрічають на них цікаві нестандартні рішення і хочуть зробити подібне на своїх сайтах. Найчастіше такі рішення пов’язані з використанням JavaScript.

У даній статті я розповім вам про JavaScript — скриптовом мовою, призначеному для створення інтерактивних веб-сторінок, і про те, що можна робити за допомогою JS. Ми розглянемо приклади використання JavaScript і дізнаємося, чим він може бути нам корисний.

Що можна робити, використовуючи JavaScript?

Редагувати сторінку, писати на ній текст, додавати і видаляти теги, змінювати стилі елементів.

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

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

Встановлювати і зчитувати cookie, валідувати дані, виводити повідомлення і багато іншого.
Наприклад, при першому відвідуванні сайту користувачеві показується попап-вікна та встановлюється cookie. А при наступних відвідинах цього ресурсу попап-вікна не показується, бо cookie вже встановлені.
Також можна перевіряти коректність введеного e-mail, перевіряти на відповідність потрібного формату введений номер телефону і відразу виводити повідомлення про правильність чи неправильності введених даних.

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

Приклади використання JavaScript

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

Галереї

Слайдери

Сайти з незвичайною паралакс-прокруткою

Анімовані графіки

Таби

Незвичайні ковзні меню

Сортування таблиць

Автозаповнення полів форм

Комбінації різних ефектів

Створення інтерактивних елементів

і багато іншого…

Звичайно, галерея, представлена в прикладі, — не єдина. Подібних галерей, як і всього іншого, що можна було уявити сотні. І я, щоб не роздувати список до безкінечності, привів по одному прикладу з найбільш популярних груп скриптів.

Що це дає нам?

1. Зручна багаторівнева навігація

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

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

У багатьох інтернет-магазинах є бічна випадає навігація. Розглянемо для прикладу shop.by. Уявіть, наскільки б вона розтягнулася вниз, якщо б підпункти не випадали з наведення або по кліку, а було видно все відразу!

2. Використання галерей і слайдерів дає нам можливість показати фотографії, картинки додаткових видів товарів, зручно і компактно розташувати портфоліо фотографа.

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

Скільки знадобилося б місця для галереї, представленої на зображенні нижче?

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

3. Останнім часом в бічних колонках сайтів відображається дуже багато віждетов. Це віджети популярних соціальних мереж, категорій, архівів записів, календарів, останніх коментарів на блозі, популярних записів і багато чого іншого.

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

Але що робити, якщо все-таки потрібно компактно вмістити багато віждетов?

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

Тут на допомогу приходить рішення JavaScript з «табами».

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

Наприклад, в один «таб» можна розташувати віджети соціальних мереж, у другій — категорії та архіви і т. д. Це дозволить заощадити місце і зробить сайт більш зручним для використання.

4. Використовуючи JavaScript, можна також істотно поліпшити сторінку контактів для вашого сайту або сайтів ваших клієнтів.

вбудувати підказки в поля форм;

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

надіслати дані форми без перезавантаження сторінки;

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

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

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

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

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

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

Все це може зробити сайт більш зручним для відвідувачів, більш інтерактивним, більш технологічним.

Висновок

Як бачимо, область застосування JavaScript дуже широка. Це і галереї, і слайдери, і таби, і всілякі інтерактивні елементи, карти, графіки, робота з формами та багато-багато іншого.

Я думаю, що кожен для себе може знайти корисне застосування JavaScript і використовувати на своїх сайтах або сайтах своїх клієнтів.

Сподіваюся, стаття вам сподобалася, і ви дізналися з неї про нові можливості, які можна реалізувати завдяки JS.

А ви використовуєте JavaScript на своїх сайтах? Які у вас основні труднощі при використанні JavaScript?

Розкажіть про це в коментарях до статті.

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