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

در این قسمت از آموزش جاوا اسکریپت ، نحوه تعریف دستورات 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 !

در کل در صفحات وب دو حالت اسکریپتی قابل پیاده سازی است : ۱)اسکریپت هایی که سریع پس از اعمال تغییر لود شده و اجرا شود،در این حالت باید اسکریپت ها را در قسمت body صفحه قرار دارد. ۲)اسکریپت هایی که در هنگام بروز یک رویداد در صفحه مانند کلیک بر روی دکمه خاص اجرا شوند به عبارتی می خواهیم اجرای آن ها کنترل شده باشد . در این حالت دستورات اسکریپت را در قسمت 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 > صورت بگیرد . در مثال زیر یک اسکریپت ساده در ۲ حالت در قسمت تگ < 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

BuddyCSS چیست؟

بخوانید

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

در این حالت تمام اسکریپت های مورد نظر را در یک فایل خارجی متنی با پسوند 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

منبع: sitedesign-co.com

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

دیدگاهتان را بنویسید لغو پاسخ

سایر مقالات مرتبط :