عبدالله أحمد4

document.getElementsByClassName("col") تقوم بإرجاع HTMLCollection وهي أشبه بالمصفوفة عند التعامل معها فمثلا لجلب أول عنصر يحتوي على الكلاس .col فنقول في الكود document.getElementsByClassName("col")[0] لاحظ ال [0] في النهاية (لأن المصفوفة تبدأ من 0) الآن نحن نريد أن نجلب العنصر الذي تم الضغط عليه لذلك سنعدل في كود ال HTML ليتم اضافة ال index الخاص بكل عنصر، وسنعدل في كود الجافاسكربت لكي نستطيع جلب ال index ايضاً كالتالي: <div class="container"> <div class="row"> <div class="col" onclick="ik(0)"> Column </div> <div class="col" onclick="ik(1)"> Column </div> <div class="col" onclick="ik(2)"> Column </div> <div class="col" onclick="ik(3)"> Column </div> </div> <div class="row"> <div class="col" onclick="ik(4)"> Column </div> <div class="col" onclick="ik(5)"> Column </div> <div class="col" onclick="ik(6)"> Column </div> <div class="col" onclick="ik(7)"> Column </div> </div> </div> <script> function ik(index){ var y = document.getElementsByClassName("col")[index]; var t = alert("this is column" + "=" + Math.round(Math.random() * 10)); if(y >= 8){ alert("YOU WON"); } else{ alert("YOU LOST"); } } </script> الآن تبقى شئ أخير وهو المقارنة بأن الرقم العشوائي أكبر من أو يساوي 8، لعمل ذلك علينا حفظ الرقم العشوائي في متغير والمقارنة هل هو أكبر من أو يساوي 8 كالآتي: <script> function ik(index){ var y = document.getElementsByClassName("col")[index]; var randomNumber = Math.round(Math.random() * 10)) var t = alert("this is column" + "=" + randomNumber; if(randomNumber >= 8){ alert("YOU WON"); } else{ alert("YOU LOST"); } } </script> نلاحظ هنا بعد التعديل في الكود أنه لا حاجة إلى المتغير الذي يسمى y أصلاً لذلك يمكننا حذفه ويصبح كود الجافاسكربت النهائي: <script> function ik(index){ var randomNumber = Math.round(Math.random() * 10)) var t = alert("this is column" + "=" + randomNumber; if(randomNumber >= 8){ alert("YOU WON"); } else{ alert("YOU LOST"); } } </script>

يمكنك استعمال الدالة confirm() في الجافاسكربت، وهي تقوم بأخذ التأكيد من المستخدم وستقوم بإرجاع true اذا وافق المستخدم عليها وfalse اذا لم يوافق المستخدم قم بتعديل الكود الى الشكل التالي function onclickDeleteUsers(keyuser){ if (confirm('هل ترغب حقاً في الحذف؟')) { dbUsersSearch.child(keyuser).remove() .then(function() { alert("Remove succeeded."); location.reload(); }) .catch(function(error) { alert("Remove failed: " + error.message); }); } } يمكنك أيضاً استعمال المكتبة Sweetalert2 لكي تحصل على شكل أفضل، ستقوم بإستدعائها من ال html <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> ثم تعدل الكود كالتالي: function onclickDeleteUsers(keyuser){ Swal.fire({ title: 'هل ترغب حقاً بالحذف؟', icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'نعم', cancelButtonText: 'إغلاق' }).then((result) => { if (result.isConfirmed) { dbUsersSearch.child(keyuser).remove() .then(function() { /*Swal.fire( 'تم الحذف!', 'تم الحذف من قاعدة البيانات', 'success' )*/ alert("Remove succeeded."); location.reload(); }) .catch(function(error) { alert("Remove failed: " + error.message); }); } }) }

مشروعك ليس فيه git قم بإنشاء git في مشروعك عن طريق الأمر git init

يمكنك عمل هذا الحل باستخدام الجافاسكربت const NaNError = {}; const sum = (num1:number, num2:number) => { if (isNaN(num1) || isNaN(num2)) throw NaNError; return num1 + num2; } try { sum(5, 1); sum(8, 'A'); } catch (NaNError e) { console.log('The type you entered is NaN') } هنا قمنا ببساطة بتعريف متغير للخطأ بحيث إذا كان أحد الرقمين للدالة sum عبارة عن NaN ففي هذه الحالة نرمي الخطأ الذي أنشأناه

ال sanitization هي عملية تطهير البيانات من الأكواد الخبيثة فمثلاً إذا كان المكتوب في حقل ما (حقل البريد الالكتروني مثلاً) كاﻵتي <script>alert('Dangerous code')</script> إذا تم تخزين الحقل في قاعدة البيانات بهذا الشكل، فهذا الكود قد يحتوي على كود خبيث يقوم بسرقة الكوكيز مثلاً، أو أن يظهر شيئاً لا يرغب المستخدمين في رؤيته. ولكن اذا قمت بعمل sanitization سيصبح &lt;script&gt;alert(&#039;Dangerous code&#039;)&lt;/script&gt; وبالتالي لن يعمل هذا الكود الخبيث وسيتم تأمين الموقع. إذا كنت تستخدم php فيمكنك النظر إلى الدالة htmlspecialchars من هذا المقال الرائع من حسوب. أما ال validation فهي عملية التحقق من أن شكل البيانات صحيح، فمثلاً إذا كان الحقل لإدخال بريد الكتروني فيجب أن يكون على الصورة email@company.com فلا يمكن لأحد أن يكتب مثلاً شيئاً كهذا test email لأنها تحتوي على مسافة كما أيضاً أنها لا تحتوي على الشكل الصحيح للايميل (علامة ال @ واسم الشركة والدومين). إذا كنت تستخدم PHP يمكنك النظر هنا وأنواع الvalidations من هنا. أما ال prepared statements فهي عملية إعداد الأمر الخاص بقاعدة البيانات قبل عملية تنفيذ الأمر وهي عملية مهمة حتى يتم تطهير البيانات قبل اضافتها الى قاعدة البيانات، اذا كنت تستخدم php يمكنك معرفة المزيد من هنا.

لكي تحمي موقعك من أي inputs ضارة عليك عمل الآتي: 1. عمل validation & sanitization لكل ال inputs كما ذكر المدرب @Sam Ahw 2. استعمال Prepared statements اذا كانت قاعدة البيانات من النوع SQL أيضاً لتحسين تجربة المستخدم، قم بإضافة validation على الFrontend ولكن بالطبع يجب أيضاً أن يكون هناك validation على الBackend، حيث إنه يمكن تخطي الvalidation الخاصة بالFrontend بسهولة.

إذا كنت تستخدم Express v3 app.use(express.favicon(__dirname + '/public/images/favicon.ico')); أما إذا كنت تستخدم Express v4 عليك أولاً بتنصيب الحزمة serve-favicon من الأمر التالي npm i serve-favicon ثم بعد ذلك تستخدمه كالتالي app.use(favicon(__dirname + '/public/images/favicon.ico'));

إذا كنت تستعمل Express v4، لتفعيل الكوكيز يتم تنصيب الحزمة cookie-parser، من الأمر التالي: npm i cookie-parser ثم استخدامها في ملف السرفر كالتالي var express = require('express') var cookieParser = require('cookie-parser') var app = express() app.use(cookieParser()) اذا أردت عمل Middleware يقوم بعمل كوكي ويضع في قيمتها رقم عشوائي (كما بالكود عندك) app.use(cookieParser()); // يجب أن تستدعيها قبل استخدام الكوكيز app.use(function (req, res, next) { var value_random = Math.random().toString(); value_random=value_random.substring(2,value_random.length); res.cookie('cokkieName',value_random, { maxAge: 900000, httpOnly: true }) console.log('test cookie created'); next(); });

ستقوم بوضع كود ال form الخاص بعملية الدفع داخل ال div الذي له كلاس modal-body كما بهذا الكود <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <!-- هنا كود ال form --> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

أذا كنت تستعمل Bootstrap فهناك شئ اسمه Modal يقوم بفتح نافذة منبثقة عند الضغط على زر معين مثلا هذا مثال إذا كنت تستخدم Bootstrap 5 تقوم بعمل زر وتعطيه attribute يسمى data-bs-target وقيمته هو العنصر الخاص بالModal حيث أنه عند الضغط على الزر يفتح ال Modal. <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> طبعا أنت في حالتك ستقوم أولاً بتحويل الوسم من a إلى button ثم تعدل الكود بما يتناسب معك. لمعرفة المزيد عن ال Modal يمكنك البحث هنا: https://getbootstrap.com/docs/5.0/components/modal/ أو إذا كنت تستخدم الاصدار الرابع من Bootstrap: https://getbootstrap.com/docs/4.0/components/modal/

إليك بعض القواعد عند كتابة كود Javascript داخل صفحة HTML 1. كود الجافاسكربت يجب أن يكون بين وسم script كما في الكود <script> // Javascript here </script> 2. أسماء الدوال، المتغيرات، وأيضاً الكلاسات يجب أن لا تحتوي على مسافات أو - هذه الأكواد غير صحيحة function say Hello() { // اسم غير صحيح يحتوي على مسافة console.log('Hello') } function say-Hello() { // اسم غير صحيح يحتوي على - console.log('Hello') } 3. أيضاً أسماء الدوال، المتغيرات، وأيضاً الكلاسات يجب أن لا يبدأوا بأرقام function 1Hello() { // اسم غير صحيح يبدأ برقم console.log('Hello') } هذه الأكواد غير صحيحة الآن حاول اتباع القواعد السابقة وسيشتغل الكود، انتظر ردك إذا كان هناك أي مشاكل أخرى