آموزش جاوا اسکریپت – جلسه ۱۱ – تاریخ و زمان [Date & Time]

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

در این جلسه به معرفی یک آبجکت درونی (built-in) جاوا اسکریپت بنام Date می پردازیم. برای ذخیره تاریخ و زمان بکار می رود. از نمونه کاربردهایی که آبجکت Date می تواند داشته باشد: ذخیره زمان ایجاد یا تغییر چیزی، نمایش زمان جاری و…

نحوه تعریف نمونه جدید از آبجکت Date:

برای ایجاد یک نمونه جدید از آبجکت Date می توان از ()new Date استفاده کرد.

تعریف new Date بدون آرگومان ورودی:

اگر یک نمونه (instance) از آبجکت Date مانند کد زیر بدون آرگومان ورودی ایجاد کنیم، تاریخ و زمان جاری را بر می گرداند:

let now = new Date();
alert( now ); // shows current date/time

تعریف new Date(milliseconds):

برای ایجاد یک نمونه جدید از آبجکت Date با دقت زمانی میلی ثانیه (یک هزارم ثانیه) بکار می رود.
مثال:

// 0 means 01.01.1970 UTC+0
let Jan01_1970 = new Date(0);
alert( Jan01_1970 );

// now add 24 hours, get 02.01.1970 UTC+0
let Jan02_1970 = new Date(24 * 3600 * 1000);
alert( Jan02_1970 );

در این مثال عدد صحیح داخل Date بیانگر تعداد میلی ثانیه ای است که از ابتدای سال 1970 گذشته است. به آن timestamp گفته می شود.
تاریخ قبل از 01-01-1970 دارای timestamp منفی خواهد بود:

// 31 Dec 1969
let Dec31_1969 = new Date(-24 * 3600 * 1000);
alert( Dec31_1969 );

تعریف new Date(datestring):

اگر آرگومان ورودی Date بصورت رشته ای باشد بطور اتوماتیک parse خواهد شد:

let date = new Date("2017-01-26");
alert(date);
// The time is not set, so it's assumed to be midnight GMT and
// is adjusted according to the timezone the code is run in
// So the result could be
// Thu Jan 26 2017 11:00:00 GMT+1100 (Australian Eastern Daylight Time)
// or
// Wed Jan 25 2017 16:00:00 GMT-0800 (Pacific Standard Time)

تعریف new Date(year, month, date, hours, minutes, seconds, ms)

روش دیگر استفاده از Date در جاوا اسکریپت ایجاد یک نمونه از آبجکت Date به شکل فوق می باشد. تنها دو آرگومان اول اجباری هستند:

• year: باید 4 رقمی باشد. 1980 صحیح است اما مثلا 98 نادرست است.
• month: عدد ماه موردنظر می باشد. البته یکواحد کمتر. برای ژانویه عدد 0 و برای دسامبر عدد 11 تعریف می شود.
• date: بیانگر روز ماه است. اگر تعریف نشود برابر 1 تعریف می شود.
• hours/minutes/seconds/ms: اگر مقداری برای آن تعریف نشود برابر 0 در نظر گرفته می شود.

مثال:

let date = new Date(2011, 0, 1, 2, 3, 4, 567);
alert( date ); // 1.01.2011, 02:03:04.567

کامپوننت های آبجکت Date:

برای دسترسی به آیتم های سال، ماه و… می توان از متدهای زیر از آبجکت Date استفاده کرد:

• متد ()getFullYear: برای دریافت سال (یک عدد 4 رقمی)
• متد ()getMonth: برای دریافت ماه (یک عدد صحیح بین 0 تا 11)
• متد ()getDate: برای دریافت روز ماه (یک عدد صحیح بین 1 تا 31 می باشد)
• متدهای ()getHours(), getMinutes(), getSeconds(), getMilliseconds: برای دریافت ساعت، دقیقه، ثانیه و میلی‌ثانیه
• متد ()getDay: برای دریافت روز هفته (یک عدد صحیح بین 0 (sunday) تا 6 (saturday))
• متد ()getTime: برای دریافت تعداد میلی‌ثانیه گذشته از اول ژانویه سال 1970 میلادی
• متد ()getTimezoneOffset: برای دریافت تفاوت زمانی بین تاریخ-زمان استاندارد (UTC+0) و تاریخ-زمان محلی کاربر (مثلا تهران UTC +3.30)

نکته 1: برخی از توسعه دهندگان جاوا اسکریپت از متد getYear برای استخراج سال از شیء Date استفاده می کنند. خروجی این متد یک عدد صحیح دو رقمی است (مثلا 98) در نسخه های جدید جاوا اسکریپت منسوخ (deprecate) شده است و باید از متد ()getFullYear استفاده شود.

نکته 2: تمام متدهایی که در بالا ذکر کردیم کامپوننت مورد نظر را نسبت به تاریخ-زمان محلی (Local DateTime) ارائه می کنند. اگر می خواهید تاریخ-زمان جاری را با توجه به UTC+0 نمایش دهید فقط کافیست پس از get کلمه UTC را بنویسید:

// current date
let date = new Date();

// the hour in your current time zone
alert( date.getHours() );

// the hour in UTC+0 time zone (London time without daylight savings)
alert( date.getUTCHours() );

مثالی از متد ()getTimezoneOffset:

// if you are in timezone UTC-1, outputs 60
// if you are in timezone UTC+3, outputs -180
alert( new Date().getTimezoneOffset() );

Set کردن کامپوننت های Date:

متدهای زیر به شما امکان ست کردن کامپوننت های date/time را خواهند داد:

setFullYear(year, [month], [date])
setMonth(month, [date])
setDate(date)
setHours(hour, [min], [sec], [ms])
setMinutes(min, [sec], [ms])
setSeconds(sec, [ms])
setMilliseconds(ms)
setTime(milliseconds) 

نکته 1: تمام متدهای فوق (به غیر از setTime) را میتوان با عبارت UTC بکار برد. مثلا setUTCHours

نکته 2: همانطور که در فرمت متدها مشاهده کردید در بعضی از متدها می توان چند کامپوننت را ست کرد. مثلا در متد setHours می توان مقادیر ساعت، دقیقه، ثانیه و میلی‌ثانیه را set کرد.

بعنوان مثال:

let today = new Date();

today.setHours(0);
alert(today); // still today, but the hour is changed to 0

today.setHours(0, 0, 0, 0);
alert(today); // still today, now 00:00:00 sharp.

قابلیت تصحیح خودکار (Auto Correction):

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

let date = new Date(2013, 0, 32); // 32 Jan 2013 ?!?
alert(date); // ...is 1st Feb 2013!

در این مثال عدد 32 را بعنوان روز موردنظر تعریف کردیم. در حالیکه هر ماه فقط شامل 31 روز است. پس روز بعدی یعنی اول فوریه بعنوان تاریخ مورد نظر ما نمایش داده می شود.
بعنوان مثال بعدی فرض کنید می خواهیم دو روز به تاریخ Feb 2016 28 اضافه کنیم. آیا خروجی 2 مارس 2016 می شود یا 1 مارس ؟ در سال کبیسه پاسخ این سوال متفاوت خواهد بود. خبر خوش اینست که نیازی نیست نگران پاسخ این سوال باشید. زیرا خود جاوااسکریپت قضیه را مدیریت می کند و تاریخ صحیح را نمایش خواهد داد:

let date = new Date(2016, 1, 28);
date.setDate(date.getDate() + 2);

alert( date ); // 1 Mar 2016

در مثال دیگر می خواهیم 70 ثانیه پس از زمان جاری را نمایش دهیم:

let date = new Date();
date.setSeconds(date.getSeconds() + 70);

alert( date ); // shows the correct date

همچنین می توانیم از مقادیر 0 یا منفی بعنوان آرگومان استفاده کنیم:

let date = new Date(2016, 0, 2); // 2 Jan 2016

date.setDate(1); // set day 1 of month
alert( date );

date.setDate(0); // min day is 1, so the last day of the previous month is assumed
alert( date ); // 31 Dec 2015

تبدیل تاریخ به عدد (Date to Number):

وقتی یک آبجکت Date را به عدد تبدیل می کنیم به timestamp تبدیل می شود. مانند ()date.getTime

مثال:

let date = new Date();
alert(+date); // the number of milliseconds, same as date.getTime()

تایم ها می توانند از هم کم شوند (تفریق). در مواردی که می خواهیم یک بازه زمانی بین دو زمان را اندازه بگیریم کاربردی است:

let start = new Date(); // start measuring time

// do the job
for (let i = 0; i < 100000; i++) {
  let doSomething = i * i * i;
}

let end = new Date(); // end measuring time

alert( `The loop took ${end - start} ms` );

متد ()Date.now:

اگر می خواهیم در برنامه خود زمان جاری را نمایش دهیم نیازی به کار با آبجکت Date نداریم. بلکه می توان با فراخوانی متد now() روی آبجکت Date تایم کنونی را بدست آورد.
خروجی ()Date.now مانند ()new Date.getTime است با این تفاوت که سریع تر اجرا می شود.

اجرای متد Date.parse روی رشته:

متد Date.parse(str) می تواند یک تاریخ را از داخل رشته str بخواند و برگرداند. فرمت رشته باید بصورت YYYY-MM-DDTHH:mm:ss.sssZ باشد. که داریم:

• YYYY-MM-DD: مشخص کننده تاریخ است: روز-ماه-سال
• حرف ‘T’: بعنوان جداکننده است.
• HH:mm:ss.sss مشخص کننده میلی‌ثانیه-ثانیه-دقیقه-ساعت است.
• حرف اختیاری ‘Z’ : مشخص کننده منطقه زمانی است. حرف Z بیانگر منطقه زمانی UTC+0 است.

نکته 1: می توان تاریخ را به فرم خلاصه تری نوشت: مثلا YYYY-MM-DD یا YYYY-MM یا حتی YYYY

نکته 2: با فراخوانی Date.parse(str) می توان تعداد میلی‌ثانیه‌ای که از تاریخ 1-ژانوبه-1970 سپری شده را بدست آورد.

مثال:

let ms = Date.parse('2012-01-26T13:51:50.417-07:00');

alert(ms); // 1327611110417  (timestamp)

همچنین می توان یک آبجکت جدید تاریخ یعنی new Date را از روی timestamp ایجاد کنیم.

مثال:

let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') );

alert(date);

جلسه یازدهم در اینجا به پایان می رسد و در جلسه بعدی می خواهیم درباره رویدادهای ماوس یا Mouse events در جاوا اسکریپت توضیحاتی خدمتتان ارائه کنیم. با ما باشید…!