السلام عليكم و رحمه الله تعالى و بركاته
قد ذكرت فى موضوع المصفوفه فى جافاسكربت 1.6 انه تم اضافه مواصفات E4X للجافاسكربت ، ال E4x -اختصار ECMA for XML- هو امتداد للغه جافاسكربت يمكننها من برمجه ال XML بطريقه ابسط بكثيرررر من ال DOM ، متاحه حاليا -وقت كتابه التدوينه- فى فايرفوكس فقط ، تم معايره مواصفات E4X بناءا على مواصفات ECMA-357 standard .
قدمت E4x كائن جديد من نوع XML يمكنك من كتابه xml literals داخل كود جافاسكربت و برمجتها بمنتهى السهوله ، عليك اولا احاطه كود جافاسكربت بتاج <script> لكن مع تغير الخاصيه type إلى text/javascript;e4x=1 كما يلى :
<script type="text/javascript;e4x=1">
/* JavaScript code here */
</script>
إنشاء كائنات XML
يمكنك انشاء كائنات XML عن طريق E4X بطريقتين ، الطريقه الاولى عن طريق ال XML constructor كما يوضح الكود البسيط التالى :
var languages= new XML('<languages type="dynamic">\
<lang>JavaScript</lang><lang>Python</lang></languages>');
ملحوظه : ال \ التى فى اخر السطر الاول لأنى قسمت النص إلى سطرين حتى يستوعبه عرض المدونه و لا يخرج عن الاطار .
و الطريقه التانيه فى انشاء كائن XML هى استخدام XML literal كما يوضح الكود البسيط التالى :
var languages = <languages type="dynamic">
<lang>JavaScript</lang>
<lang>Python</lang>
</languages>;
فى كلتا الحالتين ينتج كائن من نوع XML كما يلى :
alert(typeof languages); //XML
إذا كان ال XML المكتوب غير صحيح -كأن تنسى غلق تاج- فسينتج عنه error .
التعامل مع المتغيرات
ال XML literal يتميز عن ال XML constructor فى انه يمكنك وضع متيغرات الجافاسكربت داخل كائن ال XML اثناء انشاءه من خلال وضع اسم المتغير داخل { } كما يوضح الكود البسيط التالى :
var h = "html";
var text = "some text ya nas";
var doc = <{h}><body>{text}</body></{h}>;
alert(doc.toString());
// <html><body>here's some text ya nas</body></html>
يمكنك عمل attributes ديناميكا بنفس الطريقه كما يوضح الكود التالى :
var a = 2;
var b = <foo bar={a} ></foo>; //<foo bar="2" ></foo>
يتم استبدال علامات التنصيص “و’ و علامه الاصغر من < و علامه & بال entity المقابل لهم كما يوضح الكود التالى :
var b = 'he said " don\'t leave " ';
var el = <foo a={b} />;
alert(el.toString());
// <foo a="he said " don't leave " ">
يمكن ايضا استخدام متغيرات الجافاسكربت لعمل اسم ال attribute كما يلى :
var a = "att";
var el = <foo {a}="b" />;
alert(el.toString()); //<foo att="b">
لا يمكنك عمل التعبير كاملا عن طريق {} كما يلى :
var a = 'a="b"';
var el = <foo {a}/>;
التعامل مع ال atrributes
يمكنك تغير ال attributes و الحصول على قيمها عن طريق وضع @ قبل إسم ال attribute كما يوضح المثال البسيط التالى :
alert(languages.@type); // Alerts "dynamic"
languages.@type = "agile";
alert(languages.@type); // Alerts "agile"
alert(languages.toString());
<languages type="agile">
<lang>JavaScript</lang>
<lang>Python</lang>
</languages>
عليك ملاحظه انه لابد من تحويل قيمه ال attribute إلى نص عن طريق toString قبل مقارنته بنص اخر كما يلى :
if(languages.@type.toString() == "agile"){
// do something
}
التعامل مع الكائن XML
الكائن XML الذى يتم انشاءه عن طريق E4X يحتوى على العديد من الوظائف التى تمكنك من التعامل معه و الحصول على المعلومات منه و تحديث قيمه ، هيا بنا ننشأ كائن XML جديد كما يوضح الكود التالى :
var person = <person>
<name>Mostafa Farghaly</name>
<likes>
<os>Windows Vista</os>
<browser>FireFox</browser>
<language>JavaScript</language>
<language>PHP</language>
</likes>
</person>
يمكنك الحصول على معلومات الكائنات التى يحتويها الكائن person عن طريق dot notation و عن طريق معامله الكائنات كأنها داخل associative array كما يوضح الكود البسيط التالى :
alert(person.name); //Mostafa Farghaly
alert(person["name"]); //Mostafa Farghaly
alert(person.likes.browser); //FireFox
alert(person["likes"].browser); //FireFox
الكائن الذى يتكرر اكثر من مره يدخل داخل كائن من نوع XMLList يحتوى على مجموعه مرتبه من هذه الكائنات المتشابهه و له الوظيفه length التى تبلغ عن عدد تلك الكائنات كما يلى :
alert(person.likes.language);
<language>JavaScript</language>
<language>PHP</language>
alert(person.likes.length()); //2
عليك ملاحظه ان length وظيفه و ليست خاصيه كما فى حاله المصفوفه .
و كما فى ال DOM يمكنك استخدام ال * للحصول على كل ال Child nodes كما يوضح المثال البسيط التالى :
alert(person.likes.*.length()); //4
المعامل . يستخدم للتعامل مع الكائنات الفرعيه مباشرا من الكائن الحالى direct child nodes ، انا المعامل .. فيستخدم للتعامل مع الكائنات الفرعيه بالنسبه للكائن الحالى مهما كان عمقها او مهما كانت متفرعه من كائنات اخرى فرعيه كما يوضح المثال البسيط التالى :
alert(person..*.length()); //11
الكود السابق ارجع 11 لأنه ناتج ال element node و ال text node داخل الكائن person .
هناك ايضا وظائف اخرى للكائن XML كما يوضح الكود البسيط التالى :
alert(person.name.text()); //Mostafa Farghaly
var xml = person.name.toXMLString();
//<name><Mostafa Farghaly/name>
var personCopy = person.copy(); //new person XML object
var child1 = person.child(1); // <likes> ... </likes> element
التعامل مع الكائن XMLList
كما ذكرت من قبل الكائن XMLList الذى ينتج من الاستعلام عن العناصر المتشابهه له الوظيفه length الذى ترجع عدد هذه الكائنات ، كما يمكن عمل loop على هذه الكائنات من خلال for كما يوضح الكود البسيط التالى :
var languages = person.likes.language;
for(var i=0; i<languages.length(); i+=1){
alert(languages[i]);
}
كما يمكنك ايضا استخدام الجمله for each in الجديده فى جافاسكربت 1.6 -و مدعومه فى فايرفوكس فقط- للإستعلام عن قيم الكائنات كما يوضح الكود البسيط التالى :
var languages = person.likes.language;
for each(var lang in languages){
alert(lang);
}
عليك ملاحظه ان for in تقوم بالحصول على ال key -الخصائص و الوظائف- ، انا for each in تقوم بالحصول على القيم فقط value .
يمكنك عمل XMLList ببساطه بإستخدام طريقه ال XML literal عن طريق احاطه الكائنات الجديده ب <> و </> كما يوضح الكود البسيط التالى :
var xml_list = <>
<language></language>
<language></language>
</>;
و يمكنك الاضافه كائنات جديده على ال XMLList عن طريق المعامل =+ كما يوضح المثال البسيط التالى :
var languages = person.likes.language;
languages += <language>Ruby</language>;
ال XMLList الناتج يكون Static بمعنى انه اذا اضيف عليه كائنات جديده فإن الوظيفه length لن تبلغ عن زياده كائن جديد ، عليك اعاده انشاء ال XMLList كما يوضح المثال التالى :
var languages = person.likes.language;
alert(languages.length()); //2
languages += <language>Ruby</language>;
alert(languages.length()); //2
languages = person.likes.languages;
alert(languages.lenght()); //3
البحث و التنقيح
يمكنك إضافه فلتر بين قوسين () للحصول على كائن معين من بين عناصر ال XML ، يمكن اختبار ال attributes كما يوضح المثال البسيط التالى :
var html = <html>
<p id="p1">the 1st paragraph</p>
<p id="p2">the 2nd paragraph</p>
</html>;
alert(html.p.(@id=="p1")); // the 1st paragraph
و يمكنك عمل فلتر على العصنر كما يوضح المثال التالى :
var people = <people>
<person>
<name>mostafa</name>
<age>21</age>
</person>
<person>
<name>mohamed</name>
<age>31</age>
</person>
</people>;
alert(people.person.(name == "mohammed").age); //31
و يمكنك تمرير وظيفه للفلتر كما يوضح المثال البسيط التالى :
function overs30(age){
return age>30;
}
alert(people.person.(over30(parseInt(age)).name); //mohammed
للمزيد :
Mozilla E4X
Mozille E4X tutorial
Mozilla Processing XML with E4X
.
.
