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.
🛠️ Opdracht – Tekst aanpassen
Maak een nieuw bestand aan met de naam dom1.html .
Maak hierin een kopje, een paragraaf met een id, en een knop.
Als je op de knop klikt, moet de tekst in de paragraaf veranderen naar iets anders (bijv. “Hallo wereld!”).
Gebruik bijvoorbeeld:
document.getElementById("knop").addEventListener("click", function() {
document.getElementById("mijnParagraaf").textContent = "Hallo wereld!";
});
đź§ 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 dom1.html in via Teams of Canvas.
Beantwoord de reflectievragen in een .txt of .pdf bestand en lever deze mee in.
2 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 dom2.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 actief krijgen.
Gebruik bijvoorbeeld:
document.getElementById("knop").addEventListener("click", function() {
document.querySelectorAll(".item").forEach(function(el) {
el.classList.add("actief");
});
});
Stijl de class actief in je
🛠️ Opdracht – Actieve selectie
Maak een bestand dom6.html .
Maak een lijst (bijv. favoriete games, liedjes, sporters).
Als je op een item klikt, moet de class geselecteerd worden toegevoegd of verwijderd.
Stijl de class geselecteerd in CSS met bijvoorbeeld een andere kleur en achtergrond.
Voorbeeld CSS:
.geselecteerd {
background-color: lightgreen;
font-weight: bold;
}
Gebruik element.classList.toggle("geselecteerd") bij het klikken.
đź§ Reflectie
Wat is het voordeel van toggle ten opzichte van add en remove ?
Wat gebeurt er als je meerdere keren op hetzelfde item klikt?
Waar zou je dit in een echte webapp kunnen gebruiken?
📤 Inleveren
Lever het bestand dom6.html in via Teams of Canvas.
Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
JS - (DOM2)
1 Formulieren en invoer met JavaScript
🎯 Leerdoelen
Je weet hoe je gegevens uit een formulier leest met JavaScript.
Je kunt reageren op een submit -event.
Je weet wat preventDefault() doet.
đź’ˇ Uitleg
Formulieren worden normaal automatisch verstuurd en de pagina ververst dan. Maar in JavaScript kun je het formulier ook “afhandelen” zonder te verversen.
Voorbeeldformulier:
🛠️ Opdracht – Formulier verwerken
Maak een bestand dom7.html .
Voeg een formulier toe met een tekstveld voor een bericht en een verstuurknop.
Laat het formulier bij klikken niet verversen.
Laat het ingevoerde bericht onder het formulier verschijnen in een
-element.
Bonus: Voeg meerdere berichten toe (zoals een eenvoudige chat).
đź§ Reflectie
Wat doet preventDefault() en waarom gebruik je het?
Wat is het verschil tussen een click -event en een submit -event?
Hoe lees je de waarde van een inputveld?
📤 Inleveren
Lever je bestand dom7.html in via Teams of Canvas.
Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
2 Gegevens bewaren met localStorage
🎯 Leerdoelen
Je weet wat localStorage is en wanneer je het gebruikt.
Je kunt gegevens opslaan in de browser.
Je kunt opgeslagen gegevens bij het laden van de pagina weer tonen.
đź’ˇ Uitleg
localStorage is een opslagruimte in de browser. Alles wat je daarin zet, blijft bewaard – ook als je de pagina sluit of opnieuw opent.
Je gebruikt het bijvoorbeeld zo:
// Iets opslaan
localStorage.setItem("naam", "Ali");
// Iets ophalen
const naam = localStorage.getItem("naam");
// Iets verwijderen
localStorage.removeItem("naam");
Let op: je kunt alleen strings opslaan. Wil je een lijst opslaan? Gebruik dan JSON.stringify() en JSON.parse() :
const lijst = ["bananen", "appels"];
localStorage.setItem("boodschappen", JSON.stringify(lijst));
const terug = JSON.parse(localStorage.getItem("boodschappen"));
console.log(terug); // ["bananen", "appels"]
🛠️ Opdracht – Opslaan wat je invult
Maak een bestand dom9.html .
Maak een invoerveld waar de gebruiker een hobby, taak of naam kan invullen.
Als de gebruiker iets toevoegt, verschijnt het in een lijst op de pagina.
De lijst moet bewaard blijven via localStorage zodat deze zichtbaar blijft bij herladen.
Bonus: Voeg een knop toe om alles te wissen (via localStorage.clear() ).
Tips:
Lees bij het laden van de pagina eerst de gegevens uit localStorage .
Update localStorage telkens als je iets toevoegt of verwijdert.
đź§ Reflectie
Wat is het voordeel van localStorage ?
Waarom moet je JSON gebruiken bij het opslaan van lijsten?
Wat zou je nog meer kunnen opslaan in een webapp?
📤 Inleveren
Lever je bestand dom9.html in via Teams of Canvas.
Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
Toon in een screenshot dat je lijst bewaard blijft bij herladen.
3 Gegevens ophalen met fetch()
🎯 Leerdoelen
Je weet wat fetch() doet in JavaScript.
Je kunt externe gegevens ophalen en tonen op een webpagina.
Je begrijpt hoe je met JSON-data werkt en deze verwerkt met de DOM.
đź’ˇ Uitleg
Met fetch() kun je gegevens ophalen van een externe bron zoals een API. Vaak krijg je dan JSON-data terug: een soort tekstversie van een JavaScript-object of array.
Een voorbeeld:
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.then(data => {
console.log(data); // Hier kun je nu iets mee doen
});
Je kunt daarna bijvoorbeeld een lijst maken van namen:
fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(users => {
users.forEach(user => {
const p = document.createElement("p");
p.textContent = user.name;
document.body.appendChild(p);
});
});
🛠️ Opdracht – Externe gebruikerslijst
Maak een bestand dom10.html .
Haal gegevens op van https://jsonplaceholder.typicode.com/users .
Laat van elke gebruiker de naam en e-mailadres zien in de browser.
Maak van elke gebruiker een eigen
of
.
Bonus: laat de gegevens pas zien als je op een knop “Laad gebruikers” hebt geklikt.
Extra uitdaging:
Voeg bij elk item een knop “verwijder” toe waarmee dat item uit de DOM verdwijnt.
đź§ Reflectie
Wat doet fetch() precies?
Wat is een API, en wat kun je ermee?
Wat zou een risico zijn als je data van andere websites gebruikt?
📤 Inleveren
Lever je bestand dom10.html in via Teams of Canvas.
Beantwoord de reflectievragen in een .txt of .pdf bestand.
Lever een screenshot aan waarop de opgehaalde gebruikers zichtbaar zijn in je browser.
4 Lijsten filteren op basis van invoer
🎯 Leerdoelen
Je weet hoe je gebruikersinvoer gebruikt om iets te filteren.
Je kunt elementen verbergen of tonen met JavaScript.
Je past een input -event toe om live te reageren.
đź’ˇ Uitleg
Je kunt met JavaScript elementen tonen of verbergen op basis van wat de gebruiker intypt.
Voorbeeld – een zoekveld dat een lijst filtert: