CUPRINS> Obiectele Frame și Layer INTRO
INAPOI INAINTE


În această conversație:
Obiectele Frame
EXEMPLUL 10.1 JAVASCRIPT
Obiectul Layer. Aplicații
EXEMPLUL 10.2 JAVASCRIPT
Temă


 
  Obiectele Frame    
     

Cea mai mare parte a navigatoarelor actuale (în particular, navigatoarele recente Netscape și Microsoft) recunosc cadrele (frames, în limba engleză) care permit divizarea paginii Web în mai multe zone. În fiecare zonă a paginii se poate afișa un document (X)HTML sau rezultatul unui script.

Decizia de a utiliza cadre vă aparține!
Indiferent dacă apreciați sau nu cadrele, site-urile Web bazate pe cadre există și vor mai exista. Din punct de vedere al programatorului JavaScript, este la fel de ușor să lucrezi pe un site care conține cadre sau să lucrezi pe un site fără cadre.

Atunci când o fereastră conține mai multe cadre, fiecare dintre ele este reprezentat în JavaScript printr-un obiect Frame.
Acest obiect este echivalent cu un obiect Window atâta timp cât el servește la manipularea cadrelor și nu a ferestrelor.

Numele obiectului Frame este același cu cel pe care îl afectați atributului name al tag-ului <frame>.
Remarcă

– Cuvintele cheie window și self permit referirea la cadrul curent.
– Cuvântul cheie parent permite referirea la fereastra de nivel superior (cel mai des, fereastra principală).
– Fiecare din obiectele Frame ale unei ferestre este un fiu al obiectului părinte Window.

Documentul (X)HTML din figura 10.1 împarte fereastra în patru zone. Dacă ați inserat un script JavaScript în documentul stângasus.htm, el va face referire la documentele care aparțin altor cadre: parent.dreaptasus, parent.stângajos etc. Cuvintele cheie window și self vor face referire la însuși cadrul stângasus.

Figura 10.1

Remarcă

Dacă utilizați cadre situate în interiorul altor cadre (imbricate) lucrurile se complică puțin: window reprezintă întotdeauna cadrul curent, parent reprezintă setul de cadre (frameset) care conține cadrul curent, iar top reprezintă setul de cadre principal care le conține pe celelalte.
Matricea frames

Matricea frames conține un obiect Window pentru fiecare cadru al paginii Web (vezi figura 10.2).

În loc să vă referiți la cadrele unui document prin numele lor, utilizați matricea frames.

Această matrice stochează informațiile pentru fiecare din cadrele unui document. Numărul de indice (index) al cadrelor începe întotdeauna cu zero și cu primul tag <frame> al setului de cadre al documentului.

Exemplu

Iată cum puteți referi cadrele din figura 10.1 cu ajutorul matricii frames, (vezi figura 10.2).

Figura 10.2

Remarcă

– Puteți folosi oricare din cele două metode de acces la elementele matricii frames (prin numărul de index/prin nume).
– Dacă documentul dumneavoastră conține de exemplu 13 cadre, fără îndoială este mult mai simplu să utilizați matricea frames. Dacă însă, documentul conține decât două cadre, evident este mult mai bine să utilizați numele cadrelor.

Exemplu

Iată cum creați un cadru de navigare (vezi figura 10.3) care să permită modificarea conținutului unui alt cadru.

Figura 10.3

1. Creați un document (X)HTML care divizează fereastra în două cadre (figura 10.4).

Figura 10.4

Remarcă

– Programul din figura 10.4 creează două cadre (la stânga și la dreapta ferestrei).
– Tag-urile <body> sunt înlocuite cu tag-urile <frameset>.

2. Creați documentul (X)HTML pentru cadrul din stânga, care va servi pentru navigarea în site (figura 10.5).

Figura 10.5

Remarcă

– Gestionarii de evenimente onClick se repetă (cu mici modificări) pentru fiecare din cele patru link-uri (vezi tag-urile <a>).
– Gestionarii de evenimente onClick sunt declanșați prin evenimentul click, care afișează un document în cadrul din dreapta.
– Deoarece script-ul se găsește (el însuși) într-un cadru, numele celuilalt cadru trebuie să fie precedat de cuvântul cheie parent.
– Fiecare din obiectele frame ale unei ferestre este un fiu al obiectului părinte Window.
– Cuvintele cheie window și self permit referirea cadrului curent.
– Cuvântul cheie parent permite referirea la fereastra de nivel superior (de regulă fereastra principală).
– Utilizarea limbajului JavaScript permite modificarea simultană a conținutului mai multor cadre.

3. Testați script-ul.
   3.1 Salvați documentul XHTML al cadrului de navigare sub numele stânga.html.
   3.2 Deschideți în browser documentul HTML care divizează fereastra în două cadre (vezi figura 10.6).
Figura 10.6

   3.3Testați link-urile din cadrul din stânga.
În figura 10.7 se prezintă rezultatul execuției script-ului în navigatorul Internet Explorer.

Figura 10.7

top
 
  EXEMPLUL 10.1 JAVASCRIPT    
     
Formularea problemei

Vom aborda și în cadrul acestei conversații aceeași problemă pe care am abordat-o în conversația precedentă (EXEMPLUL 9 JAVASCRIPT), cu singura deosebire (importantă!) că pentru afișarea rezultatelor vom folosi obiectele Frame (Rezultatele vor fi afișate într-un cadru inserat în documentul curent și nu într-o fereastră distinctă). Introducerea valorilor pentru livrări se face printr-o singură zonă de text (vezi EXEMPLUL 9 JavaScript, Varianta 2).

Selecția rezervorului și a zilei se fac printr-o listă de selectare.
Specificații de programare

În figura 10.8 este prezentat ecranul (intrare/ieșire) cu „RAPORT LIVRĂRI REZERVOR R1”. Tabela de variabile este prezentată în figura 10.9.
Figura 10.8

Figura 10.9
Tabela de variabile
Variabile de intrare Variabile de stare Variabile de iesire
Rezervor: (obiect) lista simpla de selectie pentru cele trei rezervoare
Zile: (obiect) lista simpla de optiuni pentru selectia zilei din saptamâna
T1: (obiect) zona de editare în care se va introduce valoarea livrarilor
Inputd: (obiect) frame-ul ce contine obiectele Rezervor, Zile, T1
sit:- (obiect) frame ce contine zonele reactive pentru afisare
 s: (real) folosit pentru calculul sumelor partiale pe zile
rval: (logic) indica faptul ca valoarea introdusa în zona de editare este valida sau nu
x: (real) valoarea reala a textului introdus în zona de editare
Z: (vector) numele zilelor saptamânii
jmax,jmin: (numere întregi) pastreaza indicii livrarilor maxime si minime din matricea a		 raport: (obiect) frame-ul în care se vor afisa rezultatele pentru un rezervor
med: (real) folosit pentru calculul mediei zilnice pe rezervor
max,min: (numere reale) pastreaza valoarea maxima si minima pentru livrari
a: (matrice de numere reale) pastreaza valorile livrarilor pe zile si rezervoare

Documentația de proiectare

Pseudocodul pentru EXEMPLUL 10.1 JAVASCRIPT este prezentat în figura 10.10.

Figura 10.10
Pseudocodul
 

EXEMPLUL10.1    BEGIN  
                    //initializeaza vectorul Z cu numele 
zilelor  
                    z=luni,marti,miercuri,joi, vineri  
                    //aloca spatiu de memorie si initializeaza  
matricea livrarilor  
FORI                FOR(i=0;i<3;i++)  
FORJ                        FOR(j=0;j<5;j++)  
                                    ai,j=0.0  
FORJ                        ENDFOR  
FORI                ENDFOR  
                    Afiseaza pagina ce contine frame-uri  
                    //raspunde la evenimentele generate de 
butonul Livreaza  
IFL                 IF(se apasa butonul Livreaza)  
                        DO livreaza  
IFL                 ENDIF  
                    //raspunde la evenimentele generate de 
zonele reactive  
IFA                 IF(se executa click pe zona unui rezervor)  
                        DO afispartial(rezervor)  
IFA                 ENDIF  
                    //raspunde la evenimentele generate de zona 
de editare T1  
IFV                 IF(se paraseste zona T1)  
                        DO valideaza(T1,0,20)  
IFV                 ENDIF  
EXEMPLUL10.1    END  
  
AFISPARTIAL     BEGIN  
                    Date intrare:  
                        rez-indicele rezervorului  
                    // calculeaza total livrari  
                    s=0  
FORS                FOR(j=0;j<5;j++)  
                            s=s+arez,j  
FORS                ENDFOR  
                    med=s/5  
                    // determinarea maximului si minimului  
                    max=arez,0  
                    min=arez,0  
                    jmax=0  
                    jmin=0  
FORMAXMIN           FOR(j=0;j<5;j++)  
IFMAX                       IF(max<arez,j)  
                                    max=arez,j  
                                    jmax=j  
IFMAX                       ENDIF  
IFMIN                       IF(min>ai,j)  
                                    min=arez,j  
                                    jmin=j  
IFMIN                       ENDIF  
FORMAXMIN           ENDFOR  
                    //afisare rezultate  
                    //scrierea rezultatelor in frame-ul report  
                    k=rez+1  
                    raport.WRITE "SITUATIA REZERVORULUI R"+k  
                    raport.WRITE "ZIUA  R"+k  
FORRAP              FOR(j=0;j<5;j++)  
                            raport.WRITE zi, arez,j  
FORRAP              ENDFOR  
                    raport.WRITE "Total livrari: ",s  
                    raport.WRITE "Media: ",s  
                    raport.WRITE "Livrarea maxima: ",max,Zjmax  
                    raport.WRITE "Livrarea minima: ",min,Zjmin  
AFISPARTIAL     END

Codificarea în limbajul JavaScript

Documentul complet (X)HTML este prezentat în figura 10.11.

Figura 10.11
Codificarea în limbajul JavaScript
 

<html> 
<head> 
<script language="JavaScript"> 
<!--- 
// DEFINESTE VECTORUL CU ZILELE DIN SAPTAMANA 
var Z = new Array("Luni","Marti","Miercuri","Joi","Vineri"); 
//functia de transformare intr-un sir de caractere a unui numar 
  function trunchiaza(x){ 
     var s=""+x; 
      i=s.indexOf("."); 
      if(i!=-1){ 
        s=s.substring(0,i+3); 
        } 
      return s; 
} 
//VALIDAREA UNUI CAMP NUMERIC 
function valideaza(item, min, max) { 
   var rVal = false; 
   var x=parseFloat(item.value); 
     if(isNaN(x))    alert("Valoare gresita pentru cantitate!"); 
     else 
     if (x < min) 
        alert("Valoare gresita pentru cantitate!Valoarea trebuie >
" + min); 
    else if (x> max) 
       alert("Valoare gresita pentru cantitate!  Valoarea trebuie 
sa fie < " + max); 
          else 
      rVal = true; 
   return rVal; 
} 
// DECLARAREA MATRICEI IN CARE SE VOR PASTRA 
CANTITATILE LIVRATE 
a=new Array(3); 
a[0]=new Array(5); 
a[1]=new Array(5); 
a[2]=new Array(5); 
for(i=0;i<3;i++) 
 for(j=0;j<5;j++) 
      a[i][j]=0.0; 
//SALVAREA CAMPULUI NUMERIC DIN INPUT TEXT IN 
MATRICEA LIVRARILOR 
function livreaza(){ 
//DETERMINA REZERVORUL 
var ir=inputd.f1.Rezervor.selectedIndex; 
//DETERMINA ZIUA 
var z=inputd.f1.Zile.selectedIndex; 
//ADAUGA CANTITATEA IN MATRICEA LIVRARILOR 
   a[ir][z]+=parseFloat(inputd.f1.T1.value); 
} 
//CALCULEAZA SI AFISEAZA LIVRARILE DINTR-UN 
REZERVOR 
function afispartial(rez){ 
var i,j,k; 
//calcul total livrari 
 s=0.0; 
 for(j=0;j<5;j++)   s+=a[rez][j] 
//CALCUL MEDIE PE ZI 
med=s/5; 
//CALCUL MAX SI MIN 
    max=a[rez][0]; min=a[rez][0]; 
      jmax=0;jmin=0; 
       for(j=0;j<5;j++){ 
            if(max<a[rez][j]){max=a[rez][j];jmax=j;} 
            if(min>a[rez][j]){min=a[rez][j];jmin=j;} 
        } 
 //AFISARE REZULTATE 
k=rez+1; 
raport.document.open(); 
 raport.document.writeln("<center><p><b>RAPORT 
LIVRARI REZERVOR R"+k+"</b></p></center>"); 
 raport.document.writeln("<center><table border=1 
bgcolor=#efefff><tr>"); 
 raport.document.writeln("<td><b>ZIUA</b><td><b>
REZERVOR R"+k+"</b></td></tr>"); 
    for(i=0;i<5;i++) { 
     raport.document.writeln("<tr><td>" + Z[i]+"</td>"); 
      raport.document.writeln("<td>" + a[rez][i]+ "</td></tr>"); } 
    raport.document.writeln("</table></center><p><p>"); 
   raport.document.writeln("<center><p><font color=green
 size=+1>Total Livrari:"+s+"</font>"); 
   raport.document.writeln("<br><font color=green size=+1>
Media Zilnica:"+trunchiaza(med)+"</font>"); 
   raport.document.writeln("<br><font color=green>Livrarea 
maxima:"+max+" s-a facut in ziua de" +Z[jmax]+"</font>"); 
raport.document.writeln("<br><font color=green>Livrarea 
minima:"+min+" s-a facut in ziua de " +Z[jmin]+"</font>"); 
raport.document.writeln("</center></html>"); 
raport.document.close(); 
} 
// --> 
</script> 
</head> 
<title>Exemplul 4 utilizand frame-uri</title> 
</head> 
 <frameset rows="60%,40%"> 
    <frameset cols="30%,70%"> 
      <frame scrolling="no" noresize src="inputdata.html" 
name="inputd"> 
        <frame src="raport.html" name="raport"> 
     </frameset> 
      <frame scrolling="no" noresize src="situatie.html" 
name="sit"> 
</frameset> 
</html> 
// INPUTDATA.HTML 
<html> 
<head> 
</head> 
<body> 
<center> 
<form name="f1"> 
<table border=0> 
<tr><td><b>REZERVORUL</b><td><b>Ziua</b> 
<tr><td><select size="1" name="Rezervor"> 
  <option selected>Rezervor1</option> 
  <option>Rezervor2</option> 
  <option>Rezervor3</option> 
  </select> 
<td> 
<select size="1" name="Zile"> 
  <option>Luni</option> 
  <option>Marti</option> 
  <option>Miercuri</option> 
  <option>Joi</option> 
  <option>Vineri</option> 
  </select> 
<tr><td>Cantitatea 
<td><input type="text" name="T1" size="7" value="0.0" 
onChange="parent.validate(this,0,20);"> 
<tr><td><input type="button" value="Livreaza" 
onClick="parent.trimite();"> 
</table> 
</center> 
</form> 
</body> 
</html> 
 
//RAPORT.HTML 
<html> 
<head> 
</head> 
<body> 
<center><p><b>RAPORT LIVRARI REZERVOR R1 
</b></p></center> 
<center><table border=1 bgcolor=#efefff><tr> 
<td><b>ZIUA</b><td><b>REZERVOR R1</b></td></tr> 
<tr><td>Luni</td><td>0</td></tr> 
 <tr><td>Marti</td><td>0</td></tr> 
<tr><td>Miercuri</td><td>0</td></tr> 
<tr><td>Joi</td><td>0</td></tr> 
<tr><td>Vineri</td><td>0</td></tr> 
</table></center><p><p> 
<center> 
  <p><font color=green size=+1>Total Livrari:0</font> <br> 
  <font color=green size=+1>Media Zilnica:0 </font> 
  <br><font color=green>Livrarea maxima: 0 s-a facut in 
ziua de Luni </font> 
<br><font color=green>Livrarea minima: 0 s-a facut in 
ziua de luni </font> 
</center> 
</html> 
//SITUATIE.HTML 
 
<html> 
<body> 
<center> 
<h3> 
Afiseaza Livrari pentru Rezervoarele: 
</h3> 
<map name="rezervorMap"> 
   <area name="R1" coords="16,18,91,125" href=
"javascript:parent.afispartial(0)" 
    onMouseOver="window.status='Rezervorul R1';return true" 
     onMouseOut="window.status=' ';return true"> 
   <area name="R2" coords="105,18,180,125" href=
"javascript:parent.afispartial(1)" 
onMouseOver="self.status='Rezervorul R2';return true" 
onMouseOut="self.status=' ';return true"> 
   <area name="R3" coords="195,18,272,125" href=
"javascript:parent.afispartial(2)" 
onMouseOver="window.status='Rezervorul R3';return true" 
onMouseOut="window.status=' ';return true"> 
</map> 
<img src="rezervoare.jpg" align="top" usemap=
"#rezervorMap"> 
</body> 
</html>

Vizualizați documentul într-un browser și testați script-ul (vezi EXEMPLUL 9 JAVASCRIPT). În figura 10.12 se prezintă rezultatele execuției programului JavaScript pentru un set de date (Rezervorul 1).
Figura 10.12

top
 
  Obiectul Layer. Aplicații    
     

Obiectul Layer este un fiu al obiectului Document.
Obiectul Layer permite limbajului JavaScript să acceseze straturile în interiorul documentelor.

Remarcă

Pentru mai multe informații privind straturile și modul în care acestea funcționează în browser, consultați lucrările:
– Liviu Dumitrașcu, Dreamweaver MX, Editura Universității din Ploiești, 2003.
– Richard Wagner, R.Allen Wyke, JavaScript, Editura Teora, Traducere Cora Rădulescu și Dan Pavelescu, 2002.

Fișa obiectului Layer este prezentată în figura 10.13.
Figura 10.13
Fisa obiectului Layer
Obiectul parinte: Document
Proprietati:
 above, background, bellow, bgColor, clip.bottom, clip.height, clip.left, clip.right, clip.top, clip.width, document, left, name, pageX, pageY, parentLayer, siblingAbove, siblingBellow, src, top, visibility, window, zIndex
Metode: load(), moveAbove(), moveBellow(), moveBy(), moveTo(), moveToAbsolute(), releaseEvents(), resizeBy(), resizeTo(), routeEvent()
Gestionarii de evenimente: -

Matricea Layers[]

Matricea layers[] (document.layers[]) conține setul de straturi (layers, în limba engleză) reprezentate în pagina (X)HTML prin tag-urile <div> sau <layer>.

Matricea layers[] este recunoscută numai de browser-ul Netscape.

Remarcă

– În Netscape puteți accesa proprietățile unui strat cu ajutorul matricii layers[]. Numele stratului poate fi specificat prin atributul id sau name ale tag-ului div.
– În Netscape puteți accesa proprietățile unui strat imediat după instrucțiunea document.layers[’numestrat’].
Matricea all[]

Matricea all[] conține setul de straturi ale unui document (X)HTML recunoscute de Internet Explorer. Valoarea pe care o transferați pentru a specifica stratul pe care doriți să îl accesați nu este păstrată în atributul name al tag-ului <div> ci în atributul <id> al aceluiași tag.

Remarcă

În Internet Explorer puteți accesa proprietățile unui strat prin intermediul matricii style, ceea ce înseamnă că sintaxa pe care o veți folosi va fi: document.all[’numestrat’].style.
Corespondența între atributele HTML ale straturilor și proprietățile JavaScript

Un „layer” este un obiect plan rectangular care conține mai multe proprietăți: dimensiuni, culoare, conținut și vizibilitate. O pagină Web poate conține mai multe straturi care se pot suprapune precum straturile, parțial sau total.
Straturile sunt de regulă obiecte statice, dar ele pot fi modificate și deplasate cu ajutorul unui script. Natural, limbajul de script ales de Netscape este JavaScript întrucât el este creatorul limbajului.
Remarcă

– Straturile au fost implementate de Netscape începând cu versiunea 4 a browser-ului Netscape Navigator.
– Pentru gestiunea straturilor, Netscape a creat trei noi tag-uri: <LAYER> ... </LAYER>; <ILAYER> ... </ILAYER> și <NOLAYER> ... </NOLAYER>. Cel mai important este de departe primul tag. Al doilea este o formă „inline” iar cel de-al treilea joacă același rol în raport cu elementul LAYER ca NOFRAMES în raport cu FRAMESET.

Elementul LAYER conține 13 proprietăți, dintre care cea mai mare parte au valori implicite. Înainte de a trece la corespondența: atribute HTML – proprietăți JavaScript vom prezenta un exemplu de declarare a unui strat (figura 10.14).

Figura 10.14

În figura 10.15 este prezentat stratul afișat de Netscape.
Figura 10.15

Pentru a putea modifica atributele elementului LAYER în vederea dinamizării unei pagini Web va trebui să cunoaștem corespondența dintre atributele HTML ale straturilor și proprietățile JavaScript (vezi figura 10.16).
Figura 10.16
 
Atribut HTML
 Proprietati JavaScript
NAME name
Descriere Numele stratului (identic cu id). Nemodificabil.
  ID id
Descriere Numele stratului (identic cu name). Nemodificabil.
  LEFT left
Descriere Coordonata X a stratului.
  TOP top
Descriere Coordonata Y a stratului.
  PAGEX pagex
Descriere Coordonata X a stratului fata de document.
  PAGEY pagey
Descriere Coordonata Y a stratului fata de document.
  Z-INDEX zindex
Descriere Ordinea - z a stratului în raport cu fiii sai.
  VISIBILITY visibility
Descriere Starea de vizibilitate a stratului.
  BACKGROUND background
Descriere Imaginea de fundal a stratului.
  BGCOLOR bgColor
Descriere Culoarea de fundal a stratului.
  PARENTLAYER parentLayer
Descriere Numele obiectului care contine stratul curent.
  SRC src
Descriere URL-ul fisierului care reprezinta continutul stratului.
  CLIP clip.top, clip.left, clip.right, clip.bottom, clip.width, clip.height
Descriere Proprietatile suprafetei decupate a stratului.
  ABOVE above
Descriere Numele elementului HTML de deasupra stratului curent.
  BELOW below
Descriere Numele elementului HTML de dedesubtul stratului curent.

Remarcă

Pentru o mai bună lizibilitate am procedat la scrierea numelor atributelor HTML cu majuscule, dar ... nu este obligatoriu. În schimb, numele proprietăților JavaScript se scriu întotdeauna cu minuscule!
Metodele obiectului Layer

Metodele obiectului Layer sunt prezentate în detaliu în figura 10.17.
Figura 10.17
 
Metoda
 Sintaxa
load() document.layers[ ].load()
Descriere Încarca o noua adresa URL.
  moveAbove() document.layers[ ].moveAbove()
Descriere Deplaseaza stratul deasupra altui strat.
  moveBelow() document.layers[ ].moveBelow()
Descriere Deplaseaza stratul dedesubtul altui strat.
  moveBy() document.layers[ ].moveBy()
Descriere Deplaseaza stratul într-o pozitie specifica.
  moveTo() document.layers[ ].moveTo()
Descriere Deplaseaza coltul din stânga-sus al ferestrei la coordonatele specificate ale ecranului.
  moveToAbsolute() document.layers[ ].moveToAbsolute()
Descriere Modifica pozitia stratului în pagina, conform coordonatelor specificate în pixeli.
  releaseEvents() document.layers[ ].releaseEvents()
Descriere Stabileste ca stratul sa elibereze evenimentele capturate de tipul specificat.
  resizeBy() document.layers[ ].resizeBy()
Descriere Redimensioneaza stratul cu valorile de înaltime si latime specificate.
  routeEvent() document.layers[ .routeEvent()
Descriere Transfera un eveniment capturat prin ierarhia normala a evenimentelor.

Aplicație

Analizați documentul XHTML din figura 10.18 în care s-a inserat un script care conține metoda moveBy().

Figura 10.18

În figura 10.19 este prezentat rezultatul execuției programului JavaScript în navigatorul Netscape.

Figura 10.19

Figura 10.19 (continuare)

top
 
  EXEMPLUL 10.2 JAVASCRIPT    
     
Formularea problemei

Vom aborda și în cadrul acestei conversații aceeași problemă pe care am abordat-o în conversația precedentă, cu singura deosebire că de data acesta vom folosi pentru afișarea rezultatelor obiectul Layer.
Introducerea valorilor pentru livrări se realizează printr-o singură zonă de text, iar selecția rezervorului și a zilei din lista de opțiuni.

Specificații de programare

În figura 10.20 este prezentat ecranul (intrare/ieșire) în care se afișează pagina Web. Tabela de variabile este prezentată în figura 10.21.
Figura 10.20

Figura 10.21
Tabela de variabile
Variabile de intrare Variabile de stare Variabile de iesire
Rezervor: (obiect) lista simpla de selectie pentru cele trei rezervoare
Zile: (obiect) lista simpla de optiuni pentru selectia zilei din saptamâna
T1: (obiect) zona de editare în care se va introduce valoarea livrarilor
a: (matrice de numere reale) pastreaza valorile livrarilor pe zile si rezervoare
 s: (real) folosit pentru calculul sumelor partiale pe zile
rval: (logic) precizeaza daca valoarea introdusa în zona de editare este valida sau nu
x: (real) valoarea reala a textului introdus în zona de editare
Z: (vector) numele zilelor saptamânii
jmax,jmin: (numere întregi) pastreaza indicii livrarilor maxime si minime din matricea a
 f2: (obiect) formular continut în layer-ul R1 în care se vor afisa rezultatele pentru un rezervor
med: (real) folosit pentru calculul mediei zilnice pe rezervor
max,min: (numere reale) pastreaza valoarea maxima si minima pentru livrari
rnume,Z1, Z2, Z3, Z4, Z5, Tot, Med, emax, emin, zmax, zmin: (obiect) zone text pentru afisarea rezultatelor

Documentația de proiectare

Pseudocodul pentru EXEMPLUL 10.2 JAVASCRIPT este prezentat în figura 10.22.

Figura 10.22
Pseudocodul
 

EXEMPLUL10.2    BEGIN   
                    //initializeaza vectorul Z cu numele zilelor   
                    z=luni,marti,miercuri,joi vineri   
                    //aloca spatiu de memorie si   
                    //initializeaza matricea livrarilor   
FORI                FOR(i=0;i<3;i++)   
FORJ                        FOR(j=0;j<5;j++)   
                                    ai,j=0.0   
FORJ                        ENDFOR   
FORI                ENDFOR   
                    Afiseaza pagina ce contine layer R2   
                    //raspunde la evenimentele generate 
de butonul Livreaza   
IFL                 IF(se apasa butonul Livreaza)   
                        DO livreaza   
IFL                 ENDIF   
                    //raspunde la evenimentele generate  
zonele reactive   
IFAFIS              IF(cursor mouse pe zona unui rezervor)   
                        DO afispartial(rezervor)   
IFAFIS              ENDIF   
                    //raspunde la evenimentele generate de zona 
de editare T1   
IFVALID             IF(se paraseste zona T1)   
                        DO valideaza(T1,0,20)   
IFVALID             ENDIF   
EXEMPLUL10.2    END   
AFISPARTIAL     BEGIN   
                    Date intrare:   
                    rez-indicele rezervorului   
                    // calculeaza total livrari   
                    s=0   
FORS                FOR(j=0;j<5;j++)   
                            s=s+arez,j   
FORS                ENDFOR   
                    med=s/5   
                    // determinarea maximului si minimului   
                    max=arez,0   
                    min=arez,0   
                    jmax=0   
                    jmin=0   
FORMAXMIN           FOR(j=0;j<5;j++)   
IFMAX                       IF(max<arez,j)   
                                    max=arez,j   
                                    jmax=j   
IFMAX                       ENDIF   
IFMIN                       IF(min>ai,j)   
                                    min=arez,j   
                                    jmin=j   
IFMIN                       ENDIF   
FORMAXMIN           ENDFOR   
                    //afisare rezultate   
                    //depune rezultate in zonele din layerul R1   
                    k=rez+1   
                    f2.rnume.value="R"+k;   
                    f2.Z1.value=a[rez][0];   
                    f2.Z2.value=a[rez][1];   
                    f2.Z3.value=a[rez][2];   
                    f2.Z4.value=a[rez][3];   
                    f2.Z5.value=a[rez][4];   
                    f2.Tot.value=s;   
                    f2.Med.value=trunchiaza(med);   
                    f2.emax.value=max;   
                    f2.zmax.value=Z[jmax];   
                    f2.emin.value=min;   
                    f2.zmin.value=Z[jmin];   
AFISPARTIAL     END   
   
                    //Afiseaza layerul cu rezultate   
ARATA           BEGIN   
                    R1.style.visibility = "visible"   
ARATA           END   
   
                    // Ascunde layerul cu rezultate   
ASCUNDE         BEGIN   
                    R1.style.visibility = "hidden"   
ASCUNDE         END

Codificarea în limbajul JavaScript

Documentul complet (X)HTML este prezentat în figura 10.23.

Figura 10.23
Codificarea în limbajul JavaScript
 

<html> 
<head> 
<title>Exemplul 10.2</title> 
<script language=”JavaScript”> 
<!---  
var Z = new Array(”Luni”,”Marti”,”Miercuri”,”Joi”,”Vineri”);  
function trunchiaza(x) { 
     var s=””+x; 
      i=s.indexOf(„.”); 
      if(i!=-1){ 
        s=s.substring(0,i+3); 
        } 
      return s;  
      }     
 
function validate(item, min, max) { 
   var rVal = false;  
  var x=parseFloat(item.value); 
     if(isNaN(x)) 
       alert(„Valoare gresita pentru cantitate!”); 
      else 
     if (x < min) 
    alert(„Valoare gresita pentru cantitate!Valoarea trebuie
 >” + min); 
      else if (x> max) 
       alert(„Valoare gresita pentru cantitate!  Valoarea
 trebuie sa fie < „ + max); 
          else 
      rVal = true; 
   return rVal; 
} 
a=new Array(3); 
a[0]=new Array(5); 
a[1]=new Array(5); 
a[2]=new Array(5);  
for(i=0;i<3;i++) 
 for(j=0;j<5;j++) 
      a[i][j]=0.0; 
function trimite() { 
 var ir=f1.Rezervor.selectedIndex; 
 var z=f1.Zile.selectedIndex; 
   a[ir][z]+=parseFloat(f1.T1.value); 
} 
function afispartial(rez) { 
var i,j,k; 
//CALCUL TOTAL LIVRARI 
 s=0.0; 
 for(j=0;j<5;j++) 
   s+=a[rez][j] 
//calcul medie pe zi 
med=s/5;  
//calcul max si min 
    max=a[rez][0]; 
    min=a[rez][0]; 
      jmax=0;jmin=0; 
       for(j=0;j<5;j++){ 
         if(max<a[rez][j]){max=a[rez][j];jmax=j;} 
         if(min>a[rez][j]){min=a[rez][j];jmin=j;} 
   } 
//AFISARE REZULTATE 
  
k=rez+1; 
f2.rnume.value="R"+k; 
document.f2.Z1.value=a[rez][0]; 
 document.f2.Z2.value=a[rez][1]; 
document.f2.Z3.value=a[rez][2]; 
 document.f2.Z4.value=a[rez][3]; 
document.f2.Z5.value=a[rez][4]; 
 document.f2.Tot.value=s; 
 document.f2.Med.value=trunchiaza(med); 
 document.f2.emax.value=max; 
 document.f2.zmax.value=Z[jmax]; 
 document.f2.emin.value=min; 
 document.f2.zmin.value=Z[jmin];    
} 
function arata() { 
document.all['R1'].style.visibility = "visible"; 
} 
function ascunde() { 
  document.all['R1'].style.visibility = "hidden"; 
} 
// --> 
</script>  
</head> 
 
<body> 
<center> 
<form name="f1"> 
<table border=0> 
<tr><td><b>REZERVORUL</b><td><b>Ziua</b> 
<tr><td><select size="1" name="Rezervor"> 
  <option selected>Rezervor1</option> 
  <option>Rezervor2</option> 
  <option>Rezervor3</option> 
  </select> 
<td> 
<select size="1" name="Zile"> 
  <option>Luni</option> 
  <option>Marti</option> 
  <option>Miercuri</option> 
  <option>Joi</option> 
  <option>Vineri</option> 
  </select> 
<tr> 
<td>Cantitatea 
<td><input type="text" name="T1" size="7" value="0.0"
 onChange="validate(this,0,20);"> 
<tr> 
<td><input type="button" value="Livreaza" onClick="trimite();"> 
</table> 
</center> 
</form> 
<h3>Situatia Livrarilor</h3> 
<table> 
<tr><td><a href="javascript:void(0)"  onMouseOver="
afispartial(0);arata();" 
  onMouseOut="ascunde('R1');"> Rezervor R1</a> 
<tr><td><a href="javascript:void(0)" 
  onMouseOver="afispartial(1);arata();" 
  onMouseOut="ascunde();">Rezervor R2 
<tr><td><a href="javascript:void(0)" onMouseOver="
afispartial(2);arata();" 
  onMouseOut="ascunde();">Rezervor R3 
</tr> 
</table> 
<div id="r1" style="position: absolute;top: 120px;
z-index: 2; visibility: hidden; top:190; left: 120px;"> 
<form name = "f2"> 
<center><p><b>SITUATIA LIVRARILOR REZERVOR  
<input type="text" name="rnume" size="2"></b></p></center> 
<center><table border=1 bgcolor=#efefff><tr> 
<td><b>ZIUA</b><td><b>Livrare</b></td></tr> 
<tr><td>Luni</td><td><input type="text" name="Z1"
 size="7" value="0.0"></td></tr>  
 <tr><td>Marti</td><td><input type="text" name="Z2"
 size="7" value="0.0"></td></tr> 
<tr><td>Miercuri</td><td><input type="text" name="Z3"
 size="7" value="0.0"></td></tr> 
<tr><td>Joi</td><td><input type="text" name="Z4"
 size="7" value="0.0"></td></tr> 
<tr><td>Vineri</td><td><input type="text" name="Z5" 
size="7" value="0.0"></td></tr>   
</table></center><p><p> 
<center> 
<table bgcolor=#efefff> 
  <tr><td><font color=green size=+1>Total Livrari</font>
<td><input type="text" name="Tot" size="7" value="0.0"><tr> 
  <tr><td><font color=green size=+1>Media Zilnica</font>
<td><input type="text" name="Med" size="7" value="0.0">
 </table> 
<table bgcolor=#efefff> 
  <tr><td><font color=green>Livrarea maxima:</font><td>
 <input type="text" name="emax" size="7" value="0.0"> 
<td> <input type="text" name="zmax" size="7" value="Luni">  
<tr><td><font color=green>Livrarea minima:</font> <td>
<input type="text" name="emin" size="7" value="0.0"> <td>
 <input type="text" name="zmin" size="7" value="Luni"> 
 </table> 
</form> 
</div> 
</body> 
</html>

Vizualizați documentul într-un browser și testați script-ul numai în Internet Explorer. Se introduc livrările; se poziționează mouse-ul deasupra legăturii: Rezervor R1/ Rezervor R2/ Rezervor R3.
În figura 10.24 se prezintă rezultatele execuției programului JavaScript pentru un set de date.

Figura 10.24

top
 
  Temă    
     
Testați-vă cunostințele

1. Când utilizați obiectele Frame?

2. Care este rolul obiectului Layer?

3. Care sunt proprietățile obiectului Layer?

4. Care sunt metodele obiectului Layer?
Vizitați site-urile

Javascript.internet.com/messages/description-layer.htm;
Javascript.internet.com/bgeffects/floating-transparent-slideshow.html
Javascript.internet.com/bgeffects/write-layer.html
www.dannyg.com/examples/ol2/index.htm
www.dannyg.com/examples/dh2/index.htm
top
CUPRINS> Obiectele Frame și Layer INTRO
INAPOI INAINTE