JavaScript: Operatory porównania
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.
Przyszedł czas, aby poznać kolejne operatory.
Są to operatory porównania. Jak zawsze wskakujemy prosto do scripts.js, a więc do naszego kodu i będę chciał
tutaj napisać
var number, a więc utworzyć sobie nową zmienną i będzie to 20 to jest operator przypisania, tak jak już wiesz,
poznałeś również operatory arytmetyczne,
a teraz czas na operatory porównania. Natomiast abyś zrozumiał dobrze tę lekcję, to musisz przerobić najpierw
dział w którym mówię o instrukcjach warunkowych, chyba że już rozumiesz jak one działają, dlatego że będą
nam one tutaj niezbędne.
Zaczniemy od najprostszego operatora porównania, który sprawdza nam równość.
Zrobimy to jak wspomniałem w instrukcji warunkowej, czyli if. Odwołam się do zmiennej number i dwoma znakami
równa się, a nie jednym bo jest to operator przypisania.
Dwa jest to operator porównania. Porównamy czy number jest równy 20.
Jak widzisz jest, więc użyjemy tutaj console.log i napiszemy, że liczba jest równa 20.
Przejdziemy do przeglądarki. Odświeżymy i rzeczywiście mamy, liczba jest równa 20.
Wszystko w porządku.
Porównaliśmy to za pomocą tego operatora.
Częstym błędem jest fakt, że zapominamy czasem dopisać tego drugi raz
i gdybyś to zrobił w ten sposób, również nam się to wszystko wyświetli.
Jak widzisz po odświeżeniu.
Ale nie dlatego, że ten kod jest poprawny.
Tutaj mam również ostrzeżenie, ale dlatego że musisz zawsze pamiętać o kolejności wykonywania jakby zadań przez
język Javascript.
Najpierw do number, czyli do zmiennej, którą stworzyliśmy wcześniej piszemy wartość 20 i zostanie tutaj
zwrócone, czyli będzie ta wartość tej zmiennej mała 20.
Jak już mówiłem, mamy wartości fałszywe i wartości prawdziwe.
Zero było wartością fałszywą, ale mówiłem, że wszystkie inne wartości w JavaScript'cie, oprócz tych, które
ci pokazałem i które znajdziesz również w PDF'ie, są wartościami prawdziwymi, a więc gdybyśmy tutaj zapisali
if 20, to również nam się to wszystko wyświetli. 20 jest pozytywną liczbą.
Jest to wartość prawdziwa, dlatego jeżeli użyjesz tylko jednego znaku równa się, to najpierw do zmiennej
number przypiszesz 20.
Następnie ta wartość czyli numbers zostanie tu zwrócona i zachowa się dokładnie tak, jak byśmy tutaj wpisali
to w ten sposób, czyli zawsze pamiętaj, że mamy tutaj dwa znaki równa się, jest to operator porównania.
Teraz kolejna bardzo istotna rzecz.
Gdybyśmy to, co tutaj widzisz zapisali w taki sposób. Sprawdźmy czy nam się to będzie zgadzać.
Okazuje się że tak, chociaż ja ci już mówiłem, że taki zapis nie jest to liczba, jest to string.
A tutaj mieliśmy liczbę, ale operator - dwa znaki równa się - operator porównania, sprawdza nam tylko wartość,
a nie sprawdza typu.
Czyli gdybyśmy się zastanowili ta wartość 20 i ta,
są to te same wartości, a więc warunek jest spełniony.
Natomiast mamy również operator tzw. strict equality, a więc takiego porównania bardzo dokładnego, gdzie
jest porównywane zarówno wartość, jak i typ, to są trzy znaki równa się i teraz jeżeli tutaj odświeżę. Żaden
console.log nie został wyświetlony, dlatego że, 20 nie jest równe 20 jako string. Jeżeli to z powrotem zmienię w ten sposób.
OK, wszystko się zgadza.
Czyli jeżeli będziesz chciał porównać string z wartością liczbową, to musisz użyć dwóch.
W przeciwnym wypadku musisz używać tego operatora.
No i kiedy chcemy np. porównywać, tak jak pokazywałem, przed momentem, będzie to string jeszcze w tym kursie,
się o tym przekonasz, ale wyobraź sobie jakieś pole typu input na stronie internetowej, gdzie możemy wpisać
jakieś wartości i będziemy chcieli sprawdzić czy wartość którą ktoś wpisał jest równa 20.
Od razu ci powiem, że te wartości, które będziemy mogli z takich pól w JavaScript'cie przechwycić będą zapisywane
jako string.
Więc jeżeli ktoś pisze 20. Nam zostanie zwrócone to w taki oto sposób i będziemy mogli sobie
to tak porównać. Moglibyśmy oczywiście tutaj wpisać to w ten sposób, ale tutaj akurat nie miałoby to sensu.
Mam nadzieję że rozumiesz o co chodzi.
Czyli operator porównania, który sprawdza wartość i typ, są to trzy znaki równa się.
A jeżeli chcemy to sprawdzać w ten sposób używamy tylko dwóch znaków równa się.
Co jest jeszcze niezwykle ważne w kontekście tego operatora, ja może skopiuje to, co tutaj mamy i ci to
pokaże.
Mówiłem ci wcześniej o undefined. Jest taka wartość, możemy bezpośrednio z niej skorzystać i mamy wartość
null.
No i teraz porównamy czy undefined jest równe null.
Mam tutaj ostrzeżenie, ale to z ignorujemy. Jeżeli jest równe, to tak sobie napiszemy. Obydwie te wartości
są to wartości fałszywe, więc sprawdźmy to teraz. Okazuje się że undefined jest równe null.
Ale to, co tutaj napisałem nie jest prawdą, bo gdybyśmy chcieli to porównać poprzez trzy znaki równa się,
mówiłem ci że pokaże jak sprawdzać czy jakaś wartość ma wartość null.
To teraz okaże się, że to już się tutaj nie wyświetla.
I właśnie dlatego że typeof, gdybyśmy sprawdzili, null jest to object, a typeof undefined,
jest to undefined.
Podobnie gdybyśmy chcieli sobie sprawdzić czy false jest równe np. 0.
To jest wartość
fałsz. To jest wartość fałszywa.
Również nam się to wyświetli, czyli ta wiadomość.
Ale gdybyśmy chcieli już sprawdzić to trzema znakami równa się, to okaże się, że nic się tutaj nie wyświetla.
Mam nadzieję że już wiesz,
jak korzystać z tych operatorów
porównania w tym przypadku. Ja może ten przykład zostawie.
Przejdźmy sobie teraz dalej.
Pokazałem ci, jak możemy sprawdzać czy coś jest sobie równe.
Musisz tylko wiedzieć, że każdy operator porównania jaki ci pokaże w tej lekcji zwraca true lub false,
czyli dokładnie gdybyśmy tutaj napisali sobie true, ta linijka się wykona i dokładnie to samo dzieje się
tutaj.
Ten zapis zwraca nam true lub false, która zostaje tutaj podstawione, czyli zawsze będzie zwrócone przez operatory
porównania true lub false. Dokładnie tak samo dzieje się tutaj.
Natomiast tutaj sprawdzaliśmy, jeżeli numer jest równy 20 wyświetl to. Możemy tutaj zapisać else.
W przeciwnym wypadku coś innego.
Ale co gdybyśmy chcieli, od razu, tutaj zapisać jakąś instrukcję. Jeżeli numer nie jest równy 20.
Otóż możemy to bez problemu zrobić, za pomocą takiego operatora, czyli wykrzyknik równa się. Sprawdza nam czy
te wartości nie są równe.
Czyli jeżeli numer nie jest równy 20, wyświetl to, co tutaj się znajduje. Zapiszemy tutaj nie jest.
Sprawdźmy.
Nie wyświetliło się, bo ta wartość jest równa 20,
ale gdybyśmy chcieli skorzystać tak jak tutaj z tych trzech, czyli takiego strict equality, to tutaj w
tym przypadku zapisujemy dwa wykrzykniki i dwa. Tutaj będzie sprawdzana wartość oraz typ. Sprawdźmy.
No i liczba nie jest równa 20, czyli number 20 nie jest równy string'owi o wartości 20, czyli
to jest porównanie takie strict.
A jeżeli użyjemy to w ten sposób, jest to porównanie które nie sprawdza typu takich wartości.
Od razu chcę Ci pokazać jeszcze inne operatory, dlatego to od razu tutaj wkleję. Mamy
operator większe od i sprawdzamy czy number, w naszym przypadku, 20 jest większa od 10.
A tutaj czy jest mniejsze. No i sobie to możemy sprawdzić. Mamy
liczba jest większa od 10.
To jest operator większy od
i znowu tutaj z tego wyrażenia zostanie nam zwrócony true lub false,
które do if'a zostanie podstawione.
Podobnie tutaj.
Kolejne operatory to jest większe lub równe albo mniejsze lub równe, wyglądają następująco.
Jak widzisz zapisujemy je w ten sposób, czyli mniejsze lub równe, a tutaj większe lub równe.
W tę stronę. Sprawdzimy to sobie. Mamy liczbę mniejsza lub równa 20. Liczba jest większa lub równa 20, czyli
znowu tutaj zostanie zwrócony true lub false, w zależności od tego czy ten warunek jest prawdziwy.
I teraz na koniec chcę Ci pokazać jeszcze jedną rzecz, otóż nie zawsze musimy korzystać z if'a.
Możemy również stworzyć na przykład zmienną number2.
Napiszemy tutaj 6 i teraz chcemy stworzyć kolejną zmienną, która sprawdzi nam czy wartość, która jest
tutaj przechowywana jest wartością parzystą czy nie.
Więc napiszemy isEven, z angielskiego, czy jest parzyste i teraz zrobimy rzecz następującą w
nawiasach napiszę number modulo, czyli operator który już pokazywałem 2 i sprawdzimy czy to jest równe 0.
I znowu tutaj bardzo istotna jest kolejność wykonywania tych zadań, a więc zostanie wykonane modulo 6
modulo 2.
Już ci mówiłem to będzie 0 i następnie sprawdzimy czy ta wartość jest równa 0, czyli po wykonaniu tego
wszystkiego.
Jak już mówiłem operator porównania zwróci nam true lub false i właśnie true lub false będzie zapisywane
tutaj w zmiennej isEven.
Jeśli teraz, tutaj odświeżymy i użyje w konsoli zmiennej isEven, to zauważ ma ona wartość true.
Gdybyśmy sprawdzili typeof isEven to jest to typ boolean, czyli zawsze operatory porównania zwracają true
lub false.
W ten sposób możemy sprawdzić czy dowolna liczba jest liczbą parzystą czy też nie.
Kod
Operatory porównania · 1 min
var number = 20;
if(number == "20") {
console.log("Liczba jest równa 20");
}
if(undefined === null) {
console.log("undefined jest równe null");
}
if(number !== "20") {
console.log("Liczba nie jest równa 20");
}
if(number > 10) {
console.log("Liczba jest większa od 10");
}
if(number < 10) {
console.log("Liczba jest mniejsza od 10");
}
if(number <= 20) {
console.log("Liczba jest mniejsza lub równa 20");
}
if(number >= 20) {
console.log("Liczba jest większa lub równa 20");
}
var number2 = 6;
var isEven = (number % 2) === 0;