رفتن به مطلب
محفل من
Mostafa

آموزش گام به گام JavaScript

پست های پیشنهاد شده

تعریف متغیرها، محاسبات و عملگرها در جاوا اسکریپت (javascript)

در مطلب گذشته از بخش آموزش مقدماتی جاوا اسکریپت (javascript)، خلاصه و کوتاه در مورد این زبان انعطاف پذیر و کاربردهای آن در صفحات وب (html) گفتیم و چند مثال را با هم بررسی کردیم؛ در این مطلب می خواهیم متغیرها، محاسبات، عملگرها و نکات کلی مورد نیاز جهت آشنایی و شروع کدنویسی جاوا اسکریپت را به کمک مثال با هم مرور کنیم، سعی کرده ایم که آموزش ها به ساده ترین و در عین حال کاربردی ترین شکل ممکن عنوان شوند تا از طرح مباحث خسته کننده و تکراری جلوگیری شود.
نکات کلی که باید بدانید:
– جاوا اسکریپت حساس به حروف بزرگ و کوچک است، یعنی به فرض متغیر var با Var از نظر مفسر این زبان متفاوت است.
– برای قرار دادن متن راهنما بین کدها از شیوه /*متن راهنما*/ یا متن راهنما// استفاده کنید.
– کدهای جاوا اسکریپت بین تگ head یا body قابل اجرا هستند و به صورت فایل خارجی نیز می توان آنها را ایمپورت کرد.
– جاوا اسکریپت زبانی سمت کاربر است، یعنی تنها روی مرورگر کاربران قابل پردازش و اجرا است.

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

شاید واژه متغیر در نگاه اول کمی پیچیده به نظر برسد اما در یک بیان ساده متغیر چیزی نیست جزء عنصری که طی یک فرایند برنامه نویسی ممکن است در چند موقعیت مختلف و یا با مقادیر مختلف مورد استفاده قرار گیرد، به عنوان مثال کارخانه ای را تصور کنید که مواد اولیه را (به عنوان متغیر) تهیه کرده و در طی فرایند تولید و انجام فعل و انفعالاتی، تبدیل به محصولات قابل استفاده می کند، متغیر در جاوا اسکریپت و اکثر زبان های برنامه نویسی کارکردی اینچنین دارد (البته در بیانی خیلی ساده)، به مثال زیر توجه کنید:

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

توضیح:
– متغیرها در جاوا اسکریپت با عنوان var شناخته می شوند.
– document.write یک دستور برای مرورگر ارسال می کند تا متغیر all (یا هر مقدار دیگری) را خروجی دهد.
محاسبات در جاوا اسکریپت

مثل بسیاری از زبان ها ی برنامه نویسی، جاوا اسکریپت نیز از قابلیت های محاسباتی (جمع +، تفریق -، ضرب * و تقسیم /) پشتیبانی می کند؛ علاوه بر این علامت % باقیمانده ضریب بخش پذیری را بر می گرداند، علامت ++ برای افزایش و — برای کاهش یک مقدار عددی کاربرد دارند:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

توضیح:
– خط مربوط به CDATA در مثال بالا جهت جلوگیری از نامعتبر شدن کد از لحاظ سیستم های اعتبار سنجی و جلوگیری از پردازش کدهای جاوا اسکریپت به جای XHTML است.
– همانطور که گفتیم علامت % باقیمانده ضریب بخش پذیری را بر می گرداند، مثلا حاصل تقسیم ۵۰ بر ۹ مساوی ۴۵ است، لذا % باقیمانده تقسیم یعنی ۵ را بر می گرداند (به صورت صحیح و نه اعشاری).

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

ساختارهای کنترلی جاوا اسکریپت

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

توجه :     * Condition  =  شرط یا شروط         * Statment  =  دستور یا دستورات

۱ )  if   ( Condition )   Statment :

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

if   ( شرط یا شروط )
{
دستورات مورد نظر که در صورت برقرار بودن شرط ها اجرا می شوند
}

مثال : در مثال زیر متغیر عددی IntNum یکبار با عددی بیش از ۱۰ و یکبار با عددی کوچکتر از ۱۰ مقدار دهی شده است . شرط دستور if این است ، که در هنگام بزرگتر بودن IntNum از عدد ۱۰ پیغام “This Number is bigger than 10” و در هنگام کوچکتر بودن آن از عدد ۱۰ ، هیچ خروجی چاپ نشود . به مثال دقت کنید :

مثال : در حالت اول به دلیل بزرگتر بودن عدد IntNum از ۱۰ ، پیغام خروجی بر روی صفحه چاپ می شود .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

خروجی :

This Number is bigger than 10

مثال :  در حالت دوم به دلیل کوچکتر بودن عدد IntNum از ۱۰ ، هیچ پیغام خروجی بر روی صفحه چاپ نمی شود .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

خروجی :

  ۲ )   if   ( Condition )   Statment 1   else   Statment 2 : از این ساختار در مواقعی استفاده می کنیم که می خواهیم در صورت بر قرار بودن شرط یا شرط هایی ، یکسری دستورات و در صورت عدم بر قراری آن شروط ، گروهی دیگر از دستورات اجرا شوند . شکل کلی استفاده از این ساختار به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

مثال : در مثال زیر متغیر عددی IntNum یکبار با عددی بیش از ۱۰ و یکبار با عددی کوچکتر از ۱۰ مقدار دهی شده است . شرط دستور if این است ، که در هنگام بزرگتر بودن IntNum از عدد ۱۰ پیغام “This Number is bigger than 10” و در هنگام کوچکتر بودن آن از عدد ۱۰ ، پیغام “This Number is smaller than 10” چاپ شود . به مثال دقت کنید :

مثال: در حالت اول به دلیل بزرگتر بودن عدد IntNum از ۱۰ ، پیغام خروجی قسمت if بر روی صفحه چاپ می شود .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

خروجی :

This Number is bigger than 10

مثال: در حالت دوم به دلیل کوچکتر بودن عدد IntNum از ۱۰ ، پیغام قسمت else بر روی صفحه چاپ می شود .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

خروجی :

This Number is smaller than 1

* عملگر شرطی :

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

 نام متغیر = ( شرط ) ؟    مقدار ۱   :   مقدار ۲
variable name = ( condition ) ? value 1 : value 2 ;

مثال:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

در مثال بالا اگر مقدار متغیر x از ۱۰ بیشتر باشد ، مقدار متغیر name برابر sam و در صورت کوچکتر بودن مقدار x از ۱۰ ، name برابر david می شود .

۳ ) if   ( Condition 1 )   Statment 1   else if   ( Condition 2 )   Statment 2   else   Statment 3 :

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

شکل کلی استفاده از این ساختار به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

نکته ۱ : به تعداد مورد نیاز می توان در این ساختار به وسیله دستور else if شرط و دستورات جدید تعریف کرد .
نکته ۲ :استفاده از کروشه در قسمت دستورات شرط if ، فقط در زمانی که دستورات مورد نظر بیش از یک خط هستند ، ضروری است .
نکته ۳ : تعیین قسمت else در ساختار فوق اختیاری بوده و می تواند تعریف نشود .
نکته ۴ : در زمانی که تعداد حالت های شروط بسیار زیاد هستند ، بهتر است از ساختار Switch استفاده کرد .

مثال : در مثال زیر یک کادر متن و یک دکمه فرمان قرار داده شده است . کادر متن ورودی را از کاربر دریافت کرده و. با کلیک بر روی دکمه فرمان ، خروجی را در کادر آبی رنگ می بینیم .
شکل عملکرد این مثال به صورت زیر است :
رویداد کلیک دکمه فرمان تابع ( ) ifclause را که در قسمت < head > قرار دارد ، را فراخوانی می کند . در این تابع یک دستور if سه شرطی قرار داده شده است ، که مقدار متغیر matn را ارزیابی کرده و در صورتی که مقدار آن برابر ۱ باشد ، عبارت one ، در صورت ۲ بودن عبارت two ، در صورت ۳ بودن عبارت three و در صورتی که مقدار آن به غیر از یکی از موارد فوق باشد ، عبارت bigger than 3 را نمایش می دهد .

مثال:

نکات مهم : نکات زیر در مثال با شماره مشخص شده اند .

    خاصیت value در یک کادر متن به متن موجود در آن کنترل اشاره می کند . در اینجا ما متن موجود در کنترل txtinput را در متغیر matn ذخیره کرده ایم .
    رویداد onclick رویدادی است که در هنگام کلیک بر روی یک کنترل فعال می شود . برای فراخوانی یک تابع توسط یک کنترل ، نام آن تابع را در رویداد onclick کنترل قرار می دهیم .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

حلقه while در جاوا اسکریپت :

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

while   ( شرط یا شروط حلقه )
   {
     دستوراالعمل های مورد نظر حلقه
   }

 

مثال : مثال اول قسمت آموزش حلقه for را در اینجا با حلقه while باز نویسی کرده ایم . در این حلقه از متغیر n به عنوان متغیر شمارنده و کنترل کننده حلقه استفاده شده است . اجرای حلقه تا زمانی که شرط آن درست است ، ادامه دارد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

خروجی :

Line number is 1
Line number is 2
Line number is 3
Line number is 4
Line number is 5

مثال ۲ : در این مثال برنامه کاربردی که یک عدد را به توان عدد دیگری می رساند را که با حلقه for نوشته بودیم ، را با حلقه while باز نویسی کرده ایم . به تفاوت های این دو ساختار دقت کنید :

مثال :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.


حلقه do … while :

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

do
  {
   دستورات حلقه
  }
while  ( شرط یا شروط حلقه )

 

مثال : مثال اول قسمت آموزش حلقه while را در اینجا با حلقه do … while باز نویسی کرده ایم . در این حلقه از متغیر n به عنوان متغیر شمارنده و کنترل کننده حلقه استفاده شده است . اجرای حلقه تا زمانی که شرط آن درست است ، ادامه دارد :

مثال:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

Line number is 1
Line number is 2
Line number is 3
Line number is 4
Line number is 5

مثال : در مثال زیر یک حلقه do … while تعریف شده که شرط اجرای دستورات آن کوچکتر بودن متغیر c از ۵ است . اما قبل از حلقه متغیر c با مقدار ۸ مقدار دهی شده است . می بینیم که با وجود اشتباه بودن و عدم برقراری شرط حلقه دستورات آن حداقل یکبار اجرا شده و خروجی تولید کرده است ، ولی سری دوم اجرای حلقه به دلیل عدم برقراری شرط آن اجرا نشده است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

Line number is 8
کار با switch و case در جاوا اسکریپت (JavaScript)

اگر تا این لحظه از آموزش های مقدماتی برنامه نویسی با جاوا اسکریپت (JavaScript) همراه ما بوده باشید، حتما ملاحظه کرده اید که این زبان اسکریپت نویسی چقدر جالب و کاربردی است، اما اگر تصور می کنید که با دانستن مسائلی که تا کنون آموخته ایم، کار آموزش کدنویسی با جاوا اسکریپت به پایان رسیده، سخت در اشتباهید! برای اینکه بتوانیم به راحتی افکار و ایده هایمان را در بستر این زبان به مرورگر تفهیم کنیم، هنوز گام های زیادی باقی است و جزئیات بسیاری ناگفته مانده، اما جای نگرانی نیست، کافی است آهسته و پیوسته آموزش ها را دنبال کرده تا با هم این مسیر را به سلامت طی کنیم، در این مطلب نیز می خواهیم به یکی دیگر از مباحث، یعنی آشنایی با نحوه کار switch و case در جاوا اسکریپت بپردازیم.
دستور switch در جاوا اسکریپت (JavaScript)

در بحث پیشین دیدیم که چگونه با if و else و ترکیب آنها یعنی elseif دستوراتی شرطی (Conditional Statements) را تعریف کنیم، همچنین با حلقه های for و while به کمک مثال هایی آشنا شدیم، اکنون می خواهیم ببینیم که دستور switch چه کاربردی در برنامه نویسی جاوا اسکریپت دارد.
به صورت ساده از دستور switch برای انتخاب موارد (case) گوناگون بر اساس درست شدن (true شدن) یک رابطه استفاده می شود، مثلا فرض کنید برای روزهایی که هوا بارانی است، از قفسه لباس های خود، کاپشن را برمی گزینیم و برای روزهای آفتابی و گرم، از لباسی پارچه ای استفاده می کنیم، یک دست لباس ساده نیز برای مواقعی که هوا نه گرم و نه سرد (معمولی) است داریم، کارکرد switch و case شباهت زیادی به این رفتار ما دارد، یعنی با توجه به شرایط بیرونی که برایش تعریف می کنیم، یکی از موارد (case) درون خود را به خروجی ارسال می کند، به مثال زیر توجه کنید.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

توضیح:
– در مثال بالا ابتدا در متغیر فرضی lang زبان فارسی را تنظیم کرده ایم، سپس در قسمت مربوط به دستور switch، متغیر lang را به عنوان مقادیر به آن داده ایم که به این صورت switch بین case های خود جستجو نموده و مقادیر مشابه با مقدار متغیر lang را انتخاب می کند و به خروجی می دهد (با دستور document.write)، اگر هیچ کدام از موارد با مقادیر متغیر lang برابر نباشد، قسمت مربوط به خروجی پیش فرض یا default اجرا خواهد شد.
– دقت کنید که پس از هر قسمت از case، یک break آمده که مفهوم آن خاتمه خواندن switch است، یعنی هرجا حاصل جستجوی دستور switch درست (true) باشد، قسمت مربوط به break اجرا شده و جستجوی switch خاتمه می یابد.
– اگر break را از کد بالا حذف کنیم، همه مقادیر case ها به خروجی ارسال می شوند، چون کد را باید در جایی متوقف می کردیم که این کار را انجام نداده ایم.
استفاده از دستور switch در حالت داینامیک

اصولا زبان های برنامه نویسی ساخته شده اند تا به طور هوشمندانه کارها را کنترل کنند، لذا در مورد دستور switch هم می توان از مقادیری داینامیک و متغیر برای مقایسه case های آن استفاده کرد، مثلا با توجه به نام کاربری افراد یا زمان فعلی سیستم پیامی به آنها نشان داد، یا در حالت های پیشرفته تر با دریافت اختلاف زمانی کشور کاربر و مقایسه آن با سرور، کارها را به وقت محلی تنظیم نمود و خیلی چیزهای دیگر، در مثال زیر  با استفاده از توابع Date و getDay، عدد متناظر با هر روز (از روزهای هفته) را دریافت و با توجه به آن، یکی از موارد (case) ها را به خروجی ارسال کرده ایم، ملاحظه می کنید که بر اساس روزهای هفته خروجی ما نیز متغیر خواهد بود، به اینصورت می توان به صورت داینامیک از  switch و case در جاوا اسکریپت استفاده کرد.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

توضیح:
– تابع date و getDay در حالت عادی با روز و زمان میلادی کار می کنند، لذا بر اساس اینکه یکشنبه روز تعطیل در تقویم میلادی محسوب می شود (روز هفتم)، شروع شمارش روزهای هفته از دوشنبه (case 1) خواهد بود.
– اعدادی که به عنوان مقادیر به case ها داده شده اند، در واقع حاصل و نتیجه برگردانده شده از قسمت date.getDay و با توجه به تاریخ تنظیم شده سیستم است که بین ۱ تا ۷ در نوسان است.
– برای دیدن نحوه عملکرد کدهای جاوا اسکریپت، کافی است آن را در یک صفحه یا ویرایشگر html مانند برنامه Adobe dreamweaver کپی کرده و با فرمت html ذخیره نمائید و در مرورگر خود آن را اجرا کنید.
پیش نمایش آنلاین

در زیر کد و پیش نمایش آنلاین مثال بالا را جهت نمونه می توانید ملاحظه کنید.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

توابع در جاوا اسکریپت :

تعریف تابع :

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

قابلیت های تابع :

استفاده از توابع در صفحات و اسکریپت ها ، امکانات زیر را به برنامه نویس می دهد :

دستورات یک تابع ( حتی در زمانی که اسکریپت آن در درون صفحه قرار دارد ) ، تا زمانی که فراخوانی نشود ، اجرا نخواهد شد . از توابع برای تعریف دستور العمل هایی استفاده می شود که می خواهیم اجرای آنها کنترل شده باشد و در مواقع معینی ( مثل وقوع یک رویداد یا … ) انجام شود .

یک تابع را می توان از هر نقطه ای در صفحه فراخوانی کرد .

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

محل تعریف توابع :

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

شکل کلی تعریف توابع :

برای تعریف یک تابع از واژه کلیدی function به شکل کلی زیر استفاده می شود :

function نام تابع ( ) { دستورات تابع }

 

مثال :در مثال زیر یک تابع به نام welcome ، تعریف شده است . این تابع تا زمانی که فراخوانی نشود اجرا نشده و خروجی ندارد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

نحوه فراخوانی تابع :

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

نام تابع ( ) ;

 

مثال :در مثال زیر تابع welcome را که در مثال قبل نیز استفاده کرده بودیم را توسط یک اسکریپت دیگر فراخوانی کرده ایم .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

خروجی :

welcome to CtBoard.com

 

نکته : یک تابع را می توان توسط رویدادهای یک کنترل HTML مثل یک دکمه فرمان نیز فراخوانی کرد . در این حالت باید مقدار رویداد مورد نظر را در تگ کنترل ، برابر نام تابع در نظر گرفت . به مثال زیر دقت کنید .
مثال : در مثال زیر تابع welcome که در مثال قبل توسط یک اسکریپت دیگر فراخوانی شده بود ، در اینجا توسط رویداد کلیک ( onclick ) دکمه فرمان btnclick فراخوانی می شود . برای فراخوانی تابع بر روی دکمه فرمان مثال کلیک کنید .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

نحوه تعریف پارامتر برای یک تابع :

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

شکل کلی تعریف پارامتر برای یک تابع بع صورت زیر است :

funciton نام تابع ( Parametr 1 , Parametr 2 , ... ) { دستورات تابع } مثال : function multiple ( var num1 , var num2 ) { دستورات تابع }

 

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

مثال : در مثال زیر تابع multiple را که در بالا تعریف کرده بودیم با تعیین پارامترهای لازم ، فراخوانی کرده ایم :

multiple ( 2 , 10 ) ;

 

نکته مهم : پارامتر های یک تابع ، به عنوان متغیرهای محلی برای آن تابع قابل استفاده هستند .

مثال : در مثال زیر تابع multiple با دو پارامتر num1 و num2 تعریف شده است ، که این تابع این دو عدد را در هم ضرب کرده و به عنوان خروجی روی صفحه نمایش می دهد . این تابع در یک اسکریپت دیگر توسط تابع Call_Function فراخوانی می شود . این تابع دو عدد را از دو کادر متن مثال دریافت کرده و به ترتیب آنها را در متغیرهای a , b ذخیره می کند .  سپس آن را در هنگام فراخوانی به تابع multiple پاس می دهد . توجه شود که از متغیر های دیگر نیز می توان برای فراخوانی استفاده کرد . برای مشاهده خروجی ۲ عدد را در کادر متن ها وارد کرده و بر روی دکمه فرمان multiple کلیکگ کنید .

< script type="text/javascript" > function multiple ( num1 , num2 ) { document.write ( num1 * num2 ) ; } < /script > < script type="text/javascript" > function Call_Function ( ) { var a = Text1.value ; var b = Text2.value ; multiple ( a , b ) ; فراخوانی تابع با پارامترهای لازم و چاپ خروجی } < /script > < input type="button" id="Button2" onclick="Call_Function( )" value=" click me ! " /> < input type="text" id="Text1" /> < input type="text" id="Text2" />

نحوه تعریف مقدار بازگشی برای یک تابع :

یک تابع می تواند پس از انجام دستورات در نظر گرفته شده برای آن ، مقداری را به عنوان خروجی به نقطه ای که از آن فراخوانی شده است ، باز گرداند .
برای تعیین مقدار بازگشتی یک تابع از دستور return استفاده کرده ، که مقدار خروجی را درپرانتز مقابل آن دستور به شکل زیر تعریف می کنیم .

return ( مقدار بازگشتی ) ;

 

نکته : مقدار بازگشتی ، می تواند یک رشتته یا عدد ، یک متغیر و یا یک عبارت محاسباتی باشد .

مثال : تابع multiple را در مثال قبل با دستور return بازنویسی کرده ایم . در این حالت تابع به جای استفاده از دستور document.write با دستور return ، مقدار را برای چاپ خروجی به تابع Call_Function بر می گرداند :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

رویداد ها (events) در جاوا اسکریپت (JavaScript)

یکی از قابلیت های بسیار مفید و کاربردی استفاده از جاوا اسکریپت (JavaScript) در طراحی صفحات و برنامه های تحت وب، واکنش های تعاملی آن متناسب با رفتار کاربر است، به فرض هنگامی که روی یک دکمه در صفحه ای کلیک می شود، می توان همزمان یا پس از آن، تابعی مبتنی بر جاوا اسکریپت را در سمت کاربر اجرا کرد و پیش از ارسال درخواست به سرور، پردازش های اولیه را بر روی آن انجام داد، این قدرت جاوا اسکریپت بیشتر متکی بر عناصری به نام رویداد (event) است که با وقوع آنها، عملیات تعریف شده خاصی در مرورگر اجرا می شود، در ادامه آموزش در این باره بیشتر خواهیم گفت.

معنی رویداد (event) در جاوا اسکریپت

به طور ساده رویداد (event) در برنامه نویسی جاوا اسکریپت به معنی اتفاقی در یک صفحه وب است که می تواند عامل آن، کاربر یا به فرض بارگذاری کامل یک صفحه باشد، بعد از بروز این اتفاق (رویداد)، مفسر جاوا اسکریپت مرورگر، آن را شناسایی کرده و متناسب با تابع تعریف شده، آن را اجرا می کند، لذا همانطور که پیش تر در بحث توابع (functions) دیدیم، رویدادها در واقع حکم استارت، برای موتور توابع را بازی می کنند و یک تابع بدون رویداد معمولا قابل اجرا نیست، برای آشنایی بیشتر به مثال زیر توجه کنید (کافی است کد را در یک صفحه html کپی و آن را تست کنید).

 

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

نحوه فراخوانی تابع بالا با رویداد onclick:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

لیست رویداد ها در جاوا اسکریپت

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

addEventListener چیست؟

addEventListener که در برخی رویداد های بالا ذکر شده، به معنی شیوه استاندارد و تعریف شده W3C است که توسط آن با اجرای یک رویداد بر روی یک عنصر،  مرورگر گوش به زنگ آن بوده و (بدون نسبت دادن مستقیم آن رویداد) توابع مربوط به آن فراخوانی می شوند، این امکان در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود، ولی معادل آن attachEvent است (به جزء اینترنت اکسپلورر، سایر مرورگر ها از addEventListener پشتیبانی می کنند)، به طور مثال تابع زیر با کلیک بر روی بلاک با آی دی فرضی black اجرا می شود:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

در مثال و پیش نمایش آنلاین، در انتهای این صفحه، می توانید نمونه ای از آن را ملاحظه کنید.

مثال و پیش نمایش آنلاین

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری
    • 1 Posts
    • 4 Views
    • 1 Posts
    • 3 Views
    • 1 Posts
    • 4 Views
    • 1 Posts
    • 3 Views
    • 1 Posts
    • 5 Views
    • 1 Posts
    • 5 Views
    • 1 Posts
    • 8 Views

  • سفارش پروژه برنامه نویسی

×
×
  • اضافه کردن...