Развитието на уеб технологиите в днешни дни е силно повлияно от постоянно растящите изисквания и очаквания на потребителите. Притежаването на интерактивен, въздействащ и модерен сайт вече се приема като задължително условие за успешно онлайн присъствие.

В първите години на уеб информацията е представяна предимно като текст. Днес обаче потребителите искат повече - изображения, анимации, аудио, видео клипове, онлайн чатове, инфографики, слайдове и други.

Една от уеб технологиите, с които можете да направите вашия сайт модерен и да създадете изключително потребителско изживяване, е JavaScript библиотеката jQuery.

Смисълът на jQuery е да се пише по-малко JavaScript код, но и да се постигат по-добри резултати. jQuery добавя нови възможности към JavaScript. С jQuery се създават лесно ефектни навигационни менюта, слайдери, галерии и други.

Какво е JavaScript?

JavaScript е скриптов език за програмиране, чрез който статичната уеб страница може да се „раздвижи“. Динамичният елемент в даден сайт може да бъде в промяна на съдържанието, което се визуализира на уеб страницата при действие от страна на потребителя. Чрез JavaScript може да се влияе на DOM дървото на съдържанието в уеб страницата.

JavaScript се използва, освен за създаване на интерактивни уеб страници, но и за разработка на игри, мобилни приложения и уеб приложения, които работят и се изпълняват от страна на сървъра. Една такава технология, позволяваща изпълнението на JavaScript код директно на сървъра е Node.js. Едно примерно приложение, създадено изцяло на JavaScript и работещо на сървъра, е блог платформата Ghost.

Създателят на JavaScript е Брендан Ейч. Той е съосновател и на проекта Mozilla като до скоро е негов главен изпълнителен директор.

През 1995 година JavaScript уеб технологията се появява за първи път в уеб браузъра Netscape Navigator 2.0.

С добавянето на JavaScript в уеб браузъра, вече е възможно статичният HTML код в уеб страницата да се променя динамично.

JavaScript кодът се изпълнява в уеб браузъра с помощта на JavaScript интерпретатор/двигател (JavaScript engine). Фаловете, в които се съдържа JavaScript код, са с разширение .js.

Съществуват и други уеб технологии като Flash и Silverlight, които се използват за добавяне на динамичност в сайта, но JavaScript изпъква и продължава да бъде предпочитана от разработчиците.

Около 97% от най-популярните 10 милиона уебсайта в уеб ползват JavaScript.

Библиотеки на JavaScript

JavaScript библиотеката представлява предварително написан JavaScript код. Библиотеката може да се ползва, когато е необходимо да се включи някаква функционалност в уебсайта. Вместо да се изгражда от нулата, се ползва вече създадена библиотека, която предлага точно тази функционалност.

Библиотеките подобряват и намаляват времето за разработка на уеб проекта.

Какво е jQuery?

jQuery беше една от най-известните библиотеки на JavaScript, поне до края на 2018 г. (Google Trends). Нейният създател е Джон Резиг, а през 2006 година е пусната официално в Интернет.

Библиотеката е проектирана да улесни и опрости писането на JavaScript код, като едновременно с това е гъвкава и може да се надгражда с допълнителни плъгини.

Библиотеката се поддържа от всички съвременни версии на уеб браузърите.

За разработването на приложения и уеб сайтове, които ще се ползват през мобилни устройства, може да се ползва jQuery Mobile . Мобилната версия на jQuery се поддържа от множество мобилни платформи.

За мобилната версия на уебмейл клиента Horde също е ползван jQuery Mobile.

Някои от плюсовете на специално създадената мобилна версия на jQuery:

• Широка поддръжка от мобилни устройства и уеб браузъри. С jQuery Mobile е почти сигурно, че всеки ще може да достъпи сайта ви през мобилно устройство. Благодарение на някои от подобренията в jQuery Mobile, вече може да се предостави уеб документ с най-основни HTML елементи, на мобилно устройство, което не може да обработи CSS и Ajax.
• Елементите от уеб страницата като форми за попълване, радио бутони, слайдери и други, са по-достъпни за устройствата с тъч скрийн. С jQuery Mobile е възможно съвсем лесно да маркирате един единствен чекбокс, без да е необходимо да увеличавате страницата.
• Responsive (адаптивен) дизайн. Всички елементи на уеб сайта като таблици, текст и други, са проектирани с гъвкав дизайн, така че да се визуализират перфектно при различните резолюции на мобилните устройства.

Примери за елементи на jQuery Moblie:

• Преминаване от един елемент към друг, с ефекти
  http://view.jquerymobile.com/master/demos/transitions
• Форми: полета, менюта, радио бутони и други
  http://view.jquerymobile.com/master/demos/forms-gallery
• Теми за мобилния дизайн
  http://view.jquerymobile.com/master/demos/theme-classic

Как се използва jQuery?

Библиотеката представлява един .js файл, който може да се свали от сайта на jQuery https://jquery.com и да се запише в папката на уеб проекта. След това е необходимо да се вмъкне в кода на сайта:

<head>
<script type="text/javascript" src="jquery.min.js"></script>
</head>

Може да се включи към уебсайта директно чрез линк към .js файла. Какъв е линкът можете да видите на следния адрес: https://developers.google.com/speed/libraries/devguide#jquery.

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

Как работи jQuery: https://learn.jquery.com/about-jquery/how-jquery-works

Плъгини за jQuery

С плъгините се разширяват възможностите на jQuery библиотеката. Съществуват плъгини, написани от екипа на jQuery или от независими разработчици.

С плъгините на jQuery можете да добавите различни функционалности и екстри към сайта и елементите в него. Някои от най-търсените функционалности са: форми, анимация, картинни слайдери, адаптивен дизайн и други.

Официалната колекция от плъгини: https://plugins.jquery.com

При избора на подходящ плъгин обърнете внимание на това, дали има богата помощна информация и дали се предлага поддръжка или контакт с разработчика.

Плъгините се включват в сайта както библиотеката jQuery. Първо се сваля файлът, записва се в папка и след това се включва в сайта. Например:

<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="plugins.jquery.js"></script>
</head>

Няколко ефектни плъгина:

• Slick - слайдер
  https://plugins.jquery.com/slick (https://kenwheeler.github.io/slick)
• Избор на цвят от цветова палитра
  https://www.virtuosoft.eu/code/jquery-colorpickersliders
• Подреждане, филтриране, категоризиране на елементи и др.
  https://vestride.github.io/Shuffle
• Слайдери за изображения
  https://wowslider.com/demo.html
• Функционални подсказки
  https://amsul.ca/shadow-ui/demos/tooltip