بناء تطبيق ويب بسيط باستخدام لغة جافاسكريبت: (تطبيق عملي)

author
jistweb -
بناء تطبيق ويب بسيط باستخدام لغة جافاسكريبت: (تطبيق عملي)

مرحبًا بك أيها القارئ الطموح! هل أنت مستعد لتحويل معرفتك النظرية بلغة جافاسكريبت إلى شيء ملموس وقابل للاستخدام؟ في هذا المقال، سننطلق في رحلة عملية لبناء تطبيق ويب بسيط خطوة بخطوة. هذا النوع من المشاريع العملية هو المفتاح الحقيقي لفهم المفاهيم وتثبيتها، والأهم من ذلك، إظهار قدرتك على التطبيق العملي.

تحديد فكرة تطبيق ويب بسيط: قائمة مهام بسيطة

للبدء، سنختار فكرة تطبيق ويب بسيط وواضح: قائمة مهام (To-Do List). هذا التطبيق سيمكن المستخدمين من إضافة مهام، وتحديدها كمكتملة، وحذفها. إنها فكرة كلاسيكية للمبتدئين لأنها تغطي أساسيات التعامل مع DOM (نموذج كائن المستند) في جافاسكريبت والتفاعل مع المستخدم.

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

سنقوم بإنشاء ثلاثة ملفات أساسية لمشروعنا:

  1. index.html: هذا هو الملف الهيكلي لتطبيق الويب. سيحتوي على العناصر الأساسية مثل مربع الإدخال، وزر الإضافة، وقائمة المهام.
  2. style.css: هذا الملف مسؤول عن تنسيق مظهر التطبيق وجعله أكثر جاذبية.
  3. script.js: هذا الملف هو قلب التطبيق، حيث سنكتب كود جافاسكريبت المسؤول عن إضافة المهام، وتحديثها، وحذفها.

كتابة الأكواد خطوة بخطوة مع الشرح المفصل

1. ملف index.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>
    <div class="container">
        <h1>قائمة مهامي</h1>
        <div class="input-container">
            <input type="text" id="taskInput" placeholder="أضف مهمة جديدة...">
            <button id="addTaskBtn">إضافة</button>
        </div>
        <ul id="taskList">
            <!-- سيتم إضافة المهام هنا -->
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

الشرح:

  • <!DOCTYPE html>: تعريف نوع المستند على أنه HTML5.
  • <html lang="ar" dir="rtl">: تحديد لغة الصفحة على أنها العربية واتجاه النص من اليمين إلى اليسار.
  • <head>: يحتوي على معلومات تعريفية حول الصفحة مثل ترميز الأحرف (charset)، وإعدادات العرض (viewport)، وعنوان الصفحة (title)، ورابط ملف التنسيق (style.css).
  • <body>: يحتوي على المحتوى المرئي للصفحة.
  • <div class="container">: حاوية رئيسية لتنظيم عناصر الصفحة.
  • <h1>قائمة مهامي</h1>: عنوان رئيسي للتطبيق.
  • <div class="input-container">: حاوية لعناصر إدخال المهمة.
  • <input type="text" id="taskInput" placeholder="أضف مهمة جديدة...">: حقل نصي لإدخال المهمة الجديدة. تم إعطاءه id باسم taskInput لكي نتمكن من الوصول إليه في جافاسكريبت.
  • <button id="addTaskBtn">إضافة</button>: زر لإضافة المهمة. تم إعطاءه id باسم addTaskBtn للوصول إليه في جافاسكريبت.
  • <ul id="taskList">: قائمة غير مرتبة لعرض المهام. تم إعطاءها id باسم taskList ليتمكن جافاسكريبت من إضافة المهام إليها.
  • <script src="script.js"></script>: ربط ملف جافاسكريبت بالصفحة. يجب وضعه في نهاية <body> لضمان تحميل جميع عناصر HTML قبل تنفيذ جافاسكريبت.

2. ملف style.css (تنسيق بسيط):

body{font-family:Arial,sans-serif;margin:0;background-color:#f4f4f4;display:flex;justify-content:center;align-items:center;min-height:100vh}
.container{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1);width:400px;text-align:center}
.input-container{display:flex;margin-bottom:15px}
#taskInput{flex-grow:1;padding:10px;border:1px solid #ccc;border-radius:4px;margin-left:5px}
#addTaskBtn{padding:10px 15px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}
#taskList{list-style:none;padding:0}
#taskList li{padding:10px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
#taskList li:last-child{border-bottom:none}
#taskList li.completed{text-decoration:line-through;color:#888}
#taskList li button{background-color:#dc3545;color:#fff;border:none;padding:5px 10px;border-radius:4px;cursor:pointer}

الشرح:

  • تنسيقات أساسية للجسم (body) والكونتينر (.container) لجعل التطبيق يبدو أفضل.
  • تنسيقات لحقل الإدخال (#taskInput) والزر (#addTaskBtn).
  • تنسيقات لقائمة المهام (#taskList) وعناصر القائمة (#taskList li).
  • تنسيق خاص للعناصر المكتملة (#taskList li.completed) بإضافة خط وسطي وتغيير اللون.
  • تنسيق لأزرار الحذف داخل قائمة المهام.

3. ملف script.js:


const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

addTaskBtn.addEventListener('click', addTask);

taskInput.addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
        addTask();
    }
});

function addTask() {
    const taskText = taskInput.value.trim();
    if (taskText !== '') {
        const listItem = document.createElement('li');
        listItem.innerHTML = `
            <span>${taskText}</span>
            <button onclick="deleteTask(this)">حذف</button>
        `;
        listItem.addEventListener('click', toggleComplete);
        taskList.appendChild(listItem);
        taskInput.value = ''; // مسح حقل الإدخال
    }
}

function toggleComplete() {
    this.classList.toggle('completed');
}

function deleteTask(button) {
    const listItem = button.parentNode;
    taskList.removeChild(listItem);
}

الشرح:

  • الحصول على العناصر: نستخدم document.getElementById للحصول على مراجع لعناصر HTML التي نحتاجها للتفاعل معها (حقل الإدخال، الزر، القائمة).
  • إضافة مستمع حدث لزر الإضافة: عند النقر على الزر addTaskBtn، يتم استدعاء الدالة addTask.
  • إضافة مستمع حدث لحقل الإدخال (عند الضغط على Enter): عند الضغط على مفتاح Enter داخل حقل الإدخال، يتم استدعاء الدالة addTask.
  • الدالة addTask():
    • تحصل على النص الموجود في حقل الإدخال باستخدام taskInput.value وتقوم بإزالة المسافات البيضاء الزائدة باستخدام trim().
    • تتحقق مما إذا كان النص ليس فارغًا.
    • تقوم بإنشاء عنصر قائمة جديد () باستخدام document.createElement('li').
    • تقوم بتعيين محتوى العنصر باستخدام innerHTML. يتضمن نص المهمة وزر "حذف" مع استدعاء للدالة deleteTask عند النقر عليه. لاحظ استخدام this داخل الدالة للإشارة إلى الزر الذي تم النقر عليه.
    • تضيف مستمع حدث للنقر على عنصر القائمة لاستدعاء الدالة toggleComplete عند النقر على المهمة نفسها (لتحديدها كمكتملة).
    • تضيف عنصر القائمة الجديد إلى قائمة المهام باستخدام taskList.appendChild(listItem).
    • تقوم بمسح حقل الإدخال باستخدام taskInput.value = '';.
  • الدالة toggleComplete():
    • يتم استدعاؤها عند النقر على عنصر القائمة.
    • تستخدم this.classList.toggle('completed') لإضافة أو إزالة الكلاس completed من عنصر القائمة. هذا الكلاس يُستخدم في ملف style.css لتطبيق تنسيق خاص على المهام المكتملة.
  • الدالة deleteTask(button):
    • تأخذ مرجعًا للزر الذي تم النقر عليه كمعامل.
    • تستخدم button.parentNode للحصول على عنصر القائمة (
    • ) الذي يحتوي على الزر.
    • تزيل عنصر القائمة من قائمة المهام باستخدام taskList.removeChild(listItem).

أمثلة برمجية قابلة للتنفيذ:

يمكنك الآن نسخ هذه الأكواد وحفظها في ثلاثة ملفات منفصلة بنفس الأسماء (index.html, style.css, script.js) في مجلد واحد. ثم افتح ملف index.html في متصفح الويب الخاص بك. سترى تطبيق قائمة المهام البسيط الذي قمنا بإنشائه. يمكنك إضافة مهام جديدة، والنقر عليها لتحديدها كمكتملة، والنقر على زر "حذف" لإزالتها.

شرح كيفية نشر التطبيق (إذا أمكن)

نشر تطبيق ويب بسيط مثل هذا يعتمد على أنه تطبيق "واجهة أمامية" فقط (Front-End). هذا يعني أنه لا يتطلب خادمًا خلفيًا (Back-End) أو قاعدة بيانات. إليك بعض الطرق السهلة لنشره:

  • GitHub Pages: إذا كان لديك حساب على GitHub، يمكنك إنشاء مستودع جديد، ورفع هذه الملفات إليه، ثم تفعيل GitHub Pages للمستودع. سيوفر لك GitHub عنوان URL مجاني لتطبيقك. هذه طريقة شائعة وسهلة للمشاريع الصغيرة.
  • Netlify Drop: توجه إلى موقع Netlify، واسحب وأفلت مجلد المشروع (الذي يحتوي على الملفات الثلاثة) في منطقة السحب والإفلات. سيقوم Netlify بنشر تطبيقك تلقائيًا وسيزودك بعنوان URL.
  • Vercel: مشابه لـ Netlify، Vercel يوفر طريقة سهلة لنشر تطبيقات الواجهة الأمامية.

لماذا هذا يساعد في تحقيق الدخل؟

المشاريع العملية مثل هذه لها قيمة كبيرة لعدة أسباب، خاصة فيما يتعلق بتحقيق الدخل:

  • تطبيق المعرفة: مجرد قراءة المفاهيم لا يكفي. بناء المشاريع يجعلك تطبق ما تعلمته عمليًا، مما يعزز فهمك ويجعله راسخًا.
  • بناء ملف أعمال (Portfolio): عندما تتقدم لوظائف تطوير الويب أو تعمل كمستقل، فإن وجود مجموعة من المشاريع العملية التي قمت ببنائها يثبت مهاراتك بشكل أفضل من مجرد سرد المفاهيم التي تعرفها. يمكنك عرض هذه المشاريع على ملفك الشخصي على الإنترنت أو على منصات العمل الحر.
  • إظهار القدرة على حل المشكلات: أثناء بناء المشاريع، ستواجه تحديات وأخطاء. القدرة على تتبع هذه الأخطاء وإصلاحها هي مهارة أساسية يبحث عنها أصحاب العمل والعملاء.
  • جذب القراء والعملاء: كتابة مقالات حول مشاريع عملية مثل هذه تجذب القراء المهتمين بتعلم تطوير الويب. هذا يمكن أن يؤدي إلى بناء جمهور، فرص عمل، أو حتى دخل من الإعلانات أو التسويق بالعمولة.
  • زيادة الثقة بالنفس: إكمال مشروع بنجاح يمنحك شعورًا بالإنجاز ويعزز ثقتك بقدراتك، مما يشجعك على تعلم المزيد وبناء مشاريع أكبر وأكثر تعقيدًا.

الخلاصة

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

التسميات:
author

jistweb

مدونة جيست ويب هي مدونة متخصصة في مجال الربح من التدوين واحتراف السيو. تهدف هذه المدونة إلى تزويد القراء بالمعلومات والموارد اللازمة لتحقيق النجاح في مجال التدوين وتحسين محركات البحث (SEO) للمواقع على الإنترنت.

أحدث أقدم
مشاركة في التطبيقات الأخرى
نسخ رابط المشاركة

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