آشنایی کامل با نحوه تعریف دستورات جاوا اسکریپت

در ادامه آموزش زبان جاوا اسکریپت می خواهیم شما را با نحوه تعریف دستورات جاوا اسکریپت آشنا کنیم. دستورات جاوا اسکریپت با روش مخصوص به خود این زبان تعریف و شناسایی می شوند.

برای تعریف دستورات جاوا اسکریپت باید تگ مخصوص به آن استفاده کرد و دستورات را نیز به فرم مخصوص به این زبان ایجاد کرد. با آموزش دستورات جاوا اسکریپت با کدنویسی به زبان ساده همراه باشید.

نحوه تعریف دستورات جاوا اسکریپت در صفحه

برای تعریف و ایجاد یک اسکریپت ، از تگ < script > استفاده می شود. کلیه دستورات مورد نظر اسکریپت ، درون تگ باز و بسته < script > تعریف شده و به عبارتی محدوده کدهای اسکریپت را تعیین می کند.

در هر صفحه HTML ، می توان به تعداد مورد نیاز از تگ < script > استفاده کرد ، که هر تگ به صورت مجموعه ای واحد برای خود عمل می کند.

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

• آموزش جاوا اسکریپت پروژه محور | راهنمای گام به گام و جامع

مثال : در مثال زیر یک اسکریت ساده در صفحه قرار داده شده است . به نکات زیر دقت کنید :

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

نکته ۲ : در مثال زیر از دستور 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>

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

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

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

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

نکته : گاهی اوقات می خواهیم از دستورات اسکریپتی یکسان و مشترک در تمام یا گروهی از صفحات یک وب سایت استفاده کنیم.

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

• آموزش پایتون پیشرفته – راه اندازی و نصب پایتون در ویندوز

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

به طور کلی ۳ روش برای قرار دادن اسکریپت ها در صفحات وب وجود دارد :

۱) درون محدوده اصلی صفحات 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 >
</html>

۲) در قسمت تگ < head >

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

مزیت این روش در این است ، که این اسکریپت ها قبل از اجرا توسط مرورگر لود شده اند . فراخوانی باید توسط یک اسکریپت دیگر در قسمت تگ < body > صورت بگیرد.

مثال : در مثال زیر یک اسکریپت ساده در ۲ حالت در قسمت تگ < 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>

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

< html >
  < head >
    < title > Title of Page عنوان صفحه < /title >
    < script type="text/javascript" >
     function hello ( )
      {
       document.write ( "Hello User,script in 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 توسط رویداد کلیک دکمه فرمان فراخوانی و اجرا می شود. برای اجرای آن بر روی دکمه فرمان کلیک کنید :

متن فایل myscript.js

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

مثال کدها در فایل html

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

در دومین جلسه آموزش Javascript با نحوه تعریف دستورات جاوا اسکریپت آشنا شدید. در ادامه آموزش های این زبان طراحی صفحات وب به سراغ موضوعات دیگر آن خواهیم رفت.