JavaScript: Prawda, fałsz i wartości prawdziwe oraz fałszywe
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.
Podczas tej lekcji dowiesz się, czym jest prawda, fałsz a także wartości prawdziwe oraz wartości fałszywe
w języku JavaScript.
Przejdźmy od razu do kodu.
I znowu na przykładzie kilku zmiennych, ale także kilku innych konstrukcji,
pokażę ci jak to wszystko wygląda.
Jeżeli pewnych rzeczy jeszcze nie będziesz rozumiał, to warto, abyś do tej lekcji wrócił, po tym jak już
omówimy instrukcje warunkowe, które znajdują się w kolejnym rozdziale.
Zacznę od stworzenia zmiennej isLoggedIn.
Co to oznacza?
Otóż ta zmienna mówi nam czy użytkownik jest zalogowany czy nie.
Tak sobie ją nazwiemy isLoggedIn i przepiszemy jej wartość false.
I teraz właśnie to, o czym mówiłem, mamy wartości prawda oraz fałsz.
Prawda jest to true, zaraz to pokaże, a fałsz jest to false.
Jak widzisz tutaj, bez żadnych cudzysłowów, po prostu, jest to taka oto wartość.
Dlatego właśnie żadnej zmiennej nie możemy nazwać false, bo byśmy nadpisali taką oto wartość.
Więc tutaj mamy wartość fałszywą.
I teraz do czego nam są takie wartości potrzebne? Otóż właśnie do instrukcji warunkowych.
Dlatego teraz nie będę dokładnie tłumaczył konstrukcji, którą za moment napiszę, ale po ukończeniu rozdziału
o instrukcjach warunkowych, wróć sobie najlepiej do lekcji.
Jeżeli mamy zmienną, która przechowuje wartość fałszywą, to możemy instrukcją if sprawdzić,
w ten sposób isLoggedIn
i tutaj, jeżeli będzie prawda, to będziemy chcieli pewny kod wykonać i tutaj napiszę console.log.
Zaraz ci powiem, jak to dokładnie działa i tutaj podamy string Zalogowano.
console.log jest to funkcja, z której możemy korzystać, aby w konsoli przeglądarki wyświetlać pewne teksty.
Piszemy console, następnie kropka, log i tutaj w nawiasach okrągłych podajemy wartość. Tutaj może być przekazana
również zmienna, którą chcemy wyświetlić. Więcej o tej funkcji i generalnie o funkcjach dowiesz się z
działu o funkcjach.
Natomiast teraz muszę to w ten sposób zapisać, aby móc ci pokazać o co chodzi. Tutaj napiszę
else, czyli w przeciwnym wypadku console.log. Nie zalogowano.
I teraz o co chodzi przejdziemy do przeglądarki.
Odświeżę.
Jak widzisz w konsoli przeglądarki za pomocą console.log wyświetliło się - Nie zalogowano.
Dlatego, że tutaj mieliśmy wartość false i sprawdziliśmy czy prawda.
Jeżeli tak wyświetl to, jeżeli nie wyświetl to. Teraz, Jeżeli zmienimy tę wartość na true.
Przejdę tutaj.
To z kolei widzimy - Zalogowany.
Czyli to są dwie wartości true lub false, ale nie zawsze zapisujemy je w ten sposób, że tak powiem ręcznie,
czyli wpisujemy true lub false.
Czasem te wartości będą przez różne operatory zwracane, o czym się przekonasz już w najbliższych lekcjach.
Teraz druga sprawa. Są to wartości prawdziwe oraz wartości fałszywe. To jest można powiedzieć wartość
prawdziwa, ale dokładniej mówiąc to jest prawda, false jest to fałsz, a wartości prawdziwe lub fałszywe
wyglądają w następujący sposób. Te wartości również znajdziesz w PDF'ie dołączonym do tego kursu.
Czyli za każdym razem, jeżeli jakaś zmienna będzie miała wartość false albo zero albo pusty ciąg znaków
albo null, o którym będziemy mówić w kolejnej lekcji albo undifined albo Not a Number, o czym już mówiłem
w lekcji poprzedniej, to będą to wartości fałszywe.
Każda inna wartość w języku JavaScript będzie uważana za wartość prawdziwą.
No i teraz o co chodzi?
Chodzi o to, że gdybyśmy teraz chcieli znowu skorzystać z instrukcji if, tak jak to zrobiłem wyżej. Utworzymy
zmienną, nazwę ją value, czyli wartość i napiszę tutaj false.
I teraz gdybym zrobił if'a value, to wyświetl jakiś console.log i będzie tutaj ta wartość nie jest fałszywa.
I przejdźmy do przeglądarki, zobaczymy.
Odświeżam. Jak widzisz ta wartość nie jest fałszywa, console.log nam się wyświetlił, czyli false zapisane,
tak jak zapisywałem to wcześniej tutaj, bez cudzysłowu.
A false w cudzysłowach to są dwie różne rzeczy. To jest po prostu ciąg znaków, który nie jest pusty.
Tutaj Ci pokazałem, że pusty ciąg znaków czyli po prostu takie cudzysłowy,
to jest wartość fałszywa,
ale jeżeli cokolwiek tam się znajduje to już nie.
Gdybym teraz to usunął i będzie to pusty ciąg znaków i chciał sobie tutaj odświeżyć.
To jak widzisz ten drugi komunikat się nie pojawia.
Czyli każda wartość w JavaScript'cie, oprócz tych, które są tutaj. Będzie to wartość prawdziwa, nawet 0, gdybyśmy
zapisali to w ten sposób. Możesz zobaczyć wyświetla nam się tutaj.
Tak jak wspominałem, będziemy często z takich wartości prawdziwych lub fałszywych
korzystać właśnie w takich instrukcjach if, kiedy będziemy chcieli sprawdzić czy coś jest prawdą albo
fałszem
i w zależności od tego wykonywać pewien kod. Na sam koniec chciałbym ci jeszcze pokazać, tylko jedną rzecz.
Mianowicie gdybyśmy sprawdzili operatorem typeof, co nam zwraca kiedy podamy false lub true.
Nie musimy tutaj podawać zmiennej, która przechowuje taką wartość. Możemy bezpośrednio tę wartość wpisać
i zobaczmy, jak widzisz taki typ, jest to boolean.
I raz jeszcze przypominam, że w cudzysłowach zostało zwrócone, bo wartość która została zwrócona, jest to
ciąg znaków, czyli string, ale jakby napis który tutaj mamy, czyli wartość tego stringu. jest to boolean.
Oznacza to, że typ false, jest to boolean.
Gdybyśmy zrobili to samo dla true, również będzie to boolean.
Natomiast widziałeś, że wartością
fałszywą może być np. pusty ciąg znaków i sprawdzimy to samo dla pustego ciągu znaków.
Jak widzisz, jest to już string.
Jest to wartość fałszywa, ale nie jest to wartość typu boolean, czyli tak zwana wartość bool'owska.
Kod
Prawda, fałsz · 1 min
var isLoggedIn = true;
if(isLoggedIn) {
console.log("Zalogowano");
} else {
console.log("Nie zalogowano");
}
// Wartości fałszywe
// false
// 0
// ""
// null
// undefined
// NaN
var value = "0 ";
if(value) {
console.log("Ta wartość nie jest fałszywa");
}