Webbutveckling02 [weuweb02]

Moment05 - Ramverk & scriptpaket

Introduktion

I kursdokumentationen står det att du skall kunna använda "Skriptspråk för webbutveckling på klientsidan och dokumentobjektsmodellen som en teknik för ökad användbarhet genom progressiv förbättring".

Nu känner du dig säkert lite mer hemma på JavaScript och är förhoppningsvis redo att jobba med det största Javascriptsbiblioteket som finns.

jQuery är världens mest populära JavaScript-bibliotek. Det är designat bl.a. för att göra det enklare att anropa och modifiera element på hemsidan (divar, bilder, länkar etc), hantera händelser (t.ex. musklick), CSS-modifikationer samt skapa effekter och animationer. jQuery stödjer också plugin, och det finns många smidiga plugin som är gratis att ladda ner och använda.

I detta moment skall vi framförallt kika på jQuery men även ge dig möjlighet att kolla in AJAX.

Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

Centralt innehåll

  • Webben som plattform för applikationer av olika slag.
  • Utvecklingsprocessen för ett webbtekniskt projekt med målsättningar, planering, specifikation av struktur och design, kodning, optimering, testning, dokumentation och uppföljning.
  • Ramverk eller klassbibliotek inom design eller skriptspråk.
  • Skriptspråk för webbutveckling på klientsidan och dokumentobjektsmodell.
  • Riktlinjer för god praxis inom webbutveckling.
  • Terminologi inom området webbutveckling.

jQuery

jQuery är ett JavaScriptbibliotek som innehåller en mängd funktioner för att modifiera HTML-, DOM- och CSS. jQuery är också användbart för att hantera händelser och går att använda allt från att göra mindre justeringar i HTML-element till att bygga hela applikationer i.

jQuery är ett paket, i en fil, med alla koder som du behöver. Det finns två olika sätt att använda sig av denna fil.

  1. Ladda ner filen från jQuery hemsida, den finns naturligtvis i olika versioner och oftast vill du använda den senaste. Eftersom ramverket utvecklas så kan det ha försvunnit gamla funktioner och då får du leta upp en specifik version. Om du vill ladda ner filen så kommer du märka att den finns i minst två olika versioner, compressed för produktion och uncompressed för utveckling. Skillnaden här är läsbarheten. Eftersom jQuery ges ut under både MIT-licens och GNU General Public License så har du bl.a. rätt att modifiera applikationen för att den bättre skall passa dina behov.

  2. Istället för att ladda ner filen själv så går det att länka till Google eller Microsofts CDN (Content Delivery Network) och då dra nytta av att de flesta användare redan har hämtat ner en kopia av dessa filer då den säkerligen har använts på någon annan webbsida som användaren besökt. Detta gör att laddningstiden första gången applikationen skall köras minskas.
    Google CDN: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    Microsoft CDN: <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
    Denna länk gäller versionen 3.1.1 som var den senaste 2017-01-17.

Tutorial

Jag ramlade på en tutorial på nätet som visade en mängd exempel på vad som kan göras med jQuery, det börjar med mindre modifieringar för att ju längre serien gick så blev det mer och mer avancerat tills han slutligen gör två applikationer helt i jQuery. Detta tyckte jag själv var bra träning så jag släpper er gladeligen in i den serien. Måler är att ni skall kunna förstå jQuery så att det är möjligt att implementera egna eller andras script och applikationer i dina egna webbsidor där det behövs.

Uppgifter på detta moment kommer senare, men våga pausa hans tutorial och skriva av samt testa själv, bygg gärna upp ditt eget exempelgalleri, det gör det mycket lättare att återanvända senare när du vill implemtentera en specifik funktion.

BLi inte rädd för alla klasser i HTML-elementen, det är bootstrapkod som ligger där, vi skall kika på det i ett senare moment.

jQuery Tutorial #1 - jQuery Tutorial for Beginners

jQuery Tutorial #2 - Event Binding

jQuery Tutorial #3 - Writing Smarter, Better Code

jQuery Tutorial #4 - DOM Traversal with jQuery

jQuery Tutorial #5 - Building a jQuery Tab Panel Widget

jQuery Tutorial #6 - Building a jQuery Image Slider

Ta nu en paus, samla ihop det sakerna som du anser att du behöver/vill spara och snygga till samt dokumentera. Snart går vi vidare på AJAX.

AJAX

AJAX är ett samlingsnamn för flera olika tekniker som hjälper till att bygga applikationer på webbsidor men också tekniker som förenklar interaktionen med bakomliggande system.

Vi kör vidare på tutorials och testar att bygga en färdig applikation med hjälp av AJAX.

jQuery Ajax Tutorial #1 - Using AJAX & API's

jQuery Ajax Tutorial #2 - Posting data to backend

jQuery Ajax Tutorial #3 - Delegating Events & Mustache.js Templating

Redovisning

Redovisa detta moment på följande sätt;

  1. Lägg upp de tutorials som du arbetat med på din hemsida. Lägg varje projekt i en egen mapp. De första avsnitten med övningar kan du mest använda för din egen skull, redovisa det du vill.
  2. Länka sidan/sidorna från din samlingssida.
  3. I WordPress så reflekterar du över ditt arbete, berätta vilka uppgifter du gjort och varför. Resonera kring hur du tycker att det har gått att jobba med momentet.
    Frågestöd
    • Hur har det gått att arbeta med momentet?
    • Vad tycker du om arbetssättet att jobba med tutorials i ett helt moment?
    • Finns det någon av teknikerna som du har jobbat med som du skulle vilja fördjupa dig ytterligare i?