2010 JavaScript grunder

Grunder i ECMAScript 6 (EM6)

En hel del har ändrats sedan EM5.

Mer om JavaScript på MDN

Kod exempel

Kodexempel på GitHub.

Konsollfönstret, terminalfönstret

Konsollfönstret används främst vid felsökning. I ett riktigt program sker inläsning och output i hemsidan.

console.log("Skriv ut detta meddelande");

Datatyper

String

"text"
'text'

Number

34
3.14

Boolean

 true
 false

Null - inget

null

Undefined

undefined

Variabler som inte tilldelats ett värde får automatiskt detta värde.

operatorer - matematik

+ addition
- subtratiktion
* multiplikation
/ division

Arbeta med textstängar

en textstängs längd

"text".length

Sätt ihop textsträngar

"Gul" + " bil"; //blir "Gul bil"

let text = "Gul";
text + " bil"; //blir också "Gul bil"

Sätt ihop text med variabler på nytt sätt i ES6

let text = "gul";
`En ${text} bil.` //blir "En gul bil."

funktioner - metoder

"text".toUpperCase()
"text".starstWith('t');

Dokumentation för String

Biblioteket Math

Dokumentation för biblioteket Math.

Math.random() //slumptal mellan 0 och 1, [o,1)
Math.floor(35.125)  //släng decimaldelen
Math.ceil(35.125). //närmast större heltal, d.v.s 36

Biblioteket Number

Dokumentation för biblioteket Number.

Number.isInteger(34);

Kommentarer

//enradskommentar

/* Längre kommentar.
   Kan sträcka sig över flera rader.
*/

Variabler

Konstant

Kan ej få ett nytt värde.

const enKonstant = 512;

Försöker man att ge den ett nytt värde fås felmeddelandet:

TypeError: Assignment to constant variable.

Variabel

let color = "red";

Matematiska tilldelningsoperatorer

let x = 5;

x = x + 2; //öka x med 2 till 7

x += 2; //öka x med 2 till 9

x -= 1; //minska x med 1 till 8

x *= 2; //fördubblar x till 16

x /= 2; //halverar x till 8

++x; //öka x med 1 till 9

x++ //öka x med 1 till 10

--x; //minska x med 1 till 9

x--; //minska x med 1 till 8

Programflöde

if-sats

let tal = 0;
//Uppmana användaren att gissa ett favorittal på webbsidan. Görs ej här.
//Läs tal från inmatningsruta i webbsida. Görs ej här.

if (tal === 42) {
  console.log("Du gissade på rätt tal");
}
else {
  console.log("Du gissade på fel tal");
}

variablers boolska värde

Alla variabler evalueras vid behov till true eller false. Alla variabler blir true förutom följande som blir false:

false
0och -0
"" och '' (tom textsträng)
null
undefined
NaN(Not a Number)
document.all

operatorn icke

!  //är inte
!true //är false

jämförelseoperatorer

< mindre än

> större än

<= mindre eller lika med

>= större än eller lika med

=== är lika

!== är inte lika

Kom ihåg att = används för att tilldela variabler värden, till exempel.

let tal = 12;
tal = 3;

if-satser med else if

let tal = 0;
//läs in tal

if (tal < 0) {
  console.log("negativt tal");
}
else if (tal > 0) {
  console.log("positivt tal");
}
else {
  console.log("talet är noll");
}

Logiska operatorer

och

&&

eller

||

switch-sats

let color = "red";

switch (color) {
  case "red":
    console.log("En varm färg");
    break;
  case "blue":
    console.log("En kall färg");
    break;
  default:
    console.log("En annan färg");
    break;
}

ternary operator

villkor ? gör om sant : gör om falskt;

Funktioner

Funktioner kan användas för att återanvända kod, samt för att få bra struktur på koden.

arrow syntax

const funktionsnamn = () => {
  //koden för det funktionen gör
};

med en parameter

const funktionsnamn = (parameternamn) => {
  //koden för det funktionen gör
};

med flera parametrar

const funktionsnamn = (parameternamnEtt, parameternamnTva) => {
  //koden för det funktionen gör
};

med returvärde

const funktionsnamn = () => {
  let value;
  //koden för det funktionen gör med value
  return value;
};

funktionsdeklaration

Ett annat sätt att deklarera funktioner.

function funktionsnamn(parameternamn) {
  //kod för funktionen
  //kan avslutas med return
}

funktionsuttryck

eng. function expression

const funktionsnamn = function(parameternamn) {
  //kod för det funktionen gör
};

Funktionen behöver inte sparas i en variabel. Man får en anonym funktion.

Jämför med arrow syntax nedan

const funktionsnamn = (parameternamn) => {
  //koden för det funktionen gör
};

kortare syntax för funtioner

Använd inte detta. Koden blir bara svårläst. Det är lätt att det blir fel om koden ändras.

//lång syntax
const double = (number) => {
  return double * 2;
};
double(3); //returnerar 6

//kort syntax - ANVÄND EJ
const double = number =>
  double * 2;
double(3); //returnerar också 6

Räckvidd

eng. scope

globala räckvidd

eng. global scope

Variabel deklarerad utanför måsvingar {}, är tillgängliga i hela programmet.

block-räckvidd

eng. block scope

{
  let tal = 12;
}
//tal är ej tillgänglig utanför kodblocket ovan.

vektor

eng. array

let inkopslista = ["mjölk", "fil", "sylt"];

inkopslista[0]; //"mjölk"
inkopslista.length; //3
inkopslista.push("banan"); //["mjölk", "fil", "sylt", "banan"]
inkopslista.pop(); //["mjölk", "fil", "sylt"]

Mer om vektorer (eng. array) på MDN.

På samma sätt för en textsträng.

let text = "Bagare";
text[2]; //g
text.length; //6

Vektor igen som konstant

const lista = ['spik', 'hammare', 'garn', 'tråd'];

lista = ... //ej tillåtet med nu tilldelning
lista.pop(); //går bra att förändra en vektor

slingor

for-slinga

for (let i = 0; i < 3; ++i) {
  console.log(i); //0, 1, 2
}

while-slinga

let number = 1;
while (number !== 6) {
  //slumpa: 1, 2, 3, 4, 5, eller 6
  number = Math.floor(Math.random() * 6 + 1); 
  console.log(number);
}

iterator

Iteratorer är mycket kraftfulla. Mycket kan bli gjort med lite kod.

.forEach()

let primtal = [2, 3, 5];
tal.forEach(function(tal){
  console.log(primtal); //skriver ut 2, 3, 5
  //kan ej ändra på element i vektorn primtal här
});

.map()

exempel

let tal = [1, 2, 3];
let kvadrater = tal.map(function(nummer){
  return nummer * nummer;
});
//kvadrater blir [1, 4, 9]

.filter()

let tal = [2, 23, 5, 56, 73, 88, 7];
let ensiffrigaTal = tal.filter(function(nummer){
  return nummer < 10;
});

.some()

.every()

mer om iterator

Lista med iterator-funktioner på MDN

Objekt

Variabler kan grupperas i objekt. Metoder kan läggas till som verkar på objektet.

Exempel nedan.

let hero = {
  _name: "Ada", //_ används för att berätta att det är en variabel i objektet.
  _life: 8,
  //getter
  get name() {
    return this._name;
  }, 
  //setter
  set name(newName) {
    this._name = newName;
  },
  //function
  takeDamage(damage) {
    this._life -= damage;
    if (this._life <=0) {
      //dead
      this._life = 0;
    }
  }
};

console.log(hero.name);
hero.setName('Babbage');
hero.takeDamage(3);