[JS] - Aiutatemi con questo esercizio, please! [mod]

31-01-2006, 09.44.06

Per favore potete dare un occhiata a questo esercizio in javscript e indicarmi una soluzione completa. Non riesco a capire come inserire in un ciclo, un tag di tipo type="text" con un controllo relativo (o almeno questo credevo fosse la strada per la soluzione).
Grazie.

Patrizia

ESERCIZIO
Scrivere uno script che chieda una serie di numeri all'utente. Si interrompa quando l'utente inserisce al posto di un numero la parola chiave "end". Interagisce con l'utente nel caso abbia inserito dei valori non validi. Chieda conferma prima di calcolare la media dei numeri introdotti. Stampi a video il risultato in una tabella.

**dementialsite** · 31-01-2006, 11.35.33

Questa è la prima cosa che mi viene in mente:

Codice HTML:

<TABLE><TR> ...
<TD>
<SCRIPT LANGUAGE="JavaScript">
var s = 0, n = 0;
var i;
while ((i = prompt ("Inserisci un numero [\"end\" per terminare]") != "end")
{
   i = parseInt (i);
   if (i == "Nan")
      alert ("Non hai inserito un numero!");
   else
   {
      n++;
      s += i;
   }
}
document.write (s / n);
</SCRIPT>
</TD>
... </TR></TABLE>

Stammi bene...

31-01-2006, 13.06.17

grazie infinite soprattutto per la celerità. Proverò la tua soluzione.
credo però che l'intenzione del prof. era di utilizzare il tag <input type="text" ...> con l'uso di eventi quali onKeyUp che attivi una funzione specifica per il controllo sul valore immesso. perciò avevo il problema di mischiare tag html e script javascript (per il ciclo). Se hai altre idee al riguardo te ne sono grata.
Patrizia

**heracleum** · 31-01-2006, 14.03.17

Sto provando a implementare alla lettera (per quanto non chiarissimo) l'esercizio,
se hai altri dettagli che possano aiutare a identificare meglio quale strada percorrere, sarebbe meglio saperlo ora, evitando di sapere dopo per es. che fosse richiesto l'evento onKeyUp...
Per es. (dubbi)
1) i risultati in tabella.. come? tutta la serie di numeri inseriti e il risultato? (immagino)
2) la tabella dei risultati viene scritta dinamicamente (DHTML) nella pagina attuale o ci deve essere un cambio pagina o reload?
3) la conferma di un SINGOLO numero come avviene? [submit] del form? pressione invio?

Insomma immagino che oltre a darvi il testo dell'esercizio vi abbiano spiegato "oralmente" alcuni dettagli no? se potessimo saperli anche noi... sarebbe ottimo

31-01-2006, 14.27.05

purtoppo no, gli esercizi sono stati scaricati dal sito del prof. che a stento ci legge le slide in aula. Purtoppo non risponde ai quesiti che gli pongo via email, perciò mi rimanete solo voi :)
immagino che ai fini dell'apprendimento del linguaggio al 1° punto ti direi si, così capisco come integrare l'html (per la tabella) con il ciclo Javascript.
Al 2° punto non credo sia necessario un reload ne un cambio di pagina, ma solo un mero calcolo aritmentico (per la media), forse passando per una funzione integrata nello stesso codice al massimo.
Al 3° punto va bene un qualsiasi evento che richiami una funzione di controllo (sempre integrata nel codice dello stesso file) ma applicata ad un tag html.
Altro non saprei, è lasciato tutto all'interpretazione, e in questo caso all'improvvisazione visto che queste cose non le abbiamo mai provate in laboratorio ne sono spiegate nelle famose slide.... :(( se questà è Università???
Grazie infinite dell'attenzione.
Patrizia

**heracleum** · 31-01-2006, 16.12.45

Ok mi sembra piuttosto solido così o quantomeno mi sembra che rispetti tutti i requisiti.
vedi se ti va bene (è in XHTML di preciso, se non lo avete affrontato dimmi che ti posto la versione più spartana in HTML, cmq poca differenza):

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><title>Esercizio: Calcolo della Media</title>
<head>

<script type="text/javascript">
	var CMD_END = 'end';
	var DIGITS = '0123456789';
	var num_inseriti = new Array();
	var cmd_prec = '';

	function controlla(campo){
		var cmd = campo.value;
		if (!numerico(cmd) && !controllaEnd(cmd)){
			alert('Carattere non valido!');
			campo.value = cmd_prec;
		}else
			cmd_prec = cmd;
	}
	function conferma(){
		var campo = document.frm1.cmd;
		if (campo.value == CMD_END){
			if (num_inseriti.length < 2){
				alert("Aggiungere almeno 2 numeri per la media!");
				return;
			}
			var conf = confirm("Confermi di terminare l'inserimento valori e mostrare i risultati?");
			if (conf)
				risultato();
		}else{
			num_inseriti[num_inseriti.length] = campo.value;
			alert('OK, aggiunto il valore n°'+num_inseriti.length);
			campo.value = '';
			cmd_prec = '';
			campo.focus();
		}
	}
	function risultato(){
		var divr = document.getElementById('divrisultato');
		if (divr){
			var ris = '<table>';
			var rigainiz = '<tr><td>';
			var rigafine = '</td></tr>';
			var s = 0;
			for (var i=0;i<num_inseriti.length;i++){
				ris += rigainiz + num_inseriti[i] + rigafine;
				s += parseInt(num_inseriti[i]);
			}
			var media = s / num_inseriti.length;
			ris += rigainiz + '<hr />' + rigafine + rigainiz + media + rigafine;
			divr.innerHTML = ris+'</table>';
		}
	}
	function controllaEnd(cmd){
		return CMD_END.substr(0, cmd.length) == cmd;
	}
	function numerico(val){
		for (var i=0;i<val.length;i++){
			if ( DIGITS.indexOf(val.charAt(i))<0 )
				return false;
		}
		return true; //ok anche se stringa vuota
	}
</script>

</head>
<body>
<form name="frm1" onsubmit="conferma(); return false;">
	Inserisci un numero o il comando 'end': <br />
	<input type="text" name="cmd" value="" onkeyup="controlla(this)" /> 
	<input type="submit" value=" OK " /> <br />

	<div id="divrisultato" style="padding:10px;"></div>

	<input type="button" value=" Riavvia " onclick="window.location.reload()" />
</form>

</body>
</html>

31-01-2006, 17.50.16

in effeti l'XHTML non lo abbiamo affrontato e sinceramente spero che sia per questo che ho capito solo un 70% di quello che hai scritto.
Vediamo se la versione più spartana, come dici tu, la riesco a capire meglio...
Cmq ho lanciato il file e sembra che ci siano degli errori, questo è il risultato del browser:

{\rtf1\ansi\ansicpg1252\deff0\deflang1040{\fonttbl {\f0\fswiss\fprq2\fcharset0 Arial;}} {\colortbl ;\red0\green0\blue128;\red128\green0\blue0;\red0\g reen0\blue255;\red0\green128\blue128;\red255\green 0\blue0;} {\*\generator Msftedit 5.41.15.1507;}\viewkind4\uc1\pard\tx0\tx959\tx1918 \tx2877\tx3836\tx4795\tx5754\tx6713\tx7672\tx8631\ cf1\f0\fs22 \cf0\par \cf1 \cf0\par \cf1 \cf0\par \par \cf2 \cf0\par \par \cf1 \cf0\par \cf1 \cf0\par \cf5
\cf0\par \tab Inserisci un numero o il comando 'end': \cf1
\cf0\par \tab\cf5 \cf0 \par \tab\cf5 \cf0 \cf1
\cf0\par \par \tab\cf1
\cf0\par \par \tab\cf5 \cf0\par \cf5
\cf0\par \par \cf1 \cf0\par \cf1 \cf0\par \pard\par }

**heracleum** · 31-01-2006, 18.57.32

Guarda non so quella robaccia che hai postato da dove proviene

Sappi che il codice che ti ho postato (e che ora ti ripropongo in semplice HTML e con i codice JS molto commentato per chiarezza) FUNZIONA perché l'ho provato e debuggato.
Ora, la questione è che io ti do il codice di una pagina indipendente, mentre tu dovrai estrapolare la parte utile e incollarla nella TUA pagina è QUI che devi fare molta cura:
- prendi il blocco SCRIPT dal mio blocco HEAD e mettilo nel tuo HEAD con cura,
- prendi quello che vedi nel mio BODY e mettilo nel tuo BODY, con altrettanta cura

Ecco il nuovo codice html (non è che fosse tanto diverso l'XHTML eh, solo qualche " /" in più) come dicevo su anche molto commentato lo script, la funzione risultato() è quella parte dinamica che crea in un DIV il codice html al volo per far visualizzare la table coi risultati senza ricaricare la pagina, non vedo gran ché di altri modi:

Codice HTML:

<html><title>Esercizio: Calcolo della Media</title>
<head>

<script type="text/javascript">
	var CMD_END = 'end';
	var DIGITS = '0123456789';
	var num_inseriti = new Array();
	var cmd_prec = ''; //tiene memoria dell'ultimo valore corretto

	//ad ogni tasto premuto nella casella controlla il valore
	function controlla(campo){
		var cmd = campo.value;
		if (!numerico(cmd) && !controllaEnd(cmd)){
			alert('Carattere non valido!');
			campo.value = cmd_prec; //annulla ultima digitazione
		}else
			cmd_prec = cmd;
	}

	//premuto tasto submit (OK) oppure il tasto [Invio] nella casella
	function conferma(){
		//rintraccia la casella nel form
		var campo = document.frm1.cmd;

		//controlla se e' 'end' altrimenti e' un numero corretto
		if (campo.value == CMD_END){ 
			if (num_inseriti.length < 2){
				alert("Aggiungere almeno 2 numeri per la media!");
				return;
			}
			var conf = confirm("Confermi di terminare l'inserimento valori e mostrare i risultati?");
			if (conf)
				risultato(); //mostra tabella
		}else{
			num_inseriti[num_inseriti.length] = campo.value;
			alert('OK, aggiunto il valore n°'+num_inseriti.length);
			campo.value = '';
			cmd_prec = '';
			campo.focus();
		}
	}

	//mostra il risultato in un div creando al volo del codice per la TABLE
	function risultato(){
		var divr = document.getElementById('divrisultato');
		if (divr){
			var ris = '<table>';
			var rigainiz = '<tr><td>';
			var rigafine = '</td></tr>';
			var s = 0;
			for (var i=0;i<num_inseriti.length;i++){
				ris += rigainiz + num_inseriti[i] + rigafine;
				s += parseInt(num_inseriti[i]);
			}
			var media = s / num_inseriti.length;
			ris += rigainiz + '<hr>' + rigafine + rigainiz + media + rigafine;
			divr.innerHTML = ris+'</table>';
		}
	}

	//controlla se i caratteri anche parziali possono far parte del comando "end"
	function controllaEnd(cmd){
		return CMD_END.substr(0, cmd.length) == cmd;
	}

	//controlla se il parametro e' numerico 
	function numerico(val){
		for (var i=0;i<val.length;i++){
			if ( DIGITS.indexOf(val.charAt(i))<0 )
				return false;
		}
		return true; //ok anche se stringa vuota
	}
</script>

</head>
<body>

<form name="frm1" onsubmit="conferma(); return false;">
	Inserisci un numero o il comando 'end': <br>
	<input type="text" name="cmd" value="" onkeyup="controlla(this)"> 
	<input type="submit" value=" OK "> <br>

	<div id="divrisultato" style="padding:10px;"></div>

	<input type="button" value=" Riavvia " onclick="window.location.reload()">
</form>

</body>
</html>

31-01-2006, 19.41.23

Wow funziona perfettamente!! Probabilmente il precedente l'avevo incollato in wordpad invece che in Dreamweaver perciò non funzionava (forse il wordpad inserisce dei caratteri nascosti, boo).
Cmq cercherò di studiarmi il tuo codice perbene sperando di essere in grado di farlo mio...però ci sono delle proprietà che proprio non conosco tipo innerHTML che quindi non credo di essere in grado di pensare autonomamente.
Non so perchè mi ero ostinata a inserire un INPUT all'interno di un ciclo while, o roba del genere, non avevo pensato ad inserire un OK per continuare ad inserire numeri. La vedo un po' difficile per il mio compito di giovedì 9. :(
Ti ringrazio veramente tanto cmq, per lo spiraglio di speranza che mi hai dato.
Patrizia

**heracleum** · 31-01-2006, 20.18.32

Eh ti ho detto, ...
ho dovuto usare innerHTML per visualizzare al volo la tabella, senza un refresh di pagina..
assegnando un contenuto ad un div (inizialmente VUOTO), cioè semplicemente passando una STRINGA che contiene codice html a innerHTML (di un elemento html div o altro) è possibile che il browser visualizzi quel contenuto, dinamicamente appunto.
E' una proprietà tipica di quello che viene chiamato DHTML (Dynamic html) ma che in parole povere è un set di proprietà e funzioni in più che permettono a Javascript di interagire con l'html e il CSS (stili) della pagina.

Tranne la function risultato() il resto mi semrba molto "tranquillo" e spero sia chiaro.
Come avrai notato, c'è anche un controllo del'evento onsubmit del form:
oltre a eseguire la nostra funzione di conferma, bada bene, c'è un "return false;" subito dopo nell'onsubmit. A cosa serve?
Se non ci fosse quello il form, anche dopo l'esecuzione della funzione conferma(), il form continuerebbe a inviare dati.. a chi? a se stessa! (visto che non è indicato un attributo ACTION="url.." nel tag form), provocando il ricaricamento della pagina, e questo lo si vuole impedire.
Perché non usare un semplice onclick su un semplice pulsante (<input type="button"> invece del submit) ??? perché altrimenti, non gestendo onsubmit, funzionerebbe cliccando sul bottone.. ma se uno preme il tasto "invio" <-' quando si scrive nella casella input verrebbe eseguito un submit del form.
Questa dell'onsubmit è una pratica diffusa, la gestione migliore secondo me di un form, sorpattutto se completamente controllato da javascript.

Se hai altri dubbi chiedi pure.

31-01-2006, 20.34.22

Grazie infinite sei stato esauriente, purtroppo per me, devo fare ancora qualche sforzo per capire la funzione risultato() ma per il resto è tutto chiaro. Strano a dirsi il prof. ce ne aveva parlato della questione del "return false" perciò mi è chiara, devo solo cercare altri esempi pratici per la visualizzazione dei risultati dinamici con questa funzione innerHTML.
Ciao a buon rendere... :)

**heracleum** · 31-01-2006, 23.04.53

Dai, comunque tranne
getElementById e innerHTML
che sono i fondamenti del DHTML (usatissimi ormai)
tutto il resto dovrebbe filare molto liscio, perché non si fa altro che costruire questo stringone (ris) col contenuto html della table con il risultato della media e i numeri inseriti.
Però nel dubbio provo a commentarti ogni riga.

var divr = document.getElementById('divrisultato');
Nella variabile divr memorizzo il "riferimento" all'oggetto html che ho rintracciato tramite il suo "id". Nota bene che deve COINCIDERE con quanto scritto più in basso nel body:
<div id="divrisultato" ...>

if (divr){
Se sono riuscito ad ottenere un riferimento al div correttamente...

var ris = '<table>';
Inizio a costruirmi la stringa contenente tutto il codice nella variabile ris e inizio col tag table.

var rigainiz = '<tr><td>';
var rigafine = '</td></tr>';
Per non ripeterlo svariate volte mi memorizzo in queste var i tag di inizio/fine di riga+cella di una table.

var s = 0;
Inizializzo la var s per la somma dei numeri

for (var i=0;i<num_inseriti.length;i++){
Mi scorro l'array dei numeri inseriti sequenzialmente

ris += rigainiz + num_inseriti[i] + rigafine;
aggiungo alla stringa totale il valore dei numeri memorizzati, tra inizio/fine riga.
Nota che:
ris += "qualcosa";
è la forma più comoda per non dover scrivere:
ris = ris + "qualcosa";

s += parseInt(num_inseriti[i]);
sommo i numeri, nota anche qui uso l'operatore += per fare la somma totale (invece di scrivere s = s + ...)
Solo che per ris il += si intende per concatenazione stringa per la somma una somma totale di interi (in comune hanno che il += serve ad aggiungere senza perdere i valori precedenti)

}
var media = s / num_inseriti.length;
alla fine calcolo la media matematica

ris += rigainiz + '<hr>' + rigafine + rigainiz + media + rigafine;
completo ris con un tratto separatore orizzontale <hr> e nell'ultima riga scrivo la media.

divr.innerHTML = ris+'</table>';
assegno tutto il contenuto di ris (+chiusura finale della table) alla proprietà innerHTML del div per far sì che il browser mostri e interpreti il contenuto html.

FINE

Discussione: [JS] - Aiutatemi con questo esercizio, please! [mod]

LinkBack

Strumenti discussione

Display

[JS] - Aiutatemi con questo esercizio, please! [mod]

Per il ciclo: dopo non lamentatevi che non avete la pappa pronta...

Regole di scrittura