programmeren
in JaVASCRIPT
Jaar 4 - Module 2 - Les 5: Invoer van de gebruiker
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
-
(muis)invoer van de gebruiker verwerken
In PyGame hebben we met muisinvoer gewerkt, dat ging zo:
Python
In PyGame hebben we met muisinvoer gewerkt, dat ging zo:
Python
A = pygame.image.load("A.png") A_rechthoek = a.get_rect() #deze code wordt herhaald voor B en B_rechthoek antwoord = 'geen' while True: #... Hier hoort code om alle elementen zoals tekst # en letters A en B in beeld te krijgen met blit pygame.event.get() locatie_muis = pygame.mouse.get_pos() knoppen = pygame.mouse.get_pressed() if knoppen[0] == 1: if A_rechthoek.collidepoint(locatie_muis): antwoord = 'A' if B_rechthoek.collidepoint(locatie_muis): antwoord = 'B'
In PyGame hebben we met muisinvoer gewerkt, dat ging zo:
Python
A = pygame.image.load("A.png") A_rechthoek = a.get_rect() #deze code wordt herhaald voor B en B_rechthoek antwoord = 'geen' while True: #... Hier hoort code om alle elementen zoals tekst # en letters A en B in beeld te krijgen met blit pygame.event.get() locatie_muis = pygame.mouse.get_pos() knoppen = pygame.mouse.get_pressed() if knoppen[0] == 1: if A_rechthoek.collidepoint(locatie_muis): antwoord = 'A' if B_rechthoek.collidepoint(locatie_muis): antwoord = 'B'
In deze regel kijken we of de muis is ingedrukt.
In PyGame hebben we met muisinvoer gewerkt, dat ging zo:
Python
A = pygame.image.load("A.png") A_rechthoek = a.get_rect() #deze code wordt herhaald voor B en B_rechthoek antwoord = 'geen' while True: #... Hier hoort code om alle elementen zoals tekst # en letters A en B in beeld te krijgen met blit pygame.event.get() locatie_muis = pygame.mouse.get_pos() knoppen = pygame.mouse.get_pressed() if knoppen[0] == 1: if A_rechthoek.collidepoint(locatie_muis): antwoord = 'A' if B_rechthoek.collidepoint(locatie_muis): antwoord = 'B'
Best complex!
HTML & JavaScript
In JavaScript gaat dat makkelijker gelukkig!
In JavaScript gaat dat makkelijker gelukkig!
HTML & JavaScript
Een knop is een object en daar kunnen functies "aan hangen".
In JavaScript gaat dat makkelijker gelukkig!
HTML & JavaScript
Een knop is een object en daar kunnen functies "aan hangen".
Zo'n functie heet een event (gebeurtenis) listener (luisteraar)
In JavaScript gaat dat makkelijker gelukkig!
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!"; }
Een knop is een object en daar kunnen functies "aan hangen".
Zo'n functie heet een event (gebeurtenis) listener (luisteraar)
In JavaScript gaat dat makkelijker gelukkig!
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!"; }
Een knop is een object en daar kunnen functies "aan hangen".
Zo'n functie heet een event (gebeurtenis) listener (luisteraar)
Zoek de knop op
In JavaScript gaat dat makkelijker gelukkig!
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!"; }
Een knop is een object en daar kunnen functies "aan hangen".
Zo'n functie heet een event (gebeurtenis) listener (luisteraar)
Hangt functie groet eraan
In JavaScript gaat dat makkelijker gelukkig!
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!"; }
Een knop is een object en daar kunnen functies "aan hangen".
Zo'n functie heet een event (gebeurtenis) listener (luisteraar)
De functie groet
demo
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
Memory game eisen
-
Er zijn "kaartjes" met een voor- en achterkant
Memory game eisen
-
Er zijn "kaartjes" met een voor- en achterkant
-
Klikken op een kaartje draait ze om
Memory game eisen
-
Er zijn "kaartjes" met een voor- en achterkant
-
Klikken op een kaartje draait ze om
Dat kan met een click!
Memory game eisen
-
Er zijn "kaartjes" met een voor- en achterkant
-
Klikken op een kaartje draait ze om
-
Twee dezelfde kaartjes?
-
Punt gescoord
-
Kaartjes doen niet meer mee
-
Memory game eisen
-
Er zijn "kaartjes" met een voor- en achterkant
-
Klikken op een kaartje draait ze om
-
Twee dezelfde kaartjes?
-
Punt gescoord
-
Kaartjes doen niet meer mee
-
-
Extra opties? Bijv:
-
Tijd wordt korter
-
Random "glitches"
-
User met wachtwoord en spelhistorie
-
Memory game
-
Deadline:
-
Week na de meivakantie (13 mei)
-
Telt mee voor:
-
7% (HAVO)
-
5% (VWO)
-
-
opdrachten
- Staan op Magister bij huiswerk bij volgende week!
programmeren in JaVASCRIPT Jaar 4 - Module 2 - Les 5: Invoer van de gebruiker
Klas 4 - Module 2 - Les 5
By Felienne
Klas 4 - Module 2 - Les 5
Leerdoel Module: JavaScript Lesdoel: Invoer in JavaScript
- 694
