curs-9-web.doc

8/17/2019 curs-9-web.doc

1/15

Curs – Programare WEB

Curs – 9

OBIECTUL "Window"

Un browser - indiferent de numele sau producatorul lui - este prezentatutilizatorului intr-o fereastra şi tot ceea ce utilizatorul face cu browserul se eecuta in

interiorul acelei ferestre! ai mult c#iar$ toate elementele ecranului sunt de in fapt deasemenea continute in fereastra respecti%a!

Obiectul "Window" constituie c#intesenta celor afirmate mai sus! El esteconsiderat obiectul de ni%elul ierar#ic cel mai inalt in ierar#ia obiectelor &' pe partea

de client şi contine toate celelalte obiecte pe partea de client - cu eceptia obiectului"na%i(ator" - conceptual diferit$ el nedefinind un element propriu-zis %izual! dup) cum

*n practic)putem lucra cu mai multe ferestre desc#ise simultan tot asa putem lucra şi

cu mai multe obiecte "Window" - de fapt cate una pentru fiecare fereastra e%entualdesc#isa şi cu care ar trebui sa lucram!

O alta particularitate le(ata de "Window" este ca acest obiect nu are o etic#eta

+TL corespondenta ci se creaza automat atunci cand se desc#ide o nou fereastra de

browser! In codul &' lucram cu un obiect de acest tip ca in eemplu de mai ,os

window!status."Bine ati %enit"/

0cest cod sursa adau(a un tet in bara de stare a ferestrei!

Ca şi celelalte obiecte şi "Window" are o serie de proprietati şi metode!

1eoarece este obiectul de ni%elul cel mai inalt unele dintre acestea pot fi apelate sause poate face referire la ele fara a folosi "window!" in fata lor/ de eemplu metoda

"alert23" este un eemplu etrem de des intalnit in aceasta pri%inta!

TI4 ELEE5T 'E5I6IC0TIE

etode atob23 decodifica un şir care a

fost codificat in baza 78

alert23 afiseaza o caseta de

a%ertizare cu sirul de tettransferat

bac923 incarca o pa(inaanterioara in locul instantei

"window"

blur23 dezacti%eaza o fereastra

btob23 codifica un şir in baza78

captureE%ents23 stabileste ca fereastrasa captureze toate

e%enimentele de un tip

specificatclearInter%al23 ster(e inter%alul stabilit


2/15

cu metoda "setInter%al23"

clearTimeout23 ster(e pauza stabilita cu

metoda "setTimeout23"

close23 inc#ide instanta

ferestrei

confirm23 afiseaza o caseta deconfirmare

cr:pto!random23 (enereaza un şir aleator

de date$ a carui lun(ime estespecificata de numarul de

octeti transferati

cr:pto!si(nTet23 intoarce un şir de date

codificate care reprezinta un

obiect semnat

disableEternalCapture23 dezacti%eaza capturareaunui e%eniment etern

enableEternalCapture23 acti%eaza capturareaunui e%eniment etern pentru

pa(inile incarcate din alte

ser%ere

find23 afiseaza o caseta de

dialo( "6ind" in careutilizatorul poate introduce tet

pentru cautare in pa(inacurenta

focus23 acti%eaza instanta

"window" specificataforward23 incarca urmatoarea

pa(ina in locul instantei

"window"

#andleE%ent23 apeleaza #andlerul

pentru e%enimentul transferat

#ome23 incarca pa(ina de baza

specificata a utilizatorului in

locul instantei "window"

mo%eB:23 deplaseaza fereastra cu

%aloarea specificata

mo%eTo23 deplaseaza fereastra inlocatia specificata

open23 desc#ide o noua

instanta a unei ferestre

print23 apeleaza caseta de

dialo( "4rint" astfel cautilizatorul sa poata tipari

fereastra curenta

prompt23 afiseaza o caseta de

dialo(

releaseE%ents23 elibereazae%enimentele capturate de un


3/15

tip specificat

resizeB:23 redimensioneaza

fereastra cu %aloareaspecificata

resizeTo23 redimensioneaza

fereastra la %aloarea indicatarouteE%ent23 transfera e%enimentele

de un tip specificat pentru a fi

tratate nati%

scroll23 deruleaza documentul

in fereastra pana la o locatie

specificata

scrollB:23 deruleaza documentul

in fereastra cu o %aloarespecificata

scrollTo23 deruleaza documentul

pe latime şi inaltime pana la o

locatie specificata din fereastra

set+ot;e:s23 permite comutarea intre

acti%area şi dezacti%areatastelor de selectare rapida

cand nu sunt prezente meniuri

setInter%al23 apeleaza o func a uneiferestre

stop23 opreste fereastra

curenta sa incarce alt elementin ea

4roprietati closed specifica daca instanta

"window" a fost inc#isa

cr:pto permite accesul la

caracteristicile de criptare din

5etscape 5a%i(ator

default'tatus specifica mesa,ul

prestabilit in bara de stare aferestrei

document mentioneaza toateinformatiile despre documentul


4/15

din aceasta fereastra

frames mentioneaza toate

informatiile despre cadrele dinaceasta fereastra

#istor: mentioneaza adresele

U=L %izitate de utilizator inner+ei(#t contine inaltimea in

pieli a zonei afisate din

fereastra curenta

innerWidt# contine latimea in

pieli a zonei afisate din

fereastra curenta

len(t# reprezinta numarul de

cadre din fereastra curenta

location contine adresa U=Lcurenta incarcata in browser

locationbar face referire la bara delocatie a browserului

locationbar!%isible contine %aloarea booleana care indica daca bara

de locatie de pe browserul

utilizatorului este %izibila

menubar face referire la bara de

meniuri a browserului

menubar!%isible contine %aloarea

booleana care indica daca bara

de meniuri de pe browserulutilizatorului este %izibila

name contine numele

ferestrei

offscreen-Bufferin( contine o %aloare

booleana care ne permite sadeterminam daca %reo

actualizare a ferestrei este

eecutata intr-un buffer dinafara ecranului

opener contine numele

ferestrei din care a fostdesc#is) o fereastra secundara

outer+ei(#t contine inaltimea in

pieli a suprafetei dineteriorul ferestrei curente

outerWidt# contine latimea in pieli a suprafetei din

eteriorul ferestrei curente

pa(e?Offset contine coordonata ? a

ferestrei curente

pa(e@Offset contine coordonata @ aferestrei curente


5/15

parent face referire la fereastrade ni%elul cel mai inalt care

afiseaza cadrul curent

personalbar mentioneaza informatii

despre bara personala a

browserului personalbar!%isible contine %aloarea

booleana care indica daca bara personala de pe browserul


screen? face referire la

coordonata ? a browserului$din mar(inea stan(a a ferestrei

screen@ face referire lacoordonata @ a browserului din

mar(inea de sus a ferestrei

scrollbars face referire la berele

de derulare ale browserului

scrollbars!%isible contine %aloarea

booleana care indica daca

barele de derulare de pe browserul utilizatorului sunt

%izibile

self face referire la fereastra

curenta

status face referire la mesa,ul

de pe bara de stare a ferestreistatusbar face referire la bara de

stare a browserului

statusbar!%isible contine %aloarea

booleana care indica daca barade stare a browserului


toolbar face referire la bara de

instrumente a browserului

toolbar!%isible contine %aloarea

booleana care indica daca bara

de instrumente a browseruluiutilizatorului este %izibila

top face referire la fereastra

de ni%elul cel mai inalt care

afiseaza cadrul curent

window face referire la fereastra

curenta

Tabelul 2.5 - 5

OBIECTE 1E CEL 0I I50LT 5IAEL


6/15

Obiectul "Window" - prezentat c#iar mai inainte - este obiectul de ni%el cel

mai inalt pe partea de client şi contine patru obiecte copil$ care formeaza baza pentrutoate celelalte obiecte cu care %om lucra permanent! 0ceste obiecte sunt

- 1ocument

- 6rame- +istor:- Location

Titlul acestui subcapitol poate (enera o oarecare confuzie - introducem patru

obiecte numite "de cel mai inalt ni%el" in timp ce c#iar in para(rafele anterioare am

spus ca obiectul "Window" este de cel mai inalt ni%el Ei bine problema nu este defapt deloc complicata - in final puteti considera orice obiect ca fiind de orice ni%el

doriti atat timp cat intele(eti ce şi cum se poate realiza folosindu-l! Ca sa re%enim$mentionez ca aceeasi aplicare a ni%elurilor este destul de (eneral acceptata datorita

faptului ca obiectul "Window" este intr-ade%ar de cel mai inalt ni%el şi este oarecum

scos din ierar#ie - considerat c#iar deasupra ei$ şi ramanand astfel ca celelalte obiectesa "concureze" pentru celelalte - %eti %edea mai tarziu - patru ni%eluri!

OBIECTUL "1ocument"

4robabil ca acest obiect este cel mai important din intre(ul arsenal disponibil

limba,ului &a%a'cript! El este responsabil pentru continutul efecti% afisat pe o pa(inaşi putem lucra cu el pentru a afisa pa(ini +TL dinamice! In document sunt continute

de asemenea toate elementele obisnuite ale interfetei cu utilizatorul ale unei aplicatii

web! In cele ce urmeaza %om prezenta metodele şi proprietatile obiectului"1ocument"


etode captureE%ents23 captureaza e%enimentele care%or fi tratate de document

close23 inc#ide fluul datelor de iesirespre document

contetual23 permite sa aplicam in modselecti% un stil unui element +TL care

apare intr-un contet specific

(et'election23 intoarce tetul selectat#andleE%ent23 apeleaza #andlerul pentru

e%enimentul specificat

open23 desc#ide fluul datelor de iesirespre document

releaseE%ents23 elibereaza e%enimentelecapturate de document

routeE%ent23 diri,eaza e%enimentele capturatespre alte obiecte

write23 adau(a tet in document

writeln23 adau(a tet şi un caracter linie

noua in document

4roprietati alin9Color culoarea unei le(aturi acti%e


7/15

all tabloul tuturor etic#etelor +TLdin document

anc#ors tabloul de obiecte "0nc#or"

applets tabloul de obiecte "0pplet"

b(color culoarea de fundal a

documentuluiclasses tabloul claselor pa(inilor cu

stiluri

coo9ie fisier coo9ie asociat cu

documentul

domain domeniu al documentului

embeds tablou de obiecte in(lobate

f(color culoarea tetului in document

forms tablou de obiecte "6orm"

form5ame specifica instanta "6orm" care

este accesata prin folosirea %aloriiatributului "name" in etic#eta formD

#ei(#t specifica inaltimea documentuluiin pieli

ids tabloul identificatorilor pa(iniicu stiluri

ima(es tablou de obiecte "Ima(e"

lastodified data cand a fost modificat ultima

oara documentul

la:ers tablou de obiecte "La:er"

lin9Color culoarea le(aturilor

lin9s tablou de obiecte "Lin9" plu(ins tablou de obiecte in(lobate

referrer adresa U=L a documentului lacare a fost le(at documentul curent

ta(s tabloul etic#etelor pa(inii custiluri

title titlul documentului

U=L adresa U=L a documentului

curent

%lin9Color culoarea le(aturilor %izitate

widt# specifica latimea documentuluiin pieli

Tabelul 2.5 - 6

OBIECTUL "6rame"

0cest obiect reprezinta un cadru dintr-o structura de cadre! Intr-o prezentare de

cadre multiple$ obiectul "Window" reprezinta de fapt pa(ina care contine ta(ul

framesetD$ in timp ce celelalte pa(ini sunt considerate cadre in acest contet!In continuare prezentam metodele şi proprietatile obiectului "6rame"



8/15

etode blur23 dezacti%eaza cadrul

clearInter%al23 anuleaza o eecutie repetata

clearTimeout23 anuleaza orice eecutie intarziata

focus23 acti%eaza un cadru

print23 apeleaza caseta de dialo( "4rint"

setInter%al23 stabileste planificarea functiei pentru eecutare repetata

setTimeout23 stabileste planificarea functiei pentru eecutare intarziata

4roprietati document documentul curent incarcat ininteriorul unui cadru

frames tablou continand referiri lacadrele copil

len(t# lun(imea tabloului de cadre

name atributul "name" al etic#etei

frameD parent fereastra principala sau cadrul

principal din care sunt create cadrelecopil

self face referire la cadrul curent

top fereastra de browser care eecuta

scriptul

window face referire la fereastra curenta

sau la cadrul curent

Tabelul 2.5 - 7

OBIECTUL "+istor:"

4entru a dez%olta cat mai clar şi acest obiect ar fi bine sa luam un eemplu/ sa

consideram cazul in care utilizatorul trebuie sa eecute clic pe un buton şi sa seintoarca automat cu cinci pa(ini inainte in lista istoric! +andlerul de e%eniment pentru

butonul respecti% poate apela o func


9/15

istoric$ folosind decalarea transferata

4roprietati current face referire la adresa U=L curenta

din lista istoric

len(t# intoarce numarul de intrari din lista

istoric

net face referire la urmatoarea adresaU=L din lista istoric

pre%ious face referire la adresa U=L

anterioara din lista istoric

Tabelul 2.5 - 8

OBIECTUL "Location"

In cadrulacestui obiect sunt continute informatiile despre ori(inea unei pa(ini

web! El este folosit pentru stocarea tuturor informatiilor despre adresa U=L pentru ofereastra specificata!

1e eemplu$ daca dorim sa re(asim portiunea de protocol a adresei U=Lcurente şi s) o e%aluam folosim scriptul urmator

script t:pe."tet,a%ascript"D

function e%al4rotocol23 G

protocolCurent.window!location!protocol/if 2protocolCurent.."#ttp"3 G

alert2"1ocumentul %ine de pe web"3/

else G if 2protocolCurent.."file"3G

alert2"1ocumentul %ine de pe #ard disc"3/ else G

alert2"1ocumentul %ine de altunde%a"3/

scriptD

Tabelul de mai ,os contine proprietatile şi metodele acestui tip de obiect


etode reload23 reincarca adresa U=L curenta in

fereastra de browser

replace23 incarca noua pa(ina transferata in

browserul curent

4roprietati #as# reprezinta un nume de ancora in

adresa U=L$ care incepe cu caracterul diez

2 J 3

#ost reprezinta numele calculatorului

(azda şi numarul de port al adresei U=L

#ostname reprezinta partea cu numele


10/15

calculatorului (azda din adresa U=L

#ref reprezinta adresa U=L completa

pat#name reprezinta partea 40T+KI56O aadresei U=L

port reprezinta partea de port a adresei

U=L protocol reprezinta partea de protocol a

adresei U=L

searc# partea de cautare a adresei U=L$

inclusi%

Tabelul 2.5 - 9

OBIECTE 1E 5IAELUL 0L 1OILE0

1upa cum obiectul "Window" are mai multe subobiecte tot asa şi obiectul

"1ocument" are anumite subobiecte$ care in ierar#ia (eneral) pot fi pri%ite ca obiecte

de ni%elul al doilea!

OBIECTUL "0nc#or"

0cest obiect este un tet sau o ima(ine in pa(ina +TL care poate fi tintaunei le(aturi #ipertet! 4ractic %om utiliza foarte putin acest obiect &' fiind poate cel

mai putin important dintre obiectele de pe partea de client a &'!

4entru a a%ea totusi o %iziune clara asupra posibilitatilor sale sa %edem un

tabel cu proprietatile sale

4=O4=IET0TE 'E5I6IC0TIE

name nume care ofera acces la ancora de la o le(atura

tet tetul care apare intre etic#etele aD şi aD

coordonata a ancorei

: coordonata : a ancorei

Tabelul 2.5 - 10

OBIECTUL "0rea"

0cest obiect ne permite sa definim o suprafata a unei ima(ine ca fiind o #arta

de ima(ine! 0tributul "#ref" al unui obiect areaD este incarcat intr-o fereastra tintaatunci cand utilizatorul eecuta clic pe o locatie specificata!

Tabelul urmator prezinta proprietatile şi metodele acestui obiect


etode #andleE%ent23 apeleaza #andlerul de e%eniment

asociat acestui e%eniment

4roprietati #as# portiunea de adresa U=L care este

ancora$ inclusi% semnul diez 2 J 3

#ost numele calculatorului (azda


11/15

2 adresa I4 3 şi portul specificat in adresaU=L

#ostname numele calculatorului (azdaspecificat in adresa U=L

#ref intrea(a adresa U=L

pat#name calea fisierului specificat in adresaU=L$ incepand cu simbolul

port portul specificat in adresa U=L

protocol protocolul specificat in adresa

U=L$ inclusi% simbolul doua puncte 2 3

searc# partea de cautare a adresei U=L$

inclusi% simbolul initial semnul intrebarii

2 3

tar(et numele ferestrei tinta in care ar

trebui afisata adresa U=L

tet tetul care apare intre etic#eteleareaD şi areaD

coordonata a suprafetei

: coordonata : a suprafetei

Tabelul 2.5 - 11

OBIECTUL "0pplet"

0cest obiect reprezinta ec#i%alentul &a%a'cript al etic#etei +TL appletD!0cest obiect adreseaza un applet &a%a! In (eneral aceste obiecte &' nu au metode

asociate dar acest aspect nu este foarte restictionant deoarece *n practic)putem folosi&a%a'cript ca sa accesam metodele specifice ale unui anumit applet scris in limba,ul&a%a! 1in acest considerent proprietatile obiectului "0pplet" sunt toate campurile

publice ale respecti%ului applet &a%a iar metodele sunt toate metodele publice aleacestuia!

OBEICTUL "6orm"

6ormularele sunt sin(urele elemente +TL standard care confera %iata unor

pa(ini statice$ asi(urand astfel o interfata cu care utilizatorii pot interactiona la un

anumit ni%el prin intermediul controalelor! In limitele unui formular putem plasa doar un buton$ un tet sau un alt obiect UI! Obiectul "6orm" este mi,locul prin care

interactionam cu acest element +TL in cadrul scripturile noastre!etodele şi proprietatile acestui obiect sunt prezentate in tabelul urmator


etode #andleE%ent23 apeleaza #andlerul de e%enimentasociat acestui e%eniment

reset23 readuce elementele formularului la%alorile prestabilite

submit23 declanseaza un e%eniment"submit" anuntand browserul sa


12/15

epedieze datele spre pro(ramul ser%er specificat in atributul "action" al etic#etei

formD

4roprietati action contine atributul "action" al unei

instante formD

elements tablou care contine toateelementele din formD

encodin( contine atributul "enct:pe" al unei

instante fomrD

len(t# numarul de elemente continute in

formular

met#od contine atributul "met#od" al unei

instante formD

name contine atributul "name" al unei

instante formD

tar(et contine atributul "tar(et" al unei

instante formD

Tabelul 2.5 - 12

OBIECTUL "Ima(e"

Conceptual$ acest obiect este o incapsulare a unei ima(ini +TL! 4oate ca

utilizarea cea mai eficienta a acestui tip de obiect este la depozitarea in memoriacac#e a ima(inilor pe care dorim sa le afisam! 4utem construi un obiect "Ima(e" in

codul nostru şi sa descarcam datele ima(inii de la ser%er inainte de a fi necesare

pentru afisare de catre browser! Cand o ima(ine este solicitata o putem etra(e dincac#e$ nu de la ser%er - fapt care aduce o eficienta sporita a multor pa(ini bazate pe

mult continut (rafic!

Tabelul urmator contine metodele şi proprietatile acestui obiect


etode #andleE%ent23 apeleaza #andlerul pentrue%enimentul specificat

4roprietati border latimea bordurii in ,urul ima(inii

complete anunta daca s-a terminat

incarcarea ima(inii

#ei(#t inaltimea ima(inii#space completarile din stan(a şi dreapta

ima(inii

lowsrc ima(inea alternati%a pentrudispla:urile cu rezolutie ,oasa

name numele ima(inii

src adresa U=L a ima(inii

%space completarile de deasupra şi de sub

ima(ine

widt# latimea ima(inii

Tabelul 2.5 - 13


13/15

OBIECTUL "La:er"

0ici intalnim din nou un obiect cu anumite particularitati mai speciale! 0cestobiect este recunoscut doar de browserele 5etscape şi permite limba,ului &a%a'cript

sa acceseze straturile in interiorul documentelor! 4entru mai mutlte informatii pri%indstraturile şi felurile in care functioneaza ele re%edeti prima parte a lucrarii - parteale(ata direct de limba,ul +TL!

Bineinteles ca %om prezenta totusi lista de metode şi proprietati ale obiectului"La:er"


etode captureE%ent23 specifica tipul de e%enimentecare sa fie capturate

#andleE%ent23 apeleaza #andlerul pentrue%enimentul specificat

load23 incarca o noua adresa U=L

mo%e0bo%e23 deplaseaza stratul deasupra

altui strat

mo%eBelow23 deplaseaza stratul sub alt strat

mo%eB:23 deplaseaza stratul intr-o pozitie specificata

mo%eTo23 deplaseaza coltul din stan(a

sus al ferestrei la coordonatele

specificate ale ecranului

mo%eTo0bsolute23 modifica pozitia stratului in

pa(ina$ conform coordonatelor specificate in pieli

releaseE%ents23 stabileste ca stratul saelibereze e%enimentele capturate de

tipul specificat

resizeB:23 redimensioneaza stratul cu

%alorile de inaltime şi latimespecificate

resizeTo23 redimensioneaza stratul la%alorile de inaltime şi latime

specificate

4roprietati abo%e specifica stratul de deasupra bac9(round face referire la ima(inea de

fundal a stratului

below specifica stratul de dedesubt

b(Color face referire la culoarea de

fundal a stratului

clip!bottom face referire la partea de ,os a

suprafetei decupate a stratului

clip!#ei(#t face referire la inaltimea

suprafetei decupate a stratului

clip!left face referire la partea stan(a asuprafetei decupate a stratului


14/15

clip!ri(#t face referire la partea dreaptaa suprafetei decupate a stratului

clip!top face referire la partea de sus asuprafetei decupate a stratului

clip!widt# face referire la latimea

suprafetei decupate a stratuluidocument face referire la obiectul

"1ocument" care contine stratul

left face referire la coordonata ?a stratului

name face referire la numelestratului

pa(e? face referire la coordonata ?$relati% la document

pa(e@ face referire la coordonata @$relati% la document

parentLa:er face referire la stratulcontainer

siblin(0bo%e face referire la stratul dedeasupra in "zInde"

siblin(Below face referire la stratul dededesubt in "zInde"

src face referire la adresa U=Lsursa pentru strat

top face referie la coordonata @ astratului

%isibilit: face referire la starea de%izibilitate a stratului

window face referire la obiectul"Window" sau "6rame" care contine

stratul

face referire la coordonata ?

a stratului

: face referire la coordonata @

a stratului

zInde face referire la ordinea z-

relati%a a acestui strat in raport cufratii sai

Tabelul 2.5 - 14

OBIECTUL "Lin9"

0cest obiect permite sa lucram cu le(aturi in cadrul codului &'! 1eoarece ole(atura face pur şi simplu referire la o alta pa(ina +TL sau la alta destinatie ea este

similara obiectului "Location" - care continea aceleasi informatii pentru pa(ina

+TL curenta

etodele şi proprietatile acestui obiect sunt prezentate mai ,os


15/15


etode #andleE%ent23 apeleaza #andlerul pentru

e%enimentul specificat

4roprietati #as# reprezinta o denumire de ancora in

adresa U=L pentru le(atura$ care incepe

cu caracterul diez 2 J 3#ost reprezinta portiunea de calculator

(azda din adresa U=L asociata cu o

le(atura

#ostname reprezinta portiunea de nume al

calculatorului (azda din adresa U=L

asociata cu o le(atura

#ref reprezinta adresa U=L completa

asociata cu o le(atura

pat#name reprezinta portiunea numelui decale a le(aturii U=L

port reprezinta portiunea de port ale(aturii U=L

protocol specifica portiunea de protocol ale(aturii U=L

searc# reprezinta portiunea de intero(area le(aturii U=L

tar(et reprezinta numele obiectului"Window" in care este afisata le(atura

face referire la coordonata ? ale(aturii

: face referire la coordonata @ ale(aturii

tet tetul folosit pentru creareale(aturii

Tabelul 2.5 - 15

curs-9-web.doc

Documents