JavaScript 1 - Grunder

JavaScript 1 - Grunder

Första föreläsningen kring JavaScript

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

October 04, 2012
Tweet

Transcript

  1. JAVASCRIPT - Ge liv till statiska HTML-sidor

  2. Dagens föreläsning 1. Snabb introduktion till vad JavaScript är 2.

    JavaScripts historik 3. Variabler 4. In-/utmatning av data 5. Exempel
  3. 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
  4. Har ni sett det innan?

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

    Utformning Struktur Innehåll
  6. Exempel på JavaScript • Bildspel: http://nivo.dev7studios.com/demos/ • Dynamisk innehåll: http://gmail.com,

    http://facebook.com • Beräkningar: http://valuta.se • Validera formulär: http://byggordning.se/ • Dialogrutor: http://tibbelit.se/film • Interkativa ellement: http://mrdoob.com/projects/chromeexperiments/ball_pool/ • Spel: http://www.phoboslab.org/ztype/ • Animationer: http://dl.dropbox.com/u/25059665/CustomerForm.html • … och mycket mera!
  7. 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
  8. 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
  9. 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?
  10. 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
  11. 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
  12. 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.
  13. 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.
  14. 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
  15. 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.
  16. Uttryck (expression) - Kod som producerar ett värde • UTTRYCK

    • 5 • 3 + 5 • 20/2 + 3*4 • "Hejsan" • "Hej " + "du" • 5 > 2 • VÄRDE • 58 • 8 • 22 • "Hejsan" • "Hej du" • true
  17. 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 = 2012 – age;
  18. 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)
  19. 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
  20. 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.
  21. JavaScript • JavaScript skriv som ren text • Det kan

    skrivas antingen inbäddat direkt i HTML-koden • Eller i en separat fil, som sedan inkluderas i HTML- dokumentet
  22. 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.
  23. None
  24. 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>
  25. UTTRYCK OCH INSTRUKTIONER I JAVASCRIPT

  26. 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
  27. 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
  28. 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”
  29. 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 ||
  30. Exempel • 10 > 3 true • 3 > 10

    false • 5 == 2+3 true • "ABC" == "ABC” true • 4 > 3 && "hej" == "då” false • 4 > 3 || "hej" == "då” true
  31. 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
  32. Exempel var tal1, tal2; tal1 = 50; tal2 = 75;

    var result = tal1 + tal2; // Funkar också: var tal1 = 50, tal2 = 75;
  33. 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
  34. 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")
  35. 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
  36. 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.”); }
  37. 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.”); }
  38. 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
  39. 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”); }
  40. EXEMPEL

  41. Till sist • Eloquent JavaScript är en utmärkt - gratis

    - bok! - http://eloquentjavascript.net/ • Firebug är bra för att snabbtesta JavaScript-instruktioner