طراحی سایت در شرکت طراحی سایت مبنا
طراحی سایت هدف نیست، ارتقا تجارت هدف است

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

10 / 10 از 2 کاربر

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

درون محدوده اصلی صفحات 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>
خروجی : This script is placed in the body section .

 در قسمت تگ < 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 >
</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>

 در يک فايل خارجی JS :

در اين حالت تمام اسکريپت های مورد نظر را در يک فايل خارجی متنی با پسوند JS ، تعريف کرده و سپس به وسيله تگ < script > در قسمت < head > صفحه ، بين آن فايل و صفحه لينک ايجاد می کنيم .
اين حالت معمولا در مواردی که بخواهيم کدهای اسکريپت را از محتويات صفحات HTML  (در طراحی سایت ) جدا کرده و يا از يک سری دستورات و توابع اسکريپتی مشترک در چند صفحه استفاده کنيم ، کاربرد دارد .
اسکريپت های اين حالت بايد در قالب توابع مختلف تعريف شده و تا زمانی که از سوی برنامه يا کاربر فراخوانی نشوند ، اجرا نخواهند شد .

مثال : در مثال زير ابتدا يک اسکريپت در يک فايل خارجی به نام myscript.js تعريف کرده و سپس بين صفحه و آن فايل ارتباط ايجاد کرده ايم . تابع ( ) hello2 توسط رويداد کليک دکمه فرمان فراخوانی و اجرا می شود . برای اجرای آن بر روی دکمه فرمان کليک کنيد :
متن فايل   myscript.js

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

</html>

ارسال نظر و نظرات ثبت شده
حسین اکبرنژاد : تشکر
4 1
آموزش هاتون بسیار عالی و آموزنده و کوتاه بوده و بنظر میرسد یک استاد بسیار با تجربه نگارنده متون و کدها باشد. با آرزوی موفقیت روزافزون...
نام شما :
ایمیل :
تلفن تماس :
متن پیغام :