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

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

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

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

آرایه ها و حلقه ها در جاوا اسکریپت

آرایه در جاوا اسکریپت :

مفهوم آرایه : آرایه مجموعه ای از متغیرهایی از یک نوع داده ای با نام یکسان است ، که هر کدام از اعضای آن توسط یک شمارنده ( اندیس ) ، از یکدیگر متمایز می شوند .
شمارنده هر عضو آرایه در یک براکت در مقابل نام آن تعیین شده ، که برای مقدار دهی و دسترسی به هر عضو آرایه از اندیس آن استفاده می شود .
برای تعریف یک آرایه ، از واژه کلیدی new Array به شکل کلی زیر استفاده می شود :

var  نام آرایه =  new Array ( ) ;
مثال :   var Cars = new Array ( ) ;

نکات مهم :

نکته 1 : می توان تعداد اعضای یک آرایه را در زمان تعریف ، در پرانتز جلوی واژه کلیدی new Array ، تعیین کرد :
مثال : آرایه زیر 4 عضو دارد :

var Cars = new Array ( 4 ) ;

نکته 2 : شماره گذاری اندیس اعضای یک آرایه از صفر شروع شده و برای هر عضو شمارنده یک واحد افزایش می یابد .
مثال : آرایه ای که در مثال قبل ایجاد کردیم ، 4 عشو زیر را داراست :

Cars [ 0 ]   ,   Cars [ 1 ]   ,   Cars [ 2 ]   ,   Cars [ 3 ]

نکته 3 : برای مقدار دهی یا دسترسی به هر عضو آرایه ، از نام آرایه به همراه شمارنده یا اندیس عضو مورد نظر در براکت مقابل نام آن ، به شکل کلی زیر استفاده می شود :

مقدار مورد نظر = [ اندیس عضو مورد نظر ] نام آرایه ;
مثال : Cars [ 0 ] = "Ford" ;
Cars [ 1 ] = "Nissan" ;

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

Example

< script type="text/javascript" >
  var Cars = new Array ( 3 ) ;
  Cars [ 0 ] = "Ford" ;
  Cars [ 1 ] = "Nissan" ;
  Cars [ 2 ] = "Mazda" ;
  document.write ( Cars [ 0 ] ) ;
  document.write ( Cars [ 1 ] ) ;
< /script >

کد

 

روش های مقدار دهی کلی اعضای یک آرایه :

تمام یا بخش هایی از اعصای یک آرایه را می توان در هنگام تعریف و یا بعد از آن مقدار دهی کرد . به طور کلی 2 روش برای مقدار دهی اعضای یک آرایه وجود دارد :

روش اول : در روش اول ، هر یک از اعضای آرایه را به صورت تکی مقدار دهی می کنیم . در مثال زیر یک ابتدا آرایه 4 عضوی تعریف شده و سپس مقدار دهی شده است :

Example

< script type="text/javascript" >
  var Cars = new Array ( 4 ) ;
  Cars [ 0 ] = "Ford" ;
  Cars [ 1 ] = "Nissan" ;
  Cars [ 2 ] = "Mazda" ;
  Cars [ 3 ] = "Volvo" ;
< /script >

کد

روش دوم : در روش دوم ، مقادیر مورد نظر برای تمام یا تعدادی از اعضای آرایه را در پرانتز جلوی واژه کلیدی new Array تعیین کرده و هر مقدار را با کاما از هم جدا می کنیم . در این حالت تعداد اعضای آرایه به طور اتوماتیک بر حسب تعداد مقادیر ورودی تعیین می شود . در مثال زیر ، آرایه تعریف 4 عضو خواهد شد . اعضای این آرایه در مرحله تعریف آرایه تعیین شده اند :

Example

< script type="text/javascript" >
 var Cars = new Array ( "Ford" , "Nissan" , "Mazda" , "Volvo" ) ;
< /script >

 

حلقه ها در جاوا اسکریپت :

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

  1. حلقه for : در این نوع حلقه ، مجموعه دستورالعمل ها به تعداد معلوم و مورد نیاز ، تکرار خواهد شد .
  2. حلقه while : در این حالت ، دستورالعمل های حلقه تا زمانی که شرط تعیین شده برای آن درست باشد ، مجددا اجرا خواهد شد .

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

for
while

do ... while
for ... in

 

1) حلقه for :

از حلقه for ، زمانی استفاده می شود که می خواهیم مجموعه دستورالعمل های حلقه به تعداد دفعات معینی انجام شود .
این حلقه در هنگام تعریف 3 پارامتر اصلی دارد :

  1. مقدار اولیه متغیر : به وسیله این مقدار ، مقدار اولیه برای شروع شمارنده حلقه تعیین می شود .
  2. عبارت کنترلی : در این قسمت یک عبارت کنترلی مرتبط با شمارنده حلقه تعیین می شود ، که در هر بار اجرای مجدد حلقه ، شرط عبارت کنترل شده و در صورت برقرار بودن شرط ، دستورات حلقه اجرا می شود .
  3. گام افزایش یا کاهش : در این قسمت ، میزانی که متغیر شمارنده حلقه ، در هر بار اجرای دستورات آن افزایش یا کاهش می یابد را تعیین می کنیم .

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

for   ( گام افزایش یا کاهش  ; تعیین عبارت کنترلی   ; تعیین مقدار اولیه متغیر )
   {
    دستورات بدنه حلقه
   }

نکته : از 3 پارامتر اصلی حلقه for ، فقط تعیین عبارت کنترلی در هنگام تعریف حلقه اجباری بوده و می توان متغیر شمارنده حلقه را قبل از تعریف حلقه مقدار دهی کرد و همچنین گام افزایش یا کاهش را در بدنه دستورات تابع قرار داد . در این صورت می توان جای موارد فوق را در تعریف حلقه خالی گذاشت .

مثال : در مثال زیر یک حلقه ساده در اسکریپت زیر ایجاد شده است . شمارنده این حلقه که متغیری به نام n است با مقدار اولیه 1 مقدار دهی شده و شرط حلقه کوچکتر یا مساوی بودن شمارنده حلقه از 5 تعیین شده است . گام افزایش این حلقه نیز 1+ در نظر گرفته شده است . این حلقه در هر بار اجرا مقدار متغیر n را بر روی صفحه چاپ می کند . به خروجی آن دقت کنید :

Example

< script type="text/javascript" >
  var n ;
  for ( n = 1 ; n <= 5 ; n++ )
    {
      document.write ("Line number is " + n + "<br />") ;
    }
< /script >

کد

مثال 2 : همانطور که گفتیم می توان قسمت پارامترهای مقدار اولیه و گام افزایش یا کاهش را در یک حلقه for خالی گذاشته و مقدار اولیه را قبل از تعریف حلقه و گام حلقه را در درون بلاک کد حلقه تعیین کرد . مثال شماره 1 را به این صورت نیز می توان نوشت :

Example

< script type="text/javascript" >
  var n = 1;
  for (   ; n <= 5 ;   )
    {
      document.write ("Line number is " + n + "<br />") ;
      n++ ;
    }
< /script >

کد

نکته و مثال 3 : گام یک حلقه می تواند منفی یا کاهشی نیز باشد . در مثال زیر شمارنده حلقه با هر بار اجرای حلقه یک واحد کاهش می یابد :

Example

< script type="text/javascript" >
  var n ;
  for ( n = 5 ; n >= 1 ; n-- )
    {
      document.write ("Line number is " + n + "<br />") ;
    }
< /script >

کد

یک برنامه کاربردی :

در این قسمت یک برنامه ساده را با جاوا اسکریپت طراحی کرده ایم . این برنامه از طریق 2 کادر متن ، دو عدد را به عنوان ورودی دریافت کرده و عدد اول را به توان عدد دوم می رساند .
توضیح : در ابتدا یک متغیر به نام sum برای نگهداری جواب را با مقدار اولیه 1 تعریف می کنیم . سپس مقدار کادر اول در متغیر n و مقدار کادر دوم را در متغیر i ذخیره می کنیم . از عدد دوم به عنوان شمارنده حلقه استفاده شده که با هر بار اجرای حلقه ، عدد اول یکبار در خود ضرب شده و یک واحد از شمارنده حلقه نیز کم می شود ، تا به 1 برسد . در این حالت اجرای حلقه متوقف شده و نتیجه خروجی بر روی صفحه چاپ می شود :

Example

< script type="text/javascript" >
  function multiple ( )
    {
      var sum = 1 ;
      var n = Num1.value ;
      for ( var i = Num2.value ; i > 0 ; i-- )
       {
         sum = sum * n ;
       }

      document.write ( sum ) ;
    }
< /script >

< input type="text" id="Num1" />
< input type="text" id="Num2" />
< input type="button" id="Btnclick" value=" Click for Multipe" onclick="multiple( )" / >

کد

 

حلقه while در جاوا اسکریپت :

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

while   ( شرط یا شروط حلقه )
   {
     دستوراالعمل های مورد نظر حلقه
   }

مثال : مثال اول قسمت آموزش حلقه for را در اینجا با حلقه while باز نویسی کرده ایم . در این حلقه از متغیر n به عنوان متغیر شمارنده و کنترل کننده حلقه استفاده شده است . اجرای حلقه تا زمانی که شرط آن درست است ، ادامه دارد :

Example

< script type="text/javascript" >
  var n = 1 ;           تعریف و مقدار دهی متغیر کنترلی حلقه
  while ( n <= 5 )
    {
      document.write ("Line number is " + n + "<br />") ;
      n++ ;           گام افزایشی متغیر کنترلی حلقه
    }
< /script >

کد

مثال 2 : در این مثال برنامه کاربردی که یک عدد را به توان عدد دیگری می رساند را که با حلقه for نوشته بودیم ، را با حلقه while باز نویسی کرده ایم . به تفاوت های این دو ساختار دقت کنید :

Example

< script type="text/javascript" >
  function multiple ( )
    {
      var sum = 1 ;
      var n = Num1.value ;
      var i = Num2.value ;
      while ( i > 0 )
       {
         sum = sum * n ;
         i-- ;
       }

      document.write ( sum ) ;
    }
< /script >

< input type="text" id="Num1" />
< input type="text" id="Num2" />
< input type="button" id="Btnclick" value=" Click for Multipe" onclick="multiple( )" / >

کد

 

حلقه do ... while :

ساختار حلقه do ... while ، دقیقا همانند حلقه while است ، با این تفاوت که شرط حلقه do ... while در انتهای حلقه تعریف و کنترل می شود . به عبارت دیگر در این حلقه ابتدا یکبار دستورات حلقه اجرا شده و در آخر شرط حلقه برای اجرای مجدد ، کنترل می شود که در صورت درست بودن یکبار دیگر دستورات آن خواهد شد .
مزیت این حلقه نسبت به حلقه while این است که ، در حلقه while در صورت عدم برقراری شرط حلقه دستورات آن هیچگاه اجرا نخواه شد . اما در حلقه do ... while ، حتی در صورت غلط بودن و عدم برقراری شرط حلقه ، دستورات آن حداقل یکبار اجرا خواهد شد .
شکل کلی تعریف یک حلقه do ... while به صورت زیر است :

do
  {
   دستورات حلقه
  }
while  ( شرط یا شروط حلقه )

مثال : مثال اول قسمت آموزش حلقه while را در اینجا با حلقه do ... while باز نویسی کرده ایم . در این حلقه از متغیر n به عنوان متغیر شمارنده و کنترل کننده حلقه استفاده شده است . اجرای حلقه تا زمانی که شرط آن درست است ، ادامه دارد :

Example

< script type="text/javascript" >
  var n = 1 ;           تعریف و مقدار دهی متغیر کنترلی حلقه
  do
    {
      document.write ("Line number is " + n + "<br />") ;
      n++ ;           گام افزایشی متغیر کنترلی حلقه
    }
  while ( n <= 5 )
< /script >

کد

مثال : در مثال زیر یک حلقه do ... while تعریف شده که شرط اجرای دستورات آن کوچکتر بودن متغیر c از 5 است . اما قبل از حلقه متغیر c با مقدار 8 مقدار دهی شده است . می بینیم که با وجود اشتباه بودن و عدم برقراری شرط حلقه دستورات آن حداقل یکبار اجرا شده و خروجی تولید کرده است ، ولی سری دوم اجرای حلقه به دلیل عدم برقراری شرط آن اجرا نشده است :

Example

< script type="text/javascript" >
  var c = 8 ;           تعریف و مقدار دهی متغیر کنترلی حلقه
  do
    {
      document.write ("Line number is " + c + "<br />") ;
      c++ ;          
    }
  while ( c <= 5 )
< /script >

کد

 

حلقه while در جاوا اسکریپت :

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

while   ( شرط یا شروط حلقه )
   {
     دستوراالعمل های مورد نظر حلقه
   }

مثال : مثال اول قسمت آموزش حلقه for را در اینجا با حلقه while باز نویسی کرده ایم . در این حلقه از متغیر n به عنوان متغیر شمارنده و کنترل کننده حلقه استفاده شده است . اجرای حلقه تا زمانی که شرط آن درست است ، ادامه دارد :

Example

< script type="text/javascript" >
  var n = 1 ;           تعریف و مقدار دهی متغیر کنترلی حلقه
  while ( n <= 5 )
    {
      document.write ("Line number is " + n + "<br />") ;
      n++ ;           گام افزایشی متغیر کنترلی حلقه
    }
< /script >

کد

مثال 2 : در این مثال برنامه کاربردی که یک عدد را به توان عدد دیگری می رساند را که با حلقه for نوشته بودیم ، را با حلقه while باز نویسی کرده ایم . به تفاوت های این دو ساختار دقت کنید :

Example

< script type="text/javascript" >
  function multiple ( )
    {
      var sum = 1 ;
      var n = Num1.value ;
      var i = Num2.value ;
      while ( i > 0 )
       {
         sum = sum * n ;
         i-- ;
       }

      document.write ( sum ) ;
    }
< /script >

< input type="text" id="Num1" />
< input type="text" id="Num2" />
< input type="button" id="Btnclick" value=" Click for Multipe" onclick="multiple( )" / >

کد

 

حلقه do ... while :

ساختار حلقه do ... while ، دقیقا همانند حلقه while است ، با این تفاوت که شرط حلقه do ... while در انتهای حلقه تعریف و کنترل می شود . به عبارت دیگر در این حلقه ابتدا یکبار دستورات حلقه اجرا شده و در آخر شرط حلقه برای اجرای مجدد ، کنترل می شود که در صورت درست بودن یکبار دیگر دستورات آن خواهد شد .
مزیت این حلقه نسبت به حلقه while این است که ، در حلقه while در صورت عدم برقراری شرط حلقه دستورات آن هیچگاه اجرا نخواه شد . اما در حلقه do ... while ، حتی در صورت غلط بودن و عدم برقراری شرط حلقه ، دستورات آن حداقل یکبار اجرا خواهد شد .
شکل کلی تعریف یک حلقه do ... while به صورت زیر است :

do
  {
   دستورات حلقه
  }
while  ( شرط یا شروط حلقه )

مثال : مثال اول قسمت آموزش حلقه while را در اینجا با حلقه do ... while باز نویسی کرده ایم . در این حلقه از متغیر n به عنوان متغیر شمارنده و کنترل کننده حلقه استفاده شده است . اجرای حلقه تا زمانی که شرط آن درست است ، ادامه دارد :

Example

< script type="text/javascript" >
  var n = 1 ;           تعریف و مقدار دهی متغیر کنترلی حلقه
  do
    {
      document.write ("Line number is " + n + "<br />") ;
      n++ ;           گام افزایشی متغیر کنترلی حلقه
    }
  while ( n <= 5 )
< /script >

کد

مثال : در مثال زیر یک حلقه do ... while تعریف شده که شرط اجرای دستورات آن کوچکتر بودن متغیر c از 5 است . اما قبل از حلقه متغیر c با مقدار 8 مقدار دهی شده است . می بینیم که با وجود اشتباه بودن و عدم برقراری شرط حلقه دستورات آن حداقل یکبار اجرا شده و خروجی تولید کرده است ، ولی سری دوم اجرای حلقه به دلیل عدم برقراری شرط آن اجرا نشده است :

Example

< script type="text/javascript" >
  var c = 8 ;           تعریف و مقدار دهی متغیر کنترلی حلقه
  do
    {
      document.write ("Line number is " + c + "<br />") ;
      c++ ;          
    }
  while ( c <= 5 )
< /script >

کد

 

حلقه for...in در جاوا اسکریپت :

از حلقه for ... in در جاوا اسکریپت ، برای حرکت در درون اعضای یک آرایه یا مجموعه خواص یک شی استفاده می شود . به ازای خواندن هر یک از اعضا آرایه یا یکی از خواص شی مورد نظر ، یکبار دستورات درون حلقه اجرا خواهد شد .
تعداد دفعات تکرار دستورات حلقه ، برابر با تعداد اعضای آرایه و یا تعداد خواص شی مورد نظر است . در این حلقه معمولا از یک متغیر به عنوان شمارنده یا اندیس آرایه استفاده می شود .
شکل کلی تعریف یک حلقه for...in به صورت زیر است :

for   ( متغیر   in   نام یک آرایه / مجموعه خواص یک شی )
  {
    دستورات بدنه حلقه
  }

مثال : در مثال زیر ابتدا یک آرایه به نام Lesson برای نگهداری نام دروس کامپیوتر با 5 عضو ایجاد و مقدار دهی شده است . وظیفه حلقه for...in حرکت در درون اعضای آرایه Lesson و چاپ نام تک تک آنها به عنوان خروجی است . به کد مثال دقت کنید :

Example

< script type="text/javascript" >
  var n = 0 ;
  var i = 1 ;
  var Lessons = new Array( 5 ) ;
  Lessons[0] = "HTML" ;
  Lessons[1] = "CSS" ;
  Lessons[2] = "Visual Basic" ;
  Lessons[3] = "Java Script" ;
  Lessons[4] = "ASP.NET" ;
  for ( n   in   Lessons )
    {
      document.write ( "Lesson " + i + " = " + Lessons [n] + "<br / >") ;
      i++ ;
    }
< /script >

کد

- یک مثال مرتبط با دستور continue و حلقه for...in

مثال : فرض کنید که در مثال بالا فقط می خواهیم نام دروسی از آرایه Lesson چاپ شود ، که شماره اندیس آنها در آرایه زوج باشد . بنابراین در بدنه دستورات حلقه یک دستور continue با این شرط که باقی مانده حاصل از تقسیم شماره اندیس آرایه بر 2 برابر صفر نباشد را به قبل از دستور چاپ حلقه اضافه می کنیم . در این صورت نام اعضایی از آرایه که شماره اندیس آنها فرد است چاپ نمی شود و حلقه به اندیس بعدی می رود :

Example

< script type="text/javascript" >
  var n = 0 ;
  var i = 1 ;
  var Lessons = new Array( 5 ) ;
  Lessons[0] = "HTML" ;
  Lessons[1] = "CSS" ;
  Lessons[2] = "Visual Basic" ;
  Lessons[3] = "Java Script" ;
  Lessons[4] = "ASP.NET" ;
  for ( n   in   Lessons )
    {
      if ( n % 2 != 0 ) continue ;
      document.write ( "Lesson " + i + " = " + Lessons [n] + "<br / >") ;
      i++ ;
    }
< /script >

کد

 

دستورات break و continue

دستور break :

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

شکل کلی تعریف یک دستور break به صورت زیر است :
نکته : عملکرد و استفاده از دستور break در تمام حلقه ها یکسان است . در مثال زیر فرض می کنیم ، حلقه ما while است :

while ( شرط حلقه )
  {
    دستورات حلقه
    if ( شرط حلقه )   break ;
    ادامه دستورات حلقه
  }

مثال : مثال چاپ شماره خطوط را که در حلقه های قبل به کار برده بودیم را در این قسمت ، با دستور break باز نویسی کرده ایم . در این حلقه شرط دستور break ، برابر شدن متغیر شمارنده حلقه یعنی n با مقدار 3 است ، که در هنگامی که n برابر 3 می شود ، برنامه از اجرای ادامه دستورات حلقه جلوگیری کرده و از حلقه خارج می شود . بنابرین شماره خطوط تا شماره 3 چاپ شده و 4 و 5 چاپ نمی شود :

Example

نکته : توجه شود که دستورات قبل از دستور break در بدنه حلقه ، به طور کامل اجرا می شوند و تاثیر دستور break بر دستورات بعد از خود می باشد .

< script type="text/javascript" >
  var n ;
  for ( n = 1 ; n <= 5 ; n++ )
    {
      document.write ("Line number is " + n + "<br />") ;
      if ( n == 3 ) break ;
    }
< /script >

کد

 

دستور continue :

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

شکل کلی تعریف یک دستور continue ، به صورت زیر است .
نکته : عملکرد و استفاده از دستور continue در تمام حلقه ها یکسان است . در این مثال ، ما فرض کرده ایم که حلقه while است :

while ( شرط حلقه )
  {
    دستورات حلقه
    if ( شرط حلقه )   continue ;
    ادامه دستورات حلقه
  }

مثال : مثال چاپ شماره خطوط را که در حلقه های قبل به کار برده بودیم را در این قسمت ، با دستور continue باز نویسی کرده ایم . در این حلقه شرط دستور continue ، برابر شدن متغیر شمارنده حلقه یعنی n با مقدار 3 است ، که در هنگامی که n برابر 3 می شود ، برنامه از اجرای ادامه دستورات حلقه در مرحله ای که 3 = n است جلوگیری کرده و به گام بعدی حلقه یعنی 4 = n پرش می کند . بنابرین شماره خطوط تا شماره 2 چاپ شده و شماره 3 چاپ نشده و به ادامه اجرای حلقه در خط 4 پرش می شود .

Example

نکته : توجه شود که دستورات قبل از دستور continue در بدنه حلقه ، به طور کامل اجرا می شوند و تاثیر دستور continue بر دستورات بعد از خود می باشد .

< script type="text/javascript" >
  var n ;
  for ( n = 1 ; n <= 5 ; n++ )
    {
      if ( n == 3 ) continue ;
      document.write ("Line number is " + n + "<br />") ;
    }
< /script >

کد

 

ساختار دستوری try ... catch :

در برنامه نویسی و طراحی صفحات وب ، گاهی اوقات ممکن است خطاهایی رخ دهد . این خطاها می تواند دلایل مختلفی داشته باشد ، از قبیل :

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

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

از ساختار کنترلی try ... catch در جاوا اسکریپت ، برای پیدا کردن خطاها و error های احتمالی و تعیین اقدامات اصلاحی در صورت بروز خطا ، استفاده می شود .
این ساختار از 2 بخش try و catch تشکیل شده است . کد اصلی برنامه که می خواهیم اجرا شود و احتمال می دهیم دارای خطا باشد ، را در قسمت try قرار داده و اقدامات اصلاحی را که می خواهیم در صورت بروز خطا انجام شود ، را در قسمت catch می گذاریم .
برنامه در هنگام رسیدن به ساختار ، دستورات قسمت try را انجام می دهد و در صورت مواجه با خطا در دستورات ، بخش catch را اجرا خواهد کرد .
نکته مهم : در صورت عدم برخورد با خطا ، دستورات قسمت catch به هیچ وجه اجرا نخواهد شد .
نکته مهم 2 : در قسمت catch ، می توان در پرانتز مقابل واژه کلیدی catch ، یک عبارت یا متغیر تعریف کرد ، که این متغیر خصوصیات error به وجود آمده را در خود نگهداری کرد . یکی از این خواص ، شرح یا description خطا است ، که می توان به شکلی که در مثال 2 نشان داده شده است ، به شرح خطا دسترسی داشته و آنرا به کاربر اطلاع داد .
شکل کلی تعریف یک ساختار try ... catch به صورت زیر است :

try
  {
    دستورات مورد نظر برای اجرا که احتمال خطا دارد
  }
catch ( نام یک متغیر )
  {
    اقدامات اصلاحی مورد نظر در صورت وقوع خطا
  }

مثال 1 : در مثال زیر ، یک تابع به نام show_error قرار داده شده است . این تابع توسط دکمه فرمان click me فراخوانی شده و قصد دارد تا یک پیغام خوش آمد به کاربر اعلام کند . اما در متن دستور یک اشتباه تایپی وجود دارد و آن اینکه به جای عبارت documnet.write ، نوشته شده است document.wriet ، به همین دلیل پیغام خروجی چاپ نشده و در صفحه error رخ می دهد . اگر دقت کنید در نوار پایین مرورگر ( Status Bar ) علامت Error on page قرار گرفته است . برای مشاهده error ، بر روی آیکون خطا کلیک کنید . در اینجا به دلیل عدم پیش بینی خطا هیچ واکنشی از سوی مرورگر انجام نمی شود :

Example

< script type="text/javascript" >
  function show_error()
    {
      document.wriet ( "Welcome User!" ) ;
    }
< /script >

< input type="button" id="Button1" value="click me !" onclick="show_error()" />

کد

مثال 1 : در مثال زیر ، تابع show_error2 قرار داده شده است . این تابع نیز همانند تابع قبلی می خواهد یک پیام خوش آمد به کاربر اعلام کند . این تابع نیز دارای اشتباه تایپی در دستور document.write است ، با این تفاوت که با ساختار try ... catch قرار داده شده ، تعیین شده است در صورت بروز خطا یک پیام هشدار به کاربر اعلام شود . توسط متغیر err که در پرانتز مقابل واژه کلیدی catch تعریف شده است ، متن پیام error در خاصیت description ذخیره شده و سپس به کاربر اعلام می شود . به کد مثال دقت کنید :

Example

< script type="text/javascript" >
  function show_error2 ( )
    {
      try
        {
          document.wriet ( "Welcome User!" ) ;
        }
      catch ( err )
        {
         alert ( "There was an error on this page . \n\n" + "Error Description : " + err.description +"\n\nClick Ok for continue" ) ;
        }
    }
< /script >

< input type="button" id="btnclick2" value="click me ! to see error report" onclick="show_error( )" />

کد

 

دستور throw :

توسط دستور throw در جاوا اسکریپت می توان یک خطایابی کامل تر را انجام داد . با استفاده از این دستور به همراه ساختار try ... catch ، می توان روند اجرای برنامه و بروز خطا را کاملا تحت کنترل داشت و یک پیغام خطا دقیق طراحی کرد .
نکته : دستور throw به تنهایی کاربردی نداشته و باید آنرا با ساختار دستوری try ... catch به کار برد .

در مثال زیر سعی شده است ، تا چگونگی استفاده از یک دستور throw را در قالب ساختار try ... catch توضیح داد .
مثال : در مثال زیر یک اسکریپت ساده برای دریافت ورودی از کاربر طراحی شده است . تابع Enter_Num که توسط دکمه فرمان Enter Number فراخوانی می شود ، در ابتدا یک کادر متن برای دریافت ورودی از کاربر ، نمایش می دهد . مقدار دریافتی از کاربر در متغیر Num ذخیره می شود . سپس در یک ساختار try ... catch ، مقدار دریافتی از کاربر بررسی می شود .
در حالت اول ، چنانچه کاربر مقداری را در کادر وارد نکرده و آنرا خالی ارسال کرده باشد ، برنامه خطای 1 را شناسایی و یک پیام هشدار مبنی بر وارد کردن عدد نمایش داده و سپس مجددا تابع Enter_Num را برای دریافت مقدار صحیح اجرا می کند . در حالت دوم اگر کاربر عددی بزرگتر از 100 را وارد کرده باشد ، برنامه خطای دوم را شناسایی کرده و یک پیغام هشدار مبنی بر بزرگ بودن عدد وارده را نمایش داده و مجددا تابع Enter_Num را اجرا می کند . به کد مثال و نحوه استفاده از دستور throw دقت کنید :

Example

< script type="text/javascript" >
  function Enter_Num ( )
    {
      var Num = prompt ( "Enter a number please : " , "" ) ;
      try
        {
          if ( !Num )
            throw "Error1"
          else if ( Num > 100 )
            throw "Error2"
        }
      catch ( er )
          {
          if ( er == "Error1" )
           {
               alert ( "Plese enter a number !" ) ;
               Enter_Num ( ) ;
            }
          if ( er == "Error2" )
            {
               alert ( "Number too big . Enter a smaller number !" ) ;
               Enter_Num( ) ;
            }
          }
    }
< /script >

< input type="button" id="BtnEnter" value="Enter Number " onclick="Enter_Num( )" />

کد

 

ساختار دستوری try ... catch :

در برنامه نویسی و طراحی صفحات وب ، گاهی اوقات ممکن است خطاهایی رخ دهد . این خطاها می تواند دلایل مختلفی داشته باشد ، از قبیل :

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

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

از ساختار کنترلی try ... catch در جاوا اسکریپت ، برای پیدا کردن خطاها و error های احتمالی و تعیین اقدامات اصلاحی در صورت بروز خطا ، استفاده می شود .
این ساختار از 2 بخش try و catch تشکیل شده است . کد اصلی برنامه که می خواهیم اجرا شود و احتمال می دهیم دارای خطا باشد ، را در قسمت try قرار داده و اقدامات اصلاحی را که می خواهیم در صورت بروز خطا انجام شود ، را در قسمت catch می گذاریم .
برنامه در هنگام رسیدن به ساختار ، دستورات قسمت try را انجام می دهد و در صورت مواجه با خطا در دستورات ، بخش catch را اجرا خواهد کرد .
نکته مهم : در صورت عدم برخورد با خطا ، دستورات قسمت catch به هیچ وجه اجرا نخواهد شد .
نکته مهم 2 : در قسمت catch ، می توان در پرانتز مقابل واژه کلیدی catch ، یک عبارت یا متغیر تعریف کرد ، که این متغیر خصوصیات error به وجود آمده را در خود نگهداری کرد . یکی از این خواص ، شرح یا description خطا است ، که می توان به شکلی که در مثال 2 نشان داده شده است ، به شرح خطا دسترسی داشته و آنرا به کاربر اطلاع داد .
شکل کلی تعریف یک ساختار try ... catch به صورت زیر است :

try
  {
    دستورات مورد نظر برای اجرا که احتمال خطا دارد
  }
catch ( نام یک متغیر )
  {
    اقدامات اصلاحی مورد نظر در صورت وقوع خطا
  }

مثال 1 : در مثال زیر ، یک تابع به نام show_error قرار داده شده است . این تابع توسط دکمه فرمان click me فراخوانی شده و قصد دارد تا یک پیغام خوش آمد به کاربر اعلام کند . اما در متن دستور یک اشتباه تایپی وجود دارد و آن اینکه به جای عبارت documnet.write ، نوشته شده است document.wriet ، به همین دلیل پیغام خروجی چاپ نشده و در صفحه error رخ می دهد . اگر دقت کنید در نوار پایین مرورگر ( Status Bar ) علامت Error on page قرار گرفته است . برای مشاهده error ، بر روی آیکون خطا کلیک کنید . در اینجا به دلیل عدم پیش بینی خطا هیچ واکنشی از سوی مرورگر انجام نمی شود :

Example

< script type="text/javascript" >
  function show_error()
    {
      document.wriet ( "Welcome User!" ) ;
    }
< /script >

< input type="button" id="Button1" value="click me !" onclick="show_error()" />

کد

مثال 1 : در مثال زیر ، تابع show_error2 قرار داده شده است . این تابع نیز همانند تابع قبلی می خواهد یک پیام خوش آمد به کاربر اعلام کند . این تابع نیز دارای اشتباه تایپی در دستور document.write است ، با این تفاوت که با ساختار try ... catch قرار داده شده ، تعیین شده است در صورت بروز خطا یک پیام هشدار به کاربر اعلام شود . توسط متغیر err که در پرانتز مقابل واژه کلیدی catch تعریف شده است ، متن پیام error در خاصیت description ذخیره شده و سپس به کاربر اعلام می شود . به کد مثال دقت کنید :

Example

< script type="text/javascript" >
  function show_error2 ( )
    {
      try
        {
          document.wriet ( "Welcome User!" ) ;
        }
      catch ( err )
        {
         alert ( "There was an error on this page . \n\n" + "Error Description : " + err.description +"\n\nClick Ok for continue" ) ;
        }
    }
< /script >

< input type="button" id="btnclick2" value="click me ! to see error report" onclick="show_error( )" />

کد

 

دستور: throw

توسط دستور throw در جاوا اسکریپت می توان یک خطایابی کامل تر را انجام داد . با استفاده از این دستور به همراه ساختار try ... catch ، می توان روند اجرای برنامه و بروز خطا را کاملا تحت کنترل داشت و یک پیغام خطا دقیق طراحی کرد .
نکته : دستور throw به تنهایی کاربردی نداشته و باید آنرا با ساختار دستوری try ... catch به کار برد .

در مثال زیر سعی شده است ، تا چگونگی استفاده از یک دستور throw را در قالب ساختار try ... catch توضیح داد .
مثال : در مثال زیر یک اسکریپت ساده برای دریافت ورودی از کاربر طراحی شده است . تابع Enter_Num که توسط دکمه فرمان Enter Number فراخوانی می شود ، در ابتدا یک کادر متن برای دریافت ورودی از کاربر ، نمایش می دهد . مقدار دریافتی از کاربر در متغیر Num ذخیره می شود . سپس در یک ساختار try ... catch ، مقدار دریافتی از کاربر بررسی می شود .
در حالت اول ، چنانچه کاربر مقداری را در کادر وارد نکرده و آنرا خالی ارسال کرده باشد ، برنامه خطای 1 را شناسایی و یک پیام هشدار مبنی بر وارد کردن عدد نمایش داده و سپس مجددا تابع Enter_Num را برای دریافت مقدار صحیح اجرا می کند . در حالت دوم اگر کاربر عددی بزرگتر از 100 را وارد کرده باشد ، برنامه خطای دوم را شناسایی کرده و یک پیغام هشدار مبنی بر بزرگ بودن عدد وارده را نمایش داده و مجددا تابع Enter_Num را اجرا می کند . به کد مثال و نحوه استفاده از دستور throw دقت کنید :

Example

< script type="text/javascript" >
  function Enter_Num ( )
    {
      var Num = prompt ( "Enter a number please : " , "" ) ;
      try
        {
          if ( !Num )
            throw "Error1"
          else if ( Num > 100 )
            throw "Error2"
        }
      catch ( er )
          {
          if ( er == "Error1" )
           {
               alert ( "Plese enter a number !" ) ;
               Enter_Num ( ) ;
            }
          if ( er == "Error2" )
            {
               alert ( "Number too big . Enter a smaller number !" ) ;
               Enter_Num( ) ;
            }
          }
    }
< /script >

< input type="button" id="BtnEnter" value="Enter Number " onclick="Enter_Num( )" />

کد

 

ساختار دستوری: onerror

استفاده از ساختار onerror ، روش قدیمی خطا یابی در صفحات وب در زبان جاوا اسکریپت است .
در صفحه قبل ، نحوه استفاده از ساختار دستوری try ... catch را توضیح دادیم . از ساختار دستوری onerror نیز برای خطایابی در صفحات وب ، ولی با روشی متفاوت استفاده می شود .
رویداد onerror ، هر زمان که خطایی در یک اسکریپت در صفحه به وجود بیاید ، تحریک شده و اتفاق می افتد . برای استفاده از رویداد onerror ، برنامه نویس باید تابعی را طراحی کند که خطا به وجود آمده در صفحه را مدیریت ( Handle ) کند . رویداد onerror در زمان بروز خطا ، تابع مدیریت خطا ( Event Handler Function ) را فراخوانی خواهد کرد ، که در این صورت دستورات پیش بینی شده برای مواجه با خطا اجرا خواهد شد .
تابع مدیریت خطا با 3 پارامتر ( آرگومان ) ، به شرح زیر فراخوانی خواهد شد :

  1. msg : متن پیام خطایی که توسط مرورگر تولید شده و شامل توضیحاتی راجع به error رخ داده است ، را ارائه می دهد .
  2. url : مسیر کامل صفحه ای که خطا در آن اتفاق افتاده را شامل می شود .
  3. l : شماره خط کدی که خطا در آن اتفاق افتاده است ، را نگهداری می کند .

شکل کلی تعریف یک ساختار onerror ، به همراه تابع مدیریت خطا به صورت زیر است :

onerror  =  نام تابع مدیریت خطا

function   نام تابع مدیریت خطا ( )
   {
     دستورات مدیریت خطا
     return false Or true
   }

نکته مهم : تابع مدیریت خطا دارای یک مقدار بازگشتی است ، که توسط طراح و به وسیله دستور return تعیین می شود . این مقدار می تواند یکی از 2 حالت True یا False باشد .این مقدار تعیین می کند که آیا مرروگر در هنگام بروز خطا ، علامت خطا را در نوار پایین مرورگر ( Status Bar ) نشان داده و گزارش استاندارد راجع به خطا به وجود آمده اعلام کند یا خیر .
در صورت تعیین و باز گرداندن مقدار True ، مررورگر در هنگام وقوع یک error ، در نوار Status Bar علامت و گزارش خطا را اعلام نمی کند ولی در صورت بازگرداندن مقدار False ، مرورگر در نوار پایین علامت خطا را نمایش داده و یک گزارش کامل از خطا را به صورت استاندارد اعلام می کند .

مثال : در مثال زیر یک تابع مدیریت خطا با نام ErrorHandler برای واکنش در زمان بروز خطا طراحی شده است . این تابع قرار است در هنکام بروز خطا یک کادر پیام حاوی توضیح نوع خطا ، آدرس کامل صفحه ای که خطا در آن روی داده و شماره خط کد اشتباه را به کاربر اعلام کند .
از طرف دیگر در تابع PageEroor ، یک اشتباه تایپی وجود دارد و به جای عبارت alert نوشته شده است alertt . این اشتباه باعث بروز خطا در صفحه شده که در نتیجه تابع مدیریت خطا فراخوانی شده و پیغام خود را نمایش می دهد . همچنین به علت باز گرداندن مقدار true توسط تابع مدیریت خطا ، مرورگر علامت خطا را در نوار Status Bar نشان نمی دهد :

Example

<script type="text/javascript">
  onerror = ErrorHandler
  function ErrorHandler ( msg , url , l )
    {
      alert ( "Error Discription : " + msg + "\nPage URL : " + url + "\nLine Number : " + l ) ;
      return true ;
    }
</script>

<script type="text/javascript">
  function PageError ( )
    {
      alertt ( "gharbnet" ) ;
    }
</script>

<input type="button" id="BtnError" value="Click to view error report" onclick="PageError()" />

کد

 

ساختار دستوری onerror :

استفاده از ساختار onerror ، روش قدیمی خطا یابی در صفحات وب در زبان جاوا اسکریپت است .
در صفحه قبل ، نحوه استفاده از ساختار دستوری try ... catch را توضیح دادیم . از ساختار دستوری onerror نیز برای خطایابی در صفحات وب ، ولی با روشی متفاوت استفاده می شود .
رویداد onerror ، هر زمان که خطایی در یک اسکریپت در صفحه به وجود بیاید ، تحریک شده و اتفاق می افتد . برای استفاده از رویداد onerror ، برنامه نویس باید تابعی را طراحی کند که خطا به وجود آمده در صفحه را مدیریت ( Handle ) کند . رویداد onerror در زمان بروز خطا ، تابع مدیریت خطا ( Event Handler Function ) را فراخوانی خواهد کرد ، که در این صورت دستورات پیش بینی شده برای مواجه با خطا اجرا خواهد شد .
تابع مدیریت خطا با 3 پارامتر ( آرگومان ) ، به شرح زیر فراخوانی خواهد شد :

  1. Msg  : متن پیام خطایی که توسط مرورگر تولید شده و شامل توضیحاتی راجع به error رخ داده است ، را ارائه می دهد .
  2. url  : مسیر کامل صفحه ای که خطا در آن اتفاق افتاده را شامل می شود .
  3. l  شماره خط کدی که خطا در آن اتفاق افتاده است ، را نگهداری می کند .

شکل کلی تعریف یک ساختار onerror ، به همراه تابع مدیریت خطا به صورت زیر است :

onerror  =  نام تابع مدیریت خطا

function   نام تابع مدیریت خطا ( )
   {
     دستورات مدیریت خطا
     return false Or true
   }

نکته مهم : تابع مدیریت خطا دارای یک مقدار بازگشتی است ، که توسط طراح و به وسیله دستور return تعیین می شود . این مقدار می تواند یکی از 2 حالت True یا False باشد .این مقدار تعیین می کند که آیا مرروگر در هنگام بروز خطا ، علامت خطا را در نوار پایین مرورگر ( Status Bar ) نشان داده و گزارش استاندارد راجع به خطا به وجود آمده اعلام کند یا خیر .
در صورت تعیین و باز گرداندن مقدار True ، مررورگر در هنگام وقوع یک error ، در نوار Status Bar علامت و گزارش خطا را اعلام نمی کند ولی در صورت بازگرداندن مقدار False ، مرورگر در نوار پایین علامت خطا را نمایش داده و یک گزارش کامل از خطا را به صورت استاندارد اعلام می کند

مثال : در مثال زیر یک تابع مدیریت خطا با نام ErrorHandler برای واکنش در زمان بروز خطا طراحی شده است . این تابع قرار است در هنکام بروز خطا یک کادر پیام حاوی توضیح نوع خطا ، آدرس کامل صفحه ای که خطا در آن روی داده و شماره خط کد اشتباه را به کاربر اعلام کند .
از طرف دیگر در تابع PageEroor ، یک اشتباه تایپی وجود دارد و به جای عبارت alert نوشته شده است alertt . این اشتباه باعث بروز خطا در صفحه شده که در نتیجه تابع مدیریت خطا فراخوانی شده و پیغام خود را نمایش می دهد . همچنین به علت باز گرداندن مقدار true توسط تابع مدیریت خطا ، مرورگر علامت خطا را در نوار Status Bar نشان نمی دهد :

Example

<script type="text/javascript">
  onerror = ErrorHandler
  function ErrorHandler ( msg , url , l )
    {
      alert ( "Error Discription : " + msg + "\nPage URL : " + url + "\nLine Number : " + l ) ;
      return true ;
    }
</script>

<script type="text/javascript">
  function PageError ( )
    {
      alertt ( "gharbnet" ) ;
    }
</script>

<input type="button" id="BtnError" value="Click to view error report" onclick="PageError()" />

کد

 

آرایه ها در جاوا اسکریپت حلقه ها در جاوا اسکریپت
سعید کریمی جمعه 20 دی 1392 ساعت 19:25
نظرات 0 + ارسال نظر
امکان ثبت نظر جدید برای این مطلب وجود ندارد.