Introduzione
La data e l'ora non sono solo componenti fondamentali della vita quotidiana, ma anche parte della programmazione informatica. Che servano per prenotare appuntamenti o per visualizzare un calendario, ci sono molti motivi per cui potresti aver bisogno di data e ora. Le applicazioni delle funzionalità di data e ora sono ampie ed estremamente versatili. La versatilità deriva dal fatto che è possibile configurare l'ora e la data in base all'utente. Ogni utente in una posizione geografica diversa otterrà un risultato differente in base al proprio fuso orario. Queste funzionalità vengono utilizzate per siti web con interfacce di appuntamento e sistemi di prenotazione come i ristoranti.
I programmatori usano spesso JavaScript per aggiungere le funzionalità di data e ora al loro sito web. Questo perché JavaScript ha già una funzionalità integrata per questi aspetti. In questo tutorial, noi esploreremo l'oggetto Date in maggior dettaglio. Parleremo dei metodi che puoi utilizzare per configurare le impostazioni ideali per la data e l'ora sul tuo sito web. Copriremo anche come puoi cambiare il formato e altro ancora.
Cos'è l'oggetto Date?
Come abbiamo appena menzionato, JavaScript ha una funzionalità integrata per la data e l'ora. Si chiama oggetto Date . Questo oggetto consente di modificare e gestire i dati associati a data e ora. Quando crei un'istanza per l'oggetto Date, viene creato un nuovo oggetto. Questo oggetto corrisponde alle impostazioni di data e ora del tuo computer in quel momento.
Per comprendere meglio il funzionamento di questo oggetto, consideriamo un esempio. Per prima cosa creeremo una variabile. Poi le assegneremo una determinata data. Supponiamo che il giorno sia mercoledì e la data sia il 18 ottobre nel fuso orario di Londra (GMT). Dai un'occhiata a questa configurazione:
|
1 2 3 4 |
// Imposta la variabile sulla data e l'ora correnti const now = new Date(); // Visualizza l'output Now; |
|
1 2 3 |
Output Mer Ott 18 2017 12:41:34 GMT+0000 (UTC) |
Il nostro output mostra una stringa di data. Consiste dei seguenti dati:
| Giorno della settimana | Mese | Giorno | Anno | Ora | Minuto | Secondo | Fuso orario |
| Mer | Ott | 18 | 2017 | 12 | 41 | 34 | GMT+0000 (UTC) |
JavaScript riceve i dati tramite un timestamp. Questo timestamp proviene dal tempo Unix. Si tratta di un valore che mostra il numero di millisecondi trascorsi dal 1° gennaio 1970 a mezzanotte. Per l'utente, la data appare in un formato comprensibile. Se vuoi ottenere questo timestamp, devi usare il metodo getTime() in questo modo:
|
1 2 3 |
// Ottieni il timestamp corrente now.getTime(); |
|
1 2 3 |
Output 1508330494000 |
Sebbene questo valore possa sembrare confuso, rappresenta la stessa cosa della stringa della data. È semplicemente il 18 ottobre 2017.
Cos'è l'Epoch Time?
Il prossimo concetto da imparare è l'Epoch Time. Viene anche chiamato tempo zero. Puoi comprenderlo meglio come la stringa di dati
01 Gennaio, 1970 00:00:00 Tempo Universale (UTC) e il 0 timestamp. Per testarlo, crea una nuova variabile. Poi assegnala a una nuova istanza
Date su un 0 timestamp:
|
1 2 3 4 5 |
// Assegna il timestamp 0 a una nuova variabile const epochTime = new Date(0); epochTime; |
|
1 2 3 |
Output 01 Gennaio, 1970 00:00:00 Tempo Universale (UTC) |
L'Epoch Time era lo standard per i programmatori. È anche il metodo che JavaScript utilizza per misurare il tempo.
Formati per la creazione delle date in JavaScript
Ora che sappiamo come creare una nuova istanza Date con una stringa e un timestamp, possiamo parlare dei diversi formati. Ci sono quattro formati che sono dettagliati di seguito:
Questo significa che è possibile indicare date e ore specifiche in base alle esigenze. Puoi anche semplicemente utilizzare una stringa di dati o un timestamp como abbiamo discusso in precedenza. Per facilitare la comprensione, vedremo come creare nuovi oggetti Date in tre modi diversi. Supponendo che la nostra data e ora siano il 4 luglio 1776 alle 12:30 GMT:
|
1 2 3 4 5 6 7 8 |
// Metodo timestamp new Date(-6106015800000); // Metodo stringa data new Date("July 4 1776 12:30"); // Metodo data e ora new Date(1776, 6, 4, 12, 30, 0, 0); |
Come puoi vedere, tutti e tre i metodi restituiscono la stessa data come output. Una differenza è che se utilizzi un orario precedente all'ora Epoch, il timestamp verrà mostrato con un numero negativo. Inoltre, i secondi e i millisecondi sono impostati su 0 per impostazione predefinita nel metodo data e ora. Se dimentichi di inserire un numero, anche questo verrà impostato su 0 come valore predefinito.
Un altro aspetto che può confondere è che luglio è rappresentato da 6 invece che da 7. Questo perché la numerazione inizia da 0. Tieni a mente queste cose quando crei le istanze.
Utilizzo del get Comando per recuperare la data
Ora che la data è impostata, vediamo come puoi accedere ai suoi componenti. Un modo è utilizzare il get comando. Questa tabella mostra tutti i get metodi per l'oggetto Date :
In questo esempio, assegneremo una nuova data a una nuova variabile, il 31 luglio 1980:
|
1 2 |
// Inizializza una nuova istanza di compleanno const birthday = new Date(1980, 6, 31); |
Ecco come apparirebbe se dovessi ottenere tutti i singoli componenti della data utilizzando questo metodo:
|
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 (per GMT) |
In alcune situazioni, potresti aver bisogno solo di una determinata parte della data. Puoi usare questi metodi per farlo. Ecco come puoi verificare se è il 3 ottobre:
|
1 2 3 4 5 6 7 8 |
// Ottieni la data di oggi const today = new Date(); // Confronta oggi con il 3 ottobre if (today.getDate() === 3 && today.getMonth() === 9) { console.log("È il 3 ottobre."); } else { console.log("Non è il 3 ottobre."); } |
|
1 2 3 |
Output Non'è il 3 ottobre. |
Questo è l'output che otterresti se la data non fosse il 3 ottobre e facessi un test a riguardo.
Utilizzo del set Comando per modificare la data
In modo simile ai comandi get, sono disponibili le controparti del comando set . Questo comando consente di modificare i componenti della data. Questa tabella mostra tutti i metodi:
Supponiamo di voler modificare la variabile birthday da 1997 a 1980:
|
1 2 3 |
// Modifica l'anno della data del compleanno birthday.setFullYear(1997); birthday; |
|
1 2 3 |
Output Thu Jul 31 1997 00:00:00 GMT+0000 (UTC) |
Ora il nostro output mostra il nuovo anno. Allo stesso modo puoi modificare anche altri componenti della data.
Metodi di data UTC in JavaScript
Se estrai i componenti della data utilizzando il metodo get, li riceverai in base alle impostazioni di sistema locali del fuso orario dell'utente. In alternativa, puoi configurarlo per calcolare l'ora in base allo standard UTC. UTC sta per Coordinated Universal Time (Tempo coordinato universale). Puoi farlo utilizzando il metodo getUTC. Questa tabella mostra tutti i metodi UTC per l'oggetto Date in JavaScript:
Come puoi vedere, tutti i metodi sono simili ai comandi get . Tuttavia, gli output saranno diversi. Puoi testare la differenza con questo codice:
|
1 2 3 4 5 6 |
// Assegna l'ora corrente a una variabile const now = new Date(); // Stampa i fusi orari locale e UTC console.log(now.getHours()); console.log(now.getUTCHours()); |
Questo codice ti mostrerà l'ora corrente e l'ora nel fuso orario UTC. I numeri saranno gli stessi se ti trovi già nel fuso orario UTC. Il motivo per cui si utilizza l'UTC è che consente la coerenza tra fusi orari e regioni internazionali.
Conclusione
Abbiamo trattato i vari metodi per l'oggetto Date in questo tutorial. Questo include come recuperare i componenti della data con get e come modificarli con set. Abbiamo anche esplorato i fusi orari UTC e come utilizzarli in JavaScript.
In definitiva, JavaScript ha un'infinità di funzioni integrate per data e ora. Questo rende la programmazione di siti web complessi piuttosto semplice. Puoi leggere di più sulle funzioni di data e ora di JavaScript sul Mozilla Developer Network. Tuttavia, questo tutorial dovrebbe aiutarti a coprire le basi per quanto riguarda i concetti fondamentali.
Ecco altre risorse dal nostro blog che renderanno più facile la programmazione con JavaScript:
- JavaScript: un tutorial su come indicizzare, dividere e manipolare le stringhe
- Lavorare con JavaScript: come funzionano i prototipi e l'ereditarietà
- Una guida sull'aggiunta di JavaScript all'HTML
- Una panoramica sul formato di condivisione dei dati JSON
Buona programmazione!
Commenti
Ancora nessun commento. Scrivi il primo.