لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 02/22/23 in أجوبة
-
هل يجب توفد حاسوب بمواصفات عالية للتعلم و العمل علما لدي لابتوب 64bit و 4 Gb RAM ينفع اقدم على احد الكورسات و شكرا مسبقا1 نقطة
-
يجب عليك تعلّم الجافاسكريبت Javascript فهي العنصر الأساسي الثالث بالإضافة إلى HTML و CSS في تطوير الويب بجميع مجالاته سواء واجهات المستخدم أو خوام الويب. على الرغم من تشابه الاسم بينها وبين جافا إلا أن اللغتين مختلفتين تماماً لذلك أقترح عليك أولاً الاطلاع على بعض المصادر والتعرّف على تقنيات الويب واللغات الأساسية المستخدمة في تطوير الويب للتمييز بينها والبدء بالتعلّم بالشكل الصحيح. ستجد قسم كامل خاص بالجافاسكريبت بكافة فروعها ضمن أكاديمية حسوب من خلال الرابط التالي: https://academy.hsoub.com/programming/javascript/ كما يمكنك البدء بقراءة المقالات التالية:1 نقطة
-
1 نقطة
-
يعني مثلا انا عندي تطبيق to do list مكون من عنوان "to do list" وهنالك input elment وزر لل submit و list of items و list Item بس لما اعمل مكون لكل واحد فيهم بيواجهني مشكله اني مثلا مش بعرف ازاي اخد القيمة اللي في input element عند الضغط علي زرار ال submit واعمل post requiest وبعدين اعرضها في ال list of items1 نقطة
-
السلام عليكم ورحمة الله وبركاته كيف حالكم اتمنى ان تكونوا في خير حال ……………….. للاسف باني صفحات wpbackery لا يعمل لدي لا ادري ما السبب ياريت المساعدة بارك الله فيكم بكون معلق كدا وما بيظهر اي شئ اخر1 نقطة
-
في حال فهمت سؤالك بشكل صحيح. في البداية يجب فهم كيف يمكنك استخدام الـ JavaScript للوصول إلى قيمة العنصر input element وإدخالها في الـ list of items. يمكنك استخدام الأحداث (Events) لتحديد عندما يتم النقر على زر submit. عند حدوث هذا الحدث، يمكنك استخدام الـ DOM (Document Object Model) للوصول إلى قيمة الـ input element وإضافتها إلى الـ list of items. يمكن استخدام الـ XMLHttpRequest لإرسال post request وتحديث الـ list of items. هذا مثال بسيط يستخدم الـ HTML والـ JavaScript لإنشاء تطبيق to-do list: <!DOCTYPE html> <html> <head> <title>To-Do List</title> </head> <body> <h1>To-Do List</h1> <form> <input type="text" id="new-item"> <button type="submit" id="add-item">Add Item</button> </form> <ul id="list"></ul> <script> const form = document.querySelector('form'); const newItemInput = document.querySelector('#new-item'); const list = document.querySelector('#list'); form.addEventListener('submit', (event) => { event.preventDefault(); const newItemText = newItemInput.value; const newItem = document.createElement('li'); newItem.textContent = newItemText; list.appendChild(newItem); newItemInput.value = ''; }); </script> </body> </html> في هذا المثال، يتم استخدام الأحداث (Events) للتعامل مع النقر على زر الـ submit، ثم يتم استخدام الـ DOM للوصول إلى قيمة العنصر input element وإضافتها إلى الـ list of items. يتم أيضًا مسح قيمة العنصر input element بعد الإضافة. يمكن تحسين هذا الكود لإضافة المزيد من الميزات، مثل حذف العناصر أو تعديلها. كما يمكن استخدام مكتبات مثل React أو Angular أو Vue.js لتسهيل إنشاء تطبيقات to-do list أكثر تعقيدًا. يمكنك البدء بإنشاء مكونات (Components) في React لعناصر التطبيق المختلفة، مثل عنصر الإدخال (input) والزر (button) وقائمة العناصر (list of items). ثم يمكنك استخدام الأحداث (Events) في React للتعامل مع إضافة وحذف العناصر. فيما يلي مثال لكيفية استخدام React لإنشاء تطبيق to-do list: import React, { useState } from 'react'; function TodoList() { const [items, setItems] = useState([]); const [text, setText] = useState(''); function handleSubmit(event) { event.preventDefault(); if (text.trim().length === 0) { return; } const newItem = { text }; setItems([...items, newItem]); setText(''); } function handleDelete(index) { setItems(items.filter((_, i) => i !== index)); } return ( <div> <h1>To-Do List</h1> <form onSubmit={handleSubmit}> <input type="text" placeholder="Enter a new item..." value={text} onChange={(event) => setText(event.target.value)} /> <button type="submit">Add Item</button> </form> <ul> {items.map((item, index) => ( <li key={index}> {item.text} <button onClick={() => handleDelete(index)}>Delete</button> </li> ))} </ul> </div> ); } export default TodoList; في هذا المثال، يتم استخدام الـ hooks في React لإنشاء حالتين (state)، واحدة لقائمة العناصر (items) والأخرى لنص العنصر الجديد (text). يتم استخدام الـ useState لتعيين الحالة الأولى (items) إلى مصفوفة فارغة، ثم يتم استخدام الـ useState لتعيين الحالة الثانية (text) إلى قيمة فارغة. يتم استخدام الـ function handleSubmit عند النقر على زر الإضافة لإضافة عنصر جديد إلى قائمة العناصر. يتم التحقق من أن النص غير فارغ قبل إضافته. يتم استخدام الـ function handleDelete عند النقر على زر الحذف لحذف عنصر من قائمة العناصر. يتم استخدام الـ filter لإنشاء قائمة جديدة تحتوي على جميع العناصر باستثناء العنصر الذي تم حذفه. يتم عرض قائمة العناصر باستخدام الـ map، حيث يتم عرض كل عنصر في قائمة مع زر الحذف. يتم استخدام الـ key لتعيين مفتاح فريد لكل عنصر لتحسين أداء التطبيق. لتضمين هذا المكون في تطبيق React أكبر، يمكنك استدعاءه داخل المكون الأساسي الرئيسي (root component) وتضمينه في واجهة المستخدم باستخدام JSX، وهو لغة توضيحية تجمع بين JavaScript وHTML. import React from 'react'; import TodoList from './TodoList'; function App() { return ( <div> <h1>My Todo App</h1> <TodoList /> </div> ); } export default App; يتم استدعاء TodoList كمكون داخل المكون الرئيسي App باستخدام JSX، حيث يتم عرض العناصر الخاصة بـ TodoList تحت عنوان التطبيق الرئيسي. هذه هي بعض الأفكار الأساسية لاستخدام React في إنشاء تطبيق to-do list. يمكن تطويرها بمزيد من الوظائف والميزات، مثل التعديل والتصنيف والتنبيهات وما إلى ذلك.1 نقطة
-
يبدو أن الخطأ ينتج عن استخدام دالة eval() في دالة handelEqials(). في بعض الحالات، قد يكون استخدام دالة eval() خطيرًا ويمكن أن يتسبب في أخطاء في الصياغة أو ثغرات أمنية. يمكنك محاولة استخدام دالة math.evaluate() بدلاً من دالة eval() من مكتبة mathjs لتجنب هذه المشكلات. استبدل دالة handelEqials() بالتالي: const handelEqials=()=>{ setInbutText(math.evaluate(inbutText)) } تم تعديل الكود المقدم، حيث تم تعديل اسماء بعض الكمبوننتات والدوال لتكون متناسبة مع الكود المعروض، وتم تعديل بعض الخطوات لكي تقوم بعملية الحسابات بشكل صحيح، وتم تعديل الزر "/" ليعمل بشكل صحيح في الحسابات، وتم تعديل الزر "*" ليعمل بشكل صحيح في الحسابات، وتم اضافة الزر "-" لعملية الطرح في الحسابات. ويمكنك دائمًا استخدام الاختصار الذي سينظم ويزيل جميع الواردات imports غير الضرورية من الملف الحالي في MAC ، يكون [Ctrl + Option + O] بالنسبة للبعض هو [Option + Shift + O] وبالنسبة للويندوز استبدل option بزر Alt import React, { useState } from 'react'; import './App.css'; import Button from './components/Button'; import Inbut from './components/Inbut'; import ClearButton from './components/ClearButton'; import * as math from 'mathjs'; const App = () => { const [inbutText, setInbutText] = useState(''); const addToInbut = (val) => { setInbutText(inbutText + val); }; const handleEquals = () => { const result = math.evaluate(inbutText); setInbutText(result); }; return ( <div className="app"> <div className="calc-wrapper"> <Inbut inbut={inbutText} /> <div className="row"> <Button handleClick={addToInbut}>7</Button> <Button handleClick={addToInbut}>8</Button> <Button handleClick={addToInbut}>9</Button> <Button handleClick={() => addToInbut('/')}>/</Button> </div> <div className="row"> <Button handleClick={addToInbut}>4</Button> <Button handleClick={addToInbut}>5</Button> <Button handleClick={addToInbut}>6</Button> <Button handleClick={() => addToInbut('*')}>x</Button> </div> <div className="row"> <Button handleClick={addToInbut}>1</Button> <Button handleClick={addToInbut}>2</Button> <Button handleClick={addToInbut}>3</Button> <Button handleClick={() => addToInbut('+')}>+</Button> </div> <div className="row"> <Button handleClick={addToInbut}>.</Button> <Button handleClick={addToInbut}>0</Button> <Button handleClick={handleEquals}>=</Button> <Button handleClick={() => addToInbut('-')}>-</Button> </div> <ClearButton handleClick={() => setInbutText('')}>Clear</ClearButton> </div> </div> ); }; export default App;1 نقطة
-
أهلًا محمد، في أغلب الأحيان المدرب لم يستطع فهم المشكلة بشكل جيد لهذا يزيل الإعجاب وينتظر باقي المدربين لفهم السؤال المطروحـ حاول دائمًا شرح مشكلتك بشكل جيد مع إرفاق جميع الأمور التي تساعد المدربين على الإجابة لسؤالك، كالصور والأكواد، ورسائل الخطأ، كما أن عنوان السؤال مهم جدًا لفهم المدرب مشكلتك بشكل جيد قبل بدأ العمل على حل مشكتلك. تحياتي،1 نقطة
-
كما في التعليق السابق فإنه بناء تطبيق يستخدم ال AI Video Recognition فستحتاج لخبرة عالية جداً وستستخدم خدمات مفتوحة المصدر ويوجد العديد من هذه المشاريع على github ولكن لاستخدام هذه الخدمات تجارياً فيوجد هذه الخدمات الأفضل حالياً واجهات برمجة التطبيقات التجارية للVideo Recognition Google Video Intelligence: تقدم مجموعة متنوعة من الميزات الجاهزة للإنتاج للتعرف على كائن الفيديو. Amazon Rekognition: توفر مجموعة واسعة من النماذج والأدوات المُدرَّبة مسبقًا لتدريب النماذج الفردية. Microsoft Image Processing API: تتضمن العديد من خوارزميات اكتشاف كائنات الفيديو سهلة الاستخدام. وتوجد خدمات online للاستخدام مباشرة يمكنك البحث عنها كما في التعليق السابق عن طريق البحث عن "online video recognition"1 نقطة