JavaScript structuur

Schrijven en Volgorde

Zoals je ziet wordt JavaScript geschreven als gewone tekst, zoals HTML en CSS. JavaScript is een zogezegde geïnterpreteerde taal, niet een gecompileerde taal. Veel andere talen moeten gecompileerd worden. Dit wil zeggen dat ze moeten omgezet worden door een compiler die je code omzet naar machine taal die dan de code kan laten draaien in een operating systeem. Dit moeten we niet doen bij JavaScript. We schrijven onze code en geven deze aan de browser die deze interpreteert en toont.

JavaScript is hoofdletter gevoelig

herhaling

JAVASCRIPT IS HOOFDLETTER GEVOELIG !!!

Als je van een programmeertaal komt die niet hoofdletter gevoelig is, zoals Visual Basic of Pascal of zelfs HTML, kijk dan goed naar de regel hierboven, want hij is belangrijk ! Als je er niet op let, dan werkt je script niet ! JavaScript gokt ook niet naar wat je bedoelt.

JavaScript code, zoals de meeste programmeertalen, is gegroepeerd in statements of verschillende instructies, die stap voor stap zeggen wat je script moet doen. Dit kan gaan over de kleur veranderen van een stuk tekst, berekenen hoe oud iemand is, een afbeelding 5 pixels naar links doen opschuiven, een menu doen verschijnen of verdwijnen of een alert-boodschap weergeven.

Elk statement wordt typisch op één lijn geschreven. Op dezelfde manier dat je achter elke zin een punt zet, zet je achter elk JavaScript statement een punt-komma (semicolon of ;) Hierdoor is het mogelijk om meerdere zinnen op één lijn te schrijven, maar om de leesbaarheid van scripts te bevorderen, doet men dit liever niet. Wat wel voorkomt is dat men lange statements over meerdere lijnen schrijft om de leesbaarheid te vergroten. Dit kan omdat een statement pas eindigt bij een punt-komma.

Een script mag dan wel hoofdletter gevoelig zijn, het is niet gevoelig voor spaties of verdelingen van statements over verschillende lijnen. Je mag zoveel spaties schrijven als je wil. De enige plaats waar dit echt een rol speelt, is tussen de 'dubbele aanhalingstekens', daar tellen de spaties als spaties tussen woorden die we zien op een webpagina.

Plaatsing van het script

Zoals de meeste programmeertalen, is het de gewoonte dat je code wordt gelezen en uitgevoerd van boven naar beneden, regel per regel, stap voor stap. De vraag is wanneer dit gebeurt. Normaal gezien is dit vanaf wanneer de browser je code ziet. Dit kan onverwachte of onbedoelde, soms ook interessante, gevolgen hebben, omdat we de <script></script> tags zowat overal in onze HTML-code kunnen zetten. We kunnen ze in de head sectie, in de body, in het midden, of op het einde zetten.

Dus de positie van ons JavaScript is van belang voor het moment van uitvoeren. Het gebeurt vanaf de moment dat de browser het script ziet. Op een eenvoudige pagina kan dat misschien geen kwaad, maar op complexere pagina's moeten we daar wel rekening mee houden en onze JavaScript-code niet onmiddellijk laten uitvoeren. Soms moeten we wachten totdat een gebruiker een formulier heeft ingevuld, zijn muis verplaatst heeft of de TAB-toets heeft ingedrukt. We zullen dit doen door code te groeperen in verschillende groepen om dan de browser te vertellen dat we ze enkel willen uitvoeren bij bepaalde gebeurtenissen.

De manier dat we hier JavaScript gebruiken noemen we inline-scripting. Die is goed om mee te starten of op kleine pagina's. Maar als je HTML-bestanden groter worden en de JavaScripts die er in staan complexer, wordt het moeilijker om je code te onderhouden of aan te passen. En omdat je meestal dezelfde dingen doet met je code over verschillende pagina's van je website, zal je veel meer werk moeten verrichten om één ding aan te passen in alle pagina's. Daarom zullen we gebruik maken van een apart bestand om onze code in te schrijven, zoals we dit ook doen met CSS. Op die manier wordt het eenvoudiger om je code te onderhouden of aan te passen en zelfs makkelijker om code te schrijven.

We knippen onze code van tussen onze <script></script> tags en plakken die in een nieuw bestand dat we de extensie .js geven. De <script></script> tags laten we staan in het HTML- bestand en geven deze een source attribuut, src, zoals je ook doet bij een afbeelding.

vb:

<script src="mijnscript.js" />

Op deze manier krijgen we een onderscheid tussen onze HTML-bestanden en onze JavaScript- bestanden.

Laten we het even hebben over de <script></script> tag zelf. Wanneer je code leest van andere mensen, zie je heel dikwijls het 'type' attribuut vermeld in de tag.

vb:

<script src="mijnscript.js" type="text/javascript" />

Deze vertelt niet alleen dat het mijnscript.js bestand een tekst bestand is, maar dat het ook een JavaScript bestand is. Als je dit echter weglaat, dan zal de browser toch nog steeds denken dat het bestand JavaScript bevat. Toch is het 'type'-attribuut nodig als je de regels volgt van W3C.com tijdens validatie van je webpagina. Ook zullen sommige editors deze automatisch willen toevoegen. Het kan aangenamer zijn om het 'type' attribuut te laten staan, maar zonder kan het ook, zeker in HTML5.

Zet je JavaScripts onderaan, net boven de sluitende 'body' tag </body> zodat je zeker bent dat je pagina volledig is geladen vooraleer je je pagina dynamischer maakt. CSS daar en tegen, zet je best bovenaan, zodat deze zo snel mogelijk wordt geladen en je pagina de vorm kan geven die jij bedoelde.