الجزء الاول – مقدمة عن JavaScript – سلسلة FSWD – JS

ahmedمنذ 4 أسابيع

0 125 دقيقة واحدة

مقدمة عن JavaScript

✅ أولاً: إيه هي JavaScript؟

JavaScript هي لغة برمجة بنستخدمها علشان نضيف تفاعلية للمواقع.

يعني إيه تفاعلية؟
يعني الحاجات اللي بتحصل في الموقع بعد ما المستخدم يتفاعل معاه.
مثلاً:

لما تضغط على زرار فيفتحلك نافذة.
لما تكتب حاجة في مربع بحث وتلاقي اقتراحات بتظهر تحت.
لما الموقع يجيب بيانات من السيرفر من غير ما الصفحة تعيد تحميل نفسها (زي Facebook مثلاً).

💡 JavaScript بتشتغل من ناحيتين:

من جهة المستخدم (Front-end) ← في المتصفح.
ومن جهة السيرفر (Back-end) ← باستخدام بيئة زي Node.js.

لكن حالياً هنركز على الجزء اللي في المتصفح.

✅ ثانياً: ليه بنستخدم JavaScript؟

JavaScript هي العقل اللي بيشغّل الموقع.

لو اعتبرنا الموقع زي عربية:

HTML = هيكل العربية.
CSS = شكل العربية وألوانها.
JavaScript = الموتور والدريكسيون.. اللي بيخلي كل حاجة تتحرك وتتفاعل.

أهم الحاجات اللي نستخدم JavaScript فيها:

التعامل مع أزرار الموقع.
إضافة أو حذف عناصر في الصفحة بشكل ديناميكي.
إنشاء ألعاب بسيطة.
التواصل مع سيرفرات (مثلاً تجيب بيانات الطقس من API).
التحقق من الفورمات (زي لما تتأكد إن الإيميل مكتوب صح قبل ما يتبعت).

✅ ثالثاً: الفرق بين HTML و CSS و JavaScript

العنصر	الوظيفة الأساسية	مثال عملي
HTML	بناء وهيكل الموقع (العظام)	زي العناوين، الفقرات، الصور
CSS	تنسيق وشكل الموقع (اللبس)	ألوان، أحجام، خطوط، مسافات
JavaScript	تفاعل وحركة الموقع (العقل)	فتح قائمة، إظهار رسالة، حفظ بيانات

مثال بسيط:

تخيل إن عندك زرار مكتوب عليه “اضغط هنا”:

HTML هي اللي عملت الزرار ده.
CSS هي اللي خلت لونه أزرق وخليته في النص.
JavaScript هي اللي خلت لما تدوس عليه تظهر رسالة مثلاً “أهلاً بيك”.

✅ مثال كود بسيط يوضح الفكرة

<!DOCTYPE html>
<html>
<head>
  <title>مثال بسيط</title>
  <style>
    button {
      background-color: blue;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>

  <button onclick="sayHello()">اضغط هنا</button>

  <script>
    function sayHello() {
      alert("أهلاً بيك!");
    }
  </script>

</body>
</html>