diff options
Diffstat (limited to 'files/ar/conflicting/learn')
4 files changed, 797 insertions, 0 deletions
diff --git a/files/ar/conflicting/learn/css/first_steps/index.html b/files/ar/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..2bfc5c76bb --- /dev/null +++ b/files/ar/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,44 @@ +--- +title: Getting started with CSS +slug: Web/Guide/CSS/Getting_started +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - Needs + - NeedsBeginnerUpdate + - NeedsTranslation + - NeedsUpdate + - TopicStub + - Web +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +<p><span class="seoSummary">This tutorial introduces you to the basic features and language (the syntax) for <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS"><strong>Cascading Style Sheets</strong></a> (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers. </span></p> +<p>The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">lists</a> more advanced resources.</p> +<nav class="fancyTOC"> + <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">What is CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Why use CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">How CSS works</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Cascading and inheritance</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selectors</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Readable CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Text styles</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Color</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Content</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Lists</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tables</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Media</a></nav> +<h2 id="What_you_need_to_get_started">What you need to get started</h2> +<ul> + <li>A text editor</li> + <li>A modern browser</li> + <li>Some experience working with a text editor and browser</li> +</ul> +<p>Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.</p> +<p><strong>Note:</strong> The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.</p> +<h2 id="How_to_use_this_tutorial">How to use this tutorial</h2> +<p>To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.</p> +<h3 id="Part_I_The_Basics_of_CSS">Part I: The Basics of CSS</h3> +<p>On each page, use the <em>Information</em> section to understand how CSS works. Use the <em>Action</em> section to try using CSS on your own computer.</p> +<p>To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.</p> +<p>To understand CSS in more depth, read the information that you find in boxes captioned <em>More details</em>. Use the links there to find reference information about CSS.</p> +<h3 id="Part_II_The_Scope_of_CSS">Part II: The Scope of CSS</h3> +<p>A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.</p> +<ol> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></li> +</ol> diff --git a/files/ar/conflicting/learn/css/index.html b/files/ar/conflicting/learn/css/index.html new file mode 100644 index 0000000000..2bd34295c7 --- /dev/null +++ b/files/ar/conflicting/learn/css/index.html @@ -0,0 +1,24 @@ +--- +title: CSS developer guide +slug: Web/Guide/CSS +tags: + - CSS + - Guide + - Landing + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS +translation_of_original: Web/Guide/CSS +--- +<p>{{draft}}</p> +<p><span class="seoSummary">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML</span> or other markup languages such as SVG<span class="seoSummary">. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media.</span> The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.</p> +<p>CSS is one of the core languages of the open Web and has a standardized <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>.</p> +<p>{{LandingPageListSubpages}}</p> +<h2 id="Pages_elsewhere">Pages elsewhere</h2> +<p>Here are other pages related to CSS that should be linked to from here.</p> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/HTML">CSS</a></li> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web developer reference</a></li> + <li><a href="/en-US/docs/Web/Guide" title="/en-US/docs/Web/Guide">Web developer guide</a></li> +</ul> diff --git a/files/ar/conflicting/learn/getting_started_with_the_web/index.html b/files/ar/conflicting/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..a6cdfdf6cf --- /dev/null +++ b/files/ar/conflicting/learn/getting_started_with_the_web/index.html @@ -0,0 +1,305 @@ +--- +title: إنشاء صفحة HTML بسيطة +slug: Learn/HTML/بسيطة_HTML_إنشاء_صفحة +tags: + - البداية +translation_of: Learn/Getting_started_with_the_web +translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML +--- +<div class="summary"> +<p>فى هذا المقال سوف تتعلم كيق تنشئ صفحة ويب بسيطة باستخدام {{Glossary("HTML")}}</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">المتطلبات الأساسية:</th> + <td>يجب ان يكون لديك <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">محرر نصوص</a> و أن تعلم كيف <a href="/en-US/docs/Learn/Open_a_file_in_a_browser">كيف تفتح ملف فى متصفح</a>.</td> + </tr> + <tr> + <th scope="row">الهدف:</th> + <td>إنشاء صفحة ويب يمكنك عرضها باستخدام متصفحك.</td> + </tr> + </tbody> +</table> + +<h2 id="الملخص">الملخص</h2> + +<p>أن أبسط صفحة ويب هى فقط ملف {{Glossary("HTML")}} . فقط ملف HTML صحيح واحد موجود على حاسبك و متصفح ويب هى كل ما تحتاجه. سوف نرى كبف كيف يمكن استخدام HTML {{Glossary("Tag","tags")}} و سوف تكون فادر على عرض الصفحة التى أنشأتها فى متصفحك.</p> + +<h2 id="التعلم_النشط">التعلم النشط</h2> + +<p>أول شئ؛ تأكد أنه يوجد لديك محرر نصوص تجيد استخدامه و متصفح ويب. على الأغلب أى محرر نصوص سوف يكون كافى؛ على سبيل المثال Notepad فى Windows أو TextEdit فى Mac ؛ ولكن تأكد أنك ستنشئ ملفات نصوص بسيطة (حروف فقط بدون تنسيق). إذا كنت تستخدم TextEdit فى Mac يمكنك اختيار "Make Plain Text" من قائمة "Format".</p> + +<h3 id="الخطوة_الأولى_ملف">الخطوة الأولى: ملف</h3> + +<p>صفحة الويب الواحدة تتكون (على الأقل) من ملف HTML ؛ لذلك سنبدأ بإنشاء واحد. قم بفتح محرر النصوص و قم بإنشاء ملف نصى ؛ ثم اكتب شئ مثل هذا:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Hi there</title> +</head> +<body> + This is a page + a simple page +</body> +</html></pre> + +<p>يمكنك تعديل هذا كما تشاء؛ أنت حر فى أن تضيف أو تغير النص بين وسمى <title></title> و <body></body>. تأكد أن تعطى الملف اسم ينتهى بالإضافة ".html" . على سبيل المثال يمكنك تسميتها "my_page.html".</p> + +<p>الآن لديك ملف على حاسبك ؛ من الممكن أن يكون شكله يشبه هذا (هذا يتوقف على نظام التشغيل الذى تستخدمه) :</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8383/Capture%20du%202014-08-20%2021:20:25.png" style="height: 72px; width: 365px;"></p> + +<p>إذا قمت فقط بالضغط مرتين على هذا الملف سوف يُفتح فى متصفحك. إذا أردت فتحه فى محرر النصوص لتعديله قم بالضغط عليه بزر الفأرة الأيمن و اختر فتح الملف فى محرر النصوص. (أو قم بسحبه و إفلاته فى المحرر؛ أو قم بفتح الملف باختيار "open" من قائمة "File" فى المحرر.) ,حسب محررك الملف سوف يبدو مثل هذا:</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8385/Capture%20du%202014-08-20%2021:24:06.png" style="height: 180px; width: 311px;"></p> + +<h3 id="الخطوة_الثانية_متصفح_ويب">الخطوة الثانية: متصفح ويب</h3> + +<p>داخل متصفح الملفات الخاص بك(مثل Explorer فى Windows؛ أو Finder فى Mac أو Files فى Ubuntu)، اعثر على الملف الذى أنشأته و قم بفتحه فى متصفحك (بالضغط عليه مرتين؛ أو سحبه و إفلاته على أيقونة المتصفح) الآن المتصفح يعرض النص من ملف HTML الذى أنشأته والتبويب يعرض عنوان الصفحة. هذا يجب أن يشبه هذا؛ حسب نظام تشغيلك و متصفحك:</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8387/Capture%20du%202014-08-20%2021:28:22.png" style="border-style: solid; border-width: 1px; height: 111px; width: 513px;"></p> + +<p>يمكنك أن ترى محتوى جسم الصفحة (بين وسمى <body></body>)؛ و العنوان الذى اخترته (بين وسمى <title></title>) يظهر فى التبويب ولكن لا يوجد فاصل بين سطرى النص. شئ مثير للاهتمام.</p> + +<h3 id="الخطوة_الثالثة_التجربة_والتعلم">الخطوة الثالثة: التجربة والتعلم</h3> + +<p>جرب أن تحذف بعض أجزاء ملف HTML وشاهد ما يحدث. بعض الأخطاء لن تؤثر كثيرًا والصفحة ستظل قابلة للعرض فى المتصفح، البعض الاَخر سوف يسبب مشاكل واضحة للنتائج. هذا يحدث لأن المتصفحات تحاول أن تعوض عن بعض الأخطاء الشائعة.</p> + +<p> </p> + +<p>لشيء الذي يجب أن تلاحظه هو أن الشيء الوحيد الذي تراه معروضًا على الشاشة هو النص الذي ليس داخل أقواس الزاوية (والمعروف باسم الرموز الأكبر من وأقل من الرموز ، ولكننا نسميها أقواس معقوفة عند الحديث عن HTML). كل شيء داخل الأقواس الزاوية هو {{Glossary ("tag")}} ، والذي يمثل البنية أو الهيكل العظمي لصفحة الويب الخاصة بك. يظهر كل المحتوى المعروض بين العلامات.</p> + +<p>تحتوي صفحة HTML الخاصة بنا كمثال على قسمين رئيسيين: رأس ، ومضمون في كتلة {{HTMLElement ("head")}} ، وهيئة ، موجودة داخل {{HTMLElement ("body")}}. يحتوي النص على النص المعروض داخل الصفحة.</p> + +<p>لكل علامة معنى محدد ويجب استخدامها وفقًا لذلك ؛ على سبيل المثال ، يتم استخدام {{HTMLElement ("title")}} للإشارة إلى عنوان الصفحة ، والذي قد يختلف عن اسم الملف. لاحظ أيضًا أن العلامات يمكن أن تحدث داخل محتوى علامات أخرى. يتم تضمين {{HTMLElement ("title")}} داخل {@ HTMLElement ("head")}} ، على سبيل المثال.</p> + +<p>إذا كنت تريد إضافة شيء ما مثل صورة إلى صفحتك ، فستحتاج إلى إضافة علامة للصورة والصورة نفسها. فمثلا:</p> + +<p> </p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Hi there</title> +</head> +<body> + This is a page + a simple page + <img src="unicorn_pic.png" alt="Unicorn picture :)" /> + now with a unicorn +</body> +</html></pre> + +<p>عدّل ملفك ليتضمن علامة {{HTMLElement ("img")}} ، على النحو التالي:</p> + +<pre class="brush: html"><img src="unicorn_pic.png" alt="Unicorn picture :)" /></pre> + +<p> </p> + +<p>يمكن أن تذهب إلى أي مكان داخل {{HTMLElement ("body")}}. لا تنس حفظ الصفحة التي تم تغييرها!</p> + +<p>ثم ضع ملفًا باسم "unicorn_pic.png" في المجلد نفسه كملف HTML. عند تحديث نافذة المتصفح (أو إعادة فتح ملف HTML في متصفحك) ، يجب أن تشاهد المحتوى الذي تم تغييره ، مع استكمال يونيكورن! (لا تنس حفظ صفحتك).</p> + +<p> </p> + +<p><img alt="Original file for the unicorn image" src="https://mdn.mozillademos.org/files/8495/unicorn_pic.png" style="height: 300px; width: 242px;"></p> + +<div class="note"> +<p><strong>ملاحظة: يمكنك الحصول على نسخة من صورة يونيكورن لاستخدامها في تجاربك عن طريق النقر بزر الماوس الأيمن فوق الصورة واختيار خيار "حفظ الصورة باسم ..." من القائمة التي تظهر.</strong></p> +</div> + +<p>The files needed for this page to work now look something like this in your desktop:</p> + +<p><img alt="Screenshot of the explorer with 2 files : a html file and a picture file" src="https://mdn.mozillademos.org/files/8389/Capture%20du%202014-08-20%2021:37:14.png" style="height: 69px; width: 405px;"></p> + +<p>تبدو الملفات المطلوبة لهذه الصفحة الآن تبدو كشيء من هذا القبيل في سطح المكتب الخاص بك:</p> + +<p><img alt="Screenshot for the example with a picture" src="https://mdn.mozillademos.org/files/8499/Capture%20du%202014-09-04%2021:39:16.png" style="border-style: solid; border-width: 1px; height: 404px; width: 664px;"></p> + +<p> </p> + +<p>ربما لاحظت أن علامة {{HTMLElement ("img")}} تحتوي على {{Glossary ("attribute"، "attributes")}} التي توفر معلومات إضافية مطلوبة لبناء الكائن المطلوب ، وفي هذه الحالة ، اسم الملف الصورة التي سيتم عرضها والنص البديل الذي سيتم عرضه عندما يتعذر تحميل الصورة.</p> + +<p>هذا مثال على كيفية إضافة صورة إلى صفحتك ، ولكن يمكنك استخدام تقنيات مشابهة لإضافة الموسيقى ومقاطع الفيديو والمزيد ، وكل ذلك باستخدام لا شيء أكثر من HTML.<br> + </p> + +<p> </p> + +<p>الغوص أعمق<br> + هذه ليست صفحة ويب جميلة جدا<br> + كما قد تكون لاحظت ، هذه الصفحة ليست معجزة بالتصميم والجمال. وذلك لأن HTML تدور حول المحتوى وما يعنيه المحتوى (من حيث السياق والعلاقات بين كتل المحتوى) ، بدلاً من التصميم.</p> + +<p>يمكّنك {{Glossary ("CSS")}} من جعل المحتوى يتألق ، وذلك بإضافة التخطيط واللون والخطوط وما إلى ذلك. إن HTML الخالص جيد بما يكفي لصنع صفحات ويب بسيطة ، لكن الصفحات الأكثر تعقيدًا (أو حتى الصفحات البسيطة ذات التصميمات الجذابة) تحتاج عادة إلى CSS وربما {{Glossary ("JavaScript")}}. ينشئ HTML المحتوى وأنماط CSS للمحتوى وجافا سكريبت يجعل المحتوى ديناميكيًا.</p> + +<p>دعونا نجرب قليلا مع CSS بجعل النص الأساسي للصفحة باللون الأزرق:<br> + alghaws 'aemaq<br> + </p> + +<p> </p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Hi there</title> + <style> + body { + color: blue; + } + </style> +</head> + <body> + <p>This is a some blue text</p> + <img src="unicorn_pic.png" alt="Unicorn picture :)" /> + </body> +</html></pre> + +<p> </p> + +<p>لاحظ إضافة عنصر {{HTMLElement ("style")}} إلى الصفحة {{HTMLElement ("head")}}. هذا يحدد CSS لتطبيقه على النص الأساسي.</p> + +<p>تريد أن يتم تسطير النص؟ حاول إضافة "زخرفة النص: تسطير ؛" حكم على أسلوبك:</p> + +<p> </p> + +<pre class="brush: css">body { + color: blue; + text-decoration: underline; +}</pre> + +<p>تريد أن يكون النص بحجم محدد؟ جرب إضافة "font-size: 42px؛" مثله:</p> + +<pre class="brush: css">body { + color: blue; + text-decoration: underline; + font-size: 42px; +}</pre> + +<p>والنهاية ستكون هكذا:</p> + +<pre class="brush: html"><html> +<head> + <title>Hi there</title> + <style> + body { + color: blue; + text-decoration: underline; + font-size: 42px; + } + </style> +</head> +<body> + <p>This is a blue underlined big text</p> + <img src="unicorn_pic.png" alt="Unicorn picture :)" /> +</body> +</html></pre> + +<p>وإذا قمت بحفظ الصفحة في المحرر الخاص بك ، ثم قم بتحديث المتصفح ، فيجب أن تبدو الصفحة كما يلي:</p> + +<p><img alt="Screenshot of the browser with the page with some CSS" src="https://mdn.mozillademos.org/files/8497/Capture%20du%202014-09-04%2021:40:18.png" style="border-style: solid; border-width: 1px; height: 494px; width: 743px;"></p> + +<p>ينمو إلى صفحتين<br> + عندما تتصفح الويب ، غالبًا ما تصادفك {{Glossary ("hyperlink" ، "links")}} ، وهي الطريقة الأكثر فائدة للانتقال من صفحة إلى أخرى. نظرًا لأن HTML عبارة عن محتوى وتعتبر الروابط نوعًا من المحتوى ، يمكنك إنشاء روابط بين الصفحات باستخدام HTML فقط.</p> + +<p>الربط بين صفحتين محليتين<br> + في هذا التمرين ، ستحتاج إلى إنشاء ملف HTML ثاني على جهاز الكمبيوتر الخاص بك. سنضيف رابطًا إلى كل صفحة حتى يمكنك التبديل سريعًا ذهابًا وإيابًا فيما بينها.</p> + +<p>في الملف الأول يمكنك الاحتفاظ بنفس البنية العامة كما كان من قبل. المهم هو إضافة علامة جديدة ، {{HTMLElement ("a")}} ، على النحو التالي:</p> + +<p> </p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Page 1 to ground control</title> +</head> +<body> + This is page 1. + <a href="page2.html" title="to page 2">What is going on on page 2?</a> +</body> +</html></pre> + +<p>يجب أن ترتبط الصفحة الثانية بالصفحة الأولى:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Page 2 :)</title> +</head> +<body> + This is a page 2. + <a href="page1.html" title="to page 1"><span>Want to go back to page 1? Click here</span></a> +</body> +</html></pre> + +<div class="note"> +<p><strong>ملاحظة: تأكد من تطابق أسماء الملفات المحددة في سمة href للعلامة {{HTMLElement ("a")} مع أسماء الملفات التي أنشأتها على جهاز الكمبيوتر.</strong></p> +</div> + +<p> </p> + +<p>يمكنك الآن التنقل بين اثنين من مستندات HTML. افتح الصفحة 1 في المستعرض الخاص بك وانقر فوق الارتباط لفتح الصفحة 2 ، والعكس. يمكنك أيضًا اختبار الزر "السابق" في متصفحك. ستعيدك إلى الصفحة الأخيرة التي كنت تبحث عنها.</p> + +<p>يجب أن يكون لمدير الملفات ملفي HTML في نفس المجلد ، على النحو التالي:</p> + +<p><img alt="Screenshot of the file explorer with two HTML documents in one directory/folder" src="https://mdn.mozillademos.org/files/8395/Capture%20du%202014-08-20%2022:06:05.png" style="height: 92px; width: 595px;"></p> + +<p>الصفحة الاولي تشبه هذه:</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8397/Capture%20du%202014-08-20%2022:11:31.png" style="border-style: solid; border-width: 1px; height: 114px; width: 365px;"></p> + +<p>والصفحة الثانية تشبهه هذه بعد الضغط علي link:</p> + +<p><img alt="Screenshot of the 2nd page of the 2 pages example in the browser" src="https://mdn.mozillademos.org/files/8401/Capture%20du%202014-08-20%2022:15:17.png" style="border-style: solid; border-width: 1px; height: 116px; width: 366px;"></p> + +<div class="note"> +<p><textarea></textarea></p> + +<p><textarea>Note: The link back to page 1 is violet because the browser "knows" that we've previously visited the first page.</textarea></p> + +<p><textarea></textarea></p> + +<p>113/5000</p> + +<p>ملاحظة: يعتبر الارتباط مرة أخرى إلى الصفحة رقم 1 هو البنفسجي لأن المتصفح "يعلم" بأننا سبق أن زرنا الصفحة الأولى.</p> + +<p> </p> +</div> + +<p> </p> + +<p>إذا أردت ، يمكنك تجربة ذلك بأكثر من صفحتين ، أو المتابعة إلى القسم التالي للانتقال إلى المستوى التالي.</p> + +<p>الربط بموقع آخر<br> + في هذا التمرين ، سنقوم بإضافة ارتباط إلى ملف HTML بحيث يمكن للقارئ الوصول بسرعة إلى بعض الصفحات المفيدة على الويب. يمكنك الربط بأي شيء متوفر على الويب العام. دعونا نحاول ربط ويكيبيديا:</p> + +<p> </p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>My page</title> +</head> +<body> + One day,...Unicorns are great...See you. + <a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia"><span>Want to go know more about unicorns? Wikipedia is right here</span></a> +</body> +</html></pre> + +<p>يجب أن يبدو هذا أكثر أو أقل مثل هذا في المتصفح:</p> + +<p><img alt="Screenshot of the example page with a link to Wikipedia in the browser" src="https://mdn.mozillademos.org/files/8403/Capture%20du%202014-08-20%2022:22:24.png" style="height: 158px; width: 861px;"></p> + +<p>قم بتحريك مؤشر الماوس فوق الرابط ؛ سترى السمة {{htmlattrxref ("title")}} المعروضة في تلميح أداة تحويم. يمكن استخدام هذا لتوفير مزيد من المعلومات حول الارتباط ، بحيث يمكن للمستخدم اتخاذ قرار مستنير حول ما إذا كان سيتم النقر عليه أم لا.</p> + +<div class="note"> +<p><strong>تذكير: عندما تقوم بتحرير الصفحة ، لا تنس حفظ الملف على المحرر وتحديث الصفحة على متصفحك حتى تتمكن من رؤية التغييرات التي قمت بها.</strong></p> +</div> + +<h2 id="الخطوات_التالية_كيفية_استخدام_علامات_HTML_هناك_الكثير_من_العلامات_في_HTML_؛_لقد_نظرنا_فقط_في_الأساسيات_هنا!_ستجد_المزيد_من_الموارد_حول_ما_هو_ممكن_هنا._تشريح_صفحة_الويب_تحتوي_HTML_على_بعض_القواعد_وقد_تحتوي_الصفحة_على_الكثير_من_المحتوى_؛_يمكن_أن_يساعدك_ذلك_في_فهم_صفحات_أكثر_تعقيدًا_،_مثل_تلك_المستخدمة_في_بعض_المواقع_الأكثر_شيوعًا_على_الويب!_فهم_الروابط_استخدمنا_بعض_الأمثلة_البسيطة_جدًا_مع_الروابط_؛_هذه_المقالة_لك_إذا_كنت_تريد_أن_تعرف_فهم_لماذا_الروابط_هي_أصل_اسم_ويب._يفيد_استخدام_الصور_وإضافة_الصوت_والفيديو_لإضافة_محتوى_متعدد_الوسائط_باستخدام_HTML_بسيط.">الخطوات التالية<br> + كيفية استخدام علامات HTML: هناك الكثير من العلامات في HTML ؛ لقد نظرنا فقط في الأساسيات هنا! ستجد المزيد من الموارد حول ما هو ممكن هنا.<br> + تشريح صفحة الويب: تحتوي HTML على بعض القواعد وقد تحتوي الصفحة على الكثير من المحتوى ؛ يمكن أن يساعدك ذلك في فهم صفحات أكثر تعقيدًا ، مثل تلك المستخدمة في بعض المواقع الأكثر شيوعًا على الويب!<br> + فهم الروابط: استخدمنا بعض الأمثلة البسيطة جدًا مع الروابط ؛ هذه المقالة لك إذا كنت تريد أن تعرف فهم لماذا "الروابط" هي أصل اسم "ويب".<br> + يفيد استخدام الصور وإضافة الصوت والفيديو لإضافة محتوى متعدد الوسائط باستخدام HTML بسيط.</h2> diff --git a/files/ar/conflicting/learn/javascript/objects/index.html b/files/ar/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..65ce0c788a --- /dev/null +++ b/files/ar/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,424 @@ +--- +title: مدخل إلى جافاسكريبت كائنية التوجه +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +tags: + - الأفراد + - البرمجة الكائنية + - التغليف + - الجافاسكريبت + - المتوسط + - المجال + - المشيد + - ب.ك.ت + - كائن +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +<div>{{jsSidebar("Introductory")}}</div> + +<p>كائنية التوجه حتى النخاع، ميزات جافا سكريبت القوية، القدرات المرنة {{Glossary("OOP")}}. يبدأ هذا المقال بمقدمة إلى البرمجة الكائنية التوجه، ثم مراجعات لنموذج كائن جافا سكريبت، و أخيراً يوضح مفاهيم البرمجة الكائنية التوجه في جافا سكريبت. لا يصف هذا المقال البناء اللغوي الجديد <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">للبرمجة الكائنية التوجه في ECMAScript 6</a>.</p> + +<div style="font-size: 15; font-family: 'tahoma';"> +<h2 id="مراجعة_جافا_سكريبت">مراجعة جافا سكريبت</h2> + +<p>إذا كنت لا تشعر بالثقة حول مفاهيم جافا سكريبت مثل المتغيرات والأنواع والوظائف و المجال ، يمكنك ان تقرأ عن هذه المواضيع في <a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">مدخل إلى جافا سكريبت</a>. يمكنك أيضا الاطلاع علي <a href="/en-US/docs/Web/JavaScript/Guide">دليل جافا سكريبت</a>.</p> + +<h2 id="البرمجة_الكائنية_التوجه_(Object-oriented_programming)">البرمجة الكائنية التوجه (Object-oriented programming)</h2> + +<p>إن البرمجة الكائنية (OOP) ما هي إلا نمط برمجي يَستخدم التجريد في إنشاء نماذج/نسخ لتجسيد العالم الحقيقي، وتَستخدم البرمجة الكائنية في ذلك أساليب مُتعدّدة من هذا النمط، فهي تستخدم الوحدات module، وتعدديّة الأشكال polymorphism والتغليف encapsulation، وتجدر الإشارة إلى أن معظم لغات البرمجة تدعم مفهوم OOP أمثال اللغات البرمجية: جافا، بايثون، روبي، وطبعًا جافا سكريبت.</p> + +<p>يُعالج أو لنقل يَتصور مفهوم البرمجة الكائنية OOP البرنامج كتشكيلة من الأشياء/الكائنات المتعاونة/المترابطة بدلًا من يتصوّره كتشكيلة من الدوال (functions) أو كسرد من الأوامر. ففي مفهوم OOP، كل كائن/شيء له القدرة على استقبال الرسائل، ومعالجة البيانات، وإرسال الرسائل إلى باقي الكائنات، ويُمكن اعتبار أنه لكل كائن object كينونة خاصة به ودور/وظيفة مستقلة عن الكائن الآخر.</p> + +<p>تُعزز البرمجة الكائنية القدرة على صيانة الشيفرة البرمجية والمرونة في التطوير، وأثبتت جدارتها على نطاق واسع في هندسة البرمجيات الكبيرة، ولأن البرمجة الكائنية تُشدد على استخدام الوحدات module، فإن الشيفرة/الكود المكتوب بمفهوم البرمجة الكائنية هو أبسط في التطوير وأسهل في الفهم مستقبلًا (عند التنقيح والتعديل)، وكما يعزز مفهوم البرمجة الكائنية التحليل المباشر للشيفرة، وفهم الحالات الشائكة فهمًا أفضل من باقي الأساليب البرمجية الأخرى.</p> + +<h2 id="مصطلحات_البرمجة_الكائنية">مصطلحات البرمجة الكائنية</h2> + +<dl> + <dt dir="ltr"> + <h3 dir="rtl" id="المجال_في_البرمجة_الكائنية_Namespace">المجال في البرمجة الكائنية Namespace</h3> + + <p dir="rtl">ما هو إلا عبارة عن حاوي تسمح للمطوّر بتحزيم جميع الوظائف تحت اسم محدد وفريد.</p> + + <h3 dir="rtl" id="الصنف_أو_الفئة_Class_في_البرمجة_الكائنية">الصنف أو الفئة Class في البرمجة الكائنية</h3> + + <p dir="rtl">يعتني الصنف بكل ما يتعلّق بميزات وخصائص الكائن، والصنف ما هو إلا قالب template تعريفي بخاصيات properties وبطُرق/وظائف methods الكائن object.</p> + + <h3 dir="rtl" id="الكائن_Object_في_البرمجة_الكائنية">الكائن Object في البرمجة الكائنية</h3> + + <p dir="rtl">الكائن ما هو إلا حالة/أمثولة instance من صنف class.</p> + + <h3 dir="rtl" id="الخاصية_property_في_البرمجة_الكائنية">الخاصية property في البرمجة الكائنية</h3> + + <p dir="rtl">ما هي إلا مميزات وخصائص الكائن، كاللون مثلًا.</p> + + <h3 dir="rtl" id="الطريقة_أو_الوظيفة_Method_في_البرمجة_الكائنية">الطريقة أو الوظيفة Method في البرمجة الكائنية</h3> + + <p dir="rtl">تعتني الطريقة أو الوظيفة كما يُسميها البعض بقدرات الكائن، مثل قدرة المشي مثلًا، وهي دور أو وظيفة مرتبطة مع صنف class.</p> + + <h3 dir="rtl" id="المشيد_Constructor_في_البرمجة_الكائنية">المشيد Constructor في البرمجة الكائنية</h3> + + <p dir="rtl">ما هو إلا طريقة method تُستدعى في لحظة استهلال instantiate الكائن، وعادةً ما يكون له نفس اسم الصنف الذي يحتويه.</p> + + <h3 dir="rtl" id="الوراثة_Inheritance_في_البرمجة_الكائنية">الوراثة Inheritance في البرمجة الكائنية</h3> + + <p dir="rtl">يُمكن للصنف أن يرث مميزات من صنف آخر.</p> + + <h3 dir="rtl" id="التغليف_Encapsulation_في_البرمجة_الكائنية">التغليف Encapsulation في البرمجة الكائنية</h3> + + <p dir="rtl">طريقة في تحزيم البيانات data والطُرق methods التي تستخدم البيانات.</p> + + <h3 dir="rtl" id="التجريد_Abstraction_في_البرمجة_الكائنية">التجريد Abstraction في البرمجة الكائنية</h3> + + <p dir="rtl">يجب على الاقتران الحاصل من: الوراثة والطُرق methods والخاصيات properties لكائن معقد وشائك التمثيل برمجيًا أن يعكس الواقع المراد محاكاته في البرمجة الكائنية.</p> + + <h3 dir="rtl" id="تعددية_الأشكال_Polymorphism_في_البرمجة_الكائنية">تعددية الأشكال Polymorphism في البرمجة الكائنية</h3> + + <p dir="rtl">تحمل كلمة Poly بحد ذاتها المعنى "متعدد" وتحمل الكلمة morphism المعنى "أشكال، ويُشير المفهوم ككل إلى أن أكثر من صنف قد يُعرّف نفس الطريقة method أو الخاصية property.</p> + </dt> +</dl> + +<p>للحصول على وصف أكثر شمولية للبرمجة الكائنية التوجه، أنظر {{interwiki("wikipedia", "البرمجة كائنية التوجه")}} على ويكيبيديا.</p> + +<h2 id="البرمجة_المعتمدة_على_النموذج_الأولي_Prototype">البرمجة المعتمدة على النموذج الأولي Prototype</h2> + +<p>البرمجة المعتمدة على النموذج الأوّلي (Prototype-based programming) ما هي إلا نموذج من البرمجة الكائنية OOP ولكنها لا تستخدم الأصناف classes، بل تقوم أولًا بإعداد سلوك أي صنف class ما ومن ثم تُعيد استخدامه، ويُطلق البعض على هذا النموذج: البرمجة بلا أصناف classless، أو البرمجة المَبْدَئِية المنحى prototype-oriented، أو البرمجة المعتمدة على الأمثولة instance-based).</p> + +<p>يعود أصل اللغة المعتمدة على النموذج الأولي إلى لغة <a href="http://en.wikipedia.org/wiki/Self%20(programming%20language" rel="external nofollow noopener noreferrer">Self</a>، والتي طوّرها David Ungar وRandall Smith، ولكن أسلوب البرمجة بدون أصناف class-less توسّع ونال شهرة كبيرة في العقد الأخير، واُعتمد من قبل العديد من اللغات البرمجية أشهرهم جافا سكريبت.</p> + +<p dir="ltr"> </p> + +<h2 id="البرمجة_الكائنية_باستخدام_جافا_سكريبت">البرمجة الكائنية باستخدام جافا سكريبت</h2> + +<h3 id="المجال_Namespace_في_جافا_سكريبت">المجال Namespace في جافا سكريبت</h3> + +<p>المجال هو أشبه بمستوعب/بحاوية (container) تسمح للمطوّر في تحزيم وظائف تحت اسم فريد، أو اسم تطبيق محدد، ففي جافا سكريبت المجال هو مجرد كائن object كأي كائن آخر يحتوي على طُرق methods، وخاصيات properties، وحتى كائنات objects.</p> + +<div class="note"> +<p><strong>ملاحظة هامة</strong>: من المهم جدًا الانتباه إلى أنه في جافا سكريبت، لا يوجد فرق بين الكائنات العادية والمجالات namespaces، وهذا يختلف عن اللغات الكائنية الأخرى، الأمر الذي قد يُربك المبرمجين المبتدئين في جافا سكريبت.</p> +</div> + +<p>إن إنشاء مجال namespace في جافا سكريبت بسيطٌ للغاية، فمن خلال إنشاء كائن عام/مشترك/شامل global، ستصبح جميع المُتغيّرات variables والطرق methods، والدوال functions خاصياتٍ لهذا الكائن، ويٌقلل استخدام المجالات namespaces أيضًا من احتمالية تضارب الأسماء في التطبيق، منذ أن كل كائن من كائنات التطبيق ما هي إلى خاصيات كائن شامل/عام معرّفة على مستوى التطبيق.</p> + +<p>سيُنشئ في الخطوة التالية كائنًا عامًا global وبالاسم <code>MYAPP</code>:</p> + +<pre class="brush: js" dir="rtl">// مجال عالمي +var MYAPP = MYAPP || {};</pre> + +<p>يُظهر المثال السابق، كيف تم التأكّد أولًا فيما إذا كان <code>MYAPP</code> معرفًا (سواء في نفس الملف أو في آخر)، ففي حال الإيجاب سيُستخدم الكائن العام <code>MYAPP</code>، وفي حال عدم تعريفه مُسبقًا سيُنشئ كائنًا خالٍ وبالاسم<code>MYAPP</code> والذي سيغلّف encapsulate الطرق methods والدوال functions والمتغيرات variables والكائنات objects.</p> + +<p>كما يُمكن أيضًا إنشاء مجال فرعي sub-namespaces:</p> + +<pre class="brush: js" dir="rtl">// مجال فرعي +MYAPP.event = {};</pre> + +<p>يوضّح المثال التالي الصيغة المستخدمة في إنشاء مجال namespace وإضافة متغيرات ودوال:</p> + +<pre class="brush: js" dir="rtl">// إنشاء حاوي يدعى MYAPP.commonMethod للوظائف و الخصائص الشائعة +MYAPP.commonMethod = { + regExForName: "", // تعريف تعبير نظامي للتحقق من الإسم + regExForPhone: "", // تعريف تعبير نظامي للهاتف، لا يوجد تحقق من الصحة + validateName: function(name){ + // إفعل شيئا ما بالإسم، يمكنك الوصول إلى المتغير regExForName + // بإستعمال "this.regExForName" + }, + + validatePhoneNo: function(phoneNo){ + // إفعل شيئا ما برقم الهاتف + } +} + +// تعريفات الكائن مع الزظيفة في نفس الوقت +MYAPP.event = { + addListener: function(el, type, fn) { + // بعض الأكواد + }, + removeListener: function(el, type, fn) { + // بعض الأكواد + }, + getEvent: function(e) { + // بعض اﻷكواد + } + + // يمكن إضافة وظائف و خصائص أخرى +} + +// البناء اللغوي لإستعمال وظيفة addListener: +MYAPP.event.addListener("yourel", "type", callback);</pre> + +<h3 id="sect1"> </h3> + +<h3 id="الكائنات_الأساسيةالقياسية_المبنية_داخل_لغة_جافا_سكريبت_(Standard_built-in_objects)">الكائنات الأساسية/القياسية المبنية داخل لغة جافا سكريبت (Standard built-in objects)</h3> + +<p>تتضمن لغة جافا سكريبت العديد من الكائنات في تركيبتها، على سبيل المثال، يوجد كائنات مثل <code>Math</code>،<code>Object</code>، <code>Array</code>، <code>String</code>، ويُظهر المثال التالي كيفيّة استخدام الكائن <code>Math</code> للحصول على رقم عشوائي باستخدام أحد طُرق method هذا الكائن وهي الطريقة ()<code>random</code>.</p> + +<pre class="brush: js" dir="rtl">console.log(Math.random()); +</pre> + +<div class="note"> +<p><strong>ملاحظة</strong>: يَفترض المثال السابق وجميع الأمثلة التالية في المقال وجود دالة function بالاسم()<code>console.log</code> معرّفة تعريفًا عامًا (globally)، مع العلم أن هذه الدالة ليست جزء من اللغة نفسها، ولكنها دالة متوفّرة في العديد من متصفحات الإنترنت لأغراض تشخيص الشيفرة البرمجية debugging.</p> +</div> + +<p>يُمكن العودة إلى <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects" rel="external nofollow noopener noreferrer">مرجع لغة جافا سكريبت: الكائنات الأصلية المعيارية</a> للحصول على قائمة بالكائنات المبينة داخل لغة جافا سكريبت نفسها.</p> + +<p>كل كائن في جافا سكريبت هو حالة/أمثولة instance من الكائن <code>Object</code> ويَرث كافة خاصياته properties وطُرقه methods.</p> + +<h3 id="sect2"> </h3> + +<h3 id="الكائنات_الخاصة_الصنف_(الفئة)">الكائنات الخاصة<br> + <span style='font-family: "Open Sans Light",Helvetica,Arial,sans-serif; font-size: 1.286rem; letter-spacing: -0.014em;'>الصنف (الفئة</span><span style='font-family: "Open Sans Light",Helvetica,Arial,sans-serif; font-size: 1.286rem; letter-spacing: -0.014em;'>)</span></h3> + +<h4 id="لغة_جافا_سكريبت_لغة_من_النوع_prototype-based_ولا_تحتوي_على_العبارة_class_كما_هو_حال_باقي_لغات_البرمجة_الكائنية،_كما_في_روبي_أو_بايثون،_ويُربك_هذا_الأمر_المبرمجين_المعتادين_على_اللغات_التي_تعتمد_على_هذه_العبارة_أو_المفهوم،_وتستخدم_جافا_سكريبت_بدلًا_من_ذلك_الدوال_functions_لمحاكات_مفهوم_الأصناف_classes،_وتعريف_صنف_هو_بسهولة_تعريف_أي_دالّة">لغة جافا سكريبت لغة من النوع prototype-based ولا تحتوي على العبارة <code>class</code> كما هو حال باقي لغات البرمجة الكائنية، كما في روبي أو بايثون، ويُربك هذا الأمر المبرمجين المعتادين على اللغات التي تعتمد على هذه العبارة أو المفهوم، وتستخدم جافا سكريبت بدلًا من ذلك الدوال functions لمحاكات مفهوم الأصناف classes، وتعريف صنف هو بسهولة تعريف أي دالّة:</h4> + +<pre class="brush: js" dir="rtl">var Person = function () {}; +</pre> + +<h4 id="الكائن_(أمثولة_الصنف_class_instance)">الكائن (أمثولة الصنف class instance)</h4> + +<p>يتطلب إنشاء حالة/أمثولة instance جديدة من كائن <code>obj</code> استخدام العبارة <code>new obj</code>، وتعيين النتيجة إلى متغيّر بغرض الوصول إلى فيما بعد.</p> + +<p>عُرّف في الشيفرة السابقة صنف class بالاسم <code>Person</code>، وفي الشيفرة التالية، سيُنشئ حالتين/أمثولتين instances من هذا الصنف، الأولى بالاسم <code>person1</code> والثانية بالاسم <code>person2</code>.</p> + +<pre class="brush: js" dir="rtl">var person1 = new Person(); +var person2 = new Person(); +</pre> + +<div class="note">فضلا أنظر {{jsxref("Object.create()")}} للحصول على وظيفة الإنشاء الجديدة الإضافية التي تنشأ حالة غير مهيأة</div> + +<h4 id="المشيد_The_constructor">المشيد The constructor</h4> + +<p>يُستدعى المُشيّد constructor في لحظة الاستهلال instantiation (اللحظة التي يُنشئ فيها الكائن)، والمُشيّد ما هو إلا طريقة method من طُرق الصنف class، وفي جافا سكريبت تعمل الدالة على تشييد الكائن، ولذلك لا داعي إلى تعريف طريقة method من أجل عميلة التشييد، وكل إجراء مصرّح في الصنف class يُنفّذ في لحظة الاستهلال instantiation.</p> + +<p>يُستخدم المُشيّد في تعيين خاصيات properties الكائن، أو في استدعاء طُرق methods معينة لتحضير الكائن للاستخدام، وأما إضافة طُرق صنف وتعريفها يحدث باستخدام صيغة syntax مختلفة سنتطرّق إليها فيما بعد خلال المقال.</p> + +<p>تُظهر الشيفرة التالية كيف يُسجّل log (يُرسل رسالة نصية إلى طرفية المتصفح console) مُشيّد الصنف<code>Person</code> رسالة نصية حينما يُستهل instantiated.</p> + +<pre class="brush: js" dir="rtl">var Person = function () { + console.log('تم إنشاء حالة'); +}; + +var person1 = new Person(); +var person2 = new Person(); + +</pre> + +<h4 id="الخاصية_The_property_(خاصية_الكائن_object_attribute)">الخاصية The property (خاصية الكائن object attribute)</h4> + +<p>الخاصيات properties ما هي إلا متغيرات محتوات في الصنف class، وكل حالة/أمثولة من الكائن تمتلك هذه الخاصيات، وتُعيّن الخاصيات في دالة مُشيّد الصنف بحيثُ تُنشئ مع كل حالة/أمثولة instance.</p> + +<p>إن الكلمة المفتاحية <code>this</code>، والتي تُشير إلى الكائن الحالي، تسمح للمطوّر بالعمل مع الخاصيات من ضمن الصنف، والوصول (قراءةً وكتابةً) إلى الخاصية property من خارج الصنف يكون من خلال الصيغة<code>InstanceName.Property</code> كما هو الأمر في لغة C++ (سي بلس بلس) وJava والعديد من اللغات الأخرى، ومن داخل الصنف تُستخدم الصيغة <code>this.Property</code> للحصول على قيمة الخاصية أو لتعيين قيمتها.</p> + +<p>في الشيفرة التالية، عُرّفت الخاصية <code>firstName</code> للصنف <code>Person</code> وفي لحظة الاستهلال instantiation:</p> + +<pre class="brush: js" dir="rtl">var Person = function (firstName) { + this.firstName = firstName; + console.log('تم إنشاء حالة من Person'); +}; + +var person1 = new Person('سفيان'); +var person2 = new Person('محمد'); + +// Show the firstName properties of the objects +console.log('الشخص1 هو ' + person1.firstName); // النتيجة ==> "الشخص1 هو سفيان" +console.log('الشخص2 هو ' + person2.firstName); // النتيجة ==> "الشخص2 هو محمد" +</pre> + +<h4 id="الطرق_The_methods">الطرق The methods</h4> + +<p>الطرق methods ما هي إلا دوال (وتُعرّف كما تعرّف الدوال functions)، فيما عدا ذلك فهي تُشبه الخاصيات properties، واستدعاء طريقة method مشابه إلى الوصول إلى خاصيّة ما، ولكن مع إضافة <code>()</code> في نهاية اسم الطريقة، وربما مع مُعطيات arguments، ولتعريف طريقة، تُعيّن دالة إلى خاصيّة مُسمّات من خاصيّة الصنف <code>prototype</code>، ويُمكن فيما بعد استدعاء الطريقة على الكائن بنفس الاسم الذي عُيّن للدالة.</p> + +<p>في الشيفرة التالية، عُرّفت ومن ثم اُستخدِمت الطريقة ()<code>sayHello</code> للصنف <code>Person</code>.</p> + +<pre class="brush: js" dir="rtl">var Person = function (firstName) { + this.firstName = firstName; +}; + +Person.prototype.sayHello = function() { + console.log("مرحبا، أنا " + this.firstName); +}; + +var person1 = new Person("سفيان"); +var person2 = new Person("محمد"); + +// إستدعاء طريقة Person sayHello. +person1.sayHello(); // النتيجة ==>"مرحبا، أنا سفيان" +person2.sayHello(); // النتيجة ==> "مرحبا، أنا محمد" +</pre> + +<p>إن الطُرق methods في جافا سكريبت ما هي إلا دالة كائن عادية مرتبطة مع كائن كخاصية property، وهذا يعني أنه يُمكن استدعاء الطُرق خارج السياق، كما في المثال التالي:</p> + +<pre class="brush: js" dir="rtl">var Person = function (firstName) { + this.firstName = firstName; +}; + +Person.prototype.sayHello = function() { + console.log("مرحبا، أنا " + this.firstName); +}; + +var person1 = new Person("سفيان"); +var person2 = new Person("محمد"); +var helloFunction = person1.sayHello; + +// النتيجة ==> "مرحبا، أنا سفيان" +person1.sayHello(); + +// النتيجة ==> "مرحبا، أنا محمد" +person2.sayHello(); + +// النتيجة ==> "مرحبا، أنا undefined" (أو أخطاء +// TypeError في الوضع الصارم) +helloFunction(); + +// النتيجة ==> true +console.log(helloFunction === person1.sayHello); + +// النتيجة ==> true +console.log(helloFunction === Person.prototype.sayHello); + +// النتيجة ==> "مرحبا، أنا سفيان" +helloFunction.call(person1);</pre> + +<p>كما يُظهر المثال السابق، جميع الإحالات المستخدمة في استدعاء الدالة <code>sayHello</code> تُشير إلى <strong><em>نفس الدالة</em></strong>سواءً الاستدعاء الحاصل مع <code>person1</code> أو <code>Person.prototype</code> أو حتى في المتغيّر <code>helloFunction</code>وقيمة <code>this</code> خلال استدعاء الدالة يعتمد على الكيفية التي تُستدعى فيها، حيث تُشير الكلمة المفتاحية<code>this</code> إلى الكائن الحالي الذي تُستدعى عليه الطريقة method، بمعنى عندما تم استدعاء الطريقة()<code>sayHello </code>على الكائن <code>person1</code> فإن <code>this</code> تُشير إلى الكائن <code>person1</code>، وعند استدعاء <code>sayHello</code>على الكائن <code>person2</code> فإن <code>this</code> تُشير إلى الكائن <code>person2</code>، ولكن إن تم الاستدعاء بطريقة مختلفة، فإن<code>this</code> ستُعيّن تعينًا مختلفًا، فاستدعاء <code>this</code> من المتغيّر (كما في ()<code>helloFunction</code>) سيُعيّن <code>this</code> إلى الكائن العام global (والذي سيكون window في متصفح الإنترنت)، ومنذ أن هذا الكائن (على الأغلب) لا يملك الخاصّيّة <code>firstName</code>، ستكون النتيجة كما هو الحال في المثال السابق “Hello, I’m undefined”، كما يمكن دائمًا تعيين <code>this</code> صراحةً باستخدام <code>Function#call</code> (أو <code>Function#apply</code>) وهو كما كان في نهاية المثال.</p> + +<div class="note"><strong>ملاحظة:</strong> أنظر المزيد حول <code>this</code> على <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">call</a> و <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">apply</a></div> + +<h4 id="الوراثة">الوراثة</h4> + +<p>تُستخدم الوراثة في جافا سكريبت في إنشاء صنف class كمثيل مخصص لصنف أو أكثر (<strong><em>تدعم جافا سكريبت وراثة وحيدة فقط single inheritance</em></strong>)، ويُطلق على الصنف المخصص عادةً <strong><em>ابن</em></strong> (child)، ويطلق على الصنف الآخر عادةً <strong><em>الأب</em></strong> (parent)، وفي جافا سكريبت يتمّ ذلك من خلال إسناد حالة/أمثولة من الصنف الأب إلى الصنف الابن، ومن ثم تخصيصه، وفي متصفحات الإنترنت الحديثة يُمكن استخدام<code>Object.create</code> في تحقيق الوراثة inheritance أيضًا.</p> + +<div class="note" dir="ltr"> +<p dir="rtl"><strong>ملاحظة</strong>: لا تتفقد جافا سكريبت مُشيّد صنف الابن <code>prototype.constructor</code> (راجع<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype" rel="external nofollow noopener noreferrer"><code>Object.prototype</code></a>)، وعليه يجب التصريح عن ذلك يدويًا، لمزيد من التفصيل راجع السؤال التالي على<a href="http://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor" rel="external nofollow noopener noreferrer">Stackoverflow</a>.</p> +</div> + +<p>عُرّف في الشيفرة التالية الصنف <code>Student</code> كصنف ابن للصنف <code>Person</code>، ومن ثم أُعيد تعريف الطريقة()<code>sayHello</code> وأُضيفت الطريقة ()<code>sayGoodBye</code> علاوة على ذلك.</p> + +<pre class="brush: js" dir="rtl">// تعريف المشيد Person +var Person = function(firstName) { + this.firstName = firstName; +}; + +// إضافة زوج من الطرق إلى Person.prototype +Person.prototype.walk = function(){ + console.log("أنا أتمشى!"); +}; + +Person.prototype.sayHello = function(){ + console.log("مرحبا، أنا " + this.firstName); +}; + +// تعريف مشيد Student +function Student(firstName, subject) { + // إستدعاء المشيد اﻷب, التأكد (عن طريق الإستدعاء) + // من أن "this" وضعت بشكل صحيح أثناء اﻹستدعاء + Person.call(this, firstName); + + // تهيئة خصائص الطالب المحددة + this.subject = subject; +} + +// إنشاء كائن Student.prototype الذي يرث من Person.prototype. +// ملاحظة: خطأ شائع أن يستعمل "new Person()" ﻹنشاء +// Student.prototype. هذا غير صحيح لعدة أسباب، +// ليس أقل أننا ليس لدينا أي شيء ﻹعطاء Person إلى المعامل "firstName". +// الطريقة الصحيحة ﻹستدعاء Person هي في الأعلى حيث +// إستدعيناه من Student. +Student.prototype = Object.create(Person.prototype); // See note below + +// وضع الخاصية "constructor" للإشارة إلى Student +Student.prototype.constructor = Student; + +// إستبدال الطريقة "sayHello" +Student.prototype.sayHello = function(){ + console.log("مرحبا، أنا " + this.firstName + ". أنا أدرس " + + this.subject + "."); +}; + +// إضافة الطريقة "sayGoodBye" +Student.prototype.sayGoodBye = function(){ + console.log("وداعا!"); +}; + +// إستعمال المثال: +var student1 = new Student("سفيان", "المناجم"); +student1.sayHello(); // "مرحبا، أنا سفيان. أنا أدرس المناجم." +student1.walk(); // "أنا أتمشى!" +student1.sayGoodBye(); // "وداعا!" + +// التحقق من أن instanceof يعمل بشكل صحيح +console.log(student1 instanceof Person); // true +console.log(student1 instanceof Student); // true +</pre> + +<p>فيما يخص السطر ;(<code>Student.prototype = Object.create(Person.prototype</code> في الإصدارات القديمة من جافا سكريبت والتي لا تدعم <code>Object.create</code> يمكن إما استخدام بعض الحيل في خداع المتصفحات –هذه الخدع معروفة إما بالاسم polyfill أو shim—أو استخدام دالة تحقق نفس النتيجة كما في المثال التالي:</p> + +<pre class="brush: js" dir="rtl">function createObject(proto) { + function ctor() { } + ctor.prototype = proto; + return new ctor(); +} + +// الإستعمال: +Student.prototype = createObject(Person.prototype); +</pre> + +<div class="note"><strong>ملاحظة:</strong> أنظر <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> للمزيد من المعلومات حول ما يقوم به, و الرقاقات للمحركات القديمة.</div> + +<p>التأكّد من أن <code>this</code> تُشير إلى الكائن المطلوب بغض النظر عن كيف للكائن أن يُستهل يمكن أن يكون صعبًا، ومع ذلك يوجد صياغة أبسط من شأنها أن تسهّل الأمر.</p> + +<pre class="brush: js" dir="rtl">var Person = function(firstName) { + if (this instanceof Person) { + this.firstName = firstName; + } else { + return new Person(firstName); + } +} +</pre> + +<h4 id="التغليف_Encapsulation">التغليف Encapsulation</h4> + +<p>ليس بالضرورة أن يعلم الصنف <code>Student</code> كيف تمّ تنفيذ/تعريف الطريقة ()<code>walk</code> للصنف <code>Person</code> لكي يستطيع استخدام تلك الطريقة، ولا يحتاج الصنف <code>Student</code> إلى تعريف تلك الطريقة صراحةً إلا إذا كان المطلوب التعديل عليها، ويُطلق على هذا الإجراء مفهوم التغليف encapsulation، والذي فيه يَحزم كل صنف البيانات والطُرق methods داخل وحدة/كينونة وحيدة.</p> + +<p>إخفاء المعلومات سمة شائعة في باقي اللغات البرمجية وعادةً ما توجد كخاصيات/كطُرق إما بالاسم<code>private</code> أو <code>protected</code>، وعلى الرغم من أنه يُمكن مماثلة/محاكاة ذات الأمر في جافا سكريبت، إلا أن هذا الأمر ليس مطلبًا من متطلبات البرمجة الكائنية.</p> + +<h4 id="التجريد_Abstraction">التجريد Abstraction</h4> + +<p>التجرير ما هو إلا ميكانيكية تسمح للمطوّر في تجسيد جانب من المشكلة التي يُعمل عليها، إما من خلال الوراثة inheritance (التخصيص specialization) أو التركيب composition، وتُحقق جافا سكريبت التخصيص من خلال الوراثة، والتركيب من خلال السماح لحالات/أمثولات الصنف لتكون قيمًا لخاصيات attributes الكائنات الأخرى.</p> + +<p>الصنف Function في جافا سكريبت يرث من الصنف <code>Object</code> (وهذا يوضّح التخصيص في هذا النموذج) والخاصية <code>Function.prototype</code> ما هي إلا حالة/أمثولة من الصنف <code>Object</code> (وهذا يوضّح جزئية التركيب composition).</p> + +<pre class="brush: js" dir="rtl">var foo = function () {}; + +// النتيجة ==> "foo عبارة عن وظيفة: true" +console.log('foo عبارة عن وظيفة: ' + (foo instanceof Function)); + +// النتيجة ==> "foo.prototype عبارة عن كائن: true" +console.log('foo.prototype عبارة عن كائن: ' + (foo.prototype instanceof Object));</pre> + +<h4 id="تعددية_الأشكال_Polymorphism">تعددية الأشكال Polymorphism</h4> + +<p>كما أن جميع الطُرق methods والخاصيات properties معرّفة ضمن الخاصية prototype، فيُمكن لبقية الأصناف أن تُعرِّف طُرقًا methods بنفس الاسم، وستكون الطُرق في نطاق الصنف الذي عُرفت به، إلا إذا كان الصنفان على علاقة من نوع أب وابن parent-child، بمعنى آخر أحد الصنفان يرث من الآخر<br> + <br> + هذه المقالة تُرجمة الي العربية بواسطة : <a href="https://academy.hsoub.com/profile/12-%D9%85%D8%AD%D9%85%D8%AF-%D8%A3%D8%A8%D8%B1%D8%B5/" id="ips_uid_2904_3" title="الذّهاب إلى الملف الشّخصي لعضو : محمد أبرص">محمد أبرص</a></p> + +<h2 id="ملاحظات">ملاحظات</h2> + +<p>هذه ليست الطرق الوحيدة التي يمكنك من خلالها تنفيذ البرمجة الشيئية في جافا سكريبت ، والتي تعد مرنة للغاية في هذا الصدد. وبالمثل ، فإن التقنيات الموضحة هنا لا تستخدم أي لغة خارقة ، ولا تحاكي تطبيقات اللغات الأخرى لنظرية الكائن.</p> + +<p>هناك تقنيات أخرى تجعل البرمجة الكائنية التوجه أكثر تقدما لكنها خارج نطاق الهذه المقالة التمهيدية.</p> +</div> + +<h2 id="المراجع">المراجع</h2> + +<ol> + <li><a href="https://ar.wikipedia.org/wiki/Object-oriented_programming" id="cite-1">ويكيبيديا - البرمجة الكائنية التوجه</a></li> + <li><a href="https://en.wikipedia.org/wiki/Prototype-based_programming" id="cite-2">ويكيبيديا - البرمجة القائمة على النوذج</a></li> + <li><a href="http://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29" id="cite-3">ويكيبيديا - التغليف (البرمجة الكائنية التوجه</a><a href="http://ar.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29">)</a></li> +</ol> + +<h2 id="أنظر_أيضا">أنظر أيضا</h2> + +<ul> + <li dir="ltr">{{jsxref("Function.prototype.call()")}}</li> + <li dir="ltr">{{jsxref("Function.prototype.apply()")}}</li> + <li dir="ltr">{{jsxref("Object.create()")}}</li> + <li dir="ltr"><a dir="rtl" href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">الوضع الصارم</a></li> +</ul> |