JavaScript Window Object

JavaScript Window este o interfață globală (tip de obiect) care este utilizată pentru a controla ciclul de viață al ferestrei browserului și pentru a efectua diverse operații asupra acesteia.

O variabilă globală window, care reprezintă fereastra curentă a browserului în care rulează codul, este disponibilă în codul nostru JavaScript și poate fi accesată direct prin utilizarea literalului window.

Reprezintă o fereastră care conține o pagină web care, la rândul ei, este reprezentată de obiectul document. O fereastră poate fi o fereastră nouă, o filă nouă, un set de cadre sau un cadru individual creat cu JavaScript.

În cazul unui browser cu mai multe file, un obiect fereastră reprezintă o singură filă, dar unele dintre proprietățile sale, cum ar fi innerHeight, innerWidth și metodele, cum ar fi resizeTo(), vor afecta întreaga fereastră a browserului.

De fiecare dată când deschideți o fereastră sau o filă nouă, se creează automat un obiect fereastră care reprezintă acea fereastră/filă.

Proprietățile unui obiect fereastră sunt folosite pentru a prelua informații despre fereastra care este deschisă în acel moment, în timp ce metodele sale sunt folosite pentru a efectua sarcini specifice, cum ar fi deschiderea, maximizarea, minimizarea ferestrei, etc.

Pentru a înțelege obiectul fereastră, să îl folosim pentru a efectua unele operații și să vedem cum funcționează.

Utilizarea obiectului fereastră JavaScript

Să folosim obiectul fereastră JavaScript pentru a crea o fereastră nouă, folosind metoda open(). Această metodă creează o fereastră nouă și returnează un obiect care mai departe poate fi folosit pentru a gestiona acea fereastră.

În codul de mai sus, am folosit obiectul window al ferestrei existente pentru a crea o fereastră nouă folosind metoda open(). În metoda open() putem furniza URL-ul care urmează să fie deschis în noua fereastră (îl putem lăsa gol, de asemenea), numele ferestrei, lățimea și înălțimea ferestrei care urmează să fie creată.

În continuare este prezentată sintaxa pentru metoda open() a obiectului fereastră:

let newWindow = window.open(url, windowName, );

Putem furniza oricâte proprietăți dorim, în timp ce creăm o nouă fereastră.

Când metoda open() este executată, ea returnează referința obiectului fereastră pentru noua fereastră creată, pe care o puteți atribui unei variabile, așa cum am făcut în codul de mai sus. Noi am atribuit valoarea returnată de metoda window.open() la variabila win.

Am folosit variabila win pentru a accesa noua fereastră, cum ar fi obținerea numelui ferestrei, obținerea locației ferestrei care a deschis noua fereastră etc.

Există multe proprietăți și metode pentru obiectul fereastră, pe care le-am enumerat mai jos.

Căutarea dimensiunilor unei ferestre

Potem obține înălțimea și lățimea unei ferestre utilizând proprietățile încorporate ale obiectului fereastră.

De asemenea, putem accesa obiectul document folosind un obiect fereastră(window.document) care ne oferă acces la documentul HTML, prin urmare, putem adăuga noi elemente HTML, sau scrie orice conținut în document, așa cum am făcut în exemplul de mai sus.

JavaScript Window Object Properties

Proprietățile obiectului wondow se referă la variabilele create în interiorul obiectului windows.

În JavaScript, toate datele disponibile sunt atașate obiectului window sub formă de proprietăți.

Putem accesa proprietățile obiectului window cum ar fi:

Primul obiect window: window.propertyname unde numeproprietate este numele proprietății.

Un tabel cu cele mai populare proprietăți ale obiectului fereastră este prezentat mai jos:

.

Proprietate	Descriere
closed	returnează o valoare booleană care specifică dacă o fereastră a fost închisă sau nu
document	specifică un obiect document în fereastră.
history	specifică un obiect istoric pentru fereastră.
frames	specifică o matrice a tuturor cadrelor din fereastra curentă
	defaultStatus	specifică mesajul implicit care trebuie să apară în bara de stare a ferestrei.
innerHeight	specifică înălțimea interioară a zonei de conținut a ferestrei.
	innerWidth	specifică lățimea interioară a zonei de conținut a ferestrei.
length	specifică numărul de cadre conținute în fereastră.
locație	specifică obiectul locație pentru fereastră
nume	specifică numele ferestrei
top	specifică referința celei mai înalte ferestre din browser.
self	reîntoarce referința cadrului sau ferestrei active curente.
parent	reîntoarce cadrul sau fereastra părinte a ferestrei curente.
status	specifică mesajul care este afișat în bara de stare a ferestrei atunci când se efectuează o activitate pe fereastră.
screenleft	specifică coordonata x a ferestrei în raport cu ecranul monitorului unui utilizator
screenTop	Specifică coordonata y a ferestrei în raport cu ecranul monitorului unui utilizator
screenX	Specifică coordonatele x ale ferestrei în raport cu ecranul monitorului unui utilizator
screenY	Specifică coordonatele y ale ferestrei în raport cu ecranul monitorului unui utilizator

Să luăm un exemplu pentru a vedea câteva dintre aceste proprietăți în acțiune:

În exemplul de mai sus, am creat o fereastră nouă, doar pentru a vă familiariza cu crearea de ferestre noi și, de asemenea, pentru a vă face să înțelegeți că atunci când creăm o fereastră nouă, atunci fereastra curentă are un obiect fereastră diferit, iar noua fereastră va avea un obiect fereastră separat.

Am încercat apoi să accesăm câteva proprietăți ale noii ferestre create.

TASK: Încercați mai multe proprietăți ale ferestrelor din zona de joacă a codului de mai sus pentru a exersa și a înțelege cum funcționează proprietățile ferestrelor.

Metodele obiectului fereastră în JavaScript

Metodele obiectului fereastră se referă la funcțiile create în interiorul obiectului fereastră, care pot fi utilizate pentru a efectua diverse acțiuni asupra ferestrei browserului, cum ar fi modul în care afișează un mesaj sau primește informații de la utilizator.

În cele ce urmează am enumerat câteva dintre cele mai frecvent utilizate metode ale obiectului fereastră:

.

.

.

Metoda	Descriere
alert()	specifică o metodă care afișează o casetă de alertă cu un mesaj un buton OK.
blur()	specifică o metodă care înlătură focalizarea de pe fereastra curentă.
clearInterval()	specifică o metodă care șterge cronometrul, care este setat prin utilizarea metodei setInterval().
close()	specifică o metodă care închide fereastra curentă.
confirm()	specifică o metodă care afișează o casetă de dialog cu un mesaj și două butoane OK și Cancel
focus()	specifică o metodă care stabilește focalizarea pe fereastra curentă.
open()	specifică o metodă care deschide o nouă fereastră a browserului
moveTo()	specifică o metodă care deplasează o fereastră într-o poziție specificată
moveBy()	specifică o metodă care deplasează o fereastră în raport cu poziția sa curentă.
prompt()	specifică o metodă care solicită o intrare de date.
print()	specifică o metodă care trimite o comandă de tipărire pentru a imprima conținutul ferestrei curente.
setTimeout()	specifică o metodă care evaluează o expresie după un număr specificat de milisecunde.
setInterval()	specifică o metodă care evaluează o expresie la intervale de timp specificate (în milisecunde)
resizeBy()	specifică valoarea cu care va fi redimensionată fereastra
resizeTo()	utilizat pentru redimensionarea dinamică a ferestrei
	scroll()	reclină fereastra într-un anumit loc din document
scrollBy()	reclină fereastra cu valoarea dată
stop()	această metodă oprește încărcarea ferestrei

Să luăm un exemplu și să vedem câteva dintre metodele de mai sus în acțiune:

În exemplul de mai sus, am folosit câteva metode pentru ferestre, puteți încerca mai multe metode. În următorul tutorial vom învăța despre obiectul History, care este o proprietate a obiectului window.

.