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
|
This Page is Under Construction! - If You Want To Help Please Send your CV - Advanced Web Core (BETA)
© Advanced Web Core. All rights reserved