programmeren

in JaVASCRIPT

Jaar 4 - Module 2 - Les 3: Objecten in JavaScript

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

Leren over objecten in JavaScript

vandaag gaan we leren

Leren over objecten in JavaScript

Vorige week hebben we deze

codes gemaakt.

HTML & JavaScript

alert("Hallo klas 4!");
function weg() {
  var knop = document.getElementById("knop1");
  knop.style.visibility = "hidden";
}

<!DOCTYPE html>
<html>
  <head>
    <title>Welkom op deze site!</title>
  </head>
  <body>
    <script src="script.js"></script>
    <input type='submit' id='knop1' value='Knop' onclick='weg()'>
  </body>
</html>

Vorige week hebben we deze

codes gemaakt.

Maar wat gebeurt hier nou precies?

HTML & JavaScript

alert("Hallo klas 4!");
function weg() {
  var knop = document.getElementById("knop1");
  knop.style.visibility = "hidden";
}

<!DOCTYPE html>
<html>
  <head>
    <title>Welkom op deze site!</title>
  </head>
  <body>
    <script src="script.js"></script>
    <input type='submit' id='knop1' value='Knop' onclick='weg()'>
  </body>
</html>

Vorige week hebben we deze

codes gemaakt.

Maar wat gebeurt hier nou precies?

alert("Hallo klas 4!");
function weg() {
  var knop = document.getElementById("knop1");
  knop.style.visibility = "hidden";
}

JavaScript objecten

Vorige week hebben we deze

codes gemaakt.

Maar wat gebeurt hier nou precies?

alert("Hallo klas 4!");
function weg() {
  var knop = document.getElementById("knop1");
  knop.style.visibility = "hidden";
}

JavaScript objecten

Stukjes JavaScript zijn "objecten". Objecten in code zijn stukjes data, doe ook eigenschappen kunnen hebben.

Hier is bijvoorbeeld style een eigenschap van knop.

Vorige week hebben we deze

codes gemaakt.

Maar wat gebeurt hier nou precies?

alert("Hallo klas 4!");
function weg() {
  var knop = document.getElementById("knop1");
  knop.style.visibility = "hidden";
}

JavaScript objecten

Stukjes JavaScript zijn "objecten". Objecten in code zijn stukjes data, doe ook eigenschappen kunnen hebben.

Objecten kunnen ook functies hebben zoals hier getElementById().

Vorige week hebben we deze

codes gemaakt.

Maar wat gebeurt hier nou precies?

alert("Hallo klas 4!");
function weg() {
  var knop = document.getElementById("knop1");
  knop.style.visibility = "hidden";
}

JavaScript objecten

Stukjes JavaScript zijn "objecten". Objecten in code zijn stukjes data, doe ook eigenschappen kunnen hebben.

Objecten kunnen ook functies hebben zoals hier getElementById().

Functies op een object noemen we ook wel methodes.

JavaScript objecten

Stel je voor dat auto een object is. Welke eigenschappen kan deze hebben?

Schrijf er minsten een op je wisbordje!

JavaScript objecten

Stel je voor dat auto een object is. Welke eigenschappen kan deze hebben?

Schrijf er minsten een op je wisbordje!

JavaScript objecten

Stel je voor dat auto een object is. Welke methodes kan deze hebben?

Schrijf er minsten een op je wisbordje!

JavaScript objecten

Stel je voor dat auto een object is. Welke methodes kan deze hebben?

Schrijf er minsten een op je wisbordje!

Op dezelfde manier werken

objecten in JavaScript.

alert("Hallo klas 4!");
function weg() {
  var knop = document.getElementById("knop1");
  knop.style.visibility = "hidden";
}

JavaScript objecten

Een knop kan een style hebben, met een kleur, grootte, richting.

En een knop kan methodes hebben zoals onClick() of onRelease().

demo

opdrachten

Volg deze les: https://bit.ly/jsles-3
Doe dan deze opdrachten: https://bit.ly/jsopd-3

opdrachten

Volg deze les: https://bit.ly/jsles-3

opdrachten

Volg deze les: https://bit.ly/jsles-3