Modern JavaScript is de kunst van het schrijven van goede JavaScript-code. Maar wat is ‘goede JavaScript-code’ dan? Dat is JavaScript dat in balans is met andere webstandaarden als (X)HTML en CSS. Bovendien is het ook toegankelijk, gebruiksvriendelijk én voorbereid op de toekomst.

1. Zorg ervoor dat je JavaScript-code in balans is met zijn omgeving

Webstandaarden zijn te vergelijken met een stoel met drie poten. Je kunt er alleen recht op zitten als alle poten even lang zijn. Iets minder spreekwoordelijk zijn het drie technologieën die met elkaar in harmonie zouden moeten leven. (X)HTML voegt structuur en semantiek aan content toe, CSS is verantwoordelijk voor de presentatie en via het DOM kun je gedrag aan een pagina toevoegen. Je houdt je webpagina's het meest flexibel (of: gemakkelijk te begrijpen, te onderhouden, opnieuw te stileren en het gedrag aan te passen) door de lagen van elkaar te scheiden; structuur en content van presentatie, structuur en content van gedrag en presentatie van gedrag. Om dit te bewerkstelligen kun je het beste inline gedrag vermijden en gebruik maken van unobtrusive technieken (vrij vertaald: niet opdringerig; technieken die een pagina verbeteren voor browsers die ze ondersteunen, maar die niet toegepast worden in browsers die ze niet ondersteunen).

Wanneer je gedrag toevoegt op het moment dat een pagina geladen wordt (met behulp van een onload handler), dan zou het kunnen zijn dat je een aantal bekende problemen moet zien te omzeilen. Ten eerste kun je tegen het probleem aanlopen dat verschillende browsers events verschillend afhandelen. Ten tweede moet je ervoor zorgen dat je al bestaande onload event handlers niet overschrijft. Tenslotte kan het voorkomen dat het gedrag pas na een zichtbare vertraging toegevoegd wordt. Het onderliggende probleem is dat een window onload event pas uitgevoerd wordt nadat het hele document, inclusief alle onderdelen dat het aanroept, zoals afbeeldingen en objecten, is geladen. Als je script direct moet reageren nadat een element geladen is of als je met veel content, een reeks afbeeldingen of een trage server werkt, dan kun je genoodzaakt zijn om naar een oplossing hiervoor te zoeken. Je zou bijvoorbeeld je content kunnen verbergen totdat je gedrag bijgevoegd is of het gedrag kunnen toevoegen via een inline script dat geplaatst is achter de te laden elementen, zoals aan het einde van het body-element.

Kies je opmaakcode wijs, zodat je gebruik kan maken van de kracht van het DOM. Wanneer je bijvoorbeeld geneste lijsten gebruikt voor het bouwen van een navigatiemenu, dan kun je de interne structuur van het DOM gebruiken in plaats van deze na te bootsen met arrays. In sommige gevallen waarbij je opmaakcode of stylesheets kunt gebruiken om gedrag te creëren kun je het gebruik van JavaScript maar beter vermijden. Dit klinkt misschien een beetje tegenstrijdig, maar ingebouwd gedrag dat wordt aangeroepen door (X)HTML attributen (bijvoorbeeld voor het buiten gebruik stellen van een veld in een formulier of het zetten van een maximale lengte op een invoerveld) en CSS pseudo-klassen (bijvoorbeeld voor het bouwen van rollovers of dropdown menus) worden over het algemeen breder ondersteund en als gemakkelijker te implementeren ervaren dan JavaScript. ToughQuiz op Quirksmode illustreert de discussie en de fijne grens tussen het gebruik van door CSS gegenereerde content en reguliere opmaak en gedrag.

In alle gevallen waarbij bepaalde onderdelen van CSS op dit moment niet genoeg in alle browsers ondersteund worden of waarbij CSS stijlregels mist voor het toevoegen van presentatie, kan JavaScript een goede toevoeging zijn aan CSS. Presentationeel JavaScript zal waarschijnlijk in de komende jaren vervangen worden door CSS, wanneer browsers een betere CSS2.1 ondersteuning bieden, en met de komst en ondersteuning van CSS3. Besef echter wel dat doordat de verschillende webstandaarden met elkaar vervlochten zijn en zij samen met de browsers waarin zij geïnterpreteerd worden constant evolueren, sommige vuistregels voor het gebruiken van het DOM en JavaScript door de tijd kunnen veranderen.

2. Schrijf toegankelijke JavaScript-code

JavaScript is toegankelijk wanneer alle navigatie, content én de voornaamste functionaliteit (bijvoorbeeld het verzenden van een formulier) beschikbaar zijn voor je hele doelgroep, onafhankelijk welke browsers of invoerapparaten mensen gebruiken. Dit is inclusief:

• Gebruikers die ondersteunende hulpmiddelen, zoals schermlezers, gebruiken.
• Mensen die geen gebruik maken van een muis voor het navigeren.
• Browsers zonder JavaScript ondersteuning (bijvoorbeeld sommige mobiele browsers), browsers waarin JavaScript uitgezet is of browsers met gedeeltelijke DOM- of JavaScript-ondersteuning.
• Zoekmachines en andere programma's.

De beste methode om toegankelijke JavaScript code te schrijven is om gebruik te maken van unobtrusive technieken die ook zonder muis werken en om je reeds toegankelijke opmaakcode te verbeteren door gedrag toe te voegen. Progressieve verbetering en haar voorganger gracieuze degradatie zijn beiden goede strategieën voor het maken van webpagina's die én toegankelijk zijn voor de grootst mogelijke doelgroep, én een betere gebruikerservaring bieden voor die subgroep die over meer geavanceerde hardware of browsers beschikt. Onafhankelijk van welke strategie je gebruik maakt, zorg er altijd voor dat je voor meerdere scenario's ontwerpt.

3. Creëer gebruiksvriendelijke scripts

De gebruiksvriendelijkheid van een webpagina wordt vaak bepaald door een goede informatie-architectuur, een helder en intuïtief visueel ontwerp en goed ontworpen functionaliteit. Stel jezelf ten doel om alleen je bestaande opmaakcode te verbeteren met unobtrusive JavaScript-code als je daarmee de gebruiksvriendelijkheid van een webpagina verbetert. Als dit niet het geval is, kun je je beter afvragen of het wel verstandig is om het überhaupt toe te voegen.

4. Schrijf makkelijk toepasbare JavaScript-code

Unobtrusive scripts overbruggen de kloof tussen 'ontwerpers' en 'ontwikkelaars'. In de huidige industrie is er een grote groep mensen die precies weten hoe ze (X)HTML- en CSS-code moeten schrijven, maar zich niet erg comfortabel voelen als het op het DOM en JavaScript aan komt. Unobtrusive gedrag introduceert een mechanisme om simpel kleine herbruikbare scripts aan een webpagina toe te voegen: "Zorg ervoor dat je opmaakcode eruit ziet als A, voeg script B toe, en als resultaat heb je een pagina die C doet".

Probeer dus om kleine blokken herbruikbare code te schrijven. Het nadeel van een hoop bestaande JavaScript-bibliotheken is dat je vaak veel meer code moet toevoegen dan je echt nodig hebt, en dat ze moeilijker te begrijpen en aan te passen zijn als je ze niet zelf geschreven hebt. Omdat de functies binnen deze bibliotheken vaak gegroepeerd zijn en hergebruikt worden door diverse scripts, voelt het soms aan alsof ze als spaghetti door elkaar heen verweven zijn. Een bibliotheek met kleine unobtrusive scripts heeft het voordeel dat hij licht van gewicht is en gemakkelijk te begrijpen en aan te passen is voor specifiekere implementaties.

Creëer ook herbruikbare code. Als je merkt dat je stukken code aan het dupliceren bent, zet deze dan om in functies. Als je merkt dat je stukken code die op elkaar lijken aan het dupliceren bent, probeer deze code dan naar een hoger abstractieniveau te brengen, waardoor je het voor meerdere doeleinden kan hergebruiken.

Documenteer je code goed. Als je met andere mensen samenwerkt, als je je code met anderen wilt delen, of als je volgend jaar nog steeds wilt weten waarom je dingen op een bepaalde manier opgelost hebt, zorg er dan voor dat je goed documenteert.

5. Creëer JavaScript-code die op de toekomst voorbereid is

Vermijd browserdetectie, omdat die bijna onmogelijk te onderhouden is. Het detecteren of bepaalde kenmerken of objecten aanwezig zijn biedt een browseronafhankelijke en ook in de toekomst veilige techniek om erachter te komen hoe een webbrowser JavaScript ondersteunt.

XHTML (indien niet in backwards-compatible modus) introduceert het mediatype application/xhtml+xml (op dit moment wordt dit nog niet ondersteund door Internet Explorer), dat een grote impact heeft op hoe we JavaScript-code schrijven:

• Het HTML-DOM is hoofdletterongevoelig, terwijl het XML-DOM hoofdlettergevoelig is.
• Verwijzingen naar elementen dienen in kleine letters geschreven te worden, bijvoorbeeld document.getElementsByTagName("p")
• document.body kan niet meer gebruikt worden, in plaats hiervan kan je een verwijzing naar een id of document.getElementsByTagName("body").item(0) gebruiken.
• Collecties als document.images, document.applets, document.links, document.forms en document.anchors bestaan niet meer als XHTML als XML opgediend wordt, in plaats hiervan kun je document.getElementsByTagName() gebruiken.
• innerHTML en document.write kunnen niet meer gebruikt worden, in plaats hiervan kun je DOM-methodes als document.createElementNS("http://www.w3.org/1999/xhtml", "div") gebruiken.

Als je op de hoogte wilt blijven van de laatste ontwikkelingen op het gebied van het DOM en JavaScript, dan moet je de volgende organisaties en initiatieven in de gaten houden:

• W3C
  • DOM 3, voor een betere integratie met XML en XPath
  • XHTML 2 introduceert XML Events, om met opmaakcode event observers aan te haken, en XForms, om op een simpelere en gestandaardiseerde manier gedrag aan formulieren toe te voegen
  • CSS3 introduceert nieuwe pseudo-elementen
• ECMA
  • ECMAScript voor XML (E4X), voegt native XML-ondersteuning aan ECMAScript toe
  • ECMAScript 4 biedt op ECMA gebaseerde scripttalen (als JavaScript 2 en ActionScript 2) de mogelijkheid om modulaire en object-georiënteerde applicaties te maken
• De browserfabrikanten
  • De ondersteuning van open standaarden. Op dit moment is het bijvoorbeeld nog steeds de grote vraag of Microsoft ooit bestaande en toekomstige webstandaarden zal ondersteunen.
  • De toevoeging van merkgebonden methodes en attributen, zoals innerHTML, Microsoft.XMLHTTP en XMLHttpRequest.
  • Samenwerkingsverbanden zoals de WHAT WG, met als doel om in kortere tijdspannen nieuwe standaarden te onwikkelen, hebben op dit moment al geresulteerd in de voordracht van Web Forms 2 om een W3C-aanbeveling te worden en misschien zal Web Applications in de toekomst XMLHttpRequest standaardiseren.

6. Ken JavaScript's zwakheden, beperkingen en bugs

Ondanks dat JavaScript tegenwoordig erg goed ondersteund wordt door de meeste moderne webbrowsers, blijft deze ondersteuning nog steeds de zwakste schakel. Omdat vanaf de begindagen van het web gebruikers vaak werden lastig gevallen met allerlei vervelende scripts (bijvoorbeeld pop-ups), besloten de browser-fabrikanten om het gemakkelijk te maken JavaScript gedeeltelijk of in zijn geheel uit te schakelen (Windows XP Service Pack 2 zet bijvoorbeeld bepaalde onderdelen van JavaScript standaard uit, omdat deze als active scripting worden beschouwd). Als je JavaScript vergelijkt met zijn jongere stiefbroertje ActionScript (wat ondersteund wordt als de Flash plug-in geïnstalleerd is en niet uitgeschakeld kan worden), is het voornaamste verschil tussen de twee dat je altijd op het gedrag van ActionScript kan rekenen. Omdat het simpelweg te gemakkelijk is om JavaScript uit te zetten, zullen simpele taken zoals het valideren van formulieren altijd gedupliceerd moeten worden met code die op de server draait. Om deze reden zal in de toekomst het grootste deel van de formuliervalidatie op de client vervangen worden door opmaakcode en 'ingebouwd gedrag'.

Zoals ik al eerder opmerkte, is de onload event handler niet krachtig genoeg om het beste uit unobtrusive technieken te halen. Ik hoop dat de medewerkers van het W3C zullen reageren op de signalen die uit de JavaScript gemeenschap komen en nieuwe event handlers, zoals onElementLoad en onDOMLoad, in de nabije toekomst aan de DOM-specificaties zullen toevoegen.

De JavaScript-implementaties van Internet Explorer en Safari hebben beiden last van geheugenlekken wanneer je gebruik maakt van circulaire referenties als closures. Wanneer je per se deze referenties wilt gebruiken, zorg er dan voor dat je je event handlers verwijdert als een pagina ontladen wordt (met onunload).

7. Vaak is er meer dan één goede oplossing

JavaScript is een erg flexibele taal met als gevolg dat er vaak verschillende manieren zijn om een probleem op te lossen. Zo kan je een procedurele of een object-georiënteerde programmeerstijl hanteren. Voor unobtrusive gedrag kun je zowel zelf gemaakte attributen als class-attributen als aanhaakpunten gebruiken om het gedrag van je hele website te controleren. Hoewel flexibiliteit inhoudt dat je bepaalde keuzes moet maken, hoeft de ene oplossing niet automatisch beter of slechter te zijn dan de andere. Baseer je beslissingen op de context waarin je je scripts wilt gebruiken en je eigen filosofie of smaak, en probeer een consistente codeerstijl aan te houden.

8. Schrijf je eigen scripts, of hergebruik scripts van betrouwbare bronnen

Momenteel is er veel gedateerde en slecht geschreven JavaScript-code beschikbaar op het internet. Veel scripts bevatten browserdetectie, maken gebruik van merkspecifieke eigenschappen die niet in alle browsers werken of zijn ontoegankelijk. Een belangrijk kenmerk van gedateerde scripts is dat ze gebruik maken van inline event handlers en inline scripts, waardoor er geen scheiding is tussen structuur/content en gedrag. Het blijkt dat in de afgelopen twee jaar standaarden, browsers en de kunst van het schrijven van goede JavaScript-code zo snel geëvolueerd zijn, dat het moeilijk is de laatste trends en ontwikkelingen bij te houden. Als gevolg hiervan is het moeilijk om code van anderen en zelfs code die je zelf een jaar geleden geschreven hebt opnieuw te gebruiken. Omdat sommige delen van oude scripts vaak goede codeblokken bevatten, is het het beste om oude code te herzien en die delen te herschrijven, die niet meer volstaan. Vaak is het waarschijnlijk de beste keuze om je code van de grond af aan te herschrijven.

Maar hoe kunnen minder ervaren DOM- en JavaScript-gebruikers het verschil zien tussen goede en slechte code op het internet? Er zijn opinieleiders op het web die de toepassing van modern JavaScript promoten en er zijn online gemeenschappen die scripts en technieken bediscussiëren en evalueren. Een paar voorbeelden hiervan zijn:

• DHTML & CSS Blog: Stylish Scripting
• A List Apart
• QuirksMode
• Simon Willison
• Stuart Langridge
• Christian Heilmann
• Brainjar
• Gazingus

DHTML Utopia: Modern Web Design Using JavaScript & DOM is het eerste boek in een nieuwe reeks titels die is gericht op de toepassing van modern JavaScript en unobtrusive technieken.

9. Optimaliseer je JavaScript-code voor een efficiënte en snelle uitvoering

Optimaliseer je script voor zowel downloadsnelheid als de snelheid waarmee het uitgevoerd wordt. Enkele tips:

• Vermijd zware codebibliotheken en zorg ervoor dat je scripts klein en onafhankelijk blijven.
• Schrijf efficiënte code en vermijd constructies die langzaam uitgevoerd worden.
• Bewaar een ontwikkelaarversie van je scripts die voorzien is van volle documentatie en gebruik compressiesoftware (zoals JavaScript cruncher of JavaScript Crunchinator) om documentatie en whitespace te verwijderen voor een productieversie.

10. Gebruik hulpmiddelen om je werkomgeving te optimaliseren

Een selectie van hulpmiddelen die je leven een stuk gemakkelijker kunnen maken:

• Mozilla of Firefox browser
  • Heeft standaard een JavaScript console ingebouwd, voor gedetailleerde foutmeldingen en waarschuwingen
  • De Web Developer Toolbar extensie, bijvoorbeeld voor het snel aan- en uitzetten van JavaScript
  • De Mozilla DOM Inspector en de Firefox DOM Inspector extensie, om de structuur, elementen en waarden van het actuele DOM van een document te kunnen inzien
  • Venkman, de JavaScript debugger (de Venkman extensie voor Firefox)
• JSDoc, genereert HTML- documentatie van inline documentatie in je scripts
• JSLint, een JavaScript verificator voor het controleren op syntax- en programmeerfouten.

• Home
• Artikelen
• Colofon