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

بفرض أن لدي كائن object موجود في متغير على النحو التالي: var myObj = {a: 1, b: 2, c: 3}; var newObj = myObj; myObj.a = 0; console.log(myObj); // {a: 0, b: 2, c: 3} console.log(newObj); // {a: 0, b: 2, c: 3} كما هو واضح من الكود السابق، فإن أي تغير يحدث على الكائن myObj يحدث أيضًا على الكائن newObj. كيف أقوم بنسخ الكائن myObj بالكامل إلى المتغير newObj بحيث يكون منفصل عنه تمامًا؟

ارغب عند كتابة كود المستخدم بمربع النص يتم البحث فى قاعدة البيانات وطباعة اسم المستخدم عن طريق php فى حال وجوده حتى لا يقوم المستخدم بادخال البيانات مرتين وفى حال عدم وجود الكود يسمح بتسجيل البيانات حاولت عن طريق استخدام دالة جافاسكربيت عن طريق الاحداث ولم تفلح معى الرجاء المساعدة <?php if(isset($_POST['add'])){ $code=$_POST['code']; $name=$_POST['name']; $add=$database->prepare("INSERT INTO `test` (`id`, `code`, `name`) VALUES (NULL, $code, '$name')"); $add->execute(); } ?> <form action="" method="POST"> <input onchange="search()" name="code" type="number" placeholder="ادخل الكود"> <input name="name" type="text" placeholder="ادخل الاسم"> <button name="add" type="submit">add اضافة</button> </form> <script> function search() { <?php $ser = $database->prepare("SELECT * FROM `test` WHERE CODE = $code"); $ser->execute(); foreach($ser as $res){ echo "الكود مسجل من قبل" . " " . $res['name'] ; } ?> }; </script>

في هذه الحالة يجب استخدام طلبات AJAX، يمكن الاستفادة من الحدث change على حقل الإدخال لإرسال طلبات إلى الخادم للاستعلام عن القيمة الحالية كالتالي: <script> document.querySelector('input[name=code]').addEventListener('change', function(e) { const code = e.target.value; // إرسال طلب للاستعلام fetch(`/?code=${code}`) .then(res => res.text()) .then(nameExists => nameExists == 1 ? showError('الاسم مسجل مسبقًا')) : clearError(); }); function showError(message) { // .. HTML إظهار رسالة الخطأ ضمن } function clearError(){ // .. إخفاء رسالة الخطأ } </script> وضمن شيفرة php يمكن تلقي القيمة q من GET_ وإرسال رد إما ب 1 أو 0 ليعبر وجود الاسم مسبقًا أم لا (من الضروري طباعة النتيجة وإنهاء الطلب مباشرة لأنه طلب استعلام فقط )كالتالي: <?php if(isset($_GET['code']){ $code = $_GET['code']; $ser = $database->prepare("SELECT * FROM `test` WHERE CODE = $code"); $ser->execute(); echo count($ser->fetchAll()) > 0 ? "1" : "0"; // طباعة نتيجة الاستعلام exit(); // انهاء الطلب }

عملية التحقق تتم بالكامل بطرف الخادم، أي لا داعي لوجود شيفرة جافاسكريبت ضمن الصفحة، المشكلة لديك أن الشيفرة تتحقق من ووجود القيمة add في المصفوفة POST_$ وعلى أساسها تدرج سجل جديد ضمن قاعدة البيانات دون التحقق فيما إذا كان موجودًا من قبل، لحل المشكلة يجب نقل عملية التحقق إلى الأعلى قبل عملية الإدراج وتسجيل نتيجة عملية التحقق في حال فشلت في متغير ما يتم عرضه كرسالة للمستخدم أسفل النموذج كالتالي: <?php // محاولة إنشاء جديدة if(isset($_POST['add'])){ // نتحقق أولًا $code=$_POST['code']; $name=$_POST['name']; $ser = $database->prepare("SELECT * FROM `test` WHERE CODE = $code"); $ser->execute(); $error = null; if(count($ser->fetchAll()) > 0) { // نظهر خطأ $error = "الكود مسجل من قبل" . " " . $_POST['add'] ; } else { // نضيف سجل جديد $add=$database->prepare("INSERT INTO `test` (`id`, `code`, `name`) VALUES (NULL, $code, '$name')"); $add->execute(); } } ?> <form action="" method="POST"> <input onchange="search()" name="code" type="number" placeholder="ادخل الكود"> <input name="name" type="text" placeholder="ادخل الاسم"> <button name="add" type="submit">add اضافة</button> </form> <?php /* عرض رسالة الخطأ */ if($error) echo $error; ?>

اواجه مشكله لما اضيف تنوين في اخر الكلمة ينزلي الكلمة في سطر جديد تطبيقات flutter

نضيف الشيفرات البرمجية من خلال محرر الأكواد الملاحظات: دالة findProfile لا تعيد قيمة return لاتقوم بتمرير قيمة لملف العرض return view('livewire.search', ['results' => $results]);

لا يمكن استهداف الحالة hover للعنصر after مباشرة، فكما تلاحظ حتى ضمن أدوات المطور لا يمكنك تفعيلها، ما يمكنك فعله بدلًا من ذلك هو عند وضع المؤشر فوق العنصر صاحب الصنف submit-wrapper أن يتم تغيير تنسيقات العنصر after، ذلك ممكن بتغيير المحدد إلى التالي: .form-section .submit-wrapper:hover::after { .. } التنسيقات في هذا المحدد سيتم تطبيقها على العنصر after

يبدو أن سؤالي غير واضح. في المثال التالي ما أريده هو عند وضع الماوس على "send me a letter" يظهر خط بالعرض متحرك. للمزيد من التوضيح شيفرة html <div class="section-4"> <h1 class="section-heading">Contact</h1> <div class="form-section"> <img src="./img/form-img.png" alt=""> <form > <input type="text" placeholder="Your Name"> <input type="email" placeholder="Your Email"> <textarea placeholder="Your Message"></textarea> <input type="submit" value="Send"> </form> <div class="submit-wrapper"> <input type="submit" value="Send me a letter" class="showForm" /> </div> </div> </div> css .form-section{ width: 70%; background-color: #ddd; margin: 5px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .form-section img{ width: 700px; height: 500px; } .form-section form{ display: flex; flex-direction: column; position: absolute; width: 500px; margin: 10px 3px; background-color: #fff; border-radius: 10px; transform: scaleY(0); transition: transform 2s; } /* .form-section form:hover{ transform-origin: bottom; } */ .form-section form input{ margin: 10px 2px; border: none; padding: 4px 10px; font-size: 15px; border-radius: 3px; border-bottom: 2px solid rgb(145, 181, 189); color: rgb(145, 181, 189); font-weight: bold; } .form-section form input::placeholder, .form-section form textarea::placeholder{ color: rgb(145, 181, 189); font-family: 'Bellota Text', cursive; font-family: bold; } .form-section form textarea{ margin: 10px 2px; border: none; padding: 4px 10px; font-size: 14px; border-bottom: 2px solid rgb(145, 181, 189); color: rgb(145, 181, 189); max-height: 120px; min-height: 100px; max-width: 100%; min-width: 70%; font-weight: bold; } .form-section form input[type="submit"]{ background-color: rgb(145, 181, 189); color: #fff; width: 50%; margin-left: auto; margin-right: auto; } .submit-wrapper { position: absolute; width: 17%; } .submit-wrapper input.showForm{ border: none; padding: 10px 2px; background-color: #fff; color: rgb(145, 181, 189); font-size: 20px; font-weight: bold; cursor: pointer; text-align: center; z-index: 20; } .form-section .submit-wrapper::after{ content: ""; position: absolute; width: 100%; height: 4px; background-color: rgb(145, 181, 189); top: 100%; left: 0; transform: scaleX(0); transition: transform 2s; } .form-section .submit-wrapper:hover submit-wrapper::after{ transform: scaleX(1); transform-origin: left; } .active{ transform: scaleY(1) !important; transform-origin: bottom; z-index: 10; } زد على ذلك عند إستعمالي لconsole قصد التثبت أكثر لم أستطع النقر على :hover شكرا لكم. أعتذر عن سوء توضيحي للسؤال

أرجو إرفاق شيفرة HTML للتجريب مع جميع التنسيقات ويمكنك استخدام محرر الأكواد لوضعهم بطريقة واضحة

في المثال التالي أقوم بالضغط على "send me a letter" الكود يعمل بشكل (console.log فعّالة) و لكن الكلاس الجديد "active" لم تعمل. شيفرة html <div class="section-4"> <h1 class="section-heading">Contact</h1> <div class="form-section"> <img src="./img/form-img.png" alt=""> <form > <input type="text" placeholder="Your Name"> <input type="email" placeholder="Your Email"> <textarea placeholder="Your Message"></textarea> <input type="submit" value="Send"> </form> <input type="submit" value="Send me a letter" class="inputBtn"> </div> </div> شيفرة css /* section-4 */ .section-4{ font-family: 'Bellota Text', cursive; height: 100vh; } .form-section{ width: 70%; background-color: #ddd; margin: 5px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .form-section img{ width: 700px; height: 500px; } .form-section form{ display: flex; flex-direction: column; position: absolute; width: 500px; margin: 10px 3px; background-color: #fff; border-radius: 10px; transform: scaleY(0); transition: transform 2s; } /* .form-section form:hover{ transform-origin: bottom; } */ .form-section form input{ margin: 10px 2px; border: none; padding: 4px 10px; font-size: 15px; border-radius: 3px; border-bottom: 2px solid rgb(145, 181, 189); color: rgb(145, 181, 189); font-weight: bold; } .form-section form input::placeholder, .form-section form textarea::placeholder{ color: rgb(145, 181, 189); font-family: 'Bellota Text', cursive; font-family: bold; } .form-section form textarea{ margin: 10px 2px; border: none; padding: 4px 10px; font-size: 14px; border-bottom: 2px solid rgb(145, 181, 189); color: rgb(145, 181, 189); max-height: 120px; min-height: 100px; max-width: 100%; min-width: 70%; } .form-section form input[type="submit"]{ background-color: rgb(145, 181, 189); color: #fff; width: 50%; margin-left: auto; margin-right: auto; } .inputBtn{ border: none; width: 20%; padding: 10px 2px; position: absolute; background-color: #fff; color: rgb(145, 181, 189); font-size: 20px; font-weight: bold; cursor: pointer; text-align: center; } .inputBtn::after{ content: ""; position: absolute; width: 100%; height: 2px; background-color: black; } .active{ transform: scaleY(1); transform-origin: bottom; } شيفرة javascript // show the form const inputBtn = document.querySelector('.inputBtn') const showForm = document.querySelector('.form-section form') inputBtn.addEventListener('click', ()=>{ console.log(showForm); showForm.classList.add('active') }) شكرا لكم.

المشكلة لديك أنك لا تحدد العنصر بشكل مباشر بل تكتفي بتحديد الكلاس active , وبالتالي سوف يتم تجاهل التنسيقات الخاصة بالكلاس active , الحل أن نستخدم الخاصية !important كالتالي .active{ transform: scaleY(1) !important; ^^^^^^^^^^ transform-origin: bottom; } في هذه الحالة سوف يتم تجاهل جميع التنسيقات الاخرى لنفس العنصر ويتم تطبيق الخاصية التي لديها important , الحل الآخر يمكنك من خلال تحديد العنصر بشكل مباشر وصحيح كالتالي .form-section form.active{ ^^^^^^^^^^^^^^^^^^^^^^^ transform: scaleY(1); transform-origin: bottom; }

العنصر غير موجود لأن "transform: scaleY(0);" ولكن عند النقر على "send me a letter" أريد أن يصبح العنصر موجود من خلال إضافة الكلاس "active"

في CSS لا يمكن استخدام المحدد after للعناصر مثل input، لحل المشكلة يمكنك وضع العنصر input ضمن حاوية بالصنف submit-wrapper و استهداف تلك الحاوية بالمحدد after وتنسيقها كما المطلوب كالتالي: <div class="submit-wrapper"> <input type="submit" value="Send me a letter" class="showForm" /> </div> وفي CSS .form-section .submit-wrapper::after { .. ^^^^^^^^^^^^^^^ }

العنصر الذي لديه الكلاس form-section form غير موجود , هل قمت بكتابته ولكن لم ترفقه في الكود أم انك لم تكتبه؟ أرجو منك التأكد من انشائه

تفضّل. <div class="section-4"> <h1 class="section-heading">Contact</h1> <div class="form-section"> <img src="./img/form-img.png" alt=""> <form action=""> <input type="text" placeholder="Your Name"> <input type="email" placeholder="Your Email"> <textarea placeholder="Your Message"></textarea> <input type="submit" value="Send"> </form> <input type="submit" value="Send me a letter" class="showForm"> </div> </div>

السلام عليكم عند قيام الحاسوب ببعض التحديثات تغير المتصفح ليصبح microsoft Edge بعد أن كان google chrome. كيف يمكن تغيير المتصفح التلقائي مع open with live server في vs code. شكرا.

المتصفح الافتراضي يتم تعيينه من قبل نظام التشغيل، Live Server فقط يفتح المتصفح الافتراضي المُعين على نظام التشغيل، على ويندوز يمكنك تغيير المتصفح الافتراضي كالتالي: من Start نبحث عن Default apps ونختارها ضمن القائمة التي تظهر نختار Web browser (سيكون مُعيّنًا افتراضيًا إلى Edge) ومن القائمة اختر المتصفح الافتراضي الذي تريد

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

يمكننا إضافة الخواص للكائنات بشكل ديناميكي، مثل المرور على أول غرض، وإسناد كل من المفتاح و القيمة للغرض الآخر، و بالتالي عملية بناء الغرض الجديد بنفس القيم. <?php // كائن أول $x = new stdClass(); // كائن ثاني $y = new stdClass(); // استنساخ أول كائن لكتئن جديد $z = clone $x; // المرور على الكائن الثاني و قراءة الثنائيات و إسنادها ل الكائن الجديد foreach($y as $k => $v) {$z->$k = $v;} كما يمكننا عمل كائن جديد فيه خاصيتين كل منها عبارة عن كائنات مراد دمجها، وبتخصيص دالة get__ يمكننا إعادة الخاصية من الكائن الجديد من إحدى خاصيتيه <?php // تعريف صنف جديد class Compositor { // كل خاصية عبارة عن كائن مراد دمجه private $obj_a; private $obj_b; // الدالة البانية تسند غرضين لخواص الكائن public function __construct($obj_a, $obj_b) { $this->obj_a = $obj_a; $this->obj_b = $obj_b; } // من خلال الدالة السحرية public function __get($attrib_name) { // في حال كلنت الخاصية من أول كائن نعيدها if ($this->obj_a->$attrib_name) { return $this->obj_a->$attrib_name; } // وإلا ستكون في الثاني else { return $this->obj_b->$attrib_name; } } }

يمكن باستخدام تحويل النوع الصريح لتحويل كلا الكائنين إلى مصفوفة ترابطية associative عبر النوع array كالتالي: <?php (array) $obj1; // ["a" => "a", "b" => "b"] (array) $obj2; // ["c" => "c", "d" => "d"] ثم نستفيد من التابع array_merge لدمج المصفوفتين الناتجتين في مصفوفة واحدة كالتالي: <?php array_merge((array) $objectA, (array) $objectB); // ["a" => "a", "b" => "b", "c" => "c", "d" => "d"] ثم يمكن تحول المصفوفة الناتجة إلى كائن مجددًا عبر النوع object كالتالي: <?php $newObj = (object) array_merge((array) $objectA, (array) $objectB); echo $newObj->a; // a echo $newObj->b; // b echo $newObj->c; // c echo $newObj->d; // d لكن هذا النوع من الدمج محدود ويقوم بدمج الخصائص العامة فقط ولا يدمج التوابع

يمكن القيام بهذا الأمر بطريقة سهلة من خلال الكلمة المفتاحية super والتي تُستخدم للإشارة إلى الصنف الأب Parent Class على النحو التالي: class User { showAll() { console.log('showAll method from User class'); } } class Admin extends User { showAll() { super.showAll(); console.log('showAll method from Admin class'); } } الآن يمكن عمل كائن من الصنف Admin وإستدعاء التابع showAll: const admin = new Admin(); admin.showAll(); /* Output: showAll method from User class showAll method from Admin class */ ملاحظة: إن كان التابع showAll الموجود في الصنف User عبارة عن تابع ساكن Static Method فيجب أن يتم إستدعائه عبر تابع ساكن أيضًا، على النحو التالي: class User { static showAll() { console.log('showAll method from User class'); } } class Admin extends User { static showAll() { super.showAll(); console.log('showAll method from Admin class'); } } Admin.showAll(); /* Output: showAll method from User class showAll method from Admin class */

يمكن عمل هذا الأمر بشكل بسيط للغاية في PHP، فكل ما عليك فعله هو إرجاع نفس الكائن في نهاية كل تابع: على سبيل المثال إن كان لدينا الصنف التالي: <?php class MyClass { public function doSomething() { // ... } public function doSomethingElse() { // ... } } يجب فقط إرجاع نفس الكائن في نهاية كل تابع عبر الكلمة this$: <?php class MyClass { public function doSomething() { // ... return $this; } public function doSomethingElse() { // ... return $this; } } بهذا الشكل يمكن إستخدام التوابع كما يلي: $obj = new MyClass(); $obj->doSomething()->doSomethingElse(); لاحظ أن هذه الطريقة لا يمكن عملها إن كان يجب إرجاع شيء مُحدد من أحد التوابع.

بالطبع فإنه يوجد فرق، عملية الـنمذجة ترجمة عن prototyping في هي نمط تصميم يخص إنشاء الكائنات Objects يندرج تحت الفئة creational design patterns أو انماط التصميم الإنشائية. وفي جافاسكربت وهو ببساطة أشبه بالاشارة الى النموذج الأولي للكائن وهو ما كالتالي: function User () { }; User.prototype.save = function () { //do something }; فهاهنا نحن نقوم بتهيئة طريقة او تابع او وظيفة للصنف User يستعمله هو نفسه كامل الكائنات المنشئة عن طريق User وليكن الكائنين Ali و Ossama. وذلك لأن كل كائن مرتبط بكائن النموذج الأولي (لنتخيله كالقالب الأولي). في حين ان استعمال this سيشير الى الكائن المنشَئ وليس للصنف، بمعنى انه سيشير الى Ali وحده والى Ossama وحده. فكل كائن منهما سيمتلك نسخته الخاصة من save. تعتبر الطريقة الأولى أو النمذجة أسرع نسبيا وأقل استعمالا للذاكرة (لأن التابع سيكون متوفرا عند كل النسخ عن الصنف عند استعمال this في حين انه سيكون متوفرا في النموذج الاولي فقط في حالة استعمال prototype) أما الطريقة الثانية فهي تخدم مفهوم التغليف Encapsulation أكثر فالتوابع المعرفة داخل الكائن بالاشارة بـ this يمكنها التعامل مع متغيرات الكائن الداخلية الخاصة. في الحقيقة لا يوجد هذان النمطين فقط في جافاسكربت فيما يخص الكائنات، يوجد أنماط عديدة أخرى يتعلق بعضها بتهئية الكائنات وإنشاءها، بأشكالها وكيفية عملها، بسلوكها وكيفية تواصلها وغيرها.

يوجد منصة مساق لإنشاء المواقع التعليمية الخاصة توفر لك: إنشاء دورات أكاديمية بمحتوى مرئي ومسموع ومقروء تكامل مع وسائل الدفع نظام اصدار شهادات نظام تصميم واجبات للطلاب إمكانية إنشاء مدونة خاصة وتصميم وتخصيص صفحة الدورة في حال رغبت بتطوير مشروع خاص بمزايا معينة مطلوبة يمكنك إضافة مشروعك في مستقل وتوضيح كافة المتطلبات وسيتقدم من يمتلك الخبرة الكافية لتطوير المشروع بعرضه