Programming in HTML5 with JavaScript and CSS3

1. Introducere........................................................................................................................................... 2
1. Introducere n programare utiliznd limbajele HTML5, CSS3 i JavaScript ................................................ 2
2. Structura documentului HTML............................................................................................................. 3
2. Introducere n HTML............................................................................................................................. 3
3. Textul n HTML..................................................................................................................................... 3
4. Linkurile............................................................................................................................................... 4
5. Formularele......................................................................................................................................... 4
6. Antetul documentului HTML................................................................................................................. 5
7. Multimedia n documentele HTML......................................................................................................... 5
8. Grafica 2D........................................................................................................................................... 6
9. Gruparea elementelor.......................................................................................................................... 6
3. Stilizarea documentului HTML ............................................................................................................ 8
10. Introducere n CSS.............................................................................................................................. 8
11. Selectori de baz CSS.......................................................................................................................... 8
12. Selectori CSS avansai......................................................................................................................... 9
13. Stilizarea textului................................................................................................................................ 9
14. CSS Box Model.................................................................................................................................. 10
15. Crearea layout-ului............................................................................................................................ 10
16. Flexbox Layout................................................................................................................................. 11
17. Responsive design............................................................................................................................ 12
18. Transformrile i stilizrile CSS.......................................................................................................... 12
4. Introducere n JavaScript.................................................................................................................... 14
19. Introducere n limbajul JavaScript ..................................................................................................... 14
20. Sintaxa limbajului JavaScript.............................................................................................................. 14
21. Variabile, tipuri de date i operatori................................................................................................... 14
5. Controlul fluxului de execuie a codului JavaScript........................................................................... 16
22. Execuia condiionat....................................................................................................................... 16
23. Buclele............................................................................................................................................. 16
24. Procesarea excepiilor....................................................................................................................... 17
6. Funciile i obiectele JavaScript......................................................................................................... 18
25. Funciile........................................................................................................................................... 18
26. Obiectele......................................................................................................................................... 18
7. Manipularea structurii, stilizrii i a datelor prin folosirea JS-ului................................................... 20
27. Manipularea DOM-ului..................................................................................................................... 20
28. Evenimentele................................................................................................................................... 20
29. Operarea cu datele........................................................................................................................... 21
8. jQuery................................................................................................................................................. 22
30. Bazele jQuery................................................................................................................................... 22

1 / 22
1. Introducere

1. Introducere n programare utiliznd limbajele HTML5, CSS3 i JavaScript

Pentru structurarea datelor aplicaiei, se utilizeaz tehnologia sau limbajul HTML.

CSS descrie, adic reglementeaz aspectul i formatarea tuturor elementelor din documentul HTML.

JavaScript este un limbaj de programare pentru crearea logiciiaplicaiilorHTML

HTML, CSS i JavaScript suntca itehnologii webcele mai cunoscutelimbaje, reprezentnd elementele constitutive ale
web-ului.

Codul de programare a limbajelor HTML, CSS i limbajul JavaScript poate fi scris n orice editor de text.

2 / 22
2. Structura documentului HTML

2. Introducere n HTML

HTMLeste prescurtarea care reprezint acronimul conceptului de Hypertext Markup Language.

HTML este limbajuldescriptivde baz pentru crearea documentelor HTML.

Limbajul HTML este folosit pentru a se defini structura unui document HTML.

Blocurile principale de construire a limbajului HTML sunt tagurile i elementele.

HTML cunoatetagurilede deschidere, de nchidere i cu autonchidere.

Elementul HTML este format din taguri i coninut, dac elementul are coninut.

Fiecare element HTML poate conine atribute care definesc informaii suplimentare despre elementele HTML.

Structura de baz a paginilor HTML o reprezint elementele<html>, <body> i <head>

Declaraia DOCTYPE definete versiunea limbajului, care se utilizeaz pentru crearea documentului.

HTML5este standardul recomandat pentru crearea documentelor HTML.

3. Textul n HTML

Baza fiecrui document HTML este textul care poate aprean forme diferitentr-un document.

Limbajul HTML recunoate ase niveluri de titluri, care sunt create folosind elemente: h1, h2, h3, h4, h5 i h6.

n documentele HTML, paragrafele sunt create prin plasarea textului ntre tagul de deschidere<p>i cel de nchidere
</p>

Limbajul HTML cunoate elemente speciale pentru definirea textului folosind diferite formatri.

Dac este nevoie s se treac la un rnd nou, se poate utiliza tagul<br>.

HTML nu trateaz blancurile multiple ca i tranziii n rnd nou.

3 / 22
 Entitile HTML permit s se nscrie pe pagin caractererezervate ispeciale.

Limbajul HTML permite crearea listelor ordonate, neordonate i de definiii.

HTML permite crearea tabelelor; fiecare tabel este format din celule aranjate pe rnduri; tagul de baz pentru crearea
unui tabelHTML este <table>, iar tagurile pentru crearea celulelor i a rndurilor sunt td i tr.

4. Linkurile

URL-ul este adresa unei resurse care poate fi accesat prin reea.

O adres URL absolut este adresa complet pn la resurs.

Adresa relativ URL este adresa care se bazeaz pe o alt adres.

Linkurile sau hyperlinkurile (eng. hyperlinks) n documentele HTML permit conectarea i trecerea de pe o pagin pe
alta, ct i conectarea fiierelor adreselor e-mail...

Linkurile pot indica o resurs definit cu o adres URL absolut sau relativ.

Linkul URL este definit ca valoarea atributului href, n timp ce textul linkului, cel care este vizibil pe pagin, se definete
ntre tagul de deschidere i tagul de nchidere<a>a elementului.

Atributultarget definete unde se va deschide o pagina conectat.

5. Formularele

Formulare reprezint instrumentul pentru colectarea informaiilor de la vizitatorii site-ului.

Datele colectate ale formularelor sunttransmise scriptului care efectueaz procesarea acestor date.

Formularul HTML este creat folosind elementul form.

Elementul formpoate conine atribute care determin modul de funcionare a acestuia.

Atributul action definete cui vor fi transmise datele formularului.

Atributul method definete modul n carevor fi transmisedatele.

Elementul inputeste elementul cel mai important al formularului i poate aprea n mai multe variante diferite, i asta
n funcie de valoarea atributului su type.

4 / 22
 Introducerea unui text simplu n cadrul unui formular se realizeaz prin utilizarea elementului input cu o valoare type a
atributului text.

Introducerea unui text cu mai multe rnduri n cadrul formularului se realizeaz utiliznd elementul textarea.

Transmiterea datelor formularului se realizeaz prin utilizarea elementului input de tip submit.

6. Antetul documentului HTML

Sursele fiecruidocumentHTML reprezint elementul html.

Elementul head este elementul rdcinpentru toate datele antetuluiunui document HTML.

Elementul head ncepe cu tagul <head> i se termin cu tagul </head>.

Elementul head nu este necesar s fie definit pentru ca pagina s fie valid.

Elementul titleeste un element obligatoriu al fiecrui document HTML care definete numele documentului HTML.

Elementul style seutilizeaz pentru a defini stilizarea CSS pentru documentul HTML curent.

Elementul basedefinete o adres de baz pentru toate adresele relative din cadrul documentului HTML.

Elementul link definetelegtura cu documentul extern sau cu resursa.

Elementul meta se folosete pentru definirea metadatelor despre documentul HTML.

Elementul script se folosete pentrudefinireascripturilor pe pagina client.

Elementul noscript se folosete pentru a defini un coninut alternativ care urmeaz s fie afiat utilizatorilor n ale
cror browsere sunt dezactivate sau nu sunt acceptate scripturile.

7. Multimedia n documentele HTML

Fotografiile, graficele, diagramele, iconiele i altele asemenea sunt o parte indispensabil a documentelor HTML de
astzi, n special pe web.

In cadrul documentului HTML, n general sunt utilizate formateleJPG, GIF i PNG.

5 / 22
 Pentru adugareaimaginii peun document HTML, se utilizeaz elementul img.

HTML5 suport redarea a trei formateaudio: Mp3, Wav i Ogg.

Pentru adugarea sunetuluipeun document HTML, se utilizeaz elementul audio.

n cadrul documentului HTML, este posibil s se redea fiierele video n trei formate diferite: MP4, WebM, Ogg.

Redarea fiierelor video n cadrul documentului HTML se poate face folosind elementul video.

8. Grafica 2D

Pentru afiarea graficii 2D n interiorul documentului HMTL se utilizeaz tehnologiile SVG i Canvas.

SVGeste un acronim pentru termenulScalable Vector Graphics, care este n esen un limbaj descriptiv bazat pe XML,
care se utilizeaz pentru crearea graficii 2D.

Elementul HTML care se utilizeaz pentru a desena grafica SVG estesvg.

SVG cunoate cteva forme care se pot desena n interiorulelementului svg.

Elementul SVGrect se folosete pentru desenarea dreptunghiului.

Elementul SVGcirclese folosete pentru desenarea cercului.

Elementul SVG pentru desenareaelipsei esteellipse.

Pentru crearea liniei drepte n SVG, se foloseteelementulline.

Pentru crearea linieintrerupte n SVG, se foloseteelementulpolyline.

Poligoanele SVGse deseneaz cu ajutorul elementului polygon.

Calea este forma cea mai general i cea mai puternic a sistemului SVG. Cu ajutorul ei, este posibil s se deseneze
aproape toate formele, de la dreptunghi, cercuri i elipse, pn la liniile ntrerupte i poligoane.

Elementul Canvasse utilizeaz pentru desenarea programabil agraficii cu ajutorul JavaScript.

Canvas se creeaz folosind elementul <canvas>.

9. Gruparea elementelor

6 / 22
Aranjamentulelementelor HTML pe pagin se mai numete altfel ilayout.

Pentru aranjamentuli gruparea elementelor HTML se folosescdiferite elemente HTMLcare se numesc altfel,
containere.

Unul dintre cel mai frecvent utilizate elemente care sunt folosite pentru aranjare esteelementul div.

Versiunea limbajuluiHTML5,pe lng elementul div de baz pentru aranjamentul elementelor de pe pagin, introduce
i cteva elemente diferite ale containerului cu un neles semantic specific.

Elementulsection definete seciunea documentului.

Elementularticle reprezint unarticol independent n cadrul documentului.

Elementulasidereprezintconinut pe lng coninutul principal.

Elementulfigurereprezintilustraii, imagine sau diagram, iar elementul figcaption titlu pentru elementulfigure.

Elementulfooterdefinete partea de jos (subsolul) a paginii sau unele din seciunile ei.

Elementulheaderdefineteantetul paginii sau unele dintre seciunile lui.

Elementulnav este container pentru linkuri de navigare.

Elementulprogressdefinete unindicator de finalizare a lucrului.

7 / 22
3. Stilizarea documentului HTML

10. Introducere n CSS

CSS (Cascading Style Sheets) este un limbaj care se folosete pentru a descrie semantica de prezentare a documentului
scris ntr-un limbaj descriptiv, aa cum este HTML.

Baza limbajului CSS o constituie regulile CSS (engl. CSS Rules).

Regulile CSS sunt alctuite din selector i declaraie.

SelectorulCSSindic elementul (sau elementele), la care se refer regula CSS respectiv.

Declaraia CSS implementeaz stilizarea pentru elementul la care se refer regula CSS.

CSS extern este acel cod CSS care se seteaz total separat de documentul HTML, ntr-un fiier separat.

CSS intern se afl direct n documentul HTML, ale crui elemente le stilizeaz.

CSSInlinepresupune definirea stilizrii directe a elementului HTML folosind atributulstyle.

11. Selectori de baz CSS

Pentru ca un element s fie stilizat folosind CSS, este necesar s se tie cum se ajunge la el, respectiv a se efectua
selectarea lui.

Selectorul universal selecteaz toate elementele de pe pagin, sau toate elementele din cadrul unui alt element i
semarcheaz cucaracterul asterisc (*).

Selectorii de tip permit selectarea elementelor pe baza numelui, respectiv a tipului de element.

Selectorul Classselecteaz elementele cu o anumit valoare a atributuluiclass.

Cnd valoarea atributului id se utilizeaz pentru selectarea elementelor, se vorbete despre selectorul ID.

Pentru a se selectatoi descendeniiunui element (direci i indireci), care ndeplinesc anumite criterii, este suficient
a crea un selector complex cu spaiu ntre prile selectorului.

Atunci cnd trebuie s selectaidoar descendenii direciai unui element, care ndeplinesc anumite criterii,prile
selectorului se despart prin caracterul "mai mare dect".

Selectareaprimului element nrudit ce urmeaz,se face folosind caracterul plus (+), pentrusepararea unor pri ale

8 / 22
 unui selector complex.

Selectareatuturor elementelor nrudite urmtoare, care ndeplinesc anumite criterii, se realizeaz cu selectorul, care
este construit folosind caracterul tilda (~).

12. Selectori CSS avansai

Pe lng selectarea elementelor pe baza atributelor de bazid i class, CSS permite i selectarea elementelor pe baza
oricrui alt atribut al elementului.

Pseudoclasele sunt selectori care sunt folosii pentru a defini comportamentul elementului n situaii speciale.

Pseudoclasele strii sunt un grup special de selectori care permit s se stilizeze diferite stri n care se pot gsi
elemente HTML.

Pseudoclasele structuralepermite selectarea elementelor pe baza structurii pe care ele o construiesc reciproc.

Pseudoelementele creeaz elementenoicare nu sunt specificate n structura documentului HTML.

13. Stilizarea textului

Tipografia este tehnica de prezentare a textului ntr-un mod inteligibil i lizibil.

Serifsunt fonturile caracterizate de detaliile de la capetele liniilor.

Sans Serifsunt fonturilecaracterizate de lipsa detaliilor pe care le au fonturile serif.

Monospacesunt acele fonturi unde toate caracterele ocup acelai spaiu pe orizontal.

Alegerea fontului pentru prezentarea textului unui element se face prin setarea proprietiifont-family.

Selectarea dimensiunii textului se poate realiza prin utilizarea proprietiifont-size.

Culoarea textului n documentul HTML se poate modifica utiliznd proprietateacolora regulii CSS.

Pentru crearea textului n caractere aldine/bold, este posibil i utilizarea proprietii CSSfont-weight.

Pentru aformataun anumit text ca iitalic/cursiv, este posibil s se utilizeze proprietateafont-style.

Pentru alinierea orizontal a textului se foloseteproprietateatext-align.

9 / 22
 Alinierea pe axa vertical se realizeaz utiliznd proprietateavertical-align.

Indentarea textului poate fi realizat utiliznd proprietateatext-indent.

Pentru controlul spaiului dintre caractere se folosete proprietatealetter-spacing, n timp ce pentru a defini spaiul
dintre cuvinte, se folosete proprietateaword-spacing.

Pentru a defini nlimea unei linii a textului se utilizeaz proprietatealine-height.

Pentru setarea liniei care poate fi gsit sub, deasupra sau n mijlocul textului, se folosete proprietatea
text-decoration.

Pentru transformarea textului, respectiv pentru convertirea majusculelor n minuscule i invers, se folosete
proprietateatext-transform.

14. CSS Box Model

Diviziunea de baz a tuturor elementelor HTML este inline i block.

Elementele block ncep ntotdeauna ntr-un rnd nou i ocup ntreaga lime disponibil, mpingnd celelalte
elemente ntr-un rnd nou.

ElementeleInlinesunt plasate unul lng cellalt ntr-o linie, iar dimensiunile lor depind doar de dimensiunile
coninutului pe care l dein.

Din punctul de vedere al CSS-ului, toate elementele HTML sunt tratate ca o cutie (box). Astfel, n jurul fiecrui element
HTML exist un cadru imaginar care poate fi stilizat folosind CSS.

Marginile sunt elemente care nu au o reprezentare vizual i se folosesc pentru a separa elementul de alte elemente
de pe pagin.

Cadrele suntelementele care definesc vizual limita unui element.

Paddingse folosete pentru separarea coninutuluielementului de cadrele sale.

Height se refer la nlimea coninutuluielementului.

Width se refer la limeaconinutului.

15. Crearea layout-ului

10 / 22
 Ca s aranjm elementele pe pagin putem utilizaurmtoareleabordri: tabelele HTML, CSS, CSS framework, CSS
Flexbox.

Fiecare element HTML poate fi poziionat ntr-unul din urmtoarele patru moduri:static, relativ, absolut sau fix.

Poziionarea static este poziionarea implicit a elementelor HTML. Cu aceast poziionare,elementele sunt aranjate
dup un flux normal ndocument.

Elementul cu poziionare relativ, este poziionat relativ n raport cu poziia sa normal pe care ar trebui s o aib dac
ar fi poziionat ca un element static.

Un element este poziionat absolut atunci cnd este poziionat relativ cu cel mai apropiat predecesor care a fost
poziionat n orice alt mod, n afara utilizrii poziionriistatic.

Poziionarea fix permite ca elementul s fie poziionat relativ n raport cu afiajul (viewport) browserului.

Utiliznd proprietatea float, putem s exportm elementul din fluxul normal al documentului i s-l poziionm n
extrema stng sau n extrema dreapt n cadrul containerului su printe.

Cu proprietatea clear secontroleaz comportamentul elementelor care se afl n jurul elementelor care sunt floated.

Atunci cnd dou elemente se suprapun, elementul care apare mai trziu n cod, va aprea deasupra elementului
vizual care a aprut anterior n cod.Totui, acest comportament implicit poate fi influenat cu proprietateaz-index.

Proprietateadisplaypoate avea i alte valori cu care se definete tipul decutie/boxn care se afl elementul HTML.

Proprietateavisibility permite ca un anumit element HTML s seascund, dar spaiul pe care l ocup s rmn
rezervat.

CSS ne permite s definim ce se va ntmpla cu coninutul care depete cadrul printelui su, folosind
proprietateaoverflow.

16. Flexbox Layout

Flexbox Layout este destinat aranjrii, centrrii i alinieriimai eficientea elementelor n cadrul elementelor container,
printe, chiar i atunci cnd dimensiunea acestor elemente nu este cunoscut dinainte.

Flex layout a fostconceput ca un mod alternativ modern de aranjare a componentelor, folosind proprietateafloat.

Flexbox Layoutdistinge ntre dou tipuri de componente:flex container,flex items, iarcontainerulflex conine
elemente flexibile.

Pentru a transforma unelement ntr-un container flexbox, este suficient s definim proprietatea display CSS, cu
valoareaflex.

Containerul Flexbox funcioneaz pe baza a dou axe: una principal, de-a lungul creia sunt distribuite elementele i
alta secundar, aa-numita ax cross.

11 / 22
 Pentru a controla comportamentul containerului flexboxi al elementelor care se afl n cadrul acestuia, exist un
numr mare de proprieti, dintre care unele pot fi definite pe elementul container, iar altele pe elemente flexibile ale
descendenilor.

17. Responsive design

Responsive designeste o abordare a crerii interfeei utilizator a aplicaiilor, astfel nct s se afieze adecvat pe orice
dispozitiv (pe calculatoarele desktop, pe tablete i telefoane).

Regula de baz pe care trebuie s o respectm cnd crem un layout adaptabil este s acordm prioritate unitilor
relative n raport cu cele absolute.

Unitile Viewport permit ca valorile s fie definite relativ la nlimea i limea cmpului vizual.

Unitateavweste relativ la limea cmpului vizual.

Unitateavheste relativ la nlimeacmpului vizual.

Unitateavmineste relativ la o dimensiune mai mic acmpului vizual.

Unitateavmaxesterelativ la o dimensiune mai mare acmpului vizual.

Interogrile media (engl. Media Query) permit ca anumite reguli CSS s fie aplicate numai n cazul ndeplinirii unor
condiii.

18. Transformrile i stilizrile CSS

Transformrile permit transformarea elementului HTML influennd caracteristicile lor vizuale.

Pentru a se deplasa elementul n raport cu poziia sa normal, se poate utiliza transformarea translate.

MetodaCSSrotate a proprietii transformpermite rotaia elementului.

Pentru a mri i a micora elementele HTML este posibil s se utilizeze metodascale() a proprietii transform.

MetodaskewX()realizeaz nclinarea elementului pe axa x. MetodaskewY()face acelai lucru, dar pe axa y, n timp ce
metodaskew()poate realiza nclinarea elementului pe ambele axe.

Metoda matrixaccept 6 parametri i, astfel, permite definirea valorilor pentru toate transformrile dintr-o dat.

Transformrile 3D funcioneaz ntr-un mod similar cu transformrile 2D prezentate, ns acestea permit

12 / 22
transformarea elementelor cu ajutorul unui sistem de coordonate cu trei axe.

Atunci cnd schimbarea elementului se face uor i treptat, ntr-o anumit perioad de timp, este vorba de tranziie.

13 / 22
4. Introducere n JavaScript

19. Introducere n limbajul JavaScript

JavaScripteste un limbaj de programaredinamic,interpretat, cunoscut n utilizare ca un limbaj de scripting pentru

paginile web.

JavaScript se bazeaz pe prototipuri, sprijin programarea orientat pe obiecte, imperativ i declarativ.

ECMAScripteste o specificaie a limbajului care constituie baza JavaScript.

LimbajulJavaScript se bazeaz pe specificaiile ECMAScript i se execut n cadrul browserului de ctre unele

componente speciale, numite interpretori.

JavaScript a fost creat n mai 1995 de ctre Brendan Eich, care n aceea perioad lucra pentru companiaNetscape.

JavaScriptpoate fi scris n trei moduri, ca JS intern, extern i inlinie.

20. Sintaxa limbajului JavaScript

JavaScript mprumut cea mai mare parte a sintaxei din limbajul Java (respectiv C), dar are i elemente ale
limbajuluiPerliPyton.

JavaScript este sensibil la majuscule i minuscule i utilizeaz setul de caractereUnicode.

Codul JavaScript este format din comenzi care sunt grupate n blocuri.

n limbajul JavaScript comenzile se numesc declaraii i sunt separate de semnul punct i virgul (;).

Parserul JS ignor spaiul gol.

Cuvintele-cheie sunt cuvinte rezervate de ctre limbaj, iar pentru interpretor au o semnificaie special.

Identificatorul nu este predefinit n limbaji este folosit pentru a indica elementele codului.

Atunci cnd se scrie un cod JavaScript, este posibil s se scrie i un text care nu are nicio semnificaie pentru
interpretor, definind comentariul.

21. Variabile, tipuri de date i operatori

14 / 22
Variabilele servesc ca nite containere pentru valorile folosite n timpul execuiei codului.

Declararea subnelege crearea unei variabile.

Iniializarea subnelege atribuirea valorii iniiale unei variabile.

JavaScript este un limbaj slab tipizat, ceea ce nseamn c tipul de dat se manipuleaz n mod automat.

JavaScript recunoate urmtoarele tipuri de date: Number, String, Boolean, Null, Undefined i Object.

Obiectele se pot observa ca nite containere pentru un numr mai mare de date.

irurile asigur introducerea mai multor valori n cadrul unei variabile.

Operatorii sunt construcii speciale ale unui limbaj pentru efectuarea operaiilor asupra operanzilor.

Cei mai importani operatori n limbajul JavaScript sunt: operatorii aritmetici, operatorii de atribuire, operatorii de
comparare, operatorii logici, operatorii String i operatorii speciali.

15 / 22
5. Controlul fluxului de execuie a codului JavaScript

22. Execuia condiionat

Blocul de cod este principalul element de construcie a constructorilor de limbaje n JavaScript, care reprezint un grup
de declaraii grupate ntr-o unitate logic.

Controlul fluxului asigur influena liniaritii execuiei codului.

Ramificarea asigur ca anumite instruciuni s se execute doar n cazul ndeplinirii unei condiii.

Principala instruciune de ramificare n limbajul JavaScript este instruciunea if.

Instruciunea if...else se folosete pentru controlul fluxului, n aa fel nct asigur definirea logicii care se va executa
chiar i atunci cnd condiia este sau nu este ndeplinit.

Instruciunea ifelse ifelse asigur definirea unui numr mai mare de condiii.

Instruciunea switch asigur obinerea controlului fluxului pe baza egalitii valorilor.

Controlul fluxuluieste posibilicu operatorul ternar, ntr-un mod similar cu blocul ifelse.

23. Buclele

Pe lng ramificare, buclele reprezint principalele elemente pentru obinerea controlului fluxului.

Buclele asigur execuia multipl a unui cod.

Bucla for asigur execuia unui bloc de cod de un numr de ori exact determinat.

Bucla forin este conceput special pentru trecerea prin toate proprietile unei variabile obiect.

Bucla forof asigur trecerea prin valorile proprietilor unui obiect.

Bucla while execut un anumit tip de cod atta timp ct este ndeplinit condiia pentru execuia buclei.

Dowhile este un tip special de bucl, la care n primul rnd se execut blocul de cod, iar abia apoi se verific condiia.

Instruciunea continue ntrerupe iteracia actual i trece la urmtoarea.

Instruciunea break prsete bucla.

16 / 22
24. Procesarea excepiilor

n timpul execuiei codului de program al unui limbaj, pot aprea erori. Erorile sunt partea component a fiecrui
program.

Excepia subnelege reprezentarea erorii care a aprut n cod.

Excepia n JavaScript se reprezint prin obiectul Error.

Procesarea excepiilor subnelege manipularea adecvat a obiectului Error i evitarea ntreruperii execuiei codului.
Procesarea excepiilor se obine prin folosirea instruciunii speciale try...catch.

Pe lng blocurile try i catch, instruciunea trycatch poate s conin nc un bloc suplimentar finally. Blocul finally
se folosete la definirea codului care se va executa n mod obligatoriu.

Aruncarea individual a excepiilor se poate efectua cu ajutorul instruciunii throw.

17 / 22
6. Funciile i obiectele JavaScript

25. Funciile

Funcia este un bloc de cod special, care execut o anumit logic.

n timpul execuiei unei astfel de logici, funcia poate folosi anumite valori numite parametri de intrare, dar poate
emite i rezultatul su ca valoare returnat.

n limbajul de programare JavaScript, funcia se definete prin folosirea cuvntului-cheie function.

Logica funciei se definete n cadrul corpului funciei.

Pentru ca logica funciei s funcioneze, aceasta trebuie apelat.

Funcia poate avea parametri de intrare i valoare returnat, ns aceste dou elemente nu sunt neaprat necesare.

Valoarea returnat a funciei se emite prin cuvntul-cheie new.

n limbajul JavaScript, funcia se poate defini i fr denumire. Cnd funcia nu are denumire, aceasta este o funcie
anonim.

JavaScript recunoate i aa-numitele funcii autoapelate. Acestea sunt funcii care se activeaz n mod automat n
momentul n care execuia codului ajunge la ele.

Atunci cnd execuia codului ajunge la o funcie astfel definit, funcia va fi executat n mod automat.

Variabilele create n cadrul unei funcii se numesc variabile locale i ele sunt vizibile doar funciei n cadrul creia sunt
create.

26. Obiectele

Programarea orientat pe obiecte asigur abstractizarea modelelor bazate pe noiuni din lumea real.

Clasa este un ablon pentru crearea obiectelor.

La programarea bazat pe stilul de prototipuri, noiunea de clas nu exist, deoarece obiectele motenesc alte obiecte.

Aproape toate tipurile de date, excepie fiind tipurile primitive, precum string, number, boolean, null i undefined sunt
obiecte.

Obiectele reprezint ansambluri de diferite valori, care descriu o noiune identic.

18 / 22
Obiectele pot conine metode i proprieti.

JavaScript asigur crearea obiectelor cu ajutorul unei funcii speciale, numit constructor obiect (object constructor).

Prototipurile sunt baza pentru motenire n limbajul JavaScript i asigur ca un obiect s primeasc caracteristicile unui
alt obiect.

JavaScript recunoate i un ansamblu de obiecte ncorporate, care sunt puse la dispoziia programatorilor i care
execut diferite funcii.

19 / 22
7. Manipularea structurii, stilizrii i a datelor prin folosirea
JS-ului

27. Manipularea DOM-ului

DOM este prescurtarea de la noiunea de Document Object Model. DOM este reprezentarea orientat pe obiecte a
unui document HTML.

DOM construiete o structur de obiecte n form de arbore (tree).

Pentru manipularea elementelor (nodurilor) din structura DOM, anterior trebuie realizat referina la obiectele care le
reprezint.

Funcia getElementById asigur referina la element cu valoarea transmis a atributului id.

Funcia getElementsByClassName asigur referina la toate elementele care au transmis valoarea atributului class.

Funca getElementsByTagName asigur referina la toate elementele de pe pagin care sunt de un anumit tip.

Funcia querySelector asigur referina la primul element care satisface selectorul CSS transmis.

Funcia querySelectorAll asigur referina la toate elementele care satisfac criteriul selectorului CSS transmis.

Proprietatea care se folosete pentru manipularea coninutului textual al elementelor HTML este innerHTML.

Pentru setarea valorii atributului unui element, se poate folosi metoda setAttribute.

Stilizarea unui element se poate manipula prin folosirea proprietii style pe care o deine fiecare obiect DOM.

Funcia createElement creeaz un element HTML.

Funcia removeChild elimin un element HTML.

Funcia appendChild adaug un nod HTML.

Funcia replaceChild schimb elementul HTML existent.

Funcia insertBefore asigur adugarea elementului naintea unui alt element n structura DOM.

28. Evenimentele

20 / 22
 Evenimentul este o noiune care descrie un anumit fenomen.

ntr-o aplicaie HTML5, evenimentele pot fi provocate de browser, ns i de utilizatorul aplicaiei.

JavaScript deine posibilitatea de a reaciona la evenimentele la care se ajunge n aplicaie.

Logica ce se activeaz atunci cnd apare un eveniment (engl. event) se numete event handler.

Metoda addEventListener se folosete pentru nregistrarea event handler-ului pentru un anumit eveniment.

Obiectul evenimentului este obiectul care conine informaii despre evenimentul propriu-zis.

Funcia preventDefault anuleaz comportamentul implicit a evenimentului.

29. Operarea cu datele

Orice aplicaie, indiferent de tipul sau tehnologia cu care este realizat, manipuleaz anumite date.

Ajax asigur manipularea asincron a datelor, fr a da refresh ntregii pagini.

Cele dou cel mai des folosite formate pentru transmiterea datelor prin cale asincron sunt: XML i JSON.

XMLHttpRequest este un obiect JavaScript care asigur clientului schimbul de date cu serverul, prin cale asincron.

Noiunile de serializare i deserializare a datelor se refer la procesul de convertire a obiectelor unui limbaj n i din
formatul folosit, pentru a fi posibil transferul lor prin reea.

21 / 22
8. jQuery

30. Bazele jQuery

Query este una dintre cele mai populare biblioteci JavaScript pe care a creat-o John Resig n anul 2006.

jQuery simplific practic realizarea fiecrui aspect al programrii JavaScript.

Biblioteca jQuery simplific procesul de selecie a elementelor, folosind aa-numii selectori care imit funcionarea
selectorilor CSS.

Procesarea evenimentelor este un alt aspect al programrii care este semnificativ facilitat datorit utilizrii bibliotecii
jQuery.

Biblioteca jQuery simplific semnificativ procesul de trimitere a cererii asincrone ctre server.

jQuery manipuleaz obiecte jQuery speciale.

22 / 22