DA156A - HT15 - JavaScript 1

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. Dagens föreläsning 1. Snabb introduktion till vad JavaScript är 2. JavaScripts historik 3. Variabler 4. In-/utmatning av data 5. Exempel
4. 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
5. Har ni sett det innan?
6. I vilket sammanhang används JavaScript? JavaScript CSS HTML Innehåll Interaktivitet Utformning Struktur Innehåll
7. 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!
8. 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
9. 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
10. 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?
11. 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
12. 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
13. 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.
14. 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.
15. JavaScript  För JavaScript sköter webbläsaren körningen  Webbläsaren är alltså en Interpretator (tolk) för JavaScript-kod  JavaScript är ett av de enklaste programspråken att komma igång med
16. 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.
17. 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
18. 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 = 2015 – age;
19. 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)
20. 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/3 c/LampFlowchart-sv.svg/250px-LampFlowchart-sv.svg.png http://www.recepten.se/recept/pasta_carbonara.html
21. 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.
22. 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
23. 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. 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>
26. Uttryck och instruktioner i JavaScript
27. 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
28. 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
29. 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”
30. 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 ||
31. 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
32. 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
33. Exempel var tal1, tal2; tal1 = 50; tal2 = 75; var result = tal1 + tal2; // Funkar också: var tal1 = 50, tal2 = 75;
34. 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
35. 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")