Intern og ekstern JavaManus: Lær med eksempel

Hva er interne og eksterne JavaManus?

Du kan bruke JavaSkriptkode på to måter.

1. Du kan enten inkludere JavaSkriptkode internt i HTML-dokumentet ditt selv.
2. Du kan beholde JavaSkriptkode i en separat ekstern fil og pek deretter på filen fra HTML-dokumentet.

Begge plasseringene kjører nøyaktig samme språk og produserer samme resultat i nettleseren. Forskjellen ligger i hvor kildekoden er lagret, hvordan nettleseren laster den ned, og hvor enkelt koden kan gjenbrukes og vedlikeholdes på tvers av et nettsted.

Hva er internt JavaManus?

Intern JavaSkript er kode skrevet direkte i et par skriptkoder i HTML-filen. Nettleseren leser markupen ovenfra og ned, og når den når skriptkoden, utfører den setningene umiddelbart, uten ekstra nettverksforespørsel.

Vi har brukt Intern JS så langt. 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>

Utgang:

Today is Wednesday.

Den utskrevne dagen endres med den besøkendes systemklokke, fordi getDay returnerer et tall fra 0 for søndag til 6 for lørdag, og det tallet brukes som en indeks i ukedagsarrayet.

Hva er eksternt JavaManus?

Du planlegger å vise gjeldende dato og klokkeslett på alle nettsidene dine. La oss si at du skrev koden og kopierte den til alle nettsidene dine (f.eks. 100). Men senere vil du endre formatet som datoen eller klokkeslettet vises i. I dette tilfellet må du gjøre endringer på alle de 100 nettsidene. Dette vil være en svært tidkrevende og vanskelig oppgave.

Så lagre JavaScript kode i en ny fil med filtypen .js. Deretter legger du til en kodelinje på alle nettsidene dine for å peke på .js-filen din slik:

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

MerknaderDet antas at .js-filen og alle nettsidene dine er i samme mappe. Hvis external.js-filen er i en annen mappe, må du angi hele banen til filen i src-attributtet. Den avsluttende </script> taggen er obligatorisk selv om elementet ikke har noe innhold, fordi en selvlukkende skripttagg ikke er gyldig HTML, og resten av siden ville bli slukt av det uavsluttede elementet.

Dette er koden du plasserer 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 currentdetails.js-filen din. Ikke bekymre deg for lange kodelinjer. Du vil lære å kode snart. Gjør endringer i HTML-dokumentet ditt slik:

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

En moderne omskriving av den samme filen er kortere, deklarerer hver variabel og fyller ut verdiene riktig:

// 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å utgang:

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

Slik kobler du en ekstern enhet JavaSkriptfil riktig

Tre detaljer avgjør om en ekstern fil i det hele tatt lastes inn: banen som er skrevet i src-attributtet, plasseringen til script-taggen i dokumentet og loading-attributtet som er brukt på den.

Stier løses i forhold til HTML-dokumentet med mindre en innledende skråstrek eller en fullstendig adresse er oppgitt.

Attributtet `loading` styrer når nettleseren slutter å analysere HTML for å kjøre filen. Tabellen nedenfor oppsummerer de tre tilgjengelige virkemåtene.

<!-- 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 JavaManus: Viktige forskjeller

Sammenligningen nedenfor setter begge plasseringene side om side på tvers av faktorene som vanligvis avgjør valget.

Når skal du bruke intern og ekstern JavaScript Code?

Hvis du bare har noen få linjer med kode som er spesifikke for en bestemt nettside, er det bedre å beholde din JavaSkriptkode internt i HTML-dokumentet ditt.

På den annen side, hvis din JavaSkriptkode brukes på mange nettsider, bør du vurdere keeping koden din i en egen fil. I så fall, hvis du ønsker å gjøre noen endringer i koden din, trenger du bare å endre én fil, noe som gjør kodevedlikehold enkelt. Hvis koden din er for lang, er det også bedre å oppbevare den i en egen fil. Dette bidrar til enkel feilsøking.

En praktisk regel for nybegynnere er en terskel på omtrent ti linjer. Alt som er kortere og sidespesifikt kan forbli internt, mens alt som er lengre eller delt hører hjemme i en ekstern fil.

På linje JavaManus og hvorfor det bør unngås

En tredje plassering finnes på eldre sider, der koden er skrevet direkte i et HTML-attributt. Selv om den fortsatt kjører, blander den struktur med atferd og kan ikke mellomlagres, gjenbrukes eller dekkes av en streng innholdssikkerhetspolicy.

<!-- 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 komfortabel med å plassere manus, fortsett med JavaSkriptmatrisemetoder, studere løkker inn JavaScript, og jobb deg gjennom praktisk JavaEksempler på skriptkodeEksterne filer gjør det også mye enklere å administrere nettleserlagringslogikk, for eksempel informasjonskapsler i JavaScript.

Spørsmål og svar