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

  • 109