درس چهاردهم- آبجکت پنچره (Window)
در این درس می‌خواهیم در مورد آبجکت پنچره و چگونگی کار با آن توضیح بدهیم.
آبجکت window
این آبجکت برای کارکردن با مرورگر است و تقریبا در تمام مرورگر‌ها پشتیبانی می‌شود. در اصل این آبجکت است که پنچره در مرورگر را معرفی می‌کند و همه آبجکتها، توابع و متغیرهای جهانی و... زیر مجموعه آن قرار می‌گیرند.
متغیرهای جهانی به عنوان ویژگی آبجکت پنجره و توابع جهانی به عنوان متد‌های آبجکت پنجره شمرده می‌شوند. حتی آبجکت document به عنوان ویژگی آبجکت پنچره می‌باشد.
window.document.getElementById("intro");
نمونه بالا را می‌توان به شکل زیر هم نوشت:
document.getElementById("intro");
به دلیل بودن آبجکت document در زیر مجموعه window می‌توان از نوشتن آن صرف نظر کرد.
محاسبه اندازه پنجره مرورگر
زمان‌هایی
وجود خواهند داشت که شما می‌خواهید اندازه پنجره خود را بدانید و یا
پنچره‌ای با اندازه مشخص بوجود آورید. برای بدست آوردن اندازه پنجره مرورگر
سه ویژگی وجود دارند که ما می‌توانیم از آنها استفاده کنیم.
window.innerHeight برای بدست آوردن ارتفاع //
window.innerWidth برای بدست آوردن پهنا //
البته برای مرورگر اینترنت اکسپلورر از ویژگی‌های زیر استفاده می‌کنیم.
document.documentElement.clientHeight برای بدست آوردن ارتفاع //
document.documentElement.clientWidth برای بدست آوردن پهنا //
نمونه کدهای زیر برای بدست آوردن پهنا و ارتفاع پنجره برای هر مرورگری کاربرد دارد.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var w=window.innerWidth || document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML=" پهنا: " + w + "<br />, ارتفاع: " + h + "."
</script>
</body>
</html>
فهرست زیر نمونه‌ای از چند متد برای آبجکت پنجره است:
window.open() - یک پنجره تازه باز می کند
window.close() - پنجره بازشده را می بندد
window.moveTo() -پنجره را حرکت می دهد
window.resizeTo() -اندازه پنجره را تغییر می دهد
باز کردن پنجره تازه بهمراه نشانی مورد نظر
برای باز کردن یک پنجره تازه بهمراه نشانی تارنمای دلخواه خود به روش زیر عمل می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<script>
function open_win()
{
window.open(" http://www.darsnameh.com");
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="open_win()">
</form>
</body>
</html>
استفاده از window برای چاپ کردن صفحه
برای چاپ یک صفحه توسط دستگاه چاپگر خود به شیوه زیر عمل کنید:
<!DOCTYPE html>
<html>
<head>
<script>
function printpage()
{
window.print();
}
</script>
</head>
<body>
<input type="button" value="چاپ کنید" onclick="printpage()" />
</body>
</html>
آبحکت screen
این آبجکت اطلاعاتی در مورد اندازه صفحه نمایش کاربر دارد. با استفاده از این آبجکت می‌توان ارتفاع و پهنای صفحه نمایش کاربر را دریافت کرد.
<!DOCTYPE html>
<html>
<body>
<script>
document.write( "پهنا: " + screen.availWidth + "<br />") ;
document.write("ارتفاع: " + screen.availHeight) ;
</script>
</body>
</html>
جعبه‌ها در جاوا اسکریپت popup boxes
جاوا اسکریپت دارای سه نوع جعبه می‌باشد که پیش از این از کم و بیش از آنها بهره برده‌ایم.
- Alert box
این
جعبه برای اطمینان از دیده شدن داده‌ها توسط بازدید کننده‌ها می‌باشد.
وقتی این جعبه بالا می‌آید کاربر تنها می‌تواند با زدن دکمه «باشه» (ok) آن را تایید کند:
<!DOCTYPE html> <html> <body>
<button onclick="myFunction()"> دکمه را بزنید </button>
<script>
function myFunction() {
window.alert(" این یک جعبه هشدار است ");
}
</script>
</body> </html>
نکته: برای استفاده از این جعبه نیازی به استفاده از window نیست.
- Confirm box
این جعبه برای گرفتن تایید یا عدم تایید استفاده می‌شود. بازدید کننده می‌باید از بین دو گزینه باشد (ok) و یا نه (cancel) یکی را انتخاب کند. اگر بازدید کننده دکمه «باشد» را کلیک کند جعبه «true» را باز می‌گرداند و اگر گزینه «نه» را کلیک کند جعبه «false» را باز می‌گرداند.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">این دکمه را فشار دهید </button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var r=confirm(" یک گزینه را انتخاب کنید ");
if (r==true)
{
x="را انتخاب کردید OK! ";
}
else
{
x=" را انتخاب کردید Cancel!";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Prompt box -
برای
گرفتن یک مقدار از بازدید کننده (با استفاده از کادر جعبه) پیش از بالا
آمدن برگه استفاده می‌شود. برای نمونه در زمان‌هایی که می‌خواهید مقداری را
در کوکی قرار دهید. کوکی در درس‌های دیگر شرح داده خواهد شد.
این جعبه زمانی مقدار را باز می‌گرداند که بازدید کننده گزینه «باشد» را انتخاب کند، در صورتی که گزینه «نه» انتخاب شود مقدار بازگشتی null می‌شود.
<!DOCTYPE html>
<html> <body>
<button onclick="myFunction()"> امتحان کنید </button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
var person=prompt("نام خود را وارد کنید","پیمان");
if (person!=null) {
x="درود " + person + " چطوری ";
document.getElementById("demo").innerHTML=x;
} }
</script> </body> </html>
گذاشتن خط خالی در جعبه
برای گذاشتن یک خط خالی در جعبه‌های جاوا اسکریپت باید از علامت بین نوشته یا متنی که می‌خواهید در جعبه پدیدار شود، استفاده کنید.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()"> امتحان کنید </button>
<p id="demo"></p>
<script>
function myFunction() {
alert("دورد\n چطوری ");
}
</script>
</body>
</html>
همانطور که ملاحظه می‌کنید علامت \n باعث نوشته شدن دو متن در دو خط مجزا شده است.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.