سلام، مطالب این جلسه بسیار مهم هستند، در این جلسه یادمیگیریم که چطور با استفاده از حلقه ها دستوراتی که نیاز داریم رو به تعداد دلخواه تکرار کنیم.
مباحثی که در این جلسه میخوانیم:
۱- دستور for
۲- دستور while
۳- دستور do… while
بخش اول : دستور for
for یکی از رایج ترین و پرکاربردترین ابزار حلقه است، این دستور مجموعه ای از دستورات را به تعداد دفعات مشخصی تکرار میکند.
| ۱ for (counter ; condition ; step) ۲ { ۳ Codes ۴ } |
همانطور که مشخص است دستور for سه پارامتر دارد که هر یک را با سمی کالن (;) از هم جدا میکنیم. اولین پارامتر: شمارنده حلقه(ابتدای حلقه)، condition: شرط حلقه یا همان انتهای حلقه و step: گام حرکت حلقه است (گام حلقه هم میتواند مثبت باشد هم منفی). به مثال زیر توجه کنید: این مثال پیامی را ۳ بار متوالی نمایش میدهد. نتیجه
| ۱ For (i=1 ; i<=3 ; i++) ۲ { alert (“this is a test “) } |
توضیحات:
مقدار اولیه متغیر i را یک تعیین کردیم و شرط حلقه این است که i یا کوچتر از ۳ باشد یا مساوی ۳
یعنی اگر مقدار i به ۴ برسد حلقه متوقف میشود.
در حلقه چه اتفاقی می افتد: در ابتدا مقدار ۱ در متغیر i ریخته شد، بعد از آن حلقه، شرط را بررسی میکند به این صورت که آیا مقدار فعلی i (1) کوچکتر یا مساوی ۳ است؟ و به دلیل اینکه شرط درست است ادامه دستورات را انجام میدهد یعنی مقدار i را یک واحد اضافه میکند(i++) و i میشود ۲ (در اینجا گام حلقه مثبت است) بعد دستورات را اجرا میکند و یکبار پیام ظاهر میشود.
دوباره به ابتدای حلقه برمیگردد، این بار مقدار i برابر است با ۲ باز بررسی میکند که آیا ۲ از ۳ کوچکتر است وبعد مقدار i را افزایش داده و بار دیگر پیام را نمایش میدهد و دوباره در ابتدای حلقه شرط بررسی میشود و چون مقدار I (3) مساوی ۳ و شرط برقرار است یک واحد به i اضافه شده و پیام نمایش داده میشود، در دفعه آخر که مقدارi ، ۴ است در بررسی شرط چون i کوچکتر یا مساوی ۳ نیست جاوا از حلقه خارج میشود و دستور را اجرا نمی کند وحلقه به پایان میرسد.
اگر توجه کرده باشید یکی از مزایای حلقه ها این است که کدنویسی را کم میکند، مثلا در این کد اگر از حلقه ها استفاده نمی کردیم باید ۳ بار از دستور alert استفاده میشد. البته شاید اینجا نوشتن ۳ بار دستور alert مشکل نباشد ولی در کدهای طولانی ضرورت استفاده از حلقه ها احساس میشود.
یک نکته: مثال هایی که تا این جلسه تمرین کردیم، فقط برای یادگیری بهتر مطلب بوده و ممکنه بعضی از آنها اصلا کاربرد نداشته باشند مثل تغییر رنگ زمینه به انتخاب کاربر. که این کار جالب نیست، یا نمایش پیام خوش آمدگویی چون این کار هم قدیمی شده و چیزی جز نارضایتی برای کاربر را به دنبال ندارد، ممکنه فردی برای اولین بار که به سایت شما می آید با نمایش پیام مخالف نباشد اما فردی که کاربر دائمی شماست به مرور زمان این پیام برای او خسته کننده میشود. اما مثال زیر یک مثال کاربردی است که خوب است آن را تمرین کنیم.
مثال۲: یک فرم عضویت رو در نظر بگیرید، ممکن است کاربر اتفاقی یک فیلد رو خالی رهاکند که آن داده برای شما ضروری میباشد، میخواهیم کدی رو بنویسیم که دریک فرم اگر کاربر فیلدی رو خالی گذاشت با یک پیام به او تذکر داده شود تا کاربر متوجه شود که اشتباه کار در کجاست.
در ابتدا دموی این اسکریپت را از اینجا ببینید. کدنویسی رو با ایجاد ۳ فیلد متنی شروع میکنیم.
| ۰۱ <body> ۰۲ <p align=”left” > ۰۳ ۰۴ <form name=”form1″ onSubmit=”return checkform(this)”> ۰۵ ۰۶ Your name: <br/><input type=”text” name=”name” /> <br/> ۰۷ ۰۸ Your Email addres: <br/> <input type=”text” name=”Email” /> <br/> ۰۹ ۱۰ Tel: <br/> <input type=”text” name=”Tel” /> </p> ۱۱ ۱۲ <p/> //پاراگراف خالی برای ایجاد فاصله |
در اینجا سه فیلد متنی ایجاد کردیم با نام های مختلف(با کمک تگ Input)، نام فرم را form1 گذاشتم، توجه کنید که نام فرم و عناصر آن مثل فیلدها و دکمه ها مهم میباشد . onSubmit یکی از رویدادهای فرم است و در کدنویسی از این نامها استفاده میکنیم.
بعد دکمه های clean و Register را ایجاد میکنیم.
| ۱ <input type=”reset” value=”clear” /> ۲ <input type=”submit” value=”Register” /> ۳ </form> |
۱
در اینجا همینطور که مشاهده میکنید، مقدارtype رو reset و submit قرار دادیم نه Button. دقت کنید که دو دکمه ای که در فرم مشاهده می کنید، دکمه های ساده نیستند! یعنی اگر مقدار type را Button قرار دهیم یک دکمه ساده ایجاد میشود که کاری انجام نمی دهد و ما باید برای آن کدنویسی کنیم.
ولی وقتی در تگ input مقدار پارامتر type رو submit قرار میدهیم دکمه ای ایجاد میشود که کار تحویل فرم را برعهده دارد و برای تحویل فرم نیازی به کد نویسی نداریم. رویداد onSubmit در فرم هم به این دکمه اشاره دارد، که در این رویداد تابع checkform صدا زده شده و کلمه this به همان form1 اشاره دارد. دکمه reset هم وظیفه پاک کردن فرم را برعهده دارد.
خوب، حالا میریم سراغ اسکریپت نویسی:
| ۰۱ <head> ۰۲ <script> ۰۳ function checkform(form1) { ۰۴ ۱٫var t=document.form1.elements.length; ۰۵ ۲٫var b=true; ۰۶ ۳٫for (i=0 ;i<t ;++i) ۰۷ { ۰۸ ۴٫if(document.form1.elements[i].value== “”) ۰۹ ۵٫{ b=false ۱۰ ۶٫alert(“the”+ document.form1.elements[i].name + “\n”+ “is blank. please enter a value”); ۱۱ ۷٫break; } ۱۲ } ۱۳ ۸٫return b;} ۱۴ </script></head> |
تابعی با نام checkform ایجاد کردم. در خط ۱ متغیری تعریف کردم که تعداد عناصر موجود در فرم را نگهداری میکنه. ( در جلسه چهارم با اشیاء ، متدها و خصوصیاتشون آشنا شدید. element هم یکی از خصوصیات فرم است که تمام عناصر فرم را در برمیگیرد و length خصوصیتی است که تعداد عناصر یا همان طول element را مشخص میکند.)
در خط بعد متغیری از نوع Boolean با مقدار false تعریف کردم.در خط ۴ از دستور for استفاده کردم. مقدار اولیه حلقه را صفر تعیین میکنیم ، وشرط حلقه کوچکتر بودن i از t میباشد.
حالا مرحله به مرحله بررسی میکنیم که در حلقه چه اتفاقی می افتد تا با نحوه کار حلقه ها بیشتر آشنا بشیم.
۱- اول از متغیر t شروع می کنیم، همانطور که گفتم این متغیر تعداد عناصر فرم را ذخیره میکند و همانطور که مشاهده کردید تعداد عناصر این فرم ۵ عدد میباشد(۳ فیلد متنی و ۲ دکمه). یعنی ۵=t است. فرض کنید ۳ فیلد متنی در فرم از صفر تا ۲ شماره گذاری شده اند(شماره عنصرها همیشه از صفر شروع میشود).
۲- در حلقه مقدار i صفر است، شرط: حلقه بررسی میکند که آیا مقدار فعلی i (صفر) از مقدار t (5) کوچکتر است؟ چون شرط برقرار است،حلقه ادامه پیدا میکند و یک واحد به i اضافه شده و i=1 میشود
بدنه حلقه: در بدنه حلقه میشود از هر دستوری استفاده کرد، که برای حل این مثال به دستور شرطی نیاز داریم و من از if استفادده کردم.
خط چهارم: value مقدار یک فیلد رو مشخص میکند. چون مقدار i فعلا صفر است پس element[i] یعنی عنصرصفر یا همان فیلد اول.
شرط if: اگر مقدار فیلد اول خالی بود، مقدار b را false کرده و پیغامی را نمایش میدهد.
محتویات پیام:
| ۱ ۶٫alert(“the”+ document.form1.elements[i].name + “\n”+ “is blank. please enter a value”); ۲ document.form1.elements[i].name |
این دستور نام فیلد i را در کادر پیام نمایش میدهد(خصوصیت name هر فیلد)”\n”: یک خط خالی ایجاد میکند.
is blank. please enter a value: یک مقدار ثابت است که به همین صورت در کادر پیام نمایش داده میشود.
در خط هشتم هم مقدار b دوباره true میشود.
۳- دوباره به ابتدای حلقه باز میگردیم، اینبار مقدار i یک است و باز هم شرط برقرار است و یک واحد به i اضافه میشود و اگر element[i] یعنی عنصر یک (فیلد دوم) خالی باشد با یک پیام نام این فیلد را نمایش داده و به کابر تذکر میدهد و حلقه تا آخر به همین صورت ادامه پیدا میکند تا تمام عناصر فرم را یک به یک بررسی کند.
بخش دوم : while
این دستور همان کارایی for را دارد و از همان اجزا تشکیل شده و فقط در ترکیب قرار گرفتن اجزاء فرق دارد. مثال: همان مثال اول for را با دستور while اجرا میکنیم.
| ۱ var i=1; ۲ while (i<=3) ۳ { ۴ alert (“this is test for while”); ۵ i++; ۶ } |
بخش سوم: do… while
در بعضی مواقع ما نیاز داریم که حلقه حداقل یکبار اجرا شود، حتی اگر شرط برقرار نباشد!
به مثال زیر توجه کنید:
| ۱ var i=5; ۲ do ۳ { ۴ alert (“this is test for while”); ۵ i++; ۶ } ۷ while (i<3) |
در این مثال i=5 است و شرط حلقه این است که i کوچکتر از ۳ باشد، اما با اینکه شرط برقرار نیست چون این شرط در انتهای حلقه بررسی میشود، پس حلقه یکبار اجرا شده و پیام یک بار نمایش داده میشود.
