JavaScript Academy · Ders

Özel Öğeler Tanımlama

Öğeleri customElements API'siyle kaydedin.

Özel Öğeler Tanımlama, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 1. 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.

Özel Öğeler Nedir?

Özel öğeler, JavaScript sınıfları tarafından desteklenen kendi HTML etiketlerinizi tanımlamanıza olanak tanır. div yığınlarını birbirine bağlamak yerine <user-card> gibi yeniden kullanılabilir ve kendi içinde çalışan bir bileşen oluşturursunuz.

Web Bileşenleri standardının bir parçasıdır.
Herhangi bir çerçeve gerektirmeden tarayıcılarda yerel olarak çalışırlar.
Özel öğe adının tire içermesi gerekir (örneğin my-button).

customElements Kayıt Defteri

Tarayıcı, window.customElements adresinde genel bir kayıt defteri sunar. customElements.define(name, constructor) çağrısıyla yeni bir etiket kaydedersiniz.

Tanımlandıktan sonra belgedeki eşleşen her etiket, sınıfınızın bir örneğine dönüştürülür.

// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);

// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.

HTMLElement'i Genişletme

Özel öğe, extends HTMLElement ifadesini kullanan bir sınıftır. Temel sınıf, öğenize tüm standart DOM yeteneklerini (öznitelikler, olaylar ve biçimlendirme) sağlar.

Öğenin doğru biçimde başlatılması için kurucuda her zaman önce super() çağrısını yapın.

class HelloWorld extends HTMLElement {
  constructor() {
    super(); // required, sets up the element
  }
}

customElements.define('hello-world', HelloWorld);

İçerik Oluşturma

Öğenin içinde this.innerHTML değerini ayarlayabilir veya içerik oluşturmak için DOM yöntemlerini kullanabilirsiniz. Yaygın bir yaklaşım, öğe sayfaya bağlandığında görüntülemeyi gerçekleştirmektir.

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Hello from a custom element!</p>';
  }
}

customElements.define('hello-world', HelloWorld);

Öğeyi HTML'de Kullanma

Kayıttan sonra etiketinizi yerleşik herhangi bir öğe gibi kullanın. Etiketi doğrudan işaretlemeye yerleştirebilir veya document.createElement ile oluşturabilirsiniz.

// In HTML:
// <hello-world></hello-world>

// Or in JavaScript:
const el = document.createElement('hello-world');
document.body.appendChild(el);

Kurucunun Kuralları

Kurucu, bir örnek oluşturulduğunda çalışır. Uyulması gereken katı kurallar vardır:

Önce super() çağrısını yapın.
Burada öznitelikleri veya alt öğeleri incelemeyin ya da eklemeyin.
DOM işlemlerini connectedCallback aşamasına erteleyin.

Kurucuyu yalnızca başlangıç durumunu ve olay dinleyicisi kurulumunu yapmak için kullanın.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0; // safe: just internal state
  }
}

customElements.define('counter-button', CounterButton);

Davranış Ekleme

Öğeniz gerçek bir DOM düğümü olduğundan, olay dinleyicileri ekleyebilir ve etkileşime yanıt olarak içeriğini güncelleyebilirsiniz.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.textContent = 'Clicked 0 times';
    this.addEventListener('click', () => {
      this.count++;
      this.textContent = 'Clicked ' + this.count + ' times';
    });
  }
}
customElements.define('counter-button', CounterButton);

Tire Gereksinimi

Özel öğe adları bir tire içermelidir. Bu, adların mevcut veya gelecekteki yerleşik HTML öğeleriyle hiçbir zaman çakışmamasını garanti eder.

my-widget geçerlidir.
mywidget geçersizdir ve hata fırlatır.
Adlar büyük/küçük harfe duyarlı değildir, ancak küçük harfle yazılır.

// Valid:
customElements.define('app-header', AppHeader);

// Invalid - throws SyntaxError (no hyphen):
// customElements.define('appheader', AppHeader);

whenDefined ve get

İki kullanışlı kayıt yöntemi vardır:

customElements.get(name), yapıcıyı döndürür; kayıtlı değilse undefined döndürür.
customElements.whenDefined(name), öğe tanımlandığında çözümlenen bir vaat döndürür.

customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

const Ctor = customElements.get('hello-world');

Yalnızca Bir Kez Tanımlama

Her ad yalnızca bir kez kaydedilebilir. Daha önce kullanılmış bir adla define çağrısı yapmak hata fırlatır. Paylaşılan modüllerde iki kez kaydı önleyin.

if (!customElements.get('hello-world')) {
  customElements.define('hello-world', HelloWorld);
}

Özel Öğeler Neden Önemlidir

Özel öğeler, çatıdan bağımsız, kapsüllenmiş ve yeniden kullanılabilir kullanıcı arayüzleri sağlar. Bu öğeler:

Bileşenlerin yeniden kullanımını her teknoloji yığını arasında standartlaştırır.
Tarayıcının kendi yaşam döngüsüyle bütünleşir.
Gölge DOM ve şablonlarla doğal biçimde birlikte çalışır (bunlar ileride ele alınacaktır).

Hızlı Kontrol

Özel öğe tanımlama konusunu anlayışınızı sınayın.

Özet

Özel öğeleri nasıl tanımlayacağınızı öğrendiniz:

customElements.define(name, class) bir etiketi kaydeder.
Sınıf extends HTMLElement ifadesini kullanır ve önce super() çağrısı yapar.
Adlar bir tire içermelidir.
İçeriği yapıcıda değil, connectedCallback içinde render edin.
get ve whenDefined, kayıt durumunu kontrol etmenize yardımcı olur.

Sırada, özel bir öğenin tam yaşam döngüsünü inceleyeceğiz.

Sıkça Sorulan Sorular

“Özel Öğeler Tanımlama” dersi ücretsiz mi?

Evet — “Özel Öğeler Tanımlama” 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.

“Özel Öğeler Tanımlama” dersinde ne öğreneceğim?

Öğeleri customElements API'siyle kaydedin. 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 1. dersidir.

“Özel Öğeler Tanımlama” 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