Keskustelu: Nettisivujen teko: JavaScript-taulukko

peg [05.02.2008 17:53:13]

Taulukko 6 riviä ja 4 saraketta, joissa numeroita.
Miten lasketaan kunkin rivin arvot yhteen?
Miten lasketaan kunkin sarakkeen arvot yhteen?

jlaire [05.02.2008 20:26:14]

Esimerkiksi for-silmukoilla:

var taulu = [[ 0, 1, 2, 3],
             [ 4, 5, 6, 7],
             [ 8, 9,10,11],
             [12,13,14,15],
             [16,17,18,19],
             [20,21,22,23]];

var rivien_summat = [0,0,0,0,0,0];
var sarakkeiden_summat = [0,0,0,0];

var i, j;

// käydään kaikki alkiot lapi
for (i = 0; i < taulu.length; i++) {
    for (j = 0; j < taulu[i].length; j++) {
        rivien_summat[i] += taulu[i][j];
        sarakkeiden_summat[j] += taulu[i][j] } }

// rivien_summat == [6,22,38,54,70,86]
// sarakkeiden_summat == [60,66,72,78]

Tai funktionaalisemmin:

var rivien_summat = map(sum,taulu);
var sarakkeiden_summat = fold(function (xs,ys) { return zipWith(plus,xs,ys) }, [0,0,0,0], taulu);

function fold(f,y,xs) {
    return xs.length == 0
         ? y
         : f(xs[0],fold(f,y,xs.slice(1))) }

function map(f,xs) {
    return fold(function (y,ys) { return [f(y)].concat(ys) }, [], xs) }

function plus(x,y) {
    return x+y }

function sum(xs) {
    return fold(plus, 0, xs) }

function zipWith(f,xs,ys) {
    return xs.length == 0 || ys.length == 0
         ? []
         : [f(xs[0],ys[0])].concat(zipWith(f,xs.slice(1),ys.slice(1))) }

peg [05.02.2008 23:48:36]

Entä miten laitetaan input kentät ja value arvot=0 kunnes käyttäjä täyttää niitä.
Määritetäänkö jokaiselle solulle oma muuttuja johon annetut arvot luetaan?

jlaire [06.02.2008 13:22:43]

peg kirjoitti:

Entä miten laitetaan input kentät ja value arvot=0 kunnes käyttäjä täyttää niitä.

Ihan yksinkertaisesti laittamalla sinne HTML-koodiin value="0".

peg kirjoitti:

Määritetäänkö jokaiselle solulle oma muuttuja johon annetut arvot luetaan?

On paljon kätevämpää käyttää yhtä taulukkoa, johon kaikki arvot tallennetaan.

En tarkemmin tiedä mitä olet tekemässä, mutta tässä hätäisesti väsätty esimerkki, jossa luetaan <input>-elementtien arvoja ja lasketaan summia:

<head>
  <script>
    function nayta_summat() {
        var taulu = document.getElementById("taulu");
        var i,j;

        var rivien_summat = [0,0,0,0];
        var sarakkeiden_summat = [0,0,0,0];

        // taulu.rows on lista <tr>-elementteja
        for (i = 0; i < taulu.rows.length; i++) {
            // ja taulu.rows[i].cells on lista <td>-elementteja
            for (j = 0; j < taulu.rows[i].cells.length; j++) {
                // haetaan input-elementin arvo
                var luku = parseInt(taulu.rows[i].cells[j].firstChild.value);

                rivien_summat[i] += luku;
                sarakkeiden_summat[j] += luku } }

        alert("Rivien summat: " + rivien_summat + "\n" +
              "Sarakkeiden summat: " + sarakkeiden_summat) }
  </script>
</head>
<body>
  <form>
    <table id="taulu">
      <tr>
        <td><input type="text" value="0"></td>
        <td><input type="text" value="0"></td>
        <td><input type="text" value="0"></td>
        <td><input type="text" value="0"></td>
      </tr>
      <tr>
        <td><input type="text" value="0"></td>
        <td><input type="text" value="0"></td>
        <td><input type="text" value="0"></td>
        <td><input type="text" value="0"></td>
      </tr>
      <tr>
        <td><input type="text" value="0"></td>
        <td><input type="text" value="0"></td>
        <td><input type="text" value="0"></td>
        <td><input type="text" value="0"></td>
      </tr>
      <tr>
        <td><input type="text" value="0"></td>
        <td><input type="text" value="0"></td>
        <td><input type="text" value="0"></td>
        <td><input type="text" value="0"></td>
      </tr>
    </table>
    <p><button type="button" onclick="nayta_summat()">Nayta summat</button></p>
  </form>
</body>

Koodi ei ole läheskään validia, mutta varmaan siitä jotain näkee.

peg [06.02.2008 22:16:00]

Kyllähän toi sun toimii just silleen. Olen vain lähtenyt kehittelemään tätä
näin http://www.veijola.net/javascript/

Ihan harjoitus mielessä teen kun en ole tuota JS:ää ennen käyttänyt ja tuntui
että tällaiseen korttipeli King tuloslaskentaan saattaisi sopia.
Ja toimiihan tuo jo, mutta viidenteen sarakkeeseen olisi tarkoitus saada kontrollin takia tuo rivien arvo, eli pisteitä jaettu joka jaossa oikea määrä.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku