Curs Javascript


Obiectul window contine multe proprietati si metode, o lista intreaga puteti gasi la MDN: window object API.

- In continuare sunt prezentate unele din cele mai utilizate proprietati si metode ale obiectului window in JavaScript, cu exemple de cod.


Proprietati obiect window

console - returneaza o referinta la obiectul console, care contine metode pentru afisare de informatii din cod in consola din browser; utilizate in general pentru 'debug' (depanare cod). 
<h4>Exemplu console</h4>
<p>La clic pe buton, afiseaza in consola rezultatul apelarii metodei log() cu un array (vedeti si in consola browser-ului: F12).</p>
<button id='btn1'>Click</button>

<script>
var arr =['marplo.net', 'gamv.eu'];
document.getElementById('btn1').addEventListener('click', (ev)=>{
 console.log(arr);
});
</script>
document - returneaza obiectul document. - Vedeti tutorialul de la: marplo.net/javascript/dom-html-obiect-document
frameElement - returneaza un obiect cu elementul <iframe> sau <object> in care se afla continutul, sau null daca e fereastra principala. 
<h4>Exemplu frameElement</h4>
<p>La clic pe buton, daca acest continut e intr-un &lt;iframe&gt; sau &lt;object&gt;, afiseaza o fereastra alert si modifica adresa 'src' a iframe-ului; sau 'null' daca e in fereastra principala.</p>
<button id='btn1'>Click</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frme = window.frameElement;

 //daca e intr-o fereastra copil (iframe, object), schima adresa src
 if(frme){
 alert('Continutul nu e in fereastra principala');
 frme.src ='//marplo.net/';
 }
 else alert('null');
});
</script>
frames - returneaza un array cu elementele <iframe> din fereastra curenta. 
<h4>Exemplu frames</h4>
<p>La clic pe buton afiseaza numarul de elemente &lt;iframe&gt; din pagina, si modifica adresa din primul iframe (index 0).</p>
<button id='btn1'>Change iframe</button> <em id='resp'></em><br><br>
<iframe src="//marplo.net/"></iframe><br>
<iframe src="//gamv.eu"></iframe>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='Nr. iframe-uri: '+ window.length;
 var ifrm = window.frames;
 ifrm[0].location ='//marplo.net/blog';
});
</script>
history - returneaza obiectul history al ferestrei. - Vedeti tutorialul de la: marplo.net/javascript/history
innerHeight - returneaza inaltimea paginii din fereastra curenta (in pixeli). 
<h4>Exemplu innerHeight</h4>
<p>La clic pe buton afiseaza la #resp inaltimea paginii.</p>
<button id='btn1'>Get innerHeight</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='innerHeight: '+ window.innerHeight;
});
</script>
innerWidth - returneaza lungimea paginii din fereastra curenta (in pixeli). 
<h4>Exemplu innerWidth</h4>
<p>La clic pe buton afiseaza la #resp lungimea paginii.</p>
<button id='btn1'>Get innerWidth</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='innerWidth: '+ window.innerWidth;
});
</script>
isSecureContext - returneaza True daca pagina e cu continut securizat (adresa cu HTTPS), in caz contrar, False. 
if(window.isSecureContext){
 //pagina e cu continut securizat, se poate folosi service workers
 navigator.serviceWorker.register('/worker.js').then(function(){
 //...
 });
}
length - returneaza numarul de <iframe>-uri din fereastra curenta. 
<h4>Exemplu window.length</h4>
<p>La clic pe buton afiseaza numarul de elemente &lt;iframe&gt; din pagina.</p>
<button id='btn1'>Click</button> <em id='resp'></em><br><br>
<iframe src="//marplo.net/"></iframe><br>
<iframe src="//gamv.eu"></iframe>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='Nr. iframe-uri: '+ window.length;
});
</script>
localStorage - returneaza obiectul localStorage, care contine metode pentru adaugare si preluare date stocate 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.</p>
<div id='dv1'>
Text: <input type='text' value='marplo.net' id='txt1'><br>
<button id='btn1'>Add in storage</button>
</div>
<div id='dv2' style='display:none'>
<button id='btn2'>Get from storage</button>
<blockquote id='resp'>#resp</blockquote>
</div>

<script>
//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);

 //afiseaza div-ul cu al doilea buton
 document.getElementById('dv1').style.display ='none';
 document.getElementById('dv2').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>
location - returneaza obiectul location al ferestrei. - Vedeti tutorialul de la: marplo.net/javascript/obiectul-location
name - seteaza sau returneaza numele ferestrei (folosit in general pentru iframe si pop-up). 
<h4>Exemplu window.name</h4>
<p>La clic pe buton deschide o fereastra pop-up in care va fi afisat numele ei.</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=100');
popup.document.write('<p>Numele acestei ferestre: '+ popup.name +'</p>');
});
</script>
navigator - returneaza obiectul navigator al ferestrei. - Vedeti tutorialul de la: marplo.net/javascript/navigator
opener - returneaza o referinta a ferestrei (parinte) din care a fost creata fereastra la care e atasata. 
<h4>Exemplu window.opener</h4>
<p>La clic pe buton se deschide o fereastra pop-up cu un text si un buton.<br>
La clic pe butonul din ea se modifica culoarea background a ferestrei din care a fost deschisa (opener).</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
var popup = window.open('', 'TestWindow', 'width=330, height=180, left=35, top=90');

//adauga continut in fereastra popup
popup.document.write('<p>Clic pe buton sa modificati culoarea background de la "opener".</p><button onclick="window.opener.document.body.style.background=\'#dadefe\'">opener background</button>');
});
</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>
parent - face referire la fereastra parinte. 
<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>
screenX - returneaza distanta pe orizontala dintre marginea din stanga ecranului si marginea ferestrei (in pixeli). 
<h4>Exemplu window.screenX</h4>
<p>La clic pe buton deschide o fereastra pop-up in care va fi afisata distanta screenX (dintre marginea din stanga ecranului si pop-up).</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
popup.document.write('<p>screenX: '+ popup.screenX +'</p>');
});
</script>
screenY - returneaza distanta pe verticala dintre marginea de sus a ecranului si marginea ferestrei (in pixeli). 
<h4>Exemplu window.screenY</h4>
<p>La clic pe buton deschide o fereastra pop-up in care va fi afisata distanta screenY (dintre marginea de sus a ecranului si pop-up).</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
popup.document.write('<p>screenY: '+ popup.screenY +'</p>');
});
</script>
sessionStorage - returneaza obiectul sessionStorage, care contine metode pentru adaugare si preluare date stocate in sesiune in browser (valabile in fereastra curenta cat e deschisa). 
<h4>Exemplu sessionStorage</h4>
<p>La clic pe buton salveaza in sessionStorage textul adaugat in caseta de text.<br>
La click pe urmatorul buton care apare, afiseaza din sessionStorage textul salvat.</p>
<div id='dv1'>
Text: <input type='text' value='marplo.net' id='txt1'><br>
<button id='btn1'>Add in session</button>
</div>
<div id='dv2' style='display:none'>
<button id='btn2'>Get from session</button>
<blockquote id='resp'>#resp</blockquote>
</div>

<script>
//salveaza in sessionStorage valoarea de la #txt1, cu cheie 'some_key'
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var val = document.getElementById('txt1').value;
 sessionStorage.setItem('some_key', val);

 //afiseaza div-ul cu al doilea buton
 document.getElementById('dv1').style.display ='none';
 document.getElementById('dv2').style.display ='block';
});

//afiseaza la #resp textul salvat in sessionStorage cu cheie 'some_key'
document.getElementById('btn2').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = sessionStorage.getItem('some_key');
});
</script>
scrollX - returneaza pozitia barei orizontale de derulare fata de marginea din stanga (in pixeli). 
<h4>Exemplu scrollX</h4>
<p style='background:#fdfddb; width:230%;'>Daca derulati pagina pe orizontala spre dreapta, afiseaza la #resp distanta derulat fata de marginea din stanga.</p>
<blockquote id='resp' style='position:fixed;left:20%;'>#resp</blockquote>

<script>
var resp = document.getElementById('resp');

//detecteaza cand se face scroll la pagina
window.addEventListener('scroll', (ev)=>{
 resp.innerHTML ='scrollX: '+ window.scrollX;
});
</script>
scrollY - returneaza pozitia barei verticale de derulare fata de marginea de sus (in pixeli). 
<h4>Exemplu scrollY</h4>
<p>Daca derulati pagina pe verticala in jos, afiseaza la #resp distanta derulata fata de marginea de sus.</p>
<blockquote id='resp' style='position:fixed;left:20%;'>#resp</blockquote>
<div style='background:#fdfddb; height:2000px;'> </div>

<script>
var resp = document.getElementById('resp');

//detecteaza cand se face scroll la pagina
window.addEventListener('scroll', (ev)=>{
 resp.innerHTML ='scrollY: '+ window.scrollY;
});
</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>

Metode obiect window

alert('msg') - afiseaza o mica fereastra alert cu textul de la 'msg' si buton OK. 
<h4>Exemplu alert()</h4>
<p>La clic pe buton afiseaza o fereastra alert.</p>
<button id='btn1'>alert</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 alert('Pacea-i Buna. Daruieste si primesti.');
});
</script>
atob('s_64') - decodifica sirul de la 's_64' codificat base-64 (codificat cu btoa() ). 
<h4>Exemplu atob()</h4>
<p>La clic pe buton afiseaza decodificarea sirului de mai jos, codificat cu base-64.</p>
<button id='btn1'>Decodifica</button>
<blockquote id='resp'>RXUgc3VudA==</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var enc ='RXUgc3VudA==';
 var dec = atob(enc);
 document.getElementById('resp').innerHTML ='Sir codat: '+ enc +'<br>Decodat: '+ dec;
});
</script>
btoa(str) - codifica sirul 'str' in base-64. 
<h4>Exemplu btoa()</h4>
<p>La clic pe buton afiseaza la #resp codificarea in base-64 a sirului adaugat in caseta de text.</p>
Text: <input type='text' value='marplo.net' id='txt1'><br>
<button id='btn1'>Codifica</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var str = document.getElementById('txt1').value;
 document.getElementById('resp').innerHTML = btoa(str);
});
</script>
clearInterval(rsi) - opreste executia unei metode setInterval().
- 'rsi' reprezinta valoarea returnata de setInterval() 
<h4>Exemplu clearInterval()</h4>
<p>Un script din pagina afiseaza acest ceas, cu setInterval(). Daca apasati pe buton se opreste cu clearInterval().</p>
<blockquote id='resp'>#resp</blockquote>
<button id='btn1'>Stop Time</button>

<script>
//functie executata de setInterval()
function clock(){
 var dt = new Date();
 document.getElementById('resp').innerHTML = dt.toLocaleTimeString(); 
}
var rsi = setInterval(clock, 1000);

//la click pe #btn1 opreste executia rsi
document.getElementById('btn1').addEventListener('click', (ev)=>{
 clearInterval(rsi);
});
</script>
clearTimeout(rst) - anuleaza executia unei metode setTimeout().
- 'rst' reprezinta valoarea returnata de setTimeout() 
<h4>Exemplu clearTimeout()</h4>
<p>Daca apasati pe butonul Alert va fi afisata dupa 3 secunde o fereastra alert, cu setTimeout().<br>
Daca inainte de cele 3 secunde apasati butonul Cancel, va anula executia setTimeout().</p>
<button id='btn1'>Alert</button> - 
 <button id='btn2'>Cancel</button>

<script>
var rst;

//la click pe #btn1 afiseaza alert dupa 3 secunde
document.getElementById('btn1').addEventListener('click', (ev)=>{
 rst = setTimeout(()=>{ alert('Nu inseamna nimic');}, 3000);
});

//la click pe #btn2 anuleaza executia rst
document.getElementById('btn2').addEventListener('click', (ev)=>{
 clearTimeout(rst);
});
</script>
close() - inchide fereastra pop-up curenta. 
<h4>Exemplu window.close()</h4>
<p>La clic pe buton se deschide o fereastra pop-up in care e un buton Close.</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
popup.document.write('<p>Butonul Close va inchide fereastra.</p><button onclick="window.close()">Close</button>');
});
</script>
confirm('msg') - afiseaza o mica fereastra confirm cu textul de la 'msg' si doua butoane: OK si Cancel. 
<h4>Exemplu confirm()</h4>
<p>La clic pe buton afiseaza o fereastra confirm.</p>
<button id='btn1'>Confirm</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 confirm('Te iubesti, te ierti');
});
</script>
getComputedStyle(elm) - returneaza un obiect CSSStyleDeclaration cu proprietatile CSS aplicate la elementul 'elm'.
- Valoarea unei proprietati din obiectul returnat poate fi preluata cu metoda getPropertyValue('prop-name'). 
<h4>Exemplu getComputedStyle()</h4>
<p id='elm1' style='background-color:#fbfbbe;'>La clic pe buton afiseaza la #resp valoarea proprietatii CSS 'background-color' de la acest paragraf.</p>
<button id='btn1'>Click</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var elm = document.getElementById('elm1');
 var obcss = window.getComputedStyle(elm);
 document.getElementById('resp').innerHTML ='background-color: '+ obcss.getPropertyValue('background-color');
});
</script>
matchMedia('media-query') - returneaza un obiect MediaQueryList reprezentand rezultatul sirului CSS 'media-query'.
- 'media-query' e un sir cu reguli CSS @media (min-height, max-width, orientation, etc.), un tabel cu acestea la w3School: CSS @media Rule.
- Suporta evenimentul change (schimarea se poate folosi si cu o functie adaugata la metoda addListener(func)). 
<h4>Exemplu matchMedia()</h4>
<p>Culoarea background si textul din urmatorul Div se modifica daca lungimea feresrei e mai mica sau mai mare de 600px.

Incercati sa faceti fereastra mai mica si mai mare de 600px.</p>
<div id='elm1' style='background-color:#fbfbbe;'>Div</div>

<script>
var elm = document.getElementById('elm1');

var mql = window.matchMedia('(max-width: 600px)');

//functie apelata la schimarea rezultatului de la mql
function screenTest(ev){
 if(ev.matches){
 //fereastra are pana in 600px
 elm.innerHTML ='Div<br>Fereastra are pana in 600px.';
 elm.style.background ='#bdeebd';
 }
 else {
 //fereastra are peste 600px
 elm.innerHTML ='Div<br> - Aceasta fereastra are mai mult de 600px...';
 elm.style.background ='#cecefe';
 }
}

mql.addListener(screenTest); //Sau: mql.addEventListener('change', screenTest)
</script>
moveBy(x, y) - muta fereastra cu un numar de pixeli specificati la x si y (orizontal, vertical). 
<h4>Exemplu window.moveBy()</h4>
<p>La clic pe buton se deschide o fereastra pop-up, iar dupa 2 secunde va fi mutata cu moveBy().</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
 popup.document.write('<h3>Se muta imediat.</h3>');
 setTimeout(()=>{ popup.moveBy(150, 100);}, 2000);
});
</script>
moveTo(x, y) - muta fereastra la coordonatele specificate x si y (orizontal, vertical). 
<h4>Exemplu window.moveTo()</h4>
<p>La clic pe buton se deschide o fereastra pop-up, iar dupa 2 secunde va fi mutata cu moveTo().</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
 popup.document.write('<h3>Se muta imediat.</h3>');
 setTimeout(()=>{ popup.moveTo(240, 2);}, 2000);
});
</script>
open(URL, name, props) - deschide o noua fereastra in browser, cu continutul de la adresa URL specificata, si numele de la 'name'.
- 'props' e Optional, un sir cu parametri pt. setarea ferestrei: pozitie, dimensiuni (vedeti in exemplu). 
<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>
prompt('msg', 'default') - deschide o mica fereastra cu textul de la 'msg' deasupra unei casute de text input; iar 'default' este textul care va apare in casuta input. 
<h4>Exemplu prompt()</h4>
<p>Clic pe buton si vedeti cum functioneaza metoda prompt().</p>
<button id='btn1'>Open prompt</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var nume = window.prompt('Scrieti numele', 'Nume'); 
 document.getElementById('resp').innerHTML ='Salut '+ nume +'<br> Bine ai venit.';
});
</script>
resizeBy(w, h) - modifica dimensiunile fereastrei cu numarul de pixeli specificati la w si h (width, height) fata de dimensiunile curente. 
<h4>Exemplu window.resizeBy()</h4>
<p>La clic pe buton se deschide o fereastra pop-up, iar dupa 2 secunde va fi redimensionata cu resizeBy().</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
 popup.document.write('<h3>Se modifica imediat dimensiunile.</h3>');
 setTimeout(()=>{ popup.resizeBy(180, 140);}, 2000);
});
</script>
resizeTo(w, h) - seteaza dimensiunile fereastrei cu cele specificate la w si h (width, height). 
<h4>Exemplu window.resizeTo()</h4>
<p>La clic pe buton se deschide o fereastra pop-up, iar dupa 2 secunde va fi redimensionata la lungimea 450 si inaltimea 350 (pixeli).</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
 popup.document.write('<h3>Se modifica imediat dimensiunile.</h3>');
 setTimeout(()=>{ popup.resizeTo(450, 350);}, 2000);
});
</script>
scrollBy(x, y) - deruleaza continutul cu numarul de pixeli specificati la x si y (orizontal, vertical). 
<h4>Exemplu scrollBy()</h4>
<p style='background:#fdfddb; height:1800px; width:230%;'>La fiecare click pe buton pagina se va derula in jos cu 300 pixeli.<br>
Se afiseaza in buton coordonatele barelor de derulare, x si y.</p>
<button id='btn1' style='position:fixed;left:20%; top:170px;'>Scroll</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 window.scrollBy(0, 300);
 ev.target.textContent = window.scrollX +', '+ window.scrollY;
});
</script>
scrollTo(x, y) - deruleaza continutul (barele de scroll) la pozitiile specificate la x si y (orizontal, vertical). 
<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>
setInterval(funcN, mls) - apeleaza continuu functia 'funcN' la fiecare numar de milisecunde 'mls'. 
<h4>Exemplu setInterval()</h4>
<p>La click pe buton, se afiseaza dupa o secunda in locul lui un ceas, mentinut la secunda cu setInterval().</p>
<blockquote id='resp'><button>Clock</button></blockquote>

<script>
var resp = document.getElementById('resp');

//functie executata de setInterval()
function clock(){
 var dt = new Date();
 resp.innerHTML = dt.toLocaleTimeString();
}

//la click pe butonul din #resp
resp.querySelector('button').addEventListener('click', (ev)=>{
 ev.target.outerHTML =''; //anuleaza butonul

 //apeleaza functia clock la 1000 milisecunde
 setInterval(clock, 1000);
});
</script>
setTimeout(funcN, mls) - apeleaza functia 'funcN' dupa un numar de milisecunde 'mls'. 
<h4>Exemplu setTimeout()</h4>
<p>La click pe buton, se afiseaza dupa dupa 2.5 secunde in locul lui o imagine.</p>
<blockquote id='resp'><button>Clock</button></blockquote>

<script>
var resp = document.getElementById('resp');

//functie executata de setTimeout()
function addImg(){
 resp.innerHTML ="<img src='javascript/imgs/smile_gift.png' alt='Zambeste' height='115' width='128'/>";
}

//la click pe butonul din #resp
resp.querySelector('button').addEventListener('click', (ev)=>{
 ev.target.outerHTML ='Asteptati'; //anuleaza butonul

 //apeleaza functia addImg() dupa 2500 milisecunde
 setTimeout(addImg, 2500);
});
</script>
stop() - dupa apelare, opreste incarcarea paginii si a elementelor din ea care urmau sa se incarce (la fel ca apasarea butonului Stop din browser). 
<script>
//opreste incarcarea paginii dupa 20 secunde
setTimeout(()=>{ window.stop();}, 20000);
});
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
Proprietati si Metode obiect window

Last accessed pages

  1. Break si Continue (3991)
  2. Substantive - Exercitii si teste engleza incepatori (39958)
  3. Instructiuni conditionale if, else, switch (19790)
  4. Creare tabele HTML (17041)
  5. Stilizare tabele HTML cu CSS (8145)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (695)
  2. Coduri pt culori (311)
  3. Exercitii engleza - English Tests and exercises - Grammar (306)
  4. Gramatica limbii engleze - Prezentare Generala (298)
  5. Cursuri limba engleza gratuite si lectii online (278)