Salah Eddin Beriani2

هذا كود من مكتبة jquery وهي مكتبة javascript قديمة والكود هو مستمع لتمرير النافذة ويحدد ما ان كانت النافذة ممررة الى الأسفل بقيمة أكبر من 10px فاذا كانت كذلك يضيف class header-active الى العنصر الذي يحمل id=header أما اذا كان العكس فسوف يزيل ال class header-active من العنصر $(window).on('scroll load',function(){ if($(window).scrollTop() > 10){ $('#header').addClass('header-active'); } else{ $('#header').removeClass('header-active'); } });

هناك مكتبة تدعى pyfirmata تمكنك من كتابة كود بايثون وجعله يتصل ب أردوينو وهذا مثال على ذلك import pyfirmata import time board = pyfirmata.Arduino('/dev/ttyACM0') it = pyfirmata.util.Iterator(board) it.start() analog_input = board.get_pin('a:0:i') led = board.get_pin('d:13:o') while True: analog_value = analog_input.read() if analog_value is not None: delay = analog_value + 0.01 led.write(1) time.sleep(delay) led.write(0) time.sleep(delay) else: time.sleep(0.1) والشرح المفصل تجده في مدونة real python

للوصول لعدد أيام الشهر 2 أنت تحتاج أيضا للسنة كمتغير يوفره المستخدم وهناك نوعام من السنوات سنة عادية تحتوي على 365 يوم و leap year تحتوي على 366 يوم ال leap year تقبل القسمة على 4 ولا تقبل القسمة على 100 لكن ان كانت تقبل القسمة على 4 و 400 و 100 فهي leap year class CalcNumberOfDays(object): def numberOfDays(self, y, m): leap = 0 if y% 400 == 0: leap = 1 elif y % 100 == 0: leap = 0 elif y% 4 == 0: leap = 1 if m==2: return 28 + leap list = [1,3,5,7,8,10,12] #أرقام الاشهر التي تحتوي على 31 يوم if m in list: return 31 return 30 ob1 = CalcNumberOfDays() y= input("year:") codemon=input("month:") print(ob1.numberOfDays(int(y), int(codemon)))

اخي ملفات الفيديو في مشروعك تحتوي على تسميات خاطئة لا تسمي الملفات بكلمات بينهم فراغ بل اربط التسمية اواستخدم كلمة واحدة للتسمية مشروعك عمل معي والفيديوهات عملت

يمكنك أن تنشأ خطاف لاحتواء المنطق الذي يتعامل مع البيانات بهذه الطريقة import { useState, useEffect } from 'react'; import axios from 'axios'; const useData = () => { const [data, setData] = useState(); useEffect(() => { function getData() { axios.get('http://localhost:5000/posts').then((res) => { setData(res.data); }); } getData(); }, []); return data; }; export default useData; ويمكنك استيراده في المكون وهكذا سيكون الكود نظيف ودقيق وهذا مثال بسيط فقط بل يمكنك أن تذهب خطوة الى الامام وتجعل useData دينامكيا عن طريق الشروط والمعايير وتستخدمها في كل المكونات التي تحتوي على منطق يتعامل مع البيانات import React from 'react'; import useData from './useData'; export default function App() { const data = useData(); return ( <div> {data && data.map((post) => ( <div key={post.id}> <h1>{post.title}</h1> <p>{post.description}</p> </div> ))} </div> ); }

يجب ان تحدد معنى قيمة اولا لانه في هذه الحالة لا اظنك يجب ان تقلق على null و undefined فقط لذا يجب ان تسأل نفسك هل مثلا string فارغ قيمة مقبولة بالنسبة لك ام لا ويمكنك ان ترى في الكود في الاسفل ماهو truthy وما هو falsy !null //true !undefined //true !" " //false !0 //true هذا يعتمد جدا على ما تريده انت فاذا كنت تريد ان تعطل العنصر في حالة لم يكن المتغير معرف او null فقط فيمكنك عكس قيمته المنطقية <input type="text" disabled={!name} /> لكن ان كنت تريد تعطيله ايضا لما يتواجد عندك string فارغ مثلا ففي هذه الحالة ستقوم بربط سلاسل شرطية بما يناسبك

يجب ان تضيف type لعناصر ال video <div class="video-container"> <video type="video/mp4" src="images/pizza.mp4" autoplay loop class="vid vid1"></video> <video type="video/mp4" src="images/pizza2.mp4" autoplay loop class="vid vid2"></video> <video type="video/mp4" src="images/video.mp4" autoplay loop class="vid vid3"></video> </div> وايضا لا تسمي الملفات بهذه الطريقة good pizza.mp4 تسمية الملفات يجب ان تكون مترابطة good_pizza.mp4

انت تحاول اتباع نمط معماري يفصل التطبيق الى ثلاثة مكونات منطقية رئيسية هي Controller+Model+View ويسمى باختصار MVC ومفاده هو فصل المنطق وطبقة العرض عن بغضهما البعض وهذا تماما ما قمت به انت لذا فالخطوة التي قمت بها صحيحة. وحول سؤالك الثاني عن تخزين html في ال DATABASE فهذه خطوة سيئة ولا تتماشى مع كيفية البرمجة العصرية فعوض عندما يأتي الطلب تقوم بارجاع الصفحة مباشرة من السيرفر هكذا سوف تاخذ رحلة اظافية الى قاعدة البيانات لجلب الصفحة ناهيك عن مشاكل في كيفية تعديل الصفحة لاحقا لذلك لا يجب عليك فعل ذلك

يجب الاطلاع أولا عل الكود سورس الخاص بمدونتك لتحديد ما ان كان هناك كود javascript غير مستخدم ثم محاولة ازالته بطريقة لا توثر على عمل المدونة الاساسي وان لم تكن تعرف البرمجة فالحل الوحيد هو عبر توظيف مستقل له دراية بالمجال تمكنه من فحص المدونة وتسريعها عبر ازالة كل ماهو غير مستعمل وتعديل الكود المتبقي ليعمل بسلاسة

في الموقع الرسمي ل react-router لديهم حل لهذه المشكلة وهذا هو الرابط والحل المقترح من طرفهم هو ببساطة انشاء مكون ثم في ذلك المكون استخدمو الخطاف useLocation ليجلبو ال pathname بعدها اعطوه كمعيار ل useEffect مما يعني انه كلما تغير pathname سيعمل الكود داخل ال useEffect وهو عبارة عن كود يضمن ان الصفحة ستكون في الوضعية الاولية. import React,{ useEffect } from 'react'; import { BrowserRouter as Router, Switch, Route,useLocation } from 'react-router-dom'; import Navbar from './components/navbar'; import Footer from './components/footer'; import Home from './pages/home'; import About from './pages/about'; import Dashboard from './pages/dashboard'; function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; } export default function BasicExample() { return ( <Router> <div> <ScrollToTop></ScrollToTop> <Navbar></Navbar> <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/about"> <About /> </Route> <Route path="/dashboard"> <Dashboard /> </Route> </Switch> <Footer></Footer> </div> </Router> ); }

في حالتك انت تحتاج الى متغير اخر ليساعدك في تحديد اسم الطبقة التي تريد تغييرها ويمكنك ان تعطيها الى handleChange بهذا الشكل onChange={(e) => handleChange(e, 'اسم الطبقة')} ثم يمكنك الاعتماد على ذلك لتغيير ال state بهذا الشكل const handleChange = (e, objKey) => { const { name, value } = e.target; setForm((prevForm) => ({ ...prevForm, [objKey]: { ...prevForm[objKey], [name]: value } })); }; function App() { const [form, setForm] = useState({ info: { firstname: '', lastname: '', email: '', password: '', confirmPassword: '' }, address: { country: '', city: '', line1: '', line2: '' }, }); const handleChange = (e, objKey) => { const { name, value } = e.target; setForm((prevForm) => ({ ...prevForm, [objKey]: { ...prevForm[objKey], [name]: value } })); }; console.log(form); return ( <div> <h2>signup</h2> <input type="text" placeholder="firstname" name="firstname" value={form.info.firstname} onChange={(e) => handleChange(e, 'info')} /> <input type="text" placeholder="lastname" name="lastname" value={form.info.lastname} onChange={(e) => handleChange(e, 'info')} /> <input type="email" placeholder="email" name="email" value={form.info.email} onChange={(e) => handleChange(e, 'info')} /> <input type="password" placeholder="password" name="password" value={form.info.password} onChange={(e) => handleChange(e, 'info')} /> <input type="password" placeholder="confirmPassword" name="confirmPassword" value={form.info.confirmPassword} onChange={(e) => handleChange(e, 'info')} /> <input type="text" placeholder="country" name="country" value={form.address.country} onChange={(e) => handleChange(e, 'address')} /> <input type="text" placeholder="city" name="city" value={form.address.city} onChange={(e) => handleChange(e, 'address')} /> <input type="text" placeholder="line1" name="line1" value={form.address.line1} onChange={(e) => handleChange(e, 'address')} /> <input type="text" placeholder="line2" name="line2" value={form.address.line2} onChange={(e) => handleChange(e, 'address')} /> </div> ); } export default App;

اخي جرب هذه ال command pip list وتحقق ان المكتبة موجودة ان كانت موجودة فتحقق انك تستخدم النسخة الصحيحة من python وعادة محررات النصوص تضع خط اصفر تحت imports الجديدة في python ويمكنك عمل كود لاستخدام المكتبة و ستجد انها تعمل

react يستخدم تقنية المكونات وفي كل مرة تتغير حالة المكون يعاد تشغيله لعرض اخر التحديثات و تساعد المفاتيح React في تحديد العناصر التي تم تغييرها (تمت إضافتها / إزالتها / إعادة ترتيبها). لإعطاء هوية فريدة لكل عنصر داخل المصفوفة ، يلزم وجود key.

في react هنا نوعين من ال input نوع يتحكم فيه المتصفح ويسمى uncontrolled ونوع تتحكم فيه انت يدويا عن طريق الكود الذي تكتبه وهذا يسمى controlled ولا يمكننا استخدام الحالتين معا وفي حالتك انت تحاول استخدامهم معا حيث انه المكون كان يتوقع منك ان تعطي قيمة اولية لل input لكن عوضا عن ذلك انت تعطيه قيمة ال name وهو undefined في حالتك ويمكنك اصلاح هذا فقط باعطاء قيمة اولية ل name و string فارغ يكفي ليجعلك تتحكم في ال input import React, { useState, useEffect } from 'react'; export default function Login() { const [name, setName] = useState(""); useEffect(() => { console.log(name); }, []); return ( <div> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> </div> ); }

ماهو نظام التشغيل لديك? قم بنسخ الخطأ لنتعرف على المشكل

اولا انت تحتاج لجلب مكتبة axios عن طريق npm i --save axios او yarn add axios ثم قم بتغيير الكود كالتالي export const fetchProducts = () => { return async (dispatch) => { try { const response = await axios.get("https://rn-shopping-app-69186.firebaseio.com/products.json"); if (!response.status === 200) { throw new Error("Error - something went wrong"); } const resData = await response.data; const loadedProducts = []; for (const key in resData) { loadedProducts.push( new Product( key, resData[key].title, resData[key].imageUrl, resData[key].description, resData[key].price ) ); } dispatch({ type: SET_PRODUCTS, products: loadedProducts, }); } catch (error) { throw error; } }; }; وهذه بعض الاختلافات بين fetch و axios fetch يرجع body اما axios يرجع data في ال post request يجب ان ننادي JSON.stringify على ال body فيما يخص fetch في fetch طلب الجلب يكون ok عندما تحتوي الاجابة على ok اما بالنسبة ل axios فيجب ان يحتوي طلب الجلب status =200 و statusText يكون ok للحصول على ال json في fetch ننادي الدالة json على الاجابة اما بانسبة ل axios ندخل لل data مباشرة

المقال يشرح كل ذلك لكن ببساطة يمكنك انشاء مجلد في اي مكان تريدنه ثم في ذلك تامجلد يمكنك انشاء ملف سمه ما شئت لكن اضيفي في اخر الاسم .html مثلا index.html ثم اضيفي هذا الكود له واحفظيه <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="main.css"> <title>Web Portfolio of Marco</title> </head> <body> <h1>Web Portfolio of Marco</h1> <h2>Welcome!</h2> <p>Thanks for stopping by.</p> <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.</p> <img src="marco.jpg" alt="Picture of me"> <p>Marco :-)</p> </body> </html> تلاحظين هذا السطر يستدعي ملف css خارجي اسمه main.css <link rel="stylesheet" href="main.css"> أنشئي ذلك الملف في نفس المجلد السابق وسمه بنفس الاسم وقبل اضافة اي شئ له افتحي ملف ال html الذي انشأته سابقا في المتصفح وسترين محتوى كله بالاسود. الان اضيفي هذا الكود الى ملف ال css واحفظيه وهذا الكود ببساطة يحدد h1 العنوان الكبير ويغير لونه للاحمر h1{ color:red; } اعيدي فتح ملف ال html وستلاحظين التغيير

كما تشير مستندات React.js ، فإن النمط الشائع في React هو أن تعيد المكونات عناصر متعددة. عادة ما يتم تغليف هذه العناصر على سبيل المثال داخل div. في معظم الحالات ، يكون الغلاف div "غير ذي صلة" ويتم إضافته فقط لأن مكونات React تتطلب منك إرجاع عنصر واحد فقط. ينتج عن هذا النوع من السلوك ترميز عديم الفائدة وأحيانًا يتم عرض HTML غير صالح ، وهو أمر سيء. على سبيل المثال ، يمكن أن يكون لدينا جدول مكون يعرض جدول HTML وداخل هذا الجدول يتم تقديم الأعمدة بمكون آخر يسمى الأعمدة. من المحتمل أن يبدو شيء من هذا القبيل. function Table(){ return ( <table> <tr> <Columns /> </tr> </table> ); } function Columns(){ return ( <div> <td>Hello</td> <td>World</td> </div> ); } قد يؤدي هذا إلى عرض HTML غير صالح لأن الغلاف div من مكون الأعمدة يتم عرضه داخل <tr>. <table> <tr> <div> <td>Hello</td> <td>World</td> </div> </tr> </table> الحل لهذا هو Fragment React فهو يتيح تجميع قائمة من العناصر الفرعية دون إضافة عقد إضافية إلى DOM لأن الأجزاء لا تُعرض على DOM. لذلك نستخدم React.Fragment بشكل أساسي حيث نستخدم عادةً غلاف div. function Columns(){ return ( <> <td>Hello</td> <td>World</td> </> ); } الآن سيعرض مكون الجدول HTML التالي: <table> <tr> <td>Hello</td> <td>World</td> </tr> </table>

اخي انت تفتح الملف عبر الضغط عليه لهذا يطلع معك في المتصفح على شكل رابط لملف محلي يمكنك ان تستخدم محرر نصوص ك vscode وتفتح فيه المجلد الخاص بمشروعك ثم تقوم بتحميل اضافة live server في vscode وستنبثق لك ايقونتها في الاسفل ويمكنك الضغط عليها وسيفتح مشروعك في الرابط المحلي http://localhost:5000 اما عن https فهذا يمكنك الحصول عليه عن طريق ssl certificate ويمكنك ان تقرأ هنا كيف تستضيف موقعك على الانترنت

setCount هي عملية asynchronous يعني تحديث ال state لا يكون لحظي ففي اللحظة التي يشتغل فيها console.log ال state لم يتغير بعد لذلك تحصل على ال state قبل ان يتغير. فاذا كانت لديك عملية لتقوم بها على ال state المتغير فيمكنك تغيير الكود ليصبح كالتالي import React from 'react'; export default function Counter() { const [count, setCount] = useState(1); const increment = () => { setCount(currentCount => currentCount + 1); }; const decrement = () => { setCount(currentCount => currentCount - 1); }; //عند تحديث الحالة يعاد تشغيل المكون useEffect(() => { console.log(count) }, [count]) return ( <div> <button onClick={decrement}>-</button> {count} <button onClick={increment}>+</button> </div> ); } هكذا ستحصل على ال state بعد تحديثه داءما ويمكنك اجراء العملية التي تريدها على اخر تحديث له

في الحقيقة هذا ليس تحذير من react بل هو تحذير من eslint-plugin-react-hooks و eslint في هذه الحالة يريدك ان تضع getPosts كمعيار للخطاف useEffect هكذا useEffect(() => { getPosts(); }, [getPosts]); لكن هذا قد ينتج عنه ان الدالة ستشتغل في كل اشتغال للمكون وهذا ما لا تريده خاصة ان كانت الدالة لا تعتمد على معايير خارجية متغيرة لذا فالاستخدام الصحيح هنا انك تعرف الدالة داخل الخطاف بهذا الشكل import React from 'react'; import axios from 'axios'; export default function Users() { useEffect(() => { const getPosts = () => { axios .get('http://localhost:4000/posts') .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); }; getPosts(); }, []); return <div>posts</div>; }

في الحقيقة هذا خطا شائع و يحصل لي داءما لكن حله بسيط فقط يجب ان تفهم ان المكون عندما تزور صفحة الويب يشتغل مباشرة وفي حالتك انت استجابة السيرفر قد تاخذ بعض الوقت وهنا المكون عندما يشتغل سيحاول الدخول الى معلومات غير متواجدة وهنا يحصل الخطا ويمكنك معالجته بالتاكد ان state في هذه الحالة لا يساوي undefined import React from 'react'; import axios from 'axios'; export default function Users() { const [res, setRes] = useState(); useEffect(() => { async function getData() { const res = await axios.get('http://localhost:3000/api/users'); if (res.status === 200) { setRes(res); } } getData(); }, []); return ( <div> // هنا نتأكد ان res لا تساوي undefined {res && res.data && res.data.users.map((user) => <p key={user.id}>{user.name}</p>)} </div> ); } وهناك طريقة اخرى لمعالجة المشكلة باستخدام خاصية حديثة يقدمها javascript وهي ال ? import React from 'react'; import axios from 'axios'; export default function Users() { const [res, setRes] = useState(); useEffect(() => { async function getData() { const res = await axios.get('http://localhost:3000/api/users'); if (res.status === 200) { setRes(res); } } getData(); }, []); return ( <div> {res?.data?.users.map((user) => ( <p key={user.id}>{user.name}</p> ))} </div> ); } هذا الكود res && res.data && res.data.users يساوي res?.data?.users

هناك خياران مختلفان لإضافة عنصر إلى قائمة بدون تغيير ال state الأصلي: case ADD_ITEM : return { ...state, arr: [...state.arr, action.newItem] } أو case ADD_ITEM : return { ...state, arr: state.arr.concat(action.newItem) }

ReactJS هي مكتبة JavaScript ، تدعم كل من الويب الأمامي ويتم تشغيلها على خادم لبناء واجهات المستخدم وتطبيقات الويب. وتتبع مفهوم المكونات القابلة لإعادة الاستخدام. React Native هو إطار عمل متنقل يستخدم محرك JavaScript المتاح على المضيف ، مما يسمح لك بإنشاء تطبيقات جوال لأنظمة أساسية مختلفة (iOS و Android و Windows Mobile) في JavaScript الذي يسمح لك باستخدام ReactJS لبناء مكونات قابلة لإعادة الاستخدام والتواصل بمكونات أصلية. كلاهما يتبع امتداد بناء جملة JSX لجافا سكريبت. الذي يتم تجميعه إلى مكالمات React.createElement في الخلفية

لا توجد طريقة لتمرير props من مكون فرعي إلى مكون رئيسي. ومع ذلك ، يمكننا دائمًا نقل functions من العنصر الأصل إلى المكون الفرعي. يمكن للمكون الفرعي بعد ذلك الاستفادة من هذه functions. يمكن function بعد ذلك تحديث state في المكون الرئيسي . وهذا مثال حول ذلك import React from 'react'; function Increment({ count, onClickIncrement }) { return ( <div> {count} <button onClick={onClickIncrement}>increment</button> </div> ); } export default function Main() { const [count, setCount] = useState(1); const onClickIncrement = () => { setCount(count++); }; return ( <div> <Increment count={count} onClickIncrement={onClickIncrement}></Increment> </div> ); }