Blok 5 - Database en JS (DOM) Prompt Engineering 2 1, Introductie We hebben in prompt engineering 1 geleerd waaraan een goede prompt moest voldoen. Dit zijn de basis kenmerken van een goede prompt. De eerste drie kenmerken moet je prompt altijd aan voldoen! Context - een goede prompt heeft voldoende contexrt. Details / Specifiek - een goed prompt heeft voldoende details en is zo specifiek mogelijk. Duidelijkheid - een goedeprompt is duidelijk. Doelgericht - een goede prompt is doelgericht. Vorm - in een goede prompt kan je de output in een bepalade vorm vragen. Toon -door in de prompt de toon op te nemen, bepaal je de vorm van het antwoord. In deze module gaan we 6 advanched prompt-technieken leren. Deze technieken heb je niet altijd nodig maar het is handig om deze technieken te kennen. Bovendien zijn de meeste techniekken ook toepasbaar in als ' problem solving ' technieken. Isolate the problem Focus alleen op het onderdeel dat opgelost moet worden. Laat overbodige context of code weg, zodat de AI zich op het juiste richt. Provide lists in bullet points Structuur helpt de AI om overzichtelijke en duidelijke antwoorden te geven. Provide the order if you ask for multiple tasks Geef een logische volgorde bij samengestelde opdrachten. Geef voorbeelden (few-shot prompting) Laat zien wat je bedoelt met een input/output-voorbeeld. Stel voorwaarden of beperkingen Geef grenzen aan zoals "gebruik max. 100 woorden" of "geen disclaimers". Werk in stappen (chain-of-thought prompting) Vraag de AI om stap voor stap te redeneren of eerst een plan te maken. 1. Isolate the problem 💡 Uitleg Richt je prompt op het exacte probleem. In plaats van een hele codepagina te geven, geef alleen het stuk code of de situatie waar het om draait. Hoe minder ruis, hoe beter de AI kan helpen. Je ziet dus dat je voor een goede prompt de code goed moet kunnen lezen. ✍️ Opdracht Je hebt een PHP-pagina met een formulier dat soms geen gegevens doorstuurt. 👉 Maak een prompt voor ChatGPT waarin je alleen het relevante deel van de code opneemt en waarin je de AI vraagt om te helpen bij het vinden van de fout. Houd nog steeds rekening met de context, details en duidelijkheid . In dit voorbeeld zou je makkelijk de hele code kunnen verturen, maar in de echte wereld heb je veel meer code en daarom is dit een goede oefening in het isoleren van code die relevant is. Tip: je kan ook andersom redeneren en alle code waarvan je zeker weet die goed is of niets met het formulier te maken heeft weghaald. Contactpagina

Neem contact met ons op










📤 Inleveren De prompt die het probleem uiteindelijk vond en waain alleen de relevante code staat. De prompt voldoet tevens minimaal aan de basis kenmerken van een prompt:  context, details en duidelijkheid . 2, Provide lists in bullet points 💡 Uitleg Als je meerdere dingen van een AI vraagt, is het belangrijk om structuur aan te brengen in je prompt. Door bullet points of genummerde lijsten te gebruiken: Maak je je prompt overzichtelijk. Zorg je ervoor dat de AI geen onderdelen vergeet. Help je jezelf om duidelijk te verwoorden wat je wilt. Bullet points zijn dus niet alleen netjes — ze zijn slim. ✍️ Opdracht Hieronder zie je een afbeelding van een eenvoudige webpagina met meerdere onderdelen. Het plaatje kan je hirr downloaden: Berglandschap.png . Bestudeer de afbeelding goed. Wat zie je allemaal op de pagina? Bedenk wat je aan de AI zou vragen om precies deze pagina te laten maken. Noteer minstens 4 onderdelen van de pagina als bullet points in je prompt. 📤 Inleveren Prompt Resultaat in code Schermafdruk van resultaat 3. Provide the order if you ask for multiple tasks 💡 Uitleg Als je aan de AI vraagt om meerdere dingen tegelijk te doen , dan is het belangrijk dat je duidelijk maakt in welke volgorde dat moet gebeuren. AI volgt jouw instructies letterlijk — dus als de volgorde onduidelijk is, krijg je soms een rommelig of onvolledig resultaat. Door een logische nummering of expliciete volgorde te geven, help je de AI om stapsgewijs te werken. Voorbeeld (vaag): Maak een invoerpagina met HTML en verwerk de gegevens met PHP. Voorbeeld (duidelijker): Maak eerst een HTML-pagina met een formulier waarin wordt gevraagd naar de tijd en de klantnaam Voeg daarna de PHP-code toe die de ingevulde gegevens toont. ✍️ Opdracht Je wilt de AI vragen om je te helpen met het maken van een eenvoudige contactpagina. Die moet bestaan uit: Een HTML-formulier waarin je je naam en e-mailadres kunt invullen Een PHP-script dat de gegevens verwerkt en netjes op het scherm toont Schrijf een prompt waarin je deze twee onderdelen vraagt in de juiste volgorde . Gebruik een genummerde lijst of maak duidelijk met woorden wat “eerst” en “daarna” moet gebeuren. Houd rekening met de context, details en duidelijkheid . 📤 Inleveren Je volledige prompt De gegenereerde HTML + PHP code Een screenshot van het resultaat in de browser 4. Geef voorbeelden (few-shot prompting) 💡 Uitleg Als je wilt dat de AI op een specifieke manier code genereert of uitlegt , dan helpt het enorm als je eerst een paar voorbeelden geeft. Dit heet few-shot prompting . Je laat zien wat jij bedoelt — de AI herkent het patroon en volgt het. Dit is heel handig bij het ontwerpen van knoppen, formulieren of herhalende structuren. Voorbeeld prompt Deze knop ziet er professioneel uit: rood met witte tekst, afgeronde hoeken en een vloeiend hover-effect dat de kleur donkerder maakt wanneer je erover beweegt. Klikt de gebruiker op de knop, dan wordt de JS code handleDelete() aangeroepen. Maak op dezelfde manier een blauwe knop 'toevoegen'. ✍️ Opdracht Je wilt een aantal drop down menu's maken. Hier is een voorbeeld. Maak een multi-shot prompt waarbij je dit menu als voorbeeld gebruikt en waarbij je het volgende menu maakt: Tip: denk goed na over wat je de AI precies als voorbeeld geeft, alleen de HTML of HTML met CSS? Denk hierbij ook aan  Isolate the problem . 📤 Inleveren Je volledige prompt inclusief voorbeeld(en) De gegenereerde knop + uitleg van de AI Een screenshot van de knop in de browser 5. Stel voorwaarden of beperkingen 💡 Uitleg Soms wil je meer controle over hoe de AI iets oplevert. Je kunt dan in je prompt voorwaarden of beperkingen opnemen. Bijvoorbeeld: Beperk het aantal woorden of regels code Vermijd bepaalde technieken (zoals frameworks) Vraag om iets op een specifieke manier te doen (bijv. alleen in-line CSS) Door deze randvoorwaarden op te nemen, stuur je de AI veel gerichter aan. ✍️ Opdracht Je wilt een eenvoudige HTML-formulierpagina laten genereren, maar je stelt een aantal duidelijke voorwaarden. Bedenk minstens 3 voorwaarden waaraan de code moet voldoen. Bijvoorbeeld: Geen externe CSS-bestanden of frameworks zoals Bootstrap Maximaal 30 regels HTML Formulier moet naam en e-mailadres bevatten, met eenvoudige styling Schrijf een prompt waarin je deze voorwaarden duidelijk formuleert. Leg de context uit: “Ik wil een eenvoudig formulier…” Som je voorwaarden op in een bulletlijst of genummerde lijst Sluit duidelijk af met je verzoek: “Geef alleen de HTML-code” Zorg dat je prompt voldoet aan de context, details en duidelijkheid . 📤 Inleveren Je prompt (inclusief de voorwaarden) De gegenereerde HTML-code Een screenshot van het formulier 6. Chain-of-thought prompting 1 💡 Uitleg Bij opdrachten met meerdere onderdelen is het slim om de AI eerst te laten nadenken en plannen . Dat noem je chain-of-thought prompting . Je vraagt de AI dus om niet meteen te bouwen, maar eerst te analyseren: Wat moet er gebeuren, welke stappen moet ik volgen? In welke volgorde? Wat zijn de componenten en technieken die ik moet gebruiken? Daarna kan de AI gestructureerd de code aanleveren. Zo voorkom je onvolledige of chaotische antwoorden. 🎬Voorbeeld Prompt Ik wil een formulier dat een naam opslaat. Leg eerst uit welke stappen ik daarvoor nodig heb. Geef dan de HTML-code. Geef daarna de PHP-code. Leg elke stap kort uit. Verwachte AI-reactie Je hebt een HTML-formulier nodig om de naam in te voeren. Je hebt een PHP-script nodig dat de naam opvangt en verwerkt. Je moet het formulier met method="post" versturen. Daarna geef ik de HTML en PHP code apart, met uitleg. Als je een stap niet snapt, of het niet eens bent, vraag dan verheldering. Vraag uitleg, bijvoorbeeld: Prompt Wat gebeuert er in stap 3 en waarom moet ik ene post gebruiken, zijn er alternatieven? Op deze manier leer je een probleem in stappen opdelen en daarna de stappen één voor één op te lossen. Nu lijkt dat wellicht overbodig, maar bij grotere projecten is deze methode noodzakelijk. ✍️ Opdracht Je wil een AI vragen om een simpele “Contact opnemen”-pagina te maken met de volgende onderdelen: Een HTML-formulier met velden voor naam, e-mail en bericht Een mooie layout met CSS (geen framework) Een PHP-bestand dat het formulier verwerkt en de data netjes toont De gegevens mogen niet verstuurd worden zonder geldige invoer Maar: je wil niet meteen de code , je wil dat de AI eerst in stappen uitlegt hoe je dit moet aanpakken . Schrijf een prompt waarin je aan de AI vraagt om: Eerst te analyseren wat deze opdracht inhoudt Daarna een overzicht in stappen te geven van wat er allemaal moet gebeuren (HTML-structuur, input validatie, PHP-verwerking, opmaak) Pas daarna per stap de juiste code te geven, met uitleg Gebruik termen als: “Geef eerst een analyse van de opdracht” “Schrijf daarna de stappen uit in logische volgorde” “Geef dan pas de bijbehorende code, met uitleg per stap” Voeg in je prompt beperkingen of voorkeuren toe, zoals: “Gebruik geen externe CSS-frameworks” “Gebruik eenvoudige PHP, geen database” “Geef geen code voordat alle stappen duidelijk zijn” Zorg dat je prompt voldoet aan de kenmerken: context, details, duidelijkheid, volgorde 📤 Inleveren Je volledige prompt(en) Het AI-antwoord (mag opgeknipt zijn in stappen) De uiteindelijke werkende HTML- en PHP-code Screenshot van de werkende pagina 7. Chain-of-thought prompting 2 In de vorige opdracht heb je een formulier laten maken. Wat voor method heb je gebruikt in het formulier? Vraag AI om uit te leggen welke methoden er zijn en wat de voor en nadelen zijn van bedien methoden? 📤 Inleveren Je volledige prompt. In een txt bestand: Jouw eingen aanbeveling: wat zou je het beste hebben kunnen gebruiken bij de vorige opdracht. Leg uit waarom! JS 2 - (DOM1) 1 Introductievideo 🎯 Leerdoelen Je weet wat de DOM is. Je weet dat je met JavaScript het DOM kan lezen en kan aanpassen. 💡 Uitleg Bekijk de volgende video https://www.roc.ovh/link/902#bkmrk-6-formulieren-in-html Code Gebruik dit als start-code. Simple Page

Embrace the Simplicity

Sometimes, all you need is a quiet page, a clear message, and a bit of whitespace. Let your thoughts breathe and focus on what truly matters.

🛠️ Opdracht Bekijk de video daarin worden dingen voorgendaan, die jij ook moet toepassen. Neem de start-code over in het bestand dom1.html en  Op regel 18 plaats code waarmee je de backgroundColor van de body grijs (grey) maakt. Plaats vervolgens JavaScript code om tekst van de header met id "header" aan te passen naar: "Hallo slimme student". In de video wordt dit beiden voorgedaan! Je ziet aan het eind dus: 📤 Inleveren De aangepaste code ( dom1.html bestand). 2 Elementen ophalen en aanpassen 🎯 Leerdoelen Je weet wat de DOM is. Je kunt HTML-elementen selecteren met JavaScript. Je kunt de inhoud en stijl van elementen aanpassen via JavaScript. 💡 Uitleg De DOM (Document Object Model) is de structuur van je HTML-document zoals de browser die begrijpt. Met JavaScript kun je deze structuur lezen en aanpassen. Voorbeeld – een paragraaf veranderen:

Oude tekst

🛠️ Opdracht – Tekst aanpassen Maak een nieuw bestand aan met de naam dom1.html . Begin met de start-code (hieronder) Als je op de knop klikt, moet de tekst in de paragraaf veranderen naar iets anders (bijv. “Hallo wereld!”). Start code Voorbeeld

Dit is de originele tekst.

🧠 Reflectie Wat is de DOM in eigen woorden? Wat doet getElementById precies? Waarom zou je de stijl van een element met JavaScript aanpassen en niet met CSS? 📤 Inleveren Lever je bestand dom2.html in. Beantwoord de reflectievragen in een .txt of .pdf bestand en lever deze mee in. 3 Meerdere elementen aanpakken 🎯 Leerdoelen Je kunt meerdere elementen selecteren met querySelectorAll . Je kunt met forEach een actie uitvoeren op elk element. Je kunt een class toevoegen of verwijderen met classList . 💡 Uitleg Als je meerdere elementen tegelijk wilt aanpakken (zoals alle

-elementen of alle knoppen), gebruik je querySelectorAll . Dit geeft je een lijst (een zogenaamde “NodeList”) van alle elementen die matchen. Met forEach kun je vervolgens over deze lijst heen lopen en elk element iets laten doen:

Item 1

Item 2

Item 3

Je kunt ook classes toevoegen of weghalen met classList : p.classList.add("actief"); p.classList.remove("verborgen"); p.classList.toggle("geselecteerd"); 🛠️ Opdracht – items markeren Maak een bestand dom3.html . Maak een lijst van minimaal 5

-elementen met een class item . Maak een knop met de tekst “Markeer alles”. Wanneer je op de knop klikt, moeten alle

elementen de class geselecteerd  krijgen. Als je weer op de knop drukt, dan moet de

weer terug veranderen (tip: gebuik toggle !). Gebruik de voorbeeld code en pas die zelf aan. Voorbeeld (gebruik zelf andere items) 🧠 Reflectie Wat doet querySelectorAll(".item") precies? Wat is het verschil tussen getElementById en querySelectorAll ? Waarom gebruik je forEach bij een NodeList? Wat doet p.classList.toggle("geselecteerd"); ? 📤 Inleveren Lever het bestand dom3.html in. Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in. 4 Interactie met knoppen en events 🎯 Leerdoelen Je begrijpt wat een event is in JavaScript. Je kunt reageren op een klik of muisactie met addEventListener . Je kunt een actie koppelen aan meerdere elementen. 💡 Uitleg Een event is iets wat gebeurt in de browser: een klik, het bewegen van de muis, een toets indrukken… Met addEventListener kun je zeggen: “Als dit gebeurt, doe dan dat.” Dit doet hetzelde als: Waarom zou je eventlisteners gebruiken? Denk eerst zelf na en klik dan open! ➕ Voordelen: Scheidt structuur (HTML) van gedrag (JS) → netter. Je kunt meerdere functies aan één event koppelen. Flexibeler: makkelijk dynamisch events toevoegen of verwijderen. Werkt ook bij elementen die pas later op de pagina verschijnen (bijv. via JavaScript geladen). ➖ Nadelen: Iets meer code nodig. Niet altijd direct zichtbaar in de HTML wat er gebeurt (iets minder beginner-vriendelijk). Andere events Ook andere events zijn mogelijk, zoals mouseover , mouseout , keydown enzovoort. Je kunt ook meerdere elementen selecteren en daar een event aan koppelen: document.querySelectorAll(".kleurvak").forEach(function(el) { el.addEventListener("mouseover", function() { el.style.backgroundColor = "yellow"; }); }); Wat doet dit? Denk eerst na en controleer dan door hier te klikken. Elk vak met de class " kleurvak " krijgt een gele achtergrond  kleur als je er met de muis overheen gaat. 🛠️ Opdracht – Events in actie Maak een nieuw HTML-bestand dom4.html . Voeg 5 divjes toe met de class kleurvak , elk met een vaste afmeting en een andere begin-kleur. Als je met de muis over een vakje gaat, verandert de achtergrondkleur in geel. Als je erop klikt, moet de tekst in het vakje veranderen naar “Geklikt!”. Gebruik zowel mouseover als click events. Gebruik dit als basis voor de CSS: Resultaat https://youtu.be/deDyTevLTgk 🧠 Reflectie Wat is een event in je eigen woorden? Wat doet addEventListener precies? Wat is het verschil tussen mouseover en click ? 📤 Inleveren Lever je bestand dom4.html in. Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in. 5 Elementen toevoegen met JavaScript 🎯 Leerdoelen Je kunt een nieuw HTML-element aanmaken met createElement . Je kunt dat element toevoegen aan de DOM met appendChild . Je kunt invoer van de gebruiker gebruiken om dynamisch iets te maken. 💡 Uitleg Je kunt nieuwe HTML-elementen maken en ze toevoegen aan je pagina met JavaScript. Dit is handig als je bijvoorbeeld automatisch lijstjes wilt uitbreiden of reacties wilt tonen. const nieuwElement = document.createElement("p"); nieuwElement.textContent = "Hallo, ik ben nieuw!"; document.body.appendChild(nieuwElement); Je kunt ook iets maken op basis van wat de gebruiker invoert:

Op regel 7 wordt de waarde van het HTML elemenet met het id tekstvlak gelezen en in de variabel invoer gezet. Op regel 8 wordt er een nieuwe paragraaf gemaakt. Op regel 9 wordt het nieuwe element gevuld met tekst. Op regel 10 wordt het nieuwe element toegevoegd aan de de div met id resultaat 🛠️ Opdracht – Invoer toevoegen Maak een bestand dom5.html . Voeg een invoerveld toe waarin de gebruiker een hobby, film of favoriet eten kan typen. Voeg een knop toe met de tekst “Toevoegen”. Telkens wanneer je klikt, moet er een nieuw

-element met de ingevoerde tekst verschijnen onder een lijstdiv. Bonus Als je het leuk vindt, maak je het invoerveld na het klikken automatisch weer leeg. Gebruik daaarvoor input.value = "" om het veld te legen. 🧠 Reflectie Wat doet createElement precies? Wat is het verschil tussen textContent en innerHTML ? Waarom moet je appendChild gebruiken? 📤 Inleveren Lever je bestand dom5.html in. Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in. 6 Elementen aanpassen via  event.target 🎯 Leerdoelen Je begrijpt wat event.target doet. Je kunt een klik koppelen aan een specifiek element dat je wilt aanpassen of verwijderen. Je kunt met JavaScript elementen verwijderen uit de DOM. 💡 Uitleg Als een event plaatsvindt (zoals een click ), kun je met event.target achterhalen welk element er precies geklikt is. Voorbeeld "klikbare lijst waarin een item verdwijnt"

Er wordt een HTML lijst gemaakt en er wordt op elke element van de lijst een click event geplaatst. Dit event verwijderd zichzelf. 🛠️ Opdracht – Klik en verwijder Maak een bestand dom6.html . Voeg een lijst toe (bijv.