Leren en oefenen voor een theorietoets

Over jQuery

Waarom jQuery?

jQuery is een lichte en krachtige JavaScript-bibliotheek die het werken met HTML-documenten eenvoudiger maakt. Het biedt handige functies voor:

  • DOM-manipulatie: Met een korte en eenvoudige syntaxis kun je HTML-elementen selecteren, aanpassen en verwijderen.
  • Evenementenbeheer: jQuery maakt het gemakkelijk om gebruikersinteracties, zoals klikken of muisbewegingen, te detecteren en hierop te reageren.
  • Efficiënte en compacte code: Veelvoorkomende taken kunnen met jQuery in minder code worden geschreven dan met standaard JavaScript.
  • Animaties en effecten: jQuery bevat ingebouwde methoden om animaties en effecten toe te voegen zonder dat je zelf complexe JavaScript-code hoeft te schrijven.
  • Compatibiliteit: jQuery zorgt voor een uniforme manier om met verschillende webbrowsers te werken, waardoor je minder rekening hoeft te houden met browser-specifieke verschillen.

Dankzij deze voordelen wordt jQuery vaak gebruikt bij webontwikkeling, vooral voor projecten waarbij eenvoud en snelheid belangrijk zijn.

De DOM en jQuery

De DOM (Document Object Model) is een programmeerbare representatie van een HTML- of XML-document. Wanneer een webpagina wordt geladen, zet de browser de HTML-code om in een boomstructuur van objecten die de elementen van de pagina vertegenwoordigen.

  • Boomstructuur: Elk element op de webpagina (zoals<div>, <p>, <img>) wordt een node in de boom, waarbij elementen onderling een ouder-kindrelatie (parent-child) hebben.
  • Manipuleerbaar: Met JavaScript en jQuery kun je de DOM lezen en aanpassen. Je kunt bijvoorbeeld de tekst van een element wijzigen, elementen verbergen of nieuwe content toevoegen.
  • Interactiviteit: Door de DOM te manipuleren, kun je dynamische en interactieve webpagina’s maken. jQuery vereenvoudigt dit proces door een intuïtieve manier te bieden om elementen te selecteren en te bewerken.

De code in index.html en code.js

index.html

				
					<head> <script type="litespeed/javascript" data-src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="litespeed/javascript" data-src="code.js"></script> </head>

code.js

				
					$(document).ready(function() {
    /*Hier komt de code*/
});

Deze code laat zien hoe je jQuery correct integreert in een HTML-bestand en hoe je JavaScript-code in een apart bestand plaatst. Hieronder volgt een gedetailleerde beschrijving van wat er gebeurt, zowel zichtbaar als op de achtergrond.

Het HTML-bestand

In de headsectie van de index.html worden 2 koppelingen gemaakt.

  • De jQuery-bibliotheek wordt ingeladen
    • Dit is een externe verwijzing naar de jQuery-bibliotheek (versie 3.6.0) die gehost wordt op de officiële jQuery CDN (Content Delivery Network).
    • Door dit script in te laden, krijgt de pagina toegang tot alle jQuery-functies.
    • De browser downloadt dit script zodra de HTML wordt geladen, zodat jQuery beschikbaar is voor gebruik in andere scripts.
  • De eigen JavaScript-code wordt ingeladen
    • Dit script verwijst naar code.js, een apart bestand waarin de JavaScript-code staat.
    • Het wordt na jQuery ingeladen, wat belangrijk is omdat de jQuery-bibliotheek eerst beschikbaar moet zijn voordat de code in code.js deze kan gebruiken.
  • Wat gebeurt er op de achtergrond?
    • De browser leest de HTML en verwerkt de <head>-sectie.
    • Zodra de jQuery-bibliotheek wordt gedownload en geladen, worden de functies van jQuery beschikbaar.
    • Daarna wordt code.js geladen en uitgevoerd, mits daarin geen fouten staan en de bibliotheek correct is ingeladen.

Het JavaScript-bestand

Het gekoppelde bestand code.js wordt klaargemaakt voor gebruik.

  • $(document).ready() wacht tot de pagina is geladen
    • $(document) verwijst naar het hele HTML-document.
    • .ready(function(){…} zorgt ervoor dat de code pas wordt uitgevoerd nadat de HTML volledig is geladen en klaar voor gebruik.
    • Dit voorkomt fouten waarbij jQuery probeert elementen te bewerken die nog niet bestaan.
  • De inhoud tussen de {} wordt pas uitgevoerd wanneer de DOM geladen is
    • Hier kan de code worden geschreven die bijvoorbeeld elementen selecteert en bewerkt met jQuery.
    • Dit is de plek waar bijvoorbeeld knoppen klikbaar kunnen worden gemaakt of waar HTML-elementen dynamisch kunnen veranderen.
  • Wat gebeurt er op de achtergrond?
    • Wanneer de browser de HTML verwerkt, begint hij met het inladen van de scripts.
    • Zodra de pagina en de DOM volledig geladen zijn, activeert $(document).ready().
    • Alle code binnen deze functie wordt uitgevoerd.

Waarom een apart JavaScript-bestand?

  • Overzichtelijkheid:
    HTML en JavaScript worden gescheiden, wat het onderhoud en de leesbaarheid verbetert.
  • Herbruikbaarheid:
    De JavaScript-code kan eenvoudig worden hergebruikt op andere pagina’s.
  • Efficiëntie:
    Browsers kunnen het JavaScript-bestand cachen, waardoor de pagina sneller laadt bij herhaald bezoek.