mostafaxman
03-17-2009, 02:44 PM
هذا اول دروس من سلسلة تعلم الـ Prototype & ******.aculo.us
وهي من اروع مكتبات الجافا سكريبت بحيث تستطيع مع استخدامها ان تقوم بانشاء
موقع داينميكي بمعنى الكلمة مثل Drag & Drop و AutoComplete و In-place Editing
والكثير الكثير من الـEffects الخاصة بالمواقع الدايناميكية الحديثة ,,
مكتبة الـPrototype هي مكتبة لا يزيد حجمها عن 130 كيلو بايت ولكن مفعولها كبير
وقبل البدء بأستخدامها علينا ان نطرح على انفسنا بعض الاسئلة ,
ما هو Prototype بالضبط؟
ما الذي ينبغي لنا ان نتوقع منه ان يفعل لنا؟
الـ Prototype هو مكتبة من مكتبات الجافا سكريبت كما قلنا سابقا لتطوير بيئة المتصفحات
فهو يرث عناصر الـDOM ويبنيها داخليا مع مجموعة من الدوال القوية
اذا الان كيف لنا ان نقوم بأدراج اكواد البروتو تايب في ملفاتنا ؟ الجواب سهل جدا
اولا عليك تحميل الملف التالي ,,
حمل من هنا (http://prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js)
الان بكل بساطة قم بأستدعاءه في الصفحة التي تريد ان تقوم بأستخدامه بها من خلال
<head>
<****** type="****/**********" src=".../prototype.js" ></******>
</head>
حسنا الان كيف ستظهر الجافا سكريبت بعد استخدام هذا النموذج (prototype)?
سؤال جيد لجعل القصة الطويلة بعدة كلمات فالنقل بأنه الامر الجيد الامر الذكي الامر الغريب
لنأخذ مثالا بسيطا لتضح لديك الصورة
ملاحظة هامة : الاكواد في مايلي هي فقط للأطلاع ويمكن ان تكون ثقيلة الفهم عليك في البداية
مثال بسيط :
قم بعمل مجلد جديد وانسخ به الملف الذي قمت بتحميلة سابقا
رمز PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US" >
<head>
<meta http-equiv="Content-Type" content="****/html; charset=utf-8" />
<title>A basic demo of Prototype at work</title>
<link rel="stylesheet" type="****/css" href="basic.css" />
<****** type="****/**********" src="prototype.js" ></******>
<****** type="****/**********" src="basic.js" ></******>
</head>
<body>
<h1>A basic demo of Prototype at work</h1>
<div id="result" ></div>
</body>
</html>
الان افتح ملفا جديدا وضع به الكود التالي وسأحاول شرحة بعد تجربته
الوسم
<div id="result">
هو فقط مكان لحفظ ما سنقوم به ونجلبه من الجافا سكريبت
لنقم الان بفتح ملف جديد ونكتب به الكود التالي وقم بتسميته basic.js
var Person = Class.create({
initialize: function(first, last, city, country) {
this.first = first;
this.last = last;
this.city = city;
this.country = country;
},
getFullName: function() {
return (this.first + ' ' + this.last).strip();
},
getDisplayName: function() {
var result = this.getFullName();
if (this.city || this.country) {
result += ' (' ;
if (this.city) {
result += this.city;
if (this.country) result += ', ' ;
}
result += (this.country || '' );
result += ')' ;
}
return result;
}
});
هذه الدوال عباره عن مجموعة من الاوامر تقوم بأستدعاء الاسم والاسم الاخير وتعريفها
داخليا في الملف وايضا تقوم بأحضار المدينة والبلدة
لنقم بأضافة بعض المؤثرات فمثلا نقوم بمقارنة بين الاشخاص قم بأضافة هذه الدالة الى ملف basic.js
Person.compare = function() {
var prop = 'first', args = $A(arguments);
if (args.length
== 3 && typeof args[0] == 'string')
prop = args.shift();
var c1 = args[0][prop], c2 = args[1][prop];
return (c1 < c2 ? -1 :
(c2 < c1 ? 1 : 0));
};
هذه الدالة تقوم بالمقارنة بين الاسماء وتحويل ال[] الى مصفوفة حقيقية بما ان الجافا سكريبت
مثل لغة البي اتش بي لا تحتاج الى تعريف مسبق للمتغير فقط نقوم بأضافة علامة الدولار الى
المتغير الذي نريده لتقوم بتعريفة تلقائيا
سنقم الان بأنشاء متغير عباره عن مصفوفة لنضع بها بعض الاسماء
var people = [
new Person('Jes "Canllaith"' , 'Hall' , 'Wellington' , 'NZ' ),
new Person('Sebastien' , 'Gruhier' , 'Carquefou' , 'FR' ),
new Person('Clotile' , 'Michel' ),
new Person('Stéphane' , 'Akkaoui' , 'Paris' ),
new Person('Elodie' , 'Jaubert' , 'Paris' )
];
لنقم الان بجلب بعض اسماء الاشخاص الاولى بدون ما يحصل اي تكرار للأسم من خلال السطر التالي
people.pluck('first' ).sort().uniq().join(', ' )
// => 'Clotilde, Elodie, Jes "Canllaith", Sebastien, Stéphane'
الدالة pluck تقوم باحضار الخواص المطلوبه منها والدال uniq تقوم بجلبها بدون اي تكرار
حسنا لنقم الان بأحضار الاسماء مع الكود الخاص بدولتهم من خلال السطر التالي
people.findAll(function(n) { return n.country; })
.sort(Person.compare.bind(Person, 'country' )).invoke('getDisplayName' )
// => [ 'Sebastien Gruhier (Carquefou, FR)',
// 'Jes "Canllaith" Hall (Wellington, NZ)' ]
اخيرا وليس اخرا
اضف هذا الكود
********.observe('dom:loaded', function() {
html =
'<ul>\n'
+ people.sort(Person.compare).map(function(p) {
return '\t<li>' + p.getDisplayName().escapeHTML() +
'</li>';
}).join('\n')
+ '</ul>';
$('result').update(html);
$$('#result li:nth-child(2n)').invoke('addClassName',
'alternate');
});
(لا تنسى الاكواد السابقة تضعها في ملف basic.js)
ضع هذا الكود في ملف بأسم basic.css
#result li.alternate { font-weight: bold; color: green; }
بأستخدام هذا الكود ففي حال انشاء الصفحة سنقوم بترتيب الاسماء داخل الوسم ul و il
احفظ الصفحات وقم بتجربتها على المتصفح لديك لتظهر لك النتائج
في الدرس الثاني من السلسلة سنقوم بعمل نظام اخر من البروتو تايب
في هذا الدرس كان مجرد تجربه لكم لتقومو بالدخول الى عالم البروتو تايب
اتمنى ان اكون قد وفقت في الدرس
اي سؤال انا حاضر
دمتم بود
وهي من اروع مكتبات الجافا سكريبت بحيث تستطيع مع استخدامها ان تقوم بانشاء
موقع داينميكي بمعنى الكلمة مثل Drag & Drop و AutoComplete و In-place Editing
والكثير الكثير من الـEffects الخاصة بالمواقع الدايناميكية الحديثة ,,
مكتبة الـPrototype هي مكتبة لا يزيد حجمها عن 130 كيلو بايت ولكن مفعولها كبير
وقبل البدء بأستخدامها علينا ان نطرح على انفسنا بعض الاسئلة ,
ما هو Prototype بالضبط؟
ما الذي ينبغي لنا ان نتوقع منه ان يفعل لنا؟
الـ Prototype هو مكتبة من مكتبات الجافا سكريبت كما قلنا سابقا لتطوير بيئة المتصفحات
فهو يرث عناصر الـDOM ويبنيها داخليا مع مجموعة من الدوال القوية
اذا الان كيف لنا ان نقوم بأدراج اكواد البروتو تايب في ملفاتنا ؟ الجواب سهل جدا
اولا عليك تحميل الملف التالي ,,
حمل من هنا (http://prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js)
الان بكل بساطة قم بأستدعاءه في الصفحة التي تريد ان تقوم بأستخدامه بها من خلال
<head>
<****** type="****/**********" src=".../prototype.js" ></******>
</head>
حسنا الان كيف ستظهر الجافا سكريبت بعد استخدام هذا النموذج (prototype)?
سؤال جيد لجعل القصة الطويلة بعدة كلمات فالنقل بأنه الامر الجيد الامر الذكي الامر الغريب
لنأخذ مثالا بسيطا لتضح لديك الصورة
ملاحظة هامة : الاكواد في مايلي هي فقط للأطلاع ويمكن ان تكون ثقيلة الفهم عليك في البداية
مثال بسيط :
قم بعمل مجلد جديد وانسخ به الملف الذي قمت بتحميلة سابقا
رمز PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US" >
<head>
<meta http-equiv="Content-Type" content="****/html; charset=utf-8" />
<title>A basic demo of Prototype at work</title>
<link rel="stylesheet" type="****/css" href="basic.css" />
<****** type="****/**********" src="prototype.js" ></******>
<****** type="****/**********" src="basic.js" ></******>
</head>
<body>
<h1>A basic demo of Prototype at work</h1>
<div id="result" ></div>
</body>
</html>
الان افتح ملفا جديدا وضع به الكود التالي وسأحاول شرحة بعد تجربته
الوسم
<div id="result">
هو فقط مكان لحفظ ما سنقوم به ونجلبه من الجافا سكريبت
لنقم الان بفتح ملف جديد ونكتب به الكود التالي وقم بتسميته basic.js
var Person = Class.create({
initialize: function(first, last, city, country) {
this.first = first;
this.last = last;
this.city = city;
this.country = country;
},
getFullName: function() {
return (this.first + ' ' + this.last).strip();
},
getDisplayName: function() {
var result = this.getFullName();
if (this.city || this.country) {
result += ' (' ;
if (this.city) {
result += this.city;
if (this.country) result += ', ' ;
}
result += (this.country || '' );
result += ')' ;
}
return result;
}
});
هذه الدوال عباره عن مجموعة من الاوامر تقوم بأستدعاء الاسم والاسم الاخير وتعريفها
داخليا في الملف وايضا تقوم بأحضار المدينة والبلدة
لنقم بأضافة بعض المؤثرات فمثلا نقوم بمقارنة بين الاشخاص قم بأضافة هذه الدالة الى ملف basic.js
Person.compare = function() {
var prop = 'first', args = $A(arguments);
if (args.length
== 3 && typeof args[0] == 'string')
prop = args.shift();
var c1 = args[0][prop], c2 = args[1][prop];
return (c1 < c2 ? -1 :
(c2 < c1 ? 1 : 0));
};
هذه الدالة تقوم بالمقارنة بين الاسماء وتحويل ال[] الى مصفوفة حقيقية بما ان الجافا سكريبت
مثل لغة البي اتش بي لا تحتاج الى تعريف مسبق للمتغير فقط نقوم بأضافة علامة الدولار الى
المتغير الذي نريده لتقوم بتعريفة تلقائيا
سنقم الان بأنشاء متغير عباره عن مصفوفة لنضع بها بعض الاسماء
var people = [
new Person('Jes "Canllaith"' , 'Hall' , 'Wellington' , 'NZ' ),
new Person('Sebastien' , 'Gruhier' , 'Carquefou' , 'FR' ),
new Person('Clotile' , 'Michel' ),
new Person('Stéphane' , 'Akkaoui' , 'Paris' ),
new Person('Elodie' , 'Jaubert' , 'Paris' )
];
لنقم الان بجلب بعض اسماء الاشخاص الاولى بدون ما يحصل اي تكرار للأسم من خلال السطر التالي
people.pluck('first' ).sort().uniq().join(', ' )
// => 'Clotilde, Elodie, Jes "Canllaith", Sebastien, Stéphane'
الدالة pluck تقوم باحضار الخواص المطلوبه منها والدال uniq تقوم بجلبها بدون اي تكرار
حسنا لنقم الان بأحضار الاسماء مع الكود الخاص بدولتهم من خلال السطر التالي
people.findAll(function(n) { return n.country; })
.sort(Person.compare.bind(Person, 'country' )).invoke('getDisplayName' )
// => [ 'Sebastien Gruhier (Carquefou, FR)',
// 'Jes "Canllaith" Hall (Wellington, NZ)' ]
اخيرا وليس اخرا
اضف هذا الكود
********.observe('dom:loaded', function() {
html =
'<ul>\n'
+ people.sort(Person.compare).map(function(p) {
return '\t<li>' + p.getDisplayName().escapeHTML() +
'</li>';
}).join('\n')
+ '</ul>';
$('result').update(html);
$$('#result li:nth-child(2n)').invoke('addClassName',
'alternate');
});
(لا تنسى الاكواد السابقة تضعها في ملف basic.js)
ضع هذا الكود في ملف بأسم basic.css
#result li.alternate { font-weight: bold; color: green; }
بأستخدام هذا الكود ففي حال انشاء الصفحة سنقوم بترتيب الاسماء داخل الوسم ul و il
احفظ الصفحات وقم بتجربتها على المتصفح لديك لتظهر لك النتائج
في الدرس الثاني من السلسلة سنقوم بعمل نظام اخر من البروتو تايب
في هذا الدرس كان مجرد تجربه لكم لتقومو بالدخول الى عالم البروتو تايب
اتمنى ان اكون قد وفقت في الدرس
اي سؤال انا حاضر
دمتم بود