JavaScript voor beginners

Met HTML kun je fraaie webpagina's bouwen, alleen: ze zijn erg statisch. HTML is dan ook een pagina-beschrijvingstaal en geen echte programmeertaal. Om je homepagina interactief te maken, moet je gebruik maken van een zogenaamde "scripting language" als VBScript of JavaScript. VBScript wordt alleen ondersteund door de Internet Explorer van Microsoft. JavaScript daarentegen wordt ondersteund door Internet Explorer, Netscape Navigator en vele andere webbrowsers, en is daarom de aangewezen taal om te gebruiken als je pagina met verschillende browsers zal worden bekeken.

In een elfdelige serie^* zal ik je wegwijs proberen te maken met JavaScript. Daarbij ga ik er van uit, dat je al wel wat basiskennis hebt op het gebied van computers, het Internet en HTML, maar nog niets weet van JavaScript. Heb je ervaring met programmeren in een andere taal, dan is dat meegenomen; noodzakelijk is het echter niet.

In deze inleiding wil ik allereerst iets vertellen over de geschiedenis van JavaScript. Vervolgens geef ik een beknopt overzicht van de cursus, zodat je weet wanneer welk onderwerp aan de orde komt. Daarna ga ik kort in op het verschil tussen Java en JavaScript. Tenslotte komen we toe aan ons eerste script, en zal ik laten zien hoe je dat gebruikt binnen je HTML-pagina.

Geschiedenis

JavaScript werd ontwikkeld door Netscape als script-taal voor de Navigator webbrowser, en heette oorspronkelijk LiveScript. De taal werd eind 1995 "geadopteerd" door Sun (de ontwikkelaar van Java) als open script-standaard voor het Internet, en kreeg toen de naam JavaScript. De ondersteuning door Sun leidde er toe dat vele andere bedrijven JavaScript als standaard erkenden; voorbeelden hiervan zijn America Online, Apple, Borland en Oracle.

Ook Microsoft besloot de taal te gaan ondersteunen in Internet Explorer. De implementatie van Microsoft verschilt echter op subtiele wijze van die van Netscape, en draagt de naam JScript.

Eind 1996 werd JavaScript door Netscape als standaard voorgedragen aan ECMA (het Europese instituut voor standaardisering), hetgeen leidde tot ECMA-standaard 262 (ECMAScript), die in medio 1997 werd aanvaard.

Oorspronkelijk was JavaScript bedoeld als "client-side" script-taal, dat wil zeggen dat de scripts worden uitgevoerd door de webbrowser. Inmiddels bestaat er ook een "server-side" versie van JavaScript: hiermee kunnen programma's worden geschreven die worden uitgevoerd door de webserver. Dat betekent dus dat een website gebruik kan maken van JavaScript faciliteiten, of de browser van een bezoeker die taal nu wel of niet ondersteunt. Door Netscape is server-side JavaScript opgenomen in de LiveWire omgeving, en door Microsoft in Active Server Pages. De server-side versies van JavaScript bevatten server-specifieke uitbreidingen waarmee bijvoorbeeld gegevens in een database kunnen worden benaderd.

Al met al bestaan er dus nogal wat varianten van JavaScript. In deze cursus zal ik het grootste gedeelte van de tijd de "generieke" vorm van JavaScript behandelen. Een enkele keer zullen zaken aan de orde komen die specifiek zijn voor een bepaalde omgeving; in die gevallen zal ik dat er nadrukkelijk bij vermelden. Eén belangrijke tip wil ik je echter nu al geven: test je scripts altijd zowel met Microsoft Internet Explorer als met Netscape Navigator, tenzij je absoluut zeker weet dat de bezoekers van je site slechts één van deze browsers gebruiken (dat kan met name het geval zijn als sprake is van een Intranet-applicatie).

Overzicht

Nu we in vogelvlucht door de geschiedenis van JavaScript zijn gegaan, wil ik in het kort vertellen wat er in de verschillende afleveringen van deze cursus allemaal aan de orde zal komen.

1. Inleiding: achtergrond en basisbegrippen

Hierover kan ik kort zijn: het is de tekst die je nu onder ogen hebt!

2. Herhalingslussen en logica

Soms hoef je een bepaalde handeling maar een keer uit te voeren, maar in veel gevallen is het nodig die handeling verschillende keren te herhalen --hetzij een vast aantal keren, hetzij tot een bepaald resultaat is bereikt. Ik zal laten zien hoe je in JavaScript herhalingslussen programmeert, en hoe je gebruik kunt maken van logische tests: ALS de bezoeker jonger is dan 12 jaar, DAN is de toegangsprijs vijf gulden, ANDERS is de toegangsprijs tien gulden.

3. Functies

Stukjes script kunnen soms op meerdere plaatsen gebruikt worden. In dergelijke gevallen is het vaak handig om er functies van te maken: je hoeft dan minder in te tikken, je pagina's worden kleiner, en eventuele wijzigingen hoef je maar op een plaats aan te brengen. JavaScript telt diverse ingebouwde functies voor taken die regelmatig voorkomen bij het programmeren --zo hoeft niet iedereen steeds opnieuw het wiel uit te vinden. Het is echter niet moeilijk om zelf functies te schrijven als je een taak hebt waarvoor geen ingebouwde functie bestaat.

4. Operators

JavaScript gebruikt diverse "operators" voor het uitvoeren van berekeningen en vergelijkingen, het manipuleren van individuele bits, en het toekennen van waarden aan variabelen. In deze aflevering laat ik zien welke operators er zijn en hoe ze gebruikt worden; daarbij komen ook de "voorrangsregels" aan de orde.

5. Arrays en strings

In het verleden dacht men bij de term "programmeren" direct aan het uitvoeren van ingewikkelde berekeningen. Denk maar aan een vroege programmeertaal als FORTRAN: de naam is afgeleid van FORmula TRANslator, dus een taal voor het omzetten van wiskundige formules naar een computeromgeving. Tegenwoordig weten we dat computers ook heel goed gebruikt kunnen worden voor het manipuleren van tekenreeksen ofwel "strings". Ik zal laten zien hoe JavaScript hier mee omgaat; ook de met strings verwante "arrays" komen hier aan de orde.

6. Objecten

De arrays en strings uit de vorige aflevering zijn strikt beschouwd in JavaScript "ingebouwde" objecten. In deze aflevering komen de eigenschappen en methoden van enkele andere ingebouwde objecten als Date en Math ter sprake. Daarnaast zal ik iets vertellen over objecten die je zelf definieert, en over zogenaamde browser-objecten.

7. Forms

Een belangrijke toepassing van JavaScript is het controleren van de gegevens die door de sitebezoeker op een formulier zijn ingevuld. Een eenvoudig voorbeeld daarvan is: het script constateert dat een verplicht veld niet is ingevuld, en vraagt je om dat alsnog te doen. Ingewikkelder controles zijn ook denkbaar: als bij vraag 5 is ingevuld dat sprake is van een huurhuis, dan mag bij vraag 9 geen huurwaardeforfait worden ingevuld; was echter sprake van een koophuis, dan moet juist het huurwaardeforfait worden ingevuld.

8. Events

Vroeger werkten programma's zeer rechtlijnig: eerst werd stuk A uitgevoerd, vervolgens stuk B, en tenslotte stuk C. Moderne programma's zijn minder voorspelbaar: er kunnen allerlei "events" ofwel gebeurtenissen plaatsvinden, vaak als gevolg van handelingen van de gebruiker, en verschillende routines binnen het programma handelen die gebeurtenissen af. Klikt de gebruiker bijvoorbeeld een button aan, dan wordt A uitgevoerd; komt de muispointer boven een plaatje, dan wordt B uitgevoerd; en verlaat de gebruiker een invoerveld, dan wordt C uitgevoerd. In deze aflevering bespreek ik, wanneer welk event kan optreden, en hoe we events in onze programma's kunnen afhandelen.

9. Frames en navigatie

Het kan handig zijn om een webpagina op te delen in een aantal "frames", bijvoorbeeld een menu aan de linkerkant van het scherm en de "hoofdpagina" rechts daarvan. Met JavaScript kun je vanuit het ene frame de inhoud van het andere beïnvloeden, al zijn er goede redenen om hier spaarzaam gebruik van te maken. In deze aflevering laat ik zien hoe je in JavaScript omgaat met frames, en welke problemen hierbij op kunnen treden.

10. Cookies

Ze zijn geliefd bij de marketingmensen omdat ze een individuele benadering van websurfers mogelijk maken, maar gehaat bij veel Internet-gebruikers omdat ze een inbreuk kunnen vormen op hun privacy... Cookies maken het mogelijk om gegevens over een sitebezoeker te verzamelen en vast te leggen, zodat deze bijvoorbeeld bij een volgend bezoek aan de site kan worden begroet als "oude bekende". In de voorlaatste aflevering zal ik laten zien hoe je cookies gebruikt vanuit JavaScript.


11. Troubleshooting en geavanceerdere onderwerpen

In de laatste aflevering zal ik het hebben over enkele problemen die je tegen kunt komen bij het programmeren in JavaScript. Zodra je "interessante" scripts begint te schrijven, is er een goede kans dat ze niet meteen doen wat je wilt, of dat ze bijvoorbeeld wel werken met de ene browser maar niet met de andere. Natuurlijk zal ik ook laten zien hoe je deze problemen kunt oplossen.

Java en JavaScript

Je weet nu, waarover we het in deze cursus zullen hebben. Voordat we nu eindelijk aan ons eerste programmaatje in JavaScript toekomen, wil ik nog enkele woorden wijden aan iets dat een enkele maal tot verwarring leidt: de verschillen tussen Java en JavaScript.

De naam van de twee programmeertalen Java en JavaScript suggereert dat ze nauw aan elkaar verwant zijn, en er zijn inderdaad overeenkomsten: de syntaxis (zeg maar: de schrijfwijze en de regels voor het gebruik) van JavaScript lijkt sterk op die van Java, en in beide talen is het uit veiligheidsoverwegingen onmogelijk gemaakt om direct naar de harde schijf te schrijven.

Er zijn echter ook belangrijke verschillen. Sommige daarvan zijn wat technisch voor een beginnerscursus (zo is Java een echte object-georiënteerde taal die volledig uitbreidbaar is met "klassen" en "overerving"; JavaScript daarentegen is een op objecten gebaseerde taal die maar beperkt "uitbreidbaar" is), maar enkele andere verschillen wil ik hier zeker noemen.

Allereerst is daar het al dan niet gecompileerd worden. De broncode van een Java-programma wordt eerst door een Java-compiler vertaald naar "byte-code" die hetzelfde is voor ieder platform (Windows, Macintosh, etc.). De byte-code wordt vervolgens uitgevoerd door een "runtime interpreter" die wèl per platform verschilt. Als eindgebruiker krijg je de Java-broncode normalerwijze nooit te zien.

JavaScript daarentegen wordt niet gecompileerd maar direct geïnterpreteerd. De JavaScript-broncode is opgenomen binnen de HTML-pagina, en gewoon te bekijken m.b.v. "View Source". Dat heeft nadelen --iedereen kan zien hoe je programma werkt, dus van beveiliging is nauwelijks sprake, en geïnterpreteerde talen zijn doorgaans trager dan gecompileerde--, maar ook voordelen. Je kunt bijvoorbeeld leren van voorbeelden: als je op het Web een pagina tegenkomt die iets indrukwekkends doet met JavaScript, kan je zonder problemen bekijken hoe het is geprogrammeerd. Je kunt zelfs stukjes broncode kopiëren en in je eigen pagina's opnemen. (Het is overigens wel zo netjes om daarbij te verwijzen naar de oorspronkelijke auteur!) Daarnaast hoef je bij het ontwikkelen van een JavaScript-programma niet te compileren voordat je kunt testen, hetgeen de "ontwikkelingscyclus" vereenvoudigt.

Een tweede verschil heeft te maken met de variabelen die in programma's gebruikt worden. In Java moeten we van tevoren opgeven wat het type van die variabelen is ("strong typing"); in JavaScript hoeft dat niet ("loose typing").

Een laatste verschil is de mate van integratie met de HTML-pagina. Java-programma's staan op zichzelf (ze worden in de HTML-pagina ingebed met behulp van een speciale "tag", maar moeten vervolgens nog apart van de server worden opgehaald). JavaScript programma's daarentegen zijn nauw verweven met de rest van de HTML-pagina.

Gewapend met deze achtergrondkennis zullen we nu zien hoe je een eenvoudig script schrijft, en hoe je het precies opneemt in je pagina.

Hello, world: ons eerste script

We zullen ons houden aan de goede traditie die zegt dat ons eerste programmaatje in een nieuwe programmeertaal de woorden "Hello, world" op het scherm zet. In JavaScript kan dat met de volgende opdracht:

document.write("Hello, world")

(In plaats van dubbele aanhalingstekens " mag je ook enkele aanhalingstekens ' gebruiken.) Zoals we later nog zullen zien, maken we hier gebruik van het ingebouwde "object" document, en gebruiken daarvan de "methode" write.

We lopen hier overigens direct al aan tegen een verschil tussen Internet Explorer en Navigator. JavaScript is namelijk "case sensitive", hetgeen betekent dat er een verschil wordt gemaakt tussen hoofdletters en kleine letters. De opdracht moet daarom precies zo worden geschreven als hierboven is aangegeven; schrijven we bijvoorbeeld Document met een hoofdletter, dan is dat fout.
In Navigator krijg je in dat geval een foutmelding. Internet Explorer daarentegen accepteert schrijfwijzen met hoofdletters wèl. Om dit soort problemen op het spoor te komen, zou je dus altijd minimaal met deze twee browsers moeten testen!

We weten nu, welke opdracht we moeten gebruiken, maar nog niet, hoe we die opdracht opnemen in onze HTML-pagina. Dat gaat heel eenvoudig: door de opdracht tussen SCRIPT-tags te zetten. Recentere browsers die scripting ondersteunen, weten dat de tekst tussen deze tags een stukje script is (de verstekwaarde voor de script-taal is JavaScript). Oudere browsers die geen scripting ondersteunen, negeren de tags (zoals alle tags die ze niet kennen).

Onze HTML-pagina bevat inmiddels het volgende:

<HTML>
<SCRIPT>
document.write("Hello, world")
</SCRIPT>
</HTML>

Dat lijkt voldoende, maar er is nog één probleem. Oudere browsers zullen de SCRIPT-tags weliswaar negeren, maar de tekst ertussen behandelen als gewone tekst. In ons geval komt er dus document.write("Hello, world") op het scherm te staan.

Om dit te voorkomen, gebruiken we het volgende foefje. We zetten onze JavaScript-regel tussen de tekens die HTML gebruikt voor het aangeven van commentaar, dat wil zeggen: <!-- vóór het script en --> erachter.

Tenslotte zetten we nog // voor de tekens waarmee je in HTML het commentaar afsluit. (JavaScript behandelt alles wat op een regel geplaatst is na de tekens // als commentaar. Is je commentaar meer dan een regel lang, dan zet je de tekens /* ervoor en */ erachter.) Al met al ziet ons script er nu als volgt uit:

<HTML>
<SCRIPT>
<!-- Afschermen voor oude browsers
document.write("Hello, world")
// Einde afscherming -->
</SCRIPT>
</HTML>

We hebben nu gezien hoe je een eenvoudig script in een HTML-pagina opneemt. In de volgende aflevering zullen we zien hoe we, d.m.v. lussen of "loops" opdrachten herhaaldelijk of alleen onder bepaalde voorwaarden kunt uitvoeren; daarbij komen ook de zogenaamde "variabelen" aan de orde.

---

^*Deze cursus, geschreven door Marcel Feenstra, verscheen eerder in het tijdschrift Net Magazine.