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