Introductie

Om te kunnen coderen hebben we een editor nodig. Met de editor kunne we de code intypen en aanpassen.

Voor deze introductie maken we gebruik van de light weigth code editor Atom.

Download

Download Atom en installeer de editor (alternatieve downloads: hier en hier )

Configuratie

Start Atom op en ga naar menu file dan settings en kies dan in de linker kolom Keybindings.

Klik op your keymap file (bovenaan).

Er wordt een bestand geopend. Kopieer de volgende tekst daar in:

'atom-text-editor':
  'ctrl-alt-f': 'editor:auto-indent'

De tekst kan gewoon onderaan bestand worden toegevoegd.

Je kan het bestand en de settings tabjes nu sluiten. Je bent klaar voor het echte werk!

Uitleg

Code is beter leesbaar als we de code op een bepaalde manier 'uitlijnen'. Uitlijnen is het netjes vormgeven van code.

Met de configuratie optie die we net hebben ingesteld kunnen we de uitlijning automatisch door de code-editor laten uitvoeren.

Later zullen we zien hoe dit werkt!

Starting up

In de Atom editor maak je een nieuw bestand aan (file, new file).

Je ziet een lege pagina.

Dit is de code waar we mee gaan starten.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Traffic Light Simulator</title>

<style>
  <!-- hier wordt de vormgeving gecondeerd -->
</style>

<script>
   <!-- hier wordt het algoritme van de pgaina gecodeerd -->
</script>

</head>

<body class='main'>
  lege pagina
</body>
</html>

Kopieer de bovenstaande code in de lege pagina in de editor.
Bewaar (file, save) de pagina op bij voorkeur je Desktop en geef het de naam stoplicht.htm
Ga naar je Desktop en dubbel klik op het nieuwe bestand.

Als het goed is zie je de lege pagina in je browser.

Tip

In windows op je desktop zie je nadat je het bestand hebt opgeslagen een bestand met de naam stoplicht.

Zie je alleen stoplicht en niet stoplicht.htm?

Als dat zo is, dan kan je dat verhelpen (in Windows 11) door in de file explorer de optie file name extensions aan te klikken:

Testen

Probeer de tekst 'lege pagina' te veranderen in een eigen tekst en controleer of je het resultaat in de browser ziet!

Als dit werkt dan kun je verder met de volgende stap.

Stap 1, het stoplicht

We beginnen met de algemene set-up.

Op de plaats waar je de tekst (in de vorige stap) hebt aangepast, plaats je deze code:

  <div class="traffic-light">
      <div id='red' class="lamp"></div>
      <div id='orange' class="lamp"></div>
      <div id='green' class="lamp"></div>
      <div id='text' class="text">-</div>
  </div>

We hebben nu drie lampen gemaakt en daaronder plaatsen we een tekst.

Als je dit hebt uitgevoerd en je test dit dan zie je nog niets dat komt, omdat we de vormgeving nog moeten maken.

Tussen de <style> en </style> tags, plaatsen we de volgende CSS code voor de vormgeving.

    .main {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 800px;
        background-color:DarkGray;
    }
    .traffic-light {
        display: flex;
        flex-direction: column;
        width: 100px;
        padding: 20px;
        background-color: black;
        border: 2px solid #666;
        border-radius: 10px;
    }
    .lamp {
        width: 50px;
        height: 50px;
        margin: 10px auto;
        background-color:darkgray ;
        border-radius: 50%;
        transition: background-color 0.8s;
    }
    .text {
      color:white;
      margin: 10px auto;
      font-family: fantasy;
    }

Uitleg

Je ziet telkens een woord met een punt ervoor. Dit zijn class definities.

Als je in de code kijkt dan zie je ergens class='lamp' staan de CSS-code die we net hebben geplaatst en die .lamp heet heeft betrekking op de HTML-code met class='lamp'.

Testen

Als het goed is zie je nu een soort traffic light op je pagina.

Ga alleen door als je dit verkeerslicht ziet.

Stap 2, de lampen

Rode licht

Om de lamp te laten branden, plaatsen we code in het <script> </script> gedeelte.

function switchLight(color) {
    if (color === 'red') {
      document.getElementById("red").style.backgroundColor="red";
      document.getElementById("orange").style.backgroundColor="darkgray ";
      document.getElementById("green").style.backgroundColor="darkgray ";
      document.getElementById("text").innerHTML="STOP";
    }
}

Plaats deze code tussen <script> en </scipts>.

Er gebeurt nu nog niets, maar we hebben nu een functie switchLight gemaakt.

Deze functie zet het rode licht aan.

We veranderen nu de regel waar het rode licht staat zodat als we op het rode licht klikken de functie wordt aangeroepen.

De HTML-code voor het rode licht wordt nu:

<div id='red' class="lamp" onclick="switchLight('red')"></div>

We het licht nu veranderd zodat wanneer je op het licht klikt (onclick), de nieuwe functie die we hebben gemaakt wordt aangeroepen.

Testen

Controleer of als je o het rode licht klikt, het rode licht inderdaad 'aan' gaat.

Ga verder als het werkt.

Oranje licht.

Voor het oranje licht breiden we de code in het script gedeelte uit met:

if (color === 'orange') {
      document.getElementById("red").style.backgroundColor="darkgray ";
      document.getElementById("orange").style.backgroundColor="orange";
      document.getElementById("green").style.backgroundColor="darkgray ";
      document.getElementById("text").innerHTML="-";
}

Let op dat deze if onder de bestaande if en in de functie moet staan.

Let hierbij op de { en }.

Nu kunnen we in de editor op CTRL-ALT=F druken. De editor zorgt voor de juiste identation (vormgeving van de code) zodat je makkelijker kan controleren of je alle { en } goed hebt staan.

Plaats in de HTML-code bij het oranje licht ook een verwijzing naar de functie net als bij het rode licht.

<div id='orange' class="lamp" onclick="switchLight('orange')"></div>

Testen

Test of het oranje en rode licht nu werken. Ga naar je browser en klik op het rode en oranje licht. Lichten beide lichten op? Top, dan kan je verder naar de laatste stap, het groen licht.

Groen licht

We hebben het rode- en groene licht gemaakt. Deze werken.

Probeer nu zelf het groene licht werkend te krijgen!

De tekst die onder het groene licht moet verschijnen is 'GO'.

Testen

Test of al je lichten werken en ga verder als dat zo is.

Stap 3, halo-effect

Halo effect

Om meer een gevoel te krijgen dat er echt een lamp brandt, voegen we bij de lamp die aan is een zogenaamd halo-effect toe.

Dat ziet er als volgt uit:


Zonder halo effect	Met halo effect

Om dit te maken voegen we eerst een class toe aan de styles (tussen <style> en </style>):

.glow {
      box-shadow: 0 0 20px 8px rgba(165,165,165,0.8);
}

Via de code in <script> </script> kunnen we de style toepassen.

Halo-effect aan

Om het halo-effect aan te zetten voegen we de class toe aan het licht met de code:

document.getElementById("red").classList.add('glow');

Halo-effect uit

En om het halo-effect uit te zetten halen we de class weer weg met de code:

document.getElementById("red").classList.remove('glow');

Probeer nu zelf te bepalen waar in de code je het halo-effect aan en uit moet zetten. Doe dat eerst alleen voor het rode licht.

Testen

Als het rode licht aan is, dan zie je het halo-effect en als het rode licht uit is dan is het halo-effect weg.

Je kunt op twee manieren het rode licht uit zetten: door op het oranje- of groene licht te drukken. Test of in beide gevallen het halo-effect uit gaat.

Als dat werkt dan kun je door naar de volgende stap.

Halo effect op oranje en groene licht

Breidt de code nu uit en maak een halo-effect op het groen licht en daarna op het oranje licht.

Testen

Test goed of alles werkt, klik alle lampen aan en uit en controleer of in alle gevallen het halo-effect aan en uitschakelt.

Werkt alles?

Gefeliciteerd, je hebt deel 1 van de opdracht volbracht!

Stap 4, eerst oranje

Als we het licht op groen hebben staan en we drukken op rood dan gaat het licht op rood.

Maar eigenlijk mag dit niet. Als je van groen naar rood gaat dan moet het licht eerst naar oranje!

De opdracht is nu om als we op rood drukken een controle te maken of welk licht aan is. Is het groen licht aan dan gebeurt er niets.

Onthoud de kleur

Om dit te kunnen doen, moeten we eerst in de code 'onthouden' welke lamp aan is.

Dit gaan we onthouden in een variabele.

Helemaal bovenaan in de code tussen (<script> en </script>) plaatsen we de volgende code.

var colorOn;

Hiermee maken we een variabele waarin we 'onthouden' welke lamp aan is.

Nu moeten we zorgen dat de juiste waarde in variabele wordt gezet.

In het if-blokje van green, zetten we

colorOn = 'green';

In het rode blokje zetten we natuurlijk

 colorOn = 'red'

En in het orange blokje zetten we

colorOn='orange'

Nu wordt telkens als er een lamp wordt aangezet de kleur van de lamp onthouden in de variabele colorOn.

Controle bij rood

In het de code vlak onder de regel:

if (color === 'red') {if (color === 'red') {

gaan we nu controleren of het groene licht aan is.

Dat doen we met de volgende code:

if ( colorOn == 'green' ){
        return;
}

Wat hier staat is dat als het groene licht aan is, we de functie verlaten en verder niets meer doen. Het rode licht gaat dan dus niet meer aan.

Testen

Dus we kunnen op een lamp drukken en dan gaat de lamp aan, behalve als de groen lamp aan is en we drukken op de rode lamp dan gebeurt er niets. Dit mag immers niet omdat we eerst op oranje moeten drukken.

Rood via oranje

Als het stoplicht op groen staat en we drukken op rood dan gebeurt er nu niets. Maar we zouden in dit geval ook het licht op oranje kunnen zetten.

Dus als het licht op groen staat en je drukt op rood dan gaat het oranje licht aan.

Wat gebeurt er nu als we van groen naar rood willen gaan? Dan wordt er een return uitgevoerd en dat betekent dat er niets gebeurt. In plaats van de return zouden we ook het licht op oranje kunnen zetten en daarna de functie stoppen via een return.

Kan jij bedenken hoe je dit zou moeten doen?

Kijk eens wat er gebeurt als je op het licht klikt? Dan wordt de functie aangeroepen. Vlak voor s de return zou je dus ook eerst het licht op oranje kunnen zetten door op de juiste manier de functie kunnen aanroepen.

Testen

Alle lichten gaan aan als je op het licht drukt, behalve als je op het rode licht drukt, terwijl het groene licht aan staat dan zal het oranje licht aan gaan.

Stap 5, rood via oranje

Als we het licht op groen staat en we drukken op rood dan gaat het oranje licht aan. Daarna kunnen we weer op rood drukken en dan gaat het rode licht aan.

We kunnen dit ook in één stap uitvoeren. Dus het licht staat op groen, we drukken op rood. Het licht gaat dan op oranje en na één seconde gaat het licht daarna vanzelf op rood.

Wat we moeten doen is de code veranderen die nu wordt uitgevoerd als we rood drukken terwijl het licht op groen staat.

Als het goed is, wordt daar nu het licht op op oranje gezet. Dat blijft zo.

Maar vlak daarná zal het licht op rood moeten worden gezet. Dat moet na 1 seconden. We kunnen daarvoor het volgende commando gebruiken:

setTimeout(function() { switchLight('red'); }, 1000);

Wat hier staat is dat de functie switchLight('red') na 1000 milliseconden moet worden uitgevoerd. 1000 milliseconden is 1 seconde, dus na 1 seconde wordt het licht op rood gezet.

Testen

Als je op een lamp drukt dan gaat deze lamp aan. Behalve als het licht op groen staat en je druk op rood. Dan zal eerst voor 1 seconde het oranje licht aan gaan en daarna zal het rode licht aan gaan.

Als dit werk dan kan je door gaan.

Stap 6, oranje flash

Als we op het oranje licht klikken dan zal die aan gaan, maar we hebben het algoritme al zo verandert dat het oranje licht vanzelf aan gaat als we het licht op rood willen zetten.

Wat we gaan doen is dat we het stoplicht 'uit' gaan zetten als we op het oranje licht klikken.

Welke stappen gaan we doen?

We gaan een style maken die het oranje licht laat knipperen.
We maken een nieuwe functie en die noemen we switchOff(). Deze functie voegt de nieuwe stijl toe aan het oranje licht en zet het groene en rode licht uit.

Flash stijl

In de style sectie plaatsen we twee nieuwe stijlen:

.lamp-flash {
  animation: flash 1s infinite;
}

@keyframes flash {
    0%, 100% { background-color: darkgray; } /* Light off (dark gray color) */
    50% { background-color: orange; } /* Light on (orange color) */
}

Als we nu de stijl lamp-flash toevoegen aan het oranje licht dan zal hij gaan knipperen.

Functie

In de nieuwe functie switchOff() zetten we het oranje licht op knipperen.

function switchOff() {
  document.getElementById("orange").classList.add('lamp-flash');
}

Functie aanroepen

Als je op het oranje licht klikt dan moet je in plaats van switchLight('red') nu switchOff() aanroepen.

Pas dit aan.

Testen

Als je nu op het oranje licht drukt dan gaat het oranje licht knipperen.

Nice, maar er zijn nog wel een paar stappen die niet goed werken.

Dat gaan we nu oplossen.

Oranje dan andere lichten uit.

Pas de switchOff() aan en zet de andere lichten uit. Kijk in de bestaande code hoe je de lichten uitschakelt en plaats deze code in de switchOff functie. Vergeet niet de glow ook uit te zetten!

En dan moet je de flash ook nog weer uit zetten.

Dat doe je met deze code:

document.getElementById("orange").classList.remove('lamp-flash');

Op het moment dat het stop licht uit staat (dus oranje knippert) dan kan je deze weer aan zetten door op het rode of groene licht te klikken.

Bedenk nu zelf waar je de code moet zetten om het stoplichte weer aan te zetten.

Tekst aanpassen

Als het oranje licht knippert moet de tekst onderaan het stoplicht veranderen naar '-'

Testen

Test of alles werkt aan de hand van volgende tabel.

Status	Klikt op	Resultaat	Tekst	Werkt?
Alles uit (begin)	rood	rood aan, rest uit.	-
rood aan	groen	groen aan, rest uit	STOP
groen aan	rood	oranje aan 1 sec, dan rood aan, rest uit.	GO
rood of groen aan	oranje	alles uit en oranje gaat knipperen	-
oranje knippert	rood	rood aan, rest uit	STOP
oranje knippert	groen	groen aan, rest uit	GO

Challenge, voetgangerslicht

Challenge

Een challenge is een uitdaging waarin je met hetgeen wat je hebt geleerd wordt gevraagd om wat te maken.

Je krijgt geen code en de stapjes worden niet allemaal beschreven. Er wordt gevraagd om wat te maken en dan mag je verder zelf bedenken hoe je dat aanpakt.

Voetgangerslicht

Stoplichten staan nooit alleen.

Maak een tweede licht voor voetgangers.

Koppel de twee verkeerslichten aan elkaar zodat als het voetgangerslicht op rood staat het verkeerslicht op groen staat en andersom. Beide lichten staan gelijktijdig op oranje.

Dus de lichten werken als volgt samen:

Bestaande verkeerslicht	Nieuwe voetgangerslicht
Rood	Groen
Groen	Rood
Oranje	Oranje

Introductie

Inleiding

Wat gaan we doen?

Wat gaan we maken?

Geen ervaring?

Wel ervaring?

Atom Editor

Introductie

Download

Configuratie

Uitleg

Starting up

Tip

Testen

Stap 1, het stoplicht

Uitleg

Testen

Stap 2, de lampen

Rode licht

Testen

Oranje licht.

Testen

Groen licht

Testen

Stap 3, halo-effect

Halo effect

Halo-effect aan

Halo-effect uit

Testen

Halo effect op oranje en groene licht

Testen

Stap 4, eerst oranje

Onthoud de kleur

Controle bij rood

Testen

Rood via oranje

Testen

Stap 5, rood via oranje

Testen

Stap 6, oranje flash

Flash stijl

Functie

Functie aanroepen

Testen

Oranje dan andere lichten uit.

Tekst aanpassen

Testen

Challenge, voetgangerslicht

Challenge

Voetgangerslicht