Föreläsning om Javascript i kurserna da344a och da355a vid Malmö universitet

1. Introduktion till JS
Det här kan ni nog redan...
Johan Holmberg 2019-04-02

2. Dagens föreläsning
• Bakgrund
• Våra verktyg
• Grunderna i Javascript
• Lite mer avancerad Javascript

3. Bakgrund
Vad är Javascript och varför ska vi bry oss?

4. Språket Javascript
• Ursprungligen avsett för att göra webbsidor roligare
– Bra stöd för att manipulera DOM
– Bra stöd i de flesta webbläsare
• Körs numera lite över allt
• Har numera ett bra stöd av tredjepartsbibliotek

5. Språket Javascript
• Syntaxen liknar C, Java, etc
• Löst typat – inga explicita variabeltyper
• Multiparadigm:
– Händelsedrivet
– Funktionellt
– Prototypbaserat (ungefär som objektorienterat)
– Imperativt

6. Exempel på användning
• Dynamiska webbsidor
• Serverapplikationer med Node.JS
• Mobilapplikationer med Cordova
• Spelutveckling med Unity
• Robotstyrning med Nodebots

7. Lite historik
1995: Netscape 1996: JScript 1997: ECMAScript 2005: AJAX
2008: V8-motorn 2010: Node.JS2006: JQuery 2015: ES 6

8. Våra verktyg

9. Våra verktyg
Textredigerare: Atom
Webbläsare: Chromium med Chrome Developer Tools
Onlineverktyg: JSFiddle

10. Textredigeraren Atom

11. Webbläsaren Chromium

12. Onlineverktyget JSFiddle

13. Grunderna i Javascript

14. Satser
Instruktioner i Javascript kallas statements eller satser.
Varje sats kan avslutas med ett semikolon (eller radbrytning)
console.log("hello, world!");
Flera satser kan placeras i ett block. Dessa avgränsas med
måsvingar eller kryllparenteser
{
console.log("hello");
console.log("world");
}

15. Tilldelning
Variabler får sina värden med hjälp av ett = -tecken
a = 1; // Tilldelning
b = true; // Tilldelning

16. If- och switch-satser
If-satser används för att
hantera villkor:
if (a == 2) {
// Do something
} else if (a == 4) {
// Do something
} else {
// Do something else
}
Switch-satser fungerar på
ungefär samma sätt:
switch (a) {
case 2:
// Do something
break;
case 4:
// Do something
break;
default:
// Do something else
}

17. Loopar
Två typar av loopar: while och for
while (true) {
// Do something
}
for (var i = 0; i < 10; i++) {
// Do something
}

18. Variabler
• Löst typade (sen nästa slide)
• Deklareras på tre sätt:
– var – äldre sätt, synligt för “alla”
– let – nyare sätt, synligt endast i aktuellt bloock
– const – nyare sätt, konstant och synligt i aktuellt
block

19. Operationer
// Aritmetik
a = 1 + 2; // Addition
a = 2 - 1; // Subtraktion
a = 2 * 2; // Multiplikation
a = 2 / 2; // Division
a++; // a = a + 1
a--; // a = a - 1
b = !b; // B är nu falskt
// Jämförelser
a == 2; // Är a lika med två?
a != 2; // Är a skilt från två?
a < 2; // Är a mindre än två?
a > 2; // Är a större än två?
a && b; // Är a och b båda sanna?
a && !b; // Är a sant och b falskt?
a || b; // Är a eller b sanna?

20. Variabler
var a; // Initaliserad, inget värde
var b = 1; // Initaliserad, har ett värde
let c = true; // Initaliserad, har ett värde
const d = "hello"; // Initaliserad, har ett värde
console.log(a); // Skriver ut "undefined"
console.log(b); // Skriver ut "1"
console.log(c); // Skriver ut "true"
console.log(d); // Skriver ut "hello"
b = 5; // Nytt värde!
console.log(b); // Skriver ut "5"
d = "goodbye"; // Här går det fel!

21. Datatyper
Javascript har fem datatyper (ish…)
– String
– Number
– Boolean
– Object
– Array

22. Strängar - String
En lista av tecken:
var a = "hello, world!";
Längden av en sträng:
console.log(a.length); // Skriver ut "13"
Hämta ut ett tecken ur en sträng:
console.log(a[2]); // Skriver ut "l"

23. Tal - Number
Vanliga hel- och flyttal:
var a = 1; // Heltal
var b = 1.5; // Flyttal
Och en specialare: NaN!
var c = NaN; // Inte ett nummer, men ändå ett nummer.

24. Sant/falskt - Boolean
Representerar värdena sant och falskt:
var iAmWeazel = true;
var iRBaboon = false;

25. Objekt - Object
Används för att hålla koll på många värden. Kan innehålla
vad som helst!
var teacher = {
name: "Johan",
salary: 10000,
colleague: {
name: "Anton",
younger: true
}
};

26. Vektorer/listor - Array
En typ av objekt som håller koll på värden i en specifik
ordning:
var a = new Array();
a[0] = 1;
a[1] = "two";
a.push(3);
console.log(a); // Skriver ut "[1, "two", 3]"
var b = [1, "two", 3]; // Likadan som a!
console.log(b); // Skriver ut "[1, "two", 3]"

27. Datatyper
Några bonustyper
– null
– undefined
– function

28. Lite mer avancerad
Javascript

29. Funktioner
Funktioner är återanvändbara samlingar av satser, dvs en
eller flera rader av kod. De kan ta in argument och ge ett
returvärde.
function a(a, b) {
return a + b;
}

30. Funktioner som variabler
Funktioner kan även vara variabelvärden:
var anka = function (a, b) {
return a + b;
}
console.log(anka(1, 2)); // Skriver ut "3"
Det gör att de kan anropas lite hur som helst:
var b = {
name: "addition"
};
b["add"] = anka;
console.log(b.add(1, 2)); // Skriver ut "3"

31. Synlighet
Se tavlan!

32. Closures
function makeFunc() {
var name = 'Mozilla';
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();

33. Batman!
https://www.destroyallsoftware.com/talks/wat