HT14 - F6

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

HT14 - F6

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

September 23, 2014
Tweet

Transcript

  1. JAVASCRIPT - Ge liv till statiska HTML-sidor

  2. Frågor på det vi gjort hittils? • Inlämningsuppgiften? • Layout

    (förra föreläsningen)? • Övrigt?
  3. Uppsnappat från laborationen • Attributet ”id” måste vara unikt •

    Man kan ha flera klasser för ett element. T.ex. <div class=”klass1 klass2 klass3”></div> • Man kan ge flera klasser samma egenskaper: klass1, klass2{ text-align:center; }
  4. Dagens föreläsning 1. Snabb introduktion till vad JavaScript är 2.

    JavaScripts historik 3. Variabler 4. In-/utmatning av data 5. Exempel
  5. Vad är JavaScript? • En teknik för att utveckla interaktiva

    webbsidor • Ett programspråk inbäddat i webbläsare http://en.wikipedia.org/w/index.php?title=File:Unofficial_JavaScript_logo_2.svg&page=1
  6. Har ni sett det innan?

  7. I vilket sammanhang används JavaScript? JavaScript CSS HTML Innehåll Interaktivitet

    Utformning Struktur Innehåll
  8. Exempel på JavaScript • Bildspel: http://demo.dev7studios.com/nivo-slider/ • Dynamisk innehåll: http://gmail.com,

    http://facebook.com, https://twitter.com/ • Beräkningar: http://valuta.se • Validera formulär: http://yensdesign.com/tutorials/validateform/ • Dialogrutor: http://tibbelit.se/film • Interkativa ellement: http://mrdoob.com/projects/chromeexperiments/ball_pool/ • Spel: http://www.phoboslab.org/ztype/ • Animationer: http://codepen.io/juliangarnier/pen/idhuG och mycket mera!
  9. JavaScript - Historik • Utvecklades av Netscape under mitten av

    90-talet • Har inget med Java att göra – det är ett eget programmeringsspråk • Microsoft skapade sin egen verision av JavaScript – Jscript • På senare dagar (2005) har ajax blivit en populärt • Lägger till extra funktionalitet för webben och webbläsare
  10. Vad kan man göra med JavaScript? • I princip vad

    du vill! • Men det används ofta till att skapa interaktiva webbsidor • Med interaktiv menas: Reagera på användaras handlingar och modifiera webbsidans innehåll
  11. Programmering • Att ge instruktioner till en maskin så att

    den utför det man vill • Del av att utveckla programvara • Kreativ problemlösande verksamhet • Konstform?
  12. Programspråk • En dator kan endast utföra ett begränsat antal

    instruktioner • Varje instruktion är mycket begränsad, t.ex. - Addera innehållet i två minnesutrymmen - Flytta innehållet i ett minnesutrymme till ett annat utrymme
  13. Maskinkod för att skriva ut 1+2+…+10=55 00110001 00000000 00000000 00110001

    00000001 00000001 00110011 00000001 00000010 01010001 00001011 00000010 00100010 00000010 00001000 01000011 00000001 00000000 01000001 00000001 00000001 00010000 00000010 00000000 01100010 00000000 00000000
  14. Lågnivåspråk • Språk som behöver liten eller ingen bearbetning för

    att exekveras på en dator • Maskinkod – kod som maskinen kan exekvera direkt • Assemblerspråk – kräver en viss översättning, s.k. assemblering, innan programmet kan exekveras.
  15. Högnivåspråk • Mer anpassade för människor att läsa/skriva • Måste

    översättas (interpreteras eller kompileras) till maskinkod innan det kan exekveras. • En instruktion i ett högnivåspråk leder ofta till ett antal instruktioner i maskinkod. • JavaScript, Java, C#, C++, Python, Ruby, ASP, JSP – och 5000(?) andra.
  16. JavaScript • För JavaScript sköter webbläsaren körningen • Webbläsaren är

    alltså en intertretator (tolk) för JavaScript- kod • JavaScript är ett av de enklaste programspråken att komma igång med
  17. Programspråk • Programspråk är, till skillnad från t.ex. svenska och

    engelska, formella språk • De ska uttrycka något utan tvetydighet. • Men programspråk delar vissa likheter med naturliga språk – vokabulär och grammatik. • Även uttryck och instruktioner.
  18. Uttryck (expression) - Kod som producerar ett värde • UTTRYCK

    • ”5”+”8” • 3 + 5 • 20/2 + 3*4 • "Hejsan" • "Hej " + "du" • 5 > 2 • VÄRDE • 58 • 8 • 22 • "Hejsan" • "Hej du" • true
  19. Instruktion (statement) • Ett program består av en lista instruktioner

    • En instruktion består av minst ett uttryck och avslutas med ett semikolon ”;” 5; alert(”Hej och välkommen”); var birthYear = 2014 – age;
  20. Att skapa ett program • Uppgiftsformulering, vad är det för

    uppgift som ska lösas? • Vilka steg behöver utföras för att lösa uppgiften? • Vilka instruktioner kan användas för att utföra varje delsteg (algoritm)
  21. Algoritm • En beskrivning över hur man löser ett problem.

    Algoritmen består av ett antal instruktioner och beskriver i vilken ordning instruktionerna ska utföras. http://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/LampFl owchart-sv.svg/250px-LampFlowchart-sv.svg.png http://www.recepten.se/recept/pasta_carbonara.html
  22. Att tänka på • Uppgiftsformulering, vad är det för uppgift

    som ska lösas? Formulera uppgiften i termer av vad en dator kan utföra. Avgränsa problemet, vad är en del av uppgiften? Vad ingår inte? • Algoritmkonstruktion, vilka algoritmer är de mest lämpliga för detta problem? Konstruera strukturen på programmet och skriv ner så kallad pseudokod. Detta är kreativ problemlösning. • Kodning, översätt pseudokoden till ett programmeringsspråk t.ex. JavaScript eller Python • Dokumentation, beskriva din lösning både i löpande text, med hjälp av UML och som kommentarer i programmet. • Verifikation, är programmet byggt på ett bra sätt så att det löser uppgiften utan att fel uppstår och det är lätt att underhålla. • Validering, är användaren nöjd med hur programmet fungerar. Underhåll, åtgärda buggar, förbättra och lägg till funktionalitet. • Underhåll, åtgärda buggar, förbättra och lägg till funktionalitet.
  23. JavaScript • JavaScript skrivs som ren text • Det kan

    skrivas antingen inbäddat direkt i HTML-koden • Eller i en separat fil, som sedan inkluderas i HTML- dokumentet
  24. Inbäddat skript • HTML-elementet <script> används för att definiera ett

    JavaScript-block. - Jämför detta med att inkludera inbäddad CSS-mall med hjälp av <style> • Elementet <script> kan placeras var som helst i HTML- dokumentet, inte bara i <head> • JavaScript-koden körs på den plats JavaScript-elementet finns.
  25. None
  26. Externt skript • JavaScript-koden sparas i en separat fil, med

    filändelsen .js • Skriptfilen inkluderas i HTML-dokumentet, också med hjälp av elementet <script> <script src="minkod.js" type="text/javascript"></script>
  27. UTTRYCK OCH INSTRUKTIONER I JAVASCRIPT

  28. Datatyper i JavaScript • Det finns sex datatyper i JavaScript

    1. Number (siffror) 2. String (textsträngar) 3. Boolean (booleskt värde; sant/falskt) 4. Array 5. Object 6. Undefined & null
  29. Nummer (number) • Kan vara heltal (integer) eller decimaltal (float)

    • Kan vara negativa eller positiva • Stödjer de vanliga matematiskta operatorerna 3*5 + 2.5 17.5 115*4 – 4 + 88 / 2 500
  30. Strängar (string) • En uppsättning av (i princip) vilka tecken

    som helst • Skapas med citattecken ” eller apostrofer ’ • Kan läggas hop (konkateneras) • Ex. ”Hello World” ’Hello World’ ’Mister ’ + ”X”
  31. Booleanskt värde (boolean) • Representerar antingen sant (true) eller falskt

    (false) • Används ofta vid jämförelser Större än > Mindre än < Exakt lika == Inte lika != • Flera jämförelser kan kombineras och && eller ||
  32. Booleanskt värde - exempel • 10 > 3 true •

    3 > 10 false • 5 == 2+3 true • "ABC" == "ABC” true • 4 > 3 && "hej" == "då” false • 4 > 3 || "hej" == "då” true
  33. 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; // skapa variabel name = "Bob"; // tilldela värde var age = 40; // skapa och tilldela samtidigt
  34. Exempel var tal1, tal2; tal1 = 50; tal2 = 75;

    var result = tal1 + tal2; // Funkar också: var tal1 = 50, tal2 = 75;
  35. Inmatning/utmatning • Vi kan lagra värden och göra beräkningar, men

    hur ska vi hämta data från användaren och hur visas resultaten? • JavaScript har inbyggda funktioner för att: - fråga användaren efter ett värde - visa ett värde i en ruta - skriva ett värde till HTML-dokumentet - läsa och modifiera innehåll i HTML-dokument
  36. Exempel • // Visa ruta att skriva i och spara

    • // i variabeln `svar`: • var svar; • svar = prompt("Var god skriv") • // Visa meddelanderuta med texten • // ‘Hej och välkommen’: • alert("Hej och välkommen"); • // Skriv texten ‘Bonustext’ till • // HTML-dokumentet • document.write("Bonustext")