This translation is in progress.

JavaScript este un limbaj de programare care adaugă interactivitate siteului tău (de exemplu: jocuri, răspunsuri atunci când sunt apăsate butoane sau sunt introduse date în formulare, stil dinamic, animație). Acest articol te ajută să începi cu acest limbaj interesant și îți oferă o idee despre ceea ce este posibil.

Ce este JavaScript, de fapt?

JavaScript ("JS" for short) este un dynamic programming language pe deplin dezvoltat care, atunci când este aplicat unui document HTML , poate oferi interactivitate dinamică siteurilor. A fost inventat de Brendan Eich, co-fondator al proiectului Mozilla, Mozilla Foundation și Mozilla Corporation.

JavaScript este incredibil de versatil. Poți începe ușor, cu carusele, galerii de imagini, layouturi fluctuante, și răspunsuri la clicuri pe butoane. Cu mai multă experiență, vei fi capabil să creezi jocuri, animații grafice 2D și 3D, aplicații complexe bazate pe baze de date și multe altele!

JavaScript în sine este destul de compact dar totuși foarte flexibil. Dezvoltatorii au scris o mare varietate de instrumente având la bază limbajul JavaScript, deblocând o cantitate vastă de funcționalitate suplimentară cu efort minim. Acestea includ:

  • Interfețele de programare pentru aplicațiile de browser (APIs) — API construite în browsere web, oferind funcționalitate precum crearea dinamică de HTML și setarea stilurilor CSS, colectarea și manipularea unui flux video de la camera video a utilizatorului, sau generarea de imagini grafice 3D și monstre audio.
  • APIuri terțe pentru a permite dezvoltatorilor să integreze funcționalitatea în siteurile lor de la alți furnizori de conținut, cum ar fi Twitter sau Facebook.
  • Frameworkuri și librării terțe pe care le poți aplica în codul HTML pentru ați permite să construiești rapid siteuri și aplicații.

Deoarece acest articol se dorește a fi doar o introducere scurtă în JavaScript, nu te voi deruta în această etapă, vorbind în detaliu despre diferența dintre limbajul JavaScript de bază și diferite instrumente enumerate mai jos. Poți afla totul în detaliu mai târziu, în zona noastră de învățare JavaScript, și în restul paginilor MDN.

În continuare voi prezenta câteva aspecte ale limbajului principal, și te vei juca și cu câteva funcții API ale browserului. Distrează-te!

Un exemplu „hello world” 

Secțiunea de mai sus ar putea suna foarte interesantă, și așa și trebuie —JavaScript este una dintre cele mai pline de viață tehnologii web, și pe măsură ce începi să te perfecționezi prin utilizarea acesteia, siteurile tale web vor intra într-o nouă dimensiune a puterii și a creativității.

Cu toate acestea, devenind confortabil cu JavaScript este puțin mai dificil decât să te simți confortabil cu HTML și CSS. Poate trebuie să începi cu puțin și să continui să lucrezi în pași mici consistenți. Pentru început, îți voi arăta cum să adaugi câteva elemente de bază JavaScript paginii tale, creând un exemplu „hello world!” (standard în exemplele de programare de bază).

Important: Dacă nu ai urmărit până acum restul  de curs, descarcă acest cod exemplu și folosește-l ca punct de plecare.

  1. Mai întâi mergi la siteul tău de test și creează un nou directoriu numit „scripts” (fără ghilimele). Apoi, în noul directoriu scripts pe care tocmai l-ai creat, creează un nou fișier numit main.js. Salvează-l în directoriul tău scripts.
  2. Apoi, în fișierul tău index.html adaugă următorul element pe o nouă linie chiar înainte de închiderea tagului </body> :
    <script src="scripts/main.js"></script>
  3. În principiu, acesta face același lucru ca elementul <link> pentru CSS — include JavaScript la pagină, și deci poate avea un efect asupra HTML (împreună cu CSS, și orice altceva de pe pagină).
  4. Acum adaugă următorul cod în fișierul main.js:
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  5. În cele din urmă, asigură-te că fișierele HTML și JavaScript sunt salvate, apoi încarcă index.html în browser. Ar trebui să vezi ceva asemănător:

Notă: Motivul pentru care am pus elementul <script> aproape de partea de jos a fișierului HTML este că HTML este încărcat de browser în ordinea în care apare în fișier. Dacă JavaSript este încărcat mai întâi și ar trebui să modifice HTML de dedesupt, s-ar putea să nu funcționeze, deoarece JavaScript ar fi încărcat înainte de HTML de care are nevoie să funcționeze. Prin urmare, punerea JavaScript în aproprierea de partea de jos a paginii HTML este adesea cea mai bună decizie.

Ce s-a întâmplat?

Textul tău din titlu a fost acum modificat în „Hello world!” folosind JavaScript. Ai făcut acest lucru mai întâi utilizând o funcție numită querySelector() pentru a obține o referință la titlul tău, și a-l păstra într-o variabilă numită myHeading. Acest lucru este foarte similar cu ceea ai făcut atunci când ai folosit selectori CSS. Atunci când vrei să faci ceva la un element, mai întâi trebuie să-l selectezi.

După aceea, setezi valoarea proprietății variabilei myHeading textContent ( care reprezintă conținutul titlului) la „Hello world!”.

Notă: Ambele caracteristici pe care le-ai folosit mai sus fac parte din API Document Object Model (DOM), care îți permite să manipulezi documente.

Curs intensiv privind elementele de bază ale limbajului

Să îți explic câteva dintre caracteristicile de bază ale limbajului JavaScript, pentru ați oferi o mai bună înțelegere a modului în care funcționează toate acestea. Merită menționat că aceste caracteristici sunt comune tuturor limbajelor de programare, astfel încât dacă stăpânești aceste elemente fundamentale, vei fi pe drumul de a putea programa aproape orice!

Important: În acest articol, încearcă să introduci liniile de cod exemplu în console ta JavaScript pentru a vedea ce se întâmplă. Pentru mai multe detalii despre consola JavaScript, vezi Discover browser developer tools.

Variabile

Variables sunt containere în care poți stoca valori. Începi prin a declara o variabilă folosind cuvântul cheie var, urmat de orice nume:

var myVariable;

Notă: Un punct și virgulă la sfârșitul unei linii indică unde se termină o declarație; este absolut necesar atunci când trebuie să separi declarații pe o singură linie. Cu toate acestea, unii oameni cred că este o practică bună de a le pune la sfărșitul fiecărei declarații. Există și alte reguli când trebuie și nu trebuie să le folosești — vezi Ghidul tău pentru punct și virgulă în JavaScript pentru mai multe detalii.

Notă: Poți numi o variabilă aproape orice, dar există unele restricții de nume (vezi acest articol privind regulile de numire a variabilelor). Dacă nu ești sigur, poți verifica numele variabilei pentru a vedea dacă aceasta este validă.

Notă: JavaScript este case-sensitive — myVariable este o variabilă deferită față de myvariable. Dacă întâmpini probleme în codul tău, verifică numele variabilei.

După declararea unei variabile, îi poți da o valoare:

myVariable = 'Bob';

Dacă dorești poți face ambele operații pe aceeași linie:

var myVariable = 'Bob';

Poți prelua valoarea prin apelarea variabilei după nume:

myVariable;

După ce ai dat o valoare unei variabile, poți alege ulterior să o modifici:

var myVariable = 'Bob';
myVariable = 'Steve';

Reține că variabilele au diferite tipuri de date:

Variabilă Explicație Exemplu
String

O secvență de text cunoscut ca șir de caractere. Pentru a indica faptul că variabila este un șir de caractere, aceasta ar trebui inclusă între ghilimele.

 

var myVariable = 'Bob';
Number

Un număr. Numerele nu au ghilimele în jurul lor.

var myVariable = 10;
Boolean

O valoare Adevărată/Falsă. Cuvintele true șifalse sunt cuvinte cheie speciale în JS, și nu au nevoie ghilimele.

var myVariable = true;
Array

O structură care îți permite să stochezi mai multe valori într-o singură referință.

var myVariable = [1,'Bob','Steve',10];
Să te referi la fiecare membru al matricei astfel:
myVariable[0], myVariable[1], etc.
Object

Practic, orice. Totul în JavaScript este un obiect și poate fi stocat într-o variabilă. Ține cont de acest lucru pe măsură ce înveți.

 

var myVariable = document.querySelector('h1');
Toate exemplele de mai sus.

De ce avem nevoie de variabile? Ei bine, variabilele sunt necesare pentru a face orice interesant în programare. Dacă valorile nu ar putea fi schimbate, atunci nu ai putea face nimic dinamic, precum personalizarea unui mesaj de întâmpinare sau modificarea imaginii afișate într-o galerie de imagini

Comentarii

Poți include comentarii în codul JavaScript, așa cum poți în CSS:

/*
Totul este un comentariu.
*/

În cazul în care comentariul tău nu include pauze între linii, este adesea mai ușor să-l pui după două slashuri ca acestea:

// Acesta este un comentariu

Operatori

Un operator este un simbol matematic care produce un rezultat bazat pe două valori (sau variabile). În următorul tabel poți vedea câțiva dintre cei mai simpli operatori, împreună cu câteva exemple pentru a le încerca în consola JavaScript.

Operator Explicație Simbol(uri) Exemple
Adunare

Folosit pentru a aduna două numere împreună sau a lipi două șiruri împreună.

+ 6 + 9;
"Hello " + "world!";

Scădere, Înmulțire, Împărțire

Acestea fac ce te aștepți să facă în matematica de bază.

 

-, *, /

9 - 3;
8 * 2; // înmulțirea în JS este un asterisc

9 / 3;

Atribuire

Ai văzut deja acest lucru: atribuie o valoare unei variabile.

= var myVariable = 'Bob';
Egalitate

Face un test pentru a vedea dacă două valori sunt egale una față de cealaltă și întoarce un rezultat true/false (Boolean).

=== var myVariable = 3;
myVariable === 4;
Negare, Nu este egal

Returnează valoarea logică opusă a ceea ce precede; transformă o valoare true într-o valoare false, etc. Atunci când este utilizat alături de operatorul de Egalitate, operatorul de negare testează dacă două valori nu sunt egale.

 

!, !==

Expresia de bază estetrue, dar comparația returnează false deoarece am negat-o:

var myVariable = 3;
!(myVariable === 3);

Aici testăm "dacămyVariable NU este egală cu 3". Aceasta întoarce false deoarece myVariable este egală cu 3.

var myVariable = 3;
myVariable !== 3;

Există mult mai mulți operatori de explorat, dar acest lucru este suficient pentru moment. A se vedea Expresii și operatori pentru o listă completă.

Notă: Amestecarea tipurilor de date poate duce la rezultate ciudate când se efectuează calcule, astfel încât să ai grijă atunci când faci referire la variabilele tale, și să obțiirezultatele pe care le aștepți. De exemplu, introdu"35" + "25" în consola ta. De ce nu obții rezultatul așteptat? Deoarece ghilimelele transformă numerele în șiruri de caractere, și ai ajuns să concatenezi șiruri de caractere în loc să aduni numerele. Dacă introduci 35 + 25 vei obține rezultatul corect.

Instrucțiuni condiționale

Instrucțiunile condiționale sunt structuri de cod care îți permit să testezi dacă o expresie returnează adevărat sau nu, executând un cod alternativ dezvăluit prin rezultatul lui. O formă întâlnită de instrucțiuni condiționate este declarația if ... else statement. De exemplu:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

Expresia din interiorul if ( ... ) este testul — acesta utilizează operatorul de identitate (așa cum este descris mai sus) pentru a compara variabilaiceCream cu șirul chocolate pentru a vedea dacă cele două sunt egale. Dacă această comparație întoarce true, se execută primul bloc de cod. Dacă comparația nu este adevărată, primul bloc este omis și este executat cel de-al doilea bloc de cod după declarația else.

Funcții

Functions sunt o modalitate de împachetare a funcționalității pe care dorești să o reutilizezi. Când ai nevoie de procedură poți apela o funcție, cu numele funcției, în loc de a rescrie tot codul de fiecare dată. Ai văzut deja câteva utilizări ale funcțiilor de mai sus, de exemplu:

  1. var myVariable = document.querySelector('h1');
  2. alert('hello!');

Aceste funcții, document.querySelector și alert, sunt construite în browser pentru a le utiliza de fiecare dată când dorești.

Dacă vezi ceva care arată ca un nume de variabilă, dar are paranteze — () —  după aceasta, este probabil o funcție. Funcțiile iau adesea arguments — biți de date de care au nevoie să-și facă treaba. Acestea intră între paranteze, separate prin virgule, în cazul în care există mai multe argumente. 

De exemplu, funcția alert() face ca o casetă de tip pop-up să apară în ferestra browserului, dar trebuie să-i dai un șir de caractere ca argument pentru a spune funcției ce să scrie în caseta pop-up.

Vestea bună este că poți defini propriile funcții — în acest exemplu am scris o funcție simplă care ia două numere ca argumente și le înmulțește:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

Încearcă să execuți funcția de mai sus în consolă, apoi testează cu mai multe argumente. De exemplu:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

Notă: Instrucțiuneareturn spune browserului să returneze variabila result din funcție astfel încât aceasta să fie disponibilă pentru utilizare. Acest lucru este necesar deoarece variabilele definite în interiorul funcțiilor sunt disponibile numai în interiorul acelor funcții. Aceasta se numește scoping. (Citește mai mult despre variable scoping.)

Evenimente

Interactivitatea reală pe un site are nevoie de evenimente. Acestea sunt structuri de cod care ascultă de lucrurile care se întâmplă în browser, executând cod în răspuns. Cel mai evident exemplu este evenimentul click, care este declanșat de browser când faci clic pe ceva cu mouseul. Pentru a demonstra acest lucru, introdu următorul cod în consola ta, apoi clic pe pagina web curentă:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Există diferite moduri de a atașa un eveniment unui element. Aici selectezi elementul <html>, setând proprietatea handlerului onclickegală cu o funcție anonimă (adică fără nume), care conține codul pe care evenimentul click să-l execute. 

Reține că

document.querySelector('html').onclick = function() {};

este echivalent cu:

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

Este doar mai scurt.

Supercharging our example website

Acum că am parcurs câteva exemple de JavaScript, să adăugăm câteva caracteristici siteului nostru de exemplu pentru a vedea ce este posibil.

Adăugarea unui schimbător de imagine

În această secțiune, vom adăuga o imagine suplimentară siteului nostru utilizând câteva caracteristici ale API DOM, utilizând JavaScript pentru a comuta între cele două atunci când se face clic pe imagine.

  1. Mai întâi, găsește o altă imagine pe care vrei să o adaugi siteului tău. Asigură-te că are aceeași dimensiune ca prima imagine, sau cât mai aproape posibil.
  2. Salvează această imagine în directoriul tău images.
  3. Redenumește această imagine în „firefox2.png” (fără ghilimele).
  4. Mergi la fișierul main.js, și introdu următorul cod JavaScript. (Dacă „hello world” mai este acolo, șterge-l.)
    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
        var mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }
  5. Salvează toate fișierele și încarcă index.html în browser. Acum când faci clic pe imagine, ar trebui să se schimbe în cealaltă!

Ai salvat o referință la elementul tău <img> în variabila myImage.

Next, you make this variable's onclick event handler property equal to a function with no name (an "anonymous" function). Now, every time this element is clicked:

  1. You retrieve the value of the image's src attribute.
  2. You use a conditional to check whether the src value is equal to the path to the original image:
    1. If it is, you change the src value to the path to the 2nd image, forcing the other image to be loaded inside the <img> element.
    2. If it isn't (meaning it must already have changed), the src value swaps back to the original image path, to the original state.

Adding a personalized welcome message

Next we will add another bit of code, changing the page's title to a personalized welcome message when the user first navigates to the site. This welcome message will persist, should the user leave the site and later return — we will save it using the Web Storage API. We will also include an option to change the user and, therefore, the welcome message anytime it is required.

  1. In index.html, add the following line just before the <script> element:
    <button>Change user</button>
  2. In main.js, place the following code at the bottom of the file, exactly as written — this takes references to the new button and the heading, storing them inside variables:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. Now add the following function to set the personalized greeting — this won't do anything yet, but we'll fix this in a moment:
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }
    This function contains a prompt() function, which brings up a dialog box, a bit like alert(). This prompt(), however, asks the user to enter some data, storing it in a variable after the user presses OK. In this case, we are asking the user to enter their name. Next, we call on an API called localStorage, which allows us to store data in the browser and later retrieve it. We use localStorage's setItem() function to create and store a data item called 'name', setting its value to the myName variable which contains the data the user entered. Finally, we set the textContent of the heading to a string, plus the user's newly stored name.
  4. Next, add this if ... else block — we could call this the initialization code, as it structures the app when it first loads:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    This block first uses the negation operator (logical NOT, represented by the !) to check whether the name data exists. If not, the setUserName() function is run to create it. If it exists (that is, the user set it during a previous visit), we retrieve the stored name using getItem() and set the textContent of the heading to a string, plus the user's name, as we did inside setUserName().
  5. Finally, put the below onclick event handler on the button. When clicked, the setUserName() function is run. This allows the user to set a new name, when they wish, by pressing the button:
    myButton.onclick = function() {
      setUserName();
    }
    

Now when you first visit the site, it will ask you for your username, then give you a personalized message. You can change the name any time you like by pressing the button. As an added bonus, because the name is stored inside localStorage, it persists after the site is closed down, keeping the personalized message there when you next open the site!

Conclusion

If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also view our version here):

If you get stuck, you can compare your work with our finished example code on GitHub.

We have barely scratched the surface of JavaScript. If you have enjoyed playing, and wish to advance even further, head to our JavaScript learning topic.

Document Tags and Contributors

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