TEHNOLOGII WEB

TEHNOLOGII WEB
Conf. dr.Livia SANGEORZAN
I. Consideraii generale privind Internet i World Wide Web
La ora actual n lume exist milioane de calculatoare, care sunt folosite n cele mai
diverse domenii, multe dintre aceste calculatoare sunt legate ntre ele, interconectate n forma
reelelor de calculatoare. Multe dintre aceste reele sunt la rndul lor conectate ntre ele,
formnd inter-reele (reele de reele de calculatoare). Denumirea de internet desemneaz o
reea de reele ("net" nsemnnd n limba englez "reea"). Cea mai mare intereea public
(reea de reele de calculatoare cu acces public) este reeaua Internet.
Principala atracie a Internetului o reprezint World Wide Web-ul. Acesta a constituit
partea cu dezvoltarea cea mai rapid i cea mai popular a Internetului (cu excepia, probabil,
a fluxului voluminos de e-mail de pe tot globul). Din punct de vedere tehnic Web-ul, nu este
dect o parte a Internetului sau mai corect spus, o component, care permite navigarea prin
Internet.
Web-ul reprezint o interfa, o fereastr spre Internet sau o metod de a ajunge n
locurile dorite. Popularitatea sa deriv din trei aspecte distincte i anume:

Mascheaz limbajul pretenios folosit pentru adresele Internet i pentru comenzile

specifice.
Grupeaz mai multe componente diferite ale Internetului ntr-o singur interfa.
Permite ca pe lng citirea textului s se vizualizeze imagini, s se asculte sunete i
chiar s se urmreasc filme (n raport de resursele calculatorului - client).

Un pas important n evoluia Web-ului a fost dezvoltarea browsererelor grafice, care

puteau fi rulate pe un PC desktop sau pe un Macintosh, permind utilizatorului s foloseasc
tehnicile familiare disponibile i n alte programe, ncorpornd formate de text i grafic n
ecranul de navigare etc. Primul program de acest tip a fost NCSA Mosaic, dezvoltat de
centrul naional pentru aplicaii de supercalculatoare i distribuit gratuit.
Web-ul a permis browserelor s afieze imagini chiar n mijlocul textului, fr a fi
nevoie s se cunoasc metoda de decodificare a fiierelor. Specialitii n mass media afirm
c o imagine conteaz ct o mie de cuvinte, imaginile din articolele de ziar sau din emisiunile
TV fiind incomparabil mai sugestive dect iruri lungi de text scris la main. Deci acest
ingredient final a permis ca Web-ul s par att sensibil, ct i interesant pentru persoana care
nu ar fi nvat niciodat ce nseamn o expresie obinuit in Unix.
Creatorii de browse Nestcape i Microsoft ncearc fiecare s dezvolte soluii globale
care s transforme produsele proprii n "platforme" ale tuturor operaiilor din Internet. La ora
actual existz companii care ofer conturi Internet gratuite, avnd o interfa pentru e-mail
bazat pe Web. Gratuitatea gzduirii site-urilor este condiionat de meninerea pe ecran a
unei ferestre publicitare. Exist i alte modaliti de a intra in lumea Internetului, fr a fi
nevoie de un calculator, cum ar fi Web TV (pentru care este nevoie de un televizor, un
modem, o tastatur i o telecomand), sau a unui modem, cum ar fi DirectPC (este nevoie de
un calculator i de o anten special pentru satelit).

Dezvoltarea Internetului, combinat cu apariia reelelor de tip Internet locale, de

dimensiuni mai mici, care funcioneaz dup principiile Internetului, a dus la cerine din
partea utilizatorului pentru ca partea de software s i ajute s recupereze documentele de la
distan, s colaboreze prin intermediul legturilor de reea i s salveze sau s publice
documente. Pentru a ndeplini aceste cerine, productorii de software au adugat
componentele Internet la programele lor.
O mare parte din elegana Internetului const n cantitatea impresionant de putere de
prelucrare i de stocare a programelor de dimensiuni mari i a informaiilor dense, operaii
care au loc n Internet i nu n calculatorul propriu. Calculatorul propriu - fie c este un PC,
un Mac sau o staie de lucru Unix - rmne doar o ramp de lansare ctre lumea Internetului.
Aceast structur comun de faciliti Internet este referit uneori cu expresia client-server.
Calculatorul personal (sau programul care ruleaz pe acesta) este clientul, iar sursa de
informaii sau site-ul World Wide Web este serverul. Serverele reprezint depozite
centralizate de informaii sau de manipulatori specializai pentru anumite tipuri de trafic.
Clientul nu trebuie dect s se conecteze la serverul potrivit i astfel foarte multe lucruri
interesante vor fi la dispoziia sa, fr a fi nevoie s suprancarce calculatorul propriu. Acesta
este unul din principalele motive pentru care nu are importan ce tip de calculator se
utilizeaz.
WWW este un sistem distribuit. Informaiile sunt plasate n mii de site-uri. Cnd
utilizatorul dorete o informaie, apeleaz site-ul care a publicat-o. Fiecare site i fiecare
pagin de informaii au o adres unic numit URL (Uniform Resource Locator URL =
identificator uniform al resursei). Aceat informaie publicat ntr-un site poate fi oricnd
actualizat de autorul site-ului.WWW devine din ce n ce mai mult un sistem interactiv.
Evoluia tehnologiilor Web l transform ntr-un mediu de comunicare. De exemplu,
includerea formularelor n paginile Web permite colectarea de informaii de la utilizator.
Termeni care se vehiculeaz n lumea Web-ului sunt:
Host Computer legat la Internet care gzduiete unul sau mai multe servere;
Server Web Software care administreaz site-uri web;
Site Web Colecie structurat de pagini web;
Pagin (document) web Coninutul unui fiier, afiat ca urmare a unei cereri a
utilizatorului;
Pagin home Pagina de intrare a unui site.
Un host poate gzdui mai multe tipuri de servere (FTP, Gopher, Web). Fiecare tip de
server are propriul tip de comunicaie cu Internet-ul. Protocolul de comunicaie al serverelor web se numete HTTP (Hyper Text Transformer Protocol).
Un server web administreaz mai multe site-uri web. Un site conine una sau mai
multe pagini ntre care exist legturi. Pagina home este intrarea n site.

Browsere WEB
Pentru a accede la web, utilizatorul trebuie s aib instalat pe computerul su un
browser.
Browser-ul este o aplicaie cu trei funcii principale: accesul la informaii, formatare i
afiarea informaiilor. Utilizatorul furnizeaz browser-ului adresa paginii dorite (URL-ul).
Browser-ul solicit conectarea la server-ul web, pe baza protocolului HTTP. O dat

conectarea acceptat, server-ul transmite browser-ului fiierul cerut. Browser-ul formateaz

pagina i o afieaz pe monitorul utilizatorului.
Formatarea se face n funcie de:
indicaiile de formatare coninute n fiierul primit;
caracteristicile platformei cu care lucreaz utilizatorul.
Piaa are o ofert bogat de browsere disponibile pentru diverse platforme. Exist
browsere operaionale pe sisteme cu interfa grafic (Macintosh, Windows), dar i pe
sisteme cu interfa exclusiv textual. Poziia dominant pe pia este ocupat de Microsoft
Internet Explorer (IE) i Netscape Navigator (NN). IE este operaional sub Windows
(ncepnd cu 3.1), sub UNIX i pentru calculatoare Apple. Netscape Navigator este
component a unui set de instrumente Internet, numit Netscape Communicator al firmei
Netscape Communications Corporation. Componenta numit Netscape Composer permite
editarea paginilor Web. Netscape Navigator este operaional sub Windows, sub anumite
versiuni UNIX i pentru Apple.

Primii pai ctre construcia unui site

Dac se dorete realizarea unei pagini www, trebuie s apelm la o firm specializat,
numit provider. Provider-ul dispune de mai multe calculatoare foarte performante, numite
server-e i pune la dispoziie:

spaiu pe hard-ul server-ului de cel putin 10 MB;

o adres de Internet, de exemplu : www.adresa_student.ro.

n spaiul rezervat se pot pune mai multe fiiere care conin instruciuni HTML dar i
orice alte fiiere.
Definiie ( [1]):
Prin site se nelege ansamblul:
spaiu hard;
fiierele pe care le conine;
adresa
Prin pagin se nelege coninutul afisat al unui fisier HTML.
Definiie ( [1]):
Ansamblul regulilor care trebuiesc respectate pentru schimbul informaiilor de un
anumit tip se numete protocol.
Dac dorim s transferm fiiere ctre server sau invers, de la server ctre propriul
calculator se utilizeaz protocolul FTP (File Transfer Protocol).
Pentru a realize o pagin atractiv este bine s se utilizeze un design adecvat. n acest
scop se pot utiliza limbajele:
JavaScript,
PHP
Java (Applet)
4

Flash
etc.

Trebuie s se aib n vedere faptul c JavaScript ruleaz pe calculatorul vizitatorului,

o secven JavaScript este tradus i executat de ctre browser i este trimis acestuia odat
cu fiierul HTML.
Limbajul PHP este un limbaj de programare ce ruleaz pe server i este proiectat
special pentru WEB.
ntr-o pagin HTML putem ngloba cod PHP care va fi executat la fiecare vizitare a
paginii.
Limbajul PHP permite lucrul cu baze de date, n MySql.
Mysql este un sistem de gestiune a bazelor de date, foarte rapid i robust.
Aplicaiile scrise n PHP i MySql se ruleaz pe server.
Atenie: Nu toi provider-ii pun la dispoziie utilizatorilor posibilitatea utilizrii
acestor limbaje, deci o s trebuiasc s studiem oferta.

II. Principii de baz n design

Oricine poate s nvee tehnicile crerii unei pagini Web. i oricine poate s creeze o
pagin Web urt. Totui, singurul motiv pentru care attea persoane realizeaz pagini web
slabe este faptul c nu cunosc principiile de baz ale designului. Noiunile de interfa i
navigaresunt importante n realizarea unui design atragator, dar necesit i un pic de
gndire i planificare. Conceptele utilizate sunt lucruri foarte simple, care vor schimba rapid
i cu uurin banalele pagini Web, n pagini cu aspect mult mai profesionist.
Cele patru principii de baz, care permit ca o pagin Web s arate clar, ordonat i
profesionist sunt:


alinierea;


proximitatea;


repetarea;


contrastul.
Acetia sunt factorii de baz ai oricrei lucrri tiprite pe ecran sau altundeva.

Alinierea
Alinierea nseamn c elementele de pe pagin sunt aliniate unele n raport cu
celalalte. Lipsa alinierii este principala problem de pe paginile Web, aceasta reprezint o
problem important i pe paginile tiprite, ns pare i mai prezent i mai dezastroas pe
paginile Web. Nimic nu trebuie asezat la ntmplare pe pagin. Se creeaz un aspect curat,
sofisticat i proaspt al paginii dac fiecare element are o legatur vizual cu un alt element
de pe pagin.
Alinierea elementelor dup latura stng, dreapt sau centrat trebuie s urmeze o
anumit regul, i anume:
Alegei UNA. Se alege o singur aliniere care se utilizeaz pe toat pagina.

Dac se opteaz a se alinia textul de baz n stnga, nu se pune titlul pe centru;

Dac se aliniaz centrat o parte din text, atunci se aliniaz centrat peste tot.

Nu amestecai alinierile.
Acest singur principiu va modifica radical aspectul paginilor.
Se pot face alinieri verticale orizontale si centrale.
O aliniere central se poate spune c este :

echilibrat;

simetric;

calm;

oficial.
Aliniind o parte din text la stnga, o parte la dreapta i o parte centrat, se creaz o
senzaie de dezordine i se transmite impresia de amatorism.
Dac se aliniaz textul i imaginile, este bine s ndeprtm textul de marginea stng.
Este obositor i distrage atenia s dm cu ochii de marginea stng a paginii browserului de
fiecare dat cnd trecem la rndul urmator. Cnd decalm textul (operaie de indentare), se
poate face i din partea dreapt, mpiedicnd formarea rndurilor de text lungi i dificil de
citit.

Text pe butoane neglijent realizat (vezi figura de mai sus)

Alinierea orizontal este la fel de important ca i cea vertical. Este important s
vedei butoane ca n exemplul de mai sus, n care literele nu se aliniaz pe orizontal. Aceast
deplasare sus/jos/sus/jos face ca toat maneta s arate dezordonat. De aceea, pe lng
alinierea vertical trebuie s fim ateni i la alinierea orizontal a butoanelor i legturilor.

Text pe butoane corect realizat (vezi figura de mai sus)

Literele stau pe o linie invizibil numit linie de baz. Maneta de legturi este mai
ordonat i mai organizat dac aliniem tot textul pe aceeai linie de baz. n majoritatea
software-urilor de creaie pentru Web exist un buton pentru alinierea dup linia de baz, de
obicei n specificaiile pentru tabele.

Formular incorect realizat din punct de vederea al web design-ului (vezi

formularul de mai sus)
Formularul acesta ncepe excelent; exist cteva alinieri foarte bune, bine definite, dar
i locuri n care textul pare s fi fost trntit aleatoriu pe pagin.
Aliniere vertical n partea lateral a formularului las de dorit. Consolidm aspectul
paginii, aliniind celalalte elemente dup aceast linie.

Totul trebuie s aib un motiv pentru a-i justifica locaia deoarece, nimic nu trebuie
plasat arbitrar pe pagin. Nu azvrlim pur i simplu elementele i vedem cum i unde se
lipesc. Trebuie s putem explica motivul pentru care un element se afl n acel loc.
O pagin, poate s fie instantaneu folosit, prin alinierea tuturor elementelor dup o
latur i pagina arat mult mai organizat. Dac lucrurile sunt organizate, ele comunic mult
mai bine.
Alinierea nu nseamn c totul este aliniat dup aceeai latur. nseamn pur i simplu
c totul are aceeai aliniere fie lipit la stnga, fie lipit la dreapta, fie centrat.
Cnd o margine bun se repet, ea ctig n for.

Formular corect realizat din punct de vederea al web design-ului (vezi formularul
de mai sus) Mai sus am dat un mod de aliniere optim, pentru formularul creat anterior. Se
observ linia vertical dup care se aliniaz csuele text, checkbox sau cea de submit.
Formularul arat mult mai bine.

Proximitatea
Proximitatea se refer la relaiile dintre elemente, cnd acestea sunt foarte aproape. Pe
o pagin, componentele aflate n legatur cu altele trebuie s fie grupate. Dac anumite
componente se afl n apropierea altora, ele devin o singur unitate din punct de vedere
vizual, astfel informatiile pot fi organizate mai bine i permite astfel s dispar orice
confuzie.
Se pare c exist o fric fa de spatiul liber. Pagina pare neorganizat dac elementele
de machetare sunt mprtiate peste tot, fiind posibil ca informia s devin mai greu
accesibil.
Principiul proximitii spune c trebuie s se grupeze componentele aflate n legatur,
sa fie mutate mai aproape unele de altele, astfel nct s fie percepute ca un grup unitar, nu ca
8

o grmad de elemente fr legtur. Componentele i grupurile de informaii care nu au

legtur unele cu altele nu trebuie s se afle n proximitate (vecintate).
Dorim s realizm o carte de vizit care cuprinde 5 elemente (componente) separate
(vezi figura de mai jos). n acest caz ochiul se oprete de cinci ori. Ochiul ncepe s citeasc
n mijloc, deoarece textul este bold.

DIRECTOR S.C. PISOI

(0268) 956419

VICTOR GABRIEL MOTANEL

Str. Leului nr.123

Brasov

Dac complicm problema, adic mai ngrom alte elemente vom vedea c ne vom
plimba privirea ntre cuvintele ngroate.
DIRECTOR S.C. PISOI

(0268) 956419

VICTOR GABRIEL MOTANEL

Str. Leului nr.123

Brasov

Proximitatea sau apropierea nseamn o relaie.

O problem a crii de vizit anterioare este faptul c nici una dintre componente nu
pare a fi n legatur cu alta. Dar dac fac o rearanjare a componentelor de pe cartea de vizit
aceasta arat cu totul altfel, iar componentele care au o legatur ntre ele sunt grupate. Aceste
componente sunt mai aproape unele de altele (vezi figura de mai jos).

VICTOR GABRIEL MOTANEL

DIRECTOR S.C. PISOI

Str. Leului nr.123

Brasov
(0268) 956419
Uneori, atunci cnd se grupeaz componentele foarte apropiate, este nevoie s se
modifice cte ceva, de exemplu, mrimea, ponderea sau aezarea textului ori a desenelor.
Componente aflate n apropiere unele de altele devin o unitate vizual, nu trebuie
organizate ca uniti separate. Deci componentele cu legatur ntre ele trebuie grupate
mpreuna.
Principiul proximittii are ca scop de baz organizarea paginii.
Dac pe pagin exist mai mult de trei pn la cinci componente, trebuie vzut care
dintre elementele separate pot fi grupate, mai apropiat, pentru a deveni o unitate vizual.
Proximitate nu nseamn c totul este apropiat, ci c elementele care sunt legate din
punct de vedere al semnificaiei lor, ntre care exist un fel de relaie privitoare la ceea ce
comunic, trebuie s fie conectate i vizual.
Informaia dintr-o pagin trebuie mai nti grupat din punct de vedere al semnificaiei,
apoi aezat din punct de vedere fizic pe pagin. Informaia secundar trebuie s fie mai
distanat, astfel ct s se vad c este vorba despre o completare a informaiei principale.

Repetiia
Principiul repeitiei spune c anumite pri ale machetrii trebuie repetate n ntreaga
lucrare. Se poate repeta de exemplu un font ngroat, o linie groas, un anumit tip de marcaj,
un element de design etc. Poate fi orice element care poate fi recunoscut de ctre vizitator.
Relum cartea de vizit i organizm informaia altfel (vezi figura de mai jos).
Observm c dup ce am privit informaia de pe aceast carte de vizit, ochii ramn
agai de nume, deorece este ngroat i subliniat.
Dar totui avem senzaia de neterminare. Urmtoarea figur prezint aceeai carte de
vizit dar n care am ngroat i ultima informaie, astfel ochiul se uit la nume i la numrul
de telefon.

10

VICTOR GABRIEL MOTANEL

DIRECTOR S.C. PISOI

Str. Leului nr.123

Brasov
(0268) 956.41.93

VICTOR GABRIEL MOTANEL

DIRECTOR S.C. PISOI

Str. Leului nr.123

Brasov

( 0268 ) 956.41.93

Contrastul
Contrastul este cea mai eficient cale de a aduga valoare vizual paginii noastre.
Principiul contrastului spune c dac dou componente nu sunt exact la fel, atunci
trebuie s fie complet diferite.
Regula de aur n utilizarea contrastului spune c pentru a fi eficient, contrastul
trebuie s fie puternic.
Contrastul poate fi creat n mai multe moduri, de exemplu punem n contrast:

un font mare cu unul mic;

un font elegant cu unul ngroat;

o culoare rece cu una cald;

un element orizontal (ex. un rnd lung de text) cu unul vertical (ex. o coloan
de text nalt i ngust);

rnduri cu spaii multe ntre ele cu rnduri dese;

11

un desen mare cu unul mic.

Atenie! Nu putem pune n contrast maro nchis cu negru sau un font de 14 puncte cu
unul de 16 puncte.
Fie un Anun pentru obinerea unei burse Socrates n cadru Facultii de Matematic i
Informatic. Sunt prezentate dou variante. Se observ c ambele variante conin aceleai
informaii doar c al doilea anun conine mai mult contrast i ne uitm cu mult mai mult
plcere la cel de al doilea anun.

BURSE SOCRATES 2007 !

Conditii de aplicare
Integralist
Depunere dosar care sa cuprinda : CV, Scrisoare de intentie, situatia scolara
Participare la testul de limba straina
Termen limita de depunere dosar la Decanatul Facultatii MI: 14.04.2007
Universitati partenere:
University Oldenburg
University Dortmund
University of Applied Sciences Fulda,
University of Applied Sciences Wiesbaden,
University of Applied Sciences Mittweida
Contrastul n formularul modificat este evident.
Am folosit un font mai puternic, am ngroat titlurile.
Fontul folosit l-am repetat i n titlul paginii.
Titlul l-am transformat din majuscule n litere mici i astfel am avut posibilitatea s
folosesc o dimensiune mai mare a fontului, pe care l-am ngroat.
Totodat am scris titlul cu alb pe fond negru (banda neagr). Astfel am mrit
contrastul. Contrastul nu numai c face pagina mai atractiv, ci i clarific scopul i
organizarea documentului.

12

Burse Socrates 2007 !

Conditii de aplicare

Integralist
Depunere dosar care sa cuprinda :
o
CV,
o
Scrisoare de intentie,
o
situatia scolara

Participare la testul de limba straina

Termen limita de depunere dosar


Decanatul Facultatii MI;


14.04.2007

Universitati partenere:

University Oldenburg
University Dortmund
University of Applied Sciences Fulda
University of Applied Sciences Wiesbaden,
University of Applied Sciences Mittweida

13

III. HTML (Hyper Text Markup Language)

O versiune mai veche a HTML-ului folosea unele idei i modificri propuse pentru
HTML 3, care au fost abandonate la apariia HTML 3.2.
HTML 4 propune separarea stilurilor fizice de marcarea coninutului printr-o folosire
mai intens a foilor de stil. Elementul frame este acum definit oficial altundeva dect n
produsele firmelor Nestcape sau Microsoft. Include elementele style, div, span pentru
ncorporarea foilor de stil.
Eticheta object este de asemenea extins, astfel s includ practic orice fiier extern
care se dorete introdus ntr-o pagin Web. Sunt introduse etichetele ins i del, acronym,
colgroup, fieldset, button.
HTML e un limbaj bazat pe SGML (Standard Generalized Murkup Language =
Limbaj Standard Generalizat de Marcare) care este un standard internaional ce a fost
aprobat n 1986 i care permite crearea de documente hipertext pentru paginile Web.
Principalele caracteristici ale limbajului SGML sunt:
1.
2.
3.
4.

Descrierea structurii documentului;

Nu este descris aranjarea n pagin;
Permite fiecrui navigator s aib propria prezentare;
Un document HTML poate fi reutilizabil.

Standardul oficial HTML este dat de World Wide Web Consortium (W3C) care este
afiliat la Internet Engineering Task Force (IETF). W3C a enunat cteva versiuni ale
specificaiei HTML, printre care i HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0, HTML
4.01 i, cel mai recent, HTML 5.0. Fiecare din aceste standarde este mai mult sau mai puin
suportat de ctre toate sau o parte din browsere.
La ora actual HTML 4.0 si HTML 4.01 sunt larg utilizate i au fost deja publicate
specificaiile HTML 5.0. Obiectivul HTML5 este acela de a mbogi suportul pentru
aplicaiile multimedia prin aducerea laolalta a capabilitilor oferite de HTML4, cu XHTML
i JavaScript.
Limbajul HTML ofer proiectanilor de pagini Web urmtoarele posibiliti:
1. S publice documente cu headere, texte, tabele, liste, fotografii, etc;
2. S regseasc on-line informaiile prin intermediul hiperlink-urilor printr-un
simplu click de mouse;
3. S proiecteze formulare pentru realizarea tranzaciilor cu servere aflate la
distan pentru cutri de informaii sau pentru activiti specifice comerului;
4. S includa foi de calcul tabelar, clipuri video, sunete i alte aplicaii direct n
documente.
Elementul esenial diferit adus de versiunea 4.0 i mai ales 4.01 fa de versiunea 3.2
este posibilitatea separrii structurii unui document de prezentarea lui prin introducerea
stilurilor de documente (style sheet).

14

Prin utilizarea limbajului HTML4 pentru structurarea unui document i a style sheeturilor pentru a stiliza prezentarea acestuia, se poate obine mult mai uor independena de
periferic/computer/platforma hard-soft.
Deoarece HTML5 aduce elemente noi care permit includerea obiectelor multimedia
sau a graficelor, fr a mai avea nevoie de plugin-uri, se vor putea crea aplicatii mult mai
complexe utilizndu-se doar limbajul HTML.
Limbajul HTML a fost preferat pentru publicaii pe Web n primul rnd datorit
simplitii sale i n al doilea rnd deoarece permite formatarea textului ASCII cu tag-uri n
format ASCII.

Crearea unui document HTML

HTML = Hyper Text Markup Language este limbajul de baz al WWW i const dintrun set standard de coduri care specific n ce mod documentele vor fi afiate pe ecran de
ctre navigatoare.
Caracteristica important a limbajului este portabilitatea adic orice document surs
HTML va arta identic pe orice tip de calculator i n orice sistem de operare, sarcina
interpretrii sale revenind diverselor navigatoare.
Orice document HTML ncepe cu marcajul (tag-ul) <html> i se termin cu marcajul
(tag-ul)</html>.
Un marcaj poate avea unul sau mai multe atribute care se specific prin perechi de
forma: nume="valoare". Se recomand ca valorile atributelor s fie plasate ntre ghilimele
(" ").
Marcajele dintre aceste paranteze unghiulare transmit comenzi ctre browser pentru a
afia pagina ntr-un anumit mod.
ntre cele doua marcaje <html> i </html> apar dou seciuni;
1. Seciunea de antet delimitat de marcajele
<head> TEXT </head>;
2. Corpul documentului care este delimitat de marcajele
<body> CORPUL TEXTULUI </body>.
Un marcaj poate fi scris att cu litere mici, ct i cu litere mari. Deci limbajul HTML
nu este CASE sensitive.
Comentariile din cadrul documentelor HTML se realizeaz utiliznd tag-ul urmtor :
<!AICI APARE UN COMENTARIU -->.
Orice ir de caractere ncadrat de aceste elemente va fi ignorat de programele de
navigare Web.

15

Structura de baz a unui document HTML este:

<html>
<head>
Informaia
</head>
<body>
Corpul fiierului
</body>
</html>

Un fiier HTML este creat cu orice editor de texte cu meniunea c fiierul trebuie
salvat cu extensia html sau htm.

TAG-uri HTML
n limbajul de marcare a hipertextului totul se rezum la structur. Un limbaj de
marcare este folosit pentru a descrie care este rolul fiecrei pri din document n raport cu
celelalte.
Terminologia HTML:
a) atribut: furnizeaz instruciuni adiionale despre o etichet. Informaiile
variaz de la etichet la etichet i pot include subiecte cum ar fi locaia
fiierelor, mrimea, numele lor sau stiloul lor;
b) browser: este un motor de parcurgere special care evalueaz etichetele i
coninutul unui fiier HTML, pe care l afieaz n concordan cu
posibilitile i regulile platformei i capacitile sale;
c) element: o component distinctiv a structurii unui document, cum ar fi titlul,
un paragraf sau o list. Cnd ne referim la forma sa aplicat n cadrul unui
document, un element se mai numete etichet (tag);
d) etichet: un cod care identific un element pentru ca browserul sau alt
program de parcurgere s tie n ce mod s afieze coninutul. Etichetele sunt
ncadrate de caractere de delimitare (paranteze ascuite) Ele sunt ntotdeauna
cuprinse ntre paranteze unghiulare (<>) iar utilizarea literelor mici sau mari
n scriere nu are importan.
Documentele HTML sunt fiiere text (ASCII). n text sunt inserate o serie de coduri aa
numitele tag-uri sau marcaje care stau la baza modurilor de afiare a documentului. Un
document HTML este compus din tag-uri i text curat. Documentele au componente
asemntoare cum ar fi titluri, tabele, liste, paragrafe, etc.
Tag-urile HTML sunt folosite tocmai pentru a marca elementele comune, care pot
conine text, grafic sau alte elemente. Tag-urile sunt de forma pereche nceput-sfrit:

16

<tag>.............................</tag>
coninut arbitrar

tagul de
nceput

tagul de sfrit care are

caracterul slash (/ )

Scrierea perechilor de legturi:

CORECT

INCORECT

CORECT
<tag1>

<tag1>

<tag2>

<tag2>

</tag2>

</tag1>

</tag1>

</tag2>

Tag-uri din cadrul documentului HTML

Fiecare document HTML, nc de la creare are dou pri principale: un antet i un
corp. Chiar dac nu sunt special delimitate, HTML presupune existena lor. HTML ofer de
asemenea ansa de a aduga i alte componente funcionale paginii, sub forma foilor de stil,
scripturilor i seturilor de cadre.
Dei fac parte din definirea unui document HTML, dou etichete exist n afara
structurii documentului: doctype i html. Prima identific versiunea de HTML folosit pentru
pagina respectiv i regulile pe care acestea le respect. A doua etichet identific un limbaj
global i direcia textului pentru documentul respectiv, n plus marcheaz nceputul i
sfritul coninutului HTML.
Documentul HTML se indic prin tag-ul HTML
<HTML>.........................</HTML>
Vom prezenta numai o parte din tag-urile HTML, care sunt importante n realizarea
unui design atragator.

Culori, fonturi, margini

O pagin Web poate fi setat prin:
- alegerea culorii de fond
- alegerea culorii textului i
- alegerea dimensiunilor paginii

17

sect1. Stabilirea culorii n taguri

Culoarea se obine din amestecul a celor trei culori fundamentale: rou, verde i
albastru.
Culoarea de fond a unei pagini se specific astfel :
nume de culoare. Astfel sunt disponibile cel puin 16 nume de culori, astfel avem
urmatoarele nume: red, green, blue, aqua, black, fuchsia, gray, lime, maroon, navy,
olive, purple, silver, teal, white i yellow.
secventa hexazecimala #rrggbb unde r,g sau b sunt cifre hexazecimale i pot
lua valorile din multime {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f,
F};astfel se pot defini 65536 de culori.
functia rgb(r,g,b), unde r,g si b iau valori din multimea numerelor naturale
{0,1,2255}

Tagul Body
Tagul body are o list de atribute incluse dup denumirea tagului i delimitate prin
spaiu. Proprietile principale ale acestui tag sunt cele care definesc fundalul paginii, fie c
este vorba de o culoare sau de o imagine.
Atribute ale acestui marcator: bgcolor, background, text, leftmargin, topmargin
Aceste atribute se vor evidenia n exemplele urmatoare.

Culoare pentru fundalul paginii

Culoarea unei pagini se precizeaz prin intermediul atributul bgcolor.
Sintaxa:
<body bgcolor = culoare>
Semantica:
culoare se stabilete dup modelul precizat n sect1.
Exemplu de pagin Web cu fundalul de culoare cyan:

18

Culoarea textului
Definirea culorii textului pentru o pagin Web se face prin intermediul atributului text
al etichetei <body>
Sintaxa:
<body text = culoare>
Semantica:
culoare se precizeaz la fel ca la exemplul precedent.
Pagina de Web urmtoare are textul de culoare roie:

Atribute multiple
O etichet poate s aib mai multe atribute.
O etichet cu trei atribute are urmatoarea sintax:
Sintaxa:
<eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>
Exemplu: Pagin Web cu textul de culoare albastr i fondul de culoare galben:

19

Marginile paginii Web

Se face cu ajutorul a dou atribute ale etichetei <body>:
leftmargin distana dintre marginea din stnga a ferestrei browserului
i marginea din stnga a coninutului paginii
topmargin distana dintre marginea de sus a ferestrei browserului i
marginea de sus a coninutului paginii
Valorile care se pot atribuii celor doua atribute sunt :
numere ntregi pozitive, care indic distana dintre coninutul ferestrei i
fereastra browserului, distan msurat n pixeli
un procent, ce reprezinta procent din limea, respectiv nlimea
ferestrei browserului

Tagul basefont (textul de baz)

Atributele textului de baz dintr-o pagin Web sunt:

Mrime (size)

Culoare (color)

Font (style)
Sintaxa:
<basefont size = numr color = culoare style = font>
Semantica:
numr poate lua una dintre valorile din mulimea {1, 2, 3, 4, 5, 6, 7 }

20

(valoarea 1 fiind pentru fontul cel mai mic i valoarea 7 pentru fontul cel mai
mare)
culoare se precizeaz prin nume sau prin RGB
font poate fi un font generic din multimea {serif, sans serif, cursive,
monospace, fantasy, Times New Roman, Helvetica, Arial }
Eticheta (Tag-ul) basefont este valabil pn la sfritul paginii sau pn apare
urmtoarea etichet <basefont>.
n cazul n care eticheta <basefont> lipsete, textul din pagina Web are atributele
prestabilite i anume:
size=3,
color=black
style=Times New Roman

Stilurile blocurilor de text

Stiluri fizice
Se pot alege diferite stiluri pentru caracterele din textul unei pagini Web.
Caractere: ngroate (tag-ul b), cursive (tag-ul i)
Un bloc de text apare ngroat n pagin dac este inclus ntre <b> text </b> .
Un bloc de text inclus ntre etichetele <i> text </i> este scris cu caractere cursive.

21

Aceste tag-uri sunt valabile, dar sunt mai vechi. Variantele mai noi pentru scrierea
textului ngroat sunt realizate cu ajutorul etichetei <strong>, iar pentru scrierea textului
nclinat se folosete eticheta <em>.

22

Caractere: mrite (tag-ul big), micorate( tag-ul small),

Un text inclus ntre etichetele <big> text </big> este scris cu caractere mai mari cu o
unitate dect dimensiunea curent.

Un text inclus ntre etichetele <small> text </small> este scris cu caractere mai mici cu
o unitate dect dimensiunea curent.

23

Caractere:indice superior i indice inferior

Fragmentele de text aliniate ca indice inferior (sub-script) sunt delimitate de etichetele
_i.
Secvenele de text aliniate ca indice superior (super-script) sunt incluse ntre etichetele
ⁱ.

24

Caractere: subliniate i secionate

Eticheta de tip bloc <u> text </u> insereaz un bloc de caractere subliniate.
Etichetele <strike> i </strike> sau <s> i </s> insereaz un bloc de caractere
secionate la mijloc cu o linie orizontal.

25

Stiluri logice
Stilurile logice sunt bazate pe cele fizice. Modul lor de aciune depinde n mare msur
de de browserul utilizat.
Blocuri de caractere evideniate
Urmtoarele dou etichete pun n eviden prin stilul cursiv fragmente de text:
<cite> text </cite> (cite = citat)
<em> text </em> (emphasize = a evidenia)
Aceste dou etichete sunt echivalente cu eticheta <i> </i>.

Blocuri de caractere monospaiate

Etichetele urmtoare permit scrierea fragmentelor de text cu caractere monospaiate de
diferite tipuri
<code> text </code> (code = cod sau surs)
<kbd> text </kbd> (keyboard = tastatur)
<tt> text </tt> (teletype = teleprinter)
<var>text</var> (variable = variabile)
<cite>text</cite> (citation = citare)
<dfn>text</dfn> (definition = definirea unor termeni)

26

Tagul font (configurarea font-urilor)

Un font are urmtoarele atribute:

culoarea
- se stabilete cu atributul color
tipul sau stilul
- se stabilete cu atributul face
mrimea
- se stabilete cu atributul size
mrimea n puncte tipografice (este stabilit prin atributul point-size)
grosimea
- se definete cu atributul font-weight

Culoarea fontului
Pentru a scrie un text cu o anumita culoare se ncadreaz acest text ntre delimitatorii
<font> text</font> n felul urmtor:
Sintaxa:
<font color = culoare>text de culoarea specificat </font>
Semantica:
culoare va reprezenta culoarea fontului

27

Familia fontului
Tipul de font se stabilete prin atributul face al etichetei <font>.
Fonturile pot fi separate prin virgul.
Cele cinci familii generice de fonturi sunt:
serif
sans serif
cursive
monospace
fanatasy
Pot fi utilizate i alte fonturi specifice cum ar fi:
Times (tip particular de font serif)
Helvetica (tip particular de font sans serif)
28

Arial
Courier (tip particular de font monospace)
Western (tip particular de font fantasy) , etc.

Exemplu:
<font face=Arial, serif, monospace>.
Browserul va utiliza primul font pe care l recunoate.

Mrimea fontului
Marimea fontului se indic cu atributul size al etichetei <font>.
Acest atribut poate lua urmtoarele valori:
1, 2, 3, 4, 5, 6, 7 (1= cel mai mic font, 7= cel mai mare font);
-1, -2, -3, etc. pentru a micora dimensiunea fontului cu -1, -2 fa de
dimensiunea curent;
+1, +2, +3, etc. pentru a mri dimensiunea fontului cu +1,+2,.. fa de
dimensiunea curent;
O alt metod de stabilire a mrimii unui font este prin utilizarea atributului pointsize al etichetei <font> i reprezint mrimea fontului n puncte tipografice. Acest atribut
poate lua ca si valori orice numar natural pozitiv.
Observaie: Atributul point size funcioneaz numai cu Netscape
Comunicator.

29

Grosimea unui font

Grosimea poate fi definit cu cu atributul font-weight al etichetei <font>.
Valorile pe care le poate lua atributul font-weight sunt: 100, 200, 300, 400, 500, 600,
700, 800 i 900 (100 fontul cel mai subire, 900 fontul cel mai gros)

30

Blocuri de texte
a) Inserarea unei adrese
Inserarea unei adrese se face cu ajutorul etichetei <address> </address>. Textul este
afiat cu caractere cursive.

b) Indentarea unui bloc de text

Un bloc de text indentat este un bloc de text la care marginea din stnga a textului este
deplasat la o anumit distan de marginea paginii.

31

Blocuri <div>
Delimitarea i formatarea unui bloc de text se face cu delimitatorii <div> text</div>.
Blocul <div> are urmatoarele atribute :
align (aliniere).
Valorile atributului align sunt:

left
aliniere la stnga

center
aliniere central

right
aliniere la dreapta

Blocul <div>text </div> are posibilitatea s includ i alte subblocuri.

Atributul align are efect asupra tuturor subblocurilor incluse n blocul <div>.
Atributul nowrap permite ntreruperea rndurilor acolo unde este precizat acest
lucru.

32

Blocul preformatat
Etichetele <pre> </pre> permit pstrarea caracteristicilor textului aa cum a fost
introdus n fiier, deci ia n considerare caracterele spaiu, tab i CR/LF (enter la sfrit
de linie).
Blocul <pre> ... </pre> poate fi folosit pentru a insera rnduri vide.
Caracterul spaiu, pentru a putea fi luat n considerare trebuie precizat prin &nbsp;.

Blocuri paragraf (tag-ul <p>)

Trecerea la o linie nou se face cu eticheta <br>, (br de la break=pauz). La fel i
eticheta <p> face trecerea la o linie nou.
Eticheta <p> mai permite:
inserarea unui spaiu suplimentar inainte de blocul paragraf.
inserarea unui spaiu suplimentar dup blocul paragraph;.
alinierea textului cu ajutorul atributului align, cu valorile left, center sau
right

33

Blocuri de titlu
Titlurile (headers) de capitole sau paragrafe pot avea diferite dimensiuni. Ele pot fi
introduse cu tag-ul <hx> text </hx> unde x poate lua valori din multimea {1,2,3,4,5,6}
Exemplu:
<h3>(bloc de text)</h3>
Se accept atributul align de ctre aceste etichete pentru alinierea titlului blocului de
text la stnga (modul prestabilit), n centru i la dreapta.
Tag-ul <h1> scrie titlul cu caracterele cele mai mari i cele mai ngroate.
Tag-ul <h6> folosete caracterele cele mai mici.

34

Linii orizontale
Se pot insera linii orizontale ntr-o pagin web cu ajutorul etichetei <hr>.

35

Configurarea unei linii orizontale

Atributele etichetei <hr> sunt:
align - permite alinierea. Valori posibile: left, center, right.
width - permite alegerea lungimii liniei. Valori posibile:
o numere ntregi pozitive care reprezint lungimea liniei, n pixeli;
o numere ntre 1 i 100 urmate de semnul %; reprezint procentul din
limea paginii pe care se ntinde linia;
size permite alegerea grosimii liniei. Valorile posibile sunt numere ntregi
pozitive reprezentnd grosimea liniei n pixeli (valoarea prestabilit este 2);
noshade definete o linie fr umbr;
color permite definirea culorii liniei

Tagul <table> (tabele)

Un tabel se insereaz ntre etichetele <table> i </table>.
Pentru inserarea unui rnd ntr-un tabel se folosesc etichetele <tr> i </tr> (tr = table
row)
Coloanele sunt introduse pe rnd pe cte o linie cu tag-ul <td> i </td> ( td = table
data).
Chenarul unui tabel se introduce cu atributul border din tag-ul table. n mod implicit un
tabel nu are chenar. Titlul unui table se introduce cu tag-ul <caption> text </caption>.
Atribute importante ale tag-ului <table>:
pentru a alinia un tabel se foloseste atributul align cu valorile posibile: left
(valoarea prestabilit), center i right.

36

pentru a adauga chenar unui tabel se utilizeaz atributul border care ia ca

valoare orice numr ntreg (inclusiv zero) i reprezint grosimea n pixeli a
chenarului tabelului.

Observaii:
Valoarea prestabilit a grosimii chenarului tabelului este de 1 pixel.
Dac valoarea grosimii chenarului este egal cu 0, atunci nu avem chenar.
Cteva exemple de creare a unor tabele:
Un tabel fr chenar

37

 Un tabel cu chenar

38

Alinierea tabelului n pagina Web

39

Precizarea culorilor de fond pentru un tabel

Culoarea de fond se stabilete cu atributul bgcolor.
Culoarea de fond poate fi ataat ntregului tabel prin eticheta <table>.
Culoarea de fond poate fi ataat unei linii de tabel prin eticheta <tr>.
Culoarea de fond poate fi ataat unei celule de tabel prin eticheta <td>.
Atenie:
Dac avem definite mai multe atribute bgcolor, se vor lua n considerare n ordinea :
<td>, <tr>, <table>. Tag-ul <table> are prioritatea cea mai mic.
Culoarea textului din fiecare celul se indic n tag-ul <font> text </font>
<td><font color=valoare></font></td>

40

Dimensionarea celulelor unui tabel

Distana dintre dou celule vecine se definete cu ajutorul atributului cellspacing al
etichetei table. Valorile lui cellspacing pot fi numere ntregi pozitive, inclusiv 0.
Valoarea prestabilit este 2.
Distana dintre marginea unei celule i coninutul ei se definiete cu atributul
cellpadding al etichetei <table>. Valorile lui cellpadding pot fi numere ntregi pozitive.
Valoarea prestabilit este 1.

Codul HTML care descrie tabelele de mai sus poate fi vzut n imaginea de pe pagina
urmtoare.

41

Dimensionarea unui tabel

Dimensiunile unui tabel limea i nlimea se stabilesc cu atributele width i
height ale etichetei <table>.
Aceste atribute pot lua valorile:
numere ntregi pozitive, reprezint limea, respectiv nlimea n pixeli a tabelului.
numere ntregi ntre 1 i 100, urmate de semnul %, reprezint o fraciune din limea,
respectiv nlimea, total a paginii.

42

Tagul <img> (imagini)

Formatele acceptate de browsere pentru fiierele de imagini sunt:
GIF (Graphics Interchange Format) extensia .gif
JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg
BMP (BitMap) cu extensia .bmp (este ntlnit numai cu browserul Internet
Explorer, etc.
Inserarea ntr-o pagin Web a unei imagine se face utiliznd eticheta <img> cu
atributul src, iar valoarea acestui atribut este adresa URL a imaginii.
Dac se dorete adugarea unui chenar n jurul imaginii se folosete atributul border al
etichetei <img> care poate lua valori numere ntregi pozitive.
Dimensiunile unei imagini pot fi modificate prin intermediul atributelor width i
height ale etichetei <img>.
Acestea pot avea ca i valori :
numere ntregi pozitive ce reprezint numrul de pixeli
numere de la 1 la 100 urmate de % ce reprezint procente din limea, respectiv din
nlimea blocului n care se afl imaginea.
Precizarea dimensiunilor spaiului ocupat de o imagine duce la creterea vitezei de
ncrcare a paginii.

43

Alinierea unei imagini n pagina Web

Alinierea se face prin intermediul atributului align al etichetei <img>, care ia
valorile:
left aliniere la stnga
right aliniere la dreapta
top aliniere deasupra. Partea de sus a imaginii se aliniaz cu partea de sus a
textului ce precede imaginea.
middle aliniere la mijloc
bottom sau baseline aliniere la baz

44

Alinierea textului n jurul unei imagini

Se face cu atributele hspace i vspace ale etichetei <img> care precizeaz distana
n pixeli pe orizontal i pe vertical, dintre imagine si elementele din pagin.

Imaginea pentru fondul unei pagini Web

Se poate folosi imaginea pentru a stabili fondul unei pagini Web cu ajutorul atributului
background al etichetei <body> care ia ca valoare adresa URL a imaginii.

45

46

Imagini ca legturi
Imaginea trebuie s apar ca element de legatur n cadrul tagulul <a> imagine </a>

Legaturi (link-uri)
Cu ajutorul legturilor, un text obinuit se transform n hipertext sau hipermedia.
Legturile sunt zone active ntr-o pagin Web.
Paginile Web sunt interactive deoarece au un rspuns la aciunile care sunt iniiate de
cei care le utilizeaz.
Legturile n pagina html se insereaz cu ajutorul etichetei speciale <a> i a atributului
href care ia ca valoare adresa URL a resursei solicitate.
Cnd mouse-ul este deasupra unei zone active, el ia forma unei mini. Calculatorul
client expediaz cererea , primete resursa pe care a solicitat-o pe care o va ncrca n
browser.
n acelai browser, pagina nou va fi nlocuit de cea veche.

Alegerea ntre dou pagini

47

Link ctre un site

Ancor aflat n acelai document

Acest lucru se realizeaz utiliznd perechea de tag-uri:
Sintaxa:
<a href=#etic> SALT </a>
.....
<a name = etic> AICI am facut SALT</a>
Semantica:
etic reprezint numele tag-ului ctre care se face saltul

48

Exemplu:

49

Ancor aflat n alt document

O pagin nou ntr-o fereastr nou

Stabilirea culorilor pentru legturi

Se utilizeaz trei culori pentru legturi:

o culoare pentru legturile nevizitate

o culoare pentru legturile vizitate

o culoare pentru legturile active

50

Acestea se stabilesc cu atributele:

link pentru legaturile nevizitate

vlink pentru legaturile vizitate

alink pentru legaturile active

Formulare
Despre formulare
Formularele HTML sunt cele mai frecvent utilizate pentru a colecta informaii de la
persoane care viziteaz site-ul. Un formular este un ansamblu de zone active alctuite din
butoane de apsat, casete de selecie, cmpuri de editare i altele.
O sesiune de lucru cu cu o pagin Web ce conine un formular cuprinde urmtoarele
etape:
1. Se completeaz formularul care se transmite unui server;
2. O aplicaie dedicat de pe server analizeaz formularul completat i eventual
se stocheaz datele ntr-o baz de date.
3. Eventual serverul expediaz un rspuns utilizatorului.
51

Tag-ul <form >

Un formular este delimitat de tag-ul <form>....descriere formular...</form>.
ntre tag-ul de intrare i cel de ieire sunt inserate, n principal controalele formularului.
Principalele atribute ale tag-ului form sunt:
action
method
enctype
target
Form-ul are 2 atribute importante: action i method.
Sintaxa:
<form action = valoare_a method = valoare_m> </form>
Semantica:
valoare_a poate lua ca i valoare:
adresa URL a unui script aflat pe server, care primete datele formularului; se
face o prelucrare a datelor i se expediaz un rspuns utilizatorului dac e cazul
adresa de email, caz n care datele formularului sunt transmise prin pota
electronic
valoare_m poate lua 2 valori:
get este valoare implicit (datele din formular se adauga la adresa URL
specifcata in action);
post (datele sunt expediate separat; se folosete cnd sunt transmise cantiti
mari de date ).
Exemple:
action = www/

Script
action = mailto: livia.sangeorzan@yahoo.com

Tag-ul <input>
Pentru a crea diferite butoane sau casete se folosete tag-ul <input>
Sintaxa:
<input type =

name =

value =

>

Semantica:
type
poate lua valorile urmtoare
text
radio (atributul checked selecteaz butonul la prima activare a paginii);
checkbox;
submit trimite
reset terge (reseteaz);

52

password parola (cnd scriem se vad asterixuri, dar la server

(destinatar) se vede totusi parola decodificata).
name este numele ataat casetei sau butonului. Nu reprezint coninutul butonului
sau casetei.
value este coninutul ce apare scris pe buton sau coninutul casetei sau n cazul
butoanelor radio numele butoanelor care fac parte din aceeai familie;

Alte atribute ale tag-ului input:

size - specific limea cmpului de editare;
maxlenght - specific maximul de caractere.
Dac ntr-un input lipsete atributul type, rezult implicit type = text.
Limbajul JavaScript va recunoate butoanele dup atributul name.

Liste de selecie <select>

<option >.

</select>

O list de selecie permite alegerea unuia sau mai multor elemente dintr-o list finit.
Are 2 atribute importante : name i size.
Elementele dintr-o list se introduc cu tag-ul <option>.
Sintaxa:
<select name = nume size = numar>
<option value = valoare_1 selected> Element_1
<option value = valoare_2 > Element_2
<option value = valoare_3> Element_3
</select>.
Semantica:
name
size
<option>
selected

numele listei de selecie

este un numr ntreg pozitiv i precizeaz cte elemente din list sunt
vizibile la un moment dat
este tag-ul care include elementele listei. Server-ul primete perechea
alctuit din coninutul din value i valoarea de dup tagul option
permite selectarea prestabilit a unui element al listei

Exemplul urmtor ilustreaz un formular care conine o list de selecie i dou

butoane.

Codul HTML aferent acestui exemplu se poate vizualiza n imaginea de mai jos.

53

Lista de selecie cu selecii multiple

Are aceeai sintax ca i lista de selecie descris mai sus, dar n plus are atributul
multiple n tag-ul select.

54

Cmpuri de editare multiple

Acest lucru se realizeaz cu tag-ul <textarea>
Sintaxa:
<textarea list de atribute> text </textarea>
Semantica:
Din lista de atribute enumerm:
cols (nr de caractere afiate ntr-o linie),
rows (nr de linii afiate simultan),
name (permite ataarea unui nume),
wrap care determin comportamentul cmpului de editare fa de sfritul de linie.
Atributul poate lua valorile: off, hard, soft.

ntre tag-ul de intrare i cel de ieire ale formularului sunt inserate, n principal,
controalele formularului. Un control este o form de interaciune a utilizatorului cu
formularul. Putem prezenta conform tabelului de mai jos principalele controale ntr-un
formular HTML prezentate mai sus:

55

CONTROL
ACIUNE A UTILIZATORULUI
text
Introducerea unui text de volum redus
password
Introducerea unui text de volum redus, care apare, pe ecran,
mascat cu "*"
submit
Activare (pentru a transmite informaiile completate de
utilizator)
reset
Activare (pentru a restabili valorile iniiale ale tuturor
controalelor formularului)
checkbox
Bifare
radio
Bifare
textarea
Introducere a unui volum mare de text
menu
Alegere a unei opiuni dintr-un meniu

TAG
Input
Input
Input
Input
Input
Input
Textarea
Select option

Evenimentele onfocus i onblur

O pagina poate conine mai multe elemente prin care putem introduce date. Dac
introducem un ir de caractere ntr-un cmp de editare spunem c respectivul element
primete focus-ul.
Evenimentul onfocus are loc atunci cnd un element primete focus-ul;
Evenimentul onblur are loc atunci cnd elementul pierde focusul.
Elementele care primesc focus-ul au dou metode importante:
metoda onfocus() atribuie focus-ul elementului
metoda onblur() face ca elementul s piard focus-ul.
Exemplu: ntr-o caset trebuie s se introduc un text; n cazul n care se face click,
far a introduce ceva, apare un mesaj, prin care se cere reintroducerea unei valori. Nu putem
pleca mai departe pna cnd nu am introdus ceva.

Codul HTML aferent acestui

exemplu se poate vizualiza n
imaginea de mai jos.

56

Hri de imagini
O imagine poate fi folosit ca i zon activ. n acest caz imaginea se insereaz n
documentul HTML ntre etichetele <a> i </a>.
Exist ns posibilitatea de a crea hri de imagini (image maps) care permit ca
diferite zone ale unei imagini s fie definite drept legaturi ctre diverse pagini WEB.
Crearea unei hri de imagini presupune trei etape:
Definirea unei imagini ca hart de imagini. Se va utiliza tag-ul <img> cu
atributele src i usemap. Numele dat pozei n usemap, precedat de semnul #, se
va regsi obligatoriu n tag-ul map, n atributul name.
Definirea hrii n interiorul unui bloc special definit cu tag-ul <map> i </map>.
Tag-ul are un atribut obligatoriu i anume name, care primete ca i valoare
numele hrii (numele din usemap)
Crearea zonelor pe hart. Fiecare zon se introduce cu eticheta <area>.
Eticheta <area> are trei atribute obligatorii:
1) shape care poate lua una din valorile:
rect (pentru zone de form dreptunghiular);
circle (pentru zone de form circular);
poly (pentru zone de form poligonal);
default (pentru poriunile imaginii care nu se ncadreaz n nici una
dintre categoriile anterioare)
2) coords determin coordonatele zonei
3) href primete adresa URL a paginii indicate de legatura zonei respective.
Valorile atributului shape:

57

rect coords=x1,y1,x2,y2 dreptunghi unde (x1, y1) este coordonata colului

stnga sus i (x2, y2) este coordonata colului dreapta jos.
circle coords=x1, y1,r (x1,y1) este centrul cercului de raz r.
Poly coords=x1,y1,x2,y2,...xn,yn poligonul cu vrfurile de coordonate
(x1,y1), (x2,y2), (x3,y3),....

Pentru obinerea automat a coordonatelor se poate folosi programul MAP This,

program care definete regulile pentru o imagine .gif sau .jpeg. Programul este freeware i se
poate descrca de pe Internet.

58

IV. Reguli CSS (Foi de stil n cascad)

CSS este un acronim pentru Cascading Style Sheets (foi de stil n cascad). CSS este
utilizat la mbuntirea prezentrii unei pagini Web (adic a modului n care browser-ul o
afieaz). CSS permite stabilirea proprietilor pentru elementele HTML utiliznd o gam
uria de valori. Avnd la dispoziie mai mult de 100 de proprieti, CSS este un instrument
avansat destinat proiectanilor Web pentru crearea de site-uri profesionale, care nu pot fi
construite folosind atribute HTML obinuite. n CSS exist posibilitatea s se aeze
elementele n poziiile dorite (alta dect cea n cazul fluxului normal).
n mod normal definiiile stilurilor sunt introduse n foi de stil (style sheet).
Stilurile au fost introduse n versiunea HTML 4.0.
Exist dou modaliti de a defini un stil prin:
sintaxa CSS (Cascading Style Sheets);
sintaxa limbajului JavaScript.
Una dintre caracteristicile fundamentale ale CSS este faptul c autorul poate ataa un
stil, iar cititorul paginii respective poate ataa altul, deci se obine un set de reguli n cascad.
n acest caz exist un set de reguli de prioritate care va decide care regul se va aplica.
Exist 4 tipuri de stiluri CSS.
Ordinea de utilizare a stilurilor este urmtoarea:
1
stilul implicit al navigatorului (browser default);
2
foi de stil externe (External style sheets, nume_fisier.*css);
3
foile de stil interne (din interirul elementului head)
4
stiluri specificate n marcajul de start al unui element HTML (inline
style).

Structura unei reguli CSS

O regul este format din dou pri principale: selectorul i declaraia.
Declaraia se afl ntre elementul { i elemental }. La rndul ei, declaraia este
format tot din dou pri: proprietatea i valoarea.
H1 { color: blue }
n exemplul anterior H1 este selectorul, { color: blue } declaraia cu proprietatea color
i valoarea blue.
n blocul <style>...</style> avem regulile CSS definite ca mai sus.
Deci definim mai nti, clasa de stiluri n interiorul blocului <style></style> care se
poate afla n blocul <head>...</head>.

Integrarea regulilor CSS ntr-un fiier HTML

<HTML>
<HEAD>
<TITLE> Exemplu </TITLE>
<STYLE TYPE=text/css>
H1 { color: green; }
</STYLE>
</HEAD>
<BODY>

59

<H1> Acest heading este verde datorit unei reguli CSS </H1>
</BODY>
</HTML>
n exemplul anterior regula CSS este specificat n interiorul fiierului HTML. Prin
aceast metod modificrile n cazul fiierelor mari devin greoaie de aceea se recomand
scrierea regulilor ntr-un fiier separat de unde s fie importate n fiierul HTML. Pentru
exemplificare editm un fiier pe care l denumim reguli.css. In acest fiier scriem H1 {
color: green }.Documentul HTML care import acest regulile din acest fiier este de forma
urmtoare:
<HTML>
<HEAD>
<TITLE> Exemplu de import </TITLE>
<LINK REL=stylesheet HREF=c:\reguli.css TYPE=text/css>
</HEAD>
<BODY>
<H1> Acest heading este verde datorit unei reguli importate </H1>
</BODY>
</HTML>

Gruparea selectorilor i a declaraiilor

Pentru a reduce dimensiunea fiierelor selectorii se pot grupa, separarea lor fcndu-se
prin virgul.
H1, H2, H3, P { font-family: helvetica }
Asemntor se pot grupa i declaraiile:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}

Class ca selector
O regul de genul H1 { color: blue } se aplic mereu cnd apare selectorul H1
indiferent dac vrem sau nu. Pentru a evita acest lucru se folosesc clasele.
Fie fiierul reguli.css, fiierul n care scriem regulile pe care le vom importa.
Sintaxa pentru definirea unei clase este urmtoarea: H1.clasa_noastr { color: red }
In fiierul HTML cnd vrem s aplicm regula respectiv scriem
<H1 CLASS=clasa_noastr> Heading rou </H1>.
Dac am scrie <H1> Heading obinuit </H1> nu se va mai aplica regula CSS, deci
textul Heading obinuit nu va mai aprea rou.
Clasa definit mai sus se poate aplica numai pentru H1.

60

Dac am avea <P CLASS=clasa_noastr nu se obine nici un efect. Totui se pot

defini clase generale astfel: .clasa_doi { color: blue }. O astfel de clasa poate fi aplicat
oricrui selector care suport specificarea unei culori.

ID ca selector
O construcie asemntoare cu CLASS este ID.

Sintaxa pentru definirea unui element ID este urmtoarea:

H1#z98y { letter-spacing: 0.5em }.
Un astfel de ID se poate aplica numai pentru H1 n felul urmtor:
<H1 ID=z98y>Wide text</H1>.
Pentru definirea unui ID care s poat fi aplicat oricrui selector declaraia se face
astfel: #z98y { letter-spacing: 0.3em }.Acest ID poate fi aplicat oricrui selector care suport
specificarea dimensiunii dintre litere.

Comentarii
Comentariile sunt asemntoare cu cele din limbajul de programare C.
EM { color: lime } /* un verde s te doar ochii */

Pseudo-clase i pseudo-elemente
Au fost introduse pentru adugarea unor faciliti suplimentare de formatare. Pseudoclasele i pseudo-elementele sunt recunoscute n cadrul regulilor CSS, dar nu sunt
recunoscute direct n fiierul HTML.

Pseudo-clasa anchor
Aceast pseudo-clas permite formatarea link-urilor din cadrul unui pagini web.
A:link { color: red }
/* link nevizitat */
A:visited { color: blue } /* link vizitat */
A:active { color: lime } /* link activ */
Prin aceste reguli toate link-urile din pagina HTML vor lua culorile specificate.
Pseudo-clasa anchor nu are efect dect asupra selectorului A, de aceea regula: A:link { color:
red } are acelai efect ca i :link { color: red }.De asemenea pseudo-clasele pot fi combinate
cu clasele obinuite astfel: A.clasa_mea:link { color: red }.

Pseudo-elemente
first-line
Permite specificarea unui anumit stil pentru prima linie dintr-un paragraf.
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>The first line of an article in Newsweek.

61

Presupunnd ca prima linie se termin dup cuvntul an n pagina web acest text va
apare sub forma:
THE FIRST LINE OF AN
article in Newsweek.
first-letter
Asemntor cu first-line acest pseudo-element permite specificarea unui stil pentru
prima liter dintr-un text.

Precedena regulilor
De multe ori se ntmpl ca ntr-un punct n cadrul unui fiier HTML s fie valabile
mai multe reguli CSS. Pentru a rezolva astfel de situaii trebuie stabilite nite reguli de
prioritate.
`important`
`Important` este un cuvnt rezervat prin care i se d unei reguli CSS o prioritate mai
mare dect unei reguli obinuite.
P { font-size: 12pt ! important; font-style: italic }
Reguli:
1) Regula care conine `! important` suprascrie o regul obinuit.
2) Specificitatea unui selector: selectorii mai specifici i suprascriu pe cei mai
generali. Specificitatea se obine prin concatenarea a trei numere: numrul de
atribute ID din cadrul selectorului (a), numrul de atribute CLASS (b) i numrul
de tag-uri din selector (c).
LI
{...} /* a=0 b=0 c=1 -> specificitate = 1 */
UL LI
{...} /* a=0 b=0 c=2 -> specificitate = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificitate = 3 */
LI.red
{...} /* a=0 b=1 c=1 -> specificitate = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificitate = 13 */
#x34y
{...} /* a=1 b=0 c=0 -> specificitate = 100 */
Pseudo-clasele sunt numrate ca i clasele obinuite, iar pseudo-elementele sunt
numrate ca i elementele obinuite.
n cazul n care dou reguli ajung s aib aceai specificitate se aplic regula
specificat mai trziu. Regulile importate se consider a fi naintea oricrei reguli din fiierul
n care sunt importate.

Stiluri in-line
Sunt definite n eticheta n care dorim s se aplice aceste stiluri.
Valoarea lui <style = valoare> este cuprins ntre ghilimele.

Stiluri definite n fiiere externe

Stilurile definite n interiorul blocului <style></style> pot fi scrise ntr-un fiier
extern, pentru a putea fi utilizate n mai multe fiiere HTML.
Se creeaz un fiier care conine descrierea stilurilor i se salveaz cu extensia .css.
n fiierul HTML care utilizeaz stilurile se include n blocul <head></head> o
etichet <link> cu atributele:
rel cu valoarea stylesheet
href cu valoarea adresa URL a fiierului creat, care conine regulile css.
62

Atribute CSS
Font
font-family
Valoarea: nume de font. Exemple: helvetica, serif, sans-serif,
cursive, monospace, fantasy, etc
BODY { font-family: gill, helvetica, sans-serif }
font-style Valoarea: normal | italic | oblique
font-variant Valoarea: normal | small-caps
font-weight Valoarea: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900. Valoarea: normal echivaleaz cu 400, iar bold cu 700.
font-size Valoarea: <absolute-size>|<relative-size>|<length>|<percentage>
absolute-size poate lua una din valorile: xx-small | x-small | small | medium |
large | x-large | xx-large
relative-size poate lua una din valorile: larger sau smaller
percentage

Exemple:
P { font-size: 120% }
H1, H2, H3 { font-style: italic }
Dimensiunile pentru font-size sunt specificate prin:
1. mrime absolut; avem urmatoarele valori posibile:
xx-small
x-small
small
medium (valoarea prestabilit)
large
x-large
xx-large
2.

mrime relativ fa de valoarea curent; avem urmatoarele valori posibile:

larger
smaller

3. numar ntreg urmat de unitatea de msur

4. procente din valoarea curent.
Exemplu:
P {font-size: 9px }
Dimensiunea fontului poate fi specificat n centimetri(cm), milimetri(mm), pixeli(px),
oli(in), puncte(pt 1pt=1/72in), etc.
1 in=72 pt=2.54 cm=6 pc

63

Background i culoare
Color - Valoarea culorii poate fi specificat prin RGB(rou,verde,albastru),
parametrii lund valori ntre 0 i 255, prin numele unei culori care este deja definit
(blue,green,black, etc) sau prin #nr1nr2nr3. Nr1,nr2,nr3 sunt numere de dou cifre
n baza 16.
H2 { color: rgb(255,0,0) }
H3 { color: #00FF6A }
background-color - Valoarea: <color> | transparent.
background-image - Valoarea: <url> | none
background-repeat - Valoarea: repeat | repeat-x | repeat-y | no-repeat Precizeaz
dac imaginea din fundal este repetat sau nu. Pentru valoarea repeat imaginea
este multiplicat pe orizontal i vertical. Pentru valoarea repeat-x imaginea este
multiplicat numai pe orizontal,iar pentru repeat-y imaginea este multiplicat
doar pe vertical.
background-attachment - Valoarea: scroll | fixed Specific dac imaginea din
fundal este derulat odat cu coninutul sau nu.
Text
word-spacing Valoarea: normal | <lenght> (dimensiunea dintre cuvinte)
letter-spacing Valoarea: normal | <lenght> (dimensiunea dintre litere)
text-decoration Poate lua una din valorile: underline, overline, line-through, blink.
vertical-align Valoarea: baseline | sub | super | top | text-top | middle | bottom | textbottom | <percentage>
text-transform Valoarea: capitalize | uppercase | lowercase | none
text-align Valoarea: left, right, center, justify
Distana dintre rnduri
Se folosete atributul line-height. Valori posibile:
valoarea normal
factor de scal
prin lungime
prin procente din valoarea curent a fontului

Stiluri pentru diferite medii

Se tie c un text afiat pe monitor cu culoarea galben se vede foarte slab atunci cnd
este tiprit la o imprimant alb-negru. Aceast deficien poate fi corectat dac se utilizeaz
stiluri potrivite pentru fiecare mediu. Mediul pentru care este valabil un stil este specificat
prin atributul media al elementului <style>, care poate lua urmatoarele valori posibile:
screen (pentru monitoare)
print (pentru imprimante)
projection (pentru proiectoare video)
braille (pentru terminale destinate nevztorilor)
speech (pentru terminale audio)
all (pentru toate tipurile de medii)

64

Exemplu:
<html>
<head><title> Exemplu MEDIA</title>
<style type-text/css media=screen>
p {color: yellow;}
</style>
<style type=text/css media=print>
p {color: black;}
</style>
</head>
<body>
<p> Acest paragraf va avea culoarea galbena pe monitor si culoarea neagra la
imprimare.
</body>
</html>

Configurarea blocurilor de text

Dimensiunile unui bloc:
Un bloc este format din:
coninut
distana dintre coninut i chenar
chenar
margini
Marginile blocului
Marginile unui bloc reprezint distana minim dintre chenarele a dou blocuri vecine.
Pentru a stabli marginile unui bloc se utilizeaz atributul:
margin-left
margin-right
margin-top
margin-bottom
margin.
Dac sunt indicate pentru proprietatea margin valori separate prin spaiu, acestea
reprezint dimensiunile n ordinea urmatoare: sus, dreapta, jos, stnga.
Dimensiunile care lipsesc preiau valorile de la elementele opuse.
Dac este dat o singur valoare, aceasta va fi folosit pentru toate direciile.
Valorile posibile ale acestor atribute sunt:
auto
marime (numr urmat de o unitate de msur)
procent din limea paginii (numr ntreg ntre 0 i 100, urmat de simbolul %)
Observaii: Valorile menionate anterior pot fi i negative.
Distana dintre coninut i chenar
Cu ajutorul atributelor de mai jos se stabilete distana dintre coninutul unui bloc (text,
imagini, etc) i chenarul acestuia.
Atribute:

65

padding-top
padding-right
padding-bottom
padding-left
padding

Valori posibile ale atributelor sunt:

Mrimea (numr ntreg pozitiv)

Procent din limea paginii

Limea chenarului
Atribute:
Border-top-width
Border-right-width
Border-bottom-width
Border-left-width
Border-width
Valori posibile:
thin, medium sau thick
Numere ntregi pozitive urmate de o unitate de msur
Stilul chenarului
Cu ajutorul atributului border-style.
Valori posibile:

none (valoarea prestabilit)

solid (continuu)
double (linie dubl)
inset (chenar 3D)
outset (chenar 3D) etc.

Culoarea chenarului
Cu ajutorul atributului border-color.
Valori posibile:
none (niciuna)
un nume de culoare (aqua, red, blue, etc.)
specificaie numeric de tip RGB
funcia (r, g, b) cu valori ntre 0 i 255
funcia (r, g, b) cu procente ntre 0% i 100%

66

Exemplificm utilizarea regulilor CSS

Exemplu de stil definit n seciunea head

Alt exemplu de stil definit n seciunea head

Codul aferent acestui exemplu se poate vizualiza n imaginea de mai jos

67

Stiluri identificate cu ajutorul id-ului

68

Stiluri inline

Stil definit ca fiier extern

69

Exemplu de stiluri pentru font:

70

Exemplu de culoare a fontului pentru tag-urile p, b i h1

71

Exemplu de stil pentru culoarea fontului textului

72

Exemplu de imagine cu stil

73

Exemplu de stil pentru distana dintre rndurile de text

74

Exemplu de stil pentru grosimea fontului

75

Exemple stiluri pentru chenare

76

Alt exemplu cu chenare

77

Exemplu de creare a unui meniu de navigare cu ajutorul stilurilor

Vom observa c meniul s-a realizat doar cu ajutorul unei liste neordonate i al stilurilor

78

V. JavaScript
Limbajul JavaScript a fost realizat de firmele Netscape i Sun i a fost conceput ca un
limbaj care extinde posibilitile de lucru ale HTM-ului. Acest limbaj conlucreaz cu HTMLul.
Avantajele utilizrii limbajului JavaScript

JavaScript poate fi nglobat n HTML

Codul JavaScript este gzduit n documente HTML i executat din interiorul lor.
JavaScript folosete HTML ca modalitate de a sri n cadrul de lucru al aplicaiilor pentru
Web i-i extinde capacitile normale, asigurnd evenimente pentru etichete HTML i
permind acestui cod condus de evenimente s se execute din interiorul su.

JavaScript este dependent de mediu

JavaScript este un limbaj de scriptare. Software-rul care ruleaz programul JavaScript
scris este motorul de intrepretare din mediu - NetscapeNavigator, Microsoft Internet Explorer
sau unul din motoarele pe parte de server. Cnd este inclus ntr-un document HTML,
JavaScript depinde de browser pentru a fi recunoscut Dac browserul nu l recunoate,
programul va fi ignorat sau mai ru, poate fi afiat ca text pe pagina.

JavaScript este un limbaj interpretat

JavaScript fiind un limbaj de scriptare este interpretat de browser nainte de a a fi
executat. JavaScript nu este compilat n binary - ca un fiier EXE, ci rmne parte a
documentului HTML la care este ataat. Dezavantajul unui limbaj interpretat este c
executarea limbajului de baz dureaz mai mult, deoarece browserul compileaz
instruciunile n timpul rulrii chiar nainte s le execute. Avantajul const n faptul c este
mult mai uor de actualizat codul surs.

JavaScript este un limbaj flexibil n privina tipului de date

JavaScript difer mult de limbajele stricte n privina tipului de date, JavaScript este
mult mai flexibil. Variabilele de un anuit tip pot fi declarate, dar nu este obligatoriu ca acest
lucru s fie fcut. Se poate lucra cu o variabil chiar dac nu i se cunoate tipul specific
nainte de rulare.

JavaScript este un limbaj bazat pe obiecte

Netscape i alii se refer la JavaScript ca un limbaj de programare orientat spre
obiecte (OOP), dar aceasta este o deformare a adevratului neles al sintagmei OOP.
JavaScript este un limbaj bazat pe obiecte. n cadrul limbajului JavaScript se lucreaz cu
obiecte care ncapsuleaz date (proprieti) i comportamente (metode), dar acestea nu pot fi
subclasate. Modelul de obiect JavaScript este bazat pe instan, nu pe motenire.

79

JavaScript este condus de evenimente

Codul JavaScript scris ntr-o aplicaie Web poate rspunde la evenimente generate de
utilizator sau de sistem. n sine, limbajul JavaScript este echipat pentu a trata evenimente.
Obiectele HTML, de exemplu butoanele sau cmpurile de text, sunt mbuntite pentru a
accepta handlere de evenimente.
JavaScript nu este Java
Java i JavaScript au fost create de dou companii diferite i motivul principal pentru
similitudinea denumirilor este legat exclusive de marketing. Exist numeroase deosebiri ntre
Java i JavaScript. n primul rnd, dac JavaScript este strns legat de HTML, o miniaplicaie
Java este conectat la un document HTML prin eticheta <applet>. Java este folosit pentru
miniaplicaii sau pentru aplicaii complexe, pe cnd JavaScript este folosit n primul rnd
pentru scripturi. Sintaxa limbajului JavaScript aduce cu sintaxa limbajului Java.

JavaScript este multifuncional

JavaScrip are o mulime de faete i poate fi folosit n multe contexte pentru a oferi
soluii la probleme din Web. Principalele scopuri ale limbajului JavaScript sunt:
o nfrumuseeaz i anim paginile HTML statice prin efecte speciale,
animaii i manete;
o valideaz date, fr a trece totul serverului;
o are un rol important n aplicaii client/server pentu Web;
o permite dezvoltarea de aplicaii pe parte de client;
o slujete ca i legtur pe partea de client ntre obiecte HTML, miniaplicaii
Java, controale ActiveX i module plug-in Netscape.

JavaScript evoluaz
JavaScript continu s evolueze ca limbaj.

JavaScript acoper diverse cotexte

JavaScript este un limbaj de scriptare. Programatorii Web se ndreapt mai ales spre
scriptarea pe parte de client. JavaScript este un limbaj nativ pentru instrumente de dezvoltare
Web.

Carateristici ale limbajului JavaScript

n JavaScript se scriu secvene de program numite scripturi. Majoritatea acestor

secvene sunt alctuite din funcii, care rspund anumitor evenimente.
n JavaScript NU se citesc i NU se scriu fiiere;
JavaScript este un limbaj interpretat. Asta nseamn c browserul preia o
instruciune, o execut, apoi preia o alt instruciune i o execut, .a.m.d.
JavaScript este un limbaj care utilizeaz obiecte;
n JavaScript se face distincie ntre literele mari i literele mici, adic este un
limbaj case sensitive.
80

Erorile de sintax se depisteaz greu, drept urmare se poate folosi funcia alert ( ).
Folosete din sintaxa lui C++ i a limbajului Java
JavaScript lucreaz cu funcii definite de programatori sau/i cu funcii predefinite

Conlucrarea dintre HTML i JavaScript

JavaScript ofer capacitarea de a face paginile statice s devin interactive i mai
prompte fa de aciunle utlilizatorilor i de intrrile acestora.
JavaScript pemite utilizatorilor in Web s creeze pagini dinamice, prin nglobarea unui
script n structura HTML existent. n felul acesta se pot plasa procese n spatele butoanelor,
se pot efectua calcule cu datele introduse prin formulare, sau se pot efectua aciuni atunci
cnd utilizatorul trece cursorul mouse-ului peste un element HTML sau peste un obiect
Document.
JavaScript ofer avantaje fa de documentele interactive bazate pe server, deoarece n
general documentele bazate pe JavaScript nu sunt dependente de prelucrarea pe parte de
server, astfel c pot rspunde mai rapid la interaciunile i cererile utilizatorului.
Inglobarea instruciunilor JavaScript n HTML
Scripturile JavaScript sunt integrate ntr-un document HTML folosind perechea de
etichete <script> i </script>. Atributul type este folosit pentru a specifica numele fiierelor
surs JavaScript externe.
Atributele etichetei script sunt:
Defer - atribut Boolean folosit pentru a anuna browserul dac scriptul din
aceast seciune genereaz un coninut;
Language - atribut depreciat, care este utilizat pentru a specifica limbajul i
versiunea folosite ntre etichete;
Src - atribut care specific locaia URL a unui fiier JavaScript surs extern;
Type - atribut care a nlocuit atributul language i care anun browserul ce
limbaj se folosete ntre etichete.
n concluzie exist trei modaliti de a introduce un script JavaScript ntr-un document
HTML, i anume:
1. Scriptul se scrie in head; .<script language=JavaScript > si</script>;
2. Scriptul se scrie in body; .<script language=JavaScript > si</script>;
3. Scriptul apare ca si fisier extern cu extensia js, deci nume.js;
<script src = nume.js > si</script>
Executarea scripturilor
Executarea unui script JavaScript ncepe n momente diferite, n functie de felul n
care este scris. Dac scriptul afecteaz coninutul de pe pagin, aa cum se ntmpl prin
folosirea instruciunii document.write(), este executat pe msura ce este ntlnit. Exist de
asemenea un handler de eveniment, onLoad, care este executat numai dup ce documentul
HTML a fost complet ncrcat n browser.

81

Dac scripturile JavaScript sunt stocate ntr-un fiier separat, ele sunt de asemenea
evaluate atunci cnd se ncarc pagina i nainte s aib loc vreo aciune.
Toate instruciunile JavaScript aflate n blocul unei funcii sunt interpretate, iar
executarea nu se petrece pan ce funcia nu este apelat dintr-un eveniment JavaScript.
Instruciunile JavaScript care nu se afl n blocul unei funcii sunt executate dup ce
documentul se ncarca n browser, practic pe msura ce este redat. Rezultatul executrii
acestor instruciuni va fi vizibil pentru utilizatori atunci cand vd pentru prima dat pagina.

a. Limbajul JavaScript
JavaScript este un limbaj de nivel nalt, bazat pe obiecte, conceput pentru a le permite
utilizatorilor i programatorilor n Web s creeze cu uurin documente Web interactive. El
ofer caracteristicile eseniale ale unui limbaj orientat spre obiecte, fr caracteristicile
complicate care nsoesc alte limbaje, ca Java i C++.
Vocabularul relativ restrns al limbajului JavaScript este uor de neles, oferind n
acelai timp mai multe posibiliti inaccesibile anterior.

b. Tipuri de date i variabile

n JavaScript exist urmtoarele tipuri de date: tip sir; tip numr ntreg; numr ntreg n
baza 10, 8 sau 16.
O variabil se poate declara cu particular var.
O variabil poate primi orice valoare, nu se declar tipul ei.

Operatori aritmetici : +, -, * /, %
++ ,-- , + (operator unar), - (operator unar)
Operatori relationali : <, <=, >, >=

Operatori de egalitate = = pentru test egalitate

!=

pentru test inegalitate

Operatori logici

! (negarea logic)
|| operatorul logic sau (este operator binar): dac cel puin
unul dintre operanzi este true, rezult true, altfel rezultatul este false
&& operatorul logic i

Operatori logici pe biti << ,>> operatori de deplasare

& - i pe bii
| - sau pe bii
- sau exclusiv pe bii
~ - negarea pe bii- are rolul de a inversa continutul biilor
Operatorul , (virgul)
Operatorul condiional : exp1 ? exp2 : exp3;

Operatorul de concatenare
Operatorul de concatenare pentru iruri este +

82

c. Instruciuni
Instruciunile urmtoare au aceeai sintax i semantic precum n limbajul Java:

IF

Compus ( {.} )

Switch;

While;

Do While

For

d. Funcii predefinite

alert ( mesaj) afieaz o caset n care se afieaz mesaj

confirm( mesaj) caseta afieaz date de tip ir. Utilizatorul poate
apsa butonul OK, caz n care se returneaz valoarea true, sau Cancel,
caz n care se returneaz valoarea false
prompt ( sir_afisat, sir_asteptat) caseta afieaz sir_afisat i ateapt
introducerea valorii n sir_asteptat. Sir_asteptat poate fi iniializat cu
zero.
escapes(s)
eval(s) - s este un String care conine operaii matematice (de
ex.:.2+4). Funcia returneaz rezultatul acestei operaii, n acest caz 6.
Dac nu este vorba despre o expresie calculabil, atunci se returneaz un
mesaj de eroare.
isFinite(n) - decide dac nr. n este finit
isNaN(x) - verific dac valoarea x este un nr. valabil (not-a-number).
Funcia returneaz valoarea true, daca x e un nr.
Number(x) - convertete coninutul obiectului x n nr. i l returneaz
parseInt (sir) convertete un ir ctre un ntreg. Conversia se face
pna cnd este ntlnit un character care nu este cifr;
parseFloat(sir) - convertete un ir ctre o valoare real. Conversia se
face pna cnd este ntlnit un caracter care nu este cifr. Punctul este
considerat a fi virgula zecimal.

n JavaScript putem introduce un text n mod dinamic.

n JavaScript putem introduce i tag-uri HTML.
De exemplu putem scrie: document.write(<b>+ text + </b>).

83

Exemplificri utiliznd JavaScript:

Aplicaie_1:

84

Aplicaie_2:

85

Evenimente
Una dintre caracteristicile-cheie ale limbajului JavaScript este capacitatea de a
intercepta un numr limitat de aciuni, cunoscute ca evenimente. Un eveniment este o
aciune, care apare la un moment dat i n urma creia este declanat execuia unei anumite
pri din program. Ori de cte ori vizitatorul face click pe o legtur, de exemplu, cnd
introduce un text sau chiar cnd trece cu mouse-ul deasupra unei zone a paginii, survine un
eveniment la care scriptul reacioneaz genernd un rspuns.
Obiecte
Folosind limbajul JavaScript, se pot defini obiecte proprii, dar limbajul pune la
dispoziie o ierarhie de obiecte predefinite, respectnd modelul DOM (Document Object
Model care este un pachet de interfee conceput de W3C). Elementul de legtur ntre
JavaScript i DOM este obiectul Document, ce implementeaz interfaa Document din DOM.

Legtura dintre limbajul JavaScript i elementele dintr-un formular

JavaScript creaz o ierarhie de obiecte predefinite, respectnd modelul obiect document
(DOM). Astfel coninutul fiecruit tag- HTML sau regul CSS pot fi modificate.
Aceast ierhie prezentat de navigatorul Netscape- este ilustrat n figura de mai jos
[3]:

Fiecrui nivel din ierarhia de mai sus putem spune c i corespunde o serie de noduri.
Astfel avem nodul document, cu subnivele/subnoduri aa cum este artat n imaginea de mai
sus.
86

Pornim de la o aplicaie concret: Fie un formular care are structura conform imaginii
de mai jos:

JavaScript recunoate elementele din pagina WEB n dou moduri:

dup atributul name al fiecrui tag, ncepnd cu tag-ul <form> i continund cu
elementele acestuia;
dup numele implicit alocat elementelor din pagin. Elementele de acelai fel sunt
stocate ntr-un vector (array[i]) a crui index ncepe cu valoarea zero.
Pentru formularul de mai sus JavaScript creaza o structur arborescent conform
poziiei ocupat de fiecare element n pagin.

87

Pagina se numete document, adic ne referim la nodul document.

Astfel structura arborescent arat astfel:
document
_______________________________________________

images [0]
forms[0]
links[0]
images[1]
___________________

elements[0] elements[1] elements[2]

n-un document HTML set crea mai multe formulare, iar acestea se vor numi implicit
forms[0], forms[1],etc.
Elementele fiecrui formular vor fi denumite elements[0], elements[1],etc.
Imaginile dintr-o pagin vor fi numerotate ncepnd cu prima imagine din pagina cu
numele images[0], images[1],etc.
Link-urile dintr-o pagin vor fi i ele numerotate ncepnd cu indexul 0, cu numele
links[0], links[1], etc.
Pentru a accesa primul element din formular vom scrie una dintre urmtoarele secvene
n JavaScript:
1. document . forms [0]. elements[0]
2. document.f1.nume aceast expresie se folosete n cazul n care formularul este
descris conform secvenei de cod de mai jos:
<form name="f1">
Imagine_1 <br><img src=c:\CURS_WEB_ID_FINAL\s.jpg> <br>
Nume&nbsp&nbsp&nbsp&nbsp&nbsp:<input
type
="text"
value=""><br>
Prenume :<input type ="text" name="prenume" value=""><br>
<input type="submit" value=" OK " ><br><br><br>
Imagine_2 <br><img src=c:\CURS_WEB_ID_FINAL\s.jpg>
<br><br> <a href="l.html"> <i>WWW.GOOGLE.COM </i></a>
</form>

name="nume"

Cutarea tag-urilor
Pentru a putea manipula informaia dintr-un element (tag) HTML este necesar ca mai
nti s se obin o referin la acel element. n acest scop se pot folosi urmtoarele
metode:
document.getElementById( )- returneaz un element, identificat dup atributul
id.W3C recomand ca pentru identificarea elementelor s se foloseasc id;
document.getElementByName() - returneaz un element, identificat dup atributul
name.;

88

document.getElementsByTagName() - returneaz o list de elemente, identificate

dup numele tag-ului.
Dup localizarea unui element, se poate explora structura arborescent ncepnd cu acel
punct, folosind proprieti ale obiectului precum: parentNode, firstChild, nextSibling etc.
Manipularea tag-urilor/ nodurilor/ elementelor
Dup obinerea unei referine la un element, se pot manipula diversele proprieti ale
acestuia. Un exemplu n acest sens sunt atributele CSS care se pot modifica prin intermediul
proprietii style. Exist i o excepie: float. Acesta este un cuvnt rezervat n JavaScript, deci
nu se poate folosi element.style.float, dar se poate folosi element.style.cssFloat.
Crearea de noi tag-uri/noduri /elemente
Exist cel puin dou tipuri diferite de noduri, astfel avem : nodurile element i nodurile
de text. Acestea se creaz folosind metodele
document.createElement() - pentru elemente;
document.createTextNode() - pentru nodurile de text.
Metoda appendChild() adaug un nod fiu nodului pentru care este invocat. Metoda
pereche este removeChild() care permite tergerea unui nod fiu. Crearea unui nod se poate
face i prin alt metod, folosind metoda document.write(), dar datorit faptului c exist
posibilitatea de a introduce orice, chiar i cod prost structurat, aceast metod poate crea
probleme serioase, n special n cazul documentelor XML. Din aceast cauz, funcia nu are
nici un efect n documentele XHTML (i introducerea ei genereaz mesaje de eroare). n
cazul XHTML, singura modalitate de a manipula structura documentelor via JavaScript este
DOM.
Preluarea coordonatelor la apsarea unui click al mouse-ului cu ajutorul
JavaScript
JavaScript permite preluarea de coordonate n momentul n care se efectuaz click pe o
anumit imagine. Acest lucru este realizat cu ajutorul obiectelor Event care sunt create
automat ori de cte ori are loc un eveniment. Exist un numr de proprieti asociate unui
obiect Event care pot fi interogate pentru a afla informaii suplimentare despre obiectul
Event. Dintre aceste proprieti fac parte i Event.pageX i Event.pageY n care sunt reinute
coordonatele X i Y n pixeli ale cursorului, relativ la pagina curent, n momentul n care s-a
produs evenimentul. Cu ajutorul acestor dou proprieti ale unui obiect de tip Event se poate
calcula poziia mouse-ului asupra imaginii, n momentul n care s-a efectuat un click asupra
acesteia.
Desenarea unor figuri geometrice cu ajutorul limbajului JavaScript
Librria JavaScript Vector Graphics furnizeaz capabiliti de realizare a graficii petru
JavaScript: funcii de desenare dinamic a cercurilor, elipselor, liniilor oblice i a
poligoanelor (de exemplu triunghiuri, dreptunghiuri). Utilizarea librriei Vector Graphics
poate poate fi uoar chiar i n cazul n care un utilizator nu are experien n lucrul cu
JavaScript. Aceast librrie const dintr-un script JavaScript numit wz_jsgraphics.js.

89

n limbajul HTML nu exit elemente ca linii oblice, elipse, cercuri sau alte elemente de
acest gen.
Funcionalitatea acestei librrii este redus la urmtorele browsere Web: GeckoBrowsers, Internet Explorer 4, 5 and 6, Opera 5, 6 i 7+, pentru sistemul de operare
Windows.

Eventhandler
Handler-ele de evenimente sunt introduse n <form> ca atribute suplimentare n tagurile
HTML. Ca valoare pentru aceste atribute, sunt date instruciuni JavaScript, care trebuie
executate. Handler-ele de evenimente se recunosc dup numele lor. Acestea ncep, de
exemplu, cu onClick.
Nr
crt

EVENTHANDLER
onAbort
onBlur
onChange
onClick

onDblClick
onError
onFocus
onKeydown
onKeypress
onKeyup
onLoad
onMousedown
onMousemove
onMouseout
onMouseout
onMouseup
onReset
onSelect
onSubmit
onUnload
javascript

TAGURILE HTML PERMISE

img
a, area, button, input, label, select, textarea
Input, select, textarea
a., abbr, acronym, address, area, b, big,
blockquote, body, button, caption, center, cite,
col, colgrouzp, dd, del, dfn, dir, div, dl, dt, em,
fieldset, form, hx, hr, I, img, input, ins, kbd,
label, legend, li, link, map, menu, noframes,
noscript, object, ol, optgroup, option, p, pre, q,
s, samp, select, small, span, strike, strong, sub,
sup, table, tbody, td, textarea, tfoot, th, thead, tr,
tt, u, ul, var
Vezi onClick
img
a, area, button, input, label, select, textarea
Vezi onClick
Vezi onClick
Vezi onClick
body, frameset
Vezi onClick
Vezi onClick
Vezi onClick
Vezi onClick
Vezi onClick
form
Vezi onClick
form
Frameset, body
A , area

Fie urmtorul exemplu:

S se scrie un text ANTETUL MEU folosindu-se culoarea verde. Cnd se trece cu mouseul deasupra acestui cuvnt acesta s se transforme n cuvntul ANTET! scris cu negru.

90

Totodat s se scrie un text n caseta care apare pe ecran, iar textul scris s fie afiat ntr-o
csu alert, atunci cnd se face click n afara casetei, pe ecran.
Soluia este dat n figura de mai jos.

91

Aplicaie folosind Eventhandler

Obiecte
n limbajul JavaScript sunt multe obiecte predefinite; acestea dispun de proprieti i
metode specifice, care se pot folosi direct. n exemplele oferite sunt folosite obiectele
window i document, mpreun cu metodele lor, fr ca acestea s fie specificate explicit.
Obiectele sunt ordonate ntr-o structur ierarhic, la vrful ei afndu-se obiectul
window. Si descrie fereastra actual a browserului. Pe treapta urmtoare se afl obiectul
document, care descrie coninutul paginii. Pe treapta urmtoare se afl obiectul form. Pe
lng aceste obiecte, exist o serie de alte obiecte.
Pentru a putea folosi un obiect, trebuie ca acesta s fie mai nti creat cu ajutorul
cuvntului cheie new (vezi limbajul Java). Astfel pot fi apelate ulterior diferite proprieti
i metode.
Aplicaie:
S se creeze un obiect Data i s se foloseasc o metod a acestui obiect (de ex.
getDate(), pt a se afla ziua curent).
Codul surs i efectul pe ecran se regsesc n imaginile urmtoare :

92

Obiectul window
Obiectul Window corespunde ferestrei curente din browser i cu ajutorul lui se pot
afla/modifica proprietile ferestrei. Exist posibilitatea de a deschide ferestre noi.
Obiectul window este cel mai de sus obiect din ierarhia obiectelor JavaScript.
Corespunde ferestrei curente din browserul web. Prin acest obiect se pot afla prorietile
ferestrei curente. Exist i posibiltatea de a deschide ferestre noi. Aa-numita fereastr
principal a browserului web se poate apela prin numele rezervate window sau self.
Proprieti ale obiectului window:
Nr.
crt.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

PROPRIETATE
closed
defaultStatus
innerHeight
innerWidth
locationBar
menuBar
name
outerHeight
outerWidth
pageXOffset
pageYOffset
personalBar
scrollBar
statbar
status
toolbar

ACCES
read
read, write
read, write
read, write
read
read
read, write
read, write
read, write
read
read
read
read
read
read, write
read

Aplicaie_1:

Codul surs l putei observa n imaginea de mai jos.

93

Aplicaie_2:

94

Metode prin care se poate apela obiectul window:

Nr.
crt.
1
2
3
4
5
6
7
8
9

11

12
13
14
15

16

METODA

DESCRIERE

alert(s)
blur()
clearIntervall(p)

Returneaz Stringul s ca text ntr-un dialog-box.

Face fereastra inactiv.
Termin un eveniment/proces infint, inceput cu setIntervall(). p
este parametrul in care a fost salvat rezultatul din setIntervall().
clearTimeout(p)
Termin un Timeout care a fost nceput cu setTimeout().p este
parametrul in care a fost salvat rezultatul din setTimeout().
close()
Inchide fereastra.
confirm(s)
Returneaz Stringul s ca text ntr-un dialog-box., care este
prevazut cu butoanele de ok si cancel.
moveBy(x,y)
Mut o fereatra in directia (x,y)-pixeli (orizontal(x) sau vertical
(y)). Un nr. negativ mut fereastra nspre stnga-sus.
moveTo(x,y)
Mut fereastra la coordonatele x,y pixeli.
open(p1,p2,p3)
Deschide o nou fereastr. Al 3-lea parametru e optional.
p1: adresa (URL) unui fiier , care se vrea deschis n
fereastr.(Un String gol deschide o fereastra goala)
p2: Numele ferestrei
p3: (optional) Date despre cum arat fereastra. Mai multe
propieti se despart prin virgul
prompt(p1,p2)
Creeaz un dialogbox cu 2 butoane analog metodei confirm() i
un cmp de text (textfield), n care utilizatorul face propriile
remarci.
p1 e un String, care apare n dialogbox
p2 este textul acre apare prima dat n cmpul de text.
resizeBy(x,y)
Mrete fereastra cu x pixeli la dreapta i cu y pixeli n jos. La
valori negative, fereastra se micoreaz.
resizeTo(x,y)
Mrete fereastra la o marime de x pixeli n direcie orizontal i
cu y pixeli n direcie vertical.
scrollTo(x,y)
Duce (scroll) fereastra la o anumit poziie care e dat de coord. x
i y.
setIntervall(p1,p2) Ruleaz o instruciune ntr-un ritm dinainte dat pn cnd e oprit
de clearIntervall()
p1: instruciune sau funcie JavaScript care trebuie executat.
p2: Valoare in milisecunde, pn cnd se execut p1.
setTimeout(p1,p2) Ruleaz o instruciune n funcie de un anumit timeout.
p1: instruciune sau funcie JavaScript care trebuie executat.
p2: Valoare in milisecunde, pn cnd se execut p1.
Direct din acest obiect sunt derivate obiectele document, event, history u. location.

Obiectul location

95

Obiectul location ne d adresa HTML-ului local. Cnd o pagin este incarcata (de
exemplu http://www.xyz.com/page.html) atunci location.href conine adresa . Pentru
location.href i putem atribui noi o adres.
Acest buton button aduce o nou pagin n fereastra actual (Window)
Aplicaie:

Obiectul document
Acest obiect se refer la coninutul unei ferestre dintr-un browser.
n tabelul urmtor sunt metodele obiectului document:
Nr.
Crt.
1
2
3
4
5
6

PROPRIETATE
alinkColor
bgColor
cookie
fgColor
lastModified
linkColor

DESCRIERE
culoarea unui link pe care s-a dat click
culoarea de fundal
posibilitatea de a citi si de a scrie cookie-uri
culoarea textului (foreground)
data si ora ultimei modificri
culoarea linkurilor care nu au fost nc vizitate

96

ACCES
read, write
read, write
read, write
read, write
read
read, write

referer

title

9
10

URL
vlinkColor

adresa URL de la care a fost chemat pagina

curent
titlul unui fisier HTML, aa cum apare el n
tagul <title>
adresa completa a documentului curent
culoarea linkurilor care au fost vizitate

read
read
read
read, write

Metode care stau la dispoziie:

Nr.
Crt.
1
2

close()
open()

3
4

write(s)
writenln(s)

METODA

DESCRIERE
Inchide un document care a fost deschis cu metoda open()
Deschide un document pt scriere. Nu se desschide o nou
fereastr, documentul actula se va suprascrie
Scrie Stringul s n documentul actual
Analog metodei write(), doar c se trece la linie nou

Obiecte derivate din obiectul document: all, anchors, applets, areas, embeds, forms,
images, layers, links, plugins.
Aplicaie:

97

Obiectul forms
Acest obiect pune la dispoziie metode i proprieti care permit accesul la un formular
definit n interiorul unui fiier HTML
Accesul la un formular se poate face prin 3 metode:
1. Prin numele formularului - <form name=FormNAME>
Acces : document.FormNAME.reset()
2. Prin indexul formularului. Primul formular primeste 0 etc.
Acces : document.forms[4].reset()
3. Prin numele formularului ca indicator al indexului. Numele se d cu atributul name
din tagul <form>
Acces : document.forms[FormNAME].reset()
Proprieti ale obiectului forms:
Nr.
Crt.
1

action

encoding

3
4

length
method

name

target

PROPRIETATE

DESCRIERE
retine cuvntul/valoarea stabilit/ n
atributul action din tagul <form>
retine cuvntul/valoarea stabilit/ n
atributul encoding din tagul <form>
reine nr. formularelor dintr-un fisier
retine valoarea stabilit/ n atributul
method din tagul <form>
retine cuvntul/valoarea stabilit/ n
atributul name din tagul <form>
reine numele frame-ului care s devin
activ dup trimiterea unui formular

ACCES
read, write
read, write
read
read, write
read, write
read, write

Metode ale obiectului forms:

Nr.
Crt.
1

reset()

submit()

METODA

DESCRIERE
Sterge toate datele introduse ntr-un formular, si are aceeai
funcie ca butonul care se introduce cu atributul type=reset
Trimite un formular, si are aceeai funcie ca butonul care
se introduce cu atributul type=submit

n continuare va fi prezentat o aplicaie mai complex dect cele care au putut fi

vizualizate anterior:

98

99

Obiectul image
Acest obiect se afl n ierarhie sub obiectul document i se refer la proprietile
imaginii introduse in HTML. Aceste proprieti pot fi modificate n interiorul unui fiier
HTML.
Obiectele image se pot apela n felul urmtor:
1.
2.

Folosirea unui index. Prima imagine primete nr. 0.

document.images[0].src
Prin numele imaginii din tagul img
<img name=BILD src=t.jpg>
document.BILD.src

Proprieti ale obiectului image:

Nr.
Crt.
1

PROPRIETATE
Border

Complete

3
4

Height
Hspace

5
6
7
8

Length
Lowsrc
Name
Src

Vspace

10

width

DESCRIERE
conine indicaii despre margine, aa cum se
gsesc ele in tag-ul img
e true atunci cnd imaginea e complet
inacrcat
conine indicaii despre nlimea pozei
conine indicaii despre distanta orizonatala
fata de obiectele din jur
retine nr. imaginilor dintr-un fiier
reine lowsrc asa cum e in tagul img
reine numele pozei asa cum e in tagul img
reine numele intreg al fisierului asa cum e in
atributul src
conine indicaii despre distanta vertical fata
de obiectele din jur
conine indicaii despre laimea pozei

ACCES
read
read
read
read
read
read
read
read
read
read

Pe lng metoda handleEvent(), care este interpretat numai de Netscape Navigatorobiectul-image conine i alte metode proprii.

Obiectul date
Se folosete pentru calcularea datei i a orei/timpului. Un obiect date se poate crea n
felul urmtor:
<script language=JavaScript>
Function simpleDate()
{
Date1= new Date();
Date2= new Date(YYYY,MM,DD);
Date3= new Date(MM DD YYYY HH:mm:ss);
Date4= new Date(YYY,MM,DD,HH,mm,ss);
100

}
</script>

Obiectul navigator
Conine informaii despre browser i se poate folosi pentru a adapta mai bine scriptul
fiecrui browser n parte.
Proprieti ale obiectului navigator:
Nr.
Crt.
1

appCodeName

appName

appVersion

language

platform

userAgent

PROPRIETATE

DESCRIERE
Conine nicknameul browserului(d.ex.,
Netscape urte nickname-ul Mozilla)
Reine numele browserului n care
ruleaz scriptul
Reine nr. versiunii browserului n care
ruleaz scriptul
Conine limbajul n care este instalat
scriptul(doa Netscape)
Reine numele sistemului de operare pe
care este instalat scriptul (doar
Netscape)
Reine informaii de browser, aceleai
pe care le transmite browserulul i la o
apelare http

ACCES
read
read
read
read
read

read

Obiectul navigator spune, prin metoda javaenabled(), dac n browser este activat Java,
astfel nct s se tie dac se pot folosi appleturi.
Dac Java este acceptat, metoda returneaz true.

Obiectul layers (all-)

Este valabil doar pentru browsere Netscape i conine informaii despre un
nivelul/layer care este accesibil unui fiier HTML. Nivelurile/layer-ele sunt baza poziionrii
dinamice a elementelor n pagin. Obiectul layers este sub obiectul document n ierarhia
obiectelor.
Obiectul all este accesibil numai cu browsere Explorer. Acest obiect conine
proprietile i metodele realizrii acestui concept:
Apelarea layers:
1.
2.

Prin index, care caracterizeaz straturile. Primul nivel are index 0.

document.layers[5].above
Referenierea prin numele layer-ului
<layer name=Layer0>
document. Layer0.above
101

Proprieti ale obiectului layers:

Nr.
PROPRIETATE
DESCRIERE
Ctr.
1
above
Conine obiectul layer care se afla deasupra
niivelului actual
2
background
background-ul layer-ului
3
bgcolor
culoarea fundaluilui layer-ului
4
below
opusul lui above
5
clip
care parte/tietur a layerului este artat
6
document
Pt fiecare nivel exist un obiect document, care i
conine caracteristicile
7
left
Conine poziia colului din stnga sus a
layerulului (n pixeli), raportat la documentul de
deasupra.
8
length
Nr. layer-elor dintr-un fiier HTML
9
name
Numele layerului
10 pageX
Poziia pe axa X a colului din stnga sus a layerului, raportat la ntreg documentul.
11 pageY
Poziia pe axa Y a colului din stnga sus a layerului, raportat la ntreg documentul.
12 parentLayer
Reune obiectul-printe al layerului, adic
documentul de deasupra
13 src
Conine numele unui document extern, introdus
n layer
14 top
Conine poziia pe axa Y a colului din stnga sus
a layerulului (n pixeli), raportat la documentul
de deasupra.
15 visibility
informaii despre visibilitatea unui layer. Valori
posibile: hide, show, inherit

ACCES
read
read, write
read, write
read, write
read, write
read,
read, write

read,
read, write
read, write
read, write
read,
read, write
read, write

read, write

Metode ale obiectului layer:

Nr.
METODE
Crt.
1
captureEvents()
2
handleEvent()
3

4
5
6
7

DESCRIERE

Supravegheaz evenimentele din layer-ul actual.

D mai departe evenimentul unui element care se poate ocupa
de el.
load(p1,p2)
Incarc un fiier extern n layer.
p1-numele fiierului
p2-limea vizibila din layer (pixeli)
moveAbove(p1) Mut layer-ul deasupra layer-ului dat de parametrul p1.
moveBelow(p1) Mut layer-ul sub layer-ul dat de parametrul p1.
moveBy(p1,p2) Mut layerul curent cu p1 pixeli la stnga/dreapta i cu p2 pixeli
mai sus sau mai jos.
moveTo(p1,p2) Mut layer-ul la o nou poziie dat de p1 i p2. Aceasta este
102

8
9

releaseEvents()
resizeBy(p1,p2)

10

resizeTo(p1,p2)

11

routeEvent()

posiia colului din stnga sus al layer-ului.

Termin supravegherea de evenimente.
Schimb mrimea layerului cu:
p1-mrimea n directia de pe axa x
p2-mrimea n direcia pe axa y
O nou mrime pt layer.
p1-mrimea n directia de pe axa x
p2-mrimea n direcia pe axa y
D evenimentul mai departe obiectului document. De acolo
ajunge la un eventhandler care i este subordonat.

Proprieti i metode pentru obiectul all

Apelare:
1. Prin numele tagului sau identificatorului tagului i un index care conine poziia sa.
De exemplu: pt tagul <title>, numele este title. Indexul spune al ctela tag cu acest
nume este referit. Primul tag are indexul 0.
Fie 3 tilturi referite prin tagul <h2>. Accesul la tagul al doilea se face astfel:
document.all.tags(h2)[1].innerText
2. Prin numele dat cu atributul name
z.B : <h2 name=Title2>TITLE 2 </h2>
document.all.Title2.innerText
Proprieti ale obiectului all:
Nr.
Crt.
1

className

2
3
4

dataFld
dataFormatrAs
dataPageSize

dataSrc

6
7
8

id
innerHTML
innerText

isTextEdit

10

lang

11

language

PRPRIETATE

DESCRIERE
Numele clasei style-sheet, careia
i aparine un element.
Numele unui cmp de date.
Tipul unui cmp de date.
Numrul datapage-urilor care
trebuie returnate simultan
Referina la obiectul cu care s-a
realizat conexiunea
Numele unui element
Coninutul unui element GHtml
Coninutul textual al unui elemnt
GHtml.
true-dac elementul este editabil,
false dac nu
Limbajul elementului, atta timp
ct acesta a fost menionat n
atributul lang.
Numele limbajului script

103

ACCES
read, write
read, write
read, write
read, write
read, write
read,
read, write
read, write
read,
read, write

read,

12

length

13
14

offsetHeight
offsetLeft

15
16

offsetParent
offsetTop

17
18

offsetWidth
outerHTML

19
20

outerText
parentElement

21

parentTextEdit

22
23

recordNumber
sourceIndex

24
25

tagName
title

Nr tagurilor HTML dintr-un

fisier.
Inlimea elementului n pixeli.
Distana elementului pn la
marginea stng a ferestrei.
O referin la obiectul printe.
Distana elementului pn la
marginea de sus a ferestrei.
Limea unui element in pixeli
Coninutul unui tag HTML,
incusiv al celor de nceput i
sfrit.
idem innerText
Elementul printe al elementului
curent.
Elementul urmtor care este
editabil.
Numrul data page-ului artat
Spune despre care element din
interiorul unui fiier HTML este
vorba n actualul
element/document???.
Numele unui tag
Coninutul atributului title al
elementului HTML.

read,
read,
read
read,
read,
read
read, write

read, write
read,
read,
read,
read,

read,
read, write

Metode ale obiectului all:

Nr.
Crt.
1
2

5
6

METODA

DESCRIERE

Cauzeaz click-ul unui element, ca i cnd acesta ar fi

fost click-enit de utilizator.
Contains(p1)
Verific dac elemntul conine i un alt element, al crui
nume (id) este dat de p1. Returneaz true, dac exist un
astfel de element.
getAttribute(p1,p2)
Verific dac exist n tagul HTML un atribut dat prin
p1. p2 este pus pe true, dac se ia n seama dac se scrie
cu litere mari sau sau mici. Funcia returneaz valoarea
atributului sau un String gol.
insertAdjacentHTML(p1,p2) Introduce cod HTML suplimentar, nainte sau dup
elementul HTML.
p1-poziia unde trebuie introdus. Valori posibile:
BeforBegin, AfterBegin, BeforEnd, AfterEnd.
p2-codul care trebuie introdus.
insertAdjacentText(p1,p2)
idem insertAjacentHTML, cu diferena c se introduce
text.
removeAttribute(p1,p2)
Indeprteaz un atribut dintr-un tag HTML.
Click()

104

scrollIntoView(p1)

setAttribute(p1,p2,p3)

p1-numele atributului n tag.

p2-true-dac e case sensitive.
Poziioneaz coninutul astfel n fereastr, nct s poat
fi vizibil.
p1-true-dac elementul trebuie s apar sus n fereastr.
p1-false- dac elementul trebuie s apar jos n fereastr.
Introduce ntr-un tag html un nou atribut.
p1-numele atributului.
p2-valoarea acestui atribut
p3-true-dac e case sensitive.

Exemplu de cod complet pentru o metod care este apelat prin proprietile
browserului i care ine cont de elementele specifice browserelor Netscape i Explorer:
Function checkBrowser()
{
var browserName=navigator.appName;
var browserNickname=navigator.appCodeName;
var browserVersion=parseFloat(navigator.appVersion);
var browserInfos=navigator.userAgent;
var isNetscape=false;
var isMicrosoft=false;
window.document.write(Browser :+browserName);
if(browserName==Microsoft Internet Explorer)
{
isMicrosoft=true;}
}
if(browserName ==Netscape)
{
isNetscape=true;
}
if(isMicrosoft)
{
if(navigator.app.Version.indexOf(MSIE)!=-1)
{
versiontmp1=navigator.appVersion.indexOf(MSIE)+4;
Versiontmp2=versiontmp1+5;
bowserVersion=navigator.appVersion.substring(versiontmp1,
versuiontmp2);
}
}
window.document.write(<br> VERSION :+browserVersion);
window.document.write(<br> NICKNAME :+browserNickname);
window.document.write(<br> userAgent :+browserInfos);

105

if(isNetscape)
{
window.document.write(<br> NETSCAPE SPEZIFIKATION= ======:);
window.document.write(<br> System :+navigator.platform);
window.document.write(<br> Language :+navigator.language);
window.document.write(<br> ===);
}
alert(BROWSER : +browserName+\n+ VERSION :+browserVersion);
return;
}

Obiectul Math
Conine constante i metode pentru a putea folosi funcii matematice.
Constante: PI (numrul pi=3,14..) E (e=2,71..).
Metode:
abs(x) modulul
cos(x)
tan(x)
sin(x)
acos(x)
asin(x)
atan(x)
floor(x) cel mai mare ntreg mai mic sau egal cu x
Exemplu: Math.floor(-3,73), returneaz -4. (reprezentarea unui numr real sub form de
sum dintre parte ntreag i parte fracionar x=[x]+{x}; 0<={x}<1; -2,63 = -3+0,37)
random(x) numr aleator n intervalul [0,1]
round(x) cel mai apropiat ntreg de x
sqrt(x) radical din x
pow(x,y) x la puterea y
log(x) ln x
exp(x) e la puterea x
Exemplu : Math.floor(1+100*Math.random()); va returna un numr aleator cuprins ntre
[1,101].

Obiectul Array
n JavaScript se pot declara vectori. Vectorii sunt de tip obiect. Un vector se declar cu
Array() iar elementele se acceseaz cu nume[indice];
Obiecte i metode ale obiectului Array:
proprietatea length ;
metoda sort() sorteaz n ordine lexicografic elementele unui
vector(tablou);
metoda reverse() inverseaz poziiile elementelor unui vector;

106

Exemplu: vv=new Array(4); vv[2]=6; alert(vv[2]);

Declararea unei matrici cu 4 linii i 3 coloane se face astfel:
vv=new Array(4);
for (i=0;i<4;i++)
vv[i]=new Array(3);
Fiecare element al vectorului este privit deasemenea ca un vector.

Obiectul String
Cu acest obiect se pot manipula iruri de caractere.
Crearea unui string se poate efectua n dou moduri :
utiliznd new : var a = new String (Ana) ;
atribuid variabilei direct irul :a = Ana;
Obiectul String are propritatea length care indic dimensiunea irului.
Metode.
Exist o serie de metode ale acestui obiect. Enumerm cteva dintre acestea:
search(s) caut caracterul de nceput al irului s n obiect. Dac irul s nu exist se
returneaz -1.
charAt(index) returneaz caracterul aflat pe poziia index;

107

slice (i1, i2) returneaz subirul cuprins ntre i1 inclusiv i i2 exclusiv.

substr(i1,lung) returneaz subirul care ncepe cu i1 i are lungime lung;
toUpperCase () returneaz irul scris cu litere mari;
toLowerCase() - returneaz irul scris cu litere mici;
replace(sir1, sir2) returneaz irul n care s-a nlocuit prima apariie a lui sir1 cu sir2;
bold() returneaz irul scris cu bold;
italics() - returneaz irul scris cu italic;
fontcolor(nume_culoare) returneaz irul scris cu nume_culoare
fontsize(marime) - returneaz irul scris cu marime
link(adresa_http) creaz o ancor ctre adresa_http

Exemplu de aplicaie utiliznd metode ale obiectului String:

108

Animaii
Prin afiarea n aceeai poziie a mai multor imagini, fiecare imagine stnd un anumit
interval de timp duce la animaie. Exist anumite funcii predefinite i funcii utilizator care
rezolv aceast problem.
1. Funcia setTimeout
Sintaxa:
setTimeout(nume_functie, nr_milisecunde)
Semantica:
nume_functie este funcia care urmeaz a se executa dup nr_milisecunde;
nr_milisecunde este un numr ntreg care este exprimat n milisecunde
2. Funcia clearTimeout
Sintaxa:
clearTimeout(variabila)
Semantica:
variabila conine o valoare returnat de funcia setTimeout. Dup executarea ei
procesul se suspend;
Exemplu de aplicaie care folosete funcia setTimeout:

109

Aplicaii complexe utiliznd limbajul JavaScript

Aplicaia_1: S se realizeze cu ajutorul JavaScript diferite operaii matematice i de
prelucrare a irurilor pe baza unor numere introduse de la tastatur n cmpuri de text

110

Codul surs al aplicaiei 1:

<html>
<head>
<script language="JavaScript">
function suma()
{
a=parseInt(document.form1.inputa.value);
b=parseInt(document.form1.inputb.value);
document.form1.s.value=a+b;
}
function diferenta()
{
a=parseInt(document.form1.inputa.value);
b=parseInt(document.form1.inputb.value);
document.form1.d.value=a-b;
}
function produs()
{
a=parseInt(document.form1.inputa.value);
b=parseInt(document.form1.inputb.value);
document.form1.p.value=a*b;
}
function cat_rest()
{
a=parseInt(document.form1.inputa.value);
b=parseInt(document.form1.inputb.value);
document.form1.c.value=Math.floor(a/b);
document.form1.r.value=a % b;
}
function calc_invers()
{
n=parseInt(document.form2.input.value);
cifra=0;inv=0;
while(n!=0)
{
cifra=n % 10;
n=(n-cifra)/10;
inv=inv*10+cifra;
}
document.form2.invers.value=inv;
}
function test()
{
n=parseInt(document.form2.input.value);
cifra=0;inv=0; n_init=n;
while(n!=0)
{

111

cifra=n % 10;
n=(n-cifra)/10;
inv=inv*10+cifra;
}
if (n_init==inv)
document.form2.palindrom.value="da"
else
document.form2.palindrom.value="nu";
}
function transf_dinbaza10()
{
n=parseInt(document.form3.input.value);
b=parseInt(document.form3.baza.value);
i=0,a="";
var sir=new Array();
do
{
cifra = n%b;
if (cifra>9)
{
switch (cifra)
{
case 10: cifra='A';break;
case 11: cifra='B';break;
case 12: cifra='C';break;
case 13: cifra='D';break;
case 14: cifra='E';break;
case 15: cifra='F';break;
}
}
sir[i] = cifra;
i++;
n=Math.floor(n/b);
}while(n);
for (j=i-1;j>=0;j--) a= a+sir[j];
document.form3.transf.value=a;
}
function calc_modulul()
{
a = document.form4.re.value;
b = document.form4.img.value;
z1 = new Object();
z1.real = parseInt(a);
z1.imaginar = parseInt(b);
modul=Math.sqrt(z1.real*z1.real+z1.imaginar*z1.imaginar);
document.form4.modul.value=modul;
}

112

function inlocuire_litera()
{
sir = document.form5.input.value;
sir = sir.replace(/u/g,"a");
document.form5.output.value=sir;
}
function sortare_alfabetica()
{
sir = document.form6.input.value;
var a=new Array();
var i,k=0,alfabetic="";
for(i=0;i<sir.length;i++)
{
a[k]=sir.charAt(i);
k++;
}
a.sort();
for(i=0;i<k;i++)
alfabetic=alfabetic+a[i];
document.form6.output.value=alfabetic;
}
</script>
</head>
<body>
<ul>
<li><i> Suma, diferenta, produsul si catul a doua numere <b>a</b>si <b>b</b>
</i><br>
<form name="form1">
a: <input type="text" name="inputa" size="14"> <br>
b: <input type="text" name="inputb" size="14"> <br>
Suma: <input type="text" name="s" size="14"> <input type="button"
value="Aduna" onClick="suma()"> <br>
Diferenta: <input type="text" name="d" size="14"><input type="button"
value="Scade" onClick="diferenta()"> <br>
Produsul: <input type="text" name="p" size="14"><input type="button"
value="Inmulteste" onClick="produs()"> <br>
Catul : <input type="text" name="c" size="14"> <input type="button"
value="Imparte" onClick="cat_rest()"> <br>
Restul: <input type="text" name="r" size="14"> <br>
</form>
</li>
<li><i>Inversul unui numar si se testarea daca este palindrom</i>
<form name="form2">
Numarul: <input type="text" name="input" size="14"> <br>
Inversul: <input type="text" name="invers" size="14">
<input type="button" value="Calculeaza" onClick="calc_invers()"> <br>
Palindrom? <input type="text" name="palindrom" size="14">
<input type="button" value="Testeaza" onClick="test()"> <br>

113

</form>
</li>
<li><i> Transformare din baza 10 in baza 2, 8 sau 16</b></i>
<form name="form3">
Numarul: <input type="text" name="input" size="14"> <br>
Baza: <input type="text" name="baza" size="14"> <input type="button"
value="Calculeaza" onClick="transf_dinbaza10()"> <br>
Numarul este: <input type="text" name="transf" size="14"> <br>
</form>
</li>
<li><i> Modulul unui numar complex</i><br>
<form name="form4">
z1: &nbsp; <input type="text" name="re" size="14"> <input type="text"
name="img" size="14">
<input type="button" value="Calculeaza" onClick="calc_modulul()"><br>
Modulul: <input type="text" name="modul" size="14"> <br>
</form>
</li>
<li><i> Inlocuirea literei "u" cu litera "a" intr-un sir de caractere </i><br>
<form name="form5">
Sirul: <input type="text" name="input" size="14"> <input type="button"
value="Inlocuieste" onClick="inlocuire_litera()"> <br>
Dupa inlocuire: <input type="text" name="output" size="14"> <br>
</form>
</li>
<li><i> Ordonarea alfabetica a unui cuvant </i> <br>
<form name="form6">
Sirul: <input type="text" name="input" size="14"> <input type="button"
value="Sorteaza" onClick="sortare_alfabetica()"> <br>
Alfabetic: <input type="text" name="output" size="14"> <br>
</form>
</li>
</ul>
</body>
</html>
Aplicaia_2: S se realizeze un minicalculator de buzunar cu JavaScript

114

Codul surs pentru aplicaia 2:

<html>
<head>
<script language="JavaScript">
var str="", operator="",str2="";
function input(val)
{
if(str.length<10)
str=str+val;
document.form1.text1.value=str;
}
function add()
{
if (operator=="")
{
str2=document.form1.text1.value;
str="";
document.form1.text1.value=str;
operator="+";
}
}
function sub()
{
if (operator=="")
{
str2=document.form1.text1.value;
str="";
document.form1.text1.value=str;
operator="-";
}
}
function mult()
{
if (operator=="")
{
str2=document.form1.text1.value;
str="";
document.form1.text1.value=str;
operator="*";
}
}
function div()
{
if (operator=="")
{
str2=document.form1.text1.value;
str="";
document.form1.text1.value=str;

115

operator="/";
}
}
function resolve()
{
var rez=0;
switch (operator)
{
case "+": rez = (str2*1) + (str*1) ;
document.form1.text1.value = rez;
break;
case "-": rez = (str2*1) - (str*1);
document.form1.text1.value = rez;
break;
case "*": rez = (str2*1) * (str*1);
document.form1.text1.value = rez;
break;
case "/": rez = (str2*1) / (str*1);
document.form1.text1.value = rez;
break;
}
operator=""; str=""; str2="";
}
function clearall()
{
document.form1.text1.value="";
str=""; str2=""; operator="";
}
</script>
</head>
<body>
<center>
<form name="form1">
<table border="1" bgcolor="lightblue">
<tr><td>
<input type="text" name="text1" style="color:navy;font-weight: bold"
size="20">
</td></tr>
<tr><td>
&nbsp;
</td></tr>
</table>
<table border="3" bgcolor="lightblue">
<tr><td align="center">
<input type="button" value=" 1 " style="color:navy;font-weight: bold"
onClick="input(1)">

116

<input type="button" value=" 2 " style="color:navy;font-weight: bold"

onClick="input(2)">
<input type="button" value=" 3 " style="color:navy;font-weight: bold"
onClick="input(3)">
<input type="button" value=" + " style="color:navy;font-weight: bold"
onClick="add()">
</td></tr>
<tr><td align="center">
<input type="button" value=" 4 " style="color:navy;font-weight: bold"
onClick="input(4)">
<input type="button" value=" 5 " style="color:navy;font-weight: bold"
onClick="input(5)">
<input type="button" value=" 6 " style="color:navy;font-weight: bold"
onClick="input(6)">
<input type="button" value=" - " style="color:navy;font-weight: bold"
onClick="sub()">
</td></tr>
<tr><td align="center">
<input type="button" value=" 7 " style="color:navy;font-weight: bold"
onClick="input(7)">
<input type="button" value=" 8 " style="color:navy;font-weight: bold"
onClick="input(8)">
<input type="button" value=" 9 " style="color:navy;font-weight: bold"
onClick="input(9)">
<input type="button" value=" * " style="color:navy;font-weight: bold"
onClick="mult()">
</td></tr>
<tr><td align="center">
<input type="button" value=" C " style="color:navy;font-weight: bold"
onClick="clearall()">
<input type="button" value=" 0 " style="color:navy;font-weight: bold"
onClick="input(0)">
<input type="button" value=" = " style="color:navy;font-weight: bold"
onClick="resolve()">
<input type="button" value=" / " style="color:navy;font-weight: bold"
onClick="div()">
</td></tr>
</table>
</form>
</body>
</html>
Aplicaia_3: S se introduc ntr-un element al unui formular o valoare i apasnd pe
tasta 15% s se calculeze 15% din acea valoare

117

Aplicaia_4 : S se rezolve operatii cu numere complexe i s se afieze rezultatele n

caseta de alert. Se va introduce un numr complex sub forma z1 = a+b*I, iar al doilea numr
va avea forma z2 = b+a*i

118

Codul surs pentru aplicaia 4:

<html>
<head>
<script language="JavaScript">
function complex(x,y)
{
this.real=x;
this.img=y;
this.adun=add;
this.inmultire=mult;
this.impartire=div;
}
z=new complex(0,0);
function getDataR(a)
{
z.real=parseInt(a);
alert("z.real = "+z.real);
document.f1.rez1.value=a;
return;
}
function getDataI(b)
{
z.img=b;
alert("z.img = "+z.img)
document.f1.rez2.value=b;
return;
}
function add(z)
{
t=new complex(0,0);
t.real=eval(this.real)+eval(z.real);
t.img=eval(this.img)+eval(z.img);
alert("t.real add= "+eval(t.real));
return t;
}
function mult(z)
{
t=new complex(0,0);
t.real=eval(this.real)*eval(z.real)-eval(this.img)*eval(z.img);
t.img=eval(this.real)*eval(z.img)+eval(this.img)*eval(z.real);
alert(" REZULTAT INTERMEDIAR t.real mul= "+eval(t.real));
return t;
}
function div(z)
{
t=new complex(0,0);
t.real=(eval(this.real)*eval(z.real)+eval(this.img)*eval(z.img))/(z.real^2z.img^2);

119

t.img=(eval(this.real)*eval(z.img)-eval(this.img)*eval(z.real))/(z.real^2z.img^2);
alert(" REZULTAT INTERMEDIAR t.real div= "+eval(t.real));
return t;
}
function calcul(a,b)
{
z3A=new complex(0,0);
z3I=new complex(0,0);
z3D=new complex(0,0);
z1=new complex(a,b);alert("data complexa z1= "+z1.real+" + "+z1.img+"i");
z2=new complex(b,a);alert("data complexa z2 ="+z2.real+" + "+z2.img+"i");
z3A=z2.adun(z1)
alert("ADUNARE ="+z3A.real+"+"+z3A.img+"i");
z3I=z2.inmultire(z1);
alert("INMULTIRE ="+z3I.real+" +"+z3I.img+"i");
z3D=z2.impartire(z1);
alert("IMPARTIRE ="+z3D.real+" + "+z3D.img+"i");
}
</script>
</head>
<body>
<form name="f1">
Real(z) :<input type ="text" name="Input1" value="0"> &nbsp &nbsp
Imaginar(z):<input type ="text" name="Input2" value="0"><br>
<input type="button" value="OK-REAL"
onClick="getDataR(document.f1.Input1.value)">
&nbsp &nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp
<input type="button" value="OK-Imaginar"
onClick="getDataI(document.f1.Input2.value)"><br>
Afisez Real(z):<input type="text" name="rez1">&nbsp &nbsp
Afisez Imaginar(z):<input type="text" name="rez2"><br><br><br><br>
<input type="button" value="OK - alert( )"
onClick="calcul(document.f1.Input1.value,document.f1.Input2.value)">
</form>
</body>
</html>
Aplicaia_5 : S se scrie un text care ii schimb culoarea i atunci cnd mouse-ul
rmne pe imaginea de pe display, aceasta se mrete pn cnd mouse-ul este luat de pe
imagine.

120

Codul surs pentru aplicaia 5

<html>
<head>
<style>
#Titlu
{
color:rgb(130,12,113);
font-size:40;
}
</style>
<script language="JavaScript">
var t=0,inalt=0, latime=0;
function move()
{
if(t==0)
{
latime=foto.width;
inalt=foto.height;
t=1;
}
foto.width++;
foto.height++;
}
function out()
{
t=0;
foto.width=latime;
foto.height=inalt;
}
i=255;
tt=0;
function lumina()
{
do
{
i--;
Titlu.style.color=255*256*256+i*256*i;

121

tt=setTimeout("lumina()",100);
if(i==0)
clearTimeout(tt);
} while(i>0);
}
</script>
</head>
<body onload="lumina()">
<img id="foto" src="t1.jpg" onmouseout="out()" onmousemove="move()"
width="80" height="80">
<h1 id="Titlu"> ID - INVATAMANT LA DISTANTA </h1>
</body>
</html>

122

VI. Limbajul PHP

PHP a fost conceput n anul 1994 i a fost iniial munca unui singur om, Rasmus
Lerdorf. n octombrie 2002, era folosit de mai mult de nou milioane de domenii din lumea
ntreag. PHP este un produs Open Source, cu acces la codul surs, pe care l putem folosi,
modifica i redistribui, toate acestea n mod gratuit. PHP a fost iniial acronimul de la
Personal Home Page.
Limbajul PHP se aseamn ca i sintax cu limbajele de programare C++ sau Java.
Acesta este ns un limbaj de scriptare care se utilizeaz pe partea de server. Codul PHP este
interpretat pe serverul WEB i genereaz un cod HTML care va fi vzut de ctre uilizator
(browser).

a. Primii pai
Pentru a putea lucra cu php avem nevoie de un server Apache, iar dac dorim s lucrm
cu php i cu baze de date mai avem nevoie si de un server de MySql. Exist programe
speciale care instaleaz automat aceste servere. Exemple de astfel de programe sunt:
WinLAMP, XAMPP, WAMPP, etc.
Fiierele cu cod php pe care le vom crea se vor salva n directorul htdocs din directorul
cu numele aplicaiei pe care o folosim pentru a putea lucra cu php.
Pentru a vizualiza n browser pagina web creat cu php vom scrie:
http://localhost/nume_fisier.php

b. Noiuni introductive
Orice script PHP se ncadreaz ntre marcajele:
<?
?>
sau
<?php
?>
Tiprirea pe display se poate face n dou moduri, folosind:
1. funcia echo TEXT;
2. funcia printf(TEXT);
Script-ul PHP poate fi introdus ntr-un fiier html sau se poate crea un fiier direct cu
extensia php.

c. Limbajul PHP
1.
2.
3.
4.

Orice variabil n PHP incepe cu particular $.

Constantele se introduc cu funcia define(nume_constanta, valoare_constanta);
Operatorul de concatenare iruri este punctul(.);
Operatorii PHP sunt la fel ca i cei din limbajul JavaScript, Java sau C++;

123

5. Instruciunile PHP sunt la fel ca i cele din limbajul JavaScript, Java sau C++;
6. Legtura fiierul HTML cu un fiier PHP se face prin atributul action din tag-ul
form;

Funciile matematice
Ca i
acestea:

n celelate limbaje, exist o serie de funcii matematice. Enumerm cteva dintre

abs(numar) returneaz modulul numrului
sin(x), cos(x), tan(x) argumentul x este n radiani
pow(x,y) returneaz xy cu observaia c x trebuie s fie un numr real pozitiv
log10(x), log(x) returneaz logaritm n baza 10, respectiv logaritm n baza e
max(x1, x2,,xn), min(x1, x2, x3.xn) returneaz maximul respectiv
mminimul dintr-un ir de numere;
ceil(x) returneaz cel mai mare numr ntreg, mai mare sau egal cu x
round(x) returneaz ntregul rezultat prin rotunjirea lui x
floor(x) returneaz cel mai mare ntreg mai mic sau egal cu x
rand(min, max)- returneaz o valoare aleatoare ntre valorile ntregi min i max
pi() returneaz valoarea numarului pi;
sqrt() returneaz radacina ptrat a lui x

Funciile pentru prelucrarea irurilor de caractere

Ca i n celelate limbaje exist o serie de funcii pentru prelucrarea irurilor. Enumerm
cateva dintre acestea:
strlen(sir) returneaz lungimea irului;
strops(sir1, sir2, [poz_start]) verific dac sir1 este subir al lui sir2; dac da,
afieaz poziia de nceput a acestuia. [poz_start] este opional i verific de unde
s nceap cutarea; implicit are valoarea zero;
strstr([sir1, sir2]) returneaz sir1 din poziia n care a fost gsit sir2;
strcmp(sir1, sir2) face comparare lexicografic (alfabetic) i returneaz
valoarea 0 dac sir1=sir2, o valoarea mai mare dect 0 dac sir1>sir2 i o valoare
mai mic dect 0 dac sir1 < sir2

Declararea de vectori
n PHP vectorii nu se declar. Se lucreaz cu vectorii la fel ca i in JavaScript. Exist
ns aici posibilitatea de a utiliza indicii ir de caractere.
Instruciuni i funcii pentru lucrul cu vectori:
instruciunea foreach(n_vector as n_indice=>n_variabila) permite
parcurgerea unui vector cu numele n_vector, cu variabila de ciclare n_indice, n
care citirea se face n variabila n_variabila.
funcia current(vector) returneaz valoarea reinut de elementul din vector
asupra cruia se gsete pointer-ul;
funcia key(vector) returneaz indicele elementului din vector asupra cruia se
gsete pointer-ul;
funcia next(vector) deplaseaz pointer-ul pe elementul urmtor din vector i
returneaz valoarea reinut de acesta;
funcia prev(vector) deplaseaz pointer-ul pe elementul anterior al vectorului i
returneaz valoarea reinut de acesta;
124

Aplicaii complexe utiliznd limbajele PHP, JavaScript i HTML

Aplicaia 1:

Codul surs pentru aplicaia 1:

<html>
<body>
SALUT <br><br>
<?php

125

echo"test test test REZULTAT ";

$a=3;
$b=6;
$rezultat=$a+$b;
echo ("<br> rezultat=".$rezultat."<br>");
echo ($rezultat."<br>");
$nume="informatica";
echo ($nume);
?>
<br><b><font color="red">DEFINIREA DE CONSTANTE CU FUNCTIA
DEFINE</font></b>
<br>
<?
define("const1", 3.675);
echo ("const1 = ".const1) ;
?>
<br><br> <font color="green"> SIR CARACTERE </font><br>
<?
$x=5;
echo (" x = ".$x."<br>");
$y="SIRUL MEU <bR>";
echo strlen($y);
echo "<br><br> POZITIE ME =";
echo (strpos($y,"ME"));
echo "<br> COMPARARE <br>";
echo strcmp("mama","mama");
$x=$y;
echo (" <br>x = ".$x."<br>");
echo (" y = ".$y);
echo "<br><br> CARACTERE MICI =";
echo strtolower($y);
?>
<br><br><font color="green"> CONVERSII </font><br>
<?
$y=11.7;
echo (" y = ".$y."<br>");
$x=(int) $y;
echo (" x = ".$x."<br>");
?>
<br> <font color="red"> FACTORIAL</font><br>
<?
function fact($n)
{
if ($n==0) return 1;
else return $n*fact($n-1);
}
echo ("FACT(7)=".fact(7)."<br>");
print ("FACT3= ".fact(3));

126

$a=65;
$b=78;
print (" <br>a =".$a." <br> b=".$b);
?>
</body>
</html>
Aplicaia 2: Aplicatia este formata din doua fiiere :

formular.html

formular.php
Execuia i codul celor dou fiere sunt date mai jos :

127

Aplicaia 3: Validarea cmpului NUME

128

VII.

Limbajul VRML

Tehnologia VRML ( Virtual Reality Markup Language) a fost intens folosit nc de la

lansare, n decursul anului 1997 aprnd primele pagini web cu grafic 3D VRML (de
exemplu siteurile de chat 3D CyberTown). Datorit succesului cunoscut, a fost preluat de
SGIs Cosmo Software, iar mai apoi de Platinum Technologies i Computer Associates
(CA)..

a. Avantaje/dezavantaje ale folosirii tehnologiei VRML

Folosirea tehnologiei VRML prezint aceleai avantaje i dezavantaje ca i utilizarea
celorlalte metode de creare a graficii 3D. Printre avantaje se poate meniona:
- libertate n crearea de grafic 3D: toate efectele create n VRML sunt la discreia
utilizatorului, acesta avnd control deplin asupra graficii create i multiple
posibiliti de a o vizualiza (obiectele create pot fi apropiate sau deprtate,
ntoarse, rsturnate etc.);
- structurile create n VRML sunt copii fidele ale structurilor reale, efectul vizual
creat fiind unul avansat (datorit lucrului n trei dimensiuni);
Principalele dezavantaje ale tehnologiei VRML sunt:
- dificulti n a reprezenta cu exactitate structurile reale: complexitatea lumii reale
este greu de redat n VRML, deoarece se ncearc recrearea i manipularea unei
lumi tridimensionale ntr-un mediu bidimensional. Tot din acest cauz este
dificil stabilirea i reprezentarea poziiei relative a mai multor obiecte 3D.
- timpul de prelucrare a calculelor necesare reprezentrii unei lumi VRML este
foarte lung, ceea ce duce la suprasolicitarea procesorului, astfel nct scenele 3D
reprezentate cu multe detalii sau cele foarte dinamice se vor afia trunchiat.

b. VRML 1.0 vs. VRML 2.0

Prima versiune oficial a tehnologiei VRML este 1.0, aceasta avnd urmtoarele
caracteristici:
- a fost construit exclusiv pentru creare de grafic 3D static, neanimat.
- se folosete de anumite forme predefinite (numite primitive), pentru a construi
scenele 3D. Exemple de primitive: cub (box), cilindru (cylinder), sfer (sphere),
con (cone) etc. Programatorul are ns posibilitatatea de a-i defini propriile forme
complexe, de a le salva i de a le utiliza n crearea de scene 3D. Toate formele
vizibile i caracteristicile lor sunt definite n entiti numite noduri.
- permite operaii relativ simple pentru manipularea obiectelor create, cum ar fi
transformri, scalri sau rotaii.
- permite personalizarea lumii 3D construite prin aplicare de culori, texturi i prin
metode de iluminare a scenei.
VRML 2.0 a pstrat toate funcionalitile i caracteristicile primei versiuni, adugnd
altele noi, cum ar fi:
- posibilitatea de a aduga anumite comportamente obiectelor create, fr s fie
nevoie de rescrierea ntregului cod-surs. Astfel, din statice lumile 3D au devenit

129

dinamice. Totodat se pot implementa tipare de comportament pentru

interaciunea utilizatorului cu scena virtual, acesta avnd i posibiliti de a
modifica scena deja construit.
posibilitatea de a ncorpora sunete sau fiiere video n lumea virtual.
posibilitatea de a folosi limbaje de script (JavaScript) sau limbaje de programare
(Java) pentru perfecionarea lumii 3D create.

c. Navigare n lumea virtual

Odat creat i integrat ntr-o pagin HTML, o scen grafic VRML poate fi vizualizat
de ctre toi cei care viziteaz acea pagin, cu condiia ca browserul lor s suporte coninut
VRML. Browserele compatibile VRML sunt de dou tipuri:
- browsere independente (standalone) acestea ofer posibilitatea de a
vizualiza numai coninut VRML;
- browsere integrate folosite n cazul n care se ncearc vizualizarea unei
pagini cu coninut mixt HTML-VRML. Acestea sunt folosite ca plugin la
browserele clasice HTML.
Exemple de browsere VRML:
Microsoft ActiveVRML: browser lansat n 1996, folosit pentru o perioad scurt
de timp, deoarece prezenta probleme la vizualizarea graficii VRML dinamice.
Live3D: este un browser VRML independent, folosit cu browserul HTML
Netscape Navigator. El poate fi folosit pentru vizualizare de grafic static
(VRML 1.0) i dinamic (VRML 2.0), fiind distribuit mpreun cu Netscape,
ncepnd cu versiunea 3.0 al acestuia.
Intervistas WorldView: acest browser poate fi folosit att independent ct i ca
plugin la Netscape respectiv Internet Explorer. Ofer posibilitatea ca utilizatorul
s-i salveze anumite puncte de reper pe parcusrul vizualizrii lumii virtuale,
puncte ce pot fi revizitate.
SGIs CosmoPlayer: este cel mai cunoscut browser VRML, avnd integrat i un
convertor pentru transformarea fiierelor VRML 1.0 n VRML 2.0. Este
compatibil i cu prile de cod implementate n Java sau JavaScript.
Sonys CyberPassage: este considerat a fi primul browser creat exclusiv pentru
vizualizare de grafic VRML 2.0 (celelalte au avut mai nti versiune pentru
VRML 1.0, fiind apoi upgradate pentru coninut VRML 2.0). Este compatibil i
cu scripturi JavaScript i ofer faciliti de multiuser (lumea virtual poate fi
analizat n timp real de ctre mai muli utilizatori).

d. Construcia scenelor virtuale cu VRML

O scen virtual VRML poate fi construit prin 2 modaliti:
1) folosind un simplu editor text (Notepad) pentru a scrie fiecare linie de cod n parte.
Aceast metod este una foarte costisitoare din punctul de vedere al timpului
sacrificat de ctre programator, ofer ns posibilitatea ca acesta s aib control
deplin asupra etapelor de creare a graficii.
2) cu ajutorul unui builder VRML: acesta este un pachet soft folosit pentru a construi
orice scen 3D cu efort minim de programare. Printre principalele buildere aflate la
dispoziia programatorului sunt demne de menionat urmtoarele dou:
130

VRealmBuilder pachet soft creat de ctre IDS Software. Este

ideal pentru nceptori, acetia avnd posibilitatea de a comuta
ntre grafica creat i codul surs generat (sunt respectate cu
strictee sintaxa i regulile de construcie ale fiierului VRML).
Structura fiierului creat nu poate fi modificat, programatorul
neavnd posibilitatea de a-i crea propria ierarhie de noduri sau
obiecte.
Caligaris Truespace este cunoscut i sub numele de Pioneer
sau Fountain. Acest pachet soft ofer, pe lng primitivele i
formele geometrice clasice, posibilitatea construirii de forme
grafice 3D complexe, bazate pe sisteme de poligoane i conine
instrumente i pentru creare de text animat.

i. Structura i caracteristicile unui fiier VRML V2.0

Structura general a unui fiier VRML (fierul are extensia .wrl) este dat de urmtoarele
seciuni:
1. un fiier VRML ncepe ntotdeauna cu urmtorul header:
#VRML V2.0 utf8
2. comentarii precedate de caracterul #
3. noduri
Identificatorul utf8 din header permite programatorului folosirea unui set de caractere
extins pentru construcia scenei 3D (litere greceti, caractere din alfabetul chinez etc.). Orice
linie care ncepe cu caracterul #, n afar de acest header este considerat a fi comentariu.
Fiierul VRML este salvat cu extensia .wrl.
Modelul de culoare folosit n VRML este RGB, astfel nct este nevoie de 3 valori
pentru specificarea unei culori: rou (RED), verde (GREEN) i albastru (BLUE), fiecare cu
valori cuprinse n intervalul [0, 1] (de exemplu combinaia 0.0 0.0 0.0 semnific culoarea
neagr i 1.0, 1.0, 1.0 reprezint culoarea alb). Unitatea de msur predefinit a distanei
este metrul, iar unghiurile sunt msurate n radiani (i nu n grade).

ii. Noduri n VRML V2.0

Mulimea de baz a obiectelor VRML const din nodurui.
Dac nodurile geometrice nu au precizate dimensiunile, atunci vor fi considerate valorile
implicite date n sintaxa nodurilor.
Nodul Shape
Sintax:
Shape{
appearance NULL
geometry NULL
}
Semantic:

131

Toate obiectele vizibile create n VRML sunt definite n interiorul nodului Shape, unde
gsim urmtoarele cmpuri:
- appearance specific un nod de tip Appearance, prin intermediul cruia
stabilim culoarea, textura i celelalte caracteristici vizuale ale formei geometrice;
- geometry indic forma geometric creat. Acestea pot fi de dou tipuri:

forme primitive: Box (cub), Cone (con), Cylinder (cilindru) i Sphere
(sfer).

forme geometrice avansate: Elevation Grid, Extrusion,
IndexedFaceSet, IndexedLineSet i PointSet.
Nodul Box
Sintax:
Box {
size 1.0 1.0 1.0
}
Semantic:
Nodul Box definete un paralelipiped cruia i se poate stabili limea, nlimea i
grosimea. Centrul de greutate el formei create este prestabilit la punctul cu coordonatele
(0,0,0) din sistemul de coordonate local (practi centrul ecranului). Box are un singur cmp,
size, prin intermediul cruia se definete mrimea corpului geometric pe axele X, Y i Z.
Cmpul are valoarea iniial 1.0, 1.0, 1.0.
Nodul Sphere
Sintax:
Sphere {
radius 1.0
}
Semantic:
Nodul Sphere definete o sfer cu raza predefinit la 1.0 m. Sphere are un singur
camp, radius, iar sfera afiat va avea centrul de greutate n centrul ecranului, n punctul cu
coordonatele (0,0,0).
Nodul Cone
Sintax:
Cone {
bottomRadius 1.0
height 2.0
side TRUE
bottom TRUE
}
Semantic:
Nodul Cone se folosete pentru definirea unui con i are 4 cmpuri:

132

bottomRadius: reprezint raza cercului aflat la baza conului. Valoare ei trebuie s

fie mai mare de 0.0;
height: nlimea conului;
side i bottom: valori booleene, care specific prile vizibile ale conului desenat
(de exemplu dac side e FALSE, se va afia numai cercul aflat la baza conului);

Nodul Cylinder
Sintax:
Cylinder {
radius 1.0
height 2.0
side TRUE
bottom TRUE
top TRUE
}
Semantic:
Nodul Cylinder definete un cilindru, i are 5 cmpuri:
- radius i height definesc proporiile geometrice ale cilindrului. Valoarea lor
trebuie s fie mai mare de 0.0;
- side i bottom valori boolene, au aceeai funcie ca i n cazul nodului Cone;
- top valoare boolean, este TRUE dac se dorete afiarea cercului din partea de
sus a cilindrului (capacul lui), i FALSE, dac acesta e invizibil.
Nodul PointSet
Sintax:
PointSet {
color NULL
coord NULL
}
Semantic:
Nodul PointSet definete o mulime de puncte 3D din sistemul de coordonate local i
are 2 cmpuri:
- color reprezint un nod de tip Color, fiind un camp opional, cu valoarea
predefinit la culoarea neagr;
- coord reprezint un nod de tip Coordinate, coninnd un set de coordonate 3D.
Numrul componentelor din cmpul color trebuie s coincid cu numrul celor din coord.
Nodul IndexedLineSet
Sintax:
IndexedLineSet {
coord NULL
coordIndex [ ]
color NULL
colorIndex [ ]
colorPerVertex TRUE
133

}
Semantic:
Nodul IndexedLineSet definete o mulime de drepte din sistemul de coordinate local i
are 5 cmpuri:
- color i coord cu aceleai funcii ca i la PointSet;
- coordIndex conine o mulime de indeci de coordinate cu ajutorul crora se va
desena dreapta 3D. Indecii se separ cu ajutorul caracterului , un index cu
valoarea -1 reprezentnd fritul listei coordonatelor aparinnd dreptei curente.
- colorIndex are aceeai funcie ca i coordIndex, ns se refer la culorile aplicate
dreptelor.
- colorPerVertex camp Boolean prin intermediul cruia se definete modul de
aplicare al culorilor. Dac valoarea lui este TRUE, fiecare segment de linie poate
avea culoare diferit, astfel nct desenarea dreptei poate ncepe cu o culoare i se
poate termina cu alta. Dac valoarea cmpului e FALSE, fiecare dreapt are o
singur culoare.
Exemplu:
#VRML V2.0 utf8
IndexedLineSet {
coord 0 0 0 1 1 0 -1 0 0 -1 -1 0
coordIndex [3 0 2 1]
colorIndex [0 1 2 0 ]
colorPerVertex TRUE
}

iii. Afiarea textului n VRML

Nodul care permite afiarea de iruri de caractere (stringuri) n lumea VRML este
Text.
Sintax:
Text {
string [ ]
fontStyle NULL
length [ ]
maxExtent 0.0
}
Semantic:
Nodul Text conine urmtoarele cmpuri:
- string conine textul care va fi afiat, formatat pe un singur sau mai multe
rnduri, caz n care fiecare linie este considerat ca fiind un string de sine stttor;
- fontstyle conine un nod Fontstyle i se refer la modul de afiare al irului de
caractere;
- length reprezint lungimea fiecrui string n uniti VRML i anume: valoarea 0
nseamn c irul de caractere rmne nemodificat, o valoare pozitiv nseamn
comprimarea unui string considerat lung, iar o valoare negativ se interpreteaz ca
o expandare al unui string scurt;
- maxLength seteaz o limit maxim pentru lungimea stringurilor.

134

Proprietile de afiare al unui ir de caractere se stabilesc prin intermediul nodului

FontStyle.
Sintax:
FontStyle {
family "SERIF"
horizontal TRUE
justify "BEGIN"
language ""
leftToRight TRUE
size 1.0
spacing 1.0
topToBottom TRUE
}
Semantic:
Nodul FontStyle are cmpurile:
- family specific familia de fonturi i poate lua valorile SERIF, SANS sau
TYPEWRITER;
- style se refer la stilul de afiare al caracterelor. Valori posibile: PLAIN, BOLD,
ITALIC sau BOLDITALIC;
- horizontal cmp cu valori booleene, permite afiarea de text pe orizontal;
- leftToRight cmp boolean care specific dac textul se afieaz de la stnga la
dreapta sau de la dreapta la stnga (n stil arab);
- topToBottom stabilete direcia de afiare de sus n jos sau de jos n sus (n stil
chinezesc);
- justify stabilete modul de aliniere al textului. Cmpul poate avea valorile
FIRST, BEGIN (ambele nsemnnd aliniere la stnga), MIDDLE (text centrat)
sau END (aliniere la dreapta);
- language specific setul de caractere folosit, de exemplu en englez,
en_US englez american etc.
- size specific mrimea caracterelor n uniti VRML (i nu n pixeli);
- spacing folosit pentru a specifica spaiul ntre rndurile textului;

iv. Nodul Appearance

Formele geometrice mai simple sau mai complexe create n VRML vor arta toate
la fel n cazul n care nu sunt personalizate. Culoarea predefinit n VRML este cea neagr,
ea se va aplica tuturor elementelor lumii virtuale n cazul n care acestea nu sunt complet
definite de ctre creatorul lor.
Nodul care ajut la definirea caracteristicilor vizuale al oricrui nod de tip Shape este
Appearance.
Nodul Appearance are sintaxa:
Appearance {
material NULL
texture NULL

135

textureTransform NULL
}
Semantic:
Nodul are 3 cmpuri opionale:
- material definete un nod de tipul Material, care specific culoarea corpului
VRML i modul n care acesta va reflecta lumina;
- texture va conine un nod de textur, de tipul ImageTexture, MovieTexture sau
PixelTexture;
- textureTransform conine un nod de tipul TextureTransform i definete modul
n care se aplic textura pe forma geometric;
Nodul Material
Cu ajutorul acestui nod se poate specifica culoarea, modul de reflecie i transparena
materialului aplicat unui corp geometric. Nodul se poate defini numai n interiorul unui nod
de tip Appearance.
Sintax:
Material {
diffuseColor 0.8 0.8 0.8
ambientIntensity 0.2
emissiveColor 0.0 0.0 0.0
specularColor 0.0 0.0 0.0
shininess 0.2
transparency 0.0
}

Semantic:
Nodul Material are 6 cmpuri:
- diffuseColor se folosete pentru definirea culorii aplicate. Cmpul este ignorat
dac se aplic i texturi pe corpul geometric;
- emissiveColor definete gradul de strlucire al suprafeei colorate;
- ambientIntensity determin volumul de lumin reflectat de ctre corpul
geometric;
- specularColor definete culoarea petelor lucioase de pe materialul corpului
geometric;
- shininess modereaz intensitatea cu care strlucesc petele lucioase de pe
suprafa, valori mici nsemnnd strlucire moderat, iar valori mari strlucire
intens;
- transparency este folosit pentru specificarea gradului de transparen al
materialului. Valoarea 0.0 semnific o suprafa complet opac, iar 1.0 o
suprafa total transparent.
Culorile n nodul Material se reprezint n mod caracteristic VRML, ca un triplet
RGB, cu valori reale cuprinse ntre 0.0 i 1.0.

136

Texturi
VRML 2.0 permite texturarea formelor geometrice cu ajutorul imaginilor, filmelor
sau imaginilor pixelate. Odat aleas, textura se va aplica tuturor feelor formei geometrice.
Se permite redimensionarea texturii alese, dar i repetarea ei pe orizontal, vertical sau
ambele sensuri astfel nct s acopere faa/feele corpului geometric. De asemenea exist i
posibilitatea de a transforma sau roti o textur cu ajutorul nodurilor TextureTransform i
TextureCoordinate.
Nodul ImageTexture
Permite setarea unei imagini JPEG, GIF sau PNG ca textur, cu ajutorul acestui nod
se poate stabili i modul n care se va aplica textura (dac se va repeta pe orizontal sau
vertical i cum se va aplica pe feele formei geometrice).
Sintax:
ImageTexture {
url [ ]
repeatS TRUE
repeatT TRUE
}
Semantic:
Nodul are urmtoarele cmpuri opionale:
- url specific locaia imaginii, se pot da i liste de locaii n care browserul s
caute imaginea;
- repeatS specific dac imaginea se va repeta pe vertical, cmpul poate lua
valori booelene;
- repeatT - specific dac imaginea se va repeta pe orizontal, cmpul poate lua
valori booelene;

Nodul TextureTransform
Acest nod permite efectuarea de operaii simple (scalri, transformri, rotaii sau
translaii) asupra coordonatelor texturii folosite. TextureTransform poate aprea numai n
interiorul unui nod Appearance.
Sintax:
TextureTransform {
scale 1 1
rotation 0
center 0 0
translation 0 0
}

v. 3.5. Definirea surselor de lumin

Obiectele create au fost luminate cu sursa de lumin predefinit de ctre browser,
lumina indicnd obiectul examinat la un moment dat. Aceast surs de lumin este una de tip

137

headlight, VRML oferind posibilitatea de a folosi i alte tipuri de iluminri, i anume: lumina
direcionat (directional light), lumina punctiform (point light) i lumina de tip bec (spot
light).
Probleme ntmpinate n iluminarea unei scene VRML:
- reflecia luminii n realitate n momentul n care un obiect este iluminat acesta
reflect lumina n funcie de materialul din care este construit i de culoarea sa. n
lumea virtual VRML ns nu este cunoscut conceptual de lumin reflectat, ceea
ce nseamn c sunt vizibile numai obiectele care sunt illuminate n mod direct.
- atenuarea luminii VRML are aceast funcie prin intermediul cruia se
modeleaz efectul de scdere n intensitate a luminii odat cu creterea distanei
dintre obiectul iluminat i sursa de lumin (numai n cazul unei surse de lumin
punctiforme sau de tip bec).
- umbrele VRML nu permite modelarea efectului de umbr, deoarece ar crete
foarte mult complexitatea graficii create. Umbrele pot fi doar simulate,
manipulnd culoarea aplicat elementelor lumii virtuale.
- iluminarea unei suprafee plane - prezint probleme n cazul n care se dorete
iluminarea doar al unei pri din totalul suprafeei, ns aceste probleme se pot
rezolva dac suprafeele plane se definesc cu ajutorul unor noduri IndexedFaceSet
sau ElevationGrid, asftel nct ele s fie alctuite din mai multe sectoare, crenduse astfel suprafee gen mee.
- lumini colorate VRML ofer posibilitatea de a color alumina, trebuie ns s se
in cont de anumite reguli:
o n cazul n care se definesc culori pure (rou, verde sau albastru) obiectele
colorate astfel vor reflecta numai lumina de aceeai culoare;
o obiectele colorate cu culori pure iluminate cu lumin de alt culoare, vor
rmne n intuneric, nu vor reflecta lumina;
Se recomand deci folosirea culorilor mixte (amestecuri de rou, verde i albastru).
Nodul DirectionalLight
Sintax:
DirectionalLight {
on TRUE
intensity 1
ambientIntensity 0
color 0.4 1 0.0
direction 0 1 -1
}
Semantic:
Acest nod definete o surs de lumin aflat la o distan foarte mare de lumea
virtual creat, astfel nct razele de lumin care ajung la obiectele din acea lume sunt deja
paralele pe o anumit direcie. Lumina definit prin intermediul acestui nod are effect numai
asupra obiectelor definite n acelai grup cu nodul DirectionalLight. Cmpurile acestui nod
sunt:
- on camp boolean, determin dac lumina direcional e sau nu activ;
- intensity reprezint intensitatea luminii, poate avea valori ntre 0.0 i 1.0;
- ambientIntensity specific prin valoarea sa (ntre 0.0 i 1.0) msura n care
lumina direcional contribuie la iluminarea general a scenei 3D;

138

color un camp RGB prin care se determin culoarea luminii;

direction specific un vector 3D care seteaz direcia luminii;

Nodul PointLight
Sintax:
PointLight {
on TRUE
intensity 0.8
ambientIntensity 0.2
color 1 1 0.1
location 0 0 0
attenuation 1 0 0
radius 80
}
Semantic:
Acest nod definete o surs de lumin aflat ntr-o locaie exact, din aceast locaie
razele de lumin se mprtie n toate direciile. Se ilumineaz toate corpurile care se afl n
calea de lumin, nu numai cele definite n acelai grup de obiecte cu nodul PointLight.
Intensitatea luminii se poate totui limita cu atributul radius, care specific raza sferei n
interiorul creia obiectele sunt iluminate de ctre sursa de lumin definit. Alte cmpuri ale
nodului PointLight:
- on - camp boolean, determin dac lumina punctiform e sau nu activ;
- intensity reprezint intensitatea luminii, cu valori ntre 0.0 i 1.0;
- ambientIntensity specific prin valoarea sa (ntre 0.0 i 1.0) msura n care
lumina direcional contribuie la iluminarea general a scenei 3D;
- color un cmp RGB care determin culoarea luminii;
- location specific un vector 3D care definete coordonatele sursei de lumin;
- attenuation vector 3D care specific modul n care lumina i va pierde din
intensitate odat cu creterea distanei de la surs;
Nodul SpotLight
Sintax:
SpotLight {
on TRUE
intensity 1
ambientIntensity 0.2
color 1 0.1 1
location 0 1 0
direction 0 0 0
attenuation 1 0 0
radius 80
cutOffAngle 0.78
beamWidth 0.78
}
Semantic:

139

Acest nod definete o surs de lumin aflat ntr-o locaie anume, cu direcia luminii
bine stabilit, astfel nct razele de lumin emise dintr-o astfel de surs s formeze un con de
lumin. Acest con este caracterizat de dou din cmpurile nodului, i anume:
- cutOffAngle definete unghiul pe care l formeaz generatorii conului, se
specific n radiani, valoarea sa trebuie s se ncadreze n intervalul 0-1,57 (0180);
- beamWidth definete unghiul unui con mai mic, n interiorul cruia lumina are o
intensitate constant;

vi. Noduri cu funcie de grupare

VRML ofer urmtoarele noduri cu funcie de grupare:
- Anchor reprezint o form complex construit dintr-o mulime de alte
forme, preluate printr-un hyperlink dintr-o alt lume VRML, pagin
HTML sau orice alt structur de date ce poate fi interpretat de ctre
browser;
- BillBoard reprezint o mulime de noduri, care indiferent de poziia
privitorului sunt vizibile i apar cu faa spre privitor;
- Collision o mulime de noduri care anun browserul momentul n care
se ntlnete un eveniment de tip coliziune;
- Group definete un nod compus, format de o mulime de alte noduri,
faciliteaz reutilizarea acelor noduri;
- Switch o mulime de noduri din care poate fi reprezentat cel mult un nod
la un moment dat;
- Transform - definete un sistem nou de coordonate pentru lumea virtual,
diferit de cel predefinit;
n VRML gruparea are ca scop principal limitarea modificrilor ce se pot realiza
asupra nodurilor doar la anumite noduri, cele care fac parte din acelai grup. Se permite ca un
grup de noduri s fie inclus n alt grup, astfel nct s se creeze structuri ierarhice de noduri.
Nodul Group
Sintax:
Group {
children []
bboxCenter 0 0 0
bboxSize -1 -1 -1
}
Semantic:
Acest nod permite ca o mulime de noduri s fie tratate ca o singur entitate (nod)
VRML. Conine urmtoarele cmpuri:
- children conine nodurile (elementele) incluse n grup;
- bboxCenter i boxSize - cu semnificaia definit n nodul Anchor;

140

Nodul Transform
Sintax:
Transform {
scale 1 1 1
scaleOrientation 0 0 1 0
center 0 0 0
rotation 0 0 1 0
translation 0 0 0
bboxCenter 0 0 0
bboxSize -1 -1 -1
children []
}
Semantic:
Nodul Transform permite definirea unui nou system de coordinate local pentru nodurile ce
fac parte din grup. Cu ajutorul su se pot efectua operaii de tip rotaie, scalare sau translaie,
acestea afectnd de asemenea toate nodurile coninute de grup. Cmpurile nodului Transform
sunt:
- children conine toate nodurile ce vor face din grup;
- scale se refer la o transformare de tipul scalare;
- scaleOrientation specific modul de rotaie al axelor sistemului de coordinate
pentru ca scalarea s se poat realize;
- center definete centrul operaiei de scalare;
- rotation definete o rotaie pe una din axe, are 4 valori, primele 3 se refer la
axele de coordinate X, Y, Z, iar cel de-al 4-lea unghiul rotaiei;
- translation definete o nou origine pentru sistemul de coordinate;
- bboxCenter i boxSize - cu semnificaia definit n nodul Anchor;

vii. 3.7. Evenimente

Principala diferen ntre VRML 1.0 i VRML 2.0 este reprezentat de capacitatea
nodurilor s fie emitori sau receptori de evenimente, astfel nct n VRML 2.0 se pot defini
obiecte animate care pot avea anumite reacii la interaciunea cu utilizatorul. Aceste reacii se
obin prin modificarea anumitor cmpuri din nodurile deja create, acestea purtnd numele de
cmpuri expuse i putnd fi descompuse n 3 subcomponente (fieldName reprezentnd
numele cmpului expus):
eventIn set_fieldName
field fieldName
eventOut fieldName_changed
O astfel de definiie semnific faptul c nodul declarat are capacitatea de a recepta
evenimente (eventIn), dar n acelai timp poate s i genereze evenimente (eventOut). Prin
eventIn se seteaz valoarea implicit al cmpului expus, n momentul n care aceast valoare
se modific se va genera rspunsul la acea modificare cu ajutorul componentei eventOut.
Exemple de cmpuri expuse: diffuseColor, url, point[], scale, rotation sau translation.
Nodurile VRML pot dispune i de alte cmpuri de tip eventIn sau eventOut, acestea
ns nu sunt vizibile n definiia nodului, sunt considerate implicite. De asemenea pot exista

141

noduri care au cmpuri eventIn definite fr s aib correspondent eventOut (cum ar fi

cmpurile coordIndex[], colorIndex[], orientation sau scale).
Modul de gestionare al evenimentelor este urmtorul: n momentul producerii unui
eveniment, nodul care l-a generat returneaz o valoare sau o mulime de valori de un anumit
tip (n funcie de tipul evenimentului). Astfel, producerea de evenimente n VRML poate fi
vzut ca o transmitere de date de la utilizator ctre nodul care va fi modificat. n funcie de
valorile transmise de ctre parametric nodul va rspunde cu o aciune specific, aciune
reflectat de modificare valorilor cmpurilor expuse. Pentru a putea transmite aciunea dorit
unui nod i pentru a putea recepta rspunsul su, VRML se folosete de scripturi i de rutarea
evenimentelor (ROUTES).
n VRML exist posibilitatea de a genera evenimente i fr modificarea valorii
cmpurilor expuse, folosind una din urmtoarele structuri:
- timere genereaz evenimente la anumite intervale de timp predefinite;
- senzori senzori de atingere (touch sensors): genereaz evenimente atunci cnd
cursorul mouse-ului este plasat asupra unui obiect/nod definit n acelai grup de
noduri ca i senzorul;
- senzori de vizibilitate (visibility sensors): genereaz evenimente atunci cnd un
obiect sau mai multe din grupul n care e definit senzorul este vizibil pentru
utilizator;
- senzori de micare (dragging sensors): genereaz evenimente atunci cnd
utilizatorul d click peste un obiect (din acelai grup ca i senzorul) i l trage
pe ecran, schimbndu-i poziia;
- senzori de apropiere (proximity sensors): evenimentul se declaneaz n
momentul n care pointerul mouse-ului se afl la o anumit distan de obiectul
care va suporta consecinele evenimentului;
3.7.1. Rutarea evenimentelor (ROUTES)
n VRML un nod poate genera (trimite) sau recepiona evenimente, legtura ntre un
eveniment generat de un nod i nodul care recepteaz evenimentul fiind realizat de entitatea
ROUTE.
Sintax: ROUTE Node.eventOut_changed TO Node.set_eventIn
Prefixul set_ i sufixul _changed nu sunt obligatorii, este corect i urmtoarea sintax:
ROUTE Node.eventOut TO Node.eventIn. Dup cum se vede, ROUTE nu permite
stabilirea noii valori pentru cmpul expus modificat.
n VRML pot exista adevrate cascade de evenimente, deoarece se genereaz cte un
eveniment de fiecare dat cnd un cmp expus i schimb valoarea. Fiecare eveniment
generat are ataat momentul exact al producerii sale, i n cazul n care sunt mai multe
evenimente care s-au produs n acelai moment, ele au ataate aceeai etichet temporal. n
cascada de evenimente pot exista evenimente care se repet nejustificat. Ele sunt automat
eliminate din cascad n cazul n care au aceeai etichet temporal, deoarece VRML nu
permite astfel de repetiii.

3.7.2. Senzori
Nodul TimeSensor
Sintax:
142

TimeSensor {
cycleInterval 1.0
enabled TRUE
loop FALSE
startTime 0
stopTime 0
}
Semantic:
Acest nod funcioneaz ca un cronometru care declaneaz unul sau mai multe
evenimente la anumite intervale de timp (crendu-se astfel efecte de animaie). Nodul are
urmtoarele cmpuri:
- enabled specific statutul senzorului (dac are valoarea TRUE senzorul e activ,
la valoarea FALSE senzorul este inactiv);
- startTime specific momentul n care senzorul ncepe generarea evenimentelor.
Valoarea cmpului este n secunde i reprezint numrul de secunde trecute de la
data 01.01.1970, ora 00:00;
- stopTime specific momentul n care senzorul va nceta generarea de
evenimente. Valoarea cmpului este n secunde i reprezint numrul de secunde
trecute de la data 01.01.1970, ora 00:00;
- cycleInterval specific intervalul de timp n carese vor genera evenimentele,
avnd valoarea msurat n secunde;
- loop specific dac n momentul n care expir numrul de secunde definite n
cmpul cycleInterval, TimeSensor va fi sau nu restartat;
Senzorul de timp funcioneaz astfel: n momentul n care de la crearea lumii virtuale
a trecut numrul de secunde specificat n cmpul startTime, TimeSensor ncepe msurarea
timpului alocat producerii evenimentelor. Se vor produce evenimente pn cnd numrul de
secunde contorizate va fi egal cu valoarea specificat n stopTime sau cu valoarea obinut
din suma valorii din startTime cu cea din cmpul cycleInterval.
n cazul n care este specificat o valoare valid n cmpul cycleInterval nodul
TimeSensor va genera un eveniment fraction_changed, ce va avea valori cuprinse ntre 0.0
i 1.0 (reprezentnd fraciunea de timp consumat din cycleInterval). Un alt eveniment
generat de ctre nodul TimeSensor este isActive. Acesta va avea valoarea TRUE ct timp
cronometrul msoar trecerea timpului i valoarea FALSE atunci cnd acesta nu mai
funcioneaz.
Nodul TouchSensor
Sintax:
TouchSensor {
enabled TRUE
}
Semantic:
Este un nod care asigur interactivitatea lumii VRML cu utilizatorul. De obicei nodul
este definit n cadrul unui grup de noduri, avnd efect asupra tuturor nodurilor definite n
cadrul grupului. Acest senzor este activat n momentul n care pointerul mouse-ului este
poziionat asupra unui obiect din cadrul grupului i utilizatorul efectueaz un click asupra
acelui obiect.
143

Nodul TouchSensor are un singur cmp, i anume enabled, care specific statutul
senzorului.
Evenimente generate de TouchSensor:
- isOver este un eveniment generat cu valoarea TRUE atunci cnd cmpul
enabled are valoarea TRUE i cursorul mouse-ului este mutat deasupra unui
obiect din grup. Evenimentul se genereaz cu valoarea FALSE dac senzorul e
activ (adic enabled e TRUE) i cursorul mouse-ului nu se oprete deasupra
niciunui obiect din grup. Evenimentul isOver se genereaz numai n cazul
obiectelor vizibile pentru utilizator.
- evenimente care apar la micarea cursorului poziionat pe un obiect din grup:
o hitPoint_changed returneaz poziia exact a obiectului n cadrul
grupului de obiecte;
o hitNormal_changed returneaz normala la suprafa, folosind
coordonatele 3D stabilite prin evenimentul hitPoint_changed;
o hitTextCoord_changed returneaz valorile textCoord referitoare
la suprafa;
- isActive este un eveniment generat n momentul n care senzorul este activ i se
realizeaz un click asupra unui obiect (valoarea alocat evenimentului va fi
TRUE). n momentul n care mouse-ul nu mai este apsat isActive ia valoarea
FALSE i se genereaz un eveniment touchTime care memoreaz momentul
nregistrrii click-ului.
Nodul VisibilitySensor
Sintax:
VisibilitySensor {
enabled TRUE
center 0 0 0
size 0 0 0
}
Semantic:
Acest nod poate fi folosit pentru a detecta modificrile aduse n vizibilitatea
obiectelor VRML, rspunznd cu anumite evenimente la aceste modificri de vizibilitate.
Rolul su ns nu este acela de a stabili dac un anumit obiect este sau nu vizibil, senzorul
reacioneaz doar la modificrile aduse lumii VRML.
VisibilitySensor are urmtoarele cmpuri:
- center reprezint punctul central al unui cub virtual care cuprinde n interiorul
su obiectele urmrite de ctre senzor;
- size reprezint mrimea laturii cubului;
- enabled specific statutul senzorului, valorile sale sunt booleene;
Evenimente generate de ctre VisibilitySensor:
- enterTime reine momentul n care obiectele din interiorul cubului devin
vizibile;
- exitTime - reine momentul n care obiectele din interiorul cubului devin invizibile
utilizatorului;
- isActive ia valoarea TRUE atunci cnd obiectele din interiorul cubului devin
vizibile i FALSE cnd acestea devin invizibile;

144

Senzori de micare
Aceti senzori detecteaz micarea obiectelor declanat de ctre utilizatori, ns pe
lng aceast detecie senzorii au posibilitatea de a schimba poziia unui obiect definit n
acelai grup de noduri ca i senzorul. n VRML sunt definite 3 tipuri de senzori de micare:
senzor de plan (Plane Sensor) permite deplasarea obiectelor n sistemul de
coordonate XY;
senzor cilindric (Cylinder Sensor) permite deplasarea obiectelor pe
suprafaa unui cilindru virtual;
senzor sferic (Sphere Sensor) - permite deplasarea obiectelor pe suprafaa
unei sfere virtuale;
Cmpurile partajate de ctre aceste noduri sunt:
- enabled specific statutul senzorului (valoarea TRUE semnific senzor
activ, iar valoarea FALSE un senzor inactiv);
- offset memoreaz poziia iniial a obiectelor a cror poziie va fi
modificat. Cmpul conine valori ntregi, o valoare 0 ar nsemna c
obiectele sunt n poziia lor iniial, o valoare mai mare dect 0 nseamn
c deplasarea obiectelor va ncepe din poziia offset+valoare. Valoarea
alocat cmpului va fi ignorat dac n cmpul autoOffset se regsete
valoarea TRUE;
- autoOffset specific browserului dac deplasarea obiectelor se va realize
relativ la poziia lor iniial (i atunci autoOffset are valoarea TRUE) sau
relativ la poziia lor iniial, specificat n cmpul offset (n cazul n care
autoOffset are valoarea FALSE);
Evenimentele generate de ctre senzorii de micare:
- isActive indic faptul c o operaie de deplasare al unui obiect este n
curs (cmpul ia valori booleene);
- trackPoint_changed returneaz coordonatele actuale rezultate n urma
deplasrii obiectului;
- rotation_changed apare n definiia nodurilor SphereSensor i
CylinderSensor i returneaz rotaia realizat n timpul deplasrii
obiectului;
- translation_changed returneaz translaia realizat pentru deplasarea
obiectelor;
Nodul PlaneSensor
Sintax:
PlaneSensor {
enabled TRUE
offset 0 0 0
autoOffset TRUE
maxPosition 1 1
minPosition 0 0
}
Semantic:

145

Permite o deplasare a obiectelor VRML n sistemul de coordinate local n planul XY,

astfel nct micarea se poate limita la o suprafa dreptunghiular. Cmpurile specifice
acestui nod sunt:
- maxPosition reine valoarea maxim permis pentru X i Y;
- minPosition - reine valorile minime pentru X i Y;
n cazul n care valoarea specificat de maxPosition este mai mic dect cea din
minPosition, nu exist limitare n deplasarea obiectului.

Nodul SphereSensor
Sintax:
SphereSensor {
enabled TRUE
offset 0 1 0 0
autoOffset TRUE
}
Este folosit pentru a realiza micarea obiectelor pe suprafaa unei sfere imaginare
(deci n jurul centrului sistemului de coordonate local).

Nodul CylinderSensor
Sintax:
PlaneSensor {
enabled TRUE
offset 0
autoOffset TRUE
maxAngle -1
minAngle 0
diskAngle 0.262
}
Semantic:
Este folosit pentru a realize micarea obiectelor pe suprafaa unui cilindru imaginar
(adic n jurul axei Y al sistemului de coordinate local, limitnd micarea la un anumir unghi
dat).
Cmpurile nodului CylinderSensor sunt:
- offset cu aceeai semnificaie ca i n cazul celorlalte noduri de micare, ns
micarea se realizeaz relativ la valoarea de pe axa X;
- maxAngle specific rotaia maxim ce poate fi realizat;
- minAngle- specific rotaia minim;
Dac valoarea specificat n maxAngle este mai mic dect cea din minAngle, atunci
rotaia care se realizeaz nu este limitat (unghiul poate fi i de 360 de grade).

146

ProximitySensor - Senzori de proximitate

Acest tip de senzori sunt reprezentai de ctre nodul ProximitySensor. Acesta asigur
un anumit grad de interactivitate ntr utilizator i lumea VRML, genernd anumite
evenimente de fiecare dat cbd utilizatorul intr, iese sau se mic n interiorul unui spaiu
de control, delimitat printr-un cub imaginar. Senzorul nu ajut la determinarea poziiei
relative al obiectelor din lumea VRML.
Sintax:
ProximitySensor {
enabled TRUE
center 0 0 0
size 0 0 0
}
Semantic:
ProximitySensor are urmtoarele cmpuri:
- enabled specific statutul senzorului (poate fi activ sau inactiv);
- center conine coordonatele centrului cubului imaginar;
- size specific dimensiunea laturii cubului;
Evenimente generate de ctre ProximitySensor:
- isActive este generat cu valoarea TRUE atunci cnd senzorul este activ (cmpul
enabled are valoarea TRUE) i pointerul mouse-ului se deplaseaz dintr-o poziie
din exteriorul cubului ntr-o poziie din interiorul cubului. Cmpul ia valoarea
FALSE atunci cnd micarea se realizeaz n sens invers;
- enterTime este generat atunci cnd utlizatorul (prin intermediul mouse-ului)
acceseaz interiorul cubului. n momentul n care utilizatorul prsete interiorul
cubului se genereaz un eveniment exitTime. La orice micare a mouse-ului
(accesarea interiorului cubului, schimbarea poziiei n interiorul cubului sau
ieirea din cub) se genereaz urmtoarele evenimente:
o position_changed returneaz coordonatele 3D ale poziiei
utilizatorului;
o orientation_changed returneaz orientarea utilizatorului n
sistemul de coordinate;

147

viii. Definirea i instanierea de noduri. Noduri speciale.

3.8.1. DEF denumirea unui nod n VRML
n VRML se permite denumirea de grupuri de noduri sau redefinirea unor noduri deja
existente prin adugarea unor cmpuri noi la cele deja existente. Procesul de definire este cu
adevrat folositor atunci cnd este nevoie de aducerea unor modificri n interiorul definiiei
nodului, deoarece acestea se vor mregistra o singur dat (n cadrul definiiei) i nu n
fiecare instan al nodului definit.
Sintax:
{
DEF name node
}
Nodul astfel creat poate fi apelat folosind sintaxa:
{
USE name
}
3.8.2. Nodul Inline
Sintax:
Inline {
url []
bboxCenter 0 0 0
bboxSize -1 -1 -1
}
Semantic:
VRML permite ca lumea virtual s fie mprtiat n mai multe fiiere .wrl, astfel
nct codul s fie mai lizibil i gradul su de reutilizabilitate s fie crescut. Nodul Inline
permite definirea unui URL de unde browserul poate extrage datele necesare construciei
lumii 3D (URL-ul trebuie s conin calea absolut ctre un fiier VRML complet i corect).
Inline conine urmtoarele cmpuri:
- url specific locaia fiierului care va fi folosit pentru construcia lumii VRML,
se permite specificarea listelor de locaii, unde browserul poate cuta un anumit
fiier .wrl;
- bboxCenter are aceeai semnificaie ca i n cazul nodului Anchor;
- bboxSize - are aceeai semnificaie ca i n cazul nodului Anchor;
Nodurile definite n cadrul unui fiier VRML folosit n construcia unei lumi 3D
complexe, formate din fiiere multiple, nu sunt recunoscute i n exteriorul acelui fiier.

3.8.3. LOD (Level Of Detail )Node

Sintax:
LOD {
level []
center 0 0 0
148

range []
}
Semantic:
Nodul LOD permite ca un obiect VRML s fie reprezentat n mai multe versiuni la
care difer doar gradul de reprezentare ale detaliilor acelui obiect, n funcie de distana la
care acesta se afl de utilizator.
Nodul LOD are urmtoarele cmpuri:
- level reprezint multimea de reprezentri posibile ale obiectului VRML;
- center conine coordonatele unui punct 3D n funcie de care se va calcula
distana fa de obiectul reprezentat;
- range cuprinde o mulime de valori reale ce reprezint distanele fap de obiect,
n ordine cresctoare; valorile trebuie s fie mai mari sau egale dect 0.

ix. Interpolare n VRML

Operaia de interpolare se refer la definirea unei legturi directe dintre o cheie (key)
i o valoare a cheii (keyValue). Cheia poate avea valori cuprinse ntre 0.0 i 1.0, iar keyValue
poate fi reprezentat de orice tip de dat n funcie de tipul interpolrii. VRML permite
urmtoarele tipuri de interpolri:
- ColorInterpolator
- CoordinateInterpolator
- NormalInterpolator
- OrientationInterpolator
- PositionInterpolator
- ScalarInterpolator
Fiecare din aceste noduri are un eveniment eventIn de tip set_fraction (este acel
eveniment ce produce modificrile la nivelul nodului vizat) i un eventOut value_changed
(care reflect modificrile realizate). Legtura ntre cele dou evenimente este realizat de
ctre cheie: set_fraction stabilete valoarea ei, iar value_changed reacioneaz verificnd
valoarea lui keyValue, direct asociat cheii.
Operaiile de interpolare combinate cu efectele senzorului TimeSensor rezult n
apariia de lumi virtuale animate (lumi care conin variaii de culori, obiecte ce se
metamorfozeaz etc.). Modul de funcionare al acestor dou noduri este urmtorul:
TimeSensor are un eveniment fraction_changed care poate fi legat de evenimentul
set_fraction, folosind operaia de rutare a evenimentelor (ROUTE). Interpolatorul va genera
un eveniment value_changed care poate fi legat prin rutare de una din cmpurile expuse ale
unui nod obinuit. Rezultatul final const n modificarea unei anumite proprieti al
obiectului VRML (culoare, mrime, poziie etc.), odat cu trecerea timpului.
Cmpurile nodurilor de interpolare sunt key[] i value[], valorile alocate acestor
cmpuri avnd urmtoarea semnificaie: set_fraction primete ca parametru valorile din
key[], atunci valoarile returnate prin eveneimentul value_changed este keyValue.

149

Nodul ColorInterpolator
Este un nod de interpolare care n cmpul keyValue conine o list de valori RGB i
care are ca efect modificarea culorii obiectului VRML asupra cruia se aplic.
Sintax:
ColorInterpolator {
key [ ]
keyValue[ ]
}
Nodul CoordinateInterpolator
Este un nod de interpolare care n cmpul keyValue conine o list de coordonate 3D
i care are ca efect un control deplin asupra punctelor ce definesc orice obiect VRML, crend
senzaia de metamorfoz al acelui obiect.
Sintax:
CoordinateInterpolator {
key [ ]
keyValue[ ]
}
Nodul NormalInterpolator
Este un nod de interpolare care n cmpul keyValue conine o list de vectori 3D i
permite utilizatorului s modifice normalele definite n cadrul unui nod Normal.
Sintax:
NormalInterpolator {
key [ ]
keyValue [ ]
}
Nodul OrientationInterpolator
Este un nod de interpolare care n cmpul keyValue conine o list de parametri de
rotaie 3D (un set de coordonate 3D i un unghi de rotaie). Este folosit pentru crearea de
animaii prin rotaia obiectelor VRML asupra crora se aplic.
Sintax:
OrientationInterpolator {
key [ ]
keyValue[ ]
}
Nodul PositionInterpolator
Este un nod de interpolare care n cmpul keyValue conine o list de coordonate 3D
i care are ca efect animaia obiectelor VRML asupra crora se aplic prin deplasarea lor pe
ruta definit n keyValue.
Sintax:
PositionInterpolator {
key [ ]
keyValue[ ]

150

}
Nodul ScalarInterpolator
Este un nod de interpolare care n cmpul keyValue conine o list de valori reale
folosite pentru modificarea oricrui cmp expus cu valori reale (de exemplu: viteza cu care se
red un film sau sunet dac se modific valoarea cmpului speed).
Sintax:
ScalarInterpolator {
key [ ]
keyValue[ ]
}

VII.

VRML i JavaScript. Nodul Script

Folosind doar posibilitile oferite de ctre limbajul n sine, VRML s-a dovedit a fi
suficient de flexibil pentru a asigura interactivitatea lumii virtuale cu utilizatorul. Principalele
instrumente pe care VRML le asigur n acest scop sunt reprezentate de ctre gestionarea i
rutarea evenimentelor (events i routes), respectiv de ctre multitudinea de senzori VRML
(de micare, de coliziune, etc.). Totui, acestea ofer doar o interaciune limitat a lumii
virtuale cu utilizatorul ei.
Nodul Script vine n corectarea acestor neajunsuri, adugnd flexibilitate lumii
virtuale prin implementarea posibilitii de a aduga elemente comportamentale lumii 3D cu
ajutorul unor limbaje de programare, cum ar fi Java, JavaScript sau VRMLScript. Prin
intermediul nodului Script se pot genera evenimente multiple, se poate specifica un
comportament specific la apelarea fiecrui eveniment n parte i de asemenea se pot specifica
proceduri de iniializare, respectiv de distrugere a lumii VRML. Nodul Script este unul
special, deoarece permite definirea evenimentelor recepionate (ale cror valori se salveaz n
variabilele eventIn) i a evenimentelor proprii generate. La fel ca i orice alt nod i nodul
Script este format din cmpuri care funcioneaz ca nite variabile locale, numite persistente.
Nu exist cmpuri expuse n nodul Script, el ear putea fi create numai dac pe lng definirea
cmpului se vor defini i evenimentele eventIn, respectiv eventOut corespunztoare. Se
permite ns definirea unui numr nelimitat de cmpuri.
Exemplu de definiie de cmp expus:
field myField
eventIn set_myField
eventOut myField_changed
Nodul Script are urmtoarele cmpuri:
- url specific locaia scriptului care va fi executat (acesta poate fi scris n
limbaj Java, JavaScript sau VRMLScript);
- directOutput este un cmp Boolean care specific modul n care scriptul
va modifica lumea virtual: cu ajutorul unui eventOut, rutnd evenimentul
la un alt nod (ceea ce nseamn c evenimentul creat de ctre script va fi
folosit n acea rutare, situaie n care directOutput este FALSE) sau prin
accesarea direct a cmpurilor unui anumit nod (printr-o simpl atribuire,
situaie n care directOutput este TRUE);

151

mustEvaluate este un cmp Boolean cu ajutorul cruia se va specifica

modul n care browserul va gestiona evenimentele astfel nct ele s nu
influeneze negative procesul de desenare a graficii pe ecran (n cazul
acesta avnd valoarea FALSE). Dac acest cmp are valoarea TRUE,
browserul va procesa evenimentele n momentul n care ele se creeaz,
scznd astfel calitatea graficii afiate.

1. Cmpuri i evenimente n nodul Script

Definirea unui cmp din nodul Script se realizeaz prin specificarea tipului i al valorii
iniiale. Cele mai utilizate tipuri de date n VRML i corespondentul lor n JavaScript sunt:

152

Tip de dat n
Corespondent n Javascript
VRML

Descriere

SFBool

boolean

SFColor

float array with 3 components [Red,Green, Blue]

MFColor

Array of float array with 3 components

SFFloat

float

MFFloat

float array

SFImage

SFInt32
MFInt32
SFNode
MFNode
SFRotation
MFRotation
SFString
MFString
SFTime
MFTime
SFVec2f
MFVec2f
SFVec3f
MFVec3f

Single Boolean
Field
Single Color Field
Multiple Color
Field
Single Float Field
Multiple Float
Field

int array with at least 3 components. The first two specify

the width and height of the image, the third specifies the
Image Field
image type (see PixelTexture). The remaining components
specify the pixel colors as defined in the PixelTexture node.
Single Integer
int value
Field
Multiple Integer
int array
Field
Node is treated like an object, to access a node's field use
Single Node Field
the same notation as when accessing an object property
Multiple Node
Object array
Field
float array with four components: the first three indicate the Single Rotation
axis of rotation, the last component specifies the angle
Field
Multiple Rotation
Array of SFRotation
Field
String
Single String Field
Multiple String
String Array
Field
double
Single Time Field
Multiple Time
double array
Field
float array with two components
Single 2D Field
array of SFVec2f
Multiple 2D Field
float array with 3 components
Single 3D Field
array of SFVec3f
Multiple 3D Field

Exemple de definire de cmpuri:

field MFVec3f myPos [0 0 0, 1 1 1] definirea de vector cu componentele formate
din 3 numere reale;
field MFString myURLs ["clock2.wrl","land.wrl"] definirea unui vector de
stringuri;

153

n definirea evenimentelor eventIn sau eventOut nu se pot specifica valori iniiale:

eventIn SFRotation rot_changed
eventOut SFBool set_start
Se permite citirea sau modificarea cmpurilor prin alocarea unei valori noi, n
cazul evenimentelor se permite citirea evenimentelor de tip eventIn sau eventOut i
modificarea evenimentelor de tip eventOut.

2. Utilizarea nodului Script

Nodul poate fi utilizat pentru urmtoarele modificri n lumea virtual:
- crearea unui scenariu de iniializare a lumii 3D;
- procesarea unor evenimente menite s animeze lumea virtual;
- crearea unui scenariu de prsire a lumii 3D.
Iniializarea presupune folosirea unei funcii initialize () care se va executa naintea
oricrei alte aciuni, imediat dup ncrcarea fiierului VRML:
function initialize() {
...
}
Analog, prsirea lumii virtuale se realizeaz prin executarea funciei shutdown (), ea
fiind ultima care se proceseaz naintea de nchiderea fiierului VRML:
function shutdown() {
...
}
Pentru fiecare eventIn ce apare n nodul Script, trebuie definit un handler de
eveniment, reprezentat de o funcie cu 2 parametrii, numele funciei corespunznd-ui
numelui evenimentului. Parametrii handlerului reprezint valoarea generat de ctre
eveniment (value), respectiv momentul de timp al producerii evenimentului (timestamp):
function myEventIn(value,time) {
...
}
Urmtorul script ilustreaz modul de folosire al principalelor funcii, respectiv al
handlerului de evenimente:
DEF AnyScript Script {
eventIn SFBool someFunction1
eventIn SFVec3f someFunction2
url "javascript:
function initialize () {
// aici se gasesc toate initializerile, respectiv apelurile catre
//alte functii
// care se vor rula la initializarea lumii virtuale
}
function shutdown () {
// aici se gaseste codul de script sau apelurile catre functiile
// care se apeleaza la distrugerea lumii virtuale
}
function eventsProcessed () {
// functia aceasta se apeleaza la producerea de evenimente
// ea este folosita in scripturile unde nu conteaza
// ordinea generarii evenimentelor sau unde se genereaza un

154

// numar mai mic de evenimente comparativ cu numarul

// apelarilor de funcii
// astfel, evenimentele eventIn pot fi accesate folosind numele
// lor
// exemplu
var x=someFunction1;
}
function someFunction1 (val,ts) {
// val = valoarea transmisa/rutata catre eveniment
// Tipul acestui camp trebuie sa fie acelasi ca si tipul eventIn// ului functiei
// ts = Timestamp. Momentul generarii evenimentului.
// De obicei este vorba de momentul actual, insa poate fi
// specificat si alt moment, in scripturile mai complicate.
}
function someFunction2 (val,ts) {
// contine apelul unei alte funcii
someFunction3 (val,1,"test",ts);
}
function someFunction3 (a,b,c,d) {
// Funcie ce nu are eventIn declarat si nici TimeStamp
// permite parametrii diferiti ca tip si apelari multiple
}
"
}

3. Interaciunea dintre lumea VRML i JavaScript

Un script JavaScript este folosit pentru a crete gradul de interactivitate dintre lumea
virtual VRML i utilizator prin accesarea obiectelor/nodurilor care construiesc acea lume.
Nodurile sunt construite din cmpuri ce reprezint caracteristicile acestora, deci scriptul va
accesa aceste cmpuri, modificnd valoarea lor.
Exemplu: modul de acces al cmpului diffuseColor al unui nod de tip Shape:
DEF Sphere Shape {
appearance Appearance {
material Material {
diffuseColor .1 .44 .22
shininess .1
specularColor .15 .15 .02
ambientIntensity 0
emissiveColor .04 .18 .09
}
}
geometry Sphere {
radius 2
}
}
DEF AnyScript Script {
# Definim un camp SFNode care foloseste clauza USE pentru a
#accesa un nod din scena VRML
field SFNode Sphere USE Sphere
directOutput TRUE

155

url "javascript:
function initialize () {
// se printeaza campul Diffusecolor din Sphere
// accesul la campul dorit se face secvential, folosind .
// pentru a se accesa campurile nodului Sphere
print(Sphere.appearance.material.diffuseColor);
}
"
}
Rezultatul

rulrii

acestui

cod

const

afiarea

unei

sfere

de

culoare verde i valorii cmpului DiffuseColor, n felul urmtor:

JavaScript folosete i funcii predefinite de mai multe tipuri (matematice Math.sin,(),

Math.cos(), Math.log(), Math.sqrt() etc. sau referitoare la browser Browser.getName(),
Browser.getVersion(), Browser.getWorldURL() etc.) pentru a realiza modificrile necesare
crerii animaiei obiectelor 3D.

156

Concluzii
Limbajul VRML este unul destul de complex din punctul de vedere al posibilitilor
de creare de animaie oferite programatorilor. n momentul apariiei sale a cunoscut o
dezvoltare rapid, creia s-a datorat un grad mare de utilizare al acestui limbaj, n principal n
domeniul bio-chimiei i n lumea medical. ns ascendena tehnologiei VRML s-a oprit
brusc, principalul motiv fiind lipsa finanrii, iar mai apoi apariia unor tehnologii de
animaie mai performante ca vitez i mai puin costisitoare ca timp de execuie sau memorie
folosit pentru procesare. Din aceast cauz, la ora actual, VRML este folosit doar n
scopuri educative, ca introducere n nvarea tehnologiilor moderne, nelegerea
mecanismului de funcionare al limbajului garantnd o mai bun pricepere al noilor
tehnologii.
VRML are cteva caracteristici demne de menionat:
- ofer suport pentru orice fel de animaie, ncepnd de la suprafeele simple pn la
creare unor scene complexe din punctul de vedere al texturii, micrii i iluminrii
folosite;
- folosete anumite elemente ale programrii orientate pe obiecte, cum ar fi:
o folosirea entitilor tip nod (asemntoare claselor din programarea obiectorientat);
o posibilitatea de a creea o ierarhie de noduri, nodurile subordonate
motenind anumite caracteristici ale nodurilor tat;
o posibilitatea de a redefini comportamentul unor noduri deja create;
o posibilitatea de a refolosi comportamentul predefinit sau pe cel modificat
(perechea DEF/USE);
- ilustreaz foarte bine modul de iluminare al unei scene de animaie 3D, modalitatea
VRML de a se folosi de diferitele tipuri de iluminare fiind preluate i de alte
tehnologii de creare de animaie;
- ofer programatorului control total asupra lumii create: codul este lizibil i structurat
ntr-o manier care-l face uor de interpretat i modificat.

157

BIBLIOGRAFIE
1. JAVA, aplicaii , L.Sngeorzan, C-tin Lucian Aldea, Mihai R. Dumitru, Ed.
Infomarket, Braov, 2001, ISBN 973-8204-14-3.
2. HTML prin exemple, Tudor Gugoiu, Ed. Teora, 2001, ISBN 973 20 0455 X
3. Tehnologii WEB, Sabin Corneliu Buraga, Matrix Rom, Bucuresti 2001,nr. Pg. 662,
ISBN 973 685 28
4. BASIC COMPUTER SCIENCE and ENGLISH for CHEMESTRY TEACHERS,
L.Sngeorzan , Oana Tatu, Editura Univ. Transilvania, 2002, ISBN : 973-635-066-5.
5. Web Resources for Teaching and Studying English; An Introduction to HTML 4.0,
L.Sngeorzan, Oana Tatu, Adrian Tatu, Commenius Programme, 87160-CP-1_2000-1RO.COMENIUS C31, Ed. Univ.Transilvania,2003 , ISBN 973-635-208-0
6. Optimizarea paginilor WEB, Calin Ioan Acu , Ed.Polirim, 2003.
7. Initiere in Design, Robin Williams, Ed. Corint, 2003
8. Tehnologii internet, L.Sngeorzan, C-tin Lucian Aldea, Ed. Univ. Transilvania, 2003,
ISBN 973-635-176-9.
9. Design pentru WEB, Robin Williams, Ed. Corint, 2003, ISBN 973 653 421 9.
10. Grafic pe calculator :JAVA - teorie i aplicaii `, L.Sngeorzan, Jakab Kinga,, Ed.
Univ Transilvania, 2006, ISBN 973-635-713-9, ISBN 978-973-535-713-8
11. Crearea si programarea paginilor WEB, Tudor Sorin, Vlad Hutanu, ed. L&S SOFT,
2006, ISBN 973 86022 2 X.

158

CUPRINS
I. Consideraii generale privind Internet i World Wide Web .................................................. 2
Browsere WEB ..................................................................................................................... 3
Primii pai ctre construcia unui site ................................................................................... 4
II. Principii de baz n design ................................................................................................... 6
Alinierea................................................................................................................................ 6
Proximitatea .......................................................................................................................... 8
Repetiia .............................................................................................................................. 10
Contrastul............................................................................................................................ 11
III. HTML (Hyper Text Markup Language)........................................................................... 14
Crearea unui document HTML........................................................................................... 15
TAG-uri HTML .................................................................................................................. 16
Tag-uri din cadrul documentului HTML ........................................................................ 17
Culori, fonturi, margini ................................................................................................... 17
Tagul font (configurarea font-urilor) .............................................................................. 27
Tagul <table> (tabele)..................................................................................................... 36
Tagul <img> (imagini).................................................................................................... 43
Legaturi (link-uri) ........................................................................................................... 47
Formulare........................................................................................................................ 51
Evenimentele onfocus i onblur............................................................................... 56
Hri de imagini .............................................................................................................. 57
IV. Reguli CSS (Foi de stil n cascad) .................................................................................. 59
Structura unei reguli CSS.................................................................................................... 59
Integrarea regulilor CSS ntr-un fiier HTML ................................................................ 59
Class ca selector.............................................................................................................. 60
ID ca selector .................................................................................................................. 61
Sintaxa pentru definirea unui element ID este urmtoarea:............................................ 61
Comentarii....................................................................................................................... 61
Pseudo-clase i pseudo-elemente.................................................................................... 61
Pseudo-clasa anchor........................................................................................................ 61
Pseudo-elemente ............................................................................................................. 61
Precedena regulilor ........................................................................................................ 62
Stiluri in-line ............................................................................................................... 62
Stiluri definite n fiiere externe ......................................................................................... 62
Atribute CSS ................................................................................................................... 63
Font ............................................................................................................................. 63
Background i culoare................................................................................................. 64
Text ............................................................................................................................. 64
Distana dintre rnduri ................................................................................................ 64
Stiluri pentru diferite medii............................................................................................. 64
Configurarea blocurilor de text....................................................................................... 65
Limea chenarului...................................................................................................... 66
Exemplificm utilizarea regulilor CSS ............................................................................... 67
V. JavaScript ........................................................................................................................... 79
Carateristici ale limbajului JavaScript ................................................................................ 80
a. Limbajul JavaScript .................................................................................................... 82

159

b. Tipuri de date i variabile ........................................................................................... 82

c. Instruciuni .................................................................................................................. 83
d. Funcii predefinite....................................................................................................... 83
Exemplificri utiliznd JavaScript:..................................................................................... 84
Legtura dintre limbajul JavaScript i elementele dintr-un formular ............................. 86
Eventhandler ................................................................................................................... 90
Obiectul location......................................................................................................... 95
Obiectul document ...................................................................................................... 96
Obiectul forms ............................................................................................................ 98
Obiectul image .......................................................................................................... 100
Obiectul navigator..................................................................................................... 101
Obiectul layers (all-) .............................................................................................. 101
Obiectul Math ........................................................................................................... 106
Obiectul Array .......................................................................................................... 106
Animaii .................................................................................................................... 109
Aplicaii complexe utiliznd limbajul JavaScript ........................................................ 110
VI. Limbajul PHP ................................................................................................................. 123
Funciile matematice ..................................................................................................... 124
Funciile pentru prelucrarea irurilor de caractere ........................................................ 124
Declararea de vectori .................................................................................................... 124
Instruciuni i funcii pentru lucrul cu vectori: ......................................................... 124
Aplicaii complexe utiliznd limbajele PHP, JavaScript i HTML ............................. 125
VII. Limbajul VRML ....................................................................................................... 129
a. Avantaje/dezavantaje ale folosirii tehnologiei VRML ............................................. 129
b. VRML 1.0 vs. VRML 2.0......................................................................................... 129
c. Navigare n lumea virtual........................................................................................ 130
d. Construcia scenelor virtuale cu VRML ................................................................... 130
i. Structura i caracteristicile unui fiier VRML V2.0 ............................................. 131
ii. Noduri n VRML V2.0.......................................................................................... 131
iii.
Afiarea textului n VRML ........................................................................... 134
iv.
Nodul Appearance......................................................................................... 135
v. 3.5. Definirea surselor de lumin.......................................................................... 137
vi.
Noduri cu funcie de grupare......................................................................... 140
vii.
3.7. Evenimente............................................................................................. 141
viii.
Definirea i instanierea de noduri. Noduri speciale. ................................... 148
ix.
Interpolare n VRML..................................................................................... 149
VII. VRML i JavaScript. Nodul Script ........................................................................... 151
1. Cmpuri i evenimente n nodul Script..................................................................... 152
2. Utilizarea nodului Script ........................................................................................... 154
3. Interaciunea dintre lumea VRML i JavaScript....................................................... 155
Concluzii ........................................................................................................................... 157
BIBLIOGRAFIE................................................................................................................... 158

160