159- دروس جافا سكربت – تدريب على امثله – JS Examples For Website

### أمثلة على استخدام JavaScript في تطوير المواقع الإلكترونية

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

#### 1. التحقق من صحة النماذج (Form Validation)

تُستخدم JavaScript بشكل [شركة برمجة مصرية] شائع للتحقق من صحة البيانات المدخلة في النماذج قبل إرسالها إلى الخادم. يمكن أن تساعد هذه العملية في تقليل الأخطاء وتحسين تجربة المستخدم بشكل كبير.

**مثال:**

function validateForm() {
    var email = document.forms["myForm"]["email"].value;
    if (email == "") {
        alert("يجب إدخال البريد الإلكتروني");
        return false;
    }
    return true;
}

#### 2. إنشاء قوائم منسدلة ديناميكية (Dynamic Dropdown Menus)

يمكن استخدام JavaScript لإنشاء قوائم منسدلة تتغير بناءً على خيارات معينة.

**مثال:**

var countries = {
    "USA": ["New York", "Los Angeles", "Chicago"],
    "India": ["Delhi", "Mumbai", "Bangalore"]
};

function updateCities() {
    var countrySelect = document.getElementById("country");
    var citySelect = document.getElementById("city");
    var selectedCountry = countrySelect.options[countrySelect.selectedIndex].value;

    while (citySelect.options.length > 0) {
        citySelect.remove(0);
    }

    var cities = countries[selectedCountry];
    for (var i = 0; i < cities.length; i++) {
        var option = document.createElement("option");
        option.text = cities[i];
        citySelect.add(option);
    }
}

#### 3. عرض وإخفاء عناصر الصفحة (Show/Hide Elements)

تُمكّنك JavaScript من عرض أو إخفاء مكونات معينة على الصفحة استنادًا إلى تفاعل المستخدم.

**مثال:**

function toggleVisibility(id) {
    var element = document.getElementById(id);
    if (element.style.display === "none") {
        element.style.display = "block";
    } else {
        element.style.display = "none";
    }
}

#### 4. إنشاء عداد تنازلي (Countdown Timer)

يعتبر العداد التنازلي من الميزات المهمة في العديد من المواقع، مثل مواقع العروض والتخفيضات.

**مثال:**

function startCountdown(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startCountdown(fiveMinutes, display);
};

#### 5. إنشاء معرض صور (Image Gallery)

يمكن استخدام JavaScript لإنشاء معارض صور تفاعلية تسمح للمستخدمين بالتنقل بين الصور بسهولة.

**مثال:**

var currentIndex = 0;
var images = document.querySelectorAll(".gallery img");

function showImage(index) {
    images.forEach((img, i) => {
        img.style.display = i === index ? "block" : "none";
    });
}

function nextImage() {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
}

function prevImage() {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    showImage(currentIndex);
}

document.querySelector(".next").addEventListener("click", nextImage);
document.querySelector(".prev").addEventListener("click", prevImage);

showImage(currentIndex);

### الخاتمة

تقدم JavaScript مجموعة واسعة من الإمكانيات التي يمكن أن تُحسن من تجربة المستخدم على مواقع الويب. من التحقق من صحة النماذج إلى إنشاء معارض الصور التفاعلية، تظل JavaScript أداة قوية ومهمة لكل مطور ويب. باستخدام هذه الأمثلة، يمكنك البدء في تحسين مواقع الويب الخاصة بك وجعلها أكثر ديناميكية وتفاعلية.