HT16 - DA156A - JavaScript forts

  • View
    282

  • Download
    1

Embed Size (px)

Transcript

  • JavaScriptLoopar, if-satser, funktioner & interaktiva webbsidor

  • Frgor kring JavaScript?

  • Dagens frelsning

    1. Repetition

    2. If-satser

    3. Loopar

    4. Funktioner

    5. Interaktiva webbsidor

  • 1. RepetitionFrn frra veckan

  • Programmering handlar om att instruera en maskin eller del av en maskin [] att utfra ett

    visst arbete.

  • Variabler

    Ett viktigt koncept r att kunna spara undan vrden

    Vrden kan lagras i variabler

    Variabler skapasmed nyckelordet var, fljt av ett namn

    var name = Anton;

    var age = 25;

  • Vrden i JavaScript

    Det finns sex typer av vrden i JavaScript

    1. Number (siffror)

    2. String (textstrngar)

    3. Boolean (booleskt vrde; sant/falskt)

    4. Array

    5. Object

    6. Undefined & null

  • Exempel frn senast

  • If-satserSelektion

  • Val / selektion

    Ofta ska program gra olika saker beroende p anvndarinmatning eller resultat av en berkning

    I JavaScript kan vi vlja att utfra en uppsttning instruktion, endast om ett uttryck r sant

    Detta grs med en if-sats

  • If

  • If Else

  • Exempel, if-sats

  • Exempel, if-sats

  • ExempelIf-satser

  • Loopar (iterationer)Gra saker flera gnger!

  • Iterationer / loopar

    Det r vanligt att behva upprepa en uppsttning instruktioner flera gnger.

    Detta r att iterera och gra med en loop.

    while-loop

    for-loop

  • Exempel, loopar

  • ExempelLoopar

  • Funktionerteranvnda samma kod!

  • Ngra inbyggda funktioner

    prompt() Hmta data frn anvndaren

    alert() Skapa en popupruta

    document.write() Utskrift p sidan

  • Vad r en funktion?

    Exempel p funktioner:- prompt()- alert()- document.write()

    Vi vet vad de gr, men inte hur.

    Vi pverkar krningen genom att skicka indata (t.ex. vad som ska skrivas ut, vilket meddelande som ska synas).

    I vissa fall (prompt()) fr vi tillbaka ett vrde.

  • Exempel 2

  • Hur anvnde vi funktionerna?

    Vi kallade p dem fr att anvnda deras funktionalitet

    Vi skickade med vrde fr att funktionen skulle generera det resultat vi nskade.

    Vi kallade p dem genom att ange deras funktionsnamn och skicka med vrdet inom ()

  • Definiera funktion

    Inom programmering r en funktion, ven subrutin, procedur, metod, underprogram eller subprogram,

    en del av ett datorprogram som kan anropas fr att utfra en viss uppgift oberoende av resten av koden.

    http://sv.wikipedia.org/wiki/Funktion_%28programmering%29

  • Funktion (function)

    Namngiven uppsttning instruktioner- Kan ha en eller fler parametrar- Kan producera ett returvrde

    Anvnds som byggstenar fr program.

    En funktion kan anropas (kras) allt man behver veta r namnet p funktionen och om det finns parametrar

  • Ett frsta exempel p en funktion

  • Parametrar

    En funktion kan ha 0 till flera parametrar

    En parameter r som en variabel, vars vrde definieras vid anropet av funktionen

    Det vrde som skickas till funktionsanrop kallas argument.

  • Exempel p parameter/argument

  • Exempel p flera parametrar/argument

  • ExempelAtt bygga funktionen showMessage

  • Returvrde

    Nr en funktion krt klart kan den returnera ett vrde

    Det vrdet blir tillgngligt dr funktionen anropas

    En funktion som inte anger ett returvrde sjlv, returneras undefined

  • Exempel 5

  • 3. Frn funktioner till interaktiva webbsidor

  • Strukturera program med funktioner

    Instruktioner anger hur saker ska utfras

    Ofta r det lttare att tnka vad som ska utfras

    Funktioner lter oss separera vad frn hur Definiera uppgiften, lista ut vilka indata som krvs, bestmma vad resultatet

    ska vara.

  • Trevlig sidoeffekt av att ha funktioner:Enkelt att anropa en funktion vid musklick

  • Anropa en funktion vid musklick

    Fr varje element p en webbsida s kan man ange JavaScript som ska kras vid ett musklick

    Typiskt anges en funktion som ska anropas

    Detta grs med HTML-attributet onclick

  • Anropa en funktion vid musklick

    Detta r en form av hndelsedriven programmering (event handling)

    Webblsaren lyssnar efter hndelser (musklick) och reagerar genom att anropa den funktion vi angivit

  • Event (hndelser)

    Event (hndelser): genereras av anvndaren

    Event handler (hndelsehanterare): en funktion som anropas vid ett event

    Vid hndelsen musklick ska funktionen alert anropas

    Testa

  • Exempel 1

  • onclick verallt r inte s snyggt

    Kan vi hantera hndelser utan att behva ndra vr HTML?

  • Behov: hnvisa till delar av HTML-dokument frn JavaScript

  • Lsning DOM

    Document Object Model (DOM) r en representation av HTML-dokumentet i JavaScript

    Via DOM r det mjligt att manipulera alla egenskaper, fr alla element

    Med DOM kan vi (ntligen?) separera JavaScript frn HTML

  • DOM

    Trdstruktur som motsvarar taggarnas ordning/nstling

    Varje element r en nod i trdet

    Relationer mellan noderna beskrivs med frlder/barn och syskon

  • Anvnda DOM

    I JavaScript kan man alltid komma t DOM via objektet document

    Drifrn kan vi navigera genom trdet

    // referens till body-elementet:document.body

    // lista ver alla element i bodydocument.body.childNodes

  • Att navigera i DOM

    Vi antar att node r en nod/element i DOM-trdet

    // Navigera mellan noder p samma nivnode.nextSiblingnode.previousSibling

    // Nedt, barnnoder

    node.firstChild

    node.lastChildnode.childNodes // alla barn

    // Uppt, frlder (bara en)node.parentNode

  • Vi kommer fokusera p tv genvgar

    document.querySelector leta upp det frsta elementet som matchar vr skning

    document.querySelectorAll leta upp alla elementet som matchar vr skning

  • ExempelJavaScript och DOM

  • DOM och hndelser

    Med hjlp av DOM kan vi hmta referenser till element

    Har man en elementreferens kan man ndra attributet onclick

    och mnga andra hndelseattribut:http://www.w3schools.com/tags/ref_eventattributes.asp

  • ExempelDOM och hndelser

  • Mjligheterna r ondliga med DOM

    Ngra saker kan vara speciellt bra att ha sett:

    Erstta innehll i element

    Lsa och skriva till formulrselement

    ndra CSS dynamiskt

  • Extra exempel