3 jQuery basis

In het vorige hoofdstuk zijn we al even in aanraking gekomen met jQuery. Twee zeer belangrijke eigenschappen hebben we met opzet nog niet besproken. Als eerste moeten we steeds het jQuery framework integreren op de pagina. Zonder dit framework zal de pagina niet functioneren. Verder staat alle jQuery functionaliteit binnen een speciale jQuery functie.

<script src="pad/jquery.x.x.js"></script>
<script>
$(function(){
    // jQuery functionaliteit
});
</script>

jQuery integreren

Voor u gebruik kan maken van het jQuery framework, moet u eerst een verwijzing (een link) in uw webpagina's integreren. Ofwel kan u de bibliotheek downloaden, ofwel maakt u gebruik van de online bibliotheek van Google, Microsoft of jQuery.

Framework downloaden

Op de website http://jquery.com/ kan u de laatste release van het jQuery Framework in twee versies downloaden:

  • Productieversie (jquery-x.x.x.min.js) Dit is het kleinste bestand en daarom ideaal om in uw site te verwerken. In deze versie zijn alle spaties uit de code verwijderd en is het bestand ook nog eens gecomprimeerd.

  • Ontwikkelversie (jquery-x.x.x.js) Dit bestand is niet gecomprimeerd en is bijgevolg veel groter. De code in dit bestand is mooi geformatteerd en zodoende makkelijk "leesbaar" voor de programmeur.

Download steeds de productieversie naar de website en leg net voor </body> of binnen de head-tag een verwijzing naar het script. Let op: alle volgende scripts die u zelf schrijft en die gebruik maken van jQuery, moet u achter het basisscript toevoegen.

Optie 1: JavaScript bovenaan de pagina (niet zo ideaal!)
<!DOCTYPE HTML>
<html>
<head>
     <meta charset="utf-8">
     <title>jQuery</title>
     <script src="../jQuery/jquery-x.x.x.min.js"></script>
     <script src="mijnSiteScript.js"></script>
     <script>
        // mijn lokaal script
     </script>
</head>
Optie 2: JavaScript onderaan de pagina (beste methode!)
<!DOCTYPE HTML>
<html>
<head>
     ...
</head>
<body>
     ...
     <script src="../jQuery/jquery-x.x.x.min.js"></script>
     <script src="mijnSiteScript.js"></script>
     <script>
        // mijn lokaal script
     </script>
</body>

Sommige ontwikkelaars downloaden het script naar hun eigen site, maar u kan ook linken naar een online script bij Google, cdnjs of op de jQuery website.

Framework linken via CDN

Zowel Google als cdnjs hosten een aantal open-source bibliotheken waar u rechtstreeks naar kan verwijzen. Dit noemt men een Content Delivery Network (CDN). Door rechtstreeks naar een CDN te linken, bespaart u wat bandbreedte op uw eigen netwerk. Een gebruiker downloadt het bestand immers niet vanaf uw server, maar rechtstreeks vanaf de externe CDN-server. De kans is groot dat een bezoeker reeds vanaf een andere website het script heeft ingelezen, zodat het script reeds in het cachegeheugen van de browser aanwezig is. Hierdoor reageert uw pagina ook iets sneller.

<script src="externe CDN link naar de jQuery bibliotheek"></script>
<script src="mijnSiteScript.js"></script>
<script>
    // mijn lokaal script hier
</script>

CDN-servers voor jQuery:

$(document).ready()

Scripts die dadelijk worden uitgevoerd, plaatst men in een JavaScripttoepassing steeds in de window.onload methode. Zodra de pagina VOLLEDIG geladen is, wordt het script dan uitgevoerd. Volledig geladen wil zeggen dat zowel de HTML, de JavaScriptcode als alle externe media zoals foto's en filmpjes, volledig in het geheugen zijn geladen. Zoals u dadelijk zal merken zorgt het laden van grote bestanden voor een kleine vertraging die de gebruiksvriendelijkheid niet ten goede komt.

jQuery biedt hiervoor een alternatief. De methode $(document).ready() wordt uitgevoerd NET VOOR de externe media worden ingeladen. Ook al zit er tussen beide methodes vaak maar een fractie van een seconde, de jQuery methode zorgt bijgevolg voor een betere gebruikerservaring. U kan de vrij lange notatie trouwens nog sterk inkorten.

// lange notatie
$(document).ready(function(){
     ... 
});
// korte notatie
$(function(){
      ...       
});

★ Open jqIntegratie/youTube_1.htm ★ Open jqIntegratie/youTube_2.html

Beide pagina's bevatten een gelijkaardige functionaliteit. De container #movie bevat een YouTube filmpje. Bij het laden van de pagina wordt de container onzichtbaar gemaakt. Door op de link te klikken, komt het filmpje tevoorschijn.

In het eerste document wordt de container vanuit een standaard JavaScript onzichtbaar gemaakt. In het tweede document gebeurt dit via een jQueryfunctie.

De code voor youTube_1.html:

<script>
window.onload = function() { 
    document.getElementById('movie').style.display = 'none';
}
function toonMovie(){ 
    document.getElementById('movie').style.display = 'block';
}
</script>
...
<p><a href="#" onclick="toonMovie();">Toon movie.</a></p>
<section id="movie"> ... </section>

De code voor youTube_2.html:

<script>
$(function() {
    $('#movie').hide();         // verberg selectie met hide()
    $('#movieLink').click(function(){
        $('#movie').show();     // toon selectie met show()
    });
});
</script>
...
<p><a href="#" id="movieLink">Toon movie.</a></p>
<section id="movie"> ... </section>

★ Open beide pagina's in een browser ★ Vernieuw de pagina's enkele malen en vergelijk

Op youTube_1.html verschijnt kortstondig een lege container voor deze zich sluit. window.onload komt pas in actie zodra de externe movie VOLLEDIG is ingeladen. De tweede pagina, youTube_2.html, opent dadelijk met een gesloten container. $(function() { ... } komt reeds in actie VOOR de externe movie is ingeladen.

Unobtrusive JavaScript

In een goede webpagina wordt de structuur (de HTML-code) volledig gescheiden van de opmaak (CSS). Met deze techniek bent u zeker vertrouwd.

Ook de JavaScripts worden best volledig gescheiden van de HTML-structuur. Dit heeft als voordeel dat we de code makkelijk kunnen onderhouden en hergebruiken.

Zetten we de vergelijking met CSS nog even op een rijtje:

  • Inline CSS en Obtrusive JavaScript:

    Inline CSS: <span style="color: sienna;">...

    Obtrusive JavaScript: <a onclick="alert('Link 1 geklikt')"...

    Stijleigenschappen of JavaScript rechtstreeks op de tag zijn niet efficiënt en volledig af te raden. Aanpassingen zijn vaak tijdrovend.

  • Interne CSS en Intern unobtrusive JavaScript:

    Interne CSS: style-tag in de head van het document.

    Intern unobtrusive JavaScript: script-tag in de head-sectie of in de body-tag van het document.

    Stijleigenschappen of JavaScript binnen de head-sectie of in de body-tag van het document zijn enkel bruikbaar binnen het document zelf.

  • Externe CSS - Extern unobtrusive JavaScript:

    Externe CSS: link naar een extern .css-bestand.

    Extern unobtrusive JavaScript: link naar een extern .js-bestand.

    Stijleigenschappen of JavaScript in een extern document zijn bruikbaar binnen de ganse website.

Met jQuery trachten we zo veel mogelijk de scripts volledig te scheiden van de HTML-code. Voorgaande oefeningen zijn hiervan een goed voorbeeld. Op youTube_1.html wordt het openen van de container rechtstreeks gekoppeld aan de a-tag (<a onclick="toonMovie();").

De tweede pagina youTube_2.html heeft geen onclick-event meer. In het script zelf wordt het click-event gekoppeld aan het id #movieLink.

Alle functies die we schrijven MOETEN steeds binnen $(function() { ... } staan. jQueryscripts buiten deze methode werken niet.

Onderstaande code is NIET correct. Lijn 4, 5 en 6 bevinden zich buiten $(function() { ... } en worden dus niet door jQuery herkend!

$(function() {
    $('#movie').hide();             // correct
});
$('#movieLink').click(function(){   // fout!
    $('#movie').show(); 
});

Onderstaande code is correct:

$(function() {
    $('#movie').hide();
    $('#movieLink').click(function(){
        $('#movie').show();
    });
});

Let ook op met globale en lokale variabelen. Een variabele aangemaakt binnen $(function() { ... }); is niet zichtbaar buiten deze functie. De variabele is echter wel zichtbaar binnen geneste functies.

jQuery documentatie (API)

De website http://api.jquery.com/ bevat een schat aan informatie. In de API reference zijn alle eigenschappen en methodes mooi gerangschikt volgens thema. Maar hoe moet u de documentatie nu begrijpen?

Neem bijvoorbeeld de methode css() uit de categorie CSS. Bovenaan de pagina vindt u een korte omschrijving van de mogelijkheden. Verderop worden de verschillende mogelijkheden in detail besproken en geïllustreerd aan de hand van eenvoudige voorbeelden.

Deze methode, net zoals vele andere methodes uit de bibliotheek, kan u op verschillende manieren gebruiken.

  • Getter (haal de waarde van een CSS-eigenschap op).

    .css(propertyName)

    .css(propertyNames)

  • Setter (geef de CSS-eigenschap een nieuwe waarde).

    .css(propertyName,value)

    .css(propertyName,function)

    .css(properties)

★ Open jqIntegratie/api.html.

Laat ons bovenstaande methodes even verduidelijken.

Getter

$(function() {
    $('#getter').click(function(){ 
        alert($('#sect2').css('width'));
    });
});

Met de eerste functie (een getter) kan u een waarde ophalen. Met de methode css() kan u één of meerdere css-eigenschappen gelijktijdig opvragen. Op lijn 3 wordt via $('#sect2').css('width') de breedte van de container #sect2 opgevraagd en in een alertbox getoond.

Setter met één parameter

$(function() {
    $('#setter1').click(function(){
        $('#sect2').css('width', '400px');
    });
});

Op lijn 3 wordt één css-eigenschap, de breedte van #sect2, aangepast via een setter. De eigenschap en de bijhoorende waarde worden altijd gescheiden door een komma: 'naam','waarde'. Zowel de naam als de waarde worden als een string doorgeven. Vergeet dus de aanhalingstekens niet!

Setter met één of meer parameters

$(function() {
    $('#setter2').click(function(){
        $('#sect2').css({
            'box-shadow': '5px 5px 3px grey', 
            'color': 'green',
            'width': '700px'
        });
    });
});

U kan meerdere eigenschappen gelijktijdig aanpassen (lijn 4, 5 en 6) door gebruik te maken van een map of object literal.

In een object literal worden de waardes altijd omsloten door aanhalingstekens. Voor de namen hoeft dit niet. Indien u de aanhalingstekens weglaat, moet u de namen wel in camelCasenotatie schrijven! (Indien de naam uit twee of meerdere woorden bestaat, laat dan het streepje weg en vervang de eerste letter van elk volgend woord door een hoofdletter.)

Beide schrijfwijzen zijn dus correct:

Goed: .css({'box-shadow':'5px 5px 3px grey', 'color':'green', ...}) Goed: .css({boxShadow:'5px 5px 3px grey', color: 'green', ...}) Fout: .css({box-shadow:'5px 5px 3px grey', color: 'green', ...})

Setter met een anonieme functie

$(function() {
    $('#setter3').click(function(){
        $('#sect2').css({
            fontSize: function(){ 
                return parseFloat($('#sect2').css('font-size')) * 1.2;
            }
        });
    });
});

In het laatste voorbeeld op de pagina gaan we op lijn 5 de lettergrootte bij elke klik vergroten met een factor 1,2. Hiervoor hebben we natuurlijk een functie nodig die de huidige waarde uitleest en vervolgens de nieuwe waarde berekent.

Zoals u merkt aan de bovenstaande syntax, wordt fontSize nu niet gekoppeld aan een vaste waarde, maar wordt de waarde vervangen door een functie waarbinnen de vermenigvuldiging plaatsvindt.

In feite is deze schrijfwijze eveneens een object literal en mogen we de CSS-eigenschap met of zonder aanhalingstekens schrijven. Let ook hier op de camelCase schrijfwijze indien u de aanhalingstekens weglaat.

Afgeschafte (deprecated) methodes en selectors

Verschillende versies van jQuery volgen elkaar in een razendsnel tempo op. Meestal komen er bij elke versies enkele nieuwe methodes bij, maar er verdwijnen er ook. Vaak gaat het dan over verouderde methodes, methodes die weinig of niet gebruikt worden of methodes waarvoor een beter alternatief beschikbaar is. In de API worden deze methodes aangeduid met de term deprecated.

Voorlopig zijn de meeste van deze methodes en selectors nog in de bibliotheek aanwezig, maar de kans is groot dat deze in een toekomstige versie volledig zullen verdwijnen. Het is dus niet aan te raden om deze verouderde methodes in een nieuw ontwerp te verwerken. In deze cursus komen deprecated methodes dan ook niet aan bod.

Een volledig overzicht van alle afgekeurde methodes en selectors vindt u hier: http://api.jquery.com/category/deprecated/

jQuery cheat sheet

Zodra u wat beter vertrouwd bent met jQuery, hebt u waarschijnlijk al voldoende aan een korte omschrijving van de verschillende methodes en eigenschappen. Op het net zijn ondertussen ook al verschillende spiekbriefjes (cheat sheets) beschikbaar die zeker nuttig zijn tijdens het programmeren.

jQuery in combinatie met andere JavaScriptbibliotheken

Misschien komt u hier nooit mee in aanraking, maar wat kan er gebeuren indien u meerdere JavaScriptbibliotheken in één project verwerkt?

Zoals u ondertussen weet, gebruikt jQuery default het dollarteken als alias voor het woord jQuery. Bevat uw project ook nog een andere JavaScriptbibliotheek die het dollarteken als alias gebruikt (bijvoorbeeld het Prototype framework), dan komen beide bibliotheken natuurlijk in conflict met elkaar.

Via de methode noConflict() kan u een nieuwe alias creëren voor jQuery.

var $jq = jQuery.noConflict();
// gebruik vanaf nu $jq i.p.v. $
$jq(function() {
    $jq('#movie').hide();
    $jq('#movieLink').click(function(){
        $jq('#movie').show();
    });
});

Vanaf nu gebruikt u enkel nog de alias $jq voor jQueryfuncties en blijft $ voorbehouden voor de Prototypefuncties.

PreviousIngebouwde JavaScriptobjectenNext4 Elementen selecteren

Last updated