JavaScript

Introducere
Ce este JavaScript?
JavaScript este limbajul care adauga interactiune si comportament personalizat site-urilor noastre. Este un
“client-side scripting language”, ceea ce inseamna ca ruleaza pe calculatorul utilizatorului si nu pe server ca
alte limbaje destinate mediului web precum PHP sau Ruby. Asta inseamna ca JavaScriptul (si modul in care
il utilizam) este dependent de capabilitatile si setarile browserelor. Exista situatii in care limbajul nu este
disponibil, fie din cauza faptului ca device-ul respectiv nu il suporta sau ca user-ul a dezactivat suportul
JavaScript prin intermediul browser-ului. Acesta este un aspect de care trebuie sa tinem cont atunci cand
dorim folosirea acestui limbaj.

Ce nu este
Primul aspect de clarificat in legatura cu JavaScript este numele. In ciuda prezentei cuvantului “Java”
limbajul JavaScript nu are nimic in comun cu limbajul de programare Java. Limbajul JavaScript a fost creat
de Brendan Eich in timp ce lucra la Netscape in anul 1995 si a fost lansat sub denumirea de LiveScript. In
acea perioada limbajul Java era in plina crestere de popularitate de aceea din motive de marketing
LiveScript a fost redenumit in JavaScript. De multe ori este folosita si denumirea de “JS”.

JS a capatat de-a lungul timpului o reputatie nu tocmai favorabila. A existat o perioada in istoria JavaScript
in care limbajul era sinonim cu diverse metode neortodoxe de a profita de userii mai putin instruiti, cum ar
fi: redirectionari nedorite, ferestre de pop-up si o serie de vulnerabilitati de securitate. Din fericire browsere-
le moderne blocheaza o mare parte din aceste probleme. Cu toate acestea JS permite dezvoltatorilor sa
controleze foarte detaliat modul in care sunt redate paginile sau cum se comporta browserele in momentul
vizitarii paginilor respective, prin urmare trebuie folosit intr-un mod responsabil si cu atentie sporita la
implicatiile pe care codul JS le poate avea asupra utilizatorilor.

Ce este
JavaScript este un limbaj de scripting foarte puternic. Cel mai frecvent il intalnim in cadrul browserelor dar
acesta s-a infiltrat aproape peste tot, de la aplicatii native (cum este editorul Atom) la fisiere PDF si eBook-
uri. Exista si servere web extrem de perfomante bazate pe JavaScript (NodeJS). Tot cu ajutorul NodeJS
limbajul JavaScript poate fi folosit ca limbaj server-side.

JS este un limbaj de programare dinamic, acesta nu trebuie trecut printr-un compilator care sa transforme
codul scris de noi in instructiuni masina (dedicate browserelor). Browser-ul pur si simplu citeste codul JS la
fel ca noi si il interpreteaza din mers.

Javascript este “loosely typed”. Acest lucru inseamna ca nu trebuie sa ii spunem ce este o variabila sau de
ce tip este. De exemplu daca dorim sa salvam cifra 5 intr-o variabila nu trebuie sa specificam ca aceasta
este un numar. JS o va recunoaste automat ca fiind un numar si o va trata ca atare.

Ce poate face JavaScript

Cel mai frecvent vom intalni JavaScript ca o metoda de a adauga interactivitate pe o pagina web.
Pe parcursul cursului am discutat despre cele trei niveluri care compun o pagina web: content, presentation,
behaviour. JS reprezinta ultimul nivel adus unei pagini web si se “aseaza” peste HTML si CSS. Toate
elementele celorlalte niveluri pot fi accesate si modificate cu ajutorul JS. De asemenea putem scrie script-
uri care reactioneaza la interactiunea utilizatorului cu pagina, scripturi care modifica elementele
componente ale pagini, care modifica regulile CSS sau comportamentul Browser-ului.

Pe scurt, JavaScript va permite sa creati interfete moderne ce imbuntatesc User eXperience-ul si furnizeaza
functionalitati dinamice fara a astepta ca server-ul sa reincarce pagina.

De exemplu putem folosi JS pentru urmatoarele:

 Afisarea de sugestii si autocomplete pentru campurile de input (ex google)

 Crearea de requesturi catre server si injectarea continutului response-ului in cadrul pagini fara a
necesita un page refresh (AJAX)
 Afisarea sau ascunderea de continut pe baza interactiunii utilizatorului cu pagina (apasarea pe
butoane, taburi, linkuri, …)
 Testarea disponibilitatii de diverse functionalitati in cadrul browser-ului. Ex: verificarea daca
browser-ul suporta anumite elemente de CSS3.
 Completarea browser-ului cu functionalitatile lipsa (acest tip de scripturi se numesc “shims” sau
“polyfills”).
 Incarcarea de imagini sau continut in elemente de tip “lightbox”

Adaugarea codului JavaScript

La fel ca in cazul CSS-ului, putem adauga script-uri in cadrul documentului HTML sau le putem importa din
fisiere externe.

Script-uri Embedded
Pentru a introduce cod JS in cadrul unei pagini, folositi tagurile <script>:

1. <script>
2. JavaScript code goes here
3. </script>
Script-uri externe
Pentru introducere de cod JavaScript cu ajutorul fisierelor externe se foloseste atributul src=”” in cadrul
aceluiasi element <script>

1. <script src="my_script.js"></script>

Avantajele utilizarii script-urilor externe sunt aceleasi ca si in cazul fisierelor CSS: utilizarea unui singur
fisier JS pentru mai multe pagini (folositor mai ales daca codul scriptului este comun) si separarea nivelului
de behaviour de continut.

Unde plasam script-urile

Elementul <script> poate fi folosit oriunde in cadrul unei pagini HTML, dar cele mai frecvente locuri in care
este intalnit sunt in cadrul elementului <head> sau la sfarsitul documentului inainte tagul de inchidere
</body>. Este recomandata gruparea script-urilor in acelasi loc si NU raspandirea lor in cadrul documentului
deoarece fac foarte dificila modificarea ulterioara a acestora.

Pentru majoritatea script-urilor este recomandata plasarea acestora la sfarsitul documentului inainte de
tagul </body>.

Anatomia unui script

1. <script>
2. alert("Thank you!");
3. </script>

Elemente de baza
Este important de mentionat ca limbajul JS este case-sensitive. Prin urmare o variabilele de mai jos vor fi
tratate ca fiind diferite:

myVariable ≠ myvariable ≠ MYVariable

Spatiile libere sunt ignorate la fel ca in cazul HTML.
Declaratii
Un script JS este compus din una sau mai multe declaratii. O declaratie este o comanda care ii spune
browser-ului ce sa faca

1. alert("Thank you.");

Simbolul ; de la sfarsitul declaratiei marcheaza sfarsitul comenzii la fel cum . marcheaza sfarsitul unei
propozitii. Conform standardului JavaScript si un line-break (enter) va marca sfarsitul unei declaratii dar
este puternic recomandata utilizarea ; (semicolon).

Comentarii
Spre deosebire de CSS in JavaScript exista doua tipuri de comentarii:

Comentarii single-line //, care comenteaza doar linia pe care sunt plasate

1. // This is a single-line comment.

Comentarii multiple-line /* */, care comenteaza mai multe linii de cod, asemanatoare cu cele din CSS.

1. /* This is a multi-line comment.

2. Anything between these sets of characters will be completely ignored when the script is
executed.
3. This form of comment needs to be closed. */

Variabile
Puteti sa va imaginati variabilele ca fiind niste cutiute in care stocati informatii. Pentru aceasta trebuie sa le
dati un nume pentru a le putea accesa mai tarziu apoi sa specificati ce doriti sa puneti in ele (numere, siruri
de caractere, etc.)

Urmatoarea declaratie creeaza o variabila cu numele “cutie” si ii atribuie valoarea 10.

1. var cutie = 10;

Exista cateva reguli referitoare la numele de variabile:

 trebuie sa inceapa cu o litera sau cu _ (underscore);

 poate contine litere, cifre sau _ in orice combinatie;
 nu trebuie sa contina spatii. Daca aveti nevoie sa separati cuvintele ce formeaza un nume de
variablia folositi _ sau litere mari (camel case) (Ex: variabila_mea sau variabilaMea)
 nu trebuie sa contina caractere speciale precum -! . , / \ + * = etc.

Tipuri de date
General vorbind valorile pe care le atribuim variabilor se incadreaza in cateva tipuri majore de date.

undefined Daca declaram o variabila dar nu ii atribuim o valoare, acea valoare va

fi de tipul undefined. De asemenea daca incercam sa afisam valoarea
unei variabile care nu a fost declarata precedent, JS va afisa undefined
null Similar cu undefined, declararea unei variabile cu valoarea null este
sinonim cu: “defineste aceasta variabila dar nu ii atribui nici o valoare”.
Diferenta fata de undefined este ca daca ni se afiseaza null stim avem
certitudinea ca variabila a fost totusi declarata.
numbers Putem declara variabile ce contin numere.
Datorita faptului ca JS este un limbaj loosely-typed nu trebuie sa
specificam in mod special ca vrem stocarea unui numar
strings Alt tip de date ce pot fi stocate intr-o variabile sunt sirurile de
caractere.
 Pentru a le diferentia de comenzile utilizate in JS sirurile de caractere
sunt incadrate de “ “ sau ‘ ‘ .

1. var foo = "five";

booleans Putem atribui variabilelor si valori de adevar precum true sau false.
Acestea se numesc boolean values si stau la baza multor scripturi
avansate.

Arrays (vectori)
Un array este un grup compus din mai multe valori ce pot fi atribuite unei singure variabile. Valorile din
cadrul unui array sunt indexate adica le putem extrage pe baza numarului de ordine pe care il au in cadrul
acestuia. Prima valoare are indexul 0, urmatoarea 1, samd.

In general in programare numaratoarea incepe intotdeauna de la 0.

Javascript la lucru
Acum ca stim cum arata script-urile JavaScript si unde se pot insera trebuie sa studiem modul in care acest
limbaj interactioneaza cu HTML si CSS. Aceasta interactiune se realizeaza prin intermediul DOM pe care il
voi detalia in continuare.

DOM (Document Object Model)

Pe parcursul cursului este posibil sa mai fi auzit de termenul DOM (Document Object Model) mai ales la
inceputul capitolul CSS. Arborele prezentat in capitolul Concepte CSS reprezinta un DOM simplificat.

DOM-ul ne permite accesareasi manipularea componentelor de continut ce alcatuiesc o pagina web. La

baza el este o interfata programabila (API - Application Programable Interface) pentru paginile HTML si
XML. Acesta ne furnizeaza o harta structurata a documentului precum si metode de a interactiona cu
elementele continute in aceasta harta. Efectiv transforma mark-up-ul nostru intr-un format pe care
JavaScript (sau alte limbaje) il inteleg.

Pe scurt DOM-ul ne permite sa gasim elemente HTML dupa numele sau atributele acestora, sa adaugam, sa
modificam sau sa stergem elementele si continutul lor.

Arborele DOM
DOM-ul poate fi reprezentat sub forma unui arbore asemator celui discutat in capitolul CSS.

1. <html>
2. <head>
3. <title>Document title</title>
4. <meta charset="utf-8">
5. </head>
6. <body>
7. <div>
8. <h2>Subhead</h2>
9. <p>Paragraph text with a <a href="foo.html">link</a> here.</p>
10. </div>
11. <div>
12. <p>More text here.</p>
13. </div>
14. </body>
15. </html>

Fiecare element din cadrul paginii HTML este denumit nod. In reprezentarea de arbore ne putem gandi ca
fiecare nod reprezinta o ramura care poate contine multe alte ramuri. Spre deosebire de arborele de la CSS,
DOM-ul este mai detaliat deoarece permite si acces-ul la atributele elementelor precum si la continutul
acestora.
Cum accesam elementele DOM
Exista mai multe modalitati de a accesa elemenetele prin intermediul DOM.

Dupa numele elementului

getElementsByTagName()
Putem accesa elementele pe baza numelui. Aceasta metoda selecteaza elementul sau elementele ale caror
nume il specificati ca argument.

1. var paragraphs = document.getElementsByTagName("p");

Exemplul de mai sus atribuie variabilei paragraphs o colectie (array) ce contine toate elementele de tip
<p> din cadrul pagini. Colectia este completata in ordinea in care sunt gasite elementele in cadrul paginii.

Prin urmare pentru a accesa primul paragraf gasit pe pagina putem folosi urmatoarea declaratie:

1. console.log( paragraphs[0] );

Observatie:
Functia console.log() va permite sa afisati in cadrul inspectorului din browser, valoarea variabilelor pe
care le inserati intre paranteze.

Dupa id
getElementById()
Aceasta metoda selecteaza un singur element (pe baza atributului id=””) deoarece nu uitati id-ul este unic
in cadrul paginii.

HTML:
 1. <img src="photo.jpg" alt="" id="lead-photo">

JS:

1. var photo = document.getElementById("lead-photo");

Observatie:
Atentie cand specificati numele id-ului in cadrul acestei metode nu se foloseste identificatorul #

Dupa clasa
getElementsByClassName()
Dupa cum ii mentioneaza si numele, aceasta metoda selecteaza elementele a caror clasa este column-a.

1. var firstColumn = document.getElementsByClassName("column-a");

Observatie:
Spre deosebire de metoda de selectare a id-ului aceasta va returna colectie de elemente chiar daca se
gaseste un singur element cu clasa respectiva.

In cazul Internet Explorer aceasta metode este disponibila doar pentru versiunile 9+ (9, 10, 11).

Cu ajutorul selectorilor
querySelectorAll()
Cu aceasta metoda putem folosi selectorii CSS pentru a gasi elementele in DOM

1. var sidebarPara = document.querySelectorAll(".sidebar p");

Observatie:
In cazul Internet Explorer aceasta metode este disponibila doar pentru versiunile 8+ (8, 9, 10, 11).

De asemenea va returna o colectie de elemente.

Accesarea valorii unui atribut

getAttribute()
In JS putem accesa si valorile atributelor unui element.

1. var bigImage = document.getElementById("lead-image");

2. console.log( bigImage.getAttribute("src") );
Manipularea elementelor DOM
Pana acum doar am selectat elementele dar dupa cum am mentionat la inceptul capitolului JavaScript
permite si modificarea acestora.

Modificarea valorii atributelor

setAttribute()

1. var bigImage = document.getElementById("lead-image");

2. bigImage.setAttribute("src", "lespaul.jpg");

Modificare continutului elementelor

innerHTML

1. var introDiv = document.getElementsByClassName("intro");

2. introDiv.innerHTML = "<p>This is our intro text</p>";

Modificarea regulilor CSS asociate

style

1. document.getElementById("intro").style.color = "#fff";
2. document.getElementById("intro").style.backgroundColor = "#f58220"; //orange