JavaScript: null vs. undefined
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.
Tej lekcji poznasz dwie kolejne wartości fałszywe - null oraz undefined.
I powiem Ci jakie są pomiędzy nimi różnice.
Dlatego że, często uważa się iż są one tożsame natomiast, tak zupełnie nie jest.
Przejdźmy sobie od razu do kodu.
Ja tworzę nową zmienną. Nazwę ją yourName i nie przypisuje tej zmiennej żadnej wartości. Pokazywałem już, że
jest to całkowicie poprawny kod JavaScript.
No i właśnie, jeżeli nie przypisaliśmy tejże zmiennej żadnej wartości,
to jaką ona ma wartość?
Możemy to sprawdzić znanym nam już sposobem. Odświeżam tutaj i wpiszemy sobie typeof
i właśnie yourName.
No i jak widzisz, zostało nam zwrócone undefined i jest to string, dlatego że tak jak już ci mówiłem, operator
typeof zawsze zwraca stringi, ale wartość tego stringa jest to undefined.
Natomiast gdybym tutaj w konsoli przeglądarki odwołał się bezpośrednio do yourName,
to jak widzisz, już bez cudzysłowów undefined zostało nam zwrócone
i jest to właśnie ta wartość, czyli jeżeli zadeklarujemy zmienną, ale nie przypisujemy jej żadnej wartości
to ma ona wartość undefined.
Ta wartość również będzie się pojawiać w pustych parametrach funkcji i przekonasz się o tym właśnie
w rozdziale poświęconym funkcjom.
Teraz, gdybyśmy do tej zmiennej poniżej przypisali jakąś wartość, tak jak ci pokazałem, yourName będzie
to Jan i ponownie chcielibyśmy sprawdzić typeof,
domyślasz się zapewne, co nam się wyświetli.
Sprawdźmy.
Jest to tym razem string, dlatego że już ciąg znaków został tutaj przypisany.
Ja jednak to usunę i teraz pokażę ci jeszcze jedną rzecz. Mamy zadeklarowaną zmienną,
widziałeś, że użyłem tej zmiennej i została zwrócona wartość undefined, ale co jeżeli chcielibyśmy skorzystać
ze zmiennej, której nigdy nie zadeklarowaliśmy.
Pojawi się to często, kiedy będziesz pisał jakieś skrypty kiedy po prostu się pomylisz
Gdybyś tutaj zapomniał np. jednej literki, a gdzieś skorzystał z tej zmiennej i napisał yourName to
taki właśnie błądek za moment zobaczysz konsoli ci się pokaże. Odświeżę tutaj i zobaczmy.
Nie mamy żadnej zmiennej, którą nazwalibyśmy sobie lastName, więc spróbujmy skorzystać z lastName.
Nie ma takiej zmiennej - mamy błąd.
Jak widzisz lastName is not defined. Nie jest to do końca tożsame z tym, że ma ona wartość undefined,
bo kiedy chcemy z niej skorzystać, to mamy błąd.
Natomiast gdybyśmy operatorem typeof, chcieli sprawdzić lastName, która nie istnieje to już nie mamy błędu,
a mamy wartość undefined.
No i właśnie takie zachowanie często może wprowadzać nas w błąd, bo nie do końca wiemy czy taka zmienna
istnieje czy nie.
Jeśli to samo zrobimy na zmiennej, którą zadeklarowałem, czyli yourName, to jak widzisz również będzie miała
ona wartość undefined.
Z tego właśnie powodu mamy kolejną wartość.
Jest to wartość NULL, czyli wartość pusta.
Jeżeli chcemy jakąś zmienną zadeklarować i dać znać, że ta zmienna ma wartość pustą, a nie tylko nie ma
wartości to możemy do niej przypisać null.
Gdybyśmy to zrobili, w ten sposób, null zapisujemy w ten sposób bezpośrednio bez żadnych cudzysłowów.
Jest to wartość pusta i teraz gdybyśmy tutaj przeszli i skorzystali znowu z yourName, to jak widzisz zostało
zwrócone null,
ale co niestety jest również kłopotliwe i wynika z takiej zamierzchłej historii języka JavaScript.
To nigdy nie zostało poprawione i dzisiaj byłby kłopot, aby to poprawić.
Jeżeli skorzystamy z operatora typeofdla null, to nie zostanie nam zwrócony null,
ale object. Natomiast null nie jest obiektem. O obiektach jeszcze będziemy w tym kursie mówić.
Jak jednak moglibyśmy sprawdzić, czy jakaś wartość jest wartością null, pokaże ci już kolejnych lekcjach,
gdzie będziemy mówić o operatorach porównania.
Jeśli jednak będziesz chciał stworzyć zmienną, do której chcesz przypisać wartość pustą, która później
zostanie w jakiś inny sposób uzupełniona to przypisuj zawsze wartość null.
Teraz jeszcze pokażę ci, jak wygląda wartość null w przypadku obiektów.
W tym momencie, jeżeli ten kurs oglądasz od początku po kolei, to nie wiesz jeszcze czym są obiekty,
dlatego polecam Ci wrócić do tej lekcji po rozdziale o obiektach,
niestety nie jestem w stanie tego wytłumaczyć w inny sposób,
musisz wiedzieć jak działają obiekty. Utworzę sobie nowy obiekt, ja go nazwę person, czyli osoba.
W ten sposób i teraz przejdziemy do przeglądarki.
Gdybym chciał się odwołać do właściwości obiektu poprzez np. typeof person.name, a nie zdefiniowaliśmy
name, mamy wartość undefined.
No i w tym momencie, nie wiemy czy istnieje taka właściwość jak name,
czy taka właściwość nie istnieje.
Dlatego jeżeli tworzymy obiekty. Jeżeli tworzymy jakieś skrypty czy biblioteki, z których będą korzystać
inni programiści i chcemy zadeklarować, że taka wartość jak name w tym momencie jest pusta, w danych
okolicznościach, to powinniśmy jej przypisać wartość null.
W tym przypadku możemy to zrobić w ten sposób i teraz gdybyśmy sobie odświeżyli i to sprawdzili tutaj zostanie
zwrócone object, ale tak jak ci mówiłem w lekcji o operatorach, będę pokazywał jak możemy sprawdzić czy
na pewno jest to null.
Wiem,że ta lekcja na samym początku przygody z JavaScript'em może się wydawać zagmatwana.
Natomiast zapamiętaj jedno. Jest bardzo istotna różnica pomiędzy wartością undefined czyli niezdefiniowaną
a pomiędzy wartością null.
Jeżeli gdzieś będziesz miał wartość null, to znaczy że wcześniej ktoś celowo taką wartość przypisał.
Może to być jakiś inny programista,
z którego biblioteki będziesz korzystał albo np. może to być jakiś obiekt wewnątrz przeglądarki.
Jeszcze o tych obiektach będziemy w tym kursie mówić. Jeżeli jest wartość null, to znaczy, że z jakiegoś
powodu pusta wartość została tam przypisana.
Być może w danych okolicznościach czy w danym momencie, kiedy korzystasz z jakiegoś kodu, ta wartość nie
jest jeszcze określona, ale np. po wykonaniu jakiegoś zapytania do serwera taka wartość zostanie uzupełniona,
czyli wartość jest ustawiona, ale jest wartością pustą, a undefined oznacza, że wartość nie została nigdy
ustawiona.
Kod
null vs. undefined · 1 min
var yourName = null;
var person = {
name: null
};