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

في هذا الدرس سوف نتعلم كيف تضيف كود لتحويل شفرة إعلانات ادسنس لتضعها على مدونتك، وهناك عدة طرق، الأولى بواسطة كود الجافا سكربت، "وسأقوم بشرح كيفية عمل هذا الكود" والثانية بواسطة برنامج Node++، التحويل لا يؤثر على سياسات جوجل ادسنس، وانما لكي يظهر فقط على البلوجر لأنها تستخدم لغة التكويد XML، والتي تمنع كل الاوسمة عدا المخزنة فيها.
اولا عن طريق جافا سكربت.
 كمبرمج هناك العديد من الطرق لكن سأقدم أسهل الطرق لعمل تلك على الجافا، لان كثرة الاكواد تدخلنا في دوامة، وسوف تحصل على مثل هذه الكود في الاسفل:
جافا سكربت



ادخل الكود هنا


أول خطوة كود HTML يتم عمل امر ادخال النص وزر عند النقر علية يتم تحويل الشفرة.
<textarea id="txtField" rows="15"&gt</textarea&gt
<input type="button" onclick="replaceCode()" value="استبدال"/&gt
كود الجافا سكربت JavaScript
function replaceCode(){
var result = document.getElementById("txtField").value;
if(result === ''){
alert("لا توجد شيفرة"); }
else{
var txtMatrix = { "<":"<", ">":"&gt" };
var re =/<|>/gi;
result = result.replace(re,function (matched){ return txtMatrix[matched]; });
document.getElementById("txtField").value = result;
}
}
بالنسبة للتصميم CSS فهذا عائد عليك كما يحلو لك، فبالنسبة لي، استخدم كلا من bootstrap و w3school في التصميم، فهذ يساعد على اختصار الوقت والاكواد ويمنحني وقت للتركيز على المقالات وامور أخرى لذلك كمبرمج انصح باستخدام الطرق السهلة والسريعة لكن في بادى الأمر عليك اتباع الطريقة المطولة لفهم الأمور؟

شرح الكود لتحويل شيفرة إعلانات جوجل ادسنس.

 الوسم الأول textarea لعمل مستطيل لجعل المستخدم يقوم بلصق شيفرة اعلان ادسنس بداخلها، ولديها عدة خصائص من ضمنها:
textarea
عدد الصفوف التي تظهر مبدئيا في صفحة الويب rows
عدد الاعمدة التي تظهر مبدئيا في صفحة الويب* cols
* أًفضل استخدام الخاصية عرض width حتى يبدو متناسقا مع المتصفحات والصفحات الويب. الوسم الثاني وهو زر button يحتوي على:
Input
عند النقر على العنصر "زر" يتم تطبيق ما بداخل الدالة function * onclick
النوع وهنا نوعه زر button وهناك العديد من الأنواع مثل checkbox، radio وغيرها type
وهذه تظهر النص داخل الزر value
عند حدث الضغط يتم تطبيق الدالة والتي تكتب في الجافا سكربت طبعا وضعت لها اسم replaceCde() مطابق لما سيقوم الزر بعملة وهو استبدال الكود يمكنك من تغييرة! في الجافا سكربت
function replaceCode(){ …..}
هنا تم استدعاء الدالة التي في كود HTML للزر button حدث الضغط onclick.

var result = document.getElementById("txtField").value;
تم عمل متغير result يجلب النص الذي داخل الحقل textarea، وتم استدعائه بواسطة اداة التعريف id ، وهو نفسه id في كود HTML للحقل، وتخزين ما بداخل الحقل " دالة "value" لهاذا الغرض" في المتغير result. يمكنك من تسمية أي متغير تريد!

if(result === ''){ alert("لا توجد شيفرة"); }
هنا تم عمل دالة الشرط if حيث تنص "إذا كان الحقل فاضي empty اعرض رسالة "alert" لا توجد شيفرة، يمكنك من تغيرها او حذفها

else{
var txtMatrix = { "<":"<", ">":"&gt" };
var re =/<|>/gi;
result = result.replace(re,function (matched){ return txtMatrix[matched]; });
}
هنا الدالة else تدل على وجود نص، وحين ما يتم لصق الشيفرة قم باستبدال النص الذي في الحقل بواسطة دالة الاستبدال "replace" وهذه تأخذ محددين او ما يسميهم بعض المبرمجين معاملات "parameter" وتكتب بهذه الطريقة replace("RegExp or old text","function or new text") بمعنى ضع النص القديم في المحدد الأول واستبدله بما يناسبه في المحدد الثاني؟

ماهو المحدد parameter؟

سمي محدد بمعنى انه لدية حدود لا يقبل الكود إلا بها، مثلا هناك محدد نوعه نص String بمعنى لا يقبل اإلا نصاَ فقط، وكذلك الرقم int والمحدد Boolean لا يقبل إلا إذا كانت صح true او الخطأ false، بينما هناك في الجافا سكربت وكذاك الجافا محدد من نوع RegExp.

ما هو RegExp؟

 هو محدد خاص بدالة البحث search() و الاستبدال replace() بمعنى البحث داخل الحقل عن نصوص معينة او ارقام مطابقة، وهو اختصار لأوائل احرف كلمة Regular Expression . بالنسبة لطريقة كتابته Syntax
/الكلمة المراد البحث عنها/ طربقة البحث؛
طريقة البحث المقصود بها البحث عن الكلمة مع مراعاة الاحرف الكبيرة والصغيرة نضع الحرف g بينما بدون مراعاة الاحرف يتم استخدام i ويمكن اضافتهما الاثنان معا.
 نعود لتكملة شرح الكود بعد البحث عن الكلمات المراد استبدالها في المحدد الأول، نضع دالة تبين ماهي الكلمات المتطابقة او الموجودة في الحقل التي سوف تستبدل بها، وهذه الكلمات تم عمل مصفوفة لها باسم txtMatrix، حيث تم عمل محدد واحد للدالة وهو matched ويقوم بتطبيق محتويات المصفوفة.

document.getElementById("txtField").value = result;
أخيرا اعرض ذلك على الحقل textarea بعد استبدال الكلمات المجودة في القائمة وهذا الكود بدورة يعرض جميع الكلمات المتطابقة والمجودة في دالة البحث.

 تحويل شفرة ادسنس لدعم البلوجر عن طريق نوت Note++.

 ويمكنك من تحويل أي شفرة حتى بدون برنامج Note++ فقط عبر برنامج المفكرة المرفق مع ويندوز، الطريقة هي فتح المذكرة او Note++، ومن ثم لصق الشفرة بداخلها، ثم من لوحة المفاتيح ctrl+H أي استبدال " نستبدل العلامة ">" فتح الوسم بالرمز "<"، ومن ثم العلامة "<" اغلاق الوسم بالرمز ">" وبعد ذلك نقوم بنسخ الكود ولصقة في المدونة بلوجر!

 الدوال المستخدمة في الدرس.
الجافا سكربت JavaScript الوسم HTML
replace() <input&gt
document <input&gt
getElementById() <textarea&gt

المصدر
 دبليو ثري سكولز 2019 (رابط الموقع) https://www.w3schools.com/
موزيلا دفلوبر 2019 (رابط الموقع) .

التعليقات