Çözüldü Vanilla JavaScript ile component oluşturmak

533388 · 11 Aralık 2023

JavaScript ile component oluşturmak ve HTML sayfasında aynı elementmiş gibi çağırmak istiyorum ama anlamadığım birkaç yer var bunları söyler ve birkaç tutorial önerirseniz sevinirim.
Öncelikle kullandığım bu kaynak nasıl onu söylerseniz sevinirim.
medium linki
Ve bu makaleden incelediğim JavaScript kodlarında neden htmlelement classından miras aldık?
@RaSGooL hocam bakabilir misiniz müsait olunca, diğer arkadaşlar da anlatırlarsa sevinirim.

kaan.w · 11 Aralık 2023

Örnek saat componenti oluşturdum, bakabilirsin.

JavaScript:

class TimeDisplay extends HTMLElement {
  connectedCallback() {
    console.log("Element DOM'a eklendi.");
    this.interval = setInterval(() => {
      this.textContent = new Date().toLocaleTimeString();
    }, 1000);
  }
  disconnectedCallback() {
    console.log("Element DOM'dan çıkarıldı.");
    clearInterval(this.interval);
  }
}

customElements.define("time-display", TimeDisplay);

HTML:

<time-display></time-display>

kaan.w · 12 Aralık 2023

jSnake dedi:
Peki bu disconnectCallback() ne zaman çalışıyor?

Element DOM'dan çıkarıldığında çalışıyor. Ben örnek componentte bunu setInterval element çıktıktan sonra çalışmaya devam etmesin diye onu temizlemek için kullandım.

533388 · 12 Aralık 2023

Bir de nasıl dom ile etkilesime gecerim? Mesela bir sayi arttirma projesi yaparim? Basit bir ornek verir misiniz?

kaan.w · 12 Aralık 2023

jSnake dedi:
Bir de nasıl dom ile etkilesime gecerim? Mesela bir sayi arttirma projesi yaparim? Basit bir ornek verir misiniz?

Burada cevaplandı:

JavaScript: DOM'a etki eden component yapımı

Mesela bir counter App örneği atabilir misiniz ya da mantığını anlatır mısınız? Ama component yapısında olacak şekilde. @Kxaan hocam siz yardımcı olmuştunuz, müsait olunca bir daha bakabilir misiniz acaba?

www.technopat.net

Çözüldü Vanilla JavaScript ile component oluşturmak

Ayrıntılı düzenleme

533388

Hectopat

kaan.w

kaan.w

Megapat

533388

Hectopat

kaan.w

Megapat

JavaScript: DOM'a etki eden component yapımı

Benzer konular