الوحدة 1: مقدمة في JavaScript

ahmed nabelByahmed nabel كورس JavaScript

إليك كورس كامل عن الوحدة 1: مقدمة في JavaScript، والذي يغطي المفاهيم الأساسية ويشمل تمارين تطبيقية للتمكن من هذه المواضيع.

الوحدة 1: مقدمة في JavaScript

الدرس 1: ما هي JavaScript؟ ولماذا هي مهمة؟

  • تعريف JavaScript:
    • JavaScript هي لغة برمجة تُستخدم لإنشاء تفاعل ديناميكي داخل صفحات الويب.
    • تعتبر جزءًا أساسيًا من تكنولوجيا الويب جنبًا إلى جنب مع HTML وCSS.
    • يمكن استخدام JavaScript لتحديث المحتوى بشكل ديناميكي، التحكم في الأنماط، التفاعل مع المستخدم، والتحقق من المدخلات.
  • أهمية JavaScript في تطوير الويب:
    • التفاعل مع المستخدم: مثل التحقق من صحة النماذج، التنقل بين الصفحات بدون إعادة تحميل الصفحة (باستخدام AJAX).
    • تطوير التطبيقات التفاعلية: مثل تطبيقات الويب التي تعتمد على مكونات قابلة لإعادة الاستخدام (مثال: React.js).
    • استخدام JavaScript في الخوادم: باستخدام Node.js لتطوير تطبيقات خادم.

الدرس 2: كيفية إعداد بيئة العمل

  • استخدام المتصفح:
    • معظم المتصفحات تأتي مع أدوات مطور (Developer Tools) التي تتيح لك كتابة وتشغيل كود JavaScript مباشرة في المتصفح.
    • افتح أدوات المطور في متصفح Chrome باستخدام Ctrl + Shift + I أو Cmd + Option + I على Mac.
    • استخدم التبويب Console لكتابة وتشغيل أكواد JavaScript مباشرة.
  • كيفية إضافة JavaScript داخل HTML:
    • يمكن تضمين كود JavaScript داخل ملف HTML باستخدام الوسم <script>.
    • مثال:
      html
      <html>
      <head>
      <title>مقدمة في JavaScript</title>
      </head>
      <body>
      <h1>مرحبًا في JavaScript!</h1>
      <script>
      console.log("أهلاً بالعالم");
      </script>
      </body>
      </html>

الدرس 3: أول برنامج JavaScript

  • كتابة أول كود JavaScript:
    • الهدف من هذا الدرس هو إنشاء أول برنامج بسيط باستخدام console.log لطباعة نص في وحدة التحكم (Console).
    • مثال:
      html
      <html>
      <head>
      <title>أول برنامج JavaScript</title>
      </head>
      <body>
      <h1>البرنامج الأول</h1>
      <script>
      // طباعة رسالة في وحدة التحكم
      console.log("مرحبًا في JavaScript!");
      </script>
      </body>
      </html>
    • عند فتح هذه الصفحة في المتصفح، ستظهر الرسالة في وحدة التحكم.

الدرس 4: المتغيرات وأنواع البيانات

  • تعريف المتغيرات:
    • في JavaScript، يمكنك تخزين البيانات في المتغيرات باستخدام الكلمات المفتاحية let, const, و var:
      • let: لإنشاء متغير قابل للتغيير.
      • const: لإنشاء متغير ثابت (لا يمكن تغييره بعد تعريفه).
      • var: قديم ويُستخدم لتخزين المتغيرات (يفضل تجنب استخدامه في الوقت الحالي).
    • مثال:
      javascript
      let name = "أحمد"; // متغير يمكن تغييره
      const age = 25; // متغير ثابت
  • أنواع البيانات في JavaScript:
    • النصوص (Strings): تُستخدم لتخزين النصوص.
      javascript
      let greeting = "مرحبًا بالعالم!";
    • الأرقام (Numbers): تُستخدم لتخزين الأرقام.
      javascript
      let age = 30;
      let price = 99.99;
    • القيم المنطقية (Booleans): تُستخدم لتخزين القيم true أو false.
      javascript
      let isStudent = true;
    • المصفوفات (Arrays): تُستخدم لتخزين مجموعة من العناصر.
      javascript
      let fruits = ["تفاح", "موز", "برتقال"];
    • الكائنات (Objects): تُستخدم لتخزين مجموعة من القيم المختلفة في شكل خصائص.
      javascript
      let person = {
      name: "أحمد",
      age: 30,
      city: "القاهرة"
      };

الدرس 5: العمليات الحسابية والمنطقية

  • العمليات الحسابية:
    • جمع (+), طرح (-), ضرب (*), قسمة (/), باقي القسمة (%).
    • مثال:
      javascript
      let x = 10;
      let y = 5;
      console.log(x + y); // 15
      console.log(x - y); // 5
      console.log(x * y); // 50
      console.log(x / y); // 2
      console.log(x % y); // 0
  • العمليات المنطقية:
    • == للمقارنة بين القيم.
    • === للمقارنة بين القيم والنوع.
    • != للمقارنة بين القيم المختلفة.
    • مثال:
      javascript
      let x = 10;
      let y = 5;
      console.log(x == y); // false
      console.log(x === 10); // true
      console.log(x != y); // true

التمرين التطبيقي:

  • تمرين 1: كتابة برنامج يعرض رسالة ترحيب على صفحة ويب باستخدام console.log ويستخدم المتغيرات.
  • تمرين 2: كتابة برنامج يطلب من المستخدم إدخال اسمه ويعرضه في وحدة التحكم باستخدام prompt و alert.

الدرس 6: تلخيص الوحدة

  • JavaScript هي لغة أساسية في تطوير الويب.
  • تعلم كيفية إضافة كود JavaScript إلى صفحات HTML.
  • تعرف على المتغيرات، أنواع البيانات، العمليات الحسابية والمنطقية.

التمرين النهائي للوحدة 1:

  • إنشاء صفحة HTML تحتوي على نموذج (form) لجمع الاسم والعمر، ثم قم بعرض رسالة ترحيبية باستخدام JavaScript بناءً على المدخلات.

 

    ahmed nabel

    Similar Posts

    الوحدة 14: أفضل الممارسات وأسلوب كتابة الكود (Best Practices and Code Style) في JavaScript

    الوحدة 14: أفضل الممارسات وأسلوب كتابة الكود (Best Practices and Code Style) في JavaScript

    ahmed nabelByahmed nabel كورس JavaScript

    إليك كورس كامل عن الوحدة 14: أفضل الممارسات وأسلوب كتابة الكود (Best Practices and Code…

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *