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

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

“مرحباً بك يا مبرمج المستقبل ! لقد قطعت شوطاً كبيراً في عالم الاحتراف ، وحان الوقت لتجني ثمار تعبك. اليوم، لن نكتب كوداً عشوائياً ، بل سنبني تطبيقاً حقيقياً يخدم المستخدمين : آلة حاسبة ذكية تعمل مباشرة على متصفحك . هذا المشروع هو أول حجر في ملفك الشخصي (Portfolio) كمطور محترف !”

🏗️ 1 . هيكل المشروع (HTML) أولاً ، نحتاج إلى أزرار للأرقام وشاشة لعرض النتيجة . سنستخدم كوداً بسيطاً :

html

<div class="calculator">
    <input type="text" id="display" disabled>
    <div class="keys">
        <button onclick="appendToDisplay('7')">7</button>
        <button onclick="appendToDisplay('8')">8</button>
        <button onclick="calculate()">=</button>
        <button onclick="clearDisplay()">C</button>
    </div>
</div>

💻 2 . العقل البرمجي (JavaScript)

هنا نستخدم ما تعلمناه في الدوال والعمليات الحسابية .

سنقوم ببرمجة 3 وظائف أساسية :

JavaScript

// 1. وظيفة لإضافة الرقم إلى الشاشة
function appendToDisplay(input) {
    document.getElementById("display").value += input;
}

// 2. وظيفة لمسح الشاشة
function clearDisplay() {
    document.getElementById("display").value = "";
}

// 3. وظيفة الحساب (استخدام دالة eval الذكية)
function calculate() {
    try {
        let result = eval(document.getElementById("display").value);
        document.getElementById("display").value = result;
    } catch (error) {
        document.getElementById("display").value = "خطأ";
    }
}

🎨 3 . لمسة الجمال (CSS)

لا تنسَ يا بطل أن تعطي الآلة الحاسبة مظهراً يليق بأكاديمية قياوي .

اجعل الأزرار كبيرة ، وواضحة ، وسهلة الضغط .

💡 لماذا هذا المشروع مهم لمسارك المهني ؟

الربط بين اللغات : تتعلم كيف تربط HTML بـ CSS و JavaScript في ملف واحد .
معالجة الأخطاء : تعلمت اليوم كيف تستخدم try…catch لمنع تعطل الموقع إذا أدخل المستخدم عملية حسابية خاطئة .
التفكير المنطقي : فهمت كيف يتدفق البيانات من الزر إلى الذاكرة ثم إلى الشاشة .

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

“يا مهندس ، هل يمكنك إضافة أزرار للعمليات الأخرى (الضرب والقسمة) ؟ وهل تستطيع تغيير لون خلفية الشاشة لتصبح خضراء عندما تظهر النتيجة ؟ هذا هو الفرق بين المبرمج العادي والمحترف !”

للتوضيح :

فكرة المشروع

سننشئ صفحة ويب فيها :

مربع لعرض الأرقام والعمليات أزرار للأرقام (0–9) ، أزرار العمليات (+ − × ÷) ، زر للحساب (=) ، زر للمسح (C) .

الهدف هو أن يضغط المستخدم على الأزرار فتظهر العملية وتُحسب النتيجة .

الشكل المتوقع للآ لة الحاسبة 7 Best Basic Calculator For Everyday Use – LeStallion الخطوة 1 : إنشاء هيكل الصفحة

HTML

<!DOCTYPE html>
<html>
<head>
<title>الآلة الحاسبة</title>
</head>

<body>

<h2>الآلة الحاسبة الذكية</h2>

<input type="text" id="screen">

<br><br>

<button onclick="add('7')">7</button>
<button onclick="add('8')">8</button>
<button onclick="add('9')">9</button>
<button onclick="add('+')">+</button>

<br>

<button onclick="add('4')">4</button>
<button onclick="add('5')">5</button>
<button onclick="add('6')">6</button>
<button onclick="add('-')">-</button>

<br>

<button onclick="add('1')">1</button>
<button onclick="add('2')">2</button>
<button onclick="add('3')">3</button>
<button onclick="add('*')">*</button>

<br>

<button onclick="add('0')">0</button>
<button onclick="calculate()">=</button>
<button onclick="clearScreen()">C</button>
<button onclick="add('/')">/</button>

</body>
</html>

لخطوة 2 : إضافة الذكاء (JavaScript)

نضيف الكود التالي قبل </body> :

HTML

<script>

function add(value) {
document.getElementById("screen").value += value;
}

function calculate() {
let result = document.getElementById("screen").value;
document.getElementById("screen").value = eval(result);
}

function clearScreen() {
document.getElementById("screen").value = "";
}

</script>

ماذا يحدث في هذا الكود ؟

1️⃣ الدالة add تضيف الرقم أو العملية إلى الشاشة .

2️⃣ الدالة calculate تحسب العملية المكتوبة .

3️⃣ الدالة clearScreen تمسح الشاشة .

مثال على الاستخدام .

إذا ضغط المستخدم : 7 + 3 = ستظهر النتيجة : 10

تحسين بسيط للمظهر (اختياري)

HTML

<
b

style>

utton{
width:50px;
height:50px;
font-size:20px;
margin:5px;
}

#screen{
width:210px;
height:40px;
font-size:20px;
}

</style>

ماذا تعلمنا من هذا المشروع ؟

استعمال HTML
استعمال Events
استعمال JavaScript
بناء تطبيق تفاعلي حقيقي

وهذا أول مشروع برمجي كامل في الدورة . تمرين للطلاب حاول تطوير الآلة الحاسبة بإضافة : زر % ، زر الجذر √ ، تغيير الألوان ، تصميم أجمل .