History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

Unescape Escape

ٹیریریم پروجیکٹ حصہ 3: DOM کی تبدیلی اور ایک کلوزر

اسکیچ نوٹ از Tomomi Imura

لیکچر سے پہلے کا کوئز

تعارف

DOM یا "ڈاکیومنٹ آبجیکٹ ماڈل" کو تبدیل کرنا ویب ڈویلپمنٹ کا ایک اہم پہلو ہے۔ MDN کے مطابق، "ڈاکیومنٹ آبجیکٹ ماڈل (DOM) ویب پر کسی ڈاکیومنٹ کے ڈھانچے اور مواد پر مشتمل آبجیکٹس کی ڈیٹا نمائندگی ہے۔" ویب پر DOM کی تبدیلی کے چیلنجز اکثر جاوا اسکرپٹ فریم ورک استعمال کرنے کی وجہ بنتے ہیں، لیکن ہم اسے خود سنبھالیں گے!

اس کے علاوہ، اس سبق میں جاوا اسکرپٹ کلوزر کا تصور متعارف کرایا جائے گا، جسے آپ ایک فنکشن کے طور پر سوچ سکتے ہیں جو دوسرے فنکشن کے اندر موجود ہوتا ہے تاکہ اندرونی فنکشن کو بیرونی فنکشن کے اسکوپ تک رسائی حاصل ہو۔

جاوا اسکرپٹ کلوزرز ایک وسیع اور پیچیدہ موضوع ہیں۔ یہ سبق اس بنیادی خیال کو چھوتا ہے کہ اس ٹیریریم کے کوڈ میں آپ کو ایک کلوزر ملے گا: ایک اندرونی فنکشن اور ایک بیرونی فنکشن جو اس طرح بنایا گیا ہے کہ اندرونی فنکشن کو بیرونی فنکشن کے اسکوپ تک رسائی حاصل ہو۔ اس کے کام کرنے کے طریقے کے بارے میں مزید معلومات کے لیے، براہ کرم تفصیلی دستاویزات ملاحظہ کریں۔

ہم DOM کو تبدیل کرنے کے لیے ایک کلوزر استعمال کریں گے۔

DOM کو ایک درخت کے طور پر سوچیں، جو ان تمام طریقوں کی نمائندگی کرتا ہے جن کے ذریعے ایک ویب صفحہ کے ڈاکیومنٹ کو تبدیل کیا جا سکتا ہے۔ مختلف APIs (ایپلیکیشن پروگرام انٹرفیسز) لکھے گئے ہیں تاکہ پروگرامرز اپنی پسند کی پروگرامنگ زبان استعمال کرتے ہوئے DOM تک رسائی حاصل کر سکیں اور اسے ایڈٹ، تبدیل، دوبارہ ترتیب دے سکیں، اور دیگر طریقوں سے مینیج کر سکیں۔

DOM اور اس کے حوالہ دینے والے HTML مارک اپ کی نمائندگی۔ Olfa Nasraoui سے

اس سبق میں، ہم اپنے انٹرایکٹو ٹیریریم پروجیکٹ کو مکمل کریں گے اور جاوا اسکرپٹ لکھیں گے جو صارف کو صفحے پر پودوں کو تبدیل کرنے کی اجازت دے گا۔

پیشگی شرط

آپ کے ٹیریریم کے لیے HTML اور CSS تیار ہونا چاہیے۔ اس سبق کے اختتام تک آپ پودوں کو ٹیریریم میں گھسیٹ کر اندر اور باہر لے جانے کے قابل ہوں گے۔

کام

اپنے ٹیریریم فولڈر میں ایک نئی فائل بنائیں جس کا نام script.js ہو۔ اس فائل کو <head> سیکشن میں امپورٹ کریں:

	<script src="./script.js" defer></script>

نوٹ: ایک بیرونی جاوا اسکرپٹ فائل کو HTML فائل میں امپورٹ کرتے وقت defer استعمال کریں تاکہ جاوا اسکرپٹ HTML فائل کے مکمل لوڈ ہونے کے بعد ہی عمل میں آئے۔ آپ async ایٹریبیوٹ بھی استعمال کر سکتے ہیں، جو اسکرپٹ کو HTML فائل کے پارس ہونے کے دوران عمل کرنے کی اجازت دیتا ہے، لیکن ہمارے کیس میں، یہ ضروری ہے کہ ڈریگنگ کے لیے HTML عناصر مکمل طور پر دستیاب ہوں۔

DOM عناصر

سب سے پہلے آپ کو ان عناصر کے حوالے بنانے کی ضرورت ہے جنہیں آپ DOM میں تبدیل کرنا چاہتے ہیں۔ ہمارے کیس میں، یہ وہ 14 پودے ہیں جو اس وقت سائیڈ بارز میں موجود ہیں۔

کام

dragElement(document.getElementById('plant1'));
dragElement(document.getElementById('plant2'));
dragElement(document.getElementById('plant3'));
dragElement(document.getElementById('plant4'));
dragElement(document.getElementById('plant5'));
dragElement(document.getElementById('plant6'));
dragElement(document.getElementById('plant7'));
dragElement(document.getElementById('plant8'));
dragElement(document.getElementById('plant9'));
dragElement(document.getElementById('plant10'));
dragElement(document.getElementById('plant11'));
dragElement(document.getElementById('plant12'));
dragElement(document.getElementById('plant13'));
dragElement(document.getElementById('plant14'));

یہاں کیا ہو رہا ہے؟ آپ ڈاکیومنٹ کا حوالہ دے رہے ہیں اور اس کے DOM میں ایک خاص Id والے عنصر کو تلاش کر رہے ہیں۔ یاد کریں کہ HTML کے پہلے سبق میں آپ نے ہر پودے کی تصویر کو انفرادی Ids دی تھیں (id="plant1")؟ اب آپ اس کوشش کا فائدہ اٹھائیں گے۔ ہر عنصر کی شناخت کے بعد، آپ اس آئٹم کو ایک فنکشن dragElement میں پاس کرتے ہیں جسے آپ ابھی بنائیں گے۔ اس طرح، HTML میں موجود عنصر اب ڈریگ کے قابل ہو جاتا ہے، یا جلد ہی ہو جائے گا۔

✅ ہم عناصر کو Id کے ذریعے کیوں حوالہ دیتے ہیں؟ ان کے CSS کلاس کے ذریعے کیوں نہیں؟ اس سوال کا جواب دینے کے لیے آپ CSS کے پچھلے سبق کا حوالہ دے سکتے ہیں۔

کلوزر

اب آپ dragElement کلوزر بنانے کے لیے تیار ہیں، جو ایک بیرونی فنکشن ہے جو ایک یا زیادہ اندرونی فنکشنز کو گھیرے ہوئے ہے (ہمارے کیس میں، تین ہوں گے)۔

کلوزرز اس وقت مفید ہوتے ہیں جب ایک یا زیادہ فنکشنز کو بیرونی فنکشن کے اسکوپ تک رسائی کی ضرورت ہو۔ یہاں ایک مثال ہے:

function displayCandy(){
	let candy = ['jellybeans'];
	function addCandy(candyType) {
		candy.push(candyType)
	}
	addCandy('gumdrops');
}
displayCandy();
console.log(candy)

اس مثال میں، displayCandy فنکشن ایک فنکشن کو گھیرے ہوئے ہے جو ایک نئے کینڈی کی قسم کو ایک ایسے ارے میں دھکیلتا ہے جو پہلے سے فنکشن میں موجود ہے۔ اگر آپ اس کوڈ کو چلائیں، تو candy ارے غیر متعین ہوگا، کیونکہ یہ ایک مقامی ویریبل ہے (کلوزر کے لیے مقامی)۔

✅ آپ candy ارے کو قابل رسائی کیسے بنا سکتے ہیں؟ اسے کلوزر کے باہر منتقل کرنے کی کوشش کریں۔ اس طرح، ارے عالمی ہو جائے گا، بجائے اس کے کہ صرف کلوزر کے مقامی اسکوپ تک محدود رہے۔

کام

script.js میں عنصر کے اعلانات کے نیچے ایک فنکشن بنائیں:

function dragElement(terrariumElement) {
	//set 4 positions for positioning on the screen
	let pos1 = 0,
		pos2 = 0,
		pos3 = 0,
		pos4 = 0;
	terrariumElement.onpointerdown = pointerDrag;
}

dragElement اپنے terrariumElement آبجیکٹ کو اسکرپٹ کے اوپر دیے گئے اعلانات سے حاصل کرتا ہے۔ پھر، آپ اس فنکشن میں پاس کیے گئے آبجیکٹ کے لیے کچھ مقامی پوزیشنز کو 0 پر سیٹ کرتے ہیں۔ یہ وہ مقامی ویریبلز ہیں جنہیں آپ ہر عنصر کے لیے تبدیل کریں گے جب آپ ڈریگ اور ڈراپ کی فعالیت کو کلوزر کے اندر ہر عنصر میں شامل کریں گے۔ ٹیریریم ان ڈریگ کیے گئے عناصر سے بھرا جائے گا، اس لیے ایپلیکیشن کو یہ ٹریک رکھنا ہوگا کہ انہیں کہاں رکھا گیا ہے۔

اس کے علاوہ، اس فنکشن میں پاس کیے گئے terrariumElement کو ایک pointerdown ایونٹ تفویض کیا گیا ہے، جو ویب APIs کا حصہ ہے جو DOM مینیجمنٹ میں مدد کے لیے ڈیزائن کیا گیا ہے۔ onpointerdown اس وقت فائر ہوتا ہے جب کوئی بٹن دبایا جاتا ہے، یا ہمارے کیس میں، جب کوئی ڈریگ ایبل عنصر چھوا جاتا ہے۔ یہ ایونٹ ہینڈلر ویب اور موبائل براؤزرز دونوں پر کام کرتا ہے، چند استثنائی صورتوں کے ساتھ۔

✅ ایونٹ ہینڈلر onclick کے پاس کراس براؤزر زیادہ سپورٹ ہے؛ آپ اسے یہاں کیوں استعمال نہیں کریں گے؟ اسکرین کے اس خاص قسم کے تعامل کے بارے میں سوچیں جو آپ یہاں بنانا چاہتے ہیں۔

پوائنٹر ڈریگ فنکشن

terrariumElement کو گھسیٹنے کے لیے تیار ہے؛ جب onpointerdown ایونٹ فائر ہوتا ہے، تو pointerDrag فنکشن کو کال کیا جاتا ہے۔ اس لائن کے نیچے یہ فنکشن شامل کریں: terrariumElement.onpointerdown = pointerDrag;:

کام

function pointerDrag(e) {
	e.preventDefault();
	console.log(e);
	pos3 = e.clientX;
	pos4 = e.clientY;
}

کئی چیزیں ہوتی ہیں۔ پہلے، آپ e.preventDefault(); کا استعمال کرتے ہوئے ان ڈیفالٹ ایونٹس کو روک دیتے ہیں جو عام طور پر پوائنٹر ڈاؤن پر ہوتے ہیں۔ اس طرح آپ انٹرفیس کے رویے پر زیادہ کنٹرول حاصل کرتے ہیں۔

اس لائن پر واپس آئیں جب آپ نے اسکرپٹ فائل مکمل طور پر بنا لی ہو اور اسے e.preventDefault() کے بغیر آزمائیں - کیا ہوتا ہے؟

دوسرا، index.html کو ایک براؤزر ونڈو میں کھولیں، اور انٹرفیس کا معائنہ کریں۔ جب آپ کسی پودے پر کلک کرتے ہیں، تو آپ دیکھ سکتے ہیں کہ 'e' ایونٹ کیسے کیپچر ہوتا ہے۔ ایونٹ میں گہرائی سے جائیں تاکہ دیکھ سکیں کہ ایک پوائنٹر ڈاؤن ایونٹ کے ذریعے کتنی معلومات جمع کی جاتی ہیں!

اگلا، نوٹ کریں کہ مقامی ویریبلز pos3 اور pos4 کو e.clientX پر کیسے سیٹ کیا جاتا ہے۔ آپ انسپیکشن پین میں e کی ویلیوز دیکھ سکتے ہیں۔ یہ ویلیوز اس وقت پودے کے x اور y کوآرڈینیٹس کو کیپچر کرتی ہیں جب آپ اس پر کلک یا ٹچ کرتے ہیں۔ آپ کو پودوں کے رویے پر باریک بینی سے کنٹرول کی ضرورت ہوگی جب آپ انہیں کلک اور ڈریگ کرتے ہیں، اس لیے آپ ان کے کوآرڈینیٹس کا ٹریک رکھتے ہیں۔

✅ کیا یہ زیادہ واضح ہو رہا ہے کہ یہ پوری ایپ ایک بڑے کلوزر کے ساتھ کیوں بنائی گئی ہے؟ اگر ایسا نہ ہوتا، تو آپ 14 ڈریگ ایبل پودوں میں سے ہر ایک کے لیے اسکوپ کو کیسے برقرار رکھتے؟

فنکشن کو مکمل کرنے کے لیے pos4 = e.clientY کے نیچے دو مزید پوائنٹر ایونٹ مینیپولیشنز شامل کریں:

document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;

اب آپ اشارہ دے رہے ہیں کہ آپ چاہتے ہیں کہ پودا پوائنٹر کے ساتھ گھسیٹا جائے جب آپ اسے حرکت دیتے ہیں، اور ڈریگنگ اشارہ اس وقت رک جائے جب آپ پودے کو ڈی سلیکٹ کریں۔ onpointermove اور onpointerup اسی API کا حصہ ہیں جس کا تعلق onpointerdown سے ہے۔ انٹرفیس اب ایررز دے گا کیونکہ آپ نے ابھی تک elementDrag اور stopElementDrag فنکشنز کی وضاحت نہیں کی ہے، اس لیے انہیں اگلے مرحلے میں بنائیں۔

`elementDrag` اور `stopElementDrag` فنکشنز

آپ اپنے کلوزر کو دو مزید اندرونی فنکشنز شامل کرکے مکمل کریں گے جو یہ ہینڈل کریں گے کہ جب آپ پودے کو گھسیٹتے ہیں اور گھسیٹنا بند کرتے ہیں تو کیا ہوتا ہے۔ آپ جو رویہ چاہتے ہیں وہ یہ ہے کہ آپ کسی بھی وقت کسی بھی پودے کو گھسیٹ سکیں اور اسے اسکرین پر کہیں بھی رکھ سکیں۔ یہ انٹرفیس کافی غیر محدود ہے (مثال کے طور پر کوئی ڈراپ زون نہیں ہے) تاکہ آپ اپنے ٹیریریم کو اپنی مرضی کے مطابق ڈیزائن کر سکیں، پودے شامل کر سکیں، ہٹا سکیں، اور ان کی پوزیشن تبدیل کر سکیں۔

کام

pointerDrag کے بند ہونے والے کرلی بریکٹ کے فوراً بعد elementDrag فنکشن شامل کریں:

function elementDrag(e) {
	pos1 = pos3 - e.clientX;
	pos2 = pos4 - e.clientY;
	pos3 = e.clientX;
	pos4 = e.clientY;
	console.log(pos1, pos2, pos3, pos4);
	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
}

اس فنکشن میں، آپ ابتدائی پوزیشنز 1-4 کو بہت زیادہ ایڈٹ کرتے ہیں جو آپ نے بیرونی فنکشن میں مقامی ویریبلز کے طور پر سیٹ کی تھیں۔ یہاں کیا ہو رہا ہے؟

جب آپ گھسیٹتے ہیں، تو آپ pos1 کو دوبارہ تفویض کرتے ہیں، اسے pos3 (جسے آپ نے پہلے e.clientX کے طور پر سیٹ کیا تھا) مائنس موجودہ e.clientX ویلیو کے برابر بنا کر۔ آپ pos2 کے ساتھ بھی ایسا ہی کرتے ہیں۔ پھر، آپ pos3 اور pos4 کو عنصر کے نئے x اور y کوآرڈینیٹس پر ری سیٹ کرتے ہیں۔ آپ ان تبدیلیوں کو کنسول میں دیکھ سکتے ہیں جب آپ گھسیٹتے ہیں۔ پھر، آپ پودے کے CSS اسٹائل کو اس کی نئی پوزیشن سیٹ کرنے کے لیے مینیپولیٹ کرتے ہیں، جو pos1 اور pos2 کی نئی پوزیشنز کی بنیاد پر اس کے اوپر اور بائیں x اور y کوآرڈینیٹس کا حساب لگاتا ہے۔

offsetTop اور offsetLeft CSS پراپرٹیز ہیں جو کسی عنصر کی پوزیشن کو اس کے پیرنٹ کی بنیاد پر سیٹ کرتی ہیں؛ اس کا پیرنٹ کوئی بھی عنصر ہو سکتا ہے جو static کے طور پر پوزیشنڈ نہ ہو۔

پوزیشننگ کی یہ تمام دوبارہ گنتی آپ کو ٹیریریم اور اس کے پودوں کے رویے کو باریک بینی سے ایڈجسٹ کرنے کی اجازت دیتی ہے۔

کام

انٹرفیس کو مکمل کرنے کا آخری کام stopElementDrag فنکشن کو elementDrag کے بند ہونے والے کرلی بریکٹ کے بعد شامل کرنا ہے:

function stopElementDrag() {
	document.onpointerup = null;
	document.onpointermove = null;
}

یہ چھوٹا سا فنکشن onpointerup اور onpointermove ایونٹس کو ری سیٹ کرتا ہے تاکہ آپ یا تو اپنے پودے کی پیش رفت کو دوبارہ شروع کر سکیں یا کسی نئے پودے کو گھسیٹنا شروع کر سکیں۔

✅ اگر آپ ان ایونٹس کو null پر سیٹ نہ کریں تو کیا ہوتا ہے؟

اب آپ نے اپنا پروجیکٹ مکمل کر لیا ہے!

🥇مبارک ہو! آپ نے اپنا خوبصورت ٹیریریم مکمل کر لیا ہے۔

🚀چیلنج

اپنے کلوزر میں ایک نیا ایونٹ ہینڈلر شامل کریں تاکہ پودوں کے ساتھ کچھ اور کیا جا سکے؛ مثال کے طور پر، کسی پودے کو سامنے لانے کے لیے اس پر ڈبل کلک کریں۔ تخلیقی بنیں!

لیکچر کے بعد کا کوئز

جائزہ اور خود مطالعہ

اسکرین پر عناصر کو گھسیٹنا معمولی لگتا ہے، لیکن ایسا کرنے کے کئی طریقے ہیں اور کئی مشکلات ہیں، اس پر منحصر ہے کہ آپ کس قسم کا اثر چاہتے ہیں۔ درحقیقت، ایک مکمل ڈریگ اینڈ ڈراپ API موجود ہے جسے آپ آزما سکتے ہیں۔ ہم نے اس ماڈیول میں اسے استعمال نہیں کیا کیونکہ ہم جو اثر چاہتے تھے وہ کچھ مختلف تھا، لیکن اس API کو اپنے پروجیکٹ پر آزمائیں اور دیکھیں کہ آپ کیا حاصل کر سکتے ہیں۔

پوائنٹر ایونٹس پر مزید معلومات کے لیے W3C دستاویزات اور MDN ویب دستاویزات دیکھیں۔

ہمیشہ براؤزر کی صلاحیتوں کو CanIUse.com پر چیک کریں۔

اسائنمنٹ

DOM کے ساتھ مزید کام کریں

ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔

README.md Unescape Escape