Archive for the ‘Javascript’ Category

ملحوظة صغيرة

2010/01/16
يبدو أن مبرمج ملف الـjavascript في موقع نقابة المهندسين كان متعبا أثناء برمجته و يتضح ذلك من خلال الرسالة المستخدمة للتأكد من وصول التنفيذ إلى سطر أو كتلة ما، لاحظ معي الـ واااااااع 😀 :

if (ss.readyState==4){
//alert("waaaaaaa3");

طبعا من الجيد في مختلف لغات البرمجة استخدام فكرة طباعة عبارة (أو إظهار رسالة) معينة في كتلة أو مقطع للتأكد من دخول التنفيذ إليها.
بالنسبة لي أقوم عادة بطباعة 0 ثم 1 ثم … في المنطقة التي أشك بسير التنفيذ فيها فمثلا ليكن كود الجافا التالي:
try{
ResultSet rs =...
System.out.println("0");
if(rs.next()){
System.out.println("1");
if(rs.getString(1) != null){
System.out.println("2");
...
}else{
System.out.println("3");
...
}
}else{
System.out.println("4");
...
}
}catch(SQLException e){
...
}

و ذلك طبعا أثناء العمل و ليس تبقى في التطبيق النهائي.

$fx

2009/10/28
نحتاج عند تطبيق مؤثرات باستخدام جافا سكريبت إلى تغيير خصائص عناصر في الصفحة (خصائص CSS للعقد في بنية XML) و يتم ذلك عن طريق DOM و الأحداث.
فمثلا لو فكرنا كيف نصنع حركة تقوم بتكبير صورة بشكل حركي مع تغيير موضعها لتصبح في منتصف الصفحة فوق كل العناصر الأخرى، نجد أن ذلك كفكرة يتم بتغيير كل من width,height,left,top مثلا و هذا التغيير عند جعله تابعا للزمن سيصبح أفضل من تغيير القيم من القيمة البدائية إلى النهائية فقط.
مثال آخر عند استعراض صور متلاحقة مع مؤثر مثل تغيير الشفافية فيمكن النظر لذلك بأننا نقول بتغيير الخاصية opacity للصورة (filter من أجل Internet Explorer) بين قيمتين.
المهم، هناك كثير من المكتبات التي توفر توابع جاهزة للقيام بمؤثرات متنوعة مثل jQuery مثلا و لكن إن كان المطلوب من المكتبة فقط تحقيق مؤثرات و لن نستخدم إمكانياتها الأخرى مثل Ajax أو التحقق من الحقول أو … فالأفضل هو بناء المكتبة فقط لهذا الغرض أو استخدام مكتبة صغيرة.
هنا سأتحدث قليلا عن مكتبة صغيرة هي $fx تحوي بعض التوابع التي تفيد في إعداد مؤثرات حيوية.
لاحظ الصفحة الرئيسية للموقع و حركة الغيوم مثلا، تؤمن هذه المكتبة عدة توابع هي مشروحة هنا.
سأكتب مثالا صغيرا عن كيفية تحريك div إلى موقع آخر في الصفحة مع تغيير الموضع و الأبعاد و الشفافية، إضافة لذلك كيفية تنفيذ تابع آخر عند انتهاء التحريك.

CSS Code:

#p{
position:absolute;
width:100px;
height:100px;
background-color:#F9F1D2;
border:1px solid #F1DF98;
text-align:center;
right:70px;
top:10px;
z-index:10;
}

Javascript Code:

//<![CDATA[
(function(){
window.onload = function(){
var p = document.getElementById("p");
zoomin(p);
function zoomin(id){
id.onclick = function(){
$fx(id).fxAdd({type:'right',from:70,to:410,step:20,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'top',from:10,to:66,step:4,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'opacity',from:22,to:100,step:7,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'width',to:520,step:30,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'height',to:380,step:20,delay:1,onfinish:function(){
zoomout(id);
id.innerHTML = 'Hello !';
}}).fxRun(null,1);
};
}
function zoomout(id){
id.onclick = function(){
$fx(id).fxAdd({type:'right',from:410,to:70,step:-20,delay:10}).fxRun(null,1);
$fx(id).fxAdd({type:'top',from:66,to:10,step:-4,delay:10}).fxRun(null,1);
$fx(id).fxAdd({type:'opacity',from:22,to:100,step:7,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'width',to:100,step:-30,delay:10}).fxRun(null,1);
$fx(id).fxAdd({type:'height',to:100,step:-20,delay:10,onfinish:zoomin(id)}).fxRun(null,1);
};
}
};
})();
//]]

XHTML Code:

<div id="p"></div>

لتحميل مكتبة $fx النسخة المضغوطة من هنا و لتحميل المصدر من هنا، الملفات تخضع لرخصة MIT و GPL.
و لتحميل هذا المثال البسيط من هنا.

محرر nicEdit

2008/08/30

محرر نصوص أو ما يسمى بـ WYSIWYG التي تعني What You See Is What You Get جديد كما أعتقد هو nicEdit ، يتميز بأنه بسيط و صغير جدا ، المحررات الأخرى المعروفة ذات حجم كبير يزيد عن الـ 2 ميغا بعد فك الضغط و يصل للـ 5 ميغا بايت أما هذا فحجمه بعد فك الضغط 34 كيلو بايت و يتألف من ملف جافا سكريبت و صورة gif فقط.
قابل للتخصيص بشكل جيد و مناسب للكثير من المناطق ، فكثيرا ما تكون الحاجة لمحرر بسيط و بإمكانات محدودة و لا داعي عندها لتركيب محرر مثل TinyMCE أو غيره …

هذه صورة للمحرر

يمكن تجربته و تحميله من موقع المنتج.

للمهمات الأكبر أنصح باستخدام openWYSIWYG.

مجموعة تطبيقات Ajax

2008/03/04

مجموعة من تطبيقات الأجاكس الأنيقة :

FrogJS معرض صور بسيط و أنيق.
Swazz أداة لاختيار التاريخ.
Unobtrusive للتقييم.
ajaxim مشابه لبرامج المحادثة.
Suckerfish HoverLightbox يمكنك مشاهدة مثال عنه من هنا.
Ajax Domain Search للبحث عن أسماء النطاقات.
Transparent message يعرض رسائل حول نجاح أو فشل بعض العمليات بطريقة جميلة.
Relay لإدارة المسارات و الملفات بإمكانات كبيرة.

أتمنى أن تنال الإعجاب