Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

 أساسيات JavaScript وجوه المنحى

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Diangr (you can also view the original English article)

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

 بينما كانت في الماضي حجة شائعة بأن JavaScript كانت لغة أساسية وكانت 'صفعة قوية' للغاية بدون أساس حقيقي؛ لم يعد هذا هو الحال ، خاصة مع إدخال تطبيقات الويب عالية المستوى و 'التعديلات' مثل JSON (ترميز كائن جافا سكريبت).

 يمكن أن تحتوي JavaScript على كل ما تقدمه لغة Object-Orientated ، وإن كان ذلك ببذل جهد إضافي خارج نطاق هذه المقالة.

 دعونا إنشاء كائن

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

 Literal هو خيار مفضل لتباعد الأسماء بحيث لا تتداخل شفرة JavaScript (أو العكس) مع البرامج النصية الأخرى التي تعمل على الصفحة وأيضًا إذا كنت تستخدم هذا الكائن ككائن واحد ولا تتطلب أكثر من مثيل واحد الكائن ، في حين يفضل ترميز نوع الدالة منشئ إذا كنت تحتاج إلى القيام ببعض الأعمال الأولية قبل إنشاء الكائن أو تتطلب عدة مثيلات للكائن حيث يمكن تغيير كل مثيل أثناء عمر البرنامج النصي.  دعونا نواصل البناء على كل من أجسامنا في وقت واحد حتى نتمكن من مراقبة ما هي الاختلافات.

 تحديد الطرق والخصائص

 إصدار منشئ:

 الإصدار الحرفي:

 لكل من الكائنات التي قمنا بإنشائها خاصية 'iAm' والتي تحتوي على قيمة سلسلة يتم استخدامها في طريقة الكائنات الخاصة بنا 'whatAmI' والتي تنبه رسالة.

 الخصائص هي متغيرات تنشأ داخل كائن ، والطرق هي وظائف تنشأ داخل كائن.

 من المحتمل أن يكون الوقت مناسبًا لشرح كيفية استخدام الخصائص والأساليب (على الرغم من أنك كنت ستفعل ذلك إذا كنت معتادًا على المكتبة).

 لاستخدام خاصية أولاً ، اكتب ما ينتمي إليه الكائن - لذلك في myObject في هذه الحالة - ثم الرجوع إلى خصائصه الداخلية ، يمكنك وضع إيقاف كامل ثم اسم الخاصية بحيث تبدو في النهاية مثل myObject.iAm ( هذا سيعود 'كائن').

 للأساليب ، هي نفسها باستثناء تنفيذ الطريقة ، كما هو الحال مع أي وظيفة ، يجب وضع قوسين بعده ؛ وإلا ، فستعود فقط إلى الإشارة إلى الدالة وليس إلى ما ترجعه الدالة فعليًا.  لذلك سوف تبدو مثل myObject.whatAmI ()  (هذا سوف ينبه 'أنا كائن').

 الآن للاختلافات:

  •  يحتوي الكائن المُنشئ على خصائصه وطرق تعريفه مع الكلمة الأساسية 'هذا' الموجودة أمامه ، بينما لا يحتوي الإصدار الحرفي.
  •  في كائن المُنشئ ، تكون للخصائص / الأساليب 'قيمها' محددة بعد علامة متساوية '=' بينما في النسخة الحرفية ، يتم تعريفها بعد النقطتين ':'.
  •  يمكن أن تحتوي وظيفة المُنشئ على semi-colons ';' (اختياري) ؛ ' في نهاية كل إعلان خاصية / طريقة بينما في النسخة الحرفية إذا كان لديك أكثر من خاصية أو طريقة واحدة ، يجب أن تكون مفصولة بفاصلة '،' ، ولا يمكن أن تحتوي على نقرات شبه نهائية بعدها ، وإلا ستعود جافا سكريبت خطأ.

 يوجد أيضاً اختلاف بين طريقة استخدام هذين النوعين من تعريفات الكائنات.

 لاستخدام كائن مرئي حرفيًا ، يمكنك ببساطة استخدامه عن طريق الإشارة إلى اسم المتغير الخاص به ، لذلك حيثما تطلب الأمر ، يمكنك الاتصال به عن طريق الكتابة ؛

 مع دالات منشئ تحتاج إلى إنشاء (إنشاء مثيل جديد) الكائن أولاً؛ تفعل هذا بكتابة

 باستخدام وظيفة منشئ.

 دعونا نستخدم دالة المنشئ السابقة ونبني عليها حتى تقوم ببعض العمليات الأساسية (ولكن الديناميكية) عندما نقوم بتفعيلها.

تمامًا مثل أي وظيفة JavaScript، يمكننا استخدام الوسيطات مع وظيفة المُنشئ ؛

 الآن دعنا نتحدث عن هدفنا ونستدعي منه طريقة ايه امي ، وملء الحقول المطلوبة ونحن نفعل ذلك.

هذا وسيتم تنبيه 'أنا كائن لغة جافا سكريبت'.

أن إينستانتياتي أو لا إينستانتياتي

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

أولاً نحن سيتم إنشاء كائن حرفية؛

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

الآن دعنا نجرب عملية مماثلة مع دالة إنشائية.

كما هو متوقع، لذا سواء بإرجاع القيمة الصحيحة، ولكن دعنا نغير myProperty لواحدة من الحالات.

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

واحد حتى الذي يجب استخدامه؟ كذلك فإنه يعتمد على الحالة، إذا ما عليك سوى كائن واحد من نوعه للبرنامج النصي الخاص بك (كما سترى في المثال الخاص بنا في نهاية هذه المقالة)، ثم استخدام قيمة حرفية كائن، ولكن إذا كنت بحاجة عدة مثيلات من كائن ما، حيث يعتبر كل مثيل مستقل عن الآخر ويمكن لها خصائص مختلفة أو الأساليب تبعاً للطريقة التي هي التي شيدت، ثم استخدم دالة إنشائية.

هذا وذاك

بينما شرح مهام منشئ، كان هناك الكثير من 'this' الكلمات التي ألقيت حول والرقم ما أفضل وقت للحديث عن نطاق!

والآن قد تسأل 'ما هو نطاق هذا كنت أتكلم من'؟ ' نطاق في جافا سكريبت كائن وظيفة على أساس، بحيث يعني إذا كنت خارج دالة، لا يمكنك استخدام متغير تم تعريفه داخل دالة (إلا إذا كنت تستخدم إغلاق).

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

 كما ترون في هذا المثال ، يتم تعريف var1 في الكائن العام ومتاح لجميع الوظائف والأشياء ، يتم تعريف var2 داخل function1 ويكون متاحًا للوظيفة 1 والدالة 2 ، ولكن إذا حاولت الرجوع إليها من الكائن العام ، تعطيك الخطأ 'var2 غير معروف' ، يمكن الوصول إلى var3 فقط للوظيفة 2.

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

بسبب نطاق عملنا سيشير سلسلة، إذا نحن داخل كائن فرعي (كائن داخل كائن)، 'هذا' الكائن الفرعي وليس على الكائن الأصل.

 كملاحظة جانبية ، من المفيد أيضًا إضافة أنه عند استخدام وظائف مثل setInterval و setTimeout و eval ، عند تنفيذ وظيفة أو طريقة عبر أحد هذه ، يشير 'هذا' إلى كائن النافذة لأن هذه هي أساليب النافذة ، لذلك ()setInterval و ()window.setInterval هي نفسها.

حسنا الآن أن لدينا أن الخروج من الطريق، دعونا لا مثال عالم حقيقي وإنشاء كائن التحقق من صحة نموذج!

العالم الحقيقي الاستخدام: "كائن التحقق من صحة النموذج"

أولاً يجب أن أعرض لكم للدالة أديفينت التي سوف نخلق، وهو مزيج من ECMAScript (فايرفوكس، سفاري، إلخ.) الدالة ()addEventListener والدالة في Microsoft ActiveX البرنامج النصي ()attachEvent.

 يؤدي هذا إلى إنشاء وظيفة جديدة بثلاث وسيطات ،  to كونها كائن DOM ، فإننا نرفق الحدث به ، ونكتب type الحدث و fn الذي يتم تشغيله عند تشغيل الحدث. فإنه يتحقق أولاً ما إذا كان يؤيد أديفينتليستينير، إذا كان ذلك أنها سوف تستخدم ذلك، إذا لم يكن فسيقوم بالبحث عن أتاتشيفينت وإذا فشل كل شيء آخر ربما استخدام IE5 أو شيء عفا عليها الزمن على قدم المساواة حتى نقوم بإضافة الحدث مباشرة على ممتلكاتها الحدث (ملاحظة : الخيار الثالث سيقوم بالكتابة فوق أية وظيفة القائمة التي كان قد تعلق على خاصية الحدث بينما الأول والثاني سيتم إضافته كوظيفة إضافية ممتلكاتها الحدث).

الآن دعنا إعداد وثيقتنا حيث أنها مماثلة لما قد تراه عند تطوير الأشياء مسج.

في مسج سيكون لديك؛

استخدام الدالة أديفينت نحن لدينا؛

الآن لدينا نموذج الكائن.

حتى هذا هو الغاية الأساسية ولكن يمكن بسهولة توسيع نطاقها.

لكسر هذا أولاً نقوم بإنشاء خاصية جديدة ومجرد اسم السلسلة المغلق 'صحيح' الفئة التي عند تطبيقها على حقل النموذج، ويضيف آثار صحيحة مثل حد أخضر. ونحن أيضا تعريف لدينا اثنين من الكائنات الفرعية، fname و lname، حتى يمكننا تحديد خصائصها الخاصة التي يمكن استخدامها بواسطة الطرق في أماكن أخرى، هذه الخصائص هي minLength الذي هو الحد الأدنى من الأحرف يمكن أن يكون لهذه الحقول، maxLength التي هي أحرف كحد أقصى يمكن أن يكون الحقل و fieldName الذي لا تعتاد فعلا، ولكن يمكن أن أمسك عن أشياء مثل تحديد الحقل مع سلسلة سهلة الاستعمال في رسالة إعلام بخطأ (على سبيل المثال. ' حقل الاسم الأول المطلوب.).

 بعد ذلك ، يتم إنشاء طريقة validateLength تقبل وسيطتين: formEl عنصر DOM للتحقق من الصحة و type الذي يشير إلى أحد الكائنات الفرعية لاستخدامها (أي fname أو lname). هذه الدالة بالتحقق ما إذا كان طول الحقل بين مجموعة minLength و maxLength، إذا كان لا ثم نقوم بإزالة لدينا فئة صالحة (إذا كان موجوداً) من العنصر وإرجاع false، إلا إذا كان ثم إضافة فئة صالحة وإرجاع true.

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

وأخيراً لدينا أسلوب جيتسوبميت. هذا الأسلوب هو إعطاء معرف النموذج والحلقات ثم من خلال إدخال جميع العناصر داخل النموذج المحدد للعثور على واحد الذي يحتوي على نوع من الإرسال (النوع = "يقدم"). والسبب في هذا الأسلوب هو العودة زر الإرسال حتى أننا يمكن تعطيله حتى النموذج جاهز للإرسال.

دعونا نضع هذا الكائن مدقق للعمل على نموذج حقيقي. أولاً نحن بحاجة إلى أن إتش تي أم ال.

الآن دعنا الوصول إلى هذه الكائنات الإدخال باستخدام جافا سكريبت والتحقق من صحة لهم عند إرسال النموذج.

دعونا كسر هذا الرمز.

نحن التفاف لدينا التعليمات البرمجية في الدالة أديفينت حتى عندما يتم تحميل النافذة تشغيل هذا البرنامج النصي.  أولاً ، نلتقط النموذج باستخدام معرّفه ونضعه في متغير يدعى ourForm ، ثم نأخذ زر الإرسال الخاص بنا (باستخدام طريقة getSubmit للكائنات النموذجية) ونضعها في متغير يدعى submit_button ، ثم نضبط سمة إرسال الأزرار المُعطلة إلى ' معاق'.

المقبل ونحن تعريف دالة تشيكفورم. هذا بتخزين جميع المدخلات داخل حقل نموذج صفيف ونحن نعلق عليه لمتغير المسمى... تفكر في ذلك... inputs! ثم أنه يعرف بعض متداخلة إذا كان الصفيف باختبار كل حقل من الحقول داخل المدخلات بيانات ضد أساليب عملنا والنموذج. هذا هو السبب في أننا إرجاع true أو false في أساليب عملنا، حتى إذا تقوم بإرجاع true، ونحن تمرير أنه إذا البيان وتستمر إلى الذي يليه، ولكن إذا تقوم بإرجاع false، يمكننا الخروج إذا البيانات.

بعد تعريف الدالة، علينا تنفيذ الدالة تشيكفورم عند تحميل الصفحة في البداية وأيضا إرفاق الدالة حدث keyup وحدث تقدم.

يمكن أن يسأل، لماذا إرفاق الإرسال إذا نحن تعطيل الزر إرسال. حسنا إذا كنت تركز على حقل إدخال واضغط على مفتاح enter وأنه سيحاول تقديم النموذج، ونحن بحاجة إلى اختبار لهذا، ومن ثم لدينا الدالة تشيكفورم بإرجاع true (يقوم بإرسال النموذج) أو false (لا يقدم النموذج) والسبب.

الاستنتاج

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.