JavaScript - "Ruudukko taululle"

TAULUKOT JA METODIT

Oppaassa kohdassa muuttujan on esitelty lyhyesti taulukoita ja objekteja, tässä osassa käsitellään taulukkoihin liittyviä metodeita.

Esimerkissä, yksi-uloitteinen henkilo-taulukko jossa sisältönä merkkijonoja ja numeroarvo:


  <p id="taulu1A"></p>

  <script>
   var henkilo = ["Kalle ", "Korkkinen ", 46];
   document.getElementById("taulu1A").innerHTML = 
    henkilo + " - koko taulukon sisältö<br>" +
    henkilo[1] + " - taulukon tietyn solun sisältö";
  </script>

Tulos www-sivulla:


Edellinen esimerkki muokattuna objektiksi:


  <p id="taulu1B"></p>

  <script>
   var person = {etuNimi:"Kalle", sukuNimi:"Korkkinen", ika:46};
   document.getElementById("taulu1B").innerHTML = person["sukuNimi"];
  </script>

Tulos www-sivulla:


TEHTÄVÄ 1 Useampi objekti.

Kopioi yllä oleva esimerkki,testaa sen toiminta ja muokkaa esimerkistä seuraava.

Tee kolme objektia, etunimi, sukunimi ja ika.

Kuhunkin objektiin sijoitetaan kolme tietoa:
- etunimi-objektiin kolme etunimeä,
- sukunimi-objektiin kolme sukunimeä ja
- ika-objektiin kolme ikää numeroarvona.

Näytä www-sivulle 1. etunimi, 2.sukunimi ja 3. ikä, esim:

Virtanen Antero 22




Taulukon solun sisältö voi olla objekti, taulukon solun sisällöksi voidaan sijoittaa joku muu taulukko:


  omaTaulukko[0] = Date.now;
  omaTaulukko[1] = omaKoodi;
  omaTaulukko[2] = omatAutot;

Taulukoon voidaan kohdistaa metodeita, hedelmat-taulukon solujen määrän laskeminen:

 
 <p id="taulu1C"></p>

 <script>
  var hedelmat = ["Banaani", "Appelsiini", "Omena", "Sitruuna", 0];
  document.getElementById("taulu1C").innerHTML = hedelmat.length;
 </script>

Tulos www-sivulla,taulukon solujen lukumäärä:


HOT TIP!! Taulukon sisältöä voidaan käsitellä toistorakenteella, taulukon sisällön näyttäminen listana: 

 
 <p id="tauluD"></p>

 <script>
  var hedelmat, teksti, monta, laskuri;
  hedelmat = ["Banaani", "Appelsiini", "Omena", "Sitruuna", 0];

  monta = hedelmat.length;
  teksti = "<ul>";
  for (laskuri = 0; laskuri < monta; laskuri++) {
    teksti += "<li>" + hedelmat[laskuri] + "</li>";
  }
  teksti += "</ul>";
  document.getElementById("tauluD").innerHTML = teksti;
 </script>

Tulos www-sivulla:


Taulukkoon voidaan lisätä tietoa, esimerkissä painikkeella: 

 
 <button onclick="lisaaHedelma()">Lisää tieto</button>
 
 <p id="tauluE"></p>

 <script>
  var hedelmat = ["Banaani", "Appelsiini", "Omena", "Sitruuna"];
  document.getElementById("tauluE").innerHTML = hedelmat;

  function lisaaHedelma() {
    hedelmat.push("Kiwi");
    document.getElementById("tauluE").innerHTML = hedelmat;
  }
 </script>

Tulos www-sivulla:


TAULUKKO METODIT

toString() metodi

Metodilla toString() erottelee pilkulla merkkijonoja, myös numeron:

 
 <p id="tauluFA"></p>

 <script>
  var hedelmat = ["Banaani", "Appelsiini", "Omena", "Sitruuna",37];
  document.getElementById("tauluFA").innerHTML = hedelmat.toString();
 </script>

Tulos www-sivulla:


join() metodi

Metodilla join() voidaan taulukosta liittää merkkijonoja halutulla merkillä eroteltuna:

 
 <p id="tauluFB"></p>

 <script>
  var hedelmat = ["Banaani", "Appelsiini", "Omena", "Sitruuna",37];
  document.getElementById("tauluFB").innerHTML = 
   hedelmat.join(" ") + "<br>" +
   hedelmat.join(" & ");
 </script>

Tulos www-sivulla:


pop() ja push() metodit

Näillä metodeilla voidaan taulukosta poistaa ja lisätä solu taulukkoon.

Metodilla pop() voidaan poistaa taulukon viimeinen solu, esimerkissä myös näytetään poistettavan solun sisältö:

 
 <p id="tauluFC"></p>
 <p id="tauluFD"></p>
 <p id="tauluFE"></p>
 
 <script>
  var hedelmat = ["Banaani", "Appelsiini", "Omena", "Sitruuna",37];
  document.getElementById("tauluFC").innerHTML = hedelmat;
  document.getElementById("tauluFD").innerHTML = hedelmat.pop();
  hedelmat.pop();
  document.getElementById("tauluFE").innerHTML = hedelmat;
 </script>

Tulos www-sivulla:


Metodilla push() voidaan lisätä taulukkoon solu ja soluun sisältö:

 
 <p id="tauluFF"></p>
 
 <p id="tauluFF"></p>

 <script>
  var hedelmat = ["Banaani", "Appelsiini", "Omena", "Sitruuna",37];
  document.getElementById("tauluFF").innerHTML = hedelmat;

  function lisaaSolu() {
    hedelmat.push("Mansikka");
    document.getElementById("tauluFF").innerHTML = hedelmat;
  }
 </script>

Tulos www-sivulla:


Taulukon solun siirtäminen

shift() metodi

Metodilla shift() voidaan "siirtää" taulukon solu ja solun sisältö pois taulukon alusta. Esimerkissä siirretään taulukon poistetaan 1.solu:

 
 <p id="tauluEA"></p>
 <p id="tauluEB"></p>

 <script>
  var hedelmat = ["Banaani", "Appelsiini", "Omena", "Sitruuna",37];
  document.getElementById("tauluEA").innerHTML = hedelmat;
  hedelmat.shift();
  document.getElementById("tauluEB").innerHTML = hedelmat;
 </script>

Tulos www-sivulla:


Poisto ja samalla poistettavan solun sisällön näyttäminen:

 
 <p id="poistettu"></p>
 
 <script>
  var hedelmat = ["Banaani", "Appelsiini", "Omena", "Sitruuna",37];
  document.getElementById("poistettu").innerHTML = hedelmat.shift();
 </script>

Tulos www-sivulla:


unshift() metodi

Metodilla unshift() voidaan taulukon alkuun lisätä solu ja solun sisältö:

 
 <button onclick="omaLisays()"> Lisää tieto </button>
 
 <p id="tauluEC"></p>

 <script>
  var hedelmat = ["Banaani", "Appelsiini", "Omena", "Sitruuna"];
  document.getElementById("tauluEC").innerHTML = 
   "Taulukko alussa:" + " " +
   hedelmat;

  function omaLisays() {
    hedelmat.unshift("Puolukka");
    document.getElementById("tauluEC").innerHTML =  
     "Lisätty tieto: " + " " + hedelmat;
  }
 </script>

Tulos www-sivulla:


Haluttaessa vaihtaa taulukossa olevan solun sisältö, on tieto sijoitettava taulukon soluun: hedelmat[3] = "Mustikka";

Sisällön vaihtaminen onnistuu myös haluttuun kohtaan taulukossa:

 
 <button onclick="omaVaihto()"> Vaihda </button>
 
 <p id="tauluED"><</p>

 <script>
  var hedelmat = ["Banaani", "Appelsiini", "Omena", "Sitruuna"];
  document.getElementById("tauluED").innerHTML = 
   "Taulukko aluksi: " + "<br>"+
   hedelmat;

  function omaVaihto() {
    hedelmat[hedelmat.length - 2] = "Mustikka";
    document.getElementById("tauluED").innerHTML =
     "Omena vaihdettu Mustikkaan: " + "<br>"+ 
     hedelmat;
  }
 </script>

Tulos www-sivulla:

<


Enemmän ohjelmointi vaatisi etsiä taulukosta soluista tieto haluttu tieto, laskea muuttujiin taulukon koko ja solun sijainti sekä vaihtaa kysyiseen soluun sisältö.
Taulukosta on mahdollista, mutta ei suositeltavaa tuhota (delete) solu sisältöineen, joten käytä mielummin tämän toteutuksessa pop()- ja shift()-metodeita.



SOLUN TAI SOLUJEN LIITTÄMINEN TAULUKKOON

splice() metodi

Metodilla splice() voidaan liittää solujen sisältöineen taulukkoon:

taulukon_nimi.splice(kohta taulukossa, solujenmäärä, sisältö_1, sisältö_2) 
 * kohta taulukossa - 0 = taulukon alkuun, jolloin alkuperäinen sisältö siirtyy seuraaviin soluihin
 * solujenmäärä - hiukan epäselvä miten numero-asetus vaikuttaa, huomaa miinusmerkkinenkin luku kelpaa
 * sisältö_1 - lisättävä tieto, yksi tai useampia

Esimerkki:

 
 <button onclick="lisaaOma()"> Lisää taulukkoon </button>
 
 <p id="tauluEE"></p>

 <script>
  var hedelmat = ["Banaani", "Appelsiini", "Omena", "Sitruuna"];
  document.getElementById("tauluEE").innerHTML = hedelmat;
  function lisaaOma() {
    hedelmat.splice(1, 0, "Mansikka", "Kirsikka");
    document.getElementById("tauluEE").innerHTML = hedelmat;
  }
 </script>

Tulos www-sivulla:


splice() metodi

Solun siirtäminen onnistuu splice()-metodilla, esimerkissä ensimmäinen solu siirretään "pois":

 
 <button onclick="omaSiirto()"> Siirrä </button>
 
 <p id="tauluEF"></p>

 <script>
  var hedelmat = ["Banaani", "Appelsiini", "Omena", "Sitruuna"];
  document.getElementById("tauluEF").innerHTML = hedelmat;
  function omaSiirto() {
    hedelmat.splice(0, 1);
    document.getElementById("tauluEF").innerHTML = hedelmat;
  }
 </script>

Tulos www-sivulla:


concat(), Kahden taulukon liittäminen yhdeksi taulukoksi

Kaksi taulukkoa liitetään yhdeksi uudeksi taulukoksi concat()-metodilla:

 
 <p id="liitettyA"></p>

 <script>
  var nimet_1 = ["Arto", "Lassi"];
  var nimet_2 = ["Eemeli", "Ville", "Jyrki"];
  var nimet = nimet_1.concat(nimet_2);

  document.getElementById("liitettyA").innerHTML = nimet;
 </script>

Tulos www-sivulla:


concat(), Kolmen taulukon liittäminen yhdeksi taulukoksi

Kaksi taulukkoa liitetään yhdeksi uudeksi taulukoksi concat()-metodilla:

 
 <p id="nimiLuettelo"></p>

 <script>
  var nimet1 = ["Arto", "Lassi"];
  var nimet2 = ["Eemeli", "Ville", "Jyrki"];
  var nimet3 = ["Maija", "Kaisa"];

  var kaikkiNimet = nimet1.concat(nimet2, nimet3); 

  document.getElementById("nimiLuettelo").innerHTML = kaikkiNimet;
 </script>

Tulos www-sivulla:


Myös seuraavalla tavalla concat()-metodilla voidaan lisätä tietoa taulukkoon:

 
  var kaikkiNimet = nimet1.concat("Ville", "Maija");

slice(), solun poistaminen

Taulukosta voidaan poistaa sen alusta solu ja solun tieto slice()-metodilla:

 
 <p id="autoLuettelo"></p>

 <script>
   var autot = ["BWM", "Opel", "Lexus", "Audi", "Maybach"];
  var uusi = autot.slice(1);
  document.getElementById("autoLuettelo").innerHTML = 
    autot + "<br><br>" + uusi;
 </script>

Tulos www-sivulla:


Metodissa numero-arvolla kerrotaan poistettavien solujen määrä:
autot.slice(3) - poistaa kolme ensimmäistä solua
autot.slice(1,3) - poistaa 1.solun ja 3. solun jälkeen kaikki loput solut



TAULUKON SISÄLLÖN JÄRJESTÄMINEN, sort( )-metodi

Taulukon sisällön aakkosjärjestykseen voi järjestää sort()-metodilla:

 
 <button onclick="aakkosienMukaan()"> Aakkos-järjestykseen </button>
 
 <p id="vaihtoautot"></p>

 <script>
  var autot = ["BWM", "Opel", "Lexus", "Audi", "Maybach"];
  document.getElementById("vaihtoautot").innerHTML = autot;

  function aakkosienMukaan() {
    autot.sort();
    document.getElementById("vaihtoautot").innerHTML = autot;
  }
 </script>

Tulos www-sivulla:


Taulukon sisällön järjestyksen voi kääntää reverse()-metodilla.

Jos taulukossa on järjestys:
A B C D E

Kohdistettaessa reverse()-metodi taulukkoon, taulukossa järjestys muuttaa seuraavaksi:

E D C B A

Edelliseen esimerkkiin lisätään autot.sort() alapuolelle autot.reverse():

autot.sort();
autot.reverse();

Numeroiden järjestäminen pienimmästä suurimpaan sort()-metodilla:

 
 <button onclick="jarjestaNumerot()"> Järjestä </button>
 
 <p id="jarjestetty"></p>

 <script>
  var pisteet = [40, 100, 1, 5, 25, 10];
  document.getElementById("jarjestetty").innerHTML = 
   "Pisteet aluksi:<br>" + 
   pisteet;    

  function jarjestaNumerot() {
    pisteet.sort(function(a, b){return a - b});
    document.getElementById("jarjestetty").innerHTML =  
     "Pisteet lopuksi:<br>" + 
     pisteet;
  }
 </script>

Tulos www-sivulla:


Järjestäminen suurimmasta pienimpään onnistuu vaihtamalla sort()-metodissa aaltosulkeissa olevien a- ja b kirjainten paikat keskenään:

pisteet.sort(function(a, b){return b - a});



Numerot voi taulukossa järjestää satunnaiseen järjestykseen random()-metodilla:

 
 <button onclick="omaSattuma()"> Sattuma </button>
 
 <p id="noppa"></p>

 <script>
  var numerot = [1, 2, 3, 4, 5, 6];
  document.getElementById("noppa").innerHTML = numerot;    

  function omaSattuma() {
    numerot.sort(function(a, b){return 0.5 - Math.random()});
    document.getElementById("noppa").innerHTML = numerot;
  }
 </script>

Tulos www-sivulla:


Suurimman tai pienimmän numeroarvon etsiminen taulukosta, on helpointa saada selville kun järjestää taulukon haluttuun järjestykseen ja näyttää taulosta esimerkiksi sen ensimmäissä solussa olevan arvon.

Seuraavassa suurimman arvon etsimiseen käytetään Math.max()-metodia: 

 
 <p Suurimmat pisteet: <span id="isotPisteet"><span></p>

 <script>
  var pisteet = [120, 127, 3, 99,34, 11];
  document.getElementById("isotPisteet").innerHTML = maxPisteet(pisteet);

  function maxPisteet(taulu) {
    return Math.max.apply(null, taulu);
  }
 </script>

Tulos www-sivulla:


Vastaavasti pienimmän arvon löytäisi Math.min()-metodilla käyttämällä yllä olevaa esimerkkiä vaihtamalla max-sanan min-sanaan kohdassa:

return Math.max.apply(null, taulu);



TAULUKON JÄRJESTÄMINEN OBJEKTIN MUKAAN

Esimerkissä sort()-metodia hyödyntäen järjestetään taulukkoon tallennetut tiedot objektien mukaan:

 
 <button onclick="autotJarjesta()"> Iän mukaan </button>
 
 <p id="merkit"></p>

 <script>
  var autot = [
   {merkki:"Audi", vmalli:2016},
   {merkki:"Mercedez Benz", vmalli:2001},
   {merkki:"BMW", vmalli:2010}]

  naytaAutot();

  function autotJarjesta() {
    autot.sort(function(a, b){return a.vmalli - b.vmalli});
    naytaAutot();
  }

  function naytaAutot() {
   document.getElementById("merkit").innerHTML =
   autot[0].merkki + " " + autot[0].vmalli + "<br>" +
   autot[1].merkki + " " + autot[1].vmalli + "<br>" +
   autot[2].merkki + " " + autot[2].vmalli;
  }
 </script>

Tulos www-sivulla:


Seuraavassa esimerkissä järjestetään autot aakkosjärjestykseen:

 
 <button onclick="omaJarjestys()">Järjestä </button>
 
 <p id="merkitA"></p>

 <script>
  var autot = [
   {merkki:"Volvo", vuosim:2016},
   {merkki:"Saab", vuosim:2001},
   {merkki:"BMW", vuosim:2010}]

  autotNayta();

  function omaJarjestys() {
    autot.sort(function(a, b){
        var x = a.merkki.toLowerCase();
        var y = b.merkki.toLowerCase();
        if (x < y) {return -1;}
        if (x > y) {return 1;}
        return 0;
    });
    autotNayta();
  }

  function autotNayta() {
   document.getElementById("merkitA").innerHTML =
    autot[0].merkki + " " + autot[0].vuosim + "<br>" +
    autot[1].merkki + " " + autot[1].vuosim + "<br>" +
    autot[2].merkki + " " + autot[2].vuosim;
  }
 </script>

Tulos www-sivulla:


Design and edit player