HTML

Part 14 – HTML5 APIs (مقدمة) FSWD – HTML

ahmedمنذ 5 أيام

0 19 3 دقائق

HTML5 APIs هي واجهات برمجة التطبيقات (APIs) التي توفر وظائف إضافية للمطورين لتمكينهم من إجراء عمليات مثل التخزين المحلي أو إدخال التاريخ والوقت أو حتى استخدام السحب والإفلات دون الحاجة لاستخدام لغات البرمجة الأخرى.

🔸 1. إدخال التواريخ والوقت والألوان:

✅ إدخال التواريخ والوقت:

HTML5 قدم عناصر جديدة لتمكين المستخدمين من إدخال التواريخ والوقت بسهولة، دون الحاجة إلى كتابة أي جافا سكريبت.

<input type="date">: يُستخدم لإدخال التاريخ.
<input type="time">: يُستخدم لإدخال الوقت.
<input type="datetime-local">: يُستخدم لإدخال التاريخ والوقت المحلي.
<input type="color">: يُستخدم لاختيار اللون.

✅ مثال على إدخال التواريخ والوقت والألوان:

HTML5 APIs هي واجهات برمجة التطبيقات (APIs) التي توفر وظائف إضافية للمطورين لتمكينهم من إجراء عمليات مثل التخزين المحلي أو إدخال التاريخ والوقت أو حتى استخدام السحب والإفلات دون الحاجة لاستخدام لغات البرمجة الأخرى.

🔸 1. إدخال التواريخ والوقت والألوان:
✅ إدخال التواريخ والوقت:
HTML5 قدم عناصر جديدة لتمكين المستخدمين من إدخال التواريخ والوقت بسهولة، دون الحاجة إلى كتابة أي جافا سكريبت.

<input type="date">: يُستخدم لإدخال التاريخ.

<input type="time">: يُستخدم لإدخال الوقت.

<input type="datetime-local">: يُستخدم لإدخال التاريخ والوقت المحلي.

<input type="color">: يُستخدم لاختيار اللون.

✅ مثال على إدخال التواريخ والوقت والألوان:
html
Copied
Edit

في المثال:
- تم استخدام <input type="date"> لتحديد التاريخ.
- تم استخدام <input type="time"> لاختيار الوقت.
- تم استخدام <input type="datetime-local"> لاختيار التاريخ والوقت.
- تم استخدام <input type="color"> لاختيار اللون.

🔸 2. Local Storage و Session Storage:

✅ ما هو Local Storage؟

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

✅ ما هو Session Storage؟

Session Storage هو مشابه لـ Local Storage، لكنه يختلف في أنه يُخزن البيانات فقط للجلسة الحالية، أي أن البيانات تُحذف بمجرد إغلاق التبويب أو المتصفح.

✅ الفروق بين Local Storage و Session Storage:

Local Storage: البيانات يتم تخزينها بشكل دائم في المتصفح حتى لو تم إغلاق المتصفح.
Session Storage: البيانات تُحفظ فقط أثناء الجلسة الحالية، وتُحذف عندما يُغلق التبويب أو المتصفح.

✅ مثال لاستخدام Local Storage و Session Storage

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>Local Storage و Session Storage</title>
</head>
<body>

  <h2>Local Storage و Session Storage</h2>

  <button onclick="saveData()">حفظ البيانات</button>
  <button onclick="retrieveData()">استرجاع البيانات</button>

  <p id="result"></p>

  <script>
    function saveData() {
      // تخزين البيانات في Local Storage
      localStorage.setItem("username", "أحمد");

      // تخزين البيانات في Session Storage
      sessionStorage.setItem("sessionID", "12345");

      alert("تم حفظ البيانات!");
    }

    function retrieveData() {
      // استرجاع البيانات من Local Storage
      var username = localStorage.getItem("username");

      // استرجاع البيانات من Session Storage
      var sessionID = sessionStorage.getItem("sessionID");

      document.getElementById("result").innerHTML = 
        "اسم المستخدم: " + username + "<br>معرف الجلسة: " + sessionID;
    }
  </script>

</body>
</html>

في المثال:
- تم تخزين اسم المستخدم في Local Storage باستخدام localStorage.setItem().
- تم تخزين معرف الجلسة في Session Storage باستخدام sessionStorage.setItem().
- عند الضغط على زر استرجاع البيانات، يتم استرجاع البيانات من Local Storage و Session Storage باستخدام getItem().

🔸 3. السحب والإفلات (Drag & Drop):

HTML5 قدم واجهة Drag and Drop التي تسمح للمستخدمين بسحب العناصر من مكان إلى آخر على الصفحة.

✅ الخصائص الأساسية للسحب والإفلات:

draggable: خاصية تُضاف إلى العنصر ليصبح قابلاً للسحب.
ondragstart: حدث يحدث عند بدء السحب.
ondrop: حدث يحدث عند الإفلات.
ondragover: حدث يحدث عندما يتم سحب العنصر فوق منطقة قابلة للإفلات.

✅ مثال على السحب والإفلات

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>السحب والإفلات</title>
  <style>
    #dragItem {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      text-align: center;
      line-height: 100px;
      margin: 20px;
    }

    #dropZone {
      width: 200px;
      height: 200px;
      border: 2px dashed #ccc;
      text-align: center;
      line-height: 200px;
      margin: 20px;
    }
  </style>
</head>
<body>

  <h2>سحب العنصر وإفلاته في المنطقة المحددة</h2>

  <div id="dragItem" draggable="true" ondragstart="dragStart(event)">اسحبني</div>

  <div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)">
    افلت هنا
  </div>

  <script>
    function allowDrop(event) {
      event.preventDefault(); // للسماح بالإفلات
    }

    function dragStart(event) {
      event.dataTransfer.setData("text", event.target.id); // تحديد العنصر الذي يتم سحبه
    }

    function drop(event) {
      event.preventDefault();
      var data = event.dataTransfer.getData("text");
      var draggedElement = document.getElementById(data);
      event.target.appendChild(draggedElement); // إضافة العنصر المُسحب إلى المنطقة التي يتم الإفلات فيها
    }
  </script>

</body>
</html>

في المثال:
- العنصر <div id="dragItem"> يتم سحبه باستخدام draggable="true".
- العنصر يتم سحبه إلى منطقة <div id="dropZone">.
- تم استخدام ondragstart و ondrop للتحكم في أحداث السحب والإفلات.

✅ ملخص HTML5 APIs

API	الوصف
`<input type="date">`	إدخال تاريخ باستخدام واجهة المستخدم بسهولة
`<input type="time">`	إدخال وقت باستخدام واجهة المستخدم بسهولة
`<input type="color">`	اختيار لون باستخدام واجهة المستخدم بسهولة
Local Storage	تخزين بيانات المستخدم في المتصفح بشكل دائم
Session Storage	تخزين بيانات المستخدم بشكل مؤقت في جلسة المتصفح الحالية
Drag & Drop	السحب والإفلات، حيث يمكن للمستخدم سحب العناصر وإفلاتها في مناطق معينة