Ferestrele sunt cele mai importante elemente de interfata in browser, iar JavaScript ofera multe modalitati de a le manipula.
In acesta lectie veti invata despre obiectul window, proprietatile si metodele acestuia, cum sa creati noi ferestre (pop-up) si sa le inchideti.

1. Proprietatile si metodele obiectului window

Un browser (indiferent de nume sau producator) este prezentat intr-o fereastra si tot ceea ce utilizatorul face cu browserul se executa in interiorul acelei ferestre. Toate elementele unei pagini web sunt de asemenea continute in fereastra respectiva.
Obiectul "Window" este considerat obiectul de nivel ierarhic cel mai inalt in ierarhia obiectelor JavaScript pe partea de client si contine toate celelalte obiecte pe partea de client (cu exceptia obiectului "navigator", conceptual diferit, nefiind un element propriu-zis vizual). Dupa cum în practica se poate lucra cu mai multe ferestre deschise simultan, la fel se poate lucra si cu mai multe obiecte "Window" (de fapt cate unul pentru fiecare fereastra).
Obiectul "Window" se creaza automat atunci cand se deschide o noua fereastra de browser.
Atentie sa nu confundati ferestrele distincte de browser cu cadrele (frame-urile), care de asemenea mai sunt numite ferestre (fiind de fapt subferestre ale ferestrei de browser).
Ca si celelalte obiecte si "Window" are o serie de proprietati si metode. Fiind obiectul de nivelul cel mai inalt unele dintre acestea pot fi apelate sau se poate face referire la ele fara a folosi in fata lor expresia "window." (cum e de exemplu metoda "alert()").

Obiectul window are urmatoarele proprietati:


Obiectul window are urmatoarele metode:

2. Crearea ferestrelor pop-up (metoda open)

Folosind JavaScript puteti deschide o noua fereastra in care se incarca o pagina HTML, cu dimensiuni, pozitie si proprietati stabilite de dv.. Aceste ferestre mai sunt numite si ferestre pop-up.
Pentru a crea o astfel de fereastra puteti folosi metoda "open", avand urmatoarea sintaxa:

            Unde :
Urmatorul script deschide o noua fereastra (numita si pop-up) care are dimensiunile 400x300 pixeli. Fereastra nu are bara de instrumente, bara de stare sau bara de meniu si va fi deschisa la o distanta de 200 pixeli fata de marginea din stanga si 100 pixeli fata de marginea de sus.
<script type="text/javascript">
<!--
function open_window() {
    fereastra = open("pagina.html", "numeFereastra", "width=400,height=300,left=200,top=100,status=no,toolbar=no,menubar=no");
}
//-->
</script>
<form>
    <input type="button" value="Deschide fereastra" onclick="open_window()">
</form>
- Butonul "Deschide fereastra" apeleaza, la click, functia "open_window()" care prin variabila "fereastra" executa metoda "open()", aceasta va deschide o fereastra noua cu proprietatile adaugate in metoda.
- Observati ca "fereastra" nu este numele ferestrei. Puteti accesa fereastra prin intermediul acestei variabile. Aceasta este o variabila normala care este valabila numai în interiorul unui script. Numele ferestrei (aici "numeFereastra") este un nume unic care poate fi folosit de toate ferestrele browserului.
Adaugand acest cod intr-un document HTML, in browser veti avea un buton ca cel de jos.
- Cand apasati pe buton, se va deschide o fereastra pop-up cu proprietatile specificate in metoda "open()".

3. Inchiderea ferestrelor (metoda close)

Pentru inchiderea unei ferestre se foloseste metoda close(). In fereastra pe care dorim sa o inchidem cu aceasta metoda adaugam un element de legatura <a> (link) sau un buton in care adaugam un eveniment "onClick" care executa metoda "close()" (sau "self.close()"), ca in exemplul urmator:

<a href="#" onclick="self.close()">Inchide</a>

sau

<form>
    <input type="button" value="Inchide" onclick="self.close()">
</form>
Cele doua elemente de inchidere a ferestrei au fost adaugate in pagina care se deschide cu fereastra pop-up din exemplul anterior.

open() si close() sunt metode ale obiectului "window". Normal am scrie window.open() si window.close(), dar obiectul "window" este o exceptie. Nu trebuie scris cuvantul "window" daca se apeleaza o metoda a unui obiect fereastra (aceasta este valabil numai pentru obiectul window).

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Obiectul window 1

Last accessed pages

  1. Trecut perfect continuu - Exercitii si teste incepatori (84)
  2. Trecutul simplu - Exercitii si teste incepatori (284)
  3. Lectii audio-video de limba engleza (403)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1455)
  5. Viitor simplu si continuu - Future Tense Simple and Continuous (673)

Popular pages this month

  1. Bubbles3 (3168)
  2. Gramatica limbii engleze - Prezentare Generala (2455)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2213)
  4. Butterfly Kyodai (2011)
  5. Zuma Deluxe (1950)