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:

• – closed – specifica daca instanta „window” a fost inchisa
  – crypto – permite accesul la caracteristicile de criptare din Netscape
  – defaultStatus – specifica mesajul prestabilit in bara de stare a ferestrei
  – document – mentioneaza toate informatiile despre documentul din aceasta fereastra
  – frames – mentioneaza toate informatiile despre cadrele din aceasta fereastra
  – history – mentioneaza adresele URL vizitate de utilizator in fereasrtra curenta
  – innerHeight – contine inaltimea in pixeli a zonei afisate din fereastra curenta
  – innerWidth – contine latimea in pixeli a zonei afisate din fereastra curenta
  – length – reprezinta numarul de cadre din fereastra curenta
  – location – contine adresa URL curenta incarcata in browser
  – locationbar – face referire la bara de locatie a browserului
  – locationbar.visible – contine valoarea booleana care indica daca bara de locatie de pe browserul utilizatorului este vizibila
  – menubar – face referire la bara de meniuri a browserului
  – menubar.visible – contine valoarea booleana care indica daca bara de meniuri de pe browserul utilizatorului este vizibila
  – name – contine numele ferestrei
  – offscreen-Buffering – contine o valoare booleana care ne permite sa determinam daca vreo actualizare a ferestrei este executata intr-un buffer din afara ecranului
  – opener – contine numele ferestrei din care a fost deschisa o fereastra secundara
  – outerHeight – contine inaltimea in pixeli a suprafetei din exteriorul ferestrei curente
  – outerWidth – contine latimea in pixeli a suprafetei din exteriorul ferestrei curente
  – pageXOffset – contine coordonata X a ferestrei curente
  – pageYOffset – contine coordonata Y a ferestrei curente
  – parent – face referire la fereastra de nivelul cel mai inalt care afiseaza cadrul curent
  – personalbar – mentioneaza informatii despre bara personala a browserului
  – personalbar.visible – contine valoarea booleana care indica daca bara personala de pe browserul utilizatorului este vizibila
  – screenX – face referire la coordonata X a browserului, din marginea stanga a ferestrei (Netscape)
  – screenY – face referire la coordonata Y a browserului din marginea de sus a ferestrei
  – scrollbars – face referire la barele de derulare ale browserului
  – scrollbars.visible – contine valoarea booleana care indica daca barele de derulare de pe browserul utilizatorului sunt vizibile
  – self – face referire la fereastra curenta
  – status – face referire la mesajul de pe bara de stare a ferestrei
  – statusbar – face referire la bara de stare a browserului
  – statusbar.visible – contine valoarea booleana care indica daca bara de stare a browserului utilizatorului este vizibila
  – toolbar – face referire la bara de instrumente a browserului
  – toolbar.visible – contine valoarea booleana care indica daca bara de instrumente a browserului utilizatorului este vizibila
  – top – face referire la fereastra de nivelul cel mai inalt care afiseaza cadrul curent
  – window – face referire la fereastra curenta

Obiectul window are urmatoarele metode:

• – atob() – decodifica un sir care a fost codificat in baza 64
  – alert() – afiseaza o fereastra de avertizare cu un anumit sir de text
  – back() – incarca o pagina anterioara vizitata in fereastra curenta
  – blur() – dezactiveaza o fereastra
  – btob() – codifica un sir in baza 64
  – captureEvents() – stabileste ca fereastra sa captureze toate evenimentele de un tip specificat
  – clearInterval() – sterge intervalul stabilit cu metoda „setInterval()”
  – clearTimeout() – sterge pauza stabilita cu metoda „setTimeout()”
  – close() – inchide fereastra
  – confirm() – afiseaza o fereastra de confirmare
  – crypto.random() – genereaza un sir aleator de date, a carui lungime este specificata de numarul de octeti transferati
  – crypto.signText() – intoarce un sir de date codificate care reprezinta un obiect semnat
  – disableExternalCapture() – dezactiveaza capturarea unui eveniment extern
  – enableExternalCapture() – activeaza capturarea unui eveniment extern pentru paginile incarcate din alte servere
  – find() – afiseaza o caseta de dialog „Find” in care utilizatorul poate introduce text pentru cautare in pagina curenta
  – focus() – activeaza instanta „window” specificata
  – forward() – incarca urmatoarea pagina in locul paginii curente din fereastra
  – handleEvent() – apeleaza handlerul pentru evenimentul specificat
  – home() – incarca pagina de baza specificata a utilizatorului in locul paginii curente din browser
  – moveBy() – deplaseaza fereastra cu valoarea specificata
  – moveTo() – deplaseaza fereastra in locatia specificata
  – open() – deschide o noua instanta a unei ferestre
  – print() – apeleaza caseta de dialog „Print” astfel ca utilizatorul sa poata tipari fereastra curenta
  – prompt() – afiseaza o fereastra cu caseta de dialog „prompt”
  – releaseEvents() – elibereaza evenimentele capturate de un tip specificat
  – resizeBy() – redimensioneaza fereastra cu valoarea specificata
  – resizeTo() – redimensioneaza fereastra la valoarea indicata
  – routeEvent() – transfera evenimentele de un tip specificat pentru a fi tratate nativ
  – scroll() – deruleaza documentul in fereastra pana la o locatie specificata
  – scrollBy() – deruleaza documentul in fereastra cu o valoare specificata
  – scrollTo() – deruleaza documentul pe latime si inaltime pana la o locatie specificata din fereastra
  – setHotKeys() – permite comutarea intre activarea si dezactivarea tastelor de selectare rapida cand nu sunt prezente meniuri
  – setInterval() – apeleaza o functie sau evalueaza o expresie la intervale de timp (constand intr-un anumit numar de milisecunde)
  – setResizeable() – permite specificarea posibilitatii redimensionarii unei ferestre
  – setTimeout() – apeleaza o functie sau evalueaza o expresie dupa un anumit numar de milisecunde
  – setZOptions() – permite specificarea asezarii in ordinea Z (tridimensionala) a unei ferestre
  – stop() – opreste fereastra curenta sa incarce alt element in ea

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:

• open(„URL”, „nume”, „proprietati”)

            Unde :

• – URL – reprezinta adresa documentului care va fi afisat in fereastra (e optional)
  – nume – este un sir care specifica numele ferestrei (e optional)
  – proprietati – este o lista de proprietati ale ferestrei (dimensiune, pozitionare, si altele). (e optional) Proprietatile trebuie sa fie separate prin virgula si fara spatii intre ele.

Urmatorul script deschide o noua fereastra (numita si pop-up) care are dimensiunile 400×300 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).

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

• 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”>
<!–
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:

• 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”>
<!–
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.

Ferestre Frame

In prezent noile metode si tendinte de creare a site-urilor folosesc mai putin frame-uri (cadre). Chiar daca nu le veti folosi, e bine sa cunoasteti aceste elemente deoarece le puteti gasi in alte documente si sa stiti despre ce este vorba.
Cadrele (frame-uri) sunt subferestre ale unei ferestre principale, in care sunt incluse.

1. Crearea cadrelor

Fereastra navigatorului poate fi impartita în mai multe frame-uri (cadre). Un frame este o parte din suprafata ferestrei browserului.
Fiecare frame prezinta în interior un document propriu (in general un document HTML). De exemplu puteti creea doua frame-uri intr-o fereastra, in primul frame puteti incarca o pagina de la o adresa (ex. google.com) iar in al doilea frame o alta pagina, de la alta adresa (ex. yahoo.com).
Crearea de frame-uri apartine limbajului HTML, dar am sa descriu cateva lucruri de baza.
Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:

• <frameset> , <frame> si <iframe>

Un exemplu de cod HTML care creaza o pagina cu doua frame-uri este urmatorul:

<html>
<frameset rows=”50%,50%”>
  <frame src=”pagina1.html” name=”frame1″>
  <frame src=”pagina2.html” name=”frame2″>
</frameset>
</html>

– Proprietatea „row” din eticheta <frameset> aseaza cele doua frame-uri in linie, unul deasupra celuilalt.
Primul frame, de deasupra, incarca si afiseaza „pagina1.html” iar al doilea frame incarca si afiseaza „pagina2.html”.
Daca vreti sa asezati cele doua frame-uri in coloana, unul langa altul, inlocuiti cuvantul „row” cu „cols”.
Expresia „50%,50%” reprezinta dimensiunea fiecarui cadru, exprimata in procente in raport cu fereastra principala.
Fiecare frame trebuie sa aibe un nume unic, exprimat prin atributul „name” din eticheta <frame>, cu ajutorul acestui nume se poate accesa in JavaScript cadrul dorit.
Pentru mai multe detalii desprea crearea de cadre, vedeti Cadre (lectia 10) din cursul HTML.
Pentru crearea unui cadru cu <iframe> puteti folosi urmatoarea sintaxa:

• <iframe src=”url_pagina” width=”600″ height=”200″ align=”center” scrolling=”yes” frameborder=”0″ name=”nume_frame”> </iframe>

– Unde „url_pagina” e adresa paginii care va fi incarcata in iframe, „width” si „height” reprezinta lungimea respectiv inaltimea cadrului (exprimata in procente sau pixeli), „scrolling” reprezinta permisiunea de derulare a paginii din cadru (yes sau no), „frameborder” specifica daca va fi sau nu afisata o margine (bordura) pentru cadru (1=da, 0=nu), iar „nume_frame” este numele cadrului care va fi folosit de JavaScript.

2. Obiectul Frame

Acest obiect face referire la un cadru (un frame) dintr-o structura de cadre incluse intr-o fereastra.
Intr-o pagina cu mai multe cadre, obiectul „Window” reprezinta de fapt pagina care contine tagul <frameset>, iar celelalte pagini sunt considerate cadre in acest context.

Obiectul frame are urmatoarele proprietati:

• document – reprezinta documentul curent incarcat in interiorul unui cadru
  frames – tablou ce contine referiri la cadrele copil
  length – lungimea tabloului de cadre (nnumarul de elemende)
  name – atributul „name” al etichetei <frame>
  parent – fereastra principala sau cadrul principal din care sunt create cadrele copil
  self – reprezinta referire la cadrul curent
  top – fereastra de browser care executa scriptul
  window – face referire la fereastra curenta sau la cadrul curent

Obiectul frame are urmatoarele metode:

• blur() – dezactiveaza cadrul
  clearInterval() – anuleaza o executie repetata
  clearTimeout() – anuleaza orice executie intarziata
  focus() – activeaza un cadru
  print() – apeleaza caseta de dialog „Print”
  setInterval() – stabileste planificarea functiei pentru executare repetata
  setTimeout() – stabileste planificarea functiei pentru executare intarziata

3. Frame-uri si JavaScript

Ierarhia elementelor paginii HTML create in primul exemplu (cele 2 cadre „frame1” si „frame2” asezate in linie) este urmatoarea:

• fereastra browser (parinte), care este in varful ierarhiei, aceasta contine doua cadre copii – „frame1” si „frame2”

Cu ajutorul numelor date cadrelor putem schimba informatii intre cele doua frame-uri impreuna cu fereastra principala, de exemplu putem face un link intr-un frame care sa deschida o pagina in celalalt frame.
In continuare vom studia trei cazuri de relatii si accesari intre ferestrele copil si fereastra parinte.

1. Fereastra parinte acceseaza o fereastra copil

• Daca aveti un script in fereastra parinte, ca sa se acceseze prin el frame-urile trebuie doar folosit numele frame-ului.
• De exemplu:
  • frame1.document.write(„Mesaj de la fereastra parinte”);

2. Fereastra copil acceseaza fereastra parinte

• Acest procedeu e util cand vreti sa eliminati cadrele din fereastra principala. Eliminarea structuri de cadre se face prin incarcarea unei pagini noi in locul paginii principale care a creat frame-ul (aici fereastra parinte).
• Se poate accesa fereastra parinte din interiorul unei ferestre copil cu ajutorul expresiei „parent”. Pentru a incarca un document nou in fereastra parinte se foloseste „location.href„, caruia ii dam un nou URL, ca in exemplul urmator:
  • parent.location.href = „http://adresa_url„; (adresa_url este adresa noi pagini care va fi incarcata)

3. O fereastra copil acceseaza o alta fereastra copil

• Nu exista legatura directa intre cele doua cadre, primul frame nu cunoaste existenta celuilalt.
• Pentru fereastra parinte, al doilea cadru (frame) este numit „frame2” iar fereastra principala, vazuta din primul frame este numita „parent”. Astfel, pentru a avea acces din primul frame la obiectul „document” al celui de-al doilea frame trebuie sa scriem urmatoarele:
  • parent.frame2.document.write(„Apel de la cadrul frame1”);

4. Navigarea prin cadre

Prin „navigarea prin cadre” se intelege deschiderea paginilor intr-un frame sau in fereastra principala printr-un link din alt frame. Acest lucru se poate face prin mai multe metode.
Pentru a intelegere mai bine, vom lua un exemplu concret.
Folosim o pagina cu doua cadre, in al doilea cadru vom avea legaturi catre mai multe pagini, dar care se vor incarca in primul cadru.

<html>
<frameset rows=”85%,15%”>
  <frame src=”prima.html” name=”frame1″>
  <frame src=”meniu.html” name=”frame2″>
</frameset>
</html>

Pagina „prima.html” reprezinta pagina initiala care va fi incarcata in primul frame, cu numele „frame1” (poate fi orice document HTML).
Pentru pagina care va fi incarcata in al doilea frame (meniu.html) vom folosi codul de mai jos pentru crearea ei.

<html>
<head>
<script language=”JavaScript”>
<!–
  function load(url) {
  parent.frame1.location.href= url;
}
// –>
</script>
</head>
<body>
<center>
  <a href=”javascript:load(‘test1.htm’)”>Link1</a> (<i>cu JavaScript</i>) –
  <a href=”test2.htm” target=”frame1″>Link2</a> (<i>cu target=”frame1″</i>) –
  <a href=”test2.htm” target=”_top”>Link3</a> (<i>cu target=”_top”</i>)
</center>
</body>
</html>

– Pentru a vedea cum functioneaza acest exemplu, click pe acest buton ->

– Se observa diferitele moduri de a incarca o pagina noua.

• – Primul link (Link1) foloseste functia „load()” dintr-un script
  – Al doilea link (Link2) foloseste atributul „target”, metoda standard HTML pentru cadre
  – Al treilea link (Link3) foloseste tot atributul „target”, de data aceasta prin valoarea „_top” va incarca pagina noua direct in fereastra principala, eliminand astfel cadrele.

In functie de proiectul dv. puteti decide care varianta e mai potrivita.
Folosind atributul HTML „target” este metoda cea mai simpla.
Solutia JavaScript este recomandata daca doriti sa faceti mai multe lucruri ca o consecinta a click-ului pe un link, de exemplu cand doriti ca printr-un click sa deschideti doua ferestre, in doua cadre diferite. Pentru aceasta puteti utiliza urmatorul script:

<script type=”text/javascript”>
<!–
function loadtwo() {
    parent.frame1.location.href= „pagina1.html”;
    parent.frame2.location.href= „pagina.html”;
}
//–>
</script>

– Cand va fi apelata fuctia „loadtwo()”, va incarca „pagina1.html” in „frame1” si „pagina2.html” in „frame2”.

Cookie-uri – 1

Valorile majoritatii variabilelor dintr-un script dispar atunci cand fereastra navigatorului este inchisa. Spre deosebire de acestea, valorile variabilelor cookie se pot pastra un timp indefinit. Pentru ca valorile lor sa se poata pastra, browserul utilizatorului stocheaza variabilele cookie în unitatea de hard-disc a utilizatorului.
Astfel, cookie-urile sunt fisiere care contin diferite date despre un anumit site vizitat si valori de variabile, salvate pe calculatorul vizitatorului.
In aceasta lectie veti invata cum puteti folosi JavaScript pentru a manipula fisiere cookie.

1. Fisierele cookie

Un cookie consta in principal dintr-o pereche nume=valoare, iar caracteristici mai avansate permit stabilirea unei date de expirare si pot preciza ce pagini web vad informatia cookie.
Unul dintre avantajele folosirii fisierelor cookie este persistenta acestora. Un fisier cookie poate persista luni de zile (sau ani), simplificand vizitele ulterioare ale utilizatorului pe site, deoarece informatiile referitoare la vizite si preferintele utilizatorului sunt salvate si preluate din cookie de fiecare data cand va reveni la site.
Fisierele cookie sunt deosebit de utile cand sunt folosite cu JavaScript, deoarece JavaScript are functii pentru citirea, adaugarea si editarea fisierelor cookie.
Fisierele cookie au si unele dezavantaje, fiind stocate pe calculatorul utilizatorului acestea poat fi sterse din gresela (sau intentionat).
Browserul impune restrictii privind dimensiunea si numarul de fisiere cookie care pot fi stocate, iar fisierele cookie mai noi le pot suprascrie pe cele vechi.

• – Numarul total de cookie-uri pentru un server sau domeniu este de 200
  – Numarul total de fisiere cookie pentru un browser este de 300
  – Marimea maxima a unui fisier cookie este 4 kb.

Daca aceste limite sunt depasite, browserul va sterge cele mai vechi cookie-uri si nefolosite.
Cand un utilizator trece de la un browser la altul, fisierele cookie salvate de un browser nu sunt recunoscute de celalalt
Daca mai multi utilizatori folosesc acelasi calculator si acelasi browser ei pot folosi fisiere cookie care apartin altcuiva.
Cele mai multe browsere stocheaza informatiile cookie in fisiere text necriptate, de aceea informatiile private precum parole, numere personale nu trebuie stocate direct intr-un cookie.
Utilizatorul poate configura browserul astfel incat sa interzica anexarea de cookie, in acest caz aplicatia care foloseste cookie ar putea sa nu functioneze.

2. Stocarea si regasirea valorilor unui cookie

Numele si valorile dintr-un cookie sunt stocate si stabilite utilizand proprietatea cookie a obiectului Document.
Pentru a stoca sirul cookie intr-o variabila se foloseste o comanda precum aceasta:

• var myCookie = document.cookie

Pentru a afisa intr-o pagina web sirul astfel stocat , puteti folosi comanda:

• document.write(document.cookie)

JavaScript stocheaza fisierele cookie in formatul urmator:

• nume1=valoare1; nume2=valoare2; nume3=valoare3

Unde „nume1”, „nume2” si „nume3” reprezinta numele fiecarui cookie, iar „valoare1”, „valoare2” si „valoare3” reprezinta valorile care vor fi adaugate si stocate in fiecare cookie.
Perechile nume=valoare sunt separate prin caracterul punct si virgula (;) si un spatiu, iar dupa ultima pereche nu se mai pune caracterul punct si virgula.
Pentru extragerea si utilizarea valorilor din fisierele cookie, trebuie sa prelucrati sirul obtinut prin comanda „document.cookie„.
Pentru a simplifica regasirea unei valori dintr-un fisier cookie, puteti folosi o functie ca cea din urmatorul script:

<script type=”text/javascript”>
function GetCookie (name) {
    var result = null;
    var myCookie = ” ” + document.cookie + „;”;         // toate sirurile de cookie incep cu spatiu si se incheie cu ;
    var searchName = ” ” + name + „=”;         // se cauta tot ce e intre name si = urmator
    var startOfCookie = myCookie.indexOf(searchName);
    var endOfCookie;
    if (startOfCookie != -1) {         // daca gaseste ceva intre ele
        startOfCookie += searchName.length;         // omite nume cookie anterior
        endOfCookie = myCookie.indexOf(„;”, startOfCookie);
        result = unescape(myCookie.substring(startOfCookie, endOfCookie));
    }
    return result;
}

var valoare_c = GetCookie(‘nume_cookie’);
document.write(valoare_c);         // Afiseaza valoarea cookie-ului cautat, sau cuvantul null
</script>

– Functia „GetCookie(name)” prelucreaza sirul obtinut de comanda „document.cookie” si verifica daca exista cookie-ul cu numele transmis ca argument functiei. Daca cookie-ul cu numele respectiv exista, atribuie variabilei „result” valoarea asociata numelui si functia va returna aceasta valoare. Daca numele nu exista, valoarea variabilei „result”, si returnata de functie, ramane „null”.
– Variabila „valoare_c” apeleaza functia „GetCookie()”, unde ‘nume_cookie’ dintre paranteze, este numele cookie-ului a carui valoare doriti sa o obtineti.
Prin comanda „document.write(valoare_c)” scriptul va afisa valoarea acestei variabile, care este cea returnata de functie.

3. Stabilirea valorilor unui cookie

Combinatia nume=valoare este informatia minima de care aveti nevoie pentru a defini un cookie, dar un cookie bine definit inseamna mai mult de atat.
Iata o lista de parametrii ce pot fi utilizati pentru a specifica un cookie:

• nume=valoare
  expires=date
  path=path
  domain=nume_domeniu
  secure

           a. Nume si valoare

• Nume si valoare poate fi orice cuvinte doriti
• Exemplu:
  • culoare favorita=blue
    id=num:1
• Cea mai simpla functie pentru stabilirea unui cookie poate arata astfel:

function SetareCookie(name, value) {
    document.cookie = name + „+” + escape(value);
}

• Pentru siguranta, valoarea este codificata folosind functia „escape()”. Daca in sir ar exista un caracter „;” ar puteaa fi o problema, dar aceasta functie elimina aceasta problema.
  In general operatorul = este de atribuire, dar in cazul cookie-urilor fiecare nou „name” pe care il atribuiti este adaugat la lista de cookie activa, iar daca adaugati acelasi nume se va rescrie peste cel vechi.

           b. Data de expirare

• Parametrul „expires=data” reprezinta data si timpul (in formatul Wdy, DD-Mon-YYYY HH:MM:SS GMT) cand cookie-ul va expira si va fi sters de pe hard-disc.
  Perioada de expirare trebuie transformata in milisecunde.
  Daca nu este specificat nici un timp de expirare, cookie-ul va dispare la inchiderea navigatorului.
• Iata un exemplu in care data de expirare este dupa o saptamana:

var name = „culoare”
var value = „blue”
var oneWeek = 7*24*60*60*1000         // Data de expirare se stabileste in mulisecunde
var expDate = new Date()
expDate.setTime(expDate.getTime()+oneWeek);
document.cookie = name + „=” + escape(value) + „; expires=” + expDate.toGMTString()

• Observati ca data de expirare (dateExp) este prelucrata pentru a se incheia cu sirul GMT.

           c. Path

• In mod implicit fisierele cookie sunt disponibile si pentru alte pagini web din acelasi director al paginii la care au fost create.
  Parametrul path permite unui cookie sa fie folosit si de pagini din alte directoare ale aceluiasi domeniu.
  Daca valoarea parametrului „path” este un subsir al adresei URL a unei pagini, fisierele cookie create cu acel parametru „path” sunt disponibile pentru respectiva pagina.
  De exemplu, puteti crea un cookie folosind urmatoarea comanda:
•  

• document.cookie = „nume=valoare; path=/nume_director”;
• Aceasta face ca fisierul cookie cu numele „nume” sa fie disponibil pentru fiecare pagina din directorul „nume_director” cat si penrtru subdirectoarele acestuia.
• Daca ati avea urmatoarea comanda:

document.cookie = „culoare=blue; path=/javascript/test”;

• Fisierul cookie „culoare” ar fi disponibil pentru toate fisierele din directorul „javascript/test” si subdirectoare ale acestuia, dar nu va fi disponibil pt. fisierele din directorul „/javascript”.
  Calea generala pentru ca fisierul cookie sa poata fi folosit de toate paginile unui domeniu, din toate directoarele, este calea radacina „/” (path=/).

           d. Domain

• Asa cum parametrul „path” face un cookie disponibil si in alte directoare, parametrul domain il face disponibil pentru alte servere Web sau subdomenii ale aceluias site.
  Folosirea parametrului „domain” impune folosirea a cel putin doua caractere punct (.) daca domeniul dvs se incheie cu .com, .net … (de ex. .discant.net) Sirul parametrului „domain” trebuie sa fie identic cu sfarsitul numelui de domeniu al serverului dvs.
  Atunci cind se cauta un cookie in lista de cookie-uri se efectueaza si o comparatie intre valoarea acestui atribut si adresa domeniului din care s-a receptionat antetul HTTP. Comparatia se realizeaza pornind de la sufixul valorilor comparate, in sensul ca daca avem „domain=discant.net atunci aceasta valoare se va potrivi cu un nume de gazda precum „info.discant.net„.
  Dupa ce s-a efectuat aceasta comparatie, in cazul in care cookie-ul este validat se va verifica si valoarea atributului „path”.

           e. Secure

• Daca un cookie este marcat ca secure, prin intermediul acestui atribut, va fi transmis numai daca tranzactia HTTP este una sigura (folosindu-se protocolul HTTPS).
  In felul acesta un cookie este transmis doar daca intruneste toate conditiile de validitate (se potrivesc domeniul, calea de directoare, timpul de expirare si securitatea canalului de comunicatie).
  Daca parametrul „secure” nu este adaugat in comanda de creare a fisierului cookie, acesta va trimis intr-o forma necriptata prin retea.

In urmaorul exemplu este prezentata o functie care defineste fisierele cookie cu toti parametri:

function SetCookie (name, value, expires, path, domain, secure) {
    var expString = ((expires == null) ? „” : („; expires=” + expires.toGMTString()));
    var pathString = ((path == null) ? „” : („; path=” + path));
    var domainString = ((domain == null) ? „” : („; domain=” + domain));
    var secureString = ((secure == true) ? „; secure” : „”);
    document.cookie = name + „=” + escape (value) + expString + pathString + domainString +secureString;
}

Observati folosirea operatorului conditional ?
Pentru a folosi acesta functie, o apelati cu orice parametrii doriti sa stabiliti si utilizati cuvantul „null” in locul parametrilor care nu conteaza.

Cookie-uri – 2

1. Fisiere cookie cu acelasi nume

Daca un browser are mai multe fisiere cookie pentru un site si au acelasi nume, definite fiecare cu alta cale in parametrul „path”, si cu valori diferite, de exemplu daca avem trei fisiere cookie cu numele „color”, sirul cookie ar arata astfel:

• color=blue; color=green; color=white

In cazul acesta, pentru a numara valorile asociate unui nume cookie puteti folosi urmatoarea functie:

function GetCookieCount (name) {
    var result = 0;
    var myCookie = ” ” + document.cookie + „;”;
    var searchName = ” ” + name + „=”;
    var nameLength = searchName.length;
    var startOfCookie = myCookie.indexOf(searchName);
    while (startOfCookie != -1) {
        result += 1;
        startOfCookie = myCookie.indexOf(searchName, startOfCookie + nameLength);
    }
    return result;
}

Impreuna cu aceasta functie care numara cate valori asociate exista, trebuie sa aveti si o functie care sa regaseasca o anumita instanta a unui cookie, cum este urmatoarea:

function GetCookieNum (name, cookieNum) {
    var result = null;
    if (cookieNum >= 1) {
        var myCookie = ” ” + document.cookie + „;”;
        var searchName = ” ” + name + „=”;
        var nameLength = searchName.length;
        var startOfCookie = myCookie.indexOf(searchName);
        var cntr = 0;
        for (cntr = 1; cntr < cookieNum; cntr++) {
            startOfCookie = myCookie.indexOf(searchName, startOfCookie + nameLength);
        }
        if (startOfCookie != -1) {
            startOfCookie += nameLength;         // omite nume cookie anterior
            var endOfCookie = myCookie.indexOf(„;”, startOfCookie);
            result = unescape(myCookie.substring(startOfCookie, endOfCookie));
        }
    }
    return result;
}

2. Stergerea unui cookie

Pentru a sterge un cookie, numele si calea (daca a fost specificat parametrul „path”) trebuie sa fie aceleasi cu numele si calea folosite la stabilirea fisierului cookie.
Stergerea unui cookie se face prin stabilirea datei de expirare la un moment in trecut, ca in exemplul urmator:

function ClearCookie (name) {
    var ThreeDays = 3*24*60*60*1000;
    var expDate = new Date();
    expDate.setTime (expDate.getTime() – ThreeDays);
    document.cookie = name + „=ImOutOfHere; expires=” + expDate.toGMTString();
}

3. Exemplu complet utilizare cookie

Pentru a intelege mai bine cum puteti crea si folosi fisierele cookie, studiati exemplul urmator.
Exemplul este ceva mai complex, cuprinde un script cu mai multe functii care contin multe din elementele invatate in lectiile anterioare cat si altele mai avansate, pentru lucrul cu siruri.
Scopul acestui exemplu este de a intelege cum functioneaza fisierele cookie, acesta contine in sectiunea HEAD a unui document HTML un script JavaScript in care sunt definite 4 functii pentru lucrul cu fisiere cookie, iar in corpul paginii, BODY, este creat un tabel HTML cu 2 coloane, in prima este un formular pentru scrierea unor preferinte care vor fi trimise la script pentru inregistrarea acestora in cookie, iar a doua coloana contine un buton care activeaza afisarea preferintelor din cookie si un alt buton care sterge cookie-urile.
Codul complet este urmatorul:

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
<head>
<title>Exemplu utilizare cookie</title>
<script type=”text/javascript”>
<!–
// Functia pt. setarea cookie-urilor
  function SetCookie () {

  // Se definesc variabilele care preiau valorile campurilor din formular
    var culoare = document.preferinte.culoare.value;
    var fructe = document.preferinte.fructe.value;
    var citat = document.preferinte.citat.value;

  // Seteaza timpul de expirare, 2 zile
    var twoDays = 2*24*60*60*1000
    var expDate = new Date()
    expDate.setTime(expDate.getTime()+twoDays);

  // Creaza cookie-urile
    document.cookie = „cookie1” + „=” + escape(culoare) + „; expires=” + expDate.toGMTString() ;
    document.cookie = „cookie2” + „=” + escape(fructe) + „; expires=” + expDate.toGMTString() ;
    document.cookie = „cookie3” + „=” + escape(citat) + „; expires=” + expDate.toGMTString() ;
}

// Functia care verifica daca exista cookie-ul cu un anumit nume transmis ca argument
// Daca exista, prelucreaza sirul pt. extragerea valorii acestuia
// Returneaza valoarea asociata numelui
  function checkCookie(c_name) {
    if (document.cookie.length>0) {
      c_start=document.cookie.indexOf(c_name + „=”);
      if (c_start!=-1) {
        c_start=c_start + c_name.length+1;
        c_end=document.cookie.indexOf(„;”,c_start);
        if (c_end==-1) {
          c_end=document.cookie.length;
        }
        return unescape(document.cookie.substring(c_start,c_end));
      }
    }
  // Daca cookie-ul verificat nu exista
    return „Nu ati adaugat inca o preferinta”;
  }

// Functia trimite valorile primite la apelare spre verificare la functia precedenta
// Daca numele cookie-ului exista, stocheaza valoarea intr-o matrice
// Afiseaza in pagina valorile cookie-urilor
  function getCookie() {
    nr = getCookie.arguments.length

    var val_c = new Array(nr)
    var a = 0

    for (var i=0; i<nr; i++) {
      valoare=checkCookie(getCookie.arguments[i]);
      if (valoare!=null && valoare!=””) {
        val_c[a] = valoare;
        a++
      }
    }

  // Afiseaza in pagina, la id-urile indicate, valorile cookie-urilor
    document.getElementById(„idculoare”).childNodes[0].nodeValue = val_c[0];
    document.getElementById(„idfructe”).childNodes[0].nodeValue = val_c[1];
    document.getElementById(„idcitat”).childNodes[0].nodeValue = val_c[2];
  }

// Functia pt. stergerea cookie-urilor
  function stergeCookie() {
    nr_c = stergeCookie.arguments.length
    var ThreeDays = 3*24*60*60*1000;
    var expDate = new Date();
    expDate.setTime (expDate.getTime() – ThreeDays);

     for (var n=0; n<nr; n++) {
      document.cookie = stergeCookie.arguments[n] + „=DataStearsa; expires=” + expDate.toGMTString();
    }
  }
// –>
</script>
</head>

<body>

<table border=”1″ bordercolor=”#8888fe” width=”580″ cellpadding=”2″ cellspacing=”0″>
  <tr><td>
    <form name=”preferinte”>
      Scrieti culoarea favorita:
      <input type=”text” name=”culoare” size=”20″ maxlength=”40″ /><br /><br />
      Scrieti fructele preferate:
      <input type=”text” name=”fructe” size=”20″ maxlength=”40″ /><br /><br />
      Scrieti o fraza (un citat) favorita:<br />
      <input type=”text” name=”citat” size=”40″ maxlength=”80″ /><br /><br />
      <input type=”button” value=”Favorite” name=”buton” onclick=”SetCookie()” />&nbsp;
      <input type=”reset” value=”Reset” name=”reset” />
    </form>

  </td><td>
    <form name=”preferinte2″>
      <input type=”button” value=”Afiseaza Favorite” name=”buton” onclick=”getCookie(‘cookie1’, ‘cookie2’, ‘cookie3’)” />&nbsp;
      <input type=”button” value=”Sterge cookie” name=”Clear” onclick=”stergeCookie(‘cookie1’, ‘cookie2’, ‘cookie3’)” />
    </form>
    <b>Culoare favorita – </b><span id=”idculoare”> </span><br />
    <b>Fructe preferate – </b><span id=”idfructe”> </span><br />
    <b>Citat favorit – </b><span id=”idcitat”> </span><br />

  </td></tr>
</table>

</body>
</html>

– Functiile din script au fost definite pentru acest exemplu, pentru folosirea lor in alte scripturi necesita modificari.
Dupa ce adaugati acest cod intr-un document HTML, in browser veti avea afisat urmatorul rezultat:

Scrieti culoarea favorita: Scrieti fructele preferate: Scrieti o fraza (un citat) favorita:

Culoare favorita – Fructe preferate – Citat favorit –

– Apasati intai butonul din dreapta „Afiseaza Favorie”, vor fi afisate mesaje de eroare, precum ca nu ati adaugat inca o preferinta.
Completati in campurile din stanga preferintele dv. apoi apasati butonul „Favorite”, acesta apeleaza functia „SetCookie()” care va prelua datele adaugate si le va stoca in fisiere cookie care vor expira peste doua zile de la crearea lor.
Dati click pe butonul „Afiseaza Favorite”, acesta apeleaza functia „getCookie()” careia ii trimite ca argumente numele cookie-urilor a caror valoare va fi afisata, vor apare preferintele scrise de dv., preluate din cookie.
Importanta si avantajul fisierelor cookie le veti constata dupa aceasta.
Inchideti broweser-ul, redeshideti-l iar la aceasta pagina si apasati butonul „Afiseaza Favorite”. Observati ca sunt afisate preferintele dv. adaugate mai devreme. Maine, daca reveniti la aceasta pagina vor fi afisate aceleasi preferinte, fara sa trebuiasca sa le mai scrieti. Aceste date sunt pastrate 2 zile in fisiere cookie dupa care vor fi sterse automat.
Daca vreti sa stergeti aceste cookie-uri mai devreme, apasati butonul „Sterge cookie”, acesta apeleaza functia „stergeCookie()” careia ii trimite ca argumente numele cookie-urilor pe care sa le stearga.