تعلم البرمجة عن طريق كتابة قصائد الكود

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

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

لماذا يعتبر تعلم البرمجة أمرًا صعبًا للغاية؟

فيما يلي بعض المفاهيم الخاطئة حول لماذا أعتقد أن الناس يواجهون صعوبة في التعلم أو الاهتمام بجافا سكريبت (أو أي لغة ترميز):

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

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

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

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

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

حقيقة ممتعة : بعض لغات البرمجة لديها بالفعل الانتقال من لغة برمجة إلى أخرى في الاعتبار. هذا هو السبب في أنه من الأسهل بكثير تعلم الكثير من لغات البرمجة - فقط من خلال تعلم لغة واحدة.

مثال صغير

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

 (function() { // Your code goes here })();

(نعم! في هذه الحالة ، يتم تحديد الوظيفة بين قوسين ، ثم يتم استدعاؤها على الفور بزوج آخر من الأقواس في النهاية. يشار إلى هذا باسم IIFE.)

أو في بعض الأحيان مثل هذا:

 if (document.readyState === 'complete') { // Your code goes here }

يتطلب المقتطف الأول بالتأكيد شرحًا ، بينما مع الثاني (وربما بعض الخيال) ، يمكن للمرء أن يفهم أن هناك شرطًا يجب الوفاء به بحيث يحدث شيء آخر بمجرد النظر إليه.

تخيل شيئًا كهذا ، على الرغم من:

 onceUponATime(function () { // Your code (story) goes here })

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

ملاحظة سريعة حول "الوظائف ": الوظيفة هي في الأساس مهارة ، تظل كامنة حتى تستدعيها. "القراءة" هي function read() { … } ، والتي يتم استدعاؤها عندما تريد قراءة شيء مثل هذا: read() . هناك أيضًا ما يسمى "الوظائف المجهولة" ، أي "function() { … } (ليس لها اسم ، كما هو الحال في المقتطفات أعلاه) وهي في الأساس" إجراءات لمرة واحدة / غير رسمية "لا تعتبرها مهارة ، مثل "للضغط على زر".

قلب الجداول: من الرسالة إلى الأساسيات

لذلك دعونا نأخذ هذه الفكرة إلى أبعد من ذلك. لنأخذ الأسباب والمفاهيم الخاطئة أعلاه ونقلبها رأساً على عقب:

قصيدة صغيرة.

مكتوب بلغة جافا سكريبت.

صنع للبشر.

عن الحب بين فردين.

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

إنه لا يعمل. إنه غير مخصص حاليًا للآلات. من المفترض أن تقرأ وتفهم.

إذا تلقيت رسالة القصيدة ، فقد فهمت بالفعل جزءًا من كود JavaScript ، والذي ربما تكون قد قارنته باللغة الإنجليزية.

الآن قد تسأل نفسك: أنا أفهم هذا ، لكن لماذا كتب على هذا النحو؟ ما هي قواعد (قواعد) هذه اللغة؟ ما معنى "أنا" (بالمعنى التقني) ، ولماذا يبدو هذا الرمز مشابهًا جدًا للغة الإنجليزية؟

القواعد والمفردات والمتغيرات

من أهم الأشياء التي يجب فهمها عند تعلم لغة البرمجة مفهوم المتغيرات .

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

تأتي JavaScript ، مثل العديد من لغات البرمجة الأخرى ، مع مجموعة القواعد الخاصة بها (على سبيل المثال . بين الكلمات if if و document ، و window ، و Event ، وما إلى ذلك). هذه الكلمات الرئيسية محجوزة (أو "محددة مسبقًا") بواسطة JavaScript (والمتصفح) ، ولكل واحدة منها غرضها المحدد.

ولكن كما ذكرت سابقًا ، فإن فرصة مقارنة الكلمات والجمل التي تعرفها من اللغة الإنجليزية مفقودة على ما يبدو لأنه لا توجد مكافئات .

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

في جميع اللغات ، ربما توجد كلمة للحب. أنت تعرف نوعًا ما ما تعنيه ، ولكن ليس حقًا ، لأنها ذاتية للغاية. ولكن لا يزال هناك كلمة لذلك.

لكن في JavaScript ، لا يوجد "حب" ، حتى تقول إنه موجود. يمكن أن يكون ما تريده أن يكون.

 var love = { color: 'red', duration: 365, loveTarget: 'cats', }; // a simple variable expression, // where love is an object “{ … }”, a thing // with some properties (color, duration, loveTarget).


 const love2 = {color: 'purple'، duration: 'forever'، loveTarget: 'كلاب'،}؛
 // أيضًا تعبير متغير ، حيث love2 (ثابت) ، // لا يمكن إعادة تعريفه / الكتابة فوقه بالكامل: // love2 = undefined؛ // => لن يعمل
 // ("غير محدد" هي كلمة رئيسية جافا سكريبت محددة مسبقًا ، // تقول أساسًا "ليس لها قيمة")

من الأهمية بمكان أن تكون قادرًا على التمييز بين ما تم تحديده مسبقًا في JavaScript (قواعد ومفردات JavaScript) ، وما هو مخصص بالفعل من قِبل المطور (يُعرف أيضًا باسم "منطق التطبيق" أو "منطق الأعمال").

العودة إلى القصيدة المكتوبة أعلاه:

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

تأتي هذه التعبيرات من مجموعة قواعد / مفردات JavaScript التالية:

 if (...) { ... } // if statement: when ... is met, do things in { ... } { inLove: true, } // an "object" with some info, some thing in the world. // can contain other info, and "skills" (functions). // "inLove" is a custom property, // "true" is pre-defined in javascript, (meaning: "yes") // and the value of "inLove". . // needed to access an objects property "my name: me.name" getDistanceTo() // an expression to "call" a function (a "skill"). // getDistanceTo is custom (not JavaScript), and a function, // so it can be executed / called upon with the "()" after. // sometimes you can pass arguments in those brackets (like "position") // to change the outcome of a function.

 me // an object, some thing in the world you // an object, some thing in the world position // an info about "you", accessed by the "." getDistanceTo // a skill of me, accessed by the "." getDistanceTo() // the skill, with javascript grammar telling: do it. getDistanceTo(position) // same, but do it with "position". setFeelings // another skill of me, accessed by the "." setFeelings({ inLove: true }); // the skill, with some instructions (an object).

 // This is how the definition of a being (me/you) could look like var me = { position: {x: 0, y: 0} // some coordinates, maybe getDistanceTo: function(position) { // calculate the distance, relative to own position }, setFeelings: function(feelings) { // handle those feelings... } } var you = { position: {x: 0, y: 0} // some coordinates, maybe } // the poem itself if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

مثال أكبر: شعر الكود التفاعلي

هذه هي الطريقة التي ظهر بها مشروعي الشخصي LoveBits. LoveBits هي تجربة تعلم / سرد قصص.

يحاول جذب اهتمام الأشخاص بجافا سكريبت / الترميز من خلال:

• وضع القابلية للقراءة ولغة الإنسان في المقام الأول ؛
• الجمع بين الكود وفن قد يكون القارئ على دراية به بالفعل.

القصة تدور حول اثنين (كائنات مستطيلة) ؛ واحدة من البتات (بلوبت) هي الرومانسية وتكتب قصائد حب جافا سكريبت إلى البتة الأخرى (PurpleBit).

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

"الحب من النظرة الأولى" (في الواقع إحدى قصائد LoveBits) ، على سبيل المثال ، يدور حول هاتين القطعتين اللتين تقول فيهما BlueBit أساسًا ، "إذا اقتربت بدرجة كافية من موقعك ، فسأضبط مشاعري على inLove: true . "

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

كما توحي القصيدة ، قد ترغب في جعل BlueBit يقع في حب PurpleBit عن طريق تقليل المسافة بينهما ، أليس كذلك؟ ذلك ما يمكن أن تفعله؟ يمكنك التفاعل وسحب BlueBit حوله ، وجعله يقع في الحب. لكن كن حذرًا ، ففي بعض الأحيان يكون هناك أكثر من نتيجة واحدة.

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

أين أذهب من هنا؟

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

هذا ما أوصيك بفعله بعد ذلك:

• تفضل دائمًا الذهاب مباشرة للحصول على أمثلة ورموز للتطبيقات بأكملها التي تجمع بين القواعد والمفردات والمتغيرات معًا لتشكيل منطق تطبيق ؛
• سيخبرك منطق التطبيق القصص التي ستساعدك على سد الفجوات كما في أمثلة التعليمات البرمجية أعلاه. مكتبات الكود والأدوات المساعدة مثل lodash سوف تزودك فقط بمفردات جديدة ستصبح مفيدة بعد أن تكون قادرًا على قراءة وفهم كود جافا سكريبت ؛
• راجع الكود الموجود ، وحاول تقسيمه إلى دوال صغيرة بأسماء تعكس ما يفعلونه. اكتب رمزًا يخاطب البشر والآلات على حدٍ سواء. اكتب الكود بطريقة يمكن قراءتها مثل الجملة. استخدم التعليقات حيثما دعت الحاجة. فكر في: كيف يمكنني التعبير عن هذا بلغة بشرية (لمطور آخر)؟

خاتمة

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

رسالة قبل الأساسيات : افهم رسالة أي مقتطف رمز ، وستتبع أساسيات JavaScript بشكل طبيعي. كم مرة سمعت أحدهم يقول "أنا أفهم اللغة لكني لا أتحدثها بعد"؟ إنها عملية طبيعية يمكن وربما ينبغي تطبيقها لتعلم اللغات البشرية ولغات الترميز.

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

استكشف دائمًا مشاريع الكود ، وربما حاول كتابة قصيدة بنفسك (ربما حتى بلغة برمجة أخرى تعرفها)؟ لقد استمتعت بإنشاء مشروع LoveBits وأود أن أرى بعض أفكارك في التعليقات أدناه!

قراءة متعمقة

• "إذا كتب همنغواي جافا سكريبت ،" أنجوس كرول
  هذا هو أحد كتبي المفضلة التي عثرت عليها بالفعل بعد LoveBits. يتعلق الأمر بالعديد من الشعراء والفنانين المشهورين ، وكيف كتبوا مقتطفات كود JavaScript. من المضحك!