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/
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
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?
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
att separera HTML/CSS/JavaScript från varandra i så stor utsträckning som möjligt. • Genom taggen ”<script>” kan vi länka in ett externa JavaScript-dokument.
• Vi kan inte längre använda ”onclick”-attributet i HTML-koden • Dokumentet läses uppifrån och ner: • JavaScript-kod som inkluderas i ”<head>”-taggen körs innan HTML-koden i ”<body>” har laddats in.
ska ha en händelsehanterare knuten till sig (t.ex. ett ”klick”) och spara i en variabel. • Detta genom t.ex. ”document.getElementById()” 2. Lägg till ”onclick” till det valda elementet, samt vilken funktion som ska köras när man klickar på elementet. • element.onclick = myFunction; <p id=”paragraph” onclick=”myFunction”>En paragraf</p> var paragraph = document.getElementById(”paragraph”); paragraph.onclick = myFunction;
JavaScript-kod när sidan har laddats klart. • För att kontrollera sidan är klar kan man använda: window.onload = init; function init(){ // Denna funktion körs när sidan laddats klart. }
2. Efter 2 sekunder visar vi nästa bild 1. Vi visar nästa bild till sista bilden visas, då börjar vi om Notering: För att veta vilken bild som just nu visas så ger vi den id:t ”show”
var annan sekund? setInterval(funktionsnamn, 2000); 2. Hur navigerar man till nästkommande barn? node.nextSibling.nextSibling; 3. Hur hittar man ett elements första barn? node.childNodes[1]
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
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
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);
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);
svar • Dessa sparas i en array • Svara man korrekt får man 1p, svarar man fel får man 0p • Sparas i en variabel (som en siffra) • När de tre frågorna är ställda får spelaren reda på sin poäng.
skapar frågorna, svaren, poängen 3. Vi ställer en fråga 1. Kontrollerar om svaret är rätt eller fel 4. Vi ställer nästa fråga (tills frågorna är slut) 1. Kontrollerar om svaret är rätt eller fel 5. Vi berättar resultatet för besökaren