Programmeren in JavaScript/Appendices/Appendix B: testomgeving: verschil tussen versies
Geen bewerkingssamenvatting |
|||
Regel 16: | Regel 16: | ||
<title>javascript tester</title> |
<title>javascript tester</title> |
||
<script> |
<script> |
||
function |
function writeln(s) |
||
{ |
{ |
||
var writespace = document.getElementById("writespace"); |
var writespace = document.getElementById("writespace"); |
||
Regel 27: | Regel 27: | ||
writespace.innerHTML = writespace.innerHTML + t + "<br />"; |
writespace.innerHTML = writespace.innerHTML + t + "<br />"; |
||
} |
} |
||
function |
function write(s) |
||
{ |
{ |
||
var writespace = document.getElementById("writespace"); |
var writespace = document.getElementById("writespace"); |
||
Regel 39: | Regel 39: | ||
codespace = document.getElementById("codespace"); |
codespace = document.getElementById("codespace"); |
||
var s = codespace.value; |
var s = codespace.value; |
||
s = s.replace(/document.write/g, " |
s = s.replace(/document.write/g, "write"); |
||
eval(s); |
eval(s); |
||
} |
} |
||
Regel 66: | Regel 66: | ||
| Code= |
| Code= |
||
<source lang=javascript> |
<source lang=javascript> |
||
writeln("Hallo wereld"); |
|||
</source> |
</source> |
||
}} |
}} |
||
Regel 83: | Regel 83: | ||
<source lang=javascript> |
<source lang=javascript> |
||
var x; |
var x; |
||
writeln("var x; waarde(x)=" + x + ", type(x)=" + typeof(x)); |
|||
x = 5; |
x = 5; |
||
writeln("x = 5; waarde(x)=" + x + ", type(x)=" + typeof(x)); |
|||
x = "Hallo wereld"; |
x = "Hallo wereld"; |
||
writeln("x = \"Hallo wereld\"; waarde(x)=" + x + ", type(x)=" + typeof(x)); |
|||
x= true; |
x= true; |
||
writeln("x = true; waarde(x)=" + x + ", type(x)=" + typeof(x)); |
|||
x = alert; |
x = alert; |
||
writeln("x = alert; waarde(x)=" + x + ", type(x)=" + typeof(x)); |
|||
x = new Object(); |
x = new Object(); |
||
writeln("x = new Object(); waarde(x)=" + x + ", type(x)=" + typeof(x)); |
|||
x = null; |
x = null; |
||
writeln("x = null; waarde(x)=" + x + ", type(x)=" + typeof(x)); |
|||
</source> |
</source> |
||
}} |
}} |
Versie van 23 sep 2012 10: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 writeln(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 + 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 = "";
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
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.
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";
}