DA156A - HT15 - JavaScript 3

Transcript

1. JavaScript 3 DOM, Tillgänglighet, Exempel
2. Frågor? Från laborationen, tidigare föreläsningar?
3. Dagens föreläsning 1. Repetition 2. Mer DOM 3. Tillgänglighet 4. Mer avancerad DOM 5. Ex. Visa/Dölj 6. Ex. Todo-lista 7. JavaScript-ramverk
4. Repetition Från föregående föreläsningar
5. Vi har koll på…  Variabler  Datatyper  Loopar  If-satser  Funktioner
6. If-satser
7. Loopar
8. Funktioner
9. Från funktioner till interaktiva webbsidor
10. Strukturera program med funktioner  Instruktioner anger hur saker ska utföras  Ofta är det lättare att tänka vad som ska utföras  Funktioner låter oss separera ”vad” från ”hur”  Definiera uppgiften, lista ut vilka indata som krävs, bestämma vad resultatet ska vara.
11. “ ” Trevlig ”sidoeffekt” av att ha funktioner: Enkelt att anropa en funktion vid musklick
12. Anropa en funktion vid musklick  För varje element på en webbsida så kan man ange JavaScript som ska köras vid ett musklick  Typiskt anges en funktion som ska anropas
13. Anropa en funktion vid musklick  Detta är en form av händelsedriven programmering (event handling)  Webbläsaren ”lyssnar” efter händelser (musklick) och reagerar genom att anropa den funktion vi angivit
14. Event (händelser)  Event (händelser): genereras av användaren  Event handler (händelsehanterare): en funktion som anropas vid ett event  ”Vid händelsen musklick ska funktionen alert anropas” <button onclick="alert('Hej');"> Testa </button>
15. Exempel 1
16. ”onclick” överallt är inte så snyggt Kan vi hantera händelser utan att behöva ändra vår HTML?
17. Behov: hänvisa till delar av HTML-dokument från JavaScript
18. Lösning DOM  Document Object Model (DOM) är en representation av HTML-dokumentet i JavaScript  Via DOM är det möjligt att manipulera alla egenskaper, för alla element  Med DOM kan vi (äntligen?) separera JavaScript från HTML
19. 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
20. Använda DOM  I JavaScript kan man alltid komma åt DOM via objektet ”document”  Därifrån kan vi ”navigera” genom trädet // referens till body-elementet: document.body // lista över alla element i body document.body.childNodes
21. Att navigera i DOM  Vi antar att ”node” är en nod/element i DOM-trädet // Navigera mellan noder på samma nivå node.nextSibling node.previousSibling // Nedåt, barnnoder node.firstChild node.lastChild node.childNodes // alla barn // Uppåt, förälder (bara en) node.parentNode
23. Vi kommer fokusera på två ”genvägar”  document.getElementsByTagName – ger oss en lista på element av en viss typ  document.getElementsByClassName – ger oss en lista på element med en viss klass  document.getElementById – ger direkt åtkomst till ett specifikt element
24. Exempel JavaScript och DOM
25. DOM och händelser  Med hjälp av DOM kan vi hämta referenser till element  Har man en elementreferens kan man ändra attributet ”onclick”  … och många andra händelseattribut: http://www.w3schools.com/tags/ref_eventattributes.a sp
26. Exempel DOM och händelser
27. Möjligheterna är oändliga med DOM Några saker kan vara speciellt bra att ha sett:  Ersätta innehåll i element  Läsa och skriva till formulärselement  Ändra CSS dynamiskt
28. Tillgänglighet Vad händer om man har inaktiverat JavaScript i webbläsaren?
29. Inaktiverat JavaScript?  Man kan inaktivera det manuellt  På vissa företag inaktiveras det  Gamla webbläsare stödjer ev. inte JavaScript fullt ut
30. Hur löser vi det? Providing an alternative version of your functionality or making the user aware of shortcomings of a product as a safety measure to ensure that the product is usable. - Chrisitan Heilmann
31. Med andra ord… 1. Bygg webbplatser för moderna webbläsare 2. Identifiera kritisk funktionalitet och 1. Se till att detta fungerar i alternativa webbläsare 2. Berätta för användaren att något är fel och föreslå en metod för att fixa detta
32. Exempel <a href="javascript:window.print()">Print page</a> - Fungerar inte utan JavaScript
33. Hur löser vi det? <a href="javascript:window.print()">Print page</a> <noscript> <p class="scriptwarning"> Printing the page requires JavaScript. Please turn it on in your browser. </p> </noscript>
34. Är det den smidigaste lösningen?  Vad är JavaScript?  Hur aktiverar jag det?  Får inte använda JavaScript (företagsmiljö),  kan inte använda JavaScript  Aktivera JavaScript bara för att skriva ut?
35. Tänk på användaren <a href="javascript:window.print()">Print page</a> <noscript> <p class="scriptwarning"> Print a copy of your confirmation. Select the "Print" icon in your browser, or select "Print" from the "File" menu. </p> </noscript>
36. DOM Hämta värde från formulär, this
37. Att hitta element  Document.getElementById(id) – Identifierar ett element m.h.a. attributet ”id”  Document.getElementsByTagName(tagName) – Identifierar alla ellement av en viss typ  Document.getElementsByClassName(tagName) – Identifierar alla ellement med en viss klass  Nytt!  Element.value – Man kan komma åt ett elements attribut genom punktnotation och attributets namn  Element.innerHTML – Man kan komma åt ett elements attribut genom punktnotation och attributets namn
38. Det magiska ordet ”this”
39. this  this i JavaScript är ett nyckelord.  this, när man kör en funktion genom en event-handler (onclick), pekar på det element som interagerades med.  Ex. <p id=”hej”>Hej!</p> var hej = document.getElementById(”hej”); hej.onclick = hello; function hello(){ this; // this innehåller elementet: <p id=”hej”>Hej!</p> this.style.color = ”red”; }
40. Varför är this så bra?  Vid mängder av element! När vi vill säga att:  På det element som användaren klickade på vill vi…
41. Att loopa igenom alla element  Hämta en mängd med element:  getElementsByClassName  getElementsByTagName  ”Loopa” igenom alla element som returneras, ex.
42. Exempel This
43. Exempel Visa/dölj avsnitt
44. Exempel Todolista
45. Vad behöver vi veta? 1. Vi behöver identifiera: 1. Textfältet som vi skriver in vår ”att göra” 2. Knappen ”lägg till” 3. Listan där vi ska lägga till vår ”att göra” 4. Knappen ”rensa lista” 2. Vi behöver veta hur man: 1. Skapar ett element i JavaScript 2. Hur man tar bort element i JavaScript
46. Att skapa ett element i JavaScript 1. Ett element består av följande: 1. Ett element (t.ex. <li></li>) 2. Ev. attribut (t.ex <li class=”a”></li>) 3. Ev. textnod (t.ex. <li>lite text</li>) 2. För att skapa ett <li>-element skriver man: var el = document.createElement(”li”); 3. För att skapa en textnod skriver man: var text = document.createTextNode(”text”); 4. För att lägga in textnoden i elementet: el.appendChild(text);
47. Att lägga till ett element på sidan 1. Vi behöver först ha skapat ett element var el = document.createElement(”li”); var text = document.createTextNode(”Hej”); el.appendChild(text); ”el” innehåller nu ”<li>Hej</li>” 2. Leta upp det element vi vill lägga till ”<li>Hej</li>” i: var target = document.getElementById(id); target.appendChild(el);
48. Ta bort element  Använder funktionen ”removeChild(child)” T.ex. <ul id=”list”> <li>Hej</li> </ul> var list = document.getElementById(”list”); List.removeChild(list.firstChild);
49. Javascriptramverk jQuery
50. Varför ramverk?  Snabbare utveckling  Inbyggda funktioner  Animeringar och andra effekter  Cross-browser lösningar
51. jQuery – Referera till element  Att referera till element (”CSS”-referenser) $(”#id”); document.getElementById(”id”);  Att referera till taggar $(”a”); document.getElementsByTagName(”a”);
52. jQuery – navigera i DOM  Document.getElementById(”id”).nextsibling; $(”#id”).next();  Document.getElementById(”id”).childNodes; $(”#id”).children();  Document.getElementById(”id”).parentNode; $(”#id”).parent();
53. Att använd funktioner i jQuery  Att dölja ett element: document.getElementById(”id”).style.dis play = ”none”; $(”#id”).hide();  Att tona in ett element (animering): $(”#id”).fadeIn(1000);