Hoe externe JavaScript-bestanden te maken en te gebruiken

JavaScript rechtstreeks in het bestand met de HTML voor een webpagina plaatsen is ideaal voor korte scripts die worden gebruikt tijdens het leren van JavaScript. Wanneer u echter begint met het maken van scripts om uw webpagina aanzienlijke functionaliteit te bieden, kan de hoeveelheid JavaScript behoorlijk groot worden en het opnemen van deze grote scripts direct in de webpagina levert twee problemen op:

• Het kan de rangschikking van uw pagina bij de verschillende zoekmachines beïnvloeden als JavaScript het grootste deel van de pagina-inhoud inneemt. Dit verlaagt de frequentie van het gebruik van trefwoorden en zinnen 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 in 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 hebben de ontwikkelaars van HTML en JavaScript een oplossing voor dit probleem geboden. We kunnen onze JavaScripts van de webpagina verwijderen en toch dezelfde functie hebben.

Het eerste wat we moeten doen om een ​​JavaScript extern te maken van de pagina die het gebruikt, is om de feitelijke JavaScript-code zelf te selecteren (zonder de omliggende HTML-scripttags) en deze naar een afzonderlijk bestand te kopiëren.

Als het volgende script bijvoorbeeld op onze pagina staat, zouden we het vetgedrukte gedeelte selecteren en kopiëren:

var hello = 'Hallo wereld';
document.write (hallo);

Er was een gewoonte om JavaScript in een HTML-document te plaatsen in commentaarlabels om te voorkomen dat oudere browsers de code konden weergeven; nieuwe HTML-normen zeggen echter dat browsers de code in HTML-commentaartags automatisch als opmerkingen moeten behandelen, en dit resulteert erin dat browsers uw Javascript negeren. 

Als u HTML-pagina's van iemand anders hebt geërfd met JavaScript in de 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-reactietags in het onderstaande codevoorbeeld weg:

JavaScript-code opslaan als bestand

Nadat u de JavaScript-code die u wilt verplaatsen hebt geselecteerd, plakt u 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 hello.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 afzonderlijk bestand hebben opgeslagen, hoeven we alleen nog maar naar het externe scriptbestand op ons HTML-webpaginadocument te verwijzen.

Verwijder eerst alles tussen de scripttags: