لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 06/15/22 in أجوبة
-
2 نقاط
-
أحاول أن أقوم بعمل صندوق لكتابة تعليق في مشروع React وقمت بكتابة الكود التالي: import React, { useState } from "react"; export default function CommentEditor() { const [value, setValue] = useState(''); return ( <div> <textarea value={value} onChange={(v)=>setValue(v)}></textarea> </div> ); } المشكلة الآن أن العنصر textarea يكون فارغ بشكل إفتراضي، ولكن عند محاولة كتابة أي شيء سظهر النص [object Object] داخل صندوق textarea، ولا يظهر أي خطأ في الـ console ما المشكلة في هذا الكود؟ وكيف أقوم بحل المشكلة؟1 نقطة
-
لدي مصفوفة تحتوي على عدد من أسماء المستخدمين، ويتم جلبهم من خلال عمل طلب GET إلى الخادم، بعد ذلك أقوم بالتعديل على هذه المصفوفة (حذف مستخدم، إضافة مستخدم جديد، أو إستبدال مستخدم بآخر)، الآن أريد أن يتم تنفيذ دالة معينة كلما تغير طول المصفوفة نفسها (عند حذف أو إضافة مستخدم جديد) بينما لا يتم تنفيذ الدالة إذا تم إستبدال أحد المستخدمين، لذلك حاولت إستخدام الخطاف useEffect على النحو التالي: useEffect(() => { console.log(usersArr) }, [usersArr]) لكن يبدو أن هذه الطريقة لا تعمل، حيث يتم تنفيذ الدالة عند حدوث أي تغير مهما كان على المصفوفة. هل توجد طريقة لكي أجعل الدالة تُنفذ في حالة تغير طول المصفوفة فقط؟1 نقطة
-
مثلما أشار المدرب عمر، فإن رسالة التنبيه تظهر بسبب ان خاصية scroll-behavior غير مدعومة من قبل متصفحات safari. ولتجاوز هذا المشكل ومقاربة نفس سلوك الانزلاق في هاته المتصفحات التي لا تدعم هاته الخاصية نقوم بعمل ذلك عن طريق الجافاسكربت. في جيكويري مثلا يوجد الخاصية scrollTop ضمن التابع animate : $('html, body').animate({ scrollTop: $('#target-item').offset().top }, 800}) حيث يعبر : target-item على معرف id للعنصر او الحاوي المستهدف الذي نحاول الانزلاق اليه. 800 مدة هاته الحركية. او مدة الانزلاق يمكنك مثلا اضافة هاته الشيفرة ضمن وظيفة ما نربطها بحدث الضغط على رابط او زر ما يقوم بالانزلاق بنا الى عنصر آخر. <script> function smothlyScroll(target) { $('html, body').animate({ scrollTop: $(target).offset().top }, 800}) } </script> <button onclick="smothlyScroll('#about-section')">scroll to about section</button> <section id="about-section"> .. </section>1 نقطة
-
1 نقطة
-
اذا ربما لم يتم الاشتراك بعد , في هذه الحالة يرجى التواصل مع مركز المساعدة وتخبرهم بمشكلتك وسوف يساعدونك في أسرع وقت , يمكنك التواصل معهم من هنا1 نقطة
-
1 نقطة
-
المشكلة تحدث لأن IE/Edge/Safari لا يدعمون الخاصية scroll-behavior: smooth بشكل كامل ولحل هذه المشكلة في Safari وكل المتصفحات الاخرى يمكنك إضافة الخاصية عبر باستخدام js : function SmoothVerticalScrolling(e, time, where) { var eTop = e.getBoundingClientRect().top; var eAmt = eTop / 100; var curTime = 0; while (curTime <= time) { window.setTimeout(SVS_B, curTime, eAmt, where); curTime += time / 100; } } function SVS_B(eAmt, where) { if(where == "center" || where == "") window.scrollBy(0, eAmt / 2); if (where == "top") window.scrollBy(0, eAmt); } حيث تضيف الخاصية للعنصر الخاص بك عبر استدعاء هذه الوظيفة بالشكل التالي : SmoothVerticalScrolling(myelement, 275, "center"); وفي حال تريد إضافتها لل body : const myElement = document.body; فتصبح الوظيفة الخاصة بإضافة smooth للـ body كالتالي : function SmoothVerticalScrolling(e, time, where) { var eTop = e.getBoundingClientRect().top; var eAmt = eTop / 100; var curTime = 0; while (curTime <= time) { window.setTimeout(SVS_B, curTime, eAmt, where); curTime += time / 100; } } function SVS_B(eAmt, where) { if(where == "center" || where == "") window.scrollBy(0, eAmt / 2); if (where == "top") window.scrollBy(0, eAmt); } const myElement = document.body; SmoothVerticalScrolling(myElement, 275, "center"); وفي حال أردت إضافت الخاصية نفسها للدحرجة الجانبية أي لليمين واليسار يمكنك كذلك فعل نفس الامر بالـ js باستخدام الوظيفة التالية: function SmoothHorizontalScrolling(e, time, amount, start) { var eAmt = amount / 100; var curTime = 0; var scrollCounter = 0; while (curTime <= time) { window.setTimeout(SHS_B, curTime, e, scrollCounter, eAmt, start); curTime += time / 100; scrollCounter++; } } function SHS_B(e, sc, eAmt, start) { e.scrollLeft = (eAmt * sc) + start; } وكذلك الامر هنالك مكتبة جاهزة للقيام بنفس الأمر وهي smootscroll polyfill : يمكنك تحميلها في ملف المشروع عبر الامر npm install smoothscroll-polyfill --save وإضافتها للصفحة عبر الكود التالي : import smoothscroll from 'smoothscroll-polyfill'; // kick off the polyfill! smoothscroll.polyfill();1 نقطة
-
يرجى إرفاق نص الخطأ ضمن السؤال بشكل نصي وليس ضمن صورة، المشكلة هي محاولة إدراج مستخدم جديد ضمن جدول users بعنوان بريد الكتروني مكرر مسبقًا لمستخدم آخر ضمن نفس الجدول، إذا كنتِ تحاولين تنفيذ أمر بذر البيانات seeding قد تكون المشكلة محاولتك لتنفيذ نفس العملية مرتين ما يسبب نسخ متكررة من البيانات، يمكنك في حال لم يكن هناك بيانات ضرورية تنفيذ أمر التهجير مع البذر بحيث يتم إدراج كافة البيانات ضمن جداول فارغة جديدة كالتالي: php artisan migrate:fresh --seed في حال بقيت المشكلة يكون السبب من صنف بذر بيانات المستخدمين نفسه UsersSeeder، تأكدي من إدراج المستخدمين بعناوين بريد مميزة مختلفة عن بعضها لتجنب تلك المشكلة1 نقطة
-
الكائن يمكن أن يكون له methods خاصة، و أن يرث دوال من الصنف الأب له نخزن أسماء الدوال في مصفوفة و نعمل الفلترة باستخدام typeof // تعريف الدالة التي تقبل كائن لفحصها و إعادة أسماء دوالها function getAllFuncs(myObj) { // تهيئة مصفوفة لحفظ أسماء الدوال const props = []; // حفظ الكائن مؤقتاً في متغير محلي let obj = myObj; // الدوران على خصائص الدالة do { props.push(...Object.getOwnPropertyNames(obj)); // جلب الدوال للكائن الحالي } while (obj = Object.getPrototypeOf(obj)); // Prototype في حال وراثة يوجد دوال من الأب لذلك نجلبهم كم // المرور على المصفوفة و فلترة النتائج return props.sort().filter((e, i, arr) => { // غير مكرر و نوعه دالة if (e!=arr[i+1] && typeof myObj[e] == 'function') return true; }); }1 نقطة
-
يمكنك اختيار المجال حسب رغبتك، والخلفية المعرفية لديك التي يمكن أن تناسب مجال ما أكثر من الآخر، و استعدادك لدراسة متطلبات مجال ما. تختلف لغات البرمجة المستخدمة في مجال ما حسب متطلبات سوق العمل وما يمكن أن تخدمه هذها للغة. يمكنك عمل تطبيقات سطح المكتب بلغة ++C. عمل تطبيقات سطح المكتب أو تطبيقات أندرويد أو برمجة نظم الويب الخلفية بلغة JAVA يمكنك البحث عن استخدامات اللغات التي تجيدينها أو اللغات المستخدمة في مجال ما وتعلمها.. الموضوع يعود لك. توفر المقالة التالية شرح عام لمجالات البرمجة: أرجو قرائتها بعناية، ثم تحديد المجال الذي ترغبين بدراسته1 نقطة
-
يمكنك ذلك من خلال استخدام التابع Object.getOwnPropertyNames ثم نستطيع عمل ترشيح أو فلتر للناتج من خلال استخدام التابع filter لفلترة الدالة البانية الكونستركتر كالتالي const instances = Object.getOwnPropertyNames(Foo.prototype) .filter(prop => prop != "constructor"); console.log(instanceOnly);1 نقطة
-
مرحبا اخي الكريم نعم انا مريت على موضوع اجنبي من قبل وكان فيه بعض هذا الاختصارات وقمت بتجربتها على الاندرويد ستوديو ولم تعمل لذلك كنت اعتقد انها تفعل امر مختلف ولكن على ما يبدو انها تعمل على VS Code شكرا على التوضيح اخي الكريم1 نقطة
-
جربت هذا ولم ينجح المشكلة هي عندما احول الملف الى PDF و عرضه يظهر لي ملف مشابه للملف هذه الشيفرة تحويل الملف الى PDF def pdf_file(request): excel = client.Dispatch("Excel.Application", pythoncom.CoInitialize()) # Read Excel File sheets = excel.Workbooks.Open(f'{os.getcwd()}/BOOK.XLSX') work_sheets = sheets.Worksheets[0] excel.Workbooks.Open(f'{os.getcwd()}/BOOK.XLSX') # Convert into PDF File work_sheets.ExportAsFixedFormat(0, f'{os.getcwd()}/templates/PDF/file.pdf') return FileResponse(open(f'{os.getcwd()}/templates/PDF/file.pdf', 'rb'), content_type='application/pdf') هذه صورة للملف الذي يظهر عندي بعد تحويل الملف الى PDF حتى اني لا يمكنني اغلاق هذا الملف و يمكنني الكتابة في الملف الاساسي1 نقطة
-
الخاصية position: relative تقوم بالسماح لك بتحربك العنصر نسبةً لموضوعه الأصلي، فتخيل أن لدينا الكود التالي: <style> .container { background-color: pink; width: 700px; height: 500px; margin: auto; /* لتوسيط الحاوية أفقيًا */ } .box { width: 150px; height: 150px; color: white; text-align: center; display: inline-block; /* لجعل الصناديق بجانب بعضها البعض */ } /* تغير ألوان الصناديق */ .red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; } .black { background-color: black; } </style> <div class="container"> <div class="box red">1</div> <div class="box green">2</div> <div class="box blue">3</div> <div class="box black">4</div> </div> ستكون النتيجة بالشكل التالي: الآن لنحاول تحريك الصندوق الأزرق من خلال الخصائص top و left: .blue { background-color: blue; top: 10px; left: 10px; } ستجد أن الصندوق لم يتحرك من مكانه، وذلك لأن الخصائص top و bottom و left و right لا تعمل إلا إذا قمنا بإضافة الخاصية position إلى العنصر، لنحاول إضافة الخاصية position: relative: .blue { background-color: blue; top: 10px; left: 10px; position: relative; } ستجد أن العنصر تحرك من مكانه الأصلي بنسبة 10px من الأعلى ومن اليسار: لنحاول الآن تغير قيمة الخاصية position لتصبح absolute بدلًا من relative: لاحظ أن العنصر قد تحرك بداية من أول الصفحة (العنصر body) بقيمة 10px من الأعلى top ومن اليسار left، لكن ماذا إذا أردنا أن نحرك العنصر بقيمة 10px من داخل الحاوية container، حينها يجب أن نضيف الخاصية position: relative إلى الحاوية container: .container { background-color: pink; width: 700px; height: 500px; margin: auto; position: relative; } .blue { background-color: blue; top: 10px; left: 10px; position: absolute; } وسنجد حينها أن العنصر بدأ التحرك من بداية الحاوية container: السبب في ذلك هو أن الخاصية position: absolute تجعل العنصر يتحرك من بداية أقرب عنصر أب له يحمل الخاصية position: relative (لاحظ أن الحاوية container هي عنصر أب للصندوق الأزرق، ولها الخاصية position: relative)، وإذا لم يكن هناك أي عنصر أب للصندوق يحمل الخاصية position: relative سوف يبدأ العنصر التحرك من بداية الصفحة. يمكنك الإطلاع على التوثيق الكامل للخاصية position في موسوعة حسوب من هنا.1 نقطة
-
الكائن localStorage عبارة عن كائن JavaScript عادي، ويمكنك إستخدامه في أي موقع بدون أي مشكلة وبغض النظر عن إطار العمل الذي تستعمله. حاول أن تستعمل localStorage في الخطاف useEffect أو useState لكي لا يتم إستخدامه في كل عملية render للمكون component، بالشكل التالي: import React, { useState } from "react"; const MyInput = () => { const [value, setValue] = useState(localStorage.getItem("key") || ""); const onChange = (e) => { setValue(e.target.value); localStorage.setItem("key", e.target.value); }; return <input value={value} onChange={onChange} />; }; export default function App() { return ( <div className="App"> <MyInput /> </div> ); } في المثال السابق، يتم عمل input وأي شيء سوف يتم كتابته فيه سيتم تخزينه في localStorage مباشرة يمكنك الإطلاع على المزيد عن localStorage من خلال هذه المقالات:1 نقطة
