Sunteți pe pagina 1din 99

Laboratoare TWSM

eu

11 martie 2009
2
Cuprins

1 Introducere ı̂n (X)HTML 7


1.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2 Exerciţii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.3 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2 CSS - Cascading Style Sheets (I) 13


2.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2 Tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.3 Aplicarea CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.3.1 Stilurile in-line . . . . . . . . . . . . . . . . . . . . . . . . 14
2.3.2 Stilurile embedded . . . . . . . . . . . . . . . . . . . . . . 14
2.4 Definiţiile externe . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.5 Selectori, proprietăţi şi valori . . . . . . . . . . . . . . . . . . . . 15
2.5.1 Unităţi de măsură . . . . . . . . . . . . . . . . . . . . . . 16
2.6 Culori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.7 Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.7.1 Formatare avansată a textului . . . . . . . . . . . . . . . . 18
2.7.2 Margini şi zone de umplere (padding) . . . . . . . . . . . 19
2.8 Modelul Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.8.1 Proprietăţile blocurilor . . . . . . . . . . . . . . . . . . . . 19
2.8.2 Proprietăţi pentru zona de margine . . . . . . . . . . . . . 20
2.8.3 Proprietăţi pentru zona de umplere . . . . . . . . . . . . . 20
2.8.4 Borduri . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.9 Exemplu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.10 Exercitii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.11 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

3 Descriere: CSS - Cascading Style Sheets (II) 31


3.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.2 Clase şi identificatori . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.3 Span şi Div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.4 Grupuri şi contextuali . . . . . . . . . . . . . . . . . . . . . . . . 32
3.5 Pseudo-clase şi pseudo-elemente . . . . . . . . . . . . . . . . . . . 33
3.6 Imagini de fundal . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.7 Proprietatea display . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.8 Page Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.8.1 Proprietatea position . . . . . . . . . . . . . . . . . . . . . 37
3.8.2 Proprietatea float . . . . . . . . . . . . . . . . . . . . . . . 39

3
4 CUPRINS

3.9 Exerciţii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.10 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

4 Descriere: CSS – Cascading Style Sheets (III) 55


4.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
4.2 Proiect (I) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
4.3 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

5 Descriere: Limbajul Javascript (I) 57


5.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.2 Limbajul JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.3 Identificatori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.4 Variabile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
5.5 Operatori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
5.6 Precedenţa operatorilor . . . . . . . . . . . . . . . . . . . . . . . 60
5.7 Instrucţiuni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
5.8 Instrucţiuni expresii . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.9 Instrucţiunea if . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.10 Instrucţiunea switch . . . . . . . . . . . . . . . . . . . . . . . . . 62
5.11 Instrucţiunea while . . . . . . . . . . . . . . . . . . . . . . . . . . 62
5.12 Instrucţiunea do-while . . . . . . . . . . . . . . . . . . . . . . . . 63
5.13 Instrucţiunea for . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
5.14 Instrucţiunile break şi continue . . . . . . . . . . . . . . . . . . . 63
5.15 Funcţii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
5.16 Tipuri de date de bază . . . . . . . . . . . . . . . . . . . . . . . . 65
5.17 Tipuri de date String . . . . . . . . . . . . . . . . . . . . . . . . . 66
5.18 Tipuri de date Math . . . . . . . . . . . . . . . . . . . . . . . . . 67
5.19 Tipuri de date Date . . . . . . . . . . . . . . . . . . . . . . . . . 68
5.20 Exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
5.21 Exerciţii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
5.22 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

6 Descriere: Limbajul Javascript (II) 73


6.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
6.2 Tipul Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
6.2.1 Instructiunea for . . . in . . . . . . . . . . . . . . . . . . . 74
6.3 JavaScript HTML DOM . . . . . . . . . . . . . . . . . . . . . . . 74
6.3.1 Obiecte DOM implicite . . . . . . . . . . . . . . . . . . . 75
6.3.2 Obiectul window . . . . . . . . . . . . . . . . . . . . . . . 76
6.3.3 Obiectul document . . . . . . . . . . . . . . . . . . . . . . 77
6.3.4 Alte obiecte predefinite . . . . . . . . . . . . . . . . . . . 79
6.4 Evenimente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
6.5 Javascript Cookies . . . . . . . . . . . . . . . . . . . . . . . . . . 82
6.6 Validare Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . 84
6.7 Exerciţii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
6.8 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
CUPRINS 5

7 Descriere: Limbajul Javascript (III) 87


7.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
7.2 Meniu expandabil ı̂n JavaScript . . . . . . . . . . . . . . . . . . . 87
7.2.1 Fişierul listmenu.css . . . . . . . . . . . . . . . . . . . . . 88
7.2.2 Fisierul listmenu.js . . . . . . . . . . . . . . . . . . . . . . 89
7.3 Slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
7.4 Introducere ı̂n AJAX . . . . . . . . . . . . . . . . . . . . . . . . . 92
7.4.1 Exemplu AJAX . . . . . . . . . . . . . . . . . . . . . . . . 94
7.5 Exerciţii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
7.6 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

8 Descriere: XML (eXtended Markup Language) 97


8.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
8.2 Introducere . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
8.2.1 Marcaje . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
8.2.2 Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
8.2.3 Atribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
6 CUPRINS
Capitolul 1

Introducere ı̂n (X)HTML

1.1 Resurse
1. Pentru un tutorial HTML online consultaţi: HTML
2. Pentru un tutorial XHTML online consultaţi: XHTML
3. Pentru entităţi HTML: Entităţi HTML
4. Pentru culori: Culori

1.2 Exerciţii
Exerciţiul 1 Realizaţi un document HTML simplu cu următoarea structură:

<html>
<head>
<t i t l e>Primul t e s t HTML</ t i t l e>
</head>
<body>
Textul c a r e va a p a r e ı̂ n b r o w s e r .
</body>
</html>

Exerciţiul 2 Realizaţi un document XHTML simplu cu următoarea structură:

< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 T r a n s i t i o n a l


//EN”
” h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1−t r a n s i t i o n a l . dtd ”
>
<html xmlns=” h t t p : / /www. w3 . o r g /1999/ xhtml ”>
<head>
<meta http−e q u i v=” Content−Type” content=” t e x t / html ;
c h a r s e t=i s o −8859−1” />
<t i t l e>XHTML T r a n s i t i o n a l Web Page</ t i t l e>

7
8 CAPITOLUL 1. INTRODUCERE ÎN (X)HTML

</head>
<body>
<h1>T i t l u H1</h1>
<p c l a s s=” c o n t e n t ”> Un p a r a g r a f c a r e va f o l o s i un o
f o a i e de s t i l (CSS) p e n t r u a c o n t r o l a f o r m a t a r e a
documentului .</p>
<img src=” h t t p : / / o r a r . u p i t . r o / S i g l a U p i t . GIF” a l t=”
U n i v e r s i t a t e a d i n P i t e s t i ” />
</body>
</html>

Exerciţiul 3 Folosind documentul realizat la punctual 1, verificaţi comporta-


mentul browserului dumneavoastră (utilizaţi atât IE cât şi Firefox) ı̂n următoarele
situaţii:
• scrieţi greşit numele marcatorilor de sfârşit pentru un container
• folosiţi ı̂n document spaţii, taburi şi linii goale pentru aranjarea codului
HTML
Exerciţiul 4 Realizaţi un document HTML care produce următorul rezultat: (i-
ul de după Salut este semnul exclamării răsturnat). Indicaţie: Folosiţi entităţile
HTML iexcl şi iquest.

Exerciţiul 5 Realizaţi un document XHTML 1.0 Transitional ca mai jos: iexcl


şi iquest.
1.2. EXERCIŢII 9

Exerciţiul 6 Testaţi validitatea documentului creat folosind validatorul W3C


de la adresa http://validator.w3.org/

Exerciţiul 7 Realizaţi un document XHTML cu CV-ul dumneavoastră:

• categorii: date de contact, data şi locul naşterii, studii, experienţă, referinţe,
aptitudini, hobby-uri, alte informaţii

• folosiţi formatări la nivel fizic (p, br) pentru a structura categoriile

• folosiţi formatări la nivel logic (h1, h2, etc) pentru a organiza ierarhic
documentul

• folositi formatări la nivel logic (em, strong) pentru a evidenţia eventualii


termeni

• folosiţi formatări la nivel de comunicare (address, acronym) acolo unde


este necesar

• creaţi un cuprins cu categoriile menţionate la ı̂nceputul documentului cu


legături către fiecare categorie

• creaţi o legătură către cuprins după fiecare categorie

• testati validitatea documentului creat folosind validatorul W3C si adau-


gati un link catre validator la sfarsitul cv-ului.

Exerciţiul 8 Împărţiti documentul HTML creat anterior ı̂n mai multe docu-
mente HTML. Cuprinsul se găseşte pe prima index.html, iar fiecare categorie
pe câte o pagină.

Exerciţiul 9 Adăugaţi ı̂n CV o legătură către un document PDF care să se


deschidă ı̂ntr-o fereastră nouă (folosiţi atributul target al tag-ului a). Folosiţi
atributul title pentru a adăuga o descriere (tooltip) legăturii spre fişierul PDF.

Exerciţiul 10 Realizaţi ı̂n HTML o listă ordonată (ı̂n ordinea rangului) cu


persoane din conducerea Universităţii din Piteşti.

Exerciţiul 11 Realizaţi ı̂n HTML o listă neordonată cu colegii dumneavoastră


de grupă.

Exerciţiul 12 Realizaţi un document HTML care afişează un tabel simplu.


10 CAPITOLUL 1. INTRODUCERE ÎN (X)HTML

Exerciţiul 13 Realizaţi o listă de definiţii ı̂n care termenii sunt oraşe din
străinătate ı̂n care aţi fost, iar definiţiile sunt câteva impresii despre fiecare
oraş.

Exerciţiul 14 Realizaţi un formular (formă) de introducere date conform următoarelor


specificaţii:

• componentă de tip text pentru preluare nume şi prenume

• componentă de tip text pentru preluare adresă e-mail

• componentă de tip casetă de selecţie pentru preluare specializare

• componentă de tip casetă de selecţie pentru preluare curs

• componentă de tip casetă de selecţie pentru preluare activitate. Acti-


vităţile pot fi: studiu curs, lucrare laborator, test grilă.

• componentă de tip buton radio pentru selecţie an de studiu (I, II, III sau
IV)

• componentă de tip buton de validare (checkbox) pentru specificare selecţii


dintre variantele:

– Activitate interactivă
– Activitate de studiu individual
– Activitate de lucru ı̂n colaborare cu alţi studenţi

• trei butoane de submisie a informaţiilor introduse ı̂n formular cu următoarele


semnificaţii:

– lansare activitate
– afişare stare student ı̂n raport cu activitatea selectată
– anulare informaţii introduse ı̂n formă (cancel)
1.3. BIBLIOGRAFIE 11

Exerciţiul 15 Creaţi un set de frame-uri. Unul dintre frame-uri va avea ca


sursă un fişier ce conţine un alt set de frame-uri. Specificaţi surse pentru fie-
care frame. Afişaţi pagina HTML compusă astfel. Adaugaţi o ancoră care are
ca TARGET numele unuia din frame-urile subsetului de frame-uri. Referinţa
pentru ancoră va fi un nou fişier HTML sau un fişier GIF. Activaţi referinţa.
Observaţi actualizarea conţinutului frame-ului. Adaugaţi o ancoră care are ca
TARGET numele frame-ului ce conţine subsetul de frame-uri. Referinţa pentru
ancora va fi un nou fişier HTML sau un fişier GIF. Activaţi referinţa. Observaţi
că astfel se poate actualiza conţinutul unui ı̂ntreg set de frame-uri. Realizaţi o
structură formată din 3 cadre cu următorul conţinut:

• Cadrul 1.

– Titlul aplicaţiei
– Butoane corespunzătoare opţiunilor aplicaţiei
• Cadrul 2.

– Forma creată la exerciţiul 1


• Cadrul 3.
– Un tabel cu cursurile disponibile:
– titlu curs
– nume profesor
– nume asistent
– programare curs
– programare laborator
– programare verificare
– algoritm de calcul notă
– o componentă de tip textarea pentru preluare comentarii.

1.3 Bibliografie
• W3C HTML Tutorial
• W3C XHTML Tutorial
12 CAPITOLUL 1. INTRODUCERE ÎN (X)HTML
Capitolul 2

CSS - Cascading Style


Sheets (I)

2.1 Resurse
• Pentru un tutorial CSS online consultaţi: CSS

• Pentru un tutorial HTML online consultaţi: HTML

• Pentru un tutorial XHTML online consultaţi: XHTML

2.2 Tutorial
CSS este un acronim pentru Cascading Style Sheets (foi de stiluri). O foaie
de stiluri conţine reguli de formatare ale elementelor unui document HTML.
Limbajul HTML este folosit pentru descrierea conţinutului ı̂n timp ce CSS este
utilizat pentru realizarea prezentării. Cascading ı̂nseamnă că stilurile se aplică
ı̂n ”cascadă”, proprietăţiile moştenite din alte declaraţii sunt suprascrise de
ultimele proprietăţi ı̂ncărcate de browser. O regulă de stil conţine:

• selectori – elementele cărora li se aplică regulile, separate prin virgulă (,)

• declaraţii – reguli care definesc modul de formatare al selectorilor, scrise


sub formă de perechi proprietate-valoare, separate prin punct şi virgulă
(;)

s e le c to r 1 , s e l e c t o r 2 { property1 : value1 ; property2 :


value2 }

Exemplu
H1 , H2 , H3 { f o n t −f a m i l y : H e l v e t i c a , Tahoma , A r i a l }
H1 { f o n t −s i z e : x−l a r g e ; c o l o r : r e d }
H2 { f o n t −s i z e : 12 pt }

13
14 CAPITOLUL 2. CSS - CASCADING STYLE SHEETS (I)

2.3 Aplicarea CSS


Există 3 modalităţi de aplicare a regulilor CSS.

• In-line

• Definiţii interne documentului HTML

• Definiţii externe ı̂n fişiere CSS

2.3.1 Stilurile in-line


Stilurile in-line sunt specificate chiar in tag-urile HTML cu atributul style, stilul
fiind aplicat doar containerului respectiv.
<p s t y l e=” c o l o r : r e d ”>t e x t</p>

Rezultatul aplicării acestui stil este colorarea paragrafului specificat ı̂n roşu.
Utilizarea stilurilor inline nu este recomandată, deoarece ele ı̂ncarcă documen-
tul HTML, fiind recomandat ca acestea să conţină cât mai puţine detalii de
prezentare.

2.3.2 Stilurile embedded


Stilurile embedded (interne documentului HTML) sunt specificate ı̂n interiorul
containerului head prin tag-uri style de tipul text/css.
< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN”
” h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1−s t r i c t . dtd ”>
<html>
<head>
<t i t l e>CSS Example</ t i t l e>
<s t y l e type=” t e x t / c s s ”>
p {
c o l o r : red ;
}
a {
c o l o r : blue ;
}
</ s t y l e>
...

Acest stil va aplica tuturor paragrafelor din pagină culoarea roşie şi tuturor
link-urilor culoarea albastră. Stilurile embedded pot fi utilizate atunci când
numărul de reguli este relativ mic.

2.4 Definiţiile externe


Definiţiile externe sunt conţinute ı̂ntr-un fişier CSS separat. Este recomandată
această metodă pentru a separa conţinutul (documentul HTML) de prezentare
(foia de stil). Un exemplu de fişier CSS este:
2.5. SELECTORI, PROPRIETĂŢI ŞI VALORI 15

p {
c o l o r : red ;
}
a {
c o l o r : blue ;
}

Acest fişier va fi salvat cu extensia .css şi pentru a putea fi utilizat, trebuie
specificat ı̂n tag-ul header al documentului HTML. Tag-ul corespunzator este:
<l i n k r e l=“ s t y l e s h e e t ” type=” t e x t / c s s ” href=” a d r e s a
document c s s ”>

< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN”


” h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1−s t r i c t . dtd ”>
<html>
<head>
<t i t l e>CSS Example</ t i t l e>
<l i n k r e l=” s t y l e s h e e t ” type=” t e x t / c s s ” href=”web . c s s ”
/>
...

Foile de stil externe pot fi specificate şi utilizând tag-ul style cu atributul
@import. În tag-ul head al documentului HTML se introduc marcaje style
astfel:
<s t y l e type=” t e x t / c s s ”>
@import u r l ( a d r e s a document c s s ) ;
</ s t y l e>

2.5 Selectori, proprietăţi şi valori


Pentru orice selector avem proprietăţi. Acestea sunt specificate ı̂ntr-un bloc
delimitat de acolade şi sunt sub forma de identificatori, de exemplu: color, font-
weight, sau background-color. Orice element HTML poate fi folosit ca selector.
De exemplu:
p {
t e x t −i n d e n t : 3em ;
}

Simbolul * reprezintă toate elementele HTML, şi proprietăţile specificate vor


fi aplicate tuturor elementelor. O valoare este atribuită unei proprietăţi după
simbolul (:). Proprietăţile sunt separate prin simbolul (;).
body {
f o n t −s i z e : 0 . 8 em ;
c o l o r : navy ;
}
16 CAPITOLUL 2. CSS - CASCADING STYLE SHEETS (I)

Exemplul de mai sus va formata elementul body utilizând valorile pentru


proprietăţile font-size şi color specificate. Clase – o clasă este un identificator
care poate referi mai multe elemente din documentul HTML; o clasă este definită
prin numele ei prefixat de punct (.)

• warning color: red; background-color: yellow

• clasa este referită prin atributul class al elementelor

<p c l a s s=“warning”> A t e n t i e ! ! ! </p>


<h1 c l a s s=“warning”>A t e n t i e mare ! ! ! </h1>

Identificatori – un identificator se referă la cel mult un element din docu-


mentul HTML.

• identificatorul este definit prin numele lui prefixat de diez (#)

• #licenta color: red; border: solid 2pt yellow

• Un identificator apare ı̂n documentul HTML ı̂n atributul id al unui singur


element

<p id=” l i c e n t a ”>Nu a v e t i v o i e s ă . . . </p>

Contextuali – doi sau mai mulţi selectori care stabilesc contextul ı̂n care se
aplică stilul

• selector#id – stilul se aplică dacă selector are identificatorul id

• selector.clasa – stilul se aplică dacă selector are clasa clasa

• selector1 selector2 – stilul se aplică dacă selector1 este conţinut ı̂n selector2
(selectorii pot fi oricare din selectorii descrişi anterior)

2.5.1 Unităţi de măsură


Pe langă unităţi de măsură specifice anumitor proprietăţi, ı̂n CSS există şi câteva
unităţi de măsură standard:

em (de exemplu font-size: 2em) este folosită pentru calcularea dimensiunii unui
font. ”2em” ı̂nseamnă că dimensiunea fontului va fi de 2 ori mai mare decât
dimensiunea fontului elementului părinte.

px (de exemplu font-size: 12px) este unitatea de măsură pentru pixeli.

pt (de exemplu font-size: 12pt) este unitatea de măsură pentru puncte.

% (de exemplu font-size: 80%) este unitatea pentru procentaje.

Alte unităţi de măsură includ pc (picas), cm, mm şi in. Când o valoare este zero,
nu mai trebuie specificată şi o unitate de măsură. Este indicat să se utilizeze
unităţile em şi % pentru dimensiunea fonturilor ı̂n locul unităţilor px şi pt care
pot duce la probleme de vizualizare a paginilor.
2.6. CULORI 17

2.6 Culori
CSS pune la dispoziţie 16.777.216 culori. Culorile pot fi specificate sub forma
de nume, cod rgb (red/green/blue) sau cod hexa. Pentru culoarea roşu sunt
acceptate următoarele forme:
red
rgb ( 2 5 5 , 0 , 0 )
rgb (100% ,0% ,0%)
#f f 0 0 0 0
#f 0 0

Există 17 nume predefinite de culori: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, orange, purple, red, silver, teal, white, şi yellow.
Transparent este de asemenea o valoare validă. Cele 3 elemente din codul RGB
iau valori ı̂ntre 0 şi 255. Un număr ı̂n hexazecimal poate fi reprezentat cu 3 sau
6 elemente. Forma cu 3 elemente este o variantă compresată a celei cu 6 (de
exemplu, #f00 devine #ff0000, #c96 devine #cc9966). Formatul hexa permite
un control mai fin al culorilor. Culorile pot fi specificate folosind proprietăţile
color şi background-color.
body {
f o n t −s i z e : 0 . 8 em ;
c o l o r : navy ;
}

h1 {
c o l o r : #f f c ;
background−c o l o r : #009;
}

2.7 Text
Dimensiunea şi formatarea textului dintr-o pagină web pot fi modificate folosind
următoarele proprietăţi:
font-family fontul utilizat. Poate fi: arial, helvetica, sans-serif sau alt font
instalat. Nu este recomandat să se utilizeze fonturi puţin răspindite. De
obicei se specifică o listă de fonturi “sigure”. Dacă un font nu este instalat,
atunci browser-ul trece la următorul font din listă.
font-size dimensiunea fontului
font-weight formatează textul. În practică poate lua valorile bold sau normal
deşi sunt posibile şi alte valori: bolder, lighter, 100, 200, 300, 400, 500,
600, 700, 800 şi 900.
font-style specifică dacă textul primeşte modificatorul italic sau nu. Poate
primi valorile italic sau normal.
text-decoration specifică dacă textul este formatat cu modificatorul underline
sau nu. Valorile posibile sunt:
18 CAPITOLUL 2. CSS - CASCADING STYLE SHEETS (I)

text-decoration: overline
text-decoration: line-through
text-decoration: underline
text-decoration: none

text-transform transformari ale textului.

text-transform: capitalize
text-transform: uppercase
text-transform: lowercase
text-transform: none

body {
f o n t −f a m i l y : a r i a l , h e l v e t i c a , sans− s e r i f ;
f o n t −s i z e : 0 . 8 em ;
}
h1 {
f o n t −s i z e : 2em ;
}
h2 {
f o n t −s i z e : 1 . 5 em ;
}
a {
t e x t −d e c o r a t i o n : none ;
}
strong {
f o n t −s t y l e : i t a l i c ;
t e x t −t r a n s f o r m : u p p e r c a s e ;
}

2.7.1 Formatare avansată a textului

p {
l e t t e r −s p a c i n g : 0 . 5 em ;
word−s p a c i n g : 2em ;
l i n e −h e i g h t : 1 . 5 ;
t e x t −a l i g n : c e n t e r ;
}

letter-spacing şi word-spacing sunt proprietăţi pentru specificarea spaţiilor


dintre litere şi cuvinte.
Valorile posibile sunt normal sau o lungime.
text-align poate primi valorile left, right, center sau justify.
2.8. MODELUL BOX 19

2.7.2 Margini şi zone de umplere (padding)


Margin şi padding sunt cele mai folosite proprietăţi pentru distanţarea elemente-
lor. Prima proprietate specifică spaţiul extern pentru un element, iar padding-ul
specifică spaţiul intern.
Se pot specifica valori separate pentru cele patru laturi ale unui element:
top, right, left şi bottom, margin-top, margin-right, margin-bottom, margin-
left, padding-top, padding-right, padding-bottom şi padding-left.
Marginile, zonele de umplere şi bordurile (borders) fac parte din modelul
Box care este utilizat de CSS.

2.8 Modelul Box


CSS foloseşte un model de formatare orientat pe blocuri: fiecare element produce
o zonă dreptunghiulară (cu excepţia elementelor care au proprietatea display =
none).
Fiecare bloc are un conţinut ı̂nconjurat de o zonă de umplere (padding area),
o bordură (border), şi o zonă de margine (margin area).

• zona de completare are acelaşi fundal ca şi elementul (setat prin proprie-
tatea background).

• culoarea şi stilul bordurii sunt stabilite prin proprietăţile border

• zona de margine este mereu transparentă

h2 {
f o n t −s i z e : 1 . 5 em ;
background−c o l o r : #c c c ;
margin : 1em ;
padding : 3em ;
}

2.8.1 Proprietăţile blocurilor


• Prin intermediul acestei grupe de proprietăţi se stabilesc dimensiunile,
poziţia, marginile etc. pentru blocurile care reprezintă elementele.

• Există proprietăţi pentru formatarea:


20 CAPITOLUL 2. CSS - CASCADING STYLE SHEETS (I)

– zonei de margine: margin-top, margin-right, margin-bottom, margin-


left, margin
– zonei de umplere: padding-top, padding-right, padding-bottom, padding-
left, padding
– bordurii: border-top-width, border-right-width, border-bottom-width,
border-leftwidth, border-width, border-color, border-style, border-
top, border-right, borderbottom, border-left, border
– conţinutului: width, height, float, clear

2.8.2 Proprietăţi pentru zona de margine


Proprietăţi pentru zona de margine - margin-top, margin-right, margin-bottom,
margin-left

v a l o a r e : auto | <mărime> | <p r o c e n t>

implicit: 0

• poate fi negativa, dar exista limite specifice implementarii

• valori procentuale: relative la lăţimea elementului părinte

• se aplica la toate elementele; nu este mostenită

• stabileste dimensiunea zonei de margine din partea de sus/dreapta/jo-


s/stânga a elementului.

2.8.3 Proprietăţi pentru zona de umplere


Proprietăţi pentru zona de umplere: padding-top, padding-right, padding-bottom,
padding-left

v a l o a r e : <mărime> | <p r o c e n t>

implicit: 0

• nu poate fi negativă

• valori procentuale: relative la lăţimea elementului părinte

• se aplica la toate elementele; nu este moştenită

• stabileşte dimensiunea zonei de umplere din partea de sus/dreapta/jo-


s/stânga a elementului.

Dacă sunt prezente patru valori, atunci ele se aplică pentru top, right, bottom şi
left, ı̂n această ordine. Dacă este dată o singură valoare, aceasta este atribuită
tuturor zonelor de umplere. Dacă sunt două sau trei valori, valorile lipsă se iau
din cele ale părţilor opuse.
2.9. EXEMPLU 21

2.8.4 Borduri
Pentru a realiza o bordura in jurul unui element se foloseste proprietatea border-
style. Valorile posibile sunt: solid, dotted, dashed, double, groove, ridge, inset
şi outset.
Grosimea bordurii este specificată cu proprietatea border-width. Valorile
posibile sunt: thin — medium — thick — ¡mărime¿.
Pentru specificarea bordurii separat pe fiecare latură avem: border-top-
width, border-right-width, border-bottom-width, border-left-width
h2 {
border −s t y l e : dashed ;
border −width : 3px ;
border −l e f t −width : 10 px ;
border −r i g h t −width : 10 px ;
border −c o l o r : r e d ;
}

2.9 Exemplu
Fie următorul document XHTML
<!DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN”
” h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1−s t r i c t . dtd”>

<html>
<head>
< t i t l e >L a b o r a t o r de Programare Web</ t i t l e >
<!−− Un c o m e n t a r i u −−>
</head>

<body>

<h1>Exemplu de p a g i n a Web</h1>
<h2>D e s c r i e r e </h2>
<p>O p a g i n ă s i m p l ă XHTML. <s t r o n g > O p a g i n ă s i m p l ă XHTML
.</ s t r o n g > O p a g i n ă s i m p l ă XHTML. O p a g i n ă s i m p l ă
XHTML. O p a g i n ă s i m p l ă XHTML. O p a g i n ă s i m p l ă XHTML. O
p a g i n ă s i m p l ă XHTML. O p a g i n ă s i m p l ă XHTML. O p a g i n ă
s i m p l ă XHTML. O p a g i n ă s i m p l ă XHTML. O p a g i n ă s i m p l ă
XHTML. O p a g i n ă s i m p l ă XHTML. O p a g i n ă s i m p l ă XHTML.</
p>

<h2>Curriculum </h2>
<ul>
<l i >
Programare Web
<o l >
< l i >XHTML</ l i >
< l i >CSS</ l i >
22 CAPITOLUL 2. CSS - CASCADING STYLE SHEETS (I)

< l i >J a v a s c r i p t </ l i >


< l i >PHP</ l i >
</o l >
</ l i >
< l i >R e t e l e de c a l c u l a t o a r e .</ l i >
</ul>

<h2>Unde p o a t e f i g a s i t t u t o r i a l u l de HTML</h2>
<p><a h r e f =”h t t p : / /www. w 3 s c h o o l s . com/ html / d e f a u l t . asp”>
<img s r c =”h t t p : / / o r a r . u p i t . r o / S i g l a U p i t . GIF”
width =”157” h e i g h t =”70” a l t =”UPIT l o g o ” /></a></p>

<h3>Un t a b e l </h3>
<t a b l e b o r d e r =”1”>
<t r >
<td>Row 1 , c e l l 1</td>
<td>Row 1 , c e l l 2</td>
<td>Row 1 , c e l l 3</td>
</t r >
<t r >
<td>Row 2 , c e l l 1</td>
<td>Row 2 , c e l l 2</td>
<td>Row 2 , c e l l 3</td>
</t r >
<t r >
<td>Row 3 , c e l l 1</td>
<td>Row 3 , c e l l 2</td>
<td>Row 3 , c e l l 3</td>
</t r >
<t r >
<td>Row 4 , c e l l 1</td>
<td>Row 4 , c e l l 2</td>
<td>Row 4 , c e l l 3</td>
</t r >
</ t a b l e >

<h3>Formular </h3>
<p><s t r o n g >O b s e r v a t i i :</ s t r o n g > Un f o r m u l a r c a r e nu f a c e
n i m i c !</p>

<form a c t i o n =” a c t i u n e . php” method=”p o s t”>


<p>Nume:</p>
<p><i n p u t type=” t e x t ” name=”nume” v a l u e=”Nume s i
prenume ” /></p>

<p>C o m e n t a r i i : </p>
<p><t e x t a r e a rows =”10” c o l s =”20” name=” c o m e n t a r i i ”>
C o m e n t a r i i l e dvs </t e x t a r e a ></p>

<p>Sex :</p>
2.9. EXEMPLU 23

<p><i n p u t type=” r a d i o ” name=”s e x ” v a l u e=”m a s c u l i n ” />


Masculin </p>
<p><i n p u t type=” r a d i o ” name=”s e x ” v a l u e=”f e m i n i n ” />
Feminin </p>
<p><i n p u t type=”submit ” /></p>
<p><i n p u t type=” r e s e t ” /></p>
</form>

</body>
</html>
Realizati legatura dintre fisierul prezentat mai sus si urmatorul document
CSS.
body {
f o n t −f a m i l y : a r i a l , h e l v e t i c a , sans− s e r i f ;
f o n t −s i z e : 80%;
color : black ;
background−c o l o r : #f f c ;
margin : 1em ;
padding : 0 ;
}
/∗ Un c o m e n t a r i u ∗/
p {
l i n e −h e i g h t : 1 . 5 em ;
}
h1 {
c o l o r : #f f c ;
background−c o l o r : #900;
f o n t −s i z e : 2em ;
margin : 0 ;
margin−bottom : 0 . 5 em ;
padding : 0 . 2 5em ;
f o n t −s t y l e : i t a l i c ;
t e x t −a l i g n : c e n t e r ;
l e t t e r −s p a c i n g : 0 . 5 em ;
border −bottom−s t y l e : s o l i d ;
border −bottom−width : 0 . 5 em ;
border −bottom−c o l o r : #c00 ;
}
h2 {
c o l o r : white ;
background−c o l o r : #090;
f o n t −s i z e : 1 . 5 em ;
margin : 0 ;
padding : 0 . 1 em ;
padding− l e f t : 1em ;
}
h3 {
c o l o r : #999;
f o n t −s i z e : 1 . 2 5em ;
24 CAPITOLUL 2. CSS - CASCADING STYLE SHEETS (I)

}
img {
border −s t y l e : dashed ;
border −width : 2px ;
border −c o l o r : #c c c ;
}
a {
t e x t −d e c o r a t i o n : none ;
}
strong {
f o n t −s t y l e : i t a l i c ;
t e x t −t r a n s f o r m : u p p e r c a s e ;
}
li {
c o l o r : #900;
f o n t −s t y l e : i t a l i c ;
}
table {
background−c o l o r : #c c c ;
}

2.10 Exercitii
Realizaţi foile de stil şi documentele HTML care să prezinte următoarele vederi
ı̂n browser.

Exerciţiul 16 Folosiţi proprietatea border-style


2.10. EXERCITII 25

Exerciţiul 17 Folosiţi proprietăţile color şi background

Exerciţiul 18 Folosiţi proprietatea background-color


26 CAPITOLUL 2. CSS - CASCADING STYLE SHEETS (I)

Exerciţiul 19 Folosiţi proprietatea word-spacing

Exerciţiul 20 Folosiţi proprietatea letter-spacing


2.10. EXERCITII 27

Exerciţiul 21 Folosiţi proprietatea text-decoration

Exerciţiul 22 Folosiţi proprietatea text-transform


28 CAPITOLUL 2. CSS - CASCADING STYLE SHEETS (I)

Exerciţiul 23 Folosiţi proprietatea font-family

Exerciţiul 24 Folosiţi proprietatea font


2.11. BIBLIOGRAFIE 29

Exerciţiul 25 Folosiţi proprietatea margin pentru un tag p

2.11 Bibliografie
• CSS Tutorial

• W3C HTML Tutorial


• W3C XHTML Tutorial
30 CAPITOLUL 2. CSS - CASCADING STYLE SHEETS (I)
Capitolul 3

Descriere: CSS - Cascading


Style Sheets (II)

3.1 Resurse
• Pentru un tutorial CSS online consultaţi: CSS

• Pentru un tutorial HTML online consultaţi: HTML

• Pentru un tutorial XHTML online consultaţi: XHTML

3.2 Clase şi identificatori


Clasele şi identificatorii permit definirea propriilor selectori. Elementele HTML
aparţinând aceluiaşi tip pot fi prezentate diferit ı̂n funcţie de clasa sau ID-ul cu
care sunt definite.
Clase – o clasă este un identificator care poate referi mai multe elemente
din documentul HTML.

• clasa este definită prin numele ei prefixat de punct (.)


warning { c o l o r : r e d ; background−c o l o r : y e l l o w }

• clasa este referită prin atributul class al elementelor


<p c l a s s=“warning”> A t e n ţ i e ! ! ! </p>
<h1 c l a s s=“warning”>A t e n ţ i e mare ! ! ! </h1>

Identificatori – un identificator se referă la cel mult un element din docu-


mentul HTML.

• identificatorul este definit prin numele lui prefixat de diez (#)


#l i c e n t a { c o l o r : r e d ; b o r d e r : s o l i d 2 pt y e l l o w }

31
32 CAPITOLUL 3. DESCRIERE: CSS - CASCADING STYLE SHEETS (II)

• Un identificator apare ı̂n documentul HTML ı̂n atributul id al unui singur


element
<p id=“ l i c e n t a ”>Nu a v e t i v o i e s • . . . </p>

Un exemplu de utilizare:
#top {
background−c o l o r : #c c c ;
padding : 1em
}
. intro {
c o l o r : red ;
f o n t −w e i g h t : b o l d ;
}

Legătura dintre elementele HTML şi CSS se face prin atributele id şi class.
<div id=” top ”>
<h1>Curs de programare web</h1>
<p c l a s s=” i n t r o ”>CSS e s t e un acronim p e n t r u Cascading
S t y l e S h e e t s</p>
<p c l a s s=” i n t r o ”>R e s p e c t a t i i n t o t d e a u n a s t a n d a r d e l e
Web</p>
</ div>

3.3 Span şi Div


Tag-urile span şi div sunt folosite pe scara largă ı̂mpreună cu CSS. În comparaţie
cu alte tag-uri HTML, cum ar fi p, h1 sau a, aceste tag-uri nu sunt folosite pentru
a reprezenta un conţinut, ci doar pentru gruparea elementelor HTML. Folosind
atributele class şi id, putem identifica cu uşurinţă div-urile dintr-un document
şi cu ajutorul CSS putem aplica pentru fiecare o formatare specială.
Diferenţa dintre span şi div, este ca tag-ul span este afişat in-line pe când
tag-ul div este afisat block-line.
<div id=” c o n t a i n e r ”>
<p>Un exemplu <span c l a s s=”unSpan”>s i m p l u</span></p>
</ div>

3.4 Grupuri şi contextuali


Aceleaşi proprietăţi pot fi atribuite simultan mai multor selectori prin separarea
numelor acestora prin virgule. De exemplu, regulile de mai jos:
h2 {
c o l o r : red ;
}
. oClasa {
3.5. PSEUDO-CLASE ŞI PSEUDO-ELEMENTE 33

c o l o r : red ;
}
. altaClasa {
c o l o r : red ;
}

pot fi comprimate intr-o singura regula


h2 , . oClasa , . a l t a C l a s a {
c o l o r : red ;
}

Dacă fişierul CSS este bine structurat nu este nevoie de foarte multe reguli
de tip class sau ID, deoarece se pot specifica proprietăţi pentru selectorii din
cadrul altor selectori. De exemplu:
#top {
background−c o l o r : #c c c ;
padding : 1em
}
#top h1 {
c o l o r : #f f 0 ;
}
#top p {
c o l o r : red ;
f o n t −w e i g h t : b o l d ;
}

Regula de mai sus aplicată codului HTML ce urmează, produce acelaşi re-
zultat ca şi ı̂n cazul utilizării claselor şi identificatorilor.
<div id=” top ”>
<h1>Curs de programare web</h1>
<p>CSS e s t e un acronim p e n t r u Cascading S t y l e S h e e t s<
/p>
<p>R e s p e c t a t i i n t o t d e a u n a s t a n d a r d e l e Web</p>
</ div>

Contextuali – doi sau mai mulţi selectori care stabilesc contextul ı̂n care
se aplică stilul
• selector#id – stilul se aplică dacă selector are identificatorul id
• selector.clasa – stilul se aplică dacă selector are clasa clasa
• selector1 selector2 – stilul se aplică dacă selector1 este conţinut ı̂n selector2
(selectorii pot fi oricare din selectorii descrişi anterior)

3.5 Pseudo-clase şi pseudo-elemente


Sunt clase şi elemente speciale care sunt recunoscute de browser.
• pseudo-clasele permit diferenţierea ı̂ntre mai multe tipuri de elemente.
34 CAPITOLUL 3. DESCRIERE: CSS - CASCADING STYLE SHEETS (II)

• pseudo-elementele sunt sub-părţi de elemente.


Sunt definite prin construcţii:
s e l e c t o r : pseudo−c l a s a { p r o p e r t y : v a l u e }
s e l e c t o r : pseudo−e l e m e n t { p r o p e r t y : v a l u e }

Pseudo-clasele marcajului a:
a : l i n k { c o l o r : red }

link este pentru un link nevizitat


a : a c t i v e { c o l o r : b l u e ; f o n t −s i z e : 125% }

active este pentru momentul ı̂n care link-ul primeşte focus-ul


a : v i s i t e d { c o l o r : g r e e n ; f o n t −s i z e : 85% }

visited este pentru un link care a fost vizitat


a : hover { c o l o r : g o l d ; }

hover este pentru momentul ı̂n care cursorul mouse-ului este poziţionat peste
link. Pseudo-elementele marcajelor blocuri (p, h1, div, etc):
p : f i r s t −l i n e { f o n t −w e i g h t : b o l d }
p : f i r s t −l e t t e r { f o n t −s i z e : 300%; f l o a t : l e f t }
a : link {
c o l o r : blue ;
}
a: visited {
color : purple ;
}
a : active {
c o l o r : red ;
}
a : hover {
t e x t −d e c o r a t i o n : none ;
c o l o r : blue ;
background−c o l o r : y e l l o w ;
}

3.6 Imagini de fundal


Pentru manipularea imaginilor de fundal (background images) se utilizează pro-
prietatea background.
body {
background : w h i t e u r l ( h t t p : / /www. w 3 s c h o o l s . com/ c s s /
bgdesert . jpg )
no−r e p e a t top r i g h t ;
}
3.7. PROPRIETATEA DISPLAY 35

Definiţia de mai sus reuneşte următoarele proprietăţi.


background-color specifică culoarea de fundal a unui element.
• valoare: hculoarei | transparent
Se aplică la toate elementele; nu se moşteneşte, fundalul părintelui este
implicit vizibil datorită valorii transparent a proprietăţii.
background -image permite indicarea unei imagini care să constituie fundal
pentru element.
• valoare: hadresăi | none
La setarea unei imagini de fundal este recomandată definirea unei culori
de fundal pentru cazul când imaginea nu este accesibilă.
background-repeat dacă este specificată o imagine de fundal, prin această
proprietate se stabileste modul de repetare al imaginii.
• repeat - repetare pe verticală şi pe horizontală
• repeat-x, repeat-y - repetare imaginii pe orizontală, respectiv pe ver-
ticală
• no-repeat - imaginea nu este repetată
background-position dacă este specificată o imagine de fundal, indică poziţia
iniţială a unei imagini. Poate avea valorile top, center, bottom, left, right
sau o combinatie a lor ca ı̂n exemplul de mai sus. Este posibil să se indice
o pereche hprocenti hmărimei, ca şi poziţii negative.
Valoarea x y plasează imaginea cu x pixeli spre dreapta şi y pixeli ı̂n jos
pornind din coltul stânga sus.
Valoarea x% y% suprapune punctele care se află la x% pe orizontală şi y%
pe verticală din imagine şi din zona de conţinut. De exemplu:
• valoarea 0
• valoarea 100
• Dacă numai un procentaj sau o mărime este specificată, ea se referă
la orizontală, poziţia verticală fiind considerată 50
Proprietatea background stabileşte ı̂ntotdeauna toate valorile individuale (cele
nespecificate explicit vor fi setate la valorile iniţiale).

3.7 Proprietatea display


Specifică modul ı̂n care elementele vor fi tratate de către browser. Aceste pro-
prietăţi efectuează mai degrabă o clasificare a elementelor decât o intervenţie
asupra unor atribute vizuale. Există trei tipuri fundamentale: in-line, block şi
none.
inline – elementele care sunt afişate in-line vor fi poziţionate pe aceeaşi linie
cu conţinutul precedent din document. Elementele strong, anchor sau
emphasis fac parte din această categorie.
36 CAPITOLUL 3. DESCRIERE: CSS - CASCADING STYLE SHEETS (II)

block – elementul creează un bloc nou poziţionat relativ la blocurile adiacente


ı̂n concordanţă cu modelul de formatare CSS (Box Model). Înainte şi după
bloc este introdusă o linie nouă. Elementele tipice care sunt afişate block
sunt de tipul paragraph şi header.
none – elementul şi conţinutul său nu se afişează.
Următorul exemplu manipulează câteva elemente in-line şi block-line.
h1 {
display : inline ;
f o n t −s i z e : 2em ;
}
p {
display : inline ;
f o n t −s i z e : 0 . 9 em ;
padding− l e f t : 2em ;
}

Proprietăţile display: none şi visibility: hidden au acelaşi efect, adică nu


afişează elementul şi conţinutul său, dar acţionează ı̂n mod diferit: display:
none ı̂ndepărtează complet elementul din layout iar visibiliy: hidden păstrează
elementul ı̂n layout, dar nu afişează conţinutul.
Alte tipuri pentru proprietatea display sunt:
list-item - elementul creează un bloc nou cu un marcaj de item de listă ı̂n faţă.
Un exemplu tipic este elementul li. Pentru o funcţionare corectă aceste
elemente trebuie incluse ı̂n tag-uri ul sau ol.
li {
c o l o r : #900;
f o n t −s t y l e : i t a l i c ;
}

Pentru formatarea marcajelor unei liste avem la dispoziţie următoarele pro-


prietăţi:
list-style-image - se aplică la toate elementele cu display: list-item şi specifică
imaginea utilizată drept marcaj de item.
• value: hurli | none
list-style-type - specifică marcajul itemilor de listă ı̂n cazul ı̂n care proprieta-
tea list-style-image este none sau imaginea nu poate fi afisată. Poate lua
una din urmatoarele valori:
• disc,
• circle,
• square,
• decimal,
• lower-roman,
• upper-roman,
3.8. PAGE LAYOUT 37

• lower-alpha,
• upper-alpha,
• none.
list-style-position - specifică poziţia marcajului ı̂n raport cu conţinutul ele-
mentului de listă. Poate lua valorile inside sau outside. list-style - specifică
simultan toate proprietăţile care se referă la modul de afişare a listelor:
liststyle- image, list-style-position, list-style-type.
• valoare: h list −style−typei | hlist-style-positioni | hurli
Se recomandă precizarea stilurilor pentru itemi la nivel de listă (ı̂n marcajele ol
şi ul)
ul {
l i s t −s t y l e : s q u a r e i n s i d e u r l ( l o g o . png )
}

3.8 Page Layout


Poziţionarea elementelor folosind CSS este mult mai naturală şi mai simplă decât
poziţionarea folosind tabele HTML. Secţiunile unei pagini pot fi poziţionate
absolut sau relativ faţă de celelalte secţiuni.

3.8.1 Proprietatea position


Proprietatea position este folosită pentru a specifica daca un element este poziţionat
absolute, relative, static sau fixed.
static – este proprietatea implicită, elementele fiind poziţionate normal, aşa
cum apar ı̂n documentul HTML.
relative – efectul este similar cu static, dar se poate specifica un offset faţă pe
poziţia originală folosind proprietăţile: top, right, bottom şi left.
absolute – anulează potionarea originală şi plasează elementul oriunde ı̂n pa-
gină folosind proprietăţile top, right, bottom şi left.
fixed – elementul se comportă ca ı̂n cazul folosirii valorii absolute, dar de
data aceasta este poziţionat relativ la fereastra browserului ı̂n loc să fie
poziţionat relativ la pagina web. În teorie elementele definite cu fixed ar
trebui să rămână imobile chiar ı̂n cazul ı̂n care se efectuează un scroll. Nu
funcţionează ı̂n IE.
Folosind poziţionarea absolută putem realiza un layout cu 2 coloane pentru
următorul document HTML.
<div id=” n a v i g a t i o n ”>
<ul>
< l i><a href=”unu . html ”>Unu</a></ l i>
< l i><a href=” d o i . html ”>Doi</a></ l i>
< l i><a href=” t r e i . html ”>T r e i</a></ l i>
38 CAPITOLUL 3. DESCRIERE: CSS - CASCADING STYLE SHEETS (II)

</ ul>
</ div>
<div id=” c o n t e n t ”>
<h1>Un exemplu de p o z i t i o n a r e .</h1>
<p>Un exemplu de p o z i t i o n a r e . Un exemplu de
pozitionare .
Un exemplu de p o z i t i o n a r e . Un exemplu de p o z i t i o n a r e .
Un exemplu de p o z i t i o n a r e .</p>
<p>Alt exemplu de p o z i t i o n a r e .</p>
</ div>

Aplicam urmatoarele reguli CSS


#n a v i g a t i o n {
position : absolute ;
top : 0 ;
l e f t : 0;
width : 10em ;
}
#c o n t e n t {
margin− l e f t : 10em ;
}

Aceste definiţii vor poziţiona absolut bara de navigare ı̂n colţul stânga sus.
Deoarece dimensiunea este 10em, se introduce o margine cu aceeaşi valoare
pentru conţinut.
Dacă dorim să extindem designul paginii astfel ı̂ncat să includă a treia co-
loană, modificăm regulile CSS astfel:
#n a v i g a t i o n {
position : absolute ;
top : 0 ;
l e f t : 0;
width : 10em ;
}
#n a v i g a t i o n 2 {
position : absolute ;
top : 0 ;
right : 0;
width : 10em ;
}
#c o n t e n t {
margin−top : 0 ;
margin−bottom : 0 ;
margin− l e f t : 10em ;
margin−r i g h t : 10em ;
}

În documentul HTML se defineşte ı̂ncă un container div cu id-ul navigation2.


<div id=” n a v i g a t i o n 2 ”>
<ul>
3.8. PAGE LAYOUT 39

< l i><a href=” p a t r u . html ”>Patru</a></ l i>


< l i><a href=” c i n c i . html ”>C i n c i</a></ l i>
</ ul>
</ div>

Dezavantajul poziţionării absolute constă ı̂n dificultatea adaptării regulilor


de mai sus pentru layout-uri mai complexe unde se folosesc valori relative pen-
tru dimensiuni, sau care conţin footer, header, etc. Pentru că elementele sunt
poziţionate absolut este dificil să determinam cu precizie unde se termină ele-
mentele. Pentru aceste cazuri se foloseşte poziţionare de tip float.

3.8.2 Proprietatea float


Proprietatea float specifică locul ı̂n care este afişat elementul. Poate lua valorile
left, right sau none. Pentru left (right) - elementul este tratat ca un bloc si este
mutat la stânga (respectiv la dreapta) şi textul va curge ı̂n dreapta (respectiv
stânga) lui.
Folosind exemplul HTML anterior putem aplica următoarele reguli CSS
(efectul este identic) dar putem ı̂mbogăţi layout-ul cu un footer.
#n a v i g a t i o n {
float : left ;
width : 10em ;
}
#n a v i g a t i o n 2 {
float : right ;
width : 10em ;
}
#c o n t e n t {
margin−top : 0 ;
margin−bottom : 0 ;
margin− l e f t : 10em ;
margin−r i g h t : 10em ;
}

Dacă nu dorim ca următorul element să ı̂ncapsuleze obiectele flotante, pu-


tem utiliza proprietatea clear. Valorile posibile sunt none, left, right sau both.
Proprietatea clear specifică dacă elementul permite elemente flotante ı̂n părţile
laterale.

none - sunt permise elemente flotante pe laturile elementului.

left - nu sunt permise elemente flotante ı̂n stânga elementului (acesta va fi


mutat ı̂nainte de orice element flotant spre stânga).

right - nu sunt permise elemente flotante ı̂n dreapta elementului (acesta va fi


mutat ı̂nainte de orice element flotant spre dreapta).

both - nu sunt acceptate elemente flotante ı̂n jurul elementului.

Pentru a adauga un footer la designul specificat anterior vom specifica următoarea


regulă:
40 CAPITOLUL 3. DESCRIERE: CSS - CASCADING STYLE SHEETS (II)

#f o o t e r {
c l e a r : both ;
}

În documentul HTML se aduagă un element cu ID-ul footer.

3.9 Exerciţii
Realizaţi foile de stil şi documentele HTML care să prezinte următoarele vederi
ı̂n browser.
3.9. EXERCIŢII 41

Exerciţiul 26 Folosiţi proprietăţile background-image şi background-repeat.


42 CAPITOLUL 3. DESCRIERE: CSS - CASCADING STYLE SHEETS (II)

Exerciţiul 27 Folosiţi proprietăţile background-image şi background-repeat. Trataţi


şi cazul repetării pe orizontală.
3.9. EXERCIŢII 43

Exerciţiul 28 Folosiţi proprietăţile background-image, background-repeat şi ba-


ckground attachement.
44 CAPITOLUL 3. DESCRIERE: CSS - CASCADING STYLE SHEETS (II)

Exerciţiul 29 Folosiţi proprietatea background.


3.9. EXERCIŢII 45

Exerciţiul 30 Folosiţi proprietatea list-style-type. Utilizaţi toate valorile posi-


bile.
46 CAPITOLUL 3. DESCRIERE: CSS - CASCADING STYLE SHEETS (II)

Exerciţiul 31 Folosiţi proprietatea list-style-image.


3.9. EXERCIŢII 47

Exerciţiul 32 Folosiţi proprietatea float. Testaţi pentru valorile left, right şi
none. Adaugaţi o margine de 20 px la stânga, 15px jos, 0px sus şi la dreapta.
Adaugaţi şi o bordură de culoare roşie cu dimensiunea de 2px.
48 CAPITOLUL 3. DESCRIERE: CSS - CASCADING STYLE SHEETS (II)

Exerciţiul 33 Se utilizează un container div. Folosiţi proprietăţile float, width,


margin, padding, border şi text-align.
3.9. EXERCIŢII 49

Exerciţiul 34 Realizaţi un meniu orizontal. Modificaţi apoi regulile CSS pen-


tru a aranja meniul pe verticală.
50 CAPITOLUL 3. DESCRIERE: CSS - CASCADING STYLE SHEETS (II)

Exerciţiul 35 Poziţionaţi un element relativ la poziţia lui iniţială. Folosiţi


proprietatea position.
3.9. EXERCIŢII 51

Exerciţiul 36 Pozitionaţi un element utilizând modul absolute. Folosiţi propri-


etatea position. Ascundeţi tagul header folosind proprietatea visibility: hidden.
52 CAPITOLUL 3. DESCRIERE: CSS - CASCADING STYLE SHEETS (II)

Exerciţiul 37 Adaugaţi culori unui hyperlink. Folosiţi pseudoclase.


3.10. BIBLIOGRAFIE 53

Exerciţiul 38 Definiţi reguli CSS pentru modificarea stilului hyperlink-urilor.


Folosiţi pseudo-clase.

3.10 Bibliografie
• CSS Tutorial

• W3C HTML Tutorial


• W3C XHTML Tutorial
54 CAPITOLUL 3. DESCRIERE: CSS - CASCADING STYLE SHEETS (II)
Capitolul 4

Descriere: CSS – Cascading


Style Sheets (III)

4.1 Resurse

• Pentru un tutorial CSS online consultaţi: CSS

• Pentru un tutorial de CSS Layout consultaţi: CSS Layout

4.2 Proiect (I)

Descriere : Realizaţi un layout pentru un site web folosind CSS şi XHTML.

Cerinţe : Design-ul trebuie să respecte următoarele reguli:

1. Site-ul trebuie să fie compatibil cu următoarele browsere: Firefox


1.* – 2.0, Internet Explorer 6 şi Internet Explorer 7. Vizualizarea
site-ului trebuie să fie identică ı̂n browserele specificate. Regulile
CSS utilizate trebuie să respecte standardele W3C. Fişierele CSS şi
XHTML trebuie să treacă de validarea CSS şi XHTML:

• http://jigsaw.w3.org/css-validator/
• http://validator.w3.org/

2. Proiectul va fi notat ı̂n funcţie de aspect şi funcţionalitate. Nu sunt


impuse dimensiuni, dar designul trebuie să includă următoarele ele-
mente de bază: Meniu Principal, Header, Sidebar, Conţinut, Footer.
Un exemplu de layout care poate fi utilizat este:

55
56CAPITOLUL 4. DESCRIERE: CSS – CASCADING STYLE SHEETS (III)

3. Se va utiliza o schemă de culori unitară care facilitează vizualizarea


site-ului. Utilizarea excesivă a imaginilor de fundal, fonturilor sau
culorilor care fac textul greu descifrabil nu este recomandată. Pentru
selecţia culorilor puteţi folosi instrumente specializate, de exemplu:
• http://www.steeldolphin.com/color scheme.html
4. Proiectul trebuie să includă un meniu principal şi unul secundar,
ambele realizate ı̂n CSS. Meniul principal trebuie să fie compus din
minim 5 elemente, iar submeniul din minim 2 elemente pentru fiecare
pagină. Elementele meniului vor utiliza tehnica image rollover (un
element işi modifică dinamic aspectul ı̂n funcţie de starea ı̂n care se
află: selectat, primeşte focus, activ).
5. Pentru realizarea proiectului NU este permisă folosirea unor instru-
mente software WYSWYG (What You See Is What You Get) care
permit realizarea unui layout ı̂ntr-un mediu vizual.
6. Pentru a ilustra cât mai bine layout-ul adăugaţi conţinut site-ului
(text şi imagini).
7. Proiectul este individual şi va fi susţinut ı̂n Laboratorul 14.

4.3 Bibliografie
• CSS online consultaţi: CSS

• W3C XHTML Tutorial: XHTML


• Creating a CSS Layout from Scratch: CSS Layout
Capitolul 5

Descriere: Limbajul
Javascript (I)

5.1 Resurse
• Pentru un tutorial Javascript online consultaţi: Javascript

5.2 Limbajul JavaScript


• produs de Netscape Communications, numit original ECMAScript
• este destinat folosirii ı̂n cadrul paginilor Web
• codul sursă este interpretat de către browser (client-side scripting)
Inserarea de scripturi JavaScript ı̂n pagini Web se realizează cu marcajul h script
i
• atributul language poate specifica versiunea JavaScript folosită

<s c r i p t l a n g u a g e=” J a v a S c r i p t ”>


// a c e s t a e s t e un c o m e n t a r i u pe o l i n i e
window . s t a t u s=‘ S a l u t ‘ ; // a c e a s t a e s t e o i n s t r u c ţ i u n e
/∗ a c e s t a e s t e un c o m e n t a t i u
pe mai multe l i n i i ∗/
</ s c r i p t>

Codul JavaScript poate fi stocat ı̂ntr-un fişier extern (ı̂n general cu extensia
.js) şi folosit ı̂n cadrul paginii prin construcţia
<s c r i p t l a n g u a g e=” J a v a S c r i p t ” src=” f i l e . j s ” />

5.3 Identificatori
• Un identificat (nume) este un nume asociat unei variabile, funcţii, tip de
dată, etc.

57
58 CAPITOLUL 5. DESCRIERE: LIMBAJUL JAVASCRIPT (I)

• Un identificator

– este alcătuit din litere, cifre, caracterul liniuţă de subliniere (under-


score – ” ”).
– nu poate să conţină spaţii
– nu poate să ı̂nceapă cu o cifră
– nu poate fi unul din cuvintele rezervate ale limbajului JavaScript

• boolean, break, byte, case, char, continue, do, double, else, false, float, for,
if, long, new, null, private, protected, short, static, this, throw, var, void,
while etc.

• este case-sensitive (Test este diferit de TEST)

5.4 Variabile
• variabila este un identificator asociat unei zone de memorie.

• declararea variabilelor este precedată de cuvântul var, dar o variabilă poate


fi folosită fără a fi declarată.
var i , j , k ; // p e n t r u v a r i a b i l e l e i , j s i k s e f a c e
doar d e c l a r a r e

• variabilă nu are asociat un tip, adică este posibil ca variabila să aibă o
valoare numerică şi să i se atribuie o valoare de tip şir de caractere.

• o variabilă neiniţializată are valoarea Undefined. Operatorul de atribuire


(=) este folosit la declarare, pentru iniţializarea variabilelor.
var x=5; // v a r i a b i l a x e s t e d e c l a r a t ă ş i i n i ţ i a l i z a t ă
var s i r=” abc ” ;

• prin variabila locală se ı̂nţelege o variabilă declarată ı̂n interiorul unui bloc

– blocul este delimitat printr-o pereche de acolade, şi poate să apară
ı̂n interiorul instrucţiunii for, ı̂n interiorul unei funcţii etc.
– domeniul de vizibilitate al variabilei este blocul ı̂n care a fost decla-
rată
– domeniul de existenţă al variabilei este perioada execuţiei blocului ı̂n
care a fost declarată

<s c r i p t >
do {
var i = window . prompt ( ” Dati un numar” , ” ” ) ;
// i e s t e l o c a l a
} while ( Math . random ( ) <0.8) ;
</ s c r i p t >
5.5. OPERATORI 59

• prin variabila globală se ı̂nţelege o variabilă declarată ı̂n afara oricărui


bloc

– variabila este declarată direct ı̂n interiorul unui marcaj h script i


– domeniul de vizibilitate al variabilei este toată pagina
– domeniul de existenţă al variabilei este perioada cât pagina este
ı̂ncărcată ı̂n navigator

<s c r i p t >
var i ; // i e s t e g l o b a l a
do {
i = window . prompt ( ” Dati un numar” , ” ” ) ; // i
este locala
} while ( Math . random ( ) <0.8) ;
</ s c r i p t >

5.5 Operatori
Operatori aritmetici : + (adunare); - (scădere); * (^
ınmulţire); / (^
ımpărţire);
% (calculul restului)

Operatori de atribuire : = (se aplică ^


ın forma variabila=expresie),
+=, -=, /=, *=, /=, %=, ^=, &=, |=, <<=, >>= (aceleaşi semnificaţii
ca ^
ın C++)

Operatori de testare a egalităţii : == (EGAL), != (DIFERIT); rezultatul


calculelor este o valoare logică

Operatori relaţionali : <, >, <=, >= ; rezultatul calculelor este o


valoare logică

Operatori de incrementare/decrementare : ++, -- ^


ın forma prefixată
sau postfixată

Operatori pe biţi : | (sau), & (şi), ^ (sau exclusiv), ~ (not); pot


fi utilizaţi cu valori numerice; rezultatul este o valoare numerică

Operatori logici : || (sau - disjuncţie), && (şi - conjuncţie), ! (NOT


- negaţie); rezultatul este o valoare logică

Operatori de deplasare : << (SHIFT LEFT), >> (SHIFT RIGHT)

Operator condiţional : expresie? operand1 : operand2 (dacă expresia


este true, rezultatul este valoarea operandului1; altfel este
valoarea operandului2)

Operator de concatenare : + folosit pentru alipirea a două şiruri


de caractere

Alţi operatori (e.g. typeof)


60 CAPITOLUL 5. DESCRIERE: LIMBAJUL JAVASCRIPT (I)

5.6 Precedenţa operatorilor


• inversare, negaţie pe biţi (-, ~)

• incrementare, decrementare (++, --)

• ^
ınmulţire, ^
ımpărţire (*, /, %)

• adunare, scădere (+, -)

• deplasare (<<, >>)

• comparare (<, >, <=, >=)

• egalitate (==, !=)

• SI pe biţi (&)

• SAU EXCLUSIV pe biţi (^)

• SAU pe biţi ( | )

• conjuncţie (&&)

• disjuncţie (|| )

• condiţional (?:)

• atribuire (=, +=, -=, |=, &=, ^=, *=, /=, >>=, <<=, &&=, ||=,
%=)

5.7 Instrucţiuni
• instrucţiunea vidă: ;

– e.g. ;

• instrucţiuni expresii: formate din expresii (apeluri de funcţii, atribuiri,


etc).

– e.g. a=5;

• instrucţiunea bloc de instrucţiuni:

– e.g. a=b; if(c==3) c=d;

• instrucţiuni de test: if (if-else), switch

• instrucţiuni iterative: while, do-while, for, for-in

• instrucţiuni de control: continue, break, return

• instrucţiuni pentru obiecte: with, for-in


5.8. INSTRUCŢIUNI EXPRESII 61

5.8 Instrucţiuni expresii


• Interacţiunea cu utilizatorul (pe scurt)

– Citirea datelor

• variabila=window.prompt(“Mesaj:”,”Valoare implicită”);

– Scrierea datelor

• document.write(“Mesaj”);

• e.g. Citirea numelui utilizatorului si afişarea unui mesaj.


<html>
<head><t i t l e>S a l u t</ t i t l e></head>
<body>
<h1>
Salut ,
<s c r i p t l a n g u a g e=” j a v a s c r i p t ”>
nume=window . prompt ( ” I n t r o d u c e ţ i
numele dumneavoastră : ” , ” ” ) ;
document . w r i t e ( nume ) ;
</ s c r i p t> ! Ce mai f a c i ?
</h1>
</body>
</html>

5.9 Instrucţiunea if
• Folosită pentru luarea unei decizii ı̂n legătură cu modul ulterior de execuţie
al programului.
if ( expresie )
instructiune1 ;
else
instructiune2 ;

• Se evaluează expresia ca o condiţie booleană. Dacă este adevărată se va


executa instrucţiune1, altfel se va executa instrucţiune2.

• Ramura else este opţională.

• Pot exista instrucţiuni if-else imbricate şi ı̂n acest caz unui else i se asociază
primul if dinaintea lui care nu are else (şi nu este inclus ı̂ntr-un bloc).
i f ( n%2 == 0 )
par = true ;
else
par = f a l s e ;
62 CAPITOLUL 5. DESCRIERE: LIMBAJUL JAVASCRIPT (I)

5.10 Instrucţiunea switch


• Folosită pentru luarea unei decizii pe baza mai multor variante
switch ( e x p r e s i e ) {
case v a l 1 : i n s t r u c t i u n i 1 ; break ;
case v a l 2 : i n s t r u c t i u n i 2 ; break ;
....................
case v a l n : i n s t r u c t i u n i n ; break ;
default : i n s t r u c t i u n i i m p l i c i t e ;
}

• Se evaluează expresia. Valoarea ei se compară pe rând cu constantele


val1, val2, ..., valn. Se va executa instrucţiunea corespunzătoare con-
stantei egale cu valoarea expresiei. Instrucţiunea break este opţională.
Ea forţează programul ca după execuţia unei ramuri case sa se treacă la
instrucţiunea care urmează ı̂n program după switch. În caz contrar s-ar
executa instrucţiunea care apare pe ramura case care urmează după cea
executată. Ramura default este opţională, ea fiind selectată dacă nici o
altă ramură nu a fost selectată.
var s i r=“ S a l u t ” , a=0,b=0, c =0, a l t e =0;
f o r ( var i =0; i <s i r . l e n g t h ; i ++) // s i r . l e n g t h r e t u r n e a z a
lungimea s i r u l u i
switch ( s i r . charAt ( i ) ) {
// s i r . charAt ( i ) r e t u r n e a z a c a r a c t e r u l de pe
p o z i t i a i din s i r
case ” a ” : a++; break ;
case ”b” : b++; break ;
case ” c ” : c++; break ;
default : a l t e ++;
}

5.11 Instrucţiunea while


• Permite execuţia repetată a unei instrucţiuni
while ( e x p r e s i e )
instructiune ;

• Se evaluează expresia ca o condiţie booleană. Dacă este adevărată se exe-


cută instrucţiunea din buclă şi se reia bucla, altfel se continuă programul
cu instrucţiunea de după WHILE.
var n=14 , s =0, i =0;
while ( i<=n ) {
s+=i ;
i ++;
}
5.12. INSTRUCŢIUNEA DO-WHILE 63

5.12 Instrucţiunea do-while


• Permite execuţia repetată a unei instrucţiuni
do
instructiune ;
while ( e x p r e s i e ) ;

• Se execută instrucţiunea din buclă. Se evaluează expresia ca o condiţie


booleană. Dacă este adevarată se reia bucla, altfel se continuă programul
cu instrucţiunea de după do-while.
var n=14 , s =0, i =0;
do {
s+=i ;
i ++;
} while ( i<=n )

5.13 Instrucţiunea for


• Permite execuţia repetată a unei instrucţiuni
for ( e x p r e s i e i n i t i a l i z a r e ; e x p r e s i e c o n t i n u a r e ;
expresie actualizare )
instructiune ;

• Se evaluează expresie iniţializare. Se evaluează expresie continuare ca o


condiţie booleană.

• Dacă este adevarată se execută instrucţiunea din buclă, se evaluează expre-


sie actualizare şi se reia bucla, altfel se continuă programul cu instrucţiunea
de după for.

• Toate cele trei expresii sunt opţionale (o expresie continuare vidă are va-
loarea true), dar separatorul ”;” este obligatoriu.
var n=14 , f =1;
f o r ( var i =1; i<=n ; i ++)
f ∗= i ;

5.14 Instrucţiunile break şi continue


• Produc ı̂ntreruperea iteraţiei curente ı̂ntr-o buclă

• După execuţia lui break programul va continua cu prima instrucţiune care


urmează după buclă.
64 CAPITOLUL 5. DESCRIERE: LIMBAJUL JAVASCRIPT (I)

var s =0;
f o r ( var i =1; i <=5; i ++) {
i f ( i ==3) break ; // cand i = 3 , b u c l a s e
intrerupe
s += i ;
}
// a i c i s = 1 + 2 = 3

• După execuţia lui continue, programul continuă cu reevaluarea condiţiei


de ciclare a buclei (ı̂n cazul lui for, se execută mai ı̂ntâi expresia de actu-
alizare).
var s =0;
f o r ( var i =1; i <=5; i ++) {
i f ( i ==3) continue ; // cand i = 3 , i t e r a t i a s e
intrerupe ;
// b u c l a c o n t i n u a
s += i ;
}
// a i c i s = 1 + 2 + 4 + 5 = 12

5.15 Funcţii
• funcţie este un grup de declaraţii şi instrucţiuni, grupate sub un nume
comun.
f u n c t i o n n u m e f u n c t i e ( par1 , par2 , . . . , parN ) //
antetul functiei
{
d e c l a r a t i i ; // c o r p u l f u n c t i e i
instructiuni ;
}

• Funcţiile se pot declara oriunde ı̂n interiorul unui bloc ¡script¿, dar nu ı̂n
interiorul altei funcţii sau structuri de control.
• Numele unei funcţii trebuie să fie unic ı̂ntr-un program.
• Declaraţiile şi instrucţiunile funcţiei sunt grupate ı̂ntre acolade.
• Variabilele declarate ı̂n interiorul unei funcţii sunt variabile locale (funcţiei
respective).
• Parametrii din antetul funcţiei formează lista parametrilor formali ai funcţiei.
• Parantezele din antetul funcţiei sunt obligatorii după numele funcţiei, chiar
dacă lista parametrilor formali este vidă.
• funcţie se apelează prin numele ei urmat de valorile lor pentru parametrii
funcţiei
5.16. TIPURI DE DATE DE BAZĂ 65

n u m e f u n c t i e ( v al1 , va2 , . . . , valN )

• Valorile folosite la apelul funcţiei formează lista parametrilor actuali (sau


reali) ai funcţiei.
• Parantezele la apelul funcţiei sunt obligatorii dupa numele functiei, chiar
daca lista parametrilor actuali este vidă.
• Parametrii formali care nu au o valoarea corespondentă sunt iniţializaţi la
apelul funcţiei cu Undefined.
• Funcţiile pot să returneze (să ı̂ntoarcă) un rezultat ı̂n programul sau
funcţia care le apelează prin intermediul instrucţiunii return.
f u n c t i o n max( a , b )
{
i f ( a>b )
return a ;
else
return b ;
}

f u n c t i o n modul ( x )
{
i f ( x<0)
return −x ;
return x ;
}

• Parametri funcţiilor sunt transmişi prin valoare. La apel se face o copie a


parametrului transmis, iar funcţia lucrează cu copia.

5.16 Tipuri de date de bază


• Number
– numere ı̂ntregi: 16 (un număr ı̂n baza 10), 016 (un număr ı̂n baza 8),
0x16 (un număr ı̂n baza 16)
x = 10;

– numere reale: 10.3 (adică 10.3), 10.3e1 (adică 103), 10.3e-1 (adică
1.03)
x = 10.3

– se pot folosi constantele MIN VALUE, MAX VALUE, POSITIVE INFINITY,


NEGATIVE INFINITY, NaN
x = Number .MAX VALUE
66 CAPITOLUL 5. DESCRIERE: LIMBAJUL JAVASCRIPT (I)

• Boolean

– literalii true şi false (cu litere mici) au semnificaţia de adevărat şi
fals.
x = true

– orice număr diferit de 0 şi orice şir de caractere nevid este interpretat
ca valoarea logică true.
x = 2 ; // a d i c ă x == t r u e e s t e a d e v ă r a t ă
x = “” ; // a d i c ă x == t r u e e s t e f a l s ă

• Undefined, Null

– O variabilă neiniţializată are valoarea Undefined.


– O variabilă inexistentă are valoarea Null.

• String (şir de caractere)

– se reprezintă ı̂n JavaScript ı̂ntre ghilimele sau apostrofuri (şirul vid


este reprezentat prin ””)
– pot fi reprezentate caractere speciale prin construcţii escape: \b (ba-
ckspace); \n (new line); \t (tab); \’ (apostrof); \” (ghilimele).

• Object, Function, List, Reference şi Completion.

– Valorile de tip Reference, List şi Completion sunt utilizate ca rezul-


tate intermediare ı̂n cadrul evaluării expresiilor şi nu pot fi stocate
de proprietăţile vizibile ale obiectelor.

5.17 Tipuri de date String


• Metode de clasă

String.parseFloat(s) - returnează un număr real corespunzător şirului


s

• când este ı̂ntâlnit un caracter care nu poate face parte dintr-un număr,
restul caracterelor sunt ignorate

String.parseInt(s, b) - returnează un număr ı̂ntreg corespunzător şirului


s

• b este baza de numeraţie (implicit este 10)

• când este ı̂ntâlnit un caracter care nu poate face parte dintr-un număr,
restul caracterelor sunt ignorate

• Dacă s este un sir de caractere, putem apela următoarele metode de obiect

s.length – proprietate care indică numărul de caractere pe care le conţine


şirul
5.18. TIPURI DE DATE MATH 67

s.toLowerCase() – returnează s cu minuscule ı̂n loc de majuscule


s.toUpperCase() – returnează s cu majuscule ı̂n loc de minuscule
s.charAt(poz) – returnează caracterul din s de la poziţia poz (ı̂ncepând
de la 0)
s.substring(pozi,pozf ) - returnează subşirul dintre poziţiile pozi şi pozf

• dacă pozi¿pozf se face apelul substring(pozf, pozi)

• dacă pozf¿sir.length sau lipseşte se returnează subşirul până la sfârşitul


şirului

s.indexOf(subsir, poz) - returnează poziţia primei apariţii a subşirului.

• poz indică poziţia de la care ı̂ncepe căutarea (implicit este 0)

• dacă subşirul nu este găsit se returnează valoarea -1.

s.lastIndexOf(subsir, poz) – similar cu indexOf, dar căutare se face de


la sfârşit către ı̂nceput.

• Dacă s este un şir de caractere, putem apela următoarele metode de obiect

s.bold() – returnează s scris ı̂n marcajul hbi


s.fontcolor(culoare) - returnează s scris ı̂n marcajul hfont color=”
culoare”i
s.italics() – returnează s scris ı̂n marcajul hii
s.strike() – returnează s scris ı̂n marcajul h strike i
s.sup() – returnează s scris ı̂n marcajul hsupi
s.sub() – returnează s scris ı̂n marcajul hsubi
s.big() – returnează s scris ı̂n marcajul hbigi
s.small() – returnează s scris ı̂n marcajul hsmalli
s.fixed() – returnează s scris cu litere monospaţiate
s.fontsize(dim) – returnează s scris ı̂n marcajul hfont size =“dim”i

document . w r i t e ( “ S a l u t ” . f o n t s i z e ( 5 ) . f o n t c o l o r ( “ b l u e ” ) .
bold ( ) ) ;

5.18 Tipuri de date Math


Math.abs(x) – returnează modulul numărului x

Math.sqrt(x) – returnează rădăcina pătrată a numărului x

Math.power(x,y) – returnează xy

Math.sin(x) – returnează sinusul unghiului x, exprimat ı̂n radiani

Math.cos(x), Math.tan(x) - pentru cosinus şi tangentă


68 CAPITOLUL 5. DESCRIERE: LIMBAJUL JAVASCRIPT (I)

Math.asin(x) – returnează arcsinusul numărului x

Math.acos(x), Math.atan(x) - pentru arccosinus şi arctangentă

Math.round(x) – returnează cel mai apropriat ı̂ntregul de numărul x

Math.floor(x) – returnează cel mai mare ı̂ntregul mai mic decât x

Math.ceil(x) – returnează cel mai mic ı̂ntregul mai mare decât x

Math.exp(x) – returnează calculează ex

Math.log(x) – returnează logaritmul natural al numărului x

Math.random() – returnează un număr aleator din intervalul [0,1)

Math.min(x,y) – returnează minimul dintre numerele x şi y

Math.max(x,y) – pentru maxim

5.19 Tipuri de date Date


• Permite lucrul cu date calendaristice şi ore.

– Zilele săptămânii sunt numerotate de la 0 la 6.


– Lunile anului se numără de la 0 la 11.

• Dacă d este un obiect Date

d.getDate() - returnează ziua din lună (intre 1 si 31)


d.getDay() - returnează ziua din saptamana (intre 0 şi 6)
– 0=Duminică, 1=Luni, 2=Marţi, 3=Miercuri, ..., 6=Sâmbătă
d.getFullYear() - returnează anul, reprezentat pe 4 cifre
d.getHours() - returnează ora din zi (ı̂ntre 0 si 23)
d.getMinutes() - returnează minutele din ora (ı̂ntre 0 si 59)
d.getSeconds() - returnează secundele din minut (ı̂ntre 0 si 59)
d.getMonth() - returnează luna din an (ı̂ntre 0 si 11)

var a z i=new Date ( ) ; // c r e e a z ă un o b i e c t cu d a t a ş i


ora c u r e n t ă
var d=new Date ( ” September 1 5 , 2002 ” ) ; // d a t a
s p e c i f i c a t ă ı̂ n ş i r
var d1=new Date ( 0 5 , 1 , 0 , 1 5 , 3 0 , 2 5 ) ; // 1 f e b .
2005 , ora 1 5 : 3 0 : 2 5
5.20. EXEMPLE 69

5.20 Exemple
1. Scrieţi un script care testează paritatea unui număr introdus de la tasta-
tură.
<html>
<head><t i t l e >J a v a S c r i p t </ t i t l e ></head>
<body>
< s c r i p t l a n g u a g e=” J a v a S c r i p t ”>
var i ;
i = window . prompt ( ” I n t r o d u c e t i un numar
intreg : ”) ;
i f ( i % 2 == 0 )
document . w r i t e ( ”Numarul ” + i + ”
e s t e par . ” ) ;
else
document . w r i t e ( ”Numarul ” + i + ” nu
e s t e par . ” ) ;
</ s c r i p t >
</body>
</html>

2. Scrieţi un script care calculează n! cu while.


<html>
<head><t i t l e >J a v a S c r i p t </ t i t l e ></head>
<body>
< s c r i p t l a n g u a g e=” J a v a S c r i p t ”>
var i = 1 , n f a c t = 1 , n ;
n = window . prompt ( ” I n t r o d u c e t i un numar
intreg : ”) ;
while ( i <= n ) {
n f a c t ∗= i ;
++i ;
}
mesaj = n+” ! = ” + n f a c t ;
document . w r i t e ( mesaj . f o n t c o l o r ( ” b l u e ” ) ) ;
</ s c r i p t >
</body>
</html>

3. Scrieţi un script care calculează n! cu do-while.


<html>
<head><t i t l e >J a v a S c r i p t </ t i t l e ></head>
<body>
< s c r i p t l a n g u a g e=” J a v a S c r i p t ”>
var i = 1 , n f a c t = 1 , n ;
n = window . prompt ( ” I n t r o d u c e t i un numar
intreg : ”) ;
do {
70 CAPITOLUL 5. DESCRIERE: LIMBAJUL JAVASCRIPT (I)

n f a c t ∗= i ;
++i ;
} while ( i <= n ) ;
document . w r i t e ( n+” ! = ” + n f a c t ) ;
</ s c r i p t >
</body>
</html>

4. Scrieţi un script care calculează n! cu for.


<html>
<head><t i t l e >J a v a S c r i p t </ t i t l e ></head>
<body>
< s c r i p t l a n g u a g e=” J a v a S c r i p t ”>
var i , n , n f a c t = 1 ;
n = window . prompt ( ” I n t r o d u c e t i un numar
intreg : ”) ;
f o r ( i =1; i<=n ; ++i )
n f a c t ∗= i ;
mesaj = n+” ! = ” + n f a c t ;
document . w r i t e ( mesaj . f o n t s i z e ( ” 15 ” ) ) ;
</ s c r i p t >
</body>
</html>

5. Scrieţi un script care calculează cmmdc a două numere a şi b introduse de


la tastatură.
<html>
<head><t i t l e >J a v a S c r i p t </ t i t l e ></head>
<body>
< s c r i p t l a n g u a g e=” J a v a S c r i p t ”>
var a , b , ta , tb ;
a = window . prompt ( ” I n t r o d u c e t i p r i m u l
numar i n t r e g : ” ) ;
b = window . prompt ( ” I n t r o d u c e t i a l d o i l e a
numar i n t r e g : ” ) ;
t a = a ; tb = b ;
while ( t a != tb )
i f ( t a < tb )
tb −= t a ;
else
t a −= tb ;
mesaj = ”cmmdc( ” + a + ” , ” +b + ” ) = ” +
ta ;
document . w r i t e ( mesaj . b o l d ( ) ) ;
</ s c r i p t >
</body>
</html>
5.21. EXERCIŢII 71

6. Scrieţi un script care afişează numerele naturale mai mici decât 1000 care
sunt egale cu suma factorialelor cifrelor lor (145=1!+4!+5!=1+24+120).
<html>
<head><t i t l e >J a v a S c r i p t </ t i t l e ></head>
<body>
< s c r i p t l a n g u a g e=” J a v a S c r i p t ”>
function f a c t o r i a l (n) {
fact = 1;
while ( n > 1 )
f a c t ∗= n−−;
return f a c t ;
}
f o r ( var i =0; i <1000; ++i ) {
numar = i ; suma = 0 ;
while ( numar > 0 ) {
c i f r a = numar % 1 0 ;
numar = Math . f l o o r ( numar / 1 0 ) ;
suma += f a c t o r i a l ( c i f r a ) ;
}
i f ( suma == i )
document . w r i t e ( i + ”<br/>” ) ;
}
</ s c r i p t >
</body>
</html>

5.21 Exerciţii
1. Scrieţi un script care citeşte coeficienţii a, b, c ai ecuaţiei de gradul II şi
afişează rezultatul (se vor trata şi cazurile ecuaţie imposibilă, ecuaţie cu
număr infinit de soluţii, ecuaţie cu soluţii complexă)

2. Scrieţi o funcţie care primeşte ca parametru un număr n. Dacă n este


pătrat perfect, atunci funcţia returnează textul “DA”, formatat cu mar-
caje pentru afişare cu dimensiune 5 şi culoare verde; altfel, returnează
textul “NU”, formatat cu marcaje pentru afişare cu dimensiune 3 şi cu-
loare roşie.

3. Scrieţi un script care foloseşte funcţia cu un parametru citit de la tastatură


şi scrie ı̂n document rezultatul funcţiei.

4. Scrieţi o funcţie care primeşte un parametru de tip Date şi returnează un


mesaj de salut ı̂n funcţie de ora din acesta

• ı̂ntre 5 şi 11 – Bună dimineaţa


• ı̂ntre 12 şi 20 – Bună ziua
• ı̂ntre 21 şi 22 – Bună seara
• ı̂ntre 23 şi 4 – Noapte bună
72 CAPITOLUL 5. DESCRIERE: LIMBAJUL JAVASCRIPT (I)

Scrieţi un script care apelează această funcţie pentru data şi ora curentă
şi afişează rezultatul funcţiei.

5. Scrieţi o funcţie ce primeşte un parametru de tip Date şi scrieţi ı̂n docu-
ment marcajele necesare pentru afişarea unui calendar cu luna din para-
metru.
• scrieţi un script care apelează funcţia pentru data curentă.
• puteţi să folosiţi tabele pentru alinierea textului ca ı̂n exemplul de
mai jos. Poate să arate şi altfel:

5.22 Bibliografie
• Javascript tutorial: Javascript
Capitolul 6

Descriere: Limbajul
Javascript (II)

6.1 Resurse
• Pentru un tutorial Javascript online consultaţi: Javascript

6.2 Tipul Object


Un obiect JavaScript este privit ca o colecţie neordonată de proprietăţi, fiecare
proprietate având zero sau mai multe atribute. Proprietăţile pot conţine fie
alte obiecte, fie valori primitive sau metode. O valoare primitivă are unul dintre
tipurile fundamentale: Undefined, Null, Boolean, Number şi String.
< s c r i p t type=” t e x t / j a v a s c r i p t ”>
var t x t=”H e l l o World ! ”
document . w r i t e ( t x t . l e n g t h )
</ s c r i p t >

• un obiect are tipul de bază Object.


• metodă este o funcţie asociată unui obiect prin intermediul unei pro-
prietăţi.
• un obiect este compus din proprietăţi
• fiecare proprietate are un nume, o valoare şi o mulţime de atribute

p r o p r i e t a t e = < nume , v a l o a r e , a t r i b u t e >

Atributele proprietăţilor pot fi următoarele:


ReadOnly - ı̂ncercările de modificare a proprietăţii respective vor fi ignorate.
DontEnum - proprietatea nu poate fi enumerată de o construcţie for-in.
DontDelete - ı̂ncercările de a şterge proprietatea vor fi ignorate

73
74 CAPITOLUL 6. DESCRIERE: LIMBAJUL JAVASCRIPT (II)

Internal - proprietăţile declarate Internal nu posedă nume şi pot fi accesate ı̂n
mod direct. numele lor sunt ı̂ncadrate ı̂ntre [[ şi ]]: e.g. [[Class]]

Avem următoarele obiecte predefinite: Global, Object, Function, Array, String,


Boolean, Number, Math şi Date.

6.2.1 Instructiunea for . . . in


Instructiunea for .. in este utilizată pentru a parcurge elementele unui tablou
sau proprietatile unui obiect.
for ( variable in object )
{
code
}

Exemplu de utilizare pentru un tablou


<html>
<body>
< s c r i p t type=” t e x t / j a v a s c r i p t ”>
var x ;
var mycars = new Array ( ) ;
mycars [ 0 ] = ” Saab ” ;
mycars [ 1 ] = ” Volvo ” ;
mycars [ 2 ] = ”BMW” ;
f o r ( x i n mycars ) {
document . w r i t e ( mycars [ x ] + ”<br />”) ;
}
</ s c r i p t >
</body>
</html>

6.3 JavaScript HTML DOM


Document Object Model este o interfaţă folosită pentru manipularea documen-
telor structurate (e.g. un fişier HTML). Toate elementele HTML, inclusiv textul
specificat ı̂ntre marcaje şi atributele tagurilor pot fi accesate prin intermediul
DOM. HTML DOM este independent de platformă sau limbaj. În JavaScript,
pentru un obiect cu numele NumeObiect folosim:

• NumeObiect.NumeProprietate

• NumeObiect[”NumeProprietate”]

• NumeObiect.NumeMetoda(parametri)

Informaţii detaliate despre manipularea fiecărui obiect DOM pot fi găsite la


adresa http://www.w3schools.com/htmldom/dom reference.asp.
6.3. JAVASCRIPT HTML DOM 75

6.3.1 Obiecte DOM implicite

navigator • proprietăţi care furnizează numele şi versiunea navigatorului


– appName
– appVersion
• lista de module plug-in (extensii) ale navigatorului

window • obiectul aflat la nivelul cel mai ı̂nalt ı̂n ierarhia obiectelor dispo-
nibile
• proprietăţile lui se aplică ı̂ntregii ferestre ı̂n care se afişează docu-
mentul
• pentru paginile având cadre, fiecărui cadru ı̂i corespunde un obiect
window

document • proprietăţile bazate pe conţinutul documentului (titlu, fundal,


legături, formulare etc.)

location • se referă la localizarea paginii (pe baza URI-ului).

history • conţine proprietăţi reprezentând adresele Web care au fost vizi-


tate de utilizator
76 CAPITOLUL 6. DESCRIERE: LIMBAJUL JAVASCRIPT (II)

6.3.2 Obiectul window


• Proprietăţile (window.proprietate):
closed - indică dacă o fereastră este ı̂nchisă sau nu
defaultStatus - specifică mesajul implicit de pe bara de stare
document - conţine informaţii despre documentul ı̂ncărcat
frames - tablou desemnând cadrele dintr-o fereastră
history - conţine istoricul navigării
length - indică numărul de cadre din fereastră
location - oferă informaţii despre URL-ul curent
name - desemnează numele unic al ferestrei
parent - indică fereastra-părinte a ferestrei curente
scrollbars - indică starea barelor de defilare (scroll)
status - conţine textul care este afişat pe linia de stare a ferestrei navi-
gatorului
outerheight şi outerwidth – dimensiunile ferestrei cu bordură, bara de
titlu, status bar, etc.
• Metode (window.metoda) :
open(URL, nume) - deschide o nouă fereastră de navigare către adresa
specificată
close() - ı̂nchide o fereastră de navigare
alert(mesaj) - afişează o fereastră de dialog conţinând mesajul specificat
confirm(mesaj) - afişează o fereastră de confirmare prevăzută cu bu-
toane OK şi Cancel, şi returnează true sau false
prompt(mesaj, valoare implicită) - afişează o fereastră pentru intro-
ducerea unei valori
print() - tipareşte ferestra sau cadrul asociat obiectului window.
setInterval(expresie, dt) - evaluează expresia dată la fiecare dt milise-
cunde (valoarea intoarsă de funcţie poate fi folosită cu funcţia clea-
rInterval(val) pentru a anula acest temporizator).
setTimeout(expresie, dt) - evaluează expresia dată după dt milise-
cunde

Exemplu (afişare mesaj ı̂n status bar)


<html>
<body>
< s c r i p t type=” t e x t / j a v a s c r i p t ”>
window . s t a t u s =”Some t e x t i n t h e s t a t u s bar ! ! ”
</ s c r i p t >
<p>Look a t t h e t e x t i n t h e s t a t u s b a r .</p>
</body>
</html
6.3. JAVASCRIPT HTML DOM 77

6.3.3 Obiectul document


• Proprietăţi (document.proprietate): :
anchors[ ] - tablou conţinând ancorele documentului
applets [ ] - tablou conţinând applet-urile documentului
forms [ ]- tablou conţinând formularele documentului
images [ ] - tablou conţinând imaginile documentului
links [ ] - tablou conţinând legaturile documentului
bgColor - specifică culoarea implicită pentru fundal
fgColor - specifică culoarea implicită a textului
linkColor - specifică culoarea implicită a legăturilor nevizitate
alinkColor - specifică culoarea implicită a legăturilor active
vlinkColor - specifică culoarea implicită a legăturilor vizitate
lastModified - furnizează data şi timpul ultimei modificări a documen-
tului
referrer - specifică URL-ul documentului care a apelat prezentul docu-
ment
title - conţine titlul documentului
URL - furnizează URL-ul documentului
domain - furnizează domeniul serverului Web care a expediat documen-
tul
• Metodele write() şi writeln() generează cod HTML care va fi inclus ı̂n
cadrul documentului, astfel se poate modifica ı̂n mod dinamic o pagină
Web.
close()
getElementById() – ı̂ntoarce o referinţă la primul obiect cu id-ul spe-
cificat
getElementsByName()
getElementsByTagName()
write()
writeln()

<html>
<head>
< s c r i p t type=” t e x t / j a v a s c r i p t ”>
func tion getValue ( ) {
var x=document . getElementById ( ” myHeader ” )
a l e r t ( x . innerHTML )
}
</ s c r i p t >
</head>
<body>
78 CAPITOLUL 6. DESCRIERE: LIMBAJUL JAVASCRIPT (II)

<h1 i d=”myHeader” o n c l i c k =”g e t V a l u e ( ) ”>This i s a


header </h1>
<p>C l i c k on t h e h e a d e r t o a l e r t i t s value </p>
</body>
</html>

Exemplu (proprietăţi de tip document)

<html>
<head>
</head>
<body>
<h1>Fundal v a r i a b i l </h1>
<s c r i p t >
<!−−
i f ( window . c o n f i r m ( ’ Este lumina p u t e r n i c a i n
camera ? ’ ) ) {
document . bgColor =’ blue ’ ;
document . f g C o l o r =’ y e l l o w ’ ;
}
//−−>
</ s c r i p t >
</body>
</html>
6.3. JAVASCRIPT HTML DOM 79

6.3.4 Alte obiecte predefinite


• window.history

– permite navigarea prin istoricul paginilor vizitate folosind metodele


back si forward

• window.location

– permite manipularea locaţiilor

• navigator

– furnizează informaţii despre navigator şi mediul său de rulare, prin in-
termediul proprietăţilor appCodeName, appName, appVersion, lan-
guage, platform, userAgent.

Exemplu

<html>
<head></head>
<body><h1>L e g a t u r i cu j a v a s c r i p t </h1>
<a h r e f =” j a v a s c r i p t : h i s t o r y . back ( ) ”>I n a p o i </a>
<a h r e f =” j a v a s c r i p t : h i s t o r y . f o r w a r d ( ) ”> I n a i n t e </a
>
</body>
</html>
80 CAPITOLUL 6. DESCRIERE: LIMBAJUL JAVASCRIPT (II)

Exemplu (obiectul location)

<html>
<head>
</head>
<body>
<s c r i p t >
document . w r i t e ( ” l o c a t i o n . h r e f = ” + location .
h r e f + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . p r o t o c o l = ” +
l o c a t i o n . p r o t o c o l + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . h o s t = ” + location .
h o s t + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . hostName = ” +
l o c a t i o n . hostName + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . p o r t = ” + location .
p o r t + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . pathname = ” +
l o c a t i o n . pathname + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . hash = ” + location .
hash + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . s e a r c h = ” +
l o c a t i o n . s e a r c h + ”<br >”) ;
</ s c r i p t >
</body>
</html>

Exemplu (obiectul navigator)

<html>
<head>
</head>
<body>
<s c r i p t >
6.4. EVENIMENTE 81

document . w r i t e (”<p>Numele n a v i g a t o r u l u i : ” +
n a v i g a t o r . appName + ” ” +
n a v i g a t o r . appVersion ) ;
document . w r i t e (”<p>P l a t f o r m a : ” + n a v i g a t o r .
platform ) ;
document . w r i t e (”<p>Agent−u t i l i z a t o r : ” +
n a v i g a t o r . userAgent ) ;
</ s c r i p t >
</body>
</html>

6.4 Evenimente
Unele marcaje oferă atribute pentru ataşarea de proceduri pentru evenimente
folosind sintaxa:
<marcaj onEveniment = ” cod J a v a S c r i p t ”>

unde Eveniment poate fi:


• pentru majoritatea marcajelor: KeyDown, KeyUp, KeyPress, MouseOver,
MouseOut, MouseMove, MouseUp, MouseDown, Click, DblClick, Dra-
gDrop, etc.
• pentru legături şi elemente de formular: Blur, Focus, etc.
• pentru body şi frameset: Load, Unload, etc.
Exemple (evenimente)
<html>
<head>
< t i t l e >Evenimente d i v e r s e </ t i t l e >
</head>
<body onLoad=” s e t I n t e r v a l ( ’ a l e r t ( \ ’ e n e r v a n t mesaj ,
nu ? ! \ ’ ) ’ , 5 0 0 0 ) ”
onUnload=” a l e r t ( ’ La r e v e d e r e ’ ) ”>
<img s r c =” t e s t . j p g ” o n C l i c k=”c o n f i r m ( ’ Mergi mai
d e p a r t e ’ ) ”>
<button o n C l i c k=” l o c a t i o n . h r e f =’ h t t p : / /www. g o o g l e
. ro ’”> Google </button>
</body>
</html>

Exemple (image rollover)


<p onMouseOver=” t h i s . s t y l e . f o n t S i z e = ’25 pt ’ ”
onMouseOut=” t h i s . s t y l e . f o n t S i z e = ’12 pt ’”> S a l u t </p>

<img s r c =” g i f . png” onMouseOver=” t h i s . s r c =’png . png ’ ”


onMouseOut=” t h i s . s r c =’ g i f . png ’”>
82 CAPITOLUL 6. DESCRIERE: LIMBAJUL JAVASCRIPT (II)

6.5 Javascript Cookies


Un cookie este o variabilă care este salvată pe calculatorul vizitatorilor paginilor
web. De fiecare dată când utilizatorul va solicita aceaşi pagină, browser-ul va
trimite şi cookie-ul. Programarea unui cookie se poate face ı̂n diverse variante.
Exemple de cookies:

• cookie pentru nume

• cookie pentru parolă

• cookie pentru dată

Următoarea funcţie JavaScript este destinată programării unui cookie, şi utili-
zează obiectul document.cookie:
6.5. JAVASCRIPT COOKIES 83

f u n c t i o n s e t C o o k i e ( c name , v alue , e x p i r e d a y s ) {
var e x d a t e=new Date ( )
e x d a t e . s e t D a t e ( e x d a t e . getDate ( )+e x p i r e d a y s )
document . c o o k i e=c name+ ”=” +e s c a p e ( v a l u e )+
( ( e x p i r e d a y s==n u l l ) ? ”” : ” ; e x p i r e s=”+e x d a t e .
toGMTString ( ) )
}

Funcţia va fi utilizată astfel:


var expdate = new Date ( ) ;
expdate . setTime ( expdate . getTime +(24∗60∗60∗1000) ) ;
s e t C o o k i e ( ” c u l o a r e ” , ” v e r d e ” , expdate ) ;

Funcţia pentru accesarea unui cookie este următoarea:


f u n c t i o n g e t C o o k i e ( c name )
{
i f ( document . c o o k i e . l e n g t h >0)
{
i f ( c s t a r t !=−1)
{
c s t a r t=c s t a r t + c name . l e n g t h + 1
c e n d=document . c o o k i e . indexOf ( ” ; ” , c s t a r t )
i f ( c e n d==−1) c e n d=document . c o o k i e . l e n g t h
r e t u r n u n e s c a p e ( document . c o o k i e . s u b s t r i n g (
c s t a r t , c end ) )
}
}
r e t u r n ””
}

Pentru a testa dacă un cookie a fost setat definim funcţia getCookie


f u n c t i o n checkCookie ( ) {
v a l o a r e=g e t C o o k i e ( ’ c u l o a r e ’ )
i f ( v a l o a r e != n u l l && v a l o a r e !=””) {
a l e r t ( ’ C u l o a r e a e s t e ’+ v a l o a r e + ’ ! ’ ) }
else {
v a l o a r e=prompt ( ’ I n t r o d u c e t i c u l o a r e a : ’ , ” ” )
i f ( v a l o a r e != n u l l && v a l o a r e !=””)
{
setCookie ( ’ culoare ’ , valoare , ’365 ’)
}
}
}

Pentru a testa cookie-ul apelăm funcţia checkCookie folosind evenimentul


onLoad.
<body onLoad=”c h e c k C o o k i e ( ) ”>
</body>
84 CAPITOLUL 6. DESCRIERE: LIMBAJUL JAVASCRIPT (II)

6.6 Validare Javascript


Limbajul poate fi utilizat pentru validarea datelor introduse cu ajutorul formu-
larelor HTML.
Următorul exemplu verifică dacă utlizatorul a introdus o adresă de email şi
aceasta este validă.
<html>
<head>
< s c r i p t type=” t e x t / j a v a s c r i p t ”>
function validate email ( field , alerttxt ){
with ( f i e l d ) {
apos=v a l u e . indexOf ( ”@” )
d o t p o s=v a l u e . l a s t I n d e x O f ( ” . ” )
i f ( apos < 1 | | dotpos−apos <2)
{
a l e r t ( a l e r t t x t ) ; return f a l s e }
else
{
return true
}
}
}
function validate form ( thisform ){
with ( t h i s f o r m ) {
i f ( v a l i d a t e e m a i l ( email , ” Not a v a l i d
e−m a i l a d d r e s s ! ” )==f a l s e )
{
email . focus () ;
return f a l s e
}
}
}
</ s c r i p t >
</head>
<body>
<form a c t i o n =”submitpage . htm”
onsubmit=”r e t u r n v a l i d a t e f o r m ( t h i s ) ; ”
method=”p o s t”>
Email : <i n p u t type=” t e x t ” name=”e m a i l ” s i z e
=”30”>
<i n p u t type=”submit ” v a l u e=”Submit”>
</form>
</body>
</html>

6.7 Exerciţii
1. Scrieţi o funcţie javascript pentru afişarea unui ceas ı̂ntr-o pagină web.
6.8. BIBLIOGRAFIE 85

2. Creaţi un formular html care să conţină câmpurile nume şi prenume, data
naşterii, sex, stare civilă, ocupaţie, email, hobby-uri şi un buton ”Trimite
informaţii”. Câmpurile nume, prenume, data naşterii şi sex sunt obligato-
riu de completat, celelalte sunt opţionale. Asiguraţi-vă că informaţiile din
câmpurile obligatorii sunt plauzibile. În cazul ı̂n care utilizatorul nu a com-
pletat toate informaţiile obligatorii, afişaţi un mesaj ı̂n care să atenţionaţi
utilizatorul şi setaţi focusul pe primul câmp rămas invalid.
3. Creaţi un formular cu două câmpuri pentru introducerea greutăţii (ı̂n kilo-
grame) şi ı̂nălţimii (ı̂n metri), şi un buton care la apăsare afişează indicele
de masă corporală (IMC=G/h2) şi un comentariu (dacă IMC¡18,5 – sub-
ponderabilitate, 18.5¡IMC¡=22 – slab, 20¡IMC¡=24.9 – normal, 25¡IMC¡=30
– supraponderabilitate, IMC¿=30 – obezitate).
4. Creaţi o pagină ı̂n care să realizaţi un slide show cu imagini cu lăţime fixă
şi butoane de navigare ı̂nainte şi ı̂napoi printre aceste imagini.
5. Creaţi un formular ı̂n care sunt afişate trei text-box-uri ı̂n care să introduceţi
temperatura ı̂n grade Celsius, ı̂n grade Fahrenheit şi ı̂n grade Kelvin. Când
se modifică valoarea din unul dintre comboboxuri, celelalte se actualizează
corespunzător.

6. Implementaţi un cronometru pe o pagină web (Indicaţie: Creaţi un for-


mular cu un text şi cu butoanele start, stop şi reset).
7. Utilizând funcţiile setCookie şi getCookie prezentate ı̂n tutorial, creaţi
o pagină Web care să permită setarea unui cookie prin preluarea de la
utilizator, ı̂ntr-o formă, a conţinutului acestuia. Afişaţi cookie-ul astfel
setat. Creaţi o altă pagină Web care utilizează informaţiile din cookie
pentru a indica selecţiile implicite ale utilizatorului pe o anumită formă
(eventual aceeaşi).

6.8 Bibliografie
• Javascript tutorial: Javascript
86 CAPITOLUL 6. DESCRIERE: LIMBAJUL JAVASCRIPT (II)
Capitolul 7

Descriere: Limbajul
Javascript (III)

7.1 Resurse
• Pentru un tutorial Javascript online consultaţi: Javascript

7.2 Meniu expandabil ı̂n JavaScript


Folosind Javascript şi CSS putem realiza un meniu de tip tree view.

Pentru a refolosi codul Javascript, acesta va fi salvat ı̂ntr-un fişier cu extensia .js.
Scriptul trebuie inclus ı̂n documentul XHTML. Aspectul meniului este controlat
prin intermediul unui fişier CSS.
<head>
< s c r i p t s r c =”l i s t m e n u . j s ” type=” t e x t / j a v a s c r i p t ”></
script >
<l i n k r e l =” s t y l e s h e e t ” type=” t e x t / c s s ” h r e f =”l i s t m e n u
. c s s ” />
</head>

Elementele meniului vor fi definite sub forma unei liste neordonate.

87
88 CAPITOLUL 7. DESCRIERE: LIMBAJUL JAVASCRIPT (III)

<ul>
< l i c l a s s =”t r e e n o d e ”>
<a h r e f =””>Top L e v e l Item</a>
<ul>
< l i ><a h r e f =””> L i s t Item</a></ l i >
< l i ><a h r e f =””> L i s t Item</a></ l i >
< l i ><a h r e f =””> L i s t Item</a></ l i >
< l i ><a h r e f =””> L i s t Item</a></ l i >
</ul>
</ l i >
</ul>

Dacă dorim ca un nod să fie deschis, trebuie să modificăm class=”treenode”
ı̂n class=”treenodeopen”. Codul JavaScript şi regulile CSS sunt prezentate ı̂n
continuare.

7.2.1 Fişierul listmenu.css

. treemenu
{
margin : 0px 20 px ;
padding : 10 px ;
l i s t −s t y l e : none ;
background−c o l o r : #EEE ;
b o r d e r : 1px s o l i d #000;
width : 200 px ;
}
. treemenu UL
{
l i s t −s t y l e : none ;
margin : 0px 10 px ;
padding : 0px 10 px ;
}
. treemenu LI
{
display : inline ;
}
. treemenu A
{
display : block ;
padding− l e f t : 12 px ;
t e x t −d e c o r a t i o n : none ;
}
. treemenu . t r e e o p e n
{
background−image : u r l ( ’ open . g i f ’ ) ;
background−r e p e a t : no−r e p e a t ;
background−p o s i t i o n : l e f t ;
}
7.2. MENIU EXPANDABIL ÎN JAVASCRIPT 89

. treemenu . t r e e c l o s e d
{
background−image : u r l ( ’ c l o s e d . g i f ’ ) ;
background−r e p e a t : no−r e p e a t ;
background−p o s i t i o n : l e f t ;
}

7.2.2 Fisierul listmenu.js


f u n c t i o n initMenus ( )
{
i f ( ! document . getElementsByTagName )
return ;
var aMenus = document . getElementsByTagName ( ” LI ” ) ;
f o r ( var i = 0 ; i < aMenus . l e n g t h ; i ++)
{
var m c l a s s = aMenus [ i ] . className ;
i f ( m c l a s s . indexOf ( ” t r e e n o d e ” ) > −1)
{
var submenu = aMenus [ i ] . c h i l d N o d e s ;
f o r ( var j = 0 ; j < submenu . l e n g t h ; j ++)
{
i f ( submenu [ j ] . tagName == ”A” )
{
submenu [ j ] . o n c l i c k = f u n c t i o n ( )
{
var node = t h i s . n e x t S i b l i n g ;
while (1)
{
i f ( node != n u l l )
{
i f ( node . tagName == ”UL” )
{
var d = ( node . s t y l e .
d i s p l a y == ” none ” )
node . s t y l e . d i s p l a y =
(d) ? ” block ”:”
none ” ;
t h i s . className = ( d ) ?
” treeopen ”:”
treeclosed ”;
return f a l s e ;
}
node = node . n e x t S i b l i n g ;
}
else
{
return f a l s e ;
}
90 CAPITOLUL 7. DESCRIERE: LIMBAJUL JAVASCRIPT (III)

}
return f a l s e ;
}
submenu [ j ] . className = ( m c l a s s .
indexOf ( ” open ” ) > −1) ? ” t r e e o p e n
”:” treeclosed ”;
}
i f ( submenu [ j ] . tagName == ”UL” )
submenu [ j ] . s t y l e . d i s p l a y = ( m c l a s s .
indexOf ( ” open ” ) > −1) ? ” b l o c k ” :
” none ” ;
}
}
}
}
window . o n l o a d = i n i t M e n u s ;

7.3 Slideshow
Următorul script va ı̂ncărca o serie de imagini realizând apoi o prezentare suc-
cesivă a acestora. Scriptul va fi salvat ı̂ntr-un fişier cu numele loading.js
f u n c t i o n changeOpac ( o p a c i t y , i d ) {
var o b j = document . getElementById ( i d ) ;
// IE /Win
o b j . s t y l e . f i l t e r = ” a l p h a ( o p a c i t y :”+ o p a c i t y +”) ” ;
// Older M o z i l l a and F i r e f o x
o b j . s t y l e . MozOpacity =o p a c i t y / 1 0 1 ;
// S a f a r i 1 . 2 , newer F i r e f o x and M o z i l l a , CSS3
obj . s t y l e . opacity = opacity /101;
// S a f a r i <1.2 , Konqueror
o b j . s t y l e . KHTMLOpacity = o p a c i t y / 1 0 0 ;
}
// i n t e r s c h i m b a i m a g i n i l e
f u n c t i o n blendimage ( d i v i d , imageid , i m a g e f i l e , m i l l i s e c )
{
var s p e e d = Math . round ( m i l l i s e c / 1 0 0 ) ;
var t i m e r = 0 ;
// f a c e i m a g i n e a t r a n s p a r e n t a
changeOpac ( 1 , i m a g e i d ) ;
// schimba i m a g i n e a
document . getElementById ( i m a g e i d ) . s r c = i m a g e f i l e ;
// f a d e i n
f o r ( i = 0 ; i <= 1 0 0 ; i ++) {
window . setTimeout ( ” changeOpac ( ” + i + ” , ’ ” +
imageid + ” ’) ” ,( timer ∗ speed ) ) ;
t i m e r ++;
}
}
7.3. SLIDESHOW 91

f u n c t i o n timedShow ( divID , imgID , obj , t r , timp ) {


setTimeout ( ” blendimage ( ’”+ divID +” ’ , ’”+ imgID +” ’ , ’”+ o b j
+” ’ , ’”+ t r +” ’) ” , timp ) ;
}
function slideshow ( tablou ) {
var temp=0;
f o r ( var i =0; i <100; i ++)
{
f o r ( var j =0; j <t a b l o u . l e n g t h ; j ++)
{
timedShow ( ’ b l e n d d i v ’ , ’ blendimage ’ , t a b l o u [ j
] , 2 0 0 0 , temp ) ;
temp+=9000;
}
}
}
Pentru a utiliza scriptul trebuie să specificăm sursele imaginilor din prezen-
tare, precum şi regulile CSS pentru ele. Vom utiliza un div cu id-ul blendimage
pentru a afişa prezentarea.
<head>
<s t y l e >
#blendimage
{
b o r d e r : 0 none ;
f i l t e r : a l p h a ( o p a c i t y =0) ;
−moz−o p a c i t y : 0 . 0 ;
opacity : 0;
}
. hidden
{
d i s p l a y : none ;
}
</ s t y l e >

< s c r i p t type=” t e x t / j a v a s c r i p t ” s r c =” l o a d i n g . j s ”></


script >

< s c r i p t type=” t e x t / j a v a s c r i p t ”>


<!−−
var i m a g i n i=new Array ( )
i m a g i n i [ 0 ] = ” photo1 . j p g ”
i m a g i n i [ 1 ] = ” photo2 . j p g ”
i m a g i n i [ 2 ] = ” photo3 . j p g ”
window . o n l o a d = f u n c t i o n ( ) {
slideshow ( imagini ) ;
}
//−−>
</ s c r i p t >
92 CAPITOLUL 7. DESCRIERE: LIMBAJUL JAVASCRIPT (III)

Figura 7.1: Obiectul XMLHttpRequest executând cereri ı̂n mod asincron

</head>
<body>
<d i v c l a s s =”hidden”>
<img s r c =”photo1 . j p g ” />
<img s r c =”photo2 . j p g ” />
<img s r c =”photo3 . j p g ” />
</div>
<d i v i d=”b l e n d d i v”>
<img s r c =”blank . j p g ” i d=”blendimage ” />
</div>
</body>

7.4 Introducere ı̂n AJAX


Ajax este o tehnologie relativ nouă, numele ei fiind prescurtarea de la Asyn-
chronous JavaScript and XML. Exemplele clasice de utilizare sunt Google Maps
(maps.google.com) sau Gmail (gmail.google.com). Conceptual, tehnologia se
bazează pe utilizarea de obiecte XMLHttpRequest.
Obiectele XMLHttpRequest pot fi folosite ı̂n cadrul paginilor web pentru a
gestiona ı̂n background comunicarea dintre browser şi server, fără a fi necesară
o ı̂ntreagă reı̂ncărcare a paginii.
1. O pagină web ı̂ncarcă o funcţie JavaScript.
2. Funcţia JavaScript creează un obiect XMLHttpRequest. Este definit un
URL şi parametrii pentru cererea HTTP.
3. Funcţia JavaScript ı̂nregistrează un callback handler care va fi invocat de
răspunsul HTTP.
7.4. INTRODUCERE ÎN AJAX 93

4. Funcţia JavaScript apelează metoda send a obiectului XMLHttpRequest,


care trimite o cerere HTTP la server.

5. Obiectul XMLHttpRequest cedează imediat controlul funcţiei JavaScript.


Utilizatorul poate să continue să folosească pagina web.

6. După un interval de timp, serverul HTTP ı̂ntoarce un răspuns, invocând


callback handler.

7. Handler-ul are acces la HTML DOM şi poate să actualize pagina fără să
ı̂ntrerupă utilizatorul din lucru.

Descrierea metodelor:

abort() Cancels the current request.

getAllResponseHeaders() Returns the complete set of HTTP headers as a


string.

getResponseHeader(headerName) Returns the value of the specified HTTP


header.

open(method,URL[,async[,userName[,pass]]]) Specifies the method, URL,


and other optional attributes of a request. The method parameter can
have a value of ”GET”, ”POST”, ”HEAD”, ”PUT”, ”DELETE”, or a va-
riety of other HTTP methods listed in the W3C specification. The URL
parameter may be either a relative or complete URL. The ”async” pa-
rameter specifies whether the request should be handled asynchronously
or not – ”true” means that script processing carries on after the send()
method, without waiting for a response, and ”false” means that the script
waits for a response before continuing script processing.

send(content) Sends the request.

setRequestHeader(label,value) Adds a label/value pair to the HTTP hea-


der to be sent.

Descrierea proprietăţilor:

onreadystatechange Specifies a reference to an event handler for an event


that fires at every state change.

readyState Returns the state of the object as follows:

• 0 = uninitialized
• 1 = open
• 2 = sent
• 3 = receiving
• 4 = loaded

responseText Returns the response as a string.

responseXML Returns the response as XML


94 CAPITOLUL 7. DESCRIERE: LIMBAJUL JAVASCRIPT (III)

status Returns the HTTP status code as a number (e.g. 404 for ”Not Found”
and 200 for ”OK”).

statusText Returns the status as a string (e.g. ”Not Found” or ”OK”).

Dacă folosim proprietatea responseText, vom obţine de la server cod XHTML


sub forma unui şir de caractere. Acesta poate fi apoi inserat ı̂n pagină folosind
innerHTML.

7.4.1 Exemplu AJAX

< s c r i p t type=” t e x t / j a v a s c r i p t ”>


var h t t p = f a l s e ;
// XMLHttpRequest a r e i m p l e m e n t a r i d i f e r i t e i n
M o z z i l a s i IE
i f ( n a v i g a t o r . appName == ” M i c r o s o f t I n t e r n e t E x p l o r e r
”)
{
h t t p = new ActiveXObject ( ” M i c r o s o f t .XMLHTTP” ) ;
}
else
{
h t t p = new XMLHttpRequest ( ) ;
}
// s e u t i l i z e a z a metoda HTTP GET p e n t r u a o b t i n e
continutul f i s i e r u l u i test . txt
function replace () {
h t t p . open ( ”GET” , ” t e s t . t x t ” , t r u e ) ;
h t t p . o n r e a d y s t a t e c h a n g e=f u n c t i o n ( ) {
i f ( h t t p . r e a d y S t a t e == 4 ) {
document . getElementById ( ’ t e x t ’ ) . innerHTML
= http . responseText ;
}
h t t p . send ( n u l l ) ;
}
</ s c r i p t >
<d i v i d=” t e x t ”>
Text i n i t i a l
</div>
<p><a h r e f =” j a v a s c r i p t : r e p l a c e ( ) ”>R ep l ac e Text</a></p>

7.5 Exerciţii
1. Pornind de la exemplul disponibil la adresa http://www.google.com/apis/maps/documentation/in
realizaţi o pagină web care să includă harta oraşului Piteşti de la Google
Maps.

2. Creaţi o pagină ı̂n care să realizaţi un slide show cu imagini cu lăţime fixă
şi butoane de navigare ı̂nainte şi ı̂napoi printre aceste imagini.
7.6. BIBLIOGRAFIE 95

3. Creaţi un formular ı̂n care sunt afişate trei textbox-uri ı̂n care să introduceţi
temperatura ı̂n grade Celsius, ı̂n grade Fahrenheit şi ı̂n grade Kelvin. Când
se modifica valoarea din unul dintre comboboxuri, celelalte se actualizează
corespunzător.
4. Să se programeze o pagină HTML ı̂n care clientul poate converti orice
sumă ı̂n lei ı̂n suma echivalentă ı̂n dolari USA şi ı̂n EURO. Se va prevedea
posibilitatea modificării cursului valutar.

5. Creaţi o pagină Web cu următoarele specificaţii: pentru fiecare produs se


cunosc preţul unitar şi cantitatea disponibilă. Operaţiile sunt:
• determinare valoare stoc
• determinare valoare stoc dacă preţul se modifica (+ sau -) cu un
procent indicat de utilizator
• determinare valoare stoc dacă se vinde o cantitate indicată de utili-
zator
• operaţie propusă de voi
6. Creaţi o pagină Web care să afişeze un text ı̂n bară de stare pe perioada
cât cursorul de mouse se afla ı̂n zona unui control dat (ex. textarea,
button, etc). Indicaţii: Se va utiliza obiectul predefinit status căruia i se
va atribui valoarea textului de afişat. Se va utiliza cod JS in-line, adică
ataşat controlului. Deoarece codul trebuie plasat ı̂ntre ghilimele, pentru
delimitarea şirului ce conţine textul de afişat se va utiliza apostrof. Model:
< . . . onMouseOver = ” s t a t u s = ‘ un t e x t ‘ ; r e t u r n
t r u e ; ”>

7.6 Bibliografie
• Javascript tutorial: Javascript

• Wikipedia XMLHttpRequest: XMLHttpRequest


• IBM Tutorial: Build enterprise SOA Ajax clients with the Dojo toolkit
and JSON-RPC
96 CAPITOLUL 7. DESCRIERE: LIMBAJUL JAVASCRIPT (III)
Capitolul 8

Descriere: XML (eXtended


Markup Language)

8.1 Resurse
1. Pentru un tutorial XML online consultati: XML

2. Pentru un tutorial DTD online consultati: DTD

8.2 Introducere
XML este un meta-limbaj pentru marcarea structurală a documentelor şi este
fundamental ı̂n manipularea datelor semistructurate specifice Internet-ului. Da-
tele semistructurate se mai numesc şi date autodescriptive, ele putând fi descom-
puse şi analizate fără referire la o schemă externă deoarece conţin şi informaţiile
de descriere a datelor.
Metoda principală de descriere a acestor tipuri de date este limbajul XML.
Acesta permite fie definirea de etichete proprii ce corespund atributelor, fie se
poate utiliza o definiţie existentă de tip de document (DTD) care precizează
atributele, şi o gramatică de utilizare a acestora.
Elementele constructive ale limbajului sunt etichete ierarhizate. Fiecare ele-
ment are o secvenţă de perechi atribut-valoare şi o secvenţă de subelemente.
Aceste subelemente pot fi, la rândul lor, marcate sau pot fi simple segmente de
date de tip text.
Un document XML este considerat valid dacă satisface o gramatică, definită
fie prin DTD sau XMLSchema. XML realizează o marcare a datelor conform
semnificaţiei acestora. Un marcaj identifică conţinutul datelor, specificând tipul
de date şi nu modul lor de prezentare.
Principalul rol al limbajului XML este de a structura, salva şi a transmite
informaţii. Următorul exemplu este un mesaj de la Alice la Bob codificat XML
<mesaj>
<to>A l i c e </to>
<from>Bob</from>
<heading>Question </heading>

97
98CAPITOLUL 8. DESCRIERE: XML (EXTENDED MARKUP LANGUAGE)

<body>Don ’ t f o r g e t me t h i s weekend !</body>


</mesaj>

8.2.1 Marcaje
Din punct de vedere sintactic, un document XML este format dintr-o colecţie
de elemente. În general, un element este un text cuprins ı̂ntre două marcaje
balansate. Sintaxa generală a unui marcaj este:

<nume marcaj>Un t e x t </nume marcaj>

8.2.2 Elemente
Un element XML este un container format din marcaj de start, din conţinut
propriu-zis, care poate fi format din caractere şi/sau din subelemente XML şi din
marcaj de final. Un element XML poate la rândul lui să conţină sub-elemente
XML. Următorul exemplu conţine ı̂n HTML, respectiv XML, descrierea unei
lucrări pentru o conferinţă studenţească:

• Versiunea HTML

<h1>AJAX Keyword Suggest </h1>


<h2>Joe Limonada</h2>
<ul>
< l i ><B>U n i v e r s i t a t e a d i n P i t e s t i </B>
< l i >F a c u l t a t e a : Matematica s i I n f o r m a t i c a
< l i >S e c t i u n e a : Programare i n I n t e r n e t
< l i >R e f e r e n d 1 : a c c e p t a t a
< l i >R e f e r e n d 2 : a c c e p t a t a cu m o d i f i c a r i
</ul>

• Versiunea XML

<l u c r a r e >
<t i t l u >AJAX Keyword Suggest </ t i t l u >
<autor >Joe Limonada</autor >
<univ>U n i v e r s i t a t e a d i n P i t e s t i </univ>
<f a c u l t a t e a >Matematica s i I n f o r m a t i c a </ f a c u l t a t e a
>
<s e c t i u n e a >Programare i n I n t e r n e t </ s e c t i u n e a >
<r e f e r e n d >a c c e p t a t a </ r e f e r e n d >
<r e f e r e n d >a c c e p t a t a cu m o d i f i c a r i </ r e f e r e n d >
</ l u c r a r e >

În varianta XML se observă o mai bună structurare şi reguli mai stricte de
apariţie a marcajelor, precum şi lipsa marcajelor de formatare a textului.
8.2. INTRODUCERE 99

8.2.3 Atribute
Elementele sunt descrise prin atributele ataşate acestora. Atributele sunt pe-
rechi (nume, valoare) unice. Pentru ca un document XML să fie acceptat din
punct de vedere sintactic, el trebuie să fie bine format (well-formed). Un do-
cument este bine format dacă marcajele sunt balansate şi dacă atributele sunt
unice şi au valorile reprezentate ca şiruri de caractere ı̂ncadrate de ghilimele.
Următorul exemplu ilustrează utilizarea atributelor (limba şi tip) pentru
descrierea elementului marcat cu tag-ul ¡nume¿. De asemenea, prima linie re-
prezintă o declaraţie xml care nu este obligatorie, dar care se recomandă a fi
utilizată.
<?xml v e r s i o n=”1 . 0 ” ?>
<l u c r a r e >
<nume limba=”romana” t i p=” s h o r t p a p e r ” >AJAX Keyword
Suggest </nume>
<autor >Joe Limonada</autor >
</ l u c r a r e >

Prin marcarea cu tag-uri a unui document, acesta este divizat ı̂n părţi se-
mantice. Un exemplu ar fi ı̂mpărţirea unui text ı̂n capitole şi secţiuni. Existenţa
distincţiei dintre diferite părţi ale unui document permite clasificarea sau grupa-
rea acestora, urmată de tratarea lor diferenţiată. În XML o astfel de clasificare
ı̂ncepe prin impunerea restricţiei ca un document valid să fie compus dintr-un
singur element, numit rădăcină, dar acel element poate conţine alte elemente,
astfel ı̂ncât se poate crea o structură ierarhică a documentului.
Deci, un document XML conţine un set de informaţii organizat ı̂ntr-o struc-
tură arborescentă.
Aceasta are un element rădăcină şi orice alt element are un unic părinte.
Structura arborescentă corespunzătoare documentului precedent este reprezen-
tată ı̂n figura următoare: