Εισαγωγή
Η ημερομηνία και η ώρα δεν είναι μόνο κρίσιμα στοιχεία της καθημερινής ζωής αλλά και μέρος του προγραμματισμού υπολογιστών. Είτε τα χρειάζεστε για να κλείσετε ραντεβού είτε για να εμφανίσετε ένα ημερολόγιο, υπάρχουν πολλοί λόγοι για τους οποίους θα χρειαζόσασταν ημερομηνία και ώρα. Οι εφαρμογές των δυνατοτήτων ημερομηνίας και ώρας είναι εκτενείς και εξαιρετικά ευέλικτες. Η ευελιξία προέρχεται από το γεγονός ότι μπορείτε να διαμορφώσετε την ώρα και την ημερομηνία με βάση τον χρήστη. Κάθε χρήστης σε διαφορετική γεωγραφική τοποθεσία θα έχει διαφορετικό αποτέλεσμα με βάση τη ζώνη ώρας του. Αυτές οι δυνατότητες χρησιμοποιούνται για ιστότοπους με διεπαφές ραντεβού και συστήματα κρατήσεων, όπως εστιατόρια.
Οι προγραμματιστές χρησιμοποιούν συχνά τη JavaScript για να προσθέσουν τις δυνατότητες ημερομηνίας και ώρας στον ιστότοπό τους. Αυτό συμβαίνει επειδή η JavaScript διαθέτει ήδη μια ενσωματωμένη δυνατότητα για αυτές τις πτυχές. Σε αυτό το σεμινάριο, εμείς θα εξερευνήσουμε το Date αντικείμενο με περισσότερες λεπτομέρειες. Θα μιλήσουμε για τις μεθόδους που μπορείτε να χρησιμοποιήσετε για να διαμορφώσετε τις ιδανικές ρυθμίσεις για την ημερομηνία και την ώρα στον ιστότοπό σας. Θα καλύψουμε επίσης πώς μπορείτε να αλλάξετε τη μορφή και πολλά άλλα.
Τι είναι το αντικείμενο Date;
Όπως μόλις αναφέραμε, η JavaScript διαθέτει μια ενσωματωμένη δυνατότητα για την ημερομηνία και την ώρα. Ονομάζεται Date αντικείμενο. Αυτό το αντικείμενο σας επιτρέπει να αλλάζετε και να διαχειρίζεστε τα σχετικά δεδομένα για την ημερομηνία και την ώρα. Όταν δημιουργείτε ένα στιγμιότυπο για το Date, δημιουργείται ένα νέο αντικείμενο. Αυτό το αντικείμενο αντιστοιχεί στις ρυθμίσεις ημερομηνίας και ώρας του υπολογιστή σας εκείνη τη στιγμή.
Για να κατανοήσετε καλύτερα τη λειτουργία αυτού του αντικειμένου, ας δούμε ένα παράδειγμα. Θα δημιουργήσουμε πρώτα μια μεταβλητή. Στη συνέχεια, θα της εκχωρήσουμε μια δεδομένη ημερομηνία. Ας υποθέσουμε ότι η ημέρα είναι Τετάρτη και η ημερομηνία είναι 18 Οκτωβρίου στη ζώνη ώρας του Λονδίνου (GMT). Ρίξτε μια ματιά σε αυτήν τη διαμόρφωση:
|
1 2 3 4 |
// Ορισμός μεταβλητής στην τρέχουσα ημερομηνία και ώρα const now = new Date(); // Προβολή του αποτελέσματος Now; |
|
1 2 3 |
Έξοδος Wed Oct 18 2017 12:41:34 GMT+0000 (UTC) |
Το αποτέλεσμά μας δείχνει μια συμβολοσειρά ημερομηνίας. Αποτελείται από τα ακόλουθα δεδομένα:
| Ημέρα της εβδομάδας | Μήνας | Ημέρα | Έτος | Ώρα | Λεπτό | Δευτερόλεπτο | Ζώνη ώρας |
| Wed | Oct | 18 | 2017 | 12 | 41 | 34 | GMT+0000 (UTC) |
Η JavaScript λαμβάνει τα δεδομένα μέσω μιας χρονοσφραγίδας. Αυτή η χρονοσφραγίδα προέρχεται από την ώρα Unix. Αυτή είναι μια τιμή που δείχνει τον αριθμό των χιλιοστών του δευτερολέπτου που έχουν παρέλθει από την 1η Ιανουαρίου 1970 τα μεσάνυχτα. Στον χρήστη, η ημερομηνία εμφανίζεται σε κατανοητή μορφή. Εάν θέλετε να λάβετε αυτήν τη χρονοσφραγίδα, πρέπει να χρησιμοποιήσετε τη μέθοδο getTime() με αυτόν τον τρόπο:
|
1 2 3 |
// Λήψη της τρέχουσας χρονοσφραγίδας now.getTime(); |
|
1 2 3 |
Έξοδος 1508330494000 |
Αν και αυτή η τιμή φαίνεται μπερδεμένη, αντιπροσωπεύει το ίδιο πράγμα με τη συμβολοσειρά ημερομηνίας. Είναι απλώς η 18η Οκτωβρίου 2017.
Τι είναι ο χρόνος Epoch;
Η επόμενη έννοια που πρέπει να μάθετε είναι ο χρόνος epoch. Ονομάζεται επίσης μηδενικός χρόνος. Μπορείτε να τον κατανοήσετε καλύτερα ως τη συμβολοσειρά δεδομένων
01 Ιανουάριος, 1970 00:00:00 Παγκόσμιος Χρόνος (UTC) και τη 0 χρονοσφραγίδα. Για να το δοκιμάσετε, δημιουργήστε μια νέα μεταβλητή. Στη συνέχεια, εκχωρήστε την σε ένα νέο στιγμιότυπο
Date σε μια 0 χρονοσφραγίδα:
|
1 2 3 4 5 |
// Εκχώρηση της χρονοσφραγίδας 0 σε μια νέα μεταβλητή const epochTime = new Date(0); epochTime; |
|
1 2 3 |
Έξοδος 01 Ιανουάριος, 1970 00:00:00 Παγκόσμιος Χρόνος (UTC) |
Ο χρόνος Epoch αποτελούσε το πρότυπο για τους προγραμματιστές. Είναι επίσης η μέθοδος που χρησιμοποιεί η JavaScript για τη μέτρηση του χρόνου.
Μορφές για τη δημιουργία ημερομηνίας στη JavaScript
Τώρα που γνωρίζουμε πώς να δημιουργούμε ένα νέο στιγμιότυπο Date με μια συμβολοσειρά και χρονοσφραγίδα, μπορούμε να μιλήσουμε για τις διαφορετικές μορφές. Υπάρχουν τέσσερις μορφές οι οποίες αναλύονται ως εξής:
Αυτό σημαίνει ότι είναι δυνατό για εσάς να αναφέρετε συγκεκριμένες ημερομηνίες και ώρες όπως απαιτείται. Μπορείτε επίσης απλά να χρησιμοποιήσετε μια συμβολοσειρά δεδομένων ή χρονοσφραγίδα όπως συζητήσαμε προηγουμένως. Για την κατανόησή σας, θα παρατηρήσουμε πώς να δημιουργήσετε νέα αντικείμενα Date με τρεις διαφορετικούς τρόπους. Υποθέτοντας ότι η ημερομηνία και η ώρα μας είναι 4 Ιουλίου 1776 στις 12:30 μ.μ. GMT:
|
1 2 3 4 5 6 7 8 |
// Μέθοδος Timestamp new Date(-6106015800000); // Μέθοδος συμβολοσειράς ημερομηνίας new Date("July 4 1776 12:30"); // Μέθοδος ημερομηνίας και ώρας new Date(1776, 6, 4, 12, 30, 0, 0); |
Όπως μπορείτε να δείτε, και οι τρεις μέθοδοι δίνουν την ίδια ημερομηνία ως αποτέλεσμα. Μια διαφορά είναι ότι εάν χρησιμοποιείτε χρόνο πριν από τον χρόνο Epoch, η χρονική σήμανση θα εμφανίζεται με αρνητικό αριθμό. Επιπλέον, τα δευτερόλεπτα και τα χιλιοστά του δευτερολέπτου είναι 0 από προεπιλογή στη μέθοδο ημερομηνίας και ώρας. Εάν ξεχάσετε να εισαγάγετε έναν αριθμό, τότε θα οριστεί επίσης σε 0 ως προεπιλογή.
Μια άλλη πτυχή που προκαλεί σύγχυση είναι ότι ο Ιούλιος αναπαρίσταται με το 6 αντί για το 7. Αυτό συμβαίνει επειδή η αρίθμηση ξεκινά από το 0. Έχετε αυτά υπόψη σας όταν δημιουργείτε τα στιγμιότυπα.
Using the get Command to Retrieve the Date
Now that the date is set, let’s see how you can access its components. One way is to use the get command. This table shows all the get methods for the Date object:
Σε αυτό το παράδειγμα, θα εκχωρήσουμε μια νέα ημερομηνία σε μια νέα μεταβλητή, 31 Ιουλίου 1980:
|
1 2 |
// Αρχικοποίηση ενός νέου στιγμιότυπου γενεθλίων const birthday = new Date(1980, 6, 31); |
Έτσι θα φαινόταν αν επρόκειτο να λάβετε όλα τα επιμέρους στοιχεία της ημερομηνίας χρησιμοποιώντας αυτήν τη μέθοδο:
|
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 (για GMT) |
Σε ορισμένες περιπτώσεις, μπορεί να χρειαστείτε μόνο ένα συγκεκριμένο μέρος της ημερομηνίας. Μπορείτε να χρησιμοποιήσετε αυτές τις μεθόδους για να το κάνετε αυτό. Δείτε πώς μπορείτε να κάνετε δοκιμή για να επιβεβαιώσετε εάν είναι 3 Οκτωβρίου:
|
1 2 3 4 5 6 7 8 |
// Λήψη της σημερινής ημερομηνίας const today = new Date(); // Σύγκριση της σημερινής ημέρας με την 3η Οκτωβρίου if (today.getDate() === 3 && today.getMonth() === 9) { console.log("Είναι 3 Οκτωβρίου."); } else { console.log("Δεν είναι 3 Οκτωβρίου."); } |
|
1 2 3 |
Αποτέλεσμα Δεν'είναι 3η Οκτωβρίου . |
Αυτό είναι το αποτέλεσμα που θα παίρνατε εάν η ημερομηνία δεν ήταν 3 Οκτωβρίου και κάνατε δοκιμή με αυτήν.
Using the set Command to Modify the Date
Similar to the get commands, you have the set command counterparts. This command lets you modify the date components. This table shows all of the methods:
Let’s say we want to change the variable birthday from 1997 to 1980:
|
1 2 3 |
// Αλλαγή έτους της ημερομηνίας γενεθλίων birthday.setFullYear(1997); birthday; |
|
1 2 3 |
Αποτέλεσμα Thu Jul 31 1997 00:00:00 GMT+0000 (UTC) |
Τώρα το αποτέλεσμα δείχνει το νέο έτος. Μπορείτε παρομοίως να τροποποιήσετε και άλλα στοιχεία της ημερομηνίας.
Μέθοδοι ημερομηνίας UTC στη JavaScript
If you extract the date components using the get method, you will receive them based on the local system settings of the user’s timezone. Alternatively, you can configure it to calculate the time based on the UTC standard. UTC stands for Coordinated Universal Time. You can do this using the getUTC method. This table shows all the UTC methods for the Date object in JavaScript:
As you can see, all the methods are similar to the get commands. However, outputs would be different. You can test the difference with this code:
|
1 2 3 4 5 6 |
// Εκχώρηση της τρέχουσας ώρας σε μια μεταβλητή const now = new Date(); // Εκτύπωση τοπικής ζώνης ώρας και ζώνης ώρας UTC console.log(now.getHours()); console.log(now.getUTCHours()); |
Αυτός ο κώδικας θα σας δείξει την τρέχουσα ώρα καθώς και την ώρα στη ζώνη ώρας UTC. Οι αριθμοί θα είναι οι ίδιοι εάν βρίσκεστε ήδη στη ζώνη ώρας UTC. Ο λόγος για τον οποίο θα χρησιμοποιούσατε το UTC είναι ότι επιτρέπει τη συνέπεια μεταξύ των διεθνών ζωνών και περιοχών.
Συμπέρασμα
Καλύψαμε τις διάφορες μεθόδους για το Date αντικείμενο σε αυτό το σεμινάριο. Αυτό περιλάμβανε τον τρόπο ανάκτησης των στοιχείων της ημερομηνίας με get και πώς να τα τροποποιήσετε με set. Εξερευνήσαμε επίσης τις ζώνες ώρας UTC και πώς να τις χρησιμοποιήσετε στη JavaScript.
Τελικά, η JavaScript διαθέτει ένα σωρό ενσωματωμένες δυνατότητες για την ημερομηνία και την ώρα. Αυτό καθιστά τον προγραμματισμό σύνθετων ιστότοπων αρκετά απλό. Μπορείτε να διαβάσετε περισσότερα σχετικά με τις δυνατότητες ημερομηνίας και ώρας της JavaScript στο Mozilla Developer Network. Ωστόσο, αυτό το σεμινάριο θα πρέπει να σας βοηθήσει να καλύψετε τις βασικές σας γνώσεις όσον αφορά τα θεμελιώδη στοιχεία.
Ακολουθούν περισσότεροι πόροι από το ιστολόγιό μας που θα κάνουν τον προγραμματισμό με JavaScript ευκολότερο:
- JavaScript: ένας οδηγός για τον τρόπο ευρετηρίασης, διαχωρισμού και χειρισμού συμβολοσειρών
- Δουλεύοντας με τη JavaScript: Πώς λειτουργούν τα πρωτότυπα και οι κληρονομικότητες
- Ένας οδηγός για την προσθήκη JavaScript σε HTML
- Μια επισκόπηση της μορφής κοινής χρήσης δεδομένων JSON
Καλό προγραμματισμό!
Σχόλια
Δεν υπάρχουν σχόλια ακόμα. Γράψτε το πρώτο.