recent
أخبار ساخنة

الأحداث المتعلقة بالنصوص و معالجتها في جافاسكربت 18

محمد تركي العلوش
الصفحة الرئيسية
الأحداث المتعلقة بالنصوص و معالجتها في جافاسكربت 18

الأحداث المتعلقة بالنصوص في جافاسكربت

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

  1. للنسخ oncopy.
  2. للصق onpaste.
  3. للقص oncut.

 

حدث النسخ oncopy في جافاسكربت

للنسخ نستخدم الحدث oncopy و توجد ثلاث طرق من أجل تنفيذ حدث النسخ oncopy سوف نأخذ أمثلة لنفهمها أكثر.

مثال 1

<h1 oncopy="copy()">Programmer Tech</h1>
.
function copy(){
	alert("تم نسخ النص");
}

أنشأنا عنصر h1 في ملف html و وضعنا به دالة للنسخ و كلمة Programmer Tech. و في جافاسكربت أنشأنا دالة إسمها copy() التي في ملف html ثم وضعنا عرض العملية عبر alert. عند القيام بعملية نسخ للعنصر h1 الذي حددناه مباشرتاً تم تنفيذ أوامر الجافاسكربت و أعطانا ديالوك "تم نسخ النص". أما إذا نريد نسخ جزء معين من الصفحة كاملة نضع أمر oncopy ضمن الوسم body لتكون الأوامر على كامل جسم الصفحة أي كل ما نراه في الصفحة.

<body oncopy="copy()">
	<h1>Programmer Tech</h1>
</body>

سوف نُلاحظ أنه عند الضغط على أي نَص من الصفحة سوف تتنفذ الأوامر, بعكس المثال الأول الذي كان فقط على جزء محدد من الصفحة و هو h1 عند نسخه تتنفذ الأوامر.

مثال 2

تتم عبر ملف الجافاسكربت في العنصر document.addEventListener كما بالمثال الآتي.

document.addEventListener('copy',function coppy(){
	alert("تم نسخ النص")
})

ستكون النتيجة كما في المثالين في الأعلى, تعمل بنجاح عبر تنفيذ الأوامر التي حددناها في الدالة function عند القيام في النسخ. إذا نريد تنفيذ الأوامر على عنصر محدد فقط نستخدم المتغيرات.

<h1 id="text">Programmer Tech</h1>
.
var text = document.getElementById("text");
text.addEventListener('copy',function copy(){
	alert("تم نسخ النص");
})

أنشأنا عنصر h1 ووضعنا له الأيدي text و بداخل هذا الوسم كلمة Programmer Tech. وفي أكواد الجافاسكربت أنشأنا متغير إسمه text و عيننا له أن يطبع النص عبر getElementById. ثم كتبنا إسم المتغير و عرضنا البيانات عبر alert يكتب لنا تم نسخ النص.

مثال 3

غالباً ما سوف نستخدم الـ method لأن الإصدارات الحديثة أفضَل في التعامل معها.

class MyPage{
	constructor() {
		var text = document.getElementById("text");
		text.addEventListener('copy',()=>{
			this.copy();
		});
	}
	copy(){
		alert("تم نسخ النص");
	}
}
onload = new MyPage();

أنشأنا كلاس بإسم MyPage و كونستركتور و من ثم انشأنا متغير text و ربطناه في الأيدي في html. ثم إخترنا addEventListener و أعطينا الأوامر هي نسخ copy التي تتنفذ و طريقة عرض البيانات هي عبر alert ديالوك منبثق و كل هذا يبدأ عند تحميل الصفحة.

 

حدث القص oncut في جافاسكربت

تُستخدَم بنفس طريقة النسخ فقط نغير الأوامر إلى oncut.

<input type="text" id="text"/>
.
class MyPage{
	constructor() {
		var text = document.getElementById("text");
		text.addEventListener('cut',()=>{
			this.copy();
		});
	}
	copy(){
		alert("تم قص النص");
	}
}
onload = new MyPage();

عند قص أي نص من الصفحة سوف تتنفذ الأوامر بشكل مباشر. لتنفيذ الأوامر على كامل الموقع نضع document قبل addEventListener.

class MyPage{
	constructor() {
		var text = document.getElementById("text");
		documnt.addEventListener('cut',()=>{
			this.copy();
		});
	}
	copy(){
		alert("تم قص النص");
	}
}
onload = new MyPage();

سيتم تنفيذ الأوامر هنا على كامل جسم الصفحة.

 

حدث اللصق onpaste في جافاسكربت

بنفس مبدأ عمليات النسخ و القص فقط تغيير الأمر لـ onpaste.

<input type="text" id="text" onpaste="cut()"/>
.
class MyPage{
	constructor() {
		var text = document.getElementById("text");
		text.addEventListener('paste',()=>{
			this.paste();
		});
	}
	paste(){
		alert("تم لصق النص");
	}
}
onload = new MyPage();
function cut(){
	alert("تم لصق النص");
}

 

الحدث onchange في جافاسكربت

الحدث onchange, في بعض الأحيان ترغب عندما يقوم المستخدم بتحديد أحد الخيارات ضمن select option بتنفيذ الأوامر التي ترغب بها. من خلال onchange يمكن القيام بذلك, توجد طريقتين ليقوموا بنفس الغرض سوف نشرح الأثنين.

مثال 4

تكون هذه الطريقة عبر كتابة الأوامر ضمن وسم html بشكل مباشر عبر onchange. لنفترض أنه لدينا عنصر select و به ثلاث خيارات سوف نقوم بإستخدامه من اجل تغير خلفية الموقع.

<select>
	<option value="red">أحمر</option>
	<option value="yellow">اصفر</option>
	<option value="blue">ازرق</option>
</select>'

سيكون شكل القائمة في المتصفح بالشكل

صورة 1 ////////////////////////

كم لاحظتم سوف تكون لدينا القائمة عادية فارغة بها الخيارات الذي تم تحديدها. نُريد إذا المستخدم قام بإختيار أحد الألوان المحددة يتم تنفيذ أوامر الجافاسكربت لتغيير لون الخلفية. يمكن إضافة الأوامر بشكل مباشر ضمن select و إستخدام العنصر onchange ثم وضع أوامر الجافاسكربت التي نرغب بتحديدها.

<select id="color" onchange= "document.body.style.background=
document.getElementById('color').value;">
	<option value="red">أحمر</option>
	<option value="yellow">اصفر</option>
	<option value="blue">ازرق</option>
</select>

لقد حددنا الأيدي color لسهولة الوصول له ثم إستخدمنا الخاصية onchange ليتم من خلالها تنفيذ أوامر الجافاسكربت. و حددنا body أي يحصل التغيير على كامل جسم الصفحة و إخترنا أنه يتم تغير الخلفية لهذه الصفحة. و تم الوصول للأيدي عبر document و إخترنا color ضمن علامتي تنصيص مفردات ( هنا لا يقبل أن تكون علامة التنصيص مزدوجه ). و عند فتحه في المتصفح عندما يختار المستخدم لون أصفر يتم تغير الخلفية صفراء على الفور و كذلك الأمر إذا إختار باقي الخيارات.

مثال 5

تكون هذه الطريقة عبر addEventListener و إختيار الأوامر التي تريد أن يتم تنفيذها.

document.getElementById("color").addEventListener("change", ()=>{
	document.body.style.background = document.getElementById('color').value;
});

سوف تكون النتيجة كما في السابق بالضبط عند إختيار أي لون يتم تغيير الخلفية له.

google-playkhamsatmostaqltradent