مثال عن طريقة تغيير محتوى content html بواسطة كود javascript
 |
| كيف يمكننا تغيير محتوى html بواسطة كود javascript ؟ |
مرحباً بكم زوارنا الكرام مع كود جديد من أكواد الـ javascript والذي سوف نتعرف من خلاله عن كيفية التعامل مع التغييرات التي تطرأ على محتوى html بواسطة كود جافا سكريبت ، و الذي من خلاله سوف نتعرف أيضاً على طريقة تحكم الجافا سكريبت بمحتوى الـ html الـ content مع الإمكانية بتغيير هذا المحتوى و استبداله بمحتوى أو بقيمة نُعرّفها نحن له .
كما ذكرنا في مقالات سابقة نحن نتقصد وضع أمثلة سهلة و بسيطة و الغرض منها فقط إيصال الفكرة و طريقة عمل أي كود نضعه و نشرح عنه و كيف يتم التعامل بهذا الكود و أنت تبقى عليك المهمة التالية و التي هي إيجاد المكان المناسب لك من أجل توظيف هذا الكود للغرض الذي تحتاجه في مكانه المناسب لكي يُتِمْ عمله على أكمل وجه .
شرح الكود :
الكود المُقدم في شرح اليوم هو الكود المسؤول عن تغيير أي محتوى content أو عنصر من محتويات الـ id و استبداله بمحتوى مُغاير تماماً أو محتوى قريب له بحسب حاجتنا له .
كما تشاهد في الكود الموجود في الصندوق بالأسفل قمنا بوضع محتوى نصي " لسهولة الشرح و لسهولة رؤية التغييرات التي سوف تحدث عند تفعيل الحدث " و هو عبارة عن نص مُرتبط بالـ id و هو ما يظهر للمُستخدم .
قمنا بإنشاء id و قمنا بتسميته service لكي يتعرف عليه كود الجافا سكريبت الذي سوف نُطبق عليه الشرح .
و في الحدث قمنا بإنشاء button بالتسمية التي نُريدها و هي " اضغط هنا لمشاهدة النتيجة " و أخبرنا هذا الحدث بالتالي : عندما يضغط المُستخدم على الـ button قُم بإستبدال محتوى الـ id الذي اسمه service و ضع مكانه العنصر التالي " Welcom To Service Code " .
أما بالنسبة لإستعمالك أنت لهذا الكود فتستطيع استعماله و توظيفه أينما تُريد و كيفما تشاء و سوف يُنَفَذ الحدث على جميع العناصر داخل الـ id و ليس على النصوص فقط بل على أي عنصر تحدده أنت و يتم استبداله بأي عنصر أيضاً تُحدده أنت .
و بذلك يكون هذا هو الكود و طريقة عمله بكل بساطة ، نتمنى أن تكون وصلت الفكرة و الغاية من هذا الكود.
الكود المُستَخدم :
تنفيذ الكود و مُشاهدة الحدث :
هذا المحتوى الذي سوف يتم استبداله
إرسال تعليق