Download to read offline
More Related Content
jQuery & HTML5 Cache
- 1.
- 2.
- 3.
- 4. 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
- 5. 1. jQuery erbjuder”enklare” kod
- 6. 2. jQuery erbjudermånga bra funktioner
- 7. 3. jQuery ärcross-platform
- 8.
- 9.
- 10. 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
- 11.
- 12. $ = jQuery $är en referens till jQuery-objektet
- 13. jQuery • Vi kallarpå jQuery när vi vill hitta element på vår webbsida.
- 14.
- 15.
- 16. jQuery – Merän bara hitta element • jQuery har fler väldigt nyttiga funktioner vi kan använda, t.ex.
- 17. jQuery != JavaScript •Vi kan inte använda ”vanliga” JavaScript-funktioner på jQuery-objekt, och vice versa.
- 18. jQuery - Exempel Attgöra!
- 19. Lär känna dinHTML-kod
- 20. Vad är syftetmed HTML?
- 21. Varför har vi elementi HTML?
- 22. Varför har vi attributi HTML?
- 24. Vad finns detfö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.
- 25. 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:
- 26. jQuery – Hämtaattribut
- 27.
- 28. DOM Behöver vi hakoll på nu!
- 29. DOM • Trädstruktur sommotsvarar taggarnas ordning/nästling • Varje element är en ”nod” i trädet • Relationer mellan noderna beskrivs med förälder/barn och syskon
- 30.
- 31. 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/
- 32. jQuery – läggatill innehåll
- 33.
- 34.
- 35.
- 36. • Hur kanvi 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?
- 37.
- 39. 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/beginner/ http://diveintohtml5.info/offline.html
- 40. Cache i praktiken Vidinternetanslutning: 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”
- 41. Cache – Hurfunkar det? 1. Vi anger att vi vill aktivera cache i HTML-filen 1. <html manifest="site.appcache"> 2. Vi skapar vår cache-fil 1. Skapar ” site.appcache” 2. Väljer vad vi vill cacha 3. 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
- 42. En .manifest-fil CACHE MANIFEST #2016-02-08 v1.0 /theme.css /logo.gif /main.js NETWORK: login.html FALLBACK: /html/ /offline.html
- 43. När uppdateras cachen? •När användaren tar bort cache • När manifest-filen ändras • När vi tvingar en uppdatering
- 44.
- 45. 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
- 46.