[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>
<script>
//deklaracja zmiennych
var iloscKolumn = 10;
var iloscWierszy = 10;
var liczbyTrzycyfrowe = 100;
var napis = '';
var tablica = [];
var srednie = [];
//deklaracja drugiego wymiaru tablicy
for (var i = 0; i < iloscWierszy; i++) {
tablica[i] = [];
}
//wypełnianie tablicy wartościami
for (var i = 0; i < iloscWierszy; i++) {
for (var j = 0; j < iloscKolumn; j++) {
tablica[i][j] = liczbyTrzycyfrowe++;
}
}
//odczytywanie tablicy i generowanie napisu
for (var i = 0; i < iloscWierszy; i++) {
for (var j = 0; j < iloscKolumn; j++) {
napis += tablica[i][j] + " ";
}
napis += '<br>';
}
//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;
}
//dodatkowe formatowanie napisu
napis += "Średnie każdej kolumny:<br>";
napis += srednie.join(" ");
//wyświetlenie napisu na stronie
document.getElementById("ekranik").innerHTML = napis;
</script>
![[JS]Malowanie Pokoju](https://i0.wp.com/rafalskowron.pl/wp-content/uploads/2018/02/malowanie1.jpg?resize=440%2C253&ssl=1)
![[JS] Rzuty kostką](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}
