Problema con assegnazione di una funzione

**kaine25** · 27-12-2013, 12:06

Ciao a tutti utenti di html.it! Sono un programmatore alle prime armi e ho scritto un semplice programma per l'approssimazione di un numero all'intero, decimo, centesimo e millesimo. Lo script funziona perfettamente ma, non conoscendo altri metodi, ho dovuto creare 4 diversi bottoni a cui assegnare le rispettive funzioni.

codice:

<HTML>
 <HEAD>
 <TITLE>Approssimazione</TITLE>
  <SCRIPT Language= "JavaScript">
  function Approssima()
  {
  A= Math.round(document.F1.T1.value)
  document.F1.T1.value= A
  }
  function Approssima1()
  {
  A= document.F1.T1.value*10
  A= Math.round(A)
  A= A/10
  document.F1.T1.value= A
  }
  function Approssima2()
  {
  A= document.F1.T1.value*100
  A= Math.round(A)
  A= A/100
  document.F1.T1.value= A
  }
  function Approssima3()
  {
  A= document.F1.T1.value*1000
  A= Math.round(A)
  A= A/1000
  document.F1.T1.value= A
  }
  </SCRIPT>
 </HEAD>
 <BODY>
 <B><FONT COLOR=red SIZE= 4 FACE= Georgia>Approssimazione di un numero</FONT></B>
 <FORM NAME="F1">
 <BR>
 <INPUT TYPE="TEXT" NAME="T1"><BR><BR>
 Approssimazione a:<BR><BR>
 <INPUT TYPE="BUTTON" NAME="B1" VALUE="intero" onClick="Approssima()">-
 <INPUT TYPE="BUTTON" NAME="B2" VALUE="primo decimale" onClick="Approssima1()">-
 <INPUT TYPE="BUTTON" NAME="B3" VALUE="secondo decimale" onClick="Approssima2()">-
 <INPUT TYPE="BUTTON" NAME="B4" VALUE="terzo decimale" onClick="Approssima3()"><BR><BR>
 <INPUT TYPE="RESET" VALUE="Ricompila">
 </FORM>
 </BODY>
</HTML>

La mia richiesta è: posso assegnare le funzioni a una lista di selezione per rendere il tutto più snello e pratico? Ho già provato a farlo ma con scarsi risultati; la lista di selezione viene creata ma non esegue nulla.

Grazie della disponibilità!

**KillerWorm** · 27-12-2013, 22:01

Ciao, sostanzialmente quello che ti serve è ottimizzare lo script in modo da avere un'unica funzione a cui passare un valore che definisca il numero di cifre decimali a cui approssimare il valore.
Avendo un'unica funzione puoi richiamare la stessa in modo semplice da qualunque punto del tuo documento.

Puoi ottimizzare la funzione in vari modi, dipende poi dalle tue esigenze.
Io ho cercato un po' online e sono arrivato a due soluzioni valide e abbastanza performanti.
Ho modificato il tuo esempio in questo modo:

codice:

<!DOCTYPE HTML>
<HTML xmlns="http://www.w3.org/1999/xhtml">
  <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <TITLE>Approssimazione</TITLE>
    <SCRIPT Language= "JavaScript">
      function Approssima(decimali){
        elem = document.F1.T1
        
        // Primo metodo
        elem.value= +(parseFloat(+elem.value).toFixed(decimali))
        
        // Secondo metodo
        //elem.value = Math.round(elem.value*(d=Math.pow(10,(+decimali||0))))/d;
      }
    </SCRIPT>
  </HEAD>
  <BODY>
    <B><FONT COLOR=red SIZE= 4 FACE= Georgia>Approssimazione di un numero</FONT></B>
    <FORM NAME="F1">
      <BR>
      <INPUT TYPE="TEXT" NAME="T1">
      <HR>
      
      Approssimazione a:
      <INPUT TYPE="BUTTON" NAME="B1" VALUE="intero" onClick="Approssima('pippo')">-
      <INPUT TYPE="BUTTON" NAME="B2" VALUE="primo decimale" onClick="Approssima(1)">-
      <INPUT TYPE="BUTTON" NAME="B3" VALUE="secondo decimale" onClick="Approssima(2)">-
      <INPUT TYPE="BUTTON" NAME="B4" VALUE="terzo decimale" onClick="Approssima(3)">
      <HR>
     
      Approssimazione a:
      <select onChange="Approssima(this.value)">
        <option value =0 selected>0</option>
        <option value =1>1</option>
        <option value =2>2</option>
        <option value =3>3</option>
      </select> decimali
      <HR>
      
      <INPUT TYPE="BUTTON" NAME="B5" VALUE="Approssima" onClick="Approssima(document.F1.DECIMALI.value)">
      a <INPUT TYPE="NUMBER" NAME="DECIMALI" MIN="0" MAX="3" VALUE="0"> decimali
      <HR>
      
      <BR><INPUT TYPE="RESET" VALUE="Ricompila">
    </FORM>
  </BODY>
</HTML>

Per la funzione Approssima ho adoperato diversi accorgimenti, non sto qui a commentare il tutto ma se hai bisogno di qualche chiarimento chiedi pure.
Come puoi vedere nella parte html, la stessa funzione poi viene richiamata in diverse maniere passando semplicemente un argomento per specificare il numero di cifre decimali.

PS: nei documenti html è consigliabile specificare sempre il DOCTYPE e il charset.

**kaine25** · 27-12-2013, 22:12

Grazie mille! Come suddetto sono alle prime armi e non sapevo si potesse fare così per approssimare un numero. La tua soluzione è molto ingegnosa, complimenti

Ah, non so cosa sia nè il doctype, nè il charset D:

EDIT: potresti spiegarmi meglio la parte dello script? vorrei capire come funziona

**KillerWorm** · 29-12-2013, 00:45

Doctype e charset sono delle dichiarazioni che servono a specificare il tipo di documento e la codifica di caratteri utilizzati nel documento. E' importante inserire queste dichiarazioni nelle proprie pagine html (e in eventuali altri tipi di documento) in modo che i browser le interpretino correttamente. Questo argomento non è strettamente legato a javascript per cui sarebbe offtopic discuterne in questo forum. Se ti serve approfondire, ti invito a fare qualche ricerca online a riguardo.

Per quanto riguarda lo script riporto qui l'esempio a cui però ho apportato una leggera modifica (ho eliminato parseFloat che risultava ridondante):

codice:

<!DOCTYPE HTML>
<HTML xmlns="http://www.w3.org/1999/xhtml">
  <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <TITLE>Approssimazione</TITLE>
    <SCRIPT Language= "JavaScript">
      function Approssima(decimali){
        elem = document.F1.T1
        
        // Primo metodo
        elem.value= +((+elem.value).toFixed(decimali))
        
        // Secondo metodo
        //elem.value = Math.round(elem.value*(d=Math.pow(10,(+decimali||0))))/d;
      }
    </SCRIPT>
  </HEAD>
  <BODY>
    <B><FONT COLOR=red SIZE= 4 FACE= Georgia>Approssimazione di un numero</FONT></B>
    <FORM NAME="F1">
      <BR>
      <INPUT TYPE="TEXT" NAME="T1">
      <HR>
      
      Approssimazione a:
      <INPUT TYPE="BUTTON" NAME="B1" VALUE="intero" onClick="Approssima('pippo')">-
      <INPUT TYPE="BUTTON" NAME="B2" VALUE="primo decimale" onClick="Approssima(1)">-
      <INPUT TYPE="BUTTON" NAME="B3" VALUE="secondo decimale" onClick="Approssima(2)">-
      <INPUT TYPE="BUTTON" NAME="B4" VALUE="terzo decimale" onClick="Approssima(3)">
      <HR>
     
      Approssimazione a:
      <select onChange="Approssima(this.value)">
        <option value =0 selected>0</option>
        <option value =1>1</option>
        <option value =2>2</option>
        <option value =3>3</option>
      </select> decimali
      <HR>
      
      <INPUT TYPE="BUTTON" NAME="B5" VALUE="Approssima" onClick="Approssima(document.F1.DECIMALI.value)">
      a <INPUT TYPE="NUMBER" NAME="DECIMALI" MIN="0" MAX="3" VALUE="0"> decimali
      <HR>
      
      <BR><INPUT TYPE="RESET" VALUE="Ricompila">
    </FORM>
  </BODY>
</HTML>

Intanto ti invito a cercare su qualche guida online le funzioni utilizzate.
Brevemente cerco di schematizzare il primo metodo:
elem.value = +((+elem.value).toFixed( decimali))

elem.value // è il valore testuale (quindi di tipo stringa) dell'elemento considerato.

+ // operatore più unario. In questo caso adoperato per convertire la stringa in un valore numerico. Similmente si può usare la funzione Number() o, in alcuni casi, parseFloat() (quest'ultimo può generare risultati differenti a seconda del browser).

+elem.value // converto il valore digitato in un Numero. Una soluzione simile potrebbe essere Number(elem.value) o, per certi versi, parseFloat(elem.value).

toFixed() // è un metodo della classe Number di javascript. Converte il numero, a cui è applicato tale metodo, in una stringa che rappresenta il valore numerico approssimato esattamente al numero di cifre decimali indicato come argomento.
Nota: se il valore di origine ha meno cifre decimali di quelle specificate, saranno aggiunti degli zeri alla fine. Per questa ragione ho convertito il tutto nuovamente in numero (il "+" iniziale) così che eventuali zeri aggiuntivi siano eliminati.

decimali // è il valore di decimali passato alla funzione "Approssima" e indicato, in questo caso, come argomento del metodo toFixed.

Spero sia tutto chiaro perchè non riuscirei a spiegare in maniera più semplice di questa.

**kaine25** · 29-12-2013, 15:24

Grazie della spiegazione, ancora una piccola domanda: se la funzione toFixed() approssima valore dell'argomento specificato allora perché mettere anche elem.value? Non potremo mettere solo elem.value = +toFixed(decimali)?

Forse ho capito ma mi serve conferma.. scusa la mia ignoranza ahah

**KillerWorm** · 29-12-2013, 17:45

Credo tu stia facendo un po' di confusione. Esattamente toFixed è un metodo della classe Number. In poche parole questo significa che devi applicarlo ad un numero.
Provo a farti qualche esempio:

codice:

num = 12345.6789 // questo è un numero, cioè un'istanza della classe Number
valoreApprossimato = num.toFixed(2) // applico il metodo toFixed a num, e specifico che deve essere approssimato alla seconda cifra decimale
alert(valoreApprossimato) // output: 12345.68

Ora supponi di avere un campo input che identifichiamo con la variabile "campo". Applichiamo quindi l'esempio sopra in modo da stampare il valore ottenuto su quel campo:

codice:

campo = document.tuocampoinput // definisco una variabile che fa riferimento al campo considerato
num = 12345.6789 // il numero da approssimare
valoreApprossimato  = num.toFixed(2) // applico toFixed con 2 decimali
campo.value = valoreApprossimato // applico il valore ottenuto al campo considerato (o meglio, alla sua proprietà value)

Se invece volessi prelevare il valore dal campo input e poi ristamparlo, una volta approssimato, sullo stesso campo, si potrebbe avere una cosa del genere:

codice:

campo = document.tuocampoinput // il campo input considerato
num = +campo.value // il valore prelevato dal campo. Nota che essendo una stringa devo convertirlo prima di applicare il metodo toFixed
valoreApprossimato  = num.toFixed(2) // applico toFixed con 2 decimali
campo.value = valoreApprossimato // stampo il valore ottenuto sul campo considerato

Quindi, facendo le dovute "semplificazioni", possiamo anche scrivere:

codice:

campo = document.tuocampoinput
valoreApprossimato  = (+campo.value).toFixed(2) // applico toFixed con 2 decimali al valore, convertito in numero, del campo considerato
campo.value = valoreApprossimato // stampo il valore ottenuto sul campo considerato

Sfoltiamo ancora:

codice:

campo = document.tuocampoinput
campo.value = (+campo.value).toFixed(2) // applico toFixed con 2 decimali al valore, convertito in numero, del campo considerato e stampo, sul campo stesso, il valore ottenuto.

Spero sia più chiaro

**kaine25** · 29-12-2013, 18:40

Sì, era un po' come immaginavo. Grazie ancora una volta per il chiarimento, la tua spiegazione è stata impeccabile!

Ultimissima domanda (spero di non annoiare xD) perché hai dovuto dare l'argomento alla funzione Approssima()? Non si poteva omettere l'argomento?

**KillerWorm** · 29-12-2013, 19:37

Originariamente inviata da kaine25

perché hai dovuto dare l'argomento alla funzione Approssima()? Non si poteva omettere l'argomento?

Capisco che sei alle prime armi ma questi sono principi elementari della programmazione procedurale.
Forse ho capito male la tua domanda ma do per scontato che tu sappia creare e richiamare delle funzioni con il passaggio e l'uso di argomenti.
Nell'esempio ho usato un argomento per definire il valore dei decimali da passare a quella specifica funzione. Se richiami la funzione senza passare alcun valore, il valore della variabile "decimali", usato dentro la funzione stessa, risulterà "undefined".
Ora, in questo caso specifico, alla chiamata del metodo toFixed ho passato la variabile "decimali" (che è l'argomento della funzione Approssima), quindi se "decimali" ha valore "undefined" il metodo toFixed lo convertirà nel valore di default 0. Per questo motivo se chiamo la funzione Approssima senza passare alcun valore è come se passassi il valore 0.
Per intenderci, questa chiamata:

codice:

Approssima()

ha lo stesso risultato di questa:

codice:

Approssima(0)

ottenendo quindi l'approssimazione ad un numero intero.

Chiaramente per approssimare ad un numero con una quantità di cifre decimali maggiore di 0, dovrò richiamare la funzione passando, appunto, il numero esatto per il quale sarà definita la quantità di decimali.... scusa il giro di parole

**kaine25** · 30-12-2013, 10:09

Nelle guide online che ho trovato si parlava superficialmente di quella che era la funzione degli argomenti e non ho avuto modo di comprendere bene il loro uso. Comunque ho capito benissimo, grazie ancora e scusa per le troppe domande! XD

**KillerWorm** · 30-12-2013, 22:25

Sicuramente troverai altre valide guide su cui approfondire.
Fgurati! Domandare è lecito...

Buona continuazione e un felice fineanno!

Discussione: Problema con assegnazione di una funzione

Strumenti discussione

Ricerca discussione

Visualizza

Problema con assegnazione di una funzione

Permessi di invio