Opdracht 1: Refactor opdrachten Q2

Achtergrond

'Code Refactoring' betekent dat je de code van een applicatie aanpast / verbetert om technische redenen, zonder dat daarbij de functionaliteit van de applicatie verandert.

In het vorige kwartaal heb je (als het goed is) met behulp van JavaScript DOM Core een formvalidatie script en een lightbox gebouwd. Nu heb je een nieuwe techniek (jQuery) geleerd, waarmee het ook mogelijk is dit formvalidatie script en deze lightbox te schrijven.

Als je jQuery zou gebruiken om dit formvalidatiescript en de lightbox te schrijven,

• zou je minder regels code nodig hebben
• kan je script overzichtelijker (leesbaarder) worden
• hoef je zelf niet meer te controleren of de browser van de gebruiker bijvoorbeeld document.getElementsByClassName() kent, omdat jij een jQuery.js bestand meestuurt en jQuery vervolgens zorgt dat de jQuery functies het het in alle browsers doen.

Opdracht

Herbouw het formvalidatiescript en de lightbox zodanig dat ze gebruik maken jQuery functies, maar zonder dat je script wat anders doet dan voorheen. Het is dus niet de bedoeling dat je een kant en klaar formvalidatie- of lightbox script (dat gebruik maakt van jQuery) gebruikt; je schrijft je eigen script en maakt alleen gebruik van de jQuery library (jQuery.js) zelf.

Maak per gebeurtenis een Activity diagram om te bepalen wat er precies moet gebeuren als dit event plaats vindt.

aandachtspunten:

• Maak gebruik van de eerder gemaakte activity diagrammen (1 diagram per gebeurtenis/event) en bedenk goed wat er wanneer moet gebeuren:
  • zodra de pagina wordt geladen
  • zodra er op een link wordt geklikt
  • zodra een formulier wordt verstuurd
  Zo maak je het grote probleem "bouw een formvalidatie" wat concreter en kun je de deelproblemen in kleine stapjes tegelijk oplossen.
• Ook als je van jQuery gebruik maakt bestaat elke actie steeds uit twee delen:
  • het zoeken / ophalen van (een) element(en) (of een jQuery object dat deze elementen bevat)
  • het veranderen van (de vormgeving van) dat element (of jQuery object)
• Schrijf eerst per stap uit je Activity diagram als commentaar in je document wat er moet gebeuren Bedenk vervolgens pas welke jQuery functie je nodig hebt.
• Bouw je applicatie in kleine stapjes en test steeds of ieder nieuw stukje het doet (met firebug of met alerts)

Inleveren

Als je meerdere dingen geprobeerd hebt, vooral als dingen niet gelukt zijn zoals je wilde, kun je meerdere (oudere) versies inleveren in aparte sub-directories (mappen). Schrijf bovendien ook een opleverdocument. Hierin maak je jouw werk en werkwijze voor de docent inzichtelijk, zodat deze het beter kan beoordelen. In dit opleverdocument schrijf je:

• Wat je aan zelfstudie hebt gedaan om de leerdoelen te behalen,
• Hoeveel tijd je hieraan gespendeerd hebt,
• Hoeveel tijd je hebt besteed aan het maken van de opdracht,
• Hoe je de opdracht hebt aangepakt
• Welke problemen je hierbij bent tegengekomen, hoe je die hebt proberen op te lossen en in hoeverre dat gelukt is

Opdrachten moeten worden upgeload naar je webspace op ftp://student.cmd.hro.nl/public.www . Je werk moet steeds te vinden zijn op de locatie die hoort bij de opdracht: http://student.cmd.hro.nl/[studentnummer]/jaar1/lente/fed/opdracht1/ . Op deze locatie moet ook je opleverdocument te vinden zijn. Schrijf je opleverdocument in correcte XHTML en link daarin naar je activity diagram, je werkende applicatie en naar de broncode.

Houd rekening met de deadline voor deze opdracht: zondagavond 1 maart om 24:00. Zie voor meer informatie de modulewijzer.

Beoordelingscriteria

• Je hebt met Activity diagrammen inzichtelijk gemaakt wat, wanneer en in welke volgorde moet gebeuren
• Je hebt hebt zinvol gebruik gemaakt van de mogelijkheden van JavaScript library: jQuery
• Je hebt gebruik gemaakt van jQuery functies
• Je JavaScript is 'unobtruisive' (alle content is toegankelijk ook zonder javascript in de browser)
• Je zorgt voor 'progressive enhancement' (als de gebruiker wel javascript aan heeft staan, kun je de gebruikersinteractie verbeteren)
• Je werk is goed gedocumenteerd (zie 3.1.4) en correct ingeleverd (zie 3.1.5)
• Je voldoet aan de algemene beoordelingscriteria (zie 3.2)

Succes.