Intern extern JavaScript: Învață cu exemplu

Ce sunt Intern și Extern JavaScenariul?

Poți să folosești JavaScript cod în două moduri.

1. Puteți include fie JavaCod script intern în documentul dvs. HTML însăși.
2. Puteți păstra JavaCod script în un fișier extern separat și apoi indicați acel fișier din documentul dvs. HTML.

Ambele plasări execută exact același limbaj și produc același rezultat în browser. Diferența constă în locul în care este stocat codul sursă, modul în care browserul îl descarcă și cât de ușor poate fi reutilizat și întreținut codul pe un site web.

Ce este intern JavaScenariul?

Intern JavaScriptul este cod scris direct în interiorul unei perechi de etichete script din fișierul HTML. Browserul citește markup-ul de sus în jos și, când ajunge la eticheta script, execută instrucțiunile imediat, fără solicitări suplimentare de rețea.

Am folosit Internal JS până acum. Iată o mostră -

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

ieșire:

Today is Wednesday.

Ziua afișată se schimbă odată cu ceasul de sistem al vizitatorului, deoarece getDay returnează un număr de la 0 pentru duminică până la 6 pentru sâmbătă, iar acel număr este folosit ca index în matricea zilei săptămânii.

Ce este Extern JavaScenariul?

Intenționați să afișați data și ora curente în toate paginile web. Să presupunem că ați scris codul și l-ați copiat în toate paginile web (să zicem 100). Dar mai târziu, doriți să schimbați formatul în care este afișată data sau ora. În acest caz, va trebui să faceți modificări în toate cele 100 de pagini web. Aceasta va fi o sarcină foarte dificilă și consumatoare de timp.

Deci, salvați JavaScenariu cod într-un fișier nou cu extensia .js. Apoi, adăugați o linie de cod în toate paginile dvs. web pentru a indica fișierul dvs. .js astfel:

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

notițeSe presupune că fișierul .js și toate paginile web se află în același folder. Dacă fișierul external.js se află într-un folder diferit, trebuie să specificați calea completă către fișier în atributul src. Închiderea </script> este obligatorie chiar dacă elementul nu are conținut, deoarece o etichetă de script care se închide automat nu este HTML valid, iar restul paginii ar fi înghițit de elementul neterminat.

Acesta este codul pe care îl plasezi în 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);

Acesta este fișierul tău currentdetails.js. Nu-ți face griji că vezi linii lungi de cod. Vei învăța să programezi în curând. Fă modificări la documentul tău HTML astfel:

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

O rescriere modernă a aceluiași fișier este mai scurtă, declară fiecare variabilă și completează valorile corect:

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

Eșantion de ieșire:

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

Cum să legați un link extern JavaFișierul script corect

Trei detalii decid dacă un fișier extern se încarcă: calea scrisă în atributul src, poziția etichetei script în document și atributul loading aplicat acestuia.

Căile sunt rezolvate în raport cu documentul HTML, cu excepția cazului în care se furnizează o bară oblică inițială sau o adresă completă.

Atributul loading controlează momentul în care browserul oprește analizarea codului HTML pentru a rula fișierul. Tabelul de mai jos prezintă pe scurt cele trei comportamente disponibile.

<!-- 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. Extern JavaScenariul: Diferențe cheie

Comparația de mai jos prezintă ambele plasări una lângă alta, în funcție de factorii care decid de obicei alegerea.

Când să utilizați intern și extern JavaScenariu Code?

Dacă aveți doar câteva linii de cod care sunt specifice unei anumite pagini web, atunci este mai bine să vă păstrați JavaCod de script intern în documentul dvs. HTML.

Pe de altă parte, dacă JavaCodul script este utilizat în multe pagini web, atunci ar trebui să luați în considerare keeping codul dvs. într-un fișier separat. În acest caz, dacă doriți să faceți modificări la codul dvs., trebuie doar să modificați un singur fișier, ceea ce facilitează întreținerea codului. Dacă codul dvs. este prea lung, este, de asemenea, mai bine să îl păstrați într-un fișier separat. Acest lucru ajută la depanare ușoară.

O regulă practică pentru începători este un prag de aproximativ zece rânduri. Orice element mai scurt și specific paginii poate rămâne intern, în timp ce orice element mai lung sau partajat aparține unui fișier extern.

In linie JavaScenariul și de ce ar trebui evitat

O a treia plasare există în paginile mai vechi, unde codul este scris direct în interiorul unui atribut HTML. Deși rulează în continuare, combină structura cu comportamentul și nu poate fi memorat în cache, reutilizat sau acoperit de o politică strictă de securitate a conținutului.

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

După ce te simți confortabil plasând scripturi, continuă cu JavaMetode de tip matrice de script, studiu bucle în JavaScenariuși lucrați prin practic JavaExemple de cod de scriptFișierele externe facilitează, de asemenea, gestionarea logicii de stocare a browserului, cum ar fi fursecuri în JavaScenariu.

Întrebări frecvente