Kodrummet

Centralt innehåll

Fördjupning i märkspråk där det huvudsakliga innehållet är standarderna för HTML och CSS med särskilt fokus på responsiv design.
Ramverk eller klassbibliotek inom design eller skriptspråk.
Skriptspråk för webbutveckling på klientsidan och dokumentobjektsmodell.
Riktlinjer för god praxis inom webbutveckling.
Uppnående av interoperabilitet genom att följa standarder och testa på olika plattformar.
Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet.
Terminologi inom området webbutveckling.

Fakta

1. Händelser (events)

HTML DOM beskriver hur JavaScript kan reagera på olika HTML händelser.
Exempel på HTML händelser:

När användaren klickar på musen (onclick)
När en webbsida har laddats (onload)
När användaren lämnar en webbsida (onunload)
När musen befinner sig över ett element, t.ex. en bild (onmouseover)
När musen lämnar ett element, t.ex. en bild (onmouseout)
När ett inmatningsfält har ändrats, t.ex. ett textfält eller combobox (onchange)
När användaren trycker på en tangent (onkeydown)
När användaren släpper en tryckt tangent (onkeyup)
Här finns en lista på alla event

Exempel på eventet onclick

<!DOCTYPE html>
<html>
<body>
    <h1 id="header" onclick="text()">Klicka på den här texten!</h1>

    <script>
        function text()
        {
            document.getElementById("header").innerHTML = "Ooops, I did it again!";
        }
    </script>
</body>
</html>

Exempel på eventet onload

<!DOCTYPE html>
<html>
<body onload="checkCookies()">
    <h1>JavaScript HTML Events</h1>

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

    <script>
        function checkCookies() 
        {
            var text = "";
            if (navigator.cookieEnabled == true) 
            {
                text = "Cookies are enabled.";
            } 
            else 
            {
                text = "Cookies are not enabled.";
            }
            document.getElementById("demo").innerHTML = text;
        }
    </script>
</body>
</html>

Exempel på eventet onkeyup

<!DOCTYPE html>
<html>
<body>

</body>
</html>

Exempel på eventet onmouseover och onmouseout

<!DOCTYPE html>
<html>
<body>

</body>
</html>

1.1 Metoden `addEventListener()`

För att koppla en händelse till t.ex. en knapp kan man i HTML-koden skriva ett onclick-attribut:
<button id="myBtn" onclick="displayDate()">Klicka</button>

Men det finns ett bättre sätt. Ovanstående går att göra med JavaScript-kod, så att attributet onclick inte behöver användas:
document.getElementById("myBtn").addEventListener("click", displayDate);

Notera att prefixet "on" inte används i addEventListener, t.ex. används "click" i stället för "onclick".

Exempel 1 - addEventListener

<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript addEventListener()</h1>

    <p>Metoden addEventListener() kopplar ett click event till en knapp.</p>

    <button id="btn">Prova</button>

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

    <script>
        document.getElementById("btn").addEventListener("click", displayDate);

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

Exempel 2 - addEventListener

<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript addEventListener()</h1>

    <p>Metoden addEventListener() körs när användaren klickar på knappen.</p>

    <button id="btn">Prova</button>

    <script>
        document.getElementById("btn").addEventListener("click", helloWorld);

        function helloWorld() 
        {
            alert("Hello World!");
        }
    </script>
</body>
</html>

Det gör att vi helt kan koppla bort all JavaScript-kod från HTML-filen.

Vi vill ju att innehållet ska finnas i HTML-koden, utseendet i CSS-koden och beteendet i JavaScript-koden. Alla dessa ska vara skrivna i egna separat filer.

Metoden addEventListener() kopplar händelser-metoder till ett element.
Metoden addEventListener() kopplar händelse-metoder till ett element utan att skriva över tidigare händelse-metoder.
Ett element kan ha flera händelse-metoder, även t.ex. två olika händelse-metoder för click.
Det går att ta bort händelse-metoder med metoden removeEventListener()
Användningen av addEventListener() metoden gör att JavaScript-koden kan separeras från HTML-koden, vilket ökar läsbarheten.

Exempel på flera click-events kopplade till en knapp.

<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript addEventListener()</h1>

    <p>Metoden addEventListener() används för att koppla 2 events yill samma knapp.</p>

    <button id="btn">Prova</button>

    <script>
        document.getElementById("btn").addEventListener("click", myFunction);
        document.getElementById("btn").addEventListener("click", someOtherFunction);

        function myFunction() 
        {
            alert("Hello World!");
        }

        function someOtherFunction() 
        {
            alert("Den här funktionen körs också!");
        }
    </script>
</body>
</html>

2. Vänta på att dokumentet är laddat

För att förhindra att någon JavaScript-kod körs innan dokumentet är färdig-laddat (är klart), lägger man all kod i en onload-händelse.

Det är bra att vänta på att dokumentet är fullt laddat och klart innan du arbetar med det.
Här är några exempel på åtgärder som kan misslyckas om metoder körs innan dokumentet är fullt laddat:
Försöker dölja ett element som inte skapats än
Försöker få storleken på en bild som inte är laddad ännu

3. Fördelar med JavaScript i extern fil

Att placera JavaScript-koden i externa filer har några fördelar:

Det skiljer kod, dvs beteende, från innehåll och utseende, vilket ger mer läsbar kod.
Cachade JavaScript-filer kan påskynda laddning av webbsidan.

4.Gemensam övning

<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="utf-8">
    <title>Javascript</title>
</head>
<body>
 
    Fyll i anmälningsformuläret
    <form id="frm" onsubmit="sendToServer()">
        <input type="radio" name="allergy" id="hasAllergy" checked onclick="showTextarea()">Har allergi<br>
        <input type="radio" name="allergy" id="noAllergy" onclick="hideTextarea()">Ingen allergi<br>
        <textarea rows="4" cols="50" id="allergyInfo"></textarea> 
        <br/>
        <input type="submit" value="Anmäl">
    </form>

    <script>
        function showTextarea()
        {
            document.getElementById("allergyInfo").style.display = "block";
        }
		
        function hideTextarea()
        {
            document.getElementById("allergyInfo").style.display = "none";
        }
		
        function sendToServer()
        {
            alert("Skicka informationen till en server");
        }
    </script>
</body>
</html>

Se presentationen

Begrepp

Händelse: Något som programmet reagerar på, t.ex. något som en användare gör.

Event: Engelska ordet för händelse.

addEventListener Kopplar kod till en händelse.

removeEventListener Slutar reagera på en händelse.

Länkar

Presentationen

w3schools: Events

w3schools: Eventlistener

Film

Övningar

Inlämningsuppgift

Exit tickets

Separera Javascriptet till en egen fil
Ta den förra inlämningsuppgiften och lägg all JavaScript-kod i en extern fil.

Ta bort allt mellan <script></script> taggarna och flytta till en JavaScript-fil. Döp JavaScript-filen till "exempel.js". Lägg den i samma mapp som index.html

Lägg följande kod sist i <body> taggen i index.html
<script src="exempel.js"></script>

Provkör! Allt bör fungera nu, precis som tidigare.

Skriv följande först i JavaScript-filen (efter "use strict";).
window.addEventListener("load", init);

Skriv en init-funktion
function init () { //En funktion som anropas efter sidan laddats klart }

Koppla alla händelser (event), t.ex. onclick, med metoden addEventListener i init-funktionen.

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