Lucru cu browserul și BOM

Modelul Obiectului Browser și obiectul window

Lucrul cu browserul web și cu obiectele pe care acesta le oferă are o importanță mare în JavaScript. De exemplu, utilizarea obiectelor browserului permite manipularea elementelor HTML de pe pagină sau interacțiunea cu utilizatorul.

Toate obiectele prin care JavaScript interacționează cu browserul sunt descrise prin conceptul de Browser Object Model (Modelul Obiectului Browser).

Browser Object Model poate fi reprezentat ca următoarea schemă:

În vârf se află obiectul principal - obiectul window, care reprezintă obiectul global (practic reprezintă browserul). Acest obiect include, la rândul său, o serie de alte obiecte, în particular, obiectul document, care reprezintă o pagină web separată afișată în browser.

Obiectul window

Obiectul window reprezintă fereastra browserului web, în care sunt plasate paginile web. window fiind un obiect global, nu este necesar să folosim numele său când accesăm proprietățile și metodele sale. De exemplu, obiectul window are metoda alert(), care afișează o fereastră de mesaj. Dar nu este obligatoriu să scriem:

window.alert("Salut lume!");

Putem să nu folosim window:

alert("Salut lume!");

Dar fiind un obiect global, acest lucru implică unele restricții. De exemplu:

var alert = function(message){
   console.log("Mesaj: ", message);
};
window.alert("Salut lume!");

Prin var se definește o variabilă globală alert. Toate variabilele sau funcțiile globale declarate în program sunt adăugate automat la obiectul window. Și deoarece numele noii funcții va coincide cu numele metodei alert(), se va produce suprascrierea acestei metode în obiectul window cu noua funcție.

Și dacă declarăm în program o variabilă globală oarecare, aceasta ne este accesibilă ca proprietate în obiectul window:

var message = "salut";
console.log(window.message);

Proprietăți ale window

Prin intermediul proprietăților obiectului window putem obține diverse informații despre fereastra browserului. În particular, pentru determinarea poziției ferestrei se folosesc următoarele proprietăți:

innerHeight: conține înălțimea ferestrei, inclusiv barele orizontale de derulare
innerWidth: conține lățimea ferestrei, inclusiv barele verticale de derulare
outerHeight: conține înălțimea ferestrei browserului, inclusiv toate barele de derulare ale browserului
outerWidth: conține lățimea ferestrei browserului, inclusiv toate barele de derulare ale browserului
pageXOffset: sinonim pentru window.scrollX
pageYOffset: sinonim pentru window.scrollY
screenX: conține poziția ferestrei browserului pe axa X, adică distanța de la fereastra browserului până la marginea stângă a ecranului
screenY: conține poziția ferestrei browserului pe axa Y, adică distanța de la fereastra browserului până la marginea superioară a ecranului
scrollX: conține numărul de pixeli ai paginii web derulați orizontal
scrollY: conține numărul de pixeli ai paginii web derulați vertical

De exemplu, obținem poziția ferestrei:

console.log(window.innerHeight);
console.log(window.innerWidth);
console.log(window.screenX);
console.log(window.screenY);

Componentele browserului

Fereastra browserului este de obicei compusă din diferite componente. În funcție de browserul specific și de setările personale, setul specific de componente poate varia. Dar, în general, fereastra tipică a browserului arată astfel:

În afara zonei de conținut propriu-zis, în care este afișată pagina web, browserul web are o serie de componente:

bara de adrese pentru introducerea URL-ului sau a interogării de căutare (Address Bar)
bara de stare (Status Bar), care indică dacă pagina web este încărcată sau se află în procesul de încărcare
bara de meniu (Menu Bar)
bara de instrumente (ToolBar)
o anumită "bară personală" / "bară individuală", care, de exemplu, conține bookmark-uri (Personal Bar)
barele de derulare, care afișează poziția orizontală și verticală (Horizontal/Vertical ScrollBar)

Obiectul window are capacități limitate pentru interacțiunea cu aceste componente, în special, pentru a verifica prezența acestor componente, obiectul window are o serie de proprietăți:

locationbar: conține un obiect care indică dacă bara de adrese este afișată sau nu
menubar: indică dacă bara de meniu este afișată sau nu
personalbar: indică dacă bara personală (de exemplu, bara de bookmark-uri) este afișată sau nu
scrollbars: indică dacă barele de derulare sunt afișate sau nu
statusbar: indică dacă bara de stare este afișată sau nu
toolbar: indică dacă bara de instrumente este afișată sau nu

De exemplu, aflăm dacă bara personală este afișată:

console.log(window.personalbar); // BarProp {visible: true} sau BarProp {visible: false}

Proprietatea va returna un obiect BarProp, în care proprietatea visible indică dacă bara este afișată sau nu.

Proprietatea screen

Pentru a obține informații despre ecran se folosește, de asemenea, proprietatea screen a obiectului window. Această proprietate reprezintă un obiect de tip Screen:

availTop: indică înălțimea componentelor fixe care se alătură părții superioare a browserului, de exemplu, diferite bare superioare
availLeft: indică lățimea componentelor fixe care se alătură părții stângi a browserului, de exemplu, diferite bare laterale stângi
availHeight: conține înălțimea maxim disponibilă în pixeli minus înălțimea barelor superioare și inferioare
availWidth: conține lățimea maxim disponibilă în pixeli minus lățimea barelor laterale stângi și drepte
colorDepth: conține adâncimea de culoare a ecranului
height: conține înălțimea ecranului în pixeli
orientation: conține un obiect de tip ScreenOrientation, care oferă informații despre orientarea dispozitivului
pixelDepth: conține adâncimea pixelului ecranului
width: conține lățimea ecranului în pixeli

Exemplu de utilizare:

console.log(screen.availTop);       // 25
console.log(screen.availLeft);      // 0
console.log(screen.availHeight);    // 695
console.log(screen.availWidth);     // 1280
console.log(screen.width);          // 1280
console.log(screen.height);         // 800
console.log(screen.pixelDepth);     // 24
console.log(screen.colorDepth);     // 24