JavaScript Academy · Ders

Blob'lar ve Nesne URL'leri

İndirmeler için blob URL'leri oluşturun ve kullanın.

Blob'lar ve Nesne URL'leri, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

İkili Büyük Nesne Nedir?

İkili büyük nesne, dosya içerikleri gibi değiştirilemez ham verileri bellekte temsil eder. Dosyalar, ad ve değiştirilme tarihi taşıyan özel bir ikili büyük nesne türüdür.

İkili büyük nesneler, tarayıcıda ikili veriler oluşturmanıza, bunları parçalara ayırmanıza ve indirmenize olanak tanır.

İkili Büyük Nesne Oluşturma

Bir ikili büyük nesneyi parça dizisinden (dizeler, arabellekler ve diğer ikili büyük nesneler) ve MIME type belirten bir seçenekler nesnesinden oluşturun.

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

console.log(blob.size);
console.log(blob.type);

Birden Çok Parçadan İkili Büyük Nesne

Parçalar dizisi sırayla birleştirilir. Dizeleri ve türü belirtilmiş dizileri birlikte kullanabilirsiniz.

const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
  type: 'text/plain'
});

console.log(blob.size + ' bytes');

İkili Büyük Nesneyi Yeniden Okuma

İkili büyük nesneler, içeriklerini okumak için Promise tabanlı text(), arrayBuffer() ve stream() yöntemlerini sunar.

async function show() {
  const blob = new Blob(['stored data'], { type: 'text/plain' });
  const text = await blob.text();
  console.log(text);
}

show();

İkili Büyük Nesneyi Parçalara Ayırma

blob.slice(start, end), tamamını kopyalamadan özgünün bir bölümünü kapsayan yeni bir ikili büyük nesne döndürür. Parçalı yüklemeler için kullanışlıdır.

const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);

console.log(chunk.size);

Nesne URL'si Oluşturma

URL.createObjectURL(blob), bellekteki ikili büyük nesneyi gösteren kısa ömürlü bir URL döndürür. Bunu bir img.src değeri, bağlantı href'i veya video kaynağı olarak kullanabilirsiniz.

const blob = new Blob(['data'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log(url.startsWith('blob:'));

Yüklenen Görüntüyü Önizleme

Seçilen bir dosyayı nesne URL'sine dönüştürüp anında önizlemek için bir görüntü öğesine atayın; sunucuya gidip gelmeniz gerekmez.

const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;

console.log('preview ready');

İndirmeyi Tetikleme

Bir ikili büyük nesne oluşturun, nesne URL'si üretin ve oluşturulan dosyayı kaydetmek için download özniteliğine sahip geçici bir bağlantıya tıklayın.

function download(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

download('report data', 'report.txt');

Nesne URL'lerini İptal Etme

Nesne URL'leri, URL.revokeObjectURL(url) çağrılana kadar ikili büyük nesneyi bellekte tutar. Bellek sızıntılarını önlemek için işiniz bittiğinde her zaman iptal edin.

const blob = new Blob(['temp'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');

İkili Büyük Nesneler ve JavaScript Nesne Gösterimi

Verileri doğru MIME türüyle bir ikili büyük nesneye dizeleştirerek indirilebilir bir JavaScript nesne gösterimi dosyası oluşturabilirsiniz.

const data = { name: 'Ada', score: 99 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});

console.log(blob.type);
console.log(blob.size + ' bytes');

İkili Büyük Nesneler Neden Önemlidir?

İkili büyük nesneler ve nesne URL'leri, ikili verileri tamamen istemci tarafında işlemenizi sağlar: yüklemeleri önizleyebilir, indirmeler oluşturabilir ve büyük dosyaları parçalara ayırabilirsiniz. İşiniz bittiğinde URL'leri iptal etmeyi unutmayın. Sırada dosyaları bir sunucuya veri getirme API'siyle göndereceksiniz.

const blob = new Blob(['export'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
console.log('csv url created:', url.startsWith('blob:'));
URL.revokeObjectURL(url);

Kısa Kontrol

İndirme için bir nesne URL'si kullandıktan sonra belleği boşaltmak için ne çağırmalısınız?

Özet: İkili Büyük Nesneler ve Nesne URL'leri

İkili verileri işlemeyi öğrendiniz:

new Blob(parts, { type }), değiştirilemez ikili veriler oluşturur.
text() ve arrayBuffer() ile okuyun; slice() ile parçalara ayırın.
URL.createObjectURL, önizlemeler ve indirmeler için kullanılabilir bir blob: URL'si oluşturur.
Belleği boşaltmak için işiniz bittiğinde her zaman URL.revokeObjectURL çağırın.

Sıkça Sorulan Sorular

“Blob'lar ve Nesne URL'leri” dersi ücretsiz mi?

Evet — “Blob'lar ve Nesne URL'leri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Blob'lar ve Nesne URL'leri” dersinde ne öğreneceğim?

İndirmeler için blob URL'leri oluşturun ve kullanın. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Blob'lar ve Nesne URL'leri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön