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

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





Python Klas 4 - Module 2 - Les 3

By Felienne

Made with Slides.com

Python Klas 4 - Module 2 - Les 3

Leerdoel Module: JavaScript Lesdoel: Objecten in JavaScript, herhaling functies

  • 725

More from Felienne