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

geen bewerkingssamenvatting
Geen bewerkingssamenvatting
==Testomgeving==
 
Om eenvoudige javascripts uit te proberen kan onderstaande testpagina gebruikt worden.
Een eenvoudige testomgeving voor javascripts bestaat uit twee bestanden:
 
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 (knippen en plakken) en dit bestand te hernoemen in "jstests.htm".
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".
{{Code
<head>
<meta charset="UTF-8" />
<title>jstestsjavascript tester</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, "&gt;");
}
writespace.innerHTML = writespace.innerHTML + "<p>" + t + "<br /p>";
}
function readonRunButtonClicked()
{
var readspacewritespace = document.getElementById("readspacewritespace");
element1writespace.innerHTML = "Koud hè";
codespace = document.getElementById("codespace");
return readspaceeval(codespace.value);
}
</script>
</head>
<body>
<input type="text"textarea id="readspacecodespace" style="borderwidth:1px solid black100%;height:250px;">//zet hier uw javascript</textarea>
<button type="button" onclick="onStartButtonClickedonRunButtonClicked()" style="margin:50px;">Uitvoeren</button>
<div id="writespace" style="margin:0px;padding:0px;height:400px250px;overflow:scroll;border:1px solid black;font-family:'Courier New', Courier, monospace;font-size:80%;">Hier komt de uitvoer van het javascript</div>
Start
</button>
<div id="writespace" style="margin:0px;padding:0px;height:400px;overflow:scroll;border:1px solid black;">
</div>
</body>
</html>
}}
 
Als u in de explorer dubbelklikt op "jstests.htm" krijgt u een pagina te zien met daarop eenonder knop "Start" en een omkaderd gedeelte waarop u uitvoer van het te testen javascript zichtbaar kunt maken.elkaar:
2. Een Javascript.
 
#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:
 
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
| Taal=Javascript
| Titel=HetTest: te testen javascriptgegevens-typen
| Code=
<source lang=javascript>
x = write("Hallo wereld");
function onStartButtonClicked()
{
write("Er is op START geklikt");
}
</source>
}}
 
Druk vervolgens op de knop "Uitvoeren" en het script wordt uitgevoerd.
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.
 
Op deze manier kunt u de meeste voorbeelden uit dit boek uitproberen. Alleen dient u document.write(...) waar nodig te vervangen door write(...);
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" doorPlak het onderstaande script. Openop daarnade "jsteststestpagina.htm" en drukKlik op de startknopuitvoeren. Begrijpt u wat u ziet?
 
{{Code
| Code=
<source lang=javascript>
var x;
function onStartButtonClicked()
write("var x = null; waarde(x)=" + x + ", type(x)=" + typeof(x));
{
x = var x5;
write("varx x= 5; waarde(x)=" + x + ", type(x)=" + typeof(x));
x = 5"Hallo wereld";
write("x = 5\"Hallo wereld\"; waarde(x)=" + x + ", type(x)=" + typeof(x));
x= true;
x = "Hallo wereld";
write("x = \"Hallo wereld\"true; waarde(x)=" + x + ", type(x)=" + typeof(x));
x x= truealert;
write("x = truealert; waarde(x)=" + x + ", type(x)=" + typeof(x));
x = alertnew Object();
write("x = alertnew Object(); waarde(x)=" + x + ", type(x)=" + typeof(x));
x = new Object()null;
write("x = new Object()null; waarde(x)=" + x + ", type(x)=" + typeof(x));
x = null;
write("x = null; waarde(x)=" + x + ", type(x)=" + typeof(x));
}
</source>
}}
==Test: document veranderen==
 
Plak het onderstaande script op de testpagina. Klik daarna op "Uitvoeren".
 
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.
 
| Code=
<source lang=javascript>
var element1 = document.getElementById("writespace");
function onStartButtonClicked()
if (element1 != null)
{
var element1.innerHTML = document.getElementById("writespaceKoud hè");
if (element1.style.backgroundColor != null)"orange";
{
element1.innerHTML = "Koud hè";
element1.style.backgroundColor = "orange";
}
}
</source>
144

bewerkingen

Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.