كيف أتعلم البرمجة - الدليل الذي أتمنى أن أحصل عليه عندما بدأت تعلم البرمجة

abdelouafi

Administrator
أحدث المقالات
إذا كنت ترغب في مشاهدة الصور ، يرجى النقر عليها
Blog
SUIVEZ NOTRE CHAINE YOUTUBE: قم بالتسجيل في قناتنا عبر هذا الرابط https://www.youtube.com/channel/UCCITRMWPcElh-96wCS3EyUg
devoir 1 math tronc commun

مجموعة من دروس و فروض جميع المستويات

دروس الإعدادي - دروس الثانوي الثأهيلي - دروس التعليم الابتدائي - فروض مختلف المستويات الدراسية

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

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

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

اخترت بدقة هذه الخطوات الـ 14 بناءً على رحلتي الشخصية في تعلم البرمجة ، والتي تمتد لما يقرب من 20 عامًا.

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

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

1- تعرف على بنية الكمبيوتر وأساسيات البيانات
2- تعرف على كيفية عمل لغات البرمجة
3- افهم كيف يعمل الإنترنت
4- مارس بعض أساسيات سطر الأوامر
5- قم ببناء مهارات محرر النصوص الخاصة بك باستخدام Vim
6- تناول بعض HTML
7- معالجة بعض CSS
8- ابدأ البرمجة باستخدام JavaScript
9- استمر في البرمجة باستخدام بايثون
10- عزز معرفتك بجافا
11- تتبع التعليمات البرمجية الخاصة بك باستخدام Git
12- تخزين البيانات باستخدام قواعد البيانات و SQL
13- اقرأ حول Web Frameworks و MVC
العب مع مديري الحزم
بدون مزيد من اللغط ، لنبدأ من القمة!

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

وهذا ما يسمى التجريد - القدرة على العمل مع أدوات ذات مستوى أعلى (في هذه الحالة لغات البرمجة) التي تبسط وتضيق النطاق المطلوب لفهمنا ومهاراتنا.

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

إذن ، إليك الحد الأدنى من أساسيات هندسة الكمبيوتر لتبدأ:

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

تعتمد الرقائق الدقيقة على مكون كهربائي يسمى الترانزستور لتعمل. الترانزستورات عبارة عن مفاتيح كهربائية صغيرة يتم إيقاف تشغيلها (0) أو تشغيلها (1) في أي وقت. يمكن أن تحتوي رقاقة واحدة على ملايين أو مليارات الترانزستورات الصغيرة المضمنة فيها.

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

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

إذا كانت وحدة المعالجة المركزية هي المركز المنطقي للدماغ ، فمن المفيد أن يكون لديك ذاكرة وكذلك لتخزين المعلومات مؤقتًا أو على المدى الطويل.

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

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

قبل الانتقال إلى مزيد من التفاصيل حول لغات البرمجة ، دعنا نقضي ثانية في الحديث عن البيانات. ولكن ماذا نعني بالضبط بكلمة البيانات؟

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

ولكن تحت غطاء المحرك ، لا تملك شريحة كمبيوتر (مثل شريحة وحدة المعالجة المركزية أو ذاكرة الوصول العشوائي) أي فكرة عن ماهية "الصورة" أو "الفيديو".

من منظور الرقاقة ، يتم تخزين كل هذه الهياكل على هيئة تسلسلات طويلة من الآحاد والأصفار. تسمى هذه الآحاد والأصفار بتات.

عادةً ما يتم تخزين البتات في مجموعة مكونة من ثمانية وحدات في كل مرة ، تُعرف بالبايت. البايت هو ببساطة سلسلة من ثماني بتات ، مثل 00000001 أو 01100110 أو 00001111. يُسمى تمثيل المعلومات بهذه الطريقة التمثيل الثنائي.

2) تعرف على كيفية عمل لغات البرمجة
في القسم السابق ، ذكرنا أن معظم أجهزة الكمبيوتر تعتمد على وحدة المعالجة المركزية (CPU) ، ويمكن لوحدة المعالجة المركزية فهم مجموعة محددة من التعليمات في شكل آحاد وأصفار.

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

يبدو العمل مروعًا ، أليس كذلك؟ حسنًا ، ربما يكون الأمر كذلك ، لكنني لا أعرف لأنني أستخدم في الغالب لغات برمجة عالية المستوى مثل JavaScript و Python و Java.

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

توفر لغات البرمجة وسيلة لسد الفجوة بين طريقة فهم أدمغتنا البشرية للعالم وطريقة فهم أدمغة الكمبيوتر (وحدات المعالجة المركزية) للعالم.

في النهاية ، يجب ترجمة الكود الذي نكتبه إلى التعليمات الثنائية (رمز الآلة) التي تفهمها وحدة المعالجة المركزية.

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

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

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

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

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

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

إذا كان الإنترنت مجرد ساحة محادثة كبيرة ، فلنحدد المشاركين في المحادثة.

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

في الحديث عبر الإنترنت ، يُطلق على الكمبيوتر الذي يبدأ المحادثة اسم العميل. الكمبيوتر الذي يستجيب أو يرد يسمى الخادم.

على سبيل المثال ، لنفترض أنك فتحت متصفح ويب وانتقل إلى "www.google.com". في هذا السيناريو ، متصفح الويب الخاص بك هو العميل. بالامتداد ، يمكنك أيضًا التفكير في الكمبيوتر الذي تعمل عليه كعميل.

بمعنى أكثر تجريدًا ، أنت العميل لأنك الشخص الذي يبدأ المحادثة. من خلال كتابة "www.google.com" في شريط البحث والنقر فوق <ENTER> ، يطلب متصفحك بدء محادثة مع أحد أجهزة كمبيوتر Google.

يسمى كمبيوتر Google بالخادم. يستجيب عن طريق إرسال البيانات المطلوبة لعرض صفحة الويب الخاصة بـ Google في متصفحك. وفويلا! تظهر صفحة الويب الخاصة بـ Google أمام عينيك. تستخدم جميع عمليات نقل بيانات الإنترنت هذا النوع من العلاقة بين العميل والخادم.

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

الحقيقة هي أنه لا يتطلب الأمر عبقريًا لاستخدام أو فهم سطر الأوامر. في الواقع ، يسمح لنا بأداء العديد من المهام نفسها التي نرتاح للقيام بها عبر الماوس الذي يعمل بالإشارة والنقر.

يتمثل الاختلاف الرئيسي في أنه يقبل بشكل أساسي الإدخال عبر لوحة المفاتيح ، والتي يمكن أن تسرع المدخلات بشكل كبير بمجرد تعطلها.

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

دعنا نتصفح برنامجًا تعليميًا قصيرًا لأوامر التنقل الأساسية التي ستمنحك إحساسًا بالعمل في سطر الأوامر.

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

جربها بنفسك:

كيفية استخدام سطر الأوامر
إذا كنت تستخدم جهاز Mac ، فافتح تطبيق Terminal ، وهو في الأساس محطة سطر أوامر Unix.

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

في موجه الأوامر ، اكتب pwd واضغط على <ENTER>. سيطبع سطر الأوامر المسار إلى المجلد الذي تتواجد فيه حاليًا.

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

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

الآن بعد أن عرفنا المجلد الذي نحن فيه ، يمكننا استخدام الأمر ls لسرد محتويات الدليل الحالي. الأمر ls يعني "قائمة".

اكتب ls واضغط على <ENTER>. تتم طباعة المحتويات (الملفات والمجلدات الفرعية) الموجودة في الدليل الحالي على الشاشة.

أعد تشغيل الأمر السابق مثل هذا ls -al واضغط على <ENTER>. سنحصل الآن على مزيد من التفاصيل حول محتويات الدليل ، بما في ذلك أحجام الملفات وتواريخ التعديل وأذونات الملفات.

تسمح لنا الواصلة في الأمر السابق بتعيين علامات معينة تعدل سلوك الأمر. في هذه الحالة ، أضفنا العلامة -a التي ستدرج جميع محتويات الدليل (بما في ذلك الملفات المخفية) بالإضافة إلى العلامة -l التي تعرض تفاصيل الملف الإضافية.

بعد ذلك ، يمكننا إنشاء مجلد جديد باستخدام الأمر mkdir ، والذي يرمز إلى "Make Directory". أدناه نقوم بإنشاء مجلد جديد يسمى "testdir".

اكتب mkdir testdir واضغط على <ENTER>. ثم اكتب ls واضغط على <ENTER>. يجب أن ترى دليلك الجديد في القائمة.

لإنشاء عدة أدلة متداخلة مرة واحدة ، استخدم العلامة -p لإنشاء سلسلة كاملة من الأدلة مثل هذا: mkdir -p directory1 / directory2 / directory3

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

أولاً ، اكتب cd testdir واضغط على <ENTER>. ثم اكتب pwd واضغط على <ENTER>. لاحظ أن الناتج يظهر الآن أننا داخل دليل "testdir" المحدد في الأمر cd. تصفحنا فيه!

اكتب cd .. واضغط على <ENTER>. يقوم .. بإخبار سطر الأوامر بالتصفح للخلف للوصول إلى الدليل الأصلي.
ثم اكتب pwd واضغط على <ENTER>. لاحظ أن الإخراج يظهر الآن أنك عدت إلى الدليل الأصلي. تصفحنا للخلف!

بعد ذلك سنتعلم كيفية إنشاء ملف فارغ جديد في الدليل الحالي.

اكتب touch newfile1.txt واضغط على <ENTER>. يمكنك استخدام الأمر ls لمعرفة أن الملف الجديد قد تم إنشاؤه في الدليل الحالي.

سنقوم الآن بنسخ هذا الملف من مجلد إلى آخر باستخدام الأمر cp.

اكتب cp newfile1.txt testdir واضغط على <ENTER>. استخدم الآن الأمرين ls و ls testdir لترى أن الملف الجديد لا يزال موجودًا في الدليل الحالي وتم نسخه إلى الدليل "testdir".

يمكننا أيضًا نقل الملفات بدلاً من نسخها باستخدام الأمر mv.

اكتب touch newfile2.txt واضغط على <ENTER> لإنشاء ملف جديد.
بعد ذلك ، اكتب mv newfile2.txt testdir واضغط على <ENTER> لنقل الملف إلى مجلد "testdir".

استخدم الأمرين ls و ls testdir لتأكيد نقل الملف إلى مجلد "testdir" (يجب ألا يظهر في الموقع الأصلي الذي أنشأته ، حيث أنه تم نقله وليس نسخه).

يمكن أيضًا استخدام الأمر mv لإعادة تسمية الملفات.

للقيام بذلك ، اكتب المس newfile3.txt واضغط على <ENTER> لإنشاء ملف جديد. ثم اكتب mv newfile3.txt cheese.txt واضغط على <ENTER> لتحديث اسم الملف. استخدم ls لتأكيد إعادة تسمية الملف.
أخيرًا ، يمكننا حذف الملفات والمجلدات باستخدام الأمر rm.

اكتب rm cheese.txt واضغط على <ENTER> لإزالة الملف. استخدم ls لتأكيد إزالة الملف.

اكتب rm -rf testdir واضغط على <ENTER> لإزالة دليل "testdir" ومحتوياته. استخدم ls لتأكيد إزالة الدليل.

لاحظ أننا بحاجة إلى استخدام العلامات -rf عند إزالة الدلائل. هذا يفرض إزالة المجلد وكافة محتوياته.

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

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

يعد العمل مع الملفات النصية في الجهاز أمرًا مهمًا لأن رمز الكمبيوتر ليس أكثر من نص محفوظ في مجموعة منظمة من الملفات.

بالتأكيد يمكننا استخدام محرر نصوص خيالي مثل Microsoft Word (أو محررات أكواد متخصصة على الأرجح مثل Sublime أو Atom) لكتابة وتحرير الكود الخاص بنا ، ولكن هذا ليس مطلوبًا. غالبًا ما تكون المحطة الطرفية هي المكان الأكثر ملاءمة لكتابة التعليمات البرمجية وتحريرها نظرًا لأننا عادةً ما نفتحها بالفعل لتشغيل الأوامر!

هناك العديد من برامج تحرير النصوص الممتازة التي تم إنشاؤها خصيصًا لهذا الغرض ، وأوصي بتعلم أساسيات برنامج يسمى Vim.
Vim هي واحدة من أقدم برامج تحرير النصوص الموجودة وهي جوهرة تم اختبارها عبر الزمن. يرمز Vim إلى "VI iMproved" لأنه خليفة أداة تسمى Vi.

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

لدى Vim القليل من منحنى التعلم ، ولكن مع القليل من الممارسة ، فإن المهارات التي تتعلمها ستؤتي ثمارها طوال حياتك المهنية في الترميز.

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

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

لدى Vim القليل من منحنى التعلم ، ولكن مع القليل من الممارسة ، فإن المهارات التي تتعلمها ستؤتي ثمارها طوال حياتك المهنية في الترميز.

يتم تثبيت Vim بشكل افتراضي على العديد من أنظمة التشغيل. للتحقق مما إذا كان مثبتًا على جهاز الكمبيوتر الخاص بك ، افتح سطر الأوامر واكتب vim -v.
إذا تم فتح Vim في المحطة الطرفية وعرض الإصدار ، فأنت على ما يرام! إذا لم يكن الأمر كذلك ، فستحتاج إلى تثبيته على نظامك. (لاحظ أنه يمكنك إنهاء Vim بكتابة:! q والضغط على <ENTER>). لمزيد من المعلومات حول تثبيت Vim ، راجع https://vim.org.

في رأيي ، الطريقة الأسرع والأسهل لتعلم كيفية استخدام Vim هي استخدام البرنامج التعليمي المدمج ، VimTutor. لتشغيله ، تأكد من تثبيت Vim على نظامك ، وافتح سطر الأوامر ، واكتب vimtutor ، واضغط على <ENTER>.

إنه برنامج تعليمي جيد لدرجة أنه لا يوجد سبب لي لإضاعة الوقت في محاولة شرحه هنا. لذا اذهب إلى VimTutor ، مثل الآن! نراكم في القسم التالي.

6) تناول بعض HTML
يمكنك التفكير في HTML - اختصارًا لـ HyperText Markup Language - على أنها عظام صفحة الويب. يحدد هيكل الصفحة عن طريق تحديد العناصر التي يجب عرضها والترتيب الذي يجب عرضها به.

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

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

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

في الواقع ، HTML هي في الأساس مجرد بيانات. إنها البيانات التي تحدد الشكل الذي يجب أن تبدو عليه صفحة الويب ، لا أكثر.

إذن كيف تكتب HTML؟ يستخدم HTML مجموعة قياسية من العلامات (بشكل أساسي تسميات فقط) لتحديد العناصر المتاحة التي تشكل صفحة الويب. يتم تعريف كل علامة باستخدام أقواس زاوية.
على سبيل المثال ، يتم تعريف علامة العنوان على أنها <title> عنوان صفحتي </title> ويتم تعريف علامة الفقرة على أنها <p> مجموعة من محتوى النص العشوائي. </ p>.

يتكون كل عنصر HTML من علامة بداية وعلامة نهاية. علامة البداية هي مجرد تسمية علامة بين أقواس زاوية ، مثل هذا:

<tagname>

هذا يفتح علامة HTML الجديدة. علامة النهاية هي نفسها بشكل أساسي ، لكنها تستخدم شرطة مائلة للأمام بعد قوس الزاوية الأول ، لتمييزها كعلامة نهاية:

</tagname>

أي نص بين العلامتين هو المحتوى الفعلي الذي ستعرضه الصفحة.

دعنا نغطي اثنين من أكثر العلامات شيوعًا قيد الاستخدام. الأول هو علامة <html>. هذا يحدد بداية صفحة HTML. علامة </html> مقابلة (لاحظ الشرطة المائلة للأمام) تحدد نهاية صفحة HTML. سيكون أي محتوى بين هذه العلامات جزءًا من الصفحة.

والثاني هو علامة <head>. يحدد هذا المعلومات الإضافية التي سيستخدمها المتصفح لفهم الصفحة. لا يتم عرض معظم المحتوى في هذه العلامة للمستخدم. تحدد علامة </head> المقابلة نهاية قسم HEAD.
في السابق ، رأينا علامة <title>. يحدد عنوان صفحة الويب التي سيعرضها المتصفح في علامة تبويب المتصفح. يجب وضع هذه العلامة داخل قسم <head> ... </head>.

التالي هو علامة <body>. يشكل كل المحتوى الموجود داخل هذه العلامة المحتوى الرئيسي لصفحة الويب. يبدو وضع هذه العلامات الأربع معًا كالتالي:​
<html>

<head>
<title>My Page Title</title>
</head>

<body>
<p>A bunch of random text content.</p>
</body>

</html>​
يمثل مقتطف HTML البسيط أعلاه صفحة ويب بسيطة بعنوان وفقرة واحدة كمحتوى أساسي.

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

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

<p>: فقرة من النص تبدأ بسطر جديد.
<h1>: عنوان صفحة يُستخدم عادةً لعناوين الصفحات.
<h2>: عنوان قسم يُستخدم عادةً لعناوين الأقسام.
<hx>: حيث x عبارة عن رقم يقع بين 3 و 6 ، للعناوين الأصغر.
<img>: صورة.
<a>: ارتباط.
<form>: نموذج يحتوي على حقول أو مدخلات للمستخدم لملئها وإرسالها.
<input>: حقل إدخال للمستخدمين لإدخال المعلومات ، عادةً ضمن نموذج.
<div>: قسم محتوى يستخدم لتجميع عدة عناصر أخرى معًا لأغراض التباعد.
<span>: عنصر تجميع آخر ، ولكنه يُستخدم لالتفاف عبارات نصية داخل عنصر آخر ، عادةً لتطبيق تنسيق معين على جزء معين فقط من محتوى النص.

7) معالجة بعض CSS
تشبه صفحة الويب التي لا تحتوي على CSS - أو أوراق الأنماط المتتالية - كعكة بدون تجميد. كعكة خالية من الصقيع تفي بالغرض ، لكنها لا تبدو فاتحة للشهية!

يتيح لنا CSS ربط خصائص النمط مثل لون الخلفية وحجم الخط والعرض والارتفاع والمزيد بعناصر HTML الخاصة بنا.

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

دعونا نرى كيفية ربط أنماط CSS بعناصر HTML الخاصة بنا. هناك ثلاث قطع لهذا اللغز:

محدد CSS: يستخدم لتحديد عنصر أو عناصر HTML التي نريد أن يطبق النمط عليها.

اسم خاصية CSS: اسم خاصية النمط المحددة التي نريد إضافتها إلى عناصر HTML المتطابقة.

قيمة خاصية CSS: قيمة خاصية النمط التي نريد تطبيقها.

فيما يلي مثال على كيفية تجميع هذه الأجزاء معًا لتعيين لون وحجم خط فقرة:​
p {
color: red;
font-size: 12px;
}​
لنبدأ من البداية ، قبل تقويم الأسنان المجعد. هذا هو المكان الذي ينتقل إليه محدد CSS. في هذه الحالة ، يشير الحرف p إلى علامة HTML <p> (الفقرة). هذا يعني أن الأنماط الموجودة داخل الأقواس المتعرجة ستنطبق على جميع علامات <p> على صفحة الويب.

دعنا ننتقل إلى ما يجري داخل الأقواس المتعرجة - الأنماط التي نريد تطبيقها على العناصر المستهدفة.

هنا نجد أزواجًا من خصائص وقيم CSS ، مفصولة بنقطتين. الخصائص (في هذه الحالة "اللون" و "حجم الخط") موجودة على اليسار. قيم هذه الخصائص (في هذه الحالة "أحمر" "12 بكسل") على اليمين. تنتهي الفاصلة المنقوطة كل زوج خاصية / قيمة.

ربما يمكنك أن ترى كيف يعمل هذا. تطلب مقتطفات رمز CSS أعلاه من المتصفح استخدام أحرف حمراء بحجم 12 بكسل لجميع النصوص الموضوعة داخل علامات <p>.

إذن كيف تعرف صفحة HTML تضمين أنماط CSS هذه؟ أدخل علامة HTML <link>. عادة ، يتم إنشاء أنماط CSS في ملفات منفصلة (ملفات .css) من HTML. هذا يعني أننا بحاجة إلى طريقة ما لاستيرادها إلى ملفات HTML الخاصة بنا حتى يعرف المتصفح أن الأنماط موجودة.

عنصر <link> موجود لهذا الغرض. نقوم بتضمين عناصر <link> في قسم <head> لملفات HTML والتي تسمح لنا بتحديد ملفات CSS الخارجية للاستيراد:​
<head>

<title>My Page Title</title>

<link rel="stylesheet" type="text/css" href="/home/style.css">

</head>​
في هذا المثال ، نقوم باستيراد أنماط CSS المحددة بواسطة السمة href ، في هذه الحالة الملف /home/style.css.

في الأقسام الثلاثة التالية ، سنتعمق (أخيرًا) في بعض لغات البرمجة الأكثر تقنية!

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

8) ابدأ البرمجة باستخدام JavaScript
لنبدأ بالإجابة على السؤال التالي: إذا كان بإمكاننا استخدام HTML لبناء بنية صفحة الويب و CSS لجعلها تبدو جميلة ، فلماذا نحتاج إلى JavaScript؟

الجواب هو أننا لا نفعل ذلك من الناحية الفنية. إذا كنا سعداء بموقع ثابت موجود هناك ويبدو جميلًا ، فنحن على ما يرام مع HTML و CSS فقط.

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

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

يعد JavaScript فريدًا إلى حد ما في هذا الصدد حيث تم تصميمه ليتم تنفيذه مباشرة داخل متصفحات الويب. يسمح لنا بكتابة رمز يمثل مجموعات من الإجراءات التي سيتم تنفيذها على صفحات الويب الخاصة بنا لجعل مواقعنا أكثر ديناميكية.
يمكنك إما كتابة كود JavaScript في ملفات نصية مسماة بامتداد .js أو داخل علامات <script> مباشرة في HTML.

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

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

الآن بعد أن قمنا بتغطية بعض المعلومات الأساسية ، دعنا نتعمق في بعض أساسيات لغة JavaScript.
المتغيرات والتعيين في JavaScript:

ربما تمثل المتغيرات المفهوم الأساسي في البرمجة. المتغير هو ببساطة اسم أو عنصر نائب يُستخدم للإشارة إلى قيمة معينة.

يشير متغير الكلمة إلى أن القيمة المخزنة يمكن أن تتغير طوال تنفيذ البرنامج.

يمكنك استخدام المتغيرات لتخزين الأرقام وسلاسل الأحرف النصية والقوائم وهياكل البيانات الأخرى التي سنتحدث عنها أكثر في غضون دقيقة.

تستخدم جميع لغات البرمجة المتغيرات ، لكن بناء الجملة يختلف باختلاف اللغات.

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

في JavaScript ، نعلن عن المتغيرات باستخدام الكلمة الرئيسية let ، مثل هذا: let x ؛.
هذا يصرح عن x كمتغير يمكننا استخدامه في الكود الخاص بنا. لاحظ أننا أضفنا فاصلة منقوطة في نهاية السطر. في JavaScript (والعديد من اللغات الأخرى) ، تُستخدم الفواصل المنقوطة لتحديد نهاية كل تعليمة برمجية.

الآن وقد أنشأنا المتغير x ، يمكننا تعيين قيمة له باستخدام علامة التساوي ، والتي تسمى أيضًا عامل الإسناد: x = 10؛

هنا قمنا بتعيين الرقم 10 إلى المتغير المسمى x. الآن في أي وقت نستخدم فيه x في الكود الخاص بنا ، سيتم استبدال القيمة 10 بـ.

يمكن إجراء كل من التصريح المتغير والتخصيص في سطر واحد على النحو التالي:​
let x = 10;​
أنواع البيانات في JavaScript
في القسم الأخير ، قمنا بتخزين قيمة عدد صحيح (عدد صحيح) في المتغير المسمى x. يمكنك أيضًا تخزين الأرقام العشرية أو أرقام الفاصلة العائمة كما هي معروفة. على سبيل المثال ، يمكننا كتابة: let x = 6.6 ؛.

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

في مصطلحات الترميز ، يسمى جزء من النص سلسلة. يمكننا تخزين قيمة سلسلة في متغيرنا x من خلال إحاطتها بعلامات اقتباس مفردة أو مزدوجة:​
let x = 'Hello there!';

let y = "Hey bud!";​
نوع البيانات التالي الذي سنناقشه هو منطقي. يمكن أن تحتوي القيمة المنطقية على قيمة واحدة فقط من قيمتين ، صواب أو خطأ - ويجب أن تكون جميعها بأحرف صغيرة. في JavaScript ، صواب وخطأ كلمتان رئيسيتان تستخدمان على وجه التحديد كقيم للمتغيرات المنطقية:​