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

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

درون محدوده اصلی صفحات 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 > صورت بگیرد .

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

منبع: sitedesign-co.com