HTML API'leri: Temel Web Geliştirme Araçları

📚 HTML API'leri Çalışma Materyali

Kaynak Bilgisi: Bu çalışma materyali, bir dersin ses kaydı transkripti ve kopyalanmış metin kaynakları birleştirilerek hazırlanmıştır.

---

Giriş: HTML API'lerine Genel Bakış

Modern web uygulamalarının geliştirilmesinde HTML API'leri, kullanıcı deneyimini zenginleştiren ve çeşitli işlevleri yerine getiren güçlü araçlardır. Bu materyalde, web geliştiricilerinin sıklıkla kullandığı beş temel HTML API'si detaylı olarak incelenecektir: Coğrafi Konum API'si, Sürükle ve Bırak API'si, Web Depolama API'si, Web Çalışanları API'si ve Sunucu Gönderili Olaylar API'si. Her bir API'nin amacı, çalışma prensipleri ve temel kullanım senaryoları ele alınacaktır.

---

1. Coğrafi Konum API'si (Geolocation API)

Tanım ve Amaç 📚 Coğrafi Konum API'si, bir kullanıcının enlem ve boylam bilgilerini içeren coğrafi konumunu bulmak için kullanılır. Bu API, mahremiyet açısından kritik öneme sahiptir ve kullanıcının açık onayı olmadan konum bilgisi alınamaz.

Çalışma Prensibi ve Doğruluk ✅

• Cihaz Bağımlılığı: Konum doğruluğu kullanılan cihaza göre değişir. Akıllı cihazlarda GPS kullanımı sayesinde daha kesin sonuçlar elde edilirken, bilgisayarlarda internet ağına bağlı olarak tahmini bir konum sunulur.
• Tarayıcı Desteği: Güncel bir web tarayıcısı bu API'yi kullanmak için yeterlidir.
• Kullanıcı Onayı: API, kullanıcının izni olmadan çalıştırılamaz.

Temel Kullanım ve Detaylı Kod Açıklaması 💡 Konum bilgisi almak için JavaScript'te navigator.geolocation.getCurrentPosition() metodu kullanılır. Bu metod, başarılı olduğunda bir showPosition fonksiyonunu, hata durumunda ise bir showError fonksiyonunu çağırabilir.

1️⃣ Buton Tetikleme:

<button onclick="getLocation()">Bulunduğunuz konumun koordinatları için tıklayın.</button>
<p id="konumElementID"></p>

getLocation() fonksiyonu, butona tıklandığında çalışır.

2️⃣ Konum Bilgisi Alma Fonksiyonu (getLocation):

var x = document.getElementById("konumElementID"); // Konum bilgisinin yazılacağı element
function getLocation() {
    if (navigator.geolocation) { // Tarayıcı desteği kontrolü
        navigator.geolocation.getCurrentPosition(showPosition, showError); // Konum al, başarılı olursa showPosition, hata olursa showError çağır
    } else {
        x.innerHTML = "Coğrafik konum bu tarayıcı tarafından desteklenmemektedir.";
    }
}

• navigator.geolocation: Tarayıcının coğrafi konum desteğini kontrol eder.
• getCurrentPosition(successCallback, errorCallback): Kullanıcının mevcut konumunu alır. successCallback başarılı olduğunda, errorCallback hata durumunda çalışır.

3️⃣ Başarılı Konum Alma Fonksiyonu (showPosition):

function showPosition(position) {
    x.innerHTML = "Enlem: " + position.coords.latitude + "<br>";
    x.innerHTML += "Boylam: " + position.coords.longitude;
}

• position nesnesi, konum bilgilerini içerir.
• position.coords.latitude: Enlem değerini verir.
• position.coords.longitude: Boylam değerini verir.

4️⃣ Hata Yönetimi Fonksiyonu (showError) ⚠️ Olası hatalar showError fonksiyonu ile yönetilir. Bu fonksiyon, error nesnesini parametre olarak alır ve error.code özelliğine göre farklı hata mesajları gösterebilir.

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "Coğrafi konum için kullanıcı izni verilmedi.";
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Lokasyon bilgisi kullanıma dışıdır.";
            break;
        case error.TIMEOUT:
            x.innerHTML = "Kullanıcının konumunu alma isteği zaman aşımına uğradı.";
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "Öngörülemeyen bir hata oluştu.";
            break;
    }
}

• PERMISSION_DENIED: Kullanıcı konum izni vermediğinde.
• POSITION_UNAVAILABLE: Konum bilgisi mevcut olmadığında.
• TIMEOUT: Konum isteği belirli bir süre içinde yanıt vermediğinde.
• UNKNOWN_ERROR: Diğer beklenmeyen hatalar için.

---

2. Sürükle ve Bırak API'si (Drag and Drop API)

Tanım ve Amaç 📚 Sürükle ve Bırak API'si, HTML'de bir nesnenin fare ile tutulup başka bir konuma sürüklenip bırakılmasını sağlayan etkileşimli uygulamalar geliştirmek için kullanılır.

Çalışma Prensibi ve Özellikler ✅ Bu API, sürüklenen elementin ve üzerine bırakılan hedef elementin belirli özelliklere sahip olmasını gerektirir. Temel olarak dört olay ve bir HTML özelliği kullanılır:

• draggable="true": Bir elementin sürüklenebilir olduğunu belirtir.
• ondragstart: Sürükleme başladığında tetiklenir.
• ondragover: Sürüklenen bir element hedef elementin üzerine geldiğinde tetiklenir.
• ondrop: Sürüklenen element hedef elementin üzerine bırakıldığında tetiklenir.
• dataTransfer nesnesi: Sürüklenen veriyi taşır.

Temel Kullanım ve Detaylı Kod Açıklaması 💡

1️⃣ HTML Yapısı:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

• draggable="true": img elementinin sürüklenebilir olmasını sağlar.
• ondragstart="drag(event)": img sürüklenmeye başladığında drag fonksiyonunu çağırır.
• ondragover="allowDrop(event)": div üzerine sürüklenen bir element geldiğinde allowDrop fonksiyonunu çağırır.
• ondrop="drop(event)": div üzerine bir element bırakıldığında drop fonksiyonunu çağırır.

2️⃣ Sürükleme Fonksiyonu (drag):

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id); // Sürüklenen verinin türünü ve değerini ayarlar
}

• ev.dataTransfer.setData("text", ev.target.id): Sürüklenen elementin id'sini "text" türünde veri olarak ayarlar. Bu veri, bırakma anında alınacaktır.

3️⃣ Bırakmaya İzin Verme Fonksiyonu (allowDrop):

function allowDrop(ev) {
    ev.preventDefault(); // Varsayılan bırakma işlemini engeller
}

• ev.preventDefault(): Tarayıcının varsayılan olarak bir elementin başka bir element üzerine bırakılmasını engellemesini önler. Bu sayede ondrop olayı tetiklenebilir.

4️⃣ Bırakma Fonksiyonu (drop):

function drop(ev) {
    ev.preventDefault(); // Varsayılan bırakma işlemini engeller
    var data = ev.dataTransfer.getData("text"); // Sürüklenen veriyi alır
    ev.target.appendChild(document.getElementById(data)); // Sürüklenen elementi hedef elementin içine ekler
}

• ev.preventDefault(): Yine varsayılan davranışı engeller.
• ev.dataTransfer.getData("text"): drag fonksiyonunda ayarlanan "text" türündeki veriyi (yani sürüklenen elementin ID'sini) alır.
• ev.target.appendChild(document.getElementById(data)): Sürüklenen elementi (ID'si data olan) hedef elementin (ev.target) içine ekler.

---

3. Web Depolama API'si (Web Storage API)

Tanım ve Amaç 📚 Web Depolama API'si, kullanıcı verilerini istemci tarafında (tarayıcıda) güvenli bir şekilde saklamak için tasarlanmıştır. Çerezlere kıyasla daha güvenli, daha büyük veri kapasitesine sahip ve web sitesi performansını etkilemeden yerel olarak veri depolayabilir.

İki Ana Nesne ✅

1. window.localStorage: Verileri son kullanma tarihi olmadan depolar. Tarayıcı kapatılsa bile veriler silinmez ve kalıcıdır.
2. window.sessionStorage: Verileri yalnızca mevcut oturum için depolar. Tarayıcı sekmesi kapatıldığında veriler otomatik olarak silinir.

Temel Kullanım ve Detaylı Kod Açıklaması 💡

1️⃣ Tarayıcı Desteği Kontrolü:

if (typeof(Storage) !== "undefined") {
    // Web depolama destekleniyor
} else {
    // Web depolama desteklenmiyor
}

• typeof(Storage) !== "undefined": Web depolama API'sinin tarayıcı tarafından desteklenip desteklenmediğini kontrol eder.

2️⃣ Veri Depolama (localStorage.setItem):

localStorage.setItem("lastname", "Smith"); // "lastname" anahtarına "Smith" değerini kaydeder

• localStorage.setItem(anahtar, değer): Belirtilen anahtar-değer çiftini localStorage'a kaydeder.

3️⃣ Depolanan Veriyi Geri Çağırma (localStorage.getItem):

var storedValue = localStorage.getItem("lastname"); // "lastname" anahtarının değerini alır
document.getElementById("result").innerHTML = storedValue;

• localStorage.getItem(anahtar): Belirtilen anahtara karşılık gelen değeri localStorage'dan alır.

Örnek: Tıklama Sayacı 📊 localStorage ve sessionStorage arasındaki farkı göstermek için tıklama sayacı örnekleri:

• localStorage Örneği (Kalıcı Sayım):

  function clickCounter() {
      if (typeof(Storage) !== "undefined") {
          if (localStorage.clickcount) {
              localStorage.clickcount = Number(localStorage.clickcount) + 1;
          } else {
              localStorage.clickcount = 1;
          }
          document.getElementById("result").innerHTML = "Butona " + localStorage.clickcount + " kez tıkladınız.";
      } else {
          document.getElementById("result").innerHTML = "Tarayıcınız web depolama API'sini desteklememektedir.";
      }
  }
  

  Bu örnekte, tarayıcı kapatılıp açılsa bile clickcount değeri korunur.

• sessionStorage Örneği (Oturum Bazlı Sayım):

  function clickCounter() {
      if (typeof(Storage) !== "undefined") {
          if (sessionStorage.clickcount) {
              sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
          } else {
              sessionStorage.clickcount = 1;
          }
          document.getElementById("result").innerHTML = "Bu oturumda butona " + sessionStorage.clickcount + " kez tıkladınız.";
      } else {
          document.getElementById("result").innerHTML = "Tarayıcınız web depolama API'sini desteklememektedir.";
      }
  }
  

  Bu örnekte, tarayıcı sekmesi kapatıldığında clickcount değeri sıfırlanır.

---

4. Web Çalışanları API'si (Web Workers API)

Tanım ve Amaç 📚 Web Çalışanları API'si, web sayfasının performansını etkilemeden arka planda JavaScript kodunu çalıştırmak için kullanılır. Bu sayede, yoğun hesaplama gerektiren işlemler ana iş parçacığını (UI thread) bloke etmez ve kullanıcı arayüzü duyarlı kalır.

Çalışma Prensibi ve İletişim ✅

• Ayrı Dosya: Arka planda çalışacak JavaScript kodu ayrı bir dosyada tanımlanır (örn. demo_workers.js).
• Mesajlaşma: Ana sayfa ile web çalışanı arasındaki iletişim postMessage() metodu aracılığıyla gerçekleşir.
• Performans: Ana iş parçacığından bağımsız çalıştığı için sayfa donmaz veya yavaşlamaz.

Temel Kullanım ve Detaylı Kod Açıklaması 💡

1️⃣ Arka Plan JavaScript Dosyası (demo_workers.js):

var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i); // Ana sayfaya mesaj gönderir
    setTimeout("timedCount()", 500); // Her 500 milisaniyede bir kendini çağırır
}
timedCount();

• postMessage(i): i değişkeninin değerini ana sayfaya gönderir.
• setTimeout(): Belirli aralıklarla fonksiyonun tekrar çalışmasını sağlar.

2️⃣ Ana Sayfa JavaScript Kodu:

var w; // Web çalışanı nesnesi
function startWorker() {
    if (typeof(Worker) !== "undefined") { // Tarayıcı desteği kontrolü
        if (typeof(w) == "undefined") { // Web çalışanı daha önce tanımlanmamışsa
            w = new Worker("demo_workers.js"); // Yeni bir web çalışanı oluşturur
        }
        w.onmessage = function(event) { // Web çalışanından gelen mesajı dinler
            document.getElementById("result").innerHTML = event.data; // Gelen veriyi ekrana yazar
        };
    } else {
        document.getElementById("result").innerHTML = "Tarayıcınız web çalışanını desteklemiyor.";
    }
}

function stopWorker() {
    w.terminate(); // Web çalışanını durdurur
    w = undefined; // Nesneyi sıfırlar
}

• typeof(Worker) !== "undefined": Web Çalışanları API'sinin tarayıcı tarafından desteklenip desteklenmediğini kontrol eder.
• new Worker("demo_workers.js"): Yeni bir web çalışanı oluşturur ve demo_workers.js dosyasını arka planda çalıştırmaya başlar.
• w.onmessage = function(event){...}: Web çalışanından postMessage() ile gönderilen verileri event.data üzerinden yakalar.
• w.terminate(): Çalışan web işçisini durdurur ve kaynaklarını serbest bırakır.

---

5. Sunucu Gönderili Olaylar API'si (Server-Sent Events API - SSE)

Tanım ve Amaç 📚 Sunucu Gönderili Olaylar API'si, sunucu tarafından istemciye tek yönlü, gerçek zamanlı veri akışı sağlamak için kullanılır. Bu, sunucunun istemciye olaylar göndermesine olanak tanır. Web Çalışanları API'si istemci tarafında arka plan işlemleri yaparken, SSE sunucu tarafından başlatılan işlemlerin sonucunu istemciye iletir.

Çalışma Prensibi ve Entegrasyon ✅

• Tek Yönlü İletişim: Sunucudan istemciye doğru sürekli bir veri akışı sağlar.
• Sunucu Tarafı: Genellikle PHP, Node.js gibi sunucu tarafı teknolojilerle entegre çalışır.
• text/event-stream: Sunucu, Content-Type: text/event-stream başlığı ile olay akışı gönderir.
• Olay Formatı: Her olay data: önekiyle başlar ve çift yeni satır karakteri (\n\n) ile sonlanır.

Temel Kullanım ve Detaylı Kod Açıklaması 💡

1️⃣ Sunucu Tarafı PHP Kodu (demo_sse.php):

<?php
header('Content-Type: text/event-stream'); // Olay akışı başlığı
header('Cache-Control: no-cache'); // Önbelleğe alınmasını engeller

$time = date('r'); // Mevcut zamanı alır
echo "data: Sunucu Saati: {$time}\n\n"; // Veriyi "data:" önekiyle gönderir
flush(); // Çıktı tamponunu temizler ve veriyi hemen gönderir
?>

• header('Content-Type: text/event-stream'): Tarayıcıya bu akışın bir olay akışı olduğunu bildirir.
• echo "data: Sunucu Saati: {$time}\n\n";: Sunucu saatini data: önekiyle gönderir ve \n\n ile olayın sonunu belirtir.

2️⃣ İstemci Tarafı JavaScript Kodu:

if (typeof(EventSource) !== "undefined") { // Tarayıcı desteği kontrolü
    var source = new EventSource("demo_sse.php"); // EventSource nesnesi oluşturur
    source.onmessage = function(event) { // Sunucudan gelen mesajı dinler
        document.getElementById("result").innerHTML += event.data + "<br>"; // Gelen veriyi ekrana yazar
    };
} else {
    document.getElementById("result").innerHTML = "Tarayıcınız sunucu gönderili olayları desteklemiyor.";
}

• typeof(EventSource) !== "undefined": SSE API'sinin tarayıcı tarafından desteklenip desteklenmediğini kontrol eder.
• new EventSource("demo_sse.php"): Belirtilen URL'deki sunucu olay akışına bağlanır.
• source.onmessage = function(event){...}: Sunucudan gelen her mesajı event.data özelliği üzerinden yakalar ve işler.

---

Sonuç: Modern Web Geliştirmede HTML API'lerinin Rolü

HTML API'leri, modern web geliştirmenin temel taşlarından biridir. Coğrafi Konum API'si ile kullanıcıların konum bilgilerine güvenli bir şekilde erişim sağlanırken, Sürükle ve Bırak API'si interaktif kullanıcı arayüzleri oluşturmayı kolaylaştırır. Web Depolama API'si, çerezlere kıyasla daha gelişmiş ve kalıcı veri depolama çözümleri sunar. Web Çalışanları API'si, arka plan işlemlerini ana iş parçacığından ayırarak web uygulamalarının performansını ve duyarlılığını artırır. Sunucu Gönderili Olaylar API'si ise sunucudan istemciye gerçek zamanlı veri akışını mümkün kılarak dinamik ve güncel içerik sunumunu destekler. Bu API'ler, web uygulamalarını daha işlevsel, hızlı ve kullanıcı dostu hale getirerek modern web deneyiminin vazgeçilmez unsurlarıdır.