Losowanie elementów z tablicy | JAVASCRIPT

Java Script podbija internet a biblioteki lotne (np. JQuery czy Prototype) dają niesamowite możliwości. Co jeśli zajdzie potrzeba wykonania losowych elementów na stronie z pewnego zbioru a możliwości techniczne wskazują na Java Script ? Najlepiej elemnty ułożyć w tablicy i za pomocą funkcji wylosować określoną ilość elementów.

Tworzymy tablicę JS

Chcemy otrzymać efekt losowości np. filmików - zwiastunów na stronie. Najpierw wrzućmy nasze zasoby do tablic. Aby utworzyć tablicę możemy posłużyć się przykładowo następującym kodem:

  var table_trailer = new Array(
  'film1',
  'film2',
  'film3',
  'film4',
  'film5',
  'film6'
  );

Funkcja losująca

Następnie stwórzmy sobie funkcję, która będzie zwracać losowe elementy (w parametrach tej funkcji będziemy przesyłać naszą tablicę i liczbę elementów losowych, które chcemy uzyskać):

function array_rand(input, num_req) {
  //  discuss at: http://phpjs.org/functions/array_rand/
  // original by: Waldo Malqui Silva
  //   example 1: array_rand( ['Kevin'], 1 );
  //   returns 1: 0

  var indexes = [];
  var ticks = num_req || 1;
  var checkDuplicate = function(input, value) {
    var exist = false,
      index = 0,
      il = input.length;
    while (index < il) {
      if (input[index] === value) {
        exist = true;
        break;
      }
      index++;
    }
    return exist;
  };

Funkcja zwróci nam indeksy losowe z naszej tablicy, my sobie zapiszemy to w następujący sposób:

table_trailer2 = array_rand(table_trailer,3);

 var index1 = table_trailer2[0];
 var zwiastun1 = table_trailer[index1];
 //alert(zwiastun1);

 var index2 = table_trailer2[1];
 var zwiastun2 = table_trailer[index2];
 //alert(zwiastun2);

 var index3 = table_trailer2[2];
 var zwiastun3 = table_trailer[index3];

Mamy wylosowane indeksy, w naszym przykładzie w drugim parametrze funkcji array_rand daliśmy "3" gdyż chcemy 3 losowe elementy ,mamy również tablicę w całości, nie pozostaje nic innego jak wypisanie losowych elementów na stronie. Z racji, że na co dzień korzystam z JQuery wykonam powyższe zadanie za pomocą funkcji html:

 $('.trailer1').html(zwiastun1);
 $('.trailer2').html(zwiastun2);
 $('.trailer3').html(zwiastun3);

Całość dla szybkich koderów

Dla leniwych, którzy nie mają czasu na rozkminkę i poznawanie mechanizmu losowania wklejam poniższy kod w całości. (Uwaga potrzebna jest załączona biblioteka Jquery)

function array_rand(input, num_req) {
  //  discuss at: http://phpjs.org/functions/array_rand/
  // original by: Waldo Malqui Silva
  //   example 1: array_rand( ['Kevin'], 1 );
  //   returns 1: 0

  var indexes = [];
  var ticks = num_req || 1;
  var checkDuplicate = function(input, value) {
    var exist = false,
      index = 0,
      il = input.length;
    while (index < il) {
      if (input[index] === value) {
        exist = true;
        break;
      }
      index++;
    }
    return exist;
  };

  if (Object.prototype.toString.call(input) === '[object Array]' && ticks <= input.length) {
    while (true) {
      var rand = Math.floor((Math.random() * input.length));
      if (indexes.length === ticks) {
        break;
      }
      if (!checkDuplicate(indexes, rand)) {
        indexes.push(rand);
      }
    }
  } else {
    indexes = null;
  }

  return ((ticks == 1) ? indexes.join() : indexes);
}



$(document).ready(function() {
  var table_trailer = new Array(
  'film1',
  'film2',
  'film3',
  'film4',
  'film5',
  'film6'
  );



 table_trailer2 = array_rand(table_trailer,3);

 var index1 = table_trailer2[0];
 var zwiastun1 = table_trailer[index1];
 //alert(zwiastun1);

 var index2 = table_trailer2[1];
 var zwiastun2 = table_trailer[index2];
 //alert(zwiastun2);

 var index3 = table_trailer2[2];
 var zwiastun3 = table_trailer[index3];
 //alert(zwiastun3);

 $('.trailer1').html(zwiastun1);
 //$('.trailer1').appendTo(zwiastun1);
 //$('.trailer2').appendTo(zwiastun2);
 $('.trailer2').html(zwiastun2);
 //$('.trailer3').appendTo(zwiastun3);
 $('.trailer3').html(zwiastun3);


});