Javascript - Alma college

Raymond Asbreuk
JavaScript
1 / 10
next
Slide 1: Slide
ICTMiddelbare schoolvmboLeerjaar 4

This lesson contains 10 slides, with text slides.

time-iconLesson duration is: 120 min

Items in this lesson

Raymond Asbreuk
JavaScript

Slide 1 - Slide

Leerdoelen
Raymond Asbreuk
Na deze kun je:
  • Uitleggen wat JS is
  • Uitleggen waar JS voor "is"
  • Uitleggen wat variabelen zijn
  • Uitleggen wat functies zijn
  • Eenvoudige logica van JS begrijpen

Slide 2 - Slide

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 3 - Slide

Raymond Asbreuk
Voorbeeld
alert('Hallo Wereld')

Slide 4 - Slide

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 5 - Slide

Raymond Asbreuk
Wat is een functie?
Een functie is een stukje code dat iets voor je doet. Het is alsof je een machine maakt die een taak of meerdere taken uitvoert.
  • Vergelijking:
    Stel je voor dat je een recept hebt voor een pannenkoek. Het
    recept vertelt je precies wat je moet doen en in welke volgorde.
    Elke keer als je pannenkoeken wilt maken, hoef je alleen
    maar het recept te volgen.
  • In code:
    Een functie in JavaScript werkt op dezelfde manier. Je
    "maakt" de functie (de machine) en kunt deze later
    gebruiken door hem "aan te roepen"
    (zoals op de knop drukken).

Slide 6 - Slide

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

Wat gebeurt er?

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

Slide 7 - Slide

Raymond Asbreuk
Opdracht 3

Slide 8 - Slide

Raymond Asbreuk

Slide 9 - Slide

Raymond Asbreuk
Voorbeeld

Slide 10 - Slide