دورة JavaScript – المستوى الثالث

في هذه الحلقة، أراجع معك سريعًا ما تعلمته سابقًا، ثم نبدأ خطوة جديدة وهي التعامل مع DOM. سأوضح لك بطريقة بسيطة كيف تستهدف عناصر الصفحة باستخدام JavaScript من خلال أمثلة عملية، ثم نتعرف على المشكلات التي قد تواجهك مع الطرق التقليدية، ولماذا نحتاج إلى DOM للتحكم في عناصر الصفحة بسهولة، تمهيدًا لما سنتعلمه في الحلقة القادمة.

في هذه الحلقة، أعرّفك على الطرق المختلفة لاستهداف عناصر الصفحة داخل DOM مثل ID وClass وTag Name وquerySelector، مع توضيح متى تستخدم كل طريقة، ثم ننتقل للتعامل مع مجموعة من العناصر المتشابهة والتعرف على HTMLCollection وكيفية التعامل معها والفرق بينها وبين المصفوفات العادية، حتى تكون مستعدًا لما سنكمله في الحلقات القادمة.

في هذه الحلقة، أشرح لك طريقة جديدة لاستهداف عناصر الصفحة باستخدام خاصية name، خاصة عند التعامل مع نماذج الإدخال. ستتعرف معي على ميزة هذه الطريقة عند التعامل مع عناصر متعددة بنفس الاسم، ثم نستخدم getElementsByName عمليًا ونكتشف معًا NodeList، مع توضيح الفرق بينها وبين HTMLCollection، حتى تفهم متى تستخدم كل طريقة وفقًا لما تحتاجه أثناء البرمجة.

في هذه الحلقة، أعرّفك على querySelector وquerySelectorAll من خلال مثال عملي يحتوي على عناصر متكررة ومتداخلة، لتتعلم الفرق بينهما ومتى تستخدم كل واحدة، وكيف تعتمد على محددات CSS للوصول إلى العناصر بدقة أكبر والتعامل معها بسهولة داخل JavaScript.

في هذه الحلقة، أبدأ معك بالتعرف على الأحداث في DOM، وكيف تجعل عناصر الصفحة تتفاعل مع المستخدم باستخدام addEventListener. سنجرب معًا عدة أحداث مهمة مثل الضغط والتحويم وحركة الماوس، ثم أوضح لك الفرق بين بعض الأحداث المتشابهة، ونتعرف أيضًا على حدث التحميل وكيفية استخدامه، حتى تفهم أساسيات التفاعل مع عناصر الصفحة تمهيدًا لما سنكمله في الحلقات القادمة.

في هذه الحلقة، أعرّفك على أهم الأحداث المرتبطة بحقول الإدخال، وكيف تراقب تفاعل المستخدم أثناء الكتابة. سنتعرف معًا على أحداث مثل input وkeydown وkeyup وfocus وblur، ثم أوضح لك الفرق بين input وchange وblur، حتى تفهم متى تستخدم كل حدث حسب الهدف المطلوب أثناء التعامل مع نماذج الإدخال.

في هذه الحلقة، أشرح لك كيفية التعامل مع الأحداث على مستوى الصفحة بالكامل باستخدام document، ونتعرف على كائن الحدث وكيف يمكنك من خلاله معرفة تفاصيل تفاعل المستخدم مثل مكان الضغط أو حركة الماوس، حتى تفهم كيف تتابع تفاعل المستخدم داخل الصفحة وتستفيد من هذه البيانات في تطبيقات أكثر تقدماً.

في هذه الحلقة، أطبق معك عمليًا ما تعلمته سابقًا من استهداف العناصر والأحداث، حيث نستخدم حدث الضغط لتغيير محتوى عنصر داخل الصفحة دون إعادة تحميلها. ستتعرف على خاصية innerHTML وكيف يمكنك من خلالها تعديل النص أو استبداله، مما يساعدك على بناء صفحات تفاعلية تتغير حسب تفاعل المستخدم.

في هذه الحلقة، أشرح لك كيفية التحكم في Classes الخاصة بالعناصر وتغييرها أثناء تشغيل الصفحة. ستتعرف معي على الفرق بين className وclassList، ثم نستخدم دوال مثل add وremove وreplace وtoggle لتعديل الكلاسات بسهولة، حتى تتمكن من التحكم في شكل العناصر وتفاعلها مع المستخدم بشكل عملي.

في هذه الحلقة، أشرح لك الفرق بين أنواع إحداثيات الماوس المختلفة مثل clientX وpageX وoffsetX عند الضغط داخل الصفحة. ستتعرف معي على كيفية استخراج هذه القيم باستخدام كائن الحدث، ومتى تستخدم كل نوع منها حسب الهدف المطلوب، حتى تتمكن من التعامل بدقة مع موقع المؤشر داخل الصفحة أو داخل عنصر معين.

في هذه الحلقة، أعرّفك على مفهوم Regular Expressions وكيف يمكنك استخدامه للتحقق من صحة البيانات التي يدخلها المستخدم. سنتعرف معًا على فكرة الأنماط وكيفية بنائها باستخدام أدوات مثل محددات البداية والنهاية، والأقواس المربعة، والنطاقات، والمكممات، بالإضافة إلى استخدام العلامات، حتى تتمكن من إنشاء قواعد تحقق أكثر دقة لحقول الإدخال.

في هذه الحلقة، أطبق معك عمليًا استخدام Regular Expressions للتحقق من بيانات المستخدم، حيث نبني نمطًا لقبول أسماء تتكون من حروف فقط بعدد محدد، ثم نطور هذا النمط للسماح بحالات مختلفة مثل إضافة أرقام أو مسافات، مع توضيح أهمية تحديد بداية ونهاية النص، حتى تتمكن من إنشاء قواعد تحقق دقيقة لحقول الإدخال.

في هذه الحلقة، أشرح لك كيفية بناء أنماط متقدمة باستخدام Regular Expressions، من خلال أمثلة عملية مثل إنشاء نمط يشبه البريد الإلكتروني أو تحديد نطاق أرقام معين. ستتعرف معي على مفهوم التجميع واستخدام أكثر من شرط داخل نمط واحد، وكيف يمكن استخدام هذه الأنماط للتحقق من البيانات بشكل أكثر دقة وأمان.