Centralt innehåll

Fakta

1. BOM och Datum

BOM (Browser Object Model) definierar hur man kommer åt en webbläsare från JavaScript och kan ändra värden. Det finns ingen officiell standard för BOM, men de flesta moderna webbläsare har samma metoder och egenskaper för åtkomst med JavaScript.

Webbläsarfönstrets storlek
MetodBeskrivningExempel
window.innerHeight inre höjd på webbläsarfönstret. Returneras storleken i pixlar. 
window.innerWidth inre bredden på webbläsarfönstret. Returneras storleken i pixlar. 
Inre bredd/höjd inkluderar inte verktygslister (toolbars) och scrollningslister (scrollbars).

Metoder på webbläsarfönster
MetodBeskrivningExempel
window.open() öppnar ett nytt webbläsarfönster. 
window.close() stänger aktuellt webbläsarfönster. 
window.moveTo() flytta aktuellt webbläsarfönster. 
window.resizeTo() ändra storlek på aktivt webbläsarfönster. 

Egenskaper på skärmen
MetodBeskrivningExempel
window.screen.width returnerar bredden på användarens skärm i pixlar.Exempel
window.screen.height returnerar höjd på användarens skärm i pixlar.Exempel
window.screen.availWidth returnerar bredden på skärmen, minus GUI som Windows Taskbar.Exempel
window.screen.availHeight returnerar höjden på skärmen, minus GUI som Windows Taskbar.Exempel

Några metoder till
MetodBeskrivningExempel
window.location.assign() laddar ett nytt HTML-dokument.Exempel
window.history.back() samma som att klicka bakåt i webbläsaren. 
window.history.forward() samma som att klicka framåt i webbläsaren. 

Dialogrutor
MetodBeskrivningExempel
window.alert("sometext") alert box, kan klicka "OK". Exempel
window.confirm("sometext") confirm box, kan klicka "OK" eller "Avbryt".
Returnerar true om "OK" klickas, annars returneras false. 		Exempel
window.prompt("sometext","defaultText") prompt box, kan mata in värden och klicka "OK" eller "Avbryt"
Returnerar inmatat värde om "OK" klickas, annars returneras null. 		Exempel

2. JavaScript Tidshändelser (Timing Events)

JavaScript tillåter att kod körs vid definierade tidsintervall. De tidsintervallen kallas tidshändelser (timing events).

MetodBeskrivningExempel
window.setTimeout(function, milliseconds) Kör en funktion efter väntat en viss tid (i millisekunder).Exempel
window.setInterval(function, milliseconds) Samma som setTimeout, men fortsätter att anropa funktionen.Exempel
window.clearInterval(timerVariable) Stoppar anropet av funktionen som anges i setInterval.Exempel

Koden window. kan utelämnas i JavaScript-koden, dvs t.ex. window.setTimeout kan skrivas som setTimeout

Exempel 1 - setTimeout 

<!DOCTYPE html>
<html>
<body>
    <h1>JavaSript setTimeout()</h1>

    <p id="demo">Här visas när 2, 4, och 6 sekunder har passerat.</p>

    <script>
        "use strict";		

        setTimeout(myTimeout1, 2000);
        setTimeout(myTimeout2, 4000);
        setTimeout(myTimeout3, 6000);

        function myTimeout1() 
        {
            document.getElementById("demo").innerHTML = "2 sekunder";
        }
		
        function myTimeout2() 
        {
            document.getElementById("demo").innerHTML = "4 sekunder";
        }
		
        function myTimeout3() 
        {
            document.getElementById("demo").innerHTML = "6 sekunder";
        }
    </script>
</body>
</html>

Exempel 2 - setTimeout 

<!DOCTYPE html>
<html>
<body onload="startTime()">

    <h1>JavaScript Klocka</h1>

    <p id="txt"></p>

    <script>
        "use strict";		

        function startTime() 
        {
            var today = new Date();
            var hour = today.getHours();
            var min = today.getMinutes();
            var sec = today.getSeconds();
            min = checkTime(min);
            sec = checkTime(sec);
            document.getElementById('txt').innerHTML =  hour + ":" + min + ":" + sec;
            setTimeout(startTime, 1000);
        }

        function checkTime(i) 
        {
            if (i < 10) 
            {
                i = "0" + i;  // add zero in front of numbers < 10
            }
            return i;
        }
    </script>
</body>
</html>

Exempel - setInterval 

<!DOCTYPE html>
<html>
<body>
    <button onClick="setInterval(myCounter, 1000)">Starta räknare</button>

    <p id="demo">Klicka på knappen för att starta räknaren, som räknar hela tiden.</p>

    <script>
        "use strict";		

        var counter = 0;
		
        function myCounter() 
        {
            document.getElementById("demo").innerHTML = counter++;
        }
    </script> 

</body>
</html>

Exempel 1 - clearInterval 

<!DOCTYPE html>
<html>
<body>
    <button onClick="startCounter();">Starta räknare</button>

    <p id="demo">Klicka på knappen för att starta räknaren, som räknar hela tiden.</p>

    <button onClick="stopCounter();">Stoppa räknare</button>

    <script>
        "use strict";		

        var counter = 0;
        var myTimer = 0;
		
        function startCounter() 
        {
            myTimer = setInterval(myCounter, 1000);
        }

        function myCounter() 
        {
            document.getElementById("demo").innerHTML = counter++;
        }
		
        function stopCounter()
        {
            clearInterval(myTimer);
        }
</script> 
</body>
</html>

Exempel 2 - clearInterval 

<!DOCTYPE html>
<html>
<body>
    <p id="demo">Klocka</p>

    <button onclick="clearInterval(myTimer)">Stopp</button>

    <script>
        "use strict";		
        var myTimer = setInterval(myClock, 1000);

        function myClock() 
        {
            document.getElementById("demo").innerHTML = new Date().toLocaleTimeString();
        }
    </script>
</body>
</html>

3. Datum

Datum objekt skapas med new Date().

MetodExempel
new Date()Exempel
new Date(year, month, day, hours, minutes, seconds, milliseconds)Exempel
new Date(date string)Exempel
JavaScript räknar månader från 0 till 11. Januari är 0 och december är 11

Det finns fler sätt att skapa datum, se mer på w3schools.

ISO 8601 är den internationella standarden för att representera datum och tid. ISO 8601 syntaxen (YYYY-MM-DD) är också det datum-formatet som JavaScript föredrar. 

<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript ISO Dates</h1>

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

    <script>
        "use strict";		
        var d = new Date("2021-03-25");
        document.getElementById("demo").innerHTML = d;
    </script>
</body>
</html>

3.1 Tidszoner

När du ställer in ett datum, utan att ange tidszon, kommer JavaScript att använda webbläsarens tidszon. När du hämtar ett datum, utan att ange tidszon, konverteras resultatet till webbläsarens tidszon.

3.2 Hämta information från datum-objekt

MetodBeskrivningExempel
getFullYear() Get the year as a four digit number (yyyy)Exempel
getMonth() Get the month as a number (0-11)Exempel
getDate() Get the day as a number (1-31)Exempel
getHours() Get the hour (0-23)Exempel
getMinutes() Get the minute (0-59)Exempel
getSeconds() Get the second (0-59)Exempel
getMilliseconds() Get the millisecond (0-999)Exempel
getTime() Get the time (milliseconds since January 1, 1970)Exempel
getDay() Get the weekday as a number (0-6)Exempel
Date.now() millisekunder sedan 1970-01-01Exempel

3.3 Jämför datum

Exempel på att jämföra datum 

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>
    <p id="test"></p>

    <script>
        "use strict";		
        var today, someday, text;
        today = new Date();
        someday = new Date();
        someday.setFullYear(2100, 0, 14);

        if (someday > today) 
        {
            text = "Today is before January 14, 2100.";
        } 
        else 
        {
            text = "Today is after January 14, 2100.";
        }
        document.getElementById("demo").innerHTML = text;
        document.getElementById("test").innerHTML = someday - today;
    </script>
</body>
</html>

Begrepp

BOM: Browser Object Model, definierar hur webbläsaren är uppbyggd och hur man kommer åt att ändra värden med JavaScript.

Selektor: Taggnamn, class, id eller en kombination av dem som identifierar element.

setTimeout  Kör en funktion en gång efter väntat en viss tid.

setInterval  Kör en funktion med ett visst tidsintervall.

clearInterval  Stoppar en funktion som körs med ett visst tidsintervall.

Övningar

Datum

Övning 1     Övning 2

Inlämningsuppgift

login     logout    

Exit tickets

Prompt Problem

Använd AI för att lösa följande uppgift.
Användaren ska kunna ge godtycklig framtida tidsangivelse (datum & tid).
En räknare ska sedan räkna ned antal sekunder kvar till den angivna tiden.

Nedräkningen måste stanna när tiden gått ut (stoppa intervall-anropen). Ingen nedräkning vid felaktig inmatning, dvs tid som redan varit.

Angiven framtida datum och tid ska bara kontrolleras/läsas en gång, inte i varje intervall, dvs inte varje sekund. Den är ju detsamma tills ny matas in.
Om nytt framtida datum och tid skrivs in måste det föregående intervallet stoppas, annars skapas nya intervall hela tiden som kommer att köras parallellt och ta upp datorns prestanda.
Kontroll att inte tid som redan varit anges.

Styla layouten och all CSS ska ligga i en extern CSS.
Layouten ska vara responsiv och ingen horisontell skrollning vid minskning webbläsarfönstret.
All JavaScript ska ligga i en extern JavaScript-fil.
JavaScriptet ska använda addEventListener för att koppla händelser till funktioner.
All koppling till händelser (events) i HTML-koden ska göras i en init-funktion i JavaScript-filen.
Anonyma funktioner får användas, men inte anonyma funktioner i anonyma funktioner.
Definiera inte funktioner i andra funktioner.

Exempel på lösning från tidigare år

Krav:
Använd taggen <input> med en typ för datum/tid, se w3schools beskrivning av <input>

Tips:
Använd webbläsarens JavaScript-konsol (F12 - console). När saker inte fungerar är det oftast ett fel som skrivs ut i konsolen. Konsolen hjälper dig att hitta fel!

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).
- Ingen JavaScript i HTML-koden
- 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