مباحثی که در این جلسه می خوانیم:
- تعریف تابع
- نوشتن تابع
- فراخوانی تابع
- مثال های تابع
بخش اول : تعریف تابع
گاهی ممکن است در یک بخش نیاز به تکرار یک کد داشته باشیم در این مواقع مجبوریم دوباره آن کد را از اول بنویسیم. تابع ها در واقع کد یا کدهایی هستند که فقط یک بار نوشته می شوند، تحت یک نام نگهداری می شوند که با استفاده از فراخوانی آنها می توانیم به دفعات از آنها استفاده کنیم.
بخش دوم : نوشتن تابع
توضیحات:
تابع ها را با کلمه کلیدی function شروع و پس از آن یک نام برای آن تابع انتخاب می کنیم. همیشه باید پس از نام تابع پرانتز را قرار دهیم، و بعد از آکولاد دستورات را می نویسیم. این دستورات می توانند هر کدی باشند: یک پیام، یک شرط، یک شیء با متدهایش، یک حلقه و…
در این کد، ما تابعی را ایجاد کردیم که کار آن نمایش یک پیام است. یعنی در واقع ما هرجا که به این پیام نیاز داشته باشیم، نیازی نیست که هر دفعه کد مربوط به alert را بنویسیم و فقط کافیه که تابع رو با نامش صدابزنیم.
بخش سوم : فراخوانی تابع
برای استفاده از تابع ها حتما باید آن تابع را با استفاده از نامش صدا بزنیم. یکی از راه های فراخوانی تابع، استفاده از رویدادها می باشد. برای مثال می خواهیم با کلیک بر روی یک دکمه تابع بالا فراخوانی شود و یک پیام نمایش داده شود، در این صورت از رویداد onClick استفاده می کنیم.
۷ |
<" funA() "input type="button" value="Close" onClick= > |
|
توضیحات:
در این مثال، ابتدا یک تابع با نام funA وبا عملیات alert را ایجاد کردیم، بعد پس از ساختن یک دکمه این تابع را در قسمت رویداد کلیک دکمه صدا زدیم.
نکته: فراموش نکنید در هنگام فراخوانی، علامت پرانتز را حتما قرار دهید.
بخش چهارم: مثال ها
مثال ۱: مثال قسمت setTimeout در فصل ۴ را به خاطر دارید؟ همانطور که گفته بودم امروز باهم این مثال رو اجرا می کنیم.
یادآوری: متد setTimeout در واقع یک مهلت زمانی برای کاربر ایجاد می کند. و متد clearTimeout این مهلت زمانی را از کاربر می گیرد.
صفحه ای داریم با یک دکمه به نام color، می خواهیم اسکریپتی بنویسیم که اگر کاربر در مدت ۱۰ ثانیه روی آن کلیک نکند پیامی به او نمایش دهد که “متاسفم، تغییرات انجام نشد.” و اگر در این ۱۰ ثانیه روی آن دکمه کلیک کرد، رنگ زمینه صفحه تغییر کند و پیامی با متن ” درخواست شما انجام شد و رنگ زمینه تغییر کرد.” را نمایش دهد.
۰۴ |
") } function a() { alert("sorry, dont changes |
۰۶ |
) } function sTime() { s=setTimeout("a() " ,10000 |
۱۰ |
" document.bgColor="silver |
۱۱ |
") ; alert (" Your request do and change Background color |
۱۶ |
< " () input type="button" value="Color" onClick="cTimer < |
|
توضیحات:
در ابتدا تابع a را برای ایجاد پیام ساختم و در تابع دوم(sTime) از دستور setTimeout استفاده کردم که آرگومان اول آن، همان دستوری است که باید پس از ۱۰ ثانیه اجرا شود(در اینجا تابع a() برای ایجاد پیام فراخوانی شده) وآرگومان دوم همان مدت زمان برحسب میلی ثانیه است که در این کد، ۱۰۰۰۰ میلی ثانیه یعنی ۱۰ ثانیه است. دستور setTimeout را در یک متغیر ذخیره کردم (از این متغیر در متد clearTimeout استفاده می شود.)
از تابع سوم برای ایجاد دستور clearTimeout استفاده کردم که این دستور در واقع setTimeout را غیر فعال و از اجرای آن جلوگیری می کند. همچنین در این تابع رنگ زمینه تغییر داده شده و پیامی به کاربر نمایش داده می شود.
و در انتها تابع sTime فراخوانی شده تا با باز شدن صفحه این تابع اجرا شود و در صورت کلیک نکردن دکمه پیام را به کاربر نمایش دهد. تابع cTime هم در رویداد کلیک دکمه فراخوانی شده و با کلیک روی دکمه دستوراتش اجرا می شود.
نکته: دقت کنید که در هنگام فراخوانی توابع، پرانتز آنها را فراموش نکنید.
مثال ۲: می خواهیم به کمک تابع ها صفحه ای به شکل زیر ایجاد کنیم، که کاربر با انتخاب هر گزینه و انتخاب یک رنگ نتیجه را ببیند، مثلا با انتخاب Background رنگ صفحه تغیر کند، با انتخاب Forcolor رنگ متن تغییر کند و… من مرحله به مرحله کدها رو می نویسم و هر قسمت رو توضیح میدم:
لینکی که در صفحه(در قسمت دمو) مشاهده می کنید هم آدرس سایتی است که می توانید در آن مطالبی رو در مورد فریم ورک و کتابخانه های جاوا اسکریپت بخونید و با جاوا بیشتر آشنا شوید.
۴ |
a link for study JavaScript: |
|
وضیحات: در این قسمت ابتدا با استفاده از تگ یک پاراگراف را برای نوشتن متن در صفحه ایجاد کردیم.(تگ یکی از تگ ها در HTML می باشد که از این تگ برای نوشتن متن در صفحه استفاده می شود.)
a : این تگ در HTML برای ایجاد پیوند استفاده می شود، که یکی از پارامترهای این تگ یعنی href آدرس صفحه مقصد را مشخص می کند. و متن لینک شده را باید بین تگ شروع و پایان آن قرار دهیم.
حالا باید لیست بازشو را بسازیم.
۰۲ |
: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> |
|
وضیحات: لیست های بازشو، دکمه ها، کادرهای انتخاب، دکمه های رادیویی،کادرهای متن،فیلد پسورد و… همگی بخش هایی از یک فرم در صفحه را تشکیل می دهند، پس برای ایجاد آنها باید اول از تگ استفاده کنیم.
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 به صورت آماده در صفحه قرار دهید و فقط کدهای این قسمت رو بنویسید:
۲ |
<input type="radio" value="fgc" name="Fradio" > Forecolor</input><p> |
۳ |
<input type="radio" value="linkc" name="Fradio" > Linkclo/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 |
توضیحات: |
وضیحات: بعضی از خصوصیات یک شیء، خود دارای خصوصیاتی هستند. مثل form که یکی از خصوصیات شیء document است و خود دارای خصوصیاتی مانند لیست، دکمه و… می باشد که هر کدام از آنها نیز دارای خصوصیتی هستند. پس برای بررسی ویژگی های آنها باید از اولین شیء مربوطه استفاده کنیم مانند خط دوم در این دستور.(خط بعد از تعریف تابع)
ما اول یک تابع با نام colors ایجاد کردیم ، و در خط بعد با نوشتن کد document.form1 . colorlist.options
به جاوا فهماندیم که مقدار انتخاب شده در لیستی که نام آن colorlist می باشد ودر فرمی به نام form1 قرار دارد که این فرم متدی برای شیء document است را در متغیر c بریزد.
نکته:هر دستوری که بین [ ] قرار میگیرد یعنی اختیاری می باشد و در این قسمت، کد۱
یعنی شما می تونید یکی از این دو دستور را بنویسید:
هر دو دستور یک کار را انجام می دهند یعنی انتخاب کاربر را نشان می دهند. البته اگه با نوشتن یکی از این دو کد(۲ یا ۳) جواب نگرفتین، می تونید از هر دو کد استفاده کنید یعنی به شکل کد ۱٫
من پیشنهاد می کنم از کد ۱ استفاده کنید.
در خط بعد شرطی به این شکل نوشتم: اگر دکمه رادیویی اول(Background) انتخاب شد، رنگ زمینه صفحه به رنگ متغیرc درآید، شرط بعدی: اگر دکمه دوم انتخاب شد (Fradio [1] . checked )رنگ انتخابی کاربر در لیست(که در متغیر c قرار دارد) روی متن صفحه تاثیر گذارد و به همین ترتیب تا خط آخر.
نکته: نام دکمه های رادیویی رو در تگ input name=” ” یکسان انتخاب کردم و در شرط ها با دادن شماره به آنها، برای جاوا اسکریپت مشخص کردم که مقصود من کدام دکمه است.
:else if از کلمه if در کنار else وقتی استفاده می کنیم که بخواهیم چندین شرط برای برنامه تعیین کنیم.
شما می توانید دموی این دستور را در ابتدای صفحه مشاهده کنید.
