Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript 1 - Grunder

JavaScript 1 - Grunder

Första föreläsningen kring JavaScript

Anton Tibblin

October 04, 2012
Tweet

More Decks by Anton Tibblin

Other Decks in Education

Transcript

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

    JavaScripts historik 3. Variabler 4. In-/utmatning av data 5. Exempel
  2. 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
  3. 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!
  4. 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
  5. 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
  6. 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?
  7. 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
  8. 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
  9. 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.
  10. 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.
  11. 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
  12. 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.
  13. 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
  14. 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;
  15. 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)
  16. 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
  17. 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.
  18. 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
  19. 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.
  20. 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>
  21. 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
  22. 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
  23. 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”
  24. 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 ||
  25. Exempel • 10 > 3 true • 3 > 10

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

    var result = tal1 + tal2; // Funkar också: var tal1 = 50, tal2 = 75;
  28. 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
  29. 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")
  30. 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
  31. 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.”); }
  32. 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.”); }
  33. 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
  34. 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”); }
  35. Till sist • Eloquent JavaScript är en utmärkt - gratis

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