programmeren

in JaVASCRIPT

Jaar 4 - Module 2 - Les 7: Meer muisinteractie

Dit jaar gaan we...

Leren hoe websites werken
Wat het verschil is tussen server & client software

Dit jaar gaan we...

Leren hoe websites werken
Wat het verschil is tussen server & client software
Zelf een website maken met Python, HTML & Javascript
Voor jezelf, of voor een eigen klant

De komende weken gaan we...

Leren hoe JavaScript werkt

De komende weken gaan we...

Leren hoe JavaScript werkt
Een memory game maken met JavaScript

De komende weken gaan we...

Leren hoe JavaScript werkt
Een memory game maken met JavaScript
JavaScript toepassen op je eigen website

vandaag gaan we leren

interactiviteit op andere dingen dan knoppen

We hebben al gezien dat je een eventListener aan een knop kan koppelen.

HTML & JavaScript

We hebben al gezien dat je een eventListener aan een knop kan koppelen.

HTML & JavaScript

let par = document.getElementById("tekst");
let knop = document.getElementById("knop1");
knop.addEventListener("click", groet);

function groet(){
  par.innerHTML = "Je hebt geklikt op de knop!";
}

We hebben al gezien dat je een eventListener aan een knop kan koppelen.

HTML & JavaScript

let par = document.getElementById("tekst");
let knop = document.getElementById("knop1");
knop.addEventListener("click", groet);

function groet(){
  par.innerHTML = "Je hebt geklikt op de knop!";
}

Zoek de knop op

We hebben al gezien dat je een eventListener aan een knop kan koppelen.

HTML & JavaScript

let par = document.getElementById("tekst");
let knop = document.getElementById("knop1");
knop.addEventListener("click", groet);

function groet(){
  par.innerHTML = "Je hebt geklikt op de knop!";
}

Hangt functie groet eraan

We hebben al gezien dat je een eventListener aan een knop kan koppelen.

HTML & JavaScript

let par = document.getElementById("tekst");
let knop = document.getElementById("knop1");
knop.addEventListener("click", groet);

function groet(){
  par.innerHTML = "Je hebt geklikt op de knop!";
}

Hangt functie groet eraan

Let op!

Zonder haakjes!

We hebben al gezien dat je een eventListener aan een knop kan koppelen.

HTML & JavaScript

let par = document.getElementById("tekst");
let knop = document.getElementById("knop1");
knop.addEventListener("click", groet);

function groet(){
  par.innerHTML = "Je hebt geklikt op de knop!";
}

De functie groet

We hebben al gezien dat je een eventListener aan een knop kan koppelen.

HTML & JavaScript

let par = document.getElementById("tekst");
let knop = document.getElementById("knop1");
knop.addEventListener("click", groet);

function groet(){
  par.innerHTML = "Je hebt geklikt op de knop!";
}

De functie groet

Hier wel met haakjes ().

demo

Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.

HTML & JavaScript

  <body>
    <p id="par1">Klik eens op dit blok!</p>
    <script src="index.js"></script>
  </body>

Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.

HTML & JavaScript

var index = 0;

let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);

let kleuren = ["yellow", "red", "green", "blue", "grey"];

function veranderKleur() { 
    paragraaf1.style.background = kleuren[index];
    index += 1;
}

  <body>
    <p id="par1">Klik eens op dit blok!</p>
    <script src="index.js"></script>
  </body>

Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.

HTML & JavaScript

var index = 0;

let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);

let kleuren = ["yellow", "red", "green", "blue", "grey"];

function veranderKleur() { 
    paragraaf1.style.background = kleuren[index];
    index += 1;
}

Zoekt par1 op

  <body>
    <p id="par1">Klik eens op dit blok!</p>
    <script src="index.js"></script>
  </body>

Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.

HTML & JavaScript

var index = 0;

let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);

let kleuren = ["yellow", "red", "green", "blue", "grey"];

function veranderKleur() { 
    paragraaf1.style.background = kleuren[index];
    index += 1;
}

Zoekt par1 op

  <body>
    <p id="par1">Klik eens op dit blok!</p>
    <script src="index.js"></script>
  </body>

Dat is een <p>

Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.

HTML & JavaScript

var index = 0;

let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);

let kleuren = ["yellow", "red", "green", "blue", "grey"];

function veranderKleur() { 
    paragraaf1.style.background = kleuren[index];
    index += 1;
}

Hangt functie veranderKleur eraan

Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.

HTML & JavaScript

var index = 0;

let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);

let kleuren = ["yellow", "red", "green", "blue", "grey"];

function veranderKleur() { 
    paragraaf1.style.background = kleuren[index];
    index += 1;
}

Deze functie dus!

Maar... je mag een eventListener ook aan iets anders dan een knop hangen. Bijv een stuk tekst of een plaatje.

HTML & JavaScript

var index = 0;

let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);

let kleuren = ["yellow", "red", "green", "blue", "grey"];

function veranderKleur() { 
    paragraaf1.style.background = kleuren[index];
    index += 1;
}

Wat doet deze functie?

demo

Er zijn ook andere listeners dan "click", bijv mouseover.

HTML & JavaScript

var index = 0;

let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("click", veranderKleur);

let kleuren = ["yellow", "red", "green", "blue", "grey"];

function veranderKleur() { 
    paragraaf1.style.background = kleuren[index];
    index += 1;
}

Er zijn ook andere listeners dan "click", bijv mouseover.

HTML & JavaScript

var index = 0;

let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("mouseover", veranderKleur);

let kleuren = ["yellow", "red", "green", "blue", "grey"];

function veranderKleur() { 
    paragraaf1.style.background = kleuren[index];
    index += 1;
}

Alleen dit verandert

demo

opdrachten

Staan op Magister bij huiswerk bij volgende week!

Module 2 - Les 7

By Felienne

Module 2 - Les 7

Leerdoel Module: JavaScript Lesdoel: Meer vormen van user interactie

445

Felienne