مقدمة

مرحبًا بكم في الدرس الخامس والأخير من دورة تعلم HTML وCSS! في هذا الدرس، سنتعرف على كيفية إضافة التفاعلية إلى صفحات الويب باستخدام JavaScript. JavaScript هي لغة برمجة تُستخدم لإضفاء الحيوية على صفحات الويب وجعلها أكثر ديناميكية وتفاعلية.

1. ما هو JavaScript؟

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

2. تضمين JavaScript في صفحات HTML

هناك ثلاث طرق لتضمين JavaScript في صفحات HTML:

  • التضمين الداخلي (Internal JavaScript)
  • التضمين الخارجي (External JavaScript)
  • التضمين المضمّن (Inline JavaScript)
2.1 التضمين الداخلي (Internal JavaScript)

يتم تضمين JavaScript داخل وسوم <script> داخل وسم <head> أو <body> في صفحة HTML.

<!DOCTYPE html>
<html>
<head>
    <title>مثال على JavaScript الداخلي</title>
    <script>
        function showMessage() {
            alert("مرحبًا بكم في صفحتي!");
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">اضغط هنا</button>
</body>
</html>
2.2 التضمين الخارجي (External JavaScript)

تُستخدم ملفات JavaScript الخارجية لتخزين جميع الأكواد في ملف منفصل بامتداد .js. يمكنك ربط ملف JavaScript بصفحة HTML باستخدام وسم <script> داخل <head> أو <body>.

<!DOCTYPE html>
<html>
<head>
    <title>مثال على JavaScript الخارجي</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="showMessage()">اضغط هنا</button>
</body>
</html>
محتويات ملف script.js:
function showMessage() {
    alert("مرحبًا بكم في صفحتي!");
}
2.3 التضمين المضمّن (Inline JavaScript)

يتم تضمين JavaScript المضمّن داخل وسم HTML نفسه باستخدام خاصية onclick أو غيرها من الخصائص.

<!DOCTYPE html>
<html>
<head>
    <title>مثال على JavaScript المضمّن</title>
</head>
<body>
    <button onclick="alert('مرحبًا بكم في صفحتي!')">اضغط هنا</button>
</body>
</html>

3. التفاعل مع عناصر HTML

3.1 الوصول إلى عناصر HTML

يمكنك استخدام JavaScript للوصول إلى عناصر HTML وتغييرها باستخدام طرق مثل getElementById.

<!DOCTYPE html>
<html>
<head>
    <title>الوصول إلى عناصر HTML</title>
    <script>
        function changeContent() {
            document.getElementById("myParagraph").innerHTML = "تم تغيير النص!";
        }
    </script>
</head>
<body>
    <p id="myParagraph">هذا نص.</p>
    <button onclick="changeContent()">تغيير النص</button>
</body>
</html>
3.2 تغيير الأنماط باستخدام JavaScript

يمكنك استخدام JavaScript لتغيير الأنماط الخاصة بعناصر HTML.

<!DOCTYPE html>
<html>
<head>
    <title>تغيير الأنماط</title>
    <script>
        function changeStyle() {
            document.getElementById("myParagraph").style.color = "red";
        }
    </script>
</head>
<body>
    <p id="myParagraph">هذا نص.</p>
    <button onclick="changeStyle()">تغيير اللون</button>
</body>
</html>

4. التحقق من صحة النماذج

4.1 التحقق من صحة النماذج باستخدام JavaScript

يمكنك استخدام JavaScript للتحقق من صحة بيانات النماذج قبل إرسالها.

<!DOCTYPE html>
<html>
<head>
    <title>التحقق من صحة النماذج</title>
    <script>
        function validateForm() {
            var x = document.forms["myForm"]["name"].value;
            if (x == "") {
                alert("يجب ملء حقل الاسم");
                return false;
            }
        }
    </script>
</head>
<body>
    <form name="myForm" onsubmit="return validateForm()">
        الاسم: <input type="text" name="name">
        <input type="submit" value="إرسال">
    </form>
</body>
</html>

5. تطبيقات عملية

مثال 1: إنشاء صفحة تفاعلية

لنقم بإنشاء صفحة تحتوي على عدة عناصر تفاعلية مثل زر لتغيير النص وزر لتغيير اللون ونموذج للتحقق من صحة البيانات. جرب كتابة الكود التالي في محرر النصوص الخاص بك:

<!DOCTYPE html>
<html>
<head>
    <title>صفحة تفاعلية</title>
    <script>
        function changeContent() {
            document.getElementById("myParagraph").innerHTML = "تم تغيير النص!";
        }

        function changeStyle() {
            document.getElementById("myParagraph").style.color = "red";
        }

        function validateForm() {
            var x = document.forms["myForm"]["name"].value;
            if (x == "") {
                alert("يجب ملء حقل الاسم");
                return false;
            }
        }
    </script>
</head>
<body>
    <h1>صفحة تفاعلية</h1>
    <p id="myParagraph">هذا نص.</p>
    <button onclick="changeContent()">تغيير النص</button>
    <button onclick="changeStyle()">تغيير اللون</button>

    <h2>نموذج التحقق من الصحة</h2>
    <form name="myForm" onsubmit="return validateForm()">
        الاسم: <input type="text" name="name">
        <input type="submit" value="إرسال">
    </form>
</body>
</html>

6. تمرين عملي

حان الوقت لتطبيق ما تعلمته. حاول إنشاء صفحة HTML تحتوي على:

  1. عنوان رئيسي يحمل اسم الموقع.
  2. فقرة تعريفية بالموقع.
  3. زر لتغيير محتوى الفقرة.
  4. زر لتغيير لون الفقرة.
  5. نموذج يحتوي على حقول الاسم والبريد الإلكتروني وزر لإرسال النموذج.
  6. التحقق من صحة البيانات في النموذج باستخدام JavaScript.
الحل المقترح:
<!DOCTYPE html>
<html>
<head>
    <title>موقعي التفاعلي</title>
    <script>
        function changeContent() {
            document.getElementById("myParagraph").innerHTML = "تم تغيير النص!";
        }

        function changeStyle() {
            document.getElementById("myParagraph").style.color = "red";
        }

        function validateForm() {
            var name = document.forms["contactForm"]["name"].value;
            var email = document.forms["contactForm"]["email"].value;
            if (name == "") {
                alert("يجب ملء حقل الاسم");
                return false;
            }
            if (email == "") {
                alert("يجب ملء حقل البريد الإلكتروني");
                return false;
            }
        }
    </script>
</head>
<body>
    <h1>مرحبًا بكم في موقعي التفاعلي</h1>
    <p id="myParagraph">هذا نص تعريفي.</p>
    <button onclick="changeContent()">تغيير النص</button>
    <button onclick="changeStyle()">تغيير اللون</button>

    <h2>نموذج الاتصال</h2>
    <form name="contactForm" onsubmit="return validateForm()">
        الاسم: <input type="text" name="name">
        <br>
        البريد الإلكتروني: <input type="email" name="email">
        <br>
        <input type="submit" value="إرسال">
    </form>
</body>
</html>

7. مراجعة شاملة

قبل أن ننهي هذا الدرس، دعنا نراجع ما تعلمناه:

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

8. خاتمة

تهانينا! لقد أكملت دورة تعلم HTML وCSS وتعرفت على كيفية استخدام JavaScript لإضافة التفاعلية إلى صفحات الويب الخاصة بك. استمر في الممارسة وتجربة الأكواد وتطوير مشاريعك الخاصة. تذكر أن التعلم المستمر هو المفتاح لتحسين مهاراتك كمطور ويب. نتمنى لك التوفيق في رحلتك البرمجية!

كُتب بواسطة

Akhmad Abdulrahman

مدون ومصمم مواقع الانترنت لتقديم افضل الخدمات مجانا ولإثراء المحتوى العربي