Have an account? Sign in
Login  Register  Facebook
Web Development School
This Page is Under Construction! - If You Want To Help Please Send your CV - Advanced Web Core (BETA)
Quick Table of Contents
[Edit] تابع تطبيق 1.
يمكن إعادة كتابة كود الآلة الحاسبة بإستخدام و يكون كالتالي: لجميع المتصفحات ما عدا إنترنت إكسبلورر 
<!DOCTYPE html>

<html>
<head>
    <title>Lesson 19: Example 01</title>
    <style type="text/css">
    td {
        border: 1px solid gray;
        width: 50px;
    }
    
    #results {
        height: 20px;
    }
    </style>
</head>
<body>
    <table border="0" cellpadding="2" cellspacing="2">
        <tr>
            <td colspan="4" id="results"></td>
        </tr>
        <tr>
            <td><a href="#">1</a></td>
            <td><a href="#">2</a></td>
            <td><a href="#">3</a></td>
            <td><a href="#">+</a></td>
        </tr>
        <tr>
            <td><a href="#">4</a></td>
            <td><a href="#">5</a></td>
            <td><a href="#">6</a></td>
            <td><a href="#">-</a></td>
        </tr>
        <tr>
            <td><a href="#">7</a></td>
            <td><a href="#">8</a></td>
            <td><a href="#">9</a></td>
            <td><a href="#">*</a></td>
        </tr>
        <tr>
            <td><a href="#">Clear</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">=</a></td>
            <td><a href="#">/</a></td>
        </tr>
    </table>
    <script type="text/javascript">
    function addDigit(digit) {
        var resultField = document.getElementById("results");
        resultField.innerHTML += digit;

    }

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

    }

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

    }

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

        };
    }

    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;
            var func = null;

            switch(innerHTML) {
                case "Clear":
                    func = reset;
                    break;
                case "=":
                    func = calculate
                    break;
                default:
                    func = getHandlerFunction(innerHTML);
                    break;
            }

            link.addEventListener("click", func, false);
        }

    };
    </script>
</body>
</html>
للإنترنت إكسبلورر 
<!DOCTYPE html>

<html>
<head>
    <title>Lesson 19: Example 02</title>
    <style type="text/css">
    td {
        border: 1px solid gray;
        width: 50px;
    }
    
    #results {
        height: 20px;
    }
    </style>
</head>
<body>
    <table border="0" cellpadding="2" cellspacing="2">
        <tr>
            <td colspan="4" id="results"></td>
        </tr>
        <tr>
            <td><a href="#">1</a></td>
            <td><a href="#">2</a></td>
            <td><a href="#">3</a></td>
            <td><a href="#">+</a></td>
        </tr>
        <tr>
            <td><a href="#">4</a></td>
            <td><a href="#">5</a></td>
            <td><a href="#">6</a></td>
            <td><a href="#">-</a></td>
        </tr>
        <tr>
            <td><a href="#">7</a></td>
            <td><a href="#">8</a></td>
            <td><a href="#">9</a></td>
            <td><a href="#">*</a></td>
        </tr>
        <tr>
            <td><a href="#">Clear</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">=</a></td>
            <td><a href="#">/</a></td>
        </tr>
    </table>
    <script type="text/javascript">
    function addDigit(digit) {
        var resultField = document.getElementById("results");
        resultField.innerHTML += digit;

    }

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

    }

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

    }

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

        };
    }

    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;
            var func = null;

            switch(innerHTML) {
                case "Clear":
                    func = reset;
                    break;
                case "=":
                    func = calculate
                    break;
                default:
                    func = getHandlerFunction(innerHTML);
                    break;
            }

            link.attachEvent("onclick", func);
        }

    };
    </script>
</body>
</html>
و بالطبع نحن نحتاج كود يعمل في حالة أي متصفح و لذا نقوم بعمل هذا الكائن و نضعه في ملف خارجي هذا الملف سنستخدمه في أي مرة نريد فيها إستخدام دوال معالجة الأحداث: 
var eventUtility = {
    addEvent : (function() {
        if (typeof addEventListener !== "undefined") {
            return function(obj, evt, fn) {
                obj.addEventListener(evt, fn, false);
            };
        } else {
            return function(obj, evt, fn) {
                obj.attachEvent("on" + evt, fn);
            };
        }
    }()),
    removeEvent : (function() {
        if (typeof removeEventListener !== "undefined") {
            return function(obj, evt, fn) {
                obj.removeEventListener(evt, fn, false);
            };
        } else {
            return function(obj, evt, fn) {
                obj.detachEvent("on" + evt, fn);
            };
        }
    }())
};
عند تعريف دالة بهذه الطريقة function(){}() فإنها تكون عبارة عن دالة تنفذ تلقائيا . تضع كود هذا الكائن في ملف يسمى eventUtility.js و نقوم بإستدعائه في كود الآلة الحاسبة كالتالي: 
<!DOCTYPE html>

<html>
<head>
    <title>Lesson 20: Example 01</title>
    <style type="text/css">
    td {
        border: 1px solid gray;
        width: 50px;
    }
    
    #results {
        height: 20px;
    }
    </style>
</head>
<body>
    <table border="0" cellpadding="2" cellspacing="2">
        <tr>
            <td colspan="4" id="results"></td>
        </tr>
        <tr>
            <td><a href="#">1</a></td>
            <td><a href="#">2</a></td>
            <td><a href="#">3</a></td>
            <td><a href="#">+</a></td>
        </tr>
        <tr>
            <td><a href="#">4</a></td>
            <td><a href="#">5</a></td>
            <td><a href="#">6</a></td>
            <td><a href="#">-</a></td>
        </tr>
        <tr>
            <td><a href="#">7</a></td>
            <td><a href="#">8</a></td>
            <td><a href="#">9</a></td>
            <td><a href="#">*</a></td>
        </tr>
        <tr>
            <td><a href="#">Clear</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">=</a></td>
            <td><a href="#">/</a></td>
        </tr>
    </table>
    <script src="eventUtility.js" type="text/javascript"></script>
    <script type="text/javascript">
    function addDigit(digit) {
        var resultField = document.getElementById("results");
        resultField.innerHTML += digit;

    }

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

    }

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

    }

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

        };
    }

    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;
            var func = null;

            switch(innerHTML) {
                case "Clear":
                    func = reset;
                    break;
                case "=":
                    func = calculate;
                    break;
                default:
                    func = getHandlerFunction(innerHTML);
                    break;
            }

            eventUtility.addEvent(link, "click", func);
            //link.addEventListener("click", func, false);
        }

    };
    </script>
</body>
</html>
هذا الكود صالح لأي نوع من المتصفحات.
December 18, 2011