Intern ekstern JavaScript: Lær med eksempel

Hvad er interne og eksterne JavaManuskript?

Du kan bruge JavaScript kode på to måder.

1. Du kan enten inkludere JavaScript kode internt i dit HTML-dokument Selv.
2. Du kan beholde JavaScript kode i en separat ekstern fil og peg derefter på den fil fra dit HTML-dokument.

Begge placeringer udfører præcis det samme sprog og producerer det samme resultat i browseren. Forskellen ligger i, hvor kildekoden er gemt, hvordan browseren downloader den, og hvor nemt koden kan genbruges og vedligeholdes på tværs af et websted.

Hvad er internt JavaManuskript?

Intern JavaEt script er kode skrevet direkte i et par script-tags i HTML-filen. Browseren læser markup'en fra top til bund, og når den når script-tagget, udfører den sætningerne med det samme uden ekstra netværksanmodninger.

Vi har brugt Intern JS indtil videre. Her er et eksempel -

<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.

Den udskrevne dag ændrer sig med den besøgendes systemur, fordi getDay returnerer et tal fra 0 for søndag til 6 for lørdag, og dette tal bruges som et indeks i ugedagsarrayet.

Hvad er eksternt JavaManuskript?

Du planlægger at vise den aktuelle dato og det aktuelle klokkeslæt på alle dine websider. Forestil dig, at du har skrevet koden og kopieret den til alle dine websider (f.eks. 100). Men senere vil du ændre det format, som datoen eller klokkeslættet vises i. I dette tilfælde skal du foretage ændringer på alle 100 websider. Dette vil være en meget tidskrævende og vanskelig opgave.

Så gem JavaScript kode i en ny fil med filtypenavnet .js. Tilføj derefter en kodelinje på alle dine websider for at pege på din .js-fil på denne måde:

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

BemærkDet antages, at .js-filen og alle dine websider er i den samme mappe. Hvis external.js-filen er i en anden mappe, skal du angive den fulde sti til din fil i src-attributten. Den afsluttende </script> Tagget er obligatorisk, selvom elementet ikke har noget indhold, fordi et selvlukkende scripttag ikke er gyldig HTML, og resten af ​​siden ville blive opslugt af det uafsluttede element.

Dette er den kode, du placerer i currentdetails.js:

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);

Dette er din currentdetails.js-fil. Bare rolig, hvis du ser lange linjer kode. Du lærer snart at kode. Foretag ændringer i dit HTML-dokument på denne måde:

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

En moderne omskrivning af den samme fil er kortere, deklarerer alle variabler og udfylder værdierne korrekt:

// 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;

Eksempel på output:

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

Sådan linker du en ekstern JavaScriptfil korrekt

Tre detaljer afgør, om en ekstern fil overhovedet indlæses: stien, der er skrevet i src-attributten, positionen af ​​script-tagget i dokumentet, og den indlæsningsattribut, der anvendes på den.

Stier opløses i forhold til HTML-dokumentet, medmindre der angives en indledende skråstreg eller en fuld adresse.

Attributten `loading` styrer, hvornår browseren stopper med at parse HTML for at køre filen. Tabellen nedenfor opsummerer de tre tilgængelige funktionsmåder.

<!-- 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 vs. ekstern JavaManuskript: Vigtigste forskelle

Sammenligningen nedenfor sætter begge placeringer side om side på tværs af de faktorer, der normalt afgør valget.

Hvornår skal man bruge intern og ekstern JavaScript Code?

Hvis du kun har nogle få linjer kode, der er specifik for en bestemt webside, så er det bedre at beholde din JavaScript-kode internt i dit HTML-dokument.

På den anden side, hvis din JavaHvis scriptkode bruges på mange websider, bør du overveje keeping din kode i en separat fil. I så fald, hvis du ønsker at foretage ændringer i din kode, skal du kun ændre én fil, hvilket gør kodevedligeholdelse nem. Hvis din kode er for lang, er det også bedre at gemme den i en separat fil. Dette hjælper med nem fejlfinding.

En praktisk regel for begyndere er en grænse på cirka ti linjer. Alt, der er kortere og sidespecifikt, kan forblive internt, mens alt, der er længere eller delt, hører hjemme i en ekstern fil.

inline JavaScript og hvorfor det bør undgås

En tredje placering findes på ældre sider, hvor koden er skrevet direkte i en HTML-attribut. Selvom den stadig kører, blander den struktur med adfærd og kan ikke caches, genbruges eller være dækket af en streng indholdssikkerhedspolitik.

<!-- 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>

Når du er tryg ved at placere scripts, kan du fortsætte med JavaScript array-metoder, undersøgelse sløjfer ind JavaScript, og arbejde igennem praktisk JavaEksempler på scriptkodeEksterne filer gør det også langt nemmere at administrere browserlagringslogik, f.eks. småkager i JavaScript.

Ofte Stillede Spørgsmål