Övning – Lägga till interaktivitet med JavaScript

10 minuter

JavaScript (eller ECMAScript) är ett programmeringsspråk som hjälper dig att lägga till interaktivitet på dina webbsidor.

Du kan till exempel använda JavaScript för att definiera det beteende som inträffar när en användare väljer en knapp, som att öppna ett popup-fönster. Med JavaScript kan du lägga till eller ta bort innehåll från en webbsida utan att läsa in det igen.

I den här lektionen konfigurerar du ett exempel på en JavaScript-fil för webbsidan. I den skapar du en knapp för att växla mellan ljusa och mörka teman. Sedan kopplar du knappen till JavaScript-kod som utför den faktiska temaväxlingen. Slutligen kontrollerar du det färdiga projektet med hjälp av webbläsarens utvecklarverktyg.

Länk till JavaScript

Precis som CSS kan du lägga till JavaScript direkt i HTML-filen, men en rekommenderad metod är att spara JavaScript i en separat fil. Om du lägger till Din JavaScript-kod i en separat fil blir det enklare att återanvända den på flera webbsidor. Du kan till exempel skapa en popup-avisering genom att lägga till följande kod var som helst i brödtexten på dina webbsidor:

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

Det är dock bättre att lägga till JavaScript-koden i en separat fil som du kan länka till varje fil som behöver dina anpassade funktioner.

Med HTML-skripttaggen <script> kan vi länka till en extern JavaScript-fil, vilket är hur du konfigurerar webbappen i den här övningen.

Öppna filen i Visual Studio Code index.html .
Leta reda på det avslutande </body> elementet och placera markören på en ny rad ovanför den. Ange script:src och tryck på Retur. Taggarna för att öppna och stänga för ett <script> element läggs till i koden.

Ändra elementet <script> för att läsa in app.js filen enligt följande exempel. Kontrollera att det finns efter det avslutande </ul> elementet för listan.

...
<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 placera elementet <script><head> i eller någon annanstans i <body>. Om du placerar elementet <script> i slutet av <body> avsnittet kan dock allt sidinnehåll visas på skärmen först, innan skriptet läses in.

Lägg till feltolerans

I HTML-filen lägger du till ett <noscript> element efter den avslutande </script> taggen, som kan användas för att visa ett meddelande om JavaScript är inaktiverat.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
Att lägga till elementet <noscript> är ett exempel på feltolerans eller graciös nedbrytning. När du använder -elementet <noscript> kan koden identifiera och planera för när en funktion inte stöds eller är tillgänglig.

Ange strikt läge

JavaScript har utformats för att vara enkelt att lära sig och gör det möjligt för utvecklaren att göra vissa misstag. JavaScript genererar till exempel inget fel när du använder en felstavad variabel och skapar i stället en ny global variabel. När du börjar lära dig JavaScript är det praktiskt att ha färre fel. Det kan dock leda till att du skriver kod som är svårare för webbläsare att optimera och svårare för dig att felsöka.

Växla till strikt läge för att få mer användbara fel när du gör misstag.

Öppna filen i app.js Visual Studio Code och ange följande:
```
'use strict';
```

Lägg till en knapp

Du behöver ett sätt att låta användarna växla mellan de ljusa och mörka temana på webbsidan. I den här övningen implementerar du den funktionen med ett HTML-element <button> .

Lägg till ett index.html element i HTML-filen (<button>). Placera knappen i ett <div> element och lägg till den strax efter slutet av listan (</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>
...
```
Observera att elementet <button> i det här exemplet har ett klassattribut som du kan använda för att tillämpa CSS-format.
Spara ändringarna i HTML-filen med kortkommandot Control+S i Windows eller Command+S på macOS.
I CSS-filen (main.css) lägger du till en ny regel med en .btn klassväljare för HTML-knappen. Om du vill göra knappfärgerna annorlunda än de allmänna ljusa eller mörka temafärgerna color anger du egenskaperna och background-color i den här regeln. När sidan visas åsidosätter dessa .btn egenskaper standardegenskaperna som anges i regeln för body CSS-filen.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

.btn Ändra sedan regeln för att lägga till några format för knappens storlek, form, utseende och placering. Följande CSS skapar en rund knapp till höger om sidrubriken.

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

Uppdatera sedan CSS för det ljusa och mörka temat. Definiera några nya variabler --btnBg och --btnFontColor, för att ange den knappspecifika bakgrundsfärgen och teckenfärgen.

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

Spara ändringarna i CSS-filen med kortkommandot Control+S i Windows eller Command+S på macOS.

Lägga till en händelsehanterare

Om du vill att knappen ska göra något när du väljer den behöver du en händelsehanterare i JavaScript-filen. En händelsehanterare är ett sätt att köra en JavaScript-funktion när en händelse inträffar på sidan. För knappen ska vi lägga till en händelsehanterare för click händelsen. Händelsehanterarfunktionen körs när händelsen click inträffar.

Innan du kan lägga till händelsehanteraren behöver du en referens till knappelementet.

I JavaScript-filen (app.js) använder du document.querySelector för att hämta knappreferensen.
```
const switcher = document.querySelector('.btn');
```
Funktionen document.querySelector använder CSS-väljare, precis som de som du använde i CSS-filen. switcher är nu en referens till knappen på sidan.
Lägg sedan till händelsehanteraren för click händelsen. I följande kod lägger du till en lyssnare för click händelsen och definierar en händelsehanterarfunktion som webbläsaren kör när händelsen click inträffar.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

I föregående kod använde toggle du metoden för att ändra <body> elementets klassattribut. Den här metoden lägger automatiskt till eller tar bort light-theme klasserna och dark-theme . Den här koden använder de mörka formaten i stället för ljusa format om du klickar och sedan ljusa format i stället för mörka om du klickar igen.

Etiketten för knappen måste dock också uppdateras för att visa rätt tema, så du måste lägga till en if instruktion för att fastställa det aktuella temat och uppdatera knappetiketten.

Så här ska din JavaScript-kod se ut med händelsehanteraren tillagd:

'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 är en JavaScript-konvention att använda kamelfall för variabelnamn med mer än ett ord, till exempel variabeln className.

Konsolmeddelande

Som webbutvecklare kan du skapa dolda meddelanden som inte visas på webbsidan, men som du kan läsa i utvecklarverktygen på fliken Konsol . Det är användbart att använda konsolmeddelanden för att se resultatet av koden.

I JavaScript-filen lägger du till ett anrop till console.log efter -instruktionen if , men i händelselyssnaren.

När du har gjort den här ändringen bör din fullständiga JavaScript-kod se ut så här.

'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 är i en JavaScript-fil i Visual Studio Code kan du använda automatisk komplettering för console.log genom att ange log och trycka på Retur.

Du kan definiera en textsträng med enkla eller dubbla citattecken runt texten.

Öppna i webbläsaren

Om du vill förhandsgranska högerklickar du index.html och väljer Öppna i standardwebbläsaren eller läser in samma webbläsarflik igen genom att trycka på F5.
Välj den nya mörka knappen för att växla till det mörka temat.
Kontrollera att allt ser korrekt ut och fungerar som förväntat. Om inte bör du granska föregående steg för att se om du missade något.

Kontrollera sidan i utvecklarverktygen

Öppna Utvecklarverktyg genom att högerklicka och välja Inspektera eller med kortkommandot F12. Du kan också använda genvägen Ctrl+Skift+I i Windows eller Linux och Alternativ+Kommando+I på macOS.
Välj fliken Element och välj fliken Formatmallar .
Välj elementet <body> . På fliken Format tittar du på det tillämpade temat. Om det aktuella temat är mörkt tillämpas formatmallarna dark-theme .

Kontrollera att det mörka temat är markerat.
Välj fliken Konsol för att se meddelandet console.log . current class name: dark-theme

Med hjälp av konsolen kan du få intressanta insikter från din JavaScript-kod. Lägg till fler konsolmeddelanden för att förstå vilka delar av koden som körs och för att känna till de aktuella värdena för andra variabler.

Mer information om konsolen finns i artikeln Översikt över konsolen.

Feedback

Var den här sidan till hjälp?