التغطية المصورة ليوم سوالف: الجزء الأول، الجزء الأخير
الفائزون في المسابقة الأصغر لسوالف كاست

 

العودة   سوالف سوفت > قسم تطوير وبرمجة المواقع للمتقدمين > ويب 2.0 و البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها
المدوّنات البحث مشاركات اليوم اجعل كافة المشاركات مقروءة

رد  
 
LinkBack أدوات الموضوع
مشرف قسم ويب 2.0 و البرمجة القياسية
تاريخ التسجيل: Jun 2005-
#1 (permalink)  
Thumbs up تحدى محترفى جافاسكريبت الجزء الاول : بناء css selector مثل مكتبه Jquery


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

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

1- ان تكون إسم ال function التى سنقوم ببناءها Jselect و لن نتطرق لل OOP javascript فى الوقت الحالى سيكون كل البرمجه وظيفيه يعنى كل خصائص ال function سلسه من خلال ال arguments و ال RegEx
2- ان تبدأ بسيطه جدا مثل
كود PHP:
Jselect("#id"
و بإذن الله سننهيها فى منتهى التعقيد
كود PHP:
Jselect("#id.class #id",".class"
او من سيثابر معنا ممكن ننهيها xpath selector
كود PHP:
Jselect("a[@id^='myid']"); 
3- ان يقوم كل منا بإدراج تعليق يشرح اى جزء يتعثر على المبرمج المبتدىء فهمه
4- ان يقوم كل مبرمج بكتابه مميزات الكود الذى كتبه فى صوره 1،2،3 الخ

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






__________________
Keepondev | مدونه شديد التخصص فى الجافاسكربت

ماذا يمكننى أن أفعل إذا تعلمت جافاسكريبت ??
Dezology غير متواجد حالياً   قديم 30-03-2008, 08:47 PM
رد مع اقتباس
مشرف قسم ويب 2.0 و البرمجة القياسية
تاريخ التسجيل: Jun 2005-
#2 (permalink)  
Thumbs up بسم الله الرحمن الرحيم

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

كود PHP:
function Jselect(id){
return 
document.getElementById(id);
}
//example
Jselect("mybtn").style.color="#fff"
الوظيفه الثانيه تقوم بإرجاع مرجع للعنصر بناءا على ال Class

كود PHP:
//@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=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(); 
انتظروا فى الرد القادم نسخ اكثر تطورا






__________________
Keepondev | مدونه شديد التخصص فى الجافاسكربت

ماذا يمكننى أن أفعل إذا تعلمت جافاسكريبت ??
Dezology غير متواجد حالياً   قديم 30-03-2008, 09:12 PM
رد مع اقتباس
عضو نشيط جدا
تاريخ التسجيل: May 2007-
#3 (permalink)  

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






dev11 غير متواجد حالياً   قديم 30-03-2008, 09:34 PM
رد مع اقتباس
مشرف قسم ويب 2.0 و البرمجة القياسية
تاريخ التسجيل: Jun 2005-
#4 (permalink)  
Thumbs up

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

المثال الاول : إرجاع عنصر بناءا على ID
كود PHP:
Jselect("#id"
المثال الثانى : إرجاع عنصر بناء على class
كود PHP:
Jselect(".class"
المثال الثالث : ارجاع عنصر بناءا على ID له class
كود PHP:
Jselect("#id.class"
المثال الرابع : ارجاع عنصر داخل عنصر
كود PHP:
Jselect("#id",".class")
Jselect(".class","#id")
Jselect("#id.class",".class");
Jselect("#id.class","#id"
هذا ال source code الذى كتبته و أنا مستعد لشرح اى شىء لا تفهموه فيه



كود بلغة HTML:
<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>
انتظروا نسخه اكثر تعقيدا و أكثر كفاءه و سرعه






__________________
Keepondev | مدونه شديد التخصص فى الجافاسكربت

ماذا يمكننى أن أفعل إذا تعلمت جافاسكريبت ??
Dezology غير متواجد حالياً   قديم 30-03-2008, 11:34 PM
رد مع اقتباس
مشرف قسم ويب 2.0 و البرمجة القياسية
تاريخ التسجيل: Jun 2005-
#5 (permalink)  

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






__________________
Keepondev | مدونه شديد التخصص فى الجافاسكربت

ماذا يمكننى أن أفعل إذا تعلمت جافاسكريبت ??
Dezology غير متواجد حالياً   قديم 03-04-2008, 09:32 PM
رد مع اقتباس
مشرف أخبار الإنترنت والتقنية ومناقشتها
تاريخ التسجيل: Nov 2005-
#6 (permalink)  

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

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






__________________
انت مسلم ؟ فأنت على الحقٍ مبين
تصميم إعلاني - تصميم مواقع - Search Engine Optimization
راسلني ............ تم اغراق بريدي بالرسائل المزعجة
Fast غير متواجد حالياً   قديم 06-04-2008, 02:57 AM
رد مع اقتباس
رد


 

أدوات الموضوع

تعليمات المشاركة
لا تستطيع كتابة مواضيع
لا تستطيع كتابة ردود
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
طريقة حفظ أنماط Css بشكل منفصل ( External Sheet ) ca2oom إصلاح وصيانة المنتديات 19 03-03-2008 02:13 AM
بناء موقع بالـ Css الجزء الاول Dreamweaver x_yousef_x قسم إنشاء وصيانة المواقع للمبتدئين 20 01-09-2007 12:01 PM
بناء موقع بالـ Css الجزء الثاني Dreamweaver !! x_yousef_x قسم إنشاء وصيانة المواقع للمبتدئين 3 05-08-2007 01:12 PM


الساعة الآن: 09:49 AM بتوقيت المملكة العربية السعودية