استكشف مفاهيم جافا سكريبت السبعة التي يجب على كل مطور ويب معرفتها

JavaScript هي لغة برمجة يستخدمها مطورو الويب لزيادة التفاعل وتعزيز التجربة الديناميكية للمستخدمين. وفقًا لـ Statista ، يستخدم ما يقرب من 65 ٪ من مطوري البرامج في جميع أنحاء العالم JavaScript لتطوير صفحات الويب.

JavaScript هو جزء لا غنى عنه من الإنترنت الحديث. تشير Web3Techs إلى أن 95٪ من مواقع الويب تستخدم JavaScript وهي واحدة من أكثر لغات البرمجة شيوعًا في العالم. بالإضافة إلى ذلك ، فهو متعدد الاستخدامات ، وسهل للمبتدئين ، ومضغوط ، ومرن للغاية ، مما يسهل على مطوري الويب كتابة مجموعة متنوعة من الأدوات فوق لغة JavaScript.

ما هو جافا سكريبت؟

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

• تمرير الصورة
• يتم تحميل صفحة الويب دون تحديث الصفحة
• القوائم المنسدلة
• صور متحركة 2D / 3D
• تمرير مقاطع الفيديو
• خرائط تفاعلية
• تشغيل الصوت والفيديو
• الإكمال التلقائي

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

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

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

كيف تعمل JavaScript؟

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

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

تعمل JavaScript مع HTML و CSS ومتوافق مع متصفحات الويب الحديثة مثل Google Chrome و Internet Explorer و Firefox و Opera و Microsoft Edge وما إلى ذلك. عندما يقوم مستعرض ويب بتحميل صفحة ، فإنه يوزع HTML وينشئ نموذج كائن المستند (DOM) ، والذي يقدم عرضًا مباشرًا لصفحة الويب إلى كود JavaScript.

يقوم المستعرض بتخزين كل ما يتعلق بـ HTML ، مثل الصور وملفات CSS. بعد ذلك ، يجمع DOM بين HTML و CSS معًا لإنشاء صفحة الويب. بمجرد أن يقوم محرك جافا سكريبت بتحميل ملفات جافا سكريبت والرموز المضمنة ، فإنه لا يقوم بتشغيلها على الفور ولكنه ينتظر انتهاء تحميل HTML و CSS.

بمجرد الانتهاء ، يقوم البرنامج بتنفيذ برنامج JavaScript بترتيب الكود المكتوب. يساعد هذا الكود في تحديث DOM ويتيح للمتصفح عرضه.

7 مفاهيم جافا سكريبت التي يحتاج جميع مطوري الويب إلى معرفتها

مع تقدم عالم تطوير الويب بسرعة ، من الضروري التأكد من أن تعلم JavaScript يمكن أن يفيدك على المدى الطويل. مع استطلاع مطور 2021 StackOverflow الذي يتوج JavaScript باعتبارها لغة البرمجة الأكثر استخدامًا للمرة التاسعة على التوالي ، لا داعي للخوف من أهمية إتقان هذا البرنامج النصي.

حاليًا ، أكثر من 90٪ من مواقع الويب في جميع أنحاء العالم تستخدم JavaScript بشكل أو بآخر لتحسين تجربة المستخدم وزيادة التفاعل. علاوة على ذلك ، تمكنك إتقان هذه اللغة من إنشاء مواقع الويب من الصفر - وهي مهارة ذات فرص عمل رائعة في السوق الحالية.

لذلك ، دعنا نتعمق في مفاهيم JavaScript السبعة الأساسية التي يجب أن تعرفها إذا كنت ترغب في إتقان البرنامج النصي:

1. نطاق جافا سكريبت

في JavaScript ، النطاق هو سياق الكود الحالي الذي يحدد إمكانية الوصول إلى المتغيرات والموارد الأخرى إلى JavaScript. هناك نوعان من النطاق ستصادفهما:

• المتغيرات العالمية المعلنة خارج الكتلة
• المتغيرات المحلية المعلنة داخل الكتلة

الآن ، لنفترض أنك تريد إنشاء دالة والوصول إلى متغير محدد في النطاق العام. لذلك ، لنقم بإنشاء متغير عام:

// تهيئة متغير عالمي

var مخلوق = "ذئب" ؛

الآن ، باستخدام نطاق محلي ، يمكنك إنشاء متغيرات جديدة بنفس الاسم الموجود في النطاق الخارجي دون تغيير أو إعادة تعيين القيمة الأصلية.

2. إغلاق JavaScript

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

يحتوي الإغلاق على ثلاث سلاسل نطاق:

• يمكنه الوصول إلى نطاقه الخاص ، أي المتغيرات المحددة في الأقواس المتعرجة
• يمكنه الوصول إلى متغيرات الوظيفة الخارجية
• يمكنه الوصول إلى المتغيرات العالمية

ضع في اعتبارك الكود التالي على سبيل المثال:

function makeFunc() {

var name = 'Mozilla';

function displayName() {

alert(name);

}

return displayName;

}

var myFunc = makeFunc();

myFunc();

عند تشغيل هذه التعليمات البرمجية ، تقوم الدالة الخارجية makeFunc () بإرجاع دالة داخلية باسم displayName () قبل تنفيذها.

3. الرفع

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

علي سبيل المثال،

// using test before declaring

console.log(test); // undefined

var test;

ناتج هذا البرنامج غير محدد لأنه يتصرف على النحو التالي:

// using test before declaring

var test;

console.log(test); // undefin

نظرًا لأنه تم الإعلان عن اختبار المتغير ولكن ليس له قيمة ، يتم إرفاق القيمة غير المعرفة به.

أثناء الاستضافة ، يجب أن تضع في اعتبارك أنه على الرغم من ارتفاع الإعلان في البرنامج ، تتم إضافة الوظائف والإعلانات المتغيرة إلى ذاكرة مرحلة الترجمة.

4. Memoization

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

// a simple function to add something

const add = (n) => (n + 10);

add(9);

// a simple memoized function to add something

const memoizedAdd = () => {

let cache = {};

return (n) => {

if (n in cache) {

console.log('Fetching from cache');

return cache[n];

}

else {

console.log('Calculating result');

let result = n + 10;

cache[n] = result;

return result;

}

}

}

// returned function from memoizedAdd

const newAdd = memoizedAdd () ،

console.log(newAdd(9)); // calculated

console.log(newAdd(9)); // cached

5. نمط الوحدة

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

بالإضافة إلى ذلك ، يمكنك استخدام نمط وحدة لتجميع مجموعة من المتغيرات والوظائف معًا في نطاق واحد. مزايا هذا النمط هي:

• قابلية الصيانة - يضمن نمط الوحدة إمكانية صيانة أفضل لأن كل رمز يتم تغليفه في كتلة منطقية واحدة. هذا يجعل من السهل تحديث الكتل المستقلة.
• قابلية إعادة الاستخدام - يتيح لك نمط الوحدة أيضًا إعادة استخدام وحدة واحدة من التعليمات البرمجية عبر النظام الأساسي بأكمله. بالإضافة إلى ذلك ، نظرًا لأنه يمكنك إعادة استخدام الوظيفة المضمنة في الوحدة عدة مرات ، فلن تضطر إلى تحديد الوظائف نفسها بشكل متكرر.

6. IIFE

IIFE ، المعروف أيضًا باسم التعبير الوظيفي الذي تم استدعاؤه فورًا ، هو نمط تصميم شائع في JavaScript. يسمح لك سكربت البرمجة بتعريف المتغيرات والوظائف داخل وظيفة لا يمكنك الوصول إليها خارجها. ومع ذلك ، في بعض الأحيان ، تظهر مشكلة عندما تقوم عن طريق الخطأ بتلويث الوظائف أو المتغيرات العامة باستخدام نفس الاسم.

ومع ذلك ، فإن IIFE يحل هذه المشكلة من خلال وجود نطاق خاص به ، وتقييد الوظائف والمتغيرات لتصبح عالمية. في مثل هذه الحالات ، لن تتمكن الوظائف والمتغيرات التي تعلنها داخل IIFE من تلويث النطاق العالمي على الرغم من وجود نفس الوظائف والمتغيرات العامة.

7. تعدد الأشكال

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

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

<script>

فئة أ
{
display()
{

document.writeln("A is invoked");

}

}

class B extends A

{

}

var b=new B();

b.display();

</script>

هنا الإخراج هو:

تم استدعاء أ

وبالتالي ، يمكنك أن ترى كيف يستدعي كائن الفئة الفرعية طريقة الفئة الأصل.

تلخيصها ،

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

المؤلف السيرة الذاتية:

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