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">
<!--
function openWindow() {
myWindow= open("", "numeFereastra", "width=400,height=300,top=100,left=200,status=yes,toolbar=yes,menubar=yes");
myWindow.document.open();

// se creaza documentul
myWindow.document.write("<html><head><title>Document creat cu JavaScript");
myWindow.document.write("</title></head><body>");
myWindow.document.write("<center><h1>");
myWindow.document.write("Acest document a fost creat cu Java Script!");
myWindow.document.write("</h1></center>");
myWindow.document.write("</body></html>");

//Se inchide crearea documentului (nu fereastra)
myWindow.document.close();
}
// -->
</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 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: - 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:


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">
<!--
function statusbar(text) {
  window.status = text;
}
// -->
</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:

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">
<!--
function timer() {
  setTimeout("alert('S-a folosit metoda setTimeout')", 3000);
}
// -->
</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.
Obiectul window 1 <<-- Anterior --- Urmator -->> Ferestre Frame

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 2 - Tutoriale JavaScript