یہ پوسٹ جاوا اسکرپٹ میں ڈیٹا کی خصوصیات کے استعمال کی وضاحت کرے گی۔
جاوا اسکرپٹ میں ڈیٹا انتساب کا استعمال کیسے کریں؟
جاوا اسکرپٹ میں، ' ڈیٹا ” اوصاف اضافی معلومات کو ذخیرہ کرنے کے لیے استعمال کیے جاتے ہیں جو ویب صفحہ پر ظاہر نہیں ہوتی ہیں۔ یہ معلومات صارف کی ضروریات کے مطابق لکھی، رسائی، پڑھی اور متحرک طور پر تبدیل کی جا سکتی ہیں۔ اس حصے نے زیر بحث کام کو عملی طور پر ڈیٹا کی خصوصیات پر انجام دیا۔
نحو
< عنصر ڈیٹا -*= 'کچھ قدر' >
مندرجہ بالا نحو میں:
- ' عنصر ” HTML عنصر کی نمائندگی کرتا ہے جس میں ڈیٹا کا وصف استعمال ہوتا ہے۔
- ' ڈیٹا-* ' ایک سے زیادہ (*) ڈیٹا کی خصوصیات کو ظاہر کرتا ہے جو سابقہ (data-) سے شروع ہوتا ہے یعنی ڈیٹا کی ورڈ کے بعد ہائفن ہوتا ہے۔
- کچھ قدر: یہ ڈیٹا انتساب کی قدر کی وضاحت کرتا ہے۔
اب، مندرجہ بالا نحو کو استعمال کرتے ہوئے ڈیٹا وصف بنانے کے لیے۔
ڈیٹا کی خصوصیات بنائیں
< div id = 'myDiv' ڈیٹا - نام = 'ایلون' ڈیٹا - عمر = '40' ڈیٹا - صنف = 'مرد' >> div >بیان کردہ ایک لائن کا HTML کوڈ درج ذیل کو تخلیق کرتا ہے ' ڈیٹا کا نام '،' ڈیٹا کی عمر '، اور ' ڈیٹا-جنس 'div' عنصر کے اندر کی خصوصیات جن کی id 'myDiv' ہے۔
آئیے تخلیق کردہ ڈیٹا کے اوصاف کو پڑھیں/اس تک رسائی حاصل کریں۔
مثال 1: 'ڈیٹا سیٹ' پراپرٹی کا استعمال کرتے ہوئے ڈیٹا انتساب کو پڑھیں/اس تک رسائی حاصل کریں۔
یہ مثال مخصوص یا تمام ڈیٹا انتسابات کو پڑھنے/ رسائی کے لیے 'ڈیٹا سیٹ' کی خاصیت کا اطلاق کرتی ہے۔
پہلے دیکھو ' بٹن 'عنصر جو کہتا ہے' jsFunc() 'جب اس کا تعلق ہے' کلک پر بٹن پر کلک کرنے پر واقعہ شروع ہوتا ہے:
< بٹن پر کلک کریں۔ = 'jsFunc()' > ڈیٹا انتساب تک رسائی حاصل کریں۔ بٹن >اب، 'jsFunc()' تعریف پر آگے بڑھیں:
< سکرپٹ >فنکشن jsFunc ( ) {
const عنصر = دستاویز getElementById ( 'myDiv' ) ;
تسلی. لاگ ( عنصر ڈیٹاسیٹ ) ;
}
سکرپٹ >
مندرجہ بالا کوڈ لائنوں میں:
- ' jsFunc() ' پہلے ایک متغیر 'ایلیم' کا اعلان کرتا ہے جو لاگو ہوتا ہے ' document.getElementById() اس کی id 'myDiv' کے ذریعے شامل کردہ div عنصر تک رسائی کا طریقہ۔
- اگلا، یہ استعمال کرتا ہے ' console.log() 'طریقہ جو استعمال کرے گا' ڈیٹاسیٹ رسائی شدہ div عنصر کے ڈیٹا کی خصوصیات تک رسائی حاصل کرنے اور انہیں ویب کنسول میں ڈسپلے کرنے کے لیے پراپرٹی۔
آؤٹ پٹ
ویب کنسول کھولنے کے لیے F12 دبائیں:
یہ دیکھا جا سکتا ہے کہ دیئے گئے بٹن پر کلک کرنے پر، کنسول ایک ' DOMStringMap div عنصر کے تمام ڈیٹا اوصاف پر مشتمل ہے۔
مخصوص قدر تک رسائی حاصل کریں۔
اگر صارف مخصوص ڈیٹا انتساب تک رسائی حاصل کرنا چاہتا ہے تو اس کا نام 'ڈیٹا سیٹ' پراپرٹی کے ساتھ اس طرح بتائیں:
< سکرپٹ >فنکشن حاصل کریں ( ) {
const عنصر = دستاویز getElementById ( 'myDiv' ) ;
تسلی. لاگ ( عنصر ڈیٹاسیٹ . نام ) ;
}
سکرپٹ >
اس وقت، 'نام' ڈیٹا کی خصوصیات تک رسائی حاصل کی جاتی ہے ' ڈیٹاسیٹ ' جائیداد.
آؤٹ پٹ
یہ دیکھا جا سکتا ہے کہ کنسول بٹن پر کلک کرنے پر صرف مخصوص ڈیٹا کی خصوصیات کی قدر دکھا رہا ہے۔
مثال 2: 'getAttribute()' طریقہ استعمال کرتے ہوئے ڈیٹا انتساب کو پڑھیں/اس تک رسائی حاصل کریں
یہ مثال ڈیٹا انتساب کو پڑھنے/اس تک رسائی کے لیے 'getAttribute()' طریقہ استعمال کرتی ہے۔
اس منظر نامے میں، پہلی مثال کا بٹن عنصر بھی شامل ہے:
< بٹن پر کلک کریں۔ = 'jsFunc()' > ڈیٹا انتساب تک رسائی حاصل کریں۔ بٹن >آئیے 'getAttribute()' طریقہ کار کی فعالیت دیکھیں:
< سکرپٹ >فنکشن jsFunc ( ) {
const عنصر = دستاویز getElementById ( 'myDiv' ) ;
تسلی. لاگ ( عنصر getAttribute ( 'ڈیٹا کا نام' ) ) ;
تسلی. لاگ ( عنصر getAttribute ( 'ڈیٹا کی عمر' ) ) ;
تسلی. لاگ ( عنصر getAttribute ( 'ڈیٹا-جنس' ) ) ;
}
سکرپٹ >
مندرجہ بالا کوڈ کے ٹکڑوں میں:
- 'ایلیم' متغیر کا اطلاق ہوتا ہے ' document.getElementById() اس کی id 'myDiv' کا استعمال کرتے ہوئے شامل کردہ div عنصر تک رسائی حاصل کرنے کا طریقہ۔
- اگلا، ' console.log() 'طریقہ استعمال کرتا ہے' getAttribute() حاصل کردہ div عنصر کی مخصوص 'ڈیٹا' وصف قدر حاصل کرنے کا طریقہ اور پھر اسے ویب کنسول میں ڈسپلے کریں۔
- یہی کام بقیہ مخصوص ڈیٹا انتساب تک رسائی کے لیے انجام دیا جاتا ہے۔
نوٹ: 'getAttribute()' طریقہ ڈیٹا انتساب کو سابقہ 'data' کے ساتھ متعین کرتا ہے جس کے بعد ایک ہائفن (-) یعنی (data-) ہوتا ہے جس کی 'dataset()' پراپرٹی استعمال کرتے وقت ضرورت نہیں ہوتی ہے۔
آؤٹ پٹ
مندرجہ بالا آؤٹ پٹ بٹن پر کلک کرنے پر تمام مخصوص ڈیٹا انتساب کی قدروں کو دکھاتا ہے۔
مثال 3: 'ڈیٹا سیٹ' پراپرٹی کا استعمال کرتے ہوئے ڈیٹا انتساب لکھیں۔
یہ مثال 'ڈیٹا سیٹ' پراپرٹی کا استعمال کرتے ہوئے ڈیٹا کی خصوصیات لکھتی ہے۔
بٹن عنصر کے مواد کو موجودہ منظر نامے کے مطابق تبدیل کیا جاتا ہے:
< بٹن پر کلک کریں۔ = 'jsFunc()' > ڈیٹا انتساب لکھیں۔ بٹن >اب، شامل کردہ div عنصر میں ڈیٹا کا نیا وصف لکھیں:
< سکرپٹ >فنکشن jsFunc ( ) {
const عنصر = دستاویز getElementById ( 'myDiv' ) ;
عنصر ڈیٹاسیٹ . آئی ڈی = 'شخص'
تسلی. لاگ ( عنصر ڈیٹاسیٹ ) ;
}
سکرپٹ >
مندرجہ بالا کوڈ بلاک میں:
- ' ڈیٹاسیٹ ' پراپرٹی ایک مخصوص سٹرنگ ویلیو کے ساتھ ایک نیا ڈیٹا انتساب کا نام 'id' لکھتی ہے۔
- اگلا، ' conolse.log() ویب کنسول میں نئے لکھے گئے ڈیٹا انتساب پر مشتمل 'DOMSstringMap' انٹرفیس کو ظاہر کرنے کے لیے 'ڈیٹا سیٹ' پراپرٹی کا استعمال کرتا ہے۔
آؤٹ پٹ
یہاں، کنسول 'DOMSstringMap' دکھاتا ہے جس میں ڈیٹا سیٹ کی خاصیت کا استعمال کرتے ہوئے لکھا گیا نیا ڈیٹا انتساب 'id' ہوتا ہے۔
مثال 4: ڈیٹا کی خصوصیت کی قدر کو اپ ڈیٹ کریں۔
یہ مثال 'ڈیٹا سیٹ' پراپرٹی کی مدد سے کسی مخصوص ڈیٹا انتساب کی موجودہ قدر کو اپ ڈیٹ کرتی ہے۔
بٹن عنصر کے متن کو دیئے گئے منظر نامے کے مطابق تبدیل کیا جاتا ہے:
< بٹن پر کلک کریں۔ = 'jsFunc()' > ڈیٹا انتساب کو اپ ڈیٹ کریں۔ بٹن >اب، جاوا اسکرپٹ سیکشن پر جائیں:
< سکرپٹ >فنکشن jsFunc ( ) {
const عنصر = دستاویز getElementById ( 'myDiv' ) ;
عنصر ڈیٹاسیٹ . نام = 'جان'
تسلی. لاگ ( عنصر ڈیٹاسیٹ . نام ) ;
}
سکرپٹ >
مندرجہ بالا کوڈ بلاک میں، مخصوص 'نام' ڈیٹا انتساب کی قدر کو 'کی مدد سے اپ ڈیٹ کیا جاتا ہے۔ ڈیٹاسیٹ ' جائیداد.
آؤٹ پٹ
کنسول بٹن پر کلک کرنے پر مخصوص ڈیٹا کی خصوصیات کی تازہ ترین قیمت دکھاتا ہے۔
مثال 5: ڈیٹا انتساب کو حذف کریں۔
یہ مثال 'ڈیلیٹ' کلیدی لفظ کا استعمال کرکے مخصوص ڈیٹا وصف کو حذف کرتی ہے۔
بٹن عنصر کا متن ضرورت کے مطابق تبدیل کیا جاتا ہے:
< بٹن پر کلک کریں۔ = 'jsFunc()' > ڈیٹا انتساب کو حذف کریں۔ بٹن >اب، جاوا اسکرپٹ کوڈ بلاک کی پیروی کریں:
< سکرپٹ >فنکشن jsFunc ( ) {
const عنصر = دستاویز getElementById ( 'myDiv' ) ;
عنصر کو حذف کریں. ڈیٹاسیٹ . عمر ;
تسلی. لاگ ( عنصر ڈیٹاسیٹ . عمر ) ;
}
سکرپٹ >
مندرجہ بالا کوڈ کا ٹکڑا اس کی وضاحت کرتا ہے ' حذف کریں رسائی شدہ ڈیٹا انتساب کو حذف کرنے کے لیے 'ڈیٹا سیٹ' کی خاصیت والا کلیدی لفظ۔
آؤٹ پٹ
یہ مشاہدہ کیا گیا ہے کہ کنسول ظاہر کرتا ہے ' غیر متعینہ بٹن پر کلک کریں جو واضح طور پر اس بات کی تصدیق کرتا ہے کہ رسائی شدہ ڈیٹا انتساب کو حذف کر دیا گیا ہے۔
نتیجہ
JavaScript میں، ڈیٹا کی خصوصیات کو مختلف طریقوں سے استعمال کیا جا سکتا ہے جیسے کہ پڑھنا، رسائی، لکھنا، اپ ڈیٹ کرنا اور ضروریات کے مطابق انہیں حذف کرنا۔ یہ تمام کام بلٹ ان کی مدد سے انجام پا سکتے ہیں۔ ڈیٹاسیٹ ' جائیداد. تاہم، صارف 'کی مدد سے ایک ایک کرکے ڈیٹا انتساب تک رسائی حاصل کرسکتا ہے۔ getAttribute() 'طریقہ. اس پوسٹ میں جاوا اسکرپٹ میں ڈیٹا کی خصوصیات کے استعمال کی عملی طور پر وضاحت کی گئی ہے۔