Photo by Kris Mikael Krister on Unsplash

WebAPI Kullanım Yöntemleri

Browser API Nedir?

API’nin ne olduğundan başlayarak BrowserAPI ne olduğunu ne işe yaradığını anlatmaya çalışacağım.

Onur Dayıbaşı

Published in

Frontend Development With JS

5 min readMay 9, 2020

API. (Application Programming Interface), uygulamanın gerçekleştirim detaylarının soyutlanarak diğer yazılım/script bu uygulama işlevlerini basit şekilde çağırabilmemizi sağlayan programlama arayüzleridir.

Bunu şu şekilde de düşünebilirsiniz. Kullanıcı arayüzden bir uygulamayı kullandığında örneğin Spotify’da bir müzik çaldığında veya Twitter bir twit attığında veya Youtube bir video beğenmek. Bu işlemleri kullanıcı arayüzünden değilde programlama ile yapmaktır. Bunu ancak bu uygulamalar size bir API sağladığında yapabilirsiniz. Örneğin aşağıdaki gibi API olmalı.

SpotifyAPI.playMusic(musicId)
TwitterAPI.sendTwit(msg)
YoutubeAPI.likeVideo(videoId)

Peki API’ye neden ihtiyaç var ?

Geliştiricilerin API kullanarak uygulamalar geliştirmesine imkan sağlaması. Geliştiricileri uygulamanın gerçekleştirim detayları ile boğarsanız geliştirici kullanacağı uygulamanın kodunu anlamaktan kendi kodunu geliştiremez.
Standartları belirlemek. Bu sayede uygulamanın ne yaptığı versiyonları sizin yaptığınız uygulamayı bozmayacak.

Peki şimdi gelelim BrowserAPI neye denir ?

Biraz akıl yürüttüğümüzde Tarayıcının bir takım işlevlerini kullanmak için sağlanan programlama arayüzdür. Daha sonrasında Web teknolojilerinin , web uygulamalarının gelişmesi ile bu ihtiyaçlar artmış sadece Tarayıcının sağladığı Browser API yeterli olmamayı başlamış, HTML5 yetenekleri ile birlikte mobil cihazların bataryasına, GPS, ışık sensörlerine erişim ihtiyacı olmuş, oyunlar ve 3 boyutlu görseller için ekran kartına GPU erişim ihtiyacı doğmuş, paralel işler çalıştırabilmek için CPU erişim ihtiyacı doğmuş, ağ kartına network erişim ihtiyacı olmuş ve tarayıcıda geliştirdiğiniz uygulamanın kullanabildiği bir çok WebAPI ortaya çıkmıştır. Ben burda Browser API ile BOM yani HTML5 öncesi tarayıcıların JS sağladığı API anlatıyor olacağım. Şu anda aşağıdaki MDN linkindeki şekilde gelişmiş halinede WebAPI diyor olacağım.

MDN Web API Spec

1. Browser API

Biraz eskiye dönelim. HTML5 olmadığı eski dönemlere gidersek. Tarayıcının üzerinde sadece web üzerinde JS eriştiği API’ye BOM yani Browser Object Model denir.

BOM için tarayıcıda Developer(Geliştirici) Console açıp window yazmanız yeterlidir. Bu tarayıcı penceresi içerisindeki window objesini size sağlayacaktır.

window

Bu window nesnesi size içerisinde bulunan navigator, history, screen, location , console ve document (DOM)objeleri üzerinden tarayıcıyı kullanabilmenizi sağlar. Bunun yanında window alert, popup, timing ve bir çok fonksiyonu barındırır.

window.document içerisinde iframe tag içerisinde başka web sitelerinden içerikleri ekleyebilirsiniz.

<iframe src=”https://www.onurdayibasi.com/"></iframe>

Bu durumda DOM içerisinde bunlar ek bir document olacak şekilde iframe elemanın içeriisnde tekrar bir html olacak şekilde render edilir. Aynı zamanda window.frameElements, window.frames içerisinde bu frame yönetilmesini sağlayacak yapıyı oluşturur. Bu sayede aşağıdaki şekilde DOM iç içe document modelini desteklemiş olur.

→ window 
 → document
     → iframe
          → document
     → iframe
          → document

1.1 BOM ile DOM arasındaki Fark Nedir ?

BOM (Browser Object Model) bir standart değildir. Tarayıcılar tarafından tarayıcıya ait işlevlere ve bunun içerisindeki standart objelere erişmeye sağlayan bir modeldir.

DOM( Document Object Model) ise bu window içerisinde bulunan document objesidir. Bütün web sayfa içerikleri bu standartda geliştiriliz.(W3C Standartı, DOM Spec) İlgili web sayfası bu DOM Spec göre parent-child tree node şeklinde oluşturulur. Bu konuda DOM API. kullanımı konusunda bir yazı yazmıştım daha detaylı bilgi almak için bu yazıyıda okuyabilirsiniz.

Özetle, BOM içeriğin çizileceği çerçeve ve onun yönetiminden sorunluyken, DOM bunun içerisindeki içerik olarak düşünebilirsiniz.

1.2 Window Temel Özellikleri

[Window objesinin referansı] daha detaylı olarak window objesini inceleyebilirsiniz.

tarayıcı uzunlukları

innerWidth/innerHeight =>content cizildiği iç alanı viewport
outerWidth/outerHeight =>scrollbar ve toolbar tüm browser uzunluklar

alert, popup fonksiyonları ve status alanı

alert("Selam")
const result = confirm("Is it Ok")
const result = prompt("Hangisi","Birincisi");
defaultStatus="Selam" //Status bilgisi

timing fonksiyonları

setInterval(function(){ alert("Hello"); }, 3000);
setTimeout(function(){ alert("Hello"); }, 3000);

tarayıcı window metodları ve kullanıcı etkileşimi

open/close/print/stop
focus/blur
resize/move/scroll

1.3 Screen

Yukarıda tarayıcı ekran uzunluklarından bahsetmiştik. Peki bu tarayıcı tüm ekranı kaplamıyorsa , desktop veya mobil ekranın ekran uzunluklarını nasıl alabiliriz.

//window.screen
availWidth/availHeight =>taskbarsız kullanıcının ekran uzunlukları
width/height => kullanıcının ekran uzunlukları
colorDepth/pixelDepth => ekran color derinklikleri 24bit

1.4 Navigator

Tarayıcı hakkında bilgiler içerir. Bu bilgileri kullanarak biz istatistikler ve buna göre kodu değiştirebilir ve buna göre kullanıcıya daha kullanılabilir ekranlar sunabiliriz.

//window.navigator
appCodeName => Mozilla
browserName => Netscape
appVersion => 5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
userAgent => Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
product (Browser Engine)  => Gecko
platform => MacIntel

userAgent üzerinden JS Engine → Gecko , Rendering Engine → AppleWebkit, İşletim Sistemi → MacOS, Tarayıcı Versiyonu Chrome/81.0.4044 olduğunu görebilirsiniz.

//window.navigator (kullanıcının spesifik bilgileri)
cookieEnabled  => true
language =>  tr-TR
onLine => true

1.5 History

Kullanıcının gezmiş olduğu URL tutarak bunun üzerinde ileriye ve geriye gitmeyi sağlar. Lenght bilgisi sıfırsa mesela kodda geriye gitme düğmesini iptal edebilirsiniz :)

//window.history
length => kaç tane URL gezmişsin history tutar.back()  => bir germiş sayfaya gider 
forward() =>  bir sonraki sayfaye gider (geri gelmişseniz)
go() =>  // window.history.go(-4);

1.6 Location

Document nesnenin içeriğinin yüklendiği URL bilgisine erişmemiz sağlar.

https://nodejs.org/docs/latest/api/url.html

//window.location
href,hostname,protocol,hash, origin, search, pathname => erişmenizi sağlarassign(), replace(), reload() => sayfayı yeniden yüklemeyi veya farklı sayfalara yönelmeyi sağlar.

1.6 Console

Geliştirici console’dur. Bu objenin metodları sayesinde console alanına birçok bilgiyi aktarabilirsiniz En çok kullanılan yöntemi console.log bunun haricinde de birçok fonksiyonu bulunuyor detay için Console linkine bakabilirsiniz.

1.7 Storage

Tarayıcının üzerinde tutabildiğimiz temelde 3 tane store (veri saklayabileceğimiz kısım bulunur)

Cookie: Kullanıcı ile sunucu arasında kurulan iletişimde , bağlantı kopması veya kullanıcının tarayıcıyı kapatması ve tekrar bağlanması sonrasında kullanıcı bilgileri vb girdilerini kaybetmemek için bu bilgiler küçük cookie bilgileri olarak tutulur. Bu bilgiler hem sunucu , hemde client tarafından erişilebilir. Genelde istemci/client sunucudan istekleri sonucunda sunucu tarafından set edilir ve yönetilir.

document.cookie = information, expirataionDate, path 
Size Max 4Kb , 
Security httpOnly
Expiration Genelde sunucu tarafından atanır.

LocalStorage

Tarayıcının local cache, key val olarak veriler tutulur ve sunucu tarafından bu bilgilere erişilemez.

window.localStorage
localStorage.setItem("key", "val");
localStorage.getItem("key");

Session Storage

Tarayıcının session açık olduğu sürece saklanan verilerdir. Tarayıcı sekmesini(tab) kapattığınızda ilgili bilgiler kaybolur. Veri sunucuya gönderilmez.

window.sessionStorage
sessionStorage.setItem('key', 'value');
sessionStorage.getItem("key");

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.