Øvelse – Tilføj interaktivitet med JavaScript

10 minutter

JavaScript (eller ECMAScript) er et programmeringssprog, der hjælper dig med at føje interaktivitet til dine websider.

Du kan f.eks. bruge JavaScript til at definere den funktionsmåde, der sker, når en bruger vælger en knap, f.eks. at åbne et pop op-vindue. Ved hjælp af JavaScript kan du tilføje eller fjerne indhold fra en webside uden at genindlæse det.

I dette undermodul skal du konfigurere et eksempel på en JavaScript-fil til din webside. I den opretter du en knap for at skifte mellem lyse og mørke temaer. Derefter vedhæfter du knappen til JavaScript-kode, der udfører det faktiske temaskift. Til sidst skal du kontrollere det færdige projekt ved hjælp af udviklerværktøjerne i browseren.

Link til JavaScript

På samme måde som CSS kan du føje JavaScript direkte til HTML-filen, men det anbefales, at du gemmer JavaScript i en separat fil. Hvis du føjer javascriptkoden til en separat fil, bliver det nemmere at genbruge den på tværs af flere websider. Du kan f.eks. oprette en pop op-besked ved at tilføje følgende kode et vilkårligt sted i brødteksten på dine websider:

<script>alert('Hello World')</script>

Det er dog bedre at føje din JavaScript-kode til en separat fil, som du kan linke til hver fil, der har brug for din brugerdefinerede funktionalitet.

HTML-scriptkoden <script> giver os mulighed for at linke til en ekstern JavaScript-fil, hvilket er den måde, du konfigurerer din webapp på i denne øvelse.

Åbn din index.html-fil i Visual Studio Code.
Find det afsluttende </body> element, og placer markøren på en ny linje over det. Angiv script:src, og tryk på Enter. Start- og slutkoderne for et <script>-element føjes til din kode.

Rediger <script>-elementet for at indlæse app.js-filen som vist i følgende eksempel. Sørg for, at den er placeret efter det afsluttende </ul> element for listen.

...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

Du kan placere elementet <script> i <head> eller andre steder i <body>. Hvis du placerer <script>-elementet i slutningen af afsnittet <body>, kan alt sideindhold dog vises på skærmen først, før scriptet indlæses.

Tilføj fejltolerance

I HTML-filen skal du tilføje et <noscript>-element efter den afsluttende </script>-kode, som kan bruges til at få vist en meddelelse, hvis JavaScript er deaktiveret.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
Tilføjelse af elementet <noscript> er et eksempel på fejltolerance eller yndefuld forringelse. Når du bruger elementet <noscript>, kan din kode registrere og planlægge, hvornår en funktion ikke understøttes eller er tilgængelig.

Angiv streng tilstand

JavaScript er designet til at være let at lære og giver udvikleren mulighed for at foretage visse fejl. JavaScript udløser f.eks. ikke en fejl, når du bruger en forkert stavet variabel, og opretter i stedet en ny global variabel. Når du begynder at lære JavaScript, er det praktisk at have færre fejl. Det kan dog føre til at skrive kode, der er sværere for browsere at optimere og sværere for dig at foretage fejlfinding.

Skift til streng tilstand for at få mere nyttige fejl, når du laver fejl.

Åbn filen app.js i Visual Studio Code, og angiv følgende:
```
'use strict';
```

Tilføj en knap

Du skal bruge en metode til at lade brugerne skifte mellem de lyse og mørke temaer på din webside. I denne øvelse implementerer du denne funktionalitet med et HTML-<button>-element.

Tilføj et index.html-element i HTML-filen (<button>). Placer knappen i et <div> element, og tilføj den lige efter slutningen af listen (</ul>).
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...
```
Bemærk, at elementet <button> i dette eksempel har en klasse attribut, som du kan bruge til at anvende CSS-typografier.
Gem ændringerne i HTML-filen med tastaturgenvejen Control+S- i Windows eller Command+S- på macOS.
I din CSS-fil (main.css) skal du tilføje en ny regel med en .btn klassevælger for din HTML-knap. Hvis du vil gøre knapfarverne anderledes end de generelle lyse eller mørke temafarver, skal du angive egenskaberne color og background-color i denne regel. Når siden vises, tilsidesætter disse .btn egenskaber de standardegenskaber, der er angivet i reglen body i din CSS-fil.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

Rediger derefter .btn-reglen for at tilføje nogle typografier for knappens størrelse, form, udseende og placering. Følgende CSS opretter en afrundet knap til højre for sideoverskriften.

.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

Derefter skal du opdatere CSS for det lyse og mørke tema. Definer nogle nye variabler, --btnBg og --btnFontColor, for at angive den knapspecifikke baggrundsfarve og skriftfarve.

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

Gem ændringerne i din CSS-fil med tastaturgenvejen Control+S- på Windows eller Command+S- på macOS.

Tilføj en hændelseshandler

Hvis du vil have knappen til at gøre noget, når du vælger den, skal du bruge en hændelseshandler i din JavaScript-fil. En hændelseshandler er en måde at køre en JavaScript-funktion på, når der sker en hændelse på siden. Lad os tilføje en hændelseshandler for den click hændelse for knappen. hændelseshandlerfunktionen kører, når den click hændelse indtræffer.

Før du kan tilføje hændelseshandleren, skal du bruge en reference til knapelementet.

Brug app.js til at hente knapreferencen i JavaScript-filen (document.querySelector).
```
const switcher = document.querySelector('.btn');
```
Funktionen document.querySelector bruger CSS-vælgere på samme måde som dem, du brugte i din CSS-fil. switcher er nu en reference til knappen på siden.
Tilføj derefter hændelseshandleren for den click hændelse. I følgende kode tilføjer du en lytter for hændelsen click og definerer en hændelseshandlerfunktion, som browseren udfører, når den click hændelse indtræffer.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

I den foregående kode brugte du metoden toggle til at ændre klasseattributten for det <body> element. Denne metode tilføjer eller fjerner automatisk klasserne light-theme og dark-theme. Denne kode anvender de mørke typografier i stedet for lyse typografier, hvis du klikker, og derefter lyse typografier i stedet for mørke, hvis du klikker igen.

Etiketten for knappen skal dog også opdateres for at vise det korrekte tema, så du skal tilføje en if sætning for at bestemme det aktuelle tema og opdatere knapnavnet.

Sådan skal din JavaScript-kode se ud, når hændelseshandleren er tilføjet:

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

Det er en JavaScript-konvention at bruge camel case til variabelnavne med mere end ét ord. Variablen classNamef.eks. .

Konsolmeddelelse

Som webudvikler kan du oprette skjulte meddelelser, der ikke er synlige på din webside, men som du kan læse i Udviklerværktøjer under fanen Konsol. Brug konsolmeddelelser er nyttigt, hvis du vil se resultatet af din kode.

I din JavaScript-fil skal du føje et kald til console.log efter if-sætningen, men i hændelseslyttefunktionen.

Når du har foretaget denne ændring, bør din komplette JavaScript-kode se sådan ud.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

Når du er i en JavaScript-fil i Visual Studio Code, kan du bruge autofuldførelse til console.log ved at angive log og trykke på Enter.

Du kan definere en tekst streng med enkelte eller dobbelte anførselstegn omkring teksten.

Åbn i browseren

Hvis du vil have vist et eksempel, skal du højreklikke på index.html og vælge Åbn i standardbrowsereller genindlæse den samme browserfane ved at trykke på F5.
Vælg den nye knap Mørk for at skifte til det mørke tema.
Sørg for, at alt ser korrekt ud og fungerer som forventet. Hvis ikke, skal du gennemse de foregående trin for at se, om du gik glip af noget.

Tjek siden i udviklerværktøjerne

Åbn Udviklerværktøjer ved at højreklikke og vælge Undersøgeller ved hjælp af tastaturgenvejen F12. Du kan også bruge genvejen Ctrl+Skift+I på Windows eller Linux og Option+Command+I på macOS.
Vælg fanen Elementer, og vælg fanen Typografier.
Vælg elementet <body>. På fanen Typografier skal du se på det anvendte tema. Hvis det aktuelle tema er mørkt, anvendes de dark-theme typografier.

Sørg for, at det mørke tema er markeret.
Vælg fanen Konsol for at få vist console.log meddelelse current class name: dark-theme.

Ved hjælp af konsollen kan du få interessant indsigt fra din JavaScript-kode. Tilføj flere konsolmeddelelser for at forstå, hvilke dele af din kode der udføres, og for at kende de aktuelle værdier for andre variabler.

Du kan få mere at vide om konsollen i artiklen oversigt over konsol.

Feedback

Var denne side nyttig?