BBL Week 6

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 2

Kennismakingsronde

• Javascript basis concepten

Doelen

Wat is javascript?

Kennismakingsronde

    Variabelen

•    Container voor het opslaan van gegevens in het computergeheugen
  
•     Declaratie met  let of const.
•     Voorbeelden:  let naam = "John";

    Datatypes
        Verschillende soorten gegevens die kunnen worden opgeslagen in variabelen.
        Voorbeelden: getallen, strings(tekst) , booleans(waar/niet waar) , arrays (verzameling), objecten(verzameling)

    Operatoren
        Symbolen die worden gebruikt voor het uitvoeren van bewerkingen op variabelen en waarden.
        Voorbeelden: +, -, *, /, ==, !=.

Javascript basisconcepten

Kennismakingsronde

Voorwaardelijke instructies

    Gebruikt om code uit te voeren op basis van bepaalde voorwaarden.
    if, else if, else.

    Voorbeelden:

Javascript basisconcepten

Kennismakingsronde

Lussen / loops

    Gebruikt om code te herhalen
    for, while, do...while.
    Voorbeeld:

Javascript basisconcepten

Kennismakingsronde

Functies

    Blokken code die herbruikbaar zijn en een specifieke taak uitvoeren.
    Belangrijk concept in programmeren voor het organiseren en structureren van code.

   Voorbeeld van declaratie en aanroep

Javascript basisconcepten

Kennismakingsronde

Event Listeners

Wat zijn event listeners?

•     Gebruikt om te luisteren naar bepaalde gebeurtenissen (events) en code uit te voeren wanneer deze gebeurtenissen optreden.
•     Maakt interactieve functionaliteit mogelijk, zoals het reageren op gebruikersinteracties.

Toevoegen van een event listener
    Syntax: element.addEventListener(eventType, callbackFunction).

    Voorbeeld:

Belangrijke event types
    Click, mouseover, mouseout, keydown, keyup, enz.
    Elke interactie van de gebruiker kan een event triggeren.

Javascript basisconcepten

Kennismakingsronde

• events.html in itslearning
• Experimenteer
• Verander bijvoorbeeld kleur bij elke beweging
• Voeg een geluidje toe
• ...
  

Oefening

Kennismakingsronde

• maak een map 'js' aan in jouw werkmap
  
• Download css_veranderen.html en html_veranderen.html html_veranderen.html
• zet twee willekeurige plaatjes in jouw map
• voeg plaatje 1 toe aan html_veranderen.html
• voeg javascript toe om plaatje 2 te tonen als je
  op de button klikt.
  

Oefening

Kennismakingsronde

• https://www.codecademy.com/learn/introduction-to-javascript

Verdiepen

Wat is het belangrijkste dat jij hebt geleerd over Javascript?

Kennismakingsronde

• Introductie javascript

Volgende week

• start Wordpress

Terug- en vooruitblik