Operazioni matematiche

Il seguente esempio costruisce un form nell'area del browser, contenente due caselle di testo e un pulsante. Si inserisce un numero nella prima casella di testo e, premendo il pulsante, si ottiene il quadrato del numero nella seconda casella

La pressione del pulsante richiama la funzione javascript: Quadrato(), la quale accede alla casella di testo contenuta nel form, con il riferimento: Scheda.numero1.value, e dopo aver calcolato il quadrato lo mostra nella seconda casella di testo, con il riferimento: Scheda.quadro.value

Il riferimento specifica in nome del form (Scheda) e il nome della casella di testo in esso contenuta (numero1). Una casella di testo, però, possiede varie proprietà, quindi si specifica l'accesso alla proprietà value.

<html>

<head>

<script>

function Quadrato() {

  Scheda.quadro.value =
            parseInt(Scheda.numero1.value)
            * parseInt(Scheda.numero1.value)

}

</script>

</head>

<body>

<h1>Calcolatrice</h1>

<form name="Scheda">

  <table border="1">

  <tr>

  <td><input type="text" name="numero1" value=""></td>

  <td><input type="button" name="bn" value="Eleva al quadrato" onClick="Quadrato()"></td>

  <td>Quadrato: <input type="text" name="quadro" value=""></td></tr>

  </table>

</form>

</body>

</html>

La libreria Math

La libreria Math contiene le principali funzioni matematiche che si possono inserire in una espressione.

Nell'esempio che segue si inseriscono altre operazioni, ognuna richiamabile con un pulsante.

La radice quadrata viene richiamata con la funzione sqrt()

Il calcolo del logaritmo viene effettuato in base e con la funzione Math.log(). Il passaggio da base e a base 2 si ottiene calcolando il logaritmo in base e del numero e dividendo per il logaritmo in base e di 2.

<html>

<head>

<script>

function Quadrato() {

  Scheda.quadro.value =
            parseInt(Scheda.numero1.value)
            * parseInt(Scheda.numero1.value)

}

function Radice() {

  Scheda.radiceQ.value = Math.sqrt(parseInt(Scheda.numero2.value))

}

function Logbase2() {

  Scheda.lg2.value = Math.log((parseInt(Scheda.numero3.value)))/Math.LN2

}

</script>

</head>

<body>

<h1>Calcolatrice</h1>

<form name="Scheda">

  <table border="1">

  <tr>

  <td><input type="text" name="numero1" value=""></td>

  <td><input type="button" name="bn" value="Eleva al quadrato" onClick="Quadrato()"></td>

  <td>Quadrato: <input type="text" name="quadro" value=""></td></tr>

  <tr>

  <td><input type="text" name="numero2" value=""></td>

  <td><input type="button" name="bn2" value="Radice quadrata" onClick="Radice()"></td>

  <td>Radice: <input type="text" name="radiceQ" value=""></td></tr>

  <tr>

  <td><input type="text" name="numero3" value=""></td>

  <td><input type="button" name="bn3" value="logaritmo in base 2" onClick="Logbase2()"></td>

  <td>Logaritmo: <input type="text" name="lg2" value=""></td></tr>

  </table>

</form>

</body>

</html>

Problemi

Scrivere una funzione per il calcolo del rapporto tra due numeri, e inserire le opportune caselle di testo per inserire i due operandi, la casella di testo per mostrare il risultato e il pulsante per eseguire l'operazione. Poi inserire tre caselle di testo, al di sotto di quella del risultato della divisione, in cui viene mostrato:

Progetto di una semplice calcolatrice

In una sezione style definire le proprietà della tabella e delle celle, ad esempio il bordo, l'allineamento, la posizione nella pagina, ecc..

La tabella dovrebbe avere un aspetto simile al seguente:

  • A ciascun tag input, relativo ad un tasto numerico, inserire il gestore di evento onClick impostato per chiamare una funzione che riceve come parametro il valore del tasto premuto e scrive nella casella di testo, che svolge la funzione di display, la successione di tasti premuti.

    A questa funzione si dia il nome: ilDisplay, definendola come segue:

    function ilDisplay(num) {

      calcolatrice.visualizzatore.value += num

    }

    La funzione riceve il valore del tasto premuto nel parametro num e lo accoda ai valori precedenti già contenuti nella casella di testo del form.

  • Il tag input del tasto 7, ad esempio, ha la seguente definizione:

     

    <input type="button" value="7" onclick="ilDisplay(7)" />

     

    Quando si preme il tasto con la didascalia 7 viene richiamata la funzione ilDisplay la quale, nel parametro num, riceve il valore 7

  • La fine della composizione del primo operando avviene con la pressione di un tasto operazione. Si associ un gestore onclick al tasto +:

     

    <input type="button" value="+" onclick="ricordaOp('+')" />

     

    Il valore '+' passato nella chiamata alla funzione ricordaOp è usato per ricordare che, quando si terminerà di comporre anche il secondo operando, si dovrà eseguire la somma.

  • La funzione chiamata, ricordaOp, è definita come segue:

    var operando

    var Operaz

     

    function ricordaOp(Op) {

        operando = calcolatrice.visualizzatore.value

        calcolatrice.visualizzatore.value = ""

        Operaz = Op

    }

    La funzione memorizza nelle due variabili globali il valore contenuto sul display, cancellando il display per prepararsi ad acquisire il secondo operando, infine, viene memorizzato il codice dell'operazione da svolgere.

  • Quando si preme il tasto uguale si deve svolgere l'operazione tra il numero memorizzato nella variabile operando e il numero sul display.

    function operazione() {

      switch(Operaz) {

        case '+':

          calcolatrice.visualizzatore.value = eval(operando) + eval(calcolatrice.visualizzatore.value)

          break

        case '-':

           calcolatrice.visualizzatore.value = eval(operando) - eval(calcolatrice.visualizzatore.value)

          break

        default:

          break

      }

    }

  • Al pulsante "=" deve essere definito il gestore dell'evento onclick:

     

    <input type="button" value="=" onclick="operazione()" />

     

    • Allo studente è lasciato il compito di completare le funzionalità della calcolatrice.