HT14 - F6

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.
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")