الدرس الخامس: مقدمة في JavaScript – اجعل موقعك تفاعليًا

الدرس الخامس: مقدمة إلى JavaScript – اجعل موقعك تفاعليًا 💻

العنوان:

ابدأ مع JavaScript، لغة التفاعل التي ستعطي الحياة لموقعك!

المقدمة:

JavaScript هي لغة البرمجة المستخدمة لتحويل صفحات الويب إلى تجربة تفاعلية للمستخدم. لو HTML هو العظم وCSS هي الجلد، فـ JavaScript هي العقل اللي بيخلي الموقع يتفاعل مع اللي بيحصل عليه. النهارده هنعرف أهمية JavaScript، وهنكتب أول كود بسيط جدًا.

ما هي JavaScript؟

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

أماكن كتابة JavaScript:

1. داخل صفحة HTML:

تقدر تكتب JavaScript مباشرة داخل عنصر <script>:


<script>
  alert("Hello, World!");
</script>

2. في ملف خارجي:

بإنشاء ملف جديد بصيغة .js زي script.js.
وبتضيفه لصفحة HTML بالشكل ده:
```
<script src="script.js"></script>
```

كتابة أول كود باستخدام JavaScript:

خطوات عملية:

افتح صفحة HTML جديدة.

اكتب الهيكل الأساسي:


<!DOCTYPE html>
<html>
<head>    <title>JavaScript Basics</title>
</head><body>    <button onclick="showMessage()">Click Me</button>
    <script>
        function showMessage() {
            alert("Welcome to JavaScript!");
        }
    </script></body></html>

احفظ الملف وشغله في المتصفح.

النتيجة:

هيظهر زر مكتوب عليه "Click Me". لما تضغط عليه، هتظهر رسالة ترحيب.

فهم الكود:

<button>: زر في HTML.
- الخاصية onclick: بتحدد إن الكود داخل JavaScript هيشتغل عند الضغط.
function showMessage() {}:
- دي دالة (Function)، مجموعة من التعليمات البرمجية.
- الكود اللي جواه بيشتغل لما يتم استدعاء اسم الدالة.
alert():
- دالة مدمجة في JavaScript بتعرض رسالة للمستخدم.

أهم المفاهيم اللي عرفناها:

دوال JavaScript (Functions): بتسمح لك بتنفيذ كود معين عند الحاجة.
الأحداث (Events): زي الضغط على زر.
التكامل مع HTML: JavaScript بتشتغل جنب HTML بكل سهولة.

تمارين تطبيقية:

عدل الرسالة داخل alert() لتكون مخصصة، مثلاً "Hello, Mostafa!".
أضف زر جديد يقوم بعرض رسالة مختلفة.
جرب كتابة جملة ترحيب في مكان آخر باستخدام console.log بدل alert.

وختامًا:

أضفنا لموقعنا لمسة تفاعلية باستخدام JavaScript. في الدرس الجاي، هنستكشف المزيد عن المتغيرات (Variables) وإزاي نخزن بيانات داخل كودنا. استعد للخطوة التالية! 🚀

تعديل المقال

WiseSyntax