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

Uit Wikibooks
Verwijderde inhoud Toegevoegde inhoud
Vromelo (overleg | bijdragen)
Geen bewerkingssamenvatting
Vromelo (overleg | bijdragen)
Regel 108: Regel 108:
| Code=
| Code=
<source lang=javascript>
<source lang=javascript>
function onStartButtonClicked()
{
function onStartButtonClicked()
function onStartButtonClicked()
{
{
Regel 118: Regel 116:
element1.style.backgroundColor = "orange";
element1.style.backgroundColor = "orange";
}
}
}
}
}
</source>
</source>

Versie van 21 sep 2012 19:48

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));
}

Test: document veranderen

Vervang "jstests.js" door het onderstaande script. Open daarna "jstests.htm" en druk op de startknop. Verander de tekst en de kleur en zie wat er gebeurt.

Javascript-code: Test: document veranderen

function onStartButtonClicked()
{
   var element1 = document.getElementById("writespace");
   if (element1 != null)
   {
       element1.innerHTML = "Koud hè";
       element1.style.backgroundColor = "orange";
   }
}
Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.