Wybierz Strona

[JS] Średnia kolumn tablicy

Dziś rozwiążemy zadanie z Pracowni aplikacji internetowych. Kwalifikacja E.14 wydawnictwa WSiP.

Treść zadania:

Otrzymałeś polece­nie stworzenia aplikacji, której zadaniem jest obliczenie wartości śred­niej w poszczególnych kolumnach tablicy. Tablica powinna mieć dziesięć wierszy i dziesięć kolumn. Do tablicy wierszami wpisano kolejne liczby trzycyfrowe. Wynik działania aplikacji to wyświetlona zawartość tablicy (z za­chowaniem podziału na wiersze i kolumny) oraz wartości średnich w poszczególnych kolumnach. Do wpisania danych do tablicy i wykonania obliczeń należy użyć pętli.

Składniki:

Użyjemy pętli do wypełnienia tablicy oraz jej odczytania, tak jak w poprzednim wpisie: Jak stworzyć tablicę dwuwymiarową. W tablicy umieścimy liczby trzycyfrowe – tu zostawiam Ci pole do popisu;-) Dodatkowo stworzymy pętlę, która będzie liczyła wartości średnich dla każdej kolumny. Średnie przechowamy w dodatkowej tablicy. Na koniec wszystko razem wyświetlimy.

Zmienne:

Deklaracja zmiennych

//deklaracja zmiennych
        var iloscKolumn = 10;
        var iloscWierszy = 10;
        var liczbyTrzycyfrowe = 100;
        var napis = '';
        var tablica = [];
        var srednie = [];

Średnia wartość jednej kolumny

Zanim przejdziemy do głównego problemu, rozbijmy go na dwa mniejsze.

  1. Jak policzyć wartość średnią wszystkich wartości w jednej konkretnej kolumnie?
  2. Jak policzyć wartości średnie we wszystkich kolumnach, dla każdej osobno?

Aby rozwiązać pierwszy problem zastanówmy się jak odczytać z całej tablicy dwuwymiarowej tylko wartości jednej konkretnej kolumny?

 

Tak, wystarczy ustalić nr kolumny i odczytywać wszystkie wartości wierszy w tej kolumnie, czyli zapis:

suma += tablica[i][0];

wprowadzony do pętli for z licznikiem i, będzie dodawał kolejne wartości wierszy dla kolumny z indeksem 0. Natomiast kolejny zapis policzy nam średnią wartość kolumny(przy założeniu, że mamy 10 wierszy).

srednia=suma/10;

Teraz zastanów się nad drugim problemem….

 

Przydałaby nam się pętla, która wywołuje liczenie średniej dla konkretnej kolumny. Zróbmy zatem pętle zewnętrzną, nad tym kodem, który liczył nam średnią. W samym kodzie liczenia średniej wprowadzimy natomiast lekkie modyfikacje, otóż zamiast zmiennej średnia, wykorzystamy tablicę średnie, w której przechowywać będziemy wartości średnich, a w pętli liczącej sumę, zamiast tablica[i][0], dodamy drugi, zewnętrzny licznik, czyli otrzymamy: tablica[i][j]. Warto też skorzystać ze zmiennych, które określać będą liczbę kolumn i liczbę wierszy.

pętla zewnętrzna przesuwa się po kolumnach, pętla wewnętrzna po wierszach, sumując je dla danej kolumny.

//liczenie średniej wg kolumn
        for (var j = 0; j < iloscKolumn; j++) {
            var suma = 0;
            for (var i = 0; i < iloscWierszy; i++) {
                suma += tablica[i][j];
            }
            srednie[j] = suma / iloscWierszy;
        }

Wyświetlanie

Pozostało nam już tylko wyświetlić wynik i gotowe:) Przy tworzeniu napisu, wykorzystałem metodę join() dla tablicy jednowymiarowej srednie[].

 //dodatkowe formatowanie napisu
        napis += "Średnie każdej kolumny:<br>";
        napis += srednie.join(" ");
        //wyświetlenie napisu na stronie
        document.getElementById("ekranik").innerHTML = napis;

Wynik:

<p id="ekranik"></p><!-- [et_pb_line_break_holder] --> <script><!-- [et_pb_line_break_holder] --> //deklaracja zmiennych<!-- [et_pb_line_break_holder] --> var iloscKolumn = 10;<!-- [et_pb_line_break_holder] --> var iloscWierszy = 10;<!-- [et_pb_line_break_holder] --> var liczbyTrzycyfrowe = 100;<!-- [et_pb_line_break_holder] --> var napis = '';<!-- [et_pb_line_break_holder] --> var tablica = [];<!-- [et_pb_line_break_holder] --> var srednie = [];<!-- [et_pb_line_break_holder] --> //deklaracja drugiego wymiaru tablicy<!-- [et_pb_line_break_holder] --> for (var i = 0; i < iloscWierszy; i++) {<!-- [et_pb_line_break_holder] --> tablica[i] = [];<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> //wypełnianie tablicy wartościami<!-- [et_pb_line_break_holder] --> for (var i = 0; i < iloscWierszy; i++) {<!-- [et_pb_line_break_holder] --> for (var j = 0; j < iloscKolumn; j++) {<!-- [et_pb_line_break_holder] --> tablica[i][j] = liczbyTrzycyfrowe++;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> //odczytywanie tablicy i generowanie napisu <!-- [et_pb_line_break_holder] --> for (var i = 0; i < iloscWierszy; i++) {<!-- [et_pb_line_break_holder] --> for (var j = 0; j < iloscKolumn; j++) {<!-- [et_pb_line_break_holder] --> napis += tablica[i][j] + " ";<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> napis += '<br>';<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> //liczenie średniej wg kolumn<!-- [et_pb_line_break_holder] --> for (var j = 0; j < iloscKolumn; j++) {<!-- [et_pb_line_break_holder] --> var suma = 0;<!-- [et_pb_line_break_holder] --> for (var i = 0; i < iloscWierszy; i++) {<!-- [et_pb_line_break_holder] --> suma += tablica[i][j];<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> srednie[j] = suma / iloscWierszy;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> //dodatkowe formatowanie napisu<!-- [et_pb_line_break_holder] --> napis += "Średnie każdej kolumny:<br>";<!-- [et_pb_line_break_holder] --> napis += srednie.join(" ");<!-- [et_pb_line_break_holder] --> //wyświetlenie napisu na stronie<!-- [et_pb_line_break_holder] --> document.getElementById("ekranik").innerHTML = napis;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> </script>

O autorze

RafS

Moje główne zainteresowania to FIT: Fotografia Informatyka Technika

Zostaw odpowiedź

Twój adres e-mail nie zostanie opublikowany.

Pin It on Pinterest