Intern extern JavaScript: Leer met voorbeeld

Wat zijn intern en extern? JavaScript?

Je kunt gebruiken JavaScriptcode op twee manieren.

1. U kunt de JavaScriptcode intern in uw HTML-document zelf.
2. U kunt het JavaScriptcode in een apart extern bestand en wijs vervolgens vanuit uw HTML-document naar dat bestand.

Beide plaatsingen voeren exact dezelfde code uit en produceren hetzelfde resultaat in de browser. Het verschil zit hem in waar de broncode is opgeslagen, hoe de browser deze downloadt en hoe gemakkelijk de code kan worden hergebruikt en onderhouden op een website.

Wat is intern JavaScript?

Intern JavaScriptcode is code die direct tussen twee scripttags in het HTML-bestand staat. De browser leest de markup van boven naar beneden en voert de instructies direct uit zodra de scripttag wordt bereikt, zonder extra netwerkverzoek.

Tot nu toe hebben we Internal JS gebruikt. Hier is een voorbeeld –

<html>
<head>
  <title>My First JavaScript code!!!</title>
  <script type="text/javascript">
    // Create a Date Object
    var day = new Date();
    // Use getDay function to obtain todays Day.
    // getDay() method returns the day of the week as a number like 0 for Sunday, 1 for Monday,….., 5
    // This value is stored in today variable
    var today = day.getDay();
    // To get the name of the day as Sunday, Monday or Saturday, we have created an array named weekday and stored the values
    var weekday = new Array(7);
    weekday[0]="Sunday";
    weekday[1]="Monday";
    weekday[2]="Tuesday";
    weekday[3]="Wednesday";
    weekday[4]="Thursday";
    weekday[5]="Friday";
    weekday[6]="Saturday";
    // weekday[today] will return the day of the week as we want
    document.write("Today is " + weekday[today] + ".");
  </script>
</head>
<body>
</body>
</html>

Output:

Today is Wednesday.

De weergegeven dag verandert mee met de systeemklok van de bezoeker, omdat getDay een getal retourneert van 0 voor zondag tot en met 6 voor zaterdag, en dat getal wordt gebruikt als index in de array met weekdagen.

Wat is extern JavaScript?

U bent van plan om de huidige datum en tijd op al uw webpagina's weer te geven. Stel dat u de code hiervoor hebt geschreven en deze in al uw webpagina's (zeg 100) hebt gekopieerd. Maar later wilt u de weergave van de datum of tijd wijzigen. In dat geval moet u al deze 100 webpagina's aanpassen. Dit is een zeer tijdrovende en lastige klus.

Bewaar dus de JavaScript code in een nieuw bestand met de extensie .js. Voeg vervolgens een regel code toe aan al uw webpagina's om als volgt naar uw .js-bestand te verwijzen:

<script type="text/javascript" src="currentdetails.js"></script>

NoteEr wordt vanuit gegaan dat het .js-bestand en al uw webpagina's zich in dezelfde map bevinden. Als het external.js-bestand zich in een andere map bevindt, moet u het volledige pad naar uw bestand in het src-attribuut opgeven. </script> De <script>-tag is verplicht, zelfs als het element geen inhoud heeft, omdat een zelfsluitende scripttag geen geldige HTML is en de rest van de pagina zou worden opgeslokt door het niet-afgesloten element.

Dit is de code die je in currentdetails.js plaatst:

var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var monthName;

var hours = currentDate.getHours();
var mins = currentDate.getMinutes();
var secs = currentDate.getSeconds();
var strToAppend;
if (hours >12 )
{
	hours1 = "0" + (hours - 12);
strToAppend = "PM";
}
else if (hours <12)
{
	hours1 = "0" + hours;
	strToAppend = "AM";
}
else
{
	hours1 = hours;
	strToAppend = "PM";
}

if(mins<10)
mins = "0" + mins;
if (secs<10)
	secs = "0" + secs;

switch (month)
{
	case 1:
		monthName = "January";
		break;
	case 2:
		monthName = "February";
		break;
	case 3:
		monthName = "March";
		break;
	case 4:
		monthName = "April";
		break;
	case 5:
		monthName = "May";
		break;
	case 6:
		monthName = "June";
		break;
	case 7:
		monthName = "July";
		break;
	case 8:
		monthName = "August";
		break;
	case 9:
		monthName = "September";
		break;
	case 10:
		monthName = "October";
		break;
	case 11:
		monthName = "November";
		break;
	case 12:
		monthName = "December";
		break;
}

var year = currentDate.getFullYear();
var myString;
myString = "Today is " + day +  " - " + monthName + " - " + year + ".<br />Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + ".";
document.write(myString);

Dit is je currentdetails.js-bestand. Maak je geen zorgen over de lange regels code. Je leert snel programmeren. Breng de volgende wijzigingen aan in je HTML-document:

<html>
	<head>
	   <title>My External JavaScript Code!!!</title>
	   <script type="text/javascript" src="currentdetails.js">
	   </script>
	</head>
	<body>
	</body>
</html>

Een moderne herschrijving van hetzelfde bestand is korter, declareert elke variabele en vult de waarden correct aan:

// currentdetails.js - corrected modern version
const now = new Date();

const months = ["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"];

const hours24 = now.getHours();
const suffix  = hours24 >= 12 ? "PM" : "AM";
const hours12 = String(hours24 % 12 || 12).padStart(2, "0");
const mins    = String(now.getMinutes()).padStart(2, "0");
const secs    = String(now.getSeconds()).padStart(2, "0");

const message = "Today is " + now.getDate() + " - " + months[now.getMonth()] +
                " - " + now.getFullYear() + ". Current time is " +
                hours12 + ":" + mins + ":" + secs + " " + suffix + ".";

document.getElementById("stamp").textContent = message;

Voorbeelduitvoer:

Today is 29 - July - 2026. Current time is 09:05:07 AM.

Hoe koppel je een externe website? JavaScriptbestand correct

Drie details bepalen of een extern bestand überhaupt wordt geladen: het pad in het src-attribuut, de positie van de scripttag in het document en het loading-attribuut dat erop is toegepast.

Padnamen worden opgelost ten opzichte van het HTML-document, tenzij er een schuine streep aan het begin staat of een volledig adres wordt opgegeven.

Het `loading`-attribuut bepaalt wanneer de browser stopt met het parsen van HTML om het bestand uit te voeren. De onderstaande tabel geeft een overzicht van de drie beschikbare gedragingen.

<!-- Recommended for scripts that read the DOM -->
<script src="js/currentdetails.js" defer></script>

<!-- Recommended for independent third party scripts -->
<script src="js/analytics.js" async></script>

<!-- Modern module syntax, deferred by default -->
<script type="module" src="js/app.js"></script>

Intern versus extern JavaScript: Belangrijkste verschillen

De onderstaande vergelijking zet beide plaatsingen naast elkaar op basis van de factoren die doorgaans de doorslag geven bij de keuze.

Wanneer intern en extern gebruiken JavaScript Code?

Als u slechts een paar regels code heeft die specifiek zijn voor een bepaalde webpagina, kunt u deze beter behouden JavaScriptcode intern in uw HTML-document.

Aan de andere kant, als uw JavaScriptcode wordt op veel webpagina's gebruikt, dus je zou moeten overwegen om die te behouden.ping Bewaar je code in een apart bestand. Op die manier hoef je, als je wijzigingen in je code wilt aanbrengen, slechts één bestand aan te passen, wat het onderhoud van de code vereenvoudigt. Ook als je code erg lang is, is het beter om deze in een apart bestand te bewaren. Dit vergemakkelijkt het debuggen.

Een praktische vuistregel voor beginners is een limiet van ongeveer tien regels. Alles wat korter is en paginaspecifiek, kan intern blijven, terwijl alles wat langer is of gedeeld wordt, in een extern bestand thuishoort.

In lijn JavaScript en waarom je het moet vermijden

Een derde plaatsingsmogelijkheid bestaat op oudere pagina's, waar de code direct in een HTML-attribuut is geschreven. Hoewel deze code nog steeds werkt, vermengt hij structuur met gedrag en kan hij niet in de cache worden opgeslagen, hergebruikt of onder een strikt contentbeveiligingsbeleid vallen.

<!-- Inline handler: works, but avoid it -->
<button onclick="alert('Clicked')">Click me</button>

<!-- Preferred: behaviour attached from a script -->
<button id="greet">Click me</button>

<script>
  document.getElementById("greet").addEventListener("click", () => {
      alert("Clicked");
  });
</script>

Als je eenmaal vertrouwd bent met het plaatsen van scripts, ga dan verder met JavaScript array-methoden, studie lussen in JavaScripten werk door de praktisch JavaScriptcodevoorbeeldenExterne bestanden maken het bovendien veel gemakkelijker om de opslaglogica van de browser te beheren, zoals bijvoorbeeld... koekjes in JavaScript.

Veelgestelde vragen