Execuția codului JavaScript
Când browserul primește o pagină web cu cod HTML și JavaScript, el o interpretează. Rezultatul interpretării, sub formă de diferite elemente - butoane, câmpuri de introducere, blocuri de text etc., le vedem în browser. Interpretarea paginii web are loc secvențial, de sus în jos.
Atunci când browserul întâlnește pe o pagină web un element <script> cu cod JavaScript, intră în acțiune interpretorul JavaScript încorporat. Până când acesta nu își încheie execuția, interpretarea paginii web nu continuă.
Să analizăm un mic exemplu și pentru asta să definim un fișier "index.html" cu următorul cod:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<script>
document.write("Textul inițial");
</script>
</head>
<body>
<h2>Primul titlu</h2>
<script>
document.write("Primul text");
</script>
<h2>Al doilea titlu</h2>
<script>
document.write("Al doilea text");
</script>
</body>
</html>Aici sunt trei inserții de cod JavaScript - una în secțiunea <head> și câte una după fiecare titlu. Vom deschide pagina web în browser și vom vedea că browserul execută codul paginii web într-o succesiune.
Putem observa că mai întâi se execută codul JavaScript din secțiunea <head>, care afișează pe pagina web cu un anumit text:
document.write("Textul inițial");Apoi este afișat primul element HTML standard <h2>:
<h2>Primul titlu</h2>După aceea, se execută a doua inserție de cod JavaScript:
document.write("Primul text");Apoi este afișat al doilea element HTML standard <h2>:
<h2>Al doilea titlu</h2>Și la final se execută ultima inserție de cod JavaScript:
document.write("Al doilea text");După acest pas, browserul va finaliza interpretarea paginii web, iar pagina web va fi complet încărcată. Acest moment este foarte important, deoarece poate afecta performanța. Prin urmare, adesea inserțiile de cod JavaScript sunt plasate înainte de tag-ul de închidere </body>, când partea principală a paginii web este deja încărcată în browser.
Fundamentele sintaxei JavaScript
Înainte de a trece la studierea detaliată a fundamentelor limbajului de programare JavaScript, să examinăm câteva aspecte de bază ale sintaxei sale.
Codul JavaScript constă din instrucțiuni. Fiecare instrucțiune reprezintă o acțiune. Și pentru a separa instrucțiunile unele de altele în JavaScript, după fiecare instrucțiune se pune un punct și virgulă:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<script>
document.write("2 + 5 = "); const sum = 2 + 5; document.write(sum);
</script>
</body>
</html>Aici în codul JavaScript sunt definite trei instrucțiuni:
document.write("2 + 5 = ")Afișează pe pagină textul "2 + 5 = "
const sum = 2 + 5;Cu ajutorul operatorului const se definește constanta sum - o valoare care nu trebuie să se schimbe (deoarece în acest caz îi atribuim o valoare doar o dată și nu o mai modificăm). Această constantă este egală cu suma 2 + 5.
document.write(sum);Afișează pe pagină valoarea constantei sum (adică suma 2 + 5).
Totuși, browserele moderne pot distinge instrucțiile individuale chiar și dacă acestea sunt simple așezate pe linii separate fără punct și virgulă:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<script>
document.write("2 + 5 = ")
const sum = 2 + 5
document.write(sum)
</script>
</body>
</html>Cu toate acestea, pentru a îmbunătăți citibilitatea codului și a reduce numărul posibilelor erori, este recomandat să definim fiecare instrucțiune JavaScript pe o linie separată și să o terminăm cu un punct și virgulă, așa cum am făcut în prima variantă.
Blocurile de cod
Instrucțiunile individuale pot fi grupate în blocuri de cod, care reprezintă un anumit cod între parantezele accolade { bloc de cod }. De exemplu, să definim următoarea pagină:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<script>
document.write("Salut! ");
{
document.write("Cum merge? ");
document.write("De ce nu răspunzi, dormi? ");
}
document.write("Ei, pa...");
</script>
</body>
</html>Aici, programul în JavaScript constă din 4 instrucțiuni. Două dintre aceste instrucțiuni sunt plasate într-un bloc de cod:
{
document.write("Cum merge? ");
document.write("De ce nu răspunzi, dormi? ");
}O instrucțiune este executată înainte de blocul de cod, iar alta - după blocul de cod.
Comentarii
În codul JavaScript pot fi utilizate comentarii. Comentariile nu sunt procesate de interpretorul JavaScript și nu sunt luate în considerare în funcționarea programului. Ele sunt destinate orientării în cod, pentru a indica ceea ce face un anumit cod.
Comentariile pot fi pe o singură linie, pentru care se utilizează două bare oblice: //
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<script>
// afișăm un mesaj
document.write("2 + 5 = ")
// declarăm o constantă și îi atribuim suma numerelor 2 și 5
const sum = 2 + 5
// afișăm valoarea constantei sum
document.write(sum)
</script>
</body>
</html>În afară de comentariile pe o singură linie, pot fi utilizate și comentariile pe mai multe linii. Aceste comentarii sunt încadrate între caracterele /* și */. De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<script>
/* Exemplu de operație aritmetică
și definirea unei constante
în codul JavaScript */
document.write("2 + 5 = ")
const sum = 2 + 5
document.write(sum)
</script>
</body>
</html>