Confesso che il mini-tutorial che vi illustro non è pura farina del mio sacco, è frutto della rielaborazione di un esempio che mi venne fatto durante la spiegazione di actionscript ad un corso. Ma questo importa poco suppongo? Vediamo quindi come si fa ad estrarre dei numeri in ordine casuale compresi tra un valore minimo ed un valore massimo. Ottimo per realizzare una finta-lotteria ad esempio!
Il Markup html, prepariamo il form
<div id="esempio4" class="esempio"> <h2>Estrazione random da un array con valori compresi tra due numeri</h2> <form id="areaRett"> <p><label>Limite inferiore: <input type="text" id="limit1" /></label></p> <p><label>Limite superiore: <input type="text" id="limit2" /></label></p> <a href="javascript:void(0);" id="estrai">Estrai numeri</a><br /> </form> </div>
Diciamo che la scelta di usare un form è stata una mia fissa concettuale, ma non è assolutamente necessaria, è infatti possibile fare uso di div
e link tranquillamente, quello che ci interessa analizzare è lo script in javascript/jquery.
Il processo logico e lo script completo in javascript
Vi riporto lo script per intero (commentato per bene) di seguito con il quale andremo ad estrarre i nostri numeri da un array. Il ragionamento che si sviluppa nello script è il seguente:
- Creo un array che conterrà man mano tutti i numeri compresi tra il valore iniziale e finale
- Prendo un numero a caso compreso tra i due estremi
- Verifico che il numero sia già presente nell’array o meno. Se non è presente lo “pusho” nell’array per riempirlo
- Verifico se l’array è “pieno”. Se non lo è rilancio la funzione di controllo-riempimento. Se lo è mi fermo e restituisco tutti i risultati.
Tutto questo, tradotto in codice…
// lancio la funzione random $("#estrai").click(function(){ //svuoto l'array, mi serve se uso risultati multipli arrvalues.length = 0; $(".estrazioneRandom").remove(); var limit1 = parseInt($("#limit1").val()); var limit2 = parseInt($("#limit2").val()); getRandNumb(limit1, limit2); }); // array di backup var arrvalues = new Array(); // funzione di random function getRandNumb(val1, val2){ // genero il numero random var r = Math.random() * (val2 - val1) + val1; var r_rounded = Math.round(r); // verifico se il numero fa già parte dell'array. Se non ne fa parte il risultato è -1 var isvalid = (arrvalues.indexOf(r_rounded) == -1); if (isvalid){ $("#esempio4").append("<div class='estrazioneRandom'>new item: "+ r_rounded + "</div>"); /* se il numero è valido 1. pusho il numero nell'array 2. se l'array non è pieno rilancio la funzione */ arrvalues.push(r_rounded); if (arrvalues.length < = (val2 - val1)){ getRandNumb(val1, val2); }else{ $("#esempio4").append("<div class='estrazioneRandom'>Array terminato"); } }else{ getRandNumb(val1, val2); } }
Quali altri utilizzi vedresti per uno script simile?