JavaScript 3 - Tillgänglighet och Exempel

Transcript

1. JAVASCRIPT 3 Tillgänglighet, Exempel
2. Dagens föreläsning 1. Repetition 2. Tillgänglighet 3. Mer avancerad DOM 4. Ex1. Todo-lista 5. Ex2. Flikar 6. Ex3. Bildspel 7. JavaScript-ramverk
3. REPETITION Från föregående föreläsningar
4. Vi har koll på… • Variabler • Datatyper • Loopar • If-satser • DOM • Funktioner
5. Repetition - exempel function hello(greeting, times){ var name = prompt(”Vad heter du?”); for(var i = 0; i < times; i++){ document.write(greeting + name); } }
6. FRÅGOR?
7. TILLGÄNGLIGHET Vad händer om man har inaktiverat JavaScript i webbläsaren?
8. Inaktiverat JavaScript? • Man kan inaktivera det manuellt • På vissa företag inaktiveras det • Gamla webbläsare stödjer ev. inte JavaScript fullt ut
9. 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 http://dev.opera.com/articles/view/graceful-degradation-progressive-enhance/
10. Med andra ord… 1. Bygg webbplatser för moderna desktop-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
11. Exempel <a href="javascript:window.print()">Print page</a> - Fungerar inte utan JavaScript
12. 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>
13. Ä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 (mobil enhet). • Aktivera JavaScript bara för att skriva ut?
14. 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>
15. MER AVANCERAD DOM
16. Att hitta element (repetition) • Document.getElementById(id) – Identifierar ett element m.h.a. attributet ”id” • Document.getElementsByTagName(tagName) – Identifierar alla ellement av en viss typ • Element.value – Man kan komma åt ett elements attribut genom punktnotation och attributets namn
17. Att ska händelser vid klick (repetition) 1. Först behöver vi leta upp det element vi vill lägga till en händelse vid: var el = document.getElementById(id); 2. Sedan anger vi vilken händelse som vi vill lyssna efter (onclick i detta fall), samt vilken funktion som ska köras när händelsen sker: el.onclick = minfunktion;
18. EXEMPEL 1 - FLIKNAVIGATION
19. Vad behöver vi veta? 1. Vi behöver identifiera: 1. De olika flikar vi klickar på 2. De olika text-behållarna (<div>) som ska visas/döljar 2. Vi behöver veta hur man: 1. Visar/döljer element 2. Ändrar klass på element
20. Att modifiera CSS-egenskaperna för ett element 1. Först behöver vi leta upp det element vi vill modifiera: var el = document.getElementById(id); 2. Sedan kan vi modifiera css-egenskaper genom style.cssegenskap = ”värde”: el.style.display = ”none”;
21. Att modifiera ett elements klass 1. Först behöver vi leta upp det element vi vill modifiera: var el = document.getElementById(id); 2. Sedan ändrar vi klassnamnet genom att referera till ”className”: el.className = ”klassnamn”; 3. För att ta bort ett klassnamn: el.className = ””;
22. EXEMPEL 2 - TODOLISTA
23. 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
24. 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);
25. 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);
26. 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);
27. EXEMPEL 3 - BILDSPEL
28. Vad behöver vi veta? 1. Hur kör man en funktion var 3:e sekund? setInterval(funktionsnamn, 3000); 2. Hur navigerar man till nästkommande barn? node.nextSibling.nextSibling; 3. Hur hittar man ett elements första barn? node.childNodes[1]
29. Hur går man vidare? 1. Vilka bilder ska vi visa? 2. Hur ska dessa struktureras i HTML-kod? 3. Hur ska CSS-koden för bilderna vara? - Bildspelet 1. Växla till den efterkommande bilden var 3:e sekund 2. Om det inte finns någon efterföljande bild, börja om
30. JAVASCRIPTRAMVERK jQuery
31. Varför ramverk? • Snabbare utveckling • Inbyggda funktioner • Animeringar och andra effekter • Cross-browser lösningar
32. jQuery – Referera till element • Att referera till element (”CSS”-referenser) $(”#id”); document.getElementById(”id”); • Att referera till taggar $(”a”); document.getElementsByTagName(”a”);
33. jQuery – navigera i DOM • Document.getElementById(”id”).nextsibling; $(”#id”).next(); • Document.getElementById(”id”).childNodes; $(”#id”).children(); • Document.getElementById(”id”).parentNode; $(”#id”).parent();
34. Att använd funktioner i jQuery • Att dölja ett element: document.getElementById(”id”).style.display = ”none”; $(”#id”).hide(); • Att tona in ett element (animering): $(”#id”).fadeIn(1000);