8. Strukturera program med funktioner
• En funktion är en namngiven samling instruktioner
• 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.
9. 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
10. Händelsedriven programmering
• 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
11. Att separera JavaScript från HTML
Problem: Att hitta rätta element i HTML-dokumentet, genom JavaScript
14. Att manipulera element genom JavaScript
• När vi i JavaScript letat upp ett element kan vi modifiera det
• Ta bort det
• Ändra ev. innehåll (text)
• Ändra CSS-egenskaper
• Ändra/lägga till/ta bort attribut
21. Att tänka på:
Datorn läser koden i den ordning
som den står i.
Detta innebär att när vår JavaScript-fil läses in, så har datorn inte läst in hela
HTML-dokumentet och vet inte vilka element som finns…
22. 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
25. Inaktiverat JavaScript?
• Man kan inaktivera det manuellt
• På vissa företag inaktiveras det
• Gamla webbläsare stödjer ev. inte JavaScript fullt ut
26. 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
27. 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
29. 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>
30. Ä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?
31. 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>
38. Att loopa igenom alla element
• Hämta en mängd med element (en lista med element):
• document.querySelectorAll
• ”Loopa” igenom alla element som returneras, ex.
41. 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
42. 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);
43. 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);
44. 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);
