کار با آبجکت Window در جاوااسکریپت

کار با آبجکت Window در جاوااسکریپت –آموزش جاوااسکریپت مقدماتی درس 20

در این آموزش ما می آموزیم که جاوااسکریپت چطور با آبجکت Window کار می کند.

آبجکت Window

آبجکت Window نشان دهنده پنجره ای است که تمام مستندات و درخت DOM در آن قرار گرفته است. یک پنجره (Window) می تواند پرونده اصلی باشد، یا یک مجموع فریم یا حتی یک فریم خاص باشد، و یا حتی فریم و یا پنجره جدیدی باشد که توسط جاوااسکریپت ساخته می شود.

اگر شما در درس های قبل دقت کرده باشید، ما از متد Alert() در اسکریپت های خودمان استفاده می کردیم تا پیامی را به صورت یک پاپ آپ به کاربر نشان دهیم. این متد در واقع بخشی از متدهای به کار رفته در آبجکت Window است.

در بخش های بعدی ما تعداد بیشتری از متدها و ویژگی های آبجکت Window را مشاهده می کنیم که ما را قادر می سازند تا بتوانید کارهائی مانند اعلام اطلاعات به مخاطب، تایید یک اقدام، بازکردن یک پنجره جدید و موارد دیگر را انجام دهیم که در نتیجه این فعالیت ها می توانیم تعامل بیشتری را با مخاطب از طریق صفحه های وب داشته باشیم.

محاسبه عرض و ارتفاع یک پنجره

آبجکت Window با استفاده از ویژگی های innerWidth و innerHeight این امکان را به ما می دهد که بتوانیم به ترتیب عرض و ارتفاع پنجره یا در واقع درگاه دید روی پنجره را بر مبنای پیکسل به دست بیاوریم. این مقدار شامل نوار اسکرول (در صورتی که وجود داشته باشند) نیز می گردد. برای درک بهتر موضوع، در اینجا مثالی آورده ایم که با کمک آن می توانید اندازه پنجره فعلی را با استفاده از کلیک کردن بر روی دکمه تعبیه شده، به دست بیاورید.

مثال

<script>

function windowSize(){

var w = window.innerWidth;

var h = window.innerHeight;

alert("Width: " + w + ", " + "Height: " + h);

}

</script>

 

 <button type="button" onclick="windowSize();">Get Window Size</button>

 

هرچند اگر شما بخواهید که عرض و ارتفاع پنجره موجود را بدون در نظر گرفتن عرض نوار اسکرول به دست بیاورید شما باید از ویژگی clientWidth و clientHeight استفاده کنید که در عنصر DOM (مانند عنصر div) وجود دارد، برای مثال، با بهره‌گیری از این دو ویژگی می توانید اینچنین کدی را بنویسید:

مثال

<script>

function windowSize(){

var w = document.documentElement.clientWidth;

var h = document.documentElement.clientHeight;

alert("Width: " + w + ", " + "Height: " + h);

}

</script>

 

 <button type="button" onclick="windowSize();">Get Window Size</button>

 

نکته

آبجکت document.documentElement عنصر ریشه ای پرونده ما را نشان می دهد که در اینجا عنصر <html> است، در حالی که آبجکت document.body عنصر <body> را نشان می دهد. هر دو این آبجکت ها در تمام مرورگرهای اصلی و مطرح پشتیبانی می شوند.

No votes yet.
Please wait...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

منو اصلی

question