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!

Klas 4 - Module 2 - Les 5

By Felienne

Klas 4 - Module 2 - Les 5

Leerdoel Module: JavaScript Lesdoel: Invoer in JavaScript

606

Felienne