Sisemine väline JavaStsenaarium: õppige näitega
James Hartman
⚡ Nutikas kokkuvõte
Sisemine ja välimine JavaSkript kirjeldab kahte toetatud paigutust skriptikoodi jaoks veebiprojektis. See artikkel võrdleb mõlemat lähenemisviisi, näitab töönäiteid, selgitab õiget linkimist asünkroonse ja edasilükkamisega ning märgib, millal iga paigutus tagab parema hooldatavuse ja jõudluse.
Mis on sisemine ja väline JavaSkript?
Võite kasutada JavaSkriptikood kahel viisil.
- Võite lisada kas JavaSkripti kood HTML-dokumendi sees ise.
- Saate hoida JavaSkripti kood sisse eraldi väline fail ja seejärel osutage sellele failile oma HTML-dokumendist.
Mõlemad paigutused käivitavad täpselt sama keelt ja annavad brauseris sama tulemuse. Erinevus seisneb selles, kuhu lähtekood salvestatakse, kuidas brauser selle alla laadib ja kui lihtsalt saab koodi veebisaidil uuesti kasutada ja hallata.
Mis on sisemine JavaSkript?
sisemine JavaSkript on kood, mis kirjutatakse otse HTML-faili skriptimärgendipaari sisse. Brauser loeb märgistust ülevalt alla ja kui see jõuab skriptimärgendini, käivitab see laused kohe, ilma täiendava võrgupäringuta.
Oleme siiani kasutanud sisemist JS-i. Siin on näidis -
<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>
Väljund:
Today is Wednesday.
Prinditud päev muutub koos külastaja süsteemikellaga, sest getDay tagastab arvu 0-st pühapäeva puhul kuni 6-ni laupäeva puhul ja seda numbrit kasutatakse nädalapäevade massiivi indeksina.
Mis on väline JavaSkript?
Sa plaanid kuvada praegust kuupäeva ja kellaaega kõigil oma veebilehtedel. Oletame, et kirjutasid koodi ja kopeerisid selle kõigile oma veebilehtedele (näiteks 100-le). Aga hiljem tahad muuta kuupäeva või kellaaja kuvamise vormingut. Sellisel juhul pead tegema muudatusi kõigil 100 veebilehel. See on väga aeganõudev ja keeruline ülesanne.
Niisiis, salvestage JavaScript kood uues failis laiendiga .js. Seejärel lisage kõigile oma veebilehtedele koodirida, mis osutab teie js-failile järgmiselt:
<script type="text/javascript" src="currentdetails.js"></script>
märkusedEeldatakse, et .js-fail ja kõik teie veebilehed asuvad samas kaustas. Kui external.js-fail asub teises kaustas, peate atribuudis src määrama faili täieliku tee. Lõpp </script> Silt on kohustuslik isegi siis, kui elemendil pole sisu, sest isesulguv skriptisilt ei ole kehtiv HTML ja ülejäänud leht neelaks lõpetamata elemendi alla.
See on kood, mille paigutate faili 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);
See on sinu fail currentdetails.js. Ära muretse pikkade koodiridade pärast. Sa õpid varsti kodeerima. Tee oma HTML-dokumendis muudatusi järgmiselt:
<html> <head> <title>My External JavaScript Code!!!</title> <script type="text/javascript" src="currentdetails.js"> </script> </head> <body> </body> </html>
⚠️ Hoiatus: Ülaltoodud pärandskript lisab igale tunnile eesliiteks nulli, seega kuvatakse kell 11 hommikul kujul 011. See määrab ka hours1 ilma seda deklareerimata, mis loob kaudse globaalse muutuja ja annab ranges režiimis vea. Allolev parandatud versioon lahendab mõlemad vead.
Sama faili moodne ümberkirjutus on lühem, deklareerib kõik muutujad ja täidab väärtused õigesti:
// 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;
Proovi väljund:
Today is 29 - July - 2026. Current time is 09:05:07 AM.
Kuidas siduda välist JavaSkriptifail õigesti
Kolm detaili otsustavad, kas väline fail üldse laaditakse: atribuudis src kirjutatud tee, skriptisildi asukoht dokumendis ja sellele rakendatud laadimisatribuut.
Teed lahendatakse HTML-dokumendi suhtes, välja arvatud juhul, kui on esitatud kaldkriips või täielik aadress.
| allika väärtus | Tähendus | Otsustab |
|---|---|---|
| praegused detailid.js | Sama kaust HTML-lehega | /pages/currentdetails.js |
| js/praeguseddetailid.js | Praeguse kausta alamkaust | /pages/js/currentdetails.js |
| ../praeguseddetailid.js | Üks kaust praegusest kõrgemal | /praeguseddetailid.js |
| /assets/js/currentdetails.js | Absoluutne tee saidi juurest | /assets/js/currentdetails.js |
Laadimise atribuut kontrollib, millal brauser HTML-i parsimise lõpetab faili käivitamiseks. Allolev tabel võtab kokku kolm saadaolevat käitumist.
| Atribuut | Lae | Täitmise hetk | Tellimus säilitatud |
|---|---|---|---|
| mitte ükski | Blokeerib HTML-i parsimise | Kohe pärast allalaadimist | Jah |
| edasi lükkama | Paralleelselt parsimisega | Pärast dokumendi parsimist | Jah |
| async | Paralleelselt parsimisega | Niipea kui allalaadimine lõpeb | Ei |
<!-- 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>
💡 Näpunäide: . type="text/javascript" atribuut on HTML5-s valikuline ja selle võib välja jätta. Hoidke seda ainult väga vanade brauserite toetamisel või asendage see järgmisega: type="module" impordi- ja ekspordiavalduste kasutamisel.
Sisemine vs väline JavaSkript: peamised erinevused
Allolev võrdlus asetab mõlemad paigutused kõrvuti tegurite alusel, mis tavaliselt valikut määravad.
| Faktor | sisemine JavaScript | Väline JavaScript |
|---|---|---|
| Ladustamiskoht | HTML-faili sees | Eraldi fail laiendiga .js |
| Kasuta mitmel lehel uuesti | Nõuab kopeerimist igale lehele | Iga leht viitab ühele failile |
| Brauseri vahemällu salvestamine | Iga lehega uuesti alla laaditud | Vahemällu salvestatud üks kord ja uuesti kasutatud |
| Hooldustööd | Kõrge, kui kood on jagatud | Madal, üks fail redigeerimiseks |
| Täiendav HTTP-päring | Ei | Jah, üks faili kohta |
| Silumine | Pikas HTML-failis on see raskem | Lihtsam selgete failinimede ja reanumbritega |
| Kõige paremini sobib | Lühike leheküljepõhine loogika | Jagatud teegid ja pikad skriptid |
Millal kasutada sisemist ja välist JavaScript Code?
Kui teil on konkreetse veebilehe jaoks vaid paar rida koodi, siis on parem oma JavaSkriptikood HTML-dokumendi sees.
Teisest küljest, kui teie JavaKui skriptikoodi kasutatakse paljudel veebilehtedel, peaksite kaaluma kee kasutamistping oma koodi eraldi faili. Sellisel juhul, kui soovite oma koodis muudatusi teha, peate muutma ainult ühte faili, mis teeb koodi haldamise lihtsaks. Kui teie kood on liiga pikk, on parem see eraldi failis hoida. See aitab hõlpsamini siluda.
Algajatele on praktiline reegel umbes kümne rea piirmäär. Lühemad ja leheküljespetsiifilised tekstid võivad jääda sisemisele failile, pikemad või jagatud tekstid aga välisele failile.
Järjekorras JavaSkript ja miks seda tuleks vältida
Kolmas paigutus eksisteerib vanematel lehtedel, kus kood kirjutatakse otse HTML-atribuudi sisse. Kuigi see ikka veel töötab, segab see struktuuri käitumisega ning seda ei saa vahemällu salvestada, taaskasutada ega katta range sisuturbepoliitikaga.
<!-- 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>
Kui olete skriptide paigutamisega mugavalt kursis, jätkake JavaSkriptimassiivi meetodid, uuring silmuseid JavaScriptja töötage läbi praktiline JavaSkriptikoodi näitedVälised failid muudavad ka brauseri salvestusloogika haldamise palju lihtsamaks, näiteks küpsised sees JavaScript.
