Home > Aan de slag > Client-side script en DOM

Client-side script is de term voor ‘programma’-routines die worden uitgevoerd aan de kant van de ‘client’, in de browser van de bezoeker. Voorbeelden van client-side script-talen zijn ECMAScript, Netscape’s JavaScript, Microsoft’s Jscript en VBScript.

Markup-talen als HTML en XML zijn geen scripttalen; er zijn geen programmeer technische constructies mee mogelijk, zoals herhaling van instructies of beslissingen nemen.

Inhoudsopgave

  • Het optionele karakter van client-side scripts
  • Gelaagd bouwen van functionaliteit
  • HTML-alternatieven voor client-side scripts
  • Server-side scripts als alternatief
  • Document Object Model

Het optionele karakter van client-side scripts

Gebruik geen client-side scripts voor onmisbare functionaliteit op webpagina’s, tenzij het gebrek aan ondersteuning voor deze scripts voldoende wordt afgevangen door HTML-alternatieven en/of server-side scripts.

Gerelateerde richtlijnen

  • R-pd.14.1: Gebruik geen client-side script voor onmisbare functionaliteit op webpagina’s, tenzij het gebrek aan ondersteuning voor deze scripts voldoende wordt afgevangen door HTML alternatieven en/of server-side script.

Gelaagd bouwen van functionaliteit

Onmisbare functionaliteit (bijvoorbeeld formuliervalidatie) kan worden gestuurd via client-side scripting, maar zal falen als ondersteuning hiervoor ontbreekt. Webontwikkelaars kunnen deze situatie ondervangen door gelaagd te bouwen.

Wanneer ondersteuning voor client-side scripts ontbreekt, wordt teruggevallen op HTML alternatieven of server-side scripts.

Een alternatief voor een client-side script hoeft niet per se dynamische of visuele effecten te realiseren als het script zelf. Er is sprake van een alternatief wanneer de bezoeker in staat is het doel van het client-side script te bereiken zonder de ondersteuning voor dit script. Zo’n doel is bijvoorbeeld het controleren en valideren van de invoer van een contactformulier of het navigeren van de website. Het ontbreken van client-side scripts betekent hooguit dat het bereiken van deze doelen voor de bezoeker minder eenvoudig is.

HTML-alternatieven voor client-side scripts

Browsers die geen client-side scripts ondersteunen, kunnen alternatieve inhoud tonen. Deze inhoud kan worden opgenomen in het noscript element. Hier moet voorzichtig mee worden omgegaan.

Wanneer client-side script als uitbreiding gebruiken?

  • Meestal passen webontwikkelaars scripts toe op HTML-elementen in de pagina die wel zichtbaar blijven als ze niet worden ondersteund, maar niet blijken te werken. Bij een uitklapbaar navigatiemenu, zou dit bijvoorbeeld resulteren in twee menu’s: één dat niet en één dat wél werkt.
  • Als client-side scripts niet worden ondersteund, zullen sommige functionaliteiten door de ene browser wél en door de andere niet worden uitgevoerd. Het kan gebeuren dat een browser die de functionaliteit niet kan uitvoeren, evenmin de inhoud van het noscript toont. Dit is het geval bij bijvoorbeeld (oude) browsers die geen ondersteuning hebben voor DOM (Document Object Model).

In beide gevallen is het beter om uit te gaan van client-side scripts als uitbreiding op HTML-basisfunctionaliteit in plaats van als alternatief.

Zo kan een eenvoudige tekstlink worden uitgebreid met een script dat ervoor zorgt dat de link automatisch in een nieuw venster wordt geopend. Op deze manier functioneert de link altijd; alleen als de browser client-side scripts ondersteunt, opent de link een nieuw venster. Het script is daarmee een uitbreiding op de basisfunctionaliteit. Zie voor details Client-side script als uitbreiding op een link.

Beperkte ondersteuning

Dergelijke scripts kunnen zodanig worden geschreven, dat het script zichzelf annuleert wanneer ondersteuning voor één of meerdere functies ontbreekt. De bezoeker kan gewoon de HTMLbr>-basisfunctionaliteit blijven gebruiken, zelfs als zijn browser slechts beperkt client-side scripts ondersteunt. Degelijke scripts zijn eenvoudig te herkennen, doordat eerst wordt gecontroleerd of de functies die worden aangeroepen door de JavaScript-versie van de browser worden ondersteund.

Een voorbeeld (Javascript)

  1. if (document.getElementById && document.getElementsByTagName && document.createElement) {
  2.   function nameOfFunction() {
  3.   [...]
  4.   }
  5. }

Server-side scripts als alternatief

Tegenover ‘client-side’ staat de term ‘server-side’. Server-side script-talen, PHP bijvoorbeeld, Perl of ASP, worden niet uitgevoerd in de browser, maar op de webserver. De browser ontvangt de resultaten van het script, maar niet het script zelf. Webontwikkelaars hebben wel controle over de webserver, maar niet over de webbrowser. Daarom zijn server-side scripts per definitie betrouwbaarder en uitgebreider te gebruiken dan client-side scripts.

De server moet echter door de browser aangesproken worden voor de uitvoering van het server-side script. Dat maakt zo’n script soms minder gebruiksvriendelijk: het werkt altijd, voor alle browsers, maar de gehele pagina moet worden ververst. Een client-side script levert onmiddellijk een resultaat voor de bezoeker, zonder dat de server hoeft te worden aangesproken. Beide kunnen echter naast elkaar gebruikt worden: client-side scripts als aanvulling op basisfunctionaliteit, gecreëerd door server-side scripts.

Een voorbeeld: formuliervalidatie

Een contactformulier op een webpagina kan worden ingevuld door de bezoeker en zal na een klik op de verstuur-knop via de webserver naar de geadresseerde worden verzonden. Enkele van de velden in het formulier moet de bezoeker verplicht invullen, zoals de naam of het e-mailadres. Als de bezoeker een onvolledig ingevuld formulier verstuurt, wordt hem dat door een -client-side script verteld. De bezoeker weet onmiddellijk waar hij aan toe is en herstelt zijn fout.

Als dit script niet wordt ondersteund, wordt het formulier zonder controle verstuurd. De gegevens op het verstuurde formulier zijn onvolledig en het bericht komt nooit aan bij de geadresseerde.

Op zo’n moment is het goed als een server-side script alsnog de controlefunctie overneemt. Dit script controleert verstuurde formulieren op de webserver en geeft het incompleet ingevulde formulier met een foutmelding terug.

Bij het opzetten van een dergelijk formulier is het voor een webontwikkelaar praktischer om ervan uit te gaan dat client-side scripts niet ondersteund worden; door middel van server-side scripts ontwikkelt hij een formulier dat altijd werkt. Daarna kan hij client-side scripts toevoegen om het gebruiksgemak van het formulier te verbeteren.

Document Object Model

De Document Object Model (DOM) Level 1 is een standaard voor het beschrijven van de hiërarchie van XML en HTML elementen in het geheugen van de computer. Het is vergelijkbaar met een boommodel. DOM - geeft scripttalen de mogelijkheid deze elementen te manipuleren.

DOM is opgezet als een platform- en scriptonafhankelijke API (Application Programming Interface): een toegang voor scripts en programmeertalen voor het manipuleren van documenten. De DOM kan worden gebruikt door server-side scripts en programma’s die met XML te maken hebben.

Van origine is een HTML-bestand in het geheugen van de browser niet meer dan een lange rij karakters, een string. DOM beschrijft markup op een andere manier: als zelfstandige objecten (elementen) met eigenschappen (attributen). Niet alleen HTML- en XML-elementen en attributen worden zo beschreven, ook de tekst binnen de elementen bestaat uit aparte objecten. Client-side scripts kunnen worden gebruikt om deze objecten aan te spreken en te manipuleren.

Uit het platform- en scriptonafhankelijke karakter van DOM blijkt het doel ervan: uitwisselbaarheid. DOM maakt het mogelijk dat programma’s op een eenduidige manier markup aanspreken en manipuleren.

DOM en DHTML

DHTML (Dynamic HTML) is een niet-officiële verzamelterm voor visuele effecten door middel van client-side scripts, CSS en HTML. Het benaderen van met name het HTML-gedeelte (de structuur van de pagina-inhoud) kan op verschillende manieren en DOM is er daar één van. DOM gaat echter verder dan visuele effecten.

  • DOM biedt scripttalen eenvoudig toegang tot individuele elementen en attributen
  • Via DOM kunnen hele secties inhoud efficiënt worden verplaatst naar een andere locatie binnen de structuur van het document
  • Via DOM kunnen nieuwe elementen worden gecreëerd op willekeurige plaatsen in de structuur van het document

DOM kan worden toegepast voor visuele effecten, maar heeft vooral zijn nut in het zonder herladen aanpassen van pagina-inhoud aan de handelingen van de bezoeker. Zo kan een formulier reageren op de invoer van de bezoeker en bepaalde vragen tonen of weglaten. De mogelijkheden voor webapplicaties, zoals een CMS (Content Management Systeem) zijn eindeloos.

DOM-ondersteuning door browsers

Ondersteuning voor de DOM is iets van de afgelopen jaren. Moderne versies van webbrowsers bieden steeds betere ondersteuning, maar op veel punten is deze nog inconsistent of niet volledig.

Links en referenties