تعلم جافا سكربت

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

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

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

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

ابدأ الآن من متصفحك

1. افتح أدوات المطور

   في كروم أو إيدج أو فايرفوكس على الكمبيوتر، اضغط F12 أو انقر بالزر الأيمن واختر Inspect، ثم افتح تبويب Console.

2. اكتب أول سطر

   اكتب console.log("مرحبا") واضغط Enter. ستظهر الكلمة تحت السطر مباشرة. هذا أول برنامج لك.

3. جرّب عمليات حسابية

   اكتب 7 * 6 أو 100 / 4. الكونسول يعمل كآلة حاسبة تفهم جافا سكربت.

4. انتقل إلى ملف

   عندما تكتب أكثر من سطرين، أنشئ ملفاً اسمه index.html وملفاً اسمه app.js في نفس المجلد، واربطهما بسطر script كما في المثال لاحقاً، وافتح الصفحة في المتصفح.

الأساسيات في أمثلة

هذه أهم المفاهيم في أول أسبوعين. اكتب كل مثال بيدك في الكونسول أو في app.js ولا تنسخه، فالكتابة هي التي تثبت الصيغة في ذاكرتك:

const name = "Sara";
let gpa = 4.2;

if (gpa >= 4.5) {
  console.log(name + " has an excellent GPA");
} else if (gpa >= 3.75) {
  console.log(name + " has a very good GPA");
} else {
  console.log(name + " can raise her GPA");
}

استخدم const للقيم التي لا تتغير، وlet للقيم التي ستتغير. وتجنب var في الكود الجديد. ولاحظ أن == و=== مختلفتان: الثانية تقارن القيمة والنوع معاً، واستخدمها دائماً.

function average(marks) {
  let total = 0;
  for (const mark of marks) {
    total += mark;
  }
  return total / marks.length;
}

const quizzes = [80, 92, 75, 88];
console.log(average(quizzes));

const passed = quizzes.filter(m => m >= 80);
console.log(passed);

الدالة average تأخذ مصفوفة درجات وترجع المتوسط. وfilter من أهم دوال المصفوفات، ومعها map وreduce. تعلمها مبكراً لأنك ستراها في كل كود حديث.

اجعل الصفحة تتفاعل

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

<!DOCTYPE html>
<html lang="en">
<body>
  <h1>Study sessions: <span id="count">0</span></h1>
  <button id="add">Add a session</button>
  <script src="app.js"></script>
</body>
</html>

const countEl = document.querySelector("#count");
const button = document.querySelector("#add");
let count = 0;

button.addEventListener("click", () => {
  count++;
  countEl.textContent = count;
});

افتح index.html في المتصفح واضغط الزر. querySelector يجد العنصر، وaddEventListener ينتظر النقرة، وtextContent يغير النص. هذه الثلاثة وحدها تبني لك عشرات المشاريع الصغيرة.

خطة ثمانية أسابيع

1. الأسبوع 1 و2: الأساسيات

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

2. الأسبوع 3: المصفوفات والكائنات

   المصفوفات ودوالها map وfilter وreduce، والكائنات (objects) لتمثيل بيانات مثل طالب له اسم ومعدل ومواد.

3. الأسبوع 4: DOM والأحداث

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

4. الأسبوع 5: البيانات والتخزين

   حفظ البيانات في المتصفح بـ localStorage، وتحويلها بـ JSON. طوّر قائمة المهام لتبقى بعد إغلاق الصفحة.

5. الأسبوع 6: جلب البيانات

   استخدم fetch مع async وawait لجلب بيانات من واجهة برمجية عامة وعرضها. المشروع الثاني: صفحة تعرض بيانات من الإنترنت.

6. الأسبوع 7: Git والنشر

   تعلم Git وارفع مشاريعك على GitHub، وانشرها مجاناً بـ GitHub Pages. فعّل حزمة GitHub للطلاب بإيميلك الجامعي.

7. الأسبوع 8: مشروع من اختيارك

   المشروع الثالث يحل مشكلة عندك: حاسبة معدل، أو مؤقت مذاكرة، أو اختبار قصير لمادة. اكتب له ملف README يشرح فكرته.

مصادر مجانية رسمية

• MDN Learn web development: منهج كامل من موزيلا يبدأ بـ HTML وCSS ثم جافا سكربت، مع تمارين وتقييمات.
• MDN JavaScript Guide: المرجع الذي ستعود إليه في كل سؤال عن اللغة.
• Node.js Learn: عندما تنتهي من أساسيات المتصفح وتريد تشغيل جافا سكربت على الكمبيوتر أو بناء خادم.
• محرر أكواد جيد، وأدوات JetBrains مجانية للطلاب ضمن البرامج المجانية للطلاب.

استخدم الذكاء الاصطناعي كمعلم لا ككاتب

إذا طلبت من المساعد الذكي أن يكتب الكود كاملاً فلن تتعلم شيئاً. اطلب منه أن يشرح ويسأل ويراجع. جرّب هذين الطلبين مع ChatGPT أو Claude:

You are my JavaScript tutor. I am a beginner and today I am learning [arrays / functions / the DOM]. Explain the idea in 5 short lines with one tiny example. Then give me 3 exercises, one at a time, from easy to harder. Do not show the solution until I send my code. When I send it, point out mistakes and ask me a question that leads me to the fix instead of rewriting it.

My JavaScript code gives this error: [paste error]. Here is the code: [paste code]. Explain in simple words what the error means and which line causes it. Give me a hint first, not the full fix.

• جيت هب: جيت هب تقدّم حزمة جيت هب للطلاب المطورين لطلاب الجامعات في السعودية مجاناً.
• جيت براينز: جيت براينز تقدّم حزمة جيت براينز للطلاب لطلاب الجامعات في السعودية مجاناً.
• جوجل للذكاء الاصطناعي: جوجل للذكاء الاصطناعي تقدّم Google AI Plus مجانًا لمدة سنة لطلاب الجامعات في السعودية.

أخطاء المبتدئين

• القفز إلى إطار مثل React قبل فهم الأساسيات، فيصبح كل شيء سحراً غير مفهوم.
• مشاهدة الدروس بدون كتابة كود. كل ساعة مشاهدة تحتاج ساعة كتابة على الأقل.
• تجاهل رسائل الخطأ في الكونسول. اقرأها دائماً، ففيها اسم الملف ورقم السطر.
• استخدام == بدل ===، وvar بدل let وconst.
• عدم نشر المشاريع. المشروع المنشور برابط يفيدك في التدريب التعاوني والمقابلات أكثر من مشروع على جهازك.

إذا لم تحدد هدفك في البرمجة بعد، فابدأ من كيف اتعلم البرمجة من الصفر. وبعد أن تبني مشاريعك، اجمعها في صفحة واحدة بمساعدة كيف تسوي بورتفوليو، وإذا كانت المشاريع تحتاج تخزين بيانات فتعلّم SQL.