JS / التاريخ و الوقت

الناشر :كودا فوكس -

التاريخ و الوقت

معرفة التاريخ و الوقت

جافاسكربت توفر النوع Date و الذي يمكن استخدامه للحصول على التاريخ و الوقت الحالي.
هذا النوع يتم التعامل معه و كأنه كلاس عادي و هو يحتوي على الكثير من الدوال الجاهزة التي يمكن استخدامها لتعديل و عرض التاريخ.

JS - التاريخ و الوقت


في هذا الدرس ستتعلم كيفية الحصول التاريخ و الوقت من خلال النوع Date، و ستتعرف على جميع الدوال الموجودة فيه.

النوع Date متاح منذ الإصدار الأول للغة جافاسكربت، من قبل أن تدعم النوع class حتى و لكنه مُعد ليتم التعامل معه على أنه كذلك.

التوقيت المحلي و التوقيت العالمي

التوقيت المحلي ( Local Date ) هو التاريخ و الوقت الذي يظهر في جهاز المستخدم تبعاً للموقع الجغرافي الذي حدده بنفسه أو الذي تم تحديده بشكل تلقائي له نسبةً لموقعه الجغرافي الحالي.

التوقيت العالمي ( Coordinated Universal Time ) هو التاريخ و الوقت الذي يتم تحديده تبعاً لخطوط الطول على الكرة الأرضية. نقطة الصفر في هذا التوقيت هي عند خط الطول الذي تقع فيه بلدة تسمى جرينتش، فمثلاً توقيت نيويورك بالنسبة له يكون UTC-4 مما يعني أنه متأخر عنه 4 ساعات، في حين أن توقيت السعودية بالنسبة له هو UTC+3 مما يعني أنه متقدم عنه 3 ساعات.

عند الحاجة لمعرفة فارق التوقيت بين دولتين نعتمد على التوقيت العالمي، فعلى سبيل المثال عندما تكون الساعة هي 6 مساءاً في السعودية فهذا يعني أن الساعة هي 11 صباحاً في نيويورك.

بالمناسبة النوع Date يوفر لنا دوال جاهزة للتعامل مع التاريخ و الوقت سواء على الصعيد المحلي و على الصعيد العالمي.

طريقة إنشاء كائن Date

يمكنك اتباع أي طريقة من الطرق التالية لإنشاء كائن من النوع Date.

📋
new Date()
new Date(milliseconds)
new Date(stringDate)
new Date(year, month)
new Date(year, month, day)
new Date(year, month, day, [hours, minutes, seconds, ms])
  • في حال لم تمرر أي قيمة في الكونستركتور فهذا يعني أنه سيتم إنشاء كائن يحتوي على التاريخ و الوقت الحالي.
  • مكان البارميتر milliseconds يمكنك تمرير عدد أجزاء الثانية من بعد التاريخ 1/1/1970 مع الإشارة إلى أن كل 1000 يساوي ثانية واحدة.
  • مكان البارميتر stringDate يمكنك تمرير التاريخ على شكل نص بشرط أن يكون يتبع أسلوب مقبول بالنسبة للدالة Date.parse().
  • مكان البارميتر year يجب تمرير عدد يتكون من 4 أرقام ليمثل رقم السنة التي سيتم إنشاء التاريخ لأجلها.
  • مكان البارميتر month يجب تمرير عدد ليمثل رقم الشهر في السنة.
  • مكان البارميتر day يجب تمرير عدد ليمثل رقم اليوم بالنسبة للشهر.
  • hours هو باراميتر إختياري مكانه يمكن تمرير عدد بين 0 و 23 ليمثل الساعة بنظام 24 ساعة في اليوم.
  • minutes هو باراميتر إختياري مكانه يمكن تمرير عدد بين 0 و 59 ليمثل عدد الدقائق في الساعة.
  • seconds هو باراميتر إختياري مكانه يمكن تمرير عدد بين 0 و 59 ليمثل عدد الثواني في الدقيقة.
  • ms هو باراميتر إختياري مكانه يمكن تمرير عدد يمثل أجزاء الثانية التالية، حيث أن كل 1000 يمثل ثانية إضافية.

جميع الباراميترات الموضوعة بين [ ] هي باراميترات إختيارية خاصة لتحديد الوقت مما يعني أنه يمكنك تمرير بعضها، أو تمريرها كلها أو تجاهلها بالكامل.


في المثال التالي قمنا بإنشاء كائن نوعه Date يمثل التاريخ الحالي.

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <script>
		// يمثل التاريخ و الوقت الحالي date و إسمه Date هنا قمنا بإنشاء كائن نوعه
		let date = new Date();

		// date هنا قمنا بعرض التاريخ و الوقت الموجود في الكائن
		document.write(date);
    </script>
</body>
</html>

في المثال التالي قمنا بإنشاء كائن نوعه Date يمثل التاريخ من عام 1970/1/1 مضافاً إليه 5 ثواني.

المثال الثاني

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <script>
		// يمثل التاريخ و الوقت من عام 1970/1/1 مضافاً إليه 5 ثواني date و إسمه Date هنا قمنا بإنشاء كائن نوعه
		let date = new Date(5000);

		// date هنا قمنا بعرض التاريخ و الوقت الموجود في الكائن
		document.write(date);
    </script>
</body>
</html>

في المثال التالي قمنا بإنشاء كائن نوعه Date يمثل التاريخ و الوقت الذي تم تمريره له على شكل نص.

المثال الثالث

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <script>
		// يمثل التاريخ و الوقت الذي تم تمريره كنص له date و إسمه Date هنا قمنا بإنشاء كائن نوعه
		let date = new Date('Thu Feb 03 2020 02:00:05');

		// date هنا قمنا بعرض التاريخ و الوقت الموجود في الكائن
		document.write(date);
    </script>
</body>
</html>

في المثال التالي قمنا بإنشاء كائن نوعه Date يمثل التاريخ و الوقت ابتداءاً من أول شهر مايو في عام 2020.

المثال الرابع

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <script>
		// يمثل التاريخ و الوقت ابتداءاً من أول شهر مايو في عام 2020 date و إسمه Date هنا قمنا بإنشاء كائن نوعه
		let date = new Date(2020, 5);

		// date هنا قمنا بعرض التاريخ و الوقت الموجود في الكائن
		document.write(date);
    </script>
</body>
</html>

في المثال التالي قمنا بإنشاء كائن نوعه Date يمثل التاريخ و الوقت ابتداءاً من اليوم العاشر في شهر مايو من عام 2020.

المثال الخامس

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <script>
		// يمثل التاريخ و الوقت ابتداءاً من اليوم العاشر في شهر مايو في عام 2020 date و إسمه Date هنا قمنا بإنشاء كائن نوعه
		let date = new Date(2020, 5, 10);

		// date هنا قمنا بعرض التاريخ و الوقت الموجود في الكائن
		document.write(date);
    </script>
</body>
</html>

في المثال التالي قمنا بإنشاء كائن نوعه Date مع تحديد الوقت و التاريخ الذي يمثله بالتفصيل حيث أنه يمثل عام 2020، الشهر 5 (أي مايو)، اليوم 10، الساعة 7 صباحاً، الدقيقة 30، الثواني 6 بالإضافة إلى مرور 200 جزء من الثانية القادمة.

المثال السادس

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <script>
		// مع تحديد التاريخ و الوقت الذي يمثله بدقة date و إسمه Date هنا قمنا بإنشاء كائن نوعه
		let date = new Date(2020, 5, 10, 7, 30, 6, 200);

		// date هنا قمنا بعرض التاريخ و الوقت الموجود في الكائن
		document.write(date);
    </script>
</body>
</html>

دوال التوقيت المحلي و العالمي

دوال النوع Date غالباً يوجد منها نسخة خاصة للتوقيت المحلي و نسخة خاصة للتوقيت العالمي.

دوال التوقيت العالمي تكون بنفس إسم دوال التوقيت المحلي مضافاً إليها كلمة UTC فقط.

الإختلاف بين القيم التي ترجعها الدوال المخصصة للتوقيت المحلي و الدوال المخصصة للتوقيت العالمي تلاحظه بشكل عام حين يكون الفارق بين عدد الساعات كبير.


الجدول التالي يتضمن جميع الدوال الثابتة في النوع Date.

الدالة و تعريفها
1 Date.now() ترجع عدد أجزاء الثواني الموجودة من تاريخ 1970/1/1 إلى التاريخ و الوقت الحالي في جهاز المستخدم.
2 Date.parse(stringDate) تقرأ التاريخ الذي نمرره لها على شكل مكان الباراميتر stringDate و من ثم ترجع عدد أجزاء الثواني الموجودة من تاريخ 1970/1/1 إلى التاريخ و الوقت الذي يمثله.
3 Date.UTC(year, [month, day, hours, minutes, seconds, milliseconds]) ترجع عدد أجزاء الثواني الموجودة من تاريخ 1970/1/1 UTC إلى التاريخ الذي نحدده فيها.
  • year هو باراميتر إجباري مكانه نمرر رقم السنة.
  • month هو باراميتر إختياري مكانه يمكن تمرير رقم الشهر و الأصل أن يكون عدد بين 0 و 11.
  • day هو باراميتر إختياري مكانه يمكن تمرير رقم اليوم و الأصل أن يكون عدد بين 1 و 31.
  • hours هو باراميتر إجباري مكانه نمرر عدد الساعات و الأصل أن يكون عدد بين 0 و 23.
  • minutes هو باراميتر إختياري مكانه يمكن تمرير عدد الدقائق و الأصل أن يكون بين 0 و 59.
  • seconds هو باراميتر إختياري مكانه يمكن تمرير عدد الثواني و الأصل أن يكون بين 0 و 59.
  • milliseconds هو باراميتر إختياري مكانه يمكن تمرير عدد أجزاء الثواني التالية و الأصل أن يكون بين 0 و 999.

الجدول التالي يتضمن دوال النوع Date التي يمكن استدعاءها من كائن مشتق منه.

الدالة و تعريفها
1 getDate() - getUTCDate() ترجع عدد بين 1 و 31 يمثل رقم اليوم بالنسبة للشهر الحالي في التاريخ الذي يمثله الكائن Date الذي تم استدعاءها منه.
2 getFullYear() - getUTCFullYear() ترجع عدد يمثل رقم السنة في التاريخ الذي يمثله الكائن Date الذي تم استدعاءها منه.
3 getMonth() - getUTCMonth() ترجع عدد بين 0 و 11 يمثل رقم الشهر بالنسبة للسنة الحالية في التاريخ الذي يمثله الكائن Date الذي تم استدعاءها منه.
ملاحظة: الشهر رقم 0 يشير لأول شهر في السنة، أي شهر يناير أو كانون الثاني.
4 getDay() - getUTCDay() ترجع عدد بين 0 و 6 يمثل رقم اليوم بالنسبة للأسبوع الحالي في التاريخ الذي يمثله الكائن Date الذي تم استدعاءها منه.
ملاحظة: اليوم رقم 0 يشير ليوم الأحد و هو يعتبر أول يوم في الأسبوع.
5 getHours() - getUTCHours() ترجع عدد بين 0 و 23 يمثل كم هي الساعة في التاريخ الذي يمثله الكائن Date الذي تم استدعاءها منه.
6 getMinutes() - getUTCMinutes() ترجع عدد بين 0 و 59 يمثل كم هي الدقيقة في التاريخ الذي يمثله الكائن Date الذي تم استدعاءها منه.
7 getSeconds() - getUTCSeconds() ترجع عدد بين 0 و 59 يمثل كم هي الثانية في التاريخ الذي يمثله الكائن Date الذي تم استدعاءها منه.
8 getMilliseconds() - getUTCMilliseconds() ترجع عدد بين 0 و 999 يمثل كم عدد أجزاء الثانية الإضافية في التاريخ الذي يمثله الكائن Date الذي تم استدعاءها منه.
9 getTime() ترجع عدد أجزاء الثانية الموجودة من تاريخ 1970/1/1 إلى التاريخ الذي يمثله الكائن Date الذي تم استدعاءها منه.
10 setFullYear(year, [month, day]) - setUTCFullYear(year, [month, day]) تستخدم لتحديث السنة، الشهر و اليوم في التاريخ الذي يمثله الكائن Date الذي قام باستدعائها.
  • year هو باراميتر إجباري مكانه نمرر رقم السنة.
  • month هو باراميتر إختياري مكانه يمكن تمرير رقم الشهر و الأصل أن يكون عدد بين 0 و 11.
  • day هو باراميتر إختياري مكانه يمكن تمرير رقم اليوم و الأصل أن يكون عدد بين 1 و 31.
11 setMonth(month, [day]) - setUTCMonth(month, [day]) تستخدم لتحديث الشهر و اليوم في التاريخ الذي يمثله الكائن Date الذي قام باستدعائها.
  • month هو باراميتر إجباري مكانه نمرر رقم الشهر و الأصل أن يكون عدد بين 0 و 11.
  • day هو باراميتر إختياري مكانه يمكن تمرير رقم اليوم و الأصل أن يكون عدد بين 1 و 31.
12 setDate(day) - setUTCDate(day) تستخدم لتحديث عدد الأيام في التاريخ الذي يمثله الكائن Date الذي قام باستدعائها.
مكان الباراميتر day نمرر لها عدد الأيام الذي سيتم إضافته أو إنقاصه من التاريخ.
13 setHours(hours, [minutes, seconds, milliseconds]) - setUTCHours(hours, [minutes, seconds, milliseconds]) تستخدم لتحديث الساعة، الدقائق، الثواني و أجزاء الثواني التالية في التاريخ الذي يمثله الكائن Date الذي قام باستدعائها.
  • hours هو باراميتر إجباري مكانه نمرر عدد الساعات و الأصل أن يكون عدد بين 0 و 23.
  • minutes هو باراميتر إختياري مكانه يمكن تمرير عدد الدقائق و الأصل أن يكون بين 0 و 59.
  • seconds هو باراميتر إختياري مكانه يمكن تمرير عدد الثواني و الأصل أن يكون بين 0 و 59.
  • milliseconds هو باراميتر إختياري مكانه يمكن تمرير عدد أجزاء الثواني التالية و الأصل أن يكون بين 0 و 999.
14 setMinutes(minutes, [seconds, milliseconds]) - setUTCMinutes(minutes, [seconds, milliseconds]) تستخدم لتحديث الدقائق، الثواني و أجزاء الثواني التالية في التاريخ الذي يمثله الكائن Date الذي قام باستدعائها.
  • minutes هو باراميتر إجباري مكانه يجب تمرير عدد الدقائق و الأصل أن يكون بين 0 و 59.
  • seconds هو باراميتر إختياري مكانه يمكن تمرير عدد الثواني و الأصل أن يكون بين 0 و 59.
  • milliseconds هو باراميتر إختياري مكانه يمكن تمرير عدد أجزاء الثواني التالية و الأصل أن يكون بين 0 و 999.
15 setSeconds(seconds, [milliseconds]) - setUTCSeconds(seconds, [milliseconds]) تستخدم لتحديث الثواني و أجزاء الثواني التالية في التاريخ الذي يمثله الكائن Date الذي قام باستدعائها.
  • seconds هو باراميتر إجباري مكانه يجب تمرير عدد الثواني و الأصل أن يكون بين 0 و 59.
  • milliseconds هو باراميتر إختياري مكانه يمكن تمرير عدد أجزاء الثواني التالية و الأصل أن يكون بين 0 و 999.
16 setMilliseconds(milliseconds) - setUTCMilliseconds(milliseconds) تستخدم لتحديث أجزاء الثواني التالية في التاريخ الذي يمثله الكائن Date الذي قام باستدعائها.
مكان الباراميتر milliseconds نمرر لها عدد أجزاء الثواني التالية و الأصل أن يكون بين 0 و 999.
17 setTime(milliseconds) - setUTCTime(milliseconds) تستخدم لتحديث التاريخ الذي يمثله الكائن Date الذي قام باستدعائها مع اعتبار أنه سيبدأ من تاريخ 1970/1/1.
مكان الباراميتر milliseconds نمرر لها عدد أجزاء الثواني التي سيتم إضافتها أو إنقاصها من التاريخ، و هنا كل 1000 يساوي ثانية واحدة.
18 getTimezoneOffset() ترجع عدد صحيح يمثل عدد الدقائق الفارقة ما بين خط غرينيتش و المنطقة الزمنية المحددة في التاريخ الذي قام باستدعائها.
إليك بعض الأمثلة:
  • الوقت المحدد على المنطقة الزمنية UTC-2 يعطينا 120- دقيقة.
  • الوقت المحدد على المنطقة الزمنية UTC-1 يعطينا 60- دقيقة.
  • الوقت المحدد على المنطقة الزمنية UTC يعطينا 0 دقيقة.
  • الوقت المحدد على المنطقة الزمنية UTC+1 يعطينا 60 دقيقة.
  • الوقت المحدد على المنطقة الزمنية UTC+2 يعطينا 120 دقيقة إلخ..
19 toDateString() ترجع التاريخ الموجود في الكائن Date الذي قام باستدعائها على شكل نص.
20 toTimeString() ترجع الوقت الموجود في الكائن Date الذي قام باستدعائها على شكل نص.
21 toString() ترجع التاريخ و الوقت الموجود في الكائن Date الذي قام باستدعائها على شكل نص.
22 toISOString() ترجع التاريخ و الوقت الموجود في الكائن Date الذي قام باستدعائها على شكل نص يتكون من 24 حرف و يعتمد الفورمات 'YYYY-MM-DDTHH:mm:ss.sssZ' أو 27 حرف و يعتمد الفورمات '±YYYYYY-MM-DDTHH:mm:ss.sssZ'
23 toUTCString() - toGMTString() ترجع التاريخ و الوقت الموجود في الكائن Date الذي قام باستدعائها على شكل نص يعتمد الفورمات 'Www, dd Mmm yyyy hh:mm:ss GMT'
24 toJSON() ترجع التاريخ و الوقت الموجود في الكائن Date الذي قام باستدعائها على شكل نص
ملاحظة: فورمات النص هو نفسه الفورمات المستخدم في الدالة toISOString().
25 valueOf() ترجع عدد أجزاء الثانية الموجودة من تاريخ 1970/1/1 إلى التاريخ الذي يمثله الكائن Date الذي قام باستدعائها.
ملاحظة: لا يوجد أي إختلاف بين هذه الدالة و الدالة getTime().
26 toLocaleString([locales, options]) ترجع نسخة من التاريخ و الوقت الموجود في الكائن Date الذي قام باستدعائها بشكل محدد.
  • locales هو باراميتر إختياري مكانه يمكن تمرير نص يمثل اللغة التي سيتم عرض التاريخ و الوقت بها.
  • options هو باراميتر إختياري مكانه يمكن تمرير كائن يحدد أسلوب عرض التاريخ و الوقت، هل سيتم ذكر كل التفاصيل، أم سيتم وضعها بشكل مختصر، أم سيتم عرض أشياء محددة منها فقط.
27 toLocaleDateString([locales, options]) ترجع نسخة من التاريخ الموجود في الكائن Date الذي قام باستدعائها بشكل محدد.
  • locales هو باراميتر إختياري مكانه يمكن تمرير نص يمثل اللغة التي سيتم عرض التاريخ بها.
  • options هو باراميتر إختياري مكانه يمكن تمرير كائن يحدد أسلوب عرض التاريخ، هل سيتم ذكر كل التفاصيل، أم سيتم وضعها بشكل مختصر، أم سيتم عرض أشياء محددة منه فقط.
28 toLocaleTimeString([locales, options]) ترجع نسخة من الوقت الموجود في الكائن Date الذي قام باستدعائها بشكل محدد.
  • locales هو باراميتر إختياري مكانه يمكن تمرير نص يمثل اللغة التي سيتم عرض الوقت بها.
  • options هو باراميتر إختياري مكانه يمكن تمرير كائن يحدد أسلوب عرض الوقت، هل سيتم ذكر كل التفاصيل، أم سيتم وضعها بشكل مختصر، أم سيتم عرض أشياء محددة منه فقط.
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال