Obiectul window 2

Aceasta lectie continua prezentarea altor modalitati de folosire a ferestrelor.

1. Ferestre "on the fly" ("din mers")

Pentru a creea diferite ferestre trebuie sa scriem mai multe fisiere HTML.
Putem scrie scripturi care sa creeze ele documentul HTML (tag-urile, etichetele) care sa apara în fereastra noua, astfel nu mai este nevoie sa cream cate un fisier pentru fiecare pagina care va fi deschisa.
Puteti incarca aceste documente generate de script intr-o fereastra separata sau intr-un frame.
In primul rand trebuie modificata sintaxa "open", astfel incat sa nu incarce nici o pagina, deci in locul unde trebuie scrisa adresa URL vom scrie numai "" (doua ghilimele duble).
Pentru a crea continutul paginii HTML care va aparea în fereastra e necesar sa folosim metoda document.write() prin care pot fi create textul si codul pentru elementele HTML ale paginii.
Iata un exemplu din care veti putea intelege mai bine:

<html>
<head>
<title>Document generat de JavaScript</title>
<script type="text/javascript">

</script>
</head>
<body>
<form>
<input type="button" value="On_the_fly" onClick="openWindow()">
</form>
</body>
</html>

- Sa studiem functia windowOpen(). Vedem ca mai intai deschide o noua fereastra browser, cu metoda "open()".
- Primul argument al metodei este un sir gol (""), astfel nu va fi deschis un document extern. JavaScript o sa creeze noul document.
Am definit variabila "myWindow" prin care accesam noua fereastra (Observati ca nu puteti folosi numele ferestrei "numeFereastra" pentru aceasta operatie).
Dupa ce am deschis fereatra, vom deschide documentul care va fi afisat, asta se realizeaza prin

myWindow.document.open()

S-a folosit metoda "open()" a obiectului "document" (este diferita de metoda "open()" a obiectului "window"). Aceasta deschide un document in fereastra, pregatind documentul pentru urmatorul input.
Tot prin variabila "myWindow" si cu ajutorul "document.write" creem documentul dorit (codul HTML si continutul documentului afisat in noua fereastra). Puteti scrie orice etichete HTML sau text.
Dupa afisarea continutului din document, trebuie sa inchidem crearea documentul, aceasta se face prin urmatorul cod:

myWindow.document.close();

- aceasta linie de cod inchide "deschiderea de creare" a documentului, si nu fereastra.
Dupa ce adaugati tot acest cod intr-un fisier HTML, in browser veti avea un buton ca cel de jos, apasati pe el!

Aceasta metoda de crearea a paginilor printr-un script JavaScript este recomandata pentru ferestre gen pop-up, NU pentru pagini de site (paginare) cu un continut bogat!

2. Bara de stare (statusbar)

Bara de stare (statusbar) este bara din josul ferestrei browser-ului. Programele JavaScript pot scrie in aceasta bara, pentru aceasta trebuie sa dati o valoare lui:

window.status

Urmatorul exemplu va arata doua butoane, unul pentru a afisa un text in statusbar iar celalalt pentru stergerea acestui text.

<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<form>
<input type="button" name="scrie" value="Scrie in statusbar" onClick="statusbar('Aici este bara de stare!');">
<input type="button" name="sterge" value="Stegere" onClick="statusbar('');">
</form>
</body>
</html>

- Scriptul este simplu, avem o functie cu un argument "statusbar(text)", argumentul functiei (variabila "text") este transmis expresiei "window.status", care va afisea valoarea acestuia in bara de stare.
Am creat un formular cu doua butoane. Ambele butoane apeleaza prin evenimentul "onClick" functia "statusbar()". Butonul "Scrie" transmite functiei argumentul sir "Aici este bara de stare!", acest sir reprezinta valoarea variabilei "text" si va fi afisat in bara de stare.
- Pentru stergerea textului din statusbar, al doilea buton transmite functiei un sir gol, doua ghilimele simple (''), care preluat ca argument va determina expresia "window.status" sa inlocuiasca textul deja existent in bara de stare cu un sir gol.
Acest cod va arata in browser urmatoarele doua butoane:

- Apasati primul si al doilea buton, observati rezultatul obtinut in bara de stare.
Browserul Mozilla Firefox ar putea avea anulata optiunea de schimbare a textului din Statusbar, pentru activarea acestei optiuni in Mozilla Firefox, deschideti Tools - Options - Content aici asigurativa ca butonul "Enable JavaScript" este bifat, dati click pe Advanced si bifati "Change status bar text".

3. Utilizare setTimeout()

Cu ajutorul unui numarator (setTimeout) puteti face computerul sa execute un anumit cod dupa o anumita perioada de timp (specificata in milisecunde).
Sintaxa generala a acestuia este:

setTimeout("expresie", timp)

Unde "expresie" este expresia (codul) care va fi executat iar "timp" reprezinta pauza de timp - in milisecunde - dupa care va fi executata "expresie".
In urmatorul exemplu se creaza un buton iar daca apasati acest buton o fereastra va aparea dupa 3 secunde:

<script type="text/javascript">

</script>
<form>
<input type="button" value="Timer" onClick="timer()" />
</form>

setTimeout() este o metoda a obiectului window. Aceasta metoda fixeaza pauza (intreruperea) pana la executie.
Primul argument este codul JavaScript care va fi executat dupa o anumita perioada de timp, aici avem "alert('S-a folosit metoda setTimeout')". Observati ca secventa de cod JavaScript trebuie sa fie intre ghilimile. Cel de-al doilea argument spune computerului care este momentul în care codul va fi executat, trebuie sa specificati timpul în milisecunde (3000 millisecunde = 3 secunde).
Ruland acest exemplu intr-un browser, va arata urmatorul button:

- Click pe butonul "Timer" si asteptati 3 secunde, se va deschide o fereastra Alert.

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?

<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.