Mustafa Suleiman

رمز الخطأ 9009 مفاده أن الأمر python لا يتم التعرف عليه في محرر الأكواد vscode، لاحظ رسالة التنبيه الظاهرة في الشريط السفلي على اليمين باللون الأصفر Select Interpreter والخاصة باختيار مُفسر اللغة الذي يقوم بقراءة الأكواد وترجمتها. وحاليًا لم تقم بتحديد أي مُفسر للغة بايثون، لذا اضغط على Select Interpreter ثم اختر مُفسر بايثون الذي ستجد بجانبه كلمة Recommended أو Global. وذلك في حال أنك قمت بالفعل بتثبيت بايثون على حاسوبك، وإن لم تقم إليك رابط التحميل: https://www.python.org/ftp/python/3.11.0/python-3.11.0-amd64.exe

لست بحاجة إلى كتابة كل شيء، فقط النقاط المهمة كمرجع عند الحاجة، وكذلك النقاط التي تجد بها نقطة ضعف أو تنساها بسرعة. أي لو تُفضل التدوين، فالهدف هو بناء مرجع شخصي، ترسيخ المفاهيم، واكتشاف الفجوات، لا تسجيل كل كلمة. لكن لا أُفضلها، فالدورة متاحة لك لمراجعتها متى تريد، دون فقط النقاط الأساسية والأسئلة التي لم تفهمها بعد، ثم عد للدرس لاحقًا متى أردت. عامًة كل شخص له طريقته المناسبة في الدراسة، فقم بتقسيم الدرس إلى حصص من 5–7 دقائق وعند إنتهاء كل حصة أوقف الفيديو، واكتب مما استوعبته 3 إلى 5 نقاط أساسية، والتوقيتات الخاصة بتلك النقاط في الدرس في حال كان طويل، أيضًا لو هناك جزئية لا تستوعبها تستطيع السؤال، أو كتابة ملاحظة بالدرس الذي أنت بحاجة لمراجعته. ثم جرب تعديل الكود أو حل تمرين صغير لتختبر نفسك، ثم انتقل للحصّة التالية، وبعد انتهاء الدرس كاملًا ألقِ نظرة سريعة على ملاحظاتك، وفي حال مختصرة ومنطقية انتقل للدرس التالي وإلا اختصرها أكثر أو أضف أمثلة.

تحتاج إلى استيعاب ما هو الـ DOM وكيف تتلاعب جافاسكريبت به، ببساطة أنت تربط عنصر HTML سواء عن طريق الكلاس، أو الـ ID، أو اسم الـ Tag أي العنصر بالجافاسكريبت فقط عندما تحتاج إلى التفاعل مع ذاك العنصر بشكل ديناميكي. أي في حال مثلاً تريد تغيير نص عنصر عند النقر على زر، إخفاء أو إظهار قائمة عند مرور الفأرة فوقها، إضافة أو إزالة عنصر من الصفحة بعد تحميلها، التحقق من صحة البيانات في حقل إدخال قبل إرسال النموذج أو تريد تغيير لون عنصر بناءًا على إجراء معين. لكن لو لدينا عنصر <p> يعرض نص ثابت لا يتغير أبدًا فلا حاجة لربطه، أو لديك كلاس CSS اسمه .main-title يُستخدم فقط لتنسيق العنوان من خلال ملف CSS، ولا توجد أي نية لتغييره عبر الجافاسكريبت. أي الكلاس في HTML له وظيفتان أساسيتان، الأولى التنسيق باستهدافه من خلال CSS لتطبيق الأنماط، والثانية التحديد باستهدافه من خلال جافاسكريبت للتحكم فيه والتلاعب به. وذلك يتم عبر الـ DOM لتستوعبه، تخيل أن ملف الـ HTML ا هو مخطط بناء لعمارة سكنية مثلاً، وعند تشغيله في المتصفح، فهو لا يقرأه كنص عادي فقط، بل يقوم ببناء نموذج حي وتفاعلي من ذلك المخطط ووضعه في الذاكرة. بالتالي الـ DOM هو تمثيل هيكلي على شكل شجرة لمستند الـ HTML، فكل شيء في صفحة الويب من العناصر <p> و<div>، السمات مثل class و src، والنصوص يصبح جزءًا من الشجرة. والجافاسكريبت لا تستطيع قراءة أو تعديل ملف الـ index.html الأصلي مباشرة، بل المتصفح هو ما يمنح الجافاسكريبت واجهة برمجية API للوصول إلى شجرة الـ DOM التي بناها، وهنا يأتي دور الكلاس والـ ID، لكون جافاسكريبت تحتاج إلى عنوان لتجد العنصر الذي تريد التلاعب به.

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

عليك بعرض التخصصات بطريقة تسهل المقارنة والاختيار، عن طريق تصميم بطاقات تفاعلية، ابحث عن cards ui، بالإضافة إلى جدول للمقارنة السريعة يسمح بمقارنة حتى 4 تخصصات جنبًا إلى جنب، وتوفير معايير المقارنة من حيث التكلفة، المدة، فرص العمل، متطلبات القبول، وأضف ميزة تصدير المقارنة كـ PDF أو مشاركتها. والتصنيف الهرمي هو الأفضل، بمعنى اعرض المجالات الرئيسية ثم الكليات ثم التخصصات، واستخدام مؤشرات بصرية بما في ذلك أيقونات ملونة، شارات خاصة بالأكثر طلباً أو الجديد. ومعلومات أساسية فورية توضح المدة، التكلفة التقريبية، نسبة التوظيف، مع زر أضف للمفضلة للحفظ والمراجعة لاحقًا. بالنسبة للفلاتر والبحث الذكي، فالأفضل توفير كليهما، فالبحث للاستعلامات السريعة مثل صيدلة عين شمس، أما الفلاتر للاستكشاف في حال عندما لا يعلم الطالب ما يريد بالضبط. وأضف ميزة حفظ عمليات البحث للعودة إليه لاحقًا، ويا حبذا لو قمت بتضمين الذكاء الاصطناعي لتوفير اقتراحات بناءًا على سلوك المستخدم أو معلوماته وتفضيلاته. في القسم الأول عنوان رئيسي يوضح القيمة أو هدف المنصة ووصف مختصر، ثم شريط بحث مركزي وواضح وأزرار للإجراءات الرئيسية، والتصنيفات السريعة. ثم قسم الأكثر بحثاً وبه أفضل 6-8 تخصصات مطلوبة مع تحديث ديناميكي حسب الموسم، وقم بعرض أسئلة لتوجيه الزائر بمعنى زر لست متأكداً من اختيارك؟ 2 أجب عن 5 أسئلة بسيطة لنساعدك. ثم قسم عرض الإحصائيات الحية مثل +15,000 طالب استخدموا الموقع 150+ جامعة مسجلة 500+ تخصص متاح. وقسم آخر التحديثات به مواعيد التقديم القادمة، تغييرات في شروط القبول ومنح دراسية جديدة. ثم قسم تقييمات أو آراء الطلاب، مثلاً ساعدني الموقع في اختيار تخصص الهندسة المدنية، أحمد، طالب بجامعة القاهرة. واهتم بالتخصيص الشخصي، بمعنى عرض رسالة مثل مرحباً أحمد، إليك تخصصات قد تهمك، وحفظ التفضيلات والبحث السابق وتنبيهات لمواعيد التقديم، وضع في اعتبارك أنّ % من المستخدمين يستخدمون الهاتف. كذلك فيديوهات توضيحية قصيرة.

عليك بتوجيه الأداة لاستخدام Intl.DateTimeFormat API المتاحة في المتصفح، وبمثال بسيط ستكتب السكريبت التالي: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="dual-calendar-container"> <p class="gregorian-date"></p> <p class="hijri-date"></p> </div> <script> document.addEventListener('DOMContentLoaded', function() { const today = new Date(); const gregorianOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; const gregorianDateFormatter = new Intl.DateTimeFormat('ar-EG', gregorianOptions); const gregorianDateString = gregorianDateFormatter.format(today); const hijriOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', }; const hijriDateFormatter = new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura', hijriOptions); const hijriDateString = hijriDateFormatter.format(today); const container = document.getElementById('dual-calendar-container'); if (container) { container.querySelector('.gregorian-date').textContent = `الميلادي: ${gregorianDateString}`; container.querySelector('.hijri-date').textContent = `الهجري: ${hijriDateString}`; } }); </script> </body> </html>

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

الأمر يعتمد على ظروفك الشخصية، هل أنت بحاجة إلى العمل عما قريب؟ في حال لديك وقت كافي وعمرك صغير ولا تحتاج إلى العمل بأسرع وقت، فالأفضل دراسة دورة علوم الحاسوب بشكل كامل، وذلك للتأسيس في مجال البرمجة بشكل جيد. وفي حال ليس لديك وقت، فبحد أدنى ستحتاج إلى دراسة المسارات التالية في دورة علوم الحاسوب للاستعداد لدراسة دورة PHP: مدخل إلى علوم الحاسوب أساسيات البرمجة قواعد البيانات إلى عالم الويب أساسيات هندسة البرمجيات إعادة تصميم البرمجيات Refactoring وبقية المسارات تستطيع العودة إليها لاحقًا ودراستها. وكذلك ستحتاج إلى دراسة HTML و CSS وقد ذكرت أنك قمت بذلك بالفعل.

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

لتحقيق نتيجة أفضل في ذلك المجال يجب دراسة بعض أساسيات الرياضيات المستخدم في الخوارزميات مثل الاحتمالات والإحصاء، الجبر الخطي و التحليل الرياضي والتفاضل والتكامل. فمجال تعلم الالة يستخدم بشكل مكثف الرياضيات بفروعها الاربعة الجبر الخطي والتفاضل والاحتمالات والاحصاء لحل العديد من المشكلات التي تصنف علي انها regression - classification - clustering - collaborative filtering بجانب evaluating error and optimization يستخدم التفاضل بكثرة. ويكفي تعلم الأساسيات فقط بالبحث على اليوتيوب مثلاً وتستطيع الاستزادة فيما بعد. للتوضيح أكثر: تحتاج فقط أساسيات ال calculus، يكفي كبداية أن تعرف مفاهيم المشتقات، التكامل ليس مهمًا جدًا في البداية و باستطاعتك إهماله. الجبر الخطي مهم جداً بالطبع، يفضل أن يكون لديك إطلاع على المفاهيم الأساسية به و هي: الأشعة و الفضاء الشعاعي، العمليات على الفضاء الشعاعي، الاستقلال و الارتباط الخطي و الأشعة الأساسية basis و القيم و الأشعة الذاتية eigen values, eigen vectors. أما بالنسبة للإحصاء و الاحتمالات يجب عليكِ معرفة القوانين الأساسية في الاحتمالات و التوزيعات الاحتمالية الشهيرة. ويجب عليك معرفة الأساسيات في كل تلك المجالات و فهم مجال واحد بينها غير كافي نهائياً لكي تبدأ بالمجال، و لكن بالطبع حاول أن تتعلم الأساسيات فقط في البداية و بعد أن تتعلم القليل من تعلم الآلة يمكنك العودة و دراسة المزيد من الرياضيات عند الحاجة. لأنه و ببساطة يمكنك تخيل أي شبكة عصبونية على أنها تابع يقوم بتحويل الدخل ضمن فضاء شعاعي عن طريق عمليات خطية و أخرى غير خطية، و خرج هذه الشبكة عادة يكون عبارة عن توزع احتمالي على القيم الممكنة، و طريقة تدريب الشبكة تعتمد على خوارزمية هي gradient descent و التي يجب عليك معرفة أساسيات ال calculus لفهمها. لكن كما ذكرت لك لا تتعمق جداً في الرياضيات قبل البدء في تعلم الآلة، الأساسيات فقط ثم ابدء، و عندما تجد الحاجة لتوسيع فهمك في شيء ما قم بذلك، حيث أن الرياضيات علم واسع جداً و من المستحيل تعلمه كله، فيجب عليك معرفة ما تحتاجه ثم دراسته.

عذرًا على إنزعاجك أنس، أتفهم شعورك بالطبع وسيتم إيصال ملاحظاتك لإدارة الأكاديمية، في الوقت الحالي أرجو تصفح الأكاديمية بسرعة 3G، اضغط على F12 لفتح نافذة أدوات المطور ثم اختر تبويب Network ثم اختر 3G من هنا: أبقي تلك النافذة مفتوحة أثناء تصفح الأكاديمية، وتستطيع تصغيرها، وعند مشاهدة الدروس ستجد الجودة 540

ستجد أسفل فيديو الدرس في نهاية الصفحة صندوق تعليقات كما هنا، أرجو طرح الأسئلة أسفل الدرس وليس هنا في قسم أسئلة البرمجة حيث نطرح الأسئلة العامة الغير متعلقة بمحتوى الدورة أو الدرس، وذلك لمساعدتك بشكل أفضل. عامًة، النقطة تعني أي حرف واحد بالضبط، باستثناء علامة رأس السطر الجديد، وذلك يشمل الحروف الأبجدية (a-z, A-Z) والأرقام 0-9، والمسافات، والرموز الخاصة مثل !@#$%^&*() وغيرها. بالتالي الشيء الوحيد الذي لا تطابقه بشكل افتراضي هو حرف السطر الجديد n\ لاحظ لو أردنا مثلاً البحث عن حرف c يليه أي حرف ثم t، فسنكتب التالي: import re pattern = r"c.t" texts = ["cat", "cot", "c@t", "c t", "act", "ct", "c\nt"] for text in texts: match = re.search(pattern, text) print(f"Text '{text}': {'Match' if match else 'No match'}: {match.group() if match else ''}")

بالطبع آمن تمامًا، وهي المنصة الأساسية حاليًا لحفظ الكود المصدري الخاص بمشاريع البرمجة حاليًا ومتابعة التغييرات التي تجريها على المشروع وإدارتها. وهناك نوعان رئيسيان من المستودعات، الأول هو العام public، وأي شخص في العالم يستطيع رؤية الكود وتحميله أي عمل clone، أو نسخه fork، وهو مخصص للمشاريع مفتوحة المصدر أو المشاريع التي تريد عرضها في معرض أعمالك. أي هو غير آمن إطلاقاً لوضع كود خاص بشركة، أو مشروع تجاري، أو أي معلومات حساسة مثل كلمات المرور، مفاتيح API أو معلومات المستخدمين. بينما النوع الثاني هو private أي خاص وأنت فقط من يستطيع رؤية الكود والوصول إليه، أو دعوة أشخاص محددين وهم المساهمون collaborators للوصول إلى الكود والمساهمة فيه. وذلك هو الخيار الآمن والمناسب للمشاريع الخاصة، التجارية، أو أي كود لا تريد أن يطلع عليه أحد. بالتالي لا تستطيع منع المساهمين من رؤية الكود المصدري، بل سيرى كامل المشروع، ولا توجد طريقة تقنية تمنع شخص لديه صلاحية الوصول للكود من نسخه، كل ما تستطيع فعله تقنيًا هو عند إضافته، قم بتحديد مستوى صلاحياته إلى Write أي كتابة، وهي كافية ليقوم بعمله، ولا تعطيه صلاحية Admin إلا إن كنت تثق به تمامًا. على الجانب القانوني اطلب منه التوقيع على اتفاقية NDA قانونية تمنعه من استخدام الكود، أو مشاركته، أو الادعاء بأنه ملكه، و ستعطيك الحق قانونيًا لمقاضاته في حال سرق الكود، ويوجد إيجاد قوالب جاهزة لتلك الاتفاقية على الإنترنت.

ستجد أسفل فيديو الدرس في نهاية الصفحة صندوق تعليقات كما هنا، أرجو طرح الأسئلة أسفل الدرس وليس هنا في قسم أسئلة البرمجة حيث نطرح الأسئلة العامة الغير متعلقة بمحتوى الدورة أو الدرس، وذلك لمساعدتك بشكل أفضل. عامًة الموقع يعمل بشكل سليم، وها هو الرابط: https://regexr.com/ في حال لا يعمل لديك فربما السيرفر الخاص به محجوب من قبل مزود خدمة الإنترنت لديك، قم بتجربة تحميل إضافة VPN للمتصفح وتشغيلها ثم تصفح الموقع: VPN Free - Betternet Unlimited VPN Proxy

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

لا يتم تشغيل الملف بشكل صحيح، بل تقوم بكتابة أمر تشغيل الملف mb.py داخل بيئة REPL والتي تستقبل كود بايثون فقط. الأمر التالي نكتبه في منفذ الأوامر terminal مباشرًة: py mb.py لكن لتجنب الكثير من المشاكل في بداية تعلمك، الأسهل لك تثبيت إضافة بايثون في vscode من خلال التالي: https://marketplace.visualstudio.com/items?itemName=ms-python.python ثم التوجه للملف mb.py وحفظ الكود الذي به لاحظ يوجد علامة بيضاء بجانب اسم الملف تعني أنّ الكود لم يتم حفظه، اضغط على CTRL + S للحفظ. ثم ستجد أعلى اليمين علامة < اضغط عليها لتشغيل الكود الذي في الملف وستجد النتيجة في منفذ الأوامر مباشرًة.

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

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

أنت تقصد دورة الذكاء الاصطناعي، لا مشكلة في ذلك، لكن ستحتاج إلى دراسة مسار التعامل مع البيانات الذي يسبق مسار تحليل البيانات، حيث سيتم به شرح كيفية الحصول على البيانات من مصادر مختلفة مثل قواعد البيانات وملفات CSV و Excel وكيفية التعامل معها. بعد ذلك تستطيع دراسة الدورة بنفس ترتيب المسارات التي بها.

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

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

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

نسخة الـ ISO الخاصة بويندوز 7 غير متاحة بشكل رسمي على موقع مايكروسوفت لكون النظام تم إيقاف دعمه منذ سنوات، تستطيع تحميله من هنا: https://archive.org/details/en_windows_7_ultimate_with_sp1_x64_dvd_u_677332_202006 ثم الضغط على رابط ISO IMAGE التالي وسيتم التحميل: وبالنسبة لخطوات التثبيت على VIRUTAL BOX ستجدها هنا:

مناسب لا مشكلة به، لكن قم بتقسيمه إلى مراحل صغيرة جدًا كما أخبرتك من قبل هنا: فلا ضرر من البدء بمشروع الـ CRUD مباشرًة، فهو ليس بمشروع مُعقد، بل 4 مشاريع صغيرة مدمجة معًا، الصعوبة هي في ربطهم ببعضهم البعض لكي يعمل منطق المشروع بشكل سليم. وستحتاج إلى استيعاب التالي قبل تنفيذه: المتغيرات let, const. أنواع البيانات الأساسية Strings, Numbers, Booleans. كيفية إنشاء مصفوفة وكيفية إضافة وحذف عنصر كيفية إنشاء كائن واستدعاء خصائصه. كيفية كتابة واستدعاء دالة. أساسيات التعامل مع الـ DOM: document.querySelector() أو getElementById() لاختيار عنصر. addEventListener() للاستماع للأحداث (خصوصاً click و submit). element.value لقراءة القيمة من حقل إدخال. element.innerHTML أو textContent لتغيير محتوى عنصر. لو واجهت صعوبة قم بتنفيذ مشاريع أبسط وتم ذكرها في النقاش السابق بالأعلى.

منطق الكود ككل هو توفير واجهة بسيطة لإنشاء منتجات وحفظها محليًا، مع إمكانية عرض الإجمالي بشكل ديناميكي، أي مناسب لمشروع خاص بتطبيقات مثل إدارة المخزون أو قوائم المنتجات في متجر صغير. الجزء التالي ما هو إلا استخدام الـ DOM للوصول لعناصر معينة في الصفحة عن طريق المعرفات ID الخاصة بها، وبالطبع نستطيع الوصول عن طريق الكلاس وخلافه، وتخزين في متغيرات واستخدامها لاحقًا في الكود لقراءة القيم المدخلة من خلال خاصية .value أو تحديث محتوى العنصر من خلال .innerHTML أو تغيير تنسيقه كالتالي .style.background let title = document.getElementById('title'); let price = document.getElementById('price'); let taxes = document.getElementById('taxes'); let ads = document.getElementById('ads'); let discount = document.getElementById('discount'); let count = document.getElementById('count'); let category = document.getElementById('category'); let total = document.getElementById('total'); let btnCreate = document.getElementById('btnCreate'); والجزء التالي خاص بمنطق حساب الإجمالي اعتمادًا على القيم المدخلة في حقول السعر price، الضرائب taxes، الإعلانات ads، والخصم discount، وذلك لتوفير توضيحات فورية للمستخدم حول الإجمالي بناءًا على المدخلات، مع تحسين تجربة المستخدم من خلال تغيير الألوان. function getTotal(){ if(price.value != ''){ let result = (+price.value + +taxes.value + +ads.value) - +discount.value; total.innerHTML = result; total.style.background = 'green'; }else{ total.innerHTML = ''; total.style.background = 'red'; } } والجزء التالي لإدارة البيانات عن طريق التخزين المحلي في المتصفح localStorage وذلك لضمان استمرارية البيانات بين زيارات المستخدم حتى بعد إغلاق المتصفح، مع توفير تهيئة بمصفوفة فارغة في لم تكن هناك بيانات مخزنة مسبقًا. let dataPro; if(localStorage.product != null){ dataPro = JSON.parse(localStorage.product) }else{ dataPro = []; } والجزء المتعلق لإنشاء منتج جديد وحفظه عند النقر على زر الإنشاء الذي خزناه في متغير باسم btnCreate، ثم حفظ المنتج في التخزين المحلي. btnCreate.onclick = function(){ let newPro = { title: title.value, price: price.value, taxes: taxes.value, ads: ads.value, discount: discount.value, total: total.innerHTML, count: count.value, category: category.value } dataPro.push(newPro) localStorage.setItem('product', JSON.stringify(dataPro)) console.log(dataPro) } الأمر كله يعتمد على التلاعب بالـ DOM، ستتضح لك الكثير من الأمور بعد قراءة التالي: