Plaatsen JavaScripts direct in het bestand met de HTML voor een webpagina is ideaal voor korte scripts die worden gebruikt tijdens het leren van JavaScript. Wanneer u begint met het maken van scripts om aanzienlijke functionaliteit voor uw webpagina te bieden, is de hoeveelheid JavaScript kan behoorlijk groot worden en het opnemen van deze grote scripts direct op de webpagina levert twee problemen op:
- Het kan de ranking van uw pagina bij de verschillende zoekmachines beïnvloeden als JavaScript een groot deel van de pagina-inhoud in beslag neemt. Dit verlaagt de gebruiksfrequentie van trefwoorden en woordgroepen die aangeven waar de inhoud over gaat.
- Het maakt het moeilijker om dezelfde JavaScript-functie op meerdere pagina's op uw website opnieuw te gebruiken. Elke keer dat u het op een andere pagina wilt gebruiken, moet u het kopiëren en op elke extra pagina invoegen, plus eventuele wijzigingen die de nieuwe locatie vereist.
Het is veel beter als we JavaScript onafhankelijk maken van de webpagina die het gebruikt.
JavaScript-code selecteren die moet worden verplaatst
Gelukkig is de ontwikkelaars van HTML en JavaScript hebben een oplossing voor dit probleem geboden. We kunnen onze JavaScripts van de webpagina verwijderen en nog steeds precies hetzelfde laten functioneren.
Het eerste dat we moeten doen om JavaScript te maken buiten de pagina die het gebruikt, is om te selecteren de daadwerkelijke JavaScript-code zelf (zonder de omringende HTML-scripttags) en kopieer deze naar een aparte het dossier.
Als het volgende script bijvoorbeeld op onze pagina staat, zouden we het vetgedrukte gedeelte selecteren en kopiëren:
Vroeger was het een gewoonte om JavaScript in een HTML-document in commentaartags te plaatsen om te voorkomen dat oudere browsers de code weergeven; nieuwe HTML-standaarden zeggen echter dat browsers de code automatisch binnen moeten behandelen HTML-commentaartags als opmerkingen, en dit resulteert in browsers die uw Javascript negeren.
Als u HTML-pagina's van iemand anders hebt geërfd met JavaScript in commentaartags, hoeft u de tags niet op te nemen in de JavaScript-code die u selecteert en kopieert.
U kopieert bijvoorbeeld alleen de vetgedrukte code en laat de HTML-commentaartags weg en in het onderstaande codevoorbeeld:
JavaScript-code opslaan als een bestand
Nadat je de JavaScript-code hebt geselecteerd die je wilt verplaatsen, plak je deze in een nieuw bestand. Geef het bestand een naam die suggereert wat het script doet of identificeert de pagina waar het script thuishoort.
Geef het bestand een .js achtervoegsel zodat u weet dat het bestand JavaScript bevat. We kunnen bijvoorbeeld gebruiken hallo.js als de naam van het bestand voor het opslaan van JavaScript uit het bovenstaande voorbeeld.
Linken naar het externe script
Nu we ons JavaScript hebben gekopieerd en in een apart bestand hebben opgeslagen, hoeven we alleen maar naar het externe scriptbestand op ons te verwijzen HTML-webpagina-document.
Verwijder eerst alles tussen de scripttags:
Dit vertelt de pagina nog niet welk JavaScript moet worden uitgevoerd, dus we moeten vervolgens een extra kenmerk toevoegen aan de scripttag zelf die de browser vertelt waar het script te vinden is.
Ons voorbeeld ziet er nu als volgt uit:
src = "hello.js">
Het src-attribuut vertelt de browser de naam van het externe bestand van waaruit de JavaScript-code voor deze webpagina moet worden gelezen (wat is hallo.js in ons voorbeeld hierboven).
U hoeft niet al uw JavaScripts op dezelfde locatie te plaatsen als uw HTML-webpagina-documenten. Mogelijk wilt u ze in een aparte JavaScript-map plaatsen. In dit geval wijzigt u gewoon de waarde in de src attribuut om de locatie van het bestand op te nemen. U kunt een relatief of absoluut webadres opgeven voor de locatie van het JavaScript-bronbestand.
Gebruik wat je weet
U kunt nu elk script dat u hebt geschreven of elk script dat u uit een scriptbibliotheek hebt verkregen, van de HTML-webpagina-code naar een extern verwezen JavaScript-bestand verplaatsen.
U hebt dan vanaf elke webpagina toegang tot dat scriptbestand door simpelweg de juiste HTML-scripttags toe te voegen die dat scriptbestand oproepen.