ht16 - da156a - javascript 3
TRANSCRIPT
![Page 1: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/1.jpg)
JavaScript 3DOM, Tillgänglighet, Exempel
![Page 2: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/2.jpg)
Dagens föreläsning
1. Repetition
2. Mer DOM
3. Ex. Valutakonverterare
4. Tillgänglighet
5. this i JavaScript
6. Fler exempel
![Page 3: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/3.jpg)
Vi har numera koll på…
• Variabler
• Datatyper
• Loopar
• If-satser
• Funktioner
![Page 4: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/4.jpg)
If-satser
![Page 5: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/5.jpg)
Loopar
![Page 6: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/6.jpg)
Funktioner
![Page 7: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/7.jpg)
Från funktioner till interaktiva webbsidor
![Page 8: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/8.jpg)
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.
![Page 9: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/9.jpg)
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
![Page 10: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/10.jpg)
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
![Page 11: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/11.jpg)
Att separera JavaScript från HTMLProblem: Att hitta rätta element i HTML-dokumentet, genom JavaScript
![Page 12: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/12.jpg)
Att hitta ett HTML-element genom JavaScript
![Page 13: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/13.jpg)
Att hitta flera HTML-element genom JavaScript
![Page 14: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/14.jpg)
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
![Page 15: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/15.jpg)
Exempel
JavaScript
HTML
![Page 16: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/16.jpg)
Hmm… Men onclick är ju ett attribut!?
![Page 17: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/17.jpg)
Att koppla händelser till HTML-element (1)
![Page 18: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/18.jpg)
Att koppla händelser till HTML-element (2)
![Page 19: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/19.jpg)
När blir (2) smidigare än (1)?
![Page 20: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/20.jpg)
JavaScript
HTML
JavaScript
HTML
![Page 21: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/21.jpg)
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…
![Page 22: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/22.jpg)
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
![Page 23: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/23.jpg)
ExempelValutakonverterare
![Page 24: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/24.jpg)
TillgänglighetVad händer om man har inaktiverat JavaScript i webbläsaren?
![Page 25: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/25.jpg)
Inaktiverat JavaScript?
• Man kan inaktivera det manuellt
• På vissa företag inaktiveras det
• Gamla webbläsare stödjer ev. inte JavaScript fullt ut
![Page 26: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/26.jpg)
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
![Page 27: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/27.jpg)
Med andra ord…
1. Bygg webbplatser för moderna webbläsare
2. Identifiera kritisk funktionalitet och1. 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
![Page 28: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/28.jpg)
Exempel
<a href="javascript:window.print()">Print page</a>
- Fungerar inte utan JavaScript
![Page 29: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/29.jpg)
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>
![Page 30: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/30.jpg)
Ä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?
![Page 31: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/31.jpg)
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>
![Page 32: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/32.jpg)
Mer om DOM
![Page 33: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/33.jpg)
Ett av de mest användbara koncepten i JavaScript är this.
this refererar till det element som utlöser en händelse.
![Page 34: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/34.jpg)
this
• this i JavaScript är ett nyckelord.
JavaScript
HTML
![Page 35: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/35.jpg)
Ex. thisVi testar med en paragraf.
![Page 36: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/36.jpg)
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…
![Page 37: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/37.jpg)
Listor…
![Page 38: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/38.jpg)
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.
![Page 39: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/39.jpg)
ExempelThis
![Page 40: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/40.jpg)
ExempelVisa/dölj avsnitt
![Page 41: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/41.jpg)
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
![Page 42: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/42.jpg)
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);
![Page 43: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/43.jpg)
Att lägga till ett element på sidan
1. Vi behöver först ha skapat ett elementvar 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);
![Page 44: HT16 - DA156A - JavaScript 3](https://reader034.vdocuments.site/reader034/viewer/2022042600/587291541a28ab36118b63f5/html5/thumbnails/44.jpg)
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);