تاریخ و زمان در جاوا اسکریپت

با سلام، در این قسمت قصد آشنایی با مبحث تاریخ و زمان در جاوا اسکریپت را داریم.

خروجی تاریخ و زمان

جاوا اسکریپت به طور پیش فرض از محدوده ی زمانی (time zone) مرورگر کاربر برای نمایش تاریخ استفاده می کند و آن را به صورت یک رشته ی کامل نشان می دهد:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p id="demo"></p>

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

خروجی این کد رشته ی زیر خواهد بود:

Tue Jan 29 2019 15:21:47 GMT+0330 (Iran Standard Time)

البته با توجه به این که زمان سیستم و مرورگر شما روی ایران تنظیم شده باشد، در غیر این صورت این رشته برای شما فرق خواهد کرد. در رابطه با انواع حالت های نمایش تاریخ و زمان در جاوا اسکریپت در آینده بیشتر صحبت خواهیم کرد. فعلا همین را به عنوان آشنایی در ذهن داشته باشید.

ساخت شیء تاریخ در جاوا اسکریپت

اشیاء تاریخ در جاوا اسکریپت با استفاده از دستور ()new Date ساخته می شوند که یک constructor است. بر اساس این دستور چهار روش برای ساخت شیء تاریخ وجود دارد:

روش اول:

new Date()

روش دوم:

new Date(year, month, day, hours, minutes, seconds, milliseconds)

روش سوم:

new Date(milliseconds)

روش چهارم:

new Date(date string)

در ادامه به توضیح هر چهار مورد خواهیم پرداخت.

دستور ()new Date

دستور ()new Date یک شیء تاریخ می سازد که تاریخ و زمان آن روی زمان حال تنظیم شده اند. به عبارت دیگر هر زمان از این شیء خروجی بگیرید زمان حال را به شما برمیگرداند:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>Using new Date(), creates a new date object with the current date and time:</p>

<p id="demo"></p>

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

خروجی کد برای من عبارت زیر خواهد بود:

Tue Jan 29 2019 15:28:22 GMT+0330 (Iran Standard Time)

نکته: اشیاء تاریخ در جاوا اسکریپت استاتیک هستند؛ بدین معنی که ساعت و تاریخ سیستم شما به روز می شوند و جلو میروند اما این اشیاء بدین صورت نیستند. آن ها همان لحظه ی خروجی گرفتن را نگه می دارند و دیگر آپدیت نمی کنند.

دستور (... ,Date (year, month

این دستور یک شیء تاریخی را با زمان و تاریخ خاص می سازد. هفت عددی (پارامتری) که این تابع می گیرد به ترتیب عبارت اند از سال، ماه، روز، ساعت، دقیقه، ثانیه و میلی ثانیه. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>Using new Date(7 numbers), creates a new date object with the specified date and time:</p>

<p id="demo"></p>

<script>
var d = new Date(2018, 11, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

خروجی این کد رشته ی زیر خواهد بود:

Mon Dec 24 2018 10:33:30 GMT+0330 (Iran Standard Time)

می بینید که تاریخ و ساعت را خودمان تعیین کردیم (متعلق به یک سال پیش، سال 2018)

نکته ی مهم: جاوا اسکریپت شمارش ماه ها را از صفر شروع می کند بنابراین ماه ژانویه (اولین ماه سال میلادی) می شود ماه شماره 0 و ماه دسامبر (آخرین ماه سال میلادی) می شود ماه شماره 11.

تمامی پارامتر های 7 گانه ای که بالاتر توضیح دادیم اختیاری هستند به غیر از ماه و سال. اگر فقط یک پارامتر به این تابع بدهید، به جای سال، به عنوان میلی ثانیه با آن برخورد خواهد شد. انواع این حالت ها را در مثال های زیر می بینید:

حالت 6 پارامتری که می شود سال، ماه، روز، ساعت، دقیقه، ثانیه:

var d = new Date(2018, 11, 24, 10, 33, 30);

حالت 5 پارامتری که می شود سال، ماه، روز، ساعت، دقیقه:

var d = new Date(2018, 11, 24, 10, 33);

حالت 4 پارامتری که می شود سال، ماه، روز، ساعت:

var d = new Date(2018, 11, 24, 10);

حالت 3 پارامتری که می شود سال، ماه، روز:

var d = new Date(2018, 11, 24);

حالت 2 پارامتری که می شود سال، ماه:

var d = new Date(2018, 11);

همانطور که گفته شد اگر تنها یک پارامتر به تابع بدهید، به عنوان میلی ثانیه محاسبه می شود:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>One parameter will be interpreted as new Date(milliseconds).</p>

<p id="demo"></p>

<script>
var d = new Date(2018);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

خروجی این کد رشته ی زیر خواهد بود:

Thu Jan 01 1970 03:30:02 GMT+0330 (Iran Standard Time)

این محاسبه چطور انجام شد؟

بسیاری از زبان های برنامه نویسی یک تاریخ و زمان مبدا دارند که تاریخ برایشان از آن جا شروع می شود. برای زبان های PHP و JavaScript این زمان روی اولین روز ماه ژانویه سال 1970 تنظیم شده است. حال کاری که ما کردیم این است که 2018 را به عنوان یک پارامتر تنها به آن پاس داده ایم، بنابراین دیگر سال 2018 در نظر گرفته نمی شود بلکه تبدیل به 2018 میلی ثانیه می شود که یعنی 2.18 ثانیه (هر ثانیه هزار میلی ثانیه است). بنابراین دو ثانیه از زمان مبدا جلوتر می رود و می شود 03:30:02 !

شاید بپرسید چنین چیزی به چه درد می خورد؟ در آینده در این مورد بیشتر صحبت خواهیم کرد و از فایده هایش خواهیم گفت اما بدانید که این سیستم محاسبه ی تاریخ و زمان برای جاوا اسکریپت است و نیازی نیست که به خودی خود و مستقیما به کار ما بیاید.

شما می توانید خروجی کد بالا را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید و با کد و پارامتر های آن بازی کنید تا کاملا متوجه نحوه ی عملکرد آن بشوید:

کد اصلی:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>One parameter will be interpreted as new Date(milliseconds).</p>

<p id="demo"></p>

<script>
var d = new Date(2018);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

مشاهده ی خروجی در ادیتور آنلاین جاوا اسکریپت

در این قسمت به صورت ابتدایی با نحوه ی کار زمان و تاریخ در جاوا اسکریپت آشنا شدیم و نگاهی به عنصر اصلی تاریخ یعنی شیء Date انداختیم. در قسمت بعدی با نکات بیشتری پیرامون زمان و تاریخ در جاوا اسکریپت آشنا خواهیم شد.

با سلام،

در قسمت قبلی با مباحثی از شیء تاریخ و زمان در جاوا اسکریپت آشنا شدیم و پارامتر های مختلف آن را بررسی کردیم:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>Using new Date(7 numbers), creates a new date object with the specified date and time:</p>

<p id="demo"></p>

<script>
var d = new Date(2018, 11, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

در این قسمت به سراغ مباحث بیشتری در رابطه با تاریخ و زمان خواهیم رفت.

قرن قبل (سال های 19xx)

اگر در تابع تاریخ و زمان جاوا اسکریپت (مثال بالا) برای سال، مقادیر دو عددی در نظر بگیرید (مثلا 99) جاوا اسکریپت فرض را بر این میگیرد که در حال صحبت از قرن قبل (سال های 19xx) هستید. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>Two digit years will be interpreted as 19xx:</p>

<p id="demo"></p>

<script>
var d = new Date(99, 11, 24);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

خروجی این کد رشته ی زیر خواهد بود:

Fri Dec 24 1999 00:00:00 GMT+0330 (Iran Standard Time)

و همچنین:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>One digit years will be interpreted as 19xx:</p>

<p id="demo"></p>

<script>
var d = new Date(9, 11, 24);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

خروجی این کد رشته ی زیر خواهد بود:

Fri Dec 24 1909 00:00:00 GMT+0325 (Iran Standard Time)

دستور (Date(dateString

دستور (new Date(dateString از یک رشته ی تاریخی (data string) یک شیء تاریخی می سازد. رشته های تاریخی در واقع رشته هایی هستند که یک زمان مشخص را در خود دارند. در این رابطه در جلسات بعدی بیشتر صحبت خواهیم کرد اما فعلا یک مثال را بررسی می کنیم:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>A Date object can be created with a specified date and time:</p>

<p id="demo"></p>

<script>
var d = new Date("October 13, 2014 11:13:00");
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

خروجی این کد رشته ی زیر خواهد بود:

Mon Oct 13 2014 11:13:00 GMT+0330 (Iran Standard Time)

این رشته ها دارای فرمت خاصی هستند و نمی توان بدون حساب و کتاب آن ها را نوشت. در ضمن برای استفاده از تاریخ های شمسی یا قمری نیز باید از راهکار های خاصی استفاده کنید که در جلسات بعدی در موردشان صحبت خواهیم کرد.

ذخیره ی زمان در جاوا اسکریپت

جاوا اسکریپت تاریخ را به صورت تعداد میلی ثانیه های سپری شده از اول ژانویه ی 1970 و ساعت 00:00:00 UTC ذخیره می کند. در واقع تاریخِ صفر برای جاوا اسکریپت مساوی است با:

January 01, 1970 00:00:00 UTC

در این لحظه که من این خط را می نویسم 1548766359526 میلی ثانیه از روز اول ژانویه ی 1970 می گذرد و همین طور پیش می رود.

دستور (Date(milliseconds

اگر از این ساختار (یعنی یک پارامتر به صورت میلی ثانیه) برای دستور Date استفاده کنید تعداد میلی ثانیه های سپری شده از تاریخ ورودی شما نسبت به تاریخ صفر (بالاتر توضیح داده شد) را بر میگرداند. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>Using new Date(milliseconds), creates a new date object as January 1, 1970, 00:00:00 Universal Time (UTC) plus the milliseconds:</p>

<p id="demo"></p>

<script>
var d = new Date(0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

کد بالا می گوید صفر میلی ثانیه پس از تاریخ صفر چه زمانی است؟ مشخصا خود تاریخ صفر. بنابراین رشته ی خروجی به شکل زیر خواهد بود:

Thu Jan 01 1970 03:30:00 GMT+0330 (Iran Standard Time)

سوال: مگر نگفتیم که تاریخ صفر از ساعت 00:00:00 محاسبه می شود. چرا در اینجا ساعت 03:30:00 به ما برگردانده شده است؟

پاسخ: ما در ایران هستیم و منطقه ی زمانی ما بر اساس GMT روی 3:30+ تنظیم شده است بنابراین برای ما که در ایران هستیم 3 ساعت و نیم به ساعت صفر اضافه می شود.

مثال دیگر: 000 000 000 100 میلی ثانیه پس از تاریخ صفر چه زمانی است؟

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>100000000000 milliseconds from Jan 1, 1970, is approximately Mar 3, 1973:</p>

<p id="demo"></p>

<script>
var d = new Date(100000000000);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

رشته ی خروجی ما به صورت زیر خواهد بود:

Sat Mar 03 1973 13:16:40 GMT+0330 (Iran Standard Time)

میبینید که این تاریخ می شود 3 مارس سال 1973.

سوال: اگر بخواهیم به قبل از سال 1970 اشاره کنیم چطور؟

پاسخ: باید تاریخ را منفی بدهید:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>100000000000 milliseconds from Jan 1, 1970, is approximately Oct 31, 1966:</p>

<p id="demo"></p>

<script>
var d = new Date(-100000000000);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

پارامتر ما 100000000000- است که می شود سال 1966 و رشته ی خروجی ما به شکل زیر خواهد بود:

Mon Oct 31 1966 17:43:20 GMT+0330 (Iran Standard Time)

می توانید این کد را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید و مقادیر مختلف را به پارامتر بدهید تا با نحوه ی کار آن به طور کامل آشنا شوید. به طور مثال یک روز مساوی با 86400000 میلی ثانیه است!

اگر با روال آموزش ما آشنا باشید حتما از خودتان میپرسید آیا زمان ها نیز متد های خودشان را دارند؟ جواب ما بله است. در قسمت های بعدی به سراغ متد های مربوط به کار با تاریخ و زمان جاوا اسکریپت نیز خواهیم رفت.

نمایش تاریخ و ساعت

جاوا اسکریپت به طور پیش فرض تاریخ را به صورت رشته ای و کامل نمایش می دهد. مثل:

Wed Mar 25 2015 04:30:00 GMT+0430 (Iran Daylight Time)

اشیاء تاریخ چطور؟ نیازی نیست نگران آن ها باشید. اشیاء تاریخ در هنگام ورود به HTML به صورت خودکار به رشته تبدیل می شوند. بنابراین هر دو کد زیر یکی هستند:

d = new Date();
document.getElementById("demo").innerHTML = d;

d = new Date();
document.getElementById("demo").innerHTML = d.toString();

البته می توانید با استفاده از تابع ()toDateString تاریخ را به صورت بهتر و خواناتری نمایش دهید:

var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();

خروجی این دستور به جای اینکه به این شکل باشد:

Mon Oct 31 1966 17:43:20 GMT+0330 (Iran Standard Time)

به این شکل خواهد بود:

Tue Jan 29 2019

امیدوارم از این قسمت لذت برده باشید. در قسمت های بعدی مباحث تاریخ و زمان را ادامه خواهیم داد.

آشنایی با تاریخ و زمان در جاوا اسکریپت

خروجی تاریخ و زمان

ساخت شیء تاریخ در جاوا اسکریپت

دستور ()new Date

دستور (... ,Date (year, month

قرن قبل (سال های 19xx)

دستور (Date(dateString

ذخیره ی زمان در جاوا اسکریپت

دستور (Date(milliseconds

نمایش تاریخ و ساعت