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.
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.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 <iframe> sau <object>, 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 <iframe> 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.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 <iframe> 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.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.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>
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().
<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().
<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'.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'.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'.
<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>
<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.