mucahid
.dev
  • Home
  • About
  • Projects
  • Blog
  • Media
  • Contact
  • Links
en

WEB APIs - URL

Written by Mucahid Yazar on November 17, 2021

instagramlinkedincodepenmail
WEB APIs - URL
links
api
url
javascript
tutorial

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 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

Comments

6 Comments

BOOST YOUR FRONTEND CAREER

THE FRONTEND DEVELOPER