Consola browser-ului și console.log.
Instrumentul esențial în lucrul cu JavaScript este consola browser-ului, care permite depanarea programului. Multe browsere moderne au o consolă similară. De exemplu, pentru a deschide consola în Google Chrome, trebuie să mergem în meniul Alte instrumente (More Tools) -> Instrumente pentru dezvoltatori (Developer tools):
După aceasta, în partea de jos a browser-ului se va deschide consola:
Putem introduce direct în consola browser-ului expresii JavaScript, iar acestea vor fi executate. De exemplu, vom introduce în consolă următorul text:
alert("Salut lume");Și ceea ce este remarcabil în lucrul cu consola, la introducerea textului, aceasta oferă sugestii contextuale cu numele pe care dorim să le introducem, facilitând introducerea și reducând posibilele erori:
Funcția alert() afișează în browser o fereastră cu un mesaj. În final, după introducerea acestei comenzi și apăsarea tastei Enter, browser-ul va executa această funcție și ne va afișa o fereastră cu mesajul:
Astfel, pentru a scrie și executa cod JavaScript, în principiu nu avem nevoie nici de un editor de text, nici de un fișier de pagină web care să conțină cod JavaScript; este suficientă o singură consolă de browser. Cu toate acestea, introducerea unui cod JavaScript mare și complex în consolă poate fi incomodă, motiv pentru care în continuare pentru toate exemplele se va utiliza codul JavaScript încorporat în pagina HTML.
Afișarea în consolă și console.log.
Pentru a afișa diferite tipuri de informații în consola browser-ului, se utilizează funcția specială console.log(). De exemplu, să definim o pagină HTML cu următorul cod:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>FDC.COM</title>
</head>
<body>
<script>
const sum = 5 + 8;
console.log("Rezultatul operațiunii: ");
console.log(sum);
</script>
</body>
</html>În codul JavaScript, cu ajutorul cuvântului cheie `const`, se declară constanta `sum`, căreia i se atribuie suma a două numere, 5 și 8:
const sum = 5 + 8;Ulterior, prin intermediul metodei console.log(), se afișează un mesaj în consola browser-ului.
console.log("Rezultatul operațiunii");Și la final, tot cu ajutorul metodei console.log(), se afișează în consola browser-ului valoarea constantei sum.
console.log(sum);Și după lansarea paginii web în browser, vom vedea în consola browser-ului rezultatul executării codului:
Foarte util, în consola browser-ului, puteți observa, de asemenea, numerele de linie ale codului, unde exact s-a efectuat afișarea în consolă.
În continuare, ne vom referi des la consolă și vom utiliza funcția console.log.
De asemenea, un astfel de cod am putea să-l introducem direct în consolă:
De asemenea, introducem în mod consecutiv instrucțiuni și după introducerea fiecărei instrucțiuni apăsăm Enter. În acest caz, am introdus două instrucțiuni:
const sum2 = 1 + 2; // definim constanta sum2, care este egală cu suma 1 + 2
console.log(sum2); // afișăm valoarea constantei sum2 în consolăDacă dorim ca codul din consolă să fie plasat pe o nouă linie fără a fi executat, apăsăm combinația de taste Shift + Enter la sfârșitul expresiei JavaScript. După introducerea ultimei instrucțiuni, pentru a executa codul JavaScript introdus, apăsăm pe Enter.
