تعلم جافا سكريبت في 10 أيام /الدرس الثالث: الدوال
نشرح في درس اليوم مفهوم الدوال (Functions) في جافا سكريبت للمبتدئين.
ما هي الدوال؟
الدوال هي مجموعة من التعليمات التي تنفذ معًا لأداء مهمة معينة. تعد الدوال أحد أساسيات البرمجة في جافا سكريبت وتساعد في تنظيم وإعادة استخدام الشيفرة.
كيف تعرف الدالة في جافا سكريبت؟
يمكن تعريف الدالة في جافا سكريبت باستخدام الكلمة الرئيسية function متبوعة بالاسم الذي تختاره للدالة. ثم تأتي قائمة المعاملات المدخلة داخل قوسين مربعين. تكون جسم الدالة محاطًا بالأقواس المنحنية الزوجية `{}` ويتضمن التعليمات التي يجب تنفيذها.
function functionName(parameter1, parameter2) {
// Function body
// Instructions to be executed
}
كيف تستدعي الدالة؟
بعد تعريف الدالة، يمكنك استدعائها باستخدام اسمها متبوعًا بقوسين في حال كانت هناك معاملات أو وسطاء محددة للدالة، يجب تمريرها عند استدعائها بالشكل التالي:
functionName(argument1, argument2);
مثال1 على دالة في جافا سكريبت
دعونا نقدم مثالًا بسيطًا على كيفية إنشاء واستخدام الدوال سأعرف دالة لجمع عددين كما يلي:
// simple function that adds two numbers
function add(number1, number2) {
let result = number1 + number2;
return result;
}
// Call the function and pass numbers as arguments
let sum = add(5, 3);
// Print the result
console.log("Sum: " + sum);
هذا المثال يعرض دالة تقوم بجمع رقمين وإرجاع الناتج. ثم تستدعى الدالة وتمرير الأرقام 5 و 3 كمعاملات، ويتم طباعة ناتج الجمع في النهاية.
مثال2 على دالة في جافا سكريبت لتعديل النص في صفحة ويب
بفرض لديك صفحة HTML تحتوي على مجموعة من العناصر مثلًا العنصر <h1> ونريد تعريف دالة لتغيير نصه وإضافة زر لتغيير النص أي عند النقر فوقه نستدعي الدالة المطلوبة.
لتحقيق هذا الهدف، سنعرف دالة changeText تعمل هذه الدالة على تحديد العنصر`<h1> باستخدام `getElementById ثم، تقوم بتغيير نص العنصر باستخدام innerHTML إلى النص الجديد الذي نريد عرضه
هذا الكود المطلوب:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Example</title>
</head>
<body>
<h1 id="demo">مرحبًا بك في صفحة الويب</h1>
<button onclick="changeText()">تغيير النص</button>
<script>
// تعريف الدالة changeText() التي تقوم بتغيير نص العنصر الذي يحمل id "demo"
function changeText() {
var element = document.getElementById("demo");
element.innerHTML = "تم تغيير النص!";
}
</script>
</body>
</html>
يعطي الكود السابق هذا الخرج
بمجرد النقر على الزر تغيير النص سوف تجد أن نص العنصر <h1> يتغير فوراً إلى تم تغيير النص!
