Vettori di oggetti

Creando il vettore f possiamo generalizzare il documento con le frecce per visitare gallerie frattali: ora possiamo aggiungere quanti link vogliamo senza bisogno di modificare la funzione change_img.

<head>
<SCRIPT language="Javascript">
<!-- hide
var win2 = window.open("","new");
var max_img = 3;   
var cc = 0;
var f = new Array(max_img);
f[0] = "http://home.att.net/~Paul.N.Lee/FotD/FotD.html";
f[1] =  "http://sprott.physics.wisc.edu/fractals.htm";
f[2] =  "http://www.concentric.net/~srooke/";
function change_img(direction) {
        if (direction == "next") {
                cc++;
                if (cc > max_img) {cc = 1;}   // test for last image
        } else if (direction == "prev") {
                cc--;
                if (cc < 1) {cc = max_img;}      // test for first image
        }
     win2.location.href = f[cc-1];
        return false;
}

// -->
</SCRIPT>
</head>
<body>
<a href="#" target="_self"  onClick="change_img('prev')">
<img src="http://www.ba.infn.it/www/images/prev.gif" border="0" 
alt="Galleria Precedente" WIDTH="55" HEIGHT="31"> </a>

<a href="#" target="_self"  onClick="change_img('next')">
<img src="http://www.ba.infn.it/www/images/next.gif" border="0" 
alt="Prossima Galleria" WIDTH="55" HEIGHT="31"> </a>
</body>

In questo secondo esempio generalizziamo il documento che forniva una lista di siti frattali con una breve descrizione. Questo documento puo' infatti gestire un numero qualsiasi di siti descritti in una tabella. La tabella stessa viene realizzata con un vettore di oggetti. Ogni sito frattale viene descritto da quattro informazioni: un nome, un indirizzo, una descrizione e l'indirizzo di un'immagine rappresentativa(in miniatura). Usiamo anche qui 3 frames, per cui dovrete copiare 3 files:
navbar1.html

<html>
<head>
<title>Navigational bar with frame</title>
</head>
<frameset rows="30%,70%" frameborder=no scrolling=no>
<frame src=blank.html name="descrizione" border=0 >
<frameset cols="10%,70%" frameborder=no scrolling=no>
<frame src=menu1.html name="menu">
<frame src=blank.html name="sito">
</frameset>
</frameset>
</html>

menu1.html


<head>
<title>Elenco di siti con immagini frattali</title>
<script language="JavaScript">
<!-- hide

function Sito (nome,url,descrizione,immagine){
               this.nome = nome;
               this.url = url;
               this.descrizione = descrizione;
               this.immagine = immagine;
               }  
      nsiti = 3;
      Siti = new Array(nsiti);
        Siti[0] = new Sito('Sharon','http://www.fractalus.com/sharon/','L\'incredibile galleria frattale di Sharon Webb','http://www.ba.infn.it/www/images/webb.gif');
        Siti[1] = new Sito('Sprott','http://sprott.physics.wisc.edu/fractals.htm','La collezione di attrattori strani del prof. Sprott','http://www.ba.infn.it/www/fracday0.gif');
        Siti[2] = new Sito('Rooke','http://www.concentric.net/~srooke/','Queste immagini sono generate a caso evolvendosi con un algoritmo genetico','http://www.ba.infn.it/www/images/rooke.gif');


function on(numero){
        parent.descrizione.document.clear();
        parent.descrizione.document.writeln('<BODY><h2>');
        parent.descrizione.document.writeln('');
        parent.descrizione.document.writeln('<img src='+Siti[numero].immagine+' width=70 height=70 ><br>');
        parent.descrizione.document.writeln(Siti[numero].descrizione);
        parent.descrizione.document.writeln('</h2></BODY>');
        return true;
}

function off(){
        parent.descrizione.document.clear();
       return true;
}

// -->
</script>
</head>
<script language=Javascript>
<!--
      document.writeln('<body bgcolor=white>');
      document.writeln('<h3>Muovi il puntatore sui link!</h3>');
      document.writeln('<table>');
      for (i = 0; i < Siti.length; i++) {
         document.writeln('<tr><td><a href='+Siti[i].url + ' target="sito" onMouseOver="on('+i+')" onMouseOut="off()">');
         document.writeln(Siti[i].nome+'</a>');
         }
      document.writeln('</table></body>');
//   -->
</script>

e blank.html con la sola riga:

<html> </html>

Il vettore di oggetti Siti viene creato usando il costruttore

 Siti[i] = new Sito(nome,url,descrizione,immagine)

Il data base non e' altro che una sequenza di istruzioni di questo tipo. A ogni aggiornamento vengono aggiunte,tolte o modificate delle righe e inoltre la variabile nsiti deve essere aggiornata. Il documento e' costruito a partire da questo vettore di oggetti.

Javascript permette di definire quindi dei nuovi oggetti con le proprieta' indicate nel costruttore. E' possibile, nello stesso costruttore, definire anche dei metodi per l'oggetto creato. Questo lo si ottiene creando una funzione faiqualcosa e quindi aggiungendo nel costruttore la riga:

this.faiqualcosa=faiqualcosa;

A questo punto potremmo invocare il metodo nel solito modo:

nomeoggetto.faiqualcosa()

INDIETRO a Seminario su HTHM dinamico

Maintained by Giuseppe Zito: Giuseppe.Zito@cern.ch
Last revised .