آموزش جاوا اسکریپت در یازده روز – روز ششم (توابع)

یکشنبه, ۲ام اسفند , ۱۳۸۸ | ۱۱ دیدگاه

سلام، در این جلسه قراره بیشتر با همون دستورات جلسات قبل کارکنیم. و قسمت جدید فقط یه دستور ساده است که با اون کلی کارمون راحت تر میشه و دیگه نیازی به تکرار دستورات نداریم.

مباحثی که در این جلسه می خوانیم:

  • تعریف تابع
  • نوشتن تابع
  • فراخوانی تابع
  • مثال های تابع

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

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

بخش دوم :  نوشتن تابع

< script >
() نام function
}
("alert ("function
{
< / script >

توضیحات:

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

بخش سوم :  فراخوانی تابع

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

<body>
<script>
	funA()	function
{alert("function")}
</script>
<form>
<" funA() "input type="button"  value="Close"   onClick= >
</form>
</body>

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

بخش چهارم: مثال ها

مثال ۱: مثال قسمت setTimeout در فصل ۴ را به خاطر دارید؟ همانطور که گفته بودم امروز باهم این مثال رو اجرا می کنیم.
یادآوری: متد setTimeout در واقع یک مهلت زمانی برای کاربر ایجاد می کند. و متد clearTimeout این مهلت زمانی را از کاربر می گیرد.
صفحه ای داریم با یک دکمه به نام color، می خواهیم اسکریپتی بنویسیم که اگر کاربر در مدت ۱۰ ثانیه روی آن کلیک نکند پیامی به او نمایش دهد که “متاسفم، تغییرات انجام نشد.” و اگر در این ۱۰ ثانیه روی آن دکمه کلیک کرد، رنگ زمینه صفحه تغییر کند و پیامی با متن ” درخواست شما انجام شد و رنگ زمینه تغییر کرد.” را نمایش دهد.

<body >
<script>

")  } function a() {  alert("sorry, dont changes
 var s;
)  } function sTime()  {  s=setTimeout("a() " ,10000
function cTimer ()
{
) clearTimeout ( s
 " document.bgColor="silver
") ;  alert (" Your request do and change Background color
  {
sTime () ;
< /script>
 <form>
  < " () input type="button" value="Color"  onClick="cTimer <
 </form>
<body />

توضیحات:
در ابتدا تابع a را برای ایجاد پیام ساختم و در تابع دوم(sTime) از دستور setTimeout استفاده کردم که آرگومان اول آن، همان دستوری است که باید پس از ۱۰ ثانیه اجرا شود(در اینجا تابع a() برای ایجاد پیام فراخوانی شده) وآرگومان دوم همان مدت زمان برحسب میلی ثانیه است که در این کد، ۱۰۰۰۰ میلی ثانیه یعنی ۱۰ ثانیه است. دستور setTimeout را در یک متغیر ذخیره کردم (از این متغیر در متد clearTimeout استفاده می شود.)

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

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

مثال ۲: می خواهیم به کمک تابع ها صفحه ای به شکل زیر ایجاد کنیم، که کاربر با انتخاب هر گزینه و انتخاب یک رنگ نتیجه را ببیند، مثلا با انتخاب Background رنگ صفحه تغیر کند، با انتخاب Forcolor رنگ متن تغییر کند و… من مرحله به مرحله کدها رو می نویسم و هر قسمت رو توضیح میدم:

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

<html>
 <body>
  <p align="left">
   a link for study JavaScript:
<a href="http://www.macromediax.com"> www.macromediax.com</a>
  </p>

توضیحات: در این قسمت ابتدا با استفاده از تگ یک پاراگراف را برای نوشتن متن در صفحه ایجاد کردیم.(تگ یکی از تگ ها در HTML می باشد که از این تگ برای نوشتن متن در صفحه استفاده می شود.)

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

حالا باید لیست بازشو را بسازیم.

<form name="form1" >
 :please select one color

 <select name="colorlist" size=1>
  <option> Red </option>
  <option> Royalblue </option>
  <option> violet </option>
  <option> Pink </option>
  <option> Yellow </option>
  <option> Gold </option>
  <option> silver </option>
 </select>

توضیحات: لیست های بازشو، دکمه ها، کادرهای انتخاب، دکمه های رادیویی،کادرهای متن،فیلد پسورد و… همگی بخش هایی از یک فرم در صفحه را تشکیل می دهند، پس برای ایجاد آنها باید اول از تگ

استفاده کنیم.

s e l e ct : این تگ، یک لیست خالی را می سازد، با پارامتر name برای این لیست یک نام انتخاب می کنیم(این نام در قسمت های بعدی مورد نیاز است).

o p t i o n: با استفاده از این تگ، می تونیم به لیست مقدار بدیم.(مقادیری که در بین این تگ قرار می گیرند، در لیست نمایش داده می شوند.)

با کمک تگ های زیر دکمه های رادیویی(option Button) رو ایجاد می کنیم.

input   type="radio"   value="bgc"     name="Fradio"   checked>Background</input><p>
  <input   type="radio"   value="fgc"         name="Fradio" > Forecolor</input><p>
  <input   type="radio"    value="linkc"       name="Fradio" > Linkcolor</input><p>
  <input    type="radio"    value="alinkc"    name="Fradio" > Alinkcolor</input><p>
  <input    type="radio"     value="vlinkc"   name="Fradio" > Vlinkcolor</input><p>
   </()"  <input     type="button"   value="Apply"   name="app"      onclick="colors

توضیحات:
input : برای ایجاد دکمه ها، دکمه های رادیویی، فیلد متن وپسورد از این تگ استفاده می کنیم .
که با پارامتر type نوع آن مشخص می شود، که در ۵ خط اول type=radio یعنی دکمه های رادیویی را می سازد. نام این دکمه هارا یکسان انتخاب کنید. کلمه checkedدر تگ اول به این معناست که پس از باز شدن صفحه، این دکمه انتخاب شده باشد.

در خط آخر دکمه Apply را ایجاد کردیم که پارامتر value برچسب روی دکمه را تعیین می کند. در رویداد کلیک آن هم یک تابع فراخوانی شده که در قسمت بعد آن تابع را می نویسیم.

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

   <script>
   () function colors
      }
var c=document.form1.colorlist.options
             [document.form1.colorlist.selectedIndex].text
      ) if (document.form1.Fradio[0].checked
       {; document.bgColor=c }
      ) else if(document.form1.Fradio[1].checked
       {; document.fgColor=c}
     ) else if(document.form1.Fradio[2].checked
       {; document.linkColor=c}
      ) else if(document.form1.Fradio[3].checked
       {; document.alinkColor=c }
     )  else if(document.form1.Fradio[4].checked
       {; document.vlinkColor=c }
       {

توضیحات: بعضی از خصوصیات یک شیء، خود دارای خصوصیاتی هستند. مثل form که یکی از خصوصیات شیء document است و خود دارای خصوصیاتی مانند لیست، دکمه و… می باشد که هر کدام از آنها نیز دارای خصوصیتی هستند. پس برای بررسی ویژگی های آنها باید از اولین شیء مربوطه استفاده کنیم مانند خط دوم در این دستور.(خط بعد از تعریف تابع)

ما اول یک تابع با نام colors ایجاد کردیم ، و در خط بعد با نوشتن کد document.form1 . colorlist.options
به جاوا فهماندیم که مقدار انتخاب شده در لیستی که نام آن colorlist می باشد ودر فرمی به نام form1 قرار دارد که این فرم متدی برای شیء document است را در متغیر c بریزد.

نکته:هر دستوری که بین [ ] قرار میگیرد یعنی اختیاری می باشد و در این قسمت، کد ۱

document.form1.colorlist.options
[document.form1.colorlist.selectedIndex].text

یعنی شما می تونید یکی از این دو دستور را بنویسید:

c= document.form1.colorlist.options.text

و یا:

document.form1.colorlist.selectedIndex.text c=

هر دو دستور یک کار را انجام می دهند یعنی انتخاب کاربر را نشان می دهند. البته اگه با نوشتن یکی از این دو کد(۲ یا ۳) جواب نگرفتین، می تونید از هر دو کد استفاده کنید یعنی به شکل کد ۱٫
من پیشنهاد می کنم از کد ۱ استفاده کنید.

در خط بعد شرطی به این شکل نوشتم: اگر دکمه رادیویی اول(Background) انتخاب شد، رنگ زمینه صفحه به رنگ متغیرc درآید، شرط بعدی: اگر دکمه دوم انتخاب شد (Fradio [1] . checked )رنگ انتخابی کاربر در لیست(که در متغیر c قرار دارد) روی متن صفحه تاثیر گذارد و به همین ترتیب تا خط آخر.

نکته: نام دکمه های رادیویی رو در تگ input name=” ” یکسان انتخاب کردم و در شرط ها با دادن شماره به آنها، برای جاوا اسکریپت مشخص کردم که مقصود من کدام دکمه است.

:else if از کلمه if در کنار else وقتی استفاده می کنیم که بخواهیم چندین شرط برای برنامه تعیین کنیم.

شما می توانید دموی این دستور را در ابتدای صفحه مشاهده کنید.

پستهای مرتبط :

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

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

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

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

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

Be Sociable, Share!


۱۱ دیدگاه


  1. امین
    ۳ اسفند ۱۳۸۸

    بازم عالی. ممنون.




  2. فائزه
    ۲۱ خرداد ۱۳۸۹

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




  3. ترنم
    ۹ دی ۱۳۸۹

    سلام یه کد از جاوا می خوام که بشه یه تصویر ور از یه طرف صفحه وارد و از طرف دیگه ایخارج کرد
    استادمون گفته از دستور set time out باید استفاده کنیم اما احساس می کنم بی ربط باشه




  4. صدف
    ۱۳ دی ۱۳۸۹

    salam
    azize delam be dadam beres
    ۳ ta soal hast ke man ta emshab bayad javabeshoono bedoonam
    man aslan java balad nistam
    age mitooni komakam kon
    برنامه ای که عددی را دریافت کند و مجموع آن را چاپ کند با استفاده از تابع
    برنامه ای که تعداد مقشوم علیه هارو محاسبه کنه با تابع
    برنامه ای که عددی را به دست آور با استفاده از تابع باینری نمایش دهد.
    تورو خدا کمکم کن
    mitooni baram javab bedi va email koni?




  5. عاطفه
    ۱۳ دی ۱۳۸۹

    ترنم جان از setInterval برای تکرار یک دستور و ایجاد انیمیشن استفاده میشه. چون اینجاهم نیازه که دستور تغییرمکان تصویر در یک فاصله زمانی تکرار بشه از SetInterval استفاده میشه. اگه بخوای کدشو برات ایمیل میکنم.

    صدف جان شما این برنامه هارو با چه زبانی میخوای بنویسی؟ جاوااسکریپت یا زبانهای دیگه؟




  6. امید
    ۱۷ دی ۱۳۸۹

    برای دونستن تفاوت توابع setInterval و setTimeout میتونید به لینک زیر برین:
    http://javascript.about.com/library/blstvsi.htm
    یا حق ج




  7. ترنم
    ۱۸ دی ۱۳۸۹

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




  8. امید
    ۳۰ دی ۱۳۸۹

    خواهش میکنم،وظیفه بود خانم ترنم.




  9. ترنم
    ۱ بهمن ۱۳۸۹

    سلام عاطفه جان تو زبون #c دستور validator یا بهتر بگم شی validator چه خصوصیت هایی داره؟
    منظورم اینه که واسه چی ازش استفاده میشه؟
    مرسی




  10. عاطفه
    ۱۶ بهمن ۱۳۸۹

    ترنم جان به طور مختصر validator کنترل کننده است، یعنی صحت ورود داده توسط کاربر رو کنترل میکنه که داده ی ورودی با پیش فرض برنامه یکی باشه یعنی مثلا کاربر به جای عدد رشته وارد نکنه و …




  11. xml
    ۱ فروردین ۱۳۹۱

    زحمت کشیدید خیلی ممنون از آموزشتون امیدوارم این کارتون ادامه داشته باشه



دیدگاه خود را بنویسید