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(‘urlLink’)

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

.searchParams.append(‘key’, ‘value’)

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

.href

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

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

.host

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

x.host // example.com

.origin

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

.username & .password

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

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

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

.protocol

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

.search

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

.toString() & .toJSON()

.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

URL.createObjectURL(object, options)

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**](https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL "revokeObjectURL()") e ihtiyacı olmadığını çünkü sadece 1 defa kullanılacağını söyleriz.

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

URL.revokeObjectURL(Object)

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