Introducere in Javascript 1&2

Introducere in JavaScript
JavaScript este un limbaj de scripting/programare care ne permite implementarea unor caracteristici

complexe pe o pagina web. Interactivitatea de pe o pagina web este adaugata cu ajutorul JS.
Desi initial a fost creat pentru pagini web, limbajul javascript poate fi folosit astazi si pentru construirea
serverelor web, dezvoltare de jocuri, aplicatii mobile, IoT.
Javascript a devenit esential pentru orice programator, fiind considerat de catre unii ca fiind o alegere
excelenta ca prim limbaj de programare.
A fost standardizat dupa modelul “EcmaScript” si este imbunatatit constant, chiar daca este cunoscut
pentru “Limbajul creat in 10 zile”.
Cele mai populare aplicatii ce sunt construite pe baza limbajului Javascript(Node Js mai exact) sunt :
● Paypal
● LinkedIn
● Yahoo
● Mozilla
● NetFlix
● Uber
● Groupon
● GoDaddy
● Ebay
Javascript este printre primele limbaje folosite pentru web, fiind inventat in 1995 de catre Bredan Eich, ce
lucra in acel timp pentru NetScape, browser care a devenit FireFox cativa ani mai tarziu.
Info!
Un browser este un program ce este folosit pentru a vizita paginile web si pentru a folosi aplicatiile web.
Tot el interpreteaza codul JS de aceea nu este necesara instalarea suplimentara a unui interpretor. Avem
nevoie doar de un IDE pentru a scrie codul.
Important!
Javascript este total diferit de limbajul Java si nu trebuie niciodata confundate. Desi Java a fost inventat in
aceeasi perioada si au sintaxa asemanatoare, aceste limbaje au filozofii complet diferite.
Pe scurt, JavaScript este prezent pe orice pagina web, el fiind foarte influent pentru mediul online, datorita
simplitatii si usurintei cu care poate fi implementat si avand totodata o comunitate uriasa dornica sa ajute
incepatorii. Toate aceste motive au dus la dezvoltarea lui de la un simplu limbaj de programare pentru
Front-End la un limbaj folosit atat pentru Back-End cat si pentru crearea de aplicatii mobile, desktop sau
chiar jocuri si multe altele.
Notiuni standard!
Pentru a rula codul JS direct din browser trebuie sa accesam consola. Aceasta poate fi accesata apasand
click dreapta si selectand optiunea Inspect. Putem observa ca ni se deschide o fereastra in josul paginii in
care putem vedea codul HTML, dar momentan noi nu ne avem de a face cu el, asa ca mergem la
urmatoarea optiune care este Console.
In dreptul sagetii albastre vom scrie prima linie de cod. Cu ajutorul comenzii console.log() putem afisa un
mesaj sau o informatie in consola din orice mediu JavaScript.
Exemplu:
Putem observa ca ne este afisat mesajul “Hello world!” in interiorul consolei.
In mod normal codul JS nu este scris in consola. Consola ne ajuta sa depistam erorile si daca vrem sa
testam bucati mici de cod. Codul JavaScript este scris in interiorul unui fisier care are terminatia .js. Acest
fisier se creaza asemanator ca si fisierele HTML si CSS doar ca alegem terminatia .js. Pentru a rula codul
JS din cadrul fisierului este necesara integrarea lui intr-un document HTML, acest lucru se poate realiza
conform exemplelor urmatore:
Pentru a adauga JS direct in codul HTML deschidem cele doua taguri in <head> (nu este recomandat) sau
deasupra tagului de inchidere </body> (recomandat). Aceasta metoda:
<script>
console.log( "JavaScript este grozav!");
</script>
Si pentru a adauga cod JS dintr-un fisier extern:

<script src="myScript.js"></script>
Unde src reprezinta destinatia fisierului JavaScript.
Valori si tipuri de valori
O valoare este o informatie folosita de catre un program. Valorile au diferite forme si sunt numite tipuri
(type). Exemple de tipuri: sir, numar, boolean etc.
Numar
Un numar este o valoare numerica (evident), folosit adesea pentru a tine evidenta asupra cantitatii.
In JavaScript putem face operatii matematice cu ajutorul operatorilor.
Exemple:
Afisarea unui numar:
Adunarea:
Inmultirea:
Impartirea:
Restul impartirii:
O operatie se poate face si fara folosirea comenzii console.log(). Am preferat sa le facem cu console.log()
doar pentru a ne putea obisnui cu acea comanda.
Putem observa ca rezultatul este acelasi.
Siruri
Un sir reprezinta un text. Pentru a folosi un sir in JS este necesara introducerea lui intre ghilimelele duble
sau simple, rezultatul fiind acelasi. Este recomandat sa nu amestecam cele doua tipuri de ghilimele atunci
cand scriem un sir.
Exemplu:
Rezultatul este acelasi si fara folosirea comenzii console.log().
In cazul in care incercam sa combinam cele doua ghilimele diferite vom avea o eroare. Despre ele vom
vorbi mai tarziu in cadrul acestei sedinte.
In cazul in care vrem sa aflam lungimea unui sir ne vom folosi de proprietatea sirului “length”.
Exemplu:
Aceasta proprietate ne returneaza lungimea unui sir si nu numai, vom reveni la aceasta proprietate in
urmatoarele sedinte.
Nu uita!
Intotdeauna sa inchideti continutul unui sir cu acelasi tip de ghilimele cu care ati inceput, si invers, astfel
veti pierde timp pretios in greseli marunte!
Pentru a include caractere speciale intr-un sir, folositi \ (backslash) inainte de caracter. De exemplu,
folositi \n pentru adaugarea unei noi linii sirului “Aceste este \n un sir pe pe doua linii.”
Nu poti scadea sau aduna valori dupa bunul plac, deoarece vorbim de numere aici. Insa este important de
precizat ca acest caracter “+” are o semnificatie speciala atunci cand avem doua siruri, si anume
concatenarea de siruri. Uneste doua sau mai multe siruri intr-un singur sir, de exemplu dupa interpretarea
“Bu” + “na” vom avea doar rezultatul “Buna”.
Boolean
Un boolean reprezinta una dintre cele doua valori: true si false.
Le vom folosii mai tarziu in cadrul cursului de JS.
Objects
Obiectele sunt niste variabile care au proprietati in interiorul carora sunt stocate valori.
Nu vom intra in detalii dar este important sa stiti ca exista. Ne vom tot lovi de aparitia lor pe parcursul
cursului. Vom avea sedinte separate in care vom discuta la un nivel avansat despre ele.
Comentariile
Dupa cum ne-am obisnuit din sedintele de HTML si CSS, si in JavaScript putem adauga comentarii, ele
fiind folosite pentru a explica o bucata de cod sau pentru a-l face mai usor de citit, ele nu sunt rulate de
catre browser ci sunt ignorate. Comentarii single-line sau multi-line.
Comentarii single-line:
//console.log("Hai sa facem matematica");
console.log(4 + 7);
//console.log(12 / 0);
console.log("La reverede!");
Comentarii multi-line:
/*
console.log("Hai sa facem matematica");
Sa adunam doua numere
*/
console.log(4 + 7);
Sa revenim la siruri si numere
Observatii urmatoarele linii :
console.log(4+9);
console.log("5+6");
console.log("5" + "5");
Ce credeti ca se va intampla in urma interpretarii acestor linii de catre browser?
Acesta este rezultatul obtinut. De ce este asa? De ce nu avem avem rezultatele 13, 11 si 10?
Raspunsul este simplul. In primul caz adunam 2 numere de unde obtinem rezultatul 13 . In cel de al doilea
caz nu adunam nici un numar deoarece “5+6” este vazut de catre browser ca fiind un sir de caractere
datorita “ “ , ele marcand inceperea si sfarsitul unui text. In cel de al 3 lea caz avem doua siruri de
caractere adunate adica concatenate, in acest caz dar si in al doilea numerele reprezentand niste caractere.
Operatorul typeof
Cu ajutorul acestui operator putem afla care este tipul unei valori.
Exemplu:
Exercitiu: Cu ajutorul operatorului typeof verificati exemplul de mai sus.
Joaca cu variabilele
• O variabila este o locatie de stocare a informatiei, ea trebuie sa aiba un nume sugestiv. Fiecare
variabila are un nume, o valoare si un tip. In JS tipul variabilei este rezultat din valoarea stocata.
• In JS variabilele sunt declarate cu ajutorul cuvintelor cheie var, let si const. O constanta este o
variabila a carei valoare nu se schimba niciodata.
• Pentru a asigna o valoare variabilei folosim operatorul “=”.
• Variabilele trebuie sa fie unice.
• Numele unei variabile trebuie sa inceapa cu o litera
• Numele unei variabile poate incepe si cu caracterele $ si _
• Numele unei variabile este sensitive (y este diferit de Y)
• Cuvintele rezervate ( Ex: let, document, var) nu pot fi folosite ca nume de variabila
• Numele unei variabile poate contine litere, numere, _ , $.
Obs: Nu trebuie sa definim tipul variabilei, acesta fiind dedus din valoarea stocata. Din acest motiv putem
spune ca JavaScript este un limbaj “dynamicaly typed”.
Obs-2: Este recomandata declararea unei variabile cu ajutorul cuvantului cheie let deoarece cuvantul
cheie var poate crea unele probleme. Vom discuta mai amanuntit in urmatoarele sedinte. Momentan
trebuie sa retinem ca este recomandat sa folosim let.
Exemple:
In exemplul de mai sus putem observa ca daca incercam sa afisam o variabila care nu are nici o valoare
stocata vom obtine “undefined” si tipul ei va fi tot “undefined”.
In exemplul de mai sus putem observa cum functioneaza o variabila.

In cazul in care pe parcurs vrem sa schimbam valoare variabilei o putem face foarte usor conform
exemplului urmator:
Declararea unei variabile de tip const
Daca dorim ca valoarea initiala a variabilei sa nu fie schimbata, o definim ca fiind constanta. Aceasta
constrangere se poate realiza prin simpla folosire a cuvantului cheie const in loc de let pentru a o declara.
Acest program este mult mai expresiv si poate explica mai exact ce eroare poate avea.
Denumirea variabilelor
Este foarte important de retinut faptul ca numele variabilelor trebuie sa fie sugestive fata de continutul
stocat. De exemplu, daca vrem sa stocam numele unei persoane vom folosi o variabila cu numele “nume”.
In exemplul de mai jos putem observa cum ar trebui declarata o variabila si cum nu ar trebui declarata:
const a = 5.5;
const b = 3.14;
const c = 2 * a * b;
console.log(c);
const radius = 5.5;
const pi = 3.14;
const perimeter = 2 * pi * radius;
console.log(perimeter);
Expresii
O expresie reprezinta o bucata de cod care creaza o valoare. O expresie este creata combinand variabile,
valori si operatori.
Exemplu:
Daca tot suntem la expresii, sa mai adaugam doi operatori matematici pe lista noastra:
Post-Incrementarea:
Incrementarea se face ajutorul operatorului ++ care aduna 1 la valoarea respectiva.
Post-Incrementarea se face cu adaugarea operatorului ++ in continuarea variabilei. In acest caz

incrementarea se face dupa executarea expresiei in totalitate . Mai pe scurt, declaram o variabila, o
incrementam si abia la urmatoarea instructiune putem folosi valoarea incrementata.
Pre-Incrementarea
Pre-Incrementarea se face cu adaugarea operatorului ++ la inceputul variabilei. In acest caz incrementarea

se face in timpul executiei expresiei.
Decrementarea
Functionare asemanatoare cu a incrementarii doar ca scadem o unitate.
Simbolul ${}
Cu ajutorul ${variabila} putem adauga o variabila in interiorul unui sir de caractere. Sirul de caractere va
fi scris cu ajutorul template-ului literal ` ` in loc de ghilimelele clasice.
Exemplu:
Conversia tipului variabilei
In momentul in care vrem sa evaluam o expresie, din rezultatul acesteia poate rezulta un tip diferit al
variabilei, acest lucru fiind numit conversie. De exemplu, daca vrem sa adunam un sir cu un numar,
rezultatul final va fi un sir.
Exemple:
In exemplul de mai sus rezultatul este convertit intr-un sir.
Spre deosebire de alte limbaje JavaScript este tolerant cand e vorba de tipul conversiei dar nu mereu
permite sa se faca o conversie.
Exemplu:
Putem observa ca nu se face conversia in numar. NaN vine de la Not a number.
Dar daca avem un sir care reprezinta un numar? Cum putem sa-l transformam intr-un numar? Acest lucru
se poate realiza cu ajutorul functiei Number() sau cu ajutorul functiei String() transformam un numar intr-
un sir.
Exemplu:
Introducerea informatiei de catre utilizator

O metoda prin care ii putem cere utilizatorului sa introduca informatii este prin folosirea functiei prompt().
Exemplu:
Utilizatorului ii va aparea urmatorea interfata:
Dupa introducerea unei valori in campul respectiv aceasta se va salva in variabila nume.
Atunci cand avem nevoie sa lucram cu prompt(), este important sa stim ca orice valoare introdusa este
considerata ca fiind un sir, motiv pentru care trebuie sa facem noi conversia.
Afisarea unei alerte

Cu ajutorul functiei alert() putem afisa un mesaj de atentionare sau un mesaj important care trebuie sa iasa
in evidenta.
Exemplu:
Acest mesaj nu va disparea decat in momentul in care utilizatorul va apasa butonul “ok”.
Tipuri de erori in JavaScript

ReferenceError – Aceasta eroare apare in momentul in care s-a facut referire la o variabila non-existenta.
SyntexError – Aceasta eroare apare in momentul in care scriem cod invalid/gresit.
TypeError – Apare atunci cand incercam sa modificam o valoare care nu poate fi modificata, cand
incercam sa folosim o valoare intr-o metoda gresite, cand adaugam o argument unei functii care este
incompatibil
Acestea sunt cele mai intalnite erori. Pentru a afla care sunt si celelalte tipuri de erori din JS cititi
documentatia MDN: https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Error
Teme
Tema 1: Scrieti un program pentru calcularea tva-ului avand valoarea fixa 20.6%, folosind prompt.
Tema 2: Faceti un program de conversie grade din Celsius Fahrenheit si invers!

Introducere in Javascript 1&amp;2

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Introducere in Javascript 1&amp;2

Încărcat de

Drepturi de autor:

Formate disponibile

Introducere in JavaScript

JavaScript este un limbaj de scripting/programare care ne permite implementarea unor caracteristici

Putem observa ca ne este afisat mesajul “Hello world!” in interiorul consolei.

Si pentru a adauga cod JS dintr-un fisier extern:

Unde src reprezinta destinatia fisierului JavaScript.

Valori si tipuri de valori

In JavaScript putem face operatii matematice cu ajutorul operatorilor.

Afisarea unui numar:

Putem observa ca rezultatul este acelasi.

Rezultatul este acelasi si fara folosirea comenzii console.log().

Un boolean reprezinta una dintre cele doua valori: true si false.

Le vom folosii mai tarziu in cadrul cursului de JS.

//console.log("Hai sa facem matematica");

Sa adunam doua numere

Sa revenim la siruri si numere

Observatii urmatoarele linii :

Ce credeti ca se va intampla in urma interpretarii acestor linii de catre browser?

In exemplul de mai sus putem observa cum functioneaza o variabila.

Declararea unei variabile de tip const

const radius = 5.5;

const perimeter = 2 * pi * radius;

Incrementarea se face ajutorul operatorului ++ care aduna 1 la valoarea respectiva.

Post-Incrementarea se face cu adaugarea operatorului ++ in continuarea variabilei. In acest caz

Pre-Incrementarea se face cu adaugarea operatorului ++ la inceputul variabilei. In acest caz incrementarea

Functionare asemanatoare cu a incrementarii doar ca scadem o unitate.

Conversia tipului variabilei

In exemplul de mai sus rezultatul este convertit intr-un sir.

Putem observa ca nu se face conversia in numar. NaN vine de la Not a number.

Introducerea informatiei de catre utilizator

Utilizatorului ii va aparea urmatorea interfata:

Afisarea unei alerte

Tipuri de erori in JavaScript

SyntexError – Aceasta eroare apare in momentul in care scriem cod invalid/gresit.

Tema 2: Faceti un program de conversie grade din Celsius Fahrenheit si invers!

S-ar putea să vă placă și

Introducere in Javascript 1&2

Introducere in Javascript 1&2