Les 1 Intro applicatie ontwikkeling

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Hoe sta je erin vandaag?

Applicatie ontwikkeling

Function, 

DOM,

 Event listener, 

Variable, 

Script,

 Module

Array, 
Object,
 LocalStorage, 
Fetch,
 If/else,
 Loop, 
API

Doel, aan het einde van de les

• Begrijpt de student het verschil tussen script en applicatie.
• Herkent de student de opbouw van een gestructureerd JavaScript-project.
• Kan de student eenvoudige modules gebruiken met import en export.

Inhoud

• Van script naar applicatie
• Modules
• Oefening
• Nog een oefening

Wat is een applicatie?

• Een applicatie bestaat uit meerdere samenwerkende modules.
• De code is logisch gestructureerd en gescheiden op basis van functionaliteit (bijv. interface, logica, opslag).

Es6 module

📦 Modules zijn zoals aparte gereedschapskisten

👉 Elk JavaScript-bestand kan een aparte "kist" worden

👉 Je kiest zelf welke tools (functies/variabelen) je deelt

Term Uitleg

export Geeft aan welke functies of variabelen beschikbaar worden gesteld.

import Haalt functies of variabelen binnen uit een ander bestand.

type="module" Nodig in <script>-tag om modules te kunnen gebruiken in HTML.

Belangrijk om te weten:

⚠️ Werkt niet als je dubbelklikt op een HTML-bestand

Let op het pad bij import – gebruik altijd een relatieve URL (./module.js).

✅ Wel werken: Open via Live Server (VS Code) of een echte webserver

Waarom fijn?

✔ Houdt code netjes georganiseerd

✔ Voorkomt naamconflicten

✔ Maakt samenwerken makkelijker

To-do App

Wat: Maak een applicatie waarin de gebruiker een kleur invoert en een vierkant die dan de kleur aanneemt.

Hoe: Splits je project in 2 bestanden:

main.js → event handler en koppeling met de DOM

colorChanger.js → functie die een div van kleur verandert

Hulp: Medestudent, Google, Docent.

Tijd: 15min

Klaar: Meld docent

Schrijf 3 dingen die je vandaag heb geleerd

Schrijf 2 dingen op waar je nog meer over wilt weten

Schrijf 1 ding op wat je nog niet helemaal begrijpt