HT14 - F7

1e708b2afb8622d5c5f070a94a3425a9?s=47 Anton Tibblin
September 24, 2014

HT14 - F7

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

September 24, 2014
Tweet

Transcript

  1. JAVASCRIPT 2 Loopar, if-satser, funktioner & interaktiva webbsidor

  2. Dagens föreläsning 1. Repetition 2. If-satser 3. Loopar 4. Funktioner

    5. Interaktiva webbsidor
  3. FRÅGOR FRÅN IGÅR?

  4. 1. REPETITION Från förra veckan

  5. Variabler • Ett viktigt koncept är att kunna spara undan

    värden • Värden kan lagras i variabler • Variabler skapasmed nyckelordet var, följt av ett namn var name = ”Anton”; var age = 24;
  6. Värden i JavaScript • Det finns sex typer av värden

    i JavaScript 1. Number (siffror) 2. String (textsträngar) 3. Boolean (booleskt värde; sant/falskt) 4. Array 5. Object 6. Undefined & null
  7. Exempel från igår

  8. IF-SATSER Selektion

  9. Val / selektion • Ofta ska program göra olika saker

    beroende på användarinmatning eller resultat av en beräkning • I JavaScript kan vi välja att utföra en uppsättning instruktion, endast om ett uttryck är sant • Detta görs med en if-sats
  10. Exempel, if-sats var inmatning = prompt(”Ange en siffra”); If(inmatning >

    10){ alert(”Du angav ett tal större än 10!”); } else{ alert(”Du angav ett litet tal.”); }
  11. Exempel, if-sats var inmatning = prompt(”Ange en siffra”); If(inmatning >

    10){ alert(”Du angav ett tal större än 10!”); } else if(inmatning >= 0){ alert(”Du angav ett litet tal.”); } else{ alert(”Du angav ett negativt.”); }
  12. DEMO If-satser

  13. LOOPAR (ITERATIONER) Göra saker flera gånger!

  14. Iterationer / loopar • Det är vanligt att behöva upprepa

    en uppsättning instruktioner flera gånger. • Detta är att iterera och göra med en loop. • while-loop • for-loop
  15. Exempel, loopar var tal = 0; While(tal < 5){ alert(Ӏnnu

    ett varv i loopen”); // Öka variabeln ”tal” med 1 tal = tal + 1; } // for-loopen ger exakt samma resultat som while-loopen ovan for(var tal = 0; tal < 5; tal++){ alert(”Ännu ett varv i loopen”); }
  16. EXEMPEL

  17. FUNKTIONER Återanvända samma kod!

  18. Några inbyggda funktioner • prompt() – Hämta data från användaren

    • alert() – Skapa en popupruta • document.write() – Utskrift på sidan
  19. Vad är en funktion? • Exempel på funktioner: - prompt()

    - alert() - document.write() • Vi vet vad de gör, men inte hur. • Vi påverkar körningen genom att skicka indata (t.ex. vad som ska skrivas ut, vilket meddelande som ska synas). • I vissa fall (prompt()) får vi tillbaka ett värde.
  20. EXEMPEL 2

  21. Hur använde vi funktionerna? • Vi kallade på dem för

    att använda deras funktionalitet • Vi skickade med värde för att funktionen skulle generera det resultat vi önskade. • Vi kallade på dem genom att ange deras funktionsnamn – och skicka med värdet inom ()
  22. Definiera funktion • Inom programmering är en funktion, även subrutin,

    procedur, metod, underprogram eller subprogram, en del av ett datorprogram som kan anropas för att utföra en viss uppgift oberoende av resten av koden. • http://sv.wikipedia.org/wiki/Funktion_%28programmering%29
  23. Funktion (function) • Namngiven uppsättning instruktioner - Kan ha en

    eller fler inparametrar - Kan producera ett returvärde • Används som byggstenar för program. • En funktion kan anropas (köras) – allt man behöver veta är namnet på funktionen och om det finns inparametrar
  24. Ett första exempel på en funktion // Funktion med namnet

    showMessage, // utan inparametrar och returvärde. function showMessage() { alert("VARNING!"); } // Anrop av showMessage showMessage();
  25. EXEMPEL 3

  26. Inparametrar • En funktion kan ha 0 till flera parametrar

    • En inparameter är som en variabel, vars värde definieras vid anropet av funktionen • Det värde som skickas till funktionsanrop kallas argument.
  27. Exempel på parameter/argument // message är inparametern function showMessage(message) {

    alert("VARNING! " + message); } // "Ojojoj" osv är argument till funktionen. showMessage("Ojojoj");
  28. Exempel på flera parametrar/argument // två inparametrar, a och b

    function showSum(a, b) { var sum = a + b; alert("Summan är " + sum); } // Argumentens ordning avgör vilket värde som blir a resp. b showSum(5, 8); showSum(8, 5);
  29. EXEMPEL 4

  30. Returvärde • När en funktion kört klart kan den returnera

    ett värde • Det värdet blir tillgängligt där funktionen anropas • En funktion som inte anger ett returvärde själv, returneras undefined
  31. function inchesToCentimeters(inches) { return iches * 2.54; } function confirmError(message)

    { var response = confirm("VARNING! " + message + "Vill du fortsätta?"); return response; }
  32. EXEMPEL 5

  33. 3. FRÅN FUNKTIONER TILL INTERAKTIVA WEBBSIDOR

  34. Strukturera program med funktioner • Instruktioner anger hur saker ska

    utföras • 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.
  35. Trevlig ”sidoeffekt” av att ha funktioner: Enkelt att anropa en

    funktion vid musklick
  36. 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 • Detta görs med HTML-attributet ”onclick”
  37. Anropa en funktion vid musklick • 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
  38. Event (händelser) • Event (händelser): genereras av användaren • Event

    handler (händelsehanterare): en funktion som anropas vid ett event • ”Vid händelsen musklick ska funktionen alert anropas” <button onclick="alert('Hej');"> Testa </button>
  39. EXEMPEL 1

  40. ”onclick” överallt är inte så snyggt Kan vi hantera händelser

    utan att behöva ändra vår HTML?
  41. Behov: hänvisa till delar av HTML-dokument från JavaScript

  42. Lösning DOM • Document Object Model (DOM) är en representation

    av HTML-dokumentet i JavaScript • Via DOM är det möjligt att manipulera alla egenskaper, för alla element • Med DOM kan vi (äntligen?) separera JavaScript från HTML
  43. DOM • Trädstruktur som motsvarar taggarnas ordning/nästling • Varje element

    är en ”nod” i trädet • Relationer mellan noderna beskrivs med förälder/barn och syskon
  44. Använda DOM • I JavaScript kan man alltid komma åt

    DOM via objektet ”document” • Därifrån kan vi ”navigera” genom trädet // referens till body-elementet: document.body // lista över alla element i body document.body.childNodes
  45. Att navigera i DOM • Vi antar att ”node” är

    en nod/element i DOM-trädet // Navigera mellan noder på samma nivå node.nextSibling node.previousSibling // Nedåt, barnnoder node.firstChild node.lastChild node.childNodes // alla barn // Uppåt, förälder (bara en) node.parentNode
  46. None
  47. Vi kommer fokusera på två ”genvägar” • document.getElementsByTagName – ger

    oss en lista på element av en viss typ • document.getElementById – ger direkt åtkomst till ett specifikt element
  48. EXEMPEL 2

  49. DOM och händelser • Med hjälp av DOM kan vi

    hämta referenser till element • Har man en elementreferens kan man ändra attributet ”onclick” • … och många andra händelseattribut: http://www.w3schools.com/tags/ref_eventattributes.asp
  50. EXEMPEL 3

  51. 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
  52. EXEMPEL 5