۷
آذر

جلسه ۱۰۵ : آموزش کار با تگ template در HTML

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه گذشته به کار با تگ td پرداختیم؛ تگ td یک سلول استاندارد را در یک جدول HTML تعریف می کند.
در ادامه این دوره، به سراغ آموزش کار با تگ template در HTML می رویم.

آموزش کار با تگ template در HTML

به مثال زیر توجه نمایید.
در این مثال از تگ template استفاده شده و این تگ کد HTML را بدون نمایش آن نگه می دارد.

مثال :

<template>
  <h2>Flower</h2>
  <img src="img_white_flower.jpg">
</template>

<h2>Flower</h2>

</template>

تعریف و کاربرد

تگ template تگی است که محتوای خود را از دید کاربر پنهان می کند.
محتوای ارائه شده در تگ template رندر rendere نمی شود بنابرین برای آشکار سازی آن از JavaScript استفاده می گردد.
اگر می خواهید بارها و بارها از کد HTML استفاده نمایید؛ لذا از تگ template استفاده نمایید؛ برای انجام این کار بدون تگ template باید کد HTML را JavaScript بسازید تا از رندر شدن کد توسط مرورگر؛ جلوگیری کنید.

پشتیبانی مرورگرها

عنصر
<template>	بله	بله	بله	بله	بله

تفاوت بین HTML 4.01 و HTML5

تگ template در HTML5 تگ جدیدی محسوب می شود.

خصیصه های سراسری Global Attributes

تگ <template> از خصیصه های سراسری در HTML پشتیبانی می کند.

خصیصه رویداد Event Attributes

تگ <template> از خصیصه رویداد در HTML پشتیبانی می کند.

نمونه های بیشتر

نمونه یک

استفاده از JavaScript برای دسترسی به محتوای یک template و افزودن آن به صفحه:

مثال :

function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}

function showContent() {

var temp = document.getElementsByTagName("template")[0];

var clon = temp.content.cloneNode(true);

document.body.appendChild(clon);

}

نمونه دو

استفاده از محتوای موجود درون یک template برای هر یک از آیتم های درون یک آرایه:

مثال :

<template>
  <div class="myClass">I like: </div>
</template>

<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];

function showContent() {
  var temp, item, a, i;
  // Get the template element:
  temp = document.getElementsByTagName("template")[0];
  // Get the DIV element from the template:
  item = temp.content.querySelector("div");
  // For each item in the array:
  for (i = 0; i < myArr.length; i++) {
    // Create a new node, based on the template:
    a = document.importNode(item, true);
    // Add data from the array:
    a.textContent += myArr[i];
    // Append the new node wherever you like:
    document.body.appendChild(a);
  }
}
</script>

</template>

var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];

function showContent() {

var temp, item, a, i;

// Get the template element:

temp = document.getElementsByTagName("template")[0];

// Get the DIV element from the template:

item = temp.content.querySelector("div");

// For each item in the array:

for (i = 0; i < myArr.length; i++) {

// Create a new node, based on the template:

a = document.importNode(item, true);

// Add data from the array:

a.textContent += myArr[i];

// Append the new node wherever you like:

document.body.appendChild(a);

}

</script>

نمونه سه

تست پشتیبانی مرورگر برای عنصر template :

مثال :

if (document.createElement("template").content) {
  /*Code for browsers that supports the TEMPLATE element*/
} else {
  /*Alternative code for browsers that do not support the TEMPLATE element*/
}

if (document.createElement("template").content) {

/*Code for browsers that supports the TEMPLATE element*/

} else {

/*Alternative code for browsers that do not support the TEMPLATE element*/

}

کلام آخر

در این جلسه به آموزش کار با تگ template در HTML پرداختیم؛ به طور کلی تگ template تگی است که محتوای خود را از دید کاربر پنهان می کند.
در جلسه بعدی به کار با تگ textarea می پردازیم.
با پی وی لرن همراه باشید.

QR: جلسه ۱۰۵ : آموزش کار با تگ template در HTML

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۰۵ : آموزش کار با تگ template در HTML

مقدمه

آموزش کار با تگ template در HTML

تعریف و کاربرد

پشتیبانی مرورگرها

تفاوت بین HTML 4.01 و HTML5

خصیصه های سراسری Global Attributes

خصیصه رویداد Event Attributes

نمونه های بیشتر

نمونه یک

نمونه دو

نمونه سه

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ