تعلم JavaScript من الصفر

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

جميع الأمثلة خارج قسم DOM تم تشغيلها بـ Node.js، والمخرجات المعروضة حقيقية. أما قسم DOM فيجب اختباره في المتصفح.

ما الذي تحتاجه

• أي متصفح ويب (اضغط F12 وافتح تبويب Console لتجربة الأوامر)
• أو Node.js الإصدار 18 أو أحدث لتشغيل ملفات `.js` على حاسوبك

طريقة العمل

المتغيرات

استخدم `const` للقيم التي لا تتغير، و`let` للقيم التي تتغير.

const schoolName = "โรงเรียนตัวอย่าง";
let count = 0;
count = count + 1;
console.log(schoolName, count);

الدوال

function grade(score) {
  if (score >= 80) return "A";
  if (score >= 70) return "B";
  if (score >= 50) return "C";
  return "F";
}

تستقبل الدالة مدخلات وتنفّذ عملاً وتُعيد قيمة باستخدام `return`. تُفحص شروط `if` بالترتيب، ويُنفَّذ أول شرط يكون صحيحًا.

المصفوفات مع map وreduce وforEach

const students = [
  { name: "สมชาย", score: 85 },
  { name: "สมหญิง", score: 72 },
  { name: "สมศักดิ์", score: 45 },
];

function grade(score) {
  if (score >= 80) return "A";
  if (score >= 70) return "B";
  if (score >= 50) return "C";
  return "F";
}

const grades = students.map(s => `${s.name}: ${grade(s.score)}`);
const average = students.reduce((sum, s) => sum + s.score, 0) / students.length;

console.log("สวัสดี JavaScript");
grades.forEach(line => console.log(line));
console.log("คะแนนเฉลี่ย:", average.toFixed(2));

المخرجات الفعلية:

สวัสดี JavaScript
สมชาย: A
สมหญิง: B
สมศักดิ์: F
คะแนนเฉลี่ย: 67.33

• تُنشئ `map` مصفوفة جديدة بتحويل كل عنصر.
• تجمع `reduce` جميع العناصر في قيمة واحدة.
• تنفّذ `forEach` عملاً على كل عنصر دون إنشاء مصفوفة جديدة.
• تُقرّب `toFixed(2)` الرقم إلى منزلتين عشريتين للعرض.

التعامل مع الصفحة (DOM)

في المتصفح، تقرأ JavaScript الصفحة وتعدّلها عبر DOM. يغيّر المثال التالي النص عند النقر على الزر:

<p id="message">ยังไม่ได้กด</p>
<button id="btn">กดฉัน</button>
<script>
  const message = document.getElementById("message");
  document.getElementById("btn").addEventListener("click", () => {
    message.textContent = "กดแล้ว!";
  });
</script>

احفظه كملف `.html` وافتحه في المتصفح. عند النقر على الزر يتغير النص.

أخطاء شائعة

• **استخدام `=` بدلًا من `===`:** تقارن `===` القيمة والنوع معًا، لذلك يُفضَّل استخدامها.
• **نسيان أن `const` لا يمكن إعادة إسنادها:** استخدم `let` إذا كان يجب تغيير القيمة.
• **استخدام عناصر DOM قبل تحميل الصفحة:** ضع السكربت في نهاية `<body>` أو استخدم `defer`.

الخطوات التالية

أضف إلى مثال DOM حقلًا لإدخال الدرجة يعرض التقدير فورًا أثناء الكتابة، ثم تعلّم `fetch` لجلب البيانات من الخادم.

الخلاصة

تعتمد JavaScript على المتغيرات والدوال والمصفوفات، وتتعامل مع الصفحات عبر DOM والأحداث. التدرب بأمثلة قصيرة تعمل فعليًا هو أسرع طريقة للتعلم.