0Pricing
HTML Academy · Ders

template Öğesi: İşlenmeyen İçerik

Etkinleştirilene kadar ayrıştırılan ancak görüntülenmeyen HTML tanımlayın

template Öğesi: İşlenmeyen İçerik, CoddyKit'te ücretsiz bir HTML 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, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

template Öğesi Nedir

<template> öğesi ayrıştırılan ancak görüntülenmeyen HTML içerir:

  • İçerik DOM'dadır ancak görüntülenmez
  • İçindeki betikler çalışmaz
  • Görseller yüklenmez
  • CSS uygulanmaz
  • Klonlanana kadar 'etkisizdir'

Temel template Kullanımı

Bir template tanımlayıp içeriğini inceleyin:

<template id="card-template">
  <div class="card">
    <h2 class="card-title"></h2>
    <p class="card-body"></p>
    <a class="card-link">Learn more</a>
  </div>
</template>

<script>
const tmpl = document.getElementById('card-template');
console.log(tmpl.content); // DocumentFragment
console.log(tmpl.content.querySelector('.card')); // The div node
// Not rendered on the page yet
</script>

template.content

.content özelliği bir DocumentFragment döndürür:

const template = document.querySelector('#card-template');
const fragment = template.content;

// fragment is a DocumentFragment — a lightweight DOM container
// It is not attached to the document
// Modifying fragment does NOT affect the original template
// You must clone it before using it

template Klonlama

template içeriğinin bir kopyasını oluşturmak için cloneNode(true) kullanın:

const tmpl = document.getElementById('card-template');
const clone = tmpl.content.cloneNode(true);  // true = deep clone

// Modify the clone:
clone.querySelector('.card-title').textContent = 'HTML5 Guide';
clone.querySelector('.card-body').textContent = 'Learn HTML5 from scratch.';
clone.querySelector('.card-link').href = '/html5';

// Add to the page:
document.getElementById('card-list').appendChild(clone);

template ile Liste Oluşturma

Tek bir template'ten birden çok öğe oluşturun:

<ul id="users"></ul>

<template id="user-tmpl">
  <li class="user">
    <strong class="user-name"></strong>
    <span class="user-role"></span>
  </li>
</template>

<script>
const tmpl = document.getElementById('user-tmpl');
const list = document.getElementById('users');

const users = [
  { name: 'Alice', role: 'Admin' },
  { name: 'Bob', role: 'Editor' },
];

users.forEach(user => {
  const clone = tmpl.content.cloneNode(true);
  clone.querySelector('.user-name').textContent = user.name;
  clone.querySelector('.user-role').textContent = user.role;
  list.appendChild(clone);
});
</script>

innerHTML Yerine Neden template Kullanılır

template, innerHTML'den daha güvenli ve daha verimlidir:

// innerHTML approach (less safe):
container.innerHTML = `<div>${userProvidedContent}</div>`;
// Risk: XSS if userProvidedContent is not sanitized

// template approach (safer):
const clone = tmpl.content.cloneNode(true);
clone.querySelector('.name').textContent = userProvidedContent;
// textContent sets text only — HTML tags are not parsed
// No XSS risk

İç İçe Verilerle template

İç içe yapılara sahip karmaşık template'ler:

<template id="post-tmpl">
  <article>
    <header>
      <h2 class="title"></h2>
      <time class="date" datetime=""></time>
    </header>
    <p class="excerpt"></p>
    <a class="read-more">Read more</a>
  </article>
</template>

<script>
function renderPost(post) {
  const clone = document.getElementById('post-tmpl').content.cloneNode(true);
  clone.querySelector('.title').textContent = post.title;
  clone.querySelector('.date').textContent = post.date;
  clone.querySelector('.date').dateTime = post.isoDate;
  clone.querySelector('.excerpt').textContent = post.excerpt;
  clone.querySelector('.read-more').href = post.url;
  return clone;
}
</script>

template Görüntülenmez

template içeriğinin kullanıcılardan gizli olduğunu doğrulayın:

<template id="hidden-tmpl">
  <script>alert('This runs when cloned, not when defined');</script>
  <img src="wont-load-yet.jpg" alt="Won't load until cloned">
</template>
<!-- The script and image are NOT activated until you clone and append the template -->
<!-- This makes templates safe for defining content without side effects -->

template ile script type=text/html Karşılaştırması

Eski kalıp ile modern template'in karşılaştırması:

<!-- Old pattern (script hack): -->
<script type="text/html" id="old-tmpl">
  <div class="card">...</div>
</script>
<script>
const html = document.getElementById('old-tmpl').innerHTML;
container.innerHTML = html;  // XSS risk!
</script>

<!-- Modern template: -->
<template id="card-tmpl">...</template>
<!-- Safer, semantic, no XSS risk -->

Bileşen Kütüphanelerinde template

Vanilla bileşen kütüphanelerindeki template kalıpları:

class UserCard extends HTMLElement {
  connectedCallback() {
    const tmpl = document.getElementById('user-card-tmpl').content.cloneNode(true);
    tmpl.querySelector('.name').textContent = this.getAttribute('name');
    this.appendChild(tmpl);
  }
}

Hızlı Kontrol

cloneNode(true), template öğesinin content özelliği üzerinde ne yapar?

Tekrar: template Öğesi

template için temel noktalar:

  • Etkisiz HTML — ayrıştırılır ancak görüntülenmez
  • template.content — bir DocumentFragment döndürür
  • content.cloneNode(true) — değiştirilmeye ve eklenmeye hazır derin kopya
  • innerHTML'den daha güvenli — textContent üzerinden HTML eklenmesi gerçekleşmez
  • Özel öğelerde, tekrarlanan kullanıcı arayüzü kalıplarında ve Web Bileşenlerinde kullanılır

Sıkça Sorulan Sorular

“template Öğesi: İşlenmeyen İçerik” dersi ücretsiz mi?

Evet — “template Öğesi: İşlenmeyen İçerik” 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 HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“template Öğesi: İşlenmeyen İçerik” dersinde ne öğreneceğim?

Etkinleştirilene kadar ayrıştırılan ancak görüntülenmeyen HTML tanımlayın HTML 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.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML 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.

“template Öğesi: İşlenmeyen İçerik” 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 HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML 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

  1. template Öğesi: İşlenmeyen İçerik
  2. cloneNode ile Şablonları Klonlama
  3. JavaScript ile Görüntülemede template Kullanımı
  4. Şablonlar ve innerHTML Güvenliği
← HTML Academy Sayfasına Dön