Introduktion till JavaScript

1. JavaScript
- Ge liv till statiska HTML-sidor

2. Frågor på det vi gjort hittills?
• Förra föreläsningen (layout med CSS)
• Inlämningsuppgiften?
• Ö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. Programmering handlar om att instruera en
maskin eller del av en maskin […] att utföra ett
visst arbete.

6. 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

7. Har ni sett det innan?

8. I vilket sammanhang används JavaScript?
JavaScript
CSS
HTML
Innehåll
Interaktivitet
Utformning
Struktur
Innehåll

9. Exempel på JavaScript
• Bildspel: http://wowslider.com/javascript-slideshow-quiet-rotate-demo.html
• 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
• Interaktiva element: http://mrdoob.com/projects/chromeexperiments/ball_pool/
• Spel: http://www.phoboslab.org/ztype/
• Animationer: http://codepen.io/juliangarnier/pen/idhuG
• och mycket mera!

10. 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 version av JavaScript – Jscript
• På senare dagar (2005) har ajax blivit en populärt
• Lägger till extra funktionalitet för webben och webbläsare

11. Vad kan man göra med JavaScript?
• I princip vad du vill! (som har med webbsidor att göra)
• Men det används ofta till att skapa interaktiva webbsidor
• Med interaktiv menas: Reagera på användaras handlingar och
modifiera webbsidans innehåll

12. 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?

13. 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

14. 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

15. 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.

16. 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.

18. 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

19. 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.

21. The man hit the boy with the stick
Who is holding the stick?
Requirements Management, DA254A 7.5 ECTS, VT2014,
annabella.loconsole@mah.se
21
MAN BOY

22. The man hit the boy with the stick
Who is holding the stick?
Requirements Management, DA254A 7.5 ECTS, VT2014,
annabella.loconsole@mah.se
22
MAN BOY

23. 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

24. 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 = 2016 – age;

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

26. 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://www.recepten.se/recept/pasta_carbonara.html

27. http://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/LampFlo
wchart-sv.svg/250px-LampFlowchart-sv.svg.png

29. Övning!
• Vilka instruktioner (vilken algoritm) krävs för en dator för att sortera
följande bokhög i bokstavsordning:
• Modern PHP
• Graph Databases
• Rest in Practice
• Användbarhet i praktiken
• Information Architecture
• Computer science illuminated

30. 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.

31. 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

32. 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.

34. 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>

35. Uttryck och instruktioner i
JavaScript

36. 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

37. 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

38. 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”

39. 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 ||

40. 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

41. 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

42. Exempel
var tal1, tal2;
tal1 = 50;
tal2 = 75;
var result = tal1 + tal2;
// Funkar också:
var tal1 = 50, tal2 = 75;

43. 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

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