عمر قره محمد

DOM هو اختصار لـ Document Object Model وهو نموذج كائن المستند الذي يمكنك من خلاله الوصول إلى جميع عناصر مستند الـ HTML. BOM هو اختصار لـ Browser Object Model وهو نموذج كائن المستعرض الذي يمكّن JavaScript من التحدث مع المستعرض. في حالة تطوير تطبيقات الهاتف المحمول باستخدام لغة JavaScript، فإن الـ DOM والـ BOM ليس لهما أهمية كبيرة في React Native إذ يتم استخدام DOM و BOM مختلفين عن تلك الخاصة بالمتصفح ويجب عليك تعلم كيفية التعامل مع هذه الخصائص بالفعل. أما بالنسبة لـ ReactJS فهي مكتبة JavaScript لبناء واجهات المستخدم. وبما أنّ منطق المكوّنات مكتوب باستخدام JavaScript بدلًا من HTML، فبإمكانك تمرير الكثير من البيانات عبر تطبيقك بسهولة وإبقاء الحالة بعيدة عن DOM. ولكن، يجب على مطور الواجهات الأمامية أن يتعلم عن الـ DOM والـ BOM لأن ReactJS تعتمد على نظام DOM في كثير من المجالات.

في الجدول الذي تعرضه يوجد عمود خاص بالمعرف الخارجي الذي يشير إلى المسؤول manger و هو FK(foreign key) وعمود خاص بمعرف الصف PK(Primary Key) وهو يشير إلى هذا الصف في هذا الجدول. وباقي الأعمدة تشير إلى باقي بيانات الصف والتي هي الاسم والراتب. هل يمكنك توضيح ما لذي لم تفهمه بالتفصيل حتى استطيع مساعدتك بشكل افضل.

الصورة غير واضحة تماماً، هل يمكنك مشاركة ملفات المشروع.

ماهي المشكلة التي تواجهها ؟

<a href="https://api.whatsapp.com/send?text=example.com" target="_blank"> Share via WhatsApp </a> استبدل الـ example.com برابط الصفحة التي تريد مشاركتها.

item هنا تعبر عن كل عنصر في المصفوفة numbers، حيث أن findIndex تقوم بعمل حلقة تمر على كل العناصر وفي كل مرة تتحقق من الشرط item > 70 وفي حال وجدت هذا الشرط محققاً في عنصر معين فإنها تقوم بإعادة الـ index الخاصة به.

الدالة CEIL في SQL تعيد أصغر قيمة صحيحة أكبر من أو تساوي الرقم المعطى. وهي تعمل على تقريب الرقم إلى أعلى إلى أقرب رقم صحيح، وتعتبر العكس من الدالة FLOOR (التي تقوم بتقريب الرقم إلى أسفل إلى أقرب رقم صحيح). CEIL (2.5) // يساوي 3 دالة REPLACE في SQL هي دالة تستخدم لاستبدال جميع تكرارات نص معين بنص آخر داخل نص محدد. يمكن استخدامها للبحث عن نص معين واستبداله بنص آخر في قاعدة البيانات. REPLACE(string, old_substring, new_substring) يجب استبدال `string` بالنص المطلوب البحث فيه وهو في حالتنا الـ salar، واستبدال `old_substring` بالنص المطلوب البحث عنه وهو في حالتنا 0، واستبدال `new_substring` بالنص الجديد وهو في حالتنا الـ " " (نص فارغ وهذا يشبه حذف العنصر لأن النص الفارغ لن يتم حسابه في عملية الـ avg). وبالتالي اصبح شرح السطر بالشكل التالي : SELECT CEIL(AVG(salar) - AVG(REPLACE(salar, 0, ""))) FROM employees; الكود يقوم بحساب الفرق بين متوسط قيم العمود salar ومتوسط قيم العمود salar بعد استبدال جميع تكرارات الرقم 0 بنص فارغ ""، ثم يتم تقريب النتيجة إلى أعلى إلى أقرب رقم صحيح باستخدام دالة CEIL.

الدورة كافية تماماً للدخول إلى سوق العمل، كما يضمن لك مقدمي الدورة أن تسترد استثمارك خلال 6 اشهر، فهي تغني خبرتك في انشاء مواقع متوافقة مع جميع شاشات العرض، وتعطيك معرض اعمال ممتاز، وتسير بك شوطاً طويلاً في مجال واجهات المستخدم. ولكن هذا لا يعني ان الدورة ستقوم بشرح كل شيء وأنك ستصبح محترفاً فوراً بعد الانتهاء من الدورة، فلا يوجد دورة واحدة تستطيع الوصول بك إلى هذه الدرجة، بل هذه لا تحصل عليها إلا بعد اكثر من دروة واكثر من سنة من العمل والتعلم، ولكن المهارات التي تقدمها الدورة هي الحد الكافي لدخول سوق العمل بشكل قوي. فمثلاً، يعتمد مقدمي الدورة على الـ flex-box وهي تغني تماماً عن الـ Grid في تقسيم الصفحة وهي اسهل منه بكثير، كما ان اغلب بيئات العمل مثل بوت ستراب و Mui و غيرها تعتمد على الـ flex-box من اجل تخطيط الصفحات، وحتى لو تعلمت الـ grid ستظل بحاجة للـ flex-box في بعض الاحيان التي لا يكفي فيها الـ Grid. ومصطلح الـ Grid-systim لا يعني انك تستخدم الخاصية Grid في CSS دائماً ولكن يعني تخطيط الصفحة بشكل عام، فمثلاً بوت ستراب تستخدم نظام الـ 12 عمود لتخطيط الصفحة ولكنها تستخدم الـ flex-box وعند انشاء كل عنصر تقوم بتحديد عدد الاعمدة التي سيشغلها في كل قياس من قياسات الصفحات. كما ان الدورة تقوم بشرح الـ transition بالفعل ويبدو انك لم تصل إلى هذه الدروس بعد. على كل حال، هذه بعض المقالات المقدمة من الأكاديمية حول الموضوع في حال اردت التعلم عنا بشكل موسع : توثيق الـ transition من موسوعة حسوب

بشكل عام، ستجد هذين المصطلحين يستخدمان بشكل قابل للتبادل ولكن هنالك بعض الاختلاف التقني : سطر الأوامر Command Line هو برنامج مهمته : تنفيذ الأوامر التي تأتيه من المدخل القياسي Standard input (غالبا ما يكون من دخل terminal) طبع أو إرجاع الناتج إلى المخرج القياسي Standard output ( غالبا ما يكون شاشة terminal) والأمثلة عليه هي Command Prompt في الويندوز و Bash في يونكس(Unix). أما terminal فمهمته : عرض مخرجات البرامج ذات الواجهة النصية. يربط لوحة المفاتيح إلى بدخل البرنامج. يربط خرج البرنامج بالشاشة. والأمثلة عليه xtem في يونكس و Console في الويندوز. أما Command Prompt فهو اسم الـ Command Line في Windows.

يمكن استخدامها في كل المشاريع التي تحتاج validation حيث ان وظيفة المكتبة الرئيسية هي التحقق من البيانات الواردة في الطلبات (scheme validation). وهذا مثال على كيفية استخدامها : const Joi = require('joi'); const schema = Joi.object({ username: Joi.string() .alphanum() .min(3) .max(30) .required(), password: Joi.string() .pattern(new RegExp('^[a-zA-Z0-9]{3,30}$')), repeat_password: Joi.ref('password'), access_token: [ Joi.string(), Joi.number() ], birth_year: Joi.number() .integer() .min(1900) .max(2013), email: Joi.string() .email({ minDomainSegments: 2, tlds: { allow: ['com', 'net'] } }) }) .with('username', 'birth_year') .xor('password', 'access_token') .with('password', 'repeat_password'); schema.validate({ username: 'abc', birth_year: 1994 }); // -> { value: { username: 'abc', birth_year: 1994 } } schema.validate({}); // -> { value: {}, error: '"username" is required' } // Also - try { const value = await schema.validateAsync({ username: 'abc', birth_year: 1994 }); } catch (err) { }

إذا كنت تقصد أنك تريد تحديد الاختيار الافتراضي فيمكنك فعل ذلك عبر تحديد ال select باستخدام js ومن ثم اعطاء القيمة value للقيمة التي تريدها مثل : document.querySelector("msSelect").value = "my value" أما اذا كنت تقصد انك تريد عرض الاختيارات في داخل الـ select فيمكنك فعل ذلك بالشكل التالي : const options = ["first" , "second" , "third"] document.querySelector("msSelect").innerHTML = `${ options.map(option => `<option value="${option}">${option}</option>`).join("") }` حيث أن الـ ${} تمكنك من كتابة JS داخل النص والذي نستخدم له علامة التنصيص ` بدلاً من " أو '.

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

الافضل بشكل عام هو ان تقوم بتضمين الـ JQuery في الموقع الخاص بك وان لا تعتمد على خدمات الـ CDN الخارجية ولاسيما في مرحلة التطوير، وتضمين الـ JQuery افضل من ناحية الاعتناء بالكود، وكذلك فهو اكثر استقراراً. وحتى تتأكد اي الطريقتين هي الافضل لك، فيمكنك تجريب كل منهما ومراقبة سرعة تحميل الـ JQuery في ادوات المطور في المتصفح وان تحكم بنفسك، فالأمر يختلف من بلد لآخر وهو يعتمد بشكل كبير على اماكن وجود الـ CDN الذي تستخدمه واماكن وجود مستخدمي موقعك. بالنسبة لأفضل مواقع الـ CDN لـ jQuery فموقع jQuery الرسمي يقدم هذه الخدمة كما يقدمها موقع cdnjs.

هل يمكنك اعطاء تفاصيل أكثر، كيف قمت بتوليد المشروع النهائي build وكيف قمت برفعه على الـ cpanel. فالصحيح هو ان تستخدم ال custom server وأن تقوم برفع الموقع مثل اي سيرفر node js. في حال قمت بتوليد المشروع النهائية build باستخدام الـ next export فلن تعمل الوظائف الخاصة بالسيرفر.

يمكنك حل المشكلة بإضافة useEffect تقوم بتمرير الصفحة إلى الاعلى عند كل انتقال و هذا مثال على كيفية التمرير إلى أعلى الصفحة عند تغيير المسار باستخدام React Router والخطاف `useEffect`: import { useEffect } from 'react'; import { withRouter } from 'react-router-dom'; function ScrollToTop({ history }) { useEffect(() => { const unlisten = history.listen(() => { window.scrollTo(0, 0); }); return () => { unlisten(); }; }, []); return null; } export default withRouter(ScrollToTop); يمكنك استخدام مكون `ScrollToTop` هذا عن طريق تضمينه داخل مكون `Router` الخاص بك على النحو التالي: <Router> <Fragment> <ScrollToTop /> <Switch> <Route path="/" exact component={Home} /> </Switch> </Fragment> </Router> و هذا سيضمن أن تتمرر الصفحة إلى الأعلى كلما تغير المسار.

خاصية animate هي خاصية مدمجة في Jquery تستخدم لتغيير حالة العنصر باستخدام CSS style. يمكن استخدام خاصية animate في Jquery مع scrollTop لتحريك الصفحة بشكل تدريجي إلى الأعلى مثل : var body = $('html, body'); body.stop().animate({scrollTop:0}, 500, 'swing', function() { alert("Finished animating"); }); في الكود السابق يتم استدعاء الدالة animate() على كائن body والذي يتم تحديده باستخدام المحدد $('html, body')، والتي تقوم بإيقاف التحريك الحالي (إذا كان موجودًا) وبعد ذلك تبدأ في تحريك الصفحة إلى الأعلى باستخدام دالة animate() مع معلمة scrollTop التي تعيد الصفحة إلى أعلى المستند. يتم تحديد مدة التحريك بـ 500 ميلي ثانية والتأثير بـ swing. عند انتهاء التحريك، يتم استدعاء دالة alert() لإظهار رسالة "Finished animating" .

بالعكس فدورة بايثون تعتبر اصغر الدورات من ناحية عدد الفيديوهات حيث ان دورة جافاسكريبت فيها 841 فيديو و php فيها 866، وعدد الفيديوهات لا يعبر عن محتوى الدورة، حيث ان هنالك الكثير من الفيديوهات الخاصة بالمسارات القديمة والتي تم استبدالها وذهبت إلى ارشيف المسارات الاقدم. وما اعتقده هو انك خلطت بين عدد الساعات و عدد الفيديوهات.

نعم يمكنك استخام swiper من اجل المربع الذي على اليمين، ومن اجل الصور على اليسار فيمكنك التعامل مع محتواها باستخام js بحيث تقوم بتغيير المحتوى عند كل تغيير للـ swiper، ويمكنك التعامل مع حادثة النقر على كل منها بأن تجعل الـ slide الظهار في الـ swiper هو الزر المنقور. و إذا كان بإمكانك شرح المشكلة التي تواجهها بالتفصيل وماهي الخطوات التي اتخذتها لحلها، حتى نستطيع مساعدتك بشكل افضل، فلم افهم مالذي تقصده بالمشكلة transition and the transform.

يبدو أنك قمت بتحميل ملف الـ node_modules على GitHub وهذا خطأ، حيث لا ينبغي ان يتم رفع مجلد الـ node_modules، وربما يكون هذا هو سبب البطئ، كذلك فلا ينبغي أن يتم رفع ملف الـ build أيضاً إلا إذا كنت تريد استخدام GitHub pages. لتجنب رفع المجلدات `node_modules` و `build` على GitHub، يمكنك إنشاء ملف باسم `.gitignore` في المجلد الرئيسي لمشروعك وإضافة هذه المجلدات إلى هذا الملف. يعمل ملف `.gitignore` على تجاهل الملفات والمجلدات المحددة عند الرفع على GitHub. هذا مثال على محتوى ملف `.gitignore`: node_modules/ build/ بهذه الطريقة، لن يتم رفع المجلدات `node_modules` و `build` على GitHub.

لا يوجد صورة، هل يمكنك مشاركة الكود.

تقنية الـ Connection pooling يمكنك تشبيهها ببركة تحتوي على مجموعة من الاتصالات بقاعدة البيانات مفتوحة وجاهزة للاستخدام المتكرر ( ولنفترض 10) والفائدة من ذلك توفير الوقت الذي يكون مابين اغلاق الاتصال و فتحه مرة أخرى لعملية أخرى. بذلك وعند نفاذ كمية الاتصالات من البركة (اي ان هناك عدد معين من المستخدمين في نفس الوقت يستخدمون جميع قنوات الاتصال في هذه البركة ) يتم اضافة اتصال آخر بشكل اوتوماتيكي ( ليصبح مثلا 14 اتصال داخل البركة ) وعند الانتهاء يرجع للعدد الطبيعي (10) ويتم غلق هذه الاتصالات. تعد تقنية Connection pooling مفيدة جدًا في تحسين أداء قاعدة البيانات، حيث يمكنها تقليل عدد الاتصالات التي يتم إجراؤها بشكل متكرر مع قاعدة البيانات، وبالتالي توفير استجابة أسرع للطلبات. يمكنك استخدام connection pooling مع Mongoose عن طريق تحديد خيار poolSize في URI الخاص بالاتصال بقاعدة البيانات. يمكنك إضافة "poolSize={pool size}" إلى URI الخاص بالاتصال بقاعدة البيانات. على سبيل المثال، يمكنك استخدام mongodb://{user}:{password}@localhost:{port}/{db_name}?poolSize=5 لتحديد حجم حوض الاتصال الذي ترغب في استخدامه. أحد أهم عيوب Connection pooling هو أنه يستهلك ذاكرة كبيرة، خاصةً إذا كان هناك عدد كبير من الاتصالات المفتوحة في نفس الوقت. ومن بين المزايا التي يوفرها هذه التقنية هو تحسين أداء قاعدة البيانات وزيادة سرعة استجابتها. للتعمق اكثر يمكنك الاطلاع على هذا المقال بالانجليزية.

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

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

يجب أن يتم وضعها للـ ul كالتالي : <ul class="navbar-nav me-auto my-2 my-lg-0 justify-content-center w-100 fs-5 " لاحظ أنني اعطيتها الخاصية w-100 بالإضافة للـ justify-content-center وذلك لأننا بحاجة لجعلها تأخذ كامل عرض الأب الخاص بها، ومن ثم قمنا بتوسيط العناصر داخلها. والطريقة التي عرفت فيها اين اضع الخاصية، هي عبر تجريب اضافة الخاصية من الـ developers tool في المتصفح ومراقبة عرض كل عنصر.

ماهي المشكلة التي تواجهها ؟