dhtml, html, javascript, internet, style sheets, DHTML, HTML, Javascript, Style Sheets, Internet, De computer van Voltaire, thuisbasis, Thuisbasis Gelieve Netscape of Explorer 4.0 (of hoger) te gebruiken om deze pagina te bekijken.

INDEX
Manuals & Primers

ARTIKELEN

VARIA

VARIA & LINKEN

JAVASCRIPT TUTORIAL :

deel 5 (vervolg functies)

deel 6 (het HTML document)

deel 7 (elementen aanspreken)

deel 8 (deel2-elementen aanspreken)

deel 9 (het location object)

deel 10 (frames)

deel 11 (frames..vervolg)

deel 12 (frames..vervolg-2)

deel 13 (frames..vervolg-3)

deel 14 (frames..vervolg-4 en laatste deel)

deel 15 (het windows object)

deel 16 (Een venster een naam geven + sluiten)

deel 17 (Pagina's maken)

deel 18 (Timer, statusbar & Timeouts)

deel 19 (Objecten aanspreken, het DATE object)

Javascript om mee te nemen.

JAVASCRIPT

Door Ludo Cattoor, Webmaster.

Algemene oefening

Algemene oefening : We zullen een formulier maken met een tekstveld en drie knoppen. Iedere knop zal een
nieuw venster openen . In het tekstveld vullen we een naam in.
Bij het aanklikken van de eerste knop openen we een venster waarin de naam van de persoon (zoals in het tekstvak)
wordt getoond.
Bij het aanklikken van de tweede knop krijgen we in een nieuw venster de datum en tijd.
Bij het aanklikken van de derde knop worden de gegevens in het teksvak gewist.
In ieder venster dat we openen staat eveneens een knop om het venster te sluiten. Ieder nieuw venster moet een
zwarte achtergrond hebben en witte tekst en moet 250 op 100 pixels groot zijn.

Aan de slag :

<HTML>
<HEAD>
<TITLE>..</TITLE>

</HEAD>
<BODY>

<FORM>
Naam :
<INPUT TYPE=text NAME=naam>
<INPUT TYPE=button NAME="" VALUE="Geef mij de tijd" onClick="tijd()">
<INPUT TYPE=button NAME="" VALUE="Gegevens tonen" onClick="gegevens(form.naam.value)">
<INPUT TYPE=reset NAME="" VALUE="Alles wissen" >

</FORM>
</BODY>
</HTML>

We hebben onze eerste pagina. Nu gaan we verder met het verbinden van een script aan de eerste twee knoppen.
Het script wordt in de hoofding van de pagina ingevoerd.
We beginnen met het script dat de tijd oproept.

(opgepast! wanneer men een geheel van instructies schrijft, argumenten en strings, dan moet men alles
NA ELKAAR schrijven. Op het einde van een regel zet men een ; (puntkomma).
Ook indien dit in deze oefeningen onder elkaar staat, moet alles 1 enkele regel uitmaken.
vb: In uw script mooet dit op 1 regel staan !!

newwindow.document.write("Vandaag is het de" + vandaag.getDate() + "ste. D e " + (vandaag.getMonth() + 1) + " de maand" + "van het jaar" + vandaag.getYear());

<SCRIPT LANGUAGE="Javascript">
<!--verstoppen

//uitleg-we openen een nieuwe pagina en maken een eerste functie om de datum en
//tijd op te roepen
function tijd() {

newwindow=window.open("","","width=250,height=100");
vandaag=new Date();
newwindow.document.write("Het is" + vandaag.getHours() + ":" + vandaag.getMinutes() + "<br>"); newwindow.document.write("Vandaag is het de" + vandaag.getDate() + "ste. D e " + (vandaag.getMonth() + 1) + " de maand" + "van het jaar" + vandaag.getYear());
newwindow.document.bgColor="black";
newwindow.document.fgColor="white";

}
</SCRIPT>

</HEAD>
We zijn al in de helft van ons werk. Nu moeten we een script met de knop "Gegevens" verbinden.

<SCRIPT LANGUAGE="Javascript">
<!--verstoppen

//uitleg-we openen een nieuwe pagina en laten de gegevens zien die in de
//tekstvakken werden ingevuld.

function gegevens(textstring) {

newwindow=window.open("","","width=250,height=100,resizable=no,scrollbars=no,toolbar=no");
newwindow.document.write(textstring);
newwindow.document.close();

}

</SCRIPT>
De derde knop met Wissen hebben we reeds in de BODY van het document gezet zodat ons werk gedaan is.

Hieronder het volledige document : (na de oefening staan er enkele opmerkingen, hou er rekening mee !)

<HTML>
<HEAD>
<TITLE>....</TITLE>
<SCRIPT LANGUAGE="Javascript">

//uitleg-we openen een nieuwe pagina en maken een eerste functie om de datum en
//tijd op te roepen

function tijd() {

newwindow=window.open("","","width=250,height=100");

vandaag=new Date();
newwindow.document.write("Het is" + vandaag.getHours() + ":" + vandaag.getMinutes() + "<br>");
newwindow.document.write("Vandaag is het de" + vandaag.getDate() + "ste. De " + (vandaag.getMonth() + 1) + " ste maand" + " van het jaar" + "" + vandaag.getYear());
newwindow.document.bgColor="black";
newwindow.document.fgColor="white";
}
</SCRIPT>

<SCRIPT LANGUAGE="Javascript">

//uitleg-we openen een nieuwe pagina en laten de gegevens zien die in de
//tekstvakken werden ingevuld.

function gegevens(textstring) {

newwindow=window.open("","","width=250,height=100,resizable=no,scrollbars=no,toolbar=no");
newwindow.document.write(textstring);
newwindow.document.bgColor="black";
newwindow.document.fgColor="white";

newwindow.document.close();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Naam :
<INPUT TYPE=text NAME=naam>
<INPUT TYPE=button NAME="" VALUE="Geef mij de tijd" onClick="tijd()">

<INPUT TYPE=button NAME="" VALUE="Gegevens tonen" onClick="gegevens(form.text1.value)">

<INPUT TYPE=reset NAME="" VALUE="Alles wissen" >
</FORM>
</BODY>
</HTML>

Werkt het, proficiat !

In het script waarin we de tijd opvragen doen we het volgende om een spatie tussen woorden te creëren:

+ "" +

Zoals we reeds weten, geeft de browser bij het inlezen van een HTML pagina steeds 1 spatie weer tussen letters of woorden, ook indien we met de tab toets meerdere spatie in ons document zetten.

Het 1ste voorbeeld geeft 1 spatie, het tweede voorbeeld eveneens, alhoewel er meer spatie tussen is :

1ste voorbeeld :
Vandaag is

2de voorbeeld :
Vandaag          is

Wat wel een bijkomende spatie geeft in HTML is :
Vandaag     is

En in Javascript :
"Vandaag" + "" + "is"

Hou er rekening mee !

Indien je een foutmelding krijgt met de volgende boodschap :

No such interface supported
Dan slaat dit op het creëren van het nieuwe document. Deze foutmelding komt soms voor in Explorer. Tracht
een nieuwe versie van Explorer te installeren. Dit is een bug in Explorer 4.0

Schrijf alle argumenten achter elkaar, niet zoals hierboven in dit document :

Vb. Niet :
newwindow=window.open("","","width=250,height=100,resizable=no,scrollbars=no,toolbar=no");

Maar wel :
newwindow=window.open("","","width=250,height=100,resizable=no,scrollbars=no,toolbar=no");

Nerscape 4.0 schijnt niet goed overweg te kunnen met "<br>" in een script. Netscape zal alleen dat
deel vòòr de "<br>" tonen. Indien dit zich voordoet is het beter van de upgrade 4.01 te bemachtigen.