اموزش برنامه نویسیJava Script

["golbarg"]

مقدمه و معرفی Java Script

جلسه اول




معرفی Java Script :



در قسمت آموزش HTML (http://developer1.ir/HTML/Main.aspx) ، با زبان طراحی صفحات وب آشنا شديد . به وسيله امکانات زبان HTML ، می توان انواع صفحات وب را با کليه اجزای مورد نياز از قبيل نوشته ها ، جداول ، تصاوير ، فرم ها و ... را ايجاد کرد . اما HTML صرفا يک زبان طراحی است و توانايي برنامه سازی ، کنترل فرم ها ، پاسخ به رويدادهای برنامه و عملکرد کاربر و ... را ندارد .

به همين دليل بايد از يک زبان برنامه نويسی در صفحات وب استفاده کرد . Java Script يکی از زبان های برنامه نويسی اسکريپتی است ، که اولين بار توسط شرکت Netscape Communicator عرضه کننده مرورگر معروف Netscape ارائه شد و امروزه متداولترين زبان اسکريپت نويسی صفحات وب است .

توجه : قبل از مطالعه قسمت آموزش Java Script ، شما بايد به طور کامل با زبان HTML و به خصوص تگ < script > آشنا باشيد .

برای مطالعه قسمت های ذکر شده به بخش آموزش HTML (http://developer1.ir/HTML/Main.aspx) و بخش آموزش تگ < script > (http://developer1.ir/HTML/Script.aspx) برويد .


خصوصيات مهم Java Script :





Java Script يک زبان برنامه نويسی اسکريپتی است . دستور العمل های زبان های اسکريپتی ، در کامپيوتر کاربر و توسط مرورگر اجرا شده و برای اجرا نيازی به برنامه کمکی خاصی ندارند . به اين زبان ها در اصطلاح طرف مشتری ( Client Side ) می گويند . در مقابل زبان های مثل ASP.NET ابتدا توسط سرور ارسال کننده وب اجرا شده و سپس نتايج خروجی به زبان HTML برای اجرا در مرورگر فرستاده می شود . به اين زبان ها در اصطلاح طرف سرور ( Server Side ) می گويند







زبان های اسکريپتی ، جزء زبان های برنامه نويسی سبک هستند . اين زبانها در هنگام اجرا فازی به نام کامپايل* را طی نکرده و دستورات آن ها به صورت خط به خط اجرا می شوند .


کامپايل : برنامه های نوشته شده به زبان های برنامه نويسی مثل VB , C یا #C در هنگام اجرا ابتدا توسط کامپايلر به طور کامل خوانده شده و اشکال زدايي می شوند و در صورت عدم وجود اشکال ، اجرا خواهند شد . اما برنامه های نوشته شده به زبان های اسکريپتی ، به صورت خط به خط توسط مرورگر خوانده شده و اجرا می شوند .



برخی از امکانات Java Script :





Java Script به طراحان وب ، يک ابزار برنامه نويسی ساده و کارا می دهد .
Java Script به رويدادهای مختلف در صفحه واکنش نشان می دهد . برای مثال می توان يک تابع Java Script تعريف کرده تا در هنگام وقوع يک رويداد مثل کليک بر روی يک دکمه يا لود شدن صفحه ، اجرا شود .






Java Script می تواند اطلاعات ارسالی يک فرم را اعتبار سنجی و کنترل نموده و در صورت صحيح بود ، آنها را به سرور ارسال کند . اين کار باعث جلوگيری از ورود اطلاعات نادرست به سرور و کاهش ترافيک آن می شود .







Java Script توانايي تشخيص نوع و نسخه مرورگر مورد استفاده کاربر را داشته و می تواند بر حسب آن نوع مرورگر خاص ، تنطيمات و صفحات ويژه ای را بارگذاری نمايد .







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







Java Script می تواند انواع کادرهای اخطار ، تاييد و دريافت ورودی را به کاربر نمايش دهد .




تفاوت Java و Java Script :



زبان های برنامه نويسی Java و Java Script دارای ساختار دستوری مشابه به هم هستند ، ولی 2 زبان کاملا مجزا هستند .
Java يک زبان شی گرا قدرتمند برای برنامه نويسی بر روی پلتفرم های مختلف است ، در حالی که Java Script يک زبان ساده اسکريپت نويسی در مرورگر های وب است .
ویرایش (http://www.njavan.com/forum/group.php?do=message&gmid=32167&pp=15&page=1) گزارش (http://www.njavan.com/forum/group.php?gmid=32167&do=report)

["golbarg"]

نحوه تعريف دستورات Java Script در صفحه :




برای تعريف و ايجاد يک اسکريپت ، از تگ < script > (http://developer1.ir/HTML/Script.aspx) استفاده می شود . کليه دستورات مورد نظر اسکريپت ، درون تگ باز و بسته < script > تعريف شده و به عبارتی محدوده کدهای اسکريپت را تعيين می کند . در هر صفحه HTML ، می توان به تعداد مورد نياز از تگ < script > استفاده کرد ، که هر تگ به صورت مجموعه ای واحد برای خود عمل می کند .
توجه : قبل از مطالعه قسمت آموزش Java Script ، شما بايد به طور کامل با زبان HTML و به خصوص تگ < script > آشنا باشيد . برای مطالعه قسمت های ذکر شده به بخش آموزش HTML (http://developer1.ir/HTML/Main.aspx) و بخش آموزش تگ < script > (http://developer1.ir/HTML/Script.aspx) برويد .
مثال : در مثال زير يک اسکريت ساده در صفحه قرار داده شده است . به نکات زير دقت کنيد :


نکته 1 : علاوه بر Java Script ، زبان های اسکريپتی ديگر از قبيل VB Script يا EcmaScript نيز وجود دارند و در هر تگ < script > بايد به وسيله خاصيت Type نوع و زبان اسکريپتی مورد استفاده در ان اسکريپت را تعيين کرد . در مثال زير زبان اسکريپت Java Script و نوع آن متن تعيين شده است .
نکته 2 : در مثال زير از دستور document.write استفاده شده است . اين دستور برای نمايش يک متن خروجی که در پرانتز جلوی آن تعيين می شود ، در صفحه به کار می رود . در ادامه با شی document و خواص و متدهای آن آشنا خواهيد شد .



Example


< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< /head >
< body >
< script type="text/javascript" >
document.write ( "This is an Script !" )
< /script >
< /body >
</html>
کد


This is an Script !
خروجی



انواع حالت های دستورات اسکريپتی :
به طور کلی 2 حالت اسکريپت ( برنامه اجرايي ) در صفحات وب قابل پياده سازی است :


اسکريپت های که می خواهيم به محض لود شدن صفحه ، اجرا شده و اثر خود را نمايش دهند . در اين حالت بايد اسکريپت ها را در قسمت < body > (http://developer1.ir/HTML/base_tag1.aspx#bo) صفحه قرار داد .
اسکريپت هايي که می خواهيم در هنگام بروز يک رويداد در صفحه ، مثل کليک بر روی يک دکمه خاص و ... اجرا شوند . به عبارت ديگر می خواهيم اجرای آنها کنترل شده باشد . در اين حالت دستورات اسکريپت را در قسمت < head > (http://developer1.ir/HTML/base_tag2.aspx#he) صفحه و یا در يک فايل خارجی تعريف کرد .

نکته : گاهی اوقات می خواهيم از دستورات اسکريپتی يکسان و مشترک در تمام يا گروهی از صفحات يک وب سايت استفاده کنيم . در اين حالت برای جلوگيری از تکرار دستورات در تمام صفحه های مذکور ، کاهش حجم کد نويسی ، افزايش سرعت طراحی و اعمال تغييرات سريع و آسان به دستورات ، بهتر است همه آن اسکريپت ها را يکبار در يک فايل خارجی تعريف کرده و از آن به طور مشترک در تمام صفحات استفاده کرد . برای دريافت اطلاعات بيشتر به روش سوم قرار دهی اسکريپت در صفحات وب در پايين صفحه برويد .
محل قرار دادن اسکريپت ها در صفحات وب :
به طور کلی 3 روش برای قرار دادن اسکريپت ها در صفحات وب وجود دارد :
1 ) درون محدوده اصلی صفحات HTML ، در قسمت تگ < body > :
اسکريپت های تعريف شده در اين قسمت ، به محض بارگداری و نمايش صفحه اجرا شده و خروجی خود را توليد می کنند . اين نوع اسکريپت ها می توان در هر جای محدوه تگ < body > صفحات تعريف کرد . در اين نوع اسکريپت ها ، هيچ کنترلی از سوی کاربر برای اجرای آنها وجود ندارد ، مگر اينکه دستورات آن در قالب يک تابع ( function ) تعريف شده باشند ، که تا زمان فراخوانی آن تابع اجرا نخواهند شد . برای دريافت اطلاعات بيشتر در مورد توابع جاوا اسکريپت ، به قسمت تعريف توابع در جاوا اسکريپت برويد .
مثال : در مثال زير يک اسکريپت ساده در قسمت تگ < body > صفحه ايجاد شده است . اين اسکريپت به محض لود شدن صفحه اجرا شده و خروجی خود را توليد می کند .


Example


< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< /head >
< body >
< script type="text/javascript" >
document.write ( "This script is placed in the body section . " )
< /script >
< /body >
</html>
کد


This script is placed in the body section .
خروجی


2 ) در قسمت تگ < head > :
اسکريپت هايي که می خواهيم در هنگام بروز يک رويداد در صفحه مثل کليک بر روی يک دکمه و ... اجرا شوند ، را می توان در قسمت < head > تعريف کرد . دستورات اسکريپت های اين قسمت بايستی در قالب توابع تعريف شده باشند و تا زمانی که از سوی برنامه يا کاربر فراخوانی نشده باشند ، اجرا نخواهند شد . مزيت اين روش در اين است ، که اين اسکريپت ها قبل از اجرا توسط مرورگر لود شده اند . فراخوانی بايد توسط يک اسکريپت ديگر در قسمت تگ < body > صورت بگيرد .
مثال : در مثال زير يک اسکريپت ساده در 2 حالت در قسمت تگ < head > صفحه تعريف شده است . در حالت اول به دليل عدم فراخوانی تابع اسکريپت ، آن اسکريپت هيچ گاه اجرا نخواهد شد . اما در حالت دوم تابع ()hello توسط رويداد onclick ( کليک ) دکمه فرمان فراخوانی شده و خروجی خود را نمايش می دهد . برای اجرای اسکريپت بر روی دکمه فرمان مثال کليک نماييد :


Example


حالت 1 . در اين حالت به دليل عدم فراخوانی اسکريپت هيچ خروجی نداريم .


< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< script type="text/javascript" >
function hello ( )
{
document.write ( "Hello User . This script is placed in the head section ." )
}
< /script >
< /head >
< body >
محتويات صفحه
< /body >
</html>
کد



خروجی


حالت 2 . در اين حالت با فراخوانی اسکريپت توسط رويداد کليک دکمه فرمان ، دستور آن اجرا می شود .


< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< script type="text/javascript" >
function hello ( )
{
document.write ( "Hello User . This script is placed in the head section . " )
}
< /script >
< /head >
< body >
محتويات صفحه
< input value ="to view script Click me" id="Button1" type="button" onclick="hello( )" / >
< /body >
</html>
کد




خروجی


3 ) در يک فايل خارجی JS :
در اين حالت تمام اسکريپت های مورد نظر را در يک فايل خارجی متنی با پسوند JS ، تعريف کرده و سپس به وسيله تگ < script > در قسمت < head > صفحه ، بين آن فايل و صفحه لينک ايجاد می کنيم .
از اين جالت معمولا در مواردی که بخواهيم کدهای اسکريپت را از محتويات صفحات HTML جدا کرده و يا از يک سری دستورات و توابع اسکريپتی مشترک در چند صفحه استفاده کنيم ، کاربرد دارد .
اسکريپت های اين حالت بايد در قالب توابع مختلف تعريف شده و تا زمانی که از سوی برنامه يا کاربر فراخوانی نشوند ، اجرا نخواهند شد .
مثال : در مثال زير ابتدا يک اسکريپت در يک فايل خارجی به نام myscript.js تعريف کرده و سپس بين صفحه و آن فايل ارتباط ايجاد کرده ايم . تابع ( ) hello2 توسط رويداد کليک دکمه فرمان فراخوانی و اجرا می شود . برای اجرای آن بر روی دکمه فرمان کليک کنيد :


متن فايل myscript.js


< script type="text/javascript" >
function hello2 ( )
{
document.write ( "This script is placed in an external Java Script file . " )
}
< /script >






Example


< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< script type="text/javascript" src ="../myscript.js" > * ايجاد لينک بين صفحه و فايل اسکريپت *
< /script >
< /head >
< body >
محتويات صفحه
< input value="to view script Click me" id="btnhello2" type="button" onclick="hello2( )" / >
< /body >
</html>
کد




خروجی

["golbarg"]

نکات مهم در کد نويسی جاوا اسکريپت :



1 ) جاوا اسکريپت به بزرگ يا کوچک بودن حروف حساس است ( بر خلاف HTML ) :
در تعريف و نام گذاری توابع و متغيرها در جاوا اسکريپت بايد به بزرگ يا کوچک بودن حروف کاملا دقت کرد . تابع با نام "MyFunction" با تابع "myfunction" و متغير با نام "Matn" با متغير با نام "matn" متفاوت هستند .
همچنين کليه دستورات جاوا اسکريپت بايد به صورت استاندارد تعيين شده ، با حروف بزرگ يا کوچک نوشته شود . عدم رعايت اين نکته باعث اجرا نشدن دستور و بروز خطا در صفحه می شود . هر يک از دستورات و کلمات کليدی در جاوا اسکريپت فقط به يک صورت ، که صورت استاندارد است بايد نوشته شوند .
توجه : در مثال ها و کدهای بخش آموزش ، شکل صحيح نوشتاری کليه دستورات نمايش داده شده است .
مثال 1 : در مثال زير 2 متغير با نام های يکسان ، ولی متفاوت در بزرگ يا کوچک بودن حروف به نام های "Matn" و "matn" ايجاد و مقدار دهی شده اند . خروجی کد نشان می دهد که اين دو متغير کاملا با هم متفاوت هستند و هر يک مقدار مخصوص به خود را دارند :


Example


<script type="text/javascript">
var matn = "This is a Variable ." ;
var Matn = "This is another Variable ." ;
document.write ( matn ) ;
document.write ( Matn ) ;
</script>
کد


This is a Variable .This is another Variable .
خروجی


مثال 2 : شکل صحيح نوشتن متد چاپ خروجی در جاوا اسکريپت به صورت documnet.write است . در مثال زير ابتدا دستور را به شکل نادرست و با حروف بزرگ به صورت Documnet.Write نوسته ايم ، که باعث ايجاد خطا در صفحه شده و خروجی نداريم . اما در حالت دوم آنرا به شکل صحيح نوشته ايم ، که خروجی درست را نيز مشاهده می کنيم :


Example


حالت اول ، شکل نادرست


<script type="text/javascript">
var Str = "An Investigation for Development" ;
Document.Write ( Str ) ;
</script>
کد



خروجی


حالت دوم ، شکل صحيح


<script type="text/javascript">
var Str = "An Investigation for Development" ;
document.write ( Str ) ;
</script>
کد


An Investigation for Development
خروجی



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


Example


<script type="text/javascript">
var StrName="Developer Studio";
document.write(StrName);
</script>
<script type="text/javascript">
var StrName = "Developer Studio" ;
document.write ( StrName ) ;
</script>
کد


Developer Studio
Developer Studio
خروجی



3 ) نوشتن عبارت های متنی در بيش از يک خط :
در هنگام تعريف و استفاده از عبارت های متنی در دستوراتی نظير document.write و ... ، می توان ادامه متن را به کمک يک کاراکتر \ به سطر بعدی انتقال داد . اين مسئله در زمانی که عبارت های متنی طولانی استفاده می شود ، کاربرد دارد .
مثال : در مثال زير می خواهيم يک پيام را به کاربر اعلام کنيم . ولی به دليل طولانی بودن متن پيام تصميم گرفته ايم ، آن را در بخش کدنويسی در 2 خط تعريف کنيم ، اما می بينيم که مرورگر در خروجی آنرا در يک خط نشان می دهد :


Example


<script type="text/javascript">
document.write ( "Java Script is a client side language . \
It`s codes executes in the computer of visitor " ) ;
</script>
کد


Java Script is a client side language . It`s codes executes in the computer of visitor
خروجی



4 ) درج توضيحات ( comments ) مورد نظر در بخش کد نويسی :
در اسکريپت های نوشته شده به زبان جاوا اسکريپت ، می توان توضيحات مورد نظر را به صورت ويژه ای در درون کدها وارد کرد . اين توضيحات به طور کامل از سوی مرورگر ناديده گرفته شده و در خروجی نمايش داده نمی شوند . از توضيحات معمولا برای نشانه گذاری يا ارائه توضيحاتی راجع به کدهای برنامه استفاده می شود .
دو نوع توضيح در جاوا اسکريپت می توان ايجاد کرد :
1 . توضيحات يک خطی : اين توضيات به کمک دو بک اسلش // به صورت زير وارد می شود . توضيحات ارائه شده به اين صورت حداکثر می تواند در يک خط باشد . به مثال زير دقت کنيد . در اين مثال خط اول يک comment خط دوم يک دستور چاپ خروجی است . همانظور که در خروجی کد مشخص است ، دستور چاپ توسط مرورگر اجرا شده ولی comment نمايش دادده نمی شود :


Example


<script type="text/javascript">
// this is a one line comment . navigator won`t show it .
document.write ( "How to write a comment" ) ;
</script>
کد


How to write a comment
خروجی


2 . توضيحات چند خطی : با استفاده از يک نماد */ در ابتدای اولين خط توضيحات و يک نماد /* در آخرين خط توضيحات ، می توان توضيحات چند خطی در اسکريپت ها وارد کرد . از اين حالت برای ارائه توضيحات طولانی استفاده می شود . به مثال زير دقت کنيد . در اين مثال هم يک دستور و يک comment چند خطی قرار داده شده است . دستور توسط مرورگر اجرا شده ، ولی comment نمايش داده نمی شود :


Example


<script type="text/javascript">
/* this is a multi line comment . navigator won`t show it .
We use it for long comments .
It can be several lines */

document.write ( "How to write a multi line comment" ) ;
</script>
کد


How to write a multi line comment
خروجی

["golbarg"]

عملگرهای جاوا اسکريپت :




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

1 ) عملگرهای رياضی :


عملگر
شرح
مثال


+ جمع
دو عملوند خود را با هم جمع می کند .
x = 2 y = 2 x + y = 4


- تفريق
دو عملوند خود از هم کم می کند .
x = 4 y = 2 x - y = 2


* ضرب
دو عملوند خود را در هم ضرب می کند .
x = 2 y = 3 x * y = 6


/ تقسيم
عملوند اول خود را بر عملوند دوم تقسيم می کند .
x = 6 y = 2 x / y = 3


% باقی مانده
باقی مانده حاصل از تقسيم عملوند اول بر عملوند دوم را محاسبه می کند .
x = 8 y = 3 x % y = 2
x = 15 y = 4 x % y = 3
x = 9 y = 3 x % y = 0


++ افزاينده
عملوند خود را يک واحد افزايش می دهد .
x = 7 x++ x = 8


- - کاهنده
عملوند خود را يک واحد کاهش می دهد .
x = 8 x- - x = 7



2 ) عملگرهای انتسابی :
از عملگرهای انتسابی ، برای نسبت دادن مقدار به يک متغير استفاده می شود .
نکته : برخی از حالت های محاسبات متغيرها مثل x = x + y را می توان به صورت خلاصه تر به صورت x += y نوشت . در جدول زير انواع حالت های آن آمده است :


عملگر
مثال
برابر است با


= انتساب
x = y يا x = 5
y = 5 x = y نتيجه : x = 5
var x ; x = 5 (x انتساب مقدار 5 به )


+= جمع
x += y
x = x + y


- = تفريق
x - = y
x = x - y


*= ضرب
x *= y
x = x * y


/= تقسيم
x /= y
x = x / y


%= باقی مانده
x %= y
x = x % y



3 ) عملگرهای مقايسه ای :
از اين عملگرها برای مقايسه يک متغير با يک مقدار و يا مقايسه 2 متغير با هم استفاده می شود .


عملگر
شرح
مثال


= = تساوی
امتحان برابری با يک مقدار يا يک متغير ديگر
x = = y يا y = = 8


= = = تساوی
امتحان برابری با يک مقدار يا يک متغير ديگر هم از لحاظ مقدار و هم از لحاظ نوع داده ای
x = = = y يا y = = = "8"
مثال: x = 5 , y = "5" , اگر x = = = y نتيجه : غلط است


! = عدم تساوی
امتحان عدم برابری با يک مقدار يا يک متغير ديگر
x ! = y يا y ! = 4
مثال : x = 5 , y = 6 , اگر x ! = y نتيجه : درست است


> بزرگتر بودن
امتحان بزرگتر بودن
x > y يا y > 4
مثال : x = 5 , y = 6 , اگر x > y نتيجه : غلط است


< کوچکتر بودن
امتحان کوچکتر بودن
x < y يا y < 4
مثال : x = 5 , y = 6 , اگر x < y نتيجه : درست است


مساوی يا بزرگتر بودن >=
امتحان مساوی يا بزرگتر بودن
x >= y يا y >= 4
مثال : x = 5 , y = 6 , اگر x >= y نتيجه : غلط است


مساوی يا کوچکتر بودن <=
امتحان مساوی يا کوچکتر بودن
x < y يا y < 4
مثال : x = 5 , y = 5 , اگر x <= y نتيجه : درست است
مثال : x = 5 , y = 7 , اگر x <= y نتيجه : غلط است



4 ) عملگرهای منطقی :
از عکلگرهای منطقی برای ترکيب دو يا چند عبارت مقايسه ای يا شرطی با هم و ايجاد يک عبارت واحد استفاده می شود . در جدول زير انواع عملگرهای منطقی و شرايط درست بودن آنها توضيح داده شده است .


عملگر
شرح
مثال


&& عملگر " و "
اين عبارت برای ترکيب دو يا چند عبارت با هم استفاده می شود . نتيجه ترکيب اين عملگر فقط زمانی صحيح است ، که تمام عبارات ترکيب شده با هم درست باشند .
مثال : x = 5 , y = 7 , اگر ( x < 3 && y > 9 ) نتيجه : غلط است
مثال : x = 5 , y = 7 , اگر ( x < 6 && y > 8 ) نتيجه : درست است


|| عملگر " يا "
اين عبارت برای ترکيب دو يا چند عبارت با هم استفاده می شود . نتيجه ترکيب اين عملگر در صورت درست بودن حداقل يکی از عبارات ترکيب شده ، درست خواهد بود.
مثال : x = 5 , y = 7 , اگر ( x < 3 || y > 4 ) نتيجه : درست است
مثال : x = 5 , y = 7 , اگر ( x < 3 || y > 8 ) نتيجه : غلط است


! عملگر not
اين عملگر برای بر عکس کردن درستی يا عدم درستی يک عبارت استفاده می شود . استفاده اين عملگر قبل از يک عبارت صحيح باعث نادرست شدن جواب و برعکس خوهد شد .
مثال : x = 5 , y = 5 , اگر ! ( x == y ) نتيجه : غلط است
مثال : x = 5 , y = 7 , اگر ! ( x == y ) نتيجه : درست است




5 ) عملگر رشته ای :
متغيرهای رشته ای متغير هایي هستند ، که از متن تشکيل شده اند . اين متغيرها را همانطور که قبلا اشاره شد ، بايد بين دو علامت " " تعريف کرد .
در جاوا اسکريپت می توان دو متغير رشته ای را با عملگر + به هم اضافه کرد . همچنين برای ايجاد فاصله بين متغيرهای می توان از يک " " به شکلی که در مثال زير آمده است ، استفاده کرد .
مثال : در مثال زير دو عبارت رشته ای matn1 و matn2 را در قالب يک متغير جديد به نام welcome ذخيره کرده ايم :


Example


< script type="text/javascript" >
var matn1 = "Welcome to" ;
var matn2 = "Developer Studio" ;
var welcome = matn1 + " " + matn2 ;
document.write (welcome) ;
< /script >
کد


Welcome to Developer Studio
خروجی



- - - به روز رسانی شده - - -

نمايش کاراکترهای خاص در جاوا اسکريپت :



در کد نويسی دستورات جاوا اسکريپت ، از برخی از کاراکترها به منظور ويژه های استفاده می کنيم . برای مثال از کاراکتر " برای شروع يک عبارت متنی در دستوراتی نظير document.write و ... استفاده می شود . به کار بردن مستقيم چنين کاراکترهای در عبارت های متنی باعث تداخل با کدهای برنامه و بروز خطا و خروجی نامناسب می شود .
برای نمايش چنين کاراکترهايي در عبارت های متنی ، بايد از يک کاراکتر \ قبل از کاراکتر مورد نظر استفاده کرد .
مثال : برای مثال می خواهيم در اسکريپت زير يک پيام به کاربر اعلام کنيم . می خواهيم در متن پيام ، عبارت Developer Studio در بين دو کاراکتر " " قرار بگيرد .در حالت اما به دليل تداخل اين کاراکتر ها با شکل دستوری آنها در دستور document.write ، می بينيم که دارای خروجی نادست بوده و پیام فقط خروجی بر روی صفحه چاپ نمی شود . در حالت دوم از يک \ قبل از " استفاده شده و می بينیم که دراری خروجی مورد نظر هستيم و پيام به شکل صحيح نمايش داده شده است :


Example


حالت اول ، شکل نادرست


<script type="text/javascript">
var matn = "Hello Welcome to "developer Studio " a website for Developers" ;
document.write ( matn ) ;
</script>
کد



خروجی


حالت دوم ، شکل صحيح


<script type="text/javascript">
var matn = "Hello Welcome to \"developer Studio\" a website for Developers" ;
document.write ( matn ) ;
</script>
کد


Hello Welcome to "developer Studio" a website for Developers
خروجی


ايجاد يک خط جديد در نوشته :
می توان در متن نوشته ی کادر های Pop-Up در جاوا اسکريپت ، نوشته را به سطر پايين انتقال داد . برای اين منظور از يک کاراکتر n\ استفاده می شود . هر بار استفاده از اين کاراکتر باعث انتقال نوشته به يک سطر پايين تر می شود .
مثال : در مثال زيرمتن پيام يک کادر اخطار اسکريپت را در 4 خط نمايش داده ايم .


Example


<script type="text/javascript">
function New_Line ( )
{
alert ( "Hello \nDear User \n\n Welcome to DeveloperStudio" ) ;
}
</script>

<input type="button" id="Button1" value="Click Me !" onclick="New_Line( )" />
کد




خروجی


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


شرح
خروجی
نحوه استفاده


علامت نقل قول تکی '
'
\'


علامت نقل قول جفتی "
"
\"


علامت و در انگليسی &
&
\&


علامت اسلش در متن \
\
\\


رفتن به خط جديد در متن

["golbarg"]

جلسه دوم



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


از ساختارهای شرطی در زمانی استفاده می شود که بخواهيم در صورت بر قرار بودن شرط يا شرط هايي ، يکسری دستورات خاص اجرا شده و در صورت عدم بر قراری آنها گروه ديگری از دستورات اجرا شوند .
بر حسب شرايط می توان از يکی از ساختارهای دستوری زير استفاده کرد :
توجه : * Condition = شرط يا شروط * Statment = دستور يا دستورات
1 ) if ( Condition ) Statment :
از اين ساختار در مواقعی که می خواهيم در صورت بر قرار بودن شرط يا شرط هايي يکسری دستورات خاص اجرا شوند ، استفاده می شود . در اين حالت در صورت عدم بر قراری شرط هاي تعيين شده ، هيچ دستوری اجرا نخواهد شد .
شکل کلی استفاده از اين ساختار به صورت زير است :
if ( شرط يا شروط )
{
دستورات مورد نظر که در صورت برقرار بودن شرط ها اجرا می شوند
}
مثال : در مثال زير متغير عددی IntNum يکبار با عددی بيش از 10 و يکبار با عددی کوچکتر از 10 مقدار دهی شده است . شرط دستور if اين است ، که در هنگام بزرگتر بودن IntNum از عدد 10 پيغام "This Number is bigger than 10" و در هنگام کوچکتر بودن آن از عدد 10 ، هيچ خروجی چاپ نشود . به مثال دقت کنيد :


Example


در حالت اول به دليل بزرگتر بودن عدد 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" چاپ شود . به مثال دقت کنيد :


Example


در حالت اول به دليل بزرگتر بودن عدد 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 ;


Example


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 (http://developer1.ir/JavaScript/Java_Script_Switch.aspx)استفاده کرد .
مثال : در مثال زير يک کادر متن و يک دکمه فرمان قرار داده شده است . کادر متن ورودی را از کاربر دريافت کرده و. با کليک بر روی دکمه فرمان ، خروجی را در کادر آبی رنگ می بينيم .
شکل عملکرد اين مثال به صورت زير است :
رويداد کليک دکمه فرمان تابع ( ) ifclause را که در قسمت < head > قرار دارد ، را فراخوانی می کند . در اين تابع يک دستور if سه شرطی قرار داده شده است ، که مقدار متغير matn را ارزيابی کرده و در صورتی که مقدار آن برابر 1 باشد ، عبارت one ، در صورت 2 بودن عبارت two ، در صورت 3 بودن عبارت three و در صورتی که مقدار آن به غير از يکی از موارد فوق باشد ، عبارت bigger than 3 را نمايش می دهد .


Example


نکات مهم : نکات زير در مثال با شماره مشخص شده اند .

خاصيت 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 ( نام يک متغير يا يک عبارت )
{
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 است .


Example


< 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 >
کد




txtinput :


txtresult :



خروجی



دستور break :
همانطور که در قسمت بالا نيز اشاره شد ، چنانچه يک دستور case در ساختار switch اجرا شود ، برنامه به طور اتوماتيک دستورات تمام case های بعد از آن را نيز اجرا خواهد کرد ، مگر اينکه به يک دستور break برسد . . برای جلوگيری از اين مسئله ، بايد در پايان دستورات هر case از دستور break استفاده کرد .
در اين حالت در صورت وارد شدن برنامه به يک دستور يک case ، فقط دستورات آن case اجرا شده و اجرای بقيه case ها متوقف می شود .
شکل کلی استفاده از دستور break به صورت زير است :
switch ( نام يک متغير يا يک عبارت )
{
case مقدار 1 :
case 1 دستورات مربوط به
break ;
case مقدار 2 :
case 2 دستورات مربوط به
break ;
.
.
.
.

case n مقدار :
case n دستورات مربوط به
break ;
default :


دستورات پيش فرض ساختار که در صورت عدم برقراری مقادير تمام case های فوق ، اجرا خواهند شد
}
مثال : در مثال زير ، مثال قسمت قبل را با دستور break بازنويسی کرده ايم . همانطور که در خروجی مشاهد می کنيد ، در اين حالت به دليل استفاده از دستور braek در پايان هر case ، فقط دستورات آن case اجرا شده و از اجرای دستورات case های ديگر جلوگيری می شود . برای مشاهده خروجی در کادر متن txtinput متنی را وارد کرده و سپس بر روی دکمه فرمان کليک کنيد .


Example


< 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" ;
break ;
case "2":
txtresult.value = "two";
break ;
case "3":
txtresult.value = "three";
break ;
default:
txtresult.value = "bigger than 3";
}
}
< /script >
کد




txtinput :


txtresult :



خروجی

["golbarg"]

تعريف تابع :



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


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

محل تعريف توابع :
توابع را می توان در هر جای تگ های اسکريپت < script < ، تعريف کرد . برای آشنايي با مکان تعريف تگ اسکريپت در صفحات HTML ، به قسمت آموزش مکان اسکريپت ها در صفحات وب (http://developer1.ir/JavaScript/Java_Script_Place.aspx) برويد .
نکته مهم : در قسمت مکان قرار گيری اسکريپت ها در صفحات وب اشاره کرديم ، اسکريپت هايي که در درون قسمت < body > تعريف می شوند ، به محض لود شدن صفحه اجرا خواهند شد . اما چنانچه اين اسکريپت ها شامل توابع باشند ، دستورات آن توابع تا زمان فراخوانی تابع اجرا نخواهند شد .
شکل کلی تعريف توابع :
برای تعريف يک تابع از واژه کليدی function به شکل کلی زير استفاده می شود :
function نام تابع ( )
{
دستورات تابع
}
مثال :در مثال زير يک تابع به نام welcome ، تعريف شده است . اين تابع تا زمانی که فراخوانی نشود اجرا نشده و خروجی ندارد .


Example


< script type="text/javascript" >
function welcome( )
{
document.write ( "welcome to DeveloperStudio" )
}
< /script >
کد



خروجی


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


Example


< 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 >
کد


welcome to DeveloperStudio
خروجی


نکته : يک تابع را می توان توسط رويدادهای يک کنترل HTML مثل يک دکمه فرمان نيز فراخوانی کرد . در اين حالت بايد مقدار رويداد مورد نظر را در تگ کنترل ، برابر نام تابع در نظر گرفت . به مثال زير دقت کنيد .
مثال : در مثال زير تابع welcome که در مثال قبل توسط يک اسکريپت ديگر فراخوانی شده بود ، در اينجا توسط رويداد کليک ( onclick ) دکمه فرمان btnclick فراخوانی می شود . برای فراخوانی تابع بر روی دکمه فرمان مثال کليک کنيد .


Example


< 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 کليکگ کنيد .


Example


< 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" />

کد


Number 1 : Number 2 :

خروجی



نحوه تعريف مقدار بازگشی برای يک تابع :
يک تابع می تواند پس از انجام دستورات در نظر گرفته شده برای آن ، مقداری را به عنوان خروجی به نقطه ای که از آن فراخوانی شده است ، باز گرداند .
برای تعيين مقدار بازگشتی يک تابع از دستور return استفاده کرده ، که مقدار خروجی را درپرانتز مقابل آن دستور به شکل زير تعريف می کنيم .
return ( مقدار بازگشتی ) ;
نکته : مقدار بازگشتی ، می تواند يک رشتته يا عدد ، يک متغير و يا يک عبارت محاسباتی باشد .
مثال : تابع multiple را در مثال قبل با دستور return بازنويسی کرده ايم . در اين حالت تابع به جای استفاده از دستور document.write با دستور return ، مقدار را برای چاپ خروجی به تابع Call_Function بر می گرداند :


Example


< 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" />

کد


Number 1 : Number 2 :

خروجی

["golbarg"]

منوهای Pop-Up در جاوا اسکريپت :



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


کادر پيام يا هشدار ( alert Box )
کادر دريافت تاييد (confirm Box )
کادر دريافت ورودی ( prompt Box )

در ادامه به معرفی و توضيح هر يک از کادرهای فوق می پردازيم :
1 ) کادر پيام يا هشدار ( alert Box)
از کادر alert Box :
از کادر alert Box ، برای اعلام يک پيام يا هشدار به کاربر استفاده می شود . اين پيام که از قبل بايد تعيين شده باشد ،در يک کادر ظاهر شده و تا زمانی که کاربر دکمه Ok را انتخاب نکند ، از بين نمی رود .
شکل کلی تعريف يک کادر منتی به صورت زير است :
alert ( " متن پيام يا هشدار " ) ;
مثال : در مثال زير يک کادر alert Box در تابع Alert_Box تعريف شده است . اين تابع توسط دکمه فرمان ! Alert ، فراخوانی شده و کادر پيام خود را ظاهر می کند .


Example


< script type="text/javascript" >
function Alert_Box ( )
{
alert ( " Welcome To DeveloperStudio " ) ;
}
</script>

<input type="button" id="btnAlert" value=" Alert ! " onclick="Alert_Box( )" />
کد




خروجی


مثال 2 : در مثال زير يک کادر متن و يک دکمه فرمان قرار داده شده است . کاربر بايد يک عدد را در کادر متن وارد کرده و بر روی دکمه فرمان کليک کند . چنانچه عدد ورودی از 10 کمتر باشد ، برنامه عبارت Welcome to DeveloperStdio را در خروجی چاپ کرده و در غير اين صورت يک کادر پيام با متن Number too big را به کاربر نشان می کند .


Example


< 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()" />
کد


Enter Number :

خروجی


نکته : می توان در متن پيام کادرهای جاوا اسکريپت ، به تعداد مورد نياز خط جديد ايجاد کرد . برای اين منظور ، در متن پيام از کاراکتر ' \n ' به شرحی که در مثال زير آمده است ، استفاده می شود :


Example


< 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 ) کادر دريافت تاييد ( confirm Box ) :
از کادر دريافت تاييد ، برای اعلام يک پيام به کاربر و دريافت نظر آن مبنی بر قبول يا عدم قبول پيام مورد نظر استفاده می شود .
اين کادر دارای 2 دکمه فرمان OK و Cancel است ، که در صورت انتخاب گزينه OK ، کادر مقدار مثبت ( True ) و در صورت انتخاب گزينه Cancel ، کادر مقدار منفی ( False ) را به صفحه بر می گرداند .
شکل کلی تعريف يک کادر تاييد به صورت زير است :
confirm ( " متن پيام " ) ;
نکته مهم : از مقدار برگشتی يک کادر تاييد می توان در برنامه نويسی استفاده کرد . برای اين منظور بايد مقدار بازگشتی را در يک متغير به شکل زير ذخيره کرده و سپس از آن متغير استفاده کرد . به مثال دقت کنيد :
نام متغير = confirm ( "متن پيام" ) ;
مثال : در مثال زير يک تابع با يک کادر تاييد ، قرار داده شده است . اين تابع با دکمه فرمان btnChange ، فراخوانی می شود و کادر تاييد خود را نشان می دهد . کادر از کاربر درباره رفتن به صفحه اصلی سايت می پرسد ، که در صورت تاييد و فشردن دکمه OK مروگر به صفحه اصلی رفته و در صورت زدن دکمه Cancel يک پيام در خروجی چاپ می کند :


Example


< 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( )" />

کد




خروجی



3 ) کادر دريافت ورودی ( prompt Box )
از کادر دريافت ورودی ، برای اعلام يک پيام به کاربر و دريافت يک ورودی از وی استفاده می شود . در اين حالت يک کادر حاوی پيام مورد نظر ، يک کنترل متنی برای ورود مقدار ، دکمه OK برای تاييد و ارسال مقدار ورودی به صفحه و دکمه Cancel برای لغو عمليات کادر ، بر روی صفحه نمايش داده می شود .
همچنين می توان يک مقدار پيش فرض نيز در کادر تعيين کرد ، که هموراه به صورت پيش فرض در کنترل متنی کادر نمايش داده خواهد شد . تعيين مقدار پيش فرض اختياری است .
شکل کلی تعريف يک کادر دريافت ورودی سه صورت زير است :
prompt ( " مقدار پيش فرض " , " متن پيام کادر" ) ;
مثال : در مثال زير يک کادر دريافت ورودی ، برای دريافت نام کاربر در تابع Hello_User تعريف شده است . اين تابع با کليک بر روی دکمه فرمان Enter Name فراخوانی شده و سپس با دريافت نام کاربر يک پيام خوش آمد به کاربر در خروجی اعلام می کند . برای مشاهده خروجی بروی دکمه فرمان Enter Name کليک کرده و سپس نام خود را در کادر وارد کنيد :


Example


< 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 در نظر گرفته شده است . برای مشاهده خروجی بروی دکمه فرمان کليک کرده و سپس نام مقصد را انتخاب کنيد . در صورت وارد کردن اسم نادرست ، يک کادر هشدار ظاهر خواهد شد :


Example


< 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" />
کد




خروجی



- - - به روز رسانی شده - - -

منوهای Pop-Up در جاوا اسکريپت :



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


کادر پيام يا هشدار ( alert Box )
کادر دريافت تاييد (confirm Box )
کادر دريافت ورودی ( prompt Box )

در ادامه به معرفی و توضيح هر يک از کادرهای فوق می پردازيم :
1 ) کادر پيام يا هشدار ( alert Box)
از کادر alert Box :
از کادر alert Box ، برای اعلام يک پيام يا هشدار به کاربر استفاده می شود . اين پيام که از قبل بايد تعيين شده باشد ،در يک کادر ظاهر شده و تا زمانی که کاربر دکمه Ok را انتخاب نکند ، از بين نمی رود .
شکل کلی تعريف يک کادر منتی به صورت زير است :
alert ( " متن پيام يا هشدار " ) ;
مثال : در مثال زير يک کادر alert Box در تابع Alert_Box تعريف شده است . اين تابع توسط دکمه فرمان ! Alert ، فراخوانی شده و کادر پيام خود را ظاهر می کند .


Example


< script type="text/javascript" >
function Alert_Box ( )
{
alert ( " Welcome To DeveloperStudio " ) ;
}
</script>

<input type="button" id="btnAlert" value=" Alert ! " onclick="Alert_Box( )" />
کد




خروجی


مثال 2 : در مثال زير يک کادر متن و يک دکمه فرمان قرار داده شده است . کاربر بايد يک عدد را در کادر متن وارد کرده و بر روی دکمه فرمان کليک کند . چنانچه عدد ورودی از 10 کمتر باشد ، برنامه عبارت Welcome to DeveloperStdio را در خروجی چاپ کرده و در غير اين صورت يک کادر پيام با متن Number too big را به کاربر نشان می کند .


Example


< 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()" />
کد


Enter Number :

خروجی


نکته : می توان در متن پيام کادرهای جاوا اسکريپت ، به تعداد مورد نياز خط جديد ايجاد کرد . برای اين منظور ، در متن پيام از کاراکتر ' \n ' به شرحی که در مثال زير آمده است ، استفاده می شود :


Example


< 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 ) کادر دريافت تاييد ( confirm Box ) :
از کادر دريافت تاييد ، برای اعلام يک پيام به کاربر و دريافت نظر آن مبنی بر قبول يا عدم قبول پيام مورد نظر استفاده می شود .
اين کادر دارای 2 دکمه فرمان OK و Cancel است ، که در صورت انتخاب گزينه OK ، کادر مقدار مثبت ( True ) و در صورت انتخاب گزينه Cancel ، کادر مقدار منفی ( False ) را به صفحه بر می گرداند .
شکل کلی تعريف يک کادر تاييد به صورت زير است :
confirm ( " متن پيام " ) ;
نکته مهم : از مقدار برگشتی يک کادر تاييد می توان در برنامه نويسی استفاده کرد . برای اين منظور بايد مقدار بازگشتی را در يک متغير به شکل زير ذخيره کرده و سپس از آن متغير استفاده کرد . به مثال دقت کنيد :
نام متغير = confirm ( "متن پيام" ) ;
مثال : در مثال زير يک تابع با يک کادر تاييد ، قرار داده شده است . اين تابع با دکمه فرمان btnChange ، فراخوانی می شود و کادر تاييد خود را نشان می دهد . کادر از کاربر درباره رفتن به صفحه اصلی سايت می پرسد ، که در صورت تاييد و فشردن دکمه OK مروگر به صفحه اصلی رفته و در صورت زدن دکمه Cancel يک پيام در خروجی چاپ می کند :


Example


< 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( )" />

کد




خروجی



3 ) کادر دريافت ورودی ( prompt Box )
از کادر دريافت ورودی ، برای اعلام يک پيام به کاربر و دريافت يک ورودی از وی استفاده می شود . در اين حالت يک کادر حاوی پيام مورد نظر ، يک کنترل متنی برای ورود مقدار ، دکمه OK برای تاييد و ارسال مقدار ورودی به صفحه و دکمه Cancel برای لغو عمليات کادر ، بر روی صفحه نمايش داده می شود .
همچنين می توان يک مقدار پيش فرض نيز در کادر تعيين کرد ، که هموراه به صورت پيش فرض در کنترل متنی کادر نمايش داده خواهد شد . تعيين مقدار پيش فرض اختياری است .
شکل کلی تعريف يک کادر دريافت ورودی سه صورت زير است :
prompt ( " مقدار پيش فرض " , " متن پيام کادر" ) ;
مثال : در مثال زير يک کادر دريافت ورودی ، برای دريافت نام کاربر در تابع Hello_User تعريف شده است . اين تابع با کليک بر روی دکمه فرمان Enter Name فراخوانی شده و سپس با دريافت نام کاربر يک پيام خوش آمد به کاربر در خروجی اعلام می کند . برای مشاهده خروجی بروی دکمه فرمان Enter Name کليک کرده و سپس نام خود را در کادر وارد کنيد :


Example


< 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 در نظر گرفته شده است . برای مشاهده خروجی بروی دکمه فرمان کليک کرده و سپس نام مقصد را انتخاب کنيد . در صورت وارد کردن اسم نادرست ، يک کادر هشدار ظاهر خواهد شد :


Example


< 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" />
کد




خروجی

["golbarg"]

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

مفهوم آرايه : آرايه مجموعه ای از متغيرهايي از يک نوع داده ای با نام يکسان است ، که هر کدام از اعضای آن توسط يک شمارنده ( انديس ) ، از يکديگر متمايز می شوند .
شمارنده هر عضو آرايه در يک براکت در مقابل نام آن تعيين شده ، که برای مقدار دهی و دسترسی به هر عضو آرايه از انديس آن استفاده می شود .
برای تعريف يک آرايه ، از واژه کليدی 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 >
کد


Ford
Nissan
خروجی


روش های مقدار دهی کلی اعضای يک آرایه :
تمام يا بخش هايي از اعصای يک آرايه را می توان در هنگام تعريف و يا بعد از آن مقدار دهی کرد . به طور کلی 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 >
کد

["golbarg"]

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



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



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

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


for (http://www.njavan.com/forum/Java_Script_for.aspx#for_loop)
while (http://www.njavan.com/forum/Java_Script_while.aspx#while_loop)

do ... while (http://www.njavan.com/forum/Java_Script_while.aspx#do_loop)
for ... in (http://www.njavan.com/forum/Java_Script_ForIn.aspx)




1 ) حلقه for :
از حلقه for ، زمانی استفاده می شود که می خواهيم مجموعه دستورالعمل های حلقه به تعداد دفعات معينی انجام شود .
اين حلقه در هنگام تعريف 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 >
کد


Line number is 1
Line number is 2
Line number is 3
Line number is 4
Line number is 5

خروجی


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


Example


< 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 : گام يک حلقه می تواند منفی يا کاهشی نيز باشد . در مثال زير شمارنده حلقه با هر بار اجرای حلقه يک واحد کاهش می يابد :


Example


< 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 برسد . در اين حالت اجرای حلقه متوقف شده و نتيجه خروجی بر روی صفحه چاپ می شود :


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( )" / >
کد


Number 1 : Number 2 :

خروجی

["golbarg"]

حلقه 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 >
کد


Line number is 1
Line number is 2
Line number is 3
Line number is 4
Line number is 5

خروجی


مثال 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( )" / >
کد


Number 1 : Number 2 :

خروجی



حلقه 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 >
کد


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 مقدار دهی شده است . می بينيم که با وجود اشتباه بودن و عدم برقراری شرط حلقه دستورات آن حداقل يکبار اجرا شده و خروجی توليد کرده است ، ولی سری دوم اجرای حلقه به دليل عدم برقراری شرط آن اجرا نشده است :


Example


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


Line number is 8

خروجی

["golbarg"]

حلقه 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 >
کد


Lesson 1 = HTML
Lesson 2 = CSS
Lesson 3 = Visual Basic
Lesson 4 = Java Script
Lesson 5 = ASP.NET

خروجی


- يک مثال مرتبط با دستور 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 >
کد


Lesson 1 = HTML
Lesson 2 = Visual Basic
Lesson 3 = ASP.NET

خروجی

["golbarg"]

دستورات 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 >
کد


Line number is 1
Line number is 2
Line number is 3

خروجی



دستور 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 >
کد


Line number is 1
Line number is 2
Line number is 4
Line number is 5

خروجی





- - - به روز رسانی شده - - -

ساختار دستوری 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 پارامتر ( آرگومان ) ، به شرح زير فراخوانی خواهد شد :


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 نشان نمی دهد :


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 ( "developer" ) ;
}
</script>

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



خروجی

["golbarg"]

مبحث شی گرايي در جاوا اسکريپت

مقدمه ای بر مبحث شی گرايي :



جاوا اسکريپت ، يک زبان برنامه نويسی شی گرا يا ( Object Oriented Programming ) است . اين زبان به برنامه نويس ، قابليت استفاده از اشيای پيش ساخته و يا تعريف و ايجاد اشيای جديد مورد نياز خود را می دهد .
توجه : در اين قسمت ، مروری کوتاه بر مفهوم برنامه نويسی شی گرا در جاوا اسکريپت و نحوه استفاده از آن خواهيم داشت . در قسمت های بعدی به معرفی انواع اشيا پيش ساخته در Java Script می پردازيم .
مفهوم کلاس :
کلاس ( class ) ، اساسی ترين مفهوم شی گرايي است . يک کلاس يک الگو يا چهارچوب از پيش تعريف شده است که اشيا ( objects ) از روی آن ساخته می شوند . هر کلاس مجموعه ای از خواص ( Properties ) و متدها ( Methods ) است ، که کلاس آنها را به اشيايي که از رویش ساخته می شوند ، به ارث می دهد .
يک کلاس همانند يک دستورالعمل يا نقشه برای ايجاد اشيای جديد مشتق شده از آن است . برای مثال موجوديت دانشجو در مجموعه دانشگاه يک کلاس است ، که هر دانشجو يک شی ساخته شده از روی آن است .
مثال 2 : متغيرهای متنی يا string ، يکی از کلاس های پيش ساخته در جاوااسکريپت است . در قسمت بعد با تمام خواص و متدهای آن آشنا خواهيد شد .
مفهوم شی :
هر شی ، يک نمونه ساخته شده از روی کلاس مادر است . شی خصوصيات و متدهای خود را از کلاس مادر به ارث می برد .
هر يک از خصوصيات يک شی ، در برگيرنده مقدار مختص به آن خاصيت برای آن شی است . به عبارت ديگر ، از هر يک از خواص يک کلاس ، يک نسخه يا کپی منحصر به فرد به هر شی اختصاص می يابد ، که مقدار آن با مقدارش برای ساير اشيای آن کلاس ، متمايز و منحصر به فرد است .
مثال : برای مثال ، هر دانشجو که از روی کلاس دانشجو ايجاد می شود ، دارای خاصيت های نام ، نام خواندگی ، شماره دانشجويي و ... غيره مخصوص به خود است . گرچه مقدار اين خواص در نمونه های مختلف دانشجوها ممکن است در برخی از آنها مثل نام يکسان و در برخی مثل شماره دانشجويي يکتا باشد ، ولی مقدار آن برای هر دانشجو جدا و متمايز است .
مفهوم متد :
متدها ، عمليات يا رفتارهايي است که اشيا يک کلاس می توانند انجام دهند .
مثال : برای مثال هر دانشجو که از روی کلاس دانشجو ساخته می شود ، دارای عمليات های يکسانی مثل ثبت نام ، انتخاب واحد و ... است .
نحوه تعريف يک کلاس و ايجاد يک شی جديد در جاوا اسکريپت :
در اينجا ، به معرفی يکی از روش های تعريف يک کلاس و ايجاد شی جديد از روی آن می پردازيم . سپس با نحوه دسترسی به خواص . متدهای اشيا ، آشنا خواهيم شد .
برای ايجاد يک کلاس ، از واژه کليدی function به شکل کلی زير استفاده می شود :
function نام کلاس ( Parameter1 , Parameter2 , ... )
{
this.نام خاصيت 1 = Parameter1 ;
this.نام خاصيت 2 = Parameter2 ;
.
.
.
}
توضيح : ابتدا واژه کليدی function را نوشته ، پس از آن نام کلاس ، که در سطح برنامه برای شناسايي و دسترسی به کلاس مورد نظر از آن استفاده می شود را تعيين می کنيم . به تعداد خواص مورد نظر برای اشيای کلاس ، در پرانتز جلوی نام کلاس ، پارامتر تعريف کرده ، تا در هنگام فراخوانی کلاس برای ايجاد شی جديد در برگيرنده مقادير لازم برای خواص شی باشند .
سپس در بدنه دستورات کلاس برای تعريف و مقدار دهی هر يک از خواص اشيای کلاس ، از وايه کليدی this به شکل کلی زير استفاده می شود :
this.نام پارامتر = نام خاصيت
واژه کليدی this ، در هر لحظه به شی جاری از کلاس که در آن لحظه در حال ساخت يا ويرايش است ، اشاره می کند .
پس از تعريف ساختار کلاس ، برای ايجاد يک شی جديد از حالت کلی زير استفاده می شود :
var نام شی جديد = function نام کلاس ( Parameter1 Value , Parameter2 Value , ... ) ;
برای دسترسی و مقدار دهی هر يک از خواص يک شی از روش کلی زير استفاده می شود :
نام خاصيت . نام شی
مثال : در مثال زير يک کلاس به نام student ايجاد کرده ايم . هر شی اين کلاس 3 خاصيت نام ( Name ) ، نام خواندگی ( Family ) و شماره دانشجويي ( ID ) را خواهد داشت . در هنگام فراخوانی کلاس برای ايجاد يک شی جديد ، مقادير اين 3 خاصيت به ترتيب به پارامترهای n , f و i ارسال خواهند شد .
در مثال ، پس از تعريف کلاس به ايجاد يک شی جديد به نام St1 و مقدار دهی خواص آن پرداخته ايم . سپس توسط سه دستور چاپ در خروجی مشخصات کامل دانشجو جديد را در خروجی چاپ کرده ايم . در انتها هم شماره دانشجويي ، دانشجو مذکور را دوباره مقدار دهی کرده و مقدار جديد آن را چاپ کرده ايم :


Example


<script type ="text/javascript">
function Student ( n , f , i )
{
this.Name = n ;
this.Family = f ;
this.ID = i ;
}
var St1 = new Student ( "Mehrdad" , "Fattahi" , 122092 ) ;
document.write ( "Name :" + St1.Name +"<br />");
document.write ( "Family : " + St1.Family +"<br />");
document.write ( "Studnet ID : " + St1 .ID +"<br />" );
St1.ID = 299302 ;
document.write ( "New Student ID : " + St1.ID ) ;
</script>
کد


Name :Mehrdad
Family : Fattahi
Studnet ID : 122092
New Student ID : 299302
خروجی