Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

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

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

Screenshot

مكتبة Prototype

مكتبة من مكتبات الجافا سكريبت و التي تسهل و تنطم عمل المبرمج و تتيح استخدام تقنيات كثيرة مثل Ajax بمنتهى السهولة

ما هو البروتوتيب prototype.js ؟

في حال لم تسمع به من قبل فإن prototype.js هي مكتبة من مكتبات الجافا سكريبت كتبها Sam Stephenson . و هي مجموعة من المعايير السلسلة و المرنة. و التي ستمكنك من توفير الكثير من الوقت في التصميم و الطباعة الكود الخاص بك بالجافا سكريبت .

في الحقيقة و كما يقال أنها صممت أساسا لمستخدمي الروبي Rubby . و لكن بالطبع يمكنك استخدامها مع اي لغة أو في أي مكان تريد .. لكن من جرب البرمجة بالروبي سيلاحظ تشابها كبيرا في طريقة صياغة الكود ..

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

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

الدوال المرفقة

تأتي المكتبة مع الكثير من الدوال و المتغيرات المعرفة لك و التي تهدف إلى توفير الوقت و تقليل جهد الطباعة

1- دالة $()

هي البديل الرائع لــ


document.getElementById()

للوصول لمحتويات المعرفات ID مثلا Div أعطيناه التعريف ID=name بدلا من الوصول لمحتواه بهذه الطريقة


document.getElementById("name")

يمكنك استخدام التالية


$('name');

كما أنه و على عكس getElementById يمكنك قراءة قيمة أكثر من ID إلى مصفوفة مثلا


var divs = $('myid1','myid2');

ثم يمكنك استخدام محتويات المصفوفة للعرض


divs[i].innerHTML

<h2>2- دالة $F()</h2>
يعيد لك قيمة أي عنصر من عناصر الاستمارة Form هذه الدالة تأخذ تعريف الحقول مثلا


&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;
function showme()
{
alert( $F('test') );
}
&lt;/script&gt;

&lt;input type=&quot;text&quot; id=&quot;test&quot; value=&quot;Dr.net&quot; /&gt;&lt;input type=&quot;button&quot; value=&quot;اضفط هنا &quot; onclick=&quot;showme();&quot; /&gt;

3- الدالة $A()

يحول محتوى المتغير إلى مصفوفة array

4- دالة $H()

و هي دالة الهاش Hash السحري( قد يتسائل البعض ما هو الهاش لم اجد ترجمة حرفيه له و لكن من استخدم لغات برمجة مثل السي و الباسكال و غيرها لا بد ان يكون مفهوم الهاش معروف لديه لكن لغة برمجة من البي اتش بي دمج مفهوم الهاش مع المصفوفات ) و بالتالي فانها قريبه من المصفوفة مع اختلاف بسيط

كمثال سننشأ هاش جديد اسمه contact يتحتوي على الاسم و البريد و العنوان و البلد


// ننشأ هاش جديد اسمه contact باستخدام $H
var contact = $H({
name : &quot;Dr.net &quot;,
email : &quot;Somewhere@something.net&quot;,
address : &quot;Doha-Qatar&quot;
});

يمكننا الحصول على مفاتيح الهاش keys مثل name ..email .. الخ

var k = contact.keys();
// سيتحتوي على [&quot;name&quot;, &quot;email&quot;, &quot;address&quot;, &quot;postcode&quot;]

للحصول على القيم في contact نستخدم values


var val = contact.values()
// سيحتوي على [&quot;Dr.net&quot;, &quot;Somewhere@something.net&quot;,&quot;Doha-Qatar&quot;]

و الآن التالي سيجعلك سعيدا مثلي الدالة التالي تسهل العمل كثيرا ستحول جميع القيم بصيغة نص استعلامي يمكنك إضافته للعنوان مثلا test=1&test2=3و هكذ


$s= contact.toQueryString()
// سيرجع &quot;name=Dan Webb&amp;amp&amp;email=Somewhere@something.net&amp;address=Doha-Qatar&quot;

و اخيرا Each تمر على كل عنصر في الهاش


contact.each(function(item) {
alert(item.key + &quot; يحتوي على &quot; + item.value);
});
// سيظهر &quot;name يحتوي على Dr.Net&quot; و هكذا

5- دالة $R()

هي اختصار


new ObjectRange(lowerBound, upperBound, excludeBounds).

الدالة تأخذ القيمة الصغرى ثم القيمة العظمى ثم Boolean يأخذ القيمة true إذا اردت ادخال القيمة العليا و الصغرى النطاق


&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;

function showit(){
var fromTo = $R(4, 10, false);
fromTo .each(function(value, index){
alert(&quot;القيمة رقم &quot;+value);
});
}

&lt;/script&gt;

&lt;input type=&quot;button&quot; value=&quot;هيا بنا نعد&quot; onclick=&quot;showit();&quot; /&gt;

الدالة السابقة ستبدأ بالعد من بعد 5 إلى 9 و ذلك لأننا وضعنا القيمة false لو كنت وضعنا القيمة true كانت الحلقة دارت من 4 إلى 10 .. اعتقد إننا يمكننا اعتبارها بديل للحلقات مثل الfor أو while

6- الدالة Try.these()

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

مثلا بعض الدوال تدعم الدالة xmlNode.text و بعضها بدعم xmlNode.textContent و بالتالي سنجرب كل دالة


&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;

function getXmlNodeValue(xmlNode){
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;)
);
}
&lt;/script&gt;

7- دوال جديدة للتعامل مع النصوص string

  • camelize :لتحويل النص مثل background-color إلى backgroundcolor

&quot;background-color&quot;.camelize()

  • striptTags: إزالة جميع أوسمة html من النص

// &quot;I am a piece of HTML&quot;
&quot;I am a piece of &lt;strong&gt;HTML&lt;/strong&gt;&quot;.striptTags()

  • يمكنك إضافة methods طرق للأرقام.. الدالة التالية ستظهر الأرقام من 1 إلى 50 أي سيكرر الأمر 50 مرة

50.times(function(n) {
alert(n);
}};

كائن الأجاكس AJAX

لو لم تكن تستعمل أي مكتبة لتسهيل عملك لتطبيق الاجاكس أنت يا مسكين تقوم بالكثير من الطباعة و التي يمكنك اختصارها بكائن عجيب اسم AJAX

جرب التالي


&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;

new Ajax.Request(&quot;hello.php&quot;, {
onSuccess : function(resp) {
alert(&quot;النتيجة : &quot; + resp.responseText);
},
onFailure : function(resp) {
alert(&quot;عذرا يبدو أن هناك ما.&quot;);
},
parameters : &quot;name=Fred&quot;
});
&lt;/script&gt;

أنشأنا متغير جديد يحوي الكائن Ajax.Request و الذي يأخذ المتغيرات التالية

الخيار القيمة الأفتراضية الوصف
parameters لايوجد عنوان الملف أو الصفحة أو الاسكريبت الذي سيعالج البيانات أو سيرسل النتائج
method post نوع الطلب Post او Get
onSuccess لايوجد في حالة نجاح الطلب أو لو كنت ملف باساسيات الاجاكس عندما يرسل السيرفر الكود 200 و من ثم يمكنك اظهار النتائج
onFailure لايوجد ما الذي يجب ان يظهر أو يقوم به البرنامج في حال فشل عملية الاتصال
onException لايوجد الرسالة التي يجب أن تظهر في حال فشل اتمام العمليةى بسبب خلل من جانب العميل
onComplete
onLoad
onInteractive
لايوجد
on404 , onXXX لايوجد في حال ارسال رد من السيرفر مثلا لو ارسل on404 يعني الصفحةغير موجودة .. أو لو ارسل on500 بعني خلل داخلي و هكذ
asynchronous True لو وضعت القيمة false سيحجب المتصفح حتى انتهاء العملية
reqyestHeaders لايوجد مصفوفة للheaders التي ترسل مع استدعاء الاستمارة
postBody لايوجد البيانات التي سيتم ارسالها عند استخدام POST فقط مثلا لو لديك استمارة يمكنك ارسال قيمة حقول الاستمارة .

تقوم المكتبة بإرسال header خاص بها و هو


X-Requested-With: XMLHttpRequest

و ما الفائدة منه يضيف ميزة أمنية و هي عند استقبال بياناتك في الphp مثلا يمكنك معرفة أن الاستدعاء تم بواسطة اجاكس

الدالة التالية يمكنك إضافته إلى ملف php لتتأكد من ان المستدعي للسكريبت هو الاجاكس


function isAjax() {
return isset($_SERVER['HTTP_X_REQUESTED_WITH']) &amp;&amp;
$_SERVER ['HTTP_X_REQUESTED_WITH']  == 'XMLHttpRequest';
}

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

تسلسل حقول الاستمارة

هل تعبت من الرفاهية مازال هناك المزيد .. يمكنك استخدام Form.serialize لإنشاء عنوان مشفر لإرسال البيانات ..في المثال التالي لدينا نظام للتعليقات عن تعبئة الاستمارة ستم إرسال حقول الاسم و البريد و التعليق إلى لملف comment.php ليس عليك ان تطبع التالي مثلا

Name=thename&email =theemail .. الخ ستقوم الدالة بذلك نيابة عنك ..


&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;
function addComment(e) {
// submit the form using Ajax
new Ajax.Request(&quot;comment.php&quot;, {
parameters : Form.serialize(this),
onSuccess : updateComment
});
Event.stop(e);
}

Event.observe($(&quot;commentform&quot;), &quot;submit&quot;, addComment, false);
&lt;/script&gt;

التحديث

في الغالب لو صممت تطبيق يعتمد على AJAX سيكون فيه تحديث لجزء معين من صفحتك سيتحدث لتظهر فيه النتائج


&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;
new Ajax.Updater(&quot;mydiv&quot;, &quot;Scripts.php&quot;, {
parameters : &quot;email=me@me.com&quot;,
onFailure : function(resp) {
alert(&quot;عذرا خلل ...&quot;);
}
});
&lt;/script&gt;

ما ستقوم به الدالة السابقة هو استدعاء الملف Script.php و إرسال قيمة المتغير email إليه ثم إرسال النتائج إلى لتظهر المنطقة التي تحمل التعريف id =mydiv و هو بالتالي يقوم بتحديث المنطقة mydiv

بالنسبة لـ PeriodicalUpdater فهو يقوم بهذه العملية و تكرارها خلال فترة زمنية لو حولنا المثال السابق


&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;

new Ajax.PeriodicalUpdater(&quot;mydiv&quot;, &quot;Scripts.php&quot;, {
parameters : &quot;email=me@me.com&quot;,
frequency : 1,
decay : 2
onFailure : function(resp) {
alert(&quot;عذرا خلل ...&quot;);
}
});
&lt;/script&gt;

حيث الخاصية frequency هي عدد المرات , decay هي فترة الاستراحة بين مرة و أخرى و ما سيقوم به هو سينفد الأمر أو مرة و بعد الفترة الزمنية و هو في المثال 2 ثانية و يقارن النتيجة هذه المرة بالمرة السابقة لو كانت نفس النتيجة سيضرب قيمة عدد المرات في فترة الاستراحة decay و يقوم بتكرار المحاولة بعد النتيجة مثلا في مثالنا في المرة الأولى سيحاول بعد 2 ثانية و اذا كانت النتيجة متطابقة مع المرة الأولى سيكرر المحالة بعد (4 ثانية ) و هكذا و لن يتوقف حتى يجد نتيجة مختلفة و عندها سيعيد العملية ..

CheetSheet ورقة الغش :)

هناك تجد في ملف واحد جميع الدوال و المتغيرات المتوفرة في البروتوتيب و التي قد لا نكون ذكرناها هنا و يمكنك اكتشافها .. http://www.snook.ca/archives/javascript/prototype_1_5_0_cheatsheet/

خاتمة

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

المصادر

  1. http://www.sergiopereira.com/articles/prototype.js.html
  2. http://www.sitepoint.com/article/painless-javascript-prototype
  3. http://24ways.org/advent/easy-ajax-with-prototype/

بقلم : فاطمة العمادي

أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .

أوسمة : , , , , , , ,