programmeren

in JaVASCRIPT

Jaar 4 - Module 2 - Les 8: JavaScript Afsluiting

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

Volgende week gaan we...

Volgende week gaan we...

 

  • Een JavaScript toets maken

Volgende week gaan we...

Volgende week gaan we...

 

  • Een JavaScript toets maken

    • Telt mee voor je cijfer (8% - havo 5% - VWO)

vandaag gaan we ...

 

  • Een legaal spiekbriefje maken!

  • Alles dat op 1 kantje past, mag je opschrijven

  • En volgende week gebruiken bij de toets!

vandaag gaan we ...

 

  • Een legaal spiekbriefje maken!

  • Alles dat op 1 kantje past, mag je opschrijven

  • En volgende week gebruiken bij de toets!

  • Je mag vandaag alle bronnen gebruiken:
    • De slides
    • Mij & elkaar
    • Google

vandaag gaan we ...

 

  • Een legaal spiekbriefje maken!

  • Alles dat op 1 kantje past, mag je opschrijven

  • En volgende week gebruiken bij de toets!

  • Je mag vandaag alle bronnen gebruiken:
    • De slides
    • Mij & elkaar
    • Google
  • Tips:
    • maak een plan voor de indeling
    • oefen eerst!
       

 

Maar eerst nog:

  • JavaScriptkennis herhalen

vandaag gaan we ...

 

Maar eerst nog:

  • JavaScriptkennis herhalen

  • Proefwerkvragen oefenen

vandaag gaan we ...

TOETSmateriaal

 

  • Printen -> console.log()

  • Loops

  • Variabelen

  • Lijsten

  • Functie

Wat weet je nog over de if in JavaScript?

JAVASCRIPT - IF

Schrijf minstens 1 ding op op je bordje!

Wat weet je nog over de if in JavaScript?

JAVASCRIPT - IF

let aantal = prompt("Hoeveel ijs?");

if (aantal <= 0){
  alert("Je wilt dus geen ijs");
} else if (aantal == 1){
  alert("Eén bolletje");
} else {  // 2 of hoger
  alert(aantal + " bolletjes");
}

Schrijf minstens 1 ding op op je bordje!

Wat weet je nog over de if in JavaScript?

JAVASCRIPT - IF

Schrijf minstens 1 ding op op je bordje!

let aantal = prompt("Hoeveel ijs?");

if (aantal <= 0){
  alert("Je wilt dus geen ijs");
} else if (aantal >= 1 && aantal <= 3){
  alert("Eén, twee of drie bolletjes");
} else {  // 4 of hoger
  alert(aantal + " bolletjes");
}

Wat weet je nog over de if in JavaScript?

JAVASCRIPT - IF

Schrijf minstens 1 ding op op je bordje!

let aantal = prompt("Hoeveel ijs?");

if (aantal <= 0){
  alert("Je wilt dus geen ijs");
} else if (aantal >= 1 && aantal <= 3){
  alert("Eén, twee of drie bolletjes");
} else {  // 4 of hoger
  alert(aantal + " bolletjes");
}

niet =>

>= (zeg groter gelijk)

      

Wat weet je nog over de if in JavaScript?

JAVASCRIPT - IF

Schrijf minstens 1 ding op op je bordje!

let aantal = prompt("Hoeveel ijs?");

if (aantal <= 0){
  alert("Je wilt dus geen ijs");
} else if (aantal >= 1 && aantal <= 3){
  alert("Eén, twee of drie bolletjes");
} else {  // 4 of hoger
  alert(aantal + " bolletjes");
}

Geen and maar &&

Wat weet je nog over functies in JavaScript?

JAVASCRIPT - Functies

JAVASCRIPT

Schrijf minstens 1 ding op op je bordje!

Wat weet je nog over functies in JavaScript?

JAVASCRIPT - Functies


function weg() {
  var tekst = document.getElementById("tekst");
  tekst.style.visibility = "hidden";
}

Schrijf minstens 1 ding op op je bordje!

Wat weet je nog over loops/lussen in JavaScript?

JAVASCRIPT - LOOPS

Schrijf minstens 1 ding op op je bordje!

Wat weet je nog over loops/lussen in JavaScript?

JAVASCRIPT - LOOPS

Schrijf minstens 1 ding op op je bordje!

for (let i = 0; i < 5; i++) {
  tekst.innerHTML += "Berichtje " + i + "<br>";
}

Wat weet je nog over HTML elementen ophalen in JavaScript?

JAVASCRIPT - ELEMENTEN

Schrijf minstens 1 ding op op je bordje!

Wat weet je nog over HTML elementen ophalen in JavaScript?

JAVASCRIPT - ELEMENTEN

Schrijf minstens 1 ding op op je bordje!

var knop = document.getElementById("knop1");
knop.style.visibility = "hidden";

Wat weet je nog over HTML elementen ophalen in JavaScript?

JAVASCRIPT - ELEMENTEN

Schrijf minstens 1 ding op op je bordje!

var knop = document.getElementById("knop1");
knop.style.visibility = "hidden";

var teksten = document.getElementsByTagName("p");

for (var i = 0; i < teksten.length; i++) {
   teksten[i].style.color = "red";
}
<p class="soort1" id="tekst0">Wat</p>
<p class="soort1" id="tekst1">een</p>
<p class="soort2" id="tekst2">mooie</p>
<p class="soort2" id="tekst3">tekst</p>

Wat weet je nog over HTML elementen ophalen in JavaScript?

JAVASCRIPT - ELEMENTEN

Schrijf minstens 1 ding op op je bordje!

var knop = document.getElementById("knop1");
knop.style.visibility = "hidden";

var teksten = document.getElementsByTagName("p");

for (var i = 0; i < teksten.length; i++) {
   teksten[i].style.color = "red";
}
<p class="soort1" id="tekst0">Wat</p>
<p class="soort1" id="tekst1">een</p>
<p class="soort2" id="tekst2">mooie</p>
<p class="soort2" id="tekst3">tekst</p>

Wat weet je nog over HTML elementen ophalen in JavaScript?

JAVASCRIPT - ELEMENTEN

Schrijf minstens 1 ding op op je bordje!

var knop = document.getElementById("knop1");
knop.style.visibility = "hidden";

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

for (var i = 0; i < teksten.length; i++) {
   teksten[i].style.color = "red";
}
<p class="soort1" id="tekst0">Wat</p>
<p class="soort1" id="tekst1">een</p>
<p class="soort2" id="tekst2">mooie</p>
<p class="soort2" id="tekst3">tekst</p>

Wat weet je nog over HTML elementen ophalen in JavaScript?

JAVASCRIPT - ELEMENTEN

Schrijf minstens 1 ding op op je bordje!

var knop = document.getElementById("knop1");
knop.style.visibility = "hidden";

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

for (var i = 0; i < teksten.length; i++) {
   teksten[i].style.color = "red";
}
<p class="soort1" id="tekst0">Wat</p>
<p class="soort1" id="tekst1">een</p>
<p class="soort2" id="tekst2">mooie</p>
<p class="soort2" id="tekst3">tekst</p>

Wat weet je nog over events in JavaScript?

JAVASCRIPT - Events

Schrijf minstens 1 ding op op je bordje!

Wat weet je nog over events in JavaScript?

JAVASCRIPT - Events

Schrijf minstens 1 ding op op je bordje!

let par = document.getElementById("tekst");
let knop = document.getElementById("knop1");
knop.addEventListener("click", groet);

function groet(){
  par.innerHTML = "Je hebt geklikt op de knop!";
}

oefenvragen

oefenvragen

Goed of fout?


function weg {
  var tekst = document.getElement("tekst");
  tekst.style.visibility = "hidden";
}

oefenvragen

let aantal = prompt("Hoeveel ijs?");

if (aantal >= 0){
  alert("Je wilt dus geen ijs");
} else if {
  alert("Eén, twee of drie bolletjes");
}

Wat is de fout?

oefenvragen

Wat print deze code?

for (let i = 1; i < 10; i++) {
  console.log(i*10);
}

oefenvragen

Wat doet deze code?

var index = 0;

let paragraaf1 = document.getElementById("par1");
paragraaf1.addEventListener("mouseover", veranderKleur);

let kleuren = ["black", "white"];

function veranderKleur() { 
    paragraaf1.style.background = kleuren[index];
    if (index == 0) {
      index = 1;
    }
    else {
      index = 0;
    }
    
}

oefenvragen

let aantal = prompt("Hoeveel ijs?");

if (aantal >= 0){
  alert("Je wilt dus geen ijs");
} else {
  alert("Eén, twee of drie bolletjes");
}

De gebruiker voert 1 in, wat zegt de alert?

Made with Slides.com