From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- .../first_steps/a_first_splash/index.html | 618 ------------------- files/ar/learn/javascript/first_steps/index.html | 70 --- .../first_steps/useful_string_methods/index.html | 684 --------------------- files/ar/learn/javascript/index.html | 58 -- .../ar/learn/javascript/objects/basics/index.html | 258 -------- files/ar/learn/javascript/objects/index.html | 53 -- .../javascript/objects/inheritance/index.html | 228 ------- .../objects/object-oriented_js/index.html | 296 --------- .../objects/object_prototypes/index.html | 248 -------- 9 files changed, 2513 deletions(-) delete mode 100644 files/ar/learn/javascript/first_steps/a_first_splash/index.html delete mode 100644 files/ar/learn/javascript/first_steps/index.html delete mode 100644 files/ar/learn/javascript/first_steps/useful_string_methods/index.html delete mode 100644 files/ar/learn/javascript/index.html delete mode 100644 files/ar/learn/javascript/objects/basics/index.html delete mode 100644 files/ar/learn/javascript/objects/index.html delete mode 100644 files/ar/learn/javascript/objects/inheritance/index.html delete mode 100644 files/ar/learn/javascript/objects/object-oriented_js/index.html delete mode 100644 files/ar/learn/javascript/objects/object_prototypes/index.html (limited to 'files/ar/learn/javascript') diff --git a/files/ar/learn/javascript/first_steps/a_first_splash/index.html b/files/ar/learn/javascript/first_steps/a_first_splash/index.html deleted file mode 100644 index 2a6a1c4860..0000000000 --- a/files/ar/learn/javascript/first_steps/a_first_splash/index.html +++ /dev/null @@ -1,618 +0,0 @@ ---- -title: البداية في الجافا سكربت -slug: Learn/JavaScript/First_steps/A_first_splash -tags: - - أحداث - - تعلم - - جافا سكربت - - حالات شرطية - - دالة - - سكربت - - عمليات - - كائنات - - مبتديء - - متغيرات - - مقال -translation_of: Learn/JavaScript/First_steps/A_first_splash ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
- -

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

- -

- - - - - - - - - - - - -
المتطلبات اﻷساسية:فهم أساسيات الحاسوب، فهم أساسيات HTML و CSS, وفهم ما هي الجافا سكربت.
الهدف:أخذ قليل من الخبرة في كتابة بعض الجافا سكربت، وفهم القليل من اﻷساسيات لفهم كتابة برنامج بالجافا سكربت  .
- -

لا تتوقع أن تفهم كل تفاصيل الكود في الوقت الحالي __ نحن نريد أن نقدم لك المباديء العليا اﻵن، وإعطاؤك فكرة عن كيفية عمل الجافاسكربت ( وأي لغة برمجة أخرى ). في المقالات اللاحقة ، سوف نرى كل هذه الميزات بكثير من التفصيل!

- -
-

ملحوظة: العديد من ملامح الكود سوف تراها في الجافا سكربت كما في اللغات البرمجية اﻵخرى __ الدوال ، الحلقات التكرارية، إلخ. بنية الكود تبدو مختلفة ، ولكن المبدأ واحد ﻻ يتغير .

-
- -

فكر مثل المُبَرْمِج

- -

واحد من اﻷشياء الصعبة في تعلم البرمجة ليس بنية الكود، ولكن كيف تطبق هذا الكود لحل المشاكل في العالم الحقيقي. أنت تحتاج للبدء في التفكير مثل المُبَرْمِج__ عمومًا هذا يتضمن النظر في وصف ماذا يحتاج برنامجك لكي يعمل, وعلى ماذا يعمل. ملامح الكود تحتاج ﻷن تحقق هذه اﻷشياء، وكيفية جعلهم يعملون معًا.

- -

المتطلبات مزيج من العمل الجاد ، الخبرة في تركيب الجملة البرمجية ، و التدريب بجانب قليل من اﻹبداع. كلما قمت بكتابة الكود ، كلما كان ذلك أفضل . ﻻ نعدك أن تطور " عقل المبرمج " في خمسة دقائق، ولكن سوف نعطيك الكثير من الفرص للتدريب على التفكير مثل المُبَرْمِج خلال هذه الدورة .

- -

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

- -

مثال __ لعبة تخمين الرقم

- -

في هذا المقال سنعرض لك كيفية بناء لعبة بسيطة كما في هذا المثال :

- - - -

{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}

- -

جرب اللعب __ تعرف بنفسك على اللعبة قبل أن تمضي قُدُمًا .

- -

دعنا نتخيل رئيسك في العمل أعطاك المختصر التالي ﻹنشاء هذه اللعبة :

- -
-

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

-
- -

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

- -
    -
  1. أنشيء رقم عشوائي بين 1 و 100 .
    2. -
  2. سجل الرقم الذي أدخله اللاعب . بداية من رقم 1 .
    3. -
  3. أعطِ اللاعب طريقة لتخمين ما هو الرقم .
    4. -
  4. بمجرد أن يدخل اللاعب الرقم ، سجل أول رقم بحيث يستطيع اللاعب أي يرى تخمينات السابقة.
    5. -
  5. ثم ، تأكد ما إذا كان الرقم صحيح.
    6. -
  6. إذا كان صحيحًا : -
      -
    1. اعرض رسالة التهنئة .
      2. -
    2. امنع اللاعب من كتابة تخمينات أخرى ( ﻷن هذا سيفسد اللعبة) .
      3. -
    3. اعرض للاعب أن يبدأ اللعبة مرة أخرى .
      4. -
    -
    7. -
  7. إذا كان خطأ واللاعب لديه مرات أخرى : -
      -
    1. أخبر اللاعب أن التخمين خطأ .
      2. -
    2. اسمح للاعب بإدخال تخمين آخر.
      3. -
    3. قم بزيادة المحاوﻻت بمقدار 1 .
      4. -
    -
    8. -
  8. إذا كان خطأ واللاعب ليس لدي مرات أخرى: -
      -
    1. أخبر اللاعب أن اللعبة انتهت .
      2. -
    2. امنع اللاعب من كتابة تخمينات أخرى ( ﻷن هذا سيفسد اللعبة) .
      3. -
    3. اعرض للاعب أن يبدأ اللعبة مرة أخرى .
      4. -
    -
    9. -
  9. عندما يُعاد تشغيل اللعبة ، تأكد من إعادة تعيين اللعبة وواجهة المستخدم ، ثم نفذ الخطوة رقم 1 .
    10. -
- -

دعنا نبدأ اﻵن ، لنرى كيف نستطيع أن نحول هذه الخطوات إلى كود، وننشيء هذا المثال ، ونستكشف ميزات الجافا سكربت في طريقنا :

- -

اﻹعداد اﻷولي

- -

للبدء في الحل ، نفضل أن تأخذ نسخة من ملف , number-guessing-game-start.html  (هنا يمكن رؤية المثال الحي). افتح الملف في محرر النصوص الخاص بك وفي متصفح الويب.سترى عنوان رئيسي وفقرة التعليمات و نموذج ﻹدخال التخمينات ، ولكن هذا النموذج حاليًا لن يقوم بعمل أي شيء .

- -

المكان حيث سنضيف الكود الخاص بنا بداخله  {{htmlelement("script")}} يوجد في آخر ملف HTML :

- -
<script>
-
-  // Your JavaScript goes here
-
-</script>
-
- -

إضافة المتغيرات لتخزين البيانات الخاصة بنا

- -

دعونا نبدأ. قبل كل شيء ، أضف اﻷسطر التالية بداخل عنصر{{htmlelement("script")}} :

- -
let randomNumber = Math.floor(Math.random() * 100) + 1;
-
-const guesses = document.querySelector('.guesses');
-const lastResult = document.querySelector('.lastResult');
-const lowOrHi = document.querySelector('.lowOrHi');
-
-const guessSubmit = document.querySelector('.guessSubmit');
-const guessField = document.querySelector('.guessField');
-
-let guessCount = 1;
-let resetButton;
- -

في هذا القسم من الكود فقد هيئنا المتغيرات والثوابت التي سنحتاجها لتخزين بيانات برنامجنا. المتغيرات تحتوي بشكل أساسي على قيم ( مثل الأرقام، النصوص). ﻹنشاء متغير نكتب الكلمة let  ( أو var ) متبوعة باسم المتغير ( للمزيد عن الاختلاف بين الكلمات المفتاحية في هذه المقالة ). الثوابت تستخدم لتخزين قيم غير قابلة للتغيير أو ﻻ تتغير وتكتب الثوابت بعد الكلمة المفتاحية const. في هذه الحالة ، نستخدم الثوابت لتخزين مراجع ﻷجزاء من واجهة المستخدم ; النص بداخل بعض هذه الثوابت ممكن أن يتغير ، ولكن عنصر HTML  يبقى كما هو .

- -

تستطيع تعيين قيمة للمتغير أو الثابت بعد علامة يساوي (=) متبوعة بالقيمة التي تريدها .

- -

في مثالنا :

- - - -
-

ملحوظة: سوف تتعمل المزيد عن المتغيرات / الثوابت فيما بعد في هذه الدورة ، بداية من المقال التالي .

-
- -

الدوال

- -

ثم ، أضف التالي أسفل كود الجافا سكربت الذي كتبناه باﻷعلى :

- -
function checkGuess() {
-  alert('I am a placeholder');
-}
- -

الدوال هي جزء من الكود يمكن إعادة استخدامه حيث تستطيع كتابة مرة واحدة واستدعاؤه مرة أخرى ومرة أخرى، وحفظ الكود الذي نحتاج لتكراره دائمًا .هذا حقًا مفيد.هناك عدة طرق لتعريف الدوال، ولكن اﻵن سنركز على نوع بسيط. هنا عرَّفنا الدالة باستخدام الكلمة المفتاحية  function, متبوعة بالاسم, مع اﻷقواس بعدها . بعد ذلك وضعنا اﻷقواس المعقوفة ({ }). بداخل اﻷقواس المعقوفة نكتب الكود الذي نريده لكي يعمل عندما نستدعي هذه الدالة.

- -

عندما نريد تشغير الكود ، نكتب اسم الدالة متبوعًا باﻷقواس.

- -

دعنا نحاول اﻵن. احفظ الكود و أعد تحميل الصفحة في المتصفح. ثم اذهب إلى   developer tools JavaScript console, وأدخل السطر التالي :

- -
checkGuess();
- -

بعد الضغط على Return/Enter, يجب أن ترى تحذير يقول لك "I am a placeholder" لقد عرَّفنا الدالة في الكود الخاص بنا حيث تنشيء تحذير عند استدعائها.

- -
-

ملحوظة: سوف تتعلم المزيد عن الدوال في هذه الدورة .

-
- -

العمليات الرياضية

- -

العمليات الرياضية في الجافا سكربت تسمح لنا أن نجري اختبارات، حل الرياضيات، ربط مجموعة كلمات ونصوص مع بعضهم البعض، وأشياء أخرى.

- -

إذا لم تقم بذلك بالفعل ، احفظ الكود الخاص بك، أعد تحميل الصفحة في المتصفح الخاص بك، وافتح developer tools JavaScript console .بعد ذلك نستطيع الكتابة كما في المثال التالي __ اكتب كل واحد من أعمدة "المثال" كما هو موضح تمامًا، اضغط Return/Enter بعد كل واحد، وانظر ما هي النتائج التي ظهرت :

- -

أوﻻً دعنا نلقى نظرة على العمليات الحسابية ، على سبيل المثال :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العمليةالمسمىمثال
+الجمع6 + 9
-الطرح20 - 15
*الضرب3 * 7
/القسمة10 / 5
- -

أيضًا تستطيع استخدام علامة + لربط النصوص معًا ( في البرمجة، هذا يسمى التسلسل). جرب إدخال السطور التالية ، واحدًا تلو الآخر :

- -
let name = 'Bingo';
-name;
-let hello = ' says hello!';
-hello;
-let greeting = name + hello;
-greeting;
- -

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

- -
name += ' says hello!';
- -

هذا يعادل :

- -
name = name + ' says hello!';
- -

عند استخدام حالة صح/ خطأ ( على سبيل المثال بداخل الحاﻻت الشرطية __ انظر {{anch("Conditionals", "below")}} ) نستخدم عمليات المقارنة . على سبيل المثال :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العمليةالمسمىمثال
===المساواة الصارمة(هل هي نفسها بالضبط؟) - 
-5 === 2 + 4 // false
-'Chris' === 'Bob' // false
-5 === 2 + 3 // true
-2 === '2' // false; number versus string
-
!==عدم المساواة (أليست هي نفسها؟) - 
-5 !== 2 + 4 // true
-'Chris' !== 'Bob' // true
-5 !== 2 + 3 // false
-2 !== '2' // true; number versus string
-
<أقل من - 
-6 < 10 // true
-20 < 10 // false
-
>أكبر من - 
-6 > 10 // false
-20 > 10  // true
-
- -

الحاﻻت الشرطية

- -

بالعودة إلى دالة checkGuess() ، أعتقد أنه من المكن قول أننا ﻻ نريدها ﻹظهار رسالة placeholder . نحن نريدها لفحص هل تخمين اللاعب صحيح أم غير صحيح،  واﻹستجابة بشكل مناسب.

- -

في هذه النقطة، استبدل دالة checkGuess() بهذا بدلًا من ذلك :

- -
function checkGuess() {
-  let userGuess = Number(guessField.value);
-  if (guessCount === 1) {
-    guesses.textContent = 'Previous guesses: ';
-  }
-  guesses.textContent += userGuess + ' ';
-
-  if (userGuess === randomNumber) {
-    lastResult.textContent = 'Congratulations! You got it right!';
-    lastResult.style.backgroundColor = 'green';
-    lowOrHi.textContent = '';
-    setGameOver();
-  } else if (guessCount === 10) {
-    lastResult.textContent = '!!!GAME OVER!!!';
-    setGameOver();
-  } else {
-    lastResult.textContent = 'Wrong!';
-    lastResult.style.backgroundColor = 'red';
-    if(userGuess < randomNumber) {
-      lowOrHi.textContent = 'Last guess was too low!';
-    } else if(userGuess > randomNumber) {
-      lowOrHi.textContent = 'Last guess was too high!';
-    }
-  }
-
-  guessCount++;
-  guessField.value = '';
-  guessField.focus();
-}
- -

هذا كثير من التعليمات البرمجية __ حسنًا ! دعنا ننتقل إلى كل قسم وشرح ما يفعله.

- - - -

إذا كان اﻷمر كذلك، فإننا نجعل نص فقرة التخمينات مساويًا لــ "Previous guesses: ". وإذا كان غير ذلك ، فلن نفعل.

- - - -

اﻷحداث

- -

At this point we have a nicely implemented checkGuess() function, but it won't do anything because we haven't called it yet. Ideally we want to call it when the "Submit guess" button is pressed, and to do this we need to use an event. Events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc. — in response to which we can run blocks of code. The constructs that listen out for the event happening are called event listeners, and the blocks of code that run in response to the event firing are called event handlers.

- -

Add the following line below your checkGuess() function:

- -
guessSubmit.addEventListener('click', checkGuess);
- -

Here we are adding an event listener to the guessSubmit button. This is a method that takes two input values (called arguments) — the type of event we are listening out for (in this case click) as a string, and the code we want to run when the event occurs (in this case the checkGuess() function). Note that we don't need to specify the parentheses when writing it inside {{domxref("EventTarget.addEventListener", "addEventListener()")}}).

- -

Try saving and refreshing your code now, and your example should work — to a point. The only problem now is that if you guess the correct answer or run out of guesses, the game will break because we've not yet defined the setGameOver() function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.

- -

Finishing the game functionality

- -

Let's add that setGameOver() function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:

- -
function setGameOver() {
-  guessField.disabled = true;
-  guessSubmit.disabled = true;
-  resetButton = document.createElement('button');
-  resetButton.textContent = 'Start new game';
-  document.body.appendChild(resetButton);
-  resetButton.addEventListener('click', resetGame);
-}
- - - -

Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:

- -
function resetGame() {
-  guessCount = 1;
-
-  var resetParas = document.querySelectorAll('.resultParas p');
-  for (var i = 0 ; i < resetParas.length ; i++) {
-    resetParas[i].textContent = '';
-  }
-
-  resetButton.parentNode.removeChild(resetButton);
-
-  guessField.disabled = false;
-  guessSubmit.disabled = false;
-  guessField.value = '';
-  guessField.focus();
-
-  lastResult.style.backgroundColor = 'white';
-
-  randomNumber = Math.floor(Math.random() * 100) + 1;
-}
- -

This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:

- - - -

At this point you should have a fully working (simple) game — congratulations!

- -

All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.

- -

Loops

- -

One part of the above code that we need to take a more detailed look at is the for loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.

- -

To start with, go to your browser developer tools JavaScript console again, and enter the following:

- -
for (var i = 1 ; i < 21 ; i++) { console.log(i) }
- -

What happened? The numbers 1 to 20 were printed out in your console. This is because of the loop. A for loop takes three input values (arguments):

- -
    -
  1. A starting value: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter i with any name you like too, but i is used as a convention because it's short and easy to remember.
    2. -
  2. An exit condition: Here we have specified i < 21 — the loop will keep going until i is no longer less than 21. When i reaches 21, the loop will no longer run.
    3. -
  3. An incrementor: We have specified i++, which means "add 1 to i". The loop will run once for every value of i, until i reaches a value of 21 (as discussed above). In this case, we are simply printing the value of i out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.
    4. -
- -

Now let's look at the loop in our number guessing game — the following can be found inside the resetGame() function:

- -
var resetParas = document.querySelectorAll('.resultParas p');
-for (var i = 0 ; i < resetParas.length ; i++) {
-  resetParas[i].textContent = '';
-}
- -

This code creates a variable containing a list of all the paragraphs inside <div class="resultParas"> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.

- -

A small discussion on objects

- -

Let's add one more final improvement before we get to this discussion. Add the following line just below the var resetButton; line near the top of your JavaScript, then save your file:

- -
guessField.focus();
- -

This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.

- -

Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.

- -

In this particular case, we first created a guessField variable that stores a reference to the text input form field in our HTML — the following line can be found amongst our variable declarations near the top:

- -
var guessField = document.querySelector('.guessField');
- -

To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. querySelector() takes one piece of information — a CSS selector that selects the element you want a reference to.

- -

Because guessField now contains a reference to an {{htmlelement("input")}} element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is focus(), so we can now use this line to focus the text input:

- -
guessField.focus();
- -

Variables that don't contain references to form elements won't have focus() available to them. For example, the guesses variable contains a reference to a {{htmlelement("p")}} element, and guessCount contains a number.

- -

Playing with browser objects

- -

Let's play with some browser objects a bit.

- -
    -
  1. First of all, open up your program in a browser.
    2. -
  2. Next, open your browser developer tools, and make sure the JavaScript console tab is open.
    3. -
  3. Type in guessField and the console will show you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!
    4. -
  4. Now type in the following: - 
    guessField.value = 'Hello';
    - The value property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!
    5. -
  5. Now try typing in guesses and pressing return. The console will show you that the variable contains a {{htmlelement("p")}} element.
    6. -
  6. Now try entering the following line: - 
    guesses.value
    - The browser will return undefined, because paragraphs don't have the value property.
    7. -
  7. To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this: - 
    guesses.textContent = 'Where is my paragraph?';
    -
    8. -
  8. Now for some fun stuff. Try entering the below lines, one by one: - 
    guesses.style.backgroundColor = 'yellow';
-guesses.style.fontSize = '200%';
-guesses.style.padding = '10px';
-guesses.style.boxShadow = '3px 3px 6px black';
    - Every element on a page has a style property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.
    9. -
- -

Finished for now...

- -

So that's it for building the example. You got to the end — well done! Try your final code out, or play with our finished version here. If you can't get the example to work, check it against the source code.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}

- -

في هذه الوحدة

- - diff --git a/files/ar/learn/javascript/first_steps/index.html b/files/ar/learn/javascript/first_steps/index.html deleted file mode 100644 index 66c8c8c2f8..0000000000 --- a/files/ar/learn/javascript/first_steps/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: الخطوات الأولى مع الجافاسكربت -slug: Learn/JavaScript/First_steps -tags: - - Landing - - Module - - NeedsTranslation - - TopicStub - - 'l10n:priority' - - أرقام - - برمجةسكربتات - - جافاسكربت - - دروس - - رياضيات - - عمليات حسابية - - مبتدئ - - متغيرات - - مصفوفات - - مقالة - - نصوص - - واجب -translation_of: Learn/JavaScript/First_steps ---- -
{{LearnSidebar}}
- -

في اول دروس تعلم الجافاسكربت. ينبغي ان نجاوب عن اسئلة أساسية مثل "ماهي الجافاسكربت؟", "ماهي شكلها؟" و "مالذي تستطيع لغة الجافاسكربت عمله؟",  قبل ما نبدأ الأمثلة العملية لكتابة اكواد الجافاسكربت.  بعد ذلك سنناقش الأركان الأساسية بالتفصيل. مثل المتغيرات, النصوص, الأرقام و المصفوفات.

- -

متطلبات مسبقة

- -

قبل ان تبدأ بهذه الدروس. لا تحتاج الى اي معرفة بالجافاسكربت, لكنك تحتاج خبرة بسيطة بكتابة اكواد HTML و CSS. ننصحك بهذه الدروس قبل البدء بتعلم الجافاسكربت:

- - - -
-

ملاحظة:

-اذا كنت لا تستخدم كمبيوتر, لابتوب او اي جهاز لا يسمح لك بإنشاء ملفات جديدة يمكنك تجربة (اغلب) الاكواد بإستخدام احد الخدمات السحابية لكتابة الاكواد مثل JSBin أو Thimble
- -

دروس

- -
-
ما هي الجافاسكربت؟
-
اهلا بك في دورة جافاسكربت للمبتدئين من MDN! في اول درس في هذه الدورة سنلقي نظرة على الجافاسكربت. سنجاوب بعض الاسئلة بشكل بسيط مثل "ماهي جافاسكربت؟", "ماذا تعمل الجافاسكربت؟", لنتأكد بأن تأخذ راحتك مع اللغة.
-
نظرة اولية على الجافاسكربت
-
الآن تعلمت الجافاسكربت من الناحية النظرية, وماذا يمكننا العمل بها. لنلقي نظرة على المميزات الأساسية بالجافاسكربت من الناحية العملية. في هذا الدرس سنبرمج لعبة "توقّع الرقم". خطوة بخطوة.
-
مالذي حصل؟ اصلاح اخطاء الجافاسكربت
-
عندما برمجت لعبة "توقّع الرقم" في الدرس السابق. ربما وجدت انها لا تعمل! لا تخف. في هذا الدرس سنقوم بتعلم كيف تبحث عن الاخطاء في لعبتك وكيفية اصلاحها.
-
تخزين المعلومات التي تحتاجها ــ المتغيرات
-
بعد قراءة الدروس الاخيرة ينبغي ان تعلم الآن ماهي الجافاسكربت و ماذا يمكنها ان تعمل من اجلك وكيف يمكنك استخدامها مع تقنيات الويب الأخرى وما هي مميزاتها الرئيسية بشكل مبسط. في هذا الدرس سنتعلم أحد أهم و أبسط الأشياء، المتغيرات. 
-
الرياضيات بالجافاسكربت ــ الأرقام والعمليات الحسابية
-
عند هذه المرحلة من الدورة ينبغي أن نناقش الرياضيات في الجافاسكربت, كيف يمكننا إجراء العمليات الحسابية باللغة.
-
التعامل مع النصوص ــ النصوص بالجافاسكربت
-
بعد ذلك سنلقي نظرة على النصوص. في هذا الدرس ستتعلم كيف تتعامل مع النصوص. مثل انشاء النصوص. كتابة بعض الرموز. و جمع اكثر من نص مع بعض.
-
دوال للنصوص مفيدة
-
بما اننا تعلمنا اساسيات التعامل مع النصوص. لننتقل الى المرحلة التالية ولنفكر ماذا يمكننا ان نعمل بالنصوص. مثلا لنجد طول نص, دمج النصوص, استبدال احد الاحرف بحرف اخر. وغيرها.
-
المصفوفات
-
في آخر درس في هذه الدورة البسيطة، سنلقي نظرة على المصفوفات. طريقة مثالية لجمع بيانات تحت اسم متغير واحد. سنتعلم لماذا هذا مفيد، كيف انشاءها، الحصول على احد البيانات الموجودة، اضافة المزيد من البيانات، حذف بعض البيانات والمزيد
-
- -

الواجبات

- -

في هذا الواجب ستختبر فهمك للدروس السابقة

- -
-
مصنع القصص الظريفة
-
في هذا الواجب سيطلب منك بإستخدام المعرفة التي اكتسبتها من الدروس السابقة كتابة برنامج يكتب قصة ظريفة عشوائية. استمتع!
-
diff --git a/files/ar/learn/javascript/first_steps/useful_string_methods/index.html b/files/ar/learn/javascript/first_steps/useful_string_methods/index.html deleted file mode 100644 index fac2541302..0000000000 --- a/files/ar/learn/javascript/first_steps/useful_string_methods/index.html +++ /dev/null @@ -1,684 +0,0 @@ ---- -title: بعض الخصائص المفيدة للسلاسل الحرفية -slug: Learn/JavaScript/First_steps/Useful_string_methods -tags: - - استبدال - - تعلم - - تقطيع - - جافا سكربت - - حالة - - حرف صغير - - حرف كبير - - سلسلة حرفية - - مبتديء - - مقال -translation_of: Learn/JavaScript/First_steps/Useful_string_methods ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
- -

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

- - - - - - - - - - - - -
المتطلبات اﻷساسية:أساسيات استخدام الحاسوب ، فهم أساسيات HTML و CSS ، وفهم ماهية الجافاسكربت.
الهدف:فهم أن سلاسل الحروف strings هو عبارة عن كائنات ، وتعلم كيفية استخدام الطرق المتاحة لهذه الكائنات لمعالجة سلاسل الحروف strings .
- -

السلاسل ككائنات

- -

معظم اﻷشياء في الجافا سكريبت هي كائنات. فعند إنشاء سلسلة، على سبيل المثال بإستخدام :

- -
let string = 'This is my string';
- -

يصبح المتغير الخاص بك مثل كائن سلسلة، وبناءًا على ذلك يصبح لديه العديد من الخصائص والأساليب المتاحة له والتي يمكن تنفيذها عليه. يمكنك رؤية ذلك إذا انتقلت إلى صفحة الكائن {{jsxref("String")}} وألقيت نظرة على القائمة الموجودة في هذه الصفحة بالأسفل.

- -

اﻵن وقبل أن يبدأ عقلك في التوهان أو التشتيت، لا تقلق! أنت لست بحاجة لمعرفة هذه اﻷشياء في وقت مبكر من رحلة تعلمك للجافا سكريبت. وهناك عدد قليل من الاحتمالات لإستخدامك هذا كثيرًا والذي سننظر إليه هنا في هذا المقال.

- -

دعنا نجرب بعض اﻷمثلة داخل الكونسول الخاص بالمتصفح.

- -

إيجاد طول السلسلة

- -

هذا سهل للغاية — أنت ببساطة تستخدم هذه الخاصية لإيجاد طول السلسلة {{jsxref("String.prototype.length", "length")}} حاول إتباع الأسطر التالية :

- -
// هنا نقوم بإنشاء متغير يحتوي على سلسلة نصية
-let browserType = 'العربية';
-
-// هنا نقوم بكتابة اسم المتغير متبوعًا بالخاصية لمعرفة طول القيمة الموجودة داخل المتغير
-browserType.length;
- -

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

- -

استرجاع (استدعاء) حرف سلسلة معين

- -

في ملاحظة ذات صلة،  يمكن إرجاع أي حرف داخل السلسلة باستخدام الاقواس المربعة — هذا يعني إدراج أو تضمين اﻷقواس المربعة ([]) في نهاية اسم المتغيرالخاص بك. وفي داخل اﻷقواس ستقوم بكتابة رقم الحرف الذي تريد إرجاعه،  لذا على سبيل المثال إذا كنت تريد إرجاع الحرف اﻷول فستقوم بإتباع الكود التالي:

- -
browserType[0];
- -

تذكر: الكمبيوتر يبدأ العد من 0 وليس1! ويمكنك استخدام هذا على سبيل المثال للعثور على الحرف اﻷول من السلسلة وترتيبها أبجديًا.

- -

لكي نستدعي الحرف اﻷخير ﻷي سلسلة حروف ، سوف نستخدم السطر التالي , باﻹضافة إلى استخدام خاصية length  التي ذكرناها في اﻷعلى:

- -
browserType[browserType.length-1];
- -

إن طول  "mozilla" هو 7 حروف , ولكن ﻷن العد يبدأ من 0 , فإن موقع الحرف هو 6; باستخدام  length-1 يعطينا الحرف اﻷخير.

- -

إيجاد سلسلة حروف فرعية داخل السلسلة الرئيسية واستخراجها

- -

أحيانًا تريد أن تسدعي بعض الحروف الموجودة داخل السلسلة الكبيرة (نقول بشكل عام إذا كانت سلسلة فرعية موجودة داخل السلسلة اﻷم ). نستطيع فعل هذا بواسطة استخدام طريقة {{jsxref("String.prototype.indexOf()", "indexOf()")}} , والتي تحتوي عامل  {{glossary("parameter")}} — السلسلة الفرعية التي نريد أن نستدعيها.

- -
    -
  1. جرب هذا: - 
    browserType.indexOf('zilla');
    - والنتيجة هي 2 , ﻷن سلسلة الحروف الفرعية  "zilla" تبدأ من الموقع 2 (0, 1, 2  — أي 3 حروف) بداخل "mozilla". مثل هذا الكود من الممكن أن يستخدم لفلترة السلاسل الحرفية. على سبيل المثال , لدينا قائمة بالعديد من عنواين الويب ونريد أن نستدعي فقط العنوان الذي يحتوي كلمة "mozilla" .
    2. -
- -
    -
  1. هناك طريقة أخري لذلك , التي من الممكن أن تكون فعالة . جرب المثال التالي: - 
    browserType.indexOf('vanilla');
    - يجب أن تكون النتيجة هي -1 — هذا ﻷن سلسلة الحروف التي نبحث عنها في هذه الحالة ,  'vanilla', غير موجودة في السلسلة الرئيسية.
    -
    - يمكن استخدام هذا ﻹيجاد كل حالات السلسلة  حيث ﻻ تحتوي السلسلة الفرعية  'mozilla',( أو فعل ذلك باستخدام عامل النفي ، !==) : - - 
    if(browserType.indexOf('mozilla') === -1) {
-  // do stuff with the string if the 'mozilla'
-  // substring is NOT contained within it
-}
-
-if(browserType.indexOf('mozilla') !== -1) {
-  // do stuff with the string if the 'mozilla'
-  // substring IS contained within it
-}
    -
    2. -
  2. إذا علمت أين تبدأ السلسلة الفرعية داخل السلسلة الرئيسية , وتعلم الحرف اﻷخير الذي تريده ,فإن {{jsxref("String.prototype.slice()", "slice()")}} تستخدم لاستدعاءه . جرب المثال التالي: - 
    browserType.slice(0,3);
    - النتيجة هي "moz" — البرامتر اﻷولparameter يشير إلى موقع الحرف الذي نريد أن نبدأ البحث من عنده , البرامتر الثاني parameterيشير إلى موقع الحرف الذي يوجد بعد آخر حرف تم استدعاءه. لذلك التقطيع slice  يحدث بداية من الحرف اﻷول حتى الحرف اﻷخير لكنه ﻻ يشمل الحرف اﻷخير . في هذا المثال , من البداية 0 ، فإن البرامتر الثاني  يساوي طول السلسلة التي نريد استدعائها.
    3. -
  3. أيضًا ، إذا أردت استدعاء كل الحروف المتبقية بعد حرف معين , فإننا ﻻ نحتاج البرامتر الثاني! بدلًا من ذلك نحتاج فقط موقع الحرف الذي نريد أن نستدعي الحروف المتبقية بعده. جرب المثال التالي: - 
    browserType.slice(2);
    - والنتيجة هي "zilla" — وهذا ﻷن الحرف الذي رقمه 2 هو الحرف z ، وﻷننا لم نكتب البرامتر الثاني ، فإن النتيجة هي طباعة كل الحروف بعد هذا الحرف . 
    4. -
- -
-

ملاحظة : البرامتر الثاني  parameter للــ slice() هو اختياري : إذا لم نكتبه ، فإن النتيجة تكون حتى نهاية السلسلة الرئيسية.   أيضًا هناك خيار آخر ، راجع صفحة ;  {{jsxref("String.prototype.slice()", "slice()")}}  للاطلاع على المزيد حول slice.

-
- -

تغيير حالة الحروف

- -

خاصية {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} و {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} تستخدم لتحويل الحروف لحروف صغيرة أو حروف كبيرة, على التوالي. وهذا مفيد حيث على سبيل المثال إذا أردنا تهيئة البيانات التي أدخلها المستخدم قبل حفظها في قاعدة البيانات . 

- -

دعونا نجرب المثال التالي ونرى ما سيحدث:

- -
let radData = 'My NaMe Is HeSHam';
-radData.toLowerCase();
-radData.toUpperCase();
- -

تحديث أجزاء من السلسلة

- -

نستطيع استبدال سلسلة حروف بأخرى داخل السلسلة الرئيسية باستخدام خاصية  .{{jsxref("String.prototype.replace()", "replace()")}}  إنها خاصية بسيطة جدًا ، ولكنها تملك خيارات متقدمة سوف نستخدمها ولكن ليس اﻵن .

- -

هذه الخاصية لها 2 بارامتر ( الحروف الذي تريد استبدالها, والحروف الجديدة). جرب هذا المثال:

- -
browserType.replace('moz','van');
- -

والنتيجة هي طباعة كلمة "vanilla"  في الكونسول. ولكن إذا تفحصنا قيمة . browserType,فإنها ما تزال "mozilla" . لتحديث قيمة المتغير  browserType حقيقة, سوف نحتاج إلى تحديد قيمة المتغير للقيمة التي نتجت لدينا ؛ حيث أن قيمة المتغير ﻻ تتحدث تلقائيًا . لذلك نحن بحاجة لكتابة هذا الكود: 

- -
browserType = browserType.replace('moz','van');
- -

أمثلة عملية للتعلم

- -

في هذا القسم سوف نتعلم كتابة كود لمعالجة السلاسل الحرفية. في كل مثال باﻷسفل , لدينا مصفوفة من العبارات ، و حلقات تكرارية لتنفيذ القيم في المصفوفة وعرضها في قائمة نقطية. ﻻ تحتاج إلى معرفة المصفوفات والحلقات التكرارية اﻵن ( سوف تُشرح في مقالات مستقبلية). كل ما تحتاجه في كل مثال هو كتابة الكود الذي سوف يعرض العبارات في الهيئة التي نريدها.

- -

كل مثال يحتوي على زر "reset" حيث يمكن إرجاع الكود إلى حالته اﻷصلية في حالة الخطأ أو أن الحل لم يعمل جيدًا ، وهناك زر "Show solution" يمكن الضغط عليه لترى اﻹجابة المحتملة إذا واجهتك مشكلة بالفعل.

- -

معالجة رسائل التهنئة

- -

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

- -
    -
  1. نفكر أوﻻً حول كيفية معرفة رسائل التهنئة في كل عبارة. هل هذه العبارة موجودة في الرسائل ، وما هي الطريقة التي نستخدمها لمعرفة ذلك ؟
    2. -
  2. سوف نحتاج إلى كتابة حالة شرطية .
    3. -
  3. تلميح: في هذا المثال من الفيد اختبار الطريقة لمعرفة النتيجة الصحيحة.
    4. -
- - - -

{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}

- -

إصلاح الحروف الكبيرة

- -

في هذا التمرين لدينا أسماء المدن في المملكة المتحدة، ولكن الحروف الكبيرة مكتوبة بشكل عبثي . نريد منك تغييرها للحروف الصغيرة، ماعدا الحرف اﻷول يكون كبير . وأفضل طريق لعمل ذلك هو :

- -
    -
  1. حول كل كلمة في متغير  input  للحروف الصغيرة وخزنها في متغير جديد.
    2. -
  2. اقتنص الحرف اﻷول من كل كلمة في هذا المتغير الجديد وخزنه في متغير آخر.
    3. -
  3. استخدم المتغير اﻷخير لاستبدال الحرف اﻷول من الكلمة بحرف كبير. وخزن نتيجة عملية الاستبدال لمتغير جديد آخر.
    4. -
  4. غيِّر قيمة متغير result لتساوي النتيجة النهائية.
    5. -
- -
-

ملحوظة: البرامتر الخاص بالطريقة المستخدمة ليس فقط الحروف ، بل يمكن أن يكون متغير أيضًا .

-
- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}

- -

عمل عبارة جديدة من العبارة اﻷصلية

- -

في هذا التمرين اﻷخير ، المصفوفة تحتوي على مجموعة من العبارات التي تحتوي معلومات عن محطات القطار في شمال انجلترا. هذه الكلمات تحتوي على ثلاثة حروف لكود المحطة ، متبوعًا بكود القطار، متبوعًا بالفاصلة المنقوطة، متبوعًا اسم المحطة. على سبيل المثال:

- -
MAN675847583748sjt567654;Manchester Piccadilly
- -

نريد استخراج كود المحطة والاسم ، ووضعهم جميعًا في عبارة واحدة بالهيئة التالية:

- -
MAN: Manchester Piccadilly
- -

نقترح أن تتبع هذه الخطوات:

- -
    -
  1. استخرج الثلاثة أحرف لكود المحطة وخزنه في متغير جديد.
    2. -
  2. أوجد رقم موقع حرف الفاصلة المنقوطة ; .
    3. -
  3. استخرج اسم المحطة باستخدام رقم موقع الفاصلة المنقوطة كنقطة مرجعية ، وخزنه في متغير جديد .
    4. -
  4. اربط المتغيرين الجديدين مع العبارة لعمل عبارة جديدة .
    5. -
  5. غيِّر قيمة المتغير result لتساوي العبارة النهائية، وليست العبارة الأصلية input.
    6. -
- - - -

{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}

- -

اختبر مهاراتك!

- -

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

- -

الخاتمة

- -

ﻻ نستطيع الهروب من الحقيقة بأنه القدرة على معالجة الكلمات والجُمَل في البرمجة هو في غاية اﻷهمية __ بخاصة في الجافا سكربت، مثل مواقع التواصل مع الناس. هذا المقال يعطيك اﻷساسيات التي تحتاج معرفتها حول معالجة سلاسل الحروف (العبارات). هذا يجب أن يفيدك جيدًا عند قراءة مواضيع معقدة في المستقبل. اﻵن لنذهب للنظر في النوع الرئيسي من البيانات التي نحتاج للتركيز عليها __ المصفوفات arrays  .

- -

تمت بحمد الله.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

- -

في هذه الوحدة

- - diff --git a/files/ar/learn/javascript/index.html b/files/ar/learn/javascript/index.html deleted file mode 100644 index 6677754e3d..0000000000 --- a/files/ar/learn/javascript/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: جافاسكريبت Javascript -slug: Learn/JavaScript -tags: - - Beginner - - CodingScripting - - JavaScript - - Landing - - NeedsTranslation - - Topic - - TopicStub - - جافاسكريبت - - ساعد في الترجمة - - مبتدئ -translation_of: Learn/JavaScript ---- -

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

- -

مسار التعلم

- -

لغة جافاسكربت تعتبر اكثر تعقيدا نظريا من التكنولوجيات التابعة لها من امثال HTML و CSS . قبل انطلاقك في تعلم جافاسكريبت  , ينصحك اولا بان تصبح متعودا على هاتين التقنيتين اولا , وربما تقنيات اخرى ايضا. ابدا عن طريق المقالات و الدورات التالية :

- - - -

المعرفة و الخبرة بلغات البرمجة السابقة يمكنه كذلك ان يساعدك

- -

بعد أن تصبح اكثر تعودا على مبادئ جافاسكريت . يمكنك ام تنطلق في مواضيع اكثر تعقيدا , مثال ذلك مايلي :

- - - -

الوحدات

- -

هذا الموضوع يحتوي على الوحدات التالية حسب الترتيب المقرح الانطلاق منه :

- -
-
الخطوات الأولى في جافاسكريب
-
في الوحدة الاولى , سنجيب عن بعض الاسئلة الجوهرية مثل ’ماهي جافاسكريبت؟’ , ’كيف تبدو اللغة؟’ و ’ماذا يمكنها ان تفعل’ , قبل الانطلاق الى تجربتك العملية الاولى في كتابة اللغة. بعد ذلك ننقاش مميزات اللغة بالتفصيل كالمتغيرات , السلاسل , الارقام و صفائف وتتظيمات البيانات
-
قواعد بناء و أساسيات لغة جافاسكريبت
-
في هذه الوحدة سنتابع تغطيتنا لكل مبادئ ومفاتيح لغة جافاسكريبت مع ادارة الانتباه الى اكثر طرق البرمجة شيوعا كالجمل الشرطية , الحلقات , الوظائف و الاحداث . لقد رأيت واستعملت هذه الاشياء من قبل في هذا الدرس لكن مررنا بها سريعا , هنا سندرسها بالتفصيل .
-
تقديم الكائنات في جافاسكريبت
-
في لغة الجافاسكريبت معظم معظم العمل سيكون مع الاجسام , انطلاقات من اساسيات اللغة كالحلقات والسلاسل وصولا الى واجهات تطبيقات المتصفح المبنية بواسطة جافاسكريبت. يمكنك كتابة اجسامك لتشمل وتغلف الوظائف والمتغيرات في حزم فعالة. طبيعة جافاسكريبت الجسمية التوجيه مهمة جدا اذا اردت الذهاب بعيدا في تعلم اللغة و كتابة برامج اكثر فعالية , لهذا نوفر لك هذه الوحدة لتساعدك. هنا نعلمك الاجسام وطريقة البناء بالتفصيل , تعلم كيفية كتابة اجسامك  الخاصة , شرح ماهية بيانات JSON وكيفية عملها مع بعض.
-
تطبيقات واجهات الويب من جهة المستخدم
-
عند كتابة جافاسكربت لمواقع الويب او التطبيقات , لن تذهب بعيدا من دون الاحاطة بواجهات التطبيقات API , هذه الواجهات يجب ان تعمل على مختاف المتصفحات و انظمة التشغيل التي بمكن ان تستخدم الموقع , وحتى اذا كنت تجمع بياناتك من جهة اخرى.في هذه الوحدة سنتعرف على ماهية واجهات التطبيقات , وكيفية استعمال اشهرها التي ستمر على اسخدامها عند عملك في التطوير.
-
- -

أنظر ايضا

- -
-
الرياضيات المستعملة في البرمجة
-
سلسلة من الفيديوهات الممتازة لتعليمك الرياضيات التي تحتاجها لكي تصبح مبرمجا فعالا بواسطة   Keith Peters.
-
diff --git a/files/ar/learn/javascript/objects/basics/index.html b/files/ar/learn/javascript/objects/basics/index.html deleted file mode 100644 index 7b6ca3fd15..0000000000 --- a/files/ar/learn/javascript/objects/basics/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: اساسيات الكائن في جافاسكريبت -slug: Learn/JavaScript/Objects/Basics -translation_of: Learn/JavaScript/Objects/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
- -

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

- - - - - - - - - - - - -
المتطلبات الأساسية:دراية لا بأس بها بخصوص الحاسوب، الإلمام بمبادئ وأساسيات HTML و CSS، وبطبيعة الحال التمكن من أساسيات الجافاسكريبت (شاهد First steps وأيضا Building blocks).
الهدف :التمكن من فهم لغة البرمجة كائنية التوجه وكيف أن  (" معظم الأشياء كائنات ") في الجافا سكريبت
- وأيضا الشروع في العمل مع كائنات الجافا سكريبت.
- -

أساسيات الكائن

- -
-

أولا وقبل كل شيء، قم بتحميل نسخة من الملف التالي oojs.html. هذا الملف يتضمن العنصر —  {{HTMLElement("script")}} سنستخدمه في كتابة الكود الخاص بنا، وعنصر الإدخال {{HTMLElement("input")}} سنستخدمه لإدخال بعض التعليمات البرمجية،  وبعض المتغيرات والوظائف لاستخراج النتائج من حقل المدخلات ووضعها في العنصر {{HTMLElement("p")}}. سنستخدم هذه  العناصر كأساس، لدراسة أساسيات بناء الكائن.

- -

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

- -
var person = {};
- -

قم بإدخال person  إلى حقل المدخلات الخاص بك واضغط على الزر button، لتحصل على النتيجة التالية:

- -
[object Object]
- -

تهانينا، لقد أنشأت للتو  أول كائن خاص بك. أنجزت المهمة! لكن هذا كائن فارغ، دعونا نقوم بتحديث هذ الكائن ليصبح على هذا الشكل:

- -
var person = {
-  name : ['Bob', 'Smith'],
-  age : 32,
-  gender : 'male',
-  interests : ['music', 'skiing'],
-  bio : function() {
-    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  },
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name[0] + '.');
-  }
-};
-
- -

بعد الحفظ والتحديث، قم بإدخال التعليمات البرمجية التالية واحدة تلو الاخرى في حقل المدخلات الخاص بك:

- -
person.name[0]
-person.age
-person.interests[1]
-person.bio()
-person.greeting()
-
- -

لقد حصلت الآن على بعض البيانات والوظائف من داخل الكائن الخاص بك، جميل! أصبحت الآن قادرا على الوصول إلى البعض من التركيبة الاساسية للكائن.

- -
-

ملاحظة : إذا واجهتك صعوبة في الحصول على هذا العمل، حاول مقارنة التعليمات البرمجية الخاصة بك مع النسخة لدينا، انظر oojs-finished.html (يمكنك ايضا see it running live). من الأخطاء الشائعة أثناء العمل مع الكائنات هو وضع فاصلة في نهاية آخر العضو — وهذا سوف يسبب خطأ.

-
- -

هذا ما يحدث هنا؟ لدينا كائن يتكون من عدة أعضاء، لكل واحد منهم اسماً (مثل name و age أعلاه)، وقيمة ( مثل ['Bob', 'Smith'] و 32). كل زوج (name: value) يجب أن يفصلا بفاصلة، والاسم والقيمة في كل حالة مفصولة بفاصلة منقوطة. فيما تكون دائماً، تركيبة الكائن الأساسية على هذا النحو :

- -
var objectName = {
-  member1Name : member1Value,
-  member2Name : member2Value,
-  member3Name : member3Value
-}
- -

قيمة العضو  في الكائن يمكن أن تكون أي شيء، في الكائن person لدينا سلسلة نصية، وقيمة رقمية، ومصفوفتان، ووظيفتان. العناصر الأربعة الأولى تسمى عناصر البيانات، ويشار إليها بخصائص الكائن (object properties). والعنصرين الأخيرين هما من الوظائف التي تسمح للكائن أن يفعل شيئا مع تلك البيانات، ويشار إليها بوظائف الكائن (object methods).

- -

يسمى هذا النوع من الكائنات بـ object literal — لقد كتبنا حرفيا محتويات الكائن إلى أن وصلنا إلى إنشائه. هذا على النقيض من الكائنات المبنية على الأصناف (classes)، والتي سوف نتطرق إليها في وقت لاحق.

- -

من الشائع جدا إنشاء كائن باستخدام  object literal لنقل سلسلة من البيانات الهيكلية، البيانات المتصلة بطريقة ما، على سبيل المثال إرسال طلب إلى الخادم (server) لوضعها في قاعدة البيانات. إرسال كائن واحد سيكون أكثر كفاءة بكثير من إرسال عدة عناصر على حدة، وأسهل مقارنة بالعمل مع المصفوفة (Array)، حينما تريد تحديد عناصر فردية حسب الاسم.

- -

رمز النقطة

- -

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

- -
person.age
-person.interests[1]
-person.bio()
- -

Sub-namespaces

- -

من الممكن تغيير شكل التعليمة البرمجية، من مصفوفة الى Sub-namespaces. على سبيل المثال، حاول تغيير اسم العضو من :

- -
name : ['Bob', 'Smith'],
- -

الى

- -
name : {
-  first : 'Bob',
-  last : 'Smith'
-},
- -

على نحو فعال قمنا بانشاء Sub-namespaces. هذا يبدو معقدا، في الحقيقة هو ليس كذالك - للوصول إلى هذه العناصر كل ما تحتاج اليه هو  ربط سلسلة العناصر بنقطة الترميز. جرب هذا :

- -
person.name.first
-person.name.last
- -

هام : في هذه الحالة ستحتاج أيضا للذهاب الى الكود الخاص بك واستبدال الحالات التالية من :

- -
name[0]
-name[1]
- -

الى

- -
name.first
-name.last
- -

وإلا، فسوف لن تعمل الوظائف الخاصة بك.

- -

رمز الاقواس

- -

هناك طريقة أخرى للوصول إلى خصائص الكائن – باستخدام رمز الاقواس. بدلاً من استخدام هذه :

- -
person.age
-person.name.first
- -

يمكنك استخدام هذه

- -
person['age']
-person['name']['first']
- -

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

- -

إعداد اعضاء الكائن

- -

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

- -
person.age = 45
-person['name']['last'] = 'Cratchit'
- -

في حقل المدخلات الخاص بك جرب ادخال التعليمات البرمجية التالية واحدة تلوى الاخرى للحصول على الاعضاء مرة أخرى بعد التحديث :

- -
person.age
-person['name']['last']
- -

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

- -
person['eyes'] = 'hazel'
-person.farewell = function() { alert("Bye everybody!") }
- -

يمكنك الآن اختبار ألاعضاء الجدد خاصتك :

- -
person['eyes']
-person.farewell()
- -

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

- -
var myDataName = nameInput.value
-var myDataValue = nameValue.value
-
- -

يمكننا بعد ذلك إضافة اسم العضو الجديد وقيمته إلى الكائن person  كالتالي :

- -
person[myDataName] = myDataValue
- -

لاختبار هذا، قم بإضافة الأسطر التالية أسفل التعليمات البرمجية خاصتك،  بعد قوس الاغلاق للكائن person :

- -
var myDataName = 'height'
-var myDataValue = '1.75m'
-person[myDataName] = myDataValue
- -

الآن قم بحفظ وتحديث، وادخل ما يلي في حقل المدخلات الخاص بك :

- -
person.height
- -

وهذا لم يكن ممكناً مع طريقة نقطة الترميز، لانها تقبل اسم العضو كقيمة حرفية فقط، والتالي لا يمكن لهذه القيمة الحرفية ان تشير إلى اسم المتغير.

- -

ما هي this؟       

- -

لربما لاحظت شيئا غريبا بعض الشيء في الوظائف الخاصة بنا؟. القي نظرة على هذه  على سبيل المثال:

- -
greeting: function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
-}
- -


- ربما تسألت ما هي this. هي كلمة من الكلمات المحجوزة للغة جافاسكريبت.
-  تشير إلى الكائن الحالي الذي تم كتابة التعليمات البرمجية داخله — في هذه الحالة هي تعادل person. فلماذا لا نستخدم person بدلا من ذلك؟
- كما سترى في  جافاسكريبت - البرمجة غرضية التوجه للمبتدئين عندما نبدأ بانشاء constructors، ... الخ، this مفيدة جداً — لانها ستضمن دائما أن تستخدم القيم الصحيحة عندما يتغير سياق العضو.
- ( على سبيل المثال عند وجود حالتين مختلفتين للكائن person بأسماء مختلفة، سوف ترغب في التعامل مع ال name الموجودة في كل منهما عن طريق الوظيفة ()greeting ).

- -

ولتوضيح ما نعنيه مع زوج من الكائنات person1  و person2 :

- -
var person1 = {
-  name : 'Chris',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-var person2 = {
-  name : 'Brian',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

في هذه الحالة، الوظيفة ()greeting  الخاصة بالكائن person1، ستظهر ".Hi! I'm Chris".
-  فيما الوظيفة ()greeting الخاصة بالكائن person2، ستقوم باظهار ".Hi! I'm Brian".
- على الرغم من ان التعليمات البرمجية للوظيفة greeting هي نفسها في كلا الحالتين. وكما قلنا في وقت سابق، this تساوي الكائن داخل التعليمات البرمجية — هي ليست مفيدة بشكل كبير خصوصا عند الكتابة خارج ال object literals، لكنها مفيدة جدا عندما تريد توليد كائن حيوي (على سبيل المثال باستخدام ال constructors).  سوف تتضح لك الامور في وقت لاحق.

- -

استخدمنا الكائنات طوال المرحلة

- -

من خلال الأمثلة السابقة، لربما فكرت بأن نقطة الترميز التي استخدمناها مؤلوفة جدا. هذا لأننا استخدمناها تقريبا في جميع المراحل السابقة، في كل مرة كنا نعمل من خلال مثال يستخدم اما built-in browser API او JavaScript object، استخدمنا الكائنات، نظراً لأن هذه الميزات تم بناؤها باستخدام نفس النوع من ال object structures مثل ما راينا هنا،
- وإن كانت أكثر تعقيدا من الأمثلة الخاصة بنا.

- -

عند استخدامك لوظائف السلاسل النصية string methods، كهذه :

- -
myString.split(',');
- -

فقد استخدمت وظيفة متاحة في مثيل الفئة  String. في كل مرة تقوم فيها بإنشاء سلسلة نصية في التعليمات البرمجية الخاصة بك، بشكل اوتوماتيكي يتم انشاء هذه السلسلة النصية ك instance  (مثيل) من String، وبالتالي سيصبح متاح لها العديد من ال methods/properties الخاصة بال String.

- -


- عندما تصل  الى document object model باستخدام سطور كهذه :

- -
var myDiv = document.createElement('div');
-var myVideo = document.querySelector('video');
- -

فقد استخدمت وظيفة متاحة في مثيل الفئة Document.  في كل مرة تحمل فيها صفحة الويب، يتم إنشاء instance (مثيل) من الوثيقة، تسمى document، والتي تمثل بنية الصفحة كاملة، والمحتوى، وغيرها من الميزات مثل عنوان URL الخاص بها. وهذا يعني أن لديها العديد من ال methods/properties المتاحة لها.

- -

وينطبق الأمر نفسه على اي من (كائنات برمجة واجهة التطبيقات المدمجة built-in object/API)  الاخرى قد تمت باستخدام  —  Array, Math, etc.

- -

لاحظ ان الكائنات المدمجة Objects/APIs لا تقوم دائما بانشاء object instances (مثيلات الكائن) اوتوماتيكيا. وكمثال على ذلك، Notifications API — التي تسمح للمتصفحات الحديثة باطلاق system notifications - يتطلب منك إنشاء مثيل object instance جديد باستخدام ال constructor لكل اشعار تريد اطلاقه.

- -

قم بادخال التعليمة التالية في console الجافاسكريبت الخاص بك :

- -
var myNotification = new Notification('Hello!');
- -

سوف نبحث في ال constructor في مقال لاحق.

- -
-

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

-
- -

ملخص

- -

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

- -

في المقال القادم سنبدأ بالنظر في البرمجة كائنية التوجه (OOP) ، وكيف يمكن استخدام هذه التقنية في جافا سكريبت.

- -

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

-
diff --git a/files/ar/learn/javascript/objects/index.html b/files/ar/learn/javascript/objects/index.html deleted file mode 100644 index 9eb705138c..0000000000 --- a/files/ar/learn/javascript/objects/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: تقديم JavaScript objects -slug: Learn/JavaScript/Objects -tags: - - Article - - Assessment - - Beginner - - CodingScripting - - Guide - - JavaScript - - Learn - - NeedsTranslation - - Objects - - TopicStub - - Tutorial -translation_of: Learn/JavaScript/Objects ---- -
{{LearnSidebar}}
- -

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

- -

المتطلبات الأساسية
- قبل البدء في هذه الوحدة ، يجب أن يكون لديك بعض الإلمام بـ HTML و CSS. يُنصح بالعمل من خلال مقدمة HTML ومقدمة إلى وحدات CSS قبل البدء في JavaScript.

- -

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

- -

 

- -
ملاحظة: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر لا تملك فيه القدرة على إنشاء ملفاتك الخاصة ، يمكنك تجربة (معظم) أمثلة التعليمات البرمجية في برنامج ترميز عبر الإنترنت مثل JSBin أو Thimble
- -

 

- -
 
- -
-

خطوط إرشاد
- أساسيات الكائن
- في المقالة الأولى التي تبحث في كائنات JavaScript ، سننظر في بنية كائن جافا سكريبت الأساسية ، ونعاود زيارة بعض ميزات جافا سكريبت التي رأيناها سابقًا في الدورة التدريبية ، مع التأكيد على حقيقة أن العديد من الميزات التي تعاملت معها بالفعل هي في الواقع الأشياء.
- جافا سكريبت وجوه المنحى للمبتدئين
- مع وضع الأساسيات ، سنركز الآن على JavaScript (Object-oriented JavaScript) (OOJS) - تقدم هذه المقالة عرضًا أساسيًا لنظرية البرمجة الشيئية (OOP) ، ثم تستكشف كيفية محاكاة جافا سكريبت لفئات الكائن عن طريق وظائف منشئ ، كيفية إنشاء مثيلات الكائن.
- نماذج الكائن
- النماذج الأولية هي الآلية التي ترث بها كائنات JavaScript عناصر من بعضها البعض ، وتعمل بشكل مختلف مع آليات الوراثة في لغات البرمجة الكلاسيكية الموجهة للكائنات. في هذه المقالة ، نستكشف هذا الاختلاف ، ونشرح كيفية عمل سلاسل النموذج الأولي ، وننظر في كيفية استخدام خاصية النموذج الأولي لإضافة أساليب إلى المنشئات الموجودة.
- وراثة في جافا سكريبت
- مع شرح معظم تفاصيل دموية OOJS الآن ، يوضح هذا المقال كيفية إنشاء فئات الكائن "التابعة" (المنشئات) التي ترث ميزات من الفئات "الأصل" الخاصة بهم. بالإضافة إلى ذلك ، نقدم بعض النصائح حول متى وأين قد تستخدم OOJS.
- التعامل مع بيانات JSON
- يعد ترميز كائن جافا سكريبت (JSON) تنسيقًا قياسيًا لتمثيل البيانات المنظمة مثل كائنات جافا سكريبت ، والتي تستخدم عادة لتمثيل ونقل البيانات على مواقع الويب (أي إرسال بعض البيانات من الخادم إلى العميل ، بحيث يمكن عرضها على الويب الصفحة). ستصادفه كثيرًا ، لذا في هذه المقالة نقدم لك كل ما تحتاجه للعمل مع JSON باستخدام JavaScript ، بما في ذلك الوصول إلى عناصر البيانات في كائن JSON وكتابة JSON الخاص بك.
- ممارسة بناء الكائن
- في المقالات السابقة ، نظرنا في جميع تفاصيل بنية وجوه جافا سكريبت الأساسية وتفاصيل التركيب ، مما يمنحك قاعدة صلبة للبدء منها. في هذا المقال ، نتعمق في تمرين عملي ، مما يمنحك المزيد من التدريب على بناء كائنات جافا سكريبت مخصصة ، والتي تنتج شيئًا ممتعًا وملونًا - بعض الكرات المرتدة الملونة.

-
- -

تقييم
- إضافة ميزات إلى الكرات المرتدة التجريبية
- في هذا التقييم ، يتوقع منك استخدام الكرات المرتدة التجريبية من المقالة السابقة كنقطة بداية ، وإضافة بعض الميزات الجديدة والممتعة إليها.

diff --git a/files/ar/learn/javascript/objects/inheritance/index.html b/files/ar/learn/javascript/objects/inheritance/index.html deleted file mode 100644 index 7dc1333c96..0000000000 --- a/files/ar/learn/javascript/objects/inheritance/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: الوراثة في جافاسكريبت -slug: Learn/JavaScript/Objects/Inheritance -translation_of: Learn/JavaScript/Objects/Inheritance ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
- -

مع معظم التفاصيل المثيرة في OOJS التي درسناها حتى الآن،سنتطرق في هذا الدرس لكيفية إنشاء طفل  (child" object classes (constructors" الذي يرث الميزات من أبيه parent" classes". بالإضافة إلى ذلك، سنقدم بعض النصائح، حول متى وأين يجب عليك استخدام ال OOJS.

- - - - - - - - - - - - -
المتطلبات الأساسية :دراية لا بأس بها بخصوص الحاسوب، الإلمام بمبادئ وأساسيات الـ HTML وCSS وجافاسكريبت (راجع First steps and Building blocks) وأساسيات بناء الكائنات في الجافاسكريبت OOJS (راجع Introduction to objects).
الهدف :فهم كيفية تنفيذ الوراثة في جافا سكريبت.
- -

الوراثة النمودجية - Prototypal inheritance

- -
-

لقد راينا حتى الآن بعض عمليات الوراثة — وراينا كيف تعمل الـ prototype chains، وكيف يتم توارث الاعضاء صعودا في السلسلة، ولكن معظمها اقتصر على الدوال المدمجة في المتصفح (built-in browser functions). الان، سنرى كيف يمكننا إنشاء كائن يرث من كائن آخر في جافا سكريبت؟

- -

كما ذكرنا في وقت سابق من هذه الدورة التدريبية، بعض الاشخاص يعتقدون أن جافاسكريبت ليست لغة كائنية حقيقية. في لغات "OO الكلاسيكية"، حيث يجب تعريف class objects من نوع ما، بعد ذلك يمكنك ببساطة تعريف الكلاس الذي سترث منه الكلاسات الأخرى (شاهد بعض الامثلة البسيطة بخصوص الوراثة في لغة  C++ inheritance). الجافا سكريبت تستخدم نظام مختلف — نظام الربط بين الكائنات — في الجافسكريبت لا يتم نسخ الوظائف الموروثة على الكائنات التي تقوم  بالوراثة، بدلا من ذالك يتم عمل رابط بينها — الوظائف التي ترث مرتبطة عن طريق ال prototype chain (غالباً ما يشار لها بال prototypal inheritance).

- -

دعونا نستكشف كيفية القيام بذلك مع مثال ملموس.

- -

الشروع في العمل

- -

اولا وقبل كل شئ، قم بعمل نسخة من الملف الخاص بنا oojs-class-inheritance-start.html (او شاهد running live). ستجد داخله نفس مثال Person() constructor الذي استخدمناه طوال هذه الدورة التدريبية مع اختلاف طفيف — لقد قمنا بتعريف الخصائص فقط، داخل ال constructor:

- -
function Person(first, last, age, gender, interests) {
-  this.name = {
-    first,
-    last
-  };
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-};
- -

وكافة ال method معرفة كـ constructor's prototype  ، على سبيل المثال:

- -
Person.prototype.greeting = function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
-};
- -
-

ملحوظة :  في شفرة المصدر سترى ايضا الوظائف ()bio و ()farewell  معرفة . في وقت لاحق سترى كيف يمكن أن تكون موروثة من قبل منشئات-constructors آخرى.

-
- -

سنقوم بإنشاء Teacher class، مثل الذي قمنا بتوصيفه في تعريف object-oriented definition الخاصة بنا —والذي سيرث كافة الأعضاء من ال Person،  ولكن سيشتمل أيضا على:

- -
    -
  1. خاصية جديدة، subject  — والتي ستحتوي على المادة التي يدرسها المدرس.
    2. -
  2. وعلى الوظيفة greeting() محدثة، والتي تبدو أكثر رسمية من الوظيفة greeting() القياسية —
    - وهي اكثر ملائمة مع المدرس الذي يقوم بتدريس بعض الطلاب في المدرسة.
    3. -
- -

تعريف ال Teacher() constructor function

- -

أول شيء يتعين علينا القيام به هو إنشاء Teacher() constructor —  اضف ما يلي أدناه في التعليمات البرمجية خاصتك:

- -
function Teacher(first, last, age, gender, interests, subject) {
-  Person.call(this, first, last, age, gender, interests);
-
-  this.subject = subject;
-}
- -

تبدو هذه مشابهة لل Person constructor  في نواح كثيرة، ولكن هناك شيء غريب والذي لم نره من قبل — الدالة ()call . هذه الدالة تسمح لك باستدعاء دالة اخرى معرفة في مكان آخر، ولكن في السياق الحالي، البراميتر الاول لتحديد قيمة this، اي هذا الذي نريد استخدامه عند تشغيل الدالة، والبرامترات الاخرى لتحديد البرامترات التي يجب ان تمرر للدالة عند تشغيلها.

- -
-

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

-
- -

في هذه الحالة، وعلى نحو فعال قمنا بتشغيل ال Person() constructor function داخل ال Teacher() constructor function (انظر اعلاه). ما نتج عنه نفس الخصائص المعرفة داخل ()Teacher ولكن باستخدام قيم البرامترات التي تم تمريرها إلى ()Teacher وليس الى ()Person (ببساطة قمنا بتمرير this الى ()call وهذا يعني أن this داخل ()cal ستشير الى Teacher() function).

- -

السطر الأخير داخل ال constructor يعرف الخاصية subject الجديدة وهي خاصة ب ()Teacher فقط.

- -

كملاحظة، بإمكاننا ببساطة القيام بذلك على هذا النحو :

- -
function Teacher(first, last, age, gender, interests, subject) {
-  this.name = {
-    first,
-    last
-  };
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-  this.subject = subject;
-}
- -

ولكن هذا مجرد إعادة تحديد الخصائص من جديد، و ()Teacher لا يرثها من ال ()Person، لذا لا فائدة لما نحاول القيام به. لانه سيأخذ المزيد من السطور في التعليمات البرمجية لا اكثر.

- -

إعداد Teacher() prototype ومرجع ال constructor

- -

كل شيء جيد حتى الآن، ولكن لدينا مشكلة. قمنا بتعيين constructor جديد، وبشكل افتراضي يحتوي على الخاصية prototype فارغة. ونحن بحاجة لجعل ()Teacher يرث الوظائف المعرفة في ال Person() prototype. فكيف نفعل ذلك؟

- -

أضف السطر التالي اسفل التعليمة البرمجية الخاصة بك:

- -
Teacher.prototype = Object.create(Person.prototype);
- -

وهنا يأتي دور الوظيفة ()create للإنقاذ مرة أخرى — في هذه الحالة استخدمناها لإنشاء قيمة جديدة للخاصية prototype (وهي في حد ذاتها كائن يحتوي على خصائص ووظائف) مع prototype يساوي Person.prototype، وتعيينها كقيمة ل Teacher.prototype، وهذا يعني أن Teacher.prototype الآن سوف يرث كل الوظائف الموجودة في ال Person.prototype.

- -

نحن بحاجة إلى فعل شيئا آخر قبل أن نكمل — constructor الخاصية prototype ل ()Teacher
- هو الان على شكل ()Person، بسبب الطريقة التي ورثناها منه (لمزيد من المعلومات حول هذا Stack Overflow post) — حاول حفظ التعليمات البرمجية الخاصة بك، واعد تحميل الصفحة من المتصفح، وادخل هذا في console الجافاسكريبت للتحقق:

- -
Teacher.prototype.constructor
- -

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

- -
Teacher.prototype.constructor = Teacher;
- -

الآن إذا قمت بحفظ وتحديث، وإدخال Teacher.prototype.constructor سيتم إرجاع ()Teacher، كما هو مطلوب.

- -

منح ()Teacher الوظيفة ()greeting الجديدة

- -

لانهاء الكود الخاص بنا، سنحتاج إلى تعريف الوظيفة الجديدة ()greeting في Teacher() constructor.

- -

أسهل طريقة للقيام بذلك، هو تعريفها على Teacher() prototype — اضف ما يلي في الجزء السفلي من التعليمات البرمجية الخاصة بك:

- -
Teacher.prototype.greeting = function() {
-  var prefix;
-
-  if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
-    prefix = 'Mr.';
-  } else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
-    prefix = 'Mrs.';
-  } else {
-    prefix = 'Mx.';
-  }
-
-  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
-};
- -

تحية المدرس هذه (alert)، يستخدم فيها أيضا الاسم prefix المناسب لجنسهم، بناءا على عبارة شرطية.

- -

تجربة المثال

- -

لقد ادخلت الآن كافة التعليمات البرمجية، حاول انشاء object instance من ()Teacher، عن طريق وضع ما يلي في الجزء السفلي لجافا سكريبت الخاصة بك :

- -
var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
- -

الآن حفظ وتحديث، وحاول الوصول إلى خصائص ووظائف الكائن teacher1 الجديد الخاص بك، على سبيل المثال:

- -
teacher1.name.first;
-teacher1.interests[0];
-teacher1.bio();
-teacher1.subject;
-teacher1.greeting();
- -

ستعمل جميعها بشكل جيد، الثلاثة الأولى ستصل إلى الأعضاء التي تم وراثتها من Person() constructor (class العام فيما الاثنان المتبقيان سيصلان إلى الأعضاء الموجودة في  (Teacher() constructor (class.

- -
-

ملاحظة : إذا واجهتك مشكلة في الحصول على هذا العمل، قارن التعليمات البرمجية الخاصة بك مع خاصتنا  finished version (شاهد running live ).

-
- -

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

- -

قد يهمك ايضا الاطلاع على بعض المستجدات {{glossary("ECMAScript")}} بخصوص المميزات الجديدة التي تسمح لنا بالقيام بوراثة أكثر نظافة في جافا سكريبت (شاهد Classes). ونحن لم نقم بتغطيتها هنا، كما لم يتم حتى الآن اعتمادها على نطاق واسع جداً عبر المتصفحات. كل التعليمات البرمجية الأخرى التي ناقشناها في هذه المجموعة من المقالات مدعومة بقدر ما، باستثناء IE9 وإلاصدارات السابقة،  هناك طرق لتحقيق الدعم لما سبق.

- -

الطريقة الشائعة هي استخدام مكتبة جافا سكريبت — معظم الخيارات الشائعة تحتوي على مجموعة سهلة من الوظائف المتاحة لتنفيذ الوراثة بسهولة وسرعة. CoffeeScript على سبيل المثال، توفر class ،extends،... الخ.

- -

اختبر قدراتك

- -

في القسم النظري الخاص بال OOP theory section، أدرجنا أيضا Student class كمفهوم، والذي يرث كافة ميزات ال Person، ويحتوي على الوظيفة ()greeting بتحية مختلفة للشخص، وتحيته أكثر رسمية بكثير من تحية المدرس. الق نظرة على ما يشبه تحية الطالب في هذا القسم، وحاول تنفيذ Student() constructor خاص بك، على أن يرث كل ميزات ال ()Person، وقم بتنفيذ وظيفة ()greeting مختلفة.

- -
-

ملاحظة : إذا واجهتك مشكلة في الحصول على هذا العمل، قارن التعليمات البرمجية الخاصة بك مع خاصتنا finished version (شاهد ايضا running live).

-
- -

Object member summary

- -

تلخيص، لديك ثلاثة أنواع من property/method لتهتم بشانهم.

- -
    -
  1. تلك المعرفة داخل ال constructor function والتي تمرر لل object instances. هذه سهلة إلى حد ما، في التعليمات البرمجية الخاصة بك، هناك أعضاء معرفة داخل ال constructor تستخدم نوع السطر this.x = x في built in browser code وهي متاحة فقط للأعضاء في object instances (عادة ما يتم إنشاؤها من خلال استدعاء ال constructor باستخدام الكلمة المحجوزة  new مثل var myInstance = new  myConstructor())
    2. -
  2. تلك التي تم تحديدها مباشرة على constructor نفسها، وهي متاحة فقط في ال constructor.
    - وهذه عادة متوفرة فقط في ال built-in browser objects,
    -  المعترف بها حاليا بالسلاسل مباشرة على ال constructor،
    - لا على ال instance. على سبيل المثال Object.keys().
    3. -
  3. -

    تلك المحددة في constructor ال prototype، والموروثة من جميع ال instances
    - ووراثة فئات الكائن. وتشمل اي عضو معرف على الخاصية Constructor's prototype property
    - (مثلا ()myConstructor.prototype.x).

    -
    4. -
- -

إذا لم تتمكن من استعاب هذا، فلا تقلق فانت حتى الآن لا تزال تتعلم، وسوف تستوعبها اكثر مع الممارسة.

- -

متى تستخدم الوراثة في جافا سكريبت؟

- -

على الارجح بعد هذه المادة الأخيرة، ستقول "يا الهي، هذا معقد"، حسنا، انت على حق، ال prototypes والوراثة تمثل بعض اهم الجوانب الأكثر تعقيداً في جافا سكريبت، لكن قوة ومرونة  الجافا سكريبت تاتي من تركيبة الكائن والوراثة ومن المفيد فهم كيف تعمل.

- -

بطريقة ما، فانت تستخدم الوراثة طوال الوقت، كلما استخدمت الميزات المختلفة ل  Web API (واجهة برمجة تطبيقات الويب) او الخصائص والوظائف المعرفة في كائنات المتصفح المدمجة (built-in browser) التي تقوم باستدعائها على السلاسل النصية الخاصة بك، او على المصفوفات...الخ، بشكل فعلي، فانت تستخدم الوراثة.

- -

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

- -
-

ملاحظة: بسبب طريقة عمل الجافاسكريبت مع ال prototype chain ...الخ، غالباً ما تسمى مشاركة الوظائف بين الكائنات ب delegation (التفويض)، الكائنات المتخصصة تفوض هذه الوظائف إلى نوع الكائن العام. وربما هذا هو الوصف الاكثر دقة لوصف الوراثة، كما  لا يتم نسخ الوظائف "الموروثة" على الكائنات التي تقوم  "بالوراثة". بدلا من ذلك يتم عمل رابط بينها، لذا  فالوظائف الموروثة لاتزال في الكائن العام.

-
- -

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

- -

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

- -

خلاصة

- -

 غطت هذه المادة ما تبقى من نظرية ال OOJS الأساسية، وتركيبة الكائن الاساسية، من خلال هذه المعطيات فعلى الارجح انك اصبحت اكثر قدرة على فهم كائن الجافاسكريبت وأساسيات ال OOP، وايضا ال prototypes والميراث النمودجي (prototypal inheritance)، وكيفية إنشاء كلاسات (اي ما يعادل ال constructors في جافاسكريبت) وال object instances، واضافة ميزات الى الكلاسات، وانشاء كلاسات فرعية (subclasses)، التي ترث من الكلاسات الأخرى.

- -

في الدرس القادم سنلقي نظرة على كيفية التعامل مع ال (JavaScript Object Notation (JSON، وتبادل البيانات المشتركة باستخدام كائنات جافا سكريبت.

-
- -

See also

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

diff --git a/files/ar/learn/javascript/objects/object-oriented_js/index.html b/files/ar/learn/javascript/objects/object-oriented_js/index.html deleted file mode 100644 index c57bbb13d5..0000000000 --- a/files/ar/learn/javascript/objects/object-oriented_js/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: جافاسكريبت - البرمجة غرضية التوجه للمبتدئين -slug: Learn/JavaScript/Objects/Object-oriented_JS -translation_of: Learn/JavaScript/Objects/Object-oriented_JS ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
- -

مع ما تعلمناه من أساسيات، سنركز الآن على جافاسكريبت غرضية التوجه (object oriented programming). او ما يعرف ب (OOP)، سنستعرض في هذه المقالة أساسيات البرمجة غرضية التوجه  نظريا، ثم سنستكشف كيف أن الجافا سكريبت تظاهي الـ object classes المستخدمة في لغات البرمجة الأخرى (php مثلا) عن طريق الـ constructor functions، وأيضا كيفية إنشاء instances من الكائن (أو مثيل الكائن).

- - - - - - - - - - - - -
المتطلبات الأساسية : -

دراية لا باس بها بخصوص الحاسوب، الإلمام بمبادئ وأساسيات الـ HTML وCSS وjavascript (شاهد First steps و Building blocks)  وأساسيات بناء الـكائنات OOJS. (شاهد Introduction to objects).

-
الهدف :فهم نظريا الـبرمجة غرضية التوجه (object-oriented programming)، وكيف أن كل شيء في الجافاسكريبت عبارة عن كائن (object) !.
- وأيضا كيفية إنشاء الـ constructors وobject instances.
- -

البرمجة الكائنية (أو البرمجة غرضية التوجه) 

- -
-

لنبدأ، دعونا نقوم بعرض نبذة بسيطة عن ماهي البرمجة غرضية التوجه ( Object-oriented programming ( OOP على مهل. نقول على مهل، لأن فهم واستيعاب البرمجة غرضية التوجه (OOP) على عجل سيكون امر غاية في التعقيد، كأن نعطيك العلاج الكامل الآن على الأرجح سيسبب لك خلطا أكثر مما سيساعدك.   
- الفكرة الأساسية من البرمجة غرضية التوجه OOP هي أن نستخدم أشياءً من عالمنا الحقيقي ونحولها إلى كائنات ونقوم بتمثيلها داخل برامجنا، ونوفر وسائل سهلة للوصول إلى وظائفها، حتى نستفيد منها.

- -

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

- -

تعريف الـ object template

- -

دعونا ننظر في برنامج سهل يستعرض معلومات عن الطلاب والمعلمين في المدرسة.
- هنا سوف نبحث في نظرية البرمجة الغرضية التوجه OOP بشكل عام، وليس في سياق أي لغة برمجة معينة.

- -

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

- -

- -

في بعض لغات البرمجة غرضية التوجه OOP الأخرى (PHP مثلا)، يعرف الكائن عامة بال  class (جافا سكريبت تستخدم مصطلحات وآلية مختلفة، كما سنرى أدناه) - في الواقع هو ليس كائنا، بل هو القالب الذي يعرف خصائص الكائن وكيف ينبغي له أن يكون.

- -

إنشاء كائنات فعلية - Creating actual objects 

- -

من خلال الـ class، يمكنك إنشاء object instances  — وهي الكائنات التي تحتوي على البيانات والوظائف المحددة في الـ class (وبالتالي هي مثيلة له). من خلال الـ class Person الخاص بنا، يمكننا الآن إنشاء بعض الأشخاص الفعليين :

- -

- -

عندما يتم إنشاء object instance من الـ class، ستبدأ الـ constructor function الخاصة بال class بإنشائه،  تسمى عملية إنشاء الـ object instance من الـ class بال instantiation (إنشاء مثيل).
- أي أنَّ الـ object instance هو instantiated (مثيل) من الـ class.

- -

كلاسات متخصصة - Specialist classes

- -

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

- -

- -

وهذا مفيد حقاً – حيث يتشارك المعلمين والطلاب في الكثير من الخصوصيات المشتركة مثل الاسم ونوع الجنس، والعمر، سيكون من المفيد جدا تعريف تلك الخصوصيات المشتركة مرة واحدة فقط. يمكنك أيضا تعريف نفس تلك الخصوصيات كل على حدة في الكلاسات المختلفة، كما سيتم تعريف كل من هذه الخصوصيات في namespace مختلفة. على سبيل المثال، قد تكون تحية الطالب على هذا الشكل ( Yo, I'm [firstName]" ( Hi, I'm Sam"، بينما قد يستخدم المعلم شيئا أكثر رسمية،
- مثلHello, my name is [Prefix] [lastName] and I teach [Subject]. " )  Hello, My name is Mr Griffiths, and I teach Chemistry).

- -
-

ملاحظة : قدرة الكائنات المتعددة على تنفيذ نفس الوظائف تسمى polymorphism (تعدد الأشكال).

-
- -

يمكنك الآن إنشاء object instances من child classes. على سبيل المثال :

- -

- -

في باقي المقالة سنبدأ بإلقاء نظرة عملية على البرمجة غرضية التوجه OOP في جافا سكريبت.

- -

الـ Constructors والـ object instances

- -

بعض الناس يقولون أن جافاسكريبت ليست لغة كائنية حقيقية، لأنها لا تستخدم الكلمة المحجوزة class لإنشاء الكلاسات مثل العديد من لغات البرمجة الغرضية التوجه OOP. بدلاً من ذلك، الجافاسكريبت تستخدم وظائف خاصة تسمى constructor functions لتعريف الكائنات وميزاتها. هذه الوظائف مفيدة جدا لأنك غالبا ما ستواجه حالات، حيث لا يمكنك معرفة عدد الكائنات التي ستقوم بإنشائها. وبالتالي ستوفر لك الـ constructors الوسائل اللاَّزمة لإنشاء العديد من الكائنات التي تحتاج إليها بطريقة فعالة، وربط البيانات والوظائف كما هو مطلوب.

- -

عندما يتم إنشاء object instance جديد من الـ constructor function، لا يتم نسخ كل الوظائف الى الكائن الجديد مثل الـ «classic OO languages». بدلاً من ذلك يتم تكوين رابط وظيفي بواسطة reference chain تسمى prototype chain  (شاهد Object prototypes). حتى هذا ليس تجسيدًا حقيقـيًّا، إذا توخينا الدقة، فجافاسكريبت تستخدم آلية مختلفة لتبادل الوظائف بين الكائنات.

- -
-

ملاحظة : عدم وجود الـ "classic OOP" ليس بالضرورة أمرا سيئاً، كما ذكر أعلاه، البرمجة الغرضية التوجه OOP معقدة للغاية، لكن للجافاسكريبت بعض الطرق اللطيفة للاستفادة من ميزات الـ OO  دون الحاجة للتعمق كثيرا فيها.

-
- -

لنبدأ بإنشاء كلاسات عن طريق الـ constructors، وإنشاء object instances منها في جافاسكريبت.
- أولاً وقبل كل شيء، نود منك عمل نسخة من الملف التالي oojs.html الذي سبق وأن عملنا عليه في الدرس السابق.

- -

مثال سهل

- -

دعونا نبدأ بالنظر في كيفية تعريف شخص من خلال دالة عادية. أضف هذه الدالة أدناه إلى التعليمات البرمجية الموجودة لديك:

- -
function createNewPerson(name)
-{
-  var obj = {};
-  obj.name = name;
-  obj.greeting = function () {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-  return obj;
-}
- -

يمكنك الآن إنشاء Person جديد بواسطة استدعاء هذه الدالة، حاول إدخال الأسطر التالية في console الجافاسكريبت في المتصفح الخاص بك:

- -
var salva = createNewPerson('salva');
-salva.name;
-salva.greeting();
- -

يعمل بشكل جيد، ولكنه عمل متعب قليلا. إذا كنا نعرف أننا سننشئ كائنًـا، لماذا نحتاج إلى إنشاء كائن جديد فارغ ونعود إليه  (عبر return)؟ من حسن الحظ، جافاسكريبت تزودنا باختصار مفيد على شكل constructor functions، دعونا الآن ننشئ واحدا !

- -

قم  باستبدال الدالة السابقة بهذه :

- -
function Person(name)
-{
-  this.name = name;
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-}
- -

الـ constructor function هو نسخة الجافاسكريبت فيما يتعلق بال class.
- ستلاحظ أن لديها كافة الميزات التي تتوقعها في الدالة، على الرغم من أنها لا تقوم بإرجاع أي شيء، ولا تقوم بإنشاء كائن، لحد الآن هي مجرد تعريف للـخصائص (properties) والوظائف (methods)، سترى أيضا هذه الكلمة this المستخدمة هنا، فكرتها  أنه كلما تم إنشاء أحد الـ object instances، فإن الـ object's name property سيساوي قيمة الـ name الممررة إلى الـ constructor call،  والوظيفة () greeting ستستخدم قيمة name الممررة إلى الـ constructor call أيضا.

- -

الـ constructor call هو الذي يكون على هذا الشكل  new Object(parameters) كما سنرى بعد قليل.

- -
-

ملاحظة : عادة ما يبدأ اسم الـ constructor function بحرف كبير - يتم استخدام هذا التقليد حتى يسهل التعرف على الـ constructor functions في التعليمات البرمجية بسهولة.

-
- -

كيف يمكننا استدعاء الـ constructor  لإنشاء بعض الكائنات؟

- -

أضف الأسطر التالية أدناه الى اسفل التعليمات البرمجية الخاص بك:

- -
var person1 = new Person('Bob');
-var person2 = new Person('Sarah');
- -

احفظ التعليمات البرمجية الخاصة بك واعد تحميل الصفحة، وحاول إدخال الأسطر التالية في حقل المدخلات الخاص بك (كل على حدة) :

- -
person1.name
-person1.greeting()
-person2.name
-person2.greeting()
- -

جميل! اصبح لدينا كائنان جديدان في الصفحة، تم تخزين كل منهما ضمن namespace مختلفين، للوصول إلى الخصائص والوظائف الخاصة بهما، عليك أن تبدأ بالاتصال اما مع person1 أو person2، هما الان مغلفين بدقة، وبالتالي سنضمن عدم تشابك الوظائف مع بعضها، لاحظ ان لديهم نفس الخاصية name ونفس الوظيفة () greeting، الا أن كل واحد منهما سيحصل على القيمة name التي تم تعيينها له. هذا واحد من الاسباب التي تعرفنا على اهمية this، حيث انها ستشير الى الكائن الخاص بها وليس لشئ اخر.

- -

دعونا ننظر في ال constructor calls مرة أخرى :

- -
var person1 = new Person('Bob');
-var person2 = new Person('Sarah');
- -

في كل حالة من الحالتين، يتم استخدام الكلمة المحجوزة new لاخبار المتصفح بأننا نريد إنشاء object instance جديد، متبوعة باسم الدالة  و ال parameters المطلوبة بين الأقواس، ويتم تخزين النتيجة في متغير، وهي شبيهة جدا بكيفية استدعاء   standard function، ويتم إنشاء كل instance وفقا لهذا التعريف:

- -
function Person(name) {
-  this.name = name;
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-}
- -

بعد أن يتم إنشاء الكائنات الجديدة، فعليا، ستحتوي المتغيرات person1 و person2 على الكائنات التالية على هذا النحو :

- -
{
-  name : 'Bob',
-  greeting : function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-{
-  name : 'Sarah',
-  greeting : function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

قلنا فعليا لأنه في الواقع الفعلي لا يزال يتم تعريف الوظائف في ال class، وليس في object instances، على عكس ال object literal كما راينا سابقا.

- -

انشاء  constructor

- -

المثال الذي راينا اعلاه، كان مجرد مقدمة، دعونا الان ننشئ Person() constructor function. فعلي.

- -

قم بحذف التعليمات البرمجية التي قمت بإدراجها حتى الآن، واضف هذا ال constructor بدلا منه – هو بالضبط نفس المثال البسيط اعلاه من حيث المبدأ، مع القليل من التعقيد :

- -
function Person(first, last, age, gender, interests) {
-  this.name = {
-    first,
-    last
-  };
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-  this.bio = function() {
-    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  };
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name.first + '.');
-  };
-};
- -

الآن أضف ال constructor call التالي، لإنشاء object instance من ال constructor خاصتنا :

- -
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
- -

يمكنك الآن الوصول إلى الخصائص والوظائف مثلما فعلنا مع الكائن اعلاه :

- -
person1['age']
-person1.interests[1]
-person1.bio()
-// etc.
- -
-

ملاحظة: إذا كنت تواجه صعوبة في الحصول على هذا العمل، حاول مقارنة التعليمات البرمجية الخاصة بك مع التعليمات الخاصة بنا — see oojs-class-finished.html (also see it running live).

-
- -

امتحان بسيط

- -

في هذا الامتحان البسيط وجب عليك إضافة بضعة أسطر اضافية الى الكائن Person خاصتك، ومحاولة جلب وإعداد الاعضاء من ناتج ال object instances.

- -

هناك مشكلتين بخصوص الوظيفة ()bio :
- أ- مخرجاتها ستكون دائما عبارة عن الضمير هو "He"، حتى وان كان الشخص انثى.
- ب- الوظيفة bio سترجع اثنين من الاهتمامات (interests) فقط، حتى وان تم تعيين أكثر من ذالك في مصفوفة الاهتمامات interests.
- يمكن العمل على حل هذه المشكلة داخل ال ?( class definition ( constructor.
- يمكنك وضع أي كود تريده داخل ال constructor (على الأرجح سوف تحتاج لبضع جمل شرطية "if..else if...else" وحلقة "for").
- مطلوب منك حل هذه المشكلة آخدا بعين الاعتبار نوع الجنس (ذكر/انثى). وايضا عدد الاهتمامات interests كان تكون 1 أو 2 أو أكثر من 2. 

- -
-

ملاحظة : إذا واجهتك مشكلة، فقد قمنا بتوفير الاجابة، answer inside our GitHub repo (see it live) — ننصح بالاعتماد على نفسك اولا !.

-
- -

طريقة اخرى لانشاء ال object instances

- -

حتى الآن رأينا طريقتان مختلفتان لإنشاء ال object instance :

- -
    -
  1. باستخدام الاعلان عن ال object literal (الدرس السابق).
    2. -
  2. باستخدام constructor function (انظر أعلاه).
    3. -
- -

هذا منطقي, ولكن هناك طرق أخرى، نريد ان نجعلها مالوفة لديك في حالة مصادفتها في مكان ما على شبكة الويب.

- -

The Object() constructor

- -

يمكنك استخدام ال Object() constructor لانشاء كائن جديد، نعم، حتى الكائنات العامة تحتوي على constructor والذي بدوره يولد كائنا فارغا.

- -

حاول ادخال السطر التالي في console المتصفح الخاص بك :

- -
var person1 = new Object();
- -

سيقوم هذا بتخزين كائن فارغ في المتغير person1. يمكنك بعد ذالك اضافة الخصائص والوظائف لهدا الكائن،
- باستخدام نقطة الترميز او باستخدام اقواس الترميز، حسب الطلب. جرب هذا المثال :

- -
person1.name = 'Chris';
-person1['age'] = 38;
-person1.greeting = function() {
-  alert('Hi! I\'m ' + this.name + '.');
-}
- -

يمكنك ايضا تمرير object literal الى ال Object() constructor ك parameter معبأة على شكل properties/methods. جربه بنفسك :

- -
var person1 = new Object({
-  name : 'Chris',
-  age : 38,
-  greeting : function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-});
- -

باستخدام الوظيفة ()create

- -

الجافاسكريبت لديها وظيفة مبنية مسبقا   (built-in method) تسمى ()create, والتي تسمح لك بإنشاء object instance جديد استناداً إلى كائن موجود.

- -

جرب ادخال هذا السطر في console المتصفح الخاص بك :

- -
var person2 = Object.create(person1);
- -

والان جرب هذه :

- -
person2.name
-person2.greeting()
- -

سترى أن person2 قد تم إنشاؤه استناداً إلى person1 — فاصبح يمتلك نفس الخصائص والوظائف المتاحة لل person1 وهذا مفيد جداً، حيث أنه سيسمح لك بإنشاء object instances جديد، دون الحاجة إلى تعريف ال constructor.
- الجانب السلبي هو أن ال ()create غير مدعومة من قبل بعض المتصفحات، فيما يتعلق بالعودة ك constructors ( IE8 وما قبله لا يدعم هذه الوظيفة ) ، بالإضافة إلى ذلك يعتقد البعض أن ال constructors  تمنح التعليمات البرمجية الخاصة بك مميزات اكثر. يمكنك إنشاء constructors خاصة بك  في مكان واحد، ومن ثم إنشاء instances حسب الحاجة،

- -

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

- -

سوف نستكشف ال ()create بمزيد من التفصيل في وقت لاحق.

- -

ملخص

- -

قدمت هذه المقالة طريقة مفصلة حول ال object-oriented نظريا، هذه ليست القصة بأكملها، ولكنها تعطيك فكرة عن ما نتعامل معه هنا. باﻹضافة إلى ذلك، فقد راينا الكيفية التي ترتبط بها جافا سكريبت، وكيف انها تختلف عن مفهوم ال "classic OOP"، راينا كذالك، كيفية تنفيذ ال الكلاسات classes في الجافاسكريبت باستخدام ال constructor functions، وطرق مختلفة لتوليد ال object instances.

-
- -

ان شاء الله في الدرس القادم سوف نستكشف prototypes الجافا سكريبت.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

diff --git a/files/ar/learn/javascript/objects/object_prototypes/index.html b/files/ar/learn/javascript/objects/object_prototypes/index.html deleted file mode 100644 index 1e91d18013..0000000000 --- a/files/ar/learn/javascript/objects/object_prototypes/index.html +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: ال Object prototypes -slug: Learn/JavaScript/Objects/Object_prototypes -translation_of: Learn/JavaScript/Objects/Object_prototypes ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
- -

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

- - - - - - - - - - - - -
المتطلبات الأساسية :دراية لا بأس بها بخصوص الحاسوب، الإلمام بمبادئ وأساسيات الـ HTML وCSS وجافاسكريبت (راجع First steps and Building blocks) وأساسيات بناء الكائنات في الجافاسكريبت OOJS (راجع Introduction to objects).
الهدف :فهم جافاسكريبت object prototypes، وكيف تعمل ال  prototype chains، وكيفية إضافة وظائف جديدة على الخاصية prototype.
- -

الجافا سكريبت لغة تعتمد على ال prototype ؟

- -
-

غالبا ما توصف جافاسكريبت، على أنها لغة تعتمد على البروتوتايب (prototype-based language)، بمعنى، ان كل كائن في الجافاسكريبت يحتوي على الكائن prototype، الذي يرث خصائص ووظائف ال Object. الكائن prototype يمكنه أيضا أن يحتوي على كائن prototype خاص به، ويرث خصائصه ووظائفه ايضا، وهكذا ودواليك. يعرف هذا السلوك بال prototype chain (سلسلة النمودج). وهذا يشرح، كيف انه بإمكان كائن معين ان يصل لخصائص ووظائف مُعَرَّفة في كائن اخر.

- -

حسنا، حتى نكون أكثر دقة، الخصائص والوظائف مُعَرَّفة في الـ Objects' constructor functions  وليس في الـ object instances (مثيلات الكائن).

- -

بالنسبة للبرمجة الكلاسيكية غرضية التوجه classic OOP، يتم تعريف الكلاسات، بعد أن يتم إنشاء object instances، ويتم نسخ كافة الخصائص والوظائف المعرفة في الكلاس فوق ال instance.
- في الجافاسكريبت، الأمر مختلف، حيث يتم تكوين رابط بين الـ object instance والـ constructor الخاص به. يمكن تشبيه الأمر بتكوين (حلقة في سلسلة ال prototype)، ويتم الوصول إلى الخصائص والوظائف من الـ constructor، من خلال التنقل صعودا في السلسلة. بمعنى اخر، سيبدأ مُفسِّر الجافاسكريبت بالبحث داخل النمادج prototypes، عن الخاصّية او الوظيفة المطلوبة، من اسفل سلسلة الوراثة، ويكمل بالبحث حتى يصل الى اعلاها.

- -

دعونا نلقي نظرة على هذا المثال ليصبح الأمر أكثر وضوحا.

- -

فهم ال prototype objects

- -

لنَـعُد إلى المثال الذي انتهينا من كتابتة Person() constructor، قم بتحميل المثال التالي في المتصفح الخاص بك، إذا لم يكن لديك المثال الذي عملنا عليه في الدرس السابق استخدم المثال الخاص بنا oojs-class-further-exercises.html او (قم بنسخ source code).

- -

في هذا المثال قمنا بتعريف constructor function، كالتالي :

- -
function Person(first, last, age, gender, interests) {
-
-  // property and method definitions
-  this.frist = frist;
-  //etc..
-};
- -

ثم قمنا بإنشاء object instance منه هكذا :

- -
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
- -

إذا قمت بكتابة ".person1" في console الجافاسكريبت، ستلاحظ ان المتصفح يقوم بالاكمال التلقائي ويظهر اسماء الاعضاء الموجودة في هذا الكائن.  

- -

- -

في هذه القائمة، نرى الاعضاء المعرفة في ال Person() constructor، الذي يمثله ال person1   وهذه الاعضاء هي name, age, gender, interests, bio و greeting. كما نرى ايضا بعض الأعضاء الآخرين مثل watch ،valueOf،...الخ. وهي معرفة في prototype ال Person() constructor، ال prototype الخاص بال Person() constructor هو ال Object نفسه.

- -

والرسم التبياني التالي يوضح لنا، كيفة عمل ال prototype chain.

- -

- -

فماذا سيحدث إذا قمنا باستدعاء وظيفة على ال person1، وهي احدى الوظائف المعرفة في ال Object؟. على سبيل المثال:

- -
person1.valueOf()
- -

ببساطة فهذه الوظيفة  ()valueOf مملوكة لل Object وبما ان بروتوتايب ال ()Person هو ال  Object وال person1 هو من يمثله فسيرث ال  person1 هذه الخاصية  من  Object. مهمة ال valueOf هي العودة بقيمة الكائن الذي تم استدعاؤها عليه، حاول تجربتها وسترى ما الذي سيحدث.

- -

في هذه الحالة ستسير عملية البحث  على الشكل التالي:

- - - -
-

تذكير: الخصائص والوظائف لا يتم نسخها من كائن إلى آخر في ال ptototype chain —
- بل يتم الوصول إليها من خلال التنقل صعودا في السلسلة كما هو موضح أعلاه.

-
- -
-

ملاحظة:  رسميا لا توجد طريقة للوصول مباشرة الى الكائن prototype داخل كائن. "الروابط" بين العناصر موجودة في السلسلة ويتم تعريفها في خاصية داخلية، يشار إليها ب [[prototype]] في مواصفات لغة جافا سكريبت  (see {{glossary("ECMAScript")}}). ومع ذلك فمعظم المتصفحات الحديثة تحتوي على خاصية متاحة لها تسمى __proto__ (لديها 2 underscores في كلا جوانبها), والتي تحتوي على الكائن prototype. على سبيل المثال جرب:
-    __person1.__proto  او  __eprson1.__proto__.__proto
- لمشاهدة ما يشبه السلسلة في التعليمات البرمجية!

-
- -

الخاصية prototype : اين يتم تعريف الأعضاء الموروثة

- -

اذاً، أين يتم تعريف الخصائص والوظائف الموروثة؟
- إذا نظرتم إلى صفحة مرجع ال Object سترون هناك في الجانب الأيسر عددا كبيرا من الخصائص والوظائف المدرجة، البعض منها موروثة، واخرى غير موروثة، لم هذا؟

- -

الجواب، هو أن الاعضاء الموروثة هي تلك المعرفة في الخاصية prototype  (يمكن استدعاؤها تحت ال namespace)، اي تلك التي تبدأ ب .Object.prototype وليست تلك التي تبدأ بمجرد .Object، قيمة الخاصية prototype هي كائن، والتي هي في الاساس حزمة او وعاء لتخزين الخصائص والوظائف التي نريدها أن تكون موروثة من قبل الكائنات السفلية في ال prototype chain.

- -

حتى ال ()Object.prototype.watch او  ()Object.prototype.valueOf، متاحة لأي نوع من أنواع الكائنات التي ترث من ال Object.prototype بما في ذلك ال object instances الجديدة التي يتم إنشاؤها من ال constructor، (ك person1 مثلا).

- -

()Object.is() ،Object.keys، والأعضاء الاخرى غير معرفة داخل حزمة ال prototype وهي غير موروثة بواسطة ال object instances أو أنواع الكائنات التي ترث من ال ()Object. هي خصائص ووظائف متاحة فقط لل Object() constructor نفسه.

- -
-

ملاحظة: يبدو هذا غريبا - كيف يمكن أن يكون لديك وظيفة معرفة في ال constructor،  الذي هو في حد ذاته function؟ حسنا، هي ايضا function من النوع object - راجع مرجع ال Function() constructor حتى تتاكد بنفسك.

-
- -

يمكنك التحقق من خصائص البروتوتايب الموجودة بنفسك، ارجع الى مثالنا السابق وحاول ادخال السطر التالي في الجافاسكريبت console:

- -
Person.prototype
- -

المخرجات لن تظهر لك الكثير، لاننا حتى الان، لم نقم باضافة أي شيء في بروتوتايب ال constructor الخاص بنا، بشكل افتراضي، دائماً يبدأ بروتوتايب ال constructor فارغا. الآن جرب ما يلي:

- -
Object.prototype
- -

سترى عددا كبيرا من الوظائف المعرفة في الخاصية prototype الخاصة بال Object، ثم التي تتوفر على الكائنات التي ترث من ال Object، كما وضحنا في وقت سابق.

- -

سنرى أمثلة أخرى للوراثة عن طريق سلسلة البروتوتايب prototype chain في جميع أنحاء جافا سكريبت، حاول البحث في الوظائف والخصائص المعرفة في بروتوتايب الكائنات العامة ك String ،Date ،Number، و Array  على سبيل المثال. كلها تحتوي على عدد من الأعضاء المعرفة في البروتوتايب  الخاص بها، على سبيل المثال عندما نقوم بإنشاء سلسلة نصية (string)، مثل هذه:

- -
var myString = 'This is my string.';
- -

myString، فور انشائها سيتاح لها العديد من الوظائف المفيدة، مثل ()split و ()indexOf و ()replace ... الخ.

- -
-

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

-
- -

إعادة النظر في الوظيفة ()create

- -

راينا سابقا كيف يمكن استخدام الوظيفة ()Object.create لانشاء object instance.

- -

على سبيل المثال، حاول تجربة هذا في console الجافا سكريبت في المثال الخاص بك:

- -
var person2 = Object.create(person1);
- -

ماتفعله الوظيفة ()create في الواقع هو انشاء كائن جديد، من الكائن prototype المحدد، في هذه الحالة، سيتم إنشاء person2 باستخدام person1 على شكل كائن prototype، يمكنك التحقق من ذلك عن طريق إدخال ما يلي في ال console :

- -
person2.__proto__
- -

النتيجة: إرجاع الكائن person1.

- -

الخاصية  constructor

- -

كل object instance يحتوي على الخاصية constructor والتي تشير إلى ال constructor function الأصلي الذي أنشأ ال instance.

- -

على سبيل المثال، حاول ادخال هذه الأوامر في ال console:

- -
person1.constructor
-person2.constructor
- -

المفروض على كل منهما العودة لل Person() constructor، كما سيحتوي كل منهما على التعريف الأصلي لهذه ال instances.

- -

خدعة ذكية، يمكنك وضع الاقواس في نهاية الخاصية constructor (مع البرامترات المطلوبة) لانشاء object instance اخر من هذا ال constructor، ال constructor هو في النهاية function، لذالك يمكنك استدعاؤها باستخدام الأقواس، ستحتاج فقط إلى تضمين الكلمة المحجوزة new لتحديد أنك تريد استخدام هذه ال function ك constructor.

- -

حاول ادخال هذا في ال console:

- -
var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);
- -

الآن حاول الوصول إلى خصائص الكائن الجديد الخاص بك، على سبيل المثال:

- -
person3.name.first
-person3.age
-person3.bio()
- -

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

- -

الخاصية constructor لها استخدامات أخرى كذالك. على سبيل المثال، إذا كان لديك
-  object instance وترغب في إرجاع اسم ال contructor وهو instance، يمكنك استخدام ما يلي:

- -
instanceName.constructor.name
- -

جرب هذا، على سبيل المثال:

- -
person1.constructor.name
- -

التعديل على ال prototypes

- -

دعونا نلقي نظرة على مثال يقوم بتعديل الخاصية prototype الخاصة بال constructor.

- -

نعود إلى مثالنا oojs-class-further-exercises.html قم بعمل نسخة من الكود التالي source code. اسفل كود الجافاسكريبت، اضف التعليمة البرمجية التالية، وهي خاصة باظافة وظيفة جديدة على بروتوتايب ال constructor :  

- -
Person.prototype.farewell = function() {
-  alert(this.name.first + ' has left the building. Bye for now!');
-}
- -

احفظ التعليمات البرمجية وقم بتحميل الصفحة في المتصفح، وحاول إدخال ما يلي في حقل المدخلات الخاص بك:

- -
person1.farewell();
- -

ستحصل على رسالة تنبيه معروضة (alert)، تضم اسم الشخص كما هو محدد داخل ال constructor. وهذا مفيد حقاً، ولكن الاكثر افائدة هو أنه سيتم تحديث سلسلة الوراثة باكملها بشكل حيوي، و بشكل تلقائي يتم جعل الوظيفة الجديدة متاحة لجميع ال object instances المشتقة من ال constructor.

- -

لنفكر في هذا للحظة. في التعليمة البرمجية خاصتنا، قمنا بتعريف ال  Person constructor
- ثم قمنا بانشاء instance object من هذا ال Person constructor وهو ال person1 ثم قمنا باظافة الوظيفة الجديدة على بروتوتايب ال Person constructor.

- -
function Person(first, last, age, gender, interests) {
-
-  // property and method definitions
-
-};
-
-var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
-
-Person.prototype.farewell = function() {
-  alert(this.name.first + ' has left the building. Bye for now!');
-}
- -

ولكن الوظيفة ()farewell لا تزال متاحة في ال person1 object instance  — تم تحديث الوظائف المتاحة لها تلقائيا، هذا يثبت ما قلناه سابقا عن ال prototype chain. والمتصفح سيبحث صعودا في السلسلة لإيجاد الوظائف التي لم يتم تعريفها في ال object instance نفسها، بدلا من تلك الوظائف التي يتم نسخها إلى ال instance. وهذا يجعلها قوية جداً، و نظامها الوظيفي قابل للتوسع/للتمدد.

- -
-

Note: إذا كنت تواجه صعوبة في الحصول على هذا العمل, الق نظرة على المثال الخاص بنا oojs-class-prototype.html  (شاهد ايضا running live ).

-
- -

نادرا ما ستشاهد خصائص معرفة في الخاصية prototype، على سبيل المثال يمكن إضافة خاصية جديدة كالتالي:

- -
Person.prototype.fullName = 'Bob Smith';
- -

ولكن هذه ليست مرنة جداً، حيث ان ال person لا يمكنه استدعاءها، من الافضل القيام بذلك من خلال بناء fullName خارج name.first و name.last:

- -
Person.prototype.fullName = this.name.first + ' ' + this.name.last;
- -

ومع ذالك فهي لن تعمل، في هذه الحالة this ستشير الى النطاق العام (global scope). وليس الى نطاق الدالة (function scope). استدعاء هذه الخاصية سيعود ب undefined undefined. سيعمل هذا بشكل جيد في الوظائف التي عرفناها سابقا في ال prototype لانها توجد داخل ال function scope، والتي ستنقل بنجاح إلى نطاق مثيل الكائن (object instance scope). لذا قد تقوم بتعريف خصائص ثابتة (constant properties — أي تلك التي لا تحتاج للتغيير) في ال prototype، ولكن عموما فهي تعمل بشكل أفضل لتعريف خصائص داخل ال constructor.

- -

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

- -
// Constructor with property definitions
-
-function Test(a,b,c,d) {
-  // property definitions
-};
-
-// First method definition
-
-Test.prototype.x = function () { ... }
-
-// Second method definition
-
-Test.prototype.y = function () { ... }
-
-// etc.
- -

هذا النمط من العمل يمكن ان نراه في Piotr Zalewa's school plan app.

- -

Summary

- -

غطت هذه المادة، جافاسكريبت object prototypes، وكيف يسمح ال prototype object chains للكائنات أن ترث الميزات من بعضها البعض، وكيف يمكن استخدام الخاصية prototype لإضافة وظائف جديدة على ال constructors، وغيرها من الموضوعات ذات الصلة.

- -

في المقال القادم سنرى كيفية تنفيذ الوراثة بين اثنين من الكائنات الخاصة بك.

-
- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}

-- cgit v1.2.3-54-g00ecf