01 - Föreläsning - Grundläggande programmering (1DV021)

class: center, middle, lnu-background-yellow

### Grundläggande programmering (1DV021)
        # Föreläsning 1

---

class: lnu-background-cc

### Upphovsrätt för detta verk

Detta verk är framtaget av Mats Loock i anslutning till kursen Grundläggande programmering (1DV021) vid Linnéuniversitetet.

Allt innehåll i detta verk förutom fotografier, ikoner, bild på kurslitteraturen samt Linnéuniversitetets logotyp och symbol,
        är licensierad under en <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
            <img alt="Creative Commons-licens" style="border-width:0;vertical-align:middle" src="https://i.creativecommons.org/l/by/4.0/80x15.png" />
            Creative Commons Erkännande 4.0 Internationell Licens
        </a>.
        #### Du får använda detta verk så här
        - kopiera hela eller delar av innehållet
        - sprida hela eller delar av innehållet
        - visa hela eller delar av innehållet offentligt och digitalt
        - konvertera innehållet till annat format
        - du får även göra om innehållet

Om du förändrar innehållet så ta inte med fotografier, ikoner, bild på kurslitteraturen samt Linnéuniversitetets logotyp och symbol i din nya version!

Vid all användning måste du ange källan: ”Linnéuniversitetet – Grundläggande programmering (1DV021)” och
        en länk till https://coursepress.lnu.se/kurs/grundlaggande-programmering och till Creative Common-licensen här ovan.

---

# 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

<audio controls style="height:20px">
            <source src="dial-up-modem.mp3" type="audio/mpeg" />
            Din webbläsare saknar stöd för audio-element.
        </audio>

- 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)](http://www.ecma-international.org/ecma-262/6.0/)
            - 2016 - [ECMAScript 2016 (ES7)](http://www.ecma-international.org/ecma-262/7.0/)
            - 2017 - [ECMAScript 2017 (ES8)](http://www.ecma-international.org/ecma-262/8.0/)
            - 2018 - [ECMAScript 2018 (ES9)](http://www.ecma-international.org/ecma-262/9.0/)
            - 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
            ```

<img src="ascii.png" width="15%" height="15%" style="border:none;background:none;display:block;margin-left:50px;" />
        ---

# 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'
            ```
        .gray-text[.smaller[(__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 .smaller[(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`.

<div style="padding-top:1em">
            <table style="float:left; width:33%;border-collapse:collapse">
                <thead style="background-color:#eba056">
                    <tr>
                        <th colspan="3">
                            <code>&&</code> (AND, OCH)
                        </th>
                    </tr>
                </thead>
                <tbody style="text-align: center">
                    <tr>
                        <td>false</td>
                        <td>false</td>
                        <td style="border-left:1px solid #eba056">false</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>false</td>
                        <td>true</td>
                        <td style="border-left:1px solid #eba056">false</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>true</td>
                        <td>false</td>
                        <td style="border-left:1px solid #eba056">false</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>true</td>
                        <td>true</td>
                        <td style="border-left:1px solid #eba056">true</td>
                        <td> </td>
                    </tr>
                </tbody>
            </table>
            <table style="float:left; width:33%;border-collapse: collapse">
                <thead style="background-color:#57EBA1">
                    <tr>
                        <th colspan="3">
                            <code>||</code> (OR, ELLER)
                        </th>
                    </tr>
                </thead>
                <tbody style="text-align: center">
                    <tr>
                        <td>false</td>
                        <td>false</td>
                        <td style="border-left:1px solid #57EBA1">false</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>false</td>
                        <td>true</td>
                        <td style="border-left:1px solid #57EBA1">true</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>true</td>
                        <td>false</td>
                        <td style="border-left:1px solid #57EBA1">true</td>
                    </tr>
                    <tr>
                        <td>true</td>
                        <td>true</td>
                        <td style="border-left:1px solid #57EBA1">true</td>
                        <td> </td>
                    </tr>
                </tbody>
            </table>
            <table style="float:left; width:33%;border-collapse: collapse">
                <thead style="background-color:#EB57A1">
                    <tr>
                        <th colspan="3">
                            <code>!</code> (NOT, ICKE)
                        </th>
                    </tr>
                </thead>
                <tbody style="text-align: center">
                    <tr>
                        <td>false</td>
                        <td style="border-left:1px solid #EB57A1">true</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>true</td>
                        <td style="border-left:1px solid #EB57A1">false</td>
                        <td> </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div style="clear: both"></div>
        <div style="color:gray;font-size:70%;">
            <p>OCH tänk multiplikation; ELLER tänk addition; false = 0, true = 1.</p>
            <table style="float:left; width:33%;border-collapse:collapse">
                <thead style="background-color:#EFEEEC">
                    <tr>
                        <th colspan="5">
                            <code>&&</code> (AND, OCH)
                        </th>
                    </tr>
                </thead>
                <tbody style="text-align: center">
                    <tr>
                        <td>0</td>
                        <td>×</td>
                        <td>0</td>
                        <td>=</td>
                        <td>0</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>0</td>
                        <td>×</td>
                        <td>1</td>
                        <td>=</td>
                        <td>0</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>×</td>
                        <td>0</td>
                        <td>=</td>
                        <td>0</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>×</td>
                        <td>1</td>
                        <td>=</td>
                        <td>1</td>
                        <td> </td>
                    </tr>
                </tbody>
            </table>
            <table style="float:left; width:33%;border-collapse:collapse">
                <thead style="background-color:#D1D0CE">
                    <tr>
                        <th colspan="5">
                            <code>||</code> (OR, ELLER)
                        </th>
                    </tr>
                </thead>
                <tbody style="text-align: center">
                    <tr>
                        <td>0</td>
                        <td>+</td>
                        <td>0</td>
                        <td>=</td>
                        <td>0</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>0</td>
                        <td>+</td>
                        <td>1</td>
                        <td>=</td>
                        <td>1</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>+</td>
                        <td>0</td>
                        <td>=</td>
                        <td>1</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>+</td>
                        <td>1</td>
                        <td>=</td>
                        <td>1</td>
                        <td> </td>
                    </tr>
                </tbody>
            </table>
        </div>

---

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

.gray-text[.smaller[(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
            ```

.gray-text[`var`,  _function scope_]
    
        .gray-text[`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`.

---