Yükleniyor...

HTML Geolocation

Önceki Web Storage küçük anahtar/değer dizelerini hatırlıyordu. Bu ders kaydetmeyi bırakır ve Geolocation’ı tanıtır: navigator.geolocation ile yaklaşık enlem/boylam okumak — yalnızca izinden sonra. HTML konum soran bir betik yükler. Kapsam pratik — tek okuma, watch/clear, kibar red — harita SDK’sı veya geo DB değil.

HTML kursunda neden geolocation

Yeni başlayanlar sıkça «yakınımda» düğmesi yapar. Geolocation ilk yaygın API’dir. Web storage’tan sonra bölünme farklıdır: HTML kabuk ve düğmeye; JS koordinat istemeye sahiptir. getCurrentPosition, watchPosition bilmek ve reddi yönetmek yeter.

Doğrudan yanıt

1) getCurrentPosition çağırın. 2) latitude/longitude okuyun. 3) Sormadan önce kullanıcı tıklaması daha iyi. 4) Sürekli güncelleme için watchPosition; clearWatch. 5) HTML etiketi yok. 6) Redde sayfa yararlı kalsın.

📊 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

Küçücük getCurrentPosition demosu

Tıklama konum ister ve koordinatları yazar. API yoksa veya red varsa sakin mesaj.

getCurrentPosition with permission

html 
<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 çağrılarını okumak

  • navigator.geolocation giriş noktasıdır
  • getCurrentPosition bir kez sorar
  • latitude/longitude ilk sayılardır
  • Önce destek kontrolü
  • error callback reddi kapsar
  • HTTPS tercih edilir
  • Web Storage’tan farklı: okuma, kaydetme değil

Sürekli güncelleme için watchPosition

Harekette success yeniden ateşlenebilir. id’yi saklayın ve clearWatch — introda watch’ı sonsuza bırakmayın.

watchPosition and clearWatch

html 
<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 fikrini okumak

  • Aynı izin modeli
  • success tekrarlanabilir
  • clearWatch durdurur — Stop sunun
  • Harita kütüphanesi değil
  • Web Storage değil
  • Sıklığa göre get vs watch seçin
  • Sonraki: drag and drop

Ne zaman sorun

  • «Konumu paylaş» tıklaması: iyi an
  • Bağlamsız yüklemede: genelde kötü
  • Sürekli hareket: watchPosition + durdurma
  • Tema kaydetmek: Web Storage’tı
  • Tam harita ürünü: bu girişin ötesi
  • Sessiz izleme: anti-desen

Alıştırma — kibarca fix isteyin

  1. getCurrentPosition demosunu yapıştırıp prompt’u deneyin.
  2. Koordinat veya sakin red doğrulayın.
  3. watch başlatın sonra Stop.
  4. İsteğe bağlı: çökmeden red.
  5. Cümle: Web Storage dize kaydeder; Geolocation izinle okur.
  6. Gerekirse http(s) ile sunun.
  7. İleri: drag and drop.

Kolay hatalar

  • geolocation etiketi beklemek
  • Her yüklemede sormak
  • error callback’i yok saymak
  • Web Storage ile karıştırmak
  • clearWatch’sız watch bırakmak
  • Her zaman kesin GPS sanmak
  • Girişi tam harita kursu saymak

Özet

  • Geolocation izinli bir JS API’sidir: navigator.geolocation
  • getCurrentPosition bir kez; watchPosition + clearWatch güncelleme için
  • HTML UI verir; net kullanıcı eyleminden sonra sorun
  • Reddi nazikçe yönetin
  • Web Storage hatırlanan dizelerdi; bu ders izinli koordinatlar
  • Sonraki: HTML drag and drop

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
5
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 64 / 68
Html Ders