🌟 مقدمة تحفيزية :

“مرحباً بك يا محترف ! إذا كانت الـ HTML هي الهيكل العظمي لموقعك ، والـ CSS هي الملابس الأنيقة ، فإن JavaScript هي ‘العقل والروح’ . اليوم في أكاديمية قياوي ، لن نكتفي بجعل موقعك جميلاً ، بل سنجعله ذكياً ! ستتعلم كيف تجعل الموقع يفكّر ، يتخذ قرارات ، ويرد على الزائر . هل أنت مستعد لتنتقل من ‘مصمم واجهات’ إلى ‘مهندس برمجيات’ ؟ لقد فتحت الآن باب الاحتراف الحقيقي !”

🏗️ 1 . المفهوم : ما هي JavaScript (JS) ؟

هي اللغة التي تحول الموقع من “ورقة مطبوعة” إلى “تطبيق تفاعلي” .

مثال  : عندما تضغط على زر “إعجاب” وتتغير الأيقونة فوراً ، أو عندما تظهر لك رسالة ترحيب باسمك.. هذا هو عمل  JS .

💻 2. التطبيق العملي الأول (التفاعل المباشر)

لنبدأ بأبسط كود يجعل الموقع “يتحدث” .

ضع هذا الكود في ملفك الـ HTML تحت وسم الـ Footer :

<script>
    function welcomeMessage() {
        alert("أهلاً بك في أكاديمية قياوي.. لقد دخلت عالم الاحتراف!");
    }
</script>

<button onclick="welcomeMessage()" class="btn btn-primary">اضغط هنا لترى السحر</button>

💡 لماذا هذا الدرس هو بداية “الاحتراف”؟

لأنه لأول مرة ، سيتوقف الطالب عن “وصف” شكل العنصر، ويبدأ في “برمجة” سلوكه . الزر الآن ليس مجرد لون وشكل ، بل هو أداة تنفيذية .

🎯 تحدي المحترفين : “يا مبرمج ، قم بتغيير الرسالة التي تظهر في الـ alert لتكون رسالة ترحيبية خاصة بقسم الاستشارات القانونية في موقعك . هل يمكنك تغيير لون الزر باستخدام كلاسات Bootstrap التي تعلمناها ؟”

للتوضيح : 

إذا كان : HTML = الهيكل  و  CSS = الشكل  ،  فإن :  JavaScript = الحركة والعقل .  

🟢 أول مثال JavaScript  ،

سنصنع زر يغير النص .

HTML

<button onclick="changeText()">اضغط هنا</button>

<p id="message">مرحبا بك</p>

JavaScript

<script>

function changeText(){

document.getElementById("message").innerHTML = "مرحبا بك في Qiyaoui Academy";

}

</script>

🟢 شرح الكود

🟢 النتيجة عند الضغط على الزر : يتغير النص من : مرحبا بك إلى مرحبا بك في Qiyaoui Academy وهذا أول تفاعل في الموقع .

🧠 فكرة مهمة للطلاب  :

JavaScript تعمل على : DOM  ،  وهو اختصار :Document Object Model أي أن JavaScript تستطيع التحكم في عناصر الصفحة . 🏆 تمرين للطلاب اصنع :  ✔ زر  ،    ✔ فقرة  ،  ✔ عند الضغط يتغير النص .