6. Breng uw pagina tot leven met JavaScript

Marc van Oostendorp

Hoofdstuk uit het boek, oorspronkelijk verschenen bij A.W. Bruna Informatica, 1996.

De twee belangrijkste eigenschappen van multimedia-toepassingen zijn ongetwijfeld dynamiek en interactiviteit. Een goede multimedia-toepassing beweegt en nodigt de gebruiker uit iets bij te dragen aan de loop van het programma.

De meeste populaire pagina's op het Web zijn op dit moment gebaseerd op HTML, de markerings-taal waarop we in eerdere hoofdstukken uitgebreider zijn ingegaan. Hoewel HTML de ontwikkelaar gelegenheid biedt om een eenvoudig soort interactiviteit in zijn applicaties te bouwen, zoals met behulp van de META-tag, ontbreekt feitelijk de mogelijkheid om werkelijk dynamische documenten te schrijven. De middelen om een mooie animatie te maken zijn bijvoorbeeld eenvoudigweg niet aanwezig.

In dit hoofdstuk gaan we in op enkele van de technieken die de laatste jaren zijn geïntroduceerd om het Web wat levendiger te maken. Aan de orde komen achtereenvolgens de programmeertaal Java, de programmeertechniek ActiveX en de script-taal JavaScript. Het is niet mogelijk om u hier ook daadwerkelijk te leren programmeren -- dat is een vak apart. Over alle drie de genoemde technieken zijn een groot aantal Web-pagina's beschikbaar en zijn er bovendien in de boekwinkel gespecialiseerde boeken te krijgen en voorlopig zult u als Web-ontwerper uw handen vol hebben aan HTML en de bijbehorende technieken. Alleen met Javascript -- in sommige opzichten het eenvoudigste systeem -- zult u wat uitgebreider kennis maken.

Er zijn overigens nog tal van systemen in de omloop die ook tot doel hebben Web-pagina’s interessanter te maken. Een sprekend voorbeeld is VRML, de taal waarmee een ervaren ontwerper complete virtual reality-werelden kan bouwen. Het gebruik van VRML valt echter verreweg buiten het bestek van dit boek.

Java

Begin 1995 kwam de firma Sun met een pakket dat een einde moet maken aan het statische karakter van het World Wide Web. Dat pakket werd getooid met de enigszins exotische naam Java -- een populair Amerikaans woord voor koffie, na Coca Cola ongetwijfeld de meest populaire drank onder Web-ontwikkelaars.

Sun is zelf met een aantrekkelijk bladerprogramma gekomen. Belangrijker is misschien dat zowel Netscape als Microsoft behoorlijk snel met Java in zee zijn gegaan. In ieder geval in de modernste versies van allebei de programma’s zit ondersteuning van Java ingebouwd. Die twee berichten samen wekken de verwachting dat Java wel eens tot de belangrijkste nieuwe softwareproducten van de jaren negentig zullen kunnen blijken te behoren.

Een Web-pagina in HTML is zoals gezegd een statisch geheel. Het bladerprogramma maakt een verbinding met de server-computer, haalt een pagina binnen, verbreekt de verbinding en toont de pagina op het scherm. Eventueel kan de pagina bestaan uit een video- of geluidsfragment die lokaal (op de computer van de gebruiker) wordt afgespeeld.

Een beperkte mogelijkheid tot interactiviteit bestaat bij sommige informatie-aanbieders in de vorm van zogenaamde CGI-scripts. Dit zijn kleine programmaatjes die op de computer van de informatie-aanbieder kunnen draaien op basis van enkele door de gebruiker in te geven gegevens. Het probleem is dat die programma's niet lokaal draaien maar bij de informatie-aanbieder. De gegevens moeten daarom heen en weer verstuurd worden over het Internet, hetgeen de verwerking niet erg snel maakt. Bovendien zijn de mogelijkheden van CGI in sommige gevallen beperkt en alleen tekst-gebaseerd.

Het zou dus mooi zijn als we aan Web-pagina's ook echte programma's zouden kunnen verbinden die wat actie op de lokale computer zouden kunnen brengen.

Met het versturen van gewone programma's, zoals u die op uw harde schijf hebt staan, over het Internet zijn echter drie problemen verbonden. Allereerst zijn programma's niet uitwisselbaar tussen systemen: een Windows-EXE-bestand kan niet zonder meer op een Mac gedraaid worden en omgekeerd draaien Mac-programma's niet onder Windows. Ten tweede is er een belangrijk veiligheidsaspect: virussen zouden zich bijvoorbeeld wel erg gemakkelijk kunnen verspreiden als programma's vrijelijk over het Net verstuurd konden worden. Het laatste probleem is dat het versturen van programma's erg langzaam is.

Java zorgt voor een oplossing voor alle drie de problemen. Java is een programmeertaal die sterk lijkt op C++, op dit moment een van de populairste programmeertalen in de industrie. Ervaren programmeurs kunnen deze taal dus relatief gemakkelijk leren. In een Web-pagina (bijvoorbeeld geschreven in HTML) kan de ontwerper een koppeling opnemen naar een Java-toepassing, applet genaamd. In plaats van een bestand haalt de browser dan een set Java-instructies op. Zo’n applet kan zelfs net als een GIF-afbeelding, binnen een HTML-pagina worden opgenomen.

In bladerprogramma's als Netscape Navigator en Microsoft Internet Explorer en nog enkele andere zit een zogenaamde interpreter die deze Java-instructies ter plekke vertaalt naar machine-specifieke computeropdrachten. Een Windows-computer vertaalt ze dus naar Windows-instructies, een Mac naar Mac-instructies, enzovoort. Elk Java-programma kan zo op elk systeem gedraaid worden.

Ook de veiligheid is -- in ieder geval volgens Sun -- gegarandeerd, omdat de interpreter alle Java-code aan een aantal tests onderwerpt. Opdrachten die schade zouden kunnen toebrengen worden eenvoudigweg niet uitgevoerd. Er zijn overigens in de loop van de afgelopen jaren enkele foutjes ontdekt in de manier waarop Sun en Netscape de oorspronkelijke ideeën hadde ingebouwd in hun bladerprogramma’s. Ook Microsoft zal ongetwijfeld wat dit betreft nog een keer aan de beurt komen. De onderliggende ideeën zijn echter altijd overeind gebleven.

Tenslotte is de omvang van een Java-programma meestal beperkt omdat allerlei soorten overbodige informatie eruit gefilterd zijn. Alleen de hoogst noodzakelijke informatie om een programma te laten werken wordt overgestuurd, de rest wordt overgelaten aan de computer-specifieke interpreter. Daar staat dan wel tegenover dat die interpreter allerlei extra dingen moet uitrekenen, maar de ervaring leert dat op de meeste systemen dat uitrekenen sneller gaat dan het versturen van grote bestanden.

Toch zijn er wel enkele nadelen. Het belangrijkste is het volgende: Java is weliswaar een vereenvoudigde versie van C++, maar C++ is dan ook wel zo gecompliceerd dat ook Java nog steeds niet erg eenvoudig te bedienen is. Er is nog steeds een stevige studie nodig om een eenvoudige applet te leren schrijven. Bovendien zijn de mogelijkheden van een makkelijk te bedienen en intuïtief te begrijpen zogenaamde visuele programmeeromgeving, zoals Windows-programmeurs die bijvoorbeeld al enkele jaren kennen van Visual C++ en Visual Basic, nog lang niet verwerkelijkt.

Ondertussen is Java met de bijbehorende ontwikkelingsomgeving iets om in de gaten te houden voor iedereen die belangstelling heeft in het bouwen van dynamische Web-pagina's. Met enig doorzettingsvermogen kan het u helpen uw Web-pagina's een stuk interessanter en beweeglijker te maken.

Leer Java op het Web

In ieder geval in theorie kunt u alles wat u over Java zou kunnen willen weten, leren op het Web. Er zijn enkele grote sites die geheel aan het onderwerp gewijd zijn. Allereerst is er de site van Sun zelf (http://www.sun.com/) waar u onder andere de officiële specificatie van Java kunt lezen en een programma kunt ophalen waarmee u zelf Java-programma's kunt maken.

Op de site van de Java Rating Service (Java-beoordelingsdienst, http://www.jars.com/) vindt u lijsten van de mooiste, interessantse en aardigste toepassingen van Java.

De sites Gamelan (http://www.gamelan.com/) en Javaworld (http://www.javaworld.com) tenslotte, zijn een soort on-line tijdschriften met nieuws, tips en truuks, achtergrondartikelen, voorbeelden van andermans werk enzovoort.

Als laatste moet nog de nieuwsgroep comp.lang.java genoemd worden, waar programmeurs met elkaar discussiëren, waar u altijd uw vragen kwijt kan en waar u kunt leren van de vragen en opmerkingen van anderen.

ActiveX en Java

Eind 1995 was Microsoft opeens om. Tot die tijd had men zich bij de software-gigant meestal een beetje laatdunkend uitgelaten over het Internet. Aparte on-line diensten, zoals het eigen MicroSoft Network (MSN), werden veel interessanter gevonden. Maar MSN werd op zijn zachtst gezegd niet zo'n groot succes terwijl de rage rond het Internet almaar grotere vormen aannam. Kleine, door studenten opgezette bedrijfjes als Netscape kwamen uit het niets op en bouwden binnen korte tijd een ontzagwekkend marktaandeel op in deze nieuwe markt.

Dit kon Microsoft zich niet langer veroorloven. Het bedrijf besloot zijn strategie volledig om te gooien en zich te concentreren op het Internet. MSN werd van een aparte on-linedienst omgezet in een gewone Web-site, er werden andere initiatieven op het gebied van informatiediensten gestart -- zoals het elektronische opinieblad Slate (http://www.slate.com). Maar belangrijker dan dit alles is dat het bedrijf zich nu alweer bijna een jaar toelegt op de markt waar het groot in is geworden: software.

Het Microsoft-programma Internet Explorer kan tegenwoordig vrijwel alles wat Netscape Navigator, het bladerprogramma van de directe concurrent, ook kan, en vaak nog meer. De beide bedrijven concurreren om het hardst waar het gaat om de nieuwste snufjes van Web-ontwerp en het inbouwen van programmamodules van derde bedrijven die het mogelijk moeten maken pagina's te bekijken die zich weinig gelegen laten liggen aan de HTML-standaard. Macromedia's Shockwave waarmee Director-filmpjes in een Web-pagina kunnen worden opgenomen worden in de nieuwste versies van allebei de programma's bijvoorbeeld standaard ingebouwd.

Ook zijn in de nieuwe Internet Explorer mogelijkheden opgenomen om pagina's te bekijken waarin wordt gewerkt met één van de programmeertalen Java en JavaScript die tot niet al te lang geleden werden gezien als de sterkste troeven in de handen van de anti-Microsoftbeweging. Beide talen zijn platform-onafhankelijk, wat wil zeggen dat een stuk software dat in deze talen ontwikkeld is op alle soorten computers kan draaien -- zowel op een Apple Macintosh als op een Windows-computer dus, en bovendien ook nog eens op een UNIX-machine. Deze ontwikkeling zou de software-wereld eindelijk, na een hegemonie van vijftien jaren, veel onafhankelijker maken van de grillen van Microsofts Windows.

Maar ook op dit gebied heeft Microsoft een aggressieve strategie ingezet die op twee fronten tegelijkertijd werkt. Enerzijds wordt Java niet alleen ingebouwd in de Internet Verkenner maar zelfs in de nieuwste versies van het besturingssysteem Windows 95 en wordt op deze manier elk mogelijk argument om van Windows af te stappen ten gunste van een op Java gebaseerd systeem. Volgens sommige onderzoeken blijkt Java op Windows 95 zelfs sneller te draaien met Internet Explorer dan met Netscape Navigator.

Mijn eigen ervaring is overigens dat het bladerprogramma van Microsoft echter wel iets sneller vastloopt wanneer hij een vreemde applet tegenkomt.

Tegelijkertijd komt Microsoft met een systeem dat op zijn minst gedeeltelijk als een alternatief voor Java en JavaScript moet worden gezien; maar dan wel een alternatief dat exclusief onder Windows 95 draait: ActiveX.

ActiveX is gebaseerd op Microsofts zogenaamde OLE-techniek. OLE (Object Linking and Embedding, het koppelen en invoegen van objecten) is van oudsher de techniek waardoor verschillende programma's in een Windows-omgeving met elkaar kunnen communiceren; de techniek die het mogelijk maakt dat u bijvoorbeeld gegevens uit een database-programma kopieert naar uw tekstverwerker en die het mogelijk maakt dat u vanuit die tekstverwerker vervolgens het elektronische-postprogramma start.

ActiveX breidt deze samenwerking van Windows-programma's uit naar het Internet. Een ActiveX component kan met een Web-pagina over het Internet worden verstuurd en vervolgens op het lokale systeem samenwerken met andere Windows-programma's. Zo kunnen bijvoorbeeld in Word aangemaakte documenten worden opgenomen in een Web-pagina en kan de gebruiker deze documenten vervolgens zelfs bewerken in zijn Web-browser. Een ander voorbeeld is dat een Web-pagina wordt gekoppeld aan een nieuwsdienst zodat de gebruiker op elk moment dat hij een pagina opvraagt de meest actuele informatie krijgt gepresenteerd. Maar ook animaties of interactieve applicaties kunnen in een ActiveX component worden verwerkt en dus via het Internet worden verstuurd.

De verhouding tussen Java en ActiveX is tamelijk ingewikkeld. Aan de ene kant kunnen met behulp van de juiste ActiveX-component Java-modules worden aangeroepen door elk willekeurig Windows-programma. Aan de andere kant kunnen als het goed is in de nabije toekomst nieuwe ActiveX-componenten in Java worden ontwikkeld. Los van dat alles staat dan nog dat men bij Microsoft ook mogelijk houdt met de mogelijkheid dat Java nauwelijks een rol van betekenis gaat spelen -- dat de meeste ActiveX-componenten zullen werken zonder ooit enioge Java-module aan te roepen en dat Microsofts eigen Visual C++ de voornaamste ontwikkeltaal zal blijven.

JavaScript is een enorm populaire, iets vereenvoudigde, door Netscape ontwikkelde variant van Java die grote populariteit onder Web-ontwikkelaars geniet. Op JavaScript zullen we hieronder nog uitgebreid ingaan. Het is erg eenvoudig om in deze taal extraatjes aan een Web-pagina toe te voegen, zoals lichtkranten, dialoogvensters en dergelijke. Bovendien zijn met JavaScript zogenaamde cookies te benaderen, bestandjes op de harde schijf van de gebruiker waarin elke Web-site een kleine hoeveelheid gegevens kan opslaan. Zo kan een site over meerdere sessies onthouden wat de interesses van de gebruiker zijn en hoe regelmatig hij de site bezoekt.

Ook hier is Microsofts strategie: tegelijkertijd meegaan en een alternatief bieden. Sinds versie 3.0 kan ook de Internet Verkenner modules in JavaScript lezen en komen er waarschijnlijk ook losse ActiveX-modules die het mogelijk maken om in andere Windows-programma's met deze programmeertaal te werken. Tegelijkertijd komt Microsoft met VBScript, een taal die gebaseerd is op Microsofts Visual Basic.

De verschillen tussen Visual Basic en VBScript is vooral gelegen in de beveiliging. Omdat de laatste taal bedoeld is voor verzending via het Internet, zijn er een aantal mogelijkheden uit de eerste taal verwijderd, zodat het in principe niet langer mogelijk is om bijvoorbeeld virussen te schrijven, of programma's die gegevens van de harde schijf wissen.

Er zijn twee grote problemen met de eigen produkten van Microsoft. Ten eerste is ze wel erg sterk gericht op slechts één platform: Windows 95. Een van de redenen voor het grote succes van het Internet was nu juist de platform-onafhankelijkheid. Ook het betrekkelijk recente succes van intranets -- interne netwerken die gebaseerd zijn op Internet-technologie -- moet gedeeltelijk verklaard worden uit het feit dat op een dergelijk netwerk gemakkelijk een groot aantal verschillende systemen kunnen worden aangesloten. Hoewel Microsoft ook een versie van de technologie voor de Apple Macintosh ontwikkeld heeft, zullen versies voor systemen als OS/2 en UNIX nog wel even uitblijven. Op ActiveX-gebaseerde systemen zijn wat dat betreft weer een stapje terug.

Het tweede probleem is zo mogelijk nog serieuzer. Veel kenners wijzen op de gaten die er in de beveilgingsstructuur van zowel ActiveX als VBScript te vinden zijn. Deze gaten hebben te maken met het feit dat Microsofts strategie op OLE gebaseerd is. Deze technologie is ontwikkeld met een indivduele PC in het achterhoofd, hoogstens gekoppeld aan een bedrijfs-intern netwerk. Dat is een situatie waarin beveiliging geen hoge prioriteit heeft. Elke OLE-component heeft daarom in principe onbeperkte toegang tot alle middelen van de computer -- van het intern geheugen tot en met de harde schijf.

Nu hebben ActiveX-componenten en VBScripts zelf deze onbeperkte toegang niet, maar ze kunnen wel onbeperkt met andere OLE-componenten communiceren. Dat betekent dat ze andere Windows-programma's kunnen starten, die dan alsnog vervelend werk kunnen gaan doen. Niemand hoeft eraan te twijfelen dat virusschrijvers creatief genoeg zullen zijn om het destructieve potentieel van deze mogelijkheden ten volle uit te buiten.

Ook over de beveiliging van Java en JavaScript zijn wel negatieve berichten in de pers verschenen. Vervolgens zijn de ontdekte gaten echter weer meteen gedicht en bovendien lijken de problemen niet echt principieel te zijn -- eerder gelegen in de een overhaaste implementatie in sommige programma's. Het genoemde probleem met ActiveX en VBScript raakt echter de kern van deze twee systemen. Het is dan ook niet helemaal duidelijk hoe het opgelost kan worden.

Tegenover deze twee grote nadelen staan wel twee voordelen. Doordat Microsofts technieken sterk op één platform gericht zijn kun je als ontwerper wel technisch het onderste uit dat platform halen. Waar een ontwerper in Java en JavaScript altijd moet uitgaan van een soort grootste gemene deler van de verschillende systemen waarop zijn programma's moeten kunnen draaien, weet een ontwerper van ActiveX-component vrij precies voor wat voor een soort computer hij werkt en kan hij zich daar dus geheel op richten.

Een ander voordeel is dat ActiveX en VBScript gebaseerd zijn op de vertrouwde lijn van visuele programmeertalen van Microsoft. Veel programmeurs hebben ervaring met deze ontwikkelsystemen die bovendien zo'n vijftien jaar de tijd hebben gehad om ontwikkeld te worden. Het zal nog even duren voordat er voor Java en JavaScript instrumenten komen die wat betreft gebruiksgemak en uitgebreidheid de vergelijking met Visual Basic en Visual C++ kunnen doorstaan.

Microsoft veroorlooft zich de luxe op twee paarden tegelijkertijd te wedden: het eigen paard en dat van de naaste concurrent. Zo moet je wel winnen. Welk van de twee paarden uiteindelijk als eerste zal eindigen, blijft echter onduidelijk. Technisch lijken Java en JavaScript op dit moment veelbelovender dan Microsofts alternatieven. Maar Microsoft heeft al vaker bewezen in staat te zijn technisch superieure concurrenten uit de markt te drukken.

ActiveX op het Web

De belangrijkste bron van informatie over het gebruik van ActiveX is -- natuurlijk -- de Web-site van Microsoft (http://www.microsoft.com/activex/). Ook een site als Gamelan biedt overigens informatie over ActiveX.

JavaScript

Het ontbreekt op het Web niet aan standaarden. Naast Java en ActiveX is er nóg een systeem om uw Web-pagina's wat minder statisch te maken. Dat systeem heet JavaScript. De naam is wat verraderlijk. Hij suggereert een duidelijke relatie met Java, en hoewel de twee systemen wel iets met elkaar gemeenschappelijk hebben zijn er toch ook grote verschillen. Eén verschil is dat JavaScript veel beter kan samenwerken met HTML dan Java; een ander verschil is dat het een stuk makkelijker te leren is. Dat is de reden dat we ons hier wat intensiever met JavaScript bezig zullen houden.

JavaScript is grotendeels een uitvinding van de firma Netscape. Het werd oorspronkelijk ontwikkeld onder de naam LiveScript als een systeem om een beperkte form van interactiviteit op Web-pagina's mogelijk te maken. Op het moment dat Java met groot succes geïntroduceerd werd, paste Netscape enkele kenmerken en de naam aan. Netscape Navigator kan vanaf versie 2 JavaScript verwerken. Het programma Internet Explorer kan dit vanaf versie 3, onder de naam JScript.

Een eenvoudig fragment JavaScript

De volgende Web-pagina bevat een een eerst eenvoudig JavaScript-programma.

In de HTML-code neemt u een paar tags <SCRIPT>...</SCRIPT> op. Eventueel kan in de begin-tag nog een attribuut LANGUAGE="JavaScript" worden opgenomen, maar dit is niet verplicht. Tussen dit paar volgt het eigenlijke programma, dat in dit geval bestaat uit slechts één opdracht, genaamd alert (waarschuwing). Deze opdracht wordt -- net als alle opdrachten in JavaScript -- afgesloten door een punt-komma. Deze opdracht roept een klein venstertje te voorschijn. De zin die tussen haakjes en tussen aanhalingstekens staat wordt in het kleine venster vertoond.

Alert!

Sommige gebruikers schrikken nogal van de kreet JavaScript Alert die in het kleine venstertje verschijnt bij Netscape, omdat hij hen doet denken aan een foutmelding of van het waarschuwingsbordje in de Internet Explorer om dezelfde reden. Kunnen we die boodschap nu niet wegwerken om die gebruikers wat op hun gemak te stellen?

Er is een belangrijke reden waarom dit niet kan. Een belangrijke eigenschap van JavaScript -- en van alle goede ontwikkelinstrumenten op het Web -- is veiligheid. Programma's die illegale dingen doen moeten niet geschreven kunnen worden.

Een verleidelijk truukje voor kwaadwillige hackers is het schrijven van een soort nep-interface van bekende programma's. De gebruiker ziet een venster dat precies identiek is aan de vensters die hij kent van zijn eigen favoriete tekstverwerker. zijn spreadsheet of zijn e-mailprogramma. Dat venster nodigt hem uit zijn paswoord in te voeren. De gebruiker doet dit, maar in plaats dat zijn programma geopend wordt, wordt dit paswoord over het Internet verstuurd naar de hacker.

Dat soort nep-programma's moet een hacker niet kunnen schrijven in JavaScript. Vandaar dat aan elk venstertje even een waarschuwing wordt toegevoegd: kijk uit wat u doet, geef geen vertrouwelijke informatie aan dit programma, want het komt van het Internet en het kan ook makkelijk communiceren met de buitenwereld.

JavaScript onzichtbaar maken

De bovenstaande code is nog niet perfect. Bladerprogramma's die geen JavaScript ondersteunen zullen weliswaar het paar tags <SCRIPT>...</SCRIPT> overslaan, maar alles wat daartussen staat zullen ze trouw weergeven. Dat wil zeggen dat uw pagina's op het scherm van de gebruiker vol computercode kunnen lijken te staan.

Het paar tags <!--...--> heb ik al behandeld in hoofdstuk 4. Het zijn de zogenaamde commentaar-tags. Omdat ze nu de complete verzameling instructies omsluiten, worden deze niet op het scherm vertoond. Bladerprogramma's die wel JavaScript kunnen vertonen, negeren de commentaartekens wanneer ze tussen de SCRIPT-tags staan.

In plaats daarvan vindt u in JavaScript-programmaatjes twee andere commentaar-tekens: het teken //, dat u hierboven gebruikt ziet en waarmee u aangeeft dat alles op de volgende regel commentaar zijn die alleen door menselijke lezers bekeken worden en dus kunnen worden overgeslagen door de bladerprogramma's. Daarnaast bestaat het commentaarteken-paar /*...*/. Alles wat tussen deze twee tekens staat, wordt ook weer stelselmatig genegeerd. Dit soort commentaar kan zich over meerdere regels uitstrekken.

Twee voorbeelden van commentaar vindt u in de onderstaande scherafbeelding.

Wanneer u de tekst in het kleine venster wat langer wilt maken dan één zin, zijn er enkele dingen waarmee u rekening moet houden. Ten eerste moet u ervoor zorgen nooit op de Enter-toets te drukken. Die toets zorgt in alle bladerprogramma's voor een vervelende foutmelding

Een teken als '\n' wordt een escape-teken genoemd. Er zijn nog meer escape-tekens. Enkele hiervan worden hieronder opgesomd:

Teken - Beschrijving

\t - Tab
\r - Backspace: het vorige teken moet worden overschreven
\\ - Het teken '\'

Na elk plus-teken mag u overigens wel gerust op de Enter-toets drukken. Zolang u dat maar niet doet terwijl de cursor tussen twee aanhalingstekens staat, is er niets aan de hand.

Een opdracht als alert wordt in JavaScript een functie genoemd. De zin die door de functie wordt vertoond heet een argument. U kunt werken met enkele voorgedefinieerde functies en u kunt ook zelf functies maken. Voorgedefinieerde functies kunnen een groot aantal verschillende taken uitvoeren. Ze kunnen kleine vensters laten zien, berekeningen uitvoeren en zelfs HTML-codes voor ons schrijven. In dit hoofdstuk kunnen niet al die functies aan de orde komen. Maar de belangrijkste zullen we hieronder bespreken.

Voorgedefinieerde functies: prompt

De functie alert biedt u de mogelijkheid een klein venster te tonen, met daarin een korte tekst en een knop waarop de gebruiker op OK kan klikken. Het is ook mogelijk de gebruiker iets te laten invullen in zo'n klein scherm. De functie die daarvoor nodig is heet prompt.

Deze functie heeft twee argumenten. Met de eerste geeft u de vraag aan die aan de gebruiker gesteld moet worden; met de tweede kunt u een suggestie voor een antwoord aangeven.

U hoeft natuurlijk geen suggestie te geven voor een antwoord. Het tweede argument van prompt kunt u ook leeglaten.

De gebruiker kan nu iets invullen in een veld. Maar dat antwoord verdwijnt daarna onmiddellijk in het niets. Het zou aardig zijn als u in plaats daarvan iets meer met dit antwoord kunt doen, als u de naam van de gebruiker bijvoorbeeld kon verwerken in de pagina. Hiervoor moeten we eerst bekijken hoe JavaScript-functies op een pagina in HTML kunnen schrijven.

JavaScript en HTML

Wat JavaScript onderscheidt van Java, is dat het makkelijk kan samenwerken met HTML. JavaScript kan als het ware HTML lezen en schrijven.

De functienaam document.write bestaat uit twee delen. Het tweede deel, write, is de eigenlijke opdracht. Het eerste deel geeft aan wie of wat die opdracht uit moet voeren. Dat is in dit geval het document dat de gebruiker te zien krijgt.

U hoeft document.write niet alleen maar vooraf gedefinieerde HTML-opdrachten te laten neerschrijven. In dat geval was werken met JavaScript alleen een wat ingewikkelder manier geweest om HTML te schrijven. U kunt de opdracht document.write echter op een interessante manier combineren met de opdracht prompt die we eerder hebben gezien.

Deze relatief eenvoudige techniek heeft op de lezer vaak een overweldigend effect. Het verschil tussen een Web-pagina en een gedrukte pagina wordt hiermee in een keer duidelijk: de eerste kan veel interactiever zijn dan de tweede.

Namen onthouden

In het bovenstaande voorbeeld heeft u om een naam gevraagd, die onmiddellijk nadat de gebruiker hem had ingevoerd, op de pagina werd geplaatst. Wanneer u dezelfde naam twee maal op de pagina wilt plaatsen, is dit niet mogelijk zonder de gebruiker ook twee maal om die naam te vragen. Een alternatief is om de invoer van de gebruiker te onthouden met behulp van een zogenaamde variabele. U geeft dit antwoord van de gebruiker een tijdelijke naam, en elke keer wanneer u dit antwoord nodig hebt, roept u die naam aan.

Een voorbeeld kan hier waarschijnlijk veel verduidelijken. Stel dat u in bovenstaand voorbeeld de naam van de gebruiker behalve in de kop ook verderop in de tekst een keer genoemd wordt.

In de eerste regel van het script wordt de variabele gedefinieerd. Hier wordt niet meer gezegd dan: overal waarhieronder in het script naam gezegd wordt, bedoel ik het antwoord dat de gebruiker geeft op de prompt-vraag.

Dit woord naam wordt vervolgens twee keer meegegeven als argument van een functie document.write. Het is uiterst belangrijk dat om dit woord geen aanhalingstekens worden geschreven. Zet u die aanhalingstekens wel, dan wordt alleen het woord naam op het scherm geschreven.

De tijd opvragen

U kunt de gebruiker nu aanspreken op uw pagina. Dat is aardig, maar we kunnen nog iets verder gaan. In plaats van een uniform 'Welkom' op alle tijden van de dag kunt u de gebruiker ook 'Goedemorgen', 'Goedemiddag' of 'Goedeavond' toewensen, naar gelang de tijd van de dag dat hij of zij op uw pagina inlogt.

Die tijd van de dag heeft vrijwel elke computergebruiker ergens in zijn computer staan. In Windows zit bijvoorbeeld een klokje dat deze tijd kan weergeven en in veel tekstverwerkers zit een functie waarmee automatisch de huidige datum en tijd in een document kunnen worden ingevoegd. Een dergelijke functie biedt Javascript ook. Alleen worden hiermee niet de datum en tijd ingevoegd van het moment waarop u als ontwerper het document gemaakt hebt, maar dat van het moment waarop de gebruiker uw pagina leest.

U hoeft er nog niet eens veel voor te doen. Achter de schermen zoekt het bladerprogramma van de gebruiker alle gegevens over datum en tijd voor u op en bewaart deze in een soort grote overkoepelende variabele. Wanneer we die variabele op de juiste manier weten aan te spreken kunnen we er alle informatie aan ontfutselen die we maar willen hebben. Dat aanspreken gebeurt weer met functies.

Om de variabele te kunnen aanspreken moeten we hem eerst een naam geven:

Het woord new is heel belangrijk. Het zorgt ervoor dat de computer van de gebruiker precies genoeg ruimte in zijn geheugen vrijmaakt om alle gegevens over datum en tijd in op te slaan. Daar is niet veel geheugen voor nodig, het is maar weinig informatie. Maar de ruimte moet er wel voor worden vrijgemaakt. Vanaf nu kunnen we aan de variabele nu alles vragen. Bijvoorbeeld hoe laat het is:

De functie getHours geeft het uur van de dag, de functie getMinutes geeft het aantal minuten sinds het vorige hele uur.

De datum weergeven

Op dezelfde manier als de tijd kunnen we ook de datum vragen aan de variabele nu. Het enige probleempje is dat het antwoord dat we krijgen op de vraag naar de maand (getMonth) een getal is. En dat getal is op het eerste gezicht enigszins onlogisch: januari is 0, februari is 1, maart is 2, april is 3, enzovoort. Nu kunnen we op dit probleem twee oplossingen bedenken. De eerste is om bij de getallen voor de maanden telkens één op te tellen. Het resultaat is dan meer gebruikelijk: januari is 1, februari is 2, maart is 3, enzovoort.

Een andere oplossing is om de getallen die de functie getMonth() oplevert, om te zetten. Dat kunnen we zelf doen door de volgende redenering te volgen:

Wanneer u een paar woorden Engels kent, zijn de computer-instructies om deze omzetting van getallen naar woorden te maken niet eens zo gek veel anders.

Het is belangrijk om goed in te gaten te houden dat er twee soorten is-gelijk-tekens worden gebruikt. Een dubbel is-gelijk-teken tussen de haakjes waar twee zaken met elkaar vergeleken en een enkel is-gelijk teken waar een waarde wordt gegeven aan een bepaalde variabele. In het dagelijks spraakgebruik worden die twee dingen -- een vergelijking en een gelijkstelling -- op dezelfde manier benoemd. In de wereld van de computers moeten dit soort zaken uit elkaar worden gehaald.

Iets anders wat u aan deze opdrachten kunt opmerken, is dat u zelfs de spaties die tussen de aanduiding van de dag, de aanduiding van de maand en de aanduiding van het jaar staan expliciet moet aangeven. Wanneer u tegen een computer praat, moet u niet alleen duidelijk zijn, u moet ook alles expliciet zeggen.

De gebruiker op de juiste manier aanspreken

We zijn nu voldoende toegerust om de gebruiker niet alleen met zijn eigen naam aan te spreken, maar hem of haar ook goedemorgen, goedemiddag of goedenavond te kunnen toewensen, naar gelang het uur van de dag.

Deze verzameling instructies behoeft enige uitleg. We zullen haar stap voor stap doorlopen. Allereerst wordt de huidige datum opgevraagd en onthouden als vandaag. Vervolgens wordt gekeken hoe laat het is. Als het aantal uren groter dan 17 is, is het dus avond (want het is 18, 19, 20, 21, 22 of 23 uur) en wordt de lezer een Goedenavond toegewenst. Is het aantal uren kleiner of gelijk aan 17, maar groter dan 11, dan is het middag. Zo wordt de hele dag in stukken verdeeld. Logt de lezer in tussen nul en zes uur, dan krijgt hij Goedenacht op zijn scherm. Uiteindelijk wordt nog de naam van de gebruiker neergeschreven, gevolgd door een uitroepteken.

Bladerprogramma's zonder JavaScript

Elke keer wanneer u een geavanceerde techniek toepast in een Web-pagina, dient u rekening te houden met de gebruikers van bladerprogramma's die die techniek niet ondersteunen. Dat geldt in zeer sterke mate ook voor JavaScript. Niet alleen zijn er op dit moment nog tamelijk veel programma's die deze programmeertaal nog helemaal niet of alleen op een gebrekkige manier ondersteunen, maar zelfs in de meest recente versies van Netscape Navigator of Microsoft Internet Explorer heeft de gebruiker nog de mogelijkheid om alle JavaScript-functies uit te zetten.

Het is daarom belangrijk om al uw pagina's goed te testen op een bladerprogramma waarop geen JavaScript geïnstalleerd is.

JavaScript uitzetten in Netscape en Internet Explorer

Waarschijnlijk heeft u als ontwerper een bladerprogramma aangeschaft dat JavaScript ondersteunt. Wanneer u mijn advies in het eerste hoofdstuk heeft opgevolgd, heeft u bovendien zowel Microsoft Internet Explorer als Netscape Navigator draaien. Om nu nog een derde bladerprogramma te laten draaien, dat in het geheel geen JavaScript begrijpt, wordt misschien een beetje veel van het goede.

In dat geval kunt u ook in een van uw geavanceerde bladerprogramma's tijdelijk JavaScript uitzetten om te bekijken hoe uw pagina's er dan uitzien. U doet dit op de volgende manier. In Netscapte kiest u de mogelijkheid Network Preferences in het menu Options. Vervolgens gaat u naar de afdeling Languages

Door het vinkje voor Enable JavaScript te verwijderen, zet u de JavaScript-mogelijkheden uit.

In de Internet Explorer kiest u de Options in het menu View. Binnen het venstertje dat nu verschijnt, kiest u de afdeling Security.

Hier dient u het vinkje voor de mogelijkheid Run ActiveX Scripts weg te halen.

Bij de ontwerpfase kunt u overigens al een beetje rekening houden met gebruikers zonder JavaScript, bijvoorbeeld door de functie document.write zo min mogelijk werk te laten doen.

Netscape Gold en JavaScript

Anders dan dat bij HTML het geval is, zult u JavaScript-opdrachten in ieder geval voorlopig met de hand moeten invoeren in uw pagina's. Toch biedt Netscape Navigator Gold wel enige ondersteuning voor dit systeem. Het is dus in ieder geval niet noodzakelijk om de opdrachten in een ASCII-verwerker in te voeren wanneer u gewend bent met Gold om te gaan.

Het enige dat u hoeft te doen is de benodigde JavaScript-opdrachten intikken in het bewerkingsgedeelte van Netscape. Het tag-paar <SCRIPT>...</SCRIPT> kunt u daarbij gevoegelijk vergeten.

Vervolgens selecteert u het JavaScript-gedeelte (inclusief het eventuele commentaar). In het menu Properties kiest u het deelmenu Character en daarbinnen de mogelijkheid JavaScript (client). De instructies worden dan als het goed is rood gekleurd.

De toevoeging client verwijst naar het feit dat we hier alleen JavaScript-instructies hebben geschreven die worden uitgevoerd op de computer van de gebruiker, de zogenaamde client. De firma Netscape heeft ook software voor server-computers in de handel. Wanneer uw server over dergelijke software beschikt is het ook mogelijk om JavaScript-instructies te schrijven die worden uitgevoerd op die server.

Meer leren over JavaScript op het Internet

In het korte bestek van dit hoofdstuk hebt u alleen vluchtig kennis kunnen maken met enkele elementaire beginselen van de programmeertaal JavaScript. Gelukkig is ook over deze programmeertaal genoeg te leren op het Internet. De plaats om te beginnen is de site van Netscape (http://home.netscape.com/comprod/products/navigator/version_2.0/script/index.html). Hier vindt u een compleet overzicht van alle beschikbare functies in de taal en over de mogelijkheden om zelf nieuwe functies te definiëren.

Veel sites die over Java gaan, zoals Gamelan (http://www.gamelan.com), hebben ook een speciale afdeling die geheel gewijd is aan JavaScript, met voorbeelden van toepassingen, met tips en truuks en met nieuwtjes. Ook Netscape World, een on-line tijdschrift over Netscape Navigator (http://www.netscapeworld.com/) besteed regelmatig aandacht aan ontwikkelingen rond JavaScript.

Een andere goede bron van informatie is de nieuwsgroep comp.lang.javascript. Net als bij alle nieuwsgroepen dient u vanzelfsprekend een selectie te maken en de onzin die óók voorkomt, zelf weg te filteren.

De meest waardevolle bron van studiemateriaal vormen overigens, net als bij HTML, de honderdduizenden pagina's op het Web die al op de een of andere manier gebruik maken van JavaScript. De keuzemogelijkheid View Source of View Document Source geeft in elk bladerprogramma altijd niet alleen de onderliggende HTML te zien, maar ook alle eventueel gebruikte JavaScript-programma's. Ook JavaScript-programma's kunt u dus vrijelijk kopiëren, zolang u de auteursrechten van de betrokkenen respecteert.

Er zijn zelfs enkele archieven van kleine JavaScript-programmaatjes aangelegd die u op uw eigen pagina's kunt gebruiken. Een voorbeeld van een dergelijk archief is de JavaScript Index van Andrew Woolridge, te vinden op het adres http://www.c2.org/~andreww/javascript/. Hier vindt u een aantal JavaScript-truukjes die u vrijelijk kunt kopiëren en gebruiken voor uw eigen Web-ontwerp, en bovendien verwijzingen naar tal van artikelen en boeken op papier en op het Internet die uitleggen hoe JavaScript werkt.