Развитието на уеб технологиите в днешни дни е силно повлияно от постоянно растящите изисквания и очаквания на потребителите. Притежаването на интерактивен, въздействащ и модерен сайт вече се приема като задължително условие за успешно онлайн присъствие.
В първите години на уеб информацията е представяна предимно като текст. Днес обаче потребителите искат повече – изображения, анимации, аудио, видео клипове, онлайн чатове, инфографики, слайдове и други.
Една от уеб технологиите, с които можете да направите вашия сайт модерен и да създадете изключително потребителско изживяване, е 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?
Библиотеката представлява един .js файл, който може да се свали от сайта на jQuery https://jquery.com и да се запише в папката на уеб проекта. След това е необходимо да се вмъкне в кода на сайта:
<head>
<script type="text/javascript" src="jquery.min.js"></script>
</head>Може да се включи към уебсайта директно чрез линк към .js файла. Какъв е линкът можете да видите на следния адрес: https://developers.google.com/speed/libraries.
<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
