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.