Programspråk

• I början fanns inga programspråk; bara ettor och nollor.

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

• Nu finns det 100(0)-tals programspråk; JavaScript är ett av dem.

let sum = 0
for (let i = 1; i <= 10; i++) {
  sum += i
}
console.log(sum) // → 55

Kortfattad historik över JavaScript

• Varför?
  • Innan mitten av 1990-talet kunde webbformulär bara valideras på servern vilket tog tid (~30 s) då 28.8 kbps modem användes.
  • Ett skriptspråk, inbäddat i webbläsare, behövdes för snabbare(!) och enklare(?) validering av data.
• När?
  • 1995 - JavaScript 1.0 med Netscape Navigator 2.
  • 1997 - JavaScript 1.1 standardiseras till ECMAScript 1.
    • Beskriver syntax, typer, satser, nyckelord, reserverade ord, operatorer och objekt.
  • 1998 - ECMAScript 2
  • 1999 - ECMAScript 3
  • 2009 - ECMAScript 5
  • 2011 - ECMAScript 5.1
  • 2015 - ECMAScript 2015 (ES6)
  • 2016 - ECMAScript 2016 (ES7)
  • 2017 - ECMAScript 2017 (ES8)
  • 2018 - ECMAScript 2018 (ES9)
  • 2019 - ...

JavaScript utan webbläsare!

• Under kursen kommer du använda Node-plattformen för att exekvera JavaScript-kod.
  • I denna kurs kommer du alltså inte arbeta med någon form av webbläsare!
• Node.js är ett öppet källkodsprojekt, som bygger på samma JavaScript-motor (V8) som webbläsaren Chrome använder.
  • Kan köras på flera plattformar som macOS, Linux och Windows.
  • JavaScript kompileras, optimeras och exekveras.
• Du kommer att under kursen skapa konsolapplikationer.
  • Du kommer fokusera på att lära dig programmera i JavaScript och inte att skapa grafiska gränssnitt eller server-applikationer.

Allt är bara ettor och nollor - data!

• Allt lagras som en lång ström med bitar; 1 eller 0.

       0   0   1    0    1    0    1    0
     128  64  32   16    8    4    2    1 // talbasen 2

• Det binära talet 00101010 är samma som det decimala talet 42, eftersom 32 + 8 + 2 = 42.
  • Binära tal har talbasen 2; decimala tal har talbasen 10.
• Strömmen av bitar behöver delas in mindre delar - värden.
• Värden kan vara av olika typer, som t.ex.:
  • tal: 42
  • strängar: 'Hej hopp!'

       01001000 01100101 01101010 01000000 01101000 01101111 01110000 01110000 00100001 // binärt värde
             72      101      106       32      104      111      112      112       33 // ASCII-värde, numeriskt värde som representerar ett tecken
              H        e        j                 h        o        p        p        ! // tecken

Datatyper

• Javascript är löst typat språk.
  • Sex enkla (primitiva) datatyper: Undefined, Null, Boolean, Number, Symbol och String.
  • En komplexare typ, Object, som är en osorterad lista med namn/värde-par.
  • Alla värden måste vara av någon av de sju typerna ovan.
• Operatorn typeof ger typen ett värde är av i form av en sträng.

      typeof 42                                     // 'number'
      typeof 3.14                                   // 'number'
      typeof 'Hej hopp!'                            // 'string'
      typeof true                                   // 'boolean'
      typeof {age: 42, name: 'Ellen Nu'}            // 'object'
      typeof function foo() { console.log('bar') }  // 'function'

  (OBS! Rent tekniskt betraktas funktioner att vara av typen Object, även om operatorn typeof returnerar strängen function.)

Datatypen Number

• Alla tal lagras som 64 bitar tal; 18 446 744 073 709 551 616 olika tal.
• Tal kan uttryckas på flera sätt.

      42      // heltal
      3.14    // decimaltal (flyttal)
      4.712e7 // exponentiella tal (4,712 ⋅ 10⁷)

• Aritmetiska operatorer fungerar på samma sätt som vanligt.

      23 + 19      // addition (→ 42)
      115 - 73     // subtraktion (→ 42)
      7 * 6        // multiplikation (→ 42)
      210 / 5      // division (→ 42)
      18 % 5       // rest (→ 3, "remainder/modulo operator")
      4 + 2 * 7    // multiplikation har högre prioritet än addition (→ 18)
      (4 + 2) * 7  // parenteser har högst prioritet (→ 42)

• Speciella tal: infinity, -infinity, NaN (Not-A-Number)

Datatypen String

• Strängar används till att representera text.

      'Kan skrivas inom apostrofer.'
      `Kan skrivas inom grav accent.`
      "Kan skrivas inom citationstecken också." // INTE i denna kurs!

  • Kursens kodstandard hindrar användning av citattecken!
• Strängar kan läggas ihop, konkateneras (latin: catena, kedja, "ihopkedjning").

      'Det går ' + 'bra att lägga ' + 'ihop strängar.'

• Nyradstecknet \n, en escape-sekvens, i en sträng används för att skapa en sträng över en eller flera rader.

      'En sträng kan delas\növer flera rader\nutan problem.' // En sträng kan delas
                                                             // över flera rader
                                                             // utan problem.

Datatypen Boolean

• Bara två värden möjliga, antingen true eller false.
• Boolska värden kan skapas med jämförelseoperatorer, <, >, <=, >=, ==, !=, === (jämför även typ), !== (jämför även typ).

      5 > 3 // true
      5 < 3 // false
      'Mats' < 'Bäst' // false, fungerar med strängar också (M = 77, B = 66)
      'Mats' < 'bäst' // true,  versaler sorteras före gemener (M = 77, b = 98)

• Logiska operatorer används för att "resonera" runt boolska värden; OCH (&&), ELLER (||) samt ICKE (!).

      true && false // false
      true || false // true
      !false        // true

Sanningstabeller för &&, || och !

• Operatorn && kräver att båda värdena är true för att resultatet ska bli true.
• Operatorn || kräver att minst ett av värdena är true för att resultatet ska bli true.

Uttryck, satser och program

• Uttryck ("expression") kan liknas med ord i en mening, där meningen i sig är en sats ("statement"). Satser skapar ett program.
• Kod som skapar ett värde kallas ett uttryck.

      42
      (4 + 8) * 3 + 6

• En sats kan innehålla ett eller flera uttryck.

      42      // 42
      '4' + 2 // '42'
      4 + '2' // '42'

  • Det är vanligt att satser avslutas med ; (semikolon), INTE i denna kurs dock!
  • Kursens kodstandard kräver att ; ALDRIG används.

(Ibland måste ; användas, det är några specialfall!)

Variabler

• Program kommer ihåg värden med hjälp av variabler.
• En variabel definieras med hjälp av nyckelordet let, eller var, följt av namnet på variabeln.

      let count                     // undefined
      let result = (4 + 8) * 3 + 8  // 44

• Efter att en variabel definierats kan den användas i uttryck.

      let result = (4 + 8) * 3 + 8       // 44
      let theMeaningOfLife = result - 2  // 42

• En variabels värde kan ändras.

      let result = (4 + 8) * 3 + 8  // 44
      result =  13                  // 13
      result = result + 29          // 42

var, function scope

let, block scope

Variablers namn

• Beskrivande namn är centralt. Håll dig till ett språk, gärna engelska.
• Kan vara vilket ord som helst bara det inte är ett nyckelord eller ett reserverat ord.
• Får innehålla tecknen a-z, A-Z, 0-9, _ och $.
  • Får inte börja med en siffra.
  • Fler tecken är tillåtna, som t.ex. åäö, men använd aldrig dessa.
• Kan bestå av flera ord. Tillämpa i så fall så kallad kamelnotation ("camelCasing").
  • Ett sätt att skriva samman ord utan bindestreck eller mellanslag.
  • Varje ord, utom det första, inleds med versal.

    let bestBookEver = `The Hitchhiker's Guide to the Galaxy`
    let theMeaningOfLife = 42

Nyckelord och reserverade ord

• Problem vid definition av en variabel? Du kanske har använt något av orden nedan.

    await          delete         import         this
    break          do             in             throw
    case           else           instanceof     typeof
    catch          export         new            try
    class          extends        let            var
    const          finally        return         void
    continue       for            static         while
    debugger       function       super          with
    default        if             switch         yield

    enum           interface      private        public
    implements     package        protected

Funktioner

• När ett program startar finns det inbyggda funktioner (och variabler).
• console.log är en funktion som skriver ut ett värde i konsolfönstret.

    let urging = '"Use the forks Luke!", Obi-Wan said in the Chinese restaurant.'
    console.log(urging) // Output: "Use the forks Luke!", Obi-Wan said in the Chinese restaurant.

• Math.min är en funktion som returnerar det minsta av flera värden.

    let min
    min = Math.min(103, 42, 57)
    console.log(min) // Output: 42

Definiera funktioner

• Funktioner kan definieras på flera sätt, t.ex. genom ett "function expression" eller en "function declaration".

    let sayHello = function () { // function expression
        let greeting = 'Hello, World!'
        return greeting
    }
    let message = sayHello()
    console.log(message) // Output: Hello, World!

    function sayHello () {  // function declaration
      let greeting = 'Hello, World!'
      return greeting
    }
    let message = sayHello()
    console.log(message) // Output: Hello, World!

• En funktion är ett uttryck som börjar med nyckelordet function.
• Mellan parenteserna kan ingen, en eller flera parametrar finnas.
• Funktionens kropp, mellan klammerparenteserna, innehåller satserna som exekveras när funktionen anropas.
• return-satsen, om den finns någon, bestämmer värdet funktionen returnerar då den anropas, saknas den returneras värdet undefined.