In deze tutorial leert u hoe u JavaScript in een HTML-document kunt opnemen.
Werken met Client-side Script
Client-side scripting verwijst naar het type computerprogramma’s dat wordt uitgevoerd door de webbrowser van de gebruiker. JavaScript (JS) is de populairste client-side scriptingtaal op het web.
Het <script>-element wordt gebruikt om JavaScript in een HTML-document in te bouwen of ernaar te verwijzen om interactiviteit aan webpagina’s toe te voegen en een aanzienlijk betere gebruikerservaring te bieden.
Enkele van de meest voorkomende toepassingen van JavaScript zijn formuliervalidatie, het genereren van waarschuwingsberichten, het maken van een afbeeldingengalerij, het verbergen van inhoud, DOM-manipulatie en nog veel meer.
Script toevoegen aan HTML-pagina’s
JavaScript kan direct in de HTML-pagina worden ingesloten of in een extern scriptbestand worden geplaatst en binnen de HTML-pagina een verwijzing naar het script bevatten. Beide methoden maken gebruik van het <script>-element.
Script opnemen
Om JavaScript in een HTML-bestand op te nemen, voegt u de code toe als de inhoud van een <script>-element.
Het JavaScript in het volgende voorbeeld schrijft een tekenreeks naar een webpagina.
Example
Probeer deze code ”
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Embedding JavaScript</title></head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script></body></html>Tip: Idealiter worden scriptelementen onderaan de pagina geplaatst, vóór de afsluitende body-tag, d.w.z. </body>, omdat wanneer de browser een script tegenkomt, het renderen van de rest van de pagina wordt gepauzeerd totdat het script is geparseerd, wat de prestaties van uw site aanzienlijk kan beïnvloeden.
Extern JavaScript-bestand oproepen
U kunt uw JavaScript-code ook in een apart bestand plaatsen (met een .js-extensie), en dat bestand in uw HTML-document oproepen via het src-attribuut van de <script>-tag.
Dit is handig als u hetzelfde script in meerdere documenten wilt gebruiken. Het bespaart u het steeds herhalen van dezelfde taak en maakt uw website veel eenvoudiger te onderhouden.
Het volgende voorbeeld demonstreert hoe u een extern JS-bestand in HTML kunt linken.
Example
Probeer deze code ”
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Linking External JavaScript</title></head><body> <div></div> <script src="hello.js"></script></body></html>Note: Wanneer het src attribuut is opgegeven, moet het <script> element leeg zijn. Dit betekent simpelweg dat u niet hetzelfde <script> element kunt gebruiken om zowel het JavaScript in te sluiten als om te linken naar een extern JavaScript bestand in een HTML document.
Tip: JavaScript bestanden zijn normale tekstbestanden met .js extensie, zoals “hello.js”. Ook bevat het externe JavaScript-bestand alleen JavaScript-statements; het bevat niet het <script>...</script>-element zoals ingesloten JavaScript.
Het HTML noscript Element
Het <noscript> element wordt gebruikt om een alternatieve inhoud te bieden aan gebruikers die JavaScript in hun browser hebben uitgeschakeld of een browser hebben die client-side scripting niet ondersteunt.
Dit element kan alle HTML-elementen bevatten, afgezien van <script>, die in het <body> element van een normale HTML-pagina kunnen worden opgenomen. Laten we een voorbeeld bekijken:
Example
Probeer deze code ”
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Noscript Demo</title> </head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script> <noscript> <p>Oops! This website requires a JavaScript-enabled browser.</p> </noscript></body></html>Note: De inhoud in het noscript element wordt alleen weergegeven als de browser van de gebruiker geen scripts ondersteunt, of als scripts zijn uitgeschakeld in de browser.