کار با تاریخ و زمان 🗓️⏰

یاد می‌گیریم چطوری با زمان کار کنیم و تایمرهای خفن بسازیم.

آبجکت `Date`: ماشین زمان جاوااسکریپت!

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

// گرفتن تاریخ و ساعت فعلی
const now = new Date();
console.log(now);

// گرفتن بخش‌های مختلف تاریخ
const year = now.getFullYear(); // سال
const month = now.getMonth(); // ماه (از ۰ شروع می‌شه!)
const day = now.getDate(); // روز
const hours = now.getHours(); // ساعت

console.log(`امروز: ${year}/${month + 1}/${day}`);

// ساختن یه تاریخ خاص
const myBirthday = new Date('1998-08-23');
console.log(myBirthday.toLocaleDateString('fa-IR')); // نمایش به فرمت فارسی

تایمرها: `setTimeout` و `setInterval`

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

`setTimeout(callback, delay)`: یه تابع رو فقط یک بار بعد از گذشت مدت زمان مشخص (به میلی‌ثانیه) اجرا می‌کنه.
`setInterval(callback, delay)`: یه تابع رو به صورت تکراری هر چند میلی‌ثانیه یک بار اجرا می‌کنه.

// اجرای کد بعد از ۳ ثانیه
setTimeout(() => {
  console.log("این پیام بعد از ۳ ثانیه اومد!");
}, 3000);

// اجرای کد هر ۱ ثانیه
let count = 0;
const myInterval = setInterval(() => {
  count++;
  console.log(`تیک تاک ساعت: ${count}`);
  if (count >= 5) {
    clearInterval(myInterval); // متوقف کردن اینتروال
    console.log("تایمر متوقف شد!");
  }
}, 1000);

تمرین! 🧠

یه ساعت دیجیتال ساده بساز! یه تگ `h2` تو HTML بذار و با استفاده از `setInterval`، هر ثانیه یک بار، ساعت فعلی رو داخلش نمایش بده. (راهنمایی: از متد `toLocaleTimeString()` روی آبجکت `Date` استفاده کن).

جواب تمرین

<!-- HTML -->
<h2 id="clock"></h2>

<!-- JavaScript -->
<script>
  const clockElement = document.getElementById('clock');

  setInterval(() => {
    const now = new Date();
    clockElement.innerText = now.toLocaleTimeString('fa-IR');
  }, 1000);
</script>

درس قبلی

درس ۱۰ از ۱۶

درس بعدی: ذخیره‌سازی در مرورگر