2024208494886170954365459073536587125329324600425355324472245929212525005525530030271027810172575929800065427858557245242200073127892960531555

الاثنين، 31 أغسطس 2020

لغة JavaScript الإقترانات Function - الدرس الخامس


 

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


parseInt(); 

و كذلك: 

parseFloat();


وقمنا بطرح مثال اضافة 50دولار لراتب موظف من خلال جملة prompt وهي جملة جافاسيكربت، لكن ماذا لو أردت أن يقوم المستخدم بإدخال رقمين لوسم داخل HTML مثل Form Input والقيام بعملية حسابة عليها بإستخدام JavaScript هنا يوجد تداخل بين التصميم وجمل البرمجةكما في الشكل التالي:



التصميم هنا كما أسلفنا في درس Input Tag  والشيفرة له كما يلي:


<html><body dir="rtl">

أدخل الرقم الأول

<input type="text" id="no1">

<p>

أدخل الرقم الثاني

<input type="text" id="no2">

<p>

<input type="button" value="جمع">

<p>

<p id="raad">النتيجة</p>


الأن نحن نريد أن نحجز موقعين في الذاكرة لكل رقم سيقوم المستخدم بإدخالة ونحن نعلم أن خلق متغير يكمن في الكلمة المحجوزة var أما لجلب قيمة من داخل HTML قيمية الرقم الأول الذي أدخلة المستخدم فيمكننا إستخدام الجملة:

document.getElementById("no1").value;


وكذلك سوف نفعل مع الرقم الثاني، وبالطبع جملة التحويل من قيمة رمزية الى عددية هي parseInt  ثم بالنهاية متغير لحفظ الجمع كما يلي:



<script>

var x=parseInt(document.getElementById("no1").value);

var y=parseInt(document.getElementById("no2").value);

var z=x+y;

أما لإظهار النتيجة مكان  وسم <p> الذي يحتوي قيمة ID هي raad :

document.getElementById("raad").innerHTML = z;



لكن حتى الأن لم نربط بين زر الجمع وبين السكربت وهو الزر الذي يقوم المستخدم بالضغط عليه لإظهار النتيجية وقد إستخدمنا سابقا خاصية onclick ليقوم الزر بتنفيذ شيء معين الأن ما هي الجملة التي يجب أن نضعها في هذه الخاصية علماً أن جمل السكربت في هذا المثال كثيره؟  الحل هو الدوال أو الإقتران:



الإقتران  Function:

هو دالة تحتوي مجموعة من الجمل البرمجية ولها إسم خاص يميزها نستطيع تفعيل هذه الجمل من خلال إستدعاء الإسم مرة واحدة دون الحاجة الى إعادة كتابة جميع جمل الإقتران من جديد.




أنواع اللإقترانات:

1- Built in Function: وهي إقترانات مبنية أساسا في لغة الجافاسيكربت وتلقائية مثل إقتران:

parseInt(); 


2- User defined- function: وهي التي يقوم المبرمج بتصميمها


وتتكون الشيفرة اللإقتران كما يلي بالصورة المختصرة:


function function_name ()

{

command1;

command2;

....

}

وكما يلي بالشكل الكامل:

function function_name (argument1, argument2 ...)

{

command1;

command2;

....

return x;

}

1- الكلمة المحجوزة function وهي تعني أننا نريد إنشاء إقتران.

2- إسم للإقتران وهو بنفس شروط تسمية المتغيرات راجع الدرس السابق.

3- الأقواس بعد إسم الإقتران مباشره دون فراغات ()

4- يمكن أنن تحتوي هذه الاقواس معاملات argument من خارج الإقتران  وإن كان أكثر من معامل نفصل بينهم بإشارة  الفاصلة ،

5- أقواس التي تحتوي جمل الإقتران command وهي بهذا الشكل {} لتحديد بداية ونهاية الإقتران

7- يمكن للأقتران أن يحتوي جملة إرجاع return

في مثال عملية الجمع نحن لا نحتاج معاملات ولا قيمة راجعة فقط الجمل التي قمنا بوضعها بالتالي سيصبح الإقتران كما يلي:


function myfunction ()

{

var x=parseInt(document.getElementById("no1").value);

var y=parseInt(document.getElementById("no2").value);

var z=x+y;

document.getElementById("raad").innerHTML = z;

}


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





لاحظ إستخدام الأقتران:




وتتبع القيم التي أخذتها المتغيرات من تصميم HTML :






الأن ما رأيك ان نقوم بعمل أكثر من زر للعمليات الحسابية  الأساسية الأربع كما في الشكل التالي:




بالتالي نحن بحاجة الى أربع إقترانات لكل عملية إقتران وأربع أزرار عند الضغط على أي زر يقوم بإستدعاء الإقتران المناسب له:






لاحظ أن كل زر قام بإستدعاء إقتران مختلف:





فمثلا أول زر إستدعى الأقتران الذي إسمة :

myfunction_1()


والثاني إستدعى الإقتران الذي إسمة:


myfunction_2()


كما يلي:






أما الفرق بين الإقترانات فهو فقط العملية الحسابية كما يلي:




بالتالي ستصبح الشيفرة الكاملة :

<html>

<body dir="rtl">

أدخل الرقم الأول

<input type="text" id="no1">

<p>

أدخل الرقم الثاني

<input type="text" id="no2">

<p>

<input type="button"  value="جمع" onclick="myfunction_1()">

<input type="button"  value="طرح" onclick="myfunction_2()">

<input type="button"  value="ضرب" onclick="myfunction_3()">

<input type="button"  value="قسمة" onclick="myfunction_4()">

<p>

<p id="raad">النتيجة</p>


<script>


function myfunction_1()

{

var x=parseInt(document.getElementById("no1").value);

var y=parseInt(document.getElementById("no2").value);

var z=x+y;

document.getElementById("raad").innerHTML = z;

}



function myfunction_2()

{

var x=parseInt(document.getElementById("no1").value);

var y=parseInt(document.getElementById("no2").value);

var z=x-y;

document.getElementById("raad").innerHTML = z;

}


function myfunction_3()

{

var x=parseInt(document.getElementById("no1").value);

var y=parseInt(document.getElementById("no2").value);

var z=x*y;

document.getElementById("raad").innerHTML = z;

}


function myfunction_4()

{

var x=parseInt(document.getElementById("no1").value);

var y=parseInt(document.getElementById("no2").value);

var z=x/y;

document.getElementById("raad").innerHTML = z;

}

</script>

</body></html>


لكن ماذا لو قام المستخدم بإدخال الرقم الثاني صفر وأختار القسمة علماً أنه لا يجوز القسمة على صفر هنا سنحتاج الجمل الشرطية وهذا ما سوف نقوم بشرحة في الدرس القادم إن شاء الله .. الى اللقاء.




----------------------------------------------------------------------------------------------------------------------------------------- -----------------------------------------------------------------------------------------------------------------------------------------

كافة الحقوق محفوظة لـ مدونة رعد: لإثراء المعرفة التقنية 2019