آموزش Java Script - نحوه تعريف دستورات جاوا اسکريپت

دستورات مقدماتی Java Script

نحوه تعريف دستورات 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 و خواص و متدهای آن آشنا خواهيد شد .

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

انواع حالت های دستورات اسکريپتی :

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

اسکريپت های که می خواهيم به محض لود شدن صفحه ، اجرا شده و اثر خود را نمايش دهند . در اين حالت بايد اسکريپت ها را در قسمت < body > صفحه قرار داد .
اسکريپت هايي که می خواهيم در هنگام بروز يک رويداد در صفحه ، مثل کليک بر روی يک دکمه خاص و ... اجرا شوند . به عبارت ديگر می خواهيم اجرای آنها کنترل شده باشد . در اين حالت دستورات اسکريپت را در قسمت < head > صفحه و یا در يک فايل خارجی تعريف کرد .

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

محل قرار دادن اسکريپت ها در صفحات وب :

به طور کلی 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>	کد
	خروجی

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

< 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>	کد
	خروجی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :
بلهخیر

نام :
آدرس Email :

نظر شما :

سوال امنیتی : پایتخت ایران ؟