Programarea calculatoarelor si limbaje de

programare

JavaScript
Foi de stiluri in
cascada

Obiectivele cursului

Prin parcurgerea acestui curs vom:

►Descoperi originile JavaScript
►Intelege cum functineaza
►Intelege utilitatea
►Dobandi cunostinte de baza pentru
dezvoltarea cu JavaScript
Introducere
JavaScrip
t

Introducere

►Prezentare
►Istorie
►JavaScript azi
JavaScrip
t

Prezentare

►Limbaj de scripting
► Proiectat de Brendan Eich (Netscape), 1995.
► Inspirat de multe limbaje, inclusiv Java și
Python
► La început, limbaj pe partea de Server numit
LiveScript.
►Apoi versiunea pentru Client numit
JavaScript
► JavaScript a fost o marcă înregistrată a Sun
JavaScrip
t

Prezentare
►Client side -> interpretat de browserele web
- Diferit de PHP
►Complementar la HTML si CSS
- Adauga dinamism !
* interactiuni cu utilizatorul
* animatii
* ajutor de navigare
►Ca si CSS, codul JavaScirpt poate fi definit:
- in codul HTML
- in fisier extern cu extensia .js
JavaScrip
t

Prezentare
►Bazat pe evenimente (events)

►Asociat la obiectele DOM

- window, document, forms, …
JavaScrip
t

Prezentare
► DOM (Document Object Model) defineste
o structura logica si standardizata a
documentelor, o ordine prin care putem
parcurge si edita elemente si continut din
documente HTML sau XML.

►Structura DOM este o ierarhie de obiecte,

compatibila cu a limbajului JavaScript sau cu
a oricarui limbaj bazat pe obiecte.
JavaScrip
t

Prezentare
►Nu este un limbaj OOP adevarat
(Object Oriented Programming)

►Nici un concept real bazat pe clase (class)

(Foloseste pseudo-clasele scrise ca functii)

►Dar include mai multe caracteristici ale OOP

JavaScrip
t

Istoric
JavaScrip
t

Istoric
JavaScrip
t

Azi
►Este dificina Programarea Obiect
►Interpretari diferite de catre browsere
►Conceptul Web 2.0 este dificil de dezvoltat
►Dar exista mai multe cadre (Frameworks)
care
ajuta la rezolvarea acestor probleme, cum ar
fi
Notiuni si concepte
Notiuni si concepte

Generalitati
Urmatoarele asptecte vor fi abordate in
continuare:
►Hello World!
►Implementarea codului JavaScript
►Reguli de sintaxa si elemente de baza
►Variabile
►Tablouri/multimi
►Operatori
►Instructiuni
►Functii
Notiuni si concepte

Hello World!
Notiuni si concepte

Impementarea codului JavaScript

Exista 2 locuri unde putem plasa cod
JavaScript:
►Direct in fisierul HTML intre tagurile
<script>

►Intr-un fisier extern, si atunci apelam codul

JavaScript din HTML astfel:
Notiuni si concepte

Reguli de sintaxa si elemente de baza

►O instructiune se termina cu ;

►Se pot pune mai multe instructiui pe aceeasi

linie
►Este case sensitive
myvariable ≠ myVariable
►Trebuie atribuita o valoare variabilei
declarare
Notiuni si concepte

Reguli de sintaxa si elemente de baza

►O singura linie se comenteaza cu //

►Iar mai multe linii cu /* si */

Notiuni si concepte

Reguli de sintaxa si elemente de baza

► Pentru a afișa un text in pagina web folosim:

document.write ()
Notiuni si concepte

Reguli de sintaxa si elemente de baza

► Pentru a afișa un mesaj intr-o caseta de
dialog:
window.alert(message)
sau
alert(message)
Notiuni si concepte

Reguli de sintaxa si elemente de baza

► Pentru a obtine o caseta unde introducem
text:
window.prompt(text,default_value)
Variabile
Notiuni si concepte

Variabile
►Declaratie explicita folosind cuvantul cheie
var
►Numele unei variabile trebuie sa:
- nu inceapa cu un numar
- contina doar caractere alfanumerice
- nu contina nume de operator sau cuvinte
rezervate (var, for …)
►Declaratie implicita fara var
Notiuni si concepte

Variabile
►Concatenare : combina mai multe tipuri de
valori
►Operator: +
Notiuni si concepte

Variabile
►Tipul unei variabile este stabilit de continutul
său
► Pentru a obține tipul unei variabile: typeof
Operatori
Notiuni si concepte

Operatori (aritmetici)
adunare +

scadere -

inmultire *

impartire /
Notiuni si concepte

Operatori (aritmetici)
modulul %
(determina restul impartirii a 2 numere)

Exemplu:
8 % 3 => 2
10 % 2 => 0
Notiuni si concepte

Operatori (aritmetici)
incrementare++
(acest operator creste valoarea cu o unitate)

Exemplu:
x=7
x++
rezultatul este x = 8
Notiuni si concepte

Operatori (aritmetici)
decrementare --
(acest operator scade valoarea cu o unitate)

Exemplu:
x=7
x--
rezultatul este x = 6
Notiuni si concepte

Operatori (de atribuire)

In cazul acestui operator JavaScript
actioneaza mereu de la dreapta la stanga ; se
evalueaza operandul din dreapta iar valoarea
se atribuie variabilei din stanga semnului "="
.
Notiuni si concepte

Operatori (de comparare)

Expresiile care folosesc acesti operatori pun
o intrebare despre doua valori pe care le
compara. Raspunsul poate fi TRUE sau
FALSE.
Notiuni si concepte

Operatori (de comparare)

Un operator de comparatie des folosit este
operatorul de identitate (egalitate),
reprezentat prin doua semne egal "==".

Este diferit de simplul "=", operatorul '=='

compara doua valori determinand daca
acestea sunt identice, adica egale atat ca
valoare cat si ca tip.
Notiuni si concepte

Operatori (de comparare)

Notiuni si concepte

Operatori (logici sau booleeni)

Similar cu operatori de comparatie, operatorii
logici compara doua expresii si returneaza
TRUE sau FALSE.
Notiuni si concepte

Operatori (logici sau booleeni)

&& - si (and) - Compara doua expresii si
returneaza TRUE daca amandoua sunt
adevarate, in caz contrar returneaza FALSE.
Exemplu:
x=5
y=8
x<7 && y>3
(returneaza TRUE)
Notiuni si concepte

Operatori (logici sau booleeni)

|| - sau (or) - Compara doua expresii si
returneaza TRUE daca cel putin una din ele
este adevarata, in caz contrar returneaza
FALSE. Exemplu:
x=5
y=8
x>7 || y<3
(returneaza FALSE)
Notiuni si concepte

Operatori (logici sau booleeni)

! - nu (not) - este operator unar, foloseste o
singura expresie si returneaza TRUE daca
expresia este falsa, daca expresia este
adevarata returneaza FALSE.
Exemplu:
x=5
y=8
!(x==y)
(returneaza TRUE deoarece 'x' nu este egal
Notiuni si concepte

Operator pentru string

Un string este in general un sir de caractere,
intre ghilimele. Pentru a alatura (concatena)
doua variabile string impreuna se foloseste
operatorul de concatenare a sirurilor +
Exemplu:
t1 = “Azi avem"
t2 = “ curs"
t3 = t1+t2
(Variabila 't3' va contine sirul “Azi avem
Notiuni si concepte

Operator pentru functii (function)

Functiile vor fi explicate in una din lectiile
urmatoare, totusi este util sa fiti familiarizati
cu doi operatori:
Notiuni si concepte

Operator pentru functii (function)

Primul se numeste operator de apelare si
este reprezentat printr-o pereche de paranteze
rotunde () care urmeaza intodeauna dupa
numele functiei, astfel o functie va fi
declarata asa:
Notiuni si concepte

Operator pentru functii (function)

Apoi operatorul de apelare este folosit din nou

cand functia este apelata in interiorul
scriptului:

nume_functie()

…parantezele aratand ca este folosita o

functie.
Notiuni si concepte

Operator pentru functii (function)

Al doilea operator pentru functii este virgula
"," - care se foloseste pentru a separa mai
multe argumente pe care le primeste o
functie.
Argumentele sunt scrise intodeauna in
interiorul parantezelor rotunde si sunt separate
prin virgula.
Notiuni si concepte
Operatori pentru structuri de date
(obiecte)
Acesti operatori sunt necesari atunci cand
lucram cu structuri de date, sau obiecte
In JavaScript obiectele sunt folosite la
gruparea informatiilor pentru a servi unui
scop specific.
Notiuni si concepte
Operatori pentru structuri de date
(obiecte)
Un operator care ar trebui cunoscut bine
este punctul "." , numit operator pentru
membrul unei structuri.

Acesta ne permite sa ne referim la un membru

(variabila ,functie sau obiect ) care apartine
obiectului specificat.
Notiuni si concepte
Operatori pentru structuri de date
(obiecte)
Exemplu :
numeObiect.nume_Variabila
numeObiect.nume_Functie()
numeObiect.alt_Obiect

Aceasta modalitate de referire la o informatie,

numita notatie cu punct, returneaza valoarea
variabilei, functiei sau obiectului aflat cel mai
in dreapta.
Notiuni si concepte
Operatori pentru structuri de date
(obiecte)
Operatorul pentru element din matrice, numit
si operator indice al tabloului, se foloseste
pentru a accesa o data specifica, o cheie,
dintr-un tablou de date.

Acesta este simbolizat printr-o pereche de

paranteze drepte [ ] , si permite sa ne referim
la orice membru al unui tablou.
Notiuni si concepte
Operatori pentru structuri de date
(obiecte)
Tablourile sunt obiecte JavaScript si vor fi
detaliate in lectiile urmatoare.
Sintaxa de folosire a operatorului pentru
tablou :

nume_tablou[cheie]
Notiuni si concepte

Operatorul conditinal “?”

JavaScript contine si un operator
conditional ?, care atribuie o valoare unei
variabile pe baza unei conditii.
Sintaxa de folosire a acestui operator este:

variabila = (conditie)?val1:val2
Notiuni si concepte

Operatorul conditinal “?”

Modul de operare este urmatorul - se
evalueaza conditia, daca este adevarata atunci
variabila ia valoarea 'val1', altfel ia valoarea
'val2'.
Exemplu:
Notiuni si concepte

…un exemplu….