يمكن استدعاء الكود الوظيفي عند حدث معين أو عند استدعاء الكود الوظيفي .
وظائف الجافاسكربت JavaScript
لتتجنب إظهار الأكواد في المتصفح عند تحميل الصفحة يمكن وضع الكود ضمن كود وظيفي .
يحتوي الكود الوظيفي الذي سيظهر في المتصفح من خلال حدث معين أو من خلال استدعاء للكود كما يمكنك استدعاء الكود من أي مكان في صفحة الويب أو من خلال صفحة أخرى حيث يكون الكود موجود في ملف جافاسكربت خاص امتداده .js
يمكن تعريف كود الجافاسكربت في كلاً من <head> و <body> في الصفحة , على أي حال من الحكمة ارفاق الكود في قسم <head> في صفحة HTML للتأكد أن الكود يمكن قرائته و تحميله من خلال المتصفح قبل استدعائه .
كيفية يمكن تعريف الكود الوظيفي
التركيبة
يمكن استخدام الكود الوظيفي من خلال أولاً كتابة كلمة function ثم اسم الوظيفة ثم اذا أردنا ادراج متغيرات يجب وضعهم بين أقواس وأخيراً بين الأقواس المنحنية نضع الكود الذي نريد استخدامه .
function functionname(var1,var2,...,varX)
{
كود هنا
}
ان الباراميترات var1 و var2 الخ هي متغيرات أو قيم تمر تمريرها الى الكود الوظيفي ويمكن استخدام } الأقواس المنحنية { لتحديد بدابة ونهاية الكود الوظيفي .
ملاحظة : عند عدم استخدام أي باراميتر يجب استخدام الأقواس () بعد اسم الكود الوظيفي .
لاتنسى أهمية تشكيل الأحرف عند كتابة واستدعاء اسم الكود الوظيفي في الجافاسكربت أي الأحرف الكبيرة والصغيرة أي أن كلمة function يجب أن تكون بأحرف صغيرة حصراً ولاسيحدث خطأ . أيضاً يجب استدعاء اسم الكود الوظيفي بنفس كتابة ذلك الاسم عند إنشائه .
مثال
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("مرحباً بكم في المعهد العربي للبرمجة");
}
</script>
</head>
<body>
<form>
<input type="button" value="اضغط هنا" onclick="displaymessage()" />
</form>
</body>
</html>
اذا لم يتم وضع سطر الكود في الكود الوظيفي alert(“مرحباً بكم في المعهد العربي للبرمجة”); عندها سيتم إظهار النتيجة عند كل تحميل للصفحة .
أما باستخدام الكود الوظيفي لن يتم عرض النتيجة الا من خلال طلب المستخدم والضغط على الأيقونة وعند الضغط على الأيقونة سيتم استدعاء الكود الوظيفي displaymessage()
حالة العودة return
تستخدم حالة العودة return لتحديد قيمة يمكن العودة به من الكود الوظيفي . ولذلك فإن الأكواد الوظيفية التي ستعيد قيمة معينة يجب استخدام return .
يظهر المثال التالي عودة قيمة من خلال رقمين مختلفين في a و b
مثال
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(8,4));
</script>
</body>
</html>
عمر المتغيرات في الجافاسكربت JavaScript
ان قمت باستدعاء متغير باستخدام var ضمن الكود الوظيفي function فإن المتغير سيتم استخدامه فقط داخل الكود الوظيفي وسيتم اهماله خارج الكود الوظيفي . تسمى تلك المتغيرات بالمتغيرات المحلية .
ان قمت باستخدام متغير خارج الكود الوظيفي فإن جميع الأكواد يمكنها استخدامه كما يبدء عمر المتغير عند إنشائه وينتهي عند اغلاق الصفحة .
ليست هناك تعليقات:
إرسال تعليق