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 să folosești 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 cu ceva mic, 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ționalități 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 include în codul HTML care îți permit 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!” (standardul î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. După, î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 unei pagini, și poate avea un efect asupra HTML (împreună cu CSS, și orice altceva din 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, și dupî încarcă fișierul 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ăm 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țiile 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];

Pentru a face referire la fiecare membru al matricei folosește:
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 ș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 uni 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; // pentru înmulțirea în JS se folosește 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ă este true, 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 ai grijă atunci când faci referire la variabilele tale, pentru a obține rezultatele 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ționale este declarația if ... else. 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 variabila iceCream 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 sunt incluse î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ă setezi 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 ca 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 onclick egală 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.

Supraalimentarea siteului nostru de exemplu

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ă fișierul 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. În continuare, faci ca proprietatea evenimentului handler onclick al acestei variabile să fie egală cu o funcție fără nume (o funcție „anonimă”). Acum, de fiecare dacă când se face clic pe acest eveniment:

  1. Preiei valoarea atributului srcal imaginii.
  2. Folosești o condiție pentru a verifica dacă valoarea src este egală cu calea către imaginea originală:
    1. Dacă este, schimbi valoarea src cu calea către a doua imagine, forțând cealaltă imagine să fie încărcată în interiorul elementului <img>.
    2. Dacă nu este (ceea ce însemnă că deja s-a schimbat), valoarea src se schimbă înapoi în calea originală a imaginii, în starea inițială.

Adăugarea unui mesaj de întâmpinare personalizat

În continuare vei adăuga o nouă porțiune de cod, schimbând titlului paginii într-un mesaj de întâmpinare personalizat atunci când un utilizator navighează pentru prima dată pe site. Acest mesaj de întâmpinare va persista, dacă utilizatorul va părăsi siteul și va reveni ulterior — îl vei salva utilizând Web Storage API. De asemenea, vei include o opțiune de schimbare a utilizatorului și, prin urmare, mesajul de întâmpinare de fiecare dată când este necesar.

  1. În index.html, adaugă următoarea linie chiar înaintea elementului <script>:
    <button>Change user</button>
  2. În main.js, adaugă codul următorul în partea de jos a fișierului, exact așa cum este scris — acest lucru face trimiteri la noul buton și la titlu, stocându-le în interiorul variabilelor:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. Acum adaugă următoarea funcție pentru a seta mesajul de întâmpinare personalizat — acest lucru nu va face momentan nimic, dar vei rezolva acest lucru în curând:
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }
    Această funcție conține o funcție prompt(), care aduce o casetă de dialog, un pic asemănător cu alert(). Cu toate acestea, prompt(), solicită utilizatorului să introducă anumite date, salvându-le într-o variabilă după ce utilizatorul apasă OK. În acest caz, soliciți utilizatorului să-și introducă numele. După, apelezi un API numit localStorage, care îți permite să stochezi date în browser și să le folosești mai târziu. Folosești funcția  setItem() a localStorage pentru a crea și a stoca un element de date numit 'name', setând valoarea la variabila myName care conține datele introduse de utilizator. În final, setezi textContent al titlului la un șir, plus numele stocat de utilizator.
  4. În continuare, adaugă acest bloc if ... else — ai putea numi cod de inițializare, deoarece structurează aplicația atunci când se încarcă pentru prima dată:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    Acest bloc utilizează mai întâi operatorul de negare (NOT logic, reprezentat de !) pentru a verifica dacă name există. Dacă nu există, funcția setUserName() este executată pentru a-l crea. Dacă există (în cazul în care utilizatorul l-a setat în timpul unei vizite anterioare), preluăm numele stocat folosindgetItem() și setăm textContent al titlui la un șir, plus numele utilizatorului, așa cum am făcut în interiorul setUserName().
  5. În cele din urmă pune evenimentul handler onclick de mai jos pe buton. Când se face clic, se execută funcțiasetUserName(). Aceasta permite utilizatorului să seteze un nou nume, atunci când dorește, apăsând butonul:
    myButton.onclick = function() {
      setUserName();
    }
    

Acum, când vizitezi pentru prima dată siteul, acesta îți va cere numele de utilizator, apoi va afișa un mesaj personalizat. Poți schimba numele oricând dorești, apăsând butonul. Ca un bonus suplimentar, deoarece numele este stocat în localStorage, acesta rămâne salvat după închiderea siteului, păstrând mesajul personalizat acolo atunci când deschizi data viitoare siteul.

Concluzie

Dacă ai urmat toate instrucțiunile din acest articol, ar trebui să ai o pagină care arată astfel (poți vedea versiunea nostră aici):

Iar dacă te blochezi, poți compara codul tău cu exemplul nostru final pe GitHub.

Abia am acoperit câteva concepte de JavaScript. Dacă ți-a plăcut, și dorești să avansezi mai departe, mergi la JavaScript learning topic.

Document Tags and Contributors

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