JavaScript: Instrukcja if

0:00W tej lekcji powiemy sobie o najważniejszej

0:02instrukcji warunkowej dostępnej w języku JavaScript, jaką jest instrukcja if.

0:07Już kilkukrotnie ona się w tym kursie pojawiała,

0:09jeżeli go oglądasz od początku po kolei,

0:11to już ją widziałeś, ale jeszcze teraz chciałbym ją osobno omówić.

0:15Utworzymy sobie stałą firstName i przypiszę tutaj wartość Maciej.

0:20I teraz będziemy chcieli sobie stworzyć

0:21taką instrukcję, w której sprawdzimy czy to imię jest podane.

0:24Jeżeli jest, to powiemy Cześć Maciej.

0:26Jeżeli nie jest podane, to powiemy cześć nieznajomy.

0:29Więc instrukcję if tworzymy w języku JavaScript za pomocą takiego słowa if.

0:34I tutaj mamy nawiasy okrągłe, w których

0:36musimy podać jakieś wyrażenie, które ewolouje do prawdy lub fałszu.

0:40Czyli może być tutaj podstawiona wartość

0:42prawdziwa, taka jak 1 lub true, albo jakiś warunek, który się zamieni np.

0:47na true. Więc możemy tutaj powiedzieć jeżeli firstName

0:50nie jest równe prostemu ciągowi znaków, to znaczy, że tutaj jest coś podane,

0:57to wtedy chcemy zrobić console.log i tutaj zrobimy sobie taką interpolację

1:01cześć i podamy tutaj firstName, po prostu w ten sposób.

1:07Tutaj się nie przejmuj tym, że jest to podświetlone.

1:10To przez to sprawdzanie takie TypeScript-owe, to nie jest tutaj istotne,

1:14nie ma tutaj żadnego błędu.

1:16Czyli wygląda to w następujący sposób.

1:18I teraz często mylące jest to, że wydaje

1:20się, że w instrukcjach warunkowych tylko w tym miejscu można robić takie zapisy.

1:25A tak naprawdę tutaj należy zwrócić uwagę na kolejność jak to jest ewaluowane.

1:29To co zaznaczyłem jest to zwykłe wyrażenie

1:30JavaScript, które za pomocą takiego operatora zostaje zamienione na true lub

1:35false i dopiero ta wartość jest podstawiona do if.

1:38Czyli to spokojnie mogłoby być wycięte, wstawione tutaj np.

1:41do result.

1:42Nie ma to większego sensu, ale chcę Ci

1:44pokazać, że to są dwie różne rzeczy i result mógłby być podstawiony tutaj.

1:49Czyli tak naprawdę to nie jest tak, że w

1:51if są jakieś specjalne operatory takie jak np.

1:54ten.

1:55One są tutaj tylko ewaluowane jakby w tym miejscu

2:00i dopiero wtedy ta wartość wynikowa jest podstawiona do if.

2:04OK. No i zobaczmy czy zostanie wyświetlone

2:06cześć Maciej, dokładnie tak się stało.

2:08Natomiast jeżeli tutaj będzie pusta

2:09wartość to już nam się nic nie wyświetli, a chciałbym stworzyć blok else, który

2:14właśnie robimy w ten sposób i on mówi, że w przeciwnym wypadku, jeżeli tutaj będzie

2:18wartość fałszywa i się ten blok kodu nie wykona,

2:21swoją drogą tu oczywiście może być dużo, dużo więcej kodu pomiędzy tymi nawiasami

2:25klamrowymi, to w przeciwnym wypadku chcemy powiedzieć console.log

2:30cześć nieznajomy.

2:34No i zobaczmy mamy teraz cześć nieznajomy.

2:37Pokażę Ci jeszcze, że możemy skorzystać z

2:39bloku else if i w tym celu utworzymy sobie taką stałą number,

2:44przypiszemy jej wartość 40 i napiszemy tutaj tak.

2:47Jeżeli number jest mniejsze od 30 to będziemy chcieli wyświetlić

2:51liczba jest mniejsza od 30.

2:55I zauważ, że znowu ten operator dba o to,

2:57żeby całe wyrażenie zamienić na true lub false.

2:59Dopiero to jest podstawione do if, który

3:02dba właśnie wyłącznie o to, aby mieć tam wartość prawdziwą lub fałszywą.

3:06OK, i teraz będziemy chcieli zrobić kolejny warunek, czyli nie else w

3:11przeciwnym wypadku, ale else if, żeby tutaj znowu było jakieś sprawdzenie.

3:14Więc jeżeli number jest większe od 30,

3:18czyli jeżeli tutaj będzie fałsz nie wykona się ta linijka, to przechodzimy

3:22do kolejnego sprawdzenia i tutaj wyświetlimy

3:25liczba jest większa od

3:3130, ok

3:34tak naprawdę tutaj chciałem mieć 10.

3:36Zróbmy to tak, zerknąłem sobie i na końcu możemy zrobić znowu jakiś else if

3:41albo po prostu else, czyli w przeciwnym wypadku tu już bez żadnego warunku

3:45jeżeli to będzie fałszywe, to będzie fałszywe

3:48to wykonaj wtedy taką linijkę. Zrobimy console.log

3:52i napiszemy liczba nie jest mniejsza od 30 ani też większa od 10.

4:01Niech to będzie w ten sposób, zobaczmy jak nam się to wyświetli.

4:04Liczba jest większa od 10, czyli ten

4:06warunek został spełniony dlatego, że 40 nie jest mniejsze od 30.

4:10Czyli to nie zostało spełnione. I jak

4:12będziesz sobie manipulował tą wartością, to tutaj będą się te komunikaty zmieniać.

4:16Natomiast jest inna, istotniejsza rzecz, o której chcę Ci powiedzieć.

4:20W niektórych językach programowania, takich jak np.

4:22PHP możemy zapisać else if i wygląda to

4:25tak, bo w tym języku istnieje prawdziwy blok else if.

4:29Natomiast w języku JavaScript i nie dla każdego to jest oczywiste

4:32nie ma czegoś takiego jak else if, jest tylko if i else. I jak dokładnie się temu

4:37przyjrzymy, to rzeczywiście coś takiego tutaj zrobiliśmy.

4:39Powiedzieliśmy if, a następnie else.

4:42Tylko tutaj zamiast w tym else, tak jak wyżej robić blok kodu, podaliśmy kolejnego if,

4:48czyli można powiedzieć, że tutaj jest kilka if.

4:50Tu jest jeden taki if,

4:53w zasadzie ten jest cały, bo blok else istnieje.

4:55Czyli to jest cały taki if else, a ten jest osobny.

5:00Mam nadzieję, że to widzisz.

5:01Czyli tak naprawdę mówimy, że jeżeli to będzie fałszywe, wykonaj blok else.

5:05A co jest w bloku else?

5:06Otóż w nim od razu zaczyna się taki oto

5:09blok, tylko że nie jest już opleciony takimi nawiasami, chociaż mógłby być.

5:13I to jest dokładnie to samo.

5:15Więc jako ciekawostkę zapamiętaj sobie, że język JavaScript nie ma natywnie czegoś

5:18takiego jak else if. Ma po prostu else i w nim możemy podać kolejnego if.

5:23W praktyce działa to jednak dokładnie tak samo.