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
hărtie. Marcajele permit obţinerea unei dispuneri sofisticate a elementelor pe
pagină, dar acele elemente nu pot fi plasate unele peste altele.
Cu JavaScript, paginile de casă devin mai inteligente, deoarece
răspund la diferitele acţiuni efectuate cu mouse-ul, cu tastatura sau pentru
că au fost prescrise o serie de acţiuni prin instrucţiunile adăugate în cadrul
fişierului cu extensia .html, pe partea de client.

9.1 Introducere in Java Script [70, 84]

JavaScript a adăugat o mai multă interactivitate şi funcţionalitate

paginilor de casă. Până la apariţia sa, singurul mijloc îl ofereau unul din
limbajele de tip script: Perl, oricare din cele trei shell-uri Unix (C-shell,
Bourne-shell, Korn-shell) sau VBScript (Visual Basic Script). Toate limbajele
de tip script (care se mai numesc şi ″limbaje pentru scenarii″) respectă o
interfaţă comună, cunoscută sub prescurtarea CGI (Common Gateway
Interface).
 PROGRAMARE HTML, XML

JavaScript este mai simplu decât Java, mai puţin dotat decât acesta, şi
totuşi se bazează pe Java. Este mai apropiat de acesta decât de marcajele
HTML. Dacă Java permite scrierea de aplicaţii de sine stătătoare (stand
alone) sau ″compilate″, JavaScript nu permite acest lucru pe partea de
client. JavaScript permite cunoscătorului HTML să trateze cu secvenţe de
program adecvate, diverse evenimente iniţiate de către utilizator cum ar fi:
efectuarea unui clic cu mouse-ul, ″survolarea″ cu mouse-ul a anumitor zone
ale unei ″hărţi″ afişate, completarea unui formular sau acţionarea unui buton,
conturat pe ecran; organizează ferestre în mai multe cadre, fiecare punctând
spre un document din spaţiul Web. Într-un cuvânt, face răsfoirea unui volum
mare de informaţii mult mai umană pentru utilizator.
Fiind pregătit pentru arhitectura client-server, pe ecranul unde rulează
clientul poate apărea 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, răspunsurile utilizatorului pentru acest formular
sunt expediate la server, care le prelucrează.
JavaScript are o sintaxă asemănătoare limbajului C. Prima atenţionare
care trebuie făcută este că, spre deosebire de HTML, de altfel ca şi C++,
JavaScript este case sensitive, adică face distincţia între literele mari şi
cele mici.
Scripturile JavaScript sunt interpretate de browserele Web, care recunosc
JavaScript.
Exemplu de Inserare a unui script JAVA intr-o pagina HTML:
- Se utilizeza marcajul <SCRIPT>, care este o extensie a limbajului Html.
- Language - specifica ce limbaj de scripting este utilizat in scriptul inserat;
- Pus in antetul documentului, scriptul se executa la incarcarea paginii de
catre navigator.
- Document – este un obiect predefinit, defineste caracteristicile
documentului Html
 PROGRAMARE HTML, XML

- Write – este metoda, aceasta afiseaza un sir de caractere in document.

Instrucţiunile scrise cu JavaScript vor fi incluse în documentul HTML în

interiorul marcajului <SCRIPT> care este un marcaj pereche şi are marcajul
corespunzător de terminare </SCRIPT>.

9.2 Structura programelor JavaScript [70, 77, 84]

 PROGRAMARE HTML, XML

Un program în JavaScript este format din: partea principală (main), din

secvenţe de tratare a apariţiei anumitor evenimente şi din funcţii.
Evenimentele sunt provocate de către mişcarea mouse-lui sau a tastelor,
deci în genere, de către vizitator.
Partea principală este alcătuită din instrucţiuni ce apar în cadrul marcajului
<SCRIPT> şi care nu intră în corpul unei functii. De fapt, ca şi în limbajul
C/C++, main este funcţia principală, numai că acum lipseşte void sau int
main() { ... }, cum se scria în C/C++. Este recomandabil a forma aceasta
parte principală cât mai redusă posibil.
Secvenţele de tratare a evenimentelor sunt "trezite" şi puse să răspundă
la acţiunile pe care vizitatorul paginii de casă le întreprinde., exemlu:
atributul ONCLICK="nume-de-functie()".
Funcţiile sunt scurte secvenţe de program ce pot fi apelate de către alte
funcţii, deci şi de partea principală a programului, care poate fi
socotită tot o funcţie. Funcţia are un nume care este precedat de
cuvântul function. Dupa nume urmeaza, intre o pereche de
paranteze rotunde, lista parametrilor formali, cărora li se atribuie în
mod poziţional valorile reale ale argumentelor din lista de apel.
Putem atribui valori şi invers, dinspre funcţie spre secvenţa care a apelat-o.

9.3 Elementele de bază ale limbajului [70, 84]

Variabilele, comentariile şi constantele se declara ca si in C/C++ cu

urmatoarele nuantari:
-- comentariile in JavaScript acceptă şi forma canonică a limbajului C
de comentariu /* text pe mai multe rânduri consecutive */ , oferind o
oarecare relaxare, în sensul că textul explicativ poate fi continuat pe oricâte
linii de text ca in exemplul urmator:
 PROGRAMARE HTML, XML

/* Acesta este un comentariu în JavaScript care poate fi folosit şi pentru

programele scrise cu C. */
-- datele scrise între ghilimele se numesc literali. Un literal este
aşadar scris ca un "grup de cuvinte încadrat de ghilimele terminale".
Literalii pot fi definiţi şi astfel: 'grup de cuvinte încadrat de
apostroafe'. Nu se admit mixturi de genul: "text”. sau 'text". Pentru a include
ghilimelele în cadrul textului, se recurge la caracterul special \ , deci se va
scrie \". Apostroafele sunt admise între ghilimele, şi reciproc.
- denumirile variabilelor nu vor fi admise să înceapă cu cifre sau semne
speciale. Ele pot începe însă cu semnul ″_″ sau cu o literă alfabetică.
- fiecare variabilă are un domeniu al său unde este recunoscută.
Deoarece JavaScript este un limbaj în care nu se pot declara (ca în C++/ C)
tipurile variabilelor folosite, la momentul interpretării se stabileşte din context
daca tipul datei coincide cu operatorul sau funcţia care i se aplică asa cum
se vede pe urmatoarea secventa:
var a = 100 // aici a este o variabila numerica
x=100+a // x va lua valoarea 200
a="scripturi" // a poate fi redefinit ca variabila de tip sir
x="100" + a // aici se vor obtine 100 scripturi
În continuare este prezentat un mic program JavaScript, în care apare şi o
parte de dialog. Este de fapt un formular în care vizitatorul va specifica
parametrul razaCerc şi în alt câmp va primi răspunsul, adică lungimea sa.
 PROGRAMARE HTML, XML

Urmează sursa:

După ce a fost precizată valoarea razei cercului, când se efectuează un clic

pe butonul ″Declanşaţi calculul″, în caseta cu denumirea internă
LungimeCerc se va anunţa valoarea calculată.
- JavaScript foloseşte si tipul de date logic. Valorile literalilor booleeni
sunt: "false" (valoare falsa) şi "true" (adevărată).
 PROGRAMARE HTML, XML

- dintre constantele speciale folosite în JavaScript mentionăm: secvenţele

care încep cu bara inversă denumite şi secvenţe escape: \b (înapoi un
caracter, backspace), \f (avans la linia nouă, line feed), \n (o linie nouă,
new line), \r (întoarce carul, carriage return), \t (caracterul de tabulare
orizontală, tab) şi \" (inserează ghilimele în şirul literal).
Expresiile şi operatorii sunt ca si in C++ cu urmatoarele nuantari:
- se pot efectua atribuiri multiple de forma: v=v1=…=vn=expresie, unde v1,
…,vn sunt variabile in care principiul de executare este evident.
Atribuirea este un operator care figurează într-o expresie. Ca orice
expresie, aceasta are o valoare rezultată în urma evaluării. În cazul
atribuirilor, valoarea rezultată este valoarea atribuită variabilei care este
prima din stânga într-un şir de atribuiri.
- operatorii relaţionali sunt operatori binari, care întorc o valoare logică,
true dacă relaţia este adevărată, sau false, dacă relaţia nu este
adevărată.
- pentru conversii forţate şir -> număr se folosesc două funcţii: parseInt()
şi parseFloat(). Fiecare va converti un şir într-un număr, prima, într-unul
de tip întreg, a doua, într-unul de tip real, fireşte, dacă acest lucru este
posibil. Secvenţa de mai jos exemplifică acest lucru:
var a = "1000" //definim literalul 1000
b = parseInt(a) //b va avea valoarea întreagă 1000
var a = "Java"
b = parseInt(a) //se va solda cu mesaj de eroare
var a = "123.45"
b = parseFloat(a) //b va avea valoarea numerică 123,45
- datele octale, adică cele scrise în baza sistemului de numeraţie 8, vor
începe obligatoriu cu cifra 0. Deci, numărul 0123 va fi considerat numărul
123 în baza 8 şi nu în baza 10.De fapt, valoarea zecimală a lui 0123 va fi
1x82 + 2x 81+ 3 = 64 + 16 = 83.
 PROGRAMARE HTML, XML

- in JavaScript se poate amâna interpretarea unei expresii, până când

vizitatorul va specifica expresia şi apoi va apela la serviciile funcţiei
eval() pentru a calcula cât este, aşa cum rezultă din următorul program
amplasat în contextul unui document html:

Instrucţiunile limbajului JavaScript sunt cele de la C++ având aceiaşi

sintaxă şi semantică .
 PROGRAMARE HTML, XML

9.4 Obiectele limbajului JavaScript [32, 70, 77]

Obiectul are o serie de caracteristici (proprietăţi) si o serie de funcţii.

Există şi obiecte al căror conţinut nu se schimbă numite obiecte statice. Mai
există şi obiecte create de programator, care, ca şi unele dintre obiectele
JavaScript, trebuie instanţiate.
JavaScript este un limbaj "bazat" şi nu "orientat" pe obiecte, aşa cum
este C++ care face parte din generaţia a 4-a (4GL). În programarea
orientată pe obiect întâlnim o mulţime de limbaje, unele orientate pe clase,
altele, numai pe obiecte, altele, pe ambele. Conceptul, destul de vechi a
apărut prin 1967 la Palo Alto, în cadrul companiei XEROX, prin limbajul
Smaltalk
Programarea orientată pe obiect a coincis cu perioada limbajelor 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 creşterea
eficienţei muncii de concepere. Dacă în perioada limbajelor 3GL,
FORTRAN-ul alături de COBOL şi PL/l alcătuiau fondul de limbaje foarte
populare, în perioada 4GL întălnim: C++, CLOS (Common LISP Object
System), Object Pascal, Eiffel (un fel de Pascal foarte reuşit); apoi treptat
trec pe obiecte şi Cobol-ul, şi Basic-ul (Microsoft Visual Basic sau Microsoft
VB for Applications, un dialect VB folosit în MS Excel) etc. Nu putem încheia
enumerarea fără Java, primul limbaj orientat pe obiecte pentru mediul de
reţea.
Un obiect apare ca urmare a procesului de instanţiere a unui şablon
de date, numit clasă. Acest şablon poate fi considerat drept un sertar, în
 PROGRAMARE HTML, XML

care se găsesc o serie de despărţituri - unele pentru păstrarea datelor, altele

pentru diverse funcţii folosite în tratarea acestor date.
În programarea orientată pe obiect (OOP - Object Oriented
Programming) aceste funcţii se numesc metode. De pildă, autobuzul este
un obiect, avionul este altul, autoturismul este altul, etc.. Toate derivă din
clasa vehicule, care la rândul lor derivă din clasa mijloace. Există mijloace
care nu sunt deplasabile pe teren precum racheta şi altele deplasabile pe
pământ precum cele de mai sus. Se observă deci o ierarhie a obiectelor.
Putem considera şablonul, de exemplu al unui avion, drept proiectul său de
construcţie. Se spune despre un obiect că posedă o serie de proprietăţi, aşa
cum ar fi autoturismul care are o anumită greutate, un anumit număr de cai
putere, dezvoltă o anumită viteză, etc..
Obiectele conţin o serie de funcţii (metode), de asemenea
încapsulate. Exemplu obiectul Math din JavaScript al carui conţinut se
referă, la anumite valori caracteristice, (cărora li se spune proprietăţi) sau
funcţii frecvent folosite. Dintre proprietăţile sale enumerăm: Math.E -
valoarea numărului e, Math.ln2- valoarea logaritmului neperian al cifrei 2,
(adică 0,693), Math.ln10-valoarea pentru ln10, (deci 2,302); Math.PI (
π=3.14); etc. Dar Math conţine şi o serie de metode pentru calculul funcţiilor
trigonometice directe precum: Math.sin, Math.cos, Math.tan; sau inverse
precum: Math.asin, Math.acos, Math.atan, Math.atan2; pentru rotunjirea
valorilor: Math.ceil (de exemplu ceil(l23,67) va da 124) sau Math.floor (de
exemplu, floor(l23,67) va da 123). Mai întălnim: Math.log, Math.min(v1,v2),
Math.max(v1,v2), Math.random pentru generarea numerelor aleatoare cu
distribuţia uniformă. Există şi Math.round (de exemplu, round(66,45) dă 66,
dar round(66, 51) va da 67) etc.
Se observă că proprietăţile ca si metodele sunt unite prin intermediul
operatorului punct (.) de clasa respectivă. În limbajul JavaScript se preferă
denumirea de obiect în locul celei de clasă.
 PROGRAMARE HTML, XML

0 definiţie a obiectului, ar putea fi următoarea: obiectul este o entitate,

o structură abstractă de date, constituită din proprietăţi şi metode.
Proprietăţile se pot asimila datelor (constante sau variabile), iar metodele,
funcţiilor.
Spunem că JavaScript nu este decât bazat pe obiecte, nu şi orientat
spre ele pentru că obiectelor acestui limbaj le lipsesc 3 caracteristici ale
teoriei OOP (Object Oriented Programming): moştenirea, încapsularea şi
abstractizarea.
Corporaţia Netscape Communication a definit propriul concept,
cunoscut sub numele JavaScript Object Model (JOM). JOM conţine
totalitatea obiectelor, proprietăţilor, metodelor dar şi variabilelor şi funcţiilor
din universul Netscape. Obiectele Netscape nu trebuie confundate cu cele
ale limbajului JavaScript. Aceeaşi corporaţie a lansat programul de navigare
Netscape Navigator, pentru partea client. Tot ea a creat şi o serie de
versiuni pentru partea de server. Este vorba despre: Netscape Entreprise
System (platforma Unix), Netscape LiveWire (platforma Windows/NT) sau
Netscape Server System. Fiecare dintre aceste categorii de programe
operează cu o serie de obiecte specifice.
In cele ce urmează numim partea client, pe scurt Navigator, şi partea
server, pe scurt LiveWire.
Pe partea Navigator se pot folosi o serie de obiecte conţinute în
însuşi acest JavaScript Object Model, dar se pot defini şi altele proprii. Pe
osatura unui document HTML se folosesc facilităţile limbajului JavaScript şi
se pot afişa o serie de ferestre, cadre, casete de dialog, unde să apară tot
felul de mesaje, resurse grafice. Se pot valida sau evalua expresii în care
apar şi variabile, nu numai date numerice sau literali, se pot chiar prelucra
date sosite de la LiveWire.
Pe partea LiveWire, în JavaScript există posibilitatea de a scrie
scenarii în care să fie procesate toate solicitările sosite de la diferiţi clienti
 PROGRAMARE HTML, XML

(diferite programe de vizitare care recurg la JavaScript), care trimit informaţii

cerute prin aceste scenarii, sau de a accesa server-e de baze de date,
pentru fişiere sau care conţin biblioteci de aplicaţii scrise în C, Java etc. Se
pot chiar adapta diverse aplicaţii de tip applet scrise în limbajul Java.

9.5 Definirea şi folosirea propriilor obiecte în JavaScript[70]

JavaScript dispune de o serie de obiecte ale sale care organizează o

serie de date, dar şi funcţii (metode) ce operează asupra acestor date.
Aceste obiecte - unele deja existente în JavaScript, altele create de utilizator
- pot fi cuplate, între ele sau legate de elementele HTML dând posibilitatea
efectuării diverselor calcule matematice sau creării diferitelor resurse: text,
ferestre, formulare, cadre etc. Sintaxa generală pentru folosirea unei
anumite proprietăţi a unui obiect este:
numeObiect.numeProprietate.
In JavaScript un obiect propriu se crează parcurgând două etape: definirea
obiectului şi crearea(instanţierea) obiectului.
Exemplu. Definim obiectul Autoturism cu funcţia auto() care are 3
parametri: tip, viteză, an fabricaţie, prin secvenţa:
function auto (sTip, iViteza, iAn)
{this.Tip=sTip;
this.Viteza=iViteza;
this.AnFab=iAn;}
La definirea obiectului se poate atasa, pentru denumiri câte o literă de
început care anunţă tipul variabilei: s - şir, i - număr întreg. Cuvântul rezervat
this. este un operator cu care se face referire la obiectul curent.
Instanţierea obiectelor în JavaScript se face prin operatorul new
(întocmai ca în C++).
 PROGRAMARE HTML, XML

Pentru obiectul Autoturism definit mai sus putem acum instanţia oricate
obiecte de acest tip, sub următoarea formă:
AutoturismA=new auto(“Cielo”,180, 1995)
AutoturismB=new auto(“Dacia”, 120, 2003)
AutoturismC=new auto(“Ford”, 200, 2000)
Putem crea oricâte astfel de obiecte. Instrucţiunile de atribuire de mai sus
seamănă cu cele ale unui constructor din C++. Operatorul new va aloca
resursele (de memorie) necesare pentru întreaga structură de date a
obiectului.
Adăugăm şi o metodă obiectului Autoturism care calculează numărul
de km parcurşi de acesta. Parametrul intern al obiectului afectat de această
funcţie în sensul creşterii sale este Lungime . Rescriem funcţia auto(), ca să
anunţăm şi metoda Parcurs ca membră a acestui obiect:
function auto(sTip, iViteza, iAn)
{ this.Tip = sTip,.
this.Viteza = iViteza;
this. AnFab = iAn:
this.Lungime = 0;
this.Parcurs = Parcurs: }

Codul metodei Parcurs ar putea fi de forma:

function Parcurs(iKm) {
this.Lungime =this.Lungime +i Km;

9.6 Obiecte specifice limbajului JavaScript [70, 77, 84]

Obiectui Date este destinat manevrării datelor calendaristice dar şi

orei, pentru afişarea în cadrul paginii de casă. Acest obiect nu posedă
 PROGRAMARE HTML, XML

proprietăţi, în schimb are vreo 20 de metode, şi nu se pot prelucra date

anterioare anului 1970.
Un obiect Date se creează astfel: dataDeAzi = new Date;
Metodele sunt apelate prin constructia:
nume-obiect-tip-Date.nume-metoda.
Obiectele statice sunt cele care nu se schimba. Math este un
astfel de obiect, deoarece el nu se schimbă, cum se întâmplă în cazul
obiectului Date. Obiectele statice nu trebuie instanţiate. Astfel prin:
var numarAleator = Math.random()
am atribuit variabilei numarAleator o valoare aleatoare generată cu metoda
random a obiectului Math. Algoritmul ascuns în random asigură generarea
unui număr aleator cu distribuţia uniformă în mulţimea [0,1). Dacă dorim să
generăm numere aleatoare între doua limite, nl şi n2, vom scrie:
var numarAleator = n1 + (n2-n1)* Math.random()
Orice proprietate a unui obiect static poate fi accesată prin construcţia:
obiect-static. proprietate
Scopul (adica domeniul unde denumirea unui obiect este
recunoscută) unui obiect diferă în funcţie de aplicaţie. Pentru partea
Navigator, obiectul este recunoscut în pagina curentă de casă, în care a
existat scenariul cu obiectul respectiv. În contextul LiveWire, un obiect poate
fi recunoscut şi în alte pagini de casă, nu numai în pagina curentă.
Obiectul string este de asemenea un obiect static si se referă la
şiruri de caractere ce pot fi afişate cu diferite caracteristici tipografice.
Singura proprietate a acestui obiect este numită length, adică lungime, şi
cuprinde numărul caracterelor (litere, cifre, semne speciale) pe care le
conţine obiectul la un moment dat. Metodele obiectului string şi semnificaţiile
lor sunt [70]:
anchor() Va crea un text pe post de ancoră
big() Şirul va fi afişat cu un corp de literă mai mare
blink() Şirul căruia i se aplică va pulsa
 PROGRAMARE HTML, XML

bold() Şirul va apărea cu caractere îngroşate

charAt() Preia un caracter din şir care fusese adresat prin
intermediul unui index
fixed() Are efectul similar cu al marcajului <TT>
fontsize() Stabileşte mărimea corpului de literă cu care va fi
afişat pe ecran şirul respectiv
indexOf() Preia valoarea offset-ului acelui caracter care este
căutat într-un şir, plecând de la valoarea fromIndex
italics() Similar marcajului <I>
lastIndexOf() Se caută ultima apariţie a unui caracter într-un şir.
Valoarea acelui index va fi conţinută de acest
parametru
link() Creează o legătură de tip hipertext. Similar cu <A
HREF…> spre o resursă de tip URL
small() Afişează şirul cu corp mic de literă
strike() Afişează şirul barat cu o liniuţă
sub() Şirul va fi afişat ca indice inferior
substring() Preia un şir parţial dintr-un şir.Parametrii ceruţi de
această metodă sunt indexA şi indexB. Ambii fixează
limitele acelui şir redus
sup() Afişează acel şir ca indice superior
toLowerCase( Converteşte literele alfabetice mari ale unui şir în litere
) mici
toUpperCase( Converteşte literele alfabetice mici ale unui şir în litere
) mari

Obiectul numit masiv (array) este un grup de doua sau mai multe elemente
omogene. Prin intermediul unui indice, se poate face referire la unul din
aceste elemente. Ca si in C++ in JavaScript se consideră că indicele
porneşte de la 0. Spre deosebire de C/C++ sau Java, JavaScript nu obligă
specificarea tipului datelor.
Exemplu. Fie obiectul elev cu următoarele proprietăţi: nume, adresă,
vârsta, sex, clasă, şcoală, boli. Ultimul 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 făcut elevul (1=pojar, 2=scarlatina, 4=oreion, 8=rujeola, 16=vărsat de

vânt). Funcţia de tip constructor a acestui obiect ar fi definită astfel:
function elev(sNume, sAdresa, iVarsta, iSex, sClasa, sScoala, sBoli
this.nume = sNume; this.Clasa = sClasa:
this.adresa = sAdresa; this.Scoala = sScoala;
this.varsta = iVarsta; this. Boli = sBoli;
this.sex = iSex;

Fiecare proprietate poate fi iniţializată cu valori referitoare la diverşi subiecţi.

Ca să ne referim la una dintre persoane şi, în cadrul ei, la una dintre
proprietăţi, vom crea două obiecte de tip Elev prin secvenţa următoare:
for (i=0; i<2; i++) this(0)(5)=”Liceul Odobescu”
{this(i)=newElev() this(1)(0)=”Marin Ion”
this(0)(0)=”Ion Bianca” this(1)(1)=”Str. Lujerului nr. 5”
this(0)(1)=”Str. Azurului nr 13” this(1)(2)=19
this(0)(2)=17 this(1)(3)=”m”
this(0)(3)=”f” this(0))(4)=”XII”
this(0)(4)=”X” this(0)(5)=”Liceul Basarab”}

Putem accesa proprietăţile unui obiect creat sub forma:

document.write(“Varsta lui “+this(0)(0)+”este”+this(0)(2)+”<BR>”)
Acest mod de programare este destul de greoi deoarece nu apare deloc
numele explicit al obiectului. Se foloseşte operatorul this atât pentru a referi
obiectul cât şi pentru a accesa diverse proprietăţi ale acestuia, obiectul
apărând doar ca o listă de elemente.
Se remarcă totuşi că limbajul JavaScript admite şi maxime
multidimensionale în care primul indice se referă la obiect iar al doilea la
proprietăţile acestuia.
 PROGRAMARE HTML, XML

9.7 Funcţii proprii JavaScript [70, 32, 84]

Funcţia eval() are formatul eval(şir).

Scopul funcţiei eval() este să analizeze corectitudinea sintactică a unui şir.
Şirul poate fi orice expresie în care pot apărea şi denumiri de variabile din
acel program, care au fost analizate deja; se admit şi denumiri de proprietăţi
ale obiectelor. Funcţia nu serveşte doar la analize sintactice ci şi la
calcularea valorii expresiilor numerice . Şirul poate fi format din una sau mai
multe instrucţiuni.
Exemple:
• alert(eval(″13+20″)); afişează 33;
• a=7;
5*eval(3*++a);
alert(a); afişează 120;
• alert(eval(″2″+″5″)); afişează 25;
Funcţia parseInt() are formatul : parselnt(sir, baza-de-numeratie)
Şirul şir trebuie să fie format doar din cifre, ale sistemului zecimal,
octal sau hexazecimal. El nu trebuie să aibă parte fractionară. Dacă aceasta
din urmă există totuşi, ea va fi trunchiată. În cazul în care faza de parsing
eşuează va fi anunţat un cod de eroare care este 0 pentru platforma
Windows şi NaN pentru platforma Unix. Aceasta se întâmplă şi când primul
caracter din şir nu este conform contextului.
Funcţia parseFloat() are formatul parseFloat(sir, baza-de-numeratie)
Se admit, în afara numerelor cu parte fracţionară (exemplu 10.234
sau 135. sau .135) şi numere scrise după notaţia stiinţifică, adică cu
exponent (exemplu: -12.45e-24). Este valabilă şi aici observaţia referitoare
la codul de eroare.
Funcţia escape() are formatul escape (sir)
 PROGRAMARE HTML, XML

Are rostul de a converti un şir de caractere ASCII în coduri admise de

ISO.Latin-1.
De multe ori, într-o adresă de tip URL trebuie transmis un caracter de
tabulare, tab (fie un / sau \ etc.). Nu există altă modalitate decât folosirea
acestei funcţii, dinspre limbajul JavaScript.
Funcţia unescape() are formatul unescape (sir)
Este inversă funcţiei anterioare. Va converti un şir de caractere ISO- Latin- 1
în coduri ASCII.
Funcţia number are formatul number (sir)
Rolul ei este de a converti şirul în valoare numerică. În cazul în care şirul nu
se poate converti către o valoare numerică, returnează constanta de eroare
NaN (Not a Number).
Exemple.
alert(number(″13″)+number(″5.2″)); afişează 18.2
alert(number(″2x″)); afişează NaN
Funcţia isNaN
Returnează true dacă şirul nu poate fi convertit către o valoare numerică şi
false în caz contrar.
Exemple.
alert(isNaN(″23″)); returnează false
alert(isNaN(″23a″)); afişează true.

9.8 Obiectele specifice părţii client [70, 81, 84]

9.8.1 Obiectul window

Browser-ul afişează informaţiile cu ajutorul ferestrelor. El poate afişa mai
multe ferestre simultan. Obiectul window este de nivelul cel mai înalt şi are
rolul de a permite lucrul cu ferestrele. Datorită faptului că acest obiect are
nivelul cel mai înalt, nu mai este necesar să fie folosit window înaintea
 PROGRAMARE HTML, XML

metodelor sau proprietăţilor obiectului. Instanţa unui obiect window este o

fereastră afişată de browser. Ca orice obiect, window are anumite metode
şi proprietăţi:

9.8.1.1 Metode
1. Metoda open(fişier_html, nume, parametri) are rolul de a deschide o
fereastră. Parametrii sunt:
• fişier_html – adresa URL a fişerului html care este încărcat de fereastră;
• nume – numele ferstrei;
• parametri – mai mulţi parametri care au rolul de a specifica modul în care
va fi afişată fereastra pe ecran. Aceştia sunt:
- top – distanţa în pixeli faţă de partea de sus a ecranului la care va fi
afişată fereastra;
- left - distanţa în pixeli faţă de partea din dreapta ecranului la care va
fi afişată fereastra;
- width – lăţimea ferestrei în pixeli;
- height – înălţimea ferestrei în pixeli
- resizable – poate lua una din valorile yes sau no. Dacă ia valoarea
yes, utilizatorul poate modifica dimensiunile ferestrei;
- menubar - poate lua una din valorile yes sau no. Dacă ia valoarea
yes, fereastra afişează meniul browser-ului;
- toolbar - poate lua una din valorile yes sau no. Dacă ia valoarea
yes, fereastra afişează bara cu instrumente a browser-ului;
- status - poate lua una din valorile yes sau no. Dacă ia valoarea yes,
fereastra afişează bara de stare;
- location - poate lua una din valorile yes sau no. Dacă ia valoarea
yes, fereastra afişează edit-ul care conţine adresa fişierului html;
- copyhistory - poate lua una din valorile yes sau no. Dacă ia
valoarea yes, copiază istoria apelurilor ferestrei părinte.
 PROGRAMARE HTML, XML

2. Metoda close() are ca efect închiderea ferestrei curente.

În exemplul următor, la apăsarea unui buton se deschide o fereastră, iar la
apăsarea altui buton fereastra se închide:
 PROGRAMARE HTML, XML

Dacă numele ferestrei nu este precizat, metoda close() închide

fereastra curentă. Totuşi, înainte de a închide efectiv ferastra, va apărea o
casetă de dialog prin care se solicită utilizatorului să confirme dacă vrea să
închidă fereastra.

3. Metoda focus() are rolul de a activa o ferastră. O fereastră activă este

vizibilă pe ecran şi recepţionează evenimentele de la mouse (eventual
tastatură). O fereastră poate fi activată printr-un click asupra ei, dar şi prin
metoda focus().

4. Metoda onblur() are rolul de a dezactiva o ferastră. O fereastră inactivă

poate fi aşezată pe bara de task-uri, dar poate fi şi pe ecran, caz în care
poate fi acoperită de suprafaţa altei ferestre. O ferastră poate fi dezactivată
dacă se execută click pe suprafaţa altei ferestre, dar şi cu ajutorul metodei
onblur(), caz în care ea va fi prezentă doar pe bara de task-uri.

9.8.1.2 Proprietăţi
O proprietate deosebit de utilă este status. Valoarea reţinută de această
proprietate va fi afişată pe bara de stare.
Alte proprietăţi importante sunt: document, frame, history, location.
Acestea sunt, la rândul lor obiecte.
Obiectul document
Este de mare complexitate şi conţine mai multe proprietăţi şi metode. Printre
acestea avem proprietatea de tip obiect all. Ea este un vector al tuturor
elementelor care se găsesc pe pagină. Microsoft numeşte o astfel de
proprietate Colecţie, Fiecare element este tratat ca obiect. Printre
elementele (obiectele) care fac parte din vector găsim: HTML, HEAD,
BODY, TITLE (chiar dacă nu este trecut tag-ul respectiv), STYLE, SCRIPT,
câte un element pentru fiecare paragraf(P), imagine(IMG), etc. Fiecare
 PROGRAMARE HTML, XML

element (obiect) conţinut are o anumită proprietate, numită tagName, care

reţine tipul. La rândul ei all are mai multe proprietăţi şi metode, printre care:
• length – numărul de componente ale vectorului;
• metoda tags(tip) – returnează un vector al elementelor de un anumit tip.
Fiind vector, are proprietatea length, care permite adresarea tuturor
elementelor;
• metoda item(id) – returnează elementul (obiectul) de id dat;
• anchors – vector ce reţine elementele de tip ancoră (A);
• images – vector care reţine toate elementele de tip imagine (IMG);
• bgColor – proprietate care reţine culoarea de fond a documentului;
• fgColor – proprietate care reţine culoarea font-urilor;
• linkColor – proprietate care reţine culoarea de scriere a legăturilor;
• metoda write() – se foloseşte pentru scrierea integrală a unui fişier
HTML
• etc.
Pe Internet se gasesc numeroase site-uri cu scripturi free. Aceste scripturi
pot fi inserate in paginile WEB create de utilizator. Imaginea urmatoare este
un exemplu 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 Anexa 3. Codul pentru fluturi este
free si a fost luat de pe site-ul: www.dinamicdrive.com.
 PROGRAMARE HTML, XML

CAPITOLUL X
CSS, XML, XHTML [200, ………..],

10.1 Cateva notiuni despre limbajul de prezentare CSS

În structura unui document HTML pe langa scripturi apar si foile de stil.

O foaie de stil se creaza cu elementul STYLE, si defineste felul în care va
arăta documentul, inclusiv familia de caractere, fontul, culorile, chenarele,
marginile şi alinierea. Prin adăugarea foilor de stil, ca un element de
structură al documentului, înfăţişarea şi conţinutul sunt separate.
STYLE şi SCRIPT sunt unice prin faptul că structura depinde de conţinutul
lor. Formatarea, sintaxa şi definirea stilului variază în funcţie de designer: foi
de stil în cascadă sau foi de stil JavaScript.
Foile de stil, în particular CSS – Cascading Style Sheets, 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.
Limbjaul CSS2 este un limbaj al foilor de stil care permite programatorilor şi
utilizatorilor să ataşeze stiluri (set de caractere, poziţionare, culoare etc.)
documentelor structurate, cum ar fi paginile HTML sau aplicaţiile XML.
Foile de stil trebuie sa fie recunoscute si interpretate de navigatoare.
Specificaţiile HTML definesc modul în care se utilizează HTML cu foile de
stil.
Există patru moduri pentru combinarea foilor de stil cu paginile HTML:
- utilizarea elementului `LINK` pentru a face legătura către o foaie de stil
externă;
 PROGRAMARE HTML, XML

- declararea elementului `STYLE` în cadrul tag-ului `HEAD`;

- importul unei foi de stil utilizând comanda CSS`@ import`;
- asocierea atributului `STYLE` unui alt element din corpul documentului
(`BODY`).
Fiecare regulă de stil CSS este compusă din:
- selector `H1` care indică elementul sau elementele asupra cărora
acţionează regula;
- blocul declaraţiilor `color: red` care descrie condiţiile de redare fizică a
elementului specificat, fiind limitat de acolade.
Pentru a include regulile de stil într-un document HTML se utilzează
elementul STYLE.
 PROGRAMARE HTML, XML

Exemplul foloseste stilul in-line, atasat direct unui element prin

atributul style.
Atributele elementului STYLE sunt:
type = tip_conţinut , specifică libajul foii de stil şi este obligatoriu, nu există o
valoare implicită.
media = descriptor media, Valoarea implicită este ”screen”. Numele ales
pentru descriptor media corespude dispozitivului pentru care proprietăţile
prezentate au sens:
- all – corespunde pentru toate dispozitivele;
- aural – sintetizator vocal;
- braille – terminal Braile;
- embossed – imprimantă Braille;
- handheld – microcalculator de buzunar: având un ecran mic, monocrom
şi conectarea în reţea se face prin modem la un debit redus;
- print – dispozitivul imprimantă;
- projection – dispozitive de protecţie pe perete;
- screen – ecranul calculatorului;
- tty – dispozitive portabile, terminale;
- tv – dispozitive de tip TV.
 PROGRAMARE HTML, XML

Este indicat ca regulile de stil să fie memorate într-un fişier extern, care
poate fi partajat de mai multe documente. Se spune ca se lucreaza cu foi de
stil definite in fisiere externe.
O foaie de stil externă poate fi scrisă cu orice alt editor de texte, nu va
include nici un tag HTML şi va fi salvată cu extensia .css.

Comentariilor in CSS se introduc astfel: /* comentariu CSS */

Legătura către foaia de stil externă se asigură prin elementul LINK.

 PROGRAMARE HTML, XML

Elementul LINK are trei atribute obligatorii: type cu valoarea ”text/css”, rel cu
valoarea ’’stylesheet” si ”href” care are ca valoare URL-ul foii de stil externe
Specificaţiile oferite prin elementul LINK sunt:
Orice foaie de stil conţine o listă de comenzi, care sunt identificate din
ansamblul de reguli declarate reguli predefinite.
Regulile predefinite, ale căror nume incep cu cu simbolul `@` (at), urmat
imediat de un identificator, permit obţinerea unor funcţii care nu sunt
accesibile regulilor normale. Aceste reguli predefinite sunt:
- @page – aplică stilurile paginilor documentului;
- @import – inserează o foaie de stil externă în foaia de stil curentă;
- @media – regrupează regulile de stil care se vor aplica unuia sau mai
multor dispozitive pentru prezentarea documentului;
- @font-face – descrie setul de caractere utilizat prin foaia de stil;
- @charset – defineşte codul caracterelor utilizat prin foaia de stil.
………………………………………

10.2 XML (Extendet Markup Language)

XML este un limbaj comun folosit de tehnologiile software pentru transferul

de informatii intre diverse aplicatii din Internet. XML nu inlocuie HTML-ul.
 PROGRAMARE HTML, XML

HTML este orientat spre modul de afisare a informatiei dupa directivele

HTML, XML ofera suport pentru structurarea informatiilor.

Exemplul anterior prezinta un fisier XML editat in NOTEPAD si cum

este el structurat

In XML se pot crea etichete pentru descrierea datelor si a structurii acestora.

 PROGRAMARE HTML, XML

Etichetele XML identifica tipurile de date. In exemplu, datele se referitoare la

o eleva și folosind etichetele s-a definit structura de date.
Dacă trecem structura XML într-un fișier HTML și il deschidem cu un
browser, vedem cum acesta nu ia in seama etichetele XML si rezultatul va fi:

Observand exemplul anterior putem face o paralela intre cele 2 limbaje:

HTML afişeaza date , XML transporta datele
HTML defineste vizual date , XML descrie datele
 PROGRAMARE HTML, XML

HTML arăta cum datele sunt afişate , XML arăta cum datele sunt utilizate

Ideea centrală a XML este de a permite celor trei aspecte fundamentale ale
unui document: conţinut, structură şi prezentare să fie separate. Un
document HTML combină doar prezentarea şi conţinutul.
Cea mai mare parte a documentelor XML au asociate foi de stil pentru a
permite afişarea într-un anumit format pe ecran. Acelaşi document poate fi
prezentat în mai multe moduri. De exemplu, autorul unui document poate
asigura prezentarea informaţiei, după caz, cum ar fi:
• afişarea pe ecranul unui PC, cu o anumită aranjare în pagină;
• recepţionarea sonoră printr-un software specializat (sintetizator vocal),
conectarea la Web se face printr-un telefon mobil;
• tipărirea pe hârtie, cu o grafică de înaltă calitate;

• înregistrarea documentului într-o bază de date. Presupunem că primeşte

o comandă în format XML. O aplicaţie care înţelege XML poate utiliza
datele pentru a determina ce produse şi în ce cantităţi au fost
comandate;
• afişarea într-un mod simplificat pe mini-ecranul unui calculator de
buzunar sau telefon mobil;
• afişarea printr-un terminal Brille.
Avantajul acestui concept constă în faptul că niciodată nu vor trebiu
schimbate datele documentului XML pentru generarea ieşirilor la diversele
dispozitive. Trebuie să se utilizeze numai concepte software diferite, care
pot furniza ieşiri într-un format particular.
Diferenţa dintre XML şi HTML este extensibilitatea XML. Aceasta se face
prin extinderea gramaticii XML, prin adăugarea de noi TAG-uri, în funcţie de
necesităţi. Limbajul HTML nu poate fi extins de utilizator, posibilităţile de
 PROGRAMARE HTML, XML

îmbunătăţire a acestuia fiind doar prin includerea de scripturi JavaScript,

VBScript, etc.
Un fișier XML bine formulat se conformează unui set de reguli stricte ce
guvernează limbajul XML. Dacă fișierul nu nu respecta regulile, XML da
mesaj de eroare.
Din punct de vedere sintactic, informaţia dintr-un document XML se descrie
asemănător cu cea dintr-un document HTML, singura deosebire fiind că în
XML, valoarea unui atribut se specifică obligatoriu între ghilimele, în HTML
acest lucru fiind opţional.
Exemplu:

Un document XML are o structură logică şi una fizică.

Din punct de vedere fizic, un document XML este format din entităţi. O
entitate poate face referire la o altă entitate. Documentul începe cu o
structură numită rădăcină (ROOT) sau entitate document, documentul fiind
de fapt un arbore de entităţi, începând cu entitatea rădăcină.
 PROGRAMARE HTML, XML

Din punct de vedere logic, structura acestuia este asigurată de marcaje ce

permit definirea de elemente, comentarii, declaraţii, etc.

Declaratia XML identifica versiunea specificatiei XML cu care documentul

va fi în conformitate (versiunea analizorului care va parcurge documentul
XML). Un exemplu de declaratie arata astfel: <?xml version="1.0"?>
Sau <?xml version="1.0" encoding="UTF-8" ?> În acest caz se utilizeaza
setul de caractere UTF-8.
Declaratia tipului de document se pune dupa declaratia XML , înaintea
elementului document.

Eemplu:
 PROGRAMARE HTML, XML

- <?xml version="1.0"?>
- <!DOCTYPE Cont SYSTEM "cont.dtd">

Liniile de cod spun procesorului XML ca documentul este din clasa Cont si
se conformeaza regulilor stabilite în fisierul Cont.dtd.
DTD-ul (Document Type Definition - definitia tipului de document) - defineste
forma si sintaxa constructiilor unui document XML dintr-o anumita clasa.
DTD este un set de reguli care definesc modul de structurare
a documentelor XML.
Standardele DTD-ului sunt definite de World Wide Web Consortium (W3C).
Un document XML poate sa aibe sau nu asociat un DTD, Acesta este intern
(definit in interiorul fisierului XML) sau extern (definit intr-un fisier separate).
Urmatorul exemplu defineste un DTD extern.
 PROGRAMARE HTML, XML

Un document XML poate fi însoţit de un document XSL (eXtensible

Stylesheet Language), care este tot un document XML ce conţine definiţiile
necesare pentru prezentarea informaţiei (din punct de vedere al afişării), pe
Web. Documentul XSL poate să conţină cod HTML, stiluri de formatare CSS
(Cascading Style Sheets), etc.
Dacă documentul XML nu este însoţit de fişierul XSL, browserul afişează
direct forma structurală a documentului (ca în exemplul anterior).
 PROGRAMARE HTML, XML

Obiectivele urmărite la proiectarea XML au fost: să fie simplu de utilizat pe

Internet; să suporte o mare varietate de aplicaţii; să fie compatibil cu SGML;
să fie uşor de scris programe care să prelucreze documente XML;
documentele XML să poată fi concepute rapid, formal şi concis, să fie clare
şi interpretabile de către utilizatori;
Prin XML se separă datele care reprezintă conţinutul unui document de cele
care se referă la prezentarea acestuia. Când se utilizează HTML, datele
necesare afişării documentului sunt memorate în acelaşi fişier HTML.
Utilizând XML, datele pot fi stocate în fişiere XML separate de informaţia
necesară navigatoarelor pentru prezentare.
Prin XML datele pot fi schimbate între sisteme incompatibile. În prezent
sistemele de calcul şi bazele de date conţin date în formate diverse, uneori
incompatibile. Convertind datele în format XML se va reduce foarte mult
această complexitate şi se crează date care pot fi citite de diverse tipuri de
aplicaţii.
Utilizand XML: informaţia din domeniul afacerilor poate fi schimbată prin
Internet, astfel vor fi impulsionate tranzacţiile B2B (Business To Business);
fişierele text pot fi utilizate ca date partajate, independent de platformele
software şi hardware; datele vor fi disponibile mai multor utilizatori deoarece
XML este independent de hardware, software şi aplicaţii; datele pot fi
disponibile pentru toate tipurile de motoare de căutare (agenţi) şi în acest fel
vor ajunge mai uşor la clienţii interesaţi de aceste informaţii.
XML poate fi utilizat pentru generarea de noi limbaje. Exemplu: Wireless
Markup Language (WML), utilizat ca suport în aplicaţiile Internet destinate
dispozitivelor mobile miniaturizate scris în XML.
 PROGRAMARE HTML, XML

Pe site-ul:
http://www.siteuri.ro/developer/xml-in-10-points.ro.html

se gasesc 10 puncte de la prin care se

prezinta XML-ul, puncte enumerate in continuare, asa cum sunt
prezentate pe site .

1. XML structureaza datele (informatiile)

Prin date structurate intelegem lucruri ca spreadsheets, liste de contacte,

parametri de configuratie, tranzactii financiare sau desene tehnice. XML

- este un set de reguli pentru a crea formate text care iti permit sa
structurezi datele.
- nu este un limbaj de programare
- ajuta calculatorul la generarea , cititirea datelor, si structurarea corecta a
datelor.
- este extensibil, independent de platforma si suporta internationalizarea si
localizarea.
- este complet compatibil cu Unicode.
2. XML seamana un pic cu HTML
Ca si HTML, XML foloseste :
- tag-uri (cuvinte cuprinse in '<' si '>')
- atribute (de forma nume="valoare").
HTML specifica ce inseamna fiecare tag si atribut, si deseori cum va aparea
textul marcat cu acestea in browser.
XML foloseste taguri pentru a delimita bucati de date, lasand interpretarea
acestor date cu totul in seama aplicatiei care le citeste. Astfel, "<p>" intr-un
fisier XML, nu inseamna obligatoriu paragraf. In functie de context, poate fi
un pret, un parametru, o persoana (sau un cuvant care nici macar nu incepe
cu p).
 PROGRAMARE HTML, XML

3. XML este text, dar nu e facut pentru a fi citit

Un avantaj al formatului text este ca permite vizualizarea fisierului fara a

folosi programul care l-a produs. Formatul text face debugging-ul mai usor
pentru developeri. Utilizatorii pot citi fisierul daca au nevoie. Un tag uitat sau
un atribut fara ghilimele face un fisier XML inutilizabil. Daca apare o
greseala, aplicatia trebuie sa opreasca citirea si sa raporteze o eroare.

4. XML este 'vorbaret' prin design

Deoarece XML este un format text si foloseste taguri pentru a delimita

datele, fisierele XML sunt aproape intotdeuna mai mari decat formatele
binare. Spatiul pe disk este mai ieftin decat era in trecut. Programe de
compresie ca zip si gzip pot comprima fisierele foarte bine si foarte rapid. In
plus, protocoale de comunicare, ex. http protocolul de baza al web-ului, pot
comprima datele din mers, economisind bandwidth-ul la fel de bine ca
formatul binar.

5. XML este o familie de tehnologii

XML 1.0 este specificatia care defineste ce sunt tagurile si atributele.
"Familia XML" este un set de module (in continua crestere) care ofera
servicii folositoare pentru indeplinirea unor lucruri importante si folosite
deseori.
XLINK descrie un mod standard de a adauga hyperlinkuri unui fisier XML.
XPointer este o sintaxa in dezvoltare, folosita la identificarea unor parti dintr-
un document XML. Un XPointer este asemanator cu un URL, dar in loc sa
indice un document web, indica o parte dint-un fisier XML.
CSS limbajul style sheet, se poate aplica la XML la fel ca la HTML.
XSL este limbjul avansat style sheet. Este bazat pe :
XSLT un limbaj de transformare folosit pentru a rearanja, adauga sau sterge
taguri si atribute.
DOM este un set standard de functii pentru manipularea fisierelor XML (si
HTML) dintr-un limbaj de programare.
 PROGRAMARE HTML, XML

XML Schemas 1 si 2 ajuta developerii sa defineasca precis structura

fisierelor XML, in formatul creat de ei. Alte module si utilitati sunt inca in
dezvoltare.
6. XML e nou, dar nu chiar atat de nou

Dezvoltarea XML a inceput in 1996 si XML a devenit o recomandare W3C

din Februarie 1998,

7. XML tranforma HTML in XHTML

Exista o importanta aplicatie XML care are format de document: XHTML.

XHTML are multe din elementele HTML-ului. Sintaxa a fost schimbata un pic
pentru a corespunde regulilor XML. Un format bazat pe XML mosteneste
sintaxa XML si o constrange in mai multe feluri (spre exemplu, XHTML
permite folosirea "<p>", dar nu a "<r>"); totodata, se adauga inteles sintaxei
(XHTML spune ca "<p>" inseamna "paragraph", si nu "pret", "persoana" sau
altceva).

8. XML este modular

XML iti permite sa definesti un nou format de document combinand si

refolosind alte formate. Deoarece cele doua formate pot folosi elemente sau
atribute cu acelasi nume, trebuie sa ai grija la combinarea lor (inseamna
"<p>" "paragraf" dintr-un format, sau "persoana" din celalalt format?). Pentru
a elimina confuzia, XML are un mecanism numit namespce (domenii pentru
nume). XSL si RDFsunt exemple de formate bazate pe XML care folosesc
namespace-uri. XML Schema este conceputa cu acest suport pentru
modularizare. Aceasta modularizare la nivelul definirii unui document XML
face posibila combinarea a doua scheme pentru a forma o a treia, care
defineste un document combinat (combinatie de documente definite de cele
doua scheme initiale).
 PROGRAMARE HTML, XML

9. XML este baza RDF-ului si Web-ului Semantic

Resource Description Framework RDF, al W3C, este un format XML text

care suporta descrierea resurselor si aplicatiilor meta-date, cum ar fi playlist-
uri pentru muzica, colectii foto si bibliografii. Spre exemplu, RDF iti poate
permite sa identifici oameni intr-un album foto (pentru web) folosind
informatii dintr-o lista de contacte; apoi clientul tau mail ar putea trimite
automat un mail acestor persoane, anuntandu-i ca fotografiile lor sunt pe
web (on-line). Cum HTML a integrat documente, imagini, sisteme de meniuri
si formulare, RDF este o unealta care permite o integrare mai profunda,
pentru a transforma web-ul un pic mai mult intr-un web semantic. La fel cum
oamenii au nevoie de o conventie care sa stabileasca intelesurile cuvintelor
cu care comunica, si calculatoarele au nevoie de acelasi lucru pentru a
comunica eficient. Descrierile formale dintr-o anumita categorie (cumparare
sau productie, spre exemplu) sunt numite ontologii si sunt o parte necesara
a web-ului semantic. RDF, ontologiile si reprezentarea intelesului pentru a
permite calculatoarelor sa ajute munca oamenilor, sunt parte a activitatii
pentru Web-ul Semantic.

10. XML functioneaza pe orice platforma, este suportat bine si nu are

nevoie de licenta

Alegand XML pentru un proiect, vei putea folosi un numar mare de aplicatii
(este posibil ca una dintre ele sa poata face deja ce ai tu nevoie). Nu trebuie
licenta pentru a folosi XML, nu trebuie sa platesti nimic nimanui.
Comunitatea mare de persoane care folosesc XML inseamna ca nu depinzi
de un sigur producator. Desi XML nu este intotdeauna cea mai buna solutie,
se merita cel putin sa il consideri printre optiuni.
 PROGRAMARE HTML, XML

10.3 Cteva reguli de trecere de la HTML la XHTML (eXtensible

HyperText Markup Language)

XHTML este un limbaj utilizat la crearea paginilor Web, asemanator cu

HTML-ul si avand la baza tehnologia XML.
In XHTML trebuie respectate o serie de reguli:

• La scrierea tag-urilor se folosesc literele mici, XHTML e case-sensitive

• Atributele SE PUN INTRE GHILIMELE

• Etichetele SE INCHID,

• Etichetele goale se inchid astfel: <br /> sau <br></br>. Dintre

elementele goale in HTML se pot enumera: <area/>, <base>,
<basefont/>, <br/>, <hr/>, <img/>, <link/>, etc.

• Elementul deschis primul se inchide ultimul.

elementul deschis al doilea se inchide penultimul,
,,,,,,,,,,,,,,,,,,,,,
Spunem ca elementele se inchid in ordine inversa deschiderii.
Structura unui pagini XHTML
Primele 2 linii contin declartia DOCTYPE si eticheta html:
<!DOCTYPE html PUBLIC ... >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
………………
</head>
<body>
……………………
</body>
</html>
 PROGRAMARE HTML, XML

Declaratia DOCTYPE – este o eticheta HTML, nu trebuie inchisa cu

simbolul / .
Eticheta HTML - in XHTML are atributul xmlns (XML NameSpace), cu
valoarea adresa URL unde sunt prezentate specificatiile W3C.
<html xmlns="http://www.w3.org/1999/xhtml">
Declaratia DOCTYPE si eticheta html specifica tipul documentului, astfel
incat browserul si validatoarele sa-l poata interpreta correct.

BIBIOGRAFIE
200. http://www.siteuri.ro/developer/xml-in-10-points.ro.html

• Baze de date. Fundamente teoretice şi practice,

Grupul BDASEIG, Editura Infomega, Bucureşti, 2002

• Tehnologia aplicaţiilor Web, Floarea năstase,

Pavel Năstase, Editura Economică, Bucureşti, 2002

• Totul despre HTML 4, Rick Darnel, Editura Teora,

Bucureşti, 2002

• HTML prin EXEMPLE, Teodoru Gugoiu, Editura

Teora, Bucureşti, 2003

• HTML Complete, Donna L. Baker, Editura Sybex,

2003

http://inf.ucv.ro/~mihaiug/courses/xml/ValidareaDocumentelorXML.pdf
 PROGRAMARE HTML, XML

ANEXA 3
<HTML>
<! SCOP: calcule interactve >
<HEAD>
<TITLE>Exemplu</TITLE>
<script language="JavaScript1.2">
/* Flying Butterfly script (By BGAudioDr@aol.com)
Modified slightly/ permission granted to Dynamic Drive to feature script in archive
For full source, visit http://www.dynamicdrive.com */
var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES
//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP
ELEMENT NUMERICAL ORDER STARTING WITH "0" !!
var floatimages=new Array();
floatimages[0]='butterfly2.gif';
floatimages[1]='butterfly2.gif';
//*********DO NOT EDIT BELOW***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 &&
parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true :
false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 &&
navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a
href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute;
visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';}
document.write(t);
function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)?
IDs[num].Ystep: -IDs[num].Ystep);}
function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));}
function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;}
function getscrolly(){
 PROGRAMARE HTML, XML

if(NS4 || NS6)return window.pageYOffset;

if(IE4)return document.body.scrollTop;}
function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);}
function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';}}
function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);}
function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);}
function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';}}
function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;}
function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;}
function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)),
Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);}}
function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
 PROGRAMARE HTML, XML

clearInterval(startfly)}}
if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }}
</script>
<SCRIPT>
//lungimea cercului este calculata cu formula obisnuita 2*Pi*r
function calcul(obiect){
obiect.LungimeCerc. value=3.14*obiect.razaCerc.value*2 }
</SCRIPT>
<HEAD>
<BODY>
<FORM NAME="calculCerc">
Precizati raza cercului <INPUT TYPE=text NAME=razaCerc SIZE=25> <P>
Lungimea este <INPUT TYPE=text NAME=LungimeCerc SIZE=30> <P>
<INPUT TYPE=button NAME=buton VALUE="Declansati calculul"
ONCLICK="calcul(this.form)">
</FORM>
</BODY>
</HTML>