التحميل الزائد لدوال جافاسكربت JavaScript Functions Oveloading

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وسلم- وعلى آله وصحبه ومن والاه.

نقدم لكم اليوم مرورا سريعا على موضوع التحميل الزائد في دوال جافاسكربت JavaScript Functions/Methods Overloading ونعني بذلك إمكانية أن تقبل الدالة عدداً من المتغيرات كـ Parameters بعدد مساوي أو أقل من الـ Parameters المحدد عند إنشائها، وقد يشمل المفهوم أيضاً أن تكون أنواع هذه المتغيرات مختلفة ( Number, Float, Double ،String, Object , Array … وغيرها) .

هذا المفهوم هو مفهوم برمجي عام ويوجد في لغات برمجة أخرى مثل ( Ada, C++, C#, D, and Java ) .

نلاحظ المثال التالي حيث لدينا الدالة welcome تستقبل اسم الشخص واسم المدينة وتقوم بعرض رسالة ترحيب.
هذه هي الدالة :

function welcome (PersonName,CityName) {

// سنقوم هنا باختبار صلاحية ما استقبلته الدالة
// PersonName و CityName
    PersonNameIsValid=(PersonName!=undefined)&&(PersonName!='');//returns true or false
    CityNameIsValid=(CityName!=undefined)&&(CityName!='');//returns true or false

//اسم الشخص والمدينة
    if(PersonNameIsValid&&CityNameIsValid)
        alert('Welcome '+ PersonName +' to '+CityName+'!');
//اسم الشخص فقط
    else if(PersonNameIsValid)
        alert('Welcome '+ PersonName +'!');
//اسم المدينة فقط
    else if(CityNameIsValid)
        alert('Welcome to '+CityName+'!');

//Parameters  بدون 
    else alert('Welcome!!!');
}//end welcome func

//******* tests الاختبارات ********
// welcome('ali','khartoum');//  welcome ali to khartoum!

// welcome('ali');//  welcome ali!
// welcome('ali','');//  welcome ali!

// welcome('','khartoum');  welcome to khartoum!
// welcome(khartoum');  welcome khartoum! نلاحظ هنا اعتبر ان الخرطوم هو اسم الشخص لأنه تم إمراره على أنه المتغير الأول

// welcome('','');//  welcome!
// welcome();//  welcome!

ما فائدة Overload ؟
هذه الخاصية تتيح لك استخدام نفس الدالة لمهام عديدة ، وتوفر مجهود إنشاء دوال أخرى.

يمكن إجراء اختبار النوع باستخدام الدالة typeof حيث تقوم بكشف نوع المتغير الذي تم إمراره كـParameter .

لتجربة الدالة قوموا بفتح أدوات المطور في قوقل كروم وافتحوا ال console ثم قوموا بنسخ الدالة welcome ولصقها في ال console ثم مفتاح Enter.
الآن قومو بكتابة welcome() في الــ Console ثم غيروا ال parameters .

console

عموما كانت هذه نبذة سريعة عن التحميل الزائد في دوال جافاسكربت..أتمنى أن تكونوا استفدتم.. 🙂

———————————-
المصادر:
John Resig – JavaScript Method Overloading
http://stackoverflow.com – Function overloading in Javascript – Best practices
مصدر الصورة

وصلى الله وسلم وبارك على سيدنا محمد -صلى الله عليه وسلم – والحمدلله رب العالمين
#

أدوات المطوّر في قوقل كروم – Developer Tools ؟ (الجزء 1)

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وسلم-

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

  • Firebug و يعمل في Firefox
  • DragonFly يعمل في متصفح Opera
    تحديث في 17.7.2013 : Opera الآن يعمل بمحرك Blink (مبني على Webkit) أي أنه صار مثل الكروم 28+ ويتوقف العمل بالـ DragonFly في الإصدارة الحالية Opera 15 مع احتمال عودته مجدداً في الإصدارات القادمة.
  • Developer Tools ويعمل في IE8 فما فوق.
  • وأخيراً Webkit Dev Tools يعمل في Google Chrome و Apple Safari .. و Opera 15+

على الرغن من أنه تم عمل إصدارة Firebug خصيصاً لـ Google Chrome ، إلا أنها ليست بنفس فعالية الإصدارة الأصلية في Firefox .

المتصفحّات وأدوات التطوير

حديثنا في هذه السلسلة سيكون حول أدوات تطوير في قوقل كروم Chrome Developer Tools وكيفية استخدامها لمساعدة المصمم والمطور في تسهيل وتسريع وتصميم تطوير مواقع الويب، ربما نتطرق إلى بقية الأدوات لباقي المتصفحات في وقت لاحق.

واجهة أدوات التطوير

بداية نستخدم F12 أو Ctrl+Shift+i لإظهار أدوات التطوير، تتكون الواجهة من ألسنة Tabs تحتوي أيقونات الوصول للأدوات المختلفة وهي :

1. Elements : غالب العمل سيكون في هذا الجزء الذي يقوم بإظهار عناصر الصفحة في الجهة اليسرى من الشاشة وتفاصيل كل عنصر في الجهة اليمنى.

1-elements

 

2. Resources : وتحتوي هذه النافذة على جميع محتويات الصفحة ، مثل frames والصور وملفات الجافاسكربت والخطوط وملفات الستايل والـ Cookies في الجهة اليسرى وتفاصيل كل جزء في الجهة اليمنى.

2-resources

 

3. Network : تقوم هذه النافذه بإظهار الطلبات Requests الخارجة من هذه الصفحة وتفاصيل كل طلب.3-network

 

 

4. Sources : من هذه النافذة يمكن عرض وتحرير ملفات CSS و JavaScript مباشرة في المتصفح، كما يمكن متابعة وفحص وتحليل عمل الـ JavaScript في الصفحة .

4-source

5. و 6. Timeline, Profiles : كما في نافذة Network ، تعطيك هذه النوافذ معلومات دقيقة حول الأشياء التي تحدث في الصفحة مثلا من سرعة التحميل ، تفاصيل تنفيذ دوال جافاسكربت، حركة مؤشر الماوس، تقريباً جميع الأحداث Events التي تحدث في الصفحة يتم تسجيلها بصورة متسلسة ومتزامنة ، لا أذكر أني استخدمت هذه النوافذ من قبل! ولكن سنتحدّث عنها في وقت لاحق إن شاء الله.

 

7. Audits : تقوم هذه الأداة بتحليل صفحتك من ناحية استخدام الـ CSS والـ Cookies و تفاصيل عن الـ Caching وتقوم إعطاءك معلومات ونصائح حول ما يجب عليك عمله لتحسين أداء الصفحة.

5-audit

 

 

8. Console : يمكن تصنيفه كـ Command Line Tool للمتصفح ، يمكن من خلاله التفاعل مباشرة مع الصفحة من خلال الجافاسكربت .

مثال :

إذا قمنا بكتابة document.title فسيعرض عنوان الصفحة الحالية.

مثال آخر

  window.scrollTo(0,900)

سيقوم بعمل  scroll على بعد 900 بكسل من أعلى الصفحة

الصورة التالية فيها بعض الأمثلة :

6-console

كانت هذه مقدمّة سريعة عن أدوات التطوير في قوقل كروم.
يتبع إن شاء الله في أجزاء أخرى.
دمتم بود

وصلى الله وسلم وبارك على سيدنا محمد والحمد لله رب العالمين.

#

تجربة تغيير الخطوط الإفتراضية لجوجل كروم!!

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وعلى آله وصحبه وسلم تسليما كثيرا إلى يوم الدين..

سريعاً سنلقي نظرة على كيفية تغيير الإعدادات للخطوط في جوجل كروم.. فقد قمت بتغيير الخط اﻹفتراضي إلى Droid Arabic Naskh وأعجبتني الفكرة فأحببت أن أشارككم !!

الخطوات :

 

نفتح صفحة الإعدادات في جوجل كروم :
قائمة جوجل كروم

 

ثم نبحث عن خيارات تغيير الخطوط :
customize

 

نقوم بتغيير القيم الافتراضية للخيار الأول Standard Font والخيار الثالث Sans-Serif font  إلى أي خط ملائم ومريح للقراءة..في هذه الحالة قمت باختيار Droid Arabic Naskh :
change font

 

final
تغيير شكل الخط في تويتر

أخيراً كيف ستظهر الخطوط الجديدة؟ لدينا مثال هو تويتر و موقع المدونة

final2
تغيير شكل الخط في المدوّنة

 

الأمر بسيط!

أتمنى أن يكون تلميحاً مفيداً.. شكرا للمتابعة! دمتم بود..

وصلى الله وسلم وبارك على سيدنا محمد -صلى الله عليه و سلم- والحمدلله رب العالمين..

تعلم كيف تستخدم Stylish لإخفاء اقتراحات فيسبوك!

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله و على آله و صحبه و من والاه بإحسان إلى يوم الدين.

هل أزعجك عمود الاقتراحات الجانبي في فيسبوك؟ إليك طريقة سريعة و سهلة لإخفاءه!
سنتسخدم اليوم إضافة رائعة لمتصفحيْ قوقل كروم و فايرفوكس تقوم بإضافة style يحدده المستخدم لكل أو لبعض صفحات الويب.. بالرغم من أنه بالإمكان استخدامها كـ Ad Blocker كما في المثال الأول إلا أنها تكون فعالة أكثر في تحسين واجهات المواقع لتلائم مزاجك كما سنرى في المثال الثاني.

 

  المثال الأول و هو إزالة اقتراحات فيسبوك:

الخطوات كالتالي :

    1. سنقوم بتركيب الإضافة (Stylish) في متصفحك من متجر تطبيقات كروم إذا كنت تستخدم قوقل قروم أو من مركز إضافات موزيلا  إذا كنت تستخدم فايرفوكس.
    2. ثم نقوم بفتح شاشة خيارات الإضافة Options كما نلاحظ في النقطة 1 و نضيف style جديد عن طريق Add New Style لاحظ مكان النقطة 2.general1
    3. تظهر لنا شاشة أخرى نقوم بكتابة الكود التالي في صندوق الـ style :
      .ego_section{
      display:none;
      }

      – نقوم بكتابة مجال تطبيق الـ style في الصندوق الصغير بالأسفل facebook.com ونختار URLs on the domain .
      – ثم نذهب للقسم الأيسر من الشاشة ونكتب اسم الـ style الجديد ونقوم بتفعيله عن طريق التأشير على Enabled ونضغط حفظ save .

      style_writing

    4. تصفحا سعيداً!!

 

المثال الثاني :استخدام Stylish لتحسين واجهة موقع ويب:

استخدم إضافة Stylish لتحسين طريقة عرض التدوينة المفردة في موقع رؤوف شبايك لأتمكن من قراءة المقالات بصورة سهلة 😉

موقع شبايك (تدوينة مفردة single post) بصورته العادية:

موقع شبايك بصورته العادية

موقع شبايك (تدوينة مفردة single post) بعد استخدام Stylish :

موقع شبايك (تدوينة مفردة) بعد استخدام Stylish

 

.post_content{
padding: 0 20px;
line-height: 33px;
text-align: justify;
font-size: 18px
}

.sidebar {display:none;}

.main {
float:none;
width: 801px;
margin: 0 auto; /* لتوسيط الصندوق في وسط الصفحة */
}

.post {
overflow: hidden;
background: #2B2B2B;
color: white;
}

.post .post_title {
color: #333;
}

هنالك العديد من الـ Styles المختلفة والجاهزة للتنزيل والاستخدام تجدونها في موقع userstyles.

#

دمتم بود 🙂

وصلى اللهم و سلم و بارك على سيدنا محمد وعلى آله وصحبه و سلم و الحمدلله رب العالمين