This translation is in progress.

Bine ai venit la cursul pentru începători al MDN! În acest prim articol vom examina 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 JavaScript.

Condiții necesare: Cunoștințe de bază de calculator, o înțelegere de bază a 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 programare 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 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:

  • Stocarea valorilor 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 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 redare audio și video chiar în pagina web sau preia video de pe camera web și o afișează 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 cross browser testing mai detaliat 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 (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 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 este după 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ă — doar 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 sensibil.
  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).

External JavaScript

This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.

  1. First, create a new file in the same directory as your sample HTML file. Call it script.js — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.
  2. Next, copy all of the script out of your current <script> element and paste it into the .js file. Save that file.
  3. Now replace your current <script> element with the following:
    <script src="script.js"></script>
  4. Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got the JavaScript in an external file. This is generally a good thing in terms of organizing your code, and making it reusable across multiple HTML files. Plus the HTML is easier to read without huge chunks of script dumped in it.

Note: You can see this version on GitHub as apply-javascript-external.html and script.js (see it live too).

Inline JavaScript handlers

Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:

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

You can try this version of our demo below.

This demo has exactly the same functionality as in the previous two sections, except that the <button> element includes an inline onclick handler to make the function run when the button is pressed.

Please don't do this, however. It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the onclick="createParagraph()" attribute on every button you wanted the JavaScript to apply to.

Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:

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

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

This might look a bit longer than the onclick attribute, but this will work for all buttons no matter how many are on the page, and how many are added or removed. The JavaScript does not need to be changed.

Note: Try editing your version of apply-javascript.html and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?

Comments

As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after 6 months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:

  • A single line comment is written after a double forward slash (//), e.g.
    // I am a comment
  • A multi-line comment is written between the strings /* and */, e.g.
    /*
      I am also
      a comment
    */

So for example, we could annotate our last demo's JavaScript with comments like so:

// Function: creates a new paragraph and append it to the bottom of the HTML body.

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

/*
  1. Get references to all the buttons on the page and sort them in an array.
  2. Loop through all the buttons and add a click event listener to each one.

  When any button is pressed, the createParagraph() function will be run.
*/

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

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

Summary

So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript, and what kind of things you can do with it. Along the way you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.

JavaScript may seem a bit daunting right now, but don't worry — in this course we will take you through it in simple steps that will make sense going forward. In the next article we will plunge straight into the practical, getting you to jump straight in and build your own JavaScript examples.

In this module

Document Tags and Contributors

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