JavaScript: Instrukcja if
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
W tej lekcji przedstawię Ci najpopularniejszą instrukcję warunkową,
a jest to instrukcja if, z angielskiego, po prostu - jeżeli. Przejdziemy od razu do kodu i będę chciał utworzyć
tutaj kilka zmiennych i będziemy mogli na nich operować.
I pokażę ci jak ta instrukcja działa. Utworzę najpierw zmienną, którą nazwiemy firstName.
I tutaj przypisze wartość Maciej.
I teraz pokażę Ci, jak działa już konstrukcja if i wpisujemy takie słowo kluczowe if i następnie otwieramy
nawiasy okrągłe.
Co jest ważne oczywiście tutaj mógłbyś sobie postawić spacje.
Nie ma to znaczenia zobaczy że niektórzy programiści zapisują to w ten sposób.
Ja przywykłem do nierobienia tutaj odstępu, ale nie ma to znaczenia z punktu widzenia wykonania się tego
skryptu.
Co jest ważne, to tutaj pomiędzy tymi dwoma nawiasami, musimy zwrócić wartość
prawda, fałsz lub wartość prawdziwą albo wartość fałszywą.
I teraz tutaj moglibyśmy wpisać, po prostu, true, więc jeżeli prawda, to wykonaj jakiś kod, tak oznaczamy
blok kodu. Natomiast nie miałoby to większego sensu,
podstawianie tego bezpośrednio w ten sposób,
dlatego tutaj zazwyczaj zapisujemy jakiś warunek.
Chciałbym teraz zapisać firstName nie jest równe,
pusty ciąg znaków.
Możemy to sprawdzić w ten sposób i jak już ci pokazywałem, operatorami porównania możemy sobie to sprawdzić,
a więc firstName, jeżeli nie będzie równe prostemu ciągowi znaków, a nie jest bo mamy w tejże zmiennej słowo
Maciej.
To wówczas zostanie zwrócone true.
Czyli jeżeli prawda wykona się ten oto kod i możemy tutaj napisać
consolne.log, Cześć, przecinek, zrobimy sobie spacje i do tego poprzez plus, czyli konkatenację dodamy wartość
tej zmiennej. Teraz mogę zapisać. Przejdźmy sobie do konsoli. Odświeżam.
No jak widzisz, mamy tutaj, Cześć, Maciej.
W miejscu if, oczywiście moglibyśmy sobie podstawić jeszcze więcej innych warunków.
Ważne jest to, co tutaj zostanie zwrócone.
Gdybyśmy tutaj zapytali w ten sposób, if firstName, to również nam się to wykona w dokładnie taki sam
sposób, możesz zobaczyć.
Cześć, Maciej.
Z tego powodu, że wartość tekstowa tego typu, nie jest wartością fałszywą. Jest to wartość prawdziwa i
możemy również w ten sposób o to zapytać.
Natomiast, jeżeli dokładnie chcemy porównać czy nie jest to pusty ciąg znaków, możemy to zrobić w ten
oto sposób.
Przy okazji, widzisz że gdybym tutaj zmienił to imię, to również zostanie to tutaj podstawione.
Czyli tutaj może być bardzo wiele różnych warunków, które zostaną wykonane. Tutaj może być and itd.
Natomiast ważne jest, co zostanie na końcu tutaj zwrócone.
Teraz kolejna sprawa, jeżeli chodzi o instrukcję i tutaj powiedzieliśmy, jeżeli firstName nie jest puste
to wykonaj ten oto kod, który tutaj się znajduje.
Natomiast w przeciwnym wypadku możemy zapisać else i wykonaj jakiś inny kod.
I tutaj możemy zrobić console.log.
Cześć, Nieznajomy
i zobaczmy,
teraz będziemy mieli Cześć, Maciej, ale gdybym tutaj wpisał pusty ciąg znaków,
w ten oto sposób, to mamy informację Cześć, Nieznajomy.
Przejdźmy teraz do kolejnego przykładu, ja tutaj wrócę do imienia Maciej.
Przejdziemy niżej, stworzę kolejną zmienną, którą nazwę number i przypisze jej wartość
20.
I teraz chce ci pokazać jeszcze jedną z konstrukcji, bardzo podobną do tego, co mamy wyżej zapytamy.
Jeżeli number mniejszy od 30 i wyświetlimy sobie tutaj console.log, liczba jest mniejsza od 30.
I teraz kolejna rzecz, którą chciałbym ci pokazać. Jest to else if tutaj możemy zapisać else.
I to oznacza w przeciwnym wypadku, tutaj liczba jest mniejsza od 30, więc ten warunek nam się spełni i kolejne nie
będą, w ogóle, sprawdzane.
Ale co, gdybyśmy tutaj chcieli zadać kolejny warunek.
Otóż możemy napisać else spacja if,
i tutaj napiszemy sobie
liczba jest większa od 10.
W ten sposób. No i komunikat również do tego i tutaj poniżej możemy napisać znowu else,
czyli, jeżeli te dwa warunki nie będą spełnione, a raczej żaden z tych warunków, to napiszemy jeszcze inny
komunikat.
W ten oto sposób, czyli liczba nie jest mniejsza od 30, ani też większa od 10.
No i teraz chciałbym ci pokazać, co nam się wyświetli.
Odświeżam tutaj i mamy komunikat liczba jest mniejsza od 30.
Jak widzisz, tylko jeden warunek został tutaj sprawdzony.
Tutaj zwrócone zostało true, bo number 20 jest mniejsze od 30 i ten komunikat został wyświetlony.
Natomiast nic dalej już nie sprawdzaliśmy.
Jak widzisz else if, w ogóle się tutaj nie wykonał.
Jeżeli tą wartość tutaj, zwiększymy sobie do 40, to drugi warunek powinien zostać spełniony. Liczba jest większa od
10.
Jak zatem widzisz, możemy kilkukrotnie sobie coś sprawdzać.
Czyli pierwszy warunek if następnie else.
I tu znowu możemy jakiś inny warunek podać. Możemy kolejny else if, zrobić i dopiero na końcu else.
Natomiast jedna rzecz, którą chciałbym ci teraz dokładnie pokazać. Jest to fakt, o którym wiele osób programujących
w języku JavaScript nie wie lub nie do końca zdaje sobie z niego sprawę.
Otóż w języku JavaScript, nie mamy zapisu else if.
Chociaż widzisz teraz tutaj zapis else if, to na przykład w języku programowania PHP,
wyglądałoby to następująco.
Jak widzisz od razu pojawiłyby się tutaj błąd, dlatego że zapis else if nie istnieje w języku JavaScript.
Dlaczego jednak, kiedy zapiszemy to w ten sposób, to wszystko nam działa?
Otóż dlatego, że napisaliśmy do if, następnie else, tak jak zrobiłem tutaj wyżej i później kolejny if.
Więc gdybyśmy chcieli to rozgraniczyć, to ta konstrukcja czyli if oraz else jest to całkiem osobna konstrukcja
od tej konstrukcji tutaj. Napisaliśmy tutaj jeżeli number jest mniejszy od 30, wykonaj ten kod.
W przeciwnym wypadku wykonaj kod, który znajduje się tutaj dalej, a dalej znajduje się taki oto if.
Więc tak naprawdę język JavaScript nie posiada konstrukcji else if, ale działa nam to również w taki sam sposób
jak w języku PHP, ale trzeba wiedzieć że jest to osobna konstrukcja i przy okazji możesz zauważyć, że
tutaj nie mieliśmy już takich o to nawiasów klamrowych.
Z tego powodu, że możemy zapisywać if'y w taki sposób skrócony a więc np. if, true i tutaj wykonujemy sobie jakiś
kod np. console.log, true.
Możemy zrobić to w ten sposób i również zobaczysz, że tutaj nam się true wyświetli.
Podobnie możemy zrobić jedną linijkę niżej.
Tak będzie również przy pętlach i jeszcze w kilku innych konstrukcjach. Ja na to będę chciał zwrócić uwagę.
True również nam się teraz tutaj wyświetliło, ale gdybym zrobił jeszcze jeden odstęp, to wówczas true już
nam się teoretycznie nie powinno wyświetlić, ale wyświetla nam się z tego powodu, że po prostu zawarliśmy
tutaj console.log.
Działa to dokładnie tak, jakbym po prostu wpisał sobie tutaj console.log'a, więc warto również o tym pamiętać,
że zazwyczaj najlepiej jest tutaj mimo wszystko ten kod oplatać.
W ten sposób i wrzucać go tutaj.
Przy okazji możemy wówczas więcej linijek kodu sobie tutaj zapisać. No i myślę że to wszystko poznałeś już.
Podstawową instrukcję if, w której najczęściej się korzysta.
Również zwróciłem ci uwagę na to, że else if tak naprawdę w języku JavaScript nie istnieje, tak jak w innych
językach.
I to jest taka ciekawostka, o której warto wiedzieć.
Kod
Instrukcja if · 1 min
var firstName = "Maciej";
if(firstName !== "") {
console.log("Cześć, " + firstName);
} else {
console.log("Cześć, Nieznajomy");
}
var number = 40;
if(number < 30) {
console.log("Liczba jest mniejsza od 30");
} else if(number > 10) {
console.log("Liczba jest większa od 10");
} else {
console.log("Liczba nie jest mniejsza od 30 ani też większa od 10");
}