در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش JavaScript قسمت دوم

به نام پروردگار همه ی زیبایی های ایران زمین

ساختارهای شرطی در Java Script :

ما از ساختارهای شرطی به منظور انجام عملیات متفاوت بر اساس شرایط متفاوت،استفاده می کنیم.

انواع ساختارهای شرطی در Java Script :

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

نحو (Syntax) :

if (شرط)
  {
  دستورات
  }

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

در مثال زیر در صورتیکه ساعت کمتر از 8 عصر باشد،پیغام مناسب (Good day) صادر می شود :

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a "Good day" greeting if the time is less than 20:00.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script type="text/javascript">
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
  {
  x="Good day";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

نوع دوم : ساختار شرطی If...else Statement : از این ساختار زمانی استفاده می کنیم که بخواهیم یک یا چند دستور،تنها در صورتیکه شرط برقرار باشد اجرا شوند (دستورات 1) و در غیر اینصورت یعنی اگر شرط برقرار نباشد دستور یا دستورات دیگری را اجرا کند (دستورات 2) :

نحو (Syntax) :

if (شرط)
  {
  دستورات 1
  }
else
  {
  دستورات 2
  }

در مثال زیر در صورتیکه ساعت کمتر از 8 عصر باشد،پیغام مناسب (Good day) صادر می شود و در غیر این صورت پیغامی مناسب (Good evening) ظاهر می شود:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script type="text/javascript">
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

نوع سوم : ساختار شرطی If...else if...else Statement : توسط این ساختار شما می توانید چندین شرط را بررسی کنید (به تعداد نا محدود)،در این حالت شرط ها از بالا به پایین بررسی می شوند،هرگاه شرطی درست باشد دستورات مربوط به آن اجرا شده (دستورات 1) و از ساختار شرطی خارج می شویم ( یعنی سایر شرط ها بررسی نمی شوند )، اما اگر شرط اول درست نباشد، شرط دوم بررسی می شود و این کار تا انتها ادامه پیدا می کند و در صورتیکه هیچ یک از شرط ها برقرار نباشند،دستورات مربوط به else اجرا می شوند :

نحو (Syntax) :

if ( شرط 1 )
  {
  دستورات 1
  }
else if ( شرط 2  )
  {
    دستورات 2
  }
else
  {
    دستورات 3
  }

در مثال زیر در صورتیکه شرط اول برقرار باشد (یعنی اگر ساعت کمتر از 10 صبح باشد) پیغامی مناسب ( Good morning ) صادر می شود،در غیر این صورت شرط دوم بررسی می گردد (یعنی اگر ساعت کمتر از 8 عصر باشد) پیغام مناسب ( Good day) صادر می شود ،اما اگر این شرط هم برقرار نباشد دستورات ( Good evening) مربوط به else اجرا می شود:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script type="text/javascript">
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<10)
  {
  x="Good morning";
  }
else if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>


به نام پروردگار همه ی زیبایی های ایران زمین

ساختار شرطی switch : از این ساختار زمانی استفاده می کنیم که بخواهیم بر اساس مقادیر مختلف یک متغییر،تصمیمات متفاوتی بگیریم و دستورات متفاوتی را اجرا کنیم.معمولا زمانی که تعداد حالات (case) زیاد باشد از این ساختار به جای ساختار If...else if...else Statement، استفاده می کنیم.در این ساختار ابتدا محتوای متغییر ارزیابی شده،سپس تک تک حالات (case) از بالا به پایین بررسی می شوند،در صورتیکه یکی از حالات برقرار باشد دستورات آن اجرا می شود تا به کلمه break برسد،زمانی که به کلمه break رسید از ساختار switch خارج می شود.و در صورتیکه هیچ یک از حالات برقرار نباشد،دستورات پیش فرض ( default ) اجرا می شوند.

نحو (Syntax) :

switch(متغییر مورد نظر)
{
case 1:
   دستورات 1
  break;
case 2:
     دستورات 2
  break;
default:
  دستورات پیش فرض
}

نکته : دقت داشته باشید که در صورتیکه کلمه break برای یک case مشخص نشود،اگر شرط برقرار باشد سیستم دستورات را اجرا می کند تا به یک break برسد،مثلا در مثال زیر اگر شرط اول ( case )برقرار باشد دستورات شرط دوم ( case ) نیز اجرا می شود زیرا شرط اول break ندارد.

switch(متغییر مورد نظر)
{
case 1:
   دستورات 1

case 2:
     دستورات 2
  break;
default:
  دستورات پیش فرض
}

مثال : در مثال زیر،ما ابتدا توسط تابع زیر ،عدد مربوط به روز هفته را بدست می آوریم و در یک متغییر قرار می دهیم ،سپس با بررسی عدد بدست آمده که در درون متغییر " day " قرار دارد پیغام مناسبی را نمایش می دهیم :

var day=new Date().getDay();
<!DOCTYPE html>
<html>
<body>

<p>Click the button to display what day it is today.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script type="text/javascript">
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
  {
  case 0:
    x="Today it's Sunday";
    break;
  case 1:
    x="Today it's Monday";
    break;
  case 2:
    x="Today it's Tuesday";
    break;
  case 3:
    x="Today it's Wednesday";
    break;
  case 4:
    x="Today it's Thursday";
    break;
  case 5:
    x="Today it's Friday";
    break;
  case 6:
    x="Today it's Saturday";
    break;
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

مثال : در اینجا مثالی دیگر را بیان می کنیم که دراین مثال،اگر روز شنبه یا یکشنبه باشد هر کدام پیغامی مناسب صادر می کنند و در صورتیکه در هیچ کدام از این دو روز نباشیم،پیغام مربوط به default اجرا می شود :

<html>
<body>

<p>Click the button to display a message based on what day it is today.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script type="text/javascript">
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
  {
  case 6:
    x="Today it's Saturday";
    break;
  case 0:
    x="Today it's Sunday";
    break;
  default:
    x="Looking forward to the Weekend";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>


ساختار شرطی switch : از این ساختار زمانی استفاده می کنیم که بخواهیم بر اساس مقادیر مختلف یک متغییر،تصمیمات متفاوتی بگیریم و دستورات متفاوتی را اجرا کنیم.معمولا زمانی که تعداد حالات (case) زیاد باشد از این ساختار به جای ساختار If...else if...else Statement، استفاده می کنیم.در این ساختار ابتدا محتوای متغییر ارزیابی شده،سپس تک تک حالات (case) از بالا به پایین بررسی می شوند،در صورتیکه یکی از حالات برقرار باشد دستورات آن اجرا می شود تا به کلمه break برسد،زمانی که به کلمه break رسید از ساختار switch خارج می شود.و در صورتیکه هیچ یک از حالات برقرار نباشد،دستورات پیش فرض ( default ) اجرا می شوند.

نحو (Syntax) :

switch(متغییر مورد نظر)
{
case 1:
   دستورات 1
  break;
case 2:
     دستورات 2
  break;
default:
  دستورات پیش فرض
}

نکته : دقت داشته باشید که در صورتیکه کلمه break برای یک case مشخص نشود،اگر شرط برقرار باشد سیستم دستورات را اجرا می کند تا به یک break برسد،مثلا در مثال زیر اگر شرط اول ( case )برقرار باشد دستورات شرط دوم ( case ) نیز اجرا می شود زیرا شرط اول break ندارد.

switch(متغییر مورد نظر)
{
case 1:
   دستورات 1

case 2:
     دستورات 2
  break;
default:
  دستورات پیش فرض
}

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

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display what day it is today.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script type="text/javascript">
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
  {
  case 0:
    x="Today it's Sunday";
    break;
  case 1:
    x="Today it's Monday";
    break;
  case 2:
    x="Today it's Tuesday";
    break;
  case 3:
    x="Today it's Wednesday";
    break;
  case 4:
    x="Today it's Thursday";
    break;
  case 5:
    x="Today it's Friday";
    break;
  case 6:
    x="Today it's Saturday";
    break;
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

استفاده از دستور default : دستورات این بخش از ساختار Switch زمانی اجرا می شوند که هیچ یک از case ها با مقدار متغییر برابر نباشند :

<html>
<body>

<p>Click the button to display a message based on what day it is today.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script type="text/javascript">
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
  {
  case 6:
    x="Today it's Saturday";
    break;
  case 0:
    x="Today it's Sunday";
    break;
  default:
    x="Looking forward to the Weekend";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

جعبه های هشدار در جاوا اسکریپت ( Alert Box ) : از این دستور زمانی استفاده می کنیم که بخواهیم مطمئن شویم،کاربر از موضوعی اطلاع کامل دارد.در واقع توسط جعبه های هشدار سعی داریم تا کاربر را از موضوعی خاص مطلع کنیم :

نحو (Syntax) :

alert("متن مورد نظر");

مثال : در مثال زیر ما تابعی با نام myFunction تعریف کرده ایم ،که این تابع یک جعبه هشدار را به نمایش می گذارد.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction()
{
alert("Hello! I am an alert box!");
}
</script>
</head>
<body>

<input type="button" onclick="myFunction()" value="Show alert box" />

</body>
</html>

جعبه های تایید در جاوا اسکریپت ( Confirm Box ) : از این دستور زمانی استفاده می کنیم که بخواهیم کاربر عملی را تایید یا در واقع قبول کند،در صورتی که کاربر بر روی دکمه ی ( OK ) کلیک کند،این دستور مقدار ( true ) را باز می گرداند و در صورتی که کاربر بر روی دکمه ی ( Cancel ) کلیک کند،این دستور مقدار ( false ) را باز می گرداند.

نحو (Syntax) :

confirm("متن مورد نظر");

مثال : در اینجا ما با یک مثال متوجه می شویم که نحوه عملکرد این دستور به چه شکلی است.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display a confirm box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script type="text/javascript">
function myFunction()
{
var x;
var r=confirm("Press a button!");
if (r==true)
  {
  x="You pressed OK!";
  }
else
  {
  x="You pressed Cancel!";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

جعبه های اعلان در جاوا اسکریپت ( Prompt Box ) : از این دستور زمانی استفاده می کنیم که بخواهیم از کاربر مقداری را به عنوان ورودی دریافت کنیم.در صورتی که کاربر بر روی دکمه ی ( OK ) کلیک کند،این دستور مقدار وارد شده توسط کاربر را باز می گرداند و در صورتی که کاربر بر روی دکمه ی ( Cancel ) کلیک کند،این دستور مقدار ( null) یا تهی را باز می گرداند.

نحو (Syntax) :

prompt("مقدار پیش فرض","متن مورد نظر");

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

مثال :

<!DOCTYPE html>
<html>
<body>

<p>Click the button to demonstrate the prompt box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script type="text/javascript">
function myFunction()
{
var x;

var name=prompt("Please enter your name","Harry Potter");

if (name!=null)
  {
  x="Hello " + name + "! How are you today?";
  document.getElementById("demo").innerHTML=x;
  }
}
</script>

نحوه پرش به خط بعد در جاوا اسکریپت ( Line Breaks ) : برای این منظور ما از کاراکتر کنترلی ( n\ ) استفاده می کنیم.

مثال :در اینجا ما متن درون جعبه هشدار را در دو خط به نمایش می گذاریم :

<!DOCTYPE html>
<html>
<body>

<p>Click the button to demonstrate line-breaks in a popup box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script type="text/javascript">
function myFunction()
{
alert("Hello\nHow are you?");
}
</script>

</body>
</html>


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

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

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

نحو (Syntax) :

for (گام پرش + متغییر شمارنده = متغییر شمارنده ; حد بالای < متغییر شمارنده ; حد پایین = متغییر شمارنده )
  {
  دستوراتی که باید تکرار شوند
  }

مثال :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>For Loop Example</title>
</head>
<body>
<script type="text/javascript">
var myArray = ["karaj","tehran","alborz"];
var arrayLength = myArray.length;
for (var count = 0; count < arrayLength; count++ ) {
alert(myArray[count]);
}
</script>
</body>
</html>

توضیح : در مثال بالا ایتدا در خط 9 نهم یک آرایه رشته ای حاوی 3 رشته تعریف می کنیم { یک آرایه شامل متغییر هایی می باشد که با نامی واحد تعریف می شوند و با استفاده از اندیس ها متمایز می شوند.اندیس آرایه ها از عدد صفر شروع می شود }

سپس در خط دهم توسط دستور length طول آرایه را بدست می آوریم تا آن را به عنوان حد بالای حلقه به کار ببریم.

یعنی در مثال بالا حد پایین برابر صفر 0 می باشد و حد بالای آن برابر سه 3 می باشد.در ابتدای حلقه شرط حلقه بررسی می گردد { آیا 3>0 می باشد }، از آنجا که شرط برقرار است دستورات داخل حلقه اجرا می شود یعنی توسط دستور alert مقدار اولین عنصر آرایه که با اندیس صفر 0 مشخص شده است نمایش داده می شود.سپس توسط گام پرش ++count یک واحد به شمارنده حلقه اضافه می شود، سپس مجدد شرط حلقه بررسی می شود { آیا 3>1 می باشد } ، از آنجا که شرط برقرار است دستورات داخل حلقه اجرا می شود یعنی توسط دستور alert مقدار دومین عنصر آرایه که با اندیس یک 1 مشخص شده است نمایش داده می شود.مجددا توسط گام پرش ++count یک واحد به شمارنده حلقه اضافه می شود، سپس مجدد شرط حلقه بررسی می شود { آیا 3>2 می باشد }، ، از آنجا که شرط برقرار است دستورات داخل حلقه اجرا می شود یعنی توسط دستور alert مقدار دومین عنصر آرایه که با اندیس دو 2 مشخص شده است نمایش داده می شود.در نهایت توسط گام پرش ++count یک واحد دیگر به شمارنده حلقه اضافه می شود، با بررسی حلقه ب{ آیا 3>3 می باشد }،متوجه می شویم که شرط برقرار نیست لذا دستورات داخل حلقه اجرا نمی شود و از حلقه خارج می شویم.

مثالی دیگر :

<!DOCTYPE html>
<html>
<body>

<p>Click the button to loop through a block of code five times.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i;
for (i=0;i<5;i++)
  {
  x=x + "The number is " + i + "<br />";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

توضیح : در مثال بالا ابتدا در خط هفتم 7،یک پاراگراف تعریف می کنیم

 <p id="demo"></p> 

سپس در خط دهم 10 با استفاده از دستور

function myFunction()

یک تابع با نام myFunction تعریف می کنیم.

سپس توسط حلقه ی FOR دستور خود را به تعداد 5 مرتبه تکرار می کند.سپس محتوای متغییر X که متغییری رشته ای است توسط دستور

document.getElementById("demo").innerHTML=x;

چاپ می شود.

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

نحو (Syntax) :

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

مثال :

<!DOCTYPE html>
<html>
<body>

<p>Click the button to loop through a block of as long as <em>i</em> is less than 5.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
while (i<5)
  {
  x=x + "The number is " + i + "<br />";
  i++;
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

توضیح : در اینجا ما مثال مربوط به FOR را با استفاده از WHILE پیاده سازی کرده ایم.

حلقه ی do...while : این حلقه دقیقا مشابه WHILE می باشد با این تفاوت که دستورات آن حداقل یک بار اجرا می شوند و آن هم به این دلیل است که شرط مربوط به این حلقه در انتهای حلقه بررسی می شود .

نحو (Syntax) :

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

مثال :

<!DOCTYPE html>
<html>
<body>

<p>Click the button to loop through a block of as long as <em>i</em> is less than 5.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
do
  {
  x=x + "The number is " + i + "<br />";
  i++;
  }
while (i<5)  
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

نویسنده : شهاب نوری گودرزی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع دارای اشکال اخلاقی می باشد

#برنامه_نویسی__کلاینت #آموزش_طراحی_وب #آموزش_جاوا_اسکریپت #طراحی_وب
3 نظر
محمد نصیری

با تشکر از مقاله های خوبت شهاب جان ، در این مقاله یه نکته ای به نظرم اومد که خواستم بپرسم ، گفتی که شرط if بایستی با حروف کوچک نوشته بشه و اگر بزرگ نوشته بشه خطا صادر میشه ، ما به این حالت به اصطلاح میگیم Case Sensitive یعنی به حروف بزرگ و کوچک تفاوت قائل میشیم ، خوب اینطوری که برداشت شد ، آیا زبان برنامه نویسی یا بهتر بگیم اسکریپت نویسی جاوا یک زبان Case Sensitive هست ؟ متشکرم

شهاب نوری گودرزی

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

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

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