Obiectul window reprezinta fereastra din browser in care e afisat continutul.
Obiectul window se creaza automat pentru fiecare fereastra deschisa in browser, inclusiv pentru elemente <iframe> din pagina. Acesta contine proprietati si metode pentru lucru cu elemente ale ferestrei si ale paginii web.
- O lista cu proprietati si metode gasiti la pagina:
marplo.net/javascript/proprietati-metode-window
parent face referire la fereastra parinte (daca acel continut e intr-un <iframe>).
<h4>Exemplu parent</h4>
<p>La clic pe buton modifica culoarea background a ferestrei parinte, in care e aceasta fereastra (iframe).</p>
<button id='btn1'>Parent background</button>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
parent.document.body.style.background ='#bfbffe';
});
</script>
self face referire la fereastra curenta.
<h4>Exemplu self</h4>
<p>La clic pe buton verifica si afiseaza la #resp daca acest continut e intr-un iframe sau in fereastra principala din browser.</p>
<button id='btn1'>Check window</button>
<blockquote id='resp'>#resp</blockquote>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
if(window.top != window.self) var msg ='Acest continut e intr-un iframe.';
else var msg ='Acest continut e in fereastra principala.';
document.getElementById('resp').innerHTML = msg;
});
</script>
top face referire la fereastra primara din browser.
<h4>Exemplu top</h4>
<p>La clic pe buton modifica culoarea background a ferestrei primare (top) din browser.</p>
<button id='btn1'>Top background</button>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
top.document.body.style.background ='#c0c0fe';
});
</script>
outerHeight - returneaza inaltimea ferestrei (incluzand toolbar), in pixeli.
<h4>Exemplu outerHeight</h4>
<p>La clic pe buton afiseaza la #resp inaltimea acestei ferestre.</p>
<button id='btn1'>Get outerHeight</button>
<blockquote id='resp'>#resp</blockquote>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
document.getElementById('resp').innerHTML ='outerHeight: '+ window.outerHeight;
});
</script>
outerWidth - returneaza lungimea ferestrei (in pixeli).
<h4>Exemplu outerWidth</h4>
<p>La clic pe buton afiseaza la #resp lungimea acestei ferestre.</p>
<button id='btn1'>Get outerWidth</button>
<blockquote id='resp'>#resp</blockquote>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
document.getElementById('resp').innerHTML ='outerWidth: '+ window.outerWidth;
});
</script>
Ferestrele Pop-up se pot crea din JavaScript cu dimensiuni si pozitie pe ecran stabilite de dv., folosind aceasta sintaxa
<h4>Exemplu window.open()</h4>
<p>La clic pe buton se deschide o fereastra pop-up, cu aceste proprietati: <em>'width=650, height=450, left=30, top=50, menubar=0, titlebar=0'</em>.</p>
<button id='btn1'>Open pop-up</button>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
var popup = window.open('//gamv.eu/', 'TestWin', 'width=650, height=450, left=30, top=50, menubar=0, titlebar=0');
});
</script>
Metoda window.open() returneaza o referinta la fereastra deschisa cu ea. Folosind aceasta referinta, se pot deschide ferestre pop-up cu continut creat direct din JavaScript. In acest caz, la URL se adauga un sir gol.
In fereastra pop-up se poate adauga buton pentru inchiderea ferestrei cu metoda close().
<h4>Exemplu fereastra cu continut din JS si buton Close</h4>
<p>La clic pe buton deschide o fereastra pop-up in care se adauga elemente HTML din JavaScript si un buton Close.</p>
<button id='btn1'>Open pop-up</button>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
//deschide fereastra pop-up
var popup = window.open('', 'TestWindow', 'width=350, height=300, left=20, top=25');
//adauga html si text in ea
popup.document.write('<h1>Bucura-te, fii Fericit</h1>');
popup.document.write(`<blockquote style="color:#0000e0; font-size:18px;">Cea mai pretioasa avere pe care o ai, nimeni nu ti-o poate lua, o poti darui si transmite fara sa scada;<br>
Esti tu insuti, starea ta de a fi.<br>
Daruieste Bucurie si Pace prin starea ta,<br>
Ce si cum daruiesti, tu primesti.</blockquote>
<h4>Transmite Pace si Bucurie, fii Fericit!</h4>`);
popup.document.write('<p> - Nu spun ce sa faci, lumea te reflecta, Tu iti transmiti.</p>');
//adauga buton de inchidere
popup.document.write('<button onclick="window.close()">Close</button>');
//seteaza un background la Body din pagina deschisa
popup.document.body.style.background ='#fefee9';
});
</script>
Bara de derulare a paginii (scroll) apartine obiectului window. Acesta contine proprietati si metode pentru citirea si setarea pozitiei barelor de derulare a paginii.
scrollX - returneaza pozitia barei orizontale de derulare fata de marginea din stanga (in pixeli).scrollY - returneaza pozitia barei verticale de derulare fata de marginea de sus (in pixeli).scrollBy(x, y) - deruleaza continutul cu numarul de pixeli specificati la x si y (orizontal, vertical).scrollTo(x, y) - deruleaza continutul (barele de scroll) la pozitiile specificate la x si y (orizontal, vertical).scroll' prin care se poate detecta cand se deruleaza pagina.
<h4>Exemplu scrollTo()</h4>
<p style='background:#fdfddb; height:1500px; width:130%;'>La click pe buton, bara de derulare orizontala se va muta la pozitia 300, iar cea verticala se va derula in jos la pozitia 1100 (pixeli).<br>
Se afiseaza in buton coordonatele barelor de derulare, x si y (cu evenimentul 'scroll').<br>
- In partea de jos e un buton pentru scroll-top.</p>
<button id='btn1' style='position:fixed;left:20%; top:170px;'>Scroll</button>
<button onclick='window.scrollTo(0,0)' style='display:block; margin:5px 25px 8px auto;'>Go-Top</button>
<script>
var btn = document.getElementById('btn1');
btn.addEventListener('click', (ev)=>{
window.scrollTo(300, 1100);
});
//detecteaza cand se face scroll la pagina
window.addEventListener('scroll', (ev)=>{
//afiseaza in btn coordonatele barelor de derulare
btn.textContent = window.scrollX +', '+ window.scrollY;
});
</script>
Cu proprietatea localStorage din obiectul window se pot salva date in browser-ul utilizatorului pe timp nelimitat, pana cand acestea sunt sterse de utilizator sau de alt script.
Datele stocate in browser cu localStorage sunt salvate ca string (siruri), si pot fi accesate in site-ul din care au fost adaugate de fiecare data cand utilizatorul viziteaza acel site.
- Aceasta proprietate returneaza un obiect cu metode pentru adaugare si preluare date stocate in browser.
localStorage.setItem('key', 'val'); - stocheaza in browser valoarea 'val' ca sir asociat la numele 'key'localStorage.getItem('key'); - returneaza sirul retinut la 'key'localStorage.removeItem('key'); - sterge din localStorage elementul cu numele 'key'
<h4>Exemplu localStorage</h4>
<p>La clic pe buton salveaza in browser textul adaugat in caseta de text.<br>
La click pe urmatorul buton care apare, afiseaza din localStorage textul retinut in browser.<br>
- Daca in browser sunt deja salvate date de pe acest site la 'some_key' in localStorage, le afiseaza in elementul #resp.</p>
<div id='dv1'>
Text: <input type='text' value='marplo.net' id='txt1'><br>
<button id='btn1'>Add in storage</button>
</div>
<button id='btn2' style='display:none'>Get from storage</button>
<blockquote id='resp'>#resp</blockquote>
<script>
//verifica daca sunt date in localStorage la 'some_key'
var ls_val = localStorage.getItem('some_key');
if(ls_val) document.getElementById('resp').innerHTML ='Din localStorage:<br>'+ ls_val;
//salveaza in browser valoarea de la #txt1, cu cheie 'some_key'
document.getElementById('btn1').addEventListener('click', (ev)=>{
var str = document.getElementById('txt1').value;
localStorage.setItem('some_key', str);
//ascunde #dv1 si afiseaza al doilea buton
document.getElementById('dv1').style.display ='none';
document.getElementById('btn2').style.display ='block';
});
//afiseaza la #resp textul salvat in browser cu cheie 'some_key'
document.getElementById('btn2').addEventListener('click', (ev)=>{
document.getElementById('resp').textContent = localStorage.getItem('some_key');
});
</script>
<ul> <li>http://coursesweb.net/html/</li> <li>http://www.marplo.net/html/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.netI`m living here. - Traiesc /Locuiesc aici.
Estoy viviendo aquí. - Traiesc /Locuiesc aici.