Semplice esercizio funzioni JavaScript

Loki

Nuovo Utente
27 Mag 2012
18
0
0
Realizzare un form per l’inserimento delle quantità di tre diversi beni acquistabili: floppy-disk, CD, DVD-R.
Quando l’utente preme un apposito pulsante la pagina deve calcolare il costo totale dei beni. Il
prezzo unitario relativo ai tre beni è rispettivamente: 0.5, 1.0 e 2.0 Euro.
Il risultato deve essere visualizzato in una casella apposita (chiamata "totale") presente nel form
medesimo. Prima del calcolo del totale è necessario verificare che i tre valori inseriti siano tutti
numerici ed in caso contrario segnalare l'errore con un’opportuna finestra di pop-up.
La pagina deve anche contenere un pulsante che permetta di cancellare in un colpo solo tutti i valori
introdotti.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
Hai gia iniziato a scrivere qualcosa?

Sposto in Javascript
 

Loki

Nuovo Utente
27 Mag 2012
18
0
0
Ciao, ecco come ho iniziato:
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ESERCIZIO 1</title>

<script type="text/javascript">
	
</script>
</head>
<body>

<form id="TableForm" method="post" action="">

<table border="2">
<tr><td>ARTICOLI</td><td>QUANTITA'</td></tr>
<tr> <td> FLOPPY-DISK(0,5)</td> <td> <input type="text" id="floppy-disk"> </td></tr>
<tr> <td>CD(1,0)</td> <td> <input type="text" id="cd"> </td></tr>
<tr><td>DVD-R(2,0)</td> <td> <input type="text" id="dvd-r"> </td></tr>

</table >
<input type="button" value="Submit" onclick="Controlla()">
<input type="reset" value="reset" >
</form>
</body>
</html>
Mentre per la finestra pop:
HTML:
<html> 
<head>
<title>Riepilogo dati</title>
</head>
<body>
<script type="text/javascript">

document.write("<ul>");
document.write ("<li>"+"Totale: " + totale + "<br>");

document.write("</ul>");
</script>
</body>
</html>
Come vedi manca la parte dello script, devo ancora capire bene le funzioni java, come procedo?
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Io inizierei cosi:

per priam cosa ti serve una casella dove scrivere il totale, crei un elemento con id univoco

HTML:
<tr><td>TOTALE EURO</td><td><span id="totale"></span></td></tr>
per la funzione javascript ho commentato il codice

HTML:
<script type="text/javascript">
            function Controlla() {
                // setti il valore dei prodotti
                var floppy_price = 0.5;
                // recuperi i  valori
                var floppy = document.getElementById("floppy-disk").value
                // li verifichi
                if(isNaN(floppy)) {
                    // mostri un alert o apri una popup
                    alert("campo non valido");
                    // esci
                    return;
                }// altrimenti vai avanti
                // calcoli il totale
                var totale = floppy * floppy_price;
                // scrivi il totale nel elemento con id totale
                document.getElementById("totale").innerHTML = totale;
            }
        </script>
Prova cosi se hai dubbi chiedi pure

PS: racchiudi il codice che posti tra i tag presenti sulla barra di formattazione (ultime 3 icone piu a destra CODE o HTML o PHP )
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

ci sono diversi modi per gestire l'applicazione richiesta.

In un campo di testo, in un contenitore <div, in una popup ecc...

Importante visto che lavori con numeri in virgola mobile 0.5 1.2 3.2 ecc.. applicare una dichiarazione (parola chiave) di javascript chiamata parseFloat questa ti permette di lavorare anche con numeri interi 1 2 3 ecc.. per i numeri interi a volte è bene dichiarali con parseInt a seconda dell'utilizzo.

Messo il controllo per l'inserimento di numeri e il . usando le Espressioni Regolari.

E' giusto come ha scritto criric utilizzare isNaN , NaN è il risultato di una operazione richiesta che non è un Numero, io per gestire dati utilizzo le reg exp.

Lo script anche se nei testi hai dichiarato l'inserimento di dati es 0,5 - 1,0 - 2,0 nei calcoli lo zero come numero finale dopo la virgola non ha nessun valore a seguito dell'addizione, 1,0 o 1 danno stesso risultato.

NOTA: in javascript il separatore per i decimali è il . punto non la , virgola.

Puoi scrivere i numeri da sommare che vuoi 100 100.2 0.8 ecc... per ogni campo.


Esempio con risultato in un campo di testo chiamato totale:


Codice:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ESERCIZIO 1</title>

<script type="text/javascript">
function Controlla(){
var f = document.TableForm;
var re = new RegExp("^[0-9\.]+$", "");
if (!f.floppy_disk.value.match(re) || !f.cd.value.match(re) || !f.dvd_r.value.match(re)) {
alert("Campi Quanit\à Obbligatori - Solo Numeri")
return false;
}else{
var a = parseFloat(document.getElementById("floppy_disk").value);
var b = parseFloat(document.getElementById("cd").value)
var c = parseFloat(document.getElementById("dvd_r").value)
somma=a+b+c;
f.totale.value=eval(somma);
}
return true;
}
</script>
</head>
<body>

<form id="TableForm" name="TableForm" action="" onsubmit="Controlla(); return false">
<table border="2">
<tr><td>ARTICOLI</td><td>QUANTITA'</td></tr>
<tr> <td> FLOPPY-DISK(0,5)</td> <td> <input type="text" name="floppy_disk" id="floppy_disk"> </td></tr>
<tr> <td>CD(1,0)</td> <td> <input type="text" name="cd" id="cd"></td></tr>
<tr><td>DVD-R(2,0)</td> <td> <input type="text" name="dvd_r" id="dvd_r"> </td></tr>
<tr><td>TOTALE</td> <td> <input type="text" name="totale" id="totale"> </td></tr>
</table >
<input type="submit" value="button">
<input type="reset" value="reset">
</form>

</body>
</html>

Esempio con il risultato un una finestra PopUp:


Codice:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ESERCIZIO 1</title>

<script type="text/javascript">
function Controlla(){
var f = document.TableForm;
var re = new RegExp("^[0-9\.]+$", "");
if (!f.floppy_disk.value.match(re) || !f.cd.value.match(re) || !f.dvd_r.value.match(re)) {
alert("Campi Quanit\à Obbligatori - Solo Numeri")
return false;
}else{
var a = parseFloat(document.getElementById("floppy_disk").value);
var b = parseFloat(document.getElementById("cd").value)
var c = parseFloat(document.getElementById("dvd_r").value)
somma=a+b+c;
bb=eval(somma);
nw=eval("window.open('about:blank','somma','width=300,height=150,left=450,top=150')"); 
nw.document.write("<html><title>Riepilogo dati<\/title><head>"); 
nw.document.write("<script type='text\/javascript'>");
nw.document.write("document.getElementById('conta').innerHTML="); 
nw.document.write(bb);
nw.document.write("<\/script>");
nw.document.write("<\/head>"); 
nw.document.write("<body><div align='center'>Totale Somma:<br><br>")
nw.document.write('<div id="somma"><b>'+bb+'<\/b><\/div><\/div>');
nw.document.write("<\/body><\/html>"); 
nw.document.close();
}
return true;
}
</script>
</head>
<body>

<form id="TableForm" name="TableForm" action="" onsubmit="Controlla(); return false">
<table border="2">
<tr><td>ARTICOLI</td><td>QUANTITA'</td></tr>
<tr> <td> FLOPPY-DISK(0,5)</td> <td> <input type="text" name="floppy_disk" id="floppy_disk"> </td></tr>
<tr> <td>CD(1,0)</td> <td> <input type="text" name="cd" id="cd"></td></tr>
<tr><td>DVD-R(2,0)</td> <td> <input type="text" name="dvd_r" id="dvd_r"> </td></tr>
</table >
<input type="submit" value="button">
<input type="reset" value="reset">
</form>

</body>
</html>

Esempio con risultato in un <div contenitore:


Codice:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ESERCIZIO 1</title>

<script type="text/javascript">
function Controlla(){
var f = document.TableForm;
var re = new RegExp("^[0-9\.]+$", "");
if (!f.floppy_disk.value.match(re) || !f.cd.value.match(re) || !f.dvd_r.value.match(re)) {
alert("Campi Quanit\à Obbligatori - Solo Numeri")
return false;
}else{
var a = parseFloat(document.getElementById("floppy_disk").value);
var b = parseFloat(document.getElementById("cd").value)
var c = parseFloat(document.getElementById("dvd_r").value)
somma=a+b+c;
bb=eval(somma);
document.getElementById("somma").innerHTML=bb;
}
return true;
}
</script>
</head>
<body>

Totale: <div id="somma"></div>
<br>
<form id="TableForm" name="TableForm" action="" onsubmit="Controlla(); return false">
<table border="2">
<tr><td>ARTICOLI</td><td>QUANTITA'</td></tr>
<tr> <td> FLOPPY-DISK(0,5)</td> <td> <input type="text" name="floppy_disk" id="floppy_disk"> </td></tr>
<tr> <td>CD(1,0)</td> <td> <input type="text" name="cd" id="cd"></td></tr>
<tr><td>DVD-R(2,0)</td> <td> <input type="text" name="dvd_r" id="dvd_r"> </td></tr>
</table >
<input type="submit" value="button">
<input type="reset" value="reset">
</form>

</body>
</html>

Importante: per un corretto utilizzo delle variabili assegnate alle varie applicazioni non utilizzare mai il carattere - piò creare errori in quanto è un separatore in javascript , o senza spazi o con l'underscore _ .

Adesso hai una base con cui lavorare e fare modifiche.


Saluti e buon lavoro, Valeria.