في هذا المقال، سنستعرض كيفية إنشاء تطبيق ويب بسيط باستخدام JavaScript. سنبني تطبيقًا تفاعليًا بسيطًا يعرض قائمة مهام يمكن للمستخدم إضافتها وحذفها. هذا التطبيق سيتيح لنا فهم كيفية استخدام JavaScript في تطوير واجهات الويب والتفاعل مع المستخدمين.
المتطلبات الأساسية
قبل البدء، تأكد من أن لديك بيئة تطوير بسيطة على جهازك. تحتاج إلى:
- محرر نصوص (مثل VSCode، Sublime Text، أو حتى Notepad++).
- متصفح ويب (مثل Chrome، Firefox، أو Edge).
الخطوة 1: إعداد هيكل المشروع
ابدأ بإنشاء مجلد جديد لمشروعك، ولنفترض أن اسمه todo-app. داخل هذا المجلد، قم بإنشاء الملفات التالية:
index.htmlstyles.cssscript.js
الخطوة 2: إعداد ملف HTML
في ملف index.html، سنقوم بإنشاء الهيكل الأساسي لتطبيق الويب. افتح الملف وأضف الكود التالي:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تطبيق قائمة المهام</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>تطبيق قائمة المهام</h1>
<input type="text" id="taskInput" placeholder="أضف مهمة جديدة...">
<button id="addTaskButton">إضافة مهمة</button>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
الخطوة 3: إضافة بعض الأساليب باستخدام CSS
في ملف styles.css، أضف بعض الأساليب لتحسين مظهر التطبيق:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 300px;
}
input[type="text"] {
width: calc(100% - 110px);
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px;
border: none;
background-color: #28a745;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
align-items: center;
}
li button {
background-color: #dc3545;
border: none;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
li button:hover {
background-color: #c82333;
}
الخطوة 4: كتابة الكود باستخدام JavaScript
في ملف script.js، سنقوم بكتابة الكود الذي سيضيف وظائف لتطبيق قائمة المهام. افتح الملف وأضف الكود التالي:
document.addEventListener('DOMContentLoaded', () => {
const addTaskButton = document.getElementById('addTaskButton');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
addTaskButton.addEventListener('click', () => {
const taskText = taskInput.value.trim();
if (taskText !== '') {
const li = document.createElement('li');
li.textContent = taskText;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'حذف';
deleteButton.addEventListener('click', () => {
taskList.removeChild(li);
});
li.appendChild(deleteButton);
taskList.appendChild(li);
taskInput.value = '';
}
});
taskInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
addTaskButton.click();
}
});
});
شرح الكود:
- DOM Manipulation: نستخدم JavaScript للتفاعل مع DOM (Document Object Model) عبر
getElementByIdوcreateElement. - إضافة مهمة جديدة: نتحقق من صحة إدخال المستخدم، ثم ننشئ عنصر قائمة جديد (
<li>) ونضيفه إلى القائمة (<ul>). - حذف مهمة: نضيف زر “حذف” لكل مهمة يزيل العنصر من القائمة عند النقر عليه.
- التفاعل مع المستخدم: نضيف مستمع حدث للنقر على زر “إضافة مهمة” ولتفاعل المستخدم عند الضغط على “Enter” في حقل الإدخال.
الخطوة 5: تشغيل التطبيق
افتح ملف index.html في متصفحك. سترى واجهة التطبيق مع حقل لإدخال النص وزر لإضافة المهام. يمكنك الآن إدخال المهام وإضافتها إلى القائمة، وحذفها بالنقر على زر “حذف” بجانب كل مهمة.
خاتمة
بإنشاء هذا التطبيق البسيط باستخدام JavaScript، اكتسبنا فهمًا عمليًا لكيفية استخدام JavaScript لتطوير تطبيقات الويب التفاعلية. تعلمنا كيفية التعامل مع DOM، إضافة عناصر تفاعلية، وإدارة الأحداث. هذا المثال يمكن أن يكون نقطة انطلاق لتطوير تطبيقات أكثر تعقيدًا باستخدام JavaScript، حيث يمكنك إضافة المزيد من الميزات والتفاعلات حسب احتياجاتك.
Leave feedback about this
يجب أنت تكون مسجل الدخول لتضيف تعليقاً.