2010 JavaScript grunder

Grunder i ECMAScript 6 (EM6)

En hel del har ändrats sedan EM5.

Mer om JavaScript på MDN

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:

  1. false
  2. 0och -0
  3. "" och '' (tom textsträng)
  4. null
  5. undefined
  6. NaN(Not a Number)
  7. 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);

Klasser