diff options
Diffstat (limited to 'files/ar/web/javascript/guide/loops_and_iteration/index.html')
| -rw-r--r-- | files/ar/web/javascript/guide/loops_and_iteration/index.html | 352 |
1 files changed, 0 insertions, 352 deletions
diff --git a/files/ar/web/javascript/guide/loops_and_iteration/index.html b/files/ar/web/javascript/guide/loops_and_iteration/index.html deleted file mode 100644 index 3bc05c57a7..0000000000 --- a/files/ar/web/javascript/guide/loops_and_iteration/index.html +++ /dev/null @@ -1,352 +0,0 @@ ---- -title: الحلقات والتكرار -slug: Web/JavaScript/Guide/Loops_and_iteration -translation_of: Web/JavaScript/Guide/Loops_and_iteration ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div> - -<p class="summary" dir="rtl">الحلقات، وسيلة سريعة وسهلة لفعل شيئا ما، مرارا <strong>وتكرارا</strong>. يقدم هذا الفصل من <a href="/en-US/docs/Web/JavaScript/Guide">دليل الجافاسكريب</a> مختلف عبارات التكرار المتاحة لجافا سكريبت.</p> - -<div style="font-size: 15; font-family: 'tahoma';"> -<p dir="rtl">يمكنك التفكير في الحلقة كنسخة من لعبة في الكمبيوتر، حيث ستقوم بتحريك السوبر ماريو X من الخطوات الى الامام، على سبيل المثال، امر التحريك، " تَحرًك ب 5 خطوات إلى الامام". يمكن تطبيق مثل هذه الفكرة باستخدام الحلقة:</p> - -<pre class="brush: js">var step; -for (step = 0; step < 5; step++) { - // Runs 5 times, with values of step 0 through 4. - console.log('Walking east one step'); -} -</pre> - -<p dir="rtl">هناك أنواع مختلفة من الحلقات، والمهم هو انها تقوم بشئ واحد: وهو <strong>تكرار</strong> بعض الاجراءات عدة مرات. الحلقات بمختلف انواعها، تقدم طرقا مختلفة لتحديد نقطة البداية ونقطة النهاية للحلقة. يمكن استخدام نوع معين من الحلقات، لحل نوع معين من المشاكل.</p> - -<p dir="rtl">الحلقات المتوفرة في جافاسكريبت وهي :</p> - -<ul> - <li>{{anch("for statement")}}</li> - <li>{{anch("do...while statement")}}</li> - <li>{{anch("while statement")}}</li> - <li>{{anch("labeled statement")}}</li> - <li>{{anch("break statement")}}</li> - <li>{{anch("continue statement")}}</li> - <li>{{anch("for...in statement")}}</li> - <li>{{anch("for...of statement")}}</li> -</ul> - -<h2 dir="rtl" id="الحلقة_for"><code>الحلقة </code><code>for</code></h2> - -<p dir="rtl">الحلقة {{jsxref("statements/for","for loop")}} لاتتوقف عن التكرار حتى يتم تحقق الشرط المحدد ب <code>false</code>. الحلقة <strong><code>for </code></strong>لجافاسكريبت مشابه للحلقة <strong><code>for </code></strong>الخاصة ب Java و C. يوضح الشكل التالي التركيبة الاساسية للحلقة <strong><code>for</code></strong>:</p> - -<pre class="syntaxbox">for ([initialExpression]; [condition]; [incrementExpression]) - statement -</pre> - -<p dir="rtl">عند تنفيذ الحلقة، يحدث ما يلي:</p> - -<ol dir="rtl"> - <li> <strong><code>initialExpression </code></strong>: التعبير المستخدم لتهيئة الحلقة، سيتم تنفيذه، إذا كان موجوداً. يقوم هذا التعبير بتهيئة عداد حلقة واحدة أو أكثر، من الممكن استخدام تعبيرات أكثر تعقيدا إذا لزم الأمر. يمكن ايضا أن يتم تعريف المتغيرات في هذا التعبير.</li> - <li><strong><code>condition </code></strong>: تعبير الشرط الذي تتمحور حوله الحلقة. اذا كانت قيمته تساوي <code>true</code>، ستنفذ الحلقة من جديد، عندما ستصبح قيمته تساوي <code>false</code>، ستنتهي الحلقة، إذا تم حذف تعبير الشرط تماما. سيعتبر الشرط صحيحاً <code>true</code>.</li> - <li><strong><code>statement </code></strong>: التعليمة البرمجية التي ستنفذ ما دام الشرط يساوي <code>true</code>. لتنفيذ تعليمات برمجية متعددة، استخد التعليمة بلوك ({ ... }).</li> - <li><strong><code>incrementExpression </code></strong>: تحديث التعبير، إذا كان موجودا، ينفذ، ويعود التحكم إلى الخطوة رقم 2.</li> -</ol> - -<h3 dir="rtl" id="مثال"><strong>مثال</strong></h3> - -<p dir="rtl">تحتوي الدالة التالية على التعليمة <code><strong>for </strong></code>التي تقوم باحصاء عدد العناصر <code>options </code>المحددة في العنصر {{HTMLElement("select")}}. التعليمة <code><strong>for </strong></code>تعلن عن المتغير <strong><code>i</code></strong> وتقوم بتهيئته ب 0. وتتحقق من ان <strong><code>i</code></strong> اصغر من عدد العناصر في العنصر<code> <select>.</code> ستنفذ التعليمة <code>if</code> بنجاح، وستزيد قيمة <strong><code>i</code></strong> بواحد ما دامت الحلقة مستمرة بالتكرار.</p> - -<pre class="brush: html"><form name="selectForm"> - <p> - <label for="musicTypes">Choose some music types, then click the button below:</label> - <select id="musicTypes" name="musicTypes" multiple="multiple"> - <option selected="selected">R&B</option> - <option>Jazz</option> - <option>Blues</option> - <option>New Age</option> - <option>Classical</option> - <option>Opera</option> - </select> - </p> - <p><input id="btn" type="button" value="How many are selected?" /></p> -</form> - -<script> -function howMany(selectObject) { - var numberSelected = 0; - for (var i = 0; i < selectObject.options.length; i++) { - if (selectObject.options[i].selected) { - numberSelected++; - } - } - return numberSelected; -} - -var btn = document.getElementById('btn'); -btn.addEventListener('click', function() { - alert('Number of options selected: ' + howMany(document.selectForm.musicTypes)); -}); -</script> - -</pre> - -<h2 dir="rtl" id="الحلقة_do...while"><code>الحلقة </code><code>do...while</code></h2> - -<p dir="rtl">الحلقة {{jsxref("statements/do...while", "do...while")}} لاتتوقف عن التكرار حتى يتم تحقق الشرط المحدد ب <code>false</code> . يوضح الشكل التالي التركيبة الاساسية للحلقة <code>do...while</code></p> - -<pre class="syntaxbox">do - statement -while (condition); -</pre> - -<p dir="rtl"><strong><code>statement</code></strong>: تنفذ مرة واحدة قبل أن تبدا عملية التحقق من الشرط. عند البدا بعملية التحقق، اذا كان الشرط <strong><code>(condition) </code></strong>يساوي <code>true</code>، تنفذ التعليمة البرمجية (statement) مرة اخرى. بعد انهاء التنفيذ، يتم التحقق مرة اخرى من الشرط. الى ان يصبح الشرط يساوي <code>false</code>، عندها يتوقف التنفيذ ويتم انتقال التحكم الى التعليمة البرمجية التي تلي <strong><code>do...while</code></strong>. لتنفيذ تعليمات برمجية متعددة، استخدم التعليمة بلوك ({ ... }).</p> - -<h3 dir="rtl" id="مثال_2"><strong>مثال</strong></h3> - -<p dir="rtl">في المثال التالي، الحلقة <strong><code>do</code></strong>، تنفذ مرة واحدة على الاقل وتستمر بالتكرار حتى يصبح <strong><code>i</code></strong> ليس أقل من 5.</p> - -<pre class="brush: js">var i = 0; -do { - i += 1; - console.log(i); -} while (i < 5);</pre> - -<h2 dir="rtl" id="الحلقة_while"><code>الحلقة </code> <code>while</code></h2> - -<p dir="rtl">الحلقة {{jsxref("statements/while","while")}} ستستمر بتنفيذ التعليمة البرمجية المرتبطة بها طالما الشرط المحدد يساوي true. يوضح الشكل التالي التركيبة الاساسية للحلقة <strong><code>while</code></strong></p> - -<pre class="syntaxbox">while (condition) - statement -</pre> - -<p dir="rtl">عندما سيصبح الشرط يساوي <code>false</code>، ستتوقف التعليمة البرمجية (<code>statement</code>) المرتبطة بالحلقة عن التنفيذ وسينتقل التحكم الى التعليمة البرمجية التي تلي الحلقة <strong><code>while</code></strong>.</p> - -<p dir="rtl">يتم التحقق من شرط الاختبار قبل تنفيذ <strong><code> statement</code></strong>. كلما عاد الشرط ب <code>true</code>، ستنفذ <code>statement </code>ويتم الرجوع الى الشرط للتحقق منه مرة اخرى. عندما سيعود الشرط ب <code>false </code>سيتوقف التنفيذ وسينتقل التحكم الى التعليمة البرمجية التي تلي الحلقة <code>while</code>. لتنفيذ تعليمات برمجية متعددة، استخدم التعليمة بلوك ({ ... }).</p> - -<h3 dir="rtl" id="المثال_الاول"><strong>المثال الاول</strong></h3> - -<p dir="rtl">الحلقة <code>while</code> ستستمر بالتكرار طالما <code>n </code>أقل من ثلاثة:</p> - -<pre class="brush: js">var n = 0; -var x = 0; -while (n < 3) { - n++; - x += n; -} -</pre> - -<p dir="rtl">مع كل تكرار، ستقوم الحلقة بالزيادات على n وتضيف قيمته إلى x. لذالك x و n ستمتلك القيم التالية:</p> - -<ul dir="rtl"> - <li>بعد المرور الأول: n = 1 و x = 1</li> - <li>بعد المرور الثاني: n = 2 و x = 3</li> - <li>بعد المرور الثالث: n = 3 و x = 6</li> -</ul> - -<p dir="rtl">بعد الانتهاء من المرور الثالث، الشرط <code>( n < 3 </code>) لم يعد يساوي <code>true</code>، لذالك ستنتهي الحلقة.</p> - -<h3 dir="rtl" id="المثال_الثاني">المثال الثاني</h3> - -<p dir="rtl">لتجنب تكرار الحلقة الى ما لا نهاية. تأكد من أن الشرط في الحلقة، سيصبح في نهاية المطاف ب <code>false</code>، التعليمة البرمجية في الحلقة <code>while </code>التالية، لن تتوقف عن التنفيذ بسبب ان الشرط لن يصبح ب <code>false</code>:</p> - -<pre class="brush: js">while (true) { - console.log('Hello, world!'); -}</pre> - -<div class="warning" dir="rtl"> -<p><strong>تحذير</strong>: استمرار تكرار الحلقة الى ما لا نهاية سيتسبب في توقف المتصفحات عن العمل.</p> -</div> - -<h2 dir="rtl" id="التعليمة_label"><code>التعليمة label </code></h2> - -<p dir="rtl">تستخدم التعليمة {{jsxref("statements/label","label")}} لتوفير معرف <strong><code>(id)</code></strong> للتعليمة البرمجية المراد الرجوع اليها من موقع آخر في البرنامج. على سبيل المثال، يمكنك استخدام <code>label </code>لتحديد حلقة، ثم استخدام التعليمة <code><strong>break</strong> </code>او <code><strong>continue</strong> </code>للإشارة إلى ما إذا كان البرنامج ينبغي أن يوقف الحلقة أو الاستمرار في تنفيذها.</p> - -<p dir="rtl">التعبير الخاص بالتعليمة <code>label </code>يشبه ما يلي:</p> - -<pre class="syntaxbox">label : - statement -</pre> - -<p dir="rtl">قيمة <strong><code>label </code></strong>يمكن ان تكون أي معرف جافاسكريبت باستثناء الكلمات المحجوزة. التعليمة البرمجية <strong><code>(statement)</code></strong> التي سيشار اليها من طرف <code>label </code>يمكن ان تكون اي تعليمة برمجية.</p> - -<h3 dir="rtl" id="مثال_3"><strong>مثال</strong></h3> - -<p dir="rtl">في هذا المثال، <code>label markLoop</code> يعرف الحلقة <code>while</code>.</p> - -<pre class="brush: js">markLoop: -while (theMark == true) { - doSomething(); -}</pre> - -<div class="note" dir="rtl"> -<p>ملاحظة: لمزيد من التفاصيل حول التعليمة <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/label"><code>label</code></a>، راجع صفحة مرجع الجافا سكريبت</p> -</div> - -<h2 dir="rtl" id="التعليمة_break"><code>التعليمة </code> <code>break</code></h2> - -<p dir="rtl">تستخدم التعليمة {{jsxref("statements/break","break")}} لانهاء الحلقة، او <strong><code>switch</code></strong>، أو بالتزامن مع االتعليمة <code>label</code>.</p> - -<ul dir="rtl"> - <li>عند استخدام <code>break </code>من دون <code>label </code>ستقوم بانهاء الحلقة (<strong><code>while ،do-while ،for</code></strong> او <strong><code>switch</code></strong>). وانتقال التحكم الى التعليمة البرمجية التالية.</li> - <li>عند استخدام <code>break </code>مع <code>label س</code>يتم انهاء تنفيذ التعليمة البرمجية المحددة من طرف <code>label</code></li> -</ul> - -<p dir="rtl">يمكن التعبير عن التعليمة <code><strong>break</strong> </code>من خلال طريقتين:</p> - -<pre class="syntaxbox">break; -break <em>label</em>; -</pre> - -<p dir="rtl">تستخدم الطريقة الأولى لانهاء الحلقة المتواجدة بها، او لانهاء <strong><code>switch</code></strong>. الطريقة الثانية لانهاء تنفيذ التعليمات التي تم تحديدها من قبل <code>label</code>.</p> - -<h3 dir="rtl" id="المثال_الاول_2"><strong>المثال الاول</strong></h3> - -<p dir="rtl">يقوم المثال التالي بالتكرار على عناصر المصفوفة، وبمجرد الوصول الى العنصر المحدد في الشرط وهو <code>theValue </code>سيتم انهاء الحلقة،</p> - -<pre class="brush: js">for (var i = 0; i < a.length; i++) { - if (a[i] == theValue) { - break; - } -}</pre> - -<h3 dir="rtl" id="المثال_الثاني_2"><strong>المثال الثاني</strong></h3> - -<p dir="rtl">المثال التالي، يبين كيفية استخدام التعليمة <code><strong>break</strong> </code>بكلا الطريقتين:</p> - -<pre class="brush: js">var x = 0; -var z = 0; -labelCancelLoops: while (true) { - console.log('Outer loops: ' + x); - x += 1; - z = 1; - while (true) { - console.log('Inner loops: ' + z); - z += 1; - if (z === 10 && x === 10) { - break labelCancelLoops; - } else if (z === 10) { - break; - } - } -} -</pre> - -<h2 dir="rtl" id="التعليمة_continue"><code>التعليمة </code> <code>continue</code></h2> - -<p dir="rtl">يمكن استخدام التعليمة {{jsxref("statements/continue","continue")}} لاستئناف الحلقة <code><strong>while</strong>)</code> <strong><code>do-while</code> <code>،for</code></strong> ، مع <strong><code>labe</code></strong>)، بعد توقفها لغرض معين.</p> - -<ul dir="rtl"> - <li>عند استخدام <code><strong>continue</strong> </code>من دون <code>label</code>، ستقوم بانهاء <strong>التكرار الحالي</strong> للحلقة <code><strong>while</strong>) <strong>do-while</strong></code>، او <strong><code>for</code></strong>)<strong> وتنتقل</strong> الى <strong>التكرار التالي</strong>. على النقيض من التعليمة <code>break</code>، التعليمة <code>continue </code><strong>لا تنهي</strong> تنفيذ الحلقة تماما. عند استخدامها مع الحلقة <code>while </code>فحلقة البرنامج ستعود إلى الشرط. وعند استخدامها مع الحلقة <code>for </code>فحلقة البرنامج ستعود إلى تعليمة الزيادة (increment-expression)</li> - <li>عند استخدام <code>continue</code> مع <code>label</code>، سيتم تطبيقها على الحلقة المحددة بواسطة <code>label</code>.</li> -</ul> - -<p dir="rtl">يمكن التعبير عن التعليمة <code>continue</code> من خلال طريقتين:</p> - -<pre class="syntaxbox">continue; -continue <em>label</em>; -</pre> - -<h3 dir="rtl" id="المثال_الاول_3"><strong>المثال الاول</strong></h3> - -<p dir="rtl">في المثال التالي، لدينا الحلقة <code>while </code>مع التعليمة <code>continue </code>التي ستنفذ حينما تصبح <strong><code>i</code></strong> تساوي 3. ولدينا n الذي سيحتوي على القيم التالية: 1, 3, 7 و 12.</p> - -<pre class="brush: js">var i = 0; -var n = 0; -while (i < 5) { - i++; - if (i == 3) { - continue; - } - n += i; -} -</pre> - -<h3 dir="rtl" id="المثال_الثاني_3"><strong>المثال الثاني</strong></h3> - -<p dir="rtl">التعليمة <code>label checkiandj</code> تحتوي على التعليمة <code>label checkj</code>. عند مصادفة <code>continue </code>سيقوم البرنامج بانهاء التكرار الحالي ل <code>checkj </code>ويبدأ التكرار من جديد. وفي كل مرة يتم مصادفة <code>continue</code>، تستمر <code>checkj </code>بالتكرار حتى يعود الشرط ب <code>false</code>. عندما سيتم العودة ب <code>false</code>، ما تبقى من التعليمة <code>checkiandj </code>سيكتمل، و <code>checkiandj </code>ستستمر بالتكرار حتى يعود الشرط ب <code>false</code>. عندما سيتم العودة ب <code>false</code>، سينتقل البرنامج الى التعليمة البرمجية التي تلي <code>checkiandj</code>.</p> - -<pre class="brush: js">var i = 0; -var j = 10; -checkiandj: - while (i < 4) { - console.log(i); - i += 1; - checkj: - while (j > 4) { - console.log(j); - j -= 1; - if ((j % 2) == 0) { - continue checkj; - } - console.log(j + ' is odd.'); - } - console.log('i = ' + i); - console.log('j = ' + j); - }</pre> - -<p class="summary" dir="rtl">عموما: التعليمة <strong><code>break</code> </strong>تقوم بانهاء الحلقة نهائيا عندما يتم تحقق الشرط المحدد، فيما تقوم التعليمة <strong><code>continue</code> بتوقيف الحلقة للتحقق من</strong> الشرط المحدد، وعندما يتم تنفيذ الشرط، يتم استئناف الحلقة.</p> - -<h2 dir="rtl" id="التعليمة_for...in"><code>التعليمة </code> <code>for...in</code></h2> - -<p dir="rtl">تستخدم الحلقة {{jsxref("statements/for...in","for...in")}} للتكرار على جميع خصائص الكائن القابلة للتكرار <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">enumerable properties</a>. مقابل كل خاصية مميزة، ستنفذ الجافا سكريبت تعليمات برمجية محددة. يوضح الشكل التالي التركيبة الاساسية للحلقة <strong><code>for...in</code></strong></p> - -<pre class="syntaxbox">for (variable in object) { - statements -} -</pre> - -<h3 dir="rtl" id="مثال_4"><strong>مثال</strong></h3> - -<p dir="rtl">الدالة التالية تتضمن كائن واسم الكائن كبارامترات لها. تقوم بالتكرار على كل خصائص الكائن وترجع سلسلة نصية بأسماء الخصائص والقيم الخاصة بها.</p> - -<pre class="brush: js">function dump_props(obj, obj_name) { - var result = ''; - for (var i in obj) { - result += obj_name + '.' + i + ' = ' + obj[i] + '<br>'; - } - result += '<hr>'; - return result; -}</pre> - -<p dir="rtl">بالنسبة للكائن <code>car</code> مع الخصائص <code>make</code> و <code>model</code>، الناتج سيكون على الشكل التالي:</p> - -<pre class="brush: js">car.make = Ford -car.model = Mustang -</pre> - -<h3 dir="rtl" id="for...in_و_المصفوفات">for...in و<strong> المصفوفات</strong></h3> - -<p dir="rtl">على الرغم من كونه مغريا استخدام الحلقة <strong><code>for...in</code></strong> للتكرار على عناصر المصفوفة {{jsxref("Array")}} الا انها، يمكن أن تقوم بسلوك غير متوقع. في الواقع، الحلقة <strong><code>for...in</code></strong> ستقوم بإرجاع اسماء الخصائص المعرفة من قبل المستخدم بالإضافة إلى الفهارس الرقمية. فمثلا، إذا قمت بالتعديل على Array object، كإضافة خصائص او وظائف جديدة. فستقوم الحلقة <strong><code>for...in</code></strong> بالتكرار على هذه الخصائص او الوظائف بالإضافة إلى عناصر المصفوفة، وبالتالي فمن الأفضل استخدام الحلقة التقليدية {{jsxref("statements/for","for")}} لارجاع الفهارس الرقمية بشكل صحيح عند التكرار على المصفوفة. يبين المثال التالي كيفية حصول ذالك.</p> - -<pre class="brush: js">var myArray = [0, 1, 2, , , 5]; -myArray.foo = "hello"; - -for (var i in myArray) { - console.log(i); // Outputs 0, 1, 2, 5, hello. -} - -for (var i = 0; i < myArray.length; ++i) { - console.log(i); // Outputs 0, 1, 2, 3, 4, 5 -}</pre> - -<h2 dir="rtl" id="الحلقة_for...of"><code>الحلقة </code> <code>for...of</code></h2> - -<p dir="rtl">التعليمة {{jsxref("statements/for...of","for...of")}} نوع جديد من الحلقات تم إضافتها الى الإصدار السادس من جافا سكربت ، وتستخدم للتكرار على العناصر الموجودة في أي مجموعة أو <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (مثل {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}} والكائن {{jsxref("functions/arguments","arguments")}} الخ.), كما أن هذا الأسلوب يمكننا من تنفيذ تعليمة برمجية معينة على كل عنصر تم جلبه على حدة للتعديل على أي من خصائصه. يوضح الشكل التالي التركيبة الاساسية للحلقة<strong><code> for...of</code></strong></p> - -<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) { - <em>statement -</em>}</pre> - -<p dir="rtl">المثال التالي، يوضح الفرق بين الحلقة <code><strong>for...of</strong></code> والحلقة {{jsxref("statements/for...in","for...in")}} الحلقة <strong><code>for...in</code></strong> تقوم بارجاع اسماء الخصائص فيما الحلقة <code>for...of</code> تقوم بارجاع قيم الخصائص:</p> - -<pre class="brush:js">let arr = [3, 5, 7]; -arr.foo = 'hello'; - -for (let i in arr) { - console.log(i); // logs "0", "1", "2", "foo" -} - -for (let i of arr) { - console.log(i); // logs 3, 5, 7 -} -</pre> -</div> - -<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p> |