1. Read Onymus

    Read Onymus Developer

    الأنتساب:
    ‏27 أغسطس 2012
    المشاركات:
    41
    الإعجابات المتلقاة:
    5
    نقاط الجائزة:
    8
    الوظيفة:
    Free Web Developer
    الإقامة:
    jQuery
    [​IMG]

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

    اخواني اصدقائي معاكم اخوكم عبد الرحمن العتيبي

    [​IMG]
    اليوم بأذن الله تعالى اطرح لكم درس جميل وصغير وسهل

    في عالم جافا سكربت
    [​IMG]

    ما هو جافا سكريبت Java Scripts ؟

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

    الفرق بين جافا وجافا سكريبت:

    جافا عبارة عن لغة برمجة بطريقة التوليف Compiled Programming Language وهي مشابهة للغة البرمجة C أو C+. وهي من القوة للدرجة التي يمكنك فقط أن تكتب بها وتنتج برامج تطبيقية صغيرة لعمل أو أعمال محددة. تسمى هذه البرامج التطبيقية الصغيرة باسم "أبليتس" applets. وتقوم بتأدية مهمات قليلة محددة. إن جافا تتطلب أيضا جهدا معتبرا حتى يكون باستطاعتك التمكن منها.

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

    إن جافا سكريبت لا يتطلب أي عملية توليف Compiling وهي العملية التي يتم فيها ترجمة رموز كمبيوترية خاصة إلى شكل برنامج قابل للإستجابة والتنفيذ Executable. إن هذه البرامج يتم "طمرها" embedded داخل نص HTML الخاص بصفحة الموقع ، ويتم إظهارها بواسطة برنامج التصفح. ولهذا فهي لا تحتاج إلى أي ملفات إضافية مثل ملفات Class الخاصة بالبريمجيات الصغيرة applets وذلك كي تؤدي مهمتها.

    جافا سكربت يتم تشغيلها بواسطة برامج التصفح الحديثة سواء كانت Netscape Navigator أو Internet Explorer. ولكن الأخير قد لا يكون متلائما تماما معها ، لذا فمن المهم القيام بفحص جافا سكريبت مع كل من النظامين المذكورين قبل القيام بعملية بثه إلى الإنترنت. وإذا كنت قد نسيت القيام بذلك فإن عددا غير قليل من مستقبلي الصفحة لن يكون بوسعهم رؤية جافا سكريبت الذي قمت بعمله.
    [​IMG]

    سنتحدث في هذا الموضوع عن طريقة كتابة وصفات جافا سكربت

    مثل المحترفين وسنتدرج فيها فلا تمل من بداية الموضوع .:ُeُe21:

    من أشهر الأخطاء الشائعة (والقاتلة) هي أن تظن بأن تعريف المتغيرات عبر var لا قيمة له وأنه اختياري بالكامل ولا وظيفة له.

    مع أنه له وظيفة مهمة وهي تحديد المنظور/النطاق scope.

    عندما تعرف متغير فإنك تخضعه للنطاق الحالي فإن لم تعرفه داخل الدالة أصبح يشير إلى المتغير العام. جرب المثال التالي

    [JS]var i=1;
    function a() { var i=5; }
    a();
    alert(i);[/JS]

    ثم أعد الكرة دون var الثانية الموجودة داخل الدالة.

    سلاحظ أن إهمالها سبب تعديل قيمة i الخارجية من 1 إلى 5 من وراء ظهرك.

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

    في تنفيذ أبسط أنواع البرمجة الكينونية OOP وهو فضاء التسمية Namespacing.

    قبل أن نتعلم ذلك يجب أن نتعلم ميزتين في جافاسكربت الأولى هي إمكانية وضع خصائص لأي كائن

    (بل وحتى قراءة خصائص غير موجودة دون مشكلة) وأبسط أنواع الكائنات هي القاموس (مستخدما الحاصرتين) وهذه الخصائص قد تكون دوال.

    إليك هذا المثال

    [JS]var i={};
    i.x=5;
    i.y=7;
    alert("x="+i.x);
    alert("y="+i.y);
    alert(typeof(i.z));
    alert(typeof(i.z)=="undefined");
    alert(i.z);
    alert(!i.z);[/JS]

    يمكنك استخدام console.log إن كنت لا تحب alert كما في هذا المثال

    الأمر الآخر هو ما يعرف بالدوال النكرة anonymous function (أي التي ليس لها اسم)

    حيث أن اسم الدالة اختياري لكن عليك تنفيذها فورا أو الاحتفاظ بها في متغير إليك مثالين

    المثال الأول

    [JS]var f=function(x){
    alert("Hello, "+x);
    };
    f("World");[/JS]

    المثال الثاني

    [JS];(function(x){
    alert("Hello, "+x);
    })("World");[/JS]

    الأقواس حول تعريف الدالة لإزالة الغموض حتى نتمكن من استدعائها مباشرة "على الطاير"

    أما الفاضلة المنقوطة قبلها لحل مشاكل تصغير الكود (الفاصلة المنقوطة في آخر عبارة في الملف اختيارية فإن كنت تضغر كل

    ملف وحده ثم تدمجها معا ستحصل مشكلة). لاحظ أن أدوات تصغير نصوص جافاسكربت تستطيع تميّز أن تغيير أسماء

    المتغيرات المحلية داخل الدالة لا يؤثر خارج الدالة لذا عن تستعيض عنها بأسماء قصيرة

    (لذا يمكنك تمرير document و window كمعاملات للدالة كما سنفعل)

    لاحظ أن الدالة في آخر مثال لم نحتفظ بها وليس لها اسم بمعنى آخر لن يمكننا تنفيذها بعد ذلك

    وكأنها دالة ورقية تستخدم لمرة واحدة. هل يذكرك هذا بأي من نماذج تصميم البرمجيات.

    إن قلت نموذج الكائن المتفرد Singleton فقد حزرت. إليك هذا المثال المتكامل:

    [JS];
    var spinner=(function(document, window){
    var body=document.body;
    var self={};
    var is_visible=false;
    function id(i){return document.getElementById(i);}
    function init() {
    var overlay=document.createElement('div'), img=document.createElement('img');
    overlay.setAttribute('id', 'overlay-blocker');
    img.setAttribute('id', 'spinner');
    img.className='ani-spin';
    body.appendChild(overlay);
    overlay.appendChild(img);
    }
    self.show=function(){
    if (!id("spinner")) init();
    is_visible=true;
    body.className="loading";
    };
    self.hide=function(){
    is_visible=false;
    body.className="";
    };
    self.getIsVisible=function(){
    return is_visible;
    }
    self.toggle=function(){
    if (is_visible) self.hide();
    else self.show();
    }
    return self;
    })(document, window);[/JS]

    لاحظ أن لدينا ما يلي:

    كائن متفرد اسمه spinner

    هذا الكائن له خصائص داخلية (غير مرئية خارجه private properties) مثل is_visible

    وله دوال خدمية داخلية private methods غير مرئية خارجه مثل دالة id ودالة init

    هذا الكائن له دوال عامة (مرئية) مثل دالة spinner.show ودالة spinner.hide ودالة getIsVisible ودالة toggle لاحظ أن الزر يحتوي spinner.show

    الخصائص العامة والدوال العامة تكون عبر إضافتها إلى self أما مايعرف محليا فيكون خاص private

    فضاء التسمية العام Namespace نظيف ولم يضف له إلا spinner وكل الدوال إما تعيش داخل spinner أو متغيرات محلية.

    مع أن الكود سهل القراءة إلا أنه أيضا قابل للتصغير بشكل فلكي انظر أداة التصغير من غوغل أو Minify Javascript

    جرب عمل inspect element ثم اكتب spinner.toggle() في المحاورة console

    الكود بعد التصغير

    [JS]var spinner=function(b,f){var d=b.body,a={},c=!1;a.show=function(){if(!b.getElementById("spinner")){var a=b.createElement("div"),e=b.createElement("img");a.setAttribute("id","overlay-blocker");e.setAttribute("id","spinner");e.className="ani-spin";d.appendChild(a);a.appendChild(e)}c=!0;d.className="loading"};a.hide=function(){c=!1;d.className=""};a.getIsVisible=function(){return c};a.toggle=function(){c?a.hide():a.show()};return a}(document,window);[/JS]

    لاحظ أن كل الدوال والخصائص المحلية (بما فيها المعاملات)

    تم اختزال أسمائها حيث أصبحت document اسمها b و is_visible أصبح اسمها c وهكذا.

    نعم أعلم أن الكائن المتفرد سيء لكنه يقينا أفضل من البرمجة الإجرائية.

    إن قدر الله لي المتابعة في المواضيع القادمة سنتعلم كيف نعمل فئة class عادية يمكن استهلال أفراد منها وليس كائن متفرد.

    [​IMG]
     
    2 شخص معجب بهذا.
  2. V!P-Hero

    V!P-Hero DeveloPer Plus

    الأنتساب:
    ‏27 مارس 2012
    المشاركات:
    138
    الإعجابات المتلقاة:
    11
    نقاط الجائزة:
    18
    الإقامة:
    هنااااااك
    رد: تعلم بنفسك كتابة اكواد الجافاسكربت على طريقة الكبار فضاء التسمية والكائن المتفرد

    مشكور على الموضوع المفيد ..
    فعلا كتبت فأبدعت ..
    واصل يابطل ^
     
  3. Abdalla_Ease

    Abdalla_Ease Developer

    الأنتساب:
    ‏7 أغسطس 2015
    المشاركات:
    52
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    الوظيفة:
    طالب
    الإقامة:
    lRAQ
    رد: تعلم بنفسك كتابة اكواد الجافاسكربت على طريقة الكبار فضاء التسمية والكائن المتفرد

    [FONT=""][COLOR=""][SIZE=""]ماذا تعتقد في مشاركة Read Onymus؟يعجبني ويستحق التقييم[/SIZE][/COLOR][/FONT]
     
  4. Ali raad

    Ali raad عٍشْقْتْهٌاٌ بّـصٍـمِـ مشرف

    الأنتساب:
    ‏21 فبراير 2015
    المشاركات:
    395
    الإعجابات المتلقاة:
    767
    نقاط الجائزة:
    93
    الجنس:
    ذكر
    الوظيفة:
    طًاٌلِـبّـ
    الإقامة:
    اٌلِـعٍرُاٌقْ - بّـاٌبّـلِـ
    رد: تعلم بنفسك كتابة اكواد الجافاسكربت على طريقة الكبار فضاء التسمية والكائن المتفرد

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


    اخي الكريم في الحقيقة


    ابدعت في الطرح الموضوع


    وشرح كامل ووافي وأعجبني حقاً


    سوف يتم تقيم + خمسة نجوم للموضوع


    تحياتي لشخصك الكريم




    :ُ{age}:ُ



     
  5. sahdy18

    sahdy18 Developer

    الأنتساب:
    ‏14 نوفمبر 2011
    المشاركات:
    29
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    الوظيفة:
    طالب
    رد: تعلم بنفسك كتابة اكواد الجافاسكربت على طريقة الكبار فضاء التسمية والكائن المتفرد

    جـزاك الله خير اخوي وبتوفيق ان شاءالله
     
  6. Dr.NaRouTo

    Dr.NaRouTo Developer

    الأنتساب:
    ‏19 يناير 2012
    المشاركات:
    63
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    8
    الإقامة:
    ~المغربــ الكبــير~
    رد: تعلم بنفسك كتابة اكواد الجافاسكربت على طريقة الكبار فضاء التسمية والكائن المتفرد

    مشكور يا غالى شرح متعوب فيه

    لا تحرمنا من مزيدك

    جارى التقيم ان امكن

    تقبل مرورى
     
  7. الہٰانونيٰموسہٰ رضاويٰ

    الہٰانونيٰموسہٰ رضاويٰ Developer

    الأنتساب:
    ‏17 يونيو 2015
    المشاركات:
    80
    الإعجابات المتلقاة:
    5
    نقاط الجائزة:
    8
    الوظيفة:
    دائرة كاتب عدل
    الإقامة:
    شعلة الصدرين
    رد: تعلم بنفسك كتابة اكواد الجافاسكربت على طريقة الكبار فضاء التسمية والكائن المتفرد

    بارك الله بيك اخي موضوع مميز
    بانتضار المزيد منك
     
    1 person likes this.
  8. X-Coder

    X-Coder Developer

    الأنتساب:
    ‏10 فبراير 2015
    المشاركات:
    14
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    الوظيفة:
    Not Found 404
    الإقامة:
    /etc/shadow
    رد: تعلم بنفسك كتابة اكواد الجافاسكربت على طريقة الكبار فضاء التسمية والكائن المتفرد

    موضوع جميل جدا خصوصا في استعمال var ك function
    شكرا لطرح .
     
  9. morad hacker

    morad hacker Developer

    الأنتساب:
    ‏28 نوفمبر 2014
    المشاركات:
    34
    الإعجابات المتلقاة:
    3
    نقاط الجائزة:
    8
    رد: تعلم بنفسك كتابة اكواد الجافاسكربت على طريقة الكبار فضاء التسمية والكائن المتفرد

    بارك الله فيك :)
     
  10. جـعـفـر الـشـمـري

    جـعـفـر الـشـمـري DeveloPer Plus

    الأنتساب:
    ‏26 أغسطس 2015
    المشاركات:
    526
    الإعجابات المتلقاة:
    8
    نقاط الجائزة:
    18
    الإقامة:
    العراق
    رد: تعلم بنفسك كتابة اكواد الجافاسكربت على طريقة الكبار فضاء التسمية والكائن المتفرد

    موضوع اكثر من رائع

    مشكور على الطرح :ُeُeT:
     

مشاركة هذه الصفحة