در این بخش از آموزش جاوا اسرکیپت به ساختاری های دستوری java script و نحوه ی استفاده از آنها می پردازیم. سعی کرده ایم به صورت جامع همراه با مثال آموزش ها را جهت استفاده ی شما عزیزان قرار دهیم.
ساختارهای شرطی در جاوا اسکريپت
در این قسمت از مقالات طراحی سایت در زمینه آموزش جاوا اسکریپت به توضیح ساختارهای شرطی در جاوا اسکریپت می پردازیم . از ساختارهای شرطی در جاوا اسکریپت زمانی استفاده می شود که بخواهيم در صورت بر قرار بودن شرط يا شرط هايي ، يکسری دستورات خاص اجرا شده و در صورت عدم بر قراری آنها گروه ديگری از دستورات اجرا شوند .
بر حسب شرايط می توان از يکی از ساختارهای دستوری زير استفاده کرد :
توجه : * Condition = شرط يا شروط * Statment = دستور يا دستورات
1 ) if ( Condition ) Statment :
از اين ساختار در مواقعی که می خواهيم در صورت بر قرار بودن شرط يا شرط هايي يکسری دستورات خاص اجرا شوند ، استفاده می شود . در اين حالت در صورت عدم بر قراری شرط هاي تعيين شده ، هيچ دستوری اجرا نخواهد شد .
شکل کلی استفاده از اين ساختار به صورت زير است :
if ( شرط يا شروط )
{
دستورات مورد نظر که در صورت برقرار بودن شرط ها اجرا می شوند
}
مثال : در مثال زير متغير عددی IntNum يکبار با عددی بيش از 10 و يکبار با عددی کوچکتر از 10 مقدار دهی شده است . شرط دستور if اين است ، که در هنگام بزرگتر بودن IntNum از عدد 10 پيغام "This Number is bigger than 10" و در هنگام کوچکتر بودن آن از عدد 10 ، هيچ خروجی چاپ نشود . به مثال دقت کنيد :
در حالت اول به دليل بزرگتر بودن عدد IntNum از 10 ، پيغام خروجی بر روی صفحه چاپ مقاله می شود .
< script type="text/javascript" >
var IntNum = 18
if ( IntNum > 10 )
{
document.write (" This Number is bigger than 10 ")
}
< /script >
خروجی : This Number is bigger than 10
در حالت دوم به دليل کوچکتر بودن عدد IntNum از 10 ، هيچ پيغام خروجی بر روی صفحه چاپ نمی شود .
< script type="text/javascript" >
var IntNum = 8
if ( IntNum > 10 )
{
document.write (" This Number is bigger than 10 ")
}
< /script >
2 ) if ( Condition ) Statment 1 else Statment 2 :
از اين ساختار در مواقعی در طراحی سایت استفاده می کنيم که می خواهيم در صورت بر قرار بودن شرط يا شرط هايي ، يکسری دستورات و در صورت عدم بر قراری آن شروط ، گروهي ديگر از دستورات اجرا شوند .
شکل کلی استفاده از اين ساختار به صورت زير است :
if ( شرط يا شروط )
{
دستوراتی که در صورت بر قرار بودن شرط يا شروط اجرا می شوند
}
else
{
دستوراتی که در صورت عدم بر قراری شرط يا شروط اجرا می شوند
}
مثال : در مثال زير متغير عددی IntNum يکبار با عددی بيش از 10 و يکبار با عددی کوچکتر از 10 مقدار دهی شده است . شرط دستور if اين است ، که در هنگام بزرگتر بودن IntNum از عدد 10 پيغام "This Number is bigger than 10" و در هنگام کوچکتر بودن آن از عدد 10 ، پيغام "This Number is smaller than 10" چاپ شود . به مثال دقت کنيد :
در حالت اول به دليل بزرگتر بودن عدد IntNum از 10 ، پيغام خروجی قسمت if بر روی صفحه چاپ می شود .
< script type="text/javascript" >
var IntNum = 18
if ( IntNum > 10 )
{
document.write (" This Number is bigger than 10 ")
}
else
{
document.write ("This Number is smaller than 10")
}
< /script >
خروجی : This Number is bigger than 10
در حالت دوم به دليل کوچکتر بودن عدد IntNum از 10 ، پيغام قسمت else بر روی صفحه چاپ می شود .
< script type="text/javascript" >
var IntNum = 8
if ( IntNum > 10 )
{
document.write (" This Number is bigger than 10 ")
}
else
{
document.write ("This Number is smaller than 10")
}
< /script >
خزروجی : This Number is smaller than 10
دستور if تک شرطی را مانند يک عملگر می توان به صورت زير نيز نوشت .
در اين حالت برنامه شرط معرفی شده در پرانتز را چک کرده و در صورت درست بودن آن شرط ، مقدار 1 و در صورت درست نبودن آن مقدار 2 را به متغير نسبت می دهد .
شکل کلی استفاده از اين ساختار به سورت زير است :
نام متغير = ( شرط ) ؟ مقدار 1 : مقدار 2
variable name = ( condition ) ? value 1 : value 2 ;
کد : var name = ( x > 10 ) ? sam :david
توضیح :در مثال بالا اگر مقدار متغير x از 10 بيشتر باشد ، مقدار متغير name برابر sam و در صورت کوچکتر بودن مقدار x از 10 ، name برابر david می شود .
3 ) if ( Condition 1 ) Statment 1 else if ( Condition 2 ) Statment 2 else Statment 3 :
از اين ساختار زمانی استفاده می شود که حالت های شروط مورد نظر بيش از يک حالت مختلف است ، که در صورت بر قرار بودن هر گروه از شرط های مورد نظر ، می خواهيم دستورات خاص آن شرط ها اجرا شوند .
در اين ساختار ، شرط اول در دستور if ابتدا تعريف شده و هر يک از گروه شرط های ديگر به وسيله يک دستور else if تعيين می شود . در آخر نيز واژه کليدی else و دستورات مربوط با آن قرار می گيرد ، که در صورت عدم بر قراری تمام گروه شرط هاي تعيين شده ، دستورات قسمت else اجرا می شوند .
در اين ساختار چنانچه هر يک از شرط های يک دستور if يا else if درست باشند ، دستورات مربوط به آن اجرا شده و برنامه از کنترل و اجرای ساير شرط های ديگر خودداری می کند . چنانچه هيچ يک از گروه شرط های تعيين شده درست نباشند ، دستورات بخش else در پايان ساختار اجرا می شوند .
شکل کلی استفاده از اين ساختار به صورت زير است :
if ( گروه شرط های شماره 1 )
{
دستوراتی که در صورت بر قرار بودن گروه شرط های 1 اجرا می شوند
}
else if ( گروه شرط های شماره 2 )
{
دستوراتی که در صورت بر قرار بودن گروه شرط های 2 اجرا می شوند
}
else if ( گروه شرط های شماره 3 )
{
دستوراتی که در صورت بر قرار بودن گروه شرط های 3 اجرا می شوند
}
.
.
.
else
{
دستوراتی که در صورت عدم بر قراری تمام گروه شرط های فوق اجرا می شوند
}
نکته 1 : به تعداد مورد نياز می توان در اين ساختار به وسيله دستور else if شرط و دستورات جديد تعريف کرد .
نکته 2 :استفاده از کروشه در قسمت دستورات شرط if ، فقط در زمانی که دستورات مورد نظر بيش از يک خط هستند ، ضروری است .
نکته 3 : تعيين قسمت else در ساختار فوق اختياری بوده و می تواند تعريف نشود .
نکته 4 : در زمانی که تعداد حالت های شروط بسيار زياد هستند ، بهتر است از ساختار Switch استفاده کرد .
مثال : در مثال زير يک کادر متن و يک دکمه فرمان قرار داده شده است . کادر متن ورودی را از کاربر دريافت کرده و. با کليک بر روی دکمه فرمان ، خروجی را در کادر آبی رنگ می بينيم .
شکل عملکرد اين مثال به صورت زير است :
رويداد کليک دکمه فرمان تابع ( ) ifclause را که در قسمت < head > در طراحی سایت قرار دارد ، را فراخوانی می کند . در اين تابع يک دستور if سه شرطی قرار داده شده است ، که مقدار متغير matn را ارزيابی کرده و در صورتی که مقدار آن برابر 1 باشد ، عبارت one ، در صورت 2 بودن عبارت two ، در صورت 3 بودن عبارت three و در صورتی که مقدار آن به غير از يکی از موارد فوق باشد ، عبارت bigger than 3 را نمايش می دهد .
نکات مهم : نکات زير در مثال با شماره مشخص شده اند .
خاصيت value در يک کادر متن به متن موجود در آن کنترل اشاره می کند . در اينجا ما متن موجود در کنترل txtinput را در متغير matn ذخيره کرده ايم .
رويداد onclick رويدادی است که در هنگام کليک بر روی يک کنترل فعال می شود . برای فراخوانی يک تابع توسط يک کنترل ، نام آن تابع را در رويداد onclick کنترل در سورس طراحی سایت قرار می دهيم .
< html >
< head >
< title > عنوان صفحه < /title >
< script type="text/javascript" >
function ifclause ( ) ابتدای تعريف تابع
{
var matn ; تعريف متغير
1 var matn = txtinput.value ; قرار دادن متن کادر متن در متغير
if (matn == '1'
document.write ("one")
else if ( matn =='2')
document.write ( "two" )
else if ( matn == '3' )
document.write ( "three" )
else
document.write ( "Bigger than three" )
}
< /script >
< /head >
< body >
< input type="text" id="txtinput" / > تعريف کادر متن
2< input type="button" id="btnclick" onclick="ifclause( )" value="click me" / > تعريف دکمه فرمان
< /body >
< /html >
ساختار کنترلی switch در جاوا اسکريپت
در این قسمت از آموزش جاوا اسکریپت به توضیح ساختار کنترلی switch در جاوا اسکریپت می پردازیم . از اين ساختار در زمانی استفاده می شود که بخواهيم بر حسب مقادير مختلف يک متغير يا عبارت خاص ، دستورات متفاوتی اجرا شود .
شکل کلی استفاده از اين ساختار در طراحی سایت به صورت زير است :
switch ( نام يک متغير يا يک عبارت )
{
case مقدار 1 :
case 1 دستورات مربوط به
case مقدار 2 :
case 2 دستورات مربوط به
.
.
.
.
case n مقدار :
case n دستورات مربوط به
default :
دستورات پيش فرض ساختار که در صورت عدم برقراری مقادير تمام case های فوق ، اجرا خواهند شد
}
از جوا اسکریپت در طراحی سایت بسیار استفاده می شود. نحوه عملکرد اين ساختار در جاوااسکریپت به شرح زير است :
ابتدا در پرانتز مقابل واژه کليدی switch ، يک متغير يا عبارت اعلام می شود . همچنين در هر دستور case ، يک مقدار مرتبط با آن متغير نيز تعيين می شود . برنامه مقدار متغير را ( که از قبل توسط يک تابع يا دستور مقدار دهی شده است ) را با مقدار تعيين شده برای هر case به ترتيب مقايسه کرده و در صورت برابر بودن آنها ، دستورات آن case و case های بعد از آن را اجرا می کند . در واقع دستورات تا زمان رسيدن به يک دستور break اجرا می شوند .
نکته : برای جلوگيری از اجرای case های بعدی همراه با case ای که اجرا می شود ، بايد در پايان دستورات هر case از واژه کليدی break استفاده کرد . برای دريافت توضيحات بيشتر ، به قسمت توضيح دستور break در پايين صفحه برويد .
قسمت default ، دستورات پيش فرض ساختار را تعيين می کند ، که در صورت عدم برقراری مقادير تمام case های ساختار ، دستورات آن قسمت اجرا خواهد شد .
نکات مهم :
√ نوع متغير تعيين شده در قسمت switch و مقدارهای هر يک از case ها بايد با هم يکسان و از يک نوع باشند .
√ به تعداد مورد نياز می توان از دستور case در ساختار switch استفاده کرد .
√ تعيين قسمت default در ساختار switch ، اختياری است و می تواند تعيين نشود .
√ مقدار هيچ دو case متفاوتی ، نبايد با هم يکسان باشد .
مثال : در مثال زير دو کادر متن و يک دکمه فرمان قرار داده شده است . کادر متن اول يک متن يا عدد از کاربر دريافت کرده و با کليک بر روی دکمه فرمان و فراخوانی تابع ( ) hello ، خروجی در کادر متن دوم نمايش داده می شود .
عملکرد تابع ( ) hello به شرح زير است :
اين تابع مقدار کنترل کادر متن اول يعنی txtinput ، را در متغير matn ذخيره کرده و سپس در يک ساختار switch ،بر حسب مقادير مختلف خروجی را در کادر متن دوم يعنی txtresult نمايش می دهد .
توجه : در اينجا به دليل عدم استفاده از دستور break در پايان دستورات هر case با اجرای هر کدام از case های مثال ، دستورات بقيه case ها نيز اجرا می شود . بنابراين همواره خروجی ما در اين حالت خروجی قسمت default است .
< input type="text" id="txtinput " / >
< input type="button" name="clickme" onclick="hello( )" value="click me !" / >
< input type="text" id="txtresult" / >
< script type="text/javascript" >
function hello( )
{
var matn = txtinput.value ;
switch (matn)
{
case "1":
txtresult.value = "one" ;
case "2":
txtresult.value = "two";
case "3":
txtresult.value = "three";
default:
txtresult.value = "bigger than 3";
}
}
< /script >
دستور break در جاوا اسکريپت
در این قسمت از آموزش جاوا اسکریپت و کاربرد آن در طراحی سایت به بیان دستور break در جاوا اسکریپت می پردازیم . از دستور break در جاوا اسکریپت برای خروج کامل از ادامه اجرای دستورات يک حلقه در صورت بر قرار بودن شرط تعيين شده برای آن استفاده می شود .
دستور break را بايد در بدنه دستورات يک حلقه تعريف کرد . در هر بار اجرای حلقه ، برنامه با رسيدن به شرط دستور break ، آنرا چک کرده و در صورت برقراری شرط از ادامه اجرای دستورات حلقه به طور کامل جلوگيری کرده و به طور کامل از حلقه خارج می شود .
شکل کلی تعريف يک دستور break به صورت زير است :
نکته : عملکرد و استفاده از دستور break در تمام حلقه ها يکسان است . در مثال زير فرض می کنيم ، حلقه ما while است :
while ( شرط حلقه )
{
دستورات حلقه
if ( شرط حلقه ) break ;
ادامه دستورات حلقه
}
مثال : مثال چاپ شماره خطوط را که در حلقه های قبل به کار برده بوديم را در اين قسمت ، با دستور break باز نويسی کرده ايم . در اين حلقه شرط دستور break ، برابر شدن متغير شمارنده حلقه يعنی n با مقدار 3 است ، که در هنگامی که n برابر 3 می شود ، برنامه از اجرای ادامه دستورات حلقه جلوگيری کرده و از حلقه خارج می شود . بنابرين شماره خطوط تا شماره 3 چاپ شده و 4 و 5 چاپ نمی شود :
نکته : توجه شود که دستورات قبل از دستور 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 >
Line number is 1
Line number is 2
Line number is 3
توابع در جاوا اسکريپت
در این قسمت از آموزش جاوا اسکریپت به توضیح توابع در جاوا اسکریپت می پردازیم . يک تابع مجموعه ای واحد از يکسری دستورالعمل است که در هر بار فراخوانی ، کل دستورات درون آن يکبار اجرا می شود .
می دانيم که هر برنامه کامپيوتری ، شامل مجموعه ای از دستورالعمل هاست . از توابع برای شکستن و تقسيم کردن کل برنامه به واحدهای کوچکتر و مستقل استفاده می شود . توابع در جاوا اسکریت به برنامه نویس در طراحی سایت قابلیت هایی را می دهد که شامل :
√ دستورات يک تابع ( حتی در زمانی که اسکريپت آن در درون صفحه قرار دارد ) ، تا زمانی که فراخوانی نشود ، اجرا نخواهد شد . از توابع برای تعريف دستور العمل هايي استفاده می شود که می خواهيم اجرای آنها کنترل شده باشد و در مواقع معينی ( مثل وقوع يک رويداد يا ... ) انجام شود .
√ يک تابع را می توان از هر نقطه ای در صفحه فراخوانی کرد .
√ يک تابع می توان يکسری متغيرها را به عنوان پارامتر ورودی دريافت کرده و همچنين يک مقدار را به عنوان خروجی به نقطه ای که از آن فراخوانی شده سات ، باز گردهند .
توابع را می توان در هر جای تگ های اسکريپت < script > ، تعريف کرد . اسکريپت هايي که در درون قسمت < body > تعريف می شوند ، به محض لود شدن صفحه اجرا خواهند شد . اما چنانچه اين اسکريپت ها شامل توابع باشند ، دستورات آن توابع تا زمان فراخوانی تابع اجرا نخواهند شد .
برای تعريف يک تابع از واژه کليدی function به شکل کلی زير استفاده می شود :
function نام تابع ( )
{
دستورات تابع
}
مثال :در مثال زير يک تابع به نام welcome ، تعريف شده است . اين تابع تا زمانی که فراخوانی نشود اجرا نشده و خروجی ندارد .
< script type="text/javascript" >
function welcome( )
{
document.write ( "welcome to DeveloperStudio" )
}
< /script >
يک تابع را به شرطی که قبل از آن به طور کامل تعريف شده باشد ، می توان از هر جای صفحه فراخوانی کرد . برای فراخوانی يک تابع ، از نام تابع به همراه يک پرانتز باز و بسته در مقابل نام آن به صورت زير عمل می شود :
نام تابع ( ) ;
مثال :در مثال زير تابع welcome را که در مثال قبل نيز استفاده کرده بوديم را توسط يک اسکريپت ديگر فراخوانی کرده ايم .
< html >
< head >
< title > عنوان صفحه < /title >
< /head >
< body >
< script type="text/javascript" >
function welcome( )
{
document.write ( "welcome to DeveloperStudio" )
}
< /script >
< script type="text/javascript" >
welcome ( ) ;
</script>
< /body >
< /html >
نکته : يک تابع را می توان توسط رويدادهای يک کنترل HTML مثل يک دکمه فرمان نيز فراخوانی کرد . در اين حالت بايد مقدار رويداد مورد نظر را در تگ کنترل ، برابر نام تابع در نظر گرفت . به مثال زير دقت کنيد .
مثال : در مثال زير تابع welcome که در مثال قبل توسط يک اسکريپت ديگر فراخوانی شده بود ، در اينجا توسط رويداد کليک ( onclick ) دکمه فرمان btnclick فراخوانی می شود . برای فراخوانی تابع بر روی دکمه فرمان مثال کليک کنيد .
< html >
< head >
< title > عنوان صفحه < /title >
< /head >
< body >
< script type="text/javascript" >
function welcome( )
{
document.write ( "welcome to DeveloperStudio" )
}
< /script >
< input type="button" id="Button1" onclick="welcome( )" value=" click me ! " / >
< /body >
< /html >
پارامتر ، يک متغير است که می توان در هنگام فراخوانی يک تابع ، مقدار آن را به تابع ارجاع داد . به پارامتر ، آرگومان نيز می گويند .
يک تابع می تواند ، چندين متغير را به عنوان پارامتر ورودی دريتفت کند . پارامترهای يک تابع را بايد در هنگام تعريف تابع ، در پرانتز مقابل نام آن تعيين کرد ، که پارامترها را با کاما از هم جدا می کنيم .
در هنگام فراخوانی يک تابع که دارای پارامتر است ، بايد در پرانتز مقابل نام آن ، مقادير متناظر با پارامترهايش را اعلام کرد . اين پارامترها بايد از لحاظ تعداد و نوع کاملا يکسان با پارامترهای تعريف شده در تابع باشند .
شکل کلی تعريف پارامتر برای يک تابع بع صورت زير است :
funciton نام تابع ( Parametr 1 , Parametr 2 , ... )
{
دستورات تابع
}
مثال : function multiple ( var num1 , var num2 )
{
دستورات تابع
}
در هنگام فراخوانی يک تابع نيز بايد به شکل زير پارامترهای آن را مقدار دهی کرد . توجه شود که نوع و تعداد متغيرها بايد کاملا يکسان با پارامترهای تعريف شده برای تابع باشد ، در غير اين صورت error رخ داده و تابع اجرا نمی شود .
function نام تابع g ( Parametr 1 مقدار , Parametr 2 مقدار , ... )
{
دستورات تابع
}
مثال : در مثال زير تابع multiple را که در بالا تعريف کرده بوديم با تعيين پارامترهای لازم ، فراخوانی کرده ايم :
multiple ( 2 , 10 ) ;
نکته مهم : پارامتر های يک تابع ، به عنوان متغيرهای محلی برای آن تابع قابل استفاده هستند .
مثال : در مثال زير تابع multiple با دو پارامتر num1 و num2 تعريف شده است ، که اين تابع اين دو عدد را در هم ضرب کرده و به عنوان خروجی روی صفحه نمايش می دهد . اين تابع در يک اسکريپت ديگر توسط تابع Call_Function فراخوانی می شود . اين تابع دو عدد را از دو کادر متن مثال دريافت کرده و به ترتيب آنها را در متغيرهای a , b ذخيره می کند . سپس آن را در هنگام فراخوانی به تابع multiple پاس می دهد . توجه شود که از متغير های ديگر نيز می توان برای فراخوانی استفاده کرد . برای مشاهده خروجی 2 عدد را در کادر متن ها وارد کرده و بر روی دکمه فرمان multiple کليکگ کنيد .
< script type="text/javascript" >
function multiple ( num1 , num2 )
{
document.write ( num1 * num2 ) ;
}
< /script >
< script type="text/javascript" >
function Call_Function ( )
{
var a = Text1.value ;
var b = Text2.value ;
multiple ( a , b ) ; فراخوانی تابع با پارامترهای لازم و چاپ خروجی
}
< /script >
< input type="button" id="Button2" onclick="Call_Function( )" value=" click me ! " />
< input type="text" id="Text1" />
< input type="text" id="Text2" />
يک تابع می تواند پس از انجام دستورات در نظر گرفته شده برای آن ، مقداری را به عنوان خروجی به نقطه ای که از آن فراخوانی شده است ، باز گرداند .
برای تعيين مقدار بازگشتی يک تابع از دستور return استفاده کرده ، که مقدار خروجی را درپرانتز مقابل آن دستور به شکل زير تعريف می کنيم .
return ( مقدار بازگشتی ) ;
نکته : مقدار بازگشتی ، می تواند يک رشتته يا عدد ، يک متغير و يا يک عبارت محاسباتی باشد .
مثال : تابع multiple را در مثال قبل با دستور return بازنويسی کرده ايم . در اين حالت تابع به جای استفاده از دستور document.write با دستور return ، مقدار را برای چاپ خروجی به تابع Call_Function بر می گرداند :
< script type="text/javascript" >
function multiple ( num1 , num2 )
{
return ( num1 * num2 ) ;
}
< /script >
< script type="text/javascript" >
function Call_Function ( )
{
var a = Text1.value ;
var b = Text2.value ;
document.write (multiple ( a , b )) ; فراخوانی تابع با پارامترهای لازم
}
< /script >
< input type="button" id="Button2" onclick="Call_Function( )" value=" click me ! " />
< input type="text" id="Text1" />
< input type="text" id="Text2" />
منوهای Pop-Up در جاوا اسکريپت
در این قسمت از مقالات طراحی سایت به معرفی منوهای Pop-Up در جاوا اسکریپت می پردازیم . توسط کادر های Pop-Up در جاوا اسکريپت ، می توان به کاربر پيغام اخطار داد ، از آن تاييد گرفت و يا ورودی دريافت کرد . اين کادر ها در مواقع مورد نظر ظاهر شده و عمليات تعيين شده برای آنها انجام خواهند داد .
به طور کلی 3 نوع کادر Pop-Up در جاوا اسکريپت داريم :
√ کادر پيام يا هشدار ( alert Box )
√ کادر دريافت تاييد (confirm Box )
√ کادر دريافت ورودی ( prompt Box )
از کادر alert Box ، برای اعلام يک پيام يا هشدار به کاربر استفاده می شود . اين پيام که از قبل بايد تعيين شده باشد ،در يک کادر ظاهر شده و تا زمانی که کاربر دکمه Ok را انتخاب نکند ، از بين نمی رود .
شکل کلی تعريف يک کادر منتی به صورت زير است :
alert ( " متن پيام يا هشدار " ) ;
مثال : در مثال زير يک کادر alert Box در تابع Alert_Box تعريف شده است . اين تابع توسط دکمه فرمان ! Alert ، فراخوانی شده و کادر پيام خود را ظاهر می کند .
< script type="text/javascript" >
function Alert_Box ( )
{
alert ( " Welcome To DeveloperStudio " ) ;
}
</script>
<input type="button" id="btnAlert" value=" Alert ! " onclick="Alert_Box( )" />
در مثال زير يک کادر متن و يک دکمه فرمان قرار داده شده است . کاربر بايد يک عدد را در کادر متن وارد کرده و بر روی دکمه فرمان کليک کند . چنانچه عدد ورودی از 10 کمتر باشد ، برنامه عبارت Welcome to DeveloperStdio را در خروجی چاپ کرده و در غير اين صورت يک کادر پيام با متن Number too big را به کاربر نشان می کند .
< script type="text/javascript" >
function Alert_Box2 ( )
{
var Num = txtNum.value ;
if ( Num < 10 )
document.write ( "Welcome to DeveloperStudio " ) ;
else
alert ( " Number too big " ) ;
}
< /script >
< input type="text" id="txtNum" / >
< input type="button" id="btnAlert2" value=" Alert ! " onclick="Alert_Box2()" />
نکته : می توان در متن پيام کادرهای جاوا اسکريپت ، به تعداد مورد نياز خط جديد ايجاد کرد . برای اين منظور ، در متن پيام از کاراکتر ' \n ' به شرحی که در مثال زير آمده است ، استفاده می شود :
< script type="text/javascript" >
function Alert_Box3 ( )
{
alert ( "Hello . Dear User " + '\n' + "Welcome to DeveloperStudio ") ;
}
< /script >
< input type="button" id="btnAlert3" value=" Alert ! with Line Brakes " onclick="Alert_Box3()" />
از کادر دريافت تاييد ، برای اعلام يک پيام به کاربر و دريافت نظر آن مبنی بر قبول يا عدم قبول پيام مورد نظر استفاده می شود .
اين کادر دارای 2 دکمه فرمان OK و Cancel است ، که در صورت انتخاب گزينه OK ، کادر مقدار مثبت ( True ) و در صورت انتخاب گزينه Cancel ، کادر مقدار منفی ( False ) را به صفحه بر می گرداند .
شکل کلی تعريف يک کادر تاييد به صورت زير است :
confirm( " متن پيام " ) ;
نکته مهم : از مقدار برگشتی يک کادر تاييد می توان در برنامه نويسی استفاده کرد . برای اين منظور بايد مقدار بازگشتی را در يک متغير به شکل زير ذخيره کرده و سپس از آن متغير استفاده کرد . به مثال دقت کنيد :
نام متغير = confirm ( "متن پيام" ) ;
مثال : در مثال زير يک تابع با يک کادر تاييد ، قرار داده شده است . اين تابع با دکمه فرمان btnChange ، فراخوانی می شود و کادر تاييد خود را نشان می دهد . کادر از کاربر درباره رفتن به صفحه اصلی سايت می پرسد ، که در صورت تاييد و فشردن دکمه OK مروگر به صفحه اصلی رفته و در صورت زدن دکمه Cancel يک پيام در خروجی چاپ می کند :
< script type="text/javascript" >
function Change_Page( )
{
var x = confirm ( "Do you want go to home page ? " ) ;
if ( x == true )
document.URL = "../Default.aspx" ;
else
document.write ( " You pressed Cancel ! " ) ;
}
< /script >
< input type="button" id="btnChange" value=" go to Home Page ? " onclick="Change_Page( )" />
از کادر دريافت ورودی ، برای اعلام يک پيام به کاربر و دريافت يک ورودی از وی استفاده می شود . در اين حالت يک کادر حاوی پيام مورد نظر ، يک کنترل متنی برای ورود مقدار ، دکمه OK برای تاييد و ارسال مقدار ورودی به صفحه و دکمه Cancel برای لغو عمليات کادر ، بر روی صفحه نمايش داده می شود .
همچنين می توان يک مقدار پيش فرض نيز در کادر تعيين کرد ، که هموراه به صورت پيش فرض در کنترل متنی کادر نمايش داده خواهد شد . تعيين مقدار پيش فرض اختياری است .
شکل کلی تعريف يک کادر دريافت ورودی سه صورت زير است :
prompt ( " مقدار پيش فرض " , " متن پيام کادر" ) ;
مثال : در مثال زير يک کادر دريافت ورودی ، برای دريافت نام کاربر در تابع Hello_User تعريف شده است . اين تابع با کليک بر روی دکمه فرمان Enter Name فراخوانی شده و سپس با دريافت نام کاربر يک پيام خوش آمد به کاربر در خروجی اعلام می کند . برای مشاهده خروجی بروی دکمه فرمان Enter Name کليک کرده و سپس نام خود را در کادر وارد کنيد :
< script type="text/javascript" >
function Hello_User( )
{
var name = prompt ( "enter your name") ;
if ( name != null )
document.write ( "hello dear " + name + " " + "Welcome to DeveloperStudio" ) ;
}
< /script >
< input type="button" id="btnHello" onclick="Hello_User()" value="Enter Name" />
مثال : در مثاب زير يک کادر دريافت تاييد در تابع Change_page تعريف شده است . اين کادر يک ورودی ، که نام يکی از بخش های آموزشی سايت DeveloperStudio است ، را از کاربر دريافت کرده و سپس آدرس مرورگر را به آدرس مربوط با آن نام تغيير می دهد . در اين کادر مقدار پيش فرض Home Page در نظر گرفته شده است . برای مشاهده خروجی بروی دکمه فرمان کليک کرده و سپس نام مقصد را انتخاب کنيد . در صورت وارد کردن اسم نادرست ، يک کادر هشدار ظاهر خواهد شد :
< script type="text/javascript" >
function Change_Page( )
{
var page = prompt ( "Where do you want to go ? " , "Home Page" ) ;
switch ( page )
{
case "Home Page" :
document.URL = "../Default.aspx" ;
break ;
case "Html" :
document.URL = "../HTML/introducehtml.aspx" ;
break ;
case "CSS" :
document.URL = "../CSS/CSSIntroduce.aspx" ;
break ;
case "Java Script" :
document.URL = "../JavaScript/Java_Script_Introduce.aspx" ;
break ;
case "SQL" :
document.URL = "../SQL/SQLIntroduce.aspx" ;
break ;
default :
alert ( "Incorrect Name" ) ;
}
}
< /script>
<input type="button" id="Button2" onclick="Change_Page()" value="Enter Page" />
آرايه در جاوا اسکريپت
در این قسمت از آموزش جاوا اسکریپت در مقالات شرکت طراحی سایت مبنا به تعریف آرایه در جاوا اسکریپت می پردازیم . آرایه به معنی مجموعه ای از متغیرهایی از یک نوع داده ای با نام یکسان می باشد که هر کدام از اعضای آن توسط یک شمارنده (اندیس) از یکدیگر متمایز می شوند . شمارنده هر عضو آرايه در يک براکت در مقابل نام آن تعيين شده ، که برای مقدار دهی و دسترسی به هر عضو آرايه از انديس آن استفاده می شود .
برای تعريف يک آرايه ، از واژه کليدی new Array به شکل کلی زير استفاده می شود :
var نام آرايه = new Array ( ) ;
مثال : var Cars = new Array ( ) ;
می توان تعداد اعضای يک آرايه را در زمان تعريف ، در پرانتز جلوی واژه کليدی new Array ، تعيين کرد :
مثال : آرايه زير 4 عضو دارد :
var Cars = new Array ( 4 ) ;
شماره گذاری انديس اعضای يک آرايه از صفر شروع شده و برای هر عضو شمارنده يک واحد افزايش می يابد .
مثال : آرايه ای که در مثال قبل ايجاد کرديم ، 4 عشو زير را داراست :
Cars [ 0 ] , Cars [ 1 ] , Cars [ 2 ] , Cars [ 3 ]
برای مقدار دهی يا دسترسی به هر عضو آرایه ، از نام آرايه به همراه شمارنده يا انديس عضو مورد نظر در براکت مقابل نام آن ، به شکل کلی زير استفاده می شود :
مقدار مورد نظر = [ انديس عضو مورد نظر ] نام آرايه ;
مثال : Cars [ 0 ] = "Ford" ;
Cars [ 1 ] = "Nissan" ;
در مثال زير يک آرايه در يک اسکريپت تعريف شده و اعضای آن مقدار دهی شده اند . در پايان نيز عضو اول و دوم آرايه در خروجی بر روی صفحه چاپ شده اند :
< 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 >
خروجی : Ford
Nissan
برای مقدار دهی کلی اعضای یک آرایه می توان تمام يا بخش هايي از اعصای يک آرايه را می توان در هنگام تعريف و يا بعد از آن مقدار دهی کرد . به طور کلی 2 روش برای مقدار دهی اعضای يک آرايه وجود دارد :
روش اول : در روش اول ، هر يک از اعضای آرايه را به صورت تکی مقدار دهی می کنيم . در مثال زير يک ابتدا آرايه 4 عضوی تعريف شده و سپس مقدار دهی شده است :
< 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 عضو خواهد شد . اعضای اين آرایه در مرحله تعريف آرايه تعيين شده اند :
< script type="text/javascript" >
var Cars = new Array ( "Ford" , "Nissan" , "Mazda" , "Volvo" ) ;
< /script >
حلقه ها در جاوا اسکريپت
در این قسمت از مقالات طراحی سایت در بخش آموزش جاوا اسکریپت به مفهوم حلقه ها در جاوا اسکریپت می پردازیم .به طور کل از ساختار دستوری حلقه ها در جاوا اسکريپت ، برای اجرای مجوعه ای از دستور العمل ها به تعداد دفعات مورد نياز يا تا زمانی که يک شرط خاص درست باشد ، استفاده می شود .
در حلقه ، هنگامی که مجموعه دستورات حلقه به طور کامل اجرا می شود ، برنامه دوباره به ابتدای مجموعه دستورات حلقه رفته و در صورت برقرار بودن شرط حلقه ، يکبار ديگر دستورات آن به طور کامل اجرا خواهد کرد .به طور کل در جاوا اسکریپت دو نوع حلقه داریم:
حلقه for : در اين نوع حلقه ، مجموعه دستورالعمل ها به تعداد معلوم و مورد نياز ، تکرار خواهد شد .
حلقه while : در اين حالت ، دستورالعمل های حلقه تا زمانی که شرط تعيين شده برای آن درست باشد ، مجددا اجرا خواهد شد .
در ادامه به بررسی انواع حلقه های مورد استفاده در جاوا اسکريپت می پردازيم . در ليست زير حلقه های معرفی شده در اين قسمت قرار دارند . برای دريافت اعلاعات درباره هر کدام ، بر روی آن کليک کنيد :
for
while
do...while
for...in
حلقه for در جاوا اسکريپت
در این مقاله از طراحی سایت در قسمت آموزش جاوا اسکریپت ، حلقه for را توضیح می دهیم .
از حلقه ی for هنگامیکه می خواهیم مجموعه دستورالعمل های حلقه به تعداد دفعات معینی انجام شود استفاده می کنیم .
حلقه for دارای 3 پارامتر اصلی می باشد که عبارتنداز:
√ مقدار اوليه متغير : به وسيله اين مقدار ، مقدار اوليه برای شروع شمارنده حلقه تعيين می شود .
√ عبارت کنترلی : در اين قسمت يک عبارت کنترلی مرتبط با شمارنده حلقه تعيين می شود ، که در هر بار اجرای مجدد حلقه ، شرط عبارت کنترل شده و در صورت برقرار بودن شرط ، دستورات حلقه اجرا می شود .
√ گام افزايش يا کاهش : در اين قسمت ، ميزانی که متغير شمارنده حلقه ، در هر بار اجرای دستورات آن افزايش يا کاهش می يابد را تعيين می کنيم .
نحوه ی عملکرد این حلقه به صورت زیر می باشد : در این حلقه از یک مغیر به عنوان شمارنده یا کنترل کننده حلقه استفاده می شود.اين متغير در ابتدای اجرای حلقه ، مقدار دهی اوليه شده و اجرای مجدد حلقه با يک عبارت شرطی کنترل شده که در صورت درست بودن شرط ، دستورات حلقه يکبار اجرا می شود و با هر بار اجرای حلقه متغير حلقه به اندازه گام تعيين شده ، افزايش يا کاهش می يابد .
شکل کلی تعريف يک حلقه for به صورت زير است :
for ( گام افزايش يا کاهش ; تعيين عبارت کنترلی ; تعيين مقدار اوليه متغير )
{
دستورات بدنه حلقه
}
نکته : از 3 پارامتر اصلی حلقه for ، فقط تعيين عبارت کنترلی در هنگام تعريف حلقه اجباری بوده و می توان متغير شمارنده حلقه را قبل از تعريف حلقه مقدار دهی کرد و همچنين گام افزايش يا کاهش را در بدنه دستورات تابع قرار داد . در اين صورت می توان جای موارد فوق را در تعريف حلقه خالی گذاشت .
مثال : در مثال زير يک حلقه ساده در اسکريپت زير ايجاد شده است . شمارنده اين حلقه که متغيری به نام n است با مقدار اوليه 1 مقدار دهی شده و شرط حلقه کوچکتر يا مساوی بودن شمارنده حلقه از 5 تعيين شده است . گام افزايش اين حلقه نيز 1+ در نظر گرفته شده است . اين حلقه در هر بار اجرا مقدار متغير n را بر روی صفحه چاپ می کند . به خروجی آن دقت کنيد :
< script type="text/javascript" >
var n ;
for ( n = 1 ; n <= 5 ; n++ )
{
document.write ("Line number is " + n + "<br />") ;
}
< /script >
خروجی :
Line number is 1
Line number is 2
Line number is 3
Line number is 4
Line number is 5
مثال 2 : همانطور که گفتيم می توان قسمت پارامترهای مقدار اوليه و گام افزايش يا کاهش را در يک حلقه for خالی گذاشته و مقدار اوليه را قبل از تعريف حلقه و گام حلقه را در درون بلاک کد حلقه تعيين کرد . مثال شماره 1 را به اين صورت نيز می توان نوشت :
< script type="text/javascript" >
var n = 1;
for ( ; n <= 5 ; )
{
document.write ("Line number is " + n + "<br />") ;
n++ ;
}
< /script >
خروجی :
Line number is 1
Line number is 2
Line number is 3
Line number is 4
Line number is 5
نکته و مثال 3 : گام يک حلقه می تواند منفی يا کاهشی نيز باشد . در مثال زير شمارنده حلقه با هر بار اجرای حلقه يک واحد کاهش می يابد :
< script type="text/javascript" >
var n ;
for ( n = 5 ; n >= 1 ; n-- )
{
document.write ("Line number is " + n + "<br />") ;
}
< /script >
خروجی :
Line number is 5
Line number is 4
Line number is 3
Line number is 2
Line number is 1
يک برنامه کاربردی :
در اين قسمت يک برنامه ساده را با جاوا اسکريپت طراحی کرده ايم . اين برنامه از طريق 2 کادر متن ، دو عدد را به عنوان ورودی دريافت کرده و عدد اول را به توان عدد دوم می رساند .
توضيح : در ابتدا يک متغير به نام sum برای نگهداری جواب را با مقدار اوليه 1 تعريف می کنيم . سپس مقدار کادر اول در متغير n و مقدار کادر دوم را در متغير i ذخيره می کنيم . از عدد دوم به عنوان شمارنده حلقه استفاده شده که با هر بار اجرای حلقه ، عدد اول يکبار در خود ضرب شده و يک واحد از شمارنده حلقه نيز کم می شود ، تا به 1 برسد . در اين حالت اجرای حلقه متوقف شده و نتيجه خروجی بر روی صفحه چاپ می شود :
< 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 به صورت زير است :
while ( شرط يا شروط حلقه )
{
دستوراالعمل های مورد نظر حلقه
}
مثال : مثال اول قسمت آموزش حلقه for را در اينجا با حلقه while باز نويسی کرده ايم . در اين حلقه از متغير n به عنوان متغير شمارنده و کنترل کننده حلقه استفاده شده است . اجرای حلقه تا زمانی که شرط آن درست است ، ادامه دارد :
< script type="text/javascript" >
var n = 1 ; تعريف و مقدار دهی متغير کنترلی حلقه
while ( n <= 5 )
{
document.write ("Line number is " + n + "<br />") ;
n++ ; گام افزايشی متغير کنترلی حلقه
}
< /script >
خروجی :
Line number is 1
Line number is 2
Line number is 3
Line number is 4
Line number is 5
مثال : در اين مثال برنامه کاربردی که يک عدد را به توان عدد ديگری می رساند را که با حلقه for نوشته بوديم ، را با حلقه while باز نويسی کرده ايم . به تفاوت های اين دو ساختار دقت کنيد :
< 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 در جاوا اسکریپت را توضیح می دهیم . ساختار حلقه do ... while ، دقيقا همانند حلقه while است ، با اين تفاوت که شرط حلقه do ... while در انتهای حلقه تعريف و کنترل می شود . به عبارت ديگر در اين حلقه ابتدا يکبار دستورات حلقه اجرا شده و در آخر شرط حلقه برای اجرای مجدد ، کنترل می شود که در صورت درست بودن يکبار ديگر دستورات آن خواهد شد .
مزيت اين حلقه نسبت به حلقه while اين است که ، در حلقه while در صورت عدم برقراری شرط حلقه دستورات آن هيچگاه اجرا نخواه شد . اما در حلقه do ... while ، حتی در صورت غلط بودن و عدم برقراری شرط حلقه ، دستورات آن حداقل يکبار اجرا خواهد شد .
شکل کلی تعريف يک حلقه do ... while به صورت زير است :
do
{
دستورات حلقه
}
while ( شرط يا شروط حلقه )
مثال : مثال اول قسمت آموزش حلقه while را در اينجا با حلقه do ... while باز نويسی کرده ايم . در اين حلقه از متغير n به عنوان متغير شمارنده و کنترل کننده حلقه استفاده شده است . اجرای حلقه تا زمانی که شرط آن درست است ، ادامه دارد :
< script type="text/javascript" >
var n = 1 ; تعريف و مقدار دهی متغير کنترلی حلقه
do
{
document.write ("Line number is " + n + "<br />") ;
n++ ; گام افزايشی متغير کنترلی حلقه
}
while ( n <= 5 )
< /script >
خروجی:
Line number is 1
Line number is 2
Line number is 3
Line number is 4
Line number is 5
مثال : در مثال زير يک حلقه do ... while تعريف شده که شرط اجرای دستورات آن کوچکتر بودن متغير c از 5 است . اما قبل از حلقه متغير c با مقدار 8 مقدار دهی شده است . می بينيم که با وجود اشتباه بودن و عدم برقراری شرط حلقه دستورات آن حداقل يکبار اجرا شده و خروجی توليد کرده است ، ولی سری دوم اجرای حلقه به دليل عدم برقراری شرط آن اجرا نشده است :
< script type="text/javascript" >
var c = 8 ; تعريف و مقدار دهی متغير کنترلی حلقه
do
{
document.write ("Line number is " + c + "<br />") ;
c++ ;
}
while ( c <= 5 )
< /script >
خروجی :
Line number is 8
حلقه for-in در جاوا اسکريپت
در این قسمت از مقالات طراحی سایت در بخش آموزش جاوا اسکریپت می خواهیم حلقه for-in در جاوا اسکریپت را توضیح دهیم .
از حلقه for-in در جاوا اسکریپت برای حرکت در درون اعضا یک آرایه یا مجموعه خواص یک شی استفاده می شود . به ازای خواندن هر يک از اعضا آرايه يا يکی از خواص شی مورد نظر ، يکبار دستورات درون حلقه اجرا خواهد شد .
تعداد دفعات تکرار دستورات حلقه ، برابر با تعداد اعضای آرايه و يا تعداد خواص شی مورد نظر است . در اين حلقه معمولا از يک متغير به عنوان شمارنده يا انديس آرايه استفاده می شود .
شکل کلی تعريف يک حلقه for...in به صورت زير است :
for ( متغير in نام يک آرايه / مجموعه خواص يک شی )
{
دستورات بدنه حلقه
}
در مثال زیر یک آرایه با نام Lesson برای نگهداری نام دروس کامپیوتر با 5 عضو ایجاد و مقداردهی شده است و وظیفه ی حلقه for-in حرکت در درون اعضای آرایه Lesson و چاپ نام تک تک آن ها به عنوان خروجی است .
< 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 >
خروجی :
Lesson 1 = HTML
Lesson 2 = CSS
Lesson 3 = Visual Basic
Lesson 4 = Java Script
Lesson 5 = ASP.NET
فرض کنيد که در مثال بالا فقط می خواهيم نام دروسی از آرايه Lesson چاپ شود ، که شماره انديس آنها در آرایه زوج باشد . بنابراين در بدنه دستورات حلقه يک دستور continue با اين شرط که باقی مانده حاصل از تقسيم شماره انديس آرايه بر 2 برابر صفر نباشد را به قبل از دستور چاپ حلقه اضافه می کنيم . در اين صورت نام اعضايي از آرايه که شماره انديس آنها فرد است چاپ نمی شود و حلقه به انديس بعدی می رود :
< 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 >
خروجی :
Lesson 1 = HTML
Lesson 2 = Visual Basic
Lesson 3 = ASP.NET
دستور continue در جاوا اسکريپت
در این قسمت از آموزش جاوا اسکریپت ، دستور continue در جاوا اسکريپت را در مقالات طراحی سایت در شرکت طراحی سایت مبنا توضیح می دهیم . از دستور continue ، برای خارج شدن از ادامه اجرای يکبار دستورات حلقه و پرش به گام بعدی حلقه استفاده می شود .
دستور continue در جاوا اسکریپت را بايد در بدنه دستورات حلقه تعريف کرد . در هر بار اجرای حلقه ، برنامه با رسيدن به شرط تعيين شده برای دستور continue آن دستور را بررسی کرده و در صورت درست بودن ، از ادامه اجرای دستورات حلقه در آن مرحله جلوگيری کرده و مجددا به ابتدای حلقه باز می گردد . در اين حالت ، گام حرکت حلقه يکبار اجرا خواهد شد .
شکل کلی تعريف يک دستور continue ، به صورت زير است .
نکته : عملکرد و استفاده از دستور continue در تمام حلقه ها يکسان است . در اين مثال ، ما فرض کرده ايم که حلقه while است :
while ( شرط حلقه )
{
دستورات حلقه
if ( شرط حلقه ) continue ;
ادامه دستورات حلقه
}
مثال : مثال چاپ شماره خطوط را که در حلقه های قبل به کار برده بوديم را در اين قسمت ، با دستور continue باز نويسی کرده ايم . در اين حلقه شرط دستور continue ، برابر شدن متغير شمارنده حلقه يعنی n با مقدار 3 است ، که در هنگامی که n برابر 3 می شود ، برنامه از اجرای ادامه دستورات حلقه در مرحله ای که 3 = n است جلوگيری کرده و به گام بعدی حلقه يعنی 4 = n پرش می کند . بنابرين شماره خطوط تا شماره 2 چاپ شده و شماره 3 چاپ نشده و به ادامه اجرای حلقه در خط 4 پرش می شود .
نکته : توجه شود که دستورات قبل از دستور 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 >
خروجی:
Line number is 1
Line number is 2
Line number is 4
Line number is 5
ساختار دستوری try-catch در جاوا اسکريپت
در این قسمت از آموزش جاوا اسکریپت به تعریف ساختار دستوری try-catch در جاوا اسکریپت می پردازیم . در برنامه نويسی و طراحی سایت ، گاهی اوقات ممکن است خطاهايي رخ دهد . اين خطاها می تواند دلايل مختلفی داشته باشد ، از قبيل :
√ اشتباه تايپی در متن دستورات صفحه از سوی طراح صفحه .
√ واردنمودن اطلاعات اشتباه يا نادرست از سوی کاربر .
√ انواع خطاهای ممکن زمان اجرای مرورگر .
اگر کاربر که در حال مشاهده يک صفحه است ، در هنگام کار با خطا مواجه شود و عملا راهی برای رفع آن اشکال برايش وجود نداشته باشد ، مطمًننا از ادامه مشاهده و کار با صفحه صرف نظر خواهد کرد . اين وظيفه برنامه نويس است که با برنامه ريزی صحيح ، خطاهای احتمالی را پيدا کرده و راه حل های مناسب را برای آنها طراحی کند .
از ساختار دستوری try ... catch در جاوا اسکريپت ، برای پيدا کردن خطاها و error های احتمالی و تعيين اقدامات اصلاحی در صورت بروز خطا ، استفاده می شود .
اين ساختار از 2 بخش try و catch تشکيل شده است . کد اصلی برنامه که می خواهيم اجرا شود و احتمال می دهيم دارای خطا باشد ، را در قسمت try قرار داده و اقدامات اصلاحی را که می خواهيم در صورت بروز خطا انجام شود ، را در قسمت catch می گذاريم .
برنامه در هنگام رسيدن به ساختار ، دستورات قسمت try را انجام می دهد و در صورت مواجه با خطا در دستورات ، بخش catch را اجرا خواهد کرد .
نکته مهم : در صورت عدم برخورد با خطا ، دستورات قسمت catch به هيچ وجه اجرا نخواهد شد .
نکته مهم : در قسمت 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 ، بر روی آيکون خطا کليک کنيد . در اينجا به دليل عدم پيش بينی خطا هيچ واکنشی از سوی مرورگر انجام نمی شود :
< script type="text/javascript" >
function show_error()
{
document.wriet ( "Welcome User!" ) ;
}
< /script >
< input type="button" id="Button1" value="click me !" onclick="show_error()" />
در مثال زير ، تابع show_error2 قرار داده شده است . اين تابع نيز همانند تابع قبلی می خواهد يک پيام خوش آمد به کاربر اعلام کند . اين تابع نيز دارای اشتباه تايپی در دستور document.write است ، با اين تفاوت که با ساختار try ... catch قرار داده شده ، تعيين شده است در صورت بروز خطا يک پيام هشدار به کاربر اعلام شود . توسط متغير err که در پرانتز مقابل واژه کليدی catch تعريف شده است ، متن پيام error در خاصيت description ذخيره شده و سپس به کاربر اعلام می شود . به کد مثال دقت کنيد :
< 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 در جاوا اسکریپت می پردازیم . توسط دستور throw در جاوا اسکريپت می توان يک خطايابی کامل تر را انجام داد . با استفاده از اين دستور به همراه ساختار try-catch ، می توان روند اجرای برنامه و بروز خطا را کاملا تحت کنترل داشت و يک پيغام خطا دقيق طراحی کرد .
نکته : دستور throw به تنهايي کاربردی نداشته و بايد آنرا با ساختار دستوری try-catch به کار برد .
در مثال زير سعی شده است ، تا چگونگی استفاده از يک دستور throw را در قالب ساختار try-catch توضيح داد .
مثال : در مثال زير يک اسکريپت ساده برای دريافت ورودی از کاربر طراحی شده است . تابع Enter_Num که توسط دکمه فرمان Enter Number فراخوانی می شود ، در ابتدا يک کادر متن برای دريافت ورودی از کاربر ، نمايش می دهد . مقدار دريافتی از کاربر در متغير Num ذخيره می شود . سپس در يک ساختار try-catch ، مقدار دريافتی از کاربر بررسی می شود .
در حالت اول ، چنانچه کاربر مقداری را در کادر وارد نکرده و آنرا خالی ارسال کرده باشد ، برنامه خطای 1 را شناسايي و يک پيام هشدار مبنی بر وارد کردن عدد نمايش داده و سپس مجددا تابع Enter_Num را برای دريافت مقدار صحيح اجرا می کند . در حالت دوم اگر کاربر عددی بزرگتر از 100 را وارد کرده باشد ، برنامه خطای دوم را شناسايي کرده و يک پيغام هشدار مبنی بر بزرگ بودن عدد وارده را نمايش داده و مجددا تابع Enter_Num را اجرا می کند . به کد مثال و نحوه استفاده از دستور throw دقت کنيد :
< 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 در جاوا اسکریپت می پردازیم . استفاده از ساختار onerror ، روش قديمی خطا يابی در طراحی سایت در زبان جاوا اسکريپت است .
در صفحه قبل ، نحوه استفاده از ساختار دستوری try-catch در جاوا اسکریپت را توضيح داديم . از ساختار دستوری onerror در جاوا اسکریپت نيز برای خطايابی در صفحات وب ، ولی با روشی متفاوت استفاده می شود .
رويداد onerror ، هر زمان که خطايي در يک اسکريپت در صفحه به وجود بيايد ، تحريک شده و اتفاق می افتد . برای استفاده از رويداد onerror ، برنامه نويس بايد تابعی را طراحی کند که خطا به وجود آمده در صفحه را مديريت ( Handle ) کند . رويداد onerror در زمان بروز خطا ، تابع مديريت خطا ( Event Handler Function ) را فراخوانی خواهد کرد ، که در اين صورت دستورات پيش بينی شده برای مواجه با خطا اجرا خواهد شد .
تابع مديريت خطا با 3 پارامتر ( آرگومان ) ، به شرح زير فراخوانی خواهد شد :
msg : متن پيام خطايي که توسط مرورگر توليد شده و شامل توضيحاتی راجع به error رخ داده است ، را ارائه می دهد .
url : مسير کامل صفحه ای که خطا در آن اتفاق افتاده را شامل می شود .
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 نشان نمی دهد :
<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 ( "developer" ) ;
}
</script>
<input type="button" id="BtnError" value="Click to view error report" onclick="PageError()" />
متغیرهای جاوا اسکریپت
در این بخش از مقالات آموزش جاوا اسکریپت در طراحی سایت قصد داریم برخی از ویژگی مربوط به متغیر های جاوا اسکریپت را برای شما کاربران عزیز شرح دهیم. متغیرهای جاوا اسکریپت ، محل ذخیره مقادیر داده هستند. در این مثال، X، Y و Z، متغیرها هستند که هرکدام مقدار مقابل خود را دربردارند:
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
در برنامه نویسی، درست مثل در جبر، ما استفاده از متغیرها (مانند price1) برای حفظ مقادیر و ارزش ها استفاده می کنیم.
شناسه جاوا اسکریپت
در طراحی سایت ، همه متغیرهای جاوا اسکریپت باید با یک نام منحصر به فرد مشخص شود. این نام های مشخص ، شناسه نامیده می شوند. شناسه های می توانند نام های کوتاه شده (مانند x و y)، و یا نام های توصیفی مانند (سن، مبلغ، جمع کل) باشند.
• قوانین کلی برای ساخت نام متغیرها (شناسه های منحصر به فرد):
• نام ها می توانند شامل حروف، اعداد، زیر خط، و علامت دلار باشند.
• شناسه باید با حرف شروع شود.
• همچنین شناسه می تواند با علامت دلار و یا زیر خط نیز شروع شود.
• نام متغیر ها نسبت به کوچک و بزرگی حروف حساس هستند(y و Y متغیر متفاوت اند).
• کلمات کلیدی جاوا اسکریپت نمی توانند به عنوان شناسه انتخاب شوند.
انواع داده در جاوا اسکریپت
متغیرهای جاوا اسکریپت قادر به دربرگرفتن اعدادی مانند 100 و یا مقادیر متنی مانند یک اسم باشند. در برنامه نویسی و طراحی سایت، مقادیر متنی، "رشته های متن" نامیده می شوند. جاوا اسکریپت قادر به کنترل کردن انواع داده ها است. در این بخش ما فقط به داده های متنی و عددی اشاره می کنیم. رشته ها در داخل علامت یک و یا دو کوتیشن نوشته می شوند. در مقابل داده های عددی در داخل کوتیشن نوشته نمی شوند. اگر در اطراف داده های عددی کوتیشن قرار دهید، با آن ها به عنوان یک رشته رفتار می شود.
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
اعلام (ایجاد) متغیرهای جاوا اسکریپت
ایجاد یک متغیر در جاوا اسکریپت، به صورت اعلام (declaring) یک متغیر بیان می شود. یک متغیر جاوا اسکریپت را با کلمه کلیدی var ایجاد می شود. پس از اعلام، متغیر فاقد مقدار است. (از نظر فنی ارزش آن تعریف نشده است). به منظور اختصاص دادن یک مقدار به متغیر از علامت مساوی استفاده می کنیم.
var carName;
carName = "Volvo";
و یا به صورت زیر میتوانیم در همان زمان ایجاد متغیر، به آن یک مقدار اضافه کنیم.
var carName = "Volvo";
به منظور یادگیری و آموزش های بیشتر در زمینه طراحی سایت در بخش مقالات آموزش طراحی سایت با ما همراه باشید.