جافا سكريبت هي واحدة من لغات البرمجة الأكثر شعبية المستخدمة لإنشاء تطبيقات الويب. واحدة من مزاياها الرئيسية هي القدرة على العمل مع المصفوفات — مجموعات البيانات من أنواع مختلفة. ومع ذلك, كيف يمكنني عرض هذه المصفوفات على صفحة ويب? ومن خلالها عناصر أتش تي أم أل هو الأفضل لجعل مثل هذا الاستنتاج? في هذه المقالة ، سوف ننظر في عملية عرض مصفوفة في جافا سكريبت على صفحة هتمل وتقديم العديد من الأمثلة للوضوح.
واحدة من أسهل الطرق لعرض صفيف على صفحة ويب هو استخدام لحلقة. للقيام بذلك ، تحتاج إلى إنشاء عنصر في هتمل الذي سيتم إخراج الصفيف. ثم ، في جافا سكريبت ، وذلك باستخدام لحلقة ، انتقل من خلال كل عنصر من عناصر المصفوفة وإضافته إلى عنصر هتمل التي تم إنشاؤها. على سبيل المثال:
في هذا المثال ، نقوم بإنشاء مصفوفة مياراي بثلاثة عناصر: 'التفاح' ، 'الموز' ، 'البرتقال'. ثم نحصل على عنصر هتمل مع معرف 'الإخراج' وحفظه في متغير أوتبوتليمنت. بعد ذلك ، نذهب من خلال كل عنصر من عناصر المصفوفة باستخدام حلقة وإنشاء عنصر جديد
- الحصول على صفيف في جافا سكريبت
- تحويل صفيف إلى سلسلة
- إنشاء عناصر هتمل باستخدام جافا سكريبت
- إضافة عناصر هتمل التي تم إنشاؤها إلى صفحة ويب
- 1. طريقة الزائدة ()
- 2. طريقة الإدراج قبل ()
- 3. طريقة إنرتمل
- باستخدام حلقة لإخراج عناصر الصفيف
- أمثلة على إخراج المصفوفة على صفحة ويب
- سؤال وجواب
- كيف يمكنني إخراج صفيف إلى صفحة في جافا سكريبت?
- كيف يمكنني عرض عناصر الصفيف كقائمة على صفحة في جافا سكريبت?
- هل من الممكن إخراج صفيف إلى صفحة دون استخدام حلقة في جافا سكريبت?
- كيف يمكنني إخراج مجموعة متعددة الأبعاد في أتش تي أم أل باستخدام جافا سكريبت?
- كيف يمكنني إخراج مجموعة من الكائنات إلى صفحة في جافا سكريبت?
- كيف يمكنني إخراج صفيف إلى جدول هتمل باستخدام جافا سكريبت?
الحصول على صفيف في جافا سكريبت
المصفوفة هي مجموعة مرتبة من عناصر البيانات التي يمكن أن تكون من أنواع مختلفة. في جافا سكريبت ، يمكنك الحصول على صفيف بطرق مختلفة. دعونا ننظر إلى بعض منهم.
- دع الفواكه = ['التفاح' ، 'الموز' ، 'الكمثرى'];
- سيؤدي هذا المثال إلى مصفوفة [ '1', '2', '3' ].
- سيؤدي هذا المثال إلى مصفوفة [1 ، 2 ، 3 ].
دع آر = [1 ، 2 ، 3];
في هذا المثال ، سيكون متغير إيسار صحيحا ، لأن أر هو صفيف.
معرفة الطرق المختلفة للحصول على مصفوفة في جافا سكريبت ، يمكنك اختيار الأكثر ملاءمة اعتمادا على المهمة والمتطلبات. استخدم المصفوفات لتخزين البيانات المجمعة ومعالجتها في تطوير الويب الخاص بك.
طريقة توسترينج ()
إن أبسط طريقة لتحويل صفيف إلى سلسلة هي استخدام الطريقة
توسترينج()
. يتم استدعاء هذه الطريقة على المصفوفة نفسها وإرجاع عناصرها كسلسلة مفصولة بفواصل.
طريقة الانضمام ()
هناك طريقة أخرى لتحويل صفيف إلى سلسلة وهي استخدام الطريقة
انضم()
. تأخذ هذه الطريقة وسيطة تحدد سلسلة محدد بين عناصر المصفوفة.
دع الفواكه = ['التفاح' ، 'الكمثرى' ، 'البرتقال'];
دع الفواكه = الفواكه.انضم (' ، ' ) ؛ / / "تفاح ، كمثرى ، برتقالي"
الحلقة و + = المشغل
إذا كنت بحاجة إلى مزيد من المرونة عند تحويل صفيف إلى سلسلة ، يمكنك استخدام حلقة و
المشغل +=
لبناء سلسلة يدويا. في هذه الحالة ، تحتاج إلى إنشاء متغير يحتوي على سلسلة ، وإضافة كل عنصر من عناصر المصفوفة إلى هذه السلسلة.
دع الفواكه = ['التفاح' ، 'الكمثرى' ، 'البرتقال'];
دع سلسلة الفاكهة = ";
- سلسلة الفاكهة = سلسلة الفاكهة.شريحة (0 ، -2) ؛ / / إزالة الفاصلة الأخيرة والمسافة
وحدة التحكم.سجل (سلسلة الفاكهة) ؛ / / "تفاح ، كمثرى ، برتقال"
- كريتيليمنت()
الطريقة. على سبيل المثال ، لإنشاء عنصر جديد
- ، يمكنك الكتابة:
الفقرة.تكستكونتنت = ' مرحبا ، العالم!';
- مع قيمة
'تسليط الضوء'
في العنصر
، يمكنك الكتابة:
الفقرة.سيتاتريبوت ('فئة' ، 'تسليط الضوء');
إضافة عنصر إلى صفحة ويب: لإضافة عنصر تم إنشاؤه إلى صفحة ويب ، تحتاج إلى تحديد العنصر الأصل الذي تريد إضافة عنصر جديد إليه والاتصال به
- الطفل الملحق()
- الطريقة. على سبيل المثال ، لإضافة عنصر تم إنشاؤه
- إلى عنصر
، يمكنك الكتابة:
وثيقة.الجسم.ملحق الطفل (فقرة);
بعد إنشاء عناصر هتمل الضرورية في جافا سكريبت ، يجب إضافتها إلى صفحة الويب. في هذا القسم ، سننظر في طرق لإضافة العناصر التي تم إنشاؤها إلى الصفحة.
هناك عدة طرق لإضافة عناصر هتمل إلى صفحة ويب:
باستخدام طريقة أدفينتشيلد () لإضافة عناصر داخل عناصر أخرى.
باستخدام طريقة إنسيرتبفور () لإضافة عناصر قبل العناصر الأخرى.
باستخدام طريقة إنرتمل لإضافة رمز هتمل داخل عنصر.
تسمح لك طريقة الملحق() بإضافة عنصر داخل عنصر آخر في نهاية محتواه. على سبيل المثال ، لإضافة عنصر تم إنشاؤه
داخل العنصر مع المعرف "حاوية" ، يمكنك استخدام التعليمات البرمجية التالية:
فار الحاويات = وثيقة.جيتليمنتبيد ("حاوية");
فار نيوديف = وثيقة.كريتيليمنت ("ديف");
تسمح لك طريقة الإدراج قبل () بإدراج عنصر قبل عنصر آخر داخل العنصر الأصل. على سبيل المثال ، لإدراج عنصر تم إنشاؤه
قبل العنصر مع المعرف "أخرىعنصر" داخل العنصر الأصل مع المعرف "حاوية" ، يمكنك استخدام التعليمات البرمجية التالية:
فار الحاويات = وثيقة.جيتليمنتبيد ("حاوية");
فار نيوديف = وثيقة.كريتيليمنت ("ديف");
فار أوثيرليمنت = وثيقة.جيتليمنتبيد ("أوثيرليمنت");
حاوية.أدخلقبل (جديدديف ، أخرىعنصر);
- 3. طريقة إنرتمل
تسمح لك طريقة إنترتمل بإضافة رمز هتمل داخل عنصر. على سبيل المثال ، لإضافة رمز هتمل - مثال على عنصر
داخل عنصر مع المعرف "حاوية" ، يمكنك استخدام التعليمات البرمجية التالية:- فار الحاويات = وثيقة.جيتليمنتبيد ("حاوية");
حاوية.إينرتمل = "عنصر المثال";باستخدام حلقة لإخراج عناصر الصفيف
في جافا سكريبت ، يمكنك استخدام حلقة لإخراج عناصر المصفوفة في هتمل. تسمح لك الحلقة بالتكرار من خلال جميع عناصر المصفوفة وتنفيذ إجراءات معينة مع كل منها.
لنلق نظرة على مثال لاستخدام حلقة لإخراج عناصر المصفوفة إلى صفحة:
- دعونا إنشاء مجموعة مع بعض العناصر:
دعنا ننشئ متغيرا سنضيف إليه رمز هتمل لكل عنصر من عناصر المصفوفة:ل (اسمحوا لي = 0 ؛ أنا < الفواكه.الطول ؛ أنا {) {
قائمة الفاكهة +='
'+الفواكه [أنا]+'
';
}
في هذا المثال ، نستخدم حلقة تبدأ من الفهرس 0 وتعمل حتى يصبح الفهرس أقل من طول المصفوفة. في كل تكرار ، نضيف رمز هتمل لعنصر الصفيف إلى متغير قائمة الفاكهة.
- دعونا إنشاء عنصر هتمل
- لعرض قائمة عناصر المصفوفة على الصفحة
- كونست فروتسكونتينر = وثيقة.جيتليمينتبيد ('الفواكه-الحاويات');
- حاوية الفاكهة.إينيرتمل = '
- '+قائمة الفواكه + '
';
- في هذا المثال ، نستخدم طريقة جيتليمنتبيد للحصول على عنصر مع معرف 'الفواكه حاوية' ، ومن ثم تعيين محتوياته على قدم المساواة رمز هتمل التي تم إنشاؤها لقائمة عناصر الصفيف.
- بعد تنفيذ التعليمات البرمجية أعلاه ، سيتم عرض قائمة عناصر مجموعة على الصفحة داخل العنصر مع معرف 'الفواكه الحاويات'.
- أمثلة على إخراج المصفوفة على صفحة ويب
- تقدم جافا سكريبت عدة طرق لإخراج مصفوفة على صفحة ويب. لنلق نظرة على بعض الأمثلة:
- 1. باستخدام القائمة
توت العليق
| الكمثرى |
|---|
| التفاح |
| العنب |
| البرتقال |
| 2. باستخدام قائمة مرتبة |
| توت العليق |
الكمثرى
التفاح
العنب
البرتقال
3. باستخدام الجدول
الفاكهة
توت العليق
الكمثرى
التفاح
العنب
البرتقال
يمكنك اختيار الطريقة المناسبة لإخراج المصفوفة بناء على سياق وتفضيلات مشروعك.
سؤال وجواب
كيف يمكنني إخراج صفيف إلى صفحة في جافا سكريبت?