Esercizio cumulativo con JQuery: una semplice calcolatrice

di

Ora che abbiamo visto un po’ le cose interessanti e fondamentali di JQuery, proviamo a vedere qualche applicazione pratica. Ad esempio, realizziamo una calcolatrice, magari inizialmente un po’ spartana, ma che sfrutta le cose viste nei precedenti post.

Il codice JQuery, per comodità di pubblicazione, è immerso nella pagina html. Consiglio sempre di separare il codice js/jquery in uno script a parte.

<!DOCTYPE html>
<html lang="it">
<head>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(
	function()
	{
		$("#somma").click(
			function()
			{
				num1 = parseInt($("#num1").val());
				num2 = parseInt($("#num2").val());

				somma = num1 + num2;	
				$("#risultato").html(num1 + " + "+ num2 +"= " + somma );
			}
		);
	}
)
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Esercizio Calcolatrice JQuery</title>
</head>
<body>

<label>Numero 1 </label><input type="number" step=1 id="num1">
<br><br>
<label>Numero 2 </label><input type="number" step=1 id="num2">
<br><br>
<input type="button" value="+" id="somma">&nbsp; 
<input type="button" value="-" id="differenza"><br>
<input type="button" value="*" id="prodotto">&nbsp;
<input type="button" value="/" id="divisione">
<br>
<div id="risultato"></div>

</body>
</html>

Il risultato non è entusiasmante esteticamente. Il lettore può personalizzare con opportuno CSS i vari elementi. Esercizio successivo? creare una calcolatrice vera e propria con tutti i numeri da da 0 a 9 le operazioni ed un singolo elemento di input/display.

Ultima modifica 21 Febbraio 2022

Visite: 125