Emad Saif

لدي مكوِّن React يُنشئ زرًا يحتوي محتواه على عنصر <span> وبعض النصوص بداخله، مثل هذا: function Button(props) { return ( <button disable={props.disable} role="button"> {props.children} </button> ); } الآن أريد إنشاء ملف لإختبار هذا المكون بإستخدام react-testing-library، ولكن لا أعرف كيف أتحقق من أن هذا الزر يحتوي على الخاصية disable أم لا كيف أقوم بإختبار هذه الخاصية؟

أقوم بإنشاء صفحة ويب بسيطة لتسجيل مستخدم جديد، ويوجد لدي حقل إدخال من نوع Text لتسجيل رقم جوال المستخدم وأريد السماح فقط بأحرف رقمية مثل (0،1،2،3،4،5 ... 9) وعلامة + و - كيف يمكنني السماح بكتابة هذه الرموز فقط، بينما إذا قام المستخدم بكتابة أي رموز أخرى لا يتم كتابتها في حقل الإدخال؟ ملاحظة: أستعمل jQuery الإصدار الأخير لتسهيل كتابة أكواد JavaScript

لدي عنصر select مع بعض الخيارات فيه. الآن أنا بحاجة إلى تحديد أحد هذه الخيارات باستخدام jQuery. <div class="my_selector"> <select> <option value="value 1">Value 1</option> <option value="value 2">Value 2</option> <option value="value 3">Value 3</option> </select> </div> كيف يمكنني تحديد أحد هذه القيم بإستخدام jQuery وأنا لا أعرف سوى قيمة الخاصية value للخيار الذي يجب تحديده؟

هل توجد طريقة لتشغيل كود معين (دالة ما) قبل إزالة العنصر من الصفحة DOM؟ بحيث يتم تنفيذ الكود وبعد الإنتهاء تمامًا يتم إزالة العنصر من الصفحة بالكامل. ما أحاول القيام به هو عمل زر Toggle وعند الضغط عليه يظهر صندوق box وعند الضغط مرة أخرى على زر Toggle يجب حذف هذا الصندوق من الصفحة، ولكن أريد كذلك أن يتم تنفيذ كود معين قبل أن تتم إزالة العنصر من الصفحة، لذلك قمت بكتابة الكود التالي: function App() { const [active, setActive] = useState(true); if(!active) return null; return <><button onClick={() => setActive(!active)}> Toggle </button> <Box /> </>; } function Box() { const boxRef = useRef(); const callBeforeUnmount = () => { // use boxRef to do something } return <div className="box" ref={boxRef}>red box</div> } المشكلة هنا أن boxRef.current تصبح null عند تغير active إلى false ويتم إزالة العنصر بشكل مباشر. كيف يمكنني تشغيل الدالة callBeforeUnmount عند الضغط على وإنتظار إنتهائها وبعد ذلك إزالة العنصر من الصفحة؟

قمت بتحديد عنصر معين وأريد بعد ذلك الحصول على المعرف id الخاص بالعنصر الأب له $(document).ready(function(){ $("span").parent() // كيفية الحصول على المعرف id الخاص بهذا العنصر }); هل توفر jQuery إمكانية للحصول على المعرف بعنصر تم تحديد بهذه الطريقة؟

لدي إستمارة تحتوي على الكثير من المدخلات (أكثر من 10 مدخلات)، وأريد الحصول على كل البيانات في هذه الإستمارة لإرسالها عبر Ajax: <form> <input type="radio" name="active" value="1" checked="checked" /> <input type="radio" name="active" value="0" /> <input name="title" type="text" /> <input name="subtitle" type="text" /> .... </form> هل توجد طريقة للحصول على كل البيانات دفعة واحدة بدلًا من تحديد كل عنصر على حدى والحصول على القيمة المدخله فيه value يدويًا؟ بحيث يكون شكل البيانات في النهاية كالتالي: { "active": "1", "title": "some text", "subtitle": "Hello, World!" ... }

أريد أن أفتح رابط link في نفس الصفحة الحالية من خلال JavaScript. وعندما أحاول فتح رابط باستخدام window.open، يتم فتحه في علامة تبويب جديدة، وليس في نفس التبويب الحالي كيف أقوم بهذا الأمر؟

لدي عنصر input من نوع File لرفع بالشكل التالي: <input type="file" id="my-input" /> إذا قام المستخدم بالضغط على هذا الزر وقام بإختيار ملف ما، أريد أن أقوم بعمل زر Clear، وعندما يقوم المستخدم بالضغط عليه يتم إزالة الملف الذي إختارها المستخدم. كيف يتم عمل reset لعنصر input من خلال جافاسكريبت JavaScript؟

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

أحاول عمل موقع للعبة وأريد أن يتم تشغيل صوت بسيط (طوله أقل من ثانية) عند الضغظ على أحد الأزرار. هل توجد مكتبات تساعد في تشغيل الأصوات في React.js أو هل يمكن تنفيذ هذا الأمر في React.js بشكل مباشر بدون مكتبات؟

بدأت أستخدم مكتبة moment.js لتنسيق الوقت والتاريخ الخاص بعدد من المنتجات التي تم نشرها في متجر أعمل عليه، وهنا لدي قيمتان للتاريخ، وأريد أن أتحقق إن كان أحدهما أكبر من الآخر. بحثت عن دالة تقوم بهذا الأمر لكن لم أجد أي دالة تقوم بذلك. const date_time = '2022-10-01T00:12:10:19Z'; كيف أتحقق من أن هذا التاريخ لم يأتي بعد، أي أنه مازال في المستقبل بإستخدام JavaScript؟

لدي تاريخين تاريخين محددين، وأريد حساب عدد الأيام بينهما: const date1 = "1/1/2022"; const date2 = "1/1/2023"; const numberOfDays = ?? كيف أحصل على عدد الأيام بين تاريخين في جافاسكريبت JavaScript؟

فكرت في وضع كل الثوابت التي أستخدامها على مستوى مشروع React.js في ملف واحد، بحيث أصل إليه من أي مكان. فكرت في عمل الملف بالشكل التالي: // constants.js REQUEST_SENT_SUCCESSFULLY = "We got your request." وأستعمله بهذا الشكل: // index.js import constants from "./constants"; console.log(constants.REQUEST_SENT_SUCCESSFULLY); ولكن لم أنجح في عمل هذا الأمر ، ولم أتمكن من إستخدام أي ثوابت في constants. ما المطلوب لإنشاء ملف يحتوي على كل الثوابت في مشروع معين؟

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

أريد أن أتأكد من خلال شرط أن كائن معين Object لا يحتوي على أي عناصر بداخله (كائن فارغ { }) حاولت مقارنته بالفعل مع { }: const myObj = {} console.log(myObj === {}); // False لكن يبدو أن هذه الطريقة لا تعمل لسببٍ ما كيف يمكنني التأكد من أن الكائن لا يحتوي على أي عناصر في JavaScript؟

أحاول عرض سعر لمنتج فبإستخدام JavaScript، ولدي متغير price يحتوي على سعر المنتج، ومتغير discount يحتوي على نسبة الخصم على سعر المنتج، وأقوم بعمل العملية الحسابية التالية للحصول على سعر المنتج النهائي: const prince = 99.99; const discound = 15; const finalPrice = prince - (prince/100*discound); // 84.9915 المشكلة هنا أن الناتج يحتوي على أرقام عشرية كثيرة، كيف يمكنني عرض رقمين فقط بعد العلامة العشرية: 84.99 حاولت إستخدام Math.round ولكنها تعرض رقم صحيح بدون أي أرقام بعد العلامة العشرية: 85 كيف يمكنني عرض رقمين فقط بعد العلامة العشرية في جافاسكريبت؟

قمت بإنشاء مشروع React.js وبعد الإنتهاء من بناء أغلب التطبيق قمت ببناءه من خلال الأمر npm run build وتم إنشاء المجلد build بنجاح، ولكن عندما أحاول تشغيل المشروع من خلال هذا المجلد لا يعمل أي شيء ويظهر الكثير من الأخطاء في الـ Console كيف يمكنني تشغيل ملفات Production لمشروع React.js؟ هل يجب رفعها على إستضافة لكي تعمل؟

أريد التحقق من قيمة NaN ، حاولت إستخدام شرط بسيط، ولكن لم يعمل هذا الأمر: +"hi" == NaN; كيفية يمكنني معرفة إن كانت قيمة معينة عبارة عن NaN في JavaScript؟

أحاول أن أقوم بعمل أكثر من مكون في ملف واحد، وقمت بكتابة هذا الكود بالشكل التالي: function Container() { return ( <div> <Slide /> <Slide /> <Slide /> </div> ); } export default Container; function Slide() { return ( <div> Some Text Content </div> ); } export default Slide; ولكن يظهر خطأ Syntax Error في هذا الملف، لماذا يظهر خطأ في هذا الملف، بالرغم من أنه يعمل إن وضعت كل مكون في ملف منفصل؟

أحاول إستعمال مكتبة React-router لإضافة ميزة التنقل بين الصفحات في أحد مشاريع React.js ولكن عندما قمت بإنشاء بعض المسارات Routes ظهر لي الخطأ التالي: Error: A Route is only ever to be used as the child of element, never rendered directly. Please wrap your Route in a Routes. لم أفهم سبب الخطأ، وما معني "wrap your Route in a Routes" هنا الكود الخاص بي: import { Route } from "react-router-dom"; function App() { return ( <div> <Route path = "/"> <div>Home Page</div> </Route> <Route path = "/about"> <div>About Us Page</div> </Route> </div> ); } export default App; وقمت بالتأكد من إضافة BrowserRouter إلى المشروع: import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from "./App"; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') );

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

لدي مشروع مبني بإستخدام React (Next.js) وفكرت في إضافة Google Analytics لتحليل الزورار وعددههم وكيفية تنقلهم داخل الموقع، ولكن لم أتمكن من فهم كيف يتم ربط Google Analytics بمشروع Next.js، كيف ستعلم جوجل بأن المستخدم قد قام بالذهاب إلى صفحة أخرى بينما يتم تبديل الصفحات بإستخدام جافاسكريبت JavaScript (عبر العنصر Link الموجود في Next.js) ؟ كيفية يمكنني إضافة Google Analytics في مشروع Next.js بطريقة صحيحة؟

في جافاسكريبت JavaScript يمكن معرفة نوع قيمة معينة من خلال الكلمة المفتاحية typeof بالشكل التالي: typeof "hi"; // string typeof 123; // number typeof Date.now; // function ولكن عندما أردت التحقق من متغير يحتوي على مصفوفة تم إرجاع Object ونفس الأمر إذا قمت بالتحقق من كائن { } تكون نفس النتيجة. كيف يمكنني التفريق بينهما؟ كيفية التحقق من أن قيمة ما عبارة عن مصفوفة في جافاسكريبت JavaScript

لدي مصفوفة كبيرة للغاية تحتوي على عشرات الأرقام: const myArr = [123, 456, 789, 102, ...]; وأريد أن أقوم بإسبدال كل العنصر الذي يساوي 102 على سبيل المثال، فكرت في عمل دالة تقوم بالمرور على عنصر من عناصر المصفوفة وتتحقق من قيمته وتستبدله. ولكن ألا يوجد دالة مثل String.replace للتعامل مع المصفوفات تسهل هذا الأمر؟ أو هل توجد طريقة أسهل من المرور على كل عنصر يدويًا؟

أنا أستخدم إضافة scrollTo لمكتبة jQuery، ولدي مشكلة في المؤثرات الحركية Animation في الصفحة، حيث يصبح شكلها سيئًا للغاية عندما تعمل وعند التمرير للأسفل (النزول في الصفحة) في نفس الوقت، لذلك أريد أن أعرف ما إذا كان من الممكن تعطيل ميزة التمرير Scroll في الصفحة مؤقتًا من خلال جافاسكريبت؟ هل توجد طريقة لتنفيذ هذا الأمر؟