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

كيف اعرف الدوال التي ينشأؤها المدرب ما هي وما وضيفتها من دون ان اضيف تعليق اسفل الشرح او الدوال التي تكون من نفس node or JavaScript

أنهيت مقاطع جافا سكربت كلها ولم افهم شي!!

مبتدىء فى التعلم واجهتنى مشكله عندما اضع كود ربط css و Js الخاصين بملفات Bootstrap فان ملف css يعمل وملف Js لا يعمل ( اقول ذلك لانه لا يوجد اى تأثير عند الضغط على الازرار او فتح dropmenue تم اخذها من موقع bootstrap ) هذا هو الكود الموجود فى header فى Html <link rel="stylesheet" href="bootstrap/bootstrap.min.css"> <script src="bootstrap/bootstrap.min.js"></script> وهذه صورة الملفات الموجود

السلام عليكم، هل يمكنني بعد تخرج من دورات تطوير واجهة المستخدم وعلوم الحاسوب العمل في شركات ؟

يبدو أنك نسيت إضافة مكتبة Popper اللازمة لعمل ال bootstrap، و نقوم بإضافتها قبل ال script الخاص بال bootstrap كما يلي: <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> تحياتي.

هذا هو المشروع اخى الحبيب اانى اتعلم فيه Bootstrap ارجو من حضرتك تقولى ايه المشكله عشان اتعلم شاكر ليك Bootstrap Learn Project.rar

<button onclick="removeHandler()">Remove</button> <p id="demo"></p> <script> document.addEventListener("mousemove", myFunction); function myFunction() { document.getElementById("demo").innerHTML = Math.random(); } function removeHandler() { document.removeEventListener("mousemove", myFunction); } </script> في هذا المثال قمت بستعمال عمليات الاسترجاع callback funcation وعند تحريك المواس يتولد رقم عشوائي السؤال ليس هنا السؤال هو document.addEventListener("mousemove", document.getElementById("demo").innerHTML = Math.random()); عند تنفيذ هذا الامر بدون callback (عمليات الاسترجاع) ينفذ الامر مره واحده عند التشغيل اما عند استعمال callbak ينفذ طليه تحريك المؤشر الماوس على الشاشه هل هذا يعني ان الدوال تعمل loob على الكود ام ماذا ولماذا تم تنفيذ الامر مره واحده؟ في document.addEventListener("mousemove", document.getElementById("demo").innerHTML = Math.random()); const myTimeout = setTimeout(document.getElementById("demo").innerHTML = "Happy day!", 5000); و ايضا تم تنفيذ هذا الامر مباشره دون انتضار 5 secnd ?

أنت تقصد addEventListener، صحيح؟ في حال أردت تنفيذ أمر معين عند حدوث حدث محدد، عليك إما تمرير دالة callback لكي يتم استدعائها عند وقوع الحدث، أو كتابة دالة يتم استدعائها عند وقوع الحدث وليس كتابة الكود بشكل مباشر، أي نكتب دالة كالتالي بدلاً من callback: function randomNumberGenerator() { return Math.random(); } document.addEventListener("mousemove", function(e) { document.getElementById("demo").innerHTML = randomNumberGenerator(); });

اذا لماذا نستعمل callback في حين ان العمليه تعمل دون callback function?

كود لبرنامج بلغة php يقوم بطباعة العنصر المتكرر داخل المصفوفة بدون استخدام الدوال باستخدام امر الطباعة echo

هناك خلط في الفهم بين كيفية استخدام وتسجيل الحدث (event listener) وكيفية تعيين دالة كولباك (callback function). عند استخدام addEventListener مثلما هو موضح في المثال الأول: document.addEventListener("mousemove", myFunction); هذا يعني أننا نقوم بتعيين دالة myFunction كدالة استجابة لحدث "mousemove" ،وتلك الدالة ستُستدعى في كل مرة يتم فيها تحريك الماوس على الشاشة، وسيتم تنفيذ الكود الموجود في داخل الدالة في كل مرة. أما الشيء الذي قمت بتجربته: document.addEventListener("mousemove", document.getElementById("demo").innerHTML = Math.random()); هناك خطأ في الاستخدام، لأنك تقوم بتعيين نتيجة تقييم تعبير document.getElementById("demo").innerHTML = Math.random() كدالة استجابة للحدث "mousemove"، وذلك ليس هو الهدف المطلوب. بالنسبة للجزء الثاني من السؤال، عند استخدام setTimeout، يجب تمرير دالة كولباك كمعامل أول والوقت الذي يجب أن تنتظره كمعامل ثاني. لذلك، يجب استخدامه بهذه الطريقة: const myTimeout = setTimeout(function() { document.getElementById("demo").innerHTML = "Happy day!"; }, 5000); وذلك سيؤدي إلى تغيير نص العنصر برقم عشوائي بعد مرور 5 ثواني من تنفيذ السكريبت.

ممكن رابط الاكواد المكتوبه لكل درس ليسهل مذاكراتها بدل من الرجوع للفديو مره أخرى

السلام عليكم هل يتم تطبيق flex فقط في الكونتينر ؟ ام يتم اضافة المزيد من الخصائص في الابناء؟

يتم تطبيق الخاصية على الأب ويؤثر ذلك بطبيعة الحال على العناصر الأبناء، من حيث تموضعها وتوزيعها سواء على المحور الأفقي أو العمودي بداخل هذا الحاوي الأب. ولذلك فإن تأثيرها يظهر على الأبناء في حين أنه يتم تطبيق الخواص على الأب. على الرغم من ذلك، يمكنك أيضًا استخدام بعض الخصائص الأخرى في العناصر الابناء لتخصيص التصميم بشكل أفضل. مثلاً، يمكنك استخدام الخصائص المُشابهة لـ Flexbox مثل align-self و order لضبط محاذاة وترتيب العناصر داخل الكونتينر. مثال: نفترض أن لدينا كونتينر (عنصر أب) يحتوي على عدة عناصر أبناء (عناصر فرعية) ونرغب في استخدام تقنية Flexbox لتوزيعها وتنسيقها: <div class="container"> <div class="child">عنصر 1</div> <div class="child">عنصر 2</div> <div class="child">عنصر 3</div> </div> .container { display: flex; align-items: center; /* محاذاة العناصر عموديًا في المنتصف */ } .child { padding: 10px; background-color: #f0f0f0; } النتيجة:

توجد العديد من المواقع التي تقدم خدمة تصميم صفحة واحدة مع وحدة تحكم لإدارة المحتوى، منها: Wix - يوفر قوالب جاهزة لتصميم صفحة واحدة ويمكن إضافة وحدة تحكم بسيطة لإدارة المحتوى. WordPress - يمكن استخدامه لتصميم صفحة واحدة بسهولة وإضافة وحدة تحكم متكاملة. Webflow - يوفر تصميم احترافي لصفحة واحدة مع إمكانية التحكم الكامل بالمحتوى. Squarespace - منصة سهلة الاستخدام لتصميم صفحة واحدة أنيقة مع إمكانية إدارة المحتوى. بناء الصفحة ووحدة التحكم من الصفر قد يكون خيارًا مناسبًا إذا كان لديك المهارات التقنية اللازمة، إلا أنه سيتطلب المزيد من الوقت والجهد. الاستعانة بإحدى منصات الجاهزة أسرع وأسهل خاصةً لصفحة بسيطة مع متطلبات محدودة.

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

جرب أن تضع / قبل مسار الملفات حتى يتم اعتبار هذا المسار هو مسار نسبي relative path. أي يمكنك كتابة ما يلي: <link rel="stylesheet" href="/bootstrap/bootstrap.min.css"> <script src="/bootstrap/bootstrap.min.js"></script> في حال لم ينجح الأمر أيضاً جرب وضع نقطة يليها / أي يصبح كما يلي: <link rel="stylesheet" href="./bootstrap/bootstrap.min.css"> <script src="./bootstrap/bootstrap.min.js"></script> يفترض أن يعمل بعد هذا التعديل، في حال لم يعمل فغالباً موقع ملف ال html غير صحيح، في تلك الحالة شاركنا كامل المجلد الخاص بمشروعك على شكل ملف مضغوط للتحقق منه.

في Flexbox ، يتم تطبيق خاصية flex بشكل عام على الكونتينر لتوزيع العناصر داخل الكونتينر. ومع ذلك ، يمكنك أيضًا استخدام بعض الخصائص الأخرى في العناصر نفسها لتنسيقها بشكل أفضل. إليك بعض الخصائص المهمة التي يمكنك استخدامها في العناصر : - `align-self`: تسمح لك بتعيين موضع عنصر فرعي بشكل فردي داخل الكونتينر ، مثل توسيطه عموديًا أو أفقيًا. - `order`: تسمح لك بتعيين ترتيب العناصر الفرعية داخل الكونتينر بناءً على رقم تسلسلي. - `flex-grow`: تحدد مدى قدرة العنصر الفرعي على التمدد داخل الكونتينر بناءً على المساحة المتاحة. - `flex-shrink`: تحدد مدى قدرة العنصر الفرعي على الانكماش داخل الكونتينر عندما لا يوجد ما يكفي من المساحة المتاحة. - `flex-basis`: تحدد الحجم الأولي للعنصر الفرعي قبل التمدد أو الانكماش. - `flex-wrap`: تعيين ما إذا كانت العناصر الفرعية يجب أن تكون على نفس السطر أم أنه يجب عليها طيها إلى أسفل السطر الجديد حينما لا تتمكن من الاحتفاظ بنفس العرض. لتوضيح الفكرة، أنظر هذا الكود:. container { display: flex; flex-direction: row; justify-content: space-between; } .item1 { align-self: center; order: 2; flex-grow: 1; flex-shrink: 0; flex-basis: 100px; } في هذا المثال، نستخدم `align-self` لتوسيط العنصر عموديًا، واستخدمت `order` لتحديد ترتيب العنصر الفرعي في الكونتينر، واستخدمت `flex-grow` لتحديد مدى تمدد العنصر الفرعي، واستخدمت `flex-basis` لتحديد الحجم الأولي للعنصر الفرعي. وهذه بعض المصادر لكي تتعلم منها.