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

سلام بر دوستان عزیزم ...

امروز با مقاله ای دیگر از سری مقاله های آموزش طراحی سایت همراه شما هستیم. در این مقاله با هم و در کنار هم می آموزیم که چطور می توانیم متود dste در جاوا اسکریپت را بکار گرفته و تنظیمات لازم برای آن را نیز پیاده سازی کنیم...

شی date در جاوا اسکریپت

شی date در جاوا اسکریپت به برنامه نویس این امکان را می دهد که تاریخ و زمان را در صفحات وب مدیریت کند.

قالب یا فرمت زمان و تاریخ در جاوا اسکریپت

تاریخ را در جاوا اسکریپت می توان یا به صورت رشته (string) نوشت، مطابق دستور زیر :

Mon Jun 08 2015 16:06:13 GMT+0430 (Iran Daylight Time)

و یا آن را به صورت عدد قالب دهی کرده و نمایش داد.

1433763373015

نمایش تاریخ

در این بخش با استفاده از یک اسکریپت، تاریخ را درون المان با شناسه یا id "demo" نمایش می دهیم.

مثال 1 :

document.getElementById(&quotdemo&quot) = Date();

در این اسکریپت مقدار Date() به محتوای (innerHTML) المان با شناسه ی "demo" تخصیص داده می شود.

https://www.aparat.com/v/4gGj2

ایجاد شی date در آموزش طراحی سایت

شی date همان طور که پیشتر نیز ذکر شد امکان مدیریت و کار با تاریخ را فراهم می کند. تاریخ متشکل از سال، ماه، روز، ساعت، دقیقه، ثانیه و یک هزارم ثانیه می باشد. شی date با استفاده از سازنده new Date() ایجاد می گردد(منظور از سازنده همان constructor است). چهار روش مختلف برای راه اندازی و شروع تاریخ وجود دارد که به شرح زیر است :

new Date() 
        new Date(milliseconds) 
        new Date(dateString)
        new Date(year،‎ month،‎ day،‎ hours،‎ minutes،‎ seconds،‎ milliseconds)‎

سازنده یا constructor new Date() یک شی جدید date با زمان و تاریخ جاری ایجاد می کند.

مثال 2 :

    var d = new Date();
    document.getElementById(&quotdemo&quot) = d;

سازنده ی new Date(date string)، یک شی جدید date از تاریخ و زمان تعیین شده می سازد.

مثال 3 :

    var d = new Date(&quotOctober 13, 2014 11:13:00&quot);
    document.getElementById(&quotdemo&quot) = d;

سازنده یnew Date(number) یک شی جدید date از زمان صفر (zero time) محاسبه کرده و عدد مورد نظر را به آن اضافه می کند. منظور از زمان صفر / zero time در واقع یک ژانویه ی سال 1970 و ساعت هماهنگ جهانی UTC 00:00:00 می باشد. عدد مورد نظر بر حسب یک هزارم ثانیه مشخص می شود.

مثال 4 :

    var d = new Date(86400000);
document.getElementById(&quotdemo&quot) = d;

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

Fri Jan 02 1970 03:30:00 GMT+0330 (Iran Standard Time)‎

توجه : تمام محاسبات براساس میلی ثانیه با زمان شروع 00:00:00 01/01/1970 و طبق زمان جهانی (UTC) می باشد. یک روز شامل 86، 400، 000 میلی ثانیه است.

سازنده ی numbers)7new date (، یک شی جدید date با تاریخ و زمان مشخص شده ایجاد می کند. هفت رقم داخل پرانتز سال، ماه، ساعت، دقیقه، ثانیه و هزارم ثانیه را به همین ترتیب ذکر شده مشخص می کند.

مثال 5 :

    var d = new Date(99, 5, 24, 11, 33, 30, 0);
    document.getElementById(&quotdemo&quot) = d;

می توان چهار پارامتر پایانی را از حذف کرد.

مثال 6 :

    var d = new Date(99, 5, 24);
    document.getElementById(&quotdemo&quot) = d;

نکته : جاوا اسکریپت ماه ها را از 0 تا 11 می شمارد، بدین معنا که ژانویه 0 و دسامبر ماه 11 در نظر گرفته می شود.

متدهای شی date

هنگامی که یک شی date ایجاد می شود، متدهای جاوا اسکریپت به شما اجازه می دهند تعدادی عملیات معین روی آن انجام دهید. متدهای شی date قابلیت بدست آوردن و تنظیم (get & set) تاریخ و زمان را یا با زمان محلی و یا زمان جهانی فراهم می آورد.

نمایش تاریخ

هنگامی که یک شی date را در HTML نمایش می دهید، این شی به صورت خودکار و به وسلیه ی متد toString() به یک رشته تبدیل می شود.

مثال 7 :

< p id=&quotdemo&quot>< /p>
‎< script>
    d = new Date();
    document.getElementById(&quotdemo&quot) = d;
‎< /script>‎

که یکسان است با :

< script>
    var d = new Date();
    document.getElementById(&quotdemo&quot) = d.toString();
< /script>

متد toUTCString() یک تاریخ را به رشته ی UTC (یک استاندارد برای نمایش تاریخ) تبدیل می کند.

مثال 8 :

< script>
    var d = new Date();
    document.getElementById(&quotdemo&quot) = d.toUTCString();
< /script>

متد toDateString() یک تاریخ را به فرمت های خواناتری تبدیل می کند.

مثال 9 :

< script>
    var d = new Date();
    document.getElementById(&quotdemo&quot) = d.toDateString();
< /script>

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

Tue Jun 09 2015

توجه : شی date (از نوع) ایستا (static) است و نه پویا (dynamic)، بدین معنا که زمان و ساعت کامپیوتر همچنان تغییر می کند اما اشیا date به همان صورتی که اول ایجاد شدند باقی مانده و تغییر نمی کنند.

قالب های مختلف تنظیم تاریخ در جاوا اسکریپت

در کل سه فرمت مختلف تنظیم تاریخ در جاوا اسکریپت وجود دارد که به ترتیب زیر می باشد. ISO Dates (ایزو 8601 عناصر داده - قالب‌های تبادل - تبادل اطلاعات - نمایش تاریخ‌ها و زمان‌ها یک استاندارد بین المللی درباره تبادل داده‌های مرتبط با تاریخ و زمان است). 

Long Dates
Short Dates

ترکیب نحوی (syntax) ایزو 8601 (روز روز- ماه ماه – سال سال سال سال) نوین ترین و همچنین ارجح ترین روش برای نوشتن و فرمت دهی تاریخ محسوب می گردد.

مثال 10 :

< script>
    document.getElementById(&quotdemo&quot) = new Date(&quot2015-03-25&quot);
< /script>

و یا با ترکیب نحوی " ماه ماه – سال سال سال سال " بدین تریتب نوشت : 2014-12

مثال 11 :

< script>
    document.getElementById(&quotdemo&quot) = new Date(&quot2015-03&quot);
< /script>

و یا با ترکیب نحوی " سال سال سال سال " بدین ترتیب : 2014

مثال 12 :

document.getElementById(&quotdemo&quot) = new Date(&quot2015&quot);

و یا بدین ترتیب : 2014-12-24T12:00:00

مثال 13 :

document.getElementById(&quotdemo&quot) = new Date(&quot2015-03-25T12:00:00&quot);

توجه داشته باشید که T در رشته ی date در مثال بالا نشانگر ساعت هماهنگ جهانی یا همان UTC می باشد.

نکته : ساعت هماهنگ جهانی (UTC) و ساعت گرینویچ یا ساعت جهانی (GMT) هر دو یکسان هستند.

فرمت long date اغلب بدین ترتیب نگارش می شود : " سال سال سال سال روز روز ماه ماه ماه ". ترکیب نحوی این فرمت به شرح زیر می باشد.

مثال 14 :

document.getElementById(&quotdemo&quot) = new Date(&quotMar 25 2015&quot);

اما می توان ترتیب ماه، سال و روز را مطابق میل تغییر داد.

مثال 15 :

document.getElementById(&quotdemo&quot) = new Date(&quot25 Mar 2015&quot);

مثال 16 :

document.getElementById(&quotdemo&quot) = new Date(&quot2015 Mar 25&quot);

اسم ماه ها را می توان به طور کامل نوشت و یا در صورت تمایل تنها حروف اول آن را لحاظ کرد، برای مثال بجای January نوشت jan.

مثال 17 :

document.getElementById(&quotdemo&quot) = new Date(&quotJanuary 25 2015&quot);

مثال 18 :

document.getElementById(&quotdemo&quot) = new Date(&quotJan 25 2015&quot);

ویرگول و کوچک بزرگی حروف (اسم ماه مورد نظر) کاملا نادیده گرفته می شود.

مثال 19 :

document.getElementById(&quotdemo&quot) = new Date(&quot2015, JANUARY, 25&quot);

قالب (فرمت) short date اغلب بدین صورت نگارش می شود : " سال سال سال سال / روز روز / ماه ماه ".

مثال 20 :

document.getElementById(&quotdemo&quot) = new Date(&quot03/25/2015&quot);

می توان از کاراکترهای "/" یا "-" به عنوان تفکیک کننده ی سال، ماه و روز استفاده کرد.

مثال 21 :

document.getElementById(&quotdemo&quot) = new Date(&quot03-25-2015&quot);

جاوا اسکریپت این ترکیب نحوی یا نحوه ی نگارش تاریخ را نیز می پذیرد : " روز روز / ماه ماه / سال سال سال سال ".

مثال 22 :

document.getElementById(&quotdemo&quot) = new Date(&quot2015/03/25&quot);

نکته : ماه در هر دو فرمت short date و ISO پیش از روز درج می شود.

جاوا اسکریپت همچنین اجازه ی نگارش تاریخ به صورت کامل (با full format) را به برنامه نویس می دهد. به مثال زیر توجه کنید.

مثال 23 :

document.getElementById(&quotdemo&quot) =
new Date(&quotWed Mar 25 2015 09:56:24 GMT+0100 (W. Europe Standard Time)&quot);

جاوا اسکریپت خطاهای مربوط به اسم روز و پرانتز را نادیده می گیرد.

مثال 24 :

 document.getElementById(&quotdemo&quot) =
        new Date(&quotFri Mar 25 2015 09:56:24 GMT+0100 (Tokyo 
Time)&quot);


با مقاله های جدید و متنوع در زمینه آموزش طراحی سایت همراه ما باشید ....