الجزء الثالث عشر – التعامل مع التاريخ والوقت في JavaScript – سلسلة FSWD – JS

🟡 1. التعامل مع التاريخ والوقت – Date Object

كائن Date في JavaScript بيتيح لك التعامل مع التاريخ والوقت، وبيحتوي على مجموعة من الوظائف المفيدة اللي هتساعدك في التعامل مع التاريخ والوقت.

✅ إنشاء كائن Date

const currentDate = new Date();
console.log(currentDate);  // يطبع التاريخ والوقت الحالي

✅ التعامل مع التاريخ والوقت:

1. الاسترجاع:

   • getFullYear(): الحصول على السنة.

   • getMonth(): الحصول على الشهر (من 0 لـ 11، يعني يناير هو 0).

   • getDate(): الحصول على اليوم من الشهر.

   • getHours(): الحصول على الساعة.

   • getMinutes(): الحصول على الدقائق.

   • getSeconds(): الحصول على الثواني.

✅ مثال

const currentDate = new Date();

const year = currentDate.getFullYear();   // الحصول على السنة
const month = currentDate.getMonth();     // الحصول على الشهر
const day = currentDate.getDate();        // الحصول على اليوم
const hours = currentDate.getHours();     // الحصول على الساعة
const minutes = currentDate.getMinutes(); // الحصول على الدقائق
const seconds = currentDate.getSeconds(); // الحصول على الثواني

console.log(`Year: ${year}, Month: ${month + 1}, Day: ${day}`);
console.log(`Time: ${hours}:${minutes}:${seconds}`);

✅ إنشاء تاريخ معين:

// إنشاء تاريخ معين
const specificDate = new Date(2023, 10, 15);  // التاريخ: 15 نوفمبر 2023
console.log(specificDate);  // يطبع التاريخ

✅ المقارنة بين التواريخ:

const date1 = new Date(2023, 10, 15);
const date2 = new Date(2023, 10, 16);

console.log(date1 < date2);  // true لأن 15 نوفمبر قبل 16 نوفمبر

🟡 2. الأسهم (Arrow Functions) المتقدمة

الـ Arrow Functions هي طريقة مختصرة لكتابة الدوال في JavaScript. هي توفر صيغ كتابة أكثر بساطة وتكون أكثر وضوحًا في بعض الأحيان.

✅ كتابة دالة باستخدام الأسهم

const add = (a, b) => a + b;
console.log(add(5, 3));  // 8

✅ الفرق بين function expression و arrow function:

1. Function Expression:

const add = function(a, b) {
  return a + b;
};

2. Arrow Function

const add = (a, b) => a + b;

الفرق الأساسي بين الاثنين:

• Arrow Functions بيتم استخدامهم في الدوال البسيطة لأنهم أكثر اختصارًا.

• Arrow Functions ليس لديهم this خاص بهم. بمعنى أن this في الدالة السهمية يُشير إلى this في السياق الذي تم فيه تعريف الدالة، بينما في الدوال التقليدية this ممكن يتغير بناءً على كيفية استدعاء الدالة.

---

✅ التعامل مع this في Arrow Functions:

الـ Arrow Functions لا تمتلك خاصية this الخاصة بها، لكنها تلتزم بـ this الخاص بالسياق المحيط بها

const person = {
  name: "Ahmed",
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`);
    }, 1000);
  }
};

person.greet();  // "Hello, Ahmed"

هنا، this.name في Arrow Function يشير إلى this في سياق الكائن person.

---

🟡 3. الفرق بين function و Arrow Function

✅ Function Expression

const sayHello = function() {
  console.log("Hello!");
};

sayHello();  // "Hello!"

✅ Arrow Function

const sayHello = () => {
  console.log("Hello!");
};

sayHello();  // "Hello!"

الفروق الرئيسية:

1. this:

   • في Arrow Functions، قيمة this تكون مرتبطة بالسياق الذي تم فيه تعريف الدالة.

   • في Traditional Functions (الدوال التقليدية)، this يتم تحديده بناءً على كيفية استدعاء الدالة.

2. كتابة مختصرة:

   • Arrow Functions أكثر اختصارًا ووضوحًا.

---

🟡 4. Storage – localStorage و sessionStorage

✅ localStorage:

localStorage هو تخزين دائم للبيانات في المتصفح، وهذه البيانات تظل موجودة حتى بعد إغلاق المتصفح أو إعادة تحميل الصفحة.

✅ كيفية استخدام localStorage:

1. تخزين البيانات

localStorage.setItem('username', 'Ahmed');

استرجاع البيانات

const username = localStorage.getItem('username');
console.log(username);  // "Ahmed"

حذف البيانات:

localStorage.removeItem('username');

مسح جميع البيانات

localStorage.clear();

✅ sessionStorage:

sessionStorage يشبه localStorage، لكنه يتم تخزينه في الجلسة الحالية فقط. البيانات في sessionStorage تُمحى بمجرد إغلاق المتصفح أو التبويب.

✅ كيفية استخدام sessionStorage:

1. تخزين البيانات

sessionStorage.setItem('sessionUser', 'Ahmed');

استرجاع البيانات:

const sessionUser = sessionStorage.getItem('sessionUser');
console.log(sessionUser);  // "Ahmed"

حذف البيانات:

sessionStorage.removeItem('sessionUser');

مسح جميع البيانات:

sessionStorage.clear();

✅ مثال كامل يجمع كل الأفكار

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Features</title>
</head>
<body>
  <script>
    // 1. التعامل مع التاريخ والوقت
    const currentDate = new Date();
    console.log("Current Date: ", currentDate);

    // 2. الأسهم (Arrow Functions)
    const greet = (name) => `Hello, ${name}`;
    console.log(greet("Ahmed"));  // "Hello, Ahmed"

    // 3. استخدام localStorage و sessionStorage
    localStorage.setItem('user', 'Ahmed');
    sessionStorage.setItem('sessionUser', 'John');

    console.log(localStorage.getItem('user'));        // "Ahmed"
    console.log(sessionStorage.getItem('sessionUser')); // "John"

    // حذف البيانات
    localStorage.removeItem('user');
    sessionStorage.removeItem('sessionUser');

    console.log(localStorage.getItem('user'));        // null
    console.log(sessionStorage.getItem('sessionUser')); // null

    // 4. Destructuring
    const person = { name: "Ahmed", age: 30 };
    const { name, age } = person;
    console.log(name, age);  // "Ahmed", 30
  </script>
</body>
</html>

✅ شرح الكود:

1. التعامل مع التاريخ: طبعنا التاريخ والوقت الحالي باستخدام new Date().

2. Arrow Functions: استخدمنا السهم لكتابة دالة greet التي تُرجع رسالة ترحيب.

3. localStorage و sessionStorage: خزنا واسترجعنا البيانات من التخزين المحلي والمؤقت.

4. Destructuring: استخدمنا Destructuring لاستخراج القيم من الكائن.

---

✅ ملخص النقاط:

1. Date Object: التعامل مع التاريخ والوقت باستخدام كائن Date.

2. Arrow Functions: طريقة مختصرة وأكثر وضوحًا لكتابة الدوال مع تأثير على this.

3. localStorage & sessionStorage: طرق لتخزين البيانات في المتصفح.

4. Destructuring: استخراج القيم من الكائنات والمصفوفات بطريقة بسيطة