Czas na kolejne elementy składni JavaScript. W tym wpisie opowiem o tym, czym jest instrukcja warunkowa oraz jak ją stosować.

Ponieważ w CodeCombat ćwiczenia związane z instrukcjami warunkowymi dostępne są jedynie w wersji płatnej, dodatkowo przygotowałam dla Was miejsce, w którym będziecie mogli przećwiczyć ze swoimi dziećmi poznawane elementy. Niemniej jednak, jeżeli Waszym dzieciom podoba się gra CodeCombat, to zachęcam Was do wykupienia konta Premium i osiągania kolejnych jej poziomów 🙂

Instrukcja warunkowa „if”

Elementem, który bardzo przydaje się podczas programowania jest instrukcja warunkowa. Instrukcje warunkowe pozwalają nam zdefiniować warunek, jaki powinien być spełniony, żeby zaplanowana przez nas akcja miała sens.

Instrukcje warunkowe oznaczamy słowem kluczowym „if” (ang. „jeżeli”).

instrukcja warunkowa

źródło: https://codecombat.com

W powyższym przykładzie wynik funkcji findNearestEnemy() (ang. “Znajdź najbliższego wroga” ) zapisujemy pod postacią zmiennej wróg. Więcej na temat zmiennych pisałam w jednym z poprzednich wpisów. Zmienną tę następnie wykorzystujemy jako warunek instrukcji warunkowej. W naszym przykładzie znaczy to tyle, że jeżeli znajdziemy wroga, atakujemy go.

Zadanie 1

W przygotowanym przeze mnie przykładzie, Waszym zadaniem jest wykorzystać instrukcję warunkową tak, żeby wypisywać tylko te liczby, które są parzyste. Dla ułatwienia przygotowałam dla Was funkcje do losowania liczb getNumber(). Proponuję, żebyście, analogicznie jak w przykładzie powyżej, zapisali wynik tej funkcji w zmiennej, następnie, wykorzystując funkcję isEven(), sprawdzili czy ta liczba jest parzysta i jeżeli jest, wypisali ją.

Brzmi trochę skomplikowanie ?

Oto kilka podpowiedzi:

         var myNumber = getNubmer();

W ten sposób przypiszecie wynik funkcji getNumber() do zmiennej. Czyli od teraz myNumer zawiera losową liczbę.

To co powinniśmy teraz zrobić to sprawdzić czy liczba ta jest parzysta:

        isEven(myNumber)

Pamiętasz, w jednym z poprzednich wpisów pisałam o tym, że do funkcji możemy przekazywać parametry. Tutaj naszym parametrem jest myNubmer, czyli dosłownie to, co oznacza powyższy zapis to „jest parzysta moja liczba”. To jest właśnie ten warunek, który musi być spełniony, żebyśmy chcieli wypisać wylosowaną wcześniej liczbę. „Jeżeli jest parzysta moja liczba – wypisz ją”.

if( isEven(myNumber)){

}

Ostatnia rzecz jaka potrzebna Ci będzie do wykonania tego zadania, to sposób na wypisanie liczby:

      printNumber(myNumber);

Jeżeli chcesz spróbować swoich sił i napisać samodzielnie kod potrzebny do wykonania zadania wejdź tutaj.

Miejsce w którym powinniście wpisać swój kod oznaczyłam komentarzem:

     //tutaj wpisz swój kod
Pamiętajcie, że żeby zobaczyć efekty swojej pracy musicie odświeżyć okienko z podglądem.

Instrukcja warunkowa „if/else”

W poprzednim przykładzie wykorzystaliśmy instrukcję warunkową, czyli robiliśmy coś, jeżeli był spełniony określony warunek. Czasami jednak, potrzebujemy konstrukcji, która pozwoli nam zachować się w określony sposób jeżeli jakiś warunek jest spełniony, a w inny sposób w pozostałych przypadkach. Do tego celu wykorzystujemy słowo kluczowe „else” (ang.  „w przeciwnym razie”).

Poniżej przykład z CodeCombat:

instrukcja warunkowa

źródło: https://codecombat.com

W przykładzie tym występuje słówko „cleave” (ang. „rozszczepiać”). W grze tej jest to specjalna możliwość, która pozwala na pokonanie wszystkich wrogów, którzy są w pobliżu bohatera. Możemy ją wykorzystywać raz na jakiś czas.

Przykład ten działa w następujące sposób:

Jeżeli bohater jest gotowy na wykorzystanie rozszczepienia, wykorzystuje je, w przeciwnym wypadku korzysta ze standardowego ataku.

Zadanie 2

W poprzednim zadaniu wypisywaliśmy liczby, jeżeli było one parzyste, liczby nieparzyste były wówczas przez nas pomijane. Zadanie drugie polega na tym, żeby wypisywać wszystkie wylosowane liczby, ale dzieląc je na parzyste i nieparzyste.

Zadanie opiera się o te same funkcje, które wykorzystaliśmy w zadaniu poprzednim. To czego będziemy potrzebowali dodatkowo, to dwie różne funkcje do zapisywania liczb parzystych i nieparzystych:

           printEvenNumber(myNumber);

           printOddNumber(myNumber);

Jeżeli chcesz to przećwiczyć, wejdź tutaj.

Instrukcja warunkowa „if/else if/else”

A co jeżeli mamy więcej niż dwie możliwości i chcemy, żeby po spełnieniu określonego warunku nasz program zachował się w określony sposób? Jeżeli pierwszy warunek nie jest spełniony, chcemy żeby sprawdził kolejny i na tej podstawie wykonał jakieś polecenia itd…

Dzięki konstrukcji „else if” jest to możliwe, możemy zapisać tyle warunków, ile potrzebujemy.

W poniższym przykładzie sformuowanie „warunek ma wartość ‘true’” oznacza, że warunek jest spełniony, natomiast „warunek ma wartość ‘false’” oznacza, że warunek spełniony nie jest.

instrukcja warunkowa

źródło: https://codecombat.com

Zadanie 3

Zadanie jest następujące:

Jeżeli liczba jest mniejsza od 10, wypisz ją w sekcji “Liczby mniejsze od 10”.

W przeciwnym wypadku, jeżeli liczba jest parzysta wypisz ją jako “Liczby parzyste”

W przeciwnym wypadku wypisz ją jako “Liczby nieparzyste”

Miejsce na wykonanie zadania znajduje się tutaj. A dodatkowa funkcja, która Wam się przyda to:

           printLessThen10Number(myNumber);

 

Jeżeli chcecie zobaczyć przykładowe rozwiązania, możecie zajrzeć tutaj:

Zadanie 1

Zadanie 2

Zadanie 3

Mam nadzieję, że instrukcje warunkowe są już dla Was jasne 🙂 Jeżeli macie jakieś wątpliwości lub uwagi, zachęcam do dzielenia się nimi w komentarzach.