UNIVERSITATEA SPIRU HARET

FACULTATEA DE MATEMATICĂ - INFORMATICĂ

COD_CURS:
CURS: TEHNOLOGII WEB

TIP CURS : OBLIGATORIU LA SECTIA DE MATEMATICA INFORMATICA, ANUL II,

SEMESTRUL I, LA TOATE FORMELE DE INVATAMANT: ZI, FR, ID

DURATA: SEMESTRUL I, 2 ORE DE CURS, 2 ORE DE LABORATOR

Nr.CREDITE:
TITULAR: LECTOR DR. FLORENTINA RODICA NICULESCU
E-MAIL: rodicaniculescu@gmail.com

LOCUL DE : UNIVERSITATEA SPIRU HARET

FACULTATEA DE MATEMATICA – INFORMATICA
MUNCA BUCURESTI, ROMANIA

Perioada de accesare a cursului : 1/10/ 2008 – 1/10/2009

MANUALE ”PROIECTAREA PAGINILOR WEB – HTML, CSS, JavaScript”,
RECOMANDATE : Florentina Rodica Niculescu, Editura FundaŃiei România de Mâine,
Bucuresti 2007”;
Crearea şi programarea paginilor Web- HTML, CSS,
JavaScript, PHP, Tudor Sorin, Editura L&S Soft, 2006

Obiectivul cursului :
Cursul de TEHNOLOGII WEB are ca obiectiv însuşirea cunoştinŃelor de
programare HTML, CSS, J AVASCRIPT ŞI PHP, necesare realizării paginilor
WEB DINAMICE (fişiere HTML şi scripturi php. Cu ajutorul scripturilor PHP, se
poate extinde manipularea paginilor web dintr-un browser pe partea de server,
realizând astfel, pagini web dinamice.
Cursul este predat În semestrul I al anului universitar, cu EXAMEN la
sfârŞitul semestrului I. Programa analitică a cursului urmăreşte formarea unui orizont
asupra spaŃiului world wide web, trecerea de la relizarea unor pagini web statice şi
invariabile (fişiere HTML), la realizării de site-uri dinamice atractive cu ajutorul
stilurilor CSS şi a scripturilor JavaScript şi PHP.
Întregul conŃinut al programei cursului cuprinde toate noŃiunile necesare
realizării acestor deziderate : pagini web formatate, dnamice cu un aspect căt mai
atractiv.

MODUL DE STABILIRE A NOTEI FINALE:

INVATAMÂNT CURSURI DE ZI /ID / FR : NOTA DE LA TESTUL GRILA (PE CALCULATOR).

CONSULTATII PENTRU STUDENTI:

ÎN FIECARE ZI DE MARłI INTRE ORELE 12-13.30, SALA 600, FACULTATEA DE
MATEMATICA - INFORMATICA, SEDIUL CENTRAL DIN STR. ION GHICA NR. 13, ET. 2,
TEL. 3140075

1
PREZENTAREA CURSULUI

Programa analitică a cursului este:

Tehnologii Web

I. CONłINUTUL TEMATIC AL DISCIPLINEI

•Introducere în mediul Internet.
•Prezentări multimedia pe Web. SpaŃiul World Wide Web. Protocolul HTTP.
•Prezentarea modelului client/server.
•Realizarea paginilor web şi a unui site web.
•Prezentarea limbajelor de descriere a documentelor hipertext: HTML, XHTML.
•Prezentarea CSS – Cascading Style Sheets (Foi de stil în cascadă).
•Prezentarea limbajului JavaScript.
•Prezentarea limbajului PHP pentru realizarea paginilor web dinamice.
•Manipularea fişierelor în PHP.
• Grafică interactivă pe server.

Prin structura şi conŃinutul programei cursului, studenŃii vor dobândi

cunoştinŃele necesare pentru a crea pagini WEB utilizând tehnologiile HTML, CSS,
Java Script şi PHP.
Fiecare caracteristică a acestor tehnologii este definită, analizată şi
exemplificată. Sunt prezentate toate atributele marcajelor HTML şi proprietăŃile foilor
de stil CSS, împreună cu valorile lor posibile. Este prezentat modul în care proiectantul
unui site poate integra HTML, CSS şi JavaScript pentru a crea pagini Web
profesioniste. Dar aceste pagini web sunt statice, un server de web transmite browser-
ului codul HTML, iar utilizatorul poate vedea doar imagini şi text.
Folosind scripturile PHP pe partea de server, se introduce compomponenta
dinamică, cerând serverului ce doriŃi să intreprindă: să citescă casetele text dintr-un
formular, să selecteze casete de validare, casete radio sau elemente din liste, să desenaŃi
interactiv elemente grafice, să manipulaŃi fişiere de date sau să lucraŃi cu baze de date.
Apoi trebuie să decideŃi ce doriŃi să faceŃi în continuare şi să creaŃi pagina web pe care o
trimiteŃi înapoi browser-ului, deci aveŃi posibilitatea de a răspunde dinamic.
Cursul vă oferă posibilitatea de a vă crea site-uri profesioniste, formatate,
atractive şi dinamice, personale, sau pentru diferite organizaŃii şi firme.

SINTEZE ASUPRA PROGRAMEI ANALITICE A CURSULUI

TEMA I –HTML
INTRODUCERE ÎN COSTRUIREA UNUI SITE
- ObŃinerea unui site gratuit
- FTP
- Scrierea unui fişier HTML
HTML
- Structura unei pagini
- Stiluri fizice şi logice de text
- Elementele :PRE, NOBR, WBR
- Lise

2
- Tabele
- Imagini
- Legături
- HărŃi imagine
- Elemente de bază :HTML, HEAD, BODY
- Elementele : BASE, META STYLE, SCRIPT
- Cadre: FRAMESET, FRAME, IFRAME
- Formulare
- Elementele: OBJECT , MARQUEE şi tehnologia ActiveX
- Caractere HTML

În continuare, se prezintă rezumatul a 12 lecŃii despre HTML, cuprinse în Cartea

“PROIECTAREA PAGINILOR WEB – HTML, CSS, JavaScript”, Florentina Rodica
Niculescu, Editura FundaŃiei România de Mâine, Bucuresti 2007.
De asemenea, tot în acestă carte de referinŃă se găsesc exemple ilustrative despre
fiecare problemă tratată.

LecŃia 1: SpaŃiul World Wide Web

Crearea unui site gratuit şi a fişierelor HTML

Pentru a obŃine un site gratuit, solicitantul trebuie să aibe o adresă de e-mail, care
poate fi obŃinută tot gratuit la Yahoo, Hotmail, Gmail etc. Dacă se accesează site-ul de la
adresele:
www.freewebsites.com
www.b0x.com
se va solicita clientului să completeze un formular cu numele dorit al site-ului, adresa
de e-mail (una din cele pe care le aveŃi), o parolă etc. Dacă datele au fost completate corect se
poate obŃine un site la adresa
www.nume.freewebsites.com
www.nume.b0x.com
La adresa de e-mail specificată în formular se va primi un mesaj prin care se cere să
confirmăm înscrierea, scriind parola dată şi numele de utilizator (USER ID) şi un cod care a
fost dat după completarea formularului.
Pentru a putea fi populat un site, trebuiesc transferate fişiere. Transferul fişierelor de
la calculator la server şi invers se poate face (aşa cum s-a menŃionat mai sus) cu protocolul
FTP. Unul din protocoalele FTP utilizate şi în acestă carte este WS_FTP95, care se
descarcă de pe Internet. După ce a fost download-at un protocol ftp, apare o casetă de
dialog în care trebuiesc introduse datele de acces la site:
Dacă datele au fost introduse corect, atunci programul afişează o fereastră cu 2
panel-uri. Panel-ul drept conŃine fişierele din site şi panelul stâng conŃine fişierele din
directorul curent al calculatorului local.
Transferul fişierelor din folder şi invers se face cu dublu click pe fişier sau
prin Drag&Drop. Se pot crea directoare cu MkDir, se pot şterge fişiere cu Delete şi se
poate schimba unitatea curentă de pe calculator. Pentru un transfer mai riguros se
apasa butonul ASCII din fereastra afişată.
Pentru a scrie fişiere HTML(pagini web), urmăm paşii:
• cu My Computer sau Explorer ne situăm în folderul unde dorim să se
găsească fişierele
• cu ajutorul menu-ului contextual (click cu butounul drept al mouse-ului)
alegem New - Text Document. Programul NOTEPAD va crea un fişier cu
extensia .txt

3
 • ne poziŃionăm pe fişier şi din menu-ul contextual alegem comanda
RENAME, pentru a schimba numele fişierului şi extensia în .html sau .htm.
Extensia .htm este asociată browser-ului Internet Explorer, şi deci fişierul va
avea icon-ul browser-ului
• un dublu click pe fişier are ca efect lansarea browser-ului, care va afişa
fişierul (conŃinutul va fi vid)
• din menu-ul principal din Internet Explorer, View->Source, NOTEPAD va
încărca codul HTML al fişierului (conŃinutul va fi vid)
• scriem un text la alegere, de exemplu “se crează un site”, se salvează fişierul
• în fereastra browser-ului se apasă butonul “Refresh”, prin care comandăm
browser-ului să reîncarce fişierul care a suferit modificări
• se trece iar în NOTEPAD (View-Source) pentru a continua să scriem
fişierul HTML

ObservaŃie:
Pentru a scrie codul unui fişier HTML, nu trebuie să fim conectaŃi la Internet.
Probleme

1. VizualizaŃi codul HTML a unei pagini de Internerat, aleasă de

dumneavoastră.
2. CreaŃi un site gratuit, cu numele testweb, pe care sa-l folosiŃi pentru teste.
3. CreaŃi un folder pe hard-ul dvs., numit TEST şi un fişier cu numele
index.html, cu conŃinutul : ”Primul site”.
4. Upload-aŃi fişierul pe site-ul testweb şi verificŃi operaŃia.
5. CreaŃi pe site două foldere: Imagini şi Texte. TransferaŃi două imagini în
folder-ul Imagini, cu extensiile jpeg, respectiv gif.

6. Cerati un fişier text, de exemplu, un referat despre protocoale FTP, pe care îl

transformaŃi în pagină web (fişier HTML) şi o transferaŃi pe site, în folder-ul
Texte.
7. VizualizaŃi site-ul creat şi apoi codul HTML a fişierelor HTML de pe site.
8. VizualizaŃi site-ul creat şi apoi fişierele din folder-ul Imagini de pe site.

LecŃia a-2-a: HTML noŃiuni de bază

• O pagină Web este un document HTML cu extensia de nume de fisier .html
sau .htm
• Un document HTML standard contine un bloc <html>...</html>, în interiorul
căruia există alte două blocuri: <head>...</head> şi <body>...</body>.
• Titlul unei pagini Web este reprezentat de continutul blocului
<title>...</title> care apare în interiorul blocului <head>...</head>.
• ConŃinutul unei pagini Web este reprezentat de ceea ce există în interiorul
blocului <body>...</body>.
• Unei pagini i se poate da un titlu adecvat, cu tag-ul <TITLE>conŃinut
</TITLE>, scrisă în interiorul blocului de antet <HEAD> </HEAD. Titlul
apare pe bara de titlu a browser-ului utilizat. Browser-ul înlocuieşte o serie de
caractere de spaŃiu alb(spatiu, TAB, CR/LF) cu un singur caracter spatiu.
• Pentru a specifica saltul la un nou paragraf se utilizează marcajul (tag-ul)
pereche <P align=”valoare”> conŃinut paragraf </P>. Atributul align care
poate lua una din valorile: left(implicit), center şi justify - paragraful este
aliniat la ambele capete. Între două paragrafe se lasă o linie vidă.

4
• Eticheta <br> obligă browser-ul să afişeze conŃinutul care urmează de la
începutul unui rând nou, fără să lase o linie vidă.
• Pentru a afişa textul pe un singur rând, trebuie să-l introduceŃi într-un bloc
<NOBR>...</NOBRr> (nobreak).
• Pentru a introduce o linie nouă chiar dacă linia se află în interiorul lui <> se
foloseşte eticheta nepereche <WBR> (wrap break).
• Pentru a trecere un cuvânt pe linia următoare (în cazul depăşirii dimensiunii
ferestrei browser-ului), se foloseşte elementul &nbsp (non-breaking space). În
cazul în care cuvântul dorit nu încape pe o linie, se trece pe linia următoare şi
cuvântul precedent.
• Pentru a păstra formatarea existentă în documentul sursă, utilizaŃi elementul
<PRE atribute>...</PRE>, care va afişa cu font monospaŃiat. Nu se pot seta
în interiorul lui proprietăŃi referitoare la font. Se pot folosi în interiorul
blocului <PRE>…</PRE>, elemente de formatare (B, I, U etc.) dar nu toate
sunt suportate de orice browser. Etichetele HTML nu sunt ignorate de
browser ci interpretate.
Atributele etichetei <PRE> sunt: width, cols, wrap.
• Pentru o mai bună organizare vizuală a unui document, se foloseşte eticheta
de riglă orizontală, <HR atribute>. Atributele elementului HR sunt: align
,width, size, nonshade, color.

Probleme

1. Să se creeze o pagină HTML, al cărei conŃinut să fie format dintr-un text pe

mai multe rănduri. Paginii i se va da titlul : Exemplu 1.
2. Să se creeze o pagină HTML, al cărei conŃinut să fie format dintr-un text
format din mai multe paragrafe. Fiecare paragraf să fie scris la rând nou, fară
a folosi eticheta <P>. Paginii i se va da titlul : Exemplu 2.
3. Să se creeze o pagină HTML, al cărei conŃinut să fie format dintr-un
text text format din 4 paragrafe. Fiecare paragraf să fie scris între etichetele
<P>...</P>. Paragrafele vor fi aliniate: dreapta, stănga, centru şi respectiv la
ambele margini.
4. Să se creeze o pagină HTML, al cărei conŃinut să fie format dintr-un
text text format din 2 paragrafe. Fiecare paragraf să fie scris între etichetele
<P>...</P>. Primul paragraf conŃine 2 fraze, fiecare scrise de la inceputul
rândului. Al doilea paragraf, va contine 2 fraze, care se vor scrie pe un singur
rând. La întâlnirea unui cuvânt (ales de dvs.) se va face salt la rând nou.
5. Ce va afişa browser-ul când întâlneşte secvenŃa?
<P align=right> data: 25-11-08 <BR> Maria&nbspPopescu
6. ScrieŃi etichetele care să afişeze :
“Limbajele care crează o pagină statică sunt:
HTML, XHTML, XML
Limbajele care crează o pagină dinamică sunt:
JavaScript, PHP, ASP, Flach”
7. Ce va afişa browser-ul când întâlneşte secvenŃa?
<P> text preformatat
<NOBR>Acest text a fost scris in HyperText Markup
Language(HTML) si afisat in browser-ul <WBR> InternetExplorer
8. ScrieŃi două paragrafe, utilizând <P>, respectiv </PRE>. ObservaŃi
diferenŃa!
9. Ce va afişa browser-ul când întâlneşte secvenŃa?

5
 <PRE width=200, cols=40>
<B> <I> Catalog </I> </B>
Popescu Ion
Marinescu Ana
Stefanescu Dan
Ionescu Maria
</PRE>

10. Ce va afişa browser-ul când întâlneşte secvenŃa?

<HR> Paragraf 1
<HR align=center width=500 size=4 color=blue> Paragraf 2
<HR align=right width=50% color=red size=3 noshade> Paragraf 3

LecŃia a-3-a: Stiluri de text

Stiluri fizice de text

• Textul din interiorul elementului <BODY>...</BODY> va fi afişat cu parametrii

prestabiliŃi ai browser-ului, dacă nu sunt precizate stiluri pentru respectivul text.
• Pentru a schimba stilul de text, puteŃi utiliza stilurile fizice:<TT> pentru text tip
teleimprimator, <I> pentru text cursiv, <B> pentru text aldin, <BIG> pentru text mai
mare, <SMALL> pentru text mai mic, <STRIKE> sau <S> pentru text taiat cu o linie
şi <U> pentru text subliniat.
• Stilurile de text fizice pot fi imbricate.
• Elementul pentru text scris la exponent este <SUP> şi pentru text scris la indice este
<SUB>.
Stiluri logice de text
• Intr-o pagină Web, titlurile pot fi inserate cu ajutorul elementelor <H1>,
<H2>, <H3>, <H4>, <H5> şi <H6>. Titlurile acceptă atributul align cu
valorile; left, right, center, justify.
• Puteti insera paragrafe utilizand elementele <P> şi citate utilizand elemente
<BLOCKQUOTE>(pentru citate la nivel de bloc) şi elemente <Q>(pentru
citate în interiorul unui rând).
• Pentru a insera linii orizontale, se utilizeaza elementul <HR>.
• Pentru a insera blocuri de impartire, generice, utilizati elementul <div> pentru
separari la nivel de bloc şi elementul <span> pentru separari în interiorul
randului.
• Blocurile de text performatat pot fi inserate utilizând elementele <PRE>.
• Există etichete speciale pentru elementele de frază, cum ar fi <EM>,
<STRONG>, <DFN>, <CODE>, <SAMP>, <KBD>, <VAR>, <CITE>,
<ABBR>, şi <ACRONYM>.
• Elementul <CENTER> poate fi utilizat pentru a centra orice conŃinut.
• Pentru a defini o culoare în codul HTML, puteŃi utiliza un nume de culoare
standard sau o definiŃie RGB.
• Elementul <basefont> vă permite să precizaŃi un tip de literă pentru textul
care apare din acel punct până la sfârşitul pagini Web(dacă nu apare altă
proprietate de formatare), utilizând atributele color, face şi size.

6
 • Elementul <FONT> va permite sa precizati un tip de litera pentru un bloc de
text, utilizand atributele color, face şi size.
• Atributul face a lui font şi basefont acceptă liste de nume de tipuri de literă,
separate prin virgule.

Probleme
1. ScrieŃi elementele HTML necesare formatării textului:
HTML (HyperText Markup Language) este un limbaj prin care se descriere
modul în care arată paginile WEB.
2. ScrieŃi elementele HTML necesare formatării textului:
“Elementul <BASEFONT> are atributele: face, color şi size
Elementul <BASEFONT> are atributele: face, color şi size”
3. ScrieŃi cod HTML pentru formatarea unui paragraf cu: fontul Courier New,
culoarea rosie, dimensiune 5.
4. ScrieŃi cod HTML pentru formatarea paginii cu: fontul Arial Black, culoarea
magenta, dimensiune 3.
5. Ce va afişa browswr-ul pentru codul:
<STRONG> ObservaŃie: </STRONG> <EM> elementele STRONG şi EM
ajută la evidentierea unui text</EM>
6. ScrieŃi mai mare HTML şi mai mic WEB pentru fraza de la 1.
7. FolosiŃi elemtele de formatare logică pentru a scrie un citat şi a face o
referinŃă
“ DaŃi-i omului un peşte şi-l veŃi hrăni o zi.
ÎnvăŃaŃi-l să pescuiască şi vă va invita şi el la prânz.”
Calvin Keegan

Vezi Capitolul 3 din cartea ”PROIECTAREA PAGINILOR WEB –

HTML, CSS,JavaScript”, Florentina Rodica Niculescu.
8. Să se structureze (folosind titluri) următorul text
Capitolul 3 Stiluri (H 1)
Paragraful 1 Stiluri fizice(H2)
Stiluri<TT>, <I>, <B> ,<BIG>, <SMALL>c, <STRIKE> sau <S>,
<U> , <sup>, <sub>(H3)
Paragraful 2 Stiluri logice(H2)
Stiluri <em>, <strong>, <dfn>, <code>, <var>, <cite>, <P>
<h1>, <h2>, <h3>, <h4>, <h5> <h6>. <blockquote>(H3)

LecŃia a-4-a: Liste

Pentru a insera liste într-o pagina Web, utilizaŃi elementul <OL> pentru liste
ordonate . Listele ordonate pot avea atributele:
• type – care are ca valoare un caracter care indică modul de numerotare.
Există cinci valori posibile:
- 1 – pentru cifre arabe: 1,2,3 etc şi este valoare implicită
- a – pentru literele mici : a,b,c etc.
- A – pentru litere mari: A,B,C, etc.
- i – pentru litere romane scrise cu litere mici: i, ii, iii, iv, etc.
- I – pentru litere romane scrise cu litere mari: I, II, III, IV

7
 • start – indică de unde începe numerotarea. Primul simbol dintr-o listă
ordonată este: 1, a, A, i sau I.
• Pentru a insera liste neordonate sau dezordonate într-o pagina Web, utilizaŃi
elementul <UL>. În faŃa fiecărui articol al listei neordonate browser-ul
inserează un simbol. Singurul atribut al listei neordoonate este este
type=”valoare”, unde “valoare” poate fi: disc (“•”) valoare implicită, circle
(“○”) şi square (“□”).
• Pentru a insera un articol într-o lista, utilizati elementul <LI>..
• Simbolurile introductive pentru listele ordonate pot fi stabilite atribuind atributului
type valori care reprezinta cifre arabe, litere mici sau mari şi cifre romane scrise cu
litere mici sau mari.
• Listele pot fi imbricate.
• Puteti stabili proprietatile pentru elementele <LI> individuale, utilizand atributele
value şi type.
• O lista de definitii (<DL>) este formata din termeni de definiti <DT> şi definŃtii
(descrieri) – elementele <DD>.

Probleme

1. Să se creeze o listă ordonată cu elemente studenŃii dintr-o grupă.

2. Să se creeze o listă ordonată cu elemente studenŃii dintr-un an de studii are
suntbursieri. Lista să fie numerotată cu litere romane scrise cu litere mari
3. Sa se creeze o listă neordonată cu elemente facultăŃile din universitate, iar
simbolul listei să fie un cerc.
4. Să se scrie cod HTML pentru a crea următoarea lista imbricată:

I. Exemplul 1

Varianta A

Varianta B

Varianta C
II. Exemplul 2

Varianta A
• Varianta 2.A. a)
• Varianta 2 A b)

Varianta B

5. Să se scrie cod HTML pentru a crea următoarea lista de definiŃii:

I appreciate your help
Multumesc pentru ajutor
Excuse me
A atrege atentia cuiva
My name is
Numele meu este
6. Cu ce atributul al elementului <DL> browser-ul va alinia definiŃia pe
acelaşi rând cu termenul asociat ?

LecŃia a-5-a:Tabele

• Tabelele pot fi inserate într-o pagina Web utilizand elementul <TABLE>.

• Un tabel este compus din linii(elemente <TR>) şi celule(elemente <TD>).

8
• Pentru a adauga o bordură la un tabel, utilizati atributul border al elementului
<TABLE>.
• Pentru a atribui o culoare bordurii, utilizati atributul BORDERCOLOR.
• Atributele FRAME şi RULES ale elementului <TABLE> va permit sa
proiectati bordurile pentru liniile, coloanele şi celulele unui tabel.
• Un tabel poate fi aliniat utilizand atributul ALIGN.
• Spatiul alb din jurul unui tabel poate fi stabilit cu ajutorul atributelor HSPACE
şi VSPACE ale elementului <TABLE>.
• Atributul CELLSPCING determină distanŃa dintre celulele adiacente, iar
atributul cellpadding determină distanŃa dintre conŃinutul şi bordura unei
celule.
• Pentru un tabel sau o celulă, pot fi stabilite dimensiuni fixe folosind atributele
WIDTH şi HEIGHT.
• Folosind atributul BGCOLOR, puteti stabili culoarea de fundal pentru un tabel,
iar folosind atributul BACKGROUND puteti preciza o imagine de fundal.
• Pentru a defini antetul unui tabel, utilizaŃi elementul <TH>.
• Pentru a alinia datele intr-un tabel, utilizaŃi atributele ALIGN şi VALIGN
ataşate la elemente <TR>, <TD> sau <TH>.
• Pentru a extinde o celulă peste celulele adiacente, utilizati atributele
COLSPAN şi ROWSPAN ale elementelor <TD> sau <TH>.
• Pentru a adauga un titlu la un tabel, utilizaŃi elementul <CAPTION> în
interiorul elementului <TABLE>.
• Pentru a adauga o structura la un tabel, utilizati elementele
<THEAD>,<TFOOT> şi <TBODY>.
• Pentru a stabili proprietatile coloanelor unui tabel, utilizati elementul
<COLGROUP>.
• În absenŃa altori formatări, toate celule unei coloane au laŃimea impusă de cel
mai lung conŃinut al uneia dintre ele. Dacă o linie conŃine mai multe celule
decât restul liniilor, atunci toate liniile vor avea numărul maxim de celule.

Probleme:
1. Să se scrie cod HTML pentru a crea următorul tabel, aliniat pe centru
Nume Prenume Adresa
Ene Ana Sos Pantelimon, nr. 400, sector 2,
Bucuresti
Georgesccu Dan Sos Colentina, nr.300, sector 2,
Bucuresti
Ioanitiu Oana Sos Iancului,nr.120, sector 2,
Bucuresti
2. Să se scrie cod HTML pentru a crea un tabel, aliniat drepta, chenar exterior
de grosime 5 si de culoare albastră, chenar interior numai între coloane,
fundal galben . Linia de titlu mai înalta, si textul centrat si pe orizontala si pe
verticală. Tabelul sa aiba o etichetă.

Produs Cantitate Pret/buc

A 20b 10 Ron
B 10b 20Ron

9
 3. Să se scrie cod HTML pentru a crea un tabel, pentru care spaŃiul dintre celule
să fie 15, iar pentru fiecare celulă, spaŃiul dintre text şi marginea celulei să fie
de 10.
4. Să se scrie cod HTML pentru a crea un tabel, care are linia de antet de 25%
din spaŃiu, iar linia de subsol tot 25%. Corpul tabeluli are liniile de liniile de
aceeaşi grosime.
FIRMA X
Produs Cantitate Pret/buc
A 20b 10 RON
B 10b 20RON
5. SUMA 6. 30RON
4. Să se scrie cod HTML pentru a crea un tabel, în care se concateneză liniile 1
şi 2 şi coloanele 2 şi 3 , astfel
A11
A12
A21
A31 A32 A33
5. Care este diferenŃa între TD şi TH?
6. Care sunt elementele de grupare a liniilor unui tabel, în antent, subsol
şi corp de tabel?
7. Care este elementul de grupare a coloanelor pentru a aplica aceeaşi
formatare şi elementul de formatare pentru fiecare coloana?
8. Cum va fi format tabelul care are următorul cod HTML?
<TABLE>
<COLGROUP span=1 width=50% aligh=right>
<COL width=50% >
<COLGROUP span=2 align=left>
<COL width=25 % aligh=right>
<COL width=25 % aligh=right>
<TR> <TD> A <TD>20B <TD> 10RON
<TR> <TD>B<TD>10B <TD> 20RON
</TABLE>
LecŃia A-6-A: Imagini
• Într-o pagina Web puteŃi insera mai multe tipuri de imagini(formatul GIF
recomandat pentru desene, formatul JPEG recomandat pentru fotografii,
formatele PNG şi TIFF pentru imagini cu scop general şi formatul BMP
pentru Internet Explorer).
• Pentru a insera o imagine, utilizaŃi elementul <IMG>.
• Adresa Internet a unei imagini este precizată de atributul SCR, care accepta ca
valori orice adrese URL(Uniform Resource Locator) valide(relative sau
absolute).
• Pentru a adauga un chenar la o imagine, specificati atributul BORDER.

10
 • Pentru a specifica dimensiuni fixe pentru o imagine, utilizati atributele width
şi height.
• Imaginea poate fi aliniata pe orizontala sau pe verticala cu ajutorul atributului
align.
• Utilizati atributele hspace şi vspace pentru a dimensiunea spatiului alb din
jurul imaginii.
• Atribute suplimentare pentru elementul <IMG>> sunt ALT(pentru alternativa
text) şi lowsrc(pentru imagini inlocuitoare, cu rezolutie scazuta).
• Pentru a preciza o imagine de fundal pentru o pagina Web, utilizati atributul
background al elementului <body>.

Probleme
1. Elementul <IMG atribute> este element de linie sau de bloc?
2. Cum va fi scris textul pe lingă o imagine aliniată la stânga, ca in exemplu
de mai jos?
<P> un paragraf inaintea unei imagini</P>
<IMG src=poza_mea.jpg alt=”EU” align=left>
Acesta e un text liber(frunză) scris după o imagine aliniata la stanga.
Atentie la aliniere!
<P> Atentie cum se aliniaza al doilea paragraf! </P>

3. Cum va fi scris textul pe lingă o imagine aliniată la dreapta, ca în exemplul de

mai jos?
<P> un paragraf inaintea unei imagini</P>
<IMG src=poza_mea.jpg alt=”EU” align=right >
Acesta e un text liber(frunză) scris după o imagine aliniata la dreapta.
Atentie la aliniere!
<P> Atentie cum se aliniaza al doilea paragraf! </P
4. Cum va fi scris textul pe lingă o imagine aliniată top, ca în exemplul de mai jos?
<P> un paragraf inaintea unei imagini</P>
<IMG src=poza_mea.jpg alt=”EU” align=top>
Acesta e un text liber(frunză) scris după o imagine aliniata top.
Atentie la aliniere!
<P> Atentie cum se aliniaza al doilea paragraf! </P
5. Cum va fi scris textul pe lingă o imagine aliniată middle, ca în exemplul de mai
jos?
<P> un paragraf inaintea unei imagini</P>
<IMG src=poza_mea.jpg alt=”EU” align=middle>
Acesta e un text liber(frunză) scris după o imagine aliniata middle.
Atentie la aliniere!
<P> Atentie cum se aliniaza al doilea paragraf! </P
6. Cum va fi scris textul pe lingă o imagine aliniată bottom, ca în exemplul de mai
jos?
<P> un paragraf inaintea unei imagini</P>
<IMG src=poza_mea.jpg alt=”EU” align=bottom>
Acesta e un text liber(frunză) scris după o imagine aliniata bottom.
Atentie la aliniere!
<P> Atentie cum se aliniaza al doilea paragraf! </P
7. Scrieti atributele lui IMG din exemplul precedent care creaza o bordura de
grosime 5 imaginii şi care lasă un spŃiul alb de 20 pixeli pe orizontală şi
verticală între imagine şi text.

11
 8. In elementul urmator <IMG src=poza_mea.jpg alt=”EU” height=150
width=100> imaginea va fi deformată sau redimensionată?
9. In elementul urmator <IMG src=poza_mea.jpg alt=”EU” height=150 >
imaginea va fi deformată sau redimensionată?
10. In elementul urmator <IMG src=poza_mea.jpg alt=”EU” width=100
border=5> imaginea va fi deformată sau redimensionată?
LecŃia a 7-a: Legături

• Legăturile sunt utilizate pentru navigarea la resurse Internet.

• O legătură poate fi inserată folosind elementul <A>.
• Resursa Internet indicată de către legătură este precizată de atributul HREF al
elementului <A>.
• Legăturile pot fi definite folosind adrese URL absolute sau relative.
• Pentru a defini o imagine ca legătură, inseraŃi elementul <IMG> în interiorul
elementului <A>.
• Pentru a defini o legătură la o resursă de pe sistemul local, utilizati protocolul
file:///.
• Pentru a defini o legătură la o resursă WEB, utilizati protocolul http://.
• Pentru a defini o legătură la informaŃii non web, se înlocuieste protocolul
HTTP cu FTP, sau alte protocoale (telnet, gopher, etc.)
• Pentru a defini o legătură la o adresăde e-mail, utilizati protocolul mailto:.
• Pentru a naviga în interiorul unei pagini Web, utilizati elementul <A>
împreună cu atributul name sau orice alt element HTML cu atributul id, (<A
name=val_name> sau <A id=val_id> sau <P id=val_id>)
• Referiri la ancorele dintr-un document HTML (pagină) se pot face şi din
exterior, din altă pagină, referirea fiind precedată de numele fişierului
careconŃine ancora.
<A href=”legaturi.html#stat”> Universitatile de Stat </A>
Se observă că referinŃa de ancoră se adaugă adresei URL a paginii respective, fişierul
legaturi.html având definite ancorele.
• Pentru a defini fereastra în care va fi încarcată noua resursă indicată de către o
legătură , ataşaŃi atributul target la elementul <A>.
• Pentru a particulariza culoarea legaăturii, utilizati atributele link, alink şi vlink
ale elementului <body>.
• Pentru a defini un prefix pentru toate atributele href dintr-o pagina Web,
inseraŃi în elementul <HEAD> un element <BASE>, impreună cu atributul
href.

Pobleme
1. Elementul <IMG atribute> este element de linie sau de bloc?
2. Care sunt culorile implicite ale legăturilor nevizitate, active şi vizitate?
Schimbati aceste culori implicite în : cyan (#00FFFF), green(#0080000),
respectiv orange(#FFA500).
3. Ce reprezintă o legatură din exemplul următor?
...
Detalii despre Editura Teora <br>
<A href=http://www.teora.ro > Editura Teora
<img src=http://www.teorausa.com/picts/Top.jpg> Sigla editurii Teora </A>

12
 4. Cum aflatiadresa unei imaginii de pe internet? Realizati o legatura la o parte a
unei imagini de pe internet!
5. ScrieŃi cod HTML pentru o legătură care trimite la o adresa de mail mesajul
“Puteti sa-mi scrieti”. Formatati legătura ca să fie la început de linie ş italic.
6. Ce efect va avea următorul cod HTML?
<ADRESS> <A href =mailto:rodicaniculescu@gmail.com
?subject=Intrebare
&va rog sa-mi precizati..>Puteti sa-mi scrieti </A> </ADRESS>
7. DefiniŃi trei ancore într-un document de 3 pagini, cite una la fiecare nceput
de pagine, si faceti legătura la ele?
8. Sunt corecte următoarele definiŃii de ancore şi legături la ele? SpecificaŃi
care ancoră este incorect definită?
<A id= mat-inf> trimitere la site-ul fac mat-inf </A>
…………………………………..
<A name=USH> trimitere la site-ul univ SH</A>
…………………………….
<P id=Arhit> Trimitere la site-ul fac de Arhitectura</A>
………………………………….
<P name= fac_eng> Trimitere la site-ul fac de Engleză</A>
…………………………
<A href=#mat_inf> MAT_INF </A>
<A href =.USH> UnivSH </A>
<A href=#Arhit> Arhitectura </A:
<A href =.fac_eng> fac de Engleză</A>
9. Să se creeze un fişier animale.html, cu ancore definite la descrierea
fiecărui animal., de exemplu
<A id=”pisica”> </A>
<H3> PISICA </H3>
Pisica este o felina…..……………………….
<A id=”pisica”> </A>
<H3> PISICA </H3>
<A id=”ciine”></A>
<H3>Ciine </H3>
Ciinele este un animal f.credicions ….
…………………..
Sa se creeze un fişier de forma:
Imagine animal …. referire la ancora animalului din fişierul animale.html

13
 (<IMG src=pisica.jpg> <A href=animale.html#pisica> Pisica </A>
<br>)

LecŃia a 8-a:Metadate şi Elementele de structură: HEAD şi BODY

• Metadatele sunt informaŃii inserate în elementul <head> utilizat la descrierea

paginii Web şi care transmit informatie robotilor Internet şi motoarelor de
cautare.
• Metadatele nu sunt afisate de către browser.
• Pemtru a insera metadate, se utilizeaza o pereche de atribute: name şi content
sau http-equiv şi content.
• Atributul content contine datele propriu-zise.
• Atributul name este utilizat pentru a insera date cum ar fi description(pentru
introducerea unei descrieri), keywords(pentru a defini un set de cuvinte cheie),
author(pentru a adauga informatie despre creator) şi copyright(pentru a defini
detalii despre dreptul de copyright).
• Atributul http-equiv este utilizat pentru a insera date cum ar fi creation-
date(data crearii), expires(data actualizarii), from şi replay-to(pentru a insera
o adresa de e-mail care permite comunicarea cu realizatorul paginiisau site-
ului Web), content-type(pentru a descrie tipul de fisier), refresh şi
pragma(pentru reîmprospatarea automata a browser-ului).
• Blocul exterior: <HTML>…. </HTML>, conŃine un bloc de antet
<HEAD>…</HEAD> , un bloc de corp <BODY>…</BODY> şi opŃional
unul sau mai multe blocuri de comentarii <!-- conŃinut --> şi blocuri de
centrare <CENTER>…</CENTER>. Elementele HTML, HEAD şi BODY
ajută la structurarea unui document şi din această cauză se mai numesc şi
elemente de structură.
• Elementele HTML şi atributele acestora care se scriu în blocul de antet al
documentului sunt: <TITLE>, <BASE>, <STYLE>, <SCRIPT>. Aceste
elemente nu sunt afişate de browser-e. Etichetele BASE şi META sunt
etichete simple, în timp ce TITLE, STYLE , SCRIPT sunt etichete pereche.
• Elementul BASE are rolul de a preciza o adresă de bază pentru resurse, care va fi
ataşată automat la adresa URL dintr-o referinŃă, ceea ce ne permite să evităm
rescrierea codului (dacă toate legăturile indică spre acelaşi server). Singurul atribut al
elementului BASE este href=”adresa URL” Când se utilizează elementul BASE
într-o pagină, adresa URL propriu-zisă este o concatenare a adresei atributului href
din BASE cu valoarea atributului href sau src a elementelor A şi IMG. Acest URL
concatenat va apăre în bara de adrese a browser-lui.
• Elementul STYLE din blocul de antet este utilizat pentru introducerea stilurilor.
Foile de stil (CSS-Cascading Style Sheets) se introduc între etichetele <STYLE> şi
</STYLE>.
• Elementul SCRIPT din blocul de antet este utilizat pentru introducerea unor
secvenŃe de program de scriptare în cadrul paginilor web. Scripturile, ca şi
stilurile pot fi introduse şi în fişiere separate sau în corpul programului.
Blocul de corp <BODY>…</BODY> cuprinde corpul paginii şi conŃine
toate tag-urile prezentate. Atributele elementului BODY sunt:
• Background - indică o imagine care dorim să apară pe fundal. Imaginea se va
repeta atât pe orizontală cât şi pe verticală până va umple tot corpul. Acest
atribut a fost descris şi la tabele, fiind atribut şi al elementelor <table>, <tr> şi
<td>

14
• Bgcolor - indică culoarea de fond. Dacă se folosesc ambele atribute şi, în cazul
în care imaginea nu se încarcă atunci apare culoarea de fond, altfel apare
imaginea
• Text –indică culoarea folosită pentru textul conŃinut în blocul <body….
</body>
• Atribute de margine sunt: leftmargin (valoare implicită 10 px);ightmargin
(valoare implicită 10 px); topmargin (valoare implicită 15 px); bottommargin
(valoare implicită 0 px)
• Atributele link, alink şi vlink - indică culoarea legăturilor.
− legăturile nevizitate au culoarea implicită albastră care poate fi schimbată
cu atributul link=”culoare”
− legăturile vizitate au culoarea implicită purple care poate fi schimbată cu
vlink=”culoare”
− legăturile active au culoarea implicită roşu care poate fi schimbată cu
atributul alink=”culoare”
• Blocul de comentarii este indicat să se introducă Pentru o mai bună lizibilitate
a unei pagini . Un comentariu are sintaxa: <!_ _ comentarii_ _>. Un bloc
de comentarii nu este afişat de browser
• Blocul de centrare informaŃii intr-o pagină este <CENTER>…</CENTER> .

Probleme

1. Să se scrie trei legături la pagini diferite din site-ul editurii Teora , care au o parte
comună: “http://www.teora.ro”, care va fi trecută ca valoare a atributului href, a
elementului BASE.
<HEAD>
<BASE href="“http://www.teora.ro”>
<TITLE> Elementul BASE </TITLE>
</HEAD>
<BODY>
…..
</BODY> </HTML>
2. Să se insereze într-o pagină cu titlu “Vizitare site SH”, legături la la site-ul
universitătii Spiru Haret , la paginile: “Carta universitatii”, “Codul etic” şi
“Facultati”, flolosind tag-ul BASE.
3. Ce efect au tag-urile META ?
<HEAD>
<BASE href="“http://www.teora.ro”>
<TITLE> Elementul BASE </TITLE>
<META name="description" content="invatamint suparior">
<META name="keywords" content=" Editura Teora”>
</HEAD>
<BODY>
<A href="Beletristica"> beletristica </A> <BR>
<A href="Arta"> Arta </A><BR>
</BODY>
4. Ce va afişa codul următor?
<HTML> <HEAD> <TITLE> Elementul META_Author</TITLE>
<META name"description" content="Carte WEB">
<META name="author" content="Rodica Niculescu>
<META name="copyright" content="Editura Spiru Haret">

15
 </HEAD>
<BODY>
copyright&copy;2006, Editura Spiru Haret
</BODY> </HTML>

5. Ce efect se va produce executând codul?

<HTML> <HEAD>
<TITLE> Elementul META_http-equiv</TITLE>
<META http-equiv="refresh" content="120">
</HEAD>
<BODY>
<P> Fisierul contine tag-uri meta</P>
</BODY></HTML>
6. Să se scrie cod HTML pentru redirecŃionare fişierului de mai sus la adresa
www.teora.ro la fiecare 5 minute.
7. Să se folosească atributele elementului BODY în exemplul de mai jos, pentru a
formata legaturile nevizitate cu rosu, cele visitate cu cyan, cele active cu green, iar
fundalul sa aiba culoare yellow
<HEAD>
<BASE href="“http://www.teora.ro”>
<TITLE> Elementul BASE </TITLE>
</HEAD>
<BODY>
<A href="Beletristica"> beletristica </A> <BR>
<A href="Arta"> Arta </A><BR>
<a href=”Dictionare”> Dictionare </A>
</BODY>

8. Să se folosească atributele elementului BODY în exemplul de mai sus,

pentru a introduce o imagine de fundal, pentru a lăsa margini staânga 10,
dreapta 30, susşi jos 10, iar textul sa fie scris cu darkblue. De asemenea, să
se introduca comentarii într-o pagina pe unul sau mai multe râduri şi să se
folosească un bloc de centrare informaŃii

LecŃia a 9-a:Cadre

• Cadrele sunt utilizate pentru afişarea simultană a mai multor pagini Web în
aceeasi fereastra de browser.
• Cadrele se definesc utilizand elementul <FRAME în interiorul elementului
<FRAMSET>, care inlocuieste elementul <body> obisnuit dintr-un fisier
HTML.
• Atributele cols şi rows ale elementului <FRAMSET> va permit sa impartiti
fereastra brouser-ului în cadre verticale (cols) şi orizontale(rows).
• Elementul <FRAMSET> are şi alte atribute, cum ar fi border(afiseaza o
bordura), bordercolor(atribuie o culoare bordurii), frameborder(stabileste
vizibilitatea bordurilor) şi framespacing(pentru Internet Explorer).
• Elementul <frame> are atribute similare, cum ar fi bordercolor şi
frameborder.
• Alte atribute ale elementului <FRAME> sunt marginheight şi
marginwidth(care definesc spatiul alb dintre continut şi marginile cadrului),

16
 name (ataseaza cadrului un identificator unic), noresize(dezactiveaza
redimensionarea cadrelor prin clic şi trage cu mouse-ul), scrolling(ataseaza
bare de derulare) şi src(defineste adresa URL a paginii care va fi incarcata în
respectivul cadru).
• Elementul <base> plasat în interiorul elementului <head> impreuna cu
atributul target va permit sa definiti o destinatie pentru legaturile plasate intr-o
pagina Web.
• Există patru valori magice pentru atributul target: _self, _blank, _parent şi
_top.
• Elementul <IFRAME> va permite sa inserati cadre in-line oriunde într-o
pagina Web obisnuita. Elementul <IFRAME> accepta toate atributele unui
element <FRAME> obisnuit, având în plus şi unele atribute specifice
elementului <image>, cum ar fi width, height, align, hspace şi vspace.
Probleme
1. Ce va afişa urmatorul cod HTML?
<HTML> <HEAD> </HEAD>
<FRAMESET rows="30, *">
<FRAME src="articol.doc">
<FRAME src="c:\windows\wewallpaper\tullips.html">
</FRAMESET> </HTML>
2. Este corect următorul cod HTML?
<HTML> <HEAD> </HEAD>
<BODY>
<FRAME src="Carte_web.doc">
<FRAME src="c:\carte_web\cap_web_5\ex_9_2.html">
</BODY> </HTML>
3. Să se scrie cod HTML pentru a crea 3 cadre, în linia 2, cadranul stânga
este inserat o pagină care are 3 legaturi, care se deschid în cadranul din
dreapta,de felul următor:
Carte WEB
Partea _I_ HML

Partea_II_ CSS

Partea _III_JavaScript

4. Să se scrie cod HTML pentru a afişa patru pagini într-o fereastră, în

formatul:

5. Să se scrie cod HTML pentru a afişa patru pagini într-o fereastră, în

formatul:

17
 6. Să se scrie cod HTML pentru a afişa 5 pagini într-o fereastră, în formatul:
nu există chenare interioare, chenarul exterior este albastru si de grosime 5

7. Ce va afişa codul HTML?

<FRAMESET rows="15%, *" frameborder="0">
<FRAME src="Site-ul meu">
<FRAMESET cols="30%, 2*, 3*" border="5" bordercolor="red”>
<FRAME src="pagina_1.html">
<FRAME src="pagina_2.html">
<FRAME src="pagina_3.html">
</FRAMESET>
</FRAMESET>
8. În exemplul de mai sus să se adauge o altă culoare şI dimensiune pentru
fiecare cadru creat.
9. Ce va crea tag-ul<FRAMESET rows="2*, 3*" cols="40%, *" border="5"
bordercolor="blue"> aflat în corpul unei pagini?
10. Să se creeze un cadru interioar , folosind IFRAME, în care să se deschidă
3 pagini html.

LecŃia a-10-a: Formulare

• Formularele sunt utilizate pentru transmiterea datelor catre o aplicatie pe parte
de client sau pe parte de server de la o adresa e-mail.
• Pentru a insera un formular, se utilizeaza elementul <FORM> împreuna cu
atributele specifice.
• Atributul action al elementului <FORM> stabileşte destinatarul datelor
transmise de catre formular(aplicatie pep arte de server sau adresa e-mail).
• Atributul method al elementului <FORM> determină metoda prin care datele
sunt transmise de catre formular(metoda GET adaugă datele la adresa URL,
metoda POST transmite datele într-o tranzactie separată).
• Atributul enctype al elementului <FORM> determina metoda de codificare
utilizata la transmiterea datelor.
• Elementele componente ale formularului se introduc în interiorul elementului
<FORM> .
• Puteti adauga tipuri diferite de elemente de formular precizand diferite valori
pentru atributul type al elementului <input>: text pentru campuri de text,
password penrtu parole, hidden pentru campuri ascunse, checkbox pentru
casete de validare, radio pentru butoane radio, image pentru butoane imagine,
file pentru incarcarea fisierelor, button pentru butoane generice, submit pentru
butoane de tip transmitere şi reset pentru butoane de tip anulare.
• Elementul <TEXTAREA> vă permite sa adăugati campuri de text xu mai
multe randuri.
• Elementul <BUTTON> va permite sa adaugati butoane particularizate.

18
 • Elementul <SELECT> va permite sa adaugati o lista de optiuni definite cu
elementul <option>. Utilizatorul nu va putea selecta decat o singura optiune,
cu exceptia cazului în care la elementul <SELECT> este adaugat atributul
multiple.
• Pentru toate componentele elementului <form> exista mai multe atribute cu
semnificatii similare, cum ar fi: name(identificator unic), value(o valoare
initiala sau eticheta de pe butoane), disable(dezactiveaza un
element),readonly(nu permite editarea valorii elementului),
maxlength(stabileste numarul maxim de caractere), size(marimea, în
caractere, a zonei vizibile), checked(pentru casete de validare şi butoane
radio), selected(pentru optiunile selectate), cols şi rows(pentru marimea zonei
vizibile la elementul <textarea>), src şi align(pentru elemente de tip
imagine).
• Atributul accesskey va permite sa selectati un element de formular folosind
scurtatura.
• Atributul tabindex va permite sa schimbati ordinea de parcurgere a
elementelor de formular cand se utilizeaza tasta TAB.
• Datele transmise de un formular prin metoda GET sunt adaugate la sfârşitul
adresei URL, dupa un simbol ?, sub forma de lista de perechi nume=valoare
separate prin simbolul &.

Probleme

1. Care sunt atributele elementului <FORM> atribute?

2. Care este diferenta dintre metodele GET şi POST de transmitere a datelor
dintr-un formular?
3. Să se scrie codul HTML pentru a crea un formular cu 3 casete de text:
nume, prenume, adresa şi un buton de transmitere cu numele GO .
4. Să se scrie codul HTML pentru a crea un formular cu:

2 casete de text: nume_prenume şi una cu numele unui examen

o caseta de tip parolă cu numele “cod student”

o caset ascunsă care să conŃină nota la examen

un buton de transmitere cu numele GO
5. Să se scrie codul HTML pentru a crea un formular care să conŃină un grup
de butoane radio: de forma

Aparitia publicatiei XX
 zilnic
 saptamanal
 lunar
 anual

6. Să se scrie codul HTML pentru a crea un formular care să conŃină 4 casete

de validare , cu posibilele publicatii cumparate, a doua fiind implicit
validatade forma:
Cumpar publicatiile

 adevarul
 cotidianul
 gandul
 cancan

19
 7. Ce va afişa brwser-ul ?
<B>Forma de invatamant</B>
<SELECT name="Catalog">
<OPTION value= "s1">Popescu Ion
<OPTION value= "s2">Ene Ana
<OPTION value= "s3">Popa Oana
<OPTION value= "s4">Ionescu Dan
<OPTION value= "s5">Grigore Dana
</SELECT>
8. Să se adauge la lista de mai sus atributele elementului SELECT pentru a
pute alege mai multe elemente din listă şi pentru a fi mereu vizibile 3
elemente ale listei, iar primul element al listei sa fie mereu selectat
9. La lista de mai sus sa se adauge un buton de transmitere care sa aibă o
imagine şi un buton de reinitializare a dtelor din formular
10. În formularul creat la 8 să se insereze o caseta de text ca re sa conŃină 5
rânduri şi 40 de coloane vizibile .

LecŃia a-11-a: Imagini hărŃi

• Puteti utiliza o imagine harta pentru a defini mai multe legături către resurse
Internet diferite.
• Inserarea unei imagini harta este un proces în 3 pasi, ce includ declararea
hartii, descrierea ei şi definirea legaturilor.
• Pentru a declara o imagine ca imagine harta, utilizati elementul <IMG>
impreuna cu atributul usemap,care creează o ancora pentru identificatorul de
harta.
• Pentru a descrie o harta, utilizati elementul <MAP> impreuna cu atributul
name, care are ca valoare un identificator de harta, şi inseraŃi în ele elemente
<AREA> pentru fiecare zona activă.
• Atributul shape al elementului <AREA> se utilizeaza la definirea tipului de
zona(rect, circle, poly sau default).
• Atributul coords al elementului <AREA> se utilizeaza la definirea
coordonatelor propriu-zise ale zonei active.
• Atributul href al elementului <AREA> se utilizeaza la definirea adresei URL a
resursei Internet indicate în zona activa.
• Atributul target al elementului <AREA> se utilizeaza la precizarea ferestrei în
care va fi incarcata noua resursa.
• De asemenea, puteti crea o imagine hartă folosind elementul <OBJECT>.

Probleme

1. Ce atribut obligatoriu trebuie să contină tag-ul IMG pentru ca imaginea

respectivă să fie considerat ca o hartă şi care e sintaxa acestuia?
2. Care sunt elementele care defineşte o hartă?
3. Ce efect are următorul cod HTML?
<HTML><head></head>
<IMG src=D:\CARTE_WEB_FINAL\Coperta.jpg USEMAP =#carte>
<BODY>
<MAP NAME="carte">
<AREA SHAPE=RECT COORDS= "114,775,1003,1018" HREF= "D:\CARTE _
WEB \Parte_I_HTML\cap1_web.doc">

20
 <AREA SHAPE=CIRCLE COORDS="884,449,159" HREF= "D:\ CARTE_ WEB
\Parte_I_HTML\cap7_web.doc">
<AREA SHAPE=POLY COORDS= "24,383,193,380,203,331,290, 332,461,597,
306,662,0,651,17,377,24,383" HREF="D:\CARTE_WEB \Parte_I_HTML \cap8_
web.doc">
</MAP></BODY></HTML>

LecŃia a-12-a:Multimedia

• Limbajul HTML are capacitatea de a ingloba fisiere multimedia.

• Browserele rezolva fisierele multimedia utilizand programe de completare sau
aplicatii ajutatoare.
• Tipul unui fisier multimedia este determinat de extensia de nume de fisier sau
de tipul MIME atasat.
• Puteti crea o legatura la un fisier multimedia utilizand elementul <A>
impreună cu atributul href.
• O resursă multimedia poate fi înglobată intr-o pagina Web utilizand elementul
<embed> împreuna cu atributele specifice:src(pentru precizarea fisierului
multimedia), type(pentru precizarea tipului MIME asociat),width şi height(
pentru precizarea spatiului din pagina Web alocat resursei multimedia).
• O metoda generală de inserare a oricarui tip de resurse(inclusiv fisiere
multimedia, contrale ActiveX şi miniaplicatii Java) consta în utilizarea
elementului <object> impreuna cu atributele specifice: data(pentru precizarea
adresei URL a resursei), type(pentru a preciza tipul MIME asociat),
classid(pentru a preciza identificatorul controlului ActiveX), width şi
height(pentru a preciza spatiul alocat resursei în pagina Web), align(pentru
alinierea resursei), hspace şi vspace(pentru definirea spatiului alb din jurul
resursei) şi border(pentru definirea unei borduri).
• La finalul descrierii limbajului HTML, descriem elementul MARQUEE, cu
ajutorul căruia putem realiza animaŃie. Sintaxa acestui element este
<MARQUEE> bloc </MARQUEE>, unde conŃinutul blocului se deplasează
într-o anumită direcŃie pe ecran şi poate conŃine text şi/sau imagini.
• Atributele elementului MARQUEE sunt:
direction – indică direcŃia de mişcare a blocului şi poate lua valorile:
• left – valoare implicită, de la dreapta la stânga
• right – de la stânga la dreapta
• down – de sus în jos
• up – de jos în sus
behavior – indică tipul de scroll şi poate lua valorile:
• scroll – valoare implicită, conŃinutul blocului se deplasează de la o
margine la alta continuu, părăsind ecranul şi apoi reapare
• slide – conŃinutul blocului se opreşte la marginea opusă apariŃiei
• alternate – conŃinutul blocului se deplasează alternativ de la o margine
la alta a ecranului fără să-l părăsească
scrolldelay – determină timpul în milisecunde între două afişări consecutive
ale blocului (valoarea implicită ese “85”).
scrollamount – determină numărul de pixeli cu care se mută conŃinutul
blocului la un pas (valoarea implicită este “6”)
loop – indică numărul de cicluri pe care le efectuează conŃinutul blocului într-
o execuŃie (valoare implicită “infinit”); acest atribut trebuie folosit cu

21
 atributul behavior=slide, altfel conŃinutul blocului dispare când se
termină ultimul ciclu
bgcolor – determină culoarea de fond a spaŃiului unde se deplasează
conŃinutul blocului
width /height - determină dimensiunea blocului în lăŃime/ în înălŃime şi se
exprimă în pixeli sau procente
vspace/hspace - determină spaŃiul alb din jurul blocului pe verticală/pe
orizontală

Probleme

1. Ce va crea următorul cod HTML?

<HTML> <HEAD> </HEAD><BODY>
<TABLE cellspacing="2">
<TR>
<TD><OBJECT data="univsh.jpg" width=200 height=200> </OBJECT>
<TD> <OBJECT data="facmat.jpg" width=200 height=250> </OBJECT>
</TR>
2. Ce va crea următorul cod HTML?
</TABLE> </BODY> </HTML>
<HTML><HEAD></HEAD> <BODY>
<MARQUEE>
Acesta este un anunt de publicitate la cartea web!
<IMG src=coperta.jpg width=150 height=150>
</MARQUEE> </BODY> </HTML>
3. Să se creeze o animaŃie a unei imagini care să se deplaseze de sus în jos,
conŃinutul blocului să se deplaseze alternativ, la 1 secunda, numărul de
pixeli la un pas este de 10, iar culoarea de fond este coral.
4. Să se creeze o animaŃie a unui bloc care conŃine un text şi o imagine, care
să se deplaseze de sus în jos, conŃinutul blocului să se deplaseze alternativ,
la 0.5 secunde, culoarea de fond este ivory, direcŃia de deplasare a blocului
să fie de la stânga la dreapta, iar blocul sa fie inalt de 40% din dimensiunea
ferestrei.

TEMA II
CSS (Cascading Style Sheets)
- Introducere în CSS
- Crearea stilurilor in_line
- Crearea foilor de stil interne unei pagini
- Crearea foilor de stil externe (fisiere .css)
- ProprietaŃi de Fonturi în CSS
- ProprietaŃi de Text în CSS
- Casete în CSS
- PoziŃionare în CSS

LecŃia a-13-a: Introducere în CSS

• CSS înseamnă Cascading Style Sheets(foi de stil în cascadă) şi va permite să
îmbunătaŃiŃi prezentarea unei pagini Web;

22
 • O foaie de stil constă într-o serie de reguli;
• O regulă este definită de un selector(care precizează unde se aplică regula) şi o
declaraŃie(care specifică un stil);
• DeclaraŃia este o serie de perechi proprietate:valoare delimitate prin simbolul
punct şi virgulă;
• ProprietăŃile sunt cuvinte rezervate;
• Valorile utilizează o sintaxă specifică;
• Pentru a defini un stil in-line, precizati valoarea style a unui element HTML;
• Pentru a defini un stil în interiorul unui document HTML, utilizaŃi un element
<STYLE> plasat în interiorul unui element <HEAD>.
• Pentru a defini un stil într-un fişier extern, creaŃi o foaie de stil şi, utilizând un
element <LINK> plasat în interiorul elementului <head>, cereŃi browser-ului
să afişeze documentul care face referire la foaia de stil.
• Atributele obligatorii pentru elementul <link> sunt: rel cu valoarea
”stylesheet”, type cu valoarea “text/css” şi href care are ca valoare adresa
URL a fisierului care conŃine foaia de stil;
• La orice elemente HTML pot fi atasate atribute universale.Aceste atribute
universale sunt: id(defineste un identificator unic), class(ataseaza elementul la
o clasa), style(ataseaza un stil), title(ataseaza un titlu), lang(defineste limba) şi
dir (defineste directia de afisare);
• CSS defineste prioritatea de aplicare a stilurilor la afisarea unui element: mai
intai stilurile in-line, apoi cele din document, apoi stilurile din fisiere externe
si, în final, stilul HTML;
• Un selector poate fi definit ca selector universal, de clasa, id, descendent,
copil, frate, adiacent, atribut sau grupat;
• Pentru a particulariza legăturile, utilizati pseudo-clasele: link, visited, hover,
active şi focus;
• Alte pseudo-clase includ: first-child, first-line şi first-letter.
• Pentru a insera un comentariu, utilizaŃi sintaxa limbajului C:/*...*/;
• Când atribuiŃi o valoare unei proprietăŃi, asiguraŃi-vă că valoarea se găseşte în
intervalul corespunzător proprietăŃii.

Probleme
1. Să se creeze stiluri in_line , pentru a insera 3 poze în celulele unui tabel cu
o linie şi trei coloane, fiecare cu proprietăŃile: border-width, border-style şi
border-color cu alte valori.
2. Să se formateze folosind stilurile in_line , un paragraf cu : scris de la
dreapta la stanga; cursiv, aldin, cu culoare verde; dimensiune 12;
3. Să se creeze foi de stil în pagină pentru :
- A - nesubliniat, culoare albastră, corp de literă courier, dimensiune 30;
- DIV- fundal galben, culoare text rosie, dimensiune 10
- SPAN – fundal verde, corp de litera rosu
4. Cum vor fi scrise elementele HTML coform următoarelor stiluri în pagină
?
<STYLE>
P{font-size:20pt;font-weight:light;color:red;text-align:center:}
*{font-style:italic;}
OL{font-size:15pt;background:cyan;}
LI{font-size:10pt;color:blue;}

23
 A{text-decoration:none;color:grown;font-size:15pt;}
</STYLE>
5. Se cosideră fişierul de stiluri sil.css
Codul fişierului stil-extern.css este:
DIV{font-size:20pt;font-weight:light;color:red;text-align:center;}
*{font-style:blue;}
OL{font-size:30pt;background:green;}
LI{font-size:15pt;color:blue}
A{text-decoration:none; color:BlueViolet;}
Să se creeze o pagină legată la fişierul sil.css care să conŃină elementele
din fişier (OL,LI,DIV )

6. Care este prioritatea tipurilor de stiluri?

7. Cum va fi format elementul OL din următoarea pagină?
<HTML><HEAD> <TITLE>Stiluri-cascada</TITLE>
<LINK type="text/css" rel="stylesheet" href="cascada.css">
<STYLE>
OL{color:#0000FF;}
</STYLE></HEAD>
<BODY>
<OL>Definirea stilurilor(stil intern: blue, extern: italic, fundal cyan)
<LI style="color :red"><B>Stil in-line</B> <BR>
<LI style="background:red"><B>Stil in pagina </B> <BR>
(<LI><B>In fisiere externe </B> <BR>
</OL> </BODY> </HTML>

Fişier extern: cascada.css

OL{font-style:italic;background:cyan;}

8. Să se creze două foi de stil pentru selctorul ID, cu numele #ID1 şi #ID2,
care au proprietăŃi diferite. Cu aceste stiluri sa se formateze 3 paragrafe,
primil cu ID!, al doilea cu iD@ şi al treulea cu ID1 şI ID2.
9. Să se creze două foi de stil pentru selectorii pseudo-clasă, first-child,
pentru prima linie a unui tablou şI pentru primul elemen al unei liste
ordonate.
10. Să se creze 4 foi de stil pentru selectorii pseudo-elemnt first-line şi first-
letter. Două blocuri P de formatează unul cu stilul first-line şi celălalt cu
stilul first-letter. Un bloc DIV se formatează cu stilul first-line, iar
blocul CENTER cu stilul first-letter.

LecŃia a-14-a: Clase de proprietăŃi în CSS

Fonturi în CSS
• Pentru a defini un font, utilizati proprietatea ‘font-family ’ şi atribuiŃi-i ca
valoare o listă de nume de fonturi separate prin virgula;
• Există cinci fonturi generice: serif, sans-serif, cursive, fantasy şi monospace;
• UtilizaŃi proprietatea ‘font-style’ pentru a atribui stilului de font valorile
normal, italic sau oblique;
• UtilizaŃi proprietatea ‘font-variant’ pentru a atribui variantei de font valorile
normal sau small-caps;

24
• UtilizaŃi proprietatea ‘font-weight’ pentru a preciza ingrosarea fontului;
• UtilizaŃi proprietatea ‘font-stretch’ pentru a preciza alungirea fontului;
• UtilizaŃi proprietatea ‘font-size’ pentru a preciza dimensiunea fontului;
• UtilizaŃi proprietatea ‘font-size-adjust’ pentru a stabili valoarea aspectului
fontului;
• UtilizaŃi proprietatea ‘font’ ca o scurtatura pentru definirea tuturor
proprietatilor de font utilizand o lista de valori delimitate prin spatii: <style>
<variant> <weight> <size> <family>;
• Pentru a obliga browserul să descarce şi să utilizeze un anumit font, inserati o
directivă font-face impreună cu o proprietate src ce are ca valoare adresa URL
a fontului.
Text în CSS
• CSS are mai multe proprietati care controleaza aspectul textului;
• Proprietatea ‘text-indent’ determina indentarea primului rand dintr-un bloc de
text;
• Proprietatea ‘text-align’ determina alinierea unui bloc de text;
• Proprietatea ‘text-decoration’ determina decoratiunile din
text(underline,overline, line-through sau blink);
• Proprietatea ‘text-shadow’ aseaza o umbra la text;
• Proprietatea ‘letter-spacing’ determina spatiul suplimentar dintre doua litere
adiacente;
• Proprietatea ‘word-spacing’ determina spatiul suplimentar dintre doua cuvinte
adiacente;
• Proprietatea ‘text-transform’ determina utlizarea majusculelor intr-un bloc de
text(uppercase, lowercase, none sau capitalize);
• Proprietatea ‘white-space‘ determina cum sunt interpretate spatiile albe(pre,
nowrap sau normal).
Casete în CSS
Orice element HTML este alcătuit sub formă de casetă formată din patru părŃi:
 Content (conŃinut) - conŃinutul format din text sau imagine
 Padding(Ńesătură) - zona dintre conŃinut şi bordură. Poate fi dimensionată
dar nu poate fi vizibilă printr-o culoare.
 Border (bordură) - marginea elementului care poate fi făcută vizibilă dacă
de exemplu îi se atribuie o culoare
 Margin(margine) - zona dintre casetă şi celălalte elemente. Nu este vizibilă
de către vizitatorii paginii.

25
 Elementele unei casete
O casetă poate fi redimensionată cu ajutorul proprietăŃiilor WIDTH şi
HEIGHT.

ProprietăŃi pentru padding

Paddingul (Ńesătura) este zona dintre conŃinut şi bordură şi are doar
caracteristica size. Există cinci proprietăŃi pentru a indica paddingul unui element şi
anume:
 padding-top
 padding-right
 padding-bottom
 padding-left
 padding – combinaŃie acelor de sus, valorile fiind date în ordinea (top,
right, bottom, left)
Valorile posibile sunt:
 o lăŃime - exprimă lăŃimea zonei de textură dată în: in, cm, mm, px, pt, pc,
em
 procent – exprimă lăŃimea în procente relativ la părinte

Proprietatea padding care este o combinaŃie a celor de mai sus, poate acepta 1,
2, 3 sau 4 valori. În tabelul de mai jos se dă lista de valori şi ordinea de atribuire a lor
pentru cele patru proprietăŃi de padding (top, right, bottom şi left).

Nr Valori Atribuiri
1 v1 Top=right=bottom=left=v1
2 v1 v2 Right=left=v1, top=bottom=v2
3 v1 v2 v3 Top=v1 left=right=v2 bottom=v3
4 v1 v2 v3 v4 Top=v1 right=v2 bottom=v3 left=v4
Ordinea de atribuirea valorilor
Acest tabel va fi valabil şi pentru proprietăŃile pentru borduri şi margini.
Un exemplu pentru aceasta proprietate este redat mai jos.
<HTML><HEAD><STYLE>
<HTML><HEAD><STYLE>
P{padding-top:5px; padding-right:2 cm; padding-bottom:0.1in; padding-left: 2cm;
color=#00FF00;}

26
OL{padding:5pt 20px 2ex 1cm; color:red;}
LI{color:blue;}
DIV {padding:8px;color:DarkGoldenRod;}
</STYLE>
</HEAD>
<BODY><BODY>
<P>O caseta are o zona in jurul textului numita padding </P>
<P>o casetă are o zona în jurul textului numita padding</P>
<OL>ProprietăŃile padding-ului
<LI>padding-left
<LI>padding-right
<LI>padding-top
<LI>padding-bottom
</OL>
<DIV> <SPAN style="font-weight:bold; background:yellow">
Padding-ul </SPAN> unei casete asociate unui element HTML are numai o caracteristică size
</DIV></BODY></HTML>

Proprietatea padding

ProprietăŃi pentru bordură

Există cinci proprietăŃi pentru bordură:
 border-top - bordura de sus
 border-right – bordura dreapta
 border-bottom – bordura de jos
 border-left – bordura din stânga
 border – combinaŃie a celor de mai sus

Pentru fiecare proprietate BORDER se pot stabili trei caracteristici:

 width – grosimea bordurii
 color – culoarea bordurii
 style – modelul bordurii

Valorile posibile pentru width sunt:
 o lăŃime – ce reprezintă lăŃimea fixă a bordurii sau a unei părti din ea
 thin (subŃire) /medium (mediu) / thick (gros)
Valorile posibile pentru color sunt
 un nume de culoare
 un cod RGB
Valorile posibile pentru style sunt:

27
 None / hidden / dotted / solid / double / groove / inset / outset / ridge / dashed /
inherit.
<HTML><HEAD><STYLE>
td {background:yellow; color:darkcyan;}
.bt {border-top-style:dashed; border-top-width:thick; border-top-color:blue;}
.br{border-right-style:groove;border-right-width:thin;border-right-color:purple;}
.bb{border-bottom-style:ridge;border-bottom-width:medium; border-bottom-
color:lime;}
.bl{border-left-style:solid;border-left-width:10pt; border-left-color:magenta;}
.bord{border-style:outset; border-width:0.5 in; border-color:red;}
</STYLE></HEAD>
<BODY>
<PRE>
<BUTTON class="bt">Bordura superioara</BUTTON>
<BUTTON class="br">Bordura dreapta</BUTTON> <BR>
<BUTTON class="bb">Bordura inferioara</BUTTON>
<BUTTON class="bl">Bordura stanga </BUTTON>
</PRE>
<TABLE class="bord">
<TR><TD>a11<TD>a12
<TR><TD>a21<TD>a22
</TABLE></BODY></HTML>

ProprietăŃi pentru borduri

Fiecare proprietate a bordurii poate acepta o listă de valori, separate prin spaŃiu şi are
ordinea: width style color, aşa cum reiese şi din exemplul de mai jos.
<HTML><HEAD>
<STYLE>
H2 {border:4pt inset coral; margin:2mm;}
DIV{border:0.07in dotted green; color:magenta;}
</STYLE></HEAD>
<BODY>
<H2>ProprietăŃi de <SPAN style="text-decoration:underline;font-weight:bold;"> Borduri
</SPAN> </H2>

28
<DIV>Bordura are trei caracteristici: grosime, stil şi culoare</DIV>
</BODY></HTML>

Proprietatea border cu listă de caracteristici

În cazul proprietăŃii BORDER cu cele trei caracteristici (width size şi color) valorile
pot fi liste cu 1, 2, 3 sau 4 elemente.
În exemplul de mai jos se dă o listă de culori, de stiluri şi grosimi pentru proprietatea
border. Ordinea în listă amintim că este sus, dreapta, jos, stânga .
<HTML><HEAD><STYLE>
H3 {border-width:8pt 7pt 9pt 6pt;
border-color:red green blue;
border-style:solid inset outset;}
</STYLE>
</HEAD>
<BODY>
<H3>Listă de valori pentru borduri</H3>
<UL>
<LI>grosime
<LI>culoare
<LI>stil
</UL>
</BODY </HTML>

Listă de valori pentru border

29
 ProprietăŃi pentru partea margin
Există cinci proprietăŃi pentru partea margin a casetei unui element:
 margin-left – pentru marginea stângă
 margin-right – pentru marginea dreaptă
 margin-top – pentru marginea de sus
 margin-bottom – pentru marginea de jos
 margin – o combinaŃie a celor de mai sus

ProprietăŃile margin -… au o singură caracteristică, size.

Valorile posibile sunt:
 o laŃime – reprezintă lăŃimea fixă a marginii ce poate fi o valoare întreagă pozitivă
sau negativă, exprimată în: cm, in, px, pt, pc, em.
 un procent – relativ de părinte
 în cazul în care folosim proprietatea margin valoarea poate fi o listă de 1,2,3,4
valori Exemplu:
<HTML>
<HEAD>
<STYLE>
blockquote {margin-top:0.01in;margin-right:20%;margin-bottom:2ex;margin-
left:10%;}
P{margin: -20pt 10ex 10px; color:SandyBrown ;}
DIV{margin:30 pt; color:red;}
SPAN{margin 100px 50px; background:cyan;}
</STYLE>
<BODY>
<BLOCKQUOTE>Acest bloc este un citat <SPAN>Omul care nu are nimic de
pierdut este cel mai greu de invins<BR>
(Goethe)</SPAN>BLOCKQUOTE>
<DIV>Acesta e un bloc de diviziune</DIV>
</BODY>
</HTML>

Proprietate margin
ProprietăŃi de culoare pentru casete
În CSS există mai multe proprietăŃi pentru culoare, descrise mai jos.
Proprietatea color – specifică culoarea textului pentru un element. Valorile posibile
sunt valorile atributului color din HTML:
 un nume de culoare – de exemplu blue
 cod RGB în hexazecimal - #0000FF

30
  cod RGB în zecimal - câte un număr pentru cele 3 culori roşu, verde şi albastru de
exemplu RGB(0,0,255) pentru blue
Proprietatea background-color permite să stabilim o culoare pentru fundalul casetei
unui element. Valori posibile sunt aceleaşi ca la proprietatea color.
Proprietatea background-image - permite să stabilim o imagine de fundal unei
casete. Dacă imaginea este mai mică decât suprafaŃa care trebuie afişată, atunci ea este
multiplicată astfel încat să cuprindă întreaga suprafaŃă a casetei elementului.
Valori posible sunt adrese URL a unor fişiere .gif, .jpg, .png, scrise în paranteze
rotunde şi prefixate de cuvântul cheie URL, astfel: background-image:URL(poza.jpg).
<HTML><HEAD><STYLE>
P{font-style:italic; text-transform:uppercase; color:yellow;}
BODY {background-color:red; background-image: URL(bliss.bmp);}
</STYLE>
<BODY>
<P>Acesta este un exemplu de utilizare a proprietăŃilor de culoare</P>
</BODY></HTML>

ProprietăŃi de culoare

Proprietatea background-attachment – permite ca imaginea să se deruleze sau nu,

odată cu pagina.
Valorile posibile ale acestei proprietăŃi sunt:
 fixed – imaginea de pe fundal rămâne fixă. Atunci când pagina se derulează cu
ajutorul barelor de defilare numai obiectele ferestrei defilează (text, alte imagini,
etc.)
 scroll – imaginea se derulează odată cu pagina. Aceasta este valoarea implicată.
Proprietatea background–repeat - se foloseşte pentru a indica modul de repetare a
unei imagini pe orizontală şi verticală. În cazul în care imaginea de fundal este mai mică decât
spaŃiul necesar unui element, atunci imaginea se repetă atât pe orizontală cât şi pe verticală
până acoperă acestă suprafaŃă. Se poate contola această repetare dând următoarele valori
acestei proprietăŃi:
 repeat – (valoare implicită) repetarea se face atât pe orizontală cât şi pe
verticală
 no-repeat – imaginea nu se repetă apare o singură dată în mijlocul casetei
 repeat-x – repetarea se face numai pe orizontală
 repear-y - repetarea se face numai pe verticală
Proprietatea background-position – precizează poziŃia din stânga sus a unei
imagini, în raport cu partea de sus-stânga a casetei elementului. Dacă pentru acesta
proprietatea se dă:
 o valoare – acesta reprezintă poziŃionarea pe orizontală
 două valori – se referă la poziŃionarea pe orizontală, respectiv pe verticală
Valorile posibile sunt:
 absolute – exprimate în: in, cm, mm, pt, px, em (de exemplu:1in 3cm înseamnă
1inch de partea stânga şi 3cm d3 partea de sus)

31
  procentual – relativ la colŃul stânga sus (de exemplu 50% 50% înseamnă că
imaginea este poziŃionată în centru)
 mixte – absolut şi procentual (de exemplu 20% 3cm)
 prin cuvinte cheie: left, center, right, top, bottom
Proprietatea background – este o combinaŃie a proprietăŃilor de culoare şi imagine
de fundal. Valoarea acestei proprietăŃi este o listă de valori a proprietăŃiilor de mai sus
separate prin spaŃiu şi având următoarea ordine.:
Background-attachments, background-color, background-image, background-
position şi background-repeat.
Exemplificarea acestei proprietăŃi se face prin codul de mai jos.
<HTML><HEAD></HEAD><BODY>
<H2 style="background:fixed yellow url(im2.gif) 300px 2cm repeat-y;">
Proprietatea background</H2>
<UL style="background:scroll cyan url(im7.bmp) no-repeat; line-
height:20pt;font-size:large;font-weight:900">
Ordinea proprietatilor lui background
<LI style= "background:scroll beige url(bullet.gif) 30% repeat-x; ">
background-attachment
<Li style= "background:scroll bisque url(im5.gif) 30% repeat;">
background-color
<LI style= "background:scroll coral url(tips.gif) 100% repeat-y; ">
background-image
<LI style= "background:scroll beige url(im4.gif) 30% repeat-x;">
background-position
<LI style= "background:scroll url(im6.gif) 100% repeat-y;">
background-repeat
</UL> </BODY> </HTML>

Proprietatea background:Background-attachments, background-color,

background-image, background- position şi background-repeat.

Probleme

32
 1. ScrieŃi paragraful următor “Un exemplu de paragraf formatat” cu stilul:
caseta P are: inaltimea bordura de forma solid grosime 1 cm, culoare
roşie, fundalul verde deschis, Ńesătura de dimensiuni 1cm,1in, textul să
fie aliniat la centru , cu font Arial, bold, italic
2. Exemplul de mai sus sa aibă pe fundal o imagine aflată pe web
3. FolosiŃi atribute pentru font şi text pentru a ascrie paragraful: ” Acest
text a fost scris subliniat, cu un cuvant taiat , unul barat, aliniat pe
centru, de grosime 600, de dimensiune large”.
4. FolosiŃi atribute pentru font şi text pentru a ascrie paragraful: ” Acest
text a fost scris identat la 15px, cu litere mari, spatiat între rinduri la
1cm, între litere la 1mm şi între cuvinte la 5pt”.
5. FolosiŃi atribute pentru casetă, font şi text pentru a ascrie paragraful:
” Acest text a fost scris de grosime subtire, dimensiune 15pt, litere
mici, italic, stil sans-serif, culoare text albastru, spatiere intre linii la
0,5cm, margini stinga 1cm, margini dreapta 2 cm, margini top 3cm,
padding, bordura grosime medie, culoare verde inchis, stil outset”.
6. Să se introducă o singură imagine de fundal la mijlocul ferestrei, care
rămine fixă.
7. Să se introducă o imagine care să se repete pe orizontală, poziŃionata
la 1/3 din partea stâga ferestrei şi 1/2 din înălŃimea ei(33%, 50.
8. Să se introducă o imagine care să defileze cu pagina, sa aibă fundal
coral, să se repete pe orizontală şi verticală.

LecŃia a-15-a: PoziŃionarea elementelor în pagină în CSS

Elementele HTML pot fi:
 elemente de nivel de bloc –sunt elementele care sunt afişate la rând nou (de
exemplu: P, DIV, TABLE, TR, OL, LI, UL, DL, DT, H1...H6)
 Elemenete de nivel de text (in-line) - sunt elemente care sunt afişate pe linia
curentă (de exemplu: B, I, IMG, BIG, SMALL ,S, U, SPAN, etc.).
Browser-ul când primeşte macheta unei pagini identifică:
 arborele documentului, care arată aranjarea elementelor într-un fişier
HTML
 tipul elementelor (de nivel de bloc sau inline)
 obiecte flotante
 obiecte poziŃionate
Arborele unei pagini
Aşezarea implicită a elementelor în pagină se mai numeşte şi aşezare în flux
normal. Orice element HTML poate fi privit ca o casetă (box) şi cu ajutorul stilurilor
se poate vizualiza caseta (culori de font, bordură, textură) şi dimensiunea (height şi
width).
Un element poate deŃine alte elemente, de exemplu DIV poate conŃine SPAN,
un element TD poate conŃine un element OL sau IMG. În acest caz spunem că
elementele sunt imbricate şi de asemenea, casetele corespunzătoare lor sunt imbricate.
Casetele imbricate vor fi aşezate de către browser în caseta părinte, la nivel de bloc
sau linie.
Această aşezare în flux normal generează grafic un arbore de elemente. O
pagină are doi copii: HEAD şi BODY. Se consideră frunze ale arborelui orice
secvenŃă de text care nu are copii.
<HTML> <HEAD>

33
<STYLE>
* {border-style:solid; border-color:blue;border-width:thin; margin:5pt}
body *{background:LightGreen;}
body ** {background:yellow;}
body ** *{background:cyan;line-height:70%}
body {border-color:red;border-style:dotted;}
</STYLE> </HEAD>
<BODY>
Pozitionarea casetelor in<B>flux normal</B>
si descoperirea <I>Arborelui paginii</I>
<P> Prietenul meu<IMG src ="friend.jpg" width="50" height="50"> Boby
<TABLE cellspacing=5 height=20>
<TR ><TD>a11<TD>a12
<TR><TD>a21<TD>a22
</TABLE>
</P>
<DIV style="padding:10pt 5pt ;">
<SPAN>
<B> Bloc de diviziune </SPAN> </B>
<OL style="padding:5pt 20pt 2pt;">Lista casetelor
<LI>Arbore - flux normal
<LI>Flotante <
LI>Pozitionate
</OL>
<TABLE cellspacing=5 height=20>
<TR><TD>b11<TD>b12
<TR><TD>b21<TD>b22
</TABLE></DIV></BODY> </HTML

HTML

HEAD BODY

FRUNZĂ B I P

FRUNZĂ IMG TABEL SPAN OL TABEL

TR TR B LI LI LI TR TR

34

TD TD TD TD TD TD TD TD
 Arborele unui document

Proprietatea Display
Css oferă posibilitatea de a schimba modul de afişare a tipului elementelor
(bloc şi inline), prin utilizarea proprietăŃii display.
Valorile posibile ale proprietăŃii display sunt:
 inline – elementele se afişează în continuarea rândului curent
 block – elementele se afişează la început de rând
 none – elementul nu se va afişa
Proprietatea Display poate fi aplicată la majoritatea elementelor HTML.
Dacă în exemplul de mai sus se adaugă în cod foaia de stil: *{display:block}

Proprietatea Display:block
Dacă se doreşte ca toate elementele să fie afişate inline, se va scrie următoarea
foaia de stil: *{display:inline}

35
 Proprietatea Display:inline
Se poate ca numai anumitor elemente să li se schimbe modul de afişare,
de exemplu, elementul de bloc TABEL dorim să fie afişat inline şi elementul de text B să fie
afişat la nivel de bloc. În acest caz, adăugăm în exemplul de mai sus, următoarele linii de cod
:
Table {display:inline}
B {display:block}

Proprietatea Display:inline şi block

Elemente flotante
Modul normal de aşezare a elementelor în pagină poate fi modificat cu
ajutorul obiectelor flotante şi poziŃionate.
Obiectele flotante se definesc cu ajutorul proprietăŃii float care se poate ataşa
la orice element. Valorile posibile sunt:
 none – caseta nu e flotantă
 right – casetă flotantă spre dreapta
 left – casetă flotantă spre stânga
CSS pentru elementele care nu acceptă atributul align (de exemplu OL, UL, etc.)
foloseşte o valoare În exemplul de mai sus folosim :
OL{float:left}; primul tabel, cu <TABEL style=”float:right”>, iar elementul IMG,
cu <IMG align=left>, atunci va apărea imaginea şi primul tabel aliniat la dreapta şi
lista aliniată la stânga, ca în figura de mai jos:

36
 Proprietatea float
Elemente poziŃionate
CSS oferă posibilitatea de a schimba fluxul normal de aşezare a elementelor în
pagină şi cu ajutorul proprietăŃii POSITION, care poate fi ataşată oricărui element în
foaia de stil sau ca valoare a atributului STYLE.
Valorile posibile sunt:
 static – aşezarea se face în flux normal (valoare implicită)
 absolute – elementul iese din fluxul normal şi este afişat la o distanŃă
relativă faŃă de primul părinte poziŃionat
 relative – elementul rămane în fluxul normal dar este poziŃionat la o distanŃă
relativă cu poziŃia sa normală (elementul se poate suprapune peste altele)
 ixed – elementul iese din fluxul normal şi e afişat într-o zonă vizibilă. El
rămâne fix când se derulează pagina cu barele de defilare
Marginile casetei corespunzătoare elementului poziŃionat sunt definite de
proprietăŃiile: top; right; bottom; left

PoziŃionarea absolută
PoziŃionarea absolută a unui element este relativă la primul părinte poziŃionat.
Dacă elementul care se doreşte a fi poziŃionat absolut nu are un părinte sau “stramoş”
poziŃionat, atunci el va fi poziŃionat relativ la colŃul stânga sus al ferestrei.
Pentru a poziŃiona absolut un element se foloseşte proprietatea
position:absolute şi se atribuie valori proprietăŃiilor top, bottom, left şi right.
<HTML><HEAD>
<STYLE>
IMG{position:absolute; left:50pt; top:30pt}
.parinte{position:absolute; left:50pt; top:50pt}
</STYLE></HEAD>
<BODY>
<P>Pozitionarea absoluta a unui tabel si a unei imagini </P>
<TABLE class="parinte" borde=2 style=cellspacing=5 height=50 >
<TR><TD>a11<TD> a12
<TR><TD>a21<TD>a22 <IMG src="imag1.gif">
</TABLE>
</BODY> </HTML>

37
 poziŃionarea absolută fată de părinte şî el poziŃionat

Proprietatea z-index

Dacă se modifică fluxul normal cu ajutorul elementelor flotante sau elemente

poziŃionate (absolute, relative, fixe) există posibilitatea ca anumite elemente să se
suprapună, aparând ca o stivă de casete, care sunt afişate în ordinea în care au fost
introduse. Dacă dorim să nu se suprapună casetele trebuie să fim foarte atenŃi la
scrierea coordonatelor marginilor (ceea ce este foarte greu.)
Proprietatea z-index ne ajută să stabilim ordinea de afişare a casetelor
suprapuse. Valorile posibile sunt:
 auto - valoarea implicită
 număr - număr întreg pozitiv care determină nivelul în stivă relativ la
părinte
În intreriorul aceluiaşi părinte sunt afişate casetele în ordinea
descrescătoare a numărului de nivel (valoarea lui z-index)

Probleme

1. Să se construiască arborele următorului document HTML:

<HTML><HEAD>
<STYLE>
P {background:yellow; height:50px; width:550px; border_width:10px;}
B {background:cyan height:10px; width:100px;}
I {{background:red; height:10px; width:150px}
</STYLE> </HEAD>
<BODY>
<P> Pozitionarea caseteleor in <B>flux normal</B> si crearea <I>Arborelui
paginii</I></P>
<P> Semn de Eclamare <IMG src=exclam.gif height=50 width=50>
<TABLE cellspacing=5 height=20 border=3 bordercolor=red>
<TR ><TD>a11<TD>a12
<TR><TD>a21<TD>a22
</TABLE> Tabel 1
</P>

38
 <P> Tabel 2
<B>
<TABLE cellspacing=5 height=20 border=4 bordercolor=brown>
<TR><TD>b11<TD>b12
<TR><TD>b21<TD>b22
</TABLE>
</B>
<TABLE cellspacing=5 height=20 border=5 bordercolor=darkblue>
<TR><TD>C11<TD>C12
<TR><TD>C21<TD>C22
</TABLE>
</P>
</BODY>
</HTML>

2. Să se scrie toate elementele in_line şi apoi in_block

3. Să se schimbe fluxul normal aliniind imaginea şi a primului tabel la
dreapta
4. Sa se poziŃioneze imaginea absolut faŃă de colŃul stânga sus

5. Să se poziŃioneze absolut elementu TD care contine imaginea

39
 6. Cum va poziŃiona browser-ul elementele confor codului HTML ?
<STYLE>
P {background:yellow; height:50px; width:300px;
border_width:10px;}
B {background:cyan height:10px; width:100px;}
I {{background:red; height:10px; width:150px}
Table {position:absolute; left:100 ;top:100;}
IMG {position:absolute; left:40; top:50}
</STYLE>
7. Săse poziŃioneze relativ imaginea astfel :

8. Ce va afişa browserul la intilnirea proprietăŃi Z-index

<STYLE>
#table{position:absolute;background-color:cyan; top:50; left:50; z- index:1;}
#table2{position:absolute; background-color:yellow;top:70; left:70;z-index2;}
#table3{position:absolute;background-color:coral;top:100;left:100;z-index:3;}
</STYLE>?
9. ScrieŃi cod HTML pentru a obŃine rezultatul de mai jos(imaginile din tabele
pot fi oarecare)

40
10. SchimbaŃi poziŃia tabelelor din imagine !

41
TEMA III
JavaScript
- Introducere în JavaScript
- Tipuri de date şi variabile
- Operatori: aritmetici, relaŃionali, logici,de atribuire, condiŃional
- InstrucŃiuni: if, if compusă, while, for, do..while
- FuncŃii : variabile locale şi globale, parametrii, recursivitate, funcŃii speciale
- Obiecte create de utilizator în JavaScript
- document.write
- Obiectul Math
- Obiectul String
- Obiectul Array
Cursul de referinŃă conŃine foarte multe exemple în JavaScript.

LecŃia a-16-a: JavaScript – Elemente de bază

JavaScript este un limbaj de programare cu caracteristici limitate, folosit
pentru a îmbunătăŃi HTML şi pentru a oferi paginilor web accesoriile necesare pentru
a lua decizii şi pentru a realiza elementele sofisticate ce sunt întâlnite în siturile web
de nivel profesionist. JavaScript nu este Java.
JavaScript este un limbaj de programare orientat pe obiect, care vă permite să
construiŃi aplicaŃii prin utilizarea obiectelor. Un obiect este un document, un buton sau
un alt element care apare într-un formular. Fiecare obiect are proprietăŃile sale —
informaŃii despre obiect, cum ar fi dimensiunile şi culoarea. De asemenea, fiecare
obiect are metodele sale, care sunt acŃiunile efectuate de către obiect, cum ar fi
prelucrarea unui formular atunci când utilizatorul execută clic pe butonul Submit.
AccedeŃi la proprietăŃile şi metodele unui obiect scriind numele obiectului,
urmat de un punct şi de numele proprietăŃii sau metodei pe care doriŃi să o utilizaŃi în
programul dumneavoastră JavaScript. Aceasta este denumită sintaxa cu punct.
O aplicaŃie JavaScript reacŃionează la evenimente care se petrec în timpul
rulării aplicaŃiei. Un eveniment este de obicei o acŃiune întreprinsă de persoanele care
folosesc aplicaŃia, de pildă un clic pe butonul Submit sau pe butonul Cancel. PermiteŃi
programului JavaScript să reacŃioneze la evenimente, definind rutine de tratare a
evenimentelor. O rutină de tratare a evenimentelor este o secŃiune din aplicaŃia
dumneavoastră care este apelată de fiecare dată când un anumit eveniment are loc în
timp ce aplicaŃia rulează.
Un program JavaScript este inclus între etichetele <SCRIPT> ale unei pagini
HTML. Etichetele <SCRIPT> pot fi scrise între etichetele <HEAD> şi/sau <BODY>
ale unei pagini web.
Variabile, Operatori şi expresii
Variabilele, operatorii şi expresiile sunt elementele fundamentale ale
limbajului JavaScript
Variabilele şi valorile literale sunt folosite impreuna cu operatorii pentru a
construi o expresie. Un operator este un simbol care ii arata browserului cum sa
calculeze o expresie. Un operator ii cere browserului sa efectueze operatia cu valorile
şi variabilele dintr-una sau din ambele parti ale operatorului. Valorile şi variabilele se
numesc operanzi.
Operatorii aritmetici sunt utilizati pentru a-i cere browserului sa efectueze
calcule aritmetice. Operatorii logici sunt utilizati pentru a combina doua expresii.
Operatorul de atribuire este folosit pentru a copia o valoare din partea stanga a

42
operatorului în partea dreapta a operatorului, care este, de obicei, o variabila.
Operatorii de comparatie compara doua valori. Operatorul conditional ii cere
browserului sa evalueze o situatie şi sa intreprinda o actiune daca situatia are caracter
de adevar şi o alta actiune în caz contrar.
Expresiile pot deveni complexe, mai ales atunci cand, în cadrul aceleiasi
expresii sunt efectuate mai multe operatii. Atunci cand calculeaza o expresie,
browserul respecta un set de reguli numit ordinea operatiilor(precedenta operatiilor).
Aceste reguli ii indica browserului în ce fel sa calculeze o expresie complexa. Puteti
simplifica o expresie complexa prin plasarea parantezelor în jurul sectiunii pe care
doriti ca browserul sa le execute acordandu-le prioritate.
Variabilele, operatorii şi expresiile sunt elemente fundamentale ale limbajului
JavaScript. Considerati-le caramizile şi mortarul constructiei unei aplicatii JavaScript.
în urmatorul capitol, veti folosi variabilele, operatorii şi expresiile pentru a ii cere
browserului sa ia o decizie şi sa execute declaratiile JavaScript în mod repetat în
cadrul unui program JavaScript.
Expresiile pot deveni complexe, mai ales atunci când în cadrul aceleiaşi
expresii sunt efectuate mai multe operaŃii. Atunci când calculează o expresie,
browserul respectă un set de reguli numit ordinea operaŃiilor (precedenŃa operaŃiilor).
Aceste reguli îi indică browserului în ce fel să calculeze o expresie complexă. PuteŃi
simplifica o expresie complexă prin plasarea parantezelor în jurul anumitor secŃiuni
pe care doriŃi ca browserul să le execute acordându-le prioritate.

Probleme întrebări

1. JavaScript este o versiune

a. a.. Java
b. LiveScript
c. C++
d. VBScript
2. Un program JavaScript trebuie să fie inclus în
a. Eticheta <object>
b. Eticheta <applet>
c. Eticheta <script>
d. Eticheta <cgi>
3. Butonul Submit este
a. Obiect
b. Metodă
c. Proprietate
d. Variabilă
4. Culoarea de fundal a unui document este
a. Obiect
b. Metodă
c. Proprietate
d. Variabilă

43
5. write( ) este :
a. Obiect
b. Metodă
c. Proprietate
d. Variabilă

6. Un punct este folosit pentru

a. A identifica un comentariu JavaScript
b. A separa liniile unui program JavaScript
c. A încheia o instrucŃiune JavaScript
d. A separa numele unui obiect de o proprietate sau de o metodă

7. Cum este denumită acŃiunea de executare a unui clic pe un buton al unui

formular afişat de programul dumneavoastră JavaScript?
a. Eveniment
b. ReacŃie
c. Element de tip rollover
d. Rollover al mouse-ul
8. Apelati memoria calculatorului utlilizand un
a. Operator
b. Nume de variabila
c. Valoare literala
d. Tip de variabila
9. Ce anume face browserul să întreprindă o acŃiune?
a. O expresie matematică
b. O expresie JavaScript
c. O instrucŃiune JavaScript
d. O expresie logică
10. In expresia 1 + 1, ce parte din expresie sunt numerele?
a. Operandul
b. Operatorul
c. Restul
d. Incrementatorul
11. In expresia 1 + 1, ce parte din expresie este semnul plus?
a. Operandul
b. Operatorul
c. Restul
d. Incrementatorul

44
 12. Ce se întâmplă în expresia ++a?
a. Valoarea lui a creşte cu 2.
b. Valoarea lui a creşte cu 1.
c. Valoarea lui a este înmulŃită cu sine.
d. NimicS; aceasta nu este o expresie JavaScript validă.
13. Ce face operatorul &&?
a. Este true dacă expresiile din dreapta şi din stânga sa sunt ambele adevărate.
b. Este true dacă expresiile din dreapta sau din stânga sa sunt adevărate.
c. Este true dacă nici una din expresiile din dreapta şi din stânga sa nu este
adevărată.
d. Combină expresia din dreapta sa cu expresia din stânga sa.
14. ++ poate fi şi la dreapta (c = a++) şi la stânga (c = ++a)
unei expresii, fără ca acest lucru să aibă vreo influenŃă asupra expresiei.
a. TRUE
b. FALSE
15. Expresia x + = y adună valoarea lui x cu cea a lui y şi
stochează suma în y.
a. TRUE
b. FALSE
16. Operatorul ! = transformă ceva adevărat în ceva fals.
a. TRUE
b. FALSE

LecŃia a-17-a:Instruciuni şi funcŃii

Instruciuni

Instructiunea if contine o expresie conditionala, şi un bloc de program. Daca

expresia conditionala are valoarea true, atunci browserul executa instructiunile din
cadrul blocului de program. Browserului i se pot oferi instructiuni alternative, prin
folosirea instructiunii elsein tandem cu instructiunea if. Daca instructiunea
conditionala este falsa, atunci browserul executa instructiunile din cadrul blocului de
program else.
Uneori veti dori ca browserul sa testeze alta conditie atunci cand expresia
conditionala din cadrul instructiunii if este falsa. Browserul poate fi determinat sa faca
acest lucru prin folosirea instructiunii if...else if. Partea else if a acestei instructiuni
contine o alta expresie conditionala şi instructiuni din cadrul blocului de program,
care sunt executate în cazul în care a doua expresie conditionala are valoarea true. O
alta versiune a instructiunii if este instructiunea if...else if...else, similara cu
instructiunea if...else, în care instructiunile din cadrul blocului de program else sunt
executate daca nici prima nici a doua expresie conditionala nu este adevarata.
Intructiunii switch...case determina browserul sa ia o decizie prin intermediul
programului dumneavoastra JavaScript. Partea switch din cadrul instructiunii contine
o valoare care este comparata cu valorile din partea case a instructiunii. Daca exista o
egalitate, atunci sunt executate instructiunile din partea case. Daca nu exista o

45
egalitate, aceste instructiuni sunt omise. Ultima instructiune din cadrul portiunii case
este reprezentata în mod obisnuit de instructiunea break. Instructiunea break ii cere
browseului sa iasa din cadrul instructiunii switch...case fara a mai evalua valorile
urmatoare. Instructiunea break poate fi folosita şi pentru a-i cere browserului sa iasa
din orice ciclu fara a fi necesara finalizarea acesteia. Daca valoarea de schimb nu este
egala cu nici una dintre valorile de caz, browserul executa instructiunile care apar
dupa sectiunea prestabilita a instructiunii switch...case. Sectiunea prestabilita este
optionala.
Un browser poate repeta instructiunile prin plasarea de instructiuni în cadrul
celor patru tipuri de cicluri: ciclu for, ciclul for in, ciclul while şi ciclul do...while.
Fiecare ciclu are o expresie conditionala ce trebuie indeplinita pentru ca browserul sa
intre în ciclu şi sa execute instructiunile din cadrul blocului de program al ciclului.
Exista o singura exceptie: instructiunile din ciclul do...while sunt executate cel putin o
data indiferent de valoarea true sau false a expresiei conditionale.

FuncŃii
FuncŃiile permit să impartim aplicatiile JavaScript pe grupuri de instructiuni,
fiecare din acestea efectuand un anumit fel de sarcini. Aceste grupuri se numesc
functii. Apelati o functie ori de cate ori doriti ca una dintre aceste sarcini sa fie
efectuata în programul dumneavoastra JavaScript.
Trebuie sa definiti o functie inainte sa o apelati. O definitie de functie consta
dintr-un nume de functie, paranteze şi blocul de program al functiei, loc unde plasati
instructiunile executate la apelarea functiei.
O functie poate detine toate informatiile de care are nevoie pentru indeplinirea
sarcinii. Alte functii au nevoie de informatii suplimentare, care sa le fie transferate de
instructiunea care apeleaza functiile . informatiile transferate unei functii se numesc
argumente.
Un argument este inclus între paranteze, în definitia functiei, şi utilizat ca
variabila în cadrul functiei. Pot fi folosite mai multe argumente; argumentele trebuie
sa fie separate prin virgula.
O functie poate returna o valoare instructiunii care a apelat functia, utilizand o
instructiune de retur. O instructiune de retur cuprinde cuvantul cheie return, urmat de
valoarea returnata de functie. Instructiunea care a apelat functia poate atribui valoarea
returnata unei variabile, poate folosi valoarea returnata în cadrul unei expresii sau
poate ignora valoarea returnata.
Apelati o functie utilizand numele de functie, urmat de paranteze. O functie
poate fi apelata de oriunde din programul JavaScript sau utilizand cod HTML din
pagina web.

Probleme întrebări

1. Ce ciclu execută instrucŃiuni indiferent de valoarea de adevăr sau fals a unei

expresii condiŃionale?
a. ciclul do...while
b. ciclul while
c. ciclul for
d. ciclul for in
2. Adevărat sau Fals. O instrucŃiune switch...case nu poate avea un caz prestabilit.
a. TRUE

46
 b. FALSE
3. Ce fel de ciclu determină browserul să execute cel puŃin o dată instrucŃiunile din
cadrul ciclului?
a. ciclul do...while
b. ciclul while
c. ciclul for
d. ciclul for in
4. Contorul ciclului for este folosit pentru a:
a. Creşte valoarea expresiei cu 1
b. Creşte sau descreşte valoarea contorului din ciclu cu 1
c. Limita numărul de instrucŃiuni din cadrul blocului de program
d. Limita rezultatele instrucŃiunilor din cadrul blocului de program
5. Un ciclu poate deveni ciclu infinit.
a. TRUE
b. FALSE
6. Ce ciclu este folosit pentru a parcurge un număr necunoscut de elemente
dintr-o listă?
a. ciclul do...while
b. ciclul while
c. ciclul for
d. ciclul for in
7. Adevărat sau Fals. Clauza default este folosită într-o instrucŃiune if pentru
a atribui variabilelor valorile prestabilite.
a. TRUE
b. FALSE
8. Care este scopul lui else într-o instrucŃiune if...else?
a. ConŃine instrucŃiuni ce sunt executate dacă expresia condiŃională este
true
b. Defineşte o altă expresie condiŃională pe care o evaluează browserul în
cazul în care prima expresie condiŃională este false
c. ConŃine instrucŃiuni care sunt executate dacă expresia condiŃională este
false
d. Se foloseşte pentru a imbrica o instrucŃiune if
9. Este necesară includerea unui iniŃializator în cadrul unui ciclu?
a. TRUE
b. FALSE
10. Browser-ului i se poate cere să evalueze fiecare caz în cadrul unei
instrucŃiuni switch...case, chiar dacă valoarea de schimb este egală cu o
valoare de caz.
a. TRUE
b. FALSE
11. In cadrul definiŃiei unei funcŃii, argumentele trebuie separate două câte
două prin virgulă?

47
 a. TRUE
b. FALSE
1 2. Un bloc de program este folosit într-un
a. Apel de funcŃie
b. DefiniŃie de funcŃie
c. Valoare returnată
d. Argument
13. Domeniul de valabilitate al unei variabile înseamnă
a. Mărimea unei variabile
b. Tipul de date al unei variabile
c. Partea dintr-o aplicaŃie JavaScript care poate accede la variabilă
d. Variabila este folosită ca valoare returnată pentru o funcŃie
14. InstrucŃiunea care apelează o funcŃie poate ignora o valoare
returnată de o funcŃie?
a. TRUE
b. FALSE
15. La o variabilă globală se poate accede
a. Doar din funcŃiile definite în programul JavaScript
b. Doar din afara unei funcŃii
c. Doar din funcŃia care a definit-o
d. Din orice parte a aplicaŃiei JavaScript
16. La o variabilă locală se poate accede
a. Doar din funcŃiile definite în programul JavaScript
b. Doar din afara unei funcŃii
c. Doar din funcŃia care a definit-o
d. Din orice parte a aplicaŃiei JavaScript
17. O funcŃie poate fi apelată de codul HTML dintr-o pagină web?
a. TRUE
b. FALSE
1 8. Toate funcŃiile trebuie definite în eticheta <head>?
a. TRUE
b. FALSE
19. Valorile transferate unei funcŃii trebuie să corespundă ca tip
de date argumentelor din definiŃia funcŃiei?
a. Adevărat
b. Fals
20. O variabilă este în afara domeniului de valabilitate dacă
a. InstrucŃiunea care apelează o funcŃie ignoră valoarea retumată de funcŃie
b. La variabilă nu se poate accede dintr-o instrucŃiune
c. O variabilă nu este definită într-o funcŃie
d. O variabilă este transferată unei funcŃii

48
 LecŃia a 18-a: OBIECTE

În limbajele de programare orientate pe obiect, deci şi în JavaScript,

elementele de bază sunt obiecte. Un obiect este un lucru din lumea înconjurătoare.
Obiectele sunt în esenŃă colecŃii de proprietăŃi şi metode. ProprietăŃile sunt valori, iar
metodele funcŃii. La membrii unui obiect (proprietăŃi şi metode) ne putem referi ori
prin numele obiectului, punct şi numele proprietăŃii sau metodei, sau cu ajutorul unui
tablou, astfel:
− nume_obiect.nume_proprietate/metoda
− nume_obiect[“proprietate/metoda”]
În JavaScirpt există obiecte create de utilizator, obiecte intrisenci şi obiecte ale
browser-ului. Obiectele browser-ului sunt obiecte care implică intervenŃia browser-
ului, ca de exemplu, obiectul document şi windows,.

Obiecte create de utilizator

În JavaScript există trei metode de a crea obiecte.

1. CostrucŃia obiectelor folosind funcŃia prototip

Din teoria limbajelor de programare orientate pe obiect se cunoaşte

faptul că obiectele se pot crea cu funcŃii prototip, numite şi constructori.
Un constructor este invocat folosind operatorul new, care rezervă spaŃiu de
memorie pentru obiect şi returnează adresa spaŃiului respectiv de memorie.
De exemplu, declaraŃia z=new complex(1,2), înseamnă că se rezervă memorie
pentru numărul complex 1+2i, şi adresa este încărcată în z, astfel:
1 2
z
Obiectul nou creat se poate invoca cu cuvântul this.
În exemplul următor se crează şi se iniŃializează obiectul vector. Se invocă
obiectul curent prin ambele metode: folosind caracterul “.”, pentru a ne referi la
proprietatea lungime vector, şi folosind parantezele drepte “[ ]”, pentru a ne referi la
componentele vectorului obiect.
Probleme1
<HTML> <HEAD>
<SCRIPT language="JavaScript">

function Initializare_vect(lung)
{
this.lungime=lung
for(i=0;i<this.lungime;i++); this[i]=0
}
</SCRIPT> </HEAD>
<BODY> <SCRIPT language="JavaScript">
vect=new Initializare_vect(20)
document.write("lungimea vectorului este "+ vect.lungime+ "<BR>")
for(i=0;i<vect.lungime;i++)
document.write(vect[i]+ " " )
</SCRIPT>
 </BODY></HTML>
Să considerm exemplul des utilizat în programarea orientată pe obiecte, şi
anume acela de a creare, modificare şi operaŃii cu numere complexe.
În codul de mai jos se crează şi se modifică un număr complex.
Problema 2

<HTML> <HEAD>
<SCRIPT language="JavaScript">
function complex(a,b)
{
this.real=a; this.imag=b
}
function modific(z)
{
z.real= 5 + ++z.real; z.imag=2 + ++z.imag
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
z = new complex(1,1)
document.write("z.real= " + z.real + " z.imaginar= " + z.imag +"<BR>")
modific(z)
document.write("Dupa modificarea parametrilor"+"<BR>")
document.write("z.real= " + z.real +" z.imag= "+z.imag )
</SCRIPT></BODY> </HTML>
2. Metoda de creare a obiectelor utilizând tipul Object

Un obiect poate fi creat şi cu ajutorul tipului Object. Să considerăm exemplul

din figura 2, în care se modifică un număr complex cu ajutorul funcŃiei modific().
Dacă se foloseşte tipul Object, nu mai este nevoie de funcŃia constructor complex(),
iar funcŃia modific() va fi considerată o metodă a obiectului creat. Vom avea astfel
codul:
Problema 3
<HTML> <HEAD>
<SCRIPT language="JavaScript">
z=new Object()
z.real=1 ;z.imag=1
z.modific=modific
function modific(z)
{z.real= 5 + ++z.real z.imag=2 + ++z.imag}
</SCRIPT>
</HEAD>
<BODY><B>Tipul Object </B><BR>
<SCRIPT language="JavaScript">
document.write("z.real= " + z.real + " z.imaginar= " + z.imag +"<BR>")
z.modific(z)
document.write("Dupa modificarea parametrilor "+" <BR>")
document.write("z.real= " + z.real +" z.imag= " + z.imag )
</SCRIPT> </BODY> </HTML>

50
 3. Metoda de creare a obiectelor folosind o listă
Această metodă constă în aceea prin care obiectului i se atribuie o listă de
componente. Componentele sunt incluse între acolade şi separate prin virgulă, astfel:
Obiect={propr1:val1;propr2=val2;…metoda1:nume1, metoda2:nume2, ..}

Problema 4
<HTML><HEAD>
<SCRIPT language="JavaScript">
z={real:2, imag:3, modific:modific}
function modific(z)
{z.real= 5 + ++z.realz.imag=2 + ++z.imag}
</SCRIPT>
</HEAD>
<BODY>
<B> Metoda a 3 de construire a obiectelor <BR>
folosind lista pentru declararea proprietatilor şi metodelor </B><BR>
<SCRIPT language="JavaScript">
var i
for (i în z) document.write(i+" ") document.write("<BR>")
for (i în z) document.write(z[i] + " ")
modific(z)
document.write("<BR>"+"Dupa modificarea parametrilor" + "<BR>")
document.write("z.real= " + z.real +" z.imag= " +z.imag)
</SCRIPT></BODY> </HTML>
Obiecte intriseci
În JavaScript există mai multe obiecte definite şi recunoscute de browser. În
această secŃiune se vor prezenta succint cele mai folosite obiecte intriseci ale
limbajului JavaScript: Math, Array şi String .
Obiectul “Math”
Obiectul Math conŃine o serie de proprietăŃi şi metode care permit efectuarea unor
calculelor matematice. Constantele sunt proprietăŃile obiectului iniŃializate. Cele mai utilizate
constante sunt : PI (3.14...) şi E ( 2,71...).
Metodele obiectului Math sunt funcŃii matematice, cunoscute ca funcŃii implicite ca şi
în alte limbaje de programare. Aceste funcŃii returnează o valoare, care poate fi număr real,
întreg, natural sau unghi în radiani.
Cele mai importante metode ale obiectului Math sunt:
• abs(x) – returnează valoarea absolută a numărului real x (modul)
• cos (x) – returnează cosinusul numărlui x
• sin(x) – returnează sinusul numărului x
• tan(x) -– returnează tangenta numărlui x
• acos(x) –arccosinus, returnează unghiul în radiani
• asin(x) -– arcsin, returnează unghiul în radiani
• atan (x) – arctagent, returnează unghiul în radiani
• floor(x) – returnează partea întreagă a numărului real x ([x])
• random( ) – returnează un număr aleator în [0,1)
• round(x) – returnează cel mai apropiat întreg de argumentul x (rotunjurea lui x)
• sqrt (x) – returnează radicalul numărului real x
• pow (x,y) – returnează x la puterea y
• exp(x) – returnează e la puterea x
• log(x) – returnează logaritm în baza e din x

51
Problema 5
<HTML> <HEAD> </HEAD> <BODY>
FUNCTII MATEMATICE - EXEMPLE
<SCRIPT language="JavaScript">
lert("Aria cercului de raza 5= " + Math.PI*Math.pow(5,2))
alert("abs(2.5) =" + Math.abs (-2.5 ) )
alert("[1.58]= " + Math.floor (1.58))
alert("[-1.58]= " + Math.floor (-1.58))
alert("Math.log(Math.pow(Math.E,4))= "+ Math.log(Math.pow(Math.E,4)))
alert("Math.log(Math.exp(4)) = " + Math.log(Math.exp(4)))
alert("Math.floor (1+10*Math.random()) " + Math.floor (1+10*Math.random()) + "
returneaza un numar natural intre 1 si 10")
</SCRIPT></BODY></HTML>
alert("lungimea unui segment " +" Math.sqrt(Math.pow((4-8),2)+Math.pow((5-2),2))= "
+ Math.sqrt(Math.pow((4-8),2)+Math.pow((5-2),2)))

Metode ale obiectului Math

Problema 6-modulul unui număr complex .
<HTML><HEAD><SCRIPT language="JavaScript">
function complex(a,b)
{ this.real=a; this.imag=b; this.modul=modul}
function modul()
{return Math.sqrt(this.real*this.real + this.imag*this.imag)}
</SCRIPT></HEAD>
<BODY> <B> Modulul unui număr complex </B> <BR>
<SCRIPT language="JavaScript">
z=new complex(3,4)
document.write("z.real= " +z.real + " z.imaginar= " + z.imag +"<BR>")
m=z.modul()
document.write("modulul numarului complex z= " + m)
</SCRIPT> </BODY> </HTML>

Metoda sqrt
a obiectului Math

52
 Tablouri şi siruri
Obiectul Array(Tablouri)

Un tablou are un nume şi cuprinde unul sau mai multe elemente. în JavaScript,
elementele sunt folosite aproape la fel ca variabilele. Fiecare element este identificat
de un indice. Indicele primului element este 0, al celui de-al doilea este 1 şi asa mai
departe. Un tablou se declară cu constructorul Array() şi operatorul new, într-o
declaraŃie de forma: [var] nume_vector= new Array().
O valoare poate fi atribuita unui element în doua moduri: plasând-o între
parantezele constructorului Array() la declararea tabloului sau utilizand operatorul de
atribuire în cadrul unei instructiuni JavaScript.
Puteti determina numarul de elemente dintr-un tablou utilizand proprietatea
length a obiectului tablou.
Puteti accede la valoarea unui element specificand numale tabloului, urmat de
indicele elementului, inclus intre paranteze drepte. Daca trebuie sa accedeti la toate
elementele tabloului, folositi un ciclu for. Initializatorul unui ciclu for este folosit ca
indice pentru elementele tabloului.
Obiectul tablou are mai multe metode pe care le puteti utiliza pentru a lucra cu
elementele tabloului. De exemplu, metoda sort() sorteaza elementele tabloului.
Matoda slice() ia o succesiune de elemente ale tabloului şi le foloseste pentru a crea
un tablou nou. Metodele concat() şi join() transforma elementele unui tablou în sir.
Metoda shift() sterge şi returneaza primul element al tabloului, iar apoi muta celelalte
sarcini cu cate o pozitie mai sus pe lista. Metoda push() creeaza un nou element, pe
care il adauga la sfarsitul tabloului si-i atribuie noului element valoarea pe care o
includeti intre pranteze. Metoda reverse() inverseaza ordinea valorilor din tablou.
Metoda pop() returneaza şi sterge ultimul element al tabloului.
Probleme întrebări
1. Acesta este primul element al tabloului products: products[l]?
a. TRUE
b. FALSE
2. Ce metodă aŃi folosi pentru a crea un şir din elementele unui tablou, separându-
le prin cratimă?
a. shift()
b. join()
c. concat ()
d. str join()
3. Ce metodă este folosită pentru a şterge un element de la sfârşitul (baza) unui
tablou?
a. push( )
b. pop ()
c. reverse ()
d. shift()
4. Ce metodă este folosită pentru a şterge primul element al unui tablou?
a. push( )
b. pop ()
c. reverse ()
d. shift()

53
 5. Ce metodă e folosită pentru a adăuga un nou element la sfârşitul unui tablou?
a. push( )
b. pop ()
c. reverse ()
d. s h i f t ( )
6. Metoda sort ( ) nu face altceva decât să sorteze textul?
a. TRUE
b. FALSE
7. Adevărat sau fals: dimensiunea unui tablou este egală cu indicele ultimului
element al tabloului?
a. TRUE
b. FALSE
8. In JavaScript un clement de tablou poate fi folosit la fel ca o
variabilă?
a. TRUE
b. FALSE
9. Ce metodă e folosită pentru a inversa elementele unui tablou?
a. reverse( )
b. d i v ( )
c. splice()
d. shift()
10. Ce efect produce următorul cod_
n=parseInt(prompt("Dim. vect n= ", 0))
v= new Array()
for(i=0;i<n;i++)
v[i]=parseInt(prompt("v[" +i +"]=", 0))
a. iniŃializează un vector cu zero
b. iniŃializează un vector cu o valoare cerută
c. crează un vector
d. declară un vector şi il iniŃializează cu o valoare cerută sau implicit cu zero

Obiectul String (Siruri )

În acesta lectie se prezinta manipularea şirurilor. Se prezintă operatorul
„+” de concatenare a două şiruri, pentru a alcătui un şir nou. De asemenea, se
prezintă şi metodele de extragere a unei părŃi din şir utilizând metodele split(),
slice(), metoda substring( ), şi metoda substr( ). Metoda split() împarte un şir
în părŃi numite subşiruri. utilizând un şir de delimitare pentru a detemiina părŃile.
Ambele funcŃii substring ( ) şi substr ( ) sunt folosite pentru a copia într-un alt şir
caractere selectate dintr-un şir. Un şir este de fapt un tablou de caractere, în care
fiecare caracter este un element al tabloului şi este identificat de un indice.
Metoda charAt() este utilizata pentru a copia un anumit caracter din tablou.
Metoda indexOf() este utilizată pentru a determina indicele unui anumit
caracter. Lungimea unui şir se determina utilizând valoarea length a obiectului
şir. Un şir se converteste într-un număr, utilizând metoda parseInt() şi metoda
parseFloat(). Un număr se converteşte într-un şir, utilizând metoda toString().

54
Probleme întrebări
1. Primul caracter al unui tablou de şir este sir[ 1] ?
a. TRUE
b. FALSE
2. Un număr în virgula mobilă este
a. Un număr întreg
b. O valoare zecimală
c. Un număr Unicode
3. Ce metodă se foloseste pentru a împărŃi un şir de date cu delimitare prin
virgulă într-un tablou de date?
a. parseFloat()
b. split()
c. parselnt()
d. charCodeAt()
4. Ce indică argumentul ce reprezintă poziŃia finală în metoda substring ( )''.
a.. PoziŃia ultimului caracter care este copiat în subşir
b. PoziŃia primului caracter care este copiat în subşir
c. PoziŃia caracterului care urmează după ultimul caracter copiat în subşir
d. PoziŃia caracterului care precede ultimul caracter din subşir
5. Ce indică al doilea argument al metodei substr () ?
a. PoziŃia ultimului caracter care este copiat în subşir
b. Numărul de caractere care trebuie copiate din şir în subşir
c. PoziŃia caracterului care precede ultimul caracter copiat în subşir
d. PoziŃia caracterului care precede ultimul caracter din subşir
6. Care este valoarea length a unui obiect şir?
a. Numărul total de caractere din şir
b. Indicele ultimului caracter din şir
c. Lungimea şirului, exclusiv spaŃiile
d. Lungimea şirului, exclusiv spaŃiile de la sfârşit
7. Indicele ultimului element din tabloul şirului are aceeaşi valoare cu lungimea
şirului?
a. TRUE
b. FALSE
8. Metoda parseint() nu poate fi utilizată în cazul unui număr zecimal?
a. TRUE
b. FALSE
9. Un şir de delimitare este utilizat de metoda split ( ) pentru a crea un tablou
cu elemente de informaŃie?
a. TRUE
b. FALSE

55
 LecŃia a-19-a:InteracŃiune JavaScript – HTML
Legătura dintre HTML şi JavaScript poate fi sintetizată în urmatorii paşi:
− Elementele HTML au atribute care caracterizează elementul respectiv. De
exemplu, elementul TABLE, are atributele: border, width, height, align,
valing, cellspacing, cellpadding, bordercolor, bgcolor, rules, frame.
Majoritatea elementelor HTML (excepŃie: body, head, html, base, basefont)
au atributul ID, sau NAME, după care elementul poate fi identificat.
− Sintaxa elementelor HTML este
<element atribut1 = valoare1 ….atribut n=valoare n) [….]</element>
În HTML nu se face distincŃie între literele mari şi cele mici când scriem
atribute, de exemplu atributul border sau BORDER sau Border semnifică
acelaşi lucru.
− În HTML există 18 tipuri de evenimente: onclick, onload, onunload,
ondblclick, onmouseover, onmouseout, onmousemove, onmouseup,
onmousedown, onfocus, onlbur, onkeypress, onkeydown, onkeyup,
onselect, onchange, onsubmit, onreset.
O componenta HTML poate recepŃiona enumite evenimente, de exemplu
elementul button, poate recepŃiona onclick, ondblclick.
− Pentru JavaScript, elementele HTML sunt obiecte. Atributele
componentelor HTML sunt în JavaScript, proprietăŃile obiectelor. În timpul
afişării unei pagini web, proprietăŃile obiectelor pot fi modificate dinamic
într-un script.
− O componentă HTML este o instanŃă a unui obiect. De exemplu, dacă avem
într-o pagină web următorul tag:
<IMG ID=”poza” SRC=”p1.jpg”>
 elementul IMG devine obiectul IMG
 o componentă a obiectului IMG este “poza”
 atributul src din HTML devine proprietatea src a obiectului poza.src
 p1.jpg este valoarea atributului src din HTML, şi valoarea proprietăŃii
src a obiectului poza.src
− În JavaScript se face distincŃie între litere mari şi mici, aşa că atributul SRC
din HTML trebuie scris ca proprietate în JavaScript cu litere mici.
− Evenimentele pot fi recepŃionate de anumite componente (asa cum am mai
precizat).
− Executarea unui eveniment, lansează în execuŃie o funcŃie scrisă într-un
script. Apelul funcŃiei se face în cadrul codului HTML, ca atribut al unui
element HTML. De exemplu, pentru evenimentele onload (încarcarea) şi
unload (descarcarea) unei pagini web, se crează două funcŃii, aşa cum reiese
din exemplul de mai jos:
Problema 7
<HTML> <HEAD>
<TITLE>Apel funcŃie din HTML</TITLE>
<SCRIPT language="JavaScript">
function salutare() {alert ("Bună, sunt Ana Ionescu")}
function la_revedere() {alert ("Pa, ne mai auzim la telefon")}
</SCRIPT> </HEAD>
<BODY onload="salutare()" onunload="la_revedere()">
</BODY></HTML>

56
Formulare şi tratarea evenimentelor

PuteŃi aduce un formular la viata utilizand JavaScript. Un formular cuprinde

elemente cum ar fi butoane radio şi casete de validare, utilizate pentru a strange
informatii de la utilizatori. Un element poate contine unul sau mai multe atribute, cum
ar fi un nume, şi alte valori care pot fi modificate de instructiuni dintr-un program
Java Script.
Un program JavaScript poate fi executat cand are loc un eveniment, în timp ce
utilizatorul tasteaza informatii intr-un formular. Un eveniment este ceva ce utilizatorul
efectueaza cu formularul, cum ar fi un clic pe un buton, selectarea unei casete de
validare sau deplasarea indicatorului mouse-ului în afara unui element. în acest capitol
ati invatat despre diferitele evenimente care au loc în timp ce formularul este afisat pe
ecran.
Identificati elementul caruia doriti sa-i raspundeti, utilizand numele
evenimentului din cadrul etichetei de deschidere a elementului, care este efectualt de
eveniment. Mai trebuie sa asociati numele functiei JavaScript care doriti sa fie apelata
cand are loc evenimentul.
Pot fi apelate doua tipuri de functii JavaScript: functii interne, definite de
JavaScript cum ar fi submit() şi reset(), şi functii pe care le definiti de obicei în
eticheta <head> a paginii. Puteti accede la orice aspect al unui element şi il puteti
modifica utilizand o functie JavaScript.
Elemente rollover
Un element rollover reprezinta o cale simpla de a va inviora pagina web pe
masura ce vizitatorii la pagina dumneavoastra trec cu mouse-ul peste pagina web. De
fiecare data cand indicatorul mouse-ului trece peste un obiect de pe pagina web,
browser-ul semnaleaza petrecerea unui eveniment onmouseover. Un eveniment
onmouseout este generat dupa aceea cand indicatorul mouse-ului se deplaseaza în
afara obiectului. Puteti proiecta pagina dumneavoastra web pentru a efectua o actiune
ca raspuns la aceste evenimente.
Specificati actiunea care trebuie sa aiba loc atribuind cate o valoare atributelor
onmouseover şi onmouseout ale etichetei <img> şi ale etichetei ancora. Valoarea
poate fi la fel de simpla ca resetarea valorii unui alt atribut, cum ar fi atributul src al
etichetei <img>, sau poate apela o functie JavaScript. O functie JavaScript poate fi
definita sa efectueze una sau mai multe actiuni ca raspuns la evenimentele
onmouseover şi onmouseout, incluzand mai multe instructiuni JavaScript în definitia
functiei.
Majoritatea browserelor recunosc elemente rollover; totusi alte browsere nu le
recunosc, asa ca va trebui sa testati compatibilitatea browserului cu obiectul
document.images. Daca nu recunoaste acest obiect, atunci browserul nu recunoaste
elemente rollover.
Probleme întrebări
1. O casetă de validare este un element de formular?
a. TRUE
b. FALSE
2. Care este programul ce prelucrează un formular?
a. Common Gateway Interface
b. Common Program Interface
c. Common Web Server Interface
d. Common Web Server Gateway

57
3. Ce eveniment are loc când un element intră în atenŃie?
a. onblur
b. onfocus
c. onselect
d. onchange
4. Ce eveniment are loc când un element iese din atenŃie?
a. onblur
b. onfocus
c. onselect
d. onchange
5. Ce eveniment are loc când un utilizator evidenŃiază text într-un câmp de text?
a. onblur
b. onfocus
c. onselect
d. onchange
6. Toate atributele, exceptând atributul de nume, pot fi schimbate
de un program JavaScript?
a. TRUE
b. FALSE
7. Valorile unui element nu pot fi schimbate după ce un
utilizator execută clic pe butonul Submit?
a. TRUE
b. FALSE
8. O funcŃie JavaScript poate schimba doar atributele unui element care
apelează funcŃia JavaScript?
a. TRUE
b. FALSE
9. O funcŃie internă
a. Trebuie definită în eticheta <head>
b. Trebuie definită în eticheta <body>
c. Trebuie definită de programator fie pentru a înainta, fie pentru a reseta
formularul
d. Nu e definită de programator
10 Să se scrie un formular care să conŃină un buton pe care e afişt la interval de 2
secunde alternativ, apasă şi mesaj. La apasăsare se va scrie “Bine ati venit la
firma noastra”.
<HTML><HEAD>
<SCRIPT language="JavaScript">
function Mesaj_firma() {
alert("buton apasat");}
function Schimba_Mesaj()
{ if (but.value =="apasat") but.value="mesaj";
else but.value="apasat";
setTimeout("Schimba_Mesaj()",2000);}
</SCRIPT></HEAD>
<BODY onload=" Schimba_Mesaj()">

58
 <INPUT id="but" type="button" value="apasat" onclick="Mesaj_firma()">
</BODY></HTML>

11. Să se realizeze un buton cu o imagine, pe care e scris un mesaj cu albastru de

dimensiune 20.
<HTML><HEAD>
<STYLE>
#but {height:70; width:80; background-image:url(imag.gif) ; font-size:20;
color:red;}
</STYLE> </HEAD>
<SCRIPT language="JavaScript">
function Mesaj() {
alert("buton apasat");}
</SCRIPT></HEAD>
<BODY onload=" Schimba_Mesaj()">
<INPUT id="but" type="button" value="apasat" onclick="Mesaj()">
</BODY></HTML>

LecŃia a-20-a: Elemente avansate JavaScript

Pentru a face legătura între HTML, JavaScript şi CSS trebuie ştiut că:
 Elementele HTML sunt obiecte în JavaScript. Fiecărui element i se poate
asocia un id cu ajutorul căruia avem acces la proprietăŃile obiectului
respectiv
 În JavaScript fiecare obiect are proprietatea style cu excepŃia
obiectelor:HTML, HEAD, BODY, BASE şi BASEFONT
 Proprietatea style în JavaScript este tot de tip obiect. Obiectul style are la
rândul lui alte obiecte corespunzătoare atributelor de stil din CSS.
 În JavaScript se foloseşte pentru a defini un stil pentru un obiect id-ul scris
cu litere mici, iar .class este folosit doar în HTML
 Numele acestor obiecte sunt:
o numele atributelor corespunzătoare din CSS, dar obligatoriu scrise cu
litere mici. De exemplu: color în CSS este tot color în JavaScript
o dacă numele din CSS a unui atribut are în componenŃă caracterul “-“
(linie), atunci acesta este eliminat şi ce urmează este scris cu literă
mare. De exemplu: font-size în CSS este fontSize în JavaScript
 Cu ajutorul limbajului JavaScript se pot schimba dinamic valorile
proprietăŃilor (obiectelor) obiectului style

Probleme

1. Să se formateze dinmic un bloc de text DIVatunci când se dă un dublu clic

pe suprafaŃa lui. Obiectul DIV recepŃionează evenimentul onclick, care va
apela o funcŃie ce va formata textul din blocul DIV si a unui paragraf.
<HTML><HEAD>
<SCRIPT language="JavaScript">
function stiluri() {
bl.style.fontSize="40"
bl.style.fontStyle="italic"
bl.style.color="red"
par.style.color="blue"}

59
 </SCRIPT></HEAD><BODY>
<DIV id="bl" ondblclick = "stiluri()">
Acesta este un text care se va formata conform stilurilor definite în funcŃia stiluri().
FuncŃia este apelată de evenimentul ondblclick, care este un atribut al elementului
DIV. Se observă că va fi formatat dinamic şi paragraful cu id=par
</DIV>
<P id="par"> Acesta este un alt text care va fi colorat cu albastru</P>
</BODY></HTML>

2. În acest exemplu se realizează afişarea unui text, care iniŃial nu e vizibil şi

treptat se colorează intens. Se utilizează codul RGB. Culoarea albă are
#FFFFFF, iar blue are codul #0000FF.
<HTML><HEAD> <STYLE>
#par { color:#FFFFFF; font-size:20; font-style:italic;}
</STYLE>
<SCRIPT language="JavaScript">
i=255, rel=0
function Aparitie()
{ i--
par.style.color=255*256*256+256*i+i
rel=setTimeout ("Aparitie()" , 5)
if(i==0) clearTimeout(rel)
p1.style.color="blue" }
</SCRIPT></HEAD>
<BODY onload="Aparitie() ">
<Div id="par"> Acesta este un text care se va lumina cind se incarca pagina
</Div>
<P id="p1">Acesta este alt text care nu suporta modificare</P>
3. Să se scrie un cod şi scripturi pentru a defila pe orizontala un tabel care
contine date despre ora, data. Odată afişată o caracteristică, aceasta va
staŃiona o perioadă pe ecran, după care va dispare şi va apărea la sfârşitul
celorlalte, după care din nou totul se deplasează pe verticală. PoziŃionarea este
absolută, faŃă de colŃul stânga-sus. Pentru aceasta se foloseşte atributul top.
Data Ora
12/2/2008 8:48 PM

Obiectul WINDOW
Ferastra este un obiect foarte folosit. Metodele obiectului ferastră: alert(),
prompt(), confirm() şi setTimeout(),: open(), close(), focus(), blur(), scrollTo(), back(),
forward() şi stop().

60
 Puteti deschide o nouă fereastră apeland metoda window.open() din programul
dumneavoastra JavaScript. Metoda window.open() determina browserul sa deschida o
noua fereastra pe ecran. Nu trebuie sa-i transferati metodei window.open() vreun
parametru daca doriti sa folositi parametrii şi pozitia standard pentru ferestre,
determinata de browser.
Totusi puteti specifica dimensiunea şi stilul ferestrei transferand metodei
window.open() parametrii adecvati. Metoda window.open() accepta trei parametri: o
referinta la continutul noii ferestre, numele noii ferestre şi un sir care stabileste
diferite stiluri de fereastra: directories, location, menubar, resizable, scollbar, status,
toolbar, height, width.
Pozitia ferestrei poate fi stabilita explicit, specificand coordonatele în pixeli
pentru coltul din stanga sus al ferestrei. Unii programatori în JavaScript stabilesc
coltul din stanga-sus al noii ferestre în raport cu rezolutia ecranului, adunand sau
scazand pixeli din parametrii sceen.width şi screen.height.
Dupa deschiderea unei noi ferestre, puteti utiliza metoda document.write()
pentru a scrie etichete HTML şi text în noua fereastra, permitandu-va sa utilizati
JavaScript ca sa creati continut dinamic pentru ferestre-dar numai daca ferestrele se
afla în acelasi domeniu.
De obicei doar o fereastră este activă (are focus) deşi sunt site-uri care afişează mai
multe ferestre cu reclame. Când o fereastră este activă, este vizibilă pe ecran şi poate
recepŃiona evenimentele de la mouse şi tastatură.
Pentru a activa o fereastră se poate face atât cu un clic pe fereastra respectivă, cât şi
cu metoda focus(). O fereastră inactiva se poate afla atât pe ecran cât şi pe bara de stare.
Pentru a dezactiva o fereastră (pierde focus) se execută clic pe suprafaŃa altei ferestre sau se
foloseşte metoda blur(), în acest ultim caz fereastra nu mai poate fi pe ecran ci numai pe bara
de stare.
Problemă
1. Se deschide o ferestra care are menubar,resizable, scollbar, status, toolbar,
height=40%, width50%.
<HTML><HEAD>
<SCRIPT language="JavaScript">
function Deschide_fereastra()
{fereastra=window.open("http://www.edu.ro/index.php/articles/c108/",
"univ","menubar=yes, status=yes, toolbar=yes, resizable=yes, left=0,
top=0, height=300, width=300")}
function Inchide_fereastra() { fereastra.close()}
</SCRIPT> </HEAD>
<BODY>
<INPUT type="button" name="Deschide"
onclick="Deschide_fereastra()"> <BR>
<INPUT type="button" name="Inchide"
onclick="Inchide_fereastra()">
<BODY></HTML>

2. Să se deschidă mai multe ferestre vide, apoi să se închidă

3. Să se deschidă o nouă fereastră care va insera o pagina web. În fereastra
principală se crează trei butoane pentru: deschiderea ferestrei, activarea ei şi
respectiv dezactivarea ei.
4. Să se scrie un cod pentru a apela metoda scrollTo(x,y) şi un buton în corpul
programului care să apeleze funcŃia

61
Obiectul DOCUMENT
Obiectul document este şi el ca şi obiectul window un obiect des utilizat în
JavaScript. Despre unele metode şi proprietăŃi ale obiectului (document.write(),
document.images, document.forms, etc.) .
Metoda write() – a fost prezentată având nevoie să fie folosită în
exemplificări. Amintim că ea este utilizată pentru a scrie în document şi se aplică sub
forma document.write(text).
Dacă textul conŃine tag-uri HTML, browser-ul interpretează tag-urile şi le
afişează.

ProprietăŃile de culoare sunt mai rar folosite din cauză că este mult mai util să
se folosească stilurile. ProprietăŃile de culoare sunt pentru fond, font şi legături.
Acestea sunt:
− bgColor – pentru culoarea de fond a documentului
− fgColor – pentru culoarea fontului
− linkColor – culoarea pentru legături (textul legăturilor)

PROPRIETATEA ALL

Proprietatea all este cea mai importantă proprietate a obiectului document.

Este o proprietate de tip obiect, care are la rândul ei alte proprietăŃi şi metode. Este un
obiect vector al tuturor elementelor care se găsesc într-o pagină, aşa cum forms,
images sunt obiecte vector al tuturor formularelor, respectiv al tuturor imaginilor
dintr-o pagină.
Fiecare element al vectorului all este tot un obiect. De exemplu, elemente
(obiecte) ale vectorului all sunt: HTML, HEAD, BODY, câte un element pentru
fiecare imagine (IMG), paragraf (P), etc.
Cele mai importante proprietăŃi ale obiectului vector all sunt:
− tagName – reŃine tipul, de exemplu IMG, P, etc. Dacă există de exemplu o
imagine într-o celulă a unui tabel se va afişa TABLE, TR, TH sau TD, IMG
− length – indică numărul de elemente ale vectorului all
− id – afişează id-ul elementelor pentru care atributul id a fost definit
Metodele obiectului all[i] sunt:
− item(id) – returnează elementul cu id indicat. În exemplul de mai jos se scrie
valoarea unui buton, de exemplu “Activeaza()”
tags(tip) – returnează un vector de un tip dat. Următorul exemplu probează
aceste proprietăŃi ale obiectului all[i].

Probleme

1. Ce va afişa scriptul?
<Script language=”JavaScript”>
document.write(“<A href=”http://www.edu.ro> Informatii MEC</A>)
document.write(“<BR>”)
document.write(“<IMG src=casa.jpg>”
</Script
2. Să se creeze o funcŃie care atunci când va fi apelată va colora în cyan documentul,
textul cu verde şi legăturile cu brown..
<HTML><HEAD>

62
 <SCRIPT language="JavaScript">
function Coloreaza() {
document.bgColor="cyan "
document.fgColoor="verde "
document.linkColor="brown"}
</SCRIPT></HEAD>
<BODY>
Un exemplu pentru proprietăŃile de coloare
<A href="www.teora.ro">Editura</A><BR>
<A href="www.teora.ro/arta">Arta</A><BR>
<INPUT type="button" name="Culoare" value="Coloreaza"
onclick="Coloreaza()">
</BODY></HTML>
3. Să se creeze o funcŃie care va afişa atât tipul tuturor elementelor unei pagini web cât
şi id-ul lor.
<HTML> <HEAD>
<Style>
#par{font-size:12;color:red;font-family:curier,arial;text-transform:uppercase}
</Style>
<SCRIPT language="JavaScript">
function Afiseaza()
{for (i=0; i<=document.all.length; i++)
document.write(document.all[i].tagName +" ;")
if (document.all[i].id != 0)
alert (document.all[i].id)}}
</SCRIPT></HEAD>
<BODY>
<P id="d"> lista elementelor paginii si a id-uri </P>
<SCRIPT language="JavaScript">
Afiseaza()
</SCRIPT></BODY></HTML>
</SCRIPT>

4. Codul HTML următor returnează elementul cu id-ul indicat

<HTML><HEAD>
<SCRIPT language="JavaScript">
function Afiseaza()
{alert(document.all.item("button").value)}
</SCRIPT></HEAD>
<BODY>
<INPUT type="button" id="button" value="Activeaza"
onclick="Afiseaza()">
</BODY></HTML>

63
 5. Să se returnează un vector de un tip dat folosind funcŃia tags(tip). De
exemplu, să se numere toate elemente de tip DIV dintr-o pagina şi le
colorează în violet.

Proprietatea images a obiectului document

În JavaScript elementul html IMG, devine obiectul IMG, care are ca
proprietăŃi, atributele elementului IMG enumerate mai sus, cu excepŃia atributului ID.
Evenimentele recepŃionate de elementul IMG sunt:
− onclick – evenimentul se produce când se execută un clic pe un obiect aflat
pe pagină
− ondblclick – evenimentul se produce când se execută dublu clic pe un obiect
− onmousemove – evenimentul se produce, în mod continuu, când cursorul
mouse-ului se mişcă pe un obiect
− onmouseover – evenimentul se produce, o singură dată, cand se trece cu
mouse-ul peste un obiect
− onmouseout – evenimentul se produce când mouse-ul părăseşte suprafaŃa
unui obiect

Images este vector care conŃine toate imaginile dintr-un document. Fiecărei
imagini i se asociază câte un element de tablou în funcŃie de ordinea imaginilor în
pagină. FuncŃia următoare afişează sursa imaginilor dintr-un document.

function imagini() {
for (i=0; i<document.images.length; i++)
alert(document.images[i].src)}
Probleme
1. Obiectul IMG recepŃionează evenimentul onclick. În urma acestui eveniment
imaginea va evidenŃia imaginea, înconjurând-o cu un chenar de grosimea 3.
Cu metoda directă vom avea codul:
<HTML><TITLE>ONCLIK</TITLE>
<HEAD>
</HEAD>
<BODY>
<IMG height="100" width="100" border=2 src="im1.jpg" onclick="border =3”>
</BODY>
</HTML>
Cu metoda indirectă avem :
<HTML>
<HEAD><TITLE>ONCLIK</TITLE>
<SCRIPT language = "JavaScript">
function Afiseaza()
{floare.border=3}
</SCRIPT>
</HEAD></BODY>
<IMG ID="floare" src="im1.jpg" height="100" width="100 onclick="Afiseaza()">
</BODY></HTML>

Dacă atributul onclick din ambele se înlocuieşte cu atributul ondblclick efectul

este acelaşi, diferenŃa constă în faptul că trebuie executat dublu clic pe imagine.

64
 2. Să se măreasca continuu o imagine în laŃime când ne aflăm cu mouse-ul
deasupra ei folosind evenimentul onmousemove, prin cele două metode:
<HTML>
<HEAD><TITLE>ONMOUSEMOVE</TITLE>
</HEAD>
<BODY>
<IMG ID="imag" src="im.jpg" height="50" width="50"
onmousemove="im.width+=3">

</BODY><HTML>
<HTML><HEAD><TITLE>ONMOUSEMOVE</TITLE>
<SCRIPT language = "JavaScript">
function Mareste(){
floare.width ++}
</SCRIPT>
<BODY>
<IMG ID="imag" src="im.jpg" height="100" width="100"
onmousemove="Mareste()">
</BODY></HTML>

3. Să se folosească evenimentul onmouseover pentru a aduce o imagine (un

rollover) pe ecran când mouse-ul trece peste o imagine. Se va reveni asupra
modificărilor făcute de producerea evenimentului onmouseover, se utilizează
evenimentul onmouseout care are loc atunci când mouse-ul părăseşte obiectul
respectiv.
Metoda directă:
<HTML><HEAD><TITLE>ONMOUSEOVER SI ONMOUSEOUT</TITLE>
</HEAD>
<BODY>
<IMG height="100" width="100" src="flori.jpg"
onmouseover="src=im11.jpg" onmouseout="src ='im2.jpg'">
</BODY></HTML>
Cu metoda indirectă
<HTML>
<HEAD><TITLE>ONMOUSEOVER SI ONMOUSEOUT</TITLE>
<SCRIPT language = “JavaScript”>
function Schimba()
{ imag.src=”im2.jpg”}
function Revine()
{ imag.src=”im1.jpg” }
</SCRIPT></HEAD>
<BODY>
<IMG ID=”imag” src=”im1.jpg” onmouseover=Schimba()
onmouseout=Revine()>
</BODY></HTML>
4. Să sse creeze o animaŃie folosind evenimentele onmouseover sau onclick. Intr-un
vector se încarcă 3 poze pe rând la 1 secundă , creind impresia de animaŃie.
Orice obiect are metodele constructor şi destructor, înseamnă că obiectele
image şi array au constructorul new Image() şi new array.

65
TEMA III- PHP
LecŃia a-21-a: Elemente de baza ale limbajului PHP
Vor fi prezentate urmatoarele informatii:
• Obtinerea pachetului PHP
• Configurarea mediului de dezvoltare
• Crearea si rularea unui script PHP
• Combinarea cu codul HTML
• Afisarea documentelor “incluse”
• Rularea scripturilor PHP din linia de comanda
• Adaugarea comentariilor in scripturi
• Manipularea datelor:variabilele
• Atribuirea valorilor catre variabile
• Interpolarea variabilelor in siruri de caractere
• Crearea variabilelor variabile
• Crearea constantelor
• Manipularea tipurilor de date

În acest capitol se descrie modul de obŃinere a pachetului PHP, configurarea

mediului de dezvoltare, crearea şi rularea unui script PHP, combinarea cu codul
HTML şi adăugarea comentariilor în scripturi.
“PHP” este acronim pentru “Hypertext Preprocesor” (preprocesor de
hipertext), ceea ce indică faptul că PHP manipulează datele pe care le trimite
utilizatorulde pe calculatorul personal şi trimiterea către browser-ul utilizatorului a
rezultatelor prelucrărilor. “PHP” mai este cunoscut şi ca acronim pentru “Personal
Home Page”(pagină de bază personală), adică a fost creat în scopul realizării de
pagini proprii web în mod interactiv.
Cu ajutorul acestui limbaj se poate renunŃa la paginile web statice şi
invariabile şi crea pagini în funcŃie de ce se doreşe a se vedea în timp real. De
asemenea, se poate crea formulare, să se interogheze baze de date sau să se deseneze
interactiv elemente grafice.
Scripturile scrise în PHP se instalează pe un server web Aceste scripturi au
rolul de a prelucra datele pe care le trimite utilizatorul de pe calculatorul personal şi
de a trimite într-un browser rezultatele prelucrărilor.
Deoarece se lucrează direct pe server trebuie utilizat FTP-ul cu un program
corespunzător (de exemplu, WS-FTP)
În PHP se pot crea fişiere ceea ce în Java Script nu este permis şi de asemenea,
se poate lucra cu baze de date MySQL.

Instalarea Pachetului PHP

Pentru a putea utiliza limbajul PHP trebuie sa se apeleze la un ISP(Internet Server

Provider) care acceptă acest limbaj. Pentru a obŃine o listă a furnizorilor ISP se poate vizita
pagina de web www.php.net/links.php.
Există şi posibilitatea de a instala interpretorul PHP pe calculatorul personal, pentru a
testa scripturile pe masură ce sunt create. În unele sisteme de operare cum e Linux şi Unix, se
încarcă automat interpretorul de PHP. În alte sisteme de operare cum ar fi Windows,
interpretorul PHP trebuie descărcat şi instalat.

66
 În Windows, pentru a folosi interprtorul PHP trebuie să avem un server de web, cum
ar fi Apache sau Microsoft Internet Information Services(IIS). La adresa
http://apache.org/download.cgi se descarcă şi se execută dublu clic pe fişierul
apache_2.0.6_win32-x86-no_ss1.msi pentru a instala serverul Apache.
Pentru serverul IIS în Windows XP se foloseşte din Control Panel,
pictograma Add/Remove Programs şi aici clic pe opŃiunea Add/Remove Windows
Components şi apoi selectând opŃiunea Internet Information Services(IIS).
InstrucŃiunile de instalare precum şi documentaŃia pentru PHP pot fi descărcate de la
adresa http://www.php.net/download-docs.php, apoi fişierul fisierul php-5.2.5-win32-
installer.msi, iar la Ńara românia fişierul ro.php.net conŃine suportul PHP de bază. Acest fişier
configurează automat serverul Apache.

Configurarea mediului de dezvoltare

Pentru a lucra în PHP, trebuie configurat mediul de dezvoltare, care include un

editor de text cum ar fi Notepad, WordPad, sau un mediu integrat de dezvoltare PHP
(IDE acronim pentru Integral Development Enviroment). Mediile de dezvoltare
integrate oferă unele instrumente pe care nu le au editoarele de texte, cum ar fi:
• evidenŃierea sintaxei (unele cuvinte cheie din PHP sunt afişate cu anumite culori)
• verificarea automata a textului, prin care se evidenŃiază instrucŃiunile Php
invalide
• dezvoltarea automată, prin care se poate încărca pe serverul furnizorului ISP
(Internet Server Provider) sau pe serverul local paginile (fişierele ) PHP realizate,
prin selectarea unei comenzi din meniu sau prin apăsarea pe un buton.
Unul din cele mai folosite medii de dezvoltare este Zend Studio, care rulează
sub Windows şi Linux, realizat de cei care au facut şi motorul Zend, care se află în
nucleul PHP şi se poate descarca de la adresa www.zend.com/store/products/zend-
studio.php .
Fişierele PHP au extensia .php şi conŃin cod HTML şi scripturi PHP.

Primele noŃiuni despre un script PHP

Scripturile PHP sunt cuprinse între etichetele <?php şi ?>. In aceeaşi pagină
se poate adăuga şi cod HTML, cu condiŃia ca acesta să fie plasat în afara etichetelor
<?php şi ?>. Scripturile sunt formate din instrucŃiuni scrise între etichetele
menŃionate mai sus şi care se termina cu caracterul obligatoriu ”;”(în alte limbaje de
scriptare acest carecter este opŃional, ca de exemplu în JavaScript).
După ce a fost creat un script, acesta trebuie să fie încărcat pe serverul web. În
cazul în care se apelează la un furnizor ISP, se încarcă scriptul cu ajutorul unei
aplicaŃii FTP acolo unde se încarcă şi paginile web standard. În cazul serverului local
Apache, se încarcă scriptul în subdirectorul htdocs din directorul de instalare a
serverului, iar pentru IIS în subdirectorul inetpub/wwwroot.

Pentru a rula un script, trebuie dechis în browser la fel ca o pagina web, adică:
• dacă se lucrează cuserver-ul ISP, se navighează în browser până la adresa
URL a fişierului, ca de exemplu :
http://www.furnizor_ISP.com/nume_utilizator/nume_fisier.php
• dacă se lucrează local, cu interpretorul PHP, se navighează în browser
până la adresa http://localhost/fisier.php.

67
 Afişarea datelor în PHP – echo şi print

Afişarea datelor de către browser se face cu ajutorul instrucŃiunile echo şi

print. Deoarece avem nevoie de exemplificarea noŃiunilor introduse, vom prezenta
instrucŃiunile echo şi print înaintea capitolului de instrucŃiuni şi funcŃii.
Echo este cea mai foslosită instrucŃiune, nu este funcŃie dar poate fi utilizată ca
o funŃie. Cu ajutorul ei afişăm text, rezultate a unor operaŃii, variabile, etc. Are sintaxa
generală: echo “ rezultate de afisat” ;
Este obligatoriu să se pună “;” la sfârşit, ca după orice instrucŃiune din PHP, şi
se pot folosi apostrofuri (‘ ‘), în loc de ghilimele (“ “).
InstrucŃiunea echo poate fi folosită în mai multe feluri, în funcŃie de ce dorim
să afişăm. În continuare vom exemplifica diferitele forme de utilizare.
 Afişarea unui text poate fi făcută în două moduri: folosind parantezele rotunde
(utilizarea lui echo ca pe o funcŃie) sau fară paranteze (motiv pentru care spunem
că echo nu e funcŃie). De exemplu, sunt valabile ambele forme:
echo (”Un text”); echo ” Un text”;
 Se pot afişa mai multe şiruri de caractere, fiecare cuprins între apostrofuri sau
ghilimele, dar în acest caz nu sunt folosite parantezele rotunde, iar şirurile de
caractere sunt separate prin virgulă. De exemplu: echo ”Sir 1”, ”Sir 2”;
 Se pot afişa şi numere, fără a fi încadrate în nimic, ca de exemplu: echo 3456;
 Se pot afişa şi etichete HTML, cuprinse într-un şir, sau individual, încadrate între
ghilimele sau apostrofuri, ca în exemplul următor: echo "Universitate Spiru
Haret <BR>", " Facultatea de Matematica si Informatica", "<BR>";
 Se pot afişa şi conŃinutul unor variabile, cuprinse într-un şir, sau individual,
neîncadrate, ca în exemplul următor: $a=-5; $b=5; echo " Numere cuprinse
intre $a si ", $b;
Print se utilizează asemanător ca echo.
Nu se pot afişa mai multe şiruri, ca în cazul lui echo.
Dacă dorim să afişăm unele carectere, atunci acestea vor fi precedate de slash şi
încadrate între ghilimele, ca de exemplu:
\$ - va afişa caracterul $
\”… \” - va afişa grupul de ghilimele
\\ - va afişa caracterul \
\’…\’ - va afişa grupul de apostrofuri
\n trecerea cursorului la linie nouă
\xo…\xFF va afişa caracterul corespunzător codului hehazecimal (de exemplu
\x34 înseamnă caraterul cu codul 3*16+4=52, adica cifra 4)
\0…\777 va afişa caracterul corespunzător codului octal (de exemplu \64
înseamnă caraterul cu codul 6*8+4=52, adica cifra 4)

Un exemplu folosind echo şi print.

<?php
echo "Primul script in PHP <BR>";
echo 'Primul text ', "<BR>" , 'Al doilea text <BR>';
echo "Universitate Spiru Haret <BR> Facultatea de Matematica si Informatica <BR> ";
echo "un numar: ", 323424 , "<BR>";
echo "Caracterul cu codul hehazecimal \\x34 = 3*16+4=52 este : ", " \x34<BR>";
echo "Caracterul cu codul octal \\64 = 3*16+4 = 52 este : ", " \64 <BR>";
$a=-5; $b=5;
echo " Numere cuprinse intre $a si ", $b ,",<BR>";
print (" Interval de lucru intre $a si $b <BR>");

68
print "Numerele date sunt $a si $b <BR> Al doilea numar :";
print 345;
echo "<BR> \"Prietenia sfarseste acolo unde incepe neincederea \" Seneca";
?>
În urma rulării acestui script browser afişa:

Afişarea datelor în PHP cu echo şi print

Paginile web(fişiere HTML) pot fi o combinaŃie de cod HTML şi scripturi
PHP. În codul sursă HTML scriptul trebuie să fie încadrat obligatoriu între etichetele
<?php.. ?>.
Sa considerăm două fişiere cu acelaşi conŃinut dar cu extensia .html şi
respectiv .php. Se consideră funcŃia phpinfo() care afişează informaŃii despre
versiunea PHP folosită. Se observă că browserul ignoră scriptul PHP în cazul
fişierelor html, dar marcajele HTML din fişierele .php sunt interpretate.
Fişierul C1_ex2.html şi C1_ex3.php vor fi:

<HTML>
<HEAD> </HEAD>
<BODY>
<?php
echo "Hello de la PHP <br>";
?>
<BR>
<IMG src=phpinfo.gif height=50 width=50>
sigla PHP
<H2> Informatii PHP </H2>
<?php
phpinfo();
?>
</BODY>
</HTML>
După rularea fişierului c1_ex2.html, browser-ul va afişa:

69
 Fişier HTML cu script PHP
După rularea fişierului c1_ex2.php browser-ul va executa scipturile
conŃinute şi va afişa (s-a captat numai primul ecran afişat de funcŃia phpinfo()):

Fişier PHP cu cod HTML

Pentru ca un fişier HTML să interpreteze un script PHP, el poate fi dat ca ca o
ancora, ca în exemplul următor:
<HTML> <HEAD> </HEAD>
<BODY>
<P> Apelare fisier c1_ex1.php ca ancora
<A href="http://localhost/CURS_PHP/CURS1_PHP/c1_ex1.php">
APELEAZA </A>
</BODY></HTML>

Dacă se execută un click pe ancoră browser-ul va afişa într-o fereastră nouă mesajujul
“Primul script in PHP”

Script apelat ca o ancora dintr-un fişier HTML

70
 Dacă se execută un click pe butonul Back se va trecere în fereastra fişierului
HTML. De asemenea, un script poate fi executat dintr-o pagină web, folosind
atributul action din tag-ul FORM, ca în exemplul următor (fisier c1_ex5.html):
<HTML> <HEAD> </HEAD> <BODY>
<P> Apelare fisier c1_ex1.php ca ca buton html
<FORM action="http://localhost/CURS_PHP/CURS1_PHP/c1_ex1.php" >
<INPUT type="submit" value ="apel PHP">
</FORM> </BODY></HTML>

Prin apăsarea pe buton, browser-ul va afişa într-o fereastră nouă mesajul “Primul
script in PHP”.

Script apelat printr-un buton dintr-un fişier HTML

ObservaŃie. Fişierul c1_ex5.html poate avea şi extensia php şi va executa
acelaşi lucru(dar fisierul html trebuie să se execute de pe server).
În următorul exemplu, fişierul c1_ex6.html, care realizează un formular,
apelează un script pentru a executa o operaŃie de înmulŃire între două variabile (despre
variabile şi formulare se va discuta în capitolele următoare).
<HTML> <HEAD> </HEAD> <BODY>
<form ACTION="c1_ex6.php"' method="POST">
<INPUT type="text" name = "a"> <br>
<INPUT type="text" name = "b"> <br>
<INPUT type="submit" value ="Trimite">
</FORM> </BODY></HTML>

71
 iar prin apăsare pe butonul Trimite, browser-ul va afişa rezultatul executării
scriptului c1_ex6.php:
<?php
echo "<br> a * b = ", $_POST["a"] *$_POST["b"], "<BR>";
?>

Script care efectuează o operaŃie şi browser-ul e apelat printr-un buton dintr-un

fişier HTML
ObervaŃie: Ca şi în exemplul anterior, fişierul c1_ex6.html poate fi
c1_ex6.php. În acest caz fisierul html nu se execută ca orice fişier html de către
browser, ci trebuie executat de pe server(în cazul nostru de pe serverul
http://localhost/...../c1_ec6.html, ca şi cum ar fi un fişier php). Am folosit în ultimele
exemple fişiere html pentru a vedea legătura dintre HTML şI PHP, dar în continuare
von lucra pe cât posibil cu fişiere PHP.

Comentarii în scripturi
Comentariile se folosesc în general, pentru a face mai lizibil un program . În
PHP comentariile se pot introduce în trei moduri:
• text pe mai multe linii cuprins între /*...*/;
• text pe o linie, textul fiind precedat de caracterul //;
• text pe o linie, textul fiind precedat de caracterul #.
Comentariile de linie pot fi folosite şi după linii ce conŃin instrucŃini dar nu
sunt permise comentariile imbricate.
<?php
/* Limbajul PHP permite lucru pe server
Limmbajul PHP e foarte asemanator cu C */
echo "PHP permite lucru cu fisiere <BR>";
// echo cu ghilimele si cod HTML
echo 'PHP permite lucru cu MySQL'; # cu apostrof

Se observă după rulare că nu sunt afişate comentariile

Comentarii în PHP

72
LecŃia 22. Variabile, Operatori şi InstrucŃiuni in PHP

Variabile

Ca în orice limbaj şi în PHP variabilele sunt folosite pentru a stoca date şi a le

face accesibile în timpul execuŃiei scriptului care le conŃin.
În PHP variabilele încep cu simbolul dolar, $, urmat de numele variabilei.
Numele trebuie să înceapă cu o literă sau cu o liniuŃă de subliniere urmate de oricâte
litere, cifre sau liniuŃe de subliniere.
În PHP nu este necesară declararea variabileleor, ele se definesc când sunt
folosite. Deasemenea, în PHP nu este necesar să se declare tipul variabilelor (ca de
exemplu integer, real, boolean, etc), ele îşi schimbă tipul în funcŃie de valoarea
returnată. Unei variabile i se atribuie o valoare cu ajutorul operatorului de
atribuire(ei vor fi descrişi în secŃiunea Operatori). Cel mai des operator de atribuire
este operatorul egal, ”=”.
Variabilelor li se pot atribui atât valori numerice cât şi şiruri de caractere(text),
ca în exemplul următor :
<?php
$y="Operator de atribuire de valori variabilelor";
$x=100;
$x=$y;
$t="true";
$f="false";
echo $x, "<br>";
echo $t, "<br>";
echo $f , "<br>";
?>

Atribuirea de valori variabilelo

În PHP se pot folosi operatori de conversie, ca şi în C++.

Există opt tipuri de date în PHP :
• Boolean –stochează valorile adevarat/fals
• Integer sau int - stochează numere intregi
• Float -stochează numere reale, cum ar fi
• String – stochează valori de tip text
• Array – stochează matrice
• Object – stochează obiecte de programare
• Resource – stochează o anumită resursă de date
• NULL stochează o valoare nulă

73
 PHP stabileşte tipul datelor în fucŃie de valorile atribuite. Nu trebuie
specificat mereu tipul datelor folosite, ci numai în cazul unor conversii dorite.
Conversia unui şir la întreg reuşeşte chiar dacă şirul conŃine şi caractere nenumerice,
ca în exemplul de mai jos.
<?php
$y=9.5;
$x=(int)$y;
echo $x, "<br>";
$a="2 Kg"; $a=(int)$a;
$b="3 lei"; $b=(int)$b;
echo $a,"<br>";
echo $b,"<br>";
echo "valoare= ", $a*$b;
?>

Operatori de conversie

Se poate omite operatorul de conversie, conversia ralizându-se explicit.

Astfel în exemplul de mai sus dacă se omit instrucŃiunile de conversie,
$a=(int)$a; $b=(int)$b;
Browser-ul va afişa acelaşi rezultat ca în figura 2_2.
Alt exemplu de conversie implicită de la şir la întrg :
<?php
echo "Conversie implicita de la string la intreg ", "<BR>";
$x="-4.67";
$y="3.67";
echo $x , "+", $y , "= ", $x+$y;
?>

Conversie implicită şir- întreg

Interpolarea variabilelor în şiruri de caractere

Tehnica de interpolare a variabilelor în şiruri de caractere ne permite să
încadrăm valorile variabilelor între ghilimele duble (nu şi între ghilimele simple)
pentru a le însera în şirul de caractere. Tehnica de interpolare este redată în următorul
exemplu :
<?php
echo "Interpolarea variabilelor in şiruri" , "<br>";
$x=100;
echo "Numărul x= ", $x, "<br>";
$x=$x+100;
echo "Noul număr x= $x ";//variabilă interpolată în şir
?>

74
 Interpolarea variabilelor în şiruri de caractere

Se observă că se va afişa acelaşi lucru, şi prin forma normală a instrucŃiunii

echo şi prin forma de interpolare.
În cazul că se doreşte să se interpoleze o variabilă care reprezintă o parte dintr-
un şir, atunci variabila se pune între acolade, {}, ca în exemplul de mai jos :
<?php
echo "Interpolarea variabilelor in siruri ca parte dintr-un text" , "<br>";
$m="mama";
$t="tata";
echo "Pe mine m-au crescut: $t, $m, si {$m}mare."
?>

Interpolarea variabilelor ca parte a unui cuvânt

Adresarea indirectă a variabilelor

PHP permite lucru cu variabile variabile. Acestea variabile conŃin numele unei
alte variabile, aşa cum reiese din exemplu următor :
<?php
echo "variabile variabile" , "<br>";
$x="Adresare indirecta";
$y="x";
$z="y";
echo " Browserul va afisa: ", $$$z, "<BR>";
echo " Browserul va afisa: ${${$z}} ";// variabila interpolata in sir
?>
După execuŃia acestui script se va afişa :

75
 Variabile variabile

Constante
Constantele sunt variabile a căror valoare nu poate fi modificată. În PHP constantele
se definesc cu ajutorul funcŃiei define, care are sintaxa: define(”nume_constanta”,
valoare).
Ca exemplificare, afişăm în PHP constantele pi=3.14 şi e=2.71, în următorul script:
<?php
define("pi", 3.14);
define("e", 2.71);
$r=5;
echo "Raza cercului este: $r <BR>";
echo "Aria cercului este: ", pi*$r*$r , "<br>";
echo "Baza logaritmului natual este e=", e;
?>

Constante în PHP
Numele constantelor nu trebuie să fie cuvinte cheie, ca de exemplu: and,
array, do, echo, for, function, if, or, print, use, etc.
De asemenea, există unele constante predefinite, ca de exemplu,
PHP_VERSION(versiunea PHP) , PHP_OS(sistemul de operare),etc.
<?php
echo "Versiunea PHP folosită este ", PHP_VERSION, "<BR>" ;
echo " Sistemul de Operare este ", PHP_OS;
?>

Constante predefinite în PHP

76
Operatori

Majoritatea operatorilor din PHP sunt deja cunoscuŃi din JavaScript sau din
C++. Se vor prezenta operatorii pe tipuri, precum şi particularităŃile acestora specifice
limbajului PHP.

Operatori matematici
Operatorii matematici sunt aceiaşi cu cei din C++, şi anume
+ operator de sumare
- operator de scadere
* operator de înmulŃire
/ operator de impărŃire
% operator ce returnează restul împărŃirii (modulo)
Un exemplu de utilizare a operatorii matematici: este dat mai jos:
<?php
echo "23134244+ 665677 = ", 23134244+ 665677, "<BR>";
echo "23134244- 665677 = ", 23134244- 665677, "<BR>";
echo "23134244* 665677 = ", 23134244* 665677, "<BR>";
echo "23134244/ 665677 = ", 23134244/ 665677, "<BR>";
echo "23134244%665677 = ", 23134244% 665677, "<BR>";
?>

Operatori aritmetici

Operatori de atribuire
Operatorii de atribuire în PHP sunt:
=, +=, -=, *=, /=, %=, .= (concatenare de şiruri), &=, |=, ^=, <<=, >>=
Operatorul de atribuire principal este operatorul egal (=), care atribuie o valoare unei
variabile. Se poate atribui aceeaşi valoare mai multor variabile: de exemlu
$x=$y=$z=10.
Mai există operatori de atribuie combinaŃi pentru toate operaŃiile aritmetice şi pentru
operaŃii cu şiruri de caractere. Aceşti operatori efectuează operaŃia indicată în stânga
semnului egal asupra unei variabile şi îi atribuie apoi noua valoare, putând combina
două operaŃii, atribuirea şi operaŃia într-una singură astfel: $x=10; în loc $x=$x+10;p
utem scrie $x +=10;
<?php
$x=1;
$y=3;
$Z="ATRIBUIRE MULTLIPLĂ";
$x=$y=$z;

77
echo $x , "<br>";
echo "concatenare şiruri: ","<br>";
$text="Java";
echo $text, " nu este ", $text .= "Script";
?

Operatori de atribuire

Operatori de incrementare şi decrementare

Aceşti operatori sunt des folosiŃi în instrucŃiunile de ciclere. Operatorul de
incrementare este ++, şi execută incrementarea valorii unei variabile, prin adăugarea
unei unităŃi. Operatorul de decrementare este --, şi execută decrementarea valorii unei
variabile, prin scăderea unei unităŃi. Operatorii pot fi folosiŃi prefix sau sufix. Dacă se
foloseşte operatorii sufix, de exemplu ++$x, valoarea variabilei $x este incrementată
şi apoi folosită în instrucŃuni, iar dacă se foloseşte operatorii prefix, de exemplu, $y--,
întâi este folosită variabila în instrucŃiune şi apoi este decrementată.
În exemplul următor se poate observa folosirea operatorilor de incrementare şi de
decrementare folosisiŃi ca atât ca prefix cât şi ca sufix.
<?php
$a=$b=$c=$d=1;
echo $a++, " ; ", ++$b , " ; ", $c--, " ; ", --$d;
?>

Operatori de incrementare şi decrementare

78
Operatori de comparare

Aceşti operatori permit să comparăm două valori şi sunt des întîlniŃi în

instrucŃiunile de decizie if. După efectuarea unei operaŃii cu un astfel de operator se
obŃine o valoare true sau false.
Operatorii de comparare sunt daŃi în tabelul de mai jos.

Opera-
OperaŃie Exemplu Rezultat
tor
== Egal $x==$y True dacă $x este egal cu $y
=== Identic $x===$y True dacă $x este egal cu $y ca valoare şi tip
!= Diferit $x!=$y True dacă $x nu este egal cu $y ca valoare
True dacă $x nu este egal cu $y ca valoare sau
!== Diferit $x!==$y
tip
<> Diferit $x<>$y True dacă $x nu este egal cu $y ca valoare
< Mai mic ca $x<$y True dacă $x mai mic ca $y
<= Mai mic sau = $x<=$y True dacă $x mai mic sau egal cu $y
> Mai mare ca $x>$y True dacă $x mai mare ca $y
>= Mai mare sau= $x>=$y True dacă $x mai mare sau egal cu $y

În exemplul următor sunt exemplificaŃi câŃiva dintre aceşti operatori:

<?php
$x="3";
$y=3;
if($x==$y) echo ("egali val <br>");
else echo("inegali ca val <br>");
if($x===$y) echo ("egali val si tip <br>");
else echo("inegali ca val sau tip <br>");
if($x!=$y) echo ("ineegali val <br>");
else echo("egali ca val <br>");
if($x!==$y) echo ("ineegali val si tip <br>");
else echo("egali ca val si tip <br>");
?>

Operatori de comparare

79
Operatori logici

Operatorii logici sunt daŃi în tabelul de mai jos. Există câte doi operatori logici pentru
ŞI, SAU şi SAU exclusiv, dar cu priorităŃi diferite.

Operator OperaŃie Exemplu Rezultat

AND ŞI $x and $y True dacă $x este adevărat şi $y este adevărat

OR SAU $x or $y True dacă $x este adevărat sau $y este adevărat
True dacă $x este adevărat sau $y este adevărat,
XOR SAU exclusiv $x xor $y
dar nu ambele
! Negare !$x True dacă $x nu este adevărat
&& ŞI $x && $y True dacă $x este adevărat şi $y este adevărat
|| SAU $x || $y True dacă $x este adevărat sau $y este adevărat

Un exemplu de folosire a operatorilor logici:

<?php
$mg=8;
echo "Un student este foarte bun daca are media generala mai mare decat 7 <br>";
if ($mg >=8 and $mg <= 10 ) echo "Esti un student foarte bun ";
else echo "esti un student oarecare <br>";
echo "Un an este bisect daca se imparte la 4 dar nu se imparte la 100 sau se
imparte la 400 ( de ex. 1900 nu e bisect, 2000 e bisect)<br>";
$an=2008;
echo "an= ", $an, "<BR>";
if ( ($an % 4==0 && $an % 100<>0) || ($an % 400 ==0) ) echo "an bisect";
else echo "an oarecare";
?>

Operatori logici

Operatori pentru şiruri de caractere

Există doar doi operatori pentru şiruri de caractere, şi anume

- Operatorul de conatenare şiruri, punctul “.”
- Operatorul de concatenare şi atribuire, “.=” (prezentat la operatorii de
atribuire)

80
<?php
echo "Acest curs conŃine: ";
$a="HTML, ";
$b= "JavaScript, ";
$c= $a . $b;
$c.="PHP";
echo $c;
?>

Operatori pentru şiruri

Operatorul trenar
Operatorul trenar “ ? “ se comportă asemănător ca o instrucŃiune IF şi are
sintaxa: $nume_variabila = conditie ? expresie1:expresie2;
Dacă condiŃia este adevărată atunci $nume_variabila primeşte valoarea expresie1,
altfel $nume_variabila primeşte valoarea expresie2.
Exemplul următor rezolva ecuaŃia de gradul I: ax+b=0.
<?php
$a=4;
$b=-8 ;
$x= $a!=0 ? -$b/$a : "nu exista solutie";
echo "Solutia ecuatiei $a x =$b este x= $x <br>";
$x="3";
$y=3;
$rez= ($x===$y) ? (" \" $x \" si $y sunt egali ca val si tip"): (" \" $x \" si
$y inegali ca val sau tip");
echo $rez, "<br>";
?>

Operatorul trenar

81
Operatori pe biŃi
PHP ca şi JavaScript include operatori care lucrează cu biŃii unui număr întreg. Lucru
cu astfel de operatori presupune o bună experienŃă în programare, motiv pentru care nu vor fi
trataŃi în acestă carte.
Operatorii pe biŃi sunt:

Opera -
OperaŃie Exemplu Rezultat
tor
& ŞI $x &$y BiŃi au valoarea 1 dacă au 1 şi în $x şi în $y
| SAU $x | $y BiŃi au valoarea 1 dacă au 1 în $x sau în $y
SAU BiŃi au valoarea 1 dacă au 1 în $x sau în $y,
^ $x ^ $y
exclusiv dar nu în ambele
~ Negare ~$x BiŃi au valoarea 1 dacă au 0 în $x şi invers
Deplaseaz bitii din$x cu $y paşi spre
Deplasare
<< $x <<$y stânga(fiecare operaŃie înseamnă o “înmulŃire
stânga
cu doi”)
Deplasare Deplaseaz bitii din$x cu $y paşi spre dreapta
>> $x >> $y
dreapta (fiecare operaŃie înseamnă o împărŃire la doi)
SAU True dacă $x este adevărat sau $y este
^ $x || $y
exclusiv adevărat, dar nu ambele

De exemplu :
3<<1 înseamnă deplasarea biŃilor din valoarea 3, spre stânga cu o pozziŃie, adică 3 =
11 (în binar) şi deplasat cu o poziŃie devine 110(binar) care este 6 (ca o înmulŃire cu 2
a valorii 3).
4>>1 este 100 deplasat spre dreapta cu o poziŃie devine 10, care este 2 în zecimal (ca
o împărŃire la 2).

Operatorii în PHP, ca şi în alte limbaje de programare au o prioritate (ordine de

efectuare)
În tabelul de mai jos sunt daŃi operatorii prezentaŃi mai sus, în ordinea
priorităŃii, descrescătoere de sus în jos.

1. !, ~, ++, --, (int), (float), (string), (array), (object)

2. *, /, %
3. +, -, .
4. <<, >>
5. <, <=, >, >=
6. ==, !=, ===, !==
7. &
8. ^
9. |
10, &&
11. ||
12. ?:
13. =, +=, -=, *=, /=, .=, %=, &=, |=, ^=
14. AND
15. XOR
16. OR
17. ,

82
InstrucŃiuni în PHP

În PHP ca şi în alte limbaje există trei mari categorii de instrucŃiuni:

- InstrucŃiuni expresie
- IstrucŃiuni de decizie: if, if...else şi switch
- IstrucŃiuni repetitive: for, while şi do...while

InstrucŃiunea expresie se foloseşte pentru atribuiri sau diverse calcule. A fost

folosită în majoritatea exemlelor de mai sus , aşa ca nu vom mai insista asupra ei. Are
forma $nume_variabilă= "expresie”.

InstrucŃiuni de decizie
InstrucŃiunile de decizie se folosesc atunci când trebuie sa luăm o decizie în
funcŃie de date. InstrucŃiuniea IF are mai multe forme (ca in majoritatea limbajelor de
nivel înalt).

InstrucŃiunea IF

InstrucŃiunea IF simplă
InstrucŃiune IF simplă execută o anumită instrucŃiune(poate fi şi un grup de
instrucŃiui) atunci când o condiŃie e îndeplinită.
Sintaxa acestei instrucŃiuni este: IF (expresie) instructiune .
În cazul în care trebuiesc executate mai multe instrucŃiuni dacă condiŃia este
adevărată, grupul de instrucŃiuni va fi inclus între acolade, {}, sau între “: şi endif.
În exemplu de mai jos se rezolvă ecuaŃia de gradul I, ax+b=0, folosind IF simplu
(acest exemplu a mai fost dat folosind operatorul trenar, fig. 2_15).
<?php
$a=10;
$b=5 ;
IF ($a!=0) echo "Solutia ecuatiei $a x =$b este x= " , -$b/$a, "<br>";
//IF compus ,instructiunile incluse intre paranteze
$a+=5;
$b-=8;
IF ($a!=0)
{echo "Solutia ecuatiei $a x =$b este x= " ;
$x=-$b/$a; echo $x; }
?>

InstrucŃiune IF simplă

83
InstrucŃiunea IF ...ELSE

InstrucŃiunea IF ..ELSE ne ajută să luam o decizie în cazul în care condiŃia

din instrucŃiunea IF simplă nu este adevărată. Sintxa instrucŃiunii este:
IF (expresie) { instructiuni1}
else {instrucŃiuni1}
Dacă o expresie are o valoare TRUE (0) atunci se execută grupul de
instrucŃiuni1, altfel se executa grupul de instrucŃiuni2.
Un exemplu a fost dat în programul ex13.php, unde instrucŃiunea este folosită pentru
testarea dacă un $an este bisect sau nu, iar rezultatul este redat în figura 2_13.
echo "Un an este bisect daca se imparte la 4 dar nu se imparte la 100 sau se
imparte la 400 ( de ex. 1900 nu e bisect, 2000 e bisect)<br>";
$an=2008;
if ( ($an % 4==0 && $an % 100<>0) || ($an % 400 ==0) )
echo "an bisect";
else
echo "an oarecare";

InstrucŃiunea IF ... ELSEIF

InstrucŃiunea IF poate fi folosită imbricată, în cazul în care avem mai multe

condiŃii de testat asupra datelor. Sintaxa instrucŃiunii IF ... ELSEIF este:

IF (condtie1) {instrucŃiuni1}
ELSEIF (condtie2) {instrucŃiuni2}
ELSEIF {(condtie3) instrucŃiuni3}

ELSEIF {(condtien) instrucŃiunin}

ELSE {instrucŃiune n}

<?php
$a=1;
$b=-12;
$c=32;
IF ($a!=0)
{echo "Ecuatie de gradul 2 <br>";
$d= ($b*$b) - 4*$a*$c;
If ($d>=0)
{$x1= (-$b+sqrt($d))/(2*$a);
$x2= (-$b-sqrt($d))/(2*$a);
echo " x1= $x1 ; x2= $x2 <br>";
}
else echo "rad. complexe";
}
elseif ($b==0) echo "imposibil";
else echo "ecuatie gr I, x ( -$c/$b)= ", -$c/$b;
?>
1) Pentru setul de date $a=1;$b=-12; $c=-32; se obŃin radacinile:8 şi 4

84
 2) Pentru setul de date $a=0;$b=4; $c=-8; se obiŃine varianta ecuaŃie de gradul I

3) Pentru setul de date $a=0;$b=-0; $c=32; ecuaŃia nu are soluŃie.

InstrucŃiunea if..elseif

InstrucŃiunea compusă SWITCH

InstrucŃiunea switch este utilizată în cazul în care avem mai multe condiŃii de
testat.Sintaxa instrucŃiunii este :
switch (expresie)
{
case exp1: secventa instructiuni1; break;
case exp2: secventa instructiuni2; break;
.........
case expn: secventa instructiunin; break;
[default : secventa instructiuni1n+1 ];
}
unde:
• expresie este valoarea întreagă pentru care se verifica condiŃiile
• expi sunt constante de tip întreg
• instrucŃiuni I sunt secvenŃe de instrucŃiuni oarecare

InstrucŃiunea switch funcŃionează astfel: se evaluează “expresie”. Dacă acesta

are o valoare egală cu cea a expi atunci se execută secvenŃa instructiunii şi se trece la
instrucŃiunea care urmează după swich altfel se execută secventa instructiuni1n+1 .
Parantezele drepte, [], au un caracter opŃional, adică alternativa default este oŃională.
Dacă unei instrucŃiunii dorim să-i corespundă mai multe valori, atunci se trece

85
instrucŃiunea la ultima valoare dorită a expi şi se omite instrucŃiunea de salt break,
aşa cum se constată în exemplul de mai jos.

<?php
$x=7;
switch ($x)
{
case 7:echo "nota buna"; break;
case 8: echo "nota buna"; break;
case 9:echo "nota f.buna"; break;
case 10: echo "nota f.buna"; break;
default : echo "nota mica";
}
?>
sau
<?php
$x=9;
switch ($x)
{
case 7:
case 8: echo "nota buna";
break;
case 9:
case 10: echo "nota f.buna";
break;
default : echo "nota mica";
}
?> InstrucŃiunea switch

InstrucŃiuni de ciclare

InstrucŃiunile de ciclare execută o instruciune sau un grup de instrucŃiuni de un număr

de ori, în funcŃie de valoarea de adevăr a unei espresii sau până când o expresie este
adevărată.

InstrucŃiunea FOR

Cea mai cunoscută instrucŃiune repetitivă este instrucŃiunea for, care execută o
instrucŃiune sau o instrucŃiune compuse, în mod repetat de un număr de ori. Sintaxa
InstrucŃiunii for este:

for (expresieiniŃializare; expresie test; expresie incrementare) instrucŃiune

Unde:
• expresieiniŃializare se foloseşte pentru iniŃializarea variabilei de ciclare,
numită şi contor de ciclare sau index de ciclare. Aceasta expresie se
execută o singură data la începutul ciclului

86
 • expresie test este o expresie care determină continuarea ciclului (executarea
instrucŃiune) atât timp cât ea este adevărată. Acestă expresie e execută
pentru fiecare pas al ciclului şi testează valoarea contorul de ciclare.
• expresie incrementare se execută după executarea instrucŃiunii şi ea, în general,
incrementează contorul

Ca şi în cazul istrucŃiunii if, dacă instrucŃiune este una compusă atunci

secvenŃa se încadează între acolade, {instrucŃiuni}, sau între “: instrucŃiuni endfor”.
Nu toate expresiile din for sunt obligatorii, astfel:
• Dacă lipseşte expresieiniŃializare, atunci contorul se iniŃializează înaintea
instrucŃiunii for
• Dacă lipseşte expresie incrementare atunci contorul se mareşte cu unu.
Pentru a exemplifica instrucŃiunea for, calculăm suma numerelor impare şi suma
cuburilor primelor n numere naturale folosind cele două variante.
<?php
$n=10;
for($i=1;$i<=$n;$i+=2){$s +=$i; }
echo "suma pina la $n numere impare este $s <br>";
$s=0;
for( $i=1;$i<=$n;$i++) : $s +=$i*$i*$i; endfor;
echo "suma cuburilor primelor ", $n, " numere este ",$s ,"<br>";
?>

InstrucŃiunea for

InstrucŃiunea CONTINUE

În cazul în care se doreşte să se sară peste o iteraŃie şi să se continue cu iteraŃia

urmatoare se poate folosi instrucŃiunea continue. De exemplu dacă dorim să calculăm
funcŃia f(i) =1/i, pentru x ⊂ [-3,3]\{0} , i⊂ N, vom avea codul.
<?php
for($i=-3 ;$i<=3; $i++) :
{if ($i==0) continue;
echo "f(i)= 1/$i = ", 1/$i, "<br>";
} endfor;
?>

87
 InstrucŃiunea continue
InstrucŃiunea FOREACH

În cazul datelor matriciale, se poate folosi instrucŃiune foreach, care are

sintaxa: foreach (expesie_matriceala as $value) instrucŃiuni
şi care are ca efect excutarea instrucŃiunii pentru toate elementele unui tablou. Acestă
instrucŃiune va fi folosită mai mult la şiruri şi este exemplificată în următorul
exemplu:
<?php
echo "Paleta de culori penru cod RGB <BR>";
$tb = array( "red", "green", "bleu");
foreach($tb as $value)
{echo "Culoarea: $value <BR>";}
?>

InstrucŃiunea foreach
InstrucŃiunea WHILE

InstrucŃiunea de ciclare while execută o instrucŃiune repetat atât timp cât o

condiŃie este adevărată. Sintaxa instrucŃiunii este: while (expresie) instructiune
Dacă instrucŃiunea este compusă, atunci se încadreză între acolade,
{instructiuni}, sau între : instructiuni endwhile.
În programul următor s-a calculat suma primelor n numere pare.
<?php
$n=20; $I=1;
while($i<=$n) :
$s+=$i*2;
$i++;
endwhile;
echo "suma primelor $n numere pare este $s <br>";
?>

88
 InstrucŃiunea while

InstrucŃiunea Do..WHILE

InstrucŃiunea repetitivă do…while execută o instrucŃiune până când o condiŃie

este adevărată. Sintaxa instructiunii este:
do
instruciune
while(expresie);
Dacă instrucŃiunea este compusă nu este permisă închiderea ei între carecterele
“: ..endwhile”şi se foloseşte forma:
do
{ instruciune }
while(expresie);
DiferenŃa între while şi do…while este că prima testează condiŃia înaintea
executării instrucŃiunii, iar a doua, după executarea instrucŃiunii.
În cazul în care o instrucŃiune se execută cel puŃin odată, este indicat să se
folosească instrucŃiunea do..while, altfel se foloseşte while, dacă condiŃia poate fi
adevărată chiar de la început, atunci grupul de instrucŃiuni nu trebuie să se mai
execute.
În programul următor s-a calculat suma primelor n numere pare (ca in
exemplul precedent), folosind instrucŃiunea do…while.
<?php
$n=10; $i=1;
do {
$s+=$i*2;
$i++;}
while($i<=$n):
echo "suma primelor $n numere pare este $s <br>";
?>

InstrucŃiunea do..while

89
LecŃia 23. FuncŃii în PHP

În PHP, codul scriptului poate să conŃină una sau mai multe funcŃii. După cum
bine ştim din alte limbaje de programare C, (C++, JavaScript, etc.) o funcŃie este
formată dintr-un set de instrucŃiuni, care pot să returneze una sau mai multe valori şi
pot fi apelate printr-un nume.
Avantajele împărŃiri codului în funcŃii sunt multiple, dintre care amintim: o mai bună
lizibilitate a codului, evitrea repetării unui grup de instrucŃiuni, domeniul de
valabilitate a variabilelor permite să putem folosi acelaşi nume de variabilă atât în
funcŃie cât şi în afara ei.
În PHP se pot crea funcŃii sau se pot utiliza funcŃii deja existente(predefinite).

Crearea unei funcŃii

Sintaxa folosită pentru crearea unei funcŃii este:

function nume_functie([lista_de_ parametri_formali])
{
[instrucŃiuni]
[return valoare;]
}

Amintim faptul că [] au un caracter opŃional, ceea ce înseamnă că o funcŃie poate să

nu conŃină listă de parametri sau instrucŃiuni, dar poate să returneze o valoare, aşa cum reiese
din exemplul din figura 3_3. Dacă lista de parametri lipseşte, () sunt totuşi obligatorii.
O funcŃie se apelează prin nume, urmat de lista de parametri, conform sintaxei:
nume_functie([lista_de_ parametri_actuali)]);

În exemplul următor se crează două funcŃii, una care nu are listă de parametri şi altă
fără corp de instrucŃiuni.
<?php
echo "Functii <IMG src=phpinfo.gif height=30 width=50> <BR>";
apel();
function apel()
{echo "<HR>";
echo "<A href ='\CURS_PHP\CURS1_PHP\c1_ex1.php'> Apeleaza </A>
<BR>";
}
$lung=10;
$lat=20;
function aria($lung, $lat)
{return $lung*$lat; }
echo "Aria dreptunghiului de dim.$lat si $lung este: ",aria($lung, $lat);
?>

90
Dacă se apasă pe butonul Apeleaza se va afişa scriptul din Figura 1_1.

Apel de funcŃii

Transmiterea parametrilor

Se pot transmite date funcŃiilor, folosind lista de parametrii, prin două

modalităŃi: prin valoare şi prin referinŃă.

Transmiterea parametrilor prin valoare

Dacă un parametru este transmis prin valoare, aceasta însemnă că valoarea lui
nu se schimbă după executarea funcŃiei, chiar dacă în interiorul funcŃiei el se
modifică. Atunci când se transmite un argument unei funcŃii acesta e transmis implicit
prin valoare. Aceasta ar fi ca şi cum funcŃiei i s-ar transmite o copie a datelor.
Se pot transmite prin valoare atât valori cât şi conŃinutul unor variabile.
În exemplul de mai jos, se observă că valoarea variabilei $x=10 nu se modifică după
apelul funcŃiei în interiorul căreia acesta devine $x=12. Deasemenea, se observă
că funcŃia poate fi apelată printr-o valoare oarecare ("valoarea functiei ") şi printr-o
valoare care este conŃinutul unei variabile ($x=10).
<?php
echo "Functii PHP cu transmitere parametrilor prin valoare " , "<BR>";
$x=10;
echo " Valoarea parametrului x inainte de apel = ", $x , "<BR>";
echo apel_val("valoarea functiei ", $x);
echo " Valoarea parametrului x dupa apel = ", $x;
// se observa ca valoarea lui $x nu s-a schimbat, desi functia schimba //valoare
$x+=2
function apel_val($text, $x)

91
{$x+=2;
echo "<font size=4> <I> <B> $text </I> </B> </Font> ";
echo " pentru \$x= $x”, $x*($x+4) =", $x*($x+4) , "<br>";
}
?>

FuncŃii PHP cu transmiterea parametrilor prin valoare

În PHP se pot returna şi valori booleene. De exemplu, vrem să rezolvăm o

ecuaŃia de gradul I, ax+b=0, care are soluŃie dacă a<>0. Parametri ecuaŃiei sunt
transmişi prin valoare
<?php
$x=8; $y=-16;
function ec1($a,$b) {if ($a!=0) return TRUE;
else return FALSE;}
if( ec1($x,$y)) echo "solutia ecuatiei $x *x+($y)=0 este x = ", -$y/$x ;
else echo "ecuatia nu are solutie";
?>

Returnarea valorilor booleene.

Dacă la apelul unei funcŃii se omite transmiterea unui parametru, atunci se

afişează eroarea:PHP Warning: Missing argument i. Pentru a evita acest lucru se pot
da valori prestabilite argumentelor funcŃiei, ca în exemplu de mai jos:
<?php
apel_val();
apel_val("parametru prin valoare");
function apel_val($text="parametru prestabilit")

92
{
echo "<font size=4> <I> <B> $text </I> </B> </Font> <BR>";
}
?>

FuncŃii cu argumente prestabilite

Transmiterea parametrilor prin referinŃă

Transmiterea unui parametru prin referinŃă însemnă că valoarea sa se poate

modifica în corpul funcŃiei. Parametrul transmis prin referinŃă trebuie să fie prefixat
de caracterul &.
În exemplu prezentat în figura 3_2, dacă dorim ca valoarea prametrului $x să se
modifice după apelul funcŃiei, singura modificare pe care trebuie să o facem este să avem
&$x, aşa cum se vede mai jos:
<?php
echo "Functii PHP cu transmitere parametrilor prin referinta " , "<BR>";
$x=10; $text="valoarea ";
echo " Valoarea parametrului \$ x inainte de apel = ", $x , "<BR>";
echo " Valoarea parametrului \$ text inainte de apel = ", $text , "<BR>";
echo apel_val($text, $x);
echo " Valoarea parametrului \$ x dupa apel = ", $x, "<BR>";
echo " Valoarea parametrului \$ text dupa apel = ", $text, "<BR>";
// se observa ca valoarea lui $x şi $text s-a schimbat
function apel_val(&$text,&$x)
{$x+=2;
echo "<font size=4> <I> <B> $text </I> </B> </Font> ";
echo "$x*($x+4) =", $x*($x+4) , "<br>";
$text.= "functiei";
} ?>

Transmiterea parametrilor prin referinŃă

93
 Ca şi la transmiterea parametrilor prin valoare, şi la transmiterea parametrilor prin
referinŃă, se pot returna referinŃe, ca în exemplul de mai jos.

Returnarea referinŃelor

Domeniul de valabilitate al variabilelor

Dacă în codul scriptului utilizăm funcŃii, atunci numim domeniul de
valabilitate al unei variabile porŃiunea de cod în care acesta este vizibilă
(recunoscută).
În cazul programelor nestructurate (nu conŃin funcŃii) o variabilă este vizibilă
în tot scriptul. În acest caz, numele unei variabile este unic.
În cazul în care scriptul conŃine funcŃii, pot aparea variabile cu acelaşi nume în
diferite fucŃii. Domeniul de valabilitate al variabilelor dintr-o funcŃie este local, adică
numai în cadrul funcŃiei.
Variabilele locale sunt cele create prin transmiterea parametrilor formali sau
cele definite în corpul unei funcŃii. Acestea nu sunt recunoscute în afara funcŃiilor
unde au fost create. În toate exemplele de mai sus s-au folosit variabile locale.

Variabile globale
O variabilă se numeşte globală dacă ea este definită în afara oricărei funcŃii.
Implicit o variabilă globală nu poate fi adresată în corpul unei funcŃii. Dacă, totuşi se
doreşte să se adreseze o variabilă globală dintr-o funcŃie, atunci acest lucru se face
explicit prin ataşarea cuvântului cheie global înaintea acestei variabile, ca în exeplu
din figura 3_6.
<?php
$x=100;
echo "functia f foloseste variabila globala \$x intoarce valoarea ", f();
function f() {global $x; $x+=100; return $x ;}
?>

Variabile globale

94
Variabile statice

Dacă o funcŃie este apelată de mai mult ori într-un script, variabilele locale din funcŃie
sunt iniŃializate la fiecare apel al funcŃiei respective. De exemplu, dacă vrem sa afişăm
termenii unei progresi aritmetice cu ratia $r, atunci variabila de calculare a unui termen $t este
iniŃializată la fiecare apel de funcŃie f().
Dacă dorim ca o variabilă să îşi păstreze valoarea între apeluri, atunci trebuie să fie
precedată de cuvântul cheie static. În exemplul de mai jos funcŃia g() este identică cu funcŃia
f() cu excepŃia că variabila $t este declarată static.
<?php
$r=9;
echo "functia f foloseste variabila locala <br> " ;
for ($j=1; $j<=10; $j++)
{echo f() , " ; "; }
echo "<br>";
function f()
{global $r; $t=0;
$t+=$r;
$t++; return $t; }
echo "functia g foloseste variabila statica <br> " ;
for ($j=1; $j<=10; $j++)
{echo g() , " ; "; }
function g()
{global $r;
static $t=0;
$t+=$r; $t++; return $t; }
?>

Variabile statice

FuncŃii cuib
În corpul de instrucŃiuni al unei funcŃii pot exista alte funcŃii. Dar funcŃiile
incluse nu sunt văzute de PHP când se apelează o funcŃie părinte, ci numai când este
ea apelată..
În exemplul de mai jos avem un apel de funcŃii incluse. Dacă nu ar fi existat apelul
f2(), nu ar fi fost executată funcŃia f2, deşi ea era inclusă într-o functie apelată , f1().
<?php
function f1()
{echo "sunt prima functie! <br>" ; function f2() {echo "sunt a doua functie!";} }
f1(); f2();
?>

95
 FuncŃii incluse

Fişiere incluse

PHP ne permite, ca şi aplicaŃiile din OFFICE, să includem fişiere. Fişierele

incluse în PHP au în general extensia .inc sau .php. Pentru a include un fişier într-un
script se foloseşte instrucŃiunea include(”nume_fişier.inc”).
Să presupunem că avem următorul fişier finclus.inc .
<?php
echo "Definirea constantelor PI si E <br>";
define("pi", 3.14);
define("e", 2.71);
?>
Dorim să obŃinem rezultatul din figura 2_7, incluzând fişierul de mai sus.
<?php
include ("finclus.inc");
function aria($r)
{return pi*$r*$r ; }
$raza=10;
echo "Raza cercului este: $raza <BR>";
echo "Aria cercului este: ", aria($raza) , "<BR>";
echo "Baza logaritmului natual este e=", e;
?>

Fişier inclus

96
FuncŃii recursive

Limbajul PHP permite lucru cu funcŃii recursive. Ştim din alte limbaje, că o
funcŃie care se autoapelează se numeşte funcŃie recursivă.
Dăm mai jos un exemplu clasic de funcŃie recursivă, şi anume calculul permutarilor
unui număr, !n.
Se cunoaşte formula de recurenŃă a factorialelor: n!=(n-1)!*n.

<?php
echo "Functii recursive <br>";
function p($n)
{if ($n==0) return 1;
else return $n*p($n-1);}
echo " 8!= ", p(8);
?>

FuncŃii recursive

FuncŃii predefinite

Am evidenŃiat la începutul capitolului faptul că funcŃiile sunt din punct de vedere al

realizării ,de două tipuri; create de utilizator şi predefinite.
În PHP există numeroase funcŃii predefinite, o parte dintre acestea vor fi evidenŃiate
pe parcurs, de exmplu la şiruri, la matrice, fişiere, etc.
În această secŃiune se vor enumera câteva dintre funcŃiile matematice.

 abs(număr) – returnează modulul numărului

 sin(x), cos(x), tan(x) - returnează sinusul, cosinusul, tangenta unui unghi
dat în radiani.
 exp(x) – returnează ex
 log10(x), log(x)-returnează logaritmul în baza 10 şi cel natural al lui x
 pow(a,x) – returnează ax dacă a real şi pozitiv, altfel returnează eroare
 floor(x ) - returnează partea întreaga a unui număr ([x])
 ceil(x) - returnează cel mai mare întreg mai mare sau egal cu x (ex.
ceil(2.3)=3; ceil(-2.3)=-2)
 max(x1, x2 ,…xn), min(x1, x2 ,…xn), - returnează maximul respectiv
minimul dintre x1, x2 ,…xn

97
  round(x) - returnează întregul provenit din rotunjirea numărului x
(exemplu: round(2.3)=2, round(2.7)=3)
 rand(a,b) - returnează o valoare aleatoare întreagă aflată între numerele
întregi a şi b

În exemplul urmator apelăm aceste funcŃii matematice.

<?php
define("pi", 3.14);
echo "Functii predefinite matematice <br>";
echo "valoarea absoluta abs(-1.5)= ", abs(-1.5), "<br>";
echo "sin(pi/4), cos(pi/4), tan(pi/4) = ", sin(pi/4), " ; ", cos(pi/4), " ; ", tan(pi/4),
"<br>";
echo " exp(2)= ",exp(2), "<br>";
echo "log10(100) = ", log10(100), " ln(2.71)= ", log(2.7), "<br>";
echo "partea intreaga a lui -2.5 = ", floor(-2.5), "<br>";
echo "cel mai mare intreg mai mare sau egal cu i -2.5 = ", ceil(-2.5), "<br>";
echo "minmul respectiv maximul din -4.5, 9.9, 0, 12.3, -3.4 este ", min(-4.5, 9.9,
0, 12.3, -3.4), " respectiv ", max(-4.5, 9.9, 0, 12.3, -3.4),"<br>";
echo " rotunjirea numarelor 2.3 si 2.7 este " , round(2.3), " respectiv " ,round(2.7),
"<br>";
echo "o valoare aleatoare cuprinsa intre [4,20] este ", rand(4,20);
?>

FuncŃii matematice

LecŃia 24. Şiruri de caractere şi tablouri în PHP

În PHP şirurile de caractere şi masivele se folosesc forte mult. Se cunoaşte

din alte limbaje de programare avansate (C++, C#, Java, etc.) cum se definesc aceste
tipuri de date. Există foarte multe funcŃii care execută diferite operaŃii cu aceste tipuri
de date.

98
Şiruri de caractere

În lecŃia 22 (Operatori şi InstrucŃiuni) s-a discutat despre operatorul de

concatenare de şiruri, ’.’, despre interpolarea variabilelor în şiruri de caractere(tehnica
de interpolare a variabilelor în şiruri de caractere ne permite să încadrăm valorile
variabilelor între ghilimele duble pentru a le insera în şirul de caractere, de exemplu:
$x=100;echo "Noul numarul x= $x"), precum şi despre conversii din şi în şiruri de
caractere a numerelor.
Un şir se memorează ca o succesiune de caractere ASCII, motiv pentru care un
caracter al şirului se adresează prin indicele său.
În acest capitol vom prezenta câteva dintre cele mai importante funcŃii pentru
prelucrarea şirurile de caractere:

 strlen (sir) - returnează lungimea unui şir

În exemplul de mai jos se prezintă operatorul de concatenare a şirurilor şi

funcŃia de determinare a lungimii unui şir. De asemenea, se adresează un caracter al
şirului prin indicele său.
<?php
$sir= "Operatorul de concatenare a sirurilor si functia de determinare a lungimii unui
sir";
echo "Sirul : " . " \" " . $sir . " \" " . "<BR>" ." are lungimea " . strlen($sir) .
" si primul caracter " . $sir[0] ; ?>

FuncŃia strlen
 chr(nr) – returnează caracterul care are odul ASCII nr
 ord(chr) - returnează codul ASCII al caracterului chr
 strtoupper – returnează sir convertit în litere mari
 strtolower – returnează sir convertit în litere mici
 ucfirst - transformă primul caracter al şirului sir în majusculă
În exemplul de mai jos sunt exemplificate aceste funcŃii:
<?php
$sir="Exemple de functii: chr, ord, strtoupper, strtolower, ucfirst ";
$sir1="functia ucfirst";
echo " Caracterele care au codul ASCII: 65, 97, 48 sunt ", chr(65), " ; ",
chr(97), " ; ", chr(48), "<BR>";
echo "Codurile ASCII ale caracterelor: A, a si 0 sunt ", ord("A"), " ; ",
ord("a"), " ; ", ord("0"), "<BR>";
echo " Transformarea sirului: \" Exemple de functii: chr, ord, strtoupper, strtolower,
ucfirst \" in litere mari: ", "<BR>", strtoupper($sir) ,"<BR>";

99
echo " Transformarea sirului \" Exemple de functii: chr, ord, strtoupper, strtolower,
ucfirst \" in litere mici: ", "<BR>", strtolower($sir), "<BR>";
echo " Transformarea primului caracter al sirului \"functia ucfirst \" in majuscula :
", ucfirst($sir1);
?>

FuncŃiile: chr, ord, strtoupper, strtolower, ucfirst

 strpos(sir1, sir2, [poz_start]) – returnează prima apariŃie a şirului sir2 în
sir1, în cazul că sir2 este subşir al sir1, Ńinând cont de litere mari şi mici, în
caz contrar returnează false şi nu afisează nimic. Parametrul poz_start este
opŃional şi indică indicele de unde să înceapă căutarea.
 stripos(sir1, sir2, [poz_start]) – returnează prima apariŃie a şirului sir2 în
sir1, în cazul în care sir2 este subşir al sir1, neŃinând cont de litere mari şi
mici, în caz contrar returnează false şi nu afişează nimic
 strrpos(sir1, sir2) – returnează ultima apariŃie a şirului sir2 în sir1, în
cazul în care sir2 este subşir al sir1, Ńinând cont de litere mari şi mici, în
caz contrar returnează false şi nu afişează nimic
 strripos(sir1, sir2) – returnează ultima apariŃie a şirului sir2 în sir1, în
cazul în care sir2 este subşir al sir1, neŃinând cont de litere mari şi mici, în
caz contrar returnează false şi nu afişează nimic
Mai jos se prezintă un exemplul cu aceste funcŃii:
<?php
$sir="Facultatea de Matematica-Informatica";
echo "Sirul dat este: ", $sir, "<BR>";
echo "Prima aparitie a sirului \"ma\" tinand cont de litere mari si mici este: ",
strpos($sir,"ma"), " <BR> ";
echo "Prima aparitie a sirului \"ma\" netinand cont de litere mari si mici este: " ,
stripos($sir, "ma"), "<BR>";
echo "Prima aparitie a sirului \"mama\" tinand cont de litere mari si mici este: ",
strpos($sir,"mama"), " <BR> "; //nu afiseaza nimic
echo "Ultima aparitie a sirului \"Ma\" tinand cont de litere mari si mici este: " ,
strrpos($sir, "Ma"), " <BR> ";
echo "Ultima aparitie a sirului \"Ma\" netinand cont de litere mari si mici este: " ,
strripos($sir, "Ma");
?>

100
 FuncŃiile: strpos, stripos, strrpos, strripos
 trim – elimină spaŃiile de la începutul şi sfârşitul unui şir
 strstr(sir1, sir2) – returnează sir1 din poziŃia în care a fost găsit şir2
 substr(sir, ind, [lung]) – returnează subşirul şirului sir din poziŃia ind şi
pe o lungime lung dacă parametrul lung există, în caz contrar,până la
sfârşitul şirului
 substr_replace (sir1, sir2, ind, [lung]) – returnează şirul rezultat prin
înlocuirea în sir1 a şirului sir2, din poziŃia ind şi pe o lungime lung, dacă
parametrul lung există, în caz contrar, până la sfârşitul şirului sir1
 substr_count(sir1, sir2) – returnează numărul de apariŃii a şirului sir2 în
şirul şir1
<?php
$sir=" Exemple de functii pentru sirurile de caractere: trim, strstr, substr,
substr_replace, substr_count";
echo "Sirul dat scris cu functia trim(sir): " , "<BR>", trim($sir) , "<BR>";
echo "Functia strstr(sir, \"str\") returneaza sir de unde a fost gasit subsirul str : ",
"<BR>" , strstr($sir,"str") , "<BR>";
echo "Functia substr(sir, 12) returneaza sir din pozitia 12: ", "<BR>",
substr($sir, 12) , "<BR>";
echo "Functia substr(sir, 12,37) returneaza sir din pozitia 12 si de lungime 37: ",
"<BR>" ,substr($sir, 12, 37) , "<BR>";
echo "Functia substr_replace(sir, chr, 60, 3) inlocuirea in sir , a subsirului chr din
pozitia 60 si pe lungime de 3: " , substr_replace($sir, "chr", 60, 3) , "<BR>";
echo "Functia substr_replace(sir, chr, 60) inlocuirea in sir , a subsirului chr din
pozitia 60 " , "<BR>" , substr_replace($sir, "chr", 60) , "<BR>";
echo "Functia substr_count(sir, str) returneaza numarul de aparitii a subsirului str in
sirul sir: " , substr_count($sir, "str") , "<BR>";
?>

101
 FuncŃiile: trim, strstr, substr, substr_replace, substr_count

Conversia şirurilor de caractere

Un număr se transformă în şir de caractere prin conversie forŃată (string) sau
cu funcŃia strval(nr). Numerele reale care se reprezintă cu punct zecimal sau cu
exponent se transformă în şir respectând inclusiv punctul zecimal şi exponent.
O valoare booleană TRUE se transformă în şirul de caractere “1”, iar valoarea
booleană FALSE se transformă în şirul vid “ “ (nu afişează nimic).
<?php
$nr_int= 489;
$nr_real=234.23;
$nr_real_exp= 3.45.e3;
echo "numarul intreg \"$nr_int\" transformat in sir cu (string) este: ", (string)$nr_int,
"<BR>";
echo "numarul real \"$nr_real \" transformat in sir cu functia strval este: ",
strval($nr_real), "<BR>";
echo "numarul real \"$nr_real_exp\" transformat in sir cu functia strval este: ",
strval($nr_real_exp), "<BR>";
echo "Valoarea booleana a expresiei \" 5<10 \" transformat in sir cu string este: ",
(string) 5<10, "<BR>";
echo "Valoarea booleana a expresiei \" 2.7>3.5 \" transformat in sir cu string este: ",
(string) 2.7>3.5 , "<BR>";
?>

102
 Transformarea numerelor în şiruri de caractere
Datele numerice valide conŃin opŃional semnul (+ sau -) urmat de una sau mai
multe cifre şi caracterele “.”, ”e” sau ”E” dacă numărul este real.
Şirurile de caractere se pot transforma în numere şi anume:
• Dacă pe primele poziŃii ale unui şir este un grup de cifre care nu conŃine
caracterelele “.”, ”e” sau ”E” , atunci şirul se transformă în întregul care
are cifrele din grup.
• Dacă pe primele poziŃii ale unui şir este un grup de cifre care conŃine unul
dintre caracterelele “.” şi/sau ”e” sau ”E” , atunci şirul se transformă într-
un număr în virgulă mobilă (real) care are partea întreagă formată din
cifrele grupului până la puntul zecimal şi partea zecimală formată din
cifrele grupului după punct. În cazul în care grupul de cifre conŃine şi
caracterul ”e” sau ”E” , atunci numărul real format se înmulŃeşte cu 10 la
puterea numărului întreg aflat după aceste caractere.
• Dacă şirul nu are pe primele poziŃii cifre, atunci valoarea numerică a
şirului va fi 0 (zero).

Iată un exemplu care clarifică aceste afirmaŃii:

<?php
$nr_int= 500 + "10 Ron";
$nr_real=20.5 +"-200.25";
$nr_real_exp="10.55.e3" +10;
$nr_invalid="ron 1234" +10;
echo "Un intreg 500 + un sir \"10Ron\" este intregul:", $nr_int, "<BR>";
echo "numarul real 20.5 + un sir \" -200.25\" este realul: ", $nr_real, "<BR>";
echo "sirul \"10.55.e3\" + 10 este realul: ", (float)$nr_real_exp, "<BR>";
echo "sirul \"Ron 1234\" + 10 este realul: ", $nr_invalid, "<BR>";
echo"Valoarea expresiei \"$nr_int +(float($nr_real)/2 \" este:", $nr_int
+(float($nr_real)/2, "<BR>";
?>

103
 Transformarea şirurilor de caractere în numere

Scrierea formatată a şirurilor de caractere

În lecŃia 21 s-au prezentat construcŃiile de limbaj echo şi print pentru afişarea

şirurilor de caractere, a variabilelor, numerelor, etc. De exemplu, o valoare reală se
afişează implicit cu 6 zecimale.
 echo – afişează unul sau mai multe şiruri de caractere. Echo nu este funcŃie
ci construcŃie de limbaj, parantezele fiind opŃionale. În cazul în care se
doreşte să se afişeze mai mulŃi parametri, atunci este obligatoriu a se omite
parantezele.
 print – afişează un şir de caractere şi se foloseşte ca echo

Dacă se doreşte formatarea şirurilor de caractere se pot folosi funcŃiile printf()

şi sprintf().
 printf – afişează formatat un text
 sprintf – returnează o valoare care se poate atribui unui şir de caractere
formatat
Ultimele două funcŃii au sintaxa:
printf(sir_formate, var1, var2, …varn );
sprintf(sir_formate, var1, var2, …varn );
unde:
• sir_formate – conŃine o listă de specificaŃii de format pentru fiecare
variabilă în parte, cuprinsă între ” ” de forma:
specificator_format1 specificator_ format2 …specificator_ formatn
• var1, var2, …varn - variabilele care se doresc a fi afişate formatate

Există o corespondenŃă biunivocă între lista de specificator formate şi lista de

variabile, în sensul că specificator_format1, se referă la felul de formatare a var1,
specificator_format2, se referă la felul de formatare a var2, etc.
• un specificator_ format are forma:
[aliniere] [ caractere de umplere] [laŃime] [zecimale] tip

Înaintea fiecărui specificator de format se pune caracterul %.

SemnificaŃia lor este următoarea:

104
 − aliniere – reprezintă modul de aliniere în cazul în care variabila este mai
mică dacât lăŃimea dată prin parametrul lăŃime. Alinierea implicită este la
dreapta, iar caracterul ‘- ‘ face ca alinierea să fie la stânga.
− caractere de umplere - reprezintă caracterul de umplere în cazul în care
variabila este mai mică dacât lăŃimea dată prin parametrul lăŃime. Dacă
acest caracter lipseşte caracterul de umplere este spaŃiul. Dacă dorim
caracterul 0, atunci trecem 0, iar dacă dorim alt caracter decât 0 sau spaŃiu,
el trebuie precedat de ‘(apostrof), ca de exemplu, ’- va umple spaŃiul liber
cu – (liniuŃe).
− laŃime - reprezintă numarul minim pe care trebuie sa-l aibă rezultatul
afişării. Dacă data de formatat este un număr real, acest parametru
reprezintă numărul de caractere al părŃii întregi a numărului real
− zecimale - reprezintă numarul minim pe care trebuie sa-l aibă partea
zecimal a unui număr real. Dacă data de formatat nu este un număr real,
acest parametru nu are nici un efect
− tip – este o directivă obligatorie în cazul unei formatări.
Valorile acestei directive cele mai des folosite sunt:

% – caracterul procent pentru care nu este necesar un argument

b – valoarea este de tip întreg şi afişarea se face în binar

c – valoare este de tip întreg şi se afişează caracterul cu codul ASCII
întregul respectiv

d – valoarea este de tip întreg şi se afişează ca număr zecimal cu semn

u –valoarea este de tip întreg şi se afişează ca număr zecimal fără semn

f – valoarea este de tip real şi se afişează ca un număr real

s – valoarea este de tip şir de caractere şi se afişează tot ca şir

o – valoarea este de tip întreg şi se afişează în octal

x /X– valoarea este de tip întreg şi se afişează în hexazecimal cu litere
mici respectiv mari
Exemplificăm modele de formatare în codul PHP de mai jos
$x= -7.45;
$y=-40;
$z=78;
print ("variabilele x, y,z fisate neformatat sunt: x=$x ; y=$y ; z=$z "); echo "<BR>";
printf( " variabila z = $z afisata formatat in baza 8 este:= %o si in baza 16 este :
%X <BR>", $z, $z);
printf ("variabila x afisata formatat cu numar implicit de zecimale (6) este x= %f
<BR>",$x);
printf ("variabila x afisata formatat pe 6 pozitii cu 3 zecimale este = %6.3f
<BR>",$x);
printf("variabila y afisata formatat pe 7 pozitii, cu caracter de umplere puncul si
aliniata stinga: y=%'.-7d", $y);
echo "<br>";
printf("variabila y afisata formatat pe 9 pozitii, cu caracter de umplere liniuta si
aliniata implicit dreapta: y=%'-9d", $y); echo "<br>";
printf("cod ASCII a lui $z este : %'.7c", $z); echo "<br>";
$sir=sprintf("formatarea cu sprintf a sirului: Semestrul acesta avem %s examene si
%s verificari", 5, 3);
echo $sir;
?>

105
 FuncŃiile printf şi sprintf

Tablouri în PHP

Până acum am lucrat cu date stocate în variabile simple. Dar PHP permite şi
lucru cu masive (tablouri), numite şi vectori pentru masivele cu o dimensiune sau
matrice pentru masivele cu două dimensiuni, care pot stoca elemente multiple de date,
atribuind fiecărei date un index sau o cheie. Datorită acestui fapt se pot parcurge
elementele tabloului prin incrementarea indexului.
De asemenea, libertatea pe care ne-o oferă PHP în lucru cu masive este faptul că
masivele nu se declară.
Afişarea matricelor indiferent de valoarea indecşilor sau a valorilor elementelor se
face cel mai simplu cu funcŃia print_r($nume_matrice).
 print_r($nume_matrice) – afişează elementele unei matrice sub forma:
Array ([0] = “val_elem1” [1] =>“val_elem2”…[n] =>“val_elem n )

Crearea şi afişarea tablourilor

În PHP tablourile au un nume ca şi variabilele simple , dar el trebuie sa fie

precedat de caracterul $. După numele matricei se adaugă parantezele drepte, [index
], ceea ce indică faptul că se lucrează cu tablouri (variabile indexate). Se poate folosi
şi o scurtătură pentru crearea matricelor, folosind caracterele [] (fară conŃinut ), aşa
cum se observă în exemplul de mai jos
În PHP avem multe funcŃii care permit gestionarea tablourilor. Ele vor fi descrise pe
parcurs.
 Count(nume_vector) – returnează numărul de elemente al unui vector
De exemplu, pentru a crea şi afişa un vector care conŃine ca date primele 10 numere
naturale şi o matrice de 3x3, care are elemnte produsul i*j, avem scriptul:
<?php
echo ("Crearea si afisarea unui vector cu primle 10 numere naturale <BR>");
for($i=0;$i<10;$i++) $v[$i]=$i;

106
for($i=0;$i<10;$i++) echo $v[$i], " ; ";
echo ("<BR>afisarea unui vector cu primle 10 numere naturale cu functia print_r);
print_r($v);
echo "<BR> Numarul de elemet al vectorului este: ", count($v) ;
echo ("<BR> Crearea si afisarea unui vector cu primle 10 numere naturale la patrat
<BR> folosind declararea tabloului cu [] <BR>");
for($i=0;$i<10;$i++) $u[]=$i*$i;
for($i=0;$i<10;$i++) echo $u[$i], " ; ";
echo ("<BR> Crearea si afisarea unei matrice de 3x3, cu elemente produsul i*j <BR>
" );
for($i=1;$i<4;$i++)
for($j=1;$j<4;$j++) $matr[$i][$j]=$i*$j;
for($i=1;$i<4;$i++) {
for($j=1;$j<4;$j++) echo ($matr[$i][$j] . " ");
echo "<BR>";}
?>

Crearea si afişarea unui vector şi a unei matrice

În PHP indecşii pot fi şi şiruri de caractere, iar valorile datelor astfel indexate
pot fi numere şi/sau şiruri de caractere. Matricele cu indecşi şiruri de caractere,
trebuie declarate element cu element.
Pentru a afişa un astfel de tablou se poate afişa fiecare element sau se poate folosi
funcŃia count(nume_tablou) în cazul în care tabloul are multe elemente.
Pentru a parcuge un vector creat cu indecşi şiruri de caractere, indiferent dacă datele
sunt numerice sau text, se foloseşte în afara funcŃiei print_r() şi instrucŃiunea foreach
care ne permite să parcurgem un vector, cu variabila de ciclare ind, şi citirea se face în
variabila var. Operatorul ”=>” permite să specificăm perechi (index,valoare)
Sintaxa instrucŃiunii este: foreach (vector as ind=> var)
În PHP tablourile se pot declara şi cu funcŃia array. Dacă se doreşte să se plece de la
o anumită valoare a indexului se foloseşte operatorul ”=>”(de exemplu pentru primul
index 1, se scrie:
$ex=array(1=>"Baze", " WEB","Algoritmi","Grafuri");
În acest caz se va crea matricea:
$EX[0]= "Baze"; $EX[1]="WEB"; $EX[2]= "Algortmi"; $EX[4]="Grafuri";
De asemenea, se pot crea tablouri cu funcŃia array().

107
  array – crează tablouri cu ajutorul perechii (index,valoare), folosind
operatorul ”=>”,ca de exemplu:
$fac=array("mat-inf"=>400, ”drept"=>300,"arhitectura"=>600,
”limbi"=>700);
În acest caz se va crea matricea:

$fac[”mat-inf”]=400;
$fac[”drept”]=300 ;
$fac[”arhitectura”]=600;
$fac["limbi straine"]=>700;
În exemplul de mai jos se dau toate posibilităŃile de creare şi afişare a tablourilor.
<?php
print("Crearea tablourilor indexate cu siruri de caractere <br>");
$EXAM[0]= "baze de date";
$EXAM[1]= "prog WEB";
$EXAM[2]= "grafuri";
$EXAM[]="algoritmi";
echo " Afisarea elementelot vectorului EXAMEN cu FOR <br>";
for($i=0;$i<4;$i++) echo $EXAM[$i] , " ; "; echo " <br>";
echo " Afisarea elementelot vectorului EXAM folosind functia print_r <br>";
print_r($EXAM); echo " <br>";
echo "Afisarea unor elemente a vectorului EXAMEN <br>";
echo $EXAM[1]; echo " ; ", $EXAM[3]; echo " <br>";
echo " Afisarea elementelot vectorului EXAMEN folosind functia count <br>";
for($i=0;$i<count($EXAM);$i++) echo $EXAM[$i] , " ; "; echo " <br>";
echo " Crearea si afisarea vectorului UNIV care are indecsi siruri de caractere si valori numere <br>";
$UNIV["U-BUCURESTI"] = 12000;
$UNIV["SPIRU HARET"] = 15000;
$UNIV["POLITEHNICA"] =20000;
$UNIV["CONSTRUCTII"]= 18000;
$u="UNIVERSITATE"; $nr= "NUMAR STUDENTI";
printf("%'--20s %-30s " , $u, $nr) ; echo "<br>";
foreach ($UNIV as $i =>$nume) echo ($i . " ---------------- ". $nume . " <br> ");
echo "Crearea vect. ex folosind functia array si primul index sa fie 1", " <br> ";
$ex=array(1=>"Baze", " WEB","Algoritmi","Grafuri");
foreach ($ex as $i =>$nume) echo ($i . " ". $nume . "<BR>");
echo "Crearea vect fac cu functia array si perechea index=>valoare", " <br> ";
$u="FACULTATE"; $nr= "NUMAR STUDENTI";
printf("%'--15s %-20s " , $u, $nr) ; echo "<br>";
$fac= array( "mat-inf------"=> 400, "drept--------"=>300, "arhitectura--"=> 600,
"limbi straine"=>700);
foreach ($fac as $i =>$nume) echo ($i . " -------------- ". $nume . " <br> "); ?>

108
 Crearea şi afişarea unor tablouri cu indecşi şi valori numere şi/sau şiruri de
caractere

Editarea Tablourilor

Dacă se doreşte a se modifica o matrice în sensul de a adăuga un element, de a

şterge un element şi de a copia o matrice, PHP oferă posibilităŃi pentru aceste
operaŃii.
Să presupunem ca avem matricea cu numele examenelor dintr-un semestru de la o
facultate , dintr-n an de studii (creată în exemplul precedent):
$EXAM[0]= "baze de date";
$EXAM[1]= "prog WEB";
$EXAM[2]= "grafuri";
$EXAM[3]="algoritmi";

Dacă dorim să modificăm valoarea elementului 3 , vom adăuga de exemplu,

$EXAM[2]= "Inteligenta artificiala"; la sfârşitul descrierii matricei.

Dacă dorim să adăugăm un nou elemnt matricei, vom folosi scurtătura PHP de
adăugare a unui element, pe care am descris-o la începutul secŃiunii, în exemplul 4.9,
şi anume: $EXAM[]="Programarea pe obiecte";
Pentru a şterge un element dintr-o matrice se poate atribui un şir vid, ””, valorii
elementului respectiv sau se poate folosi funcŃia unset(element), ca de exemplu:
$EXAM[3]=""; sau unset($EXAM[3]);
Pentru a copia o matrice printr-o singură operaŃie, se foloseşte operaŃia de atribuire
către altă matrice, astfel: $EX=$EXAM;
În exemplul de mai jos exemplificăm aceste operaŃii de editare, descrise mai sus.
<?php
echo " Afisarea elementelot vectorului EXAM <br>";

109
$EXAM[0]= "baze de date";
$EXAM[1]= "prog WEB";
$EXAM[2]= "grafuri";
$EXAM[3]="algoritmi";
//copierea unei matrice
$EX=$EXAM;
for($i=0;$i<count($EXAM);$i++) {echo $EXAM[$i] ; echo " <br>";}
echo " Afisarea elementelor vectorului EXAM dupa modificare <br>";
$EXAM[0] = "baze de date";
$EXAM[1] = "prog WEB";
$EXAM[2] = "grafuri";
$EXAM[3] ="algoritmi";
//modificarea unui element
$EXAM[2] = "Inteligenta artificiala";
//adaugarea unui element
$EXAM[] ="Programarea pe obiecte";
for($i=0;$i<count($EXAM);$i++) { echo $EXAM[$i] ; echo " <br>";}
//stergerea elementelor
echo " Afisarea vectorului EXAM dupa stergerea elem 4 cu sirului vid <br>";
$EXAM[3]=" ";
for($i=0;$i<count($EXAM);$i++) {echo $EXAM[$i] ; echo " <br>";}
echo " Afisarea vectorului EXAM dupa stergerea elementului 1 cu unset() <br>";
unset($EXAM[0]);
for($i=0;$i<count($EXAM);$i++) { echo $EXAM[$i] ; echo " <br>";}
echo " Afisarea vectorului EX copie a vectorului EXAM <br>";
for($i=0;$i<count($EXAM);$i++) {echo $EX[$i] ; echo " <br>";}?>

Editarea matricelor

Sortarea tablourilor
În PHP există mai multe funcŃii pentru sortarea unei matrice, în funcŃie de
valoarea indecşilor dacă sunt numerici sau şiruri de caractere.
FuncŃiile:
 sort - sortează crescător o matrice cu indecşi numerici
 rsort - sortează descrescător o matrice cu indecşi numerici

110
 Am precizat faptul că o matrice se parcurge cel mai simplu cu ajutorul funcŃiei
print_r(), şi se va afişa sub forma Array([0]=> val1…[n]=>val n).
În continuare se consideră o matrice care se afişează înainte şi după sortarea
crescătoare şi descrescătoare cu ajutorul funcŃiilor de mai sus.
<?php
echo "Matricea data este <br>";
$EXAM[0]= "baze de date";
$EXAM[1]= "prog WEB";
$EXAM[2]= "grafuri";
$EXAM[]="algoritmi";
$EXAM[]="intelingenta artificiala";
print_r($EXAM); echo " <br>";
sort($EXAM);
print (" <br> Matricea sortata crescator este <br>");
for($i=0;$i<count($EXAM);$i++) { echo $EXAM[$i] ; echo " <br>";}
rsort($EXAM);
print ("Matricea sortata descrescator este <br>") ;
for($i=0;$i<count($EXAM);$i++) { echo $EXAM[$i] ; echo " <br>";} ?>

Sortarea matricelor cu indecşi numerici

următoarele funcŃii:
 asort – sortează crescător o matrice cu chei text şi păstrează asocierea
indecşilor
 arsort – sortează descrescător o matrice cu chei text şi păstrează asocierea
indecşilor
 ksort – sortează crescător o matrice cu chei text în funcŃie de chei
 krsort– sortează descrescător o matrice cu chei text în funcŃie de chei
În exemplul următor se sortează o matrice care are indecşii şiruri de caractere,
crescătar şi descrescător după valori şi după indecşi.

111
<?php
echo "Matricea data este <br>";
$fruct[bun]="banane";
$fruct["acru"]="lamaie";
$fruct["gustos"]="anans";
$fruct["zemos"]="pepene";
print_r($fruct); echo " <br>";
print (" <br> Matricea sortata crescator este <br>");
asort($fruct); print_r($fruct); echo "<br>";
print ("Matricea sortata descrescator este <br>") ;
arsort($fruct); print_r($fruct); echo "<br>";
print (" <br> Matricea sortata crescator dupa indecsi <br>");
ksort($fruct); print_r($fruct);
print (" <br> Matricea sortata descrescator dupa indecsi <br>");
krsort($fruct); print_r($fruct); ?>

Sortarea matricelor cu chei text, după valori şi după chei

Navigarea Matricelor

PHP are şi funcŃii care permit navigarea printr-o matrice cu ajutorul unui
pointer (cursor de matrice) care întotdeauna este considerat deasupra unui element şi
pastrează poziŃia elementului.
 current – returnează elementul curent (deasupra căruia este pointer-ul)
 next - deplasează pointer-ul pe elementul următor şi returnează valoarea
reŃinută de acesta
 prev - deplasează pointer-ul pe elementul precedent şi returnează valoarea
reŃinută de acesta
 key - returnează indicele elementul deasupra căruia se află pointer-ul
 end - deplasează pointer-ul la ultimul elementul şi returnează valoarea
reŃinută de acesta
 reset - deplasează pointer-ul la primul element şi returnează valoarea
reŃinută de acesta

112
FuncŃiile de mai sus sunt exemplificate tot pe matricea din exemplul precedent.
<?php
echo "Matricea data este <br>";
$fruct[bun]="banane";
$fruct["acru"]="lamaie";
$fruct["gustos"]="anans";
$fruct["zemos"]="pepene";
print_r($fruct);echo " <br>";
echo " Elementul curent: ", current($fruct), "<br>";
echo " Elementul urmator: ", next($fruct), "<br>";
echo " Elementul urmator: ", next($fruct), "<br>";
echo " Elementul precedent:", prev($fruct), "<br>";
echo " Ultimul element: ", end($fruct), "<br>";
echo " Resetare vector: ", reset($fruct), "<br>";
?>

Navigarea într-o matrice

În secŃiunea şiruri, s-a prezentat conversia şirurilor de caractere din şi în alte
formate. PHP oferă funcŃii care pot face conversia şirurilor de caractere în şi din
matrice. Aceste funcŃii sunt:
 implode(“parametru”, matrice) – transformă matrice într-un şir de
caractere, transmiŃând prin parametru, textul care se doreşte ca separator
(cel mai frecvent se foloeşte virgula)
 explode (“parametru”, matrice) - transformă un şir de caractere într-o
matrice transmiŃând prin parametru, textul care se doreşte să se facă
separarea
 list – stochează elementele unei matrice într-o listă de variabile
<?php
echo "Matricea data este <br>";
$fruct[bun]="banane";
$fruct["acru"]="lamaie";
$fruct["gustos"]="anans";
$fruct["zemos"]="pepene";
print_r($fruct);echo " <br>";
echo "Sirul care contine elementele matricei date <br>";
$sirmat = implode(" , ", $fruct);
echo $sirmat, " <br>";
echo "Matricea care are elemnte, elementele unui sir data este <br>";

113
$fruct= explode(" , ", $sirmat);
print_r($fruct);
echo "Variabilele care sunt elementele unei matrice date sunt: <br>";
list($e1,$e2,$e3,$e4)= $fruct;
echo $e1, " , ", $e2," , ", $e3," , ",$e4; ?>

Conversia matricelor în şi din şiruri şi în liste de variabile

OperaŃii cu elemetele unei matrice

Există mai multe funcŃii în PHP care ne permit să efectuăm operaŃii cu

elementele unei matrice. În continuare prezentăm unele dintre cele mai importante
funcŃii care permit manipularea datelor din matrice, restul sunt prezentate în anexă,
alturi de celelalte funcŃii PHP.

 in_array – verifică dacă o valoare se află într-o matrice dată

 array_pad –completează matricea cu o valoare până la lungimea dată
 array_pop – extrage un element de la sfârşitul unei matrice
 array_push – adaugă elemente la sfârşitul unei matrice
 array_reverse – returnează matricea cu elemente în ordine inversă
 array_sum – execută suma elementelor dintr-o matrice dată
 array_shift – şterge un elemente la îinceputul unei matrice
 array_unshift – adaugă elemente la începutul unei matrice
 array_unique – elimină elementele duplicate dintr-o matrice dată

<?php
echo "Matricea data este: <br>";
$date = array(45, 34, 12, 67, 12, 45, 90);
print_r($date); echo " <br>";
//raspunsul va fi true=1 sau false =""
echo "Functia in_array verifica daca 12 se afla in sirul dat . Raspuns = ",
in_array( 12, $date), " <br>";
echo "ompleteaza sirul cu valoarea 10 pana la lungimea 10 <br>" ;
$date=array_pad($date,10, 10); print_r($date); echo " <br>";
echo "Functia array_pop extrage un element de la sfarsitul sirului <br>";
array_pop($date); print_r($date); echo " <br>";
echo "Functia array_push adauga elementele 100 si 120 la sfarsitul <br>";
array_push($date,100,120); print_r($date); echo "<br>";

114
echo "Functia array_reverse returneaza matricea cu elemente in ordine inversa <br>";
$date=array_reverse($date); print_r($date); echo " <br>";
echo "Functia array_sum executa suma elementelor dintr-o matrice data. Suma = ",
array_sum ($date), " <br>";
echo "Functia array_shift extrage un elemente la inceputul unei matrice <br>";
array_shift($date); print_r($date); echo "<br>";
echo "Functia array_unshift adauga 45 la inceputul sirului <br>";
array_unshift($date,45); print_r($date); echo "<br>";
echo "Functia array_unique elimina elementele duplicate dintr-o matrice data <br>";
$date=array_unique($date); print_r($date); echo "<br>";?>

FuncŃii pentru manipularea datelor în matrice

Crearea şi afişarea matricelor multidimensionale

Pentru a crea şi afişa matrice(tablouri) multidimensionale folosim aceleaşi

metode ca la cele unidimensionale.
<?php
echo ("<BR> Crearea si afisarea unei matrice de 3x3, cu elemente produsul i*i+j*j
<BR> " );
for($i=1;$i<4;$i++)
{for($j=1;$j<5;$j++) { $matr[$i][$j]=$i*$i+$j*$j; echo ($matr[$i][$j] . " "); }
echo "<BR>"; }
echo "Numarul de linii este dat de functia count(matrice)=",count($matr),"<br>";
echo "Afisarea matricei afisind fiecare linie ca vector, cu print_r (linie) <br>";
for($i=1;$i<=count($matr);$i++)
{print_r($matr[$i]);echo "<BR>";}
?>

115
 Crearea şi afişarea matricelor bipătrate

Să considerăm ca exemplu o matrice cu notele la 3 examene ale unei grupe de

studenŃi. Cheile sunt:codul studentului şi numărul notei, iar valorile elementelor sunt
notele.Pentru creare folosim la indexul 2 declararea [], iar parcurgerea se face după
numărul de elemente(cu functia count).
<?php
$nume_nota[0][]=7;
$nume_nota[0][]=8;
$nume_nota[0][]=6;
$nume_nota[1][]=8;
$nume_nota[1][]=10;
$nume_nota[1][]=9;
echo "Numar de studenti(linii) = ", count( $nume_nota) , "<BR>";
for ($ind1=0; $ind1<count( $nume_nota); $ind1++)
for ($ind2=0; $ind2<count( $nume_nota[$ind1]); $ind2++)
echo "nume_nota[$ind1][$ind2] = ", $nume_nota[$ind1][$ind2], "<br>" ;
?>

Crearea şi afişarea matricelor bipătrate folosind funcŃia count()

Se poate parcurge matricea şi cu foreach , cu ajutorul perechii (cheie =>
valoare ) , ca la vectori.
Să presupunem un exemplul cu 2 universităŃi şi numărul de locuri la 3 dintre facultăŃi.
<?php
echo " Crearea si afisarea vectorului UNIV care are indecsi siruri de caractere si
valori numere <br>";

116
$UNIV["UB"]["MAT_INF"] = 400;
$UNIV["UB"]["Drept"] = 200;
$UNIV["UB"]["Istorie"] = 400;
$UNIV["SH"]["MAT_INF"] = 400;
$UNIV["SH"]["Drept"] = 800;
$UNIV["SH"]["Istorie"] = 200;
$u="UNIVERSITATE"; $nr= "NUMAR STUDENTI";
printf("%'--30s %-50s " , $u, $nr) ;
echo "<br>";
foreach ($UNIV as $i =>$vect)
foreach($vect as $j=> $valoare)
echo " UNIV[$i][$j]= " . " -------------------- ". $valoare . " <br> ";?>

Crearea şi afişarea matricelor bipătrate folosind instrucŃiunea foreach

ObservaŃie. FucŃiile prezentate mai sus pentru matricele unidimensionale nu pot fi
folosite şi pentru matricele bidimensionale direct.
De exemplu, echo array_sum($UNIV) va afişa 0 sau echo in_array(400, $UNIV) va
afişa şirul vid. Pentru a le putea folosi trebuiesc utilizate în linii(vectori).
<?php ...
echo "Suma studentilor de la UB este: ", array_sum($UNIV["UB"]), "<BR>";
echo "Suma studentilor de la SH este: ", array_sum($UNIV["SH"]), "<BR>";
echo "Sunt facultati in SH cu nr de locuri 400 ? raspuns: ";
if(in_array(400,$UNIV["SH"])) echo "DA";
?>

FucŃii aplicate pentru matrici bidimensionale

117
LecŃia 25. Transmiterea datelor din formulare HTML către
server
Limbajul PHP devine interesant în momentul când putem manipula datele
dintr-un formular. Am prezentat în lecŃia 10 crearea unui formular..
Principalele controale ale unui formular sunt:
• rubrici - conŃine text pe un rând, create cu tag-ul <INPUT TYPE=TEXT>
• casete de text – conŃine text pe mai multe rânduri create cu tag-ul
<TEXTAREA>
• casete de validare –casete de validare date, create cu tag-ul <INPUT
TYPE=CHECKBOX>
• casete radio – butoane radio, create cu tag-ul <INPUT TYPE=RADIO>
• controale ascunse – conŃin text dar nu apar în paginile web, create cu tag-
ul <INPUT TYPE=HIDDEN>
• parole – conŃin text dar în paginile web apare caracterul “*”, create cu tag-
ul <INPUT TYPE=PASSWORD>
• imagini – conŃin imagini sau hărŃi de imagini, folosite cu un clic, create cu
tag-ul <INPUT TYPE =IMAGE >
• submit – buton de transmitere date, creat cu tag-ul <INPUT
TYPE=SUBMIT>
• reset – buton re reiniŃialixare, create cu tag-ul <INPUT TYPE=RESET>
• liste tip pop-up – conŃine liste de elemente din care se poate selecta un
element, create cu tag-ul <SELECT> şi fiecare element al listei creat cu
tag-ul <OPTION>
• liste derulante - conŃine liste de elemente din care se poate selecta şi se
pot vizualiza mai multe elemente, create cu tag-ul <SELECT SIZE=NR
MULTIPLE> şi fiecare element al listei creat cu tag-ul <OPTION>
• butoane - butoane cărora li se poate atribui un comportament cu ajutorul
unui program, create cu tag-ul <INPUT TYPE=BUTTON>
• file – se foloseşte pentru încărcarea fişierelor, create cu tag-ul <INPUT
TYPE=FILE
Datele din controalele prezentate mai sus, pentru a putea fi citite de
instrucŃiunile limbajului PHP trebuiesc înglobate într-un formular, creat cu eticheta
<FORM atribute> … </FORM>. Amintim principalele atribute ale lui <FORM>:
• ACTION – defineşte adresa URL a destinatarul datelor din formular. În
cazul în care acest atribut lipseşte, destinatarul este pagina WEB.
• METHOD - defineşte metoda sau protocolul utilizat pentru transmiterea
datelor de la programul de navigare la server.Existǎ douǎ valori posibile
ale acestui atribut şi anume:

method=“GET” – este implicită şi se utilizeazǎ dacă datele din formular
se transmit prin perechea (nume,valoare)....

method=“POST” – datele din formular sunt transmise server-ului într-o
tranzacŃie separatǎ, nu o datǎ cu adresa URL.
• ENCTYPE - defineşte metoda de codificare a datelor înainte ca ele sǎ fie
transmise la server.
• TARGET - se foloseşte în cazul în care se doreşte ca formularul cu
rezultate să aparǎ într-o fereastrǎ nouǎ a browser-ului.

118
 Pentru a transmite date către scriptul destinaŃie se folesc butoanele SUBMIT şi
/sau IMAGE.
Controalele dintr-un formular sunt aduse la valorile îniŃiale folosind butonul
de reiniŃializare, RESET. Butoanele SUBMIT şî RESET pot avea orice valoare
înscrisă pe ele, aşa cum va rezulta din exemplele următoare.

Accesul la date

Datele transmise în scripturile PHP se află în matrici globale, în funcŃie de metoda de

trimitere. Dacă s-a folosit metoda implicită GET, datele se pot afla din matricea
$_GET, iar dacă s-a folosit metoda POST, datele se pot afla din matricea $_POST.
Desemenea, datele din cele două matrice se mai găsesc în matricea $_REQUEST.
ConŃinutul fişierelor încărcate se află în matricea globală $_FILES.
În continuare se vor prezenta exemple de creare de formulare care conŃin diferite
controale, din cele enumerate mai sus, precum şi modul de obŃinere a acestora din scripturi
PHP.

Controale de text
Casetele de text cu un rând se crează cu eticheta <INPUT TYPE=TEXT>.
Casetele de text ce conŃin text pe mai multe rânduri se crează cu eticheta
<TEXTAREA atribute>. Principalele atribute sunt:
• rows - indică numărul de linii care se doresc a fi vizibile
• cols - indică numărul de coloane care se doresc a fi vizibile
• readonly – conŃinutul casetei nu poate fi schimbat de utilizator
În exemplul următor se crează un formular cu trei casete de text în fişierul
c5_ex1.php. Primele două conŃin variabile intregi, iar a treia conŃine un comentariu.
Datele sunt transmise unui script aflat pe server-ul local, prel1.php, care va
prelucra datele şi va afişa produsul lor.
<HTML>
<HEAD> <TITLE>Controale text -PHP</TITLE></HEAD>
<BODY>
<FORM ACTION="prel1_text.php"' method="POST">
Variabila $a <INPUT type="text" name = "a"> <br>
Variabila $b <INPUT type="text" name = "b"> <br>
Comentariu <TEXTAREA rows=3 cols=30 readonly>Datele din formular sunt
transmise scriptului prel1.php, iar produsul e transmis browser-ului
</TEXTAREA> <br>
<INPUT type="submit" value ="Trimite">
</FORM > </BODY> </HTML>

119
 Dacă se completează cu valorile a=10 ; b=20 şi se apasă pe butonul Trimite, se
va afişa rezultatul prelucrat de scriptul prel1.php
<?php
echo "<br> a * b = ", $_POST["a"] *$_POST["b"], "<BR>";
?>

Citirea şi prelucrarea datelor din casete de text ale unui formular

Fişierul care conŃine descrierea programului poate fi şi cu extensia html, dar
în acest caz se lucrează de pe server-ul local, adică se navighează la pagina:
http://localhost/CURS_PHP/CURS5_PHP.
De exemplu, dorim să rezolvăm ecuaŃia de gradul II. În fişierul c5_ex2.html se crează
formularul care introduce coeficienŃii ecuaŃiei.
<HTML>
<HEAD> <TITLE>Controale text -PHP</TITLE></HEAD>
<BODY>
<FORM ACTION="prel2.php"' method="POST">
Coeficientul a <INPUT type="text" name = "a"> <br>
Coeficientul b <INPUT type="text" name = "b"> <br>
Coeficientul c <INPUT type="text" name = "c"> <br>
<INPUT type="submit" value ="GO">
</FORM > </BODY> </HTML>

Apăsând pe butonul GO se va optŃne rezultatele prelucrate de scriptul

prel2.php
<?php
$d= $_POST["b"] * $_POST["b"] - 4* $_POST["a"]*$_POST["c"];
if ($d>=0) echo "x1= ", (- $_POST["b"]+ sqrt ($d) )/ (2* $_POST["a"]), " ; x2=
",

120
(- $_POST["b"]-sqrt ($d) )/ (2* $_POST["a"]);
else echo " Radacini complexe"; ?>

Citirea datelor dintr-un formular HTML şi afişarea cu ajutorul unui script PHP
În cazul în care nu cerem prelucrarea datele din matricea unde au fost trimise
conform metodei utilizată în <FORM mathod=”nume”>, atunci serverul nu va trimite
date spre afişare browser-ului.
În exemplul de mai jos datele se trimit scriptului prel3.php, prin metoda
implicită GET. şi sunt cerute la afişare prin metoda POST:
<HTML>
<HEAD> </HEAD>
<BODY>
<FORM ACTION="prel3.php">
NUME: <INPUT type="text" name = "nume"> <br>
VARSTA: <INPUT type="text" name = "virsta"> <br><br>
<INPUT type="submit" value ="Trimite"><br>
</FORM >
</BODY>
</HTML>
Dacă se apasă pe butonul Trimite, datele sunt prelucrate de prel3.php.
<?php
echo $_POST["nume"] , " ; " , $_POST["virsta"];
?>
Datele se cer a fi prelucrate din matricea $_POST, dar ele se află în matricea
$_GET. În acest caz browser-ul va afişa caracterul “;” .

Transmiterea datelor cu metoda GETşi prelucrarea cu metoda POST

121
<HTML>
<HEAD>
<TITLE>Controale text -PHP</TITLE>
</HEAD>
<BODY>
<!---acelasi fisier ca c5_ex4.php, extensiile difera si ambele se ruleaza de pe server---
>
<FORM ACTION="prel4.php"' method="GET">
<TEXTAREA name = "Studenti" cols=20 rows=3>
</TEXTAREA><br><br>
<INPUT type="submit" value ="Trimite">
</FORM >
</BODY> </HTML>

Dacă se apasă butonul de transmitere date submit cu valoarea Trimite, atunci

se va apela fişierul prel4.php.
În cazul in care nu se cunoaşte metoda de trimitere a datelor, atunci pentru
prelucrarea lor de către scripturi se poate folosi matricea echo $_REQUEST, care
conŃine datele din matricele $_POST şi $_GET , aşa cum se solicită în fişierul
prel4.php .
<?php
echo $_REQUEST["Studenti"] , "<br>";
?>

Afişarea datelor din matricea $_REQUEST

122
Casete de validare
O casetă de validare se crează cu eticheta <INPUT TYPE=CHECKBOX
atribute>. Atributele folosite cu tipul radio, pot fi:

Name - reprezintă numele controlului

Value - reprezintă valoarea casetei

Checked - utilizat dacă se dorete ca starea implicită a elementului să fi
cea validată
În cazul casetelor de validare se trimit server-ului numai valorile casetelor
marcate. In cazul când se solicită o valoare nemarcată Browser-ul nu va afişa nimic,
aşa cum se va costata în exemplele următoare.
Pentru a testa daca o valoare există se poat folosi funcŃia ISSET(), care returnează
valoarea TRUE dacă variabila cerută este marcată şi FALSE în caz contrar ( de
exemplu: isset($_REQUEST[“name”]) )
În exemplul următor se crează casete de validare cu fişierul c5_ex5.php şi datele din
ele se transmit scriptului prel5.php pentru a le afişa.
<HTML>
<HEAD>
<TITLE>Casete de Validare</TITLE>
</HEAD>
<BODY>
<B>CUMPARATURI</B> <br>
<FORM ACTION="prel5.php">
<B>CARNE</B> <INPUT type="checkbox" name = "casuta1"
value="CARNE PORC"> <br>
<B> BRANZA</B> <INPUT type="checkbox" name = "casuta2"
value="BRANZA OAIE"> <br><B>LEGUME </B> <INPUT
type="checkbox" name = "casuta3" value="ROSII"> <br>
<B> FRUCTE </B> <INPUT type="checkbox" name = "casuta4"
value="MERE"><br>
<INPUT type="submit" value ="Trimite">
</FORM > </BODY> </HTML>

Dacă se apasă butonul de transmitere date submit cu valoarea Trimite, atunci

se va apela fişierul prel5.php, care va afişa matricea $_GET.
<?php
echo " S-a tastat: <br>", print_r($_GET); echo "<br>";
If (isset($_REQUEST["casuta1"])) echo "S-a tastat ", $_REQUEST["casuta1"] ,
"<br>";
If (isset($_REQUEST["casuta2"])) echo "S-a tastat ", $_REQUEST["casuta2"] ,
"<br>";
If (isset($_REQUEST["casuta3"])) echo "S-a tastat ", $_REQUEST["casuta3"] ,
"<br>";

123
If (isset($_REQUEST["casuta4"])) echo "S-a tastat ", $_REQUEST["casuta4"] ,
"<br>";
?>

Citirea datelor din căsuŃe de validare şi afişarea rezultatelor

Butoane radio
Butoanele radio se crează cu elementul <INPUT TYPE=RADIO atribute>
În cazul în care se doreşte ca mai multe buroane să fie grupate sub acelaşi nume ,
atunci atributul name=”nume” este obligatoriu să fie acelaşi pentru toate butoanele.
În cazul în care atributul value lipseşte şi butonul este marcat atunci se va transmite
valoarea implicita ON.
<HTML>
<HEAD>
<TITLE>Butoane Radio</TITLE>
</HEAD>
<BODY> <B> Clasificarea studenŃilor la Cursul WEB</B>
<FORM ACTION="prel6.php">
<PRE>
<B>NUME:</B><INPUT type= "text" name="nume" size=30>
<B>EXAMEN:</B> <INPUT type="text" name="ex" maxlength=20>
<HR>
</PRE>
<B> Student slab [5-6] </B> <INPUT type="RADIO" name = "BUTON"
value="[5-6]"> <br>
<B> Student bun [7-8] </B> <INPUT type="RADIO" name = "BUTON"
value="[7-8]"> <br>
<B> Student forte bun [9-10]</B> <INPUT type="RADIO" name = "BUTON"
value="[9-10]"> <br>
<INPUT type="submit" value ="Trimite">
</FORM > </BODY>< /HTML>

124
 Dacă se apasă butonul de transmitere date submit cu valoarea Trimite, atunci
se va apela fişierul prel6.php, care va afişa valorile controalelor, preluate din matricea
$_REQUEST.
<?php
echo "Nume: ", $_REQUEST["nume"] , "<BR>";
echo "Examen: ", $_REQUEST["ex"] , "<BR>";
echo "S-a selectat butonul ", $_REQUEST["BUTON"];
?>

Citirea datelor din butoane radio şi afişarea rezultatelor

Casete Listă

Formularele HTML pot conŃine liste simple din care se pot selecta un singur
element sau liste multiple, din care se pot selecta mai multe elemente şi pot fi vizibile
la un moment dat mai multe elemente.
Aşa cum am specificat la începutul capitolului, casetele de tip listă se crează
cu elementul <SELECT> şi fiecare element al listei creat cu tag-ul <OPTION>
Listele multiple(derulante) se crează tot cu elementul <SELECT>, dar cu
atribute, astfel: <SELECT SIZE=NR MULTIPLE> şi fiecare element al listei creat cu
tag-ul <OPTION>.
<HTML> <HEAD> <TITLE>casete liste de elemente</TITLE>
</HEAD>
<FORM ACTION="prel7.php">
<BODY> <B>Lista</B>
<SELECT name = "Lista[]" multiple>
<OPTION>mandarine</OPTION>

125
<OPTION>portocale</OPTION>
<OPTION>kivi</OPTION>
<OPTION>lamai</OPTION>
</SELECT > <BR>
<INPUT type="submit" value ="Trimite">
</FORM ></BODY> </HTML>

Dacă se apasă butonul de transmitere date submit cu valoarea Trimite, atunci

se va apela fişierul prel7.php, care va afişa valorile controalelor, preluate din matricea
$_REQUEST.
<?php
echo "S-au selectat : <BR>";
print_r($_REQUEST["Lista"] );echo " <BR>";
foreach ( $_REQUEST["Lista"] as $fructe) echo $fructe, " <BR>";
?>

Citirea datelor din liste şi afişarea rezultatelor

Controale ascunse(HIDDEN) şi
controle pentru parole(PASSWORD)

Controle ascunse permit să avem în paginile web date care sa nu fie vizibile(de
exemplu, date despre o persoană). Ele se introduc în pagină cu elementul <INPUT
TYPE=HIDDEN>. Datele din aceste controale sa trimit server-ului şi se pot obŃine din una
din matricele care stochează date.
Controle pentru parole sunt asemenătoare cu controlele pentru text, dar în paginile
web apare caracterul “*” atunci când se introduce text. Ele sunt create cu elementul
<INPUT TYPE=PASSWORD>.
În exemplu de mai jos adăugăm două controale pentru aceste tipuri.
<HTML> <HEAD> <TITLE>Controale secrete si parole</TITLE></HEAD>
<BODY>
<FORM ACTION="prel8.php" method="post">
<B>NUME </B><INPUT type= "TEXT" name="NUME" size=30> <br>
<B>VARSTA </B><INPUT type="HIDDEN" name = "HIDD" value="45"> <br>

126
<B>PAROLA </B><INPUT type="PASSWORD" name = "PASS"> <br>
<INPUT type="submit" value ="Trimite">
</FORM>
</BODY>
</HTML>

<?php
echo "Numele este " , $_POST["NUME"] ,"<BR>";
echo "Varsta este: ", $_POST["HIDD"],"<BR>";
echo "Parola este " , $_POST["PASS"] ,"<BR>";
?>

Citirea datelor din Controale parolă şi ascunse şi afişarea rezultatelor

Control Imagine şi control de reiniŃializare

Controlul Imagine se introduce cu ajutorul elementului <INPUT TYPE =IMAGE

src=”imagine” atribute>. Se va crea o imagine şi dacă se execută clic pe suprafaŃa ei ,
browser-ul trimite scriptului coordonatele punctului unde se află mouse-ul, dar şi
datele din formular. Este asemănător butonului de transmitere submit, numai ca are o
poză ci nu un text pe el.
Control de reiniŃializare se introduce elementul <INPUT TYPE=RESET> şi este un
buton de aducerea controalelor unui formular la starea iniŃială.
În exemplul următor se adaugă la formularul din ex.8 şi două controle de imagine şi
de reiniŃializare.
<HTML>
<HEAD>
<TITLE>Controale secrete si parole</TITLE>
</HEAD>
<BODY>

127
<FORM ACTION="prel9.php" method="POST">
<B>NUME </B><INPUT type= "TEXT" name="NUME" size=30> <br>
<B>VARSTA </B><INPUT type="HIDDEN" name = "HIDD" value="45">
<br>
<B>PAROLA </B><INPUT type="PASSWORD" name = "PASS"> <br>
<B>IMAGINEA </B><INPUT type="IMAGE" src="C:\Program Files\Apache
Software Foundation\Apache2.2\icons\world1.gif" name = "world"> <br>
<INPUT type="RESET" name="sterge" value ="Reset"> <br>
<INPUT type="SUBMIT" value ="Trimite">
</FORM>
</BODY>
</HTML>
Dacă se apasă butonul de transmitere date submit cu valoarea Trimite, atunci
se va apela fişierul prel9.php, care va afişa valorile controalelor, preluate din
matricea $_POST, dar nu se va afişa nimic despre imagine.
Dacă se apasă butonul de transmitere image atunci se pot obŃine şi coordonatele
punctului din imagine, unde s-a efectuat clic.
Dacă se apasă butonul de reiniŃializare RESET, controalele vor avea valorile iniŃiale.

Controalele de transmitere: IMAGE, RESET

Crearea butoanelor

Butoanele HTML sunt diferite de celelalte controale(elemente) ale formularului, în

sensul că după ce au fost folosite pentru trimiterea datelor către scripturi, ele nu rămin apasate
ci işi revin imediat la starea iniŃială, fără a apela la controlul RESET.
Butoanele se introduc cu eticheta <INPUT TYPE=BUTTON>.
Există mai multe modalităŃi de a indentifica care din butoanele unui formular sunt
marcate.
Cea mai folosită metodă este de a combina cod HTML cu cod JavaScript, tehnică de
care am vorbit în capitolele 19-20 ale cărŃii “Proiectarea paginilor web HTML- CSS –
JavaScript”. Se dă un comportament unui buton cu ajutorul unui eveniment scis în
JavaScript. S-a arătat cum se creează butoane, cum li se dă un anumit comportament,
dar nu s-a precizat modul de transmitere a datelor către server şi nici modul de citire a
datelor.Pentru a trimite datele se foloseşte funcŃia submit() a obiectului form.
În exemplu următor se crează 3 butoane cu acelaşi nume dar valori diferite. Numele
butonului este stocat într-un control ascuns, cu numele „Buton”. Când este apăsat un
buton se execută o funcŃie care atribuie un nume contolului ascuns ”BUTON” şi
tranmite datele scriptului prel10.php.
<HTML> <HEAD> <TITLE>Butoane cu cod JavaScript</TITLE></HEAD>
<BODY>

128
Butoane cu cod JavaScript
<FORM ACTION="prel10.php" method="POST" name="form_but">
<INPUT type="HIDDEN" name = "BUTON"> <br>
<INPUT type= "BUTTON" value="Buton 1" ONCLICK="functie1()">
<INPUT type= "BUTTON" value="Buton 2" ONCLICK="functie2()">
<INPUT type= "BUTTON" value="Buton 3" ONCLICK="functie3()">
<BR>
<B>IMAGINEA </B><INPUT type="IMAGE" src="C:\Program Files\Apache
Software Foundation\Apache2.2\icons\world1.gif" name = "world"> <br>
</FORM>
<SCRIPT language="JavaScript">
function functie1()
{document.form_but.BUTON.value="Buton 1"
form_but.submit() }
function functie2()
{document.form_but.BUTON.value="Buton 2"
form_but.submit() }
function functie3()
{document.form_but.BUTON.value="Buton 3"
form_but.submit()}
</SCRIPT>
</BODY>
</HTML>

Dacă se apasă butonul de transmitere Image, dacă încercăm să obŃinem date

din matricea $_POST, se va afişa coordonatele punctului de marcare pe imagine.dar
nu se va afişa nimic pentru butoane,deoarece nu s-a apasat pe butoane care au o
valoare numai în momentul marcării.

Dacă se apasă pe un buton, putem afla valoarea lui, citind datele din matrice
$_POST, dar nu sunt afişate coordonatele unui punct de pe imagine..
<?php

129
echo "S-a apasat butonul cu numele ";
If (isset($_POST["BUTON"])) echo $_POST["BUTON"] , "<br>";
echo "Coordonatele punctului unde s-a efectuat clic pe poza ( " ,
$_POST["world_x"], "," , $_POST["world_y"] , ")"; ?>

Citirea datelor din Controale BUTTOM şi afişarea rezultatelor cu cod

JavaScript
Se poate crea butoane şi transmite date şi fără a folosi cod JavaScript. Pentru a
crea 3 butoane ca in exemplu de mai sus şi a le atribui o valoare, se folosesc 3
formulare, iar pentru citirea datelor se foloseşte acelaşi script ca mai sus.
Pentru a transmite date către server, se foloseşte câte un buton submit pentru fiecare
formular şi câte un control ascuns, care conŃine numele butonului apăsat.
<HTML>
<HEAD>
<TITLE>Butoane cu controale ascunse</TITLE></HEAD>
<BODY>
<FORM ACTION="prel11.php" method="POST" name="form_but">
<INPUT type="HIDDEN" name = "BUTON" value= "Buton 1"> <br>
<INPUT type= "SUBMIT" value="Buton 1" > <br>
</FORM>
<FORM ACTION="prel11.php" method="POST" name="form_but">
<INPUT type="HIDDEN" name = "BUTON" value= "Buton 2"> <br>
<INPUT type= "SUBMIT" value="Buton 2" > <br>
</FORM>
<FORM ACTION="prel11.php" method="POST" name="form_but">
<INPUT type="HIDDEN" name = "BUTON" value= "Buton 3"> <br>
<INPUT type= "SUBMIT" value="Buton 3" > <br>
</FORM>
</BODY>
</HTML>

Dacă se apasă pe un buton datele se transmit scriptului prel11.php.

130
<?php
echo "S-a apasat butonul cu numele ";
If (isset($_POST["BUTON"])) echo $_POST["BUTON"] , "<br>";?>

Citirea datelor din Controale BUTTOM şi afişarea rezultatelor folosind

controalele ascunse
Deasemenea, se pot crea butoane şi transmite date către scripturi fără a folosi
controale ascunse. Pentru a citi date din matricea datelor, se foloseşte atributul value
şi se dă acelaşi nume celor 3 butoane. Astfel se evită volosirea unui control ascuns
care sa conŃină valorile butoanelor.
<HTML> <HEAD> <TITLE>Butoanelor fara controale ascunse </TITLE></HEAD>
<BODY>
Butoanelor fara controale ascunse
<FORM ACTION="prel11.php" method="POST" name="form_but">
<INPUT type= "SUBMIT" name="BUTON" value="Buton 1" >
</FORM>
<FORM ACTION="prel11.php" method="POST" name="form_but">
<INPUT type= "SUBMIT" name="BUTON" value="Buton 2" >
</FORM>
<FORM ACTION="prel11.php" method="POST" name="form_but">
<INPUT type= "SUBMIT" name="BUTON" value="Buton 3" >
</FORM>
</BODY>
</HTML>

Dacă se apasă pe un buton datele se transmit scriptului prel11.php şi se obŃine

acelaşi rezultat ca în exemplu precedent.

131
 Citirea datelor din Controale BUTTOM şi afişarea rezultatelor

Control pentru fişiere

PHP permite să încărcăm fişiere pe server, ceea ce JavaScipt nu permitea.

Controlul pentru fişiere se crează cu tag-ul <INPUT TYPE=FILE>
Pentru a putea executa această operaŃie trebuie să folosim atributul formularului cu
părŃi multiple, adică: ENCTYPE =”muliform/form-data, utilizat cu METHOD=POST.
Trebuie, deasemenea, specificat şi numele scriptului către care se trimite fişierul, în
cazul nostru prel13.php. ConŃinutul fişierului se va putea obŃine din matricea
$_FILES.
Să considerăm că dorim să încărcăm fişierul text, STUDENTI.TXT, aflat la adresa
locală C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\CURS_PHP.
La capitolul fişiere se va prezenta detaliat lucru cu ele.
Pentru deschiderea unui fişier se foloseşte funcŃia fopen, iar pentru închiderea
fişierului se foloseşte funcŃia fclose.
Pentru parcurgerea fişierului până la sfârşitul acestuia, se foloseşte instrucŃiunea
while(!feof)).
Pentru citirea liniilor din fişier se foloseşte funcŃia fgets.
În continuare prezentăm pagina web care crează formularul pentru incărcarea unui
fişier.
<HTML>
<HEAD> <TITLE>Controale pentru fisiere </TITLE> </HEAD>
<BODY>
Controale pentru fisiere
<FORM ACTION="prel13.php" method="POST" enctype="multipart/form-
data" >
Incarca fisierul <INPUT TYPE=FILE NAME="FISIER"> <BR>
<INPUT type= "SUBMIT" VALUE="Trimite Fisier" >
</FORM>
</BODY> </HTML>
Se observă că apare butonul Browse, care ne permite sa navigăm până la adresa unde
se află fişierul pe care dorim să-l încărcăm pe server.

Dacă apăsăm pe butonul „Trimite Fisier” datele sunt prelucrate de scriptul

prel13.php. ConŃinutul fişierului e depus în matricea globală $_FILES.
<?php
echo "Continutul fisierului ", "<BR>";

132
$FIS = fopen($_FILES['FISIER']['tmp_name'], "r");
while(!feof($FIS)) { $VAR=fgets($FIS); echo $VAR, "<BR>"; }
fclose($FIS);
?>

Încărcarea fişierelor pe server

133
LecŃia 26 FISIERE

Posibilitatea de a stoca si de a citi date folosind fişiere este un mare avantaj în

PHP, iar PHP include un set de funcŃii pentru manipularea fişierelor. Pentru a construi
aceasta extensie, nu este nevoie de nici o librărie externă şi nici de o instalare
prealabilă.

Deschiderea unui fişier

Înainte de a putea citi sau scrie într-un fişier, trebuie să deschideŃi fişierul
folosind funcŃia fopen(). Iata care este sintaxa generala a acestei functii:

fopen ( string nume_fisier, string mod [, int foloseste_calea_de_includere [,

resource zcontext]]) )

In acest apel de functie, nume_fisier este numele fisierului pe care vreti sa-l
deschideti, mod indica modul in care vreti sa deschideti fisierul (de exemplu, pentru
citire sau pentru scriere), foloseste_calea_de_acces poate avea una dintre valorile 1
sau TRUE pentru a preciza ca vreti ca fisierul sa fie cautat si in calea de includere
definite in PHP, iar zcontext contine un context optional (contextual modifica sau
imbunatateste comportamentul fluxului de date din sau catre un fisier). Tabelul de mai
jos prezintă valorile argumentului mod care pot fi transmise funcŃiei fopen(). Literele
care desemnează modurile corespund cuvintelor read (citire), write (scriere) şi append
(adăugare). Modul "r" permite accesul la citire. Modurile "w" şi "a" permit accesul la
scriere. Modurile care includ semnul "+" permit ambele tipuri de acces. Unele moduri
determină PHP să încerce a crea fişierul, dacă acesta nu există.

Mod Citire Scriere Creare Trunchiere Pointer

"r" x Început
"r+" x x Început
"w" x x x Început
"w+" x x x x Început
"a" x x Sfârşit
"a+" x x x Sfârşit

Pentru ca funcŃia fopen() să se execute cu succes, PHP trebuie să ruleze sub

contul unui utilizator care dispune de suficiente privilegii pentru a executa operaŃiile
indicate de modul respectiv. De exemplu, pentru a putea crea un fişier, PHP trebuie să
ruleze ca utilizator cu acces de scriere la catalogul în care urmează a fi creat fişierul.
Fiecare fişier are un pointer asociat, care indică amplasarea octetului din fişier unde se
va produce următoarea operaŃie (citire sau scriere).

Verificarea finalizării unei operaŃii cu un fişier

OperaŃiile cu fişiere pot eşua dintr-o varietate de motive. Deci, este important
să verificaŃi dacă fiecare operaŃie s-a încheiat cu succes. Iată o modalitate în care
puteŃi verifica:
<?php
$fisier = fopen("text.txt", "r");
if (!$fisier) { die("Nu se poate deschide fisierul pentru citire"); }
?>

134
 FuncŃia fopen() returnează false dacă nu reuşeşte să deschidă fişierul. În acest
caz, scriptul invocă funcŃia die() pentru a afişa un mesaj şi pentru a-şi încheia
execuŃia. Altfel scris:
<?php
$fisier = fopen("text.txt", "r") or die("Nu se poate deschide fisieru
l pentru citire");
?>
sau aceeaşi instrucŃiune mai complexă:
<?php
($fisier = fopen("text.txt", "r")) || die("Nu se poate deschide fisie
rul pentru citire");
?>

Închiderea unui fişier

Un fişier deschis consumă resursele sistemului. Când un script a terminat de utilizat
un fişier, scriptul trebuie să închidă fişierul, eliberând aceste resurse. La sfârşitul unui
script, PHP inchide în mod automat fişierele deschise. Totuşi, în programare se
recomandă să închideŃi fişierele mai rapid, ori de câte ori este posibil. Pentru a închide
un fişier invocaŃi funcŃia fclose(): fclose(identificator_fisier)
unde identificator_fisier este identificatorul fişierului, returnat la deschiderea acestuia.
De exemplu:
<?php
$fisier = fopen("text.txt", "r");
if (!$fisier)
{ die("Nu se poate deschide fisierul"); }
// Aici se introduc instructiunile care folosesc fisierul deschis
@fclose($fisier);
?>

FuncŃia fclose() returnează valoarea true dacă fişierul a fost închis cu succes. Testarea
acestei valori este rareori necesară, deoarece nu se mai pot face prea multe după ce s-a
ratat o încercare de a închide un fişier.

Citirea dintr-un fişier

PHP furnizează o varietate de funcŃii pentru citirea fişierelor. Prima dintre acestea este
fread() care are următoarea formă: fread(identificator_fisier, lungime)
Argumentul identificator_fisier este valoarea returnată de funcŃia fopen(), iar
argumentul lungime specifică numărul maxim de octeŃi care vor fi citiŃi. OcteŃii citiŃi
din fişier sunt returnaŃi sub formă de valoare de tip şir. Dacă operaŃia de citire
întâlneşte sfârşitul fişierului, PHP va returna mai puŃin de lungime octeŃi. PHP include
o funcŃie conexă, denumită fgetc(), care citeşte un octet din fişierul specificat. Pentru a
citi intreg fisierul, puteti folosi ca argument lungime funcŃia filesize() astfel:
<?php
$nume_fisier = "text.txt";
$fisier = fopen($nume_fisier, "r") OR die("Nu se poate deschide fisie
rul pentru citire");
$citire = fread($fisier, filesize($nume_fisier));
echo "<br>$citire";
fclose($fisier);
?>

135
Verifica dacă s-a ajuns la sfarsitul fisierului

Functia feof() verifica daca s-a ajuns la sfarsitul fisierului. (EOF). Aceasta este
folositoare pentru a cicla prin fisiere de lungime necunoscuta..

Nota: Nu puteti citi din fisiere deschise in modurile: w, a si x !

if (feof($file)) echo “Am ajuns la sfarsitul fisierului”

Citirea unui fisier linie cu linie

Functia fgets() este folosita pentru a citi o singura linie dintr-un fisier. Dupa un apel al
acestei functii, pointerul in interiorul fisierului se muta pe urmatoarea linie.

Exemplul urmator citeste un fişier linie cu linie pană la sfaâşitul acestuia.

<?php
$nume_fisier = "text.txt";
$fisier = fopen($nume_fisier, "r") OR die("Nu se poate deschide fisie
rul pentru citire");
while (!feof($fisier))
{
echo fgets($fisier) . “<br />”;
}
fclose($fisier);
?>
InstrucŃiunea while asigură faptul că funcŃia fgets() este apelată în mod repetat,
până la citirea tuturor liniilor.
O modalitate mai simplă de a citi linie cu linie un întreg fişier constă în a folosi
funcŃia file(). Această funcŃie returnează un tablou în care fiecare element conŃine o
linie a fişierului text specificat. Iată un exemplu:
<?php
$tablou = file("text.txt");
foreach ($tablou as $citire)
{
echo $tablou;
}
?>
Această metodă nu este adecvată pentru fişiere de foarte mari dimensiuni, deoarece în
tablou este încărcat întregul conŃinut al fişierului, ceea ce poate necesita o cantitate de
memorie superioară celei disponibile

Afişarea conŃinutului unui fişier

PHP furnizează două funcŃii care facilitează afişarea conŃinutului unui fişier. Una
dintre funcŃii, fpassthru(), necesită un argument care specifică identificatorul fişierului
care urmează să fie afişat:
$fisier = fopen("text.txt", "r");
fpassthru($fisier);
După ce a afişat fişierul, funcŃia îl închide automat. Cealaltă funcŃie, readfile(),
necesită numai numele sau calea fişierului: readfile("text.txt");

136
Scrierea într-un fişier

Spre deosebire de varietatea de funcŃii furnizate pentru citirea fişierelor, PHP

oferă o singură funcŃie pentru scrierea în fişiere, şi anume fwrite(), care are
următoarea formă: fwrite(identificator_fisier, data)
unde identificator_fisier este identificatorul de fişier returnat de funcŃia fopen(), iar
data este o valoare şir care determină datele ce urmează a fi scrise. Dacă execuŃia
funcŃiei reuşeşte, returnează numărul octeŃilor scrişi; în caz contrar, returnează
valoarea -1. Iată un exemplu de scriere a datelor într-un fişier:
<?php
$nume_fisier = "text.txt";
$fisier = fopen($nume_fisier, "a") OR die("Nu se poate deschide fisierul pentru citire"
);
$scriere = fwrite($fisier, "Un rand de text atasat la fisier.\n");
echo "<br />Rezultatul scrierii: $scriere";
fclose($fisier);
?>
Modificarea numelui unui fişier

PHP furnizează o funcŃie care vă permite să modificati numele unui fişier, şi

anume rename(), funcŃie care are următoarea formă: rename(nume_vechi, nume_nou)
unde nume_vechi este numele sau calea originală a fişierului, iar nume_nou este
numele sau calea dorită. FuncŃia returnează true dacă operaŃia de modificare a
numelui a reuşit; în caz contrar, returnează false. Exemplu:
<?php
$redenumeste = rename("text.bak", "text.txt");
if (!$redenumeste) { die("<br />A fost produsa o eroare la redenumirea fisierului"); }
?>

Ştergerea unui fişier

PHP furnizează o funcŃie care vă permite să ştergeŃi un fişier, şi anume

unlink(). FuncŃia are forma: unlink(nume_fisier)
unde nume_fisier este numele sau calea fişierului care urmează a fi şters. FuncŃia
returnează true dacă operaŃia de ştergere a avut succes, respectiv false în caz contrar.
PHP trebuie să aibă acces de scriere la directorul în care se află fişierul; în caz
contrar, PHP nu va putea şterge fişierul. Functia unlink() s-ar putea să nu funcŃioneze
în sistemele Windows.

Exemplu:
<?php
$sterge = unlink("text.txt");
if (!$sterge) { die("<br />A fost produsa o eroare la stergerea fisierului"); }
?>

137
 LecŃia 27 GRAFICĂ INTTERACTIVĂ PE SERVER

Acestă lecŃie este dedicată creării în mod interactiv a elementelor grafice pe

server. Se prezintă folosirea modulului de grafică GD pentru a desena elemente
grafice în timpul rulării care sunt trimise apoi către server. Se vor desena linii, figuri
geometrice, imagini, efectuări de alte operaŃii de grafică şi apoi trimiterea către
utilizatori în diferite formate, dintre care cele mai importante sunt: JPEG, GIF, PNG,
WBMP.
Pentru a activa suportul pentru modulul grafic GD se configurează PHP cu
opŃiunea de configurare: --with-gd. În Windows se găseşte fişierul DLL necesar,
php_gd2.dll, în directorul EXT din PHP, care se va copia în directorul PHP. Se va
şterge caracterul de comentariu de la începutul liniei phd_gd2.dll din php.ini şi se
reporneşte PHP.
;extension=php+fdf.dll
extension =php_d2.dll
; extension =php_gettext.dll

DESENAREA ŞI COLORAREA UNEI IMAGINII

Se va desena şi colora o cutie şi se va trimite către browser ca imagine JPEG.

FuncŃiile de creare, colorare_fundal_imagine, alegere a tipului de imagine, trimitere
către browser şi distrugerea unei imagini sunt:
- imagecreate(x_size, y-size);
- imagecolorallocate(imagine, red, green, blue); (culorile sunt intregi cuprinsi
intre 0 – 255, si reprezinta codul RGB pentru culori;
- header('Content-Type: image/jpeg'); header('Content-Type: image/gif');
header('Content-Type: image/png'); header('Content-Type: image/wbmp');
- imagejpeg(imagine); imagegif(imagine); imagepng(imagine);
- imagedestroy(imagine);
FuncŃiile enumerate mai sus sunt incluse în sciptul ex1_1.php din exemplul de mai
jos:
<?php
$image_width = 300;
$image_height =100;
$image=imagecreate($image_width, $image_height);
$back_color =imagecolorallocate($image, 200, 200, 200);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
?>
Deoarece scriptul ex1_1.php creează o imagine, aceasta va putea fi inserată cu tag-ul
<IMG> într-un document HTML ex1_2.html
<HTML>
<HEAD> <TITLE> INCLUDEREA UNEI IMAGINI GRAFICE </TITLE>
</HEAD> <BODY> <CENTER> <H2> INCLUDEREA UNEI IMAGINI
GRAFICE CREATE PE SERVER </H2>
<IMG SRC="EX1_1.PHP">
</CENTER></BODY></HTML>

138
 Desenarea unei imagini

DESENAREA UNEI LINII

Desenarea unei linii din punctul (x1,y1) în punctul (x2,y2) într-o imagine
image şi cu o culoare color se face cu ajutorul funcŃiei: imageline( imagine, x1, y1,
x2, y2, color).
Este ştiut faptul că punctul din stânga sus al imaginii este (0,0) şi că toate mărimile
sunt date în pixeli.
Dacă se doreşte o anumită grosime a liniei, se apelează funcŃia:
imagesetthickness(imagine, grosime_linie).
Aceste funcŃii sunt exemplificate în scriptul ex2_1.php.
<?php
$image_width = 300;
$image_height =100;
$image=imagecreate($image_width, $image_height);
$back_color =imagecolorallocate($image, 200, 200, 200);
$draw_color=imagecolorallocate($image, 0, 0, 0);
imagesetthickness($image, 5);
imageline($image, 20,20,80,80,$draw_color);
imageline($image, 20, 90, 200,10,$draw_color);
imageline($image, 120,20,180,80,$draw_color);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
?>

Desenarea liniilor îngroşate

139
 DESENAREA UNUI DREPTUNGHI

Desenarea unui dreptunghi se poate face cu ajutorul funcŃiei:

imagerectangle(imagine, x1, y1, x2, y2, color). Această funcŃie creează un dreptunghi
în interiorul unei imagini image, de culoare color, începând din colŃul stânga sus , cu
coordonatele (x1,y1) şi terminând cu colŃul dreapta jos, cu coordonatele (x2,y2).
În scriptul ex2_2.php este exemplificată această funcŃie.
<?php
$image_width = 300;
$image_height =100;
$image=imagecreate($image_width, $image_height);
$back_color =imagecolorallocate($image, 200, 200, 200);
$draw_color=imagecolorallocate($image, 0, 0, 0);
imagesetthickness($image,5);
imagerectangle($image, 20, 20, 40, 80, $draw_color);
imagerectangle($image, 70, 20, 90, 80, $draw_color);
imagerectangle($image, 160, 20, 280, 80, $draw_color);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
?>
Se va îngloba imaginea creată în scriptul ex2_2 într-o pagină web ,
ex2_2.html:
<HTML>
<HEAD> <TITLE> DREPTUNGHI </TITLE> </HEAD><BODY>
<center> <H2> Includerea unui dreptunghi desenat pe
server</H2>
<IMG SRC="EX2_2.PHP">
</CENTER></BODY></HTML>

Desenarea dreptunghiurilor

DESENAREA UNEI ELIPSE

Pentru a desena o elipsă într-o imagine image, cu centru în (c_x,c_y), de

lăŃime w şi înălŃime h , de culoarea color, se va folosi funcŃia:
imageellipse(image, c_x,x_y, w, h, color).
În scriptul ex2_3.php este exemplificată această funcŃie.

140
 <?php
$image_width = 300;
$image_height =100;
$image=imagecreate($image_width, $image_height);
$back_color =imagecolorallocate($image, 200, 200, 200);
$draw_color=imagecolorallocate($image, 0, 0, 0);
imagesetthickness($image,3);
imageellipse($image, 100, 60, 150, 50, $draw_color);
imageellipse($image, 150, 40, 150, 50, $draw_color);
imageellipse($image, 200, 30, 50, 50, $draw_color);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
?>

Desenarea elipselor

DESENAREA UNUI POLIGON

Pentru a desena un poligon cu n vârfuri, se foloseşte o matrice PHP, points,

care va conŃine coordonatele vârfurilor poligonului. FuncŃia care desenează cu culoare
color, un poligon într-o imagine image, cu nr_points vârfuri şi ale căror coordonate se
află în matricea points este: imagepolygon(image, array points, nr_points, color).
Scriptul următor, ex2_4.php exemplifică această funcŃie.
<?php
$points=array(0 => 120, 1 => 60, 2 => 140, 3 => 60, 4=> 160, 5=> 80, 6=>
180, 7 => 20, 8=>150, 9=>40);
$image_width = 300;
$image_height =100;
$image=imagecreate($image_width, $image_height);
$back_color =imagecolorallocate($image, 200, 200, 200);
$draw_color=imagecolorallocate($image, 0, 0, 0);
imagesetthickness($image,3);
imagepolygon($image, $points, 5, $draw_color);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
?>

141
 Desenarea unui poligon
DESENAREA UNUI ARC

FuncŃia imagearc(image, c_x, c_y, w, h, b,e) permite să desenăm, în interiorul

imaginii image, un arc cu centrul în (c_x,c_y), de lăŃime w şi înălŃime h, şi de punct
de început b şi de sfârşit e, puncte exprimate în grade (0 0 este poziŃionat în dreptul orei
trei). Se va folosi această funcŃie pentru a desena o faŃă, adică un cerc complet şi 3
arce.
<?php
$image_width = 300;
$image_height =100;
$image=imagecreate($image_width, $image_height);
$back_color =imagecolorallocate($image, 200, 200, 200);
$draw_color=imagecolorallocate($image, 0, 0, 0);
imagesetthickness($image,3);
imagearc($image, 150, 50, 70, 70, 0, 360, $draw_color); //cerc
imagearc($image, 150, 60, 50, 50, 10, 170, $draw_color); //gura
imagearc($image, 135, 45, 20, 20, 190, -10, $draw_color); //ochi
imagearc($image, 165, 45, 20, 20, 190, -10, $draw_color); //ochi
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image); ?>

Desenarea arcelor
UMPLEREA FIGURLOR

Pentru umplerea figurilor desenate mai sus cu culori, se pot folosi funcŃiile:
- imagefilledarc
- imagefilledellipse
- imagefillpolygon
- imagefilledrectangle

142
 FuncŃiile de mai sus desenează şi umplu cu culoare figurile respective. Dacă în
ex2_3.php folosim funcŃiile imagefilledellipse în loc de imageellipse , cu aceiaşi
parametri se vor desena trei elipse colorate cu culoarea dorită.

<?php
$image_width = 300;
$image_height =100;
$image=imagecreate($image_width, $image_height);
$back_color =imagecolorallocate($image, 200, 200, 200);
$draw_color=imagecolorallocate($image, 0, 0, 0);
imagefilledellipse($image, 100, 60, 150, 50, $draw_color);
imagefilledellipse($image, 150, 40, 150, 50, $draw_color);
imagefilledellipse($image, 200, 30, 50, 50, $draw_color);
imagefilledrectangle( $image, 20, 20, 40, 80, $draw_color);
imagefilledrectangle($image, 70, 20, 90, 80, $draw_color);
imagefilledrectangle($image, 160, 20, 280, 80, $draw_color);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
?>

Desenarea dreptunghiurilor şi a elipselor colorate

DESENAREA UNUI TEXT PE ORIZONTALĂ ŞI PE VERTICALĂ

Pentru a desena un text ca o imagine, nu ca un text care poate fi editat, se

folosesc fonturile integrate de la 1 la 5. Pentru a afişa un text într-o imagine, folosim
funcŃia: imagestring(imagine, font, x, y, string s, color).
Această funcŃie desenează şirul s cu culoarea color începând din punctul de
coordonate (x,y), din colŃul din stânga sus.
Pentru a obŃine lungimea şirului, grosimea şi înălŃimea lui, folosim funcŃiile:
strlen(s), imagefontwidth(font) şi imagefontheight(font).
În exemplul următor, se va crea un box de o anumită dimensiune, iar şirul “Grafica în
PHP” va fi centrat în box.
<?php
$font=4;
$sir= "Grafica PHP";
$width = 2 * strlen($sir) * imagefontwidth($font);

143
$height =3 * imagefontheight($font);
$image=imagecreate($width, $height);
$back_color =imagecolorallocate($image, 250, 2500, 250);
$draw_color=imagecolorallocate($image, 100, 0, 50);
imagesetthickness($image,3);
$x = ($width - (strlen($sir) * imagefontwidth($font)))/2; //pentru a scrie centrat
$y= ($height - imagefontheight($font))/2;
imagestring($image, $font, $x, $y, $sir, $draw_color);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
?>

Desenarea unui text pe orizontală

Dacă se doreşte să se deseneze un text pe verticală (de exemplu să se
eticheteze axa Y a unui grafic), se foloseşte funcŃia: imagestringup(imagine font,x,
y,string s, color).
În exemplul precedent, se poate inversa lăŃimea şi înălŃimea între ele şi semnul
– cu +, aşa cum reiese din exemplul următor.
<?php
$font=4;
$sir= "Grafica PHP";
$height = 2 * strlen($sir) * imagefontwidth($font);
$width =3 * imagefontheight($font);
$image=imagecreate($width, $height);
$back_color =imagecolorallocate($image, 250, 2500, 250);
$draw_color=imagecolorallocate($image, 100, 0, 50);
imagesetthickness($image,3);
$y = ($height +(strlen($sir) * imagefontwidth($font)))/2; //pentru a scrie centrat
$x= ($width - imagefontheight($font))/2;
imagestringup($image, $font, $x, $y, $sir, $draw_color);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
?>

144
 Inserarea unui text pe verticală

ÎNGLOBAREA IMAGINILOR ŞI RĂSTURNAREA UNEI IMAGINI

Pentru a crea obiecte grafice din imagini grafice deja existente, se folosesc
anumite funcŃii care depind de formatul imaginii, ca de exemplu:
- imagecreatefromgif(file_name) creează o imagine dintr-un fişier GIF sau de la o
adresă URL
- imagecreatefromjpeg(file_name) creează o imagine dintr-un fişier JPEG sau de la
o adresă URL
- imagecreatefrompng(file_name) creează o imagine dintr-un fişier PNG sau de la o
adresă URL
- imagecreatefromwbm(file_name) creează o imagine dintr-un fişier WBMP sau de
la o adresă URL
Dimensiunile imaginilor se pot afla cu funcŃiile: imagesx($image) şi
imagesy($image).
Pentru exemplificare se va încărca o imagine JPEG, căreia i se va face un
chenar de grosime 7 şi o culoare.
<?php
$image=imagecreatefromjpeg ('ub_ro.jpg');
$draw_color=imagecolorallocate($image, 250, 200, 100);
imagesetthickness($image,15);
imagerectangle($image, 0,0, imagesx($image) , imagesy($image) , $draw_color);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);?>

Înglobarea unei imagini şi desenarea unui chenar

145
 PHP permite să se copieze o imagine sau o parte din ea cu ajutorul funcŃiei
imagecopy(dest, sursa, x_d, y_d,x_s, y_s, lw_s, h_s).
Cu ajutorul acestei funcŃii, se copiază în (x_d, y_d) o parte a imaginii sursă în
imaginea destinaŃie, începând cu coordonatele x_s, y_s, cu lăŃimea w_s şi înălŃimea
h_s.
Se va folosi această funcŃie pentru a inversa imaginea din exemplul de mai
sus. Pentru aceasta, urmăm paşii:
- se citeşte imaginea cu imagefromjpeg
- se obŃine dimensiunea acesteia cu imagesx şi imagesy
- se creează o nouă imagine de aceleaşi dimensiuni $image_d
- se foloseşte un ciclu for pentru a folosi fiecare pixel din imagine
- se foloseşte funcŃia imagecopy în ciclul for pentru a copia pixelii din imaginea
sursă în cea de destinaŃie

$image_s =imagecreatefromjpeg ('ub_ro.jpg');

$width=imagesx($image_s);
$height= imagesy($image_s);
$image_d = imagecreate($width, $height);
for ($col=0 ; $col < $width ; $col++)
{for ($row=0 ; $row< $height ; $row++)
{ imagecopy($image_d, $image_s, $width -$col -1, $row, $col, $row ,1,1); }
}
header('Content-Type: image/jpeg');
imagejpeg($image_d);
imagedestroy($image_s);
imagedestroy($image_d);
?>

Răsturnarea unei imagini

PHP permite şi ajustarea luminozităŃii imaginilor(factorul gamma), folosind
funcŃia imagegammacorrect(image, float inputgamma, float outputgamma), ca în
exemplul de mai jos.
<?php
$image=imagecreatefromjpeg ('ub_ro.jpg');
imagegammacorrect( $image, .5, 2.5);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
?>

146
 Folosirea factorului gamma al unei imagini
De asemenea, PHP permite şi umbrirea imaginilor(crearea unui gradient).
De exemplu, vrem să desenăm o sferă în spaŃiu cu 3 dimensiuni. Pentru aceasta
folosim un ciclu care să modifice raza cercurilor şi se dă o nouă culoare la fiecare
iteraŃie.
<?php
$image_width = 400;
$image=imagecreate($image_width,$image_width);
$back_color =imagecolorallocate($image, 250, 250, 250);
for($i=0; $i <=$image_width / 2 ; $i++)
{
$drawing_color=imagecolorallocate($image, 2*250*$i / $image_width, 2*250*$i /
$image_width,0);
imagefilledellipse($image, $image_width /2, $image_width /2, $image_width -
2*$i, $image_width - 2*$i, $drawing_color);
}
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
?>

Desenarea unui gradient

UMPLEREA SUPRAFEłELOR CU IMAGINI REPETATE

În PHP se poate se poate folosi o imagine pentru umplerea (tile) altei imagini
folosind funcŃia: imagesettile(imagine_sursa, imagine_tile).

147
 Culoarea de umplere este dată de IMG_COLOR_TILE (culoarea imaginii de
umplere), care va fi folosită de toate funcŃiile care creează figuri
(createfilledrectangle, createfilledpolygon, etc.)
În cazul de umplere, pentru crearea unei imagini, nu se foloseşte imagecreate,
ci funcŃia imagecreatetruecolor, pentru a se păstra cât mai mult din imaginea repetată.
Apoi se aduce imaginea de umplere cu funcŃia imagecreatfromjpeg (descrisă în
paragraful precedent).

<?php
$width=500;
$height=500;
$image= imagecreatetruecolor( $width,$height);
$tile=imagecreatefromjpeg ('fish.jpg');
imagesettile( $image, $tile);
imagefilledrectangle($image, 0,0, $width, $height, IMG_COLOR_TILED);
$draw_color=imagecolorallocate($image, 255,255,255);
imagestring($image, 5, 100,100, "GRAFICA IN PHP", $draw_color);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
imagedestroy($tile);
?>

<?php
$width=350;
$height=500;
$image= imagecreatetruecolor( $width,$height);
$tile=imagecreatefromjpeg ('sunflowr.jpg');
imagesettile( $image, $tile);
imagefilledrectangle($image, 0,0, $width, $height, IMG_COLOR_TILED);
$draw_color=imagecolorallocate($image,0,0,0);
imagestring($image, 5, 50,300, "UMPLEREA unei SUPRAFETE ",
$draw_color);
imagestring($image, 5, 80,320, " cu o IMAGINE ", $draw_color);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
imagedestroy($tile);
?>

148
 Umplerea suprafeŃelor cu o imagine repetată

EDITAREA PIXELILOR

Pentru un mai bun control asupra imaginilor, se pot modifica pixeli folosind
funcŃia: imagesetpixel(image, x, y, color), care desenează un pixel în poziŃia (x,y) cu
culoarea color.
În exemplul următor, se desenează o linie punctată, folosind într-un ciclu for,
funcŃia imagesetpixel, care la fiecare iteraŃie desenează un pixel şi sare 2 pixeli
înainte de a desena pe următorul.
<?php
$width=200;
$height=200;
$image= imagecreate( $width, $height);
$back_color =imagecolorallocate($image,200,200,200);
$draw_color=imagecolorallocate($image, 1000,100, 2550);
imagestring($image, 5, 50, 70, "LINIE PUNCTATA", $draw_color);
for ($i =10; $i < 280; $i +=2) {imagesetpixel($image, $i, 100, $draw_color); }
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
?>

Desenarea pixelilor individuali

149
Bibliografie minimă

1. Florentina Rodica Niculescu, Proiectarea paginilor Web – HTML, CSS, JavaScript,

Editura FundaŃiei Rommânia de Mâine, Bucureşti, 2007
2. Teodoru Gugoiu , HTML, XHTML, CSS şi XML prin EXEMPLE - Ghid practic,
Editura Teora, 2005
3. Tudor Sorin, Crearea şi programarea paginilor Web- HTML, CSS, JavaScript, PHP,
Editura L&S Soft, 2006

Bibliografie suplimentară

4. Dave Taylor, Crearea paginilor Web cu HTML 4, Editura Teora 1999

5. Jim Keogh, JavaScript fără mistere, Editura Rosetti Educational, 2005
6. Mihaela Brut,S. Buruga, Prezentări multimedia pe Web, Editura Polirom, 2004
7. Dan Somnea, JavaScript şi tehnologiile Netscape, Editura Tehnică, 1998
8. Steven Holzner, IniŃiere în PHP 5, Editura Teora 2005

150