عمر قره محمد

لا نقوم بالتحقق من وجود كلمة المرور password عادة ولا يوجد طريقة للتحقق منها ولاسيما اننا نقوم بحفظها بشكل مشفر. أما بالنسبة لل Email و الـ Name فيمكنك التحقق من عدم تكرارهما في الجدول بإضافة ال Unique للعمود عند انشائه كالتالي : CREATE TABLE User ( Name UNIQUE ..., Email UNIQUE ..., Password ..., . . . );

لا لن تستغني عن الـ The Browser Object Model (BOM)، بل ستستخدم عناصر الـ BOM كما كنت تفعل مع js. وسيصبح استخدامها اكثر شمولية، لاسيما انه يوجد الكثير من المكتبات و الـ hooks الخاصة برياكت والتي تسهل التعامل مع الـ BOM ولاسيما موضوع التنقل بين الصفحات و الحصول على احداثيات العناصر واعطاء الخصائص اعتماداً على عناصر معينة من الـ BOM. ويجب ان يكون تصورك عن الـ react بأنه بيئة عمل تمكن المطور من استخدام js بكل قوتها، وهو لن يحد من استخدام اي جانب من جوانب js لا الـ BOM ولا غيره. وستبقى قادراً على استخدام عناصر الـ BOM البدائية في react بالاضافة لما يوفره رياكت من hooks ومكتبات مختلفة.

يمكنك وضعه ك parameter في الطلب كالتالي : r = requests.get('https://github.com', timeout=5) يمكنك الاطلاع على الـ documentation الخاصة بالمكتبة للاستفادة اكثر. أو يمكنك استخدام eventlet : import requests import eventlet eventlet.monkey_patch() with eventlet.Timeout(10): requests.get("http://ipv4.download.thinkbroadband.com/1GB.zip", verify=False)

يمكنك المرور على كل العناصر في الـ object بعد طرق واسهلها هو استخدام الـ for in : const myObj = { a: 1, b: 2, c: 3 }; for (key in myObj) { console.log(key + " " + myObj[key]) } // النتيجة ستكون كالتالي // a 1 // b 2 // c 3 ويمكنك الاطلاع اكثر على for in من موسوعة حسوب

لا ليس صعباً لاحظ انك تستطيع تمريره في الوظيفة pushState في الخانة الثالثة : history.pushState({ page: 1 }, `page 1`, "?page=1"); ولتمرير الكويري السابقة تستطيع فعل ذلك بالطريقة التالية : history.pushState({ page: 1 }, `page 1`, "?lan1=JavaScript&lan2=HTML"); ويمكنك الوصول لهذه البيانات كالتالي : function getPage(pageNumber, setHistory) { clearPages(); if (pageNumber === 1) { // وضعنا الشرط التالي كي لا يحدث التغير في السجل إلا عندما نستخدم الرابط //إختيارية "?page=1" القيمة if (setHistory) history.pushState( { page: 1 }, `page 1`, "?lan1=JavaScript&lan2=HTML" ); const params = new Proxy( new URLSearchParams(window.location.search), { get: (searchParams, prop) => searchParams.get(prop), } ); console.log(params.lan1); // JavaScript console.log(params.lan2); // HTML // نبني الصفحة بعد احضار البيانات // وذلك من اجل تمرير البيانات لها في حال كانت تعمد عليها page1(); } else { page2(); // وضعنا الشرط التالي كي لا يحدث التغير في السجل إلا عندما نستخدم الرابط //إختيارية "?page=2" القيمة if (setHistory) history.pushState({ page: 2 }, `page 2`, "?page=2"); } }

يمكنك استخدام الـ query لإرسال هذه البيانات، حيث تقوم بوضع هذه الـ query في الرابط بالشكل التالي : www.example.com?lan1=JavaScript&lan2=HTML ويمكنك الحصول على هذه المعلومات من الصفحة الثانية كالتالي : const params = new Proxy(new URLSearchParams(window.location.search), { get: (searchParams, prop) => searchParams.get(prop), }); console.log(params.lang1); // JavaScript console.log(params.lan2); // HTML للمعرفة اكثر عن الـ url و خواصه اقرأ هذا المقال :

يبدو انه لديك خطأ املائي في كتابة اسم الـ body. // انت كتبت const body = document.getElementById("bodyy"); // والصحيح const body = document.getElementById("body"); // كما يمكنك كتابة الشكل التالي ايضا بدلاً عن السابق const body = document.body; اعرف اكثر من موسوعة حسوب عن الـ body في جافاسكريبت المكشلة الثانية هي : let dolar = Number(item.getElementsByClassName("p")[0].innerText); let value = Number(item.getElementsByClassName("input")[0].value); // والصحيح هو let dolar = Number(item.getElementsByTagName("p")[0].innerText); let value = Number(item.getElementsByTagName("input")[0].value); والمشكلة الثالثة هي : // انت تكتب <p class= "dolar" > "${p}" </p> // تحويل الـ Number ولذلك لا تستطيع الوظيفة // item.getElementsByTagName("p")[0].innerText // لرقم // "" ويمكنك تجاوز المشكلة بحذف الـ <p class= "dolar" >${p}</p>

ملف الـ desktop.ini هو عبارة عن ملف يعطي بعض الخصائص للمجلد الذي يوجد فيه، فمثلاً قد يستخدم لإعطاء المجلد ايقونة خاصة أو لإظهار بعض التعليمات الخاصة بالمجلد وبشكل مختصر فإنه يستخدم لحفظ تعديلات العرض التي تتم على المجلد "view customization". وهو ملف مخفي في العادة ويتم انشائه بشكل تلقائي على نظام Windows 11/10، ولكن يبدو انك قد فعلت خاصية اظهار الملفات المخفية حتى ظهر لك. مالذي سيحدث عند حذف الـ desktop.ini ؟ سيتم اعادة انشاؤه مرة ثانية عندما تقوم بتعديل اعدادات العرض الخاصة بالمجلد. اعرف اكثر عن Desktop.ini

يبدو انه لديك عدة مشاكل والشكل الصحيح لملف الـ js يجب ان يكون كالتالي : const bt = document.querySelectorAll(".bt") bt.forEach(item => { item.addEventListener("click", () => { item.innerHTML = "✔ Done" item.append.innerText = "ss" item.style.backgroundColor = "rgb(0, 188, 44)" item.style.color = "white" const body = document.getElementById("bodyy") const creat = document.createElement("h1") creat.innerText = "مبرووووووووووك " body.prepend(creat) creat.classList.add("ccreat") setTimeout(() => { creat.style.transform = "translateX(-200vw)" }, 1000); setTimeout(() => { creat.remove() }, 4000); const show = document.createElement("h3") show.innerText = "عرض المشنريات " body.prepend(show) // لست بحاجة لاعطاء اي كلاس // show.classList.add("sshow") // نضيف الحدث من هنا مباشرةً // show وذلك لأن الكود الخاص بإضافة الحدث معتمد على وجود العنصر // موجوداً اصلاً show في الشكل السابق كنت تضيف الـحدث قبل ان يكون الـ // اما هنا لن يضاف الحدث إلا عندما يتم انشاء العنصر show.addEventListener("click", () => { // قبل استخدامه foterdiv لم تقم بتعريف المتغير // foterdiv.style.transform = " translateX(100vw) " // console.log("sshddow"); // الشكل الصحيح هو const bigdiv = document.querySelector(".bigdiv") const foterdiv = document.querySelector(".foterdiv") bigdiv.style.transform = " translateX(-100vw) " foterdiv.style.transform = " translateX(-100vw) " }) }) }) const x = document.querySelector(".x") x.addEventListener("click", () => { const bigdiv = document.querySelector(".bigdiv") const foterdiv = document.querySelector(".foterdiv") bigdiv.style.transform = " translateX(-100vw) " foterdiv.style.transform = " translateX(-100vw) " }) // بعد .sshow هنا لا يوجد اي عنصر يحتوي الكلاس المسمى // bt وذلك لأنه يتم تعريفه عند النقر على العنصر صاحب الكلاس // bt و هذا الكود يتم تنفيذه لمرة واحدة وقبل النقر على العنصر صاحب الكلاس // غير موجود .sshow ولذلك يعطي الخطأ الذي يقول ان العنصر // const sshow = document.querySelector(".sshow") // sshow.addEventListener("click", () => { // foterdiv.style.transform = " translateX(100vw) " // console.log("sshddow"); // })

لم يعمل الكود الخاص بك لأن const sshow = document.querySelector(".sshow") يعيد array من العناصر وليس عنصر وحيد وبالتالي لإضافة event للعنصر الخاص بك يجب ان تقوم بتحديده كالتالي : sshow[0].addEventListener(...) طريقة ثانية لحل المشكلة هي : استخدام الـ id بدلاً من الـ class كالتالي : show.id = "sshow"; // بدلاً من show.classList.add("sshow") ثم يصبح الاستدعاء كالتالي : const sshow = document.querySelector("#sshow") // بدلاً من const sshow = document.querySelector(".sshow") وهذه ستعيد العنصر الوحيد الذي يملك الـ id المسمى sshow

نعم سيتم شرحها

لاحظ الرابط التالي : https://www.youtube.com/watch?v=FIeLx7urOFs عندما يقوم المستخدم بإرسال الطلب إلى هذا الرابط فإن يوتيوب يعرف انك تطلب معلومات معينة وذلك عبر المعرف FIeLx7urOFs الخاص بالفيديو فيقوم بإرسال طلب إلى قاعدة البيانات واحضار اسم الفيديو و باقي المعلومات الخاصة بالمعرف FIeLx7urOFs ومن ثم عرضها داخل صفحة html، مثل هنا : <div> {data.videoName} </div> وللتبسيط اكثر هذا مثال اسهل وباستخدام html و js وليس react. <div id="weather"> درجة الحرارة اليوم في اللاذقية هي </div> <script> // هنا نحدد المدينة التي نريد ان نحضر البيانات الخاصة بها const city = "Latakia" //لنطبع داخله البيانات القادمة من السيرفر html هنا نأتي بعنصر الـ const myDiv = document.getElementById("weather") // هنا نرسل طلب للسيرفر لنحصل على البيانات fetch("http://api.weatherstack.com/current?access_key=df361c9b41f8be0507cd2efa7a66ed24&query=" + city) .then((response) => response.json()) .then((data) => myDiv.innerText += data.current.temperature + " مئوية "); // في هذا السطر نقوم بحقن البيانات داخل الصفحة </script> جرب تغيير المدينة لمدينة اخرى ولكن قم بكتابتها بالشكل الصحيح و يكون الحرف الاول بالكبير وانظر ان النتيجة ستتغير. فالـ city هذه تأتي من العنوان الخاص بالصفحة ويصعب في html و js شرح كيفية قدومها من العنوان ولكن يمكنك اعتبارها هي الـ id أو المعرف الخاص بالفيديو FIeLx7urOFs والذي تحدثنا عليه في الاعلى

يمكنك تنفيذ الكود السابق نفسه مع اضافة التعديلات التالية : نضيف الصورة داخل العنصر الاب نفسه ولكن خارج العنصر الحاوي على النص، يحث تصبح الصورة و النص بناء مباشرين للأب الخاص بالـ hero Image. <div class="hero-image"> <!-- نضيف الصورة هنا --> <img/> <!-- ******* --> <div class="hero-text"> <h1>I am John Doe</h1> <p>And I'm a Photographer</p> <button>Hire me</button> </div> </div> ونضيف الخصائص التالية للصورة : وهي مشابهة للخصائص التي يأخذها النص img{ /* الخصائص التالية لجعل طول الصورة وعرضها مماثل لطول وعرض الاب وللمحافظة على ابعادها */ width:100%; height:100%; object-fit: cover; /* هذه نفس الخائص التي اعطيناها للنص سابقاً ولكن جعلنا الاتجاه العلوي والايسر منطبق على اعلى وايسر الاب */ position: absolute; top:0; left:0; } ونضيف لخصائص العنصر hero-text الخاصية التالية : .hero-text { z-index: 5; .... } لجعل النص امام الصورة

وظيفة مطور الـ frontend هي بناء كل ما يجري في الموقع على طرف المتصفح وبشكل رئيس بناء واجهة العرض بالإضافة إلى تخزين البيانات في التخزين المؤقت للمتصفح إلى إرسال الطلبات المختلفة إلى السيرفر والتحقق من مدخلات المستخدم حفظ الـ cash حتى يتم تسريع التصفح ..إلخ. لا ليس ذلك فقط، بل يقوم بوضع الحقول ثم يقوم باستقبال البيانات التي يتم إدخالها في هذه الحقول ويقوم بالتحقق منها (أي عمل validation) ثم يقوم بإرسالها لمطور الواجهات الخلفية ليتعامل معها يوتأكد من وصولها وتخزينها بالشكل الصحيح ويقوم بعرض رسالة تنبه المستخدم بتمام العملية أو وقوع خطأ. نعم بالتأكيد، فهذا امر اساسي جداً في بناء مواقع الويب. إقرأ أيضاً :

1- اعتقد انه تم التعامل مع حسابك يا حسين @حسين مصطفى الحسين@فقط ل لماذاوفي حال بقيت المشكلة قم بالتواصل مع قسم الدعم من هنا 2- لا ليس بمستحيل ولكن يقوم بإضافة العناصر بشكل ديناميكي وعلى سبيل المثال يتم الاضافة بهذا الشكل في رياكت : <div> {data.videoName} </div> حيث ان الـ data هي معلومات قادمة من السيرفر، و يقوم الـ frontend بالتعرف على البيانات المراد احضارها من خلال عنوان الصفحة، فكما تعرف كل فيديو على يوتيوب له عنوان مختلف وحسب هذا العنوان يتم احضار البيانات.

اشهر انواع للمواقع الالكترونية والاكثر طلباً : مدونة موقع اخباري موقع تعريفي لشركة موقع خاص بتطبيق موبايل أو تطبيق للحاسوب موقع تعريفي لشركة مع مدونة موقع تعليمي موقع افلام ومسلسلات موقع تواصل اجتماعي موقع بيع خدمات الكترونية sass متجر الكتروني موقع خدمات مصرفية موقع حكومي

من اجل الكتابة على الصورة نستخدم ما يسمى بالـ hero Image وهي كالتالي : نضع div ولنسميه hero-image وداخله div آخر ولنسمية hero-text ولنضع داخله النص الخاص بنا. ونعطي الـ hero-image الخاصية position: relative ونعطيه طول معين، ونعطيه الخلفية : background-image:url(myImagePath) و يمكن ان نعطيه طبقة سوداء فاتحة امام الصور كي يظهر النص بشكل جيد كما في المثال القادم بالاسفل. ونعطي الـ hero-text الخاصية position: absolute فيصبح النص امام الصورة ونتحكم بموضعه بالنسبة للصورة بالخصائص top "والذي يمثل بعد النص عن اعلى الـ hero-image والذي يمثل الصورة" و left "والذي يمثل بعد النص عن يسار الـ hero-image". لاحظ المثال : <div class="hero-image"> <div class="hero-text"> <h1>I am John Doe</h1> <p>And I'm a Photographer</p> <button>Hire me</button> </div> </div> body, html { height: 100%; } /* The hero image */ .hero-image { /* لإضافة طبقة من السواد امام الصورة، وهذا سيجعل النص اسهل للقراءة "linear-gradient" استخدم */ /* url بعده نضيف الصورة كخلفية */ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg"); /* بعض الخصائص للصورة لتظهر بشكل مناسبة */ background-position: center; background-repeat: no-repeat; background-size: cover; /* هذه الخطوتين هم الاهم ولا يجب اهمالهما */ /* relative خصاية الـ */ position: relative; /* اعط العنصر طول معين */ height: 50%; } /* خصائص النص */ .hero-text { text-align: center; /* هذه الخاصية هي الاهم */ position: absolute; /* هذه الخصائص لتوسيط النص بالنسبة للصورة */ top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } النتيجة النهائية :

بل يفعله كل من ال backend وال frontend معاً وذلك لأن ال frontend سيقوم بإنشاء حقول الإدخال الخاصة بإدخال كم من الاسم و الصورة... إلخ ثم سيقوم بإرسالها لل backend الذي سيقوم باستقبال هذه البيانات وتخزينها و ارجاعها لل frontend عندما يطلبها.

لبناء صفحة اسئل أو تواصل معنا تقليدية ستحتاج : 1- صفحة html تحتوي على form لتقوم بإرسال البيانات لسيرفر الـ backend أو اي طريقة اخرى لإرسال البيانات. 2- سيرفر backend ليقوم باستقبال البيانات والتأكد من صحتها. ويمكن الاستغناء عن السيرفر عندما تكون الاستضافة التي تعمل عليها تدعم الـ serverless functions مثل Netlify. 3- قاعدة بيانات حتى يقوم سيرفر الـ backend بتخزين البيانات عليها. وهذه ايضاً يمكن الاستغناء عنها وارسال البيانات مباشرةً للادمن كرسالة بريد الكتروني أو تخزينها على السيرفر كملف.

لقد كتبت عنصر الـ html بشكل خاطئ : <input type="time" id= "timeSyart > <!-- والصحيح هو --> <input type="time" id= "timeSyart" > ويمكن اضافة القيمة المضافة لمتغير بالشكل التالي : <input type="time" id="timeSyart" /> <script> // نعرف المتغير let myTime; // input نقوم بجلب الـ const myTimeInput = document.getElementById("timeSyart") //input نضيف وظيفة لتحدث عند تغير قينة ال myTimeInput.addEventListener("change", function (e) { //للمتغير input نقوم بإسناد قيمة الـ myTime = e.target.value console.log(myTime); // سيطبع الوقت الذي يتم اختياره }) </script> ويمكنك المعرفة اكثر عن معالجة الاحداث في جافاسكريبت من هنا

نعم إن نود يتعامل مع كل من mysql و sqlserver و mango وغيرها من قواعد البيانات، وللحقيقة فإن node يتعامل مع كل قواعد البيانات الموجدة تقريباً كما تفعل ذلك اغلب لغات البرمجة المستخدمة كـ backend. كل ماعليك فعله هو تنزيل المكتبة الخاصة بقاعدة البيانات التي تريد التعامل معها مثل mysql أو mysql2 من اجل التعامل مع Mysql. mongodb للتعامل مع mongodb. بعض الاسئلة السابقة المتعلقة بالموضوع :

يمكنك البحث عن مستقلين يقومون ببناء الـ backend على موقع مستقل . أما في اكادمية حسوب فإننا نقوم بمساعدة المبرمجين الذي يحتاجون مساعدة في تعلم البرمجة وليس بناء التطبيقات بالكامل.

إضافة الـ con.innerHTML = ""; قبل إضافة الامراض سيكون كفيل بحل المشكلة، لاحظ : let h = document.createElement("h2"); let con = document.querySelector("#Diseases"); // لست بحاجة لتعريف المتغير التالي من هنا بل نعرفه من داخال الحلقة // let l; let head = $("#head"); ipcRenderer.on("data-Maladie", function (e, data, NamePath) { let text = `(${NamePath})`; h.innerHTML = text; head[0].appendChild(h); // السطر المضاف ************* con.innerHTML = ""; // نهاية السطر المضاف ********* for (let i = 0; i < data.length; i++) { // الكود التالي غير ضروري لأنك عرفته سابقاً // let con = document.querySelector("#Diseases"); let l; l = document.createElement("li"); let li = ` ${data[i]}`; l.innerHTML = li; l.classList.add("maladie"); l.style.cssText = "color: #133764;border: 2px solid #007bff; margin: 10px; padding: 10px 12px;font-size: 15px;font-weight: bold;border: 1px solid rgba(0,0,0,.125)!important;border-radius: 5px; background-color: rgba(227, 230, 230, 0.226);box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;cursor: pointer;"; con.appendChild(l); } }); // لم افهم مالذي تريده من الاكواد التالية **************** let ret = document.getElementById("Ret"); // جلب العنصر الحاوي لعناصر الصفحة // مرة ثانية Diseases لست بحاجة لإعادة تعريف العنصر صاحب الايدي ************ // نفسه مرة اخرى con بل يمكنك استخدام المتغير let list = document.getElementById("Diseases"); ret.addEventListener("click", function () { // As long as <ul> has a child node, remove it while (list.hasChildNodes()) { list.removeChild(list.firstChild); } ipcRenderer.send("retour"); }); لان هذه الحلقة تقوم بإضافة الامراض للعنصر، واضافة الـ innerHTML = "" يضمن لك كونه فارغ قبل اضافة اي عناصر جديدة لم استطع تجريب الكود، في حال لم يعمل قم بمشاركة ملفات المشروع بالكامل.

يمكنك فعل ذلك بإستخدام ال dom كالتالي : <h1 id="myElementId"> العنصر الذي نريد التأكد منه </h1> <script> // نستدعي العنصر باستخدام الجافاسكريبت const myElement = document.getElementById("myElementId"); // نتحقق من وجود العنصر if (myElement) { // في حال كان موجود نطبع ان العنصر موجود console.log("my element exists") } else { // وإذا كان غير موجود نطبع انه غير موجود console.log("my element doesn`t exists") } </script>

هل يمكنك مشاركة ملفات المشروع الخاص بك