Het web interactief maken Een inleiding tot jQuery

jQuery is een client-side scripting-bibliotheek die bijna elke moderne website gebruikt - het maakt websites interactief. Het is niet de enige Javascript-bibliotheek, maar het is de meest ontwikkelde, meest ondersteunde en meest gebruikte. Het is een van de bouwstenen van elke moderne website. Maar wat is jQuery precies, wat maakt het zo populair, en waarom zou u er om geven als u begint als een webontwikkelaar??

Wat is jQuery?

jQuery is een uitbreiding van Javascript, een bibliotheek met Javascript-functies en hulpprogramma's die visuele flair toevoegen en geavanceerde functies eenvoudig te implementeren maken in slechts enkele regels code. Het wordt ondersteund in browsers en open source. Bovendien kunt u de jQuery-functionaliteit uitbreiden met eenvoudig te gebruiken plug-ins.

jQuery is gebouwd op de top van Javascript, maar het voegt methoden en functionaliteit toe die niet te vinden zijn in pure Javascript. Het is gemaakt om het Javascript-gebruik te vereenvoudigen en de problemen met verschillende Javascript-implementaties in verschillende browsers weg te nemen. Met jQuery kunt u slechts één keer schrijven en jQuery zal uw code correct interpreteren voor elke browser.

De hoofdfunctie van jQuery is voor DOM-manipulatie (DOM is het document-objectmodel) en dit betekent de onderliggende structuur van elke webpagina die u bezoekt. Elk ding dat je op de pagina ziet - en veel dingen die je niet ziet - worden weergegeven in de DOM.

jQuery is niet de enige Javascript-bibliotheek die er is, maar het is het meest populair - ongeveer 55% van de top 10.000 websites gebruiken het. Prototype, MooTools en Scriptaculous zijn populaire alternatieven, maar lang niet zo goed ondersteund.

Clientzijde versus serverzijde

De meeste webpagina's worden aan de serverzijde gegenereerd - MakeUseOf gebruikt PHP en MySQL (in de vorm van WordPress) om de artikelgegevens op te halen uit een database en vervolgens een sjabloon op die gegevens toe te passen. De resulterende pagina wordt naar uw browser verzonden, geïnterpreteerd en aan u getoond. Als u op een koppeling klikt, wordt er een ander verzoek naar de database gemaakt en wordt er nog een pagina gegenereerd. Maar wat als u een soort interactiviteit op de pagina wilt creëren? Een formulier dat controleert wat de gebruiker typt (zoals Twitter, dat telt hoeveel letters je nog hebt), een knop die een dialoogvenster opent of misschien wat meer gegevens wil laden zonder de hele pagina opnieuw te laden?

Dit is waar client-side scripting komt in het spel. Dat is waar de client - uw browser - het zware werk doet. De meeste websites, inclusief deze, gebruiken een beetje van beide.

Waarom jQuery gebruiken?

Visual Flair

Met jQuery kunt u delen van de webpagina wijzigen als reactie op acties van gebruikers. Als een snel voorbeeld, klik op deze link - elke link op de pagina zal dat doen verander naar rood. Nutteloos? Misschien, maar je begrijpt het wel. Afbeeldingendiavoorstellingen zijn een veelgebruikt gebruik van jQuery. Het balanceren van zinloze visuele effecten en echt nuttige toevoegingen aan de gebruikerservaring maakt deel uit van de vaardigheid om een ​​webontwikkelaar te zijn.

Hier is een snelle lijst met enkele echt geweldige effecten die je kunt bereiken.

Gemakkelijke evenementen

Bijna alle software werkt op een gebeurtenismodel - klik ergens op en een klikgebeurtenis wordt geactiveerd. Sleep met je vinger over een tablet en een sleepgebeurtenis wordt geactiveerd. toepassingen “luister” voor deze evenementen en doe iets - jQuery laat je dit doen in een browser.

Voer AJAX eenvoudig uit

Asynchrone Javascript en XML is een manier om met een externe server te communiceren zonder een andere pagina te hoeven laden. Een goed voorbeeld hiervan is de Facebook-statusstroom. Probeer door al je updates te scrollen totdat je helemaal onderaan bent. Dat kan niet. Zodra je het einde bereikt, detecteert jQuery dat je in de buurt bent en verzendt een AJAX-aanvraag voor meer statussen om weer te geven.

Vervolgens worden ze geïnjecteerd in de huidige pagina, zonder dat je het je realiseert. Je krijgt een oneindige stroom updates, maar ze zijn niet allemaal bij de start geladen.

Geavanceerde gebruikersinterfaces

Samen met de kern-plugin van jQuery UI, kunt u complete webtoepassingen bouwen met behulp van standaard formuliercomponenten; voortgangsbalken, schuifregelaars, knoppen, tabs, slepen en neerzetten - het is er allemaal. Met een eenvoudig thema-systeem kunt u het uiterlijk aanpassen en kunt u een van de standaardinstellingen gebruiken.

Zou ik moeten geven?

Als u interesse hebt in het ontwikkelen van websites Welke programmeertaal om te leren - Webprogrammering Welke programmeertaal om te leren - Webprogrammering Vandaag gaan we de verschillende webprogrammeertalen bekijken die het internet voeden. Dit is het vierde deel in een beginnersprogrammaserie. In deel 1 leerden we de basis van ... Lees meer, ja - jQuery is iets dat je beslist moet leren. Als je het jezelf ooit hebt afgevraagd “Hoe kan ik X doen Y doen wanneer de gebruiker Z doet?”, dan zal je van jQuery gaan houden. Toevoegen aan uw site is net zo eenvoudig als het toevoegen van een link ernaar in de kop; of WordPress vertellen om het te laden.

Wil je jQuery leren? Laat het ons weten in de comments en ik zal zien wat ik kan doen.

Afbeeldingscredits: dynamisch draaiend reclamebord gemaakt met jQuery, PistolSlut.com, diagram gemaakt met jQuery