Inserarea JavaScript în HTML

Limbajul JavasScript a fost introdus inițial pentru a rula în browsere și pentru a gestiona aspectele dinamice ale interfețelor utilizator, de exemplu, validarea intrărilor utilizatorului, modificările conținutului paginii (DOM) sau aspectul interfeței cu utilizatorul (CSS) sau orice gestionare a evenimentelor. Aceasta înseamnă că trebuie să existe un punct de interconectare de la HTML la JS. Elementul HTML <script> joacă acest rol. Este un element HTML obișnuit, iar conținutul său este JS.

Elementul <script> poate apărea aproape oriunde în fișierul HTML, în <head>, precum și în <body>. Există doar câteva criterii pentru alegerea unui loc optim; vezi mai jos.

JavaScript intern versus extern

Elementul <script> fie conține cod JS direct, fie indică un fișier extern resp. URL care conține codul JS prin atributul său src . Prima variantă se numește JavaScript intern sau JavaScript inline, a doua JavaScript extern.

În cazul JavaScript intern, elementul <script> arată astfel:

<script>
  // scrieți codul dvs. JS direct aici. (Această linie este un comentariu în sintaxa JS)
  alert("Hello World!");
</script>

Scripturile interne au avantajul că atât HTML, cât și JS dvs. sunt într-un singur fișier, ceea ce este convenabil pentru o dezvoltare rapidă. Acesta este folosit în mod obișnuit pentru testarea temporară a unor idei și în situațiile în care codul de script este mic sau specific acelei pagini.

Pentru JavaScript extern, elementul <script> arată astfel:

<!--  indicați spre un fișier sau către o adresă URL unde se află codul. (Această linie este un comentariu în sintaxa HTML) -->
<script src="myScript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>

<!-- deși nu există nimic în elementul de script, ar trebui să luați în considerare că specificațiile HTML5  -->
<!-- nu permite abrevierea elementului de script la: <script src="myScript.js" />         -->

Este recomandat să aveți JS într-un fișier separat pentru programele mai mari, în special pentru acelea care sunt folosite pe mai multe pagini. În plus, astfel de divizări acceptă modelul de Separare a preocupărilor: un specialist lucrează pe HTML, iar altul pe JS. De asemenea, acceptă separarea conținutului paginii (HTML) de comportamentul acesteia (JS).

În general, utilizarea scripturilor externe este considerată cea mai bună practică pentru dezvoltarea de software.

JavaScript extern

Atributul src

Adăugarea src="myScript.js" la eticheta script de deschidere înseamnă că codul JS va fi localizat într-un fișier numit myScript.js în același director cu fișierul HTML. Dacă fișierul JS se află în altă parte, trebuie să modificați atributul src la acea cale. De exemplu, dacă se află într-un subdirector numit js, se citește src="js/myScript.js".

Atributul type

JS nu este singurul limbaj de scripting pentru dezvoltarea web, dar JS este cel mai comun pe partea client (PHP rulează pe partea serverului). Prin urmare, este considerat tipul de script implicit pentru HTML5. Notația formală pentru type este: type="text/javascript". Versiunile HTML mai vechi cunosc o mulțime de alte tipuri de script. În zilele noastre, toate sunt clasificate ca moștenire. Câteva exemple sunt: application/javascript, text/javascript1.5, text/jscript, sau text/livescript.

În HTML5, specificația spune că – dacă utilizați JS – atributul type ar trebui să fie omis din elementul de script, atât pentru scripturi interne, cât și pentru scripturi externe.

<!-- NÎn zilele noastre, atributul type este inutil -->
<script type="text/javascript">...</script>

<!-- HTML5 code -->
<script>...</script>

Atributele async și defer

Browserele vechi folosesc doar unul sau două instrucțiuni pentru a citi și analiza HTML, JS, CSS, … . Acest lucru poate duce la o experiență proastă a utilizatorului (UX) din cauza timpului de latență la încărcarea HTML, JS, CSS, imagini, … secvenţial, una după alta. Când pagina se încarcă pentru prima dată, utilizatorul poate avea impresia unui sistem lent.

Browserele actuale pot executa multe sarcini în paralel. Pentru a iniția această execuție paralelă în ceea ce privește încărcarea și execuția JS, elementul <script> poate fi extins cu cele două atribute async și defer.

Atributul async duce la încărcarea asincronă a scriptului (în paralel cu alte sarcini), și la execuție de îndată ce este disponibil.

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

defer acționează similar. Diferă de async prin faptul că execuția este amânată până când pagina este complet analizată.

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

Locația elementelor <script>

Elementul script poate apărea aproape oriunde în fișierul HTML. Dar există, totuși, câteva bune practici pentru accelerarea unui site web. Unii sugerează să se localizeze chiar înainte de eticheta de închidere </body>. Acest lucru accelerează descărcarea și permite, de asemenea, manipularea directă a modelului obiect document (DOM) în timp ce este redat. Dar un comportament similar este inițiat de atributele async și defer descrise mai sus.

<!DOCTYPE html>
<html>
<head>
  <title>Example page</title>
</head>
<body>
  <!-- Codul HTML merge aici -->
  <script src="myScript.js"></script>
</body>
</html>

Elementul <noscript>

Se poate întâmpla ca să fie dezactivat JS în browserele utilizatorilor din motive de securitate sau din alte motive. Sau, folosesc browsere foarte vechi care nu pot rula deloc JS. Pentru a informa utilizatorii în astfel de cazuri despre situație, există elementul <noscript>. Conține text care va fi afișat în browser. Textul trebuie să explice că niciun cod JS nu va fi executat.

<!DOCTYPE html>
<html>
<head>
  <title>Example page</title>
  <script>
    alert("Hello World!");
  </script>
  <noscript>
    alert("Sorry, the JavaScript part of this page will not be executed because JavaScript is not running in your browser. Is JavaScript intentionally deactivated?");
  </noscript>
</head>
<body>
  <!-- HTML code goes here -->
</body>
</html>

JavaScript în fișiere XHTML

XHTML folosește o sintaxă mai strictă decât HTML. Acest lucru duce la mici diferențe.

În primul rând, pentru JavaScript intern este necesar ca scripturile să fie introduse și terminate cu cele două linii suplimentare prezentate în exemplul următor.

<script>
  // <![CDATA[
  alert("Hello World!");
  // ]]>
</script>

În al doilea rând, pentru JavaScript extern este necesar atributul type .

(Include texte din Wikibooks, traduse și adaptate de Nicolae Sfetcu)

Ghid WordPress pentru dezvoltatori

WordPress este o platformă pentru site-uri web rapidă, fiabilă, cu facilități multiple pentru dezvoltatori și ușor de utilizat. Totusi, dezvoltatorii și beneficiarii au de multe ori nevoie să adauge funcționalități suplimentare pentru a răspunde nevoilor lor. Acest ghid oferă unele … Citeşte mai mult

Nu a fost votat 19.07 lei Selectează opțiunile

Ghid WordPress pentru începători

WordPress combină simplitatea pentru utilizatorii şi editori cu complexitate suportului software pentru dezvoltatori. Acest lucru îl face mai flexibil, fiind în acelaşi timp uşor de utilizat. Simplitatea sa face posibilă instalarea şi publicarea online rapid. Nimic nu ar trebui să … Citeşte mai mult

Nu a fost votat 14.29 lei – 26.19 lei Selectează opțiunile

Proiectarea, dezvoltarea şi întreţinerea siturilor web

Un ghid pentru dezvoltatorii web, cu accent pe HTML, XML, JavaScript, SQL, tehnologii web, software web, software pentru dezvoltare web, aplicaţii web, şabloane pentru aplicaţii web, AJAX, servicii web, sindicalizarea web, web design, situri web, găzduirea web, analiza siturilor web, … Citeşte mai mult

Nu a fost votat 14.29 lei – 57.21 lei Selectează opțiunile