Göm menyn

TDDD52 Webbprogrammering - grundkurs

2014

Laboration 2 - JavaScript

1. Syfte

  • Att förstå hur Javascript kan länkas till ett HTML dokument.
  • Att förstå hur HTML element kan påverkas hos klienten genom användandet av Javascript.
  • Att förstå hur HTML formulär kan valideras hos klienten genom användandet av Javascript.

2. Genomförande

Läs igenom hela denna sida innan ni börjar arbete, det kommer säkert att underlätta. I föregående laboration skapade ni en webbplats med HTML och CSS. I denna laboration skall ni påverka beteendet på denna webbplats med hjälp av JavaScript.

2.1 Filer

I mappen "lab2" finns redan två filer validate.js och animate.js. Ni behöver dock kopiera alla era filer från mappen "lab1" till "lab2", dvs index.html, product1.html, product2.html, product3.html, contact.html samt stylesheet.css. Filerna skall ha samma namn som i "lab1".

  • validate.js skall innehålla all JavaScript kod ni behöver för validering.
  • animate.js skall innehålla all JavaScript kod ni behöver för animering.
  • JavaScript kod får inte skrivas någon annanstans.
  • Endast givna filer skall användas och inga filnamn får ändras. Inga andra filer får heller skapas. Det enda undantaget är att bilder får läggas till i denna mapp.
  • Det är ok att lägga till funktioner i de givna filerna, men de specifierade funktionerna skall implementeras och användas.

3. Uppdaterad webbplats med Javascript

3.1 JavaScript formulär validering

På er kontaktsida finns ett formulär som behöver valideras hos klienten. Att validera med JavaScript hos klienten garanterar inte att all data skickad till servern kommer att vara korrekt, men det gör det möjligt att kommunicera direkt med användaren utan att först skicka data mellan klient och server. På så vis sparar man tid och bandbredd.

  • I filen contact.html måste ni länka in filen validate.js.
  • När man klickar på "Skicka" skall hela formuläret valideras med JavaScript, detta skall göras genom anrop till funktionen "validate_contact_form" i filen validate.js.
  • Funktionen "validate_contact_form" i validate.js skall kontrollera att namn, epost, telefonnummer, meddelande och vald produkt alla är ok.
  • Om valideringen inte går igenom skall detta meddelas användaren med röd text (inte genom "alert popup") och formuläret skall inte skickas vidare till servern.
  • Namn: Måste anges.
  • Epost: Måste anges, och valideras till korrekt e-post adress.
  • Telefonnummer: Får vara tomt, men om det är angett skall det endast vara siffror i fältet.
  • Meddelande: Måste anges, max 500 tecken.
  • Produkt: En produkt måste ha blivit vald.
  • Läs instruktionerna i filen validate.js för mer information om exakt vad varje funktion skall göra.

3.2 JavaScript produktbildspel

På era produktsidor skall det redan finnas en bild som visar produkten. Nu skall ni lägga till fler bilder, som visas som ett bildspel, och byter bild varje gång man klickar på den aktuella bilden.

  • I filerna product1.html, product2.html och product3.html måste ni länka in filen animate.js.
  • När man klickar på bilden på produkthemsidorna skall en ny bild visas, detta skall ske genom anrop till funktionen "slideshow_next_image" i animate.js.
  • Det skall finnas minst två bilder i varje bildspel.
  • Alla produktsidor skall ha ett unikt bildspel.

4. Redovisning

Inlämning: Mejla till er laborationsassistent när webbplatsen har blivit uppdaterad i www-pub, den skall finnas tillgänglig på båda studenters konto. I ämnesraden skriver ni "TDDD52 - Laboration 2 - Redovisning". I mejlet skriver ni länken till er publicerade webbplats, era namn, liu-id och epost-adresser.

Muntlig: Laborationsassistenten kan ställa frågor till er angående er inlämning om det är något som kräver förtydligande.

4.1 Deadline

Soft: 2013/02/01

Hard: 2013/03/01

5. Verktyg

För att genomföra laborationen krävs samma verktyg som föregående laboration.

Det är inte tillåtet att använda några JavaScript bibliotek så som jQuery eller Dojo i denna laboration.

6. Litteratur

6.1 Böcker

  • Robert Sebesta - Programming the World Wide Web - Chapter 4, 5, 6
  • Yank, K., Adams, C. (2007). Simply Javascript. Sitepoint.

6.2 Länkar


Sidansvarig: Jakob Bandelin
Senast uppdaterad: 2013-01-07