شرح الكود

السلام عليكم ورحمة الله تعالى وبركاته،

لفهم آلية عمل الكود بشكل بسيط يمكننا أولا أن نقوم بتقسيمها إلى عدة أجزاء وشرح كل جزء على حدى، في البداية يتم تعريف المتغيرات الأساسية التي تتحكم في آلية عمل الآلة الحاسبة كالتالي:

let runningTotal = 0;
let buffer = "0";
let previousOperator;
const screen = document.querySelector('.screen');

فالمتغير runningTotal يخزن مجموع العمليات أثناء الحساب، أما buffer فهو يمثل القيمة الحالية التي يدخلها المستخدم على الشاشة.

في حين previousOperator سيخزن آخر رمز عملية رياضية تم اختياره (+، -، ×، ÷) وأخيرا screen سيشير إلى العنصر الذي يعرض عليه ناتج الآلة الحاسبة وهو عنصر HTML بـ class اسمه: .screen.

بعدها ننتقل إلى الدوال ونشرحها بالواحدة، لدينا الدالة buttonClick وهي الدالة التي يتم تنفيذها عند الضغط على الأزرار:

function buttonClick(value){
    if(isNaN(value)){
        HandleSymbol(value);
    } else {
        handleNumber(value);
    }
    screen.innerText = buffer;
}

فإذا كانت القيمة التي ضغطها المستخدم رقما سترسل إلى handleNumber. وإذا كانت رمزا مثل + أو = أو C سترسل إلى HandleSymbol. وفي النهاية يتم تحديث الشاشة (screen.innerText) بقيمة buffer الحالية لعرضها للمستخدم.

الدالة الأخرى وهي دالة التعامل مع الرموز:

function HandleSymbol(symbol){
    switch(symbol){
        case 'C':
            buffer = '0';
            runningTotal = 0;
            break;
        case '=':
            if(previousOperator === null) return;
            flushOperator(parseInt(buffer));
            previousOperator = null;
            buffer = runningTotal;
            runningTotal = 0;
            break;
        case '←':
            if(buffer.length === 1){
                buffer = '0';
            } else {
                buffer = buffer.substring(0, buffer.length - 1);
            }
            break;
        case '+':
        case '-':
        case '÷':
        case '×':
            handleMath(symbol);
            break;
    }
}

وهي دالة تتعامل مع الرموز غير الرقمية فمثلا إذا ضغط المستخدم على C سيتم مسح كل شيء وإعادة القيم إلى وضعها الابتدائي أما إذا ضغط = سيتم تنفيذ العملية الحسابية بناء على القيم السابقة.

أما الرمز ← فيستخدم لحذف آخر رقم من buffer وإذا كان الرمز أحد العمليات الرياضية الأساسية، ترسل إلى handleMath للتحضير لتنفيذ العملية.

الدالة الأخرى هي دالة معالجة العمليات الحسابية:

function handleMath(symbol){
    if(buffer === '0') return;

    const intBuffer = parseInt(buffer);

    if(runningTotal === 0){
        runningTotal = intBuffer;
    } else {
        flushOperator(intBuffer);
    }

    previousOperator = symbol;
    buffer = '0';
}

هنا عند عند اختيار رمز عملية رياضية ما ك (+، -، ×، ÷)، سيتم تنفيذ هذه الدالة لكن بداية سيتم التحقق من أن المستخدم أدخل قيمة أم لا ثم يتم تحويل ال buffer إلى عدد صحيح.

فإذا كانت هذه أول عملية سيتم تعيين هذا الرقم إلى runningTotal أما إذا كان هناك نتيجة سابقة سيتم تنفيذ العملية السابقة عبر flushOperator وفي النهاية سيتم تخزين العملية الحالية، ويتم تفريغ ال buffer استعدادا للرقم الجديد.