Random tekst die verandert in een spreuk
Hierboven zie je een venster. Bij het openen van deze pagina staat daarin een rij willekeurige ("random")
gekozen karakters, die veranderen in een spreekwoord. Na verloop van tijd wordt het spreekwoord vervangen door
weer een rij random karakters waaruit weer een spreekwoord te voorschijn komt.
Hier staat beschreven hoe je dit kunt aanpakken.
De code staat onderaan deze pagina. Je kunt hem ook downloaden.
- De code van dit script is te vinden in de file spreekw.js. Voor toepassing in je eigen website moet
er één en ander aan gewijzigd worden.
- Het venster waarin de spreuk verschijnt is onderdeel van een <form>, dat alleen het attribuut name heeft.
- Het venster zelf is gemaakt met een tag <INPUT type="text">. Omdat het alleen dient om programma-uitvoer in weer te geven heeft het ook het attribuut readonly.
- De uitvoering van het programma wordt gestart en gestopt met behulp van de event-handlers onLoad
en onUnload.
- De werking van het script is -zonder in details te treden- als volgt:
- Er wordt een object gemaakt, funcQuote(), waarin zich een array met spreuken bevindt.
- Er wordt willekeurig een spreuk gekozen.
- Het aantal karakters in de spreuk wordt geteld. Aan de voorzijde en de achterzijde wordt een serie spaties toegevoegd, zodanig dat de spreuk zelf in het midden staat. De totale lengte van de string wordt gelijk gemaakt aan quoteMax in het script.
- Op de plaats van de spreuk zelf worden willekeurige karakters gezet.
- Één voor één worden nu de letters van de spreuk zichtbaar gemaakt.
- Dit wordt herhaald totdat het script wordt gestopt.
- Het script wordt gestart door de function startQuote(). Op deze pagina gebeurt dat met onLoad in de <BODY>-tag. Je kunt het natuurlijk ook koppelen aan een knop of link.
- Het script wordt gestopt door de function stopQuote(). Op deze pagina gebeurt dat met onUnload
in de <BODY>-tag. Ook dit kun je natuurlijk ook koppelen aan een knop of link.
- Bij het toepassen van dit JavaScript moet je een paar dingen in de gaten houden:
- De variabele quoteMax in het JavaScript moet dezelfde waarde hebben als het size-attribuut in de <INPUT type="text">-tag in de HTML. Op deze bladzijde is dat 64.
- Het script werkt het mooiste als je een zg. monospaced lettertype gebruikt in het venster. Op deze bladzijde is dat opgelost door toepassing van font-family : "Courier New", Courier, monospace; op te geven in een <style>-attribuut, die weer in de <INPUT>-tag is geplaatst.
- Zorg ervoor dat de waarde van numQuote overeenstemt met het aantal spreuken in het object funcQuote(). Als numQuote niet correct is werkt het script niet goed!
- Met loopSpeed kun je de snelheid, waarmee de spreuk in het venster verschijnt, veranderen. Dit getal is
tenminste 1 en ten hoogste 1000. Zonodig past het script dit aan.
loopSpeed = 100 geeft een prettig resultaat. - Zorg er voor dat het aantal karakters dat in het venster past tenminste 2 groter is dan de langste spreuk die je wilt laten zien. Hiermee voorkom je dat het programma aan de volgende spreuk begint voordat de huidige spreuk helemaal in in het venster staat.
Gebruik:
- De code staat voor een deel in de <HEAD> en voor een deel in de <BODY>.
- Het starten en stoppen van het JavaScript programma staat in de <BODY>-tag.
(Zet dit JavaScriptje bij voorkeur in de <HEAD>)
<script src="spreekw.js"></script>(Zet deze code in de <BODY> op de plaats waar de teller moet komen)
<form name="RandomText">(Breid de <BODY>-tag uit met de volgende attributen)
<div align="center">
<input type="text" size="64" name="box1" readonly>
</div>
</form>
onLoad="startQuote()" onUnload="stopQuote()"
Downloaden:
Druk op de knop:
File: voorb063.zip, 1983 bytes.
Opmerking:
De file spreekw.js in de download-file bevat minder spreekwoorden dan op deze site worden gebruikt.
Als je steeds dezelfde spreuk wilt gebruiken zet je die spreuk op de plaats van this[0] in de function
funcQuote() en zet je numQuote op 1.
