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

PROGRAMARE HTML, XML 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 Write – este metoda, aceasta afiseaza un sir de caractere in document.

-

-

PROGRAMARE HTML, XML

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]
Un program în JavaScript este format din: partea principală (main), din secvenţe de tratare a apariţiei anumitor evenimente şi din funcţii.

De fapt.comentariile in JavaScript acceptă şi forma canonică a limbajului C de comentariu /* text pe mai multe rânduri consecutive */ . main este funcţia principală. care poate fi socotită tot o funcţie. Partea principală este alcătuită din instrucţiuni ce apar în cadrul marcajului <SCRIPT> şi care nu intră în corpul unei functii. exemlu: atributul ONCLICK="nume-de-functie()". numai că acum lipseşte void sau int main() { . în sensul că textul explicativ poate fi continuat pe oricâte linii de text ca in exemplul urmator: /* Acesta este un comentariu în JavaScript care poate fi folosit şi pentru programele scrise cu C. Funcţia are un nume care este precedat de cuvântul function. oferind o oarecare relaxare. cărora li se atribuie în mod poziţional valorile reale ale argumentelor din lista de apel.. deci şi de partea principală a programului. ca şi în limbajul C/C++. 9. cum se scria în C/C++. lista parametrilor formali. }. Putem atribui valori şi invers.3 Elementele de bază ale limbajului [70. XML Evenimentele sunt provocate de către mişcarea mouse-lui sau a tastelor.. Este recomandabil a forma aceasta parte principală cât mai redusă posibil. intre o pereche de paranteze rotunde. deci în genere. 84] Variabilele. comentariile şi constantele se declara ca si in C/C++ cu urmatoarele nuantari: -. Dupa nume urmeaza. dinspre funcţie spre secvenţa care a apelat-o. */ .. Funcţiile sunt scurte secvenţe de program ce pot fi apelate de către alte funcţii.PROGRAMARE HTML. Secvenţele de tratare a evenimentelor sunt "trezite" şi puse să răspundă la acţiunile pe care vizitatorul paginii de casă le întreprinde. de către vizitator.

fiecare variabilă are un domeniu al său unde este recunoscută. XML -. sau 'text". Ele pot începe însă cu semnul ″_″ sau cu o literă alfabetică. Este de fapt un formular în care vizitatorul va specifica parametrul razaCerc şi în alt câmp va primi răspunsul. se recurge la caracterul special \ . 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 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. deci se va scrie \".PROGRAMARE HTML. Pentru a include ghilimelele în cadrul textului. adică lungimea sa. Nu se admit mixturi de genul: "text”. Apostroafele sunt admise între ghilimele. Un literal este aşadar scris ca un "grup de cuvinte încadrat de ghilimele terminale". - denumirile variabilelor nu vor fi admise să înceapă cu cifre sau semne speciale.datele scrise între ghilimele se numesc literali. în care apare şi o parte de dialog. Urmează sursa: . şi reciproc. - Deoarece JavaScript este un limbaj în care nu se pot declara (ca în C++/ C) tipurile variabilelor folosite. Literalii pot fi definiţi şi astfel: 'grup de cuvinte încadrat de apostroafe'.

- JavaScript foloseşte si tipul de date logic. Valorile literalilor booleeni sunt: "false" (valoare falsa) şi "true" (adevărată).PROGRAMARE HTML. \r (întoarce carul. - Expresiile şi operatorii sunt ca si in C++ cu urmatoarele nuantari: - se pot efectua atribuiri multiple de forma: v=v1=…=vn=expresie. backspace). tab) şi \" (inserează ghilimele în şirul literal). \n (o linie nouă. \f (avans la linia nouă. În cazul . carriage return). aceasta are o valoare rezultată în urma evaluării. dintre constantele speciale folosite în JavaScript mentionăm: secvenţele care încep cu bara inversă denumite şi secvenţe escape: \b (înapoi un caracter. Atribuirea este un operator care figurează într-o expresie. ….vn sunt variabile in care principiul de executare este evident. Ca orice expresie. când se efectuează un clic pe butonul ″Declanşaţi calculul″. XML După ce a fost precizată valoarea razei cercului. \t (caracterul de tabulare orizontală. line feed). unde v1. în caseta cu denumirea internă LungimeCerc se va anunţa valoarea calculată. new line).

aşa cum rezultă din următorul program amplasat în contextul unui document html: . - operatorii relaţionali sunt operatori binari. într-unul de tip întreg. fireşte. prima. - in JavaScript se poate amâna interpretarea unei expresii. vor începe obligatoriu cu cifra 0. numărul 0123 va fi considerat numărul 123 în baza 8 şi nu în baza 10. Secvenţa de mai jos exemplifică acest lucru: var a = "1000" b = parseInt(a) var a = "Java" b = parseInt(a) var a = "123. - pentru conversii forţate şir . true dacă relaţia este adevărată. valoarea zecimală a lui 0123 va fi 1x82 + 2x 81+ 3 = 64 + 16 = 83. sau false. valoarea rezultată este valoarea atribuită variabilei care este prima din stânga într-un şir de atribuiri. a doua. XML atribuirilor. care întorc o valoare logică. până când vizitatorul va specifica expresia şi apoi va apela la serviciile funcţiei eval() pentru a calcula cât este. Deci.PROGRAMARE HTML. dacă relaţia nu este adevărată. într-unul de tip real.45 //se va solda cu mesaj de eroare //definim literalul 1000 //b va avea valoarea întreagă 1000 - datele octale.> număr se folosesc două funcţii: parseInt() şi parseFloat(). Fiecare va converti un şir într-un număr. adică cele scrise în baza sistemului de numeraţie 8.De fapt.45" b = parseFloat(a) //b va avea valoarea numerică 123. dacă acest lucru este posibil.

XML Instrucţiunile limbajului sintaxă şi semantică . JavaScript sunt cele de la C++ având aceiaşi .PROGRAMARE HTML.

prin reutilizarea codurilor scrise. prin limbajul Smaltalk Programarea orientată pe obiect a coincis cu perioada limbajelor din generatia a patra. altele. apoi treptat trec pe obiecte şi Cobol-ul. Eiffel (un fel de Pascal foarte reuşit). 77] Obiectul are o serie de caracteristici (proprietăţi) si o serie de funcţii. 70. numit clasă. conducând în final la creşterea eficienţei muncii de concepere. primul limbaj orientat pe obiecte pentru mediul de reţea. Object Pascal. XML 9. destul de vechi a apărut prin 1967 la Palo Alto.4 Obiectele limbajului JavaScript [32. trebuie instanţiate. Acest şablon poate fi considerat drept un sertar. în cadrul companiei XEROX. În programarea orientată pe obiect întâlnim o mulţime de limbaje. pe ambele. care. În programarea orientată pe obiect (OOP . altele. un dialect VB folosit în MS Excel) etc. JavaScript este un limbaj "bazat" şi nu "orientat" pe obiecte.PROGRAMARE HTML. FORTRAN-ul alături de COBOL şi PL/l alcătuiau fondul de limbaje foarte populare. unele orientate pe clase. Dacă în perioada limbajelor 3GL. aşa cum este C++ care face parte din generaţia a 4-a (4GL). numai pe obiecte. De pildă. ca şi unele dintre obiectele JavaScript. autobuzul este . şi Basic-ul (Microsoft Visual Basic sau Microsoft VB for Applications. în perioada 4GL întălnim: C++. Există şi obiecte al căror conţinut nu se schimbă numite obiecte statice. altele pentru diverse funcţii folosite în tratarea acestor date.unele pentru păstrarea datelor. Nu putem încheia enumerarea fără Java. Ea a adus cu sine o economie de timp pentru rescrierea codului. Un obiect apare ca urmare a procesului de instanţiere a unui şablon de date. CLOS (Common LISP Object System). în care se găsesc o serie de despărţituri .Object Oriented Programming) aceste funcţii se numesc metode. Mai există şi obiecte create de programator. Conceptul.

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

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

Sintaxa generală pentru folosirea unei anumite proprietăţi a unui obiect este: numeObiect.pot fi cuplate. Pentru obiectul Autoturism definit mai sus putem acum instanţia oricate obiecte de acest tip. altele create de utilizator . Aceste obiecte . între ele sau legate de elementele HTML dând posibilitatea efectuării diverselor calcule matematice sau creării diferitelor resurse: text.Tip=sTip. iViteza. ferestre.număr întreg. 2000) . este un operator cu care se face referire la obiectul curent. dar şi funcţii (metode) ce operează asupra acestor date.PROGRAMARE HTML. Instanţierea obiectelor în JavaScript se face prin operatorul new (întocmai ca în C++). this. Cuvântul rezervat this. In JavaScript un obiect propriu se crează parcurgând două etape: definirea obiectului şi crearea(instanţierea) obiectului. Exemplu.180.} La definirea obiectului se poate atasa.numeProprietate.unele deja existente în JavaScript. viteză.Viteza=iViteza.5 Definirea şi folosirea propriilor obiecte în JavaScript[70] JavaScript dispune de o serie de obiecte ale sale care organizează o serie de date. this. Definim obiectul Autoturism cu funcţia auto() care are 3 parametri: tip. XML 9.AnFab=iAn. an fabricaţie. 2003) AutoturismC=new auto(“Ford”. i . formulare. prin secvenţa: function auto (sTip.şir. 120. cadre etc. 1995) AutoturismB=new auto(“Dacia”. pentru denumiri câte o literă de început care anunţă tipul variabilei: s . iAn) {this. 200. sub următoarea formă: AutoturismA=new auto(“Cielo”.

PROGRAMARE HTML.Viteza this. XML Putem crea oricâte astfel de obiecte. AnFab this. Metodele sunt apelate prin constructia: nume-obiect-tip-Date. iAn) { this.Parcurs = sTip. Parametrul intern al obiectului afectat de această funcţie în sensul creşterii sale este Lungime . în schimb are vreo 20 de metode. = iViteza. . 77. pentru afişarea în cadrul paginii de casă. Instrucţiunile de atribuire de mai sus seamănă cu cele ale unui constructor din C++. Un obiect Date se creează astfel: dataDeAzi = new Date. Adăugăm şi o metodă obiectului Autoturism care calculează numărul de km parcurşi de acesta. Rescriem funcţia auto(). = Parcurs: } Codul metodei Parcurs ar putea fi de forma: function Parcurs(iKm) { this.6 Obiecte specifice limbajului JavaScript [70. şi nu se pot prelucra date anterioare anului 1970. = iAn: = 0. 84] Obiectui Date este destinat manevrării datelor calendaristice dar şi orei.Lungime +i Km..Lungime =this. Operatorul new va aloca resursele (de memorie) necesare pentru întreaga structură de date a obiectului.Tip this. iViteza. Acest obiect nu posedă proprietăţi. ca să anunţăm şi metoda Parcurs ca membră a acestui obiect: function auto(sTip. 9.Lungime this.nume-metoda.

random() Orice proprietate a unui obiect static poate fi accesată prin construcţia: obiect-static. Singura proprietate a acestui obiect este numită length. Metodele obiectului string şi semnificaţiile lor sunt [70]: anchor() big() blink() bold() charAt() fixed() fontsize() indexOf() Va crea un text pe post de ancoră Şirul va fi afişat cu un corp de literă mai mare Şirul căruia i se aplică va pulsa Şirul va apărea cu caractere îngroşate Preia un caracter din şir care fusese adresat prin intermediul unui index Are efectul similar cu al marcajului <TT> Stabileşte mărimea corpului de literă cu care va fi afişat pe ecran şirul respectiv Preia valoarea offset-ului acelui caracter care este . Pentru partea Navigator.random() am atribuit variabilei numarAleator o valoare aleatoare generată cu metoda random a obiectului Math. nl şi n2. Algoritmul ascuns în random asigură generarea unui număr aleator cu distribuţia uniformă în mulţimea [0.PROGRAMARE HTML. Obiectele statice nu trebuie instanţiate. nu numai în pagina curentă. XML Obiectele statice sunt cele care nu se schimba. Math este un astfel de obiect. În contextul LiveWire. un obiect poate fi recunoscut şi în alte pagini de casă. Obiectul string este de asemenea un obiect static si se referă la şiruri de caractere ce pot fi afişate cu diferite caracteristici tipografice. obiectul este recunoscut în pagina curentă de casă. adică lungime. cifre. cum se întâmplă în cazul obiectului Date. în care a existat scenariul cu obiectul respectiv. vom scrie: var numarAleator = n1 + (n2-n1)* Math. Dacă dorim să generăm numere aleatoare între doua limite. Astfel prin: var numarAleator = Math. deoarece el nu se schimbă. semne speciale) pe care le conţine obiectul la un moment dat.1). şi cuprinde numărul caracterelor (litere. proprietate Scopul (adica domeniul unde denumirea unui obiect este recunoscută) unui obiect diferă în funcţie de aplicaţie.

Parametrii ceruţi de această metodă sunt indexA şi indexB. = sClasa: = sScoala. sAdresa. XML italics() lastIndexOf() căutat într-un şir. Similar cu <A HREF…> spre o resursă de tip URL Afişează şirul cu corp mic de literă Afişează şirul barat cu o liniuţă Şirul va fi afişat ca indice inferior Preia un şir parţial dintr-un şir. sScoala.Scoala = iSex. Exemplu.Clasa this. 8=rujeola. ci un nume care ascunde în el ce boli a făcut elevul (1=pojar. Valoarea acelui index va fi conţinută de acest paralink() small() strike() sub() substring() metru Creează o legătură de tip hipertext. iSex. 4=oreion. 16=vărsat de vânt). this.PROGRAMARE HTML. Ultimul parametru nu este un şir de literali. se poate face referire la unul din aceste elemente. boli. adresă.varsta = sNume.nume this. Ambii fixează sup() toLowerCase( ) toUpperCase( ) limitele acelui şir redus Afişează acel şir ca indice superior Converteşte literele alfabetice mari ale unui şir în litere mici 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. vârsta. . şcoală. sex. sBoli this. Funcţia de tip constructor a acestui obiect ar fi definită astfel: function elev(sNume. = iVarsta. = sAdresa. Fie obiectul elev cu următoarele proprietăţi: nume. Ca si in C++ in JavaScript se consideră că indicele porneşte de la 0.sex this. pentru că aceasta ar ocupa foarte mult. 2=scarlatina. Spre deosebire de C/C++ sau Java. iVarsta. plecând de la valoarea fromIndex Similar marcajului <I> Se caută ultima apariţie a unui caracter într-un şir. sClasa. JavaScript nu obligă specificarea tipului datelor. Prin intermediul unui indice. clasă.adresa this.

7 Funcţii proprii JavaScript [70. Şirul poate fi orice expresie în care pot apărea şi denumiri de variabile din acel program. 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. i++) {this(i)=newElev() this(0)(0)=”Ion Bianca” this(0)(1)=”Str. Se foloseşte operatorul this atât pentru a referi obiectul cât şi pentru a accesa diverse proprietăţi ale acestuia. 5” this(1)(2)=19 this(1)(3)=”m” this(0))(4)=”XII” this(0)(5)=”Liceul Basarab”} Putem accesa proprietăţile unui obiect creat sub forma: document. 84] Funcţia eval() are formatul eval(şir). se admit şi denumiri de proprietăţi . 9. 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. i<2. vom crea două obiecte de tip Elev prin secvenţa următoare: for (i=0. Scopul funcţiei eval() este să analizeze corectitudinea sintactică a unui şir. obiectul apărând doar ca o listă de elemente. XML this. Ca să ne referim la una dintre persoane şi. Fiecare proprietate poate fi iniţializată cu valori referitoare la diverşi subiecţi. care au fost analizate deja.PROGRAMARE HTML. 32. la una dintre proprietăţi. în cadrul ei. Lujerului nr.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. Boli = sBoli.

adică cu exponent (exemplu: -12. sau .Latin-1.).234 sau 135. Funcţia escape() are formatul escape (sir) Are rostul de a converti un şir de caractere ASCII în coduri admise de ISO. în afara numerelor cu parte fracţionară (exemplu 10. Î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. De multe ori. dinspre limbajul JavaScript. într-o adresă de tip URL trebuie transmis un caracter de tabulare. • alert(eval(″2″+″5″)). baza-de-numeratie) octal sau hexazecimal. baza-de-numeratie) Se admit. tab (fie un / sau \ etc. XML ale obiectelor. ea va fi trunchiată. ale sistemului zecimal. Funcţia parseInt() are formatul : parselnt(sir.45e-24). afişează 120. Exemple: • • alert(eval(″13+20″)). Dacă aceasta din urmă există totuşi. Este valabilă şi aici observaţia referitoare la codul de eroare. El nu trebuie să aibă parte fractionară. alert(a). Funcţia parseFloat() are formatul parseFloat(sir. a=7. Şirul poate fi format din una sau mai multe instrucţiuni. afişează 25. Funcţia unescape() are formatul unescape (sir) . afişează 33.PROGRAMARE HTML. Nu există altă modalitate decât folosirea acestei funcţii. 5*eval(3*++a).135) şi numere scrise după notaţia stiinţifică. Şirul şir trebuie să fie format doar din cifre. Funcţia nu serveşte doar la analize sintactice ci şi la calcularea valorii expresiilor numerice . Aceasta se întâmplă şi când primul caracter din şir nu este conform contextului.

afişează 18. afişează NaN Funcţia isNaN Returnează true dacă şirul nu poate fi convertit către o valoare numerică şi false în caz contrar.1 Obiectul window Browser-ul afişează informaţiile cu ajutorul ferestrelor.8 Obiectele specifice părţii client [70. Funcţia number are formatul number (sir) Rolul ei este de a converti şirul în valoare numerică. 84] 9.1. alert(isNaN(″23″)). 81. Datorită faptului că acest obiect are nivelul cel mai înalt.8.1 Metode .2 alert(number(″2x″)). 9. Exemple. window are anumite metode şi proprietăţi: 9.2″)).PROGRAMARE HTML.8. Exemple. afişează true. El poate afişa mai multe ferestre simultan. Ca orice obiect. Obiectul window este de nivelul cel mai înalt şi are rolul de a permite lucrul cu ferestrele. Instanţa unui obiect window este o fereastră afişată de browser. returnează false alert(isNaN(″23a″)). În cazul în care şirul nu se poate converti către o valoare numerică. nu mai este necesar să fie folosit window înaintea metodelor sau proprietăţilor obiectului. returnează constanta de eroare NaN (Not a Number). alert(number(″13″)+number(″5. Va converti un şir de caractere ISO-Latin-1 în coduri ASCII. XML Este inversă funcţiei anterioare.

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

metoda close() închide fereastra curentă. Totuşi.PROGRAMARE HTML. . înainte de a închide efectiv ferastra. XML Dacă numele ferestrei nu este precizat. va apărea o casetă de dialog prin care se solicită utilizatorului să confirme dacă vrea să închidă fereastra.

O fereastră activă este vizibilă pe ecran şi recepţionează evenimentele de la mouse (eventual tastatură). dar şi cu ajutorul metodei onblur(). XML 3. dar şi prin metoda focus().1. caz în care poate fi acoperită de suprafaţa altei ferestre. Fiecare element (obiect) conţinut are o anumită proprietate. O fereastră inactivă poate fi aşezată pe bara de task-uri. O fereastră poate fi activată printr-un click asupra ei. Printre elementele (obiectele) care fac parte din vector găsim: HTML. caz în care ea va fi prezentă doar pe bara de task-uri. location. history. 9. Alte proprietăţi importante sunt: document. Ea este un vector al tuturor elementelor care se găsesc pe pagină. STYLE. numită tagName. 4.2 Proprietăţi O proprietate deosebit de utilă este status. printre care: • length – numărul de componente ale vectorului. la rândul lor obiecte. Obiectul document Este de mare complexitate şi conţine mai multe proprietăţi şi metode. SCRIPT. etc. Metoda onblur() are rolul de a dezactiva o ferastră. Printre acestea avem proprietatea de tip obiect all. imagine(IMG). La rândul ei all are mai multe proprietăţi şi metode. frame. Valoarea reţinută de această proprietate va fi afişată pe bara de stare. dar poate fi şi pe ecran. TITLE (chiar dacă nu este trecut tag-ul respectiv).PROGRAMARE HTML. O ferastră poate fi dezactivată dacă se execută click pe suprafaţa altei ferestre. Fiecare element este tratat ca obiect. câte un element pentru fiecare paragraf(P). Metoda focus() are rolul de a activa o ferastră. BODY. . Microsoft numeşte o astfel de proprietate Colecţie. HEAD.8. Acestea sunt. care reţine tipul.

PROGRAMARE HTML. care permite adresarea tuturor elementelor. bgColor – proprietate care reţine culoarea de fond a documentului.com. fgColor – proprietate care reţine culoarea font-urilor. Codul pentru fluturi este free si a fost luat de pe site-ul: www. linkColor – proprietate care reţine culoarea de scriere a legăturilor. Imaginea urmatoare este un exemplu de inserare a unui astfel de script free . anchors – vector ce reţine elementele de tip ancoră (A). images – vector care reţine toate elementele de tip imagine (IMG). Codul sursa al programului care afiseaza rezultatul lungimii cercului peste care alearga cei doi fluturi se gseste in Anexa 3. . XML • metoda tags(tip) – returnează un vector al elementelor de un anumit tip. are proprietatea length. • • • • • • • metoda item(id) – returnează elementul (obiectul) de id dat.dinamicdrive. Fiind vector. • Pe Internet se gasesc numeroase site-uri cu scripturi free. Aceste scripturi pot fi inserate in paginile WEB create de utilizator. metoda write() – se foloseşte pentru scrierea integrală a unui fişier HTML etc.

PROGRAMARE HTML. XML .

PROGRAMARE HTML. fontul. 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. O foaie de stil se creaza cu elementul STYLE. Prin adăugarea foilor de stil. imprimantă sau alte medii. poziţionare. si defineste felul în care va arăta documentul. Foile de stil.) documentelor structurate. Foile de stil trebuie sa fie recunoscute si interpretate de navigatoare. 10. descriu modul în care documentele Web sunt prezentate pe ecran. în particular CSS – Cascading Style Sheets. XML CAPITOLUL X CSS. declararea elementului `STYLE` în cadrul tag-ului `HEAD`.1 Cateva notiuni despre limbajul de prezentare CSS În structura unui document HTML pe langa scripturi apar si foile de stil.].. ca un element de structură al documentului. STYLE şi SCRIPT sunt unice prin faptul că structura depinde de conţinutul lor. XML. culorile. culoare etc. - . 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ă. înfăţişarea şi conţinutul sunt separate. cum ar fi paginile HTML sau aplicaţiile XML. XHTML [200. ………. Ele aduc imbunatatiri paginilor WEB. marginile şi alinierea. inclusiv familia de caractere. sintaxa şi definirea stilului variază în funcţie de designer: foi de stil în cascadă sau foi de stil JavaScript. Formatarea. chenarele.

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

embossed – imprimantă Braille. tv – dispozitive de tip TV. nu există o valoare implicită. terminale. braille – terminal Braile. aural – sintetizator vocal. care poate fi partajat de mai multe documente. atasat direct unui element prin atributul style. print – dispozitivul imprimantă. O foaie de stil externă poate fi scrisă cu orice alt editor de texte. Valoarea implicită este ”screen”. - Este indicat ca regulile de stil să fie memorate într-un fişier extern. specifică libajul foii de stil şi este obligatoriu. media = descriptor media. Se spune ca se lucreaza cu foi de stil definite in fisiere externe.PROGRAMARE HTML.css. screen – ecranul calculatorului. monocrom şi conectarea în reţea se face prin modem la un debit redus. Atributele elementului STYLE sunt: type = tip_conţinut . XML Exemplul foloseste stilul in-line. Numele ales pentru descriptor media corespude dispozitivului pentru care proprietăţile prezentate au sens: - all – corespunde pentru toate dispozitivele. handheld – microcalculator de buzunar: având un ecran mic. Comentariilor in CSS se introduc astfel: /* comentariu CSS */ . tty – dispozitive portabile. nu va include nici un tag HTML şi va fi salvată cu extensia . projection – dispozitive de protecţie pe perete.

permit obţinerea unor funcţii care nu sunt accesibile regulilor normale. . Elementul LINK are trei atribute obligatorii: type cu valoarea ”text/css”.PROGRAMARE HTML. Regulile predefinite. urmat imediat de un identificator. XML Legătura către foaia de stil externă se asigură prin elementul LINK. ale căror nume incep cu cu simbolul `@` (at). care sunt identificate din ansamblul de reguli declarate reguli predefinite. @import – inserează o foaie de stil externă în foaia de stil curentă. 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. Aceste reguli predefinite sunt: - @page – aplică stilurile paginilor documentului.

XML nu inlocuie HTML-ul.2 XML (Extendet Markup Language) XML este un limbaj comun folosit de tehnologiile software pentru transferul de informatii intre diverse aplicatii din Internet. XML ofera suport pentru structurarea informatiilor. @charset – defineşte codul caracterelor utilizat prin foaia de stil. ……………………………………… - 10.PROGRAMARE HTML. @font-face – descrie setul de caractere utilizat prin foaia de stil. HTML este orientat spre modul de afisare a informatiei dupa directivele HTML. XML - @media – regrupează regulile de stil care se vor aplica unuia sau mai multor dispozitive pentru prezentarea documentului. .

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. . vedem cum acesta nu ia in seama etichetele XML si rezultatul va fi: . Etichetele XML identifica tipurile de date.PROGRAMARE HTML. Dacă trecem structura XML într-un fișier HTML și il deschidem cu un browser. datele se referitoare la o eleva și folosind etichetele s-a definit structura de date. In exemplu.

De exemplu. autorul unui document poate asigura prezentarea informaţiei. Presupunem că primeşte o comandă în format XML. conectarea la Web se face printr-un telefon mobil. XML arăta cum datele sunt utilizate Ideea centrală a XML este de a permite celor trei aspecte fundamentale ale unui document: conţinut. XML descrie datele HTML arăta cum datele sunt afişate . • înregistrarea documentului într-o bază de date. • recepţionarea sonoră printr-un software specializat (sintetizator vocal). . XML Observand exemplul anterior putem face o paralela intre cele 2 limbaje: HTML afişeaza date . Un document HTML combină doar prezentarea şi conţinutul. cu o anumită aranjare în pagină. structură şi prezentare să fie separate. Trebuie să se utilizeze numai concepte software diferite.PROGRAMARE HTML. • tipărirea pe hârtie. Avantajul acestui concept constă în faptul că niciodată nu vor trebiu schimbate datele documentului XML pentru generarea ieşirilor la diversele dispozitive. care pot furniza ieşiri într-un format particular. O aplicaţie care înţelege XML poate utiliza datele pentru a determina ce produse şi în ce cantităţi au fost comandate. după caz. • afişarea într-un mod simplificat pe mini-ecranul unui calculator de buzunar sau telefon mobil. cu o grafică de înaltă calitate. cum ar fi: • afişarea pe ecranul unui PC. • afişarea printr-un terminal Brille. XML transporta datele HTML defineste vizual date . 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.

valoarea unui atribut se specifică obligatoriu între ghilimele. Aceasta se face prin extinderea gramaticii XML. XML da mesaj de eroare. singura deosebire fiind că în XML. VBScript. XML Diferenţa dintre XML şi HTML este extensibilitatea XML. Un fișier XML bine formulat se conformează unui set de reguli stricte ce guvernează limbajul XML. un document XML este format din entităţi. Dacă fișierul nu nu respecta regulile. posibilităţile de îmbunătăţire a acestuia fiind doar prin includerea de scripturi JavaScript. în funcţie de necesităţi. Din punct de vedere fizic. etc.PROGRAMARE HTML. Din punct de vedere sintactic. informaţia dintr-un document XML se descrie asemănător cu cea dintr-un document HTML. prin adăugarea de noi TAG-uri. în HTML acest lucru fiind opţional. Limbajul HTML nu poate fi extins de utilizator. O entitate poate face referire la o altă entitate. Documentul începe cu o structură . Exemplu: Un document XML are o structură logică şi una fizică.

structura acestuia este asigurată de marcaje ce permit definirea de elemente. Declaratia tipului de document se pune dupa declaratia 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. Din punct de vedere logic. declaraţii. începând cu entitatea rădăcină. XML numită rădăcină (ROOT) sau entitate document. . etc. comentarii. documentul fiind de fapt un arbore de entităţi. Declaratia XML identifica versiunea specificatiei XML cu care documentul va fi în conformitate (versiunea analizorului care va parcurge documentul XML). înaintea elementului document.PROGRAMARE HTML.

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

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

datele vor fi disponibile mai multor utilizatori deoarece XML este independent de hardware.PROGRAMARE HTML. Utilizand XML: informaţia din domeniul afacerilor poate fi schimbată prin Internet. Prin XML se separă datele care reprezintă conţinutul unui document de cele care se referă la prezentarea acestuia. Când se utilizează HTML. utilizat ca suport în aplicaţiile Internet destinate dispozitivelor mobile miniaturizate scris în XML. independent de platformele software şi hardware. . XML poate fi utilizat pentru generarea de noi limbaje. Prin XML datele pot fi schimbate între sisteme incompatibile. astfel vor fi impulsionate tranzacţiile B2B (Business To Business). XML Obiectivele urmărite la proiectarea XML au fost: să fie simplu de utilizat pe Internet. să fie uşor de scris programe care să prelucreze documente XML. să fie compatibil cu SGML. să fie clare şi interpretabile de către utilizatori. Exemplu: Wireless Markup Language (WML). În prezent sistemele de calcul şi bazele de date conţin date în formate diverse. documentele XML să poată fi concepute rapid. software şi aplicaţii. să suporte o mare varietate de 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. fişierele text pot fi utilizate ca date partajate. datele necesare afişării documentului sunt memorate în acelaşi fişier HTML. datele pot fi stocate în fişiere XML separate de informaţia necesară navigatoarelor pentru prezentare. 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. formal şi concis. Utilizând XML. uneori incompatibile.

XML foloseste taguri pentru a delimita bucati de date. este extensibil. XML Pe site-ul: http://www. XML structureaza datele (informatiile) Prin date structurate intelegem lucruri ca spreadsheets. Astfel. nu inseamna obligatoriu paragraf. nu este un limbaj de programare ajuta calculatorul la generarea . "<p>" intr-un fisier XML. .html se gasesc 10 puncte de la tate pe site . asa cum sunt prezen- este un set de reguli pentru a crea formate text care iti permit sa structurezi datele. lasand interpretarea acestor date cu totul in seama aplicatiei care le citeste. 1. HTML specifica ce inseamna fiecare tag si atribut.PROGRAMARE HTML. si deseori cum va aparea textul marcat cu acestea in browser. XML foloseste : - tag-uri (cuvinte cuprinse in '<' si '>') atribute (de forma nume="valoare"). parametri de configuratie. o persoana (sau un cuvant care nici macar nu incepe cu p).ro/developer/xml-in-10-points. liste de contacte. In functie de context. XML seamana un pic cu HTML Ca si HTML. - - - 2. cititirea datelor. poate fi un pret.ro. independent de platforma si suporta internationalizarea si localizarea. un parametru. tranzactii financiare sau desene tehnice. si structurarea corecta a datelor. XML - prin care se prezinta XML-ul.siteuri. puncte enumerate in continuare. este complet compatibil cu Unicode.

PROGRAMARE HTML. indica o parte dint-un fisier XML. Este bazat pe : XSLT un limbaj de transformare folosit pentru a rearanja. se poate aplica la XML la fel ca la HTML. XPointer este o sintaxa in dezvoltare. aplicatia trebuie sa opreasca citirea si sa raporteze o eroare. Programe de compresie ca zip si gzip pot comprima fisierele foarte bine si foarte rapid. folosita la identificarea unor parti dintrun document XML. 5. 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. http protocolul de baza al web-ului. XML este o familie de tehnologii XML 1. dar in loc sa indice un document web. economisind bandwidth-ul la fel de bine ca formatul binar. adauga sau sterge taguri si atribute. XLINK descrie un mod standard de a adauga hyperlinkuri unui fisier XML. Spatiul pe disk este mai ieftin decat era in trecut. DOM este un set standard de functii pentru manipularea fisierelor XML (si HTML) dintr-un limbaj de programare. XSL este limbjul avansat style sheet. XML este 'vorbaret' prin design Deoarece XML este un format text si foloseste taguri pentru a delimita datele. XML 3. Utilizatorii pot citi fisierul daca au nevoie. protocoale de comunicare. Formatul text face debugging-ul mai usor pentru developeri. "Familia XML" este un set de module (in continua crestere) care ofera servicii folositoare pentru indeplinirea unor lucruri importante si folosite deseori. Un tag uitat sau un atribut fara ghilimele face un fisier XML inutilizabil. fisierele XML sunt aproape intotdeuna mai mari decat formatele binare. XML este text. pot comprima datele din mers. 4. ex. In plus.0 este specificatia care defineste ce sunt tagurile si atributele. . CSS limbajul style sheet. Daca apare o greseala. Un XPointer este asemanator cu un URL.

PROGRAMARE HTML. dar nu chiar atat de nou Dezvoltarea XML a inceput in 1996 si XML a devenit o recomandare W3C din Februarie 1998. Deoarece cele doua formate pot folosi elemente sau atribute cu acelasi nume. XML este modular XML iti permite sa definesti un nou format de document combinand si refolosind alte formate. Aceasta modularizare la nivelul definirii unui document XML face posibila combinarea a doua scheme pentru a forma o a treia. totodata. Alte module si utilitati sunt inca in dezvoltare. care defineste un document combinat (combinatie de documente definite de cele doua scheme initiale). si nu "pret". Pentru a elimina confuzia. sau "persoana" din celalalt format?). 7. . dar nu a "<r>"). in formatul creat de ei. Un format bazat pe XML mosteneste sintaxa XML si o constrange in mai multe feluri (spre exemplu. XML are un mecanism numit namespce (domenii pentru nume). se adauga inteles sintaxei (XHTML spune ca "<p>" inseamna "paragraph". XML Schema este conceputa cu acest suport pentru modularizare. 8. 6. XML XML Schemas 1 si 2 ajuta developerii sa defineasca precis structura fisierelor XML. XSL si RDFsunt exemple de formate bazate pe XML care folosesc namespace-uri. "persoana" sau altceva). XML e nou. Sintaxa a fost schimbata un pic pentru a corespunde regulilor XML. trebuie sa ai grija la combinarea lor (inseamna "<p>" "paragraf" dintr-un format. XHTML permite folosirea "<p>". XML tranforma HTML in XHTML Exista o importanta aplicatie XML care are format de document: XHTML. XHTML are multe din elementele HTML-ului.

La fel cum oamenii au nevoie de o conventie care sa stabileasca intelesurile cuvintelor cu care comunica. Descrierile formale dintr-o anumita categorie (cumparare sau productie. Desi XML nu este intotdeauna cea mai buna solutie. XML este baza RDF-ului si Web-ului Semantic Resource Description Framework RDF. Cum HTML a integrat documente. Comunitatea mare de persoane care folosesc XML inseamna ca nu depinzi de un sigur producator. este suportat bine si nu are nevoie de licenta Alegand XML pentru un proiect. este un format XML text care suporta descrierea resurselor si aplicatiilor meta-date. 10. se merita cel putin sa il consideri printre optiuni. anuntandu-i ca fotografiile lor sunt pe web (on-line). sunt parte a activitatii pentru Web-ul Semantic. al W3C. RDF este o unealta care permite o integrare mai profunda. spre exemplu) sunt numite ontologii si sunt o parte necesara a web-ului semantic. RDF iti poate permite sa identifici oameni intr-un album foto (pentru web) folosind informatii dintr-o lista de contacte. nu trebuie sa platesti nimic nimanui. XML functioneaza pe orice platforma. colectii foto si bibliografii. XML 9. RDF. si calculatoarele au nevoie de acelasi lucru pentru a comunica eficient. ontologiile si reprezentarea intelesului pentru a permite calculatoarelor sa ajute munca oamenilor. Nu trebuie licenta pentru a folosi XML. sisteme de meniuri si formulare. pentru a transforma web-ul un pic mai mult intr-un web semantic. cum ar fi playlisturi pentru muzica. Spre exemplu. apoi clientul tau mail ar putea trimite automat un mail acestor persoane. . vei putea folosi un numar mare de aplicatii (este posibil ca una dintre ele sa poata face deja ce ai tu nevoie). imagini.PROGRAMARE HTML.

Dintre elementele goale in HTML se pot enumera: <area/>.. <link/>.. asemanator cu HTML-ul si avand la baza tehnologia XML.. <br/>.w3. • Etichetele goale se inchid astfel: • Elementul deschis primul se inchide ultimul. Structura unui pagini XHTML Primele 2 linii contin declartia DOCTYPE si eticheta html: <!DOCTYPE html PUBLIC . > <html xmlns="http://www. <base>.... Spunem ca elementele se inchid in ordine inversa deschiderii.. XHTML e case-sensitive • • Atributele SE PUN INTRE GHILIMELE Etichetele SE INCHID.. <basefont/>.. XML 10. <img/>... ....org/1999/xhtml"> <head> ……………… </head> <body> …………………… </body> </html> . <hr/>.3 Cteva reguli de trecere de la HTML la XHTML (eXtensible HyperText Markup Language) XHTML este un limbaj utilizat la crearea paginilor Web.PROGRAMARE HTML.. elementul deschis al doilea se inchide penultimul. In XHTML trebuie respectate o serie de reguli: • La scrierea tag-urilor se folosesc literele mici. <br /> sau <br></br>..... etc....

Teodoru Gugoiu. Rick Darnel. Bucureşti. astfel incat browserul si validatoarele sa-l poata interpreta correct.siteuri. Editura Teora. Editura Sybex. 2002 • Totul despre HTML 4. Pavel Năstase. Editura Infomega. Bucureşti. Grupul BDASEIG. Fundamente teoretice şi practice.in XHTML are atributul xmlns (XML NameSpace). Bucureşti.ucv.w3.PROGRAMARE HTML.ro. XML Declaratia DOCTYPE – este o eticheta HTML. cu valoarea adresa URL unde sunt prezentate specificatiile W3C. <html xmlns="http://www.html • Baze de date. Donna L. nu trebuie inchisa cu simbolul / . 2002 • Tehnologia aplicaţiilor Web. 2003 • HTML Complete. Floarea năstase.ro/developer/xml-in-10-points. Editura Economică.org/1999/xhtml"> Declaratia DOCTYPE si eticheta html specifica tipul documentului. 2002 • HTML prin EXEMPLE. Eticheta HTML . BIBIOGRAFIE 200. Bucureşti. Editura Teora. 2003 http://inf. Baker.ro/~mihaiug/courses/xml/ValidareaDocumentelorXML.pdf . http://www.

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

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

}} </script> <SCRIPT> //lungimea cercului este calculata cu formula obisnuita 2*Pi*r function calcul(obiect){ obiect. value=3.14*obiect.onload=init.razaCerc.onresize=function(){ wind_w=getwindowwidth().LungimeCerc.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.PROGRAMARE HTML. window. wind_h=getwindowheight(). XML if (NS4||NS6||IE4){ window.form)"> </FORM> </BODY> </HTML> .