شروع جاوا اسکریپت و دستورات مقدماتی آن – جلسه دوم

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

مباحثی که در این جلسه بحث خواهیم کرد :

  • ساختار شرطی در جاوا اسکریپت
  • ساختار کنترلی در جاوا اسکریپت
  • توابع در جاوا اسکریپت
  • منوهای Pop-Up در جاوا اسکریپت
  • آرایه در جاوا اسکریپت

 

ساختارهای شرطی در جاوا اسکریپت

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

در جاوا اسکریپت نیز بطور کلی سه نوع ساختار برای دستورات شرطی وجود دارد:

  1. دستورات (شرط یا شروط) if
  2. دستورات ۲ else دستورات ۲ (شرط یا شروط) if
  3. دستورات ۳ else دستورات ۲ (شرط یا شروط ۲) else if (شرط یا شروط ۱) if

 

 

ساختار اول

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

if(conditions)
  {
     statement ;
  } 
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
<script type="text/javascript">
  var  num  = 18
  if ( num > 10 )
    {
      document.write (" این عدد بزرگتر از ۱۰ می باشد ")
    }
</script>

خروجی دستورات بالا : این عدد بزرگتر از ۱۰ می باشد

ساختار دوم

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

if   ( conditions )
  {
    statement 1 ;
  }
else
  {
    statement 2 ;
  } 
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
< script type="text/javascript" >
  var  IntNum  = 8
  if ( IntNum > 10 )
    {
      document.write (" این عدد بزرگتر از ۱۰ می باشد ")
    }
  else
    {
      document.write ("این عدد کوچکتر از ۱۰ می باشد")
    }
</script>

خروجی دستورات بالا : این عدد کوچتر از ۱۰ می باشد

 

ساختار سوم

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

if   ( conditions 1 )
  {
    statement 1 ;
  }
else if   ( conditions 2 )
  {
    statement 2 ;
  }
else if   ( conditions 3 )
  {
    statement 3 ;
  }
.
.
.
else
  {
    statement n ;
  }
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
<script type="text/javascript">
  var  score  = 12;
  
  if ( score < 10 )
      document.write ("ضعیف");
	  
  else if( score =>10 && score < 15 )
      document.write ("متوسط");
	  
	else if( score =>15 && score < 18 )
      document.write ("خوب");
	  
	else if( score =>18 && score <= 20 )
      document.write ("عالی");
	
< /script >  

خروجی دستورات بالا : متوسط

در این ساختار چنانچه هر یک از شرط های یک دستور if یا else if درست باشند ، دستورات مربوط به آن اجرا شده و برنامه از کنترل و اجرای سایر شرط های دیگر خودداری می کند . چنانچه هیچ یک از گروه شرط های تعیین شده درست نباشند ، دستورات بخش else در پایان ساختار اجرا می شوند

نکته ۱ : به تعداد مورد نیاز می توان در این ساختار به وسیله دستور else if شرط و دستورات جدید تعریف کرد .
نکته ۲ :استفاده از کروشه در قسمت دستورات شرط if ، فقط در زمانی که دستورات مورد نظر بیش از یک خط هستند ، ضروری است .
نکته ۳ : تعیین قسمت else در ساختار فوق اختیاری بوده و می تواند تعریف نشود .
نکته ۴ : در زمانی که تعداد حالت های شروط بسیار زیاد هستند ، بهتر است از ساختار Switch استفاده کرد .

ساختار کنترلی Switch در جاوا اسکریپت

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

 switch    ( varible or expression name )
{
  case    value 1 :
  statement 1
  break ; 
  case    value 2 :
  statement 2
  break ; 
  .
  .
  .
  .

  case    value n :
  statement n
  break ; 
  default :
	default statement 
} 
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
<script type="text/javascript">
  var  number  = 2;
 switch    ( number )
{
  case    1 :
  document.write ("یک")
  break ; 
  case    2 :
  break ; 
  document.write ("دو")
  case    3 :
  document.write ("سه")
  break ; 
  default :
	document.write ("بزرگتر از سه"); 
}
</script> 

خروجی دستورات بالا : دو

این ساختار چگونه عمل می کند؟

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

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

 

نکات مهم :

  1. نوع متغیر تعیین شده در قسمت switch و مقدارهای هر یک از case ها باید با هم یکسان و از یک نوع باشند .
  2. به تعداد مورد نیاز می توان از دستور case در ساختار switch استفاده کرد .
  3. تعیین قسمت default در ساختار switch ، اختیاری است و می تواند تعیین نشود .
  4. مقدار هیچ دو case متفاوتی ، نباید با هم یکسان باشد .

 

توابع در جاوا اسکریپت

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

  • دستورات یک تابع قبل از فراخوانی ، اجرا نخواهد شد . از توابع برای تعریف دستورهایی استفاده می شود که قصد داریم اجرای آنها کنترل شده و در مواقع معینی ( مثل وقوع یک رویداد یا … ) باشد
  • یک تابع را می توان در هر نقطه ای در صفحه فراخوانی کرد
  • یک تابع می توان تعدادی متغیر را به عنوان پارامتر ورودی دریافت کرده و همچنین یک مقدار را به عنوان خروجی بازگرداند

شکل عمومی یک تابع همراه با یک مثال در زیر آمده است :

function   نام تابع ( )
 {
   دستورات تابع
 } 
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
function Hello( )
    {
      document.write ( "Hello to all Solutionz users" )
    }

بعد از اینکه تابع مورد نظر ما ایجاد شد ، چگونه باید از آن استفاده کنیم؟ در زیر نحوه فراخوانی یک تابع در قسمت Body همراه با یک مثال آمده است :

 نام تابع ( ) ; 
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
<html>
  <body>
    <script type="text/javascript">
      function Hello( )
    {
      document.write ( "Hello to all Solutionz users" )
    }
    </script>

    <script type="text/javascript">
        Hello() ;
     </script>
  </body>
</html>

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

فرض کنید ما در صفحه خود یک دکمه ایجاد کردیم ، می خواهیم زمانی که کاربر روی دکمه کلیک کرد ، پیغامی برای او به نمایش گذاشته شود :

 <html>
  <body>
  <script type="text/javascript">
    function Hello( )
  {
    alert("Hello to all Solutionz users")
  }
  </script>
 
  <input type="submit" id="Button1" onclick="Hello( );" value="click me"/>
</body>
</html> 

کد های بالا را در یک ویرایشگر کپی کرده و با پسوند html ذخیره کنید و فایل مورد نظر را اجرا کنید ، مشاهده خواهید کرد که پیغام نوشته شده در داخل ()alert در صفحه نمایان می شود ، در ضمن در مورد پاپ آپ alert و دیگر پاپ آپ های جاوا اسکریپت در ادامه توضیح خواهیم داد.

 

نحوه تعریف پارامتر ورودی و مقدار بازگشتی در توابع جاوا اسکریپت

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

در زیر نحوه تعریف یک پارامتر را همراه یک مثال نشان داده ایم :

funciton   نام تابع   ( Parametr 1 , Parametr 2 , ... )
  {
    دستورات تابع
  }
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
function multiple ( var num1 , var num2 )
         {
           var c
		   c = num1 * num2
		   alert(c)
         }
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
<script type="text/javascript">
multiple(17 , 5)
</script>

در دستورات بالا ، در قسمت دوم نحوه تعریف یک تابع با پارامتر ورودی و در قسمت سوم ، نحوه فراخوانی و مقدار دهی آرگومان های ورودی را در قالب یک مثال توضیح داده ایم.

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

در زیر مثالی برای این حالت در اختیار شما قرار می دهیم :

<script type="text/javascript">
  function multiple ( num1 , num2 )
    {
      return ( num1 * num2 ) ;
    }
</script>

<script type="text/javascript">
  function Call_Function()
    {
        var a = 4 ;
        var b = 7 ;
        document.write(multiple ( a , b )); 
    }
</script>

 

کادر های Pop-Up در جاوا اسکریپت

توسط این کادر ها می توان به کاربر پیغام اخطار داد ، از آن تایید گرفت و یا ورودی دریافت کرد ، به طور کلی ۳ نوع کادر Pop-Up در جاوا اسکریپت داریم :

  1. کادر پیام یا هشدار ( alert Box )
  2. (confirm Box )
  3. کادر دریافت ورودی ( prompt Box )

 

کادر پیام یا هشدار

از کادر alert Box ، برای اعلام یک پیام یا هشدار به کاربر استفاده می شود . این پیام که از قبل باید تعیین شده باشد ،در یک کادر ظاهر شده و تا زمانی که کاربر دکمه Ok را انتخاب نکند ، از بین نمی رود

شکل کلی ایجاد یک کادر هشدار یا پیام به شکل زیر است :

alert("متن پیام یا هشدار"); 
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
<script type="text/javascript">
    alert("Hello to all Solutionz users")
  </script>

خروجی دستورات بالا به شکل زیر می باشد :

کادر هشدار یا Alert box در جاوا اسکریپت

کادر دریافت تایید

از این کادر ، برای اعلام یک پیام به کاربر و دریافت نظر آن مبنی بر قبول یا عدم قبول پیام مورد نظر استفاده می شود ، این کادر دارای ۲ دکمه فرمان OK و Cancel است ، که در صورت انتخاب گزینه OK ، مقدار True و در صورت انتخاب گزینه Cancel ، مقدار False به صفحه برگشت داده می شود.

شکل کلی ایجاد یک کادر هشدار یا پیام به شکل زیر است :

confirm("متن پیام");
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
  <script type="text/javascript">
    confirm("آیا از این آموزش در وب سایت سلوشنز راضی هستید؟")
  </script>

خروجی دستورات بالا به شکل زیر می باشد :

کادر تایید یا Confirm box در جاوا اسکریپت

کادر دریافت ورودی

از این کادر ، برای اعلام یک پیام به کاربر و دریافت یک ورودی استفاده می شود ، در این حالت یک کادر حاوی پیام مورد نظر ، یک تکس باکس برای ورود مقدار ، دکمه OK برای تایید و ارسال مقدار ورودی به صفحه و دکمه Cancel برای لغو عملیات نمایش داده می شود .

شکل کلی ایجاد یک کادر هشدار یا پیام به شکل زیر است :

prompt("مقدار پیش فرض","متن پیام"); 
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
<script type="text/javascript">
    prompt("please insert yor name")
  </script>

خروجی دستورات بالا به شکل زیر می باشد :

کادر دریافت ورودی یا Prompt box در جاوا اسکریپت

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

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

برای تعریف یک آرایه ، از کلمه کلیدی new Array استفاده می شود :

var نام آرایه = new Array(تعداد عضو ارایه);
var Cities = new Array(4); 

نکات مهم :

  • با توجه به مثال بالا ، می توان تعداد اعضای آرایه را در زمان تعریف آن مشخص کرد که این امر اختیاری است
  • شماره گذاری اندیس اعضای یک آرایه از صفر شروع شده و برای هر عضو یک واحد اضافه می شود

 

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

در هنگام تعریف یک آرایه می توان عناصر آن را مقدار دهی کرد ، که دو روش کلی وجود دارد که که در مثالی جداگانه هر یک را توضیح می دهیم .

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

<script type="text/javascript">
  var Cities = new Array (4) ;
  Cities[0] = "Tabriz";
  Cities[1] = "Tehran";
  Cities[2] = "Isfahan";
  Cities[3] = "Shiraz";
</script>

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

<script type="text/javascript">
  var Cities = new Array("Tabriz","Tehran","Isfahan","Shiraz");
</script>
نگارش و انتشار توسط میلاد صادقیان

فعال در زمینه های : برنامه نویسی پویا تحت ویندوز ، طراحی رابط کاربری UI ، توسعه و طراحی وب

دیدگاه شما

ایمیل شما نزد ما محفوظ خواهد بود.