Inspirerend, verbindend en nieuwsgierig
Een leven lang leren
Bezoek de website
‹Terug naar zoeken

01 - Javascript - introductie

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

In deze les zitten 11 slides, met interactieve quiz en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

Javascipt - Introductie

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

Opdracht

Slide 9 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

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 vraag

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.