AJAX

Nu dat we de basis van JS onder de knie hebben, kunnen we aan de slag met programmatisch onze websites data te laden inladen en weergeven, liefst asynchroon (maw zonder dat de rest van de site blijft hangen terwijl het laadt). Dit valt onder de noemer: AJAX.

Om AJAX goed te leren kennen zou ik het volgende aanraden:

1. Slides: Overloop het DOM/AJAX-gedeelte van de slides (77 tot en met 90)
   • Enkel lezen en volgen, geen oefening of diepe kennis, dat komt in het volgende.
2. Workshop video: Volg de workshop video Advanced JS – AJAX en doe interactief mee.
   • :link: Link: https://youtu.be/XD2O1hm36TQ
   • Deze video illustreert 3 projecten:
     • 2x DOM hands-on demo projecten (Shopping list en planeten)
     • 1x AJAX/DOM hands-on demo project (Stranger Things quotes generator)
     • Voor het 1e project, shopping list, wordt je gevraagd om te starten met mijn code, geef aub een seintje wanneer je deze nodig hebt, dan nodig ik jou uit op de GitLab, en dan mag je fork'en.
       • :link: Link: https://gitlab.com/yannickMM/js-shopping-list
       • Voorbeeld van hoe je kan “fork’en” op GitLab zie je in deze screenshot:
       • Eens fork'ed, is het project volledig en permanent van jou om te houden! Je kan dan een clone doen op VSC en meedoen met de video
3. :white_sun_rain_cloud:Weather App: Maak zelfstandig een website die het weer toont, adhv van AJAX + een gratis API
   • Een handige REST API om de gegevens gratis op te halen is Open-Meteo
     • Een gewaardeerde skill van een full-stack developer is om API documentatie te kunnen navigeren om het gebruik (usage) te begrijpen. Moest je hier muurvast geraken laat me het gauw weten dan zitten eventjes samen om deze over te lopen
   • Voorbeeld van hoe het er zou mogen uitzien (puur ter inspiratie, je mag totaal jouw eigen weg hier in gaan qua uiterlijk en stijl):

Zo leer je DOM/AJAX op een veel interactievere, meer hands-on manier dan de meer “academische” oefeningen van JS (al waren die ook nuttig om gewoon JS te leren kennen).

:warning: Nota: Probeer waar mogelijk, per project, steeds aandacht te besteden aan uiterlijk en details zoals favicon, title, open graph, etc. zodanig dat je het met volle trots kan toevoegen aan jouw portfolio (zo wordt jouw leerervaring meteen een certificaat van ervaring).

Eens je goed geoefend hebt en door al die stapjes bent, stuur jouw docent een seintje voor feedback, dan mag je starten aan een Web Advanced project (die zal lijken op uw Weather App).