قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / اموزش / java script / اموزش و مقدمه جاوا اسکریپت – جلسه اول

اموزش و مقدمه جاوا اسکریپت – جلسه اول

اموزش و مقدمه جاوا اسکریپت - جلسه اولReviewed by سالار on Jun 25Rating: 5.0

معرفی Java Script :

در قسمت آموزش HTML ، با زبان طراحی صفحات وب آشنا شديد . به وسيله امکانات زبان HTML ، می توان انواع صفحات وب را با کليه اجزای مورد نياز از قبيل نوشته ها ، جداول ، تصاوير ، فرم ها و … را ايجاد کرد . اما HTML صرفا يک زبان طراحی است و توانايي برنامه سازی ، کنترل فرم ها ، پاسخ به رويدادهای برنامه و عملکرد کاربر و … را ندارد .
به همين دليل بايد از يک زبان برنامه نويسی در صفحات وب استفاده کرد . Java Script يکی از زبان های برنامه نويسی اسکريپتی است ، که اولين بار توسط شرکت Netscape Communicator عرضه کننده مرورگر معروف Netscape ارائه شد و امروزه متداولترين زبان اسکريپت نويسی صفحات وب است .

توجه : قبل از مطالعه قسمت آموزش Java Script ، شما بايد به طور کامل با زبان HTML و به خصوص تگ < script > آشنا باشيد . برای مطالعه قسمت های ذکر شده به بخش آموزش HTML و بخش آموزش تگ < script > برويد .

خصوصيات مهم Java Script :

  • Java Script يک زبان برنامه نويسی اسکريپتی است . دستور العمل های زبان های اسکريپتی ، در کامپيوتر کاربر و توسط مرورگر اجرا شده و برای اجرا نيازی به برنامه کمکی خاصی ندارند . به اين زبان ها در اصطلاح طرف مشتری ( Client Side ) می گويند . در مقابل زبان های مثل ASP.NET ابتدا توسط سرور ارسال کننده وب اجرا شده و سپس نتايج خروجی به زبان HTML برای اجرا در مرورگر فرستاده می شود . به اين زبان ها در اصطلاح طرف سرور ( Server Side ) می گويند .
  • زبان های اسکريپتی ، جزء زبان های برنامه نويسی سبک هستند . اين زبان ها در هنگام اجرا فازی به نام کامپايل* را طی نکرده و دستورات آن ها به صورت خط به خط اجرا می شوند .

کامپايل : برنامه های نوشته شده به زبان های برنامه نويسی مثل VB , C یا #C در هنگام اجرا ابتدا توسط کامپايلر به طور کامل خوانده شده و اشکال زدايي می شوند و در صورت عدم وجود اشکال ، اجرا خواهند شد . اما برنامه های نوشته شده به زبان های اسکريپتی ، به صورت خط به خط توسط مرورگر خوانده شده و اجرا می شوند .

برخی از امکانات Java Script :

  • Java Script به طراحان وب ، يک ابزار برنامه نويسی ساده و کارا می دهد .
  • Java Script به رويدادهای مختلف در صفحه واکنش نشان می دهد . برای مثال می توان يک تابع Java Script تعريف کرده تا در هنگام وقوع يک رويداد مثل کليک بر روی يک دکمه يا لود شدن صفحه ، اجرا شود .
  • Java Script می تواند اطلاعات ارسالی يک فرم را اعتبار سنجی و کنترل نموده و در صورت صحيح بود ، آنها را به سرور ارسال کند . اين کار باعث جلوگيری از ورود اطلاعات نادرست به سرور و کاهش ترافيک آن می شود .
  • Java Script توانايي تشخيص نوع و نسخه مرورگر مورد استفاده کاربر را داشته و می تواند بر حسب آن نوع مرورگر خاص ، تنطيمات و صفحات ويژه ای را بارگذاری نمايد .
  • Java Script توانايي خواندن و نوشتن اطلاعات مورد نياز مرورگر را بر روی کامپيوتر بازديد کننده صفحه را داراست ، که در اصطلاح به اين کار ايجاد و خواندن Cookie می گويند .
  • Java Script می تواند انواع کادرهای اخطار ، تاييد و دريافت ورودی را به کاربر نمايش دهد .

تفاوت Java و Java Script :

زبان های برنامه نويسی Java و Java Script دارای ساختار دستوری مشابه به هم هستند ، ولی ۲ زبان کاملا مجزا هستند .
Java يک زبان شی گرا قدرتمند برای برنامه نويسی بر روی پلتفرم های مختلف است ، در حالی که Java Script يک زبان ساده اسکريپت نويسی در مرورگر های وب است .

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

برای تعريف و ايجاد يک اسکريپت ، از تگ < script > استفاده می شود . کليه دستورات مورد نظر اسکريپت ، درون تگ باز و بسته < script > تعريف شده و به عبارتی محدوده کدهای اسکريپت را تعيين می کند . در هر صفحه HTML ، می توان به تعداد مورد نياز از تگ < script > استفاده کرد ، که هر تگ به صورت مجموعه ای واحد برای خود عمل می کند .

توجه : قبل از مطالعه قسمت آموزش Java Script ، شما بايد به طور کامل با زبان HTML و به خصوص تگ < script > آشنا باشيد . برای مطالعه قسمت های ذکر شده به بخش آموزش HTML و بخش آموزش تگ < script > برويد .

مثال : در مثال زير يک اسکريت ساده در صفحه قرار داده شده است . به نکات زير دقت کنيد :

  • نکته ۱ : علاوه بر Java Script ، زبان های اسکريپتی ديگر از قبيل VB Script يا EcmaScript نيز وجود دارند و در هر تگ < script > بايد به وسيله خاصيت Type نوع و زبان اسکريپتی مورد استفاده در ان اسکريپت را تعيين کرد . در مثال زير زبان اسکريپت Java Script و نوع آن متن تعيين شده است .
  • نکته ۲ : در مثال زير از دستور document.write استفاده شده است . اين دستور برای نمايش يک متن خروجی که در پرانتز جلوی آن تعيين می شود ، در صفحه به کار می رود . در ادامه با شی document و خواص و متدهای آن آشنا خواهيد شد .
Example
< 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 ! خروجی

انواع حالت های دستورات اسکريپتی :

به طور کلی ۲ حالت اسکريپت ( برنامه اجرايي ) در صفحات وب قابل پياده سازی است :

  1. اسکريپت های که می خواهيم به محض لود شدن صفحه ، اجرا شده و اثر خود را نمايش دهند . در اين حالت بايد اسکريپت ها را در قسمت < body > صفحه قرار داد .
  2. اسکريپت هايي که می خواهيم در هنگام بروز يک رويداد در صفحه ، مثل کليک بر روی يک دکمه خاص و … اجرا شوند . به عبارت ديگر می خواهيم اجرای آنها کنترل شده باشد . در اين حالت دستورات اسکريپت را در قسمت < head > صفحه و یا در يک فايل خارجی تعريف کرد .

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

javascript1-iriranweb


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

به طور کلی ۳ روش برای قرار دادن اسکريپت ها در صفحات وب وجود دارد :

۱ ) درون محدوده اصلی صفحات HTML ، در قسمت تگ < body > :

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

مثال : در مثال زير يک اسکريپت ساده در قسمت تگ < body > صفحه ايجاد شده است . اين اسکريپت به محض لود شدن صفحه اجرا شده و خروجی خود را توليد می کند .

Example
< 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 ( کليک ) دکمه فرمان فراخوانی شده و خروجی خود را نمايش می دهد . برای اجرای اسکريپت بر روی دکمه فرمان مثال کليک نماييد :

Example
حالت ۱ . در اين حالت به دليل عدم فراخوانی اسکريپت هيچ خروجی نداريم .
< 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 >
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>
کد
خروجی

مطلب پیشنهادی

شی Screen در جاوا اسکريپت – صفحه نمایش

شی Screen در جاوا اسکريپت - صفحه نمایشReviewed by سالار on Dec 4Rating: 5.0شی Screen …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

 
در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید