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

Cateva exemple

Proprietatea 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>
Proprietatea self face referire la fereastra curenta.
- Cu ea se poate verifica daca continutul e intr-un <iframe> sau in fereastra principala.
<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>
Proprietatea 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>

Ferestre Pop-up

Ferestrele Pop-up se pot crea din JavaScript cu dimensiuni si pozitie pe ecran stabilite de dv., folosind aceasta sintaxa

window.open('URL', 'name', 'props')
- 'URL' - adresa pentru continutul paginii din fereastra. Daca se adauga un sir gol, va afisa o pagina goala.
- 'name' - numele ferestrei.
- 'props' - (optional) perechi nume=valoare (separate prin virgula) cu proprietati pentru definirea ferestrei. Daca argumentul 'props' nu e adaugat, se va deschide fereastra ca un nou tab in browser.

- Exemplu, la clic pe un buton se deschide o fereastra cu dimensiuni si pozitie specificate.
<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>

Ferestre cu continut din JavaScript

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().

- Exemplu, la clic pe un buton se deschide o fereastra fara adresa URL, cu continut adaugat din JavaScript; si cu buton de inchidere.
<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 - scroll

Bara de derulare a paginii (scroll) apartine obiectului window. Acesta contine proprietati si metode pentru citirea si setarea pozitiei barelor de derulare a paginii.

• La obiectul window se poate inregistra evenimentul 'scroll' prin care se poate detecta cand se deruleaza pagina.

- Exemplu, buton de derulare cu scrollTo() si afisare coordonate ale barelor de derulare.
<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>

Salvare date in browser

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.


- Exemplu, la clic pe buton salveaza in browser textul adaugat in caseta de text. Iar la click pe alt buton afiseaza din localStorage textul retinut in browser.
<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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
Obiectul window

Last accessed pages

  1. Scriere scripturi PHP elementare (1576)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (20736)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (6659)
  4. Espanol Chistes - Glume, Bancuri (877)
  5. Sintaxa JavaScript (2435)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2144)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1480)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1072)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (1025)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (981)