Mustafa Mahmoud7

يعتمد الاختيار بين PHPوPython وNode.js على متطلبات مشروعك المحددة والنظام البيئي الذي تعمل فيه. PHP تُستخدم بشكل شائع لتطوير الويب وهي معروفة ببساطتها وسهولة استخدامها ورائعة لتطوير الويب وتتكامل بشكل جيد مع مجموعة متنوعة من خوادم الويب وقواعد البيانات وأنظمة إدارة المحتوى. أطر العمل الأشهر لبي اتش بي { Laravel - CodeIgniter } بايثون هي لغة متعددة الاستخدامات مع تركيز قوي على سهولة القراءة والبساطة، مما يجعلها مناسبة لمختلف التطبيقات بما في ذلك خوادم الويب، وتحليل البيانات، والذكاء الاصطناعي. أطر العمل الأشهر لبايثون { Django - flask } جافاسكربت (Node.js) هي بيئة تشغيل تسمح لك بتشغيل JavaScript على الخادم، مما يجعلها خيارًا شائعًا لإنشاء تطبيقات قابلة للتطوير. دعم قوي للتطبيقات في الوقت الفعلي: إذا كنت تقوم بإنشاء تطبيق في الوقت الفعلي (مثل الدردشة أو اللعبة)، فإن Node.js يعد خيارًا رائعًا. إن هندستها المستندة إلى الأحداث مناسبة تمامًا لتطبيقات الوقت الفعلي، خاصة تلك التي تتطلب WebSocket للاتصال مزدوج الاتجاه. أطر العمل الأشهر لنود جي اس { NestJS - Express js } كل لغة واطار عمل يعتمد على المشروع الذى تريد عمله بهذه اللغة لكل منهم ايجابيات وسلبيات ويعتمد هل أنت محترف أم أنت في بداية تعلمك للبرمجة. للمزيد اطلع على هذه المقالات لتعرف أكثر عن الفرق بين تقنيات الواجهة الخلفية المختلفة

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

هذا بسبب أن الدالة () merge تأخذ عناصر مصفوفتين مرتبتين وتدمجهم وتعطي لنا مصفوفة واحدة مرتبة مكونة من عناصر المصفوفتين. ()firstnumbers.begin: المؤشر الذي يشير إلى العنصر الأول في مصفوفة firstnumbers. سيتم بدء عملية الدمج من هذا الموقع في المصفوفة الأولى. ()firstnumbers.end : المؤشر يشير إلى موقع بعد العنصر الأخير في مصفوفة firstnumbers. يمثل هذا نهاية المدى الذي سيتم دمجه في المصفوفة الأولى. ()secondnumbers.begin : المؤشر يشير إلى العنصر الأول في مصفوفة secondnumbers. سيتم بدء عملية الدمج من هذا الموقع في المصفوفة الثانية. ()secondnumbers.end : المؤشر يشير إلى موقع بعد العنصر الأخير في مصفوفة secondnumbers. يمثل هذا نهاية المدى الذي سيتم دمجه في المصفوفة الثانية. ()total.begin : المؤشر يشير إلى الموقع الذي سيبدأ فيه تخزين العناصر المدموجة. بمجرد دمج العناصر، سيتم تخزينها في المصفوفة total ابتداءً من هذا الموقع.

عملية رفع الموقع لا تتم على جوجل ولكن تتم على استضافة تستضيف موقع سواء مجانية أو مدفوعة فلكى تتم عملية الرفع - عليك حجز اسم الموقع النطاق الخاص بك مثل (www.example.com) نطاق مدفوع عند الذهاب لهذا النطاق يتم الوصول للموقع الخاص بك. - عليك الاشتراك في استضافة سواء مجانية أو مدفوع لكى ترفع الموقع عليه ويكون متاح دائما. - بعد ذلك عليك ربط الاستضافة بالنطاق الخاص بك لكي يتم الوصل لموقعك عن طريق النطاق. - يوجد مثلا بعض المواقع التى تقدم الخدمة المدفوعة شراء دومين واستضافة مثل جودادى أو هوستنجر ويمكنك بالطبع شراء النطاق من موقع وشراء الإستضافة من موقع أخر ويتم الربط بعد ذلك. -يوجد بعض المواقع تقدم الاستضافة المجانية مثل netlify أو vercel وتعطيك اسم تحت اسمهم مثل(vercel.app.الاسم الخاص بك) قبل عملية الرفع عليك الاهتمام بال SEO تحسين محركات البحث لكى يظهر موقعك فى نتائج متقدمة على جوجل للمزيد انظر هذه المقالات لكى تتضح الصورة أكثر

ال closure (الإغلاق) : يشير هذا المصطلح الى أنه يمكن للدوال الداخلية الوصول إلى المتغيرات بداخل نطاق الدوال الخارجية حتى بعد الانتهاء من تنفيذ الدالة الخارجية. ده مثال بسيط function outer() { const b = 50; function inner() { const a = 100; console.log(`a is ${a} and b is ${b}, the sum is ${a + b}`); } return inner; } const fnFirst = outer(); // هنا تم تنفيذ الدالة الخارجية وانتهت وكل متغير داخلها أصبح غير موجود ونتيجتهاارجاع الدالة الداخلية بالطبع أخذت حق الوصول إلى القيمة b fnFirst() //هنا تم تنفيذ ما بداخل الدالة الداخلية بالرغم من أن المتغير لم يعد موجود //بعدالاستدعاء سيتم طباعة a is 100 and b is 50, the sum is 150 ولكن فيما يفيدنا في الحقيقة ويتم توفيره لنا مثال مفيد أكثر يوضح لما نستخدم الclosure في هذا المثال هنا استدعينا الدالة في كل مرة اريد تنفيذ الدالة بنفس المعاملات في أى مكان ارسل لها المعاملات function greeting(firstName, lastName) { var message = "Hello " + firstName + " " + lastName + "!"; console.log(message); } greeting("Billy", "Bob"); //Hello Billy Bob! greeting("Billy", "Bob"); //Hello Billy Bob! greeting("Billy", "Bob"); //Hello Billy Bob! greeting("Luke", "Schlangen");//Hello Luke Schlangen! greeting("Luke", "Schlangen");//Hello Luke Schlangen! greeting("Luke", "Schlangen");//Hello Luke Schlangen! ولكن مع الclosure يوفر لنا اننا ننفذ الدالة الخارجية ونرسل لها المعاملات ويتم الوصول له بالدالة الداخلية. function greeting(firstName, lastName) { var message = "Hello " + firstName + " " + lastName + "!"; return function() { console.log(message); } } var greetingBilly = greeting("Billy", "Bob"); var greetingLuke = greeting("Luke", "Schlangen"); greetingBilly();//Hello Billy Bob! greetingBilly();//Hello Billy Bob! greetingBilly();//Hello Billy Bob! greetingLuke();Hello Luke Schlangen! greetingLuke();Hello Luke Schlangen! greetingLuke();Hello Luke Schlangen! مثال أخر يبين أنه بعد تنفيذ الدالة الخارجية وانتهائها والوصول للمتغير b نستطيع أن نتحكم في b بالرغم من انتهاء الدالة الخارجية function outer() { const a = 10; let b = 100; function inner() { let c = 20; console.log(`a=${a}, b=${b}, c=${c}`); b++; c++; } return inner; } const fnFirst = outer();//تم استدعاء الدالة الخارجية ونتيجة تم تخزينها في fnFirst const fnSecond = outer();// تم استدعاء الدالة الخارجية مرة أخري ونتيجة تم تخزينها في fnFirst fnFirst(); // نتيجة الاستدعاء لأول مرة a=10, b=100, c=20 fnFirst(); // نتيجة الاستدعاء لثانى مرة وزيادةb a=10, b=101, c=20 fnFirst(); // نتيجة الاستدعاء لثانى مرة وزيادةb a=10, b=102, c=20 fnSecond(); // نتيجة الاستدعاء لأول مرة a=10, b=100, c=20 نلاحظ أن في كل مرة يتم استدعاء fnFirst بعد المرة الأولي يتم زيادة b ولكن لايتم زيادة c لأنه يعاد تعريفه مرة أخري نلاحظ ايضا عند استدعاء fnSecond لأول مرة يطبع b=100 لأنه أيضا أخذ حق الوصول لb من الدالة الخارجية

ما فهمته أنك تريد اضافة الكلمة بعد عملية الانتقال لصفحة المقال العشوائي بإمكانك اضافة الكلمة بطريقة نصية بعد الانتقال إلي الصفحة window.addEventListener("load", function () { if (!window.location.href.includes("?abdo")) { window.location.href += "?abdo"; } }); ويكون هذا الكود داخل صفحة المقال العشوائي سيتم إضافته بعد تحميل الصفحة ولكن إذا كنت تريد إضافته قبل عملية الإنتقال للصفحة ولابد أن يكون في الرابط لكى تتم عملية تحميل المقال بإمكانك اضافة الكلمة بالدالة `replace` كما أشار أخى ياسر أو استخدام الطريقة النصية بالطريقة النصية قبل عملية الإنتقال للصفحة تكون كالأتى function showLucky(e) { var t = e.feed; var n = t.entry || []; var r = t.entry[0]; for (var i = 0; i < r.link.length; ++i) { if (r.link[i].rel == "alternate") { var href = r.link[i].href; href += "?abdo"; window.location.href = href; } } } }

يوجد العديد من المواقع تسمح لنا بانشاء مواقع بدون كتابة أكواد مثل ووردبريس أو ويكس أو wappler مميزاتها : 1 - بانشاء الموقع بسرعة بدون كتابة الاكود فقط سحب وافلات. 2 - تدعم الكثير من القوالب الجاهزة وتختار منها كما تريد سواء مدفوعة أو مجانية. 3 - تدعم الكثير من الإضافات التى تجعلك تزيد من امكانيات ومميزات الموقع. 4 -الوردبريس مثلا جيد جدا في تحقيق ترتيب مرتفع بمحركات البحث. 5 -توفير الوقت فى انشاء الموقع والمال لتوفير العديد من المبرمجين. سلبياتها: 1 - بطئ الموقع فى بعض من الأحيان بسبب الاضافات التى تم تثبيتها لإضافة بعض المميزات لموقعك. 2 - التعديل ليس سهلا فأنت محدود بالقالب الجاهز والإضافة التى تستخدمها. 3 - الكود الذي يتم انتاجه بهذه الأدوات أحيانا يكون زائد بكثير مما نستخدمه يؤدى إلى انخفاض أداء الموقع بدون داعي. فى كل الأحوال هذه المواقع قد تكون مناسبة للمواقع الصغيرة والمتوسطة ذات التكلفة المنخفضة لانتاج مشروع بجودة متوسطة ولا يتم التعديل عليه كثيرا في المستقبل.

المصادر المجانية لإطار العمل flask باللغة العربية المجانية تعتبر قليلة ولكن عليك بالبحث عن (اطار العمل flask) ستجد بعض الفديوهات المجانية التى تعتبر كمدخل جيد لهذا الإطار لمعرفة خصائصه ومكوناته وفيما سيفيدك للمزيد اطلع على هذا المقال

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

العمل الحر: هو عبارة عن نوع معين من العمل حيث لا يقوم فيه العامل المستقل بالالتزام طويل الأجل مع جهة عمل بعينها مثل الموظف التقليدي، بل يقوم بالعمل على مشروعات مختلفة مع جهات مختلفة، والعائد المادي فيه يكون محسوباً بالساعة، أو كمبلغ ثابت مقابل اتمام مهمة معينة. قائمة مختصرة بأهم وأشهر المجالات في سوق العمل الحر: البرمجة: وهو المجال المرتبط بتطوير مواقع الويب وتطبيقات الهواتف الذكية، وبرامج الكمبيوتر…الخ. الكتابة: وهو المجال المرتبط بكل ما له علاقة بعالم الكتابة بكل أنواعه وتخصصاته. الترجمة: من وإلى كل اللغات. تصميم الجرافيك: كل ما هو مرتبط بمزج الألوان مع الخطوط للخروج بتصميم مرئي. المونتاج: كل ما هو مرتبط بتصميم وتعديل الفيديوهات. التعليق الصوتي: مجال مرتبط بعالم الفيديوهات. التصوير: بكل أنواعه سواء التصوير الفوتوغرافي أو الفيديو. التسويق: بكل أنواعه وتخصصاته، وخصوصاً التسويق الرقمي. لكى تعمل فى مجال من المجالات السابقة :- يجب أن تمتلك المهارات اللازمة لدخول هذا المجال ولديك معرض أعمال قوى يحتوى على المشاريع التى انجزتها لكى يراها العميل حتى تبدأ وتقدم على أى عمل. وعليك بعد ذلك الدخول إلى أحد المنصات (المواقع) التى تجمعك بالعميل وتقدم له الخدمة مثل {مستقل- خمسات} وغيرها كل موقع يتم العمل فيها بطريقة مختلفة :- 1- مستقل: العميل يعلن المشروع وأنت تختار المشروع الذى يناسبك وتقدم عرضك ثم العميل يختار من بين العروض المناسبة له. 2- خمسات: أنت تعلن الخدمة التى تقدمها والعميل عليه الاختيار ويشتري الخدمة ثم تبدأ انت بإنجازها له. عليك اتمام المشروع والخدمة على أكمل وجه لأنه يوجد تقييمات لك بعد كل مشروع تنجزه فاحرص عليه لأنه مهم جدا لكى يتم اختيارك من قبل عملاء أخرين بعد ذلك. للمزيد اطلع على هذه المقالات والإجابات

فقط طريقة مبسط للكتابة في حالة عبارة مفردة بسيطة مثل function x(m, y, ...me) { let total = 0; for (let go of me) total += m + y + go; return total; } لكن فى حالة أكثر من عبارة ويوجد عمليات معقدة داخل جسم الحلقة لابد من وضعها ال{} لأنه لو تم وضع اكتر من جملة بدون {} لا تعتبر الا العبارة الأولى تبع جسم الحلقة function x(m, y, ...me) { let total = 0; for (let go of me) { total += m + y; total += go; } return total; }

دي نصيحة الdocs بتاعت الredux تجنب وضع قيم غير قابلة للتسلسل مثل الوعود أو الرموز أو الخرائط/المجموعات أو الوظائف أو مثيلات الفئة في حالة متجر Redux أو الإجراءات المرسلة. وهذا يضمن أن الإمكانات مثل تصحيح الأخطاء عبر Redux DevTools ستعمل كما هو متوقع. كما يضمن أيضًا تحديث واجهة المستخدم كما هو متوقع بس في حالة إنك عايز تعملى تعطيل إن ويتم وضع قيم غير قابلة التسلسل بإمكان استخدام هذه البوابة configureStore({ middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { // قم بتجاهل أنواع الإجراءات هنا ignoredActions: ['your/action/type'], // قم بتجاهل المسارات في جميع الإجراءات هنا ignoredActionPaths: ['meta.arg', 'payload.timestamp'], // قم بتجاهل هذه المسارات في الحالة ignoredPaths: ['items.dates'], }, }), })

بالاضافة لتعليقات الأصدقاء ال higher order function هى الfunction التى تأخذ function أخري أو أكثر كمعاملات لها أو ترجع function function greaterThan(n) { return m => m > n; } let greaterThan10 = greaterThan(10); console.log(greaterThan10(11)); // → true ويوجد functions في الجافسكربت هى higher order function جاهزة لحل مشكلات متكررة مثل ال 1 - ()map // جمع 10 على كل عنصر فى المصفوفة const arr = [1, 2, 3, 4, 5]; const output = arr.map((num) => num += 10) console.log(arr); // [1, 2, 3, 4, 5] console.log(output); // [11, 12, 13, 14, 15] 2 - ()filter const users = [ {firstName: 'John', lastName: 'Doe', age: 25}, {firstName: 'Jane', lastName: 'Doe', age: 30}, {firstName: 'Jack', lastName: 'Doe', age: 35}, {firstName: 'Jill', lastName: 'Doe', age: 40}, {firstName: 'Joe', lastName: 'Doe', age: 45}, ] // ايجاد المستخدمين أعمارهم فوق 30 const output = users.filter(({age}) => age > 30) console.log(output); // [{firstName: 'Jack', lastName: 'Doe', age: 35}, {firstName: 'Jill', lastName: 'Doe', age: 40}, {firstName: 'Joe', lastName: 'Doe', age: 45}]

ماذا تقصد بأن يتحول لجافاسكربت عند اضافة .js فقط بعد اسم الملف يتحول تلقائي لملف تستطيع الكتابة بداخله أكود جافاسكربت بمعني هذا الملف index.html لكتابة أكواد وتاجات الHTML وهذا index.js لكتابة أكواد الجافاسكربت أرسل ما نوع الخطأ الذي يظهر لك أو صورة

ربما يتم تشغيل في ios على نسخة قديمة من متصفح جوجل كروم لا تدعم خواص css الجديدة 1 - تحديث المتصفح فى الios 2 - اضافة الprefix لخواص css الجديدة تتم كالأتى display: flex; تصبح display: -webkit-flex; وهذا لكل الخواص الجديدة لcss وهذ أكواد الcss الخاصة بك بعد التعديل body { direction: rtl; } .upper-part { display: -webkit-box; /* iOS 6-, Safari 3.1-6 */ display: -moz-box; /* Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Chrome */ display: flex; justify-content: space-between; } .logo-barcode { margin-top: 10px; } .logo-barcode a { background-color: white; text-decoration: none; } .logo-barcode img { width: 100px; height: 100px; } .driver-info { /* margin: 20px; */ } .trip-info { display: -webkit-box; /* iOS 6-, Safari 3.1-6 */ display: -moz-box; /* Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Chrome */ display: flex; justify-content: space-between; } .trip-info div span { color: rgb(255, 165, 0); background-color: black; opacity: 0.8; border-radius: 5px; padding: 5px 4px; text-align: center; font-size: 17px; width: 95px; display: inline-block; } .passngers-span { padding: 15px 30px; } .trip-info div input { max-width: 110px; padding: 3px; font-size: 17px; border-radius: 5px; outline: none; margin: 0px 5px; text-align: center; } @media screen and (max-width: 767px) { .passngers { margin-top: 4px; } .passngers-span { padding: 10px; } .taken-value { max-width: 100px; } .allocate, .date { display: -webkit-box; /* iOS 6-, Safari 3.1-6 */ display: -moz-box; /* Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Chrome */ display: flex; flex-direction: column; width: 30%; } .trip-info div span { margin-bottom: 3px; } }

عند إتمام عملية الشراء ودفع المبلغ سيتم إرسال تأكيد بالشراء إلى بريدك الإلكتروني المستخدم في أكاديمية حسوب. بعد مراجعة طلبك والتأكد من وسيلة الدفع المستخدمة، ستلاحظ إضافة أيقونة جديدة في الشريط العلوي للموقع باسم دوراتي، عند الضغط عليها ستصل إلى الدورات التي سجلت بها، وتبدأ الدروس. اذا لم تظهر معك الأيقون وواجهت أى مشكلة تحدث مع مركز المساعدة https://support.academy.hsoub.com

حاولي يكون السؤال واضح أكثر ما نوع المشروع ؟؟ ماذا تريدى ان تفعلي تريدي تشغيل البرنامج أم معرفة ال version للمشروع أما ماذا؟؟ في حالة أردتى معرفة اصدار ال Playwright استخدمى هذا ال command npx playwright --version في حالة أردتى اجراء الاختبار استخدمى هذا ال command npx playwright test

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

المشكلة في مكتبة النودمون (nodemon) ليس عليك رفع ال node_modules علي github ولكن اترك سيرفر الريندر يعمل تثبيت لك المكتبات الذى يحتاجها التى بالفعل انت ثبتها اثناء عملية التطوير وأيضا .env لأن ألأكواد التى بداخله سرية افتح ملف ال .gitignore وضع هذه الأكود بداخله /node_modules .env ثم ابدأ برفع الملفات مرة أخرى على github سيتم رفع كل الملفات ما عدا ( node_modules و .env) ثم ابدأ بعمل نشر مرة أخري على render ستتم معك العملية بدون أى مشاكل

المقصود بعملية الrouting بداخله انك لن تحتاج إلى مكتبات مثل React router dom لأنه يعمل بطريقة أخري file based system اى فقط تضع الصفحة في مجلد الصفحات وتتم عملية التوجيه ليس عليك أن تؤدي اعدادات مثل React router dom

اطار عمل nextjs هو أطار عمل مبني فعلا علي الرياكت يعمل على تحسين ال performance لأنه يوفر حلولًا لبناء المواقع وتطبيقات الويب بناءً على مكتبة React بسرعة وكفاءة أهمها التصيير من طرف الخادم server-side rendering والتوليد الساكن generating staticوذلك مهم للSeo يعطيك routing للصفحات بداخله بدون الحاجة إلي المكتبات خارجية ولكن تستطيع أيضا إنشاء باك اند بداخله فهو يعطيك مجلد api تستطيع الكتابة بداخله backend معتمد على ال nodejs https://academy.hsoub.com/questions/13636-ما-الفرق-بين-react-و-nextjs؟/#comment-38348

الدورات موجهة للناطقين باللغة العربية الفصحى ويمكن بالطبع تطبيق كل النصائح والمهارات في أي سوق عمل يتم التركيز على على حساب مستقل لأنه موجه للسوق العربي ويمكن تطبيق كل النصائح في أي سوق عمل للمزيد تحدث مع مركز المساعدة https://support.academy.hsoub.com

يمكنك الدخول على الموسوعة هنا يوجد شرح جيد https://wiki.hsoub.com/الصفحة_الرئيسية

ذلك لأى مفاهيم في أى لغة برمجة 1 - حاول شرح المفاهيم لأحد غيرك وأسئله هل فهم منك أم لا اذا فهم منك هذه المفاهيم اذن انت فهمتها واستوعبتها 2 - عليك بالممارسة والتطبيق المستمر على كل مفهوم لابد من التطبيق بنفسك 3 - عليك ادخال هذه المفاهيم في مشاريع وحل تحديات صغيرة بهذه المفاهيم 4 - شوف زملاء لك طبقوا على هذه المفاهيم واقرأ الكود الخاص بهم للتعرف طرق جديدة للحل والتطبيق على هذه المفاهيم 5 - شارك الكود الخاص بك مع الأخرين لترى هل هذه المشكلة التى حليتها عن طريق هذا المفهوم صحيحة أم يمكن حلها بشكل أفضل بطريقة أخري 6 - عليك بالممارسة والتطبيق انظر هذه الاجابات ايضا

الحل انك لاتضع الفانكشن على الزرار ولكن ضعها على الفورم ككل "onsubmit="getMessage(event) مع ارسال ال event للفانكشن وتغير نوع الزرار لsubmit <form onsubmit="getMessage(event)"> <h1 style="text-align: center; margin-bottom: 50px; margin-top: 30px; color: rgb(145, 125, 102);"> Pass the message </h1> <hr> <div class="cont"> <label for="message">Enter a Message :</label> <br> <button class="icon"><i class="fa-regular fa-message"></i></button> <input type="text" id="message-input" name="message"> <br> <button type="submit" class="submit"> Submit </button> <h4 id="the-message" style="text-align: center;"></h4> </div> </form> الفورم بعد الsubmit يحدث تحديث للصفحة بشكل كامل فتتحدث من جديد بسبب ذلك تختفي الرسالة فالحل نضع () e.preventDefault داخل الفانكشن وتكون كالتالي const writing = document.getElementById("message-input") function getMessage(e) { e.preventDefault() document.getElementById("the-message").innerHTML = writing.value writing.value = ""; }