در این قسمت از مقالات طراحی سایت ، به معرفی محل قرار دادن اسکریپت ها در صفحات وب می پردازیم . به طور کلی 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>