[JS] Średnia kolumn tablicy
Dziś rozwiążemy zadanie z Pracowni aplikacji internetowych. Kwalifikacja E.14 wydawnictwa WSiP.
Treść zadania:
Otrzymałeś polecenie stworzenia aplikacji, której zadaniem jest obliczenie wartości średniej 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 zachowaniem 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.
- Jak policzyć wartość średnią wszystkich wartości w jednej konkretnej kolumnie?
- 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>
![[JS]Malowanie Pokoju](https://i0.wp.com/rafalskowron.pl/wp-content/uploads/2018/02/malowanie1.jpg?resize=440%2C253&ssl=1)
![[JS] Jak stworzyć tablicę dwuwymiarową w JavaScript?](https://rafalskowron.pl/wp-content/themes/Extra/images/post-format-thumb-text.svg)
![[JS] Jak stworzyć tablicę dwuwymiarową w JavaScript?](https://secure.gravatar.com/avatar/cfe2fd897b82be50743fccd201b74274?s=40&d=mm&r=g){kind=small}
