HTML-pagina's zijn statisch. U zit nu naar deze pagina te kijken (waarvoor mijn dank) maar u kunt er niets aan veranderen. Het is te vergelijken met een boek, een krant of een brief: er staat informatie op papier, danwel op een beeldscherm, en dat is het dan. Het is éénrichtingsverkeer. De gebruiker kan niet verder gaan dan van de ene pagina naar de andere gaan.
U kunt zich voorstellen dat er behoefte kan bestaan aan wat meer "gebruikersinbreng". JavaScript geeft daar mogelijkheden voor. Ik zeg er gelijk bij dat u zich er geen overdreven voorstelling van moet maken. (Tenzij u tot de zeer gevorderden gaat behoren, wellicht.)
HTML is een opmaaktaal: een verzameling opdrachten die betrekking hebben op het weergeven van een tekst. JavaScript is een programmeertaal: een kluit instructies waarmee je een programma bouwt dat "iets doet". Dat betekent onmiddellijk dat het veel complexer is dan HTML, en een veel meer geordende denkstijl vergt. (Dat betekent dat u hier zo langzamerhand inderdaad "echte code" zou gaan produceren.) Om u een redelijk beeld te geven, zou ik (minimaal) even veel ruimte nodig hebben als deze hele cursus. Ik kom dus niet verder dat u een beetje "er aan te laten ruiken". Mocht uw interesse gewekt zijn, dan moet ik u toch verwijzen naar uw plaatselijke bibliotheek.1
Mocht u het navolgende lastig vinden: bij voorbaat mijn excuses. Het is gewoon moeilijk. Duidelijker dan dit kon ik het niet krijgen.
De term "script" komt in meerdere programmeersituaties voor. Het betekent zoiets als "setje bij elkaar horende opdrachten die achtereenvolgens worden uitgevoerd". Kenmerkend voor scripts is dat ze als een gewoon tekstbestand worden gemaakt, en door een programma worden gelezen, vertaald naar voor hem begrijpelijke opdrachten en worden uitgevoerd. Dat vertaalproces staat bekend als "interpreteren". (Dit systeem heeft als "tegenpool" de methode waarbij die set opdrachten eerst worden vertaald in machinetaal ("gecompileerd") en als direct uitvoerbare instructie aan het programma worden aangeboden.)
Scripttalen plegen wat eenvoudiger te zijn, maar trager, vanwege die "vertaalfase". Verder plegen scripttalen met hetzelfde huis-tuin-en-keuken gereedschap te kunnen werken als u nu met HTML doet.
Er is ook nog een ding geheten Java. Dat is de "grote broer": een compilertaal, waarvoor een apart programma nodig is (dat overigens gratis te verkrijgen is, op www.sun.com).
Java valt beslist buiten het bestek van dit cursusje, maar één ontmoedigende opmerking wil ik alvast maken. Om de zoveel tijd blijkt er weer een veiligheidslek in een browser te zitten, dat door kwaadwillende programmeurs misbruikt wordt om schade aan te richten op pc's van bezoekers. Om die reden kan het gebruik van Java uitgeschakeld worden. Met name beheerders van bedrijfsnetwerken doen dat nogal eens. Het gevolg is dat het Java-gedeelte van uw pagina's niet (of fors verminkt) wordt weergegeven. Ik zou zeggen dat dat betekent dat naarmate de kans groter is dat uw site "op het werk" bezocht wordt, de kans dat u met Java de zaak verziekt groter wordt. In zo'n geval een duidelijk argument contra Java, lijkt me.
Mocht u er na het bovenstaande nog steeds zin in hebben: er zijn op Internet legio sites waar "voorgebakken" programmaatjes te downloaden zijn. ("Applets", in het jargon.) Die gaan dan over zaken als menustructuren of zo, en die kunt u dan zelf aanpassen. Soms niet onaardig, maar het is, naar ik begrijp, ook voor ervaren HTML-bouwers een tamelijk tijdrovende kwestie om die dingen aan de praat te krijgen. Anyway, kijkt u zelf maar.
Er komen een paar nieuwe begrippen om de hoek kijken. Ik denk dat ik maar het beste een voorbeeldje kan geven. Ik zou zeggen: haal van deze pagina even de code op, en print die uit. Dat praat wat makkelijker. Ook de hierna te bespreken voorbeelden worden hopelijk duidelijker als u de code erbij neemt.
Stel, u wilt een persoonlijke noot aan uw pagina toevoegen: de gebruiker wordt eerst naar zijn naam gevraagd, en daarna wordt die naam verder op de pagina gehanteerd. Vult u hieronder uw naam (of een fictieve naam)2 in, en klikt u op de knop.
U ziet een message-box met uw naam verschijnen. (Die kunt u weer wegklikken.) Wat er "achter de schermen" gebeurd is: er is een variabele aangemaakt geheten "naam_van_gebruiker", en de ingevulde naam is daar aan toegekend. Om het populair te zeggen: de variabele is, voor de duur van het gebruik van deze pagina, gevuld met die naam.
Als u de code bekijkt, ziet u bovenaan (in de header-sectie) en halverwege nieuwe dingen voorkomen. Bovenaan staan <SCRIPT> en </SCRIPT>-tags. Dat geeft aan dat er een script staat. In dat script wordt eerst een variabele gedeclareerd, geheten "naam_van_gebruiker".3 Vervolgens wordt er een functie gemaakt, geheten "haal_naam()". In die functie wordt eerst gezegd dat er binnen dit document gezocht moet worden naar een object, aangeduid als "naam_form", en binnen dat object naar een object "naam_gebruiker". De waarde ("value") van dat laatste object moet worden toegekend aan de variabele "naam_van_gebruiker". (Dat gebeurt met dat =-teken.) In regel 2 wordt een "voorgebakken" instructie genoemd: de term "window.alert" betekent "zet een message-box neer". De boodschap bestaat uit de inhoud van die variabele "naam_van_gebruiker".
In de body ziet u de tags <FORM> en </FORM> voorkomen. Daartussen wordt een formulier gedefinieerd: een ding waar een gebruiker iets kan invullen of keuzes kan kenbaar maken. Dan komt er de tag <INPUT>, met hier drie attributen. De eerste geeft aan dat er een text-box bedoeld is: zo'n veld waarin iets kan worden ingevuld. De tweede geeft aan hoe dit invoerveld heet ("naam_gebruiker"): dat hebben we bovenin dus nodig om te weten waar we het over hebben. Het derde attribuut zegt dat de textbox 30 tekens moet kunnen bevatten. (Een langere naam kan overigens gewoon worden ingevuld.)
De tweede regel heeft het ook over een INPUT-tag, maar nu van het type "button: er wordt een knop neergezet, waar de gebruiker op kan klikken. Ook daar hoort een naam bij, "bevestig", en er wordt verteld hoe het opschrift van die knop moet luiden (VALUE="Naam klopt"). Tenslotte wordt er gezegd wat er moet gebeuren als er op die knop geklikt wordt. (Om even technisch te worden: welke actie er moet worden ondernomen als er een "onClick"-event gegenereerd wordt.) De gewenste actie is: zoek een functie op geheten "haal_naam()" en draag de controle daaraan over.
Houdt u de diverse namen goed in de gaten: het tekstveld op het formulier heet "naam_gebruiker", en de variabele heet "naam_van_gebruiker". Een object en een variabele zijn verschillende zaken.
U kunt zich nu in hoofdlijnen voorstellen wat er gebeurt. Als de pagina geladen wordt, wordt die functie "meegenomen", maar er gebeurt nog even niets mee4. Een functie moet namelijk eerst worden aangeroepen. Ook het formulier wordt geladen, maar daar wordt nog even niets mee gedaan. Eerst het klikken op de knop leidt tot actie. De functie wordt uitgevoerd. Er wordt opgezocht wat er in dat formulier in het veld "naam_gebruiker" is ingevuld; vervolgens wordt dat in de variabele "geschoven", en daarna wordt dat als boodschap meegegeven aan de message-box.
We hebben hierboven heel gezellig met variabelen heen en weer geschoven, maar dat de gebruiker heet zoals hij heet weet hij zelf ook wel. Leuker wordt het als je met variabelen gaat rekenen.
Voorbeeld: een dingetje dat euro's terugrekent naar guldens. (Ik neem aan dat u dat net als ik ook nog regelmatig zit te doen...) Een ingevoerd bedrag in euro's wordt doorgegeven aan de functie, en dan binnen die functie vermenigvuldigd met 2.20371, en het resultaat wordt teruggestuurd naar het formulier als zijnde het bijbehorende bedrag in guldenss. (Dat zou heel goed in net zo'n venster gezet kunnen worden, staat wel netjes. U zou dan net zo'n formulier gebruiken, met als naam van dat invoerveld "bedrag_guldens" of zo. In het script zou u vier variabelen declareren. en de functie zou uit drie opdrachten bestaan: haal guldensbedrag op en zet in variabele; reken om in euro-bedrag; zet dat neer in die textbox.
Om het u niet te moeilijk te maken heb ik een pagina gemaakt met zo'n euro-naar-gulden calculator. Die vindt u hier. Kijkt u ook hier in de code om te zien hoe ik het voor elkaar gekregen heb.
U bent ze ongetwijfeld tegengekomen: menu's die u naar beneden klapt, en dan uit een aantal mogelijkheden kiest. Dat is in JavaScript, met wat oefenen en nauwkeurig werken, goed te doen. U vindt hier een voorbeeld.
In de code ziet u dat er in de function met de term "location" gewerkt wordt. Ik vind hem niet helder, maar het staat voor iets als "neem die en die pagina en zet hem als 'huidige pagina' in het actieve venster". In de body ziet u een andere tag: <SELECT> ... </SELECT>, met daartussen <OPTION VALUE="...">. Achter de ">" staat dus de tekst zals die in de menu-box terecht komt.
Neemt u even de tijd om de bewoordingen van de function na te lopen. Om een mij niet duidelijke reden moeten er twee stappen doorlopen worden: eerst wordt de variabele "pagina" gedeclareerd als "het gekozen element van die-en-die SELECT-lijst van dat-en-dat formulier", en daarna wordt de variabele "pagina_waarde" gevuld met de inhoud van dat element in die lijst. Ik zou zeggen: als u deze truc gaat toepassen, gewoon ook zo doen.
Ook hier wordt met een knop gewerkt: het onClick-event roept de functie aan. (Als ik het goed begrepen heb, kun je het ook zo doen dat een selecteren van een item uit het menu als event geldt. Maar laat dat nou maar zitten, het is zo al lastig genoeg.)
Als u een meer dan minimale surfer bent, zult u tientallen popup-vensters tegengekomen zijn (en geïrriteerd weggeklikt hebben) ("Get Rich Quick!" "Free Cash!" "Make Unlimited $$$!"). Alle reden dus om wraak te nemen, en uw website van uw eigen popup-venster te voorzien.
Een popup-venster is in feite een gewone pagina, maar dan verkleind tot een opgegeven formaat, en gestript van enige accessoires. De grootste bijzonderheid is (uiteraard) dat hij opgehaald wordt zonder tussenkomst van de gebruiker. Dat bereikt u door het laden van pagina A (uw index-pagina, bijvoorbeeld) te laten fungeren als "event" dat het laden van pagina B veroorzaakt. Die pagina B is dan de reclamepagina. Ik heb een poging gewaagd om zo'n popup-screen te maken, zie hier.
Met pagina B is verder weinig aan de hand. U zult uiteraard wel rekening moeten houden met het geringe formaat, maar dat is gewoon een kwestie van de tekst en de afmetingen op elkaar afstemmen. Het werk wordt gedaan in pagina A. Als u in de code kijkt, zie u dat de BODY-tag is uitgebreid. Er is een "onLoad"-event gebruikt: het laden van pagina A leidt tot het aanroepen van de in het script vermelde functie. In die functie wordt gezegd welke pagina geladen moet worden, en worden enige bijzonderheden gespecificeerd. Om precies te zijn: er wordt in de regel "popupvenster = (...) height=100");" achtereenvolgens gezegd: (a) definieer een nieuw object geheten "popupvenster", (b) laat dat een nieuw venster openen, (c) vul dat venster met het bestand "htmlcursus_reclame.html", (d) om mij onbekende redenen wordt de naam van dat object herhaald, (e) laat in dat nieuwe venster de statusbalk weg, (f) laat de toolbar weg, (g) laat de invulruimte voor de URL weg, (h) laat de menubalk weg, (i) stel de breedte in op 250 pixels, (j) stel de hoogte in op 100 pixels5.
Het effect is te voorspellen: pagina A wordt gewoon geladen, en gaat verder zijn eigen gang. Het popup-screen wordt er boven op gezet, en doet niets dan hinderlijk in de weg zitten.
Misschien vindt u het leuk om uw lezers aan te spreken met een aan de tijd van de dag aangepaste groet. Dat kan, met enig gepruts. Ik laat eerst de code zien, en loop hem daarna met u door. Dit script komt in de body van uw document te staan, in dit geval zou het typisch op de eerste pagina staan, net onder de koptekst. (Ik vrees dat u, als u dit verhaal wilt gebruiken, het even moet overtikken. Misschien lukt het met kopiëren-en-plakken.)
Er wordt een variabele aangemaakt geheten "actuele_datum". De wordt gevuldmet de inhoud van het in Javascript "ingebouwde" object Date. In de volgende regel wordt uit die informatie (dat Date-object is meer te zien als "nu") één aspect gelicht: het uur-getal. Dat gebeurt met de eveneens ingebouwde methode "getHours". Dat gegeven wordt in de variabele "actuele_uur" gestopt.
Dat uur-getal wordt gebruikt in de daarop volgende IF-THEN constructie. Er wordt eerst gekeken of het getal kleiner is dan 4, wat het geval is als het op de pc van uw bezoeken tussen de 00.00 en 03.59 is. In dat geval komt de eerste tekst op het scherm. Zo niet, dan wordt gekeken of het uur-getal kleiner dan 7 is, dus 06.59 of vroeger. If so, dan nemen we de daarbij behorende tekst. Enzovoorts. Als alle mogelijkheden afgewerkt zijn, is het script klaar en gaan we verder met "Ook op dit tijdstip...).
Volledigheidshalve: dit script wordt uitgevoerd zodra de pagina (opnieuw) geladen wordt. Het is dus niet zo dat de gebruiker op gezette tijden de begroeting ziet "verspringen". Daar zijn weer andere trucs voor nodig.
Ik heb elders in dit cursusje gezegd dat uw gehele site voor iedereen toegankelijk is. Een zekere mate van "afschermen" van delen van uw site kunt u bereiken met de volgende truc, die niet verschrikkelijk veilig is, maar meestal wel toereikend zal zijn. Ik moet hier toegeven dat ik heb zitten spieken in Hét Boek Webdesign van Florian Schäffer, uitg. Easy Computing; een aanbevelenswaardig boek.
De grap is dat u de gebruiker vraagt om een wachtwoord in te typen, en dat dat wachtwoord dan de naam van de "geheime" pagina is, minus het ".htm"-stuk. In een functie binnen de pagina wordt dat er dan aan geplakt, en de aldus omschreven pagina aangeroepen.
In de body van de "vertrekpagina" zet u dan een klein formuliertje, bestaande uit:
In de head zet u de functie, bestaande uit:
Het effect is dat bovenop de "vertrekpagina" een invoerscherm voor het wachtwoord wordt geopend, waar de gebruiker wat moet invullen. Als hij dan op OK klikt, wordt die functie uitgevoerd. Als het wachtwoord fout is, is het resultaat dat er een niet-bestaande pagina wordt aangeroepen, en er dus gewoon een foutmelding komt.
Echt dramatisch veilig is het niet, maar als u de naam van die pagina lekker ingewikkeld maakt ("df7he54QK", of zo) is de kans klein dat iemand er toevallig op stuit.
Die zijn legio. Om te beginnen: het luistert allemaal vreselijk nauw, qua syntax. De naam van een functie moet eindigen met "()". Elke regel in een functie moet eindigen met ";". Alle regels in een functie moeten voorafgegaan worden door "{" en opgevolgd worden met "}". Een verwijzing naar een object is opgebouwd uit een ingewikkeld stelsel van "document - punt - object - punt - property", en soms is dat plotseling "haakje - object - haakje". Waarom en wanneer precies, is mij vaak niet duidelijk. Verder heb ik de indruk dat JavaScript en CSS nogal eens ruzie met elkaar hebben. Ook heb ik gemerkt dat binnen een formulier slechts beperkt met opmaakcodes gewerkt kan worden. (In bovenstaand voorbeeld van het dropdown-menu is het niet mogelijk het lettertype en -grootte te wijzigen. Een "DIV STYLE="-constructie leidde weliswaar niet tot foutmeldingen maar werd gewoon genegeerd.) Voor opschriften op knoppen geldt hetzelfde, en het formaat van een knop is ookniet te beïnvloeden.
U zult merken dat u, ook als u alles letterlijk overtikt, uw scripts in het begin alleen maar tot foutmeldingen leiden. Het enige dat ik u kan adviseren is: doe het in hele kleine stapjes, begin met iets simpels, en heb vooral veel geduld en volharding. Leg het boek er gewoon naast: HTML is vaak best wel "intuïtief" in de zin van "ik denk dat als ik nu dit doe, het effect dat is". JavaScript is dat beslist niet. Het blijft lastig (althans voor mij).
Alles bij elkaar vind ik zelf de verhouding tussen de hoeveelheid inspanning en het nut van scripts niet zodanig dat ik er gebruik van maak. Maar daar mag u uiteraard anders over denken. Even goeie vrienden!
Tot slot nog één wat uitgebreider voorbeeld. Op de websites van banken zit vaak een mogelijkheid om een indicatie te krijgen van wat u, gegeven uw inkomen, aan hypotheek zou kunnen krijgen. Ik heb ook zoiets geprobeerd6, zie hier. Er wordt een ingevoerd maandinkomen opgehaald, er wordt mee gerekend, en er komt een maximaal hypotheekbedrag terug.
Mocht uw nieuwsgierigheid hiermee gewekt zijn, dan vrees ik dat ik u voor het opdoen van meer kennis naar elders moet verwijzen. Bijvoorbeeld naar VoorBeginners.info van Marcel Feenstra. En via de javascript.pagina.nl is er ook genoeg lesmateriaal te vinden.
In de praktijk wordt er nogal veel gewerkt met scripts die door anderen gemaakt zijn en die u dan in uw eigen website kunt inplakken. (Letterlijk, gewoon knippen en plakken.) De echte knutselaar vindt zoiets natuurlijk maar niks, maar u bespaart zich er natuurlijk wel veel werk mee. Een paar sites die ik tegenkwam: JavaScript Source (javascript.internet.com), JavaScripts.com (www.javascripts.com), Doc JavaScript (webreference.com/js) en A Beginner's Guide to JavaScript (www.javascriptguide.com).
Anyway, ik hoop dat u hiermee een beetje een idee hebt gekregen van wat u met JavaScript zou kunnen doen. Veel plezier ermee.
U kunt nu naar Afronding.
1 Mochten ze daar geen boek over JavaScript hebben, spreek ze dan aan op hun aanschaffingsbeleid.
2 Don't worry, ik gebruik uw naam nergens voor, hij word alleen op uw pc gebruikt.
3 U bent vrij in de keuze van namen van variabelen, maar het is natuurlijk handig om een beetje herkenbare namen te hebben. (Ik meen dat het bij de KLM was, waar een programmeur van een database-query de namen van zijn diverse vriendinnen bleek te hebben gebruikt. Geen hond die het programma nog kon doorgronden...) Er mogen overigens geen spaties in voorkomen, dus ik pleeg underscores te gebruiken.
4 Als ik het goed begrijp, wordt er enige geheugenruimte gereserveerd voor de variabelen. Zal wel.
5 Toch niet slecht, 10 opdrachten in 1 regel code!
6 Ik zit niet in die branche, dus ik heb zo maar wat aannamen gemaakt omtrent hoe banken zoiets beoordelen. Gelieve me dus niet te mailen dat bij inkomen X geen hypotheek Y hoort; ik geef u bij voorbaat gelijk.