citaten genereren

Je maakt in deze training een script dat Quotes genereert.
In de HTML-code (de DOM) staat code, die door een JavaScript worden aangepast.
Hier het resultaat als je de video's doorgelopen hebt.

De HTML wordt geplaatst met een bijpassend stijlblad.
De body bevat slechts 4 elementen. Natuurlijk is er een div waar het citaat in komt.
Er komt ook een paragraaf-tag waar de naam van degene komt, die de quote ooit heeft gemaakt, en er zijn twee ronde elementen, die van het geheel een 'gedachtenwolkje' maken.

De opmaak wordt verder afgerond. Er typografische mogelijkheden worden uitgebreid als je werkt met met Google webfonts.
De ronde vormen krijg je door te werken met afgeronde hoeken.
Als de border-radius de helft is van de grootte van een element, dan wordt deze rond.

Het is de bedoeling dat het JavaScript tekst plaatst in de DOM (het HTML-document.
Daarvoor wordt een object aangemaakt. Dat is een variabele met meerder eigenschappen, zoals bijvoorbeeld de tekst.
Via document.getElementsById wordt een variabele aangemaakt, zodat je die kunt zeggen dat het zijn HTML moet aanpassen.
Het blijkt nu dat dit niet werkt. De getElementsByID werkt niet, omdat deze opdracht feitelijk te vroeg wordt gegeven. Als het wordt uitgevoerd, is het document niet gelezen en wordt het betreffende element dus niet gevonden.
We moeten dus een function init() maken, die pas wordt uitgevoerd NADAT het document (de DOM) is ingelezen.

Door een element met een ID tot variabele te maken, kunnen we deze manipuleren.
Met de eigenschap innerHTML kun je de inhoud van het element aanpassen.
Met de eigenschap style.background kun je de achtergrondkleur aanpassen. Je moet vooraf er natuurlijk wel voor zorgen dat die kleur het goede "format" heeft en er in dit geval een hash-tag voor plaatsen.

De quote staat als een object in het Javascript. Om uit meerdere quotes te kunnen kiezen, worden er eerst meerdere quotes geplaatst. Hiervoor wordt een array gemaakt en met objecten gevuld. Het array herken je aan de rechte haken [ en ], die de objecten omvatten. De objecten zijn met aanhalingstekens omgeven en door komma's gescheiden en door accolades { en } omgeven.

Omdat we in het script een andere variabele hebben, moet elke verwijzing naar de oude variabele worden aangepast naar de nieuwe naam van het array. We willen ook een bepaald object uit de array halen. Dat geven we weer [met de rechte haken] en het betreffende nummer aan. Bedenk dat de nummering in het array met een 0 begint.

De intit-functie wordt nu alleen maar in het begin aangeroepen.
We willen dat in de toekomst meerdere keren kunnen doen. Daarvoor wordt een functie aangeroepen, die de waarden voor tekst, auteur en kleur aanneemt en daarmee aan de slag gaat. De functie heeft dus 3 argumenten.
We kunnen de functie dus aanroepen door hem te noemen en de argumenten (in dit geval uit de array) er in stoppen.

Het is zelfs mogelijk een heel object in een functie op te geven als argument.
De functie kan dan de onderdelen van eht object apart eruit vissen en daarmee aan de slag gaan.
We gaan echter wel van 3 argumenten naar één en moeten dat dus zowel in de declaratie als bij het aanroepen verwerken. Ook in de acties binnen de functies zijn aanpassingen noodzakelijk.
Tot slot worden er in de functie nog commentaar toegevoegd om later hett werk nog te kunnen begrijpen.

Hier laten we zien hoe een willekeurig getal kan worden geselecteerd.
Er wordt gewerkt met de Math.random-functie en de Math.Floor-functie. De Math.rondom() kiest een getal tussen 0 en 1. Dit kun je vermenigvuldigen met een waarde, zodat het dan ligt tussen 0 en die vermenigvuldigingsfactor. Uiteindelijk moet er wel een heel getal uit komen. Dus wordt het met Math.floor() naar beneden afgerond.
Een en ander wordt geprobeerd in JSFiddle.

Met setInterval() kunnen we herhaald een functie aanroepen. Om de toonCitaat-functie een willekeurig citaat aan te laten roepen, moeten we de randomgenerator in die functie opnemen. Daarna kunnen we hem aanroepen en we proberen eerst korte interval-tijden om tot slot met een hogere waarde de bezoekers van de site te doordringen van de mooie doordenkers.

Plaats je resultaat on-line, bijvoorbeeld in de Public map van je Dropbox.
Stuur een link van de pagina naar t.denblanken@ma-web.nl.
In de Public map van Dropbox vind je die link door met je rechter muisknop op het bestand te klikken en te kiezen voor: Dropbox >> Copy Public Link.