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 hrtie. Marcajele permit obinerea 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 rspund la diferitele aciuni efectuate cu mouse-ul, cu tastatura sau pentru c au fost prescrise o serie de aciuni prin instruciunile adugate n cadrul fiierului cu extensia .html, pe partea de client.

9.1 Introducere in Java Script [70, 84]

JavaScript a adugat o mai mult interactivitate i funcionalitate paginilor de cas. Pn la apariia sa, singurul mijloc l ofereau unul din limbajele de tip script: Perl, oricare din cele trei shell-uri Unix (C-shell, Bourneshell, 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). JavaScript este mai simplu dect Java, mai puin dotat dect acesta, i totui se bazeaz pe Java. Este mai apropiat de acesta dect de marcajele

PROGRAMARE HTML, XML HTML. Dac Java permite scrierea de aplicaii de sine stttoare (stand alone) sau compilate, JavaScript nu permite acest lucru pe partea de client. JavaScript permite cunosctorului HTML s trateze cu secvene de program adecvate, diverse evenimente iniiate de ctre utilizator cum ar fi: efectuarea unui clic cu mouse-ul, survolarea cu mouse-ul a anumitor zone ale unei hri afiate, completarea unui formular sau acionarea unui buton, conturat pe ecran; organizeaz ferestre n mai multe cadre, fiecare punctnd spre un document din spaiul Web. ntr-un cuvnt, face rsfoirea unui volum mare de informaii mult mai uman pentru utilizator. Fiind pregtit pentru arhitectura client-server, pe ecranul unde ruleaz clientul poate aprea un formular cu felurite cmpuri, unde utilizatorul precizeaz diferite informaii sau alege anumite opiuni. La efectuarea unui clic pe butonul de tip submit, rspunsurile utilizatorului pentru acest formular sunt expediate la server, care le prelucreaz. JavaScript are o sintax asemntoare limbajului C. Prima atenionare care trebuie fcut este c, spre deosebire de HTML, de altfel ca i C++, JavaScript este case sensitive, adic face distincia 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 Write este metoda, aceasta afiseaza un sir de caractere in document.

PROGRAMARE HTML, XML

Instruciunile scrise cu JavaScript vor fi incluse n documentul HTML n interiorul marcajului <SCRIPT> care este un marcaj pereche i are marcajul corespunztor de terminare </SCRIPT>.

9.2 Structura programelor JavaScript [70, 77, 84]

Un program n JavaScript este format din: partea principal (main), din secvene de tratare a apariiei anumitor evenimente i din funcii.

PROGRAMARE HTML, XML Evenimentele sunt provocate de ctre micarea mouse-lui sau a tastelor, deci n genere, de ctre vizitator. Partea principal este alctuit din instruciuni ce apar n cadrul marcajului <SCRIPT> i care nu intr n corpul unei functii. De fapt, ca i n limbajul C/C++, main este funcia principal, numai c acum lipsete void sau int main() { ... }, cum se scria n C/C++. Este recomandabil a forma aceasta parte principal ct mai redus posibil. Secvenele de tratare a evenimentelor sunt "trezite" i puse s rspund la aciunile pe care vizitatorul paginii de cas le ntreprinde., exemlu: atributul ONCLICK="nume-de-functie()". Funciile sunt scurte secvene de program ce pot fi apelate de ctre alte funcii, deci i de partea principal a programului, care poate fi socotit tot o funcie. Funcia are un nume care este precedat de cuvntul function. Dupa nume urmeaza, intre o pereche de paranteze rotunde, lista parametrilor formali, crora li se atribuie n mod poziional valorile reale ale argumentelor din lista de apel. Putem atribui valori i invers, dinspre funcie spre secvena 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 rnduri consecutive */ , oferind o oarecare relaxare, n sensul c textul explicativ poate fi continuat pe oricte linii de text ca in exemplul urmator: /* Acesta este un comentariu n JavaScript care poate fi folosit i pentru programele scrise cu C. */

PROGRAMARE HTML, XML -- datele scrise ntre ghilimele se numesc literali. Un literal este

aadar scris ca un "grup de cuvinte ncadrat de ghilimele terminale". Literalii pot fi definii 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 su unde este recunoscut.

Deoarece JavaScript este un limbaj n care nu se pot declara (ca n C++/ C) tipurile variabilelor folosite, la momentul interpretrii se stabilete din context daca tipul datei coincide cu operatorul sau funcia care i se aplic asa cum se vede pe urmatoarea secventa: var a = 100 x=100+a a="scripturi" x="100" + a // aici a este o variabila numerica // x va lua valoarea 200 // a poate fi redefinit ca variabila de tip sir // 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 cmp va primi rspunsul, adic lungimea sa.

Urmeaz sursa:

PROGRAMARE HTML, XML

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.
-

JavaScript folosete si tipul de date logic. Valorile literalilor booleeni sunt: "false" (valoare falsa) i "true" (adevrat). dintre constantele speciale folosite n JavaScript mentionm: secvenele care ncep cu bara invers denumite i secvene 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 evalurii. n cazul

PROGRAMARE HTML, XML atribuirilor, valoarea rezultat este valoarea atribuit variabilei care este prima din stnga ntr-un ir de atribuiri.
-

operatorii relaionali sunt operatori binari, care ntorc o valoare logic, true dac relaia este adevrat, sau false, dac relaia nu este adevrat.

pentru conversii forate ir - > numr se folosesc dou funcii: parseInt() i parseFloat(). Fiecare va converti un ir ntr-un numr, prima, ntr-unul de tip ntreg, a doua, ntr-unul de tip real, firete, dac acest lucru este posibil. Secvena de mai jos exemplific acest lucru: var a = "1000" b = parseInt(a) var a = "Java" b = parseInt(a) var a = "123.45" b = parseFloat(a) //b va avea valoarea numeric 123,45 //se va solda cu mesaj de eroare //definim literalul 1000 //b va avea valoarea ntreag 1000

datele octale, adic cele scrise n baza sistemului de numeraie 8, vor ncepe obligatoriu cu cifra 0. Deci, numrul 0123 va fi considerat numrul 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.

in JavaScript se poate amna interpretarea unei expresii, pn cnd vizitatorul va specifica expresia i apoi va apela la serviciile funciei eval() pentru a calcula ct este, aa cum rezult din urmtorul program amplasat n contextul unui document html:

PROGRAMARE HTML, XML

Instruciunile limbajului sintax i semantic .

JavaScript sunt cele de la C++ avnd aceiai

PROGRAMARE HTML, XML

9.4 Obiectele limbajului JavaScript [32, 70, 77]

Obiectul are o serie de caracteristici (proprieti) si o serie de funcii. Exist i obiecte al cror coninut nu se schimb numite obiecte statice. Mai exist i obiecte create de programator, care, ca i unele dintre obiectele JavaScript, trebuie instaniate. JavaScript este un limbaj "bazat" i nu "orientat" pe obiecte, aa cum este C++ care face parte din generaia a 4-a (4GL). n programarea orientat pe obiect ntlnim o mulime de limbaje, unele orientate pe clase, altele, numai pe obiecte, altele, pe ambele. Conceptul, destul de vechi a aprut 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, conducnd n final la creterea eficienei muncii de concepere. Dac n perioada limbajelor 3GL, FORTRAN-ul alturi de COBOL i PL/l alctuiau fondul de limbaje foarte populare, n perioada 4GL ntlnim: C++, CLOS (Common LISP Object System), Object Pascal, Eiffel (un fel de Pascal foarte reuit); 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 fr Java, primul limbaj orientat pe obiecte pentru mediul de reea. Un obiect apare ca urmare a procesului de instaniere a unui ablon de date, numit clas. Acest ablon poate fi considerat drept un sertar, n care se gsesc o serie de desprituri - unele pentru pstrarea datelor, altele pentru diverse funcii folosite n tratarea acestor date. n programarea orientat pe obiect (OOP - Object Oriented Programming) aceste funcii se numesc metode. De pild, autobuzul este

PROGRAMARE HTML, XML un obiect, avionul este altul, autoturismul este altul, etc.. Toate deriv din clasa vehicule, care la rndul lor deriv din clasa mijloace. Exist mijloace care nu sunt deplasabile pe teren precum racheta i altele deplasabile pe pmnt precum cele de mai sus. Se observ deci o ierarhie a obiectelor. Putem considera ablonul, de exemplu al unui avion, drept proiectul su de construcie. Se spune despre un obiect c posed o serie de proprieti, aa cum ar fi autoturismul care are o anumit greutate, un anumit numr de cai putere, dezvolt o anumit vitez, etc.. Obiectele conin o serie de funcii (metode), de asemenea ncapsulate. Exemplu obiectul Math din JavaScript al carui coninut se refer, la anumite valori caracteristice, (crora li se spune proprieti) sau funcii frecvent folosite. Dintre proprietile sale enumerm: Math.E valoarea numrului 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 conine i o serie de metode pentru calculul funciilor 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 ntlnim: Math.log, Math.min(v1,v2), Math.max(v1,v2), Math.random pentru generarea numerelor aleatoare cu distribuia uniform. Exist i Math.round (de exemplu, round(66,45) d 66, dar round(66, 51) va da 67) etc. Se observ c proprietile 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. 0 definiie a obiectului, ar putea fi urmtoarea: obiectul este o entitate, o structur abstract de date, constituit din proprieti i metode. Proprietile se pot asimila datelor (constante sau variabile), iar metodele, funciilor.

PROGRAMARE HTML, XML Spunem c JavaScript nu este dect bazat pe obiecte, nu i orientat spre ele pentru c obiectelor acestui limbaj le lipsesc 3 caracteristici ale teoriei OOP (Object Oriented Programming): motenirea, ncapsularea i abstractizarea. Corporaia Netscape Communication a definit propriul concept, cunoscut sub numele JavaScript Object Model (JOM). JOM conine totalitatea obiectelor, proprietilor, metodelor dar i variabilelor i funciilor din universul Netscape. Obiectele Netscape nu trebuie confundate cu cele ale limbajului JavaScript. Aceeai corporaie 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 coninute n nsui acest JavaScript Object Model, dar se pot defini i altele proprii. Pe osatura unui document HTML se folosesc facilitile limbajului JavaScript i se pot afia 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 solicitrile sosite de la diferii clienti (diferite programe de vizitare care recurg la JavaScript), care trimit informaii cerute prin aceste scenarii, sau de a accesa server-e de baze de date, pentru fiiere sau care conin biblioteci de aplicaii scrise n C, Java etc. Se pot chiar adapta diverse aplicaii de tip applet scrise n limbajul Java.

PROGRAMARE HTML, XML

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 funcii (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 dnd posibilitatea efecturii diverselor calcule matematice sau crerii diferitelor resurse: text, ferestre, formulare, cadre etc. Sintaxa general pentru folosirea unei anumite proprieti a unui obiect este: numeObiect.numeProprietate. In JavaScript un obiect propriu se creaz parcurgnd dou etape: definirea obiectului i crearea(instanierea) obiectului. Exemplu. Definim obiectul Autoturism cu funcia auto() care are 3 parametri: tip, vitez, an fabricaie, prin secvena: function auto (sTip, iViteza, iAn) {this.Tip=sTip; this.Viteza=iViteza; this.AnFab=iAn;} La definirea obiectului se poate atasa, pentru denumiri cte o liter de nceput care anun tipul variabilei: s - ir, i - numr ntreg. Cuvntul rezervat this. este un operator cu care se face referire la obiectul curent. Instanierea obiectelor n JavaScript se face prin operatorul new (ntocmai ca n C++). Pentru obiectul Autoturism definit mai sus putem acum instania oricate obiecte de acest tip, sub urmtoarea form: AutoturismA=new auto(Cielo,180, 1995) AutoturismB=new auto(Dacia, 120, 2003) AutoturismC=new auto(Ford, 200, 2000)

PROGRAMARE HTML, XML Putem crea oricte astfel de obiecte. Instruciunile de atribuire de mai sus seamn cu cele ale unui constructor din C++. Operatorul new va aloca resursele (de memorie) necesare pentru ntreaga structur de date a obiectului. Adugm i o metod obiectului Autoturism care calculeaz numrul de km parcuri de acesta. Parametrul intern al obiectului afectat de aceast funcie n sensul creterii sale este Lungime . Rescriem funcia auto(), ca s anunm i metoda Parcurs ca membr a acestui obiect: function auto(sTip, iViteza, iAn) { this.Tip this.Viteza this. AnFab this.Lungime this.Parcurs = sTip,. = iViteza; = iAn: = 0; = 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 manevrrii datelor calendaristice dar i orei, pentru afiarea n cadrul paginii de cas. Acest obiect nu posed proprieti, 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.

PROGRAMARE HTML, XML Obiectele statice sunt cele care nu se schimba. Math este un astfel de obiect, deoarece el nu se schimb, cum se ntmpl n cazul obiectului Date. Obiectele statice nu trebuie instaniate. 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 numr aleator cu distribuia uniform n mulimea [0,1). Dac dorim s generm 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 construcia: obiect-static. proprietate Scopul (adica domeniul unde denumirea unui obiect este recunoscut) unui obiect difer n funcie de aplicaie. 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 afiate cu diferite caracteristici tipografice. Singura proprietate a acestui obiect este numit length, adic lungime, i cuprinde numrul caracterelor (litere, cifre, semne speciale) pe care le conine obiectul la un moment dat. Metodele obiectului string i semnificaiile lor sunt [70]: anchor() big() blink() bold() charAt() fixed() fontsize() indexOf() Va crea un text pe post de ancor irul va fi afiat cu un corp de liter mai mare irul cruia i se aplic va pulsa irul va aprea cu caractere ngroate Preia un caracter din ir care fusese adresat prin intermediul unui index Are efectul similar cu al marcajului <TT> Stabilete mrimea corpului de liter cu care va fi afiat pe ecran irul respectiv Preia valoarea offset-ului acelui caracter care este

PROGRAMARE HTML, XML italics() lastIndexOf() cutat ntr-un ir, plecnd de la valoarea fromIndex Similar marcajului <I> Se caut ultima apariie a unui caracter ntr-un ir. Valoarea acelui index va fi coninut de acest paralink() small() strike() sub() substring() metru Creeaz o legtur de tip hipertext. Similar cu <A HREF> spre o resurs de tip URL Afieaz irul cu corp mic de liter Afieaz irul barat cu o liniu irul va fi afiat ca indice inferior Preia un ir parial dintr-un ir.Parametrii cerui de aceast metod sunt indexA i indexB. Ambii fixeaz sup() toLowerCase( ) toUpperCase( ) limitele acelui ir redus Afieaz acel ir ca indice superior Convertete literele alfabetice mari ale unui ir n litere mici Convertete 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 pornete de la 0. Spre deosebire de C/C++ sau Java, JavaScript nu oblig specificarea tipului datelor. Exemplu. Fie obiectul elev cu urmtoarele proprieti: nume, adres, vrsta, 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 boli a fcut elevul (1=pojar, 2=scarlatina, 4=oreion, 8=rujeola, 16=vrsat de vnt). Funcia de tip constructor a acestui obiect ar fi definit astfel: function elev(sNume, sAdresa, iVarsta, iSex, sClasa, sScoala, sBoli this.nume this.adresa this.varsta = sNume; = sAdresa; = iVarsta; this.sex this.Clasa this.Scoala = iSex; = sClasa: = sScoala;

PROGRAMARE HTML, XML this. Boli = sBoli;

Fiecare proprietate poate fi iniializat cu valori referitoare la diveri subieci. Ca s ne referim la una dintre persoane i, n cadrul ei, la una dintre proprieti, vom crea dou obiecte de tip Elev prin secvena urmtoare: for (i=0; i<2; i++) {this(i)=newElev() this(0)(0)=Ion Bianca this(0)(1)=Str. Azurului nr 13 this(0)(2)=17 this(0)(3)=f this(0)(4)=X this(0)(5)=Liceul Odobescu this(1)(0)=Marin Ion this(1)(1)=Str. Lujerului nr. 5 this(1)(2)=19 this(1)(3)=m this(0))(4)=XII this(0)(5)=Liceul Basarab}

Putem accesa proprietile 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 folosete operatorul this att pentru a referi obiectul ct i pentru a accesa diverse proprieti ale acestuia, obiectul aprnd doar ca o list de elemente. Se remarc totui c limbajul JavaScript admite i maxime multidimensionale n care primul indice se refer la obiect iar al doilea la proprietile acestuia.

9.7 Funcii proprii JavaScript [70, 32, 84]

Funcia eval() are formatul eval(ir). Scopul funciei eval() este s analizeze corectitudinea sintactic a unui ir. irul poate fi orice expresie n care pot aprea i denumiri de variabile din acel program, care au fost analizate deja; se admit i denumiri de proprieti

PROGRAMARE HTML, XML ale obiectelor. Funcia nu servete doar la analize sintactice ci i la calcularea valorii expresiilor numerice . irul poate fi format din una sau mai multe instruciuni. Exemple:

alert(eval(13+20)); a=7; 5*eval(3*++a); alert(a);

afieaz 33;

afieaz 120;

alert(eval(2+5)); afieaz 25; irul ir trebuie s fie format doar din cifre, ale sistemului zecimal,

Funcia parseInt() are formatul : parselnt(sir, baza-de-numeratie) octal sau hexazecimal. El nu trebuie s aib parte fractionar. Dac aceasta din urm exist totui, ea va fi trunchiat. n cazul n care faza de parsing eueaz va fi anunat un cod de eroare care este 0 pentru platforma Windows i NaN pentru platforma Unix. Aceasta se ntmpl i cnd primul caracter din ir nu este conform contextului. Funcia parseFloat() are formatul parseFloat(sir, baza-de-numeratie) Se admit, n afara numerelor cu parte fracionar (exemplu 10.234 sau 135. sau .135) i numere scrise dup notaia stiinific, adic cu exponent (exemplu: -12.45e-24). Este valabil i aici observaia referitoare la codul de eroare. Funcia escape() are formatul escape (sir) 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 dect folosirea acestei funcii, dinspre limbajul JavaScript. Funcia unescape() are formatul unescape (sir)

PROGRAMARE HTML, XML Este invers funciei anterioare. Va converti un ir de caractere ISO-Latin-1 n coduri ASCII. Funcia number are formatul number (sir) Rolul ei este de a converti irul n valoare numeric. n cazul n care irul nu se poate converti ctre o valoare numeric, returneaz constanta de eroare NaN (Not a Number). Exemple. alert(number(13)+number(5.2)); afieaz 18.2 alert(number(2x)); afieaz NaN Funcia isNaN Returneaz true dac irul nu poate fi convertit ctre o valoare numeric i false n caz contrar. Exemple. alert(isNaN(23)); returneaz false alert(isNaN(23a)); afieaz true.

9.8 Obiectele specifice prii client [70, 81, 84]

9.8.1 Obiectul window Browser-ul afieaz informaiile cu ajutorul ferestrelor. El poate afia 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 metodelor sau proprietilor obiectului. Instana unui obiect window este o fereastr afiat de browser. Ca orice obiect, window are anumite metode i proprieti: 9.8.1.1 Metode

PROGRAMARE HTML, XML 1. Metoda open(fiier_html, nume, parametri) are rolul de a deschide o fereastr. Parametrii sunt: fiier_html adresa URL a fierului html care este ncrcat de fereastr; nume numele ferstrei; parametri mai muli parametri care au rolul de a specifica modul n care va fi afiat fereastra pe ecran. Acetia sunt: top distana n pixeli fa de partea de sus a ecranului la care va fi afiat fereastra; left - distana n pixeli fa de partea din dreapta ecranului la care va fi afiat fereastra; width limea ferestrei n pixeli; height nlimea 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 afieaz meniul browser-ului; toolbar - poate lua una din valorile yes sau no. Dac ia valoarea yes, fereastra afieaz bara cu instrumente a browser-ului; status - poate lua una din valorile yes sau no. Dac ia valoarea yes, fereastra afieaz bara de stare; location - poate lua una din valorile yes sau no. Dac ia valoarea yes, fereastra afieaz edit-ul care conine adresa fiierului html; copyhistory - poate lua una din valorile yes sau no. Dac ia valoarea yes, copiaz istoria apelurilor ferestrei printe. 2. Metoda close() are ca efect nchiderea ferestrei curente. n exemplul urmtor, la apsarea unui buton se deschide o fereastr, iar la apsarea altui buton fereastra se nchide:

PROGRAMARE HTML, XML

Dac numele ferestrei nu este precizat, metoda close() nchide fereastra curent. Totui, nainte de a nchide efectiv ferastra, va aprea o caset de dialog prin care se solicit utilizatorului s confirme dac vrea s nchid fereastra.

PROGRAMARE HTML, XML

3. Metoda focus() are rolul de a activa o ferastr. O fereastr activ este vizibil pe ecran i recepioneaz 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 aezat pe bara de task-uri, dar poate fi i pe ecran, caz n care poate fi acoperit de suprafaa altei ferestre. O ferastr poate fi dezactivat dac se execut click pe suprafaa 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 Proprieti O proprietate deosebit de util este status. Valoarea reinut de aceast proprietate va fi afiat pe bara de stare. Alte proprieti importante sunt: document, frame, history, location. Acestea sunt, la rndul lor obiecte. Obiectul document Este de mare complexitate i conine mai multe proprieti i metode. Printre acestea avem proprietatea de tip obiect all. Ea este un vector al tuturor elementelor care se gsesc pe pagin. Microsoft numete o astfel de proprietate Colecie, Fiecare element este tratat ca obiect. Printre elementele (obiectele) care fac parte din vector gsim: HTML, HEAD, BODY, TITLE (chiar dac nu este trecut tag-ul respectiv), STYLE, SCRIPT, cte un element pentru fiecare paragraf(P), imagine(IMG), etc. Fiecare element (obiect) coninut are o anumit proprietate, numit tagName, care reine tipul. La rndul ei all are mai multe proprieti i metode, printre care:

length numrul de componente ale vectorului;

PROGRAMARE HTML, XML

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 reine elementele de tip ancor (A); images vector care reine toate elementele de tip imagine (IMG); bgColor proprietate care reine culoarea de fond a documentului; fgColor proprietate care reine culoarea font-urilor; linkColor proprietate care reine culoarea de scriere a legturilor; metoda write() se folosete pentru scrierea integral a unui fiier 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 .

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

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 arta documentul, inclusiv familia de caractere, fontul, culorile, chenarele, marginile i alinierea. Prin adugarea foilor de stil, ca un element de structur al documentului, nfiarea i coninutul sunt separate. STYLE i SCRIPT sunt unice prin faptul c structura depinde de coninutul lor. Formatarea, sintaxa i definirea stilului variaz n funcie 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 ataeze stiluri (set de caractere, poziionare, culoare etc.) documentelor structurate, cum ar fi paginile HTML sau aplicaiile XML. Foile de stil trebuie sa fie recunoscute si interpretate de navigatoare. Specificaiile 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 legtura ctre o foaie de stil extern; declararea elementului `STYLE` n cadrul tag-ului `HEAD`;

PROGRAMARE HTML, XML

-

importul unei foi de stil utiliznd 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 crora acioneaz regula; blocul declaraiilor `color: red` care descrie condiiile 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_coninut , 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 proprietile prezentate au sens:
-

all corespunde pentru toate dispozitivele; aural sintetizator vocal; braille terminal Braile; embossed imprimant Braille; handheld microcalculator de buzunar: avnd un ecran mic, monocrom i conectarea n reea se face prin modem la un debit redus; print dispozitivul imprimant; projection dispozitive de protecie pe perete; screen ecranul calculatorului; tty dispozitive portabile, terminale; tv dispozitive de tip TV.

Este indicat ca regulile de stil s fie memorate ntr-un fiier 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 */

PROGRAMARE HTML, XML

Legtura ctre foaia de stil extern se asigur prin elementul LINK.

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 Specificaiile oferite prin elementul LINK sunt: Orice foaie de stil conine o list de comenzi, care sunt identificate din ansamblul de reguli declarate reguli predefinite. Regulile predefinite, ale cror nume incep cu cu simbolul `@` (at), urmat imediat de un identificator, permit obinerea unor funcii 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;

PROGRAMARE HTML, XML

-

@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 definete 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. HTML este orientat spre modul de afisare a informatiei dupa directivele HTML, XML ofera suport pentru structurarea informatiilor.

PROGRAMARE HTML, XML 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.

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 fiier HTML i il deschidem cu un browser, vedem cum acesta nu ia in seama etichetele XML si rezultatul va fi:

PROGRAMARE HTML, XML Observand exemplul anterior putem face o paralela intre cele 2 limbaje: HTML afieaza date , XML transporta datele HTML defineste vizual date , XML descrie datele HTML arta cum datele sunt afiate , XML arta cum datele sunt utilizate

Ideea central a XML este de a permite celor trei aspecte fundamentale ale unui document: coninut, structur i prezentare s fie separate. Un document HTML combin doar prezentarea i coninutul. Cea mai mare parte a documentelor XML au asociate foi de stil pentru a permite afiarea ntr-un anumit format pe ecran. Acelai document poate fi prezentat n mai multe moduri. De exemplu, autorul unui document poate asigura prezentarea informaiei, dup caz, cum ar fi:

afiarea pe ecranul unui PC, cu o anumit aranjare n pagin; recepionarea sonor printr-un software specializat (sintetizator vocal),
conectarea la Web se face printr-un telefon mobil; tiprirea pe hrtie, cu o grafic de nalt calitate;

nregistrarea documentului ntr-o baz de date. Presupunem c primete

o comand n format XML. O aplicaie care nelege XML poate utiliza datele pentru a determina ce produse i n ce cantiti au fost comandate;

afiarea ntr-un mod simplificat pe mini-ecranul unui calculator de

buzunar sau telefon mobil; afiarea printr-un terminal Brille. Avantajul acestui concept const n faptul c niciodat nu vor trebiu schimbate datele documentului XML pentru generarea ieirilor la diversele dispozitive. Trebuie s se utilizeze numai concepte software diferite, care pot furniza ieiri ntr-un format particular.

PROGRAMARE HTML, XML Diferena dintre XML i HTML este extensibilitatea XML. Aceasta se face prin extinderea gramaticii XML, prin adugarea de noi TAG-uri, n funcie de necesiti. Limbajul HTML nu poate fi extins de utilizator, posibilitile de mbuntire a acestuia fiind doar prin includerea de scripturi JavaScript, VBScript, etc. Un fiier XML bine formulat se conformeaz unui set de reguli stricte ce guverneaz limbajul XML. Dac fiierul nu nu respecta regulile, XML da mesaj de eroare. Din punct de vedere sintactic, informaia dintr-un document XML se descrie asemntor 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 opional. Exemplu:

Un document XML are o structur logic i una fizic. Din punct de vedere fizic, un document XML este format din entiti. O entitate poate face referire la o alt entitate. Documentul ncepe cu o structur

PROGRAMARE HTML, XML numit rdcin (ROOT) sau entitate document, documentul fiind de fapt un arbore de entiti, ncepnd cu entitatea rdcin. Din punct de vedere logic, structura acestuia este asigurat de marcaje ce permit definirea de elemente, comentarii, declaraii, 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.

PROGRAMARE HTML, XML

Eemplu:
-

<?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 nsoit de un document XSL (eXtensible Stylesheet Language), care este tot un document XML ce conine definiiile necesare pentru prezentarea informaiei (din punct de vedere al afirii), pe Web. Documentul XSL poate s conin cod HTML, stiluri de formatare CSS (Cascading Style Sheets), etc. Dac documentul XML nu este nsoit de fiierul XSL, browserul afieaz direct forma structural a documentului (ca n exemplul anterior).

PROGRAMARE HTML, XML Obiectivele urmrite la proiectarea XML au fost: s fie simplu de utilizat pe Internet; s suporte o mare varietate de aplicaii; s fie compatibil cu SGML; s fie uor de scris programe care s prelucreze documente XML; documentele XML s poat fi concepute rapid, formal i concis, s fie clare i interpretabile de ctre utilizatori; Prin XML se separ datele care reprezint coninutul unui document de cele care se refer la prezentarea acestuia. Cnd se utilizeaz HTML, datele necesare afirii documentului sunt memorate n acelai fiier HTML. Utiliznd XML, datele pot fi stocate n fiiere XML separate de informaia necesar navigatoarelor pentru prezentare. Prin XML datele pot fi schimbate ntre sisteme incompatibile. n prezent sistemele de calcul i bazele de date conin 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 aplicaii. Utilizand XML: informaia din domeniul afacerilor poate fi schimbat prin Internet, astfel vor fi impulsionate tranzaciile B2B (Business To Business); fiierele 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 aplicaii; datele pot fi disponibile pentru toate tipurile de motoare de cutare (ageni) i n acest fel vor ajunge mai uor la clienii interesai de aceste informaii. XML poate fi utilizat pentru generarea de noi limbaje. Exemplu: Wireless Markup Language (WML), utilizat ca suport n aplicaiile 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 tate 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
-

prin care se

prezinta XML-ul, puncte enumerate in continuare, asa cum sunt prezen-

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 dintrun 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 playlisturi 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, <br /> sau <br></br>. Dintre elementele goale in HTML se pot enumera: <area/>, <base>, <basefont/>, <br/>, <hr/>, <img/>, <link/>, etc.

Etichetele goale se inchid astfel:

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, Bucureti, 2002 Tehnologia aplicaiilor Web, Floarea nstase, Pavel Nstase, Editura Economic, Bucureti, 2002 Totul despre HTML 4, Rick Darnel, Editura Teora, Bucureti, 2002 HTML prin EXEMPLE, Teodoru Gugoiu, Editura
Teora, Bucureti, 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(){ if(NS4 || NS6)return window.pageYOffset;

PROGRAMARE HTML, XML

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_hIDs[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'") clearInterval(startfly)}}

PROGRAMARE HTML, XML

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>