Wprowadzenie
Data i czas są nie tylko kluczowymi elementami codziennego życia, ale także częścią programowania komputerowego. Niezależnie od tego, czy są potrzebne do rezerwacji spotkań, czy do wyświetlania kalendarza, istnieje wiele powodów, dla których możesz wymagać daty i czasu. Zastosowania funkcji daty i czasu są szerokie i niezwykle wszechstronne. Ta wszechstronność wynika z faktu, że można skonfigurować czas i datę w oparciu o użytkownika. Każdy użytkownik w innej lokalizacji geograficznej otrzyma inny wynik w zależności od swojej strefy czasowej. Funkcje te są używane na stronach internetowych z interfejsami do umawiania spotkań i systemami rezerwacji, takimi jak restauracje.
Programiści często używają JavaScriptu, aby dodać funkcje daty i czasu do swojej strony internetowej. Dzieje się tak, ponieważ JavaScript ma już wbudowaną funkcję dla tych aspektów. W tym samouczku przyjrzymy się bliżej Date obiektowi w dalszych szczegółach. Porozmawiamy o metodach, których można użyć do skonfigurowania idealnych ustawień daty i czasu na swojej stronie internetowej. Omówimy również, jak można zmienić format i nie tylko.
Czym jest obiekt Date?
Jak właśnie wspomnieliśmy, JavaScript ma wbudowaną funkcję dla daty i czasu. Nazywa się ona Date obiektem. Obiekt ten pozwala na zmianę i zarządzanie powiązanymi danymi dotyczącymi daty i czasu. Kiedy tworzysz instancję dla Date, tworzony jest nowy obiekt. Obiekt ten odpowiada ustawieniom daty i czasu Twojego komputera w danym momencie.
Aby lepiej zrozumieć działanie tego obiektu, rozważmy przykład. Najpierw utworzymy zmienną. Następnie przypiszemy jej określoną datę. Załóżmy, że dzień to środa, a data to 18 października w strefie czasowej Londynu (GMT). Spójrz na tę konfigurację:
|
1 2 3 4 |
// Ustaw zmienną na bieżącą datę i czas const now = new Date(); // Wyświetl wynik Now; |
|
1 2 3 |
Wynik Wed Oct 18 2017 12:41:34 GMT+0000 (UTC) |
Nasz wynik pokazuje ciąg znaków daty. Składa się on z następujących danych:
| Dzień tygodnia | Miesiąc | Dzień | Rok | Godzina | Minuta | Sekunda | Strefa czasowa |
| Wed | Oct | 18 | 2017 | 12 | 41 | 34 | GMT+0000 (UTC) |
JavaScript otrzymuje dane poprzez znacznik czasu (timestamp). Ten znacznik czasu pochodzi z czasu Unix. Jest to wartość, która pokazuje liczbę milisekund, jakie upłynęły od północy 1 stycznia 1970 roku. Dla użytkownika data pojawia się w zrozumiałym formacie. Jeśli chcesz uzyskać ten znacznik czasu, musisz użyć metody getTime() w ten sposób:
|
1 2 3 |
// Pobierz bieżący znacznik czasu now.getTime(); |
|
1 2 3 |
Wynik 1508330494000 |
Choć ta wartość wygląda na mylącą, reprezentuje to samo, co ciąg znaków daty. To po prostu 18 października 2017 roku.
Co to jest czas epoki (Epoch Time)?
Kolejnym pojęciem do nauki jest czas epoki. Nazywany jest on również czasem zerowym. Można go lepiej zrozumieć jako ciąg danych
01 Styczeń, 1970 00:00:00 Uniwersalny Czas (UTC) oraz 0 znacznik czasu. Aby to przetestować, utwórz nową zmienną. Następnie przypisz ją do nowej instancji
Date na 0 znaczniku czasu:
|
1 2 3 4 5 |
// Przypisz znacznik czasu 0 do nowej zmiennej const epochTime = new Date(0); epochTime; |
|
1 2 3 |
Wynik 01 Styczeń, 1970 00:00:00 Uniwersalny Czas (UTC) |
Czas epoki był kiedyś standardem dla programistów. Jest to również metoda, której JavaScript używa do mierzenia czasu.
Formaty tworzenia daty w JavaScript
Skoro już wiemy, jak utworzyć nową instancję Date za pomocą ciągu znaków i znacznika czasu, możemy porozmawiać o różnych formatach. Istnieją cztery formaty, które szczegółowo opisano poniżej:
Oznacza to, że w razie potrzeby można podać konkretne daty i godziny. Można również po prostu użyć ciągu danych lub znacznika czasu, jak omówiono wcześniej. Dla lepszego zrozumienia przyjrzymy się, jak tworzyć nowe obiekty Date na trzy różne sposoby. Zakładając, że nasza data i czas to 4 lipca 1776 roku o godzinie 12:30 GMT:
|
1 2 3 4 5 6 7 8 |
// Metoda znacznika czasu new Date(-6106015800000); // Metoda ciągu daty new Date("July 4 1776 12:30"); // Metoda daty i godziny new Date(1776, 6, 4, 12, 30, 0, 0); |
Jak widać, wszystkie trzy metody dają tę samą datę jako wynik. Jedną z różnic jest to, że jeśli używasz czasu sprzed czasu epoki (Epoch), znacznik czasu zostanie wyświetlony z liczbą ujemną. Dodatkowo, sekundy i milisekundy są domyślnie ustawione na 0 w metodzie daty i godziny. Jeśli zapomnisz wprowadzić liczbę, zostanie ona również domyślnie ustawiona na 0.
Innym mylącym aspektem jest to, że lipiec jest reprezentowany przez 6 zamiast 7. Dzieje się tak, ponieważ numeracja zaczyna się od 0. Pamiętaj o tym podczas tworzenia instancji.
Użycie get polecenia do pobrania daty
Skoro data jest już ustawiona, zobaczmy, jak można uzyskać dostęp do jej składników. Jednym ze sposobów jest użycie get polecenia. Ta tabela przedstawia wszystkie get metody dla obiektu Date :
W tym przykładzie przypiszemy nową datę do nowej zmiennej, 31 lipca 1980 roku:
|
1 2 |
// Inicjalizacja nowej instancji urodzin const birthday = new Date(1980, 6, 31); |
Tak by to wyglądało, gdybyś chciał pobrać wszystkie poszczególne składniki daty za pomocą tej metody:
|
1 2 3 4 5 6 7 8 9 |
birthday.getFullYear(); // 1980 birthday.getMonth(); // 6 birthday.getDate(); // 31 birthday.getDay(); // 4 birthday.getHours(); // 0 birthday.getMinutes(); // 0 birthday.getSeconds(); // 0 birthday.getMilliseconds(); // 0 birthday.getTime(); // 333849600000 (dla GMT) |
W niektórych sytuacjach możesz potrzebować tylko określonej części daty. Możesz do tego użyć tych metod. Oto jak możesz sprawdzić, czy dzisiaj jest 3 października:
|
1 2 3 4 5 6 7 8 |
// Pobierz dzisiejszą datę const today = new Date(); // Porównaj dzisiejszy dzień z 3 października if (today.getDate() === 3 && today.getMonth() === 9) { console.log("Jest 3 października."); } else { console.log("To nie jest 3 października."); } |
|
1 2 3 |
Wynik To'jest nie października 3. |
Taki wynik otrzymasz, jeśli data nie była 3 października i przeprowadziłeś test.
Użycie set polecenia do modyfikacji daty
Podobnie jak w przypadku poleceń get, masz do dyspozycji ich odpowiedniki set . To polecenie pozwala na modyfikację składników daty. Ta tabela przedstawia wszystkie metody:
Załóżmy, że chcemy zmienić zmienną birthday z 1997 na 1980:
|
1 2 3 |
// Zmień rok daty urodzenia birthday.setFullYear(1997); birthday; |
|
1 2 3 |
Wynik Thu Jul 31 1997 00:00:00 GMT+0000 (UTC) |
Teraz nasz wynik pokazuje nowy rok. W podobny sposób możesz modyfikować również inne składniki daty.
Metody daty UTC w JavaScript
Jeśli wyodrębnisz składniki daty za pomocą metody get, otrzymasz je na podstawie lokalnych ustawień systemowych strefy czasowej użytkownika. Alternatywnie możesz skonfigurować go tak, aby obliczał czas na podstawie standardu UTC. UTC oznacza uniwersalny czas koordynowany. Możesz to zrobić za pomocą metody getUTC. Ta tabela przedstawia wszystkie metody UTC dla obiektu Date w JavaScript:
Jak widać, wszystkie metody są podobne do poleceń get . Jednak wyniki będą się różnić. Możesz przetestować tę różnicę za pomocą tego kodu:
|
1 2 3 4 5 6 |
// Przypisz bieżący czas do zmiennej const now = new Date(); // Wyświetl lokalną i UTC strefę czasową console.log(now.getHours()); console.log(now.getUTCHours()); |
Ten kod pokaże Ci aktualną godzinę, jak również godzinę w strefie czasowej UTC. Liczby będą takie same, jeśli znajdujesz się już w strefie czasowej UTC. Powodem, dla którego warto używać UTC, jest to, że pozwala to na spójność między międzynarodowymi strefami i regionami.
Podsumowanie
Omówiliśmy różne metody dla Date obiektu w tym samouczku. Obejmowało to sposób pobierania składników daty za pomocą get oraz jak je modyfikować za pomocą set. Przyjrzeliśmy się również strefom czasowym UTC i temu, jak ich używać w języku JavaScript.
Ostatecznie JavaScript posiada mnóstwo wbudowanych funkcji do obsługi daty i czasu. Sprawia to, że programowanie skomplikowanych stron internetowych jest całkiem proste. Więcej o funkcjach daty i czasu w JavaScript możesz przeczytać na stronie Mozilla Developer Network. Jednak ten samouczek powinien pomóc Ci opanować podstawy.
Oto więcej zasobów z naszego bloga, które ułatwią programowanie w JavaScript:
- JavaScript: samouczek o tym, jak indeksować, dzielić i manipulować ciągami znaków
- Praca z JavaScript: jak działają prototypy i dziedziczenie
- Przewodnik po dodawaniu JavaScript do HTML
- Przegląd formatu wymiany danych JSON
Miłego programowania!
Komentarze
Brak komentarzy. Bądź pierwszy.