Informaticasite van het Lauwers College te Buitenpost © R.J. van der Beek

Menu
HTML H1
HTML H2
H3
H4
H5
H6
H7
H8
H9
H10
Javascript

JavaScript deel 2

2.1 De objecten location, document en history

Het location-object is een deelobject van het window-object, daarom kun je het noteren als window.location
Dus de naam van het subobject komt altijd achter de naam van het "hogere" object, gescheiden door een punt.
Het location-object is het object dat de URL van het openstaande venster definieert.
Als je een methode of eigenschap van het location-object wilt gebruiken, dan zet je de naam van die methode of eigenschap er achter met een punt ertussen. Bijvoorbeeld window.location.href
Maar omdat window altijd het hoogste object is mag men het weglaten, dus je mag het dan als location.href noteren.

Ook het document-object is een deelobject van het window-object, daarom kun je het noteren als window.document, maar ook hier mag je window weglaten.
Het is het object dat het huidig geladen document definieert.

Dan is er nog een subobject van het window-object: window.history, en dat mag je natuurlijk ook weer noteren als alleen history.
Dat object bevat de historylijst van de browser, waarbij je bijvoorbeeld de methode history.back() kunt gebruiken: dan wordt het huidige document vervangen door de vorige pagina in de historylijst.

Die objecten hebben de volgende eigenschappen en methoden:
(bij een methode staat er aan het eind altijd iets (of niets) tussen haakjes achter, en dan kun je dat als opdracht gebruiken)

eigenschap/methode	betekenis
location.href	de huidige URL
location.hostname	de naam van de host in de URL
location.protocol	het gebruikte protocol, bijvoorbeeld http, file of ftp
location.reload()	herlaadt de huidige URL
location.replace("nieuweURL")	vervangt de huidige URL door de nieuwe
document.bgColor	de achtergrondkleur van het document
document.fgColor	De tekstkleur van de pagina
document.lastModified	De datum waarop de laatste wijziging van de pagina heeft plaatsgevonden
document.title	De titel van de pagina
location.hostname	De naam van de host waarop de lopende webpagina staat
location.referrer	De naam van de site van waaruit de lopende webpagina is gestart (als de lopende webpagina via een link is gestart)
document.URL	de URL van het geladen document
document.forms[]	een array met de namen van alle formulieren in het document, waarbij document.forms[0] het eerste formulier aanduidt, document.forms[1] het tweede formulier, enz
document.images[]	een array met de namen van alle afbeeldingen, waarbij document.images[3] de vierde afbeelding aanduidt.
document.links[]	een array met de namen van alle links, waarbij document.links[3] de vierde link aanduidt.
document.all[]	een array met de namen van alle elementen gedefinieerd door elementID, waarbij document.all[3] het vierde element aanduidt.
document.clear()	wist het huidig document uit het venster
document.write("tekst")	drukt de tekst in het huidig document af
document.writeln("tekst")	drukt de tekst + <BR> in het huidig document af
document.forms[]	wist het huidig document uit het venster
history.length	het aantal pagina's in de historylijst
history.back()	ga naar de vorige pagina in de historylijst
history.forward()	ga naar de volgende pagina in de historylijst
history.go(3)	ga naar de derde pagina in de historylijst

In de volgende oefening worden een aantal van deze eigenschappen en methoden gebruikt:

Oefening 9

Maak een html-document zoals hieronder, en probeer het uit.

<HTML>
<HEAD>
<TITLE>Oefening 9 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript"  TYPE="text/javascript" >
document.write(document.URL+"<br>");
document.write("De huidige URL is " + location.href +"<br>");
document.write("De naam van de host is " + location.hostname + "<br>");
document.write("Het protocol is " + location.protocol + "<br>");
document.write("Het aantal regels in de history is " + history.length);

function vorige()
{  history.back();  }
  
function wis()
{  document.clear(); }
  
</script>
</head>
<body>
  
<form>
<input type="button" value="vorige" onClick="vorige()">
<input type="button" value="wis" onClick="wis()">
</form>

</body>
</html>

Toelichting:
Als je op de knop met wis klikt gebeurt er niets.
Dat komt omdat de opdracht document.clear() tot gevolg heeft dat het html-document in het geheugen wordt gewist, maar de pagina wordt niet herschreven en blijft dus gewoon staan. Als je wilt dat het wel gewist wordt moet je er voor zorgen dat er een nieuw document verschijnt, kijk daarvoor naar de paragraaf over frames.

2.2 Het window-object

Als je de opdracht document.href="url" gebruikt wordt er een nieuwe pagina in het huidige venster geopend, en dan is de vorige pagina verdwenen.
De opdracht window.open("url") doet precies hetzelfde.
Maar met de opdracht window.open kun je er ook voor zorgen dat er een nieuw venster wordt geopend, terwijl het vorige ook blijft staan.
Je kunt dan van het venster zelf een aantal dingen instellen.
Algemeen ziet de code er als volgt uit:

window.open('bestandsnaam.html', 'naam_van_het_venster', 'attributen')

Je kunt de volgende attributen gebruiken:

height="100"	hoogte van het venster in pixels
width="200"	breedte van het venster in pixels
height=screen.height	hoogte van het venster is gelijk aan de hoogte van het scherm (de totale hoogte inclusief de taakbalk enz)
height=screen.availHeight	hoogte van het venster is gelijk aan de hoogte van het scherm (de hoogte exclusief de taakbalk enz)
width=screen.width-100	breedte van het venster is gelijk aan de hoogte van het scherm - 100
screenX="100"	linkermarge van het venster
screenY="400"	bovenmarge van het venster
resizable="no"	de venster-grootte kan niet worden aangepast
scrollbars="yes"	wel schuifbalken
toolbar="no"	werkbalk niet zichtbaar boven in je browserscherm
menubar="yes"	menubalk wel zichtbaar
titlebar="no"	titelbalk niet zichtbaar
status="no"	geen statusbalk onderin je scherm
location="yes"	de URL wordt wel getoond in de adresbalk
directories="no"	geen balk in je browser met directories

Wil je het venster sluiten, dan doe je dat met de opdracht self.close(), tenminste als die code in het document staat waarvan het venster gesloten moet worden.

Het window-object heeft nog meer eigenschappen en methoden:

eigenschap/methode	betekenis
window.name	de naam van het venster
self.name	de naam van het venster, self is het actieve browservenster
top	synoniem van het parent venster
window.document	het huidig document in het venster
window.location	de URL van het huidig document
window.frames	een array met de namen van alle frames van het venster
window.length	het aantal frames van het venster
window.close()	sluit het venster
window.opener	het venster waarin het huidige venster is geopend
window.alert(tekst)	toont de tekst in een boodschappenvenster
a = window.confirm(tekst)	toont de tekst in een bevestigingsvenster, met een OK- en een CANCEL-knop. Als er op OK geklikt wordt krijgt a de waarde 1 (true) en anders 0 (false)
window.status = "tekst"	toont de tekst op de statusbalk
a = window.prompt(string1,string2)	Er verschijnt een venstertje met de tekst van string1 er in; en er wordt verwacht dat er iets in het invulvenster wordt ingevoerd, en in dat invulvenster is de inhoud van string2 alvast vermeld De variabele a bevat daarna de inhoud van de ingevoerde tekst
setTimeout("func", milliseconden)	Voert de functie uit na een bepaalde tijd (de naam van die functie moet tussen aanhalingstekens worden gezet), na het aantal milliseconden dat is ingevoerd.
clearTimeout(ID)	Voert de functie, die is ingevoerd met ID=setTimeout(.....), niet meer uit na het aantal milliseconden.
find(string, [casesensitive],[backward])	Zoekt naar de "string" in de pagina, en daarbij is "casesensitive" een Boolse variabele die aangeeft of het zoeken hoofdlettergevoelig is. Verder is "backwards" een Boolse variabele die er voor zorgt dat er achterwaarts gezocht wordt, als hij true is.
focus()	Zet de focus in het venster, zodat het naar de voorgrond springt.
moveBy(dx, dy)	Verplaatst het venster met het aantal pixels, dat is aangegeven.
moveTo(x, y)	Verplaatst de linker bovenhoek van het het venster naar de aangegeven plaats, in pixels.
open(URL, [naam], [attributen])	Opent een nieuw venster, zie hierboven
print()	Drukt de inhoud van het venster af.
resizeBy(dx, dy)	Vergroot het venster met het aangegeven aantal pixels.
resizeTo(x y)	Vergroot of verkleint het venster tot het aangegeven aantal pixels.
resizeTo(screen.width,screen.availHeight)	De breedte van het documentvenster wordt gelijk aan de breedte van het scherm, en de hoogte van het documentvenster wordt gelijk aan de hoogte van het scherm, dus het documentvenster wordt schermvullend
scrollBy(dx, dy)	Scrollt het venster met het aangegeven aantal pixels.
scrollTo(x, y)	Scrollt het venster tot het aangegeven aantal pixels.

2.3 On-the-fly-documenten

Je kunt m.b.v. JavaScript ook zogenaamde on-the-fly-documenten maken.
Dat betekent dat er een nieuwe pagina wordt getoond, maar de html-code van die pagina staat niet in een html-bestand op de schijf: het wordt door Javascript-code aangemaakt.

Oefening 10a

Maak een html-document zoals hieronder, en probeer het uit.

<html>
<head>
<TITLE>Oefening 10a JavaScript </TITLE> <script language="JavaScript" TYPE="text/javascript" >

function nieuwvenster()
{
venster2= open("","nieuw","width=500,height=400,status=yes,toolbar=no,menubar=no");

// open het document voor bewerking
venster2.document.open();

// maak het document
venster2.document.write("<html><head><title>On-the-fly");
venster2.document.write("</title></head><body>");
venster2.document.write("<font color='#0000FF'><H1>");
venster2.document.write("Dit HTML-document is gemaakt met JavaScript");
venster2.document.write("</H1> </font> ");
venster2.document.write("<form>");
venster2.document.write("<INPUT type='button' VALUE='sluiten' onClick='self.close()';>");
venster2.document.write("</form>");
venster2.document.write("</body></html>");

// sluit het document af voor bewerking (het venster wordt niet gesloten !)
venster2.document.close();
}
</script>
</head>
<body>
Klik op de button als je het nieuwe venster wilt openen;<BR>

<form>
<input type=button value="Open een on-the-fly venster" onClick="nieuwvenster()">
</form>

</body>
</html>

Uitleg:

De functie waar het om gaat heet nieuwvenster()
De eerste opdracht van die functie venster2= open("","nieuwvenster" enz) zorgt er voor dat er een nieuw venster wordt geopend.

Het eerste argument is een lege string ""
Dat betekent dat we geen URL aangeven, want er moet geen bestaand document worden geladen.

Nadat we het venster geopend hebben moeten we het document openen.
Dit gebeurt d.m.v. de opdracht venster2.document.open();
Denk er om dat open() methode van het document-object een andere methode is dan de open() methode van het windows-object.
Dit commando zorgt er voor dat we het document aan kunnen maken.

In de volgende regels worden de regels van het document m.b.v. de opdracht document.write( ) gemaakt.

En als dat is gebeurd moeten we het document weer sluiten, want dan pas kan het getoond worden.
Dat sluiten gebeurt m.b.v. de volgende code: venster2.document.close();

Denk er wel om dat de tekst, die moet worden afgedrukt met document.write( ) tussen aanhalingstekens moet worden gezet. Maar als in die tekst ook nog weer aanhalingstekens voorkomen dan kan de browser in de war raken van al die aanhalingstekens. Gebruik dan dubbele aanhalingstekens ( " ) voor het begin en einde van de tekst, en enkele aanhalingstekens ( ' ) voor de rest.
( Zie de regel venster2.document.write("<INPUT type='button' VALUE='sluiten' onClick='self.close()';>"); )

Denk er ook om dat het sluiten van het document ( venster2.document.close(); ) een andere betekenis heeft dan het sluiten van het window (onClick='self.close()').
In het eerste geval betekent het dat het document klaar is in het geheugen, er wordt niets meer aan toegevoegd.
In het tweede geval betekent het dat het venster wordt afgesloten, het verdwijnt van het scherm.

Waarden meegeven naar een on-the-fly-venster

Als je een waarde in het hoofdvenster hebt ingevoerd, en je wilt dat daar iets mee gebeurt in het on-the-fly-venster, dan moet dat wel op een speciale manier.
Als je de waarde in het hoofdvenster m.b.v. van een variabele hebt vastgelegd (bijv. m.b.v. var getal = 22), dan kun je die variabele in het on-the-fly-venster niet zonder meer gebruiken.
Die variabele hoort bij het window-object van het hoofdvenster, en niet bij het window-object van het on-the-fly-venster.
Als die variabele in een tekstvenster is ingevoerd in het hoofdvenster, en de naam van het formulier is form1 en de naam van het tekstvenster is tekst1, dan kun je die waarde in het hoofdvenster opvragen m.b.v.
window.document.form1.tekst1.value
maar in het on-the-fly-venster moet je het opvragen m.b.v.
window.opener.document.form1.tekst1.value

Verder heb je bij het maken van een on-the-fly-venster in de Javascript-opdrachten ook weer Javascript-opdrachten, en dan krijg je te maken met opdrachten zoals:
venster2.document.write("document.write(a)' + '</script>'");

Dan moet je er om denken dat de binnenste aanhalingstekens andere zijn dan de buitenste aanhalingstekens.
Maar dan nog krijg je vaak foutmeldingen door de vele haakjes en aanhalingstekens en slashes en backslashes.

Je kunt het dan beter splitsen op de volgende manier:
var output = 'document.write(a)' + '<\/script>'
venster2.document.write(output+'\n');
Denk er om dat in dit geval voor het slash-teken / het zogenaamde ontsnappingsteken \ gezet moet worden.
Denk er ook om dat je + '\n' toevoegt, dat heeft tot gevolg dat de volgende Javascript-opdracht in het html-document van het on-the-fly-venster op een nieuwe regel begint.

Oefening 10b

Maak een html-document zoals hieronder, en probeer het uit.

<html>
<head>
<TITLE>Oefening 10b JavaScript </TITLE> <script language="JavaScript" TYPE="text/javascript" >

function nieuwvenster()
{
venster2= open("","nieuw","width=500,height=400,status=yes,toolbar=no,menubar=no");
venster2.document.open();
venster2.document.write("<html><head><title>On-the-fly</title>\n");
venster2.document.write("<script language='Javascript' TYPE='text/javascript'>\n");
output = "var a= window.opener.form1.getal.value;"
venster2.document.write(output+'\n');
var output = "document.write('Het ingevoerde getal is ')";
venster2.document.write(output+'\n');
output = 'document.write(a)' + '<\/script>'
venster2.document.write(output+'\n');
venster2.document.write("</head><body>");
venster2.document.write("<br><br>Dit is een on-the-fly-document");
venster2.document.write("</body></html>");
venster2.document.close();
}
</script>
</head>
<body>
<form name = "form1">
Vul hier een getal in: <input type=text name="getal" ><br><br>

Klik op de button om een nieuw venster te openen waar het ingevoerde getal in verschijnt;<BR>

<input type=button value="Open een on-the-fly venster" onClick="nieuwvenster()">
</form>

</body>
</html>

2.4 Frames

In hoofdstuk 6 van de cursus HTML hebben we een html-document gemaakt waarmee een aantal frames werden aangemaakt.
Dat ging als volgt:

<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET rows="20%,80%">
<FRAME src="boven.htm" name="boven"> <FRAMESET cols="20%,80%">
<FRAME src="kolom1.htm" name="links" >
<FRAME src="kolom2.htm" name="rechts"
</FRAMESET>
</FRAMESET> </HTML>

Het bovenstaande document hebben we opgeslagen onder de naam frame.htm

Verder hebben we nog drie documenten "boven.htm" en "kolom1.htm" en "kolom2.htm" gemaakt.
De code van het document kolom1.htm was als volgt:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Dit zit links</H1>
</BODY<
</HTML>

De andere twee zijn soortgelijke documenten, en als we dan frame.htm in Internet Explorer openen dan zien we het volgende:

Naar het linkerframe verwijzen we in Javascript met de naam window.links, omdat er in het frameset-document de volgende code staat:
<FRAME src="kolom1.htm" name="links" >

We gaan nu een button in het linkerframe zetten, en wel zo dat als je op die button klikt er het volgende gebeurt:

Er verschijnt een prompt-box, waarin om een naam wordt gevraagd.
Daarna verschijnt er een prompt-box, waarin om een kleur wordt gevraagd.
Daarna zal die naam in het rechter frame verschijnen, en de ingevoerde kleur wordt de achtergrondkleur van het document in het rechter frame.

Verander daarvoor kolom1.htm als volgt:

<HTML>
<HEAD>
<script language="JavaScript" TYPE="text/javascript" >

function SchrijfRechts(tekst,kleur)
{
parent.rechts.document.clear();
parent.rechts.document.open();
parent.rechts.document.write("<HTML>");
parent.rechts.document.write("<HEAD></HEAD>");
parent.rechts.document.write("<BODY BGCOLOR=#" + kleur + ">");
parent.rechts.document.write(tekst);
parent.rechts.document.write("</BODY>");
parent.rechts.document.write("</HTML>");
parent.rechts.document.close();
}

function vraag_naam_kleur()
{
var naam = prompt("Wat is je naam?", "");
var k = prompt("Geef een hexadecimale kleur", "FFFF00");
SchrijfRechts(naam, k);
}

</SCRIPT>

</HEAD>
<body>

<form>
<input type="button" value="Schrijf !" onClick="vraag_naam_kleur()">
</form>

</body>
</html>

Uitleg:

Als je op de button met Schrijf ! klikt dan wordt de functie met de naam vraag_naam_kleur() uitgevoerd.
Er wordt dan om een naam en een kleur gevraagd.
En daarna wordt de functie SchrijfRechts(tekst, kleur); uitgevoerd, en wel zo dat tekst de ingevoerde naam bevat, en kleur de ingevoerde kleur k.

De eerste opdracht van die functie is parent.rechts.document.clear();

Met parent wordt de vader van de linkerkolom bedoeld, dat is het document waarin het frame is gedefinieerd.
En rechts is de naam van het rechter frame, dat is een subobject van het parent-frame.
Als je parent weglaat gaat het mis, want het frame rechts is geen subobject van het frame rechts.
Het document, dat in het rechter frame zit wordt dus gewist.
Daar merk je niets van, behalve als je er voor zorgt dat er een nieuw html-document in het geheugen komt.
Daarvoor moet je eerst het document, dat dan leeg is, weer openen.
Dit gebeurt d.m.v. de opdracht parent.rechts.document.open();
Dit commando zorgt er voor dat we het document aan kunnen maken.

In de volgende regels worden de regels van het document m.b.v. de opdracht document.write( ) gemaakt.

En als dat is gebeurd moeten we het document weer sluiten, want dan pas kan het getoond worden.
Dat sluiten gebeurt m.b.v. de volgende code:parent.rechts.document.close();

Twee documenten tegelijk laden.

In de volgende oefening zie je hoe je in twee frames tegelijk een nieuw document kunt laten verschijnen.

Oefening 11

Zorg er voor dat je de documenten zoals hierboven met de namen frame.htm, boven.htm en kolom2.htm hebt.
Maak het html-document kolom1.htm zoals hieronder, en probeer het uit.

<HTML>
<HEAD>
<TITLE>Oefening 11 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
function Laadtwee(Bestand1,Bestand2)
{
parent.links.location = Bestand1;
parent.rechts.location = Bestand2;
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="JavaScript:Laadtwee('file1.htm','file2.htm')">Laad file1 en file2 !</A> </BODY>
</HTML>

Uitleg:

De opdracht parent.links.location = Bestand1; heeft hetzelfde gevolg als de opdracht window.open(Bestand1,'links');
Met parent wordt de vader van het frame links bedoeld, dat is het document waarin het frame is gedefinieerd.
Je kunt ook zeggen dat het frame links het kind (ook wel child genoemd) is van het totale frameset-venster.

Je ziet dat er in de functie parameters Bestand1 en Bestand2 worden gebruikt.
Dat heeft tot gevolg dat als de functie als volgt wordt aangeroepen: Laadtwee('file1.htm','file2.htm') de documenten file1.htm en file2.htm worden ingelezen.

2.5 Het image-object

Een image-object is een onderdeel van het document-object, dat op zijn beurt weer een deelobject van het window-object is, daarom kun je het noteren als window.location.image
Maar window mag je weglaten, dus je mag het als location.image noteren.

Een afbeelding declareren gaat op de volgende manier:
pic = new Image(200,100) ;
Dit heeft tot gevolg dat er geheugenruimte wordt gereserveerd voor een afbeelding, en wel zoveel geheugen er nodig is voor een afbeelding van 200 bij 100. En de naam van de variabele, waarin die afbeelding wordt vastgelegd, is pic

Het image-object heeft de volgende eigenschappen en methoden:

eigenschap/methode	betekenis
document.images.length	het aantal afbeeldingen in het document
document.images	een array met de namen van alle afbeeldingen in het document, waarbij document.images[0] de eerste afbeelding aanduidt, document.images[1] de tweede afbeelding, enz
document.images[i].name	de naam van afbeelding nr. i+1, zoals die in de tag van de afbeelding is gegeven
pic.src = "foto.gif";	het bestand foto.gif wordt ingeladen, en de inhoud wordt bewaard in de image-variabele pic (het wordt nog niet getoond !) Die variabele pic moet vantevoren als image zijn gedeclareerd.
document.figuur.src = pic.src	de afbeelding, die wordt bewaard in de image-variabele pic, wordt getoond in het document, op de plaats van de afbeelding met de naam figuur. De naam, in dit geval figuur, moet in de tag van de afbeelding zijn gedefinieerd
document.images[3].border of document.figuur.border	de breedte van de rand in pixels van de afbeelding met de naam (die als attribuut is meegegeven) figuur, of van afbeelding nr. 4
document.figuur.fileSize	de bestandsgrootte van de afbeelding
document.figuur.fileSize	de bestandsgrootte van de afbeelding
document.figuur.height	de hoogte van de afbeelding
document.figuur.width	de breedte van de afbeelding

Een afbeelding veranderen

We gaan nu eens bekijken hoe je een afbeelding op de pagina kunt laten veranderen.
We willen dat het volgende gebeurt:

als je er met de muis overheen gaat verandert de afbeelding
als je de muis er weer vanaf haalt verandert de afbeelding weer terug
als je op de afbeelding klikt wordt 'verder.htm' geladen

Oefening 12

Zorg er dat je een html-document hebt zoals hieronder en probeer het uit.
Je moet foto1.gif en foto2.gif wijzigen in de namen van plaatjes die op de schijf staan, het mogen ook jpg-files zijn. En als het formaat van de grootste bijv. 300 bij 275 is, dan moet je Image(200,100) veranderen in Image(300,275)
En bekijk het na die wijzigingen met je browser.

<HTML>
<HEAD>
<TITLE>Oefening 12 Javascript</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
{
  plaatje1 = new Image(200,100);
  plaatje1.src = "foto1.gif";
  plaatje2 = new Image(200,100);
  plaatje2.src = "foto2.gif";
}
function Toonplaatje1()
{  document.figuur.src = plaatje1.src;  }
function Toonplaatje2()
{  document.figuur.src = plaatje2.src;  }
</SCRIPT>
</HEAD>
<BODY>
<A HREF="verder.htm" onMouseOver="Toonplaatje2(); return true" onMouseOut="Toonplaatje1(); return true">
<IMG SRC="foto1.gif" NAME="figuur"></A>
</BODY>
</HTML>

Uitleg:

In de JavaScript code gebeurt het volgende:

De opdracht plaatje1 = new Image(200,100); heeft tot gevolg dat er geheugenruimte wordt gereserveerd voor een plaatje, en wel zoveel geheugen er nodig is voor een plaatje van 200 bij 100.
De opdracht plaatje1.src = "foto1.gif"; heeft tot gevolg dat foto1.gif alvast wordt ingeladen, en de inhoud wordt bewaard in de variabele plaatje1 (het wordt nog niet getoond !)
De opdracht document.figuur.src = plaatje1.src; heeft tot gevolg dat het plaatje getoond wordt in het document waarmee je bezig bent, op de plaats waar eerst foto1 stond.
Dat de plaats van foto1 wordt bedoeld zie je aan de naam figuur, die is aangegeven in de tag voor de afbeelding: <IMG SRC="foto1.gif" NAME="figuur">
Hetzelfde gebeurt met plaatje 2.

2.6 String-methoden

Een string is een stukje tekst.
En als je dat stukje tekst in een variabele hebt opgeslagen, bijv. w = "javascript", dan kun je daar bepaalde methoden op loslaten.
Bijvoorbeeld w.length geeft de lengte van de string w, dat is in dit geval dus 10
Je hebt o.a. de volgende methoden voor een string:
(we passen het allemaal toe op de string w = "javascript")

methode	betekenis
w.length	de lengte van de string w, dus 10
w.bold	de string met ervoor de tag <B> en er achter de tag </B>, dus "<B>javascript</B>"
w.italics	de string met ervoor de tag <I> en er achter de tag </I>
w.sub	de string met ervoor de tag <sub> en er achter de tag </sub>
w.fontsize(3)	de string met ervoor de tag <FONT size="3"> en er achter de tag </font>
w.link("url")	de string met ervoor de tag <A href="url"> en er achter de tag </A>
w.charAt(7)	geeft het zevende teken van de string, dus r
w.charCodeAt(7)	geeft de ASC-code van het zevende teken van de string (of de UNI-code), dus de ASC-code van de r, en dat is 114
z = w.concat(p)	Zet de strings w en p achter elkaar, en z wordt die gecombineerde string
w.fromCharCode(65)	w wordt het teken met ASC-code 65, dus w = "A"
w.indexOf("s")	geeft het nummer van de eerste s in de string (ze beginnen te tellen bij 0!), dus 4 Als het teken niet voorkomt wordt de waarde -1. Dus bijvoorbeeld w.indexOf("q") = -1
w.indexOf("a",2)	geeft het nummer van de eerste a gerekend vanaf het derde teken in de string (ze beginnen te tellen bij 0!), dus 3
w.lastIndexOf("a")	geeft het nummer van de laatste a gerekend vanaf het derde teken in de string (er wordt nu van achter naar voor gezocht!), dus 3
z = w.split("a")	levert een array van strings, waarin de string wordt gesplitst als je de "a" als scheidingsteken gebruikt. Dus de array z bestaat uit drie strings: z[0]=j , z[1]=v , en z[2]=script
w.substr(3)	levert een substring, vanaf teken nr. 3 tot het eind (ze beginnen te tellen bij 0!), dus "ascript"
w.substr(3, 4)	levert een substring van 4 tekens, vanaf teken nr. 3 (ze beginnen te tellen bij 0!), dus "ascr"
w.substring(3)	levert een substring, vanaf teken nr. 3 tot het eind (ze beginnen te tellen bij 0!), dus "ascript"
w.substring(3, 6)	levert een substring, vanaf teken nr. 3 tot teken nr. 6 (nr. 6 niet meegerekend, ze beginnen te tellen bij 0!), dus "asc"
w.toLowerCase()	levert dezelfde string, maar alles met kleine letters
w.toUpperCase()	levert dezelfde string, maar alles met hoofdletters, dus w = "JAVASCRIPT"

In het volgende voorbeeld wordt er gecontroleerd of er wel een geldig e-mail adres is ingevuld:

Oefening 13

Zorg er voor dat je een html-document hebt dat er uit ziet zoals hieronder.
En probeer het uit.

<HTML>
<HEAD>
<TITLE>Oefening 13 Javascript</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
var email = "";

function geef_email()
{
email = prompt("Geef je emailadres","");
test_email();
}

function test_email()
{
if (email == "" || email == null || email.indexOf ('@', 0) == -1)
{
alert ("Geen geldig e-mailadres!");
}
else
{
e = email.split("@");
alert ("De lengte van het emailadres is " + email.length+ "\n" + "Voor het apestaartje staat " + e[0] + "\n" + " en achter het apestaartje staat " + e[1]);
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=BUTTON value="klik hier als je je emailadres wilt opgeven" onClick="geef_email()">
</FORM>
</BODY>
</HTML>

Uitleg:

if (email == "") : hier wordt gecontroleerd er wel iets is ingevoerd.
Omdat er niets tussen de aanhalingstekens "" staat, is dat de lege string.
|| betekent of.
if (email == null) : hier wordt gecontroleerd of er op Annuleren geklikt is, want dan krijgt email de waarde null.
email.indexOf ('@', 0) is de plaats van het teken @ in email vanaf het begin (vanaf teken nr. 0). Als het teken er niet in voorkomt krijgt het de waarde -1
e = email.split("@"); heeft tot gevolg dat email gesplitst wordt door het @-teken.
e[0] wordt het gedeelte van de string dat voor het @-teken staat, en e[1] wordt het gedeelte van de string dat achter het @-teken staat.
Hetzelfde kon je bereiken met de volgende opdrachten:
(begin krijgt dezelfde waarde als e[0], en eind krijgt dezelfde waarde als e[1])
var a = email.indexOf ('@', 0);
var begin = email.substr(0,a);
var l = email.length;
var eind = email.substr(a+1,l-1);
\n zorgt er voor dat de rest op een nieuwe regel wordt afgedrukt.

2.7 Arrays

Een array bestaat uit een aantal variabelen, die bij elkaar horen.
Je kunt bijvoorbeeld een array maken voor de dagen van de week, en die array noem je dan bijvoorbeeld namen.
De eerste naam wordt dan opgeslagen in de variabele namen[0]. De tweede naam in namen[1] enz.

Je moet een array wel vantevoren declareren. Dat doe je d.m.v. de opdracht namen= new Array().
(of m.b.v. de opdracht namen= new Array(6), als je het aantal ook aan wilt geven, maar dat is niet nodig)
Daarna kun je de waarden aangeven:

namen[0]= "zondag"
namen[1]= "maandag"
enz

Je hoeft je geen zorgen te maken over de grootte van de array, en je kunt zowel getallen als strings of andere objecten in een array opslaan. In het volgende voorbeeld verschijnt de naam van de dag automatisch op het scherm, en er wordt elke dag een bepaald spreekwoord getoond.

Oefening 14

Zorg er voor dat je een html-document hebt zoals hieronder
En probeer het uit.

<HTML>
<HEAD>
<TITLE>Oefening 14 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript">

namen= new Array();
namen[0]="zondag";
dagen[1]="maandag"
namen[2]="dinsdag"
namen[3]="woensdag"
namen[4]="donderdag"
namen[5]="vrijdag"
namen[6]="zaterdag"

spreekwoord=new Array()
spreekwoord[0]="Eigen haard is goud waard"
spreekwoord[1]="Haastige spoed is zelden goed"
spreekwoord[2]="Beter laat dan nooit"
spreekwoord[3]="Wie het laatst lacht, lacht het best"
spreekwoord[4]="De morgenstond heeft goud in de mond"
spreekwoord[5]="Zoals het klokje thuis tikt, tikt het nergens"
spreekwoord[6]="Oost west, thuis best"
datum= new Date()
dag=datum.getDay()
document.write("Het is vandaag " + namen[dag] + "<br>");
document.write("De tip van de dag is " + spreekwoord[dag] + "<br>");

</SCRIPT>
</HEAD>
<BODY>
Dit is de body, daar staat verder niets bijzonders.
</BODY>
</HTML>

Uitleg:

De opdrachten
datum= new Date()
dag=datum.getDay()
hebben tot gevolg dat de variabele dag het nummer van de dag krijgt.
Als het bijvoorbeeld dinsdag is, krijgt dag de waarde 3
En namen[dag] is dan dus dinsdag, zodat de juiste dagnaam wordt afgedrukt.
En spreekwoord[dag] levert dan spreekwoord[3] op, dus dan wordt er "Wie het laatst lacht, lacht het best" afgedrukt

2.8 Getallen en berekeningen

Als je speciale dingen met getallen wilt doen in Javascript, dan heb je het zogenaamde Math-object nodig.
Voorbeeld:
Je hebt een variabele g, die de waarde 27,64 heeft.
De opdracht var h = Math.round(g) zorgt er dan voor dat g op gehelen wordt afgerond, dus h krijgt dan de waarde 27

Je hebt o.a. de volgende eigenschappen en methoden voor getallen:
(we passen het allemaal toe op de string w = "javascript")

methode	betekenis
Math.random()	levert een willekeurig getal tussen 0 en 1
Math.round(x)	rondt het getal x af op gehelen , dus 5,56 wordt 6
Math.floor(x)	rondt het getal x af naar beneden op gehelen , dus 5,6 wordt 5
Math.ceil(x)	rondt het getal x af naar boven op gehelen , dus 5,3 wordt 6
Math.sqrt(x)	Geeft de wortel van x
Math.sin(x)	Geeft de sinus van x, x is de hoek in radialen
Math.cos(x)	Geeft de cosinus van x, x is de hoek in radialen
Math.tan(x)	Geeft de tangens van x, x is de hoek in radialen
Math.asin(x)	Geeft de arcsinus van x, dus de hoek (in radialen), waarvan de sinus x is
Math.acos(x)	Geeft de arccosinus van x, dus de hoek (in radialen), waarvan de cosinus x is
Math.atan(x)	Geeft de arctangens van x, dus de hoek (in radialen), waarvan de tangens x is
Math.exp(x)	Geeft de waarde van e^x
Math.log(x)	Geeft de natuurlijke logaritme van x, dus ln(x)
Math.abs(x)	Geeft de absolute waarde van x
Math.pow(x,y)	Geeft de x^y
Math.max(a, b)	Geeft de grootste van de twee waarden
Math.min(a, b)	Geeft de kleinste van de twee waarden
Math.PI	de waarde van p , dat is ongeveer 3,14
Math.E	het getal e uit de wiskunde (dat is ongeveer 2,72)
Vanaf Javascript 2.5:	Ga bij de volgende methoden ervan uit dat var g = 2489.8237
var h = g.NaN	Is true als g geen getal is (Not a Number), hier is h false
var h = g.toFixed(3)	g wordt op drie decimalen afgerond , dus hier geldt: h = 2489.824
h = toPrecision(12)	het getal wordt m.b.v. 12 tekens afgedrukt , er worden nullen gebruikt ter opvulling. Hier geldt: h= 0002489.8237
h = toExponential(x)	Het getal x wordt genoteerd m.b.v. de wetenschappelijke notatie , dus hier geldt: h = 2,49 x 10³

De omzetting van een numerieke naar een stringvariabele kan met de toString()-methode:
(Stel dat t een stringvariabele is, en g een getal-variabele)
t = g.toString();
Het omgekeerde kan met de evalfunctie worden uitgevoerd:
g = eval(t);
Maar het kan ook op een andere manier:
Als je de opdracht t = "" + g; geeft wordt t automatisch een string-variabele, hij neemt automatisch het type aan van de eerste term.
Als je de opdracht g = 1 * t; geeft wordt g automatisch een getal-variabele, want vermenigvuldigen kan alleen bij getallen.

2.9 SetTimeout en slideshow

Met behulp van de setTimeout-methode kun je de computer iets laten doen na een bepaalde tijd.

Je kunt bijvoorbeeld de volgende opdracht geven : c = setTimeout("toonFoto()", 5000);

Het eerste argument is de functie die uitgevoerd wordt na een bepaalde tijd.
In dit geval is dat de functie toonFoto( ) (zie de oefening hier onder)
Denk er om dat de naam van de JavaScript-functie tussen aanhalingstekens moet staan.
Het tweede argument vertelt de computer na hoeveel milliseconden de functie uitgevoerd moet worden, in dit geval is dat dus na vijf seconden.
Er staat c= voor de setTimeout-functie.
Als er verschillende setTimeout-functies zijn dan krijgen die allemaal een bepaald nummer, en c bevat dan de waarde daarvan. Dat is nodig om de setTimeout-opdracht te kunnen stoppen.
Je mag c = ook uit de opdracht weglaten (dan noteer je de opdracht dus als setTimeout("toonFoto()", 5000); ), maar dan heb je niet de mogelijkheid om er voor te zorgen dat de opdracht niet wordt uitgevoerd.
Als je hebt aangegeven dat na een aantal millisec. een functie moet worden uitgevoerd, maar binnen die tijd kom je op het idee dat de functie toch maar niet moet worden uitgevoerd, dan kun je het stopzetten.
Met de opdracht clearTimeout(c); kun je er voor zorgen dat de setTimeout-functie wordt stopgezet, dus dat de functie niet wordt uitgevoerd.
Daarbij moet c het nummer van de setTimeout-opdracht bevatten. Vandaar dat bij de eerste setTimeout-opdracht er c = voor stond.

In onderstaande oefening wordt dit toegepast, en ook een aantal dingen uit de vorige paragrafen.
Er wordt in dat voorbeeld een slideshow gemaakt, daarbij worden een aantal foto's achter elkaar getoond.
Steeds verschijnt automatisch na een aantal seconden de volgende foto uit een lijst.

Oefening 15a

Zorg er voor dat je een html-document hebt zoals hieronder.
En probeer het uit.

<HTML>
<HEAD>
<TITLE>Javascript oefening 15a </TITLE>
<SCRIPT LANGUAGE="JavaScript">

var toev = "";
var sec = 3;
var millisec = 3000;
var nummer = 1;
var c = 0;

foto = new Array;

for (var i=0; i<=25; i++)
{
	if (i<10) 
		{toev="0" + i;}
	else 
		{toev="" + i;}

	foto[i]="M51100"+ toev +".JPG";
}

var aantal = foto.length;

function toonFoto() 
{
    nummer = nummer + 1;
    if (nummer > aantal) {nummer = 0;}
    document.afbeelding.src = foto[nummer];
    c = setTimeout("toonFoto()", millisec);
}

function starten()
{
	sec = window.prompt("hoeveel sec. per foto?","3");
	millisec = 1000*sec;
	c = setTimeout("toonFoto()", millisec);
}

function stop()
{
	clearTimeout(c);
}

</SCRIPT>
</HEAD>
<BODY>

<form name="formulier" >
  <input type="button" value="start slideshow" onClick="starten()">
  &nbsp; &nbsp; &nbsp;
  <input type="button" value="stop slideshow" onClick="stop()">
</form>
<BR>
<img src="M5110001.JPG" name="afbeelding">
</BODY>
</HTML>

Uitleg:

De namen van de foto's worden eerst in een array gezet.
Als ik digitale foto's maak geeft mijn camera de foto's automatisch de namen M5110001.JPG, M5110002.JPG, M5110003.JPG, enz.
Die namen worden in een array gezet m.b.v. de opdracht:
foto[i]="M51100"+ toev +".JPG";
Er wordt dus een toevoeging aan "M51100" vastgeplakt, en daar achter wordt nog ".JPG" geplakt.
Bij de eerste foto is die toevoeging "01", bij de tweede "02", enz.

Die toevoeging wordt gemaakt m.b.v. de opdracht:
if (i<10) {toev="0" + i;} else {toev="" + i;}
Als i < 10 is dan moet het getal i, met een extra 0, worden toegevoegd.
Als i <= 10 is dan moet het getal i worden toegevoegd zonder extra 0.

En als je 25 foto's hebt dan zorg je er met de opdracht for (var i=0; i<=25; i++) { ........ }
voor dat alle 25 foto's de juiste naam krijgen.
Als je op de "start slideshow"-knop klikt wordt de functie starten() uitgevoerd.
Er wordt dan gevraagd hoelang elke foto moet blijven staan, en daarna wordt de opdracht c = setTimeout("toonFoto()", millisec); uitgevoerd.
Dat heeft tot gevolg dat de volgende foto na een aantal seconden wordt getoond.
De laatste opdracht van de toonFoto()-functie is weer c = setTimeout("toonFoto()", millisec);
Dus ook daarna wordt weer een volgende foto na een aantal seconden getoond. En zo gaat dat steeds verder.
Als je op de "stop slideshow"-knop klikt wordt de functie stop() uitgevoerd.
Die bestaat uit alleen de opdracht clearTimeout(c); , en dat heeft tot gevolg dat de toonFoto-functie niet meer wordt uitgevoerd.
Als je daarna weer op de "start slideshow"-knop klikt wordt er weer gevraagd hoelang elke foto moet blijven staan, en dan gaat de slideshow verder met de volgende foto.
Denk er wel om dat als je het met je eigen foto's wilt uitproberen, de namen van de foto's waarschijnlijk anders zijn.
En als de foto's in een submap staan, dan moet de naam van die submap voor de naam van de foto's worden gezet, met het backslash-teken ertussen. Maar dan moet je er ook nog om denken dat, als je het backslash-teken \ in Javascript gebruikt, Javascript dat als een zogenaamd escape-teken opvat. Je moet dan twee backslash-tekens \\ achter elkaar zetten (of een slash en een backslash, dus /\ ), dan wordt er één afgedrukt!

De volgende oefening lijkt veel op de vorige, maar er zijn een paar veranderingen in aangebracht.
Ook nu wordt er een slideshow gemaakt, waarbij een aantal foto's achter elkaar worden getoond.
Maar nu worden eerst alle foto's ingelezen.
En verder wordt er een zogenaamde fade-techniek toegepast: je krijgt een vloeiende overgang van de ene foto in de andere.

Oefening 15b

Zorg er voor dat je een html-document hebt zoals hieronder.
En probeer het uit.

<HTML>
<HEAD>
<TITLE>Javascript oefening 15b </TITLE>
<SCRIPT LANGUAGE="JavaScript">

var toev = "";
var sec = 3;
var millisec = 3000;
var nummer = 1;
var c = 0;
var ft = 1;           

foto = new Array;
foto_in_geh = new Array;

for (var i=1; i<=25; i++)
{
	if (i<10) 
		{toev="0" + i;}
	else 
		{toev="" + i;}

	foto[i]="M51100"+ toev +".JPG";
	foto_in_geh[i] = new Image();
	foto_in_geh[i].src = foto[i];
}

var aantal = foto.length;

function toonFoto() 
{
    if (document.all) 
    {
	document.images.afbeelding.style.filter="blendTrans(duration=ft)";
	document.images.afbeelding.filters.blendTrans.Apply();
	document.images.afbeelding.src = foto_in_geh[nummer].src;
	document.images.afbeelding.filters.blendTrans.Play();
    }

    nummer = nummer + 1;
    if (nummer > aantal) {nummer = 1;}
    c = setTimeout("toonFoto()", millisec);
}

function starten()
{
	sec = window.prompt("hoeveel sec. per foto?","3");
	millisec = 1000*sec;
	c = setTimeout("toonFoto()", millisec);
}

function stop()
{
	clearTimeout(c);
}

</SCRIPT>
</HEAD>
<BODY>

<form name="formulier" >
  <input type="button" value="start slideshow" onClick="starten()">
  &nbsp; &nbsp; &nbsp;
  <input type="button" value="stop slideshow" onClick="stop()">
</form>
<BR>
<img src="M5110001.JPG" name="afbeelding">
</BODY>
</HTML>