دورة جافا سكربت - Javascript الدرس الرابع | مدونة علم البرمجة والحاسوب

مساء الخير جميعااااااا

نبدا بالفصل الرابع اليوم

بسم الله الرحمن الرحيم

يشتمل هذا الفصل على

*** انشاء المصفوفات
*** العناصر المدرجة داخل المصفوفات
*** استخدام نظام التكرار لادخال قيم الى عناصر المصفوفة
*** اضافه المزيد من العناصر
*** سلاسل الاحرف الخاصه بالعناصر
*** عكس الترتيب الخاص بالعناصر
*** المصفوفات الفرعيه
*** ترتيب عناصر المصفوفه
*** استخدام المصفوفه في التمهيد لعمليه التحميل الخاصه بالصور وعرضها بشكل متتالي

انشاء المصفوفات

تعتبر المصفوفة أشبه بالمتغير الذي يحتوي على قيم متعدده

ولكنها لا تشبه المتغير العادي الذي يشتمل على قيمه مفردة

ويتم التعامل مع المتغير على انه مصفوفه تستخدم اولا الكلمه الرئيسيه new

في لغه جافا سكربت مع المنشىء Array() ويمكن تحديد انواع متعدده من البيانات

في المصفوفه بتحديد اسم المصفوفه ثم رقم الفهرس الذي يبدا بصفر ويوضع داخل اقواس مربعه

مثال توضيحي

كود:

var a=new Array()

a[0]="First";

a[1]="JavaScript";

a[2]="Array";

يمكن للقيم داخل المصفوفه ان تستخدم على انها متغيرات عاديه

**** ملاحظة ****

الان نلاحظ ان فهرس المصفوفه يبدا من الصفر ورقم واحد يعتبر

العنصر الثاني ورقم اثنين يعتبر العنصر الثالث

وبالنسبه للمصفوفات الصغيره من الافضل ان يتم ادخال القيم فيها المصفوفه

كوسائط في المنشئ Array() التوضيح في المثال القادم الذي يستخدم ثلاث مصفوفات

كود:

<SCRIPT TYPE="text/javascript">

<!--

var a=new Array("21st","22nd","23rd");

var b=new Array("Jan,","Feb,","Mar,");

var c=new Array("2001","2002","2003");

alert(a[0]+b[1]+c[3]);

//-->

</SCRIPT>

**** ملاحظة ****

الان شرح الطريقه الذي تم في الحل

الجواب بسيط جدا انظر الى الحرف a ياخذ رقم صفر اذن ناخذ العنصر الاول منه وهو 21st

الحرف b ياخذ رقم واحد اذن ناخذ العنصر الثاني منه وهو Feb

الحرف c ياخذ رقم اثنين اذن ناخذ العنصر الثالث منه وهو 2003

عناصر المصفوفه

يطلق على كل قيمه في المصفوفه اسم عنصر

عندما يتم التعامل مع المتغير على انه مصفوفه تستخدم المنشئ new Array() فانه

يتحدد له خصائص وتقنيات يمكن استخدامها في التعامل العناصر الموجودة في المصفوفه

خاصية length التي تستخدم لتحديد عدد العناصر التي تشتمل عليها المصفوفه

ولاستخدام ايه خاصيه او تقنيه لابد من وضع نقظة وتعيين الاسم الخاص بالكائن

لذلك فإن خاصيه array.length تشير الى عدد العناصر في كائن المصفوفه

لاحظ ان المصفوفه التي تحتوي على ثلاث قيم ستحتوي على ثلاث عناصر ولكن نظرا لأن

رقم الفهرس يبدأ من الصفر فإن رقم العنصر الأخير في المصفوفه سيكون 2

مثال توضيحي

كود:

<SCRIPT TYPE="text/javascript">

<!--

var a=new Array();

a[0]="Much";

a[1]="More";

a[2]="JavaScript";

var arraysize=a.length;

alert(a[0]+a[1]+a[2]+"\nNo.of elements is"+arraysize;)

//-->

</SCRIPT>

**** ملاحظة ****

تستطيع تحديد وسيط للمنشئ Array() لتحديد عدد عناصر المصفوفات التي سيقوم

بانشائها مثل

كود:

var a=new Array(8)

استخدام نظام التكرار لادخال قيم الى عناصر المصفوفة

يمكن استخدام جميع انواع انظمة التكرار من اجل ادخال عدد كبير من

القيم الى عناصر المصفوفه وهذا سبب الاقبال على المصفوفات

ويمكن تحقيق ذلك باستخدام كود صغير جدا

بقوم المثال التالي بانشاء المصفوفه بحيث كل دوره يقوم نظام تكرار for

بادخال قيم عباره عن سلاسل حرفيه الى عناصر المصفوفه برفع القيمه في عداد نظام

التكرار في كل مره بمقدار واحد صحيح وكل قيمه للعنصر يتم ادخالها في المتغير

str قبل العرض النهائي في مربع حوار التحذير

كود:

<SCRIPT TYPE="text/javascript">

<!--

var str="FILL ELEMENTS LOOP\n\n";

var arr=new Array();

for (var i=0;i<8;i++){

arr[i]="Number is"+i+"\n";

str +=arr[i];

}

alert(str);

//-->

</SCRIPT>

**** ملاحظة ****

في المثال السابق يمكن جعل الكود يستخدم في الادخال الى قيم 100 عنصر من خلال

تغيير القيمة الخاصه بعدد المرات التكرار من 8 الى 100

اضافه المزيد من العناصر

يمكن اضافه بعض العناصر الاخرى الى المصفوفه دون تحديد رقم الفهرس

الفعلي باستخدام خاصيه array.length لايجاد العنصر التالي المتاح الذي لا يحتوي

على قيمه ونظرا لان قيمه خاصيه array.length تزيد على رقم الفهرس الاخير بمقدار

واحد فانها ستقوم بتحديد العنصر التالي عندما يتم استخدامه كرقم فهرس بين

الاقواس التي تنتمي لهذا الشكل المثال يوضح تعيين الرقم الصحيح 4 للعنصر

التالي الذي لا يحتوي على قيمه في المصفوفه a ويتم كتابه عناصر المصفوفه b

بخط كبير ثم يقوم نظام التكرار for بتحديد قيم في عناصر المصفوفه b لكل عنصر

لا يحتوي على قيمه بشكل متتالي وفي النهايه يتم عرض جميع عناصر المصفوفه a

عن طريق داله alert() في شكل مسلسل من خلال تقنيه array.concat()

كود:

<SCRIPT TYPE="text/javascript">

<!--

var a=new Array(1,2,3);

a[a.length]=4   //a.length is 3

var b=new Array(5,6,7);

for(var i=0;i<b.length;i++){

a[a.length]=b[i]

}

alert(a.concat());

//-->

</SCRIPT>

**** ملاحظة ****

ستقوم تقنيه array.concat() بعرض جميع القيم الخاصه بالعناصر في ايه مصفوفه مع

وجود فواصل بينها

سلاسل الاحرف الخاصه بالعناصر

تقوم تقنيه array.join() في لغه جافا سكربت بتحويل جميع عناصر المصفوفه الى

مجموعه من السلاسل الحرفيه كما ان استخدام هذه التقنيه دون وسائط سيقوم بعرض

قائمه بكل القيم في عناصر المصفوفه مع وضع فواصل بينها مثل تقنيه array.concat()

ولكن تقنيه array.join() يمكن ان تقبل الوسيط الاختياري لتحديد فاصل بديل للفاصله

الافتراضيه المثال التالي سيؤدي الى عرض سلسله واحده من الاحرف تتخللها مسافات فاصله

كود:

<SCRIPT TYPE="text/javascript">

<!--

var a=new Array();

a[0]="It";

a[1]="isn\'t";

a[2]="rocket";

a[3]="science-";

a[4]="it\'s";

a[5]="just";

a[6]="Java";

alert(a.join(""));

//-->

</SCRIPT>

**** ملاحظة ****

قم بحذف الاقواس المفرد الشرطة المائله في \"n" لتجنب الاخطاء

عكس الترتيب الخاص بالعنصر

يمكن استخدام المصفوفات في حفظ اسم الملف او الـ url الكامل الخاص بكل عنصر

بهدف استخدامه مع السمات الفعاله في صفحات الويب كما تستخدم المصفوفات ايضا في

اظهار الشرائح الخاصه بجافا سكربت والتي توضح كيفيه تدوير مجموعه

من الصور مع تحديد فتره زمنيه تفصل بينها وتستخدم المصفوفات في حفظ العنوان الخاص

بكل صوره في العناصر الخاصه بها وعليه فان النص يمكن ان يشير الى كل منها بسهوله

من خلال ارقام الفهارس في المصفوفه وكذلك اذا اردت ان تعكس عرض الشرائح بعد

عرض الصورة النهائيه يمكنك تحقيق ذلك من خلال عكس ترتيب العناصر داخل المصفوفه

المثال التالي يقوم بعمل مصفوفه اوليه لثلاثه صور فقط بحيث يتم عكس الترتيب الخاص

بها بعد عرض الصورة الاخيره وضبط المتغير rev على true

كود:

<SCRIPT TYPE="text/javascript">

<!--

var imgs=new Array("img1.gif","img2.gif","img3.gif");

var rev=false;

//slideshow routine is displaying the final image so....

rev = true;

if(rev==true){

imgs.reverse();

rev=false;}    //remember to reset the test variable

alert(imgs.join("-");

//-->

</SCRIPT>

المصفوفات الفرعية

تقنيه تستخدم array.slice() في جافا سكربت في عمل مصفوفه جديده من المصفوفات الحاليه

باستخدام بعض قيم العناصر الحاليه وتتطلب هذه التقنيه ادخال وسيطين لتحديد ارقام الفهرس

الخاصه بالعناصر في المصفوفه الاصليه والتي يجب ان تبدا منها

وتنتهي عندها عناصر المصفوفه الجديده وقد يحتوي الوسيط الثاني على قيمة سالبه وهو ما يعني

ان العنصر يقع في نهايه المصفوفه واذا تم تحديد وسيط واحد فانه سيستخدم على انه أعلى رقم

الفهرس بالعنصر الاول وستقوم التقنيه بعرض مصفوفه جديده مع كل العناصر من هذا

الموضع فصاعدا يوضح المثالي التالي الطرق المختلفه التي تستخدم تقنيه array.slice()

كود:

<SCRIPT TYPE="text/javascript">

<!--

var a=new Array(1,2,3,4,5,6,7,8);

var b=a.slice(2,5);

var c=a.slice(1,-1);

var d=a.slice(3);

alert(a.slice("")+"\nArray b is"+b.slice("")+"\nArray c is"+c.slice("")+"\nArray d is"+d.slice(""));

//-->

</SCRIPT>

ترتيب عناصر المصفوفة

تسمح تقنيه array.sort() بترتيب القيم الخاصه بعناصر السلاسل الحرفيه بطريقه ابجديه

وفي بعض الاحيان يكون هذا مطلوبا ولذلك فان مخرجات يتم ترتيبها داخل المصفوفه بطريقه

ابجديه سيتم ترتيب القيم العدديه الصحيحه والقيم التي تحتوي على علامات عشريه

في وضع تصاعدي كما في المثال التالي

كود:

<SCRIPT TYPE="text/javascript">

<!--

var integers=new Array(3,8,1,9,7,5,4,2,6);

integers.sort(); var floats=new Array(0.5,0.125,0.57,0.25);

floats.sort(); var strings=new Array("NaWaL","NoNa","NaNo");

strings.sort();

var str="SORT";

str +="\n\nIntegers array is"+integers.join("-");

str +="\n\nFloats array is"+floats.join("-");

str +="\n\nStrings array is"+strings.join("-");

alert(str);

//-->

</SCRIPT>

استخدام المصفوفه في التمهيد لعمليات التحميل الخاصه بالصور واستعراضها

تستفيد صور rollover التي يتم عرضها بشكل متتالي في صفحات الويب من الامكانيات

الخاصه بجافا سكربت من اجل ابدال الصوره الاصليه باخرى عندما يقوم المستخدم بوضع مؤشر

الماوس على الصوره وحتى يتم العمل بسهوله دون اي تاخير في عمليه التحميل يجب

ان يكون قد تم تحميل الصوره المطلوبه التي ستحل محل الصورة الاصليه في ذاكرة

التخزين المؤقت الخاصه بالمتصفح وحتى يمكنك القيام بذلك قم باستخدام داله preload

الخاص بلغه جافا سكربت والذي يرغم المتصفح على تحميل الصورة من خلال الكائنات

Image() الجديده التي تستخدم الصور الجديده كمصدر لها

كود:

<SCRIPT TYPE="text/javascript">

<!--

var pics=new Array("pic1.gif","pic2.gif","pic3.gif");

var preload=new Array();

for(var i=0;i<pics.length;i++){

preload[i]=new Image();

preload[i].src=pics[i];

}

//-->

</SCRIPT>

المثال السابق يستخدم مصفوفات لتحميل ثلاثة صور حتى تكون جاهزه عند تشغيل التأثير

الخاص بالعرض المتتالي لهذه الصور وتحتوي المصفوفه الاولى على العنوان الخاص بملق الصورة

وفي كل عنصر في مصفوفه pics يقوم نظام التكرار for انشاء عنصر

مشابه في المصفوفه التي تم تحمليها من قبل بثلاثه صور ويتم انشاء كل عنصر من العناصر

الخاصه بهذه المصفوفه في كائن Image() ثم يتم تحديد عناوين المواقع الخاص بالصوره

في خاصيه src وبذلك يمكن للمتصفح ان يقوم بتنزيل ملفات الصورة

دورة جافا سكربت - Javascript الدرس الرابع

بحث هذه المدونة الإلكترونية

اقسام المدونة

أرشيف المدونة الإلكترونية

من انا ؟