خانه / مقالات اموزشی / اموزش جاوا اسكريپت / ابجكت window در جاوا اسكريپت

ابجكت window در جاوا اسكريپت

ﺩﺭﺱ ﭼﻬﺎﺭﺩﻫﻢ- ﺁﺑﺠﮑﺖ ﭘﻨﭽﺮﻩ (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://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 ﺑﺎﻋﺚ ﻧﻮﺷﺘﻪ ﺷﺪﻥ ﺩﻭ ﻣﺘﻦ ﺩﺭ ﺩﻭ ﺧﻂ ﻣﺠﺰﺍ ﺷﺪﻩ ﺍﺳﺖ.

منبع:درسنامه

اموزش طراحی سایت

آموزش طراحی سایت

اموزش طراحی وب سایت

آموزش طراحی سایت

درباره آموزشگاه نوین آی تی

همچنین ببینید

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net