عمر قره محمد

يمكنك استخدام الـ 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>

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

نعم يمكنك استدعاء ملفات الـ js بشكل مشروط وذلك عبر انشاء وظيفة بالـ js تقوم بإستدعاء ملف الـ js المعين إذا كان الشرط محقق، لاحظ المثال التالي : function loadScript(url) { var head = document.getElementsByTagName("head")[0]; var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; head.appendChild(script); } if( 1 > 0 ){loadScript("myFile.js");} انظر كيف يقوم المدرب باستخدام نفس الخاصية لاستدعاء ملف الـ js في المقال التالي :

نعم يمكنك ذلك عبر انشاء وظيفة بالـ js تقوم بإستدعاء ملف الـ js المعين إذا كان الشرط محقق. function loadScript(url) { var head = document.getElementsByTagName("head")[0]; var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; head.appendChild(script); } if( 1 > 0 ){loadScript("myFile.js");}

لماذا تفاضل بين بساطة الكود و قلة صفحات الويب وانت تستطيع الجمع بينهما ؟ تستطيع بناء كود واضح و سهل وتقلل عدد الصفحات بنفس الوقت. فلو وضعت الاكواد في اكثر من ملف js وقمت باستدعاء هذه الملفات بالترتيب الصحيح داخل ملف الـ html فستكون حققت كلا الامرين، أو يمكنك دمج الاكواد في ملف js واحد قبل رفع الموقع وهكذا يكون لديك نسخة بسيطة سهلة الفهم و التعديل من قبل الانسان اي نسخة development و نسخة معقدة لرفعها على الاستضافة production. الامر الايجابي في تقليل عدد الصفحات ودمجها قد يحسن تجربة المستخدم إذا كانت وظائف هذه الصفحات معتمدة على بعضها أو يحتاج المستخدم للتنقل بينها كثيراً، حيث انه لا يضطر للذهاب للصفحة الثانية والانتظار حتى ينتهي التحميل، ولكنه قد يسيء لتجربة المستخدم في حالات اخرى. و الامر الايجابي في تقسيم الاكواد في اكثر من مجلد هو انها تصبح اكثر قابلية للقراءة والتعديل. لا لن يرفع تكلفة الاشتراك عبر الانترنت

نستخدم قواعد البيانات من نوع sql في حال وجود بيانات منظمة بشكل كبير ولا تتغير بنيتها أو ترتيبها بشكل متكرر، بينما تستخدم NoSql في في حال وجود بيانات غير المهيكلة أو شبه المنظمة التي لا تتناسب مع النموذج العلائقي الذي تستعمله SQL. ولكن هنالك المزيد من التفاصيل التي يجب معرفتها في كل من النوعين، ولذلك انصحك بقراءة هذا المقال.

الآن فهمت ما تريده بالضبط، لاحظ المثال السابق نفسه مع التعدي وقم بتجريبه على المتصفح : <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <header> <!-- أضفنا براميتر جديد لوظيفة تغيير الصفحة --> <li><a onclick="getPage(1 , true)">الصفحة الاولى</a></li> <li><a onclick="getPage(2 , true)">الصفحة الثانية</a></li> </header> <div id="jsContent"></div> <script> const htmlContainer = document.getElementById("jsContent"); function page1() { const section = document.createElement("section"); section.innerHTML = ` <h1> الصفحة الاولى </h1> <p> محتوى الصفحةالاولى </p> `; htmlContainer.append(section); } function page2() { const section = document.createElement("section"); section.innerHTML = ` <h1> الصفحة الثانية </h1> <p> محتوى الصفحةالثانية </p> `; htmlContainer.append(section); } function clearPages() { htmlContainer.innerHTML = ""; } function getPage(pageNumber, setHistory) { clearPages(); if (pageNumber === 1) { page1(); // وضعنا الشرط التالي كي لا يحدث التغير في السجل إلا عندما نستخدم الرابط //إختيارية "?page=1" القيمة if (setHistory) history.pushState({ page: 1 }, `page 1`, "?page=1"); } else { page2(); // وضعنا الشرط التالي كي لا يحدث التغير في السجل إلا عندما نستخدم الرابط //إختيارية "?page=2" القيمة if (setHistory) history.pushState({ page: 2 }, `page 2`, "?page=2"); } } // هذه حدث مبني في جافاسكريبت ينطلق عند تغيير السجل window.onpopstate = function (event) { console.log(event.state); // { page: 2 } or { page: 2 } const page = event.state.page; // وضعنا الشرط التالي لكي يستطيع المستخدم الرجوع للصفحات التي دخلها قبل دخول الموقع الخاص بنا // حيث انه من دون هذا الشرط سيحدث خطأ عندما يحاول التراجع ليخرج من الموقع الخاص بنا if (page) getPage(page, false); }; </script> </body> </html> يمكنك الاطلاع اكثر عن الوظائف المستخدمة History API و pushState و onpopstate event. وفي حال كان هنالك المزيد من الاسئلة سأقوم بمساعدتك بالتأكيد.