في هذا الدرس سوف نتعلم كيف تضيف كود لتحويل شفرة إعلانات ادسنس لتضعها على مدونتك، وهناك عدة طرق، الأولى بواسطة كود الجافا سكربت، "وسأقوم بشرح كيفية عمل هذا الكود" والثانية بواسطة برنامج Node++، التحويل لا يؤثر على سياسات جوجل ادسنس، وانما لكي يظهر فقط على البلوجر لأنها تستخدم لغة التكويد XML، والتي تمنع كل الاوسمة عدا المخزنة فيها.
اولا عن طريق جافا سكربت.
كمبرمج هناك العديد من الطرق لكن سأقدم أسهل الطرق لعمل تلك على الجافا، لان كثرة الاكواد تدخلنا في دوامة، وسوف تحصل على مثل هذه الكود في الاسفل:
بالنسبة للتصميم CSS فهذا عائد عليك كما يحلو لك، فبالنسبة لي، استخدم كلا من bootstrap و w3school في التصميم، فهذ يساعد على اختصار الوقت والاكواد ويمنحني وقت للتركيز على المقالات وامور أخرى لذلك كمبرمج انصح باستخدام الطرق السهلة والسريعة لكن في بادى الأمر عليك اتباع الطريقة المطولة لفهم الأمور؟
* أًفضل استخدام الخاصية عرض width حتى يبدو متناسقا مع المتصفحات والصفحات الويب.
الوسم الثاني وهو زر button يحتوي على:
عند حدث الضغط يتم تطبيق الدالة والتي تكتب في الجافا سكربت طبعا وضعت لها اسم replaceCde() مطابق لما سيقوم الزر بعملة وهو استبدال الكود يمكنك من تغييرة!
في الجافا سكربت
هنا تم استدعاء الدالة التي في كود HTML للزر button حدث الضغط onclick.
تم عمل متغير result يجلب النص الذي داخل الحقل textarea، وتم استدعائه بواسطة اداة التعريف id
، وهو نفسه id في كود HTML للحقل، وتخزين ما بداخل الحقل " دالة "value" لهاذا الغرض" في المتغير result. يمكنك من تسمية أي متغير تريد!
هنا تم عمل دالة الشرط if حيث تنص "إذا كان الحقل فاضي empty اعرض رسالة "alert" لا توجد شيفرة، يمكنك من تغيرها او حذفها
هنا الدالة else تدل على وجود نص، وحين ما يتم لصق الشيفرة قم باستبدال النص الذي في الحقل بواسطة دالة الاستبدال "replace" وهذه تأخذ محددين او ما يسميهم بعض المبرمجين معاملات "parameter" وتكتب بهذه الطريقة replace("RegExp or old text","function or new text") بمعنى ضع النص القديم في المحدد الأول واستبدله بما يناسبه في المحدد الثاني؟
طريقة البحث المقصود بها البحث عن الكلمة مع مراعاة الاحرف الكبيرة والصغيرة نضع الحرف g بينما بدون مراعاة الاحرف يتم استخدام i ويمكن اضافتهما الاثنان معا.
نعود لتكملة شرح الكود بعد البحث عن الكلمات المراد استبدالها في المحدد الأول، نضع دالة تبين ماهي الكلمات المتطابقة او الموجودة في الحقل التي سوف تستبدل بها، وهذه الكلمات تم عمل مصفوفة لها باسم txtMatrix، حيث تم عمل محدد واحد للدالة وهو matched ويقوم بتطبيق محتويات المصفوفة.
أخيرا اعرض ذلك على الحقل textarea بعد استبدال الكلمات المجودة في القائمة وهذا الكود بدورة يعرض جميع الكلمات المتطابقة والمجودة في دالة البحث.
الدوال المستخدمة في الدرس.
المصدر
دبليو ثري سكولز 2019 (رابط الموقع) https://www.w3schools.com/
موزيلا دفلوبر 2019 (رابط الموقع) .
اولا عن طريق جافا سكربت.
كمبرمج هناك العديد من الطرق لكن سأقدم أسهل الطرق لعمل تلك على الجافا، لان كثرة الاكواد تدخلنا في دوامة، وسوف تحصل على مثل هذه الكود في الاسفل:
ادخل الكود هنا
أول خطوة كود HTML يتم عمل امر ادخال النص وزر عند النقر علية يتم تحويل الشفرة.
كود الجافا سكربت JavaScript
شرح الكود لتحويل شيفرة إعلانات جوجل ادسنس.
الوسم الأول textarea لعمل مستطيل لجعل المستخدم يقوم بلصق شيفرة اعلان ادسنس بداخلها، ولديها عدة خصائص من ضمنها:textarea | |
---|---|
عدد الصفوف التي تظهر مبدئيا في صفحة الويب | rows |
عدد الاعمدة التي تظهر مبدئيا في صفحة الويب* | cols |
Input | |
---|---|
عند النقر على العنصر "زر" يتم تطبيق ما بداخل الدالة function * | onclick |
النوع وهنا نوعه زر button وهناك العديد من الأنواع مثل checkbox، radio وغيرها | type |
وهذه تظهر النص داخل الزر | value |
ماهو المحدد parameter؟
سمي محدد بمعنى انه لدية حدود لا يقبل الكود إلا بها، مثلا هناك محدد نوعه نص String بمعنى لا يقبل اإلا نصاَ فقط، وكذلك الرقم int والمحدد Boolean لا يقبل إلا إذا كانت صح true او الخطأ false، بينما هناك في الجافا سكربت وكذاك الجافا محدد من نوع RegExp.ما هو RegExp؟
هو محدد خاص بدالة البحث search() و الاستبدال replace() بمعنى البحث داخل الحقل عن نصوص معينة او ارقام مطابقة، وهو اختصار لأوائل احرف كلمة Regular Expression . بالنسبة لطريقة كتابته Syntaxطريقة البحث المقصود بها البحث عن الكلمة مع مراعاة الاحرف الكبيرة والصغيرة نضع الحرف g بينما بدون مراعاة الاحرف يتم استخدام i ويمكن اضافتهما الاثنان معا.
نعود لتكملة شرح الكود بعد البحث عن الكلمات المراد استبدالها في المحدد الأول، نضع دالة تبين ماهي الكلمات المتطابقة او الموجودة في الحقل التي سوف تستبدل بها، وهذه الكلمات تم عمل مصفوفة لها باسم txtMatrix، حيث تم عمل محدد واحد للدالة وهو matched ويقوم بتطبيق محتويات المصفوفة.
تحويل شفرة ادسنس لدعم البلوجر عن طريق نوت Note++.
ويمكنك من تحويل أي شفرة حتى بدون برنامج Note++ فقط عبر برنامج المفكرة المرفق مع ويندوز، الطريقة هي فتح المذكرة او Note++، ومن ثم لصق الشفرة بداخلها، ثم من لوحة المفاتيح ctrl+H أي استبدال " نستبدل العلامة ">" فتح الوسم بالرمز "<"، ومن ثم العلامة "<" اغلاق الوسم بالرمز ">" وبعد ذلك نقوم بنسخ الكود ولصقة في المدونة بلوجر!الدوال المستخدمة في الدرس.
الجافا سكربت JavaScript | الوسم HTML |
---|---|
replace() | <input> |
document | <input> |
getElementById() | <textarea> |
المصدر
دبليو ثري سكولز 2019 (رابط الموقع) https://www.w3schools.com/
موزيلا دفلوبر 2019 (رابط الموقع) .
إرسال تعليق