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

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

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

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

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

شی History  مشخصات صفحات مرور شده

شی ( History ) در جاوا اسکریپت :

شی History به طور اتوماتیک با باز شدن یک صفحه ، توسط موتور جاوا اسکریپت مرورگر ( Java Script runtime engine ) ایجاد می شود . این شی حاوی اطلاعاتی درباره URL هایی که کاربر توسط مرورگر مشاهده کرده است ، می باشد . به عبارت دیگر آدرس صفحاتی که کاربر توسط مرورگر مشاهده می کند ، همانند یک آرایه در شی History ذخیره می شود .
این اطلاعات درباره صفحه قبلی و یا صفحات قبلی مشاهده شده ، صفحه بعدی یا صفحات بعدی مشاهده شده ( التبه در صورتی که کاربر از مسیر رفته به عقب بر گشته باشد ) می باشد . از این شی برای دسترسی به صفحات قبلی و یا بعدی مرور شده استفاده می شود .
این شی یکی از زیر مجموعه های شی window است و باید به شکل کلی زیر به کار رود . البته بدون به کار بردن واژه window ، قابلیت دسترسی مستقیم به شی نیز وجود دارد :

Syntax

window.history.نام خاصیت
یا
history.
نام خاصیت

در ادامه به معرفی و تشریح خواص و رویدادهای مهم و پر کاربرد این شی در Java Script می پردازم .

خواص مهم شی History

در لیست زیر تنها خاصیت شی History قرار دارد . برای دریافت اطلاعات بیشتر و مثال های عملی بر روی نام آنها کلیک کنید :

نام خاصیت

شرح

length

این خاصیت تعداد صفحاتی که URL و مشخصات آنها در شی History ذخیره شده است را مشخص می کند .

رویداد های مهم شی History :

در لیست زیر رویدادهای شی History قرار دارد . برای دریافت اطلاعات بیشتر و مثال های عملی بر روی نام آنها کلیک کنید :

نام رویداد

کاربرد

back ( )

این متد صفحه قبلی مشاهده شده که آدرس آن در شی History ذخیره شده ، را باز می کند .

forward ( )

این متد صفحه بعدی مشاهده شده که آدرس آن در شی History ذخیره شده ، را باز می کند .

go ( )

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

 

شی History - خاصیت length

این خاصیت ، تعداد صفحاتی که آدرس URL آنها در شی History ذخیره شده است را بر می گرداند .
هنگامی که یک پنجره را باز می کنید ، مقدار این خاصیت 0 است ، یعنی مقدار آن از صفر شروع می شود . با حرکت در بین صفحات ، به ازای هر صفحه جدید باز شده ، یک واحد به این خاصیت اضافه می شود .
همانطور که در بخش معرفی شی History گفتم ، آدرس صفحاتی که توسط مرورگر مشاهده می کنید ، به صورت یک آرایه در شی History ذخیره می شود . به عبارت دیگر می توان گفت اندازه این خاصیت برابر با اعضا آرایه فوق است .

شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax

history.length

نکته 1 : خروجی این خاصیت یک مقدار عددی ( Integer ) است .
نکته 2 : مقدار خاصیت length در مرورگر Firefox از 1 شروع می شود .

مثال 1 : در مثال زیر با استفاده از خاصیت length ، تعداد صفحاتی که آدرس ( URL ) آنها در شی History مرورگر شما قرار دارد را در خروجی نشان داده ایم .

Example

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

کد

 

متد  back() شی History :

این متد ، صفحه قبلی مشاهده شده در مرورگر را باز می کند . آدرس ( URL ) این صفحه در عنصر قبلی ذخیره شده در شی History قرار دارد .
عملکرد این متد همانند این است که دکمه back مرورگر را کلیک کرده و یا متد ( ) go شی History را با مقدار 1- اجرا کنید .

شکل کلی استفاده از این متد به صورت زیر است :

Syntax

history.back ( )

مثال 1 : در مثال زیر از متد back در تابع backward استفاده کرده ایم . این تابع با کلیک بر روی دکمه بازگشت به صفحه قبلی فراخوانی شده و مرورگر را به صفحه قبلی مشاهده شده می برد . برای رفتن به صفحه قبل بر روی دکمه فرمان بازگشت به صفحه قبلی در قسمت خروجی کلیک کنید :

Example

<script type = " text/javascript " >
  function backward ( )
    {
      history.back ( ) ;
    }
</script>

< input   type = " button "   name = " PrPage "   value = "
بازگشت به صفحه قبل"   onclick = " backward ( ) "   />

کد

 

متد  forward() شی History :

این متد ، صفحه بعدی مشاهده شده در مرورگر را باز می کند . آدرس ( URL ) این صفحه در عنصر بعدی ذخیره شده در شی History قرار دارد . البته این متد زمانی اجرا می شود که کاربر از مسیر رفته به عقب برگشته باشد . به عبارت دیگر آدرس صفحه ای در عنصر بعدی حافظه شی History ذخیره شده باشد . در غیر این صورت نیز با فراخوانی این متد خطایی رخ نداده و مرورگر در همان صفحه باقی می ماند .
عملکرد این متد همانند این است که کاربر دکمه forward مرورگر را کلیک کرده و یا متد  go( ) شی History را با مقدار 1+ اجرا کنید .

شکل کلی استفاده از این متد به صورت زیر است :

Syntax

history.forward ( )

متد ( ) back شی History :

این متد ، صفحه قبلی مشاهده شده در مرورگر را باز می کند . آدرس ( URL ) این صفحه در عنصر قبلی ذخیره شده در شی History قرار دارد .
عملکرد این متد همانند این است که دکمه
back مرورگر را کلیک کرده و یا متد ( ) go شی History را با مقدار 1- اجرا کنید .

شکل کلی استفاده از این متد به صورت زیر است :

Syntax

history.back ( )

مثال 1 : در مثال زیر از متد back در تابع backward استفاده کرده ایم . این تابع با کلیک بر روی دکمه بازگشت به صفحه قبلی فراخوانی شده و مرورگر را به صفحه قبلی مشاهده شده می برد . برای رفتن به صفحه قبل بر روی دکمه فرمان بازگشت به صفحه قبلی در قسمت خروجی کلیک کنید

Example

<script type = " text/javascript " >
  function backward ( )
    {
      history.back ( ) ;
    }
</script>

< input   type = " button "   name = " PrPage "   value = "
بازگشت به صفحه قبل"   onclick = " backward ( ) "   />

کد

 

متد ( ) forward شی History :

این متد ، صفحه بعدی مشاهده شده در مرورگر را باز می کند . آدرس ( URL ) این صفحه در عنصر بعدی ذخیره شده در شی History قرار دارد . البته این متد زمانی اجرا می شود که کاربر از مسیر رفته به عقب برگشته باشد . به عبارت دیگر آدرس صفحه ای در عنصر بعدی حافظه شی History ذخیره شده باشد . در غیر این صورت نیز با فراخوانی این متد خطایی رخ نداده و مرورگر در همان صفحه باقی می ماند .
عملکرد این متد همانند این است که کاربر دکمه
forward مرورگر را کلیک کرده و یا متد ( ) go شی History را با مقدار 1+ اجرا کنید .

شکل کلی استفاده از این متد به صورت زیر است :

Syntax

history.forward ( )

مثال 1 : در مثال زیر از متد forward در تابع fwd استفاده کرده ایم . این تابع با کلیک بر روی دکمه در شی History رفتن به صفحه بعدی فراخوانی شده و مرورگر را به صفحه بعدی مشاهده شده می برد . برای رفتن به صفحه بعد بر روی دکمه فرمان رفتن به صفحه بعدی در قسمت خروجی کلیک کنید :

Example

<script type = " text/javascript " >
  function fwd ( )
    {
      history.forward ( ) ;
    }
</script>

< input   type = " button "   name = " FwPage "   value = "
رفتن به صفحه بعد"   onclick = " fwd ( ) "   />

کد

 

متد  go() شی History :

این متد یک صفحه که در لیست صفحات شی History مرورگر ذخیره شده است را باز می کند .
همانطور که در معرفی شی History گفتیم ، آدرس URL صفحاتی که شما در یک پنجره مرورگر مشاهده می کنید ، در این شی ذخیره می شود . از این متد برای رفتن به یکی از صفحات مشاهده شده که در شی History قرار دارد ، استفاده می شود .
این متد دارای یک پارامتر اجباری است ، که باید به وسیله آن آدرس URL صفحه و یا شماره آن در لیست شی History را به این متد ارسال کنید . نوع این پارامتر می تواند عددی ( Integer ) و یا متن ( String ) باشد .

شکل کلی استفاده از این متد به صورت زیر است :

Syntax

history.go ( VLocation * )
* VLocation :
یک پارامتر عددی یا متن که آدرس صفحه مورد نظر را مشخص می کند

راهنمایی به کار بردن پارمتر : شما می توانید شماره صفحه مورد نظر خود در لیست صفحات شی History و یا آدرس دقیق آن را به این شی توسط پارامتر ارسال کنید . در مثال های زیر استفاده از هر دو حالت این پارامتر را به شما نمایش می دهیم . اما معنای به کار بردن اعداد توسط این پارامتر به صورت زیر است :

  • عدد 1 : به معنای باز کردن صفحه بعدی مشاهده شده است ( البته متد در این حالت زمانی کار می کند ، که کاربر از مسیر رفته به عقب بازگشت کرده باشد )
  • عدد 2 : به معنای باز کردن 2 صفحه بعد مشاهده شده نسبت به صفحه جاری است و برای اعداد 3 و 4 و ... نیز به همین منوال است .
  • عدد 1 - (منفی : ( به معنای باز کردن صفحه قبلی مشاهده شده است .
  • اعداد 2- و 3- و ... : به معنای باز کردن 2 صفحه قبل مشاهده شده است و برای اعداد 3- و 4- و... وضع به همین منوال است .

نکته مهم : در صورتی که صفحه تعیین شده در متد  go( ) ، قبلا در پنجره جاری مرورگر باز و مشاهده نشده باشد و به عبارت دیگر آن صفحه در شی History مرورگر وجود نداشته باشد ، در هنگام اجرای این متد خطایی رخ نمی دهد و مرورگر در صفحه جاری باقی می ماند

مثال 1 : در مثال زیر متد  go( ) شی History را در تابع PrPage به کار برده ایم . با اجرای این متد ، مرورگر به صفحه قبلی مشاهده شده می رود .:

Example

<script type = " text/javascript " >
  function PrPage ( )
    {
      history.go ( -1 ) ;
    }
</script>

< input   type = " button "   name = " BtnPrPage "   value ="Previous Page"   onclick = " PrPage ( ) "   />

کد

مثال 2 : در مثال زیر متد  go( ) شی History را در تابع UrlDefine به کار برده ایم . در این مثال آدرس صفحه ای که می خواهیم مرورگر آن را باز کند را به صورت کامل در داخل پرانتز جلوی متد  go() توسط پارامتر مربوط قرار داده ایم . با اجرای این متد ، مرورگر صفحه تعیین شده را در صورتی که شما آن را قبلا در همین پنجره مشاهده کرده باشید ، باز می کند .

Example

<script type = " text/javascript " >
  function UrlDefine ( )
    {
      history.go ( http://www.gharbnet.ir.ir/JavaScript/Histoty.aspx ) ;
    }
</script>

< input   type = " button "   name = " BtnUrl "   value ="Go Page"   onclick = " UrlDefine ( ) "   />

کد