شرح كود نسخ النصوص تعليم جافا سكربت

هذا الكود يسهل على المستخدم تحديد النص لنسخة، فمجرد النقر على زر "انسخ" سيتم نسخ مربع النص او الكود او أي امر كان الى الحافظة، مما يمنح للزائر اريحية عند استخدام الموقع. وهذا شرح بالتفصيل لكيفية عمل كود النسخ؟

كود HTML سوف نضع النص المراد نسخة.

<div id="demo"&gt هنا النص المراد نسخة </div>
<input id="btnCopy" type="button" onclick="CopyToClipboard('demo')" value="نسخ"/>

زر عند النقر علية يتم نسخ النص كذلك حركة بسيطة هي عند النقر على الزر يظهر انه تم النسخ وهذا سيتم في الجافا سكربت.

---

كود JavaScript

function CopyToClipboard(containerID) {
const range = document.createRange();
range.selectNode(document.getElementById(containerID));
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
const original = document.getElementById('btnCcopy').value;
let newValue = 'تم النسخ';
document.getElementById("btnCcopy").value = newValue;
setTimeout( function(){
document.getElementById("btnCcopy").value = original;
}, 2000);
}

الشرح في البداية تم عمل صندوق div يحتوي على النص يمكنك من عمل صندوق لإدخال النص او وسم تريد تنسخ النص منه.

<div id="demo"> هنا النص المراد نسخة </div>

وتم عمل id معرف له، ليتم استدعائه في الكود التالي:

<input id="btnCopy" type="button" onclick="CopyToClipboard('demo')" value="نسخ"/>

هنا تم وضع زر عند النقر عليه يتم استدعاء المعرف id السابق وهو div النص المراد نسخة وضعه كمعامل او ما يسمى محدد parameter للدالة " CopyToClipboard " نسخ النص للحافظة، طبعا الاسم اختياري يمكن اختيار ما شئت.

Input
عند النقر على العنصر "زر" يتم تطبيق ما بداخل الدالة function *	onclick
النوع وهنا نوعه زر button وهناك العديد من الأنواع مثل checkbox، radio وغيرها	type
وهذه تظهر النص داخل الزر	value
هنا وضع نص معين id لاستدعائه لاحقا عند الحاجة الية في الجافا سكربت او CSS	id

---

شرح كود جافا سكربت

function CopyToClipboard(containerID) {
……………
}

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

  الاحداث في الجافا سكربت Events in JavaScript. 

هناك العشرات من الاحداث في الجافا سكربت وأشهرها هو حدث الضغط event onclick وكل له استخداماته الخاصة وهي مسماة بحسب الاسم مثل حدث الضغط وعند مرور الماوس onmouseover وخروجه وعند تحميل الصفحة onload صفحة الويب ويمكن من عمل دوال لها لتعمل العديد من الأشياء مثل التأثيرات على الصفحة Animation او العناصر Elements.

---

const range = document.createRange();
range.selectNode(document.getElementById(containerID));

في هذا الكود تم عمل range أي انشاء نطاق والمقصود بالنطاق هنا، عند تحديد النص بالماوس أي تظليل النص لعمل نسخ له او قص وغيرها، وكذلك الهواتف عند اللمس مطولا على الكلمة المراد نسخها حيث يتم تضليل النص ويسمى بداية النص ونهايته بالنطاق، بعد انشاء النطاق في السطر الثاني تم تحديد العنصر الذي سيكون هو النطاق وهذا سيكون عنصر ال div سابقا الموجود فيه النص

---

const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");

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

 الفرق بين النطاق والتحديد range vs selection؟

 النطاق حيث يتم تحديد البداية والنهاية للنص المراد نسخة بينما التحديد يتم وضع ظل ازرق حوله، بحيث تأتي الدالة execCommand ليتم نسخ ذلاك النص.

الدالة execCommand()؟ 

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

---

بعد عمل كود النسخ سيعمل معك بشكل طبيعي جدا وسيتم نسخ النصوص كل مرة تنقر على الزر نسخ، الان خطرت فكرة انه حين ما يتم نسخ النص يظهر الى الزائر انه تم النسخ وهذه الأوامر كالتالي:

const original = document.getElementById('btnCcopy').value; let newValue = 'تم النسخ'; document.getElementById("btnCcopy").value = newValue;

السطر الأول يتم استدعاء النص الموجود داخل الزر وهو " نسخ" وهو النص الأصلي لذلك سميته المتغير " orginal"، السطر الثاني قمت بإنشاء متغير نوعه نص بحيث يتم كتابه هذا النص في الزر كما هو في السطر الثالث. وسيتم تغير النص عند النقر على الزر.
 الان أصبح لدينا مشكله، ليست مشكله وانما سيتغير اسم الزر الى الاسم الجديد "تم النسخ" وسيظل هكذا حتى نسوي تحديث refresh لصفحة الانترنت، ولإعادته الى النص الأصلي سيتم عمل دالة تسمى "setTimeout" وهي معنية بالتعامل مع الزمن.

setTimeout( function(){ document.getElementById("btnCcopy").value = original; }, 1200);

شرح دالة setTimeout()؟

 هذه الدالة تأخذ محددان tow parameter المحدد الأول دالة function وهنا في هذه المثال يتم ارجاع القيمة الاصلية "نسخ" بعد زمن معين من النقر على الزر وهذا الزمن يحدد بالمعامل الثاني parameter وقيمته 1200 وكل 1000 ألف تساوي ثانية واحدة.
أخيرا ماذا لوكان لدينا العديد من النصوص والأزرار بحيث لكل زر معين يتم نسخ النص الذي يحتويه، بمعنى كود جافا سكربت واحد للجميع الازرار داخل الصفحة، ادعك مع الكود للتأمل فيه.

وسم HTML!

<div>
<div> النص رقم 1 </div>
<input id="btnCopy" type="button" value="نسخ"/> </div&gt
<div&gt <div&gt النص رقم 2 </div&gt
<input id="btnCopy" type="button" value="نسخ"/> </div>
<div> <div> لنص رقم 3 </div>
<input id="btnCopy" type="button" value="نسخ"/> </div>

دوال الجافا سكربت!

const btnsInput = document.querySelectorAll('#btnCopy');
for(let i=0 ; i < btnsInput.length ; i++){
btnsInput[i].addEventListener("click",() => {
const original = btnsInput[i].value;
btnsInput[i].value = "تم النسخ";
setTimeout(function (){
btnsInput[i].value = original;
},1200);
let xs = btnsInput[i].previousElementSibling;
const range = document.createRange();
range.selectNode(xs);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
});
}

إذا تريد معرفة شيء عن السابق الكود يمكنك من السؤال في التعليق! المصادر التمساح https://alligator.io/