Udacity Fonction javascript

السلام عليكم ورحمة الله تعالى وبركاته ،
في بدايتي لتعلم لغات البرمجة كان عندي التباس حول فهم الدوال او fuction في البرمجة ، في الحقيقة كانت الفانكشنلتي من اسهم ما وجد في البرمجة لانها تسهل علينا عدة عمليات منها اختصار الكود وتسريعه
ان كنا سنبني تطبيقات الجافاسكربت فان الدوال من أهم ما يميز هذه اللغة الرائعة فهي تعتمد على الدوال بشكل كبير جدا ، وعلى سبيل المثال فاننا نزاول عمل الدوال في ارض الواقع يوميا
لنفترض اننا في مصنع renault لتركيب السيارات بطبيعة الحال ماركة رينولت غنية عن التعريف


  • Left
  • Center
  • Right
Remove
click to add a caption

فهي الرائدة في صناعة السيرات في 80 وال90 في مصانع رينولت يتم توزيع المهام الى عدة فرق وكل فريق مسؤول عن تركيب جزء معين من السيارة هذه صورة للفريق المسؤول عن أبواب السيارة
في حالة ما كان هناك عطب مافي الابواب مثلا فان المسؤولية تحمل لفريق تركيب الابواب وهكذا كل فريق يبني السيارة
هكذا هي البرامج في الجافا سكربت كل دالة مسؤولة عن جزء من البرنامج واي عطب في البرنامج يسهل علينا التوجه نحو الدالة المسولة عنه فقد ضربنا مثل شركة رونولت في ان كل فريق يمثل دالة تقوم بعمل معين او اداء وظيفي محدد …
فوائد إستخدام الدوال:
  • إختصار الكود وعدم تكراره
  • تسهيل عملية اصلاح الأخطاء
  • يمكن جمع عدة دوال في دالة واحدة
  • ترتيب الكود ضمن مجموعات محددة
  • يمكن نسخ الدالة من خلال this شرح this keyword2
لبناء دالة نكتب الكود التالي في الجافا سكربت
function function_name(argument) { // body... }
نكتب function لتعريف المترجمات في المتصفح اننا نستخدم دالة ثم function_name إسم الدالة التي سنستدعيها عند الحاجة ثم argument الجدال تبع الدالة / الجدال دائما ما نضعه داخل قوسين ويمكن وضع دوال بدونه فقط فراغ () بعدا نقوم بفتح {} المعقوفات لكي نكتب الكود داخلها بدون البارزة ; في اخر الفانكشن اما هنا //body فهو مكان كتابة الكود الخاص بالدالة
<p id="ext"></p> <script type="text/javascript"> var f = number(20,50); document.getElementById("ext").innerHTML = f; function number(a,b) { return a + b ; } </script>
في الدالة نحتاج الى ما يعيد لنا قيمة الدالة او نتاج الدالة لذا نحتاج الى return في الكود أعلاه استخدمنا النص p يحتوي على المعرف id = ext قمنا في السطر التالي بمنادات المعرف ext ليمثل لنا نتاج القيمة الخاصة من الفانكشن number المتغير f حجزنا فيه الدالة ليسهل علينا استدعائه وتمثيله في المعرف ext بوضع الكود التالى var f = number(20,50); بعدها اعطينا للفانكشن جدال a,b داخل الدالة قمنا بعملية الزائد وهو جمع كل جدال a وجدال b وتمت اعادته باستخدام return النتاج كان هو 70 بطبيعة الحال يمكنك اخي الكريم تغيير عمليات الحسابية الى القسمة والضرب وتغيير الارقام للتاكد بنفسك
يمكن حجز دالة باستخدام هذه الطرقة
var number= function(s) { return s - s; }
كما ننادي الدوال بهذه الطريقة number(); او على الكونصول بهذه الطرقة `
console.log(number(argement));
لكي يسهل قنص الأخطاء
كما يمكنك استدعاء دالة من خلال دالة اخرى لنفترض انه لديك لعبة تتعامل مع canvas وتريد استدعاء كل العناصر مع بعضها من غير المنطقي منادات كل عنصر لوحده يستوجب ان تنادي العناصر معا
الان نتوجه لشرح الكويزات
Quiz: Laugh it Off 1 (5-1)
بما أننا نفهم حاليا بنية الفانكشن في الجافا سكربت فطلب منها ارداع قيمة خاصة ب string الفانكشن عبارة عن ارجاع محتوى ضحكة laugh() باستخدام return ل hahahahahahahahahaha!
Quiz: Laugh it Off 2 (5-2)
في هذا الكويز طلبو منا ان ندخل على الفانكشن laugh ثلاث مرات اي ان الحرفha سيعيد نفسه 3 مرات مع الحرص على نشر علامة التعجب في اخر الجملة ! لدينا البرمتر num نحتاج ان ندمجه في for اي لكل متغير var ha = ""; يجب الا يتجاوز 3 وان يبدا من الصفر تصاعديا ونعبر عليه بالكود التاليi=0; i<num; i++ نقول ان المتغير ha يساوي نفسه زائد ha في هذه المرحلة اصبح المتغيرvar ha="ha"; اذن لدينا طريقتين اما بادخال رقم على البرام num او اضافته الى الجانب بهذه الطريقة return ha *"3"; لا ننسى انه طلب منا ان نضع علامة التعجب (!) لذا لم يبقى لنا سوى خيار ان نضرب التعداد في البرام num ونضيف علامة التعجب في return
Quiz: Build a Triangle (5-3)
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
بناء الاشكال الهندسية باستخدام لغات البرمجة من اكثر الامور المسلية في اللغات البرمجي والاكثر تحديا بحيث تحتاج الى ما يشبه الاحجية لبنائها ، بناء مثلث من اسهل الاشكال الهندسية لبنائها بالجافا سكربت ما تجتاج اليه سوى nested for loop وتكرار نص او string معين مع تخصيص الحلقة المفرغة الاولى للصف الافقي والثانية للعمودي والعكس صحيح في حالة ماكنت تريد بنائها راسا على عقب فاما تصاعدي او تنازلي ، نصل الى التحدي في التمرين طلب منا فرضت علينا نداء دالة buildTriangle على دالة makeLine حيث كودها التالي
function makeLine(length) { var line = ""; for (var j = 1; j <= length; j++) { line += "* " } return line + "\n"; }
الفانكشن التالية ان عملنا لها log ستعطينا النتيجة التالية * * * * * * * * * * اي في سطر واحد رغم وجود return تخبرها بسطر جديد ، هذا ببساطة لاننا أخبرنا الكونبايلر اننا نتعال مع length اي طول الحلقة بالكامل ولم نعطيه الميكانيزم الخاصة لتوليد سطر جديد واضافة عنصر عند كل سطر يضيفه
الشطر التاني ان تكن اسم الفانكشن buildTriangle وتنادي الفانكشن makeLine منها ما سيكون علينا القيام به هو بناء دالة شبيعة تقريبا بالدالة المعطات عدا اننا سنعطي برمتر width ومتغير من اختيارنا ويكون هذا المتغير الشبيه بالمتغير line مضاف له الفانكشن makeLine مع متغير for loop ونقوم بارجاعه بعدها نقوم بضرب buildTriangle في 10 ونقصد بها هذه الطريقة buildTriangle(10)
Quiz: Laugh (5-4)
هذا الكويز شبيه جدا بالكويز رقم 5-1 مستخدمين طريقة 5-2 التغيير الصغير فقط هو في جعل الفانكشن شبيهة بالمتغير اي ما سنقوم به حو حجز الفانكشن بالكامل في المتغير laugh
الطريقة بسيطة نستخدمها بهذا الشكل
var laugh = function(argument){}
شريطة ان تتجاوز
laugh(3);
اي تكون النتيجة اربع مرات من ha وفي اخرها بطبعة الحال علامة التعجب رغم انهم اهملو ذكرها في هذا الكويز، الاجابة تقبل عند اضافتها
hahahaha!
Quiz: Cry (5-5)
الكويز سهل جدا طلب منكم حجز الفانكشن في متغير cry كما سبق وشرحنا في الكويز السابق واعادة قيمة string على شكل
”boohoo!“
ثم لا تنسى منادات الفانكشن او طباعة المتغير في اللوغ
Quiz: Inline (5-6)
كما نعلم ان الفانكشن تستطيع ا ن تحمل argument او برمترات يمكن الادخال عليها اما بطريقة الريتورن او عن طريقة البرام نفسه
function number(a,b) {
return a + b ;
}
عرفنا في البداية انه يمكننا حجز الفانكشن في متغير ويمكننا منادات الفانكشن من خلال فانكشن الان يمكننا الاداخال على فانكشن من خلال كود المنادات بطريقة inline لدينا سلفا I am لذا سنضعها في الفانكشن ، ثم سنحتاج ان ندخل happy ا ذن بدل حجز متغير نقوم بادخاله او بالاحرى تعويض من خلال منادات الفانكشن emotions ثم بعدها نظيف الفاصلة ونقوم بتعويض الفانكشن بالكامل كما فعلنا مع string ,نستخدم repeat ل ha لانه طلب منا laugh(2)) في الشرط يمكننا ايضا تغيير 2 بالارغيمنت كالمتغير ما بين stringو الريتورن تبعها مثلا
myFunc(2) ان يعوض هذا
'ha'.repeat(n) بهذا
بعدها لا تنسى علامة التعجب لكي تحصل على المخرج التالي

I am happy, haha!
أتمنى ان يكون هذا الشرح مبسط ومفيذ في امان الله

Post a Comment

0 Comments