استفاده از خاصیت های دلخواه در HTML5

بسم الله الرحمن الرحیم

یکی از مهمترین امکانی که به HTML5 اضافه شده خاصیت های (Attibute) دلخواهی که می شه به تگ ها اضافه کرد است. که در این پست در این مورد بحث خواهیم کرد و دستورات جاوااسکریپ در این رابطه در مورد چگونگی دسترسی به محتوای خاصیت مربوطه و حذف و یا تغییر محتواش خواهیم پرداخت و نمونه کدهایی هم در این مورد خواهیم داشت.

البته قبل از HTML5 می شد به تگ ها خاصیت هایی به نام هایی که می خواستیم افزود که در این صورت باید قید معتبر (Valid) بودن صفحه و کدهامون رو می زدیم، که در HTML5 این موضوع حل شده و مشکلی از لحاظ معتبر بودن صفحه مون نخواهیم داشت.

ایجاد یه تگ با خاصیت دلخواه
اول از همه یه تگ div در قسمت body ایجاد کرده و همینطور یک ID هم بهش می دیم که بتونیم از طریق جاوااسکریپت تگ مربوطه رو شناسایی کنیم و attribute رو هم به اسم و مقدار data-adeveloper-fisrt-post="HTML5 Attributes" بهش می دیم:

<div id="adeveloper" data-adeveloper-fisrt-post="HTML5 Attributes">
The First Blog Post Of Adeveloper.org
</div>

همونطوری که می بینید خاصیت (Attribute) اضافه شده به تگ با مقدار data-* شروع می شه و بجای ستاره هم اسم یا اسامی دلخواهمون رو که می خواهیم خاصیت مربوطه داشته باشه رو اضافه کرده و سپس مقدار مون رو هم بهش اختصاص می دیم.

که تنها راه معتبر در HTML5 برای افزودن خاصیت به تگ هامون به این شیوه هستش و باید این نکته رو رعایت کنیم، در غیر اینصورت کدمون معتبر نخواهد بود.

همینطور بهتره قبل از استفاده از این روش مطمئن شید که خاصیت های استاندارد ای برای کاری که می خواهید انجام بدید وجود نداشته باشه و سپس خاصیت دلخواهتون رو به روش فوق به تگ مورد نظر اضافه کنید.

و اسم خاصیت مورد نظر باید حداقل یک کاراکتر باشه و همونطو که گفته شد data- به ابتداش افزوده شده باشه و همینطور در اسم خاصیت نباید از حروف بزرگ استفاده بشه.

مقدار خاصیت هم، هر کاراکتری می تونه تو خودش داشته باشه و محدودتی درش وجود نداره.


جاوااسکریپت
برای نشون دادن کار کدهای جاوااسکریپت که در رویداد خاصی اتفاق بیفتن یه دکمه به صفحه مون اضافه می کنیم که هنگام فشرده شدن، تابع مودنظرمون رو در جاوااسکریپت صدا کرده و همینطور نام ID ای که به تگ فوق داده بودیم رو هم به تابع مربوطه تحویل بده:

<input type="button" value="Execute JS Code" onclick="ourJsDunction('adeveloper')">

برای دریافت مقدار خاصیت تعریف شده در تگ DIV از دو روش زیر می تونیم استفاده کنیم:

- استفاده از getAttribute
راه مرسوم برای دریافت خاصیت ها در جاوااسکریپت استفاده از تابع getAttribute هستش که در این روش از این تابع برای گرفتن مقدار خاصیت مربوطه استفاده خواهیم کرد. که در تکه کد زیر نحوه انجام این کار نشون داده شده:

function ourJsFunction(tagID)
{
var ourDiv = document.getElementById(tagID),
attributeValue = ourDiv.getAttribute('data-adeveloper-fisrt-post');

console.log(attributeValue);
}
و همونطوری که می بینید، مقدار گرفته شده توسط دستور console.log در کنسول مرورگر نمایش داده خواهد شد.

- استفاده از Dataset
راه دیگه استفاده از ویژگی (Property) بنام dataset در تگ مربوطه هست. البته این روش رو فعلا مرورگرهای زیادی ساپورت نمی کنن و برای استفاده از این روش بهتره به فکر مرورگرهای دیگه هم باشید و از راه حل های جایگزین برای مرورگرهایی که ساپورت نمی کنن استفاده کنید.

تکه کد زیر دقیقا کاری رو که تابع نوشته شده فوق انجام می ده رو نشون می ده:

function ourJsFunction(tagID)
{
var ourDiv = document.getElementById(tagID),
/* This Part Of code is changed. */
attributeValue = ourDiv.dataset.adeveloperFisrtPost;

console.log(attributeValue);
}

در این روش dataset برای اشاره به خاصیت مورد نظر از طریق دستورات جاوااسکریپت، کلمه data- رو از اول اسم خاصیت تعریف شده حذف می کنیم و در صورتی که در اسم خاصیت ای (Attribute) که تعیین کرده ایم از خط تیره ( - ) استفاده شده باشه، باید بصورت Camal-Case در جاوااسکریپت نوشته بشه.

دقیقا مثل مثال فوق که نام خاصیت data-adeveloper-fisrt-post هستش، که ابتدا کلمه data- رو از ابتدای اسم خاصیت حذف کرده و سپس بخاطر اینکه از خط تیره ( - ) در اسم خاصیت استفاده شده، باید بصورت Camal-Case نوشته بشه که در نهایت اسم خاصیت از data-adeveloper-fisrt-post به adeveloperFisrtPost تبدیل می شه.

به این نکته توجه کنید که این تبدیل، برای اشاره به خاصیت مورد نظر و برای دستورات JavaScript هست و در طرف HTML نبایستی تغییری کنه.


دیگر توابع و متدها
تا اینجای کار، با نحوه دریافت مقادیر خاصیت هایی که تعریف کرده بودم آشنا شدیم. اما این تمام کاری که می شه با خاصیت های تعریف شده کرد نیست و بلکه می شه مقادیر خاصیت ها رو تغییر و یا حتی حذفشون کرد.

توسط تکه دستورات زیر می تونیم مقادیر خاصیت هایی که تعریف کرده ایم رو تغییر بدیم:

این تکه کد با استفاده از تابع setAttribute مقدار خاصیت مورد نظرمون رو تغییر می ده:

function ourJsFunction(tagID)
{
var ourDiv = document.getElementById(tagID);
/*This part of the code, changes the value of the attribute using setAttribute function.*/
ourDiv.setAttribute('data-adeveloper-fisrt-post', 'The New Value To Be Replaced With');
}

و برای تغییر دادن مقدار خاصیت مورد نظر از طریق dataset به روش زیر می تونیم عمل کنیم:

function ourJsFunction(tagID)
{
var ourDiv = document.getElementById(tagID);
/*This part of the code, changes the value of the attribute using dataset property.*/
ourDiv.dataset.adeveloperFisrtPost = 'The New Value To Be Replaced With';
}

همچنین برای حذف خاصیت مورد نظر می تونیم از تابع removeAttribute استفاده کرده و یا از طریق dataset مقدار خاصیت رو برابر Null قرار بدیم:

تکه کد زیر برای حذف خاصیت مورد نظر با استفاده از removeAttribute :

function ourJsFunction(tagID)
{
var ourDiv = document.getElementById(tagID);
/*Removing the Attribute using the removeAttribute*/
ourDiv.removeAttribute('data-adeveloper-fisrt-post');
}

و همچنین تکه کد زیر برای خذف خاصیت مورد نظرمون با استفاده از dataset :

function ourJsFunction(tagID)
{
var ourDiv = document.getElementById(tagID);
/*Removing the Attribute using the dataset*/
ourDiv.dataset.adeveloperFisrtPost = NULL;
}

کلام آخر
متاسفانه در حال حاضر اکثر مرورگر ها از dataset پشتیبانی نمی کنن که می شه بجاش از توابع setAttribute و getAttribute و removeAttribute استفاده کرد.


و همینطور نکته ای که موند، اینه که منظور از خاصیت دلخواه، همون Custom Attributes هستش :-)

این لینک در مورد ساپورت مروگرها در مورد dataset و خاصیت های دلخواه، در مورد ساپورت مرورگرها: +


سورس فایل دمو: +

منبع: +

پست‌های معروف از این وبلاگ

رویدادها در MySQL

بسم الله الرحمن الرحیم رویدادهای  MySQL‌ در نسخه 5.1.6 به MySQL اضافه شدن و راه‌ دیگری رو برای کارهای زمانبندی شده و یا Cron Job پیشنهاد می دن . از رویداد ها می شه برای پشتیبان گیری، حذف رکوردهای قدیمی و به درد نخور، جمع آوری اطلاعات برای گزارش‌دهی و … استفاده کرد . برخلاف trigger های استاندارد که در شرایط خاص ای که تعیین می شن، اجرا می شن، یک رویداد چیزیه که با‌گذشت زمان اجرا می شن و گاهی اوقات هم بهشون به عنوان trigger های زمانی (Temporal Trigger) اشاره می شه . رویداد ها رو می شه طوری زمان‌بندی کرد که یا یکبار اجرا بشن و یا طی زمان های مشخصی چندین بار در همان مواقع اجرا کنید . در این مقاله مواردی که برای شروع کار با رویدادها نیاز دارید، بهتون توضیح داده خواهد شد . مثل راه‌اندازی زمانبند رویداد (event scheduler) ، افزودن رویداد ها که یکبار و یا چندین بار اجرا بشن، مشاهده رویدادهای موجود و نیز ویرایش رویدادها . همینطور مثالی رو درباره نحوه استفاده از رویدادهای MySQL برای ایجاد بلاگ که دارای پست های زمانبندی شده هست رو هم به صورت عملی بررسی خواهیم کرد . راه‌اندازی ز
بیشتر بخوانيد

لیست شهر و استان‌های ایران

توجه:  لیست شهر و استانهای ایران در   روز ۸ام  دی ماه سال ۱۳۹۳  آپدیت شد. گاهی پیش می یاد تو وب اپلیکیشن یا وب سایتی که درست می کنیم نیازه لیست استان‌ها و شهر ها رو هم درش قرار بدیم . از دردسرهای این موضوع می تونه نداشتن این لیست باشه و اینکه ندونیم چطوری تهیش کنیم . برخی ممکنه اقدام به خریدش بکنن، یا خودشون به طور دستی بشینن درست کنن، از سایت های دیگه کش برن :) و هر چی . خیلی وقت پیش حالا به طریقی :) به همراه برادرم این لیست رو تهیه کردیم و البته مثل اینکه قدیمی شده بود و لیست استان‌ها ( یکی ) و شهرها ( خیلی ) تغییر کرده بود که واسه همین خاطر نشتیم دوباره این لیست رو تهیه کردم . البته این لیست بصورت فایل sql هست و لیست استان ها در یه جدول و لیست شهر‌ها، از طریق id استان ها می شه شهر‌هاش رو بدست آورد و چیز خاص دیگه ای نداره . همین :) لینک دانلود فایل مربوطه : لیست شهر و استان‌های ایران
بیشتر بخوانيد

مدیریت مخارج، برنامه‌ای برای اندروید

تصویر
نمی دونم از کجا شروع کنم ! شما می دونین بگین خوب؟ :) یه مدتی می‌شه واسه خودم محدودیتی گذاشتم که فلان قدر بیشتر تو یه ماه خرج نکنم، یعنی به نوعی خرج و مخارجمو کنترل کنم که الکی پول‌های نداشتمو هدر ندم و در کنارش هم می شه گفت پس اندازی بتونم واسه خودم جمع کنم . واسه این کار تو یه برنامه معمولی نوت برداری تو گوشی کارامو انجام می‌دادم که خیلی اذیت کننده بود . یکیش اینکه هر بار باید لیست رو باز می‌کردم و به انتهای صفحه می‌رفتم که خوب کمی وقت تلف می کنه، بعد یه ماشین حساب نیازه که بخاطر تنبلیم مخم رو به کار نگیره خیلی :) و بعدم نوشتن جملاتی که برخیش هر بار تکرای هست و حساب مقدار باقیمانده . از طرف دیگه، یادگیری اندروید هم یه مدتی بود به کلم زده بود، با اینکه سعی می‌کنم از این شاخه به اون شاخه نپرم، ولی خوب نمی شه ظاهراً :) ، این شد که زدم این برنامه رو نوشتم که بیشتر استفاده شخصی داره و مشکلات بالارو به نوعی واسم حل می کنه و از طرف دیگه ای هم شروع یادگیری اندروید با یه پروژه شد واسم . سورس کد، بصورت free و open source تو گیتهاب هست واسه کسانی که حوصله ور رفتن با کد دیگ
بیشتر بخوانيد