يمكن استدعاء الكود الوظيفي عند حدث معين أو عند استدعاء الكود الوظيفي . لدوال functions الدوال Functions : الدالة هي عبارة عن برنامج فرعي يتم تعريفه ليقوم بوظيفة معينة ويتم استدعاؤها داخل البرنامج من اجل تنفيذ التعليمات الموجودة بداخلها يمكن استدعاء الكود الوظيفي عند حدث معين أو عند استدعاء الكود الوظيفي . لتتجنب إظهار الأكواد في المتصفح عند تحميل الصفحة يمكن وضع الكود ضمن كود وظيفي . يحتوي الكود الوظيفي الذي سيظهر في المتصفح من خلال حدث معين أو من خلال استدعاء للكود كما يمكنك استدعاء الكود من أي مكان في صفحة الويب أو من خلال صفحة أخرى حيث يكون الكود موجود في ملف جافاسكربت خاص امتداده T.بدور الجنيدل

الفائدة من استخدام الدوال Functions سهولة متابعة وإصلاح البرنامج . المساعدة في فهم البرنامج. عدم تكرار الجمل المراد إعادة تنفيذها T.بدور الجنيدل

كيفية يمكن تعريف الكود الوظيفي التركيبة(الصيغه العامه) يمكن استخدام الكود الوظيفي من خلال أولاً كتابة كلمة function ثم اسم الوظيفة ثم اذا أردنا ادراج متغيرات يجب وضعهم بين أقواس وأخيراً بين الأقواس المنحنية نضع الكود الذي نريد استخدامه . T.بدور الجنيدل

يتم استدعاء الدالة عن طريق امسها مع مراعاة نوع وعدد الوسائط التي تستقبلها مهم T.بدور الجنيدل

مثال T.بدور الجنيدل

3. أيضاً يجب استدعاء اسم الكود الوظيفي بنفس كتابة ذلك الاسم عند إنشائه ان الباراميترات var1 و var2 الخ هي متغيرات أو قيم تمر تمريرها الى الكود الوظيفي ويمكن استخدام } الأقواس المنحنية { لتحديد بدابة ونهاية الكود الوظيفي . ملاحظة : عند عدم استخدام أي باراميتر يجب استخدام الأقواس () بعد اسم الكود الوظيفي . 2. لاتنسى أهمية تشكيل الأحرف عند كتابة واستدعاء اسم الكود الوظيفي في الجافاسكربت أي الأحرف الكبيرة والصغيرة أي أن كلمة function يجب أن تكون بأحرف صغيرة حصراً ولاسيحدث خطأ . 3. أيضاً يجب استدعاء اسم الكود الوظيفي بنفس كتابة ذلك الاسم عند إنشائه T.بدور الجنيدل

مثال T.بدور الجنيدل

مثال T.بدور الجنيدل

عمر المتغيرات في الجافاسكربت JavaScript ان قمت باستدعاء متغير باستخدام var ضمن الكود الوظيفي function فإن المتغير سيتم استخدامه فقط داخل الكود الوظيفي وسيتم اهماله خارج الكود الوظيفي . تسمى تلك المتغيرات بالمتغيرات المحلية . ان قمت باستخدام متغير خارج الكود الوظيفي فإن جميع الأكواد يمكنها استخدامه كما يبدء عمر المتغير عند إنشائه وينتهي عند اغلاق الصفحة . T.بدور الجنيدل

مثال T.بدور الجنيدل

مثال :- برنامج يحتوي على دالة Functions تقوم بإيجاد حاصل ضرب عددين مدخلين من قبل المستخدم ؟ <script language ="JavaScript"> var x , y , z x =prompt("ادخل العدد الاول”) y =prompt("ادخل العدد الثاني “) document.write ("<br>"+ x +"العدد الاول”) document.write ( "<br>"+ y +"العدد الثاني”) //summation استدعاء داله z= summation(x,y) //يطبع النتيجه document.write( "<br>"+ z + " النتيجه هي :”) //------------------------------------------------------------------------ انشاء الداله الجديده هي الضرب // function summation (a,b) { var sum =0 sum= a * b return sum; } </script> T.بدور الجنيدل

ما ھي المصفوفات Arrays قبل أن نذھب لتعريف ما ھي المصفوفات ؟! لوأننا نريد عمل التالي : نريد طباعة الرسائل التالية  "مرحبا بك" "نحن الأن نتعلم المصفوفات "الحمد الله" ف على حسب ما تعلمناه في فصل المتغيرات فسوف نقوم بتعريف ثلاث متغيرات حتي نحفظ فیھا الرسائل السابقة ، كما يلي ثم نقوم بطباعه الرسائل كما يلي :؟ T.بدور الجنيدل

تخیل أنك تريد عمل المثال السابق ولكن لیس علي ثلاث متغيرات بل علي ١٠٠ متغير نصي أو قل عدد غیر محدد من المتغیرات ، ربما يسبب لك ھذا إحساس بالضیق لكثرة الأكواد التي سوف تكتب لإتمام ھذه المھمة من ھنا أتت الحاجة لعمل نوع جديد من المتغيرات وھو ما يطلق علیه المصفوفات Arrays ولكن ما ھي المصفوفات Arrays : المصفوفات ھي من إحدى أنواع المتغيرات ولكن يمكنك أن تخزن بھذا المتغیر قیمة واحدة أو أكثر . T.بدور الجنيدل

المصفوفات Arrays المصفوفات Arrays : المصفوفات واحدة من الأشياء المهمة جدا في بناء تراكيب الجافا سكريبت يمكن تصور تركيب المصفوفة علي أنها عمود واحد يحتوي علي عدة عناصر من البيانات و علي أنها صف يحتوي علي عدة عناصر من البيانات .... أو عدة أعمدة وعدة صفوف مثل الجدول في المصفوفة ذات البعدين .... ويبدأ العد في المصفوفة بداية من صفر (الذي يمثل العنصر الأول في المصفوفة), ولبناء مصفوفة ينبغي أن يتم تعريفها أولا كمتغير وكمصفوفة.. الأول : تعريف المصفوفة الأحادية هي عبارة عن صف أو عمود يحتوي علي عدة عناصر من البيانات . الثانيه : تعريف المصفوفة الثنائية هي عبارة عن عدة صفوف و عدة أعمدة (أي جدول) T.بدور الجنيدل

اولاً : المصفوفة الاحادية Arrays T.بدور الجنيدل

T.بدور الجنيدل

<script language ="JavaScript"> var family = new Array (4); مثال : اكتب كود JavaScript لتعريف مصفوفه Arrays باسم family ثم قراءه 4 أسماء (father- mother- brother- sister) ثم تخزينها في المصفوفة Array ثم طباعه قيم المصفوفة على صفحه الويب <html> <head> <script language ="JavaScript"> var family = new Array (4); family [0] = "father"; family [1] = "mother"; family [2] = "brother"; family [3] = "sister"; document.write(family ) ; </script> </head> <body> </body></html> ملاحظه T.بدور الجنيدل

كتابه رقم المصفوفه مع المتغير مثال : اكتب كود JavaScript لتعريف مصفوفه Arrays باسم family ثم قراءه 4 أسماء (father- mother- brother- sister) ثم تخزينها في المصفوفة Array ثم طباعه قيم المصفوفة على صفحه الويب حسب طلب <html> <head> <script language ="JavaScript"> var family = new Array (4); family [0] = "father"; family [1] = "mother"; family [2] = "brother"; family [3] = "sister"; document.write(family [0] , family [2] ) ; </script> </head> <body> </body></html> ملاحظه اما في حاله طباعه عناصر مختاره على شكل سطر واحد كتابه رقم المصفوفه مع المتغير document.write(family [0] , family [2] ) ; T.بدور الجنيدل

<script language ="JavaScript"> var family = new Array (4); مثال : اكتب كود JavaScript لتعريف مصفوفه Arrays باسم family ثم قراءه 4 أسماء (father- mother- brother- sister) ثم تخزينها في المصفوفة Array ثم طباعه قيم المصفوفة على صفحه الويب بحيث كل كتاب في سطر باستخدام for <html> <head> <script language ="JavaScript"> var family = new Array (4); family [0] = "father"; family [1] = "mother"; family [2] = "brother"; family [3] = "sister"; for(i=0;i<4;i++) { document.write(family[i]+"<br>") } ; </script> </head> <body> </body></html> ملاحظه اما في حاله طباعه عناصر بترتيب على شكل سطر واحد اوسطر مستقل و يمكن طباعة عناصر المصفوفة أيضا بإستخدام الأسلوب for document.write(family[i]+"<br>") ; او document.write(family[i]) ; T.بدور الجنيدل

قم بتعريف مصفوفتين ثم خصص مصفوفه لتكون عنصرا في الأخري :- <html> <head> <script language ="JavaScript"> var girl = new Array ("سارا","منى","عبير”) var boy= new Array ("صالح","محمد”,girl); document.write(boy) ; </script> </head> <body> </body></html> لاحظ أن عناصر المصفوفة العادية توضع بين علامتي التنصيص , أما عند وضع متغير أو مصفوفة كأحد عناصر مصفوفة أخري فلا يتم وضعها بين تلك العلامتين “” T.بدور الجنيدل

خاصية طول المصفوفة LENGTH :- تستخدم لمعرفة عدد عناصر المصفوفة **الصيغة العامة لها :- arrayName.length <html> <head> <script language ="JavaScript"> var name = new Array ("sara","omer","smah"); document.write(name.length) ; </script> </head> <body> </body></html> T.بدور الجنيدل

الأحــداث events الوينــدوز هــو محــيط رســائلي يــتم إرســال رســالة عنــد حــدوث حــدث مثــل مــرور الماوس فوق صورة أو فوق زر معين أو التركيز على نافذة أو ضغط الزر الأيمن أو الأيــسر أو الأوســط للمــاوس وهكــذا نــستغل هــذه الأحــداث لتنــشيط جــزء أو كــل مــن برنـامج جافـا سـكريبت ليقـوم بعمـل وظائفـه المـصمم مـن اجلهـا وسـنتعرض معـا بعـض الأمثلة والأحداث لشرح الفكرة : T.بدور الجنيدل

الأحداث المتاحة في الجافا سكربت مع شرح كل حدث : الحدث شرح الحدث Onclick () 1-عند نقر زر الفأرة على الكائن Ondblclick () 2-عند النقر لزر الفأرة مرتين متتاليتين onMouseOver () 3-عند مرور مؤشر الفأرة على الكائن OnMouseOut() 4-عند ابعاد مؤشر الفأرة عن الكائن OnMouseDown() 5-عند نقر زر الفأرة Onkeypress () 6-عند الضغط على اي مفتاح في لوحة المفاتيح Onfocus () 7-للكائن أي عند تحديد الكائن Tab عند استعمال Onhelp () 8- عند ضغط المستخدم المفتاح اف 8 Onresize () 9-عندما يتم تغير حجم اللإطار خاص بالصفحة onLoad() 10- عند انتهاء متصفح الانترنت من تحميل الحاليه onunLoad() 11-عند الخروج من الصفحة خاص بالصفحة الحاليه Onscroll () 12-عند تمرير الإطار خاص بالصفحة OnKeyDown() 13-ضغط المستخدم مفتاح من لوحة المفاتيح OnKeyUP() 14-إطلاق المستخدم المفتاح T.بدور الجنيدل

وتستدعيها عند استدعاء function وبالنسبة لتطبيق هذه الأفكار أمر عادي تكتب وظيفة الحدث كما في المثال التالي : <html> <head> <script language ="JavaScript"> function m1() { Window.alert("welcome") } </script> </head> <body> <input type="button" value="دخول “ onclick=m1() > </body> </html> ملاحظه عند الإقتراب والنقر على مربع النص يعمل الفانكشن وهكذا كل الأحداث تطبق .. احدد أدوات الفورم T.بدور الجنيدل

مثال: صوره طباعه :عمل function يقوم بأمر نافذه طباعه ثم عمل حدث الماوس OnMouseDown() و زر “طباعه ” <html> <head> <script language ="JavaScript"> function printer() { window.print() } </script> </head> <body> <img src="1.png" OnMouseDown=printer()> <input type="button" value="طباعه “ onclick=printer()> </body> </html> T.بدور الجنيدل

تذكير *ما تم دراسته في HTML انشاء جدول بسيط من عمودين و 3 صفوف مثلا : اذا طلب زياده اعملي نسخ الباقي <TABLE border=2> <TR> <TD> Data 1 <TD> Data 2 <‎/TR> <TR>  <TD> Data 3 <TD> Data 4 <‎/TR> <TR>  <TD> Data 5 <TD> Data 6 <‎/TR> <‎/TABLE> T.بدور الجنيدل

T.بدور الجنيدل