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

این وبلاگ ، شامل آموزش کامل جاوا اسکریپت می باشد که توسط گروه غرب نت تهیه شده است.

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

این وبلاگ ، شامل آموزش کامل جاوا اسکریپت می باشد که توسط گروه غرب نت تهیه شده است.

شی window در جاوا اسکریپت

شی window :

شی window بالاترین شی در رده بندی عناصر صفحات HTML در مدل DOM است . هر پنجره مرورگر در واقع یک نسخه از شی window است . این شی به ازای هر نمونه از تگ های < body > یا < frameset > ساخته می شود .
در لیست زیر مجموعه خواص و رویدادهای مهم و پرکاربرد شی window آمده است . برای دریافت اطلاعات بیشتر راجع به هر کدام بر روی نام آن کلیک کنید :

خواص شی window :

نام خاصیت

شرح

closed

مشخص می کند که آیا پنجره مورد نظر بسته است یا خیر .

defaultStatus

این خاصیت برای تعیین متن نمایش داده شده در نوار statusbar پنجره به کار می رود .

length

این خاصیت تعداد قاب ها موجود در پنجره را بر می گرداند .

name

این خاصیت برای تعیین یک نام برای پنجره مورد نظر استفاده می شود .

opener

این خاصیت به پنجره ای که باعث باز شدن پنجره جاری شده است ، اشاره می کند .

self

این خاصیت برای اشاره به پنجره ای که هم اکنون در آن هستیم به کار می رود .

status

این خاصیت برای تعیین متن نمایش داده شده در نوار statsbar به کار می رود .

top

این خاصیت به پنجره مادر پنجره جاری اشاره می کند .

 

خاصیت closed :

این خاصیت یک مقدار boolen را بر می گرداند که مشخص می کند آیا پنجره مورد نظر بسته شده است یا خیر .
در صورتی که پنجره مورد نظر بسته باشد ، پاسخ False و در صورتی که هنوز بتسه نشده باشد ، جواب True است .

Syntax

window.closed
* window = نام پنجره مورد نظر

مثال : در مثال زیر وضعیت پنجره جاری که درون آن هستیم را توسط این خاصیت بررسی کرده ایم . از آنجا که این پنجره هنوز بسته نشده است ، مقدار بازگشتی False است .
نکته : در مثال زیر از خاصیت self نیز به همراه خاصیت closed استفاده کرده ایم . این خاصیت به پنجره جاری که درون آن هستیم ، اشاره می کند . در ادامه به معرفی این خاصیت خواهیم پرداخت :

Example

<script type ="text/javascript">
  document.write ( window.self.closed ) ;
</script>

کد

مثال : در مثال زیر ابتدا توسط متد openبرای دریافت اطلاعات راجع به متد open به بخش متد open در شی window بروید  یک پنجره جدید را ایجاد می کنیم . برای ایجاد پنجره جدید باید بر روی دکمه فرمان open window کلیک نمایید . سپس توسط دکمه فرمان get status با فراخوانی تابع get_status به بررسی باز یا بسته بودن پنجره جدید باز شده می پردازیم . برای مشاهده کاربرد این خاصیت ابتدا پنجره جدید را باز کرده و سپس در هر دو وضعیت باز و یا بسته بودن آن پنجره دکمه فرمان get status را فشار داده و به خروجی مثال دقت کنید :
نکته مهم : همانطور که می دانید در یک صفحه HTML یک عنصر ابتدا باید ایجاد شود ، تا بتوان به آن عنصر دسترسی داشت . بنابراین اگر در مثال زیر قبل از اینکه دکمه open window را زده و پنجره MyWindow را ایجاد کنید ، بر روی دکمه get status کلیک نمایید ، در عمل برنامه پنجره MyWindow را نشناحته و در صفحه error رخ می دهد . برای جلوگیری از این error با یک ساختار Try ... catch که در بخش آموزش Java Script به معرفی آن پرداخته ایم ، اقدام به طراحی یک مکانیزم کشف خطا کرده ایم ، که در صورت زدن دکمه open window قبل از اینکه دکمه get status را زده باشید ، یک پیغام هشدار به شما نمایش داده می شود :

Example

<input type="button" id="btnopen" onclick="open_window()" value="open window" />
<input type="button" id="btnstatus" onclick="get_status()" value="get status" />

<script type="text/javascript">
  function open_window ( )
    {
      MyWindow = window.open ( ' ' , 'MyWindow' , 'height =200 , width =150' ) ;
      MyWindow.document.write ( " This is MyWindow" ) ;
    }

  function get_status ( )
    {
      try
        {
          if ( MyWindow.closed )
             document.write ( "MyWindow is Close" );
          else
              document.write ( "MyWindow is Open" );
          }
     catch ( err )
        {
          alert ( "First create MyWindow !" );
        }
    }
</script>

کد

 

خاصیت: defaultStatus

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

Syntax

window.defaultStatus = " متن مورد نظر "
* window = نام پنجره مورد نظر

مثال : در مثال زیر با استفاده از یک دستور ساده متن نوار Statusbar مرورگر را در هنگام لود صفحه به مقدار مورد نظر تغییر داده ایم . به پایین پنجره مرورگر دقت کنید . این مقدار را در آینده دوباره می توان تغییر داد :
نکته : خاصیت self در مثال زیر به پنجره جاری که هم اکنون در آن هستیم اشاره می کند .

Example

<script type ="text/javascript">
  window.self.defaultStatus = "www.Gharbnet.ir.ir :: An Investigation for Development" ;
</script>

کد

مثال : در مثال زیر یک کادر متن ( TextBox ) ساده و یک دکمه فرمان را برای تعیین متن نوار StatusBar بر روی فرم قرار داده ایم . نحوه عمکرد این مثال به این صورت است که کاربر بایستی متنی را در درون کادر متن وارد کرده و سپس بر روی دکمه فرمان change defaultStatus کلیک نماید . در این صورت تابع show_msg اجرا شده و متن نوار StatusBar را به متن وارد شده از کاربر تغییر خواهد داد :
نکته : خاصیت self در مثال زیر به پنجره جاری که هم اکنون در آن هستیم اشاره می کند .

Example

<script type ="text/javascript">
<input type="text" id="TxtMsg" size="25" />
<input type="button" id="BtnMsg" value="change defaultStatus" onclick="show_msg( )" />

  function show_msg ( )
    {
      TxtMsg = document.getElementById ( "TxtMsg" );
      var Msg = TxtMsg.value ;
      window.self.defaultStatus = Msg ;
    }
</script>

کد

 

خاصیت: length

این خاصیت تعداد قاب ها یا frame های موجود در پنجره را نمایش می دهد . همانطور که در HTML آموختید ، قاب یا frame با تگ < iframe > ایجاد شده و هر قاب می تواند یک صفحه را در درون خود جای دهد . در حالت عادی تعداد frame های موجود در یک صفحه صفر است .

Syntax

window.length
* window = نام پنجره مورد نظر

نکته : نکته جالبی که در هنگام کار با این خاصیت با آن روبرو شدم این بود که چنانچه دستور window.length را در یک script به کار ببریم ، این دستور فقط تعداد frame هایی که با تگ < iframe > قبل از آن script ایجاد شده اند را نشان می دهد و frame های بعد از خود را نمی شناسد . برای درک بهتر به دو مثال این صفحه دقت کنید . در مثال اول چون هیچ frame قبل از script آن ایجاد نشده است ، مقدار خروجی دستور window.length صفر است . اما در مثال دوم قبل از script آن یک frame ایجاد کرده ایم و می بینیم که خروجی script در این حالت 1 است .

مثال 1 : در مثال زیر با استفاده از یک script ساده ، تعداد frame های صفحه را در خروجی چاپ کرده ایم . همانطور که مبینید ، به دلیل اینکه قبل از script این مثال هیچ frame ی ایجاد نشده است ، مقدار خروجی صفر است .

Example

<script type ="text/javascript">
  document.write ( window.length ) ;
</script>

کد

مثال 2 : در مثال زیر ابتدا یک قاب یا frame را ابتدا ایجاد کرده ایم و مجددا تعداد frame های موجود در صفحه را در خروجی چاپ کرده ایم . در این حالت می بینیم که خروجی مثال 1 است :

Example

<iframe src="Dom_Introduce.aspx" style="width: 500px; height: 200px "></iframe>

<script type ="text/javascript">
  document.write ( "<br /> " + window.length ) ;
</script>

کد

 

خاصیت name :

این خاصیت تعیین کننده و نگهدارنده نام پنجره مورد نظر است . نام یک پنجره باید از نوع متن یا text تعیین شود . نام پنجره برای دستیابی به آن پنجره در script ها استفاده می شود و ربطی به نام فایل صفحه ندارد و مقدار آن توسط برنامه نویس می تواند تعیین گردد . به صورت پیش فرض پنجره ها بدون نام هستند ، یعنی نامی برای آنها تعیین نشده است و چنانچه از سوی برنامه نویس یا طراح نیز نامی برای آن در نطر گرفته نشود ، مقدار آن خالی خواهد ماند .

Syntax

window.name = " نام مورد نظر " ;

مثال : در مثال زیر توسط یک اسکریپت ساده برای پنجره فعلی که در درون آن هستیم ، یک نام را تعیین کرده و سپس مقدار آن را در خروجی چاپ کرده ایم :

Example

<script type ="text/javascript">
  window.name = "MyWindow" ;
  document.write ( window.name ) ;
</script>

کد

خاصیت opener :

این خاصیت به پنجره ای که موجب ایجاد یا باز شدن پنجره فعلی شده است ، اشاره می کند . صفحه ای که به یک پنجره لینک داده است ، در صورت کلیک بر روی آن لینک و رفتن به صفحه جدید ، به عنوان باز کننده یا opener صفحه جدید ، محسوب می شود .

Syntax

window.opener ;

 

خاصیت self :

این خاصیت به پنجره ای که هم اکنون در آن هستیم ، اشاره می کند . این خاصیت نیز باید با یک خاصیت یا متد دوم برای آگاهی از خواص پنجره فعلی استفاده شود و به تنهایی کارایی چندانی ندارد . به کار بردن این خاصیت برای اشاره به پنجره فعلی در بیشتر موارد ضروری نیست و صرفا ذکر واژه window به تنهایی کافی است اما برای اطمینان بیشتر ، بهتر است به کار رود .

Syntax

window.self ;

مثال : در مثال زیر توسط یک اسکریپت ساده ابتدا به پنجره جاری که درون آن هستیم اشاره کرده و سپس آدرس کامل آن را توسط خاصیت location در خروجی چاپ کرده ایم :

Example

<script type ="text/javascript">
  document.write ( window.self.location ) ;
</script>

کد

 

خاصیت status  :

این خاصیت متنی که در نوار Statusbar پنجره مروگر نمایش داده می شود را تعیین و نگهداری می کند . نوار Statusbar در پایین پنجره مرورگر قرار دارد و معمولا برای اطلاع رسانی عملکرد مرورگر به کاربر ، از آن استفاده می شود .
عملکرد این خاصیت کاملا شبیه خاصیت defaultStatus است ، با این تفاوت که خاصیت defaultStatus معمولا برای تعیین یک متن پیش فرض برای statusBar به کار می رود و در هنگام لود شدن صفحه آن متن در statusbar نمایش داده می شود . ولی متنی که برای خاصیت status تعیین می شود در هنگام لود صفحه و اجرای تازه آن ، در statusbar نمایش داده نمی شود .

Syntax

window.status = " متن مورد نظر "
* window = نام پنجره مورد نظر

مثال : در مثال زیر یک کادر متن ( TextBox ) ساده و یک دکمه فرمان را برای تعیین متن نوار StatusBar بر روی فرم قرار داده ایم . نحوه عمکرد این مثال به این صورت است که کاربر بایستی متنی را در درون کادر متن وارد کرده و سپس بر روی دکمه فرمان change statusbar Text کلیک نماید . در این صورت تابع show_msg اجرا شده و متن نوار StatusBar را به متن وارد شده از کاربر تغییر خواهد داد :
نکته : خاصیت self در مثال زیر به پنجره جاری که هم اکنون در آن هستیم اشاره می کند .

Example

<script type ="text/javascript">
<input type="text" id="TxtMsg" size="25" />
<input type="button" id="BtnMsg" value="change statusbar Text" onclick="show_msg( )" />

  function show_msg ( )
    {
      TxtMsg = document.getElementById ( "TxtMsg" );
      var Msg = TxtMsg.value ;
      window.self.status = Msg ;
    }
</script>

کد

خاصیت top :

این خاصیت به بالاترین پنجره یا پنجره مادر پنجره جاری ، اشاره می کند .

Syntax

window.top