CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Module vs script

JavaScript kursu · Orta seviye · Ders 128/134

type='module' ile modül ve script arasındaki farkları (strict mode vb.) öğrenirsin.

Modül ve script farkı

Modüller otomatik olarak katı modda (strict mode) çalışır. Bu, "use strict" yazmana gerek kalmadan daha güvenli bir ortam sağlar.

Örneğin let olmadan x = 5; yazmak hata verir. Bu, sessiz hataları önler.

Eski tip script dosyalarında katı mod varsayılan değildir; modüllerde ise zorunludur.

Ertelenmiş yükleme

Modüller varsayılan olarak ertelenmiş (deferred) yüklenir. Bu, tarayıcının HTML'i tamamen ayrıştırdıktan sonra modülü çalıştırdığı anlamına gelir.

Böylece document.querySelector gibi çağrılar, öğeler hazır olduğu için çalışır. Eski script'lerde defer özniteliği gerekirdi; modüllerde bu varsaylandır.

Ayrıca modüller her zaman CORS istekleriyle yüklenir.

Uygulama Modül üst düzeyi

Bir modülde const VERSION = "1.0" tanımla, sonra en üst düzeyde this değerini console.log ile yazdır.

Örnek çözümü göster 
Bir const tanımla ve this'i console.log ile yazdır.
Örnek çözüm:
const VERSION = "1.0";
console.log(this);

Kendini test et

  1. Modüller otomatik olarak hangi modda çalışır?

    • Katı mod (strict)
    • Sloppy mod
    • Yarım mod
    • Rastgele mod
    Cevabı göster

    Katı mod (strict) — Doğru! Modüller otomatik olarak katı modda çalışır.

  2. Modülde this nedir?

    console.log(____); // modülde undefined
    Cevabı göster 
    console.log(this); // modülde undefined

  3. Modül davranışlarını eşleştir

    strict mode
    modüllerde otomatik
    defer
    DOM hazır olunca çalış
    this
    modülde undefined
    top-level let
    global değil

Orta seviye bölümündeki tüm dersler

1 Arrow fonksiyonlar

  1. Arrow fonksiyon sözdizimi
  2. Tek satır ve blok gövde
  3. Arrow ile parametreler
  4. this bağlamı
  5. Arrow vs function
  6. Özet - Arrow fonksiyonlar

2 Kapsam

  1. Global kapsam
  2. Function kapsam
  3. Block scope
  4. Değişken gölgeleme
  5. Hoisting
  6. Özet - Kapsam

3 Closure

  1. Closure nedir?
  2. Üretici fonksiyonlar
  3. Anonim fonksiyon (IIFE)
  4. Module pattern
  5. Closure tuzakları
  6. Özet - Closure

4 DOM temelleri

  1. DOM nedir?
  2. getElementById
  3. querySelector
  4. querySelectorAll
  5. textContent ve innerText
  6. Özet - DOM temelleri

5 DOM manipülasyonu

  1. createElement ile öğe oluşturma
  2. appendChild ve removeChild
  3. classList API
  4. setAttribute ve removeAttribute
  5. innerHTML ve insertAdjacentHTML
  6. Özet - DOM manipülasyonu

6 Olaylar

  1. addEventListener temelleri
  2. Click olayları
  3. Mouse olayları
  4. Klavye olayları
  5. Event nesnesi
  6. Özet - Olaylar

7 Olay yönetimi

  1. Event bubbling
  2. stopPropagation
  3. Event delegation
  4. preventDefault
  5. once ve passive seçenekleri
  6. Özet - Olay yönetimi

8 Yerel depolama

  1. localStorage temelleri
  2. sessionStorage
  3. JSON ile veri saklama
  4. Storage temizleme
  5. Storage olayları
  6. Özet - Yerel depolama

9 Proje: Yapılacaklar uygulaması

  1. Proje: Yapılacaklar uygulaması
  2. Arayüz iskeleti
  3. Görev ekleme
  4. Görev tamamlama ve silme - DOM
  5. Proje sonu - Todo DOM

10 Formlar

  1. Form öğelerine erişim
  2. Input değerini okuma
  3. Form submit olayı
  4. Basit doğrulama
  5. Checkbox ve radio
  6. Özet - Formlar

11 Zamanlayıcılar

  1. setTimeout
  2. setInterval
  3. clearInterval ile durdurma
  4. requestAnimationFrame
  5. Zamanlayıcı temizleme
  6. Özet - Zamanlayıcılar

12 Callback'ler

  1. Callback fonksiyonlar
  2. Asenkron callback'ler
  3. Hata-önce callback'ler
  4. Callback hell
  5. Callback'leri yönetme
  6. Özet - Callback'ler

13 Promise'ler

  1. Promise nedir?
  2. then ile başarıyı yakalama
  3. catch ile hata yakalama
  4. finally ile temizlik
  5. Promise.all ve Promise.race
  6. Özet - Promise'ler

14 async/await

  1. async fonksiyonlar
  2. await operatörü
  3. Asenkron hata yönetimi
  4. Paralel await
  5. await tümceleri
  6. Özet - async/await

15 Fetch API

  1. fetch temelleri
  2. JSON okuma
  3. HTTP headers
  4. POST istekleri
  5. HTTP hata yönetimi
  6. Özet - Fetch API

16 Proje: Hava durumu paneli

  1. Proje: Hava durumu paneli
  2. Arayüz ve şehir girişi
  3. Fetch ile veri çekme
  4. Veriyi DOM'a basma
  5. Proje sonu - Hava durumu

17 Proje: Galeri uygulaması

  1. Proje: Galeri uygulaması
  2. API'den görsel listesi çekme
  3. Galeri ızgarası oluşturma
  4. Büyük görsel görünümü
  5. Proje sonu - Galeri

18 Hata yönetimi

  1. Özel hata sınıfları
  2. Hata yayılımı
  3. Çoklu catch desenleri
  4. Asenkron hata stratejileri
  5. Global hata yakalama
  6. Özet - Hata yönetimi

19 JSON

  1. JSON formatı
  2. JSON.parse
  3. JSON.stringify
  4. structuredClone
  5. JSON sınırlandırmaları
  6. Özet - JSON

20 Tarih ve saat

  1. Date nesnesi oluşturma
  2. Tarih bileşenlerini okuma
  3. Tarih formatlama
  4. Intl.DateTimeFormat
  5. Tarih hesaplamaları
  6. Özet - Tarih ve saat

21 RegExp temelleri

  1. RegExp sözdizimi
  2. Karakter sınıfları
  3. Quantifiers
  4. test ve match
  5. replace ve split ile regex
  6. Özet - RegExp temelleri

22 Modüller

  1. Modül nedir?
  2. Named export
  3. Default export
  4. import deyimi
  5. Module vs script
  6. Özet - Modüller

23 Orta seviye finali

  1. Meydan okuma - DOM uygulaması
  2. Meydan okuma - Asenkron akış
  3. Meydan okuma - Form ve depolama
  4. Meydan okuma - Zamanlayıcı ve animasyon
  5. Meydan okuma - Modüler yapı