Java Script یکی از زبان های برنامه نویسی اسکریپتی است ، که اولین بار توسط شرکت Netscape Communicator عرضه کننده مرورگر معروف Netscape ارائه شد و امروزه متداولترین زبان اسکریپت نویسی صفحات وب است .
توجه : قبل از مطالعه قسمت آموزش Java Script ، شما باید به طور کامل با زبان HTML و به خصوص تگ < script > آشنا باشید .
به طراحان وب ، یک ابزار برنامه نویسی ساده و کارا می دهد .
Java Script به رویدادهای مختلف در صفحه واکنش نشان می دهد . برای مثال می توان یک تابع Java Script تعریف کرده تا در هنگام وقوع یک رویداد مثل کلیک بر روی یک دکمه یا لود شدن صفحه ، اجرا شود .
Java Script می تواند اطلاعات ارسالی یک فرم را اعتبار سنجی و کنترل نموده و در صورت صحیح بود ، آنها را به سرور ارسال کند . این کار باعث جلوگیری از ورود اطلاعات نادرست به سرور و کاهش ترافیک آن می شود .
Java Script توانایی تشخیص نوع و نسخه مرورگر مورد استفاده کاربر را داشته و می تواند بر حسب آن نوع مرورگر خاص ، تنطیمات و صفحات ویژه ای را بارگذاری نماید .
Java Script توانایی خواندن و نوشتن اطلاعات مورد نیاز مرورگر را بر روی کامپیوتر بازدید کننده صفحه را داراست ، که در اصطلاح به این کار ایجاد و خواندن Cookie می گویند .
Java Script می تواند انواع کادرهای اخطار ، تایید و دریافت ورودی را به کاربر نمایش دهد .
نحوه تعریف دستورات Java Script در صفحه :
برای تعریف و ایجاد یک اسکریپت ، از تگ < script > استفاده می شود . کلیه دستورات مورد نظر اسکریپت ، درون تگ باز و بسته < script > تعریف شده و به عبارتی محدوده کدهای اسکریپت را تعیین می کند . در هر صفحه HTML ، می توان به تعداد مورد نیاز از تگ < script > استفاده کرد ، که هر تگ به صورت مجموعه ای واحد برای خود عمل می کند .
انواع حالت های دستورات اسکریپتی :
به طور کلی 2 حالت اسکریپت ( برنامه اجرایی ) در صفحات وب قابل پیاده سازی است :
اسکریپت های که می خواهیم به محض لود شدن صفحه ، اجرا شده و اثر خود را نمایش دهند . در این حالت باید اسکریپت ها را در قسمت <body> صفحه قرار داد .
اسکریپت هایی که می خواهیم در هنگام بروز یک رویداد در صفحه ، مثل کلیک بر روی یک دکمه خاص و ... اجرا شوند . به عبارت دیگر می خواهیم اجرای آنها کنترل شده باشد . در این حالت دستورات اسکریپت را در قسمت < head > صفحه و یا در یک فایل خارجی تعریف کرد .
نکته : گاهی اوقات می خواهیم از دستورات اسکریپتی یکسان و مشترک در تمام یا گروهی از صفحات یک وب سایت استفاده کنیم . در این حالت برای جلوگیری از تکرار دستورات در تمام صفحه های مذکور ، کاهش حجم کد نویسی ، افزایش سرعت طراحی و اعمال تغییرات سریع و آسان به دستورات ، بهتر است همه آن اسکریپت ها را یکبار در یک فایل خارجی تعریف کرده و از آن به طور مشترک در تمام صفحات استفاده کرد . برای دریافت اطلاعات بیشتر به روش سوم قرار دهی اسکریپت در صفحات وب در پایین صفحه بروید .
محل قرار دادن اسکریپت ها در صفحات وب :
به طور کلی 3 روش برای قرار دادن اسکریپت ها در صفحات وب وجود دارد :
1 ) درون محدوده اصلی صفحات HTML ، در قسمت تگ < body > :
اسکریپت های تعریف شده در این قسمت ، به محض بارگداری و نمایش صفحه اجرا شده و خروجی خود را تولید می کنند . این نوع اسکریپت ها می توان در هر جای محدوه تگ < body > صفحات تعریف کرد . در این نوع اسکریپت ها ، هیچ کنترلی از سوی کاربر برای اجرای آنها وجود ندارد ، مگر اینکه دستورات آن در قالب یک تابع ( function ) تعریف شده باشند ، که تا زمان فراخوانی آن تابع اجرا نخواهند شد .
2 ) در قسمت تگ < head > :
اسکریپت هایی که می خواهیم در هنگام بروز یک رویداد در صفحه مثل کلیک بر روی یک دکمه و ... اجرا شوند ، را می توان در قسمت < head > تعریف کرد . دستورات اسکریپت های این قسمت بایستی در قالب توابع تعریف شده باشند و تا زمانی که از سوی برنامه یا کاربر فراخوانی نشده باشند ، اجرا نخواهند شد . مزیت این روش در این است ، که این اسکریپت ها قبل از اجرا توسط مرورگر لود شده اند . فراخوانی باید توسط یک اسکریپت دیگر در قسمت تگ < body > صورت بگیرد .
مثال :
تابع ()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 >
محتویات
صفحه
< input value ="to view script Click me"
id="Button1" type="button" onclick="hello( )" /
>
< /body >
</html>
3 ) در یک فایل خارجی JS
در این حالت تمام اسکریپت های مورد نظر را در یک فایل خارجی متنی با پسوند JS ، تعریف کرده و سپس به وسیله تگ < script > در قسمت
< head > صفحه ، بین آن فایل و صفحه لینک ایجاد می کنیم .
از این حالت معمولا در مواردی که بخواهیم کدهای اسکریپت را از محتویات صفحات HTML جدا کرده و یا از یک سری دستورات و توابع اسکریپتی مشترک در چند صفحه استفاده کنیم ، کاربرد دارد .
اسکریپت های این حالت باید در قالب توابع مختلف تعریف شده و تا زمانی که از سوی برنامه یا کاربر فراخوانی نشوند ، اجرا نخواهند شد .
مثال : نحوه ارتباط با فایل خارجی جاوا اسکریپت :
< 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>
نکات مهم در کد نویسی جاوا اسکریپت :
1 ) جاوا اسکریپت به بزرگ یا کوچک بودن حروف حساس است ( بر خلاف HTML ) :
در تعریف و نام گذاری توابع و متغیرها در جاوا اسکریپت باید به بزرگ یا کوچک بودن حروف کاملا دقت کرد . تابع با نام "MyFunction" با تابع "myfunction" و متغیر با نام "Matn" با متغیر با نام "matn" متفاوت هستند .
همچنین کلیه دستورات جاوا اسکریپت باید به صورت استاندارد تعیین شده ، با حروف بزرگ یا کوچک نوشته شود . عدم رعایت این نکته باعث اجرا نشدن دستور و بروز خطا در صفحه می شود . هر یک از دستورات و کلمات کلیدی در جاوا اسکریپت فقط به یک صورت ، که صورت استاندارد است باید نوشته شوند .
2 ) جاوا اسکریپت فواصل خالی اضافی در کد نویسی را نادیده می گیرد :
به کار بردن فاصله خالی اضافی در بین کلمات کد های جاوا اسکریپت ، از سوی مرورگر نادیده گرفته شده و تاثیری ندارد . می توان برای خواناتر شدن برنامه ، بین کلمات فاصله اضافی ایجاد کرد .
نکته : بین دستورات و کلمات کلیدی باید حداقل یک فاصله وجود داشته باشد ، در اینجا منظور از فاصله اضافی ، بیش از یک کاراکتر فاصله است
3 ) نوشتن عبارت های متنی در بیش از یک خط :
در هنگام تعریف و استفاده از عبارت های متنی در دستوراتی نظیر document.write و ... ، می توان ادامه متن را به کمک یک کاراکتر \ به سطر بعدی انتقال داد . این مسئله در زمانی که عبارت های متنی طولانی استفاده می شود ، کاربرد دارد .
4 ) درج توضیحات ( comments ) مورد نظر در بخش کد نویسی :
در اسکریپت های نوشته شده به زبان جاوا اسکریپت ، می توان توضیحات مورد نظر را به صورت ویژه ای در درون کدها وارد کرد . این توضیحات به طور کامل از سوی مرورگر نادیده گرفته شده و در خروجی نمایش داده نمی شوند . از توضیحات معمولا برای نشانه گذاری یا ارائه توضیحاتی راجع به کدهای برنامه استفاده می شود .
دو نوع توضیح در جاوا اسکریپت می توان ایجاد کرد :
1 . توضیحات یک خطی : این توضیات به کمک دو بک اسلش // به صورت زیر وارد می شود . توضیحات ارائه شده به این صورت حداکثر می تواند در یک خط باشد . به مثال زیر دقت کنید . در این مثال خط اول یک comment خط دوم یک دستور چاپ خروجی است . همانظور که در خروجی کد مشخص است ، دستور چاپ توسط مرورگر اجرا شده ولی comment نمایش دادده نمی شود :
مثال:
<script type="text/javascript">
// this is a one line comment . navigator won`t show it .
document.write ( "How to write a comment" ) ;
</script>
2 . توضیحات چند خطی : با استفاده از یک نماد */ در ابتدای اولین خط توضیحات و یک نماد /* در آخرین خط توضیحات ، می توان توضیحات چند خطی در اسکریپت ها وارد کرد . از این حالت برای ارائه توضیحات طولانی استفاده می شود . به مثال زیر دقت کنید . در این مثال هم یک دستور و یک comment چند خطی قرار داده شده است . دستور توسط مرورگر اجرا شده ، ولی comment نمایش داده نمی شود :
مثال:
<script type="text/javascript">
/* this is a multi line comment . navigator won`t show it .
We use it for long comments .
It can be several lines */
document.write ( "How to write a multi line comment" ) ;
</script>