Programmeren in JavaScript/Appendices/Appendix B: testomgeving: verschil tussen versies

Verwijderde inhoud Toegevoegde inhoud

In de regel

Versie van 22 sep 2012 22:16

Testomgeving

Om eenvoudige javascripts uit te proberen kan onderstaande testpagina gebruikt worden.

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 write(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 onRunButtonClicked()
      {
        var writespace = document.getElementById("writespace");
	writespace.innerHTML = "";
        codespace = document.getElementById("codespace");
	var s = codespace.value;
	s = s.replace(/document.write/g, "write");
        eval(s);
      }
    </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.

Zet het volgende script in het bovenste venster:

Javascript-code: Test: gegevens-typen

write("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.

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;
write("var x; waarde(x)=" + x + ", type(x)=" + typeof(x));
x = 5;
write("x = 5; waarde(x)=" + x + ", type(x)=" + typeof(x));
x = "Hallo wereld";
write("x = \"Hallo wereld\"; waarde(x)=" + x + ", type(x)=" + typeof(x));
x= true;
write("x = true; waarde(x)=" + x + ", type(x)=" + typeof(x));
x = alert;
write("x = alert; waarde(x)=" + x + ", type(x)=" + typeof(x));
x = new Object();
write("x = new Object(); waarde(x)=" + x + ", type(x)=" + typeof(x));
x = null;
write("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";
}