Calcolatrice con radice quadrata

Questo script mostra come realizzare una semplice calcolatrice utilizzando del semplicissimo codice HTML, e soprattutto uno script Javascript (peraltro anch’esso abbastanza semplice).

Lo script sfrutta gli attributi HTML degli elementi di tipo <input> (che in questo caso rappresentano i vari pulsanti della calcolatrice), corrispondenti agli event handler degli eventi di click (onClick), passaggio del mouse (onMouseover) ed uscita del cursore del mouse dall’area coperta dall’elemento (onMouseout). Ad ognuno di questi attributi è associato un breve codice Javascript, che in genere consiste nel modificare il valore di un campo input di testo:

<input type="button" value=" 5 " onClick="display.value += '5'">

Questo codice, ad esempio, è quello relativo al tasto 5: al click del mouse, viene modificata la proprietà value dell’elemento con l’attributo id valorizzato a display. Quest’ultimo elemento rappresenta il display della nostra calcolatrice, che viene quindi di volta in volta modificato con in numeri che aggiungiamo, sfruttando l’operatore di concatenazione delle stringhe (+=).

Quando viene premuto il tasto etichettato con la stringa Calcola, la logica è sempre la stessa: l’event handler relativo all’evento di click viene attivato, ma questa volta la funzione specificata è eval(), che quindi valuta l’espressione (che dev’essere formattata in accordo alla sintassi di Javascript) e la esegue. Per questo motivo, per implementare il calcolo della radice quadrata, è necessario aggiungere la funzione sqrt nella stringa di codice inserita al click del mouse:

<input type="button" value="   RQ   " onClick="display.value = Math.sqrt(display.value)" onMouseover="info.value = 'Radice Quadrata'" onMouseout="info.value = ''">

Si noti, comunque, che l’uso di eval() è sempre fortemente sconsigliato (o quantomeno necessita di essere curato con molta attenzione), specialmente in produzione: ciò a causa di potenziali problemi di sicurezza derivanti dalla possibilità di injection di codice malevolo. Per approfondire questo aspetto, rimandiamo ad un’apposita lezione della guida a Javascript per esempi.