Javascript - Alma college

Raymond Asbreuk
JavaScript
1 / 21
volgende
Slide 1: Tekstslide
ICTMiddelbare schoolvmboLeerjaar 4

In deze les zitten 21 slides, met tekstslides.

time-iconLesduur is: 120 min

Onderdelen in deze les

Raymond Asbreuk
JavaScript

Slide 1 - Tekstslide

Raymond Asbreuk
Verbinding Eduroam
Starten Visual studio code

Slide 2 - Tekstslide

Planning
Raymond Asbreuk
Wat gaan we doen:
  • Simpele voorbeelden bekijken van JavaScript
  • Simpel voorbeeld van JavaScript maken
  • Wat is een variabel
  • Kleine opdracht
  • Logica en beslissingen
  • Wat is het document en wat kan je ermee

Slide 3 - Tekstslide

Raymond Asbreuk
Javascript: wat is het?
JavaScript is een taal waarmee je websites "levend" maakt. Het zorgt ervoor dat dingen op een website bewegen, veranderen of reageren als je bijvoorbeeld 
op een knop drukt. Zonder JavaScript zijn websites 
vaak simpel en statisch, maar met JavaScript kun je 
ze interactief en leuk maken.

Slide 4 - Tekstslide

Raymond Asbreuk
Voorbeeld
alert('Hallo Wereld')

Slide 5 - Tekstslide

Raymond Asbreuk
Hallo wereld
  <!DOCTYPE html>
  <html>
      <body>
          <button onclick='alert('Hello World')'>
              knop
          </button>
     
</body>
  </html>
  1. Neem de code rechts over
  2. Sla het op als:
    index-js-01.html
  3. Open het bestand
    in je browser

Wat gebeurt er?
Zie je een JS functie?

Kan je twee buttons maken die 
elk een andere zin tonen?

Slide 6 - Tekstslide

Raymond Asbreuk
Wat zijn variabelen

Variabelen zijn namen die we gebruiken om informatie in een programma te bewaren en 
te veranderen.

Maar wat betekent dat nu?

Slide 7 - Tekstslide

Raymond Asbreuk
Variabel

Naam

Waarde
Lade

Label

Voorwerp
Wat zijn variabelen

Slide 8 - Tekstslide

Raymond Asbreuk
Hallo wereld
  <!DOCTYPE html>
  <html>
      <body>
          <button 
              onclick='let naam='piet'; alert(naam);'>
              knop
          </button>
     
</body>
  </html>
  1. Verander je bestaande code naar wat hier rechts staat
  2. Sla het opnieuw op
  3. Open het bestand in je browser

Wat gebeurt er?
Kan je ook een andere naam tonen?
Kan je ook 2 variabelen gebruiken


Slide 9 - Tekstslide

Raymond Asbreuk
Wat is een functie?
Wat is een functie?
Een functie in code is als een handig hulpmiddel dat iets voor je doet. Denk aan een keukenmachine: je stopt er ingrediënten in, drukt op de knop, en hij maakt iets voor je klaar.

Vergelijking:
Stel, je wilt een pannenkoek maken. Je hebt een recept dat precies vertelt wat je moet doen. Elke keer dat je een pannenkoek wilt maken, volg je gewoon dat recept.

In code:
Een functie werkt net zo. Je schrijft een stukje code dat een taak uitvoert (zoals een recept), en daarna kun je die taak makkelijk herhalen door de functie op te roepen (net zoals op een knop drukken).

Simpel voorbeeld:
Als je een functie maakt om pannenkoeken te bakken, hoef je daarna alleen maar te zeggen: "Bak een pannenkoek!", en de code weet wat hij moet doen.



Slide 10 - Tekstslide

Raymond Asbreuk
Hallo wereld
  <!DOCTYPE html>
  <html>
      <body>
          <button onclick="hallo()">knop</button>
          <script>
             function hallo() {
                 let naam = 'Piet';
                 alert(naam);
             }
          </script>
      </body>
  </html>
  1. Verander je bestaande code naar wat hier rechts staat
  2. Sla het op.
  3. Open het bestand
    in je browser

Wat gebeurt er?

Kan je twee buttons maken die 
elk een andere functie aanroepen?

Slide 11 - Tekstslide

Raymond Asbreuk
Opdracht
1) Maak een klein programmaatje wat om een naam vraagt  (functie: prompt) en deze toont aan de gebruiker via een alert functie.

2) Maak een programma dat twee getallen
vraagt en die ze opgeteld laat zien.


Slide 12 - Tekstslide

Raymond Asbreuk
Logica en beslissingen
Een if-else statement is een manier waarop een computer beslissingen kan nemen op basis van een voorwaarde. 

Het werkt als een vraag: "Als dit waar is, doe dan dit, anders doe dat."

Voorbeeld:
Als het kouder is dan 18 graden, dan doe een jas aan, anders heb je geen jas nodig.

Slide 13 - Tekstslide

Raymond Asbreuk
Logica en beslissingen

 let temperatuur = 15; // De temperatuur is 15 graden

 if (temperatuur < 18) {
     console.log("Doe een jas aan!"); 
     // Als de temperatuur onder 18 is, laat dit zien
 } else {
     console.log("Je hebt geen jas nodig!"); // Anders laat dit zien
 }

Slide 14 - Tekstslide

Raymond Asbreuk
Opdracht

Maak een quiz met drie vragen. 
Gebruik prompt() om de vragen te stellen
Gebruik alert() om feedback te geven.

Slide 15 - Tekstslide

Raymond Asbreuk
Document
Het document is een manier waarop JavaScript de webpagina begrijpt en ermee kan werken. Je kunt het zien als een plattegrond van de hele webpagina. Alles wat je op de pagina ziet (tekst, plaatjes, knoppen) staat in dat document.

Met JavaScript kun je tegen het document zeggen:
  • "Verander de tekst daar."
  • "Maak die knop rood."
  • "Voeg een nieuw plaatje toe."


Slide 16 - Tekstslide

Raymond Asbreuk
Document
Vergelijking:
Stel je voor dat een webpagina een huis is. Het document is de bouwtekening van dat huis. Als je iets aan het huis wilt veranderen, gebruik je de bouwtekening om te zeggen:
  • "Verf die muur blauw."
  • "Zet een raam daar."

In JavaScript gebruik je het document om de webpagina "te bouwen" of aan te passen.

Slide 17 - Tekstslide

Raymond Asbreuk
Document

Laten zien hoe het document eruit ziet

Een voorbeeld geven van aanpassen document 

Slide 18 - Tekstslide

Raymond Asbreuk
Opdracht
Opdracht: Breid je contactformulier uit met e-mailcontrole
Controleer met JavaScript of het ingevulde e-mailadres:
  • Een "@" bevat.
  • Een "." bevat.
Wat moet je doen?
Toon een foutmelding als het e-mailadres ongeldig is, bijv. "Ongeldig e-mailadres, controleer je invoer."
Toon een bevestiging als het e-mailadres geldig is, bijv. "Bedankt voor je invoer!"
Bonus:
Controleer of het veld niet leeg is.
Laat de foutmelding verdwijnen zodra de invoer correct is.

Slide 19 - Tekstslide

Raymond Asbreuk
Wat is behandeld

  • Simpele voorbeelden van JavaScript
  • Hallo wereld 
  • Variabele
  • Kleine opdracht
  • Logica en beslissingen
  • Document

Slide 20 - Tekstslide

Raymond Asbreuk
https://forms.office.com/e/Ycz6iaQZUG

Slide 21 - Tekstslide