کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)

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

برای نمایش یک تاریخ در جاوا اسکریپت ابتدا باید یک شی (object) با استفاده از Date در کد خود ایجاد کنیم (این شی به صورت از پیش تعریف شده یا built-in در مفسر جاوا اسکریپت وجود دارد)، به طور مثال:

<script type="text/javascript">
var now =  new Date();
alert(now);
</script>

خروجی کد بالا به صورت نمونه زیر خواهد بود.

Sun Jan 20 2013 13:45:58 GMT+0330 (Iran Standard Time)

اکنون متغیر فرضی now می تواند از توابع نمونه و از پیش تعریف شده شی Date استفاده کند، تعداد و کاربرد این توابع متنوع است که در زیر به اختصار به مهم ترین آنها اشاره می کنیم.

تابع getdate

از تابع getdate برای بدست آوردن روز به صورت عددی (بین 1 تا 31) استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
var day = now.getDate();
alert(day);
</script>

خروجی کد بالا به صورت نمونه زیر خواهد بود.

20

تابع getDay

از تابع getDay برای بدست آوردن روز معین از روزهای هفته به صورت عددی (بین 0 تا 6) کاربرد دارد، به طور مثال:

<script type="text/javascript">
var now =  new Date();
var day = now.getDay();
alert(day);
</script>

خروجی کد بالا به صورت نمونه زیر خواهد بود.

0

تابع getFullYear

از تابع getFullYear برای بدست آوردن سال های میلادی به صورت عدد چهار رقمی استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
var full_year = now.getFullYear();
alert(full_year);
</script>

خروجی کد بالا به صورت نمونه زیر خواهد بود.

2013

تابع getHours

از تابع getHours برای بدست آوردن ساعت فعلی سیستم (به صورت عدد دو رقمی) استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
var hour = now.getHours();
alert(hour);
</script>

خروجی کد بالا به صورت نمونه زیر خواهد بود.

13

تابع getMilliseconds

از تابع getMilliseconds برای بدست آوردن هزارم ثانیه از زمان فعلی (زمان موجود در شی Date) استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
var millisecond = now.getMilliseconds();
alert(millisecond);
</script>

خروجی کد بالا به صورت نمونه زیر خواهد بود.

937

تابع getMinutes

از تابع getMinutes برای بدست آوردن دقیقه (بین عدد 1 تا 60) استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
var minute = now.getMinutes();
alert(minute);
</script>

خروجی کد بالا به صورت نمونه زیر خواهد بود.

45

تابع getMonth

از تابع getMonth برای بدست آوردن ماه (بین اعداد 0 تا 11) استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
var month = now.getMonth();
alert(month);
</script>

خروجی کد بالا به صورت نمونه زیر خواهد بود.

0

تابع getSeconds

از تابع getSeconds برای بدست آوردن ثانیه (بین 0 تا 60) استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
var second = now.getSeconds();
alert(second);
</script>

خروجی کد بالا به صورت نمونه زیر خواهد بود.

58

تابع getTime

از تابع getTime برای بدست آوردن مدت زمان به میلی ثانیه از نیمه شب اول ژانويه سال 1970 میلادی استفاده می شود (این عدد یک تاریخ قراردادی تعریف شده در Unix time است، در واقع این زمان مشخص کننده مدت میلی ثانیه سپری شده از شروع ساعت هماهنگ جهانی یا  Coordinated Universal Time (به اختصار  UTC یا POSIX) است، به طور مثال:

<script type="text/javascript">
var now =  new Date();
var since_1970 = now.getTime();
alert(since_1970);
</script>

خروجی کد بالا به صورت نمونه زیر خواهد بود.

1358681328943

تابع getTimezoneOffset

از تابع getTimezoneOffset برای بدست آوردن اختلاف زمانی به دقیقه از GMT استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
var time_zone = now.getTimezoneOffset();
alert(time_zone);
</script>

خروجی کد بالا به صورت نمونه زیر خواهد بود.

-210

نکته 1: خروجی تابع getTimezoneOffset برای زمان های محلی که اختلاف آنها نسبت به GMT مثبت باشد (مانند 3:30 برای ایران)، عدد منفی خواهد بود و بالعکس برای زمان های محلی که اختلاف آنها نسب به GMT منفی باشد، عدد مثبت خواهد بود.
نکته 2: توابعی که در بالا بررسی کردیم، به صورت استاندارد UTC یا ساعت هماهنگ جهانی نیز قابل استفاده هستند، لذا اگر ساعت محلی سیستم عامل با ساعت UTC برابر نباشد (اختلاف زمانی وجود داشته باشد)، استفاده یا عدم استفاده از UTC نیز نتیجه متفاوت خواهد داشت (در صورت استفاده، زمان دریافتی بر اساس استاندار UTC خواهد بود نه الزاما زمان سیستم عامل).

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

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

تابع setDate

از تابع setDate برای تغییر روز (بین 1 تا 31) از تاریخ مورد نظر استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
now.setDate(22);
day = now.getDate();
alert(day);
</script>

خروجی کد بالا به صورت زیر خواهد بود.

22

تابع setFullYear

از تابع setFullYear برای تنظیم سال به صورت عدد چهار رقمی استفاده می شود، به طورر مثال:

<script type="text/javascript">
var now =  new Date();
now.setFullYear(2000);
full_year = now.getFullYear();
alert(full_year);
</script>

خروجی کد بالا به صورت زیر خواهد بود.

2000

تابع setHours

از تابع setHours برای تنظیم ساعت (بین 0 تا 23) استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
now.setHours(14);
hour = now.getHours();
alert(hour);
</script>

خروجی کد بالا به صورت زیر خواهد بود.

14

تابع setMilliseconds

از تابع setMilliseconds برای تنظیم زمان به هزارم ثانیه (بین 0 تا 999) استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
now.setMilliseconds(556);
millisecond = now.getMilliseconds();
alert(millisecond);
</script>

خروجی کد بالا به صورت زیر خواهد بود.

556

تابع setMinutes

از تابع setMinutes برای تنظیم دقیقه (بین عدد 1 تا 60) استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
now.setMinutes(23);
minute = now.getMinutes();
alert(minute);
</script>

خروجی کد بالا به شکل زیر خواهد بود.

23

تابع setMonth

از تابع setMonth برای تنظیم یک ماه (بین اعداد 0 تا 11) استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
now.setMonth(0);
month = now.getMonth();
alert(month);
</script>

خروجی کد بالا به صورت زیر خواهد بود.

0

تابع setSeconds

از تابع setSeconds برای تنظیم زمان به ثانیه (بین اعداد 0 تا 60) استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
now.setSeconds(33);
second = now.getSeconds();
alert(second);
</script>

خروجی کد بالا به صورت زیر خواهد بود.

33

تابع setTime

از تابع setTime برای تنظیم زمان به صورت میلی ثانیه از نیمه شب اول ژانويه سال 1970 میلادی (زمان به صورت Unix) استفاده می شود، به طور مثال:

<script type="text/javascript">
var now =  new Date();
now.setTime(1358681325766);
time = now.getTime();
alert(time);
</script>

خروجی کد بالا به صورت زیر خواهد بود.

1358681325766

نکته: به جزء تابع setTime، سایر توابع مربوط به set بر اساس استاندارد UTC نیز قابل استفاده هستند.

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

در پایان این آموزش بد نیست نگاهی داشته باشیم به توابع مربوط به فرمت بندی و نمایش تاریخ و زمان در جاوا اسکریپت، البته همان طور که پیش از این عنوان شد، این توابع از پیش تعریف شده منطبق با تاریخ میلادی هستند و لذا برای سایر موارد باید کلاس ها و توابعی مجزا و مستقل نوشت، به هر صورت لیستی از این توابع و نمونه خروجی آنها را در زیر ملاحظه می کنید.
تابع toDateString - نمونه خروجی: Thu Jan 24 2013
تابع toLocaleDateString - نمونه خروجی: Thursday, January 24, 2013
تابع toLocaleFormat - نمونه خروجی: Thursday, January 24, 2013 10:01:15 PM
تابع toLocaleString - نمونه خروجی: Thursday, January 24, 2013 10:02:12 PM
تابع toLocaleTimeString - نمونه خروجی: 10:03:56 PM
تابع toString - نمونه خروجی: Thu Jan 24 2013 22:16:49 GMT+0330 Iran Standard Time
تابع toTimeString - نمونه خروجی: 22:18:04 GMT+0330 Iran Standard Time

مثال و پیش نمایش آنلاین

در زیر می توانید مثالی از کاربرد تاریخ و زمان در جاوا اسکریپت و پیش آنلاین آن را ملاحظه و بررسی نمائید.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | date و time در جاوا اسکریپت</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
#date{
    direction:ltr;
}
</style>
<script type="text/javascript">
function RefreshDate(){
    var refresh_date = setTimeout('ShowDate();', 1000);
}
function ShowDate(){
    var now =  new Date();
    var show = document.getElementById('date').innerHTML = now;
    var refresh_date = RefreshDate();
}
</script>
</head>
<body onload="ShowDate();">
<noscript>جاوا اسکریپت در مرورگر شما غیرفعال است یا پشتیبانی نمی شود.</noscript>
<div id="date"></div>
<hr>
با استفاده از Date و setTimeout می توان تاریخ و زمان را به صورت داینامیک نمایش داد.
</body>
</html>

پیش نمایش