Îndrumător științific: Absolvent: LECT. UNIV. DR. CRUCERU COSTINEL CLAUDIU -IONUȚ POPÎRLAN CRAIOVA 2019 UNIVERSITATEA DIN CRAIOVA FACULTATEA DE… [607606]

UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE ȘTIINȚE
SPECIALIZAREA INFORMATICĂ

LUCRARE DE LICENȚĂ

Îndrumător științific: Absolvent: [anonimizat]. UNIV. DR. CRUCERU COSTINEL
CLAUDIU -IONUȚ POPÎRLAN

CRAIOVA
2019

UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE ȘTIINȚE
SPECIALIZAREA INFORMATICĂ

INSTALAREA, CONFIGURAREA ȘI
UTILIZAREA SERVERULUI DE
APLICAȚII TOMCAT

Îndrumător științific: Absolvent: [anonimizat]. UNIV. DR. CRUCERU COSTINEL
CLAUDIU -IONUȚ POPÎRLAN

CRAIOVA
2019

3
CUPRINS

INTRODUCERE ………………………….. ………………………….. ………………………….. ……………………… 4
CAPITOLUL 1 ………………………….. ………………………….. ………………………….. ………………………… 5
Tehnologii utilizate ………………………….. ………………………….. ………………………….. ……………….. 5

4
INTRODUCERE

Pe măsură ce omenirea a început să realizeze eficacitatea și importanța transferului cât mai
rapid a datelor prin ceea ce astăzi este cunoscut sub numele de Internet , dezvoltatorii de produse
hardware și software au încercat să găsească soluții cât mai bun e în ceea ce privește păstrarea și
transmiterea acestor date către numărul tot mai mare de utilizatori. Serverul este cel care se ocupă
de stocarea și partajarea informațiilor.
Numărul crescând de utilizatori ai Internetului (care a ajuns la 56.8% din tota lul populației
planetei1) a dus la o cerere imensă de conținut web, precum fișiere text, imagini, videoclipuri. Ca
urmare, server ele web (web servers), fiind cele ce primesc și prelucrează cererile simultane venite
de la utilizatori (numiți clienți ), au trebuit să se adapteze, de -a lungul anilor, la traficul tot mai
mare de utilizatori dar și la diferitele tipuri de servicii (transfer de fișiere de date, poșta electronica
e-mail, chat , etc). Un astfel de server web este Apache Tomcat (sau, mai simplu, Tomcat), care
permite executarea programelor Java de tip Java Servlets si Java Server Pages (JSP).
Prezenta lucrare, fiind una științifică, dorește să cuprindă, destul de detaliat, aspecte
teoretice și practice ale modului de instalare, configurare și utilizare a serverului de aplicații
Tomcat.
Lucrarea este structurată in 5 capitole, fiecare capitol av ând, la rândul lui, mai multe
subcapitole.
Capitolul 1 – Tehnologii utiliza te reprezintă o scurta descriere a principalelor noțiuni
legate de Internet. Sunt explicate…
Capitolul 2 – Instalare și configurare Tomcat prezintă detaliat modul în care putem
instala Tomcat pe sistemul de operare Windows, precum și setările necesare pentru funcționarea
corectă a serverului.
Capitolul 3 – Aplicație WEB utilizând Tomcat
Capitolul 4 – Concluzii

1 Conform https://www.internetworldstats.com

5
CAPITOLUL 1

Tehnologii utilizate

Apache Tomcat(sau Tomcat Server) este un server HTTP care permite executarea
programelor Java de tip “Java Servlets” și “Java Server Pages (JSP)”. Tomcat este un proiect de
tip open -source, gratis, dezvoltat de “Apache Software Foundation”. Website -ul ofic ial Tomcat
este http://tomcat.apache.org .
Diferite versiuni ale Tomcat, lansate de -a lungul timpului:
1. Tomcat 3.x (1999): implementa Servlet 2.2 și JSP 1.1
2. Tomcat 4.x (2001): implementa Servlet 2.3 și JSP 1.2
3. Tomcat 5.x (2002): implementa Servlet 2.4 și JSP 2.0
4. Tomcat 6.x (2006): implementa Servlet 2.5 și JSP 2.1
5. Tomcat 7.x (2010): implementa Servlet 3.0, JSP 2.2 și EL 2.2
6. Tomcat 8.x (2013): implementa Servlet 3.1, JSP 2.3, EL 3.0 și WebSocket 1.0
7. Tomcat 8.5 (2013): pe l ângă tehnologiile folosite de versiunea 8, oferea suport și pentru
HTTP/2, OpenSSL, TLS și Jaspic 1.1
8. Tomcat 9.x (2018): implementează Servlet 4.0, JSP 2.3, EL 3.0, WebSocket 1.0, JASPIC
1.1.
Aplicațiile Web dezvoltate folosind serverul web Tomcat trebuie s ă fie scrise folosind
versiunea 7 a limbajului de programare Java.
Documentele JSP (JavaServer Pages) / JSF (JavaServer Faces) sunt c onvertite automat în clase
Java Servlets, atunci când aplicația web care le conține este încărcat ă in contextul serverului.
Fiind un server HTTP (Hypertext Transfer Protocol), Apache Tomcat operează conform
modelului cerere -răspuns . O cerere este transmis ă în momentul în care clientul(browser -ul) solicit ă
o pagin ă Internet disponibila în contextul serverului. Pe baza execuției clasei Java Servlet
corespunzătoare , se generează un răspuns ce const ă într-un document HTML (Hypertext Markup
Language).

6

Arhitectura Tomcat

În arhitectura Apache Tomcat , structura unui serviciu include un motor, o gazdă si un
context. Nivelul cel mai de sus este reprezentat de container (server), iar nivelul cel mai de jos este
reprezentat de context.
Un serviciu asocia ză unul sau mai mulți conectori la motorul serverului. Motorul serverului
Apache Tomcat poate rula pe mai multe mașini (virtuale), redirecționând cererile către cea care
este identificată prin adresa IP și portul specificate în antetele HTTP.
Implicit, mot orul folosit de Apache Tomcat este Catalina, pentru care se asociază doi conectori:
HTTP și AJP.
• conectorul HTTP/1.1 gestionează comunicația dintre client și server folosind protocolul
HTTP (pe portul 8080);

7
• conectorul AJP/1.3 (Apache JServ Protocol) funcționează pe portul 8009 și gestionează
comunicația dintre serverul Tomcat și serverul HTTP Apache;
Un motor poate conține una sau mai multe gazde.
La rândul ei, o gazdă poate avea mai multe contexte.
În mod implicit, Apache Tomcat definește o gazdă localhost și un director de bază webapps unde
vor fi dezvoltate toate aplicațiile .

Structura ierarhiei de directoare

Serverul Apache Tomcat conține următoarele directoare:
• bin – fișiere binare și script -uri apelate la pornirea / oprirea serverului Apache Tomcat;
• conf – include câte un director pentru fiecare motor ce conține subdirectoare pentru toate
gazdele gestionate de acesta și fișiere de configurare care se aplică tuturor aplicațiilor :
o fișierul catalina.policy conține politicile de securitate aplicabile;
o fișierele catalina.properties și logging.properties specifică diferite proprietăți;

8
o fișierele server.xml, web.xml, context.xml și tomcat -users.xml conțin configurări ale
serverului, aplicațiilor, contextului și utilizatorilor care pot accesa diferite
funcționalități.
• lib – conține bibliotecile comune (pe care le vor folosi toate aplicațiile ):
o servlet -api.jar pentru aplicații ce folosesc Java Servlets;
o jasper.jar / jasper -el.jar pentru Java Server Pages Expression Language;
• logs – conține jurnalele specifice motorului Catalina, ale gazdelor pe care le gestionează,
ale aplicațiilor manager / host -manager și jurnalul de ac ces.
• temp – diferite resurse temporare.
• webapps – locația la care vor fi plasate aplicațiile care vor putea fi accesate folosind
serverul Apache Tomcat;
• work – director de lucru care va conține clasele Java Servlet corespunzătoare documentelor
Java Server Faces / Java Server Pages; organizarea sa se face pe motor, gazde configurate
în cadrul motorului, aplicații;

1.1. Generalități HTML
1.1.1. Crearea HTML -ului
În momentul în care Tim -Berners Lee, considerat creatorul World Wide Web, a avut de
ales un mod de implementare a conceptelor sale, varianta aleasă a fost reprezentată de SGML
(Standard Generalized Markup Language) .
SGML -ul reprezintă un standard recunoscut la nivel internațional, specific procesării
informației sub formă de text, ideal pentru țelul pe care Tim -Berners Lee dorea să -l atingă , acela
de a face Web -ul independent de orice sistem de operare sau limbaj individual. Documentele de
tip SGML au două elemente de bază – conținutul și informația despre conținut.
Un exemplu concret de care exprimă funcționalitatea SGML este următorul: u n om de
știința creează conținutul , marcajul SGML poate fi adăugat mai târziu iar documentul rezultat
poate fi făcut disponibil prin rețea oricui are acces la aceasta.
SGML reprezintă o platformă independentă, având nevoie doar de un calculator și
software -ul adecvat, efectuând astfel analiza pentru ca datele sa aibă un înțeles. Programul care
analiza documentele a fost oarecum personalizat, pentru ca fiecare utilizator să profite de mașina
folosit ă la momentul curent. Programul de parcurgere afișa textul de marcaj în funcție de platformă
– un HEADING 1 era diferit de HEADING 2, iar EMPHASIS se distingea de STRONG.

9
Înainte de apariția HTML -ului, s -a considerat că modul în care un document apare pe
monitorul cuiva ținea de domeniul utilizatorului și nu al autorului. La început, cei care scriau cod
HTML nu puteau preciza trăsături grafice precum numele fontului folosit sau mărimea acestuia.

1.1.2. Evoluția HTML -ului
Se dorea ca HTML -ul să fie un limb aj de marcare a textului simplu si ușor de înțeles pentru
utilizatorii neexperimentați. Această simplitate venea din faptul că HTML folosea un set limitat
de etichete, spre deosebire de fișiere precum AppleScript sau HyperTalk. Ea a avut de suferit prin
introducerea atributelor pentru interfețe grafice.

Nivelul 0 HTML
Deoarece SGML -ul are abilitatea de a defini alte limbaje, Berners -Lee a folosit această
capabilitate pentru a descrie HTML -ul ca o definiție a tipului de document (DTD), baza structurii
docu mentelor de pe World Wide Web.
La prima sa implementare, HTML -ul a urmat regulile SGML -ului de marcaj al conținutul
independent de platform a pe care rula, fără prevederi de reprezentare a documentului în HTML –
ul însuși . Utilizatorii trebuiau să ofere for matarea prin combinația lor browser -platformă(clientul),
clientul nefiind cunoscut la momentul când se crea documentul.
HTML -ul se afla la Nivelul 0 în anul 1990 – prima sa implementare. La momentul acela ,
mijloacele de comunicare de pe Internet erau urmă toarele: e-mail, FTP (protocolul de transport al
fișierelor ) si Telnet, toate acestea folosin d TCP/IP (transmission control protocol/Internet protocol
– protocol de control al transmisiei /protocol Internet). Ca o alternativă la protocolul Gopher, Tim
Berne rs-Lee și asociații săi au introdus ideea de protocol HTTP și adrese URL ca mod de furnizare
a adreselor și a mijloacelor de localizare a datelor de către toți cei care doreau acces la documente
HTML.
Încă de l a Nivelul 0, HTML -ul oferea mijloace independente de platform ă pentru marcarea
datelor p entru interschimb. Ideea de bază era aceea că serverele stocau și să furniz au datele, iar
clienții le preluau și le afișau pe mașina proprie . Astfel , nodurile HTML puteau să ofere acces nu
doar spre alte n oduri HTML, ci și către alte spații Gopher, FTP, etc. HTML 0 era foarte asemănător
cu SGML. TITLE era singurul element cerut , multe pagini mai vechi începând cu un titlu , apoi
intrând direct în corpul textului. Nu există elementele HTML, HEAD sau BODY . Eticheta (tag –
ul) <P> era uneori folosita pentru a desparți paragrafele între ele. Existau șase niveluri de antet,
dar se aștepta ca fiecare nivel sa fie folosit o singură dată i ar nivelurile să fie utilizate consecutiv .

10
De exemplu, Nivelul 1 permitea o etichetă de tip <BODY> iar autor ul putea include adrese,
ancore, ghilimele, întreruperi de linie, anteturi, imagini, liste, paragrafe și text preformatat.

Nivelul 1 HTML
HTML 1.0 a fost prima versiune de HTML lansată pe Internet, în anul 1992. Această
versiune a adus îmbunătățiri versiunii 0.0 . A fost introdusă ideea de container HTML, care avea
un element HEAD separat de elementul BODY. O alta caracteristică era eticheta de deschidere și
închidere a unor elemente. Pe lângă TITLE, ele mentul HEAD putea incorpora atribute precum
ISINDEX, LINK ceea ce dădea documentului HTML un context mai larg. Era posibilă și
introducerea în interiorul textului a fișierelor GIF cu ajutorul elementului IMAGE, asta dacă
browser -ul suporta acest format.
Cea mai importantă caracteristică a HTML 1.0 a fost introducerea formularelor, ce făceau
posibil feedback -ul de la utilizatori, realizând o mai mare interacțiune între autori și aceștia.
Formularele au făcut posibilă scriptarea CGI (Common Gateway Interface ), deschizând drumul
spre site -uri web dinamice. Printre elementele importante adăugate de versiunea HTML 1.0 sunt:
STRONG (subliniere puternică), B (bold), I (italic) sau TT (monospațiat).
În timp ce nivelul 1 era subiect de discuție , erau propuse eleme nte și capacit ăți noi pentru
versiunea HTML+, care se pregătea sa intre in scenă.

HTML+ și progresul graficii
HTML+ a reprezentat un pas important în evoluția HTML -ului, deoarece a făcut posibilă
încorporarea elementelor grafice și de afișare în HTML , fiind incluse elemente și atribute pentru
superscripturi sau subscripturi, note de subsol, margini, text inserat sau șters, alinierea
conținutului, anexe, tabele, formule matematice, figuri etc.
Chiar și cu introducerea elementelor ce permiteau formatarea vizuală și controlul,
analizatorii (parsers) HTML permiteau folosirea altora marcaje de tip SGML într -un document
HTML. Pentru a se asigura detectarea și interpretarea corectă a documentelor HTML de către
browser, a fost introdus identificatorul <!DOCTYPE> , care precedă orice alt element din
document, inclusiv eticheta <HTML> .

HTML 2
Consorțiul nou format World Wide Web (W3C) a introdus versiunea HTML 2 în anul
1995. Acest nivel a adus îmbunătățiri elementului FORM, care folosea INPUT, SELECT,

11
OPTION și TEXTAREA. Elementul BR permitea întreruperi de linie. HTML 2 introducea și
elementu l META pentru descrierea amănunțită a documentului și o metodă de indexare și
catalogare a conținutului.
Deși nu a adus îmbunătățiri semnificative capacităților HTML, nivelul HTML 2 a făcut ca
HTML -ul sa devină un standard care să servească drept etalon f ață de care puteau fi comparate
browserele și marcajul.

HTML 3
Deoarece HTML era din ce în ce mai popular, oamenii dorind să sporească aspectul site –
urilor lor, HTML 3 a fost propus ca un limbaj de marcare capabil să funcționeze pe orice platformă
și car e să fie acceptat de alte companii de software, pe lângă Netscape, companie care își
dezvoltase propriu browser și noi elemente marcare, numite Netscape extension tags . HTML 3 a
fost dezvoltat sub administrația lui Dave Ragget, care luase de asemenea parte și la dezvoltarea
HTML+ și HTML 2.
Unul din elementele propuse pentru HTML era reprezentat de elementul FIG (înlocuit în
versiunile ulterioare cu FIGURE), care suporta “curgerea ” textului în jurul figurilor. A mai fost
propus suportul pentru ecuații matematice, precum și elementul TABLE, care oferea suport pentru
aranjarea datelor în formă de tabel. A fost adăugat atributul ALIGN pentru elemente precum IMG,
P sau HR, permițând astfel alinierea la centru, dreapta sau stânga.
HTML 3 acorda de a semenea o importanță mai mare foilor de stil (CSS – Cascading Style
Sheets). Foile de stil permiteau autorilor sa incorporeze designul grafic pe Web, păstrând totuși
puritatea unui limbaj tip SGML, elementele orientate către afișaj fiind plasate într -un do cument
diferit de cel HTML.
Deși HTML 2 a reprezentat un standard pentru limbajele de marcare a textului, HTML 3 a
eșuat în a se impune, astfel că browserele avansate, precum Internet Explorer de la Microsoft sau
Netscape Navigator nu erau limitate la sta ndardul curent sau cel propus.

HTML 3.2
Deoarece HTML 3 era considerat prea ambițios, a fost proiectat HTML 3.2, care încorpora
mai multe etichete deja folosite pe Web. HTML 3.2 adăuga etichetele SCRIPT și STYLE, care
permiteau inserarea limbajelor de s criptare și a foilor de stil în documentele HTML.
Aceste adăugări au dus la sporirea dinamismului și atractivității paginilor Web, deoarece
puteau fi introduse în acestea animații, culori sau sunet.
HTML 3.2 a reprezentat un standard pe Web, fiind un DTD recunoscut oficial.

12
HTML 4
HTML 4.0 a fost propus în decembrie 1997 și a devenit standard oficial în aprilie 1998.
Această versiune a încorporat unele idei și schimbări propuse în versiunea HTML 3, dar care au
fost abandonate la apariția HTML 3.2. Era p ropusă o separare mai intensă a stilurilor fizice de
marcarea textului, prin utilizarea foilor de stil (CSS). Soluția foilor de stil era văzută ca o metodă
eficientă prin care HTML -ul se apropia tot mai mult de compatibilitatea SGML, care era un limbaj
independent de platformă, permițând totodată schimbarea aspectului documentului.
HTML 4 introduce elemente precum FRAME sau OBJECT , care beneficia de flexibilitate
pentru a servi și în alte roluri în viitor. HTML 4 a reprezentat un nou standard, una dintre n oile
propuneri ale W3C pentru Web fiind lucrul cu interfețe către alte standarde. Elementele STYLE,
DIV și SPAN permit încorporarea foilor de stil, dar foaia reală de stil este un document separat.

HTML 5
HTML 5 reprezintă ultima versiune HTML. Ideea din spatele HTML 5 este aceea că
limbajul nu este unul unitar, ci mai degrabă un limbaj creat din mai multe parți ce merg împreună
pentru a crea ceva nou și avansat. Este construit pe versiunea de succes HTML 4 . Această idee se
bazează pe faptul că programatorul actual nu trebuie sa arunce la coș etichetele existente, ci acesta
poate să construiască peste acestea și să folosească alte etichete îmbunătățite. De exemplu, formele
au fost îmbunătățite așa că s -a aju ns și la câmpuri specifice pentru email, dar cel mai mare progres
s-a realizat în securizarea formei.
Ce este nou:
– orice document HTML 5 are nevoie de un doctype pentru a anunța browserul că pagina trebuie
să fie vizualizată într -un anumit mod. Vestea b ună e că declarația doctype a fost simplificată , în
comparație cu cea veche, acum fiind doar <!DOCTYPE html> .
– suportul pentru aplicații media. Se pot adăuga fișiere video sau audio fără ajutorul plugin -urilor.
– cu ajutorul etichetei <canvas> se pot cr ea cu ușurință imagini 2D.
– atributul Application Cache ajută la folosirea maxim ă și rapidă a unui website chiar și când nu
ești online.
HTML5 a venit ca un răspuns la ideea că HTML și XHTML , utilizate în comun pe World
Wide Web sunt un amalgam de caracteristici introduse de specificații diferite . La această idee se
adaugă și caracteristicile diferite aduse de software, de browsere, și multe erori de sintaxă în
documentele web existente. Astfel, HTML5 devine o încercare de a defini un singur limbaj de
marcare care poate fi scris în oricare dintre sintaxele HTML sau/și XHTML . Acesta include
modele detaliate de prelucrare pentru a încuraja mai multe implementări interoperabile; extinde,

13
îmbunătățește și raționalizează disponibilitățile pentru documentele web și introduce marcarea și
aplicații API ( application programming inter faces) pentru aplicații web complexe . Din aceste
motive, HTML5 este un posibil candidat pentru aplicațiile de platforme mobile. Multe
caracteristici ale HTML5 au fost create din considerarea că va trebui să devină capabil să ruleze
pe dispozitive cum ar fi smart -phonurile sau tabletele.2

1.1.3. Structura unui document HTML
Un document HTML are trei niveluri de bază. Primul este structura documentului, unde
documentul este împărțit în secțiuni mari în funcție de scopul lor, cum ar fi antet, corp și script.
Al doilea este divizarea în cadrul secțiunilor mari. Acest nivel se aplică în primul rând
antetulului (HEAD) și corpului (BODY), deoarece fiecare are propriul grup de conținut, antetul
putând conține titluri, metadata, iar corpul diviziuni, paragrafe, fo rmulare sau titluri de secțiuni.
Al treilea nivel există în special în corp. Reprezintă infrastructura elementelor și a copiilor
lor, cum ar fi liste sau liste de obiecte, formulare sau elemente de formular și tabele cu rânduri și
celule de date.

Structu ra unui document
Orice document HTML, are, încă de când este creat , două părți principale: un antet
(HEAD) și un corp (BODY) . Chiar dacă nu sunt special delimitate sau precizate , HTML presupune
existența lor. Se pot adăuga, în plus, și alte componente funcționale paginii, precum foi de stil
(CSS), scripturi etc.
Etichetele <!DOCTYPE> și <HTML> se află în afara structurii documentului, dar ele ajută
la definirea acestuia. Prima precizează versiunea HTML utilizată pentru pagina respectivă prec um
și regulile pe care aceasta le respectă. A doua etichetă identifică un limbaj global și direcția textului
documentului, pe lângă marcarea începutului și sfârșitului conținutului HTML. Cu aceste două
etichete se poate crea un document HTML cu următoarele linii:

<!DOCTYPE html>
<HTML>
</HTML>

2 https://ro.wikipedia.org/wiki/HTML5

14
Chiar dacă nu va afișa nimic, un browser care se conformează standardelor HTML îl va
afișa ca pe un document scris sub forma:

<!DOCTYPE html>
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

Cum am precizat anterior , fiecare document HTML se presupune că are un antet și un corp,
chiar dacă nu sunt delimitate explicit.
Elementul HEAD include o gamă de informații pentru browser, inclusiv titlul
document ului, cuvinte cheie, informații de legătură și alte inform ații cu care utilizatorul nu trebuie
să lucreze direct sau pe care nu le poate vedea .
BODY este ceea ce se afișează în browserul utilizatorul ui în momentul în care acesta
deschide un document HTML . Include text și obiecte, cum ar fi imagini și miniaplicații , împreună
cu etichete de marcare pentru a defini structura lor și, de asemenea, relația dintre ele.
Mai există alte două componente opționale în structura unui document HTML: foile de stil
(CSS) și scripturile. Aceste elemente trebuie definite explicit sau browserul nu le va recunoaște
automat .
O foaie de stil, creată cu elementul STYLE oferă o modalitate de defini re a felului în care
va arăta documentul, inclusiv familia de caractere și fontul, culorile, chena rele, marginile și
alinierea. În trecut, aceste setări se făceau adăugând etichete direct în corp. Prin adăugarea foilor
de stil ca un element de structură al documentului, înfățișarea și conținutul sunt separate pentru a
da browserelor posibilitatea unui control mai precis.
Elementul SCRIPT încadrează o secțiune de cod de programare inclusă direct în pagina
de Web. Acest element oferă utilizatorului o modalitate de a interacționa direct cu un document ,
fără a se baza pe ajutorul unui server Web. Un docume nt poate include mai multe scripturi în mai
multe limbaje. Cel mai folosit limbaj de scriptare este JavaScript . Alte opțiuni mai pot fi Python
sau Perl.

15
Structura unei secțiuni
Fiecare element major din HTML are propria sa structură și necesități , reflectate în scopul
definit pentru elementul respectiv. Elementele STYLE si SCRIPT , sunt unice prin faptul că
structura depinde de conținutul lor.
În cazul elementului STYLE , formatar ea, sintaxa și definirea stilului variază în funcție de
alegerea autorului: foi de stil în cascadă (CSS) sau foi de stil JavaScript . Pentru SCRIPT se aplică
aceleași excepții , în funcție de ce limbaj de scriptare este folosit. Un script poate conține o funcție,
mai multe funcții sau poate fi o aplicație de sine stătătoare.

Structurile HEAD și BODY
Structurile antetului și corpului unui document HTML au o trăsătură comună: nu au o
ordine prestabilită. Daca în cazul elementelor antetului acestea nu sunt exp use ca o ierarhie, în
cazul corpului se poate crea o ierarhie de părinți și copii.
Antetul conține informații despre document care pot afecta înfățișarea corpului, dar care
nu sunt afișate în mod obligatoriu utilizatorului. Nu există în antet elemente car e să fie mai
importante decât celelalte – TITLE este la fel de important ca și LINK sau META . Ele sunt tratate
în mod diferit doar conform scopului lor.
Pe de altă parte, elementul BODY conține, de obicei, o ierarhie de elemente. Un exemplu
de corp:

<BOD Y>
<H1> Lorem Ipsum </H1>
<P> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac ullamcorper arcu. Morbi
cursus ultricies nunc, non scelerisque tortor mollis a. Nullam fermentum massa libero, sed
euismod neque suscipit ut. Maecenas semper quis mi et venenatis. Curabitur hendrerit commodo
turpis ac tristique. Sed imperdiet tellus a odio tincidunt, ut accumsan est pellentesque. Nunc eget
augue massa .</P>
</BODY>

Corpul include doi copii, un elemente H1 și un element P. Daca ne -am imagina BODY ca pe un
arbore, atunci cele două elemente ar ieși din trunchi în același loc. Putem de asemenea îmbrăca
elementele, după următorul model:

16
<P> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac ullamcorper arcu. Mo rbi
cursus ultricies nunc, non scelerisque tortor mollis a. Nullam fermentum massa <EM> libero
</EM>, sed euismod neque suscipit ut .</P>

Elementul EM este o ramură a elementului P, care este o ramură a lui BODY . Când elementele
sunt îmbrăcate în corpul unui document HTML, între ele se stabilește o ierarhie care va varia
pentru fiecare document în funcție de etichetele folosite de autor.

Infrastructura altor elemente
În corpul unui document HTML, unele elemente au propria lor structură internă pentru a
ajuta definirea folosirii și înfățișării lor. Un exemplu bun pentru acest caz este elementul TABLE .
Un tabel HTML este construit ca având cel puțin un rând și o celulă de date, precum și un
document HTML are nevo ie de cel puțin un antet și un corp:

<TABLE>
<TR>
<TD>Data</TD>
</TR>
</TABLE>

Fiecare tabel poate avea o denumire descriptivă, un antet și conținutul unui corp:

<TABLE>
<CAPTION> Caption </CAPTION>
<THEAD>
<TR>
<TD> Data</TD>
</TR>
</THEAD>
<TFOOT>
<TR>
<TD>Data</TD>
</TR>
</TFOOT>

17
<TBODY>
<TR>
<TD>Data</TD>
</TR>
</TBODY>
</TABLE>

Fiecare tabel devine un mini document cu formă și structură propri i. Mai sunt și alte
elemente asemănătoare cu TABLE în corp, inclusiv diferitele tipuri de liste ( ordonate,
neordonate, definiții ), formulare și seturi de câmpuri.

Liste
Acestea permit ca anumite enunțuri (texte, elemente) să fie numerotate sau marcate într-un
anumit f el. O astfel de organizare poartă numele de liste.
În HTML distingem 3 feluri de liste:
1. Liste ordonate (Ordered Lists) : sunt listele in care elementele sunt numerotate.
Inserarea lor în cadrul documentului HTML se face prin tag -urile <OL> …</OL> ,
elementele (itemii) lor fiind introduse între aceste două tag -uri prin <LI> …</LI> (tag-ul de sfârșit
nefiind obligatoriu). Implicit, numerotarea se face cu numere arabe (1, 2, 3, …). Ea poate fi
modificată prin folosirea atributului type în cadrul tag -ului OL. Acesta poate lua una dintre
valorile:
– a : numerotarea se va face cu litere mici (a, b, c, …)
– A : numerotarea se va face cu litere mari (A, B, C, …)
– i : num erotarea se va face cu numere romane mici (i, ii, iii, iv …)
– I : numerotarea se va face cu numere romane mari (I, II, III. IV, …)
– 1 : (implicit) numerotarea se va face cu numere arabe obișnuite (1, 2, 3, …)

Iată un exemplu de cod:

<HTML>
<HE AD>
<TITLE>Liste</TITLE>
</HEAD>
<BODY>

18
<P>
Iată o lista ordonata implicit ă:
<OL>
<LI>Primul item</LI>
<LI>Al doilea item</LI>
<LI>Al treilea item</LI>
<LI>Al patrulea item</LI>
</OL>
Iată si o alta list ă, cu numere romane
<OL type="i">
<LI>Primul item</LI>
<LI>Al doilea item</LI>
<LI>Al treilea item</LI>
<LI>Al patrulea item</LI>
</OL>
</P>
</BODY>
</HTML>

2. Liste neordonate (Unordered Lists) : sunt liste în care elementele nu sunt numerotate, ci
în drept ul fiec ăruia este afișat un marcator.
Inserarea lor în cadrul documentului HTML se face prin tag -urile
<UL> …</UL> , elementele (itemii) lor fiind introduse între aceste două tag -uri prin <LI> …</LI>
(tag-ul de sfârșit nefiind obligatoriu).
Implicit, marcarea lor se face prin cerculețe pline. Ea poate fi modificată prin folosirea
atributului type în cadrul tag -ului UL. Acesta poate lua una dintre valorile:

– disc: marcarea se face cu cerculețe pline (implicit)
– square : marcarea se face cu pătrățele
– circle : marcarea se face cu cerculețe goale

19
Un exemplu de cod :

Listă neordonata implicit ă:
<UL>
<LI>Primul item</LI>
<LI>Al doilea item</LI>
<LI>Al treilea item</LI>
<LI>Al patrulea item</LI>
</UL>

Listă marcata cu pătrățele:
<UL type="square">
<LI>Primul item</LI>
<LI>Al doilea item</LI>
<LI>Al treilea item</LI>
<LI>Al patrulea item</LI>
</UL>

Și alta, marcat ă cu cerculețe goale :
<UL type="circle">
<LI>Primul item</LI>
<LI>Al doilea item</LI>
<LI>Al treilea item </LI>
<LI>Al patrulea item</LI>
</UL>

3. Liste de definiție (Definition Lists) : au rolul de a descrie o listă de definiții .
Inserarea lor în cadrul documentului HTML se face prin tag -urile <DL> …</DL> .
Elementele lor sunt de două tipuri:
– Termenul care este definit: este introdus între tag -urile <DT> …</DT> (tag-ul
de sfârșit nefiind obligatoriu).
– Definiția propriu -zisă: este introdusă între tag -urile <DD> …</DD> (tag-ul de
sfârșit nefiind obligatoriu).

20
Iată un exemplu de cod :

Iată o lista de definiție :
<DL>
<DT>Leontopodium Alpinum</DT>
<DD>Este numele stiintific al florii de colt. Este o planta ocrotita. Creste la
altitudini mari, in locuri stâncoase </DD>
<DT>Dianthus Callizonus</DT>
<DD>Este numele stiintific al Garofiței Pietrei Craiului. Este o planta
ocrotita. Fiind un endemism, este o planta unica in lume. Practic, ac easta
specie de garofita, in afara de locul sau de origine, si anume
masivul Piatra Craiului din apropierea Brasovulu i, nu se mai întâlnește in nici
un alt loc de pe planeta</DD>
<DT>Aconitum Napellus</DT>
<DD>Este numele stiintific al Omagului. Este o planta otrăvitoare . Totuși , in
cantități foarte mici conține o substanță activa din care este preparat un
medicament contra tusei</DD>
</DL>

Imagini
Tag-ul utilizat pentru inserarea unei imagini în documentul HTML este <IMG> . Forma
generală a acestui element este <IMG atribute> . Acest tag nu are și formă de închidere.
Atributele sale sunt:
• src identifică fișierul efectiv de pe disc, ce conține imag inea respectivă. Dacă
imaginea se află în directorul curent, se specifică doar numele și extensia sa. Dacă se
află într -un subdirector, acesta se specifică înaintea numelui și extensiei imaginii, separat prin
caracterul /. Imaginile recunoscute de majorita tea browserelor internet sunt de tip .jpg, .gif, .png
• align specifică tipul de aliniere al imaginii în raport cu textul în cadrul căruia se află.
Acesta poate lua una dintre valorile următoare:
– right : imaginea se aliniază în dreapta, iar textul car e urmează este scris în locul
rămas liber, în stânga acesteia;
– left : imaginea se aliniază în stânga, iar textul care urmează este scris în locul
rămas liber, în dreapta acesteia;

21
– top : doar latura de sus a imaginii se aliniază cu rândul de text în cadrul căruia se
află; următorul rând de text va fi afișat după imagine, ocupând întreaga lățime a ecranului;
– middle : rândul de text în cadrul căruia se află imaginea se aliniază la jumătatea
înălțimii acesteia; următorul rând de text va fi af ișat după imagine, ocupând întreaga lățime a
ecranului;
– bottom : doar latura de jos a imaginii se aliniază cu rândul de text în cadrul căruia
se află; următorul rând de text va fi afișat după imagine, ocupând întreaga lățime a ecranului;
• Dacă dorim întreruperea unei alinieri de imagine de tip right sau left înainte ca textul să
fi umplut spațiul liber din stânga, respectiv dreapta acesteia, putem folosi tag -ul br, căruia îi
adăugăm unul dintre atributele clear=”left” sau clear=”right” sau clear=”all” , după caz.
• atributul alt=”text” permite specificarea unui text alternativ ce va fi afișat fie dacă
menținem cursorul de mouse asupra imaginii, fie în locul imaginii propriu -zise, în cazul în care
imaginea nu poate fi încărcată din cauza unei probleme d e conexiune.
• atributele height și width permit specificarea altor dimensiuni pentru imagine, decât cele
reale ale acesteia. Evident, dacă dimensiunile nu sunt proporționale cu cele reale, imaginea va fi
deformată. Totodată, dacă specificăm dimensiuni mai mari decât cele reale, imaginea se va vedea
mai puțin clar. În realitate, imaginea este transferată de pe server la dimensiunile sale originale,
redimensionarea având loc doar la nivelul calculatorului pe care este vizualizată pagina.
• atributul border permite stabilirea grosimii unui chenar care va înconjura poza. Implicit,
valoarea acestui atribut este ”0”, ceea ce înseamnă că imaginea nu este
înconjurată de chenar .
• atributele hspace=”nr.pixeli” respectiv vspace=”nr.pixeli” permit stab ilirea
distantei minime care separa imaginea de celelalte obiecte pe verticală , respectiv pe
orizontală .

1.2. Extinderi ale limbajului HTML: HTML dinamic, script -uri
Deși HTML -ul clasic permite redactarea unor documente Hypertext de un nivel foarte înalt
și elaborat, o dată cu evoluția limbajelor de programare vizuale, a început să devină mai puțin
atractiv decât a fost la început.
Din acest motiv, a fost pus la punct ceea ce numim DTHML (Dynamic HTML) – care nu
este un limbaj în sine, ci un termen prin care sunt desemnate tehnicile utilizate pentru a face
paginile web cât mai dinamice și cât mai interactive.

22
Pe lângă HTML -ul propriu -zis, noile unelte recunoscute de browser -ele din ultima
generație sunt CSS (Cascading Style Sheets), JavaScript și DO M (Document Object Model).
Scopul acestei lucrări nu este studiul amănunțit al acestora, de aceea le vom trece doar în
revistă, folosind mici exemple comentate pentru fiecare dintre ele.

1.2.1. CSS (Cascading Style Sheets).
Noțiunea de stil este, pentru un document HTML, asemănătoare cu formatarea
documentului, spre exemplu, pentru un document Word. Exisă o mulțime de atribute prin care se
pot stabili font -urile, caracteristicile de aliniere a textului, forma elementului, culorile de fond și
ale literelo r, marginile, poziția elementelor, etc.
Pentru a putea gestiona cât mai eficient stilurile, a fost pus la dispoziția programatorilor de
pagini web un limbaj prin care se poate realiza acest lucru. Acest limbaj este cunoscut sub numele
de CSS (actualmente, vorbim de versiunea CSS2 ).
Legătura dintre HTML și CSS se realizează prin intermediul tag -ului
<STYLE> …</STYLE> care trebuie așezat între <HEAD> și </HEAD> .
În cadrul tag -ului STYLE vom stabili modul în care dorim să arate elementele paginii.
Fiecare element al HTML -ului pe care l -am studiat este identificat, în cadrul CSS -ului de
tag-ul care îl gestionează. Spre exemplu, identificatorul CSS pentru paragrafe este P, pentru table
este TABLE, pentru imagini este IMG, ș.a.m.d.
Folosind acești identificatori în cadrul unui <STYLE> …</STYLE> , putem face ca toate
elementele de același tip din cadrul unui document să arate la fel. Astfel suntem scutiți de a scrie
o grămadă de cod care s -ar repeta în cazul fiecărui element de acelaș i fel.
De exemplu, dacă dorim ca, în cadrul paginii noastre, absolut toate paragrafele să fie scrise
cu fontul Bodoni MT , caractere de 14, culoare verde , pe fond portocaliu , în loc de a scrie acești
parametri la fiecare paragraf din document, este suficient să definim următorul STYLE :

<HTML><HEAD>
<TITLE>Utilizare STYLE in HEAD</TITLE>
<STYLE>
P {
background:orange;
color:green;
font-family:"Bodoni MT";
font-size:14pt;

23
}
HR {
text-align:left;
width:50%;
height:5px;
color:red;
}
</STYLE>
</HEAD>
<BODY>
<P>Paragraf formatat</P>
<HR>
Text in afara paragrafului
<HR>
<P>Alt paragraf formatat</P>
</BODY>
</HTML>

De remarcat faptul că ambele paragrafe, și de asemenea ambele linii orizontale (HR) din
cadrul lui BODY nu conțin nici un fel de referință de formatare. Cu toate acestea, definirile lui P
și ale lui HR în cadrul lui STYLE au „predefinit” modul în care vor arăta toate paragrafele
respectiv toate liniile orizontale ale documentului.
Sintaxa definiției este de felul următor: Se începe cu identificatorul elementului dorit a fi
formatat (în cazul nostru P – tag-ul pentru paragraf, respectiv HR) între acolade tr ecându -se
specificatorii de format (aceștia țin de limbajul CSS) doriți a fi modificați. În cazul de fată, avem
de-a face cu:
background = culoarea de fundal;
color = culoarea scrisului;
font-familiy = numele font -ului;
font-size = dimensiunea caracterelor ;
text-align = alinierea în cadrul unui text;
width = lățimea;
height = înălțimea.

24
O altă formă de utilizarea a CSS -ului constă în definirea stilurilor cu ajutorul unor
identificatori proprii, care se pot aplica ulterior unui anumit paragraf. În acest caz, în cadrul unui
style putem defini proprii identificatori, precedându -i de caracter ul #.
Aplicarea ulterioară a lor asupra unui element, se face specificând un nou atribut, și anume
id=”identificator” unde identificator este cel propriu, definit în cadrul lui STYLE (cel precedat
de #).
Ex: dacă inserăm în codul de mai sus secvența urmă toare (tot în cadrul lui STYLE , după
definiția lui HR):

#alt_paragraf {
color:blue ;
font-weight:bold;
}
iar înainte de </BODY> mai inserăm următorul paragraf:
<P id="alt_paragraf">P aragraf personalizat</P>
Remarcați faptul că au fost apli cați doar cei doi specificatori de format definiți în noul stil,
și anume culoarea fontului și faptul că scrisul este bold. Celelalte caracteristici au rămas cele
definite tot în STYLE , în cadrul lui P.
În loc de a defini stilurile în cadrul antetului ( HEAD ), așa cum am arătat mai sus, ele pot
fi scrise separat, într -un fișier text cu extensia .css, exact în aceeași manieră în care le -am fi scris
între cele două tag -uri prezentate, <STYLE> …</STYLE> . Includerea efectivă a acestui fișier în
cadrul HTML -ului se face tot în secțiunea <HEAD> , prin intermediul următorului tag:
<LINK rel="stylesheet" type="text/css" href=" style .css">

Iată un exemplu:
Conținutul fișierului css, pe care l -am numit styles .css:
TABLE {
border -width:2px;
border -style:ridge;
border -collapse:collapse;
}
TD {
border -style:ridge;
border -width:2px;

25
padding:5px;
}
TH {
border -style:ridge;
border -width:2px;
background:# d85272 ;
padding:5px;
}
TR {
background:#f48bc3 ;
}
#TR1 {
background:#fdba7b ;
}

După cum se observă, am definit în cadrul său formatele implicite pentru un tabel, rândurile
și celulele sale ( TABLE , TR, TD, TH) precum și un identificator propriu, #TR1 .
Iată și fișierul HTML care va folosi acest .css :

<HTML
<HEAD>
<TITLE>Utilizare CSS</TITLE>
<LINK rel="stylesheet " type="text/css" href="styles .css">
</HEAD>
<BODY>
<TABLE>
<TR><TH> Număr <TH>Nume
<TR><TD>1<TD>Cristi
<TR><TD>2<TD>Mihai
<TR><TD>3<TD>Alexandru
<TR id="TR1"><TD>4<TD>Radu
</TABLE>
</BODY>
</HTML>

26
1.2.2. JavaScript.
JavaScript este un limbaj de programare orientat pe obiecte. În ciuda numelui și a unor
oarecare similarități în sintaxă, între JavaScript și Java nu există nici o legătură.
JavaScript are o sintaxă apropiată de cea a C -ului; din acest motiv un programator care
cunoaște C poate cu ușurință să învețe JavaScript.
Deși acest limbaj are o plajă mai largă de extindere, cel mai des întâlnit este în scriptarea
paginilor web. Programatorii web pot îngloba în paginile HTML script -uri pentru diverse activități,
cum ar fi verificare datelor introduse de utilizatori, sau crearea de meniuri ori de alte efecte animate
Browser -ele rețin în memorie o reprezent are a paginii web sub forma unui arbore de
obiecte, punând aceste obiecte la dispoziția JavaScript -ului, care le poate citi și manipula. Acest
arbore de obiecte, de care ne vom ocupa în paragraful următor, poartă numele de DOM (Document
Object Model).
Pentru moment, vom da câteva exemple comentate de script -uri JavaScript, care nu
folosesc DOM (pentru familiarizarea cu sintaxa), în cadrul unor documente HTML.

1) Calculul sumei cifrelor unui număr natural:

<HTML><HEAD>
<TITLE>JavaScript</TITLE>
</HEAD>
<BODY><HR>
<!–Vom scrie secventa de cod direct in cadrul paginii. A se remarca faptul ca, va aparea mai intii
primul HR, se va rula codul din tag -ul SCRIPT iar apoi va aparea cel de -al doilea HR –>
<SCRIPT language="JavaScript">
v_text=prompt("Introdu un nu mar intreg cu maxim 9 cifre:","");
//functia prompt deschide o fereastra de dialog prin intermediul careia utilizatorul //poate sa
introduca date de tip string. Al doilea parametru (șirul vid "") reprezintă // valoarea care se va
găsi implicit scrisă în fer eastra de dialog. Evident, dacă nu dorim // nici o valoare implicită, se
folosește șirul vid ("") String -ul obtinut l -am atribuit //variabilei v_text
nr=parseInt(v_text); //am facut conversia de la variabila text la un numar intreg
s=0; //in s calculam suma cifrelor lui nr
do//procedam intocmai ca in limbajul C:
{
r=nr%10;

27
s+=r;
nr=parseInt(nr/10); //in JavaScript impartirea NU mai respecta regulile din C,
//deoarece operatorul / face impartire cu zecimale. Pentru a obtine citul intre g,
//am facut conversia la intreg cu acelasi parseInt
}while(nr);
alert("Suma cifrelor este "+String(s));
//functia alert(mesaj_de_tip_string) produce afisarea unei ferestre de dialog ce contine //mesajul
respectiv. A se remarca modul in care am conc atenat mesajul cu valoarea //variabilei s, convertita
la string cu ajutorul functiei String.
</SCRIPT>
<HR>
</BODY></HTML>

2) Sortarea unui șir de numere :

În exemplele următoare nu vom mai da tot codul, ci doar secvența efectivă a script -ului.

<SCRIPT l anguage="JavaScript">
v_text=prompt("Introdu un sir de numere pe care le separi prin spatii:","");
x=v_text.split(" "); //functia split, aplicata lui v_text (cu parametrul " ") va extrage //substringurile
din v_text care sunt separate de spatii si va crea un sir de string -uri, pe //care i -l atribuie variabilei
x. Acestea vor fi x[0], x[1], … Numarul total de elemente //din sirul x se obtine prin x.length
n=x.length ;//obtinem acest numar in variabila n
for(i=0;i<n;i ++)
x[i]=parseInt(x[i ]);//in acest fel transformam toate componentele sirului x din string –
//uri in intregi. In C acest lucru nu ar fi fost posibil. acum sortam sirul obtinut:
for(i=0;i<n -1;i++)
for(j=i+1;j<n;j++)
if(x[i]>x[j])
{ aux=x[i];x[i]=x[j] ;x[j]=aux;}
//si afisam sirul final. Pentru asta, formam tot mesajul de afisat intr -un string
s="Iata sirul final, sortat: \n";
for(i=0;i<n;i++)
s=s+String(x[i])+" ";

28
alert(s);
</SCRIPT>

3) Descompunerea unui număr în factori primi :

<SCRIPT language="JavaScript">
v_text=prompt("Introdu nr. intreg pe care doresti sa -l descompui in factori primi:","");
s="Iata descompunerea in factori primi: \n";
//pregatim string -ul in care vom afisa rezultatul final, pentru ca la acest string vom tot //concate na
noile date obtinute
n=parseInt(v_text);
f=2;
while(n!=1)
{
p=0;
while(n%f==0)
{
n=parseInt(n/f);
p++;
}
if(p)
s+="Factor="+String(f)+" putere="+String(p)+" \n";
//fiecare nou factor si putere obtinute le concatenam la stringul care va fi in final afisat
f++;
}
alert(s);
</SCRIPT>

1.2.3. DOM (Document Object Model).
DOM reprezintă o interfață independentă față de orice limbaj de programare și platformă,
care permite programelor informatice și script -urilor să aibă acces sau să actualizeze conținutul,
structura sau stilurile unui document. Documentul poate fi apoi prelucrat, iar rezultatele acestor
prelucrări pot fi reincorporate în document atunci când ac esta este prezentat.

29
Înainte de standardizarea DOM -ului, fiecare navigator dispunea de propriul său model.
Dacă limbajul de bază destinat manipulării documentelor web a fost repede standardizat în jurul
lui JavaScript, nu același lucru se poate spune și d espre funcțiile specifice de utilizat și maniera de
a parcurge documentul. Cele două mari browser -e care s -au impus (Netscape Navigator și Internet
Explorer) denumeau în moduri diferite o serie de componente. În practică, acest lucru obliga
programatorul s ă scrie cel puțin două versiuni ale fiecărui script, dacă dorea ca site -ul său să fie
accesibil pentru cât mai multă lume.
Prima încercare de standardizare (DOM 1) a avut loc de -abia în 1998. Ultimul nivel de
standardizare (DOM 3) a avut loc în 2004.
Din punct de vedere dinamizării paginilor web, limbajul JavaScript reprezintă doar o
unealtă de lucru (ați remarcat în paragraful anterior similitudinea dintre acesta și limbajul C).
Pentru ca limbajul JavaScript să acționeze asupra conținutului paginii, ei b ine, acest lucru îl face
tocmai prin intermediul DOM.
Prin intermediul DOM putem accesa orice obiect al paginii web și îl putem face să se
comporte exact în felul în care dorim noi.
Ca și în cazul programării vizuale, DOM permite interceptarea anumitor e venimente
(poziția mouse -ului, click -uri, etc.) și tratarea lor diferențiată.
Vom da în continuare, câteva exemple comentate, în care operăm cu JavaScript + DOM.
1) Schimbarea unei imagini atunci când trecem cu cursorul peste ea:
<HTML><HEAD>
<TITLE>Schimbare de imagini</TITLE>
<SCRIPT language="JavaScript">
function schimba_poza ()
{//in momentul apelului, aceasta functie obtine in variabila dp o referinta catre obiectul //img din
pagina principala, gratie id -ului sau, si anume 'poza'
dp=docum ent.getElementById("poza");
//dupa care imaginea sursa a sa este schimbata, folosind imaginea din fisierul
//coveredMicrophone.jpg (cea modificata)
dp.src=" coveredMicrophone .jpg";
}
function revine_normal()
{//exact la fel ca functia precedenta, insa se foloseste alta imagine, si anume cea initiala,
microphone.jpg
dp=document.getElementById("poza");

30
dp.src="microphone .jpg";
}
</SCRIPT>
</HEAD>
<BODY>
<!–elementului img ii stabilim id -ul 'poza' pentru a -l putea folosi apoi in cadrul script -ului de
asemenea, programam ca elementul img sa reactioneze la cele doua evenimente:
– onmouseover (cind mouse -ul intra deasupra imaginii) se va apela functzia care schimba
imaginea originala cu cea modificata
– onmouseout (cind mouse -ul iese de dea supra imaginii) se va apela functzia care pune la loc
imaginea originala –>
<IMG src="microphone .jpg" id="poza"
onmouseover="schimba_poza ();"
onmouseout="revine_normal();">
</BODY>
</HTML>

2) Schimbarea culorii de fundal a unui tabel, culoare p e care o co mpunem cu ajutorul a 3 valori
pentru componentele R, G, B (între 0 și 255) pe care le scriem în niște zone text. Cele 3 valori le
vom valida :
<HTML><HEAD><TITLE>Exemplu de JavaScript</TITLE>
<SCRIPT laguage="JavaScript">
function toHex(numar)
{//aceasta functie converteste numarul parametru din zecimal in hexazecimal. Ne //bazam ca este
cuprins intre 0 si 255
c1=parseInt(numar/16);
c2=numar%16;
//in c1 si c2 am obtinut cele 2 cifre hexazecimale
if(c1>9) c1=String.fromCharCode(65+c1 -10);
//daca c1 este mai mare decit 9, o inlocuim cu litera corespunzatoare (A=10, B=11,
//…, F=15) adunind la codul ASCII al lui A (65) diferenta corespunzatoare.
//Conversia, in JavaScript, de la codul ASCII la caracter se face prin
//String.fromCharCode(cod ul ascii al caracterului)
if(c2>9) c2=String.fromCharCode(65+c2 -10);

31
return String(c1)+String(c2);
}
function rgb(red,green,blue)
{//aceasta functie genereaza constanta HTML de tip culoare plecind de la valorile lui
//red, green, blue, numere cuprinse in tre 0 shi 255.Ea se foloseste de functia de mai sus
return "#"+toHex(red)+toHex(green)+toHex(blue);
}
function coloreaza()
{//aceasta functie se apeleaza la apsarea butonului definit in cadrul lui BODY. In //primul rand
testam daca valorile sunt intregi. Observati ca am folosit identificatorii //dati la atributul id pentru
a extrage valorile din campurile text. In primul ra nd, pentru //a accesa obiectele de tip <inp ut
type="text" id="…"> va trebui sa ne folosim de o
//functie speciala DOM, si anume document.getElementById. Aceasta functie ne //intoarce o
variabila prin intermediul careia putem accesa in continuare obiectul cu //ID -ul respectiv.
//In cazul nostru, obtinem variabilele r, g si b pe baza ca mpurilor text cu ID -urile rr, gg //si bb
definite in cadrul sectiunii <body>, mai jos. Pe baza variabilelor de tip obiect r, // g si b, cim pul
"value" ne va intoarce taman valoarea scrisa in acestea
r=document.getElementById("rr");
g=document.getElementById("gg");
b=document.getElementById("bb");
nr=parseInt(r.value);ng=parseInt(g.value); nb=parseInt(b.value);
if(nr!=r.value) //daca valoarea c onvertita la intreg nu coincide
//cu cea neconvertita, inseamna ca nu este inteaga, deci dam un mesaj
{alert("Valoarea lui r nu este corecta!");
return;} //si iesim fortat (ca in C) cu return procedam analog pentru celelalte doua
if(ng!=g.value)
{alert("Valoarea lui g nu este corecta!");return;}
if(nb!=b.value)
{alert("Valoarea lui b nu este corecta!");return;}
//acum verificam sa fie cuprinse intre 0 si 255
if(nr<0||nr>255)
{ alert('Valoarea lui r nu este cuprinsa intre 0 si 255');return;}
if(ng< 0||ng>255)
{ alert('Valoarea lui g nu este cuprinsa intre 0 si 255');return;}

32
if(nb<0||nb>255)
{ alert('Valoarea lui b nu este cuprinsa intre 0 si 255');return;}
//in fine, daca am trecut de aceste filtre, valorile lui r, g si b sunt corecte si putem, in / /fine, stabili
culoarea de fundal a celuilalt tabel (caruia i -am dat id-ul tabel) la cea pe //care o obtinem din
combinatia r, g, b introdusa.
tbl=document.getElementById("tabel");
//La fel ca mai sus, getElementById ne intoarce o variabila prin intermediu l careia //putem accesa
obiectul cu id -ul respectiv
tbl.style.backgroundColor=rgb(nr,ng,nb);
//apoi, prin intermediul variabilei intoarse, si anume tbl, stabilim culoarea de fundal a //tabelului.
Pentru intoarcerea culorii in formatul recunoscut de HTML, a dica //#RRGGBB apelam functia
rgb scrisa tot de noi, mai sus
}
</SCRIPT>
<BODY>
Introdu componentele de culoare (numere intre 0 si 255):<BR><BR>
<!–In tabelul de mai jos am folosit 3 input type="text" fara a ne afla intr -un form. Este posibil si
asa ceva, deoarece continutul lor il vom prelua cu ajutorul unui script JavaScript. In cadrul acelui
script ne vom folosi de aceste controale prin interme diul atributului id pe care l -am stabilit, deci
rr, gg si bb –>
<TABLE border="1" cellspacing="0" cellpadding="5">
<TR><TD>Rosu<TD>
<INPUT type="text" id="rr" maxlength="3" size="3">
<TR><TD>Verde<TD>
<INPUT type="text" id="gg" maxlength="3" size="3">
<TR> <TD>Albastru<TD>
<INPUT type="text" id="bb" maxlength="3" size="3">
</TABLE><BR>
<!–Mai jos am folosit o componenta de tip BUTTON. Aceastei componente i -am folosit atributul
onclick. Acestui atribut ii specificam practic ce functie JavaScript trebuie apelata in momentul in
care se da click pe buton –>
<BUTTON onclick="coloreaza();">Testeaza</BUTTON>
<BR><BR>

33
<!–acestui tabel i -am utilizat atributul id, pentru a -l putea mai usor accesa prin modelul DOM in
cadrul codului JavaScript –>
<TABLE width="50%" height="50%" id="tabel" border="1">
<TR><TD align="center" valign="middle"> COLOR TEST
</TABLE>
</BODY></HTML>

34

Procese și fire de e xecuție
O aplicație Java rulează în interiorul unui proces al sistemului de operare.
Procesul deține, printre altele, unul sau mai multe fire de execuție. Firele
de execuție (threads în engleză ) sunt asemănătoare cu procesele, în sensul
ca pot fi executate independent și simultan, avantajul fiind un consum de
resurse mai mic decât in cazul proceselor.
Firele de execuție permit unui program să execute mai multe părți din el
însuși în același timp, el e fiind unitatea de execuție a unui proces.
Deoarece firele de execuție partajează între ele datele procesului căruia îi
aparțin, poate apărea n ecesitatea ca accesul la datele utilizate în comun să
fie sincronizat. Sincronizarea asigură siguranța datelor, adică se previn
situațiile precum un fir să modifice o variabilă care este utilizată în același
timp de un alt fir de execuție.
La executarea un ei aplicații Java este creat automat un prim fir de
execuție, firul principal. Acesta poate să creeze alte fire de execuție, care
la rândul lor pot crea altele, și așa mai departe.
În situația în care Mașina Virtuală Java (JVM) rulează pe un sistem
multipr ocesor, firele de execuție din cadrul aplicației pot să ruleze pe
procesoare diferite, realizând astfel un paralelism real.
Specificațiile limbajului Java definesc firele de execuție (thread -urile) ca
făcând parte din bibliotecile Java standard (pachetele java.* ). Fiecare

35
aplicație Java trebuie să furnizeze bibliotecile standard , deci implicit să
implementeze și fire de execuție. Prin urmare, dezvoltatorii de aplicații
Java pot întotdeauna să se bazeze pe faptul că firele de execuție vor fi
prezente pe oric e platforma va rula programul. Orice pachet Java este
"Thread safe", adică este asigurat ca metodele conținute in pachet pot fi
apelate simultan de mai multe fire de execuție.

Servlet -uri și thread -uri
Un container de servlet -uri sau server web (Tomcat) este multithreaded
(utilizează mai multe fire de execuție), astfel că mai multe cereri către un
singur servlet pot fi executate în același timp, conferind astfel un
paralelism în ceea ce privește aplicați ile web Java. Astfel, trebuie să luăm
în considerare principiul concurenței la dezvoltarea acestor aplicații.
O singură instanță a unui Servlet este creată la primul apel al acestuia, iar
pentru fiecare cerere nouă, containerul de servlet -uri creează un no u
thread pentru a executa una din metodele doGet() sau doPost() din servlet.
În principiu, servlet -urile nu sunt "Thread safe" , de aceea trebuie să fim
atenți la implementarea acestora.
Pentru a ne asigura ca servlet -urile sunt "Thread safe" , variabilele c are
sunt transmise în urma unei cereri trebuie să fie variabile locale (aflate în
corpul metodelor unui servlet, de exemplu doGet(), doPost(), service()
etc). Pe cât posibil, folosirea variabilelor membru(aflate oriunde în

36
servlet, dar în afara unei metode ) este indicată doar în cazul variabilelor a
căror valoare nu se modifică. Atunci când trebuie să utilizăm variabile
membru care pot fi modificate în urma unei cereri, trebuie să ne asigurăm
ca această modificare se face într -un bloc sincronizat (metoda
synchronized).
În diagrama următoare sunt prezentate regulile de concurență specifice
servlet -urilor , doar variabilele din chenarul verde fiind "Thread safe" :

Exemplu de implementare a unui servlet pentru descrierea cazului
"Thread safe" :

public class ExampleServlet extends HttpServlet {

private Object thisIsNOTThreadSafe ;

protected void doGet (HttpServletRequest request , HttpServletResponse
response ) throws ServletException , IOException {
Object thisIsThreadSafe ;

thisIsNOTThreadSafe = request .getParameter ("foo" ); // gresit,
deoarece poate fi modificat de orice cerere
thisIsThreadSafe = request .getParameter ("foo" ); // OK, este Thread
Safe
}
}