Un altro esempio introduttivo per scoprire come funzionano i bottoni e le funzioni in JS.
Vengono usate le funzioni predefinite input e alert che aprono le box per input/output e viene usata la funzione parseInt che assicura la conversione numerica (cast) del valore immesso.
Il codice js è intuitivo per lo studente con dimestichezza con c/c++. La novità risulta essere la “non dichiarazione” delle variabili con il loro tipo (int, float, string ecc). Caratteristica molto comoda ma pericolosa per l’assegnazione eterogenea che può essere fatta ed anche per un uso di memoria non ottimale. Vediamo un piccolo esempio di interazione con l’utente.
Vogliamo realizzare una piccola interfaccia tutta js che ci apre due finestrelle dove inserire due valori e ce ne calcola alcune operazioni classiche quali somma, differenza, prodotto e quoziente. Ci occorre sempre una pagina html con cui lanciare il nostro codice. Se nel primo esempio abbiamo visto un bottone per generare un evento click, qui proviamo una ulteriore capacità del nostro js di essere lanciato in automatico col caricamento della pagina senza un evento vero e proprio che lo scateni.
<!doctype html>
<html lang="it">
<head>
<title>Test JS</title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/script.js"></script>
</head>
<body>
<main>
<h1>Test JS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit leo eu velit blandit posuere ac et sem. Nullam a turpis semper, finibus sapien vel, lobortis justo. Cras condimentum vel mi id accumsan. Nullam sed condimentum nisi. Duis non metus eros. Proin dignissim elit ut aliquet scelerisque. Pellentesque molestie gravida dolor, eu egestas nulla dapibus a. Sed vitae leo tellus. Donec convallis nulla non odio molestie, a gravida odio auctor. Aenean eu consectetur nunc.</p>
</main>
<script>Calcola();</script>
</body>
</html>In questo caso, per dimostrare la versatilità del js, abbiamo importato il file con la nostra funzione in alto, nello head, per poi lanciarla in modo molto semplice alla fine del caricamento di tutta la pagina html, semplicemente piazzando il codice in fondo, così da essere “letto” dal browser solo alla fine. E’ una caratteristica da non sottovalutare quando si realizzano pagine complesse e piene di codice sia html che js, di caricare qualcosa di non necessario alla fine per dare all’utente l’impressione di avere già la pagina caricata completamente. La funzione è disponibile perché viene di fatto importata precedentemente e quindi richiamabile quando si desidera nel codice. Fate attenzione sempre all’ordine con cui vengono caricate librerie e script vari e quando lanciate le funzioni e funzionalità in essi contenuti.
Finalmente la nostra funzione js nel file script.js:
//Una semplice funzione che chiede due numeri e ne esegue le operazioni elementari
//con il risultato a video
function Calcola()
{
op1 = parseInt(prompt("Inserisci il primo operando"));
op2 = parseInt(prompt("Inserisci il secondo operando"));
somma = op1 + op2;
differenza = op1 - op2;
prodotto = op1 * op2;
quoziente = op1 / op2;
alert ("Somma= " + somma);
alert ("Sottrazione= " + differenza);
alert ("Moltiplicazione= " + prodotto);
alert ("Divisione= " + quoziente);
}Esercizio: modifica il codice visto per chiedere in input l’operazione da svolgere e mostrare solo il risultato atteso.
Ultima modifica 19 Febbraio 2023