jquery & html5 cache
TRANSCRIPT
JS-biblioteket jQuery+ Offlinehantering
Erfarenheter hittills utav jQuery?
http://trends.builtwith.com/javascript/jQuery
Dagens föreläsing• jQuery, varför?• jQuery, syntax• Lär känna din HTML-kod• DOM – Nyckeln till interaktiva webbplatser• Case, förstå sin HTML-kod
Metoder för att lösa problem
1. jQuery erbjuder ”enklare” kod
2. jQuery erbjuder många bra funktioner
3. jQuery är cross-platform
+ Många plugins
+ Många guider
Exempel på guider• https://www.codecademy.com/learn/jquery• https://learn.jquery.com/• http://www.w3schools.com/jquery/• https://www.codeschool.com/courses/try-jquery• http://jqfundamentals.com/chapter/jquery-basics
http://api.jquery.com/
$ = jQuery$ är en referens till jQuery-objektet
jQuery• Vi kallar på jQuery när vi vill hitta element på vår
webbsida.
Jämför med vanligt JavaScript
jQuery-funktioner på element
jQuery – Mer än bara hitta element• jQuery har fler väldigt nyttiga funktioner vi kan
använda, t.ex.
jQuery != JavaScript• Vi kan inte använda ”vanliga” JavaScript-funktioner
på jQuery-objekt, och vice versa.
jQuery - ExempelAtt göra!
Lär känna din HTML-kod
Vad är syftet med HTML?
Varför har vi element i HTML?
Varför har vi attribut i HTML?
Vad finns det för attribut?• Många! T.ex.
id class title rel src href type … och många fler.
• Beroende vilken typ av element det är - finns det olika attribut som är användbara.
HTML 5 – Attributet data-*• Ibland så räcker inte de attributen som vi har att
tillgå till. Tänk om jag har behov som dessa inte motsvarar?
• Attributet data-* ger oss möjlighet att skapa egna attribut där * är ett valfritt namn, t.ex. skulle vi kunna skapa följande attribut för element:
jQuery – Hämta attribut
Demo – data-*
DOMBehöver vi ha koll på nu!
DOM
• Trädstruktur som motsvarar taggarnas ordning/nästling
• Varje element är en ”nod” i trädet
• Relationer mellan noderna beskrivs med förälder/barn och syskon
Källkod vs. noder
jQuery & DOM• jQuery har många bra funktioner för att navigera i
DOM Som dessutom fungerar cross-browser!
• https://api.jquery.com/category/traversing/tree-traversal/
jQuery – lägga till innehåll
Navigera i DOM
Case
Kalles teknikbutik
• Hur kan vi genom HTML/JavaScript spara priserna, så att de blir så enkla som möjligt att arbeta med?
• Hur ska vi tänka gällande ”X”-knappen. Hur ska den fungera?
• Hur fungerar ”+”-knappen. Hur får vi över produkten till varukorgen, samt adderar priset till ”totalpris”?
• Vilka jQuery-funktioner kan vi använda till ovan?
HTML 5 – Offlinehantering
HTML5 - Cache• Vad händer när en webbapp inte har någon
anslutning?• Vi kan använda oss utav HTML5 cache för att
undvika otrevliga ”du har ingen anslutning”-sidor Istället laddar vi in sidan från en specificerad Cache Eller anger vad som ska visas när ingen täckning finns
• Bra läsning: http://www.html5rocks.com/en/tutorials/appcache/begin
ner/
http://diveintohtml5.info/offline.html
Cache i praktikenVid internetanslutning:Finns cache?JA:- Är har vi den senaste versionen av de cachade filerna? Annars laddar vi ner de senaste versionerna från servern.NEJ:- Hämtar specificerade filer från servern.Utan internetanslutning:Finns cache?JA:- Ladda in webbsidan (+ ev. specificerade resurser)NEJ:- Visa ”Sidan kan inte hämtas”
Cache – Hur funkar det?1. Vi anger att vi vill aktivera cache i HTML-filen
1. <html manifest="site.appcache">
2. Vi skapar vår cache-fil1. Skapar ” site.appcache”2. Väljer vad vi vill cacha3. Väljer vad som händer om vi försöker nå icke-cachat
offline
3. Ev. ställa in att servern har rätt mime-type av .manifest/.appcache-filer
En .manifest-filCACHE MANIFEST# 2016-02-08 v1.0/theme.css/logo.gif/main.js
NETWORK:login.html
FALLBACK:/html/ /offline.html
När uppdateras cachen?• När användaren tar bort cache• När manifest-filen ändras• När vi tvingar en uppdatering
DemoCache
Kontrollera om man är online?• Det kan vi göra genom:
navigation.onLine; // Som returerar true/false• Samt använda oss utav händeslerna
online offline
http://webshare.mah.se/tsanti/isOnline.html
http://webshare.mah.se/tsanti/isOnline.html