واجهات HTML5 البرمجية (Web APIs)

ما هي Web APIs؟

واجهات برمجية مدمجة في المتصفح تتيح لـ JavaScript الوصول إلى قدرات متقدّمة: الموقع الجغرافي، التخزين، السحب والإفلات... إلخ. إليك أبرزها.

تحديد الموقع (Geolocation)

تحصل على موقع المستخدم (بعد إذنه):

<button onclick="getLocation()">أين أنا؟</button>

<script>
  function getLocation() {
    navigator.geolocation.getCurrentPosition((pos) => {
      alert(pos.coords.latitude + ", " + pos.coords.longitude);
    });
  }
</script>

يطلب المتصفح إذن المستخدم أولًا — لا يمكن الحصول على الموقع دون موافقته.

التخزين المحلي (Web Storage)

تخزين بيانات في المتصفح دون قاعدة بيانات:

<script>
  // يبقى حتى بعد إغلاق المتصفح
  localStorage.setItem("name", "براء");
  const name = localStorage.getItem("name");

  // يُمحى عند إغلاق التبويب
  sessionStorage.setItem("temp", "123");
</script>

localStorage يناسب التفضيلات (مثل الوضع الداكن)، وsessionStorage للبيانات المؤقتة.

السحب والإفلات (Drag and Drop)

<div draggable="true" ondragstart="event.dataTransfer.setData('text', 'box')">
  اسحبني
</div>

السمة draggable="true" تجعل العنصر قابلًا للسحب، وتتحكّم JavaScript ببقية الأحداث (ondragstart, ondrop, ondragover).

العمّال (Web Workers)

تشغيل JavaScript ثقيلة في خيط منفصل دون تجميد الصفحة:

<script>
  const worker = new Worker("task.js");
  worker.postMessage("ابدأ");
  worker.onmessage = (e) => console.log(e.data);
</script>

مفيد للعمليات الحسابية الكبيرة كي تبقى الواجهة سلسة.

الأحداث من الخادم (Server-Sent Events)

تتيح للخادم دفع تحديثات للصفحة تلقائيًا (إشعارات، أسعار مباشرة):

<script>
  const source = new EventSource("/updates");
  source.onmessage = (e) => console.log("جديد:", e.data);
</script>

خلاصة

واجهات HTML5 تمنح صفحتك قدرات قوية عبر JavaScript: Geolocation للموقع، localStorage للتخزين، Drag & Drop للتفاعل، Web Workers للأداء، وSSE للتحديثات الحيّة. كلها تُبنى فوق HTML وتُشغَّل بـ JavaScript.