JavaScript: Operatory logiczne
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 poznasz ostatnią już podstawową grupę operatorów dostępnych w JavaScript'cie, ale także w innych
językach programowania.
A są to operatory logiczne.
Przechodzimy od razu do pliku scripts.js. Utworzę
nową zmienną number, będzie to wartość 10.
No i teraz za pomocą znanego już console.log, coś w konsoli przeglądarki będziemy chcieli wyświetlić.
Napiszę tutaj number mniejsze od 20.
Jak już Ci pokazywałem w przypadku operatorów porównania, z tego zapisu, z tego wyrażenia, bo tak to fachowo
nazywamy, zostanie nam zwrócone true.
Bo 10 jest mniejsza od 20.
To właśnie true zostanie przekazane do funkcji console.log i zostanie nam tutaj wyświetlone.
Natomiast chciałbym Ci teraz pokazać pierwszy z operatorów logicznych, który nazywa się operatorem koniunkcji.
Zapisujemy go poprzez dwa razy ampersand, po angielsku
jest to również and,
w ten sposób i będzie on nam sprawdzał dwa warunki, które sobie tutaj podamy.
Mamy tutaj number mniejsze od 20. Wiemy, że jest to true, a tutaj napiszemy
number jest większa od 5, czyli 10 jest większa od 5.
Powinniśmy również mieć tutaj wartość true.
Tylko teraz, abyś będzie dobrze zrozumiał, jak działa ten operator.
Od lewej strony zaczyna sprawdzanie warunków.
Mamy tutaj jeden warunek. Dla tego operatora nie ma znaczenia czy stoi jakiś znak czy nie.
Możemy tutaj zapisać po prostu 20, Jest to wartość prawdziwa, więc wszystko jest ok. Natomiast musi to
być prawda albo wartość prawdziwa, abyśmy mogli przejść dalej.
Tutaj zostanie zwrócony true, czyli prawda, jest ok i przechodzimy do sprawdzenia dalej, czy number jest
większa od 5.
Jest również prawda.
Więc całe to wyrażenie zwróci prawdę.
Ale mówiłem przypadku operatorów porównania, że one zawsze, tak jak w tym przypadku, zwrócą true lub false.
Operator and taki, który tutaj mamy, czyli koniunkcji wcale nie musi zwracać true lub false. On zwróci
nam te wartości, które się tutaj znajdują
i to może być zarówno pusta wartość jak i wartość prawdziwa.
Pokażę ci to teraz na przykładzie.
Tutaj mamy true, więc powiedziałem ci że, przejdziemy do sprawdzenia dalej.
Gdybym to zapisał.
Ciąg znaków w ten sposób.
Jest to wartość prawdziwa, jak już wiesz, tutaj była prawda, przechodzimy dalej i co się tutaj wyświetli.
Jak widzisz ta właśnie wartość została tutaj wyświetlona.
A więc nie tak jak byśmy mogli pomyśleć,
a więc true plus wartość prawdziwa to ta całość musi zwrócić
true. Tak się w tym przypadku nie dzieje.
Natomiast, jeżeli wartość po lewej będzie wartością fałszywą, to w ogóle nie przejdziemy dalej.
Bo gdybym teraz tutaj napisał sobie
pusty ciąg znaków. Odświeżę,
to wygląda jakby nic się tutaj nie wyświetliło,
ale w tym miejscu ten pusty ciąg znaków został wyświetlony, mimo tego że jest to wartość fałszywa.
I teraz można się zastanowić, co wynika tak naprawdę z używania takiego operatora.
Otóż ten operator zwróci nam tylko jedną z wartości, któremu podajemy jest jedna wartość w tym przypadku
jest to true.
Tutaj wartość pusta i dopiero później możemy coś z tym zrobić. Gdybyśmy mieli zamiast console.log - if, to
moglibyśmy w if'ie również to sprawdzić, bo jeżeli pierwsza wartość, to będzie wartość prawdziwa np. false.
A tutaj byśmy napisali jakiś ciąg znaków, to ten ciąg znaków nigdy nie zostanie zwrócony i oznacza to
tylko tyle, że przy sprawdzeniu podaliśmy jakieś dwie wartości i okazało się, że któraś z nich jest wartością
fałszywą, bo zostało nam tutaj w tym przypadku zwrócone false.
Tak jak wspominałem, gdybyśmy tutaj podali sobie 0, które również jest wartością fałszywą to 0 zostałoby
tutaj zwrócone.
Ale z tym, co zostało zwrócone możemy coś dalej zrobić i zazwyczaj będziemy to sprawdzać w instrukcji
warunkowej if, w której Jeżeli przekażemy 0 zwrócone z całego takiego zapisu, to również będzie to wartość
fałszywa i kod w tym if'ie nam się nie wykona.
Mam nadzieję że już rozumiesz jak działa taki operator and.
Jeżeli po jednej stronie mamy prawdę albo wartość prawdziwą, to dopiero wtedy przechodzimy dalej i któraś
z tych wartości zostanie nam zwrócona i dopiero później możemy na tym operować.
Jeżeli raz jeszcze pokażę ci tutaj byłby jakiś ciąg znaków, który ma sens to zostanie nam zwrócony.
Ten, bo tutaj jest prawda.
Przechodzimy dalej i ostatnia wartość jest zwrócona.
I to właśnie np. w if'ie możemy sprawdzić, jest wartością prawdziwą, czyli całe to wyrażenie jest prawdziwe.
Przejdźmy teraz dalej i pokażę ci następny operator. Operator or czyli lub, inaczej mówiąc alternatywa.
Stworzę dwie zmienne. Mamy dwie zmienne firstName oraz lastName, Jacek Nowak.
I teraz będziemy chcieli tak jak już mówiłem w if'ie sprawdzić czy firstName równa się, używamy tutaj
operatora porównania tego strict, który nam dokładnie będzie sprawdzał, Jacek.
I teraz możemy napisać or.
Tak wygląda ten operator, o którym mówimy, czyli lub lastName równa się Nowak.
Gdybyśmy tutaj użyli and, tak jak już ci mówiłem, a tutaj chcieli wykonać jakiś kod. Zapiszemy to w ten
sposób, console.log, Jacek lub Nowak. Gdybyśmy użyli and, to tutaj mielibyśmy Jacek Nowak, bo wiemy, że na pewno
firstName musi być równe Jacek i lastName musi być równe Nowak, bo inaczej cały ten warunek nie zwróci
nam wartości prawdziwej.
Natomiast, jeżeli zapiszemy tutaj or, czyli lub, to wiemy, że Jacek lub Nowak.
Dlaczego?
Dlatego że, sprawdzamy tutaj na początku czy firstName jest równe Jacek.
W tym przypadku zostanie zwrócone true, jest OK. jeżeli zostanie zwrócony true, to już nic dalej nie jest
sprawdzane. Mamy wartość prawdziwą.
OK, możemy napisać na pewno, że jest to Jacek lub Nowak. No, bo skoro wiemy, że jest Jacek, to to zdanie jest
prawdziwe.
Natomiast jeżeli tutaj zostanie zwrócone false, to mimo wszystko sprawdzamy dalej.
W przeciwieństwie do tego operatora tutaj, sprawdzamy dalej czy lastName jest równe
Nowak. Jest równe, więc zostanie tutaj zwrócone true i wszystko będzie OK. Sprawdzimy to sobie, Jacek lub
Nowak.
Natomiast gdybym tak jak mówiłem, zmienił tutaj na Maciej, to mamy tutaj firstName równa się Jacek.
Nie, to jest Maciej. Sprawdźmy sobie dalej, lastName jest równe Nowak, zgadza się, więc znowu będzie Jacek lub
Nowak.
I dokładnie tak się dzieje.
Czyli to jest operator i, to jest operator lub, no i ostatni operator logiczny, który chce ci pokazać jest to
operator negacji.
Ten operator wygląda podobnie jak w przypadku operatorów porównania, mieliśmy wykrzyknik równa się. Natomiast
pokażę ci to na innym przykładzie. Stworzymy zmienną name i będzie ona przechowywać pusty ciąg znaków.
Na razie to wszystko jest tak ręcznie, ale pisząc skrypty zobaczysz, że takie dane będą pobierane z serwera
albo będziemy prosić użytkownika, aby wpisał swoje imię.
Jeżeli go nie wpisze, a kliknę OK, to będziemy mieli pusty ciąg znaków i teraz chcemy sprawdzić czy on
to imię wpisał.
No to możemy napisać if name.
Mówiłem ci, że tutaj zostanie to skonwertowane na prawdę lub fałsz.
name, pusty ciąg znaków jest to wartość fałszywa, czyli ten kod się nie wykona.
Dlatego, jeżeli chcemy wykonać ten kod w odwrotnym przypadku, jeżeli name nie jest podane, to musimy tutaj
postawić wykrzyknik, czyli negujemy tę wartość.
Wartość fałszywą i zostanie tutaj postawiona prawda.
Wtedy ten kod się wykona.
Napiszemy tutaj console.log, imię nie zostało podane i sprawdźmy czy rzeczywiście tak to będzie wyglądać.
Jak widzisz imię nie zostało podane.
Jeżeli ktoś poda imię. Wpisze tutaj imię. Tutaj zostanie podstawiona wartość prawdziwa. Tym znakiem ją
odwrócimy na fałsz, czyli będzie tutaj false. No i wtedy wiemy, że ten kod się nie wykona.
Zobaczmy.
Nic się nie wykonało.
A gdybyśmy tutaj dopisali else, no to oczywiście zostałoby to później wykonane.
I to wszystko poznałeś.
Trzy operatory logiczne czyli and.
Wszystkie warunki muszą być prawdziwe lub chociaż jeden warunek musi być prawdziwy.
Oczywiście możemy dalej podawać kolejne warunki.
Podobnie w przypadku and albo możemy warunki grupować nawiasy, czyli moglibyśmy tutaj napisać to w ten
sposób. Wiemy, że tutaj zostanie zwrócone true lub false w tym przypadku, a tu możemy napisać np. end
i jeszcze jakiś inny warunek.
Oczywiście jak sobie to tak zagmatwamy, to jest później nieczytelne.
Ale myślę, że rozumiesz w jaki sposób to działa.
No i ostatni jest operator negacji, a więc chcemy odwrócić wartość, która się pod taką zmienną znajduje.
Dokładnie gdybyśmy zapisali to w ten sposób, jest to dokładnie to samo, co mieliśmy wcześniej, w przypadku
pustego ciągu znaków.
Kod
Operatory logiczne · 1 min
var number = 10;
console.log("as" && "asdf");
var firstName = "Maciej",
lastName = "Nowak";
if(firstName === "Jacek" || lastName === "Nowak") {
console.log("Jacek lub Nowak");
}
var name = "Piotr";
if(!name) {
console.log("Imię nie zostało podane!");
}