مقدمة في JavaScript ومشروع ختامي: ماذا بعد تعلم الأساسيات؟

📚 سلسلة تعلّم البرمجة للمبتدئين — الدرس 10 من 10
إذا فاتك الدرس السابق: أساسيات HTML وCSS: ابنِ أول صفحة ويب بنفسك

وصلنا إلى الدرس الأخير في سلسلتنا! بنينا في الدرس السابق بطاقة تعريف جميلة بـ HTML وCSS، لكن زرّها لا يفعل شيئًا. اليوم نتعلم أساسيات JavaScript لنجعل الصفحة تتفاعل مع الزائر، ثم نضع خطة واضحة لما بعد هذه السلسلة.

ما هي JavaScript؟

JavaScript لغة برمجة تعمل داخل المتصفح، وبها تستجيب الصفحة للنقرات والكتابة، وتتغير محتوياتها دون إعادة تحميل. ولن تجدها غريبة عليك؛ فالمفاهيم نفسها التي تعلمتها في Python موجودة هنا بكتابة مختلفة قليلًا.

من Python إلى JavaScript

المفهوم	Python	JavaScript
متغير	name = "Ali"	let name = "Ali";
طباعة	print(x)	console.log(x);
شرط	if x > 5:	if (x > 5) { }
حلقة	for i in range(5):	for (let i = 0; i < 5; i++) { }
دالة	def greet():	function greet() { }
قائمة	[1, 2, 3]	[1, 2, 3]

أبرز الفروق: JavaScript تستخدم الأقواس المعقوفة { } لتحديد الكتل بدل الإزاحة، ويُفضَّل إنهاء الأوامر بفاصلة منقوطة.

الفكرة الأساسية: الوصول إلى عناصر الصفحة

تتعامل JavaScript مع الصفحة عن طريق ما يسمّى DOM، وهو تمثيل لعناصر الصفحة يمكن قراءته وتعديله. وأهم ثلاث خطوات:

اختيار العنصر بـ document.getElementById أو document.querySelector.
الاستماع لحدث مثل النقر بـ addEventListener.
تغيير العنصر مثل نصه بـ textContent أو تنسيقه بـ style.

المثال الأول: زر يغيّر النص

<p id="msg">اضغط الزر</p>
<button id="btn">اضغطني</button>

<script>
  const btn = document.getElementById("btn");
  const msg = document.getElementById("msg");

  btn.addEventListener("click", function () {
    msg.textContent = "أحسنت! لقد كتبت أول كود JavaScript 🎉";
  });
</script>

نضع كود JavaScript داخل وسم <script>، ويُفضَّل وضعه في آخر الصفحة قبل </body> حتى تكون العناصر قد ظهرت قبل تشغيله.

المشروع الختامي: اختبار تفاعلي سريع

لنجمع كل ما تعلمناه في السلسلة: المتغيرات، والشروط، والدوال، والقوائم، وHTML وCSS، وJavaScript، في اختبار قصير يعمل في المتصفح. انسخ الكود في ملف quiz.html وافتحه:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>اختبار البرمجة</title>
  <style>
    body { font-family: Tahoma, sans-serif; background: #eef2f7; }
    .box { max-width: 420px; margin: 40px auto; background: #fff;
           padding: 24px; border-radius: 16px; text-align: center; }
    button { display: block; width: 100%; margin: 8px 0; padding: 12px;
             border: 1px solid #2c5aa0; border-radius: 8px;
             background: #fff; font-size: 16px; cursor: pointer; }
    button:hover { background: #e8f0fb; }
  </style>
</head>
<body>
  <div class="box">
    <h2 id="question"></h2>
    <div id="choices"></div>
    <p id="result"></p>
  </div>

  <script>
    const questions = [
      { q: "ما الأمر الذي يطبع في Python؟", options: ["print", "echo", "show"], answer: 0 },
      { q: "بأي رقم يبدأ فهرس القائمة؟", options: ["1", "0", "-1"], answer: 1 },
      { q: "ما اللغة المسؤولة عن تنسيق الصفحة؟", options: ["HTML", "Python", "CSS"], answer: 2 }
    ];

    let current = 0;
    let score = 0;

    function showQuestion() {
      const item = questions[current];
      document.getElementById("question").textContent = item.q;
      const choices = document.getElementById("choices");
      choices.innerHTML = "";

      item.options.forEach(function (text, index) {
        const b = document.createElement("button");
        b.textContent = text;
        b.addEventListener("click", function () { checkAnswer(index); });
        choices.appendChild(b);
      });
    }

    function checkAnswer(index) {
      if (index === questions[current].answer) {
        score++;
      }
      current++;
      if (current < questions.length) {
        showQuestion();
      } else {
        document.getElementById("question").textContent = "انتهى الاختبار!";
        document.getElementById("choices").innerHTML = "";
        document.getElementById("result").textContent =
          "نتيجتك: " + score + " من " + questions.length;
      }
    }

    showQuestion();
  </script>
</body>
</html>

جرّب إضافة أسئلة جديدة إلى القائمة questions، وستظهر تلقائيًا دون تعديل أي شيء آخر. هذه هي قوة البرمجة!

ماذا بعد هذه السلسلة؟

أنهيت الأساسيات، وهذه خطة مقترحة لتواصل التعلم:

إذا كان هدفك...	فتعلّم بعد ذلك
بناء مواقع ويب	JavaScript بعمق، ثم تصميم الصفحات المتجاوبة، ثم إطار عمل مثل React
الذكاء الاصطناعي والبيانات	مكتبات Python مثل pandas، ثم أساسيات تعلم الآلة
تطبيقات الهاتف	Swift لآيفون، أو Kotlin لأندرويد، أو Flutter للنظامين
الألعاب	محرّك ألعاب مثل Godot أو Unity
أتمتة المهام اليومية	Python للتعامل مع الملفات والجداول وتنظيم البيانات

البرمجة في عصر الذكاء الاصطناعي

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

نصائح أخيرة للرحلة

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

الخلاصة

في عشرة دروس انتقلت من سؤال «ما هي البرمجة؟» إلى كتابة برامج Python وبناء صفحة ويب تفاعلية. هذه بداية الطريق وليست نهايته. استمر في التجربة والتعلم، وارجع إلى دروس السلسلة كلما احتجت إلى مراجعة.

شاركنا في التعليقات: ما المشروع الأول الذي ستبنيه بعد إنهاء هذه السلسلة؟

→ الدرس السابق: أساسيات HTML وCSS: ابنِ أول صفحة ويب بنفسك

📚 فهرس السلسلة كاملة:

ما هي البرمجة؟ ولماذا تتعلمها الآن؟
كيف تختار أول لغة برمجة؟ مقارنة بين Python وJavaScript وغيرهما
تجهيز بيئة البرمجة: من المتصفح إلى Python وVS Code
المتغيرات وأنواع البيانات في Python: أول برامجك الحقيقية
الجمل الشرطية في Python: اجعل برنامجك يتخذ القرارات
الحلقات التكرارية في Python: for وwhile بأمثلة عملية
الدوال في Python: نظّم برامجك وأعد استخدام الكود
القوائم والقواميس في Python: تخزين البيانات وتنظيمها
أساسيات HTML وCSS: ابنِ أول صفحة ويب بنفسك
مقدمة في JavaScript ومشروع ختامي: ماذا بعد تعلم الأساسيات؟ (أنت هنا)

القائمة الرئيسية

الصفحات

الاخبار[LastPost]