programmeren

in JaVASCRIPT

Jaar 4 - Module 2 - Les 6: Meerdere elementen ophalen

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

 

  • meerdere elementen tegelijk ophalen

  • meerdere elementen tegelijk aanpassen

In PyGame hebben we met muisinvoer gewerkt, dat ging zo:

 

 

Python

HTML & JavaScript

Op een site heb je vaak meerdere instanties van een bepaalde tag.

HTML & JavaScript

Op een site heb je vaak meerdere instanties van een bepaalde tag.

Wat zijn instanties?

HTML & JavaScript

Op een site heb je vaak meerdere instanties van een bepaalde tag.

<!DOCTYPE html>
<html>
<head>
  <title>Kleuren</title>
</head>
<body>
  <p class="teksten" id="tekst0">Wat</p>
  <p class="teksten" id="tekst1">een</p>
  <p class="teksten" id="tekst2">mooie</p>
  <p class="teksten" id="tekst3">tekst</p>
  <script src="kleuren.js"></script>
</body>
</html>

HTML & JavaScript

Op een site heb je vaak meerdere instanties van een bepaalde tag.

<!DOCTYPE html>
<html>
<head>
  <title>Kleuren</title>
</head>
<body>
  <p class="teksten" id="tekst0">Wat</p>
  <p class="teksten" id="tekst1">een</p>
  <p class="teksten" id="tekst2">mooie</p>
  <p class="teksten" id="tekst3">tekst</p>
  <script src="kleuren.js"></script>
</body>
</html>

HTML & JavaScript

Op een site heb je vaak meerdere instanties van een bepaalde tag.

<!DOCTYPE html>
<html>
<head>
  <title>Kleuren</title>
</head>
<body>
  <p class="teksten" id="tekst0">Wat</p>
  <p class="teksten" id="tekst1">een</p>
  <p class="teksten" id="tekst2">mooie</p>
  <p class="teksten" id="tekst3">tekst</p>
  <script src="kleuren.js"></script>
</body>
</html>
var tekst0 = document.getElementById("tekst0");
var tekst1 = document.getElementById("tekst1");
var tekst2 = document.getElementById("tekst2");
var tekst3 = document.getElementById("tekst3");

tekst0.style.color = "red";
tekst1.style.color = "red";
tekst2.style.color = "red";
tekst3.style.color = "red";

HTML & JavaScript

Op een site heb je vaak meerdere instanties van een bepaalde tag.

<!DOCTYPE html>
<html>
<head>
  <title>Kleuren</title>
</head>
<body>
  <p class="teksten" id="tekst0">Wat</p>
  <p class="teksten" id="tekst1">een</p>
  <p class="teksten" id="tekst2">mooie</p>
  <p class="teksten" id="tekst3">tekst</p>
  <script src="kleuren.js"></script>
</body>
</html>
var tekst0 = document.getElementById("tekst0");
var tekst1 = document.getElementById("tekst1");
var tekst2 = document.getElementById("tekst2");
var tekst3 = document.getElementById("tekst3");

tekst0.style.color = "red";
tekst1.style.color = "red";
tekst2.style.color = "red";
tekst3.style.color = "red";

HTML & JavaScript

Op een site heb je vaak meerdere instanties van een bepaalde tag.

<!DOCTYPE html>
<html>
<head>
  <title>Kleuren</title>
</head>
<body>
  <p class="teksten" id="tekst0">Wat</p>
  <p class="teksten" id="tekst1">een</p>
  <p class="teksten" id="tekst2">mooie</p>
  <p class="teksten" id="tekst3">tekst</p>
  <script src="kleuren.js"></script>
</body>
</html>
var tekst0 = document.getElementById("tekst0");
var tekst1 = document.getElementById("tekst1");
var tekst2 = document.getElementById("tekst2");
var tekst3 = document.getElementById("tekst3");

tekst0.style.color = "red";
tekst1.style.color = "red";
tekst2.style.color = "red";
tekst3.style.color = "red";

demo

Dat is een hoop herhaling, en dat zou makkelijker moeten kunnen!

HTML & JavaScript

Gelukkig kan dat ook!

Dat is een hoop herhaling, en dat zou makkelijker moeten kunnen!

HTML & JavaScript

Gelukkig kan dat ook!

<!DOCTYPE html>
<html>
<head>
  <title>Kleuren</title>
</head>
<body>
  <p class="teksten" id="tekst0">Wat</p>
  <p class="teksten" id="tekst1">een</p>
  <p class="teksten" id="tekst2">mooie</p>
  <p class="teksten" id="tekst3">tekst</p>
  <script src="kleuren.js"></script>
</body>
</html>

De HTML blijft hetzelfde

Dat is een hoop herhaling, en dat zou makkelijker moeten kunnen!

HTML & JavaScript

Gelukkig kan dat ook!

<!DOCTYPE html>
<html>
<head>
  <title>Kleuren</title>
</head>
<body>
  <p class="teksten" id="tekst0">Wat</p>
  <p class="teksten" id="tekst1">een</p>
  <p class="teksten" id="tekst2">mooie</p>
  <p class="teksten" id="tekst3">tekst</p>
  <script src="kleuren.js"></script>
</body>
</html>

De HTML blijft hetzelfde

Maar we kijken nu naar de classes en niet naar de id's

Dat is een hoop herhaling, en dat zou makkelijker moeten kunnen!

HTML & JavaScript

Gelukkig kan dat ook!

<!DOCTYPE html>
<html>
<head>
  <title>Kleuren</title>
</head>
<body>
  <p class="teksten" id="tekst0">Wat</p>
  <p class="teksten" id="tekst1">een</p>
  <p class="teksten" id="tekst2">mooie</p>
  <p class="teksten" id="tekst3">tekst</p>
  <script src="kleuren.js"></script>
</body>
</html>
var teksten = document.getElementsByClassName("teksten");

for (var i = 0; i < teksten.length; i++) {
   teksten[i].style.color = "red";
}

Dat is een hoop herhaling, en dat zou makkelijker moeten kunnen!

HTML & JavaScript

Gelukkig kan dat ook!

<!DOCTYPE html>
<html>
<head>
  <title>Kleuren</title>
</head>
<body>
  <p class="teksten" id="tekst0">Wat</p>
  <p class="teksten" id="tekst1">een</p>
  <p class="teksten" id="tekst2">mooie</p>
  <p class="teksten" id="tekst3">tekst</p>
  <script src="kleuren.js"></script>
</body>
</html>
var teksten = document.getElementsByClassName("teksten");

for (var i = 0; i < teksten.length; i++) {
   teksten[i].style.color = "red";
}

Haalt alles dat teksten heet op

{

Dat zijn deze 

Dat is een hoop herhaling, en dat zou makkelijker moeten kunnen!

HTML & JavaScript

Gelukkig kan dat ook!

var teksten = document.getElementsByClassName("teksten");

for (var i = 0; i < teksten.length; i++) {
   teksten[i].style.color = "red";
}

Wat is teksten voor een type??

Dat is een hoop herhaling, en dat zou makkelijker moeten kunnen!

HTML & JavaScript

Gelukkig kan dat ook!

var teksten = document.getElementsByClassName("teksten");

for (var i = 0; i < teksten.length; i++) {
   teksten[i].style.color = "red";
}

teksten is een lijst

Dat is een hoop herhaling, en dat zou makkelijker moeten kunnen!

HTML & JavaScript

Gelukkig kan dat ook!

var teksten = document.getElementsByClassName("teksten");

for (var i = 0; i < teksten.length; i++) {
   teksten[i].style.color = "red";
}

Dus we kunnen er overheen lopen met een for lus

Dat is een hoop herhaling, en dat zou makkelijker moeten kunnen!

HTML & JavaScript

Gelukkig kan dat ook!

var teksten = document.getElementsByClassName("teksten");

for (var i = 0; i < teksten.length; i++) {
   teksten[i].style.color = "red";
}

Iedere element in de lijst is de tag zelf

<p class="teksten" id="tekst0">Wat</p>

demo

Je kan ook ophalen per tag, ipv per class

HTML & JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>Kleuren</title>
</head>
<body>
  <p class="teksten" id="tekst0">Wat</p>
  <p class="teksten" id="tekst1">een</p>
  <p class="teksten" id="tekst2">mooie</p>
  <p class="teksten" id="tekst3">tekst</p>
  <script src="kleuren.js"></script>
</body>
</html>
var teksten = document.getElementsByTagName("p");

for (var i = 0; i < teksten.length; i++) {
   teksten[i].style.color = "red";
}

Haalt alle <p>'tjes op

{

Dat zijn deze 

demo

Wat gebruik je vaker denken jullie? Class of tag?

HTML & JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>Kleuren</title>
</head>
<body>
  <p class="teksten" id="tekst0">Wat</p>
  <p class="teksten" id="tekst1">een</p>
  <p class="teksten" id="tekst2">mooie</p>
  <p class="teksten" id="tekst3">tekst</p>
  <script src="kleuren.js"></script>
</body>
</html>

tag

class

Wat gebruik je vaker denken jullie? Class of tag?

HTML & JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>Kleuren</title>
</head>
<body>
  <p class="teksten" id="tekst0">Wat</p>
  <p class="teksten" id="tekst1">een</p>
  <p class="teksten" id="tekst2">mooie</p>
  <p class="teksten" id="tekst3">tekst</p>
  <script src="kleuren.js"></script>
</body>
</html>

tag

class

Waarom zou je liever class gebruiken?

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

Memory game eisen

Memory game eisen

Memory "in het echt":

  • Twee spelers
  • Om de beurt twee kaartjes omdraaien
  • Zelfde
    • 2 kaartjes houden
    • Nog een beurt
  • Niet hetzelfde 
    • Beurt voorbij
  • Meeste kaartjes = winnaar

Memory game eisen

 

  • Er zijn "kaartjes" met een voor- en achterkant

Memory op de computer

  • Er zijn "kaartjes" met een voor- en achterkant

Memory game eisen

Memory op de computer

  • Er zijn "kaartjes" met een voor- en achterkant

  • Twee spelers kunnen om de beurt spelen

Memory game eisen

Memory op de computer

  • Er zijn "kaartjes" met een voor- en achterkant

  • Twee spelers kunnen om de beurt spelen

  • Klikken op een kaartje draait ze om

Memory game eisen

Memory op de computer

  • Er zijn "kaartjes" met een voor- en achterkant

  • Twee spelers kunnen om de beurt spelen

  • Klikken op een kaartje draait ze om

  • 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!

 

 

 

 

Module 2 - Les 6

By Felienne

Made with Slides.com

Module 2 - Les 6

Leerdoel Module: JavaScript Lesdoel: Meerdere elementen ophalen uit de DOM.

  • 542

More from Felienne