[JS] Rzuty kostką

przez | mar 2, 2018 | INF.03

Dziś stworzymy aplikację, która zbada ile razy w 100 rzutach kostką wypadną poszczególne liczby. Dodatkowo wszystkie rzuty mają zostać zapisane w tablicy.

Jak symulować rzut kostką do gry?

Rzucając zwykłą kostką do gry, otrzymamy liczby całkowite z zakresu od 1 do 6.

Jak wylosować liczbę za pomocą JavaScript?

W JavaScript funkcja random obiektu Math, umożliwia nam wylosowanie liczby rzeczywistej z zakresu [0;1). Oznacza to, że wylosować możemy np.: 0, 0.5, 0.1203, 0.912, 0.999 ale nigdy nie wylosujemy liczby 1 i większej niż 1.

W jaki sposób wylosować liczby całkowite z zakresu od 1 do 6?

Jeżeli wylosowaną liczbę pomnożysz przez 6, otrzymasz zakres [0;6). Wyobraź sobie oś liczbową, zaznacz na niej nasz zakres i pomyśl, co trzeba zrobić, aby zakres zaczynał się od 1? Tak, wystarczy przesunąć zakres o jeden w prawo. Zrobimy to dodając do naszej liczby 1, otrzymujemy zakres [1,7). Niestety wciąż nie otrzymujemy liczb całkowitych, a także możemy wylosować liczbę większą od 6(ale jednocześnie mniejszą od 7). Aby otrzymywać liczby całkowite wykorzystamy zaokrąglanie. Mamy do dyspozycji 3 rodzaje zaokrąglania:

Math.ceil();
Math.floor();
Math.round();

Pierwsza z nich zaokrągla do góry, tzn. mając liczby:

  • 0.4, 0.7, 1.2, 6.5

otrzymamy odpowiednio:

  • 1, 1, 2, 7

Druga metoda zaokrągla w dół, czyli dla naszych przykładowych liczb otrzymamy:

  • 0, 0, 1, 6

Trzecia metoda zaokrągla klasycznie wg normalnych reguł matematycznych, zatem otrzymamy:

  • 0, 1, 1, 7

Która z tych metod przyda się nam do aplikacji?

Sposób na wylosowanie liczby z zakresu od 1 do 6

rzut = Math.floor(Math.random() * 6 + 1);

Jak rzucić kostką 100 razy przy użyciu JavaScript?

Wystarczy użyć pętli, która wykona się 100 razy, a w niej umieścimy nasz rzut kostką. Aby rzuty zapisywały się, stworzymy tablicę, do której będziemy zapisywać kolejne rzuty.

100 rzutów kostką

 var rzut = [];
        for (var i = 0; i < 100; i++) {
            rzut[i] = Math.floor(Math.random() * 6 + 1);
        }
        alert(rzut.join());

Aplikacja

Skoro potrafimy już zasymulować 100 rzutów kostką, napiszmy całą aplikację, która policzy ile razy wypadnie dana liczba. W tym celu, na początku deklarujemy zmienne:

  • tablicę do przechowywania rzutów
  • tablicę w której będziemy zliczać ile razy wypadnie dana liczba
  • napis za pomocą którego poinformujemy użytkownika o wynikach naszego eksperymentu.
var rzut = [];
        var stat = [0, 0, 0, 0, 0, 0];
        var napis = "";

Teraz rozpoczniemy pętle, tak jak przy wcześniej rzucając 100 razy kostką.

for (var i = 0; i < 100; i++) {
            rzut[i] = Math.floor(Math.random() * 6 + 1);

Zanim zakończymy działanie pętli zastanówmy się jak zapisywać do tablicy stat ile razy wypadła dana liczba. Moglibyśmy użyć instrukcji warunkowej, która sprawdzałaby czy wypadła 1, jeśli tak, to zwiększamy o jeden wartość w tablicy stat odpowiadającej jedynce(w moim przypadku będzie to pierwsza pozycja z indeksem 0).

if(rzut[i]==1) stat[i]++;

I tak dalej, sprawdzając wszystkie możliwości. Warto jednak by było zastosować w tym celu inną instrukcję, taką która ze swojej definicji zastępuje wiele instrukcji if. Skorzystamy z instrukcji switch, która w zależności od przypadku(case) będzie zachowywała się nieco inaczej. Pamiętaj, że po każdym przypadku musisz użyć instrukcji break.

switch (rzut[i]) {
            case 1:
                stat[0]++;
                break;
            case 2:
                stat[1]++;
                break;
            case 3:
                stat[2]++;
                break;
            case 4:
                stat[3]++;
                break;
            case 5:
                stat[4]++;
                break;
            case 6:
                stat[5]++;
                break;
            }

Czy można udoskonalić nasz kod?

Oczywiście, że tak, możemy całkowicie wyeliminować sprawdzanie czy to za pomocą if, czy switch i wykorzystać następujący kod...

stat[rzut[i] - 1] += 1;

Co robi ten kod?

Przeanalizuj dokładnie swój skrypt, a na pewno samodzielnie odpowiesz na to pytanie.

Wyświetlanie

Teraz pozostało stworzyć napis za pomocą, którego przekażesz informację użytkownikowi i go wyświetlić. Poniżej przykładowy efekt działania naszego skryptu.

<p id="ekranik"></p>
 <script>
 var rzut = [];
 var stat = [0, 0, 0, 0, 0, 0];
 var napis = "";

 for (var i = 0; i < 100; i++) {
 rzut[i] = Math.floor(Math.random() * 6 + 1);
stat[rzut[i] - 1] += 1;
 }
 napis = "W 100 rzutach wypadło: <br>" + stat[0] + " jedynek, <br>" + stat[1] + " dwójek, <br>" + stat[2] + " trójek, <br>" + stat[3] + " czwórek, <br>" + stat[4] + " piątek, <br>" + stat[5] + " szóstek.<br>";
 document.getElementById("ekranik").innerHTML = napis;
 </script>

[JS] Średnia kolumn tablicy

przez | mar 1, 2018 | INF.03

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>
 <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] Jak stworzyć tablicę dwuwymiarową w JavaScript?

przez | mar 1, 2018 | INF.03

Tablice w JavaScript

Przypomnijmy sobie kilka podstawowych rzeczy o tablicach:

  • w tablicy można przechowywać wiele wartości(w odróżnieniu od zwykłej zmiennej, która przechowuje jedną wartość)
  • w tablicy JavaScript można przechowywać liczby, tekst, tablice i obiekty
  • tablice w JavaScript są obiektami
  • tablicę deklarujemy korzystając z nawiasów kwadratowych

Przykład tworzenia tablicy przechowującej kilka wartości.

  • długość tablicy(czyli ilość jej elementów) otrzymujemy poprzez jej właściwość length

Po więcej informacji, metod, właściwości tablic i przykładów na ich wykorzystanie odsyłam na w3schools. Znajduje się tam  fragment o tym, że w tablicach możemy przechowywać także inne  tablice. Taka tablica, która w każdej swojej komórce przechowuje tablicę nazywamy tablicą dwuwymiarową.

Brzmi poważnie?

Wyobraź sobie planszę do gry w statki, to jest właśnie tablica dwuwymiarowa.

Jak stworzyć tablicę dwuwymiarową?

Przedstawię jedną z metod tworzenia tablicy dwuwymiarowej. Na początku zadeklarujemy pustą tablicę o nazwie tablica

Drugim krokiem będzie zadeklarowanie w każdym elemencie tablicy kolejnej tablicy. W tym miejscu powinniśmy wiedzieć ile wierszy będzie miała nasza tablica.

Tablica dwuwymiarowa w działaniu

Powyższy kod wystarczy do zadeklarowania tablicy. Poniżej znajduje się gotowy przykład, który wypełnia tablicę wartościami z numerami wiersza i kolumny.

Jak wyświetlić tablicę dwuwymiarową?

Wykorzystaj do tego pętlę, taką jak przy wypełnianiu danymi, tylko tym razem odczytaj z niej wartości. Warto sformatować tekst, który generujemy i przedstawić go tak, aby po każdym wierszu(po każdej iteracji po i) przechodzić do nowej linjki.

Przykład

Poniżej zamieszczam cały listing strony, która prezentuje omawiany problem.

Efekt działania

[JS]Malowanie Pokoju

[JS]Malowanie Pokoju

przez | lut 28, 2018 | INF.03

"Malowanie pokoju" - E.14 - JavaScript

Dziś rozwiążemy wspólnie fragment zadania egzaminacyjnego z kwalifikacji E.14 z 2017 roku. Do wykonania mamy stronę wyglądającą jak obrazek powyżej. Strona ma umożliwiać obliczenie kosztu malowania pokoju o wymiarach wprowadzanych przez użytkownika. Do naszego rozwiązania wykorzystamy:

  • HTML5
  • CSS
  • JavaScript

OPIS ZADANIA

Przykład działania skryptu przedstawiony jest na rysunku powyżej. Skrypt powinien działać po stronie przeglądarki.

Jego zadaniem jest obliczenie ceny malowania pokoju, uwzględniając wytyczne:

  • Pokój ma plan prostokąta o wysokości 2,7 m
  • Powierzchnia okien i drzwi jest pomijana w obliczeniach
  • Cena malowania ścian wynosi 8 zł za metr kwadratowy
  • Nie jest wymagane, aby wyliczona cena była zaokrąglona

 Działanie skryptu:

  • Skrypt pobiera dane z dwóch pól edycyjnych ze strony kalkulator.html
  • Na podstawie danych oblicza całkowitą powierzchnię czterech ścian pokoju i wypisuje ją w tekście paragrafu, pod przyciskiem, według wzoru: „Powierzchnia całkowita ścian: ” <obliczona powierzchnia>
  • Na podstawie powierzchni oblicza koszt malowania i wypisuje poniżej według wzoru „Koszt
    malowania: ” <obliczony koszt> zł

Interfejs

Zacznijmy naszą pracę od interfejsu strony.  Wymienimy elementy języka HTML5, które będą nam potrzebne:

  •  Nagłówek H1
  • akapit x3
  • formularz z dwoma polami typu liczba(number) oraz przycisk

Podane poniżej elementy to absolutne minimum, które za chwilę rozwiniemy. Gotowy kod początkowy strony kalkulator.html poniżej.

Interfejs strony - baza do dalszych ćwiczeń

Usprawnienia

Atrybut pól typu number

Min umożliwi nam ustawienie minimalnej liczby jaką będzie można wybrać za pomocą kontrolek pola.

Nazwy

W JavaScripcie będziemy chcieli odczytać wartości pól z formularza. Jedną z metod jest odwoływanie się do nazw formularza i jego pól. Dlatego nazwijmy nasz formularz i pola typu number.

Identyfikatory

Do wyświetlania tekstów w akapitach wykorzystamy właściwość innerHTML, a elementy HTML pozyskiwać będziemy poprzez metodę getElementById() obiektu document. Dlatego należy nadać identyfikatory dla elementów, w których będziemy coś wyświetlać. Ja dodałem elementy liniowe ogólnego przeznaczenia(span), tak aby nie zmieniać całej treści akapitu, a tylko ten fragment, w którym pojawiać się będą wyniki.

Zdarzenia

Obliczenia wykonywane w JavaScript wywoływane będą po kliknięciu w przycisk, stąd dodajemy do niego obsługę zdarzenia onclick i wywołujemy funkcję sprawdz(), która zajmować się będzie obliczeniami.

Zawartość elementu body, po usprawnieniach

Style

Do naszego przycisku dodałem klasę 'guzik', która będzie kontrolowała jego wygląd. Zmieniłem tryb wyświetlania na blokowy, następnie nadałem szerokość i wysokość. Określiłem kolor tekstu i tła oraz dodałem obramowanie. Oczywiście możesz samodzielnie stworzyć swój wygląd przycisku, jednak sugeruj się tym, co widać na ilustracji zadania.

Skrypt

Przejdźmy do napisania funkcji sprawdz(), która sprawdzi poprawność danych, obliczy i wyświetli wyniki. Zadanie podzielimy na kilka części.

Wczytywanie danych

Aby dostać się do wartości pól formularza wykorzystamy właściwości obiektu document. Zaprezentowana konstrukcja odnosi się do formularza o nazwie 'dane'(pierwszy nawias kwadratowy) i jego pola o nazwie 'pierwszyWymiar'(drugi nawias kwadratowy), z którego pobieramy jego wartość(poprzez właściwość value).

W drugiej linijce przetwarzamy odczytane dane do postaci liczby rzeczywistej. Jeżeli w polu nie znajdowała się liczba nasza zmienna będzie przechowywała wartość 'NaN' - czyli Not a Number(to nie jest liczba). Wykorzystamy to za chwilę przy weryfikacji obu pól. Podobnie należy postąpić z drugim polem.

Zastanówmy się przez chwilę, jakie warunki muszą zostać spełnione, aby nasz skrypt mógł obliczyć powierzchnię oraz koszt malowania.

Po pierwsze w obu polach muszą znajdować się liczby. Po drugie, żadna z podanych wartości nie może być ujemna. Po trzecie żadna wartość nie może być równa 0. Uporządkujmy to

  1. zmienna pierwszyWymiar musi być liczbą
  2. zmienna drugiWymiar musi być liczbą
  3. zmienna pierwszyWymiar musi być większa od zera.
  4. zmienna drugiWymiar musi być większa od zera.

Jak sprawdzić czy zmienna przechowuje liczbę?

Krótkie przypomnienie: Odczytaliśmy wartość z pola formularza, a następnie za pomocą funkcji parseFloat() otrzymaliśmy albo liczbę rzeczywistą, albo wartość NaN. Wykorzystajmy to i sprawdzając funkcją isNaN() dowiemy się czy w obu zmiennych jest liczba, czy nie. W tej chwili mamy cztery osobne warunki, jak je połączyć? Zadaj sobie dodatkowe pytanie, czy wszystkie muszą być spełnione, czy wystarczy aby jeden z nich się nie zgadzał aby przerwać program?

Propozycja zapisania wszystkich warunków w jednej instrukcji warunkowej

Dalsza część pracy odbywać się będzie wewnątrz instrukcji else.

Obliczenia

Na początku zdefiniujemy zmienne, którym możemy przypisać stałe wartości, czyli wysokość pomieszczenia i cenę za metr kwadratowy. Następnie korzystając z wcześniej zdefiniowanych zmiennych obliczamy powierzchnię malowania i jego koszt.

Wyświetlanie

Do wyświetlenia naszych obliczeń wykorzystamy właściwość innerHTML, a elementy HTML pozyskamy poprzez metodę getElementById() obiektu document.

Ostatnie poprawki

Teraz wystarczy wszystko poskładać w całość i przetestować...Dokładnie przetestować. Na pewno zauważysz, że coś jest nie tak z wyświetlanymi liczbami. Proponuję w prosty sposób zmodyfikować obliczane wartości, tak aby wyświetlały nam się liczby z dokładnością do dwóch miejsc po przecinku. Nie jest to wymagane w zadaniu, jednak warto nauczyć się formatować wynik. Wykorzystamy metodę .toFixed(), która jako argument przyjmuje liczbę miejsc po przecinku, która ma się wyświetlać.  Metoda ta konwertuje liczbę na tekst(string) z zachowaniem tylu miejsc po przecinku ile otrzyma jako argument. Ważne jest również to, że niejako przy okazji zaokrągla nam otrzymany wynik. Wystarczy w dwóch miejscach zmodyfikować kod

Finał

Brawo, zadanie wykonane!

Pin It on Pinterest