HTML includes oefening.
Hergebruik van stukjes code.

Wist je dat je met een paar regeltjes javascript een stukje HTML code (die je heel vaak gebruikt bijvoorbeeld) kunt "importeren" in andere HTML pagina's? Zo kun je dus bijvoorbeeld een navigatiebalk bovenin 30 HTML pagina's plaatsen die afkomstig is van 1 stukje code. Als je het stukje code aanpast van die navigatiebalk, worden automatisch dus ook alle andere pagina's geupdated die dat stukje code hebben geimporteerd. Dat scheelt handmatig dertig pagina's openen om op dertig plekken een navigatiebalk aan te passen.

Wat we in dit voorbeeld doen

Javascript fetch()

Het stukje javascript is vrij rechtoe rechtaan. "menu.html" wordt opgehaald (waar het stukje html code van het menu in zit). Vervolgens wordt in alle pagina's van de website gecheckt of er een navigatiebalkje (nav) bovenin staat. En zoja, dan wordt "menu.html" (waar het feitelijke menu zit) daarin geplakt/geimporteerd.

Bonus

Als bonus staat in de javascript file ook een stukje code dat een active CSS class "plakt" aan de menu linkjes van de navigatiebalk (zodat ze een oranje kleur krijgen). Het stukje code doet dit door te checken in de adresbalk van de browser of daar de naam van de pagina voorkomt die ook wordt genoemd in de link in het navigatie menu. Als die overeenkomen wordt de class "active" geplakt aan die menulink.

Speelbak in Plunker
➔ ❑   Open in nieuw venster!