علي عبد محسن

تظهر الرسالة في لقطة الشاشة لديك في حالة أنك تحاول تشغيل الخادم server على منفذ port قيد الإستخدام من قبل process معينة. قد يكون الشيء الذي يعمل على نفس المنفذ نسخة من نفس الخادم مفتوحة في نافذة cmd (أو terminal) أخرى يمكنك أغلاقها ثم المحاولة مجدداً وقد تكون أغلقت النافذة بالفعل لكن فشل إنهاءها في النظام وبقيت عالقة مخفية عنك. في هذه الحالة تستطيع إنهاءها من خلال تنفيذ الأمر التالي npx kill-port 3000 # رقم المنفذ هنا هو 3000 يفضل دائماً عند إنهاء الخادم أن تضغط على CTRL + C معاً في نافذة terminal ذات العلاقة قبل إغلاقها بغية إنهاء الخادم بشكل صحيح

سنتمكن من مساعدتك بشكل أفضل إذا أرفقت صورة للمشكلة و وضحت على ماذا تعمل؟

إذا كان الهدف هو تنقية عناصر المصفوفة من الأرقام بدون إستخدام filter فإنك بهذه الحالة لا تحتاج إستخدام splice وإنما يمكنك إستخدام forEach مثلا (أو for) للمرور على جميع عناصر المصفوفة ومن خلال تحقيق شرط نوع العنصر تستطيع دفع جميع العناصر التي لا يكون نوعها number إلى مصفوفة جديدة وكما يلي ... let filtered= [] // ننشيء مصفوفة فارغة mix.forEach((el, i)=>{ // المرور على جميع عناصر المصفوفة if(typeof el !=="number"){ // نتحقق من نوع العنصر filtered.push(el) // نضعه في المصفوفة سابقة التعريف } }) console.log(filtered)

تستطيع إستعمال خاصية clip-path في css لصنع أشكال معقدة فضلاً عن الأشكال البسيطة التي تصنعها من خلال circle مثلاً. المثال التالي يصنع شكل سهم الى اليسار وتلاحظ هنا أننا أستخدمنا polygan لإنجاز الشكل المطلوب. clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); الحل البديل حتى تتمكن من إستعمال path تحتاج أن تستخدم clipPath داخل svg وربطها بالصورة التي تريد قصها من خلال css كما في المثال التالي: ... <style> img { clip-path: url(#svgClipPathID) } </style> ... <img src="image.jpg" width="100" height="140"> <svg viewBox="0 0 100 100"> <clipPath id="svgClipPathID"> <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" /> </clipPath> </svg> يقوم الكود أعلاه بقص أي صورة تضعها على شكل قلب. من خلال path تستطيع إنشاء التأثير المرغوب به.

هناك أكثر من طريقة لتحقيق الغرض المنشود بإستخدام jQuery أو javascript. هنا أضع لك حلاً وهو عبارة عن دالة جافاسكربت تقوم بالتحقق من قيمة المدخل عبر تعبير نمطي تستطيع التحكم بمعايير المطابقه فيه بسهولة من خلال تغيير النمط وفقاً لمتطلباتك. ... <script> $(document).ready(function() { // نعرف دالة تقوم بمهمة مطابقة الرقم الموبايل المدخل من قبل المستخدم للمعايير المطلوبة function isValidMobile (phone_number) { // تقبل هذه الدالة مدخل واحد هو رقم الهاتف phone_number = phone_number.replace(/\s+/g, ""); // نقوم بإزالة المسافات في حال وجودها في النص لغرض الفحص return phone_number.length > 9 && // طول النص يجب أن يكون اكبر من 9 phone_number.match( // هنا نستعمل التعبير النمطي أدناه للتأكد من مطابقة القيمة المدخلة للمعاير المطلوبة /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/im ); } // تستطيع الدالة التحقق من ألانماط التالية // 123-456-7890 // 1234567890 // +31636363634 // 075-63546725 $('#form').on("submit", function(e){ // نضبط النموذج لينصت إلى لحظة النقر على submit e.preventDefault() // نقوم بتعطيل إرسال النموذج تلقائياً var m= $("#mobile").val() // نستخرج قيمة الموبايل المدخلة من قبل المستخدم if( isValidMobile(m) ) { // نستدعي دالة التحقق من الموبايل مسبقة التعريف أعلاه alert("Valid") // هنا يعيطنل المتصفح تنبيه أن المدخل قيمة معرفه وصالحة } else { alert("invalid") // هنا التنبيه القيمة المدحلة ليست رقم موبايل صالح } }) }); </script> <!-- HTML CODE --> <form id="form" > <!-- نعرف النموذج--> <input id="mobile" type="text"> <!-- نعرف حقل إدخال الموبايل --> <input type="submit" value="submit"> <!-- نعرف زر الارسال--> </form>

رغم أن ظروف المشكلة غير معلومة لدينا, لكن الخطوات التالية قد تساعدك في حل الإشكال. قد يكون السبب هو أنك تشغل المشروع بنسخة مترجم بايثون python interpreter تم حذفها أو تغير مسارها في النظام نتيجة تحديث مثلاً! يمكنك التأكد من ذلك بالنقر بالماوس الأيمن داخل البرنامج ومن ثم إختيار modify run configuration ثم اختيار interpreter المناسب من القائمة أسفل النافذة المنبثقة وبعدها ok. إذا إستمرت المشكلة حاول إعادة إنشاء المشروع بالخطوات التالية: إحذف المسار idea. قم بإعادة إنشاء المشروع في مساره الأصلي.

import React, {useEffect, useState, useRef} from 'react'; function App() { const [active, setActive] = useState(true); return( <> <button onClick={() => setActive(!active)}> Toggle </button> <Box setActive={setActive} active={active} /> {/* مررنا قيمة active هنا حتى يتمكن الصندوق من تحسسها*/} </> ) } function Box({active, setActive}) { // هنا اصبح لدينا وصول الى قيمة active const [displayMode, setDisplayMode]= useState("HIDE") // نضيف هذه الدالة للتحكم بحالة الزر محلياً داخل الحاوية const boxRef = useRef(); const callBeforeUnmount = () => { // use boxRef to do something if(boxRef && boxRef.current){ boxRef.current.style.color="red" // هنا قم بالتعديل مثلا على لون الزر setTimeout(()=>{ setDisplayMode("HIDE") }, 500 ) // ثم قم بإخفاءه // ثم قم بإخفاءه } // لا يتضح لي بالضبط ما تحاول فعله في هذه الدالة لكن هذا مجرد مثال console.log("callBeforeUnmount!!!") } useEffect(()=> { if(!active){ // نستدعي الدالة فقط عندما يكون الصندوق نشط callBeforeUnmount() } else { setDisplayMode("SHOW") // اذا كان الأمر هو نشط نقوم بأظهار الزر بتغيير قيمة الهوك مسبق التعريف } }, [active]) // نضبط الهوك ليستدعي الدالة المطلوبة عندما تتغير قيمة active if(displayMode==="HIDE") return null; // نقلنا هذا الكود الى هنا ليقوم بأخفاء الصندوق فقط بدل اخفاء كل شيء return <div className="box" ref={boxRef}>red box</div> } export default App; تستطيع ذلك من خلال إستعمالك ل useEffect مع إجراء بعض التعديلات على الكود الخاص بك. لاحظ التعليقات التي وضعتها لك في أماكن التعديل. التغييرات التي أجريناها على كل من المكونين تضمن لنا التحكم بحالة الصندوق محلياً داخل المكون box وكذلك حل مشكلة إخفاء الزر في المكون app مع الصندوق .

تستطيع ذلك من خلال random.shuffle import random # إستيراد l = list(range(5)) # نولد مصفوفة من أرقام مثلا print(l) # [0, 1, 2, 3, 4] random.shuffle(l) # خلط العناصر عشوائياً print(l) # [1, 0, 4, 3, 2] لاحظ أنك بهذه الطريقة تعدل على المصفوفة الأصلية. هناك دالة أخرى تدعى sample تقوم بنفس الغرض ولكن بمعايير وطريقة مختلفة. تابع المثال التالي: l = list(range(5)) # مصفوفة جديدة print(l) # [0, 1, 2, 3, 4] length= len(l) lr = random.sample(l, length) # في الموقع الاول تأخذ المصفوفة وفي الثاني طول تلك المصفوفة print(lr) # [0, 3, 1, 4, 2] # لاحظ أنها تعيد مصفوفة جديدة ولا تعدل على الأصلية print(l) # [0, 1, 2, 3, 4]

يمكنك ذلك لحظة عمل submit لل form طالما أن الحقول المطلوب الحصول على بياناتها داخل وسم الفورم وكما يلي في المثال: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ var formData={} // نعرف كائن نخزن فيه البيانات $("form").submit(function(e){ //نقوم بالتنصت على النموذج e.preventDefault(); // هنا نمنع الإجراء الإفتراضي للعنصر وهو إرسال محتويات النموذج مباشرة حتى نتمكن من إرسال البيانات عبر أيجاكس var x = $("form").serializeArray(); // من خلال هذه الدالة نحول البيانات الى صيغة مصفوفة تحتوي على كائنات فيها قيمة إسم الحقل والقيمة المسندة له $.each(x, function(i, field) { // نمر على عناصر المصفوفة المستخرجة أعلاه formData[field.name]=field.value // نخزن البيانات في الكائن مسبق التعريف }); console.log("formData", formData) // => {FirstName: 'Mickey', LastName: 'Mouse'} // هنا يمكنك التعامل مع البيانات والتعديل عليها قبل إرسالها الى الخادم مثلا // إستدعاء ajax هنا // Ajax comes here.. }) }); </script> </head> <body> <form action=""> First name: <input type="text" name="FirstName" value="Mickey"><br> Last name: <input type="text" name="LastName" value="Mouse"><br> <input type="submit" value="Submit"> </form> </body> </html>

تستطيع عمل ذلك بأكثر من طريقة من خلال javascript. في المثال التالي سنقوم بعمل صندوق إدخال input من نوع file لإلتقاط الملفات مع button يقوم بعمل reset لصندوق الإدخال في كل مرة يتم نقره. ليس هذا فحسب ولكن سنعطيك فكرة عما يسمى ب UX تجربة المستخدم. مثلا نريد أن يكون زر إعادة الضبط فعالاً فقط عندما يكون هنالك ملفاً تم إختياره من قبل المستخدم وكما في المثال التالي. <!DOCTYPE HTML> <html> <body> <input id="pickup" type="file" /> <!-- نعرف صندوق الإدخال بمعرف ونوع ملف --> <button id="clear" disabled >Clear</button> <!-- نعرف الزرالذي نستعمله لإعادة ضبط صندوق الإدخال بمعرف ونضعه في حالة خاملة لأننا في بداية عرض الصفحة لم نكن قد إخترنا أي ملف بعد--> <script> var pickup=document.getElementById("pickup") // نضع صندوق الإدخال في متغير بالوصول إليه عن طريق جافاسكربت var clear=document.getElementById("clear") // نضع زر إعادة الضبط في متغير بنفس الطريقة أعلاه بالوصول إليه بدلالة المعرف pickup.addEventListener("change", function(e){ // نشغل دالة التنصت لتعمل على صندوق ألإدخال في كل مرة تتغير فيه قيمته if(e.target.value !=="") { // هدفنا هنا في كل مرة نكون قد اخترنا ملفاً نجعل حالة زر إعادة الضبط فعالاً بحيث نستطيع الضغط عليه clear.disabled=false } }) clear.addEventListener("click", function(){ // نشغل دالة التنصت على رز إعادة الضبط في كل مرة يتم نقره // هدفنا عند نقر الزر يتم تفريغ صندوق الإدخال ومن ثم تغيير حالة الزر الى الخمول pickup.value="" clear.disabled=true }) </script> </body> </html>

تستطيع تثبيت التطبيق على أكثر من جهاز لكن عليك نقل قاعدة البيانات يدوياً الى المسار الصحيح كل مرة. في حال أردت حلاً أفضل تستطيع إستعمال app.getPath("userData") لكن عليك أولاً نقل الكود المتعلق بالإتصال والتواصل مع قاعدة البيانات الى main.js لأن app غير متاح في renderProcess ولكن في mainProcess. وعندها تستعمل ipcRenderer و events لإرسال طلبات التعديل والقراءة إلى قاعدة البيانات. هناك حل أخر وهو إلإستمرار بما لديك وإعتماد الحل الذي طرحته لك وبعد أن تعمل packing للتطبيق , تستعمل packager مثل zip وتستعمل خاصية sfx وتعمل ملف setup يقوم بنقل ملف قاعدة البيانات إلى مسار مسبق التحديد وأيضا يقوم بتنصيب التطبيق لك.

الخطأ يظهر لك لأن محتويات الpackage التي ينتجها electron تكون read-only أي أن الملفات في الحزمة تكون غير قابلة للتعديل ولكن للقراءة فقط. بما أنك تضع قاعدة البيانات داخل ملف المشروع فلن ينجح الأمر. لحل المشكلة نقوم بوضع قاعدة البيانات في مسار خارج ملف المشروع ومن ثم إجراء التعديلات اللازمة في ملف drugs.js وكما يلي: قم بإنشاء حافظة folder في القرص الصلب C أو D أو غيره بشرط أن يملك المستخدم كامل صلاحيات الوصول الى الملفات فيه. وليكن إسمه databases قم بنسخ ملف قاعدة البيانات draugsDB.db إلى المسار الذي أنشأته في الخطوة السابقة. ألان نعدل على ملف drugs.js ونضيف مسار قاعدة البيانات الجديد وكما يلي. const { ipcRenderer } = require("electron"); const path = require("path") // نستورد هذه المكتبة لغرض إنشاء المسار الصحيح لملف قاعدة البيانات const dbPath= path.join( // ننشيء المسار الجديد ونضعه في ثابت path.dirname('c://'), // مسار القرص الصلب الذي قمنا بإختياره '/databases/drugsDB.db' // هنا تضع هذا المسار الذي يشير الى ملف قاعدة البيانات ) console.log("dbPAth", dbPath) const sqlite3 = require("sqlite3"); var db = new sqlite3.Database(dbPath, (err) => { // نستعمل ثابت المسار الجديد للإتصال بقاعدة البيانات if (err) { console.log("could not open db"); } else { console.log("Connected to db"); } }); ...

لإستبدال عدة أجزاء من النص وطبقاً لما هو مطلوب في سؤالك سنستعمل replace ولكن لن نكون بحاجة لإستدعاءها يدوياً, وإنما سنستعمل for للمرور على مصفوفة مسبقة التعريف تضم جميع القطع النصية المراد إستبدالها. تابع المثال التالي: marks = ["@", "$", "#", "%"] # نحصر جميع الرموز المراد إستبدالها في مصفوفة text="We@are#good@people##just$like%you" # نضع النص المطلوب معالجته في متغير وليكن النص أعلاه for x in marks: # نستعمل أداة التكرار للمرور على جميع عناصر المصفوفة # x يمثل العنصر الحالي قيد المعالجة في أي دورة من حلقة التكرار text=text.replace(x, x+"\\") #نستبدل العنصر الحالي في الدورة الحالية من التكرار بالقيمة المرغوبة print(text) # طباعة النص بعد معالجته #We@\are#\good@\people#\#\just$\like%\you # النص عند طباعته تجدر الملاحظة أننا قمنا بعمل escape لقيمة النص المزادة عند الإستبدال وهي في حالة المثال "\" فأصبحت "\\" ذلك أن backslash أصلا نستعمله لعمل escaping. ما معناه إذا وضعنا x+"\" سيتم تخطي علامة التنصيص الخاصة بالنوع string ويتسبب بالتالي ب syntaxError.

يمكنك إقتطاع النص بأكثر من طريقة نذكر منها التعبير النمطي (regex (regular expression. في لغة بايثون توجد الأداة re سنستخدمها في المثال القادم لإستخلاص النص المرغوب بدلالة جزء معين من النص string. import re # إستيراد الأداة txt = "hello,world! I'm a programmer" # النص المراد معالجته x = re.search("(?<=hello,world).*", txt) # إقتطاع الجزء غير المرغوب به result= x.group(0) # حفظ النص المستخلص في متغير print( result ) # => ! I'm a programmer #طباعة النص المستخلص # ?<= or look behind #يسمى بطريقة النظر الى الخلف وظيفته بدء البحث عن النص ابتداءً من جزء نصي معين #.* #رمز النقطة يشير الى أي رمز نصي #النجمة لتكرار الشيء الذي قبلها لاحظ أننا أجرينا البحث بدلالة hello,world لتضييق دائرة البحث عندما يكون النص أطول. لكن البحث بدلالة world فقط سيعطي أيضا النتيجة ذاتها في مثالك الذي إستخدمناه للتوضيح. ومنه تفهم أنك تعدل نطاق البحث بحسب الحاجة.

يمكنك التحقق من الزمن بإستخدام جملة شرطية بسيطة في جافاسكربت من خلال مقارنة الزمن في اللحظة الحالية مع الزمن الذي تريد التحقق من أقدميته. لن تكون بحاجة إلى البحث عن دوال معقدة لإنجاز المهمة. تابع المثال التالي ... <script> function checkDate(){ // تعريف الدالة var date = moment("2021-10-13T08:35:47.510Z")// الزمن المطلوب var now = moment(); // اللحظة الحالية if (now > date) { // مقارنة الزمن المطلوب التحقق منه مع الزمن في اللحظة الحالية // date is past console.log("الزمن في الماضي") // الزمن الحالي أحدث من المطلوب التحقق منه } else { // date is future console.log("الزمن في المستقبل") // المطلوب التحقق منه لم يأتي بعد } } </script> ... <button onclick="checkDate()"> تحقق من الزمن</button> ... ملاحظة: يرجى الإنتباه الى صيغة الزمن التي تتحقق منها. قيمة الزمن التي في سؤالك "2022-10-01T00:12:10:19Z" ليست قيمة ISO_8601 معرفة. يتضح ذلك من خلال فحصها بالجملة البرمجية التالية moment("2022-10-01T00:12:10:19Z", moment.ISO_8601).isValid() // الناتج يكون false

لإخفاء الرابط نحتاج javascript وليس css. يمكن تحقيق هذا الهدف بطريقين وكما يلي شرحه: أولاً: التحكم في قيمة href على العنصر a. يمكن القيام بذلك بقطعة كود تستهدف جميع العناصر المطلوبة طبقاً لهويتها أو نوعها. سنقوم بالمثال التالي بتحديد جميع عناصر a التي لا نريد إظهار روابطها للمستخدم من خلال حصرها بصنف css واحد وليكن no-link. سنستخدم أيضاً events مثل mouseover و mouseleave و click. فيما يلي مثال: ... <--HTML CODE --> <div class="section"> <a href="www.link-will-not-be-targeted.com">Link appears</a> <a class="no-link custom-link" href="https://www.example.com">Example Link</a> <a class="no-link custom-link" href="https://www.google.com">google Link</a> </div> ... <script> document.addEventListener("mouseover", function(event){ // رصد حركة الماوس عبر العناصر let element= event.target // تعيين العنصر الذي يتحرك الماوس عبره if(element.classList.value.split(" ").find(x=> x==="no-link")){ // نستهدف العنصر فقط إذا كان من النوع الذي سبق تعيينه وذلك بفحص قائمة الأصناف المسندة الى العنصر let link= element.attributes.href.value // الإحتفاظ بنسخة من الرابط الأصلي function click (){ // تعريف دالة فتح الرابط عن طريق جافاسكربت window.open(link) } function leave (){ // تعريف دالة تقوم بإعادة تعيين الرابط الأصلي على العنصر بعد أن يتحرك الماوس بعيداً عنه element.setAttribute("href", link) } if (link.toLowerCase().indexOf("#") >= 0) { // إذا كانت قيمة الرابط هي "# hash" لا نجري تغيير لإنتفاء الحاجة console.log("link is already not active") } else { element.removeAttribute("href") // نزيل الرابط من العنصر فلا يظهر في status bar element.addEventListener('mouseleave', leave) // ربط تحرك الماوس خارج العنصر بالدالة مسبقة التعريف أعلاه element.addEventListener('click', click) ربط إجراء النقر على الرابط بالدالة ذات العلاقة أعلاه } } }) </script> ... ثانياً: التحكم ب status bar عن طريق window.status لكن هذا الخيار ربما لم يعد متاحاً في عدد من المتصفحات browsers. وهنا لا ينصح به حلاً لأن خاصية window.status باتت deprecated بمعنى لم تعد مدعومة.

لا يسمى هذا خطأً ولكن تحذير أي warning لا يتسبب بتعطيل التشغيل كما في Error, تطلقه React عندما تريد تنبيهك إلى أنك لا تسير بالطريق الصحيح في جزءٍ أو أكثر من الكود. كما يظهر التحذير أحيانا في حالة Deprecation أي عندما يراد تنبيهك أن خاصية معينة أو أداة ما سيتم التخلي عنها في النسخ المستقبلية للبرمجية قيد الإستعمال. ينهبك التحذير في الصورة المرفقة إلى أنك لا تتبع قواعد HTML القياسية المنصوص عليها من قبل World Wide Web Consortium(W3C). يجب أن نفهم أن كل وسم TAG في HTML له وظيفة محددة أو أكثر, ولا يمكن إستخدام أي من هذه الوسوم بشكل عشوائي حيث يساهم إلتزامك بالقواعد بإنتاج كود برمجي أكثر جودة يتيح لك وللمبرمجين الأخرين الذي قد يعملون على نفس المشروع أنياً أو لاحقاً, من التطوير والمتابعة بمسار صحيح. الوسم div هو حاوية لحصر مجموعة عناصر بينما p وسم مختص بالنصوص, فلا يمكنك وضع div داخل p. الشيء نفسه يحصل عند محاولتك وضع p داخل ul التي تعني قائمة غير مرقمة والتي من المفترض أن تحتوي li. لا بد من قضاء بعض الوقت في التعرف على خصائص أهم الوسوم شائعة الإستعمال بغية تجنب مثل هذا التحذير مستقبلاً.

إستخدامك للدوال مسبقة التعريف هو الأمر الطبيعي في حال كنت ترمي لصنع برمجيات لا تعتمد بشكل كبير على أدوات خارجية third-party . من جهة أخرى توفر هذه الأدوات عليك الجهد والوقت وتعطيك الفرصة لتركز أكثر على صناعة حلول برمجية للمشكلات قيد الحل أو المشروع الذي تعمل عليه. للأجابة على سؤالك لابد أولا من تحديد فيما إذا كنت تستعمل javascript في المتصفح أم node.js. لكن لحسن الحظ يمكنك إستعمال مكتبة moment لأتمام المهمة في كلا الحالتين ولكن بطريقتي عمل مختلفتين جزئياً. في المثال التالي سنوضح كيفية تثبيت(أو إستيراد) المكتبة المذكورة في كل حالة وكما يلي: ... <!--في ملف HTML --> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" ></script> <!-- إستيراد المكتبة من المصدر --> ... <script> function formateDate(){ let date= new Date(Date.now()) // تأريخ اليوم console.log("date now", date) let formatted =moment(date).format('DD-MM-yyyy hh:mm:ss') // تحويل الوقت/التأريخ الى الصيغة المطلوبة console.log("formated datetime", formatted) // => 02-09-2022 09:41:30 } </script> في حالة nodejs نقوم أولا بتثبيت المكتبة من خلال cmd أو terminal في المسار الرئيسي للمشروع حيث يوجد ملف package.json. نقوم بتنفيذ أحد الأمرين التاليين بحسب ما تستخدمه. /* $ yarn add moment إو $ npm install moment */ // الأن نقوم بألإستيراد const moment= require("moment") // //أو في حالة es6 //import moment from "moment" // نستدعي الدالة كما تم شرحه سابقاً let date= new Date("02-Sep-2022 09:41:30") let formatted =moment(date).format('DD-MM-yyyy') console.log("formated datetime", formatted) // => 02-09-2022

إذا كنت تسعى لوضع component فرعي مع رئيسي فلست بحاجة لتصدير الفرعي ولا يمكن ذلك بالأصل. في المثال الذي وضعته تستطيع فقط تصدير Container وأستعمال Slide بداخله أو بالعكس طالما أنهما داخل نفس الملف. على أية حال لا يتعبر هذا الإجراء محبذاً حيث أن الأفضل دائماً فصل المكونات في ملفات منفصلة لضمان سهولة تعديلها أو حذفها وتصحيح الأخطاء خلال التطوير. export default تعني أن الcomponent الذي تصدره هو المفترض الذي ستقوم بإستيراده في ملف أخر بواسطة import import X from './x.jsx' // X المطلوب إستيراده // './x.jsx' مسار الملف

لا يتضح من خلال الصورة المرفقة إذا كنت تقصد أن div-a هو إسم صنف أم تقصد شيء أخر. بكل الأحوال سأعطيك مثال يجيب على سؤالك. هناك طريقتين لأنجاز الأمر بإستعمال الأصناف المزيفة css-pesudo-classes إما nth-last-child أو not(:last-child) وفيما يلي مثال بالطريقتين. <!-- HTML CODE --> ... <div class="section"> <a>One</a> <a>Two</a> <a>Three</a> </div> ... /* CSS */ div.section{ /* تعريف شكل الحاوية وضبطها لتعرض عناصرها بشكل عمودي background-color: blue; /* لون الخلفية */ display: flex; /* طريقة العرض */ flex-direction: column; /* إتجاه العرض عمودي*/ } /* الطريقة الأولى*/ div.section a { /* تعريف العنصر a */ color:#fff /* تحديد اللون */ opacity: .5; /* جميع العناصر: تعيين قيمة الشفافية*/ } div.section a:nth-last-child(0n+1){ /* يحل هذا التعريف المشكلة حيث يستهدف أخر عنصر في الحاوية*/ opacity: 1; /* العنصر الأخير: تعيين قيمة الشفافية*/ } /* الطريقة الثانية*/ /* يمكنك تحقيق نفس النتيجةأعلاه بتطبيق الطريقة إدناه */ div.section a { /* تعريف العنصر a */ color:#fff /* تحديد اللون */ } div.section a:not(:last-child) { /* تعريف يستهدف جميع العناصر في الحاوية دون العنصر الأخير */ opacity: .5; /* تعيين قيمة الشفافية*/ } ...

تصحيح: بالخطأ كتبنا replacementCoun في parameters الدالة والصحيح هو replacementCount.

لا توجد طريقة مباشرة built-in لأستبدال عناصر المصفوفة في javascript. ما يجدر الأشاره له هو أن المصفوفات قد تحتوي أنواع مختلفة من البيانات dataTypes مما يجعل وضع حلاً موحداً لكل الإحتمالات شيء بالغ التعقيد. لحسن الحظ يمكنك تعريف دالتك لخاصة للنوع Array وتشغيلها بالطريقة ذاتها التي تستدعي بها الدوال مسبقة التعريف لصنف ما. في حالة المصفوفة التي تحتوي على عناصر من نوع Number يمكنك الأستعانة بالدالة أدناه كأحد الحلول نظراً لوجود أكثر من طريقة للوصول إلى النتيجة ذاتها. Array.prototype.replaceInPlace= function ( target, // العنصر المستهدف replacement, // قيمة الإبدال replacementCoun // عدد مرات الإستبدال ) { let replaced= 0 // عدد مرات الإستبدال المنفذة for (let index = 0; index < this.length; index++) { // المرور على جميع عناصر المصفوفة if (this[index] === target ) { // محاولة العثور على القيمة المستهدفة this[index] = replacement; // إستبدال العنصر المستهدف replaced++ // تعديل عدد مرات الإستبدال المنفذة } if(replacementCount && (replaced === replacementCount) ) { break // إيقاف الإستبدال عند الوصول الى عدد العناصر المحدد المراد إستبدالها } // إذا لم يتم تعيين replacementCount سوف تستمر الدالة بالبحث.. } } let arr = [1, 2, 3, 4, 5, 4, 6, 7, 8, 9]; arr.replaceInPlace(4, 999) // إستدعاء الدالة console.log( arr ) // => [1, 2, 3, 999, 5, 999, 6, 7, 8, 9] لاحظ أن الدالة تعدل على المصفوفة الأصلية ولا تعيد مصفوفة جديدة.

حاول تعديل إعدادات الطابعة الإفتراضية لديك default printer

يتم استخدام UseCallback لتحسين سلوك عرض مكوناتfunction components في React ، بينما يُستخدم useMemo لتذكر الدوال وتجنب الإضطرار إلى إستدعائها في كلrender . كإنشاء قياسي لل hooks ، فإن هذين الحلين ليسا مختلفين تمامًا. كما هو الحال مع useEffect ،ال hook الذي يدير الآثار الجانبية في functional components ، يأتي callback أولاً ثم مصفوفة من dependencies. بخصوص useEffect فأنه واحد من اهم ال hooks شيوعاً في الإستخدام بجانب useState. نستعمله عندما نريد إجراء تعديل على حالة ال component بعد ال render أي بعد التشغيل والإرجاع return المساوي ل render في حالة class component حيث تقوم بنفس عمل componentDidMount و أيضا تعوض عن componentDidUpdate const myComp= ( props ) => { const [name, setName]= useState('غير محدد') const displayMyName = () => { setTimeout(()=>setName("Ali"), 5000) // نصب مؤقت لتعديل قيمة الاسم بعد مرور 5 ثواني على ال rendering } // عرض الأسم بعد 5 ثواني useEffect(()=>displayMyName()) // استدعاءها يحصل مباشرة بعد ال rendering return( // عند التشغيل سيظهر الإسم غير محدد ثم يتم تعديله تلقائياً <div>My name is {name}</div> ) } المثال أعلاه يمثل نموذج لإستعمال useEffect بمعية useState إلا إنه لا يحصر كل ما يتعلق بالإثنين. فيما يلي مثال ومقارنة أساسية بين useCallback و useMemo: useCallback تستدعى من قبل المطور نفسه بينما React تقوم بإستدعاء useMemo كما في المثال: function memoUseFunc() { const x = useMemo(() => { return <div>الجو حار</div> }) return x } function callbackUseFunc() { const x = useCallback((name) => { return <div>مرحبا {name}</div> }) return x() } يحتوي متغير useMemo على نتيجة الإرجاع فقط ، مما يعني تجاهل كل شيء في جسم دالة الوسيطةcallback. بينما يحتوي متغير useCallback على function. إنه يستخدم ببساطةstring ، تُعرف أيضًا ب return statement اي الراجع من الإستدعاء. هذا يعني أن هذين الأسلوبين يقدمان نفس النتائج. من الجدير بالذكر ان useMemo ليس لها parameters بعكس useCallback التي تأخذ أي عدد من الparameters وفي مثالنا أعلاه لدينا name. يمكنك قراءة المزيد عن الموضوع في الموقع الرسمي ل React

يعد استيراد وتصدير الملفات جزءًا مهمًا من أي لغة برمجة. يعمل إستيراد الوظائف أو الوحدات النمطية على تحسين إمكانية إعادة استخدام التعليمات البرمجية. عندما يزداد حجم التطبيق ، يصبح الاحتفاظ بملف واحد به جميع الوظائف والمنطق أمرًا صعبًا. كما أنه يعيق تصحيح الأخطاء. لذلك ، من الممارسات الجيدة إنشاء ملفات منفصلة لوظائف محددة واستيرادها لاحقًا وفقًا للمتطلبات. يسمح Node.js أيضًا باستيراد وتصدير الوظائف والوحدات. يمكن استيراد الوظائف الموجودة في وحدة واحدة واستدعائها في وحدات أخرى مما يوفر الجهد لنسخ تعريفات الوظائف في الملفات الأخرى. يمكن تحرير الوحدة النمطية أو تصحيحها بشكل منفصل مما يسهل إضافة الميزات أو إزالتها. إنشاء وحدة: يتم إنشاء الوحدات النمطية في ملفات جافا سكريبت Node.js. في كل مرة يتم إنشاء ملف جديد بامتداد .js ، يصبح وحدة نمطية module. تصدير وحدة نمطية: اسم الملف: func.js const func= function() { console.log("I'm a funtion") } export func // es6 // أو module.export= {func} في الكود أعلاه تم إنشاء module يحتوي على دالة إسمها myFunc ثم تصديره بواسطة export حتى نتمكن من استعماله لابد من إستيراده ويتم ذلك بالشكل التالي على فرض ان جميع الملفات في نفس المسار وليكن الملف الذي نستورد داخله يدعى app.js : import {func} from './func' // => es6 func() // إستدعاء // الناتج يظهر I'm a funtion