HT16 - DA156A - JavaScript 3

JavaScript 3DOM, Tillgänglighet, Exempel

Dagens föreläsning

1. Repetition

2. Mer DOM

3. Ex. Valutakonverterare

4. Tillgänglighet

5. this i JavaScript

6. Fler exempel

Vi har numera koll på…

• Variabler

• Datatyper

• Loopar

• If-satser

• Funktioner

If-satser

Loopar

Funktioner

Från funktioner till interaktiva webbsidor

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.

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

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

Att separera JavaScript från HTMLProblem: Att hitta rätta element i HTML-dokumentet, genom JavaScript

Att hitta ett HTML-element genom JavaScript

Att hitta flera HTML-element genom JavaScript

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

Exempel

JavaScript

HTML

Hmm… Men onclick är ju ett attribut!?

Att koppla händelser till HTML-element (1)

Att koppla händelser till HTML-element (2)

När blir (2) smidigare än (1)?

JavaScript

HTML

JavaScript

HTML

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…

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

ExempelValutakonverterare

TillgänglighetVad händer om man har inaktiverat JavaScript i webbläsaren?

Inaktiverat JavaScript?

• Man kan inaktivera det manuellt

• På vissa företag inaktiveras det

• Gamla webbläsare stödjer ev. inte JavaScript fullt ut

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

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

Exempel

<a href="javascript:window.print()">Print page</a>

- Fungerar inte utan JavaScript

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>

Ä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?

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>

Mer om DOM

Ett av de mest användbara koncepten i JavaScript är this.

this refererar till det element som utlöser en händelse.

this

• this i JavaScript är ett nyckelord.

JavaScript

HTML

Ex. thisVi testar med en paragraf.

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…

Listor…

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.

ExempelThis

ExempelVisa/dölj avsnitt

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

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);

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);

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);