1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش Java Script

شروع موضوع توسط hector2141 ‏12/9/12 در انجمن Java Script

  1. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    [h=2]مقدمه و معرفی Java Script[/h] معرفی Java Script :
    در قسمت آموزش HTML ، با زبان طراحی صفحات وب آشنا شديد . به وسيله امکانات زبان HTML ، می توان انواع صفحات وب را با کليه اجزای مورد نياز از قبيل نوشته ها ، جداول ، تصاوير ، فرم ها و ... را ايجاد کرد . اما HTML صرفا يک زبان طراحی است و توانايي برنامه سازی ، کنترل فرم ها ، پاسخ به رويدادهای برنامه و عملکرد کاربر و ... را ندارد .
    به همين دليل بايد از يک زبان برنامه نويسی در صفحات وب استفاده کرد . Java Script يکی از زبان های برنامه نويسی اسکريپتی است ، که اولين بار توسط شرکت Netscape Communicator عرضه کننده مرورگر معروف Netscape ارائه شد و امروزه متداولترين زبان اسکريپت نويسی صفحات وب است .
    توجه : قبل از مطالعه قسمت آموزش Java Script ، شما بايد به طور کامل با زبان HTML و به خصوص تگ < script > آشنا باشيد . برای مطالعه قسمت های ذکر شده به بخش آموزش HTML و بخش آموزش تگ < script > برويد .
    خصوصيات مهم Java Script :

    • Java Script يک زبان برنامه نويسی اسکريپتی است . دستور العمل های زبان های اسکريپتی ، در کامپيوتر کاربر و توسط مرورگر اجرا شده و برای اجرا نيازی به برنامه کمکی خاصی ندارند . به اين زبان ها در اصطلاح طرف مشتری ( Client Side ) می گويند . در مقابل زبان های مثل ASP.NET ابتدا توسط سرور ارسال کننده وب اجرا شده و سپس نتايج خروجی به زبان HTML برای اجرا در مرورگر فرستاده می شود . به اين زبان ها در اصطلاح طرف سرور ( Server Side ) می گويند .
    • زبان های اسکريپتی ، جزء زبان های برنامه نويسی سبک هستند . اين زبان ها در هنگام اجرا فازی به نام کامپايل[SUP]*[/SUP] را طی نکرده و دستورات آن ها به صورت خط به خط اجرا می شوند .
    کامپايل : برنامه های نوشته شده به زبان های برنامه نويسی مثل 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 يک زبان ساده اسکريپت نويسی در مرورگر های وب است .
     
  2. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش Java Script

    [h=2]دستورات مقدماتی Java Script[/h] نحوه تعريف دستورات Java Script در صفحه :
    برای تعريف و ايجاد يک اسکريپت ، از تگ < script > استفاده می شود . کليه دستورات مورد نظر اسکريپت ، درون تگ باز و بسته < script > تعريف شده و به عبارتی محدوده کدهای اسکريپت را تعيين می کند . در هر صفحه HTML ، می توان به تعداد مورد نياز از تگ < script > استفاده کرد ، که هر تگ به صورت مجموعه ای واحد برای خود عمل می کند .
    توجه : قبل از مطالعه قسمت آموزش Java Script ، شما بايد به طور کامل با زبان HTML و به خصوص تگ < script > آشنا باشيد . برای مطالعه قسمت های ذکر شده به بخش آموزش HTML و بخش آموزش تگ < script > برويد .
    مثال : در مثال زير يک اسکريت ساده در صفحه قرار داده شده است . به نکات زير دقت کنيد :

    • نکته 1 : علاوه بر Java Script ، زبان های اسکريپتی ديگر از قبيل VB Script يا EcmaScript نيز وجود دارند و در هر تگ < script > بايد به وسيله خاصيت Type نوع و زبان اسکريپتی مورد استفاده در ان اسکريپت را تعيين کرد . در مثال زير زبان اسکريپت Java Script و نوع آن متن تعيين شده است .
    • نکته 2 : در مثال زير از دستور document.write استفاده شده است . اين دستور برای نمايش يک متن خروجی که در پرانتز جلوی آن تعيين می شود ، در صفحه به کار می رود . در ادامه با شی document و خواص و متدهای آن آشنا خواهيد شد .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example
    [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < title > Title of Page عنوان صفحه < /title >
    < /head >
    < body >
    < script type="text/javascript" >
    document.write ( "This is an Script !" )
    < /script >
    < /body >
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] This is an Script !
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] انواع حالت های دستورات اسکريپتی :
    به طور کلی 2 حالت اسکريپت ( برنامه اجرايي ) در صفحات وب قابل پياده سازی است :

    1. اسکريپت های که می خواهيم به محض لود شدن صفحه ، اجرا شده و اثر خود را نمايش دهند . در اين حالت بايد اسکريپت ها را در قسمت < body > صفحه قرار داد .
    2. اسکريپت هايي که می خواهيم در هنگام بروز يک رويداد در صفحه ، مثل کليک بر روی يک دکمه خاص و ... اجرا شوند . به عبارت ديگر می خواهيم اجرای آنها کنترل شده باشد . در اين حالت دستورات اسکريپت را در قسمت < head > صفحه و یا در يک فايل خارجی تعريف کرد .
    نکته : گاهی اوقات می خواهيم از دستورات اسکريپتی يکسان و مشترک در تمام يا گروهی از صفحات يک وب سايت استفاده کنيم . در اين حالت برای جلوگيری از تکرار دستورات در تمام صفحه های مذکور ، کاهش حجم کد نويسی ، افزايش سرعت طراحی و اعمال تغييرات سريع و آسان به دستورات ، بهتر است همه آن اسکريپت ها را يکبار در يک فايل خارجی تعريف کرده و از آن به طور مشترک در تمام صفحات استفاده کرد . برای دريافت اطلاعات بيشتر به روش سوم قرار دهی اسکريپت در صفحات وب در پايين صفحه برويد .
    [HR][/HR] محل قرار دادن اسکريپت ها در صفحات وب :
    به طور کلی 3 روش برای قرار دادن اسکريپت ها در صفحات وب وجود دارد :
    1 ) درون محدوده اصلی صفحات HTML ، در قسمت تگ < body > :
    اسکريپت های تعريف شده در اين قسمت ، به محض بارگداری و نمايش صفحه اجرا شده و خروجی خود را توليد می کنند . اين نوع اسکريپت ها می توان در هر جای محدوه تگ < body > صفحات تعريف کرد . در اين نوع اسکريپت ها ، هيچ کنترلی از سوی کاربر برای اجرای آنها وجود ندارد ، مگر اينکه دستورات آن در قالب يک تابع ( function ) تعريف شده باشند ، که تا زمان فراخوانی آن تابع اجرا نخواهند شد . برای دريافت اطلاعات بيشتر در مورد توابع جاوا اسکريپت ، به قسمت تعريف توابع در جاوا اسکريپت برويد .
    مثال : در مثال زير يک اسکريپت ساده در قسمت تگ < body > صفحه ايجاد شده است . اين اسکريپت به محض لود شدن صفحه اجرا شده و خروجی خود را توليد می کند .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] This script is placed in the body section . [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    2 ) در قسمت تگ < head > :
    اسکريپت هايي که می خواهيم در هنگام بروز يک رويداد در صفحه مثل کليک بر روی يک دکمه و ... اجرا شوند ، را می توان در قسمت < head > تعريف کرد . دستورات اسکريپت های اين قسمت بايستی در قالب توابع تعريف شده باشند و تا زمانی که از سوی برنامه يا کاربر فراخوانی نشده باشند ، اجرا نخواهند شد . مزيت اين روش در اين است ، که اين اسکريپت ها قبل از اجرا توسط مرورگر لود شده اند . فراخوانی بايد توسط يک اسکريپت ديگر در قسمت تگ < body > صورت بگيرد .
    مثال : در مثال زير يک اسکريپت ساده در 2 حالت در قسمت تگ < head > صفحه تعريف شده است . در حالت اول به دليل عدم فراخوانی تابع اسکريپت ، آن اسکريپت هيچ گاه اجرا نخواهد شد . اما در حالت دوم تابع ()hello توسط رويداد onclick ( کليک ) دکمه فرمان فراخوانی شده و خروجی خود را نمايش می دهد . برای اجرای اسکريپت بر روی دکمه فرمان مثال کليک نماييد :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body, colspan: 2, align: right"] حالت 1 . در اين حالت به دليل عدم فراخوانی اسکريپت هيچ خروجی نداريم . [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [TR]
    [TD="class: body, colspan: 2, align: right"] حالت 2 . در اين حالت با فراخوانی اسکريپت توسط رويداد کليک دکمه فرمان ، دستور آن اجرا می شود . [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    3 ) در يک فايل خارجی JS :
    در اين حالت تمام اسکريپت های مورد نظر را در يک فايل خارجی متنی با پسوند JS ، تعريف کرده و سپس به وسيله تگ < script > در قسمت < head > صفحه ، بين آن فايل و صفحه لينک ايجاد می کنيم .
    از اين جالت معمولا در مواردی که بخواهيم کدهای اسکريپت را از محتويات صفحات HTML جدا کرده و يا از يک سری دستورات و توابع اسکريپتی مشترک در چند صفحه استفاده کنيم ، کاربرد دارد .
    اسکريپت های اين حالت بايد در قالب توابع مختلف تعريف شده و تا زمانی که از سوی برنامه يا کاربر فراخوانی نشوند ، اجرا نخواهند شد .

    مثال : در مثال زير ابتدا يک اسکريپت در يک فايل خارجی به نام myscript.js تعريف کرده و سپس بين صفحه و آن فايل ارتباط ايجاد کرده ايم . تابع ( ) hello2 توسط رويداد کليک دکمه فرمان فراخوانی و اجرا می شود . برای اجرای آن بر روی دکمه فرمان کليک کنيد :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header"] متن فايل myscript.js [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < script type="text/javascript" >
    function hello2 ( )
    {
    document.write ( "This script is placed in an external Java Script file . " )
    }
    < /script >
    [/TD]
    [/TR]
    [/TABLE]
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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>
    [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
  3. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش Java Script

    [h=2]دستورات مقدماتی Java Script[/h] نکات مهم در کد نويسی جاوا اسکريپت :
    1 ) جاوا اسکريپت به بزرگ يا کوچک بودن حروف حساس است ( بر خلاف HTML ) :
    در تعريف و نام گذاری توابع و متغيرها در جاوا اسکريپت بايد به بزرگ يا کوچک بودن حروف کاملا دقت کرد . تابع با نام "MyFunction" با تابع "myfunction" و متغير با نام "Matn" با متغير با نام "matn" متفاوت هستند .
    همچنين کليه دستورات جاوا اسکريپت بايد به صورت استاندارد تعيين شده ، با حروف بزرگ يا کوچک نوشته شود . عدم رعايت اين نکته باعث اجرا نشدن دستور و بروز خطا در صفحه می شود . هر يک از دستورات و کلمات کليدی در جاوا اسکريپت فقط به يک صورت ، که صورت استاندارد است بايد نوشته شوند .
    توجه : در مثال ها و کدهای بخش آموزش ، شکل صحيح نوشتاری کليه دستورات نمايش داده شده است .
    مثال 1 : در مثال زير 2 متغير با نام های يکسان ، ولی متفاوت در بزرگ يا کوچک بودن حروف به نام های "Matn" و "matn" ايجاد و مقدار دهی شده اند . خروجی کد نشان می دهد که اين دو متغير کاملا با هم متفاوت هستند و هر يک مقدار مخصوص به خود را دارند :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] <script type="text/javascript">
    var matn = "This is a Variable ." ;
    var Matn = "This is another Variable ." ;
    document.write ( matn ) ;
    document.write ( Matn ) ;
    </script> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] This is a Variable .This is another Variable . [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    مثال 2 : شکل صحيح نوشتن متد چاپ خروجی در جاوا اسکريپت به صورت documnet.write است . در مثال زير ابتدا دستور را به شکل نادرست و با حروف بزرگ به صورت Documnet.Write نوسته ايم ، که باعث ايجاد خطا در صفحه شده و خروجی نداريم . اما در حالت دوم آنرا به شکل صحيح نوشته ايم ، که خروجی درست را نيز مشاهده می کنيم :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: header, colspan: 2"] حالت اول ، شکل نادرست[/TD]
    [/TR]
    [TR]
    [TD="class: body"] <script type="text/javascript">
    var Str = "An Investigation for Development" ;
    Document.Write ( Str ) ;
    </script> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [TR]
    [TD="class: header, colspan: 2"] حالت دوم ، شکل صحيح[/TD]
    [/TR]
    [TR]
    [TD="class: body"] <script type="text/javascript">
    var Str = "An Investigation for Development" ;
    document.write ( Str ) ;
    </script> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] An Investigation for Development [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] 2 ) جاوا اسکريپت فواصل خالی اضافی در کد نويسی را ناديده می گيرد :
    به کار بردن فاصله خالی اضافی در بين کلمات کد های جاوا اسکريپت ، از سوی مرورگر ناديده گرفته شده و تاثيری ندارد . می توان برای خواناتر شدن برنامه ، بين کلمات فاصله اضافی ايجاد کرد .
    نکته : بين دستورات و کلمات کليدی بايد حداقل يک فاصله وجود داشته باشد ، در اينجا منظور از فاصله اضافی ، بيش از يک کاراکتر فاصله است .

    مثال : در مثال زير يک تک کد را در حالت اول بدون فاصله و در حالت دوم با فاصله بين کلمات نوشته ايم . همانطور که در خروجی مشخص است ، اين دو قطعه کد کاملا يکسان بوده و هيچ تفاوتی با هم ندارند :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 3"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] <script type="text/javascript">
    var StrName="Developer Studio";
    document.write(StrName);
    </script> [/TD]
    [TD="class: body"] <script type="text/javascript">
    var StrName = "Developer Studio" ;
    document.write ( StrName ) ;
    </script> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] Developer Studio [/TD]
    [TD="class: body"] Developer Studio [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] 3 ) نوشتن عبارت های متنی در بيش از يک خط :
    در هنگام تعريف و استفاده از عبارت های متنی در دستوراتی نظير document.write و ... ، می توان ادامه متن را به کمک يک کاراکتر \ به سطر بعدی انتقال داد . اين مسئله در زمانی که عبارت های متنی طولانی استفاده می شود ، کاربرد دارد .
    مثال : در مثال زير می خواهيم يک پيام را به کاربر اعلام کنيم . ولی به دليل طولانی بودن متن پيام تصميم گرفته ايم ، آن را در بخش کدنويسی در 2 خط تعريف کنيم ، اما می بينيم که مرورگر در خروجی آنرا در يک خط نشان می دهد :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] <script type="text/javascript">
    document.write ( "Java Script is a client side language . \
    It`s codes executes in the computer of visitor " ) ;
    </script> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] Java Script is a client side language . It`s codes executes in the computer of visitor [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] 4 ) درج توضيحات ( comments ) مورد نظر در بخش کد نويسی :
    در اسکريپت های نوشته شده به زبان جاوا اسکريپت ، می توان توضيحات مورد نظر را به صورت ويژه ای در درون کدها وارد کرد . اين توضيحات به طور کامل از سوی مرورگر ناديده گرفته شده و در خروجی نمايش داده نمی شوند . از توضيحات معمولا برای نشانه گذاری يا ارائه توضيحاتی راجع به کدهای برنامه استفاده می شود .
    دو نوع توضيح در جاوا اسکريپت می توان ايجاد کرد :

    1 . توضيحات يک خطی : اين توضيات به کمک دو بک اسلش // به صورت زير وارد می شود . توضيحات ارائه شده به اين صورت حداکثر می تواند در يک خط باشد . به مثال زير دقت کنيد . در اين مثال خط اول يک comment خط دوم يک دستور چاپ خروجی است . همانظور که در خروجی کد مشخص است ، دستور چاپ توسط مرورگر اجرا شده ولی comment نمايش دادده نمی شود :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] <script type="text/javascript">
    // this is a one line comment . navigator won`t show it .
    document.write ( "How to write a comment" ) ;
    </script> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] How to write a comment [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    2 . توضيحات چند خطی : با استفاده از يک نماد */ در ابتدای اولين خط توضيحات و يک نماد /* در آخرين خط توضيحات ، می توان توضيحات چند خطی در اسکريپت ها وارد کرد . از اين حالت برای ارائه توضيحات طولانی استفاده می شود . به مثال زير دقت کنيد . در اين مثال هم يک دستور و يک comment چند خطی قرار داده شده است . دستور توسط مرورگر اجرا شده ، ولی comment نمايش داده نمی شود :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] <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>
    [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] How to write a multi line comment [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
  4. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش Java Script

    [h=2]دستورات مقدماتی Java Script[/h] عملگرهای جاوا اسکريپت :
    در اين قسمت ، به معرفی و توضيح عملگرهای مورد استفاده در جاوا اسکريپت می پردازيم .
    توضيح عملوند : عملوند به متغيری گفته می شود ، که عملگر بر روی آن عمليات انجام می دهد .
    1 ) عملگرهای رياضی :
    [TABLE="class: pr"]
    [TR]
    [TD="class: prname"] عملگر [/TD]
    [TD="class: prname"] شرح [/TD]
    [TD="class: prname"] مثال [/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] + جمع [/TD]
    [TD="class: prbody"] دو عملوند خود را با هم جمع می کند .[/TD]
    [TD="class: prbody, align: left"] x = 2 y = 2 x + y = 4[/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] - تفريق [/TD]
    [TD="class: prbody"] دو عملوند خود از هم کم می کند .[/TD]
    [TD="class: prbody, align: left"] x = 4 y = 2 x - y = 2[/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] * ضرب [/TD]
    [TD="class: prbody"] دو عملوند خود را در هم ضرب می کند .[/TD]
    [TD="class: prbody, align: left"] x = 2 y = 3 x * y = 6[/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] / تقسيم [/TD]
    [TD="class: prbody"] عملوند اول خود را بر عملوند دوم تقسيم می کند .[/TD]
    [TD="class: prbody, align: left"] x = 6 y = 2 x / y = 3[/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] % باقی مانده [/TD]
    [TD="class: prbody"] باقی مانده حاصل از تقسيم عملوند اول بر عملوند دوم را محاسبه می کند .[/TD]
    [TD="class: prbody, align: left"] x = 8 y = 3 x % y = 2
    x = 15 y = 4 x % y = 3
    x = 9 y = 3 x % y = 0[/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] ++ افزاينده [/TD]
    [TD="class: prbody"] عملوند خود را يک واحد افزايش می دهد .[/TD]
    [TD="class: prbody, align: left"] x = 7 x++ x = 8[/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] - - کاهنده [/TD]
    [TD="class: prbody"] عملوند خود را يک واحد کاهش می دهد .[/TD]
    [TD="class: prbody, align: left"] x = 8 x- - x = 7[/TD]
    [/TR]
    [/TABLE]

    [HR][/HR] 2 ) عملگرهای انتسابی :
    از عملگرهای انتسابی ، برای نسبت دادن مقدار به يک متغير استفاده می شود .
    نکته : برخی از حالت های محاسبات متغيرها مثل x = x + y را می توان به صورت خلاصه تر به صورت x += y نوشت . در جدول زير انواع حالت های آن آمده است :
    [TABLE="class: pr"]
    [TR]
    [TD="class: prname"] عملگر [/TD]
    [TD="class: prname"] مثال [/TD]
    [TD="class: prname"] برابر است با [/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] = انتساب [/TD]
    [TD="class: prbody"] x = y يا x = 5 [/TD]
    [TD="class: prbody, align: left"] y = 5 x = y نتيجه : x = 5
    var x ; x = 5 (x انتساب مقدار 5 به ) [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] += جمع [/TD]
    [TD="class: body"] x += y [/TD]
    [TD="class: body"] x = x + y [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] - = تفريق [/TD]
    [TD="class: body"] x - = y [/TD]
    [TD="class: body"] x = x - y [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] *= ضرب [/TD]
    [TD="class: body"] x *= y [/TD]
    [TD="class: body"] x = x * y [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] /= تقسيم [/TD]
    [TD="class: body"] x /= y [/TD]
    [TD="class: body"] x = x / y [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] %= باقی مانده [/TD]
    [TD="class: body"] x %= y [/TD]
    [TD="class: body"] x = x % y [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] 3 ) عملگرهای مقايسه ای :
    از اين عملگرها برای مقايسه يک متغير با يک مقدار و يا مقايسه 2 متغير با هم استفاده می شود .
    [TABLE="class: pr"]
    [TR]
    [TD="class: prname"] عملگر [/TD]
    [TD="class: prname"] شرح [/TD]
    [TD="class: prname"] مثال [/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] = = تساوی [/TD]
    [TD="class: prbody"] امتحان برابری با يک مقدار يا يک متغير ديگر[/TD]
    [TD="class: prbody, align: left"] x = = y يا y = = 8[/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] = = = تساوی [/TD]
    [TD="class: prbody"] امتحان برابری با يک مقدار يا يک متغير ديگر هم از لحاظ مقدار و هم از لحاظ نوع داده ای [/TD]
    [TD="class: prbody, align: left"] x = = = y يا y = = = "8"
    مثال: x = 5 , y = "5" , اگر x = = = y نتيجه : غلط است [/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] ! = عدم تساوی [/TD]
    [TD="class: prbody"] امتحان عدم برابری با يک مقدار يا يک متغير ديگر [/TD]
    [TD="class: prbody, align: left"] x ! = y يا y ! = 4
    مثال : x = 5 , y = 6 , اگر x ! = y نتيجه : درست است [/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] > بزرگتر بودن [/TD]
    [TD="class: prbody"] امتحان بزرگتر بودن [/TD]
    [TD="class: prbody, align: left"] x > y يا y > 4
    مثال : x = 5 , y = 6 , اگر x > y نتيجه : غلط است [/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] < کوچکتر بودن [/TD]
    [TD="class: prbody"] امتحان کوچکتر بودن [/TD]
    [TD="class: prbody, align: left"] x < y يا y < 4
    مثال : x = 5 , y = 6 , اگر x < y نتيجه : درست است [/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] مساوی يا بزرگتر بودن >= [/TD]
    [TD="class: prbody"] امتحان مساوی يا بزرگتر بودن [/TD]
    [TD="class: prbody, align: left"] x >= y يا y >= 4
    مثال : x = 5 , y = 6 , اگر x >= y نتيجه : غلط است [/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] مساوی يا کوچکتر بودن <= [/TD]
    [TD="class: prbody"] امتحان مساوی يا کوچکتر بودن [/TD]
    [TD="class: prbody, align: left"] x < y يا y < 4
    مثال : x = 5 , y = 5 , اگر x <= y نتيجه : درست است
    مثال : x = 5 , y = 7 , اگر x <= y نتيجه : غلط است [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] 4 ) عملگرهای منطقی :
    از عکلگرهای منطقی برای ترکيب دو يا چند عبارت مقايسه ای يا شرطی با هم و ايجاد يک عبارت واحد استفاده می شود . در جدول زير انواع عملگرهای منطقی و شرايط درست بودن آنها توضيح داده شده است .
    [TABLE="class: pr"]
    [TR]
    [TD="class: prname"] عملگر [/TD]
    [TD="class: prname"] شرح [/TD]
    [TD="class: prname"] مثال [/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] && عملگر " و " [/TD]
    [TD="class: prbody"] اين عبارت برای ترکيب دو يا چند عبارت با هم استفاده می شود . نتيجه ترکيب اين عملگر فقط زمانی صحيح است ، که تمام عبارات ترکيب شده با هم درست باشند . [/TD]
    [TD="class: prbody, align: left"] مثال : x = 5 , y = 7 , اگر ( x < 3 && y > 9 ) نتيجه : غلط است
    مثال : x = 5 , y = 7 , اگر ( x < 6 && y > 8 ) نتيجه : درست است [/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] || عملگر " يا " [/TD]
    [TD="class: prbody"] اين عبارت برای ترکيب دو يا چند عبارت با هم استفاده می شود . نتيجه ترکيب اين عملگر در صورت درست بودن حداقل يکی از عبارات ترکيب شده ، درست خواهد بود. [/TD]
    [TD="class: prbody, align: left"] مثال : x = 5 , y = 7 , اگر ( x < 3 || y > 4 ) نتيجه : درست است
    مثال : x = 5 , y = 7 , اگر ( x < 3 || y > 8 ) نتيجه : غلط است [/TD]
    [/TR]
    [TR]
    [TD="class: prbody, align: center"] ! عملگر not [/TD]
    [TD="class: prbody"] اين عملگر برای بر عکس کردن درستی يا عدم درستی يک عبارت استفاده می شود . استفاده اين عملگر قبل از يک عبارت صحيح باعث نادرست شدن جواب و برعکس خوهد شد . [/TD]
    [TD="class: prbody, align: left"] مثال : x = 5 , y = 5 , اگر ! ( x == y ) نتيجه : غلط است
    مثال : x = 5 , y = 7 , اگر ! ( x == y ) نتيجه : درست است
    [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] 5 ) عملگر رشته ای :
    متغيرهای رشته ای متغير هایي هستند ، که از متن تشکيل شده اند . اين متغيرها را همانطور که قبلا اشاره شد ، بايد بين دو علامت " " تعريف کرد .
    در جاوا اسکريپت می توان دو متغير رشته ای را با عملگر + به هم اضافه کرد . همچنين برای ايجاد فاصله بين متغيرهای می توان از يک " " به شکلی که در مثال زير آمده است ، استفاده کرد .

    مثال : در مثال زير دو عبارت رشته ای matn1 و matn2 را در قالب يک متغير جديد به نام welcome ذخيره کرده ايم :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < script type="text/javascript" >
    var matn1 = "Welcome to" ;
    var matn2 = "Developer Studio" ;
    var welcome = matn1 + " " + matn2 ;
    document.write (welcome) ;
    < /script >
    [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] Welcome to Developer Studio [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
  5. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش Java Script

    [h=2]دستورات مقدماتی Java Script[/h] نمايش کاراکترهای خاص در جاوا اسکريپت :
    در کد نويسی دستورات جاوا اسکريپت ، از برخی از کاراکترها به منظور ويژه های استفاده می کنيم . برای مثال از کاراکتر " برای شروع يک عبارت متنی در دستوراتی نظير document.write و ... استفاده می شود . به کار بردن مستقيم چنين کاراکترهای در عبارت های متنی باعث تداخل با کدهای برنامه و بروز خطا و خروجی نامناسب می شود .
    برای نمايش چنين کاراکترهايي در عبارت های متنی ، بايد از يک کاراکتر \ قبل از کاراکتر مورد نظر استفاده کرد .
    مثال : برای مثال می خواهيم در اسکريپت زير يک پيام به کاربر اعلام کنيم . می خواهيم در متن پيام ، عبارت Developer Studio در بين دو کاراکتر " " قرار بگيرد .در حالت اما به دليل تداخل اين کاراکتر ها با شکل دستوری آنها در دستور document.write ، می بينيم که دارای خروجی نادست بوده و پیام فقط خروجی بر روی صفحه چاپ نمی شود . در حالت دوم از يک \ قبل از " استفاده شده و می بينیم که دراری خروجی مورد نظر هستيم و پيام به شکل صحيح نمايش داده شده است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: header, colspan: 2"] حالت اول ، شکل نادرست[/TD]
    [/TR]
    [TR]
    [TD="class: body"] <script type="text/javascript">
    var matn = "Hello Welcome to "developer Studio " a website for Developers" ;
    document.write ( matn ) ;
    </script> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [TR]
    [TD="class: header, colspan: 2"] حالت دوم ، شکل صحيح[/TD]
    [/TR]
    [TR]
    [TD="class: body"] <script type="text/javascript">
    var matn = "Hello Welcome to \"developer Studio\" a website for Developers" ;
    document.write ( matn ) ;
    </script> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] Hello Welcome to "developer Studio" a website for Developers [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    ايجاد يک خط جديد در نوشته :
    می توان در متن نوشته ی کادر های Pop-Up در جاوا اسکريپت ، نوشته را به سطر پايين انتقال داد . برای اين منظور از يک کاراکتر n\ استفاده می شود . هر بار استفاده از اين کاراکتر باعث انتقال نوشته به يک سطر پايين تر می شود .
    مثال : در مثال زيرمتن پيام يک کادر اخطار اسکريپت را در 4 خط نمايش داده ايم .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] <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( )" /> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    ساير کاراکترها :
    ساير کاراکترهايي که برای نمايش آنها بايد از روش فوق استفاده کرد ، به همراه توضيح آنها در جدول زير آمده اند :
    [TABLE="class: pr, width: 100%"]
    [TR]
    [TD="class: prdes"] شرح [/TD]
    [TD="class: prname"] خروجی[/TD]
    [TD="class: prname"] نحوه استفاده[/TD]
    [/TR]
    [TR]
    [TD="class: prbody"] علامت نقل قول تکی ' [/TD]
    [TD="class: prbody, align: center"] ' [/TD]
    [TD="class: prbody, align: center"] \' [/TD]
    [/TR]
    [TR]
    [TD="class: prbody"] علامت نقل قول جفتی " [/TD]
    [TD="class: prbody, align: center"] " [/TD]
    [TD="class: prbody, align: center"] \" [/TD]
    [/TR]
    [TR]
    [TD="class: prbody"] علامت و در انگليسی & [/TD]
    [TD="class: prbody, align: center"] & [/TD]
    [TD="class: prbody, align: center"] \& [/TD]
    [/TR]
    [TR]
    [TD="class: prbody"] علامت اسلش در متن \ [/TD]
    [TD="class: prbody, align: center"] \ [/TD]
    [TD="class: prbody, align: center"] \\ [/TD]
    [/TR]
    [TR]
    [TD="class: prbody"] رفتن به خط جديد در متن [/TD]
    [TD="class: prbody, align: center"] [/TD]
    [TD="class: prbody, align: center"] \n [/TD]
    [/TR]
    [/TABLE]
     
  6. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش Java Script

    [h=2]دستوات مقدماتی Java Script[/h] ساختارهای شرطی در جاوا اسکريپت :
    از ساختارهای شرطی در زمانی استفاده می شود که بخواهيم در صورت بر قرار بودن شرط يا شرط هايي ، يکسری دستورات خاص اجرا شده و در صورت عدم بر قراری آنها گروه ديگری از دستورات اجرا شوند .
    بر حسب شرايط می توان از يکی از ساختارهای دستوری زير استفاده کرد :
    توجه : * Condition = شرط يا شروط * Statment = دستور يا دستورات
    1 ) if ( Condition ) Statment :
    از اين ساختار در مواقعی که می خواهيم در صورت بر قرار بودن شرط يا شرط هايي يکسری دستورات خاص اجرا شوند ، استفاده می شود . در اين حالت در صورت عدم بر قراری شرط هاي تعيين شده ، هيچ دستوری اجرا نخواهد شد .
    شکل کلی استفاده از اين ساختار به صورت زير است :

    if ( شرط يا شروط )
    {
    دستورات مورد نظر که در صورت برقرار بودن شرط ها اجرا می شوند
    }

    مثال : در مثال زير متغير عددی IntNum يکبار با عددی بيش از 10 و يکبار با عددی کوچکتر از 10 مقدار دهی شده است . شرط دستور if اين است ، که در هنگام بزرگتر بودن IntNum از عدد 10 پيغام "This Number is bigger than 10" و در هنگام کوچکتر بودن آن از عدد 10 ، هيچ خروجی چاپ نشود . به مثال دقت کنيد :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body, colspan: 2, align: right"] در حالت اول به دليل بزرگتر بودن عدد IntNum از 10 ، پيغام خروجی بر روی صفحه چاپ می شود . [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < script type="text/javascript" >
    var IntNum = 18
    if ( IntNum > 10 )
    {
    document.write (" This Number is bigger than 10 ")
    }
    < /script > [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] This Number is bigger than 10 [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [TR]
    [TD="class: body, colspan: 2, align: right"] در حالت دوم به دليل کوچکتر بودن عدد IntNum از 10 ، هيچ پيغام خروجی بر روی صفحه چاپ نمی شود . [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < script type="text/javascript" >
    var IntNum = 8
    if ( IntNum > 10 )
    {
    document.write (" This Number is bigger than 10 ")
    }
    < /script > [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] 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" چاپ شود . به مثال دقت کنيد :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body, colspan: 2, align: right"] در حالت اول به دليل بزرگتر بودن عدد IntNum از 10 ، پيغام خروجی قسمت if بر روی صفحه چاپ می شود . [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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 > [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] This Number is bigger than 10 [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [TR]
    [TD="class: body, colspan: 2, align: right"] در حالت دوم به دليل کوچکتر بودن عدد IntNum از 10 ، پيغام قسمت else بر روی صفحه چاپ می شود . [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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 > [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] This Number is smaller than 10 [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    * عملگر شرطی :
    دستور if تک شرطی را مانند يک عملگر می توان به صورت زير نيز نوشت .
    در اين حالت برنامه شرط معرفی شده در پرانتز را چک کرده و در صورت درست بودن آن شرط ، مقدار 1 و در صورت درست نبودن آن مقدار 2 را به متغير نسبت می دهد .
    شکل کلی استفاده از اين ساختار به سورت زير است :

    نام متغير = ( شرط ) ؟ مقدار 1 : مقدار 2
    variable name = ( condition ) ? value 1 : value 2 ;

    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] var name = ( x > 10 ) ? sam : david [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] در مثال بالا اگر مقدار متغير x از 10 بيشتر باشد ، مقدار متغير name برابر sam و در صورت کوچکتر بودن مقدار x از 10 ، name برابر david می شود . [/TD]
    [TD="class: header"] توضيح [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] 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 را نمايش می دهد .

    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: hesder, colspan: 2, align: right"] نکات مهم : نکات زير در مثال با شماره مشخص شده اند .
    1. خاصيت value در يک کادر متن به متن موجود در آن کنترل اشاره می کند . در اينجا ما متن موجود در کنترل txtinput را در متغير matn ذخيره کرده ايم .
    2. رويداد onclick رويدادی است که در هنگام کليک بر روی يک کنترل فعال می شود . برای فراخوانی يک تابع توسط يک کنترل ، نام آن تابع را در رويداد onclick کنترل قرار می دهيم .
    [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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 > [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] [TABLE="width: 100%"]
    [TR]
    [TD="align: center"] [/TD]
    [TD="align: center"] [/TD]
    [TD="align: center"]
    [/TD]
    [/TR]
    [/TABLE]
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
  7. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش Java Script

    [h=2]دستورات مقدماتی Java Script[/h] ساختار کنترلی 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 های ساختار ، دستورات آن قسمت اجرا خواهد شد .

    نکات مهم :

    1. نوع متغير تعيين شده در قسمت switch و مقدارهای هر يک از case ها بايد با هم يکسان و از يک نوع باشند .
    2. به تعداد مورد نياز می توان از دستور case در ساختار switch استفاده کرد .
    3. تعيين قسمت default در ساختار switch ، اختياری است و می تواند تعيين نشود .
    4. مقدار هيچ دو case متفاوتی ، نبايد با هم يکسان باشد .
    مثال : در مثال زير دو کادر متن و يک دکمه فرمان قرار داده شده است . کادر متن اول يک متن يا عدد از کاربر دريافت کرده و با کليک بر روی دکمه فرمان و فراخوانی تابع ( ) hello ، خروجی در کادر متن دوم نمايش داده می شود .
    عملکرد تابع ( ) hello به شرح زير است :
    اين تابع مقدار کنترل کادر متن اول يعنی txtinput ، را در متغير matn ذخيره کرده و سپس در يک ساختار switch ،بر حسب مقادير مختلف خروجی را در کادر متن دوم يعنی txtresult نمايش می دهد .
    توجه : در اينجا به دليل عدم استفاده از دستور break در پايان دستورات هر case با اجرای هر کدام از case های مثال ، دستورات بقيه case ها نيز اجرا می شود . بنابراين همواره خروجی ما در اين حالت خروجی قسمت default است .

    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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 > [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] [TABLE="width: 100%"]
    [TR]
    [TD] txtinput : [/TD]
    [TD] [/TD]
    [TD] txtresult : [/TD]
    [/TR]
    [/TABLE]
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] دستور 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 متنی را وارد کرده و سپس بر روی دکمه فرمان کليک کنيد .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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 > [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] [TABLE="width: 100%"]
    [TR]
    [TD] txtinput : [/TD]
    [TD] [/TD]
    [TD] txtresult : [/TD]
    [/TR]
    [/TABLE]
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
  8. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش Java Script

    [h=2]دستورات مقدماتی Java Script[/h] توابع در جاوا اسکريپت :
    تعريف تابع :
    تعريف تابع : يک تابع مجموعه ای واحد از يکسری دستورالعمل است که در هر بار فراخوانی ، کل دستورات درون آن يکبار اجرا می شود .
    می دانيم که هر برنامه کامپيوتری ، شامل مجموعه ای از دستوالعمل هاست . از توابع برای شکستن و تقسيم کردن کل برنامه به واحدهای کوچکتر و مستقل استفاده می شود .
    [HR][/HR] قابليت های تابع :
    استفاده از توابع در صفحات و اسکريپت ها ، امکانات زير را به برنامه نويس می دهد :

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

    مثال :در مثال زير يک تابع به نام welcome ، تعريف شده است . اين تابع تا زمانی که فراخوانی نشود اجرا نشده و خروجی ندارد .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < script type="text/javascript" >
    function welcome( )
    {
    document.write ( "welcome to DeveloperStudio" )
    }
    < /script > [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] نحوه فراخوانی تابع :
    يک تابع را به شرطی که قبل از آن به طور کامل تعريف شده باشد ، می توان از هر جای صفحه فراخوانی کرد . برای فراخوانی يک تابع ، از نام تابع به همراه يک پرانتز باز و بسته در مقابل نام آن به صورت زير عمل می شود :
    نام تابع ( ) ;
    مثال :در مثال زير تابع welcome را که در مثال قبل نيز استفاده کرده بوديم را توسط يک اسکريپت ديگر فراخوانی کرده ايم .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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 > [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] welcome to DeveloperStudio [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    نکته : يک تابع را می توان توسط رويدادهای يک کنترل HTML مثل يک دکمه فرمان نيز فراخوانی کرد . در اين حالت بايد مقدار رويداد مورد نظر را در تگ کنترل ، برابر نام تابع در نظر گرفت . به مثال زير دقت کنيد .
    مثال : در مثال زير تابع welcome که در مثال قبل توسط يک اسکريپت ديگر فراخوانی شده بود ، در اينجا توسط رويداد کليک ( onclick ) دکمه فرمان btnclick فراخوانی می شود . برای فراخوانی تابع بر روی دکمه فرمان مثال کليک کنيد .

    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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 > [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] نحوه تعريف پارامتر برای يک تابع :
    تعريف پارامتر :پارامتر ، يک متغير است که می توان در هنگام فراخوانی يک تابع ، مقدار آن را به تابع ارجاع داد . به پارامتر ، آرگومان نيز می گويند .
    يک تابع می تواند ، چندين متغير را به عنوان پارامتر ورودی دريتفت کند . پارامترهای يک تابع را بايد در هنگام تعريف تابع ، در پرانتز مقابل نام آن تعيين کرد ، که پارامترها را با کاما از هم جدا می کنيم .
    در هنگام فراخوانی يک تابع که دارای پارامتر است ، بايد در پرانتز مقابل نام آن ، مقادير متناظر با پارامترهايش را اعلام کرد . اين پارامترها بايد از لحاظ تعداد و نوع کاملا يکسان با پارامترهای تعريف شده در تابع باشند .

    شکل کلی تعريف پارامتر برای يک تابع بع صورت زير است :

    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 کليکگ کنيد .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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" />
    [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] Number 1 : Number 2 :
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] نحوه تعريف مقدار بازگشی برای يک تابع :
    يک تابع می تواند پس از انجام دستورات در نظر گرفته شده برای آن ، مقداری را به عنوان خروجی به نقطه ای که از آن فراخوانی شده است ، باز گرداند .
    برای تعيين مقدار بازگشتی يک تابع از دستور return استفاده کرده ، که مقدار خروجی را درپرانتز مقابل آن دستور به شکل زير تعريف می کنيم .

    return ( مقدار بازگشتی ) ;
    نکته : مقدار بازگشتی ، می تواند يک رشتته يا عدد ، يک متغير و يا يک عبارت محاسباتی باشد .
    مثال : تابع multiple را در مثال قبل با دستور return بازنويسی کرده ايم . در اين حالت تابع به جای استفاده از دستور document.write با دستور return ، مقدار را برای چاپ خروجی به تابع Call_Function بر می گرداند :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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" />
    [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] Number 1 : Number 2 :
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
  9. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش Java Script

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

    1. کادر پيام يا هشدار ( alert Box )
    2. کادر دريافت تاييد (confirm Box )
    3. کادر دريافت ورودی ( prompt Box )
    در ادامه به معرفی و توضيح هر يک از کادرهای فوق می پردازيم :
    [HR][/HR] 1 ) کادر پيام يا هشدار ( alert Box)
    از کادر alert Box :
    از کادر alert Box ، برای اعلام يک پيام يا هشدار به کاربر استفاده می شود . اين پيام که از قبل بايد تعيين شده باشد ،در يک کادر ظاهر شده و تا زمانی که کاربر دکمه Ok را انتخاب نکند ، از بين نمی رود .
    شکل کلی تعريف يک کادر منتی به صورت زير است :
    alert ( " متن پيام يا هشدار " ) ;
    مثال : در مثال زير يک کادر alert Box در تابع Alert_Box تعريف شده است . اين تابع توسط دکمه فرمان ! Alert ، فراخوانی شده و کادر پيام خود را ظاهر می کند .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < script type="text/javascript" >
    function Alert_Box ( )
    {
    alert ( " Welcome To DeveloperStudio " ) ;
    }
    </script>

    <input type="button" id="btnAlert" value=" Alert ! " onclick="Alert_Box( )" /> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    مثال 2 : در مثال زير يک کادر متن و يک دکمه فرمان قرار داده شده است . کاربر بايد يک عدد را در کادر متن وارد کرده و بر روی دکمه فرمان کليک کند . چنانچه عدد ورودی از 10 کمتر باشد ، برنامه عبارت Welcome to DeveloperStdio را در خروجی چاپ کرده و در غير اين صورت يک کادر پيام با متن Number too big را به کاربر نشان می کند .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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="Text1" / >
    < input type="button" id="btnAlert2" value=" Alert ! " onclick="Alert_Box2()" /> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] Enter Number :
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    نکته : می توان در متن پيام کادرهای جاوا اسکريپت ، به تعداد مورد نياز خط جديد ايجاد کرد . برای اين منظور ، در متن پيام از کاراکتر ' \n ' به شرحی که در مثال زير آمده است ، استفاده می شود :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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()" /> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] 2 ) کادر دريافت تاييد ( confirm Box ) :
    از کادر دريافت تاييد ، برای اعلام يک پيام به کاربر و دريافت نظر آن مبنی بر قبول يا عدم قبول پيام مورد نظر استفاده می شود .
    اين کادر دارای 2 دکمه فرمان OK و Cancel است ، که در صورت انتخاب گزينه OK ، کادر مقدار مثبت ( True ) و در صورت انتخاب گزينه Cancel ، کادر مقدار منفی ( False ) را به صفحه بر می گرداند .
    شکل کلی تعريف يک کادر تاييد به صورت زير است :

    confirm ( " متن پيام " ) ;
    نکته مهم : از مقدار برگشتی يک کادر تاييد می توان در برنامه نويسی استفاده کرد . برای اين منظور بايد مقدار بازگشتی را در يک متغير به شکل زير ذخيره کرده و سپس از آن متغير استفاده کرد . به مثال دقت کنيد :
    نام متغير = confirm ( "متن پيام" ) ;
    مثال : در مثال زير يک تابع با يک کادر تاييد ، قرار داده شده است . اين تابع با دکمه فرمان btnChange ، فراخوانی می شود و کادر تاييد خود را نشان می دهد . کادر از کاربر درباره رفتن به صفحه اصلی سايت می پرسد ، که در صورت تاييد و فشردن دکمه OK مروگر به صفحه اصلی رفته و در صورت زدن دکمه Cancel يک پيام در خروجی چاپ می کند :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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( )" />
    [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] 3 ) کادر دريافت ورودی ( prompt Box )
    از کادر دريافت ورودی ، برای اعلام يک پيام به کاربر و دريافت يک ورودی از وی استفاده می شود . در اين حالت يک کادر حاوی پيام مورد نظر ، يک کنترل متنی برای ورود مقدار ، دکمه OK برای تاييد و ارسال مقدار ورودی به صفحه و دکمه Cancel برای لغو عمليات کادر ، بر روی صفحه نمايش داده می شود .
    همچنين می توان يک مقدار پيش فرض نيز در کادر تعيين کرد ، که هموراه به صورت پيش فرض در کنترل متنی کادر نمايش داده خواهد شد . تعيين مقدار پيش فرض اختياری است .
    شکل کلی تعريف يک کادر دريافت ورودی سه صورت زير است :

    prompt ( " مقدار پيش فرض " , " متن پيام کادر" ) ;
    مثال : در مثال زير يک کادر دريافت ورودی ، برای دريافت نام کاربر در تابع Hello_User تعريف شده است . اين تابع با کليک بر روی دکمه فرمان Enter Name فراخوانی شده و سپس با دريافت نام کاربر يک پيام خوش آمد به کاربر در خروجی اعلام می کند . برای مشاهده خروجی بروی دکمه فرمان Enter Name کليک کرده و سپس نام خود را در کادر وارد کنيد :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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" /> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    مثال : در مثاب زير يک کادر دريافت تاييد در تابع Change_page تعريف شده است . اين کادر يک ورودی ، که نام يکی از بخش های آموزشی سايت DeveloperStudio است ، را از کاربر دريافت کرده و سپس آدرس مرورگر را به آدرس مربوط با آن نام تغيير می دهد . در اين کادر مقدار پيش فرض Home Page در نظر گرفته شده است . برای مشاهده خروجی بروی دکمه فرمان کليک کرده و سپس نام مقصد را انتخاب کنيد . در صورت وارد کردن اسم نادرست ، يک کادر هشدار ظاهر خواهد شد :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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" /> [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
  10. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش Java Script

    [h=2]دستورات مقدماتی Java Script[/h] آرايه در جاوا اسکريپت :
    مفهوم آرايه : آرايه مجموعه ای از متغيرهايي از يک نوع داده ای با نام يکسان است ، که هر کدام از اعضای آن توسط يک شمارنده ( انديس ) ، از يکديگر متمايز می شوند .
    شمارنده هر عضو آرايه در يک براکت در مقابل نام آن تعيين شده ، که برای مقدار دهی و دسترسی به هر عضو آرايه از انديس آن استفاده می شود .
    برای تعريف يک آرايه ، از واژه کليدی 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" ;

    مثال : در مثال زير يک آرايه در يک اسکريپت تعريف شده و اعضای آن مقدار دهی شده اند . در پايان نيز عضو اول و دوم آرايه در خروجی بر روی صفحه چاپ شده اند :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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 > [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"] Ford
    Nissan [/TD]
    [TD="class: header"] خروجی[/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] روش های مقدار دهی کلی اعضای يک آرایه :
    تمام يا بخش هايي از اعصای يک آرايه را می توان در هنگام تعريف و يا بعد از آن مقدار دهی کرد . به طور کلی 2 روش برای مقدار دهی اعضای يک آرايه وجود دارد :
    روش اول : در روش اول ، هر يک از اعضای آرايه را به صورت تکی مقدار دهی می کنيم . در مثال زير يک ابتدا آرايه 4 عضوی تعريف شده و سپس مقدار دهی شده است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < script type="text/javascript" >
    var Cars = new Array ( 4 ) ;
    Cars [ 0 ] = "Ford" ;
    Cars [ 1 ] = "Nissan" ;
    Cars [ 2 ] = "Mazda" ;
    Cars [ 3 ] = "Volvo" ;
    < /script > [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [/TABLE]
    روش دوم : در روش دوم ، مقادير مورد نظر برای تمام يا تعدادی از اعضای آرایه را در پرانتز جلوی واژه کليدی new Array تعيين کرده و هر مقدار را با کاما از هم جدا می کنيم . در اين حالت تعداد اعضای آرایه به طور اتوماتيک بر حسب تعداد مقادير ورودی تعيين می شود . در مثال زير ، آرايه تعريف 4 عضو خواهد شد . اعضای اين آرایه در مرحله تعريف آرايه تعيين شده اند :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example[/TD]
    [/TR]
    [TR]
    [TD="class: body"] < script type="text/javascript" >
    var Cars = new Array ( "Ford" , "Nissan" , "Mazda" , "Volvo" ) ;
    < /script > [/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [/TABLE]