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
- 572