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

  • 168