Bine ai venit la cursul pentru începători al MDN! În acest prim articol vom examina limbajul JavaScript de la un nivel înalt, răspunzând la întrebări precum „ce este?” și „ce face”, asigurându-ne că ești confortabil cu scopul limbajului JavaScript.

Condiții necesare: Cunoștințe de bază de calculator, o înțelegere de bază a limbajelor HTML și CSS.
Obiectiv: Să te familiarizezi cu ceea ce este JavaScript, ce poate face și cum se potrivește într-un site web.

O definiție de nivel înalt

JavaScript este un limbaj de programare care îți permite să implementezi lucruri complexe pe paginile web — de fiecare dată când o pagină web face mai mult decât să afișeze informații statice pentru ca tu să te uiți — afișând actualizări de conținut în timp util sau hărți interactive, grafice animate 2D/3D, video jukebox, etc. — poți să pariezi probabil că JavaScript este implicat. Este cel de-al treilea layer al tortului de layere de tehnologii web standarde, dintre care două (HTML și CSS) le-am acoperit în detaliu în alte părți ale Zonei de Învățare.

  • HTML este limbajul de marcare pe care îl folosim pentru a structura și a da sens conținutului nostru web, de exemplu, definind paragrafe, titluri și tabele de date, sau încadrând în pagină imagini și videoclipuri.
  • CSS este limbajul regulilor de stil pe care le utilizăm pentru a aplica stilul conținutul nostru HTML, de exemplu setarea culorilor de fundal și a fonturilor, și aranjarea conținutului nostru în mai multe coloane.
  • JavaScript este un limbaj de scripting care îți permite să creezi conținut dinamic actualizat, de a controla multimedia, de a anima imagini și aproape orice altceva (Bine, nu totul, dar este uimitor ceea ce poți obține cu câteva linii de JavaScript).

Cele trei layere se construiesc unul peste altul frumos. Să luăm ca exemplu o simplă etichetă de text. Putem marca acest lucru folosind HTML pentru a da structură și scop:

<p>Jucătorul 1: Chris</p>

Apoi putem adăuga câteva linii de CSS în completare pentru a-l face să arate bine:

p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor:pointer;
}

Și, în sfârșit, putem adăuga JavaScript pentru a implementa comportamentul dinamic:

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

Încearcă să dai clic pentru a vedea ce se întâmplă (reține de asemenea, că poți găsi acest demo pe GitHub — vezi codul sursă sau rulați-l live)!

JavaScript poate face mai mult decât atât — să explorăm mai în detaliu.

Ce poate face cu adevărat?

Limbajul JavaScript de bază constă în câteva funcții comune care îți permit să faci lucruri precum:

  • Stochezi valori utile în interiorul variabilelor. În exemplul de mai sus de exemplu, solicităm introducerea unui nume nou și după îl salvăm într-o variabilă numită name.
  • Operații pe fragmente de text (cunoscute ca „șiruri de caractere” în programare). În exemplul de mai sus, am luat șirul „Jucător 1: ” și l-am adăugat la variabila name pentru a crea eticheta completă de text, de exemplu „Jucător 1: Chris”.
  • Rularea codului ca răspuns la anumite evenimente care apar pe o pagină web. Am folosit evenimentul click din exemplul de mai sus pentru a detecta momentul în care butonul este apăsat și după se execută codul care actualizează eticheta de text.
  • Și mult mai mult!

Ceea ce este și mai interesant este totuși funcționalitatea construită deasupra limbajului de bază JavaScript. Așa numitele Interfețe de programare a aplicațiilor (API) oferă superputeri suplimentare pentru a le utiliza în codul tău JavaScript.

APIurile sunt seturi de blocuri de coduri gata făcute care permit unui dezvoltator să implementeze programe care altfel ar fi greu sau imposibil de implementat. Acestea fac același lucru pentru programare precum seturile de mobilier gata făcute pentru construirea de locuințe — este mult mai ușor să iei panouri deja tăiate și să le înșurubezi împreună pentru a face un raft de bibliotecă decât de a realiza singur designul, du-te și găsește lemnul corect, tăie toate panourile la dimensiunea și forma corectă, găsește șuruburile de dimensiunea corectă și apoi le așezi împreună pentru a face o bibliotecă.

Acestea se încadrează în general în două categorii.

APIurile browserului sunt construite în browserul tău web, și pot expune date din mediul înconjurător al calculatoului sau pot face lucruri complexe. De exemplu:

  • APIul  DOM(Document Object Model) îți pemite să manipulezi codul HTML și CSS, să creezi, să elimini și să modifici codul HTML, să aplici dinamic noi stiluri pe pagina ta, etc. De fiecare dată când vezi o fereastră popup care apare pe o pagină, sau un nou conținut afișat (așa cum am vazut mai sus în demoul nostru simplu) de exemplu, acesta este DOM în acțiune.
  • APIul Geolocation preia informațiile geografice. Acesta este modul în care Google Maps poate să îți identifice locația și să te poziționeze pe hartă.
  • APIurile Canvas și WebGL îți permit să creezi grafice animate 2D și 3D. Oamenii fac lucruri extraordinare utilizând aceste tehnologii web —  vezi Experimente Chrome și webglsamples.
  • APIurle Audio și Video precum HTMLMediaElement și WebRTC îți permit să faci lucruri interesante cu multimedia, cum ar fi să redai conținut audio și video chiar în pagina web sau să preiei conținut video de pe camera web și să-l afișezi pe calculatorul altei persoane (încearcă demoul nostru Snapshot să îți faci o idee).

Notă: Multe dintre demourile de mai sus nu vor funcționa într-un browser mai vechi — atunci când experimentezi, este o idee bună să folosești un browser modern ca Firefox, Chrome, Edge sau Opera pentru a rula codul tău. Va trebui să iei în considerare testarea pe mai multe browsere atunci când te aproprii de livrarea codului de producție (de exemplu cod real pe care îl vor utiliza clienți reali).

APIurile terțe părți nu sunt construite în browser implicit, și în general trebuie să iei codul și informațiile de undeva de pe web. De exemplu:

  • APIul Twitter îți permite să afișezi cele mai recente tweeturi pe siteul tău.
  • APIul Google Maps îți permite să incluzi hărți personalizate pe siteul tău, și alte astfel de funcționalități.

Notă: Aceste APIuri sunt avansate, și nu vom acoperi niciunul dintre aceste module. Poți afla mai multe despre acestea în modulul API web pe partea de client.

Sunt de asemenea mai multe disponibile! Cu toate acestea, nu te exalta prea mult. Nu vei putea construi următorul Facebook, Google Maps sau Instagram după studierea limbajului JavaScript pentru 24 de ore — sunt o mulțime elemente de bază care trebuiesc mai întâi acoperite. Și de aceea ești aici — să mergem mai departe!

Ce face JavaScript pe pagina ta?

Aici vom începe să ne uităm la un anumit cod, și în același timp explorăm ce se întâmplă atunci când rulezi cod JavaScript în pagina ta.

Să revedem pe scurt ceea ce se întâmplă atunci când încarci o pagină web într-un browser (am discutat mai întâi în articolul nostru How CSS works). Când încarci o pagină web în browserul tău, execuți codul tău (HTML, CSS, și JavaScript) în interiorul unui mediu de execuție (fila browserului). Aceasta este ca o fabrică care ia materii prime (codul) și rezultă un produs (pagina web).

Codul JavaScript este executat de motorul JavaScript al browserului, după ce codurile HTML și CSS au fost asamblate și puse împreună într-o pagină web. Acest lucru asigură că structura și stilul paginii sunt deja la locul lor până ce JavaScript se execută.

Acesta este un lucru bun, ca o utilizare frecventă a JavaScript este de a modifica dinamic HTML și CSS pentru a actualiza o interfața utilizator, prin APIul Document Object Model (așa cum am menționat mai sus). Dacă codul JavaScript a fost încărcat și a încercat să se execute înainte ca HTML și CSS să aibă efect, atunci vor apărea erori.

Securitatea browserului

Fiecare filă de browser este propria găleată separată pentru a rula codul (aceste găleți sunt numite „medii de execuție” în termeni tehnici) — acest lucru înseamnă că în majoritatea cazurilor, codul din fiecare filă este rulat complet separat, iar codul dintr-o filă nu poate afecta în mod direct codul dintr-o altă filă — sau pe un alt site. Aceasta este o măsură bună de securitate — în caz contrar, atunci pirații ar putea începe să scrie cod pentru a fura informații de la alte siteuri și alte astfel de lucruri rele.

Notă: Există modalități de a trimite cod și date între diferite siteuri/file în mod sigur, dar acestea sunt tehnici avansate pe care nu le vom acoperi în acest curs.

Ordinea de execuție JavaScript

Când browserul întâlnește un bloc de JavaScript, acesta rulează în general, în ordinea de sus în jos. Asta înseamnă că trebuie să fii atent la ordinea în care ai pus lucrurile. De exemplu, să revenim la codul bloc de JavaScript pe care l-am văzut în primul exemplu:

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

Aici selectăm un paragraf de text (linia 1), după îi atașăm un event listener (linia 3) astfel încât atunci când se face clic pe paragraf, se execută blocul de cod updateName(). Blocul de cod updateName() (aceste tipuri de bloc de cod reutilizabil se numesc „funcții”) solicită utilizatorului un nume nou și după inserează acel nume în paragraf pentru actualizarea afișajului. 

Dacă modifici ordinea primelor două linii de cod, nu va mai funcționa — în schimb, vei primi o eroare returnată în consola browserului — TypeError: para is undefined. Aceasta înseamnă că obiectul para nu există încă, așadar nu-i putem adăuga un event listener.

Notă: Aceasta este o eroare foarte frecventă — trebuie să fii atent ca obiectele care fac referire în codul tău există înainte de a încerca să faci lucruri cu ele.

Cod interpretat față de cod compilat

Probabil că ai auzit termenii de interpretare și compilare în contextul programării. JavaScript este un limbaj interpretat — codul este rulat de sus în jos și rezultatul executării codului este returnat imediat. Nu trebuie să transformi codul într-o altă formă înainte ca browserul să-l ruleze.

Limbajele compilate pe de altă parte sunt transformate (compilate) într-o altă formă înainte de a fi executate de calculator. De exemplu C/C++ sunt compilate în limbaj de asamblare care după este rulat de calculator.

Ambele abordări au avantaje diferite, pe care nu le vom discuta în acest moment.

Codul server-side față de codul client-side

S-ar putea să fi auzit de termenii cod server-side și client-side, în special în contextul dezvoltării web. Cod client-side este codul care se execută pe calculatorul utilizatorului — atunci când este vizualizată o pagină web, codul de pagină client-side este descărcat, apoi executat și afișat de browser. În acest modul JavaScript vorbim în mod explicit despre JavaScript pe partea de client.

Pe de altă parte, codul de pe server este rulat pe server, iar rezultatele acestuia sunt descărcate și afișate în browser. Exemple de limbaje populare pe partea de server includ PHP, Python, Ruby, și ASP.NET. Și JavaScript! JavaScript poate fi utilizat de asemenea ca limbaj pe partea de server, de exemplu în mediul popular Node.js — poți afla mai multe despre JavaScript pe partea de server în subiectul nostru Situri Dinamice – programare pe partea de server.

Cuvântul dinamic este utilizat pentru a descrie ambele limbaje JavaScript pe partea de client și server — se referă la capacitatea de a actualiza afișarea unei pagini web/aplicație pentru a afișa diferite lucruri în circumstanțe diferite, generând conținut nou atunci când este necesar. Codul de pe server generează în mod dinamic conținut nou pe server, de exemplu extragerea de date dintr-o bază de date, în timp ce JavaScript pe partea de client generează în mod dinamic nou conținut în interiorul browserului pe client, de exemplu crearea unui nou tabel HTML, introducerea datelor solicitate de la server în acesta, apoi afișarea tabelului într-o pagină web afișată utilizatorului. Sensul este ușor diferit în cele două contexte, dar legate, și ambele abordări (server-side și client-side) de obicei lucrează împreună.

O pagină web fără conținut actualizat dinamic este denumită statică — arată același conținut tot timpul.

Cum adaugi JavaScript în pagina ta?

JavaScript se adaugă paginii tale HTML în mod similar ca CSS. În timp ce CSS folosește elemente <link> pentru a aplica foi de stil externe și elemente <style> pentru a aplica foi de stil interne în HTML, JavaScript are nevoie doar de un singur prieten în lumea HTML — elementul <script>. Să învățăm cum funcționează.

JavaScript intern

  1. Mai întâi trebuie să faci o copie locală a fișierului nostru de exemplu apply-javascript.html. Salvează-l într-un director într-un loc sigur.
  2. Deschide fișierul în browserul tău web și în editorul de text. Vei vedea că HTML creează o pagină web simplă care conține un buton pe care se poate da clic.
  3. După mergi la editorul tău de text și adaugă următoarele linii chiar înaintea tagului </body> de închidere:
    <script>
    
      // JavaScript goes here
    
    </script>
  4. Acum vom adăuga JavaScript în interiorul elementului nostru <script> pentru a face ca pagina să facă ceva mai interesant — adaugă următorul cod chiar înainte de linia  „// JavaScript goes here”:
    function createParagraph() {
      var para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
    
    var buttons = document.querySelectorAll('button');
    
    for (var i = 0; i < buttons.length ; i++) {
      buttons[i].addEventListener('click', createParagraph);
    }
  5. Salvează fișierul tău și actualizează browserul — acum ar trebui să vezi că atunci când faci clic pe buton, un nou paragraf este generat și adăugat mai jos.

Notă: Dacă exemplul tău nu pare că funcționează, parcurge din nou pașii și verifică dacă ai făcut totul bine. Ai salvat copia ta locală cu codul de început ca fișier .html? Ai adăugat elementul tău <script> chiar înaintea tagului </body>? Ai introdus JavaScript exact așa cum este arătat? JavaScript este case sensitive, și foarte pretențios, așadar trebuie să introduci sintaxa exact așa cum îți este arătat, altfel este posibil să nu funcționeze.

Notă: Poți vedea această versiune pe GitHub ca apply-javascript-internal.html (de asemenea îl poți vedea și live).

JavaScript extern

Acest lucru funcționează foarte bine, dar dacă am fi vrut să punem codul nostru JavaScript într-un fișier extern? Să explorăm acest lucru acum.

  1. Mai întâi, creează un nou fișier în același director ca fișierul tău HTML. Denumește-l script.js — asigură-te că are extensia numelui de fișier .js, pentru a fi recunoscut ca fișier JavaScript.
  2. Apoi, copiază tot scriptul din elementul tău <script> curent și adaugă-l în fișierul .js. Salvează fișierul.
  3. Acum înlocuiește elementul curent <script> cu următorul:
    <script src="script.js"></script>
  4. Salvează și actualizează browserul tău, și ar trebui să vezi același lucru! Funcționează la fel, dar acum avem codul JavaScript într-un fișier extern. Acesta este, în general, un lucru bun în ceea ce privește organizarea codului tău și reutilizarea acestuia în mai multe fișiere HTML. În plus, codul HTML este mai ușor de citit fără niște bucăți mari de scripturi puse în interiorul fișierului.

Notă: Poți vedea această versiune pe GitHub ca apply-javascript-external.html și script.js (de asemenea îl poți vedea și live).

JavaScript inline handlers

Reține că uneori vei întâlni biți de cod JavaScript real, care se află în interiorul HTML. Poate arăta asemănător:

function createParagraph() {
  var para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}
<button onclick="createParagraph()">Click me!</button>

Poți încerca această versiune a demo-ului nostru de mai jos.

Acest demo are exact aceeași funcționalitate ca și în cele două secțiuni anterioare, cu excepția faptului că elementul <button> include un handler inline onclick pentru a executa funcția atunci când butonul este apăsat.

Totuși nu face acest lucru. Este o practică greșită de a polua codul tău HTML cu JavaScript și este ineficient — ar trebui să incluzi atributul onclick="createParagraph()" pentru fiecare buton pentru care vrei să se aplice JavaScript. 

Folosirea unui constructor pur JavaScript îți permite să selectezi toate butoanele folosind o instrucțiune. Codul pe care l-am folosit mai sus pentru a servi acestui scop arată astfel:

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

Acesta poate părea un pic mai lung decât atributul onclick, dar va funcționa pentru toate butoanele indiferent de câte sunt pe pagină și câte sunt adăugate sau eliminate. Codul JavaScript nu trebuie schimbat. 

Notă: Încearcă să editezi versiunea ta de apply-javascript.html și adaugă câteva butoane în fișier. Atunci când reîncarci pagina, ar trebui ca atunci când faci clic pe toate butoanele, acestea vor crea un paragraf. Grozav, nu-i așa?

Comentarii

Ca și în cazul codului HTML și CSS, este posibil să adaugi comentarii în codul JavaScript care vor fi ignorate de browser, și există doar pentru a oferi instrucțiuni pentru colegii tăi dezvoltatori despre modul în care funcționează codul (și pentru tine, dacă te întorci la codul tău peste 6 luni nu îți vei aminti ce ai făcut). Comentariile sunt foarte utile, și ar trebui să le folosești des, în special pentru aplicațiile mai mari. Există două tipuri:

  • O singură linie de comentariu scris după două forward slash (//), de exemplu:
    // Sunt un comentariu
  • Un comentariu pe mai multe linii este scris între șiruri de caractere /* și */, de exemplu :
    /*
      Și eu sunt
      un comentariu
    */

De exemplu, am putea adnota ultimul nostru demo JavaScript cu comentarii astfel:

// Funcție: creează un nou paragraf și îl adaugă în partea de jos al elementului HTML body.

function createParagraph() {
  var para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

/*
  1. Obține referința la toate butoanele de pe pagină și sunt sortate într-o matrice.
  2. Parcurge toate butoanele și adaugă un click event listener pe fiecare.

  Când se apasă pe orice buton, se va executa funcția createParagraph().
*/

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

Rezumat

Iată așadar, primul tău pas în lumea JavaScript! Am început doar cu teoria, pentru a te obișnui cu JavaScript și pentru a înțelege ce fel de lucruri poți face cu aceasta. Pe parcurs ai văzut câteva exemple de cod și ai aflat cum JavaScript se potrivește cu restul codului de pe site-ul tău.

JavaScript poate părea un pic cam descurajant chiar acum, dar nu-ți face griji — în acest curs vei începe cu pași simpli care vor avea sens mergând înainte. În următorul articol vei merge direct în practică, prin construirea propriilor exemple în JavaScript.

În acest modul

Document Tags and Contributors

 Contributors to this page: alexandracaulea
 Last updated by: alexandracaulea,