تغيير نص HTML

تغيير نص HTML

تغيير نص html
تغيير نص html

من الإمكانيات المتاحة في JavaScript امكانية تغيير نص HTML حيث تعتبر هذه الميزة جديدة لم تكن متاحة حيث يعتبر نص HTML ثابت ويعرض فقط ولكن أصبح من الممكن التغيير مثل الضغط على زر أمر مثلا فيتغير محتوى النص كما في سطور المثال التالي:

مثال: JavaScript: changing HTML Content

 

في هذه السطور:

يتم تعريف زر أمر Button كما في الامر <button type= “button” ولكن في نفس الوقت يتم توظيف الحدث onclick لاستدعاء الدالة myfunction كما في السطر “onclick=” myFunction()”> التي تقوم بتغيير محتوى النص المعرف بلاسم demo

وتكون نتيجة التنفيذ في البداية كما في الشكل:

وتكون نتيجة التنفيذ عند الضغط على زر الامر كما في الشكل:

مثال:

في هذا المثال يتم تغيير محتوى نص عند الضغط عليه إلى عبارة أخرى كما في السطور التالية:

في هذه السطور:

يتم إضافة الحدث onclick داخل تعريف العبارة النصية داخل العلامة h1 ويتم تغيير محتوى هذا النص عن طريق العبارة:

Onclick=”this.innerHTML=’Ooops!'”

في هذه العبارة يتم تغيير المحتوى باستخدام الخاصية innerHTML التي تعبر عن المحتوى مع الإشارة إلى النص بالكلمة this ثم إضافة الثيمة الجديدة وهي ‘Ooop!’ وعند التنفيذ تكون نتيجة التنفيذ كما في الشكل:

مثال: عرض التاريخ

يمكن وضع التاريخ في عبارة نصية كما في سطور المثال التالي:

في هذه السطور:

يتم انشاء دالة function بالاسم display() تقوم هذه الدالة باظهار التاريخ في العنصر الذي رقمه demo ويتم استدعاء هذه الدالة كما في السطر

<button onclick=”displayDate()”>Try it</button>

في الحدث onclick لذر الأمر وتكون نتيجة التنفيذ كما في الشكل التالي:

حدث تحميل واغلاق الصفحة onload and onunload Events يمكن أيضاً توظيف حدث تحميل وإلغاء تحميل صفحة الانترنت كما في المثال

في هذه السطور يتم استدعاء الدالة checkCookies() في حدث تحميل الصفحة onload كما في السطر <body onload=”checkCookies()”>

والدالة checkCookies() تم إنشاؤها فيما بعد لاختبار حالة cookies في الجهاز وسوف يتم شرح ذلك في فصل منفصل فيما بعد وتكون النتيجة

 

m2pack.biz

تغيير نص HTML

تغيير نص HTML

تغيير نص html
تغيير نص html

من الإمكانيات المتاحة في JavaScript امكانية تغيير نص HTML حيث تعتبر هذه الميزة جديدة لم تكن متاحة حيث يعتبر نص HTML ثابت ويعرض فقط ولكن أصبح من الممكن التغيير مثل الضغط على زر أمر مثلا فيتغير محتوى النص كما في سطور المثال التالي:

مثال: JavaScript: changing HTML Content

 

في هذه السطور:

يتم تعريف زر أمر Button كما في الامر <button type= “button” ولكن في نفس الوقت يتم توظيف الحدث onclick لاستدعاء الدالة myfunction كما في السطر “onclick=” myFunction()”> التي تقوم بتغيير محتوى النص المعرف بلاسم demo

وتكون نتيجة التنفيذ في البداية كما في الشكل:

وتكون نتيجة التنفيذ عند الضغط على زر الامر كما في الشكل:

مثال:

في هذا المثال يتم تغيير محتوى نص عند الضغط عليه إلى عبارة أخرى كما في السطور التالية:

في هذه السطور:

يتم إضافة الحدث onclick داخل تعريف العبارة النصية داخل العلامة h1 ويتم تغيير محتوى هذا النص عن طريق العبارة:

Onclick=”this.innerHTML=’Ooops!'”

في هذه العبارة يتم تغيير المحتوى باستخدام الخاصية innerHTML التي تعبر عن المحتوى مع الإشارة إلى النص بالكلمة this ثم إضافة الثيمة الجديدة وهي ‘Ooop!’ وعند التنفيذ تكون نتيجة التنفيذ كما في الشكل:

مثال: عرض التاريخ

يمكن وضع التاريخ في عبارة نصية كما في سطور المثال التالي:

في هذه السطور:

يتم انشاء دالة function بالاسم display() تقوم هذه الدالة باظهار التاريخ في العنصر الذي رقمه demo ويتم استدعاء هذه الدالة كما في السطر

<button onclick=”displayDate()”>Try it</button>

في الحدث onclick لذر الأمر وتكون نتيجة التنفيذ كما في الشكل التالي:

حدث تحميل واغلاق الصفحة onload and onunload Events يمكن أيضاً توظيف حدث تحميل وإلغاء تحميل صفحة الانترنت كما في المثال

في هذه السطور يتم استدعاء الدالة checkCookies() في حدث تحميل الصفحة onload كما في السطر <body onload=”checkCookies()”>

والدالة checkCookies() تم إنشاؤها فيما بعد لاختبار حالة cookies في الجهاز وسوف يتم شرح ذلك في فصل منفصل فيما بعد وتكون النتيجة

 

m2pack.biz