conta-maggiori-js

Conta maggiori/minori di un valore in JS

di

Un esercizio semplice introduttivo per prendere dimestichezza con JS. Vogliamo inserire dei numeri da prompt/tastiera e vogliamo sapere quanti sono maggiori e minori di una data soglia.

Un esempio di realizzazione dell’interfaccia

Di seguito il codice del listato HTML. Come in molti esercizi, scriviamo le nostre pagine avvalendoci di Bootstrap come esercizio nel suo uso visto che ci permette con una manciata di copia/incolla di realizzare interfacce gradevoli e funzionali. Il lettore che non se ne volesse avvalere può semplicemente creare una form ma che abbia nei rispettivi field/campi l’attributo identificativo id, per noi id=”num” e id=”soglia”

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="js/script.js"></script>
    <title>Conta maggiori/minori</title>
  </head>
  <body>
  
  <div class="container">
    <h1>Conta maggiori e minori</h1> 
    <h3>Istruzioni:</h3>
    <ol>
      <li>Inserisci un valore per decidere quanti numeri confrontare</li>
      <li>Inserisci un valore di soglia</li>
      <li>Premi il bottone "Vai"</li>
      <li>Inserisci i valori nella prompt</li>
    </ol>
    <br>
    <form name="contaMaggiori">  
      <fieldset class="form-group border p-3">
    
    <div class="col-md-5">
      <label for="num" class="form-label">Quanti valori vuoi inserire</label>
      <input type="number" class="form-control" id="num" placeholder="">
    </div><br>
    <div class="col-md-5">
      <label for="soglia" class="form-label">Valore soglia</label>
      <input type="number" class="form-control" id="soglia" placeholder="">
    </div>
    <br>
  <input type="button" class="btn btn-success" value="Vai" onclick="gioca()">
  <input type="reset" class="btn btn-danger" value="Cancella">
  </fieldset>
  </form>
  <br>
  <div id="maggiori"></div>
  <div id="minori"></div>
  
</div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

Veniamo al cuore dell’esercitazione e analizziamo il nostro JavaScript. Tutto è gestito nel file script.js con l’unica funzione gioca() scatenata al click del bottone della form HTML.

Cosa c’è da fare: preleviamo gli oggetti JS della form compilabile; prendiamo i valori inseriti; chiamiamo un ciclo di inserimenti da promt e quindi con un secondi cicli controlliamo e contiamo i valori inseriti. Quindi scriviamo i risultati in due contenitori div della pagina HTML. Aggiungiamo, per esercizio, alcuni stili.

function gioca()
{
    let objNum = document.getElementById("num");
    let objSoglia = document.getElementById("soglia");

    let num = objNum.value;
    let soglia = objSoglia.value;

    let vettore = new Array();

    for (let i=0; i < num; i++)
    {
        vettore[i]= parseInt(prompt("Inserisci un elemento"));
    }

    let maggiori=0;
    let minori =0;

    for (let i=0; i < num; i++)
    {
        if (vettore[i] > soglia)
            maggiori = maggiori + 1;
        else
            minori = minori + 1;    
    }    

    let objMaggiori = document.getElementById("maggiori");
    objMaggiori.innerHTML = "Valori maggiori " + maggiori;
    objMaggiori.style.color = "blue";
    objMaggiori.style.fontSize = "2em";
    objMaggiori.style.fontWeight = "bold";

    document.getElementById("minori").innerHTML = "Valori minori " + minori;
    
}

Il codice completo su GitHub -> https://github.com/alfredocentinaro/esercizi-js/tree/main/conta-maggiori-minori

Provalo su Replit -> https://replit.com/@AlfredoCentina2/conta-maggiori-minori

Ultima modifica 16 Febbraio 2022

Visite: 157