JavaScript (ES6+) ve DOM Manipülasyonu

Modern JavaScript sözdizimi, olay yönetimi, fetch ile veri alma ve DOM'u güvenli biçimde güncelleme.

Orta 45 dk 42 görüntülenme

Başlanmadı

Bu derste

ES6+ ile daha okunur kod
DOM ve olaylar
fetch + async/await

ES6+ ile daha okunur kod

const kullanici = { ad: 'Ferdi', rol: 'geliştirici' };
const { ad, rol } = kullanici;              // yapı bozma
const selam = `Merhaba ${ad} (${rol})`;     // şablon metni
const kareler = [1, 2, 3].map((n) => n * n);

var yerine const / let kullanın; ok fonksiyonları kısa geri çağrılar için idealdir.

DOM ve olaylar

document.querySelector('#ara').addEventListener('input', (e) => {
  const q = e.target.value.toLowerCase();
  document.querySelectorAll('[data-ders]').forEach((kart) => {
    kart.hidden = !kart.dataset.ders.includes(q);
  });
});

fetch + async/await

async function dersleriGetir() {
  const yanit = await fetch('/api/dersler', { headers: { Accept: 'application/json' } });
  if (!yanit.ok) throw new Error('Sunucu hatası');
  return yanit.json();
}

Kullanıcıdan gelen metni ekrana yazarken innerHTML yerine textContent kullanın; aksi hâlde XSS açığı oluşur.

## ES6+ ile daha okunur kod

```js
const kullanici = { ad: 'Ferdi', rol: 'geliştirici' };
const { ad, rol } = kullanici;              // yapı bozma
const selam = `Merhaba ${ad} (${rol})`;     // şablon metni
const kareler = [1, 2, 3].map((n) => n * n);
```

`var` yerine `const` / `let` kullanın; ok fonksiyonları kısa geri çağrılar için idealdir.

## DOM ve olaylar

```js
document.querySelector('#ara').addEventListener('input', (e) => {
  const q = e.target.value.toLowerCase();
  document.querySelectorAll('[data-ders]').forEach((kart) => {
    kart.hidden = !kart.dataset.ders.includes(q);
  });
});
```

## fetch + async/await

```js
async function dersleriGetir() {
  const yanit = await fetch('/api/dersler', { headers: { Accept: 'application/json' } });
  if (!yanit.ok) throw new Error('Sunucu hatası');
  return yanit.json();
}
```

> [!UYARI] Kullanıcıdan gelen metni ekrana yazarken `innerHTML` yerine `textContent` kullanın; aksi hâlde XSS açığı oluşur.

Yükleniyor…

Etiketler #javascript#es6#dom#fetch#async

Dersi bitirdin mi?

Tamamlandı olarak işaretle, yol ilerlemen güncellensin ve sıradaki derse geç.