JavaScript: Operatory logiczne
od Podstaw
9 godz. 20 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Najważniejsze konstrukcje jezyka JavaScript
- Obiektowy Model Dokumentu i DOM API
- JSON i Ajax
- Nowości z EcmaScript 6
- Praca z npm i snowpack
- 5 praktycznych projektów
Moc języka JavaScript
JavaScript to język programowania, który napędza niemal wszystkie strony internetowe. Dopełnia on technologie HTML i CSS, za pomocą których tworzymy strukturę i wygląd dokumentu. Co jednak w sytuacji, gdy chcemy po kliknięciu w wybrany przycisk wyświetlić powiększone zdjęcie lub wczytać dodatkowe dane z serwera? To właśnie w takich sytuacjach przydaje się język JavaScript i tzw. DOM API, dostępne w przeglądarce. Jak się przekonasz, możliwości nowoczesnych przeglądarek w połączeniu z tym językiem są naprawdę ogromne.
Najważniejsze konstrukcje języka
Język JavaScript może być używany nie tylko na stronach internetowych. Z tego powodu, w kursie omówimy najpierw najważniejsze konstrukcje tego języka, które są niezależne od platformy uruchomieniowej. Dzięki temu zbudujesz fundamenty niezbędne do tego, by wykorzystać ten język np. w środowisku Node.js. Krok po kroku omówimy sposoby tworzenia zmiennych, dostępne typy danych i operatory. Następnie zobaczysz jak tworzyć tablice i obiekty, z jakich instrukcji warunkowych i pętli możesz korzystać, a także jak tworzyć własne funkcje. Przekazywana wiedza uwzględniać będzie nowości, które pojawiły się w języku wraz z rewolucyjnym standardem EcmaScript 6 (ES6).
Obiektowy Model Dokumentu
Sam język JavaScript to nie wszystko, by tchnąć ducha w strony internetowe. Z tego powodu, przeglądarki internetowe udostępniają tzw. DOM API. To interfejs, który z użyciem języka JavaScript pozwala na manipulację treścią i wyglądem strony. W kursie bardzo dokładnie omówimy czym jest Obiektowy Model Dokumentu, a także jak z nim pracować. Zobaczysz jak tworzyć nowe elementy HTML i wstawiać je na stronę, jak modyfikować ich treść, atrybuty, style czy klasy CSS. Poznasz sposoby na odczytywanie położenia elementu na stronie i jego wymiarów, które będą niezbędne w wielu sytuacjach. Dowiesz się także, jak przypisywać obsługę zdarzeń w przeglądarce, by np. wywołać własną funkcję, gdy ktoś kliknie w wybrany przez Ciebie przycisk.
JSON i Ajax
JSON to popularny format wymiany danych, a Ajax to potoczna nazwa dla asynchronicznych zapytań HTTP, które wysyłać możemy z poziomu kodu JavaScript. Dziś niemal każda strona internetowa wykorzystuje te technologie. W niektórych przypadkach jako dopełnienie podstawowej funkcjonalności witryny, a w innych jako główny motor napędzający stronę. Jeśli kiedykolwiek widziałeś, jak na stronie internetowej jakaś treść "doczytuje" się np. podczas przewijania - widziałeś w praktyce Ajax. W jednym z rozdziałów kursu zobaczysz, jak pracować z tym formatem, a także jak wysyłać wspomniane zapytania do serwera.
npm i bundlery kodu
Choć kurs który masz przed sobą, jest kursem dla początkujących, to aby zrozumieć jak działa język JavaScript i jak z nim się współcześnie pracuje, omówimy dwa ważne tematy - zarządzanie zależnościami i bundlowanie kodu. Dowiesz się czym jest npm i jak z jego pomocą pobierać paczki gotowego kodu z internetu, a także jak sprawić, by bez trudnu dołączać je do własnego kodu. W tym celu skorzystamy z narzędzia snowpack, które pozwoli nam także na optymalizację kodu przed jego wypuszczeniem w świat. Na tym etapie omówimy również jak działają moduły ESM, pozwalające dzielić kod na mniejsze części.
5 praktycznych projektów
Kurs podzielony został na możliwie krótkie lekcje, do których w każdej chwili możesz wrócić. Jeśli zatem zapomnisz jak odczytywać wymiary elementu na stronie, szybko odnajdziesz odpowiednią lekcję. Czym jednak była by sama teoria i proste przykłady, bez pokazania, jak połączyć je w całość i wykorzystać w praktyce? Dobra wiadomość jest taka, że w kursie stworzymy aż 5 praktycznych projektów, wykorzystujących zdobytą wcześniej wiedzę. Najpierw napiszemy program losujący Dużego Lotka, następnie dynamiczny pasek postępu przeczytania artykułu, dymek pojawiający się nad elementem po najechaniu na niego myszą, wygenerujemy tabelkę w użytkownikami na podstawie danych JSON, a na koniec tworzymy prosty odtwarzacz wideo, z możliwością pauzowania i przewijania filmu.
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 nie jest wymagana, ale zalecana jest podstawowa wiedza z zakresu samego programowania (czym są zmienne, pętle, funkcje itd.). 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 i zacząć korzystać z nowoczesnych frameworków.
Kolejną grupą operatorów, którą się zajmiemy są operatory logiczne, które są
najczęściej wykorzystywane w przypadku instrukcji warunkowych.
Tutaj zrobimy sobie taki hipotetyczny przykład, jak np.
mamy na eduweb, że wyświetlamy pewne komunikaty np.
dla użytkowników, którzy są zalogowani i np.
nie mają subskrypcji itd.
Więc powiedzmy, że coś w tym stylu chcielibyśmy zrobić, więc będziemy mieli
stałą, która nam będzie przechowywać isLoggedIn,
nie zajmujemy się tym skąd się tutaj
wzięła ta wartość, jakoś byłaby pobrana z bazy danych itd.
Ważne, że mamy true lub false czy ktoś jest zalogowany. Więc zrobimy tutaj true,
czy ktoś jest zalogowany i następnie np. czy posiada abonament hasSubscription
równa się true. I teraz będziemy chcieli powiedzmy wyświetlić komunikat dla
wszystkich, którzy są zalogowani i mają abonament.
Jakbyśmy to zrobili. Zrobilibyśmy
instrukcję warunkową i w niej skorzystamy właśnie z isLoggedIn
ale gdybyśmy nie korzystali z operatora, o
którym za moment, to musielibyśmy zrobić tak.
Jeżeli ktoś jest zalogowany, to dodatkowo chcemy sprawdzić czy ma on abonament.
Musielibyśmy tutaj wpisać if hasSubsctription i dopiero wtedy wyświetlić np.
console.log
dziękujemy za zakup abonamentu. W ten sposób.
No i oczywiście w konsoli przeglądarki nam się to wyświetli. Ale możemy tutaj
skorzystać z operatora AND i zrobić to inaczej,
czyli to co tutaj mamy wytnę i teraz tutaj zrobimy
jeżeli jest zalogowany i to jest właśnie operator AND, czyli i,
jeżeli jest zalogowany i ma abonament tylko wtedy chcemy wyświetlić
taki komunikat i zauważ, że on znowu się wyświetli.
Natomiast jeżeli byśmy tutaj zostawili true, że jest zalogowany, ale false, że nie
ma abonamentu to już nam się ten komunikat nie pojawi.
Więc jak działa ten operator?
On działa w ten sposób, że operuje na
dwóch operandach, czyli po lewej stronie i po prawej.
I teraz jeżeli to co jest po jego lewej
stronie jest wartością prawdziwą i to ważne, tam nie musi być true,
może to być jakakolwiek wartość prawdziwa.
Mówiłem o tym w lekcjach, o prawdzie i
fałszu, że mamy true i false, ale także wartości uznawane za prawdziwe i fałszywe.
Czyli gdybym tutaj podstawił jeden, to będzie też uznawane za wartość prawdziwą.
Czyli jeżeli po lewej swojej stronie ma
wartość prawdziwą, to zwraca to co jest po jego prawej stronie.
Czyli jeżeli hasSubscription na false
a isLoggetIn ma true to wygląda to tak, jeżeli tu
jest true, a jest to ten operator wtedy przechodzi na swoją prawą stronę i w
zasadzie nic nie sprawdza, ale zwraca to co tutaj ma, co jest w hasSubscription,
tam jest po prostu false, a więc całe to wyrażenie ewoluuje wtedy do false.
Jeżeli false zostanie podstawione do if, to ten warunek się nie wykona.
Więc bardzo ważne, żeby rozumieć w jaki sposób to działa.
Natomiast gdyby pod isLoggetIn było false w ten sposób, to ten operator jeżeli tutaj
znajdzie wartość fałszywą, to od razu ją zwraca.
Czyli nawet jeżeli tutaj by było true,
jeżeli tutaj się podstawi false, to ten
operator nawet nie przechodzi jakby na swoją prawą stronę.
On tutaj widzi false lub inną wartość
fałszywą taką jak zero czy pusty ciąg znaków albo null lub undefined
i on ją od razu zwraca i całe to wyrażenie ewoluuje wtedy do false,
albo właśnie do takich wartości, jeżeli tam by powiedzmy było 0.
Więc if 0 również się nie wykona, bo jest to wartość fałszywa.
Czyli ten operator AND zakłada, że jakby
pierwsza wartość musi być prawdziwa, żeby zwrócił drugą.
No i jeżeli ta druga zwrócona jest prawdziwa, to dopiero if się tym zajmuje, tak jak
wspomniałem, czyli wtedy tutaj jest podstawione true i if się tym zajmuje.
Czasami błędnie jest to tłumaczone tak, że
ten operator jakby zwraca true, jeżeli obie te wartości są prawdziwe.
Tak jest w niektórych językach
programowania, natomiast nie w języku JavaScript.
W przypadku JavaScript on nie zwraca true
lub false tak jak te operatory, gdzie mieliśmy np.
większe od czy operator porównania.
One zwracały true lub false.
Taki operator nie zwraca true lub false.
On po prostu zwraca albo pierwszą wartość, albo drugą wartość.
Jeżeli pierwsza jest fałszywa, od razu ją zwraca,
jeżeli jest prawdziwa, zwraca tą, która jest po jego prawej stronie
czy jest fałszywa czy prawdziwa, nie ma znaczenia.
Ona zostaje po prostu zwrócona i całe to wyrażenie właśnie w ten sposób wygląda.
Następnym operatorem jest operator OR, czyli lub.
I tutaj zrobimy sobie nieco prostszy przykład.
Utworzymy sobie dwie stałe, takie jak
firstName równa się Jacek i lastName równa się Kowalski.
I znowu zrobimy sobie instrukcję warunkową
if, ale ten operator może być wykorzystywany wszędzie.
On nie musi być w instrukcji warunkowej tego typu. Ale zróbmy sobie coś takiego i
tutaj pokażę Ci, że będzie to trochę inaczej wyglądać.
Więc zapytamy czy firstName równa się Jacek,
porównamy to w taki sposób i teraz pokazywałem Ci w lekcji poprzedniej, że
taki operator zwraca zawsze true lub false,
zaraz do tego wrócę, lub to jest właśnie ten operator, o którym
teraz mówimy, czyli OR, lub lastName równa się Kowalski.
To tylko wtedy chcemy wyświetlić w
konsoli, że Jacek lub tutaj Nowak, bo chciałem tutaj napisać Nowak.
OK, już wszystko tłumaczę.
Nie zwracajmy uwagi na to podkreślenie, bo
to nasz edytor już tutaj przeanalizował ten kod i coś nam chce powiedzieć.
Natomiast kod sam w sobie jest poprawny.
Czyli teraz robimy coś innego.
Mamy operator OR, który działa jakby inaczej, zupełnie odwrotnie niż ten
operator AND. Bo on działa tak, znowu operuje na dwóch operandach,
natomiast tu możesz tego bezpośrednio nie widzieć, bo tu jest kilka wyrażeń.
Ale jeżeli całe to wyrażenie najpierw byśmy sobie przeliczyli, to co on robi?
Czy firstName jest równe
Jacek? Zgadza się, więc ono jest zamieniane
na true, a więc operandem dla tego operatora staje się właśnie ta wartość.
Następnie czy lastName równa się Nowak?
Nie równa się, bo równa się Kowalski.
Porównaliśmy tutaj stringi, więc tutaj będzie false.
I teraz jak myślisz, co w takiej sytuacji się stanie?
Czy to się wyświetli?
Wyświetli się, dlatego, że operator OR działa w ten sposób, że jeżeli po jego
lewej stronie jest wartość prawdziwa, to on cały od razu ewoluuje do tej wartości,
natomiast jeżeli nie, to nie przerywa tak jak ten operator,
tylko idzie na swoją prawą stronę i zwraca to co jest po prawej stronie.
A więc jeżeli tutaj od razu mamy prawdę, to ta prawda jest zwracana.
Jeżeli jej nie ma to przechodzi na prawą
stronę i zwraca to co zostanie tutaj zewaluowane.
I znowu ten operator nie zwraca true lub
false, tylko to co będzie po jego lewej lub prawej stronie.
W tym przypadku to będzie true lub false.
Ten operator zamienia się na true lub false, czyli on tutaj podstawi false
i to byłoby zwrócone, ale tylko wtedy, gdyby tu była wartość fałszywa.
W tym przypadku już tutaj będzie true
a więc cały ten operator zostanie,
całe to wyrażenie zostanie zamienione na true.
Czyli można powiedzieć, że operator OR działa tak, że albo to, albo to.
Natomiast operator AND działa
tak, że jeżeli to jest prawda, to dopiero
wtedy zwracamy to co jest po tej stronie. Tutaj
jeżeli tutaj nie ma prawdy, zwracamy to, co jest po prawej stronie.
Jeżeli jest, zwracamy to, co jest tutaj.
No i na koniec operatorach logicznych mamy
jeszcze operator negacji, który nam odwraca wartość.
A więc jeżeli bym utworzył sobie stałą
name i wpisał tam Piotr to jest to wartość tekstowa.
Możemy zaprzeczyć wykrzyknikiem i napisać not name.
Wtedy taka wartość tekstowa, która jest wartością prawdziwą tym operatorem
zostanie zamieniona na wartość przeciwną, czyli na false.
Jeżeli tu byśmy mieli pusty ciąg znaków,
jest to wartość uznawana za fałszywą,
jeżeli przed nią byśmy zrobili właśnie
taki not, to wartość fałszywa zostanie zamieniona na true.
I z tego powodu jeżeli mamy
gdzieś przechowywane powiedzmy imię, które ktoś wpisał i nie wiemy czy on wcisnął
enter, nic nie wpisał czy np. wpisał swoje imię, to możemy sobie zrobić takiego if
jeżeli not name to wyświetlimy imię
nie zostało podane, coś w tym stylu i właśnie w tej sytuacji to nam się w
konsoli wyświetli, że imię nie zostało podane.
Natomiast jeżeli podam tutaj Piotr zobacz, to już się to nie wyświetla. Bo tak
jak wspomniałem Piotr jest wartością prawdziwą.
Not odwróci tę wartość i zamieni ją na false.
A więc jeżeli if false to ta linijka w ogóle się nie wykonuje.
A więc operator negacji odwraca nam wartość, ale on zawsze
nam zwróci true lub false, czyli jeżeli byśmy zrobili
not true to zwróci false.
Natomiast jak zrobimy not i tutaj mielibyśmy Piotr
to nie jest wartość true, ale jest wartością prawdziwą.
On jak to odwróci też zwróci false.
Czyli taki operator zawsze nam zwróci true lub false.
To tyle jeżeli chodzi o te operatory, czyli operator AND, a więc
koniunkcja, operator OR, czyli lub, a więc alternatywa i operator NOT, czyli negacja.