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

7 / 10
از 3 کاربر

در این قسمت از آموزش جاوا اسکریپت ، نحوه تعریف دستورات Java Script در صفحه را توضیح می دهیم . همانطور که قبلا گفته شد برای یادگیری زبان جاوا اسکریپت باید با زبان html و همچنین تگ script آشنایی پیدا کرده باشید زیرا همه ی دستورات اسکریپت درون تگ باز و بسته script تعریف می شود و به عبارتی محدوده کدهای اسکریپت را تعیین می کند . به غیر از جاوا اسکریپت زبان های VB Script و EcmaScript نیز در هر تگ اسکریپت باید به وسیله خاصیت Type نوع و زبان اسکریپتی مورد استفاده در آن اسکریپت را تعیین کند . در مثال زیر از دستور document.write برای نمایش یک متن خروجی که در پرانتز جلوی آن تعیین می شود استفاده شده و در ادامه با شی document و خواص و متدهای آن آشنا خواهید شد .

< 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 !

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

درون محدوه اصلی صفحات html ، در قسمت تگ <body>

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

< 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 .

در قسمت تگ <head>

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

حالت اول :

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

حالت دوم:

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

در يک فايل خارجی 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>

ارسال نظر و نظرات ثبت شده