Instrukcje warunkowe pozwalają sterować całą aplikacją.

Załóżmy, że na Twoją stronę wchodzą osoby powyżej 60 roku życia. Możesz więc wyświetlić im okienko popup z zapytaniem, czy potrzebują mieć większy rozmiar tekstu na stronie albo inny kontrast.

W zależności od tego co wybiorą, możesz dodać do strony odpowiednie klasy zwiększające tekst i kontrast lub nie zrobić nic – i wyświetlić im normalną stronę.

Wersja wideo:

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Instrukcja if

Jej działanie jest dosyć proste i polega na sprawdzaniu warunku. Jeżeli warunek w nawiasie jest spełniony (jego wartość wynosi true) to wszystko, co znajduje się w nawiasach klamrowych zostanie wykonane.

Możemy więc sprawdzić czy dany wiek jest większy niż 18 i wyświetlić odpowiedni komunikat

Możemy też dodać słowo kluczowe else, by ustalić co ma się dziać, gdy warunek nie zostanie spełniony

 

Aktualnie sprawdzamy tylko 1 warunek i ustalamy co ma się stać gdy nie zostanie spełniony. Ale nie musisz ograniczać się tylko do jednego – wykorzystaj else if.

Co się tutaj dzieje? Sprawdzamy czy wiek jest równy 18. Jeżeli nie – czy jest większy od 18. Jeżeli to również się nie sprawdzi, to czy jest mniejszy lub równy 16.

W każdym z tych przypadków wyświetlamy odpowiednie komunikaty.

 

Operatory “i” oraz “lub”

Czyli “&&” oraz “||”.

W jednej instrukcji if możesz też umieścić bardziej rozbudowany warunek i sprawdzić np. czy wiek jest równy 18 LUB równy 25

Albo czy wiek jest większy niż 30 ORAZ jest mniejszy niż 35

 

Dokładne sprawdzanie typu wyrażeń

W momencie kiedy porównujesz ze sobą dwie wartości, dla Ciebie mogą one wyglądać identycznie, ale komputer może rozumieć to trochę inaczej.

Możesz więc stworzyć takie porównanie: ”  18   ” == 18.

Jaki będzie tego wynik? True, mimo że tak naprawdę to nie jest to samo. Osiemnastka ze spacjami z przodu i tyłu to jest tekst, a nie liczba o którą nam chodzi.

Jeżeli więc chcesz mieć 100% pewność, że to co jest po lewej jest równe temu, co jest po prawej stronie, wykorzystuj potrójny znak równości.

”  18   ” === 18

W tym momencie wartość wyniesie false, bo sprawdzamy również typ. String nie jest równy typowi liczbowemu, więc masz pewność, że lewa i prawa strona są sobie równe.

 

Instrukcja switch

W instrukcji if możesz stosować bardziej rozbudowane warunki, jak zresztą widziałeś powyżej. Switch służy bardziej do sprawdzania czy jedna wartość jest równa drugiej, bez możliwości sprawdzenia czy jest większa, mniejsza-równa itd.

Jak możesz zauważyć na końcu każdego działania (w tym przypadku wyświetlanie komunikatów alert) mamy instrukcję break.

Break dba o to, by wykonywanie kodu skończyło się właśnie w tym miejscu. Jeżeli go usuniesz, instrukcje będą wykonywały się dalej – czyli zostaną wykonane pozostałe alerty.

W większości przypadków break będziesz stosować zawsze.

Na końcu kodu jest słowo default, które jest kołem ratunkowym dla Twojego skryptu. Jeżeli żaden z warunków nie zostanie spełniony, wtedy wykonają się instrukcje w default.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

>