Libraries
JavaScript is in feite een kleine taal. Dit wil zeggen dat er weinig mogelijkheden zijn en dat we allerlei functies moeten schrijven als we complexere dingen willen doen. Eigenlijk is JavaScript zo klein dat we ondertussen al het meeste hebben besproken. In tegenstelling tot Java of .Net of Cocoa heet het geen honderden ingebouwde bibliotheken met duizenden objecten om uit te kiezen en te gebruiken.
We zijn dan ook op ene punt gekomen dat we veel code moeten schrijven om complexe dingen te doen. En misschien hebben andere mensen dit ook al moeten doen, en hebben ze zelfs exact hetzelfde moeten schrijven. En het goede is dat deze mensen deze code zelfs reeds online hebben gezet in een vorm van een bibliotheek van functies en objecten.
Een 'library' of bibliotheek is niets anders dan JavaScript code die door andere mensen werd geschreven zodat wij dat niet meer moeten doen. Er zijn er veel online te vinden en de belangrijkste sommen we even op:
Deze 'libraries' zijn inzetbaar voor een heel breed spectrum van doeleinden. Zo bezitten zij heel wat functies om door de DOM te kunnen navigeren, ze hebben code voor 'cross browser detection' zodat het makkelijker wordt om met events te werken, zonder rekening te moeten houden met de specificaties van de verschillende browsers. Ze maken het makkelijker om bijvoorbeeld informatie van een server op te vragen, en als die er dan is, de pagina te updaten. Dit laatste wordt AJAX genoemd.
Om deze libraries te gebruiken, kan je ze makkelijk downloaden van hun respectievelijke websites, volledig of geminifiëerde versies zijn altijd wel aanwezig. Het is gewoon JavaScript, dus je linkt er ook naar zoals je altijd naar script.js hebt gelinkt. Je had het ook zelf kunnen schrijven, maar dat had maanden kunnen duren.
De laatste 3 maken deel uit van het huidige idee van het gebruik van 'frameworks' die het opzetten van Single Page Applications (SPA) en Progressive Web Apps (PWA) te vergemakkelijken. Dit is in 2017 het neusje van de zalm. Om ze te kunnen gebruiken moeten we onszelf een heel andere mindset van website ontwikkeling aanleren. We hebben ook meer nodig dan alleen de kennis van HTML, CSS en JS.
jQuery wordt anno 2017 nog gebruikt. Daarom bekijken we deze library even van dichterbij.
Werken met meerdere JavaScript bestanden
Eerder werd vermeld dat om een library te gebruiken je een link moet leggen naar dat bestand. Meestal die je dit onderaan, net voor de sluitende body-tag. Meestal vind je hier meerdere script- tags; je eigen code, gelinkte libraries maar bijvoorbeeld ook een link naar Google Analytics JavaScript.
Toch moeten we twee dingen goed voor ogen houden als we dit doen. Je moet proberen er zo weinig mogelijk te gebruiken en de volgorde is van belang.
Waarom het minimum? Omdat je webpagina steeds wanneer het een link ziet naar een script bestand, dit bestand gaat halen en wacht tot dit volledig binnen is eer die het volgende gaat halen. Hij gaat de JavaScript bestanden dus nooit tegelijk van de server halen, maar één voor één. En dat wil zeggen, hoe meer bestanden de pagina moet halen, hoe meer aanvragen er moeten gebeuren aan de server, hoe trager je web pagina wordt. Dus terwijl het misschien makkelijk en overzichtelijker is voor ons om meerdere kleine bestanden te laden tijdens het schrijven van je JavaScript, is dat het zeker niet voor de bezoeker van je pagina. Het is dan ook de bedoeling dat je zoveel als mogelijk je JavaScript bestanden combineert tot één bestand. Maar dat is moeilijker gezegd dan gedaan.
Ten tweede is de volgorde van belang. Als je JAvaScript bestand heeft dat een functie nodig heeft uit een ander JavaScript bestand, dat op dat moment nog niet geladen is, loopt je code vast en gebeurt er niets. Je moet er voor zorgen dat die JavaScript bestanden waar andere van afhangen, eerst geladen worden. Dit is zeer gebruikelijk met libraries. Als je bijvoorbeeld jQuery gebruikt, is het nodig deze eerst te laden, alvorens je je eigen code laadt.
Introductie jQuery
jQuery is de meest populaire JavaScript library die er momenteel bestaat. Het maakt JavaScript makkelijker;
- makkelijker om de DOM te inspecteren en te manipuleren,
- makkelijker om events te gebruiken,
- makkelijker om met animaties te werken,
- laat toe, wat we tot hiertoe geleerd hebben, te bereiken met minder code
Hoe gebruiken we dit? Wat we allereerst nodig hebben is het script dat te vinden is op jQuery.com. Je kan de volledige of de geminifiëerde code downloaden en die een goede plaats te geven binnen onze website. Deze code werkelijk gebruiken doen we door onderaan in onze HTML-pagina een link te maken naar dit JavaScript bestand.
<script src="libraries/jquery-1.6.1.min.js" />
Wees er natuurlijk wel zeker van dat je dit script laadt vooraleer je je eigen scripts laat uitvoeren die gebruik maken van jQuery.
Laat ons beginnen met een simpel voorbeeld om duidelijk te maken wat jQuery is en hoe je het schrijft.
document.querySelector("#myDiv").className = "highlight";
Op deze manier hebben we steeds een element opgeroepen en aangepast. Wat we hier doen is de div met naam myDiv een CSS class geven die de naam hightlight draagt. Met jQuery zouden we het volgende schrijven om exact hetzelfde te bereiken:
jQuery("#myDiv").addClass("highlight");
Let op het hekje (#) in de code. Dit geeft aan dat het hier om een id van een element gaat. Net zoals bij een querySelector(). We kennen deze schrijfwijze ook vanuit CSS. Op dezelfde manier kunnen we ook andere elementen selecteren. We noemen dit dan ook de 'selector'.
jQuery(".someClass"); //haalt alle elementen op met class="someClass"
jQuery("p"); //haalt alle p tags op
Het grote voordeel hier is dat we ons niet langer hoeven af te vragen of we een element willen selecteren via zijn id, zijn tag, zijn... jQuery lost dat voor ons op, we hoeven alleen de selector juist te omschrijven. We kunnen die trouwens nog verder uitbreiden:
jQuery("p.description");
//haalt alle p tags die de class="description bevatten
De selector zelf kan nog verder uitgebreid worden via :first, :last, :contains(), :visible, ... Deze laten nog betere selectie toe.
Na het selector gedeelte, zeggen we wat we willen doen met dat geselecteerde element. Welke actie we er op willen uitvoeren. In bovenstaande voorbeeld hebben we addClass gebruikt, maar er zijn nog veel meer ene erg handige acties.
Je kan jQuery nog korter schrijven. Je kan het woord jQuery vervangen door een dollarteken $. Dit teken intijpen is net hetzelfde als jQuery tijpen. Niets magisch aan, wel veel korter.
jQuery(selector).action(parameters);
wordt dan
$(selector).action(parameters);
Buiten alleen een CSS class toevoegen, kunnen we nog meer acties gebruiken. Zo zijn er bijvoorbeeld ook de nodige animatie acties zoals hide(), fadeIn(), fadeOut(), ... Ook het gebruik van events wordt eenvoudiger.
$("#pageID").click(function() {
$("#pageID").text("You've clicked me!");
});
In dit voorbeeld selecteren we de id pageID, hangen er een onClick event aan via de jQuery actie click(). Bij een klik op dit element, veranderen we de tekst via de jQuery actie text() en niet langer via innerText(). Je ziet dat de schrijfwijze al korter wordt, doch moeilijker leesbaar.
We zijn reeds gewoon van window.onload() te gebruiken om na te kijken of een pagina volledig geladen is om er dan onze JavaScript code op toe te passen. Een nadeel is als we dit verschillende keren doen, het enkel de laatste onload() opdracht is, die wordt uitgevoerd. Bij jQuery is dat niet het geval. We gebruiken het onderstaande zoveel we willen.
$(document).ready(function() {
$("#pageID").text("The DOM is fully loaded");
});
Natuurlijk trachten we dit te beperken tot een minimum om onze code leesbaar te houden.
jQuery is natuurlijk veel groter dan enkel deze voorbeelden. Bekijk dan ook de documentatie op de website van deze veelzijdige library.
Gebruik een CDN
We hebben gezien dat het eenvoudig is om de jQuery library te downloaden en te gebruiken. Maar het kan nog eenvoudiger, door iemand anders het voor ons te laten doen. Microsoft, Google, maar ook andere bedrijven, laten je toe te linken naar de jQuery en andere libraries via Content Distribution Networks. Dit zijn geografisch verdeelde servers met loadbalancing en failover protection die deze libraries hosten. Op deze manier is het veelal sneller voor de gebruiker om die servers te gebruiken in plaats van de server waar jou website gehost wordt. En het is gratis op de koop toe.
Het enige wat je hoeft te doen is in je HTML code een link leggen naar de CDN van je keuze en te zeggen welke library je nodig hebt.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Gebruik maken van een CDN heeft een aantal voordelen voor je website. Hij wordt sneller, gebruikt minder bandbreedte van de server waar je website staat en het parallel downloaden van je web browser wordt verbeterd.
Sneller
Als je een web pagina wil bekijken, zal alle informatie opgehaald worden van je server. Informatie zoals de HTML pagina en de CSS informatie. Tevens worden de externe JavaScript bestanden geladen. Al deze dingen worden door je browser automatisch in je cache opgeslagen zodat een tweede bezoek aan diezelfde web pagina niet terug opnieuw van de server moeten worden gehaald, maar van je eigen harde schijf.
Vermits de jQuery library op veel sites wordt gebruikt is het handig dat je die apart in je cache zou kunnen opslaan. Dit kan enkel door gebruik te maken van een CDN voor deze library. Als een andere web pagina opent, die tevens gebruik maakt van jQuery, dan hoef je voor die die web pagina enkel de HTML en CSS gegevens op te halen, de jQuery library staat reeds in je cache en wordt sneller ingelezen.
Minder bandbreedte
Als elke pagina van je website opnieuw de jQuery library moet gaan downloaden van je server, is dat eigenlijk verspilde bandbreedte. Als je gebruik maakt van een CDN kan je steeds gebruik maken van de jQuery library die in je cache staat.
Parallel downloaden
Bijna alle browser hebben een ingebouwd maximum van wat ze van één domein (web server) te samen kunnen downloaden. Dit doet men omdat grote websites de web servers niet zouden overladen met aanvragen tot downloaden. Meestal kan je maar 4 tot 10 CSS bestanden, JavaScript bestanden of afbeeldingen tegelijk downloaden. Als je gebruik maakt van een CDN, verlaag je de parallel downloads van je web server.
Op de websites van de libraries staat meestal wel te lezen op welke CDN hun library te vinden is. Als dat niet het geval is, kan je steeds zoeken in Google. Tegelijk vind je de meest belangrijke terug via https://developers.google.com/speed/libraries/. Op deze pagina staan de CDN links die je kan toevoegen aan je webpagina.
Opgelet. Als je een website maakt die beveiligd is (HTTPS) dan is het nodig dat je ook een CDN kiest die de libraries beveiligd aanbied. Doe je dat niet, dan zal de browser je melden dat er onbeveiligde informatie op je website staat als je een link legt naar een onbeveiligde CDN (HTTP). Daarom is het aangewezen dat je het HTTP(S) deel laat vallen in je link.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Op deze manier wordt er automatisch voor gezorgd dat je de juiste versie hebt.