Newsgroup: it.comp.lang.javascript
Titolo: Carrello della Spesa (Seconda Parte)

Seconda parte : L'interfaccia Grafica
Nella prima parte del corso abbiamo visto il cuore del sistema...
ora dobbiamo permettere all'utente di fare la spesa virtuale :)
L'interfaccia può essere personalizzata in base all'uso che se ne vuole
fare.
Per esempio :
Vogliamo che l'utente visualizzi in tempo reale il preventivo nella pagina
corrente (in un frame)
Vogliamo utilizzare la pagina come catalogo prodotti e visualizzare l'ordine
in un'altra finestra.
Vogliamo richiamare il preventivo con un bottone (Vedi Ordine).
In base alle necessità cambia la struttura del programma....
Vediamo ora la parte comune di codice poi entreremo nei dettagli per le 3
soluzioni ;)
Prima cosa da realizzare è una pagina html che contenga l'elenco dei
prodotti.
Sbizzarritevi pure con la grafica.... potete fare una tabella con le foto
dei prodotti per esempio ;)
Nella stessa riga inseriamo un bottone o un'immagine per ordinare il
prodotto.
Se volete utilizzare una scritta "Ordina" oppure un'immagine la sintassi è
<a href = "javascript:AggiungiProdotto('1234' , 'Processore AMD K6 3 450
Mhz' , 520000);">ORDINA</A>
A questo punto l'utente è in grado di ordinare un prodotto.
Dobbiamo metterlo in grado di visualizzare l'ordine corrente :
function VisualizzaOrdine ()
{
for (var Mostra = 0 ; Mostra < (Carrello.length +1) ; Mostra++)
{
if (Carrello[Mostra] != null) {
document.write (Carrello[Mostra].Codice + " - " +
Carrello[Mostra].Descrizione + " - " + Carrello[Mostra].Codice + " - <br>");
}
questa è la funzione base per visualizzare l'ordine nella pagine corrente...
molto spartano...
Direi che questa funzione è decisamente meglio ;)
function VisualizzaOrdine ()
{
var TotalePreventivo = 0;
document.writeln ('<table border="1" cellpadding="0" cellspacing="0" width =
"600" align = "center">');
document.writeln ('<tr>');
document.writeln ('<td bgcolor="#FF0000" width="100" align
="center">CODICE</td>');
document.writeln ('<td bgcolor="#FF0000" width="400" align
="center">DESCRIZIONE</td>');
document.writeln ('<td bgcolor="#FF0000" width="100" align
="center">PREZZO</td>');
document.writeln ('</tr>');
 for (var Mostra = 0 ; Mostra < (Carrello.length + 1) ; Mostra++)
  {
   if (Carrello[Mostra] != null)
    {
     document.writeln ('<tr>');
     document.writeln ('<td width ="100" align = "center">' +
Carrello[Mostra].Codice + '</td>');
     document.writeln ('<td width ="400" align = "left">' +
Carrello[Mostra].Descrizione + '</td>');
     document.writeln ('<td width ="100" align = "right">' +
Carrello[Mostra].Prezzo + '</td>');
     document.writeln ('</tr>');
     TotalePreventivo += Carrello[Mostra].Prezzo;
   }
  }
document.writeln ('</table>');
document.writeln ('<table border="1" cellpadding="0" cellspacing="0" width =
"600" align = "center">');
document.writeln ('<tr>');
document.writeln ('<td width ="100"></td>');
document.writeln ('<td width ="400"></td>');
document.writeln ('<td bgcolor =" #FF0000" width ="100" align =
"center">Totale</td>');
document.writeln ('</tr>');
document.writeln ('<tr>');
document.writeln ('<td width ="100"></td>');
document.writeln ('<td width ="400"></td>');
document.writeln ('<td width ="100" align = "right">' + TotalePreventivo +
'</td>');
document.writeln ('</tr>');
document.writeln ('</table>');
}
}
Ecco che ora possiamo ordinare dei prodotti e visualizzare l'ordine.....
Proviamo il nostro primo carrellino
aprite il blocco note e copiate pari pari il testo qui sotto....
<!----------Inizio Pagina-------->
<script language = "Javascript">
function Prodotto (Codice, Descrizione, Prezzo)
{
this.Codice = Codice;
this.Descrizione = Descrizione;
this.Prezzo = Prezzo;
}
function AggiungiProdotto (Codice, Descrizione, Prezzo)
{
var Nuovo = Carrello.length;
Carrello[Nuovo] = new Prodotto (Codice, Descrizione, Prezzo);
}
function TogliProdotto (Numero)
{
Carrello[Numero] = null;
}
function VisualizzaOrdine ()
{
// Per Visualizzare l'ordine in un vs frame sostituite document.writeln con
parent.frames['NomeFrame'].document.writeln
// Per Visualizzare l'ordine in una finestra sostituite document.writeln con
:
// newWindow=window.open("","subWindow","toolbar,status,scrollbars");
// newWindow.focus();
// document.writeln va sostituito con newWindow.document.writeln
var TotalePreventivo = 0;
document.writeln ('<table border="1" cellpadding="0" cellspacing="0" width =
"600" align = "center">');
document.writeln ('<tr>');
document.writeln ('<td bgcolor="#FF0000" width="100" align
="center">CODICE</td>');
document.writeln ('<td bgcolor="#FF0000" width="400" align
="center">DESCRIZIONE</td>');
document.writeln ('<td bgcolor="#FF0000" width="100" align
="center">PREZZO</td>');
document.writeln ('</tr>');
 for (var Mostra = 0 ; Mostra < (Carrello.length + 1) ; Mostra++)
  {
   if (Carrello[Mostra] != null)
    {
     document.writeln ('<tr>');
     document.writeln ('<td width ="100" align = "center">' +
Carrello[Mostra].Codice + '</td>');
     document.writeln ('<td width ="400" align = "left">' +
Carrello[Mostra].Descrizione + '</td>');
     document.writeln ('<td width ="100" align = "right">' +
Carrello[Mostra].Prezzo + '</td>');
     document.writeln ('</tr>');
     TotalePreventivo += Carrello[Mostra].Prezzo;
    }
  }
document.writeln ('</table>');
document.writeln ('<table border="1" cellpadding="0" cellspacing="0" width =
"600" align = "center">');
document.writeln ('<tr>');
document.writeln ('<td width ="100"></td>');
document.writeln ('<td width ="400"></td>');
document.writeln ('<td bgcolor =" #FF0000" width ="100" align =
"center">Totale</td>');
document.writeln ('</tr>');
document.writeln ('<tr>');
document.writeln ('<td width ="100"></td>');
document.writeln ('<td width ="400"></td>');
document.writeln ('<td width ="100" align = "right">' + TotalePreventivo +
'</td>');
document.writeln ('</tr>');
document.writeln ('</table>');
}
var Carrello = new Array ();
</script>
<a href = "javascript:AggiungiProdotto('1234' , 'Processore AMD K6 3 450
Mhz' , 520000);">ORDINA K6 450</A><br>
<a href = "javascript:AggiungiProdotto('5432' , 'Processore AMD K6 3 500
Mhz' , 620000);">ORDINA K6 500</A><br>
<a href = "javascript:AggiungiProdotto('7895' , 'Processore AMD K6 3 600
Mhz' , 720000);">ORDINA K6 600</A><br>
<br>
<a href = "Javascript:VisualizzaOrdine();">Visualizza Ordine</a>
<!-------------------Fine Pagina------------------->
Avrete notato che non esiste un controllo sulla quantità posso ordinare 5
processori AMD 450 e al posto di avere un'unica voce con quantità 5 ho 5
voci separate.
Nella prossima puntata vedremo come risolvere questo problema e come
personalizzare VisualizzaOrdine() nonchè utilizzare la funzione
TogliProdotto.
Alla prossima puntata !! :))
Fine Seconda Parte ;)

Nella fretta di postare il corso non ho avuto modo di testare il programma
con Netscape...
Mi sono scordato che Netscape quando si da il document.write si dimentica
delle variabili :(
Sto facendo una revisione che permette anche agli utenti di Netscape di
seguire il corso.
A Presto.
Alex.