دبلوم احتراف البرمجة التفاعلية: لغة JavaScript من الصفر.

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

“مرحباً بك يا محترف ! تخيل أنك في مكتبة ضخمة وتريد وضع كتاب في مكان معين لتعود إليه لاحقاً ، ماذا تفعل ؟

تضع الكتاب في ‘رف’ وتكتب عليه اسماً . هذا بالضبط ما نفعله في البرمجة ! المتغيرات هي تلك الرفوف التي نستخدمها لتخزين المعلومات (مثل اسم الطالب ، أو عدد الدروس التي أكملها) لنستدعيها في أي وقت .

اليوم في أكاديمية قياوي ، ستتعلم كيف تمنح موقعك ذاكرة قوية ! “

🏗️ 1. ما هو المتغير ؟

المتغير هو عبارة عن “حاوية” أو “صندوق” نعطيه اسماً ونضع بداخله قيمة .

في JavaScript ، نستخدم الكلمة السحرية let لإنشاء هذا الصندوق :

• let studentName = “محمد”; (هنا قمنا بتخزين نص) .

• let coursesCount = 12; (هنا قمنا بتخزين رقم) .

💻 2 . أنواع المخازن (الفرق بين let و const)

في عالم الاحتراف ، لدينا نوعان من الصناديق :

1 . let : صندوق يمكننا تغيير ما بداخله لاحقاً (مثل : عدد النقاط في لعبة) .

2 . const : صندوق “ثابت” لا يمكن تغيير ما بداخله أبداً بعد وضعه (مثل : اسم الأكاديمية أو تاريخ ميلاد الشخص) .

مثال تطبيقي :

JavaScript

let userStatus = "مبتدئ"; 
userStatus = "محترف"; // مسموح لأننا استخدمنا let

const academyName = "أكاديمية قياوي";
// academyName = "موقع آخر"; // خطأ! المتصفح سيرفض لأن الاسم ثابت

🎨 3. كيف نربطها بموقعنا ؟

لنطبق ما تعلمناه في صفحة HTML الخاصة بنا . سنقوم بتخزين اسم الزائر وإظهاره في رسالة :

html

<script>
    let userName = "أستاذ فؤاد";
    let message = "مرحباً بك في عالم الاحتراف، يا ";

    alert(message + userName);
</script>

💡 لماذا هذا الدرس مهم للموقع ؟

في موقعك qiyaouiacademy.com ، ستحتاج للمتغيرات في كل مكان :

• تخزين اسم المتدرب للترحيب به .

• حساب ثمن الدورة بعد الخصم .

• تذكر نتائج الاختبارات التي يجتازها الطلاب .

🎯 تحدي المحترفين :

“يا بطل ، قم بإنشاء متغيرين : الأول باسم courseTitle وضع فيه اسم دورتك ،

والثاني باسم lessonNumber وضع فيه رقم هذا الدرس (2) . ثم اجعل الموقع يظهر رسالة تجمع بينهما . هل استطعت فعل ذلك ؟”

للتوضيح :

في هذا الدرس سنتعلم مفهوم المتغيرات في JavaScript . المتغيرات هي أماكن لتخزين البيانات مثل النصوص والأرقام داخل البرنامج . سيتعلم الطالب كيفية إنشاء متغير باستخدام let و const وكيف يمكن استخدامه داخل الصفحة . في البرمجة نحتاج أحياناً إلى تخزين معلومات حتى نستخدمها لاحقاً . مثل : اسم المستخدم ، عمر المستخدم ، رسالة معينة . في JavaScript تسمى هذه الأماكن : Variables (المتغيرات) . يمكن تخيل المتغير كأنه صندوق يخزن البيانات .

🖼 فكرة المتغير Storing the information you need — Variables - Learn web development | MDN JavaScript Variables. Variables are a foundational aspect of… | by Robert Laws | Geek Culture | Medium What is a Variable?. It varies. But what else? What is a… | by StudeApps | Medium كل متغير يحتوي : اسم المتغير القيمة المخزنة داخله .

🟢 إنشاء متغير في JavaScript يوجد طريقتان أساسيتان :

let name = "Ahmed";
const country = "Morocco";

🟢 شرح الكود

الكود	المعنى
let	إنشاء متغير قابل للتغيير
const	إنشاء متغير ثابت
name	اسم المتغير
“Ahmed”	القيمة

🟢 مثال عملي

html

<p id="demo"></p>

<script>

let student = "Ali";

document.getElementById("demo").innerHTML = student;

</script>

🟢 النتيجة سيظهر في الصفحة : Ali

🧠 فكرة مهمة يمكن تغيير قيمة المتغير إذا كان باستخدام let .

javaScript

    ;let age = 20

     ;age = 25

لكن const لا يمكن تغييره .

javaScript

const pi = 3.14