Inspirerend, verbindend en nieuwsgierig
Een leven lang leren
Visit the website
‹Return to search

01 - Javascript - introductie

Javascipt - Introductie
1 / 11
next
Slide 1: Slide
ICTMBOStudiejaar 3,4

This lesson contains 11 slides, with interactive quiz and text slides.

time-iconLesson duration is: 60 min

Items in this lesson

Javascipt - Introductie

Slide 1 - Slide

This item has no instructions

Leerdoelen
Na deze les kun je:
  • De student begrijpt wat JavaScript
  • De student kan benoemen hoe het JavaScript kan integreren in HTML 
  • De student kan Javascript toepassen binnen HTML

Slide 2 - Slide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.
JavaScript: wat is het?
JavaScript is een programmeertaal die:
  • Interactieve elementen op websites creëert
  • De gebruikerservaring verbetert
  • Dynamische en interactieve functionaliteiten toevoegt,  zoals formulieren en games.

Slide 3 - Slide

This item has no instructions

JavaScript: waar is het voor?
JS wordt vooral gebruikt in webomgevingen (HTML/CSS)

Met JS kun je dingen maken zoals: mobiele applicaties,
web applicaties, AR, VR, reserveringssystemen, spellen, animaties, datavisualisatie, en meer

Slide 4 - Slide

This item has no instructions

Interne JavaScript toevoegen
Je kunt ook JavaScript-code rechtstreeks in de <script> tag in de HTML-pagina plaatsen om interne scripts toe te voegen.
<script>
  document.write('JavaScript geschreven.');
</script>

Slide 5 - Slide

This item has no instructions

Opdracht # 1
  1. Kopieer de code
    rechts
  2. Sla het op als:
    index-js-01.html
  3. Open het bestand
    in je browser
  4. Wat gebeurt er?
    Zie je een JS functie?
timer
5:00
  <!DOCTYPE html>
  <html>
      <body>
          <button onclick="hallo()">knop</button>
          <script>
                  alert("Hello World");
          </script>
      </body>
  </html>

Slide 6 - Slide

This item has no instructions

Opdracht # 2
  1. Kopieer de code
    rechts
  2. Sla het op als:
    index-js-02.html
  3. Open het bestand
    in je browser
  4. Wat gebeurt er?
    Waarom?
timer
3:00
  <!DOCTYPE html>
  <html>
      <body>
          <button onclick="hallo()">knop</button>
          <script>
              function hallo() {
                  alert("Hello World");
              }
          </script>
      </body>
  </html>

Slide 7 - Slide

This item has no instructions

Externe JavaScript toevoegen
Met het <script> element en het src attribuut kun je externe Javascript bestand(en) toevoegen aan je HTML-pagina
<script src="mijnScript.js"></script>
   function hallo() {
      alert("Hello World");
   }

Slide 8 - Slide

This item has no instructions

Opdracht

Slide 9 - Slide

This item has no instructions

Samenvatting
  • De student begrijpt wat JavaScript
  • De student kan benoemen hoe het JavaScript kan integreren in HTML
  • De student kan Javascript toepassen binnen HTML

Slide 10 - Slide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.
Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

Slide 11 - Open question

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.