JavaScript Functions

-

بنحكي في هذا الدرس عن JavaScript Functions. ويمكن تعريف JavaScript Functions على انها كتلة block من الأكواد المصممة لأداء وتنفيذ مهمة معينة. ويتم تنفيذ هذا Function عندما يتم استدعاءه وتسمى عملية الاستدعاء Call 

تمام 

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

طبق الكود التالي :

<!DOCTYPE html>
<html>
<body onload="WelcomeMessage()">
<h3>JavaScript typeof Operator</h3>
<p id="Total"></p>
<script>
function WelcomeMessage()
{
alert("Hi, Welcome")
}
</script>
</body>
</html> 

النتيجة  

تمام نفهم شو عملنا. 

طريقة كتابة function 

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

نفهم الطريقة:

كلمة function  هي كلمة keyword محجوزة في اللغة اجباري تكون بهذا الشكل، 

بعدها اسم function (الاسم اختياري لك حرية الاختيار في الاسم لكن الأفضل يكون له علاقة بوظيفة function) 

بعد الاسم يجب اضافة الاقواس ( ) واذا في parameter برسلهم داخل هذه الاقواس، 

وأخيرا الكود المطلوب تنفيذه يوضع داخل  { }

اسم function يطبق عليه نفس شروط تعريف المتغيرات variables

للمزيد حول تعريف المتغيرات المتغيرات JavaScript: Variables.

في المثال السابق الكود الخاص ب function :

function WelcomeMessage()
{
alert("Hi, Welcome")
}

تمام فهمنا كيف نعمل function لكن السؤال المهم :

لماذا Function وشو الفائدة منها 

استخدام function و ( Procedure or a Subroutine تستخدم في لغات البرمجة الثانية ، مثل function) له فوائد كثيره في البرمجة منها 

  • عدم تكرار الأكواد (كتابة كود ممكن يستخدم في اكثر من مكان مره وحده ويتم استدعاءه عند الحاجه) وبالتالي السرعة في الأداء والانجاز
  • ممكن استخدام نفس الكود ولكن مع arguments مختلفة وبالتالي النتائج مختلفة.
  • تقسيم الكود الى مجموعات بحيث يمكن فهم الكود بطريقة اسهل وأوضح.

عند استخدام arguments (the parameters) وارسالها الى function تصبح داخل function متغيرات محليه local variables بمعنى آخر تستخدم فقط داخل هذا function.

مثال : 

نعمل function لإرجاع عمر الطالب بناء على تاريخ الميلاد:

الفكرة نرسل تاريخ الميلاد للطالب ونرجع العمر.  (Calculate age given the birth date )

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript typeof Operator</h3>
<p id="Total"></p>
Birth Date
<input type="date" id="txtbirthDate" >
<input type="button" onclick="getAge()" value="Get Age">
<script>
function getAge() {
    var today = new Date();
    var birthDate = new Date(document.getElementById('txtbirthDate').value);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
    alert(age);
}
</script>
</body>
</html> 

النتيجة:

تمام نفهم شو عملنا. 

اضفنا في البداية 2 element الأول لإدخال تاريخ الميلاد من نوع  textbox، والثاني لحساب التاريخ من نوع button. ومن خلال هذا button عملنا استدعاء function بعمل حساب للعمر 

كود function 

function getAge(dateString) {
    var today = new Date();
    var birthDate = new Date(document.getElementById('txtbirthDate').value);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
    alert(age);
}

عرفنا متغير لحساب التاريخ الحالي باستخدام الكود:

var today = new Date();

بعد هيك رجعنا قيمة التاريخ المدخل في text birth day باستخدام الكود:

var birthDate = new Date(document.getElementById('txtbirthDate').value);

الكود التالي عملنا طريح قيمة التاريخ الحالي من التاريخ المدخل وخزنا النتيجة في المتغير age حتى نعرف كم العمر بالسنوات

var age = today.getFullYear() - birthDate.getFullYear();

الكود التالي لمعرفة الشهور. 

    var m = today.getMonth() - birthDate.getMonth();

وفي اخر function رجعنا كم العمر باستخدام alert 

بهذه الطريقة يمكن استدعاء هذا function عند الحاجه ولا داعي لاعادة كتابة الكود كل مره.


استدعاء Function Invocation

يمكن استدعاء function من خلال مجموعه من الطرق منها: 

  • الاستدعاء بالنقر فوق button مثلا (وقع حدث معين)
  • استدعاء من خلال كود JavaScript 
  • استدعاء بشكل ذاتي Automatically (self invoked)

في مثالنا السابق استدعينا function عند تحميل الصفحه (onload) باستخدام الكود:

onload="WelcomeMessage()"


ملاحظة : سيؤدي استدعاء function بدون استخدام () إلى إرجاع function object بدلاً من نتيجة function.

طبق المثال التالي 

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Accessing a function without () will return the function definition instead of the function result:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(50);
</script>
</body>
</html>

لاحظ ان طريقة الاستدعاء 

document.getElementById("demo").innerHTML = toCelsius(50);

جرب تغير في طرية الاستدعاء الى 

document.getElementById("demo").innerHTML = toCelsius;

النتيجة بتكون 

تم طباعة الكود الخاص ب function كامل. وما تم ارجاع النتيجة


استخدام function  تماما مثل Variable 

في المثال السابق استدعينا function باستخدام الكود :

document.getElementById("demo").innerHTML = toCelsius(50);

لاحظ ان ارسلنا اسم function كامل كمتغير وعادي رجعت النتيجة بدون مشاكل. هاذ الحكي وفر علينا استخدام متغير variable لتخزين القيمة وارجاع النتيجة.

اذا كان بدنا نستخدم variable لتخزين النتيجة بكون شكل الكود:

Let result = toCelsius(50);

المتغيرات المحلية Local Variables 

المتغيرات الي بتم تعريفها داخل function تعتبر متغيرات محلية ولا يمكن استخدامها في مكان ثاني في الصفحه (فقط داخل هذا function).

يتم إنشاء Local Variables عند بدء تشغيل function، ويتم حذفها عند اكتمال function.