| Inhoudsopgave |
Een programmeertaal leren houdt in dat je zelf een en ander moet uitproberen. Dat is bij javascript niet anders. Natuurlijk kun je steeds javascripts die je wilt uitproberen op de goede plaats in een HTML pagina plakken en de uitvoer laten verzorgen door "document.write(...)".Dit kan echter omslachtig zijn als je veel kleine veranderingen in het script wilt aanbrengen en het steeds opnieuw wilt uitvoeren. Bovendien wordt het gebruik van "document.write(...)" vanuit de standaard afgeraden.
Om eenvoudige javascripts uit te proberen kan daarom beter onderstaande testpagina gebruikt worden.
 | Waarschuwing! De testpagina werkt alleen in niet al te oude browsers (IE7+, Chrome, Firefox). |
Deze pagina hoeft u niet te begrijpen. U hoeft hem ook niet te veranderen. U hoeft hem alleen maar in een tekstbestand te zetten (knippen en plakken) en dit bestand te hernoemen in "jstests.htm".
HTML-code: Een eenvoudige javascript testpagina
<!DOCTYPE html><html><head><metacharset="UTF-8"/><title>javascript tester</title><script>functionwriteln(s){varwritespace=document.getElementById("writespace");vart=""+s;if((t!=undefined)||(t!=null)){t=t.replace(/</g,"<");t=t.replace(/>/g,">");}writespace.innerHTML=writespace.innerHTML+t+"<br />";}functionwrite(s){varwritespace=document.getElementById("writespace");vart=""+s;writespace.innerHTML=writespace.innerHTML+t;}functiononRunButtonClicked(){varwritespace=document.getElementById("writespace");writespace.innerHTML="";varcodespace=document.getElementById("codespace");vars=codespace.value;s=s.replace(/document.write/g,"write");try{eval(s);}catch(fout){writeln("FOUTMELDING: "+fout.name+" - "+fout.description);}}</script></head><body><textareaid="codespace"style="width:100%;height:250px;">//zet hier uw javascript</textarea><buttontype="button"onclick="onRunButtonClicked()">Uitvoeren</button><divid="writespace"style="margin:0px;padding:0px;height:250px;overflow:scroll;border:1px solid black;font-family:'Courier New', Courier, monospace;font-size:80%;">Hier komt de uitvoer van het javascript</div></body></html>
Als u in de explorer dubbelklikt op "jstests.htm" krijgt u een pagina te zien met daarop onder elkaar:
Om vanuit javascript met de buitenwereld te communiceren voegt de testpagina twee functies toe:
Zet het volgende script in het bovenste venster:
Javascript-code: Test: gegevens-typen
writeln("Hallo wereld");
Druk vervolgens op de knop "Uitvoeren" en het script wordt uitgevoerd.Op deze manier kunt u de meeste voorbeelden uit dit boek uitproberen.
 | Nog doen Voorbeelden aanpassen aan testpagina, gebruik van "document.write(...)" uitbannen. |
Plak het onderstaande script op de testpagina. Klik op uitvoeren. Begrijpt u wat u ziet?
Javascript-code: Test: gegevens-typen
varx;writeln("var x; waarde(x)="+x+", type(x)="+typeof(x));x=5;writeln("x = 5; waarde(x)="+x+", type(x)="+typeof(x));x="Hallo wereld";writeln("x = \"Hallo wereld\"; waarde(x)="+x+", type(x)="+typeof(x));x=true;writeln("x = true; waarde(x)="+x+", type(x)="+typeof(x));x=alert;writeln("x = alert; waarde(x)="+x+", type(x)="+typeof(x));x=newObject();writeln("x = new Object(); waarde(x)="+x+", type(x)="+typeof(x));x=null;writeln("x = null; waarde(x)="+x+", type(x)="+typeof(x));
Plak het onderstaande script op de testpagina. Klik daarna op "Uitvoeren". Verander de tekst en de kleur en zie wat er gebeurt.
Javascript-code: Test: document veranderen
varelement1=document.getElementById("writespace");if(element1!=null){element1.innerHTML="Koud hè";element1.style.backgroundColor="orange";}
Plak het onderstaande script op de testpagina. Klik daarna op "Uitvoeren". Klik vervolgens enkele malen op het uitvoergebied.
Javascript-code: Test: Event handling
// leg een verband tussen het klikken op het uitvoergebied en de functie "onWritespaceClicked"varwritespace=document.getElementById("writespace");writespace.onclick=onWritespaceClicked;// de event-handler beschrijft wat er moet gebeuren als er op het uitvoergebied wordt gekliktfunctiononWritespaceClicked(){writeln("aauuuwww");}// nog een kleine hintwriteln("KLIK HIER");
Plak het onderstaande script op de testpagina. Klik daarna op "Uitvoeren". Maak er nog twee lampen bij.
Javascript-code: Test: Objecten
functionLamp(naam){this.geeftlicht=false;// maak een zichtbare HTML representatie "this.element" van de lampthis.element=document.createElement("div");vartextnode=document.createTextNode(naam);this.element.appendChild(textnode);this.element.setAttribute("style","float:left;width: 100px;height:100px;border: 1px solid black;");this.element.setAttribute("onclick",naam+".drukopknop()");// dit werkt mits lampen globaaldocument.getElementById("writespace").appendChild(this.element);this.aan=function(){this.geeftlicht=true;this.element.style.backgroundColor="yellow";}this.uit=function(){this.geeftlicht=false;this.element.style.backgroundColor="grey";}this.drukopknop=function(){if(this.geeftlicht)this.uit();elsethis.aan();}this.uit();}writeln("Klik enkele malen op elk van de lampen");writeln("");Lamp1=newLamp("Lamp1");// Lamp1 wordt hiermee globaal gedefinieerd (zonder var)Lamp2=newLamp("Lamp2");Lamp3=newLamp("Lamp3");
Plak het onderstaande script op de testpagina. Klik daarna op "Uitvoeren". Druk vervolgens in ieder geval op "a", daarna op "A" en daarna op een van de pijltjes-toetsen.Doe hetzelfde in een andere browser en zoek de verschillen.
Javascript-code: Test: Gebeurtenissen op het toetsenbord
// verbind de gebeurtenissen met een eventhandlerdocument.onkeypress=keypress;document.onkeydown=keydown;// de event handlersfunctionkeydown(event){writeln("KEYDOWN: "+event.keyCode);}functionkeypress(event){writeln("KEYPRESS: "+event.charCode+" ("+String.fromCharCode(event.charCode)+")");}// nog een hintwriteln("DRUK OP EEN TOETS");