Javascript Programming Tutorials, Guides & Best Practices

<table border="1" cellpadding="10" cellspacing="0">
  <thead>
    <tr>
      <th>الخاصية</th>
      <th><code>var
      let
      const
    
  
  
    
      نطاق المتغير
      نطاق وظيفي أو عام
      نطاق الكتلة
      نطاق الكتلة
    
    
      إعادة التعيين
      يمكن إعادة تعيينه
      يمكن إعادة تعيينه
      لا يمكن إعادة تعيينه
    
    
      إعادة التعريف
      يمكن إعادة تعريفه
      لا يمكن إعادة تعريفه
      لا يمكن إعادة تعريفه
    
    
      رفع المتغير
      نعم، مع قيمة undefined
      نعم، لكن لا يمكن الوصول إليه قبل التعيين
      نعم، لكن لا يمكن الوصول إليه قبل التعيين
    
    
      ثبات القيمة
      لا
      لا
      نعم
    
  

• استخدم const عندما تكون متأكدًا أن القيمة لن تتغير بعد التعيين.
• استخدم let عندما تتوقع أن تتغير قيمة المتغير، خاصة داخل نطاق كتلة (مثل الحلقات أو الشروط).
• تجنب استخدام var إذا كان ذلك ممكنًا؛ فهو قد يسبب أخطاء بسبب نطاقه العام وسلوكه مع الرفع.

// الحصول على العناصر من DOM
const usernameInput = document.getElementById('username');
const submitBtn = document.getElementById('submitBtn');
const greetingParagraph = document.getElementById('greeting');

// إضافة حدث "click" للزر
submitBtn.addEventListener('click', function() {
    const username = usernameInput.value;

    // التحقق من أن المستخدم أدخل اسمه
    if (username.trim() !== "") {
        greetingParagraph.textContent = `مرحبًا، ${username}! شكرًا لاستخدام تطبيقي.`;
    } else {
        greetingParagraph.textContent = "يرجى إدخال اسمك.";
    }
});

• نبدأ بالحصول على مراجع للعناصر HTML مثل حقل الإدخال والزر والفقرة التي ستظهر رسالة الترحيب.
• نستخدم addEventListener لإضافة حدث "click" على الزر، حيث عندما يضغط المستخدم على الزر، سيتم عرض رسالة ترحيبية بناءً على الاسم الذي أدخله.
• إذا لم يتم إدخال اسم، سيعرض التطبيق رسالة تطلب من المستخدم إدخال اسمه.