امروز پنجشنبه ۱۳۹۷/۰۵/۲۵

2018/08/16 GMT +4:30

دسته بندی

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

حلقه for و while در جاوا اسکریپت (JavaScript)

اگر تا این مرحله، آموزش های مقدماتی بخش جاوا اسکریپت را دنبال کرده باشید، حتما با کلیاتی از آن آشنا شده اید، شیوه نگارش و دستورالعمل (syntax) آن را فراگرفته اید و قادر هستید یک کد ساده بنویسید و از آن خروجی بگیرید، در مطلب گذشته دیدیم که چگونه از مقایسه (Comparison) و شرط (If و Else) استفاده کنیم و تفکری که در ذهن داریم را در بستر مفسر جاوا اسکریپت پیاده سازی کنیم، حال در ادامه آموزش های مقدماتی می خواهیم شما را با عنصری دیگر به نام حلقه (loop) آشنا کنیم و با دو نوع پرکاربرد آن یعنی for و while به کمک مثالهایی، تمرین نمائیم.

حلقه های for و while در جاوا اسکریپت چه کاربردی دارند؟

اگر بخواهیم به زبان ساده کاربرد حلقه ها را توضیح دهیم، باید بگویم حلقه ها در زبان های برنامه نویسی (عموما) و به طور خاص در جاوا اسکریپت برای محاسبات تکراری با مقادیر متفاوت کاربرد دارند، مثلا اگر نمرات 100 دانش آموز را داشته باشیم و بخواهیم معدل آنها را حساب کنیم، به جای نوشتن کد برای تک تک آنها، یک کد به صورت حلقه می نویسیم و تنها در هر دور محاسبه، مقادیر را با نمرات و اسامی دانش آموزان جایگزین می کنیم؛ از لحاظ برنامه نویسی حلقه ها نیاز به یک شرط دارند و تا زمانی که آن شرط درست باشد (true باشد)، ادامه پیدا خواهند کرد، به عنوان نمونه، در مثالی که پیش تر ذکر شد، شرط می تواند این باشد: تا زمانی که (while) تعداد دانش آموزان به 100 نرسیده (100 > var) محاسبه را انجام بده.

حلقه for در جاوا اسکریپت (javascript for loop):

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

<script type="text/javascript">
for (i=0;i<10;i++){
}
</script>

توضیح:
- در کد ساده بالا، حرف i یک متغیر پیش فرض است که می تواند به فرض معیار یک دانش آموز باشد (هر دانش آموز را یک i فرض می کنیم!).
- در قسمت اول i را برابر صفر قرار می دهیم، چون می خواهیم از صفر شروع کنیم (i=0).
- در آرگومان (argument) دوم، به حلقه for می گوییم که تا چه زمانی تکرار شود (تا زمانی که i<10 باشد).
- در قسمت سوم حلقه، به ازای هر یک دور تکرار، متغیر i را یک واحد افزایش می دهیم و تا زمانی که i کوچکتر از 10 باشد این تکرار ادامه می یابد (دور اول = 0+1 دور دوم = 1+1 دور سوم = 2+1 و...).
- در بخش چهارم حلقه، خروجی یا محاسبات را بین {} انجام می دهیم.
در مثال زیر ما متغیر هایی را تعریف و در یک حلقه از آنها خروجی گرفته ایم.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | حلقه for در جاوا اسکریپت</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
 direction:rtl;
 font-size:12px;
 font-family:Tahoma, Geneva, sans-serif;
}
</style>
<script type="text/javascript">
//<![CDATA[
var br = '<br />';
document.write("شروع حلقه for <br />");
for (i=0;i<10;i++){
 var loop = i + 1;
 document.write("مقدار i در دور " + loop + " = " + i);
 document.write(br); 
}
document.write("پایان حلقه for <br />");
//]]>
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>
<hr />
 مقادیر متغیر در حلقه for در درون آن تعریف می شود.
</body>
</html>

پیش نمایش
توضیح:
- همانطور که در مطالب گذشته گفتیم، در کد بالا عبارت CDATA برای معتبر بودن کد از لحاظ سیستم اعتبار سنجی w3c است.
- در این مثال تمام متغیر ها و مقادیر به صورت دلخواه و فرضی تعریف شده اند.
- در حلقه for، متغیر loop را تعریف کرده ایم که با هر دور حلقه، میزان فعلی i را به اضافه یک می کند.
- سپس با دستور document.write خروجی را به مرورگر داده ایم.
اگر بخواهیم به صورت ساده ساختار حلقه را بررسی کنیم؛ در دور اول i برابر صفر است، متغیر loop برابر صفر + 1 است، پس خروجی دور اول می شود: مقدار i در دور 1 = 0 ، سپس در دور دوم i یک مقدار افزایش می یابد (به وسیله بخش سوم حلقه ++i) و می شود 1، مقدار متغیر loop می شود i + 1 که نتیجه می شود 2 (1+1) و خروجی این دور برابر است با: مقدار i در دور 2 = 1 و همین طور این ساختار ادامه می یابد تا زمانی که i کوچکتر از 10 است (i<10).

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

همانطور که دیدیم، در حلقه loop، مقداری تحت عنوان فرضی i را در خود ساختار حلقه، افزایش (یا کاهش) دادیم، اما اگر بخواهیم با توجه به متغیری دیگر، خارج از ساختار حلقه، خروجی داشته باشیم، نیاز به while داریم، while به فارسی برابر است با کلمه "مادامی که" یا "تا زمانی که"، مثلا تا زمانی که تعداد دانش آموزان به 10 نرسیده، حلقه را تکرار کن؛ به کد زیر توجه کنید تا موضوع برایتان روشن شود.

<script type="text/javascript">
var num = 0;
while (num < 10){
 num++;
}
</script>

توضیح:
- معمولا در ساختار while، متغیری خارج از ساختار حلقه ارزیابی می شود و تا زمانی که آن رابطه درست (true) باشد، خروجی حلقه پردازش می شود (خروجی الزاما در مرورگر نشان داده نمی شود).
- در کد بالا، ابتدا متغیری فرضی با عنوان num را تعریف و مقدار آن را برابر صفر قرار داده ایم، سپس به حلقه ی while می گوییم تا زمانی که num کوچکتر از 10 است، میزان num را در هر دور یک واحد افزایش بدهد (++num).
در مثال زیر، نحوه استفاده از while را ملاحظه می کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | حلقه while در جاوا اسکریپت</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
 direction:rtl;
 font-size:12px;
 font-family:Tahoma, Geneva, sans-serif;
}
</style>
<script type="text/javascript">
//<![CDATA[
var br = '<br />';
var num = 0;
document.write("شروع حلقه while <br />");
while (num < 10){
 var loop = num + 1;
 document.write("مقدار i در دور " + loop + " = " + num);
 document.write(br);
 num++; 
}
document.write("پایان حلقه while <br />");
//]]>
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>
<hr />
 مقادیر متغیر در حلقه while در بیرون آن تعریف می شود.
</body>
</html>

پیش نمایش
توضیح:
- در این مثال نیز متغیرهایی را به صورت فرضی تعریف و در حلقه ی while، مقادیر را پردازش کرده ایم، ساختار while شباهت زیادی به for دارد، لذا از توضیحات مربوط به for تا حدود زیادی می توانیم در مورد while نیز استفاده کنیم.
- توجه کنید که حتما حلقه خود را طوری تعریف کنید که پایان پذیر باشد!، یک اشتباه کوچک ممکن است موجب بی نهایت شدن دور شود که موجب از کارافتادن مرورگر می شود، مثلا در کد بالا اگر مقدار num را در هر دور یک واحد افزایش ندهیم، حلقه تا بی نهایت ادامه می یابد چرا که شرط ادامه حلقه، کوچکتر بودن num از 10 است و واضح است که مقدار صفر همیشه از 10 کوچکتر است (و شرط while همیشه true است).

دسته بندی: آموزش مقدماتی » JavaScript

برچسب ها: JavaScript

قبلی »

« بعدی

مطالب بیشتر:
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
» کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
» کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
» کار با switch و case در جاوا اسکریپت (JavaScript)
» رویداد ها (Events) در جاوا اسکریپت (JavaScript)

نظرات (۱۱ یادداشت برای این مطلب ارسال شده است)

یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.

نویسنده: محمد حسین

زمان: ۱۱:۰۹:۱۶ - تاریخ: ۱۳۹۲/۰۸/۱۴

ببخشید ، چرا جواب من رو نمی دید؟
اگه نظرم رو منتقل کردید ، لطفا ادرسش رو بگید.
ممنون.

پاسخ:

لطفا نظرتان را با این مطلب تطبیق دهید، در صورت غیر مرتبط بودن احتمالا نظر شما حذف شده است! در صورت تمایل می توانید از بخش تماس با ما موارد متفرقه را مطرح کنید.

نویسنده: مهدی خدامرادی

زمان: ۱۲:۲۸:۲۷ - تاریخ: ۱۳۹۲/۱۱/۱۶

ممنون سایت خوبی دارید

نویسنده: mohsen

زمان: ۱۵:۰۳:۱۶ - تاریخ: ۱۳۹۳/۰۱/۲۶

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

پاسخ:

سلام
باید تعداد ردیف ها را با توابعی مانند mysql_num_rows حساب کرده و در حلقه while یا for به صورت داینامیک تگ های td را برای جدول تولید کنید (این مبحث به جاوا اسکریپت ارتباطی ندارد و باید به بخش PHP و MySQL مراجعه کنید).

نویسنده: سورن

زمان: ۱۲:۲۸:۲۳ - تاریخ: ۱۳۹۳/۰۶/۲۳

عالی بود خیلی ممنون

نویسنده: محسن

زمان: ۱۱:۱۷:۰۴ - تاریخ: ۱۳۹۴/۰۶/۰۱

سلام خسته نباشید
مشکل این کد کجاست؟
البته با document.write درست کار میکنه ها ولی میخاسم با دکمه باشه هر کاری کردم نمیشه میشه شما بگید
ممنون

<script type="text/javascript">
function heding()
{
var i;
for(i=1;i<=6;i++)
{
document.getElementById("hed").innerHTML="<h"+i+">this is heding"+i+"</h"+i+">";
}
}
</script>
<button onclick="heding()">انواع سرفصل</button>
<p id="hed" style="margin-top:200px"></p>

پاسخ:

سلام
برای اینکه مقدار جدید به مقدار قبلی اضافه شود، در متد innerHTML از علامت

+=

به جای

استفاده کنید!

نویسنده: سعید

زمان: ۱۱:۲۱:۲۲ - تاریخ: ۱۳۹۴/۰۶/۱۷

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

for(i=a;i<f;i++){document.write(i);}

یعنی میخوام از حرف a تا f یکی یکی بیاره
و خروجیش این طوری بشه:

abcdef

اگه جوابم رو بدید خیلی ممنون میشم
اموزشاتونم خیلی خوبه، من الان حلقه for رو اموختم،خیلی ممنون

پاسخ:

سلام
برای استفاده از حروف به جای اعداد در حلقه for می توانید از یکی از نمونه توابع زیر استفاده کنید:

<script type="text/javascript">
function iterateAlphabet(){
	var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	for(var i=0; i<str.length; i++){
		var next_char = str.charAt(i);
		document.write(next_char.toLowerCase() + '<br>');
	}
}
iterateAlphabet();
document.write('<hr>');
function loopAlphabet(){
	var charCodeRange = {
		start: 65,
		end: 90
	}
	for(var cc = charCodeRange.start; cc <= charCodeRange.end; cc++){
		document.write(String.fromCharCode(cc).toLowerCase() + '<br>');		
	}
}
loopAlphabet();
</script>

نویسنده: سعید

زمان: ۱۶:۳۳:۵۴ - تاریخ: ۱۳۹۴/۰۹/۲۱

سلام
من این متد forEach رو نفهمیدم
میشه توضیحش بدین؟

پاسخ:

سلام
متد forEach در جاوااسکریپت در اکثر مرورگرها پشتیبانی نمی شود، از متد for استفاده کنید!

نویسنده: سعید

زمان: ۲۱:۴۶:۵۵ - تاریخ: ۱۳۹۴/۰۹/۲۷

سلام
پس این متد call و apply رو توضیح بدین
خیلی ممنون، نوکرتم

پاسخ:

سلام
این متدها جزء مباحث نسبتا پیشرفته در جاوا اسکریپت هستند که برای آموزش آنها باید در مطالبی جداگانه و مفصل صحبت کرد، صرفا جهت آشنایی و در حد یک پاسخ، برای درک این متدها باید پیش زمینه ای از شی گرائی (Object-oriented programming یا OOP) داشته باشید و با مفهوم متد و شی (this) آشنا باشید، کاربرد متد call و apply تقریبا مشابه است و هر دو برای فراخوانی تابع و انتقال آرگیومنت (چندگانه) به آن استفاده می شوند، البته شیوه پذیرش آرگیومنت apply با call متفاوت است، متد apply در آرگیومنت دوم می تواند شامل یک آرایه یا آبجکت شبه آرایه باشد، اما در متد call آرگیومنت ها باید با علامت ویرگول (,) از هم جداسازی شوند، به همین دلیل برای مواقعی که تعداد آرگیومنت ها مشخص است، متد call مناسبتر و برای مواردی که تعداد مشخص نیست، استفاده از apply گزینه بهتری است، آرگیومنت اول هر دو متد، شی this (یا مواردی مانند null یا undefined است که در این صورت یعنی هیچ پارامتری برای آرگیومنت اول وجود ندارد)، اطلاعات بیشتر:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

نکته: همان طور که گفتیم استفاده از این متدها همیشه نباید به همراه this باشد و می تواند در موارد معمولی نیز استفاده شوند، مثال:

<script type="text/javascript">
function showName(name){
	for(var i = 0; i < name.length; i++){
		alert('Name: ' + name[i]);
	}
}
var array = new Array(['Hamid', 'Mohammah', 'Mina']);
showName.apply(null, array);
</script>

نویسنده: Mahdi

زمان: ۰۰:۵۱:۵۸ - تاریخ: ۱۳۹۴/۱۱/۱۵

سلام
دستورات جاوا اسکریپت رو از کجا پیدا کنم؟؟
مثلا من میخوام بدونم نحوه ورودی که کاربر باید وارد کنه چیه توی سی scanf و توی سی پلاس پلاس cin
این دستورات رو منبعی نیست من پیدا کنم؟
تشکر میکنم بابت سایت خوب تون

پاسخ:

سلام
منظور سوالتان دقیقا مشخص نیست! جاوا اسکریپت متدهای خاص خودش را دارد و در صورت گذراندن آموزش های مقدماتی و استفاده از یک IDE مناسب (به فرض PhpStorm یا Adobe Dreamweaver و...) جهت اسکریپت نویسی، اغلب لیست متدها به صورت الفبایی مرتب شده اند، همچنین می توانید به سایت های مرجع توسعه دهندگان وب مانند لینک زیر مراجعه کنید:

https://developer.mozilla.org/en-US/docs/Web/JavaScript

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

نویسنده: NEGAR

زمان: ۱۷:۰۲:۱۱ - تاریخ: ۱۳۹۵/۰۱/۱۳

چطور میتونم با حلقه for برنامه بنویسم که خروجیش این باشه

پاسخ:

برای این منظور باید از دو حلقه for استفاده کنید، مثال:

<?php
for ($i = 1; $i <= 5; $i++) {
    for ($j = 1; $j <= $i; $j++) {
        echo "$j";
    }
    echo "<br>";
}
?>

نویسنده: احمد

زمان: ۲۰:۳۱:۴۸ - تاریخ: ۱۳۹۵/۱۱/۱۳

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

[{"id":"1","title_fa":"\u062f\u0648\u0648\u0645 4","text":"","date":"0000-00-00 00:00:00"},
{"id":"2","title_fa":"\u062f\u0648\u0648\u0645 4","text":"","date":"0000-00-00 00:00:00"}]

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

$query = mysql_query("SELECT * FROM ps_post WHERE id!='' Limit 2");
    for($i=0;$res = mysql_fetch_object($query);$i++)
    {
        $out[] = $res;
    }
die(json_encode($out));

لطفا کمک کنید ممنون

پاسخ:

بدین منظور می توانید از متد JSON.parse استفاده کنید، مثال:

http://jsfiddle.net/X6y5B/

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

آگهی

سفارش آگهی تبلیغاتی
Webgoo.ir
هزینه منصفانه، بازخورد مناسب