نماد سایت تیک۴

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

امیرحسین بخشی

در این آموزش موارد زیر را برسی خواهیم کرد:

معرفی 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 و خواص و متدهای آن آشنا خواهید شد.

<html>

  <head>

    < title > Title of Page عنوان صفحه < /title >

  </head>

  <body>

    <script type="text/javascript">

      document.write ( "This is an Script !" )

    </script>

  </body>

</html>

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

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

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

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

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

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

۲) در قسمت تگ <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 >



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>

نکات مهم در کد نویسی جاوا اسکریپت :

۱) جاوا اسکریپت به بزرگ یا کوچک بودن حروف حساس است ( بر خلاف HTML ) :

در تعریف و نام گذاری توابع و متغیرها در جاوا اسکریپت باید به بزرگ یا کوچک بودن حروف کاملا دقت کرد . تابع با نام “MyFunction” با تابع “myfunction” و متغیر با نام “Matn” با متغیر با نام “matn” متفاوت هستند .

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

توجه : در مثال ها و کدهای بخش آموزش ، شکل صحیح نوشتاری کلیه دستورات نمایش داده شده است .

مثال ۱: در مثال زیر ۲ متغیر با نام های یکسان ، ولی متفاوت در بزرگ یا کوچک بودن حروف به نام های “Matn” و “matn” ایجاد و مقدار دهی شده اند . خروجی کد نشان می دهد که این دو متغیر کاملا با هم متفاوت هستند و هر یک مقدار مخصوص به خود را دارند :

<script type="text/javascript">

  var matn = "This is a Variable ." ;

  var Matn = "This is another Variable ." ;

  document.write ( matn ) ;

  document.write ( Matn ) ;

</script>

مثال ۲: شکل صحیح نوشتن متد چاپ خروجی در جاوا اسکریپت به صورت documnet.write است . در مثال زیر ابتدا دستور را به شکل نادرست و با حروف بزرگ به صورت Documnet.Write نوسته ایم ، که باعث ایجاد خطا در صفحه شده و خروجی نداریم . اما در حالت دوم آنرا به شکل صحیح نوشته ایم ، که خروجی درست را نیز مشاهده می کنیم :

حالت اول، شکل نادرست

<script type="text/javascript">

  var Str = "An Investigation for Development" ;

  Document.Write ( Str ) ;

</script>

حالت دوم، شکل صحیح

<script type="text/javascript">

  var Str = "An Investigation for Development" ;

  document.write ( Str ) ;

</script>

۲) جاوا اسکریپت فواصل خالی اضافی در کد نویسی را نادیده می گیرد:

به کار بردن فاصله خالی اضافی در بین کلمات کد های جاوا اسکریپت ، از سوی مرورگر نادیده گرفته شده و تاثیری ندارد . می توان برای خواناتر شدن برنامه ، بین کلمات فاصله اضافی ایجاد کرد.

نکته: بین دستورات و کلمات کلیدی باید حداقل یک فاصله وجود داشته باشد ، در اینجا منظور از فاصله اضافی ، بیش از یک کاراکتر فاصله است.

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

<script type="text/javascript">

var StrName="Developer Studio";

document.write(StrName);

</script>              <script type="text/javascript">

  var   StrName   =   "Developer Studio" ;

  document.write  ( StrName  ) ;

</script>

۳ ) نوشتن عبارت های متنی در بیش از یک خط :

در هنگام تعریف و استفاده از عبارت های متنی در دستوراتی نظیر document.write و … ، می توان ادامه متن را به کمک یک کاراکتر \ به سطر بعدی انتقال داد . این مسئله در زمانی که عبارت های متنی طولانی استفاده می شود ، کاربرد دارد.

مثال: در مثال زیر می خواهیم یک پیام را به کاربر اعلام کنیم . ولی به دلیل طولانی بودن متن پیام تصمیم گرفته ایم ، آن را در بخش کدنویسی در ۲ خط تعریف کنیم ، اما می بینیم که مرورگر در خروجی آنرا در یک خط نشان می دهد:

<script type="text/javascript">

  document.write ( "Java Script is a client side language . \

  It`s codes executes in the computer of visitor " ) ;

</script>

۴ ) درج توضیحات ( comments ) مورد نظر در بخش کد نویسی:

در اسکریپت های نوشته شده به زبان جاوا اسکریپت ، می توان توضیحات مورد نظر را به صورت ویژه ای در درون کدها وارد کرد . این توضیحات به طور کامل از سوی مرورگر نادیده گرفته شده و در خروجی نمایش داده نمی شوند . از توضیحات معمولا برای نشانه گذاری یا ارائه توضیحاتی راجع به کدهای برنامه استفاده می شود.

دو نوع توضیح در جاوا اسکریپت می توان ایجاد کرد :

۱ . توضیحات یک خطی : این توضیات به کمک دو بک اسلش // به صورت زیر وارد می شود . توضیحات ارائه شده به این صورت حداکثر می تواند در یک خط باشد . به مثال زیر دقت کنید . در این مثال خط اول یک 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>

۲ . توضیحات چند خطی : با استفاده از یک نماد */ در ابتدای اولین خط توضیحات و یک نماد /* در آخرین خط توضیحات ، می توان توضیحات چند خطی در اسکریپت ها وارد کرد . از این حالت برای ارائه توضیحات طولانی استفاده می شود . به مثال زیر دقت کنید . در این مثال هم یک دستور و یک 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>
خروج از نسخه موبایل