Wikibooks

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

Interactief door geschiedenis bladeren
← Vorige wijzigingVolgende wijziging →
Verwijderde inhoud Toegevoegde inhoud
VisueelWikitekst
Tekst vervangen door "var naam = prompt("Hallo, hoe heet je?", ""); writeln("Hallo, " + naam);"
k Wijzigingen door 77.251.85.22 hersteld tot de versie na de laatste wijziging door Vromelo
Regel 1:
{{Programmeren in JavaScript|deel=Appendices}}
var naam = prompt("Hallo, hoe heet je?", "");
 
writeln("Hallo, " + naam);
==Testpagina==
 
Een programmeertaal leren houdt in dat je zelf een en ander moet uitproberen. Dat is bij javascript niet anders. Natuurlijk kun je steeds javascripts die je wilt uitproberen op de goede plaats in een HTML pagina plakken en de uitvoer laten verzorgen door "document.write(...)".
Dit kan echter omslachtig zijn als je veel kleine veranderingen in het script wilt aanbrengen en het steeds opnieuw wilt uitvoeren. Bovendien wordt het gebruik van "document.write(...)" vanuit de standaard afgeraden.
 
Om eenvoudige javascripts uit te proberen kan daarom beter onderstaande testpagina gebruikt worden.
 
{{Bericht
|titel=Waarschuwing!
|bericht=De testpagina werkt alleen in niet al te oude browsers (IE7+, Chrome, Firefox).
|type=waarschuwing}}
 
 
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".
{{Code
| Taal=HTML
| Titel=Een eenvoudige javascript testpagina
| Code=
<source lang=html4strict>
<!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, "&lt;");
t = t.replace(/>/g, "&gt;");
}
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 = "";
var codespace = document.getElementById("codespace");
var s = codespace.value;
s = s.replace(/document.write/g, "write");
try
{
eval(s);
}
catch(fout)
{
writeln("FOUTMELDING: " + fout.name + " - " + fout.description);
}
}
</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>
</source>
}}
 
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.
 
Om vanuit javascript met de buitenwereld te communiceren voegt de testpagina twee functies toe:
 
*write(''string''); om een string toe te voegen aan het uitvoervenster
*writeln(''string''); idem, met een automatisch toegevoegd regeleinde
 
Zet het volgende script in het bovenste venster:
 
{{Code
| Taal=Javascript
| Titel=Test: gegevens-typen
| Code=
<source lang=javascript>
writeln("Hallo wereld");
</source>
}}
 
Druk vervolgens op de knop "Uitvoeren" en het script wordt uitgevoerd.
Op deze manier kunt u de meeste voorbeelden uit dit boek uitproberen.
 
{{Bericht
|titel=Nog doen
|bericht=Voorbeelden aanpassen aan testpagina, gebruik van "document.write(...)" uitbannen.
|type=nb
|afbeelding=KOrganizer-ToDo-Oxygen.png}}
 
==Test: gegevens-typen==
 
Plak het onderstaande script op de testpagina. Klik op uitvoeren. Begrijpt u wat u ziet?
 
{{Code
| Taal=Javascript
| Titel=Test: gegevens-typen
| Code=
<source lang=javascript>
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));
</source>
}}
==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.
 
{{Code
| Taal=Javascript
| Titel=Test: document veranderen
| Code=
<source lang=javascript>
var element1 = document.getElementById("writespace");
if (element1 != null)
{
element1.innerHTML = "Koud hè";
element1.style.backgroundColor = "orange";
}
</source>
}}
 
==Test: events==
 
Plak het onderstaande script op de testpagina. Klik daarna op "Uitvoeren".
Klik vervolgens enkele malen op het uitvoergebied.
 
{{Code
| Taal=Javascript
| Titel=Test: Event handling
| Code=
<source lang=javascript>
 
// leg een verband tussen het klikken op het uitvoergebied en de functie "onWritespaceClicked"
 
var writespace = document.getElementById("writespace");
writespace.onclick = onWritespaceClicked;
 
// de event-handler beschrijft wat er moet gebeuren als er op het uitvoergebied wordt geklikt
 
function onWritespaceClicked()
{
writeln("aauuuwww");
}
 
// nog een kleine hint
 
writeln("KLIK HIER");
</source>
}}
 
==Test: objecten (Lampen)==
 
Plak het onderstaande script op de testpagina. Klik daarna op "Uitvoeren".
Maak er nog twee lampen bij.
{{Code
| Taal=Javascript
| Titel=Test: Objecten| Code=
<source lang=javascript>
function Lamp(naam)
{
this.geeftlicht = false;
// maak een zichtbare HTML representatie "this.element" van de lamp
this.element = document.createElement("div");
var textnode = document.createTextNode(naam);
this.element.appendChild(textnode);
this.element.setAttribute("style", "float:left;width: 100px;height:100px;border: 1px solid black;");
this.element.setAttribute("onclick", naam + ".drukopknop()"); // dit werkt mits lampen globaal
document.getElementById("writespace").appendChild(this.element);
 
this.aan = function()
{
this.geeftlicht = true;
this.element.style.backgroundColor = "yellow";
}
this.uit = function()
{
this.geeftlicht = false;
this.element.style.backgroundColor = "grey";
}
this.drukopknop = function()
{
if (this.geeftlicht) this.uit(); else this.aan();
}
this.uit();
}
writeln("Klik enkele malen op elk van de lampen");
writeln("");
Lamp1 = new Lamp("Lamp1"); // Lamp1 wordt hiermee globaal gedefinieerd (zonder var)
Lamp2 = new Lamp("Lamp2");
Lamp3 = new Lamp("Lamp3");
 
</source>
}}
== Test: Events van het toetsenbord ==
 
Plak het onderstaande script op de testpagina. Klik daarna op "Uitvoeren".
Druk vervolgens in ieder geval op "a", daarna op "A" en daarna op een van de pijltjes-toetsen.
Doe hetzelfde in een andere browser en zoek de verschillen.
 
{{Code
| Taal=Javascript
| Titel=Test: Gebeurtenissen op het toetsenbord
| Code=
<source lang=javascript>
 
// verbind de gebeurtenissen met een eventhandler
 
document.onkeypress = keypress;
document.onkeydown = keydown;
 
// de event handlers
 
function keydown(event)
{
writeln("KEYDOWN: " + event.keyCode);
}
function keypress(event)
{
writeln("KEYPRESS: " + event.charCode + " (" + String.fromCharCode(event.charCode) + ")");
}
 
// nog een hint
 
writeln("DRUK OP EEN TOETS");
</source>
}}
Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.