تطوير الويب Development Tutorials, Guides & Insights

• مستقل: الأكبر في العالم العربي، التعامل فيها باللغة العربية.
• خمسات: مناسبة لبناء التقييمات من خلال خدمات مصغّرة.
• بحر: منصة سعودية مخصصة للمهنيين المحليين.

• تطوير الويب: مواقع إلكترونية، تطبيقات ويب، مشاريع Full-stack.
• تطبيقات الهاتف: تطبيقات Android وiOS وHybrid.
• تحليل البيانات والذكاء الاصطناعي: لوحات بيانات، تعلم آلة، نماذج ذكية.
• أتمتة المهام: سكربتات برمجية لأداء وظائف متكررة.
• مشاريع متخصصة: مثل تطوير الألعاب، IoT، تقنيات البلوكشين.

• يمكنك إضافة المزيد من التفاعلات باستخدام JavaScript مثل تغيير الألوان عند تمرير الفأرة على الروابط.
• جرب إضافة مكتبات مثل Bootstrap أو Tailwind CSS لتحسين التصميم.
• استخدم localStorage لتخزين بيانات النموذج محليًا إذا كنت ترغب في إضافة المزيد من التعقيد إلى المشروع.

في هذا الدليل، تعلمنا كيفية بناء موقع ويب بسيط باستخدام HTML، CSS وJavaScript. يمكنك استخدام هذه المهارات لبناء مشاريع أكثر تعقيدًا وتخصيص التصميم والتفاعلات بشكل يناسب احتياجاتك.

$.ajax({
    url: 'https://jsonplaceholder.typicode.com/users/1',
    method: 'GET',
    success: function(data) {
        console.log('الاسم:', data.name);
    },
    error: function() {
        console.error('حدث خطأ');
    }
});

مكتبة jQuery هي أداة قوية لتبسيط التعامل مع JavaScript، خاصة عندما يتعلق الأمر بالتفاعل مع DOM وإضافة التأثيرات. على الرغم من أن JavaScript الحديثة توفر بعض الوظائف التي كانت jQuery تتميز بها، إلا أنها لا تزال مفيدة في تسريع تطوير التطبيقات البسيطة أو المشاريع القديمة.

• مسح حقل الإدخال بعد إرسال الاسم.
• إضافة إشعار في حال كان الاسم طويلًا جدًا.

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 = "";  // مسح الحقل بعد الإرسال
    }
});

غالبًا ما يتم استخدام JSON في التفاعل مع واجهات برمجية (APIs) لجلب البيانات من الخادم. يمكنك استخدام fetch() في JavaScript لطلب بيانات JSON من API.

fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => response.json())
    .then(data => {
        console.log(data);
        console.log("الاسم:", data.name);
    })
    .catch(error => {
        console.error("حدث خطأ:", error);
    });