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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
A Web master per semplice sito web Offerte e Richieste di Lavoro e/o Collaborazione 2
M Semplice visualizzatore di immagini [risolto con plugin wp] PHP 7
L [PHP] cambiare gli if in un url semplice PHP 1
L [PHP] convertire gli url ad forma semplice PHP 3
G Caricare una semplice Jpg con il PHP PHP 1
Federico.Marcelo qual è il modo più semplice per creare file GIF di alta qualità? Webdesign e Grafica 4
V Semplice barra di ricerca con filtro categorie prodotti E-Commerce 0
Z Semplice area privata in php PHP 6
M Un semplice saluto Presentati al Forum 1
T Visualizzare un Xml su un sito in modo semplice XML 1
X [Photoshop] Cercasi strumento per ottenere un semplice effetto. Photoshop 6
J [PHP] sviluppare una semplice calcolatrice PHP 1
booklisa [PHP] Domanda semplice (apparantemente) PHP 4
R [PHP] Semplice form PHP 4
G [CERCO][Retribuito] Programmatore Windows per un semplice software Offerte e Richieste di Lavoro e/o Collaborazione 0
MarcoGrazia Costruire una semplice chat in PHP non è affatto semplice. PHP 3
G aiuto per semplice menu onclick HTML e CSS 6
T Problema Semplice Script Javascript 1
Mr. Alex D. Creazione semplice autorisponditore con redirect PHP 1
M Casella di ricerca completa, invece di semplice ricerca tra tag HTML e CSS 0
A Semplice applicazione con le facebook api PHP 1
Pi3tro [Richiesta]Semplice form PHP 6
R galleria immagini semplice a schermo intero jQuery 1
C Creare semplice timer in Visual Basic Visual Basic 0
Trapano Galleria immagini semplice PHP 5
S problema con ajax semplice login script Javascript 8
L [Java] Consigli progettuali per una semplice applicazione Java 6
Trapano query semplice? PHP 21
M Semplice pagina per inserire/leggere dati su database PHP 5
E semplice ciclo if!??!?!? :dipser: MS Access 0
L login semplice con array PHP 10
L Semplice giochino javascript Javascript 20
N Menu verticale semplice stile Yahoo WordPress 2
A una guida semplice in php PHP 2
L guida semplice per imparare jquery jQuery 5
A problema con un semplice form per un loggin in php PHP 2
D Redirect: come mai non funziona un semplice redirect? Apache 0
N Semplice timer Snippet PHP 0
P inizio con il php ... semplice aiuto!! PHP 12
borgo italia phishing o malware o semplice truffa? Discussioni Varie 0
P Galleria immagini semplice Javascript 5
Web Designer Semplice Tutorial Photoshop Effetto Fantasma Photoshop 1
ste80 Problemuccio con semplice guestbook PHP 4
S semplice query che non funziona :( PHP 3
criric Semplice calendario Snippet PHP 0
S semplice link che però non compare dentro ad un DIV HTML e CSS 3
L aiuto per questa semplice regex PHP 5
S Semplice domanda con Javascript Javascript 3
M Semplice sito php/mysql...è veramente semplice ? PHP 5
neo996sps [codeingniter]: realizzare un semplice menu PHP 1

Discussioni simili