مقدمة
لا يقتصر دور التاريخ والوقت على كونهما مكونين أساسيين في الحياة اليومية فحسب، بل هما أيضاً جزء من برمجة الكمبيوتر. سواء كنت بحاجة إليهما لحجز المواعيد أو لعرض تقويم، فهناك العديد من الأسباب التي قد تجعلك بحاجة إلى التاريخ والوقت. إن تطبيقات ميزات التاريخ والوقت واسعة ومتعددة الاستخدامات للغاية. وتأتي هذه المرونة من حقيقة أنه يمكنك تكوين الوقت والتاريخ بناءً على المستخدم. سيحصل كل مستخدم في موقع جغرافي مختلف على نتيجة مختلفة بناءً على منطقته الزمنية. تُستخدم هذه الميزات في مواقع الويب التي تحتوي على واجهات للمواعيد وأنظمة حجز مثل المطاعم.
غالباً ما يستخدم المبرمجون جافا سكريبت لإضافة ميزات التاريخ والوقت إلى مواقعهم الإلكترونية. وذلك لأن جافا سكريبت تحتوي بالفعل على ميزة مدمجة لهذه الجوانب. في هذا الدرس، سوف نستكشف Date بالتفصيل. سنتحدث عن الطرق التي يمكنك استخدامها لتكوين الإعدادات المثالية للتاريخ والوقت على موقعك الإلكتروني. سنغطي أيضاً كيفية تغيير التنسيق والمزيد.
ما هو كائن Date؟
كما ذكرنا للتو، تحتوي جافا سكريبت على ميزة مدمجة للتاريخ والوقت. وتسمى 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) |
تتلقى جافا سكريبت البيانات من خلال طابع زمني. يأتي هذا الطابع الزمني من توقيت يونكس. هذه قيمة توضح عدد الميلي ثانية التي مرت منذ 1 يناير 1970 في منتصف الليل. بالنسبة للمستخدم، يظهر التاريخ بتنسيق مفهوم. إذا كنت ترغب في الحصول على هذا الطابع الزمني، فيجب عليك استخدام طريقة getTime() على النحو التالي:
|
1 2 3 |
// الحصول على الطابع الزمني الحالي now.getTime(); |
|
1 2 3 |
المخرجات 1508330494000 |
على الرغم من أن هذه القيمة تبدو مربكة، إلا أنها تمثل نفس الشيء مثل سلسلة التاريخ. إنها ببساطة 18 أكتوبر 2017.
ما هو وقت الحقبة (Epoch Time)؟
المفهوم التالي الذي يجب تعلمه هو وقت الحقبة (epoch time). ويسمى أيضاً وقت الصفر. يمكنك فهمه بشكل أفضل على أنه سلسلة البيانات
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 time) هو المعيار للمبرمجين. وهي أيضاً الطريقة التي تستخدمها جافا سكريبت لقياس الوقت.
تنسيقات إنشاء التاريخ في جافا سكريبت
الآن بعد أن عرفنا كيفية إنشاء نسخة Date جديدة باستخدام سلسلة وطابع زمني، يمكننا التحدث عن التنسيقات المختلفة. هناك أربعة تنسيقات مفصلة على النحو التالي:
هذا يعني أنه من الممكن لك تحديد تواريخ وأوقات معينة حسب الحاجة. يمكنك أيضاً ببساطة استخدام سلسلة بيانات أو طابع زمني كما ناقشنا من قبل. لفهمك، سنلاحظ كيفية إنشاء كائنات Date جديدة بثلاث طرق مختلفة. بفرض أن التاريخ والوقت لدينا هما 4 يوليو 1776 الساعة 12:30 مساءً بتوقيت جرينتش (GMT):
|
1 2 3 4 5 6 7 8 |
// طريقة الطابع الزمني new Date(-6106015800000); // طريقة سلسلة التاريخ new Date("July 4 1776 12:30"); // طريقة التاريخ والوقت new Date(1776, 6, 4, 12, 30, 0, 0); |
كما ترى، فإن الطرق الثلاث تعطي نفس التاريخ كمخرج. أحد الاختلافات هو أنه إذا كنت تستخدم وقتاً قبل وقت الحقبة (Epoch time)، فسيظهر الطابع الزمني برقم سالب. بالإضافة إلى ذلك، تكون الثواني والأجزاء من الثانية 0 افتراضياً في طريقة التاريخ والوقت. إذا نسيت إدخال رقم، فسيتم تعيينه إلى 0 كافتراضي أيضاً.
جانب آخر مربك هو أن شهر يوليو يتم تمثيله بالرقم 6 بدلاً من 7. وذلك لأن الترقيم يبدأ بـ 0. ضع هذه الأمور في الاعتبار عند إنشاء النسخ (instances).
باستخدام أمر get لاسترداد التاريخ
الآن بعد أن تم تعيين التاريخ، دعنا نرى كيف يمكنك الوصول إلى مكوناته. إحدى الطرق هي استخدام أمر get . يوضح هذا الجدول جميع طرق get الخاصة بكائن Date :
في هذا المثال، سنقوم بتعيين تاريخ جديد لمتغير جديد، وهو 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 (لتوقيت غرينتش) |
في بعض الحالات، قد تحتاج فقط إلى جزء معين من التاريخ. يمكنك استخدام هذه الطرق للقيام بذلك. إليك كيف يمكنك الاختبار للتأكد مما إذا كان اليوم هو 3 أكتوبر:
|
1 2 3 4 5 6 7 8 |
// الحصول على تاريخ اليوم const today = new Date(); // مقارنة اليوم بـ 3 أكتوبر if (today.getDate() === 3 && today.getMonth() === 9) { console.log("إنه الثالث من أكتوبر."); } else { console.log("ليس الثالث من أكتوبر."); } |
|
1 2 3 |
المخرجات ليس'هو 3 أكتوبر . |
هذه هي المخرجات التي ستحصل عليها إذا لم يكن التاريخ هو 3 أكتوبر واختبرت ذلك.
باستخدام أمر set لتعديل التاريخ
على غرار أوامر get ، لديك نظيراتها من أوامر set . يتيح لك هذا الأمر تعديل مكونات التاريخ. يوضح هذا الجدول جميع الطرق:
دعنا نقول أننا نريد تغيير المتغير birthday من 1997 إلى 1980:
|
1 2 3 |
// تغيير سنة تاريخ الميلاد birthday.setFullYear(1997); birthday; |
|
1 2 3 |
المخرجات الخميس يوليو 31 1997 00:00:00 GMT+0000 (UTC) |
الآن يظهر مخرجنا السنة الجديدة. يمكنك بالمثل تعديل المكونات الأخرى للتاريخ أيضاً.
طرق تاريخ UTC في JavaScript
إذا قمت باستخراج مكونات التاريخ باستخدام طريقة get ، فستتلقاها بناءً على إعدادات النظام المحلية للمنطقة الزمنية للمستخدم. بدلاً من ذلك، يمكنك تهيئتها لحساب الوقت بناءً على معيار UTC. يرمز UTC إلى التوقيت العالمي المنسق. يمكنك القيام بذلك باستخدام طريقة getUTC . يوضح هذا الجدول جميع طرق UTC لكائن Date في JavaScript:
كما ترى، فإن جميع الطرق مشابهة لأوامر get . ومع ذلك، ستكون المخرجات مختلفة. يمكنك اختبار الفرق باستخدام هذا الكود:
|
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
حوسبة سعيدة!
التعليقات
لا توجد تعليقات بعد. كن أول من يعلق.