Proje sonu - Widget

Tüm parçaları birleştirip noscript yedeği ve data-* hook'ları ekleyip dokümante edersin.

Son adım: birleştir ve yedekle

Son derste tüm parçaları birleştirip widget'a sağlamlık katıyoruz. Üç şey ekleyeceğiz:

<noscript>: JavaScript kapalıyken yedek mesaj
data-* öznitelikleri: JavaScript kancaları
Belge üstüne bir açıklama yorumu

Böylece panel hem JavaScript'siz ortamda çalışır hem de dış betikler widget'ı kolayca bulur. Bu üç küçük ekleme widget'ı yayına hazır hale getirir.

noscript ve data-* kancaları

<noscript> etiketinin içeriği yalnızca JavaScript devre dışıyken gösterilir. Widget'ımıza 'Bu panel JavaScript gerektirir' gibi bir mesaj koyarız.

data-* öznitelikleri ise özel veri taşır; örneğin data-refresh="60" panelin her 60 saniyede bir yenileneceğini belirtir. Bu öznitelikler JavaScript'in widget'ı bulup yönetmesine yardımcı olur.

Böylece panel hem erişilebilir hem de betiklerle denetlenebilir kalır.

Uygulama Widget'ı tamamla: yorum, data-*, noscript

Önceki dersin widget'ını al. Üç şey ekle:

1) Belgenin en üstüne, <!DOCTYPE>'tan önce bir açıklama yorumu koy: .

2) <section> etiketine id="sales-widget", data-widget="sales" ve data-refresh="60" özniteliklerini ekle.

3) </section>'dan sonra, <template>'den önce bir <noscript> ekle; içine <p>Bu panel JavaScript gerektirir; lütfen JavaScript'i etkinleştirin.</p> koy.

Örnek çözümü göster

<!-- Satış Paneli widget: KPA, tablo ve şablon içerir -->
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Satış Paneli</title>
  </head>
  <body>
    <section id="sales-widget" data-widget="sales" data-refresh="60">
      <header>
        <h1>Satış Paneli</h1>
      </header>
      <main>
        <article>
          <figure>
            <figcaption>Aylık ciro</figcaption>
            <p>₺124.500</p>
          </figure>
          <table>
            <thead>
              <tr>
                <th>Ürün</th>
                <th>Satış</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Pamuklu tişört</td>
                <td>320</td>
              </tr>
              <tr>
                <td>Keten pantolon</td>
                <td>184</td>
              </tr>
            </tbody>
          </table>
        </article>
      </main>
    </section>
    <noscript>
      <p>Bu panel JavaScript gerektirir; lütfen JavaScript'i etkinleştirin.</p>
    </noscript>
    <template id="widget-template">
      <article>
        <header>
          <h2>Yeni Satış Paneli</h2>
        </header>
        <slot name="content">
          <p>Veri bekleniyor</p>
        </slot>
      </article>
    </template>
  </body>
</html>

Widget'ın tamam!

Tebrikler! 5 dersin sonunda elinde gerçek bir satış paneli widget'ı var: anlamsal kabuk, KPA ve tablo, yeniden kullanılabilir şablon ve yedekli çalışma hep birlikte.

Bu desenleri kendi panellerine taşıyabilirsin: header/main/article kabuğu, figure+table veri yapısı, template+slot yeniden kullanım ve noscript+data-* kancaları.

Sıradaki adım: bu widget'ı bir CSS kursuyla biçimlendirmek veya JavaScript ile canlı veriye bağlamak.

Kendini test et

<noscript> etiketi ne zaman gösterilir?
- JavaScript devre dışıyken veya yüklenemediğinde
- Yalnızca CSS devre dışıyken
- Sadece mobil tarayıcılarda
- Hiçbir zaman, yalnızca yorum olarak işlenir
Cevabı göster

JavaScript devre dışıyken veya yüklenemediğinde — Doğru! noscript içeriği JavaScript devre dışıyken veya yüklenemediğinde gösterilir.

data-* özniteliğini tamamla

<section id="sales-widget" data-____="60">
</section>

Cevabı göster

<section id="sales-widget" data-refresh="60">
</section>

Son adım kavramlarını eşleştir

noscript

Script kapalıyken içerik
data-*

Özel veri özniteliği
id

Benzersiz kimlik
comment

Belge içi açıklama

Sıradaki ders: Meydan okuma - Responsive görsel

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler