في هذا الدرس سنتعلم كيف نقوم بعمل آلة حاسبة كالموجودة بالأسفل هذه بالجافا سكريبت قم بتجربتها بالضغط على الأرقام و الرموز لعمل العلميات الحسابية التي تريدها . [iframe=670px|200px|hidden]http://www.awcore.com/demos/?id=js_1&name=test.php&full=true[/iframe]

إخفاء/عرض الكود

الكود مكون من ثلاث أجزاء الإستايل شيت بالأعلى و كود الهيتميل بالمنتصف و كود الجافا سكريبت بالأسفل .بالطبع الهيتميل و الإستايل شيت مسؤولون عن المحتوى و الشكل فقط اما التفاعل فهو يخص الجافا سكريبت .شكل الآلة الحاسبة عبارة عن جدول <table> و توضع في خناته الأرقام من 0 حتى 9 و الرموز الحسابية كما يبدو لك في الأعلى .أما عن الجافا سكريبت و هو ما يهمنا هنا فالكود يتكون من ثلاث دوال دالة تكتب الرقم الذي تضغط عليه أو الرمز(ماعدا "=" )في الشاشة (خانة الصف الأول من الجدول).و دالة تنفذ عندما تضغط على "=" و تقوم بإجراء العملية الحسابية الموجوده في الشاشة ووضع الناتج في الشاشة .دالة تنفذ عندما تضغط على clear و تقوم بمسح الشاشة و سأشرح هذه الدوال بالتفصيل .

addDigit(digit)

مهمة هذه الدالة هي أنه عندما تضغط على رقم من الأرقام أو أداة من الأدوات تقوم هي بكتابة الرقم أو الأداة في الصف الأول من الجدول و الذي يمثل الشاشة .تعريف الدالة موجود في السطر الـ 48 من الكود و هو هكذا:

 function addDigit(digit) {
        var resultField = document.getElementById("results");
        resultField.innerHTML += digit;
 
        return false;
    }

في السطر رقم 2 في هذا الجزء وصلنا من خلال الـdom لخلية الصف الأول في الجدول باستخدام دالة getElementById و إذا نظرت للسطر 20 في الكود الكامل ستجد أن خلية الصف الأول لها id( الآي دي) result . السطر التالي هوا إختصار لهذا الكود

resultField.innerHTML =resultField.innerHTML+ digit;

و هو يلصق قيمة المتغير digit و (الذي يدخل كبرامتر للدالة) في النص الموجود أصلا في الشاشة ثم يضع الإثنين في داخل الشاشة ,بالطبع إن كانت الشاشة خالية أي أن النص الموجود بداخلها ("")فإنه الناتج سيكون قيمة المتغير digit فقط لأن مثلا 1+"" كما نعلم تساوي "1" . سنجعل هذه الدالة تعمل عند الضغط على أي رقم أو أي رمز ما عدا رمز "=" و ذلك بأن نضيفها من خلال الصفة onclick في كل لنك يمثل رقم أو رمز مثل

  <td><a href="#" onclick="return addDigit(1)">1</a></td>

و نضع الرقم أو الرمز كبرامتر للدالة و كذلك return لكي لا يذهب لما يؤدي إليه اللينك وهو في حالتنا علامة الشباك# و التي تعني أعلى الصفحة .

calculate()

تعمل هذه الدالة عند الضغط على علامة "=" كما يظهر من السطر 43 في الكود و الذي هو :

 <td><a href="#" onclick="return calculate()">=</a></td>

و ما تقوم به هذه الدالة هي أنها تنفذ العملية الحسابية الموجود في الشاشة فإذا نظرت للكود الخاص بتعرفيها في السطر 55 ستجده كالتالي:

    function calculate() {
        var resultField = document.getElementById("results");
         
        resultField.innerHTML = eval(resultField.innerHTML);
 
        return false;
    }

في كود الدالة السطر رقم 2 عبارة عن وصول لخلية الجدول التي تمثل الشاشة من خلال الآي دي .

أما السطر التالي رقم 4 فيتم إستخدام دالة eval و هذه الدالة تنفذ النص الموجود فيها كأوامر مثلا

x="1+3"
eval(x)

ترجع 4

و يمكنك تجربتها في الكنسول .

و أيضا

text="alert('this is a text ')"
eval(text)

دالة eval ستنفذ النص الموجود بداخلها كأوامر فيظهر لك صندوق alert .

و في دالة calculate نستخدم دالة eval لتنفيذ العملية الحسابية الموجودة في الشاشة و التي نصل لها من خلال resultField.innerHTML ثم نضع الناتج ثانية في resultField.innerHTML ليظهر على الشاشة .

reset()

و تعمل عند الضغط على كلمة Clear كما يتضح من السطر 41 و الذي هو كالتالي :

 <td><a href="#" onclick="return reset()">Clear</a></td>

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

تعريف الدالة يوجد في السطر 63 و هو كالتالي :

function reset() {
        var resultField = document.getElementById("results");
         
        resultField.innerHTML = "";
 
        return false;
   }
 

و كل ما تفعله الدالة هي أن تضع نص خالي في محل النص الموجود في الشاشة من خلال الكود الموجود في السطر 4.

فصل الجافا سكريبت عن الهيتميل

تعلمنا في الدرس السابق كيف نضيف معالجات الأحداث للأحداث بدون أن نخلط بين الجافا سكريبت و هيتميل و سنطبق هذه الطريقة على تطبيق الآلة الحاسبة فيكون الكود كالتالي: الدوال الموجودة في الكود الأول موجودة أيضا هنا و لم تتغير .تم إضافة دالتين دالة getHandlerFunction سنذكر مهتمتها لاحقا.و دالة تعمل عند تحميل الصفحة onload و مهمتها أن تعيين الدوال للأحداث سنبدأ بشرح الثانية أولا . إذا نظرت في الكود إلى السطر 79 ستجد أنه تم وضع دالة للإيفنت هندلر onload هذه الدالة ستعمل عند إكتمال تحميل الصفحة و مهمتها أنها تعين الدوال التي ستعمل عند الضغط على كل لينك و الآن سنفحصها و نفهم كيف تعمل .هذا هو الجزء الخاص بالدالة:

onload = function() {
        var links = document.getElementsByTagName("a");
        var length = links.length;
 
        for (var i = 0; i < length; i++) {
            var link = links[i];
            var innerHTML = link.innerHTML;
 
            switch(innerHTML) {
                case "Clear":
                    link.onclick = reset;
                    break;
                case "=":
                    link.onclick = calculate;
                    break;
                default:
                    link.onclick = getHandlerFunction(innerHTML);
                    break;
            }
        }
 
    };

في هذا الجزء السطر رقم 2 يأتي بكل اللينكات الموجوده في الصفحة و يضعها في مصفوفة و ذلك بإستخدام دالة getElementsByTagName.

السطر رقم 3 نضع عدد عناصر المصفوفة في المتغير length .

السطر رقم 5 حلقة for ستدور عدد مرات يساوي عدد عناصر مصفوفة اللينكات

داخل حلقة for يتم الوصول لمحتوى كل لينك بإستخدام innerHTML و المحتوى يكون الكتوب ما بين <a/> و<a> .

ثم نستخدم switch ففي حالة كون النص الموجود Clear نعين دالة reset للينك كما في السطر 11.

في حالة كان النص الموجود "=" نعين دالة calculate للينك كما في السطر 14.

لاحظ أنه عند تعيين دالة لإيفنت هندلر لا نضع () بعد الدالة لأن القوسين يعنيا أن يتم تنفيذ الدالة ووضع ناتجها لكن الوضع بدون أقواس يعني أن تضع الدالة نفسها و ليس ناتجها في الإيفنت هندلر

أما إن كان النص الموجود أي شيء آخر غير Clear أو = فإننا كما يظهر في السطر 17 نعين له الدالة getHandlerFunction(innerHTML) و ليس كما من المفترض أنك تتوقع أن نعين دالة addDigit لما هذا ؟ يحتاج الأمر لبعض الشرح . نحتاج لتمرير برامتر إلى دالة addDigit و يكون عبارة عن الرقم الذي سيتم كتابته في الشاشة عند الضغط على اللينك ,لكن عند إستخدام هذه الطريقة التي نستخدمها لتعين معالجات الأحداث لا يمكن تمرير برامتر بالطرق العادية و المثال التالي يوضح لماذا عند الضغط على الزر سيظهر لك صندوق مكتوب فيه object mouse event .مع أنه كان المتوقع ان يظهر فيه الرقم 3 حيث أن قيمة e موضوعة ب 3 كما ترى بالكود .لكن ما يحدث هو أنه عند تعين الدوال للإحداث بهذه الطريقة فإن الجافا سكريبت تمرر تلقائيا كائن يسمى بالـ event سندرسه في الدروس التالية و هذا الكائن يوضع في البرامتر الذي تضعه في الدالة مثل e ,و هذا الكائن event مفيد جدا لكن دعنا منه الآن .المهم أنه لكي نمرر متغير للدالة addDigit الحل كان أن نستخدم دالة و سيطة و هي getHandlerFunction.

getHandlerFunction()

لاحظ السطر رقم 95 في الكود الكامل و الذي هو

 link.onclick = getHandlerFunction(innerHTML);

أن دالة getHandlerFunction لا توضع في الإيفنت هندر onclick بل يوضع ناتجها و ذلك لأنه يستخدم بعدها القوسين (innerHTML) . و إذا نظرت لتعريف الدالة الموجود من بداية السطر 71 و الذي هو كالتالي:

function getHandlerFunction(innerHTML) {
        return function() {
            addDigit(innerHTML);
 
            return false;
        };
    }

كما يتضح من التعريف الدالة تأخذ المتغير innerHTML و الذي سيكون فيه القيمة التي نريد أن نمررها لaddDigit . ثم ترجع الدالة

 return function() {
            addDigit(innerHTML);
 
            return false;
  }   

هذه الدالة هي التي ستعين للإيفنت هندلر.و لنأخذ مثال للتوضيح لنفترض أنك ضغط على الرقم 1 في الآلة الحاسبة فإن الدالة التي ستنفذ ستكون عبارة عن

{addDigit(1)

return false
}