Programmeren in JavaScript/Appendices/Appendix B: testomgeving

Testpagina

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>
    <meta charset="UTF-8" />
    <title>javascript tester</title>
    <script>
      function writeln(s)
      {
        var writespace = document.getElementById("writespace");
        var t = "" + s;
        if ((t != undefined) || (t != null))
        {
          t = t.replace(/</g, "&lt;");
          t = t.replace(/>/g, "&gt;");
        }
        writespace.innerHTML = writespace.innerHTML + t + "<br />";
      }
      function write(s)
      {
        var writespace = document.getElementById("writespace");
        var t = "" + s;
        writespace.innerHTML = writespace.innerHTML + t;
      }
      function onRunButtonClicked()
      {
        var writespace = document.getElementById("writespace");
        writespace.innerHTML = "";
        var codespace = document.getElementById("codespace");
	var s = codespace.value;
	s = s.replace(/document.write/g, "write");
        try
        {
           eval(s);
	}
	catch(fout)
	{
	   writeln("FOUTMELDING: "  + fout.name + " - " + fout.description);
	}
      }
    </script>
  </head>
  <body>
    <textarea id="codespace" style="width:100%;height:250px;">//zet hier uw javascript</textarea>
    <button type="button" onclick="onRunButtonClicked()">Uitvoeren</button>
    <div id="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:

Een venster waarin u een javascript kunt intikken of plakken.
Een knop "Uitvoeren"
Een venster waarin de uitvoer van het script getoond zal worden.

Om vanuit javascript met de buitenwereld te communiceren voegt de testpagina twee functies toe:

write(string); om een string toe te voegen aan het uitvoervenster
writeln(string); idem, met een automatisch toegevoegd regeleinde

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.

Test: gegevens-typen

Plak het onderstaande script op de testpagina. Klik op uitvoeren. Begrijpt u wat u ziet?

Javascript-code: Test: gegevens-typen

var x;
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 = new Object();
writeln("x = new Object(); waarde(x)=" + x + ", type(x)=" + typeof(x));
x = null;
writeln("x = null; waarde(x)=" + x + ", type(x)=" + typeof(x));

Test: document veranderen

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

var element1 = document.getElementById("writespace");
if (element1 != null)
{
    element1.innerHTML = "Koud hè";
    element1.style.backgroundColor = "orange";
}

Test: events

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"

var writespace = document.getElementById("writespace");
writespace.onclick = onWritespaceClicked;

// de event-handler beschrijft wat er moet gebeuren als er op het uitvoergebied wordt geklikt

function onWritespaceClicked()
{
  writeln("aauuuwww");
}

// nog een kleine hint

writeln("KLIK HIER");

Test: objecten (Lampen)

Plak het onderstaande script op de testpagina. Klik daarna op "Uitvoeren". Maak er nog twee lampen bij.

Javascript-code: Test: Objecten

function Lamp(naam)
{
    this.geeftlicht = false;
    
    // maak een zichtbare HTML representatie "this.element" van de lamp
    
    this.element = document.createElement("div");
    var textnode = 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 globaal
    document.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(); else this.aan();
    }
    this.uit();
}
writeln("Klik enkele malen op elk van de lampen");
writeln("");
Lamp1 = new Lamp("Lamp1"); // Lamp1 wordt hiermee globaal gedefinieerd (zonder var)
Lamp2 = new Lamp("Lamp2");
Lamp3 = new Lamp("Lamp3");

Test: Events van het toetsenbord

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 eventhandler

document.onkeypress = keypress;
document.onkeydown = keydown;

// de event handlers

function keydown(event)
{
    writeln("KEYDOWN: " + event.keyCode);
}
function keypress(event)
{
    writeln("KEYPRESS: " + event.charCode + " (" + String.fromCharCode(event.charCode) + ")");
}

// nog een hint

writeln("DRUK OP EEN TOETS");