بنام خدا
نحوه تعريف دستورات 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 و خواص و متدهای آن آشنا خواهيد شد .
|
< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< /head >
< body >
< script type="text/javascript" >
( document.write ( "This is an Script !"
< /script >
< /body >
|
| This is an Script ! |
انواع حالت های دستورات اسکريپتی :
به طور کلی 2 حالت اسکريپت ( برنامه اجرايي ) در صفحات وب قابل پياده سازی است :
- اسکريپت های که می خواهيم به محض لود شدن صفحه ، اجرا شده و اثر خود را نمايش دهند . در اين حالت بايد اسکريپت ها را در قسمت < body > صفحه قرار داد .
- اسکريپت هايي که می خواهيم در هنگام بروز يک رويداد در صفحه ، مثل کليک بر روی يک دکمه خاص و ... اجرا شوند . به عبارت ديگر می خواهيم اجرای آنها کنترل شده باشد . در اين حالت دستورات اسکريپت را در قسمت < head > صفحه و یا در يک فايل خارجی تعريف کرد .
نکته : گاهی اوقات می خواهيم از دستورات اسکريپتی يکسان و مشترک در تمام يا گروهی از صفحات يک وب سايت استفاده کنيم . در اين حالت برای جلوگيری از تکرار دستورات در تمام صفحه های مذکور ، کاهش حجم کد نويسی ، افزايش سرعت طراحی و اعمال تغييرات سريع و آسان به دستورات ، بهتر است همه آن اسکريپت ها را يکبار در يک فايل خارجی تعريف کرده و از آن به طور مشترک در تمام صفحات استفاده کرد . برای دريافت اطلاعات بيشتر به روش سوم قرار دهی اسکريپت در صفحات وب در پايين صفحه برويد .
محل قرار دادن اسکريپت ها در صفحات وب :
به طور کلی 3 روش برای قرار دادن اسکريپت ها در صفحات وب وجود دارد :
1 ) درون محدوده اصلی صفحات HTML ، در قسمت تگ < body > :
اسکريپت های تعريف شده در اين قسمت ، به محض بارگداری و نمايش صفحه اجرا شده و خروجی خود را توليد می کنند . اين نوع اسکريپت ها می توان در هر جای محدوه تگ < body > صفحات تعريف کرد . در اين نوع اسکريپت ها ، هيچ کنترلی از سوی کاربر برای اجرای آنها وجود ندارد ، مگر اينکه دستورات آن در قالب يک تابع ( function ) تعريف شده باشند ، که تا زمان فراخوانی آن تابع اجرا نخواهند شد . برای دريافت اطلاعات بيشتر در مورد توابع جاوا اسکريپت ، به قسمت تعريف توابع در جاوا اسکريپت برويد .
مثال : در مثال زير يک اسکريپت ساده در قسمت تگ < 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 > |
| This script is placed in the body section . |
2 ) در قسمت تگ < head > :
اسکريپت هايي که می خواهيم در هنگام بروز يک رويداد در صفحه مثل کليک بر روی يک دکمه و ... اجرا شوند ، را می توان در قسمت < head > تعريف کرد . دستورات اسکريپت های اين قسمت بايستی در قالب توابع تعريف شده باشند و تا زمانی که از سوی برنامه يا کاربر فراخوانی نشده باشند ، اجرا نخواهند شد . مزيت اين روش در اين است ، که اين اسکريپت ها قبل از اجرا توسط مرورگر لود شده اند . فراخوانی بايد توسط يک اسکريپت ديگر در قسمت تگ < body > صورت بگيرد .
مثال : در مثال زير يک اسکريپت ساده در 2 حالت در قسمت تگ < head > صفحه تعريف شده است . در حالت اول به دليل عدم فراخوانی تابع اسکريپت ، آن اسکريپت هيچ گاه اجرا نخواهد شد . اما در حالت دوم تابع ()hello توسط رويداد onclick ( کليک ) دکمه فرمان فراخوانی شده و خروجی خود را نمايش می دهد . برای اجرای اسکريپت بر روی دکمه فرمان مثال کليک نماييد :
| حالت 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 > |
| |
| حالت 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 > |
3 ) در يک فايل خارجی JS :
در اين حالت تمام اسکريپت های مورد نظر را در يک فايل خارجی متنی با پسوند JS ، تعريف کرده و سپس به وسيله تگ < script > در قسمت < head > صفحه ، بين آن فايل و صفحه لينک ايجاد می کنيم .
از اين جالت معمولا در مواردی که بخواهيم کدهای اسکريپت را از محتويات صفحات HTML جدا کرده و يا از يک سری دستورات و توابع اسکريپتی مشترک در چند صفحه استفاده کنيم ، کاربرد دارد .
اسکريپت های اين حالت بايد در قالب توابع مختلف تعريف شده و تا زمانی که از سوی برنامه يا کاربر فراخوانی نشوند ، اجرا نخواهند شد .
مثال : در مثال زير ابتدا يک اسکريپت در يک فايل خارجی به نام myscript.js تعريف کرده و سپس بين صفحه و آن فايل ارتباط ايجاد کرده ايم . تابع ( ) hello2 توسط رويداد کليک دکمه فرمان فراخوانی و اجرا می شود . برای اجرای آن بر روی دکمه فرمان کليک کنيد :
< script type="text/javascript" >
function hello2 ( )
{
document.write ( "This script is placed in an external Java Script file . " )
}
< /script > |
< 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 > |
مرجعhttp://developer1.ir/ 
