Javascript Programming Tutorials, Guides & Best Practices

سنقوم الآن بإضافة بعض التفاعلات مثل عرض رسالة بعد إرسال النموذج. سننشئ ملفًا يسمى scripts.js:

document.getElementById('contact-form').addEventListener('submit', function(event) {
    event.preventDefault();
    alert('تم إرسال رسالتك بنجاح!');
});

في هذا الدليل، سنتعرف على الأساسيات وكيفية استخدام jQuery للتفاعل مع عناصر HTML، التعامل مع الأحداث، وإضافة التأثيرات.

jQuery هي مكتبة JavaScript مفتوحة المصدر تم تصميمها لجعل التعامل مع الـ DOM أسهل وأكثر مرونة. تقدم jQuery دوال وأدوات تتيح للمطورين كتابة أكواد بسيطة وسهلة الفهم للتفاعل مع صفحات الويب. على سبيل المثال، يمكنك كتابة كود بسيط في jQuery لتحديد عنصر HTML وإجراء عمليات عليه مثل إضافة تأثيرات، التعامل مع الأحداث، أو إرسال طلبات AJAX.

submitBtn.addEventListener('click', function() {
    const username = usernameInput.value.trim();

    if (username === "") {
        greetingParagraph.textContent = "يرجى إدخال اسمك.";
    } else if (username.length > 20) {
        greetingParagraph.textContent = "الاسم طويل جدًا، يرجى إدخال اسم أقصر.";
    } else {
        greetingParagraph.textContent = `مرحبًا، ${username}! شكرًا لاستخدام تطبيقي.`;
        usernameInput.value = "";  // مسح الحقل بعد الإرسال
    }
});

بإمكانك إضافة المزيد من التفاعلية إلى التطبيق، مثل:

const person = {
    name: "أحمد",
    age: 30,
    isMarried: false,
    children: ["سارة", "علي"]
};

const jsonString = JSON.stringify(person);
console.log(jsonString);

النتيجة:

المفاهيم الرئيسية في OOP هي:

الفئات هي القوالب التي نستخدمها لإنشاء الكائنات. في السابق، كانت JavaScript تعتمد على النماذج (prototypes) لإنشاء الكائنات، لكن منذ ES6، أصبحت الفئات (classes) جزءًا من اللغة.