Oefening: interactiviteit toevoegen met JavaScript

  • 10 minuten

JavaScript (of ECMAScript) is een programmeertaal waarmee u interactiviteit aan uw webpagina's kunt toevoegen.

U kunt bijvoorbeeld JavaScript gebruiken om het gedrag te definiëren dat zich voordoet wanneer een gebruiker een knop selecteert, zoals het openen van een pop-upvenster. Met JavaScript kunt u inhoud toevoegen aan of verwijderen van een webpagina zonder deze opnieuw te laden.

In deze les stelt u een voorbeeld van een JavaScript-bestand in voor uw webpagina. Hierin maakt u een knop om te schakelen tussen lichte en donkere thema's. Vervolgens koppelt u de knop aan JavaScript-code waarmee de werkelijke themawisseling wordt uitgevoerd. Ten slotte controleert u het voltooide project met behulp van de ontwikkelhulpprogramma's van uw browser.

Net als CSS kunt u JavaScript rechtstreeks toevoegen aan het HTML-bestand, maar een aanbevolen procedure is om uw JavaScript op te slaan in een afzonderlijk bestand. Door uw JavaScript-code toe te voegen aan een afzonderlijk bestand, kunt u deze eenvoudiger opnieuw gebruiken op verschillende webpagina's. U kunt bijvoorbeeld een pop-upwaarschuwing maken door overal in de hoofdtekst van uw webpagina's de volgende code toe te voegen:

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

Het is echter beter om uw JavaScript-code toe te voegen aan een afzonderlijk bestand dat u kunt koppelen aan elk bestand dat uw aangepaste functionaliteit nodig heeft.

Met de HTML-scripttag <script> kunnen we een koppeling maken naar een extern JavaScript-bestand. Dit is de manier waarop u uw web-app in deze oefening configureert.

  1. Open uw index.html bestand in Visual Studio Code.

  2. Zoek het afsluitende </body> element en plaats de cursor op een nieuwe regel erboven. Enter en druk op Enterscript:src. De openings- en slottags voor een <script> element worden toegevoegd aan uw code.

  3. Wijzig het <script>-element om je app.js-bestand te laden, zoals getoond in het volgende voorbeeld. Zorg ervoor dat het geplaatst is na het afsluitende </ul>-element voor de lijst.

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

U kunt het <script> element in de <head> plaatsen of elders in de <body>. Als u het <script> element echter aan het einde van de <body> sectie plaatst, kan alle pagina-inhoud eerst op het scherm worden weergegeven voordat het script wordt geladen.

Fouttolerantie toevoegen

  1. Voeg in uw HTML-bestand een <noscript> element toe na de afsluitende </script> tag, die kan worden gebruikt om een bericht weer te geven als JavaScript is gedeactiveerd.

    <script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>

    Het toevoegen van het <noscript> element is een voorbeeld van fouttolerantie of respijtieve degradatie. Wanneer u het <noscript> element gebruikt, kan uw code detecteren en plannen wanneer een functie niet wordt ondersteund of beschikbaar is.

Strikte modus instellen

JavaScript is ontworpen om eenvoudig te leren en stelt de ontwikkelaar in staat om bepaalde fouten te maken. JavaScript genereert bijvoorbeeld geen fout wanneer u een verkeerd gespelde variabele gebruikt en maakt in plaats daarvan een nieuwe globale variabele. Wanneer u Begint met het leren van JavaScript, is het handig om minder fouten te maken. Het kan echter leiden tot het schrijven van code die moeilijker is voor browsers om te optimaliseren en moeilijker voor u om fouten op te sporen.

Schakel over naar de strenge modus om handigere foutmeldingen te krijgen wanneer u fouten maakt.

  • Open het app.js bestand in Visual Studio Code en voer het volgende in:

    'use strict';

Een knop toevoegen

U hebt een manier nodig om uw gebruikers te laten schakelen tussen de lichte en donkere thema's op uw webpagina. In deze oefening implementeert u die functionaliteit met een HTML-element <button> .

  1. Voeg in uw HTML-bestand (index.html) een <button> element toe. Plaats de knop in een <div> element en voeg deze toe vlak na het einde van de lijst (</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>
...

    U ziet dat het <button> element in dit voorbeeld een klassekenmerk heeft dat u kunt gebruiken om CSS-stijlen toe te passen.

  2. Sla de wijzigingen in uw HTML-bestand op met de sneltoets Control+S in Windows of Command+S in macOS.

  3. Voeg in uw CSS-bestand (main.css) een nieuwe regel toe met een .btn klassekiezer voor uw HTML-knop. Als u de knopkleuren wilt laten afwijken van de kleuren van het algemene lichte of donkere thema, stelt u de color en background-color eigenschappen in deze regel in. Wanneer uw pagina wordt weergegeven, overschrijven deze .btn eigenschappen de standaardeigenschappen die zijn ingesteld in de body regel van uw CSS-bestand.

    .btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

  4. Wijzig vervolgens de .btn regel om bepaalde stijlen toe te voegen voor de grootte, vorm, vormgeving en plaatsing van de knop. Met de volgende CSS wordt rechts van de paginakop een ronde knop gemaakt.

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

  5. Werk vervolgens de CSS voor het lichte en donkere thema bij. Definieer enkele nieuwe variabelen --btnBg en --btnFontColorgeef de knopspecifieke achtergrondkleur en tekstkleur op.

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

  6. Sla de wijzigingen in uw CSS-bestand op met de sneltoets Control+S in Windows of Command+S in macOS.

Een gebeurtenis-handler toevoegen

Als u de knop iets wilt laten doen wanneer u deze selecteert, hebt u een gebeurtenis-handler nodig in uw JavaScript-bestand. Een gebeurtenis-handler is een manier om een JavaScript-functie uit te voeren wanneer een gebeurtenis op de pagina plaatsvindt. Voor de knop gaan we een gebeurtenis-handler voor de click gebeurtenis toevoegen. De functie gebeurtenis-handler wordt uitgevoerd wanneer de click gebeurtenis plaatsvindt.

Voordat u de gebeurtenis-handler kunt toevoegen, hebt u een verwijzing naar het knopelement nodig.

  1. Gebruik app.js in uw JavaScript-bestand (document.querySelector) om de knopreferentie op te halen.

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

    De document.querySelector functie maakt gebruik van CSS-selectors, net zoals de selectors die u in uw CSS-bestand hebt gebruikt. switcher is nu een verwijzing naar de knop op de pagina.

  2. Voeg vervolgens de gebeurtenis-handler voor de click gebeurtenis toe. In de volgende code voegt u een listener voor de click gebeurtenis toe en definieert u een gebeurtenis-handlerfunctie die door de browser wordt uitgevoerd wanneer de click gebeurtenis plaatsvindt.

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

In de voorgaande code hebt u de toggle methode gebruikt om het klassekenmerk van het <body> element te wijzigen. Met deze methode worden de light-theme en dark-theme klassen automatisch toegevoegd of verwijderd. Met deze code worden de donkere stijlen toegepast in plaats van lichte stijlen als u klikt en vervolgens lichte stijlen in plaats van donker als u nogmaals klikt.

Het label voor de knop moet echter ook worden bijgewerkt om het juiste thema weer te geven, dus moet u een if instructie toevoegen om het huidige thema te bepalen en het knoplabel bij te werken.

Hier ziet u hoe uw JavaScript-code eruit moet zien met de gebeurtenis-handler toegevoegd:

'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";
    }
});

Het is een JavaScript-conventie om camelCase te gebruiken voor variabelenamen met meer dan één woord; bijvoorbeeld de variabele className.

Consolebericht

Als webontwikkelaar kunt u verborgen berichten maken die niet zichtbaar zijn op uw webpagina, maar die u kunt lezen in de ontwikkelhulpprogramma's op het tabblad Console . Het gebruik van consoleberichten is handig om het resultaat van uw code te zien.

Voeg in uw JavaScript-bestand een aanroep toe aan console.log na de if instructie, maar binnen de event listener.

Nadat u deze wijziging hebt aangebracht, moet uw volledige JavaScript-code er als volgt uitzien.

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

Wanneer u zich in een JavaScript-bestand in Visual Studio Code bevindt, kunt u automatisch aanvullen console.log gebruiken door enter in te voeren log en op Enter te drukken.

U kunt een tekenreeks definiëren met enkele of dubbele aanhalingstekens rond de tekst.

Openen in de browser

  1. Als u een voorbeeld wilt bekijken, klikt u met de rechtermuisknop en index.html selecteert u Openen in standaardbrowser of laadt u hetzelfde browsertabblad opnieuw door op F5 te drukken.

    Schermopname van de website met de nieuwe knop.

  2. Selecteer de nieuwe knop Donker om over te schakelen naar het donkere thema.

    Schermopname van de website na het overschakelen naar een donker thema.

  3. Zorg ervoor dat alles er correct uitziet en werkt zoals verwacht. Als dat niet het geval is, moet u de voorgaande stappen bekijken om te zien of u iets hebt gemist.

Controleer de pagina in de ontwikkelhulpprogramma's

  1. Open Ontwikkelhulpprogramma's door met de rechtermuisknop te klikken en Inspect te selecteren of met de sneltoets F12. U kunt ook de sneltoets Ctrl+Shift+I gebruiken in Windows of Linux en Option+Command+I in macOS.

  2. Selecteer het tabblad Elementen en selecteer het tabblad Stijlen .

  3. Selecteer het <body> element. Bekijk op het tabblad Stijlen het toegepaste thema. Als het huidige thema donker is, worden de dark-theme stijlen toegepast.

    Zorg ervoor dat het donkere thema is geselecteerd.

  4. Selecteer het tabblad Console om het console.log bericht weer te geven. current class name: dark-theme

Schermopname van het browservenster met de website en de console Developer Tools geopend met het consolebericht.

Met behulp van de console krijgt u interessante inzichten uit uw JavaScript-code. Voeg meer consoleberichten toe om te begrijpen welke onderdelen van uw code worden uitgevoerd en om de huidige waarden van andere variabelen te kennen.

Raadpleeg het overzichtsartikel console voor meer informatie over de console.