PROGRAMARE HTML, XML

CAPITOLUL IX
JavaScript [32, 70, 84],

Combinarea tabelelor cu cadrele i cu alte elemente HTML ofer o gam larg de instrumente pentru realizarea de pagini WEB, dar toate sunt limitate la lucrul ntr o singur dimensiune! totul se petrece pe o coal de "rtie# Marca$ele permit ob%inerea unei dispuneri sofisticate a elementelor pe pagin, dar acele elemente nu pot fi plasate unele peste altele# Cu &a'a(cript, paginile de cas de'in mai inteligente, deoarece rspund la diferitele ac%iuni efectuate cu mouse ul, cu tastatura sau pentru c au fost prescrise o serie de ac%iuni prin instruc%iunile adugate n cadrul fiierului cu e)tensia #html, pe partea de client#

9.1 I tr!"#c$r$ i Java Script [70, 84]

&a'a(cript a adugat o mai mult interacti'itate i func%ionalitate paginilor de cas# *+n la apari%ia sa, singurul mi$loc l ofereau unul din limba$ele de tip script! *erl, oricare din cele trei s"ell uri ,ni) -C s"ell, Bourne s"ell, .orn s"ell/ sau 0B(cript -0isual Basic (cript/# Toate limba$ele de tip script -care se mai numesc i 1limba$e pentru scenarii1/ respect o interfa% comun, cunoscut sub prescurtarea C23 -Common 2ate4a5 3nterface/#

PROGRAMARE HTML, XML &a'a(cript este mai simplu dec+t &a'a, mai pu%in dotat dec+t acesta, i totui se bazeaz pe &a'a# Este mai apropiat de acesta dec+t de marca$ele HTML# 6ac &a'a permite scrierea de aplica%ii de sine stttoare -stand alone/ sau 1compilate1, &a'a(cript nu permite acest lucru pe partea de client# &a'a(cript permite cunosctorului HTML s trateze cu sec'en%e de program adec'ate, di'erse e'enimente ini%iate de ctre utilizator cum ar fi! efectuarea unui clic cu mouse ul, 1sur'olarea1 cu mouse ul a anumitor zone ale unei 1"r%i1 afiate, completarea unui formular sau ac%ionarea unui buton, conturat pe ecran7 organizeaz ferestre n mai multe cadre, fiecare punct+nd spre un document din spa%iul Web# 8ntr un cu'+nt, face rsfoirea unui 'olum mare de informa%ii mult mai uman pentru utilizator# 9iind pregtit pentru ar"itectura client ser'er, pe ecranul unde ruleaz clientul poate aprea un formular cu felurite c+mpuri, unde utilizatorul precizeaz diferite informa%ii sau alege anumite op%iuni# La efectuarea unui clic pe butonul de tip submit, rspunsurile utilizatorului pentru acest formular sunt e)pediate la ser'er, care le prelucreaz# &a'a(cript are o sinta) asemntoare limba$ului C# *rima aten%ionare care trebuie fcut este c, spre deosebire de HTML, de altfel ca i C::, &a'a(cript este ca%$ %$ %itiv$, adic face distinc%ia ntre literele mari i cele mici# (cripturile &a'a(cript sunt interpretate de bro4serele Web, care recunosc &a'a(cript# E)emplu de 3nserare a unui script &;0; intr o pagina HTML!
-

(e utilizeza marca$ul <SC&IPT=, care este o e)tensie a limba$ului Html# La '#a'$ specifica ce limba$ de scripting este utilizat in scriptul inserat7 *us in antetul documentului, scriptul se e)ecuta la incarcarea paginii de catre na'igator# (!c#)$ t > este un obiect predefinit, defineste caracteristicile documentului Html

PROGRAMARE HTML, XML

-

*rit$ > este metoda, aceasta afiseaza un sir de caractere in document#

3nstruc%iunile scrise cu &a'a(cript 'or fi incluse n documentul HTML n interiorul marca$ului <SC&IPT= care este un marca$ perec"e i are marca$ul corespunztor de terminare +,SC&IPT-.

9.2 Str#ct#ra pr!'ra)$.!r JavaScript [70, 77, 84]

PROGRAMARE HTML, XML ,n program n &a'a(cript este format din! partea principal -main/, din sec'en%e de tratare a apari%iei anumitor e'enimente i din func%ii# E'enimentele sunt pro'ocate de ctre micarea mouse lui sau a tastelor, deci n genere, de ctre 'izitator# Part$a pri cipa./ este alctuit din instruc%iuni ce apar n cadrul marca$ului <(C?3*T= i care nu intr n corpul unei functii# 6e fapt, ca i n limba$ul C@C::, main este func%ia principal, numai c acum lipsete 'oid sau int main-/ A ### B, cum se scria n C@C::# Este recomandabil a forma aceasta parte principal c+t mai redus posibil# S$cv$ 0$.$ "$ tratar$ a $v$ i)$ t$.!r sunt CtreziteC i puse s rspund la ac%iunile pe care 'izitatorul paginii de cas le ntreprinde#, e)emlu! atributul O1CLIC234 #)$5"$56# cti$784. 9unc%iile sunt scurte sec'en%e de program ce pot fi apelate de ctre alte func%ii, deci i de partea principal a programului, care poate fi socotit tot o func%ie# 9unc%ia are un nume care este precedat de cu'+ntul function# 6upa nume urmeaza, intre o perec"e de paranteze rotunde, lista parametrilor formali, crora li se atribuie n mod pozi%ional 'alorile reale ale argumentelor din lista de apel# *utem atribui 'alori i in'ers, dinspre func%ie spre sec'en%a care a apelat o#

9.3 9.$)$ t$.$ "$ :a;/ a.$ .i):a<#.#i [70, 84]

=aria:i.$.$, c!)$ tarii.$ >i c! %ta t$.$ se declara ca si in C/C++ cu urmatoarele nuantari: comentariile in &a'a(cript accept i forma canonic a limba$ului C de comentariu @D t$?t p$ )ai )#.t$ r@ "#ri c! %$c#tiv$ D@ , oferind o oarecare rela)are, n sensul c te)tul e)plicati' poate fi continuat pe oric+te linii de te)t ca in e)emplul urmator!

PROGRAMARE HTML, XML @D ;cesta este un comentariu n &a'a(cript care poate fi folosit i pentru programele scrise cu C# D@ datele scrise ntre g"ilimele se numesc literali# ,n literal este aadar scris ca un 4'r#p "$ c#vi t$ A ca"rat "$ 'Bi.i)$.$ t$r)i a.$4. Literalii pot fi defini%i i astfel! C'r#p "$ c#vi t$ A ca"rat "$ ap!%tr!a6$C. Eu se admit mi)turi de genul! Cte)tF# sau Gte)tC# *entru a include g"ilimelele n cadrul te)tului, se recurge la caracterul special H , deci se 'a scrie HC# ;postroafele sunt admise ntre g"ilimele, i reciproc#
-

denumirile 'ariabilelor nu 'or fi admise s nceap cu cifre sau semne speciale# Ele pot ncepe ns cu semnul 1I1 sau cu o liter alfabetic# fiecare 'ariabil are un domeniu al su unde este recunoscut#

6eoarece &a'a(cript este un limba$ n care nu se pot declara -ca n C::@ C/ tipurile 'ariabilelor folosite, la momentul interpretrii se stabilete din conte)t daca tipul datei coincide cu operatorul sau func%ia care i se aplic asa cum se 'ede pe urmatoarea sec'enta! 'ar a J KLL )JKLL:a aJCscripturiC )JCKLLC : a @@ aici a este o 'ariabila numerica @@ ) 'a lua 'aloarea MLL @@ a poate fi redefinit ca 'ariabila de tip sir @@ aici se 'or obtine KLL scripturi

8n continuare este prezentat un mic program &a'a(cript, n care apare i o parte de dialog# Este de fapt un formular n care 'izitatorul 'a specifica parametrul razaCerc i n alt c+mp 'a primi rspunsul, adic lungimea sa#

PROGRAMARE HTML, XML

,rmeaz sursa!

Dup ce a fost precizat valoarea razei cercului, cnd se efectueaz un clic pe butonul Declanai calculul, n caseta cu denumirea intern LungimeCerc se va anuna valoarea calculat.
-

&a'a(cript folosete si tipul de date logic# 0alorile literalilor booleeni sunt! CfalseC -'aloare falsa/ i CtrueC -ade'rat/#

PROGRAMARE HTML, XML

-

dintre constantele speciale folosite n &a'a(cript mentionm! sec'en%ele care ncep cu bara in'ers denumite i secvene escape: D: -napoi un caracter, backspace , D6 -a'ans la linia nou, line feed , D -o linie nou, ne! line , Dr -ntoarce carul, carria"e return , Dt -caracterul de tabulare orizontal, tab i HC -insereaz g"ilimele n irul literal/#

9?pr$%ii.$ >i !p$rat!rii sunt ca si in C:: cu urmatoarele nuantari!

-

se pot efectua atribuiri multiple de forma! v3v13E3v 3$?pr$%i$, unde v1, E,v sunt 'ariabile in care principiul de e)ecutare este e'ident# ;tribuirea este un operator care figureaz ntr o e)presie# Ca orice e)presie, aceasta are o 'aloare rezultat n urma e'alurii# 8n cazul atribuirilor, 'aloarea rezultat este 'aloarea atribuit 'ariabilei care este prima din st+nga ntr un ir de atribuiri#

operatorii rela%ionali sunt operatori binari, care ntorc o 'aloare logic, true dac rela%ia este ade'rat, sau false, dac rela%ia nu este ade'rat#

pentru con'ersii for%ate ir #$ numr se folosesc dou func%ii! par%$I t78 i par%$F.!at78# 9iecare 'a con'erti un ir ntr un numr, prima, ntr unul de tip ntreg, a doua, ntr unul de tip real, firete, dac acest lucru este posibil# (ec'en%a de mai $os e)emplific acest lucru! 'ar a J CKLLLC b J parse3nt-a/ 'ar a J C&a'aC b J parse3nt-a/ 'ar a J CKMN#OPC b J parse9loat-a/ @@b 'a a'ea 'aloarea numeric KMN,OP @@se 'a solda cu mesa$ de eroare @@definim literalul KLLL @@b 'a a'ea 'aloarea ntreag KLLL

datele octale, adic cele scrise n baza sistemului de numera%ie Q, 'or ncepe obligatoriu cu cifra L# 6eci, numrul LKMN 'a fi considerat numrul KMN n baza Q i nu n baza KL#6e fapt, 'aloarea zecimal a lui LKMN 'a fi K)QM : M) QK% N J RO : KR J QN#

PROGRAMARE HTML, XML

-

in &a'a(cript se poate am+na interpretarea unei e)presii, p+n c+nd 'izitatorul 'a specifica e)presia i apoi 'a apela la ser'iciile func%iei $va.78 pentru a calcula c+t este, aa cum rezult din urmtorul program amplasat n conte)tul unui document "tml!

I %tr#c0i# i.$ .i):a<#.#i sinta) i semantic #

&a'a(cript sunt cele de la C:: a'+nd aceiai

PROGRAMARE HTML, XML

9.4 O:i$ct$.$ .i):a<#.#i JavaScript [32, 70, 77]

Sbiectul are o serie de caracteristici -propriet%i/ si o serie de func%ii# E)ist i obiecte al cror con%inut nu se sc"imb numite obiecte statice# Mai e)ist i obiecte create de programator, care, ca i unele dintre obiectele &a'a(cript, trebuie instan%iate# &a'a(cript este un limba$ CbazatC i nu CorientatC pe obiecte, aa cum este C:: care face parte din genera%ia a O a -O2L/# 8n programarea orientat pe obiect nt+lnim o mul%ime de limba$e, unele orientate pe clase, altele, numai pe obiecte, altele, pe ambele# Conceptul, destul de 'ec"i a aprut prin KTRU la *alo ;lto, n cadrul companiei VE?SV, prin limba$ul (maltalW *rogramarea orientat pe obiect a coincis cu perioada limba$elor din generatia a patra# Ea a adus cu sine o economie de timp pentru rescrierea codului, prin reutilizarea codurilor scrise, conduc+nd n final la creterea eficien%ei muncii de concepere# 6ac n perioada limba$elor N2L, 9S?T?;E ul alturi de CSBSL i *L@l alctuiau fondul de limba$e foarte populare, n perioada O2L ntlnim! C::, CLS( -&ommon '()* +b,ect )-stem , Sb$ect *ascal, Eiffel -un fel de *ascal foarte reuit/7 apoi treptat trec pe obiecte i Cobol ul, i Basic ul ./icrosoft 0isual 1asic sau /icrosoft 01 for 2pplications, un dialect 0B folosit n M( E)cel/ etc# Eu putem nc"eia enumerarea fr &a'a, primul limba$ orientat pe obiecte pentru mediul de re%ea# ,n obiect apare ca urmare a procesului de instan%iere a unui ablon de date, numit c.a%/# ;cest ablon poate fi considerat drept un sertar, n

PROGRAMARE HTML, XML care se gsesc o serie de despr%ituri unele pentru pstrarea datelor, altele pentru di'erse func%ii folosite n tratarea acestor date# 8n programarea orientat pe obiect -SS* Sb$ect Sriented *rogramming/ aceste func%ii se numesc )$t!"$# 6e pild, autobuzul este un obiect, a'ionul este altul, autoturismul este altul, etc## Toate deri' din clasa 'e"icule, care la r+ndul lor deri' din clasa mi$loace# E)ist mi$loace care nu sunt deplasabile pe teren precum rac"eta i altele deplasabile pe pm+nt precum cele de mai sus# (e obser' deci o ierar"ie a obiectelor# *utem considera ablonul, de e)emplu al unui a'ion, drept proiectul su de construc%ie# (e spune despre un obiect c posed o serie de propriet%i, aa cum ar fi autoturismul care are o anumit greutate, un anumit numr de cai putere, dez'olt o anumit 'itez, etc## Sbiectele con%in o serie de func%ii -metode/, de asemenea ncapsulate# 9?$)p.# obiectul /ath din &a'a(cript al carui con%inut se refer, la anumite 'alori caracteristice, -crora li se spune propriet%i/ sau func%ii frec'ent folosite# 6intre propriet%ile sale enumerm! /ath.3 # 'aloarea numrului e, /ath.ln4# valoarea logaritmului neperian al cifrei M, -adic L,RTN/, /ath.ln56#'aloarea pentru lnKL, -deci M,NLM/7 /ath.*( . XJN#KO/7 etc# 6ar /ath con%ine i o serie de metode pentru calculul func%iilor trigonometice directe precum! /ath.sin, /ath.cos, /ath.tan7 sau in'erse precum! /ath.asin, /ath.acos, /ath.atan, /ath.atan47 pentru rotun$irea 'alorilor! /ath.ceil -de e)emplu ceil-lMN,RU/ 'a da KMO/ sau /ath.floor -de e)emplu, floor-lMN,RU/ 'a da KMN/# Mai ntlnim! /ath.lo", /ath.min.v5,v4 , /ath.ma8.v5,v4 , /ath.random pentru generarea numerelor aleatoare cu distribu%ia uniform# E)ist i /ath.round -de e)emplu, round-RR,OP/ d RR, dar round-RR, PK/ 'a da RU/ etc# (e obser' c propriet%ile ca si metodele sunt unite prin intermediul operatorului punct -#/ de clasa respecti'# 8n limba$ul &a'a(cript se prefer denumirea de obiect n locul celei de clas#

PROGRAMARE HTML, XML L defini%ie a obiectului, ar putea fi urmtoarea! obiectul este o entitate, o structur abstract de date, constituit din propriet%i i metode# *ropriet%ile se pot asimila datelor -constante sau 'ariabile/, iar metodele, func%iilor# (punem c &a'a(cript nu este dec+t bazat pe obiecte, nu i orientat spre ele pentru c obiectelor acestui limba$ le lipsesc N caracteristici ale teoriei SS* .+b,ect +riented *ro"rammin" : motenirea, ncapsularea i abstractizarea# Corpora%ia Eetscape Communication a definit propriul concept, cunoscut sub numele JavaScript O:<$ct G!"$. -&SM/# &SM con%ine totalitatea obiectelor, propriet%ilor, metodelor dar i 'ariabilelor i func%iilor din uni'ersul 9etscape. Sbiectele Eetscape nu trebuie confundate cu cele ale limba$ului &a'a(cript# ;ceeai corpora%ie a lansat programul de na'igare Eetscape Ea'igator, pentru partea client# Tot ea a creat i o serie de 'ersiuni pentru partea de ser'er# Este 'orba despre! Eetscape Entreprise (5stem -platforma ,ni)/, Eetscape Li'eWire -platforma Windo4s@ET/ sau Eetscape (er'er (5stem# 9iecare dintre aceste categorii de programe opereaz cu o serie de obiecte specifice# 3n cele ce urmeaz numim partea client, pe scurt 9avi"ator, i partea server, pe scurt 'ive:ire. *e partea 9avi"ator se pot folosi o serie de obiecte con%inute n nsui acest ;ava)cript +b,ect /odel, dar se pot defini i altele proprii# *e osatura unui document <=/' se folosesc facilit%ile limba$ului &a'a(cript i se pot afia o serie de ferestre, cadre, casete de dialog, unde s apar tot felul de mesa$e, resurse grafice# (e pot 'alida sau e'alua e)presii n care apar i 'ariabile, nu numai date numerice sau literali, se pot c"iar prelucra date sosite de la Li'eWire# *e partea 'ive:ire, n &a'a(cript e)ist posibilitatea de a scrie scenarii n care s fie procesate toate solicitrile sosite de la diferi%i clienti

PROGRAMARE HTML, XML -diferite programe de 'izitare care recurg la &a'a(cript/, care trimit informa%ii cerute prin aceste scenarii, sau de a accesa ser'er e de baze de date, pentru fiiere sau care con%in biblioteci de aplica%ii scrise n C, &a'a etc# (e pot c"iar adapta di'erse aplica%ii de tip applet scrise n limba$ul &a'a#

9.H ($6i ir$a >i 6!.!%ir$a pr!prii.!r !:i$ct$ A JavaScript[70]

&a'a(cript dispune de o serie de obiecte ale sale care organizeaz o serie de date, dar i func%ii -metode/ ce opereaz asupra acestor date# ;ceste obiecte unele de$a e)istente n &a'a(cript, altele create de utilizator pot fi cuplate, ntre ele sau legate de elementele <=/' d+nd posibilitatea efecturii di'erselor calcule matematice sau crerii diferitelor resurse! te)t, ferestre, formulare, cadre etc# (inta)a general pentru folosirea unei anumite propriet%i a unui obiect este! #)$O:i$ct. #)$Pr!pri$tat$. 3n &a'a(cript un obiect propriu se creaz parcurg+nd dou etape: definirea obiectului i crearea-instan%ierea/ obiectului# 9?$)p.## 6efinim obiectul ;utoturism cu func%ia auto-/ care are N parametri! tip, 'itez, an fabrica%ie, prin sec'en%a! function auto -sTip, i0iteza, i;n/ At"is#TipJsTip7 t"is#0itezaJi0iteza7 t"is#;n9abJi;n7B La definirea obiectului se poate atasa, pentru denumiri c+te o liter de nceput care anun% tipul 'ariabilei! s ir, i numr ntreg# Cu'+ntul rezer'at tBi%. este un operator cu care se face referire la obiectul curent# 3nstan%ierea obiectelor n &a'a(cript se face prin operatorul ne4 -ntocmai ca n C::/#

PROGRAMARE HTML, XML *entru obiectul ;utoturism definit mai sus putem acum instan%ia oricate obiecte de acest tip, sub urmtoarea form! ;utoturism;Jne4 auto-YCieloF,KQL, KTTP/ ;utoturismBJne4 auto-Y6aciaF, KML, MLLN/ ;utoturismCJne4 auto-Y9ordF, MLL, MLLL/ *utem crea oric+te astfel de obiecte# 3nstruc%iunile de atribuire de mai sus seamn cu cele ale unui constructor din C::# Speratorul ne4 'a aloca resursele -de memorie/ necesare pentru ntreaga structur de date a obiectului# ;dugm i o metod obiectului ;utoturism care calculeaz numrul de Wm parcuri de acesta# *arametrul intern al obiectului afectat de aceast func%ie n sensul creterii sale este Lungime # ?escriem func%ia a#t!78, ca s anun%m i metoda Parc#r% ca membr a acestui obiect! function auto-sTip, i0iteza, i;n/ A t"is#Tip t"is#0iteza t"is# ;n9ab t"is#Lungime t"is#*arcurs J sTip,# J i0iteza7 J i;n! J L7 J *arcurs! B

Codul metodei Parc#r% ar putea fi de forma! function *arcurs-i.m/ A t"is#Lungime Jt"is#Lungime :i .m7

9.I O:i$ct$ %p$ci6ic$ .i):a<#.#i JavaScript [70, 77, 84]

O:i$ct#i (at$ este destinat mane'rrii datelor calendaristice dar i orei, pentru afiarea n cadrul paginii de cas# ;cest obiect nu posed

PROGRAMARE HTML, XML propriet%i, n sc"imb are 'reo ML de metode, i nu se pot prelucra date anterioare anului KTUL# ,n obiect Date se creeaz astfel! "ata($A;i 3 $J (at$K Metodele sunt apelate prin constructia! #)$5!:i$ct5tip5(at$. #)$5)$t!"a. O:i$ct$.$ %tatic$ sunt cele care nu se sc"imba# GatB este un astfel de obiect, deoarece el nu se sc"imb, cum se nt+mpl n cazul obiectului Date. +biectele statice nu trebuie instaniate. ;stfel prin! 'ar numar;leator J Mat"#random-/ am atribuit 'ariabilei numar;leator o 'aloare aleatoare generat cu metoda random a obiectului /ath# ;lgoritmul ascuns n random asigur generarea unui numr aleator cu distribu%ia uniform n mul%imea ZL,K/# 6ac dorim s generm numere aleatoare ntre doua limite, nl i n4, 'om scrie! 'ar numar;leator J nK : -nM nK/D Mat"#random-/ Srice proprietate a unui obiect static poate fi accesat prin construc%ia! !:i$ct5%tatic. pr!pri$tat$ (copul -adica domeniul unde denumirea unui obiect este recunoscut/ unui obiect difer n func%ie de aplica%ie# *entru partea Ea'igator, obiectul este recunoscut n pagina curent de cas, n care a e)istat scenariul cu obiectul respecti'# 8n conte)tul Li'eWire, un obiect poate fi recunoscut i n alte pagini de cas, nu numai n pagina curent# O:i$ct#. %tri ' este de asemenea un obiect static si se refer la iruri de caractere ce pot fi afiate cu diferite caracteristici tipografice# (ingura proprietate a acestui obiect este numit .$ 'tB, adic lungime, i cuprinde numrul caracterelor -litere, cifre, semne speciale/ pe care le con%ine obiectul la un moment dat# Metodele obiectului string i semnifica%iile lor sunt ZUL[! anc"or-/ big-/ blinW-/ 0a crea un te)t pe post de ancor \irul 'a fi afiat cu un corp de liter mai mare \irul cruia i se aplic 'a pulsa

PROGRAMARE HTML, XML bold-/ c"ar;t-/ fi)ed-/ fontsize-/ inde)Sf-/ italics-/ last3nde)Sf-/ \irul 'a aprea cu caractere ngroate *reia un caracter din ir care fusese adresat prin intermediul unui inde) ;re efectul similar cu al marca$ului <TT= (tabilete mrimea corpului de liter cu care 'a fi afiat pe ecran irul respecti' *reia 'aloarea offset ului acelui caracter care este cutat ntr un ir, plec+nd de la 'aloarea from3nde) (imilar marca$ului <3= (e caut ultima apari%ie a unui caracter ntr un ir# 0aloarea acelui inde) 'a fi con%inut de acest linW-/ small-/ striWe-/ sub-/ substring-/ parametru Creeaz o legtur de tip "iperte)t# (imilar cu <; H?E9]= spre o resurs de tip ,?L ;fieaz irul cu corp mic de liter ;fieaz irul barat cu o liniu% \irul 'a fi afiat ca indice inferior *reia un ir par%ial dintr un ir#*arametrii ceru%i de aceast metod sunt inde); i inde)B# ;mbii fi)eaz sup-/ toLo4erCase/ to,pperCase/ limitele acelui ir redus ;fieaz acel ir ca indice superior Con'ertete literele alfabetice mari ale unui ir n litere mici Con'ertete literele alfabetice mici ale unui ir n litere mari

O:i$ct#. numit )a%iv .arra- este un grup de doua sau mai multe elemente omo"ene. *rin intermediul unui indice, se poate face referire la unul din aceste elemente# Ca si in C:: in &a'a(cript se consider c indicele pornete de la L# (pre deosebire de C@C:: sau &a'a, &a'a(cript nu oblig specificarea tipului datelor# E)emplu# 9ie obiectul elev cu urmtoarele propriet%i! nume, adres, '+rsta, se), clas, coal, boli# ,ltimul parametru nu este un ir de literali, pentru c aceasta ar ocupa foarte mult, ci un nume care ascunde n el ce

PROGRAMARE HTML, XML boli a fcut ele'ul -KJpo$ar, MJscarlatina, OJoreion, QJru$eola, KRJ'rsat de '+nt/# 9unc%ia de tip constructor a acestui obiect ar fi definit astfel! function ele'-sEume, s;dresa, i0arsta, i(e), sClasa, s(coala, sBoli t"is#nume t"is#adresa t"is#'arsta t"is#se) J sEume7 J s;dresa7 J i0arsta7 J i(e)7 t"is#Clasa t"is#(coala t"is# Boli J sClasa! J s(coala7 J sBoli7

9iecare proprietate poate fi ini%ializat cu 'alori referitoare la di'eri subiec%i# Ca s ne referim la una dintre persoane i, n cadrul ei, la una dintre propriet%i, 'om crea dou obiecte de tip Ele' prin sec'en%a urmtoare! for -iJL7 i<M7 i::/ At"is-i/Jne4Ele'-/ t"is-L/-L/JF3on BiancaF t"is-L/-K/JF(tr# ;zurului nr KNF t"is-L/-M/JKU t"is-L/-N/JFfF t"is-L/-O/JFVF t"is-L/-P/JFLiceul SdobescuF t"is-K/-L/JFMarin 3onF t"is-K/-K/JF(tr# Lu$erului nr# PF t"is-K/-M/JKT t"is-K/-N/JFmF t"is-L//-O/JFV33F t"is-L/-P/JFLiceul BasarabFB

*utem accesa propriet%ile unui obiect creat sub forma! document#4rite-Y0arsta lui Y:t"is-L/-L/:FesteF:t"is-L/-M/:F<B?=F/ ;cest mod de programare este destul de greoi deoarece nu apare deloc numele e)plicit al obiectului# (e folosete operatorul t"is at+t pentru a referi obiectul c+t i pentru a accesa di'erse propriet%i ale acestuia, obiectul apr+nd doar ca o list de elemente# (e remarc totui c limba$ul &a'a(cript admite i ma)ime multidimensionale n care primul indice se refer la obiect iar al doilea la propriet%ile acestuia#

PROGRAMARE HTML, XML

9.7 F# c0ii pr!prii JavaScript [70, 32, 84]

Funcia eval() are formatul $va.7>ir8# (copul func%iei $va.78 este s analizeze corectitudinea sintactic a unui ir# \irul poate fi orice e)presie n care pot aprea i denumiri de 'ariabile din acel program, care au fost analizate de$a7 se admit i denumiri de propriet%i ale obiectelor# 9unc%ia nu ser'ete doar la analize sintactice ci i la calcularea 'alorii e)presiilor numerice # \irul poate fi format din una sau mai multe instruc%iuni# E)emple!

alert-e'al-1KN:ML1//7 aJU7 PDe'al-ND::a/7 alert-a/7

afieaz NN7

afieaz KML7

alert-e'al-1M1:1P1//7 afieaz MP7 \irul ir trebuie s fie format doar din cifre, ale sistemului zecimal,

Funcia parseInt() are formatul ! par%$. t7%ir, :a;a5"$5 #)$rati$8 octal sau "e)azecimal# El nu trebuie s aib parte fractionar# 6ac aceasta din urm e)ist totui, ea 'a fi trunc"iat# 8n cazul n care faza de parsin" eueaz 'a fi anun%at un cod de eroare care este L pentru platforma Windo4s i EaE pentru platforma ,ni)# ;ceasta se nt+mpl i c+nd primul caracter din ir nu este conform conte)tului# Funcia parseFloat() are formatul par%$F.!at7%ir, :a;a5"$5 #)$rati$8 (e admit, n afara numerelor cu parte frac%ionar -e)emplu KL#MNO sau KNP# sau #KNP/ i numere scrise dup nota%ia stiinific, adic cu e)ponent -e)emplu! KM#OPe MO/# Este 'alabil i aici obser'a%ia referitoare la codul de eroare# Funcia escape() are formatul $%cap$ 7%ir8

PROGRAMARE HTML, XML ;re rostul de a con'erti un ir de caractere ;(C33 n coduri admise de ()+.'atin#5# 6e multe ori, ntr o adres de tip ,?L trebuie transmis un caracter de tabulare, tab -fie un @ sau H etc#/# Eu e)ist alt modalitate dec+t folosirea acestei func%ii, dinspre limba$ul &a'a(cript# Funcia unescape() are formatul # $%cap$ 7%ir8 Este in'ers func%iei anterioare# 0a con'erti un ir de caractere ()+# 'atin# 5 n coduri ;(C33# Funcia number are formatul #):$r 7%ir8 ?olul ei este de a con'erti irul n 'aloare numeric# 8n cazul n care irul nu se poate con'erti ctre o 'aloare numeric, returneaz constanta de eroare EaE -Eot a Eumber/# 9?$)p.$. alert-number-1KN1/:number-1P#M1//7 afieaz KQ#M alert-number-1M)1//7 afieaz EaE Funcia isNaN ?eturneaz tr#$ dac irul nu poate fi con'ertit ctre o 'aloare numeric i 6a.%$ n caz contrar# 9?$)p.$. alert-isEaE-1MN1//7 returneaz false alert-isEaE-1MNa1//7 afieaz true#

9.8 O:i$ct$.$ %p$ci6ic$ p/r0ii c.i$ t [70, 81, 84]

9.8.1 O:i$ct#. Ji "!J Bro4ser ul afieaz informa%iile cu a$utorul ferestrelor# El poate afia mai multe ferestre simultan# Sbiectul Ji "!J este de ni'elul cel mai nalt i are rolul de a permite lucrul cu ferestrele# 6atorit faptului c acest obiect are ni'elul cel mai nalt, nu mai este necesar s fie folosit Ji "!J naintea

PROGRAMARE HTML, XML metodelor sau propriet%ilor obiectului# 3nstan%a unui obiect Ji "!J este o fereastr afiat de bro4ser# Ca orice obiect, Ji "!J are anumite metode i propriet%i! 9.8.1.1 G$t!"$ K# Metoda !p$ 76i>i$rLBt)., fereastr# *arametrii sunt! fiierI"tml > adresa ,?L a fierului "tml care este ncrcat de fereastr7 nume > numele ferstrei7 parametri > mai mul%i parametri care au rolul de a specifica modul n care 'a fi afiat fereastra pe ecran# ;cetia sunt! t!p > distan%a n pi)eli fa% de partea de sus a ecranului la care 'a fi afiat fereastra7 .$6t distan%a n pi)eli fa% de partea din dreapta ecranului la care 'a fi afiat fereastra7 Ji"tB > l%imea ferestrei n pi)eli7 B$i'Bt > nl%imea ferestrei n pi)eli r$%i;a:.$ > poate lua una din 'alorile M$% sau !# 6ac ia 'aloarea M$%, utilizatorul poate modifica dimensiunile ferestrei7 )$ #:ar t!!.:ar poate lua una din 'alorile M$% sau poate lua una din 'alorile M$% sau !# 6ac ia 'aloarea !# 6ac ia 'aloarea M$%, fereastra afieaz meniul bro4ser ului7 M$%, fereastra afieaz bara cu instrumente a bro4ser ului7 %tat#% poate lua una din 'alorile M$% sau !# 6ac ia 'aloarea M$%, fereastra afieaz bara de stare7 .!cati! poate lua una din 'alorile M$% sau !# 6ac ia 'aloarea !# 6ac ia M$%, fereastra afieaz edit ul care con%ine adresa fiierului "tml7 c!pMBi%t!rM poate lua una din 'alorile M$% sau 'aloarea M$%, copiaz istoria apelurilor ferestrei printe# #)$, para)$tri8 are rolul de a desc"ide o

PROGRAMARE HTML, XML M# Metoda c.!%$78 are ca efect nc"iderea ferestrei curente. 8n e)emplul urmtor, la apsarea unui buton se desc"ide o fereastr, iar la apsarea altui buton fereastra se nc"ide!

PROGRAMARE HTML, XML 6ac numele ferestrei nu este precizat, metoda close-/ nc"ide fereastra curent# Totui, nainte de a nc"ide efecti' ferastra, 'a aprea o caset de dialog prin care se solicit utilizatorului s confirme dac 'rea s nc"id fereastra# N# Metoda 6!c#%78 are rolul de a acti'a o ferastr# S fereastr acti' este 'izibil pe ecran i recep%ioneaz e'enimentele de la mouse -e'entual tastatur/# S fereastr poate fi acti'at printr un clicW asupra ei, dar i prin metoda focus-/# O# Metoda ! :.#r78 are rolul de a dezacti'a o ferastr# S fereastr inacti' poate fi aezat pe bara de tasW uri, dar poate fi i pe ecran, caz n care poate fi acoperit de suprafa%a altei ferestre# S ferastr poate fi dezacti'at dac se e)ecut clicW pe suprafa%a altei ferestre, dar i cu a$utorul metodei onblur-/, caz n care ea 'a fi prezent doar pe bara de tasW uri# 9.8.1.2 Pr!pri$t/0i S proprietate deosebit de util este %tat#%# 0aloarea re%inut de aceast proprietate 'a fi afiat pe bara de stare# ;lte propriet%i importante sunt! "!c#)$ t, 6ra)$, Bi%t!rM, .!cati! # ;cestea sunt, la r+ndul lor obiecte# O:i$ct#. "!c#)$ t Este de mare comple)itate i con%ine mai multe propriet%i i metode# *rintre acestea a'em proprietatea de tip obiect a..# Ea este un 'ector al tuturor elementelor care se gsesc pe pagin# Microsoft numete o astfel de proprietate Colec%ie, 9iecare element este tratat ca obiect# *rintre elementele -obiectele/ care fac parte din 'ector gsim! NTGL, N9A(, OO(P, TITL9 -c"iar dac nu este trecut tag ul respecti'/, STPL9, SC&IPT, c+te un element pentru fiecare paragraf-P/, imagine-IGQ/, etc# 9iecare

PROGRAMARE HTML, XML element -obiect/ con%inut are o anumit proprietate, numit ta'1a)$, care re%ine tipul# La r+ndul ei a.. are mai multe propriet%i i metode, printre care!

.$ 'tB > numrul de componente ale 'ectorului7 metoda ta'%7tip8 > returneaz un 'ector al elementelor de un anumit tip# 9iind 'ector, are proprietatea .$ 'tB, care permite adresarea tuturor elementelor7

metoda it$)7i"8 > returneaz elementul -obiectul/ de i" dat7 a cB!r% > 'ector ce re%ine elementele de tip ancor -A/7 i)a'$% > 'ector care re%ine toate elementele de tip imagine -IGQ/7 :'C!.!r > proprietate care re%ine culoarea de fond a documentului7 6'C!.!r > proprietate care re%ine culoarea font urilor7 .i RC!.!r > proprietate care re%ine culoarea de scriere a legturilor7 metoda Jrit$78 > se folosete pentru scrierea integral a unui fiier HTML etc#

*e 3nternet se gasesc numeroase site uri cu scripturi free# ;ceste scripturi pot fi inserate in paginile WEB create de utilizator# 3maginea urmatoare este un e)emplu de inserare a unui astfel de script free #

PROGRAMARE HTML, XML Codul sursa al programului care afiseaza rezultatul lungimii cercului peste care alearga cei doi fluturi se gseste in ;ne)a N# Codul pentru fluturi este free si a fost luat de pe site ul! JJJ."i a)ic"riv$.c!).

PROGRAMARE HTML, XML

CAPITOLUL X
CSS, XGL, XNTGL [200, EEE..],
10.1 Cat$va !ti# i "$%pr$ .i):a<#. "$ pr$;$ tar$ CSS
8n structura unui document HTML pe langa scripturi apar si foile de stil# S foaie de stil se creaza cu elementul (T^LE, si defineste felul n care 'a arta documentul, inclusi' familia de caractere, fontul, culorile, c"enarele, marginile i alinierea# *rin adugarea foilor de stil, ca un element de structur al documentului, nf%iarea i con%inutul sunt separate# (T^LE i (C?3*T sunt unice prin faptul c structura depinde de con%inutul lor# 9ormatarea, sinta)a i definirea stilului 'ariaz n func%ie de designer! foi de stil n cascad sau foi de stil &a'a(cript# 9oile de stil, n particular C(( > Cascading (t5le ("eets, descriu modul n care documentele Web sunt prezentate pe ecran, imprimant sau alte medii# Ele aduc imbunatatiri paginilor WEB, fiind foarte utile in proiectarea acestora# Limb$aul C((M este un limba$ al foilor de stil care permite programatorilor i utilizatorilor s ataeze stiluri -set de caractere, pozi%ionare, culoare etc#/ documentelor structurate, cum ar fi paginile HTML sau aplica%iile VML# 9oile de stil trebuie sa fie recunoscute si interpretate de na'igatoare# (pecifica%iile HTML definesc modul n care se utilizeaz HTML cu foile de stil# E)ist patru moduri pentru combinarea foilor de stil cu paginile HTML!
-

utilizarea elementului _L3E._ pentru a face legtura ctre o foaie de stil e)tern7

PROGRAMARE HTML, XML

-

declararea elementului _(T^LE_ n cadrul tag ului _HE;6_7 importul unei foi de stil utiliz+nd comanda C((_` import_7 asocierea atributului _(T^LE_ unui alt element din corpul documentului -_BS6^_/#

9iecare r$'#./ "$ %ti. CSS este compus din!

-

selector _HK_ care indic elementul sau elementele asupra crora ac%ioneaz regula7 blocul declara%iilor _color! red_ care descrie condi%iile de redare fizic a elementului specificat, fiind limitat de acolade#

*entru a include regulile de stil ntr un document HTML se utilzeaz elementul STPL9#

PROGRAMARE HTML, XML

9?$)p.#. 6!.!%$%t$ %ti.#. i 5.i $, ata%at "ir$ct # #i $.$)$ t pri atri:#t#. %tM.$. ;tributele elementului (T^LE sunt! t-pe > tip?coninut , specific liba$ul foii de stil i este obligatoriu, nu e)ist o 'aloare implicit# media J descriptor media, 0aloarea implicit este FscreenF# Eumele ales pentru descriptor media corespude dispoziti'ului pentru care propriet%ile prezentate au sens!
-

all > corespunde pentru toate dispoziti'ele7 aural > sintetizator 'ocal7 braille > terminal Braile7 embossed > imprimant Braille7 "and"eld > microcalculator de buzunar! a'+nd un ecran mic, monocrom i conectarea n re%ea se face prin modem la un debit redus7 print > dispoziti'ul imprimant7 pro$ection > dispoziti'e de protec%ie pe perete7 screen > ecranul calculatorului7 tt5 > dispoziti'e portabile, terminale7 t' > dispoziti'e de tip T0#

PROGRAMARE HTML, XML Este indicat ca regulile de stil s fie memorate ntr un fiier e)tern, care poate fi parta$at de mai multe documente# (e spune ca se lucreaza cu foi de stil definite in fisiere e)terne# S foaie de stil e)tern poate fi scris cu orice alt editor de te)te, nu 'a include nici un tag HTML i 'a fi sal'at cu e)tensia #css# Comentariilor in C(( se introduc astfel! @D comentariu C(( D@

Legtura ctre foaia de stil e)tern se asigur prin elementul LI12#

PROGRAMARE HTML, XML

Elementul L3E. are trei atribute obligatorii! t5pe cu 'aloarea Fte)t@cssF, rel cu 'aloarea aast5les"eetF si F"refF care are ca 'aloare ,?L ul foii de stil e)terne (pecifica%iile oferite prin elementul L3E. sunt! Srice foaie de stil con%ine o list de comenzi, care sunt identificate din ansamblul de reguli declarate reguli predefinite# ?egulile predefinite, ale cror nume incep cu cu simbolul _`_ -at/, urmat imediat de un identificator, permit ob%inerea unor func%ii care nu sunt accesibile regulilor normale# ;ceste reguli predefinite sunt!
-

`page > aplic stilurile paginilor documentului7 `import > insereaz o foaie de stil e)tern n foaia de stil curent7 `media > regrupeaz regulile de stil care se 'or aplica unuia sau mai multor dispoziti'e pentru prezentarea documentului7 `font face > descrie setul de caractere utilizat prin foaia de stil7 `c"arset > definete codul caracterelor utilizat prin foaia de stil# EEEEEEEEEEEEEEE

10.2 XGL -E)tendet MarWup Language/ XGL este un limba$ comun folosit de te"nologiile soft4are pentru transferul de informatii intre di'erse aplicatii din 3nternet# VML nu inlocuie HTML ul#

PROGRAMARE HTML, XML HTML este orientat spre modul de afisare a informatiei dupa directi'ele HTML, VML ofera suport pentru structurarea informatiilor#

E)emplul anterior prezinta un fisier VML editat in ESTE*;6 si cum este el structurat I VML se pot crea etic"ete pentru descrierea datelor si a structurii acestora#

PROGRAMARE HTML, XML

Etic"etele VML identifica tipurile de date# 3n e)emplu, datele se referitoare la o ele'a i folosind etic"etele s a definit structura de date# 6ac trecem structura VML ntr un fiier HTML i il desc"idem cu un bro4ser, 'edem cum acesta nu ia in seama etic"etele VML si rezultatul 'a fi!

# Sbser'and e)emplul anterior putem face o paralela intre cele M limba$e! HTML a6i>$a;a "at$ , VML tra %p!rta "at$.$ HTML "$6i $%t$ vi;#a. "at$ , VML "$%cri$ "at$.$

PROGRAMARE HTML, XML HTML arta cum "at$.$ %# t a6i>at$ , VML arta cum "at$.$ %# t #ti.i;at$

3deea central a VML este de a permite celor trei aspecte fundamentale ale unui document! con%inut, structur i prezentare s fie separate# ,n document HTML combin doar prezentarea i con%inutul# Cea mai mare parte a documentelor VML au asociate foi de stil pentru a permite afiarea ntr un anumit format pe ecran# ;celai document poate fi prezentat n mai multe moduri# 6e e)emplu, autorul unui document poate asigura prezentarea informa%iei, dup caz, cum ar fi!

afiarea pe ecranul unui *C, cu o anumit aran$are n pagin7 recep%ionarea sonor printr un soft4are specializat -sintetizator 'ocal/,
conectarea la Web se face printr un telefon mobil7 tiprirea pe "+rtie, cu o grafic de nalt calitate7

nregistrarea documentului ntr o baz de date# *resupunem c primete

o comand n format VML# S aplica%ie care n%elege VML poate utiliza datele pentru a determina ce produse i n ce cantit%i au fost comandate7

afiarea ntr un mod simplificat pe mini ecranul unui calculator de

buzunar sau telefon mobil7 afiarea printr un terminal Brille# ;'anta$ul acestui concept const n faptul c niciodat nu 'or trebiu sc"imbate datele documentului VML pentru generarea ieirilor la di'ersele dispoziti'e# Trebuie s se utilizeze numai concepte soft4are diferite, care pot furniza ieiri ntr un format particular# 6iferen%a dintre VML i HTML este e)tensibilitatea VML# ;ceasta se face prin e)tinderea gramaticii VML, prin adugarea de noi T;2 uri, n func%ie de necesit%i# Limba$ul HTML nu poate fi e)tins de utilizator, posibilit%ile de

PROGRAMARE HTML, XML mbunt%ire a acestuia fiind doar prin includerea de scripturi &a'a(cript, 0B(cript, etc# ,n fiier VML bine formulat se conformeaz unui set de reguli stricte ce gu'erneaz limba$ul VML# 6ac fiierul nu nu respecta regulile, VML da mesa$ de eroare# 6in punct de 'edere sintactic, informa%ia dintr un document VML se descrie asemntor cu cea dintr un document HTML, singura deosebire fiind c n VML, 'aloarea unui atribut se specific obligatoriu ntre g"ilimele, n HTML acest lucru fiind op%ional# E)emplu!

,n document VML are o structur logic i una fizic# 6in punct de 'edere fizic, un document VML este format din entit%i# S entitate poate face referire la o alt entitate# 6ocumentul ncepe cu o structur numit rdcin -?SST/ sau entitate document, documentul fiind de fapt un arbore de entit%i, ncep+nd cu entitatea rdcin#

PROGRAMARE HTML, XML 6in punct de 'edere logic, structura acestuia este asigurat de marca$e ce permit definirea de elemente, comentarii, declara%ii, etc#

($c.aratia XGL identifica 'ersiunea specificatiei VML cu care documentul 'a fi n conformitate -'ersiunea analizorului care 'a parcurge documentul VML/# ,n e)emplu de declaratie arata astfel! <b)ml 'ersionJCK#LCb= (au +S?). v$r%i! 341.04 $ c!"i '34UTF584 S- 8n acest caz se utilizeaza setul de caractere ,T9 Q# ($c.aratia tip#.#i "$ "!c#)$ t se pune dupa declaratia VML , naintea elementului document# Eemplu!

PROGRAMARE HTML, XML

-

<b)ml 'ersionJCK#LCb= <c6SCT^*E Cont (^(TEM Ccont#dtdC=

Liniile de cod spun procesorului VML ca documentul este din clasa &ont si se conformeaza regulilor stabilite n fisierul Cont.dtd. 6T6 ul -(ocument T5pe (efinition definitia tipului de document/ defineste forma si sinta)a constructiilor unui document VML dintr o anumita clasa# 6T6 este un set de reguli care definesc modul de structurare a documentelor VML# (tandardele 6T6 ului sunt definite de World Wide Web Consortium -WNC/# ,n document VML poate sa aibe sau nu asociat un 6T6, ;cesta este intern -definit in interiorul fisierului VML/ sau e8tern .definit intr un fisier separate/# ,rmatorul e)emplu defineste un 6T6 e)tern#

PROGRAMARE HTML, XML

,n document VML poate fi nso%it de un document V(L -eVtensible (t5les"eet Language/, care este tot un document VML ce con%ine defini%iile necesare pentru prezentarea informa%iei -din punct de 'edere al afirii/, pe Web# 6ocumentul V(L poate s con%in cod HTML, stiluri de formatare C(( -Cascading (t5le ("eets/, etc# 6ac documentul VML nu este nso%it de fiierul V(L, bro4serul afieaz direct forma structural a documentului -ca n e)emplul anterior/#

PROGRAMARE HTML, XML Sbiecti'ele urmrite la proiectarea VML au fost! s fie simplu de utilizat pe 3nternet7 s suporte o mare 'arietate de aplica%ii7 s fie compatibil cu (2ML7 s fie uor de scris programe care s prelucreze documente VML7 documentele VML s poat fi concepute rapid, formal i concis, s fie clare i interpretabile de ctre utilizatori7 *rin VML se separ datele care reprezint con%inutul unui document de cele care se refer la prezentarea acestuia# C+nd se utilizeaz HTML, datele necesare afirii documentului sunt memorate n acelai fiier HTML# ,tiliz+nd VML, datele pot fi stocate n fiiere VML separate de informa%ia necesar na'igatoarelor pentru prezentare# *rin VML datele pot fi sc"imbate ntre sisteme incompatibile# 8n prezent sistemele de calcul i bazele de date con%in date n formate di'erse, uneori incompatibile# Con'ertind datele n format VML se 'a reduce foarte mult aceast comple)itate i se creaz date care pot fi citite de di'erse tipuri de aplica%ii# ,tilizand VML! informa%ia din domeniul afacerilor poate fi sc"imbat prin 3nternet, astfel 'or fi impulsionate tranzac%iile BMB -Business To Business/7 fiierele te)t pot fi utilizate ca date parta$ate, independent de platformele soft4are i "ard4are7 datele 'or fi disponibile mai multor utilizatori deoarece VML este independent de "ard4are, soft4are i aplica%ii7 datele pot fi disponibile pentru toate tipurile de motoare de cutare -agen%i/ i n acest fel 'or a$unge mai uor la clien%ii interesa%i de aceste informa%ii# VML poate fi utilizat pentru generarea de noi limba$e# E)emplu! Wireless MarWup Language -WML/, utilizat ca suport n aplica%iile 3nternet destinate dispoziti'elor mobile miniaturizate scris n VML#

PROGRAMARE HTML, XML

*e site ul! BttpT,,JJJ.%it$#ri.r!,"$v$.!p$r,?).5i 5105p!i t%.r!.Bt). se gasesc KL puncte de la prezentate pe site # 1. XGL %tr#ct#r$a;a "at$.$ 7i 6!r)atii.$8 *rin date structurate intelegem lucruri ca spreads"eets, liste de contacte, parametri de configuratie, tranzactii financiare sau desene te"nice# VML
-

prin care se

prezinta VML ul, puncte enumerate in continuare, asa cum sunt

este un set de reguli pentru a crea formate te)t care iti permit sa structurezi datele# nu este un limba$ de programare a$uta calculatorul la generarea , cititirea datelor, si structurarea corecta a datelor# este e)tensibil, independent de platforma si suporta internationalizarea si localizarea# este complet compatibil cu ,nicode#

2. XGL %$a)a a # pic c# NTGL Ca si HTML, VML foloseste !

-

ta"#uri -cu'inte cuprinse in G<G si G=G/ atribute -de forma numeJC'aloareC/#

HTML specifica ce inseamna fiecare tag si atribut, si deseori cum 'a aparea te)tul marcat cu acestea in bro4ser# VML foloseste taguri pentru a delimita bucati de date, lasand interpretarea acestor date cu totul in seama aplicatiei care le citeste# ;stfel, C<p=C intr un fisier VML, nu inseamna obligatoriu paragraf# 3n functie de conte)t, poate fi un pret, un parametru, o persoana -sau un cu'ant care nici macar nu incepe cu p/#

PROGRAMARE HTML, XML 3. XGL $%t$ t$?t, "ar # $ 6ac#t p$ tr# a 6i citit ,n a'anta$ al formatului te)t este ca permite 'izualizarea fisierului fara a folosi programul care l a produs# 9ormatul te)t face debugging ul mai usor pentru de'eloperi# ,tilizatorii pot citi fisierul daca au ne'oie# ,n tag uitat sau un atribut fara g"ilimele face un fisier VML inutilizabil# 6aca apare o greseala, aplicatia trebuie sa opreasca citirea si sa raporteze o eroare# 4. XGL $%t$ Cv!r:ar$tC pri "$%i' 6eoarece VML este un format te)t si foloseste taguri pentru a delimita datele, fisierele VML sunt aproape intotdeuna mai mari decat formatele binare# (patiul pe disW este mai ieftin decat era in trecut# *rograme de compresie ca zip si gzip pot comprima fisierele foarte bine si foarte rapid# 3n plus, protocoale de comunicare, e)# "ttp protocolul de baza al 4eb ului, pot comprima datele din mers, economisind band4idt" ul la fel de bine ca formatul binar# H. XGL $%t$ ! 6a)i.i$ "$ t$B !.!'ii @/' 5.6 este specificatia care defineste ce sunt tagurile si atributele# C9amilia VMLC este un set de module -in continua crestere/ care ofera ser'icii folositoare pentru indeplinirea unor lucruri importante si folosite deseori# VL3E. descrie un mod standard de a adauga "5perlinWuri unui fisier VML# V*ointer este o sinta)a in dez'oltare, folosita la identificarea unor parti dintr un document VML# ,n V*ointer este asemanator cu un ,?L, dar in loc sa indice un document 4eb, indica o parte dint un fisier VML# C(( limba$ul st5le s"eet, se poate aplica la VML la fel ca la HTML# V(L este limb$ul a'ansat st5le s"eet# Este bazat pe ! V(LT un limba$ de transformare folosit pentru a rearan$a, adauga sau sterge taguri si atribute# 6SM este un set standard de functii pentru manipularea fisierelor VML -si HTML/ dintr un limba$ de programare#

PROGRAMARE HTML, XML VML (c"emas K si 4 a$uta de'eloperii sa defineasca precis structura fisierelor VML, in formatul creat de ei# ;lte module si utilitati sunt inca in dez'oltare# I. XGL $ !#, "ar # cBiar atat "$ !# 6ez'oltarea VML a inceput in KTTR si VML a de'enit o recomandare WNC din 9ebruarie KTTQ, 7. XGL tra 6!r)a NTGL i XNTGL E)ista o importanta aplicatie VML care are format de document! VHTML# VHTML are multe din elementele HTML ului# (inta)a a fost sc"imbata un pic pentru a corespunde regulilor VML# ,n format bazat pe VML mosteneste sinta)a VML si o constrange in mai multe feluri -spre e)emplu, VHTML permite folosirea C<p=C, dar nu a C<r=C/7 totodata, se adauga inteles sinta)ei -VHTML spune ca C<p=C inseamna Cparagrap"C, si nu CpretC, CpersoanaC sau altce'a/# 8. XGL $%t$ )!"#.ar VML iti permite sa definesti un nou format de document combinand si refolosind alte formate# 6eoarece cele doua formate pot folosi elemente sau atribute cu acelasi nume, trebuie sa ai gri$a la combinarea lor -inseamna C<p=C CparagrafC dintr un format, sau CpersoanaC din celalalt formatb/# *entru a elimina confuzia, VML are un mecanism numit namespce -domenii pentru nume/# V(L si ?69sunt e)emple de formate bazate pe VML care folosesc namespace uri# VML (c"ema este conceputa cu acest suport pentru modularizare# ;ceasta modularizare la ni'elul definirii unui document VML face posibila combinarea a doua sc"eme pentru a forma o a treia, care defineste un document combinat -combinatie de documente definite de cele doua sc"eme initiale/#

PROGRAMARE HTML, XML 9. XGL $%t$ :a;a &(F5#.#i %i *$:5#.#i S$)a tic ?esource 6escription 9rame4orW ?69, al WNC, este un format VML te)t care suporta descrierea resurselor si aplicatiilor meta date, cum ar fi pla5list uri pentru muzica, colectii foto si bibliografii# (pre e)emplu, ?69 iti poate permite sa identifici oameni intr un album foto -pentru 4eb/ folosind informatii dintr o lista de contacte7 apoi clientul tau mail ar putea trimite automat un mail acestor persoane, anuntandu i ca fotografiile lor sunt pe 4eb -on line/# Cum HTML a integrat documente, imagini, sisteme de meniuri si formulare, ?69 este o unealta care permite o integrare mai profunda, pentru a transforma 4eb ul un pic mai mult intr un 4eb semantic# La fel cum oamenii au ne'oie de o con'entie care sa stabileasca intelesurile cu'intelor cu care comunica, si calculatoarele au ne'oie de acelasi lucru pentru a comunica eficient# 6escrierile formale dintr o anumita categorie -cumparare sau productie, spre e)emplu/ sunt numite ontologii si sunt o parte necesara a 4eb ului semantic# ?69, ontologiile si reprezentarea intelesului pentru a permite calculatoarelor sa a$ute munca oamenilor, sunt parte a acti'itatii pentru Web ul (emantic# 10. XGL 6# cti! $a;a p$ !ric$ p.at6!r)a, $%t$ %#p!rtat :i $ %i $v!i$ "$ .ic$ ta ;legand VML pentru un proiect, 'ei putea folosi un numar mare de aplicatii -este posibil ca una dintre ele sa poata face de$a ce ai tu ne'oie/# Eu trebuie licenta pentru a folosi VML, nu trebuie sa platesti nimic nimanui# Comunitatea mare de persoane care folosesc VML inseamna ca nu depinzi de un sigur producator# Desi @/' nu este intotdeauna cea mai buna solutie, se merita cel putin sa il consideri printre optiuni. # ar$

PROGRAMARE HTML, XML 10.3 Ct$va r$'#.i "$ tr$c$r$ "$ .a NTGL .a XNTGL 7$Xt$ %i:.$ NMp$rT$?t GarR#p La '#a'$8

XNTGL este un limba$ utilizat la crearea paginilor Web, asemanator cu HTML ul si a'and la baza te"nologia VML# 3n VHTML trebuie respectate o serie de reguli!

La scrierea tag urilor se folosesc literele mici, VHTML e case sensiti'e

;tributele (E *,E 3ET?E 2H3L3MELE Etic"etele (E 3ECH36, <br @= sau <br=<@br=# 6intre elementele goale in HTML se pot enumera! <area@=, <base=, <basefont@=, <br@=, <"r@=, <img@=, <linW@=, etc#

Etic"etele goale se inc"id astfel!

Elementul desc"is primul se inc"ide ultimul#

elementul desc"is al doilea se inc"ide penultimul, ,,,,,,,,,,,,,,,,,,,,, (punem ca elementele se inc"id in ordine in'ersa desc"iderii# Str#ct#ra # #i pa'i i XNTGL *rimele M linii contin declartia 6SCT^*E si etic"eta "tml! +U(OCTPP9 Bt). PUOLIC ... +Bt). ?). %34BttpT,,JJJ.J3.!r',1999,?Bt).4<"ead= ]]]]]] <@"ead= <bod5= ]]]]]]]] <@bod5= <@"tml=

PROGRAMARE HTML, XML

($c.aratia (OCTPP9 V $%t$ ! etic"eta HTML, nu trebuie inc"isa cu simbolul A # 9ticB$ta HTML in VHTML are atributul )mlns -VML Eame(pace/, cu 'aloarea adresa ,?L unde sunt prezentate specificatiile WNC# <"tml )mlnsJC"ttp!@@444#4N#org@KTTT@)"tmlC= ($c.aratia (OCTPP9 si $ticB$ta Bt). specifica tipul documentului, astfel incat bro4serul si 'alidatoarele sa l poata interpreta correct# OIOIOQ&AFI9 200. BttpT,,JJJ.%it$#ri.r!,"$v$.!p$r,?).5i 5105p!i t%.r!.Bt).

Baze de date. Fundamente teoretice i practice, Grupul BDASEIG, Editura Infomega, Bucureti, 2002 Tehnologia aplicaiilor Web, Floarea nstase, Pavel Nstase, Editura Economic, Bucureti, 2002 Totul despre Bucureti, 2002
Teora, Bucureti, 2003

T!" #, Rick Darnel, Editura Teora,

T!" prin $%$!&"$, Teodoru Gugoiu, Editura T!" 'omplete( Donna ! Baker, Editura Sybex,

2003

BttpT,,i 6.#cv.r!,W)iBai#',c!#r%$%,?).,=a.i"ar$a(!c#)$ t$.!rXGL.p"6

PROGRAMARE HTML, XML

A19XA 3
<HTML= <c (CS*! calcule interact'e = <HE;6= <T3TLE=E)emplu<@T3TLE= <script languageJC&a'a(criptK#MC= @D 9l5ing Butterfl5 script -B5 B2;udio6r`aol#com/ Modified slig"tl5@ permission granted to 65namic 6ri'e to feature script in arc"i'e 9or full source, 'isit "ttp!@@444#d5namicdri'e#com D@ 'ar ^ma)JQ7 @@M;V d S9 *3VEL (TE*( 3E THE CVC 63?ECT3SE 'ar Vma)JQ7 @@M;V d S9 *3VEL (TE*( 3E THE C^C 63?ECT3SE 'ar Tma)JKLLLL7 @@M;V d S9 M3LL3(ECSE6( BETWEEE *;?;METE? CH;E2E( @@9LS;T3E2 3M;2E ,?L( 9S? E;CH 3M;2E# ;66 S? 6ELETE EET?3E(# .EE* ELEMEET E,ME?3C;L S?6E? (T;?T3E2 W3TH CLC cc 'ar floatimagesJne4 ;rra5-/7 floatimagesZL[JGbutterfl5M#gifG7 floatimagesZK[JGbutterfl5M#gifG7 @@DDDDDDDDD6S EST E63T BELSWDDDDDDDDDDD 'ar E(O J -na'igator#appEame#inde)Sf-CEetscapeC/=JL ee parse9loat-na'igator#app0ersion/ =J O ee parse9loat-na'igator#app0ersion/ < P/b true ! false7 'ar 3EO J -document#all/b true ! false7 'ar E(R J -parse9loat-na'igator#app0ersion/ =J P ee na'igator#appEame#inde)Sf-CEetscapeC/=JL /b true! false7 'ar 4indI4, 4indI", tJGG, 36sJne4 ;rra5-/7 for-iJL7 i<floatimages#lengt"7 i::/A t:J-E(O/bG<la5er nameJCpicG:i:GC 'isibilit5JC"ideC 4idt"JCKLC "eig"tJCKLC=<a "refJC$a'ascript!"idebutterfl5-/C=G ! G<di' idJCpicG:i:GC st5leJCposition!absolute7 'isibilit5!"idden74idt"!KLp)7 "eig"t!KLp)C=<a "refJC$a'ascript!"idebutterfl5-/C=G7 t:JG<img srcJCG:floatimagesZi[:GC nameJCpG:i:GC borderJCLC=G7 t:J-E(O/b G<@a=<@la5er=G!G<@a=<@di'=G7B document#4rite-t/7 function mo'eimage-num/A if-getidleft-num/:36sZnum[#W:36sZnum[#Vstep =J 4indI4:getscroll)-//36sZnum[#VdirJfalse7 if-getidleft-num/ 36sZnum[#Vstep<Jgetscroll)-//36sZnum[#VdirJtrue7 if-getidtop-num/:36sZnum[#H:36sZnum[#^step =J 4indI":getscroll5-//36sZnum[#^dirJfalse7 if-getidtop-num/ 36sZnum[#^step<Jgetscroll5-//36sZnum[#^dirJtrue7 mo'eidb5-num, -36sZnum[#Vdir/b 36sZnum[#Vstep ! 36sZnum[#Vstep , -36sZnum[#^dir/b 36sZnum[#^step! 36sZnum[#^step/7B function getne4props-num/A 36sZnum[#^dirJMat"#floor-Mat"#random-/DM/=L7 36sZnum[#VdirJMat"#floor-Mat"#random-/DM/=L7 36sZnum[#^stepJMat"#ceil-Mat"#random-/D^ma)/7 36sZnum[#VstepJMat"#ceil-Mat"#random-/DVma)/ setTimeout-Ggetne4props-G:num:G/G, Mat"#floor-Mat"#random-/DTma)//7B function getscroll)-/A if-E(O ff E(R/return 4indo4#pageVSffset7 if-3EO/return document#bod5#scrollLeft7B function getscroll5-/A

PROGRAMARE HTML, XML

if-E(O ff E(R/return 4indo4#page^Sffset7 if-3EO/return document#bod5#scrollTop7B function getid-name/A if-E(O/return document#la5ersZname[7 if-3EO/return document#allZname[7 if-E(R/return document#getElementB53d-name/7B function mo'eidto-num,),5/A if-E(O/36sZnum[#mo'eTo-),5/7 if-3EO ff E(R/A 36sZnum[#st5le#leftJ):Gp)G7 36sZnum[#st5le#topJ5:Gp)G7BB function getidleft-num/A if-E(O/return 36sZnum[#left7 if-3EO ff E(R/return parse3nt-36sZnum[#st5le#left/7B function getidtop-num/A if-E(O/return 36sZnum[#top7 if-3EO ff E(R/return parse3nt-36sZnum[#st5le#top/7B function mo'eidb5-num,d),d5/A if-E(O/36sZnum[#mo'eB5-d), d5/7 if-3EO ff E(R/A 36sZnum[#st5le#leftJ-getidleft-num/:d)/:Gp)G7 36sZnum[#st5le#topJ-getidtop-num/:d5/:Gp)G7BB function get4indo44idt"-/A if-E(O ff E(R/return 4indo4#innerWidt"7 if-3EO/return document#bod5#clientWidt"7B function get4indo4"eig"t-/A if-E(O ff E(R/return 4indo4#innerHeig"t7 if-3EO/return document#bod5#clientHeig"t7B function init-/A 4indI4Jget4indo44idt"-/7 4indI"Jget4indo4"eig"t-/7 for-iJL7 i<floatimages#lengt"7 i::/A 36sZi[Jgetid-GpicG:i/7 if-E(O/A 36sZi[#WJ36sZi[#document#imagesZCpC:i[#4idt"7 36sZi[#HJ36sZi[#document#imagesZCpC:i[#"eig"t7B if-E(R ff 3EO/A 36sZi[#WJdocument#imagesZCpC:i[#4idt"7 36sZi[#HJdocument#imagesZCpC:i[#"eig"t7B getne4props-i/7 mo'eidto-i , Mat"#floor-Mat"#random-/D-4indI4 36sZi[#W//, Mat"#floor-Mat"#random-/D-4indI" 36sZi[#H///7 if-E(O/36sZi[#'isibilit5 J Cs"o4C7 if-3EO ff E(R/36sZi[#st5le#'isibilit5 J C'isibleC7 startfl5Jset3nter'al-Gmo'eimage-G:i:G/G,Mat"#floor-Mat"#random-/DKLL/:KLL/7BB function "idebutterfl5-/A for-iJL7 i<floatimages#lengt"7 i::/A if -3EO/ e'al-Cdocument#all#picC:i:C#st5le#'isibilit5JG"iddenGC/ else if -E(R/ document#getElementB53d-CpicC:i/#st5le#'isibilit5JG"iddenG else if -E(O/ e'al-Cdocument#picC:i:C#'isibilit5JG"ideGC/

PROGRAMARE HTML, XML

clear3nter'al-startfl5/BB if -E(OffE(Rff3EO/A 4indo4#onloadJinit7 4indo4#onresizeJfunction-/A 4indI4Jget4indo44idt"-/7 4indI"Jget4indo4"eig"t-/7 BB <@script= <(C?3*T= @@lungimea cercului este calculata cu formula obisnuita MD*iDr function calcul-obiect/A obiect#LungimeCerc# 'alueJN#KODobiect#razaCerc#'alueDM B <@(C?3*T= <HE;6= <BS6^= <9S?M E;MEJCcalculCercC= *recizati raza cercului <3E*,T T^*EJte)t E;MEJrazaCerc (3gEJMP= <*= Lungimea este <3E*,T T^*EJte)t E;MEJLungimeCerc (3gEJNL= <*= <3E*,T T^*EJbutton E;MEJbuton 0;L,EJC6eclansati calcululC SECL3C.JCcalcul-t"is#form/C= <@9S?M= <@BS6^= <@HTML=