Unutarnje vanjsko JavaSkripta: Učite s primjerom

Što su unutarnji i vanjski JavaSkripta?

Možete koristiti JavaSkriptni kod na dva načina.

1. Možete uključiti i JavaKod skripte interno unutar vašeg HTML dokumenta sebe.
2. Možete zadržati JavaUlazni kod skripte zasebnu vanjsku datoteku a zatim pokažite na tu datoteku iz vašeg HTML dokumenta.

Oba položaja izvršavaju potpuno isti jezik i daju isti rezultat u pregledniku. Razlika leži u tome gdje se pohranjuje izvorni kod, kako ga preglednik preuzima i koliko se lako kod može ponovno koristiti i održavati na web stranici.

Što je Interno JavaSkripta?

interni JavaSkripta je kod napisan izravno unutar para oznaka skripte u HTML datoteci. Preglednik čita oznake od vrha prema dnu i kada dođe do oznake skripte, odmah izvršava naredbe, bez dodatnog mrežnog zahtjeva.

Do sada smo koristili Interni JS. Evo uzorka –

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

Izlaz:

Today is Wednesday.

Ispisani dan mijenja se s posjetiteljevim sistemskim satom, jer getDay vraća broj od 0 za nedjelju do 6 za subotu, a taj se broj koristi kao indeks u nizu dana u tjednu.

Što je Vanjski JavaSkripta?

Planirate prikazivati ​​trenutni datum i vrijeme na svim svojim web stranicama. Pretpostavimo da ste napisali kod i kopirali ga na sve svoje web stranice (recimo 100). Ali kasnije želite promijeniti format u kojem se datum ili vrijeme prikazuju. U tom slučaju morat ćete napraviti promjene na svih 100 web stranica. To će biti vrlo dugotrajan i težak zadatak.

Dakle, spremite JavaScript kod u novoj datoteci s nastavkom .js. Zatim dodajte redak koda na sve svoje web-stranice da ukazuje na vašu .js datoteku ovako:

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

bilješkePretpostavlja se da se .js datoteka i sve vaše web stranice nalaze u istoj mapi. Ako se external.js datoteka nalazi u drugoj mapi, morate navesti punu putanju do datoteke u atributu src. Završni natpis </script> Oznaka je obavezna iako element nema sadržaj, jer oznaka skripte koja se sama zatvara nije valjani HTML i ostatak stranice bi bio progutan od strane nezavršenog elementa.

Ovo je kod koji postavljate unutar 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);

Ovo je vaša datoteka currentdetails.js. Ne brinite ako vidite duge retke koda. Uskoro ćete naučiti programirati. Napravite promjene u svom HTML dokumentu ovako:

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

Moderno prepisivanje iste datoteke je kraće, deklarira svaku varijablu i ispravno dopunjuje vrijednosti:

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

Uzorak izlaza:

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

Kako povezati vanjski JavaIspravno skriptna datoteka

Tri detalja odlučuju hoće li se vanjska datoteka uopće učitati: putanja zapisana u atributu src, položaj oznake skripte u dokumentu i atribut učitavanja koji se na nju primjenjuje.

Putovi se rješavaju relativno u odnosu na HTML dokument, osim ako nije navedena početna kosa crta ili puna adresa.

Atribut učitavanja kontrolira kada preglednik prestaje s parsiranjem HTML-a za pokretanje datoteke. Tablica u nastavku sažima tri dostupna ponašanja.

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

Interno naspram eksternog JavaSkripta: Ključne razlike

U donjoj usporedbi oba plasmana uspoređuju se s obzirom na čimbenike koji obično određuju izbor.

Kada koristiti unutarnje i vanjske JavaScript Code?

Ako imate samo nekoliko redaka koda koji je specifičan za određenu web stranicu, bolje je zadržati svoj JavaSkriptni kod interno unutar vašeg HTML dokumenta.

S druge strane, ako vaš JavaAko se skriptni kod koristi na mnogim web stranicama, trebali biste razmotriti njegovo zadržavanjeping svoj kod u zasebnoj datoteci. U tom slučaju, ako želite napraviti neke promjene u svom kodu, dovoljno je promijeniti samo jednu datoteku, što olakšava održavanje koda. Ako je vaš kod predug, bolje ga je držati u zasebnoj datoteci. To pomaže u jednostavnom otklanjanju pogrešaka.

Praktično pravilo za početnike je prag od otprilike deset redaka. Sve kraće i specifično za stranicu može ostati interno, dok sve dulje ili dijeljeno pripada vanjskoj datoteci.

U redu JavaSkripta i zašto je treba izbjegavati

Treći položaj postoji na starijim stranicama, gdje je kôd napisan izravno unutar HTML atributa. Iako se i dalje izvršava, miješa strukturu s ponašanjem i ne može se predmemorirati, ponovno koristiti ili pokriti strogom politikom sigurnosti sadržaja.

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

Nakon što se osjećate ugodno postavljajući skripte, nastavite s JavaMetode niza skripti, studija petlje u JavaScripti proradite kroz praktičan JavaPrimjeri skriptnog kodaVanjske datoteke također znatno olakšavaju upravljanje logikom pohrane preglednika, kao što su kolačići u JavaScript.

Pitanja i odgovori