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
Ce tip de <input> creaza o paleta de culori pentru selectare culoare?
type="text" type="color" type="date"
<input type="color" name="get_color" />
Care metoda CSS roteste elementul HTML la un anumit numar de grade?
scale() translate() rotate()
#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}
Click pe functia care returneaza numarul cel mai mare.
pow() min() max()
var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88
Ce functie previne ca un fisier sa fie inclus mai mult de o data intr-o pagina?
include() include_once() require()
include_once("un_fisier.php");
Care este traducerea corecta pentru: "Ahead of time"?
Peste timp La timp Inainte de vreme
Most people arrived ahead of time.
- Cei mai multi oameni au sosit inainte de vreme (prea devreme).
Indicati traducerea corecta a cuvantului "buenĂ­simo"
mai bun mai putin bun extrem de bun
Este fruto es buenĂ­simo.
- Acest fruct este extrem /nemaipomenit de bun.
Proprietati si Metode obiect window

Last accessed pages

  1. Poezii pentru copii, in engleza (39408)
  2. Adjectivul in limba engleza - The adjective (24512)
  3. Lucrul cu mai multe cadre (3414)
  4. OOP - Constante, Proprietati si Metode Statice (3812)
  5. Node.js - Lectia de inceput, instalare (1919)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (411)
  2. Gramatica limbii engleze - Prezentare Generala (395)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (368)
  4. Exercitii engleza - English Tests and exercises - Grammar (304)
  5. Prezentul simplu - Exercitii si teste incepatori (263)