Curs Javascript


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 defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Obiectul window

Last accessed pages

  1. Articolul din limba engleza - The article (66424)
  2. Pronumele in limba engleza - Pronouns (52085)
  3. Less or Fewer - Exercitii Engleza (3159)
  4. Adjective - Exercitii si teste engleza incepatori (16300)
  5. Caractere speciale - Entitati HTML (12740)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (635)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (549)
  3. Gramatica limbii engleze - Prezentare Generala (446)
  4. Exercitii engleza - English Tests and exercises - Grammar (381)
  5. Coduri pt culori (371)