Toepassing: tafels
Maak een toepassing waarbij de gebruiker in een tekstvak een getal kan ingeven. Wanneer de gebruiker op een knop 'maak tafel' drukt verschijnt de tafel van het opgegeven getal op het scherm.
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Javascript: oefening DOM</title>
<link rel="stylesheet" type="text/css" href="vb.css">
<script type="text/javascript">
//<!--
/* *************************
* functie: toonTafel
* doel: toon tafel uit element 'tafel' in het element 'resultaat'
* in:
* out:
* *************************/
function toonTafel(){
//prefix E voor een Element
var Etafel = new getObj("tafel");
var Eresultaat = new getObj("resultaat");
var tafel = Etafel.obj.value;
var strRes = "";
if(!isNaN(tafel) && parseInt(tafel)==tafel){
for (var i = 1; i < 11 ; i++){
strRes += tafel +" x " +i +" = " +(tafel*i) +"<BR>";
}
} else {
strRes = "Geen getal geheel getal opgegeven !";
}
Etafel.obj.select();
Eresultaat.obj.innerHTML = strRes;
}
/* *************************
* functie: getObj
* doel: maak een object met een eigenschap obj als
* cross-browser objectverwijzing naar een element op de pagina
* in: id van het element
* out:
* gebruik: var mijnobj = new getObj('elementnaam');
* objecteigenschap: mijnobj.obj.objecteigenschap
* *************************/
function getObj(name){
if (document.getElementById){
this.obj = document.getElementById(name);
} else if (document.all) {
this.obj = document.all[name];
} else if (document.layers) {
this.obj = document.layers[name];
}
}
-->
</script>
</head>
<body>
<h1>Oefening DOM</h1>
<h2>Tafels</h2>
<input id="tafel" type="text" value="5">
<input type="button" value="Toon tafel" onclick="toonTafel()">
<div style="margin-top:20px" id="resultaat"></div>
</body>
</html>
Gemodulariseerde code:
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Javascript: oefening DOM</title>
<link rel="stylesheet" type="text/css" href="vb.css">
<script type="text/javascript">
//<!--
/* *************************
* functie: toonTafel
* doel: toon de opgegeven tafel in het opgegeven element
* in: int tafel,element resultaat
* out:
* *************************/
function toonTafel(Etafel,Eresultaat){
var tafel = Etafel.obj.value;
Eresultaat.obj.innerHTML = maakTafel(tafel);
Etafel.obj.select();
}
/* *************************
* functie: maakTafel
* doel: maak een String met de gekozen tafel
* in: int tafel
* out: String tafel
* *************************/
function maakTafel(tafel){
var strRes = "";
if(!isNaN(tafel) && parseInt(tafel)==tafel){
for (var i = 1; i < 11 ; i++){
strRes += tafel +" x " +i +" = " +(tafel*i) +"<BR>";
}
} else {
strRes = "Geen geheel getal opgegeven !";
}
return strRes;
}
/* *************************
* functie: getObj
* doel: maak een object met een eigenschap obj als
* cross-browser objectverwijzing naar een element op de pagina
* in: id van het element
* out:
* gebruik: var mijnobj = new getObj('elementnaam');
* objecteigenschap: mijnobj.obj.objecteigenschap
* *************************/
function getObj(name){
if (document.getElementById){
this.obj = document.getElementById(name);
} else if (document.all) {
this.obj = document.all[name];
} else if (document.layers) {
this.obj = document.layers[name];
}
}
-->
</script>
</head>
<body>
<h1>Oefening DOM</h1>
<h2>Tafels</h2>
<input id="tafel" type="text" value="5">
<input type="button" value="Toon tafel" onclick="toonTafel(new getObj('tafel'),new getObj('resultaat'))">
<div id="resultaat"></div>
</body>
</html>
Toepassing: fotoshow Download de figuren: De gebruiker ziet de eerste foto uit een reeks en kan met behulp van twee knoppen de volgende en vorige figuur zien. Vul een Array met Image-objecten zodanig dat de figuren gepreload worden
var aantal = 5;
var map = 'fotoshow/';
for(i=0;i<aantal;i++){
arrFig[i] = new Image();
arrFig[i].src = map +i +'.jpg';
}
TIP! Wanneer je code wenst uit te voeren bij het laden van de pagina dan kan je de onload event-handler gebruiken in de tag body. |
 |
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Javascript: oefening arrays</title>
<link rel="stylesheet" type="text/css" href="vb.css">
<style type="text/css">
div.slidekader {
width:200px;
height:180px;
border:solid 1px;
padding:20px;
background:#CCCCFF;
}
button {
border:solid outset 2px;
background:#CCCCFF;
border-color:#CC99FF;
width:100px;
cursor:hand;
}
.telling {
font-style:italic;
font-weight:bold;
color:#FF6600;
}
</style>
<script type="text/javascript">
<!--
//declaratie globale variabelen
var aantal
var map
var figuur;
var telling;
var arrFig = new Array();
var foto
/* *************************
* functie: initialiseer
* doel: vullen van globale variabelen
* preloaden figuren en vullen figuurarray
* initialiseren van het scherm
* in:
* out:
* *************************/
function initialiseer(){
//vullen van globale variabelen
aantal = 5;
map = 'fotoshow/';
foto = 0;
/* we werken met de getObj-functie voor een referentie naar de objecten
deze objecten kunnen we pas benaderen wanneer de pagina geladen is
vandaar dat we deze functie starten in het load-event */
figuur = new getObj('figuur');
telling = new getObj('telling');
//preload en vullen Array
for(i=0;i<aantal;i++){
arrFig[i] = new Image();
arrFig[i].src = map +i +'.jpg';
}
//tonen aantal figuren
toonFoto(foto);
toonAantal(foto);
}
/* *************************
* functie: volgende
* doel: bepaal volgende figuur
* in:
* out:
* *************************/
function volgende(){
if(foto==aantal-1) foto=-1;
foto++;
toonFoto(foto);
toonAantal(foto)
}
/* *************************
* functie: vorige
* doel: bepaal vorige figuur
* in:
* out:
* *************************/
function vorige(){
if(foto==0) foto=aantal
foto--;
toonFoto(foto);
toonAantal(foto);
}
/* *************************
* functie: toonFoto
* doel: toon foto op het scherm
* in: int nr van de figuur
* out:
* *************************/
function toonFoto(t){
figuur.obj.src = arrFig[t].src
}
/* *************************
* functie: toonAantal
* doel: toon melding op het scherm
* in: int nr van de figuur
* out:
* *************************/
function toonAantal(t){
telling.obj.innerHTML = (t+1) +' van de ' +aantal;
}
/* *************************
* functie: getObj
* doel: maak een object met een eigenschap obj als
* cross-browser objectverwijzing naar een element op de pagina
* in: id van het element
* out:
* gebruik: var mijnobj = new getObj('elementnaam');
* objecteigenschap: mijnobj.obj.objecteigenschap
* *************************/
function getObj(name){
if (document.getElementById){
this.obj = document.getElementById(name);
} else if (document.all) {
this.obj = document.all[name];
} else if (document.layers) {
this.obj = document.layers[name];
}
}
-->
</script>
</head>
<body onload="initialiseer()">
<h1>Oefening DOM</h1>
<center>
<h2>Fotoshow</h2>
<div class="slidekader">
<img id="figuur" alt="Foto" border="0">
</div>
<p>
<button name="cmbVorige" type="button" onclick="vorige()">vorige</button>
<button name="cmbVolgende" type="button" onclick="volgende()">volgende</button>
<div class="telling" id="telling"></div>
</center>
</div>
</body>
</html>
