Uzun bir aradan sonra tekrardan herkese esenlikler. Hepinize güzel, verimli bir 2022 yılı diliyorum. Bugün URL API ını inceleyeceğiz. Keyifli okumalar diyerek sizleri direkt konuya bırakıyorum.

URL API arayüzü, urllerimizi parse, construct, normalize, and encode etmek için kullanılır. URL komponentini bu şekilde kolaylıkla okuyabilir ve düzenleyebiliriz. Aşağıdaki step by step örnekle bunu çok daha iyi anlayacağız. Eğer URL arayüzünü browserınız desteklemiyorsa window arayüzünün URL propertysi ilede bunu yapabilirsiniz.

Get Started

Baslarken ilk olarak bir URL in yapısı nasıl, gelin onu öğrenelim. Aşağıdaki resim bunu bize gayet açık bir şekilde anlatıyor ve gösteriyor.

new URL(‘https://example.com/’)

Buradaki gibi URL tanımı yapabilir ve bunu aşağıdaki gibi bir değişkene atayabiliriz.

let x = new URL(‘https://example.com/’)

Ve istersek bu değişkenden aşağıdaki gibi URL imizi çekip çıkartabiliriz.

x.toString() // https://example.com

Veya param ve queryler ekleyebiliriz.

x.searchParams.append(‘category’, ‘electronic’)
x.toString() // https://example.com/?category=electronic
x.searchPArams.append(‘sort’, ‘top’)
x.toString() // https://example.com/?category=electronic&sort=top

Veya bunu .href ile de yapabiliriz aşağıdaki gibi

x.href // https://example.com/?category=electronic&sort=top

Veya istersek aşağıdaki gibi host yani asıl domain adını direkt alabiliriz.

x.host // example.com

Veya url’in scheme, domain ve portunu sadece istiyorsak origin ile bunu aşağıdaki gibi basitçe halledebiliriz. Biz ilk tanımlarken bir port vermediğimiz için URL imize bizde port gözükmeyecektir tabi ki.

x.origin // https://example.com

URL imize aşağıdaki gibi username password bilgileri ayarlayabiliriz, atayabiliriz.

x.username = ‘test’
x.username // test
x.href // https://test:@example.com/?category=electronic&sort=top
x.password = ‘12345’
x.password // 12345
x.href // https://test:12345@example.com/?category=electronic&sort=top

Veya aşağıdaki gibi direkt tanımlayarakda URL imizi oluşturabiliriz.

const url = new URL('https://anonymous:flabada@example.com');
console.log(url.password) // Logs "flabada"

pathname lerimizide direkt ayarlayabilir, atayabiliriz aşağıdaki gibi.

x.pathname = ‘ankara’
x.pathname // ankara
x.href // https://test:12345@example.com/ankara?category=electronic&sort=top

Port larımızda aynı pathnamelerimiz gibi ayarlanabilir ve atanabilir.

x.port= ‘3000’
x.port // 3000
x.href // https://test:12345@example.com:3000/ankara?category=electronic&sort=top

URL imizin protocolunun ne olduğunuda .protocol property si ile öğrenebiliriz. : işareti de dahil aşağıdaki gibi.

x.protocol= ‘https:’

Ve bunu da aslında manipule edebilir ve değiştirebiliriz, diğer properties lerde olduğu gibi.

x.protocol= ‘http:’
x.protocol // 'http:'
x.href // http://test:12345@example.com:3000/ankara?category=electronic&sort=top

URL imizdeki ? ile başlayarak bütün parametrelerin stringini döner bize. Diğer property ler gibi buda değiştirilebilir.

x.search = ‘?category=electronic&sort=top’
x.search// '?category=electronic&sort=popular'
x.href // http://test:12345@example.com:3000/ankara?category=electronic&sort=popular

METHODS

.href property si gibi bütün URL i verir bize bu ikisi. Fakat ikisi de yeniden assign edilemez, yeniden value atanamaz diyebiliriz fark olarak.

x.toString() = http://test:12345@example.com:3000/ankara?category=electronic&sort=popular
x.toJSON() = http://test:12345@example.com:3000/ankara?category=electronic&sort=popular

STATIC METHODS

Belirli bir object için URL oluşturur.

object URL ihtiyacı olan bir değerdir. Genellikle bir input diyebiliriz.

var url = URL.createObjectURL(inputElement.files[0]);
imgElement.src = url;
URL.createObjectURL(object, options);

options ise bu oluşturduğumuz URL objecti için bir ayarlar kısmıdir. Mesela aşağıda oneTimeOnly optionsunu vererek bu URL değişkeninin aslında revokeObjectURL e ihtiyacı olmadığını çünkü sadece 1 defa kullanılacağını söyleriz.

oURL = URL.createObjectURL(file, {oneTimeOnly: true});

URL.createObjectURL ile oluşturulmuş URL leri revoke etme işlemini bu static method ile yaparız.

KAYNAKLAR

https://developer.mozilla.org/en-US/docs/Web/API/URL

Frontend Developer @getir in Istanbul

Frontend Developer @getir in Istanbul