Yomna Raouf
-
المساهمات
2193 -
تاريخ الانضمام
-
تاريخ آخر زيارة
-
عدد الأيام التي تصدر بها
65
إجابات الأسئلة
-
إجابة Yomna Raouf سؤال في عمل طلبية من المخدم بدون عمل تحديث للصفحة كانت الإجابة المقبولة
التقنية المستخدمة في هذا الأمر هي ajax هي اختصار ل Asynchronous JavaScript and Xml و هي تقنية مستخدمة في جميع مواقع الويب هذه الأيام و تمكننا هذه التقنية من التنقل داخل المواقع دون إعادة تحميل الموقع في كل مرة نطلب فيها صفحة ما فمثلًا في موقع حسوب عندما نتنقل بين أسئلة البرمجة و أسئلة العمل الحر مثلًا لا يتم تحميل الموقع بأكمله و إنما يتم تحميل الجزء الذي يعرض الأسئلة فقط. و تمكننا أيضًا من طلب بيانات من الخادم بعد أن تم تحميل الموقع و العديد من المزايا الأخرى.
لنأخذ المثال التالي لنتعرف كيفية تطبيق هذه التقنية:
لنفرض أمه لدينا ال form التالية:
<!DOCTYPE html> <html> <head> <title>PHP MySQL Insert Tutorial</title> <script src='https://code.jquery.com/jquery-2.1.3.min.js'></script> </head> <body> <form action='insert.php' method='post' id='myform' > <p> <input type='text' name='username' placeholder='user name' id='username' /> </p> <p> <input type='text' name='password' placeholder='password' id='password' /> </p> <button id='insert'>Insert</button> <p id='result'></p> </form> </body> </html>
و ال script التالي "ملف insert.php" لإضافة بيانات لقاعدة البيانات:
<?php // ثوابت الاتصال define('HOST','localhost'); define('USERNAME', 'root'); define('PASSWORD',''); define('DB','mydatabase'); // جملة الاتصال بقاعدة البيانات $con = mysqli_connect(HOST,USERNAME,PASSWORD,DB); // form قراءة البيانات التي تم إرسالها من ال $username = $_POST['name']; $pass = $_POST['pass']; // إدخال هذه البيانات لقاعدة البيانات $sql = "insert into users (username, password) values ('$username','$pass')"; if(mysqli_query($con, $sql)){ echo 'success'; } ?>
الآن سنقوم باستخدام ajax لإدخال البيانات إلى قاعدة البيانات بدون تحديث الصفحة:
سنقوم بإنشاء ملف يسمى insert.js و نقوم بتضمينه في الملف الذي يحتوي html form:
<script src='insert.js'></script> الآن سنستخدم الأكواد التالية لمنع ال form من إعادة التوجيه إلى insert.php "لاحظ ال action الخاص بال form":
$('#myform').submit(function(){ return false; }); إذا قمت بالضغط على ال insert button الآن لن يحدث شئ.
الآن سنقوم بتنفيذ أكواد php في الخلفية باستخدام التابع jquery.post:
$.post( 'script to execute', 'values to send', function(result){ //get the output of the script } ); سنقوم باستخدام الطريقة jquery.post السابقة داخل دالة الضغط على الزر، ليصبح الشكل النهائي لملف insert.js كما يلي:
$('#myform').submit(function(){ return false; }); $('#insert').click(function(){ $.post( $('#myform').attr('action'), $('#myform :input').serializeArray(), function(result){ $('#result').html(result); } ); }); و بذلك نكون قد تمكنا من إدخال البيانات في قاعدة البيانات بدون تحديث الصفحة.
-
إجابة Yomna Raouf سؤال في هل توجد طريقة لرفع المشاريع ولكن بتاريخ انشائها وليس تاريخ الرفع على جيت هاب كانت الإجابة المقبولة
ليس تمامًا، فصاحب العمل يمكنه تحديد ما إذا كان المشروع منسوخ أم لا من خلال الأسئلة التي يطرحها عليك أثناء المقابلة مثل:
ما التقنيات التي استخدمتها لهذا المشروع؟ لماذا اخترت هذه التقنيات بالتحديد؟ ما المشاكل التي واجهتك أثناء بناءه و كيف قمت بحلها؟ أو مثلًا يمكنه تغيير جزء من المشروع ليجعل المشروع يتوقف عن العمل و يطلب منك إصلاحه... و غيرها. كل هذه الأمور تجعله يتحقق إذا كنت قد قمت بنسخ المشروع أو بناءه بنفسك.
و مع ذلك إذا كنت تقوم بدفع أكواد إلى github بصورة مستمرة فهذا أمر في صالحك فهو يعطي انطباع لصاحب العمل بأنك شخص مثابر و دؤوب و تحب عملك.
لذلك أنصحك بأن تقوم بدفع التعديلات الخاصة بمشاريعك باستمرار و دفع الأكواد بعد الانتهاء من خاصية معينة أو التعديل عليها أو إصلاح مشكلة.
أعتقد أن هذا غير ممكن بالطريقة التي تريدها. يمكنك رفع مشاريعك كلها الآن في وقت واحد و بعد ذلك تبدأ باتباع ما ذكرته لك م دفع أكواد باستمرار إلى مستودعات المشروع.
-
إجابة Yomna Raouf سؤال في ما أهمية ال headers في بروتوكوا HTTP؟؟ كانت الإجابة المقبولة
--في السطر الخاص ب json.stringfy هنا نقوم بتحويل الكائن product إلى الصيغة json حتى نقوم بإرساله إلى المُخدم لأن خادم الويب لا يمكنها أن تفهم الكائنات الخاصة ب javascript فقط يمكنها فهم السلاسل النصية.
أي يتم تحويل كائن بهذه الصورة:
let product = { id: '64564545', productName: 'iphone', price: 1300 } إلى هذه الصورة:
{ "id": "64564545", "productName": "iphone", "price": 1300 } --أما السطر الخاص ب conten-type فهنا نقوم بتحديد نوع البيانات التي سيتم إرسالها إلى الخادم هل ستكون text/html أم json كما في المثال السابق، هنا نحن نريد إرسال بيانات من النوع json لذلك قمنا باستخدام النوع application/json
--أما السطر الخاص ب
const id = (await response.json()).name في السطر الخاص ب const response نحن قمنا بإرسال طلب إلى الخادم و ننتظر منه أن يعيد لنا بيانات ما على صورة json أيضًا. من البيانات التي سيعيدها هي name و هي التي تحمل ال id الخاص بالمنتج الذي تم إرساله إلى الخادم.
لذلك هنا ()await response.json نحن ننتظر البيانات التي سيعيدها الخادم و بعد ذلك نقوم باستخراج قيمة الخاصية name و تخزينها في المتغير id
-
إجابة Yomna Raouf سؤال في استرجاع تنسيقات css القديمة كانت الإجابة المقبولة
يمكنك استخدام الأمر التالي حتى تقوم بعمل rollback و تعود لل commit التي تريدها "أي إعادة الملفات لما كانت عليه قبل التحديثات"
git reset --hard c2e7af2b51 الرقم الموجود بعد كلمة hard هو ال id الخاص بال commit التي تريد العودة لها، ولكن كيف نحصل عليه.
بعد أن نقوم بفتح المستودع سنجد كلمة commits كما هو موضح بالصورة نقوم بالضغط عليها و بعد ذلك سيتم فتح الصفحة التالية نقوم بنسخ ال id الخاص بال commit التي تريد العودة لها و وضعه بعد كلمة hard الموجودة في الأمر المذكور أعلاه و نقوم بتنفيذ الأمر و ستجد أن الملفات عادت لما كانت عليه في ال commit التي نسخنا ال id الخاص بها. -- إذا لم تكن متأكد من الأكواد التي تحتويها ال commit يمكنك الضغط على <> حتى تتمكن من معرفة التعديلات التي تمت بها.
-
إجابة Yomna Raouf سؤال في كيف يمكن معرفة نظام تشغيل الهاتف اندرويد IOS في فلاتر كانت الإجابة المقبولة
يمكنك استخدام الطريقة التالية باستخدام مكتبة dart:io لتحديد نظام التشغيل الخاص بالجهاز.
حيث يمكنك الحصول غلى اسم نظام التشغيل كسلسلة نصية string باستخدام الoperatingSystem getter، و يمكنك أيضًا استخدام أحد ال boolean getters مثل isMacOS, isLinux, and isWindows
import 'dart:io' show Platform; void main() { // Get the operating system as a string. String os = Platform.operatingSystem; // Or, use a predicate getter. if (Platform.isIOS) { print('is a IOS'); } else if (Platform.isAndroid) { print('is a Andriod'); } else { }
-
إجابة Yomna Raouf سؤال في أحتاج مساعدة في عمل برنامج Credit Card .php كانت الإجابة المقبولة
يمكنك استخدام package جاهزة للقيام بذلك:
مثل: php-credit-card-validator
طريقة تثبيتها كما يلي: نقوم باستيرادها في ملف composer.json
"require": { "inacho/php-credit-card-validator": "1.*" }, و إذا كنت تستخدم laravel نقوم بإضافة alias في config/app.php:
'aliases' => array( 'App' => 'Illuminate\Support\Facades\App', ... 'View' => 'Illuminate\Support\Facades\View', 'CreditCard' => 'Inacho\CreditCard', ), طريقة الاستخدام: التحقق من رقم البطاقة في حال معرفة نوعها:
$card = CreditCard::validCreditCard('5500005555555559', 'mastercard'); print_r($card); الناتج:
// Output: Array ( [valid] => 1 [number] => 5500005555555559 [type] => mastercard ) التحقق من رقم البطاقة و إعادة نوعها:
$card = CreditCard::validCreditCard('371449635398431'); print_r($card); الناتج:
// Output: Array ( [valid] => 1 [number] => 371449635398431 [type] => amex ) التحقق من CVC:
$validCvc = CreditCard::validCvc('234', 'visa'); var_dump($validCvc); الناتج:
// Output: bool(true) التحقق من تاريخ الانتهاء:
$validDate = CreditCard::validDate('2013', '07'); // past date var_dump($validDate); الناتج:
// Output: bool(false)
-
إجابة Yomna Raouf سؤال في ماهو شرح هذا الكود -- REDUX كانت الإجابة المقبولة
حتى تتمكن من فهم هذه الأكواد يجب أن تكون لديك معرفة بتقنيات تستخدم لإدارة الحالات في تطبيقا react و من هذه التقنيات المستخدمه هنا مكتبة redux و مكتبة redux-thunk، يمكنك التعلم عنهم من التوثيق الرسمي الخاص بهم أو من خلال متابعة أي سلسلة تعليمية تفضلها. و لكن بصفة عامة:
-- في السطر الأول نقوم باستيراد createStore و combineReducers و applyMiddleware من redux:
createStore: تقوم بإنشاء store و هذا ال store يحمل شجرة الحالات الخاصة بالتطبيق الخاص بك كاملةً. و من المفترض أن يمتلك التطبيق store واحد فقط. الطريقة الوحيدة لتغيير الحالة داخل ال store هي عن طريق عمل dispatch أي إرسال/إيفاد action "مُستمع أحداث" له. combineReducers: كما ذكرنا سابقًا يجب أن يكون للتطبيق store واحد فقط، و لكن في بعض الأحيان تكون التطبيقات الخاصة بنا كبيرة لذلك يحتوي التطبيق على أكثر من دالة reducer كلًا منها يدير جزء منفصل من حالة التطبيق التطبيق.هنا يأتي عمل الدالة المساعدة combineReducers حيث تقوم بتجميع كل ال reducers و وضعهم داخل reducer وحيد يتم تمريره للدالة createStore. و هذا ال reducer الناتج يقوم باستدعاء باقي ال reducers الأبناء و يجمع النتائج الخاصة بهم في في state object واحد applyMiddleware: الطبقة الوسيطة Middleware هي طريقة مقترحة لتوسعة redux بإضافة custom functionality -- في السطر الثاني نقوم باستيراد ReduxThunk من المكتبة redux-thunk
Redux Thunk middleware allows you to write action creators that return a function instead of an action
و هو عبارة عن طبقة وسيطة تُمكننا من كتابة action creators تقوم بإعادة دوال بدلًا من actions و هذا بالتالي يُمكننا من استخدام ال thunk لتأخير عمل ال dispatch ل action ما أو يُمكننا من عمل dispatch لل action في حال تحققت ظروف معينة. -- في الستة أسطر التالية نقوم باستراد ال actions و ال reducers الخاصة بال product و ال cart و ال orders.
-- بعد ذلك نقوم بإنشاء ال rootReducer و هو ال reducer الذي يجمع/يضم باقي ال reducers في كائن واحد باستخدام الدالة combineReducers حتى نقوم بتمريره للدالة createStore و إنشاء ال store الخاص بالتطبيق كما ذكرنا سابقًا.
-- في السطر الذي يليه نقوم بإنشاء ال store الخاص بالتطبيق باستخدام الدالة createStore حيث نقوم بتمرير ال rootReducer لها و الطبقة الوسيطة reduxThunk.
-- بعد ذلك نقوم بتصدير ال store
-- و بعدها قام أيضًا بتجميع كل ال actions في كائن واحد كما فعلنا مع ال reducers
-
إجابة Yomna Raouf سؤال في شرح هذا الكود .. REDUX كانت الإجابة المقبولة
نعم product يُعتبر parameter لل action هنا.
ال payload هو naming convention عُرف مُتَّبع عند تسمية الخاصية التي تحمل البيانات الفعلية التي يحملها الكائن action الخاص ب redux.
بمعنى أبسط ال payload تحمل البيانات التي يتم تمريرها بين ال reducers الموجودة في تطبيق redux الخاص بك حتى يتم تنفيذ بعض الأكواد عليها.
مثال:
const someAction = { type: "Test", payload: {user: "Test User", age: 25}, } و ال payload يمكن أن يحتوي أي نوع من أنواع البيانات الموجودة في جافاسكريبت (مصفوفة، كائن، إلخ)
الأمر هنا يتوقف على باقي الأكواد الخاصة ب redux مثل ملف ال reducer أو ال utils. يجب أن أطلع على باقي الأكواد حتى أعرف سبب عدم استخدامها هنا.
لكن بما أنه لم يستخدم ال payload هنا فبالتأكيد هو لم يحتاج لها و لم يقُم بتنفيذ أي أكواد/عمليات منطقية عليها "أي على البيانات التي يحملها ال payload".
-
إجابة Yomna Raouf سؤال في هل يؤثر استبعادي من المشروع على بروفايلي كانت الإجابة المقبولة
عدم اختيارك للعمل على المشاريع لا يظهر في البروفايل الخاص بك كما أنه لا يعني أن المستقل ليس كفئًا أو ما شابه ففي بعض الأحيان يكون لأصحاب العمل معايير مختلفة لاختيار مستقلين لمشاريعهم منها السعر أو المكان الجغرافي مثلًا.
ما يؤثر في بروفايلك حقًا هو التسليم بعد الموعد، أو تسليم عمل بجودة غير جيدة تجعل صاحب العمل يعطيك تقييم سئ و ما إلى ذلك.
-
إجابة Yomna Raouf سؤال في سؤال بخصوص نقل الملفات إلى github -- wabpack كانت الإجابة المقبولة
نعم، بما أنك قمت بنقل مجلد src و هو المجلد الذي نعمل فيه أثناء التطوير فستجد جميع التنسيقات و الأكواد كما كتبتها. فتأثير webpack سواءً كان نتضغير الملفات أو عمل minimization لها لا يظهر إلا في مجلد dist "المجلد الذي يتم رفعه/استضافته على الانترنت لاحقًا" دون أن تتأثر الملفات الموجودة في مجلد src.
يمكنك أن تتأكد من ذلك بالضغط على src في المستودع و تفقد الملفات الموجودة به.
-
إجابة Yomna Raouf سؤال في الاستفسار عن تصميم مثل هذا الموقع كانت الإجابة المقبولة
إذا قمنا بتنفيذ الخطوات التالية للحصول على الثيم:
سنجد أن هذا الموقع تم بناءه ببرمجة خاصة و ليس بالاعتماد على قالب جاهز
-
إجابة Yomna Raouf سؤال في الاستفسار عن تصميم مثل هذا الموقع كانت الإجابة المقبولة
يمكنك الحصول على اسم ال theme بالضغط على ctrl + shift + i في المتصفح ثم source أو النقر بزر الفأرة الأيمن في أي مكان فارغ في الصفحة ثم اختيار inspect ثم source.
ستجد أن هذا ال theme اسمه snowFlat من qa-theme أعتقد أنه غير مدفوع و يمكنك أنه تجده بالبحث عن
qa-theme/snowFlat على github
-
إجابة Yomna Raouf سؤال في استفسار عن معنى سطر في الكود كانت الإجابة المقبولة
نعم، المقصود هو التعويض بقيمة x في f و رسم x مع (f(x.
حيث أن السطر 24 يقوم بتكوين دالة كثيرة حدود من القيم المعطاة للدالة poly1d
p = np.poly1d([1, 2, 3]) print(p) # الناتج 2 1 x + 2 x + 3 يمكنك قراءة المزيد من numpy.poly1d و numpy.polyfit و python-matplotlib-plot-function
-
إجابة Yomna Raouf سؤال في سؤال في درس تنسيق النصوص كانت الإجابة المقبولة
كان يوجد لديك بعض الأخطاء البسيطة فقط:
// first_paragraf بدلًا من frist_paragraf قمت بكتابة #frist_paragraf { // ; نسيت أن تضع علامة // green بعد // : نسيت أن تضع علامة // background-color بعد color: green background-color brown; } التصحيح:
#first_paragraf { color: green; background-color: brown; } الملف بعد التعديل:blocks.html
إذا كان هذا السؤال متعلق بأحد دورات حسوب أرجو أن السؤال في تعليق أسفل الدرس في المرات القادمة. هذا القسم للأسئلة العامة.
شكرًا لك.
-
إجابة Yomna Raouf سؤال في كيفية تغير اتجاه محتويات الصفحة بعد تغير للغة التطبيقflutter كانت الإجابة المقبولة
يوجد العديد من الطرق التمنك من القيام بذلك.
يمكنك قراءة هذا المقال "يشرح ما تريد القيام به باستخدام easy_localization" dمكنك الاطلاع على هذه الطريقة أيضًا من التوثيق الرسمي الخاص ب flutter و يمكنك قراءة هذا المقال أيضًا لشرح مُبسَّط مع مثال.
-
إجابة Yomna Raouf سؤال في تنسيق حجم الصور كانت الإجابة المقبولة
يمكنك التعديل على حجم الصور باستخدام css كما يلي:
img { width: 400px; /* العرض الذي تريده*/ height: 300px; /* الطول الذي تريده*/ object-fit: contain; /*و تحتفظ بمعالمها نقوم باستخدام هذا التنسيق حتى لا تتشتت الصورة */ }
-
إجابة Yomna Raouf سؤال في طريقة أخذ البيانات ( صور ونصوص )عن استخدام Navigation فى تطبيقات React Native كانت الإجابة المقبولة
يمكنك الاطلاع على هذا المقال فهو يحتوي على شرح لما تحاول القيام به.
-
إجابة Yomna Raouf سؤال في هل يجب أن يتعلم مطورين الواجهات بناء ال APIs كانت الإجابة المقبولة
مرحبا محمد.
نعم، من المفترض أن تتعلم الأساسيات المتعلقة ببناء ال API و تتعلم كيف تقوم ببناء API بسيط.
فقد تحتاج لبناء API بسيط في بعض المشاريع ك frontend developer.
فيما يخص العمل.
-بعض الشركات تسأل عن الأساسيات المتعلقة ببناء ال API و بعضها لا. و لكن من الأفضل أن تعرفها.
أما العمل الحر.
فالأمر يختلف بعض العملاء يطلبون مطور يمكنه بناء التطبيق backend و frontend و البعض الآخر يقوم بتوظيف مطور لكل مجال منهم. و لكن إذا كان ال API بسيط لن يقوم بتوظيف أكثر من مطور.
في العموم أنصحك بالإلمام بالمجالين فمجال ال backend ليس بالأمر المعقد "مهارة تحتاج الصبر و المثابرة و الاجتهاد و الممارسة حتى تتقنها" حيث سيتيح لك تعلم المجالين الكثير من الفرص سواء في مجال العمل الحر أو التوظيف.
بالتوفيق.
-
إجابة Yomna Raouf سؤال في التدرب بعد الانتهاء من كورس أساسيات روبي كانت الإجابة المقبولة
مرحبًا فايزة
يوجد العديد من المواقع التي يمكنك التدرب فيها و ممارسة ما تعلمتيه في ruby منها:
edabit Hackerrank و غيرها. حل المشكلات في هذه المواقع ستكسبك مهارة حل المشكلات و ستزيدمن ثقتك قليلًا بمهاراتك في اللغة. يمكنك أن تبدأ بالأسئلة الخاصة بالمبتدئين و مع الوقت يمكنك الانتقال إلى مستويات الأسئلة الأعلى. و لكن هناك نقطتين أريد التحدث عنهما:
من الممكن أن تستغرقي ساعات طويلة أو أيام أو ربما أسبوع في حل مشكلة واحدة فقط خاصةً في البداية. لا داعي للقلق في هذه الحالة فهذا أمر طبيعي جدًا و جميع المطورين حتى أمهرهم و أكثرهم خبرةً مرُّوا بهذه المرحلة في بداية طريقهم. قد تواجهي مشكلة في كتابة بعض الأجزاء من الأكواد أو القواعد اللغوية. مثلًا قد تنسين كيفية كتابة الحلقة loop لا يوجد مشكلة في ذلك أيضًا يمكنك البحث عنها في أحد محركات البحث "loops in ruby" سيظهر لك العديد من النتائج يمكنكِ أن تقوم بقرائتها و بعد ذلك استخدامها و مع الوقت و الممارسة ستصبح كتابة هذه الأكواد طبيعة ثانية بالنسبة لك. و أيضًا جميع المطورين يقومون بالبحث عن الأشياء الأساسية في كثير من الوقت. فمهنة المطور لا تُحتِّم حفظ الأكواد و لكن حل المشكلات. أيضًا لا أنصح بالتوقف عن متابعة الدورة للتدرب على هذه الأسئلة أنصحك بالإكمال في الدورة و بناء المشاريع مع المدرب فهذا أيضًا يُعتبر ممارسة و تدريب و سيزيد من مهاراتك بشكل كبير.
شكرًا لك.
-
إجابة Yomna Raouf سؤال في ظهور صفحة المتصفح فارغة رغم كتابة كود html كانت الإجابة المقبولة
من الطبيعي أن تظهر الصفحة فارغة لأن الوسم body المسؤول عن المحتوى الذي يظهر على الصفحة لا يوجد به أي وسوم ليتم عرضها.
الوسم script لا يتم عرض محتواه في الصفحة.
الوسوم التي يتم عرضها في المتصفح هي الوسوم مثل h1 العناوين و img للصور و هكذا.
إذا أردت أن تقوم باختبار أكواد javaScript يمكنك القيام بالتالي:
انقر بزر الفأرة الأيمن في أي مكان في هذه الصفحة الفأرة من القائمة المنسدلة نختار inspect سيظهر لنا نافذة في الصفحة يمكن من خلالها اختيار console بعد ذلك نقوم بنسخ الأكواد الموجودة داخل ال script tag في الأكواد الخاصة بك و لصقها في console و نضغط enter سيظهر لك نتيجة الأكواد بعدها. أنصحك بمشاهدة الفيديو التالي بداية من الدقيقة ٣:٢٥.
بالتوفيق.
-
إجابة Yomna Raouf سؤال في هل اذا قمت بعمل navigation للتطبيق لا احتاج الى <SaveAreaView> فى حالة اظهار header الخاص ب navigation ؟؟ ام ساظل استخدمها احتياطيا ؟؟ كانت الإجابة المقبولة
مرحبًا@Ahmed Sawy
في الحقيقة الإجابة لا. الهيدر الخاص ب navigation لا يغني عن <SaveAreaView>.
كما أنه لاستخدام <SaveAreaView> نقوم بتغليف ال Top level view بال <SaveAreaView> و ليس كل view بمفرده حتى تضمن ظهور المحتويات داخل المساحة الآمنة للجهاز. أيضًا هذه الخاصية تعمل على أجهزة ios النسخة 11 أو النسخ الأحدث فقط.
يمكنك قراءة المزيد من هنا.
يمكنك القراءة هنا أيضًا عن كيفية التعامل مع safeAreaView + React Navigation
-
إجابة Yomna Raouf سؤال في ما هو استعمال addEventListener كانت الإجابة المقبولة
addEventListener تقوم بإضافة مُستمع أحداث لعُنصر ما من عناصر الصفحة.
و لكن ما هي الأحداث؟!
تفاعلات المستخدمين مع المواقع كلها أحداث إمَّا بالضغط على عنصر ما أو drag أو حتى scroll كل هذه تعتبر أحداث.
في بعض الأحيان كمطورين نكون مهتمين بهذه الأحداث و نريد تنفيذ أكواد معينة عندما يقوم المُستخدم بتنفيذ حدث مٌعين.
و حتى نقوم بذلك يجب أن نعرف متى قام المستخدم بتنفيذ هذا الحدث لذلك نقوم باستخدام addEventListener مع العنصر الذي نهتم بالأحداث الواقعة عليه.
فمثلًا في youtube نكون مهتمين بحدث الضغط على زر subscribe حتى نقوم بإضافة المُستخدم إلى قائمة المشتركين في القناة:
<button id="subscribe__button" >Subscribe</button> // click حتى نستمع إلى الحدث subscribe__button مع الزر addEventListener نقوم باستخدام مُستمع الأحداث // و إضافة المستخدم إلى قائمة المشتركينfunction بعد أن يحدث حدث الضغط هذا نقوم بتنفيذ الأكواد الموجودة داخل ال document.querySelector("#subscribe__button").addEventListener( "click", function() { // أكواد إضافة المستخدم لقائمة المُشتركين بالقناة }) يمكنك قراءة المزيد عن addEventListener من هنا.
-
إجابة Yomna Raouf سؤال في مشكلة نقل مشروع فلاتر من جهاز الى جهاز اخرى كانت الإجابة المقبولة
هل يمكنك إرفاق صور لهذه الأخطاء حتى نتمكن من مساعدتك بشكل أفضل؟؟
و أيضا صورة لمحتويات مجلد المشروع.
بالتوفيق.
-
إجابة Yomna Raouf سؤال في كيفية تعلم الجافا سكريبت كانت الإجابة المقبولة
يعتمد تعلم البرمجة على التطبيق العملي لما تتعلمه فمشاهدة السلاسل التعليمية تباعًا "في فترة زمنية قصيرة" دون التطبيق العملي لن يفيد في شيء.
يوجد العديد من المواقع التي يمكنك أن تبدأ بممارسة اللغة و حل بعض المشكلات, منها:
hackerrank edabit و غيرها. حل المشكلات في هذه المواقع سيجعلك تكتسب مهارة حل المشكلات و سيزيد من ثقتك قليلًا بمهاراتك في اللغة. يمكنك أن تبدأ بالأسئلة الخاصة بالمبتدئين و مع الوقت يمكنك الانتقال إلى مستويات الأسئلة الأعلى. و لكن هناك نقطتين أريد التحدث عنهما:
من الممكن أن تستغرق ساعات طويلة أو أيام أو ربما أسبوع في حل مشكلة واحدة فقط خاصةً في البداية. لا داعي للقلق في هذه الحالة فهذا أمر طبيعي جدًا و جميع المطورين حتى أمهرهم و أكثرهم خبرةً مرُّوا بهذه المرحلة في بداية طريقهم.
قد تواجه مشكلة في كتابة بعض الأجزاء من الأكواد أو القواعد اللغوية. مثلًا قد تنسى كيفية كتابة الحلقة loop لا يوجد مشكلة في ذلك أيضًا يمكنك البحث عنها في أحد محركات البحث "loops in js" سيظهر لك العديد من النتائج يمكنك أن تقوم بقرائتها و بعد ذلك استخدامها و مع الوقت و الممارسة ستصبح كتابة هذه الأكواد طبيعة ثانية بالنسبة لك. و أيضًا جميع المطورين يقومون بالبحث عن الأشياء الأساسية في كثير من الوقت. فمهنة المطور لا تُحتم حفظ الأكواد و لكن حل المشكلات.
أيضًا يمكنك التدرب على بناء مشاريع بسيطة باتباع أحد السلاسل التعليمية و كتابة الأكواد مع المدرب و بعد أن تنتهي منه يمكنك أن تضيف خاصية من عندك إلى المشروع أو محاولة التغيير فيه أو حتى محوه و محاولة بناءه بمفردك من الصفر. ستجد أن الأمر صعب في البداية و غير مريح و لكن استمر في ذلك فمع الوقت ستكتسب الخبرة و ستتمكن من بناء مشاريع بمفردك و ستصبح أكثر ارتيحًا.
هذه أمثلة لبعض السلاسل التعليمية التي قد تساعدك في ذلك:
javaScript projects tutorials 15JavaScript Projects - Vanilla JavaScript Build A Weather App With Vanilla Javascript Tutorial | Javascript For Beginners Build A Filterable List With Vanilla JavaScript 100+ JavaScript Projects for Beginners و ستجد غيرها الكثير إذا قمت بالبحث عن javaScript projects for beginners.
-
إجابة Yomna Raouf سؤال في ما مستقبل البرمجه كانت الإجابة المقبولة
بالطبع أنصحك بالاستمرا. فما تواجهه الآن أمر طبيعي و يحدث مع جميع المبتدئين فتعلم البرمجة و إتقانها ليس بالأمر السهل و يحتاج الكثير و الكثير من الوقت و المجهود و الصبر. فتعلم أي مهارة جديدة ليس بالأمر السهل و بالطبع لا أحد يستطيع أن يتقن أو يفهم مجالًا مثل مجال البرمجة في أيام قليلة فالأمر يحتاج إلى شهور من العمل و الممارسة حتى تتمكن من الفهم بشكل جيد.
أنصحك بالاستمرار و عدم التسرع و مشاهدة الدروس أكثر من مرة و قراءة المقالات حتى تتمكن من الفهم بأكبر نسبة ممكنة و إن لم تتمكن من فهم بعض الأشياء لابأس يمكنك دائمًا أن تسأل عنها أو المحاولة معها لاحقًا. كما أنصحك بالممارسة و التدرب كثيرًا فهذا ما سيجعل منك مطور ماهر و سيجعلك تتمكن من الفهم بشكل أفضل.
بالتوفيق.