Conectarea unui fișier extern JavaScript

În articolul anterior, codul JavaScript era definit direct pe pagina web. Există însă o altă modalitate de conectare a codului JavaScript, care presupune plasarea codului în fișiere externe și conectarea lor folosind tagul <script>.

Deci, în tema anterioară, am creat o pagină HTML numită index.html, situată în directorul "app". Acum, vom crea în același director un nou subdirector. Îl vom numi "js". Acesta va fi destinat stocării fișierelor cu cod JavaScript. În acest subdirector, vom crea un nou fișier text, pe care îl vom numi main.js. Fișierele cu cod JavaScript au extensia .js. Astfel, vom avea următoarea structură de proiect în directorul "app":

Deschideți fișierul main.js într-un editor de text și identificați în el următorul cod:

document.write("<h2>Primul program în JavaScript</h2>"); // afișăm un titlu
document.write("Salut, lume!");                           // afișăm text obișnuit

Aici, pentru a adăuga conținut pe pagina web, se folosește metoda document.write. Primul apel al metodei document.write afișează un titlu <h2>, iar al doilea apel afișează text obișnuit.

Pentru a asigura compatibilitatea cu codificarea paginii index.html pentru fișierul cu cod JavaScript, este de asemenea recomandat să se seteze codificarea utf-8. Când lucrați în Visual Studio Code, acest editor setează automat codificarea UTF-8.

Acum vom conecta acest fișier la pagina web index.html:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <script src="js/main.js"></script>
</body>
</html>

Pentru a conecta un fișier JavaScript la o pagină web, se utilizează de asemenea tagul <script>, la care se adaugă atributul src. Acest atribut indică calea către fișierul script. În cazul nostru, se utilizează o cale relativă. Deoarece pagina web este în aceeași mapă cu directorul js, putem folosi calea js/main.js.

De asemenea, este important să reținem că după tagul de deschidere <script> trebuie să urmeze neapărat tagul de închidere </script>.

După deschiderea fișierului index.html într-un browser, va apărea mesajul:

În opoziție față de definirea codului JavaScript direct în pagina HTML, plasarea acestuia în fișiere externe are mai multe avantaje:

Putem reutiliza același cod pe mai multe pagini web.
ișierele JavaScript externe pot fi păstrate în cache de către browser, ceea ce reduce încărcarea serverului la accesarea ulterioară a paginii și necesită încărcarea unei cantități mai mici de informații către browser.
Codul paginii web devine mai "curat". Conține doar marcajele HTML, în timp ce codul comportamental este stocat în fișiere externe. În final, este posibil să separăm procesul de creare a codului HTML de scrierea codului JavaScript.

De aceea, de obicei, este preferabil să se utilizeze codul JavaScript în fișiere externe, în loc de a-l insera direct în pagină cu ajutorul elementului script.

Încărcarea asincronă și execuția amânată

Adesea, paginile web au o structură complexă, iar anumite blocuri pe pagină HTML, în care se încarcă fișierele JavaScript, sunt create dinamic, ceea ce poate complica gestionarea fișierelor JavaScript. Pentru a controla încărcarea fișierului cu cod JavaScript, browser-ul oferă două atribute: async și defer.

Atributul async garantează că procesarea codului HTML nu va fi suspendată atunci când browser-ul întâlnește elementul <script>. Fișierul JavaScript este descărcat în mod asincron (de aici și numele atributului - async). În acest caz, codul HTML continuă să fie procesat până când fișierul JavaScript corespunzător este descărcat. Când fișierul JavaScript este descărcat, procesarea HTML se oprește și începe execuția fișierului JS descărcat. După finalizarea execuției codului JavaScript, procesarea HTML continuă.

Exemplu de utilizare a atributului async:

<script async src="js/main.js"></script>

Atributul defer asigură, de asemenea, că procesarea codului HTML nu va fi suspendată. Pe de altă parte, codul sursă JavaScript este executat doar după ce întregul cod HTML a fost procesat complet. Astfel, execuția codului JavaScript este amânată (de aici și denumirea - defer, în traducere în engleză).

Exemplu de utilizare a atributului defer:

<script defer src="js/main.js"></script>