diff options
Diffstat (limited to 'files/ar/learn')
42 files changed, 7847 insertions, 0 deletions
diff --git a/files/ar/learn/accessibility/index.html b/files/ar/learn/accessibility/index.html new file mode 100644 index 0000000000..3a4577ebb0 --- /dev/null +++ b/files/ar/learn/accessibility/index.html @@ -0,0 +1,53 @@ +--- +title: الإتاحة +slug: Learn/Accessibility +tags: + - الإتاحة + - تعليم + - صفحة هبوط + - مبتدئين +translation_of: Learn/Accessibility +--- +<div>{{LearnSidebar}}</div> + +<p class="summary" dir="rtl">من المفيد تعلم لغة ترميز النص الفائق، صفحات الأنماط الانسيابية، والجافاسكربت إن كنت تريد أن تصبح مطوراً، ولكن معرفتك يجب أن تكون أبعد من استخدام تلك التقنيات وحسب، فعليك استخدامها أيضاً بمسؤوليّة؛ حتّى تتمكن من زيادة مستخدمين موقعك و عدم حرمان أياً على استخدامه. عليك التقيّد بالممارسات الفُضلى (المشروحة في دورات لغة ترميز النص الفائق، صفحات الأنماط الانسيابية، والجافاسكربت)، <a href="/ar/docs/Learn/Tools_and_testing/Cross_browser_testing">القيام باختبار الموقع على عدة متصفحات</a>، ووضع <a href="/ar/docs/Web/Accessibility">الإتاحة</a> بعين الاعتبار منذ بداية تطوير الموقع. سنغطي في هذه المقالة موضوع الإتاحة بالتفصيل.</p> + +<h2 dir="rtl" id="المتطلبات">المتطلبات</h2> + +<p dir="rtl">لتحقيق أقصى استفادة من هذه الوحدة، يجب عليك، إما دراسة الوحدتين الأولى - على الأقل - من <a href="/ar/docs/Learn/HTML">لغة ترميز النص الفائق</a>، <a href="/ar/docs/Learn/CSS">صفحات الأنماط الانسيابية</a>، و<a href="/ar/docs/Learn/JavaScript">الجافاسكربت</a>، أو، وهذا أفضل، دراسة أجزاء الإتاحة المُتعلقة بالتقنيّة التي تدرسها.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: إن كنت تعمل على حاسوب/جهاز لوحي/شيء آخر، ولا تملك القدرة على إنشاء ملفات، يمكنك تجربة (معظم) الأمثلة هنا باستخدام محرر شيفرات برمجيّة على الأنترنت مثل <a class="external external-icon" href="http://jsbin.com/" rel="noopener">JSBin</a> أو <a class="external external-icon" href="https://thimble.mozilla.org/" rel="noopener">Thimble</a>.</p> +</div> + +<h2 dir="rtl" id="دروس_إرشاديّة">دروس إرشاديّة</h2> + +<dl> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/Accessibility/What_is_accessibility" rel="nofollow">ما هي الإتاحة؟</a></dt> + <dd dir="rtl">تُمثِل هذه المقالة بداية للوحدة، بحيث تعطيك لمحة عن ماهيّة الإتاحة، فهي تتضمن معلومات عن مجموعة الأشخاص الذين يشملهم هذا المصطلح ولماذا، الأدوات المُختلفة التي تُستخدَم للتعامل مع الويب، وكيف يمكننا جعل الإتاحة جزءً لا يتجزأ من عمليّة تطوير الويب.</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/Accessibility/HTML" rel="nofollow">أساسيات مهمة في لغة ترميز النص الفائق للعمل مع الإتاحة</a></dt> + <dd dir="rtl">يمكن جعل جزء كبير من محتوى الويب مُتاحاً؛ عبر التأكُّد من استخدام عناصر لغة ترميز النص الفائق الصحيحة في أماكنها الصحيحة وبالوقت المناسب. هذه المقالة تتعمق بالتفصيل في كيفيّة استخدام هذه اللغة لضمان الاستفادة بالحد الأقصى من الإتاحة.</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/Accessibility/CSS_and_JavaScript" rel="nofollow">أفضل الطرق لاستخدام صفحات الأنماط الانسيابية والجافاسكربت لإتاحة أفضل</a></dt> + <dd dir="rtl">يُمكِّن أيضاً الاستخدام الصحيح لهاتين اللغتين توفير تجربة ويب أفضل، أو يمكن أن يجعلها أسوء إذا أُسيءَ استخدام هاتِه اللغات. تُعَنوِن هذه المقالة بعض استخدامات صفحات الأنماط الانسيابية والجافاسكربت الفضلى التي يجب اخذها بعين الاعتبار لضمان جعل المحتوى المُعقَد مُتاحاً قدر الإمكان.</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/Accessibility/WAI-ARIA_basics" rel="nofollow">أساسيات تقنيّة WAI-ARIA</a></dt> + <dd dir="rtl">إكمالاً للمقالة السابقة، من الصعب في بعض الأحيان إنشاء عناصر تحكم رسوميّة تستخدم عناصر من لغة ترميز النص الفائق غير دلاليّة (أي وظيفتها غير واضحة من اسمها، مما يجعل تذكر العنصر وفهمه أصعب - unsemantic) ومحتوى جافاسكربت مُحدَث تلقائياً. يمكن لهذه التقنيّة المساعدة في حل هذه المشكلات عبر إضافة المزيد من العناصر الدلاليّة (semantic) التي يُمكِن للمتصفحات التعرُّف عليها واستخدامها لجعل المستخدمين يفهمون الأمور بشكل أوضح. سنشرح في هذه المقالة كيفيّة استخدام هذه التقنيّة لتحسين التجربة الإتاحيّة.</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/Accessibility/Multimedia" rel="nofollow">الوسائط المُتاحة</a></dt> + <dd dir="rtl">هناك فئة أخرى من المحتوى تُحدِث مشاكل إتاحيّة وهي الوسائط المتعددة (multimedia) - محتوى الفيديو، الصوت، والصورة يجب أن يُعطى نصاً بديلاً يشرحه؛ كي تتمكن التقنيات المعاونة (المساعدة - assistive) ومستخدميها من فهم المحتوى. تشرح هذه المقالة كيفيّة القيام بذلك.</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/Accessibility/Mobile" rel="nofollow">الإتاحة الخلويّة</a> (Mobile Accessibility)</dt> + <dd dir="rtl">نظراً لشيوع الوصول إلى محتوى الويب عبر الهواتف، ولامتلاك منصات الهواتف الشهيرة، مثل iOS والأندرويد، على أدوات لهذا الغرض، أصبح من المهم الاهتمام بإتاحة محتواك على هذه المنصات. تتعمق هذه المقالة في الاعتبارات التي يجب أن تؤخذ عند إتاحة محتوى الويب للهواتف.</dd> +</dl> + +<h2 dir="rtl" id="اختبارات">اختبارات</h2> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/Accessibility/Accessibility_troubleshooting">معالجة الأخطاء الإتاحيّة</a></dt> + <dd dir="rtl">في هذا الإختبار من الوحدة، قدمنا لك موقع بسيطة يحتوي على عدد من الأخطاء الإتاحيّة التي عليك استكشافها وإصلاحها.</dd> +</dl> + +<h2 dir="rtl" id="انظر_أيضاً">انظر أيضاً</h2> + +<ul dir="rtl"> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">أبدا من اليوم ببناء تطبيقات ويب مُتاحة</a>، سلسلة فيديوهات ممتازة مقدمة من قبل<span class="short_text" id="result_box" lang="ar"><span> مارسي ساتون</span></span> (Marcy Sutton).</li> + <li><a href="https://dequeuniversity.com/resources/">مصادر جامعة دوكي</a> (Deque)، تتضمن أمثلة برمجيّة، مراجع لقارئات شاشة (screen reader)، ومصادر أخرى مفيدة.</li> + <li><a href="http://webaim.org/resources/">مصادر من موقع WebAIM</a>، تتضمن دروس إرشاديّة، قوائم، أدوات، وأمور أخرى مفيدة.</li> +</ul> diff --git a/files/ar/learn/accessibility/what_is_accessibility/index.html b/files/ar/learn/accessibility/what_is_accessibility/index.html new file mode 100644 index 0000000000..338c3dd9e8 --- /dev/null +++ b/files/ar/learn/accessibility/what_is_accessibility/index.html @@ -0,0 +1,206 @@ +--- +title: ما هي الإتاحة؟ +slug: Learn/Accessibility/What_is_accessibility +tags: + - أدوات + - إتاحة + - مبتدئين + - مستخدمين +translation_of: Learn/Accessibility/What_is_accessibility +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div> + +<p class="summary" dir="rtl">تُمثِل هذه المقالة بداية للوحدة، بحيث تعطيك لمحة عن ماهيّة الإتاحة (accessibility)، فهي تتضمن معلومات عن مجموعة الأشخاص الذين يشملهم هذا المصطلح ولماذا، الأدوات المُختلفة التي تُستخدَم للتعامل مع الويب، وكيف يمكننا جعل الإتاحة جزءً لا يتجزأ من عمليّة تطوير الويب.</p> + +<table class="learn-box standard-table" dir="rtl"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات:</th> + <td> + <p dir="rtl">معرفة بسيطة بالحاسوب، وفهم بسيط <a href="/ar/docs/Web/HTML">للغة ترميز النص الفائق</a> و<a href="/ar/docs/Web/CSS">صفحات الأنماط الانسيابية</a>.</p> + </td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف:</th> + <td> + <p dir="rtl">حصول القارئ على معرفة حول الإتاحة، ما هي، وكيف تؤثر عليك كمطور مواقع.</p> + </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="ما_هي_الإتاحة؟">ما هي الإتاحة؟</h2> + +<p dir="rtl">هي عمليّة جعل المواقع قابلة للاستخدام لأكبر قدر ممكن من الأشخاص. يُعتقَد عادةً أنَّها تتعلق بالأشخاص ذوي الإعاقات وحسب، ولكنها بالحقيقة تشمل أيضاً جماعة الأشخاص الذين يستخدمون الهواتف، أو الذين يملكون صبيب ضعيف من الإنترنت.</p> + +<p dir="rtl">يمكنك أيضاً النظر للإتاحة على أنَّها معاملة الجميع بالمثل، وإعطائِهم الفُرص ذاتها، بغض النظر عن قدراتهم أو ظروفهم. بنفس الطريقة التي لا يجوز فيها إخراج شخص ما من مبنى لأنَّه مُقعَد (تحتوي معظم المباني عامةً على منحدرات للمقاعد المتحركة ومصاعد هذه الأيام)، لا يجوز أيضاً منع أحدهم من استخدام الموقع لأنَّه مُعاق بصرياً أو يستخدم هاتف محمول. كلنا مُختلفون، ولكن جميعنا بشر، وبالتالي لدينا نفس الحقوق (الإنسانيّة).</p> + +<p dir="rtl">الإتاحة عمل صحيح، ولكنها أيضاً جزء من القانون في بعض البلدان، ويمكنها أنْ تفتح بعض الأسواق المهمة التي بدونها لا يُمكِن استخدام خدماتك، أو شراء منتجاتك ...إلخ.</p> + +<p dir="rtl">تفيد الإتاحة وممارساتها الصحيحة الجميع:</p> + +<ul dir="rtl"> + <li>تُحسِن لغة ترميز النص الفائق (HTML) الدلاليّة (التي تستخدم عناصر اسمائها تدُل على وظيفتها - semantic) فهرسة الموقع في محركات البحث (SEO)، فتجعله أكثر رواجاً سوقياً.</li> + <li>يظهِر الاهتمام بالإتاحة صورة حسنة وأخلاقيّة؛ مما يُحسِن صورتك بين الناس.</li> + <li>تجعل أيضاً الممارسات الجيدة الأخرى، التي تُحسِن الإتاحة، موقعك أكثر استخداميّة عند مجموعات أخرى من المُستخدمين، مثل مُستخدمين الهواتف المحمولة، المُستخدمين ممن لديهم صبيب إنترنت ضعيف ...إلخ. يمكن للجميع حقيقةً الاستفادة من تحسينات كهذه.</li> + <li>هل ذكرنا أيضاً أنَّ ذلك قانون في بعض الأماكن؟</li> +</ul> + +<h2 dir="rtl" id="ما_هي_أنواع_الإعاقات_التي_نتكلم_عنها؟">ما هي أنواع الإعاقات التي نتكلم عنها؟</h2> + +<p dir="rtl">الأشخاص ذوي الإعاقات متنوعون تماماً كالأشخاص السليمين، كما إعاقاتهم متنوعة أيضاً. الدرس الرئيسي هنا هو التفكير بعيداً عن الحاسوب وكيفيّة استخدامك للويب، والبدأ في التعلم كيف يستخدمه الآخرون - أنت لست كمُستخدمي خدماتِك. تُشرَح أدناه الإعاقات الرئيسيّة التي يجب الاهتمام بها، بالإضافة إلى الأدوات التي يستخدمها من لديهم تلك الإعاقات للوصول إلى محتوى الويب (المعروفة <strong>بالتقنيات المعاونة</strong> (assistive technologies) أو <strong>ATs</strong> كاختصار).</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: تشير منظمة الصحة العالميّة في مقالة <a href="http://www.who.int/mediacentre/factsheets/fs352/ar/">العجز والصحة</a> إلى "معاناة أكثر من مليار شخص، أي نحو 15% من سكان العالم، من شكل ما من أشكال العجز."، و "معاناة ما بين 110 مليون و190 مليون بالغ من صعوبات جسميّة في أداء الوظائف".</p> +</div> + +<h3 dir="rtl" id="الإعاقات_البصريّة">الإعاقات البصريّة</h3> + +<p dir="rtl">يشمل هذا المصطلح العميان، من لديهم ضعف نظر، أو من لديهم عمى ألوان ...إلخ. العديد من الأشخاص في هذه الفئة يستخدمون مُكبرات الشاشة (إما المُكبرات المادية، أو خواص التكبير في البرمجيات. لدى معظم المتصفحات وأنظمة التشغيل هذه الأيام القدرة على التكبير)، وبعضهم يستخدم قارِئات الشاشة، وهي برمجيات تقرأ النصوص الرقميّة:</p> + +<ul dir="rtl"> + <li>البعض منها احتكاريّة مدفوعة، مثل<a class="external external-icon" href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (لنظام ويندوز) و <a class="external external-icon" href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (لنظام ويندوز).</li> + <li>البعض الآخر منها مجانيّة، مثل<a class="external external-icon" href="http://www.nvaccess.org/">NVDA</a> (لنظام ويندوز)،<a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (لنظام كروم، ويندوز، وماك)، و<a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (لنظام لينُكس).</li> + <li>البعض الآخر مبني إفتراضياً في أنظمة التشغيل، مثل<a class="external external-icon" href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (نظام ماك و iOS)،<a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (لنظام ويندوز)،<a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (لنظام كروم)، <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (لنظام الأندرويد).</li> +</ul> + +<p dir="rtl">إنَّها لفكرة سديدة أن تتعرف على استخدام بعض القارِئات، بحيث ينبغي عليك تثبيت إحداها والتعامل معها قليلاً؛ لتأخذ فكرة عن آلية عملها. انظر <a href="/ar/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">لدليل اختبار العدة متصفحات لقارئِات الشاشة</a> (cross browser testing screen readers guide) للمزيد من التفاصيل عن استخدامها، يوفر الفيديو أدناه مثال موجز لماهيّة التجربة.</p> + +<p>{{EmbedYouTube("IK97XMibEws")}}</p> + +<p dir="rtl">من حيث الجانب الإحصائي، تُقدِر المنظمة العالميّة للصحة أنَّ "هناك نحو 285 مليون نسمة ممن يعانون من ضعف البصر في جميع أنحاء العالم منهم 39 مليون نسمة كُفّت أبصارهم و246 مليون نسمة ضعفت رؤيتهم." (انظر إلى <a href="http://www.who.int/mediacentre/factsheets/fs282/en/">تقرير ضعف البصر والعمى</a>). هذا القدر الكبير من المستخدمين - والذي يساوي عدد سكان الولايات المُتخدة الأمريكيّة تقريباً - لن يستطيع استخدام موقعك لأنَّه غير مُبرمَج بشكل صحيح وحسب.</p> + +<h3 dir="rtl" id="الإعاقات_السمعيّة">الإعاقات السمعيّة</h3> + +<p dir="rtl">تُعرَف أيضاً بالإعاقات الصوتيّة (auditory)، أو الصمم. هؤلاء المجموعة من الأشخاص إما يملكون قدرة سمعيّة ضعيفة، أو هم صُمّ بالكامل. يستخدم المعاقين سمعياً التقنيات المعاونة (انظر <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">إلى الأجهزة المعاونة للأشخاص ذوي الاضطرابات السمعيّة، الصوتيّة، النطقيّة، أو اللغويّة</a>)، ولكن لا يوجد تقنيات معاونة مخصصة للعمل مع الحاسب أو الويب.</p> + +<p dir="rtl">ومع ذلك، هناك عدة تكتيكات يجب وضعها في عين الاعتبار لتوفير بدائل نصيّة للمحتوى الصوتي حتّى يتمكنون من قراءته، كالنصوص النصيّة البسيطة (simple text transcripts) والتعليقات النصيّة على الفيديوهات. سنناقش ذلك في مقالة لاحقاً.</p> + +<p dir="rtl">يمثل أيضاً المعاقين سمعياً نسبة كبيرة من المُستخدمين، حيث يشير <a href="http://www.who.int/mediacentre/factsheets/fs300/ar/">تقرير الصمم وضعف السمع</a> من منظمة الصحة العالميّة إلى أنَّ "يعاني 360 مليون شخص على الصعيد العالمي من فقدان السمع المسبب للعجز، و32 مليون شخص منهم هم من الأطفال".</p> + +<h3 dir="rtl" id="الإعاقات_الحركيّة">الإعاقات الحركيّة</h3> + +<p dir="rtl">يملك هؤلاء الأشخاص إعاقات تتعلق بالحركة، والتي قد تتضمن مشاكل جسديّة بحتة (كفقدان طرف أو الشلل)، أو اضطرابات عصبيّة أو وراثيّة تؤدي إلى ضعف أو عدم القدرة على التحكم بالأطراف. بعض الأشخاص قد تكون لديهم صعوبة في دقة حركات اليد للتعامل مع الفأرة، وقد تكون حالة الآخرين أخطر، فالربما يكونون مشلولين إلى حد كبير مما يجعلهم محتاجين <a href="https://www.performancehealth.com/baseball-cap-head-pointer">لمؤشر رأسي</a> ليتعاملوا مع الحواسيب.</p> + +<p dir="rtl">يُمكِن أنْ يكون هذا النوع من الإعاقات أيضاً كنتيجة لِكِبَر السن، بدلاً من كونه نتيجة لصدمة أو حالة معينة، ويمكن أن يكون نتيجة لنقص في العتاد، فبعض المستخدمين قد لا يملكون فأرة (mouse).</p> + +<p dir="rtl">الطريقة الفعالة للتعامل مع هذا هي جعل عناصر الصفحة قابلة للوصول بواسطة لوحة المفاتيح، سنناقش ذلك في مقالة لاحقة في الوحدة، ولكن من الجيد أن تقوم حالياً بتجربة استخدام بعض المواقع بلوحة المفاتيح لترى كيف يحدث الأمر. هل يمكنك - على سبيل المثال - استخدام زر الجدولة (tab) للتنقل بين عناصر الاستمارة (form)؟ يمكنك إيجاد المزيد من التفاصيل حول التحكم بلوحة المفاتيح في قسم <a href="/ar/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">الإتاحة باستخدام لوحة المفاتيح في اختبار العدة متصفحات</a> (Cross browser testing Using native keyboard accessibility).</p> + +<p dir="rtl">من حيث الجانب الإحصائي، يعاني عدد كبير من الناس من الإعاقات الحركيّة. يشير <a href="http://www.cdc.gov/nchs/fastats/disability.htm">تقرير العجز والوظائف الحركيّة</a> (Disability and Functioning) <span id="result_box" lang="ar"><span>لمراكز الولايات المتحدة لمكافحة الأمراض والوقاية </span></span>أنَّ "نسبة البالغين الذين يعانون من مختلف الصعوبات الحركيّة تبلغ 15.1%" في الولايات المُتحدة الأمريكيّة".</p> + +<h3 dir="rtl" id="الإعاقات_المعرفيّة">الإعاقات المعرفيّة</h3> + +<p dir="rtl">لربما تتواجد أوسع مجموعة من الإعاقات في هذه الفئة؛<span lang="ar"><span> فيمكن أن تشير الإعاقة المعرفيّة إلى الأمراض العقليّة</span></span>،<span lang="ar"><span> الصعوبات في التعلم، الصعوبات في الفهم والتركيز</span></span>،<span lang="ar"><span> مثل اضطراب نقص الانتباه و<a href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml">فرط النشاط</a> (ADHD)، الأشخاص الذين يعانون من <a href="https://www.nimh.nih.gov/health/topics/autism-spectrum-disorders-asd/index.shtml">التوحد</a>،</span> <span>الأشخاص المصابين <a href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">بانفصام الشخصيّة</a>، والعديد من أنواع الاضطرابات الأخرى.</span> <span>يمكن أن تؤثر هذه الإعاقات على أجزاء كثيرة من الحياة اليوميّة، بسبب المشاكل في الذاكرة</span></span>، <span lang="ar"><span>حل المشكلات</span></span>،<span lang="ar"><span> الاستيعاب</span></span>،<span lang="ar"><span> والانتباه ...إلخ.</span></span></p> + +<p dir="rtl"><span id="result_box" lang="ar"><span>أكثر الطرق شيوعًا التي قد تؤثر فيها هذه الإعاقات على استخدام موقع الويب هي صعوبة في فهم كيفيّة إكمال مهمة ما، أو تذكر كيفيّة القيام بشيء تم إنجازه، أو زيادة الإحباط عند العمل المُربِك أو الأمور الغير متناسقة</span></span>، مثل التنسيقات،<span lang="ar"><span> التنقل</span></span>، و<span lang="ar"><span>ميزات الصفحة الأخرى</span></span>.</p> + +<p dir="rtl">على نقيض المشاكل الإتاحيّة الأخرى، من المستحيل تحديد إصلاحات سريعة للمشاكل الإتاحيّة الناتجة عن الإعاقات المعرفيّة، فرصتك الوحيدة هي تصميم موقعك ليكون منطقياً، متناسقاً، مراعياً للاستخداميّة قدر الإمكان. كمثال، احرص على:</p> + +<ul dir="rtl"> + <li>جعل الصفحات متناسقة. أن يكون الشريط العلوي، الرأس، الذيل، والمحتوى الرئيسي دائماً في المكان الصحيح.</li> + <li>أن تكون الأدوات مُصممة بشكل جيدة وسهلة الاستخدام.</li> + <li>تقسيم العمليات متعددة المراحل إلى خطوات منطقيّة تتضمن على تذكيرات دوريّة حول المراحل التي قطعتها في تنفيذها، وكم من المتبقي لتنهيها، إذا كان ذلك ممكناً.</li> + <li>أن تكون طريقة سير العمليات منطقية، بسيطة، وتتطلب أقل قدر ممكن من الخطوات لإنجازها. على سبيل المثال، غالباً ما تكون عمليات التسجيل (registering) وتسجيل الدخول (signing in) في المواقع معقد بشكل غير ضروري.</li> + <li>أن تكون الصفحة الواحدة غير طويلة وكثيفة المعلومات.</li> + <li>أن تكون اللغة المُستخدمة في صفحاتك واضحة قدر الإمكان، وغير ممتلئة بالكلمات العاميّة أو المصطلحات الغير ضروريّة.</li> + <li>أن تكون النقاط المُهمة مُعلَّم بطريقة ما.</li> + <li>أن تكون أخطاء المُستخدمين واضحة، وتتضمن رسائل تحوي إقتراحات لحل المشكلة.</li> +</ul> + +<p dir="rtl">هذه ليست "تكتيكات إتاحيّة" بقدر ما هي ممارسات جيدة في عمليّة التصميم. ستفيد الجميع باستخدامك لهذه التقنيات في مواقعك، كما يجب أن تكون دوماً جزءً معيارياً من عملك.</p> + +<p dir="rtl">من الجانب الإحصائي، العدد كبير مجدداً. وضَّحت جامعة كورنيل في <a href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">تقريرها عن حالات الإعاقة لعام 2014</a> أنَّ "4.5% من الناس الذين تترواح أعمارهم بين 21-64 سنة يعانون من شكل من أشكال الإعاقة المعرفيّة".</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: توفر <a href="http://webaim.org/articles/cognitive/">صفحة WebAIM للإعاقات المعرفيّة</a> توضيح موسَع لهذه الأفكار، وهي بالتأكيد تستحق القراءة.</p> +</div> + +<h2 dir="rtl" id="تضمين_الإتاحة_في_مشروعك">تضمين الإتاحة في مشروعك</h2> + +<p dir="rtl">هناك خرافة عن الإتاحة تقول أنَّها مزيّة زائدة وتعتبر "كنوع من الرفاهيّة" لتضيفها لمشروعك. حقيقةً، يُمكِن أن تكون هذه الخرافة صحيحة (بعض الصحة) إذا كنت:</p> + +<ul dir="rtl"> + <li>تحاول تضمين الإتاحة في موقع فيه عدد ضخم من المشاكل الإتاحيّة.</li> + <li>بدأت التفكير بالإتاحة والمشاكل المُتعلقة بها الموجودة في المشروع في مرحلة متأخرة.</li> +</ul> + +<p dir="rtl">بالرغم من ذلك، إن كنت واضعاً الإتاحة في عين الاعتبار منذ بداية عملك على المشروع، فسيكون الثمن الذي ستدفعه لجعل محتواك مُتاحاً بخساً إلى حدٍ ما.</p> + +<p dir="rtl">عندما تُخطِط لمشروعك، أضف عمليّة اختبار الإتاحة إلى منظومتك الاختباريّة (testing regime)، كما تفعل مع اختبار أي شريحة جماهيريّة مستهدفة مهمة (مثل متصفحات الهواتف وأسطح المكتب المُستهدفة)، اختبر الأمور باكراً وكثيراً (early and often)، يمكنك إجراء اختبارات مؤتمتة لاكتشاف المزايا الناقصة برمجياً (مثل نقصان <a href="/ar/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#البدائل_النصية">النص البديل</a> للصورة أو وجود نص سيء يصف الرابط - انظر إلى مقالة <a href="/ar/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#العلاقات_بين_العناصر_والسياق">العلاقات بين العناصر والسياق</a>)، وقم ببعض الاختبارات مع فئة المُستخدمين المُتضررة؛ لترى كيف تعمل ميزات الموقع المُعقدة معهم. على سبيل المقال:</p> + +<ul dir="rtl"> + <li>هل أداة التقاط التاريخ (date picker widget) تعمل جيداً عند مَن يستخدمون قارئات الشاشة؟</li> + <li>إن كان المُحتوى يُحدَث ديناميكياً، فهل يلاحظ المعوقين بصرياً ذلك؟</li> + <li>هل يمكن الوصول إلى الأزرار الرسوميّة في الموقع عبر لوحة المفاتيح والشاشات التي تعمل باللمس؟</li> +</ul> + +<p dir="rtl">يمكنك وينبغي عليك أن تبقى متيقظاً لتنتبه إلى المناطق في محتواك التي من المُحتمَل أن تَحصُل فيها أخطاءً ستحتاج للعمل عليها لجعها مُتاحة، وعليك أن تقوم بفحصها بعنايّة، وتفُكِر بحلول أو بدائِل. التعامل مع المحتوى النصي (كما سترى في المقالة التالية) سهل، ولكن ماذا عن الوسائط المتعددة، ورسوماتك ثلاثيّة الأبعاد؟ يجب عليك النظر إلى ميزانيّة مشروعك والتفكير بواقعيّة حول الحلول المتاحة لجعل محتوى مشروعك متاحاً. يمكنك الدفع مثلاً لتحويل جميع الوسائط المتعددة لديك إلى نصوص مكتوبة، هذا مُكلِف، ولكنه خيار وارد يُمكِن أن يُنجَز.</p> + +<p dir="rtl">كن واقعياً أيضاً. الحصول على إتاحة بنسبة 100% أمر مستحيل، ستجد دوماً شخص يعاني بعض المشاكل والصعوبات في التعامل مع موقعك، ولكن هذا يجب أن يكون حافزاً لتبذل أقصى ما في وسعك. إذا كنت تخطط لتضمين رسوم بيانية ثلاثيّة الأبعاد بواسطة مكتبة WebGL، فقد ترغب بإضافة جدول كبديل إتاحي يعرض البيانات في حالة عدم القدرة على قراءة الرسم البياني، أو قد ترغب بتضمين جدول فحسب وإزالة الرسم البياني، فالجدول يُمكِن استخدامه من قبل الجميع، كتابته أسهل، وأقل استهلاكاً للموارد، وسهل الصيانة والتعديل.</p> + +<p dir="rtl">من الناحية الأخرى، إذا كنت تعمل على معرض صور يعرض رسوم ثلاثيّة الأبعاد، فمن الغير عقلاني توقُّع أنَّ كل صورة ستكون متاحة بشكل تام للمعاقين بصرياً، فالموقع أصلاً يستهدف الأشخاص ذوي البصر السليم.</p> + +<p dir="rtl">لتُظهِر أنَّك مُهتم وقد فكرت في موضوع الإتاحة، انشر بياناً في موقع يشرح سياستك حيال الإتاحة، والخطوات التي اتخذتها لجعل الموقع مُتاحاً. إذا اشتكى أحدهم أنَّ موقعك فيه مشكلة إتاحيّة، حاول التحدث معه، كن صبوراً ومتعاطِفاً، وقم بخطوات حكيمة لمحاولة حل المشكلة.</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: تغطي مقالة <a href="/ar/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">التعامل مع المشاكل الإتاحيّة الشائعة</a> الأمور التي يجب اختبارها بشكل تفصيلي.</p> +</div> + +<p dir="rtl">مُلخَص الأفكار:</p> + +<ul dir="rtl"> + <li>ضع الإتاحة في عين الاعتبار منذ بداية عملك على المشروع، واختبر الأمور باكراً وكثيراً. كما كأي علّة أخرى، يصبح ثمن إصلاح المشاكل الإتاحيّة كبيراً عند إصلاحها لاحقاً.</li> + <li>ضع في ذهنك أنَّ الممارسات الإتاحيّة الجيدة تفيد الجميع، وليس فقط من لديهم إعاقات. على سبيل المثال، الشيفرة الدلاليّة الواضحة ليست مُساعدة لقارِئات الشاشة وحسب، وإنما تفيد في الأداء والسرعة، وبالتالي هذا مفيد للجميع، وخاصةً للذين يستخدمون الهواتف النقالة ولديهم صبيب ضعيف من اﻹنترنت.</li> + <li>انشر تقريراً عن الحالة الإتاحيّة لموقعك، واجعل من لديهم مشاكل يشاركون.</li> +</ul> + +<h2 dir="rtl" id="دروس_إرشاديّة_وقوانين_عن_الإتاحة">دروس إرشاديّة وقوانين عن الإتاحة</h2> + +<p dir="rtl">يوجد عدد ضخم من القوائم والدروس الإرشاديّة المُتاحة لتعليم إجراء الاختبارات الأساسية. نصيحتنا لك هي أن تتعلم الأمور التي تحتاجها، وأن تفهم الفكرة الأساسية من الدروس المهمة بالنسبة لك.</p> + +<ul dir="rtl"> + <li>كبداية، نشرت منظمة W3C وثيقة كبيرة وشديدة التفصيل تتضمن معايير دقيقة ومحددة للتقنيات المتوافقة (التي تعمل جيداً) مع الإتاحة. تدعى هذه الوثيقة <a href="https://www.w3.org/WAI/intro/wcag.php">بدليل إتاحة محتوى الويب</a> (WCAG- <a href="https://web.archive.org/web/20130531012633/http://www.utic.rnu.tn:80/wcag2.0">الترجمة العربيّة</a>). المعايير مفصولة إلى أربع فئات أساسية تحدد كيف من الممكن إجراء التوصيات بشكل مدروك (perceivable)، عملي (operable)، مفهوم (understandable)، ومتين (robust). المكان الأفضل للحصول على مقدمة خفيفة والبدأ بتعلم هذه الأشياء هو قسم <a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">توصيات WCAG بالمختصر</a> من موقع رابطة الويب العالمية (W3C). لا حاجة لحفظ تلك التوصيات عن ظهر قلب، كن متيقظاً فقط للمناطق المثيرة للقلق في موقعك، واستخدم تقنيات وأدوات متنوعة للتعامل مع الأمور الغير متوافقة مع معايير WCAG (انظر أدناه للمزيد من التفاصيل).</li> + <li>قد يكون لدى بلدك تشريعات قانونيّة حول الإتاحة يجب تطبيقها على المواقع التي تستهدف سكانها، <a href="http://www.section508.gov/content/learn">كالقسم 508 من قانون إعادة التأهيل</a> في الولايات المتحدة.</li> +</ul> + +<p dir="rtl">ففي حين أنَّ توصيات WCAG هي مجرد أدّلة إرشادية، قد يكون في دولتك قوانين حول الإتاحة في الويب، أو على الأقل قانون حول إتاحة الخدمات المنشورة للعامة (والتي قد تتضمن المواقع، الخدمات التلفزية... إلخ). من الجيد البحث عن قوانين بلدك المتعلقة بهذا الموضوع وتطبيقها. إن لم تبذل جهداً لتوافِق محتوى موقعك مع قوانين حكومتك، فقد تواجه مشاكل قانونيّة إن اشتكى أحد زوارك ذوي الإعاقات.</p> + +<p dir="rtl">قد يبدو هذا غريباً، ولكن الأمر بسيط، فكل ما عليك وضع الإتاحة كأمر ذو أولوية في عملية تطوير الويب (كما شُرِحَ سابقاً). إن كنت تشك في مصداقية ما نقول، يمكنك سؤال محامي مُختَص عن الأمر. لن نوفر المزيد من النصائح، فنحن لسنا برجال قانون.</p> + +<h2 dir="rtl" id="واجهات_برمجيّة_للإتاحة">واجهات برمجيّة للإتاحة</h2> + +<p dir="rtl">تستفيد المتصفحات من <strong>واجهات الإتاحة البرمجيّة</strong> (accessibility APIs) الخاصة (التي يوفرها نظام التشغيل الذي يعمل عليه المُتصفح) التي توفِر معلومات مفيدة للتقنيات المعاونة (assistive technologies)، تميل التقنيات المعاونة غالباً للاستفادة من المعلومات الدلاليّة (semantic information)، بالتالي، لا تتضمن هذه المعلومات أشياء تصميميّة، أو بيانات جافاسكربت. تُنظَم هذه المعلومات في شجرة معلوماتيّة تُسمى <strong>بالشجرة الإتاحيّة</strong> (accessibility tree).</p> + +<p dir="rtl">تتوافر في أنظمة التشغيل المختلفة واجهات إتاحيّة مختلفة، مثل:</p> + +<ul dir="rtl"> + <li>نظام ويندوز: MSAA/IAccessible ،UIAExpress ،IAccessible2</li> + <li>نظام ماك: AT-SPI</li> + <li>نظام أندرويد: Accessibility framework</li> + <li>نظام <span class="st">آي أو إس أو: </span>UIAccessibility</li> +</ul> + +<p dir="rtl">عندما تفشل المعلومات الدلاليّة الأصيلة الموفرة من قبل عناصر لغة ترميز النص الفائق من إيضاح الغرض، يمكنك تدعيمها بالمزايا المذكورة في توصيات WAI-ARIA، والتي تضيف معلومات دلاليّة إلى شجرة الإتاحة لتُحسِن التجربة الإتاحيّة. يمكنك تعلم المزيد حول تقنيّة WAI-ARIA في مقالة <a class="new" href="/ar/docs/Learn/Accessibility/WAI-ARIA_basics" rel="nofollow">أساسيات تقنيّة WAI-ARIA</a>.</p> + +<h2 dir="rtl" id="الخلاصة">الخلاصة</h2> + +<p dir="rtl">يبنغي على هذه المقالة أن تكون قد اعطتك لمحة مفيدة عن الإتاحة، عارضةً لك سبب أهميتها، شارحةً كيفيّة إضافتها إلى سير عملك. ينبغي أن تكون الآن متتوقاً (راغباً) لتعلم المزيد حول التفاصيل التي تجعل مواقعك مُتاحة، وسنبدأ بذلك في الفصل الثاني، حيث سنشرح سبب كون لغة ترميز النص الفائق (HTML) أساساً مهماً للإتاحة.</p> + +<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p> + +<h2 dir="rtl" id="في_هذه_الوحدة_أيضاً">في هذه الوحدة أيضاً</h2> + +<ul dir="rtl"> + <li><a class="new" href="/ar/docs/Learn/Accessibility/What_is_accessibility" rel="nofollow">ما هي الإتاحة؟</a></li> + <li><a class="new" href="/ar/docs/Learn/Accessibility/HTML" rel="nofollow">أساسيات مهمة في لغة ترميز النص الفائق للعمل مع الإتاحة</a></li> + <li><a class="new" href="/ar/docs/Learn/Accessibility/CSS_and_JavaScript" rel="nofollow">أفضل الطرق لاستخدام صفحات الأنماط الانسيابية والجافاسكربت لإتاحة أفضل</a></li> + <li><a class="new" href="/ar/docs/Learn/Accessibility/WAI-ARIA_basics" rel="nofollow">أساسيات تقنيّة WAI-ARIA</a></li> + <li><a class="new" href="/ar/docs/Learn/Accessibility/Multimedia" rel="nofollow">الوسائط المُتاحة</a></li> + <li><a class="new" href="/ar/docs/Learn/Accessibility/Mobile" rel="nofollow">الإتاحة الخلويّة</a></li> + <li><a class="new" href="/ar/docs/Learn/Accessibility/Accessibility_troubleshooting" rel="nofollow">معالجة الأخطاء الإتاحيّة</a></li> +</ul> + +<dl> +</dl> diff --git a/files/ar/learn/common_questions/index.html b/files/ar/learn/common_questions/index.html new file mode 100644 index 0000000000..34df4764d6 --- /dev/null +++ b/files/ar/learn/common_questions/index.html @@ -0,0 +1,133 @@ +--- +title: أسئلة شائعة +slug: Learn/Common_questions +tags: + - أسئلة-شائعة + - صفحة هبوط + - ويب +translation_of: Learn/Common_questions +--- +<div>{{LearnSidebar}}</div> + +<p class="summary" dir="rtl">هذا القسم من منطقة التعلُّم (قسم التعلُّم) مُصمَم لتوفير أجوبة عن الأسئلة الشائعة، والتي ليست بالضرورة أن تكون جزءً جوهرياً من المسارات التعليميّة (مثل مقالات <a href="/ar/docs/Learn/HTML">لغة ترميز النص الفائق</a> و<a href="/ar/docs/Learn/CSS">صفحات الأنماط الانسيابية</a> التعليميّة). حيث أنَّ هذه المقالات صُمِمَت لتكون مُستقلة عن أي قسم آخر.</p> + +<h2 dir="rtl" id="كيف_يعمل_الويب">كيف يعمل الويب</h2> + +<p dir="rtl">يغطي هذا القسم آليات عمل الويب، الأسئلة المتعلقة بالمعلومات العامة حول نظام الويب وكيفيّة عمله.</p> + +<dl> + <dt> + <h3 dir="rtl" id="كيف_تعمل_الشابكة؟"><a href="/ar/docs/Learn/Common_questions/How_does_the_Internet_work">كيف تعمل الشابكة؟</a></h3> + </dt> + <dd dir="rtl"><strong>الشابكة</strong> (الإنترنت) هي العمود الفقري (اللبنة الأساسيّة) للويب، فهي البنيّة التقنيّة التحتيّة التي تجعل الإنترنت يعمل. كشرح بسيط، الشابكة هي شبكة ضخمة من الحواسيب تتواصل مع بعضها البعض. تناقش هذه المقالة كيفيّة عمل الشابكة بشكل تفصيلي بسيط.</dd> + <dt> + <h3 dir="rtl" id="ما_الفرق_بين_صفحة_الويب،_موقع_الويب،_خادم_الويب،_ومُحرِّك_البحث؟"><a href="/ar/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">ما الفرق بين صفحة الويب، موقع الويب، خادم الويب، ومُحرِّك البحث؟</a></h3> + </dt> + <dd dir="rtl">تشرح هذه المقالة مفاهيم متنوعة متعلقة بعمل الويب، وهي: الصفحات، المواقع، خوادم الويب، ومحرِّكات البحث. غالباً ما تُستخدَم هذه المصطلحات بشكل خاطئ، أو تُشتت القادمين الجدد إلى المجال. دعنا نتعرَّف على كل مصطلحٍ منهم في هذا المقال.</dd> + <dt> + <h3 dir="rtl" id="ما_هو_الرابط؟"><a href="/ar/docs/Learn/Common_questions/What_is_a_URL">ما هو الرابط؟</a></h3> + </dt> + <dd dir="rtl">بجانب {{Glossary("Hypertext", "النصوص الفائقة")}} و{{Glossary("HTTP", "ميثاق نقل النص الفائق")}}، يعد الرابط (URL) أحد المفاهيم الأساسيّة في الويب. فهو آلية تستخدمها {{Glossary("Browser","المُتصفحات")}} للنفاذ لأي مورِد منشور على الويب.</dd> + <dt> + <h3 dir="rtl" id="ما_هو_اسم_النطاق؟"><a href="/ar/docs/Learn/Common_questions/What_is_a_domain_name">ما هو اسم النطاق؟</a></h3> + </dt> + <dd dir="rtl">أسماء النطاقات هي جزء أساسي من البنيّة التحتيّة للشابكة. فهي توفِر عناوين مقروءة بشرياً لخوادم الويب الموجودة على الإنترنت.</dd> + <dt> + <h3 dir="rtl" id="ما_هو_خادم_الويب؟"><a href="/ar/docs/Learn/Common_questions/What_is_a_web_server">ما هو خادم الويب؟</a></h3> + </dt> + <dd dir="rtl"> + <p>يُمكِن أن يشير مُصطلَح "خادم الويب (Web Server)" إلى برمجيّة أو جهاز يقوم بإرسال المواقع، أو لكلاهما عندما يعملان معاً. سنتعرف في هذه المقالة على ماهيّة خوادم الويب، كيفيّة عملها، وأهميتها.</p> + </dd> + <dt> + <h3 dir="rtl" id="ما_هي_الوصلات؟"><a href="/ar/docs/Learn/Common_questions/What_are_hyperlinks">ما هي الوصلات؟</a></h3> + </dt> + <dd dir="rtl">سنتعرف في هذه المقالة على ماهيّة الوصلات (hyperlinks) وأهميتها.</dd> +</dl> + +<h2 dir="rtl" id="الإعداد_والأدوات">الإعداد والأدوات</h2> + +<p dir="rtl">يحوي هذا القسم الأسئلة المتعلقة بالبرمجيات والأدوات التي يمكنك استخدامها لبناء موقعك.</p> + +<dl> + <dt> + <h3 dir="rtl" id="كم_يكلِف_إنشاء_شيء_ما_على_الويب؟"><a class="new" href="/ar/docs/Learn/How_much_does_it_cost" rel="nofollow">كم يكلِف إنشاء شيء ما على الويب؟</a></h3> + </dt> + <dd dir="rtl">عندما تنشر مشروعك، قد لا تُنفِق شيء أو قد تصل التكلفة إلى مستوى عالٍ جداً. سنناقش في هذه المقالة تكلفة كل شيء وما تحصَل عليه مقابل ما تدفعه (وما لا تدفعه).</dd> + <dt> + <h3 dir="rtl" id="ما_البرمجيات_التي_احتاجها_لبناء_موقع؟"><a href="/ar/docs/Learn/Common_questions/What_software_do_I_need">ما البرمجيات التي احتاجها لبناء موقع؟</a></h3> + </dt> + <dd dir="rtl">سنشرح في هذه المقالة البرمجيات التي تحتاجها عندما تقوم بتعديل، رفع (تحميل)، أو عرض موقعك.</dd> + <dt> + <h3 dir="rtl" id="ما_هي_محررات_النصوص_المتوفرة؟"><a href="/ar/docs/Learn/Common_questions/Available_text_editors">ما هي محررات النصوص المتوفرة؟</a></h3> + </dt> + <dd dir="rtl">سنُعنوِن في هذه المقالة بعض الأشياء التي عليك التمهل والتفكير حولها عندما تقوم بتثبيت محرر نصوص لاستخدامه في تطوير الويب.</dd> + <dt> + <h3 dir="rtl" id="ما_هي_أدوات_المطورين_في_المُتصفِح؟"><a href="/ar/docs/Learn/Common_questions/What_are_browser_developer_tools">ما هي أدوات المطورين في المُتصفِح؟</a></h3> + </dt> + <dd dir="rtl">يوفِر كل {{ glossary("browser", "مُتصفِح") }} مجموعة من أدوات المطورين لتنقيح شيفرات لغة ترميز النص الفائق، صفحات الأنماط الانسيابية، وغيرها من اللغات الأخرى. تشرح هذه المقالة كيفيّة استخدام الوظائف الأساسيّة لأدوات المطورين في مُتصفِحك.</dd> + <dt> + <h3 dir="rtl" id="كيف_تتأكَّد_من_أنَّ_موقعك_يعمل_بشكل_سليم؟"><a href="/ar/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">كيف تتأكَّد من أنَّ موقعك يعمل بشكل سليم؟</a></h3> + </dt> + <dd dir="rtl">الآن، وبعد أن نشرت موقعك على الأنترنت (مبارك عليك هذا)، هل تأكَّدت من أنَّه يعمل بشكل سليم؟ توفر هذه المقالة بعض الخطوات الأساسيّة في عمليّة استكشاف اﻷخطاء وإصلاحها.</dd> + <dt> + <h3 dir="rtl" id="كيف_تقوم_بإعداد_خادم_اختبار_محلي؟"><a href="/ar/docs/Learn/Common_questions/set_up_a_local_testing_server">كيف تقوم بإعداد خادم اختبار محلي؟</a></h3> + </dt> + <dd> + <div> + <p dir="rtl">تشرح هذه المقالة كيف يمكنك إعداد خادم اختبار محلي بسيط على جهازك، كما تشرح بعض اساسيات استخدامه.</p> + </div> + </dd> + <dt> + <h3 dir="rtl" id="كيف_تقوم_برفع_ملفاتك_إلى_خادم_الويب؟"><a href="/ar/docs/Learn/Common_questions/Upload_files_to_a_web_server">كيف تقوم برفع ملفاتك إلى خادم الويب؟</a></h3> + </dt> + <dd dir="rtl">تُظهِر هذه المقالة الكيفيّة التي يمكنك استخدامها لنشر موقعك باستخدام أدوات {{ glossary("FTP", "ميثاق نقل الملفات") }}، وهي إحدى أكثر الأدوات شيوعاً التي تستخدم لوضع موقعك على الإنترنت ليتمكن الآخرون من الدخول إليه عبر حواسيبهم.</dd> + <dt> + <h3 dir="rtl" id="كيف_استخدم_خدمة_صفحات_جيتهاب؟"><a href="/ar/docs/Learn/Common_questions/Using_GitHub_Pages">كيف استخدم خدمة "صفحات جيتهاب"؟</a></h3> + </dt> + <dd dir="rtl">توفِر هذه المقالة دليل بسيط لعمليّة نشر المحتوى باستخدام خدمة "صفحات جيتهاب (Github pages)".</dd> + <dt> + <h3 dir="rtl" id="كيف_تستضيف_موقعك_على_مُحرِّك_تطبيقات_جوجل؟"><a href="/ar/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">كيف تستضيف موقعك على مُحرِّك تطبيقات جوجل؟</a></h3> + </dt> + <dd dir="rtl">أتبحث عن مكان لاستضافة موقعك؟ إليك هذا الدليل التدريجي لاستضافة موقعك على خدمة مُحرِّك تطبيقات جوجل (Google App Engine).</dd> + <dt> + <h3 dir="rtl" id="ما_الأدوات_المتوفرة_لتنقيح_وتحسين_أداء_الموقع؟"><a href="/ar/docs/Tools/Performance">ما الأدوات المتوفرة لتنقيح وتحسين أداء الموقع؟</a></h3> + </dt> + <dd dir="rtl">تُظهِر لك مجموعة المقالات هذه طريقة استخدام أدوات المطورين في فايرفوكس لتنقيح وتحسين أداء موقعك، استخدام الأدوات لفحص استخدام الذاكرة، شجرة استدعاءات الجافاسكربت (JavaScript call tree)، وكميّة عقد DOM المعروضة، والمزيد من الأمور.</dd> +</dl> + +<h2 dir="rtl" id="التصميم_والإتاحة">التصميم والإتاحة</h2> + +<p dir="rtl">يسرُد هذا القسم الأسئلة المتعلقة بالأمور الجماليّة، تنظيم الصفحات، وتقنيات الإتاحة (accessibility) ...إلخ.</p> + +<dl> + <dt> + <h3 dir="rtl" id="كيف_أبدأ_تصميم_موقعي؟"><a href="/ar/docs/Learn/Common_questions/Thinking_before_coding">كيف أبدأ تصميم موقعي؟</a></h3> + </dt> + <dd dir="rtl">تغطي هذه المقالة جميع الجوانب المهمة للخطوة الأوليّة المهمة لكل مشروع وهي تحديد الغايّة التي تريد تحقيقها من خلاله.</dd> + <dt> + <h3 dir="rtl" id="ماذا_تحوي_نماذج_الويب_الشائعة؟"><a href="/ar/docs/Learn/Common_questions/Common_web_layouts">ماذا تحوي نماذج الويب الشائعة؟</a></h3> + </dt> + <dd dir="rtl">عند تصميم صفحات موقعك، من الجيد الحصول على فكرة عن أكثر النماذج (layouts) شيوعاً. تغطي هذه المقالة بعض نماذج الويب الشائعة، وتشرح الأجزاء المكوِّنة لكل نموذج منها.</dd> + <dt> + <h3 dir="rtl" id="ما_هي_الإتاحة؟"><a href="/ar/docs/Learn/Common_questions/What_is_accessibility">ما هي الإتاحة؟</a></h3> + </dt> + <dd dir="rtl">توفِر هذه المقالة مقدمة عن المفاهيم الأساسية للإتاحة.</dd> + <dt> + <h3 dir="rtl" id="كيف_يمكننا_إنشاء_تصميم_لجميع_أنواع_المُستخدمين؟"><a href="/ar/docs/Learn/Common_questions/Design_for_all_types_of_users">كيف يمكننا إنشاء تصميم لجميع أنواع المُستخدمين؟</a></h3> + </dt> + <dd dir="rtl">توفِر هذه المقالة بعض التقنيات البسيطة التي تساعد على تصميم مواقع لجميع أنواع المُستخدمين، حيث تحتوي على تكتيكات سريعة للإتاحة، وأمور أخرى مشابهة.</dd> + <dt> + <h3 dir="rtl" id="ما_هي_مميزات_لغة_ترميز_النص_الفائق_المُعزِّزة_للإتاحة؟"><a href="/ar/docs/Learn/Common_questions/HTML_features_for_accessibility">ما هي مميزات لغة ترميز النص الفائق المُعزِّزة للإتاحة؟</a></h3> + </dt> + <dd dir="rtl">تشرح هذه المقالة ميزات لغة ترميز النص الفائقة التي يُمكِن أن تُستخدَم لجعل صفحات الويب مُتاحة بشكل أكبر للأشخاص الذين يعانون من إعاقات مختلفة.</dd> +</dl> + +<h2 dir="rtl" id="أسئلة_عن_لغة_ترميز_النص_الفائق،_صفحات_الأنماط_الانسيابية،_والجافاسكربت">أسئلة عن لغة ترميز النص الفائق، صفحات الأنماط الانسيابية، والجافاسكربت</h2> + +<p dir="rtl">للحصول على حلول شائعة للمشاكل التي تصادفك في لغة ترميز النص الفائق (HTML)، صفحات الأنماط الانسيابية (CSS)، والجافاسكربت، أقرأ المقالات التالية:</p> + +<ul dir="rtl"> + <li><a href="/ar/docs/Learn/HTML/Howto">استخدام لغة ترميز النص الفائق لحل المشاكل الشائعة</a></li> + <li><a href="/ar/docs/Learn/CSS/Howto">استخدام صفحات الأنماط الانسيابية لحل المشاكل الشائعة</a></li> + <li><a href="/ar/docs/Learn/JavaScript/Howto">استخدام لغة الجافاسكربت لحل المشاكل الشائعة</a></li> +</ul> diff --git a/files/ar/learn/common_questions/what_is_a_web_server/index.html b/files/ar/learn/common_questions/what_is_a_web_server/index.html new file mode 100644 index 0000000000..f08c4cf37c --- /dev/null +++ b/files/ar/learn/common_questions/what_is_a_web_server/index.html @@ -0,0 +1,118 @@ +--- +title: ما هو خادم الويب؟ +slug: Learn/Common_questions/What_is_a_web_server +tags: + - مبتدئين +translation_of: Learn/Common_questions/What_is_a_web_server +--- +<div class="summary"> +<p dir="rtl"><span class="seoSummary">سنتعرف في هذه المقالة على ماهيّة خوادم الويب، كيفيّة عملها، وأهميتها.</span></p> +</div> + +<table class="learn-box standard-table" dir="rtl"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات:</th> + <td dir="rtl">يجب أن تكون على علم مُسبَق <a href="/ar/docs/Learn/How_the_Internet_works">بكيفيّة عمل الإنترنت</a>، ومُتفَهِماً <a href="/ar/docs/Learn/page_vs_site_vs_server_vs_search_engine">الفرق بين صفحة الويب، الموقع، خادم الويب، ومُحرِّك البحث</a>.</td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف:</th> + <td dir="rtl">ستتعلم ماهيّة خوادم الويب وستحصل على فهم عام لكيفيّة عملها.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الخلاصة">الخلاصة</h2> + +<p dir="rtl">يُمكِن أن يشير مُصطلَح "خادم الويب (Web Server)" إلى برمجيّة أو جهاز، أو لكلاهما عندما يعملان معاً.</p> + +<ol dir="rtl"> + <li>خادم الويب (كجهاز) هو حاسوب يُخزِّن برمجيّة خادم الويب والملفات المكوِّنة للموقع (مثل ملفات {{ glossary("HTML", "لغة ترميز النص الفائق") }}، الصور، ملفات {{ glossary("CSS", "صفحات الأنماط الانسيابية") }}، وملفات الجافاسكربت). يتصِل هذا الخادم بالشابكة (الإنترنت) ويدعم التبادل المادي للبيانات مع الأجهزة الأخرى المتصلة بالويب.</li> + <li>خادم الويب (كبرمجيّة) يتضمن أجزاء عدَّة تتحكم بطريق وصول مُستخدمين الويب للملفات المُستضافة، يتضمن على الأقل <em>خادم ميثاق نقل النص الفائق</em> (HTTP Server). خادم ميثاق نقل النص الفائق هو جزء من برمجيّة تفهم {{Glossary("URL","الروابط")}} (عناوين الويب) و{{Glossary("HTTP", "ميثاق نقل النص الفائق")}} (ميثاق يستخدمه مُتصفِحُك لعرض صفحات الويب). يُمكِن الوصول لهذا الخادم عبر أسماء نطاقات الموقع (مثل <code>mozilla.org</code>) التي يُخزِنها، والوصول للمحتوى الذي تقدمه لأجهزة مستخدميها.</li> +</ol> + +<p dir="rtl">كشرح بسيط جداً، كلما احتاج المُتصفِح ملفاً مُستضافاً على خادم ويب، يطلب المُتصفِح الملف عبر ميثاق نقل النص الفائق (HTTP). عندما يصل الطلب لخادم الويب المطلوب (الجهاز)، يقبل خادم <em>ميثاق نقل النص الفائق</em> (البرمجيّة) هذا الطلب، ويبحث عن الملف المطلوب (إن لم يكن موجوداً، سيعيد الخادم رمز الحالة <a href="/ar/docs/Web/HTTP/Status/404">404</a>)، ثم يُعيدُه بواسطة ميثاق نقل النص الفائق إلى المُتصفِح.</p> + +<p><img alt="تمثيل بسيط للإتصال بين الخادم والعميل بواسط ميثاق نقل النص الفائق" src="https://mdn.mozillademos.org/files/15901/Client-Server-Model-Arabic.svg"></p> + +<p dir="rtl">تحتاج إما لخادم ويب ساكن (static) أو ديناميكي (dynamic) لنشر موقعك.</p> + +<p dir="rtl">يتألَّف <strong>خادم الويب الساكن</strong> من حاسب (الجهاز) وميثاق نقل النص الفائق (البرمجيّة). نُسمي هذا النوع من الخوادم "ساكناً" لأنَّه يُرسِل الملف المُستضاف كما هو إلى مُتصفِحك.</p> + +<p dir="rtl">يتألَّف <strong>خادم الويب الديناميكي</strong> من خادم ويب ساكن وبرمجيات إضافيّة، أكثرها شعبيّة <em>خادم التطبيق</em> (application server) و<em>قاعدة البيانات</em>. نُسمي هذا النوع من الخوادم "ديناميكياً" لأنَّ خادم التطبيق يُحدِّث الملفات المُستضافة قبل إرسالها إلى مُتصفِحك بواسطة خادم ميثاق نقل النص الفائق.</p> + +<p dir="rtl">على سبيل المثال، لإنتاج الصفحات النهائيّة التي تراها في مُتصفِحك، قد يملأ خادم التطبيق قالب لغة ترميز النص الفائق ببعض المحتويات من قاعدة البيانات. مواقع مثل شبكة مطوري موزيلا (MDN) والموسوعة الحرَّة (ويكيبيديا) تملك آلاف الصفحات، ولكنها ليست مستندات لغة ترميز نص فائق فعليّة، وإنما بضعة قوالب وقاعدة بيانات ضخمة. هذه الطريقة تجعل من السهل والسريع صيانة وتسليم المحتوى.</p> + +<h2 dir="rtl" id="التعلم_النشط">التعلم النشط</h2> + +<p dir="rtl">لا يوجد بعد قسم تعلم نشط في هذه الصفحة. <em>الرجاء <a href="/ar/docs/MDN/Getting_started">النظر في المُساهمة</a></em>.</p> + +<h2 dir="rtl" id="الشرح_بتعمُق">الشرح بتعمُق</h2> + +<p dir="rtl">لجلب الصفحات، كما ذكرنا مُسبقاً، يقوم مُتصفحك بإرسال طلب إلى خادم الويب، الذي يقوم بالبحث عن الملف المطلوب في مساحته التخزينيّة. حالما يجد الملف، يقوم الخادم بقراءته، معالجته حسب الحاجة، ومن ثم إرساله إلى المُتصفِح. دعنا نُلقي نظرة على هذه الخطوات بتعمُق أكبر.</p> + +<h3 dir="rtl" id="استضافة_الملفات">استضافة الملفات</h3> + +<p dir="rtl">على خادم الويب أولاً تخزين ملفات الموقع، أي جميع مستندات لغة ترميز النص الفائق وأصولها (assets)، بما فيها الصور، ملفات صفحات الأنماط الانسيابية، ملفات الجافاسكربت، الخطوط، والفيديوهات.</p> + +<p dir="rtl">تقنياً، يمكنك استضافة كل تلك الملفات على حاسبك الشخصي، ولكنه من الأكثر ملائمة تخزينهم في خادم ويب مخصص:</p> + +<ul dir="rtl"> + <li>يعمل طوال الوقت.</li> + <li>مُتصل بالإنترنت دوماً.</li> + <li>يملك عنوان الشبكة (IP) ثابِت (لا توفِر جميع {{Glossary("ISP", "مزودات الخدمة")}} عناوين شبكة ثابتة للخطوط المنزليّة).</li> + <li>تتم صيانته من قبل مزوِّد خارجي.</li> +</ul> + +<p dir="rtl">تبعاً لكل تلك الاسباب، إيجاد مزوِّد استضافة جيد هو جزء رئيسي من عمليّة بناء موقعك. ابحث بين عروض الشركات الخدميّة المتنوعة واختر العرض المناسب لاحتياحاتك وميزانيتك (تترواح أسعار الخدمات من المجان إلى الألف دولار في الشهر). يمكنك إيجاد المزيد من التفاصيل في <a href="/ar/Learn/How_much_does_it_cost#Hosting">هذه المقالة</a>.</p> + +<p dir="rtl">حالما تنتهي من إعداد استضافة الويب، سيكون عليك <a href="/ar/docs/Learn/Upload_files_to_a_web_server">رفع (تحميل) ملفاتك إلى خادم الويب</a>.</p> + +<h3 dir="rtl" id="التواصل_عبر_ميثاق_نقل_النص_الفائق">التواصل عبر ميثاق نقل النص الفائق</h3> + +<p dir="rtl">ثانياً، يوفِر خادم الويب دعماً {{Glossary("HTTP", "لميثاق نقل النص الفائق")}}. كما يوضِح اسمه، يحدد هذا الميثاق كيفيّة نقل النص الفائق (أي مستندات الويب المُرتَبِطة) بين حاسوبين.</p> + +<p dir="rtl">{{Glossary("Protocol", "الميثاق")}} (البروتوكول) هو مجموعة من القواعد التي تحدد كيفيّة تواصل حاسوبين مع بعضهما. يعد ميثاق نقل النص الفائق ميثاقاً نصيّاً (textual) وعديم الحالة (stateless).</p> + +<dl> + <dt dir="rtl">ميثاق نصي</dt> + <dd dir="rtl">أي أنَّ جميع الأومر نصيّة ومقروءة من قبل البشر (غير مُشفَرة أو معماة).</dd> + <dt dir="rtl">عديم الحالة</dt> + <dd dir="rtl">لا الخادم أو العميل يتذكر عمليّة التواصل السابقة. على سبيل المثال، بالإعتماد على ميثاق نقل النص الفائق وحسب، لن يكون الخادم قادراً على تذكر كلمة المرور التي أدخلتها، أو الخطوة التي أنت فيها في عمليّة التسجيل. تحتاج إلى خادم تطبيق لإنجاز هذه الأمور. (سنغطي نوع التقنيات هذا في مقالات مستقبليّة).</dd> +</dl> + +<p dir="rtl">يوفِر ميثاق نقل النص الفائق قواعد واضحة للكيفيّة التي يتواصل بها الخادم والعميل. سنغطي الأمور المتعلقة بالميثاق ذاته في <a href="/ar/docs/Web/HTTP">مقالة تقنيّة مرجعيّة</a> لاحقاً. حالياً عليك أن تعلم هذه الأمور وحسب:</p> + +<ul dir="rtl"> + <li>فقط <em>العميل</em> يمكنه إرسال الطلبات، <em>وللخادِم</em> وحسب. يُمكن للخوادم فقط <em>الرد</em> على طلبات <em>العميل</em>.</li> + <li>عندما يتم طلب ملف عبر ميثاق نقل النص الفائق، على العميل إرسال {{Glossary("URL", "رابط")}} الملف.</li> + <li>على خادم الويب <em>الإجابة</em> (لا خيار آخر) على كل طلب يأتيه، على الأقل عليه أن يرسل رسالة الخطأ.</li> +</ul> + +<p dir="rtl"><a href="https://developer.mozilla.org/en-US/404"><img alt="صفحة الحطأ 404 لشبكة مطوري موزيلا كمثال على صفحة خطأ" src="https://mdn.mozillademos.org/files/15900/404.png" style="float: left; height: 203px; width: 336px;"></a>في خادم الويب، يكون خادم ميثاق نقل النص الفائق مسؤولاً عن معالجة والإجابة على الطلبات الآتية.</p> + +<ol dir="rtl"> + <li>عند تلقي طلب، يقوم خادم ميثاق نقل النص الفائق بدايةً بالتحقق مما إذا كان رابط الملف المطلوب موجوداً.</li> + <li>إن كان كذلك، يُرسِل خادم الويب محتوى الملف إلى المُتصفِح. إن لم يكن، يقوم خادم التطبيق ببناءه (عندما يكون المحتوى ديناميكياً لا تُمثِل جميع الصفحات ملفاتاً، لذلك يبني خادم التطبيق الملف المطلوب من قالب آخر).</li> + <li>إن لم تكن كلتا العمليتين ممكنتين، يُرسِل خادم الويب رسالة خطأ إلى المُتصفِح، أكثر تلك الرسائل شيوعاً هي "404 غير موجود" (هذا الخطأ شائع لأنَّ الكثير من مصممي الويب يقضون وقتاً لتصميم <a href="http://www.404notfound.fr/">صفحة الخطأ 404</a>).</li> +</ol> + +<h3 dir="rtl" id="المحتوى_الساكن_والديناميكي">المحتوى الساكن والديناميكي</h3> + +<p dir="rtl">بشكل تقريبي، يُمكِن للخادم إما أن يُرسِل محتوى ساكناً أو ديناميكياً. يعني المُصطلَح "ساكن (Static)" أنَّ المحتوى "يُرسَل كما هو (served as-is)". المحتويات الساكنة هي الأكثر سهولةً في الإعداد، لذلك ننصحك بأن يكون أوَّل موقع لك ساكناً.</p> + +<p dir="rtl">يعني المُصطلَح "ديناميكي (Dynamic)" أنَّ الخادِم يعالِج المحتوى أو حتى يولِّده كاملاً من قاعدة البيانات. يوِفِر هذا حل أكثر مرونة، ولكن الجانب التقني يصبح التعامُل معه أكثر صعوبة، مما يجعل بناء الموقع أكثر صعوبة بمقدار كبير.</p> + +<p dir="rtl">لنأخذ الصفحة التي تقرأها الآن على سبيل المثال. على خادم الويب المُستضيف للموقع، يوجد خادم تطبيق يأخذ محتوى المقالة من قاعدة بيانات، ينسِقَهُ، يَضَعُهُ بداخل بعض القوالب، ومن ثم يرسِل لك النتائج. في مثالنا هذا، اسم خادم التطبيق هو <a href="/ar/docs/MDN/Kuma">كوما</a> (Kuma) وهو مبني بواسطة <a href="https://www.python.org/">بايثون</a> (باستخدام إطار <a href="https://www.djangoproject.com/">جانغو</a>). قام فريق موزيلا ببناء كوما وفقاً لاحتياجات الشبكة، ولكن توجد العديد من التطبيقات الأخرى المشابهة مبنيّة على العديد من التقنيات الأخرى.</p> + +<p dir="rtl">توجد العديد من خوادم التطبيقات مما يجعل من الصعب اقتراح واحد. تلبي بعض خوادم التطبيقات احتياجات فئة معينة من التطبيقات مثل المدونات، الموسوعات (wiki)، أو مواقع التسوق الإلكترونيّة، وأُخرى تدعى {{Glossary("CMS", "أنظمة إدارة المحتوى")}} (CMS) وهي أكثر عموميّة. إن كنت تبني موقعاً ديناميكياً، تمهل قليلاً لاختيار الأداة التي تناسب احتياجاتك. ما لم ترغب بتعلم بعض مهارات برمجة خوادم الويب (والذي يعد مجال مثير بحد ذاته!)، فأنت لا ترغَب بكتابة خادم تطبيق خاص بك. فهذا إعادة اختراع للعجلة!</p> + +<h2 dir="rtl" id="الخطوات_التالية">الخطوات التالية</h2> + +<p dir="rtl">الآن، وبمعرفتك لكيفيّة عمل خوادم الويب يمكنك:</p> + +<ul dir="rtl"> + <li>قراءة مقالة "<a href="/ar/docs/Learn/How_much_does_it_cost">كم يكلِف إنشاء شيء ما على الويب</a>"</li> + <li>تعلم المزيد حول <a href="/ar/docs/Learn/What_software_do_I_need">البرمجيات المتنوعة التي تحتاجها لبناء موقع</a></li> + <li>الانتقال إلى شيء عملي مثل <a href="/ar/docs/Learn/Upload_files_to_a_web_server">كيفيّة رفع الملفات إلى خادم الويب</a></li> +</ul> diff --git a/files/ar/learn/common_questions/كيفية_عمل/index.html b/files/ar/learn/common_questions/كيفية_عمل/index.html new file mode 100644 index 0000000000..2a3cd7e46f --- /dev/null +++ b/files/ar/learn/common_questions/كيفية_عمل/index.html @@ -0,0 +1,116 @@ +--- +title: كيف يعمل الإنترنت؟ +slug: Learn/Common_questions/كيفية_عمل +tags: + - الإنترنت + - درس + - دليل + - مبتدأ +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +<blockquote> +<div>{{LearnSidebar}}</div> +</blockquote> + +<div class="summary" dir="rtl"> +<p>يتحدث هذا المقال عن اﻹنترنت وكيفية عملها.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th dir="rtl"> + <p>لا يوجد، لكن حبذا لو تقرأ المقال الآتي أولا: <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Thinking_before_coding">كيف أبدأ بتصميم موقعي</a>.</p> + </th> + <td dir="rtl"> + <p><strong>متطلبات:</strong></p> + </td> + </tr> + <tr> + <th dir="rtl"> + <p>سوف تتعلم الأساسيات التقنية للبنية التحتية للويب والفرق بين الشابكة (الإنترنت) والويب.</p> + </th> + <td dir="rtl"> + <p><strong>الهدف:</strong></p> + </td> + </tr> + </tbody> +</table> + +<p dir="rtl"></p> + +<h2 dir="rtl" id="ملخص">ملخص</h2> + +<p dir="rtl">الشابكة (الإنترنت) هي عماد الويب. والبنية التحتية التي جعلته ممكنا. وفي الأساس الإنترنت هي شبكة واسعة من الحواسيب التي تتواصل فيما بينها.</p> + +<p dir="rtl"><a href="https://ar.wikipedia.org/wiki/%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA#%D8%A7%D9%84%D8%AA%D8%A7%D8%B1%D9%8A%D8%AE">تاريخ الإنترنت غير واضح تماما</a>. فقد بدأت في ستينات القرن الماضي كمشروع بحث للجيش الأمريكي، وبدعم العديد من الجامعات العمومية والشركات الخاصة تطورت إلى بنية تحتية عامة. التقانات المختلفة التي تدعم الإنترنت تطورت عبر الزمن، لكن الطريقة التي تعمل بها لم تتغير كثيرا: فالإنترنت هي طريقة اتصال الحواسيب مع بعضها وضمان أنه مهما حدث تبقى تلك الحواسيب متصلة.</p> + +<h2 dir="rtl" id="التعلم_الفعال">التعلم الفعال</h2> + +<ul dir="rtl"> + <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc">كيف تعمل الإنترنت في خمس دقائق</a>، فيديو لآرون تيتوس يشرح لك الأساسيات البسيطة للإنترنت.</li> +</ul> + +<h2 dir="rtl" id="نظرة_أعمق">نظرة أعمق</h2> + +<h3 dir="rtl" id="شبكة_بسيطة">شبكة بسيطة</h3> + +<p dir="rtl">عندما نرغب بجعل حاسوبين يتصلان ببعضهما، سنربطهما إما فيزيائيا (عادة ما يكون <a href="https://ar.wikipedia.org/wiki/%D9%83%D8%A8%D9%84_%D8%B9%D8%A8%D9%88%D8%B1_%D8%A5%D9%8A%D8%AB%D8%B1%D9%86%D8%AA">بكابل إيثرنت</a>) أو لاسلكيا (على سبيل المقال نظامي الوايفاي أو البلوتوث). جميع الحواسيب الحديثة تستطيع استعمال أي من هذه الارتباطات.</p> + +<div class="blockIndicator note"> +<p dir="rtl"> فيما تبقى من المقال سنتحدث فقط عن الكابلات الفيزيائية، لكن الشبكات اللاسلكية تعمل بنفس المبدأ.</p> +</div> + +<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> + +<p dir="rtl">شبكة كهذه ليست محدودة بحاسوبين فحسب، يمكنك ربط حواسيب أخرى قدر ما تريد. لكن سرعان ما تصبح هذه الشبكة معقدة. مثلا لنقل أنك تريد ربط عشر حواسيب فستحتاج إلى 45 كابلا مع تسعة قوابس في كل حاسوب!</p> + +<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> + +<p dir="rtl">لحل هذه المشكلة، يجب أن نربط كل حاسوب في الشبكة بحاسوب مصغر خاص يسمى <strong>روتر. </strong>هذا الروتر كعامل الإشارة في السكك الحديدية، لديه مهمة واحدة وهي ضمان وصول رسالة ما من حاسوب إلى الحاسوب المقصود الصحيح. لإرسال رسالة إلى الحاسوب B، على الحاسوب A أن يُرسل الرسالة إلى الروتر، الذي سيُوجهها بدوره إلى الحاسوب B ويضمن أن لا تُرسل إلى الحاسوب C مثلا.</p> + +<p dir="rtl">عند إضافة روتر إلى الشبكة من عشرة حواسيب، كل ما نحتاجه هو عشرة كابلات مع مقبس في كل حاسوب وروتر بعشرة مقابس.</p> + +<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> + +<h3 dir="rtl" id="شبكة_من_الشبكات">شبكة من الشبكات</h3> + +<ul dir="rtl"> + <li>إلى هذا الحد جيد جداً<strong>، </strong>ولكن مذا عن ربط المئات<strong>، </strong>الآلاف<strong>، </strong>المليارات من أجهزة الكمبيوتر<strong>؟</strong> بالطبع لا يستطيع جهاز توجيه (<u><em><strong>router</strong></em></u>) واحد أن يصل إلى هذا الحد<strong>،</strong> لكن<strong>،</strong> إذا قرأت بعناية<strong>,</strong> قلنا أن جهاز التوجيه هو جهاز كمبيوتر مثل أي جهاز آخر<strong>، </strong>إذن ما الذي يمنعنا من توصيل جهازي توجيه معاً<strong>،</strong> لاشئ<strong>، </strong>لذلك دعونا نفعل ذلك<strong>.</strong></li> +</ul> + +<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> + +<ul dir="rtl"> + <li>عن طريق توصيل أجهزة الكمبيوتر بأجهزة التوجيه (<em><strong>router</strong></em>)<strong>،</strong> ثم أجهزة التوجيه إلى أجهزة التوجيه<strong>، </strong>نحن قادرون على التوسع إلى ما لا نهاية<strong>.</strong></li> +</ul> + +<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> + +<p>Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a <em>modem</em>. This <em>modem</em> turns the information from our network into information manageable by the telephone infrastructure and vice versa.</p> + +<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> + +<p>So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special <em>routers</em> that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.</p> + +<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> + +<h3 id="Finding_computers">Finding computers</h3> + +<p>If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for <em>Internet Protocol</em>). It's an address made of a series of four numbers separated by dots, for example: <code>192.168.2.10</code>.</p> + +<p>That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human readable name called a <em>domain name</em>. For example, <code>google.com</code> is the domain name used on top of the IP address <code>173.194.121.32</code>. So using the domain name is the easiest way for us to reach a computer over the Internet.</p> + +<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h3 id="Internet_and_the_web">Internet and the web</h3> + +<p>As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called <em>Web servers</em>) can send messages intelligible to web browsers. The <em>Internet</em> is an infrastructure, whereas the <em>Web</em> is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and {{Glossary("IRC")}}.</p> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the Web works</a></li> + <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Understanding the difference between a web page, a web site, a web server and a search engine</a></li> + <li><a href="/en-US/docs/Learn/Understanding_domain_names">Understanding domain names</a></li> +</ul> diff --git a/files/ar/learn/css/building_blocks/index.html b/files/ar/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..8768d600eb --- /dev/null +++ b/files/ar/learn/css/building_blocks/index.html @@ -0,0 +1,90 @@ +--- +title: CSS building blocks +slug: Learn/CSS/Building_blocks +tags: + - Beginner + - CSS + - Learn + - NeedsTranslation + - TopicStub + - building blocks +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">This module carries on where <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.</p> + +<p class="summary">The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should have:</p> + +<ol> + <li>Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)</li> + <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> + <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> + <li>An understanding of the basics of CSS, as discussed in the <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> module.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/another device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></dt> + <dd>The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a></dt> + <dd>There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles, we'll run through the different types in great detail, seeing how they work. The sub-articles are as follows: + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></dt> + <dd>Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson, we will take a proper look at the CSS <em>Box Model</em>, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></dt> + <dd>In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></dt> + <dd>In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></dt> + <dd>In this lesson we will look at another important concept in CSS — <strong>overflow</strong>. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide, you will learn what it is and how to manage it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a></dt> + <dd>Every property used in CSS has a value or set of values that are allowed for that property. In this lesson, we will take a look at some of the most common values and units in use.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></dt> + <dd>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson, we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></dt> + <dd>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></dt> + <dd>Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></dt> + <dd>Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></dt> + <dd>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article, we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>Want to test your CSS skills? The following assessments will test your understanding of the CSS covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></dt> + <dd>This assessment tests your understanding of basic syntax, selectors, specificity, box model, and more.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></dt> + <dd>If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment, we'll challenge you to create an online template to achieve such a look.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></dt> + <dd>Here you'll get some practice in using background and border styling to create an eye-catching box.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced styling effects</a></dt> + <dd>This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.</dd> +</dl> diff --git a/files/ar/learn/css/building_blocks/selectors/index.html b/files/ar/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..9bc86d8abc --- /dev/null +++ b/files/ar/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,223 @@ +--- +title: CSS selectors +slug: Learn/CSS/Building_blocks/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">In {{Glossary("CSS")}}, selectors are used to target the {{glossary("HTML")}} elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, <a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To learn how CSS selectors work in detail.</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_selector">What is a selector?</h2> + +<p>You have met selectors already. A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the <em>subject of the selector</em>.</p> + +<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>In earlier articles you met some different selectors, and learned that there are selectors that target the document in different ways — for example by selecting an element such as <code>h1</code>, or a class such as <code>.special</code>.</p> + +<p>In CSS, selectors are defined in the CSS Selectors specification; like any other part of CSS they need to have support in browsers for them to work. The majority of selectors that you will come across are defined in the <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a>, which is a mature specification, therefore you will find excellent browser support for these selectors.</p> + +<h2 id="Selector_lists">Selector lists</h2> + +<p>If you have more than one thing which uses the same CSS then the individual selectors can be combined into a <em>selector list</em> so that the rule is applied to all of the individual selectors. For example, if I have the same CSS for an <code>h1</code> and also a class of <code>.special</code>, I could write this as two separate rules.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>I could also combine these into a selector list, by adding a comma between them.</p> + +<pre class="brush: css notranslate"><code>h1, .special { + color: blue; +} </code></pre> + +<p>White space is valid before or after the comma. You may also find the selectors more readable if each is on a new line.</p> + +<pre class="brush: css notranslate"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>In the live example below try combining the two selectors which have identical declarations. The visual display should be the same after combining them.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> + +<p>When you group selectors in this way, if any selector is invalid the whole rule will be ignored.</p> + +<p>In the following example, the invalid class selector rule will be ignored, whereas the <code>h1</code> would still be styled.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p>When combined however, neither the <code>h1</code> nor the class will be styled as the entire rule is deemed invalid.</p> + +<pre class="brush: css notranslate"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="Types_of_selectors">Types of selectors</h2> + +<p>There are a few different groupings of selectors, and knowing which type of selector you might need will help you to find the right tool for the job. In this article's subarticles we will look at the different groups of selectors in more detail.</p> + +<h3 id="Type_class_and_ID_selectors">Type, class, and ID selectors</h3> + +<p>This group includes selectors that target an HTML element such as an <code><h1></code>.</p> + +<pre class="brush: css notranslate">h1 { }</pre> + +<p>It also includes selectors which target a class:</p> + +<pre class="brush: css notranslate">.box { }</pre> + +<p>or, an ID:</p> + +<pre class="brush: css notranslate">#unique { }</pre> + +<h3 id="Attribute_selectors">Attribute selectors</h3> + +<p>This group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element:</p> + +<pre class="brush: css notranslate">a[title] { }</pre> + +<p>Or even make a selection based on the presence of an attribute with a particular value:</p> + +<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> + +<h3 id="Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</h3> + +<p>This group of selectors includes pseudo-classes, which style certain states of an element. The <code>:hover</code> pseudo-class for example selects an element only when it is being hovered over by the mouse pointer:</p> + +<pre class="brush: css notranslate">a:hover { }</pre> + +<p>It also includes pseudo-elements, which select a certain part of an element rather than the element itself. For example, <code>::first-line</code> always selects the first line of text inside an element (a <code><p></code> in the below case), acting as if a <code><span></code> was wrapped around the first formatted line and then selected.</p> + +<pre class="brush: css notranslate">p::first-line { }</pre> + +<h3 id="Combinators">Combinators</h3> + +<p>The final group of selectors combine other selectors in order to target elements within our documents. The following for example selects paragraphs that are direct children of <code><article></code> elements using the child combinator (<code>></code>):</p> + +<pre class="brush: css notranslate">article > p { }</pre> + +<h2 id="Next_steps">Next steps</h2> + +<p>You can take a look at the reference table of selectors below for direct links to the various types of selectors in this Learn section or on MDN in general, or continue on to start your journey by finding out about <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">type, class, and ID selectors</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Reference_table_of_selectors">Reference table of selectors</h2> + +<p>The below table gives you an overview of the selectors you have available to use, along with links to the pages in this guide which will show you how to use each type of selector. I have also included a link to the MDN page for each selector where you can check browser support information. You can use this as a reference to come back to when you need to look up selectors later in the material, or as you experiment with CSS generally.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Example</th> + <th scope="col">Learn CSS tutorial</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a></td> + <td><code>h1 { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Type selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a></td> + <td><code>* { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector">The universal selector</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a></td> + <td><code>.box { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Class selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/ID_selectors">id selector</a></td> + <td><code>#unique { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a></td> + <td><code>a[title] { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a></td> + <td><code>article p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector">Descendant combinator</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a></td> + <td><code>article > p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator">Child combinator</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a></td> + <td><code>h1 + p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling">Adjacent sibling</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling">General sibling</a></td> + </tr> + </tbody> +</table> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> diff --git a/files/ar/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ar/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..749f576534 --- /dev/null +++ b/files/ar/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,119 @@ +--- +title: 'Type, class, and ID selectors' +slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<p>In this lesson we will take a look at the simplest selectors that are available, which you will probably use the most in your work.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To learn about the different CSS selectors we can use to apply CSS to a document.</td> + </tr> + </tbody> +</table> + +<h2 id="Type_selectors">Type selectors</h2> + +<p>A <strong>type selector</strong> is sometimes referred to as a <em>tag name selector</em> or <em>element selector</em>, because it selects an HTML tag/element in your document. In the example below we have used the span, em and strong selectors. All instances of <code><span></code>, <code><em></code> and <code><strong></code> elements are therefore styled accordingly.</p> + +<p><strong>Try adding a CSS rule to select the <code><h1></code> element and change its color to blue.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> + +<h2 id="The_universal_selector">The universal selector</h2> + +<p>The universal selector is indicated by an asterisk (<code>*</code>) and selects everything in the document (or inside the parent element if it is being chained together with another element and a descendant combinator). In the following example we have used the universal selector to remove the margins on all elements. This means that instead of the default styling added by the browser, which spaces out headings and paragraphs with margins, everything is close together and we can't see the different paragraphs easily.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> + +<p>This kind of behavior can sometimes be seen in "reset stylesheets", which strips out all of the browser styling. Since the universal selector makes global changes, we use it to deal with very specific situations such as the one outlined below.</p> + +<h3 id="Using_the_universal_selector_to_make_your_selectors_easier_to_read">Using the universal selector to make your selectors easier to read</h3> + +<p>One use of the universal selector is to make selectors easier to read and more obvious in terms of what they are doing. For example, if I wanted to select the first child of any descendant element of <code><article></code> , no matter what element it was, and make it bold, I could use the {{cssxref(":first-child")}} selector, which we will learn more about in the lesson on <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes and pseudo-elements</a>, as a descendant selector along with the <code><article></code> element selector: </p> + +<pre class="brush: css notranslate">article :first-child { + +}</pre> + +<p>This could be confused however with <code>article:first-child</code>, which will select any <code><article></code> element that is the first child of another element.</p> + +<p>To avoid this confusion we can add the universal selector to the <code>:first-child</code> selector, so it is obvious what the selector is doing. It is selecting <em>any</em> element which is the first-child of any descendant element of <code><article></code>:</p> + +<pre class="brush: css notranslate">article *:first-child { + +} </pre> + +<p>Although both do the same thing, the readability is significantly improved.</p> + +<h2 id="Class_selectors">Class selectors</h2> + +<p>The class selector starts with a full stop (<code>.</code>) character and will select everything in the document with that class applied to it. In the live example below we have created a class called <code>.highlight</code>, and have applied it to several places in my document. All of the elements that have the class applied are highlighted.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> + +<h3 id="Targeting_classes_on_particular_elements">Targeting classes on particular elements</h3> + +<p>You can create a selector that will target specific elements with the class applied. In this next example we will highlight a <code><span></code> with a class of <code>highlight</code> differently to an <code><h1></code> heading with a class of <code>highlight</code>. We do this by using the type selector for the element I want to target, with the class appended using a dot, with no white space in between.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> + +<p>This approach reduces the scope of a rule as the rule will only apply to that particular element & class combination; so you would need to add another selector if you decided the rule should apply to other elements too.</p> + +<h3 id="Target_an_element_if_it_has_more_than_one_class_applied">Target an element if it has more than one class applied</h3> + +<p>You can apply multiple classes to an element and target them individually, or only select the element when all of the classes in the selector are present. This can be helpful when building up components that can be combined in different ways on your site.</p> + +<p>In the example below we have a <code><div></code> that contains a note. The grey border is applied when the box has a class of <code>notebox</code>. If it also has a class of <code>warning</code> or <code>danger</code>, we change the {{cssxref("border-color")}}.</p> + +<p>We can tell the browser that we only want to match the element if it has two classes applied by chaining them together with no white space between them. You'll see that the last <code><div></code> doesn't get any styling applied, as it only has the <code>danger</code> class; it needs <code>notebox</code> as well to get anything applied.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> + +<h2 id="ID_Selectors">ID Selectors</h2> + +<p>An ID selector begins with a <code>#</code> rather than a full stop character, but is basically used in the same way as a class selector. An ID however can be used only once per document. It can select an element that has the <code>id</code> set on it, and you can precede the ID with a type selector to only target the element if both the element and ID match. You can see both of these uses in the following example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: As we learned in the lesson on specificity, an ID has high specificity and will overrule most other selectors. This can make them difficult to deal with. In most cases it is preferable to add a class to the element rather than use an ID, however if using the ID is the only way to target the element — perhaps because you do not have access to the markup and so cannot edit it — this will work.</p> +</div> + +<h2 id="In_the_next_article">In the next article</h2> + +<p>We'll continue exploring selectors by looking at <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">attribute selectors</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> diff --git a/files/ar/learn/css/css_layout/index.html b/files/ar/learn/css/css_layout/index.html new file mode 100644 index 0000000000..a0fadc9403 --- /dev/null +++ b/files/ar/learn/css/css_layout/index.html @@ -0,0 +1,77 @@ +--- +title: تخطيط التصميم في CSS +slug: Learn/CSS/CSS_layout +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - NeedsTranslation + - Positioning + - TopicStub + - alignment + - flexbox + - float + - table +translation_of: Learn/CSS/CSS_layout +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should already:</p> + +<ol> + <li>Have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> + <li>Be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li> + <li>Understand how to <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt> + <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></dt> + <dd>Elements on webpages lay themselves out according to <em>normal flow</em> - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> + <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt> + <dd>CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many feature that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt> + <dd>Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt> + <dd>Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></dt> + <dd>The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></dt> + <dd>Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></dt> + <dd> + <p>In this module we recommend using Flexbox and Grid as the main layout methods for your designs. However there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.</p> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension</a></dt> + <dd>An assessment to test your knowledge of different layout methods by laying out a webpage.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt> + <dd>This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.</dd> + <dt></dt> +</dl> diff --git a/files/ar/learn/css/first_steps/index.html b/files/ar/learn/css/first_steps/index.html new file mode 100644 index 0000000000..34b8e9fefb --- /dev/null +++ b/files/ar/learn/css/first_steps/index.html @@ -0,0 +1,46 @@ +--- +title: CSS first steps +slug: Learn/CSS/First_steps +translation_of: Learn/CSS/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should have:</p> + +<ol> + <li>Basic familiarity with using computers, and using the Web passively (i.e. looking at it, consuming the content.)</li> + <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> + <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which will take you through all the basic theory of CSS, and provide opportunities for you to test out some skills.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></dt> + <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, with a simple syntax example, and also covers some key terms about the language.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></dt> + <dd>In this article we will take a simple HTML document and apply CSS to it, learning some practical things about the language along the way.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></dt> + <dd>Now that you have an idea about what CSS is and the basics of using it, it is time to look a little deeper into the structure of the language itself. We have already met many of the concepts discussed here; you can return to this one to recap if you find any later concepts confusing.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></dt> + <dd>We have learned the basics of CSS, what it is for and how to write simple stylesheets. In this lesson we will take a look at how a browser takes CSS and HTML and turns that into a webpage.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></dt> + <dd>With the things you have learned in the last few lessons you should find that you can format simple text documents using CSS, to add your own style to them. This article gives you a chance to do that.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt> + <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to CSS</em> module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.</dd> +</dl> diff --git a/files/ar/learn/css/index.html b/files/ar/learn/css/index.html new file mode 100644 index 0000000000..3a56c01335 --- /dev/null +++ b/files/ar/learn/css/index.html @@ -0,0 +1,63 @@ +--- +title: CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Debugging + - Landing + - NeedsContent + - NeedsTranslation + - Topic + - TopicStub + - length + - specificity +translation_of: Learn/CSS +--- +<p class="summary" dir="rtl">الترجمة الحرفية للـ {{glossary("CSS")}} لن تفيدك كثيراً ولكن من باب العلم بها فمعناها (أوراق النمط المتعاقب)، لكن دعنا نتعرف أكثر ما هي الـ CSS وما الذي تقوم به، هي التقنية الأولى من تقنيات الويب التي يجب أن تبدأ بها رحلتك في تعلم تطوير الويب، في حين تقوم بإستخدام الـ HTML في إنشاء العناصر الأساسية للصفحة (هيكلة صفحة الويب)، تقوم بإستخدام الـ CSS في إضفاء الشكل الجمالي لصفحات الويب من خلال إضافة الألوان والمساحات وأماكن العناصر المختلفة، أو إضافة تأثيرات الحركة على بعض العناصر في صفحة الويب.</p> + +<h2 dir="rtl" id="مسار_التعلم_المتبع">مسار التعلم المتبع</h2> + +<p dir="rtl">يجب عليك تعلم اساسيات HTML أولاً قبل الشروع في تعلم الـ CSS، فكيف تقوم بإضافة الجماليات على صفحة ويب لم يتم إنشاءها بعد؟ لذلك ننصحك بتعمل أساسيات الـ HTML من هنا <a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة في الـ HTML</a> بعد ذلك يمكنك تعلم:</p> + +<ul dir="rtl"> + <li>تبدأ بتعلم <a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة في الـ CSS</a></li> + <li><a href="/ar/Learn/HTML#Modules">نماذج الـ HTML الأكثر تقدماً</a></li> + <li><a href="/ar/docs/Learn/JavaScript">جافاسكربت</a>، وكيف تقوم بإستخدامها في إضافة وظائف ديناميكية لصفحات الويب.</li> +</ul> + +<p dir="rtl">مباشرةً عندما تجد نفسك مستوعباً لأساسيات الـ HTML, ننصحك بتعلم الـ HTML والـ CSS بشكل متزامن (في نفس الوقت) لانك غالباً ستحتاج إلى تطوير نفسك في كليهما بشكل مستمر. وأيضاً لان الـ HTML شيقة في التعلم لسهولة تطبيقها خلال رحلة تعلمك، وستجد أنك تستوعبها سريعاً، وستجد أيضاً انها اكثر متعه عندما تقوم بتطبيق ما تعلمته من الـ CSS. وتذكر دائماً انك لن تستطيع تعلم الـ CSS بدون معرفة الـ HTML.</p> + +<p dir="rtl">قبل البداية في تعمل هذه التقنية، لابد من تعلم أساسيات التعامل مع الحاسب وإستخدام الويب، أيضاً لابد من تهيئة بيئة العمل التي تحتاجها لإنشاء صفحات الويب كما تم شرحها في<a href="/ar/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> تنصيب البرامج المستخدمة في بيئة العمل</a>، وكيفية إنشاء وإدارة الملفات كما تم شرحنا في<a href="/ar/docs/Learn/Getting_started_with_the_web/Dealing_with_files"> التعامل مع الملفات</a>، هذين المقالين أجزاء من ملف شرح<a href="/ar/docs/Learn/Getting_started_with_the_web"> البداية في تعلم الويب</a> للمبتدئين.</p> + +<p dir="rtl">وننصحك أيضاً أن تقوم بتعلم<a href="/ar/docs/Learn/Getting_started_with_the_web"> البداية في تعلم الويب</a> قبل الشروع في هذا المقال، على كل حال هذا ليس ضرورياً للغاية، كثيرا مما تم شرحه في أساسيات CSS تم شرحه أيضاً في مقدمة CSS ولكن بشكل أكثر تفصيلاً.</p> + +<h2 dir="rtl" id="العناصر">العناصر</h2> + +<p dir="rtl">هذا الموضوع يحتوى على العناصر التالية، نقترح عليك أن تبدأ في تعلمهم بهذا الترتيب، ويجب عليك بشكل مؤكد أن تبدأ بالعنصر الأول لأهميته.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/CSS/Introduction_to_CSS">مقدمة في CSS</a></dt> + <dd dir="rtl">في هذا الجزء سنبدأ في تعلم أساسيات كيفية عمل الـ CSS وسنقوم بشرح المحددات (Selectors) والخصائص (Properties) وكيفية كتاب قواعد الـ CSS وكيفية تطبيق CSS على عناصر HTML، كيف تحدد الطول واللون والوحدات الأخرى في CSS وسنقوم أيضاً بشرح وراثة القيم وأساسيات العناصر الأساسية في الصفحة (Box Model) وكيفية معالجة الأخطاء في CSS.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/CSS/Styling_text">تنسيق/شكل الخطوط</a></dt> + <dd dir="rtl">هنا ، ننظر إلى أساسيات تصميم النصوص ، بما في ذلك ضبط الخط ، السماكة ، والميول ; الخط والمسافات بين الحروف </dd> + <dd dir="rtl">هنا نلقي نظرة على أساسيات تصميم النص ، بما في ذلك تعيين الخط والخط الجريء والخط المائل وتباعد الأسطر والحروف والظلال المسقطة وميزات النص الأخرى. ننهي الوحدة من خلال النظر في تطبيق الخطوط المخصصة على صفحتك وقوائم التصميم والروابط.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> + <dd dir="rtl">بعد ذلك ، نلقي نظرة على مربعات التصميم ، وهي إحدى الخطوات الأساسية نحو تخطيط صفحة الويب. في هذه الوحدة ، نلخص نموذج الصندوق ثم ننظر إلى التحكم في تخطيطات الصندوق عن طريق تعيين المساحة المتروكة والحدود والهوامش ، وتعيين ألوان خلفية مخصصة وصور وميزات أخرى ، وميزات فاخرة مثل الظلال المسقطة والمرشحات على الصناديق.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> + <dd dir="rtl">في هذه المرحلة ، اطلعنا بالفعل على أساسيات CSS ، وكيفية تصميم النص ، وكيفية تصميم ومعالجة المربعات الموجودة في المحتوى الخاص بك. حان الوقت الآن للنظر في كيفية وضع مربعاتك في المكان المناسب بالنسبة إلى إطار العرض ، وبعضها البعض. لقد قمنا بتغطية المتطلبات الأساسية اللازمة حتى تتمكن الآن من التعمق في تخطيط CSS ، والنظر في إعدادات العرض المختلفة ، وطرق التخطيط التقليدية التي تتضمن العوامة وتحديد المواقع ، وأدوات التخطيط الجديدة المتشعبة مثل flexbox.</dd> + <dt dir="rtl">Responsive design (TBD)</dt> + <dd dir="rtl">مع وجود العديد من الأنواع المختلفة من الأجهزة التي يمكنها تصفح الويب هذه الأيام ،<a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) أصبحت مهارة تطوير الويب الأساسية. ستغطي هذه الوحدة المبادئ والأدوات الأساسية لـ RWD ، وتشرح كيفية تطبيق CSS مختلفة على مستند اعتمادًا على ميزات الجهاز مثل عرض الشاشة ، والتوجيه ، والدقة ، واستكشاف التقنيات المتاحة لتقديم الفيديو والصور المختلفة اعتمادًا على هذه الميزات.</dd> +</dl> + +<h2 dir="rtl" id="Solving_common_CSS_problems">Solving common CSS problems</h2> + +<p dir="rtl"><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a webpage.</p> + +<h2 dir="rtl" id="See_also">See also</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt> + <dd dir="rtl">The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd> +</dl> diff --git a/files/ar/learn/front-end_web_developer/index.html b/files/ar/learn/front-end_web_developer/index.html new file mode 100644 index 0000000000..a062423f96 --- /dev/null +++ b/files/ar/learn/front-end_web_developer/index.html @@ -0,0 +1,189 @@ +--- +title: Front-end web developer +slug: Learn/Front-end_web_developer +translation_of: Learn/Front-end_web_developer +--- +<p><font><font>{{Learnsidebar}}</font></font></p> + +<p><font><font>مرحبًا بك في مسار تعلم مطوري الويب الأمامي!</font></font></p> + +<p><font><font>هنا نقدم لك دورة منظمة ستعلمك كل ما تحتاج إلى معرفته لتصبح مطور ويب أمامي. </font><font>ما عليك سوى العمل من خلال كل قسم ، وتعلم مهارات جديدة (أو تحسين المهارات الحالية) أثناء تقدمك. </font><font>يتضمن كل قسم تمارين وتقييمات لاختبار فهمك قبل المضي قدمًا.</font></font></p> + +<h2 id="الموضوعات_المشمولة"><font><font>الموضوعات المشمولة</font></font></h2> + +<p><font><font>الموضوعات المشمولة هي:</font></font></p> + +<ul> + <li><font><font>الإعداد الأساسي وتعلم كيفية التعلم</font></font></li> + <li><font><font>معايير الويب وأفضل الممارسات (مثل إمكانية الوصول والتوافق عبر المتصفحات)</font></font></li> + <li><font><font>HTML ، اللغة التي تعطي بنية محتوى الويب والمعنى</font></font></li> + <li><font><font>CSS ، اللغة المستخدمة في تصميم صفحات الويب</font></font></li> + <li><font><font>JavaScript ، لغة البرمجة النصية المستخدمة لإنشاء وظائف ديناميكية على الويب</font></font></li> + <li><font><font>الأدوات المستخدمة لتسهيل تطوير الويب الحديث من جانب العميل.</font></font></li> +</ul> + +<p><font><font>يمكنك العمل من خلال الأقسام بالترتيب ، ولكن كل قسم قائم بذاته. </font><font>على سبيل المثال ، إذا كنت تعرف HTML بالفعل ، يمكنك التخطي إلى قسم CSS.</font></font></p> + +<h2 id="المتطلبات_الأساسية"><font><font>المتطلبات الأساسية</font></font></h2> + +<p><font><font>لا تحتاج إلى أي معرفة سابقة لبدء هذه الدورة. </font><font>كل ما تحتاجه هو جهاز كمبيوتر يمكنه تشغيل متصفحات الويب الحديثة واتصال بالإنترنت والرغبة في التعلم.</font></font></p> + +<p><font><font>إذا لم تكن متأكدًا مما إذا كان تطوير الويب من أجلك أم لا ، و / أو كنت تريد مقدمة لطيفة قبل البدء في دورة تدريبية أطول وأكثر اكتمالًا ، فقم بالعمل من خلال </font></font><a href="/en-US/docs/Learn/Getting_started_with_the_web"><font><font>البدء باستخدام</font></font></a><font><font> وحدة </font><a href="/en-US/docs/Learn/Getting_started_with_the_web"><font>الويب</font></a><font> أولاً.</font></font></p> + +<h2 id="الحصول_على_مساعدة"><font><font>الحصول على مساعدة</font></font></h2> + +<p><font><font>لقد حاولنا أن نجعل تعلم تطوير الواجهة الأمامية أمرًا مريحًا قدر الإمكان ، ولكن ربما ستظل عالقًا لأنك لا تفهم شيئًا ، أو أن بعض التعليمات البرمجية لا تعمل.</font></font></p> + +<p><font><font>لا داعي للذعر. </font><font>نتعثر جميعًا ، سواء كنا مبتدئين أو مطورين ويب محترفين. </font><font>في </font></font><a href="/en-US/docs/Learn/Learning_and_getting_help"><font><font>التعلم والحصول على تعليمات</font></font></a><font><font> المادة يوفر لك مجموعة من النصائح ليبحث عن معلومات ومساعدة نفسك. </font><font>إذا كنت لا تزال عالقًا ، فلا تتردد في نشر سؤال في </font></font><a href="https://discourse.mozilla.org/c/mdn/learn/"><font><font>منتدى الخطاب</font></font></a><font><font> الخاص بنا </font><font>.</font></font></p> + +<p><font><font>هيا بنا نبدأ. </font><font>حظا سعيدا!</font></font></p> + +<h2 id="مسار_التعلم"><font><font>مسار التعلم</font></font></h2> + +<h3 id="البدء"> <strong>البدء</strong> </h3> + +<p>الوقت اللازم للانهاء: 1.5 - 2 ساعة</p> + +<p><strong>المتطلبات الاساسية </strong></p> + +<p>لا شيء عدا المعرفة في اساسيات الحاسب الالي.</p> + +<h4 id="كيف_اعرف_انني_جاهز_للبدء؟"><strong>كيف اعرف انني جاهز للبدء؟</strong></h4> + +<p>There are no assessments in this part of the course. But make sure you don't skip. It is important to get you set up and ready to do work for exercises later on in the course.</p> + +<h4 id="ارشادات_قبل_البدء">ارشادات قبل البدء</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> — basic tool setup (15 min read)</li> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Background on the web and web standards</a> (45 min read)</li> + <li><a href="/en-US/docs/Learn/Learning_and_getting_help">Learning and getting help</a> (45 min read)</li> +</ul> + +<h3 id="Semantics_and_structure_with_HTML">Semantics and structure with HTML</h3> + +<p>الوقت اللازم للانهاء: 35 - 50 ساعة</p> + +<p><strong>المتطلبات الاساسية </strong></p> + +<p><span style="">Nothing except basic computer literacy, and a basic web development environment.</span></p> + +<h4 id="How_will_I_know_Im_ready_to_move_on">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> (15–20 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> (15–20 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/HTML/Tables">HTML tables</a> (5–10 hour read/exercises)</li> +</ul> + +<h3 id="Styling_and_layout_with_CSS">Styling and layout with CSS</h3> + +<p>Time to complete: 90–120 hours</p> + +<h4 id="Prerequisites">Prerequisites</h4> + +<p>It is recommended that you have basic HTML knowledge before starting to learn CSS. You should at least study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> first.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_2">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules_2">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> (10–15 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a> (35–45 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a> (15–20 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a> (30–40 hour read/exercises)</li> +</ul> + +<h4 id="Additional_resources">Additional resources</h4> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a></li> +</ul> + +<h3 id="Interactivity_with_JavaScript">Interactivity with JavaScript</h3> + +<p>Time to complete: 135–185 hours</p> + +<h4 id="Prerequisites_2">Prerequisites</h4> + +<p>It is recommended that you have basic HTML knowledge before starting to learn JavaScript. You should at least study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> first.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_3">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules_3">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> (30–40 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a> (25–35 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a> (25–35 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a> (30–40 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a> (25–35 hour read/exercises)</li> +</ul> + +<h3 id="Web_forms_—_Working_with_user_data">Web forms — Working with user data</h3> + +<p>Time to complete: 40–50 hours</p> + +<h4 id="Prerequisites_3">Prerequisites</h4> + +<p>Forms require HTML, CSS, and JavaScript knowledge. Given the complexity of working with forms, it is a dedicated topic.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_4">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules_4">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Forms">Web forms</a> (40–50 hours)</li> +</ul> + +<h3 id="Making_the_web_work_for_everyone">Making the web work for everyone</h3> + +<p>Time to complete: 60–75 hours</p> + +<h4 id="Prerequisites_4">Prerequisites</h4> + +<p>It is a good idea to know HTML, CSS, and JavaScript before working through this section. Many of the techniques and best practices touch on multiple technologies.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_5">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules_5">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-browser testing</a> (25–30 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/Accessibility">Accessibility</a> (20–25 hour read/exercises)</li> +</ul> + +<h3 id="Modern_tooling">Modern tooling</h3> + +<p>Time to complete: 55–90 hours</p> + +<h4 id="Prerequisites_5">Prerequisites</h4> + +<p>It is a good idea to know HTML, CSS, and JavaScript before working through this section, as the tools discussed work alongside many of these technologies.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_6">How will I know I'm ready to move on?</h4> + +<p><font><font>لا توجد مقالات تقييم محددة في هذه المجموعة من الوحدات. </font><font>تُعدك دروس دراسة الحالة في نهاية الوحدتين الثانية والثالثة لاستيعاب أساسيات الأدوات الحديثة.</font></font></p> + +<h4 id="الوحدات"><font><font>الوحدات</font></font></h4> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub"><font><font>Git و GitHub</font></font></a><font><font> (قراءة لمدة 5 ساعات)</font></font></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools"><font><font>فهم أدوات تطوير الويب من جانب العميل</font></font></a><font><font> (قراءة 20-25 ساعة)</font></font></li> + <li> + <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks"><font><font>فهم أطر عمل جافا سكريبت من جانب العميل</font></font></a><font><font> (قراءة / تمارين لمدة 30-60 ساعة)</font></font></p> + </li> +</ul> diff --git a/files/ar/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ar/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..ba85c7a629 --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,112 @@ +--- +title: التعامل مع الملفات +slug: Learn/Getting_started_with_the_web/Dealing_with_files +tags: + - البدء مع الويب + - لغة ترميز النص الفائق + - مبتدئين +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p dir="rtl">يتألف الموقع من العديد من الملفات: المحتوى النصي، والنص المصدري، وملفات التصميم (ملفات الأنماط)، والوسائط، والكثير من الملفات الأخرى. عندما تبني موقعك، سوف تحتاج لتجميع جميع تلك الملفات بهيكليّة منطقيّة، وتتأكد من أنَّهم قادرين على الوصول لبعضهم البعض. مقالة <a href="https://developer.mozilla.org/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a> تشرح كيف يمكنك إعداد هيكلة ملفات منطقيّة لموقعك، وما المشاكل التي يجب أن تكون حذر منها.</p> +</div> + +<h2 dir="rtl" id="في_أي_مكان_يجب_أن_أضع_موقعي؟">في أي مكان يجب أن أضع موقعي؟</h2> + +<p dir="rtl">عندما تكون قيد العمل على موقع محلياً على حاسبك، فيجب عليك وضع جميع الملفات في مجلد واحد يعكس هيكلة الملفات الموجودة على {{Glossary("Server", "الخادم") }}. يمكنك وضع ذلك المجلد في أي مكان تريد، ولكن يجب أن تحرص على وضعه في مكان يسهل عليك العثور عليه، في سطح المكتب مثلاً، أو في مجلد المنزل، أو في مجلد الجذر على القرص الصلب.</p> + +<ol dir="rtl"> + <li>اختر مكان لتحتفظ فيه بملفات المشروع. قم بإنشاء مجلد في ذلك المكان ولندعوه بـ <code>web-projects</code> على سبيل المثال (أو أي شيء مشابه). في هذا المجلد سيكون جميع ملفات مشاريعك.</li> + <li>في نفس المجلد، أنشئ مُجلداً آخر وسمه <code>test-site</code> (أو شيء أكثر دلالةً).</li> +</ol> + +<h2 dir="rtl" id="حالة_الحروف_والمسافات">حالة الحروف والمسافات</h2> + +<p dir="rtl">ستلاحظ خلال هذه المقالة أننا سنخبرك أن تسمي جميع المجلدات والملفات بأحرف صغيرة (lowercase) وبدون مسافات. وهذا بسبب أنَّ:</p> + +<ol dir="rtl"> + <li>العديد من الحواسيب، وخاصةً خوادم الويب، حسّاسة لحالة الحروف. فعلى سبيل المثال، إذا وضعت صورة في موقعك في المسار <code>test-site/MyImage.jpg</code>، ومن ثم في ملف آخر حاولتَ استدعاء تلك الصورة بالاسم <code>test-site/myimage.jpg</code> قد لا ينجح الاستدعاء.</li> + <li>الخوادم، وخوادم الويب، ولغات البرمجة لاتتعامل مع المسافات بشكل جيد. فعلى سبيل المثال، إذا قمت باستخدام مسافات خلال كتابتك لاسم ملفك، بعض الأنظمة قد تعامل اسم الملف على أنَّه اسم لملفين. وبعض الخوادم ستستبدل المسافات في اسم ملفك ب "%20" (رمز المسافات في روابط URI)، مما سيؤدي إلى تلف جميع الروابط. من الأفضل الفصل بين الكلمات باستخدام شرطات بدلاً من شرطة السفلية: <code>my-file.html</code> بدلاً من <code>my_file.html</code>.</li> +</ol> + +<p dir="rtl">الجواب القصير أنَّه يجب عليك استخدام شرطة في اسماء ملفاتك. يعامل مُحرِّك البحث جوجل الشرطة على أنَّها فارزة للكلمة، ولكنه لا يعامل الشرطة السفلية بهذه الطريقة. لهذه الأسباب، من الأفضل الاعتياد على كتابة اسماء مجلداتك وملفاتك بدون مسافات وبكلمات منفصلة باستخدام شرطات، على الأقل حتى تبدأ بمعرفة ماذا تفعل (تصل لمرحلة متقدمة قليلاً بالتعلُّم). وبهذه الطريقة ستواجه مشاكل أقل لاحقاً أثناء تعلمك.</p> + +<h2 dir="rtl" id="كيف_يجب_أن_تكون_هكيليّة_الملفات_لموقعي؟">كيف يجب أن تكون هكيليّة الملفات لموقعي؟</h2> + +<p dir="rtl">الآن دعنا نأخذ نظرة على هيكليّة الملفات للموقع التجريبي خاصتنا. أكثر الأشياء شيوعاً التي سنقوم بها في أي موقع هي إنشاء ملف ل.ت.ن.ف (لغة ترميز النص الفائق - HTML) يسمى index ومجلدات تحوي الصور، وملفات التصميم، والملفات البرمجيّة. دعنا الآن ننشئ الأشياء التالية:</p> + +<ol dir="rtl"> + <li><strong>الملف <code>index.html</code></strong>: يحوي هذا الملف عادةً على محتويات الصفحة الرئيسية لموقعك، والتي تحتوي على النصوص والصور التي سيراها الناس عندما سيزورون الموقع. استخدم محرِّر النصوص وأنشئ ملفاً جديداً بالاسم <code>index.html</code> ومن ثم احفظه بداخل المجلد <code>text-site</code>.</li> + <li><strong>المجلد</strong> <strong><code>images</code></strong>: سيوضع في هذا المجلد جميع الصور التي ستستخدمها في موقعك. أنشئ مجلداً يسمى <code>images</code> بداخل المجلد <code>test-site</code>.</li> + <li><strong>المجلد <code>styles</code></strong>: سيحتوي هذا المجلد على جميع ملفات ص.أ.ا (صفحات الأنماط الانسيابية - CSS) المُستخدمة لتنسيق محتوى الموقع.</li> + <li><strong>مجلد <code>scripts</code></strong>: سيحتوي هذا المجلد على جميع ملفات الجافالسكربت (JavaScript) المُستخدمة لإضافة مزايا تفاعليّة لموقعك (مثال: تحميل بيانات عندما يتم الضغط على أزرار معينة). أنشئ مجلد يدعى <code>scripts</code> بداخل المجلد <code>test-site</code>.</li> +</ol> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: على الحواسيب بنظام ويندوز قد تواجه صعوبة برؤية اسماء الملفات، وذلك لأنَّ نظام ملفات الويندوز يحتوي على خيار <strong>إخفاء لاحقة أنواع الملفات المعروفة</strong> مُمكناً بشكل إفتراضي. يمكنك تعطيل هذا الخيار عادةً بالذهاب إلى متصفح ملفات ويندوز واختيار الخيار <strong>خيارات المجلد...</strong>، وإزالة علامة الصح عن الخيار <strong>إخفاء لاحقة أنواع الملفات المعروفة</strong>، وبعدها قم بالضغط على <strong>موافق</strong>. للمزيد من المعلومات حول إصدار الويندوز خاصتك، قم بالبحث في الإنترنت.</p> +</div> + +<h2 dir="rtl" id="مسارات_الملفات">مسارات الملفات</h2> + +<p dir="rtl">لتجعل الملفات تصل لبعضها البعض عليك توفير مسار الملف لكل واحدٍ منهم (أو بمعنى آخر عنوان مكان تواجد كل ملف). لتوضيح هذا، سنضع شيفرة صغيرة في ملف <code>index.html</code>، وسنجعلها تُظهِر الصورة التي اخترتها في مقالة <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"كيف سيكون مظهر موقعك؟"</a>.</p> + +<ol dir="rtl"> + <li>انسخ الصورة التي اخترتها وقم بوضعها في المجلد <code>images</code>.</li> + <li>افتح الملف <code>index.html</code> وقم بوضع هذه الشيفرة بداخله (كما أدناه). لا تهتم حيال ما تعنيه تلك الشيفرة حالياً (سنتكلم عنها بالتفصيل لاحقاً في السلسلة). + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="" alt="My test image"> + </body> +</html> </pre> + </li> + <li>السطر <code><"img src="" alt="My test image></code> هو التعليمة التي تُستخدَم لعرض صورة في الصفحة. علينا إخبار ل.ت.ن.ف أيّة صورة نريد. توجد هذه الصورة في المجلد <em>images</em>، والذي يقع في نفس المجلد الذي يوجد فيه الملف <code>index.html</code>. لتستطيع الصفحة أن تصل لمجلد تلك الصورة، نحن بحاجة إلى وضع المسار التالي <code>images/your-image-filename</code>. على سبيل المثال، إن كانت صورتنا تسمى <code>firefox-icon.png</code> إذاً مسار الملف سيكون <code>images/firefox-icon.png</code>.</li> + <li>ضع مسار الملف داخل شيفرة ل.ت.ن.ف بين علامتي التنصيص في التعليمة <code>src==""</code>.</li> + <li>قم بحفظ الملف <code>index.html</code> وقم بفتحه في متصفح الويب (انقر عليه مرتين). يجب أن ترى صفحة ويب جديدة تعرض صورتك.</li> +</ol> + +<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> + +<p dir="rtl">بعض القواعد الأساسية لمسارات الملفات:</p> + +<ul dir="rtl"> + <li>لتربط الملف الهدف الموجود في نفس المجلد الذي يوجد فيه ملف ل.ت.ن.ف، استخدم اسم الملف فقط، مثال <code>my-image.jpg</code>.</li> + <li>للإشارة إلى ملف في دليل فرعي، اكتب اسم الدليل في مقدمة المسار، وبعدها شرطة مائلة، مثال: <code>subdirectory/my-image.jpg</code>.</li> + <li>لربط الملف الهدف الموجود بمجلد <strong>يسبق</strong> المجلد الذي يوجد فيه ملف ل.ت.ن.ف، اكتب نقطتين. فعلى سبيل المثال، إذا كان الملف <code>index.html</code> داخل مجلد فرعي في المجلد <code>test-site</code> وكانت الصورة <code>my-image.jpg</code> داخل المجلد <code>test-site</code>، يمكنك الإشارة للصورة <code>my-image.jpg</code> من الملف <code>index.html</code> باستخدام المسار <code>../my-image.jpg</code>.</li> + <li>يمكنك الدمج بين تلك القواعد كما تشاء، على سبيل المثال: <code>../subdirectory/another-subdirectory/my-image.jpg</code>.</li> +</ul> + +<p dir="rtl">هذا كل ما تحتاج معرفته حالياً.</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: يستخدم نظام ملفات ويندوز المائلة الخلفية، وليس الأمامية، مثال <code>C:\windows</code>. هذا لا يهم عند استخدام ل.ت.ن.ف (فحتى عندما تقوم بتطوير موقعك على ويندوز، فعليك استخدام المائلة الأمامية في شيفرتك).</p> +</div> + +<h2 dir="rtl" id="ماذا_يجب_أن_أفعل_أيضاً؟">ماذا يجب أن أفعل أيضاً؟</h2> + +<p dir="rtl">هذا كل شيء للوقت الراهن. هيكيّلة مجلداتك يجب أن تبدو كشيء من هذا القبيل:</p> + +<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p> + +<h2 dir="rtl" id="في_هذه_الوحدة_أيضاًEditEdit">في هذه الوحدة أيضاً<a class="button new only-icon section-edit" href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA_%D9%84%D8%BA%D8%A9_%D8%AA%D8%B1%D9%85%D9%8A%D8%B2_%D8%A7%D9%84%D9%86%D8%B5_%D8%A7%D9%84%D9%81%D8%A7%D8%A6%D9%82$edit#في_هذه_الوحدة" rel="nofollow nofollow, noindex"><span>Edit</span></a><a class="button section-edit only-icon" href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/Installing_basic_software$edit#في_هذه_الوحدةEdit" rel="nofollow, noindex"><span>Edit</span></a></h2> + +<ul dir="rtl"> + <li><a href="/ar/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/What_will_your_website_look_like">كيف سيكون مظهر موقعك؟</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/HTML_basics">أساسيات لغة ترميز النص الفائق</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/JavaScript_basics">أساسيات الجافاسكربت</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Publishing_your_website">نشر موقعك</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/How_the_Web_works">كيف يعمل الويب</a></li> +</ul> diff --git a/files/ar/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ar/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..915bcef409 --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,109 @@ +--- +title: كيف يعمل الويب +slug: Learn/Getting_started_with_the_web/How_the_Web_works +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +<div dir="rtl">{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">توفر طريقة عمل الويب طريقة عرض مبسطة لما يحدث عند عرض صفحة ويب في مستعرض ويب على الكمبيوتر أو الهاتف.</p> +</div> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">هذه النظرية ليست ضرورية لكتابة كود الويب على المدى القصير ، ولكن قبل وقت طويل سوف تبدأ حقًا بالاستفادة من فهم ما يحدث في الخلفية.</p> + +<h2 dir="rtl" id="العملاء_والخوادم_Clients_and_servers">العملاء والخوادم | Clients and servers</h2> + +<p class="simple-translate-result" dir="rtl" style="direction: rtl; color: rgb(0, 0, 0);">تقسم أجهزة الكمبيوتر المتصلة بشبكة الإنترنت الى عملاء (<strong>clients</strong>) وخوادم (<strong>servers</strong>). حيث يوضح الرسم التخطيطي المبسط كيفية تفاعلهم هكذا:</p> + +<p dir="rtl"><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p> + +<ul dir="rtl"> + <li> + <p class="simple-translate-result" style="color: rgb(0, 0, 0);">ويطلق مصطلح العميل أو العملاء على الأجهزة المتصلة بالانترنت اوالبرمجيات المثبتة عليها والتي تستهلك الخدمات المختلفة المتوفرة على الشبكة بدأً من برامج تصفح المواقع ( مثل Firefox أو Chrome ). مرورا بالتطبيقات المختلفة التي تعتمد على الاتصال بالانترنت كتطبيقات تصفح البريد الاكتروني (outlook) وغيرها.</p> + </li> + <li> + <p class="simple-translate-result" style="color: rgb(0, 0, 0);">اما الخوادم فهي الاجهزة والبرمجيات التي تخزن وتوفر صفحات الويب أو المواقع أو التطبيقات. أو البرمجيات التي تقدم خدمات متعلقة بخزين واستعادة البيانات عبر واجهة برمجية معينة (API) فمثلا عندما يريد عميل ما الوصول إلى صفحة ويب، يطلبها من الخادم فيقوم بارسال او تنزيل نسخة منها على جهاز العميل ليتم عرضها في متصفح الويب الخاص بالمستخدم.</p> + </li> +</ul> + +<h2 dir="rtl" id="الأجزاء_الأخرى_من_الأدوات">الأجزاء الأخرى من الأدوات</h2> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">العميل والخادم الذي وصفناه أعلاه لا يخبران القصة بأكملها. هناك العديد من الأجزاء الأخرى المعنية ، وسنقوم بوصفها أدناه.</p> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">الآن ، دعنا نتخيل أن الويب هو طريق. على طرف واحد من الطريق هو العميل ، الذي يشبه منزلك. على الطرف الآخر من الطريق ، يوجد الخادم ، وهو متجر تريد شراء شيء منه.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">بالإضافة إلى العميل والخادم ، نحتاج أيضًا أن نقول مرحباً بما يلي:</p> + +<ul> + <li style="direction: rtl;"><strong>اتصال الإنترنت الخاص بك</strong>: تيح لك إرسال واستقبال البيانات على شبكة الإنترنت. انها في الأساس مثل الشارع بين منزلك والمتجر.</li> + <li> + <div style="direction: rtl;"><strong>TCP/IP</strong><span>: بروتوكول التحكم في الإرسال وبروتوكول الإنترنت هما بروتوكولا اتصال يحددان كيفية انتقال البيانات عبر الويب. هذا يشبه آليات النقل التي تتيح لك تقديم طلب ، والذهاب إلى المتجر ، وشراء البضائع الخاصة بك. في مثالنا ، هذا يشبه سيارة أو دراجة (أو مع ذلك ، قد تتجول).</span></div> + + <div style="direction: rtl;"></div> + </li> + <li style="direction: rtl;"><strong>DNS</strong>: خوادم اسم المجال تشبه دفتر العناوين لمواقع الويب. عندما تكتب عنوان ويب في المستعرض الخاص بك ، يبحث المستعرض في DNS للعثور على عنوان موقع الويب الحقيقي قبل أن يتمكن من استرداد موقع الويب. يحتاج المتصفح إلى معرفة الخادم الذي يعمل عليه الموقع ، حتى يتمكن من إرسال رسائل HTTP إلى المكان الصحيح (انظر أدناه). هذا يشبه البحث عن عنوان المتجر حتى تتمكن من الوصول إليه.<br> + <strong>HTTP</strong>: بروتوكول نقل "النصوص المترابطة" وهو احد البروتوكولات "يمكن تخيله على انه اللغة المشتركة" التي يتم من خلالها التواصل والتفاعل بين الخادم والعميل. </li> + <li> + <div style="direction: rtl;"><strong>Component files</strong><span>:يتكون موقع الويب من العديد من الملفات المختلفة ، والتي تشبه الأجزاء المختلفة للبضائع التي </span><span>تشتريها من المتجر. هذه الملفات تأتي في نوعين رئيسيين:</span></div> + + <ul> + <li style="direction: rtl;"><strong>Code files</strong>: يتم بناء مواقع الويب بشكل أساسي من HTML و CSS و JavaScript ، على الرغم من أنك ستقابل التقنيات الأخرى في وقت لاحق.</li> + <li style="direction: rtl;"><strong>Assets</strong>: هذا اسم جماعي لجميع العناصر الأخرى التي تشكل موقعًا على الويب، مثل الصور والموسيقى والفيديو ومستندات Word وملفات PDF.</li> + </ul> + </li> +</ul> + +<h2 dir="rtl" id="إذن_ما_الذي_يحدث_بالضبط؟">إذن ما الذي يحدث بالضبط؟</h2> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">عندما تطلب عنوان صفحة ويب من متصفحك (على سبيل المثال <a href="https://wiki.developer.mozilla.org/">https://wiki.developer.mozilla.org/</a>، ولنستعين بمثال السير الى المتجر) يحدث ما يلي:</p> + +<ol dir="rtl"> + <li>يقوم المتصفح بسؤال خادم تزويد العنوان DNS عن بالعنوان الحقيقي للخادم الذي يعيش عليه الموقع IP (حيث تتوقع الحصول على العنوان التفصيلي للمحل مثلا المبنى الخامس في نهاية الطريق ).</li> + <li>يستخدم المتصفح هذا العنوان للإرسال رسالة إلى الخادم مستخدما بروتوكول ال HTTP، ويطلب منه إرسال نسخة من موقع الويب إلى العميل (تذهب إلى المتجر وطلب البضائع الخاصة بك). يتم إرسال هذه الرسالة وجميع البيانات الأخرى المرسلة بين العميل والخادم عبر اتصال الإنترنت الخاص بك باستخدام TCP / IP.</li> + <li><span>في حال توافر هذه الخدمة او الصفحة لدى الخادم، وتبعا لبروتوكول ال HTTP سيرد الخادم على الطلب مستخدما ترميزالحالة 200 للتعبير عن الايجاب او النجاح ثم يبدأ بنقل وارسال ملف الصفحة او البيانات على شكل سلسلة حزم بيانات صغيرة ( يمكن تشبيه هذه العملية بطلبك من عالم المتجر بعض الحاجيات او تناولك اياها بعد البحث داخل المتجر، ثم تجميعها وحزمها في اكياس.</span></li> + <li><span>وختاما يقوم المتصفح بتجميع هذه الحزم على شكل ملف واحد من جديد وعرضها بالشكل المناسب.</span></li> +</ol> + +<h2 dir="rtl" id="شرح_DNS">شرح DNS </h2> + +<p dir="rtl">عناوين المواقع المكتوبة التي تطلبها من المتصفح مثل mozilla.org هي ليست العنوان الرقمي الذي تفهمه الالة وانما هو العنوان الذي نفهمه نحن البشر ويسهل علينا تذكره، اما العنوان الحقيقي الرقمي فهو مجموعة من الارقام بترتيب معين مثل <code>63.245.215.20 </code>.والتي تدعى عنوان بروتوكول الانترنت الرقمي او {{Glossary("IP Address", "IP address")}} وهو يمثل العنوان الرقمي الحقيقي والذي يشير الى جهاز خادم حقيقي واحد وفريد على الشبكة العنكبوتية الذي نود طلب الصفحة منه. </p> + +<p dir="rtl">ومن هنا كانت الحاجة الى خدمة اوخوادم لتحويل وتمثيل او مقابلة اي عنوان مكتوب الى العنوان الرقمي الذي تفهمه الالة عبر جداول خصصت لهذا الغرض، وتسمى هذه الخدمة ب DNS اختصارا ل Domain Name server. </p> + +<p dir="rtl">يمكن الوصول إلى المواقع مباشرة عبر عناوين IP الخاصة بها. يمكنك العثور على عنوان IP لموقع ويب عن طريق كتابة المجال الخاص به في أداة مثل <a href="https://ipfinder.io/">IP FINDER</a>.</p> + +<h2 dir="rtl" id="شرح_الحزم_Packets">شرح الحزم [Packets]</h2> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">في وقت سابق ، استخدمنا المصطلح "حزم" (Packets) لوصف التنسيق الذي يتم به إرسال البيانات من خادم إلى عميل. ماذا نعني هنا؟ بشكل أساسي ، عندما يتم إرسال البيانات عبر الويب ، يتم إرسالها كآلاف من القطع الصغيرة ، بحيث يمكن للعديد من مستخدمي الويب المختلفين تنزيل نفس الموقع في نفس الوقت. إذا تم إرسال مواقع الويب كمقاطع كبيرة مفردة ، فيمكن لمستخدم واحد فقط تنزيلها مرة واحدة في كل مرة ، مما من الواضح أنه سيجعل الويب غير فعال للغاية وليس كثير الاستخدام.</p> + +<h2 id="أنظر_أيضا">أنظر أيضا</h2> + +<ul> + <li><a href="/en-US/Learn/How_the_Internet_works">كيف يعمل الانترنت </a></li> + <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — بروتوكول على مستوى التطبيق </a></li> + <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: انطلق مع !</a></li> + <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: ترميز حالات الاستجابة الخادم </a></li> +</ul> + +<h2 id="Credit">Credit</h2> + +<p>صورة الشارع: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, بواسطة <a href="https://www.flickr.com/photos/kdigga/">كيفن د</a>.</p> + +<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="في_هذه_الوحدة">في هذه الوحدة</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> diff --git a/files/ar/learn/getting_started_with_the_web/html_basics/index.html b/files/ar/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..d8e10cb20f --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,232 @@ +--- +title: أساسيات HTML +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - البدء مع الويب +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p dir="rtl"><span class="seoSummary">لغة ترميز النص الفائق</span> (HTML) هي التعليمات التي تُستخدَم لهيكلة صفحة الويب ومحتواها. فعلى سبيل المثال، يمكن، باستخدام هذه اللغة، بناء صفحة تحوي مجموعة من النصوص، وقائمة نقطية، أو تحوي صور و بعض جداول البيانات. كما يشير العنوان، ستزودك هذه المقالة بالمفاهيم الأساسيّة حول هذه اللغة وخواصها.</p> +</div> + +<h2 dir="rtl" id="ما_هي_لغة_ترميز_النص_الفائق؟">ما هي لغة ترميز النص الفائق؟</h2> + +<p dir="rtl">لغة ترميز النص الفائق هي ليست لغة برمجيّة بل <em>لغة وصفيّة</em> (markup language) تعمل على وصف هيكلة محتويات صفحات الويب. تتألف لغة ترميز النص الفائق من مجموعة من <strong>العناصر</strong> (elements) تُستخدَم لاحتواء الأجزاء المختلفة من المحتوى لتجعله يظهر بطريقة معينة. فيمكن استخدام الوسوم المغلقة (enclosing tage)، مثلاً، لإضافة رابط تشعبي لكلمة أو لصورة يشير لموقع آخر، كما يمكن استخدامها لجعل الكلام مائل أو لتصغير الخط وتكبيره. لنأخذ النص التالي كمثال:</p> + +<pre>قطتي شديدة الجمال</pre> + +<p dir="rtl">يمكننا وصف هذا النص على أنه فقرة (paragraph) عن طريق تضمينه باستخدام وسم الفقرة التالي:</p> + +<pre class="brush: html"><p>قطتي شديدة الجمال</p></pre> + +<h3 dir="rtl" id="تشريح_عنصر_لغة_ترميز_النص_الفائق">تشريح عنصر لغة ترميز النص الفائق</h3> + +<p dir="rtl">دعنا نستكشف عنصر الفقرة هذا قليلاً بعد:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16065/beautiful-cat.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p dir="rtl">الأجزاء الرئيسية من عنصرنا هي:</p> + +<ol dir="rtl"> + <li><strong>وسم الفتح</strong>: يتألف من اسم العنصر (في حالتنا p)، محاطاً بقوس مفتوح وآخر مغلق. يحدد هذا المكوِّن بداية العنصر، أو بداية التأثير الذي يُضفيه (في حالتنا بداية الفقرة).</li> + <li><strong>وسم الإغلاق</strong>: مشابه لسابقه، ما عدا أنَّه يتضمن مائلة أماميّة (/) قبل اسم العنصر. يحدد هذا المكوِّن نهاية العنصر (في حالتنا نهاية الفقرة). يُعد نسيان وضع وسم الإغلاق أحد الأخطاء الشائعة التي يقع بها المبتدئون والتي تؤدي إلى مشاكل مزعجة.</li> + <li><strong>المحتوى</strong>: يُمثِّل هذا المكوِّن محتوى العنصر (في حالتنا نص الفقرة).</li> + <li><strong>العنصر</strong>: هو الكيان ككل المؤلَّف من وسم الفتح، ووسم الإغلاق، ويتوسطه محتواه.</li> +</ol> + +<p dir="rtl">قد يحتوي العنصر أيضاً على بعض السِمات (attributes)، والتي تبدو كشيء من هذا القبيل:</p> + +<p><img alt="رسم توضيحي يُشرِّح الوسم عندما يمتلك خاصيّة" src="https://mdn.mozillademos.org/files/16068/beautiful-cat-attribute.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p dir="rtl">تحتوي السِمات على معلومات إضافية حول العنصر لا تظهر في المحتوى الفعلي. في حالتنا، يُعد <code>class</code> <em>اسم</em> السِمَة و <code>editor-note</code> قيمتها. السِمَة <code>class</code> تسمح لك بأن تعطي العنصر مُعرِّف يُمكِن استخدامه لاحقاً للإشارة للعنصر لإعطائه تنسيق معين وأشياء أخرى.</p> + +<p dir="rtl">ينبغي أن تكون للسِمَة المكوِّنات التالية دوماً:</p> + +<ol dir="rtl"> + <li>مسافة بينها وبين اسم العنصر (أو السِمَة التي تسبقها في حال امتلاك العنصر أكثر من سِمَة).</li> + <li>اسم السِمَة متبوعاً بإشارة يساوي.</li> + <li>علامتي تنصيص تُحيط بقيمة السِمَة.</li> +</ol> + +<div class="blockIndicator note"> +<p dir="rtl">ملاحظة: يمكن أن تظل قيم السمات البسيطة التي لا تحتوي على مسافة بيضاء لـ ASCII (أو أي من الأحرف <code>"</code> <code>'</code> <code>`</code> <code>=</code> <code><</code> <code>></code>) غير مذكورة ، لكن يُنصح بأن تقوم بتحديد كل قيم السمات ، حيث تجعل الشفرة أكثر اتساقًا وفهمًا.</p> +</div> + +<h3 dir="rtl" id="العناصر_المتداخلة">العناصر المتداخلة</h3> + +<p dir="rtl">يمكنك وضع عنصر بداخل عنصر آخر أيضاً، يدعى هذا النمط <strong>بالتداخل</strong> (nesting). إذا أردنا التأكيد على جمال قطتنا، مثلاً، يمكننا إحاطة الكلمة "شديدة" بالعنصر {{htmlelement("strong")}}، كالتالي:</p> + +<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p dir="rtl"> </p> + +<p dir="rtl">احرص على إنشاء تداخل صحيح بين عناصرك: في المثال أعلاه قمنا بفتح العنصر {{htmlelement("p")}} أولاً، وبعدها العنصر {{htmlelement("strong")}}، وبالتالي علينا إغلاق العنصر {{htmlelement("strong")}} ويليه الآخر. فالشكل التالي ليس صحيحاً:</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p dir="rtl">على العناصر أن تُفتَح وتُغلَق بشكل صحيح ليكونوا بشكل واضح داخل أو خارج بعضهم البعض. فإذا تشابكوا بشكل خاطئ كما في الأعلى، سيقوم متصفحك بمحاولة القيام بأفضل تخمين حيال ما تحاول القيام به، والذي قد يؤدي إلى نتائج غير متوقعة.</p> + +<h3 dir="rtl" id="العناصر_الفارغة">العناصر الفارغة</h3> + +<p dir="rtl">بعض العناصر لا يوجد فيها محتوىً. تُدعى تلك العناصر <strong>بالعناصر الفارغة</strong>. خذ العنصر {{htmlelement("img")}} الموجود في شيفرة المقالة هذه التي تقرأها على سبيل المثال:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p dir="rtl">يحتوي هذا العنصر على خاصيتيّن، ولكن، إن لاحظت، لا يوجد وسم الإغلاق <code><img/></code>، ولا يوجد محتوىً بداخل العنصر. هذا بسبب أنَّ عنصر الصورة لا يحيط بمحتوىً كي يؤثر عليه، فهدفه ببساطة تضمين صورة في الصفحة وحسب.</p> + +<h3 dir="rtl" id="تشريح_وثيقة_لغة_ترميز_النص_الفائق">تشريح وثيقة لغة ترميز النص الفائق</h3> + +<p dir="rtl">لحد الآن قمنا بتغطية بعض العناصر الفردية الأساسية في هذه اللغة، ولكن تلك العناصر ليست بتلك الفائدة لوحدها. الآن سنأخذ نظرة حول كيف يمكن للعناصر الفردية أن تنمزج معاً لتشكل صفحة ويب متكاملة. دعنا نعاود رؤية الشفرة البرمجية التي وضعنها في مثالنا عن الملف <code>index.html</code> (الذي استخدمناه في <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">مقالة التعامل مع الملفات</a>):</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="images/firefox-icon.png" alt="My test image"> + </body> +</html></pre> + +<p dir="rtl">في هذا المثال لدينا:</p> + +<ul dir="rtl"> + <li>التعليمة <code><!DOCTYPE html></code>. تحدد هذه التعليمة نوع الوثيقة. في فترة سابقة من الزمن، عندما كانت لغة ترميز النص السابق تقنية يافعة (في حوالي 1991/2)، كان المقصود من doctypes أن تكون بمثابة روابط لمجموعة من القواعد التي يجب على وثائق لغة ترميز النص الفائق أن تتبعها لتعتبر صالحة. ولكن مع مرور الزمن، وفي هذه الأيام تحديداً، لا أحد يهتم حقاً حيال هذه التعليمة بعد الآن، فهي مجرد تحفة أثرية كانت تُضمَّن في كل شيء ليعمل بشكل صحيح. هذا كل ما نريد منك أن تعرفه حالياً.</li> + <li>التعليمة <code><html></html></code>. يحيط هذا العنصر بجميع محتويات الصفحة، ويعرف باسم "العنصر الجذر".</li> + <li>التعليمة <code><head></head></code>. يعمل هذا العنصر كحاوي لجميع الأشياء التي تريد تضمينها في صفحتك والتي لا تعد محتوىً تريد إظهاره لزوار موقعك. هذا يتضمن الأشياء مثل <strong>الكلمات المفتاحية</strong> ووصف الصفحة الذي ترغب في إظهاره في نتائج البحث، وشيفرة <a href="https://developer.mozilla.org/ar/docs/Web/CSS">صفحات الأنماط الانسايبية</a> لتنسيق المحتوى، والإعلان عن نوع ترميز النص، والكثير من الأمور الأخرى.</li> + <li>التعليمة <code><body></body></code>. يحتوي هذا العنصر على محتوى الذي تريد إظهاره لزوارك، سواءً كان نصاً، أو صورة، أو فيديو، أو لعبة، أو ملف صوتي، أو أياً كان.</li> + <li>التعليمة <code><"meta charset="utf-8></code>. يحدد هذا العنصر الترميز الذي تستخدمه صفحتك، والذي هو في مثالنا الترميز UTF-8. يتضمن نوع الترميز هذا معظم المحارف والرموز من الغالبية العظمة من اللغات البشرية المكتوبة. الآن يمكن التعامل مع أي محتوى نصي تقوم بوضعه. عليك أن تلتزم دائماً بتعريف هذا العنصر، فهو يساعد على تجاوز العديد من المشكلات في وقت لاحق.</li> + <li>التعليمة <code><title></title></code>. يقوم هذا العنصر بتحديد عنوان صفحتك، والذي هو العنوان الذي يظهر في نافذة المتصفح التي يتم تحميل الصفحة فيها. كما يستخدم أيضاً لوصف الصفحة عندما تقوم بإضافتها للمفضلة.</li> +</ul> + +<h2 dir="rtl" id="الصور">الصور</h2> + +<p dir="rtl">دعنا نوجه إنتباهنا إلى العنصر {{htmlelement("img")}} مجدداً:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p dir="rtl">كما قلنا سابقاً، يقوم هذا العنصر بتضمين صورة في صفحتنا في موضع مُعين. يتم تحديد الصورة باستخدام السِمَة <code>src</code>، والتي تأخذ مسار الصورة كقيمة.</p> + +<p dir="rtl">كما قمنا أيضاً بإضافة السِمَة <code>alt</code>. تقوم هذه السِمَة بإضافة وصف للصورة للمستخدمين الذين لايمكنهم رؤية الصورة، وقد يكون هذا بسبب:</p> + +<ol dir="rtl"> + <li>نظرهم الضعيف. المستخدمين الذي لديهم إعاقات بصرية كبيرة غالباً ما يستخدمون أدوات تسمى قارئات شاشة لقراءة النص البديل لهم.</li> + <li>حدوث شيء ما خاطئ جعل الصورة لاتظهر. على سبيل المثال، حاول تغيير مسار الصورة داخل السمة <code>src</code> واجعله خاطئ عمداً. إذا قمت بحفظ وإعادة تحميل الصفحة، يجب أن ترى شيء من هذا القبيل مكان الصورة:</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p> + +<p dir="rtl">النص البديل (alt text) هو "نص وصفي". النص البديل الذي عليك كتابته يجب أن يوفر للقارئ معلومات كافية ليصبح لديه فكرة جيدة عما تعنيه الصورة. في هذا المثال، النص البديل الذي استخدمناه "My test image" ليس جيداً على الإطلاق. يمكننا استخدام نص بديل أفضل منه بكثير يعبر عن شعار فايرفوكس خاصتنا وهو "The Firefox logo: a flamin fox surrounding the Earth" ("شعار فايرفوكس: ثعلب مُشتعِل يحيط بِكُرَة أرضيّة"، والذي هو، كما ترى، وصف دقيق للصورة).</p> + +<p dir="rtl">حاول التفكير ببعض النصوص البديلة الأفضل لصورك.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة:</strong> اعثر على المزيد حول الإتاحة في <a href="/en-US/docs/Web/Accessibility">مقالة الإتاحة على شبكتنا</a>.</p> +</div> + +<h2 dir="rtl" id="التعامل_مع_النصوص">التعامل مع النصوص</h2> + +<p dir="rtl">في هذا القسم سنغطي بعضاً من العناصر الأساسية في لغة ترميز النص الفائق التي نستخدمها للتعامل مع المحتويات النصيّة.</p> + +<h3 dir="rtl" id="العناوين">العناوين</h3> + +<p dir="rtl">تتيح لك عناصر العنونة (heading elements) القدرة على تحديد جزء معين من النص على أنَّه عنوان رئيسي - أو فرعي - من محتواك. فكما يملك الكتاب عنوان رئيسي، وعناوين رئيسية وفرعية للفصول، تملك وثيقة لغة ترميز النص الفائق هذه الخاصية أيضاً. تحتوي لغة ترميز النص الفائق على ست مستويات عنونة، تبدأ من {{htmlelement("h1")}} إلى {{htmlelement("h6")}}، على الرغم من أنك لن تستخدم عادةً أكثر من ثلاث أو أربع مستويات:</p> + +<pre class="brush: html"><h1>My main title</h1> +<h2>My top level heading</h2> +<h3>My subheading</h3> +<h4>My sub-subheading</h4></pre> + +<p dir="rtl">والآن حاول أن تضيف عنوان مناسب لصفتحك أعلى العنصر {{htmlelement("img")}}.</p> + +<h3 dir="rtl" id="الفقرات">الفقرات</h3> + +<p dir="rtl">كما شرحنا أعلاه، تقوم العناصر {{htmlelement("p")}} باحتواء فقرات من النص. سنستخدم هذا العنصر بشكل متكرر عندما سنضيف محتويات نصيّة عاديّة:</p> + +<pre class="brush: html"><p>This is a single paragraph</p></pre> + +<p dir="rtl">قم بإضافة بعض الفقرات أسفل العنصر {{htmlelement("img")}} وشاهد ماذا سيحدث.</p> + +<h3 dir="rtl" id="القوائم">القوائم</h3> + +<p dir="rtl">تستخدم القوائم في الكثير من مواقع الويب، وتملك لغة ترميز النص الفائق عناصر خاصة لذلك. دائماً ما تحوي القوائم عنصرين على الأقل. أكثر أنواع القوائم شيوعاً هي القوائم المرتبة والغير مرتبة:</p> + +<ol dir="rtl"> + <li>تُستخدَم <strong>القوائم الغير مرتبة</strong> (unordered lists) مع القوائم التي لايكون فيها الترتيب أمراً مهماً، كقوائم التسوُّق مثلاً. تُحاط تلك القوائم بالعنصر {{htmlelement("ul")}}.</li> + <li>تُستخدَم <strong>القوائم المرتبة</strong> (ordered lists) مع القوائم التي يكون فيها الترتيب أمراً مهماً، كقوائم وصفات الطعام. تُحاط تلك القوائم بالعنصر {{htmlelement("ol")}}.</li> +</ol> + +<p dir="rtl">كل عنصر من القائمة يوضع داخل العنصر {{htmlelement("li")}} (والذي هو اختصار لـ list item).</p> + +<p dir="rtl">على سبيل المثال، إذا أردنا تحويل جزء من هذه الفقرة إلى قائمة كالتالية:</p> + +<pre class="brush: html"><p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p></pre> + +<p dir="rtl">يجب علينا تعديل الشفرة إلى الشكل الآتي:</p> + +<pre class="brush: html"><p>At Mozilla, we’re a global community of</p> + +<ul> + <li>technologists</li> + <li>thinkers</li> + <li>builders</li> +</ul> + +<p>working together ... </p></pre> + +<p dir="rtl">حاول إضافة قائمة مرتبة أو غير مرتبة إلى مثال صفحتك.</p> + +<h2 dir="rtl" id="الروابط">الروابط</h2> + +<p dir="rtl">تُعَد الروابط عناصر مهمة للغايّة، فهي ما تجعل من الويب ويب! يتم استخدام العنصر {{htmlelement("a")}} لإضافة الروبط. الحرف "a" هو اختصار للكلمة الإنجليزيّة "anchor" (مرساة). لتحويل نص في فقرتك إلى رابط عليك اتباع الخطوات التالية:</p> + +<ol dir="rtl"> + <li>اختر نصاً ما. لقد اخترنا النص "Mozilla Manifesto" لمثالنا هذا.</li> + <li>قم بإحاطة النص بالعنصر {{htmlelement("a")}}، كما أدناه: + <pre class="brush: html"><a>Mozilla Manifesto</a></pre> + </li> + <li> أضف السِمَة <code>href</code> للعنصر {{htmlelement("a")}}، كما أدناه: + <pre class="brush: html"><a href="">Mozilla Manifesto</a></pre> + </li> + <li>قم بملء قيمة السِمَة <code>href</code> بعنوان الويب الذي تريد أن تفتحه من خلال الرابط، كما أدناه: + <pre class="brush: html"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> + </li> +</ol> + +<p dir="rtl">قد تحصل على نتائج غير متوقعة إذا نسيت وضع <code>https://</code> أو <code>http://</code>. يسمى هذا الجزء الموجود ببداية عنوان الويب <em>بالبروتوكول</em>. بعد الإنتهاء من صنع الرابط قم بالضغط عليه لتتأكد أنه يرسلك حيثما أردت.</p> + +<div class="note"> +<p dir="rtl">الكلمة <code>href</code> قد تبدو خيار غريب لاسم السِمَة للوهلة الأولى. إذا كنت تواجه مشكلة في تذكر اسم السمة تلك، حاول أن تتذكر أنها إختصار لـ <em><strong>h</strong>ypertext <strong>ref</strong>erence</em> (مرجع نص تشعبي).</p> +</div> + +<p dir="rtl">جرِّب إضافة رابط لصفحتك كما تعلمت.</p> + +<h2 dir="rtl" id="الخاتمة">الخاتمة</h2> + +<p dir="rtl">إذا كنت قد تابعت المقالة من البداية بحذافيرها ينبغي في النهاية على صفحة مماثلة للصورة أدناه (يمكنك رؤيتها أيضاً من <a href="http://mdn.github.io/beginner-html-site/">هنا</a>):</p> + +<p><img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> + +<p dir="rtl">إذا واجهتك مشاكل يمكنك دائماً مقارنة عملك مع <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">الشفرة المصدرية خاصتنا</a> على جيتهاب.</p> + +<p dir="rtl">في هذه المقالة لم نناقش سوى أمور سطحية في لغة ترميز النص الفائق. يمكنك مطالعة المزيد في <a href="/en-US/Learn/HTML">قسم تعلم لغة ترميز النص الفائق</a> على شبكتنا.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> + +<h2 dir="rtl" id="في_هذه_الوحدة_أيضاً">في هذه الوحدة أيضاً</h2> + +<ul dir="rtl"> + <li><a href="/ar/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/What_will_your_website_look_like">كيف سيكون مظهر موقعك؟</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/HTML_basics">أساسيات لغة ترميز النص الفائق</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/JavaScript_basics">أساسيات الجافاسكربت</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Publishing_your_website">نشر موقعك</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/How_the_Web_works">كيف يعمل الويب</a></li> +</ul> diff --git a/files/ar/learn/getting_started_with_the_web/index.html b/files/ar/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..ff4642f58e --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/index.html @@ -0,0 +1,58 @@ +--- +title: البدء مع الويب +slug: Learn/Getting_started_with_the_web +tags: + - البدء مع الويب + - دليل + - صفحة هبوط + - مبتدئين +translation_of: Learn/Getting_started_with_the_web +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p dir="rtl">البدء مع الويب هي سلسلة موجزة تُعرِّفُك على عملية تطوير الويب. سوف نبدأ معك من إعداد الأدوات التي ستحتاجها لبناء صفحة ويب بسيطة وصولاً لعمليّة نشرها.</p> +</div> + +<h2 dir="rtl" id="قصة_موقعك_الأوَّل">قصة موقعك الأوَّل</h2> + +<p dir="rtl">من الصعب إنشاء موقع ويب احترافي، لذلك إن كنت جديداً على تطوير الويب نشجعك على أن تبدأ بشيء صغير. لن تستطيع بناء فيسبوك آخر حالاً، ولكن ليس من الصعب إنشاء موقع بسيط خاص بك على الإنترنت، لذلك سنبدأ من تلك النقطة.</p> + +<p dir="rtl">من خلال متابعة المقالات المسرودة بالترتيب أدناه، سوف تبدأ من لا شيء حتى تحصل على موقعك الأول على الإنترنت. هيا بنا نبدأ!</p> + +<h3 dir="rtl" id="كيف_يعمل_الويب"><a href="/ar/docs/Learn/Getting_started_with_the_web/How_the_Web_works">كيف يعمل الويب</a></h3> + +<p dir="rtl">عندما تدخل إلى مواقعك المفضلة، تحصل العديد من الأمور المعقدة في الخلفيّة التي قد لا تعلمها. في مقالة <a href="/ar/docs/Learn/Getting_started_with_the_web/How_the_Web_works">كيف يعمل الويب</a> قمنا بشرح ما الذي يحدث عندما تقوم بعرض صفحات الويب على حاسبك.</p> + +<h3 dir="rtl" id="تثبيت_البرمجيات_الأساسية"><a href="/ar/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a></h3> + +<p dir="rtl">عندما يتعلق الأمر بالأدوات لبناء موقع فهناك الكثير منها لتختار. إذا كنت مازلت في بداية مشوراك، قد تكون مشوشاً من عدد محررات النصوص، وأطر العمل، وأدوات الاختبار الموجودة. في مقالة <a href="/ar/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a> قمنا بعرض خطوة بخطوة كيفيّة تثبيت البرمجيات التي تحتاجها لبداية بسيطة في تطوير الويب.</p> + +<h3 dir="rtl" id="كيف_سيكون_مظهر_موقعك؟"><a href="/ar/Learn/Getting_started_with_the_web/What_will_your_website_look_like">كيف سيكون مظهر موقعك؟</a></h3> + +<p dir="rtl">قبل أن تبدأ في كتابة شيفرة موقعك، يجب أن تخطط أولاً. ما المعلومات التي تعرضها؟ ما الخطوط والألوان التي تستخدمها؟ <a href="/ar/Learn/Getting_started_with_the_web/What_will_your_website_look_like">كيف سيكون مظهر موقعك؟</a> لقد قمنا بعنونة الطريقة البسيطة التي يمكنك اتباعها للتخطيط لمحتوى موقعك وتصميمه.</p> + +<h3 dir="rtl" id="التعامل_مع_الملفات"><a href="/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a></h3> + +<p dir="rtl">يتألف الموقع من العديد من الملفات: المحتوى النصي، والنص المصدري (البرمجيات)، وملفات التصميم (ملفات الأنماط)، والوسائط، والكثير من الملفات الأخرى.<br> + عندما تبني موقعك، سوف تحتاج لتجميع جميع تلك الملفات بهيكليّة منطقيّة، وتتأكد من أنَّهم قادرين على الوصول لبعضهم البعض.<br> + مقالة <a href="/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a> تشرح كيف يمكنك إعداد هيكلة ملفات منطقيّة لموقعك، وما المشاكل التي يجب أن تكون حذر منها.</p> + +<h3 dir="rtl" id="أساسيات_لغة_ترميز_النص_الفائق"><a href="/ar/Learn/Getting_started_with_the_web/HTML_basics">أساسيات لغة ترميز النص الفائق</a></h3> + +<p dir="rtl">لغة ترميز النص الفائق (HTML) هي التعليمات المُستخدمة لهيكلة محتويات الويب وإعطائها معنىً (دلالة) وهدف. على سبيل المثال، هل محتوايَ هو مجموعة من الفقرات، أو قائمة نقطيّة؟ هل لدي صورة مدرجة في صفحتي؟ هل لدي جدول بيانات؟ من دون إرباكك، مقالة <a href="/ar/Learn/Getting_started_with_the_web/HTML_basics">أساسيات لغة ترميز النص الفائق</a> توفر معلومات كافية لجعلك على وفاق مع هذه اللغة.</p> + +<h3 dir="rtl" id="أساسيات_صفحات_الأنماط_الانسيابية_CSS"><a href="/ar/docs/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية CSS</a> </h3> + +<p dir="rtl">صفحات الأنماط الانسيابية (او التنسيقات المتعاقبة) (CSS) هي التعليمات المُستخدمة لتنسيق موقعك. حيث تدير هذه التنسيقات الجوانب الفنية البصرية للموقع بدأً من الالوان والخطوطمرورا بالتحكم باحجام وابعاد وهوامش العناصر وتوزيعها وانتهائا بالتأثيرات التصميمية والتحريكية للعناصر (Animation). <br> + فعلى سبيل المثال، هل أريد ان يكون لون النص أسود أم أحمر؟ هل هناك اطار لعنصر معين ماهي الوانه وابعاده؟ كم المسافة بين الاطار والمحتوى؟كم يبعد عن العناصر المجاورة؟ أين يجب أن يظهر المحتوى على الشاشة؟<br> + مقالة <a href="/ar/docs/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية CSS</a> تطلعك على ما تحتاج معرفته لتبدأ مع هذه اللغة.</p> + +<h3 dir="rtl" id="أساسيات_الجافاسكربت"><a href="/ar/Learn/Getting_started_with_the_web/JavaScript_basics">أساسيات الجافاسكربت</a></h3> + +<p dir="rtl">جافاسكربت هي اللغة البرمجة المُستخدمة لإضافة مزايا تفاعليّة لموقع. بدا من ادارة ما يجب فعله عند تفاعل المستخدم كضغط احد الازرار، مرورا بجلب بيانات من مصادر متعددة، وتفريغ هذه البيانات على شكل عناصر او رسومات بيانية او في جداول (حيث نلجا لجمل التكرار وبعض الحسابات). انتهاءا بتطبيقات اكثر تعقيدا كالالعاب واضافة التاثيرات التصميمية الديناميكية.<br> + مقالة <a href="/ar/Learn/Getting_started_with_the_web/JavaScript_basics">أساسيات الجافاسكربت</a> سوف تقدم لك فكرة عمّا هو ممكن القيام به بهذه اللغة المثيرة، وكيف يمكنك أن تبدأ معها.</p> + +<h3 dir="rtl" id="نشر_موقعك"><a href="/ar/docs/Learn/Getting_started_with_the_web/Publishing_your_website">نشر موقعك</a></h3> + +<p dir="rtl">حالما تنتهي من تجهيز موقعك وتنظيم ملفاتك البرمجية وملفات المحتوى المكونة للموقع، سوف تحتاج إلى وضع موقعك على الإنترنت حتّى يتمكن الناس من العثور عليه. في مقالة <a href="/ar/docs/Learn/Getting_started_with_the_web/Publishing_your_website">نشر موقعك</a> سنتكلم عن كيف يمكنك وضع شيفرتك البسيطة على الأنترنت بأقل مجهود.</p> diff --git a/files/ar/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ar/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..9d945d2ffd --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,74 @@ +--- +title: تثبيت البرمجيات الأساسية +slug: Learn/Getting_started_with_the_web/Installing_basic_software +tags: + - أدوات + - أساسيات + - البدء مع الويب + - تعلم + - مبتدئين + - محرر نصوص +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p dir="rtl">في هذه المقالة، سوف نعرض ما هي الأدوات التي تحتاجها في عملية تطوير الويب، وكيف تقوم بتثبيتها بشكل صحيح.</p> +</div> + +<h2 dir="rtl" id="ما_هي_الأدوات_التي_يتسخدمها_المحترفون؟">ما هي الأدوات التي يتسخدمها المحترفون؟</h2> + +<ul dir="rtl"> + <li><strong>حاسوب</strong>. قد يبدو هذا غريباً لبعضٍ من الناس، ولكن البعض منكم يقرأ هذه المقالة من هاتفه أو من حاسب المكتبة. لعمليّة تطوير ويب جادة، من الأفضل أن تستخدم حاسب مكتبي أو حاسب محمول (بنظام ويندوز، أو ماك، أو لينُكس).</li> + <li><strong>محرر نصوص</strong> لكتابة الشيفرة فيه. قد يكون هذا المحرر محرر نصوص (مثل <a href="http://brackets.io/">Brackets</a>، أو <a href="https://atom.io/">Atom</a>، أو <a href="https://code.visualstudio.com/">Visual Studio Code</a>)، أو محرر هجين (مثل <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>، أو <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). محررات الوثائق المكتبيّة لن تكون مناسبة لهذا الاستخدام؛ لأنها تعتمد على عناصر خفيّة (hidden elements) والتي تتداخل مع محركات العرض المُستخدمة في متصفحات الويب.</li> + <li><strong>متصفح ويب</strong> لتجربة الشيفرة فيه. حالياً أكثر المتصفحات استخداماً هي: <a href="https://www.mozilla.org/en-US/firefox/new/">فايرفوكس</a>، و<a href="https://www.google.com/chrome/browser/">جوجل كروم</a>، و<a href="http://www.opera.com/">أوبرا</a>، و<a href="https://www.apple.com/safari/">سفاري</a>، و<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">إنترنت إكسبلورر</a>، و<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">مايكروسوفت أيدج</a>. يجب عليك أيضاً تجربة أداء موقعك على الهواتف وعلى المتصفحات القديمة التي قد مايزال جمهورك المُستهدف يستخدمها على نطاق واسع (مثل IE 8–10).</li> + <li><strong>محرر رسومات</strong>، مثل <a href="http://www.gimp.org/">GIMP</a>، أو <a href="http://www.getpaint.net/">Paint.NET</a> ، أو <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a> لتصنع صور لصفحتك.</li> + <li><strong>نظام تحكم بالإصدارات</strong> لتدير الملفات على الخادم، وتساهم في مشروع مع فريق، ولتشارك الشيفرة والملفات، ولتتجنب تضارب التعديلات. لحد الآن يعتبر <a href="http://git-scm.com/">جيت</a> أكثر أدوات التحكم بالإصدارات شيوعاً، كما تعد خدمة الإستضافة <a href="https://github.com/">جيتهاب</a> المبنيّة على جيت الأكثر شيوعاً في مجال استضافة المشاريع.</li> + <li><strong>برنامج FTP</strong> المُستخدم على حسابات استضافات الويب القديمة لإدارة الملفات على الخادم (يزداد استخدام <a href="http://git-scm.com/">جيت</a> لهذا الغرض، مؤخراً، بدلاً من برمجيات FTP التقليديّة). هناك الكثير من برامج FTP المتوافرة ومنها <a href="https://cyberduck.io/">Cyberduck</a>، و<a href="http://fetchsoftworks.com/">Fetch</a>، و<a href="https://filezilla-project.org/">FileZilla</a>.</li> + <li><strong>نظام أتمتة</strong> مثل <a href="http://gruntjs.com/">Grunt</a> أو <a href="http://gulpjs.com/">Gulp </a>لأتمتة بعض المهمات التكراريّة، مثل تصغير حجم الشيفرة واختبارها.</li> + <li>القوالب، والمكتبات، وأطر العمل، ...إلخ لتسريع كتابة الوظائف الشائعة.</li> + <li>بالإضافة للمزيد من الأدوات!</li> +</ul> + +<h2 dir="rtl" id="ما_الأدوات_التي_احتاجها_حالياً؟">ما الأدوات التي احتاجها حالياً؟</h2> + +<p dir="rtl">تلك القائمة تبدو مرعبة، ولكن لحسن الحظ تستطيع البدء بتطوير الويب بدون معرفة أي شيء عن معظم تلك الأدوات. في هذه القائمة سنقوم بإعداد الحد الأدنى من تلك الأدوات (محرر النصوص وبعض متصفحات الويب العصريّة).</p> + +<h3 dir="rtl" id="تثبيت_محرر_النصوص">تثبيت محرر النصوص</h3> + +<p dir="rtl">أنت على الأرجح تملك محرر نصوص بدائي (بسيط) على حاسبك. فيأتي الويندوز بشكل أفتراضي متضمناً برنامج <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad </a>ويأتي نظام الماك مع <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. تختلف توزيعات لينكس بالمحرر الإفتراضي، فتأتي أبونتو مثلاً بمحرر <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a>.</p> + +<p dir="rtl">من أجل تطوير الويب، يمكنك على الأرجح استخدام شيء أفضل من Notepad أو TextEdit. نحن نوصي ببدء استخدام <a href="http://brackets.io">Brackets</a>، فهو محرر مجاني يقدم ميزة العرض الحي والتلميحات (code hints).</p> + +<h3 dir="rtl" id="تثبيت_المتصفحات_العصريّة">تثبيت المتصفحات العصريّة</h3> + +<p dir="rtl">سنقوم حالياً بتثبيت بضعة متصفحات ويب فقط لتجربة شيفرتنا. اختر نظام تشغيلك أدناه وانقر على الروابط المرفقة لتحميل مثبتات متصفحاتك المفضلة:</p> + +<ul dir="rtl"> + <li>لينُكس: <a href="https://www.mozilla.org/en-US/firefox/new/">فايرفوكس</a>، <a href="https://www.google.com/chrome/browser/">جوجل كروم</a>، <a href="http://www.opera.com/">أوبرا</a>.</li> + <li>ويندوز: <a href="https://www.mozilla.org/en-US/firefox/new/">فايرفوكس</a>، <a href="https://www.google.com/chrome/browser/">جوجل كروم</a>، <a href="http://www.opera.com/">أوبرا</a>، <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">إنترنت إكسبلورر</a>، <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">مايكروسوفت أيدج</a> (يأتي نظام ويندوز 10 مع متصفح أيدج إفتراضياً. إذا كنت على ويندوز 7 أو على إصدار أعلى يجب عليك تثبيت إنترنت إكسبلورر 11. أما إن كنت تملك إصدار مختلف، فيجب عليك تثبيت متصفح بديل).</li> + <li>ماك: <a href="https://www.mozilla.org/en-US/firefox/new/">فايرفوكس</a>، <a href="https://www.google.com/chrome/browser/">جوجل كروم</a>، <a href="http://www.opera.com/">أوبرا</a>، <a href="https://www.apple.com/safari/">سفاري</a> (يأتي متصفح سفاري مع نظام IOS ونظام ماك افتراضياً).</li> +</ul> + +<p dir="rtl">قبل أن تبدأ، يجب على الأقل أن تُثبِت متصفحين من المتصفحات السالف ذكرها حتى يكونوا جاهزين للعمل.</p> + +<h3 dir="rtl" id="تثبيت_خادم_ويب_محلي">تثبيت خادم ويب محلي</h3> + +<p dir="rtl">بعض الأمثلة ستحتاج لِأن تعمل عبر خادم ويب. تستطيع إيجاد طريقة القيام بذلك من خلال مقالة <a href="/ar/docs/Learn/Common_questions/set_up_a_local_testing_server">كيف تُعِد خادم اختبار محلي؟ </a></p> + +<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> + +<h2 dir="rtl" id="في_هذه_الوحدة_أيضاًEdit">في هذه الوحدة أيضاً<a class="button section-edit only-icon" href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA_%D9%84%D8%BA%D8%A9_%D8%AA%D8%B1%D9%85%D9%8A%D8%B2_%D8%A7%D9%84%D9%86%D8%B5_%D8%A7%D9%84%D9%81%D8%A7%D8%A6%D9%82$edit#في_هذه_الوحدة" rel="nofollow, noindex"><span>Edit</span></a></h2> + +<ul dir="rtl"> + <li><a href="/ar/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a></li> + <li><a href="/ar/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">كيف سيكون مظهر موقعك؟</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/HTML_basics">أساسيات لغة ترميز النص الفائق</a></li> + <li><a href="/ar/docs/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/JavaScript_basics">أساسيات الجافاسكربت</a></li> + <li><a href="/ar/docs/Learn/Getting_started_with_the_web/Publishing_your_website">نشر موقعك</a></li> + <li><a href="/ar/docs/Learn/Getting_started_with_the_web/How_the_Web_works">كيف يعمل الويب</a></li> +</ul> diff --git a/files/ar/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ar/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..130aeeed41 --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,422 @@ +--- +title: أساسيات الجافاسكربت +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - برمجة سكربتات + - تعلم + - جافاسكربت + - مبتدئ + - ويب +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary" dir="rtl"> +<p>جافا سكريبت هي لغة البرمجة التي تضيف التفاعل إلى موقع الويب الخاص بك (على سبيل المثال: الألعاب، والردود عندما يتم الضغط على أزرار أو إدخال البيانات في النماذج، والتصميم الديناميكي، والرسوم المتحركة). تساعدك هذه المقالة على البدء في هذه اللغة المثيرة وتعطيك فكرة عن ما هو ممكن.</p> +</div> + +<h2 dir="rtl" id="ما_هي_جافاسكريبت،_حقاً؟">ما هي جافاسكريبت، حقاً؟</h2> + +<p dir="rtl">{{Glossary("JavaScript")}} ("JS" للإختصار)هي بشكل كامل {{Glossary("لغة برمجة ديناميكية ", "لغة برمجة ديناميكية")}} حيت, عندما تطبق على ملف {{Glossary("HTML")}} , يمكن أن توفر التفاعل الديناميكي على المواقع. تم اختراعه من قبل بريندان إيتش، المؤسس المشارك لمشروع موزيلا، ومؤسسة موزيلا، وشركة موزيلا.</p> + +<p dir="rtl">جافا سكريبت متعددة الجوانب والاستعمالات بشكل لا يصدق. يمكنك البدء صغير، مع دوارات، معارض الصور، مخططات بيانية، والاستجابات لنقرات زر. مع المزيد من الخبرة، عليك أن تكون قادرا على خلق الألعاب، والرسوم المتحركة 2D و 3D الرسومات، تطبيقات شاملة لقاعدة البيانات، وأكثر من ذلك بكثير!</p> + +<p dir="rtl">جافا سكريبت نفسها المدمجة إلى حد ما إلى الآن مرنة جدا. وقد كتب المطورين مجموعة كبيرة ومتنوعة من الأدوات على رأس لغة جافا سكريبت الأساسية، وفتح كمية هائلة من وظائف إضافية مع الحد الأدنى من الجهد. وتشمل هذه:</p> + +<ul dir="rtl"> + <li>متصفح واجهات برمجة التطبيقات ({{Glossary("API","APIs")}}) المدمج في متصفحات الويب، وتوفير وظائف مثل إنشاء HTML ديناميكيا ووضع أنماط CSS، وجمع وتلاعب في دفق الفيديو من كاميرا ويب المستخدم، أو توليد الرسومات 3D وعينات الصوت.</li> + <li> APIs الطرف الثالث يسمح للمطورين بدمج الوظائف في مواقعهم من موفري المحتوى الآخرين، مثل تويتر أو فاسيبوك.</li> + <li>أطر ومكتبات الطرف الثالث التي يمكن تطبيقها على HTML الخاص بك للسماح لك لبناء المواقع والتطبيقات بشكل أسرع.</li> +</ul> + +<p dir="rtl">نظرا لأن هذه المقالة من المفترض أن تكون مقدمة خفيفة لجافا سكريبت، فلن نربكك في هذه المرحلة من خلال الحديث بالتفصيل عن الفرق بين لغة جافا سكريبت الأساسية والأدوات المختلفة المذكورة أعلاه. يمكنك معرفة كل ذلك بالتفصيل في وقت لاحق، في <a href="/ar/docs/https://developer.mozilla.org/en-US/docs/Learn/JavaScript" style="cursor: pointer;">منطقتنا لتعليم جافا سكريبت</a>، وفي بقية MDN.</p> + +<p dir="rtl">أدناه سوف أعرض لكم لبعض جوانب اللغة الأساسية، وعليك أن تلعب أيضا مع عدد قليل من الميزات API المتصفح أيضا. إستمتع!</p> + +<h2 dir="rtl" id="مثال_hello_world">مثال "hello world"</h2> + +<p dir="rtl">قد يبدو القسم أعلاه مثير حقا، ولذا ينبغي أن - جافاسكريبت هي واحدة من تقنيات الويب الأكثر حيوية، وأثناء البدء في الحصول على ماهو جيد في استخدامه، مواقعك الخاصة سوف تدخل بك إلى بعداً جديداً من القوة والإبداع.</p> + +<p dir="rtl">ومع ذلك، لتصبح مرتاح مع جافا سكريبت أصعب قليلا من أن تصبح مرتاح مع HTML و CSS. قد تضطر إلى أن تبدأ صغيراً وتظل تعمل في خطوات صغيرة منسقة . للبدء، سنعرض لك كيفية إضافة بعض أساسيات جافا سكريبت إلى صفحتك، وإنشاء "hello world!" مثال (<a href="/ar/docs/https://en.wikipedia.org/wiki/%22Hello,_World!%22_program" style="cursor: pointer;">المعيار في أمثلة البرمجة الأساسية</a>).</p> + +<div class="warning"> +<p dir="rtl"><strong>هام: إذا لم تكن متابعاً لبقية الدورة التدريبية، فيمكنك <a href="/ar/docs/https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip" style="cursor: pointer;">تنزيل شيفرة المثال</a> هذا واستخدامه كنقطة بداية.</strong></p> +</div> + +<ol> + <li dir="rtl">أولا، انتقل إلى موقع الاختبار الخاص بك وإنشاء مجلد جديد يسمى 'scripts' (بدون علامات الاقتباس). ثم، داخل مجلد scripts الجديد الذي قمت بإنشائه، إنشاء ملف جديد يسمى main.js. إحفظه في مجلد scripts.</li> + <li dir="rtl">بعد ذلك، في ملف index.html، أدخل العنصر التالي في سطر جديد قبل علامة الإغلاق <body/> مباشرة: + <pre class="brush: html"><script src="scripts/main.js"></script></pre> + </li> + <li dir="rtl">هذا بكل بساطة يعمل كما يعمل {{htmlelement("link")}} للـCSS، يقوم بإضافة الجافاسكربت للصفحة، لترى التأثيرات على الصفحة.</li> + <li dir="rtl">الآن اضف هذا الكود الى ملف <code>main.js</code>: + <pre class="brush: js" dir="rtl">var myHeading = document.querySelector('h1'); +myHeading.textContent = 'Hello world!';</pre> + </li> + <li dir="rtl">الآن تأكد أنك حفظت التعديلات على ملف HTML و الجافاسكربت. ثم قم بفتح ملف الHTML بالمتصفح، ينبغى ان تشاهد نتيجة مماثلة للصورة:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> +</ol> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: السبب لأننا اضفنا {{htmlelement("script")}} قرب نهاية ملف HTML لأن المتصفح يقرأ الملف بالترتيب من السطر الأول الى الأخير. فإذا كان ملف الجافاسكربت يقوم بتعديل ملف الHTML ولكن ملف الجافاسكربت عمل قبل ان يتم تحميل HTML بشكل كامل فلن يعمل بشكل صحيح. لذلك يفضل دائما اضافة ملفات الجافاسكربت بنهاية ملف الHTML</p> +</div> + +<h3 dir="rtl" id="مالذي_حدث؟">مالذي حدث؟</h3> + +<p dir="rtl">الآن العنوان اصبح "Hello world!" بإستخدام الجافاسكربت. فعلت ذلك بإستخدام دالة تسمى <code>{{domxref("Document.querySelector", "querySelector()")}}</code> لحفظ مرجع للعنوان وحفظه الى متغير يسمى <code>myHeading</code>. هذا قريب جدا لما تفعله بإستخدام CSS، اذا اردت ان تقوم بتعديل احد العناصر يجب اختياره مسبقا.</p> + +<p dir="rtl">بعد ذلك، حددت قيمة خاصية <code>{{domxref("Node.textContent", "textContent")}}</code> للمتغير <code>myHeading</code> الى "Hello world!"</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: جميع الخواص اللاتي استخدمتهن بالأعلى هي جزء من <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, الذي يسمح لك بالتعديل على الصفحات.</p> +</div> + +<h2 dir="rtl" id="أساسيات_اللغة_ودورة_بسيطة">أساسيات اللغة ودورة بسيطة</h2> + +<p dir="rtl">لنتعلم بعض المميزات الأساسية بلغة الجافاسكربت، لتفهم كيف تعمل. نقطة مهمة هي أن اغلب المفاهيم تتشارك معها اللغات البرمجية الأخرى، لذلك اذا كسبت خبرة بهذه المفاهيم، يمكنك برمجة كل ما تريد!</p> + +<div class="warning" dir="rtl"> +<p><strong>مهم</strong>: في هذا الدرس، جرب بأن تكتب الأكواد في كونسول الجافاسكربت لترى ماذا تعمل. لمعرفة المزيد عن الكونسول القِ نظرة على هذا الدرس <a href="/en-US/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</p> +</div> + +<h3 dir="rtl" id="المتغيرات">المتغيرات</h3> + +<p dir="rtl">{{Glossary("Variable", "Variables")}} هي مثل الصناديق نقوم بتخزين البيانات فيها. تبدأ اولا بتعريف المتغير بإستخدام كلمة <code>var</code> وبعدها تسميها بالإسم الذي ترغب به:</p> + +<pre class="brush: js">var myVariable;</pre> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: الفاصلة المنقوطة بنهاية السطر تعني أن السطر البرمجي ينتهي هنا; لكنها ليست مطلوبة الا اذا احتجت ان تدمج اكثر من سطر برمجي في سطر برمجي واحد. لذلك من الأفضل وما هو متعارف عليه ان تقوم بإضافة الفاصلة المنقوطة نهاية كل سطر برمجي لتفادي الأخطاء البرمجية الغير مقصودة. بالطبع هناك قواعد متى يفضل إستخدامها ومتى لا يفضل، للمزيد يمكنك الإطلاع على <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Your Guide to Semicolons in JavaScript</a>.</p> +</div> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: يمكنك تسمية المتغيرات بالإسم الذي تفضله. لكن هناك بعض الشروط التي ينبغي الإلتزام بها (إطلع على هذا الدرس <a href="http://www.codelifter.com/main/tips/tip_020.shtml">variable naming rules</a>). إذا ما كنت غير متأكد انه يمكنك استخدام اسم معين ام لا يمكنك إستخدام هذا الموقع<a href="https://mothereff.in/js-variables"> يمكنك إستخدام هذا الموقع </a> للتأكد أن الإسم صالح للإستخدام.</p> +</div> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: الجافاسكربت حساسة لحجم الحرف الإنجليزي, مثلا <code>myVariable</code> يعتبر متغير اخر عن <code>myvariable</code> . لذلك دائما اذا واجهت مشكلة تأكد من احجام حروف المتغيرات لديك.</p> +</div> + +<p dir="rtl">بعد تعريف المتغير يمكنك إسناد قيمة إليه:</p> + +<pre class="brush: js">myVariable = 'Bob';</pre> + +<p dir="rtl">يمكنك ايضا أن تعرف المتغير وتسند إليه قيمه بنفس الوقت:</p> + +<pre class="brush: js">var myVariable = 'Bob';</pre> + +<p dir="rtl">يمكنك الحصول على قيمة المتغير بإستخدام إسم المتغير:</p> + +<pre class="brush: js">myVariable;</pre> + +<p dir="rtl">يمكنك أيضا تغيير قيمة المتغير متى ما أردت:</p> + +<pre>var myVariable = 'Bob'; +myVariable = 'Steve';</pre> + +<p dir="rtl">بإمكانك تخزين انواع مختلفة من البيانات بالمتغيرات <a href="/en-US/docs/Web/JavaScript/Data_structures">انواع البيانات</a>:</p> + +<table class="standard-table" style="height: 566px; width: 751px;"> + <thead> + <tr> + <th scope="row">نوع المتغير</th> + <th scope="col">شرح</th> + <th scope="col">مثال</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{Glossary("String")}}</th> + <td dir="rtl">نص محاط بعلامات التنصيص</td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Number")}}</th> + <td dir="rtl">رقم, لاحظ أن الأرقام لا نحيطها بعلامات التنصيص</td> + <td><code>var myVariable = 10;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Boolean")}}</th> + <td dir="rtl">قيمة صحيحة <code>true</code> او خاطئة <code>false</code> هي كلمات خاصة بالجافاسكربت لا تحتاج علامات تنصيص</td> + <td><code>var myVariable = true;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Array")}}</th> + <td dir="rtl">قائمة تحتوي على عدة بيانات بإسم متغير واحد</td> + <td><code>var myVariable = [1,'Bob','Steve',10];</code><br> + بإمكانك إستدعاء كل قيمة بالمصفوفة بهذا الشكل:<br> + <code>myVariable[0]</code>, <code>myVariable[1]</code>, الخ.</td> + </tr> + <tr> + <th scope="row">{{Glossary("Object")}}</th> + <td dir="rtl">بكل بساطة كل شيء بالجافاسكربت عبارة عن كائن. ويمكنك تخزينه بإسم متغير. تذكر ذلك وانت تتعلم</td> + <td><code>var myVariable = document.querySelector('h1');</code><br> + All of the above examples too.</td> + </tr> + </tbody> +</table> + +<p dir="rtl">لماذا نحتاج المتغيرات؟ نحتاج المتغيرات اذا اردنا ان نبرمج اي شيء قيمته تتغيّر. على سبيل المثال تعديل رسالة ترحيب بعضو جديد، فمن غير المعقول ان تكتب رسالة خاصة لكل عضو جديد بل تستخدم المتغيرات لتعديل الرسالة على حسب إسم المستخدم.</p> + +<h3 dir="rtl" id="التعليقات">التعليقات</h3> + +<p dir="rtl">يمكنك كتابة التعليقات كما تفعل بلغة الـCSS:</p> + +<pre class="brush: js">/* +أي شيء هنا يعتبر تعليق. +*/</pre> + +<p dir="rtl">اذا كان تعليقك لا يتكون الا من سطر واحد يمكنك إستخدام الطريقة السهلة التالية:</p> + +<pre class="brush: js" style="font-size: 14px;">// هذا تعليق +</pre> + +<h3 dir="rtl" id="العوامل_الحسابية">العوامل الحسابية</h3> + +<p dir="rtl"><code>{{Glossary("operator")}}</code> هو عامل حسابي ينتج لنا نتيجة بإستخدام اكثر من قيمة أو متغير. بالجدول التالي يمكنك الإطلاع على بعض الأمثلة على كيفية استخدامهم وتجربتهم بكونسول الجافاسكربت:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">العامل الحسابي</th> + <th scope="col">شرح</th> + <th scope="col">الرمز</th> + <th scope="col">مثال</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">الجمع</th> + <td>يستخدم لجمع الأرقام أو لدمج النصوص مع بعضهم البعض</td> + <td><code>+</code></td> + <td><code>6 + 9;<br> + "Hello " + "world!";</code></td> + </tr> + <tr> + <th scope="row">الطرح, الضرب, القسمة</th> + <td>بالطبع تعمل كما تعمل بالرياضيات</td> + <td><code>-</code>, <code>*</code>, <code>/</code></td> + <td><code>9 - 3;<br> + 8 * 2; // نستخدم رمز النجمة للضرب<br> + 9 / 3;</code></td> + </tr> + <tr> + <th scope="row"> + <p>الإسناد</p> + </th> + <td>كما تعلمت مسبقا. نستخدم علامة يساوي واحدة لإسناد قيمة إلى متغير</td> + <td><code>=</code></td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">المساواة</th> + <td>تقوم بإختبار قيمتين. اذا كانو متساويين تقوم بإرجاع قيمة صح <code>true</code> وإذا كانت خاطئة تقوم بإرجاع قيمة خطأ <code>false</code></td> + <td><code>===</code></td> + <td><code>var myVariable = 3;<br> + myVariable === 4;</code></td> + </tr> + <tr> + <th scope="row">ليست, لا تساوي</th> + <td> + <p>ترجع قيمة عكس القيمة المعطاة. فعلى سبيل المثال إذا اعطيتها قيمة صحيحة ترجع لك قيمة خاطئة والعكس صحيح. واذا أستخدمت مع علامة المساواة ترجع صح اذا كانت القيمتين لا يتساوون وترجع خطأ إذا كانوا يتساوون</p> + </td> + <td><code>!</code>, <code>!==</code></td> + <td> + <p>القيمة هنا صحيحة لأن <code>myVariable</code> تساوي 3 لكنها سترجع خطأ لأننا إستخدمنا علامة <code>!</code></p> + + <p><code>var myVariable = 3;<br> + !(myVariable === 3);</code></p> + + <p>هنا نجرب "هل المتغير <code>myVariable</code> لا يساوي 3".</p> + + <p>لكنه سيرجع قيمة خاطئة لأن <code>myVariable</code> تساوي 3</p> + + <p><code><code>var myVariable = 3;</code><br> + myVariable !== 3;</code></p> + </td> + </tr> + </tbody> +</table> + +<p dir="rtl">هناك الكثير للتعلم عن العمليات الرياضية بالجافاسكربت، لكن هذا كافي لهذه المرحلة.إطلع على <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a> للمزيد.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: قد تحصل على نتائج غريبة عند إستخدام اكثر من نوع من البيانات بالعمليات الحسابية. لذلك كن حريص بأن تستخدم المتغيرات بشكل صحيح لتحصل على النتيجة المرادة. على سبيل المثال قم بكتابة <code>"35" + "25"</code> بكونسول الجافاسكربت، نتيجة غريبة أليس كذلك؟ لأن علامات التنصيص تقوم بتحويل الأرقام إلى نصوص لذلك عندما جمعتهم بالفعل انت قمت بدمج نصين وليس بجمع رقمين. لذلك جرب كتابة <code>35 + 25</code> بالكونسول وسترى النتيجة الصحيحة.</p> +</div> + +<h3 dir="rtl" id="الشروط">الشروط</h3> + +<p dir="rtl">الأكواد الشَرْطِيّة تسمح لك بإختبار شرط محدد فإذا كان صحيحا يقوم بتشغيل اكواد أخرى. وإذا كان خاطئا يقوم بتجاهل الأكواد. من أكثر الأكواد الشَرْطِيّة إستخداما هي <code>if ... else</code> والمثال عليها:</p> + +<pre class="brush: js">var iceCream = 'chocolate'; +if (iceCream === 'chocolate') { + alert('Yay, I love chocolate ice cream!'); +} else { + alert('Awwww, but chocolate is my favorite...'); +}</pre> + +<p dir="rtl">الكود الذي بداخل القوسين <code>if ( ... )</code> هو الإختبار الشَرْطي. يمكنك كتابة الاختبارات بداخله مثال هل المتغير يساوي عدد معين او نص معين. بمالمثال قمنا بإختبار هل المتغير <code>iceCream</code> يساوي القيمة <code>chocolate</code>. بالطبع النتيجة صحيح كما هو واضح امامنا لذلك سيقوم بتشغيل السطور البرمجية بداخل الأقواس <code>{}</code>، لكن ماذا لو كان المتغير لا يساوي <code>chocolate</code> في هذه الحالة ستقوم الجافاسكربت بتشغيل السطور الموجودة بداخل الأقواس <code>{}else</code>.</p> + +<h3 dir="rtl" id="الدوال">الدوال</h3> + +<p dir="rtl">{{Glossary("Function", "Functions")}} هي طريقة لتجميع السطور البرمجية متى ما أردت إعادة إستخدامها أو لأجل الترتيب. فعلى سبيل المثال لديك كود تريد أن تقوم بتشغيله اكثر من مرة ومن أكثر من مكان، فمن غير المعقول كتابة الكود أكثر من مرة في اكثر من مكان، بل يفضل كتابته مرة واحدة وإسناده إلى دالة تقوم بإستدعائها بإسم الدالة متى ما اردت. تذكر أنك إستخدمت بعض الدوال مسبقا والأمثلة عليها كالتالي:</p> + +<ol> + <li> + <pre class="brush: js">var myVariable = document.querySelector('h1');</pre> + </li> + <li> + <pre class="brush: js">alert('hello!');</pre> + </li> +</ol> + +<p dir="rtl">هذه الدوال, <code>document.querySelector</code> و <code>alert</code>, هي دوال جاهزة بالمتصفح يمكنك إستخدامها متى ما أردت.</p> + +<p dir="rtl">إذا رأيت شيئا مشابها للمتغيرات لكنه ينتهي بقوسين <code>()</code> غالبا تعني انها دالّة. الدوال عادة تطلب {{Glossary("Argument", "arguments")}} وهي عبارة عن بيانات تحتاجها الدالة لتأدي عملها المطلوب منها. هذه البيانات تكون داخل القوسين <code>()</code> ونقوم بإرسال عدة بيانات بالتفريق بينهم بعلامة الفاصلة <code>,</code> اذا ما دعت الحاجة لذلك.</p> + +<p dir="rtl">على سبيل المثال دالة <code>alert()</code> وهي دالة تقوم بإبراز رسالة منبثقة للمستخدم داخل المتصفح. ونحتاج ان نعطيها النص المراد عرضه للمستخدم.</p> + +<p dir="rtl">المميز بالموضوع انه يمكنك كتابة الدوال الخاصة بك. بالمثال التالي سنطلع على كيف يمكنك كتابة الدالة والتي تقبل بأن تأخذ رقمين وتقوم بإرجاع ناتج الضرب بينهم:</p> + +<pre class="brush: js">function multiply(num1,num2) { + var result = num1 * num2; + return result; +}</pre> + +<p dir="rtl">قم بكتابة الكود بالأعلى بكونسول الجافاسكربت ثم قم بتجربة الدالة بإستخدام عدة ارقام، على سبيل المثال:</p> + +<pre class="brush: js">multiply(4,7); +multiply(20,20); +multiply(0.5,3);</pre> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: كلمة <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> تخبر الدالة ماذا ينبغي ان تقوم بإرجاعه اذا قمنا بإستدعائها.</p> +</div> + +<h3 dir="rtl" id="الأحداث">الأحداث</h3> + +<p dir="rtl">لبناء صفحات ويب تفاعلية فإننا سنحتاج الى ما يسمى بالأحداث (Events). الفكرة بكل بساطة هي بأن تقوم بربط جزء معين من برنامج ليقوم بالعمل عند حدوث حدثٌ معين. أحد اهم الأحداث وأكثرها إستخداما هو حدث <a href="/en-US/docs/Web/Events/click">click event</a> وهو يحدث عندما تقوم بالضغط على شيء ما بالفأرة. لنأخذ مثال بسيط يشرح حدث الضغط، قم بنسخ الكود التالي ولصقه بكونسول الجافاسكربت الخاص بك ثم قم بالضغط على أي مكان بالصفحة:</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() { + alert('Ouch! Stop poking me!'); +}</pre> + +<p dir="rtl">هناك اكثر من طريقة لربط حدث بأحد عناصر الصفحة. في هذا المثال قمنا بإختيار عنصر {{htmlelement("html")}}، وحددنا حدث الضغط عليه <code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> وقمنا بإعطاه الحدث دالة مجهولة (من غير إسم) يقوم بتشغيلها عندما يحصل هذا الحدث (الضغط على العنصر).</p> + +<p dir="rtl">لاحظ أن:</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre> + +<p dir="rtl">مثل:</p> + +<pre class="brush: js">var myHTML = document.querySelector('html'); +myHTML.onclick = function() {};</pre> + +<p dir="rtl">لكنها بصيغة اقصر.</p> + +<h2 dir="rtl" id="تحسين_مثال_الموقع_الخاص_بنا">تحسين مثال الموقع الخاص بنا</h2> + +<p dir="rtl">الآن تعلمنا بعض بعض أساسيات الجافاسكربت، لنقم بإضافة بعض الخصائص الرائعة إلى موقعنا الذي تعلمنا عليه بداية الدرس.</p> + +<h3 dir="rtl" id="إضافة_خاصية_إستبدال_الصور">إضافة خاصية إستبدال الصور</h3> + +<p dir="rtl">في هذا الجزء من الدرس. سنضيف صورة جديدة إلى موقعنا بإستخدام الجافاسكربت و DOM API للتبديل بين الصور عند الضغط على الصورة.</p> + +<ol> + <li dir="rtl">بالبداية إبحث عن صورة تود عرضها بالصفحة. تأكد أن الصورة بنفس حجم الصورة السابقة او اقرب</li> + <li dir="rtl">احفظ الصورة بمجلد <code>images</code>.</li> + <li dir="rtl">غير إسم الصورة إلى <code>firefox2.png</code>.</li> + <li dir="rtl">إفتح ملف <code>main.js</code>, وقم بكتابة الكود التالي بالملف. (إذا كنت تحتفظ بالكود بالأمثلة السابقة يفضل حذفه.) + <pre class="brush: js">var myImage = document.querySelector('img'); + +myImage.onclick = function() { + var mySrc = myImage.getAttribute('src'); + if(mySrc === 'images/firefox-icon.png') { + myImage.setAttribute ('src','images/firefox2.png'); + } else { + myImage.setAttribute ('src','images/firefox-icon.png'); + } +}</pre> + </li> + <li dir="rtl">احفظ جميع الملفات ثم قم بفتح ملف <code>index.html</code> بالمتصفح. الآن عندما تضغط على الصورة يجب ان تتحول إلى الصورة الأخرى!</li> +</ol> + +<p dir="rtl">كما تلاحظ بالكود فقد قمنا بحفظ مرجع إلى الصورة {{htmlelement("img")}} بإسم متغير <code>myImage</code>، بعد ذلك نقوم بربط حدث <code>onclick</code> بدالة مجهولة (بدون اسم) لتعمل عن الضغط على الصورة، الدالة تقوم بعمل التالي:</p> + +<ol> + <li dir="rtl">نقوم بجلب قيمة خاصية <code>src</code> الخاصة بالصورة.</li> + <li dir="rtl">ثم نقوم بالتأكد هل قيمة <code>src</code> الخاصة بالصورة تساوي رابط الصورة الأساسية : + <ol> + <li>إذا كانت كذلك فنقوم بتغيير قيمة <code>src</code> بقيمة الصورة الثانية ليتم تحميلها بعنصر {{htmlelement("img")}}.</li> + <li> لكن اذا كانت غير ذلك (بمعنى انه قد قمنا بتغيير القيمة) فسنقوم بإرجاع قيمة <code>src</code> إلى القيمة الأساسية.</li> + </ol> + </li> +</ol> + +<h3 dir="rtl" id="إضافة_رسالة_ترحيبية_مخصصة_للمستخدم">إضافة رسالة ترحيبية مخصصة للمستخدم</h3> + +<p dir="rtl">الآن سنقوم بكتابة بعض السطور البرمجية لتغيير عنوان الصفحة إلى رسالة مخصصة للمستخدم. حيث سيقوم المستخدم بإدخال إسمه ثم نقوم بإضافة إسمه إلى العنوان عندما يقوم بالدخول إلى الصفحة. سنقوم بتخزين إسم المستخدم بخاصية تخزين البيانات الموجودة بالمتصفح التي تسمى <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>. وسنقوم أيضا بإضافة خيار لتغيير إسم المستخدم.</p> + +<ol> + <li dir="rtl">بملف <code>index.html</code>, قم بإضافة هذا السطر قبل عنصر {{htmlelement("script")}}: + + <pre class="brush: html"><button>Change user</button></pre> + </li> + <li dir="rtl">بملف <code>main.js</code>, قم بإضافة هذا الكود في آخر الملف كما هي، الكود يقوم بتخزين مرجع للزر والعنوان بمتغيرات: + <pre class="brush: js">var myButton = document.querySelector('button'); +var myHeading = document.querySelector('h1');</pre> + </li> + <li dir="rtl">الآن قم بإضافة هذه الدالة التي تقوم بتخزين إسم المستخدم بقاعدة بيانات المتصفح: + <pre class="brush: js">function setUserName() { + var myName = prompt('Please enter your name.'); + localStorage.setItem('name', myName); + myHeading.textContent = 'Mozilla is cool, ' + myName; +}</pre> + الدالة كما تلاحظ تقوم بإستخدام دالة <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a> والتي تقوم بإظهار رسالة منبثقة للمستخدم مشابهه لدالة <code>alert()</code> لكنها تطلب منه إدخال بعض البيانات. وتقوم بحفظ البيانات المدخلة في متغير اسمه <code>myName</code> عند الضغط على موافق، في هذه الحالة نحن نقوم بالطلب من المستخدم بكتابة إسمه بعد ذلك نقوم بإستخدام خاصية التخزين <code>localStorage</code> والتي تسمح لنا بتخزين وإسترجاع بيانات من المتصفح. نقوم بإستخدام دالة <code>setItem</code> لإنشاء مفتاح بقاعدة البيانات بإسم <code>name</code> ومن ثم نقوم بتخزين إسم المستخدم بها. وأخيرا نقوم بتتغير نص العنوان لنقوم بإظهار إسم المستخدم به.</li> + <li dir="rtl"> بعد ذلك نقوم بإستخدام دالة شَرطِيّة للتأكد ما اذا كان إسم المستخدم محفوظ مسبقا بقاعدة بيانات المتصفح سنسمي هذه السطور سطور بداية البرنامج لأنها ستعمل مع بداية عمل البرنامج: + <pre class="brush: js">if(!localStorage.getItem('name')) { + setUserName(); +} else { + var storedName = localStorage.getItem('name'); + myHeading.textContent = 'Mozilla is cool, ' + storedName; +}</pre> + كما ترا الدالة الشرطية تقوم بالتأكد بأنه "لا" يوجد إسم في قاعدة بيانات المتصفح لأننا إستخدمنا علامة التعجب. فإذا لم يجد إسم في قاعدة البيانات فإنه سيبدأ بتشغيل دالة <code>setUserName()</code> التي كتبناها مسبقا ليطلب من المستخدم إسمه وتخزينه في قاعدة البيانات. لكن إذا كان الإسم موجود في قاعدة البيانات فسيتم جلبه بإستخدام دالة <code>getItem()</code>، بعد ذلك نقوم بعرضه مع .العنوان</li> + <li dir="rtl">أخيرا سنقوم بربط حدث الضغط على الزر <code>onclick</code> الذي قمنا بإنشاءه مسبقا بدالة مجهولة تقوم بتشغيل الدالة <code>setUserName()</code> التي قمنا بكتابتها، هذه الطريقة تسمح للمستخدم بتغيير إسمه متى ما أراد: + <pre class="brush: js">myButton.onclick = function() { + setUserName(); +} +</pre> + </li> +</ol> + +<p dir="rtl">الآن عندما يزور المستخدم الصفحة لأول مرة، ستطلب منه كتابة إسمه ثم ستظهر رسالة مخصصة بإسمه. ويمكنه تغيير إسمه بالضغط على الزر الذي قمنا بإضافته. قاعدة البيانات تقوم بحفظ البيانات حتى لو قام المستخدم بإغلاق الصفحة لذلك عندما يزور الصفحة مرة أخرى سيرى الرسالة الخاصة به!</p> + +<h2 dir="rtl" id="خاتمة">خاتمة</h2> + +<p dir="rtl">إذا كنت قد تابعت جميع التعليمات التي ذكرناها، فيجب ان تحصل على صفحة مشابهة للصورة بالأسفل (تستطيع <a href="https://mdn.github.io/beginner-html-site-scripted/">تجرب نسختنا من هنا</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> + +<p dir="rtl">إذا واجهت مشاكل، يمكنك مقارنه عملك مع <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">مثالنا المنشور على قيت هب.</a></p> + +<p dir="rtl">إلى الآن لم نقم بتعلم الكثير عن الجافاسكربت ودائما هناك المزيد للتعلم عنها. إذا كنت قد إستمتعت بتعلمها فيمكنك التقدم بمتابعة الدروس، إطلع على <a href="/en-US/docs/Learn/JavaScript">دروس الجافاسكربت</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> + +<p> </p> + +<h2 dir="rtl" id="في_هذا_الدرس">في هذا الدرس</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> + +<p> </p> diff --git a/files/ar/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/ar/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..3981454cb9 --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,111 @@ +--- +title: كيف سيكون مظهر موقعك؟ +slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like +tags: + - البدء مع الويب + - مبتدئين +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p dir="rtl">تناقش مقالة <em>كيف سيكون مظهر موقعك؟</em> عمليّة التخطيط والتصميم التي يجب عليك القيام بها من أجل موقعك قبل البدء بكتابة الشيفرة المصدرية، متضمنةً: "ما المعلومات التي يجب أن يقدمها موقعي؟"، "ما الخطوط والألوان التي أريدها؟"، "ماذا يفعل موقعي؟".</p> +</div> + +<h2 dir="rtl" id="أهم_الأشياء_أولاً_التخطيط"> أهم الأشياء أولاً: التخطيط</h2> + +<p dir="rtl">قبل أن تفعل أي شيء، أنت تحتاج لبعض الأفكار. ماذا على موقعك أن يفعل؟ يستطيع الموقع جوهرياً فعل أي شيء، ولكن يجب أن تبدأ بأمور بسيطة في محاولتك الأولى. سنبدأ بإنشاء صفحة بسيطة فيها عناوين، وصورة، وبعض الفقرات.</p> + +<p dir="rtl">للبدء ستحتاج للإجابة على هذه الأسئلة:</p> + +<ol dir="rtl"> + <li><strong>عمّا هو موقعك؟</strong> هل تحب الكلاب؟ مدينة نيويورك؟ شخصية باكمان؟</li> + <li><strong>ما المعلومات التي تقدمها حول الموضوع؟</strong> اكتب عنواناً وبعض فقرات، وفكِّر بصورة تريد عرضها على صفحتك.</li> + <li><strong>كيف يبدو موقعك</strong>؟ ما لون الخلفية؟ ما نوع الخط المناسب: رسمي، كرتوني، غامق، رقيق؟</li> +</ol> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: المشاريع المُعقدة تحتاج لدليل مُفصَّل يغطي جميع التفاصيل من ألوان، والخطوط، والمسافات بين العناصر، والأسلوب المناسب لكتابة التصميم، وهلمَّ جرّا. ذلك النوع من الكتيّبات الإرشادية يدعى دليل التصميم، يمكنك رؤية مثال عنه في <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">دليل نظام فايرفوكس</a>.</p> +</div> + +<h2 dir="rtl" id="ارسم_تصميمك">ارسم تصميمك</h2> + +<p dir="rtl">بعد إجابتك على الأسئلة السابقة التقط قلماً وورقة وارسم (بطريقة تقريبيّة) كيف تريد أن يبدو الموقع. لأوَّل موقع بسيط تقوم به لن يكون هناك الكثير لترسمه، ولكن يجب أن تعتاد على القيام بهذا. تلك الطريقة تساعد حقاً (لا يجب عليك أن تكون <span>فان غوخ لتُنجِز ذلك!).</span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: حتى على الواقع يقوم فريق التصميم عادةً بالرسم بدايةً على الورق وبعدها يقومون ببناء نموذج رقمي لتلك الرسمة باستخدام إحدى محررات الرسوميات أو تقنيات الويب.</p> + +<p dir="rtl">غالباً ما يضم فريق الويب مصمم رسوميات (UI) ومصمم لتجربة المستخدم (UX). يقوم مصمم الرسوميات بصنع رؤية للموقع. أما مصمم تجربة المستخدم فيقوم بدور معالجة كيف ستكون تجربة المستخدمين مع الموقع وكيف سيتفاعل الموقع معهم.</p> +</div> + +<h2 dir="rtl" id="اختر_مواد_العرض">اختر مواد العرض</h2> + +<p dir="rtl">في هذه المرحلة من الجيد البدء في وضع المحتوى الموجود على الورقة في صفحة الويب.</p> + +<h3 dir="rtl" id="النص">النص</h3> + +<p dir="rtl">يجب أن يكون لازال لديك الفقرات والعنوان من السابق (عندما رسمتها على ورقة). ابقِ تلك الأشياء قريبة منك حالياً (سنحتاجها بعد قليل).</p> + +<h3 dir="rtl" id="اللون">اللون</h3> + +<p dir="rtl">لاختيار لون قم بالذهاب لموقع <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">منتقي الألوان</a> وابحث عن اللون الذي تريده. عندما تضغط على اللون سوف ترى عبارة غريبة مكوّنة من ستة أحرف مثل <code>660066#</code>. تدعى تلك العبارة <em>بالرمز السداسي عشري</em> (hexadecimal)، وهي تمثل لونك. قم حالياً بنسخ ذلك الرمز واحفظه في مكان ما.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> + +<h3 dir="rtl" id="الصور">الصور</h3> + +<p dir="rtl">قم بالذهاب إلى موقع <a href="https://www.google.com/imghp?gws_rd=ssl">صور جوجل</a> لاختيار صورة وابحث عن شيء مناسب لك.</p> + +<ol dir="rtl"> + <li>عندما تجد الصورة التي تريدها اضغط عليها.</li> + <li>اضغط على الزر <em>عرض الصورة</em> (View image).</li> + <li>في الصفحة التالية التي ستفتح اضغط على الصورة بواسطة الزر الأيمن للفأرة (استخدم Ctrl + click على نظام ماك) واختر حفظ الصورة ك (Save Image As) واختر مكان ما على جهازك لتحفظها عليه. هناك حل بديل وهو أن تنسخ عنوان الصورة من متصفحك لاستخدامه لاحقاً.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: معظم الصور على الويب، بما فيها الصور الموجودة في موقع جوجل صور، تحتوي على حقوق ملكيّة. لتقلل من احتمال انتهاك حقوق الطبع والنشر قم بترشيح الصور باستخدام مُرشِّح جوجل. اضغط على <strong>أدوات البحث</strong> (Search tools) ومن ثم اختر <strong>حقوق الاستخدام</strong> (Usage rights):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p> +</div> + +<h3 dir="rtl" id="الخط">الخط</h3> + +<p dir="rtl">لاختيار الخط:</p> + +<ol dir="rtl"> + <li>قم بالذهاب إلى موقع <a href="http://www.google.com/fonts">خطوط جوجل</a> وحرِّك الفأرة للأسفل حتى تجد الخط الذي تريده. تستطيع أيضاً استخدام الأدوات الموجودة في الجهة اليمنى للموقع لإجراء ترشيح مُتقدِم للنتائج.</li> + <li>اضغط على أيقونة الزائد الموجودة بجانب الخط الذي تريده.</li> + <li>اضغط على زر "* العائلة المختارة (Family Selected)" الموجود في الشريط الموجود أسفل الموقع (الرمز "*" يتغيّر اعتماداً على عدد الخطوط التي اخترتها).</li> + <li>قم بنسخ السطور التي ستظهر في النافذة المنبثقة إلى محرر النصوص لتحفظها لاستخدامها لاحقاً.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p> + +<p> </p> + +<h2 dir="rtl" id="في_هذه_الوحدة_أيضاًEditEdit">في هذه الوحدة أيضاً<a class="button new only-icon section-edit" href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA_%D9%84%D8%BA%D8%A9_%D8%AA%D8%B1%D9%85%D9%8A%D8%B2_%D8%A7%D9%84%D9%86%D8%B5_%D8%A7%D9%84%D9%81%D8%A7%D8%A6%D9%82$edit#في_هذه_الوحدة" rel="nofollow nofollow, noindex"><span>Edit</span></a><a class="button section-edit only-icon" href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%AA%D8%AB%D8%A8%D9%8A%D8%AA_%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D8%A7%D8%AA_%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A9$edit#في_هذه_الوحدةEdit" rel="nofollow, noindex"><span>Edit</span></a></h2> + +<ul dir="rtl"> + <li><a href="/ar/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/What_will_your_website_look_like">كيف سيكون مظهر موقعك؟</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/HTML_basics">أساسيات لغة ترميز النص الفائق</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/JavaScript_basics">أساسيات الجافا سكربت</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Publishing_your_website">نشر موقعك</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/How_the_Web_works">كيف يعمل الويب</a></li> +</ul> diff --git a/files/ar/learn/getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة/index.html b/files/ar/learn/getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة/index.html new file mode 100644 index 0000000000..70be221b32 --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة/index.html @@ -0,0 +1,297 @@ +--- +title: أساسيات الـ CSS +slug: Learn/Getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة +tags: + - CSS + - تصميم + - تعلم + - مبتدأ + - ويب +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p dir="rtl">السي إس إس CSS (صفحات الطرز المتراصة) هي التعليمات البرمجية التي تستخدم لتنسيق صفحتك. ستناقش مقالة <em>أساسياتCSS</em> ما تحتاجه لتبدأ باستخدام هذه التقنية. سنجيب عن أسئلة مثل: كيف أجعل النصّ ذا لون أسود أو أحمر؟ كيف أجعل محتويات الصفحة في أماكن محددة على الشاشة؟ كيف أزين الصفحة بصور و بألوان خلفية؟</p> +</div> + +<h2 dir="rtl" id="إذاً_ماهي_CSS_عملياً؟">إذاً ماهي CSS عملياً؟</h2> + +<p dir="rtl">لاتعد السي إس إس لغة برمجة (كما الأتش تي أم إل لا تعد كذلك). وهي ليست <em>لغة ترميزية</em> حتى — فهي <em>لغة أنماط</em> (تصميم). هذا يعني أنها تسمح لك بتطبيق تنسيقات على عناصر منتقاة من وثيقة لغة ترميز النص الفائق. على سبيل المثال، لاختيار <strong>جميع</strong> عناصر الفقرة في صفحة الويب وجعل لون النص بداخلها أحمر، تستطيع استخدام هذه التعليمة:</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">p </span><span class="punctuation token">{</span> + <span class="property token">color</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p dir="rtl">دعنا ننسخ الثلاث سطور السابقة ونضعها في ملف جديد وبعدها نقوم بحفظ الملف باسم <code>style.css</code> داخل المجلد <code>styles</code>.</p> + +<p dir="rtl">ولكننا مازلنا بحاجة لربط الملف مع وثيقة لغة ترميز النص الفائق. وإلا لن يعمل التنسيق الذي أضافه ملف <code>styls.css</code> على صفحتك. (إذا لم تكن قد تابعت معنا الوحدة من بدايتها قم بقراءة مقالة <a href="/ar/docs/Learn/Getting_started_with_the_web/التعامل_مع_الملفات">التعامل مع الملفات</a> و مقالة <a href="/ar/docs/Learn/Getting_started_with_the_web/أساسيات_لغة_ترميز_النص_الفائق">أساسيات لغة ترميز النص الفائق</a> لمعرفة ما أنت بحاجة إليه لتبدأ).</p> + +<ol dir="rtl"> + <li>افتح الملف <code>index.html</code> والصق السطر أدناه في وسم <code>head</code>: + + <pre class="brush: html"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> + </li> + <li>احفظ الملف وقم بفتح الصفحة في متصفحك. يجب أن ترى شيئاً من هذا القبيل:</li> +</ol> + +<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;"></p> + +<p dir="rtl">تهانينا! إذا أصبح نص فقرتك باللون الأحمر، فقد قمت بكتابة أول ملف سي إس إس ناجح.</p> + +<h3 dir="rtl" id="تشريح_أمر_السي_إس_إس">تشريح أمر السي إس إس</h3> + +<p dir="rtl">دعنا نأخذ نظرة مفصلة حول الثلاث سطور السابقة:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> + +<p dir="rtl">تدعى الثلاث سطور السابقة <strong>بمجموعة الأمر</strong> (rule set). لاحظ أيضاً أسماء كل جزئ من مجموعة الأوامر تلك:</p> + +<dl> + <dt dir="rtl">المحدد (المنتقي)</dt> + <dd dir="rtl">هو اسم عنصر الأتش تي أم إل ويوضع في بداية مجموعة الأوامر. يقوم بتحديد العنصر/العناصر التي يراد تنسيقها (في حالتنا العناصر ذات الوسم <code>p</code>). لتقوم بتنسيق عنصر أخر ما عليك سوى تغيير المحدد.</dd> + <dt dir="rtl">الإعلان</dt> + <dd dir="rtl">هو أمر مفرد مثل <code>color: red</code> والذي يحدد <strong>الخاصية</strong> التي تريد استخدامها لتنسيق العنصر.</dd> + <dt dir="rtl">الخاصية</dt> + <dd dir="rtl">هي الطريقة التي تريد تنسيق العنصر فيها. (في حالتنا الخاصية <code>color</code> هي خاصية للعنصر {{htmlelement("p")}}). في السي إس إس أنت تقوم باختيار الخواص التي تريدها أن تأثر على عنصرك.</dd> + <dt dir="rtl">قيمة الخاصية</dt> + <dd dir="rtl">توضع على يمين اسم الخاصية بعد النقطتين، والتي تحدد واحدة من العديد من الخيارات المتاحة (يوجد العديد من القيم الأخرى إلى جانب القيمة <code>red</code> للخاصية <code>color</code>).</dd> +</dl> + +<p dir="rtl">انتبه للأجزاء المهمة الأخرى من البنية الكتابية لمجموعة الأمر:</p> + +<ul dir="rtl"> + <li>كل مجموعة أمر (بغض النظر عن المحدد) يجب أن تحاط بأقواس معقوفة (<code>{}</code>).</li> + <li>بداخل كل إعلان يجيب عليك استخدام نقطتين (<code>:</code>) للفصل بين الخاصية وقيمتها.</li> + <li>بداخل كل مجموعة أمر يجب عليك استخدام فاصلة منقوطة (<code>;</code>) للفصل بين كل إعلان والإعلان الذي يليه.</li> +</ul> + +<p dir="rtl">إذا لكتابة عدة خواص في مجموعة أمر واحدة ما عليك سوى كتابتهم والفصل بينهم باستخدام فاصلة منقوطة، كالتالي:</p> + +<pre class="brush: css">p { + color: red; + width: 500px; + border: 1px solid black; +}</pre> + +<h3 dir="rtl" id="اختيار_عدة_عناصر">اختيار عدة عناصر</h3> + +<p dir="rtl">يمكنك أيضاً اختيار عدة أنواع من العناصر وتطبيق عليهم مجموعة أمر واحدة. قم بإضافة عدة محددات مفصولين بفاصلة. على سبيل المثال:</p> + +<pre class="brush: css">p,li,h1 { + color: red; +}</pre> + +<h3 dir="rtl" id="أنواع_مختلفة_من_المحدد">أنواع مختلفة من المحدد</h3> + +<p dir="rtl">هناك عدة أنواع مختلفة من المحدد. أعلاه، قمنا فقط باستخدام <strong>محددات العنصر</strong>، والذي يختار جميع العناصر من النوع نفسه في وثيقة الأتش تي أم إل. ولكن يمكننا القيام بتحديد أكثر دقةً من ذلك. يوجد هنا بعض الأنواع الشائعة من المحددات:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">اسم المحدد</th> + <th scope="col">ماذا يحدد</th> + <th dir="rtl" scope="col">مثال</th> + </tr> + </thead> + <tbody> + <tr> + <td>محدد العناصر (يسمى أحيانا بمحدد النوع أو الوسم)</td> + <td>جميع العناصر التي من نفس النوع</td> + <td><code>p</code><br> + تحدد العناصر ذات الوسم <code><p></code></td> + </tr> + <tr> + <td>محدد الهوية</td> + <td>العنصر الموجود في الصفحة والذي يملك تلك الهوية (في صفحة الأتش تي أم إل يُسمح لك بإعطاء هوية واحدة مميزة لكل عنصر)</td> + <td><code>#my-id</code><br> + تحدد العناصر ذات الهوية <code><p id="my-id"></code> أو <code><a id="my-id"></code></td> + </tr> + <tr> + <td>محدد الصنف</td> + <td>العنصر/العناصر الموجودة على الصفحة والتي تملك ذلك الصنف (يمكن استخدام الصنف نفسه على عدة عناصر)</td> + <td><code>.my-class</code><br> + Selects <code><p class="my-class"></code> and <code><a class="my-class"></code></td> + </tr> + <tr> + <td>محدد السمة</td> + <td>العناصر في الصفحة والتي تملك السمة المحددة</td> + <td><code>img[src]</code><br> + تحدد الصور ذات السمة <code><img src="myimage.png"></code> ولكن لا تحدد عنصر الصورة بدون السمة المذكورة <code><img></code></td> + </tr> + <tr> + <td>محدد فئة الشبه</td> + <td>عنصر/عناصر محدد ولكن عندما يكون بحالة معينة، مثال عندما يتم التحويم فوقه</td> + <td> + <p><code>a:hover</code><br> + تحدد العناصر <code><a></code></p> + + <p>ولكن فقط عندما يتم تحويم مؤشر الفأرة فوق الرابط</p> + </td> + </tr> + </tbody> +</table> + +<p dir="rtl">يوجد العديد من المحددات الأخرى لاكتشافها، يمكنك إيجاد قائمة مفصلة أكثر في مقالة <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">دليل المحددات</a>.</p> + +<h2 dir="rtl" id="الخطوط_والنصوص">الخطوط والنصوص</h2> + +<p dir="rtl">والآن بعد أن تعرفنا على بعض أساسيات السي إس إس، دعنا نبدأ بإضافة بعد الأوامر والمعلومات لملف <code>style.css</code> لنجعل مثالنا يبدو أجمل. دعنا نبدأ بجعل الخطوط والنصوص التي نستخدمها تبدو أفضل.</p> + +<ol dir="rtl"> + <li>بدايةً، قم بالحصول على مسار الخط الذي جلبته من <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">موقع خطوط جوجل</a>. أضف العنصر {{htmlelement("link")}} في الوسم <code><head></code>. كالتالي: + + <pre class="brush: html"><link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> + </li> + <li>بعدها، قم بحذف التعليمة السابقة التي كتبناها في ملف <code>style.css</code>. لقد كانت تجربة جيدة، ولكن اللون الأحمر ليس ملائماً بما فيه الكفاية.</li> + <li>ضع السطور التالية في الملف، استبدل سطر placeholder بسطر عائلة الخط <code>font-family</code> التي حصلت عليها من موقع خطوط جوجل Google Fonts. (تعني <code>font-family</code> بالخطوط التي تريد استخدامها في النص.) تقوم هذه التعليمة بتعيين خط أساسي شامل و قياس للخط من أجل كامل الصفحة (طالما أن <code><html></code> يمثل العنصر الأب لكامل الصفحة, و جميع العناصر داخله ترث نفس ال <code>font-size</code> و الـ <code>font-family</code>): + <pre class="brush: css">html { + font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high */ + font-family: placeholder: this should be the rest of the output you got from Google fonts +}</pre> + + <div class="note"> + <p><strong>ملاحظة:</strong> أي شيء يكتب في ملف الـ CSS بين <code>*/</code> و <code>/*</code> عبارة عن تعليق CSS, حيث أن المتصفح يقوم بتجاهله عندما يعالج التعليمات البرمجية. يمكنك الاستفادة من تعليقات الـ CSS لكتابة ملاحظات مفيدة عمّا تحاول فعله.</p> + </div> + </li> + <li>الآن سنقوم بتعيين قياسات الخطوط للعناصر التي تتضمن نصوص داخل جسد الـ HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, {{htmlelement("p")}}). بالإضافة إلى ذلك سنجعل النص الخاص بعنوان الصفحة في المركز, و سنغير ارتفاع الخط (line height) بالإَافة إلى المسافة بين الحروف (letter spacing) لمحتويات الـ body لجعلها أسهل للقراءة: + <pre class="brush: css">h1 { + font-size: 60px; + text-align: center; +} + +p, li { + font-size: 16px; + line-height: 2; + letter-spacing: 1px; +}</pre> + </li> +</ol> + +<p dir="rtl">يمكنك تعديل قيم الـ <code>px</code> هذه إلى أي شيء تحبه لتحصل على التصميم الذي تريده, لكن بشكل عام يجب أن يبدو التصميم كالتالي:</p> + +<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> + +<h2 dir="rtl" id="صناديق_الـ_CSS">صناديق الـ CSS</h2> + +<p dir="rtl">إحدى الأشياء التي تلاحظها عندما تكتب الـ CSS هي أن الكثير من خصائصها يتعلق بالصناديق — ضبط قياسها, لونها, موضعها, الخ. أغلب عناصر الـ HTML في صفحتك يمكن اعتبارها على أنها صناديق موضوعة فوق بعضها البعض</p> + +<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> + +<p>Not surprisingly, CSS layout is based principally on the <em>box model. </em>Each of the blocks taking up space on your page has properties like this:</p> + +<ul> + <li><code>padding</code>, the space just around the content (e.g., around paragraph text)</li> + <li><code>border</code>, the solid line that sits just outside the padding</li> + <li><code>margin</code>, the space around the outside of the element</li> +</ul> + +<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> + +<p>In this section we also use:</p> + +<ul> + <li><code>width</code> (of an element)</li> + <li><code>background-color</code>, the color behind an element's content and padding</li> + <li><code>color</code>, the color of an element's content (usually text)</li> + <li><code>text-shadow</code>: sets a drop shadow on the text inside an element</li> + <li><code>display</code>: sets the display mode of an element (don't worry about this yet)</li> +</ul> + +<p>So, let's get started and add some more CSS to our page! Keep adding these new rules to the bottom of the page, and don't be afraid to experiment with changing values to see how it turns out.</p> + +<h3 id="Changing_the_page_color">Changing the page color</h3> + +<pre class="brush: css">html { + background-color: #00539F; +}</pre> + +<p>This rule sets a background color for the whole page. Change the color code above to whatever color <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">you chose when planning your site</a>.</p> + +<h3 id="Sorting_the_body_out">Sorting the body out</h3> + +<pre class="brush: css">body { + width: 600px; + margin: 0 auto; + background-color: #FF9500; + padding: 0 20px 20px 20px; + border: 5px solid black; +}</pre> + +<p>Now for the {{htmlelement("body")}} element. There are quite a few declarations here, so let's go through them all one by one:</p> + +<ul> + <li><code>width: 600px;</code> — this forces the body to always be 600 pixels wide.</li> + <li><code>margin: 0 auto;</code> — When you set two values on a property like <code>margin</code> or <code>padding</code>, the first value affects the element's top <strong>and</strong> bottom side (make it <code>0</code> in this case), and the second value the left <strong>and</strong> right side (here, <code>auto</code> is a special value that divides the available horizontal space evenly between left and right). You can also use one, three, or four values, as documented <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">here</a>.</li> + <li><code>background-color: #FF9500;</code> — as before, this sets the element's background color. We've used a sort of reddish orange for the body as opposed to dark blue for the {{htmlelement("html")}} element, but feel free to go ahead and experiment.</li> + <li><code>padding: 0 20px 20px 20px;</code> — we have four values set on the padding, to make a bit of space around our content. This time we are setting no padding on the top of the body, and 20 pixels on the left, bottom and right. The values set top, right, bottom, left, in that order.</li> + <li><code>border: 5px solid black;</code> — this simply sets a 5-pixel–wide, solid black border on all sides of the body.</li> +</ul> + +<h3 id="Positioning_and_styling_our_main_page_title">Positioning and styling our main page title</h3> + +<pre class="brush: css">h1 { + margin: 0; + padding: 20px 0; + color: #00539F; + text-shadow: 3px 3px 1px black; +}</pre> + +<p>You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some <strong>default styling</strong> to the {{htmlelement("h1")}} element (among others), even when you haven't applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting <code>margin: 0;</code>.</p> + +<p>Next up, we've set the heading's top and bottom padding to 20 pixels, and made the heading text the same color as the html background color.</p> + +<p>One rather interesting property we've used here is <code>text-shadow</code>, which applies a text shadow to the text content of the element. Its four values are as follows:</p> + +<ul> + <li>The first pixel value sets the <strong>horizontal offset</strong> of the shadow from the text — how far it moves across: a negative value should move it to the left.</li> + <li>The second pixel value sets the <strong>vertical offset</strong> of the shadow from the text — how far it moves down, in this example; a negative value should move it up.</li> + <li>The third pixel value sets the <strong>blur radius</strong> of the shadow — a bigger value will mean a more blurry shadow.</li> + <li>The fourth value sets the base color of the shadow.</li> +</ul> + +<p>Again, try experimenting with different values to see what you can come up with!</p> + +<h3 id="Centering_the_image">Centering the image</h3> + +<pre class="brush: css">img { + display: block; + margin: 0 auto; +}</pre> + +<p>Finally, we'll center the image to make it look better. We could use the <code>margin: 0 auto</code> trick again as we did earlier for the body, but we also need to do something else. The {{htmlelement("body")}} element is <strong>block level</strong>, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are <strong>inline</strong> elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using <code>display: block;</code>.</p> + +<div class="note"> +<p><strong>Note</strong>: Don't worry if you don't yet understand <code>display: block;</code> and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our <a href="/en-US/docs/Web/CSS/display">display reference page</a>.</p> +</div> + +<h2 id="Conclusion">Conclusion</h2> + +<p>If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also <a href="http://mdn.github.io/beginner-html-site-styled/">view our version here</a>):</p> + +<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> + +<p>If you get stuck, you can always compare your work with our <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">finished example code on GitHub</a>.</p> + +<p>Here, we have only really scratched the surface of CSS. To find out more, go to our <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> + +<p> </p> diff --git a/files/ar/learn/how_to_contribute/index.html b/files/ar/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..e53fb8f34f --- /dev/null +++ b/files/ar/learn/how_to_contribute/index.html @@ -0,0 +1,82 @@ +--- +title: كيف تساهم في قسم التعلم في الشبكة +slug: Learn/How_to_contribute +tags: + - توثيق + - دليل + - ساهم + - مبتدئين +translation_of: Learn/How_to_contribute +--- +<div>{{LearnSidebar}}</div> + +<p dir="rtl">إن كنت هنا لأوَّل مرَّة أو بعد بحثٍ طويل، فمن المُرجَح أنَّ هذا يرجع لكونك مُهتماً في المساهمة في قسم شبكة مطوري موزيلا للتعلم. إنَّ هذا لنبؤٌ سعيد!</p> + +<p dir="rtl"><span class="seoSummary">ستجد في هذه الصفحة كل شيء ستحتاج إليه لتحسين محتوى قسم التعلم. يوجد العديد من الأشياء التي يمكنك القيام بها، بناءً على وقتك، وما إذا كنت <a href="/ar/Learn/How_to_contribute#I'm_a_beginner">مُبتدِئاً</a>، <a href="/ar/Learn/How_to_contribute#I'm_a_web_developer">مطوراً</a>، أو <a href="/ar/Learn/How_to_contribute#I'm_a_teacher">مُدرِساً</a>.</span></p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: يمكنك إيجاد دليل إرشادي حول كتابة مقالة جديدة في قسم التعلم في مقالة "<a href="/ar/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">كيفيّة كتابة مقالة لمساعدة الناس على التعلُّم حول الويب</a>".</p> +</div> + +<h2 dir="rtl" id="جِد_مهمة_محددة">جِد مهمة محددة</h2> + +<p dir="rtl">الطرق الشائعة للمساهمة في قسم التعلم هي قراءة المقالات، إصلاح الأخطاء المطبعيّة، واقتراح التحسينات. نُرحِب أيضاً بإضافة أمثلة إلى <a href="https://github.com/mdn/learning-area/">مستودعنا على جيتهاب</a>، والتواصل معنا إن رغبت بطرح سؤال ما.</p> + +<p dir="rtl">المساهمة هي طريقة رائعة لاكتساب المتعة في حين تعلم أشياء جديدة. إن شعرت يوماً بالضياع أو كان لديك سؤالاً ما، فلا تتردد أبداً بالتواصل معنا على <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">موضوع قسم التعلُّم في منصة ديسكورس</a>، أو على <a href="/ar/docs/MDN/Community#Get_into_IRC">قناة IRC</a> (اطّلع على نهاية هذه الصفحة للمزيد من التفاصيل).<span class="short_text" id="result_box" lang="ar"><span> <a href="/ar/profiles/chrisdavidmills">كريس ميلز</a></span></span> (Chris Mills) هو مدير المواضيع لهذا القسم، يمكنك أيضاً محاولة التواصل معه مباشرةً.</p> + +<p dir="rtl">توفِر الأقسام التاليّة بعض الأفكار العامة حول أنواع المهام التي يمكنك القيام بها.</p> + +<h2 dir="rtl" id="أنا_مُبتدِئ">أنا مُبتدِئ</h2> + +<p dir="rtl">هذا مُذهِل! المبتدئون هم عامل مُهم وقيّم جداً في تقديم التعليقات حول المواد الدراسيّة. لديك - بالتأكيد - وجهة نظر فريدة حول مقالتنا كعضو من جمهورنا المُستهدف، مما يجعلك عضواً لا يقدر بثمن في فريقنا. إن كنت تستخدم مقالاتنا لتتعلم شيئاً ما ووقعت في المشاكل، أو وجدت مقالة تحوي معلومات مُشتتة، يمكنك إما إصلاحها أو إعلامنا بذلك حتى نتحقق من المشكلة ونحلُها.</p> + +<p dir="rtl">إليك بعض الاقتراحات حول الطرق التي يمكنك المساهمة فيها:</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Tag">إضافات الوسوم إلى المقالات</a> (<em>تستغرق العمليّة قرابة الخمس دقائق</em>)</dt> + <dd dir="rtl">وسِم (tagging) محتوى الشبكة هو أحد أسهل الطرق التي يمكنك المساهمة فيها. في حين أنَّ العديد من المزايا لدينا تستخدم الوسوم (tags) لتساعدها في تقديم المعلومات بسياقها الصحيح، فيُعَد الوسِم مساهمة قيّمة جداً. ألقي نظرة على قائمة المصطلحات في <a href="/ar/docs/MDN/Doc_status/Glossary#No_tags">المسرد</a> و<a href="/ar/docs/MDN/Doc_status/Learn#No_tags">المقالات التعليميّة</a> التي لا تحتوي على وسوم لتبدأ بالمساهمة.</dd> + <dt dir="rtl"><a href="/ar/docs/Glossary">قراءة ومراجعة المصطلحات في المسرد</a> (<em>تستغرق العمليّة قرابة الخمس دقائق</em>)</dt> + <dd dir="rtl">كمبتدئ، نحتاج إلى أعين يقظة لمراجعة محتوانا. إذا وجدت مصطلحاً صعب الفهم، فهذا يعني أنَّ المسرد بحاجة ليُحسَن. لا تتردد بإجراء أي تغييرات تظنها ضروريّة. إذا كنت تظن أنَّك لا تملك المهارة الكافيّة لتعديل مصطلح بنفسك، يمكنك على الأقل إعلامنا بذلك على <a href="/ar/docs/MDN/Community#Join_our_mailing_lists">قائمتنا البريديّة</a>.</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">كتابة مصطلح جديد في المسرد</a> (<em>تستغرق العمليّة قرابة العشرين دقيقة</em>)</dt> + <dd dir="rtl">هذه أكثر الطرق فعاليّة لتتعلم شيئاً جديداً. اختر مفهوماً جديداً تريد فهمه، أقرأ عنه، واكتب شرحاً له في المسرد. الشرح للآخرين هي إحدى الطرق الرائعة "لتثبيت" المعرفة في ذهنك، وتساعدك على فهم الأشياء بنفسك، كل هذا في حين أنَّك تساعد الآخرين أيضاً. الجميع رابِح!</dd> + <dt dir="rtl"><a href="/ar/Learn/Index">قراءة ومراجعة المقالات التعليميّة</a> (<em>تستغرق العمليّة قرابة الساعتين</em>)</dt> + <dd dir="rtl">تشبه هذه المهمة كثيراً مراجعة المصطلحات في المسرد (انظر أعلاه). ولكن هذه المهمة تحتاج لوقتٍ أطول؛ بسبب أنَّ هذه المقالات عادةً ما تكون أطول قليلاً.</dd> +</dl> + +<h2 dir="rtl" id="أنا_مُطوِّر">أنا مُطوِّر</h2> + +<p dir="rtl">عظيم! مهاراتك التقنيّة هي ما نحتاجه لتوفير محتوى تقني دقيق للمتبدئين. بما أنَّ هذا القسم من الشبكة مُخصص لتعليم الويب، كُن حريصاً على جعل توضيحاتك بسيطة قدر الإمكان، مع الحرص على كونها مفيدة.<span id="result_box" lang="ar"><span> من الأكثر أهميّة أن تكون مفهومة على أن تكون دقيقة للغاية.</span></span></p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Glossary">قراءة ومراجعة المصطلحات في المسرد</a> (<em>تستغرق العمليّة قرابة الخمس دقائق</em>)</dt> + <dd dir="rtl">كمطوِّر، نحتاج لتتأكد أنَّ محتوانا دقيق تقنياً بدون أن يكون مُتحذلق بشكل مبالغ. لا تتردد عن إجراء أي تغييرات تظن أنَّها ضروريّة. إذا أردت مناقشة المحتوى قبل إجراء أيّة تغييرات، تواصل معنا على <a href="/ar/docs/MDN/Community#Join_our_mailing_lists">قائمتنا البريديّة</a> أو على <a href="/ar/docs/MDN/Community#Get_into_IRC">قناة IRC</a>.</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">كتابة مصطلح جديد في المسرد</a> (<em>تستغرق العمليّة قرابة العشرين دقيقة</em>)</dt> + <dd dir="rtl">توضيح المصطلحات التقنيّة هي طريقة جيدة جداً للتعلم ولتصبح دقيق تقنياً وبسيطاً في شرحك. سيشكرك المبتدئون على ذلك. لدينا العديد من <a href="/ar/docs/Glossary#Contribute">المصطلحات الغير معرفة</a> والتي تحتاج لاهتمامك. اختر واحداً وابدأ بشرحه.</dd> + <dt dir="rtl"><a href="/ar/Learn/Index">قراءة ومراجعة المقالات التعليميّة</a> (<em>تستغرق العمليّة قرابة الساعتين</em>)</dt> + <dd dir="rtl">هذه المهمة مماثلة لمراجعة المصطلحات في المسرد (انظر أعلاه). الفرق هو أنَّ هذه المقالات أطول قليلاً مما سيتطلب وقتاً أطول.</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">كتابة مقالة تعليميّة جديدة</a> (<em>تستغرق العمليّة قرابة الأربع ساعات أو أكثر</em>)</dt> + <dd dir="rtl">تفتقر شبكة مطوري موزيلا إلى المقالات البسيطة حول استخدام تقنيات الويب (مثل <a href="/ar/docs/Learn/CSS">لغة ترميز النص الفائق</a>، <a href="/ar/docs/Learn/CSS">صفحات الأنماط الانسيابية</a>، <a href="/ar/docs/Learn/JavaScript">الجافاسكربت</a> ...إلخ). لدينا في الشبكة محتوى قديم يتطلب إعادة المراجعة والنشر. ادفع بمهاراتك إلى أقصى حد لتجعل تقنيات الويب قابلة للاستخدام من قبل المبتدئين.</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">إنشاء تمرينات، عينات برمجيّة، أو أدوات تعليم تفاعليّة</a> (<em>تستغرق العمليّة وقتاً غير محدد</em>)</dt> + <dd dir="rtl">تحتاج جميع مقالاتنا التعليميّة إلى ما ندعوه بمواد "التعليم النشطة"، ﻷنَّ الناس يتعلمون الشيء بشكل أفضل عندما يقومون به بأنفسهم. هذه المواد هي تمرينات أو محتويات تفاعليّة تساعد المُستخدمين على تطبيق والتلاعب بالمفاهيم المشروحة في المقالة. يوجد العديد من الطرق الممكنة لصنع محتوى تفاعلي، من إنشاء عينات برمجيّة باستخدام <a href="http://jsfiddle.net">JSFiddle</a> أو أشباهه، إلى بناء محتوى تفاعلي مُتكامل بواسطة <a href="https://thimble.mozilla.org/">Thimble</a>. أطلق العنان لإبداعك!</dd> +</dl> + +<h2 dir="rtl" id="أنا_مُدرِس">أنا مُدرِس</h2> + +<p dir="rtl">تملك شبكة مطوري موزيلا تاريخ طويل من النجاح التقني، ولكننا نفتقر للفهم العميق حول الطرق الفُضلى لتعليم المفاهيم للجدد. هنا حيث نحتاج إليك بصفتك مُدرِس. يمكنك مساعدتنا على الحرص على أنَّ موادنا التعليميّة توفِر مسار تعليمي جيد وعملي لقرائِنا.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Glossary">قراءة ومراجعة المصطلحات في المسرد</a> (<em>تستغرق العمليّة قرابة الخمس عشرة دقيقة</em>)</dt> + <dd dir="rtl">تَفَقَد المصطلحات في المسرد ولا تتردد عن إجراء أيّة تغييرات تراها ضروريّة. إذا أردت مناقشة المحتوى قبل تعديله، تواصل معنا على <a href="/ar/docs/MDN/Community#Join_our_mailing_lists">قائمتنا البريديّة</a> أو على <a href="/ar/docs/MDN/Community#Get_into_IRC">قناة IRC</a>.</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">كتابة مصطلح جديد في المسرد</a> (<em>تستغرق العمليّة قرابة الساعة</em>)</dt> + <dd dir="rtl">تعريفات المصطلحات البسيطة والواضحة، واللمحات البسيطة عن المفاهيم في المسرد هو قطعاً ما يلبي احتياجات المبتدئِين. يمكن أن تساعد خبرتك كمُدرِس على إنشاء تعريفات ممتازة للمصطلحات. لدينا العديد من <a href="/ar/docs/Glossary#Contribute">المصطلحات الغير معرفة</a> والتي تحتاج لاهتمامك. اختر واحداً وابدأ بشرحه.</dd> + <dt dir="rtl"><a href="/ar/docs/tag/needsSchema">إضافة رسوم توضيحيّة ومخططات للمقالات</a> (<em>تستغرق العمليّة قرابة الساعة</em>)</dt> + <dd dir="rtl">كما تعلم، الرسوم التوضيحيّة (illustrations) هي جزء لا يقدر بثمن في أي محتوى تعليمي. تلك هي إحدى الأمور التي نفتقدها في الشبكة ومهاراتك يمكن أن تُحدِث فرقاً. تفقد <a href="/ar/docs/tag/تحتاج_لرسوم_توضيحيّة">المقالات التي تحوي نقصاً في المحتوى التوضيحي</a> واختر مقالة ترغَب بإنشاء رسماً توضيحياً يشرحها.</dd> + <dt dir="rtl"><a href="/ar/Learn/Index">قراءة ومراجعة المقالات التعليميّة</a> (<em>تستغرق العمليّة قرابة الساعتين</em>)</dt> + <dd dir="rtl">هذه المهمة مشابهة لمراجعة المصطلحات في المسرد (انظر أعلاه)، ولكنها تتطلب وقتاً أطول لكون المقالات بالعادة أطول قليلاً.</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">كتابة مقالات تعليميّة جديدة</a> (<em>تستغرق العمليّة قرابة الأربع ساعات</em>)</dt> + <dd dir="rtl">نحتاج إلى مقالات بسيطة وواضحة حول النظام الشابكي (Web ecosystem) والمواضيع الأخرى المتعلقة به. في حين أنَّ المقالات التعليميّة من الضروري أن تكون تدريسيّة بدلاً من أن تقوم بتغطيّة كل شيء حرفياً، فخبرتك بمعرفة الأشياء التي يجب شرحها وكيفيّة القيام بذلك ستكون مساعدة رائعة!</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">إنشاء تمرينات، اختبارات، أو أدوات تعليم تفاعليّة</a> (<em>يستغرق الأمر وقتاً غير محدد</em>)</dt> + <dd dir="rtl">تحتاج جميع مقالاتنا التعليميّة إلى مواد "التعليم النشط". هذه المواد هي تمرينات أو محتويات تفاعليّة تساعد المُستخدمين على تعلم استخدام والتوسع في المفاهيم المشروحة في المقالة. يوجد العديد من الأمور التي يمكنك القيام بها هنا، من إنشاء اختبارات (quizzes)، إلى بناء محتوى تفاعلي مُتكامل بواسطة <a href="https://thimble.mozilla.org/">Thimble</a>. أطلق العنان لإبداعك!</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Create_learning_pathways">إنشاء مسارات تعليميّة</a> (<em>تستغرق العمليّة وقتاً غير محدد</em>)</dt> + <dd dir="rtl">بغرض توفير دورات شاملة وتدريجيّة، نحتاج إلى تهيئة محتوانا في مسارات. هذه طريقة لجمع المحتوى الحالي وإيجاد المفقود لإنشاء مقالات تعليميّة عنه.</dd> +</dl> diff --git a/files/ar/learn/html/forms/index.html b/files/ar/learn/html/forms/index.html new file mode 100644 index 0000000000..3c8f449476 --- /dev/null +++ b/files/ar/learn/html/forms/index.html @@ -0,0 +1,114 @@ +--- +title: نماذج HTML +slug: Learn/HTML/Forms +tags: + - Beginner + - Featured + - Forms + - Guide + - HTML + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +--- +<div style="direction: rtl;">{{LearnSidebar}}</div> + +<p class="summary" style="direction: rtl;">توفر هذه الوحدة سلسلة من المقالات التي ستساعدك على إتقان نماذج HTML. تعد نماذج HTML أداة قوية جدًا للتفاعل مع المستخدمين ؛ ومع ذلك ، لأسباب تاريخية وتقنية ، ليس من الواضح دائمًا كيفية استخدامها بكامل طاقتها. في هذا الدليل ، سنغطي جميع جوانب نماذج HTML ، من البنية إلى التصميم ، من معالجة البيانات إلى الأدوات المخصصة.</p> + +<h2 id="المتطلبات_الأساسية" style="direction: rtl;">المتطلبات الأساسية</h2> + +<p style="direction: rtl;">قبل البدء في هذه الوحدة ، يجب أن تعمل على الأقل من خلال <a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة إلى HTML</a>. في هذه المرحلة ، يجب أن تجد {{anch ("Basic Guides")}} سهل الفهم ، كما يمكنك الاستفادة من دليل <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls">أدوات النماذج الأصلية</a>.</p> + +<p style="direction: rtl;">ومع ذلك ، تعد بقية الوحدة أكثر تقدمًا - فمن السهل وضع أدوات النموذج على صفحة ، ولكن لا يمكنك فعل الكثير معها دون استخدام بعض ميزات النموذج المتقدمة و CSS و JavaScript. لذلك ، قبل إلقاء نظرة على الأقسام الأخرى ، نوصيك بالابتعاد وتعلم بعض <a href="/ar/docs/Learn/CSS">CSS</a> و <a href="/ar/docs/Web/JavaScript/About_JavaScript">JavaScript</a> أولاً.</p> + +<div class="note"> +<p style="direction: rtl;"><strong>ملاحظة: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر حيث لا يمكنك إنشاء ملفاتك الخاصة ، فيمكنك تجربة (معظم) أمثلة التعليمات البرمجية في برنامج تشفير عبر الإنترنت مثل <a href="http://jsbin.com/">JSBin</a> أو <a href="https://glitch.com/">Glitch</a>.</strong></p> +</div> + +<h2 id="أدلة_أساسية" style="direction: rtl;">أدلة أساسية</h2> + + + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form">أول نموذج HTML خاص بك </a></strong></div> + +<div style="direction: rtl;"><span style="">تقدم المقالة الأولى في سلسلتنا تجربتك الأولى في إنشاء نموذج HTML ، بما في ذلك تصميم نموذج بسيط وتنفيذه باستخدام عناصر HTML الصحيحة وإضافة بعض الأنماط البسيطة جدًا عبر CSS وكيفية إرسال البيانات إلى الخادم.</span></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form">كيفية بناء نموذج HTML</a></strong></div> + +<div style="direction: rtl;"><span style="">مع استبعاد الأساسيات ، ننظر الآن بمزيد من التفصيل في العناصر المستخدمة لتوفير البنية والمعنى للأجزاء المختلفة من النموذج.</span></div> + +<h2 id="ما_هو_شكل_الحاجيات_المتاحة؟" style="direction: rtl;">ما هو شكل الحاجيات المتاحة؟</h2> + + + +<div style="direction: rtl;"><strong><span style="">حاجيات النموذج الأصلي</span></strong></div> + +<div style="direction: rtl;"><span style="">نحن الآن نلقي نظرة على وظائف أدوات النماذج المختلفة بالتفصيل ، وننظر في الخيارات المتاحة لجمع أنواع مختلفة من البيانات.</span></div> + +<h2 id="التحقق_من_صحة_بيانات_النموذج_وإرسالها" style="direction: rtl;">التحقق من صحة بيانات النموذج وإرسالها</h2> + + + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">إرسال بيانات النموذج</a></strong></div> + +<div style="direction: rtl;"><span style="">تتناول هذه المقالة ما يحدث عندما يرسل المستخدم نموذجًا - إلى أين تذهب البيانات ، وكيف نتعامل معها عندما تصل إلى هناك؟ نحن ننظر أيضًا في بعض المخاوف الأمنية المرتبطة بإرسال بيانات النموذج.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">التحقق من صحة بيانات النموذج</a></strong></div> + +<div style="direction: rtl;"><span style="">لا يعد إرسال البيانات كافيًا - نحتاج أيضًا إلى التأكد من أن البيانات التي يملأها المستخدمون في النماذج بالتنسيق الصحيح الذي نحتاجه لمعالجتها بنجاح ، وأن ذلك لن يفسد تطبيقاتنا. نريد أيضًا مساعدة مستخدمينا على ملء نماذجنا بشكل صحيح وعدم الشعور بالإحباط عند محاولة استخدام تطبيقاتنا. يساعدنا التحقق من صحة النموذج في تحقيق هذه الأهداف - تخبرك هذه المقالة بما تحتاج إلى معرفته.</span></div> + +<h2 id="أدلة_متقدمة" style="direction: rtl;">أدلة متقدمة</h2> + + + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">كيفية بناء الحاجيات النموذجية المخصصة</a></strong></div> + +<div style="direction: rtl;"><span style="">ستصادف بعض الحالات التي لا توفر فيها أدوات النموذج الأصلية ما تحتاجه ، على سبيل المثال بسبب التصميم أو الوظيفة. في مثل هذه الحالات ، قد تحتاج إلى إنشاء عنصر واجهة مستخدم للنموذج من HTML خام. تشرح هذه المقالة كيفية القيام بذلك والاعتبارات التي يجب أن تكون على دراية بها عند القيام بذلك ، مع دراسة حالة عملية.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">إرسال النماذج من خلال JavaScript</a></strong></div> + +<div style="direction: rtl;"><span style="">تبحث هذه المقالة في طرق استخدام نموذج لتجميع طلب HTTP وإرساله عبر JavaScript مخصص ، بدلاً من إرسال النموذج القياسي. يبحث أيضًا في سبب رغبتك في القيام بذلك ، والآثار المترتبة على القيام بذلك. (راجع أيضًا استخدام كائنات <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects">FormData</a>.)</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">نماذج HTML في المتصفحات القديمة</a></strong></div> + +<div style="direction: rtl;"><span style="">اكتشاف ميزة تغطية المقالة ، وما إلى ذلك ، يجب إعادة توجيه هذا إلى وحدة اختبار عبر المتصفح ، حيث تتم تغطية نفس الأشياء بشكل أفضل هناك.</span></div> + +<h2 id="أدلة_تصميم_النموذج" style="direction: rtl;">أدلة تصميم النموذج</h2> + + + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">تصميم نماذج HTML</a></strong></div> + +<div style="direction: rtl;"><span style="">توفر هذه المقالة مقدمة لنماذج التصميم باستخدام CSS ، بما في ذلك جميع الأساسيات التي قد تحتاج إلى معرفتها لمهام التصميم الأساسية.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">التصميم المتقدم لنماذج HTML</a></strong></div> + +<div style="direction: rtl;"><span style="">هنا نلقي نظرة على بعض تقنيات تصميم النماذج الأكثر تقدمًا والتي يجب استخدامها عند محاولة التعامل مع بعض العناصر الأكثر صعوبة في التصميم.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes">جدول توافق الخاصية لعناصر واجهة المستخدم للنموذج</a></strong></div> + +<div style="direction: rtl;"><span style="">توفر هذه المقالة الأخيرة مرجعًا مفيدًا يسمح لك بالبحث عن خصائص CSS المتوافقة مع عناصر النموذج.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML">مقدمة إلى HTML </a>| <a href="https://developer.mozilla.org/en-US/Learn/HTML">تعلم HTML </a>| <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5">HTML5 </a>| <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML">دليل المطور </a>| <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">مرجع العنصر </a>| <a href="https://orientdetectors.com/ar/" rel="noopener">المرجع</a></div> + +<h2 id="إقرأ_أيضا" style="direction: rtl;">إقرأ أيضا</h2> + +<ul> + <li style="direction: rtl;"><a href="/en-US/docs/Web/HTML/Element#Forms">مرجع عنصر نماذج HTML</a></li> + <li style="direction: rtl;"><a href="/en-US/docs/Web/HTML/Element/input">مرجع أنواع <input> HTML</a></li> +</ul> diff --git a/files/ar/learn/html/index.html b/files/ar/learn/html/index.html new file mode 100644 index 0000000000..c9a9e88aa2 --- /dev/null +++ b/files/ar/learn/html/index.html @@ -0,0 +1,60 @@ +--- +title: 'تعلم HTML: أدلة ودروس' +slug: Learn/HTML +tags: + - Beginner + - CodingScripting + - HTML + - NeedsContent + - NeedsTranslation + - TopicStub +translation_of: Learn/HTML +--- +<p> </p> + +<p><font><font><font>لبناء المواقع، يجب أن نعرف عن {{معجم ( 'HTML')}} - التكنولوجيا الأساسية المستخدمة لتحديد هيكل صفحة ويب. </font></font></font><font><font>يستخدم HTML لتحديد ما إذا كان ينبغي الاعتراف محتوى الويب الخاص بك كفقرة، القائمة، العنوان، وصلة، صورة، لاعب الوسائط المتعددة، شكل، أو واحد من العديد من العناصر الأخرى المتاحة أو حتى عنصر الجديد الذي قمت بتحديده.</font></font></p> + +<h2 id="مسار_التعلم"><font><font>مسار التعلم</font></font></h2> + +<p><font><font>من الناحية المثالية يجب أن تبدأ رحلة التعلم عن طريق تعلم HTML. ابدأ القراءة </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction"><font><font>مقدمة إلى HTML</font></font></a><font><font> . ثم تستطيع الانتقال إلى تعلم حول مواضيع أكثر تقدما مثل:</font></font></p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS"><font><font><font>CSS</font></font></font></a><font><font><font> ، وكيفية استخدامه لHTML أسلوب (على سبيل المثال تغيير حجم النص والخطوط المستخدمة، إضافة الحدود والظلال، تخطيط صفحتك مع عدة أعمدة، إضافة الرسوم المتحركة والتأثيرات البصرية الأخرى.)</font></font></font></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript"><font><font><font>جافا سكريبت</font></font></font></a><font><font><font> ، وكيفية استخدامها لإضافة وظائف حيوية على صفحات الويب (على سبيل المثال العثور على موقعك ورسم على الخريطة، جعل تظهر عناصر واجهة المستخدم / تختفي عند تبديل زر، حفظ بيانات المستخدمين محليا على أجهزة الكمبيوتر الخاصة بهم، والكثير أكثر بكثير.)</font></font></font></li> +</ul> + +<p><font><font>قبل البدء في هذا الموضوع، يجب أن يكون لديك معرفة أساسية على الأقل مع استخدام أجهزة الكمبيوتر، واستخدام شبكة الإنترنت بشكل سلبي (أي مجرد النظر اليها، واستهلاك المحتوى). </font></font><font><font><font>يجب ان تكون بيئة العمل الأساسية اقامة النحو المفصل في</font></font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"><font><font><font>تثبيت البرامج الأساسية</font></font></font></a><font><font><font> ، وفهم كيفية إنشاء وإدارة الملفات، كما هو مفصل في </font></font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"><font><font><font>التعامل مع الملفات</font></font></font></a><font><font><font> - على حد سواء هي جزء من لدينا </font></font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web"><font><font><font>الشروع في العمل مع شبكة الإنترنت</font></font></font></a><font><font><font> وحدة مبتدئا كاملة ل.</font></font></font></p> + +<p><font><font>فمن المستحسن أن تعمل من خلال </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web"><font><font>الشروع في العمل مع شبكة الإنترنت</font></font></a><font><font> قبل محاولة هذا الموضوع، ومع ذلك فإنه ليس من الضروري على الاطلاق. كثيرا ما تتم تغطيتها في </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics"><font><font>أساسيات HTML</font></font></a><font><font> تغطي المادة أيضا فيما لدينا </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML"><font><font>مقدمة إلى HTML</font></font></a><font><font> وحدة، وإن كان ذلك في مزيد من التفاصيل الكثير.</font></font></p> + +<h2 id="وحدات"><font><font>وحدات</font></font></h2> + +<p><font><font>هذا الموضوع يحتوي على الوحدات التالية، في الترتيب المقترح للعمل من خلالها. يجب عليك بالتأكيد تبدأ مع أول واحد.</font></font></p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML"><font><font>مقدمة إلى HTML</font></font></a></dt> + <dd><font><font>هذه الوحدة يمهد الطريق، والحصول على استخدمته لمفاهيم هامة وتركيب، والنظر في تطبيق HTML إلى النص، وكيفية إنشاء ارتباطات تشعبية، وكيفية استخدام HTML لهيكلة صفحة ويب.</font></font></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding"><font><font>الوسائط المتعددة وتضمينها</font></font></a></dt> + <dd><font><font>هذه الوحدة يستكشف كيفية استخدام HTML لتشمل الوسائط المتعددة في صفحات الويب الخاصة بك، بما في ذلك الطرق المختلفة التي يمكن أن تكون الصور المدرجة، وكيفية تضمين الفيديو والصوت، وحتى صفحات الويب الأخرى كلها.</font></font></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables"><font><font>جداول HTML</font></font></a></dt> + <dd><font><font>يمكن أن تمثل جداول البيانات على صفحة ويب في ومفهومة {{معجم ( "الوصول"، "الوصول")}} الطريقة يكون تحديا. هذه الوحدة تغطي العلامات الجدول الأساسية، جنبا إلى جنب مع ميزات أكثر تعقيدا مثل تنفيذ التسميات وملخصات.</font></font></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms"><font><font>نماذج HTML</font></font></a></dt> + <dd><font><font>أشكال هي جزء مهم جدا من الشبكة - هذه توفر الكثير من الوظائف التي تحتاج إليها للتفاعل مع المواقع على شبكة الإنترنت، على سبيل المثال تسجيل وتسجيل الدخول، وإرسال ردود الفعل، وشراء المنتجات، وأكثر من ذلك. هذه الوحدة التي يحصل لك مع خلق الأجزاء العميل من الأشكال.</font></font></dd> +</dl> + +<h2 id="حل_المشاكل_المشتركة_HTML"><font><font>حل المشاكل المشتركة HTML</font></font></h2> + +<p><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto"><font><font>استخدام HTML لحل المشاكل المشتركة</font></font></a><font><font> يوفر روابط لأقسام المحتوى شرح كيفية استخدام HTML لحل مشاكل شائعة جدا عند إنشاء صفحة ويب: التعامل مع العناوين، وإضافة الصور ومقاطع الفيديو، مؤكدا المحتوى، وخلق شكل أساسي، الخ</font></font></p> + +<h2 id="أنظر_أيضا"><font><font>أنظر أيضا</font></font></h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML"><font><font>HTML (لغة توصيف النص التشعبي)</font></font></a><font><font> على MDN</font></font></dt> + <dd><font><font>نقطة الدخول الرئيسية للثائق HTML على MDN، بما في ذلك عنصر مفصلة والسمة المراجع - إذا كنت تريد أن تعرف ما سمات عنصر ديه أو ما تقدر سمة لها، على سبيل المثال، وهذا هو مكان عظيم للبدء.</font></font></dd> +</dl> + +<p> </p> + +<p> </p> + +<div id="eJOY__extension_root" style=""> </div> diff --git a/files/ar/learn/html/introduction_to_html/getting_started/index.html b/files/ar/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..35213057e3 --- /dev/null +++ b/files/ar/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,760 @@ +--- +title: ابدء مع HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary" dir="rtl">في هذه المقالة سنغطي أساسيات لغة ترميز النص الفائق (HTML). سنقوم بتوفير تعريف للعناصر، السمات، وجميع المصطلحات الأخرى التي قد تكون قد سمعتها من قبل، ومتى يتم استخدامها في اللغة. سنقوم أيضاً بشرح كيف يتم كتابة العنصر في اللغة، وكيف يتم تنظيم وثيقة لغة ترميز النص الفائق، وسنشرح الميزات الأساسية الأخرى في اللغة. على طول الشرح، سنقوم باستخدام بعض الأمثلة، لنخلق نوعاً من الإثارة!</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات:</th> + <td dir="rtl">أساسيات استخدام الحاسوب، <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%AA%D8%AB%D8%A8%D9%8A%D8%AA_%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D8%A7%D8%AA_%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A9">البرمجيات الأساسية مثبتة</a>، <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D9%85%D8%B9_%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA">معرفة أساسية حول التعامل</a> <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D9%85%D8%B9_%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA">مع الملفات</a>.</td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف:</th> + <td dir="rtl">الحصول على معرفة مبدئية باللغة، والحصول على بعض التدريبات لكتابة بعض العناصر في اللغة.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="ما_هي_HTML؟">ما هي HTML؟</h2> + +<p dir="rtl">لغة ترميز النص الفائق ليس لغة برمجة؛ وإنما <em>لغة ترميزيّة</em> (markup language) تُستخدم لإخبار المتصفح بكيفيّة تنظيم صفحات الويب التي تزورها. يُمكن أن تكون هذه اللغة معقدة أو بسيطة كما يرغبها أن تكون مطور الويب. تتألف هذه اللغة من مجموعة من العناصر، والتي تحيط أو <em>تُرَمِز</em> أجزاء من المحتوى لتجعلها تظهر أو تتصرف بطريقة معينة. الوسوم المغلقة يُمكن أن تحوِّل جزء من النص إلى رابط يشير لموقع آخر، أو يمكن أن تجعل الكلمات مائلة، وهلم جرا. على سبيل المثال، انظر للسطر التالي:</p> + +<pre dir="rtl">قطتي شديدة الجمال</pre> + +<p dir="rtl">إذا أردنا جعل هذا النص فقرة، يمكننا القيام بهذا عن طريق توصيفه على أنه فقرة عن طريق إحاطته بعنصر الفقرة ({{htmlelement("p")}}):</p> + +<pre class="brush: html"><p>قطتي شديدة الجمال</p></pre> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: عناصر لغة ترميز النص الفائق غير حساسة لحالة الحرف، أي يُمكِن كتابتها باستخدام حروف صغيرة أو كبيرة. على سبيل المثال يمكن كتابة العنصر {{htmlelement("title")}} بالشكل <code><title></code>، أو <code><TITLE></code>، أو <code><Title></code>، أو <code><TiTlE></code>، إلخ. جميع تلك الأشكال ستعمل بدون مشاكل. الأفضل هو كتابة جميع العنصار بحروف صغيرة لأسباب تنسيقيّة، ومقروئيّة، وغيرها من الأسباب الأخرى.</p> +</div> + +<h2 dir="rtl" id="تشريح_عنصر_لغة_ترميز_النص_الفائق">تشريح عنصر لغة ترميز النص الفائق</h2> + +<p dir="rtl">دعنا نستكشف عنصر الفقرة ذاك أكثر قليلاً:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15908/beautiful-cat.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p dir="rtl">الأجزاء الرئيسية من عنصرنا هي:</p> + +<ol dir="rtl"> + <li><strong>وسم الفتح</strong> (أو وسم البداية أو الوسم الإفتتاحي): يتألف من اسم العنصر (في حالتنا <code>p</code>)، محاطاً بقوس مفتوح وآخر مُغلَق. هذا المكوِّن يحدد بداية العنصر، أو بداية تأثيره (في حالتنا يحدد أين تبدأ الفقرة).</li> + <li><strong>وسم الإغلاق</strong> (أو وسم النهاية أو الوسم الختامي): مشابه لوسم البداية، ماعدا أنه يتضمن شرطة مائلة (/) قبل اسم العنصر. هذا المكوِّن يحدد نهاية (في حالتنا نهاية الفقرة). يُعَد نسيان وضع وسم الإغلاق أحد الأخطاء الشائعة التي يقع بها المبتدئون والتي تؤدي إلى مشاكل تنظيميّة في الصفحة (خروج النص من مكان مثلاً).</li> + <li><strong>المحتوى</strong>: هذا المكوِّن يمثل محتوى الذي يُرمِزُهُ العنصر، والذي هو في حالتنا النص.</li> + <li><strong>العنصر</strong>: يتألف من وسم البداية، ووسم الإغلاق، والمحتوى (جميع المحتويات السابقة).</li> +</ol> + +<h3 dir="rtl" id="التعلم_النشط_إنشاء_أول_عنصر_لك_في_لغة_ترميز_النص_الفائق">التعلم النشط: إنشاء أول عنصر لك في لغة ترميز النص الفائق</h3> + +<p dir="rtl">قم بتعديل السطر أدناه في منطقة <em>الإدخال</em> عن طريق إحاطته باستخدام الوسمين <code><em></code> و <code></em></code> (ضع <code><em></code> قبله <em>لفتح العنصر</em>، و <code></em></code> بعده <em>لإغلاق العنصر</em>)، هذا ينبغي أن يحوِّل النص إلى مائل. يمكنك رؤية التغييرات في منطقة <em>الخرج</em>.</p> + +<p dir="rtl">إذا قمت بخطأ ما، فيمكنك دائماً تصفير (إعادتها إلى ما كانت عليه) الشيفرة باستخدام زر <em>التصفير</em>. إذا كنت عالقاً بشكل كامل، فيمكنك الضغط على <em>زر عرض الحل</em> لرؤية الجواب.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> + This is my text. +</textarea> + +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<p> </p> + +<pre class="brush: css">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<em>This is my text.</em>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + +<p> </p> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="العناصر_المتداخلة">العناصر المتداخلة</h3> + +<p dir="rtl">يمكنك وضع عنصر بداخل عنصر أخر أيضاً، وهذا ما يدعى <strong>بالتداخل</strong> (nesting). إذا أردنا تحديد أن قطتنا جميلة <strong>جداً</strong>، يمكننا إحاطة الكلمة "جداً" بالعنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/strong" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><strong></code></a>، الذي يدل على تأكيد الكلمة بشدّة:</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>قطتي جميلة</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">>جداً</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<p dir="rtl">عليك أن تتأكد من أن عناصرك متداخلة بشكل صحيح. في المثال أعلاه قمنا بفتح العنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/p" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><p></code></a> أولاً، وبعده العنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/strong" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><strong></code></a>، وبالتالي علينا إغلاق العنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/strong" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><strong></code></a> ويليه الآخر. فالشكل التالي ليس صحيحاً:</p> + +<pre class="example-bad brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>قطتي جميلة</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">>جداً</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span></code></pre> + +<p dir="rtl">على العناصر أن تُفتَح وتُغلَق بشكل صحيح ليكونوا بشكل واضح داخل أو خارج بعضهما البعض. فإذا تشابكوا بشكل خاطئ كما في الأعلى، سيقوم مُتصفحك بمحاولة القيام بأفضل تخمين حيال ما تحاول القيام به، والذي قد يؤدي إلى نتائج تنسيقيّة خاطئة. لذلك لا تقم بهذا!</p> + +<h3 dir="rtl" id="العناصر_المستحوذة_والمُضمَنِة">العناصر المستحوذة والمُضمَنِة</h3> + +<p dir="rtl">يوجد تصنيفين مهمين للعناصر في لغة الترميز النص الفائق، والذين ينبغي عليك معرفتهم، وهم العناصر المستحوذة (أو الكتلية block elements) والعناصر المُضمَنِة (inline elements).</p> + +<ul dir="rtl"> + <li>ستظهر العناصر الكتلية (Block-level elements) الموجودة في كتلة ظاهرة في الصفحة في سطر جديد مهما كان المحتوى الذي قبلها، وأي محتوى سيأتي بعدها سيظهر أيضاً في سطر جديد. تميل العناصر الكتلية إلى أن تكون عناصر هيكلية للصفحة التي تُمثلُها، فعلى سبيل المثال، الفقرات، والقوائم، وقوائم الملاحة (Navigation Menus)، والذيول (Footers)، إلخ. لا تتداخل العنصر الكتلي بداخل عنصر مضمن، ولكن قد يتداخل بداخل عنصر كتلي آخر.</li> + <li>العناصر المضمنة هي تلك العناصر لتي تُحتوى بداخل العناصر الكتلية وتحيط بأجزاء صغيرة فقط من محتوى الوثيقة، وليس فقرات كاملة أو مجموعات من المحتويات. العنصر المضمن لا يُنشئ سطر جديد ليظهر في الوثيقة، فيمكن أن يظهر بشكل طبيعي بجانب فقرة، على سبيل المثال العنصر {{htmlelement("a")}} (رابط تشعيبي) أو العناصر التوكيدية مثل {{htmlelement("em")}} أو {{htmlelement("strong")}}.</li> +</ul> + +<p dir="rtl">خذ المثال التالي:</p> + +<pre class="brush: html"><em>first</em><em>second</em><em>third</em> + +<p>fourth</p><p>fifth</p><p>sixth</p> +</pre> + +<p dir="rtl">العنصر {{htmlelement("em")}} هو عنصر مضمن، لذلك كما ترى أدناه، العناصر الثلاثة الأولى تتوضع بنفس السطر بدون وجود مسافات بينها. من الناحية الأخرى، العنصر {{htmlelement("p")}} هو عنصر كتلي، لذلك كل عنصر يظهر على سطر جديد، بمسافات سفلية وعلوية بين كل واحد (تخضع المسافات <a href="/ar/docs/Learn/CSS/Introduction_to_CSS">لتنسيق لغة صفحات الطرز المتراصة</a> الإفتراضي الذي يفرضه على الفقرات).</p> + +<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: لغة ترميز النص الفائق الإصدار الخامس أعادت تعريف تصنيفات العناصر: انظر إلى <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">تصنيفات محتوى العناصر</a>. في حين أن هذه التعريفات أكثر دقة وأقل غموضاً من السابقة، إلاّ أنهم أكثر تعقيداً من ناحية الفهم، لذلك سنكمل باستخدام التعريفات القديمة في هذا الموضوع</p> +</div> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: المصطلحات "كتلي" و "ضمني" المستخدمة في هذا الموضوع، لا ينبغي أن يشوشوك مع المصطلحات المستخدمة في مقالة <a href="/ar/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">أنواع صناديق لغة صفحات الطرز المتراصة</a> التي تحمل نفس الاسم. في حين أنهم مرتبطين إفتراضياً، إلا أن تغيير نوع العرض في صفحات الطرز المتراصة لا يغير تصنيف العنصر ولا يؤثر على العناصر التي تحتوي وعلى ولا على العناصر التي سيتم إحتواءها. أحد الأسباب التي جعلت لغة ترميز النص الفائق الإصدار الخامس تتخلى عن هذه المصطلحات هي لمنع هذا الارتباك.</p> +</div> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: يمكنك إيجاد صفحات مرجعية مفيدة تتضمن قوائم تحوي العناصر الكتلية والمضمنة، انظر إلى <a href="/ar/docs/Web/HTML/Block-level_elements">العناصر الكتلية</a> و <a href="/ar/docs/Web/HTML/Inline_elements">العناصر المضمنة</a>.</p> +</div> + +<h3 dir="rtl" id="العناصر_الفارغة">العناصر الفارغة</h3> + +<p dir="rtl">لا تتبع جميع العناصر النمط المشروح أعلاه، والذي هو عبارة عن وضع وسم الفتح، وبعده المحتوى، وبعده وسم الإغلاق. فبعض العناصر تتألف من وسم مُفرَد، والذي يستخدم عادةً لإدخال/تضمين شيء في الوثيقة. على سبيل المثال، يُضمِن العنصر {{htmlelement("img")}} صورة في الصفحة في الموضع الذي عُرِفَ فيه:</p> + +<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p dir="rtl">ينبغي أن يُخرِج ذلك السطر الشكل التالي في صفحتك:</p> + +<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: تسمى العناصر الفارغة أحياناً <em>بالعناصر الخاوية</em> (void elements).</p> +</div> + +<h2 dir="rtl" id="السمات">السمات</h2> + +<p dir="rtl">يمكن للعناصر أيضاً أنت تحتوي على سمات، والتي تبدو كشيء من هذا القبيل:</p> + +<p><img alt='&amp;amp;lt;p class="editor-note">قطتي شديدة الجمال&amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/15909/beautiful-cat-attribute.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p dir="rtl">تحتوي السمات على معلومات إضافية حول العنصر والتي لا تريد أن تظهرها في المحتوي الفعلي. في حالتنا تسمح لك السمة <code>class</code> أن تعطي العنصر مُعرِف والذي يمكن استخدامه لاحقاً للإشارة للعنصر وإعطائه تنسيق معين وأشياء أخرى.</p> + +<p dir="rtl">السمة يجب أن تملك دائماً:</p> + +<ol dir="rtl"> + <li>مسافة بينها وبين اسم العنصر (أو السمة التي تسبقها، إذا كان العنصر يملك بالفعل سمةً أو أكثر).</li> + <li>اسم السمة، متبوعاً بإشارة يساوي.</li> + <li>علامتي تنصيص تحيط بقيمة السمة.</li> +</ol> + +<h3 dir="rtl" id="التعلم_النشط_إضافة_سمات_إلى_عنصر">التعلم النشط: إضافة سمات إلى عنصر</h3> + +<p dir="rtl">يمكننا أخذ العنصر {{htmlelement("a")}} كمثال آخر. يعد الحرف "a" إختصاراً لكلمة "مرساة (anchor)"، يحول هذا العنصر النص الذي يحيط به إلى رابط تشعبي. يُمكن أن يأخذ هذا العنصر عدداً من السمات، منها:</p> + +<ul dir="rtl"> + <li>السمة <code>href</code>: تحدد قيمة هذه السمة عنوان الويب الذي يشير إليه الرابط؛ لينتقل إلى المتصفح عند الضغط عليه. على سبيل المثال، <code>href="https://www.mozilla.org/"</code>.</li> + <li>السمة <code>title</code>: تحدد قيمة هذه السمة معلومات إضافية حول الرابط، مثل ما هي الصفحة التي يشير إليها هذا الرابط. على سبيل المثال، يمكننا وضع القيمة: <code>title="The Mozilla homepage"</code>. سيظهر هذا النص كتلميح عند التحويم على الرابط.</li> + <li>السمة <code>target</code>: تحدد هذه السمة سياق التصفح الذي سيفتح به الرابط. فعلى سبيل المثال، القيمة <code>target="_blank"</code> ستعرض الرابط (الموقع الذي يشير إلى الرابط) في نافذة جديدة. إذا أردت عرض الرابط في الصحة الحالية، فلا تستخدم هذه السمة وحسب.</li> +</ul> + +<p dir="rtl">قم بتعديل السطر أدناه في منطقة <em>الإدخال</em> لتحويله إلى رابط يشير لموقعك المفضل. أولاً، أضف العنصر <code><a></code>. ثانياً، أضف السمتين <code>href</code> و <code>title</code>. وأخيراً، عَرِف السمة <code>target</code> لفتح الرابط في نافذة جديدة. ستكون قادراً على رؤية التغييرات بشكل حي في منطقة <em>الإخراج</em>. ينبغي أن ترى أنه عند التحويم على الرابط سيُعرض محتوى السمة <code>title</code>، وعند الضغط عليه سيتم الإنتقال إلى عنوان الويب الموجود في السمة <code>href</code>. تذكر أنه ينبغي عليك وضع مسافة بين اسم العنصر وكل سمة يملكها.</p> + +<p dir="rtl">إذا قمت بخطأ ما، فيمكنك دائماً تصفير (إعادت الشيفرة إلى ما كانت عليه) الشيفرة باستخدام زر <em>التصفير</em>. إذا كنت عالقاً بشكل كامل، فيمكنك الضغط على <em>زر عرض الحل</em> لرؤية الجواب.</p> + +<div class="hidden"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;A link to my favourite website.&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<p> </p> + +<p> </p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favourite website</a>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + +<p> </p> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="السمات_البوليانية_(المنطقية)">السمات البوليانية (المنطقية)</h3> + +<p dir="rtl">سترى أحياناً سمات تُكتَب من دون قيمة. تدعى هذه السمات بالسمات المنطقية، ويمكن أن تأخذ هذه السمات قيمة واحدة، والتي هي عادةً اسم السمة نفسها. على سبيل المثال، السمة {{htmlattrxref("disabled", "input")}}، والتي يُمكن أن تُسندها لعناصر الإدخال إذا أردت تعطيلها حتى لا يستطيع المستخدم إدخال أية بيانات فيها.</p> + +<pre><input type="text" disabled="disabled"></pre> + +<p dir="rtl">كاختصار، يمكنك كتابة السمة أيضاً بالشكل التالي (قمنا أيضاً بإضافة عنصر إدخال غير مُعطَل لتوضيح الفكرة أكثر):</p> + +<pre class="brush: html"><input type="text" disabled> + +<input type="text"> +</pre> + +<p dir="rtl">المثالين سيعطيانك نفس النتيجة:</p> + +<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="حذف_علامات_الإقتباس_من_حول_قيم_السمات">حذف علامات الإقتباس من حول قيم السمات</h3> + +<p>When you look around the World Wide Web, you'll come across all kind of strange markup styles, including attribute values without quotes. This is allowable in certain circumstances, but will break your markup in others. For example, if we revisit our link example from earlier, we could write a basic version with only the <code>href</code> attribute, like this:</p> + +<pre><a href=<code>https://www.mozilla.org/</code>>favourite website</a></pre> + +<p>However, as soon as we add the <code>title</code> attribute in this style, things will go wrong:</p> + +<pre class="brush: html"><a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage>favourite website</a></pre> + +<p>At this point the browser will misinterpret your markup, thinking that the <code>title</code> attribute is actually three attributes — a title attribute with the value "The", and two boolean attributes, <code>Mozilla</code> and <code>homepage</code>. This is obviously not what was intended, and will cause errors or unexpected behavior in the code, as seen in the live example below. Try hovering over the link to see what the title text is!</p> + +<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Our advice is to always include the attribute quotes — it avoids such problems, and results in more readable code too.</p> + +<h3 dir="rtl" id="هل_استخدم_علامة_تنصيص_مزدوجة_أم_مفردة؟">هل استخدم علامة تنصيص مزدوجة أم مفردة؟</h3> + +<p>In this article you'll notice that the attributes are all wrapped in double quotes. You might however see single quotes in some people's HTML. This is purely a matter of style, and you can feel free to choose which one you prefer. Both the following lines are equivalent:</p> + +<pre class="brush: html"><a href="http://www.example.com">A link to my example.</a> + +<a href='http://www.example.com'>A link to my example.</a></pre> + +<p>You should however make sure you don't mix them together. The following will go wrong!</p> + +<pre class="brush: html"><a href="http://www.example.com'>A link to my example.</a></pre> + +<p>If you've used one type of quote in your HTML, you can include the other type of quote without causing any problems:</p> + +<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> + +<p>However if you want to include a quote within the quotes where both the quotes are of the same type(single quote or double quote), you'll have to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML">use HTML entities</a> for the quotes.</p> + +<h2 dir="rtl" id="تشريح_وثيقة_لغة_ترميز_النص_الفائق">تشريح وثيقة لغة ترميز النص الفائق</h2> + +<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>Here we have:</p> + +<ol> + <li><code><!DOCTYPE html></code>: The doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. They used to look something like this: + + <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> + However, these days no one really cares about them, and they are really just a historical artifact that needs to be included for everything to work right. <code><!DOCTYPE html></code> is the shortest string of characters that counts as a valid doctype; that's all you really need to know.</li> + <li><code><html></html></code>: The {{htmlelement("html")}} element. This element wraps all the content on the entire page, and is sometimes known as the root element.</li> + <li><code><head></head></code>: The {{htmlelement("head")}} element. This element acts as a container for all the stuff you want to include on the HTML page that <em>isn't</em> the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more. You'll learn more about this in the next article in the series.</li> + <li><code><meta charset="utf-8"></code>: This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later.</li> + <li><code><title></title></code>: The {{htmlelement("title")}} element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favorite it.</li> + <li><code><body></body></code>: The {{htmlelement("body")}} element. This contains <em>all</em> the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.</li> +</ol> + +<h3 dir="rtl" id="التعلم_النشط_إضافة_بعض_الميزات_لوثيقة_ترميز_النص_الفائق">التعلم النشط: إضافة بعض الميزات لوثيقة ترميز النص الفائق</h3> + +<p>If you want to experiment with writing some HTML on your local computer, you can:</p> + +<ol> + <li>Copy the HTML page example listed above.</li> + <li>Create a new file in your text editor.</li> + <li>Paste the code into the new text file.</li> + <li>Save the file as <code>index.html</code>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You can also find this basic HTML template on the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> +</div> + +<p>You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">So in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case.) We'd like you to have a go at implementing the following steps:</p> + +<ul> + <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code><h1></code> opening tag and <code></h1></code> closing tag.</li> + <li>Edit the paragraph content to include some text about something you are interested in.</li> + <li>Make any important words stand out in bold by wrapping them inside a <code><strong></code> opening tag and <code></strong></code> closing tag</li> + <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li> + <li>Add an image to your document, below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. You'll get bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web.)</li> +</ul> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code3">Playable code3</h6> + +<p> </p> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;This is my page&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +img { + max-width: 100%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + +<p> </p> + +<p> </p> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="المساحات_الفارغة_في_لغة_ترميز_النص_الفائق">المساحات الفارغة في لغة ترميز النص الفائق</h3> + +<p>In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:</p> + +<pre class="brush: html"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<p>No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider formatting it.</p> + +<h2 id="Entity_references_Including_special_characters_in_HTML">Entity references: Including special characters in HTML</h2> + +<p>In HTML, the characters <code><</code>, <code>></code>,<code>"</code>,<code>'</code> and <code>&</code> are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less than sign, and not have it interpreted as code as some browsers may do?</p> + +<p>We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&), and ended by a semicolon (;).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Literal character</th> + <th scope="col">Character reference equivalent</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>In the below example, you can see two paragraphs, which are talking about web technologies:</p> + +<pre class="brush: html"><p>In HTML, you define a paragraph using the <p> element.</p> + +<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> + +<p>In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <code><p></code> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.</p> + +<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Note</strong>: A chart of all the available HTML character entity references can be found on Wikipedia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> +</div> + +<h2 dir="rtl" id="التعليقات_في_لغة_ترميز_النص_الفائق">التعليقات في لغة ترميز النص الفائق</h2> + +<p>In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for six months, and can't remember what you did — or if you hand your code over to someone else to work on.</p> + +<p>To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <code><!--</code> and <code>--></code>, for example:</p> + +<pre class="brush: html"><p>I'm not inside a comment</p> + +<!-- <p>I am!</p> --></pre> + +<p>As you can see below, the first paragraph appears in the live output, but the second one doesn't.</p> + +<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 dir="rtl" id="الملخص">الملخص</h2> + +<p>You've reached the end of the article — we hope you enjoyed your tour of the very basics of HTML! At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!</p> + +<div class="note"> +<p><strong>Note</strong>: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS is the language you use to style your web pages (whether e.g. changing the font or colors, or altering the page layout). HTML and CSS go very well together, as you'll soon discover.</p> +</div> + +<h2 dir="rtl" id="انظر_أيضاً">انظر أيضاً</h2> + +<ul dir="rtl"> + <li> + <p><a href="/ar/docs/Web/HTML/Applying_color">إضافة لون إلى عناصر لغة ترميز النص الفائق باستخدام صفحات الطرز المتراصة.</a></p> + </li> +</ul> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> diff --git a/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..fba39b360c --- /dev/null +++ b/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,657 @@ +--- +title: أساسيات النصوص في لغة ترميز النص الفائق +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +tags: + - العنونة + - الفقرات + - النصوص + - دليل + - مبدئين + - مقدمة إلى لغة ترميز النص الفائق +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary" dir="rtl">أحد الأهداف الرئيسية للغة ترميز النص الفائق هي هيكلة النصوص وإعطائها هدف ووظيفة (كما تُعرف هذه الوظيفة ب {{glossary("semantics")}}) حتّى يتمكن المتصفح بعرض النصوص بطريقة مناسبة. تشرح هذه المقالة الطريقة التي يُمكن استخدام هذه اللغة لهيكلة صفحة تتكون من نصوص، عن طريق إضافة عناوين وفقرات، ومؤكدات على الكلمات (حروف غامقة ومائلة، على سبيل المثال)، وإنشاء قوائم، وغيرها.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات:</th> + <td dir="rtl">معرف بسيطة بلغة ترميز النص الفائقة، كما هو مشروح في <a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Getting_started">مقالة البدء مع اللغة</a>.</td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف:</th> + <td dir="rtl">تعلم كيفية ترميز صفحة بسيطة مؤلفة من نصوص لإعطائها هيكلية ووظيفة.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الأساسيات_العناوين_والفقرات">الأساسيات: العناوين والفقرات</h2> + +<p dir="rtl">تتألف معظم النصوص المُنظمة من عناوين وفقرات، بغض النظر عما إذا كنت تقرأ قصة، أو جريدة، أو كتاب جامعي، أو مجلة ... إلخ.</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> + +<p dir="rtl">بحيث يجعل المحتوى المنظم القراءة أكثر سهولة ومتعة.</p> + +<p dir="rtl">في لغة ترميز النص الفائق، تحاط الفقرات بالعنصر {{htmlelement("p")}}، كالتالي:</p> + +<pre class="brush: html"><p>I am a paragraph, oh yes I am.</p></pre> + +<p dir="rtl">وتحاط العناوين بوسوم العنونة المخصصة:</p> + +<pre class="brush: html"><h1>I am the title of the story.</h1></pre> + +<p dir="rtl">يوجد ست عناوين متدرجة المستويات، وهي {{htmlelement("h1")}}، و {{htmlelement("h2")}}، و {{htmlelement("h3")}}، و {{htmlelement("h4")}}، و {{htmlelement("h5")}}، و {{htmlelement("h6")}}. يمثل الوسم <code><h1></code> العنوان الرئيسي، بينما يمثل الوسم <code><h2></code> عنوان فرعي، والوسم <code><h3></code> عنوان فرعي للعنوان الفرعي الأول، وهكذا.</p> + +<h3 dir="rtl" id="تنفيذ_التسلسل_الهيكلي">تنفيذ التسلسل الهيكلي</h3> + +<p dir="rtl">على سبيل المثال، في قصة ما، سيمثل الوسم <code><h1></code> عنوان القصة، والوسم <code><h2></code> سيمثل عنوان كل فصل، بينما سيمثل الوسم <code><h3></code> القسم الفرعي لكل فصل،وهلم جرا.</p> + +<pre class="brush: html"><h1>The Crushing Bore</h1> + +<p>By Chris Mills</p> + +<h2>Chapter 1: The dark night</h2> + +<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p> + +<h2>Chapter 2: The eternal silence</h2> + +<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p> + +<h3>The specter speaks</h3> + +<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p></pre> + +<p dir="rtl">فتحديد وظيفة بعض العناصر يعود لك، طالما أنك تستخدم تسلسل منطقي. ولكنك تحتاج إلى أن تضع بالإعتبار بعض الأمور عندما تقوم بتنظيم محتوى مشابه:</p> + +<ul dir="rtl"> + <li>من الأفضل أن تستخدم والوسم <code><h1></code> مرة واحدة في كل صفحة، حيث يعد يمثل هذا الوسم أعلى مستويات العنونة، وبقية العناوين تتوضع أسفله بشكل تسلسلي.</li> + <li>تأكد أنك تستخدم العناوين بترتيبها التسلسلي الصحيح. أي لا تستخدم الوسم <code><h3></code> لتمثيل عنوان فرعي، وتستخدم بعده الوسم <code><h2></code> لتمثيل عنوان فرعي من درجة ثانية، فهذا لا يبدو منطقياً، كما يؤدي إلى نتائج غريبة!</li> + <li>من الست درجات عنونة المتاحة، حاول ألاَّ تستخدم أكثر من ثلاثة في كل صفحة، مالم يكن هذا ضرورياً.<span id="result_box" lang="ar"><span> حيث أنَّ المستندات ذات المستويات المتعددة (أي تسلسل هرمي عميق) تصبح غير عملية وصعبة التنقل.</span> <span>في مثل هذه الحالات، من المستحسن نشر المحتوى على صفحات متعددة إذا كان ذلك ممكناً.</span></span></li> +</ul> + +<h3 dir="rtl" id="لماذا_نحتاج_الهيكلة_(التنظيم)؟">لماذا نحتاج الهيكلة (التنظيم)؟</h3> + +<p dir="rtl">للإجابة على هذا السؤال، دعنا نأخذ على الملف <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a>، يعتبر هذا الملف نقطة البداية لمثالنا في هذه المقالة (وهي وصفحة حمص جميلة). يجب عليك حفظ نسخة من هذا الملف على جهازك، فستحتاجه في تمارين لاحقة. تحتوي جسم الوثيقة على عدة أجزاء من المحتوى، وهي غير مُرمَزِة بأي شكل، ولكنهم مفصولين بسطور.</p> + +<p dir="rtl">بكل الأحوال، عندما ستفتح هذه الوثيقة في متصفحك، سترى أنَّ النص سيظهر كقطعة كبيرة!</p> + +<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> + +<p dir="rtl">يرجع هذا لعدم وجود عناصر لتنظم المحتوى، ولذلك لم يتمكن المتصفح بمعرفة أي جزء هو عنوان وأي جزء هو فقرة. المزيد:</p> + +<ul dir="rtl"> + <li>يميل المستخدمون لتصفح صفحات الويب بسرعة شديدة لإيجاد محتوى متعلق، فغالباً ما يقومون بقراءة العناوين كبداية (<a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">المستخدمون عادةً ما يقضون وقت قصير جداً في صفحة الويب</a>). فإذا لم يجدوا شيء مفيد خلال بضعة ثواني، فسوف يشعرون بالملل ويقومون بالذهاب إلى مكان آخر.</li> + <li><span id="result_box" lang="ar"><span>تعتبر محركات البحث التي تفهرس محتويات صفحتك العناوين كلمات رئيسية مهمة التأثير على ترتيب الصفحة عند البحث.</span> <span>وبدون العناوين، ستؤدي صفحتك بشكل سيء من حيث </span></span>{{glossary("SEO")}}<span lang="ar"><span> (تحسين محركات البحث).</span></span></li> + <li>غالباً لا يقوم المعاق بصرياً بقراءة صفحات الويب، حيث يقوم بالإستماع لها بدلاً من ذلك. يتم ذلك باستخدم برمجية تسمى بقارئ الشاشة. توفر هذه البرمجية طرق للوصول السريع للنص المُعطى. فمن بين العديد من الأساليب المستخدمة، توفر هذه البرمجية طريقة للحصول على خلاصة المستند من خلال قراءة العناوين، مما يسمح للمستخدمين بالحصول على المعلومات التي يريدونها بسرعة. فإذا كانت العناوين غير متوفرة، سيضطر هؤلاء للسماع للمستند بأكمله.</li> + <li dir="ltr">To style content with {{glossary("CSS")}}, or make it do interesting things with {{glossary("JavaScript")}}, you need to have elements wrapping the relevant content, so CSS/JavaScript can effectively target it.</li> +</ul> + +<p>We therefore need to give our content structural markup.</p> + +<h3 id="Active_learning_Giving_our_content_structure">Active learning: Giving our content structure</h3> + +<p>Let's jump straight in with a live example. In the example below, add elements to the raw text in the <em>Input</em> field so that it appears as a heading and two paragraphs in the <em>Output</em> field.</p> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">My short story + +I am a policewoman and my name is Trish. + +My legs are made of cardboard and I am married to a fish.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h3 id="Why_do_we_need_semantics">Why do we need semantics?</h3> + +<p>Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of everyday objects is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (do any countries use red to mean "go"? I hope not.)</p> + +<p>In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the {{htmlelement("h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."</p> + +<pre class="brush: html"><h1>This is a top level heading</h1></pre> + +<p>By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above.)</p> + +<p>On the other hand, you could make any element <em>look</em> like a top level heading. Consider the following:</p> + +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span></pre> + +<p>This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (You'll find out more about these later on in the course.) We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job.</p> + +<h2 id="Lists">Lists</h2> + +<p>Now let's turn our attention to lists. Lists are everywhere in life — from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the Web too, and we've got three different types to worry about.</p> + +<h3 id="Unordered">Unordered</h3> + +<p>Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.</p> + +<pre>milk +eggs +bread +hummus</pre> + +<p>Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:</p> + +<pre class="brush: html"><ul> +milk +eggs +bread +hummus +</ul></pre> + +<p>The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:</p> + +<pre class="brush: html"><ul> + <li>milk</li> + <li>eggs</li> + <li>bread</li> + <li>hummus</li> +</ul></pre> + +<h4 id="Active_learning_Marking_up_an_unordered_list">Active learning: Marking up an unordered list</h4> + +<p>Try editing the live sample below to create your very own HTML unordered list.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">milk +eggs +bread +hummus</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 6em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> + +<h3 id="Ordered">Ordered</h3> + +<p>Ordered lists are lists in which the order of the items <em>does</em> matter — let's take a set of directions as an example:</p> + +<pre>Drive to the end of the road +Turn right +Go straight across the first two roundabouts +Turn left at the third roundabout +The school is on your right, 300 meters up the road</pre> + +<p>The markup structure is the same as for unordered lists, except that you have to wrap the list items in an {{htmlelement("ol")}} element, rather than <code><ul></code>:</p> + +<pre class="brush: html"><ol> + <li>Drive to the end of the road</li> + <li>Turn right</li> + <li>Go straight across the first two roundabouts</li> + <li>Turn left at the third roundabout</li> + <li>The school is on your right, 300 meters up the road</li> +</ol></pre> + +<h4 id="Active_learning_Marking_up_an_ordered_list">Active learning: Marking up an ordered list</h4> + +<p>Try editing the live sample below to create your very own HTML ordered list.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Drive to the end of the road +Turn right +Go straight across the first two roundabouts +Turn left at the third roundabout +The school is on your right, 300 meters up the road</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> + +<h3 id="Active_learning_Marking_up_our_recipe_page">Active learning: Marking up our recipe page</h3> + +<p>So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Quick hummus recipe + + This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years. + + Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads. + + Ingredients + + 1 can (400g) of chick peas (garbanzo beans) + 175g of tahini + 6 sundried tomatoes + Half a red pepper + A pinch of cayenne pepper + 1 clove of garlic + A dash of olive oil + + Instructions + + Remove the skin from the garlic, and chop coarsely + Remove all the seeds and stalk from the pepper, and chop coarsely + Add all the ingredients into a food processor + Process all the ingredients into a paste. + If you want a coarse "chunky" hummus, process it for a short time + If you want a smooth hummus, process it for a longer time + + For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you. + + Storage + + Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it. + + Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<h1>Quick hummous recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); + +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> + +<p>If you get stuck, you can always press the <em>Show solution</em> button, or check out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> example on our github repo.</p> + +<h3 id="Nesting_lists">Nesting lists</h3> + +<p>It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:</p> + +<pre class="brush: html"><ol> + <li>Remove the skin from the garlic, and chop coarsely.</li> + <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> + <li>Add all the ingredients into a food processor.</li> + <li>Process all the ingredients into a paste.</li> + <li>If you want a coarse "chunky" hummus, process it for a short time.</li> + <li>If you want a smooth hummus, process it for a longer time.</li> +</ol></pre> + +<p>Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:</p> + +<pre class="brush: html"><ol> + <li>Remove the skin from the garlic, and chop coarsely.</li> + <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> + <li>Add all the ingredients into a food processor.</li> + <li>Process all the ingredients into a paste. + <ul> + <li>If you want a coarse "chunky" hummus, process it for a short time.</li> + <li>If you want a smooth hummus, process it for a longer time.</li> + </ul> + </li> +</ol></pre> + +<p>Try going back to the previous active learning example and updating the second list like this.</p> + +<h2 id="Emphasis_and_importance">Emphasis and importance</h2> + +<p>In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.</p> + +<h3 id="Emphasis">Emphasis</h3> + +<p>When we want to add emphasis in spoken language, we <em>stress</em> certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.</p> + +<p>I am glad you weren't late.</p> + +<p>I am <em>glad</em> you weren't <em>late</em>.</p> + +<p>The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.</p> + +<p>In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below.)</p> + +<pre class="brush: html"><p>I am <em>glad</em> you weren't <em>late</em>.</p></pre> + +<h3 id="Strong_importance">Strong importance</h3> + +<p>To emphasize important words, we tend to stress them in spoken language and <strong>bold</strong> them in written language. For example:</p> + +<p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p> + +<p>In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below.)</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p></pre> + +<p>You can nest strong and emphasis inside one another if desired:</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong> — +if you drink it, <strong>you may <em>die</em></strong>.</p></pre> + +<h3 id="Active_learning_Let's_be_important!">Active learning: Let's be important!</h3> + +<p>In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.</p> + +<div class="hidden"> +<h6 id="Playable_code_5">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"><h1>Important notice</h1> + +<p>On Sunday January 9th 2010, a gang of goths were +spotted stealing several garden gnomes from a shopping +center in downtown Milwaukee. They were all wearing green +jumpsuits and silly hats, and seemed to be having a whale +of a time. If anyone has any information about this +incident, please contact the police now.</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show suggestion" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> + +<h3 id="Italic_bold_underline...">Italic, bold, underline...</h3> + +<p>The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as <strong>presentational elements</strong> and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.</p> + +<p>HTML5 redefined <code><b></code>, <code><i></code> and <code><u></code> with new, somewhat confusing, semantic roles.</p> + +<p>Here's the best rule of thumb: it's likely appropriate to use <code><b></code>, <code><i></code>, or <code><u></code> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.</p> + +<ul> + <li>{{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...</li> + <li>{{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...</li> + <li>{{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...</li> +</ul> + +<div class="note"> +<p>A kind warning about underline: <strong>People strongly associate underlining with hyperlinks.</strong> Therefore, on the Web, it's best to underline only links. Use the <code><u></code> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.</p> +</div> + +<pre class="brush: html"><!-- scientific names --> +<p> + The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) + is the most common hummingbird in Eastern North America. +</p> + +<!-- foreign words --> +<p> + The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>, + <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>. +</p> + +<!-- a known misspelling --> +<p> + Someday I'll learn how to <u>spel</u> better. +</p> + +<!-- Highlight keywords in a set of instructions --> +<ol> + <li> + <b>Slice</b> two pieces of bread off the loaf. + </li> + <li> + <b>Insert</b> a tomato slice and a leaf of + lettuce between the slices of bread. + </li> +</ol></pre> + +<h2 id="Summary">Summary</h2> + +<p>That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">create hyperlinks</a>, possibly the most important element on the Web.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> + +<p> </p> diff --git a/files/ar/learn/html/introduction_to_html/index.html b/files/ar/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..f237220f27 --- /dev/null +++ b/files/ar/learn/html/introduction_to_html/index.html @@ -0,0 +1,61 @@ +--- +title: مقدمة إلى HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - HTML + - صفحة هبوط + - لغة ترميز النص الفائق +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary" dir="rtl">تعد لغة ترميز النص الفائق (HTML) لغة بسيطة جداً في صميمها، فهي مكوِّنة من عناصر يمكن تطبيقها على أجزاء من النص لإعطائها شكل أو وصف مختلف في الوثيقة (هل هذا النص فقرة؟ قائمة نقطية؟ هل هو جزء من جدول؟)، وتقوم بهيكلة الوثيقة إلى أقسام مُقسمة منطقياً (هل تملك تلك الصفحة رأس؟ ثلاث أعمدة من المحتوى؟ قائمة؟)، وتقوم بتضمين محتوى مثل الصور والفيديوهات في الصفحة. هذا القسم سوف يقدم لك أول وظيفتين سلف ذكرهما، كما سيغطي المفاهيم الأساسية والبنيّة الكتابيّة (syntax) التي تحتاج معرفتها لفهم اللغة.</p> + +<h2 dir="rtl" id="المتطلبات">المتطلبات</h2> + +<p dir="rtl">لا تحتاج لأي معرفة مسبقة في لغة ترميز النص الفائق للبدء في هذه الوحدة، ولكن يجب على الأقل أن تملك معرفة مبدئيّة حول استخدام الحواسيب، واستخدام متصفح الويب بشكل سلبي (بمعنى أخر، النظر إليه والتعامل مع المحتوى). يجب أن تملك بيئة عمل مُعدِة كما شُرِح في مقالة <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a>، ويجب أن يكون لديك معرفة بكيفيّة إنشاء وإدارة الملفات، كما شُرِح في مقالة <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a>. كلا المقالتين السابقتين جزء من وحدة <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">البدء مع الويب</a> المخصصة للمبتدئين.</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: إن كنت تعمل على حاسوب، جهاز لوحي، أو شيء آخر ولا تملك القدرة على إنشاء ملفات، يمكنك تجربة (معظم) الأمثلة هنا باستخدام محرر شيفرات برمجيّة على الأنترنت مثل <a href="http://jsbin.com/">JSBin</a> أو <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 dir="rtl" id="مقالات_تعليميّة">مقالات تعليميّة</h2> + +<p dir="rtl">تحتوي هذه الوحدة على المقالات التالية، والتي ستتكلم عن جميع المواضيع الأساسيّة في هذه اللغة وستعطيك فرصة لتختبر بعض المهارات.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Getting_started">البدء مع لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">تغطي هذه المقالة أساسيات لغة ترميز النص الفائق، لقد شرحنا هنا العناصر، السمات، وجميع المصطلحات المهمة الأخرى التي قد سمعت عنها، وقد قمنا بشرحها بطريقة ملائمة. لقد قمنا أيضاً بشرح كيفيّة هيكلة (إنشاء) عنصر في اللغة، وكيف يتم استخدام اللغة لهيكلة صفحة قياسيّة، وقمنا بشرح مزايا اللغة الأخرى الأساسيّة. سوف نستخدم أيضاً خلال الشرح بعض الأمثلة لنخلق بعضاً من الإثارة!</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">ماذا يوجد في رأس الصفحة؟ البيانات الوصفية في لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">رأس وثيقة لغة ترميز النص الفائق هو الجزء الذي <strong>لا</strong> يظهر في متصفح الويب عندما يتم تحميل الصفحة. يحتوي رأس الوثيقة على معلومات مثل عنوان الصفحة، وروابط ملفات صفحات الأنماط الانسيابية (إذا أردت أنْ تُنسِق محتوى وثيقتك باستخدام هذه اللغة)، وروابط لأيقونات المُفضلة (favicons)، والبيانات الوصفيّة (هي معلومات حول الوثيقة، مثل من كَتَبها، وكلمات مفتاحيّة مهمة تصفها).</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">أساسيات النصوص في لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">إحدى الوظائف الرئيسيّة للغة ترميز النص الفائق هي وصف النصوص (إعطائها معنىً ودلالة)؛ حتّى يستطيع المتصفح أن يعلم كيف سيعرضها بشكل صحيح. هذه المقالة تقوم بعرض كيف يمكنك استخدام هذه اللغة لتقطيع النص إلى هياكل من العناوين والفقرات، وتعليم الكلمات على أنَّها مهمة، وإنشاء قوائم، والكثير من الأمور الأخرى.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">إنشاء الوصلات</a></dt> + <dd dir="rtl">الوصلات مهمة جداً، فهي التي تجعل الويب ويباً. هذه المقالة تشرح طريقة إنشاء وصلات، وتناقش الطرق المثلى لاستخدامها.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">تنسيق النصوص بشكل متقدم</a></dt> + <dd dir="rtl">يوجد العديد من العناصر الأخرى في لغة ترميز النص الفائق لتنسيق النصوص، والتي لم نتكلم عنها في مقالة<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> أساسيات النصوص في لغة ترميز النص الفائق</a>. العناصر المشروحة في هذه المقالة قليل الاستخدام، ولكن من الجيد معرفتها. في هذه المقالة ستتعلم التعامل مع<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> </a>الاقتباسات، القوائم الوصفيّة، الشيفرات البرمجيّة، كتابة كلمات علويّة وسفليّة (مثل التربيع عندما يكتب على عدد بالشكل 2<sup>2</sup>)، معلومات الاتصال، والمزيد من الأمور.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">هيكليّة الوثيقة والموقع</a></dt> + <dd dir="rtl">كما يتم تعريف الأجزاء الفرديّة من صفحتك (مثل الفقرة والصورة)، تُستخدَم لغة ترميز النص الفائق أيضاً لتعريف أقسام موقعك (مثل الرأس، الشريط، وأعمدة المحتوى الرئيسي). هذه المقالة تشرح كيفيّة تخطيط الهيكل الأساسي للموقع، وكيفيّة استخدام اللغة لتمثيل ذلك الهيكل.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">تنقيح شيفرة لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">كتابة وثيقة بلغة ترميز النص الفائق أمر سهل، ولكن ماذا إن حدث خطأ ما، ولم تستطع معرفة مكان ذلك الخطأ؟ هذه المقالة ستقدم لك بعض الأدوات التي ستساعدك على حل المشاكل المشابهة.</dd> +</dl> + +<h2 dir="rtl" id="اختبارات">اختبارات</h2> + +<p dir="rtl">الاختبارات (التقييمات) التالية ستختبر فهمك لأساسيات اللغة المُغطاة في المقالات أعلاه.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">تنسيق رسالة</a></dt> + <dd dir="rtl">سوف تتعلم كتابة رسالة عاجلاً أم آجلاً. إنه لمن المثال المفيد لتجربة مهاراتنا في تنسيق النصوص! لذلك هذا الاختبار سوف يعطيك رسالة لتقوم بتنسيقها.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">هيكلة محتوى الصفحة</a></dt> + <dd dir="rtl">هذا الاختبار سوف يختبر قدراتك على استخدام لغة ترميز النص الفائق لهيكلة محتوى صفحة بسيطة، تحتوي على رأس، ذيل، شريط، محتوى رئيسي، وشريط جانبي.</dd> +</dl> + +<h2 dir="rtl" id="طالِع_أيضاً">طالِع أيضاً</h2> + +<dl> + <dt dir="rtl"><a href="https://teach.mozilla.org/activities/web-lit-basics/">أساسيات محو أمية ويب</a></dt> + <dd dir="rtl">درس ممتاز من شركة موزيلا يقوم باستكشاف واختبار الكثير من المهارات التي تحدثنا عنها في وحدة <em>مقدمة </em>إلى HTML<em>.</em> المتعلمون سيحصلون على دراية في قراءة، كتابة، والمشاركة في الويب من خلال هذه الوحدة التي تتألف من ست أجزاء. اكتشف أساسيات الويب من خلال التعلم بطريقة إنتاجيّة وتعاونيّة.</dd> +</dl> + +<div id="eJOY__extension_root" style=""> </div> diff --git a/files/ar/learn/html/multimedia_and_embedding/index.html b/files/ar/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..d66696d111 --- /dev/null +++ b/files/ar/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,79 @@ +--- +title: الوسائط المتعددة والتضمين +slug: Learn/HTML/Multimedia_and_embedding +tags: + - Assessment + - Audio + - Beginner + - CodingScripting + - Embedding + - Flash + - Guide + - HTML + - Images + - Landing + - Learn + - Multimedia + - NeedsTranslation + - SVG + - TopicStub + - Video + - Web + - iframes + - imagemaps + - img + - responsive +translation_of: Learn/HTML/Multimedia_and_embedding +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">لقد نظرنا في الكثير من النصوص حتى الآن في هذه الدورة ، ولكن الويب سيكون مملاً حقًا فقط باستخدام النص. دعونا نبدأ في النظر في كيفية جعل الويب ينبض بالحياة بمحتوى أكثر إثارة للاهتمام! تستكشف هذه الوحدة كيفية استخدام HTML لتضمين الوسائط المتعددة في صفحات الويب الخاصة بك ، بما في ذلك الطرق المختلفة التي يمكن تضمين الصور بها ، وكيفية تضمين الفيديو والصوت وحتى صفحات الويب بالكامل.</p> + +<h2 id="المتطلبات_الأساسية">المتطلبات الأساسية</h2> + +<p>قبل بدء هذه الوحدة ، يجب أن يكون لديك معرفة معقولة بأساسيات HTML ، كما هو موضح سابقًا في <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML"> مقدمة عن HTML </a> . إذا لم تعمل من خلال هذه الوحدة (أو شيء مماثل) ، فقم بالعمل عليها أولاً ، ثم ارجع!</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="https://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="ادله">ادله</h2> + +<p>تحتوي هذه الوحدة على المقالات التالية التي ستأخذك من خلال جميع أساسيات تضمين الوسائط المتعددة على صفحات الويب.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></dt> + <dd> + <p dir="rtl"><strong id="docs-internal-guid-ff3bcadf-7fff-b32d-5d13-2fc8e5fb67b7">هناك أنواع أخرى من الوسائط المتعددة للنظر، ولكن من المنطقي أن تبدأ مع المتواضع {{htmlelement ("img"}} عنصر يستخدم لتضمين صورة بسيطة في صفحة ويب. في هذه المقالة سننظر في كيفية استخدامه بمزيد من العمق ، بما في ذلك الأساسيات ، والتعليق عليه مع التسميات التوضيحية باستخدام {{htmlelement ("figure"}}، وكيفية ارتباطه بصور خلفية CSS.</strong></p> + </dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></dt> + <dd> + <p dir="rtl"><strong id="docs-internal-guid-2ddd584f-7fff-2ed9-3c17-7e4b1b33ccdb">بعد ذلك، سننظر في كيفية استخدام عناصر {{(HTML5 {{htmlelement ("video"}}} و{{(htmlelement ("audio"}} لتضمين الفيديو والصوت على صفحاتنا، بما في ذلك الأساسيات، وتوفير الوصول إلى تنسيقات ملفات مختلفة إلى متصفحات مختلفة، وإضافة التسميات التوضيحية والترجمة، وكيفية إضافة نسخ احتياطية للمتصفحات القديمة.</strong></p> + </dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></dt> + <dd>عند هذه النقطة نود أن تأخذ إلى حد ما من خطوة جانبية، والنظر في اثنين من العناصر التي تسمح لك لتضمين مجموعة واسعة من أنواع المحتوى في صفحات الويب الخاصة بك: {{htmlelement ("iframe"}}، {{htmlelement ("embed"}} و {{htmlelement ("object"}}. <iframe> هي لتضمين صفحات ويب أخرى ، والاثنان الآخران يسمحان لك بتضمين ملفات PDF و SVG وحتى Flash - وهي تقنية في طريقها للخروج ، ولكن قد لا تزال تراها بشكل شبه منتظم.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the web</a></dt> + <dd>يمكن أن تكون الرسومات المتجهة مفيدة للغاية في بعض الحالات. على عكس التنسيقات العادية مثل PNG /JPG ، فإنها لا تشوه / أو تتبكسل عند التكبير - يمكن أن تظل سلسة عند تحجيمها. تعرّفك هذه المقالة على تنسيق {{glossary ("SVG"}} في صفحات الويب.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></dt> + <dd>مع هذا العدد الكبير من أنواع الأجهزة المختلفة القادرة الآن على تصفح الويب - من الهواتف المحمولة إلى أجهزة الكمبيوتر المكتبية - فإن المفهوم الأساسي للإتقان في عالم الويب الحديث هو التصميم المتجاوب. يشير هذا إلى إنشاء صفحات ويب يمكنها تغيير ميزاتها تلقائيًا لتناسب أحجام الشاشة المختلفة والدقة وما إلى ذلك. سيتم النظر في هذا بمزيد من التفصيل في وحدة CSS في وقت لاحق ، ولكن في الوقت الحالي ، سننظر في الأدوات التي يتوفر HTML لإنشاء صور سريعة الاستجابة ، بما في ذلك عنصر {{htmlelement ("picture"}}} .</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessments will test your understanding of the HTML basics covered in the guides above:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></dt> + <dd>In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Add a hitmap on top of an image</a></dt> + <dd>Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.</dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 2</a></dt> + <dd> + <p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in this <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).</p> + </dd> +</dl> diff --git a/files/ar/learn/html/الجداول/index.html b/files/ar/learn/html/الجداول/index.html new file mode 100644 index 0000000000..380e837a80 --- /dev/null +++ b/files/ar/learn/html/الجداول/index.html @@ -0,0 +1,36 @@ +--- +title: جداول HTML +slug: Learn/HTML/الجداول +translation_of: Learn/HTML/Tables +--- +<div dir="rtl">{{LearnSidebar}}</div> + +<p class="summary" dir="rtl">تتمثل مهمة شائعة جدًا في HTML في هيكلة البيانات الجدولية ، ولديها عدد من العناصر والسمات لهذا الغرض فقط. إلى جانب القليل من CSS للتصميم ، يجعل HTML من السهل عرض جداول المعلومات على شبكة الإنترنت مثل خطة درس مدرستك أو الجدول الزمني في حمام السباحة المحلي الخاص بك أو إحصائيات حول الديناصورات المفضلة لديك أو فريق كرة القدم. تنقلك هذه الوحدة إلى كل ما تحتاج إلى معرفته حول هيكلة بيانات الجداول باستخدام HTML.</p> + +<h2 dir="rtl" id="المتطلبات_الأساسية">المتطلبات الأساسية</h2> + +<p dir="rtl">قبل بدء هذه الوحدة ، يجب أن تكون قد قمت بالفعل بتغطية أساسيات HTML - راجع <a href="https://developer.mozilla.org/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة إلى HTML</a>.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر حيث لا تملك القدرة على إنشاء ملفاتك الخاصة ، فيمكنك تجربة (أكثر من) أمثلة التعليمات البرمجية في برنامج الترميز عبر الإنترنت مثل <a href="http://jsbin.com/">JSBin</a> أو <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 dir="rtl" id="خطوط_إرشاد">خطوط إرشاد</h2> + +<p dir="rtl">تحتوي هذه الوحدة على المقالات التالية:</p> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Tables/Basics">أساسيات جدول HTML</a></dt> + <dd dir="rtl">تبدأ هذه المقالة في البدء بجداول HTML ، والتي تغطي الأساسيات ذاتها ، مثل الصفوف والخلايا ، والعناوين ، وخلايا تجعل الأعمدة والصفوف متعددة ، وكيفية تجميع كل الخلايا في عمود معًا لأغراض التصميم.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced">الميزات المتقدمة لجداول HTML وسهولة الوصول إليها </a></dt> + <dd dir="rtl">في المقالة الثانية في هذه الوحدة ، نلقي نظرة على بعض الميزات المتقدمة لجداول HTML - مثل التسميات التوضيحية / الملخصات وتجميع صفوفك في أقسام رأس الجدول والجسم والتذييل - وكذلك النظر في إمكانية الوصول إلى الجداول للمستخدمين ذوي الإعاقات البصرية .</dd> +</dl> + +<h2 dir="rtl" id="تقييم">تقييم</h2> + +<dl> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">هيكلة بيانات الكوكب </a></dt> + <dd dir="rtl">في تقييم الجدول الخاص بنا ، نوفر لك بعض البيانات حول الكواكب في نظامنا الشمسي ، ونجعلك تنظّمها في جدول HTML.</dd> +</dl> + +<div id="eJOY__extension_root"></div> diff --git a/files/ar/learn/html/بسيطة_html_إنشاء_صفحة/index.html b/files/ar/learn/html/بسيطة_html_إنشاء_صفحة/index.html new file mode 100644 index 0000000000..72d8216f43 --- /dev/null +++ b/files/ar/learn/html/بسيطة_html_إنشاء_صفحة/index.html @@ -0,0 +1,304 @@ +--- +title: إنشاء صفحة HTML بسيطة +slug: Learn/HTML/بسيطة_HTML_إنشاء_صفحة +tags: + - البداية +translation_of: Learn/Getting_started_with_the_web +--- +<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/learn/index.html b/files/ar/learn/index.html new file mode 100644 index 0000000000..056540bdd7 --- /dev/null +++ b/files/ar/learn/index.html @@ -0,0 +1,128 @@ +--- +title: تعلم تطوير الويب +slug: Learn +tags: + - تعلم + - صفحة هبوط + - فهرس + - مبتدئين + - مقدمة + - ويب +translation_of: Learn +--- +<div class="summary" dir="rtl"> +<p style="direction: rtl;">مرحبا بك في قسم بـشبكة مطوري موزيلا للتعلم. تهدف مجموعة المقالات هذه إلى توفير كل ما يحتاجه المبتدئون في تطوير الويب للبدء ببناء مواقعهم.</p> +</div> + +<p dir="rtl">ليس الهدف من هذا القسم هو أن يأخذك من مرحلة «مبتدئ» إلى مرحلة «الإحتراف» ولكن لأخذك من مرحلة «مبتدئ» إلى «الإكتفاء بالأساسيات». ثم ومن هنا يجب أن تكون قادراً على إكمال طريقك عبر دراسة <a href="https://developer.mozilla.org/ar/">بقيّة مصادر شبكة مطوري موزيلا</a>، وغيرها من المصادر ذات المستوى المتوسط والمتقدم التي تتطلب معرفة مسبقة.</p> + +<p dir="rtl">إذا كنت مبتدئ، تطوير الويب يمكن أن يكون تحدياً - سنساعدك وسنوفر لك تفاصيل كافية لتشعر بالراحة وتدرس المواضيع كما ينبغي. هذا هو مكانك إن كنت طالباً يتعلم تطوير الويب (بشكل ذاتي أو كجزء من الدراسة)، مدرساً يبحث عن مصادر، هاوٍ، أو شخص ما يريد فقط فهم المزيد حول طريقة عمل تقنيات الويب.</p> + +<div class="warning" dir="rtl"> +<p><strong>مهم</strong>: المحتوى في هذا القسم هو محتوى متجدد باستمرار. فإذا كان لديك أسئلة بخصوص مواضيع تود أن يتم تغطيتها أو تشعر أنها ناقصة، انظر إلى قسم «تواصل معنا» أسفله للحصول على معلومات عن كيفية التواصل معنا.</p> +</div> + +<h2 dir="rtl" id="من_أين_أبدا">من أين أبدا</h2> + +<ul class="card-grid" dir="rtl"> + <li><span>مبتدئ:</span> + + <p>إذا كنت مبتدئًا في تطوير الويب نقترح عليك أن تبدأ في وحدة <a href="/ar/docs/Learn/Getting_started_with_the_web">البدء مع الويب</a>، والتي توفر مقدمة عملية في تطوير الويب.</p> + </li> + <li><span>أسئلة محددة:</span> + <p>إذا كان لديك سؤال محدد حول تطوير الويب، قد تجد شيئا يساعدك في قسم <a href="/ar/docs/Learn/Common_questions">الأسئلة الشائعة</a>.</p> + </li> + <li><span>ما بعد الأساسيات:</span> + <p>إذا كان لديك القليل من المعرفة مسبقاً، الخطوة التالية هي تعلم لغة ترميز النص الفائق وصفحات الأنماط الانسيابية بالتفصيل مع وحدة «<a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة إلى لغة ترميز النص الفائق</a>» والمتابعة بعدها إلى وحدة «<a href="/ar/docs/Learn/CSS/Introduction_to_CSS">مقدمة إلى صفحات الأنماط الانسيابية</a>».</p> + </li> + <li><span>الإنتقال إلى البرمجة:</span> + <p>إذا كنت متمكناً من لغة ترميز النص الفائق وصفحات الأنماط الانسيابية بالفعل، وكنتَ مهتماً بالبرمجة، فحتماً سترغب في الإنتقال إلى تعلم «الجافاسكربت». ابدأ مع وحدة «<a href="/ar/docs/Learn/JavaScript/First_steps">خطوات الأولى مع الجافاسكربت</a>» و «<a href="/ar/docs/Learn/Server-side/First_steps">خطواتك الأولى مع تطوير جهة الخادم</a>».</p> + </li> +</ul> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: يحتوي <a href="/ar/docs/Glossary">قاموسنا</a> على تعريفات للمصطلحات</p> +</div> + +<p dir="rtl">{{LearnBox({"title":"معلومة سريعة", "sources":"/ar/docs/Glossary"})}}</p> + +<h2 dir="rtl" id="المواضيع_المغطاة">المواضيع المغطاة</h2> + +<p dir="rtl">القائمة التالية تحتوي على جميع المواضيع التي تمت تغطيتها في قسم التعلم الخاص بشبكة مطوري موزيلا.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/Getting_started_with_the_web">البدء مع الويب</a></dt> + <dd dir="rtl">توفر الوحدة مقدمة عملية عن تطوير الويب للمبتدئين.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML">لغة ترميز النص الفائق — لبنة الويب</a></dt> + <dd dir="rtl">لغة ترميز النص الفائق (HTML) هي اللغة التي نستخدمها لهيكلة أجزاء مختلفة من محتوانا ولتحديد معناها أو الغرض منها. هذا الموضوع يشرح هذه اللغة بالتفصيل.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/CSS">صفحة الأنماط الانسيابية — تصميم الويب</a></dt> + <dd dir="rtl">صفحات الأنماط الانسيابية (CSS) هي اللغة التي نستخدمها لتصميم وتنسيق محتوى الويب، كما نستخدمها لإضافة تأثيرات مثل الرسوم المتحركة. يوفر هذا الموضوع تغطية شاملة لهذه التقنية.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/JavaScript">الجافاسكربت — لغة برمجة ديناميكية لتطوير جهة العميل</a></dt> + <dd dir="rtl">تعد الجافاسكربت (JavaScript) لغة برمجة ديناميكيّة تُستخدم لإضافة ميزات تفاعليّة لصفحات الويب. يشرح هذا الموضوع جميع الأساسيات الضرورية لتُصبح قادراً على القراءة والكتابة باستخدام هاته اللغة.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/Accessibility">الإتاحة — اجعل الويب متاحاً للجميع</a></dt> + <dd dir="rtl">الإتاحة (Accessibility) هي جعل محتوى الويب متاحاً لأكبر قدر من الناس بغض النظر عن الإعاقة التي لديهم، أو الجهاز الذي يستخدمونه، أو اللغة التي يتقنوها، أو أي عامل آخر. يقدم هذا الموضوع كل ما تحتاج معرفته عن هذا المفهوم.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/Tools_and_testing">الأدوات والإختبار</a></dt> + <dd dir="rtl">يُغطي هذا الموضوع الأدوات التي يستخدمها المطورون لتسهيل عملهم، مثل أدوات الإختبار العابرة للمتصفحات (corss-browser).</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/Server-side">برمجة جهة الخادم</a></dt> + <dd dir="rtl">حتى ولو كنت مُركزاً على تطوير جهة العميل (client-side)، مازال من المفيد التعرُّف على كيفيّة عمل الخوادم وما هي المزايا التي تمتلكها لغات جهة الخادم (server-side). توفر هذه المقالة مقدمة عامة حول كيفيّة عمل جهة الخادم، كما تقدم دورة مُفصلة عن كيفيّة بناء تطبيق يعمل على الخادم باستخدام إطارين عمل (frameworks) مشهورين — جانغو (لغة بايثون) وأكسبريس (نود).</dd> +</dl> + +<h2 dir="rtl" id="احصل_على_أمثلتنا_البرمجيّة">احصل على أمثلتنا البرمجيّة</h2> + +<p dir="rtl">جميع الأمثلة البرمجية التي ستشاهدها في قسم التعلم متوفرة على <a href="https://github.com/mdn/learning-area/">جيتهاب</a>. إذا أردت نسخهم جميعاً إلى حاسوبك، فأسهل طريقة هي:</p> + +<ol dir="rtl"> + <li><a href="https://git-scm.com/downloads">تثبيت جيت</a> على حاسوبك. يعد جيت برمجيّة التحكم بالإصدارات الأساسيّة التي يستخدمها جيتهاب للقيام بعمله.</li> + <li>قم <a href="https://github.com/join">بإنشاء حساب على جيتهاب</a>. العملية سهلة وبسيطة</li> + <li>بعدما تنتهي من إنشاء الحساب، قم بتسجيل الدخول إلى الموقع باسم المستخدم وكلمة المرور خاصتك.</li> + <li>افتح <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">موجه الأوامر</a> على حاسوبك (إذا كنت تستخدم ويندوز) أو الطرفية (إذا كنت تستخدم <a href="https://help.ubuntu.com/community/UsingTheTerminal">لينُكس</a> أو <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">ماك</a>)</li> + <li>لتقوم بنسخ مستودع قسم التعلم إلى مجلد يسمى "learning-are" في مسارك الحالي، استخدم الأمر التالي: + <pre class="brush: bash line-numbers language-bash"><code class="language-bash">git clone https://github.com/mdn/learning-area</code></pre> + </li> + <li>يمكنك الآن الدخول إلى المجلد لتجد الملف الذي تبحث عنه (إما باستخدام مدير الملفات أو باستخدام <a href="https://ar.wikipedia.org/wiki/%D8%B3%D9%8A%D8%AF%D9%8A_(%D8%A3%D9%85%D8%B1)">الأمر cd</a>)</li> +</ol> + +<p dir="rtl">يمكنك الحصول على آخر التحديثات المُجراة على مستودع وتحميلها إلى مجلدك تلقائياً عن طريق اتباع الخطوات التالية:</p> + +<ol dir="rtl"> + <li>باستخدام موجه الأوامر/الطرفية، ادخل إلى المجلد <code>learning-area</code> باستخدام الأمر <code>cd</code>. على سبيل المثال إذا كنت في المجلد الحاوي للمجلد <code>learning-area</code> استخدم الأمر: + + <pre class="brush: bash line-numbers language-bash"><code class="language-bash">cd learning-area</code></pre> + </li> + <li>قم بتحديث المستودع باستخدام الأمر التالي: + <pre class="brush: bash line-numbers language-bash"><code class="language-bash">git pull</code></pre> + </li> +</ol> + +<p dir="rtl"></p> + +<h2 dir="rtl" id="تواصل_معنا">تواصل معنا</h2> + +<p dir="rtl">إذا أردت التواصل معنا من أجل إخبارنا بأي شيءٍ كان، فأفضل طريقة هي إرسال رسالة لنا عن طريق <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">موضوع قسم التعلم</a> أو باستخدام <a href="/ar/docs/MDN/Community/Conversations#Chat_in_IRC">قنوات IRC</a>. نود أن نسمع منك أي شيء بخصوص ما تظنه خاطئاً أو مفقوداً على هذا الموقع، أو طلبات لمواضيع تعلم جديدة، أو طلبات للمساعدة بخصوص شيء لا تستطيع فهمه، أو أي أسئلة أخرى.</p> + +<p dir="rtl"></p> + +<h2 dir="rtl" id="طالع_أيضاً">طالع أيضاً</h2> + +<dl> + <dt dir="rtl"><a href="https://www.mozilla.org/en-US/newsletter/developer/">القائمة البريدية لمطوري موزيلا</a></dt> + <dd dir="rtl">قائمتنا البريدية لمطوري الويب، والتي تعد مصدر عظيم لجميع مستويات الخبرة.</dd> +</dl> + +<dl> + <dt dir="rtl"><a href="https://www.codecademy.com/">موقع Codecademy</a></dt> + <dd dir="rtl">موقع تفاعلي رائع لتعليم لغات البرمجة من الصفر.</dd> + <dt dir="rtl"><a href="https://exlskills.com/learn-en/courses">EXLskills</a><a href="https://code.org/"> </a></dt> + <dd dir="rtl">دورات مجانية ومفتوحة لتعلم المهارات التقنية ، مع الإرشاد والتعلم القائم على المشاريع</dd> + <dt dir="rtl"><a href="https://code.org/">موقع Code.org </a></dt> + <dd dir="rtl">مقالات وتدريبات برمجيّة بسيطة تستهدف بشكل أساسي المبتدئين.</dd> + <dt dir="rtl"><a href="https://www.freecodecamp.org/">موقع freeCodeCamp.org</a></dt> + <dd dir="rtl">موقع تفاعلي يحتوي على دورات ومشاريع لتعليم تطوير الويب.</dd> +</dl> + +<dl> + <dt dir="rtl"><a href="https://learning.mozilla.org/activities">أنشطة تعليميّة</a></dt> + <dd dir="rtl">سلسلة من الأنشطة التعليميّة للتعليم مُنشأة من قبل مؤسسة موزيلا، تغطي كل شيء بدءً من أساسيات الويب والخصوصيّة وصولاً إلى الجافا سكربت وغيرها من التقنيات المتقدمة.</dd> +</dl> + +<p dir="rtl"></p> 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 new file mode 100644 index 0000000000..2a6a1c4860 --- /dev/null +++ b/files/ar/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,618 @@ +--- +title: البداية في الجافا سكربت +slug: Learn/JavaScript/First_steps/A_first_splash +tags: + - أحداث + - تعلم + - جافا سكربت + - حالات شرطية + - دالة + - سكربت + - عمليات + - كائنات + - مبتديء + - متغيرات + - مقال +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">بما أنك الآن قد تعرفت على المفهوم العام للغةْ جافاسكريبت, و ما الذي يمكن أن تعمله بها, سنقوم الآن بإعطائك كورس مكثف في أساسيات جافاسكريبت من خلال دروس تعتمد تماما على التجربة العملية. ستقوم الآن و خطوة بخطوة بعمل لعبةْإحزر الرقم .</p> + +<p class="summary"></p> + +<table class="learn-box standard-table" dir="rtl"> + <tbody> + <tr> + <th scope="row">المتطلبات اﻷساسية:</th> + <td>فهم أساسيات الحاسوب، فهم أساسيات HTML و CSS, وفهم ما هي الجافا سكربت.</td> + </tr> + <tr> + <th scope="row">الهدف:</th> + <td>أخذ قليل من الخبرة في كتابة بعض الجافا سكربت، وفهم القليل من اﻷساسيات لفهم كتابة برنامج بالجافا سكربت .</td> + </tr> + </tbody> +</table> + +<p dir="rtl">لا تتوقع أن تفهم كل تفاصيل الكود في الوقت الحالي __ نحن نريد أن نقدم لك المباديء العليا اﻵن، وإعطاؤك فكرة عن كيفية عمل الجافاسكربت ( وأي لغة برمجة أخرى ). في المقالات اللاحقة ، سوف نرى كل هذه الميزات بكثير من التفصيل!</p> + +<div class="note" dir="rtl"> +<p>ملحوظة: العديد من ملامح الكود سوف تراها في الجافا سكربت كما في اللغات البرمجية اﻵخرى __ الدوال ، الحلقات التكرارية، إلخ. بنية الكود تبدو مختلفة ، ولكن المبدأ واحد ﻻ يتغير .</p> +</div> + +<h2 dir="rtl" id="فكر_مثل_المُبَرْمِج">فكر مثل المُبَرْمِج</h2> + +<p dir="rtl">واحد من اﻷشياء الصعبة في تعلم البرمجة ليس بنية الكود، ولكن كيف تطبق هذا الكود لحل المشاكل في العالم الحقيقي. أنت تحتاج للبدء في التفكير مثل المُبَرْمِج__ عمومًا هذا يتضمن النظر في وصف ماذا يحتاج برنامجك لكي يعمل, وعلى ماذا يعمل. ملامح الكود تحتاج ﻷن تحقق هذه اﻷشياء، وكيفية جعلهم يعملون معًا.</p> + +<p dir="rtl">المتطلبات مزيج من العمل الجاد ، الخبرة في تركيب الجملة البرمجية ، و التدريب بجانب قليل من اﻹبداع. كلما قمت بكتابة الكود ، كلما كان ذلك أفضل . ﻻ نعدك أن تطور " عقل المبرمج " في خمسة دقائق، ولكن سوف نعطيك الكثير من الفرص للتدريب على التفكير مثل المُبَرْمِج خلال هذه الدورة .</p> + +<p dir="rtl">مع أخذ ذلك في الاعتبار ، دعنا نأخذ مثال سوف ننشأه في هذا المقال، ومراجعة العملية العامة لتقسيمها إلى مهام ملموسة . </p> + +<h2 dir="rtl" id="مثال____لعبة_تخمين_الرقم">مثال __ لعبة تخمين الرقم</h2> + +<p dir="rtl">في هذا المقال سنعرض لك كيفية بناء لعبة بسيطة كما في هذا المثال :</p> + +<div class="hidden"> +<h6 id="Top_hidden_code">Top hidden code</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>Number guessing game</title> + <style> + html { + font-family: sans-serif; + } + + body { + width: 50%; + max-width: 800px; + min-width: 480px; + margin: 0 auto; + } + + .lastResult { + color: white; + padding: 3px; + } + </style> +</head> + +<body> + <h1>Number guessing game</h1> + <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p> + <div class="form"> <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Submit guess" class="guessSubmit"> </div> + <div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> + </div> +</body> +<script> + // Your JavaScript goes here + var randomNumber = Math.floor(Math.random() * 100) + 1; + var guesses = document.querySelector('.guesses'); + var lastResult = document.querySelector('.lastResult'); + var lowOrHi = document.querySelector('.lowOrHi'); + var guessSubmit = document.querySelector('.guessSubmit'); + var guessField = document.querySelector('.guessField'); + var guessCount = 1; + var resetButton; + + function checkGuess() { + var 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!!!'; + lowOrHi.textContent = ''; + 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 = ''; + } + + guessSubmit.addEventListener('click', checkGuess); + + 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); + } + + 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; + } +</script> + +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p> + +<p dir="rtl">جرب اللعب __ تعرف بنفسك على اللعبة قبل أن تمضي قُدُمًا .</p> + +<p dir="rtl">دعنا نتخيل رئيسك في العمل أعطاك المختصر التالي ﻹنشاء هذه اللعبة :</p> + +<blockquote> +<p>أريد منك أن تنشيء لعبة بسيطة وهي لعبة تخمين الرقم. يجب اختيار رقم عشوائي بين 1 و 100 ، ثم تحدي اللاعب لتخمين الرقم في 10 مرات. بعد كل مرة يجب إخبار اللاعب هل الرقم صحيح أم خطأ — و إذا كانت اﻷرقام المخمنة خطأ ، فهل كان التخمين قريب جدًا أم بعيد جدًا . يجب أن يخبر اللاعب أيضًا ما اﻷرقام التي خمنها سابقًا . اللعبة تنتهي عندما يخمن اللاعب الرقم الصحيح، أو تستمر اللعبة حتي نهاية عدد المرات. عندما تنتهي اللعبة يجب إعطاء اللاعب خيار بدء اللعبة مرة أخرى .</p> +</blockquote> + +<p dir="rtl">بناءًا على النظر في هذا المختصر ، أول شيء يمكننا فعله هو البدء في تقسيمها إلى مهام بسيطة قابلة للتنفيذ، مثل عقلية المبرمج :</p> + +<ol dir="rtl"> + <li>أنشيء رقم عشوائي بين 1 و 100 .</li> + <li>سجل الرقم الذي أدخله اللاعب . بداية من رقم 1 .</li> + <li>أعطِ اللاعب طريقة لتخمين ما هو الرقم .</li> + <li>بمجرد أن يدخل اللاعب الرقم ، سجل أول رقم بحيث يستطيع اللاعب أي يرى تخمينات السابقة.</li> + <li>ثم ، تأكد ما إذا كان الرقم صحيح.</li> + <li>إذا كان صحيحًا : + <ol> + <li>اعرض رسالة التهنئة .</li> + <li>امنع اللاعب من كتابة تخمينات أخرى ( ﻷن هذا سيفسد اللعبة) .</li> + <li>اعرض للاعب أن يبدأ اللعبة مرة أخرى .</li> + </ol> + </li> + <li>إذا كان خطأ واللاعب لديه مرات أخرى : + <ol> + <li>أخبر اللاعب أن التخمين خطأ .</li> + <li>اسمح للاعب بإدخال تخمين آخر.</li> + <li>قم بزيادة المحاوﻻت بمقدار 1 .</li> + </ol> + </li> + <li>إذا كان خطأ واللاعب ليس لدي مرات أخرى: + <ol> + <li>أخبر اللاعب أن اللعبة انتهت .</li> + <li>امنع اللاعب من كتابة تخمينات أخرى ( ﻷن هذا سيفسد اللعبة) .</li> + <li>اعرض للاعب أن يبدأ اللعبة مرة أخرى .</li> + </ol> + </li> + <li>عندما يُعاد تشغيل اللعبة ، تأكد من إعادة تعيين اللعبة وواجهة المستخدم ، ثم نفذ الخطوة رقم 1 .</li> +</ol> + +<p dir="rtl">دعنا نبدأ اﻵن ، لنرى كيف نستطيع أن نحول هذه الخطوات إلى كود، وننشيء هذا المثال ، ونستكشف ميزات الجافا سكربت في طريقنا :</p> + +<h3 dir="rtl" id="اﻹعداد_اﻷولي">اﻹعداد اﻷولي</h3> + +<p dir="rtl">للبدء في الحل ، نفضل أن تأخذ نسخة من ملف , <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">هنا يمكن رؤية المثال الحي</a>). افتح الملف في محرر النصوص الخاص بك وفي متصفح الويب.سترى عنوان رئيسي وفقرة التعليمات و نموذج ﻹدخال التخمينات ، ولكن هذا النموذج حاليًا لن يقوم بعمل أي شيء .</p> + +<p dir="rtl">المكان حيث سنضيف الكود الخاص بنا بداخله {{htmlelement("script")}} يوجد في آخر ملف HTML :</p> + +<pre class="brush: html notranslate"><script> + + // Your JavaScript goes here + +</script> +</pre> + +<h3 dir="rtl" id="إضافة_المتغيرات_لتخزين_البيانات_الخاصة_بنا">إضافة المتغيرات لتخزين البيانات الخاصة بنا</h3> + +<p dir="rtl">دعونا نبدأ. قبل كل شيء ، أضف اﻷسطر التالية بداخل عنصر{{htmlelement("script")}} :</p> + +<pre class="brush: js notranslate">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;</pre> + +<p dir="rtl">في هذا القسم من الكود فقد هيئنا المتغيرات والثوابت التي سنحتاجها لتخزين بيانات برنامجنا. المتغيرات تحتوي بشكل أساسي على قيم ( مثل الأرقام، النصوص). ﻹنشاء متغير نكتب الكلمة <code>let</code> ( أو <code>var</code> ) متبوعة باسم المتغير ( للمزيد عن الاختلاف بين الكلمات المفتاحية في <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">هذه المقالة</a> ). الثوابت تستخدم لتخزين قيم غير قابلة للتغيير أو ﻻ تتغير وتكتب الثوابت بعد الكلمة المفتاحية <code>const</code>. في هذه الحالة ، نستخدم الثوابت لتخزين مراجع ﻷجزاء من واجهة المستخدم ; النص بداخل بعض هذه الثوابت ممكن أن يتغير ، ولكن عنصر HTML يبقى كما هو .</p> + +<p dir="rtl">تستطيع تعيين قيمة للمتغير أو الثابت بعد علامة يساوي (<code>=</code>) متبوعة بالقيمة التي تريدها .</p> + +<p dir="rtl">في مثالنا :</p> + +<ul> + <li dir="rtl">المتغير اﻷول — <code>randomNumber</code> — يحدد رقم عشوائي بين 1 و 100 ، حيث تم حسابه باستخدام خوارزمية رياضية .</li> + <li dir="rtl">أول ثلاثة ثوابت هي لتخزين مرجع للفقرات في HTML ، وتستخدم ﻹدخال قيم في عنصر الفقرات في الكود ( ﻻحظ أنهم بداخل عنصر <code><div></code> ، الذي يستخدم لتحديد الثلاثة لتهيئتهم في وقت ﻻحق ، عندما نعيد تشغيل اللعبة) + <pre class="brush: html notranslate"><div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> +</div></pre> + </li> + <li dir="rtl">الثابتين التاليين يخزنان مراجع لنص حقل اﻹدخال و زر اﻹرسال حيث يستخدم للتحكم في إرسال الرقم الذي تم تخمينه .</li> + <li> + <pre class="brush: html notranslate" dir="rtl"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> +<input type="submit" value="Submit guess" class="guessSubmit"></pre> + </li> + <li dir="rtl">آخر متغيرين لدينا يخزنان عدد مرات التخمين بداية من المرة 1 ( يستخدم لحفظ كم مرة قام اللاعب بالتخمين )، ومرجع لزر التهيئة (حيث سيكون موجود فيما بعد ) .</li> +</ul> + +<div class="note" dir="rtl"> +<p><strong>ملحوظة</strong>: سوف تتعمل المزيد عن المتغيرات / الثوابت فيما بعد في هذه الدورة ، بداية من <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">المقال التالي</a> .</p> +</div> + +<h3 dir="rtl" id="الدوال">الدوال</h3> + +<p dir="rtl">ثم ، أضف التالي أسفل كود الجافا سكربت الذي كتبناه باﻷعلى :</p> + +<pre class="brush: js notranslate">function checkGuess() { + alert('I am a placeholder'); +}</pre> + +<p dir="rtl">الدوال هي جزء من الكود يمكن إعادة استخدامه حيث تستطيع كتابة مرة واحدة واستدعاؤه مرة أخرى ومرة أخرى، وحفظ الكود الذي نحتاج لتكراره دائمًا .هذا حقًا مفيد.هناك عدة طرق لتعريف الدوال، ولكن اﻵن سنركز على نوع بسيط. هنا عرَّفنا الدالة باستخدام الكلمة المفتاحية <code>function</code>, متبوعة بالاسم, مع اﻷقواس بعدها . بعد ذلك وضعنا اﻷقواس المعقوفة (<code>{ }</code>). بداخل اﻷقواس المعقوفة نكتب الكود الذي نريده لكي يعمل عندما نستدعي هذه الدالة.</p> + +<p dir="rtl">عندما نريد تشغير الكود ، نكتب اسم الدالة متبوعًا باﻷقواس.</p> + +<p dir="rtl">دعنا نحاول اﻵن. احفظ الكود و أعد تحميل الصفحة في المتصفح. ثم اذهب إلى <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>, وأدخل السطر التالي :</p> + +<pre class="brush: js notranslate">checkGuess();</pre> + +<p dir="rtl">بعد الضغط على <kbd>Return</kbd>/<kbd>Enter</kbd>, يجب أن ترى تحذير يقول لك "<samp>I am a placeholder</samp>" لقد عرَّفنا الدالة في الكود الخاص بنا حيث تنشيء تحذير عند استدعائها.</p> + +<div class="note" dir="rtl"> +<p><strong>ملحوظة</strong>: سوف تتعلم المزيد عن الدوال في هذه الدورة .</p> +</div> + +<h3 dir="rtl" id="العمليات_الرياضية">العمليات الرياضية</h3> + +<p dir="rtl">العمليات الرياضية في الجافا سكربت تسمح لنا أن نجري اختبارات، حل الرياضيات، ربط مجموعة كلمات ونصوص مع بعضهم البعض، وأشياء أخرى.</p> + +<p dir="rtl">إذا لم تقم بذلك بالفعل ، احفظ الكود الخاص بك، أعد تحميل الصفحة في المتصفح الخاص بك، وافتح <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console </a>.بعد ذلك نستطيع الكتابة كما في المثال التالي __ اكتب كل واحد من أعمدة "المثال" كما هو موضح تمامًا، اضغط <kbd>Return</kbd>/<kbd>Enter</kbd> بعد كل واحد، وانظر ما هي النتائج التي ظهرت :</p> + +<p dir="rtl">أوﻻً دعنا نلقى نظرة على العمليات الحسابية ، على سبيل المثال :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">العملية</th> + <th scope="col">المسمى</th> + <th scope="col">مثال</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>الجمع</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>الطرح</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>الضرب</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>القسمة</td> + <td><code>10 / 5</code></td> + </tr> + </tbody> +</table> + +<p dir="rtl">أيضًا تستطيع استخدام علامة <code>+</code> لربط النصوص معًا ( في البرمجة، هذا يسمى التسلسل). جرب إدخال السطور التالية ، واحدًا تلو الآخر :</p> + +<pre class="brush: js notranslate">let name = 'Bingo'; +name; +let hello = ' says hello!'; +hello; +let greeting = name + hello; +greeting;</pre> + +<p dir="rtl">هناك أيضًا بعض العمليات الحسابية المختصرة ، تسمى زيادة <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">عوامل التخصيص</a>. على سبيل المثال ، إذا أردت إضافة نص جديد لنص موجود بالفعل وترى النتيجة ، تستطيع كتابة هذا :</p> + +<pre class="brush: js notranslate">name += ' says hello!';</pre> + +<p dir="rtl">هذا يعادل :</p> + +<pre class="brush: js notranslate">name = name + ' says hello!';</pre> + +<p dir="rtl">عند استخدام حالة صح/ خطأ ( على سبيل المثال بداخل الحاﻻت الشرطية __ انظر {{anch("Conditionals", "below")}} ) نستخدم <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">عمليات المقارنة</a> . على سبيل المثال :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">العملية</th> + <th scope="col">المسمى</th> + <th scope="col">مثال</th> + </tr> + <tr> + <td><code>===</code></td> + <td>المساواة الصارمة(هل هي نفسها بالضبط؟)</td> + <td> + <pre class="brush: js notranslate"> +5 === 2 + 4 // false +'Chris' === 'Bob' // false +5 === 2 + 3 // true +2 === '2' // false; number versus string</pre> + </td> + </tr> + <tr> + <td><code>!==</code></td> + <td>عدم المساواة (أليست هي نفسها؟)</td> + <td> + <pre class="brush: js notranslate"> +5 !== 2 + 4 // true +'Chris' !== 'Bob' // true +5 !== 2 + 3 // false +2 !== '2' // true; number versus string</pre> + </td> + </tr> + <tr> + <td><code><</code></td> + <td>أقل من</td> + <td> + <pre class="brush: js notranslate"> +6 < 10 // true +20 < 10 // false</pre> + </td> + </tr> + <tr> + <td><code>></code></td> + <td>أكبر من</td> + <td> + <pre class="brush: js notranslate"> +6 > 10 // false +20 > 10 // true</pre> + </td> + </tr> + </thead> +</table> + +<h3 dir="rtl" id="الحاﻻت_الشرطية">الحاﻻت الشرطية</h3> + +<p dir="rtl">بالعودة إلى دالة <code>checkGuess()</code> ، أعتقد أنه من المكن قول أننا ﻻ نريدها ﻹظهار رسالة placeholder . نحن نريدها لفحص هل تخمين اللاعب صحيح أم غير صحيح، واﻹستجابة بشكل مناسب.</p> + +<p dir="rtl">في هذه النقطة، استبدل دالة <code>checkGuess()</code> بهذا بدلًا من ذلك :</p> + +<pre class="brush: js notranslate">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(); +}</pre> + +<p dir="rtl">هذا كثير من التعليمات البرمجية __ حسنًا ! دعنا ننتقل إلى كل قسم وشرح ما يفعله.</p> + +<ul> + <li dir="rtl">السطر اﻷول (سطر رقم 2 في اﻷعلى) يعلن عن متغير يسمى <code>userGuess</code> ويهييء قيمته إلى القيمة المدخلة في حقل النصوص. أيضًا نستطيع أخذ هذه القيمة بواسطة دالة <code>Number()</code> ، فقط للتأكد من أن القيمة بالفعل رقم .</li> + <li dir="rtl">في السطر التالي، سنقابل أول كود من الحالات الشرطية (سطر 3-5 في اﻷعلى). كود الحالة الشرطية يسمح لك بتشغيل الكود بشكل انتقائي، بالاعتماد على حالة شرطية مؤكدة صح أو خطأ. يشبه هذا قليلًا الدالة، لكنه ليس بدالة. ببساطة لبدء كود الحالة الشرطية نكتب الكلمة المفتاحية <code>if</code> ، ثم بعض اﻷقواس، ثم اﻷقواس المعقوفة. بداخل اﻷقواس نكتب الشرط. إذا كان الشرط صحيح <code>true</code> ، سوف يشغل الكود بداخل اﻷقواس المعقوفة. وإذا كان غير ذلك ، لن ينفذ شيء وسينتقل لتشغيل باقي الكود. في حالتنا هذه الشرط سوف يتحقق ما إذا كان متغير <code>guessCount</code> يساوي 1 (أي ما إذا كانت هذه هي المرة اﻷولى للاعب أم ﻻ):</li> + <li> + <pre class="brush: js notranslate" dir="rtl">guessCount === 1</pre> + </li> +</ul> + +<p dir="rtl">إذا كان اﻷمر كذلك، فإننا نجعل نص فقرة التخمينات مساويًا لــ "<samp>Previous guesses: </samp>". وإذا كان غير ذلك ، فلن نفعل.</p> + +<ul> + <li dir="rtl">السطر 6 يضيف قيمة <code>userGuess</code><span> في نهاية الفقرة </span><code>guesses</code><span> ، باﻹضافة إلى مسافة لذلك ستكون هناك مسافة بين كل تخمين .</span></li> + <li dir="rtl">الكود التالي (السطور من 8-24 في اﻷعلى) تقوم بالقليل من المراجعات : + <ul> + <li>أولًا <code>if(){}</code> تفحص ما إذا كان تخمين المستخدم مساويًا لــ <code>randomNumber</code> الذي عرفناه في أعلى كود الجافاسكربت. إذا صحيحًا إذا اللاعب قام بالتخمين الصحيح وربح في هذه اللعبة، لذلك يتم عرض رسالة التهاني ، ويتم مسح مربع النص الذي يحتوي على تخمين عالي/منخفض، ويتم تشغيل دالة <code>setGameOver()</code> التي سنشرحها فيما بعد.</li> + <li>اﻵن لدينا حالة شرطية أخرى باستخدام <code>else if(){}</code>. حيث إنها تفحص ما إذا كانت هذه المرة هي آخر مرة للاعب أم ﻻ. إذا كانت آخر مرة فإن هذا البرنامج يفعل نفس اﻷشياء في الكود السابق، مع عرض رسالة انتهت اللعبة بدلاً من رسالة التهنئة.</li> + <li>الجزء اﻷخير يحتوي على ( <code>else { }</code> )الذي يحتوي على الكود الذي يعمل فقط في حالة الحاﻻت الشرطية( مثل أن اللاعب لم يخمن الرقم الصحيح، ولكن تبقى له المزيد من التخمينات). في هذه الحالة سوف نخبره بأن تخمينه خطأ ، ثم نشغل حالة شرطية أخرى حيث تفحص ما إذا كان التخمين عالى أو أقل من اﻹجابة، وعرض رسالة أخرى تخبر اللاعب إذا كان تخمينه أعلى أو أقل .</li> + </ul> + </li> + <li dir="rtl">آخر ثلاثة أسطر في هذه الدالة ( السطور من 26-28 في الأعلى)تكون مستعدة ﻹرسال التخمين. لقد أضفنا 1 لمتغير <code>guessCount</code> لحساب استهلاك اللاعب عدد أدواره(<code>++</code> هي عملية زيادة__ أي زيادة بمقدار 1 في المرة)، وتفريغ قيم حقل النصوص ، والاستعداد للدور القادم من التخمين .</li> +</ul> + +<h3 dir="rtl" id="اﻷحداث">اﻷحداث</h3> + +<p>At this point we have a nicely implemented <code>checkGuess()</code> 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 <strong>event listeners</strong>, and the blocks of code that run in response to the event firing are called <strong>event handlers</strong>.</p> + +<p>Add the following line below your <code>checkGuess()</code> function:</p> + +<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre> + +<p>Here we are adding an event listener to the <code>guessSubmit</code> button. This is a method that takes two input values (called <em>arguments</em>) — the type of event we are listening out for (in this case <code>click</code>) as a string, and the code we want to run when the event occurs (in this case the <code>checkGuess()</code> function). Note that we don't need to specify the parentheses when writing it inside {{domxref("EventTarget.addEventListener", "addEventListener()")}}).</p> + +<p>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 <code>setGameOver()</code> function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.</p> + +<h3 id="Finishing_the_game_functionality">Finishing the game functionality</h3> + +<p>Let's add that <code>setGameOver()</code> function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:</p> + +<pre class="brush: js notranslate">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); +}</pre> + +<ul> + <li>The first two lines disable the form text input and button by setting their disabled properties to <code>true</code>. This is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up.</li> + <li>The next three lines generate a new {{htmlelement("button")}} element, set its text label to "<samp>Start new game</samp>", and add it to the bottom of our existing HTML.</li> + <li>The final line sets an event listener on our new button so that when it is clicked, a function called <code>resetGame()</code> is run.</li> +</ul> + +<p>Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:</p> + +<pre class="brush: js notranslate">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; +}</pre> + +<p>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:</p> + +<ul> + <li>Puts the <code>guessCount</code> back down to 1.</li> + <li>Clears all the information paragraphs.</li> + <li>Removes the reset button from our code.</li> + <li>Enables the form elements, and empties and focuses the text field, ready for a new guess to be entered.</li> + <li>Removes the background color from the <code>lastResult</code> paragraph.</li> + <li>Generates a new random number so that you are not just guessing the same number again!</li> +</ul> + +<p><strong>At this point you should have a fully working (simple) game — congratulations!</strong></p> + +<p>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.</p> + +<h3 id="Loops">Loops</h3> + +<p>One part of the above code that we need to take a more detailed look at is the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> 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.</p> + +<p>To start with, go to your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools JavaScript console</a> again, and enter the following:</p> + +<pre class="brush: js notranslate">for (var i = 1 ; i < 21 ; i++) { console.log(i) }</pre> + +<p>What happened? The numbers <samp>1</samp> to <samp>20</samp> were printed out in your console. This is because of the loop. A <code>for</code> loop takes three input values (arguments):</p> + +<ol> + <li><strong>A starting value</strong>: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter <code>i</code> with any name you like too, but <code>i</code> is used as a convention because it's short and easy to remember.</li> + <li><strong>An exit condition</strong>: Here we have specified <code>i < 21</code> — the loop will keep going until <code>i</code> is no longer less than 21. When <code>i</code> reaches 21, the loop will no longer run.</li> + <li><strong>An incrementor</strong>: We have specified <code>i++</code>, which means "add 1 to i". The loop will run once for every value of <code>i</code>, until <code>i</code> reaches a value of 21 (as discussed above). In this case, we are simply printing the value of <code>i</code> out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.</li> +</ol> + +<p>Now let's look at the loop in our number guessing game — the following can be found inside the <code>resetGame()</code> function:</p> + +<pre class="brush: js notranslate">var resetParas = document.querySelectorAll('.resultParas p'); +for (var i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; +}</pre> + +<p>This code creates a variable containing a list of all the paragraphs inside <code><div class="resultParas"></code> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.</p> + +<h3 id="A_small_discussion_on_objects">A small discussion on objects</h3> + +<p>Let's add one more final improvement before we get to this discussion. Add the following line just below the <code>var resetButton;</code> line near the top of your JavaScript, then save your file:</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>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.</p> + +<p>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.</p> + +<p>In this particular case, we first created a <code>guessField</code> 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:</p> + +<pre class="brush: js notranslate">var guessField = document.querySelector('.guessField');</pre> + +<p>To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. <code>querySelector()</code> takes one piece of information — a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a> that selects the element you want a reference to.</p> + +<p>Because <code>guessField</code> 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 <code>focus()</code>, so we can now use this line to focus the text input:</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>Variables that don't contain references to form elements won't have <code>focus()</code> available to them. For example, the <code>guesses</code> variable contains a reference to a {{htmlelement("p")}} element, and <code>guessCount</code> contains a number.</p> + +<h3 id="Playing_with_browser_objects">Playing with browser objects</h3> + +<p>Let's play with some browser objects a bit.</p> + +<ol> + <li>First of all, open up your program in a browser.</li> + <li>Next, open your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>, and make sure the JavaScript console tab is open.</li> + <li>Type in <code>guessField</code> 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!</li> + <li>Now type in the following: + <pre class="brush: js notranslate">guessField.value = 'Hello';</pre> + The <code>value</code> 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!</li> + <li>Now try typing in <code>guesses</code> and pressing return. The console will show you that the variable contains a {{htmlelement("p")}} element.</li> + <li>Now try entering the following line: + <pre class="brush: js notranslate">guesses.value</pre> + The browser will return <samp>undefined</samp>, because paragraphs don't have the <code>value</code> property.</li> + <li>To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this: + <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre> + </li> + <li>Now for some fun stuff. Try entering the below lines, one by one: + <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow'; +guesses.style.fontSize = '200%'; +guesses.style.padding = '10px'; +guesses.style.boxShadow = '3px 3px 6px black';</pre> + Every element on a page has a <code>style</code> 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.</li> +</ol> + +<h2 id="Finished_for_now...">Finished for now...</h2> + +<p>So that's it for building the example. You got to the end — well done! Try your final code out, or <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">play with our finished version here</a>. If you can't get the example to work, check it against the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">source code</a>.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p> + +<h2 dir="rtl" id="في_هذه_الوحدة">في هذه الوحدة</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">البداية في الجافا سكربت</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> diff --git a/files/ar/learn/javascript/first_steps/index.html b/files/ar/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..66c8c8c2f8 --- /dev/null +++ b/files/ar/learn/javascript/first_steps/index.html @@ -0,0 +1,70 @@ +--- +title: الخطوات الأولى مع الجافاسكربت +slug: Learn/JavaScript/First_steps +tags: + - Landing + - Module + - NeedsTranslation + - TopicStub + - 'l10n:priority' + - أرقام + - برمجةسكربتات + - جافاسكربت + - دروس + - رياضيات + - عمليات حسابية + - مبتدئ + - متغيرات + - مصفوفات + - مقالة + - نصوص + - واجب +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary" dir="rtl">في اول دروس تعلم الجافاسكربت. ينبغي ان نجاوب عن اسئلة أساسية مثل "ماهي الجافاسكربت؟", "ماهي شكلها؟" و "مالذي تستطيع لغة الجافاسكربت عمله؟", قبل ما نبدأ الأمثلة العملية لكتابة اكواد الجافاسكربت. بعد ذلك سنناقش الأركان الأساسية بالتفصيل. مثل المتغيرات, النصوص, الأرقام و المصفوفات.</p> + +<h2 dir="rtl" id="متطلبات_مسبقة">متطلبات مسبقة</h2> + +<p dir="rtl">قبل ان تبدأ بهذه الدروس. لا تحتاج الى اي معرفة بالجافاسكربت, لكنك تحتاج خبرة بسيطة بكتابة اكواد HTML و CSS. ننصحك بهذه الدروس قبل البدء بتعلم الجافاسكربت:</p> + +<ul dir="rtl"> + <li><a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web">البدء مع الويب</a> (الذي يحتوي على <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/JavaScript_basics">مقدمة بسيطة بالجافاسكربت</a>).</li> + <li><a href="https://developer.mozilla.org/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة للغة الترميز الفائق</a>.</li> + <li><a href="https://developer.mozilla.org/ar/docs/Learn/CSS/Introduction_to_CSS">مقدمة لـ CSS</a>.</li> +</ul> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة:</strong></p> +اذا كنت لا تستخدم كمبيوتر, لابتوب او اي جهاز لا يسمح لك بإنشاء ملفات جديدة يمكنك تجربة (اغلب) الاكواد بإستخدام احد الخدمات السحابية لكتابة الاكواد مثل<a href="http://jsbin.com/"> JSBin</a> أو <a href="https://thimble.mozilla.org/">Thimble</a></div> + +<h2 dir="rtl" id="دروس">دروس</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">ما هي الجافاسكربت؟</a></dt> + <dd dir="rtl">اهلا بك في دورة جافاسكربت للمبتدئين من MDN! في اول درس في هذه الدورة سنلقي نظرة على الجافاسكربت. سنجاوب بعض الاسئلة بشكل بسيط مثل "ماهي جافاسكربت؟", "ماذا تعمل الجافاسكربت؟", لنتأكد بأن تأخذ راحتك مع اللغة.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">نظرة اولية على الجافاسكربت</a></dt> + <dd dir="rtl">الآن تعلمت الجافاسكربت من الناحية النظرية, وماذا يمكننا العمل بها. لنلقي نظرة على المميزات الأساسية بالجافاسكربت من الناحية العملية. في هذا الدرس سنبرمج لعبة "توقّع الرقم". خطوة بخطوة.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">مالذي حصل؟ اصلاح اخطاء الجافاسكربت</a></dt> + <dd dir="rtl">عندما برمجت لعبة "توقّع الرقم" في الدرس السابق. ربما وجدت انها لا تعمل! لا تخف. في هذا الدرس سنقوم بتعلم كيف تبحث عن الاخطاء في لعبتك وكيفية اصلاحها.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">تخزين المعلومات التي تحتاجها ــ المتغيرات</a></dt> + <dd dir="rtl">بعد قراءة الدروس الاخيرة ينبغي ان تعلم الآن ماهي الجافاسكربت و ماذا يمكنها ان تعمل من اجلك وكيف يمكنك استخدامها مع تقنيات الويب الأخرى وما هي مميزاتها الرئيسية بشكل مبسط. في هذا الدرس سنتعلم أحد أهم و أبسط الأشياء، المتغيرات. </dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">الرياضيات بالجافاسكربت ــ الأرقام والعمليات الحسابية</a></dt> + <dd dir="rtl">عند هذه المرحلة من الدورة ينبغي أن نناقش الرياضيات في الجافاسكربت, كيف يمكننا إجراء العمليات الحسابية باللغة.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">التعامل مع النصوص ــ النصوص بالجافاسكربت </a></dt> + <dd dir="rtl">بعد ذلك سنلقي نظرة على النصوص. في هذا الدرس ستتعلم كيف تتعامل مع النصوص. مثل انشاء النصوص. كتابة بعض الرموز. و جمع اكثر من نص مع بعض.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">دوال للنصوص مفيدة</a></dt> + <dd dir="rtl">بما اننا تعلمنا اساسيات التعامل مع النصوص. لننتقل الى المرحلة التالية ولنفكر ماذا يمكننا ان نعمل بالنصوص. مثلا لنجد طول نص, دمج النصوص, استبدال احد الاحرف بحرف اخر. وغيرها.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">المصفوفات</a></dt> + <dd dir="rtl">في آخر درس في هذه الدورة البسيطة، سنلقي نظرة على المصفوفات. طريقة مثالية لجمع بيانات تحت اسم متغير واحد. سنتعلم لماذا هذا مفيد، كيف انشاءها، الحصول على احد البيانات الموجودة، اضافة المزيد من البيانات، حذف بعض البيانات والمزيد</dd> +</dl> + +<h2 dir="rtl" id="الواجبات">الواجبات</h2> + +<p dir="rtl">في هذا الواجب ستختبر فهمك للدروس السابقة</p> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">مصنع القصص الظريفة</a></dt> + <dd dir="rtl">في هذا الواجب سيطلب منك بإستخدام المعرفة التي اكتسبتها من الدروس السابقة كتابة برنامج يكتب قصة ظريفة عشوائية. استمتع!</dd> +</dl> 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 new file mode 100644 index 0000000000..fac2541302 --- /dev/null +++ b/files/ar/learn/javascript/first_steps/useful_string_methods/index.html @@ -0,0 +1,684 @@ +--- +title: بعض الخصائص المفيدة للسلاسل الحرفية +slug: Learn/JavaScript/First_steps/Useful_string_methods +tags: + - استبدال + - تعلم + - تقطيع + - جافا سكربت + - حالة + - حرف صغير + - حرف كبير + - سلسلة حرفية + - مبتديء + - مقال +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +--- +<div dir="rtl">{{LearnSidebar}}</div> + +<div dir="rtl">{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary" dir="rtl">الآن بعدما تعلمنا أساسيات السلاسل، دعنا نبدأ في التفكير وتجربة العمليات التي يمكننا القيام بها على هذه السلاسل، مثل إيجاد طول السلسلة، ربط السلاسل وأيضًا طريقة تقسيمها إلى أجزاء، ومعرفة كيفية استبدال حرف بآخر، وأشياء أخرى.</p> + +<table class="learn-box standard-table" dir="rtl"> + <tbody> + <tr> + <th scope="row">المتطلبات اﻷساسية:</th> + <td>أساسيات استخدام الحاسوب ، فهم أساسيات HTML و CSS ، وفهم ماهية الجافاسكربت.</td> + </tr> + <tr> + <th scope="row">الهدف:</th> + <td>فهم أن سلاسل الحروف strings هو عبارة عن كائنات ، وتعلم كيفية استخدام الطرق المتاحة لهذه الكائنات لمعالجة سلاسل الحروف strings .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="السلاسل_ككائنات">السلاسل ككائنات</h2> + +<p dir="rtl" id="Useful_string_methods">معظم اﻷشياء في الجافا سكريبت هي كائنات. فعند إنشاء سلسلة، على سبيل المثال بإستخدام :</p> + +<pre class="brush: js notranslate" dir="rtl">let string = 'This is my string';</pre> + +<p dir="rtl">يصبح المتغير الخاص بك مثل كائن سلسلة، وبناءًا على ذلك يصبح لديه العديد من الخصائص والأساليب المتاحة له والتي يمكن تنفيذها عليه. يمكنك رؤية ذلك إذا انتقلت إلى صفحة الكائن {{jsxref("String")}} وألقيت نظرة على القائمة الموجودة في هذه الصفحة بالأسفل.</p> + +<p dir="rtl"><strong>اﻵن وقبل أن يبدأ عقلك في التوهان أو التشتيت، لا تقلق!</strong> أنت لست بحاجة لمعرفة هذه اﻷشياء في وقت مبكر من رحلة تعلمك للجافا سكريبت. وهناك عدد قليل من الاحتمالات لإستخدامك هذا كثيرًا والذي سننظر إليه هنا في هذا المقال.</p> + +<p dir="rtl">دعنا نجرب بعض اﻷمثلة داخل <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">الكونسول الخاص بالمتصفح</a>.</p> + +<h3 dir="rtl" id="إيجاد_طول_السلسلة">إيجاد طول السلسلة</h3> + +<p dir="rtl">هذا سهل للغاية — أنت ببساطة تستخدم هذه الخاصية لإيجاد طول السلسلة {{jsxref("String.prototype.length", "length")}} حاول إتباع الأسطر التالية :</p> + +<pre class="brush: js notranslate" dir="rtl">// هنا نقوم بإنشاء متغير يحتوي على سلسلة نصية +let browserType = 'العربية'; + +// هنا نقوم بكتابة اسم المتغير متبوعًا بالخاصية لمعرفة طول القيمة الموجودة داخل المتغير +browserType.length;</pre> + +<p dir="rtl">النتيجة ستكون 7, ﻷن كلمة "العربية" تحتوي على 7 أحرف. وهذه الخاصية مفيدة لعدة أسباب؛ على سبيل المثال، قد ترغب في العثور على أطول سلسلة نصية من اﻷسماء حتى تتمكن من عرضها بترتيب الطول، أو إخبار المستخدم أن اسم المستخدم الذي قام بإدخاله في حقل النموذج (حقل الإدخال) هو طويل جدًا. (في حالة تجاوز الاسم طول معين.)</p> + +<h3 dir="rtl" id="استرجاع_استدعاء_حرف_سلسلة_معين">استرجاع (استدعاء) حرف سلسلة معين</h3> + +<p dir="rtl">في ملاحظة ذات صلة، يمكن إرجاع أي حرف داخل السلسلة باستخدام <strong>الاقواس المربعة</strong> — هذا يعني إدراج أو تضمين اﻷقواس المربعة (<code>[]</code>) في نهاية اسم المتغيرالخاص بك. وفي داخل اﻷقواس ستقوم بكتابة رقم الحرف الذي تريد إرجاعه، لذا على سبيل المثال إذا كنت تريد إرجاع الحرف اﻷول فستقوم بإتباع الكود التالي:</p> + +<pre class="brush: js notranslate" dir="rtl">browserType[0];</pre> + +<p dir="rtl">تذكر: الكمبيوتر يبدأ العد من 0 وليس1! ويمكنك استخدام هذا على سبيل المثال للعثور على الحرف اﻷول من السلسلة وترتيبها أبجديًا.</p> + +<p dir="rtl">لكي نستدعي الحرف اﻷخير ﻷي سلسلة حروف ، سوف نستخدم السطر التالي , باﻹضافة إلى استخدام خاصية <code>length</code> التي ذكرناها في اﻷعلى:</p> + +<pre class="brush: js notranslate" dir="rtl">browserType[browserType.length-1];</pre> + +<p dir="rtl">إن طول "mozilla" هو 7 حروف , ولكن ﻷن العد يبدأ من 0 , فإن موقع الحرف هو 6; باستخدام <code>length-1</code> يعطينا الحرف اﻷخير.</p> + +<h3 dir="rtl" id="إيجاد_سلسلة_حروف_فرعية_داخل_السلسلة_الرئيسية_واستخراجها">إيجاد سلسلة حروف فرعية داخل السلسلة الرئيسية واستخراجها</h3> + +<p dir="rtl">أحيانًا تريد أن تسدعي بعض الحروف الموجودة داخل السلسلة الكبيرة (<em>نقول بشكل عام إذا كانت سلسلة فرعية موجودة داخل السلسلة اﻷم </em>). نستطيع فعل هذا بواسطة استخدام طريقة {{jsxref("String.prototype.indexOf()", "indexOf()")}} , والتي تحتوي عامل {{glossary("parameter")}} — السلسلة الفرعية التي نريد أن نستدعيها.</p> + +<ol dir="rtl"> + <li>جرب هذا: + <pre class="brush: js notranslate">browserType.indexOf('zilla');</pre> + والنتيجة هي 2 , ﻷن سلسلة الحروف الفرعية "zilla" تبدأ من الموقع 2 (0, 1, 2 — أي 3 حروف) بداخل "mozilla". مثل هذا الكود من الممكن أن يستخدم لفلترة السلاسل الحرفية. على سبيل المثال , لدينا قائمة بالعديد من عنواين الويب ونريد أن نستدعي فقط العنوان الذي يحتوي كلمة "mozilla" .</li> +</ol> + +<ol dir="rtl" start="2"> + <li>هناك طريقة أخري لذلك , التي من الممكن أن تكون فعالة . جرب المثال التالي: + <pre class="brush: js notranslate">browserType.indexOf('vanilla');</pre> + يجب أن تكون النتيجة هي <code>-1</code> — هذا ﻷن سلسلة الحروف التي نبحث عنها في هذه الحالة , 'vanilla', غير موجودة في السلسلة الرئيسية.<br> + <br> + يمكن استخدام هذا ﻹيجاد كل حالات السلسلة حيث ﻻ تحتوي السلسلة الفرعية 'mozilla',( أو فعل ذلك باستخدام عامل النفي ، <code>!==</code>) : + + <pre class="brush: js notranslate">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 +}</pre> + </li> + <li>إذا علمت أين تبدأ السلسلة الفرعية داخل السلسلة الرئيسية , وتعلم الحرف اﻷخير الذي تريده ,فإن {{jsxref("String.prototype.slice()", "slice()")}} تستخدم لاستدعاءه . جرب المثال التالي: + <pre class="brush: js notranslate">browserType.slice(0,3);</pre> + النتيجة هي "moz" — البرامتر اﻷولparameter يشير إلى موقع الحرف الذي نريد أن نبدأ البحث من عنده , البرامتر الثاني parameterيشير إلى موقع الحرف الذي يوجد بعد آخر حرف تم استدعاءه. لذلك التقطيع slice يحدث بداية من الحرف اﻷول حتى الحرف اﻷخير لكنه ﻻ يشمل الحرف اﻷخير . في هذا المثال , من البداية 0 ، فإن البرامتر الثاني يساوي طول السلسلة التي نريد استدعائها.</li> + <li>أيضًا ، إذا أردت استدعاء كل الحروف المتبقية بعد حرف معين , فإننا ﻻ نحتاج البرامتر الثاني! بدلًا من ذلك نحتاج فقط موقع الحرف الذي نريد أن نستدعي الحروف المتبقية بعده. جرب المثال التالي: + <pre class="brush: js notranslate">browserType.slice(2);</pre> + والنتيجة هي "zilla" — وهذا ﻷن الحرف الذي رقمه 2 هو الحرف z ، وﻷننا لم نكتب البرامتر الثاني ، فإن النتيجة هي طباعة كل الحروف بعد هذا الحرف . </li> +</ol> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة </strong>: البرامتر الثاني parameter للــ <code>slice()</code> هو اختياري : إذا لم نكتبه ، فإن النتيجة تكون حتى نهاية السلسلة الرئيسية. أيضًا هناك خيار آخر ، راجع صفحة ; {{jsxref("String.prototype.slice()", "slice()")}} للاطلاع على المزيد حول slice.</p> +</div> + +<h3 dir="rtl" id="تغيير_حالة_الحروف">تغيير حالة الحروف</h3> + +<p dir="rtl">خاصية {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} و {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} تستخدم لتحويل الحروف لحروف صغيرة أو حروف كبيرة, على التوالي. وهذا مفيد حيث على سبيل المثال إذا أردنا تهيئة البيانات التي أدخلها المستخدم قبل حفظها في قاعدة البيانات . </p> + +<p dir="rtl">دعونا نجرب المثال التالي ونرى ما سيحدث:</p> + +<pre class="brush: js notranslate" dir="rtl">let radData = 'My NaMe Is HeSHam'; +radData.toLowerCase(); +radData.toUpperCase();</pre> + +<h3 dir="rtl" id="تحديث_أجزاء_من_السلسلة">تحديث أجزاء من السلسلة</h3> + +<p dir="rtl">نستطيع استبدال سلسلة حروف بأخرى داخل السلسلة الرئيسية باستخدام خاصية .{{jsxref("String.prototype.replace()", "replace()")}} إنها خاصية بسيطة جدًا ، ولكنها تملك خيارات متقدمة سوف نستخدمها ولكن ليس اﻵن .</p> + +<p dir="rtl">هذه الخاصية لها 2 بارامتر ( الحروف الذي تريد استبدالها, والحروف الجديدة). جرب هذا المثال:</p> + +<pre class="brush: js notranslate" dir="rtl">browserType.replace('moz','van');</pre> + +<p dir="rtl">والنتيجة هي طباعة كلمة "vanilla" في الكونسول. ولكن إذا تفحصنا قيمة . <code>browserType</code>,فإنها ما تزال "mozilla" . لتحديث قيمة المتغير <code>browserType</code> حقيقة, سوف نحتاج إلى تحديد قيمة المتغير للقيمة التي نتجت لدينا ؛ حيث أن قيمة المتغير ﻻ تتحدث تلقائيًا . لذلك نحن بحاجة لكتابة هذا الكود: </p> + +<pre class="brush: js notranslate">browserType = browserType.replace('moz','van');</pre> + +<h2 dir="rtl" id="أمثلة_عملية_للتعلم">أمثلة عملية للتعلم</h2> + +<p dir="rtl">في هذا القسم سوف نتعلم كتابة كود لمعالجة السلاسل الحرفية. في كل مثال باﻷسفل , لدينا مصفوفة من العبارات ، و حلقات تكرارية لتنفيذ القيم في المصفوفة وعرضها في قائمة نقطية. ﻻ تحتاج إلى معرفة المصفوفات والحلقات التكرارية اﻵن ( سوف تُشرح في مقالات مستقبلية). كل ما تحتاجه في كل مثال هو كتابة الكود الذي سوف يعرض العبارات في الهيئة التي نريدها.</p> + +<p dir="rtl">كل مثال يحتوي على زر "reset" حيث يمكن إرجاع الكود إلى حالته اﻷصلية في حالة الخطأ أو أن الحل لم يعمل جيدًا ، وهناك زر "Show solution" يمكن الضغط عليه لترى اﻹجابة المحتملة إذا واجهتك مشكلة بالفعل.</p> + +<h3 dir="rtl" id="معالجة_رسائل_التهنئة">معالجة رسائل التهنئة</h3> + +<p dir="rtl">في أول تمرين سوف نبدأ بشيء بسيط — حيث لدينا مصفوفة من رسائل التهنئة ، ولكننا نريد أن نرتبها في قائمة مثل رسائل العيد. سوف نستخدم الحاﻻت الشرطية <code>if( ... )</code> ، لطباعة الجمل في قائمة إذا كانت رسائل تهنئة.</p> + +<ol dir="rtl"> + <li>نفكر أوﻻً حول كيفية معرفة رسائل التهنئة في كل عبارة. هل هذه العبارة موجودة في الرسائل ، وما هي الطريقة التي نستخدمها لمعرفة ذلك ؟</li> + <li>سوف نحتاج إلى كتابة حالة شرطية .</li> + <li>تلميح: في هذا المثال من الفيد اختبار الطريقة لمعرفة النتيجة الصحيحة.</li> +</ol> + +<div class="hidden" dir="rtl"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 290px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let greetings = ['Happy Birthday!', + 'Happy eid Day', + 'A happy Eid to all the family', + 'You\'re all I want for Eid', + 'Get well soon']; + +for (let i = 0; i < greetings.length; i++) { + let input = greetings[i]; + // Your conditional test needs to go inside the parentheses + // in the line below, replacing what's currently there + if (greetings[i]) { + let listItem = document.createElement('li'); + listItem.textContent = input; + list.appendChild(listItem); + } +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet greetings = [\'Happy Birthday!\',' + +'\n \'Happy Eid Day\',' + +'\n \'A happy Eid to all the family\',' + +'\n \'You\\\'re all I want for Eid\',' + +'\n \'Get well soon\'];' + +'\n' + +'\nfor (let i = 0; i < greetings.length; i++) {' + +'\n let input = greetings[i];' + +'\n if (greetings[i].indexOf(\'Christmas\') !== -1) {' + +'\n let result = input;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n }' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p dir="rtl">{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="إصلاح_الحروف_الكبيرة">إصلاح الحروف الكبيرة</h3> + +<p dir="rtl">في هذا التمرين لدينا أسماء المدن في المملكة المتحدة، ولكن الحروف الكبيرة مكتوبة بشكل عبثي . نريد منك تغييرها للحروف الصغيرة، ماعدا الحرف اﻷول يكون كبير . وأفضل طريق لعمل ذلك هو :</p> + +<ol dir="rtl"> + <li>حول كل كلمة في متغير <code>input</code> للحروف الصغيرة وخزنها في متغير جديد.</li> + <li>اقتنص الحرف اﻷول من كل كلمة في هذا المتغير الجديد وخزنه في متغير آخر.</li> + <li>استخدم المتغير اﻷخير لاستبدال الحرف اﻷول من الكلمة بحرف كبير. وخزن نتيجة عملية الاستبدال لمتغير جديد آخر.</li> + <li>غيِّر قيمة متغير <code>result</code> لتساوي النتيجة النهائية.</li> +</ol> + +<div class="note" dir="rtl"> +<p><strong>ملحوظة: </strong>البرامتر الخاص بالطريقة المستخدمة ليس فقط الحروف ، بل يمكن أن يكون متغير أيضًا .</p> +</div> + +<div class="hidden" dir="rtl"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 250px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL']; + +for (let i = 0; i < cities.length; i++) { + let input = cities[i]; + // write your code just below here + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' + +'\n' + +'\nfor (let i = 0; i < cities.length; i++) {' + +'\n let input = cities[i];' + +'\n let lower = input.toLowerCase();' + +'\n let firstLetter = lower.slice(0,1);' + +'\n let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' + +'\n let result = capitalized;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p dir="rtl">{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="عمل_عبارة_جديدة_من_العبارة_اﻷصلية">عمل عبارة جديدة من العبارة اﻷصلية</h3> + +<p dir="rtl">في هذا التمرين اﻷخير ، المصفوفة تحتوي على مجموعة من العبارات التي تحتوي معلومات عن محطات القطار في شمال انجلترا. هذه الكلمات تحتوي على ثلاثة حروف لكود المحطة ، متبوعًا بكود القطار، متبوعًا بالفاصلة المنقوطة، متبوعًا اسم المحطة. على سبيل المثال:</p> + +<pre dir="rtl">MAN675847583748sjt567654;Manchester Piccadilly</pre> + +<p dir="rtl">نريد استخراج كود المحطة والاسم ، ووضعهم جميعًا في عبارة واحدة بالهيئة التالية:</p> + +<pre dir="rtl">MAN: Manchester Piccadilly</pre> + +<p dir="rtl">نقترح أن تتبع هذه الخطوات:</p> + +<ol dir="rtl"> + <li>استخرج الثلاثة أحرف لكود المحطة وخزنه في متغير جديد.</li> + <li>أوجد رقم موقع حرف الفاصلة المنقوطة ; .</li> + <li>استخرج اسم المحطة باستخدام رقم موقع الفاصلة المنقوطة كنقطة مرجعية ، وخزنه في متغير جديد .</li> + <li>اربط المتغيرين الجديدين مع العبارة لعمل عبارة جديدة .</li> + <li>غيِّر قيمة المتغير <code>result</code> لتساوي العبارة النهائية، وليست العبارة الأصلية <code>input</code>.</li> +</ol> + +<div class="hidden" dir="rtl"> +<h6 id="Playable_code_3">Playable code 3</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 285px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let stations = ['MAN675847583748sjt567654;Manchester Piccadilly', + 'GNF576746573fhdg4737dh4;Greenfield', + 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street', + 'SYB4f65hf75f736463;Stalybridge', + 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield']; + +for (let i = 0; i < stations.length; i++) { + let input = stations[i]; + // write your code just below here + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' + +'\n \'GNF576746573fhdg4737dh4;Greenfield\',' + +'\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' + +'\n \'SYB4f65hf75f736463;Stalybridge\',' + +'\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' + +'\n' + +'\nfor (let i = 0; i < stations.length; i++) {' + +'\n let input = stations[i];' + +'\n let code = input.slice(0,3);' + +'\n let semiC = input.indexOf(\';\');' + +'\n let name = input.slice(semiC + 1);' + +'\n let result = code + \': \' + name;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p dir="rtl">{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 dir="rtl" id="اختبر_مهاراتك!">اختبر مهاراتك!</h2> + +<p dir="rtl">لقد وصلنا لنهاية هذا المقال. ولكن هل تستطيع أن تتذكر المعلومات المهمة؟ تستطيع أن تجد بعض الاختبارات لتثبت هذه المعلومات في الذاكرة قبل أن تذهب __ <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">اختبر مهاراتك : السلاسل الحرفية</a>.</p> + +<h2 dir="rtl" id="الخاتمة">الخاتمة</h2> + +<p dir="rtl">ﻻ نستطيع الهروب من الحقيقة بأنه القدرة على معالجة الكلمات والجُمَل في البرمجة هو في غاية اﻷهمية __ بخاصة في الجافا سكربت، مثل مواقع التواصل مع الناس. هذا المقال يعطيك اﻷساسيات التي تحتاج معرفتها حول معالجة سلاسل الحروف (العبارات). هذا يجب أن يفيدك جيدًا عند قراءة مواضيع معقدة في المستقبل. اﻵن لنذهب للنظر في النوع الرئيسي من البيانات التي نحتاج للتركيز عليها __ المصفوفات arrays .</p> + +<p dir="rtl">تمت بحمد الله.</p> + +<p dir="rtl">{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> + +<h2 dir="rtl" id="في_هذه_الوحدة">في هذه الوحدة</h2> + +<ul> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">بعض الخصائص المفيدة للسلاسل الحرفية</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> diff --git a/files/ar/learn/javascript/index.html b/files/ar/learn/javascript/index.html new file mode 100644 index 0000000000..6677754e3d --- /dev/null +++ b/files/ar/learn/javascript/index.html @@ -0,0 +1,58 @@ +--- +title: جافاسكريبت Javascript +slug: Learn/JavaScript +tags: + - Beginner + - CodingScripting + - JavaScript + - Landing + - NeedsTranslation + - Topic + - TopicStub + - جافاسكريبت + - ساعد في الترجمة + - مبتدئ +translation_of: Learn/JavaScript +--- +<p class="summary" dir="rtl">جافاسكريبت هي لغة برمجة تسمح لك بتوظيف أشياء أكثر تعقيدا في صفحات الويب -- في كل مرة يقوم فيها موقع بأكثر من مجرد عرض معلومات بسيطة ساكنة -- كعرض تغييرات وتحديثات للصفحة , خرائط تفاعلية , رسومات ثنائية او ثلاثية الابعاد متحركة ومتفاعل معها , التمرير في خزانات كبيرة من فيديوهات ... الخ. يمكنك بالتأكيد المراهنة على أن اللغة تطورت عما كانت عليه وهي دائما في تقدم مستمر.</p> + +<h2 dir="rtl" id="مسار_التعلم">مسار التعلم</h2> + +<p dir="rtl">لغة جافاسكربت تعتبر اكثر تعقيدا نظريا من التكنولوجيات التابعة لها من امثال HTML و CSS . قبل انطلاقك في تعلم جافاسكريبت , ينصحك اولا بان تصبح متعودا على هاتين التقنيتين اولا , وربما تقنيات اخرى ايضا. ابدا عن طريق المقالات و الدورات التالية :</p> + +<ul dir="rtl"> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">إنطلاقتك مع الانترنيت -الويب-</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">مقدمة الى HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">مقدمة الى CSS </a></li> +</ul> + +<p dir="rtl">المعرفة و الخبرة بلغات البرمجة السابقة يمكنه كذلك ان يساعدك</p> + +<p dir="rtl">بعد أن تصبح اكثر تعودا على مبادئ جافاسكريت . يمكنك ام تنطلق في مواضيع اكثر تعقيدا , مثال ذلك مايلي :</p> + +<ul dir="rtl"> + <li>جافاسكريبت بعمق <a href="/en-US/docs/Web/JavaScript/Guide">دليل جافاسكريبت</a></li> + <li><a href="/en-US/docs/Web/API"> واجهة تطبيقات HTML5</a></li> +</ul> + +<h2 dir="rtl" id="الوحدات">الوحدات</h2> + +<p dir="rtl">هذا الموضوع يحتوي على الوحدات التالية حسب الترتيب المقرح الانطلاق منه :</p> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps">الخطوات الأولى في جافاسكريب</a></dt> + <dd dir="rtl">في الوحدة الاولى , سنجيب عن بعض الاسئلة الجوهرية مثل ’ماهي جافاسكريبت؟’ , ’كيف تبدو اللغة؟’ و ’ماذا يمكنها ان تفعل’ , قبل الانطلاق الى تجربتك العملية الاولى في كتابة اللغة. بعد ذلك ننقاش مميزات اللغة بالتفصيل كالمتغيرات , السلاسل , الارقام و صفائف وتتظيمات البيانات</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Building_blocks">قواعد بناء و أساسيات لغة جافاسكريبت</a></dt> + <dd dir="rtl">في هذه الوحدة سنتابع تغطيتنا لكل مبادئ ومفاتيح لغة جافاسكريبت مع ادارة الانتباه الى اكثر طرق البرمجة شيوعا كالجمل الشرطية , الحلقات , الوظائف و الاحداث . لقد رأيت واستعملت هذه الاشياء من قبل في هذا الدرس لكن مررنا بها سريعا , هنا سندرسها بالتفصيل .</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects">تقديم الكائنات في جافاسكريبت</a></dt> + <dd dir="rtl">في لغة الجافاسكريبت معظم معظم العمل سيكون مع الاجسام , انطلاقات من اساسيات اللغة كالحلقات والسلاسل وصولا الى واجهات تطبيقات المتصفح المبنية بواسطة جافاسكريبت. يمكنك كتابة اجسامك لتشمل وتغلف الوظائف والمتغيرات في حزم فعالة. طبيعة جافاسكريبت الجسمية التوجيه مهمة جدا اذا اردت الذهاب بعيدا في تعلم اللغة و كتابة برامج اكثر فعالية , لهذا نوفر لك هذه الوحدة لتساعدك. هنا نعلمك الاجسام وطريقة البناء بالتفصيل , تعلم كيفية كتابة اجسامك الخاصة , شرح ماهية بيانات JSON وكيفية عملها مع بعض.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">تطبيقات واجهات الويب من جهة المستخدم</a></dt> + <dd dir="rtl">عند كتابة جافاسكربت لمواقع الويب او التطبيقات , لن تذهب بعيدا من دون الاحاطة بواجهات التطبيقات API , هذه الواجهات يجب ان تعمل على مختاف المتصفحات و انظمة التشغيل التي بمكن ان تستخدم الموقع , وحتى اذا كنت تجمع بياناتك من جهة اخرى.في هذه الوحدة سنتعرف على ماهية واجهات التطبيقات , وكيفية استعمال اشهرها التي ستمر على اسخدامها عند عملك في التطوير.</dd> +</dl> + +<h2 dir="rtl" id="أنظر_ايضا">أنظر ايضا</h2> + +<dl> + <dt dir="rtl"><a href="https://www.youtube.com/user/codingmath">الرياضيات المستعملة في البرمجة</a></dt> + <dt dir="rtl">سلسلة من الفيديوهات الممتازة لتعليمك الرياضيات التي تحتاجها لكي تصبح مبرمجا فعالا بواسطة <a href="https://twitter.com/bit101">Keith Peters</a>.</dt> +</dl> diff --git a/files/ar/learn/javascript/objects/basics/index.html b/files/ar/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..1d018b179b --- /dev/null +++ b/files/ar/learn/javascript/objects/basics/index.html @@ -0,0 +1,258 @@ +--- +title: اساسيات الكائن في جافاسكريبت +slug: Learn/JavaScript/Objects/Basics +translation_of: Learn/JavaScript/Objects/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> + +<p class="summary" dir="rtl">في المادة الأولى من هذا الدرس سنتطرق إلى كائنات الجافا سكريبت، ثم سنلقي نظرة على التركيبة الأساسية لكائن الجافاسكريبت، ومن ثم إعادة النظر في بعض الميزات التي سبق وأن درسناها في وقت سابق من هذه الدورة التدريبية. علينا التأكيد أن العديد من الميزات التي قمت بالفعل بالتعامل معها هي في الحقيقة كائنات.</p> + +<table class="learn-box standard-table" dir="rtl"> + <tbody> + <tr> + <th scope="row">المتطلبات الأساسية:</th> + <td><span style="display: none;"> </span><span style="display: none;"> </span>دراية لا بأس بها بخصوص الحاسوب، الإلمام بمبادئ وأساسيات HTML و CSS، وبطبيعة الحال التمكن من أساسيات الجافاسكريبت (شاهد <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> وأيضا <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>).<span style="display: none;"> </span><span style="display: none;"> </span></td> + </tr> + <tr> + <th scope="row">الهدف :</th> + <td>التمكن من فهم لغة البرمجة كائنية التوجه وكيف أن (" معظم الأشياء كائنات ") في الجافا سكريبت<br> + وأيضا الشروع في العمل مع كائنات الجافا سكريبت.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="أساسيات_الكائن"><strong>أساسيات الكائن</strong></h2> + +<div style="font-size: 15px; font-family: 'tahoma';"> +<p dir="rtl">أولا وقبل كل شيء، قم بتحميل نسخة من الملف التالي <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. هذا الملف يتضمن العنصر — {{HTMLElement("script")}} سنستخدمه في كتابة الكود الخاص بنا، وعنصر الإدخال {{HTMLElement("input")}} سنستخدمه لإدخال بعض التعليمات البرمجية، وبعض المتغيرات والوظائف لاستخراج النتائج من حقل المدخلات ووضعها في العنصر {{HTMLElement("p")}}. سنستخدم هذه العناصر كأساس، لدراسة أساسيات بناء الكائن.</p> + +<p dir="rtl">كما هو الحال مع الكثير من الأشياء في جافا سكريبت، إنشاء كائن غالباً ما يبدأ بتعريف وتهيئة متغير.<br> + حاول إدخال التعليمة البرمجية أدناه في الملف الخاص بك، ثم قم بحفظ وتحديث:</p> + +<pre class="brush: js">var person = {};</pre> + +<p dir="rtl">قم بإدخال person إلى حقل المدخلات الخاص بك واضغط على الزر button، لتحصل على النتيجة التالية:</p> + +<pre class="brush: js">[object Object]</pre> + +<p dir="rtl">تهانينا، لقد أنشأت للتو أول كائن خاص بك. أنجزت المهمة! لكن هذا كائن فارغ، دعونا نقوم بتحديث هذ الكائن ليصبح على هذا الشكل:</p> + +<pre class="brush: js">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] + '.'); + } +}; +</pre> + +<p dir="rtl">بعد الحفظ والتحديث، قم بإدخال التعليمات البرمجية التالية واحدة تلو الاخرى في حقل المدخلات الخاص بك:</p> + +<pre class="brush: js">person.name[0] +person.age +person.interests[1] +person.bio() +person.greeting() +</pre> + +<p dir="rtl">لقد حصلت الآن على بعض البيانات والوظائف من داخل الكائن الخاص بك، جميل! أصبحت الآن قادرا على الوصول إلى البعض من التركيبة الاساسية للكائن.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة </strong>: إذا واجهتك صعوبة في الحصول على هذا العمل، حاول مقارنة التعليمات البرمجية الخاصة بك مع النسخة لدينا، انظر <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (يمكنك ايضا <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). من الأخطاء الشائعة أثناء العمل مع الكائنات هو وضع فاصلة في نهاية آخر العضو — وهذا سوف يسبب خطأ.</p> +</div> + +<p dir="rtl">هذا ما يحدث هنا؟ لدينا كائن يتكون من عدة أعضاء، لكل واحد منهم اسماً (مثل name و age أعلاه)، وقيمة ( مثل ['Bob', 'Smith'] و 32). كل زوج (name: value) يجب أن يفصلا بفاصلة، والاسم والقيمة في كل حالة مفصولة بفاصلة منقوطة. فيما تكون دائماً، تركيبة الكائن الأساسية على هذا النحو :</p> + +<pre class="brush: js">var objectName = { + member1Name : member1Value, + member2Name : member2Value, + member3Name : member3Value +}</pre> + +<p dir="rtl">قيمة العضو في الكائن يمكن أن تكون أي شيء، في الكائن person لدينا سلسلة نصية، وقيمة رقمية، ومصفوفتان، ووظيفتان. العناصر الأربعة الأولى تسمى عناصر البيانات، ويشار إليها <strong>بخصائص الكائن </strong>(object properties). والعنصرين الأخيرين هما من الوظائف التي تسمح للكائن أن يفعل شيئا مع تلك البيانات، ويشار إليها <strong>بوظائف الكائن</strong> (object methods).</p> + +<p dir="rtl">يسمى هذا النوع من الكائنات بـ<strong> object literal</strong> — لقد كتبنا حرفيا محتويات الكائن إلى أن وصلنا إلى إنشائه. هذا على النقيض من الكائنات المبنية على الأصناف (classes)، والتي سوف نتطرق إليها في وقت لاحق.</p> + +<p dir="rtl">من الشائع جدا إنشاء كائن باستخدام object literal لنقل سلسلة من البيانات الهيكلية، البيانات المتصلة بطريقة ما، على سبيل المثال إرسال طلب إلى الخادم (server) لوضعها في قاعدة البيانات. إرسال كائن واحد سيكون أكثر كفاءة بكثير من إرسال عدة عناصر على حدة، وأسهل مقارنة بالعمل مع المصفوفة (Array)، حينما تريد تحديد عناصر فردية حسب الاسم.</p> + +<h2 dir="rtl" id="رمز_النقطة">رمز النقطة</h2> + +<p dir="rtl">أعلاه، يمكنك الوصول لخصائص الكائن ووظائفه باستخدام رمز النقطة.<br> + اسم الكائن (person) بمثابة <strong>namespace</strong> - يجب أن يتم ادراجه أولا قبل الوصول إلى أي شيء <strong>مغلف</strong> داخله. تليه النقطة، ثم يليها العنصر الذي تريد الوصول إليه - وهذا يمكن أن يكون اسم خاصية بسيطة، او عنصر من المصفوفة أو تنفيذ احدى وظائف الكائن، على سبيل المثال:</p> + +<pre class="brush: js">person.age +person.interests[1] +person.bio()</pre> + +<h3 dir="rtl" id="Sub-namespaces">Sub-namespaces</h3> + +<p dir="rtl">من الممكن تغيير شكل التعليمة البرمجية، من مصفوفة الى Sub-namespaces. على سبيل المثال، حاول تغيير اسم العضو من :</p> + +<pre class="brush: js">name : ['Bob', 'Smith'],</pre> + +<p dir="rtl">الى</p> + +<pre class="brush: js">name : { + first : 'Bob', + last : 'Smith' +},</pre> + +<p dir="rtl">على نحو فعال قمنا بانشاء Sub-namespaces. هذا يبدو معقدا، في الحقيقة هو ليس كذالك - للوصول إلى هذه العناصر كل ما تحتاج اليه هو ربط سلسلة العناصر بنقطة الترميز. جرب هذا :</p> + +<pre class="brush: js">person.name.first +person.name.last</pre> + +<p dir="rtl"><strong>هام</strong> : في هذه الحالة ستحتاج أيضا للذهاب الى الكود الخاص بك واستبدال الحالات التالية من :</p> + +<pre class="brush: js">name[0] +name[1]</pre> + +<p dir="rtl">الى</p> + +<pre class="brush: js">name.first +name.last</pre> + +<p dir="rtl">وإلا، فسوف لن تعمل الوظائف الخاصة بك.</p> + +<h2 dir="rtl" id="رمز_الاقواس">رمز الاقواس</h2> + +<p dir="rtl">هناك طريقة أخرى للوصول إلى خصائص الكائن – باستخدام رمز الاقواس. بدلاً من استخدام هذه :</p> + +<pre class="brush: js">person.age +person.name.first</pre> + +<p dir="rtl">يمكنك استخدام هذه</p> + +<pre class="brush: js">person['age'] +person['name']['first']</pre> + +<p dir="rtl">تبدو هذه الطريقة مشابهة جدا لكيفية الوصول إلى العناصر في المصفوفة، فعلا هي كذالك - بدلا من استخدام رقم الفهرس للوصول الى العنصر المطلوب، نستخدم اسم القيمة للوصول اليه. ليس مستغربا أن تسمى هذه الكائنات أحيانا بالمصفوفات الترابطية associative arrays - هذه السلاسل النصية تشير الى قيمها. نفس الشئ بالنسبة للمصفوفات حيث تشير الفهرسة الرقمية لقيمها.</p> + +<h2 dir="rtl" id="إعداد_اعضاء_الكائن">إعداد اعضاء الكائن</h2> + +<p dir="rtl">حتى الآن قمنا فقط <strong>بارجاع/ جلب</strong> اعضاء الكائن - يمكننا أيضا <strong>تعيين/تحديث</strong> اعضاء الكائن ببساطة عن طريق الإعلان عن العضو الذي نريد تحديثه سواء باستخدام النقطة أو برمز الاقواس، كالتالي :</p> + +<pre class="brush: js">person.age = 45 +person['name']['last'] = 'Cratchit'</pre> + +<p dir="rtl">في حقل المدخلات الخاص بك جرب ادخال التعليمات البرمجية التالية واحدة تلوى الاخرى للحصول على الاعضاء مرة أخرى بعد التحديث :</p> + +<pre class="brush: js">person.age +person['name']['last']</pre> + +<p dir="rtl">إعداد ألاعضاء لا يقتصر فقط على تحديث قيم الخصائص والوظائف القائمة، يمكنك أيضا إنشاء أعضاء جدد تماما. جرب هذا:</p> + +<pre class="brush: js">person['eyes'] = 'hazel' +person.farewell = function() { alert("Bye everybody!") }</pre> + +<p dir="rtl">يمكنك الآن اختبار ألاعضاء الجدد خاصتك :</p> + +<pre class="brush: js">person['eyes'] +person.farewell()</pre> + +<p dir="rtl">احد اهم الجوانب المفيدة في استخدام رموز الاقواس هو امكانية استخدامها ليس فقط لتحديد قيم الاعضاء، ولكن أسماء الأعضاء أيضا. دعونا نقول أننا نريد أن يتمكن المستخدم من تخزين قيمة مخصصة لبيانات الاشخاص، عن طريق كتابة اسم العضو وقيمته في اثنين من المدخلات النصية؟ يمكن أن نحصل على تلك القيم كالتالي :</p> + +<pre class="brush: js">var myDataName = nameInput.value +var myDataValue = nameValue.value +</pre> + +<p dir="rtl">يمكننا بعد ذلك إضافة اسم العضو الجديد وقيمته إلى الكائن person كالتالي :</p> + +<pre class="brush: js">person[myDataName] = myDataValue</pre> + +<p dir="rtl">لاختبار هذا، قم بإضافة الأسطر التالية أسفل التعليمات البرمجية خاصتك، بعد قوس الاغلاق للكائن person :</p> + +<pre class="brush: js">var myDataName = 'height' +var myDataValue = '1.75m' +person[myDataName] = myDataValue</pre> + +<p dir="rtl">الآن قم بحفظ وتحديث، وادخل ما يلي في حقل المدخلات الخاص بك :</p> + +<pre class="brush: js">person.height</pre> + +<p dir="rtl">وهذا لم يكن ممكناً مع طريقة نقطة الترميز، لانها تقبل اسم العضو كقيمة حرفية فقط، والتالي لا يمكن لهذه القيمة الحرفية ان تشير إلى اسم المتغير.</p> + +<h2 dir="rtl" id="ما_هي_this؟">ما هي this؟ </h2> + +<p dir="rtl">لربما لاحظت شيئا غريبا بعض الشيء في الوظائف الخاصة بنا؟. القي نظرة على هذه على سبيل المثال:</p> + +<pre class="brush: js">greeting: function() { + alert('Hi! I\'m ' + this.name.first + '.'); +}</pre> + +<p dir="rtl"><br> + ربما تسألت ما هي <strong>this</strong>. هي كلمة من الكلمات المحجوزة للغة جافاسكريبت.<br> + تشير إلى الكائن الحالي الذي تم كتابة التعليمات البرمجية داخله — في هذه الحالة هي تعادل person. فلماذا لا نستخدم person بدلا من ذلك؟<br> + كما سترى في <a href="/ar/docs/Learn/JavaScript/Objects/Object-oriented_JS"> جافاسكريبت - البرمجة غرضية التوجه للمبتدئين</a> عندما نبدأ بانشاء constructors، ... الخ، this مفيدة جداً — لانها ستضمن دائما أن تستخدم القيم الصحيحة عندما يتغير سياق العضو.<br> + ( على سبيل المثال عند وجود حالتين مختلفتين للكائن person بأسماء مختلفة، سوف ترغب في التعامل مع ال name الموجودة في كل منهما عن طريق الوظيفة ()greeting ).</p> + +<p dir="rtl">ولتوضيح ما نعنيه مع زوج من الكائنات person1 و person2 :</p> + +<pre class="brush: js">var person1 = { + name : 'Chris', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +var person2 = { + name : 'Brian', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p dir="rtl">في هذه الحالة، الوظيفة ()greeting الخاصة بالكائن person1، ستظهر ".<strong>Hi! I'm Chris</strong>".<br> + فيما الوظيفة ()greeting الخاصة بالكائن person2، ستقوم باظهار ".<strong>Hi! I'm Brian</strong>".<br> + على الرغم من ان التعليمات البرمجية للوظيفة greeting هي نفسها في كلا الحالتين. وكما قلنا في وقت سابق، <strong>this</strong> تساوي الكائن داخل التعليمات البرمجية — هي ليست مفيدة بشكل كبير خصوصا عند الكتابة خارج ال object literals، لكنها مفيدة جدا عندما تريد توليد كائن حيوي (على سبيل المثال باستخدام ال constructors). سوف تتضح لك الامور في وقت لاحق.</p> + +<h2 dir="rtl" id="استخدمنا_الكائنات_طوال_المرحلة">استخدمنا الكائنات طوال المرحلة</h2> + +<p dir="rtl">من خلال الأمثلة السابقة، لربما فكرت بأن نقطة الترميز التي استخدمناها مؤلوفة جدا. هذا لأننا استخدمناها تقريبا في جميع المراحل السابقة، في كل مرة كنا نعمل من خلال مثال يستخدم اما built-in browser API او JavaScript object، استخدمنا الكائنات، نظراً لأن هذه الميزات تم بناؤها باستخدام نفس النوع من ال object structures مثل ما راينا هنا،<br> + وإن كانت أكثر تعقيدا من الأمثلة الخاصة بنا.</p> + +<p dir="rtl">عند استخدامك لوظائف السلاسل النصية string methods، كهذه :</p> + +<pre class="brush: js">myString.split(',');</pre> + +<p dir="rtl">فقد استخدمت وظيفة متاحة في مثيل الفئة <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. في كل مرة تقوم فيها بإنشاء سلسلة نصية في التعليمات البرمجية الخاصة بك، بشكل اوتوماتيكي يتم انشاء هذه السلسلة النصية ك instance (مثيل) من String، وبالتالي سيصبح متاح لها العديد من ال methods/properties الخاصة بال String.</p> + +<p dir="rtl"><br> + عندما تصل الى document object model باستخدام سطور كهذه :</p> + +<pre class="brush: js">var myDiv = document.createElement('div'); +var myVideo = document.querySelector('video');</pre> + +<p dir="rtl">فقد استخدمت وظيفة متاحة في مثيل الفئة <code><a href="/en-US/docs/Web/API/Document">Document</a></code>. في كل مرة تحمل فيها صفحة الويب، يتم إنشاء instance (مثيل) من الوثيقة، تسمى <code>document</code>، والتي تمثل بنية الصفحة كاملة، والمحتوى، وغيرها من الميزات مثل عنوان URL الخاص بها. وهذا يعني أن لديها العديد من ال methods/properties المتاحة لها.</p> + +<p dir="rtl">وينطبق الأمر نفسه على اي من (كائنات <span class="short_text" id="result_box" lang="ar"><span class="alt-edited">برمجة</span></span> <span class="short_text" id="result_box" lang="ar"><span class="alt-edited">واجهة التطبيقات</span></span> المدمجة built-in object/API) الاخرى قد تمت باستخدام — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, etc.</p> + +<p dir="rtl">لاحظ ان الكائنات المدمجة Objects/APIs لا تقوم دائما بانشاء object instances (مثيلات الكائن) اوتوماتيكيا. وكمثال على ذلك، <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — التي تسمح للمتصفحات الحديثة باطلاق system notifications - يتطلب منك إنشاء مثيل object instance جديد باستخدام ال constructor لكل اشعار تريد اطلاقه.</p> + +<p dir="rtl">قم بادخال التعليمة التالية في console الجافاسكريبت الخاص بك :</p> + +<pre class="brush: js">var myNotification = new Notification('Hello!');</pre> + +<p dir="rtl">سوف نبحث في ال constructor في مقال لاحق.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: من المفيد أن نفكر في طريقة تواصل الكائنات على شكل رسائل ممررة. — عندما يكون الكائن بحاجة لأداء بعض العمل في كثير من الأحيان سوف يرسل رسالة إلى كائن آخر عن طريق احدى وظائفه،<br> + وينتظر الرد، والذي يعرف بالقيمة المرجعة.</p> +</div> + +<h2 dir="rtl" id="ملخص">ملخص</h2> + +<p dir="rtl">تهانينا، لقد وصلت إلى نهاية الجزء الخاص بكائنات الجافاسكريبت الأولىية — وينبغي الآن ان تكون لديك فكرة جيدة عن كيفية العمل مع الكائنات في الجافا سكريبت بما في ذلك إنشاء الكائنات البسيطة الخاصة بك. وينبغي أن تدرك أيضا أن الكائنات مفيدة جداً كهياكل لتخزين البيانات والوظائف الخاصة بها. — إذا حاولت جعل كافة الخصائص والوظائف في الكائن person كمتغيرات ووظائف مستقلة، سيكون امر غير فعال ومخيب للامال، بحيث يمكن أن تتعرض لمخاطر اشتباك المتغيرات والوظائف التي لها نفس الأسماء.<br> + الكائنات تسمح لنا بالاحتفاظ بالمعلومات مؤمنة بأمان في حزمة خاصة بها، وتحفظها من الاذى.</p> + +<p dir="rtl"><strong>في المقال القادم سنبدأ بالنظر في البرمجة كائنية التوجه (OOP) ، وكيف يمكن استخدام هذه التقنية في جافا سكريبت.</strong></p> + +<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> +</div> diff --git a/files/ar/learn/javascript/objects/index.html b/files/ar/learn/javascript/objects/index.html new file mode 100644 index 0000000000..9eb705138c --- /dev/null +++ b/files/ar/learn/javascript/objects/index.html @@ -0,0 +1,53 @@ +--- +title: تقديم JavaScript objects +slug: Learn/JavaScript/Objects +tags: + - Article + - Assessment + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - NeedsTranslation + - Objects + - TopicStub + - Tutorial +translation_of: Learn/JavaScript/Objects +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">في JavaScript ، معظم الأشياء هي كائنات ، من ميزات JavaScript الأساسية مثل السلاسل والمصفوفات إلى واجهات برمجة التطبيقات للمتصفح المبنية أعلى جافا سكريبت. يمكنك حتى إنشاء الكائنات الخاصة بك لتغليف الوظائف والمتغيرات ذات الصلة إلى حزم فعالة ، وتكون بمثابة حاويات بيانات مفيدة. إن طبيعة جافا سكريبت الموجهة للكائنات مهمة لفهم ما إذا كنت ترغب في مواصلة معرفتك باللغة ، لذلك قمنا بتوفير هذه الوحدة لمساعدتك. هنا نقوم بتدريس نظرية وجوه وبناء الجملة بالتفصيل ، ثم ننظر في كيفية إنشاء الأشياء الخاصة بك.</p> + +<p>المتطلبات الأساسية<br> + قبل البدء في هذه الوحدة ، يجب أن يكون لديك بعض الإلمام بـ HTML و CSS. يُنصح بالعمل من خلال مقدمة HTML ومقدمة إلى وحدات CSS قبل البدء في JavaScript.</p> + +<p>يجب أيضًا أن يكون لديك بعض الإلمام بأساسيات JavaScript قبل النظر إلى كائنات JavaScript بالتفصيل. قبل محاولة هذه الوحدة ، اعمل من خلال الخطوات الأولى لجافا سكريبت وكتل JavaScript</p> + +<p> </p> + +<div class="note">ملاحظة: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر لا تملك فيه القدرة على إنشاء ملفاتك الخاصة ، يمكنك تجربة (معظم) أمثلة التعليمات البرمجية في برنامج ترميز عبر الإنترنت مثل JSBin أو Thimble</div> + +<p> </p> + +<div class="note"> </div> + +<blockquote> +<p id="Guides">خطوط إرشاد<br> + أساسيات الكائن<br> + في المقالة الأولى التي تبحث في كائنات JavaScript ، سننظر في بنية كائن جافا سكريبت الأساسية ، ونعاود زيارة بعض ميزات جافا سكريبت التي رأيناها سابقًا في الدورة التدريبية ، مع التأكيد على حقيقة أن العديد من الميزات التي تعاملت معها بالفعل هي في الواقع الأشياء.<br> + جافا سكريبت وجوه المنحى للمبتدئين<br> + مع وضع الأساسيات ، سنركز الآن على JavaScript (Object-oriented JavaScript) (OOJS) - تقدم هذه المقالة عرضًا أساسيًا لنظرية البرمجة الشيئية (OOP) ، ثم تستكشف كيفية محاكاة جافا سكريبت لفئات الكائن عن طريق وظائف منشئ ، كيفية إنشاء مثيلات الكائن.<br> + نماذج الكائن<br> + النماذج الأولية هي الآلية التي ترث بها كائنات JavaScript عناصر من بعضها البعض ، وتعمل بشكل مختلف مع آليات الوراثة في لغات البرمجة الكلاسيكية الموجهة للكائنات. في هذه المقالة ، نستكشف هذا الاختلاف ، ونشرح كيفية عمل سلاسل النموذج الأولي ، وننظر في كيفية استخدام خاصية النموذج الأولي لإضافة أساليب إلى المنشئات الموجودة.<br> + وراثة في جافا سكريبت<br> + مع شرح معظم تفاصيل دموية OOJS الآن ، يوضح هذا المقال كيفية إنشاء فئات الكائن "التابعة" (المنشئات) التي ترث ميزات من الفئات "الأصل" الخاصة بهم. بالإضافة إلى ذلك ، نقدم بعض النصائح حول متى وأين قد تستخدم OOJS.<br> + التعامل مع بيانات JSON<br> + يعد ترميز كائن جافا سكريبت (JSON) تنسيقًا قياسيًا لتمثيل البيانات المنظمة مثل كائنات جافا سكريبت ، والتي تستخدم عادة لتمثيل ونقل البيانات على مواقع الويب (أي إرسال بعض البيانات من الخادم إلى العميل ، بحيث يمكن عرضها على الويب الصفحة). ستصادفه كثيرًا ، لذا في هذه المقالة نقدم لك كل ما تحتاجه للعمل مع JSON باستخدام JavaScript ، بما في ذلك الوصول إلى عناصر البيانات في كائن JSON وكتابة JSON الخاص بك.<br> + ممارسة بناء الكائن<br> + في المقالات السابقة ، نظرنا في جميع تفاصيل بنية وجوه جافا سكريبت الأساسية وتفاصيل التركيب ، مما يمنحك قاعدة صلبة للبدء منها. في هذا المقال ، نتعمق في تمرين عملي ، مما يمنحك المزيد من التدريب على بناء كائنات جافا سكريبت مخصصة ، والتي تنتج شيئًا ممتعًا وملونًا - بعض الكرات المرتدة الملونة.</p> +</blockquote> + +<p id="Assessments">تقييم<br> + إضافة ميزات إلى الكرات المرتدة التجريبية<br> + في هذا التقييم ، يتوقع منك استخدام الكرات المرتدة التجريبية من المقالة السابقة كنقطة بداية ، وإضافة بعض الميزات الجديدة والممتعة إليها.</p> diff --git a/files/ar/learn/javascript/objects/inheritance/index.html b/files/ar/learn/javascript/objects/inheritance/index.html new file mode 100644 index 0000000000..7dc1333c96 --- /dev/null +++ b/files/ar/learn/javascript/objects/inheritance/index.html @@ -0,0 +1,228 @@ +--- +title: الوراثة في جافاسكريبت +slug: Learn/JavaScript/Objects/Inheritance +translation_of: Learn/JavaScript/Objects/Inheritance +--- +<div dir="rtl">{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div> + +<p class="summary" dir="rtl">مع معظم التفاصيل المثيرة في OOJS التي درسناها حتى الآن،سنتطرق في هذا الدرس لكيفية إنشاء طفل (child" object classes (constructors" الذي يرث الميزات من أبيه parent" classes". بالإضافة إلى ذلك، سنقدم بعض النصائح، حول متى وأين يجب عليك استخدام ال OOJS.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات الأساسية :</th> + <td dir="rtl">دراية لا بأس بها بخصوص الحاسوب، الإلمام بمبادئ وأساسيات الـ HTML وCSS وجافاسكريبت (راجع <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) وأساسيات بناء الكائنات في الجافاسكريبت OOJS (راجع <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف :</th> + <td dir="rtl">فهم كيفية تنفيذ الوراثة في جافا سكريبت.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الوراثة_النمودجية_-_Prototypal_inheritance">الوراثة النمودجية - Prototypal inheritance</h2> + +<div style="font-size: 15; font-family: 'tahoma';"> +<p dir="rtl">لقد راينا حتى الآن بعض عمليات الوراثة — وراينا كيف تعمل الـ prototype chains، وكيف يتم توارث الاعضاء صعودا في السلسلة، ولكن معظمها اقتصر على الدوال المدمجة في المتصفح (built-in browser functions). الان، سنرى كيف يمكننا إنشاء كائن يرث من كائن آخر في جافا سكريبت؟</p> + +<p dir="rtl">كما ذكرنا في وقت سابق من هذه الدورة التدريبية، بعض الاشخاص يعتقدون أن جافاسكريبت ليست لغة كائنية حقيقية. في لغات "OO الكلاسيكية"، حيث يجب تعريف class objects من نوع ما، بعد ذلك يمكنك ببساطة تعريف الكلاس الذي سترث منه الكلاسات الأخرى (شاهد بعض الامثلة البسيطة بخصوص الوراثة في لغة <a href="http://www.tutorialspoint.com/cplusplus/cpp_inheritance.htm">C++ inheritance</a>). الجافا سكريبت تستخدم نظام مختلف — نظام <strong>الربط</strong> بين الكائنات — في الجافسكريبت لا يتم نسخ الوظائف الموروثة على الكائنات التي تقوم بالوراثة، بدلا من ذالك يتم عمل <strong>رابط</strong> بينها — الوظائف التي ترث <strong>مرتبطة</strong> عن طريق ال prototype chain (غالباً ما يشار لها بال <strong>prototypal inheritance</strong>).</p> + +<p dir="rtl">دعونا نستكشف كيفية القيام بذلك مع مثال ملموس.</p> + +<h2 dir="rtl" id="الشروع_في_العمل">الشروع في العمل</h2> + +<p dir="rtl">اولا وقبل كل شئ، قم بعمل نسخة من الملف الخاص بنا <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> (او شاهد <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">running live</a>). ستجد داخله نفس مثال <code>Person()</code> constructor الذي استخدمناه طوال هذه الدورة التدريبية مع اختلاف طفيف — لقد قمنا بتعريف الخصائص فقط، داخل ال constructor:</p> + +<pre class="brush: js">function Person(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; +};</pre> + +<p dir="rtl">وكافة ال method معرفة كـ constructor's prototype ، على سبيل المثال:</p> + +<pre class="brush: js">Person.prototype.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); +};</pre> + +<div class="note"> +<p dir="rtl"><strong>ملحوظة : </strong>في شفرة المصدر سترى ايضا الوظائف <code>()bio </code>و <code>()farewell</code> معرفة . في وقت لاحق سترى كيف يمكن أن تكون موروثة من قبل منشئات-constructors آخرى.</p> +</div> + +<p dir="rtl">سنقوم بإنشاء <code>Teacher</code> class، مثل الذي قمنا بتوصيفه في تعريف object-oriented definition الخاصة بنا —والذي سيرث كافة الأعضاء من ال <code>Person</code>، ولكن سيشتمل أيضا على:</p> + +<ol> + <li>خاصية جديدة، <code>subject</code> — والتي ستحتوي على المادة التي يدرسها المدرس.</li> + <li>وعلى الوظيفة <code>greeting()</code> محدثة، والتي تبدو أكثر رسمية من الوظيفة <code>greeting()</code> القياسية —<br> + وهي اكثر ملائمة مع المدرس الذي يقوم بتدريس بعض الطلاب في المدرسة.</li> +</ol> + +<h2 dir="rtl" id="تعريف_ال_Teacher()_constructor_function">تعريف ال Teacher() constructor function</h2> + +<p dir="rtl">أول شيء يتعين علينا القيام به هو إنشاء <code>Teacher() </code>constructor — اضف ما يلي أدناه في التعليمات البرمجية خاصتك:</p> + +<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) { + Person.call(this, first, last, age, gender, interests); + + this.subject = subject; +}</pre> + +<p dir="rtl">تبدو هذه مشابهة لل Person constructor في نواح كثيرة، ولكن هناك شيء غريب والذي لم نره من قبل — الدالة<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call"> ()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> . هذه الدالة تسمح لك باستدعاء دالة اخرى معرفة في مكان آخر، ولكن في السياق الحالي، البراميتر الاول لتحديد قيمة <code>this</code>، اي هذا الذي نريد استخدامه عند تشغيل الدالة، والبرامترات الاخرى لتحديد البرامترات التي يجب ان تمرر للدالة عند تشغيلها.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: في هذه الحالة سنقوم بتحديد الخصائص الموروثة عندما سنقوم بانشاء object instance، لكن لاحظ أنك ستحتاج إلى تحديدها كباراميترات في ال constructor حتى لو كان ال instance لا يتطلب ان تكون محددة كبارامترات.</p> +</div> + +<p dir="rtl">في هذه الحالة، وعلى نحو فعال قمنا بتشغيل ال Person() constructor function داخل ال Teacher() constructor function (انظر اعلاه). ما نتج عنه نفس الخصائص المعرفة داخل ()Teacher ولكن باستخدام قيم البرامترات التي تم تمريرها إلى ()Teacher وليس الى ()Person (ببساطة قمنا بتمرير this الى ()call وهذا يعني أن this داخل ()cal ستشير الى Teacher() function).</p> + +<p dir="rtl">السطر الأخير داخل ال constructor يعرف الخاصية subject الجديدة وهي خاصة ب ()Teacher فقط.</p> + +<p dir="rtl">كملاحظة، بإمكاننا ببساطة القيام بذلك على هذا النحو :</p> + +<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.subject = subject; +}</pre> + +<p dir="rtl">ولكن هذا مجرد إعادة تحديد الخصائص من جديد، و ()Teacher لا يرثها من ال ()Person، لذا لا فائدة لما نحاول القيام به. لانه سيأخذ المزيد من السطور في التعليمات البرمجية لا اكثر.</p> + +<h2 dir="rtl" id="إعداد_Teacher()_prototype_ومرجع_ال_constructor">إعداد Teacher() prototype ومرجع ال constructor</h2> + +<p dir="rtl">كل شيء جيد حتى الآن، ولكن لدينا مشكلة. قمنا بتعيين constructor جديد، وبشكل افتراضي يحتوي على الخاصية prototype فارغة. ونحن بحاجة لجعل ()Teacher يرث الوظائف المعرفة في ال Person() prototype. فكيف نفعل ذلك؟</p> + +<p dir="rtl">أضف السطر التالي اسفل التعليمة البرمجية الخاصة بك:</p> + +<pre class="brush: js">Teacher.prototype = Object.create(Person.prototype);</pre> + +<p dir="rtl">وهنا يأتي دور الوظيفة<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create"> ()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create</a></code> للإنقاذ مرة أخرى — في هذه الحالة استخدمناها لإنشاء قيمة جديدة للخاصية prototype (وهي في حد ذاتها كائن يحتوي على خصائص ووظائف) مع prototype يساوي Person.prototype، وتعيينها كقيمة ل Teacher.prototype، وهذا يعني أن Teacher.prototype الآن سوف يرث كل الوظائف الموجودة في ال Person.prototype.</p> + +<p dir="rtl">نحن بحاجة إلى فعل شيئا آخر قبل أن نكمل — constructor الخاصية prototype ل ()Teacher<br> + هو الان على شكل ()Person، بسبب الطريقة التي ورثناها منه (لمزيد من المعلومات حول هذا <a href="https://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">Stack Overflow post</a>) — حاول حفظ التعليمات البرمجية الخاصة بك، واعد تحميل الصفحة من المتصفح، وادخل هذا في console الجافاسكريبت للتحقق:</p> + +<pre class="brush: js">Teacher.prototype.constructor</pre> + +<p dir="rtl">وهذا يمكن أن يسبب مشكلة، لذلك نحن بحاجة لتصحيح هذا الوضع، يمكنك القيام بذلك بالرجوع إلى التعليمات البرمجية الخاصة بك وإضافة السطر التالي في الجزء السفلي:</p> + +<pre class="brush: js">Teacher.prototype.constructor = Teacher;</pre> + +<p dir="rtl">الآن إذا قمت بحفظ وتحديث، وإدخال Teacher.prototype.constructor سيتم إرجاع ()Teacher، كما هو مطلوب.</p> + +<h2 dir="rtl" id="منح_()Teacher_الوظيفة_()greeting_الجديدة">منح ()Teacher الوظيفة ()greeting الجديدة</h2> + +<p dir="rtl">لانهاء الكود الخاص بنا، سنحتاج إلى تعريف الوظيفة الجديدة ()greeting في Teacher() constructor.</p> + +<p dir="rtl">أسهل طريقة للقيام بذلك، هو تعريفها على Teacher() prototype — اضف ما يلي في الجزء السفلي من التعليمات البرمجية الخاصة بك:</p> + +<pre class="brush: js">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 + '.'); +};</pre> + +<p dir="rtl">تحية المدرس هذه (alert)، يستخدم فيها أيضا الاسم prefix المناسب لجنسهم، بناءا على عبارة شرطية.</p> + +<h2 dir="rtl" id="تجربة_المثال">تجربة المثال</h2> + +<p dir="rtl">لقد ادخلت الآن كافة التعليمات البرمجية، حاول انشاء object instance من ()Teacher، عن طريق وضع ما يلي في الجزء السفلي لجافا سكريبت الخاصة بك :</p> + +<pre class="brush: js">var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre> + +<p dir="rtl">الآن حفظ وتحديث، وحاول الوصول إلى خصائص ووظائف الكائن teacher1 الجديد الخاص بك، على سبيل المثال:</p> + +<pre class="brush: js">teacher1.name.first; +teacher1.interests[0]; +teacher1.bio(); +teacher1.subject; +teacher1.greeting();</pre> + +<p dir="rtl">ستعمل جميعها بشكل جيد، الثلاثة الأولى ستصل إلى الأعضاء التي تم وراثتها من Person() constructor (class العام فيما الاثنان المتبقيان سيصلان إلى الأعضاء الموجودة في (Teacher() constructor (class.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong> : إذا واجهتك مشكلة في الحصول على هذا العمل، قارن التعليمات البرمجية الخاصة بك مع خاصتنا <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">finished version</a> (شاهد <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">running live</a> ).</p> +</div> + +<p dir="rtl">التقنية التي قمنا بتغطيتها هنا ليست الطريقة الوحيدة لإنشاء كلاسات موروثة في جافا سكريبت، ولكنها تعمل بشكل جيد، وتعطيك فكرة جيدة عن كيفية تنفيذ الوراثة في جافا سكريبت.</p> + +<p dir="rtl">قد يهمك ايضا الاطلاع على بعض المستجدات {{glossary("ECMAScript")}} بخصوص المميزات الجديدة التي تسمح لنا بالقيام بوراثة أكثر نظافة في جافا سكريبت (شاهد <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). ونحن لم نقم بتغطيتها هنا، كما لم يتم حتى الآن اعتمادها على نطاق واسع جداً عبر المتصفحات. كل التعليمات البرمجية الأخرى التي ناقشناها في هذه المجموعة من المقالات مدعومة بقدر ما، باستثناء IE9 وإلاصدارات السابقة، هناك طرق لتحقيق الدعم لما سبق.</p> + +<p dir="rtl">الطريقة الشائعة هي استخدام مكتبة جافا سكريبت — معظم الخيارات الشائعة تحتوي على مجموعة سهلة من الوظائف المتاحة لتنفيذ الوراثة بسهولة وسرعة. <a href="http://coffeescript.org/#classes">CoffeeScript</a> على سبيل المثال، توفر class ،extends،... الخ.</p> + +<h2 dir="rtl" id="اختبر_قدراتك">اختبر قدراتك</h2> + +<p dir="rtl">في القسم النظري الخاص بال <a href="/ar/docs/Learn/JavaScript/Objects/Object-oriented_JS#البرمجة_الكائنية_(أو_البرمجة_غرضية_التوجه)">OOP theory section</a>، أدرجنا أيضا Student class كمفهوم، والذي يرث كافة ميزات ال Person، ويحتوي على الوظيفة ()greeting بتحية مختلفة للشخص، وتحيته أكثر رسمية بكثير من تحية المدرس. الق نظرة على ما يشبه تحية الطالب في هذا القسم، وحاول تنفيذ Student() constructor خاص بك، على أن يرث كل ميزات ال ()Person، وقم بتنفيذ وظيفة ()greeting مختلفة.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong> : إذا واجهتك مشكلة في الحصول على هذا العمل، قارن التعليمات البرمجية الخاصة بك مع خاصتنا <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">finished version</a> (شاهد ايضا <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">running live</a>).</p> +</div> + +<h2 id="Object_member_summary">Object member summary</h2> + +<p dir="rtl">تلخيص، لديك ثلاثة أنواع من property/method لتهتم بشانهم.</p> + +<ol> + <li>تلك المعرفة داخل ال constructor function والتي تمرر لل object instances. هذه سهلة إلى حد ما، في التعليمات البرمجية الخاصة بك، هناك أعضاء معرفة داخل ال constructor تستخدم نوع السطر this.x = x في built in browser code وهي متاحة فقط للأعضاء في object instances (عادة ما يتم إنشاؤها من خلال استدعاء ال constructor باستخدام الكلمة المحجوزة new مثل var myInstance = new <span dir="ltr">myConstructor()<span>)</span></span></li> + <li>تلك التي تم تحديدها مباشرة على constructor نفسها، وهي متاحة فقط في ال constructor.<br> + وهذه عادة متوفرة فقط في ال built-in browser objects,<br> + المعترف بها حاليا بالسلاسل مباشرة على ال constructor،<br> + لا على ال instance. على سبيل المثال <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>.</li> + <li> + <p>تلك المحددة في constructor ال prototype، والموروثة من جميع ال instances<br> + ووراثة فئات الكائن. وتشمل اي عضو معرف على الخاصية Constructor's prototype property<br> + (مثلا ()myConstructor.prototype.x).</p> + </li> +</ol> + +<p dir="rtl">إذا لم تتمكن من استعاب هذا، فلا تقلق فانت حتى الآن لا تزال تتعلم، وسوف تستوعبها اكثر مع الممارسة.</p> + +<h2 dir="rtl" id="متى_تستخدم_الوراثة_في_جافا_سكريبت؟">متى تستخدم الوراثة في جافا سكريبت؟</h2> + +<p dir="rtl">على الارجح بعد هذه المادة الأخيرة، ستقول "يا الهي، هذا معقد"، حسنا، انت على حق، ال prototypes والوراثة تمثل بعض اهم الجوانب الأكثر تعقيداً في جافا سكريبت، لكن قوة ومرونة الجافا سكريبت تاتي من تركيبة الكائن والوراثة ومن المفيد فهم كيف تعمل.</p> + +<p dir="rtl">بطريقة ما، فانت تستخدم الوراثة طوال الوقت، كلما استخدمت الميزات المختلفة ل Web API (واجهة برمجة تطبيقات الويب) او الخصائص والوظائف المعرفة في كائنات المتصفح المدمجة (built-in browser) التي تقوم باستدعائها على السلاسل النصية الخاصة بك، او على المصفوفات...الخ، بشكل فعلي، فانت تستخدم الوراثة.</p> + +<p dir="rtl">بالنسبة لاستخدام الوراثة في التعليمات البرمجية الخاصة بك، ربما لن تحتاج لاستخدامها في كثير من الأحيان، لا سيما وانت مبتدئ فيها، او لديك مشاريع صغيرة. استخدام الكائنات والوراثة في هذه الحالة، سيكون مضيعة للوقت، وانت لست في حاجة إليها. ولكن كان تكون التعليمات البرمجية الخاصة بك اكبر وقابلة للتمدد، فأنت على الأرجح ستحتاجها بشكل كبير، إذا بدأت في إنشاء عدد من الكائنات، ووجدت ان لها خصائص مماثلة، عندها، قم بإنشاء نوع الكائن عام يحتوي على كافة الوظائف المشتركة ووراثة تلك المشتركة في نوع الكائنات الاكثر تخصصا، ما سيجعل هذ العمل مفيد ومريح.</p> + +<div class="note" dir="rtl"> +<p>ملاحظة: بسبب طريقة عمل الجافاسكريبت مع ال prototype chain ...الخ، غالباً ما تسمى مشاركة الوظائف بين الكائنات ب delegation (التفويض)، الكائنات المتخصصة تفوض هذه الوظائف إلى نوع الكائن العام. وربما هذا هو الوصف الاكثر دقة لوصف الوراثة، كما لا يتم نسخ الوظائف "الموروثة" على الكائنات التي تقوم "بالوراثة". بدلا من ذلك يتم عمل رابط بينها، لذا فالوظائف الموروثة لاتزال في الكائن العام.</p> +</div> + +<p dir="rtl">عند استخدام الوراثة، ينصح ان لا يكون لديك عدة مستويات من الوراثة، وتقوم بتتبع دقيق حيث يمكنك تحديد الخصائص والوظائف الخاصة بك. من الممكن البدء بكتابة التعليمات البرمجية والقيام بتعديل prototypes الكائنات المدمجة في المتصفح مؤقتاً، ولكن يجب أن لا تفعل ذلك إلا إذا كان لديك سبب وجيه حقا. والكثير من الوراثة يمكن أن يؤدي إلى ارتباكات لا نهاية لها، وآلام لا نهاية لها عند محاولة تصحيح هذه التعليمات البرمجية.</p> + +<p dir="rtl">في نهاية المطاف، الكائنات ليست سوى شكل آخر من أشكال إعادة استخدام التعليمات البرمجية، مثل الدوال والحلقات...الخ، مع أدوار محددة ومزايا خاصة بها. إذا كنت تقوم بإنشاء مجموعة من المتغيرات والمهام ذات الصلة، وتريد أن تجعلها جميعا معا محزمة بدقة وبعيدة عن مخاطر الاشتباك، فالكائن هو الحل. الكائنات أيضا مفيدة جداً عندما تريد تمرير مجموعة من البيانات من مكان إلى آخر. كل هذه الأمور لا يمكن تحقيقها بدون استخدام ال constructors أو الوراثة. إذا كنت بحاجة إلى instance واحد فقط من الكائن، فمن الافضل استخدام object literal، وبالتأكيد فلن تحتاج للوراثة.</p> + +<h2 dir="rtl" id="خلاصة">خلاصة</h2> + +<p dir="rtl"> غطت هذه المادة ما تبقى من نظرية ال OOJS الأساسية، وتركيبة الكائن الاساسية، من خلال هذه المعطيات فعلى الارجح انك اصبحت اكثر قدرة على فهم كائن الجافاسكريبت وأساسيات ال OOP، وايضا ال prototypes والميراث النمودجي (prototypal inheritance)، وكيفية إنشاء كلاسات (اي ما يعادل ال constructors في جافاسكريبت) وال object instances، واضافة ميزات الى الكلاسات، وانشاء كلاسات فرعية (subclasses)، التي ترث من الكلاسات الأخرى.</p> + +<p dir="rtl">في الدرس القادم سنلقي نظرة على كيفية التعامل مع ال (JavaScript Object Notation (JSON، وتبادل البيانات المشتركة باستخدام كائنات جافا سكريبت.</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — A really useful interactive learning site for learning about objects.</li> + <li><a href="https://www.amazon.com/gp/product/193398869X/">Secrets of the JavaScript Ninja</a>, Chapter 6 — A good book on advanced JavaScript concepts and techniques, by John Resig and Bear Bibeault. Chapter 6 covers aspects of prototypes and inheritance really well; you can probably track down a print or online copy fairly easily.</li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">You Don't Know JS: this & Object Prototypes</a> — Part of Kyle Simpson's excellent series of JavaScript manuals, Chapter 5 in particular looks at prototypes in much more detail than we do here. We've presented a simplified view in this series of articles aimed at beginners, whereas Kyle goes into great depth and provides a more complex but more accurate picture.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p> diff --git a/files/ar/learn/javascript/objects/object-oriented_js/index.html b/files/ar/learn/javascript/objects/object-oriented_js/index.html new file mode 100644 index 0000000000..c57bbb13d5 --- /dev/null +++ b/files/ar/learn/javascript/objects/object-oriented_js/index.html @@ -0,0 +1,296 @@ +--- +title: جافاسكريبت - البرمجة غرضية التوجه للمبتدئين +slug: Learn/JavaScript/Objects/Object-oriented_JS +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div> + +<p class="summary" dir="rtl">مع ما تعلمناه من أساسيات، سنركز الآن على جافاسكريبت غرضية التوجه (object oriented programming). او ما يعرف ب (OOP)، سنستعرض في هذه المقالة أساسيات البرمجة غرضية التوجه نظريا، ثم سنستكشف كيف أن الجافا سكريبت تظاهي الـ object classes المستخدمة في لغات البرمجة الأخرى (php مثلا) عن طريق الـ constructor functions، وأيضا كيفية إنشاء instances من الكائن (أو مثيل الكائن).</p> + +<table class="learn-box standard-table" style="height: 217px; width: 584px;"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات الأساسية :</th> + <td> + <p dir="rtl">دراية لا باس بها بخصوص الحاسوب، الإلمام بمبادئ وأساسيات الـ HTML وCSS وjavascript (شاهد <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> و <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) وأساسيات بناء الـكائنات OOJS. (شاهد <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</p> + </td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف :</th> + <td dir="rtl">فهم نظريا الـبرمجة غرضية التوجه (object-oriented programming)، وكيف أن كل شيء في الجافاسكريبت عبارة عن كائن (object) !.<br> + وأيضا كيفية إنشاء الـ constructors وobject instances.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="البرمجة_الكائنية_(أو_البرمجة_غرضية_التوجه)">البرمجة الكائنية (أو البرمجة غرضية التوجه) </h2> + +<div style="font-size: 14px; font-family: 'tahoma';"> +<p dir="rtl">لنبدأ، دعونا نقوم بعرض نبذة بسيطة عن ماهي البرمجة غرضية التوجه ( Object-oriented programming ( OOP على مهل. نقول على مهل، لأن فهم واستيعاب البرمجة غرضية التوجه (OOP) على عجل سيكون امر غاية في التعقيد، كأن نعطيك العلاج الكامل الآن على الأرجح سيسبب لك خلطا أكثر مما سيساعدك. <br> + الفكرة الأساسية من البرمجة غرضية التوجه OOP هي أن نستخدم أشياءً من عالمنا الحقيقي ونحولها إلى كائنات ونقوم بتمثيلها داخل برامجنا، ونوفر وسائل سهلة للوصول إلى وظائفها، حتى نستفيد منها.</p> + +<p dir="rtl">يتكون الكائن من مجموعة من البيانات والتعليمات البرمجية المتصلة فيما بينها. والتي تمثل معلومات عن الشيء الذي نتعامل معه، والوظيفة أو السلوك الذي نريد منه أن يقوم به. بيانات الكائن في كثير من الأحيان تكون عبارة عن وظائف كثيرة يمكن تخزينها بدقة (أو تغليفها) داخل حزمة الكائن (object package). حزمة الكائن يمكن أن تمتلك اسما يشير إليها، وهو ما يسمى في بعض الأحيان ب namespace. ما يجعل من السهل إعادة هيكلتها أو الوصول إليها، كما يمكن أيضا استخدام الكائنات كمخازن للبيانات حتى يمكن إرسالها بسهولة عبر شبكة الاتصال.<br> + </p> + +<h3 dir="rtl" id="تعريف_الـ_object_template">تعريف الـ object template</h3> + +<p dir="rtl">دعونا ننظر في برنامج سهل يستعرض معلومات عن الطلاب والمعلمين في المدرسة.<br> + هنا سوف نبحث في نظرية البرمجة الغرضية التوجه OOP بشكل عام، وليس في سياق أي لغة برمجة معينة.</p> + +<p dir="rtl">اولا، دعونا نعود إلى الكائن Person الذي عملنا عليه في الدرس السابق <a href="/ar/docs/Learn/JavaScript/Objects/Basics">قسم اساسيات الكائن في جافاسكريبت</a>، والذي يحدد البيانات العامة والأداء الوظيفي للشخص. هناك الكثير من المواصفات التي يمكن أن يتصف بها اي شخص (عنوانه، الطول، حجم الحذاء، الحمض النووي للشخصية DNA، ورقم جواز السفر، مواصفات شخصية كثيرة...)، في المثال الذي عملنا عليه في الدرس السابق، ركزنا اهتمامنا فقط على عرض الاسم، والسن والجنس، والاهتمامات، نريد أيضا أن نكون قادرين على كتابة مقدمة قصيرة حول هؤلاء الاشخاص، على أساس هذه البيانات، وجعلهم يقولون مرحبا، وهذا ما يعرف بالتجريد abstraction.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p> + +<p dir="rtl">في بعض لغات البرمجة غرضية التوجه OOP الأخرى (PHP مثلا)، يعرف الكائن عامة بال class (جافا سكريبت تستخدم مصطلحات وآلية مختلفة، كما سنرى أدناه) - في الواقع هو ليس كائنا، بل هو القالب الذي يعرف خصائص الكائن وكيف ينبغي له أن يكون.</p> + +<h3 dir="rtl" id="إنشاء_كائنات_فعلية_-_Creating_actual_objects">إنشاء كائنات فعلية - Creating actual objects </h3> + +<p dir="rtl">من خلال الـ class، يمكنك إنشاء object instances — وهي الكائنات التي تحتوي على البيانات والوظائف المحددة في الـ class (وبالتالي هي مثيلة له). من خلال الـ class Person الخاص بنا، يمكننا الآن إنشاء بعض الأشخاص الفعليين :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13883/MDN-Graphics-instantiation-2.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p dir="rtl">عندما يتم إنشاء object instance من الـ class، ستبدأ الـ constructor function الخاصة بال class بإنشائه، تسمى عملية إنشاء الـ object instance من الـ class بال instantiation (إنشاء مثيل).<br> + أي أنَّ الـ object instance هو instantiated (مثيل) من الـ class.</p> + +<h3 dir="rtl" id="كلاسات_متخصصة_-_Specialist_classes">كلاسات متخصصة - Specialist classes</h3> + +<p dir="rtl">في هذه الحالة لسنا بحاجة للأشخاص بصفة عامة، سنستخدم الأساتذة والطلاب بصفة <strong>خاصة</strong>. في البرمجة غرضية التوجه OOP، يمكنك إنشاء كلاسات بناءً على كلاسات أخرى. مثلا كلاسات الأبناء child الجديدة يمكنها أن ترث البيانات والتعليمات البرمجية من الكلاس الأب parent.<br> + يمكنك إعادة استخدام وظيفة مشتركة بين جميع أنواع الكائنات بدلاً من الاضطرار إلى تكرار العملية عدة مرات، حيث يختلف الأداء الوظيفي من كلاس لآخر، يمكنك <strong>تخصيص</strong> ميزات معينة لكل منها حسب الحاجة.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p dir="rtl">وهذا مفيد حقاً – حيث يتشارك المعلمين والطلاب في الكثير من الخصوصيات المشتركة مثل الاسم ونوع الجنس، والعمر، سيكون من المفيد جدا تعريف تلك الخصوصيات المشتركة مرة واحدة فقط. يمكنك أيضا تعريف نفس تلك الخصوصيات كل على حدة في الكلاسات المختلفة، كما سيتم تعريف كل من هذه الخصوصيات في namespace مختلفة. على سبيل المثال، قد تكون تحية الطالب على هذا الشكل <code>( Yo, I'm [firstName]" ( <em>Hi, I'm Sam</em>"</code>، بينما قد يستخدم المعلم شيئا أكثر رسمية،<br> + مثل<code>Hello, my name is [Prefix] [lastName] and I teach [Subject]. " ) <em>Hello, My name is Mr Griffiths, and I teach Chemistry</em>)</code>.</p> + +<div class="note" dir="rtl"> +<p>ملاحظة : قدرة الكائنات المتعددة على تنفيذ نفس الوظائف تسمى <strong>polymorphism</strong> (تعدد الأشكال).</p> +</div> + +<p dir="rtl">يمكنك الآن إنشاء object instances من child classes. على سبيل المثال :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p dir="rtl">في باقي المقالة سنبدأ بإلقاء نظرة عملية على البرمجة غرضية التوجه OOP في جافا سكريبت.</p> + +<h2 dir="rtl" id="الـ_Constructors_والـ_object_instances">الـ Constructors والـ object instances</h2> + +<p dir="rtl">بعض الناس يقولون أن جافاسكريبت ليست لغة كائنية حقيقية، لأنها لا تستخدم الكلمة المحجوزة class لإنشاء الكلاسات مثل العديد من لغات البرمجة الغرضية التوجه OOP. بدلاً من ذلك، الجافاسكريبت تستخدم وظائف خاصة تسمى constructor functions لتعريف الكائنات وميزاتها. هذه الوظائف مفيدة جدا لأنك غالبا ما ستواجه حالات، حيث لا يمكنك معرفة عدد الكائنات التي ستقوم بإنشائها. وبالتالي ستوفر لك الـ constructors الوسائل اللاَّزمة لإنشاء العديد من الكائنات التي تحتاج إليها بطريقة فعالة، وربط البيانات والوظائف كما هو مطلوب.</p> + +<p dir="rtl">عندما يتم إنشاء object instance جديد من الـ constructor function، لا يتم نسخ كل الوظائف الى الكائن الجديد مثل الـ «classic OO languages». بدلاً من ذلك يتم تكوين رابط وظيفي بواسطة reference chain تسمى prototype chain (شاهد <a href="/ar/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a>). حتى هذا ليس تجسيدًا حقيقـيًّا، إذا توخينا الدقة، فجافاسكريبت تستخدم آلية مختلفة لتبادل الوظائف بين الكائنات.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong> : عدم وجود الـ "classic OOP" ليس بالضرورة أمرا سيئاً، كما ذكر أعلاه، البرمجة الغرضية التوجه OOP معقدة للغاية، لكن للجافاسكريبت بعض الطرق اللطيفة للاستفادة من ميزات الـ OO دون الحاجة للتعمق كثيرا فيها.</p> +</div> + +<p dir="rtl">لنبدأ بإنشاء كلاسات عن طريق الـ constructors، وإنشاء object instances منها في جافاسكريبت.<br> + أولاً وقبل كل شيء، نود منك عمل نسخة من الملف التالي <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> الذي سبق وأن عملنا عليه في الدرس السابق.</p> + +<h3 dir="rtl" id="مثال_سهل">مثال سهل</h3> + +<p dir="rtl">دعونا نبدأ بالنظر في كيفية تعريف شخص من خلال دالة عادية. أضف هذه الدالة أدناه إلى التعليمات البرمجية الموجودة لديك:</p> + +<pre class="brush: js" dir="rtl">function createNewPerson(name) +{ + var obj = {}; + obj.name = name; + obj.greeting = function () { + alert('Hi! I\'m ' + this.name + '.'); + } + return obj; +}</pre> + +<p dir="rtl">يمكنك الآن إنشاء Person جديد بواسطة استدعاء هذه الدالة، حاول إدخال الأسطر التالية في console الجافاسكريبت في المتصفح الخاص بك:</p> + +<pre class="brush: js" dir="rtl">var salva = createNewPerson('salva'); +salva.name; +salva.greeting();</pre> + +<p dir="rtl">يعمل بشكل جيد، ولكنه عمل متعب قليلا. إذا كنا نعرف أننا سننشئ كائنًـا، لماذا نحتاج إلى إنشاء كائن جديد فارغ ونعود إليه (عبر return)؟ من حسن الحظ، جافاسكريبت تزودنا باختصار مفيد على شكل constructor functions، دعونا الآن ننشئ واحدا !</p> + +<p dir="rtl">قم باستبدال الدالة السابقة بهذه :</p> + +<pre class="brush: js">function Person(name) +{ + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + +<p dir="rtl">الـ constructor function هو نسخة الجافاسكريبت فيما يتعلق بال class.<br> + ستلاحظ أن لديها كافة الميزات التي تتوقعها في الدالة، على الرغم من أنها لا تقوم بإرجاع أي شيء، ولا تقوم بإنشاء كائن، لحد الآن هي مجرد تعريف للـخصائص <code>(properties)</code> والوظائف <code>(methods)</code>، سترى أيضا هذه الكلمة <code>this</code> المستخدمة هنا، فكرتها أنه كلما تم إنشاء أحد الـ object instances، فإن الـ object's name property سيساوي قيمة الـ name الممررة إلى الـ constructor call، والوظيفة () greeting ستستخدم قيمة name الممررة إلى الـ constructor call أيضا.</p> + +<p dir="rtl"><strong>الـ constructor call هو الذي يكون على هذا الشكل new Object(parameters) كما سنرى بعد قليل.</strong></p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة </strong>: عادة ما يبدأ اسم الـ constructor function بحرف كبير - يتم استخدام هذا التقليد حتى يسهل التعرف على الـ constructor functions في التعليمات البرمجية بسهولة.</p> +</div> + +<p dir="rtl">كيف يمكننا استدعاء الـ constructor لإنشاء بعض الكائنات؟</p> + +<p dir="rtl">أضف الأسطر التالية أدناه الى اسفل التعليمات البرمجية الخاص بك:</p> + +<pre class="brush: js">var person1 = new Person('Bob'); +var person2 = new Person('Sarah');</pre> + +<p dir="rtl">احفظ التعليمات البرمجية الخاصة بك واعد تحميل الصفحة، وحاول إدخال الأسطر التالية في حقل المدخلات الخاص بك (كل على حدة) :</p> + +<pre class="brush: js" dir="rtl">person1.name +person1.greeting() +person2.name +person2.greeting()</pre> + +<p dir="rtl">جميل! اصبح لدينا كائنان جديدان في الصفحة، تم تخزين كل منهما ضمن namespace مختلفين، للوصول إلى الخصائص والوظائف الخاصة بهما، عليك أن تبدأ بالاتصال اما مع person1 أو person2، هما الان مغلفين بدقة، وبالتالي سنضمن عدم تشابك الوظائف مع بعضها، لاحظ ان لديهم نفس الخاصية name ونفس الوظيفة () greeting، الا أن كل واحد منهما سيحصل على القيمة name التي تم تعيينها له. هذا واحد من الاسباب التي تعرفنا على اهمية <code>this</code>، حيث انها ستشير الى الكائن الخاص بها وليس لشئ اخر.</p> + +<p dir="rtl">دعونا ننظر في ال constructor calls مرة أخرى :</p> + +<pre class="brush: js">var person1 = new Person('Bob'); +var person2 = new Person('Sarah');</pre> + +<p dir="rtl">في كل حالة من الحالتين، يتم استخدام الكلمة المحجوزة <code>new</code> لاخبار المتصفح بأننا نريد إنشاء object instance جديد، متبوعة باسم الدالة و ال parameters المطلوبة بين الأقواس، ويتم تخزين النتيجة في متغير، وهي شبيهة جدا بكيفية استدعاء standard function، ويتم إنشاء كل instance وفقا لهذا التعريف:</p> + +<pre class="brush: js">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + +<p dir="rtl">بعد أن يتم إنشاء الكائنات الجديدة، فعليا، ستحتوي المتغيرات person1 و person2 على الكائنات التالية على هذا النحو :</p> + +<pre class="brush: js">{ + name : 'Bob', + greeting : function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +{ + name : 'Sarah', + greeting : function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p dir="rtl">قلنا فعليا لأنه في الواقع الفعلي لا يزال يتم تعريف الوظائف في ال class، وليس في object instances، على عكس ال object literal كما راينا سابقا.</p> + +<h3 dir="rtl" id="انشاء_constructor">انشاء constructor</h3> + +<p dir="rtl">المثال الذي راينا اعلاه، كان مجرد مقدمة، دعونا الان ننشئ Person() constructor function. فعلي.</p> + +<p dir="rtl">قم بحذف التعليمات البرمجية التي قمت بإدراجها حتى الآن، واضف هذا ال constructor بدلا منه – هو بالضبط نفس المثال البسيط اعلاه من حيث المبدأ، مع القليل من التعقيد :</p> + +<pre class="brush: js">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 + '.'); + }; +};</pre> + +<p dir="rtl">الآن أضف ال constructor call التالي، لإنشاء object instance من ال constructor خاصتنا :</p> + +<pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + +<p dir="rtl">يمكنك الآن الوصول إلى الخصائص والوظائف مثلما فعلنا مع الكائن اعلاه :</p> + +<pre class="brush: js">person1['age'] +person1.interests[1] +person1.bio() +// etc.</pre> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: إذا كنت تواجه صعوبة في الحصول على هذا العمل، حاول مقارنة التعليمات البرمجية الخاصة بك مع التعليمات الخاصة بنا — see <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (also <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">see it running live</a>).</p> +</div> + +<h3 dir="rtl" id="امتحان_بسيط">امتحان بسيط</h3> + +<p dir="rtl">في هذا الامتحان البسيط وجب عليك إضافة بضعة أسطر اضافية الى الكائن Person خاصتك، ومحاولة جلب وإعداد الاعضاء من ناتج ال object instances.</p> + +<p dir="rtl">هناك مشكلتين بخصوص الوظيفة ()bio :<br> + أ- مخرجاتها ستكون دائما عبارة عن الضمير هو "He"، حتى وان كان الشخص انثى.<br> + ب- الوظيفة bio سترجع اثنين من الاهتمامات (interests) فقط، حتى وان تم تعيين أكثر من ذالك في مصفوفة الاهتمامات interests.<br> + يمكن العمل على حل هذه المشكلة داخل ال ?( class definition ( constructor.<br> + يمكنك وضع أي كود تريده داخل ال constructor (على الأرجح سوف تحتاج لبضع جمل شرطية "if..else if...else" وحلقة "for").<br> + مطلوب منك حل هذه المشكلة آخدا بعين الاعتبار نوع الجنس (ذكر/انثى). وايضا عدد الاهتمامات interests كان تكون 1 أو 2 أو أكثر من 2. </p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة </strong>: إذا واجهتك مشكلة، فقد قمنا بتوفير الاجابة، <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">answer inside our GitHub repo</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">see it live</a>) — ننصح بالاعتماد على نفسك اولا !.</p> +</div> + +<h2 dir="rtl" id="طريقة_اخرى_لانشاء_ال_object_instances">طريقة اخرى لانشاء ال object instances</h2> + +<p dir="rtl">حتى الآن رأينا طريقتان مختلفتان لإنشاء ال object instance :</p> + +<ol dir="rtl"> + <li>باستخدام <a href="/ar/docs/Learn/JavaScript/Objects/Basics#أساسيات_الكائن"> الاعلان عن ال object literal</a> (الدرس السابق).</li> + <li>باستخدام constructor function (انظر أعلاه).</li> +</ol> + +<p dir="rtl">هذا منطقي, ولكن هناك طرق أخرى، نريد ان نجعلها مالوفة لديك في حالة مصادفتها في مكان ما على شبكة الويب.</p> + +<h3 dir="rtl" id="The_Object()_constructor">The Object() constructor</h3> + +<p dir="rtl">يمكنك استخدام ال <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> constructor لانشاء كائن جديد، نعم، حتى الكائنات العامة تحتوي على constructor والذي بدوره يولد كائنا فارغا.</p> + +<p dir="rtl">حاول ادخال السطر التالي في console المتصفح الخاص بك :</p> + +<pre class="brush: js" dir="rtl">var person1 = new Object();</pre> + +<p dir="rtl">سيقوم هذا بتخزين كائن فارغ في المتغير person1. يمكنك بعد ذالك اضافة الخصائص والوظائف لهدا الكائن،<br> + باستخدام نقطة الترميز او باستخدام اقواس الترميز، حسب الطلب. جرب هذا المثال :</p> + +<pre class="brush: js">person1.name = 'Chris'; +person1['age'] = 38; +person1.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); +}</pre> + +<p dir="rtl">يمكنك ايضا تمرير object literal الى ال Object() constructor ك parameter معبأة على شكل properties/methods. جربه بنفسك :</p> + +<pre class="brush: js">var person1 = new Object({ + name : 'Chris', + age : 38, + greeting : function() { + alert('Hi! I\'m ' + this.name + '.'); + } +});</pre> + +<h3 dir="rtl" id="باستخدام_الوظيفة_()create">باستخدام الوظيفة ()create</h3> + +<p dir="rtl">الجافاسكريبت لديها وظيفة مبنية مسبقا (built-in method) تسمى <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create</a></code>, والتي تسمح لك بإنشاء object instance جديد استناداً إلى كائن موجود.</p> + +<p dir="rtl">جرب ادخال هذا السطر في console المتصفح الخاص بك :</p> + +<pre class="brush: js">var person2 = Object.create(person1);</pre> + +<p dir="rtl">والان جرب هذه :</p> + +<pre class="brush: js">person2.name +person2.greeting()</pre> + +<p dir="rtl">سترى أن person2 قد تم إنشاؤه استناداً إلى person1 — فاصبح يمتلك نفس الخصائص والوظائف المتاحة لل person1 وهذا مفيد جداً، حيث أنه سيسمح لك بإنشاء object instances جديد، دون الحاجة إلى تعريف ال constructor.<br> + الجانب السلبي هو أن ال <code>()create</code> غير مدعومة من قبل بعض المتصفحات، فيما يتعلق بالعودة ك constructors ( <span class="short_text" id="result_box" lang="ar"><span>IE8</span> وما قبله</span> لا يدعم هذه الوظيفة ) ، بالإضافة إلى ذلك يعتقد البعض أن ال constructors تمنح التعليمات البرمجية الخاصة بك مميزات اكثر. يمكنك إنشاء constructors خاصة بك في مكان واحد، ومن ثم إنشاء instances حسب الحاجة،</p> + +<p dir="rtl">ومع ذلك، إذا لم تكن قلقا جداً بشأن دعم المتصفحات القديمة حقاً، وتحتاج فقط لبضع نسخ من الكائن، فان انشاء constructor قد يكون مبالغة بالنسبة للتعليمات البرمجية الخاصة بك. الأمر متروك لك ولما تفضله. ببساطة بعض الناس يجدون ال <code>()create</code>. سهلة في الفهم والاستخدام.</p> + +<p dir="rtl">سوف نستكشف ال <code>()create</code> بمزيد من التفصيل في وقت لاحق.</p> + +<h2 dir="rtl" id="ملخص">ملخص</h2> + +<p dir="rtl">قدمت هذه المقالة طريقة مفصلة حول ال object-oriented نظريا، هذه ليست القصة بأكملها، ولكنها تعطيك فكرة عن ما نتعامل معه هنا. باﻹضافة إلى ذلك، فقد راينا الكيفية التي ترتبط بها جافا سكريبت، وكيف انها تختلف عن مفهوم ال "classic OOP"، راينا كذالك، كيفية تنفيذ ال الكلاسات classes في الجافاسكريبت باستخدام ال constructor functions، وطرق مختلفة لتوليد ال object instances.</p> +</div> + +<p dir="rtl"><strong>ان شاء الله في الدرس القادم سوف نستكشف prototypes الجافا سكريبت.</strong></p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p> diff --git a/files/ar/learn/javascript/objects/object_prototypes/index.html b/files/ar/learn/javascript/objects/object_prototypes/index.html new file mode 100644 index 0000000000..1e91d18013 --- /dev/null +++ b/files/ar/learn/javascript/objects/object_prototypes/index.html @@ -0,0 +1,248 @@ +--- +title: ال Object prototypes +slug: Learn/JavaScript/Objects/Object_prototypes +translation_of: Learn/JavaScript/Objects/Object_prototypes +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div> + +<p class="summary" dir="rtl">ال Prototypes هي الآلية التي تعتمدها الجافاسكريبت للوراثة، بمعنى آخر، يمكننا من خلال ال Prototypes جعل كائن يرث مميزات كائن آخر. وهي تعمل بشكل مختلف عن مفهوم آلية الوراثة في اللغات الغرضية التوجة الكلاسيكية. في هذا الدرس سنكتشف هذا الاختلاف، وسنرى كيف تعمل ال prototype chains، وسنلقي نظرة حول كيفية إضافة وظيفة معينة لـ constructors موجودة عن طريق الخاصية prototype. </p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات الأساسية :</th> + <td dir="rtl">دراية لا بأس بها بخصوص الحاسوب، الإلمام بمبادئ وأساسيات الـ HTML وCSS وجافاسكريبت (راجع <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) وأساسيات بناء الكائنات في الجافاسكريبت OOJS (راجع <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف :</th> + <td dir="rtl">فهم جافاسكريبت object prototypes، وكيف تعمل ال prototype<strong> </strong> chains، وكيفية إضافة وظائف جديدة على الخاصية prototype.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الجافا_سكريبت_لغة_تعتمد_على_ال_prototype_؟">الجافا سكريبت لغة تعتمد على ال prototype ؟</h2> + +<div style="font-size: 15px; font-family: 'tahoma';"> +<p dir="rtl">غالبا ما توصف جافاسكريبت، على أنها لغة تعتمد على البروتوتايب (prototype-based language)، بمعنى، ان كل <strong><code>كائن</code></strong> في الجافاسكريبت يحتوي على <strong><code>الكائن</code></strong> <strong><code>prototype</code></strong>، الذي يرث خصائص ووظائف <strong><code>ال </code></strong> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>. الكائن <strong><code>prototype</code></strong> يمكنه أيضا أن يحتوي على <strong><code>كائن prototype</code></strong> خاص به، ويرث خصائصه ووظائفه ايضا، وهكذا ودواليك. يعرف هذا السلوك بال prototype chain (سلسلة النمودج). وهذا يشرح، كيف انه بإمكان كائن معين ان يصل لخصائص ووظائف مُعَرَّفة في كائن اخر.</p> + +<p dir="rtl">حسنا، حتى نكون أكثر دقة، الخصائص والوظائف مُعَرَّفة في الـ Objects' constructor functions وليس في الـ object instances (مثيلات الكائن).</p> + +<p dir="rtl">بالنسبة للبرمجة الكلاسيكية غرضية التوجه classic OOP، يتم تعريف الكلاسات، بعد أن يتم إنشاء object instances، ويتم نسخ كافة الخصائص والوظائف المعرفة في الكلاس فوق ال instance.<br> + في الجافاسكريبت، الأمر مختلف، حيث يتم تكوين رابط بين الـ object instance والـ constructor الخاص به. يمكن تشبيه الأمر بتكوين (حلقة في سلسلة ال <code>prototype</code>)، ويتم الوصول إلى الخصائص والوظائف من الـ constructor، من خلال التنقل صعودا في السلسلة. بمعنى اخر، سيبدأ مُفسِّر الجافاسكريبت بالبحث داخل النمادج <strong><code>prototypes،</code></strong> عن الخاصّية او الوظيفة المطلوبة، من اسفل سلسلة الوراثة، ويكمل بالبحث حتى يصل الى اعلاها.</p> + +<p dir="rtl">دعونا نلقي نظرة على هذا المثال ليصبح الأمر أكثر وضوحا.</p> + +<h2 dir="rtl" id="فهم_ال_prototype_objects">فهم ال prototype objects</h2> + +<p dir="rtl">لنَـعُد إلى المثال الذي انتهينا من كتابتة Person() constructor، قم بتحميل المثال التالي في المتصفح الخاص بك، إذا لم يكن لديك المثال الذي عملنا عليه في الدرس السابق استخدم المثال الخاص بنا <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> او (قم بنسخ <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">source code</a>).</p> + +<p dir="rtl">في هذا المثال قمنا بتعريف constructor function، كالتالي :</p> + +<pre class="brush: js">function Person(first, last, age, gender, interests) { + + // property and method definitions + this.frist = frist; + //etc.. +};</pre> + +<p dir="rtl">ثم قمنا بإنشاء object instance منه هكذا :</p> + +<pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + +<p dir="rtl">إذا قمت بكتابة "<strong>.</strong><code>person1</code>" في console الجافاسكريبت، ستلاحظ ان المتصفح يقوم بالاكمال التلقائي ويظهر اسماء الاعضاء الموجودة في هذا الكائن. </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13853/object-available-members.png" style="display: block; margin: 0 auto;"></p> + +<p dir="rtl">في هذه القائمة، نرى الاعضاء المعرفة في ال Person() constructor، الذي يمثله ال <strong><code>person1</code></strong> وهذه الاعضاء هي <code>name, age, gender, interests, bio</code> و <code>greeting</code>. كما نرى ايضا بعض الأعضاء الآخرين مثل <code>watch ،valueOf</code>،...الخ. وهي معرفة في <code>prototype</code> ال Person() constructor، ال <code>prototype</code> الخاص بال Person() constructor هو ال <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> نفسه.</p> + +<p dir="rtl">والرسم التبياني التالي يوضح لنا، كيفة عمل ال prototype chain.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png" style="display: block; height: 150px; margin: 0px auto; width: 700px;"></p> + +<p dir="rtl">فماذا سيحدث إذا قمنا باستدعاء وظيفة على ال <strong><code>person1</code></strong>، وهي احدى الوظائف المعرفة في ال Object؟. على سبيل المثال:</p> + +<pre class="brush: js">person1.valueOf()</pre> + +<p dir="rtl">ببساطة فهذه الوظيفة <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">()</a></code><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">valueOf</a></code> مملوكة لل <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> وبما ان بروتوتايب ال <code>()Person</code> هو ال <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> وال <strong><code>person1</code></strong> هو من يمثله فسيرث ال <strong><code>person1</code></strong> هذه الخاصية من <code>Object</code>. مهمة ال <code>valueOf</code> هي العودة بقيمة الكائن الذي تم استدعاؤها عليه، حاول تجربتها وسترى ما الذي سيحدث.</p> + +<p dir="rtl">في هذه الحالة ستسير عملية البحث على الشكل التالي:</p> + +<ul dir="rtl"> + <li>في البداية سيقوم المتصفح بالتحقق ما اذا كان الكائن <strong><code>person1</code></strong> يحتوي على الوظيفة <code>()valueOf</code>. (لاحظ هنا، بدا البحث من اسفل السلسلة كما ذكرنا اعلاه).</li> + <li>اذا لم يتم ذالك، سيقوم المتصفح بالتحقق ما اذا كان ال Person() constructor يحتوي على الوظيفة <code>()valueOf</code></li> + <li>اذا لم يتم ذالك، سيقوم المتصفح بالتحقق ما اذا كان <code>prototype</code> ال Person() constructor يحتوي على الوظيفة <code>()valueOf</code></li> + <li>اذا لم يتم ذالك ايضا، سيقوم المتصفح بالتحقق ما اذا كان <code>__proto__</code> ال Person() constructor الذي هو (Object) يحتوي على الوظيفة <code>()valueOf</code><br> + اذا تم، ستستدعى الوظيفة المطلوبة للعمل عليها، وكل شئ على ما يرام. اذا لم يجد ما يبحث عنه من ادنى السلسلة الى اعلاها، سيعود ب <strong><code>null</code></strong> (و <code>null</code> هي اعلى السلسلة).</li> +</ul> + +<div class="note" dir="rtl"> +<p>تذكير: الخصائص والوظائف لا يتم نسخها من كائن إلى آخر في ال ptototype chain —<br> + بل يتم الوصول إليها من خلال التنقل صعودا في السلسلة كما هو موضح أعلاه.</p> +</div> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة:</strong> رسميا لا توجد طريقة للوصول مباشرة الى الكائن prototype داخل كائن. "الروابط" بين العناصر موجودة في السلسلة ويتم تعريفها في خاصية داخلية، يشار إليها ب [[prototype]] في مواصفات لغة جافا سكريبت (see {{glossary("ECMAScript")}}). ومع ذلك فمعظم المتصفحات الحديثة تحتوي على خاصية متاحة لها تسمى <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> (لديها 2 underscores في كلا جوانبها), والتي تحتوي على الكائن prototype. على سبيل المثال جرب:<br> + <code> __</code><strong><code>person1.__proto</code> او <code> __eprson1.__proto__.__proto</code></strong><br> + لمشاهدة ما يشبه السلسلة في التعليمات البرمجية!</p> +</div> + +<h2 dir="rtl" id="الخاصية_prototype_اين_يتم_تعريف_الأعضاء_الموروثة">الخاصية prototype : اين يتم تعريف الأعضاء الموروثة</h2> + +<p dir="rtl">اذاً، أين يتم تعريف الخصائص والوظائف الموروثة؟<br> + إذا نظرتم إلى صفحة مرجع ال <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> سترون هناك في الجانب الأيسر عددا كبيرا من الخصائص والوظائف المدرجة، البعض منها موروثة، واخرى غير موروثة، لم هذا؟</p> + +<p dir="rtl">الجواب، هو أن الاعضاء الموروثة هي تلك المعرفة في الخاصية prototype (يمكن استدعاؤها تحت ال namespace)، اي تلك التي تبدأ ب <strong>.<code>Object.prototype</code></strong> وليست تلك التي تبدأ بمجرد <strong>.<code>Object</code></strong>، قيمة الخاصية prototype هي كائن، والتي هي في الاساس حزمة او وعاء لتخزين الخصائص والوظائف التي نريدها أن تكون موروثة من قبل الكائنات السفلية في ال prototype chain.</p> + +<p dir="rtl">حتى ال <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch">Object.prototype.watch</a></code> او <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf</a></code>، متاحة لأي نوع من أنواع الكائنات التي ترث من ال <strong><code>Object.prototype</code></strong> بما في ذلك ال object instances الجديدة التي يتم إنشاؤها من ال constructor، (ك <code>person1</code> مثلا).</p> + +<p dir="rtl"><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">()</a><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></code> ،<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code>، والأعضاء الاخرى غير معرفة داخل حزمة ال prototype وهي غير موروثة بواسطة ال object instances أو أنواع الكائنات التي ترث من ال ()Object. هي خصائص ووظائف متاحة فقط لل Object() constructor نفسه.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة:</strong> يبدو هذا غريبا - كيف يمكن أن يكون لديك وظيفة معرفة في ال constructor، الذي هو في حد ذاته function؟ حسنا، هي ايضا function من النوع object - راجع مرجع ال <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code> constructor حتى تتاكد بنفسك.</p> +</div> + +<p dir="rtl">يمكنك التحقق من خصائص البروتوتايب الموجودة بنفسك، ارجع الى مثالنا السابق وحاول ادخال السطر التالي في الجافاسكريبت console:</p> + +<pre class="brush: js">Person.prototype</pre> + +<p dir="rtl">المخرجات لن تظهر لك الكثير، لاننا حتى الان، لم نقم باضافة أي شيء في بروتوتايب ال constructor الخاص بنا، بشكل افتراضي، دائماً يبدأ بروتوتايب ال constructor فارغا. الآن جرب ما يلي:</p> + +<pre class="brush: js">Object.prototype</pre> + +<p dir="rtl">سترى عددا كبيرا من الوظائف المعرفة في الخاصية <code>prototype</code> الخاصة بال <code>Object</code>، ثم التي تتوفر على الكائنات التي ترث من ال <code>Object</code>، كما وضحنا في وقت سابق.</p> + +<p dir="rtl">سنرى أمثلة أخرى للوراثة عن طريق سلسلة البروتوتايب <strong><code>prototype chain</code></strong> في جميع أنحاء جافا سكريبت، حاول البحث في الوظائف والخصائص المعرفة في بروتوتايب الكائنات العامة ك <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">،Date</a></code> <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">،Number</a></code>، و <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> على سبيل المثال. كلها تحتوي على عدد من الأعضاء المعرفة في البروتوتايب الخاص بها، على سبيل المثال عندما نقوم بإنشاء سلسلة نصية (string)، مثل هذه:</p> + +<pre class="brush: js">var myString = 'This is my string.';</pre> + +<p dir="rtl"><code>myString</code>، فور انشائها سيتاح لها العديد من الوظائف المفيدة، مثل <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split">()</a></code><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split">split</a></code> و <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split">()</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf</a></code> و <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">()</a></code><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace</a></code> ... الخ.</p> + +<div class="warning" dir="rtl"> +<p><strong>هام</strong>: الخاصية prototype هي واحدة من أكثر الاجزاء ارباكا لجافا سكريبت، قد تعتقد أن <code>this</code> تشير الى الكائن prototype للكائن الحالي، لكن ليس هذا ما يحدث (تذكر ان هذا كائن داخلي يمكن الوصول إليه بواسطة ال __proto__ ). ال prototype هي خاصية تحتوي على الكائن الذي ستعرف فيه الاعضاء التي تريدها أن تكون موروثة.</p> +</div> + +<h2 dir="rtl" id="إعادة_النظر_في_الوظيفة_()create">إعادة النظر في الوظيفة ()create</h2> + +<p dir="rtl">راينا سابقا كيف يمكن استخدام الوظيفة <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create</a></code> لانشاء object instance.</p> + +<p dir="rtl">على سبيل المثال، حاول تجربة هذا في console الجافا سكريبت في المثال الخاص بك:</p> + +<pre class="brush: js">var person2 = Object.create(person1);</pre> + +<p dir="rtl">ماتفعله الوظيفة <code>()create</code> في الواقع هو انشاء كائن جديد، من الكائن <code>prototype</code> المحدد، في هذه الحالة، سيتم إنشاء <code>person2</code> باستخدام <code>person1</code> على شكل كائن <code>prototype</code>، يمكنك التحقق من ذلك عن طريق إدخال ما يلي في ال console :</p> + +<pre class="brush: js">person2.__proto__</pre> + +<p dir="rtl">النتيجة: إرجاع الكائن <code>person1</code>.</p> + +<h2 dir="rtl" id="الخاصية_constructor">الخاصية constructor</h2> + +<p dir="rtl">كل object instance يحتوي على الخاصية <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> والتي تشير إلى ال constructor function الأصلي الذي أنشأ ال instance.</p> + +<p dir="rtl">على سبيل المثال، حاول ادخال هذه الأوامر في ال console:</p> + +<pre class="brush: js">person1.constructor +person2.constructor</pre> + +<p dir="rtl">المفروض على كل منهما العودة لل Person() constructor، كما سيحتوي كل منهما على التعريف الأصلي لهذه ال instances.</p> + +<p dir="rtl">خدعة ذكية، يمكنك وضع الاقواس في نهاية الخاصية constructor (مع البرامترات المطلوبة) لانشاء object instance اخر من هذا ال constructor، ال constructor هو في النهاية function، لذالك يمكنك استدعاؤها باستخدام الأقواس، ستحتاج فقط إلى تضمين الكلمة المحجوزة new لتحديد أنك تريد استخدام هذه ال function ك constructor.</p> + +<p dir="rtl">حاول ادخال هذا في ال console:</p> + +<pre class="brush: js">var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);</pre> + +<p dir="rtl"><span id="result_box" lang="ar"><span>الآن</span> <span>حاول الوصول إلى</span> <span>خصائص الكائن</span> <span>الجديد الخاص بك</span><span>، على سبيل المثال</span><span>:</span></span></p> + +<pre class="brush: js" dir="rtl">person3.name.first +person3.age +person3.bio()</pre> + +<p dir="rtl">هذا سيعمل بشكل جيد. وعلى الارجح لن تحتاج لاستخدامه في كثير من الأحيان، ولكن يمكن أن يكون مفيدا حقا، عندما تريد إنشاء instance جديد لا يشير إلى ال constructor الأصلي <span id="result_box" lang="ar"><span>المتاح</span></span>.</p> + +<p dir="rtl">الخاصية constructor لها استخدامات أخرى كذالك. على سبيل المثال، إذا كان لديك<br> + object instance وترغب في إرجاع اسم ال contructor وهو instance، يمكنك استخدام ما يلي:</p> + +<pre class="brush: js">instanceName.constructor.name</pre> + +<p dir="rtl">جرب هذا، على سبيل المثال:</p> + +<pre class="brush: js">person1.constructor.name</pre> + +<h3 dir="rtl" id="التعديل_على_ال_prototypes">التعديل على ال prototypes</h3> + +<p dir="rtl"><span id="result_box" lang="ar"><span>دعونا نلقي</span> <span>نظرة على مثال</span> يقوم <span>بتعديل</span><span> الخاصية</span> </span> <code>prototype</code> <span lang="ar"><span>الخاصة بال</span> </span>constructor<span lang="ar"><span>.</span></span></p> + +<p dir="rtl">نعود إلى مثالنا <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> قم بعمل نسخة من الكود التالي <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">source code</a>. اسفل كود الجافاسكريبت، اضف التعليمة البرمجية التالية، وهي خاصة باظافة وظيفة جديدة على بروتوتايب ال constructor : </p> + +<pre class="brush: js">Person.prototype.farewell = function() { + alert(this.name.first + ' has left the building. Bye for now!'); +}</pre> + +<p dir="rtl">احفظ التعليمات البرمجية وقم بتحميل الصفحة في المتصفح، وحاول إدخال ما يلي في حقل المدخلات الخاص بك:</p> + +<pre class="brush: js">person1.farewell();</pre> + +<p dir="rtl">ستحصل على رسالة تنبيه معروضة (alert)، تضم اسم الشخص كما هو محدد داخل ال constructor. وهذا مفيد حقاً، ولكن الاكثر افائدة هو أنه سيتم تحديث سلسلة الوراثة باكملها بشكل حيوي، و بشكل تلقائي يتم جعل الوظيفة الجديدة متاحة لجميع ال object instances المشتقة من ال constructor.</p> + +<p dir="rtl">لنفكر في هذا للحظة. في التعليمة البرمجية خاصتنا، قمنا بتعريف ال Person constructor<br> + ثم قمنا بانشاء instance object من هذا ال Person constructor وهو ال person1 ثم قمنا باظافة الوظيفة الجديدة على بروتوتايب ال Person constructor.</p> + +<pre class="brush: js">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!'); +}</pre> + +<p dir="rtl">ولكن الوظيفة <code>()farewell</code> لا تزال متاحة في ال <code>person1</code> object instance —<span id="result_box" lang="ar"><span> تم</span> تحديث <span>الوظائف</span> <span>المتاحة لها</span> <span>تلقائيا</span></span>، هذا يثبت ما قلناه سابقا عن ال <code>prototype chain</code>. والمتصفح سيبحث صعودا في السلسلة لإيجاد الوظائف التي لم يتم تعريفها في ال object instance نفسها، بدلا من تلك الوظائف التي يتم نسخها إلى ال instance. وهذا يجعلها قوية جداً، و نظامها الوظيفي قابل للتوسع/للتمدد.</p> + +<div class="note" dir="rtl"> +<p><strong>Note</strong>: إذا كنت تواجه صعوبة في الحصول على هذا العمل, الق نظرة على المثال الخاص بنا <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">oojs-class-prototype.html</a> (شاهد ايضا <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">running live</a> ).</p> +</div> + +<p dir="rtl">نادرا ما ستشاهد خصائص معرفة في الخاصية prototype، على سبيل المثال يمكن إضافة خاصية جديدة كالتالي:</p> + +<pre class="brush: js">Person.prototype.fullName = 'Bob Smith';</pre> + +<p dir="rtl">ولكن هذه ليست مرنة جداً، حيث ان ال person لا يمكنه استدعاءها، من الافضل القيام بذلك من خلال بناء <code>fullName</code> خارج <code>name.first</code> و <code>name.last</code>:</p> + +<pre class="brush: js">Person.prototype.fullName = this.name.first + ' ' + this.name.last;</pre> + +<p dir="rtl">ومع ذالك فهي لن تعمل، في هذه الحالة <code><strong>this</strong></code> ستشير الى النطاق العام (global scope). وليس الى نطاق الدالة (function scope). استدعاء هذه الخاصية سيعود ب undefined undefined. سيعمل هذا بشكل جيد في الوظائف التي عرفناها سابقا في ال prototype لانها توجد داخل ال function scope، والتي ستنقل بنجاح إلى نطاق مثيل الكائن (object instance scope). لذا قد تقوم بتعريف خصائص ثابتة (constant properties — أي تلك التي لا تحتاج للتغيير) في ال prototype، ولكن عموما فهي تعمل بشكل أفضل لتعريف خصائص داخل ال constructor.</p> + +<p dir="rtl">في الواقع، النمط الشائع إلى حد كبير بخصوص تعريف الكائن، هو ان يتم تحديد الخصائص داخل ال constructor، والوظائف على ال prototype. وهذا يجعل الكود اسهل في القراءة، كما سيحتوي ال constructor على الخصائص المعرفة فقط، ويتم تقسيم الوظائف في بلوكات منفصلة، مثلا:</p> + +<pre class="brush: js">// 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.</pre> + +<p dir="rtl">هذا النمط من العمل يمكن ان نراه في Piotr Zalewa's <a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">school plan app</a>.</p> + +<h3 id="Summary">Summary</h3> + +<p dir="rtl">غطت هذه المادة، جافاسكريبت <strong><code>object prototypes</code></strong>، وكيف يسمح ال prototype object chains للكائنات أن ترث الميزات من بعضها البعض، وكيف يمكن استخدام الخاصية prototype لإضافة وظائف جديدة على ال constructors، وغيرها من الموضوعات ذات الصلة.</p> + +<p><strong>في المقال القادم سنرى كيفية تنفيذ الوراثة بين اثنين من الكائنات الخاصة بك.</strong></p> +</div> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p> diff --git a/files/ar/learn/server-side/django/index.html b/files/ar/learn/server-side/django/index.html new file mode 100644 index 0000000000..27acf45d5e --- /dev/null +++ b/files/ar/learn/server-side/django/index.html @@ -0,0 +1,70 @@ +--- +title: Django Web Framework (Python) +slug: Learn/Server-side/Django +tags: + - Beginner + - CodingScripting + - Intro + - Learn + - NeedsTranslation + - Python + - Server-side programming + - TopicStub + - django +translation_of: Learn/Server-side/Django +--- +<div>{{LearnSidebar}}</div> + +<p><font>Django هو إطار ويب بشعبية كبيرة ومميز بالكامل ، مكتوب بلغة Python. </font><font>توضح لك هذه الوحدة سبب كون Django أحد أكثر أطر خادم الويب شيوعًا ، وكيفية إعداد بيئة تطوير ، وكيفية البدء في استخدامه لإنشاء تطبيقات الويب الخاصة بك.</font></p> + +<h2 id="المتطلبات_الأساسية"><font><font>المتطلبات الأساسية</font></font></h2> + +<p><font><font>قبل البدء في هذه الوحدة ، لا تحتاج إلى أي معرفة بجانغو. </font><font>من الناحية المثالية ، ستحتاج إلى فهم برمجة الويب من جانب الخادم وأطر الويب من خلال قراءة الموضوعات في </font><font>وحدة </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps"><font><font>الخطوات الأولى لبرمجة موقع الويب من جانب الخادم</font></font></a><font><font> .</font></font></p> + +<p><font><font>يوصى </font><font>بمعرفة عامة بمفاهيم البرمجة </font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/Python"><font><font>Python</font></font></a><font><font> ، ولكنها ليست ضرورية لفهم المفاهيم الأساسية.</font></font></p> + +<div class="note"> +<p><strong>Note</strong>: Python is one of the easiest programming languages for novices to read and understand. That said, if you want to understand this module better, there are numerous free books and tutorials available on the Internet to help you out (new programmers might want to check out the <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> page on the python.org wiki).</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></dt> + <dd>In this first Django article we answer the question "What is Django?" and give you an overview of what makes this web framework special. We'll outline the main features, including some advanced functionality that we won't have time to cover in detail in this module. We'll also show you some of the main building blocks of a Django application, to give you an idea of what it can do before you set it up and start playing.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></dt> + <dd>Now that you know what Django is for, we'll show you how to set up and test a Django development environment on Windows, Linux (Ubuntu), and macOS — whatever common operating system you are using, this article should give you what you need to be able to start developing Django apps.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></dt> + <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" — an example website we'll be working through and evolving in subsequent articles.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></dt> + <dd>This article shows how you can create a "skeleton" website project as a basis, which you can then go on to populate with site-specific settings, urls, models, views, and templates.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></dt> + <dd>This article shows how to define models for the <em>LocalLibrary</em> website — models represent the data structures we want to store our app's data in, and also allow Django to store data in a database for us (and modify it later on). It explains what a model is, how it is declared, and some of the main field types. It also briefly shows a few of the main ways you can access model data.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></dt> + <dd>Now that we've created models for the <em>LocalLibrary </em>website, we'll use the Django Admin site to add some "real" book data. First we'll show you how to register the models with the admin site, then we'll show you how to login and create some data. At the end we show some ways in which you can further improve the presentation of the admin site.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></dt> + <dd>We're now ready to add the code to display our first full page — a home page for the <em>LocalLibrary</em> that shows how many records we have of each model type and provides sidebar navigation links to our other pages. Along the way we'll gain practical experience in writing basic URL maps and views, getting records from the database, and using templates.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></dt> + <dd>This tutorial extends our <em>LocalLibrary</em> website, adding list and detail pages for books and authors. Here we'll learn about generic class-based views, and show how they can reduce the amount of code you have to write for common use cases. We'll also go into URL handling in greater detail, showing how to perform basic pattern matching.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt> + <dd>This tutorial extends our <em>LocalLibrary</em> website, adding a session-based visit-counter to the home page. This is a relatively simple example, but it does show how you can use the session framework to provide persistent behaviour for anonymous users in your own sites.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></dt> + <dd>In this tutorial we'll show you how to allow users to login to your site with their own accounts, and how to control what they can do and see based on whether or not they are logged in and their <em>permissions</em>. As part of this demonstration we'll extend the <em>LocalLibrary</em> website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></dt> + <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Django, and in particular the easiest way to write forms to create, update, and delete model instances. As part of this demonstration we'll extend the <em>LocalLibrary</em> website so that librarians can renew books, and create, update, and delete authors using our own forms (rather than using the admin application).</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt> + <dd>As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate <em>unit testing</em> of your website using Django's test framework.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt> + <dd>Now you've created (and tested) an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt> + <dd>Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — this article provides a practical demonstration of how Django's built-in protections handle such threats.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt> + <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd> +</dl> diff --git a/files/ar/learn/server-side/express_nodejs/index.html b/files/ar/learn/server-side/express_nodejs/index.html new file mode 100644 index 0000000000..4a5dc0699f --- /dev/null +++ b/files/ar/learn/server-side/express_nodejs/index.html @@ -0,0 +1,77 @@ +--- +title: Express web framework (Node.js/JavaScript) +slug: Learn/Server-side/Express_Nodejs +tags: + - Beginner + - CodingScripting + - Express + - Express.js + - Intro + - JavaScript + - Learn + - NeedsTranslation + - Node + - Server-side programming + - TopicStub + - node.js +translation_of: Learn/Server-side/Express_Nodejs +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Express is a popular unopinionated web framework, written in JavaScript and hosted within the Node.js runtime environment. This module explains some of the key benefits of the framework, how to set up your development environment and how to perform common web development and deployment tasks.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module you will need to understand what server-side web programming and web frameworks are, ideally by reading the topics in our <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> module. A general knowledge of programming concepts and <a href="/en-US/docs/Web/JavaScript">JavaScript</a> is highly recommended, but not essential to understanding the core concepts.</p> + +<div class="note"> +<p><strong>Note</strong>: This website has many useful resources for learning JavaScript<em> in the context of client-side development</em>: <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> (learning). The core JavaScript language and concepts are the same for server-side development on Node.js and this material will be relevant. Node.js offers <a href="https://nodejs.org/dist/latest-v10.x/docs/api/">additional APIs</a> for supporting functionality that is useful in browserless environments (e.g., to create HTTP servers and access the file system), but does not support JavaScript APIs for working with the browser and DOM.</p> + +<p>This guide will provide some information about working with Node.js and Express, and there are numerous other excellent resources on the Internet and in books — some of these linked from <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) and <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></dt> + <dd>In this first Express article we answer the questions "What is Node?" and "What is Express?" and give you an overview of what makes the Express web framework special. We'll outline the main features and show you some of the main building blocks of an Express application (although at this point you won't yet have a development environment in which to test it).</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></dt> + <dd>Now that you know what Express is for, we'll show you how to set up and test a Node/Express development environment on Windows, Linux (Ubuntu), and Mac OS X. Whatever common operating system you are using, this article should give you what you need to be able to start developing Express apps.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></dt> + <dd>The first article in our practical tutorial series explains what you'll learn and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></dt> + <dd>This article shows how you can create a "skeleton" website project, which you can then go on to populate with site-specific routes, templates/views, and databases.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></dt> + <dd>This article briefly introduces databases for Node/Express. It then goes on to show how we can use <a href="http://mongoosejs.com/">Mongoose</a> to provide database access for the <em>LocalLibrary</em> website. It explains how object schema and models are declared, the main field types, and basic validation. It also briefly shows a few of the main ways you can access model data.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></dt> + <dd>In this tutorial we'll set up routes (URL handling code) with "dummy" handler functions for all the resource endpoints that we'll eventually need in the <em>LocalLibrary</em> website. On completion, we'll have a modular structure for our route handling code, that we can extend with real handler functions in the following articles. We'll also have a really good understanding of how to create modular routes using Express.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></dt> + <dd>We're now ready to add the pages that display the <em>LocalLibrary</em> website books and other data. The pages will include a home page that shows how many records we have of each model type and list and detail pages for all of our models. Along the way, we'll gain practical experience in getting records from the database and using templates.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></dt> + <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Express, using Pug, and in particular how to write forms to create, update, and delete documents from the database.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></dt> + <dd>Now you've created an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Installing LocalLibrary on PWS/Cloud Foundry</a></dt> + <dd>This article provides a practical demonstration of how to install <em>LocalLibrary</em> on the <a href="http://run.pivotal.io">Pivotal Web Services PaaS cloud</a> — this is a full-featured, open source alternative to Heroku, the PaaS cloud service used in Part 7 of the tutorial, listed above. PWS/Cloud Foundry is definitely worth checking out if you are looking for an alternative to Heroku (or another PaaS cloud service), or simply feel like trying something different. </dd> +</dl> + +<h2 id="Adding_more_tutorials">Adding more tutorials</h2> + +<div> +<p>All existing tutorials are listed above, but if you would like to extend this module, some other interesting topics to cover include:</p> + +<ul> + <li>Using sessions.</li> + <li>User authentication.</li> + <li>User authorization and permissions.</li> + <li>Testing an Express web application.</li> + <li>Web security for Express web applications.</li> +</ul> + +<p>An assessment for the module would also make a wonderful addition!</p> +</div> diff --git a/files/ar/learn/server-side/index.html b/files/ar/learn/server-side/index.html new file mode 100644 index 0000000000..520715f1a2 --- /dev/null +++ b/files/ar/learn/server-side/index.html @@ -0,0 +1,58 @@ +--- +title: برمجة موقع الويب من ناحية الخادم +slug: Learn/Server-side +translation_of: Learn/Server-side +--- +<div dir="rtl">{{LearnSidebar}}</div> + +<p class="summary" dir="rtl"> </p> + +<p dir="rtl"><strong>المواقع الديناميكية - البرمجة من جانب الخادم </strong>عبارة عن سلسلة من الوحدات التي تُظهر كيفية إنشاء مواقع ويب ديناميكية ؛ مواقع الويب التي تقدم معلومات مخصصة استجابة لطلبات HTTP. توفر الوحدات مدخلاً عامًا للبرمجة من جانب الخادم ، إلى جانب توجيهات للمبتدئين حول كيفية استخدام الأطر الشبكية ل Django (Python) و Express (Node.js / JavaScript) لإنشاء التطبيقات الأساسية.</p> + +<p dir="rtl">تستخدم معظم مواقع الويب الرئيسية نوعًا من تقنية جانب الخادم لعرض البيانات المختلفة ديناميكيًا كما هو مطلوب. على سبيل المثال ، تخيل كم عدد المنتجات المتوفرة على Amazon ، وتخيل عدد الرسائل التي تمت كتابتها على Facebook؟ إن عرض كل هذه الصفحات باستخدام صفحات ثابتة مختلفة تمامًا سيكون غير فعال تمامًا ، لذلك تعرض هذه المواقع بدلاً من ذلك قوالب ثابتة (تم إنشاؤها باستخدام <a href="https://developer.mozilla.org/ar/docs/Learn/HTML">HTML </a>و <a href="https://developer.mozilla.org/ar/docs/Learn/CSS">CSS</a> و <a href="https://developer.mozilla.org/ar/docs/Learn/JavaScript">JavaScript</a> ) ، ثم تقوم بتحديث البيانات المعروضة داخل تلك النماذج ديناميكيًا عند الحاجة ، على سبيل المثال ، عندما تريد عرض منتج مختلف على Amazon.</p> + +<p dir="rtl">في عالم تطوير الويب الحديث ، ينصح بالتعلم عن التطوير من جانب الخادم.</p> + +<p class="summary" dir="rtl"> </p> + +<p dir="rtl"> </p> + +<h2 dir="rtl" id="مسار_التعلم"><span class="tlid-translation translation"><span title="">مسار التعلم</span></span></h2> + +<p dir="rtl"> </p> + +<p dir="rtl">عادة ما تكون عملية البدء بالبرمجة من جانب الخادم أسهل من عملية التطوير من جانب العميل ، لأن مواقع الويب الديناميكية تميل إلى تنفيذ الكثير من العمليات المتشابهة (استرداد البيانات من قاعدة بيانات وعرضها في صفحة ، والتحقق من صحة البيانات المدخلة من قبل المستخدم وحفظها في قاعدة بيانات ، وفحص أذونات المستخدم ومستخدمي تسجيل الدخول ، وما إلى ذلك) ، ويتم بناؤها باستخدام أطر الويب التي تجعل هذه العمليات وغيرها من عمليات خادم الويب الشائعة سهلة.</p> + +<p dir="rtl">تعتبر المعرفة الأساسية لمفاهيم البرمجة (أو لغة برمجة معينة) مفيدة ، ولكنها ليست ضرورية. وبالمثل ، ليست هناك حاجة إلى خبرة في كتابة التعليمات البرمجية من جانب العميل ، ولكن المعرفة الأساسية ستساعدك على العمل بشكل أفضل مع المطورين الذين ينشئون "واجهة المستخدم" على جانب العميل.</p> + +<p dir="rtl">ستحتاج إلى فهم "كيفية عمل الويب". نوصيك أولاً بقراءة المواضيع التالية:</p> + +<p> </p> + +<ul dir="rtl"> + <li><a href="https://developer.mozilla.org/ar/docs/Learn/Common_questions/What_is_a_web_server">ما هو خادم الويب؟</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_software_do_I_need">ما هي البرامج التي أحتاجها لإنشاء موقع ويب؟</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">كيف تقوم بتحميل الملفات إلى خادم الويب؟</a></li> +</ul> + +<p dir="rtl"><span class="tlid-translation translation"><span title="">مع هذا الفهم الأساسي ، ستكون مستعدًا للعمل في طريقك من خلال الوحدات في هذا القسم.</span></span></p> + +<h2 dir="rtl" id="الوحدات">الوحدات</h2> + +<p dir="rtl">هذا الموضوع يحتوي على الوحدات التالية. يجب أن تبدأ بالوحدة الأولى ، ثم انتقل إلى احدى الوحدات التالية ، والتي توضح كيفية العمل مع اثنين من اللغات الشائعة جدًا من جانب الخادم باستخدام إطارات ويب مناسبة.</p> + +<dl> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">برمجة موقع الويب من ناحية الخادم الخطوات الأولى<span style="display: none;"> </span><span style="display: none;"> </span></a></dt> + <dd dir="rtl">توفر هذه الوحدة معلومات عن تكنولوجيا الخادم و برمجة مواقع الويب من جانب الخادم ، بما في ذلك إجابات على الأسئلة الأساسية حول البرمجة من جانب الخادم - "ما هو" ، "كيف تختلف عن برمجة العميل" ، و "لماذا هي كذلك مفيدة "- ونظرة عامة على بعض الأطر الأكثر شعبية على شبكة الإنترنت من جانب الخادم والإرشادات حول كيفية اختيار الأنسب لموقعك. وأخيرًا ، نقدم قسمًا تقديميًا حول أمان خادم الويب.<span style="display: none;"> </span><span style="display: none;"> </span></dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> + <dd dir="rtl"><span class="tlid-translation translation"><span title="">Django هو إطار عمل شائع للغاية ومميز للغاية من جانب الخادم ، مكتوب بلغة بايثون.</span> <span title="">تشرح الوحدة النمطية لماذا يعتبر Django إطارًا جيدًا لخادم الويب ، وكيفية إعداد بيئة تطوير وكيفية تنفيذ المهام الشائعة معها.</span></span></dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> + <dd dir="rtl"><span class="tlid-translation translation"><span title="">Express هو إطار ويب شائع ، مكتوب بلغة JavaScript ومُستضاف في بيئة تشغيل node.js.</span> <span title="">تشرح الوحدة بعض الفوائد الأساسية لهذا الإطار ، وكيفية إعداد بيئة التطوير الخاصة بك وكيفية تنفيذ مهام مشتركة لتطوير الويب ونشره.</span></span></dd> +</dl> + +<h2 dir="rtl" id="أنظر_أيضا"><span class="tlid-translation translation"><span title="">أنظر أيضا</span></span></h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt> + <dd dir="rtl"><span class="tlid-translation translation"><span title="">توفر هذه المقالة ملقم ملفات ثابت بسيطًا تم إنشاؤه باستخدام Node.js خالصًا ، وذلك لمن لا يريد استخدام إطار عمل.</span></span></dd> +</dl> |