مشاريع JavaScript تفاعلية للمبتدئين: من الصفر إلى الاحتراف
في هذه السلسلة التعليمية، سنأخذك في رحلة عملية تبدأ من الصفر وصولاً إلى الاحتراف في برمجة JavaScript. ستتعلم من خلال مشاريع تفاعلية مصممة خصيصًا لتطوير مهاراتك خطوة بخطوة، وبناء مشاريع واقعية تساعدك على ترسيخ مفاهيم البرمجة الأساسية والمتقدمة. كل مشروع في السلسلة سيشمل شرحًا تفصيليًا للخطوات المتبعة، وسيوفر تحديات إضافية لمواصلة تطوير مهاراتك.
قسم مشاريع JavaScript هو المكان الذي ستتعلم فيه كيفية بناء تطبيقات حقيقية باستخدام JavaScript، وهي واحدة من أكثر لغات البرمجة شيوعًا واستخدامًا في تطوير الويب. سواء كنت مبتدئًا تمامًا أو لديك بعض المعرفة، ستجد هنا مشاريع تساعدك على التعلم والتطوير.
المشروع الأول: بناء آلة حاسبة بسيطة باستخدام JavaScript
وصف المشروع: في هذا المشروع من سلسلة مشاريع جافا سكريبت، سنقوم ببناء آلة حاسبة بسيطة باستخدام JavaScript. الهدف من هذا المشروع هو تعريف المبتدئين على المفاهيم الأساسية لـ JavaScript مثل التلاعب بالأحداث (event handling)، وتحديث عناصر HTML ديناميكيًا. سيساعد هذا المشروع على تعلم كيفية التفاعل مع واجهة المستخدم وتحسين مهارات البرمجة الأساسية.
المهارات التي ستتعلمها:
- التعامل مع DOM (Document Object Model)
- التلاعب بعناصر HTML باستخدام JavaScript
- التعامل مع الأحداث مثل النقر على الأزرار
- بناء وظائف رياضية (Operations) لتنفيذ العمليات الحسابية
- إنشاء واجهات مستخدم بسيطة باستخدام HTML وCSS
متطلبات المشروع:
الأدوات والتقنيات اللازمة:
- محرر نصوص (مثل Visual Studio Code أو Sublime Text)
- متصفح ويب (مثل Google Chrome أو Edge)
- معرفة أساسية بـ HTML وCSS لتصميم الواجهة
- معرفة بسيطة بـ JavaScript (إذا كنت لا تعرف الكثير، فلا تقلق، سنشرح كل شيء خطوة بخطوة)
خطوات تنفيذ المشروع:
الخطوة الأولي: إعداد هيكل HTML
نبدأ بإنشاء صفحة HTML تحتوي على هيكل بسيط للآلة الحاسبة. سنقوم بإضافة أزرار للأرقام والعمليات الحسابية (الجمع، الطرح، الضرب، القسمة)، بالإضافة إلى شاشة لعرض النتائج.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button class="btn" data-num="1">1</button>
<button class="btn" data-num="2">2</button>
<button class="btn" data-num="3">3</button>
<button class="btn" data-op="+">+</button>
<button class="btn" data-num="4">4</button>
<button class="btn" data-num="5">5</button>
<button class="btn" data-num="6">6</button>
<button class="btn" data-op="-">-</button>
<button class="btn" data-num="7">7</button>
<button class="btn" data-num="8">8</button>
<button class="btn" data-num="9">9</button>
<button class="btn" data-op="*">*</button>
<button class="btn" data-num="0">0</button>
<button class="btn" id="clear">C</button>
<button class="btn" data-op="/">/</button>
<button class="btn" id="equals">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
الخطوة الثانية: إضافة تصميم CSS
بعد إنشاء الهيكل الأساسي، نضيف بعض الأنماط البسيطة باستخدام CSS لجعل الآلة الحاسبة تبدو أكثر جاذبية.
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.calculator {
width: 200px;
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.display {
background-color: #222;
color: #fff;
text-align: right;
padding: 20px;
font-size: 2em;
border-radius: 5px;
margin-bottom: 10px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.btn {
padding: 20px;
font-size: 1.5em;
background-color: #ddd;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #ccc;
}
#clear {
background-color: #ff4d4d;
color: white;
}
#equals {
background-color: #4caf50;
color: white;
}
الخطوة الثالثة: كتابة الكود البرمجي باستخدام JavaScript
هنا الجزء الأساسي في المشروع: نكتب كود جافا سكريبت الذي سيتعامل مع المدخلات من الأزرار وينفذ العمليات الحسابية.
// الحصول على عنصر الشاشة لعرض النتائج
const display = document.getElementById('display');
// متغيرات لتخزين المدخلات الحالية والمدخلات السابقة والعامل الرياضي (الجمع، الطرح، إلخ)
let currentInput = ''; // تخزين الأرقام المدخلة بعد اختيار العملية
let previousInput = ''; // تخزين الأرقام المدخلة قبل اختيار العملية
let operator = ''; // لتخزين العملية الحسابية التي يتم اختيارها (+, -, *, /)
// الحصول على جميع الأزرار
const buttons = document.querySelectorAll('.btn');
// إضافة حدث النقر على جميع الأزرار
buttons.forEach(button => {
button.addEventListener('click', () => {
// الحصول على قيمة الزر (رقم أو عملية حسابية)
const value = button.getAttribute('data-num') || button.getAttribute('data-op');
// إذا تم النقر على زر جمع
if (value === '+') operator = '+';
// إذا تم النقر على زر طرح
else if (value === '-') operator = '-';
// إذا تم النقر على زر ضرب
else if (value === '*') operator = '*';
// إذا تم النقر على زر قسمة
else if (value === '/') operator = '/';
// إذا تم النقر على زر "C" لمسح كل شيء
else if (button.id === 'clear') {
// إعادة تعيين المدخلات والشاشة
currentInput = '';
previousInput = '';
operator = '';
display.innerText = '0'; // إعادة الشاشة إلى 0
}
// إذا تم النقر على زر "=" لإجراء الحساب
else if (button.id === 'equals') {
// التأكد من أن هناك عملية تم اختيارها
if (operator) {
// حساب النتيجة بناءً على المدخلات والعامل
const result = calculate(previousInput, currentInput, operator);
// عرض النتيجة على الشاشة
display.innerText = result;
// تعيين المدخلات الحالية للنتيجة الجديدة للاستمرار في العمليات الحسابية
currentInput = result;
previousInput = '';
operator = ''; // إعادة تعيين العامل بعد الحساب
}
}
// إذا تم النقر على زر رقم (ليس عامل حسابي أو زر خاص)
else {
// إذا لم يتم تحديد عامل حسابي بعد، إضافة المدخلات إلى السابق
if (!operator) {
previousInput += value; // إضافة الرقم إلى المدخلات السابقة
display.innerText = previousInput; // تحديث الشاشة
}
// إذا تم تحديد عامل حسابي، إضافة المدخلات إلى الحالي
else {
currentInput += value; // إضافة الرقم إلى المدخلات الحالية
display.innerText = currentInput; // تحديث الشاشة
}
}
});
});
// دالة تقوم بحساب النتيجة بناءً على الأرقام والعامل المحدد
function calculate(num1, num2, op) {
// تحويل المدخلات إلى أرقام عشرية
num1 = parseFloat(num1);
num2 = parseFloat(num2);
// تحديد العملية بناءً على العامل
if (op === '+') return num1 + num2; // إذا كانت العملية جمع
if (op === '-') return num1 - num2; // إذا كانت العملية طرح
if (op === '*') return num1 * num2; // إذا كانت العملية ضرب
if (op === '/') return num1 / num2; // إذا كانت العملية قسمة
}
تحديات إضافية:
- إضافة زر للتراجع: يمكنك إضافة زر يسمح للمستخدم بالتراجع عن آخر عملية أدخلها.
- دعم العمليات المعقدة: يمكن للمستخدم إدخال سلسلة من العمليات الحسابية مثل "2 + 3 * 4"، حيث يتم تنفيذ القواعد الحسابية الصحيحة.
- دعم لوحة المفاتيح: إضافة ميزة تسمح للمستخدم باستخدام لوحة المفاتيح لإدخال الأرقام والعمليات.
الموارد الإضافية:
أستنتاج
نحن نحب أن نرى تقدمك في المشروع! لا تتردد في مشاركة أسئلتك أو حتى إبداعك في هذا المشروع من خلال التعليقات أو في المنتدى المخصص لهذه السلسلة.
ارجو من الجميع ضرورة تجربة الكود بأنفسهم، سواء على محرر نصوص محلي VS Code أو بيئات تفاعلية مثل CodePen أو JSFiddle.
للحصول على الكود الكامل للمشروع وتجربته مباشرةً، يمكنك زيارة الرابط التالي:
يمكنك نسخ الكود، التعديل عليه، وتجربته بنفسك!
إذا كنت بحاجة إلى مساعدة أو لديك أي استفسارات، لا تتردد في طرحها في التعليقات أو التواصل معنا عبر المنتدى المخصص.
