شبيبة تعليمي

شبيبة المنزل مقدمة شبيبة شبيبة إلى أين إخراج JS بيانات شبيبة بناء جملة JS تعليقات JS متغيرات JS JS Let شبيبة كونست مشغلي JS شبيبة الحساب احالة JS أنواع بيانات JS وظائف JS كائنات JS أحداث شبيبة سلاسل شبيبة طرق سلسلة JS بحث سلسلة JS JS String Templates أرقام شبيبة طرق عدد JS صفيفات JS طرق صفيف JS ترتيب صفيف JS تكرار صفيف JS JS Array Const تواريخ شبيبة تنسيقات التاريخ JS طرق الحصول على تاريخ JS طرق تعيين تاريخ JS شبيبة الرياضيات شبيبة عشوائية شبيبة منطقية مقارنات شبيبة شروط JS مفتاح JS JS Loop For JS Loop For In. شبيبة حلقة JS لـ Of شبيبة حلقة بينما شبيبة استراحة شبيبة تكرارات مجموعات JS خرائط شبيبة شبيبة تايبوف JS نوع التحويل شبيبة Bitwise JS RegExp أخطاء JS شبيبة النطاق رفع JS وضع JS الصارم شبيبة هذه الكلمة دالة سهم JS فئات JS شبيبة شبيبة تصحيح أخطاء JS دليل أسلوب JS أفضل ممارسات JS أخطاء JS أداء JS شبيبة الكلمات المحجوزة

إصدارات JS

إصدارات JS JS 2009 (ES5) شبيبة 2015 (ES6) شبيبة 2016 شبيبة 2017 شبيبة 2018 شبيبة آي إي / إيدج تاريخ شبيبة

كائنات JS

تعريفات الكائن خصائص الموضوع طرق الكائن عرض الكائن موصلي الكائنات منشئو الكائنات نماذج الكائن كائن تكرارات مجموعات الكائن خرائط الكائن مرجع الكائن

وظائف JS

تعريفات الوظائف معلمات الوظيفة استدعاء الوظيفة استدعاء الوظيفة تطبيق الوظيفة عمليات إغلاق الوظائف

فئات JS

مقدمة عن الفصل الوراثة الطبقية فئة ثابتة

شبيبة آسينك

عمليات الاسترجاعات JS شبيبة غير متزامن وعود شبيبة شبيبة Async / انتظار

JS HTML DOM

مقدمة DOM طرق DOM مستند DOM عناصر DOM DOM HTML نماذج DOM DOM CSS الرسوم المتحركة DOM أحداث DOM مستمع أحداث DOM التنقل في DOM عقد DOM مجموعات DOM قوائم عقدة DOM

متصفح JS BOM

نافذة JS شاشة JS موقع JS تاريخ شبيبة شبيبة ملاح تنبيه منبثق لـ JS توقيت شبيبة ملفات تعريف الارتباط JS

JS Web APIs

مقدمة واجهة برمجة تطبيقات الويب واجهة برمجة تطبيقات نماذج الويب واجهة برمجة تطبيقات سجل الويب واجهة برمجة تطبيقات تخزين الويب Web Worker API واجهة برمجة تطبيقات جلب الويب واجهة برمجة تطبيقات تحديد الموقع الجغرافي على الويب

شبيبة أجاكس

مقدمة أجاكس أجاكس XMLHttp طلب AJAX استجابة AJAX ملف AJAX XML أجاكس بي إتش بي أجاكس آسيا والمحيط الهادئ قاعدة بيانات أجاكس تطبيقات أجاكس أمثلة AJAX

شبيبة شبيبة

مقدمة JSON بناء جملة JSON JSON مقابل XML أنواع بيانات JSON تحليل JSON تنسيق JSON كائنات JSON صفائف JSON خادم JSON JSON PHP JSON HTML جسون جسونب

JS مقابل jQuery

محددات jQuery jQuery HTML jQuery CSS jQuery DOM

شبيبة الرسومات

شبيبة الرسومات قماش شبيبة شبيبة بلوتلي JS Chart.js مخطط جوجل JS شبيبة D3.js

أمثلة JS

أمثلة JS JS HTML DOM إدخال JS HTML كائنات JS HTML أحداث HTML متصفح JS محرر JS تمارين شبيبة شبيبة مسابقة شهادة JS

مراجع JS

كائنات جافا سكريبت كائنات HTML DOM


جافا سكريبت للحلقة


يمكن أن تنفذ الحلقات كتلة من التعليمات البرمجية عدة مرات.


حلقات جافا سكريبت

الحلقات سهلة الاستخدام ، إذا كنت تريد تشغيل نفس الرمز مرارًا وتكرارًا ، في كل مرة بقيمة مختلفة.

غالبًا ما يكون هذا هو الحال عند العمل مع المصفوفات:

بدلا من الكتابة:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

يمكنك كتابة:

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

أنواع مختلفة من الحلقات

يدعم JavaScript أنواعًا مختلفة من الحلقات:

  • for - حلقات من خلال كتلة من التعليمات البرمجية عدة مرات
  • for/in - حلقات من خلال خصائص الكائن
  • for/of - حلقات عبر قيم كائن قابل للتكرار
  • while - حلقات من خلال كتلة من التعليمات البرمجية عندما يكون الشرط المحدد صحيحًا
  • do/while - يتكرر أيضًا عبر كتلة من التعليمات البرمجية بينما يكون الشرط المحدد صحيحًا

حلقة For

الحلقة forلها الصيغة التالية:

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

يتم تنفيذ العبارة 1 (مرة واحدة) قبل تنفيذ كتلة التعليمات البرمجية.

تحدد العبارة 2 شرط تنفيذ مقطع التعليمات البرمجية.

يتم تنفيذ العبارة 3 (في كل مرة) بعد تنفيذ كتلة التعليمات البرمجية.

مثال

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

من المثال أعلاه ، يمكنك قراءة:

تعين العبارة 1 متغيرًا قبل أن تبدأ الحلقة (دع i = 0).

تحدد العبارة 2 شرط تشغيل الحلقة (يجب أن يكون i أقل من 5).

تزيد العبارة 3 قيمة (i ++) في كل مرة يتم فيها تنفيذ كتلة التعليمات البرمجية في الحلقة.



البيان 1

عادة ستستخدم العبارة 1 لتهيئة المتغير المستخدم في الحلقة (دع i = 0).

ليس هذا هو الحال دائمًا ، فإن JavaScript لا يهتم. العبارة 1 اختيارية.

يمكنك بدء العديد من القيم في العبارة 1 (مفصولة بفاصلة):

مثال

for (let i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

ويمكنك حذف العبارة 1 (على سبيل المثال ، عندما يتم تعيين القيم قبل بدء الحلقة):

مثال

let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

البيان 2

غالبًا ما يتم استخدام العبارة 2 لتقييم حالة المتغير الأولي.

ليس هذا هو الحال دائمًا ، فإن JavaScript لا يهتم. العبارة 2 اختيارية أيضًا.

إذا عادت العبارة 2 بشكل صحيح ، فستبدأ الحلقة من جديد ، وإذا أعادت القيمة false ، فستنتهي الحلقة.

إذا حذفت العبارة 2 ، فيجب عليك توفير فاصل داخل الحلقة. وإلا فإن الحلقة لن تنتهي أبدا. هذا سوف يحطم متصفحك. اقرأ عن الفواصل في فصل لاحق من هذا البرنامج التعليمي.


البيان 3

غالبًا ما تزيد العبارة 3 من قيمة المتغير الأولي.

هذا ليس هو الحال دائمًا ، جافا سكريبت لا تهتم ، والبيان 3 اختياري.

يمكن أن تفعل العبارة 3 أي شيء مثل الزيادة السالبة (i--) أو الزيادة الإيجابية (i = i + 15) أو أي شيء آخر.

يمكن أيضًا حذف العبارة 3 (مثل عندما تزيد قيمك داخل الحلقة):

مثال

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

نطاق الحلقة

باستخدام varفي حلقة:

مثال

var i = 5;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

باستخدام letفي حلقة:

مثال

let i = 5;

for (let i = 0; i < 10; i++) {
  // some code
}

// Here i is 5

في المثال الأول ، باستخدام var، المتغير المعلن في الحلقة يعيد تعريف المتغير خارج الحلقة.

في المثال الثاني ، باستخدام let، لا يقوم المتغير المُعلن عنه في الحلقة بإعادة تعريف المتغير خارج الحلقة.

عند letاستخدامه للإعلان عن المتغير i في حلقة ، سيكون المتغير i مرئيًا فقط داخل الحلقة.


لـ / لـ و لـ / في الحلقات

يتم شرح for/inالحلقة for/ofوالحلقة في الفصل التالي.


بينما الحلقات

يتم شرح whileالحلقة و the do/whileفي الفصول التالية.


اختبر نفسك مع التمارين

ممارسه الرياضه:

قم بإنشاء حلقة تمتد من 0 إلى 9.

let i;
 ( = ;  < ; ) {
  console.log(i);
}