Ontwikkelen met Javascript-libraries

Een website wordt gebruikt om bepaalde doelstellingen te bereiken, bijvoorbeeld informatie verschaffen over een bedrijf, producten verkopen of sollicitaties verzamelen. Dit kan in principe basaal, met eenvoudige technieken, worden gepresenteerd. Om bezoekers echter op de site te houden, en conversies te verhogen, moet je een gebruikersvriendelijke ervaring creeeren. Naast een mooi ontwerp en een duidelijke voor zich sprekende structuur, kan je de site functioneel gemakkelijker maken via Javascript.

Javascript

Javascript is een techniek om statische content dynamisch en interactief te maken. Deze techniek is geintroduceerd door Netscape -waarvan de browser Navigator de basis zou gaan
vormen voor het huidige Firefox- in de jaren negentig en gaat dus al een tijdje mee. Andere browsers namen het over en verrijkten zo het web. Alle browsers voegden echter hun eigen functies en componenten toe, waardoor het toevoegen van Javascript-functionaliteit die in alle browsers werkt aan een site een relatief kostbare bezigheid werd.
Libraries
Om de vele eigenaardigheden in de verschillende Javascript-versies af te vangen, kwamen web developers met libraries. De ontwikkelaars van sites konden gebruik maken van deze libraries en zich richten op het maken van succesvolle websites in plaats van op het cross-browser-compatible maken van hun scripts. Daarnaast zorgen de libraries ervoor dat functionaliteit snel te programmeren is.

jQuery

Tegenwoordig zijn er veel libraries en frameworks beschikbaar, waarvan de populairste onder andere zijn: Dojo Toolkit, Prototype, mooTools, YUI Library en jQuery. De laatste wordt zeer veel gebruikt, is goed gedocumenteerd en is handig in gebruik. Sigma Solutions maakt dan ook in de sites van klanten en het WCMS Accessify gebruik van jQuery.

JQuery geeft de developer de mogelijkheid om snel functionaliteit te realiseren, door eenvoudige DOM-manipulatie, event handling, AJAX en animaties te bieden.

DOM-manipulatie

Via manipulatie van de DOM (Document Object Model) kunnen elementen op een site worden toegevoegd, aangepast of verwijderd. In native Javascript komen er steeds meer mogelijkheden bij om elementen te selecteren en te manipuleren, maar deze mogelijkheden worden nog niet door alle browsers ondersteund. Dat is een reden om gebruik te maken van jQuery.

Gegeven de volgende HTML-code:
<div class="content">
<p>Content 1</p>
</div>

<div class="content">
<p>Content 2</p>
</div>

In Javascript zou je een nieuw element kunnen toevoegen aan de site als volgt:
<script>
var content = document.getElementsByClassName('content');
var firstContent = content[0];
var extraParagraph = document.createElement('p');
extraParagraph.innerHTML = 'Content 1.1';
firstContent.appendChild(extraParagraph);
</script>

Met jQuery zou je het bovenstaande kunnen vervangen door:
<script>
$('.content:eq(0)').append('<p>Content 1.1</p>');
</script>

Er zijn voor jQuery meer manieren om elementen te selecteren en te manipuleren, bijvoorbeeld $(‘#elementID’).innerHTML(‘Tekst in element’); of $(‘a’).attr(‘rel’, ‘external’);.

In plaats van vijf regels code, heb je er maar één nodig. Dit gaat natuurlijk niet altijd op, maar door gebruik te maken van jQuery kan je werkende Javascript-code sneller in elkaar zetten. Dit is één van de redenen voor Sigma Solutions om jQuery te gebruiken, zodat meer tijd kan worden geïnvesteerd in het verhogen van het online rendement van klanten.

Events

Via events zorg je ervoor dat interactiviteit wordt toegevoegd aan een site. Door events, zoals een muisklik, af te vangen, kan je erop reageren en bijvoorbeeld extra nuttige informatie tonen. Met name Internet Explorer ging voorheen net wat anders om met events dan andere browsers, wat ervoor zorgde dat ontwikkelen langer duurde.

Met jQuery kan je snel een functie binden aan een element of reeks elementen:
<script>
    $(‘a’).bind(‘hover’, functieDieUitgevoerdWordtNaHoverOverLink);
</script>

Meer informatie

De documentatie van jQuery somt op welke mogelijkheden er naast DOM-manipulatie en het afvangen van events zijn, zoals AJAX en animaties. Ook is er een uitgebreide uitleg beschikbaar: How jQuery Works | jQuery Learning Center.