Bilinmesi Gereken Javascript Web API’ler

Javascript Web API’ler, tarayıcı tarafından sağlanan ve Javascriptin web sayfalarıyla etkileşimde bulunmasını sağlayan araç ve protokollerdir. Bu API’ler Javascriptin temel özelliklerinin ötesine geçerek, web geliştiricilerine tarayıcı işlevselliği ve web içerikleri üzerinde daha fazla kontrol sağlamaktadır.

Document Object Model (DOM) API: DOM, HTML ve XML belgelerinin programatik olarak incelenmesini, değiştirilmesini, ve güncellenmesini sağlar. JavaScript ile DOM API’sini kullanarak, belge yapısını, stilini ve içeriğini dinamik olarak değiştirebilirsiniz.

document.getElementById('myElement').innerHTML = 'Merhaba Dünya!';

Fetch API: Modern bir alternatif olarak XMLHttpRequest API’sinin yerini alan Fetch API, ağ isteklerini (örneğin, web sayfalarına HTTP istekleri) gerçekleştirmek için kullanılır. Bu API, Promise tabanlı bir yapıya sahiptir ve daha okunabilir, esnek kod yazmayı sağlar.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Hata:', error));

Canvas API: 2D ve WebGL için 3D grafikler oluşturmak için kullanılır. Bu API, grafikler, oyun grafikleri, sanat eserleri ve diğer görsel imgeleri dinamik olarak oluşturmanıza olanak tanır.

<canvas id="myCanvas" width="200" height="100"></canvas>

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 200, 100);

Web Storage API: Web Storage, daha güvenli ve performanslı bir şekilde kullanıcı tarayıcısında veri saklamanızı sağlar. LocalStorage ve SessionStorage olmak üzere iki ana mekanizma sunar.

localStorage.setItem('anahtar', 'değer');
console.log(localStorage.getItem('anahtar'));

Geolocation API: Kullanıcının coğrafi konum bilgisini almanızı sağlar. Bu API, kullanıcı izniyle çalışır ve mobil cihazlarda genellikle daha doğru sonuçlar verir.

navigator.geolocation.getCurrentPosition(function(position) {
  console.log('Enlem: ' + position.coords.latitude);
  console.log('Boylam: ' + position.coords.longitude);
});

File API: Kullanıcıların yerel dosyalarını okumanıza olanak tanır. Bu, dosya yükleme işlemlerini daha interaktif hale getirmek için kullanılabilir.

<input type="file" id="fileInput">

var input = document.getElementById('fileInput');
input.addEventListener('change', function(e) {
  var file = input.files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    console.log(reader.result);
  };
  reader.readAsText(file);
});

Web Workers API: JavaScript’in ana iş parçacığı dışında arka planda kod çalıştırmanıza olanak tanır. Bu, uzun süren işlemlerin kullanıcı arayüzünü bloke etmesini önler.

// main.js
var myWorker = new Worker('worker.js');

myWorker.onmessage = function(e) {
  console.log('Mesaj alındı: ', e.data);
};

myWorker.postMessage('Merhaba');

// worker.js
onmessage = function(e) {
  console.log('Mesaj gönderildi: ', e.data);
  postMessage('Merhaba Ana Sayfa');
};

WebSockets API: İki yönlü iletişim kanalları açarak sunucu ile gerçek zamanlı, sürekli bir bağlantı kurmanızı sağlar. Bu, özellikle çevrimiçi oyunlar ve sohbet uygulamaları için kullanışlıdır.

var socket = new WebSocket('wss://example.com/socket');

socket.onopen = function(event) {
  socket.send('Merhaba Sunucu!');
};

socket.onmessage = function(event) {
  console.log('Mesaj alındı: ' + event.data);
};

Service Workers API: Web uygulamalarının arka planda çalışmasını, önbelleğe alma ve çevrimdışı işlevsellik gibi özellikleri desteklemesini sağlar.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker kaydedildi:', registration);
    })
    .catch(function(error) {
      console.log('Service Worker kaydı başarısız:', error);
    });
}

Audio ve Video API’leri (HTMLMediaElement): Web sayfalarında ses ve video oynatımını kontrol etmek için kullanılır.

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Video yüklenemiyor.
</video>

var myVideo = document.getElementById('myVideo');

function playVideo() {
  myVideo.play();
}

function pauseVideo() {
  myVideo.pause();
}

Buraya kadar okuduysanız teşekkür ederim. Elimden geldiğince sade ve anlaşılır bir şekilde anlatmaya çalıştım.Bu makaleyi yararlı bulduysanız beni sosyal medya üzerinden takip edebilirsiniz. Eğer bana bir kahve ısmarlamak isterseniz aşağıdaki linki kullanabilirsiniz.

BuymeCoffee || Linkedin