Programmeren in JavaScript/Appendices/Appendix B: testomgeving: verschil tussen versies
Geen bewerkingssamenvatting |
|||
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, "<");
t = t.replace(/>/g, ">");
}
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";
}
}