Instrukcje warunkowe (if)
Aby program mógł działać, to musi umieć podejmować decyzję. Jak? Służą do tego tzw. instrukcje warunkowe np. if. Polega on na tym, że dany kawałek kodu wykona się, jeżeli (if)dany warunek zachodzi, jeśli jest prawdziwy (true).
Zanim zaczniesz: po kliknięciu w poniższe linki zadań i przykładów wybierz plik index.js (po lewej stronie) i naciśnij „Run” (nad okienkiem kodu), aby wygenerować kod.
Zadania
Zadanie 1
w pliku javascriptowym powinien wypisywać pod spodem nagłówek z napisem "Działam". Mimo to nic się nie wyświetla? Dlaczego? Zmienna bool przyjęła wartość false, a powiedzieliśmy, że instrukcja if wykonuje się, gdy warunek podany w nawiasach się spełni, czyli zwróci wartość true. Popraw kod tak, aby zadziałał poprawnie.
Przejdź do pierwszego zadania:
Zadanie 2
Czasem zdarza się tak, że bez spełnienia warunku też chcemy wywołać jakąś akcję. Co wtedy? Na ratunek przychodzi instrukcja else. Działa w ten sposób, że jeżeli warunek z if nie spełni się, to zawsze wykona się else. Jego konstrukcja wygląda tak:
//wykonaj, jeżeli warunek zwraca prawdę
}
else {
//wykonaj, jeżeli warunek nie zachodzi, zwraca fałsz }
Spróbuj poprawić kod tak, aby wykonał się kod znajdujący się w else.
Przejdź do drugiego zadania:
Zadanie 3
Warunki, jakie podajemy, nie zawsze muszą być flagą true albo false. Można je zapisywać równiez jako warunki logiczne (działania matematyczne), oto przykład:
5 > 3 //true
3 - 5 == 12 //false
5 < 5 //false
Pamiętaj że, znak równości zapisuję się jako "==", ponieważ pojedynczy znak "=" służy do przypisywania wartości.
W zadaniu znajduję się wyrażenie, które decyduje o tym, czy jest pora na jedzenie w zależności od poziomu głodu (zmienna hungerLevel). Zmienna ta będzie przyjmowała losową wartość (w zakresie od 1 do 10). Oznacza to, że za każdym uruchomieniem programu jej wartość będzie inna.
Uzupełnij kod. Użyj operatorów logicznych tak, aby warunek spełnił się, jeżeli poziom głodu będzie większy niż 5, a wtedy program wyświetli napis "Zjem później". W warunku użyj zmiennej zamiast samych liczb.
Przejdź do trzeciego zadania:
Wskazówka:
... //reszta kodu
if(zmienna < 10){} //zwraca true, bo zmienna przechowuje wartość 3,
czyli 3<10
Zadanie 4
A jeśli chcemy w odpowiedzi na warunek mieć więcej niż dwie odpowiedzi? Można napisać warunek if/else kilka razy, ale byłoby to bardzo niewygodne. Tutaj z pomocą pojawia się instrukcja else if, która tak jak if przyjmuje warunek w nawiasach i wypełnia się tylko, jeżeli warunek z if się nie spełni. Jeżeli warunków else if jest więcej, to wykonują się po kolei od góry do dołu, aż któryś się spełni.
Oto przykład:
przejdzie dalej
//kod do wykonania
}
else if(warunek2) { // Jeżeli warunek się nie spełni, kod się nie wykona i
przejdzie dalej
//kod do wykonania } else if(warunek3) { // Jeżeli ten warunek się spełni, kod się wykona i
zignoruje resztę
//kod do wykonania
}
else {
//kod do wykonania
}
Przejdź do czwartego zadania:
Znajduje się w nim if, który sprawdza podany kolor sygnalizacji świetlnej i na jego podstawie decyduje, czy można jechać dalej. Uzupełnij go warunkiem, który sprawi, że kiedy zmienna color będzie przechowywała wartość 'yellow' wyświetli się napis "Uważaj", a następnie zmień wartość zmiennej color na 'yellow' i sprawdź, czy wszystko działa dobrze. Jeżeli chcesz, możesz przetestować działanie if, wpisując inne kolory.
Wskazówka: Jeżeli w zmiennej znajduję się string, możemy ją porównywać z innymi stringami tak samo jak liczby.
zmienna == "bakłażan"; //zwraca true, bo "bakłażan" == "bakłażan"
