javascript:void(0); ما هو؟ دليل شامل لفهم وتطبيق هذا المفهوم في جافاسكريبت

1 min read Aldawsari
دقائق القراءة: 5

في عالم تطوير الويب، غالبًا ما نصادف مصطلحات أو تراكيب برمجية قد تبدو غامضة للوهلة الأولى. أحد هذه التراكيب هو javascript:void(0);. فماذا يعني هذا التعبير تحديدًا، وما هي استخداماته الشائعة؟ في هذا المقال، سنتعمق في فهم هذا المفهوم، بدءًا من معنى كلمة void في البرمجة وصولًا إلى تطبيقاتها العملية في لغة جافاسكريبت.

فهم مفهوم “void” في البرمجة

كلمة “void” تعني حرفيًا “فراغ” أو “عدم”. في سياق البرمجة، يشير هذا المصطلح إلى قيمة “لا شيء” أو “قيمة فارغة” يتم إرجاعها. عندما نقول إن دالة ما من نوع void، فإن ذلك يعني أنها لا تُرجع أي قيمة صريحة بعد تنفيذها.

متى تُرجع الدالة قيمة “فارغة” (undefined) في جافاسكريبت؟

في جافاسكريبت، هناك حالتان رئيسيتان تُرجع فيهما الدالة قيمة undefined (وهي أقرب ما يكون إلى مفهوم void في لغات أخرى):

  • الإرجاع الصريح لـ undefined: عندما تحدد الدالة صراحةً إرجاع القيمة undefined.
 function und () {
  return undefined;
}
und();
  • الإرجاع الضمني لـ undefined: عندما لا تحدد الدالة أي قيمة إرجاع على الإطلاق.
 function und () {
  // لا يوجد return statement هنا
}
und();

في كلتا الحالتين، بغض النظر عن العمليات التي تقوم بها الدالة (مثل جمع رقمين أو حساب متوسط)، فإنها لا تُرجع نتيجة ذات معنى يمكن استخدامها لاحقًا في البرنامج. الآن وقد فهمنا جوهر كلمة void، دعنا ننتقل إلى الجزء الأكثر إثارة للاهتمام: javascript:void(0).

تحليل التعبير javascript:void(0);

لفهم هذا التعبير بشكل كامل، دعنا نقسمه إلى جزأين رئيسيين: javascript: و void(0).

ما هو الـ javascript: (Pseudo URL)؟

يشير الجزء javascript: إلى ما يُعرف بـ “عنوان URL زائف” (Pseudo URL). عندما يرى المتصفح هذه القيمة كقيمة لخاصية href في وسم الرابط <a>، فإنه يفسر الكود البرمجي الخاص بجافاسكريبت الذي يأتي بعد النقطتين (:) بدلاً من التعامل مع القيمة كمسار مرجعي لصفحة أخرى.

على سبيل المثال:

 <a href="javascript:console.log('javascript');alert('javascript')">انقر هنا</a>

عند النقر على “انقر هنا”، سيقوم المتصفح بتنفيذ الكود المرفق:

صورة توضح نتيجة النقر على رابط جافاسكريبت زائف يقوم بتشغيل console.log و alert

كما يتضح أعلاه، لا يتعامل المتصفح مع href كمسار تنقل، بل ككود جافاسكريبت يبدأ بعد javascript: ويتم فصل الأوامر فيه بفاصلة منقوطة.

مشغل void() في جافاسكريبت

مشغل void في جافاسكريبت يقوم بتقييم تعبير معين ثم يُرجع دائمًا القيمة undefined. هذا يعني أنه ينفذ التعبير ولكنه يتجاهل نتيجته ويعيد قيمة “لا شيء”.

على سبيل المثال:

 const result = void (1 + 1);
console.log(result); // undefined

في هذا المثال، يتم تقييم التعبير 1 + 1 (لتكون النتيجة 2)، ولكن مشغل void يتجاهل هذه النتيجة ويُرجع undefined، والتي تُسند إلى المتغير result.

لتأكيد ذلك، إليك مثال آخر يوضح أن الكود داخل void يتم تنفيذه بالفعل، لكن القيمة المرجعة هي undefined:

 <body>
  <h1>عنوان الصفحة</h1>
  <script>
    void (document.body.style.backgroundColor = 'red', document.body.style.color = 'white');
  </script>
 </body>

نتيجة الكود أعلاه هي:

صورة توضح تغيير لون خلفية الصفحة ولون النص إلى الأحمر والأبيض باستخدام void

هنا، تم تغيير لون خلفية الصفحة ولون النص بنجاح، مما يثبت أن التعبيرات داخل void قد تم تنفيذها. ومع ذلك، فإن قيمة void(...) نفسها هي undefined.

مثال آخر يوضح أن void(0) يُرجع undefined:

 console.log(void (0) === undefined); // true

الجمع بين javascript: و void(0): الاستخدامات العملية

أحد الاستخدامات الشائعة لـ javascript:void(0) هو عندما لا ترغب في أن يقوم الرابط بتوجيه المستخدم إلى صفحة أخرى أو إعادة تحميل الصفحة الحالية. باستخدام بادئة javascript:، يمكنك تشغيل كود جافاسكريبت دون تغيير الصفحة الحالية. وعند دمجها مع void(0)، فإنها تعني “لا تفعل شيئًا” – أي لا تقم بإعادة تحميل الصفحة، ولا تتنقل إلى صفحة جديدة، ولا تُرجع أي قيمة يمكن أن تؤثر على سلوك المتصفح الافتراضي للرابط.

على سبيل المثال، رابط لا يفعل شيئًا عند النقر عليه:

 <a href="javascript:void(0)">رابط غير فعال</a>

في هذا المثال، يتعامل المتصفح مع كلمة “رابط غير فعال” كعنصر رابط (يمكن التركيز عليه باستخدام لوحة المفاتيح، على سبيل المثال)، لكن النقر عليه لا يؤدي إلى أي تنقل أو إعادة تحميل للصفحة. القيمة 0 هنا هي مجرد وسيطة يتم تمريرها إلى مشغل void، وهي لا تفعل شيئًا ولا تُرجع شيئًا (عدا undefined من المشغل نفسه).

يمكن أيضًا تمرير كود جافاسكريبت (كما رأينا سابقًا) كوسيطات لمشغل void. هذا يجعل عنصر الرابط يقوم بتشغيل بعض الأكواد، ولكنه يحافظ على نفس الصفحة لأن القيمة المرجعة النهائية من void هي undefined، مما يمنع المتصفح من اتخاذ إجراء التنقل الافتراضي.

على سبيل المثال، رابط يغير لونه عند النقر عليه دون مغادرة الصفحة:

<a id='myLink' href="javascript:void( document.querySelector('#myLink').style.color = 'green' )">تغيير اللون</a>

عند النقر على هذا الرابط، ستكون النتيجة:

صورة توضح رابطًا يتغير لونه إلى الأخضر عند النقر عليه باستخدام javascript:void(0)

باستخدام void، فإننا نخبر المتصفح بعدم إرجاع أي شيء ذي معنى (أو إرجاع undefined). حالة استخدام أخرى للروابط مع javascript:void(0) هي عندما يقوم الرابط بتشغيل بعض أكواد جافاسكريبت في الخلفية، وقد يكون التنقل إلى صفحة أخرى غير ضروري أو غير مرغوب فيه. في هذه الحالة، يتم استخدام التعبيرات كـ وسيطات يتم تمريرها إلى void.

الخلاصة التقنية

في هذا المقال المفصل، استكشفنا مفهوم javascript:void(0); بشكل شامل. لقد تعلمنا أن كلمة void في البرمجة تعني “لا شيء” أو “قيمة فارغة”، وكيف تُرجع الدوال في جافاسكريبت undefined بشكل صريح أو ضمني. كما فككنا التعبير javascript:void(0); إلى جزأيه: javascript: كعنوان URL زائف يسمح بتنفيذ كود جافاسكريبت، ومشغل void() الذي يقوم بتقييم التعبير ولكنه يُرجع دائمًا undefined.

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *