وصف الموضوع

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

الأوسمة :
ajax| framework| javascript| مكتبة| أجاكس| إطار عمل| برمجة| جافا سكريبت
في التصنيفات :جافا سكريبت

إذا أردت أن تضع وصلة للموضوع في موقعك أو في منتدى يمكنك استخدام الوصلة التالية .

الشفرة :
<a href="http://qatardr.net/class/915" rel="bookmark" > مكتبة Prototype</a>

اضغطCtrl-C أو Apple-C  للنسخ

الوصلة ستظهر كالتالي :
مكتبة Prototype

هذا الموضوع مرخص وفق ترخيص Creative Commons.[ معلومات إضافية حول الترخيص بالعربية]

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

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

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

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

• الموقع الرسمي : prototype.js يمكنك التحميل من هنا .
• المرجع الرسمي لدوال المكتبة من هنا ..

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

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

1- دالة $()

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

document.getElementById()

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

document.getElementById("name")

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

$('name');

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

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

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

divs[i].innerHTML

2- دالة $F()

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

<script language="javascript" type="text/javascript">
function showme()
{
alert( $F('test') );
}
</script>

<input type="text" id="test" value="Dr.net" /><input type="button" value="اضفط هنا " onclick="showme();" />

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

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

4- دالة $H()

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

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

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

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

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

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

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

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

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

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

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

5- دالة $R()

هي اختصار

new ObjectRange(lowerBound, upperBound, excludeBounds).

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

<script language="javascript" type="text/javascript">

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

</script>

<input type="button" value="هيا بنا نعد" onclick="showit();" />

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

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

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

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

<script language="javascript" type="text/javascript">

function getXmlNodeValue(xmlNode){
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;)
);
}
</script>

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

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

"background-color".camelize()

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

// "I am a piece of HTML"
"I am a piece of <strong>HTML</strong>".striptTags()

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

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

• اضيف  في 22 فبراير 2006
• الزوار : [ 5,284 قارئ ]
• هذا الموضوع مرخص وفق ترخيص Creative Commons.[ معلومات إضافية حول الترخيص بالعربية]