Podstawy Programowania: Instrukcja if

0:00Przechodzimy już w praktyce do instrukcji warunkowych.

0:03Pokażę Ci jak to wszystko działa,

0:05natomiast na początek zrobimy sobie taki

0:08mały kontekst żebyśmy wiedzieli nad czym będziemy pracować.

0:11Otóż chcę sobie wyobrazić taką sytuację, w

0:13której będziemy chcieli wyświetlić komunikat dla użytkownika

0:16na bazie tego czy jest on zalogowanie czy nie.

0:18Czyli jeżeli będzie zablokowany będziemy

0:20mieli jego imię to będziemy chcieli napisać np.

0:23cześć Maciej, a jeżeli nie to wyświetlimy cześć nieznajomy.

0:26I do tego posłużą nam instrukcje warunkowe,

0:29ale najpierw musimy mieć jakieś dane więc

0:31utworzymy sobie stałą firstName gdzie wpiszemy imię Maciej.

0:35I teraz wyobraźmy sobie, że będziemy w takiej sytuacji, że albo to imię będzie albo

0:40otrzymamy pusty ciąg znaków jeżeli tego imienia nie będzie.

0:43Jakby tutaj nie skupiamy się na tym co to znaczy, że ktoś jest zalogowaniu się czy nie.

0:47Tutaj skupiamy się na takim małym wycinku naszego programu, który odpowiadałby za

0:51wyświetlanie odpowiedniego komunikatu. I teraz instrukcje warunkowe,

0:56konkretnie instrukcja if, o której mówimy teraz, zapisujemy w ten sposób.

0:59Jest to pewnego rodzaju słowo kluczowe if, później otwieramy nawiasy okrągłe

1:04i tutaj musimy podać jakieś wyrażenie lub np.

1:08odwołanie do zmiennej, które będzie ewoluowało do prawdy lub

1:11fałszu czyli tu może być coś co będzie zamienione na true lub false ale

1:17również mogą to być wartości prawdziwe i fałszywe, o których już w tym kursie mówiłem.

1:21Czyli jeżeli zrobimy if 0 to jest to traktowane jak fałsz.

1:25Jeżeli if pusty ciąg znaków też fałsz ale jeżeli tu będzie cokolwiek np.

1:30w ten sposób to jest to traktowane jako wartość prawdziwa.

1:33Więc teraz będziemy chcieli tutaj zrobić coś takiego.

1:36Jeżeli firstName

1:38nie jest równe pustemu ciągówi znaków

1:42wiesz już, że ten operator dokładnie porówna to co jest w firstName

1:45i przyrówna to do pustego ciągu znaków i

1:47zwróci nam true lub false. Więc tak naprawdę całe to wyrażenie tak jak przed momentem

1:51mówiłem zamieni się na true albo na false.

1:54Czyli jeżeli ta stała nie jest pusta nie reprezentuje pustego ciągu znaków czy nie

2:00przechowuje w sobie takiej wartości to będziemy chcieli napisać console.log

2:04cześć i chciałbym do tego cześć dodać właśnie to imię.

2:08Wiesz już, że możemy łączyć ciągi znaków za pomocą operatora Plus.

2:12Czyli on normalnie dodaje nam liczby ale jeżeli jest użyty na ciągach znaków to je łączy

2:17i takie działanie nazywa się konkatynacją,

2:20więc będziemy chcieli tutaj dodać do takiego jednego stringu

2:23drugi czyli firstName.

2:25I zobaczmy, jeżeli zapisze to nasz program od razu nam pokazuje

2:28cześć Maciej.

2:30Ok.Jak zatem widzisz jeżeli ten warunek tutaj jest

2:33prawdziwy to wykonuje się kod, który ujmiemy w takim bloku nawiasów klamrowych. Tu może

2:39być oczywiście znacznie więcej kodu, może być wiele linijek kodu.

2:42Jak najbardziej nie ma żadnego problemu. Natomiast co w przeciwnym wypadku otóż

2:47możemy do takiego zapisu do instrukcji warunkowej if dopisać również else,

2:52w tym miejscu i mamy kolejny blok kodu znowu

2:55tutaj może być wiele linii kodu, który wykona się w przeciwnym wypadku.

2:59Czyli jeżeli tutaj firstName

3:00miałoby pustą wartość to będziemy chcieli napisać console.log cześć nieznajomy.

3:08Zapisujemy oczywiście cały czas mamy cześć

3:10Maciej ale jeżeli by się okazało, że ta stała przechowuje pusty ciąg znaków to już

3:15będziemy wiedzieli cześć nieznajomy. Czyli w ten sposób możemy kontrolować co się

3:20dzieje w naszym programie na bazie jakichś informacji, których możemy nie mieć. My

3:24tutaj oczywiście od razu sobie to wpisaliśmy

3:26więc nie ma sensu takie sprawdzanie oczywiście nigdy w ten sposób byśmy nie

3:30tworzyli programu ale otrzymali byśmy czy moglibyśmy w jakiś sposób pobrać sobie np.

3:35wartość czy pola formularza itd.

3:38To wszystko w przyszłości zobaczysz natomiast na razie chcę się skupić na

3:42takich najmniejszych koncepcjach jak to wszystko działa.

3:45Więc jeżeli będziemy mieli z jakiegoś

3:47miejsca taką informację to na jej bazie możemy kontrolować co robi nasz program.

3:52W zasadzie w języku JavaScript jeżeli

3:54chodzi o instrukcję if to mamy if i else i to jest wszystko.

3:58Natomiast w wielu językach programowania

4:00jest również taki zapis jak else if i w języku JavaScript

4:04wiele osób sądzi, że on również istnieje

4:06chociaż tak naprawdę nie do końca tak jest.

4:08Ale najpierw Ci pokaże jak to wygląda jak to działa a potem powiem ci jaka jest różnica

4:12pomiędzy językiem JavaScript a innymi językami programowania.

4:15Stwórzmy sobie taką stałą number i będziemy tutaj przechowywać wartość 40.

4:20I teraz chciałbym zapytać czy number jest mniejsze od 30

4:26i jeżeli tak chciałbym napisać

4:28liczba jest mniejsza od 30.

4:32Zapiszmy. Oczywiście nic się nie wyświetliło

4:34bo ten warunek wiemy, że zwraca nam tutaj

4:36false. Czyli 40 mniejsze od 30 zamienia się na false i to się nie wykonuje.

4:41No właśnie więc możemy powiedzieć, że w przeciwnym wypadku i normalnie jest to else,

4:46to oznacza, że po prostu w przeciwnym wypadku coś zrób.

4:48Ale możemy również powiedzieć else if czyli w przeciwnym wypadku sprawdź

4:52kolejny warunek. W języku JavaScript wyglądałoby to w ten sposób.

4:56Else tutaj musi być odstęp bo np.

4:59w PHP zapisuje się to tak jak teraz widzisz w języku JavaScript nie,

5:02tutaj trzeba zrobić odstęp i napisać else if.

5:05I tutaj zapytamy number większe od 10 i napiszemy console.log

5:11liczba jest większa od 10, zauważ, że nam się

5:16tym razem to wyświetliło,

5:17i tu możemy zrobić else czyli jeżeli ten warunek by nie był prawdziwy ten by nie

5:22był prawdziwy to koniec końców chcemy wykonać ten blok kodu.

5:25Tutaj już nie podajemy warunku tylko mówimy po prostu else. Takich else ifów

5:30możesz oczywiście umieścić więcej. Tutaj

5:32zrobimy jakby warunek końcowy jeżeli te dwa poprzednie nie zwróciły nam prawdy i

5:36się nie wykonał ten kod, który jest w tych blokach to napiszemy console.log

5:40i napiszemy tutaj liczba nie jest mniejsza od 30 ani też większa od 10.

5:50Wiem, że to trochę długie

5:51ale to nieistotne, ważne, że tutaj zapisaliśmy zdanie, które będzie prawdziwe

5:55w przypadku tego co tutaj stworzyliśmy no i ciągle widzimy liczba jest większa od 10.

6:01Natomiast jeśli sprawimy, że ta liczba będzie np.

6:05mniejsza od 10 będzie to 5

6:07zauważ, że zobaczymy

6:09liczba jest mniejsza od 30. Czyli teraz wykonał się pierwszy warunek, no i jeżeli on

6:14został spełniony to kolejny już else ify i else się po prostu nie wykonały.

6:19Teraz jaka jest różnica pomiędzy

6:20konkretnie językiem JavaScript a innymi. Wspomniałem, że np.

6:23w języku PHP mamy taki zapis jak elseif

6:26natomiast w JavaScript piszemy po prostu else i następnie if.

6:30Wiele osób uważa, że język JavaScript posiada taką instrukcję jak else if

6:34podczas gdy tak naprawdę jeżeli się temu przyjrzymy

6:37tak nie jest. Mamy tutaj if i następnie zwykły else.

6:41Po tym else coś się może dziać i jeżeli

6:43sobie zaznaczę to co jest tutaj tą całość to jest to zupełnie osobna instrukcja

6:49Jeżeli tak na to spojrzymy to się okazuje, że mamy tutaj instrukcję if, która ma blog

6:53else i ten blog po prostu nie jest już opleciony takimi nawiasami

6:58bo nie musi być jeżeli zapisujemy w tej samej linijce kolejne wyrażenie.

7:02Więc to może wyglądać dziwnie ale jeżeli

7:04się temu przyjrzymy z bliska to w rzeczy samej tak jest.

7:08Czyli mamy jedno wyrażenie i jedną instrukcję

7:10warunkową if potem else i w jej bloku else jest cała

7:14druga instrukcja if, która ma swój własny else. Czyli zapamiętaj, że w języku

7:18JavaScript tak naprawdę konstrukcja taka jak else if nie występuje ale w wielu

7:23innych językach ona jest i zapisuje się ją w taki oto sposób.

7:26Jednak w praktyce będzie to działać dokładnie tak samo.