Javascript Basics

Datum en tijd ophalen

Wanneer je op de knop klikt, verschijnt daaronder de actuele tijd en datum.
Als eerst wordt er een button aangemaakt, daarin wordt een "onclick-event" gemaakt. Dit betekent dat wanneer er op de knop wordt geklikt, de code die daarin staat uitgevoerd moet worden.

De code die in dat onclick Event staat is als volgt:
"document.getElementById('demo').innerHTML = Date()"
De getElementById() functie geeft het element terug dat een ID attribuut heeft, en een waarde heeft. Dit ID wordt in de haakjes aangemaakt en krijgt de naam "demo".
De "innerHTML" veranderd de content van een paragraaf met de inhoud van 'demo'.
Vervolgens wordt de id ('demo' waarin de datum staat) weergegeven.

Een ander voorbeeld van deze methode staat hier.
Klik hier voor de broncode.

Lampje aan en uit

Dit lampje kun je aan en uit zetten met de twee onderstaande knoppen. Probeer het!
Net zoals hierboven bevat deze code een getElementById() functie. Echter wordt hier niet een ID gebruikt, maar een 'myImage' functie. Hierachter volgt een src command waar de afbeelding wordt opgehaald.
Er zijn twee afbeeldingen, één met het lampje uit, en één met het lampje aan. Er worden twee knoppen aangemaakt. Het enige verschil is dat er bij de eerste knop ("Lampje aan!") het plaatje staat waar het lampje aan staat, en bij de tweede knop ("Lampje uit...") het plaatje waar het lampje uit staat.
Simple as that!

Klik hier voor de broncode.


Steen Papier Schaar

Instructie: Kies uit Steen, Paper of Schaar. Zodra je je keuze aanklikt verschijnt een melding met de keuze van de computer. Kijk wat de computer heeft gekozen en wat jij hebt gekozen, en bepaal wie wint.

Als eerst worden er drie buttons aangemaakt. Deze krijgen een class="strategy". Vervolgens wordt er een script geopend en begint de Javascript. Een variablee 'coll' wordt aangemaakt en krijgt (net zoals hierboven) de volgende regel code:
document.getElementsByClassName("strategy");

Klik hier voor de broncode.

Vooruitgang

Poeh, dit is toch lastiger dan ik dacht.
Als ik eerlijk moet zijn, wil ik toch echt zeggen dat ik hier echt veel tijd in moet gaan steken. Het is leuk om natuurlijk klein POC's te maken, maar zeker volgend semester ben ik benieuwd hoe snel het zou gaan. Ik ben samen met mijn docent gaan kijken naar wat voor opdrachten ik kan maken, en wat mij het meeste helpt om deze taal snel te leren. Ik heb er vertrouwen in, maar er moet ook veel tijd en dicipline in gaan zitten.

Feedback

De feedback die ik heb gekregen geld eigenlijk voor de volgende sprint. Omdat ik het aan het eind van deze sprint zo druk het gehad, heb ik geen tijd gehad om uit te zoeken hoe ik alle JS-code tussen de HTML code uit kan halen en in een js-bestand kan zetten. Met mijn docent heb ik dus afgesproken om dat in de volgende sprint te doen. Wel erg bruikbare feedback dus.