تحديد الموقع في HTML
سابقاً Web Storage حفظ سلاسل مفتاح/قيمة. هذا الدرس يترك الحفظ ويقدّم Geolocation: قراءة خط العرض والطول تقريباً عبر navigator.geolocation — فقط بعد الإذن. HTML يحمّل سكربتاً يطلب الموقع. النطاق عملي — قراءة مرة، watch/clear، ورفض مهذّب — لا SDK خرائط أو تتبع أو قاعدة geo.
لماذا geolocation في دورة HTML
المبتدئ يبني زر «قربي» أو يعرض إحداثيات. Geolocation أول واجهة شائعة لذلك. بعد تذكّر السلاسل في web storage، التقسيم هنا مختلف: HTML يملك الغلاف والزر؛ JS يطلب الإحداثيات. يكفي getCurrentPosition ومعرفة watchPosition ومعالجة رفض الإذن.
إجابة مباشرة
1) استدعِ getCurrentPosition. 2) اقرأ latitude وlongitude. 3) يفضّل نقر المستخدم قبل السؤال. 4) watchPosition للتحديث المستمر مع clearWatch. 5) لا وسم HTML. 6) عند الرفض أبقِ الصفحة مفيدة.
📊 getCurrentPosition vs watchPosition
| Topic | getCurrentPosition | watchPosition |
|---|---|---|
| Typical use | One-shot “where am I now” | Ongoing updates while watching |
| Callback pattern | success once (plus optional error) | success may fire repeatedly |
| Stop watching | Not needed (single read) | clearWatch(watchId) |
| Beginner fit | Share-location button | Live tracking demos (careful) |
| Permission | Still required | Still required |
| This course depth | Intro focus | Short demo + clearWatch only |
عرض getCurrentPosition صغير
زر يطلب الموضع ويطبع الإحداثيات. إن رُفض أو غابت الواجهة، اعرض رسالة هادئة.
<button id="loc" type="button">Share location</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
document.getElementById("loc").onclick = function () {
if (!navigator.geolocation) {
out.textContent = "No geolocation support";
return;
}
out.textContent = "Waiting for permission…";
navigator.geolocation.getCurrentPosition(
function (pos) {
out.textContent =
pos.coords.latitude + ", " + pos.coords.longitude;
},
function () {
out.textContent = "Permission denied or unavailable";
}
);
};
</script>
قراءة استدعاءات getCurrentPosition
- navigator.geolocation نقطة الدخول
- getCurrentPosition يسأل مرة وقد يظهر حوار إذن
- latitude/longitude أرقام المبتدئ الأولى
- افحص الدعم أولاً
- callback الخطأ يغطي الرفض
- يفضّل HTTPS
- بخلاف Web Storage هنا قراءة لا حفظ
watchPosition للتحديث المستمر
قد يطلق النجاح مراراً مع الحركة. احفظ المعرّف واستدعِ clearWatch — لا تترك المراقبة بلا نهاية في المقدّمة.
<button id="start" type="button">Watch location</button>
<button id="stop" type="button">Stop watching</button>
<pre id="live"></pre>
<script>
const live = document.getElementById("live");
let watchId = null;
document.getElementById("start").onclick = function () {
if (!navigator.geolocation) {
live.textContent = "No geolocation support";
return;
}
if (watchId !== null) {
return;
}
live.textContent = "Watching…";
watchId = navigator.geolocation.watchPosition(
function (pos) {
live.textContent =
pos.coords.latitude + ", " + pos.coords.longitude;
},
function () {
live.textContent = "Permission denied or unavailable";
watchId = null;
}
);
};
document.getElementById("stop").onclick = function () {
if (watchId !== null) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
live.textContent = "Stopped watching";
}
};
</script>
قراءة فكرة watchPosition
- نفس نموذج الإذن
- النجاح قد يتكرر
- clearWatch يوقف — وفّر زر Stop
- ليست مكتبة خرائط
- ليست Web Storage
- اختر get أو watch حسب التكرار
- التالي: drag and drop
متى تسأل
- نقر «مشاركة الموقع»: وقت مناسب
- عند التحميل بلا سياق: غالباً سيئ
- تحديث حركة مستمر: watchPosition مع إيقاف
- تفضيل المظهر: كان Web Storage
- منتج خرائط كامل: خارج هذه المقدّمة
- تتبع صامت: مرفوض
تمرين — اطلب بإذن مؤدّب
- الصق عرض getCurrentPosition وجرّب القبول/الرفض.
- أكّد رسالة هادئة أو إحداثيات.
- جرّب watch ثم Stop.
- اختياري: ارفض الإذن دون تعطّل.
- جملة: Web Storage يحفظ سلاسل؛ Geolocation يقرأ بإذن.
- خدم عبر http(s) إن لزم.
- التالي drag and drop.
أخطاء سهلة
- توقع وسم geolocation
- السؤال عند كل تحميل بلا سبب
- تجاهل خطأ الرفض
- الخلط مع Web Storage
- ترك watch دون clearWatch
- افتراض GPS دقيق دائماً
- اعتبار المقدّمة دورة خرائط كاملة
ملخص
- Geolocation واجهة JS بإذن على navigator.geolocation
- getCurrentPosition مرة؛ watchPosition مع clearWatch للتحديث
- HTML للواجهة؛ اسأل بعد فعل واضح قدر الإمكان
- عالج الرفض بلطف
- Web Storage كان سلاسل؛ هنا إحداثيات بإذن
- التالي: drag and drop في HTML
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى