Scrigroup - Documente si articole

     

HomeDocumenteUploadResurseAlte limbi doc
AccessAdobe photoshopAlgoritmiAutocadBaze de dateCC sharp
CalculatoareCorel drawDot netExcelFox proFrontpageHardware
HtmlInternetJavaLinuxMatlabMs dosPascal
PhpPower pointRetele calculatoareSqlTutorialsWebdesignWindows
WordXml


Programare WEB - OBIECTUL 'Window'

webdesign



+ Font mai mare | - Font mai mic



Curs - Programare WEB

OBIECTUL 'Window'



Un browser - indiferent de numele sau producatorul lui - este prezentat utilizatorului intr-o fereastra si tot ceea ce utilizatorul face cu browserul se executa in interiorul acelei ferestre. Mai mult chiar, toate elementele ecranului sunt de in fapt de asemenea continute in fereastra respectiva.

Obiectul 'Window' constituie chintesenta celor afirmate mai sus. El este considerat obiectul de nivelul ierarhic cel mai inalt in ierarhia obiectelor JS pe partea de client si contine toate celelalte obiecte pe partea de client - cu exceptia obiectului 'navigator' - conceptual diferit, el nedefinind un element propriu-zis vizual. dupa cum in practicaputem lucra cu mai multe ferestre deschise simultan tot asa putem lucra si cu mai multe obiecte 'Window' - de fapt cate una pentru fiecare fereastra eventual deschisa si cu care ar trebui sa lucram.

O alta particularitate legata de 'Window' este ca acest obiect nu are o eticheta HTML corespondenta ci se creaza automat atunci cand se deschide o nou fereastra de browser. In codul JS lucram cu un obiect de acest tip ca in exemplu de mai jos :

window.status='Bine ati venit';

Acest cod sursa adauga un text in bara de stare a ferestrei.

Ca si celelalte obiecte si 'Window' are o serie de proprietati si metode. Deoarece este obiectul de nivelul cel mai inalt unele dintre acestea pot fi apelate sau se poate face referire la ele fara a folosi 'window.' in fata lor; de exemplu metoda 'alert()' este un exemplu extrem de des intalnit in aceasta privinta.

TIP

ELEMENT

SEMNIFICATIE

Metode

atob()

decodifica un sir care a fost codificat in baza 64

alert()

afiseaza o caseta de avertizare cu sirul de text transferat

back()

incarca o pagina anterioara in locul instantei 'window'

blur()

dezactiveaza o fereastra

btob()

codifica un sir in baza 64

captureEvents()

stabileste ca fereastra sa captureze toate evenimentele de un tip specificat

clearInterval()

sterge intervalul stabilit cu metoda 'setInterval()'

clearTimeout()

sterge pauza stabilita cu metoda 'setTimeout()'

close()

inchide instanta ferestrei

confirm()

afiseaza o caseta de confirmare

crypto.random()

genereaza un sir aleator de date, a carui lungime este specificata de numarul de octeti transferati

crypto.signText()

intoarce un sir de date codificate care reprezinta un obiect semnat

disableExternalCapture()

dezactiveaza capturarea unui eveniment extern

enableExternalCapture()

activeaza capturarea unui eveniment extern pentru paginile incarcate din alte servere

find()

afiseaza o caseta de dialog 'Find' in care utilizatorul poate introduce text pentru cautare in pagina curenta

focus()

activeaza instanta 'window' specificata

forward()

incarca urmatoarea pagina in locul instantei 'window'

handleEvent()

apeleaza handlerul pentru evenimentul transferat

home()

incarca pagina de baza specificata a utilizatorului in locul instantei 'window'

moveBy()

deplaseaza fereastra cu valoarea specificata

moveTo()

deplaseaza fereastra in locatia specificata

open()

deschide o noua instanta a unei ferestre

print()

apeleaza caseta de dialog 'Print' astfel ca utilizatorul sa poata tipari fereastra curenta

prompt()

afiseaza o caseta de dialog

releaseEvents()

elibereaza evenimentele capturate de un tip specificat

resizeBy()

redimensioneaza fereastra cu valoarea specificata

resizeTo()

redimensioneaza fereastra la valoarea indicata

routeEvent()

transfera evenimentele de un tip specificat pentru a fi tratate nativ

scroll()

deruleaza documentul in fereastra pana la o locatie specificata

scrollBy()

deruleaza documentul in fereastra cu o valoare specificata

scrollTo()

deruleaza documentul pe latime si inaltime pana la o locatie specificata din fereastra

setHotKeys()

permite comutarea intre activarea si dezactivarea tastelor de selectare rapida cand nu sunt prezente meniuri

setInterval()

apeleaza o functie sau evalueaza o expresie la intervale de timp constand intr-un anumit numar de milisecunde

setResizeable()

permite specificarea posibilitatii redimensionarii unei ferestre

setTimeout()

apeleaza o functie sau evalueaza o expresie dupa un anumit numar de milisecunde

setZOptions()

permite specificarea stivuirii in ordinea Z a unei ferestre

stop()

opreste fereastra curenta sa incarce alt element in ea

Proprietati

closed

specifica daca instanta 'window' a fost inchisa

crypto

permite accesul la caracteristicile de criptare din Netscape Navigator

defaultStatus

specifica mesajul prestabilit in bara de stare a ferestrei

document

mentioneaza toate informatiile despre documentul din aceasta fereastra

frames

mentioneaza toate informatiile despre cadrele din aceasta fereastra

history

mentioneaza adresele URL vizitate de utilizator

innerHeight

contine inaltimea in pixeli a zonei afisate din fereastra curenta

innerWidth

contine latimea in pixeli a zonei afisate din fereastra curenta

length

reprezinta numarul de cadre din fereastra curenta

location

contine adresa URL curenta incarcata in browser

locationbar

face referire la bara de locatie a browserului

locationbar.visible

contine valoarea booleana care indica daca bara de locatie de pe browserul utilizatorului este vizibila

menubar

face referire la bara de meniuri a browserului

menubar.visible

contine valoarea booleana care indica daca bara de meniuri de pe browserul utilizatorului este vizibila

name

contine numele ferestrei

offscreen-Buffering

contine o valoare booleana care ne permite sa determinam daca vreo actualizare a ferestrei este executata intr-un buffer din afara ecranului

opener

contine numele ferestrei din care a fost deschisa o fereastra secundara

outerHeight

contine inaltimea in pixeli a suprafetei din exteriorul ferestrei curente

outerWidth

contine latimea in pixeli a suprafetei din exteriorul ferestrei curente

pageXOffset

contine coordonata X a ferestrei curente

pageYOffset

contine coordonata Y a ferestrei curente

parent

face referire la fereastra de nivelul cel mai inalt care afiseaza cadrul curent

personalbar

mentioneaza informatii despre bara personala a browserului

personalbar.visible

contine valoarea booleana care indica daca bara personala de pe browserul utilizatorului este vizibila

screenX

face referire la coordonata X a browserului, din marginea stanga a ferestrei

screenY

face referire la coordonata Y a browserului din marginea de sus a ferestrei

scrollbars

face referire la berele de derulare ale browserului

scrollbars.visible

contine valoarea booleana care indica daca barele de derulare de pe browserul utilizatorului sunt vizibile

self

face referire la fereastra curenta

status

face referire la mesajul de pe bara de stare a ferestrei

statusbar

face referire la bara de stare a browserului

statusbar.visible

contine valoarea booleana care indica daca bara de stare a browserului utilizatorului este vizibila

toolbar

face referire la bara de instrumente a browserului

toolbar.visible

contine valoarea booleana care indica daca bara de instrumente a browserului utilizatorului este vizibila

top

face referire la fereastra de nivelul cel mai inalt care afiseaza cadrul curent

window

face referire la fereastra curenta

Tabelul 2.5 - 5

OBIECTE DE CEL MAI INALT NIVEL

Obiectul 'Window' - prezentat chiar mai inainte - este obiectul de nivel cel mai inalt pe partea de client si contine patru obiecte copil, care formeaza baza pentru toate celelalte obiecte cu care vom lucra permanent. Aceste obiecte sunt :

Document

Frame

History

Location

Titlul acestui subcapitol poate genera o oarecare confuzie - introducem patru obiecte numite 'de cel mai inalt nivel' in timp ce chiar in paragrafele anterioare am spus ca obiectul 'Window' este de cel mai inalt nivel! Ei bine problema nu este de fapt deloc complicata - in final puteti considera orice obiect ca fiind de orice nivel doriti atat timp cat intelegeti ce si cum se poate realiza folosindu-l. Ca sa revenim, mentionez ca aceeasi aplicare a nivelurilor este destul de general acceptata datorita faptului ca obiectul 'Window' este intr-adevar de cel mai inalt nivel si este oarecum scos din ierarhie - considerat chiar deasupra ei, si ramanand astfel ca celelalte obiecte sa 'concureze' pentru celelalte - veti vedea mai tarziu - patru niveluri.

OBIECTUL 'Document'

Probabil ca acest obiect este cel mai important din intregul arsenal disponibil limbajului JavaScript. El este responsabil pentru continutul efectiv afisat pe o pagina si putem lucra cu el pentru a afisa pagini HTML dinamice. In document sunt continute de asemenea toate elementele obisnuite ale interfetei cu utilizatorul ale unei aplicatii web. In cele ce urmeaza vom prezenta metodele si proprietatile obiectului 'Document

TIP

ELEMENT

SEMNIFICATIE

Metode

captureEvents()

captureaza evenimentele care vor fi tratate de document

close()

inchide fluxul datelor de iesire spre document

contextual()

permite sa aplicam in mod selectiv un stil unui element HTML care apare intr-un context specific

getSelection()

intoarce textul selectat

handleEvent()

apeleaza handlerul pentru evenimentul specificat

open()

deschide fluxul datelor de iesire spre document

releaseEvents()

elibereaza evenimentele capturate de document

routeEvent()

dirijeaza evenimentele capturate spre alte obiecte

write()

adauga text in document

writeln()

adauga text si un caracter linie noua in document

Proprietati

alinkColor

culoarea unei legaturi active

all

tabloul tuturor etichetelor HTML din document

anchors

tabloul de obiecte 'Anchor'

applets

tabloul de obiecte 'Applet'

bgcolor

culoarea de fundal a documentului

classes

tabloul claselor paginilor cu stiluri

cookie

fisier cookie asociat cu documentul

domain

domeniu al documentului

embeds

tablou de obiecte inglobate

fgcolor

culoarea textului in document

forms

tablou de obiecte 'Form'

formName

specifica instanta 'Form' care este accesata prin folosirea valorii atributului 'name' in eticheta <form>

height

specifica inaltimea documentului in pixeli

ids

tabloul identificatorilor paginii cu stiluri

images

tablou de obiecte 'Image'

lastModified

data cand a fost modificat ultima oara documentul

layers

tablou de obiecte 'Layer'

linkColor

culoarea legaturilor

links

tablou de obiecte 'Link'

plugins

tablou de obiecte inglobate

referrer

adresa URL a documentului la care a fost legat documentul curent

tags

tabloul etichetelor paginii cu stiluri

title

titlul documentului

URL

adresa URL a documentului curent

vlinkColor

culoarea legaturilor vizitate

width

specifica latimea documentului in pixeli

Tabelul 2.5 - 6

OBIECTUL 'Frame'

Acest obiect reprezinta un cadru dintr-o structura de cadre. Intr-o prezentare de cadre multiple, obiectul 'Window' reprezinta de fapt pagina care contine tagul <frameset>, in timp ce celelalte pagini sunt considerate cadre in acest context.

In continuare prezentam metodele si proprietatile obiectului 'Frame' :

TIP

ELEMENT

SEMNIFICATIE

Metode

blur()

dezactiveaza cadrul

clearInterval()

anuleaza o executie repetata

clearTimeout()

anuleaza orice executie intarziata

focus()

activeaza un cadru

print()

apeleaza caseta de dialog 'Print'

setInterval()

stabileste planificarea functiei pentru executare repetata

setTimeout()

stabileste planificarea functiei pentru executare intarziata

Proprietati

document

documentul curent incarcat in interiorul unui cadru

frames

tablou continand referiri la cadrele copil

length

lungimea tabloului de cadre

name

atributul 'name' al etichetei <frame>

parent

fereastra principala sau cadrul principal din care sunt create cadrele copil

self

face referire la cadrul curent

top

fereastra de browser care executa scriptul

window

face referire la fereastra curenta sau la cadrul curent

Tabelul 2.5 - 7

OBIECTUL 'History'

Pentru a dezvolta cat mai clar si acest obiect ar fi bine sa luam un exemplu; sa consideram cazul in care utilizatorul trebuie sa execute clic pe un buton si sa se intoarca automat cu cinci pagini inainte in lista istoric. Handlerul de eveniment pentru butonul respectiv poate apela o functie care arata precum urmatoare :

<script type='text/javascript'>

function inapoi2Pagini()

</script>

In cele ce urmeza prezentam - cum deja cred ca v-ati obisnuit - lista cu metodele si proprietatile obiectului 'History

TIP

ELEMENT

SEMNIFICATIE

Metode

back()

incarca ultima adresa URL din lista istoric

forward()

incarca urmatoarea adresa URL din lista istoric

go()

incarca o adresa URL din lista istoric, folosind decalarea transferata

Proprietati

current

face referire la adresa URL curenta din lista istoric

length

intoarce numarul de intrari din lista istoric

next

face referire la urmatoarea adresa URL din lista istoric

previous

face referire la adresa URL anterioara din lista istoric

Tabelul 2.5 - 8

OBIECTUL 'Location'

In cadrulacestui obiect sunt continute informatiile despre originea unei pagini web. El este folosit pentru stocarea tuturor informatiilor despre adresa URL pentru o fereastra specificata.

De exemplu, daca dorim sa regasim portiunea de protocol a adresei URL curente si sa o evaluam folosim scriptul urmator :

<script type='text/javascript'>

function evalProtocol() else else

</script>

Tabelul de mai jos contine proprietatile si metodele acestui tip de obiect :

TIP

ELEMENT

SEMNIFICATIE

Metode

reload()

reincarca adresa URL curenta in fereastra de browser

replace()

incarca noua pagina transferata in browserul curent

Proprietati

hash

reprezinta un nume de ancora in adresa URL, care incepe cu caracterul diez ( # )

host

reprezinta numele calculatorului gazda si numarul de port al adresei URL

hostname

reprezinta partea cu numele calculatorului gazda din adresa URL

href

reprezinta adresa URL completa

pathname

reprezinta partea PATH_INFO a adresei URL

port

reprezinta partea de port a adresei URL

protocol

reprezinta partea de protocol a adresei URL

search

partea de cautare a adresei URL, inclusiv?

Tabelul 2.5 - 9

OBIECTE DE NIVELUL AL DOILEA

Dupa cum obiectul 'Window' are mai multe subobiecte tot asa si obiectul 'Document' are anumite subobiecte, care in ierarhia generala pot fi privite ca obiecte de nivelul al doilea.

OBIECTUL 'Anchor'

Acest obiect este un text sau o imagine in pagina HTML care poate fi tinta unei legaturi hipertext. Practic vom utiliza foarte putin acest obiect JS fiind poate cel mai putin important dintre obiectele de pe partea de client a JS.

Pentru a avea totusi o viziune clara asupra posibilitatilor sale sa vedem un tabel cu proprietatile sale :

PROPRIETATE

SEMNIFICATIE

name

nume care ofera acces la ancora de la o legatura

text

textul care apare intre etichetele <a> si </a>

x

coordonata x a ancorei

y

coordonata y a ancorei

Tabelul 2.5 - 10

OBIECTUL 'Area'

Acest obiect ne permite sa definim o suprafata a unei imagine ca fiind o harta de imagine. Atributul 'href' al unui obiect <area> este incarcat intr-o fereastra tinta atunci cand utilizatorul executa clic pe o locatie specificata.

Tabelul urmator prezinta proprietatile si metodele acestui obiect :

TIP

ELEMENT

SEMNIFICATIE

Metode

handleEvent()

apeleaza handlerul de eveniment asociat acestui eveniment

Proprietati

hash

portiunea de adresa URL care este ancora, inclusiv semnul diez ( # )

host

numele calculatorului gazda ( adresa IP ) si portul specificat in adresa URL

hostname

numele calculatorului gazda specificat in adresa URL

href

intreaga adresa URL

pathname

calea fisierului specificat in adresa URL, incepand cu simbolul /

port

portul specificat in adresa URL

protocol

protocolul specificat in adresa URL, inclusiv simbolul doua puncte ( : )

search

partea de cautare a adresei URL, inclusiv simbolul initial semnul intrebarii (? )

target

numele ferestrei tinta in care ar trebui afisata adresa URL

text

textul care apare intre etichetele <area> si </area>

x

coordonata x a suprafetei

y

coordonata y a suprafetei

Tabelul 2.5 - 11

OBIECTUL 'Applet'

Acest obiect reprezinta echivalentul JavaScript al etichetei HTML <applet>. Acest obiect adreseaza un applet Java. In general aceste obiecte JS nu au metode asociate dar acest aspect nu este foarte restictionant deoarece in practicaputem folosi JavaScript ca sa accesam metodele specifice ale unui anumit applet scris in limbajul  Java. Din acest considerent proprietatile obiectului 'Applet' sunt toate campurile publice ale respectivului applet Java iar metodele sunt toate metodele publice ale acestuia.

OBEICTUL 'Form'

Formularele sunt singurele elemente HTML standard care confera viata unor pagini statice, asigurand astfel o interfata cu care utilizatorii pot interactiona la un anumit nivel prin intermediul controalelor. In limitele unui formular putem plasa doar un buton, un text sau un alt obiect UI. Obiectul 'Form' este mijlocul prin care interactionam cu acest element HTML in cadrul scripturile noastre.

Metodele si proprietatile acestui obiect sunt prezentate in tabelul urmator :

TIP

ELEMENT

SEMNIFICATIE

Metode

handleEvent()

apeleaza handlerul de eveniment asociat acestui eveniment

reset()

readuce elementele formularului la valorile prestabilite

submit()

declanseaza un eveniment 'submit' anuntand browserul sa expedieze datele spre programul server specificat in atributul 'action' al etichetei <form>

Proprietati

action

contine atributul 'action' al unei instante <form>

elements

tablou care contine toate elementele din <form>

encoding

contine atributul 'enctype' al unei instante <fomr>

length

numarul de elemente continute in formular

method

contine atributul 'method' al unei instante <form>

name

contine atributul 'name' al unei instante <form>

target

contine atributul 'target' al unei instante <form>

Tabelul 2.5 - 12

OBIECTUL 'Image'

Conceptual, acest obiect este o incapsulare a unei imagini HTML. Poate ca utilizarea cea mai eficienta a acestui tip de obiect este la depozitarea in memoria cache a imaginilor pe care dorim sa le afisam. Putem construi un obiect 'Image' in codul nostru si sa descarcam datele imaginii de la server inainte de a fi necesare pentru afisare de catre browser. Cand o imagine este solicitata o putem extrage din cache, nu de la server - fapt care aduce o eficienta sporita a multor pagini bazate pe mult continut grafic.

Tabelul urmator contine metodele si proprietatile acestui obiect :

TIP

ELEMENT

SEMNIFICATIE

Metode

handleEvent()

apeleaza handlerul pentru evenimentul specificat

Proprietati

border

latimea bordurii in jurul imaginii

complete

anunta daca s-a terminat incarcarea imaginii

height

inaltimea imaginii

hspace

completarile din stanga si dreapta imaginii

lowsrc

imaginea alternativa pentru displayurile cu rezolutie joasa

name

numele imaginii

src

adresa URL a imaginii

vspace

completarile de deasupra si de sub imagine

width

latimea imaginii

Tabelul 2.5 - 13

OBIECTUL 'Layer'

Aici intalnim din nou un obiect cu anumite particularitati mai speciale. Acest obiect este recunoscut doar de browserele Netscape si permite limbajului JavaScript sa acceseze straturile in interiorul documentelor. Pentru mai mutlte informatii privind straturile si felurile in care functioneaza ele revedeti prima parte a lucrarii - partea legata direct de limbajul HTML.

Bineinteles ca vom prezenta totusi lista de metode si proprietati ale obiectului 'Layer' :

TIP

ELEMENT

SEMNIFICATIE

Metode

captureEvent()

specifica tipul de evenimente care sa fie capturate

handleEvent()

apeleaza handlerul pentru evenimentul specificat

load()

incarca o noua adresa URL

moveAbove()

deplaseaza stratul deasupra altui strat

moveBelow()

deplaseaza stratul sub alt strat

moveBy()

deplaseaza stratul intr-o pozitie specificata

moveTo()

deplaseaza coltul din stanga sus al ferestrei la coordonatele specificate ale ecranului

moveToAbsolute()

modifica pozitia stratului in pagina, conform coordonatelor specificate in pixeli

releaseEvents()

stabileste ca stratul sa elibereze evenimentele capturate de tipul specificat

resizeBy()

redimensioneaza stratul cu valorile de inaltime si latime specificate

resizeTo()

redimensioneaza stratul la valorile de inaltime si latime specificate

Proprietati

above

specifica stratul de deasupra

background

face referire la imaginea de fundal a stratului

below

specifica stratul de dedesubt

bgColor

face referire la culoarea de fundal a stratului

clip.bottom

face referire la partea de jos a suprafetei decupate a stratului

clip.height

face referire la inaltimea suprafetei decupate a stratului

clip.left

face referire la partea stanga a suprafetei decupate a stratului

clip.right

face referire la partea dreapta a suprafetei decupate a stratului

clip.top

face referire la partea de sus a suprafetei decupate a stratului

clip.width

face referire la latimea suprafetei decupate a stratului

document

face referire la obiectul 'Document' care contine stratul

left

face referire la coordonata X a stratului

name

face referire la numele stratului

pageX

face referire la coordonata X, relativ la document

pageY

face referire la coordonata Y, relativ la document

parentLayer

face referire la stratul container

siblingAbove

face referire la stratul de deasupra in 'zIndex'

siblingBelow

face referire la stratul de dedesubt in 'zIndex'

src

face referire la adresa URL sursa pentru strat

top

face referie la coordonata Y a stratului

visibility

face referire la starea de vizibilitate a stratului

window

face referire la obiectul 'Window' sau 'Frame' care contine stratul

x

face referire la coordonata X a stratului

y

face referire la coordonata Y a stratului

zIndex

face referire la ordinea z-relativa a acestui strat in raport cu fratii sai

Tabelul 2.5 - 14

OBIECTUL 'Link'

Acest obiect permite sa lucram cu legaturi in cadrul codului JS. Deoarece o legatura face pur si simplu referire la o alta pagina HTML sau la alta destinatie ea este similara obiectului 'Location' - care continea aceleasi informatii pentru pagina HTML curenta

Metodele si proprietatile acestui obiect sunt prezentate mai jos :

TIP

ELEMENT

SEMNIFICATIE

Metode

handleEvent()

apeleaza handlerul pentru evenimentul specificat

Proprietati

hash

reprezinta o denumire de ancora in adresa URL pentru legatura, care incepe cu caracterul diez ( # )

host

reprezinta portiunea de calculator gazda din adresa URL asociata cu o legatura

hostname

reprezinta portiunea de nume al calculatorului gazda din adresa URL asociata cu o legatura

href

reprezinta adresa URL completa asociata cu o legatura

pathname

reprezinta portiunea numelui de cale a legaturii URL

port

reprezinta portiunea de port a legaturii URL

protocol

specifica portiunea de protocol a legaturii URL

search

reprezinta portiunea de interogare a legaturii URL

target

reprezinta numele obiectului 'Window' in care este afisata legatura

x

face referire la coordonata X a legaturii

y

face referire la coordonata Y a legaturii

text

textul folosit pentru crearea legaturii

Tabelul 2.5 - 15



Politica de confidentialitate | Termeni si conditii de utilizare



DISTRIBUIE DOCUMENTUL

Comentarii


Vizualizari: 1325
Importanta: rank

Comenteaza documentul:

Te rugam sa te autentifici sau sa iti faci cont pentru a putea comenta

Creaza cont nou

Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved