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

Interactief door geschiedenis bladeren

← Vorige wijziging Volgende wijziging →

Verwijderde inhoud Toegevoegde inhoud

VisueelWikitekst

In de regel

Versie van 21 sep 2012 15:39

Testomgeving

Een eenvoudige testomgeving voor javascripts bestaat uit twee bestanden:

1. Een HTML-pagina.

Deze pagina hoeft u (niet meteen) te begrijpen. U hoeft hem ook niet te veranderen. U hoeft hem alleen maar in een tekstbestand te zetten en dit bestand te hernoemen in "jstests.htm".

HTML-code: Een eenvoudige javascript testpagina

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>jstests</title>
    <script src="jstests.js"></script>
    <script>
      function read()
      {
        var readspace = document.getElementById("readspace");
        return readspace.value;
      }
      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 + "<p>" + t + "</p>";
      }
    </script>
  </head>
  <body>
    <input type="text" id="readspace" style="border:1px solid black;" />
    <button type="button" onclick="onStartButtonClicked()" style="margin:50px;">
      Start
    </button>
    <div id="writespace" style="margin:0px;padding:0px;height:400px;overflow:scroll;border:1px solid black;">
    </div>
  </body>
</html>

2. Een Javascript.

Dit is het javascript dat we voortdurend zullen veranderen en dat we gaan testen. Om te beginnen moet u het in een tekstbestand zetten, in dezelfde directory als "jstests.htm" en het te hermoemen in "jstests.js".

Javascript-code: Het te testen javascript

function onStartButtonClicked()
{
    write("Er is op START geklikt");
}

Als u in de explorer dubbelklikt op "jstests.htm" krijgt u een pagina te zien met daarop een knop "Start" en een omkaderd gedeelte waarop u uitvoer van het te testen javascript zichtbaar kunt maken.

Als u op de knop "Start" klikt wordt een tekst getoond. Als dat het geval is is de testomgeving correct geïnstalleerd.

Test: gegevens-typen

Vervang "jstests.js" door het onderstaande script. Open daarna "jstests.htm" en druk op de startknop. Begrijpt u wat u ziet?

Javascript-code: Test: gegevens-typen

function onStartButtonClicked()
{
    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));
}

@@ Regel 7: / Regel 7: @@
 Deze pagina hoeft u (niet meteen) te begrijpen. U hoeft hem ook niet te veranderen. U hoeft hem alleen maar in een tekstbestand te zetten en dit bestand te hernoemen in "jstests.htm".
-{{Code|
+{{Code
 | Taal=HTML
 | Titel=Een eenvoudige javascript testpagina
@@ Regel 53: / Regel 53: @@
 Dit is het javascript dat we voortdurend zullen veranderen en dat we gaan testen. Om te beginnen moet u het in een tekstbestand zetten, in dezelfde directory als "jstests.htm" en het te hermoemen in "jstests.js".
-{{Code|
+{{Code
 | Taal=Javascript
 | Titel=Het te testen javascript
@@ Regel 73: / Regel 73: @@
 Vervang "jstests.js" door het onderstaande script. Open daarna "jstests.htm" en druk op de startknop. Begrijpt u wat u ziet?
-{{Code|
+{{Code
 | Taal=Javascript
 | Titel=Test: gegevens-typen