لوحة المتصدرين

السلام عليكم لدي بعض الاسئلة العامة حول الFunctions. ما الفرق بين الParameters والArguments؟ ما الفرق بين الDeclaration والInitializatoin؟ ما هو الExecutoin Context؟ ما هو الLexical Environment؟ شكرا لكم.

السلام عليكم والله لقد حرت بbrowser اجد وفهمت اني لا يمكن تفعيل سوى BrowserRouter واحد لكن حرت ففي index and App .jsx يتواجد ولا اعلم ان كانت لدي مشكلة اخرى ام لا ملفات المشروعportfilio.rar

السلام عليكم أنا مبتدأ في مجال البرمجة و أشتغل على إنشاء تطبيق جوال ANDROID APP من خلال برنامج FLUTTER و لغة DART وصلت لمرحلة إنشاء صفحة إقتناء المشتريات items ووضعها في سلة الشراء PANIER(BASKET). للأسف واجهتني مشكلة تتمثل كالتالي : E/flutter ( 4867): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: type 'int' is not a subtype of type 'String?' in type cast E/flutter ( 4867): #0 SharedPreferences.getString (package:shared_preferences/shared_preferences.dart:112:58) E/flutter ( 4867): #1 Paniercontroller.add (package:dadou/controler/paniercontroller.dart:27:37) E/flutter ( 4867): #2 Itemsdetails.build.<anonymous closure> (package:dadou/view/screen/itemsdetails.dart:26:43) كل ما أريد إضافة قطعة (buy items) أي عندما أضغط على + / - على سبيل المثال لزيادة أو إنقاص القطع يظهر هذا الخطأ . ممكن شخص لديه خبرة أن يساعدني في حل هذا المشكل . مع الشكر بارك الله فيكم ! BACKEND : PHP MYSQL مع العلم أني قمت بإختبار BACKEND و عمل بشكل عادي تجدون في المرفقات جميع الأكواد . على حسب ما توصلت إليه أظن أن الخطأ متأتي عند الإشتغال على users_id شكرا لتفاعل جميع الأطراف . في إنتظار ردكم ! itemsdetailscontroller.dart logincontroller.dart paniercontroller.dart crud.dart itemsdetails.dart items.dart

السلام عليكم لقد قمت ب host لمشروعي in github pages لكن لسبب ما يخبرني المتصفح انه enable js to run this app *------------------------------------------- from scratch: اتبعت فيديو عن كيفية host a react app باستعمال npm install gh-pages --save-dev و اضفت بال package.json : "homepage": "http://boumlik000.github.io/portfilioBM", "homepage": "http://boumlik000.github.io/portfilioBM", "deploy":"gh-pages -d build", "build": "react-scripts build", ومن تم اعمل npm run deploy لكن للاسف يظهر لي هدا اللخطا ملفات المشروعportfilio.rar

تم شرح كيفية رفع مشروع React على github pages في النقاشات التالية: قم بقرائتها وإتباع الخطوات وإذا واجهتك مشكلة ابحث عن الحل أولاً لتستفيد ثم ضع استفسارك هنا.

1- لنبدأ بحل كل رسالة تحذير وخطأ على حدى، ورسالة التحذير الأولى هي: wrning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client". p وهي تعني أنك تستخدم createRoot من react-dom وهو غير مدعوم في الإصدار الحالي من React وهو الإصدار 18و بدلاً من ذلك، يجب عليك استيراده من react-dom/client. 2- والتحذير الثاني لديك هو: warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot p ويعني أن استخدام ReactDOM.render لم يعد مدعومًا في React 18 ويجب استخدام createRoot بدلاً من ذلك، ويوضح أنه حتى تقوم بالتبديل إلى الواجهة البرمجية الجديدة، سيتصرف تطبيقك كما لو كان يعمل بناءً على React 17. حيث في React 18، تم إدخال تغييرات في طريقة تجهيز وتقديم التطبيق، وبدلاً من استخدام ReactDOM.render لتقديم التطبيق في نقطة الدخول الرئيسية، يجب استخدام createRoot لإنشاء نقطة جذرية وتقديم التطبيق من خلالها. 3- وأيضًا لديك مشكلة أخرى وهي تستخدم الكود التالي في ملفي App.jsx وindex.jsx: App.jsx createRoot(document.getElementById('root')).render(<App />); في ملف index.jsx ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') ); وهو يقوم بإنشاء نقطة جذرية باستخدام createRoot من react-dom ويقوم بتقديم مكون التطبيق <App /> من خلالها. أي يجب وضعه في مكان واحد فقط وهو index.jsx فهو نقطة الدخول لتطبيقك في webpack. 4- المشكلة الأخيرة هي أنك تقوم بتضمين المكون App داخل أكثر من Router حيث أنك في الملف App.jsx تضعه داخل Router والتي هي BrowserRouter وفي index.jsx تضعه داخل BrowserRouter أخرى. وذلك غير مسموح بالطبع وسيسبب لديك مشكلة في التطبيق. 5- لماذا قمت بإنشاء ملفي App.jsx وindex.jsx فكل ما تحتاجه هو index.jsx كملف رئيسي للمشروع. 6- كمعلومة جانبية أنت لست بحاجة إلى استيراد React في بداية أي مكون في إصدار React 18. وبناءًا على ما سبق عليك تعديل الكود في ملف index.jsx كما يلي: // react-dom/client الاستيراد من import { createRoot } from 'react-dom/client'; import './App.css'; import './index.css'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Home from './pages/home'; import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/js/bootstrap.min.js'; import '@fortawesome/fontawesome-free/css/all.css'; createRoot(document.getElementById('root')).render( // استخدم createRoot بدلاً من ReactDOM.render <Router> <Routes> <Route path='/' element={<Home />} /> </Routes> </Router> ); reportWebVitals(); أي قم بحذف ملف App.jsx واستخدم الكود السابق فقط في index.jsx

أنا أعمل على مشروع بـ MERN stack وقمت بإنشاء دالة في ملف تسجيل الدخول ولا أريدها أن تبدأ عملها حتى تنتهي دالة أخرى موجودة في ملف آخر من عملها وهو استدعاء بيانات محددة من قاعدة البيانات بغض النظر عن الدالة ... لنفترض أنها ()console.log فهل يمكن ذلك؟ وكيف؟ بالمناسبة أنا أعرف طريقة استخدام async و await ولكن المشكلة أعرف طريقة استخدامها لدالتين في نفس الملف ولكن ملفين مختلفين للأسف لا أعرف

- الفرق بين الParameters والArguments هو أن الParameters هي المتغيرات التي تحدد في تعريف الFunction، بينما الArguments هي القيم التي تمرر إلى الFunction عند استدعائها. مثلا، في الFunction التالية: function add(x, y) { return x + y; } x و y هما Parameters، وعندما نستدعي الFunction بهذه الطريقة: add(3, 5); 3 و 5 هما Arguments. - الفرق بين الDeclaration والInitialization هو أن الDeclaration هو إعلان اسم ونوع المتغير أو الFunction دون تحديد قيمته، بينما الInitialization هو تعيين قيمة مبدئية للمتغير أو الFunction. مثلا، في هذا المثال: var x; // declaration x = 10; // initialization function square(n) { // declaration and initialization return n * n; } - الExecution Context هو بيئة تشغيل للكود في لغة برمجة معينة. يحدد ما هي المتغيرات والFunctions والObjects المتاحة للكود في ذلك الوقت. عادة، يوجد Execution Context عام للبرنامج ككل، وExecution Contexts محلية لكل Function تستدعى. مثلا، في هذا المثال: var x = 10; // global variable function add(y) { // global function var z = 5; // local variable return x + y + z; } console.log(add(7)); // 22 console.log(z); // error: z is not defined الExecution Context العام يحتوي على المتغير x والFunction add، بينما Execution Context للFunction add يحتوي على المتغير y (الذي يأخذ قيمة Argument) والمتغير z (الذي يعرف داخل الFunction). عندما نستدعي add(7)، يتم إنشاء Execution Context جديد للFunction add ويتم تشغيل كودها داخله. عندما نحاول طباعة قيمة z خارج الFunction، نحصل على خطأ لأن z غير معرف في Execution Context العام. - الLexical Environment هو مفهوم مرتبط بالExecution Context، وهو يشير إلى كيفية تحديد مجال (Scope) المتغيرات والFunctions في لغة برمجة معينة. يعتمد الLexical Environment على كيفية كتابة الكود (Lexical Structure)، وليس على كيفية تشغيله (Dynamic Structure). مثلا، في هذا المثال: var x = 10; // global variable function foo() { // global function var y = 20; // local variable in foo function bar() { // local function in foo var z = 30; // local variable in bar console.log(x + y + z); // 60 } bar(); // call bar } foo(); // call foo الLexical Environment يحدد أن المتغير x متاح للFunctions foo و bar، وأن المتغير y متاح فقط للFunction foo و bar (ولكن ليس للبرنامج الرئيسي)، وأن المتغير z متاح فقط للFunction bar (ولكن ليس للFunction foo أو للبرنامج الرئيسي). هذه التراتبية في المجالات تسمى Lexical Scoping أو Static Scoping.

لماذا لا يصلح استخدام خاصية before مع عنصر input المراد هنا عمل ايقونة search داخل عنصر input type: search مثل الشكل الذى بالصورة

يتم استخدام خاصية before في CSS لعرض محتوى معين قبل العنصر الذي تتم معالجته. ومع ذلك، فإنه لا يمكن استخدام خاصية before مع عنصر input كما تم الشرح في التعليقات السابقة علاوة على ذلك، فإن استخدام الخاصية before مع عنصر input من نوع search قد يؤدي إلى تغيير مظهر العنصر بشكل غير مرغوب فيه، وذلك بسبب كيفية تنسيق المتصفحات لهذا النوع من العنصر. بدلاً من ذلك، يمكن استخدام الصورة كخلفية لعنصر input والتحكم في مظهرها باستخدام CSS. ومن الممكن أيضافة الصورة باستخدام خاصية background-image في CSS، ويمكن تعديل مظهر الصورة باستخدام خصائص مثل background-position و background-size وغيرها. على سبيل المثال، يمكن استخدام الكود التالي لإضافة ايقونة البحث كخلفية لعنصر input من نوع search: input[type="search"] { background-image: url("path/to/search-icon.png"); background-position: right center; background-repeat: no-repeat; padding-right: 20px; /* تعديل هذه القيمة حسب حجم الصورة */ } يتم وضع الصورة كخلفية للعنصر input باستخدام خاصية background-image. كما يتم تحديد موضع الصورة باستخدام خاصية background-position، وتحديد عدم تكرار الصورة باستخدام خاصية background-repeat. وأخيرًا، يتم إضافة بعض التباع باستخدام خصائص الحشو (padding) لضمان عدم تغطية النص بالصورة. ومثال على ذلك يمكنك الإطلاع على ال pen التالية https://codepen.io/tippingpointdev/pen/WNZbWGe

في CSS، تعتبر ":before" عنصر زائف وتستخدم لإضافة محتوى قبل عنصر محدد، بينما ":after" تستخدم لإضافة محتوى بعد عنصر محدد، وغالبًا تستخدم هاتين الخاصيتين لإضافة عناصر مرئية إلى عناصر HTML الموجودة. لكن في حالة عنصر الإدخال "input"، يعتبر استخدام ":before" غير صحيح ولا يعمل على نحو صحيح.، ذلك لأنه عنصر الإدخال "input" يعتبر عنصراً فارغاً لا يحتوي على محتوى داخلي. مما يعني أنه لا يمكنك استخدام ":before" لإضافة محتوى قبل عنصر "input" نفسه. وإذا كنت ترغب في إنشاء رمز البحث داخل عنصر الإدخال "input"، تستطيع استخدام العديد من الطرق لتحقيق ذلك. واحدة من هذه الطرق هي وضع عنصر فرعي مستقل للعنصر "input" واستخدام الخاصية "position: absolute" لتحديد موقع الرمز بالنسبة لعنصر الإدخال، كتعيين أيقونة لرمز البحث كخلفية للعنصر الفرعي وتنسيقه بواسطة CSS ليتناسب مع المظهر المطلوب. وسأوضح لك الكود اللازم لإنشاء رمز البحث داخل عنصر الإدخال "input" باستخدام خاصية "position: absolute": HTML: <div class="search-container"> <input type="text" class="search-input"> <span class="search-icon"></span> </div> CSS: .search-container { position: relative; } .search-icon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 20px; height: 20px; background-image: url('path/to/search-icon.png'); background-size: cover; } .search-input { padding-right: 30px; } حيث قمت بإنشاء عنصر <div> لتكون حاوية لعنصر الإدخال "input" وعنصر الرمز "span". ثم بتعيين الخاصية "position: relative" للعنصر الحاوي .search-container ليمكن تحديد موقع العناصر الفرعية بالنسبة له. وتحديد الخاصية "position: absolute" للعنصر الفرعي .search-icon ليمكن تحديد موقعه بالنسبة للحاوية. ثم استخدمت الخاصيات top, right, transform لتحديد موقع الرمز في الزاوية العلوية اليمنى ووسط العنصر، قمت أيضًا بتعيين خلفية للرمز باستخدام خاصية "background-image" وتحديد حجمها باستخدام "background-size". أخيرًا، تعديل حجم عنصر الإدخال "input" بإضافة الحشو على الجانب الأيمن ليسمح بوجود مساحة كافية لعرض الرمز داخل العنصر. ولا تنسى استبدال 'path/to/search-icon.png' بمسار الصورة الخاصة بأيقونة البحث، أو تستطيع استخدام أيقونة من Font Awesome. وإليك مثال إذا أردت استخدام Font Awesome: HTML: <!DOCTYPE html> <html> <head> <!-- استيراد Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="search-container"> <input type="text" class="search-input"> <span class="search-icon"><i class="fas fa-search"></i></span> </div> </body> </html> قمت بتحديد الأيقونة المستخدمة لرمز البحث باستخدام العنصر <i> ومنحها الفئات المناسبة .fas و .fa-search، حيث .fas تعني استخدام الأيقونات الخطية (Solid) و.fa-search تعني استخدام أيقونة البحث. CSS: .search-container { position: relative; } .search-icon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 20px; height: 20px; color: #999; /* لتغيير لون الأيقونة */ } .search-input { padding-right: 30px; }

أخي مازال يطبع auth فارغ في الضغطة لأولى على login وعندما أضغط مرة أخرى ينجح الأمر كما كان في السابق ولكن تأخرت الاستجابة قليلا بسبب await أنا أريد أن يتم طباعة بيانات الـ auth من الضغطة الأولى والتي هي عبارة عن بيانات المستخدم و الرمز المميز token

السبب في عدم صلاحية استخدام خاصية before مع عنصر input هو أن before تقوم بإضافة محتوى داخل العنصر التي يتم إضافتها له، وعنصر input لا يمكن أن يحتوي على عناصر أخرى. لذلك، لا يمكن تطبيق هذه الخاصية على عنصر input. إذا كنت تريد إضافة محتوى قبل أو بعد عنصر input، فقد تحتاج إلى استخدام عنصر آخر كحاوية له. قد يقيدك الاطلاع على المصادر التالية : العنصر input في موسوعة حسوب مقالة عن مربعات البحث :

تعتبر كل من بيئات العمل على الحاسوب المحلية (مثل Jupyter) والبيئات السحابية (مثل Google Colab) خيارات جيدة لتعلم الآلة وتحليل البيانات. ولكل منهما مزايا وعيوب: بيئات العمل على الحاسوب المحلية: مزايا: لديك السيطرة الكاملة على البيئة وإمكانية تثبيت أي برامج أو مكتبات تحتاجها. عادة ما تكون أسرع في التنفيذ لأن الحوسبة تتم محليًا. عيوب: تحتاج إلى موارد حاسوب قوية محلية لتشغيل التعلم الآلي. يمكن أن يكون الإعداد والصيانة معقدًا. البيئات السحابية مثل Google Colab: مزايا: لا تحتاج إلى موارد حاسوب قوية محلية. تستضيف Google البيئة وتوفر معالجة GPU. سهل الإعداد والاستخدام. لا تحتاج إلى تثبيت أي برامج. عيوب: ليس لديك السيطرة الكاملة على البيئة. محدودة بما توفره Google. عادة ما تكون أبطأ في التنفيذ بسبب الوقت اللازم لنقل البيانات إلى السحابة ومنها. لذا أنصح باستخدام كليهما واختيار الأنسب حسب المهمة. يمكنك استخدام بيئة محلية عند الحاجة إلى سرعة عالية أو مرونة كاملة، واستخدام Colab عند الحاجة إلى موارد GPU دون التزام بشراء حاسوب قوي. نعم، بشكل عام تعتبر بيئات العمل المحلية أكثر متعة في الاستخدام لأنها توفر لك حرية أكبر في التحكم وتخصيص البيئة. وبالنسبة لمعالجات M1 و M2 الجديدة في أجهزة ماك، فهي ممتازة لتعلم الآلة وتحليل البيانات. وذلك لأسباب عدة: تقدم M1 و M2 أداءً عاليًا مع كفاءة عالية في استهلاك الطاقة، مما يجعلها مثالية لأعمال الحوسبة الدقيقة مثل التعلم الآلي. تأتي M1 و M2 بوحدات معالجة الرسوميات (GPU) عالية الأداء مدمجة، والتي تفيد كثيرًا في تسريع التدريب على الشبكات العصبية. تدعم M1 و M2 معمارية ARM التي تميل إلى أن تكون أكثر كفاءة في الطاقة من معماريات x86 التقليدية. وهذا يفيد في تشغيل النماذج الحسابية المعقدة لفترة أطول. يوجد العديد من إطارات العمل الشهيرة في مجال التعلم الآلي مثل TensorFlow و PyTorch و Keras مدعومة جيدًا على المعالجات M1 و M2. لذلك، إذا كان بمقدورك شراء جهاز ماك الجديد بمعالج M1 أو M2، فسيكون خيارًا رائعًا لتعلم الآلة والحوسبة على الحاسوب الشخصي.