5 Specializare Cap3 Programare WEB

Capitolul 3
CAPITOLUL 3. PROGRAMARE WEB

1. HTML LIMBAJ DE MARCARE A HIPERTEXTULUI
1.1. Into!u"## $n HTML
Unul dintre primele elemente fundamentale ale WWW (World Wide Web) este HTML
(abrevierea de la Hyper Text Markup Language limbaj de marare a !ipertextului)" are
desrie formatul #n are doumentele s#nt distribuite $i v%&ute pe Web' Multe din tr%s%turile lui"
um ar fi independen(a fa(% de platform%" struturarea format%rii $i leg%turile !ipertext" fa din
el un foarte bun format pentru doumentele )nternet $i Web'
HTML a fost de&voltat ini(ial de Tim *erners+Lee la ,-./ #n 0121' HTML a fost g#ndit a o
posibilitate pentru fi&iienii are utili&au omputere diferite $i s!imbau #ntre ei informa(ii
utili&#nd )nternetul' -rau neesare #teva arateristii3 independen(a de platform%" posibilit%(i
!ypertext $i struturarea doumentelor' )ndependen(a de platform% #nseamn% % un doument
poate fi afi$at #n mod asem%n%tor de omputere diferite" luru vital pentru o audien(% variat%'
Hipertext #nseamn% a orie uv#nt" fra&%" imagine sau alt element al doumentului v%&ut de un
utili&ator (lient) poate fae referin(% la un alt doument" eea e u$urea&% mult navigarea #ntre
multiple doumente sau !iar #n interiorul unui $i aeluia$i doument' 4truturarea
doumentelor permite onvertirea aestora dintr+un format #n altul $i este efetuat% prin
onferirea unor anumite semnifia(ii unor p%r(i omponente ale doumentului'
4tandardul ofiial HTML este World Wide ,onsortium (W5,)' W5, a lansat #teva versiuni
ale speifia(iei HTML" printre are HTML 6'7" HTML 5'7" HTML 5'6" HTML 8'7 $i" el mai
reent" HTML 8'70' 9n aela$i timp" autorii de bro:sere" um ar fi /etsape $i Mirosoft" au
de&voltat adesea propriile ;extensii; HTML #n afara proesului standard $i le+au inorporat #n
bro:serele lor' 9n unele a&uri" um ar fi tagul /etsape" aeste extensii au devenit standarde de
fato adoptate de autorii de bro:sere'
Un fi$ier HTML este un fi$ier text e on(ine taguri de marcare'
Tagurile de marare indi% bro:serului Web cum s afieze doumental dat'
Un fi$ier HTML trebuie s% fie u extensiunea htm sau html'
Un fi$ier HTML poate fi reat utili&#nd un reditor simplu de text'
1.1.1. C#a#a unui %i&i# HTML
9n sistemul de operare Windo:s lansa(i programul /otepad din ategoria <esorii
(<essories) prin3
4tart = >rograms= <essories=/otepad'
4rie(i urm%torul text3
6?
Capitolul 3
<html>
<head>
<title>Titlul paginii</title>
</head>
<body>
Aceasta este prima mea pagin Web.
</body>
</html>
4alva(i fi$ierul u numele @pagina'!tm@'
Lansa(i bro:serul )nternet -xplorer' 4eleta(i @Apen@ (sau @Apen >age@) din meniul Bile al
bro:serului' <pare o fereastr% de dialog' 4eleta(i @*ro:se@ (sau @,!oose Bile@) $i loali&a(i
fi$ierul HTML reat + @pagina'!tm@ seleta(i+l $i efetua(i lik pe @Apen@' 9n fereastra de
dialog va ap%rea adresa fi$ierului" de exemplu @C3DHTMLDpagina'!tm@' -fetua(i lik AE $i
bro:serul va afi$a aeast% pagin%'
Explicarea exemplului
Arie doument HTML #nepe u nota(ia F!tmlG $i se termin% u nota(ia FH!tmlG' <este
nota(ii se numes #n literatura de speialitate ;taguri;' >rin onven(ie" toate tagurile HTML
#nep u o parante&% ung!iular% des!is% ;F; $i se termin% u o parante&% ung!iular% #n!is%
;G;' Tagurile #ntre aeste parante&e transmit omen&i %tre bro:ser pentru a afi$a pagina #ntr+un
anumit mod' Tagul F!tmlG indi% bro:serului % aesta este #neputul doumentului HTML'
Ultimul tag din doument este FH!tmlG' <est tag indi% bro:serului % aesta este sf#r$itul
doumentului HTML'
9ntre ele dou% maraje F!tmlG $i FH!tmlG exist% dou% se(iuni3 + se(iunea de antet
F!eadG'''FH!eadG $i + orpul doumentului FbodyG'''FHbodyG' *loul FbodyG'''FHbodyG
uprinde on(inutul propriu+&is al paginii HTML" adi% eea e va fi afi$at #n fereastra bro:ser+
ului'
Un tag poate fi sris at#t u litere mii" #t $i u litere mari' <di%" FHTMLG I FHtmLG I
F!tmlG' ,araterele ;spa(iu; $i ;,.HLB; e apar #ntre taguri s#nt ignorate de %tre bro:ser'
Titlul unei pagini se ob(ine inser#nd #n se(iunea F!eadG'''FH!eadG a urm%toarei linii3
<title> Titlul paginii Web </title>
,on(inutul bloului FtitleG'''FHtitleG va ap%rea #n bara de titlu a ferestrei bro:ser+ului' Ca%
aest blo lipse$te #ntr+o pagin% HTML" atuni #n bara de titlu a ferestrei bro:ser+ului va ap%rea
numele fi$ierului'
Textul dintre tagurile FbodyG $i FHbodyG este textul are apare #n fereastra bro:serului' 9n
se(iunea FbodyG'''FHbodyG poate fi sris text #t dori(i' Caa nu apare nii un maraj de tipul
FtagG" atuni interpretatorul HTML le va lua a texte simple $i le va afi$a pe eran'
Ca% introduem mai multe linii intr+o pagin%" bro:ser+ul va afi$a #ntr+un singur r#nd" #ntru#t
araterele ;,.HLB; s#nt ignorate de bro:ser' Treerea pe o linie nou% se fae la o omand%
6J
Po'a(a# W#)
expliit%" are trebuie s% apar% #n pagina !tml' <east% omand% este marajul FbrG (de la ;line
break; + #ntrerupere de linie)'
Textul dintre tagurile F!eadG $i FH!eadG este o informa(ie de antet' )nforma(ia de antet nu este
afi$at% #n fereastra bro:serului'
Extensiune HTM sau HTML?
Bi$ierul HTML poate fi salvat u extensiunea '!tm sau '!tml' 9n exemplu a fost utili&at%
extensiunea '!tm prin analogie u extensiunile de 5 litere ale altor fi$iere" de$i extensiunea '!tml
este e!ivalent%'
Editoare HTML
Coumentele HTML s#nt doumente #n format <4,)) $i" prin urmare" pot fi reate u orie
editor de texte' Bi$ierele HTML pot fi reate $i redatate utili&#nd un editor WK4)WKL (:!at
you see is :!at you get + e ve&i este eea e ob(ii )" preum Bront>age" ,laris Home >age" sau
<dobe >ageMill" f%r% a fi nevoie s% srie(i tagurile de marare #n textul doumentului'
<u fost" de asemenea" de&voltate onvertoare are permit formatarea HTML a doumentelor
generate ($i formatate) u alte editoare' Ca% dori(i s% fi(i un elaborator Web profesionist" este
neesar s% utili&a(i un editor de texte pentru a #nv%(a a srie fi$iere HTML'
ntrebri frecvente (Frequently s!ed "uestions#
Dup ce am compus un fiier HTML, nu pot vedea rezultatul n browser. Care este cauza
<sugura(i+v% % a(i salvat doumentul u un nume oret u extensiunea '!tm sau '!tml" de
exemplu @d3Dpagina'!tm@' Ce asemenea" asigura(i+v% % utili&a(i aela$i nume #nd des!ide(i
fi$ierul #n bro:ser'
!m ncercat s redactez fiierul HTML, dar modificrile nu au aprut n browser. Care este
cauza
*ro:serul men(ine paginile #n memoria a!e" a s% nu iteas% aeea$i pagin% de dou% ori'
Ca% a(i modifiat pagina" bro:serul nu $tie aest luru' Utili&a(i butonul refres!Hreload al
bro:serului pentru a for(a bro:serul s% iteas% pagina modifiat%'
Ce browser trebuie s utilizez
>oate fi utili&at orie bro:ser" )nternet -xplorer" Mo&illa" /etsape sau Apera' Unele
doumente Web neesit% ultimele versiuni ale bro:serelor'
1.1.*. HTML +., -au HTML 3.*.
HTML $%& nu mai este recomandat s se utili'e'e(
)ni(ial" HTML nu a fost lansat pentru formatarea doumentelor' Tagurile HTML au fost reate
pentru a defini coninutul sau structura doumentului" de exemplu3
FpG<esta este un paragrafFHpG
62
Capitolul 3
F!6G<esta este un titluFH!6G'
Ce #nd au fost ad%ugate taguri de tipul FfontG $i atributele pentru ulori #n speifia(iile HTML
5'6 programatorii de pagini Web se onfrunt% u mari probleme' -laborarea unor situri Web de
propor(ii" unde fonturile $i ulorile trebuie ad%ugate pentru fieare pagin% Web" a devenit un
proes de durat%" anevoios $i extenuant'
)e este valoros *n HTML +%,?
9n HTML 8'7 toate format%rile pot fi soase #n afara doumentului HTML $i inluse #ntr+o foaie
separat% denumit% style sheet sau foaie de stil'
Ceoaree HTML 8'7 separ% pre&entarea doumentului de strutura lui" a fost ob(inut eea e se
dorea dintotdeauna3 ontrolul total al $ablonului de pre&entare f%r% a implia on(inutul
doumentului'
)e se recomand?
9neta(i s% utili&a(i atribute de pre&entare #n interiorul tagurilor HTML'
Lista omplet% a tagurilor HTML indi% tagurile $i atributele #nve!ite (depreated) HTML 8'7
$i este pre&entat% #n <nexa 0'
1.1.3. /ali!a#a %i&i##lo HTML +.,1
Un doument HTML este validat referitor la Coument Type Cefinition + Cefinirea Tipului de
Coument (CTC)' 9nainte de a valida un fi$ier HTML" este neesar a ad%uga CTC oret #n
primul r#nd al fi$ierului'
HTML 4.0 !trict "T" permite inluderea elementelor $i atributelor are nu s#nt #nve!ite sau
nu se utili&ea&% #n definirea adrelor (frameset)3
<!DOCT!" #T$% !&'%(C
)*//W+C//DTD #T$% ,.-.//"/)
)http0//111.1+.org/T2/html,/strict.dtd)>
HTML 4.0 Transitional "T" permite inluderea tuturor elementelor din CTC strit plus
elementele $i atributele #nve!ite3
<!DOCT!" #T$% !&'%(C
)*//W+C//DTD #T$% ,.-. Transitional//"/)
)http0//111.1+.org/T2/html,/loose.dtd)>
HTML 4.0 #rameset "T" inlude tran&i(ional CTC plus adrele (frames)3
<!DOCT!" #T$% !&'%(C
)*//W+C//DTD #T$% ,.-. 3rameset//"/)
)http0//111.1+.org/T2/html,/4rameset.dtd)>
1.*. El#(#nt# &i ati)ut# HTML
"ocumentele HTML s$nt fiiere de tip text% care conin elemente HTML.
61
Po'a(a# W#)
&lementele HTML s$nt definite prin intermediul tagurilor HTML.
1.*.1.Ta'ui HTML
Tagurile HTML se utili&ea&% pentru a mara elementele HTML'
Tagurile HTML s#nt delimitate prin intermediul a ' caractere ( $i ).
,araterele de delimitare se numes paranteze unghiulare.
Tagurile HTML de obiei se utili&ea&% $n perechi" de exemplu FbodyG $i FHbodyG'
>rimul tag din pere!e este tagul de start% al doilea tag este tag de final.
Textul dintre tagul de start $i de tagul final este coninutul elementului.
Tagurile HTML nu depind de registru% FbodyG este e!ivalent u F*ACKG'
Unele elemente HTML au numai tag de start' <este elemente se numes vide (empty)'
Tagurile de final s#nt op(ionale pentru unele elemente" standardul HTML 8'7 reomand%
#ns% inluderea tagurilot de final op(ionale'
1.*.*. El#(#nt# HTML
,onsider%m un exemplu de doument HTML3
<html>
<head>
<title>"lemente #T$%</title>
</head>
<body>
<p>
3ragment de te5t. <b>Acest te5t este e6iden7iat cu aldine</b>
</p>
</body>
</html>
<esta este un element HTML3
<b> Acest te5t este e6iden7iat cu aldine </b>
-lementul HTML #nepe u tagul de start* (+)'
,on(inutul elementului HTML este3 ,cest text este e-ideniat cu aldine'
-lementul HTML se termin% u tagul de final3 FHbG'
Tagul FbG se utili&ea&% pentru a defini un element HTML afi$at u aldine'
<esta este de asemenea un element HTML3
<body>
<p>
3ragment de te5t. <b>Acest te5t este e6iden7iat cu aldine</b>
</p>
</body>
<est element HTML #nepe u tagul de start FbodyG $i se termin% u tagul de final FHbodyG'
Tagul FbodyG define$te elementul HTML are on(ine orpul doumentului HTML'
57
Capitolul 3
-e ce utili'm ta.uri cu minuscule?
Tagurile (tags) HTML nu depind de registru3 F*G este e!ivalent u FbG' Ca% ve(i naviga pe
Web" ve(i observa % #n majoritatea tutorialelor se utili&ea&% taguri HTML srise u majusule'
9n aeast% lurare se utili&ea&% taguri HTML srise u minusule' Ce eM
,onsor(iumul World Wide Web (W5,) !ttp3HH:::':5'org reomand% utili&area tagurilor
HTML u minusule #n standar dele HTML 8' NHTML (genera(ia urm%toare HTML) neesit%
de asemenea taguri u minusule'
1.*.3. Ati)ut#
Tagurile pot avea atribute. <tributele ofer% informa(ie suplimentar% despre elementele HTML'
Tagul FbodyG define$te elementul body din pagina HTML' Ca% se adaug% atributul bgolor"
atuni bro:serul afi$ea&% pagina #ntr+o uloare de fundal indiat% de valoarea atributului
bgolor'
Exemplu culoare de fundal' Ca% fundalul paginii este galben des!is" atuni trebuie s% se
srie3
Fbody bgolorI@lig!tyello:@G'
Exemplu tabel fr bordur% Tabelele se reea&% u tagul FtableG' Ca% se adaug% atributul
border u valoarea 7" atuni bro:serul va afi$a un tabel f%r% bordur%'
Ftable borderI@7@G
,tri+utele se utilizeaz $ntotdeauna $n perechi* name./-alue/ 0nume./-aloare/1.
,tri+utele se adaug $ntotdeauna $n tagul de start al elementului HTML.
/tili'area .0ilimelelor1 2red2 sau 3red3?
Oalorile atributelor trebuie s% fie #ntotdeauna inluse #ntre g!ilimele' 9n majoritatea a&urilor se
utili&ea&% g!ilimele duble" dar pot fi utili&ate $i g!ilimele simple'
.areori" atuni #nd valoarea atributului on(ine g!ilimele" este neesar s% se utili&e&e g!ilimele
simple3
nameIP)on @/ume4urt@ )onesuP
1.3. El#(#nt# "# !#%in#-" titlui0 paa'a%#
1.3.1. Paa'a%#
2ele mai utilizate taguri HTML s$nt cele ce definesc titlurile 0headings1% paragrafele
0paragraphs1 i $ntreruperile de linie 0line +rea3s1.
,ea mai efiient% ale de a studia HTML este de a srie $i a testa diferite exemple'
Testea' sin.ur 4 Exemple
50
Po'a(a# W#)
)el mai simplu document HTM L
<est exemplu este un doument HTML foarte simplu" u un num%r minim de taguri HTML'
-xemplul demonstrea&% um este afi$at textul din interiorul elementului body #n fereastra
bro:serului'
,od HTML3
<html>
<body>
Continutul elementului body. Te5t structurat prin intermediul
tagurilor #T$%. 2e8ultatul apare in 4ereastra bro1serului.
</body>
</html>
.e&ultat3
Continutul elementului body. Te5t structurat prin intermediul
tagurilor #T$%. 2e8ultatul apare in 4ereastra bro1serului.
5ara.rafe simple
<est exemplu demonstrea&% um este afi$at textul marat u elementul paragrap!'
,od HTML3
<html>
<body>
<p> Acesta este te5t din paragra4. </p>
<p> "lementul paragraph este de4init de tagul p.</p>
</body>
</html>
.e&ultat3
Acesta este text din paragraf.
-lementul paragrap! este definit de tagul FpG' HTML adaug% #n mod automat spa(iu liber p#n%
$i dup% paragraf'
1.3.*. Titlui 1H#a!in'-2
Titlurile s#nt definite u tagurile F!0G + F!?G' F!0G define$te titlul de nivel 0 (mai important"
eviden(iat u litere aldine av#nd ea mai mare #n%l(ime relativ%' F!?G define$te titlul de nivel ?
(el mai mi)'
HTML adaug% #n mod automat un rind liber p#n% $i dup% titlu'
,od HTML3
<html>
56
Capitolul 3
<body>
<h.> Titlu de ni6el . </h.>
<h9> Titlu de ni6el 9 </h9>
<h+> Titlu de ni6el + </h+>
<h,> Titlu de ni6el , </h,>
<h:> Titlu de ni6el : </h:>
<h;> Titlu de ni6el ; </h;>
<p> &tili8ati tagurile heading doar pentru titluri. /u le utili8ati
pentru a e6identia un te5t. "5ist alte taguri pentru e6identiere.</p>
</body>
</html>
.e&ultat'
Titlu de nivel 1
Titlu de nivel 2
Titlu de nivel 3
Titlu de nivel 4
Titlu de nivel 5
Titlu de nivel 6
6faturi utile
Utilizai tagurile heading doar pentru titluri. Nu le utilizai pentru a
evidenia un text. Exist alte taguri pentru evideniere.
1.3.3. 3nt#up#i !# lini#
Tagul FbrG se utili&ea&% #nd dori(i a r#ndul s% se termine" dar nu dori(i s% #nepe(i un paragraf
nou' Tagul FbrG for(ea&% textul s% trea% dintr+un r#nd #n altul" indiferent unde este plasat aest
tag'
<p>Acesta <br> este para<br>gra4 cu <ntreruperi de linie.</p>
Tagul FbrG este vid (empty)' -l nu are tag de final'
.e&ultat3
<esta
este para
graf u #ntreruperi de linie'
1.3.+. Co(#ntaii HTML
Tagul pentru omentariu este utili&at pentru a insera un omentariu #n sursa od HTML'
,omentariul este ignorat de bro:ser' ,omentariile se utili&ea&% pentru a explia odul HTML"
pentru revi&uiri ulterioare'
<!=Acesta este un comentariu **>
55
Po'a(a# W#)
"ot. 4emnul exlam%rii apare dup% parante&a ung!iular% de des!idere" dar nu #nainte de
parante&a de #n!idere'
6faturi utile
Atunci cnd scriei text HTML, nu putei ti cum va aprea acest text n
alt browser. Unii utilizatori au calculatoare cu ecrane de dimensiuni mari,
alii - calculatoare cu ecrane de dimensiuni mici. Textul va fi reformatat
de fiecare dat cnd utilizatorul va redimensiona fereastra browserului.
Nu ncercai niciodat s formatai textul din editor prin adugarea
liniilor libere sau a spaiilor n text.
HTML va elimina spaiile din text. Orice numr de spaii va fi interpretat
ca un singur spaiu. n HTML un rnd nou din editorul de text se
interpreteaz ca un spaiu.
Nu se recomand utilizarea paragrafelor vide<p> pentru a insera un
rnd nou. Utilizai n acest scop tagul <br>. (Nu utilizai ns tagul <br>
pentru a crea liste.)
Paragrafele pot fi create fr tagul de nchidere </p>, adic tagul </p>
este opional. Se recomand s utilizai tagul </p>. Urmtoarea
versiune HTML nu va permite s omitei nici un tag de nchidere.
HTML adaug n mod automat un rnd liber nainte i dup unele
elemente, de exemplu pn i dup un paragraf, precum i pn i dup
titluri.
n aceast lucrare se utilizeaz o linie orizontal (tagul <hr> ) pentru a
separa diferite teme.
Ta.uri de ba' HTML
Tag Descriere
<html> Definete un document HTML
<body> Definete corpul documentului
<h1> - <h6> Definete titlurile de nivel 1 pn la 6
<p> Definete un paragraf
<br> Insereaz o singur ntrerupere de linie
<hr> Definete o linie orizonta
 Definete un comentariu 3.0 3.0
<!DOCTYPE> Definete tipul documentului
<a> Definete o ancor 3.0 3.0
<abbr> Definete o abreviere 6.2
<acronym> Definete un acronim 6.2 4.0
<address> Definete o adres 4.0 4.0
<applet> nvechit. Definete un aplet 2.0 3.0
<area> Definete o zon ntr-o imagine hart 3.0 3.0
<b> Definete un text cu aldine 3.0 3.0
<base> Definete URL de baz pentru toate referinele din pagin 3.0 3.0
<basefont> nvechit. Definete fontul de baz 3.0 3.0
<bdo> Definete direcia de afiare a textului 6.2 5.0
<big> Definete un text mai mare 3.0 3.0
<blockquote> Definete o citat lung 3.0 3.0
<body> Definete elementul body 3.0 3.0
<br> Insereaz o ntrerupere de linie 3.0 3.0
<button> Definete un buton 6.2 4.0
<caption> Definete titlul unui tabel 3.0 3.0
<center> nvechit. Definete un text centrat 3.0 3.0
<cite> Definete o citat 3.0 3.0
<code> Definete textul unui cod la computer 3.0 3.0
<col> Definete pentru coloanele unui tabel 3.0
<colgroup> Definete grupuri de coloane intr-un tabel 3.0
<dd> Definete descrierea ntr-o list de definiii 3.0 3.0
<del> Definete un text omis 6.2 4.0
<dir> nvechit. Definete o list directoriu 3.0 3.0
<div> Definete o seciune ntr-un document 3.0 3.0
<dfn> Definete un termen de definiie 3.0
<dl> Definete o list de definiii 3.0 3.0
<dt> Definete un termen de definiie 3.0 3.0
<em> Definete un text evideniat 3.0 3.0
<fieldset> Definete un set de cmpuri 6.2 4.0
<font> nvechit. Definete tipul, dimensiunea i culoarea fontului 3.0 3.0
<form> Definete un formular 3.0 3.0
<frame> Definete un cadru (seciune din fereastr) 3.0 3.0
<frameset> Definete un set de cadre 3.0 3.0
<h1> . <h6> Definete titluri de diferite nivele (1 - 6) 3.0 3.0
<head> Definete antetul unui document (informaii despre 3.0 3.0
?Q
Po'a(a# W#)
<hr> Definete o linie orizontal 3.0 3.0
<html> Definete un document html 3.0 3.0
<i> Definete un text cursiv 3.0 3.0
<iframe> Definete un cadru inline 6.0 4.0
<img> Definete o imagine 3.0 3.0
<input> Definete un cmp de inserare a textului 3.0 3.0
<ins> Definete un text inserat 6.2 4.0
<isindex> nvechit. Definete un cmp text pe o singur linie. 3.0 3.0
<kbd> Definete un text inserat de la tastatur 3.0 3.0
<label> Definete un label ntr-un formular 6.2 4.0
<legend> Definete un titlu ntr-un set de cmpuri 6.2 4.0
<li> Definete un termen (item) din list 3.0 3.0
<link> Definete referina pentru o resurs 4.0 3.0
<map> Definete o imagine hart 3.0 3.0
<menu> nvechit. Definete o list meniu 3.0 3.0
<meta> Definete informaii meta 3.0 3.0
<noframes> Definete o seciune fr cadre (noframe) 3.0 3.0
<noscript> Definete o seciune fr scripturi (noscript) 3.0 3.0
<object> Definete un obiect inserat 3.0
<ol> Definete o list ordonat 3.0 3.0
<optgroup> Definete un grup de opiuni 6.0 6.0
<option> Definete o opiune ntr-o list derulant 3.0 3.0
<p> Definete un paragraf 3.0 3.0
<param> Definete un paramtru pentru un obiect 3.0 3.0
<pre> Definete un text preformatat 3.0 3.0
<q> Definete o citat scurt 6.2
<s> nvechit. Definete un text tiat 3.0 3.0
<samp> Definete un fragment de cod la computer 3.0 3.0
<script> Definete un script 3.0 3.0
<select> Definete o list derulant de opiuni 3.0 3.0
<small> Definete un text de dimensiuni mici 3.0 3.0
<span> Definete o seciune de tip inline ntr-un document 4.0 3.0
<strike> nvechit. Definete un text tiat 3.0 3.0
<strong> Definete un text evideniat (cu aldine) 3.0 3.0
<style> Definete o definie de foi de stil 4.0 3.0
<sub> Definete un text subscript (indice de jos) 3.0 3.0
<sup> Definete un text superscript (indice de sus) 3.0 3.0
<table> Definete un tabel 3.0 3.0
<tbody> Definete corpul unui tabel 4.0
<td> Definete o celul n tabel 3.0 3.0
<textarea> Definete un cmp de text (comentariu) 3.0 3.0
<tfoot> Definete partea de subsol a unui tabel 4.0
<th> Definete titlul de coloan n tabel 3.0 3.0
<thead> Definete partea de antet a unui tabel 4.0
<title> Definete titlul unui document 3.0 3.0
<tr> Definete un rind din tabel 3.0 3.0
<tt> Definete un text teletype 3.0 3.0
<u> nvechit. Definete un text subliniat 3.0 3.0
??
Capitolul 3
<ul> Definete o list marcat (neordonat) 3.0 3.0
<var> Definete o variabil 3.0 3.0
<xmp> nvechit. Definete un text preformatat. Utilizai <pre> 3.0 3.0
An#?a 3
I;O BB5DH1 ;J()ol Entiti#-
Repre'entare
hea'ecimal

spaiu
(non-breaking space)

semnul exclamrii inversat

(inverted exclamation mark)
¡ ¡
valut
currency
¤ ¤
cent ¢ ¢
pound £ £
yen ¥ ¥
Linie vertical ntrerupt

(broken vertical bar)
¦ ¦
seciune
(section)
§ §
diacritice
spacing diaeresis
¨ ¨
copyright © ©
feminine ordinal indicator ª ª
Paranteze unghiulare(de stnga)

angle quotation mark (left)
« «
negare
(negation)
¬ ¬
marc nregistrat
(registered trademark)
® ®
marc nregistrat
(trademark)
™ ™
grad
(degree)
° °
plus-minus
plus-or-minus
± ±
la patrat
(superscript 2)
² ²
la cub
(superscript 3)
³ ³
accent
(spacing acute)
´ ´
micro µ µ
paragraph ¶ ¶
?J
Po'a(a# W#)
punct de mijloc
(middle dot)
· ·
la puterea 1
(superscript 1)
¹ ¹
Paranteze unghiulare (de dreapta)

angle quotation mark (right)
» »
fraction 1/4 ¼ ¼
fraction 1/2 ½ ½
fraction 3/4 ¾ ¾
semnul de ntrebare inversat

(inverted question mark)
¿ ¿
semnul nmulirii
(multiplication)
× ×
semnul mpririi
(division)
÷ ÷
Entit:4i I;O BB5DH1
Repre'entare
hea'ecimal
A, accent de stnga
(capital a, grave accent)
À À
A, accent de dreapta
capital a, acute accent
Á Á
A, accent cerc
capital a, circumflex accent
Â Â
A, accent tilda
capital a, tilde
Ã Ã
capital a, umlaut mark Ä Ä
capital a, ring Å Å
capital ae Æ Æ
capital c, cedilla Ç Ç
capital este, grave accent È È
capital este, acute accent É É
capital este, circumflex accent Ê Ê
capital este, umlaut mark Ë Ë
capital i, grave accent Ì Ì
capital i, acute accent Í Í
capital i, circumflex accent Î Î
capital i, umlaut mark Ï Ï
capital eth, Icelandic Ð Ð
capital n, tilde Ñ Ñ
capital o, grave accent Ò Ò
capital o, acute accent Ó Ó
capital o, circumflex accent Ô Ô
?2
Capitolul 3
capital o, tilde Õ Õ
capital o, umlaut mark Ö Ö
capital o, slash Ø Ø
capital u, grave accent Ù Ù
capital u, acute accent Ú Ú
capital u, circumflex accent Û Û
capital u, umlaut mark Ü Ü
capital y, acute accent Ý Ý
capital THORN, Icelandic Þ Þ
small sharp s, German ß ß
small a, grave accent à à
small a, acute accent á á
small a, circumflex accent â â
small a, tilde ã ã
small a, umlaut mark ä ä
small a, ring å å
small ae æ æ
small c, cedilla ç ç
small este, grave accent è è
small este, acute accent é é
small este, circumflex accent ê ê
small este, umlaut mark ë ë
small i, grave accent ì ì
small i, acute accent í í
small i, circumflex accent î î
small i, umlaut mark ï ï
small eth, Icelandic ð ð
small n, tilde ñ ñ
small o, grave accent ò ò
small o, acute accent ó ó
small o, circumflex accent ô ô
small o, tilde õ õ
small o, umlaut mark ö ö
small o, slash ø ø
small u, grave accent ù ù
small u, acute accent ú ú
small u, circumflex accent û û
small u, umlaut mark ü ü
small y, acute accent ý ý
small thorn, Icelandic þ þ
small y, umlaut mark ÿ ÿ
?1
Po'a(a# W#)
Alt# Entit:4i -upotat# !# HTML
Repre'entare
hea'ecimal
C capital ligature OE &OElig; Œ
small ligature oe &oelig; œ
S capital S with caron &Scaron; Š
s small S with caron &scaron; š
Y capital Y with diaeres &Yuml; Ÿ
` modifier letter circumflex accent &circ; ˆ
small tilde &tilde; ˜
- en dash – –
- em dash — —
` left single quotation mark ‘ ‘
right single quotation mark ’ ’
, single low-9 quotation mark &sbquo; ‚
" left double quotation mark “ “
right double quotation mark ” ”
, double low-9 quotation mark &bdquo; „
% per mille &permil; ‰
single left-pointing angle quotation &lsaquo; ‹
single right-pointing angle quotation &rsaquo; ›
C euro € €
J7
Capitolul 3
*. CA;CADI8G ;TKLE ;HEET; H C;;
*.1. 8o4iuni !# )aA:
2!!" presurtarea de la Cascadin& (t$le (#eets ) foi de stil #n asad%" s#nt eti!ete folosite
pentru formatarea paginilor Web (de exemplu" formatare text" bakground sau aranjare #n
pagin% et')'
Un stil repre&int% o ole(ie de atribute ale textului $i ale modului de aranjare a doumentului
are pot fi apliate #n mod seletiv unui doument sau doar unei p%r(i din aesta' <este atribute
pot fi de tipul font" m%rimea $i grosimea aestuia" marginile" paragrafele $i orie alteva e
poate influen(a aspetul textului #n pagin%' Lruparea lor #n stiluri permite autorului s% aplie
aeea$i ole(ie de atribute la diferite p%r(i ale unui doument'
4tilurile apliate unui doument HTML au multe avantaje pentru reatorii de pagini Web3
Afer% ontrol resut asupra aspetului $i plas%rii textului #n pagin%
.edu @#nv%lm%$eala@ produs% de multitudinea de des!ideri $i #n!ideri ale eti!etelor
are desriu elementele individuale ale textului
>roesul de modifiare a diferitelor elemente din pagin% se simplifi%
Ce exemplu" da% dori(i a titlurile dumneavoastr% s% aib% un alt tip de font de#t textul obi$nuit"
s% fie de dimensiune mai mare $i srise u aratere #ngro$ate $i italie" ar trebui s% defini(i
aeste atribute de formatare pentru fieare titlu #n parte' Bolosind stilurile nu ave(i nevoie de#t
s% rea(i o singur% defini(ie de stil are s% on(in% atributele de formatare dorite" pe are s% o
aplia(i la fieare titlu'
9n plus" folosirea stilurilor redue onsiderabil efortul depus atuni #nd dori(i s% adue(i
modifi%ri aspetului $i aranj%rii elementelor din paginile dumneavoastr%' 9n lo s% parurge(i
fieare doument #n parte $i s% fae(i modifi%ri asupra fie%rui element" nu mai este neesar s%
opera(i modifi%ri de#t asupra foii de stiluri are ontrolea&% aeste elemente'
*enefiiile sintaxei ,44 s#nt3
formatarea este introdus% #ntr+un singur lo pentru tot doumentul
editarea rapid% a eti!etelor
datorit% introduerii #ntr+un singur lo a eti!etelor se ob(ine o misorare a odului
paginii" impliit" inararea mai rapid% a aesteia
4intaxa ,44 este struturat% pe trei niveluri3
nivelul * fiind propriet%(ile eti!etelor din doumentul HTML" tip inline
nivelul + este informa(ia introdus% #n bloul H-<C" tip em+edded
nivelul , este repre&entat de omen&ile aflate #n pagini separate" tip externe
,ea mai mare importan(% (suprasrie orie alt parametru) o are sintaxa de nivelul 0" iar ea mai
mi% importan(% o are ea de nivelul 5'
J0
Po'a(a# W#)
Bolosirea unui fisier extern sau nivel 5 are s% on(in% omen&i ,44 este foarte pratie"
deoaree poate fi utili&at #n mai multe situa(ii (mai multe fi$iere HTML pot folosi aela$i fi$ier
extern ,44) elimin#nd timpul neesar introduerii odului orespun&ator #n fieare pagin% $i"
totodat%" editarea lor #ntr+un singur lo pentru mai multe fisiere'
-xtensia aestor fi$iere este .css'
Leg%tura paginilor HTML u fi$ierele extene ,44 se fae prin introduerea urm%toarei linii3
<linA rel@)stylesheet) type@)te5t/css) hre4@)4isierBcss.css)>
<tributele indi% urm%toarele3
rel + fisierul este tip styles!eet
t$pe + tip text e on(ine omen&i ,44
#ref + fi$ierul sau adresa fi$ierului ,44'
,omen&ile de nivelul 6 sau em+edded s#nt ele g%&duite oriunde #ntre pere!ea de eti!ete
F!eadG si FH!eadG onform sintaxei3
<style type@)te5t/css)>
<!**
... comen8i CCC ...
**>
</style>
Unde st$le + speifi% unde #nepe $i unde se termin% bloul ,44" t$pe + prei&ea&% e limbaj e
folosit pentru a onstrui foaia stilisti% iar -.))...))/ este folosit pentru a asunde de bro:serele
ve!i" are nu unos sintaxa ,44" on(inutul bloului st$le'
,omen&ile ,44 de nivelul 0 sau inline s#nt ele mai pe larg folosite" ele suprasriind orie alte
omen&i ,44' 4#nt amplasate #n interiorul eti!etelor HTML aflate #n &ona *ACK $i au sintaxa3
<eticheta style@)codul CCC dorit)>
...te5tul sau obiectul asupra caruia este aplicat codul CCC...
</eticheta>
-ste permis% folosirea omentariilor #n ,44 astfel3
/U Acesta este un comentariu in CCC U/
*.*. ;inta?a C;;
4intaxa ,44 este al%tuit% din trei p%r(i3 un seletor" o arateristi% $i o valoare' 4eletorul este
elementulHtagul pe are vre(i s%+l defini(i" arateristia este atributul pe are dori(i s%+l
s!imba(i $i fieare arateristi% poate lua o valoare' ,arateristia $i valoarea s#nt separate de
semnul (3) $i s#nt #nadrate de aolade3
body Xcolor0 blacAY
J6
Capitolul 3
Ca% dori(i s% speifia(i mai mult de o arateristi%" trebuie s% separa(i fieare arateristi% u
semnul (X)' -xemplul e urmea&% arat% um s% defini(i un paragraf aliniat entral" u uloarea
ro$ie a textului3
p Xte5t*align0 centerN color0 redY
>entru a #ntelege mai bine aeast% defini(ie de stil" pute(i desrie o arateristi% pe fieare r#nd"
a #n exemplul urm%tor3
p X
te5t*align0 centerN
color0 blacAN
4ont*4amily0 arial
Y
*.3. El#(#nt#l# i! &i "la--
id $i class s#nt omen&i are dau unei format%ri ,44 un nume' 4e foloses atuni #nd dorim s%
apli%m un style de formatare unei anume &one' >entru ompatibilitate u versiunile anterioare
de bro:sere" numele asoiate &onelor nu vor on(ine araterul Û;'
<tributul id trebuie s% fie uni pe pagin%' /u poate exista de#t un element u un id dat #ntr+un
doument' -l este marat #n doumentul HTML u id #n lo de class3
<p id@)intro)>
Acest paragra4 6a 4i aliniat la dreapta.
</p>
<tributul id poate fi definit #n doua moduri' >oate fi definit pentru a se potrivi tuturor
elementelor u un id speifi sau s% se potriveas% numai unui element u un id speifi' 9n
exemplul urm%tor atributul id se va aplia tuturor elementelor u id0 1intro13
Dintro X
4ont*si8e0..-LN
4ont*1eight0boldN
color0D----44N
bacAground*color0transparent
Y
-lementul id se apli% unui style de format o singur% dat% sau la o singur% eti!et% HTML"
plas#ndu+se un nume aelui style' <est element neesit% existen(a ome&ilor ,44 #n &ona
H-<C sau #ntr+un fi$ier extern'
-xemplu3 folosirea elementului id
<html>
<head>
<title>"5emplu</title>
<!** DalbastruXcolor0 D----33NY**>
</style>
J5
Po'a(a# W#)
</head>
<body>
<p id@)albastru)>Te5t albastru introdus prin id )albastru)</p>
Te5t negru
</body>
</html>
,u atributul class pute(i defini stiluri diferite pentru aela$i element' 4% &iem % vre(i dou%
tipuri de paragrafe #n doumentul dvs3 unul aliniat la dreapta $i unul entrat' )at% um pute(i fae
aeasta u stiluri3
p.right Xte5t*align0 rightY
p.center Xte5t*align0 centerY
Trebuie s% folosi(i atributul class #n doumentul dvs' HTML3
<p class@)right)>
Acest paragra4 6a 4i aliniat la dreapta.
</p>
<p class@)center)>
Acest paragra4 6a 4i aliniat pe centru.
</p>
-lementul class este similar u id dar spre deosebire de aesta poate fi folosit de mai multe ori
sau pentru &one mai mari' ,a $i la id neesit% existen(a ome&ilor ,44 #n &ona H-<C sau #ntr+
un fi$ier extern'
-xemplu3 folosirea elementului class3
<html>
<head>
<!** .rosuXcolor0 D33----NY**>
</style>
</head>
<body>
<p class@)rosu)>!rimul te5t rosu introdus prin class )rosu)</p>
Te5t negru
<p class@)rosu)>Al doilea te5t rosu introdus prin class )rosu)</p>
</body>
</html>
Exemplu de clase de stiluri
,lasele de stiluri permit definirea unui stil general (apliabil #n mai multe louri #n adrul
aeleia$i pagini sau #n pagini diferite) #n vederea inser%rii lui oriunde este neesar prin
intermediul unei simple referiri' 4% presupunem % dorim s% definim o las% de stiluri @lasa+
mea@ (pe are dorim s% o apli%m anumitor por(iuni de text pentru a le fae s% apar% de uloare
verde $i aliniate la st#nga)' Oom utili&a #n aest sens bloul -st$le/...-2st$le/" aflat" la r#ndul
J8
Capitolul 3
s%u" #n interiorul bloului -#ead/...-2#ead/ (repre&ent#nd !ead+erul doumentului HTML)'
Oom reali&a eea e ne+am propus #n felul urm%tor3
<style>
all.clasa*mea Xte5t*align0le4tN color0greenNY
</style>
,uv#ntul standard @all@ aflat #n fa(a lasei de stiluri 1clasa)mea1 indi% faptul % aeast% las%
este apliabil% tuturor blourilor de text" atuni #nd este neesar' >rati lasa de stiluri 1clasa)
mea1 poate fi asoiat% tuturor tagurilor HTML are operea&% u text (a de exemplu3 H6" H?" >"
C)O" et''') utili&#nd #n interiorul fie%rui tag vi&at o referire expliit% la aeast% las%3 -T!3
class0clasa)mea/'
<$adar" da% dorim s% apli%m aeast% las% de stiluri unui titlu de ordinul 5 (speifiat #n odul
HTML prin tagul H5)" atuni sriem3
<#+ class@)clasa*mea*9)> Acesta este un header de marime +F aliniat
la stanga si de culoare 6erde </#+>
Cupa um s+a v%&ut" pentru apelarea unei lase de stiluri #n vederea apli%rii sale elementului
tag urent se folose$te atributul @lass@ av#nd a valoare numele lasei de stil' 9mpreun% u
speifia(ia @all@ din definirea lasei de stiluri" atributul @lass@ devine un atribut universal"
adi% va putea fi asoiat tuturor tagurilor HTML %rora li se poate aplia (#n aest a& elor are
operea&a u text)'
Abserva(ii3
+ 9n interiorul unui blo -st$le/...-2st$le/" omentariile s#nt blouri delimitate de H\ $i \H (a $i
#n ," ,__" Yava $i Yava4ript)'
+ Ca% dorim a o las% de stiluri s% fie apliabil% numai pentru anumite elemente ale
doumentului (spre exemplu" pentru paragrafele de text desemnate prin marajul de paragraf
@p@)" atuni #n onstru(ia lasei va aparea aest element (de exemplu @p'lasa+mea+6@)'
-xemplu3
<html>
<head><title>Clase de stiluri dedicate</title>
<style> p.clasa*mea*9 Xte5t*align0le4tN color0greenNY </style>
</head>
<body>
<p>Acesta este un paragra4 normal</p>
<br>
<p class@)clasa*mea*9)>
Acesta este un paragra4 aliniat la stanga si de culoare 6erde</p>
</body>
</html>
Exemple de stiluri identificate
JQ
Po'a(a# W#)
<bsolut toate elementele tag ale unui doument HTML admit un atribut universal numit @id@'
<est atribut @id@ poate identifia prin valorile sale stilul utili&at de un tag HTML'
>entru a utili&a un stil @identifiat@ proed%m astfel3
0' 9n bloul FstyleG'''FHstyleG introduem defini(ia stilului onform sintaxei3
<style>
Drosu Xcolor0 redY
</style>
'. 9n elementul (tagul) #n are dorim utili&area loal% a aestui stil" folosim atributul "id" are
primeste a valoare numele identifiator al stilului definit anterior' -xemplu3
<p id@)rosu)>Acesta este un paragra4 de te5t de culoare rosie</p>
Ca% dorim a un stil @identifiat@ s% fie apliabil numai pentru anumite elemente ale
doumentului (de exemplu @H5@)" atuni #n onstru(ia (defini(ia) identifiatorului de stil va
ap%rea aest element (aii @H5@)" a #n exemplul urm%tor3
<html>
<head>
<title>!agina cu stil identi4icat</title>
<style>
#+Drosu Xcolor0redN te5t*align0centerNY
</style>
</head>
<body>
<#+ id@)rosu)>Acesta este un header de marime +F centrat si de culoare
rosie</#+>
</body>
</html>
Exemplu de stil )66 *n fi<ier extern
4tilurile definite #n interiorul unui blo FstyleG'''FHstyleG pot fi transferate #ntr+un fi$ier extern
exist#nd astfel posibilitatea asoierii lor mai multor fi$iere HTML'
>entru a utili&a un stil definit #ntr+un fi$ier extern se proedea&% astfel3
0' 4e reea&% un fi$ier are s% on(in% numai desrierea stilurilor $i se salvea&% u extensia
@'ss@' ,on(inutul aestui fi$ier oinide u on(inutul unui blo FstyleG'''FHstyleG" f%r% a ae$ti
delimitatori s% fie inlu$i'
6' 9n fi$ierul HTML" are utili&ea&% stilurile definite #n fi$ierul reat la puntul 0" se inlude #n
bloul F!eadG'''FH!eadG o eti!et% FlinkG" av#nd trei atribute3
+ atributul 2rel 2 u valoarea 1st$les#eet1X
+ atributul 2t ype2 u valoarea 1te4t2css1X
+ atributul 20ref2 av#nd a valoare adresa U.L a fi$ierului reat la puntul 0'
J?
Capitolul 3
4tilurile definite din fi$ierul ,44 extern se ativea&% a $i um ar fi stiluri definite #n fi$ierul
HTML urent #ntr+un blo FstyleG'''FHstyleG'
)at% un fi$ier HTML u un ,44 extern3
<html>
<head>
<meta http*eZui6@)Content*%anguage) content@)en*us)>
<meta http*eZui6@)Content*Type) content@)te5t/htmlN
charset@1indo1s*.9:9)>
<%(/[ 2"%@)stylesheet) T!"@)te5t/css) #2"3@)stil.css)>
<title>!agina de te5t stili8at</title>
</head>
<body>
<#9>Acesta este te5t 4ormatat ca #eader .</#9>
<p>Acesta este un paragra4</p>
<#+>Acesta este te5t 4ormatat ca #eader 9F urmat de un tabel</#+>
<table 1idth@).--L) border@).)>
<tr>
<th align@)le4t)>/ume</th>
<th align@)le4t)>!renume</th>
<th align@)le4t)>Tele4on</th>
<th align@)le4t)>"*mail</th>
</tr>
<tr>
<td 1idth@)9:L)>!opescu</td>
<td 1idth@)9:L)>Ealentina</td>
<td 1idth@)9:L)>,,++TH</td>
<td 1idth@)9:L)>popescuJmail.md</td>
</tr>
<tr>
<td 1idth@)9:L)>(onescu</td>
<td 1idth@)9:L)>$ihai</td>
<td 1idth@)9:L)>::TTHI</td>
<td 1idth@)9:L)>ionescuJmail.md</td>
</tr>
</table>
<br>
<h+>Acesta este un te5t 4ormatat ca #eader +F urmat de 9 liste0</h+>
<ol>
<li>Date personale studentN</li>
<li>Cali4icari studentN</li>
<li>!rogram 8ilnic0</li>
</ol>
<ul>
<li>!rogram dimineata</li>
<li>!au8a de masa</li>
<li>!rogram dupamia8a</li>
</ul>
</body>
</html>
Bi$ierul ,44 asoiat (plasat #n aela$i diretor) u fi$ierul HTML de mai sus este3
#9F#+Fh+
X
color0D,I+dIbN
JJ
Po'a(a# W#)
4ont*4amily0 )lucida calligraphy)F )arial)N
Y
pF tableF li
X
4ont*4amily0 )lucida calligraphy)F )arial)N
margin*le4t0 .-ptN
Y
body
X
bacAground*color0D444a4-N
Y
liFpFthFtd
X
4ont*si8e0 I-LN
Y
table Xborder*style0outsetY
li Xlist*style0 sZuareNW
Men(iune suplimentar%3
9n a&ul #n are dintr+un fi$ier HTML se fae o referire la un fi$ier ,44 are #ns% lipse$te" atuni
fi$ierul HTML va fi afi$at #n bro:ser f%r% elementele de stili&are" exat a$a um ar ar%ta da%
stili&%rile nu ar fi existat'
Exemplu de stiluri dedicate
<este stiluri se apli% blourilor de text pentru are s#nt definite $i apelate pe lo' Ce exemplu3
<#+ style@ )te5t*align0rightN color0D,9T"3HN)>
9n aest exemplu" stilul va determina toate titlurile H5 din paginile HTML are fa apel la aest
stil s% apar% #n bro:ser #n uloarea speifiat% $i aliniate la dreapta'
Ca% dorim a aela$i stil s% fie utili&at de %tre mai multe elemente+tag (de ex' @H6@" @H5@" @>@
si @C)O@)" atuni fie se utili&ea&% o list% u aeste elemente (separate prin virgul%) #n se(iunea
-st$le/...-2st$le/ din !eader+ul doumentului (delimitat de marajele FH-<CG'''FHH-<CG)"
asoiindu+i+se elementele de stil omune" fie se va utili&a stilul #n mod expliit #n adrul fie%rui
tag" a mai sus'
-xemplu u lista de stiluri #n H-<C3
<style>
#9F #+F ! Xte5t*align0rightN color0D,9T"3HNY
</style>
-xemplu u fieare element de stil definit $i apelat #n adrul tagurilor luate separat3
<html>
<head>
<meta http*eZui6@)Content*Type) content@)te5t/htmlN charset@1indo1s*
.9:9)>
<title>Ctil dedicat inline</title>
</head>
<body>
<#9 style@ )te5t*align0rightN color0D,9T"3HN)>te5t</#9>
J2
Capitolul 3
<p style@ )te5t*align0rightN color0D,9T"3HN)>te5t</!>
<#+ style@ )te5t*align0rightN color0D,9T"3HN)>te5t</#+>
</body>
</html>
-xpliitarea a fost f%ut%" a$adar" #n momentul utili&%rii aestora'
Exemplu de stiluri inline
!tilurile in5line s#nt aele stiluri definite !iar #n eti!eta HTML (marajul) e ini(ia&% bloul #n
are dorim s% se aplie aeste stiluri'
Cup% um am v%&ut deja" pentru a defini stiluri inline se utili&ea&% atributul universal "st$le"
(omun prati tuturor eti!etelor e apar #ntr+un doument HTML) #n a %rui apare semnul
egal" dup% are" #ntre g!ilimele" urmea&% definirea stilului" prati valoarea atributului "st$le"'
Caloarea dat atri+utului 2style2 este tomai desrierea stilului" uprins% nu #ntre aolade 5..6
(a la definirea #n H-<C sau #n fi$erul ,44 extern)" i #ntre g!ilimele 1...13
<#+ style@)color0redN te5t*align0 centerN)>Acest header are marimea 9F
este de culoare rosie si se po8itionea8a in pagina centrat.</#+>
Ca% dorim utili&area unui anumit stil pentru un fragment de text" atuni inludem aest text
#ntr+un blo u ajutorul delimitatorilor -span/...-2span/" dup% are putem utili&a atributul
1st$le1" #n adrul eti!etei -span/" inline3
<html>
<head>
<title>!agina #T$% cu stil inline</title>
</head>
<body><#+>Titlu de marime +</#+>
<span style@)si8e0.:ptN align@centerN color0greenN)>
Acesta este un te5t cu corpul de litera de dimensine .: puncteF
aliniat pe centru si de culoare 6erde.
</span>
</body>
</html>
*.+. P-#u!o"la-# !# -tilui C;;
=seudoclasele se utili&ea&% pentru personali&area leg%turilor :eb" at#t de tip text" #t $i de tip
imagine' -le se defines #n interiorul unui blo -st$le/...-2st$le/ sau #ntr+un fi$ier extern'
-xemplul de mai jos este edifiator #n aest sens3
a0linA Xcolor0 blueN 4ont*si8e0 .:ptNY
a0ho6er Xcolor0 redN 4ont*style0 italicN te5t*decoration0 noneY
a06isited Xcolor0 magentaN 4ont*si8e0 .:ptN te5t*decoration0 noneY
a0acti6e Xcolor0 cyanN 4ont*si8e0 .:ptN te5t*decoration0 noneY
-xplia(ii3
o a*lin3 se refer% la modul #n are arat% un link #n mod normalX
J1
Po'a(a# W#)
o a*ho-er se refer% la modul #n are arat% un link atuni #nd se tree u mouse+ul
peste el (#n /etsape fun(ionea&% doar de la versiunea ?)X
o a*acti-e se refer% la modul #n are arat% un link atuni #nd se efetuea&% lik
pe elX
o a*-isited se refer% la modul #n are arat% un link deja vi&itatX
o speifia(ia /text5decoration* none/ elimin% sublinierea impliit% u o linie
albastr% a link+ului'
>entru a numai anumite leg%turi s% utili&e&e un stil" se pot folosi urm%toarele trei metode3
0) a3 link',L<4<0 `'''a com+inat cu Fa lass I ,L<4<0 !refI@ @G '''FHaG
6) a3 linkT)C0 `'''a com+inat cu Fa id I )C0 !refI@ @G '''FHaG
5) a',L<4<03 link `'''a com+inat cu Fa lass I ,L<4<0 !refI@ @G '''FHaG
*.5. Mo!alit:4i !# (o!i%i"a# a "u-oului
9n bro:sere ursorul mouse+ului are #n general o form% simpl% $i bine unosut%" lu#nd pe
parursul vi&ion%rii paginii respetive maximum dou% inf%(i$%ri diferite3
o M#na + atuni #nd este po&i(inat pe o leg%tur%
o 4%geata obli% din dire(ia dreapta jos spre st#nga sus + atuni #nd este
po&i(ionat pe alt obiet de#t o leg%tur%'
<estea s#nt #ns% formele impliite' -xist% #ns% $i a&uri #n are am dori a ael ursor s% ia o
alt% form% de#t ele dou% predefinite' La fel a multe alte probleme are prives modul #n are
arat% o pagin%" $i aeast% problem% #$i g%se$te re&olvarea #n folosirea ,44 a limbaj de desriere
a modului de stili&are a unui doument'
>roprietatea are manipulea&% forma ursorului se nume$te simplu3 2cursor2 $i poate fi
introdus% #n orie element 1st$le1 al unui tag !tml'
Ce exemplu" pentru ob(inerea unei imagini a ursorului de tipul unei s%ge(i #nso(ite de un semn
de #ntrebare la treerea mouse+ului peste un link" va trebui folosit odul3
<a hre4@)4isier.html) style@)cursor0 help)>%egatura</a>
-fetul este urm%torul (doar pentru )- minim 8'7)3
/u este #ns% uniul mod de stili&are a ursorului mouse+ului' 9n ontinuare pre&ent%m odurile
pentru toate formele de ursor are pot fi folosite3
27
Capitolul 3
auto utilizeaz setrile implicite ale utilizatorului
crosshair creeaz o cruce
default setrile implicite ale browserului
e-resize sgeata Est-Vest
hand mna
help semnul ntrebrii
move cruce cu sgei la capete
n-resize sgeata Sud-Nord
ne-resize sgeata SudVest - NordEst
nw-resize sgeata SudEst - NordVest
pointer mna
s-resize sgeata Nord - Sud
se-resize sgeata NordVest - SudEst
sw-resize sgeata NordEst - SudVest
text bara vertical, cmpuri de introducere a datelor
w-resize sgeata Est-Vest
wait clepsidra
*.9. !iC0 -pan &i #ti"7#t# C;;
-ti!eta !tml FdivG fun(ionea&% asem%n%tor u eti!eta !tml FpG" put#nd g%&dui omen&i ,44
apliabile la un blo sau la mai multe din on(inutul paginii' -ti!eta !tml FspanG este similar%
u eti!eta !tml FfontG (pe ale de a fi eliminat% de onsor(iul W5,) apli#ndu+se elementelor
dintr+un paragraf' -ti!etele ,44 s#nt unosute sub numele de elemente sau seletori av#nd un
layout asem%n%tor u eti!etele HTML3
// eticheta #T$%
<eticheta argument@)6aloare)>
// eticheta CCC
elementXargument0 6aloareNY
-lementul poate fi o eti!et% HTML" un id sau un lass" iar argumentul $i valoarea s#nt aelea$i
a #n HTML'
-xemplu3 aela$i text reali&at #n HTML $i #n HTML u ,44
// #T$%
<4ont color@)D--33--)>
<p>Te5t 6erde</p>
</4ont>
// #T$% cu CCC
<p style@)color0 D--33--N)>
Te5t 6erde
</p>
,omen&ile de ,44 pot fi plasate $i #n &ona H-<C re&ult#nd o fun(ionare identi%X mai mult
!iar" aelea$i omen&i put#nd fi folosite #n mai multe louri #n aeea$i pagin%'
-xemplu3 omen&i ,44 inluse #n &ona H-<C
20
Po'a(a# W#)
<html>
<head>
<!**
pXcolor0 D--33--NY
**>
</style>
</head>
<body>
<p>Te5t 6erde</p>
Te5t negru
<p>Te5t 6erde</p>
</body>
</html>
*.>. ;tilui p#ntu %ontui
<este elemente speifi% argumentul fontului are se asoia&% unui element HTML" fiind
inluse ori #n &ona H-<C" ori #n interiorul eti!etei dorite'
9n a&ul de fa(% se remar% asem%narea u eti!eta font din HTML are aept% argumentele
t$pe" st$le" size $i wei&#t'
font5family
font)famil$ este de fapt o list% de fonturi din are bro:serul va folosi #n ordinea #n are le
reunoa$te (primul folosit va fi primul din list%" da% nu este reunosut" #l folose$te pe al doilea
$i tot a$a mai departe)' -ste reomandat a ultima po&i(ie din list% s% fie un font generi (de
exemplu" serif" sans+serif sau monospae)'
9n situa(ia #n are numele fontului este format din dou% uvinte" se #nadrea&% #ntre g!ilimele
duble pentru a bro:serul s% le interprete&e #mpreun%'
-xemplu3 ,44 introdus #n H-<C apliat eti!etei p' *ro:serul nu reunoa$te primele dou%
fonturi din list%" folosindu+l pe al treilea
<html>
<head>
<!** pX4ont*4amily0 4ont.F4ont9FarialNY**>
</style>
</head>
<body>
<p>Te5t scris cu cu 4ontul Arial</p>
Te5t negru
<p>Te5t scris cu cu 4ontul Arial</p>
</body>
</html>
-xemplu3 aela$i exemplu dar ,44 introdus #n eti!eta p din HTML
26
Capitolul 3
<html>
<head>
</head>
<body>
<p style@)4ont*4amily0 4ont.F4ont9FarialN)>
Te5t scris cu cu 4ontul Arial</p>
Te5t negru
<p style@)4ont*4amily0 4ont.F4ont9FarialN)>Te5t scris cu cu 4ontul Ari
al</p>
</body>
</html>
font5size
font)size este parametrul prin are stabilim dimesiunea fontului" exprimat #n pixeli (px)" punte
(pt)" key:ords sau proente' <re o fun(ionare asem%n%toare u eti!eta FfontG'
-xemplu3 ,44 introdus #n H-<C apliat eti!etei p" dimensiunea exprimat% #n pixeli
<html>
<head>
<!** pX4ont*si8e0 9-p5NY**>
</style>
</head>
<body>
<p>Te5t scris cu 4ont de 9-p5</p>
Te5t negru
</body>
</html>
>entru dimensiunea exprimat% #n punte folosim aela$i exemplu #nlouind px u pt'
Cimensiunea exprimat% prin key:ords folose$te uvinte #n lo de ifre' bapte uvinte #nlouies
dimensiunile de la 0 la J de la ve!ea eti!et% BA/T B<,- din HTML3
2!! 3ey6ord numr #D?T size
xx+small 0
x+small 6
small 5
medium 8
large Q
x+large ?
xx+large J
>entru verifiare se poate folosi exemplul anterior #n are se #nlouie$te 67px u unul din
uvintele de mai sus' >roentele s#nt o alt% valoare pe are o poate lua font)size' <east%
modalitate poate fi vi&uali&at% diferit de bro:sere diferite' ,a verifiare folosi(i aela$i exemplu
s!imb#nd 67px u 677]'
25
Po'a(a# W#)
font5style
font)st$le este folosit pentru a ad%uga arateristia itali% fontului' >oate lua valorile normal $i
italic'
<!** pX4ont*style0 italicNY**>
</style>
font56eight
font)wei&#t este parametrul are stabile$te grosimea araterului put#nd lua valorile numerie de
la 077 la 177 sau 78LD" 78LD9:" L;3HT9:'
<!** pX4ont*1eight0 H--NY**>
</style>
*.B. Co(pun##a -tiluilo
4tilurile pre&entate anterior pot fi folosite simultan #n interiorul aeleia$i eti!ete fiind desp%r(ite
de araterul ^X; (punt $i virgul%)'
-xemplu3 folosirea unui stil ompus apliat eti!etei p
<html>
<head>
<!**
pX
4ont*4amily0 arialN
4ont*si8e0 9-p5N
4ont*style0 italicN
4ont*1eight0 I--NY
**>
</style>
</head>
<body>
<p>Te5t scris cu ArialF 9-p5F italicF I--</p>
Te5t negru
</body>
</html>
*.D. ;tilui p#ntu t#?t
,liniere
te4t)ali&n po&i(ionea&% pe ori&ontal% obiete (de exemplu" text sau imagini) $i admite valorile
left" ri&#t $i center a $i eti!eta ali&n din HTML'
28
Capitolul 3
9n ontinuare este pre&entat a exemplu odul folosit #n H-<C" apliat eti!etei p3
<!**
pXte5t*align0 centerNY
**>
</style>
-xemplu3 prin intermediul lui div apli%m stilul pe entru imaginii $i textului
<html>
<head>
<!**
pXte5t*align0 centerNY
**>
</style>
</head>
<body>
<di6 class@)pecentru)><img src@)img..>pg)></di6>
Te5t ne4ormatat
<di6 class@)pecentru)>Te5t 4ormatat</di6>
</body>
</html>
vertical)ali&n este folosit pentru alinierea pe vertial% a obietelor dintr+un tabel $i poate lua
valorile3 top" middle $i bottom'
9n exemplul de mai jos este reat% lasa sus are va putea fi apliat% elementelor FtdG ale
tabelului3
<!**
.susX6ertical*align0 topNY
**>
</style>
float este folosit pentru alinierea textului u imaginile $i poate avea valorile3 left $i ri&#t' 9n
fun(ie de valoarea aleas% imaginea va fi aliniat% #n partea opus% a paginii'
-xemplu3 se reea&% lasa auto $i o apli%m imaginii
<html>
<head>
<!**
.autoX4loat0 le4tNY
**>
</style>
</head>
<body>
2Q
Po'a(a# W#)
<img src@)po8a.>pg) class@)auto)>
Te5tul se alinia8a la dreaptaF iar po8a la stanga datorita
clasei )auto).
</body>
</html>
Ta+ulare
te4t)indent este folosit pentru alinierea textului #n interior av#nd valori exprimate #n ini (in)"
entimetri (m) sau pixeli (px)'
9n exemplul de mai jos te4t)indent este apliat eti!etei p deplas#nd textul u 07 pixeli #n
interior3
<!**
pXte5t*indent0 .-p5NY
**>
</style>
"ecorare
te4t)decoration adaug% sublinierea sau t%ierea bloului text asoiat $i poate avea valorile
underline" line)t#rou&# sau none'
-xemplu3 stilul asoiat eti!etei p este pre&entat #n H-<C
<html>
<head>
<!**
pXte5t*decoration0 underlineNY
**>
</style>
</head>
<body>
Te5t normal
<p>Te5t subliniat</p>
</body>
</html>
2uloare
color define$te uloarea textului dintr+o &on% sau #ntreaga pagin%'
-xemplu3 stilul asoiat eti!etei p este pre&entat #n H-<C3
<html>
<head>
<!**
pXcolor0 D----33NY
**>
</style>
2?
Capitolul 3
</head>
<body>
Te5t normal
<p>Te5t albastru</p>
</body>
</html>
!tiluri pentru legturi
9n HTML uloarea leg%turilor poate fi stabilit% prin atributele L)/E" <L)/E $i OL)/E
delarate #n interiorul eti!etei *ACK' <ela$i luru $i !iar mai mult poate fi reali&at folosind
sintaxa ,44'
-xemplu3
<html>
<head>
<!**
aX4ont*4amily0 arialN 4ont*si8e0 9-p5NY
a0linA Xcolor0 D----33NY
a06isited Xcolor0 D--33--NY
a0acti6e Xcolor0 D33----NY
a0ho6er Xcolor0 D------NY
**>
</style>
</head>
<body>
Te5t normal
<a hre4@)e5emplu.html)>linA</a> catre e5emplu
</body>
</html>
a + define$te stilul general pentru leg%tur%
a3link + define$te stilul leg%turii nevi&itate
a3visited + define$te stilul leg%turii vi&itate
a3ative + define$te stilul leg%turii ative (nu prea se folose$te)
a3!over + define$te stilul #nd mouse+ul este deasupra leg%turii
*.1,. ;tilui p#ntu )a"6'oun!
,uloarea pentru fundal (bakground) sau imagine poate fi definit% pentru #ntreaga pagin%"
pentru o elul% a tabelului sau pentru text'
2uloare de fond
bac%&round)color define$te uloarea de fond $i poate fi asoiat ori%rei eti!ete HTML'
-xemplu3 definim un stil pentru #ntreg *ACK $i un altul pentru eti!eta p
<html>
<head>
2J
Po'a(a# W#)
<!**
body XbacAground*color0 D3333--NY
p XbacAground*color0 D33----NY
**>
</style>
</head>
<body>
Te5t normal
<p>Te5t cu bacAground rosu</p>
</body>
</html>
;magine de fond
)maginile pot fi folosite a fundal #n spatele #ntregii pagini" a unui obiet sau a textului'
bac%&round)ima&e asoia&% o imagine a fundal unui obiet'
-xemplu3 definim un stil pentru eti!eta p
<html>
<head>
<!**
p XbacAground*image0 urlVpo8a.>pgWNY
**>
</style>
</head>
<body>
Te5t normal
<p>Te5t cu imagine de 4ond</p>
</body>
</html>
8epetare
Bun(ie de dimensiunile obietului %ruia #i s#nt asoiate imaginile de fond se repet% pe
ori&ontal% $i vertial%' .epetarea poate fi ontrolat% prin parametrul bac%&round)repeat are
poate lua valorile3
repeat)4 + imaginea se repet% pe ori&ontal%
repeat)$ + imaginea se repet% pe vertial%
no)repeat + imaginea nu se repet%
-xemplu3 imaginea nu se repet% sub eti!eta p
<html>
<head>
<!**
p XbacAground*image0 urlVpo8a.>pgWN
bacAground*repeat0 no*repeatNY
22
Capitolul 3
**>
</style>
</head>
<body>
Te5t normal
<p>Te5t cu imagine de 4ond</p>
</body>
</html>
=oziia
9n mod normal" imaginea de fundal #nepe din ol(ul st#nga sus al obietului asoiat" dar aest
luru poate fi ontrolat prin omanda ,44 bac%&round)position' 4#nt aeptate dou% valori3
#n prima po&i(ie poate fi3 top" center" bottom" percenta&e sau pi4el
#n a doua po&i(ie poate fi3 ri&#t" center" left" percenta&e sau pi4el
-xemplu3 imaginea de fundal este asoiat% eti!etei *ACK fiind amplasat% top $i enter" f%r%
repetare
<html>
<head>
<!**
body XbacAground*image0 urlVimg..>pgWN
bacAground*repeat0 no*repeatN
bacAground*position0 top centerNY
**>
</style>
</head>
<body>
Te5t normal
</body>
</html>
*.11. ;tilui p#ntu li-t#
list5style5type
Bolosind eti!eta ol din HTML re%m liste ordonate sau numerotate' <d%ug#nd omen&i ,44 #n
&ona H-<C putem ad%uga pe l#ng% numere $i ifre sau alte simboluri' *ro:serul /etsape nu
permite asoierea omen&ilor ,44 de#t pentru eti!eta li'
4intaxa este3
<!**
li Xlist*style*type0 6aloareNY
**>
</style>
valoarea poate fi3
21
Po'a(a# W#)
-aloare descriere
dis dis
irle er
scuare p%trat
deimal numere #ntregi
lo:er+roman numere romane" aratere mii (i" ii" iii" iv)
upper+roman numere romane" aratere mari ()" ))" )))" )O)
upper+alp!a litere mari (<" *" ," C)
lo:er+alp!a litere mii (a" b" " d)
none nimi
-xemplu3 lista ordonat% folosind maraje u litere mii
<html>
<head>
<!**
li Xlist*style*type0 lo1er*alphaNY
**>
</style>
</head>
<body>
/ecesar materiale0
<ol>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ol>
</body>
</html>
list5style5image
9n afara simbolurilor de maraj prestabilite unosute de bro:ser pot fi folosite $i imagini prin
omanda ,44 list)st$le)ima&e' )maginile s#nt introduse prin adresa url<='
-xemplu3 lista ordonat% folosind a maraj imaginea punct.&if
<html>
<head>
<!**
li Xlist*style*image0 urlVpunct.gi4WNY
**>
</style>
</head>
<body>
/ecesar materiale0
<ul>
<li>caramida</li>
<li>ciment</li>
17
Capitolul 3
<li>ipsos</li>
</ul>
</body>
</html>
*.1*. C7#na# &i (a'ini
Bieare element HTML poate fi #n(eles a o aset% dreptung!iular% (box)" iar toate utiile au
aeea$i strutur%3 @:idt!@" @padding@" @border@ $i @margin@'
marginea (mar&in) este spa(iul exterior !enarului p#n% la elelalte elemente
chenarul (border) este o bordur% are #nonjoar% elementul
completarea (paddin&) stabile$te distan(a dintre on(inut $i !enar
coninutul inlude informa(ia util% (text" tabele" imagini" formulare et')
Ariginea elementului este onsiderat ol(ul din dreapta sus fa(% de are se vor raporta toate
dimensiunile pre&entate #n ontinuare'
"omeniul de coninut 06idth i height1
Bieare element are o l%(ime (:idt!)' Ca% aeasta nu a fost definit%" #n a&ul elementelor de tip
blok" box+ul este at#t de lat #t trebuie s% fie" dei #t on(inutul box+ului' L%(imea $i #n%l(imea
unui element s#nt stabilite #n HTML prin atributele widt# $i #ei&#t' <este atribute pot fi
ad%ugate sau suprasrise prin omen&i ,44'
-xemplu3 folosind omen&i ,44 modifi%m dimensiunile originale ale imaginii
<html>
<head>
10
Po'a(a# W#)
<!**
img X1idth0 :-p5N height0 .--p5NY
**>
</style>
</head>
<body>
<img src@)margini.gi4)>
</body>
</html>
"istana interioar 0padding i margin1
9ntre on(inut $i marginea box+ului se afl% distan(a interioar% (padding)' paddin& stabile$te
distan(a dintre obiet $i !enar simultan pentru toate laturile' Ce asemenea" paddin& preia
uloarea de fundal a doumentului on(inut' Cistan(ele pot fi stabilite $i individual folosind
paddin&)top" paddin&)bottom" paddin&)left sau paddin&)ri&#t'
mar&in stabile$te distan(a dintre !enar $i elelalte obiete din pagin% simultan pentru toate
laturile' Cistan(ele pot fi stabilite $i individual folosind mar&in)top" mar&in)bottom" mar&in)left
sau mar&in)ri&#t'
Oalorile pentru paddin& $i mar&in pot fi exprimate #n3 p4 (pixeli)" in (ini)" pt (punte) sau cm
(entimetri)'
-xemplu3 folosind omen&i ,44 imaginea este po&i(ionat% la 077px fa(% de latura st#ng% $i la
6Qpx fa(% de latura de sus
<html>
<head>
<!**
img Xmargin*le4t0 .--p5N margin*top0 9:p5NY
**>
</style>
</head>
<body>
<img src@)margini.gi4)>
</body>
</html>
Marginea 0+order1
9n jurul @padding@ se setea&% !enarul (border)" are pentru toate patru laturi poate avea o l%(ime
(:idt!)" uloare (olor) $i style (t%iat" puntat" liniat et') diferite' /etsape $i )nternet -xplorer
afi$ea&% diferit !enarele' ,omanda ,44 pentru definirea !enarului este border av#nd
propriet%(ile asoiate widt#" st$le $i color' >entru a fi siguri % aeste propriet%(i fun(ionea&%
16
Capitolul 3
at#t #n )nternet -xplorer" #t $i #n /etsape trebuie s% delar%m pentru border el pu(in widt# $i
st$le'
border)widt# + stabile$te grosimea !enarului $i poate fi exprimat% #n px (pixeli)" pt (punte)"
m (entimetri) sau in (ini)'
border)st$le + stabile$te tipul !enarului $i poate fi dotted" das#ed" solid" double" &roove" rid&e"
inset $i outset'
border)color + stabile$te uloarea !enarului $i poate fi exprimat% prin valoare !exa&eimal% sau
#n uvinte'
-xemplu3 definim nou% lase utili&#nd propriet%(ile border)widt#, border)st$le $i border)color
<html>
<head>
<!**
.clasa. Xborder*1idth0 9p5N border*style0 dottedN border*color0 redNY
.clasa9 Xborder*1idth0 +p5N border*style0 dashedN border*color0 blueNY
.clasa+ Xborder*1idth0 9p5N border*style0 solidN border*color0 greenNY
.clasa, Xborder*1idth0 +p5N border*style0 doubleN
border*color0 blacANY
.clasa: Xborder*1idth0 9p5N border*style0 groo6eN
border*color0 sil6erNY
.clasa; Xborder*1idth0 +p5N border*style0 ridgeN border*color0 limeNY
.clasaH Xborder*1idth0 9p5N border*style0 insetN
border*color0 yello1NY
.clasaI Xborder*1idth0 +p5N border*style0 outsetN border*color0 aZuaNY
.clasaT Xborder*1idth0 9p5N border*style0 hiddenN
border*color0 oli6eNY
**>
</style>
</head>
<body>
<di6 class@)clasa.)>border*1idth0 9p5N border*style0 dottedN
border*color0 redN</di6><br>
<di6 class@)clasa9)>border*1idth0 +p5N border*style0 dashedN
border*color0 blueN</di6><br>
<di6 class@)clasa+)>border*1idth0 9p5N border*style0 solidN
border*color0 greenN</di6><br>
<di6 class@)clasa,)>border*1idth0 +p5N border*style0 doubleN
border*color0 blacAN</di6><br>
<di6 class@)clasa:)>border*1idth0 9p5N border*style0 groo6eN
border*color0 sil6erN</di6><br>
<di6 class@)clasa;)>border*1idth0 +p5N border*style0 ridgeN
border*color0 limeN</di6><br>
<di6 class@)clasaH)>border*1idth0 9p5N border*style0 insetN
border*color0 yello1N</di6><br>
<di6 class@)clasaI)>border*1idth0 +p5N border*style0 outsetN
border*color0 aZuaN</di6><br>
<di6 class@)clasaT)>border*1idth0 9p5N border*style0 hiddenN
15
Po'a(a# W#)
border*color0 oli6eN</di6>
</body>
</html>
Marginea exterioar 0margin1
Bieare box are $i o distan(% exterioar% (margin) p#n% la elelalte elemente" are preia uloarea
de fundal a elementului #nonjur%tor'
Modelul box serve$te pentru formatarea distan(elor #n $i #ntre box+urile unei pagini :eb $i este
extrem de diversifiat'
*.13. PoAi4iona#a o)i#"t#lo
>o&i(ionarea permite a$e&area unui obiet #ntr+un anume lo folosind oordonatele' Totodat%"
obietele pot fi po&i(ionate pe straturi diferite" unul deasupra eluilalt'
<t#t po&i(ionarea absolut% (<*4ALUT-)" #t $i ea relativ% (.-L<T)O-) foloses propriet%(ile
L-BT $i TA> exprimate #n px (pixeli)" in (ini)" pt (punte)" ems" proentaje sau m
(entimetri)'
=oziionarea a+solut plasea&% obietul #n pagin% exat #n loa(ia dat% de left $i top' <stfel
poate fi reat un element liber fa(% de elelalte din pagin%' Abietul poate fi orie" de exemplu
text sau imagine'
-xemplu3 apli%m po&i(ionarea absolut% eti!etei #>
<html>
<head>
</head>
<body>
<h, style@)position0 absoluteN le4t0 :-p5N top0 :-p5)>Te5t .</h,>
<h, style@)position0 absoluteN le4t0 .--p5N top0 9--p5)>Te5t 9</h,>
</body>
</html>
=oziionarea relati- este po&i(ia normal% pe are o oup% un element" dup% elementele
anterioare $i #naintea elor urm%toare' >oate fi deplasat fa(% de aeast% po&i(ie folosind
propriet%(ile left $i top'
-xemplu3 folosim dou% obiete + unul po&i(ionat absolut" el%lalt po&i(ionat relativ
<html>
<head>
<!**
.absolut Xposition0 absoluteN le4t0 9--p5N top0 .:-p5NY
.relati6 Xposition0 relati6eN le4t0 :-p5N top0 :-p5NY
**>
</style>
</head>
18
Capitolul 3
<body>
<di6 class@)absolut)>!o8itionare absolutaF independent de celelalte
obiecte din pagina</di6>
Te5t
<di6 class@)relati6)>!o8itionare relati6aF dupa )Te5t)</di6>
</body>
</html>
=oziionarea tridimensional
-lementele s#nt po&i(ionate pe eran pe o suprafa(% bidimensional%" dar pot fi a$e&ate $i unul
deasupra eluilalt" #ntr+o stiv% utili&#nd un indiativ (index+&) #nep#nd u 7" urm%torul 0 $i tot
a$a #n ontinuare' -lementul u indexul el mai mare este a$e&at deasupra'
-xemplu3
<html>
<head>
<!**
.element. Xposition0 absoluteN le4t0 +-p5N top0 +-p5N 8*inde50 +Y
.element9 Xposition0 absoluteN le4t0 :-p5N top0 :-p5N 8*inde50 9Y
.element+ Xposition0 absoluteN le4t0 H-p5N top0 H-p5N 8*inde50 .Y
**>
</style>
</head>
<body>
<di6 class@)element.)><img src@)img..>pg)></di6>
<di6 class@)element9)><img src@)img9.>pg)></di6>
<di6 class@)element+)><img src@)img+.>pg)></di6>
</body>
</html>
1Q
Po'a(a# W#)
3. LIMBAJUL JA/A;CRIPT
3.1. 8o4iuni !# )aA:
Yavasript este un limbaj de programare simplu" de tip sript" pentru definirea omportamentului
elementelor dintr+o pagina Web" are v% permite s% oferi(i paginilor dumneavoastr% un arater
mai dinami $i interativ'
,omen&ile Yava4ript s#nt inluse #n pagina Web" #mpreun% u textul $i marajele are formea&%
on(inutul aesteia $i s#nt interpretate de %tre bro:ser' /u toate bro:serele s#nt apabile s%
exeute omen&ile Yava4ript' ,omen&ile fiind exeutate #n adrul bro:serului" din Yava4ript
nu pot fi aesate alte resurse ale alulatorului' <stfel nu se poate modifia sau sana
on(inutul disului'
Yava4ript este un limbaj ba&at pe obiete $i evenimente are permite extinderea apait%(ilor
limbajului HTML' -l nu este g#ndit s% permit% rearea de clase noi sau extinderea propriet%(ilor
elor existente" a #n a&ul limbajelor #n are se programea&% pe obiete" i doar s% permit%
apelul metodelor speifie unor obiete predefinite (on(inute #n pagina Web sau apar(in#nd
bro:serului)'
Yava4ript este un limbaj #n are programarea se fae pe evenimente' A fun(ie este lansat% #n
exeu(ie #n mod automat" la apari(ia evenimentului de are este legat%' -venimentele are pot
delan$a exeu(ia unei fun(ii s#nt3 ap%sarea butonului mouse+ului sau deplasarea aestuia"
#n%rarea paginii" ap%sarea unui buton de tip submit dintr+un formular et'
Yava4ript nu este Yava' Limbajul Yava" de&voltat de 4un Mirosystems" este un limbaj pentru
pro&ramare orientat pe obiecte (are permite dei onstru(ia de lase) destinat reali&%rii de
aplia(ii de sine st%t%toare' Yava4ript a fost de&voltat de /etsape pentru a #mbun%t%(i fun(iile
paginilor Web' ) s+a dat numele ?ava4ript pentru a+i asigura o rapid% re$tere a popularit%(ii'
,#nd Mirosoft a v%&ut % limbajul Yava4ript devenea popular" a preferat s%+$i onstruias% un
limbaj propriu" foarte similar u limbajul Yava4ript" dar nu !iar identi" denumit Y4ript'
Yava4ript este un limbaj interpretat" dar interpretorul este inlus #n bro:ser' ,odul surs% poate
fi inlus #n pagina Web sau poate fi pus #ntr+un fi$ier separat are este referit din pagin%'
-xist% un num%r impresionant de sripturi gata de utili&are" are se pot integra u u$urin(% #n
odul surs% al doumentelor dumneavoastr%'
4ripturile Yava4ript s#nt inluse #ntr+un doument HTML prin intermediul eti!etei ontainer
F4,.)>TG sau prin intermediul proedurilor eveniment' >entru a evita afi$area #n pagin% a
odului sriptului de bro:serele are nu suport% sripturi" se obi$nuie$te a sriptul s% fie inlus
#ntre eti!etele de omentariu'
1?
Capitolul 3
4ripturile pot fi inserate diret #n doumentul HTML sau pot fi stoate #n fi$iere externe are
s#nt apelate #n doumentul respetiv'
,u ajutorul sripturilor Yava4ript se pot reali&a sarini diverse" um ar fi rearea ferestrelor
pop+up" afi$area datei urente #n pagin%" validarea formularelor $i altele'
3.*. Cu( poat# %i in"lu- un -"ipt $n pa'in:
4ripturile Yava4ript pot fi inluse #n pagina Web #n dou% moduri3
prin intermediul eti!etei (!28;=T) (9!28;=T)
prin intermediul unei proceduri e-eniment
)at% un exemplu foarte simplu #n are #n doument este inlus un sript are afi$ea&% #n pagin%
textul @*una &iuaS@ prin intermediul eti!etei F4,.)>TG3
<#T$%>
<#"AD>
<T(T%">>a6ascript.</T(T%">
</#"AD>
<'OD>
<#.>!rimul e5emplu \a6aCcript</#.><#2>
<CC2(!T language@)\a6aCcript)>
document.1riteV)'una 8iua!)W
</CC2(!T>
</'OD>
</#T$%>
Unul dintre atributele eti!etei F4,.)>TG este language" prin are este speifiat limbajul #n
are este sris sriptul" #n a&ul aesta valoarea atributului fiind @Yava4ript@'
A alt% modalitate de a inlude un sript #n pagin% este salvarea aestuia a un fi$ier extern $i
apelarea sa prin intermediul atributului sr al eti!etei F4,.)>TG'
9n exemplele de sripturi are vor urma ve(i observa diverse moduri #n are pot fi inluse #n
paginile Web sripturi Yava4ript'
/u vom intra #n am%nunte privind sintaxa limbajului" deoaree aeasta dep%$e$te subietul
aestei %r(i' Totu$i" pentru a putea folosi judiios un sript Yava4ript trebuie s% ave(i o
repre&entare despre elementele esen(iale u are lurea&% Yava4ript" obietele $i evenimentele'
4riptul este inadrat de marajele (script)...(9script) si totul este inglobat #ntr+un omentariu"
astfel #n#t programele de navigare are nu interpretea&% Yavasript nu s#nt derutate de sriptul #n
sine'
Marajul FscriptG poate fi plasat #n se(iunea F#eadG" #n se(iunea Fbod$G sau #n ambele' Ca%
el figurea&% #n se(iunea F#eadG" toate liniile de od are se pot exeuta se vor exeuta #naintea
afi$%rii on(inutului paginii uprins #n se(iunea Fbod$G' -ventualele fun(ii legate de
evenimente are se vor produe ulterior nu vor fi exeutate" dar vor fi disponibile'
1J
Po'a(a# W#)
Ca% marajele FscriptG apar #n se(iunea Fbod$G" ele permit o reare dinami% a unei p%r(i din
pagin%' -xemplul pre&entat poate fi ameliorat plas#nd odul are afi$ea&% data #n se(iunea
FbodyG3
<#T$%>
<#"AD></#"AD>
<'OD>
<#.>"5emplu de script in \a6aCcript</#.>
(n continuare as 6rea sa 6a sugere8 ce ati mai putea 4ace a8iF
<script language@>a6ascript>
a8i @ ne1 DateVW
document.1riteVa8i.getDateVW])*)]a8i.get$onthVW])*)]a8i.getearVWW
</script>F dacMatildeN a6eti ce6a timp liber.
DacMatildeN nuF MicircNnseamnMatildeN cMatildeN
<script language@>a6ascript>
document.1riteVa8i.getDateVW])*)]a8i.get$onthVW])*)]a8i.getearVWW
</script> este o 8i grea pentru D6.
</'OD>
</#T$%>
.e&ultatul aestui od #n bro:serul )nternet -xplorer v ?'73
3.3. Mo!ul !# #?#"u4i# a -"iptului
4ripturile integrate #n adrul paginilor s#nt evaluate dup% e #n%rarea paginii s+a #n!eiat dar
#nainte a aeasta s% fie afi$at%' >e de alt% parte" sripturile stoate a fi$iere separate s#nt
evaluate #naintea tuturor sripturilor in)line (adi%" a elor inluse #n pagin%)' Bun(iile definite
#n adrul sripturilor nu s#nt exeutate automat la #n%rarea paginilor" i abia atuni #nd
aestea s#nt apelate" fie prin eti!eta F4,.)>TG" fie printr+o proedur% eveniment'
Ca% a(i v%&ut vreodat% un sript Yava4ript #ntr+o pagin% Web" poate a(i remarat un luru
aparent iudat3 #ntregul sript este inlus #ntre eti!etele HTML de omentariu3
<!** comentariu **>
Motivul este faptul % exist% bro:sere are nu reunos $i nu pot exeuta sripturile Yava4ript'
Ca% un doument Web are on(ine od Yava4ript este #n%rat #ntr+un asemenea bro:ser" #n
lo a sriptul s% fie exeutat" este afi$at #n pagin% #ntregul od" eea e nu este de dorit' Cup%
um $ti(i" omentariile s#nt ignorate de bro:ser" astfel % inluderea odului Yava4ript #ntre
eti!etele de omentariu va due la ignorarea aestei p%r(i a doumentului' -xep(ie fa
12
Capitolul 3
bro:serele are reunos Yava4ript $i are vor identifia pre&en(a Yava4ript $i vor exeuta
sriptul'
9n onlu&ie" maniera reomandat% pentru introduerea #n pagin% a unui sript este urm%toarea3
<! * *
Cod \a6aCcript
// * *>
</CC2(!T>
3.+. C# put#( %a"# "u JaCa;"ipt
Yava4ript v% permite s% rea(i o interfa(% ativ% u utili&atorul" s% dea o impresie vi&ual%
pl%ut% #n timp e naviga(i prin paginile site+ului' >ute(i verifia validitatea informa(iilor
introduse #ntr+un formular #nainte a datele s% fie trimise %tre server' >ute(i fae alule
matematie" rea pagini HTML dinamie" personali&ate #n fun(ie de op(iunile utili&atorului sau
ale bro:serului' Yava4ript ontrolea&% bro:serul" $i prin intermediul sripturilor pute(i
des!ide ferestre noi" pute(i afi$a mesaje de averti&are $i pute(i pune mesaje #n bara de stare a
ferestrei bro:serului' >ute(i genera easuri" alendare $i doumente u timpul #nsris' >ute(i
!iar verifia pre&en(a plug+in+urilor #n bro:ser $i pute(i redireta utili&atorul spre o pagin%
diferit% #n a&ul #n are bro:serul nu are un anumit plug+in'
A men(iune important%3 programele are rulea&% pe alulatorul utili&atorului s#nt numite
aplia(ii lient+side (aflate pe partea de lient) $i programele are rulea&a pe server s#nt numite
aplia(ii server+side (aflate pe partea de server)
Ceoaree Yava4ript rulea&% pe alulatorul dumneavoastra" i+au fost impuse o serie de limit%ri"
majoritatea din ra(iuni de seuritate" $i anume3
+ nu permite itirea sau srierea de fi$iere pe alulatorul utili&atorului' 4ingura exep(ie
este permisiunea de a srie #n diretorul de ookie+uri al bro:serului" dar $i aii s#nt
anumite limiteX
+ nu permite itireaHsrierea de fisiere pe server' <lternativa este s% rula(i pe server un
program are s% preia datele trimise de sript $i s% le srie pe server (un ,L)" sris #ntr+
un limbaj preum >erl sau >H>" sau un program YavaX
+ un sript Yava4ript nu poate #n!ide o fereastr% de bro:ser are nu a fost des!is% de
el' <stfel se evit% situa(ia #nd intra(i pe un site $i vi se #n!id elelalte ferestre ative
are on(in alte site+uri X
+ nu poate iti informa(ii dintr+un bro:ser are on(ine o pagin% Web de pe un alt server"
a s% nu pute(i afla pe e site+uri navigea&% utili&atorul'
>entru a rula sripturi onepute #n limbajul Yava4ript" avem nevoie de un bro:ser are suport%
Yava4ript'
11
Po'a(a# W#)
3.5. O)i#"t#
Yava4ript este un limbaj ba&at pe obiecte' Un obiet este un luru are are o serie de propriet%(i'
A mas%" un alulator $i o biilet% s#nt toate obiete ale lumii fi&ie' >entru Yava4ript"
obietele s#nt entit%(ile prin intermediul %rora utili&atorul intera(ionea&% u bro:serele :eb"
preum ferestrele $i formularele" !iar $i elementele formularelor" um ar fi butoanele $i
asetele de bifare'
Abietele" la r#ndul lor" au anumite propriet@i' ,alulatorul are tastatur%" biileta are ro(i et'
9n Yava4ript" o fereastr% are un titlu" un formular poate avea o aset% de validare et'
Modifiarea unei propriet%(i a obietului poate modifia obietul" iar o aeea$i proprietate poate
fi apliat% unor obiete diferite (un exemplu din via(a real% este aparatul foto3 singur + este doar
un obiet" ad%ugat la un telefon + devine alt obiet u ambele propriet%(i +aeea de telefon $i
amer% foto #norporat%" iar da% la telefon adaug%m $i un alulator" ob(inem un telefon smart"
are are toate ele trei propriet%(i de la fieare obiet #n parte)' Tastatura alulatorului $i ro(ile
biiletei nu s#nt singurele lor propriet%(i' -le s#nt" la randul lor" obiete" are pot avea $i ele
propriet%(i (roata on(ine spi(e" are s#nt de asemenea obiete)' <stfel" obietele pot on(ine
subobiete'
<(iunile pe are obietele le pot reali&a poart% numele de metode' Telefoanele sun%"
alulatoarele se defetea&% $i biiletele merg' Abietele Yava4ript au $i ele metode3 butoanele
se apas% + clic%<=" ferestrele se des!id + open<=" iar textul poate fi seletat + selected<='
>arante&ele ne anun(% % avem de+a fae u o metod%" nu u o proprietate'
>utem grupa obietele" propriet%(ile $i metodele pentru a ob(ine o desriere mai bun% a unui
obiet sau pentru a desrie un proes' 9n Yava4ript" aestea s#nt separate de punte' 4intaxa
poart% numele de sintax% puntat%' )at% exemple de obiete $i propriet%(ile lor3
bicicleta.roti
calculator.unitate_de_stocare.disketa
document.imagine.nume
fereastra.stare
)at% $i #teva exemple de obiete $i metode srise #n sintaxa puntat%3
document.scrie()
formular.elemente.buton_radio.click()
>entru a exemplifia aeste onepte" s% presupunem % dorim s% onstruim un obiet are s%
repre&inte o arte de vi&it%" pe are #l vom numi Card' <est obiet va avea urm%toarele
propriet%(i3
+ nume
+ adres%
+ telefon'
>entru a defini un obiet" se folose$te o fun(ie numit% constructor' 9n exemplul nostru" fun(ia
onstrutor a obietului Card va arata astfel3
4unction CardVnumF adrF telW
X
077
Capitolul 3
this.nume@numN
this.adresa@adrN
this.tele4on@telN
Y
9n aest moment" onstrutorul obietului Card #n% nu este omplet" el on(ine numai
propriet%(ile obietului'
<um s% onstruim $i o metod% are s% lure&e u aest obiet' Ceoaree dorim s% tip%rim
%r(ile de vi&it% pe are le vom reali&a u ajutorul aestui obiet" vom rea o fun(ie are va
tip%ri propriet%(ile obietului" numit% ArintCard<='
4unction !rintCardVW
X
document.1riteV)/umele0 )F this.numeF )Qn)WN
document.1riteV)Adresa0 )F this.adresaF )Qn)WN
document.1riteV)Tele4onul0 )F this.tele4onF )Qn)WN
Y
<um putem srie defini(ia omplet% a obietului nostru3
X
this.nume@numN
this.adresa@adrN
this.tele4on@telN
this.!rintCard@!rintCardN
Y
4% treem" aum" la folosirea unui obiet' >entru a rea un obiet onret" adi% o instan(% a
obietului Card" se folose$te uv#ntul+!eie ne:' Urm%toarea instru(iune onstruie$te o
instan(% a obietului Card" are se nume$te ana3
ana@ne1 Card V)Ana $unteanu)F )Ctr. TeilorF nr.9F Chisinau)F )H;9+,:)W
Adat% e a fost reat% o nou% instan(% a obietului Card" metoda ArintCard poate fi folosit%
astfel3
ana.!rintCardVW
bi aum" s% punem toate aeste seven(e de od laolalt% $i s% folosim obietul #ntr+o pagin%
Web" pentru a afi$a mai multe %r(i de vi&it%3
<#T$%>
<#"AD>
<T(T%">>a6ascript9</T(T%">
4unction !rintCardVW
X
document.1riteV)<'>/umele0</'> )F this.numeF )<'2>)WN
document.1riteV)<'>Adresa0</'> )F this.adresaF )<'2>)WN
070
Po'a(a# W#)
document.1riteV)<'>Tele4onul0</'> )F this.tele4onF )<#2>)WN
Y
X
this.nume@numN
this.adresa@adrN
this.tele4on@telN
this.!rintCard@!rintCardN
Y
</CC2(!T>
</#"AD>
<'OD>
<#. align@)center)>Crearea obiectelor</#.>
<!>(nceputul scriptului<#2>
// Crearea a trei obiecte noi
ana@ne1 Card V)Ana $unteanu)F )Ctr. TeilorF nr.9F Chisinau)F )H;9+,:)W
ion@ne1 CardV)(on !opescu)F )Ctr. %i6e8ilorF nr..F Orhei)F ),;HIT)WN
radu@ne1 CardV)2adu %aso6ici)F )Ctr. (ndependenteiF nr.+F Coroca)F
)9.9-9)WN
// A4isarea lor
ana.!rintCardVWN
ion.!rintCardVWN
radu.!rintCardVWN
</CC2(!T>
<!>C4irsitul scriptului
</'OD>
</#T$%>
>ute(i observa modul #n are a fost inlus sriptul #n pagina Web' <stfel" defini(ia sriptului este
plasat% #n antetul doumentului HTML" iar apelul sriptului este f%ut #n orpul doumentului'
9n adrul sriptului apar dou% linii preedate de $irul de aratere @HH@' <esta este modul #n are
se introdu omentariile #n adrul sripturilor Yava4ript'
3.9. ;tu"tua i#a7i": a o)i#"t#lo JaCa-;"ipt
4ripturile reali&ate #n Yava4ript a(ionea&% asupra unui ansamblu de obiete on(inute #n
pagina Web sau apar(in#nd bro:serului' <(iunea va presupune apelul unor metode definite #n
aest sop pentru obietele respetive sau atribuirea unor valori membrilor+date ai obietelor'
Abietele are pot fi aesate pot fi definite prin strutura ierar!i% din figur%3
076
Capitolul 3
9n urm%toarea pagin% Web3
<html>
<body>
<head>
<title>!agina mea</title>
</head>
<body>
<a hre4@)http0//111.city.com/myc6/)>Totul despre mine</a>
<4orm>
<input type@)button) name@)'uton.)>
</4orm>
</body>
<html>
pot fi aesate obietele document, form $i 7uton* 3
document.title @ )!agina mea)
document.4orm
document.4orm.'uton.
,a $i #n alte limbaje orientate pe obiete" aesarea unei metode sau a unui membru+dat% din
omponen(a unui obiet se va fae printr+o onstru(ie de forma nume.metoda (sau nume.data)'
3.9.1. O)i#"tul 8aCi'ato
Abietul navigator are urm%toarele propriet%(i3
?umele proprietii !intaxa &fect
app/ame navigator'app/ame furni&ea&% numele navigatorului
appOersion navigator'appOersion furni&ea&% versiunea navigatorului
$i numele sistemului de operare
app,ode/ame navigator'app,ode/ame furni&ea&% un od are identifi%
fabriantul bro:serului
user<gent navigator'user<gent informa(ie are define$te
arateristiile bro:serului
-xemplu de sript3
<html>
<head>
<script language@)\a6aCcript)>
document.1riteVna6igator.app/ame])<br>)W
document.1riteVna6igator.appEersion])<br>)W
document.1riteVna6igator.appCode/ame])<br>)W
document.1riteVna6igator.userAgent])<br>)W
</script>
</head>
<body>
</body>
</html>
>entru )nternet -xplorer v'J'7" dup% #n%rarea paginii fereastra aplia(iei va afi$a3
075
Po'a(a# W#)
3.9.*. O)i#"tul lo"ation
Abietul location este folosit pentru a ob(ine diferite p%r(i din adresa din )nternet a unui fi$ier
(U.L)' -l are urm%toarele propriet%(i3
+ location%protocol 5 define$te protoolul de omunia(ie u serverul (HTT>" BT> et)X
+ location%0ostname numele alulatorului de pe are s+a des%rat fi$ierulX
+ location%port num%rul portului folosit de bro:ser pentru onetare la )nternetX
+ location%pat0name alea pentru doumentul urentX
+ location%searc0 omen&i de %utare (cuery) on(inute #n U.L'
3.9.3. O)i#"t#l# "on4inut# $n %o(ula#
Abietele on(inute #n formulare s#nt uprinse #ntre marajele FformG FHformG'
Butoan#l#
7utoanele s#nt omponente ale unui formular neesare pentru a omanda exeutarea unor
a(iuni' *utoanele au dou% propriet%(i aesibile" nume (name) $i valoare (value)' Oaloarea
repre&int% eti!eta #nsris% pe buton" iar numele serve$te la speifiarea butonului #n adrul unui
sript' Cintr+un sript se poate modifia eti!eta #nsris% pe un buton printr+o instru(iune de
forma3
document.4orm.numeBbuton.6alue@)eticheta)
La definirea unui buton se poate prei&a o fun(ie are va fi apelat% #n a&ul a(ion%rii aestuia 3
<input type@)'&TTO/) 6alue@)Eeri4ica) OnClicA@)6eri4icVW)>
Bun(ia verific<= va fi plasat% #ntr+un sript on(inut #n se(iunea F#eadG $i poate reali&a
validarea unor valori o(inute #n #mpurile formularului' 8nClic% este numele evenimentului
are delan$ea&% apelul fun(iei verific<='
Ca-#ta !# Cali!a# 1C7#"6 )o?2
Cin Yava4ript este posibil% apturarea valorii unei asete de validare folosind o onstru(ie de
forma3
4ormular.numeBcaseta.6alue
Ca% valoarea furni&at% este @on@" aseta era validat%' Oaloarea poate fi modifiat%3
4ormular.casatorit.6alue@)on)
078
Capitolul 3
O)i#"t# a-"un-# 17i!!#n2
Abietele de tip #idden s#nt folosite pentru a transporta informa(ii #ntre pagini' Adat% u
trimiterea spre server a datelor on(inute #n #mpurile formularului" aesta prime$te $i
informa(iile on(inute #n #mpurile asunse' 4riptul asoiat formularului" are se rulea&% pe
server" poate inlude valorile on(inute #n #mpurile #idden #n pagina de r%spuns la on(inutul
reep(ionat" reali&#nd astfel un efet de onversa(ie sus(inut% #ntre site $i utili&atorul aestuia'
-xemplu3
<input type@)hidden) name@)plat4orm) 6alue@)na6igator.appEersion)>

Butoan# a!io
*utoanele radio s#nt $iruri de butoane av#nd proprietatea de a nu putea fi a(ionat la un moment
dat de#t unul'
Oalorile pot fi itite aes#nd proprietatea !eked are poate avea valorile false sau true'
*utoanele s#nt aesibile a elemente ale unui $ir' Ce exemplu" form.plataBCD este primul buton
din lista de butoane plata on(inut% #n formularul form'
-xemplu3
<html>
<head>
4unction scriuVW X
i4V4ormular.plata^-_.checAedW X
document.1riteV)primul buton <br>)WN
Y else X
i4V4ormular.plata^._.checAedW X
document.1riteV)al doilea buton <br>)WN
Y else X
document.1riteV)ultimul buton <br>)WN
Y
Y
Y
</script>
</head>
<body>
<h.>3ormular</h.>
<4orm name@)4ormular) method@)post) action@)act)>
!latesc cu0 <(/!&T T!"@radio /A$"@)plata) EA%&"@)6isa)
checAed><'>Card E(CA</'>
<(/!&T T!"@radio /A$"@)plata) EA%&"@)cec)><'>Cec</'>
<(/!&T T!"@radio /A$"@)plata) EA%&"@)mandat)><'>$andat postal</'>
<'2><'2>
<(/!&T T!"@button 6alue @)Eeri4ic!) onClicA@)scriuVW)>
</4orm>
</body>
</html>
07Q
Po'a(a# W#)
Butonul tip #-#t
<(ionarea unui buton tip reset are a efet $i $tergerea tuturor valorilor introduse #n #mpurile
unui formular' Cintr+un sript aela$i efet se ob(ine apel#nd metoda clic%<= definit% pentru un
astfel de ontrol3
numeB4ormular.numeBbutonBreset.clicA
O)i#"tul -#l#"t
A aset% de tip select serve$te la alegerea unei valori dintr+o list% de valori' Un sript Yava4ript
poate fie prelua valoarea seletat%" fie onstrui sau rearanja dinami op(iunile uprinse #n lista
ata$at% unui selet (da% op(iunile anterior seletate ondu la aest luru)'
>entru preluarea valorii seletate se va folosi proprietatea seleted)ndex" %reia i se atribuie #n
mod automat" dup% seletarea unei op(iuni" o valoare #ntreag%'
-xemplu 3
<html>
<head>
4unction schimbVW X
i4V4ormular.select..selected(nde5@@.W X
document.1riteV)prima optiune <br>)WN
Y else X
i4V4ormular.select..selected(nde5@@9W X
document.1riteV)a doua optiune <br>)WN
Y else X
document.1riteV)ultima optiune <br>)WN
Y
Y
Y
</script>
</head>
<body>
<h.>3ormular</h.>
!latesc cu 0 <C"%"CT /A$"@)select.) onChange@)schimbVW)>
<O!T(O/ C"%"CT"D EA%&"@nimic>Valegeti 4ormaW
<O!T(O/ EA%&"@cec>Cec
<O!T(O/ EA%&"@card>Card Eisa sau $astercard
<O!T(O/ EA%&"@6irament>Ordin de plata
</C"%"CT>
</4orm>
</body>
</html>
<pelul fun(iei sc#imb<= se reali&ea&% la apari(ia evenimentului onC#an&e. >entru aeasta" #n
marajul select este on(inut atributul onC#an&e'
O)i#"tul -u)(it
Abietul submit delan$ea&% trimiterea %tre server a on(inutului #mpurilor unui formular'
>entru simplifiarea sriptului ,L) are reali&ea&% validarea valorilor introduse se poate reali&a
07?
Capitolul 3
o prim% verifiare folosind o fun(ie Yava4ript are va fi apelat% automat" la ap%sarea butonului
de tip submit'
-xemplu3
<#T$%>
<#"AD>
<T(T%">"5emplu de 6alidare</T(T%">
<CC2(!T %A/`&A`"@)\a6aCcript)>

<!**
4unction 6eri4VW X
6ar sir @ document.4ormular.6irsta.6alueN
6ar 6irsta @ parse(ntVsirWN
i4 V - < 6irsta MM 6irsta < .:- W X
returnV true WN
Y else X
alertV)6aloarea introdusa ) ] sir ] ) este eronata.)WN
returnV 4alse WN
Y
Y
<!** end script **>

</CC2(!T>
</#"AD>
<'OD>
<#2>
<3O2$ /A$"@)4ormular) $"T#OD@)post) ACT(O/@)mailto0anaJmail.md)
onCubmit@)6eri4VW)>
<!>Eirsta in ani0
<(/!&T T!"@)te5t) /A$"@)6irsta) EA%&"@)) C(a"@)+)></!>
<'2><(/!&T T!"@)submit) 6alue@)OA)>
</3O2$>
<#2>
</'OD>
</#T$%>
)ndiferent de valoarea returnat% de fun(ie (true sau false)" on(inutul formularului este trimis
spre server" de$i" onform doumenta(iei disponibile" #n a&ul #n are fin(ia verif<= returnea&%
false trimiterea ar trebui anulat%'
O)i#"tul t#?t
Abietul te4t serve$te la itirea unui $ir de aratere' >reluarea valorii unui astfel de ontrol se
reali&ea&% astfel3
6ar obiect@te5tBob>ect.6alue
"5emplu0
<html>
<head>
4unction scriuVW X
6ar ob>@4ormular.t5.6alue
i4Vob>.length > -W X
document.1riteVob>WN
07J
Po'a(a# W#)
Y else X
document.1riteV)!ai n*ati scris nimic!)WN
Y
Y
</script>
</head>
<body>
<h.>3ormular</h.>
<input type@te5t name@t5 si8e@.->
</4orm>
</body>
</html>
9n aest exemplu obE.len&t# furni&ea&% lungimea $irului de aratere obE'
A alt% posibilitate de a utili&a #ntr+un sript un ontrol de tip text este afi$area unei valoari pe
eran f%r% a des!ide o nou% fereastr% (a #n a&ul folosirii metodei document.write<=)'
-xemplu3
<html>
<head>
4unction scriuVW X
6ar ob>@4ormular.t5.6alue
i4Vob>.length > -W X
document.1riteVob>WN
Y else X
4ormular.t5.6alue@)/umele D6.)
Y
Y
</script>
</head>
<body>
<h.>3ormular</h.>
<input type@te5t name@t5 si8e@.- 6alue@)/umele D6.)>
</4orm>
</body>
</html>
Ca% $terge(i $irul $i a(iona(i butonul" $irul @/umele Cv'@ este resris #n #mpul ontrolului t4'
O)i#"tul t#?ta#a
,on(inutul unui obiet te4tarea poate fi testat $i generat dinami" a $i on(inutul unui ontrol
de tip te4t'
3.>. A""#-a#a o)i#"t#lo
Yava4ript organi&ea&a toate elementele unei pagini Web intr+o ierar!ie de obiete' >rati toate
elementele s#nt v%&ute a obiete' Bieare obiet are anumite propriet%(i $i metode prin are
poate fi manipulat' ,u ajutorul Yava4ript putem lura u u$urin(% u obietele omponente ale
072
Capitolul 3
unei pagini Web' >entru a putea fae aest luru este foarte important a #n(elege ierar!ia
obietelor HTML' Oom #n(elege mai bine meanismul de fun(ionare printr+un exemplu' ,odul
urm%tor este o pagin% HTML simpl%3
<html>
<head>
<title>!agina mea</title>
</head>
<body bgcolor@D444444>
<center>
<img border@)-) src@)../../images/searchBlogo.gi4) 1idth@)99:)
height@)I:)>
</center>
<p>
<center>
<4orm name@)3ormular)>
/ume0
<input type@)te5t) name@)nume) 6alue@))><br>
"*mail0
<input type@)te5t) name@)email) 6alue@))><br><br>
<input type@)button) 6alue@)Trimite) name@)Trimitere)
onClicA@)alertVbacti6are trimiterebW)>
</4orm>
</center>
</p>
<p>
<center>
<img border@)-) src@)../../images/linie.gi4) 1idth@)9-H)
height@)..)><br>
MnbspN</center>
</p>
<center>
<a hre4@)http0//111.a4aceri*online.net)>!agina demo</a>
</center>
</body>
</html>
;at o imagine a paginii (u #teva adnota(ii u uloarea ro$ie)3
071
Po'a(a# W#)
<vem dou% imagini (sigla $i bara de jos)" o leg%tur% (@>agina de #neput@) $i un formular u
dou% #mpuri text (/ume H -+mail)" respetiv un buton (Trimite)' Cin puntul de vedere al
meanismelor Yava4ript" fereastra bro:serului este un obiet window' <est obiet (fereastra
bro:ser asimilat% $i a fereastr% prinipal%) on(ine unele elemente a" de exemplu" bara de
stare (status bar) din partea ea mai de jos a ferestrei bro:serului' 9n interiorul ferestrei
prinipale putem #nar% un doument (pagina) HTML (sau un fisier de alt tip + ne vom limita
pentru moment la fi$iere de tip HTML)' <east% pagin% odat% #n%rat% este" a$adar" un obiet
document' <easta #nseamn% % obietul document este !iar pagina HTML #narat% la un
anumit moment #n bro:ser' Abietul document este un obiet foarte important #n Yava4ript + se
folose$te extrem de frevent' A proprietate a obietului document este" de exemplu" uloarea de
fundal a paginii' Mai important este faptul % toate obietele HTML s#nt propriet%(i ale
obietului document' Un obiet HTML este" spre exemplu" o leg%tur% sau un formular" a #n
a&ul ilustra(iei noastre'
7rmtoarea imagine arat% ierar!ia reat% de pagina noastr%3
"orim acum s o+inem informaii despre o+iecte i s manipulm aceste o+iecte.
>entru a putea fae aest luru trebuie s% putem aesa diferite obiete #n adrul ierar!iei' >utem
vedea numele obietelor #n imaginea de mai sus a ierar!iei' Ca% dorim s% adres%m prima
imagine din pagina HTML trebuie s% ne uit%m #n ierar!ie' Oom #nepe #ntotdeauna u nivelul
el mai de sus' >rimul obiet (nivelul 7) este denumit document' >rima imagine este
repre&entat% prin ima&esBCD" fiind situat% pe nivelul 0 (imediat inferior)' <easta #nseamn% %
putem aesa aest obiet partiular prin intermediul unui apel Yava4ript u ajutorul sintaxei3
document.images^-_
Ca%" de exemplu" dorim s% $tim e introdue utili&atorul #n al doilea #mp din formular" trebuie
s% aes%m aest obiet' Cin nou pornim din v#rful ierar!iei' Urm%rim alea p#n% la obietul
numit elementsB*D speifi#nd toate obietele intermediare pe m%sur% e le depa$im' <easta
#nseamn% % putem aesa primul element (elementsB*D) prin apelul3
document.4orms^-_.elements^._
007
Capitolul 3
>utem afla $i e text a fost introdusM Men(ion%m #n a&ul exemplului nostru faptul % #n
referin(e vom putea onstata % un element text are proprietatea value' @Oalue@ este prati
textul introdus #n elementul text' >utem iti aeast% valoare u ajutorul urm%toarei linii de od3
name@ document.4orms^-_.elements^._.6alueN
birul este #nmaga&inat #n variabila name' Ce aum #nolo putem lura u aeast% variabil%'
3.B. EC#ni(#nt#
9venimentele s#nt a(iuni efetuate de utili&ator #n timp e vi&itea&% pagina' Un eveniment este o
a(iune are survine la un moment dat $i #n urma %reia este delan$at% exeu(ia unei anumite
p%r(i din program' Ari de #te ori vi&itatorul fae lik pe o leg%tur%" de exemplu" #nd introdue
un text sau !iar #nd tree u mouse+ul deasupra unei &one a paginii" survine un eveniment la
are sriptul rea(ionea&% gener#nd un r%spuns'
Tipurile de e-enimente cu care lucreaz <a-a!cript*
&-eniment "escriere
onAbort
<pare #nd utili&atorul renun(% la #n%rarea unei
imagini
on'lur
<pare #nd un obiet din pagin% pierde fousul
(utili&atorul a p%r%sit obietul)
onChange
<pare #nd un #mp de editare este modifiat de
utili&ator (#nd se introdue un text)
onClicA
<pare #nd utili&atorul fae lik pe un element
on"rror
<pare #nd un doument sau o imagine nu se
#nar% oret (sriptul a #nt#mpinat o eroare)
on3ocus
<pare #nd un element prime$te fousul
(utili&atorul a ativat un obiet)
on%oad
<pare #nd o pagin% sau o imagine #$i termin%
#n%rarea
on$ouseO6er
<pare #nd ursorul mouse+ului se plimb%
deasupra unui element
on$ouseOut
<pare #nd ursorul mouse+ului p%r%se$te
elementul
onCelect
<pare #nd utili&atorul seletea&% un text
(on(inutul unui obiet)
onCubmit
<pare #nd este ap%sat un buton de tip 4ubmit
(utili&atorul a trimis un formular)
on&nload
<pare #nd utili&atorul p%r%se$te doumentul sau
sesiunea urent% (utili&atorul a p%r%sit fereastra)
000
Po'a(a# W#)
Cup% um vede(i" prin intermediul Yava4ript se poate r%spunde unui mare num%r de
evenimente' <est luru se reali&ea&% prin rearea unei proceduri eveniment <event !andlers +
rutinele de tratare a evenimentelor)'
>roedurile eveniment nu s#nt definite u ajutorul eti!etei F4,.)>TG" i s#nt atribute ale
elorlalte eti!ete' )at%" de exemplu" o leg%tur% are inlude o proedur% eveniment3
<A hre4@)http0//111.ama8on.com)
on$ouseO6er@)1indo1.status@cCea mai mare librarie 6irtualacN return trueN)>
ClicA aici</A>
Abserva(i % #ntreaga proedur% eveniment are r%spunde la evenimentul Mouse8ver este
inlus% #n eti!eta F<G' 4#nt speifiate dou% instru(iuni are se exeut% #n momentul #nd
ursorul mouse+ului este plasat deasupra leg%turii' >rima afi$ea&% un mesaj #n bara de status a
ferestrei" urm%toarea returnea&% valoarea true" pentru a #mpiedia $tergerea mesajului' Mai
observa(i % mesajul are va fi afi$at este delimitat de apostrofuri'
Ca% proedura eveniment este mai extins%" inluderea ei #n #ntregime #ntr+o eti!eta devine
neprati%' 9n aeast% situa(ie" este mai avantajos s% onstruim o fun(ie are s% trate&e
evenimentul'
Bun(ia este definit% #n se(iunea FH-<CG a doumentului" iar #n orpul doumentului este
apelat% a proedur% eveniment' Ce exemplu" s% presupunem % am onstruit o fun(ie
eveniment numit% Citeste<=' <tuni ea poate fi apelat% astfel3
<A hre4@)Dcuprins) on$ouseO6er@)CitesteVWN)>$ergi la Cuprins</A>
9n momentul #nd mouse+ul se afl% deasupra leg%turii" fun(ia este lansat% #n exeu(ie'
3.D. /aloi &i Caia)il#
9n limbajul Yava4ript orie form% de informa(ie este o valoare' Fariabilele on(in valori'
Limbajul Yava4ript (ine ont de majusule $i minusule' /umele variabilelor nu pot on(ine
spa(ii sau semne de puntua(ie $i nu pot #nepe u o ifr%' Ce asemenea" nu pot fi uvinte+!eie
ale limbajului Yava4ript'
-xemple de valori $i variabile3
numeleMeu = "Munteanu"
9n aest exemplu numeleMeu este variabila $i Munteanu este valoarea' -xist% mai multe tipuri
de valori3
Tip Descriere
/umr Con7ine orice 6aloare numeric
dir de caractere dir de caractere <ncadrate de ghilimele
'oolean 2eturnea8 ade6rat VtrueW sau 4als V4alseW
/ul orice 6ariabil 4r con7inutF 4r <n7eles
Obiect Orice 6aloare asociat unui obiect
3unc7ie Ealoarea returnat de o 4un7ie
Aperatorii s#nt simbolurile folosite #n lurul u variabilele' ,#nd da(i unei variabile o valoare"
atribui(i aea valoare variabilei $i folosi(i un operator de atribuire pentru a efetua a(iunea' ,u
006
Capitolul 3
exep(ia operatorului de egalitate" to(i eilal(i operatori de atribuire s#nt surt%turi de modifiare
a valorii unei variabile' Ce exemplu" o modalitate mai surt% de a spune 404G, este 4G0,.
Operator: Aciune:
5 ] y VnumericW adun 5 cu y
5 ] y V?ir de caractereW concaternea8 Vlipe?teW 5 cu y
5 * y scade y din 5
5 U y <nmul7e?te 5 cu y
5 / y <mparte pe 5 la y
5 L y modulul lui 5 ?i y Vrestul <mpr7irii lui 5
la yW
5]]F ]]5 adun 5 cu . Videntic cu 5 @ 5 ] .W
5**F **5 scade . din 5 Videntic cu 5 @ 5 * .W
*5 schimb semnul lui 5 Vde6ine negati6W
Ce$i at#t 4GG, #t $i GG4 #nrementea&% u o unitate valoarea lui x" opera(iile nu s#nt identieX
prima #l #nrementea&% pe x dup% e atribuirea a avut deja lo" iar ea de+a doua #nainte' Ce
exemplu" da% x are valoarea Q" $ 0 4GG va avea $ 0 H $i 4 0 I" #n timp e da% se fae $ 0 G
G4. se va ob(ine $ 0 4 0 I' Aperatorul minus funtionea&% similar' Ca% la adunarea a dou%
valori ombina(i numere u $iruri de aratere" re&ultatul final este un $ir de aratere' Ce
exemplu" re&ultatul adun%rii nume G J va re&ulta numeJ.
Atribuire Aciune
5 @ y <i d lui 5 6aloarea lui y
5 ]@ y identic cu 5 @ 5 ] y
5 *@ y identic cu 5 @ 5 * y
5 U@ y identic cu 5 @ 5 U y
5 /@ y identic cu 5 @ 5 / y
5 L@ y identic cu 5 @ 5 L y
Ca% dori(i s% ompara(i valoarea unei variabile u alt% variabil%" sau valoarea unei variabile u
o valoare literal%" pute(i fae asta #n modul urm%tor3
dataDeA8i @@ )>oi)
,#nd ompara(i $iruri de aratere" trebuie s% fi(i aten(i asupra faptului % @a@ este mai mare
de#t @<@" iar @ab@ mai mi de#t @bu@'
Comparare Aciune
5 @@ y returnea8 true Vade6ratW dac 5 ?i y s<nt egale
5 !@ y returnea8 true dac 5 ?i y nu s<nt egale
5 > y returnea8 true dac 5 este mai mare dec<t y
5 >@ y returnea8 true dac 5 este mai mare sau egal dec<t y
5 < y returnea8 true dac 5 este mai mic dec<t y
5 <@ y returnea8 true dac 5 este mai mic sau egal dec<t y
5 MM y returnea8 true dac at<t 5 ct ?i y s<nt ade6rate
5 ee y returneat true dac 5 sau y este ade6rat
!5 returnea8 true daca 5 este 4als
3.1,. R#'uli piCin! -"i##a "o!ului JaCa;"ipt
Yava4ript fae distin(ie #ntre literele mari $i mii' ,uvintele+!eie ale limbajului se sriu u
litere mii3
005
Po'a(a# W#)
breaA 4alse in this 6oid
continue 4or ne1 true 1hile
delete 4unction null typeo4 1ith
else i4 return 6ar

>e o linie pot fi srise mai multe instru(iuni" araterul PXP fiind folosit pentru a india sf#r$itul
fie%rei instru(iuni' Ca% instru(iunile s#nt srise pe linii separate" araterul PXP poate fi omis'
Yava4ript reunoa$te omentarii uprinse #ntre H\ \H" dar $i omentariile #n linie" folosind HH'
3.11. El#(#nt#l# !# )aA: al# li()a@ului
3.11.1. Lit#ali
9n Yava4ript literalii se sriu folosind onven(iile din ,3
-xemple3
.9+
*,9+
.9.,:;
*9.He*.9
*-.H;
-5.9A3
Ca% un num%r #nepe u 7" atuni este sris #n ba&a 2" iar da% #nepe u 7x sau 7N" atuni este
sris #n ba&a 0?' /umerele reale s#nt repre&entate" impliit" #n dubl% prei&ie'
birurile de aratere pot fi uprinse #ntre g!ilimele sau #ntre apostrofuri' <postroful existent
#ntr+un $ir uprins #ntre g!ilimele este interpretat a atare'
9n Yava4ript exist% doi literali folosi(i pentru valori logie3 false $i true
i4 VVconti @@ trueW ee V5 <@ bWW 5 ]@ pasN
9n Yava4ript exist% un literal speial" null" are se atribuie unei variabile pentru a india absen(a
unei valori'
3.11.*. I!#nti%i"atoi &i Caia)il#
/umele identifiatorilor respet% onven(iile din ,'
9n Yava4ript o variabil% poate s% fie delarat% sau nu' Celararea se fae folosind uv#ntul
re&ervat var' Tipul unei variabile se stabile$te automat" #n momentul #n are i se atribuie o
valoare3
6ar aF ObF pas@-..N
a@.9N Ob@).-)N
c@a]ObN // c nedeclarat <n prealabil
9n Yava4ript variabilele pot fi numerice (#ntregi sau reale)" de tip ir de caractere" de tip lo&ic
(av#nd valoarea false sau true) $i de tip null (null indi% lipsa unei valori)'
9n exemplul preedent c prime$te valoarea 66" Yava4ript interpret#nd $irul @07@ a num%r
#ntreg' Yava4ript #near% #ntotdeauna s% onverteas% valorile din expresii astfel #n#t
008
Capitolul 3
opera(iile s% aib% sens' <stfel @5@ \ @8@ este o expresie legal%" re&ultatul fiind valoarea #ntreag%
06" nu $irul @0Q@'
Do(#niul !# #?i-t#n4: al un#i Caia)il#
Comeniul de existen(% al unei variabile delarate #ntr+o fun(ie este aea fun(ie' Comeniul de
existen(% al unei variabile delarate #n afara ori%rei fun(ii este #ntregul fi$ier'
-xemplu 3
6ar a @ .-N
4unction !rima3unctieVW
X
6ar a @ :N
document.1riteVaWN
Y

4unction ADoua3unctieVW
X
document.1riteVaWN
Y
<pelul fun(iei !DouaKunctie va provoa srierea pe eran a num%rului 07 deoaree #n fun(ie
nu este delarat% o variabil% a" dei este utili&at% valoarea variabilei globale a'
3.11.3. E?p#-ii &i op#atoi
9n Yava4ript operatorii s#nt prati ei din limbajul , 3
aritmetii3 E 5 F 9 ] (operatorul modulo)
EE (pre sau post inrementare)" 55 (pre sau post derementare)
. E. 5. F. 9. (atribuire" atribuire ombinat% u o opera(ie)
G * (pentru atribuiri onditionate3 max I (a G b)Ma3b)
rela(ionali3 ( ) (. ). . . H. (se apli% $i $irurilor de aratere)
logii3 ZZ ($i) II (sau) H (not)
.egulile de folosire a operatorilor pentru $iruri de aratere se pot dedue din urm%toarele
exemple3
.9 ] 9 // Adunare. 2e8ultat0 .,.
).9) ] )9) // Concatenare. 2e8ultat0 ).99).
).) ] 9 // ConcatenareN 9 este con6ertit <n ?irul )9). 2e8ultat0 ).9).
.. < + // Comparare numeric. 2e8ultat0 4alse.
)..) < )+) // Comparare <ntre ?iruri. 2e8ultat0 true.
)..) < + // Comparare numericN )..) este con6ertit <n ... 2e8ultat0 4alse.
Aperatorul @_@ poate fi folosit u $iruri de aratere $i u numere" dar re&ultatul depinde de
ordinea srierii operan&ilor 3
p @ 9 ] + ] )pisici mici)N // p @ ): pisici mici)
t @ )numarul de pui0 ) ] . ] 9N // t @ )numarul de pui0 .9)
00Q
Po'a(a# W#)
Ca% primul operand este $ir de aratere" Yava4ript onverte$te restul literalilor #n $iruri de
aratere'
3.11.+. In-tu"4iuni
,a $i alte limbaje de programare" Yava4ript posed% un set omplet de instru(iuni are permit
transrierea unui algoritm'
if
)nstru(iunea if permite seletarea instru(iunii u are se va exeuta #n fun(ie de valoarea de
adev%r a unei expresii'
-xemple3
i4 Vcondi7ieW X
instruc7iuni pentru condi7ie@true
Y else X
instruc7iuni pentru condi7ie@4alse
Y
sau
i4 Vcondi7ieW X
instruc7iuni pentru condi7ie@true
Y
In-tu"4iuni !# "i"la#
=0ile
4intaxa instru(iunii w#ile este3
1hile Vcondi7ieW X
instruc7iuni
Y
,orpul ilului este exeutat at#ta timp #t ondi(ia este adev%rat%'
-xemplu3
6ar i @ .N
1hile Vi <@ :W X
document.1riteVi ] )<'2>)WN
i]]N
Y
</script>
>entru a reali&a un ilu infinit" din are se poate ie$i folosind o instru(iune @break@" se poate
srie3
1hile V.W X
instruc7iuni
Y
for
00?
Capitolul 3
>entru a reali&a o strutur% de od foarte frevent #nt#lnit%" de forma3
ini7iali8are
1hile Vcondi7ieW X
instruc7iuni
incrementare
Y
se folose$te instru(iunea for" av#nd sintaxa3
4or Vini7iali8areN condi7ieN incrementareW X
instruc7iuni
Y
-xemplul anterior poate fi resris astfel3
4or Vi @ .N i <@ :N i]]W X
document.1riteVi ] )<'2>)WN
Y
</script>
brea! i continue
>entru a #ntrerupe imediat exeu(ia unui ilu se folose$te instru(iunea brea%" iar pentru a relua
imediat un ilu ignor#nd liniile r%mase din orpul ilului se folose$te continue'
3.11.5. =un"4ii
Yava4ript permite definirea de subprograme (fun(ii) are grupea&% un num%r de instru(iuni e
reali&ea&% #mpreun% o anumit% fun(ie' Un astfel de subprogram se delar% folosind uv#ntul
re&ervat function 3
4unction numeVlistaW X
instruc7iuni
Y
>arante&ele de dup% numele fun(iei s#nt obligatorii" !iar da% lista este vid%'
-xemplul 03 4% se srie o fun(ie are afi$ea&% #n fereastra bro:serului tabla #nmul(irii u ?'
<html>
<body>
<#.>Tabla inmultirii cu ;</#.>
<br>
n@;N
4unction tablaVW X
4or Vi@.N i<@TN i]]W X
document.1riteVn ] ) 5 ) ] i ]) @ ) ] nUi ] )<'2>)WN
Y
Y
tablaVWN
</script>
</body>
</html>
00J
Po'a(a# W#)
-xemplul 63 4% se reali&e&e o pagin% Web are afi$ea&% tabla #nmul(irii u un num%r introdus
#ntr+o fereastr% afi$at% de un sript exeutat la #n%rarea unei pagini'
<html>
<head>
n@1indo1.promptV)(ntroduceti n0)F))WN
4unction tablaVW X
4or Vi@.N i<@TN i]]W X
document.1riteVn ] ) 5 ) ] i ] ) @ ) ] nUi ] )<'2>)WN
Y
Y
</script>
</head>
<body>
<#.>Tabla inmultirii cu
document.1riteVn ] )</#.><'2>)WN
tablaVWN
</script>
</body>
</html>
3.1*. C#a#a un#i %un"4ii $n JaCa;"ipt
A fun(ie este un set de instru(iuni Yava4ript are efetuea&% anumite sarini' Bun(iile s#nt
foarte des folosite #n odul Yava4ript'
Arie fun(ie are un nume u are poate fi apelat% #n sript' Bun(iile v% ajut%" de exemplu" #nd
ave(i nevoie de mai multe ori #n sript de o por(iune de od' Ce#t s% resrie(i aeea$i por(iune
de od de fieare dat% #nd ave(i nevoie de ea" pute(i srie de la #neput o fun(ie are inlude
aea por(iune de od $i astfel s% apela(i aea fun(ie de #te ori este nevoie'
A fun(ie se reea&% folosind uv#ntul+!eie @function@ urmat de numele fun(iei #mpreun% u
un set de parante&e' )nstru(iunile din interiorul fun(iei s#nt marate de aolade'
-xemplu3
function atentionare()
{
alert("Aceasta este un mesaj de alerta apelabil dintr-o functie Jaa!cript")"
#
<pelarea unei fun(ii se poate fae #n mai multe moduri' -xemplu3
$input t%pe="button" alue="Alerta" onclick="atentionare()""&
Uneori dori(i s% prelua(i ni$te informa(ii $i s% le trimite(i unei fun(ii pentru a fi proesate'
<east% a(iune se nume$te @pasarea@ informa(iei %tre fun(ie'
-xemplu3
function atentionare(mesaj)
{
alert(mesaj)"
#
002
Capitolul 3
)ar #n odul butonului HTML sriem3
$input t%pe="button" alue="Alerta"
onclick="atentionare('Ati apasat butonul de alerta')"" (&
Oariabila @mesaE@ din fun(ia de mai sus este un parametru al fun(iei' La apelarea fun(iei"
valoarea @<i ap%sat butonul de alert%@ este transferat% #n parametrul @mesaE@' >arametrii
fun(iilor pot fi orie tip de date pe are le dori(i transmise" fiind inluse $irurile de aratere"
numerele sau !iar alte obiete Yava4ript' )at% mai jos un alt exemplu #n are se folose$te
aeea$i fun(ie la 5 butoane diferite'
$input t%pe="button" alue="Mesaj )"
onclick="atentionare('*uton gresit')"" (&
$input t%pe="button" alue="Mesaj +"
onclick="atentionare('Asta e alt buton')"" (&
$input t%pe="button" alue="Mesaj ,"
onclick="atentionare('*ingoooo -.')"" (&
3.13. Lu"ul "u %un"4ii "a# #tun#aA: Caloi
9n afar% de fun(iile are exeut% a(iuni $i apoi revin la odul prinipal mai exist% $i fun(ii are
pot returna un re&ultat' 9n urm%torul exemplu se verifi% existen(a plug+in+ului [uikTime" iar
da% se g%se$te" fun(ia returnea&% valoarea true sau false #n a& ontrar3
<head>
<title>Test</title>
<script language@)\a6ascript) type@)te5t/>a6ascript)>
<!**
4unction a6emfTVW
X
4or Vi@-N i<na6igator.plugins.lengthN i]]W
X
i4 Vna6igator.pluginsî_.name.inde5O4V)fuicATime)W >@ -W
X
return trueN
Y
Y
return 4alseN
Y
**>
</script>
</head>
<body>
<!**
i4 Va6emfTW
X
document.1riteV)'ro1serul poate rula 4ilme in 4ormat mo6.)WN
Y
else
X
document.1riteV)'ro1serul nu are plug*in*ul fuicA Time instalat)WN
Y
//**>
001
Po'a(a# W#)
</script>
</body>
4e pot returna orie tip de valori" nu doar valori booleene'
3.1+. =olo-i#a )u"l#i !# tipul !oH<7il#
9n anumite situa(ii avem nevoie de o strutura repetitiv% #n ondi(iile #n are nu $tim de %te ori
se va fae num%rul de repeti(ii' 9n aeast% situa(ie se poate folosi bula de tipul do2w#ile
(e4ecut2atta timp ct)3 mai preis" exeut% a(iunile at#t timp #t o anumit% expresie este
adev%rat%'
-xemplul de mai jos foloseste o bul% #n are ne ere s% introduem numele $i nu se opre$te
p#n% nu prime$te un r%spuns3
<head>
<meta http*eZui6@)Content*Type) content@)te5t/htmlN charset@iso*II:T*.)/>
<title>test</title>
<script language@)>a6ascript) type@)te5t/>a6ascript)>
<!**
do
X
raspuns @ promptVbCcrie numele taubF bbW
Y
1hile V!raspunsW
X
alertVb'unaF b ] raspunsW
Y
//**>
</script>
</head>
4% expli%m pu(in aeast% por(iune de od3
do {
<east% linie mar!ea&% #neputul por(iuni de od do' Trebuie s% (ine(i ont % aeast% por(iune
de od se exeut% el pu(in odat%'
raspuns = prompt('!crie numele t/u'0 '')
9n aest a& se soliit% prin metoda prompt<= introduerea numelui'
12ile (3raspuns)
Oerifiarea introdus% dup% w#ile va produe repetarea por(iunii de od do at#ta timp #t testul nu
este #ndeplinit' 9n aest a& se verifi% da% variabila raspuns on(ine o valoare" iar da%
on(ine" se exeut% instru(iunile urm%toareX altfel se revine la bula do'
A idee de folosire a aestei struturi repetitive este #ndep%rtarea spa(iilor sau a araterelor
invalide din datele introduse de utili&ator'
067
Capitolul 3
3.15. UtiliAa#a in-tu"4iunilo -<it"7H"a-#
-xist% situa(ii #n are este nevoie de mai mult de dou% op(iuni" pentru % setul de instru(iuni
t#en $i else nu s#nt sufiiente" iar folosirea mai multor instru(iuni #mbriate if devine prea
ompliat%' 9n aest a& se poate folosi u sues bloul de instru(iuni switc#)case'
-xemplu3
<head>
<title>Test</title>
<!**
4unction atentionareVnumeBbutonW
X
s1itchVnumeBbuton.6alueW
X
case )$esa> .)0
alertV)'uton gresit)WN
breaAN
case )$esa> 9)0
alertV)Asta e alt buton)WN
breaAN
case )$esa> +)0
alertV)'ingooo 0D)WN
breaAN
de4ault0
alertV)Ce buton e astaK...)WN
Y
Y
//**>
</script>
</head>
<body>
<4orm action@)D)>
<input type@)button) 6alue@)$esa> .) onclicA@)atentionareVthisWN) />
<input type@)button) 6alue@)$esa> 9) onclicA@)atentionareVthisWN) />
<input type@)button) 6alue@)$esa> +) onclicA@)atentionareVthisWN) />
</4orm>
</body>
)nstru(iunea brea% se folose$te pentru a #ntrerupe ilul bulei' Ca% brea% lipseste"
interpretorul Yava4ript ar rula $i elelalte a&uri din interiorul bloului switc# p#n% la
terminarea instru(iunilor'
)nstru(iunea defaultL se pune pentru a preveni a&ul #n are nii una din a&urile anterioare nu
orespund $i #n aest a& se rulea&% instru(iunile default'
>rin utili&area expresiei @t#is@ majoritatea a(iunilor se pot petree #n &ona marat% FscriptG"
impatul asupra odului HTML fiind #t mai mi u putin(%'
Unei instru(iuni switc# #i pot fi pasate $i alte tipuri de valori" aestea nefiind limitate la $iruri de
aratere' 4e pot utili&a instru(iuni u valori numerie $i !iar evalu%ri de re&ultate matematie'
Ca% tipul de date este numeri" trebuie sris #n aest a& astfel3
case 4-
060
Po'a(a# W#)
9n lo de sirul de aratere
case "4"
(valorile numerie nu trebuie preedate de g!ilimele" altel vor fi interpretate a $iruri de
aratere)'
9n a&ul folosirii unui blo switc#)case #n interiorul unei fun(ii se poate folosi instru(iunea
return #n lo de brea% pentru a ie$i din bloul de od $i din fun(ie #n aela$i timp'
3.19. A%i&a#a (#-a@#lo $n JaCa;"ipt &i a!:u'a#a !# "o(#ntaii
4tipturile Yava4ript pot fi plasate at#t #n se(iunea dintre tagurile F!eadG $i FH!eadG (purt#nd
numele de sript de antet) #t $i #ntre tagurile FbodyG $i FHbodyG (purt#nd numele de sript de
orp)' -ste de preferat a sripturile are afi$ea&% mesaje sau on(inut #n pagin% s% fie introduse
#n bod$, iar sripturile are prelurea&% re&ultate $i fa verifi%ri s% fie introduse #n antet (#n
#ead)' 9n exemplul de mai jos va fi afi$at un mesaj generat dintrPun sript Yava4ript3
<!DOCT!" #T$% !&'%(C
)*//W+C//DTD #T$% ,.-. Transitional//"/) )http0//111.1+.org/T2/html,/loose.dtd)>
<html>
<head>
<meta http*eZui6@)Content*Type)
content@)te5t/htmlN charset@iso*II:T*.)>
<title>$esa> din \C</title>
</head>
<body>
<script language@)\a6aCcript) type@)te5t/>a6ascript)>
document.1riteV)Acesta este un mesa> din \a6aCcript)WN
</script>
</body>
</html>
Tagul de des!idere este -script urmat de atributul lan&ua&e01?ava(cript1 are indi%
bro:ser+ului limbajul de sriptare utili&at" iar atributul t$pe01te4t2Eavascript1 #l informea&% %
sriptul este strit #n format text" organi&at dup% sintaxa limbajului Yava4ript'
9n ontinuare document.write<1!cesta este un mesaE din ?ava(cript1= este prima linie de od
Yava4ript #n are este preluat% fereastra doument $i #n ea se afi$ea&% textul respetiv'
Urm%torul tag -2script/ este tagul de #n!idere are semnali&ea&% bro:serului terminarea
odului Yava4ript $i ontinuarea odului HTML'
4e pot introdue ori#te taguri #ntr+o pagin%" de #te ori dori(i' *ro:serele mai ve!i" $i !iar $i
unele noi nu unos limbajul Yava4ript' >e #nd ele noi se presupune % ignor% tagurile
neunosute lor" ele mai ve!i de obiei dau mesaje de eroare #n astfel de a&uri' -xist% o
te!ni% e poate s% p%%leas% ^bro:serele ve!i $i s% le fa% s% read% % sriptul este de fapt
un omentariu HTML;" are va fi ignorat' Un omentariu este un text #nadrat de taguri HTML
speialeX orie text uprins #ntre aeste taguri va fi ignorat de %tre bro:sere' >entru a asunde
odul Yava4ript de bro:serele ve!i proed%m astfel3
066
Capitolul 3
$3-- Aceasta linie este un comentariu
document.1rite("Acesta este un mesaj din Jaa!cript")"
(( Aici se 5nc2eie linia de comentariu pentru bro1serele ec2i --&
Linia are #nepe u HH este de fapt ombina(ia de marare a unui omentariu #n limbajul
Yava4ript" $i ea se termin% u ++G" semnal#nd sf#r$itul omentariului HTML' /oul exemplu este
pre&entat #n ontinuare3
<!DOCT!" #T$% !&'%(C )*//W+C//DTD #T$% ,.-. Transitional//"/)
)http0//111.1+.org/T2/html,/loose.dtd)>
<html>
<head>
<meta http*eZui6@)Content*Type) content@)te5t/htmlN charset@iso*II:T*
.)>
<title>$esa> din \C</title>
</head>
<body>
<script language@)\a6aCcript) type@)te5t/>a6ascript)>
<!**
document.1riteV)Acesta este un mesa> din \a6aCcript)WN
//**>
</script>
</body>
</html>
Ca% dori(i s% srie(i mai multe r#nduri de omentarii #n od (#n a&ul #n are ave(i r#nduri lungi
de od) pute(i folosi ombina(ia H\ $i \H
9n onlu&ie" pentru a srie un omentariu #n Yava4ript pe un singur r#nd pute(i folosi
ombina(ia HH" iar pentru a srie omentarii pe mai multe r#nduri folosi(i ombina(ia H\ la #neput
$i \H la sf#r$itul omentariului'
,ombina(ia FS++ $i ++G este #n HTML $i se folose$te de asemenea pentru omentarii (s% nu le
onfunda(i #ntre ele" ele din Yava4ript u ele din HTML)'
9n a&ul #n are bro:serul vi&itatorului nu are ativ Yava4ript" #l pute(i averti&a sau #l pute(i
redireta %tre o pagin% are nu on(ine Yava4ript folosind urm%torul tag HTML3
<noscript>
!entru a 6edea aceasta pagina bro1serul d6s. trebuie sa aiba acti6
\a6aCcript.
<meta http*eZui6@)re4resh) content@):N&2%@altaBpagina.html)>
Asteptati pentru redirectare catre o pagina 4ara \a6aCcript.
</noscript>
9n odul de mai sus" tagul FnosriptG este ativ doar da% bro:serul nu are ativ Yava4riptX #n
aest a& va afisa mesajul orespun&%tor'
Linia -meta #ttp)e'uiv01refres#1 content01HMN:L0altaOpa&ina.#tml1/ exeut% rediretarea
bro:serului %tre pagina speifiat% #n intervalul de Q seunde (pentru a da timp vi&itatorului s%
iteas% mesajul de averti&are)'
Ca% dori(i s% averti&a(i vi&itatorul #n leg%tur% u eva anume" o pute(i fae prin intermediul
odului Yava4ript astfel3
065
Po'a(a# W#)
alert("Aceasta este o fereastra de alertare")"
Bereastra de alert% este diferit% pentru fieare bro:ser #n parte" nu poate fi ustomi&at%'
3.1>. R#!i#"ta#a &i !#t#"ta#a tipului !# )o<-#
9n Yava4ript pute(i deteta tipul de bro:ser al vi&itatorului $i !iar $i versiunea de Yava4ript
pe are aesta o are instalat%' Ceasemeni" pute(i" #n fun(ie de situa(ie" s% redire(iona(i
vi&itatorii spre alte pagini' >entru a redire(iona un utili&ator folosi(i omanda de mai jos3
<script language@)\a6aCcript..:) type@)te5t/>a6ascript)>
1indo1.location@)paginaBnoua.html)N
</script>
<tributul lan&ua&e al tagului sript v% permite s% speifia(i versiunea minim% pe are trebuie
s% o aib% bro:serul pentru a s% poata rula sriptul' 9n exemplul de mai sus am speifiat
versiunea minim% 0'Q sau o versiune mai nou%' Ca% bro:serul nu are versiunea minim% #n
fereastra bro:serului va apare un mesaj asem%n%tor u el e urmea&%3
6ou 1on't get muc2 from t2is site using a bro1ser 1it2 an old ersion
of Jaa!cript -- 7 suggest t2at %ou upgrade no13
Urm%toarea linie3
1indo1.location="pagina_noua.2tml""
#i spune bro:serului s% #nare pagina speifiat% #n loul paginii urente' 4e poate speifia at#t
o ale relativ% la doumentul urent" #t $i o ale real%'
A pagin% poate on(ine sripturi are s% orespund% unor versiuni diferite ale limbajului" astfel
putem avea #n aeea$i pagin% sripturi are s% rule&e #nep#nd de la o anumit% versiune $i alte
sripturi are s% rule&e de la alte versiuni de Yava4ript' /u se poate speifia rularea sriptului
doar pentru o anumit% versiune de Yava4ript" de exemplu doar pentru versiunea 0'0' <tributul
lan&ua&e va aepta versiunea speifiat%" dar $i orie alt% versiune ulterioar% de Yava4ript'
Mai mult" unele bro:sere" #near% s% interprete&e odul din sriptul Yava4ript !iar da% nu
orespunde versiunea erut%'
<r trebui s% ave(i grij% a la srierea de od s% nu pune(i informa(ii esen(iale #n Yava4ript" astfel
a ei are nu au un bro:ser reent" sau bro:serul lor nu suport% Yava4ript" s% poata totu$i
vedea on(inutul paginii'
9n exemplul pre&entat anterior" rediretarea utili&atorului se fae #nd deja a fost #n%rat% o
bun% parte din pagina urent%' Metoda urm%toare pre&int% o alternativ% mai bun% pentru
redire(ionare" $i anume3 prin intermediul unui link3
<a hre4@)paginaB9.html)
onCliA@)1indo1.location@bpaginaBnoua.htmlbN return 4alseN)>
CliA aici</a>
068
Capitolul 3
,odul Yava4ript este inlus omplet #n tagul de leg%tur%' 9n a&ul #n are un vi&itator nu are
ativ Yava4ript $i d% lik pe link" se va #n%ra pagina pa.ina>&%0tml" iar da% are ativ
Yava4ript se va #n%ra pagina pa.ina>noua%0tml'
>or(iunea return false indi% oprirea proes%rii paginii $i astfel pagina orespun&%toare lui a
#ref nu mai este #n%rat%'
>entru detetarea tipului de bro:ser pute(i folosi a idee sriptul de mai jos3
<!**
i4 Vna6igator.app/ame @@ )$icroso4t (nternet "5plorer)W
X
document.1riteV)2ulati un bro1ser (nternet "5plorer)WN
Y
else
X
i4 Vna6igator.app/ame @@ )/etscape)W
X
document.1riteV)2ulati un bro1ser /etscape)WN
Y
else
X
document.1riteV)/u rulati /etscape sau (")WN
Y
Y
//**>
</script>
A alt% metod% de a afi$a diret numele de bro:ser este3
<!**
document.1riteV)/umele bro1serului este0 )]na6igator.app/ameWN
//**>
</script>
Multe bro:sere au posibilitatea de a evita detetarea numelui pre&ent#ndu+se inten(ionat drept
un alt bro:ser' >ute(i redire(iona vi&itatorii #n fun(ie de tipul de bro:ser pe are #l au" folosind
ideile $i explia(iile pre&entate #n aest ompartiment'
3.1B. D#-"7i!##a un#i %##-t# !# tip popHup la o a"4iun#
9n ontinuare pre&ent%m un od Yava4ript u ajutorul %ruia pute(i s% des!ide(i o pagin% nou%
de tip fereastr% pop)up' La #neput gener%m fun(ia are va des!ide fereastra $i va srie
mesajul #n ea3
<!**
4unction 4ereastra/ouaVmesa>W
X
4ereastra @ 1indo1.openV)about0blanA)F )BblanA)F
)1idth@,:-Fheight@9:-Fmenubar@-Ftitlebar@-Ftoolbar@-Fstatus@-Fscrollbars@.)WN
4ereastra.document.1riteVmesa>WN
Y
06Q
Po'a(a# W#)
//**>
</script>
-ste de preferat s% pune(i aest od #n !ead" dar fun(ionea&% la fel de bine $i #n body' Oom
explia suind e fae aest od'
function fereastra"oua<mesaE= + reea&% o fun(ie numit% fereastra"oua? are prime$te a
parametru un $ir de aratere preluate de variabila mesaE.
Mai departe" #n interiorul aestei fun(ii avem o variabil% numit% fereastra are are a parametru
window.open<=%
window este un obiet Yava4ript" iar open(# este metoda aelui obiet' 9n aest a& se tradue
prin @desc#ide fereastra@'
>arametrii pe are metoda open #i poate avea s#nt urm%torii3
openV^s&2%_ ^F s/ame_ ^F s3eatures_ ^F b2eplace_W
Unde BsN:LD este un parametru op(ional are on(ine alea $i numele paginii pe are dorim s% o
des!idem (#n a&ul nostru aboutLblan% speifi% o pagin% nou% goal%)' Ca% nu se speifi%
U.L+ul" se va des!ide automat o pagin% nou% goal%'
B, s/ameD + este de asemenea un parametru op(ional are indi% numele aelei pagini (putem
speifia orie nume dorim) $i este folosit a valoare pentru atributul T!:39T speifiat #ntr+un
formular sau #ntr+un link (form sau a #ref)' <tributele HTML standard are se pot speifia s#nt3
Oblan% sN:L -ste luat #ntr+o nou% fereastr% f%r% nume
Omedia sN:L -ste luat #n partea de mijlo a doumentului HTML' -ste ativ #n )-? sau
urm%toarele
Oparen
t
sN:L -ste luat #n frame+ul prinipal' Ca% nu exist% nii un frame prinipal" aeast%
valoare va a(iona la fel a $i parametrul Oself
Osearc
#
-ste ativ de la )-Q sau ulterior' sN:L este des!is #n partea de %utare a bro:serului
Oself Coumentul urent este #nlouit u doumentul speifiat la sN:L
Otop sN:L #nlouie$te orie frame are este deja #n%rat' Ca% nu este nii un frame definit"
aeast% valoare se omport% la fel a $i Oself
B? sBeaturesD + (op(ional) ,on(ine parametrii de afi$are a ferestrei" are pot fi urm%torii3
!annelmode I ` yes d no d 0 d 7 a Cefault este setat pe no
diretories I ` yes d no d 0 d 7 a Cefault este setat pe yes
fullsreen I ` yes d no d 0 d 7 a 4peifi% da% s% des!id% fereastra #n full+mode (pe tot
eranul)' Cefault este no
!eig!t I number 4peifi% #n%l(imea ferestrei #n pixeli' Oaloarea minim%
este 00
left I number 4peifi% po&i(ia din st#nga #n pixeli' Oaloarea este
relativ% la partea de sus+st#nga a eranului' Oaloarea
trebuie speifiat% mai mare sau egal% u 0
loation I ` yes d no d 0 d 7 a 4peifi% da% s% afi$ea&% bara de adresa' Cefault este yes
menubar I ` yes d no d 0 d 7 a 4peifi% da% s% afi$ea&% bara de meniu' Cefault este yes
06?
Capitolul 3
resi&able I ` yes d no d 0 d 7 a 4peifi% da% se poate redimensiona de %tre user sau
are m%rimea fix%' Cefault este yes
srollbars I ` yes d no d 0 d 7 a 4peifi% da% se afi$ea&% bara de sroll' Cefault este yes
status I ` yes d no d 0 d 7 a 4peifi% da% se afi$ea&% bara de stare #n josul ferestrei'
Cefault este yes
titlebar I ` yes d no d 0 d 7 a 4peifi% da% se afi$ea&% bara u titlul ferestrei' Cefault
este yes
toolbar I ` yes d no d 0 d 7 a 4peifi% da% se afi$ea&% bara u butoane ale
bro:serului (next" bak" save''')' Cefault este yes
top I number 4peifi% po&i(ia de sus a ferestrei #n pixeli' Oaloarea este
relativ% la partea de sus+st#nga a eranului' Oaloarea
trebuie s% fie mai mare sau egal% u 0
:idt! I number 4peifi% l%(imea ferestrei #n pixeli' Oaloarea minim% este
00
Cup% e am generat fereastra" sriem #n ea mesajul dorit folosind linia3
4ereastra.document.1riteVmesa>WN
>entru a apela aeast% fun(ie #ntr+o pagin% :eb putem proeda #n felul urm%tor3
<a hre4@)>a6ascript04ereastra/ouaVb$esa>ul pentru 4ereastra noua 6ine
aicibWN)>CliA aici</a>
>ute(i adapta s% apar% fereastra nou% #n diferite situa(ii astfel3
<a hre4@)>a6ascript04ereastra/ouaVb$esa>ul pentru 4ereastra noua 6ine
aicibWN) onmouseo6er@)4ereastra/ouaVb$esa>ul apare la ho6erbWN)>ClicA
aici</a>
9n situa(ia de mai sus va apare o fereastr% la mi$area mouse+ului peste link $i o alt% fereastr%
#nd da(i lik' >ute(i adapta astfel pentru orie situa(ie s% apar% #te o fereastr%' 9n a&ul #nd
bro:serul nu permite afi$area ferestrelor de tip pop)up" este posibil a sriptul s% nu
fun(ione&e'
9n exemplul urm%tor este onstruit% pagina prinipal% din are este apelat% fereastra pop)up u
parametru sN:L speifiat (sN:L on(ine numele paginii pe are dorim s% o des!idem)3
<#T$%>
<#"AD>
<T(T%">>a6ascript</T(T%">
<!**
4unction deschideVW
Xi1in@1indo1.openV)>a6ascriptBne1.html)F )(W(/)F
)status@noFtoolbar@noFlocation@noFmenu@noF1idth@9--Fheight@9--)WNY
//**>
</CC2(!T>
</#"AD>
<'OD>
<#. align@)center)>3ereastra pop*up</#.><#2>
Aceasta pagina demonstrea8a cum poate 4i creata o 4ereastra pop*up<'2>
3ereastra se deschide la apasarea pe legatura de mai >os si se
inchide<'2>
cand este apasat butonul O[<'2>
06J
Po'a(a# W#)
Deschide 4ereastra
<A hre4@)D) onClicA@)deschideVWN)>aici</A>.
</'OD>
</#T$%>
Bire$te" trebuie reat un doument separat" are va fi afi$at #n fereastra pop)up' 9n exemplul
urm%tor este onstruit doumentul HTML (EavascriptOnew.#tml) are va fi afi$at #n fereastra
pop)up definit% #n exemplul anterior3
<#T$%>
<#"AD>
<T(T%">>a6ascriptBne1.html</T(T%">
</#"AD>
<'OD>
<#+ align@)center)>Test pop*up</#+>
<3O/T color@)green) 4ace@arial>Ati in6atat sa creati o 4ereastra pop*
up<'2>
Apasati O[ ca sa re6eniti in 4ereastra initiala
<!>
<3O2$ name@)4orm.)>
<(/!&T type@)button) 6alue@)O[)
onClicA@)1indo1.closeVWN)>
</3O2$>
</'OD>
</#T$%>
3.1D. A%i&a#a unui (#-a@ $n )aa !# -tatu-
<est exemplu ilustrea&% modul um se poate afi$a un mesaj #n bara de status (aflat% la ba&a
ferestrei bro:serului) la treerea u mouse+ul peste un anumit element din pagin%' Ce obiei"
aest element este un link sau o imagine' 9n exemplul urm%tor" elementul este o imagine3
<#T$%>
<#"AD>
<T(T%">>a6ascript+</T(T%">
</#"AD>
<'OD>
<#. align@)center)>$esa> in status bar</#.><#2>
<#+>$esa>ul apare la plasarea mouse*ului pe imagine</#+>
<($` src@)../(magini/tiger.gi4)
on$ouseO6er@)1indo1.status@bAcesta este un tigrubNreturn trueN)
on$ouseOut@)1indo1.status@b bNreturn trueN)>
</'OD>
</#T$%>
3.*,. A%i&a#a !at#i "u#nt# $n pa'in:
4riptul urm%tor preia data sistemului de operare al utili&atorului $i o afi$ea&% #n pagin%'
-vident" da% data sistemului este setat% inoret" ea va ap%rea #n pagin% a atare' -xemplul
urm%tor onstruie$te o pagin% Web are on(ine un astfel de sript3
<#T$%>
<#"AD>
<T(T%">>a6ascript,</T(T%">
<CC2(!T language@)>a6ascript)>
062
Capitolul 3
<!**
6ar 8iF dataF lunaN
a8i@ne1 DateVWN
i4Va8i.getDayVW@@-WX 8i@)DuminicaF ) Y
else i4Va8i.getDayVW@@.WX 8i@)%uniF ) Y
else i4Va8i.getDayVW@@9WX8i@)$artiF )Y
else i4Va8i.getDayVW@@+WX8i@)$iercuriF )Y
else i4Va8i.getDayVW@@,WX8i@)\oiF )Y
else i4Va8i.getDayVW@@:WX8i@)EineriF )Y
else i4Va8i.getDayVW@@;WX8i@)CimbataF )Y
i4Va8i.get$onthVW@@-WXluna@)(anuarie )Y
else i4Va8i.get$onthVW@@.WXluna@)3ebruarie)Y
else i4Va8i.get$onthVW@@9WXluna@)$artie)Y
else i4Va8i.get$onthVW@@+WXluna@)Aprilie)Y
else i4Va8i.get$onthVW@@,WXluna@)$ai)Y
else i4Va8i.get$onthVW@@:WXluna@)(unie)Y
else i4Va8i.get$onthVW@@;WXluna@)(ulie)Y
else i4Va8i.get$onthVW@@HWXluna@)August)Y
else i4Va8i.get$onthVW@@IWXluna@)Ceptembrie)Y
else i4Va8i.get$onthVW@@TWXluna@)Octombrie)Y
else i4Va8i.get$onthVW@@.-WXluna@)/oiembrie)Y
else i4Va8i.get$onthVW@@..WXluna@)Decembrie)Y
data@a8i.getDateVWN
//**>
</CC2(!T>
</#"AD>
<'OD>
<#. align@)center)>Data calendaristica</#.><#2>
<3O/T si8e@),) color@)red) 4ace@)arial)>A8i s<ntem in data de0
<!**
document.1riteV8i]b b]data]b b]lunaW
//**>
</CC2(!T>
</3O/T>
</'OD>
</#T$%>
3.*1. A%i&a#a al#atoa# a uno (#-a@# $n pa'in:
Unul dintre lururile are #i fa pe vi&itatorii paginii dumneavoastr% s% revin% la ea u
regularitate este varietatea + fie #n aspet" fie" mai ales" #n on(inut'
Un mod de a fae paginile mai variate este de a afi$a diverse mesaje" itate sau imagini are s%
se s!imbe de fieare dat% #nd este aesat% pagina'
9n exemplul urm%tor este pre&entat un sript are reali&ea&% afi$area aleatoare a unui itat" ales
dintr+un $ir predefinit3
<#T$%>
<#"AD>
</#"AD>
<'OD>
<#. align@)center)>Citate</#.><#2>
061
Po'a(a# W#)
<!**
citat@ne1 ArrayN
autor@ne1 ArrayN
citat^-_@)Omul care*si cunoaste limitele este singurul care are sanse
sa obtina ce 6rea.)N
autor^-_@)òethe)N
citat^._@)!e stancile cele mai inalte a>ung numai 6ulturii si
reptilele.)N
autor^._@)$ontesZuieu)N
citat^9_@)!utine lucruri s<nt atat de greu de suportat ca un e5emplu
bun.)N
autor^9_@)$arA T1ain)N
citat^+_@)Ade6arul pur si simplu este rareori pur si niciodata
simplu.)N
autor^+_@)Oscar Wilde)N
citat^,_@)Omul a in6entat limba>ul pentru a*si satis4ace ne6oia
pro4unda de a se plange.)N
autor^,_@)%ily Tomlin)N
inde5@$ath.4loorV$ath.randomVW U citat.lengthWN
document.1riteV)<D%>Qn)WN
document.1riteV)<DT>Qn) ] citatînde5_ ] )Qn)WN
document.1riteV)<DD>Qn) ] )* ) ] autorînde5_ ] )Qn)WN
document.1riteV)</D%>Qn)WN
//**>
</CC2(!T>
<#2>
Citatul de mai sus este generat aleator la incarcarea paginii.
</'OD>
</#T$%>
>entru a observa fun(ionarea sriptului" re#n%ra(i pagina de mai multe ori'
3.**. I(a'ini "a# -# -"7i(): 1olloC# i(a'#-2
Un efet interesant pe are #l pute(i introdue #n pagin% s#nt imaginile are #$i s!imb% aspetul
la treerea u mouse+ul pe suprafa(a lor' <esta se poate ob(ine u ajutorul sriptului pre&entat
#n exemplul urm%tor3
<#T$%>
<#"AD>
<!**
i4 Vdocument.imagesW
X
pic.on@ne1 (mageVWN
pic.on.src@)../(magini/img..>pg)N
pic.o44@ne1 (mageVWN
pic.o44.src@)../(magini/img9.>pg)N
Y
4unction deschideVimg/ameW
X
X
imgOn@e6alVimg/ame ] )on.src)WN
documentîmg/ame_.src@imgOnN
057
Capitolul 3
Y
Y
4unction inchideVimg/ameW
X
X
imgO44@e6alVimg/ame ] )o44.src)WN
documentîmg/ame_.src@imgO44N
Y
Y
//***>
</CC2(!T>
</#"AD>
<'OD>
<#. align@)center)>(magini care se schimba</#.><#2>
<C"/T"2>
<A hre4@)D) on$ouseo6er@)deschideVbpic.bW)
on$ouseout@)inchideVbpic.bW)>
<($` src@)../(magini/img9.>pg) 1idth@).--) height@).--) border@).)
name@)pic.)>
</A>
</C"/T"2>
</'OD>
</#T$%>
3.*3. /ali!a#a %o(ula#lo
Ca% exemplele pre&entate p#n% aum au avut rolul de a fae pagina dumneavoastr% mai
atrativ%" urm%torul exemplu este de natur% s% #i #mbun%t%(eas% fun(ionalitatea' A problem% u
are v% ve(i onfrunta" f%r% #ndoial%" da% folosi(i formulare #n pagin%" este validarea datelor
introduse de utili&ator'
Oom rea o pagin% foarte simpl% are on(ine dou% asete de text #n are utili&atorul trebuie s%
introdu% numele $i adresa de mail' Ceoaree dup% ompletarea formularului informa(iile
introduse vor fi supuse proesului de validare reali&at de sriptul Yava4ript'
4riptul de mai jos verifi% da% toate #mpurile de editare au fost ompletate' Ca% se apas% pe
butonul (ubmit #nainte de a ompleta ambele #mpuri" este transmis un mesaj de eroare' Catele
din formular s#nt transmise unui sript >H> fitiv" numit m$script.p#p, aflat #n diretorul scripts'
Abserva(i % atributele action $i met#od ale eti!etei FBA.MG s#nt folosite a propriet%(i ale
obietului predefinit #n Yava4ript" form'
Coumentul onstruit #n exemplul urm%tor on(ine un formular $i sriptul are reali&ea&%
validarea datelor introduse #n #mpurile formularului3
<#T$%>
<#"AD>
<!**
4unction 6eri4icaV4ormW
X
i4 V4orm.nume.6alue@@ ))W
050
Po'a(a# W#)
X
alertV)Ea rogF introduceti numele!)WN
4orm.nume.selectVWN
Y
else i4 V4orm.email.6alue@@ ))W
X
alertV)Ea rogF introduceti adresa de mail!)WN
4orm.email.selectVWN
Y
else
X
4orm.method@)post)N
4orm.target@)Bsel4)N
4orm.action@)scripts/myscript.php)N
4orm.submitVWN
Y
Y
//**>
</CC2(!T>
</#"AD>
<'OD>
<#. align@)center)>Ealidarea 4ormularelor</#.>
<#+ align@)center)>Vcompletarea tuturor cimpurilorW</#+><#2>
<3O2$ onCubmit@)6eri4icaVthisWN return 4alseN)>
/ume0
<(/!&T type@)te5t) name@)nume) si8e@)+-)><'2>
Adresa mail0
<(/!&T type@)te5t) name@)email)><'2>
<(/!&T type@)submit) name@)button) 6alue@)Cubmit)>
</3O2$>
</'OD>
<#T$%>
A alt% verifiare deosebit de util% este da% utili&atorul a introdus o adres% de mail valid%'
4riptul din exemplul urm%tor reali&ea&% trei verifi%ri3
0' da% #n $irul de aratere introdus exist% araterul WX
6' da% este pre&ent araterul @.@ urmat de trei aratere ('om" de exemplu)X
5' da% este pre&ent araterul @.@ urmat de dou% aratere ('md" de exemplu)'
Bormularul din exemplul urm%tor on(ine un #mp de editare $i un buton (ubmit' Ca% adresa de
mail introdus% #n #mpul de editare este inoret%" se va afi$a un mesaj de eroare3
<#T$%>
<#"AD>
<!**
4unction 6eri4icaBmailV4ormW
X
6eri4@4orm.email.6alueN
i4 VV6eri4.inde5O4VbJbW < -W ee VV6eri4.charAtV6eri4.length*,W !@b.bW
MM V6eri4.charAtV6eri4.length*+W !@b.bWWW
X
alertV)/u ati introdus o adresa de mail 6alida. Ea rogF incercati din
nou!)WN
4orm.email.selectVWN
056
Capitolul 3
return 4alseN
Y
else
X
4orm.method@)post)N
4orm.target@)Bsel4)N
4orm.action@)scripts/myscript.php)N
4orm.submitVWN
Y
Y
//**>
</CC2(!T>
</#"AD>
<'OD>
<#. align@)center)>Ealidarea 4ormularelor</#.>
<#+ align@)center)>Vadresa de mail corectaW</#+><#2>
<3O2$ onCubmit@)6eri4icaBmailVthisWNreturn 4alseN)>
Adresa mail0
<(/!&T type@)te5t) name@)email)><'2>
<(/!&T type@)submit) name@)button) 6alue@)Cubmit)>
</3O2$>
</'OD>
<#T$%>
>ute(i folosi #n paginile dumneavoastr% oriare dintre aeste sripturi" desigur" f%#nd
modifi%rile neesare legate de strutura site+ului dumneavoastr%' Ce exemplu" #n sripturile
are reali&ea&% validarea formularelor" pentru a aestea s% fie fun(ionale" trebuie s% prei&a(i
loali&area oret% a sriptului are fae prelurarea lor pe server'
<ve(i #ns% grij% la aspetele legate de vite&a de #n%rare a paginii3 aplia(iile omplexe $i de
mari dimensiuni #netines #n%rarea paginii unde s#nt folosite' ,a $i #n a&ul imaginilor" nu
folosi(i sripturi de are nu este nevoie" doar pentru a ar%ta u orie pre( % s#nte(i un bun
programator' Una dintre regulile de aur ale unei pagini Web bune" regul% at#t de des #n%lat%"
este simplitatea'
055
Po'a(a# W#)
+. LIMBAJUL PHP
+.1. 8o4iuni !# )aA: PHP
+.1.1. Con!i4ii !# utiliAa# PHP
=H= este un limbaj de programare e rulea&% pe server' Limbajul >H> a fost proietat speial
pentru W-*' ,odul >H> #nglobat #ntr+o pagin% HTML va fi exeutat la fieare vi&itare a
paginii' ,odul >H> este interpretat pe serverul W-* $i generea&% un od HTML are va fi
v%&ut de uili&ator" bro:serului fiindu+i transmis numai odul interpretat a $i HTML'
>H> a fost oneput #n anul 0118 de %tre 8asmus Lerdorf' Ulterior >H> a treut prin #teva
resrieri importante pentru a ajunge la produsul atual' 9n aprilie 677J erau #n u& peste 67
milioane de domenii din lumea intreag%" $i aest num%r este #n ontinu% re$tere' >H> este un
produs Apen 4oure" u aes la odul surs%' ,odul poate fi folosit" modifiat $i redistribuit #n
mod gratuit' )ni(ial" >H> era aronimul de la >ersonal Home >age" dar a fost modifiat $i aum
este aronimul pentru >H> Hypertext >reproessor'
Oersiunea atual% a >H> este Q'6'8' >agina de ba&% pentru >H> este3 !ttp3HH:::'p!p'net'
>agina pentru Vend (ompania are a elaborat >H>8) se afl% la !ttp3HH:::'&end'om'
>entru a rula un site u senarii >H> " ave(i nevoie de3
server u >H> instalatX
onexiune BT>X
redator simplu de texte de tipul /otepad sau Textpad'
;#C#
4pre deosebire de paginile HTML" are puteau fi verifiate $i pe alulatorul loal" paginile
>H> nu pot fi verifiate de#t da% s#nt g%&duite pe un server :eb are are instalat >H>'
Majoritatea serverelor utili&ea&% softul <pa!e datorita flexibilitatii sale" portabilit%(ii"
siguran(ei si extensibilit%(ii' >agina de ba&% pentru <pa!e este3 #ttpL22#ttpd.apac#e.or&'
"escrcare =H=
!ttp3HHdos'p!p'netHdo:nloads'p!pTvQ
"ocumentaie
!ttp3HHdos'p!p'netHdos'p!p
=agini utile i scripturi =H=
!ttp3HH:::'!otsripts'omH>H>Hindex'!tml
!ttp3HH:::'p!pfreaks'omH
!ttp3HHp!p'resoureindex'omH
!ttp3HH:::'onlyp!p'omH
058
Capitolul 3
!ttp3HH:::'sripts'omHp!p+sriptsH
!ttp3HH:::'p!promania'net ,omunitate a programatorilor >H> din .omania unde pute(i g%si
informa(ii >H> $i o list% de disu(ii)'
Cut#=TP
>entru a gestiona fi$ierele aflate pe site" trebuie s% instala(i un program+lient BT> 0Bile Transfer
>rotool)' Un lient BT> se folose$te atuni #nd site+ul nu este g%&duit pe alulatorul
dumneavoastr% (loal)' 9n alitate de lient BT> poate fi utili&at programul ,uteBT>'
"escrcare 2ute#T=
ftp3HHftp'globalsape'omHpubHuteftpproHuteftppro'exe
"ocumentaie
!ttp3HH!elp'globalsape'omH!elpHguidesH,uteBT>U>roJUUserULuide'pdf
+.1.* ;inta?a PHP
,#nd o pagin% HTML este aesat%" serverul are o g%&duie$te trimite pagina HTML %tre
bro:ser spre afi$are' 9n a&ul unei pagini >H> serverul ite$te odul >H>" #l interpretea&% $i
generea&% dinami pagina HTML are este trimis% bro:serului spre afi$are' <esta este motivul
pentru are programatorii Web foloses >H> pentru a onstrui pagini u on(inut dinami'
Bi$ierele >H> au extensia p!p' <stfel de fisiere pot fi reate u /otepad sau" el mai indiat" u
un editor speiali&at" de exemplu ,rimson -ditor" are indi% $i num%rul liniilor" luru util la
depanarea sripturilor' ,odul >H> poate fi reat $i testat de asemenea pe alulatorul loal" da%
utili&a(i un soft speial >H> -xpert -ditor' >H> -xpert -ditor este un program elaborat speial
pentru programatorii >H>' -l are #norporat un HTT>+server" dep%n%tor pentru a rula" a testa $i
a dep%na sripturile >H>" verifiator de sintax% >H>" bro:ser intern" lient BT>" trei moduri de
afi$are a odurilor (>H> Z HTML" HTML" >H>) $i multe alte op(iuni' >H> -xpert -ditor poate
fi preluat de la adresa !ttp3HH:::'ankord'omHp!pxedit'!tml'
,#nd interpretatorul >H> parurge un fi$ier de fapt el @ite$te@ textul p%n% int#lne$te unul din
tagurile speiale are #i indi% s% #neap% s% interprete&e textul a pe od >H>' ,odul se exeut%
p#n% #nd este #nt#lnit tagul de #n!idere'
,odul >H> este delimitat de unul din urm%toarele seturi de eti!ete de des!idere $i #n!idere3
FMp!p od >H> MG eti!ete reomandate
Fsript languageI@p!p@MG od >H> FHsriptG
FM od >H> MG folosirea lor neesit% anumite set%ri pe server
F] od >H> ]G folosirea lor neesit% anumite set%ri pe server
-xemplu3 el mai simplu sript >H> este
<Kphp
echo )Acesta este un script !#!)N
K>
05Q
Po'a(a# W#)
Bun(ia echo este folosit% pentru a afi$a re&ultatele odului >H> #n bro:ser' Cei" re&ultatul
aestui sript este afi$area textului delimitat de g!ilimele pe eran'
4imilar fun(iei echo este fun(ia print'
9n situa(ia #n are sriptul nu este sris orret" >H> -xpert -ditor va afi$a eroarea indi#nd $i
loul unde aeasta apare' -rorile s#nt afisate doar da% serverul este setat orespun&%tor (#n
php.ini este setat displayAerrors.Dn $i errorAreporting.&A,LL)'
9n interiorul sriptului pot fi inserate $i eti!ete HTML' -xemplu3
<Kphp
echo )Acesta este un script <b>!#!</b><br>care contine si etichete
#T$%)N
K>
Bi$ierul >H> poate on(ine #ntre tagurile F!tmlG si FH!tmlG mai multe blouri >H> delimitate de
<Kphp
K>
-xemplu3
<html>
<head><title>"5emplu </title>
</head>
<body>
'loc #T$%<br>
<Kphp
echo )'loc !#!)N
K>
'loc #T$%<br>
<Kphp
echo )'loc !#!)N
K>
</body>
</html>
9n >H> exist% trei metode prin are se pot ad%uga omentarii" evident neafi$ate #n bro:ser" u
sopul de a ad%uga informa(ii neesare programatorului'
,omentariile de o singur% linie se inlud prin intermediul araterelor HH sau T' Tot e urmea&%
dup% araterele HH sau T p#n% la ap%tul liniei este onsiderat omentariu' Ce exemplu3
echo )#ello)N // bro1ser*ul 6a a4i?a #ello
echo )!#!)N D bro1ser*ul 6a a4i?a !#!
Un omentariu format din mai multe linii este inlus #ntre H\ $i \H' Ce exemplu3
/U Comentariul in !#!
scris pe mai multe linii U/
<est tip de omentariu poate fi folosit $i pentru ignorarea unor blouri >H>" #n mod deosebit la
etapa de testare a odului >H>' 9n exemplul urm%tor bro:serul va afi$a doar >H>
/U echo )#ello)N
echo )World)N U/
echo ) !#! )N
05?
Capitolul 3
+.1.3 Tipui !# Caia)il#
Oariabila este un ontainer de date are are un nume $i %reia i se poate atribui o valoare e
poate fi modifiat% de mai multe' /umele variabilei #nepe u simbolul J urmat de o liter% mi%
0a5z1 sau mare 0,5K1" sau u araterul A% dar niiodat% u o ifr% $i nu poate on(ine spa(ii
libere' Ce exemplu3 JnumeA-ar' 4e reomand% a numele variabilei s% fie #t mai sugestiv"
pentru a u$ura #n(elesul sriptului' 9n exemplul urm%tor atribuim variabilei Ja valoarea te4t $i
apoi o tip%rim
<Kphp
Oa@)te5t)N echo OaN
K>
9n aeea$i onstru(ie echo putem folosi text #mpreun% u o variabil%
<Kphp
Oluna@)septembrie)N
echo )Cursurile <ncep <n luna Oluna)N
K>
9n >H> exist% opt tipuri de variabile3 patru tipuri salare3 #ntregi" numere u virgul% flotant%"
$iruri $i variabile booleeneX dou% tipuri ompuse3 matrie $i obieteX dou% tipuri speiale3 resurse
si /ULL'
9ntreg (integer) este un simplu num%r #ntreg exprimat #n sistem &eimal" !exa&eimal sau otal"
op(ional put#nd purta $i semn (_ sau +)' 9n sistemul otal num%rul trebuie preedat de 7" iar
pentru sistemul !exa&eimal preedat de 7x'
eaI677?X HHnum%r exprimat #n sistem &eimal
eaI+Q6X HHnum%r negativ exprimat #n sistem &eimal
eaI705QX HHnum%r otal (e!ivalent u 67J &eimal)
eaI7x0CX HHnum%r !exa&eimal (e!ivalent u 61 &eimal)
/um%rul u virgul% flotant% (float) sau dubl% prei&ie este un numar real are poate fi folosit u
urmatoarea sintax%3
eaI5'08X HHnum%r &eimal
eaI+6'Q1X HHnum%r &eimal negativ
eaI0'5e6X HH057
eaI?-_5X HH?777
birul (string) este o variabila are on(ine o ombina(ie de numere" litere" simboluri $i spa(ii
delimitate #ntre dou% g!ilimele" simple sau duble' birurile pot on(ine $i nume de variabile'
<Kphp
Onume@)Eadim Cristea)N
Odata@)9+ iunie .TI9)N
echo gDomnul Onume este nascut la data de Odata)N
K>
,ea mai simpl% ale pentru a speifia un $ir3 araterele respetive s% fie inluse #ntre g!ilimele
simple (P)" iar eventualele g!ilimele simple on(inute s% fie preedate de araterul D' 9n aeast%
situa(ie variabilele $i araterele speiale vor fi ignorate'
05J
Po'a(a# W#)
Oariabila +oolean exprim% valoarea de adev%r3 T.U- sau B<L4-' Arie valoare diferit% de
&ero sau $ir are nu este gol (on(ine el pu(in un arater) s#nt onsiderate a T.U-'
Matricea 0array) este o variabil% %reia i se pot atribui mai multe valori omparativ u
numerele sau $irurile" are pot on(ine doar o singur% valoare' Matriele foloses !ei sau
inde$i pentru a identifia valorile stoate'
A matrie se reea&% folosind fun(ia arra$<=' 9n exemplul e urmea&% se ini(ia&% o matrie $i se
tip%res elementele ei" folosind fun(ia printAr3
<Kphp
Omatrice @ arrayVbianuariebFb4ebruariebFbmartiebWN
printBr VOmatriceWN
K>
4e poate afla informa(ie despre orie variabil%" utili&#nd fun(ia -arAdump01% are #n a&ul
variabilei de tip matrie arat% #te elemente s#nt #n matrie $i lungimea fie%rei valori a aestuia3
<Kphp
Omatrice @ arrayVbianuariebFb4ebruariebFbmartiebWN
6arBdump VOmatriceWN
K>
>rimul index al unei matrie are valoarea 7' Oalorile inde$ilor pot fi $i delarate expliit' 9n
urm%torul exemplu este reat% o matrie u inde$ii 0" 5 si Q3
<Kphp
Omatrice @ arrayV.@>bcalculatorbF+@>bmonitorbF:@>btastaturabWN
6arBdump VOmatriceWN
K>
>entru a sterge o pere!e !eieHvaloare se foloseste unset013
<Kphp
unsetVOmatrice^+_WN //?terge elementul + din matrice
unsetVOmatriceWN //?terge <ntreaga matrice
K>
+.1.+ /aia)il# p#!#%init#
>H> ofer% un mare num%r de variabile predefinite ori%rui sript are rulea&% $i are depind de
serverul pe are fun(ionea&%' 4etul de variabile predefinite $i valorile lor pot fi ob(inute prin
apelarea fun(iei phpinfo013
<Kphp
phpin4oVWN
K>
9nep#nd u >H> 8'6'7 valoarea impliit% (default) pentru diretiva registerAglo+als este off'
<easta afetea&% setul de variabile predefinite disponibile #n sop global'
Ce exemplu" pentru a ob(ine adresa serverului pe are rulea&% sriptul se va folosi
eU4-.O-.fPCA,UM-/TU.AATPg #n lo de variabila e.-MAT-U<CC." um era #n a&ul #n
are diretive registerAglo+als era on'
052
Capitolul 3
,el mai frevent folosite variabile globale3
eU4-.O-.fP.-MAT-U<CC.Pg + adresa )> a vi&itatorului
eU4-.O-.fPHTT>UU4-.U<L-/TPg + informa(ii despre bro:serul folosit
eU4-.O-.fPHTT>U.-B-.-.Pg + pagina vi&itat% anterior
eU4-.O-.fP4-.O-.U/<M-Pg + numele serverului
eU4-.O-.fP4,.)>TU/<M-Pg + numele sriptului'
Cizi+ilitatea 0scopul) variabilelor depinde de ontextul #n are s#nt definite' Majoritatea
variabilelor din >H> au un singur sop' <esta se apli% $i pentru fi$ierele ad%ugate prin
funtiile include01 $i reLuire013
<Kphp
Oa@.-N
include )subcatalog/4ile.php)N
K>
H\Bi$ierul file'p!p este unul aparte" are #n exemplul dat se afl% #n subdiretoriul subatalog $i
are" de exemplu" urm%torul od\H
<Kphp
echo )Eariabila a are 6aloarea Oa)N
K>
Arie variabil% folosit% #n interiorul unei fun(ii este vi&ibil% doar #n interiorul fun(iei' 9n
exemplul urm%tor" deoaree fun(ia folose$te o variabil% delarat% #n afara ei" echo nu va afi$a
nimi3
<Kphp
Oa@.-N
4unction te5tVW X
echo )Ealoarea 6ariabilei a este Oa)N
Y
te5tVWN
K>
Ca% delaram variabila Ja de tip global" atuni echo va afi$a oret3
<Kphp
Oa@.-N
4unction te5tVW X
global OaN //declaram 6ariabila Oa de tip global
echo )Ealoarea 6ariabilei a este Oa)N
Y
te5tVWN
K>
+.1.5. /aia)il# -tati"#
Ce obiei" variabila exist% doar #n sopul fun(iei loale" dar #$i pierde valoarea #nd exeu(ia
sriptului #netea&%' 9n exemplul urm%tor exeutarea suesiv% a fun(iei va afi$a tot timpul
valoarea ini(ial% 03
<Kphp
4unction 6aloareVW X
Oa@.N echo OaN Oa]]N
051
Po'a(a# W#)
Y
6aloareVWN echo )<br>)N
6aloareVWN
K>
Ca% se delar% % variabila este stati%" atuni de #te ori fun(ia va fi exeutat% ea va p%stra
valoarea preedent% a variabilei ea
<Kphp
4unction 6aloareBstatic VW X
static Oa@.N
echo OaN Oa]]N
Y
6aloareBstaticVWN
echo )<br>)N
6aloareVWN
K>
+.1.9 D#t#(ina#a tipului Caia)il#lo
-xist% fun(ii are determin% tipul variabilei3 isAinteger0Ja1X isAdou+le0Ja1X isAstring0Ja1X
isAarray0Ja1X isA+ool0Ja)' Un exemplu pentru a verifia" da% variabila Ja este de tip intreg3
<Kphp
Oa@.TN
i4VisBintegerVOaWW X
echo b6ariabila Oa este de tip intregbN
Y else X
echo b6ariabila Oa nu este de tip intregbN
Y
K>
4pre deosebire de variabile" #n a&ul fun(iilor nu se fae diferen(a #ntre utili&area literelor mari
sau mii' >entru a ob(ine informa(ie despre tipul variabilei se utili&ea&% fun(ia gettype01 sau
-arAdump01.
+.*. Op#atoi
9n >H> exist% operatori aritmetii" de atribuire" de ompara(ie" logii $i multipli'
+.*.1. Op#atoi ait(#ti"i
Dperatorii aritmetici s#nt de adunare" s%dere" #nmul(ire $i #mp%r(ire3
adunare ea_eb
s%dere ea+eb
#nmul(ire ea\eb
#mp%r(ire eaHeb
modul (restul #mp%r(irii elor 6 valori) ea]eb
+.*.*. Op#atoi !# ati)ui#
>rinipalul operator de atribuire este I $i #nseamn% atribuirea valorii expresiei din dreapta (a nu
se onfunda u egalitatea) operatorului din st#nga'
eaIJ
087
Capitolul 3
ea_I?X HHatribuie lui ea valoarea 05" aelasi luru u eaIea_?
ebI@*una @
eb'I@&iua@ HH atribuie lui eb valoarea @*una &iua@" aelasi luru u ebIeb'@&iua@
+.*.3 Op#atoi !# "o(paa4i#L
egalitate eaI Ieb T.U-" da% eb este egal u ea
identi eaI I Ieb T.U-" da% eb este egal u ea $i s#nt de aela$i tip
inegalitate (diferit) eaSIeb T.U-" da% eb este diferit de ea
inegalitate (diferit) eaFGebT.U-" da% eb este diferit de ea
neidenti eaSI Ieb T.U-" da% eb este diferit de ea $i nu s#nt de aela$i tip
mai mi eaFeb T.U-" da% ea este mai mi de#t eb
mai mare eaGeb T.U-" da% ea este mai mare de#t eb
mai mi sau egal eaFIebT.U-" da% ea este mai mi sau egal u eb
mai mare sau egal eaGIebT.U-" da% ea este mai mare sau egal u eb
+.*.+. Op#atoi lo'i"i
/AT Sea T.U-" da% ea nu este T.U-
</C ea ZZ eb T.U-" da% $i ea $i eb s#nt T.U-
</C ea and eb T.U-" da% $i ea $i eb s#nt T.U-
A. ea dd eb T.U-" da% ori ea ori eb s#nt T.U-
A. ea or eb T.U-" da% ori ea ori eb s#nt T.U-
A. ea xor eb T.U-" da% ori ea ori eb s#nt T.U-" dar nu am#ndou%
Bun(ionarea operatorilor de ompara(ie $i logii se poate verifia folosind struturile de
ontrol'
+.3. ;tu"tui !# "ontol
<este struturi permit definirea unei ondi(ii $i apoi exeutarea unor fragmente de od #n
dependen(% de reali&area ondi(iilor'
+.3.1.In-tu"4iun#a i% H #l-#i% H #l-#
if este instru(iunea ondi(ional% ea mai utili&at% $i are urm%toarea sintax%3
i4 VconditieW X
instruc7iuni e5ecutate dac conditia este ade6ratN
Y
,ondi(ia este inlus% #n parante&e rotunde" iar instru(iunea are se exeut% #n a&ul #nd
ondi(ia este adev%rat% este inlus% #ntre aolade' Ca% ondi(ia nu este adev%rat%" atuni se
exeut% odul e urmea&% dup% #n!iderea aoladei' 9n exemplul urm%tor se ompar% valorile a
dou% variabile $i se afisea&% un mesaj3
<Kphp
Oa@,,N Ob@+9N
i4 VOa>ObW X
echo )Oa>Ob)N
Y
K>
else este alt% instru(iune ondi(ional% e indi% odul are se exeut% #n a&ul #nd ondi(ia din
expresia if nu este adev%rat%3
080
Po'a(a# W#)
i4 VconditieW X
instruc7iuni e5ecutate dac condi7ia este ade6ratN
Y else X
instruc7iuni e5ecutate dac nu condi7ia este 4alsN
Y
9n exemplul e urmea&% se ompar% valorile a dou% variabile $i se afi$ea&% un mesaj3
<Kphp
Oa@.9N Ob@9TN
i4 VOa>ObW X
echo )Oa>Ob)N
Y else X
echo )Oa<Ob)N
Y
K>
elseif este o ombina(ie de if $i else' Ca% ondi(ia if nu este adev%rat%" atuni se introdue
elseif are testea&% #n% o ondi(ie' Ca% nu este adev%rat% a doua ondi(ie" se verifi% o ondi(ie
urm%toare elseif sau se exeut% delara(ia introdus% prin else3
i4 Vconditia.W X
instruc7iuni e5ecutate daca conditia . este ade6ratN
Y elsei4 Vconditia9W X
instruc7iuni e5ecutate daca conditia 9 este ade6ratN
Y elsei4 Vconditia+W X
instruc7iuni e5ecutate daca conditia + este ade6ratN
Y else X
instruc7iuni e5ecutate dac nu este <ndeplinit nici o condi7ieN
Y
-xemplu3
<Kphp
Oa@.TN Ob@9+N
i4 VOa<ObW X
echo )Oa<Ob)N
Y elsei4 VOa@ @ObW X
echo )Oa@@Ob)N
Y else X
echo )Oa>Ob)N
Y
K>
+.3.*. In-tu"4iun#a -<it"7
!6itch este asem%n%toare u if "dar ondi(ia are mai mult de dou% valori' 9n urm%torul exemplu
se transform% num%rul lunei #n denumirea ei3
<Kphp
Oluna@+N
s1itch VOlunaW X
case .0
echo )(anuarie)N
breaAN
case 90
echo )3ebruarie)N
breaAN
086
Capitolul 3
case +0
echo )$artie)N
breaAN
case ,0
echo )Aprilie)N
de4ault0
echo )Alte luni)N
breaAN
Y K>
+.3.3.It#a4ii
4hile este o instru(iune de tip ilu' <t#t timp #t ondi(ia este adev%rat% se repet% ilul3
<Kphp
Onumar@,N
1hile VOnumar<@TW X
echo Onumar.)<br>)N
Onumar]]N
Y
K>
,ilul do..6hile este asem%n%tor u 6hile" dar valoarea expresiei logie se verifi% nu p#n%" i
dup% terminarea itera(iei' 9n ilul do .. 6hile odul se exeut% el pu(in o singur% dat%3
Oi @ -N
do X
print OiN
Y 1hile VOi>-WN
<est ilu se va exeuta o singur% dat%" deoaree la sf#r$itul primei itera(ii expresia logi% este
evaluat% a B<L4- (ei nu este mai mare de#t 7)" $i exeutar8ea ilului se #n!eie'
#or este o instru(iune de tip ilu3
4or Ve5presia.N e5presia9N e5presia+W X
instructiuni de e5ecutatN
Y
e4presia* este evaluat% la #neputul ilului" e4presia+ se verifi% la #neputul fiearei itera(ii"
e4presia, se exeut% la sf#r$itul fie%rei itera(ii' ,onstru(ia for poate fun(iona $i f%r% una sau
toate aeste expresii' 9n exemplul urm%tor se ini(iali&ea&% variabila Ji u valoarea 6" se verifi%
da% este mai mi% sau egal% u ?" iar apoi se inrementea&%' La fieare itera(ie se tip%reste
valoarea variabilei Ji3
<Kphp
4or VOi@9N Oi<@;N Oi]]W X
echo Oi.)<br>)N
Y
K>
#oreach este o onstru(ie" are fun(ionea&% doar u matrie gener#nd erori" da% s#nt folosite
variabile u tipuri de date diferite sau variabile neini(iali&ate' 4intaxa este urm%toarea3
4oreach VOarr as Ocheie@>O6aloareW X
instructiuni de e5ecutatN
Y
085
Po'a(a# W#)
-xemplu3
<Kphp
O1eeA @ arrayV)monday ) @>)luni)F )tuesday) @> )marti)F )1ednesday) @>
)miercuri)F )thursday) @> )>oi)F )4riday) @> )6ineri)F )saturday) @>
)simbata)F )sunday) @> )duminica)WN
4oreach VO1eeA as Oday @> O8iW X
echo )Oday @> O8i<br>)N
Y
K>
include $i reLuire s#nt dou% fun(ii asem%n%toare folosite pentru a inlude #n paginile p!p ale
unor fi$iere externe' Ciferen(a #ntre ele dou% fun(ii onst% #n aeea % da% include d% gre$"
sriptul generea&% o averti&are" dar fun(ionea&% #n ontinuare" iar #n a&ul unei erori reLuire se
termin% exeutarea sriptului' 4intaxa aestor instru(iuni este3
include V)4isier..php)WN
reZuire V)4isier9.html)WN
+rea3 opre$te for(at exeu(ia struturilor for" foreac0" =0ile" do..=0ile sau s=itc0' 9n exemplul
urm%tor la Ji.4 se opre$te exeu(ia ilului3
<Kphp
4or VOi@-N NOi]]W X
i4 VOi>,W X
breaAN
Y
echo Oi.)<br>)N
Y
K>
continue tree peste restul din itera(ia urent% $i ontinu% exeu(ia la #neputul itera(iei
urm%toare' 9n exemplul urm%tor exeu(ia pentru eiI I5 este omis%3
<Kphp
4or VOi@-NOi<;NOi]]W X
i4 VOi@ @+W
continueN
echo Oi.)<br>)N
Y K>
+.+. P#lua#a !at#lo !in %o(ula#l# HTML
+.+.1. /aia)il# !# p#lua# a !at#lo !in %o(ula
9n ompartimentul HTML la tema Bormulare a fost indiat % elementul form are atributele
action $i met#od, iar fieare #mp din formular are atributul name' <tributul action indi%
adresa fi$ierului are prelurea&a datele introduse #n formularX method indi% modul #n are
datele s#nt trimise spre prelurare pe server $i poate avea valorile post sau getX name este un
atribut are identifi% datele introduse #n fieare #mp al formularului' 9n exemplul urm%tor este
pre&entat un formular u un #mp $i sriptul p!p de preluare a datelor
<4orm action@)4orm.php) method@)post)>
/ume0 <input type@)te5t) name@)nume)><br>
<input type@)submit) 6alue@)Trimite)>
088
Capitolul 3
</4orm>
Bi$ierul indiat de action va prelua datele introduse #n #mpul @nume@ prin variabila global% de
tip matrie eU>A4Tf@nume@g3
/U urmea8 4i?ierul 4orm.php U/
<Kphp
Onume@OB!OCT^)nume)_N
echo OnumeN
K>
+.+.*. /#i%i"a#a !at#lo into!u-# $n %o(ula
>entru a fi siguri % utili&atorul a ompletat #mpurile" trebuie s% ad%ug%m sriptului partea de
verifiare' <ela$i formular" dar u partea de verifiare3
<Kphp
i4 VOnume@ @))W X
echo )C<mpul nume nu este completat)N
Y else X
echo OnumeN
Y
K>
>artea de verifiare poate avea mai multe ondi(ii simultane' 9n exemplul urm%tor este aela$i
formular" dar partea de verifiare are dou% ondi(ii legate prin operatorul A. sau dd' 9n aest a&"
da% #mpul va fi l%sat liber sau numele va fi mai mi de J aratere" pe eran va fi afi$at%
averti&area respetiv% din od'
<Kphp
i4 VVOnume@ @))W ee VstrlenVOnumeW<HWW X
echo )Campul nume nu este completat corect)N
Y else X
echo OnumeN
Y
K>
9n aela$i mod pot fi preluate $i verifiate date pentru toate #mpurile formularului'
Catele preluate pot fi introduse #ntr+o ba&% de date" #ntr+un fi$ier sau expediate prin email #n
dependen(% de erin(ele aplia(iei'
+.+.3. 3n":"a#a %i&i##lo p# -#C# pin %o(ula
Bormularul poate fi utili&at $i pentru #n%rarea (upload) fi$ierelor pe server" dar u respetarea
m%surilor de preau(ie pentru a evita eventualele expedieri de fi$iere nedorite pe server' >entru
upload formularul va on(ine un #mp de tip input u typeI@file@" iar tagul form va on(ine #n
plus un argument enctype./multipart9form5data@' 9n exemplul urm%m%tor este pre&entat
odul unui formular pentru #n%rarea de fi$iere' ,atalogul #n are se fae upload trebuie s%
permit% opera(ia de sriere'
<4orm method@)post) action@)upload.php) enctype@)multipart/4orm*data)>
08Q
Po'a(a# W#)
3isier pentru upload0 <input type@)4ile) name@)4ile)><br>
<input type@)submit) 6alue@)Trimite)>
</4orm>
H\ urmea&a fisierul upload'p!p \H
<Kphp
Oa@OB3(%"C^)4ile)_^)si8e)_N
Ob@OB3(%"C^)4ile)_^)name)_N
Oc@OB3(%"C^)4ile)_^)tmpBname)_N
Od@OB3(%"C^)4ile)_^)type)_N
i4VVOa<.----W MM VOa>-WW X
mo6eBuploadedB4ileVOcFObWN
echo )Original 4ile name0 ).Ob.)<br>)N
echo )3ile name a4ter upload0 ).Ob.)<br>)N
echo )3ile si8e0 ).Oa.)<br>)N
echo )3ile type0 ).Od.))N
Y
K>
+.5. Lu"ul "u %i&i##l#
+.5.1. Un#l# op#a4ii a-upa %i&i##lo
>H> permite efetuarea unor anumite opera(ii asupra fi(ierelor aflate pe server" um ar fi3
fopen() IG des!ide fi$ierul indiat
flose() IG in!ide fi$ierul des!is
fread() IG ite$te on(inutul fi$ierului
f:rite() IG srie #n fi$ier
filesi&e() IG indi% dimensiunea fi$ierului
+.5.*. D#-"7i!##a %i&i##lo
4intaxa fun(iei fopen<= este3 fopen(ar.7? ar.&#@ arg0 IG variabil% de tip $ir" indi% fi$ierul"
alea spre fi$ierul are va fi des!is" arg6 IG variabil% de tip $ir" indi% modul #n are va fi
des!is fi$ierul $i poate avea urm%toarele valori sau ombina(ii ale aestora3
r IG fi$ier des!is doar pentru itire
r_ IG fi$ier des!is doar pentru itire $i sriere
: IG fi$ier des!is doar pentru sriere
:_ IG fi$ier des!is pentru itire $i sriere" iar da% fi$ierul nu exist%" fun(ia #l reea&%
a IG fi$ier des!is pentru ad%ugare la sf#r$it
a_ IG fi$ier des!is pentru ad%ugare la sf#rsit" iar da% fi$ierul nu exist%" fun(ia #l
rea&%
t IG fi$ier des!is #n mod text
b IG fi$ier des!is #n mod binar
+.5.3. Citi#a %i&i##lo
)nforma(ia din fi$iere poate fi itit% prin intermediul a diferitelor fun(ii' Un exemplu de
utili&are a fun(iei fread01 este urm%torul3
O4ilename@)4ile.t5t)N
O4p@4openVO4ilenameF )r)WN
Olength@ 4ilesi8eVO4ilenameWWN
Ocontents@4readVO4pF OlengthWWN
08?
Capitolul 3
>rin intermediul aestei fun(ii este itit% o antitate Jlength de informa(ie din fi$ier" are este
atribuit% variabilei Jcontents' Oariabila Jfp este un indiator al fi$ierului des!is $i este folosit
ulterior $i #n alte fun(ii'
Bun(ia readfile01 ite$te on(inutul #ntregului fi$ier $i o afi$ea&% pe eran' Bun(ia returnea&%
dimensiunea fi$ierului #n bytes3
O4ilename@)C0/lessons/ne1.t5t)N
Oi@read4ileVO4ilenameWN
echo )<br>)N echo OiN //a4i?ea8 acela?i re8ultat ca
4ilesi8eVO4ilenameWN
Bun(ia fileAgetAcontents0Jfilename1 se utili&ea&% pentru a ob(ine on(inutul unui fi$ier #n
forma unei variabile de tip $ir' /u este neesar% des!irea peralabil% a fi$ierului u fun(ia
fopen01'
Bun(ia file( ) #nsrie on(inutul fi$ierului #ntr+o matrie' Bieare element al matriei orespunde
unui r#nd din fi$ier' 9n exemplul e urmea&% variabila efileUarray este o matrie" ale %rei valori
s#nt tip%rite prin instru(iunea foreach3
O4ilename@)C0/lesoons/ne1.t5t)N
O4ileBarray @ 4ileVO4ilenameWN
4oreach VO4ileBarray as OA @> O6W X
print OA. @> O6. )<br>)NY
+.5.+. ;"i##a $n %i&i##
4intaxa fun(iei f6rite01 este3
41riteVO4pF )con7inut ce 6a 4i scris <n 4i?ier)WN
Oerifiarea drepturilor de sriere #n fi$ier se efetuea&% u fun(ia isA6rita+le01' 4intaxa
fun(iei isA6rita+le este isA6rita+le0Jfilename1 $i returnea&% T87&" da% se poate #nsrie $i
#,L!&" da% nu se poate srie #n fi$ier'
+.5.5. 3n"7i!##a %i&i#ului
4intaxa fun(iei fclose01 este fclose0Jfp1X '
+.5.9. E?#(pl# -i(pl# !# utiliAa# a %un"4iilo !# )aA: !# lu"u "u
%i&i##l#
9n exemplul urm%tor se verifi% dreptul de sriere #n fi$ier3
<Kphp
O4ilename@) C0/lesoons/ne1.t5t )N
i4VisB1ritableVO4ilenameWW X //se 6eri4ica dreptul de scriere in
4i?ier
echo )Acces permis scrierii in 4i?ier)N
Y else X
echo )Acces inter8is scrierii in 4i?ier)N
YK>
-xemplul e urmea&% inlude verifiarea des!iderii fi$ierului3
08J
Po'a(a# W#)
<Kphp
O4ilename@)C0/lesoons/ne1.t5t )N
i4VisB1ritableVO4ilenameWW X //se 6eri4ica dreptul de scriere <n
4i?ier
i4V!O4p@4openVO4ilenameF babWW X //se 6eri4ica deschiderea 4i?ierului
echo )3i?ierul <b>).O4ilename.)</b> nu poate 4i deschis)N
e5itN //se <ncheie e5ecu7ia scriptului
Y
echo )3i?ierul <b>).O4ilename.)</b> poate 4i deschis)N
Y else X
echo )Acces inter8is pentru scriere in 4i?ier)N
Y
K>
9n exemplul urm%tor se efetuea&% srierea #n fi$ier $i tip%rirea on(inutului fi$ierului3
<Kphp
O4ilename@) C0/lesoons/ne1.t5t )N
i4VisB1ritableVO4ilenameWW X //se 6eri4ica dreptul de scriere in
4i?ier
i4V!O4p@4openVO4ilenameF babWW X //se 6eri4ica deschiderea 4i?ierului
echo )3i?ierul <b>).O4ilename.)</b> nu poate 4i deschis)N
e5itN //se incheie e5ecutia scriptului
Y
i4V41riteVO4pF dateV)>*n* g0ia)W.)QrQn)W @ @ 3A%C"W X //testea8a daca
se poate scrie in 4i?ier
die V)/u se poate scrie in ).O4ilename.))WN //iesire
Y
4closeVO4pWN
Oarr@4ileVO4ilenameWN //se citeste continutul 4i?ierului si se
stochea8a intr*o matrice Oarr
4oreach VOarr as OAey @>O6alueW X
echo O6alue.)<br>)N //printea8a cate o 6aloare pe un rand
Y
Y else X
echo )Acces inter8is pentru scriere in 4i?ier)N
Y
K>
+.9. Apli"a4ii -i(pl# W#)
+.9.1. E?#(pl# !# -"i## a !at#i "al#n!ai-ti"# $n pa'ina W#)
>relurarea datelor alendaristie (afi$area datei $i orei urente" de exemplu) se efetuea&% u
ajutorul fun(iei date01" are returnea&% un $ir e depinde de parametrii india(i onform
tabelului e urmea&%'
Parametru Semnificaie Exemplu
An 4ormat , ci4re 9--H
y An 4ormat 9 ci4re -H
n %una 4ormat . sau 9 ci4re ..
m %una 4ormat 9 ci4re -,
3 %una \une
$ %una 4ormat + litere \un
> ai din lun 4ormat . sau 9
ci4re
T
d ai din lun 4ormat 9 ci4re -T
l V% micW ai din sptm<n 3riday
082
Capitolul 3
D ai din sptm<n 4ormat +
litere
Wed
1 ai din sptm<n 4ormat .
ci4r
-@duminic
;@s<mbat
8 ai din an V-*+;:W .9H
t /umrul 8ilelor dintr*o
anumit lun
+-
g Ora .9h 4ormat . sau 9 ci4re .-
` Ora 9,h 4ormat . sau 9 ci4re 9+
h Ora .9h 4ormat 9 ci4re -;
# Ora 9,h 4ormat 9 ci4re .I
i $inute ,-
s Cecunde .H
a am sau pm pm
A A$ sau !$ !$
-xemplu3 data $i ora afi$ate #n mai multe moduri
<Kphp
echo dateV)d*m* g0i A)WN // se 6a a4i?a data ?i ora curent <n 4ormat
.-*.-*9--H ..09. A$
echo)<br>)N
echo dateV)>*3* #0i) WN // se 6a a4i?a data ?i ora curent <n 4ormat
.-*October*9--H ..09.
echo)<br>)N
echo dateV)l*$*)WN// se 6a a4i?a data curent <n 4ormat Wednesday*
Oct*9--H
K>
+.9.*. E?p#!i##a (#-a@#lo !in pa'ina W#)
Mesaje din pagina Web pot fi trimise folosind fun(ia mail<= din >H> u urm%toarea sintax%3
mailVOdestinatarF OsubiectF Omesa>F OheaderBaditionalWN
Jdestinatar este adresa unde va fi trimis mesajul" iar da% este neesar" mesajul poate fi trimis
mai multor destinatari" ale %ror adrese vor fi separate prin virgul%'
Jsu+iect este informa(ia are va fi afi$at% #n #mpul subiet'
Jmesa> este orpul mesajului' Bieare linie va fi separat% prin LB (Dn) $i nu va avea mai mult de
J7 de aratere'
JheaderAaditional on(ine informa(ii op(ionale" de exemplu3 #rom% 2c% @cc fiind separate de
araterele ,.LB (DrDn)'
Toate mesajele trimise trebuie sa aib% #mpul #rom ompletat' <est luru poate fi f%ut prin
ad%ugarea aestuia #n JheaderAaditional sau prin setarea orespun&%toare a adresei #n fi$ierul
p#p.ini din >H>'
-xeu(ia fun(iei mail returnea&% T.U- da% mesajul a fost aeptat pentru trimitere" #n a&
ontrar+returnea&% B<L4-' <eptarea mesajului pentru trimitere nu #nseamn% obligatoriu % a
fost trimis' 4erverul de pe are se expedia&% mesajul (unde rulea&% sriptul dat) trebuie s%
permit% rularea protoolului 4MT> de expediere a mesajelor eletronie'
-xemplu3 fragment de od pentru trimiterea unui simplu mesaj
081
Po'a(a# W#)
Odestinatar@)loginJmail.iic.md)N
Osubiect@)test)N
Omesa>@)$esa> e5pediat cu 4unctia mail din !#!)N
mailVOdestinatarF OsubiectF Omesa>WN
-xemplu3 trimiterea unui mesaj u inluderea #mpurilor #rom% 2c% @cc'
>entru a mesajul s% poat% on(ine eti!ete HTML #n !eader trebuie ad%ugat Content)t$pe'
,araterele speiale PrPn semnifi% afi$area fie%rei informa(ii pe un r#nd nou' Aperatorul' este
utili&at pentru onatenearea informa(iei respetive #ntr+un singur $ir'
Odestinatar@)loginJmail.iic.md)N
Osubiect@)test)N
Omesa>@)$esa> e5pediat cu 4unc7ia mail din !#!)N
OheaderBaditional @ b$($"*Eersion0 ..-b.)QrQn)N
OheaderBaditional .@ bContent*type0 te5t/htmlN charset@iso*II:T*
.b.)QrQn)N
OheaderBaditional.@ b3rom0 senderJmail.iic.md.)QrQn)N
OheaderBaditional.@ bCc0 ccJmail.iic.md.)QrQn)N
OheaderBaditional.@ b'cc0 bccJmail.iic.md.)QrQn)N
mailVOtoF OsubiectF Omesa>F OheaderBaditionalWN
+.9.3. Conto $n pa'ina W#)
>rogramarea unui ontor #n >H> este simpl%' -l fun(ionea&% dup% prinipiul urm%tor' 9n
momentul #n are este apelat3
des!ide un fi$ier (sau stabile$te o onexiune la o ba&% de date)
iteste valoarea are este memorat% in fi$ier
inrementea&% valoarea u o anumit% valoare
srie noua valoare #n fi$ier (ve!ea valoare se pierde)
9n exemplul urm%tor este pre&entat odul >H> pentru reali&area unui ontor simplu' 4e
utili&ea&% un fi$ier text pentru #nsrierea valorilor' /u se iau #n onsidera(ie adresele
utili&atorilor are aesea&% pagina $i nii freven(a sau data de aes a paginii3
4unction (ncrement#itCounterVOnume4ileW X
/U Onume4ile este numele 4i?ierului de tip te5tF unde se <nscriu
6alorile. 3i?ierul trebuie s aib permisiuni de acces de <nscriere
Vchmod ;;; nume4ile
U/
O6aloareBcontor @ -N
O4p @ 4openV Onume4ileF)r)WN
O6aloareBcontor @ 4readVO4pF ,-T; WN
4closeV O4p WN
O 6aloareBcontor @ VintegerWO 6aloareBcontor ] .N
O4p @ 4openV Onume4ileF)1])WN
41riteV O4pF O6aloareBcontorF ,-T;WN
4closeV O4p WN
echo )!agina a 4ost 6i8itat de O6aloareBcontor ori.)N
Y
K>
0Q7
Capitolul 3
+.9.+. Auto-u)(it $n ? -#"un!#
<est exemplu pre&int% o modalitate prin are datele unui formular vor fi transmise %tre a(ion+
ul aestuia #ntr+un anumit interval de timp'
>entru #neput" s% exemplifi%m un posibil a& #n are putem folosi odul din aest exemplu'
>resupunem % avem de f%ut o pagin% #n are este afi$at% o #ntrebare gril% u x variante de
r%spuns $i un buton @:spunde la ntrebare@' Utili&atorul trebuie s% r%spund% la aea #ntrebare
#ntr+un anumit interval de timp (s% &iem" 07 seunde)' Cup% expirarea elor 07 seunde"
bro:serul va fae automat submit (aeasta #n a&ul #n are utili&atorul nu a ap%sat #n% pe
butonul @:spunde la ntrebare@)' >entru a reali&a aest% pagin% $i pentru a aeasta s%
r%spund% erin(elor noastre" vom folosi od Yava4ript $i >H>'
>agina temp%p0p3
<!DOCT!" #T$% !&'%(C )*//W+C//DTD #T$% ,.-. Transitional//"/) )http0//111.1
+.org/T2/html,/loose.dtd)>
<html>
<head>
<title>Tutorial</title>
<meta http*eZui6@)Content*Type)
content@)te5t/htmlN charset@iso*II:T*.)>
<script type@)te5t/>a6ascript) language@)\a6aCcript)>
4unction dataV6aloareW
X
6aloare**N
6ar numarB8ile@$ath.4loorV6aloare/I;,--WN
6ar secundeBramaseBpentruBore@ 6aloare L I;,--N
6ar numarBore@$ath.4loorVsecundeBramaseBpentruBore /+;--WN
6ar secundeBramaseBpentruBminute@secundeBramaseBpentruBore L +;--N
6ar numarBdeBminute@$ath.4loorVsecundeBramaseBpentruBminute/;-WN
6ar numarBdeBsecunde@secundeBramaseBpentruBminute L ;-N
6ar unitateB8i@) 8ile )N
6ar unitateBora@) ore )N
6ar unitateBminut@) minute )N
6ar unitateBsecunda@) secunde)N
i4VnumarB8ile@@.W
X
unitateB8i@) 8i )N
Y
i4VnumarBore@@.W
X
unitateBora@) ora )N
Y
i4VnumarBdeBminute@@.W
X
unitateBminut@) minut )N
Y
i4VnumarBdeBsecunde@@.W
X
unitateBsecunda@) secunda)N
Y
1indo1.status@numarB8ile]) )]unitateB8i]) )]numarBore]) )]
unitateBora]) )]numarBdeBminute]) )]unitateBminut]) )]
0Q0
Po'a(a# W#)
numarBdeBsecunde]) )]unitateBsecundaN
i4V6aloare<@-W
X
document.4ormular.submitVWN
Y
setTimeoutV)dataV)]6aloare])W)F.---WN
Y
</script>
</head>
<body <Kphp i4V!issetVOB`"T^bautoBsubmitb_WWXecho bon%oad@)dataV.-W)bN
YK> >
<4orm method@)get) name@)4ormular) action@)tmp.php)>
<table align@)center) 1idth@)+-L) cellpadding@).) cellspacing@)9)
border@).)>
<tr>
<td>
(ntrebare0<br />
!#! h limba> de programareK
</td>
</tr>
<tr>
<td>
<input type@)checAbo5) name@)raspuns^_) 6alue@)da)>Da! 0D
</td>
</tr>
<tr>
<td>
<input type@)checAbo5) name@)raspuns^_) 6alue@)nu)>/u!
</td>
</tr>
<tr>
<td>
<input type@)hidden) name@)autoBsubmit) 6alue@).)>
<input type@)submit) name@)raspunde) 6alue@)2aspunde la intrebare)>
</td>
</tr>
</table>
</4orm>
</body>
</html>
-xplia(ia odului3
<script type@)te5t/>a6ascript) language@)\a6aCcript)>
4unction dataV6aloareW
X
//se transmite ca parametru numarul de secunde ramase pina la submit 6aloare**N
//numarul de secunde ramas pina la autosubmit este decrementat cu o unitate
6ar numarB8ile@$ath.4loorV6aloare/I;,--WN
// se calculea8a numarul de 8ile ramase
6ar secundeBramaseBpentruBore@ 6aloare L I;,--N
6ar numarBore@$ath.4loorVsecundeBramaseBpentruBore /+;--WN
// se calculea8a numarul de ore ramase
6ar secundeBramaseBpentruBminute@secundeBramaseBpentruBore L +;--N
6ar numarBdeBminute@$ath.4loorVsecundeBramaseBpentruBminute/;-WN
// se calculea8a numarul de minute ramase
0Q6
Capitolul 3
6ar numarBdeBsecunde@secundeBramaseBpentruBminute L ;-N
// se calculea8a numarul de secunde ramase
6ar unitateB8i@) 8ile )N
6ar unitateBora@) ore )N
6ar unitateBminut@) minute )N
6ar unitateBsecunda@) secunde)N
i4VnumarB8ile@@.W
X
unitateB8i@) 8i )N
Y
i4VnumarBore@@.W
X
unitateBora@) ora )N
Y
i4VnumarBdeBminute@@.W
X
unitateBminut@) minut )N
Y
i4VnumarBdeBsecunde@@.W
X
unitateBsecunda@) secunda)N
Y
1indo1.status@numarB8ile]) )]unitateB8i]) )]numarBore]) )]unitateBora]
) )]numarBdeBminute]) )]unitateBminut]) )]numarBdeBsecunde]) )]
unitateBsecundaN
// se a4isea8a in status bar timpul ramas pina la autosubmit
i4V6aloare<@-W
X
//daca numarul de secunde ramase este mai mic sau egal cu - se 4ace submit
document.4ormular.submitVWN
Y

setTimeoutV)dataV)]6aloare])W)F.---WN // se autoapelea8a 4unctia data
odata pe secunda
// atentieF .--- repre8inta milisecundele V.s@.---milisecundeW
// A /& C" $OD(3(CA AC"ACTA EA%OA2"!
Y
</script>
<Kphp
i4V!issetVOB`"T^bautoBsubmitb_WWX echo bon%oad@)dataV.-W)bN Y
// atit timp cit nu este transmis OB`"T^bautoBsubmitb_ *
// bro1serul 6a apela \a6aCcriptul.
// .- repre8inta numarul de secunde pina la autosubmit.
// !uteti incerca orice alta 6aloare intreaga mai mare ca -.
// (n ca8ul in care parametrul 4unctiei este mai mic sau egal cu -F
// odata cu incarcarea paginii se 6a 4ace autosubmit.
K>
Bolosind aeast% metod%" da% utili&atorul va #nera s% s!imbe data din sistem" numerotarea
invers% nu va fi afetat%' Ca% utili&atorul de&ativea&% Yava4ript" atuni se poate verifia pe
partea de >H> da% s+a r%spuns sau nu #n intervalul dorit (respetive" se ompar% data #nd s+a
primit ererea $i data maxim admis% #nd ererea ar fi trebuit s% fi fost primit% #n a&ul #n are
serverul este aglomerat" se poate lua #n alul $i un delay de x seunde la data maxim admis%)'
0Q5
Po'a(a# W#)
BIBLIOGRA=IE
0' .'Carnell' Totul despre HTML'" Teora" 6776" 077J p' !ttp3 HH:::'teora'ro
6' HTML omplete' 4ybex" 0111" 0762 p'
5' HyperText Markup Language' !ttp3HH:::':5'orgHMarkUpH
8' HTML 8'70 speifiation' !ttp3HH:::':5'orgHT.H.-,+!tml87H
Q' HTML tutorial' !ttp3HH:::':5s!ools'omH!tmlHdefault'asp
?' HTML tutorials' !ttp3HH:::':ebreferene'omH
J' Web aut!oring referene' !ttp3HH:::'!tml!elp'omH
2' Markup validation servie' !ttp3HHvalidator':5'orgH
1' HTML+kit' !ttp3HH:::'!ami'omH!tml+kitH
07' L/U Leneral >ubli Liense' !ttp3HH:::'gnu'orgHopyleftHgpl'!tml
00'HTML tags' !ttp3HH:::'!tmldog'omHrefereneH!tmltagsH
0' Cata formats' HTML in t!e Ka!oo diretory'
!ttp3HHdir'ya!oo'omH,omputersUandU)nternetHCataUBormatsHHTML
6' Cotor HTML' !ttp3HH:::6'imagi:are'omH.xHTMLH
5' Web design' !ttp3HH:::'cuil'bi&HtuitionH,ontents'!tm
8' L/> HTML Tutorials + !ttp3HH:::'globalnetpromotions'om
Q' HTML 070 + !ttp3HH:::'mjeff'omH!tml070H
?' HTML *asis + !ttp3HHfreespae'virgin'netHr'a:leyHlessons'!tml
J' TML *asis Luide + !ttp3HH:::':eb&ila'omH!tmlbasisH
2' HTML *asix + !ttp3HH:::'!tmlbasix'omH
1' HTML ,ookbook + !ttp3HH:::'!tmlook'omH
07'HTML Cevelopers >age + !ttp3HH:::'dada'itH!tmlHindexUe'!tml
00' HTML Loodies Tutorials + !ttp3HH:::'!tmlgoodies'omHprimersH
06' HTML Lite + !ttp3HH:::'!tmlite'omHHTMintro'!tm
05'HTML /et + !ttp3HH:::'!tmlnet'tkH
08'HTML 4oure + !ttp3HH:::'your!tmlsoure'omHfullindex'!tml
0Q'HTML Tips" Help and -xamples + !ttp3HH:::'angelfire'omHflQH!tml+tutorialH
0?'HTML Tutorial for *eginners + !ttp3HHaceel'2m'netH
0J'HTML Tutorials for t!e ,omplete )diot +
!ttp3HH:::'geoities'omH4ilionOalleyH,ampusH0168Hindex'!tml
02' HTML3 <n )nterative Luide for *eginners +
!ttp3HH:::'davesite'omH:ebstationH!tmlH
01')ntrodution to HTML and U.Ls'
!ttp3HH:::'utoronto'aH:ebdosHHTMLdosH/e:HTMLHintro'!tml
67' Manual de HTML' !ttp3HHmanuale'67m'omH
0Q8

5 Specializare Cap3 Programare WEB

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

5 Specializare Cap3 Programare WEB

Încărcat de

Drepturi de autor:

Formate disponibile

Capitolul 3

CAPITOLUL 3. PROGRAMARE WEB

semnul exclamrii inversat

Linie vertical ntrerupt

Paranteze unghiulare(de stnga)

Paranteze unghiulare (de dreapta)

semnul de ntrebare inversat

S-ar putea să vă placă și