ویب صفحہ کی ترتیب کو ڈیزائن کرتے وقت اونچائی اور چوڑائی سب سے زیادہ قابل غور جہت ہیں۔
'اونچائی' کسی چیز کی اوپر سے نیچے تک لمبائی کی پیمائش کی نشاندہی کرتی ہے جبکہ 'چوڑائی' اشارہ کرتی ہے کہ ایک شے ایک طرف سے دوسری طرف کتنی چوڑی ہے۔ یہ عوامل ونڈو میں کسی شے کے مختص کو ایڈجسٹ کرنے میں مدد کرتے ہیں۔ جاوا اسکرپٹ میں، ' اونچائی 'اور' چوڑائی ' پراپرٹیز کو مزید دو زمروں میں درجہ بندی کیا گیا ہے 'اندرونی' یعنی 'اندرونی اونچائی/اندرونی چوڑائی'، اور 'بیرونی' یعنی، 'آؤٹر اونچائی/بیرونی چوڑائی'، بالترتیب۔
یہ تحریر جاوا اسکرپٹ میں ونڈو 'innerHeight' پراپرٹی کے مقصد اور کام کی وضاحت کرتی ہے۔
جاوا اسکرپٹ میں ونڈو 'اندرونی اونچائی' پراپرٹی کیا کرتی ہے؟
' اندرونی اونچائی 'پراپرٹی 'ونڈو' آبجیکٹ سے وابستہ ہے جو لوکیشن بار، ٹول بار، مینو بار اور دیگر کو چھوڑ کر براؤزر ونڈو کے ویو پورٹ کی اونچائی کو بازیافت کرتی ہے۔ نیز، اس میں افقی اسکرول بار کی اونچائی بھی شامل ہے اگر یہ شامل ہے۔ اس پراپرٹی کی واپسی ہوئی قیمت ونڈو 'لے آؤٹ ویو پورٹ' سے لی گئی ہے، یعنی ایک ایسا علاقہ جو ویب صفحہ کا مواد دکھاتا ہے۔
بنیادی نحو
window.innerHeight یا innerHeight
مندرجہ بالا نحو کے مطابق، ' اندرونی اونچائی پراپرٹی کو آسانی سے براہ راست یا 'ونڈو' آبجیکٹ کا استعمال کرکے لاگو کیا جاسکتا ہے۔
آئیے اوپر بیان کردہ پراپرٹی کو اس کے بنیادی نحو کی مدد سے عملی طور پر نافذ کریں۔
مثال 1: براؤزر ونڈو کی ویو پورٹ کی اونچائی واپس کرنے کے لیے ونڈو 'اندرونی اونچائی' پراپرٹی کو لاگو کرنا
یہ مثال براؤزر ونڈو کے ویو پورٹ کی اونچائی کو بازیافت کرنے کے لیے 'ونڈو' آبجیکٹ کے ساتھ 'اندرونی اونچائی' خاصیت کا استعمال کرتی ہے۔
HTML کوڈ
سب سے پہلے، ذیل میں بیان کردہ کوڈ پر ایک نظر ڈالیں:
< h2 > ونڈو اندرونی اونچائی پراپرٹی h2 >< بٹن کلک پر = 'jsFunc()' > اونچائی حاصل کریں۔ بٹن >
< ص آئی ڈی = 'کے لیے' >> ص >
مندرجہ بالا کوڈ لائنوں میں:
- ' ٹیگ سطح 2 ذیلی سرخی کی وضاحت کرتا ہے۔
- ' <بٹن> ' ٹیگ اس بٹن کی نمائندگی کرتا ہے جس میں ایک 'onclick' ایونٹ ہوتا ہے جب ایونٹ کے متحرک ہونے پر فنکشن 'jsFunc()' کو شروع کیا جاتا ہے۔
- ' ' ٹیگ ایک تفویض کردہ id 'para' کے ساتھ ایک خالی پیراگراف جوڑتا ہے تاکہ لاگو کردہ 'innerHeight' پراپرٹی کی لوٹائی گئی قدر ظاہر کی جا سکے۔
جاوا اسکرپٹ کوڈ
اب، نیچے دیئے گئے کوڈ کے ساتھ آگے بڑھیں:
< سکرپٹ >فنکشن jsFunc ( ) {
دو h = window.innerHeight;
document.getElementById ( 'کے لیے' ) .innerHTML = 'کھڑکی کی اندرونی اونچائی:' + h;
}
سکرپٹ >
کوڈ کی اوپر کی لائنوں میں:
- سب سے پہلے، ایک فنکشن کی وضاحت کریں جس کا نام ' jsFunc() '
- اس کی تعریف میں، 'h' متغیر کا اطلاق ہوتا ہے ' اندرونی اونچائی ' ونڈو' آبجیکٹ کا استعمال کرتے ہوئے پراپرٹی۔
- اس کے بعد، لاگو کریں ' getElementById() اس کی id 'para' کا استعمال کرتے ہوئے اضافی خالی پیراگراف حاصل کرنے کا طریقہ اور اس میں موجودہ براؤزر ونڈو کی اندرونی اونچائی ظاہر کریں۔
آؤٹ پٹ
جیسا کہ اوپر کے آؤٹ پٹ میں دکھایا گیا ہے، موجودہ براؤزر ونڈو ویو پورٹ کی اونچائی (اندرونی اونچائی) کو ظاہر کرتی ہے، یعنی ' 599px بٹن پر کلک کرنے پر۔
مثال 2: مشترکہ ونڈو 'اندرونی اونچائی' اور 'اندرونی چوڑائی' خصوصیات کو لاگو کرنا
'اندرونی اونچائی' خاصیت کو دیگر طول و عرض کی خصوصیات کے ساتھ لاگو کیا جا سکتا ہے جیسے کہ 'اندرونی چوڑائی'، 'بیرونی چوڑائی'، 'بیرونی اونچائی' وغیرہ۔ اس منظر نامے میں، اس کا استعمال ' اندرونی چوڑائی ' جائیداد.
HTML کوڈ
آئیے ترمیم شدہ HTML کوڈ کا جائزہ لیتے ہیں:
< h2 > ونڈو کی اندرونی اونچائی اور اندرونی چوڑائی کی خصوصیات h2 >< بٹن کلک پر = 'jsFunc()' > اونچائی اور چوڑائی حاصل کریں۔ بٹن >
< ص آئی ڈی = 'کے لیے' >> ص >
یہاں، '