JavaScript: Plasarea codului

Elementul script

Când JavaScript este plasat într-un document HTML, trebuie să se afle într-un element script. Un element script este utilizat pentru a lega un fișier JavaScript extern sau pentru a include scripturi în linie (inline) (fragmente de script în fișierul HTML). Un element script pentru conectarea la un fișier JavaScript extern arată astfel:

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

Scriptul în linie are avantajul că atât HTML cât și JavaScript sunt într-un singur fișier, ceea ce este convenabil pentru dezvoltare rapidă și testare. Este recomandat să aveți JavaScript într-un fișier separat pentru funcțiile JavaScript care pot fi utilizate în mai multe pagini și, de asemenea, pentru a separa conținutul de comportament.

Exercițiu: Discuție în funcție de specificații HTML5.

JavaScript în linie

Utilizarea JavaScript inline vă permite să lucrați cu ușurință cu HTML și JavaScript în aceeași pagină. Acest lucru este utilizat în mod obișnuit pentru testarea temporară a unor idei și în situațiile în care codul scriptului este specific acelei pagini.

<script>
  // JavaScript code here
</script>

Marcatori de comentarii HTML în linie

Comentariile HTML în linie se folosesc pentru a împiedica browserele mai vechi care nu înțeleg elementul scriptului să afișeze codul scriptului în text simplu.

<script>
  <!--
  // JavaScript code here
  // -->
</script>

Browserele mai vechi care nu înțeleg elementul script vor interpreta întregul conținut al elementului script de mai sus ca un singur comentariu HTML, începând cu „”, ignorând în mod efectiv scriptul complet. Dacă comentariul HTML nu ar fi fost acolo, întregul script ar fi afișat utilizatorului ca text simplu de către aceste browsere.

Browserele actuale care știu despre elementul script vor ignora prima linie a unui element script, dacă începe cu „<!--”. În cazul de mai sus, prima linie a codului JavaScript real este, prin urmare, linia „// JavaScript code here”.

Ultimul rând al scriptului, „// -->”, este un comentariu JavaScript cu o singură linie care împiedică interpretarea etichetei de comentariu HTML „-->” ca JavaScript.

Utilizarea marcatorilor de comentarii este rareori necesară în zilele noastre, deoarece browserele care nu recunosc elementul script sunt practic inexistente. Aceste browsere timpurii erau Mosaic, Netscape 1 și Internet Explorer 2. De la Netscape 2.0 în decembrie 1995 și Internet Explorer 3.0 în august 1996, browserele respective au putut interpreta JavaScript. Orice browser modern care nu acceptă JavaScript va recunoaște în continuare eticheta <script> și nu o va afișa utilizatorului.

JavaScript XHTML în linie

În XHTML, metoda este oarecum diferită:

<script>
  // <![CDATA[
  // [Todo] JavaScript code here!
  // ]]>
</script>

Rețineți că eticheta <![CDATA[ este comentată. // împiedică browserul să interpreteze greșit <![CDATA[ ca o declarație JavaScript. (Aceasta ar fi o eroare de sintaxă).

Conectarea la scripturi externe

JavaScript este stocat în mod obișnuit într-un fișier, astfel încât să poată fi utilizat de multe pagini web de pe site-ul dvs. Această metodă este considerată o bună practică. Acest lucru se datorează faptului că separă comportamentul unei pagini (JavaScript) de conținutul său (HTML) și facilitează actualizarea codului. Dacă mai multe pagini se leagă la același fișier JavaScript, trebuie doar să schimbați codul într-un singur loc.

Adăugați src="script.js" la eticheta script de deschidere. Aceasta înseamnă că codul JavaScript pentru această pagină va fi localizat într-un fișier numit „script.js” care se află în același director cu pagina web. Dacă fișierul JavaScript se află în altă parte, trebuie să schimbați atributul src la acea cale. De exemplu, dacă fișierul dvs. JavaScript se numește „script.js” și se află într-un director numit „js”, src ar fi „js / script.js”.

Localizarea elementelor scriptului

Elementul script poate apărea aproape oriunde în fișierul HTML.

O locație standard se află în elementul head. Totuși, este permisă plasarea în body.

<!DOCTYPE html>
<html>
<head>
  <title>Web page title</title>
  <script></script>
</head>
<body>
<!-- HTML code here -->
</body>
</html>

Există totuși câteva bune practici pentru accelerarea site-ului dvs. web sugerate de Yahoo! Developer Network care specifică o altă destinație de plasare pentru etichetele de script: plasarea scripturilor în partea de jos, chiar înainte de eticheta </body>. Acest lucru accelerează descărcarea și, de asemenea, permite manipularea directă a DOM în timp ce pagina se încarcă. Este, de asemenea, o practică bună separarea documentelor HTML de codul CSS pentru o gestionare mai ușoară.

<!DOCTYPE html>
<html>
<head>
  <title>Web page title</title>
</head>
<body>
<!-- HTML code here -->
<script src="script.js"></script>
</body>
</html>

Exercițiu: Comparați performanța plasării scripturilor js în partea de jos a corpului față de încărcarea în eticheta head.

Controlul evaluării scripturilor externe și blocarea parserului

În mod implicit, executarea JavaScript este „blocarea parserului”. Când browserul întâlnește un script în document, acesta trebuie să întrerupă construcția Document Object Model (DOM), să predea controlul rulării JavaScript și să lase scriptul să se execute înainte de a continua cu construcția DOM.

Ca alternativă la plasarea scripturilor în partea de jos a corpului documentului, încărcarea și executarea scripturilor externe pot fi controlate folosind atribute async sau defer. Scripturile externe asincrone sunt încărcate și executate în paralel cu analiza documentelor. Scriptul va fi executat de îndată ce va fi disponibil.

<!DOCTYPE html>
<html>
<head>
  <title>Web page title</title>
  <script async src="script.js"></script>
</head>
<body>
<!-- HTML code here -->
</body>
</html>

Scripturile externe amânate sunt încărcate în paralel cu analiza documentelor, dar execuția scriptului este amânată până după analizarea completă a documentului.

<!DOCTYPE html>
<html>
<head>
  <title>Web page title</title>
  <script defer src="script.js"></script>
</head>
<body>
<!-- HTML code here -->
</body>
</html>