JavaScript: Obiekt Date
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 omówimy bardzo ciekawy temat, jakim jest pobieranie daty
systemu użytkownika lub też tworzenie nowych obiektów z datą.
Przejdźmy od razu do kodu i pokażę ci w jaki sposób możemy pobrać aktualną datę.
Możemy to zrobić tworząc sobie jakąś zmienną, która nam będzie przechowywać referencje do obiektu, który utworzymy
nazwę ją d
równa się i mamy w JavaScript'cie taki konstruktor, czyli funkcje jak date, wcześniej pokazywałem ci string, boolean
czy array. Tutaj mamy coś takiego jak date, a więc możemy wpisać new Date w ten sposób i zostanie
nam tutaj zwrócony obiekt.
Jak ci wspominałem new z konstruktorem, czyli z funkcją zawsze zwraca obiekt.
Tutaj zostanie zwrócony obiekt.
No i zobaczmy teraz po odświeżeniu strony co
d będzie reprezentowało.
Jak widzisz jest to aktualna data, tutaj został zwrócony string, ale dlatego że użyliśmy console.log.
Gdybym wpisał console.dir i d, to możemy zajrzeć do tego obiektu.
On tutaj ma coś takiego jak proto.
Jest to prototyp.
Ja bardzo dokładnie o tym mówię
w drugiej części tego kursu, bo jest to temat troszkę bardziej zaawansowany. Niemniej jednak w tym prototypie są
różne metody, które za moment omówimy.
Pobraliśmy sobie teraz aktualną datę i chciałbym żebyś wiedział, że ta data zależy od tego, co jest ustawione
w systemie, a więc jeżeli nasz skrypt, który zamieścimy na stronie internetowej będzie wczytywany u jakiegoś
użytkownika to tenże skrypt będzie mógł pobrać datę taką jaką ktoś ustawił.
Czyli jeżeli ktoś sobie ustawi nieodpłatną datę potem skrypt to taką datę właśnie otrzyma.
Podobnie będzie gdybyśmy uruchomili taki skrypt w Node.js np. po stronie serwera, bo to również taki
skrypt będzie miał dostęp do takiej daty jaka w systemie operacyjnym jest ustawiona.
Kolejna ważna rzecz jest taka, że nie musimy tutaj korzystać z operatora new.
Jeżeli chcemy pobrać sobie aktualną datę i mieć ją tutaj zapisana jako obiekt, możemy wpisać po prostu date.
Różnica jest taka, że jeżeli teraz wpisując tutaj jakieś parametry np. 2015 1 itd.
Jeżeli tutaj podamy a tutaj nie mieliśmy new, to one zostaną zignorowane.
Natomiast, jeżeli używamy new, to możemy tutaj podać dodatkowe parametry, o których za moment powiem
konstruktor date, czyli tak jak tutaj widzisz przyjmuje kilka różnych parametrów. Generalnie są dwa jego
warianty. Jeżeli sobie tutaj napiszę d2 i napiszę new datę i następnie podam jakąś długą wartość, czyli jeden
parametr, to jest to parametr, który mówi ilość milisekund
od roku 1970.
Od pierwszego stycznia 1970 roku, bo od wtedy jest liczona taka epoka w programowaniu i w większości
języków programowania mamy coś takiego jak Unix timestamp.
Jest to właśnie data liczona w milisekundach od 1970 roku i jest to przydatne,
ja to pokażę jeszcze w sekcji Tips and Tricks.
Właśnie w tym kursie zobaczysz, o co w tym chodzi natomiast, jeżeli chcemy właśnie utworzyć nową datę
i nie pobrać aktualnej daty systemu, jak to zrobiłem.
Ale ustawić na tym obiekcie od razu jakąś datę i podamy jeden parametr.
To właśnie podajemy parametr, który mówi.
Liczba milisekund od 1970 roku.
No i zobaczmy, co się udało tam przez przypadek wpisać.
No jak widzisz pisałem taką dużą liczbę, że jesteśmy w roku 5871.
Za dużo tych milisekund wpisałem, możemy ich trochę skasować.
Zobaczmy raz jeszcze d2 i teraz jesteśmy właśnie w 1970.
Ale w maju, a nie pierwszego stycznia.
Teraz kolejna opcja.
Stworzymy d3, to jest znowu new date,
ale możemy tutaj podać więcej parametrów.
Minimum dwa są obowiązkowe.
No, bo jeżeli podam na przykład 2015, to nie utworze nowej daty- pierwszy stycznia 2015, ale będzie to ta
właśnie liczba milisekund od 1970 roku, więc minimum drugi parametr muszę podać, aby ten zapis się od
tego wyżej różnił.
I tutaj podajemy miesiąc i teraz bardzo ważne, że w przypadku daty miesiące są indeksowane od zera tak
jak tablice, czyli styczeń to nie będzie jeden, czyli pierwszy miesiąc, ale zerowy.
A grudzień to nie będzie 12, ale 11.
Czyli jeżeli podam 0, to w tym momencie powiedziałem, utwórz mi nową datę, nowy obiekt w roku 2015,
miasiąc,
chcę, żeby to był pierwszy, czyli styczeń.
Jeżeli tak zrobimy i odwołam się do d3 to możesz zobaczyć tutaj, mamy pierwszy stycznia 2015, tak jak
to wpisałem i ta funkcja w takiej postaci, ten konstruktor może przyjmować jeszcze więcej parametrów,
2 dwa są obowiązkowe, aby różniła się od tej wyżej, ale możemy podać kolejne i każde z nich jest opcjonalne.
Czyli jeżeli teraz podam jeden wystarczy mogę podać kolejne i kolejne i po kolei będzie to dzień np.
możemy powiedzieć 16.
Zobaczmy.
Jeszcze raz d3, będzie to 16 stycznia i kolejno możemy podawać następne parametry, jeśli są nam potrzebne.
Możemy podać godzinę, możemy sobie podać minuty i przedostatni parametr, to są sekundy.
Czyli teraz powiedzieliśmy rok 2015, styczeń 16, godzina 12:23, 55 sekund.
I możemy jeszcze podać milisekundy, czyli jedna sekunda jest to 1000 milisekund.
Czyli mogę tu podać np. 989 milisekund.
Zobaczymy raz jeszcze d3.
No i właśnie taka data została dla nas ustawiona.
Natomiast, co jest w tym wszystkim ciekawe.
No, bo zobacz tutaj mogliśmy pobrać datę systemu.
Tutaj ustawiliśmy jakąś nową datę.
Ale po co nam to wszystko jest potrzebne.
Ano właśnie po to, że teraz na takim obiekcie, mówiłem ci już wielokrotnie, że obiekty mają właściwości
i metody, możemy z różnych metod skorzystać.
Teraz będę chciał ci je pokazać. Ja od razu może je wkleje poniżej.
I po kolei sobie komentujemy i zobaczysz jak one działają.
Ok, będziemy to robić w konsol log'u, ja tutaj od razu skomentowałem o co chodzi.
Jeżeli odwołamy się do d3 czy do tej daty, którą stworzyliśmy to mamy taką metodę jak getFullYear.
Zobaczmy w konsoli, co ona reprezentuje.
2015 zostało nam zwrócone i jest to number. Gdybyśmy tutaj wpisali np. typeof.
Zobaczmy, to jak widzisz jest to number.
Będziemy mogli sobie z tego skorzystać, zaraz ci pokaże jak. Teraz mamy kolejną metodę getMonth i ona
nam zwróci miesiąc. Pamiętaj, że znowu styczeń to będzie zero.
Czyli mamy tutaj zero, jeżeli będziemy chcieli sobie sprawdzić w jakim jesteśmy naprawdę miesiącu to
do tego po prostu dodajemy 1 i nie ma żadnego problemu.
Następnie getDate i to z kolei zwraca nam dzień, czyli 16,
w tym przypadku być powinno.
Tak też się dzieje.
Następne jest to getHours, tutaj jest s na końcu, jest to godzina. Zobaczmy dwunasta dokładnie, tak jak
to ustawiliśmy w tym miejscu.
Możemy oczywiście na tym d operować i wtedy będzie to nasza aktualnie pobrana data, a nie ta, którą tutaj
ustawiliśmy.
Ale my operujemy akurat na d3. Minuty to jest getMinutes, 23, wszystko działa jak należy.
Następnie getMiliseconds, możesz się domyślić, że będzie ta wartość, którą podałem tutaj na samym końcu.
Następnie mamy coś takiego jak getDay.
Jest to dzień tygodnia. W naszej dacie sobie ją wyświetlimy to widzi, że jest to Friday, czyli piątek, więc
zobaczmy, co zostanie dla nas wyświetlone jeśli sobie getDay odkomentujemy, 5, czyli piąty dzień tygodnia jest
to piątek.
I ostatnia rzecz jaką mamy, jest to getTime.
I tu właśnie zostaje pobrana liczba milisekund.
Od 1970 roku, od pierwszego stycznia.
Dzięki temu będziemy mogli w ciekawy sposób operować na datach, ale to pokaże Ci w jednej z lekcji Tips and Tricks,
,o których mówiłem.
Teraz mamy jeszcze kilka innych metod, z których warto korzystać.
Zanim jednak do nich przejdę, chcę ci powiedzieć że wszystkie z tych metod, które tutaj ci pokazałem mają
również swoje odpowiedniki, które zamiast get, mają set,
czyli jeżeli teraz byśmy na tej dacie, którą już to mamy ustawioną, stworzoną, chcieli zmienić rok, to możemy
się odwołać do d3.setFullYear i podać 2016 i wtedy zostanie to dla nas zmienione i każdy z tych parametrów,
czyli Month, Date możemy zmienić, możemy napisać d3.setHours i sobie ustawić na takiej dacie nową godzinę.
Teraz pokażę ci jeszcze kilka metod, które mogą również być przydatne.
Pierwsza z takich metod jest to metoda toString, która właśnie Jeżeli wpiszemy d3 to od razu jest wywoływana
w konsoli.
Jeżeli teraz zapisze tutaj, odświeże, to widzisz, że dokładnie to samo zostało dla nas zwrócone, czyli
taki właśnie ciąg i często w bazach danych są takie ciągi zapisywane i możemy je również później odczytać.
Następnie mamy metodę podobną, która nazywa się toLocalString.
Zobaczmy, co ona nam zwróci.
Jak widzisz wygląda to już zupełnie inaczej. W zależności od systemu operacyjnego i od języka jaki mamy
ustawiony.
To może różnie wyglądać, więc nie zawsze jesteśmy w stanie na tym polegać, bo nie zawsze będzie to wyglądało
w taki sam sposób.
Na koniec chce ci pokazać, jak z naszej daty, możemy wyświetlić ją w jakimś innym formacie, czyli lepiej
sformatowaną.
Po co te wszystkie metody, tak naprawdę są dla nas dostępne.
Bo nie chcielibyśmy na stronie np. użytkownikowi wyświetlać datę w takim komputerowym można powiedzieć
formacie, więc możemy sobie tutaj to wszystko pododawać dodawać i stworzyć odpowiedni string.
Ja teraz skopiuje gotowy kod.
No i tak to będzie wyglądać.
Odwołamy się do d3.getDate, czyli pobierzemy,
jak widzisz tutaj dzień.
Następnie dodamy kropkę.
Pobierzemy sobie miesiąc i dodamy 1, bo Styczeń to np. będzie 0, więc chcemy dodać 1 i następnie getFullYear.
Zobaczymy, jak to będzie wyglądać.
Jak widzisz, wygląda to w ten oto sposób.
Tu jeszcze moglibyśmy sprawdzić, jeżeli ta wartość, czyli miesiąc jest mniejsza od dziewięciu, to możemy
dodać tutaj 0, czyli np. 09, 01 itd.
Na koniec jeszcze tutaj pokażę ci, że rzeczywiście możemy ustawiać sobie na tej dacie dowolne właściwości
np. rok, setFullYear i możemy tutaj powiedzieć,
2020 i teraz w console.log, jeśli się odwołamy do d3, getFullYear,
to mamy tutaj 2020.
Na koniec jeszcze pokazać, że możemy parafować datę, czyli jeżeli taki string, jak tutaj, mamy sobie z kopiujemy,
on może być z serwera zwrócony albo jeszcze z innego miejsca, to możemy tutaj stworzyć nową datę np. d4
ją nazwiemy i napiszemy new datę i przekażemy tutaj nie tak jak wcześniej ci pokazywałem, liczbę milisekund
czy te wszystkie parametry, ale właśnie string w takiej postaci. Zapiszemy to sobie odświeżym tutaj i zobaczymy.
Będzie to d4.
Jak widzisz, zostało to poprawnie sparsowane.
Podobnie moglibyśmy tutaj użyć innych zapisów.
One różnie zależnie od implementacji działają, ale moglibyśmy napisać new Date i np. podać sobie tutaj taką
datę jak powiedzmy 12.11.2004.
No i zostało to również poprawnie sparsowane, jak widzisz, tutaj nam został zwrócony obiekt daty, na który możemy
pracować, tak jak ci przed momentem pokazałem, czyli czasami taką datę, bez problemu, możemy tutaj przekazać
i później w inny sposób sformatować.
Warto, abyś zapamiętał, że te metody, które tutaj są, to nie są wszystkie metody dostępne na obiekcie date,
ale to są te najważniejsze. Wszystkie z nich znajdziesz w dokumentacji do której zamieszczę link, a opis
tych które są tutaj i jeszcze kilku innych, zamieszcz dla Ciebie w PDF'ie więc korzystaj z tej ściągawki,
którą przygotuje do wszystkich lekcji, które są w tym kursie.
Kod
Obiekt Date · 1 min
var d = new Date();
var d2 = new Date(12312413123);
var d3 = new Date(2015, 0, 16, 12, 23, 55, 989);
// console.log( d3.getFullYear() ); // rok
// console.log( d3.getMonth() ); // miesiąc
// console.log( d3.getDate() ); // dzień
// console.log( d3.getHours() ); // godzina
// console.log( d3.getMinutes() ); // minuty
// console.log( d3.getMilliseconds() ); // ms
// console.log( d3.getDay() ); // dzień tygodnia
// console.log( d3.getTime() );
console.log( d3.toString() );
console.log( d3.toLocaleString() );
console.log( d3.getDate() + "." + (d3.getMonth() + 1) + "." + d3.getFullYear() );
d3.setFullYear(2020);
console.log( d3.getFullYear() );
var d4 = new Date("Fri Jan 16 2015 12:23:55 GMT+0100 (CET)");