Kodrummet

1. JavaScript

JavaScript är programmeringsspråket i HTML och på webben. Det är ett av de tre språk som alla webbutvecklare måste lära sig:

HTML används för innehållet på webbsidor.
CSS för utseendet på webbsidor.
JavaScript för att programmera webbsidors beteende.

1.1 Element, taggar & attribut

HTML innehåller element, taggar och attribut.
Ett element med både start- och sluttagg, attribut och innehåll kan skrivas på den allmänna formen:
<starttagg attributnamn="värde">Innehåll</sluttagg>

<html>, <body>, <h1>, <p>, <img>   är exempel på taggar.
<html charset="utf-8">   en html-tagg med attributet charset.
<img src="bulbon.gif">   en img-tagg med attributet src.
<h1>Hej Världen</h1>   ett element med en starttagg, innehåll och sluttagg.
<p id="demo">JavaScript</p>   ett element med en starttagg med attribut, innehåll och sluttagg.
<meta charset="utf-8">  ett element där taggen är både starttagg och sluttagg.

JavaScript kan bl.a.

ändra innehållet i HTML-element
ändra egenskaper för attribut i HTML-taggar
ändra utseendet för ett HTML-element (CSS)
dölja HTML-element

Ändra innehållet i HTML-element

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript</title>
</head>
<body>
    <h1>Vad kan JavaScript göra?</h1>

    <p id="demo">JavaScript kan ändra innehållet i HTML-taggar</p>

    <!-- knapp med händelsen onclick, som innehåller JavaScript -->
    <!-- JavaScriptet körs när knappen trycks -->
    <button onclick='document.getElementById("demo").innerHTML = "Hej, JavaScript!"'>
        Klicka här!
    </button>
</body>
</html>

Ändra egenskaper för attribut i HTML-taggar

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript</title>
</head>
<body>
    <h1>Vad kan JavaScript göra?</h1>

    <p>JavaScript kan ändra HTML-taggars attributvärden.</p>

    <p>JavaScript ändrar src-attributet på img-taggen.</p>

    <!-- Bilden för img-taggen byts till pic_bulbon.gif -->
    <button onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulbon.gif'">
        Tänd lampan
    </button>

    <img id="myImage" src="https://www.w3schools.com/js/pic_bulboff.gif" style="width:100px">

    <!-- Bilden för img-taggen byts till pic_bulboff.gif -->
    <button onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulboff.gif'">
        Släck lampan
    </button>
</body>
</html>

Ändra utseendet för ett HTML-element (CSS)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript</title>
</head>
<body>
    <h1>Vad kan JavaScript göra?</h1>

    <p id="demo">JavaScript kan ändra utseendet för ett HTML-element.</p>

    <button onclick="document.getElementById('demo').style.fontSize='35px'">
        Klicka här!
    </button>
</body>
</html>

Dölja HTML-element

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript</title>
</head>
<body>
    <h1>Vad kan JavaScript göra?</h1>

    <p id="demo">JavaScript kan gömma HTML-element.</p>

    <!-- p-elementets style-värde för display sätts till none -->
    <button onclick="document.getElementById('demo').style.display='none'">
        Klicka här!
    </button> 
</body>
</html>

2. JavaScript Syntax

Programmeringsspråket JavaScript skiljer sig lite i syntax från Python, men har många likheter i logik och tankesätt.

2.1 Kommentarer

För att skriva en kommentar på resten av raden används //
För att kommentera ett stycke används /* och */

2.2 Variabler

Variabler i JavaScript deklareras med nyckelordet var (eller let).
Notera att inga datatyper anges vid deklaration. De bestäms av JavaScript vid tilldelning. Det är också skillnad på stora och små bokstäver, t.ex. är variabelnamnen medelvärde och medelVärde två olika variabelnamn.

var antalBilar; // Deklarerar en variabel med namnet antalBilar
antalBilar = 3; // antalBilar tilldelas värdet 3 och får datatypen heltal

var pris; // Deklarerar variabeln pris
pris = 3.5; // pris tilldelas värdet 3.5 och får datatypen decimaltal

var namn;  // Deklarerar variabeln pris
namn = "Nisse"; // namn tilldelas värdet "Nisse" som får datatypen sträng

// Det går att deklarera och tilldela värdet i en sats
var antalCyklar = 3;
var kostnad = 42.1;
var gata = "Storgatan";

Notera också att varje sats avslutas med ett semikolon (;)

2.3 Operatorer

Operatorer i JavaScript

Typ	Operator
Aritmetik-operatorer:	`+ - * / ** % ++ --`
Tilldelnings-operatorer:	`= += -= = /= %= *=`
Jämförelse-operatorer:	`== === != !== > < >= <=`
Logik-operatorer:	`&& \|\| !`

// 3 olika sätt att öka variabeln antals värde med 1
var antal = 0;

antal = antal + 1;

antal += 1;

antal++;

// 3 olika sätt att minska variabeln antals värde med 1
var antal = 10;

antal = antal - 1;

antal -= 1;

antal--;

// Kontrollera likhet utan och med hänsyn till datatypen
var antal = 10;
var antalStr = "10";

alert(antal == antalStr);

alert(antal === antalStr);

// Logiska operatorer	
// && betyder and
// || betyder or
// ! betyder not

2.4 Selektioner & Iterationer

Selektioner (jämförelser) och iterationer (uppreppningar) i JavaScript.

Exempel på if-satsen

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript</title>
</head>
<body>
    <h1>JavaScript if-satsen</h1>

    <p id="demo"></p>

    <script>
        "use strict";
        var hour = new Date().getHours(); 
        var greeting;

        if (hour < 10)
        {
            greeting = "Good morning";
        } 
        else if (hour < 18)
        {
            greeting = "Good day";
        } 
        else 
        {
            greeting = "Good evening";
        }
    
        document.getElementById("demo").innerHTML = greeting;
    </script>
</body>
</html>

Exempel på for-loopen

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript</title>
</head>
<body>
    <h1>JavaScript for-loop</h1>

    <p id="demo"></p>

    <script>
        "use strict";
        var text = "";

        for (var i = 0; i < 5; i++) 
        {
            text += "The number is " + i + "<br>";
        }

        document.getElementById("demo").innerHTML = text;
    </script>
</body>
</html>

Exempel på while-loopen

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript</title>
</head>
<body>
    <h1>JavaScript while-loop</h1>

    <p id="demo"></p>

    <script>
        "use strict";
        var text = "";
        var i = 0;
        while (i < 10) 
        {
            text += "<br>The number is " + i;
            i++;
        }
        document.getElementById("demo").innerHTML = text;
    </script>
</body>
</html>

Läs på om Scope - räckvidd på variabler

2.6 Stränghantering

Nästan alla programspråk har funktioner för stränghantering.
Exempel på längden på en sträng.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript</title>
</head>
<body>
    <h1>JavaScript stränglängd</h1>

    <p>length returnerar längden på en sträng</p>

    <p id="demo"></p>

    <script>
        "use strict";
        var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ";
        document.getElementById("demo").innerHTML = txt.length;
    </script>
</body>
</html>

Mer om vilka funktioner JavaScript har för att hantera strängar kan du läsa om på länken, stränghantering i JavaScript (skumma igenom).

2.7 Javascript funktioner

En funktion är ett avsnitt kod som utför en viss uppgift. Koden i funktionen körs bara när funktionen anropas från JavaScript-koden.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript</title>
</head>
<body>
    <h1>Funktioner</h1>

    <p>Funktionen beräknar produkten av två tal och returnerar resultatet</p>

    <p id="demo"></p>

    <script>
        // Skriv en funktion
        // Börja alltid med nyckelordet function
        // sedan skriver du ett beskrivande namn för funktionen 
        // sedan bestämmer du antal parametrar och beskrivande namn för dem
        function multiplikation(faktor1, faktor2) 
        {
            var produkt = faktor1 * faktor2;
            return produkt;
        }

        // Här sker anropet till funktionen: multiplikation(4, 3)
        document.getElementById("demo").innerHTML = multiplikation(4, 3);
    </script>
</body>
</html>

2.8 Strict mode

"use strict"; ska alltid skrivas överst i JavaScript-koden. Det gör bl.a. att man måste deklarera variabler. Genom att deklarera variabler förhindrar man svårhittade fel.
Här kan du läsa mer om Strict mode.

2.9 Debugga i JavaScript

Debugging (felsökning) innebär att testa, hitta och rätta buggar (fel) i datorprogram.
Normalt aktiverar du felsökning i din webbläsare med F12 och väljer "Konsol" i felsökningsmenyn.
Det går också att använda metoden console.log() för att skriva värden i felsökningsfönstret.

Läs mer om debugging: Hur felsöker man Javascript?

Centralt innehåll

Skriptspråk för webbutveckling på klientsidan och dokumentobjektsmodell.
Riktlinjer för god praxis inom webbutveckling.
Webben som plattform för applikationer av olika slag.
Terminologi inom området webbutveckling.

Fakta

Begrepp

Tagg: Ett märkord/instruktion till hur webbläsaren ska visa något.

Attribut: Extra information i en tagg.

Element: Start och sluttagg och innehållet mellan dem.

Kompilering: Källkoden översätts till maskinkod innan programmet exekveras.

Interpretering: Källkoden översätts till maskinkod medans programmet exekveras.

Strict mode ("use strict"): Strikt mode, innebär t.ex. att alla variabler måste deklareras.

getElementById Hämtar ett element mha elementets id.

innerHTML Innehållet i ett HTML-element.

alert Visar en dialogruta.

console.log Skriver text i konsolen i debugger-fönstret (F12).

Länkar

JavaScript.com

w3schools: JavaScript tutorial

w3schools: JavaScript reference

Obligatoriska Övningar

HTML-taggen <script> kan egentligen placeras var som helst i head eller body, men bör läggas sist i body. Det gör att tiden för att ladda koden görs sist, dvs efter att webbsidans synliga delar laddats. Det innebär att webbsidan blir snabbare synlig för användarna.
HTML-taggen <script>, där man lägger JavaScript-kod bör alltså ligga sist i bodyn.
Övning: placering av script-taggen

Med koden window.alert kan man visa en dialogruta.
Övning: window.alert

Med koden document.getElementById kan man ändra innehållet i HTML-element.
Övningar på document.getElementById
Övning 1 Övning 2 Övning 3 Övning 4
Övning 5 Övning 6

En funktion är ett avsnitt kod som utför en viss uppgift. Koden i funktionen körs bara när funktionen anropas från JavaScript-koden.
Övningar på funktioner:
Övning 1 Övning 2 Övning 3

HTML event är "händelser" som sker på HTML-element. De kan t.ex. användas för att utföra något:
- när en användare klickar på en knapp
- varje gång en sida laddas
- när en sida stängs
- när en användare matar in data

Några vanliga event
Event	Beskrivning
`onclick`	Användaren har klickat på ett HTML-element
`onmouseover`	Användaren flyttar musmarkören över ett HTML-element
`onmouseout`	Användaren flyttar musmarkören från ett HTML-element
`onkeydown`	Användaren klickar en knapp på tangentbordet
`onload`	Webbläsaren har laddat en sida
`onchange`	Ett HTML-element har ändrats

Här finns en lista på alla event (skumma igenom)

Övningar på events:
Övning 1     Övning 2     Övning 3     Övning 4
Övning 5     Övning 6     Övning 7     Övning 8
Övning 9     Övning 10   Övning 11   Övning 12
Övning 13   Övning 14   Övning 15

Inlämningsuppgift

Exit tickets

Stränglängd
Skapa en webbsida med ett textfält och en knapp. Användaren skriver in valfri text i textfältet och klickar sedan på knappen. Då visas hur många tecken som skrivits in i textfältet, använd alert.

Kontrollera:
- Validera HTML
- Validera CSS (om du har någon)
- Använd strict mode.
- Inga fel i konsolen när JavaScriptet körs (F12 - console).
- du har indenterat html & css koden
- startsidan heter index.html
- filnamn med små bokstäver, inga mellanslag eller åäö
- Som med all programmering ska koden vara indenterad, ha bra variabelnamn och vara översiktligt kommenterad.

Lämna in:
Packa (zippa) ihop projektet och lämna in den packade filen i Unikum