تحدى محترفى جافاسكريبت الجزء الاول : بناء css selector مثل مكتبه hquery

[مصطفى فرغلى]

السلام عليكم و رحمه الله تعالى و بركاته

فى هذا الموضوع ان شاء الله سنتكاتف جميعا لبنا CSS selector كما فى مكاتب الجافاسكريبت مثل jquery كل منا يزيد على كود اللى قبله او يصدر نسخه جديده لكن سنخطوا خطوات بسيطه و تتمثل شروط الإشتراك فى المسابقه التالى :

1- ان تكون إسم ال function التى سنقوم ببناءها Jselect و لن نتطرق لل OOP javascript فى الوقت الحالى سيكون كل البرمجه وظيفيه يعنى كل خصائص ال function سلسه من خلال ال arguments و ال RegEx
2- ان تبدأ بسيطه جدا مثل

Jselect("#id") 

و بإذن الله سننهيها فى منتهى التعقيد

Jselect("#id.class #id",".class") 

او من سيثابر معنا ممكن ننهيها xpath selector

Jselect("a[@id^='myid']"); 

3- ان يقوم كل منا بإدراج تعليق يشرح اى جزء يتعثر على المبرمج المبتدىء فهمه
4- ان يقوم كل مبرمج بكتابه مميزات الكود الذى كتبه فى صوره 1،2،3 الخ

ملحوظه هامه جدا : انا الوحيد الذى يحق لى الكتابه بهذا الخط الكبير حتى أغير مسار النقاش و تطور الكواد
انتظروا مشاركتى الاولى فى الموضوع ان شاء الله

[مصطفى فرغلى]

الوظيفه الاولى تقوم بإرجاع مرجع للعنصر بناءا على ال ID

function Jselect(id){
return document.getElementById(id);
}
//example
Jselect("mybtn").style.color="#fff"; 

الوظيفه الثانيه تقوم بإرجاع مرجع للعنصر بناءا على ال Class

//@clsName is class name because class canot be used as argument as it's reserved word
function Jselect(clsName){
var matechedElements = []; // array of the matched elemetns
var allElem = document.getElementsByTagName("*");
for(var i=0 ; i<allElem.length;++i){
// regular expression that match the wanted class from space separated values
var regex = new RegExp("(^|\\s)" + clsName + "(\\s|$)");
if(allElem[i].className && regex.test(allElem[i].className)){
matechedElements.push(allElem[i])
}    
}
return matechedElements;
}

//example :
Jselect("myclass")[2].focus(); 

انتظروا فى الرد القادم نسخ اكثر تطورا

[dev11]

حقيقة لا أملك سوى أن أبدي إعجابي الشديد بهذه الفكرة والتطبيق ،، وفقك الله

[مصطفى فرغلى]

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

المثال الاول : إرجاع عنصر بناءا على ID

Jselect("#id") 

المثال الثانى : إرجاع عنصر بناء على class

Jselect(".class") 

المثال الثالث : ارجاع عنصر بناءا على ID له class

Jselect("#id.class") 

المثال الرابع : ارجاع عنصر داخل عنصر

Jselect("#id",".class")
Jselect(".class","#id")
Jselect("#id.class",".class");
Jselect("#id.class","#id") 

هذا ال source code الذى كتبته و أنا مستعد لشرح اى شىء لا تفهموه فيه

<script type="text/javascript" >
				// simple CSS selector by (Dezology) Mostafa Farghaly @ swalif.net/softs 
				//@expr is the selector expression ex: #id , #id.class , .class
				//@context is where search begin it's document by default
				function Jselect(expr,context){
					var context = context?Jselect(context):false|| document;
					var regex = [];
					regex["id-selector"]=/^#(\w+)$/g;   // match #id
					regex["class-selector"]=/^\.(\w+)$/g;   // match .class
					regex["idClass-selector"]=/^#(\w+)\.(\w+)$/g;   // match #id.class
					//====== return element by ID ======//
					var byId = function(id){
						return document.getElementById(id)
					}
					//====== return element by Class ======//
					var byClass = function(clsName){
						var matechedElements = []; // array of the matched elemetns
                 var allElem = context.getElementsByTagName("*");
                 for(var i=0 ; i<allElem.length;++i){
                 // regular expression that match the wanted class from space separated values
                 var regex = new RegExp("(^|\\s)" + clsName + "(\\s|$)");
                 if(allElem[i].className && regex.test(allElem[i].className)){
                 matechedElements.push(allElem[i])
                 }
                 }
                 return matechedElements;
				}
				//=====iterate through the expressions =====//
					if(regex["id-selector"].test(expr)){
						return byId(RegExp.$1);
					}
					else if(regex["class-selector"].test(expr)){
						return byClass(RegExp.$1);
					}
					else if(regex["idClass-selector"].test(expr)){
						var elem = byId(RegExp.$1);
						var regex = new RegExp("(^|\\s)" + RegExp.$2 + "(\\s|$)");
						if(regex.test(elem.className)){
							return elem;
						}
					}
				}
</script>

انتظروا نسخه اكثر تعقيدا و أكثر كفاءه و سرعه

[مصطفى فرغلى]

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

[أحمد خلف]

لو لدي الخبرة الكافية في الجافا سكربت كنت ساعدتك

يمكن الشباب مشغولين شوي ولكن اتمنا اشوف تفاعلهم معاك فالشغل الجماعي دائماً حماسي