مدونة سلام

تخبيصات javascript

salam — Fri, 30 May 2008 00:26:51 +0000

جرب ثم اقرأ :

رسالة نتيجة صحيحة

رسالة فشل

أثناء عملي في أحد مشاريع الجامعة ، يخطر ببالي أفكار جديدة دائما ، جديدة بالنسبة لي ، ففي كل مرة أكتب صفحة أحاول أن أصنع شيئا جديدا ، قد يكون غير جديد بالنسبة للآخرين ، لكن جديد بالنسبة لي.
مثلا ، ربما لاحظت إن كنت تستعمل FireFox أني أضع شريطا بالأسفل أشكرك لذلك ، كنت و في أثناء عملي مع المشروع و في قسم منه أستخدم الأجاكس بكثرة ، أثناء الطلب أحتاج لصورة متحركة مثلا كالتي تظهر لك عند إضافة تعليق في مدونتي ، لكن أردت أن أفعل شيئا آخر ، قررت أن أضع شريط قصير في أسفل النافذة يحمل عبارة loading... مثلا يظهر أثناء طلب الأجاكس و حتى لحظة الإعادة ( مشابة للذي يظهر في Gmail عند الدخول للبريد.

اليوم ، كنت أفكر بأسلوب آخر لعرض رسائل النجاح أو الفشل ، فدائما عند القيام بإرسال نموذج من الجيد الإبلاغ عن خطأ إن وجد أو إظهار رسالة تبين نجاح العملية ، و التأثيرات جميلة فكرت بأن أعرض رسالة بتنسيق معين تظهر لمدة قصيرة و تختفي ، ربما شاهدت ذلك في بعض المواقع من قبل و لكن لا أريد أن أبحث عن كود جاهز ، حتى لو كتبت أول مرة مقطع برمجي ضعيف لكن أن يلبي الغرض المؤقت و أن أحاول هذا أهم.

هذا كود javascript الذي كتبته :

t = 400;
function msg(message,type,period){
    t = period;
    id = type == 'ok' ? 'ok' : 'error';
    document.getElementById(id).style.display = 'block';
    document.getElementById(id).innerHTML = message;
    window.setTimeout("stay(id)",1);
}
function stay(id){
    t = t-1;
    if(t>0){
        window.setTimeout("stay(id)",1);
    }else{
        document.getElementById(id).style.display = 'none';
    }
}

و هنا CSS

#ok{
border: 1px solid #95E89F;
color: #857D74;
font-size: 12px;
padding: 15px;
text-align: center;
display: none;
position: absolute;
top : 200px;
left : 25%;
right: 25%;
width: 50%;
background-color: #DAF2D9;
}
#error{
border: 1px solid #FF0000;
color: #857D74;
font-size: 12px;
padding: 15px;
text-align: center;
display: none;
position: absolute;
top : 200px;
left : 25%;
right: 25%;
width: 50%;
background-color: #FFDFDF;
}

طبعا أنا مبتدئ في الـ javascript لذلك قد تجد الكود ضعيف أو أنه يمكن فعل ذلك بطرق أفضل ، إن أحببت أن تطرح رأيك سأرحب بذلك.

[نظام إدارة مواقع ...] قادم

salam — Fri, 16 May 2008 15:20:54 +0000

ابتدأت اليوم العمل في نظام إدارة مواقع الذي سيكون مشروعي لهذا الفصل في الجامعة.

ما هو هذا النظام ( كلمة نظام كبيرة شوي ) ؟

هو عبارة عن موقع فارغ ، يمكن اعتباره نواة Core موقع ، لا يحتوي في حالته الافتراضية شيئا إلا ( لوحة تحكم أساسية ، نظام قولبة ! Theme ، برنامج نموذجي ).
لوحة التحكم الأساسية تتضمن : معلومات المدير و إمكان تعديلها ، إمكانية تثبيت و إزالة برامج mods ، تعديل إعدادات الموقع الأساسية ، توزيع الكتل أو الصناديق ).

مم يتألف البرنامج mod ( اختصار لـ module ) ؟
يتألف أساسيا من ملف xml يحوي كافة معلومات البرنامج ، إضافة للصفحات المكونة له و هي من نوع php و js و ... حسب الرغبة

هذا هو كل الموضوع !

حقيقة ، قمت بالتعامل مع الكثير من أنظمة إدارة المحتوى CMSs و كانت فكرتي أن أقوم بشيء مشابه لكن بأقل كمية ممكنة من الكود و بأكبر قدر ممكن من الديناميكية، و هذا النموذج هو ما استقريت عليه.
قد يبدو صغيرا لكن كما قلت هو نواة فقط ، يمكن بالتالي تخصيص هذا الموقع لأي غرض.
مثال ، أريد أن أجعل الموقع عبارة عن موقع إخباري [أخبار ، أقسام ، تعليقات ، مدراء ، RSS ، ...]
أقوم ببرمجة برنامج خاص بذلك mod و ليكن اسمه news ، يتضمن هذا البرنامج ملف إعدادات xml و ملفات php و ليكن أحدها خاص بعرض الأقسام ، آخر خاص بعرض الأخبار (عموما ، حسب القسم ، عرض خبر كامل ... ) ملف خاص بالخلاصات RSS ... أيضا هناك ملفات لإدارة كل مقطع تظهر للمدير في لوحة التحكم بعد أن يقوم بتثبيت هذا البرنامج.

بمعنى أن لوحة التحكم تعنى فقط بتثبيت و إزالة برامج بالإضافة إلى إعدادات الموقع العامة و إدارة البرامج المثبتة.
و لاحقا كل برنامج يتولى إدارة نفسه ، أي تأتي إدارته معه ، حتى نظام المستخدمين هو برنامج و ليس من أصل النظام.

هناك حرية كبيرة في برمجة أي برنامج ، المهم شرح هذا البرنامج في ملف الـXML الخاص به.

أتمنى أن تسير الأمور معي كما أتوقع و أنتهي منه خلال أيام قبل أن أدخل في معركة االامتحانات .
90% سوف أنشر هذا البرنامج كمنتج مفتوح المصدر و مجاني في الصيف القادم ، أما الـ 10% المتبقية فهي تتبع للظروف.
إذا تحقق ما أفكر به سيكون هذا المنتج منافسا للكثير من أنظمة إدارة المحتوى المعروفة عالميا .

مشروع المترجمات

salam — Thu, 15 May 2008 02:27:05 +0000

اليوم انتهيت من مشروع المترجمات (Compiler) ، قضيت 10 ساعات متواصلة في كتابة الكود ، حوالي 500 سطر جافا.
أعتقد أنه إنجاز جيد بالنسبة لي لعدة اعتبارات :

- تغلبت قليلا على الكسل.
- هذه أول مرة أكتب برنامج بلغة Java ، معرفتي بها ضعيفة ، سأتوسع بها فيما بعد.
- استخدام طريقة جديدة في الترجمة تتمثل في استخدام الـXML كمرحلة ، و استخدام المكدس Stack في التحليل و هذا ما أعجب الأستاذ .

مراحل عمل المترجم :

1 - قراءة الكود الذي يقوم المستدم بكتابته في ملف.
2 - تقسيم الكود إلى مقاطع و وضعها في ملف XML .
3 - جلب البيانات من ملف الـ XML و تحليل كل مقطع و حفظ قائمة بالأخطاء.
4 - في حال عدم وجود أخطاء ، بناء برنامج java مكافئ.
5 - توليد ملف .class من ملف الجافا الناتج.

بالطبع هو مترجم متخلف جدا ، لكن نظرا لضيق الوقت ، و لأن ليس بالمشروع الضخم ، هو مجرد تطبيق لبعض المفاهيم مثل طرق التحليل من أدنى لأعلى و الأساليب المستخدمة في التحقق من صحة عبارة بواسطة جدول Shift Reduce.

اللغة التي يقبلها المترجم هي لغة بسيطة تتكون من الآتي :

- يبدأ البرنامج بكلمة start و ينتهي بكلمة end .
- يعرف المتحول على أنه إما String أو int بواسطة الكلمة def مثل :

def test int;

- عبارة if لها الشكل :

if (exp){}

- عبارة for لها الشكل :

for x = y to z { }

- عبارة الإدخال هي :

input(x)

- عبارة الإخراج لها الشكل :

output(x)

- تقبل اللغة حلقات for و حلقات if متداخلة.

هذه صورة توضح الطريقة المتبعة في معالجة حلقة For ، يتم بناء مكدس أو مصفوفة تحوي في عناصرها تعابير نظامية Regular Expression كل منها يعبر عن محتوى يجب أن يكون ، تتم معالجة الجملة بحيث نقوم بتجميع الحروف حتى نصل للفراغ ثم مقارنة النص الناتج مع قمة المكدس ، إذا حصل تطابق matches ننفذ الطريقة pop التي تحذف قمة المكدس ، و في نفس الوقت نكون قد حذفنا الأحرف المشكلة للكلمة التي تم تحليلها.
هناك حالتان لوقوع الخطأ :
- في حال انتهاء العبارة و عدم انتهاء المكدس.
- في حال وجود حالة عدم تطابق في إحدى المراحل.
صورة توضيحية ( بعض الشيء ) : اضغط على الصورة للتكبير -

بشكل عام ، كان المشروع مقبول قياسا بمدة الإنجاز و الوقت المتوفر ولو أنه كان هناك بعض الأخطاء.
ما أزعجني في النهاية هو مايكروسوفت وورد 2007 ، فأنا أبغض الكتابة فيه و هذه أول مرة أستخدم الإصدار 2007 و هذا ما جعلني أبحث طويلا عن كل أمر ، لأنه كان مطلوبا أن نكتب بعض الشرح عن آلية المترجم و هذا ما كتبناه بـ 3 صفحات شديدة الاختصار.