Inleiding
JavaScript behoeft geen introductie. Het is een van de meest populaire programmeertalen voor webontwikkeling. Het werkt vergelijkbaar met HTML en CSS. Al deze talen helpen bij het ontwerpen en ontwikkelen van webgebaseerde applicaties en programma's.
Dus hoe is JavaScript in het bijzonder nuttig? Met behulp van JavaScript kun je je webapplicaties en webpagina's behoorlijk interactief maken. In de moderne wereld is er geen ruimte voor zelfgenoegzaamheid. Je moet de aandacht van je kijkers in de eerste paar seconden trekken en ze betrokken houden. Er is geen twijfel dat een interessant en responsief webdesign een van de beste manieren is om dit te doen. Gelukkig ondersteunen de meeste browsers JavaScript. Het kan in je browser worden uitgevoerd met behulp van enkele ingebouwde engines.
JavaScript toevoegen aan HTML
Als je JavaScript-bestanden wilt gebruiken voor je web-app, moet je ze zij aan zij met HTML-markup uitvoeren. Er zijn twee manieren waarop je JavaScript aan HTML kunt toevoegen. Eén benadering is om dit inline binnen een HTML-document te doen. De andere manier is om het als een apart bestand toe te voegen. Dit bestand wordt samen met het HTML-document gedownload.
In deze handleiding zullen we in detail verkennen hoe je JavaScript aan HTML kunt toevoegen met behulp van deze twee methoden.
Hoe je JavaScript inline aan HTML-documenten toevoegt
Eerst zullen we zien hoe je JavaScript inline aan een HTML-document kunt toevoegen. Hiervoor moet je de speciale HTML-tag gebruiken. Dit is <script>. Deze tag omsluit de JavaScript-code. Je kunt de tag overal in je HTML-markup plaatsen. Waar je deze plaatst, hangt af van wanneer je wilt dat de JavaScript wordt geladen.
Je kunt deze bijvoorbeeld in de <head>-sectie, de <body>-sectie of zelfs na de sluitingstag </body> plaatsen. Als je de JavaScript gescheiden wilt houden van de hoofdinhoud van de HTML-code, kun je de tag het beste in de <head>-sectie plaatsen. Deze zal de JavaScript-code bevatten. Aan de andere kant wil je misschien dat je JavaScript-code binnen de lay-out van je webpagina wordt uitgevoerd. Als dat het geval is, moet je de tag in de <body>-sectie plaatsen. Dit doe je bijvoorbeeld als je document.write gebruikt om inhoud te genereren.
Een betere manier om dit te begrijpen is aan de hand van een voorbeeld met code. Neem het volgende HTML-document dat leeg is. De browsertitel van dit document is Today’s Date:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> </html> |
Zoals je kunt zien, is hier geen spoor van JavaScript te bekennen. Het document bevat tot nu toe alleen de HTML-markup. Nu willen we wat JavaScript-code inline toevoegen om deze tegelijkertijd te laten laden en uitvoeren. Neem het volgende stukje JavaScript-code:
|
1 2 |
let d = new Date(); alert("De datum van vandaag is " + d); |
Volgens de bovenstaande code zorgen we ervoor dat onze webpagina een melding toont met de datum van vandaag. Dus ongeacht wanneer de bezoeker de site start, de pagina zal de huidige datum weergeven.
Om dit stukje JavaScript-code nu aan het HTML-document toe te voegen, gebruiken we de <script>-tag. Allereerst moet je de JavaScript-code tussen de <head>-tags toevoegen. Dit vertelt de webpagina dat deze specifieke code moet worden geladen vóór de andere inhoud van de pagina. Je kunt de code onder de <title>-tags toevoegen. Dit is hoe je dat aanpakt:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Datum van vandaag</title> <script> let d = new Date(); alert("De datum van vandaag is " + d); </script> </head> <body> </body> </html> |
Jouw JavaScript-code is nu toegevoegd. Je webpagina zal dit script uitvoeren en laden voor de rest van de pagina. Wanneer je je site start, ontvang je een melding met de huidige datum, ongeveer zoals dit:
Dat is hoe je de code zou toevoegen aan de <head>-sectie van het HTML-document. Het alternatief is om het script binnen of buiten de <body>-tags toe te voegen. Zoals je in het onderstaande voorbeeld zult zien, voegen we het stukje code toe na de <head>-sectie:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Datum van vandaag</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>De datum van vandaag is " + d + "</h1>" </script> </body> </html> |
Als resultaat van deze wijziging zie je zoiets als dit na het herladen van de pagina:
JavaScript toevoegen aan HTML met een apart JavaScript-bestand
Kleine JavaScript-scripts werken goed met HTML-bestanden. Dit komt omdat ze in hun geheel op één pagina of minder draaien. Als je werkt met grotere scripts die meerdere pagina's beslaan, kan het bestand erg onoverzichtelijk worden. Daarom kan het nodig zijn om het als een apart JavaScript-bestand toe te voegen. Het bestand wordt dan tegelijkertijd met het HTML-document geladen.
In dit gedeelte bespreken we hoe je JavaScript aan HTML kunt toevoegen met behulp van een apart bestand. De code is meestal ondergebracht in een of meer .js-bestanden. Het HTML-document zal naar deze bestanden verwijzen zoals naar elk ander extern bestand. Er zijn tal van redenen waarom je een apart JavaScript-bestand zou willen gebruiken. Vooral maakt het de code veel gemakkelijker te lezen en te begrijpen. Bovendien zorgen aparte bestanden ervoor dat gecachte pagina's snel laden en zijn ze relatief eenvoudiger te onderhouden.
Om van deze voordelen te profiteren, moet je weten hoe je de twee met elkaar verbindt - het JavaScript-bestand en het HTML-document. Om je te helpen dit te begrijpen, nemen we het voorbeeld van een klein webproject. Dit veronderstelde project bevat een hoofdbestand index.html in de root, style.css in de css/-map en script.js in de js/-map. Hier is ons kleine project:
|
1 2 3 4 5 6 7 8 9 10 11 |
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
Voor onze HTML-markup gebruiken we het document dat we eerder hebben gebruikt:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Datum van vandaag</title> </head> <body> </body> </html> |
Nu we onze twee documenten hebben, kunnen we ze gaan koppelen. We moeten de JavaScript-code met betrekking tot de datum toevoegen aan het script.js-bestand. Je voegt deze als volgt toe als een <h1>-kop:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>De datum van vandaag is " + d + "</h1>" |
Om de code aan het HTML-document te koppelen, voeg je een verwijzing naar het script toe. De verwijzing moet zich binnen of onder de <body>-sectie van de HTML-sjabloon bevinden. Dit is de code die je hier zult gebruiken:
|
1 |
<script src="js/script.js"></script> |
Zoals je kunt zien, gebruiken we de <script>-tag. De tag verwijst naar het script.js-bestand dat zich in de map js/ van het project bevindt. Dit is hoe de code in het HTML-document zal verschijnen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Datum van vandaag</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
Als je wilt, kun je wat stilistische wijzigingen aanbrengen om je pagina op te fleuren. Laten we bijvoorbeeld wat achtergrondkleur toevoegen aan de <h1>-kop. We zullen deze bewerking uitvoeren in het style.css-bestand:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Aangezien de bewerking in de kop moet worden weergegeven, zullen we ernaar verwijzen in de <head>-sectie van het HTML-document. Dit is hoe je de verwijzing naar dit CSS-bestand maakt:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Datum van vandaag</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Nu we de vereiste verwijzingen hebben gemaakt, kun je de wijzigingen visualiseren. Laad index.html in je browser en je zult een pagina als deze zien:
Als je de code wilt bijwerken, kun je al je pagina's vanaf één locatie bewerken. Dit maakt het onderhoud van de webpagina's heel eenvoudig. Dat is het voordeel van het gebruik van een apart bestand voor je JavaScript-scripts.
Conclusie
Hopelijk heeft deze handleiding je geholpen om meer te leren over het proces van het toevoegen van JavaScript aan HTML. We hebben besproken hoe je dit inline in een HTML-document doet en hoe je het als een .js-bestand toevoegt. Nu je de basis kent, kun je nog veel meer doen met JavaScript in HTML.
Hier zijn enkele bronnen van onze blog die je zullen helpen om JavaScript verder te benutten:
- Als je je eigen webapplicatie bouwt, bekijk dan onze gids over het kiezen van de beste serverconfiguratie.
- Als je wilt leren hoe je een blog opzet met Ghost, bekijk dan deze handleiding.
- Bekijk deze handleiding om te leren hoe je Node.js installeert op Ubuntu 18.04.
Veel plezier met computeren!
Reacties
Nog geen reacties. Wees de eerste.