إنشاء آلة حاسبة بإستخدام HTML و CSS و JavaScript

byمدونة العرائش التقنية -

دليل شامل لإنشاء آلة حاسبة تفاعلية بإستخدام HTML و CSS و JavaScript

إنشاء آلة حاسبة بإستخدام HTML و CSS و JavaScript

المقدمة: لماذا مشروع الآلة الحاسبة؟

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

الأهمية التعليمية للمشروع

يقدم مشروع الآلة الحاسبة فرصة فريدة لتعلم:

  • دمج تقنيات الويب الأساسية: HTML للهيكلة، CSS للتنسيق، JavaScript للتفاعل
  • تطوير المنطق البرمجي: بناء خوارزميات حسابية ومنطق معالجة البيانات
  • تحسين مهارات حل المشكلات: التعامل مع الحالات الخاصة والأخطاء المحتملة

كيفية إعداد بيئة العمل والأدوات الأساسية

الأدوات المطلوبة

الأداة الوظيفة البدائل
محرر نصوص كتابة الأكواد Visual Studio Code, Sublime Text, Atom
متصفح ويب اختبار التطبيق Chrome, Firefox, Safari
نظام ملفات تنظيم المشروع مجلد عادي على الحاسوب

هيكلة ملفات المشروع

project-folder/
│
├── index.html
├── style.css
└── script.js

خطوات لبناء الهيكلي بإستخدام HTML

الهيكل الأساسي للصفحة

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>آلة حاسبة تفاعلية | دليل شامل</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- هيكل الآلة الحاسبة سيأتي هنا -->
    <script src="script.js"></script>
</body>
</html>

بناء مكونات الآلة الحاسبة

<div class="calculator">
    <!-- شاشة العرض -->
    <div class="display">
        <input type="text" id="result" readonly>
    </div>
    
    <!-- لوحة الأزرار -->
    <div class="buttons">
        <button class="btn clear" data-action="clear">C</button>
        <button class="btn operator" data-action="backspace">⌫</button>
        <button class="btn operator" data-action="/">/</button>
        <button class="btn operator" data-action="*">×</button>
        
        <button class="btn number" data-number="7">7</button>
        <button class="btn number" data-number="8">8</button>
        <button class="btn number" data-number="9">9</button>
        <button class="btn operator" data-action="-">-</button>
        
        <button class="btn number" data-number="4">4</button>
        <button class="btn number" data-number="5">5</button>
        <button class="btn number" data-number="6">6</button>
        <button class="btn operator" data-action="+">+</button>
        
        <button class="btn number" data-number="1">1</button>
        <button class="btn number" data-number="2">2</button>
        <button class="btn number" data-number="3">3</button>
        <button class="btn equals" data-action="=" rowspan="2">=</button>
        
        <button class="btn number zero" data-number="0">0</button>
        <button class="btn number" data-number=".">.</button>
    </div>
</div>

إنشاء التصميم والتنسيق بإستخدام CSS

التنسيقات العامة والتهيئة

/* إعادة الضبط الأساسية */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    direction: rtl;
}

البرمجة والمنطق بإستخدام JavaScript

التهيئة والمتغيرات العالمية

// العناصر الرئيسية
const resultElement = document.getElementById('result');
const buttons = document.querySelectorAll('.btn');

// حالة الآلة الحاسبة
let currentInput = '0';
let previousInput = '';
let operation = null;
let shouldResetScreen = false;

// ثوابت للعمليات
const OPERATIONS = {
    ADD: '+',
    SUBTRACT: '-',
    MULTIPLY: '*',
    DIVIDE: '/',
    EQUALS: '='
};

معالجة العمليات الحسابية

function calculateResult() {
    if (operation === null || shouldResetScreen) return;
    
    const prev = parseFloat(previousInput);
    const current = parseFloat(currentInput);
    
    if (isNaN(prev) || isNaN(current)) return;
    
    let computation;
    switch (operation) {
        case OPERATIONS.ADD:
            computation = prev + current;
            break;
        case OPERATIONS.SUBTRACT:
            computation = prev - current;
            break;
        case OPERATIONS.MULTIPLY:
            computation = prev * current;
            break;
        case OPERATIONS.DIVIDE:
            if (current === 0) {
                handleError('لا يمكن القسمة على صفر');
                return;
            }
            computation = prev / current;
            break;
        default:
            return;
    }
    
    currentInput = formatResult(computation);
    operation = null;
    previousInput = '';
    shouldResetScreen = true;
}

تحسينات إضافية وميزات متقدمة

إضافة الذاكرة للآلة الحاسبة

// إضافة متغيرات الذاكرة
let memory = 0;

function memoryAdd() {
    memory += parseFloat(currentInput) || 0;
}

function memoryRecall() {
    currentInput = memory.toString();
    shouldResetScreen = true;
    updateDisplay();
}

إختبار فعالية آلة الحسابة والتصحيح الأخطاء

جدول حالات الإختبار

الحالة الإدخال النتيجة المتوقعة
جمع بسيط 5 + 3 = 8
طرح 10 - 4 = 6
قسمة على صفر 5 ÷ 0 = خطأ

روابط تعليم HTML CSS  JAVA 

مراجع HTML

مراجع CSS

مراجع JavaScript

أدوات للمطورين


الخاتمة والتطوير المستقبلي

ما أنجزناه

في هذا الدليل الشامل، أنشأنا آلة حاسبة متكاملة تشمل:

  • ✅ واجهة مستخدم جميلة ومتجاوبة
  • ✅ جميع العمليات الحسابية الأساسية
  • ✅ معالجة الأخطاء والحالات الخاصة
  • ✅ دعم لوحة المفاتيح

أفكار للتطوير المستقبلي

  • إضافة عمليات علمية (جذر تربيعي، أس، دوال مثلثية)
  • تحويل الوحدات (طول، وزن، عملة)
  • وضع المبرمج (تحويل بين أنظمة العد)
  • حفظ السجل في localStorage

مصادر إضافية للتعلم

ملاحظة: هذا الدليل تعليمي ويحتوي على أساسيات بناء آلة حاسبة باستخدام تقنيات الويب.

آخر تحديث: يناير 2025 - هذا الدليل حصري ومكتوب خصيصًا لمتعلمي البرمجة في العالم العربي.

Tags
أحدث أقدم

منوعات موسيقية

نموذج الاتصال