CUPRINS

Programarea front-end a site-urilor web ................................................................................................ 2

1. Marcarea si structurarea paginilor Web cu ajutorul HTML................................................................. 2
1.1. Documentele HTML ...................................................................................................................... 3
1.2. Interactivitatea cu clientul prin intermediul formularelor ........................................................... 6
2. CSS (Cascading Style Sheets) ............................................................................................................. 12
2.1. Selectorii CSS .............................................................................................................................. 13
2.2. Agregarea in cascada a stilurilor ................................................................................................ 14
2.3. Mostenirea in CSS....................................................................................................................... 16
2.4. Specificarea culorilor .................................................................................................................. 18
2.5. Unitati de masura in CSS ............................................................................................................ 18
2.6. Box Model................................................................................................................................... 18
3. JavaScript ........................................................................................................................................... 22
3.1. Variabilele in JavaScript .............................................................................................................. 24
3.2. Operatori .................................................................................................................................... 24
3.3. Functii in JavaScript .................................................................................................................... 26
3.4. Evenimente................................................................................................................................. 29
3.5. JavaScript + DOM ....................................................................................................................... 31
Bibliografie ............................................................................................................................................ 35
Programarea front-end a site-urilor web
Autor: Daniel Mican

Front-end se refera la orice aspect al procesului de proiectare, al paginilor web, care apare sau are
legatura directa cu browser-ul. Dezvoltarea front-end presupune design-ul interfetelor paginilor web.
Urmatoarele activitati sunt, de obicei, considerate a fi sarcini de front-end: design-ul grafic al
interfetelor, aranjarea si prezentarea informatiilor in vederea vizionarii in conditii optime; crearea
documentelor HTML si a foilor de stil CSS; integrarea functionalitatilor oferite cu ajutorul scripturilor
JavaScript.

HTML (Hypertext Markup Language) este folosit pentru structurarea paginilor web. Exista cateva
versiuni de HTML in uz astazi: HTML 4.01 este cel mai popular, HTML5 este mai robust si castiga
teren, iar incet incet se bucura si de sprijinul browserelor. Ambele versiuni au o implementare mai
stricta numita XHTML (eXtensible HTML ), care este, in esenta, aceeasi limbaj dar cu o sintaxa mult
mai stricta. HTML nu este un limbaj de programare, este un limbaj de marcare, ceea ce inseamna ca
permite identificarea si descrierea diferitelor componente ale unui document, cum ar fi titluri,
paragrafe sau liste. Marcajul indica structura de baza a documentului.

CSS (Cascading Style Sheets) este folosit pentru prezentare. In timp ce HTML este folosit pentru a
descrie continutul unei pagini web, rolul Cascading Style Sheets (CSS) este de a descrie modul in care
ar trebui sa arate continutul. In designul web, modul in care arata pagina este cunoscut sub termenul
de prezentare. Asta inseamna fonturi, culori, imagini de fundal, linii de spatiere, aspectul paginii, etc.
Toate aceste elemente sunt controlate cu CSS. Cu cea mai noua versiune (CSS3), putem adauga chiar
efecte speciale si animatie paginilor web.

JavaScript este folosit pentru a oferi interactivitate. JavaScript este un limbaj de scripting care este
utilizat pentru a adauga interactivitate paginilor web. Interactivitatea consta in: validarea campurilor
unui formular; schimbarea stilurilor pentru un element sau chiar pentru intreg-ul site; determinarea
browserului sa isi aminteasca informatii despre utilizator pentru vititele viitoare; construirea unor
widget-uri de interfata, cum ar fi meniurile derulante. JavaScript este utilizat pentru a manipula
elementele din cadrul paginiilor web, a stilurilor aplicate, sau chiar a browser-ului.

1. Marcarea si structurarea paginilor Web cu ajutorul HTML

HTML (Hyper Text Markup Language) este un limbaj folosit pentru a descrie paginile web. HTML este
un limbaj de marcare alcatuit dintr-un set de tag-uri de marcare. Tag-urile descriu continutul si
structura documentului HTML. Documentele HTML sunt alcatuite atat din tag-uri HTML cat si din text
simplu. Documentele HTML mai sunt numite si pagini web.

Tag-urile de marcare HTML sunt de obicei numite simplu, tag-uri HTML. Acestea sunt cuvinte cheie
inconjurate de paranteze unghiulare. Tag-urile HTML sunt in mod normal prezente in perechi. Primul
tag dintr-o pereche este tag-ul de inceput, iar al doilea este tag-ul de final. Tag-ul de final este scris ca
si tag-ul de inceput, cu diferenta ca mai contine un slash inainte de numele tag-ului.

<numetag> Continut </numetag>

Un element HTML este tot ceea ce este intre tag-ul de start si tag-ul final, inclusiv tag-urile. Tag-urile
HTML si elementele HTML sunt adesea folosite pentru a descrie acelasi lucru. Fiecare element spune
browserului ceva despre informatiile care se afla intre tag-ul de inceput si cel de sfarsit.

element HTML

<p> Acesta este un paragraf.</p>

Tag-urile HTML pot contine atribute. Atributele furnizeaza informatii suplimentare cu privire la
elemente HTML. Atribute sunt intotdeauna specificate in eticheta de start si vin in perechi. Adica
fiecarui nume de atribut ii este atribuita si o valoare.

<tag numeatribut = "valoare"> ... </tag>

Valorile atributelor trebuie sa fie intotdeauna cuprinse intre ghilimele. Ghilimele duble sunt cele mai
comune, dar sunt de asemenea permise si cele simple. Tag-urile HTML pot contine mai multe
atribute si valori ale acestora. La marcatorii simetrici, atributele sunt descrise in eticheta de
deschidere:

<tag atribut1="valoare1" atribut2="valoare2" .... atributN="valoareN">... </tag>

1.1. Documentele HTML

Structura unei pagini HTML poate fi vizualizata in figura de mai jos:

Orice document HTML se redacteaza intr-un editor de texte, si se salveaza ca text ASCII standard, cu
extensiile .html sau .htm. Textul ASCII trebuie cuprins in marcatorul (chiar daca multe browsere
tolereaza lipsa sa): <html>...</html>. Numele tagurilor, atributelor si numele valorilor atributelor
sunt case-insensitive. Totusi World Wide Web Consortium (W3C) recomanda valori lowercase pentru
taguri, atribute si valori in recomandarile HTML 4. Noua versiune (X)HTML solicita si valori lowercase
pentru taguri.

Fiecare document are doua sectiuni principale, o sectiune de antet si una de corp, generate de
marcatorii pereche <head>... </head> pentru antet si <body>... </body> pentru corp. Un exemplu de
document HTML poate fi observat in cele ce urmeaza:

<!DOCTYPE html>
<html>
<head>
<title>Acesta este un titlu</title>
</head>
<body>
<h1>Acesta este un heading</h1>
<p>Acesta este un paragraf.</p>
<b>Acesta este un text boldat.</b>
</body>
</html>
In exemplul de mai sus declaratia DOCTYPE defineste tipul de document. Textul intre <html> si
</html> descrie pagina web, cel intre <head> si </head> este continutul invizibil al paginii, iar cel
intre <body> si </body> este continutul vizibil al paginii. Textul continut intre <title> si </title> este
afisat ca un titlu in browserul web. Textul intre <h1> si </h1> este afisat ca un titlu in pagina HTML,
iar textul continut intre <p> si </p> este afisat ca un paragraf.
Dupa redactare si salvare, documentul HTML trebuie deschis cu ajutorul unui browser. Scopul unui
browser web (cum ar fi Google Chrome, Internet Explorer, Firefox, Safari), este de a citi documentele
HTML si a le afisa ca pagini web. Browser-ul nu afiseaza tag-uri HTML, dar foloseste tag-urile pentru a
determina modul in care continutul paginii HTML trebuie prezentat / afisat utilizatorilor.

In sectiunea de antet <head>1 se introduc informatii despre autorul documentului si titlul sau (tagul:
<title>...</title>). Majoritatea browserelor Web afiseaza continutul din title in bara de titlu si
stocheaza acest titlu atunci cand utilizatorul salveaza adresa paginii, ca semn de carte sau intr-o lista
de interes. Din aceste motive se recomanda folosirea unor titluri cat mai semnificative, unice care
trebuie sa contina numai text simplu.

Elementul <head> este un container pentru o serie de elementele componente. Elementele ce il

compun pot include scripturi, instructiuni browser, style sheets, meta informatii. Astfel aici vom
intalni urmatoarele taguri: <title>, <link>, <style>, <script>, <noscript>, <meta>, si <base>. Antetul
contine, de obicei, si corpul functiilor-handler si ale altor scripturi. Comentariile se includ in
marcatorul <!--....--> si pot contine scripturi Java Scrit, Jscript, PHP, ASP, care bor fi ingorate de
browserece care nu poseda configuratii adecvate.

Corpul unui document trebuie sa fie cuprins integral intre tag-urile <body>...</body> si este format
din informatia nestructurata, textuala, care se scrie ca in orice document ASCII, dupa care este
structurata prin includerea anumitor portiuni in marcatori simetrici si formatata prin stabilirea de
atribute pentru anumiti marcatori. Textul neformatat este considerat de catre browsere plain text,
afisat intr-un singur sir, trecandu-se la o noua linie doar cand se ajunge la marginea ferestrei, fontul
folosit la afisare este fontul implicit setat in browser.

Listele sunt enumerari de item-uri. Listele pot fi ordonate (<ol>), neordonate (<ul>) sau liste de
definitii (<dl>). In cadrul primelor doua categorii, item-urile sunt delimitate cu marcatorul vid <li>.
Listele de definitie folosesc doi marcatori, unul pentru termen (<dt>) si unul pentru definitie (<dd>).

<ol>
<li>Alexandra</li>
<li>Mihai</li>
</ol>
<ul>
<li>Alexandra</li>
<li>Mihai</li>
</ul>
<dl>
<dt>Alexandra</dt>
<dd>- are ochii albastri</dd>
<dt>Mihai</dt>
<dd>- are ochii verzi</dd>
</dl>

Structurarea suprafetei de afisare impune impartirea documentului in zone de continut. Aceste zone
pot fi delimitate fie prin tabele, fie prin cadre. Tabelele sunt definite cu tag-ul <table>.

1
Lucia Rusu, Robert Buchmann, Dezvoltarea aplicaţiilor WEB, Editura Risoprint, 2004
Un tabel este impartit in randuri cu tag-ul <tr>. Un rand este impartit in celule de date cu tag-ul <td>.
Un rand poate fi, de asemenea, divizat in titluri cu tag-ul <th>. Elementele <td> sunt containerele de
date din tabel. Elementele <td> poate contine tot felul de elemente HTML, cum ar fi text, imagini,
liste, alte tabele, etc. Formatarea unui tabel poate fi realizata folosind CSS.

In cele ce urmeaza prezentam cele mai importante tag-uri HTML pentru lucrul cu tabele:

<table> defineste un tabel

<th> defineste o celula antet intr-un tabel
<tr> defineste un rand intr-un tabel
<td> defineste o celula intr-un tabel
<thead> grupeaza continutul din antetul unui tabel
<tbody> grupeaza continutul din corpul unui tabel
<tfoot> grupeaza continutul din subsolul unui tabel

Mai jos prezentam un exemplu de folosire a tagurilor pentru afisarea unui tabel cu doua linii. Prima
linie este impartita in doua celule, iar cea de-a doua linie contine o singura celula.

<table bordercolor="blue" border="5">

<tr>
<td background="imagine.gif">celula 1 rand 1</td>
<td>celula 2 rand 1</td>
</tr>
<tr>
<td colspan="2">celula 1 rand 2</td>
</tr>
</table>

Un iframe este folosit pentru a afisa o pagina web in cadrul unei alte pagini web. Mai jos URL-ul
indica locatia paginii care va fi apelata si deschisa in cadrul iframe-ului. Sintaxa pentru a adauga un
iframe este:

<iframe src="URL"> </iframe>

Pentru formatarea unui iframe se folosesc stilurile CSS. Cele mai importante atribute pe care le poate
contine un iframe sunt prezentate in continuare:

src specifica adresa URL a documentului care va fi incorporat in <iframe>

srcdoc specifica continutul HTML al documentului care va fi incorporat in <iframe>
height specifica inaltimea unui <iframe>
width specifica latimea unui <iframe>

Link-urile permit utilizatorilor sa navigheze de la o pagina la alta. Un link se creaza cu ajutorul tag-ului
HTML <a>, care defineste un hyperlink. Un hyperlink (sau link-ul) poate fi reprezentat de catre un
cuvant, grup de cuvinte, sau o imagine pe care se poate da clic pentru a trece la un alt document.
Cand se deplaseaza cursorul pe o legatura intr-o pagina Web, sageata se va transforma intr-o mana
mica. Cel mai important atribut al elementului <a> este atributul href, care specifica destinatia link-
ului. Pe langa acesta atributul target specifica unde sa se deschida documentul HTML spre care este
adaugata legatura. Valorile pe care le poate lua sunt urmatoarele: _blank, _parent, _self, _top. Codul
HTML pentru un link se poate vedea mai jos:

<a href="URL" target="_blank">Textul link-ului / Imagine</ a>

In cadrul tag-ului <a>, atributul id poate fi folosit pentru a crea un marcaj in interiorul unui document
HTML. Marcajele nu sunt afisate in nici un fel special si sunt invizibile pentru cititor. Un marcaj are
urmatorul cod:

<a id="semncarte">Ati ajuns la semnul de carte</a>

Un link catre semnul de carte, existent in cadrul aceluiasi document HTML, se adauga folosind
urmatorul cod:

<a href="#semncarte">Click aici pentru a merge la semnul de carte</a>

In cazul in care se doreste adaugarea unui link catre semnul de carte de pe un alt document HTML
codul este:

<a href="pagina.html#semncarte">Click aici pentru a merge la semnul de carte </a>

In HTML, imaginile sunt definite cu tag-ul <img>. Tag-ul <img> este gol, ceea ce inseamna ca aceasta
contine doar atribute si nu are nici o eticheta de inchidere. Pentru a afisa o imagine pe o pagina,
trebuie sa utilizam atributul src. Src vine de la "sursa". Valoarea atributului src este URL-ul imaginii pe
care dorim sa il afisam. Sintaxa pentru definirea unei imagini se poate vedea mai jos:

<img src="url" alt="titlul sau descrierea imaginii">

URL-ul contine locatia la care este stocata imaginea. Daca dorim sa afisam intr-un document HTML o
imagine cu sigla FSEGA, logo.png, situat in directorul /img/ de la "www.econ.ubbcluj.ro" are URL-ul:
http://www.econ.ubbcluj.ro/img/logo.png.

Pentru formatarea imaginilor se recomanda folosirea stilurilor CSS. Cele mai importante atribute ale
tag-ului <img> pe care le poate contine o imagine sunt prezentate in continuare:

src specifica adresa URL a unei imagini

alt specifica un text alternativ pentru imagine si va fi afisat in cazul in care imaginea
nu poate fi afisata
height specifica inaltimea unei imagini
width specifica latimea unei imagini

1.2. Interactivitatea cu clientul prin intermediul formularelor

Formularele au fost introduse in HTML pentru a sigura schimbul de informatii intre client si server.
Formulare preiau datele de la utilizator si sunt trimise spre a fi procesate de catre scripturi pe partea
de server.

Modul de functionare al formularelor este urmatorul:

 utilizatorul completeaza formularul si apasa butonul de trimitere (se trimit informatiile din
formular catre server);
 numele fiecarui control impreuna cu valorile introduse/selectate sunt trimise catre server;
 serverul proceseaza informatiile prin intermediul unui script care se afla si ruleaza pe partea
de server;
 serverul creaza o noua pagina raspuns pe care o trite utilizatorului.
Un formular HTML se va afla tot timpul intre tag-urile <form> ... <form> si se introduce astfel:

<form action="url-al-unui-script-aflat-pe-server" method="get||post">

elemente de input
</form>

Atributul action indica URL-ul fisierului care va prelua, pe partea de server, datele formularului. Acele
fisiere pot fi constituite din scripturi CGI, ASP, PHP, etc.

Atributul method indica metoda de transfer, POST sau GET. Cu metoda POST valorile sunt trimise
prin intermediul antetelor HTTP, sau transfera un flux de octeti la bufferul de intrare al serverului. Cu
metoda (GET) datele sunt codificate intr-un sir de caractere care se alipeste URL-ului specificat in
action. URL-ul scriptului de prelucrare contine un sir de caractere ce incepe cu ?, continua cu perechi
de forma numeElementFormular = valoareElementFormular, despartite prin &. Acest sir de caractere
va fi preluat pe server, de catre scripturile aflate pe server, in vederea prelucrarii informatiilor.

In figura urmatoare se poate vedea cum se trimit datele din formularul de mai sus prim metoda GET.

http://www.econ.ubbcluj.ro/~daniel.mican/script.php?nume=daniel+mican&email=daniel.mican%4
0econ.ubbcluj.ro

Metoda GET este bine sa se foloseasca pentru:

 formulare scurte (cum ar fi casetele de cautare);

 atunci cand se primesc date de la serverul web (nu se recomanda trimiterea de informatii
care ar trebui sa fie adaugate sau sterse dintr-o baza de date).

Metoda POST este bine sa se foloseasca in cazul in care formularul:

  permite utilizatorilor sa incarce fisiere;
 contine foarte multe elemente de input;
 contine date sensibile (de exemplu parole);
 adauga / sterge informatii dintr-o baza de date.

Intre etichetele <form> se include textul formularului si elementele sale. Un eveniment important
tratat in scripturi se ferera la actiunea de trimitere (Submit), asociat cu actiunea specificata in action.

In cele ce urmeaza prezentam cele mai importante atribute pentru tag-ul <form>:

accept-charset specifica codificarile de caractere care urmeaza sa fie utilizate pentru trimiterea
formularului
action specifica unde sa se trimita datele din formular atunci cand se apasa pe butonul
de trimitere
autocomplete specifica daca un formular ar trebui sa aiba autocomplete activat sau nu
enctype specifica modul in care datele din formular ar trebui sa fie codificate atunci cand
sunt trimise spre server (numai pentru metoda = "post")
method specifica metoda HTTP ce va fi utilizata pentru trimiterea datelor din formular
name specifica numele unui formular
novalidate specifica daca formularul nu ar trebui sa fie validat atunci cand se apasa pe
butonul de trimitere
target specifica unde sa afiseze raspunsul care este primit dupa trimiterea formularului

Un formular HTML poate contine mai multe tipuri de elemente de intrare, cum ar fi: campurile de tip
text, liste derulante, legende, elemente de etichetare, casete de selectare, butoane radio, butoane
de trimitere / resetare.

Fiecare control din cadrul unui formular are rolul de a aduna si transmite informatie pe server.
Pentru a sti carui element ii apartine o data care a fost trimisa pe server, fiecare element de input
trimite un nume si o valoare. Aceasta valoare poate fi introdusa (campuri de tip text) sau aleasa (liste
derulante, butoane radio) de catre utilizator, dintr-un set de raspunsuri predefinit.

nume valoare

nume = daniel mican

email = [email protected]

Cel mai important element din cadrul unui formular este elementul <input>. Elementul <input> este
folosit pentru a capta informatii provenite de la utilizator. Un element <input> poate varia in mai
multe moduri, in functie de atributul type. Un element <input> poate fi un camp de tip, caseta,
parola, buton radio, buton de trimitere, etc.

Cele mai frecvente tipuri de elemente de tip <input> sunt descrise mai jos:

<input type="text"> defineste un camp de introducere ce se intinde pe o linie, in care

utilizatorul poate introduce text;
<input type="password"> defineste un camp de tip parola;
<input type="radio"> defineste un buton radio. Butoane radio permit unui utilizator sa
selecteze doar o singura optiune dintr-un numar limitat de optiuni;
<input type="checkbox"> defineste o caseta de selectare. Casete de selectare permit unui
utilizator sa selecteze zero sau mai multe optiuni dintr-un numar
limitat de optiuni;
 <input type="submit"> defineste un buton de trimitere;
<input type="button"> defineste un buton pe care se poate da click (de obicei se utilizeaza
impreuna cu JavaScript pentru a rula un script);
<input type="color"> defineste un selector de culoare;
<input type="date"> defineste un control de tip data (an, luna si zi);
<input type="datetime"> defineste un control de tip data impreuna cu unul de tip timp (an,
luna, zi, ora, minut, secunda, si fractiune de secunda, in functie de
fusul orar UTC );
<input type="email"> defineste un camp pentru o adresa de e-mail;
<input type="file"> defineste un camp pentru selectarea fisierelor si un buton "Browse..."
(pentru incarcarea fisierelor);
<input type="hidden"> defineste un camp de introducere ascuns;
<input type="image"> defineste o imagine ce va fi setata ca buton de trimitere a
formularului;
<input type="reset"> defineste un buton de resetare (reseteaza toate valorile unui formular
la valorile implicite);
<input type="tel"> defineste un camp pentru introducerea unui numar de telefon;
<input type="url"> defineste un camp pentru introducerea unui URL.

Elementul <input type="text"> defineste un camp de introducere care se intinde pe o singura linie, in
care utilizatorul poate introduce text. Atributul name este folosit pentru a prelua, pe server, valorile
trimise prin intermediul formularului. Atributul size este folosit pentru a specifica latimea
formularului (se recomanda evitarea lui si folosirea CSS). Artibutul maxlength este folosit pentru a
limita numarul maxim de caractere pe care utilizatorul le poate introduce.

Nume <input type="text" name="nume" size="25" maxlength="50" />

Elementul <input type="password"> defineste un camp de tip parola. Este similar cu tipul text, cu
diferenta ca mascheaza caracterele.

Parola <input type="password" name="parola" size="25" maxlength="50" />

Elementul <input type="hidden"> defineste un camp de introducere ascuns. Aceste controale nu sunt
afisate in cadrul formularului. Acestea pot fi vazute doar in cazul in care se vizualizeaza sursa paginii
HTML.

<input type="hidden" name="cod" value="acesta valoare este trimisa pe server">

Elementul <input type="file"> defineste un camp pentru selectarea fisierelor si un buton "Browse..."
(pentru incarcarea fisierelor). Permite alegerea si incarcarea fisierelor grafice, video, mp3, pdf, etc.

<input type="file" name="fisier" />

Elementul <input type="submit"> defineste un buton de trimitere. Un buton de trimitere este folosit
pentru a trimite datele din formular catre un server. Datele sunt trimise la pagina specificata in
atributul action al formularului. Fisierul definit in atributul action preia datele de intrare trimise si de
obicei le introduce intr-o tabela din cadrul bazei de date.
<input type="submit" name="trimite" value="Trimite formular" />

Elementul <input type="reset"> defineste un buton de resetare (reseteaza toate valorile unui
formular la valorile implicite).

<input type="reset" value="Resetati">

Tag-ul <textarea> defineste un control de introducere a textului pe mai multe linii. O zona de text
poate contine un numar nelimitat de caractere, chiar daca se specifica un numar de coloane si linii.
Dimensiunea unei zone de text pot fi specificata cu ajutorul atributelor cols si rows. Sau chiar se
recomanda folosirea proprietatilor CSS, height si width. In cazul in care se doreste introducerea unei
valoari implicite, aceasta va fi pozitionata intre cele doua tag-uri <textarea>...</textarea>.

<textarea name="observatii" rows="5" cols="30"> valoare implicita </textarea>

Elementul <select> este folosit pentru a crea o lista derulanta. Tag-urile <option> din interiorul
elementului definesc optiunile disponibile in cadrul listei. Tag-ul <optgroup> este folosit pentru a
grupa optiunile in cadrul listei. In cazul in care o lista contine un numar mare de optiuni, gruparea
optiunilor este recomandata pentru ca acestea devin mai usor de manevrat pentru utilizatori. Cand
tributul selected este prezent in cadrul tag-ului <option>, optiunea devine implicita. Atributul value
ataseaza o valoare elementului listei care va fi trimisa, in cazul in care se selecteaza optiunea.

<select>
<option value="Garsoniera">Garsoniera</option>
<optgroup label="Apartament">
<option value="1 camera" selected>1 camera</option>
<option value="2 camere">2 camere</option>
</optgroup>
</select>

Tag-ul <fieldset> este folosit pentru gruparea elementelor in cadrul unui formular. Tag-ul <fieldset>
deseneaza o caseta in jurul elementelor pe care le grupeaza. Tag-ul <legend> defineste o legenda
pentru elementul <fieldset>.

<form>
<fieldset>
<legend> Detalii personale: </legend>
Nume: <input type="text" name="nume">
</fieldset>
</form>
HTML5 a introdus noi controale care pot fi folosite in cadrul formularelor pentru a standardiza modul
in care unele informatii sunt colectate. Browserele mai vechi, care nu recunosc aceste elemente, le
vor trata la fel ca pe un simplu element de tip text. Totusi, browserele unor smartphone-uri isi
modifica tastatura in functie de tipul elementului de input astfel incat sa se optimizeze introducerea
datelor.

Elementul <input type="date"> defineste un control de tip data (an, luna si zi). Daca s-a folosit un
element de tipul date browserul se va verifica daca utilizatorul a furnizat informatii in formatul corect
pentru data.

<input type="date" name="data_eveniment" />

Elementul <input type="datetime"> defineste un control de tip data impreuna cu unul de tip timp
(an, luna, zi, ora, minut, secunda, si fractiune de secunda, in functie de fusul orar UTC ).

<input type="datetime" name="data_ora_eveniment" />

Elementul <input type="email"> defineste un camp pentru o adresa de e-mail. Daca s-a folosit un
element de tipul email browserul se va verifica daca utilizatorul a furnizat informatii in formatul
corect al unei adrese de e-mail.

<input type="email" name="adresa_email" />

Elementul <input type="url"> defineste un camp pentru a introduce un URL. Daca s-a folosit un
element de tipul url browserul se va verifica daca utilizatorul a furnizat informatii in formatul corect
al unei adrese web/URL.

<input type="url" name="adresa_site" />

2. CSS (Cascading Style Sheets)
CSS este un standard W3C pentru definirea prezentarii documentelor scrise in HTML. Prezentarea se
refera la modul in care documentul este afisat in browser pentru utilizator. Datorita faptului ca CSS
se ocupa de stilizarea si prezentarea documentelor, HTML se poate ocupa de definirea structurii
documentului, asa cum este prevazut.

CSS este un limbaj separat cu propria sintaxa. Stilurile CSS au rezolvat o mare problema si salveaza o
multime de timp in cadrul activitatilor de dezvoltare a site-urilor web. Acest lucru pentru faptul ca
HTML nu a fost destinat sa contina tag-uri pentru formatarea documentelor. HTML a fost destinat sa
defineasca continutul si structura unui document.

In HTML 4.0, toate formatarile pot fi eliminate din document HTML si stocate intr -un fisier CSS
extern. Acest lucru este chiar recomandat pentru ca toate browserele din zilele noastre suporta CSS.
CSS defineste cum vor fi afisate elemente HTML. Stilurile sunt in mod normal, salvate in fisiere CSS
externe. Foile de stil externe permit schimbarea aranjarii si aspectului tuturor paginilor dintr-un site,
prin editarea unui singur fisier CSS.

CSS functioneaza prin asocierea unor reguli elementelor HTML. Aceste reguli reglementeaza modul in
care ar trebui sa fie afisat continutul elementelor specificate. O regula CSS contine doua parti: un
selector si o declaratie.

declaratie

selector { proprietate: valoare; }

Selectorii indica carui element i se aplica regula. Aceeasi regula se poate aplica la mai mult de un
element, daca numele elementelor sunt separate prin virgule.

Declaratiile indica cum ar trebui sa fie stilizate elementele mentionate prin intermediul selectorului.
Declaratiile sunt impartite in doua parti (o proprietate si o valoare), fiind separate prin punct si
virgula.

Proprietatile indica aspectele elementului pe care dorim sa le modificam. De exemplu, culoarea,

fontul, latimea, inaltimea sau bordura.

Valorile specifica setarile pe care dorim sa le utilizam pentru proprietatile alese. De exemplu, daca
dorim sa modificam proprietatea culoare, atunci valoarea este culoarea pe care dorim sa o aiba
textul din elementele selectate.

Pentru un selector se pot adauga mai multe declaratii. Acestea vor fi adaugate intre cele doua
acolade si vor constitui un bloc de declaratii. Pentru a face mai usor de citit codul CSS, se recomanda
adaugarea unei singure declaratii pe fiecare linie.

selector {
proprietate1: valoare1;
proprietate2: valoare2; bloc de declaratii
proprietate3: valoare3;
}

Declaratiile CSS se pot introduce in cadrul paginilor HTML in trei moduri:

 Foaie de stil externa (declarata intr-un fisier CSS extern)

  Foaie de stil interna (declarata in sectiunea de head a documentului HTML)
 Stilul declarat inline (declarat in interiorul unui element HTML)

Adaugarea declaratiilor CSS in foile de stil externe. In acest caz foaia de stil externa este un
document separat de tip text, cu extensia *.css, care contine o serie de declaratii de stil. Dupa ce a
fost creat, documentul *.css poate fi legat, sau importat in unul sau mai multe documente HTML. In
acest fel, toate documentele HTML dintr-un site web pot folosi aceeasi foaie de stil. Aceasta este
metoda cea mai puternica si preferata pentru atasarea foilor de stil. O foaie de stil externa este
ideala atunci cand stilul este aplicat la mai multe pagini. Cu o foaie de stil externa, putem modifica
aspectul unui intreg site prin simpla modificare realizata intr-un singur fisier. Fiecare pagina trebuie
leagata la foaia de stil cu ajutorul tag-ul <link>. Tag-ul <link> va fi pozitionat tot timpul in partea de
head.

<head>
<link rel="stylesheet" type="text/css" href="stiluri.css">
</head>

O foaie de stil externa poate fi scrisa in orice editor de text. Fisierul nu trebuie sa contina nici un tag
HTML. Fisierul stiluri.css contine urmatorul cod CSS:

h1 { color: red; }
p { color: blue; }

Adaugarea declaratiilor CSS in foaia de stil interna. Acesta este plasata intr-un document HTML
folosind elementul stil. Este important de stiut ca declaratiile sale se aplica numai in documentul
HTML in care a fost declarata. O foaie de stil interna trebuie sa fie utilizata doar atunci cand o singura
pagina HTML are un stil unic. Elementul de stil trebuie sa fie plasat in sectiunea <head> a unei pagini
HTML, cu ajutorul tag-ului <style>.

<head>
<style>
h1 { color: red; }
p { color: blue; }
</style>
</head>

Adaugarea declaratiilor CSS inline. Acestea pot fi declarate chiar in interiorul unui element HTML
folosind atributul style. Proprietatile si valorile se aplica doar elementului in care au fost definite.
Folosirea stilurilor inline ar trebui sa fie evitata. Acestea trebuie folosite doar atunci cand este
absolut necesar pentru a suprascrie declaratiile provenite de la o foaie de stil incorporata sau
externa. Un stil declarat inline pierde multe din avantajele foilor de stil. Prin urmare rezulta
amestecarea declaratiilor de prezentare si stilizare cu tag-urile HTML care realizeaza structurarea si
continutul. De asemenea, activitatea de modificare a prezentarii paginilor HTML si a site-ului per
ansamblu este mult mai dificila. Astfel, pentru modificarea fiecarei declaratii de stil trebuie mers
direct in codul sursa al paginii HTML.

<h1 style = "color: red"> Titlu </h1>

<p style = "color: blue"> Paragraf </p>

2.1. Selectorii CSS

In plus, fata de stabilirea unui stil pentru un element HTML, CSS permite specificarea propriilor
selectori. Exista mai multe tipuri diferite de selectori CSS care permit declararea unor reguli pentru
anunite elemente specifice din cadrul unui document HTML. Selectorii CSS sunt case sensitive, astfel
incat acestia trebuie sa se potriveasca exact cu numele elementelor si valorilor de atribute. Exista unii
selectori mai avansati care permit selectarea unor elemente bazate pe atributele si valorile lor. In
continuare vom prezenta cei mai frecvent utilizati selectorii CSS.

Selectorul universal - se aplica la toate elementele din document

* {}
Se aplica tuturor elementelor din pagina

Selectorul de tip - se aplica numelor de elemente

h1, h2, h3 {}
Se aplica elementelor <h1>, <h2> si <h3>

Selectorul de clasa - se aplica unui element al carui atribut clasa are o valoare care se potriveste cu
cel specificat dupa simbolul . (punct)

.azorel {}
Se aplica tuturor elementelor care au atributul class egal cu azorel

p.azorel {}
Se aplica doar elementelor <p> a caror atribut class este egal cu azorel

Selectorul ID - se aplica unui element al carui atribut id are o valoare care se potriveste cu cel
specificat dupa simbolul # (diez)

#cnp {}
Se aplica elementului al carui atribut id este egal cu cnp

Selectorul copil - se aplica unui element care este un copil direct al unui alt element

li>a {}
Se aplica elementelor <a> care sunt continute in cadrul unui element <li>

Selectorul descendent - se aplica unui element care este un descendent din cadrul unui alt element
specificat (nu doar unui copil direct al acestui element)

p a {}
Se aplica elementelor <a> care sunt continute in cadrul unui element <p>, chiar daca exista si alte
elemente imbricate intre ele

Selectorii grupati- se aplica numelor de elemente specificate

h1, p, em, img {}

Se aplica elementelor <h1>, <p>, <em> si <img>

2.2. Agregarea in cascada a stilurilor

De cele mai multe ori in cadrul aplicatiilor web exista mai multe foi de stil care se agrega in cascada.
In cazul in care exista doua sau mai multe reguli care se aplica aceluiasi element, este important sa se
inteleaga care va avea prioritate. Agregarea in cascada se refera la ceea ce se intampla atunci cand
mai multe declaratii de stil lupta pentru controlul elementelor de pe o pagina. Declaratiile de stil se
propaga in cascada, in jos, pana cand vor fi suprascrise de o declaratie de stil cu o greutate mai mare.
In general putem spune ca, toate stilurile vor fi agregate in "cascada", intr-o noua foaie de stil
virtuala. Agregarea se face respectand urmatoarea ordine, tinand cont ca declaratiile inline au cea
mai mare prioritate:

 Foaia de stil implicita a browser-ului

 Foaie de stil externa (declarata intr-un fisier CSS extern)
 Foaie de stil interna (declarata in sectiunea de head a documentului HTML)
 Stilul declarat inline (declarat in interiorul unui element HTML)

Prin urmare, un stil inline (declarat in interiorul unui element HTML) are cea mai mare prioritate.
Acest lucru inseamna ca va inlocui un stil definit in interiorul tag-ul <head>, sau intr-o foaie de stil
externa, respectiv in cadrul browser-ului. Daca legatura la foaia de stil externa este plasata dupa
foaia de stil interna in HTML <head>, foaia de stil externa va inlocui foaia de stil interna.

De exemplu, in cazul codului HTML de mai jos:

<html>
<head>
<title>Exemplu de agregare in cascada a stilurilor</title>
<link rel="stylesheet" type="text/css" href="stilulmeu.css">
<style>
h1{color: red;}
p{color: blue;}
</style>
</head>
<body>
<h1 style="color: indigo">Titlu</h1>
<p style="color: violet">Paragraf</p>
</body>
</html>
Si a codului CSS de mai jos continut in cadrul fisierului stilulmeu.css:

h1{color: green;}
p{color: orange;}

Va rezulta:

Dupa ce foile de stil au fost agregate in "cascada", intr-o noua foaie de stil virtuala, conflictele pot sa
apara in continuare. Prin urmare, regula agregarii in cascada continua si la nivel de regula. Cand doua
reguli dintr-o foaie CSS intra in conflict, tipul de selector este folosit pentru a determina castigatorul.
Cu cat este mai specific selectorul, cu atat mai multa greutate ii este acordata pentru a suprascrie
declaratiile contradictorii.

In cazul in care doi selectorii sunt identici, sau de aceeasi importanta, oricare dintre acestia este
declarat ultimul va suprascrie pe precedentii. Prin urmare cel care apare ultimul va avea prioritate.

De exemplu, in cazul codului HTML de mai jos:

<html>
<head>
 <title>Exemplu de specificitate si prioritate</title>
<style>
* { color: blue; }
h1 { color: purple; }
p b { color: violet; }
b { color: orange; }
b { color: red; }
p { color: chocolate; }
p#abstract{ color: green; }
</style>
</head>
<body>
<h1>Titlu</h1>
<p id="abstract">Acesta este un <b>abstract</b></p>
<p>Acesta este un text dintr-un paragraf</p>
Acesta e un text <b>oarecare</b>
</body>
</html>

Va rezulta:

Este foarte usor sa suprascriem, in mod accidental, declaratiile anterioare in momentul in care vom
ajunge sa folosim proprietati combinate. Prin urmare, modul de agregare a foilor de stil si importanta
selectorilor este un comportament deosebit de important de care trebuie sa tinem cont.

2.3. Mostenirea in CSS

Mostenirea se poate folosi pentru a crea un avantaj atunci cand scriem foile de stil. De exemplu, daca
dorim ca toate elementele de tip text sa fie formatate cu fontul Verdana avem doua optiuni. Am
putea scrie declaratii pentru fiecare element din cadrul documentului HTML si sa setam proprietatea
font-face astfel incat textul sa fie formatat cu Verdana. O cale mult mai buna ar fi sa scriem o singura
regula de stil prin care sa se aplice proprietatea font-face la elementul <body>, iar toate elementele
de tip text incluse in elementul <body> sa mosteneasca acel stil.

Daca specificam pe elementul <body> proprietati precum fontul sau culoarea, se vor aplica pe mai
multe elemente continute in cadrul documentului HTML. Acest lucru se datoreaza faptului ca
valoarea proprietatii font-family este mostenita de elementele continute. Aceast lucru ne salveaza de
la a fi nevoie sa aplicam aceste proprietati pentru mai multe elemente. Prin urmare vor rezulta foi de
stil mai simple si de dimensiuni mai mici.

De exemplu, in cazul codului HTML de mai jos:

<html>
<head>
<title>Exemplu de specificitate si prioritate</title>
<style>
 body {
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
color: blue;
background-color: yellow; }
.cutie {
color: white;
background-color: green;
border: 1px solid red; }
.cutiutza {
color: gold; }
</style>
</head>
<body>
<div>
<p>Mostenesc de la body fontul, proprietatea bold si culoarea albastra</p>
</div>
<div class="cutie">
<p>Mostenesc de la body fontul si proprietatea bold. Dar am culoarea alba, culoarea de
fundal verde si bordura rosie.</p>
<div class="cutiutza">
<p>Mostenesc de la body fontul si proprietatea bold. Am culoarea aurita, dar
mostenesc culoarea de fundal verde de la cutie. Bordura nu se mosteneste.</p>
</div>
</div>
</body>
</html>

Va rezulta:

E bine de stiut ca nu toate proprietatile sunt mostenite. Este important sa retinem ca unele
proprietati CSS sunt mostenite, iar altele nu. In general, proprietatile legate de stilul, dimensiunea
textului, fontul, culoarea, etc, sunt transmise si la elementele continute. Proprietati precum bordura
unui element, marginile, fundalurile, etc, care afecteaza zona din jurul elementului tind sa nu fie
transmise. Acest lucru este destul de logic. De exemplu, daca am pus un chenar in jurul unui div, nu
am vrea ca acesta sa apara si in jurul fiecarui element inline continut (de ex. paragraf). Trebuie sa
tinem minte ca orice proprietate aplicata unui element specific va suprascrie valorile mostenite
pentru acea proprietate.
2.4. Specificarea culorilor
Exista trei modalitati mai des folosite in practica, prin care se pot specifica culorile. Culorile pot fi
specificate prin intermediul:

 numelor de culori
 valorilor RGB
 codurilor hexa zecimale

CSS1 si CSS2 au adoptat cele 16 nume de culori standard, introduse initial in HTML 4.01. CSS3 adauga
suport pentru un set extins ce contine 140 de nume de culori.

Cele 16 culori standard sunt: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, and yellow.

Codurile hexa zecimale sunt codurile de sase cifre care reprezinta cantitatea de rosu, verde si
albastru dintr-o culoare, precedata de semnul #. Sistemul de numerotare hexazecimal foloseste 16
elemente: perechi de numere de la 0 la 9 si litere de la A la F.

#RRGGBB
Alb = #FFFFFF sau #FFF (echivalentul lui 255,255,255)
Negru = #000000 sau #000 (echivalentul lui 0,0,0)

2.5. Unitati de masura in CSS

CSS ofera o varietate de unitati de masura pe care le enumeram si descriem in continuare:

 px - pixeli (un px reprezinta un punct de pe ecranul computerului)

 % - procent
 in - inch
 cm - centimetru
 mm - milimetru
 em - 1em este egal cu dimensiunea fontului curent. 2em inseamna de 2 ori dimensiunea
fontului curent.

De exemplu, in cazul in care un element este afisat cu un font de 12 pt, atunci '2em" este de 24 pt.
"em" este o unitate foarte utila in CSS, deoarece se poate adapta automat la fontul pe care cititorul il
foloseste.

2.6. Box Model

Un aspect important in structurarea si stilizarea elementelor cu CSS este asa-numitul „Box Model”.
Acest model stabileste ca fiecare element de structura din cadrul unei pagini Web poate fi vazut ca o
cutie/caseta (dreptunghi) definita prin urmatoarele proprietati:
 Margin – permite stabilirea unei zone libere transparente in exteriorul bordurii
 Border – permite adaugarea unei borduri in jurul elementului luat in considerare
 Padding – permite stabilirea unei zone libere transparente in interiorul bordurii
 Content – permite introducerea unui continut in cadrul elementului

Modelul de mai sus permite stabilirea de borduri si spatieri intre elementele din cadrul unei pagini
Web.
Controlarea felului in care aceste casete pentru elemente apar, este esentiala. Prin pozitionarea si
gestionarea lor vom construi layout-ul paginilor web.

Proprietatea border-width este folosita pentru a controla latimea unei borduri. Valoarea acestei
proprietati poate fi specificata fie in pixeli sau folosind una dintre urmatoarele valori:

 thin - specifica o bordura subtire

 medium - specifica o bordura de grosime medie
 thick - specifica o bordura grosa

Putem controla dimensiunea individuala a bordurilor utilizand patru proprietati distincte:

 border-top-width - specifica latimea bordurii de sus

 border-right-width - specifica latimea bordurii din dreapta
 border-bottom-width - specifica latimea bordurii de jos
 border-left-width - specifica latimea bordurii din stanga

Putem specifica, de asemenea, latimi diferite pentru cele patru valori ale bordurii intr-o singura
proprietate. Valorile vor aparea in sensul acelor de ceasornic: sus, dreapta, jos si stanga.

<html>
<head>
<style>
div {
border: solid gray;
border-width: 5px 6px 10px 3px;
}
</style>
</head>
<body>
<div>Sus 5px, dreapta 6px, jos 10px, stanga 3px.</div>
</body>
</html>

Acelasi mod de folosinta, ca si pentru proprietatea border-width, se aplica si proprietatilor padding si

margin.

Proprietatea margin permite stabilirea unei zone libere transparente in exteriorul bordurii. Aceasta
zona nu este afectata de culoarea de fundal al elementului si preia culoarea de fundal al elementului
in care este continuta. Putem controla spatierea individuala din interiorul casetei utilizand patru
proprietati distincte:

 margin-top - specifica spatierea din exterior in partea de sus

 margin-right - specifica spatierea din exterior in partea dreapta
 margin-bottom - specifica spatierea din exterior in partea de jos
 margin-left - specifica spatierea din exterior in partea stanga

Proprietatea padding permite stabilirea unei zone libere transparente in interiorul bordurii. Aceasta
zona este afectata de culoarea de fundal al elementului. Putem controla spatierea individuala din
exteriorul casetei utilizand patru proprietati distincte:

 padding-top - specifica spatierea din interior in partea de sus

 padding-right - specifica spatierea din interior in partea dreapta
 padding-bottom - specifica spatierea din interior in partea de jos
 padding-left - specifica spatierea din interior in partea stanga

La fel, putem specifica, margini si spatieri diferite pentru cele patru valori intr-o singura proprietate.
Valorile vor aparea in sensul acelor de ceasornic: sus, dreapta, jos si stanga.

Dimensionarea casetelor

In mod normal o caseta se adapteaza la dimensiunea continutului care se afla in ea. Pentru a stabili
dimensiuni absolute se pot folosi proprietatile height si width.

Cele mai populare moduri prin care se poate specifica dimensiunea unei casete, este de a utiliza
pixeli, procente, sau ems. In mod traditional, pixeli au fost cea mai populara metoda, deoarece
permit proiectantilor sa controleze cu exactitate dimensiunea casetei.

Cand utilizam procente, dimensiunea casetei este relativa la dimensiunea fereastrei browser-ului sau,
in cazul in care caseta este continuta de catre o alta caseta, acesta reprezinta un procent din
dimensiunea casetei in care este continuta.

<html>
<head>
<style>
div
{
width: 210px;
padding: 15px;
border: 15px solid gray;
margin: 15px;
}
</style>
</head>
<body>
<img src="poza.png">
<div>Poza de deasupra e lata de 300px.
Latimea acestui element:<br> 210 (latime) +<br>30 (2*15 padding) +<br>30 (2*15 bordura)
+<br>30 (2*15 margine) =<br>300px.</div>
</body>
</html>
Putem limita dimensiunea casetelor cu ajutorul proprietatilor: min-width, max-width, min-height,
max-height.
 min-width - stabileste latimea minima a unui element si previne ca valoarea proprietatii
width sa fie mai mica decat min-width.
 max-width - seteaza latimea maxima a unui element si previne ca valoarea proprietatii width
sa fie mai mare decat max-width.
 min-height - seteaza inaltimea minima a unui element si previne ca valoarea proprietatii
height sa fie mai mica decat min-height.
 max-height - seteaza inaltimea maxima a unui element si previne ca valoarea proprietatii
height sa fie mai mare decat max-height.

<html>
<head>
<style>
.adaptabil {
background-color: gold;
min-width: 400px;
max-width: 600px;
padding: 10px; }
</style>
</head>
<body>
<div class="adaptabil">Acest div se redimensioneaza in functie de rezolutia ecranului.<p>
Dimensiunea minima este de 400px, iar cea maxima de 600px. Textul de pe prima linie nu va
fi afectat de redimensionare.</div>
</body>
</html>
3. JavaScript
JavaScript:

 este utilizat pentru programarea comportamentului paginilor web si pentru adaugarea de

interactivitate;
 este un limbaj usor, dar foarte complex si puternic;
 este case sensitive;
 este un limbaj de scripting client-side, care ruleaza pe calculatorul utilizatorului si nu pe
server;
 ruleaza in browser-ul utilizatorului, care citeste codul si il interpreteaza in momentul in care il
primeste (nu are nevoie de un compilator);
 a fost standardizat in 1996 de catre European Computer Manufacturer's Association (ECMA),
iar din acest motiv se mai gaseste sub denumirea de ECMAScript;
 codul JavaScript poate fi editat in orice editor de texte;
 codul JavaScript (si modul in care il folosim) este dependent de capacitatile si setarile
browser-ului;
 JavaScript si Java sunt doua limbi complet diferite, atat in concept cat si in design.

JavaScript:

 nu a fost creat ca un limbaj de programare general, ci a fost creat cu scopul de a manipula

pagini web;
 nu poate accesa fisierele locale;
 nu poate accesa in mod direct o baza de date;
 nu poate accesa componentele hardware (USB, etc);
 nu este activat si suportat pe toate browserele, asa ca trebuie tinut cont de acest lucru in
momentul dezvoltarii unei aplicatii web.

JavaScript poate fi utilizat pentru:

 scrierea script-urilor care reactioneaza la comportamentul sau datele introduse de catre

utilizator;
 validarea datelor de intrare pe care le introduc utilizatorii in cadrul unui formular;
 schimbarea continutului si informatiilor dintre documentul curent si server. Acest lucru se
face, prin intermediul Ajax, fara a reincarca intreaga pagina;
 crearea meniurilor dinamice si a plierii continutului in functie de click-urile utilizatorilor;
 manipularea arborelui DOM (pentru a schimba structura si continutul unei pagini HTML).
Astfel, JavaScript permite:
 o schimbarea elementelor HTML
o stergerea elemente HTML
o crearea de noi elemente HTML
o copierea si clonarea elementelor HTML
o schimbarea atributelor CSS

Amplasarea codului se realizeaza intre tagurile <script>…</script>.

<script>
// aici va fi amplasat codul JavaScrpit
comanda JavaScrpit; cod JavaScript
comanda JavaScrpit;
</script>

Inserarea codului JavaScript in cadrul paginilor HTML se realizeaza in doua moduri:

 Fisier extern (declarat intr-un fisier *.js extern)

 Script incorporat (incorporat in sectiunea de head sau body a documentului HTML)

Adaugarea codului JavaScript intr-un fisier .js extern:

<head>
<script type="text/ javascript" href="scriptulmeu.js">
</head>

Fisierul scriptulmeu.js contine urmatorul cod JavaScript:

alert("Salutare");

Elementul script poate fi amplasat oriunde in document, dar cele mai comune si recomandate locuri
pentru script-uri sunt in partea de <head> sau <body>. In cazul in care se adauga in sectiunea body,
codul trebuie sa fie pozitionat chiar inainte de inchiderea tag-ului </body>.

In sectiunea <head> In sectiunea <body>

<html> <html>
<head> <head>
<script> </head>
alert("Salutare"); <body>
</script > Text oarecare
</head> <script>
<body> alert("Salutare");
Text oarecare </script >
</body> </body>
</html> </html>
Grafica si programare pe Internet - FSEGA, UBB Lect.univ.dr. Daniel Mican
[email protected]

3.1. Variabilele in JavaScript

O variabila este ca un container de informatii. In primul rand trebuie sa o definim si sa ii dam un
nume. Pe urma putem sa ii atribuim o valoare care poate fi un numar, un text, un element din DOM
sau chiar si o functie. In acest fel putem oricand sa accesam valoarea atribuita pe baza numelui
variabilei. Valoarea stocata in cadrul variabilei poate fi oricand modificata sau mutata in functie de
nevoi.

Orice variabila se declara folosind cuvantul cheie var, urmat de numele variabilei. Semnul egal "="
indica faptul ca se atribuie o valoare. Orice declaratie se termina prin adaugarea la sfarsitul liniei a
semnului punct si virgula ";".

Declararea variabilelor

In momentul in care declaram variabile este bine sa tinem cont de cateva reguli:

 numele unei variabile poate contine litere, numere si liniute de subliniere "_".
 numele trebuie sa inceapa cu o litera, cu semnul $ sau _. Se recomanda ca numele variabilei
sa inceapa tot timpul cu o litera:
 numele variabilelor nu pot contine spatii:
 numele variabilelor nu pot contine caractere speciale precum (! @ # % . , / \ + * = etc).
 pentru a declara mai multe variabile intr-o declaratie vom incepe declaratia cu var si vom
separa variabilele prin virgula: var varsta = 20, prenume = "Cristina";

Tipuri de date in JavaScript

Valorile pe care le atribuim variabilelor pot fi de cateva tipuri de date distincte: Undefined, String,
Number, Boolean, Array, Object.

3.2. Operatori
Operatorii sunt folositi pentru a realiza anumite operatii elementare intre variabile. In JavaScript sunt
mai multe tipuri de operatori:

 matematici - realizeaza diferite operatii matematice pe valorile numerice;

 de comparare - evalueaza si compara valorile si variabilele;
 logici - compara doua expresii si returneaza true daca amandoua sunt adevarate, in caz
contrar returneaza false.
Operatori aritmetici
+ x=3+2 Adunare
- x=3-2 Scadere
Grafica si programare pe Internet - FSEGA, UBB Lect.univ.dr. Daniel Mican
[email protected]

* x=3*2 Inmultire
/ x=3/2 Impartire
% x=3%2 Modul (restul impartirii)
++ x = y++ Incrementeaza valoarea unui numar (sau a unei variabile care contine o valoare
x = ++y numerica) cu 1
-- x = y-- Scade valoarea unui numar (sau a unei variabile care contine o valoare
x = y-- numerica) cu 1

Operatori de asignare
= x=2 Asigneaza valoarea unei variabile
+= x += y (x = x + y) Insumeaza valoarea la valoarea variabilei
-= x -= y (x = x - y) Scade valoarea din valoarea variabilei
*= x *= y (x = x * y) Inmulteste valoarea la valoarea variabilei
/= x /= y (x = x / y) Imparte valoarea variabilei

Operatori de comparare
== 2 == 3 este false Este egal cu
!= 2 != 3 este true Nu este egal cu
=== 2 === 3 este false Este identic cu (este egal cu si de acelasi tip de date)
!== 2 !== 3 este true Nu este identic cu (nu este egal cu si de acelasi tip de date)
> 2 > 3 este false Este mai mare decat
>= 2 >= 3 este false Este mai mare sau egal decat
< 2 < 3 este true Este mai mic decat
<= 2 <= 3 este true Este mai mic sau egal decat

Operatori logici
&& 1 < 5 && 3 < 1 este false AND / SI logic
|| 1 < 5 || 3 > 1 este true OR / SAU logic
! ! (1 < 3 ) este false Negatie logica

Structuri decizionale if/else

Declaratiile conditionale sunt utilizate pentru a efectua diferite actiuni in functie de diferite conditii.

if( conditie ) {
// executa acest cod in cazul in care conditia este adevarata
}
else {
// executa acest cod in cazul in care conditia nu este adevarata
}

Exemplu:

var a = 2, b = 4;
if( a < b ) {
alert (" a este < decat b ");
}
else {
alert (" a este > decat b ");
}
Grafica si programare pe Internet - FSEGA, UBB Lect.univ.dr. Daniel Mican
[email protected]

Structura for

Structura for este folosita pentru a executa un bloc de cod de un anumit numar de ori si are
urmatoarea sintaxa:

for (initializeaza variabila, testeaza conditie, modifica valoarea)

{
// executa acest cod in cazul in care conditia este adevarata
}

Exemplu:

for ( var i = 1; i < 3; i++) {

alert ("Numarul este " + i);
}

Structura while

Structura while executa un bloc de cod, atata timp cat o conditie specificata este adevarata.
while (conditie) {
// executa acest cod in cazul in care conditia este adevarata
}

Exemplu:

var i = 1;
while (i < 3) {
alert ("Numarul este " + i);
i++;
}

Structura do/while

Structura do/while este o varianta a structurii while. Aceasta va executa blocul de cod cel putin o
data, inainte de a verifica daca conditia este adevarata. Pe urma se va repeta executia codului atata
timp cat conditia este adevarata.
do {
// executa acest cod in cazul in care conditia este adevarata
} while (conditie);
Exemplu:

var i = 1;
do {
alert ("Numarul este " + i);
i++;
} while (i < 3)

3.3. Functii in JavaScript

O functie JavaScript este:
 un bloc de cod programat pentru a indeplini o anumita sarcina;
Grafica si programare pe Internet - FSEGA, UBB Lect.univ.dr. Daniel Mican
[email protected]

 executata in momentul in care este invocata de catre un anumit eveniment;

 definita prin intermediul cuvantului cheie al functiei function, urmat de un numele functiei,
de paranteze (), iar codul se gaseste intre acolade {}:
- intre paranteze se pot gasi zero sau mai multi parametri (parametrul1, parametrul2,
..., parametruln)
- codul care va fi executat de catre functie este plasat in interiorul acoladelor {}

Functiile definite de catre utilizator au forma:

function numeFunctie ( parametri ) {

codul care va fi executat;
}

Exemplu de functie care nu primeste parametrii:

function afiseazaMesaj( ) {
alert("Functia a fost apelata");
/* acest cod nu va rula pana in momentul in care codul functiei
functia afiseazaMesaj() va fi apelata */
}

function afiseazaMesaj(); //apelarea functiei afiseazaMesaj()

Exemplu de functie care primeste parametrii:

function adunaNumere( a, b ) {
return a + b;
alert("Acest text nu va fi afisat");
/* acest cod nu va rula pana in momentul in care codul functiei
functia adunaNumere () va fi apelata */
}

alert( function adunaNumere( 2, 3 ) ); //afiseaza numarul "5"

Pe langa functiile definite de catre utilizator, in JavaScript exista si o serie de functii native. Functiile
JavaScript native sunt cele care vin "out-of-the-box".

In JavaScript exista sute de functii predefinite precum:

 alert(), confirm(), si prompt() - aceste functii declanseaza casete de dialog la nivel de

browser.
 Date() - returneaza data si ora curenta.
 sqrt() - returneaza radacina patrata a unui numar.
 max() - returneaza cea mai mare valoare dintre mai multe numere.
 min() - returneaza cea mai mica valoare dintre mai multe numere.

Variabile locale

 variabila declarata in interiorul unei functii JavaScript, folosind var, va fi LOCALA.

 variabila LOCALA este vizibila si poate fi accesata numai in interiorul functiei.
Grafica si programare pe Internet - FSEGA, UBB Lect.univ.dr. Daniel Mican
[email protected]

 variabilele locale pot avea acelasi nume in diferite functii, deoarece sunt recunoscute numai
de functia in care au fost declarate.
 argumentele (parametri) se comporta ca variabile locale in interiorul functiilor.
 variabilele locale sunt create atunci cand functia incepe si sterse in momentul in care functia
este finalizata.

Exemplu de definire si folosire a unei variabile locale:

<!DOCTYPE html>
<html>
<body>
<div id="c1"></div>
<div id="c2"></div>
<script>
function myFunction() {
var a = 4; // variabila locala
document.getElementById("c1").innerHTML = a;
}
myFunction();
document.getElementById("c2").innerHTML = a;
</script>
</body>
</html>

Variabile globale
 variabila declarata in exteriorul unei functii, devine GLOBALA.
 variabila GLOBALA este vizibila si poate fi accesata de catre toate script-urile si functiile din
cadrul paginii web.
 variabilele globale sunt sterse in momentul in care se inchide pagina web.

Exemplu de definire si folosire a unei variabile globale:

<!DOCTYPE html>
<html>
<body>
<div id="c1"></div>
<div id="c2"></div>
<script>
var a; // variabila globala
function myFunction() {
a = 4;
document.getElementById("c1").innerHTML = a;
}
myFunction();
document.getElementById("c2").innerHTML = a;
</script>
</body>
</html>
Exemplu de definire, stocare si folosire a unei functii anonime in cadrul unei variabile:
Grafica si programare pe Internet - FSEGA, UBB Lect.univ.dr. Daniel Mican
[email protected]

<!DOCTYPE html>
<html>
<body>
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<script>
function adunare(a, b) {
return a + b;
}
var x = function(a, b) {return a + b};
var y = adunare(2, 4);
document.getElementById("c1").innerHTML = x ;
document.getElementById("c2").innerHTML = y ;
document.getElementById("c3").innerHTML = x(2, 3);
</script>
</body>
</html>

3.4. Evenimente

 un eveniment este o actiune care poate fi detectata de catre JavaScript.

 JavaScript permite executarea unui cod in momentul in care sunt detectate anumite
evenimente.
 un eveniment HTML poate fi creat de catre browser, sau de catre actiunile utilizatorului.
 in JavaScript un eveniment este identificat de catre un handler de evenimente.
 un eveniment are loc in momentul in care se incarca o pagina web, cand utilizatorul da clic pe
un element sau misca cursorul mouse-ului peste el.

<elementHTML eveniment="cod JavaScript">

Exista trei metode prin intermediul carora se poate reactiona la evenimentele din JavaScript:
• Ca un atribut HTML
• Ca metoda atasata la element
• Utilizarea addEventListener

Ca un atribut HTML

Se specifica functia care va fi rulata prin intermediul unui atribut in cadrul elementului.

<button onclick="functiaMea();">Click pe mine</button>

<button onclick="alert('Ai dat click pe mine')">Click pe mine</button>

Este bine ca cest mod de a atasa evenimente pentru elementele din cadrul paginii web sa fie evitat.

Ca metoda atasata la element

Putem atasa functii folosind diferite obiecte si metode incorporate in JavaScript.

Grafica si programare pe Internet - FSEGA, UBB Lect.univ.dr. Daniel Mican
[email protected]

window.onclick = functiaMea; /* functiaMea va rula atunci cand utilizatorul da clic in fereastra

browser-ului */

In acest caz putem folosi functii anonime in locul celor predefinite.

window.onclick = function () {
/ * Codul plasat aici va rula in momentul in care utilizatorul da clic in fereastra browser-ului * /
};

Aceasta abordare are avantajul de a simplifica si usura intretinerea codului, dar are un dezavantaj
destul de mare. Doar o singura functie se poate lega de un eveniment la un moment dat.

window.onclick = functiaMea;
window.onclick = altaFunctie;

In cazul de fata, a doua atribuire o suprascrie pe prima. In momentul in care utilizatorul da clic in
interiorul ferestrei browser-ului, va rula doar altaFunctie. Referirea la functiaMea este
suprascrisa/pierduta.

Utilizarea addEventListener

Aceasta abordare, desi un pic mai complexa la prima vedere, ne permite sa pastram logica in scripturi
si permite legarea mai multor functii la un eveniment.

Legarea se face prin apelarea metodei addEventListener a obiectului tinta, si apoi se specifica
evenimentul si functia care va fi executata.

window.addEventListener ("click", functiaMea);

window.addEventListener ("click", altaFunctie);

Trebuie observat ca se omite prefixul "on" al evenimentului in cadrul acestei sintaxe.

Mai jos metodei addEventListener ii este atasata o functie anonima:

window.addEventListener ("click", functia () { /* codul functiei */ });

Lista evenimente

Evenimentele HTML sunt actiuni care au loc asupra elementelor HTML. De obicei, in momentul in
care au loc evenimentele se doreste executarea unui anumit cod. Prin urmare, JavaScript permite
executarea codului in momentul in care sunt detectate anumite evenimente.

Eveniment Descriere
onblur Un element pierde focusul (este parasit)
onchange Continutul unui camp dintr-un formular se modifica
onclick Mouse-ul face clic pe un obiect
onerror Apare o eroare in momentul in care documentul sau o imagine se incarca
onfocus Un element primeste focusul (devine activ)
onkeydown Este apasata o tasta
Grafica si programare pe Internet - FSEGA, UBB Lect.univ.dr. Daniel Mican
[email protected]

onkeypress Este apasata o tasta si tinuta apasata

onkeyup O tasta care a fost apasata este eliberata
onload Momentul in care o pagina sau o imagine s-a terminat de incarcat
onmousedown Un buton al mouse-ului este apasat
onmousemove Cursorul mouse-ului este mutat
onmouseout Cursorul mouse-ului este mutat de pe un element
onmouseover Cursorul mouse-ului este mutat peste un element
onmouseup Un buton al mouse-ului este eliberat
onsubmit Se apasa butonul de trimitere intr-un formular

3.5. JavaScript + DOM

Document Object Model (DOM) este atat un model cat si o interfata, neutra din punct de vedere al
limbajului de programare folosit, care permite programelor si scripturilor sa acceseze si actualizeze
continutul, structura si stilul unui document in mod dinamic. DOM:

 este un standard W3C (World Wide Web Consortium);

 defineste un standard de acces la documente si este o interfata de programare (API) pentru
pagini HTML si XML;
 ofera o harta structurata a documentului, precum si un set de metode pentru a interactiona
cu elementele continute;
 este o traducere a paginii HTML, creata cu ajutorul marcatorilor, intr-un format pe care atat
JavaScript cat si alte limbaje de programare il pot intelege;
 serveste ca o harta pentru toate elementele de pe o pagina;
 permite gasirea si modificarea elementelor, respectiv adaugarea, modificarea sau stergerea
elementelor impreuna cu continutul lor.

HTML DOM este un model de obiecte si o interfata de programare standard pentru HTML. DOM
defineste:

• Elementele HTML ca obiecte

• Proprietatile tuturor elementelor HTML
• Metodele de a acces la toate elementele HTML
• Evenimentele pentru toate elementele HTML

In concluzie, HTML DOM este un standard pentru modul in care se obtin, schimba, adauga si sterg
elementele HTML.

Metodele HTML DOM sunt actiuni care se pot efectua (pe elementele HTML). O metoda este o
actiune precum adaugarea sau stergerea unui element HTML.

Proprietatile HTML DOM sunt valori, ale elementelor HTML, care se pot seta sau schimba. O
proprietate este o valoare precum continutul unui element HTML.

Cu modelul de obiecte, JavaScript poate crea HTML in mod dinamic. Astfel, JavaScript poate:

• schimba toate elementele HTML din pagina

• schimba toate atributele HTML din pagina
• schimba toate stilurile CSS din pagina
• elimina elemente si atribute HTML existente
Grafica si programare pe Internet - FSEGA, UBB Lect.univ.dr. Daniel Mican
[email protected]

• adauga noi elemente si atribute HTML

• reactiona la toate evenimentele HTML existente in pagina
• crea noi evenimente HTML in pagina

Pagina web reprezentata in browser Pagina web reprezentata arborescent in DOM

Pagina web reprezentata in browser

Pagina web reprezentata in browser

Pagina web reprezentata in cod HTML

DOM este o colectie de noduri:

- Noduri Element
- Noduri Atribut
- Noduri de text

Mai jos este prezentata in cod HTML structura nodului, de tip element, p. Nodul p contine un nod de
tip text si un nod de tip element, a. Nodul a contine nodul de tip atribut, href si un nod de tip text.

<p>Textul paragrafului contine un link <a href="pagina.html">link</a></p>

In figura de mai jos este prezentat arborescent in DOM structura nodului, de tip element, p.

Pentru a putea manipula elementele HTML, JavaScript trebuie sa poata, in primul rand, sa gaseasca
elementele. Acest lucru se poate realiza in mai multe feluri prin intermediul id-ului, tag-ului, sau
numelui clasei. In continuare vom trece in revista unele dintre metodele specifice pe care le putem
utiliza pentru a accesa obiectele definite de DOM. De asemenea vom prezenta si unele dintre cele
mai populare metode de manipulare a acestor elemente.

getElementById("Id") Metoda acceseaza primul element cu Id-ul specificat.

Este ablolut necesar sa se furnizeze Id-ul elementului pe
care dorim sa il accesam/manipulam.
Grafica si programare pe Internet - FSEGA, UBB Lect.univ.dr. Daniel Mican
[email protected]

getElementsByTagName("TagName") Metoda acceseaza toate elementele cu tagul specificat.

Este ablolut necesar sa se furnizeze numele tag-ului pe
care dorim sa il accesam/manipulam.
getElementsByClassName("ClassName") Metoda acceseaza toate elementele cu numele clasei
specificat. Este ablolut necesar sa se furnizeze numele
clasei pe care dorim sa o accesam/manipulam.

Dupa ce am accesat un nod folosind una din metodele discutate anterior, DOM ne ofera mai multe
metode standard pentru manipularea elementelor, atributelor si continutului acestora. Aceste
metode sunt:
element.innerHTML= Permite modificarea continutului din cadrul unui element
HTML
element.attribute= Permite modificarea atributului unui element HTML
element.setAttribute(attribute,value) Permite modificarea atributului unui element HTML
element.style.property= Permite modificarea stilului unui element HTML

Pana acum, am vazut metodele folosite pentru obtinerea si setarea nodurilor in documentul HTML.
Pe langa acestea, DOM mai contine metode prin care permite dezvoltatorilor schimbarea structurii
documentului HTML prin adaugarea si eliminarea nodurilor "on the fly". Pentru a adauga un nou
element (nod) in cadrul HTML DOM trebuie urmati doi pasi:
- in primul rand trebuie creat elementul (nodul);
- in al doilea rand trebuie adaugat la un element (nod) deja existent in cadrul documentului.

Cel mai simplu mod de a modifica continutul unui element HTML este de proprietatea innerHTML.
Totusi, adaugarea si stergerea elementelor se poate face si prin intermediul urmatoarelor metode:

document.createElement() Permite crearea unui element HTML

document.createTextNode() Permite crearea unui nod de tip text cu textul specificat
pentru elementul HTML
document.appendChild() Permite adaugarea unui element HTML
document.replaceChild() Permite inlocuirea unui element HTML
document.removeChild() Permite eliminarea unui element HTML
document.write(text) Permite scrierea in fluxul de iesire HTML

Aceasta metoda este mult mai precisa decat adaugarea de continut prin intermediul metodei
innerHTML.

Observatie importanta:
Codul JavaScript este Case-sensitive. Acest lucru inseamna ca getElementById este diferit de
getElementByID. Folosind varianta a doua codul JavaScript nu va functiona.

Accesarea elementelor in cadrul DOM

Obiectul document identifica, in cadrul DOM, pagina in sine. Obiectul document vine cu o serie de
proprietati si metode standard care permit accesarea colectiilor de elemente.

Accesarea elementelor pe baza atributului ID

document.getElementById ("idElement")

Metoda getElementById() returneaza elementul care are atributul de identitate egal cu valoarea
specificata.
Grafica si programare pe Internet - FSEGA, UBB Lect.univ.dr. Daniel Mican
[email protected]

Aceasta metoda este una dintre cele mai comune metode din HTML DOM. Ea este folosita aproape
de fiecare data cand se doreste manipularea, sau obtinerea de informatii de la un element din cadrul
documentului.

Metoda returneaza null in cazul in care nu exista elemente cu ID-ul specificat.

In cazul in care exista mai mult de un element cu ID-ul specificat, metoda getElementById()
returneaza primul element.

Accesarea elementelor pe baza numelui elementului

document.getElementsByTagName("numeTag")

Metoda getElementsByTagName() acceseaza toate elementele cu numele tagului specificat.

Metoda returneaza o colectie cu toate elementele din document, cu tagul specificat, sub forma unui
obiect NodeList.

NodeList se comporta la fel ca un array si contine toate elementele in ordinea in care apar in
document, de sus in jos.

Pentru a avea acces la anumite elemente din NodeList, vom face referinta la indicele lor, la fel ca intr-
un array.

paragrafe = getElementsByTagName("p")

Pentru a accesa primul paragraf din document vom folosi paragrafe[0], pentru a accesa al doilea
vom folosi paragrafe[1], si asa mai departe.

Accesarea elementelor pe baza numelui clasei

getElementsByClassName("numeClasa")

Metoda getElementsByClassName() acceseaza toate elementele cu numele clasei specificate.

Metoda returneaza o colectie cu toate elementele din document, cu clasa specificata, sub forma unui
obiect NodeList.

Pentru a avea acces la anumite elemente din NodeList, vom face referinta la indicele lor, la fel ca intr-
un array.

elementeLista = getElementsByClassName("elementeLista")

Pentru a accesa primul element din lista cu clasa elementeLista vom folosi elementeLista[0], pentru a
accesa al doilea vom folosi elementeLista[1], si asa mai departe.

Manipularea nodurilor

In continuare vom detalia mai multe metode, impreuna cu proprietatile pe care DOM le ofera pentru
manipularea elementelor, continutului si al atributelor acestora.

Setarea valorii unui element

elementHTML.innerHTML="text"

Proprietatea innerHTML seteaza sau returneaza continutul interioar al unui element HTML.
Grafica si programare pe Internet - FSEGA, UBB Lect.univ.dr. Daniel Mican
[email protected]

innerHTML ne ofera o metoda simpla pentru accesarea si modificarea textului si elementelor din
interiorul unui element.

<p id="paragraf">Acest text va fi schimbat prin intermediul innerHTML</p>

<script>
document.getElementById("paragraf").innerHTML="Eu sunt noul text";
</script>

Setarea valorii unui atribut

element.setAttribute(numeAtribut, valoareAtribut)

Metoda setAttribute() adauga atributul specificat, in cazul in care nu exista, si il seteaza la valoarea
specificata.

In cazul in care atributul specificat deja exista, doar valoarea ii este setata / schimbata.

Aceasta metoda necesita doua argumente: atributul a carei valoare trebuie sa fie schimbata si noua
valoare pentru atribut.

<img src="poza1.jpg" id="poza" onclick="schimba()">

<script>
function schimba(){
document.getElementById("poza").setAttribute("src","poza2.jpg");
}
</script>

Manipularea stilurilor CSS

document.getElementById("idElement").style.proprietateCss = "valoare";
DOM permite adaugarea, modificarea, sau eliminarea unui stil CSS de la un element folosind
proprietatea style. Acesta functioneaza in mod similar cu aplicarea unui stil cu atributul de stil inline.
Proprietatile individuale CSS sunt disponibile ca proprietati ale proprietatii style.

<p id="paragraf" onclick="schimbaStil()">Daca dai click pe mine ma inrosesc</h1>

<script>
function schimbaStil(){
document.getElementById("paragraf").style.color = "red";
}
</script>

In JavaScript si DOM, numele de proprietati, care sunt despartite in CSS (cum ar fi background-color
si border-top-width) devin (backgroundColor si borderTopWidth), astfel incat caracterul - sa nu fie
confundat cu un operator.

Bibliografie
1. Duckett, Jon. HTML and CSS: Design and Build Websites. John Wiley & Sons, 2011.
2. Robbins, Jennifer Niederst. Learning web design: A beginner's guide to HTML, CSS, JavaScript, and
web graphics. " O'Reilly Media, Inc.", 2012.
3. W3Schools Online Web Tutorials, disponibil online la http://www.w3schools.com/