Úvod
Datum a čas jsou nejen kritickými součástmi běžného života, ale také součástí počítačového programování. Ať už je potřebujete k rezervaci schůzek nebo k zobrazení kalendáře, existuje mnoho důvodů, proč byste datum a čas potřebovali. Využití funkcí data a času je rozsáhlé a mimořádně všestranné. Všestrannost vyplývá ze skutečnosti, že čas a datum můžete nakonfigurovat na základě uživatele. Každý uživatel v jiné zeměpisné poloze získá jiný výsledek na základě svého časového pásma. Tyto funkce se používají pro webové stránky s rozhraním pro schůzky a rezervačními systémy, jako jsou restaurace.
Programátoři často používají JavaScript k přidání funkcí data a času na své webové stránky. Je to proto, že JavaScript již má vestavěnou funkci pro tyto aspekty. V tomto návodu se podrobněji podíváme na Date objekt. Budeme hovořit o metodách, které můžete použít ke konfiguraci ideálního nastavení data a času na vašem webu. Probereme také, jak můžete změnit formát a další.
Co je to objekt Date?
Jak jsme právě zmínili, JavaScript má vestavěnou funkci pro datum a čas. Nazývá se Date objekt. Tento objekt vám umožňuje měnit a spravovat přidružená data pro datum a čas. Když vytvoříte instanci pro Date, vytvoří se nový objekt. Tento objekt odpovídá nastavení data a času vašeho počítače v daném okamžiku.
Pro lepší pochopení fungování tohoto objektu si uveďme příklad. Nejprve vytvoříme proměnnou. Poté jí přiřadíme dané datum. Předpokládejme, že je středa a datum je 18. října v londýnském časovém pásmu (GMT). Podívejte se na tuto konfiguraci:
|
1 2 3 4 |
// Nastavit proměnnou na aktuální datum a čas const now = new Date(); // Zobrazit výstup Now; |
|
1 2 3 |
Výstup Wed Oct 18 2017 12:41:34 GMT+0000 (UTC) |
Náš výstup zobrazuje řetězec data. Skládá se z následujících údajů:
| Den v týdnu | Měsíc | Den | Rok | Hodina | Minuta | Sekunda | Časové pásmo |
| Wed | Oct | 18 | 2017 | 12 | 41 | 34 | GMT+0000 (UTC) |
JavaScript přijímá data prostřednictvím časového razítka. Toto časové razítko pochází z unixového času. Jedná se o hodnotu, která ukazuje počet milisekund, které uplynuly od půlnoci 1. ledna 1970. Uživateli se datum zobrazuje ve srozumitelném formátu. Pokud chcete získat toto časové razítko, musíte použít metodu getTime() následovně:
|
1 2 3 |
// Získat aktuální časové razítko now.getTime(); |
|
1 2 3 |
Výstup 1508330494000 |
I když tato hodnota vypadá matoucí, představuje stejnou věc jako řetězec data. Je to jednoduše 18. říjen 2017.
Co je to epochální čas?
Dalším konceptem, který se naučíme, je epochální čas. Nazývá se také nulový čas. Lépe ho pochopíte jako datový řetězec
01 leden, 1970 00:00:00 univerzální čas (UTC) a 0 časové razítko. Chcete-li to otestovat, vytvořte novou proměnnou. Poté ji přiřaďte k nové instanci
Date na 0 časovém razítku:
|
1 2 3 4 5 |
// Přiřadit časové razítko 0 do nové proměnné const epochTime = new Date(0); epochTime; |
|
1 2 3 |
Výstup 01 leden, 1970 00:00:00 univerzální čas (UTC) |
Epochální čas býval pro programátory standardem. Je to také metoda, kterou JavaScript používá k měření času.
Formáty pro vytváření data v JavaScriptu
Nyní, když víme, jak vytvořit novou instanci Date pomocí řetězce a časového razítka, můžeme si promluvit o různých formátech. Existují čtyři formáty, které jsou podrobně popsány následovně:
To znamená, že podle potřeby můžete uvést konkrétní data a časy. Můžete také jednoduše použít datový řetězec nebo časové razítko, jak jsme diskutovali dříve. Pro pochopení se podíváme na to, jak vytvořit nové objekty Date třemi různými způsoby. Předpokládejme, že naše datum a čas je 4. července 1776 ve 12:30 GMT:
|
1 2 3 4 5 6 7 8 |
// Metoda časového razítka new Date(-6106015800000); // Metoda řetězce data new Date("July 4 1776 12:30"); // Metoda data a času new Date(1776, 6, 4, 12, 30, 0, 0); |
Jak vidíte, všechny tři metody vracejí jako výstup stejné datum. Jedním rozdílem je, že pokud používáte čas před počátkem epochy (Epoch time), časové razítko se zobrazí se záporným číslem. Navíc sekundy a milisekundy jsou v metodě data a času standardně nastaveny na 0. Pokud zapomenete zadat číslo, bude také standardně nastaveno na 0.
Dalším matoucím aspektem je, že červenec je reprezentován číslem 6 namísto 7. Je to proto, že číslování začíná od 0. Mějte to na paměti, až budete vytvářet instance.
Použití příkazu get k získání data
Nyní, když je datum nastaveno, se podívejme, jak můžete přistupovat k jeho částem. Jedním ze způsobů je použít příkaz get . Tato tabulka ukazuje všechny get metody pro objekt Date :
V tomto příkladu přiřadíme nové datum do nové proměnné, 31. července 1980:
|
1 2 |
// Inicializace nové instance narozenin const birthday = new Date(1980, 6, 31); |
Takto by to vypadalo, kdybyste pomocí této metody získali všechny jednotlivé složky data:
|
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 (pro GMT) |
V některých situacích můžete potřebovat pouze určitou část data. K tomu můžete použít tyto metody. Zde je návod, jak můžete otestovat, zda je 3. října:
|
1 2 3 4 5 6 7 8 |
// Získat dnešní datum const today = new Date(); // Porovnat dnešek s 3. říjnem if (today.getDate() === 3 && today.getMonth() === 9) { console.log("Je 3. října."); } else { console.log("Není 3. října."); } |
|
1 2 3 |
Výstup To'není 3. října. 3rd. |
To je výstup, který byste dostali, kdyby datum nebylo 3. října a vy jste ho testovali.
Použití příkazu set k úpravě data
Podobně jako u příkazů get máte k dispozici jejich protějšky set . Tento příkaz vám umožňuje měnit složky data. Tato tabulka ukazuje všechny metody:
Řekněme, že chceme změnit proměnnou birthday z 1997 na 1980:
|
1 2 3 |
// Změnit rok data narození birthday.setFullYear(1997); birthday; |
|
1 2 3 |
Výstup Thu Jul 31 1997 00:00:00 GMT+0000 (UTC) |
Nyní náš výstup ukazuje nový rok. Podobně můžete upravit i ostatní složky data.
Metody data UTC v JavaScriptu
Pokud extrahujete složky data pomocí metody get , získáte je na základě místního nastavení systému časového pásma uživatele. Případně jej můžete nakonfigurovat tak, aby počítal čas na základě standardu UTC. UTC znamená koordinovaný světový čas (Coordinated Universal Time). Můžete to provést pomocí metody getUTC . Tato tabulka ukazuje všechny metody UTC pro objekt Date v JavaScriptu:
Jak vidíte, všechny metody jsou podobné příkazům get . Výstupy by se však lišily. Rozdíl můžete otestovat pomocí tohoto kódu:
|
1 2 3 4 5 6 |
// Přiřadit aktuální čas do proměnné const now = new Date(); // Vypsat místní a UTC časová pásma console.log(now.getHours()); console.log(now.getUTCHours()); |
Tento kód vám ukáže aktuální hodinu a také hodinu v časovém pásmu UTC. Čísla budou stejná, pokud se již nacházíte v časovém pásmu UTC. Důvodem, proč byste měli používat UTC, je to, že umožňuje konzistenci napříč mezinárodními pásmy a regiony.
Závěr
Probrali jsme různé metody pro Date objekt v tomto tutoriálu. To zahrnovalo způsob, jak získat komponenty data pomocí get a jak je upravit pomocí set. Prozkoumali jsme také časová pásma UTC a jak je používat v JavaScriptu.
JavaScript má nakonec spoustu vestavěných funkcí pro datum a čas. Díky tomu je programování složitých webových stránek docela jednoduché. Více o funkcích data a času v JavaScriptu si můžete přečíst na Mozilla Developer Network. Tento tutoriál by vám však měl pomoci pokrýt základy.
Zde jsou další zdroje z našeho blogu které vám usnadní programování v JavaScriptu:
- JavaScript: návod, jak indexovat, rozdělovat a manipulovat s řetězci
- Práce s JavaScriptem: Jak fungují prototypy a dědičnost
- Průvodce přidáním JavaScriptu do HTML
- Přehled formátu pro sdílení dat JSON
Příjemné programování!
Komentáře
Zatím žádné komentáře. Buďte první.