Javascript

Events in javascript

Een 'event' is een gebeurtenis in Javascript. Als je op een element klikt dan is dat een 'klik'-gebeurtenis oftewel een 'click'-event. Als een 'event' plaatsvindt, dan kan je applicatie daarop reageren. Bijv. je klikt op een div-element en daardoor verandert de kleur van het div-element. Om dit voor elkaar te krijgen moet je de volgende stappen ondernemen:

Refereer naar een element met getElementById()
Gebruik de referentie om een element naar bepaalde 'events' te laten luisteren
1. Dit noem je een 'event-listener'
2. Met een 'event-listener' kun je element laten luisteren naar een 'click-event'
Reageer op het 'click-event'

<div id="knop" style="width:100px;height:100px;background-color: lightblue;">Klik me!</div>
<div id="view" style="width:100px;height:100px;">Bla</div>

<script>
   const el = document.getElementById('knop');
   el.addEventListener('click', function() {
      const target = document.getElementById('view');
      target.style.backgroundColor = "red";
      target.innerHTML = "Ik ben geklikt!";
   });
</script>

Een imageslider maken

Bij een imageslider wil je dat je met een klik een andere afbeelding laat zien.

Javascript Functies Opdracht 4.2 Maak een imageslider. Maak een html-pagina waarin een afbeelding wordt omgewisseld voor een andere afbeelding op het moment dat je er op klikt. Hoe is de aanpak:

Maak een div-tag waarin een afbeelding wordt weergegeven van bijv. 300 x 400 pixels.
Maak een achtergrondafbeelding van 3 aanelkaar gemaakte plaatjes. Totaal wordt de afbeelding 300 x 1200 pixels.
Maak de javascript die de achtergrond-afbeelding steeds 400 pixels naar links verschuift.

Dit is de css-stijl:

 <style>
     #apen {
         width:400px;
         height:300px;
         border:4px solid black;
         background-image:url('https://static.edutorial.nl/js/apen.jpg');
         transition: background-position 2s;
     }
 </style>

In de body van het html-document:

<div id="apen"></div>

Onderaan de html-pagina in de body komt het script:

<script>
  const apen = document.getElementById('apen');
  let pos = 0;
  apen.addEventListener('click', function() {
      if(pos >= 800) {
          pos = 0;
      } else {
          pos += 400;
      }
      apen.style.backgroundPosition = pos + "px";
  });
</script>

opdracht 5.1

Kijk op de website van learnersbucket.com. Hier vind je een aantal simpele javascript-games. Kies zelf een game die je wilt gaan maken. Je zult zien dat het maken van een game nog behoorlijk wat kennis vergt van javascript en css. Door games na te maken leer je welke technieken gebruikt worden om games te laten functioneren.

Javascript Interactief Monkey Chooser Maak een pagina waarop een 9-tal afbeeldingen te zien zijn. Zoek 9 afbeeldingen van je favoriete ... en zorg dat ze zijn uitgesneden op het formaat 300 bij 300 pixels. Maak een html-pagina zoals in het voorbeeld te zien is Schrijf het javascript waarmee je je favoriete plaatje kunt liken. Klik hier voor een voorbeeld

Javascript Interactief Monkey Memory Maak een pagina waarop een minimaal 18 afbeeldingen zijn. Er zijn 9 verschillende afbeeldingen. Iedere afbeelding komt dus 2 keer voor. De afbeeldingen zijn nog niet zichtbaar. Zodra je op een afbeelding klikt wordt deze zichtbaar gemaakt. Na een tweede klik wordt een 2e afbeelding zichtbaar. Als de twee afbeeldingen overeenkomen krijg je een punt! Maak een html-pagina zoals in het voorbeeld te zien is Schrijf het javascript voor de memory-app. Klik hier voor een voorbeeld

Javascript Interactief

Evaluatie Je hebt een listener gekoppeld aan een DOM element. Je kunt de stijl van DOM-elementen aanpassen door op andere DOM-elementen te klikken of door ze te veranderen.

monkey chooser PL_dDpKbU0KLbqjyEYK_7miNTEElwBW-aq

image slider https://youtube.com/playlist?list=PL_dDpKbU0KLaxmL3YkbBIEmxwZzUDFaOB