Introduktion till Webbutveckling - F8

JAVASCRIPT 3 Tillgänglighet, Exempel

Dagens föreläsning 1. Repetition 2. Tillgänglighet 3. JavaScript separat från
HTML 4. Mer avancerad DOM 5. Ex. Bildspel 6. Ex. Todo-lista 7. Ex. Flikar 8. JavaScript-ramverk

REPETITION Från föregående föreläsningar

Vi har koll på… • Variabler • Datatyper • Loopar
• If-satser • DOM • Funktioner

Repetition - exempel function hello(greeting){ var name = prompt(”Vad heter
du?”); alert(greeting + name); }

FRÅGOR? Innan vi drar igång!

TILLGÄNGLIGHET Vad 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 http://dev.opera.com/articles/view/graceful-degradation-progressive-enhance/

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

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> 
Printing the page requires JavaScript. Please turn it on in your browser. </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 (mobil enhet). • Aktivera JavaScript bara för att skriva ut?

Tänk på användaren <a href="javascript:window.print()">Print page</a> <noscript> Print
a copy of your confirmation. Select the "Print" icon in your browser, or select "Print" from the "File" menu. </noscript>

MER AVANCERAD DOM

Att hitta element • 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

Flytta ut JavaScript till ett eget dokument • Målet är
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.

Att tänka på när man flyttar ut JS • Händelsehanterare:
• 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.

Lösning: Händelsehanterare 1. Leta upp det element som du vill
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; En paragraf var paragraph = document.getElementById(”paragraph”); paragraph.onclick = myFunction;

Lösning: När sidan laddas • Vi vill ju köra vår
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. }

Fullt exempel HTML JavaScript

EXEMPEL - BILDSPEL

Hur ska bildspelet fungera? 1. Vi visar den första bilden
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”

Vad behöver vi veta? 1. Hur kör man en funktion
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]

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

EXEMPEL - TODOLISTA

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

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

FRÅGESPEL Med loop och if-sats

Frågespel – hur ska det fungera? • 3st frågor, 3st
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.

Spelflöde 1. Användaren startar spelet genom en knapp 2. Vi
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

Vad behöver vi använda oss utav? • Arrayer • If-sats
• For-loop

JAVASCRIPTRAMVERK jQuery

Varför ramverk? • Snabbare utveckling • Inbyggda funktioner • Animeringar
och andra effekter • Cross-browser lösningar

jQuery – Referera till element • Att referera till element
(”CSS”-referenser) $(”#id”); document.getElementById(”id”); • Att referera till taggar $(”a”); document.getElementsByTagName(”a”);

jQuery – navigera i DOM • Document.getElementById(”id”).nextsibling; $(”#id”).next(); • Document.getElementById(”id”).childNodes;
$(”#id”).children(); • Document.getElementById(”id”).parentNode; $(”#id”).parent();

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

Introduktion till Webbutveckling - F8

Introduktion till Webbutveckling - F8

More Decks by Anton Tibblin

Other Decks in Education

Featured

Transcript