From 41c76addc97200aa71105773397aa4edd2af6b4c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:44:35 +0100 Subject: unslug ar: move --- .../conflicting/learn/css/first_steps/index.html | 44 ++ files/ar/conflicting/learn/css/index.html | 24 + .../learn/getting_started_with_the_web/index.html | 305 +++++++++ .../learn/javascript/objects/index.html | 424 +++++++++++++ files/ar/conflicting/web/guide/index.html | 98 +++ files/ar/conflicting/web/html/element/index.html | 599 ++++++++++++++++++ files/ar/conflicting/web/html/index.html | 88 +++ files/ar/glossary/character/index.html | 20 + files/ar/glossary/first-class_function/index.html | 14 + files/ar/glossary/object/index.html | 24 + files/ar/glossary/property/index.html | 20 + files/ar/glossary/scope/index.html | 43 ++ .../index.html" | 20 - .../index.html" | 20 - .../index.html" | 14 - .../index.html" | 24 - .../index.html" | 43 -- files/ar/heesfoord007/index.html | 54 -- files/ar/html/element/article/index.html | 153 ----- files/ar/html/element/bdo/index.html | 108 ---- files/ar/html/element/headings_elements/index.html | 244 ------- files/ar/html/element/index.html | 239 ------- files/ar/html/element/span/index.html | 122 ---- files/ar/html/element/tt/index.html | 161 ----- .../how_does_the_internet_work/index.html | 116 ++++ .../index.html" | 116 ---- .../first_steps/how_css_is_structured/index.html | 178 ++++++ .../css/styling_text/styling_lists/index.html | 384 ++++++++++++ files/ar/learn/forms/index.html | 114 ++++ .../css_basics/index.html | 297 +++++++++ .../index.html" | 297 --------- files/ar/learn/how_to_contribute/index.html | 82 --- files/ar/learn/html/forms/index.html | 114 ---- files/ar/learn/html/tables/index.html | 36 ++ .../index.html" | 36 -- .../index.html" | 305 --------- files/ar/mdn/at_ten/index.html | 37 ++ files/ar/mdn/community/index.html | 46 -- files/ar/mdn/community/whats_happening/index.html | 41 -- .../howto/create_and_edit_pages/index.html | 179 ++++++ .../howto/do_a_technical_review/index.html | 67 -- .../howto/do_an_editorial_review/index.html | 58 -- .../howto/set_the_summary_for_a_page/index.html | 116 ---- .../index.html | 111 ---- .../index.html" | 43 -- .../index.html" | 179 ------ files/ar/mdn/kuma/index.html | 25 - files/ar/mdn/tools/deleting_pages/index.html | 21 - files/ar/mdn/yari/index.html | 25 + files/ar/mdn_at_ten/index.html | 37 -- .../what_are_webextensions/index.html | 56 ++ .../index.html" | 56 -- files/ar/orphaned/heesfoord007/index.html | 54 ++ .../ar/orphaned/learn/how_to_contribute/index.html | 82 +++ files/ar/orphaned/mdn/community/index.html | 46 ++ .../mdn/community/whats_happening/index.html | 41 ++ .../howto/create_an_mdn_account/index.html | 43 ++ .../howto/do_a_technical_review/index.html | 67 ++ .../howto/do_an_editorial_review/index.html | 58 ++ .../howto/set_the_summary_for_a_page/index.html | 116 ++++ .../index.html | 111 ++++ .../ar/orphaned/mdn/tools/page_deletion/index.html | 21 + .../index.html" | 63 ++ .../index.html" | 31 + .../index.html" | 65 ++ .../index.html" | 61 ++ .../api/geolocation/using_geolocation/index.html | 294 --------- .../using_the_geolocation_api/index.html | 166 ----- files/ar/web/api/geolocation_api/index.html | 294 +++++++++ .../using_the_geolocation_api/index.html | 166 +++++ files/ar/web/api/history_api/example/index.html | 416 ++++++++++++ .../\331\205\330\253\330\247\331\204/index.html" | 416 ------------ files/ar/web/api/navigator.battery/index.html | 31 - files/ar/web/api/navigator/battery/index.html | 31 + files/ar/web/css/comments/index.html | 64 ++ .../ar/web/css/css_animated_properties/index.html | 19 + .../basic_concepts_of_flexbox/index.html | 233 +++++++ .../index.html" | 233 ------- .../relationship_of_grid_layout/index.html | 623 ++++++++++++++++++ .../relationship_of_grid_layout_arabic/index.html | 623 ------------------ files/ar/web/css/transform/index.html | 136 ++++ .../index.html" | 136 ---- .../index.html" | 64 -- .../index.html" | 19 - files/ar/web/guide/css/getting_started/index.html | 44 -- .../css/getting_started/readable_css/index.html | 178 ------ .../index.html" | 384 ------------ files/ar/web/guide/css/index.html | 24 - files/ar/web/guide/graphics/index.html | 47 ++ .../guide/html/html5/html5_element_list/index.html | 599 ------------------ files/ar/web/guide/mobile/index.html | 18 + .../index.html" | 47 -- files/ar/web/html/element/article/index.html | 153 +++++ files/ar/web/html/element/bdo/index.html | 108 ++++ .../web/html/element/heading_elements/index.html | 244 +++++++ files/ar/web/html/element/index.html | 239 +++++++ files/ar/web/html/element/span/index.html | 122 ++++ files/ar/web/html/element/tt/index.html | 161 +++++ .../index.html" | 88 --- files/ar/web/javascript/guide/functions/index.html | 698 +++++++++++++++++++++ .../index.html" | 698 --------------------- .../index.html | 424 ------------- .../javascript/reference/functions/get/index.html | 165 +++++ .../web/javascript/reference/functions/index.html | 645 +++++++++++++++++++ .../reference/global_objects/number/index.html | 12 + .../index.html" | 12 - .../get/index.html" | 165 ----- .../index.html" | 645 ------------------- files/ar/web/reference/index.html | 42 ++ files/ar/web/security/index.html | 16 + .../index.html" | 16 - .../\331\205\330\261\330\254\330\271/index.html" | 42 -- files/ar/web_development/index.html | 98 --- files/ar/web_development/mobile/index.html | 18 - .../index.html" | 63 -- .../index.html" | 31 - .../index.html" | 65 -- .../index.html" | 61 -- 118 files changed, 8636 insertions(+), 8636 deletions(-) create mode 100644 files/ar/conflicting/learn/css/first_steps/index.html create mode 100644 files/ar/conflicting/learn/css/index.html create mode 100644 files/ar/conflicting/learn/getting_started_with_the_web/index.html create mode 100644 files/ar/conflicting/learn/javascript/objects/index.html create mode 100644 files/ar/conflicting/web/guide/index.html create mode 100644 files/ar/conflicting/web/html/element/index.html create mode 100644 files/ar/conflicting/web/html/index.html create mode 100644 files/ar/glossary/character/index.html create mode 100644 files/ar/glossary/first-class_function/index.html create mode 100644 files/ar/glossary/object/index.html create mode 100644 files/ar/glossary/property/index.html create mode 100644 files/ar/glossary/scope/index.html delete mode 100644 "files/ar/glossary/\330\247\331\204\330\255\330\261\331\210\331\201/index.html" delete mode 100644 "files/ar/glossary/\330\247\331\204\330\256\330\247\330\265\331\212\330\251/index.html" delete mode 100644 "files/ar/glossary/\330\247\331\204\330\257\331\210\330\247\331\204_\331\205\331\206_\330\247\331\204\330\257\330\261\330\254\330\251_\330\247\331\204\330\243\331\210\331\204\331\211/index.html" delete mode 100644 "files/ar/glossary/\330\247\331\204\331\203\330\247\330\246\331\206\330\247\330\252/index.html" delete mode 100644 "files/ar/glossary/\330\247\331\204\331\205\330\254\330\247\331\204\330\247\330\252/index.html" delete mode 100644 files/ar/heesfoord007/index.html delete mode 100644 files/ar/html/element/article/index.html delete mode 100644 files/ar/html/element/bdo/index.html delete mode 100644 files/ar/html/element/headings_elements/index.html delete mode 100644 files/ar/html/element/index.html delete mode 100644 files/ar/html/element/span/index.html delete mode 100644 files/ar/html/element/tt/index.html create mode 100644 files/ar/learn/common_questions/how_does_the_internet_work/index.html delete mode 100644 "files/ar/learn/common_questions/\331\203\331\212\331\201\331\212\330\251_\330\271\331\205\331\204/index.html" create mode 100644 files/ar/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/ar/learn/css/styling_text/styling_lists/index.html create mode 100644 files/ar/learn/forms/index.html create mode 100644 files/ar/learn/getting_started_with_the_web/css_basics/index.html delete mode 100644 "files/ar/learn/getting_started_with_the_web/\330\243\330\263\330\247\330\263\331\212\330\247\330\252_\330\265\331\201\330\255\330\247\330\252_\330\247\331\204\330\267\330\261\330\262_\330\247\331\204\331\205\330\252\330\261\330\247\330\265\330\251/index.html" delete mode 100644 files/ar/learn/how_to_contribute/index.html delete mode 100644 files/ar/learn/html/forms/index.html create mode 100644 files/ar/learn/html/tables/index.html delete mode 100644 "files/ar/learn/html/\330\247\331\204\330\254\330\257\330\247\331\210\331\204/index.html" delete mode 100644 "files/ar/learn/html/\330\250\330\263\331\212\330\267\330\251_html_\330\245\331\206\330\264\330\247\330\241_\330\265\331\201\330\255\330\251/index.html" create mode 100644 files/ar/mdn/at_ten/index.html delete mode 100644 files/ar/mdn/community/index.html delete mode 100644 files/ar/mdn/community/whats_happening/index.html create mode 100644 files/ar/mdn/contribute/howto/create_and_edit_pages/index.html delete mode 100644 files/ar/mdn/contribute/howto/do_a_technical_review/index.html delete mode 100644 files/ar/mdn/contribute/howto/do_an_editorial_review/index.html delete mode 100644 files/ar/mdn/contribute/howto/set_the_summary_for_a_page/index.html delete mode 100644 files/ar/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html delete mode 100644 "files/ar/mdn/contribute/howto/\330\245\331\206\330\264\330\247\330\241_\330\255\330\263\330\247\330\250_\330\271\331\204\331\211_\330\264\330\250\331\203\330\251_\331\205\330\267\331\210\330\261\331\212_\331\205\331\210\330\262\331\212\331\204\330\247/index.html" delete mode 100644 "files/ar/mdn/contribute/howto/\331\203\331\212\331\201\331\212\330\251_\330\245\331\206\330\264\330\247\330\241_\331\210\330\252\330\255\330\261\331\212\330\261_\330\247\331\204\330\265\331\201\330\255\330\247\330\252/index.html" delete mode 100644 files/ar/mdn/kuma/index.html delete mode 100644 files/ar/mdn/tools/deleting_pages/index.html create mode 100644 files/ar/mdn/yari/index.html delete mode 100644 files/ar/mdn_at_ten/index.html create mode 100644 files/ar/mozilla/add-ons/webextensions/what_are_webextensions/index.html delete mode 100644 "files/ar/mozilla/add-ons/webextensions/\331\205\330\247_\331\207\331\212_\330\247\331\205\330\252\330\257\330\247\330\257\330\247\330\252_\330\247\331\204\331\210\331\212\330\250/index.html" create mode 100644 files/ar/orphaned/heesfoord007/index.html create mode 100644 files/ar/orphaned/learn/how_to_contribute/index.html create mode 100644 files/ar/orphaned/mdn/community/index.html create mode 100644 files/ar/orphaned/mdn/community/whats_happening/index.html create mode 100644 files/ar/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/ar/orphaned/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/ar/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/ar/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html create mode 100644 files/ar/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html create mode 100644 files/ar/orphaned/mdn/tools/page_deletion/index.html create mode 100644 "files/ar/orphaned/\330\243\330\255\330\257\330\247\330\253_\331\205\331\203\330\252\330\250\330\251_jquery/index.html" create mode 100644 "files/ar/orphaned/\331\205\331\203\330\252\330\250\330\251_\330\254\331\212_\331\203\331\210\331\212\330\261\331\212/index.html" create mode 100644 "files/ar/orphaned/\331\210\330\247\330\265\331\201\330\251_spellcheck_\330\247\331\204\330\254\330\257\331\212\330\257\330\251_\331\201\331\212_html5/index.html" create mode 100644 "files/ar/orphaned/\331\210\330\247\330\265\331\201\330\251_\330\247\331\204\330\271\331\206\331\210\330\247\331\206_\331\201\331\212_html/index.html" delete mode 100644 files/ar/web/api/geolocation/using_geolocation/index.html delete mode 100644 files/ar/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html create mode 100644 files/ar/web/api/geolocation_api/index.html create mode 100644 files/ar/web/api/geolocation_api/using_the_geolocation_api/index.html create mode 100644 files/ar/web/api/history_api/example/index.html delete mode 100644 "files/ar/web/api/history_api/\331\205\330\253\330\247\331\204/index.html" delete mode 100644 files/ar/web/api/navigator.battery/index.html create mode 100644 files/ar/web/api/navigator/battery/index.html create mode 100644 files/ar/web/css/comments/index.html create mode 100644 files/ar/web/css/css_animated_properties/index.html create mode 100644 files/ar/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 "files/ar/web/css/css_flexible_box_layout/\330\247\331\204\331\205\331\201\330\247\331\207\331\212\331\205_\330\247\331\204\330\243\330\263\330\247\330\263\331\212\330\251_\331\204\331\204\330\265\331\206\330\257\331\210\331\202_\330\247\331\204\331\205\330\261\331\206/index.html" create mode 100644 files/ar/web/css/css_grid_layout/relationship_of_grid_layout/index.html delete mode 100644 files/ar/web/css/css_grid_layout/relationship_of_grid_layout_arabic/index.html create mode 100644 files/ar/web/css/transform/index.html delete mode 100644 "files/ar/web/css/\330\247\331\204\330\252\330\255\331\210\331\204/index.html" delete mode 100644 "files/ar/web/css/\330\247\331\204\330\252\330\271\331\204\331\212\331\202\330\247\330\252/index.html" delete mode 100644 "files/ar/web/css/\330\247\331\204\330\271\331\206\330\247\330\265\330\261_\330\247\331\204\330\252\331\212_\331\212\331\205\331\203\331\206_\330\252\330\255\330\261\331\212\331\203\331\207\330\247_\330\250\330\247\330\263\330\252\330\256\330\257\330\247\331\205_css_transitions/index.html" delete mode 100644 files/ar/web/guide/css/getting_started/index.html delete mode 100644 files/ar/web/guide/css/getting_started/readable_css/index.html delete mode 100644 "files/ar/web/guide/css/getting_started/\330\247\331\204\331\202\331\210\330\247\330\246\331\205/index.html" delete mode 100644 files/ar/web/guide/css/index.html create mode 100644 files/ar/web/guide/graphics/index.html delete mode 100644 files/ar/web/guide/html/html5/html5_element_list/index.html create mode 100644 files/ar/web/guide/mobile/index.html delete mode 100644 "files/ar/web/guide/\330\247\331\204\330\261\330\263\331\210\331\205\330\247\330\252/index.html" create mode 100644 files/ar/web/html/element/article/index.html create mode 100644 files/ar/web/html/element/bdo/index.html create mode 100644 files/ar/web/html/element/heading_elements/index.html create mode 100644 files/ar/web/html/element/index.html create mode 100644 files/ar/web/html/element/span/index.html create mode 100644 files/ar/web/html/element/tt/index.html delete mode 100644 "files/ar/web/html_\331\204\330\272\330\251_\330\252\330\261\331\205\331\212\330\262_\330\247\331\204\331\206\330\265_\330\247\331\204\331\201\330\247\330\246\331\202/index.html" create mode 100644 files/ar/web/javascript/guide/functions/index.html delete mode 100644 "files/ar/web/javascript/guide/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" delete mode 100644 files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html create mode 100644 files/ar/web/javascript/reference/functions/get/index.html create mode 100644 files/ar/web/javascript/reference/functions/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/number/index.html delete mode 100644 "files/ar/web/javascript/reference/global_objects/\330\247\331\204\330\247\330\261\331\202\330\247\331\205/index.html" delete mode 100644 "files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/get/index.html" delete mode 100644 "files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" create mode 100644 files/ar/web/reference/index.html create mode 100644 files/ar/web/security/index.html delete mode 100644 "files/ar/web/\330\255\331\205\330\247\331\212\330\251/index.html" delete mode 100644 "files/ar/web/\331\205\330\261\330\254\330\271/index.html" delete mode 100644 files/ar/web_development/index.html delete mode 100644 files/ar/web_development/mobile/index.html delete mode 100644 "files/ar/\330\243\330\255\330\257\330\247\330\253_\331\205\331\203\330\252\330\250\330\251_jquery/index.html" delete mode 100644 "files/ar/\331\205\331\203\330\252\330\250\330\251_\330\254\331\212_\331\203\331\210\331\212\330\261\331\212/index.html" delete mode 100644 "files/ar/\331\210\330\247\330\265\331\201\330\251_spellcheck_\330\247\331\204\330\254\330\257\331\212\330\257\330\251_\331\201\331\212_html5/index.html" delete mode 100644 "files/ar/\331\210\330\247\330\265\331\201\330\251_\330\247\331\204\330\271\331\206\331\210\330\247\331\206_\331\201\331\212_html/index.html" (limited to 'files/ar') diff --git a/files/ar/conflicting/learn/css/first_steps/index.html b/files/ar/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..2bfc5c76bb --- /dev/null +++ b/files/ar/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,44 @@ +--- +title: Getting started with CSS +slug: Web/Guide/CSS/Getting_started +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - Needs + - NeedsBeginnerUpdate + - NeedsTranslation + - NeedsUpdate + - TopicStub + - Web +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

This tutorial introduces you to the basic features and language (the syntax) for Cascading Style Sheets (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers.

+

The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page lists more advanced resources.

+ +

What you need to get started

+ +

Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.

+

Note: The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.

+

How to use this tutorial

+

To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.

+

Part I: The Basics of CSS

+

On each page, use the Information section to understand how CSS works. Use the Action section to try using CSS on your own computer.

+

To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.

+

To understand CSS in more depth, read the information that you find in boxes captioned More details. Use the links there to find reference information about CSS.

+

Part II: The Scope of CSS

+

A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.

+
    +
  1. JavaScript
    2. +
  2. SVG graphics
    3. +
  3. XML data
    4. +
  4. XBL bindings
    5. +
  5. XUL user interfaces
    6. +
diff --git a/files/ar/conflicting/learn/css/index.html b/files/ar/conflicting/learn/css/index.html new file mode 100644 index 0000000000..2bd34295c7 --- /dev/null +++ b/files/ar/conflicting/learn/css/index.html @@ -0,0 +1,24 @@ +--- +title: CSS developer guide +slug: Web/Guide/CSS +tags: + - CSS + - Guide + - Landing + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS +translation_of_original: Web/Guide/CSS +--- +

{{draft}}

+

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or other markup languages such as SVG. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media. The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.

+

CSS is one of the core languages of the open Web and has a standardized W3C specification.

+

{{LandingPageListSubpages}}

+

Pages elsewhere

+

Here are other pages related to CSS that should be linked to from here.

+

See also

+ diff --git a/files/ar/conflicting/learn/getting_started_with_the_web/index.html b/files/ar/conflicting/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..a6cdfdf6cf --- /dev/null +++ b/files/ar/conflicting/learn/getting_started_with_the_web/index.html @@ -0,0 +1,305 @@ +--- +title: إنشاء صفحة HTML بسيطة +slug: Learn/HTML/بسيطة_HTML_إنشاء_صفحة +tags: + - البداية +translation_of: Learn/Getting_started_with_the_web +translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML +--- +
+

فى هذا المقال سوف تتعلم كيق تنشئ صفحة ويب بسيطة باستخدام {{Glossary("HTML")}}

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

الملخص

+ +

أن أبسط صفحة ويب هى فقط ملف {{Glossary("HTML")}} . فقط ملف HTML صحيح واحد موجود على حاسبك و متصفح ويب هى كل ما تحتاجه. سوف نرى كبف كيف يمكن استخدام HTML {{Glossary("Tag","tags")}} و سوف تكون فادر على عرض الصفحة التى أنشأتها فى متصفحك.

+ +

التعلم النشط

+ +

أول شئ؛ تأكد أنه يوجد لديك محرر نصوص تجيد استخدامه و متصفح ويب. على الأغلب أى محرر نصوص سوف يكون كافى؛ على سبيل المثال Notepad فى Windows أو TextEdit فى Mac ؛ ولكن تأكد أنك ستنشئ ملفات نصوص بسيطة (حروف فقط بدون تنسيق). إذا كنت تستخدم TextEdit فى Mac يمكنك اختيار "Make Plain Text" من قائمة "Format".

+ +

الخطوة الأولى: ملف

+ +

صفحة الويب الواحدة تتكون (على الأقل) من ملف HTML ؛ لذلك سنبدأ بإنشاء واحد. قم بفتح محرر النصوص و قم بإنشاء ملف نصى ؛ ثم اكتب شئ مثل هذا:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Hi there</title>
+</head>
+<body>
+  This is a page
+  a simple page
+</body>
+</html>
+ +

يمكنك تعديل هذا كما تشاء؛ أنت حر فى أن تضيف أو تغير النص بين وسمى <title></title> و <body></body>. تأكد أن تعطى الملف اسم ينتهى بالإضافة ".html" . على سبيل المثال يمكنك تسميتها "my_page.html".

+ +

الآن لديك ملف على حاسبك ؛ من الممكن أن يكون شكله يشبه هذا (هذا يتوقف على نظام التشغيل الذى تستخدمه) :

+ +

Screenshot of a file explorer with a html file for local test

+ +

إذا قمت فقط بالضغط مرتين على هذا الملف سوف يُفتح فى متصفحك. إذا أردت فتحه فى محرر النصوص لتعديله قم بالضغط عليه بزر الفأرة الأيمن و اختر فتح الملف فى محرر النصوص. (أو قم بسحبه و إفلاته فى المحرر؛ أو قم بفتح الملف باختيار "open" من قائمة "File" فى المحرر.) ,حسب محررك الملف سوف يبدو مثل هذا:

+ +

Screenshot of a file explorer with a html file for local test

+ +

الخطوة الثانية: متصفح ويب

+ +

داخل متصفح الملفات الخاص بك(مثل Explorer فى Windows؛ أو Finder فى Mac أو Files فى Ubuntu)، اعثر على الملف الذى أنشأته و قم بفتحه فى متصفحك (بالضغط عليه مرتين؛ أو سحبه و إفلاته على أيقونة المتصفح) الآن المتصفح يعرض النص من ملف HTML الذى أنشأته والتبويب يعرض عنوان الصفحة. هذا يجب أن يشبه هذا؛ حسب نظام تشغيلك و متصفحك:

+ +

Screenshot of a file explorer with a html file for local test

+ +

يمكنك أن ترى محتوى جسم الصفحة (بين وسمى <body></body>)؛ و العنوان الذى اخترته (بين وسمى <title></title>) يظهر فى التبويب ولكن لا يوجد فاصل بين سطرى النص. شئ مثير للاهتمام.

+ +

الخطوة الثالثة: التجربة والتعلم

+ +

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

+ +

 

+ +

لشيء الذي يجب أن تلاحظه هو أن الشيء الوحيد الذي تراه معروضًا على الشاشة هو النص الذي ليس داخل أقواس الزاوية (والمعروف باسم الرموز الأكبر من وأقل من الرموز ، ولكننا نسميها أقواس معقوفة عند الحديث عن HTML). كل شيء داخل الأقواس الزاوية هو {{Glossary ("tag")}} ، والذي يمثل البنية أو الهيكل العظمي لصفحة الويب الخاصة بك. يظهر كل المحتوى المعروض بين العلامات.

+ +

تحتوي صفحة HTML الخاصة بنا كمثال على قسمين رئيسيين: رأس ، ومضمون في كتلة {{HTMLElement ("head")}} ، وهيئة ، موجودة داخل {{HTMLElement ("body")}}. يحتوي النص على النص المعروض داخل الصفحة.

+ +

لكل علامة معنى محدد ويجب استخدامها وفقًا لذلك ؛ على سبيل المثال ، يتم استخدام {{HTMLElement ("title")}} للإشارة إلى عنوان الصفحة ، والذي قد يختلف عن اسم الملف. لاحظ أيضًا أن العلامات يمكن أن تحدث داخل محتوى علامات أخرى. يتم تضمين {{HTMLElement ("title")}} داخل {@ HTMLElement ("head")}} ، على سبيل المثال.

+ +

إذا كنت تريد إضافة شيء ما مثل صورة إلى صفحتك ، فستحتاج إلى إضافة علامة للصورة والصورة نفسها. فمثلا:

+ +

 

+ +
<!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>
+ +

عدّل ملفك ليتضمن علامة {{HTMLElement ("img")}} ، على النحو التالي:

+ +
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
+ +

 

+ +

يمكن أن تذهب إلى أي مكان داخل {{HTMLElement ("body")}}. لا تنس حفظ الصفحة التي تم تغييرها!

+ +

ثم ضع ملفًا باسم "unicorn_pic.png" في المجلد نفسه كملف HTML. عند تحديث نافذة المتصفح (أو إعادة فتح ملف HTML في متصفحك) ، يجب أن تشاهد المحتوى الذي تم تغييره ، مع استكمال يونيكورن! (لا تنس حفظ صفحتك).

+ +

 

+ +

Original file for the unicorn image

+ +
+

ملاحظة: يمكنك الحصول على نسخة من صورة يونيكورن لاستخدامها في تجاربك عن طريق النقر بزر الماوس الأيمن فوق الصورة واختيار خيار "حفظ الصورة باسم ..." من القائمة التي تظهر.

+
+ +

The files needed for this page to work now look something like this in your desktop:

+ +

Screenshot of the explorer with 2 files : a html file and a picture file

+ +

تبدو الملفات المطلوبة لهذه الصفحة الآن تبدو كشيء من هذا القبيل في سطح المكتب الخاص بك:

+ +

Screenshot for the example with a picture

+ +

 

+ +

ربما لاحظت أن علامة {{HTMLElement ("img")}} تحتوي على {{Glossary ("attribute"، "attributes")}} التي توفر معلومات إضافية مطلوبة لبناء الكائن المطلوب ، وفي هذه الحالة ، اسم الملف الصورة التي سيتم عرضها والنص البديل الذي سيتم عرضه عندما يتعذر تحميل الصورة.

+ +

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

+ +

 

+ +

الغوص أعمق
+ هذه ليست صفحة ويب جميلة جدا
+ كما قد تكون لاحظت ، هذه الصفحة ليست معجزة بالتصميم والجمال. وذلك لأن HTML تدور حول المحتوى وما يعنيه المحتوى (من حيث السياق والعلاقات بين كتل المحتوى) ، بدلاً من التصميم.

+ +

يمكّنك {{Glossary ("CSS")}} من جعل المحتوى يتألق ، وذلك بإضافة التخطيط واللون والخطوط وما إلى ذلك. إن HTML الخالص جيد بما يكفي لصنع صفحات ويب بسيطة ، لكن الصفحات الأكثر تعقيدًا (أو حتى الصفحات البسيطة ذات التصميمات الجذابة) تحتاج عادة إلى CSS وربما {{Glossary ("JavaScript")}}. ينشئ HTML المحتوى وأنماط CSS للمحتوى وجافا سكريبت يجعل المحتوى ديناميكيًا.

+ +

دعونا نجرب قليلا مع CSS بجعل النص الأساسي للصفحة باللون الأزرق:
+ alghaws 'aemaq
+  

+ +

 

+ +
<!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>
+ +

 

+ +

لاحظ إضافة عنصر {{HTMLElement ("style")}} إلى الصفحة {{HTMLElement ("head")}}. هذا يحدد CSS لتطبيقه على النص الأساسي.

+ +

تريد أن يتم تسطير النص؟ حاول إضافة "زخرفة النص: تسطير ؛" حكم على أسلوبك:

+ +

 

+ +
body {
+  color: blue;
+  text-decoration: underline;
+}
+ +

تريد أن يكون النص بحجم محدد؟ جرب إضافة "font-size: 42px؛" مثله:

+ +
body {
+  color: blue;
+  text-decoration: underline;
+  font-size: 42px;
+}
+ +

والنهاية ستكون هكذا:

+ +
<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>
+ +

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

+ +

Screenshot of the browser with the page with some CSS

+ +

ينمو إلى صفحتين
+ عندما تتصفح الويب ، غالبًا ما تصادفك {{Glossary ("hyperlink" ، "links")}} ، وهي الطريقة الأكثر فائدة للانتقال من صفحة إلى أخرى. نظرًا لأن HTML عبارة عن محتوى وتعتبر الروابط نوعًا من المحتوى ، يمكنك إنشاء روابط بين الصفحات باستخدام HTML فقط.

+ +

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

+ +

في الملف الأول يمكنك الاحتفاظ بنفس البنية العامة كما كان من قبل. المهم هو إضافة علامة جديدة ، {{HTMLElement ("a")}} ، على النحو التالي:

+ +

 

+ +
<!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>
+ +

يجب أن ترتبط الصفحة الثانية بالصفحة الأولى:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Page 2 :)</title>
+</head>
+<body>
+  This is a page 2.
+  <a href="page1.html" title="to page 1">Want to go back to page 1? Click here</a>
+</body>
+</html>
+ +
+

ملاحظة: تأكد من تطابق أسماء الملفات المحددة في سمة href للعلامة {{HTMLElement ("a")} مع أسماء الملفات التي أنشأتها على جهاز الكمبيوتر.

+
+ +

 

+ +

يمكنك الآن التنقل بين اثنين من مستندات HTML. افتح الصفحة 1 في المستعرض الخاص بك وانقر فوق الارتباط لفتح الصفحة 2 ، والعكس. يمكنك أيضًا اختبار الزر "السابق" في متصفحك. ستعيدك إلى الصفحة الأخيرة التي كنت تبحث عنها.

+ +

يجب أن يكون لمدير الملفات ملفي HTML في نفس المجلد ، على النحو التالي:

+ +

Screenshot of the file explorer with two HTML documents in one directory/folder

+ +

الصفحة الاولي تشبه هذه:

+ +

Screenshot of a file explorer with a html file for local test

+ +

والصفحة الثانية تشبهه هذه بعد الضغط علي link:

+ +

Screenshot of the 2nd page of the 2 pages example in the browser

+ +
+

+ +

+ +

+ +

113/5000

+ +

ملاحظة: يعتبر الارتباط مرة أخرى إلى الصفحة رقم 1 هو البنفسجي لأن المتصفح "يعلم" بأننا سبق أن زرنا الصفحة الأولى.

+ +

 

+
+ +

 

+ +

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

+ +

الربط بموقع آخر
+ في هذا التمرين ، سنقوم بإضافة ارتباط إلى ملف 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">Want to go know more about unicorns? Wikipedia is right here</a>
+</body>
+</html>
+ +

يجب أن يبدو هذا أكثر أو أقل مثل هذا في المتصفح:

+ +

Screenshot of the example page with a link to Wikipedia in the browser

+ +

قم بتحريك مؤشر الماوس فوق الرابط ؛ سترى السمة {{htmlattrxref ("title")}} المعروضة في تلميح أداة تحويم. يمكن استخدام هذا لتوفير مزيد من المعلومات حول الارتباط ، بحيث يمكن للمستخدم اتخاذ قرار مستنير حول ما إذا كان سيتم النقر عليه أم لا.

+ +
+

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

+
+ +

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

diff --git a/files/ar/conflicting/learn/javascript/objects/index.html b/files/ar/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..65ce0c788a --- /dev/null +++ b/files/ar/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,424 @@ +--- +title: مدخل إلى جافاسكريبت كائنية التوجه +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +tags: + - الأفراد + - البرمجة الكائنية + - التغليف + - الجافاسكريبت + - المتوسط + - المجال + - المشيد + - ب.ك.ت + - كائن +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +
{{jsSidebar("Introductory")}}
+ +

كائنية التوجه حتى النخاع، ميزات جافا سكريبت القوية، القدرات المرنة {{Glossary("OOP")}}. يبدأ هذا المقال بمقدمة إلى البرمجة الكائنية التوجه، ثم مراجعات لنموذج كائن جافا سكريبت، و أخيراً يوضح مفاهيم البرمجة الكائنية التوجه في جافا سكريبت. لا يصف هذا المقال البناء اللغوي الجديد للبرمجة الكائنية التوجه في ECMAScript 6.

+ +
+

مراجعة جافا سكريبت

+ +

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

+ +

البرمجة الكائنية التوجه (Object-oriented programming)

+ +

إن البرمجة الكائنية (OOP) ما هي إلا نمط برمجي يَستخدم التجريد في إنشاء نماذج/نسخ لتجسيد العالم الحقيقي، وتَستخدم البرمجة الكائنية في ذلك أساليب مُتعدّدة من هذا النمط، فهي تستخدم الوحدات module، وتعدديّة الأشكال polymorphism والتغليف encapsulation، وتجدر الإشارة إلى أن معظم لغات البرمجة تدعم مفهوم OOP أمثال اللغات البرمجية: جافا، بايثون، روبي، وطبعًا جافا سكريبت.

+ +

يُعالج أو لنقل يَتصور مفهوم البرمجة الكائنية OOP البرنامج كتشكيلة من الأشياء/الكائنات المتعاونة/المترابطة بدلًا من يتصوّره كتشكيلة من الدوال (functions) أو كسرد من الأوامر. ففي مفهوم OOP، كل كائن/شيء له القدرة على استقبال الرسائل، ومعالجة البيانات، وإرسال الرسائل إلى باقي الكائنات، ويُمكن اعتبار أنه لكل كائن object كينونة خاصة به ودور/وظيفة مستقلة عن الكائن الآخر.

+ +

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

+ +

مصطلحات البرمجة الكائنية

+ +
+
+

المجال في البرمجة الكائنية Namespace

+ +

ما هو إلا عبارة عن حاوي تسمح للمطوّر بتحزيم جميع الوظائف تحت اسم محدد وفريد.

+ +

الصنف أو الفئة Class في البرمجة الكائنية

+ +

يعتني الصنف بكل ما يتعلّق بميزات وخصائص الكائن، والصنف ما هو إلا قالب template تعريفي بخاصيات properties وبطُرق/وظائف methods الكائن object.

+ +

الكائن Object في البرمجة الكائنية

+ +

الكائن ما هو إلا حالة/أمثولة instance من صنف class.

+ +

الخاصية property في البرمجة الكائنية

+ +

ما هي إلا مميزات وخصائص الكائن، كاللون مثلًا.

+ +

الطريقة أو الوظيفة Method في البرمجة الكائنية

+ +

تعتني الطريقة أو الوظيفة كما يُسميها البعض بقدرات الكائن، مثل قدرة المشي مثلًا، وهي دور أو وظيفة مرتبطة مع صنف class.

+ +

المشيد Constructor في البرمجة الكائنية

+ +

ما هو إلا طريقة method تُستدعى في لحظة استهلال instantiate الكائن، وعادةً ما يكون له نفس اسم الصنف الذي يحتويه.

+ +

الوراثة Inheritance في البرمجة الكائنية

+ +

يُمكن للصنف أن يرث مميزات من صنف آخر.

+ +

التغليف Encapsulation في البرمجة الكائنية

+ +

طريقة في تحزيم البيانات data والطُرق methods التي تستخدم البيانات.

+ +

التجريد Abstraction في البرمجة الكائنية

+ +

يجب على الاقتران الحاصل من: الوراثة والطُرق methods والخاصيات properties لكائن معقد وشائك التمثيل برمجيًا أن يعكس الواقع المراد محاكاته في البرمجة الكائنية.

+ +

تعددية الأشكال Polymorphism في البرمجة الكائنية

+ +

تحمل كلمة Poly بحد ذاتها المعنى "متعدد" وتحمل الكلمة morphism المعنى "أشكال، ويُشير المفهوم ككل إلى أن أكثر من صنف قد يُعرّف نفس الطريقة method أو الخاصية property.

+
+
+ +

للحصول على وصف أكثر شمولية للبرمجة الكائنية التوجه، أنظر {{interwiki("wikipedia", "البرمجة كائنية التوجه")}} على ويكيبيديا.

+ +

البرمجة المعتمدة على النموذج الأولي Prototype

+ +

البرمجة المعتمدة على النموذج الأوّلي (Prototype-based programming) ما هي إلا نموذج من البرمجة الكائنية OOP ولكنها لا تستخدم الأصناف classes، بل تقوم أولًا بإعداد سلوك أي صنف class ما ومن ثم تُعيد استخدامه، ويُطلق البعض على هذا النموذج: البرمجة بلا أصناف classless، أو البرمجة المَبْدَئِية المنحى prototype-oriented، أو البرمجة المعتمدة على الأمثولة instance-based).

+ +

يعود أصل اللغة المعتمدة على النموذج الأولي إلى لغة Self، والتي طوّرها David Ungar وRandall Smith، ولكن أسلوب البرمجة بدون أصناف class-less توسّع ونال شهرة كبيرة في العقد الأخير، واُعتمد من قبل العديد من اللغات البرمجية أشهرهم جافا سكريبت.

+ +

 

+ +

البرمجة الكائنية باستخدام جافا سكريبت

+ +

المجال Namespace في جافا سكريبت

+ +

المجال هو أشبه بمستوعب/بحاوية (container) تسمح للمطوّر في تحزيم وظائف تحت اسم فريد، أو اسم تطبيق محدد، ففي جافا سكريبت المجال هو مجرد كائن object كأي كائن آخر يحتوي على طُرق methods، وخاصيات properties، وحتى كائنات objects.

+ +
+

ملاحظة هامة: من المهم جدًا الانتباه إلى أنه في جافا سكريبت، لا يوجد فرق بين الكائنات العادية والمجالات namespaces، وهذا يختلف عن اللغات الكائنية الأخرى، الأمر الذي قد يُربك المبرمجين المبتدئين في جافا سكريبت.

+
+ +

إن إنشاء مجال namespace في جافا سكريبت بسيطٌ للغاية، فمن خلال إنشاء كائن عام/مشترك/شامل global، ستصبح جميع المُتغيّرات variables والطرق methods، والدوال functions خاصياتٍ لهذا الكائن، ويٌقلل استخدام المجالات namespaces أيضًا من احتمالية تضارب الأسماء في التطبيق، منذ أن كل كائن من كائنات التطبيق ما هي إلى خاصيات كائن شامل/عام معرّفة على مستوى التطبيق.

+ +

سيُنشئ في الخطوة التالية كائنًا عامًا global وبالاسم MYAPP:

+ +
// مجال عالمي
+var MYAPP = MYAPP || {};
+ +

يُظهر المثال السابق، كيف تم التأكّد أولًا فيما إذا كان MYAPP معرفًا (سواء في نفس الملف أو في آخر)، ففي حال الإيجاب سيُستخدم الكائن العام MYAPP، وفي حال عدم تعريفه مُسبقًا سيُنشئ كائنًا خالٍ وبالاسمMYAPP والذي سيغلّف encapsulate الطرق methods والدوال functions والمتغيرات variables والكائنات objects.

+ +

كما يُمكن أيضًا إنشاء مجال فرعي sub-namespaces:

+ +
// مجال فرعي
+MYAPP.event = {};
+ +

يوضّح المثال التالي الصيغة المستخدمة في إنشاء مجال namespace وإضافة متغيرات ودوال:

+ +
// إنشاء حاوي يدعى MYAPP.commonMethod للوظائف و الخصائص الشائعة
+MYAPP.commonMethod = {
+  regExForName: "", // تعريف تعبير نظامي للتحقق من الإسم
+  regExForPhone: "", // تعريف تعبير نظامي للهاتف، لا يوجد تحقق من الصحة
+  validateName: function(name){
+    // إفعل شيئا ما بالإسم، يمكنك الوصول إلى المتغير regExForName
+    // بإستعمال "this.regExForName"
+  },
+
+  validatePhoneNo: function(phoneNo){
+    // إفعل شيئا ما برقم الهاتف
+  }
+}
+
+// تعريفات الكائن مع الزظيفة في نفس الوقت
+MYAPP.event = {
+    addListener: function(el, type, fn) {
+    // بعض الأكواد
+    },
+    removeListener: function(el, type, fn) {
+    // بعض الأكواد
+    },
+    getEvent: function(e) {
+    // بعض اﻷكواد
+    }
+
+    // يمكن إضافة وظائف و خصائص أخرى
+}
+
+// البناء اللغوي لإستعمال وظيفة addListener:
+MYAPP.event.addListener("yourel", "type", callback);
+ +

 

+ +

الكائنات الأساسية/القياسية المبنية داخل لغة جافا سكريبت (Standard built-in objects)

+ +

تتضمن لغة جافا سكريبت العديد من الكائنات في تركيبتها، على سبيل المثال، يوجد كائنات مثل Math،Object، Array، String، ويُظهر المثال التالي كيفيّة استخدام الكائن Math للحصول على رقم عشوائي باستخدام أحد طُرق method هذا الكائن وهي الطريقة ()random.

+ +
console.log(Math.random());
+
+ +
+

ملاحظة: يَفترض المثال السابق وجميع الأمثلة التالية في المقال وجود دالة function بالاسم()console.log معرّفة تعريفًا عامًا (globally)، مع العلم أن هذه الدالة ليست جزء من اللغة نفسها، ولكنها دالة متوفّرة في العديد من متصفحات الإنترنت لأغراض تشخيص الشيفرة البرمجية debugging.

+
+ +

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

+ +

كل كائن في جافا سكريبت هو حالة/أمثولة instance من الكائن Object ويَرث كافة خاصياته properties وطُرقه methods.

+ +

 

+ +

الكائنات الخاصة
+ الصنف (الفئة)

+ +

لغة جافا سكريبت لغة من النوع prototype-based ولا تحتوي على العبارة class كما هو حال باقي لغات البرمجة الكائنية، كما في روبي أو بايثون، ويُربك هذا الأمر المبرمجين المعتادين على اللغات التي تعتمد على هذه العبارة أو المفهوم، وتستخدم جافا سكريبت بدلًا من ذلك الدوال functions لمحاكات مفهوم الأصناف classes، وتعريف صنف هو بسهولة تعريف أي دالّة:

+ +
var Person = function () {};
+
+ +

الكائن (أمثولة الصنف class instance)

+ +

يتطلب إنشاء حالة/أمثولة instance جديدة من كائن obj استخدام العبارة new obj، وتعيين النتيجة إلى متغيّر بغرض الوصول إلى فيما بعد.

+ +

عُرّف في الشيفرة السابقة صنف class بالاسم Person، وفي الشيفرة التالية، سيُنشئ حالتين/أمثولتين instances من هذا الصنف، الأولى بالاسم person1 والثانية بالاسم person2.

+ +
var person1 = new Person();
+var person2 = new Person();
+
+ +
فضلا أنظر {{jsxref("Object.create()")}} للحصول على وظيفة الإنشاء الجديدة الإضافية التي تنشأ حالة غير مهيأة
+ +

المشيد The constructor

+ +

يُستدعى المُشيّد constructor في لحظة الاستهلال instantiation (اللحظة التي يُنشئ فيها الكائن)، والمُشيّد ما هو إلا طريقة method من طُرق الصنف class، وفي جافا سكريبت تعمل الدالة على تشييد الكائن، ولذلك لا داعي إلى تعريف طريقة method من أجل عميلة التشييد، وكل إجراء مصرّح في الصنف class يُنفّذ في لحظة الاستهلال instantiation.

+ +

يُستخدم المُشيّد في تعيين خاصيات properties الكائن، أو في استدعاء طُرق methods معينة لتحضير الكائن للاستخدام، وأما إضافة طُرق صنف وتعريفها يحدث باستخدام صيغة syntax مختلفة سنتطرّق إليها فيما بعد خلال المقال.

+ +

تُظهر الشيفرة التالية كيف يُسجّل log (يُرسل رسالة نصية إلى طرفية المتصفح console) مُشيّد الصنفPerson رسالة نصية حينما يُستهل instantiated.

+ +
var Person = function () {
+  console.log('تم إنشاء حالة');
+};
+
+var person1 = new Person();
+var person2 = new Person();
+
+
+ +

الخاصية The property (خاصية الكائن object attribute)

+ +

الخاصيات properties ما هي إلا متغيرات محتوات في الصنف class، وكل حالة/أمثولة من الكائن تمتلك هذه الخاصيات، وتُعيّن الخاصيات في دالة مُشيّد الصنف بحيثُ تُنشئ مع كل حالة/أمثولة instance.

+ +

إن الكلمة المفتاحية this، والتي تُشير إلى الكائن الحالي، تسمح للمطوّر بالعمل مع الخاصيات من ضمن الصنف، والوصول (قراءةً وكتابةً) إلى الخاصية property من خارج الصنف يكون من خلال الصيغةInstanceName.Property كما هو الأمر في لغة C++ (سي بلس بلس) وJava والعديد من اللغات الأخرى، ومن داخل الصنف تُستخدم الصيغة this.Property للحصول على قيمة الخاصية أو لتعيين قيمتها.

+ +

في الشيفرة التالية، عُرّفت الخاصية firstName للصنف Person وفي لحظة الاستهلال instantiation:

+ +
var Person = function (firstName) {
+  this.firstName = firstName;
+  console.log('تم إنشاء حالة من Person');
+};
+
+var person1 = new Person('سفيان');
+var person2 = new Person('محمد');
+
+// Show the firstName properties of the objects
+console.log('الشخص1 هو ' + person1.firstName); // النتيجة ==> "الشخص1 هو سفيان"
+console.log('الشخص2 هو ' + person2.firstName); // النتيجة ==> "الشخص2 هو محمد"
+
+ +

الطرق The methods

+ +

الطرق methods ما هي إلا دوال (وتُعرّف كما تعرّف الدوال functions)، فيما عدا ذلك فهي تُشبه الخاصيات properties، واستدعاء طريقة method مشابه إلى الوصول إلى خاصيّة ما، ولكن مع إضافة () في نهاية اسم الطريقة، وربما مع مُعطيات arguments، ولتعريف طريقة، تُعيّن دالة إلى خاصيّة مُسمّات من خاصيّة الصنف prototype، ويُمكن فيما بعد استدعاء الطريقة على الكائن بنفس الاسم الذي عُيّن للدالة.

+ +

في الشيفرة التالية، عُرّفت ومن ثم اُستخدِمت الطريقة ()sayHello للصنف Person.

+ +
var Person = function (firstName) {
+  this.firstName = firstName;
+};
+
+Person.prototype.sayHello = function() {
+  console.log("مرحبا، أنا " + this.firstName);
+};
+
+var person1 = new Person("سفيان");
+var person2 = new Person("محمد");
+
+// إستدعاء طريقة Person sayHello.
+person1.sayHello(); // النتيجة ==>"مرحبا، أنا سفيان"
+person2.sayHello(); // النتيجة ==> "مرحبا، أنا محمد"
+
+ +

إن الطُرق methods في جافا سكريبت ما هي إلا دالة كائن عادية مرتبطة مع كائن كخاصية property، وهذا يعني أنه يُمكن استدعاء الطُرق خارج السياق، كما في المثال التالي:

+ +
var Person = function (firstName) {
+  this.firstName = firstName;
+};
+
+Person.prototype.sayHello = function() {
+  console.log("مرحبا، أنا " + this.firstName);
+};
+
+var person1 = new Person("سفيان");
+var person2 = new Person("محمد");
+var helloFunction = person1.sayHello;
+
+// النتيجة ==> "مرحبا، أنا سفيان"
+person1.sayHello();
+
+// النتيجة ==> "مرحبا، أنا محمد"
+person2.sayHello();
+
+// النتيجة ==> "مرحبا، أنا undefined" (أو أخطاء
+// TypeError في الوضع الصارم)
+helloFunction();
+
+// النتيجة ==> true
+console.log(helloFunction === person1.sayHello);
+
+// النتيجة ==> true
+console.log(helloFunction === Person.prototype.sayHello);
+
+// النتيجة ==> "مرحبا، أنا سفيان"
+helloFunction.call(person1);
+ +

كما يُظهر المثال السابق، جميع الإحالات المستخدمة في استدعاء الدالة sayHello تُشير إلى نفس الدالةسواءً الاستدعاء الحاصل مع person1 أو Person.prototype أو حتى في المتغيّر helloFunctionوقيمة this خلال استدعاء الدالة يعتمد على الكيفية التي تُستدعى فيها، حيث تُشير الكلمة المفتاحيةthis إلى الكائن الحالي الذي تُستدعى عليه الطريقة method، بمعنى عندما تم استدعاء الطريقة()sayHello على الكائن person1 فإن this تُشير إلى الكائن person1، وعند استدعاء sayHelloعلى الكائن person2 فإن this تُشير إلى الكائن person2، ولكن إن تم الاستدعاء بطريقة مختلفة، فإنthis ستُعيّن تعينًا مختلفًا، فاستدعاء this من المتغيّر (كما في ()helloFunction) سيُعيّن this إلى الكائن العام global (والذي سيكون window في متصفح الإنترنت)، ومنذ أن هذا الكائن (على الأغلب) لا يملك الخاصّيّة firstName، ستكون النتيجة كما هو الحال في المثال السابق “Hello, I’m undefined”، كما يمكن دائمًا تعيين this صراحةً باستخدام Function#call (أو Function#apply) وهو كما كان في نهاية المثال.

+ +
ملاحظة: أنظر المزيد حول this على call و apply
+ +

الوراثة

+ +

تُستخدم الوراثة في جافا سكريبت في إنشاء صنف class كمثيل مخصص لصنف أو أكثر (تدعم جافا سكريبت وراثة وحيدة فقط single inheritance)، ويُطلق على الصنف المخصص عادةً ابن (child)، ويطلق على الصنف الآخر عادةً  الأب (parent)، وفي جافا سكريبت يتمّ ذلك من خلال إسناد حالة/أمثولة من الصنف الأب إلى الصنف الابن، ومن ثم تخصيصه، وفي متصفحات الإنترنت الحديثة يُمكن استخدامObject.create في تحقيق الوراثة inheritance أيضًا.

+ +
+

ملاحظة: لا تتفقد جافا سكريبت مُشيّد صنف الابن prototype.constructor (راجعObject.prototype)، وعليه يجب التصريح عن ذلك يدويًا، لمزيد من التفصيل راجع السؤال التالي علىStackoverflow.

+
+ +

عُرّف في الشيفرة التالية الصنف Student كصنف ابن للصنف Person، ومن ثم أُعيد تعريف الطريقة()sayHello وأُضيفت الطريقة ()sayGoodBye علاوة على ذلك.

+ +
// تعريف المشيد Person
+var Person = function(firstName) {
+  this.firstName = firstName;
+};
+
+// إضافة زوج من الطرق إلى Person.prototype
+Person.prototype.walk = function(){
+  console.log("أنا أتمشى!");
+};
+
+Person.prototype.sayHello = function(){
+  console.log("مرحبا، أنا " + this.firstName);
+};
+
+// تعريف مشيد Student
+function Student(firstName, subject) {
+  // إستدعاء المشيد اﻷب, التأكد (عن طريق الإستدعاء)
+  // من أن "this" وضعت بشكل صحيح أثناء اﻹستدعاء
+  Person.call(this, firstName);
+
+  // تهيئة خصائص الطالب المحددة
+  this.subject = subject;
+}
+
+// إنشاء كائن Student.prototype الذي يرث من Person.prototype.
+// ملاحظة: خطأ شائع أن يستعمل "new Person()" ﻹنشاء
+// Student.prototype. هذا غير صحيح لعدة أسباب،
+// ليس أقل أننا ليس لدينا أي شيء ﻹعطاء Person إلى المعامل "firstName".
+// الطريقة الصحيحة ﻹستدعاء Person هي في الأعلى حيث
+// إستدعيناه من Student.
+Student.prototype = Object.create(Person.prototype); // See note below
+
+// وضع الخاصية "constructor" للإشارة إلى Student
+Student.prototype.constructor = Student;
+
+// إستبدال الطريقة "sayHello"
+Student.prototype.sayHello = function(){
+  console.log("مرحبا، أنا " + this.firstName + ". أنا أدرس "
+              + this.subject + ".");
+};
+
+// إضافة الطريقة "sayGoodBye"
+Student.prototype.sayGoodBye = function(){
+  console.log("وداعا!");
+};
+
+// إستعمال المثال:
+var student1 = new Student("سفيان", "المناجم");
+student1.sayHello();   // "مرحبا، أنا سفيان. أنا أدرس المناجم."
+student1.walk();       // "أنا أتمشى!"
+student1.sayGoodBye(); // "وداعا!"
+
+// التحقق من أن instanceof يعمل بشكل صحيح
+console.log(student1 instanceof Person);  // true
+console.log(student1 instanceof Student); // true
+
+ +

فيما يخص السطر ;(Student.prototype = Object.create(Person.prototype في الإصدارات القديمة من جافا سكريبت والتي لا تدعم Object.create يمكن إما استخدام بعض الحيل في خداع المتصفحات –هذه الخدع معروفة إما بالاسم polyfill أو shim—أو استخدام دالة تحقق نفس النتيجة كما في المثال التالي:

+ +
function createObject(proto) {
+    function ctor() { }
+    ctor.prototype = proto;
+    return new ctor();
+}
+
+// الإستعمال:
+Student.prototype = createObject(Person.prototype);
+
+ +
ملاحظة: أنظر Object.create للمزيد من المعلومات حول ما يقوم به, و الرقاقات للمحركات القديمة.
+ +

التأكّد من أن this تُشير إلى الكائن المطلوب بغض النظر عن كيف للكائن أن يُستهل يمكن أن يكون صعبًا، ومع ذلك يوجد صياغة أبسط من شأنها أن تسهّل الأمر.

+ +
var Person = function(firstName) {
+  if (this instanceof Person) {
+    this.firstName = firstName;
+  } else {
+    return new Person(firstName);
+  }
+}
+
+ +

التغليف Encapsulation

+ +

ليس بالضرورة أن يعلم الصنف Student كيف تمّ تنفيذ/تعريف الطريقة ()walk للصنف Person لكي يستطيع استخدام تلك الطريقة، ولا يحتاج الصنف Student إلى تعريف تلك الطريقة صراحةً إلا إذا كان المطلوب التعديل عليها، ويُطلق على هذا الإجراء مفهوم التغليف encapsulation، والذي فيه يَحزم كل صنف البيانات والطُرق methods داخل وحدة/كينونة وحيدة.

+ +

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

+ +

التجريد Abstraction

+ +

التجرير ما هو إلا ميكانيكية تسمح للمطوّر في تجسيد جانب من المشكلة التي يُعمل عليها، إما من خلال الوراثة inheritance (التخصيص specialization) أو التركيب composition، وتُحقق جافا سكريبت التخصيص من خلال الوراثة، والتركيب من خلال السماح لحالات/أمثولات الصنف لتكون قيمًا لخاصيات attributes الكائنات الأخرى.

+ +

الصنف Function في جافا سكريبت يرث من الصنف Object (وهذا يوضّح التخصيص في هذا النموذج) والخاصية Function.prototype ما هي إلا حالة/أمثولة من الصنف Object (وهذا يوضّح جزئية التركيب composition).

+ +
var foo = function () {};
+
+// النتيجة ==> "foo عبارة عن وظيفة: true"
+console.log('foo عبارة عن وظيفة: ' + (foo instanceof Function));
+
+// النتيجة ==> "foo.prototype عبارة عن كائن: true"
+console.log('foo.prototype عبارة عن كائن: ' + (foo.prototype instanceof Object));
+ +

تعددية الأشكال Polymorphism

+ +

كما أن جميع الطُرق methods والخاصيات properties معرّفة ضمن الخاصية prototype، فيُمكن لبقية الأصناف أن تُعرِّف طُرقًا methods بنفس الاسم، وستكون الطُرق في نطاق الصنف الذي عُرفت به، إلا إذا كان الصنفان على علاقة من نوع أب وابن parent-child، بمعنى آخر أحد الصنفان يرث من الآخر
+
+ هذه المقالة تُرجمة الي العربية بواسطة : محمد أبرص

+ +

ملاحظات

+ +

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

+ +

هناك تقنيات أخرى تجعل البرمجة الكائنية التوجه أكثر تقدما لكنها خارج نطاق الهذه المقالة التمهيدية.

+
+ +

المراجع

+ +
    +
  1. ويكيبيديا - البرمجة الكائنية التوجه
    2. +
  2. ويكيبيديا - البرمجة القائمة على النوذج
    3. +
  3. ويكيبيديا - التغليف (البرمجة الكائنية التوجه)
    4. +
+ +

أنظر أيضا

+ + diff --git a/files/ar/conflicting/web/guide/index.html b/files/ar/conflicting/web/guide/index.html new file mode 100644 index 0000000000..051accb9a5 --- /dev/null +++ b/files/ar/conflicting/web/guide/index.html @@ -0,0 +1,98 @@ +--- +title: Web Development +slug: Web_Development +tags: + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide +translation_of_original: Web_Development +--- +

Web development comprises all aspects of developing a web site or web application.

+

Learn how to create anything from a simple web site to complex, highly interactive web sites featuring the latest Web technologies by perusing the articles you'll find here.

+ + + + + + + +
+

Documentation topics

+

Technologies

+
+
+ Introduction to Web development
+
+ A guide to learning how to develop for the Web.
+
+ HTML
+
+ HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.
+
+ CSS
+
+ Cascading Style Sheets make it possible to do advanced layout and page design on the Web.
+
+ JavaScript
+
+ JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.
+
+ DOM
+
+ The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.
+
+ AJAX
+
+ Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.
+
+ XHTML
+
+ Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.
+
+ SVG
+
+ Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.
+
+

Strategies

+
+
+ Web standards
+
+ Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.
+
+ Responsive Web design
+
+ Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.
+
+ Writing forward-compatible websites
+
+ Best practices for creating websites that do not break when browsers are updated.
+
+ Mobile Web development
+
+ Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.
+
+ Mozilla Web developer FAQ
+
+ Frequently asked questions from Web developers. With answers!
+
+

View All...

+ 		+

Community

+ +

Tools

+ +

View All...

+
diff --git a/files/ar/conflicting/web/html/element/index.html b/files/ar/conflicting/web/html/element/index.html new file mode 100644 index 0000000000..4c2a85ac03 --- /dev/null +++ b/files/ar/conflicting/web/html/element/index.html @@ -0,0 +1,599 @@ +--- +title: مجموعه عناصر لغة HTML5 +slug: Web/Guide/HTML/HTML5/HTML5_element_list +tags: + - اتش تي ام ال + - اتش تي ام ال 5 + - المبتدئين + - الويب + - انترنت + - دليل + - وسوم +translation_of: Web/HTML/Element +translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list +--- +

كل عناصر HTML5 المعتمدة مدرجة هنا، حيث أن اسماءها تصفها ومرتبة في مجموعات حسب وظائفها.

+ +

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

+ +

العلامة This element was added as part of HTML5 ترمز إلى أن العنصر قد تمت إضافته في HTML5، لاحظ أن العناصر الأخرى الموجودة هنا قد تكون ممددة أو معدلة في معانيها ضمن مواصفات HTML5.

+ +

عنصر الجذر

+ + + + + + + + + + + + + + +
العنصرنبذة عنه
{{HTMLElement("html")}}وهو يمثل جذر الـ HTML أو مستند XHTML و يجب أن تكون جميع العناصر الأخرى من نسل هذا العنصر.
+ +

البيانات الرئيسة للوثيقة

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
العنصرنبذة عنه
{{HTMLElement("head")}}وهو يمثل مجموعة من البيانات الوصفية حول الوثيقة بما في ذلك الوصلات أو تعريفات و البرامج النصية والسكريبتات و انماط الـ CSS .
{{HTMLElement("title")}}يحدد عنوان الوثيقة  كما هو موضح في شريط عنوان المتصفح أو في علامة التبويب الصفحة ولابد أن يحتوي على نصوص فقط لا غير .
{{HTMLElement("base")}}وهو يحدد الرابط الفتراضي للوثيقة كي يتم من خلاله فرز الروابط المنتسبة لصفحة من الرابط التابعه لاجناس اخرى .
{{HTMLElement("link")}}وهو يستخدم لربط ملفات  ألـ CSS والـ Javascript الخارجي مع وثيقة HTML .
{{HTMLElement("meta")}}يستخدم لتعريف العناصر التي لايمكن تعريفها مثل الترميز وغير من الاستخدامات الاخرى .
{{HTMLElement("style")}}يستخدم لكتابة CSS داخل وثيقة HTML  .
+ +

البرمجة

+ + + + + + + + + + + + + + + + + + + + + + +
العنصرنبذة عنه
{{HTMLElement("script")}}يستخدم لربط ملف نصي برمجي خارجي او تضمين ملف نص برمجي ويمكن الكتابة داخله بالغات متعدده مثل javascript او php و غيره .
{{HTMLElement("noscript")}}يحدد محتوى بديل لعرضه عندما لا يدعم المتصفح البرمجة .
{{HTMLElement("template")}}This element has been added in HTML5حاوية للمحتوى العميل أثناء وقت التشغيل باستخدام جافا سكريبت .
+ +

اقسام التضمين

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
العنصرنبذة عنه
{{HTMLElement("body")}} +
وهو يمثل محتوى وثيقة HTML ولابد ان تكون كل العناصر الضاهره في الجسم داخلة .
+
{{HTMLElement("section")}} This element has been added in HTML5يمثل قطعه في في المستند .
{{HTMLElement("nav")}} This element has been added in HTML5يحدد المقطع الذي يحتوي على ارتباطات التنقل .
{{HTMLElement("article")}} This element has been added in HTML5يحدد محتوى  منفصل بذاته والذي يمكن أن يوجد بشكل مستقل عن بقية المحتوى.
{{HTMLElement("aside")}} This element has been added in HTML5يعرف بعض المحتويات التي لها علاقة فضفاضة إلى محتوى الصفحة. إذا تم إزالته ، والمحتوى المتبقية لا يزال من المنطقي .
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>وهو يمثل 6 مستويات من عناوين النصية واكبرهم حجماً <h1> وعكسه <h6>
{{HTMLElement("header")}} This element has been added in HTML5يحدد محتوى بذاتها التي يمكن أن توجد بشكل مستقل عن بقية المحتوى . 
{{HTMLElement("footer")}} This element has been added in HTML5>يحدد تذييل للصفحة أو قسم  فإنه غالبا ما يحتوي على إشعار حقوق التأليف والنشر وبعض الروابط على المعلومات القانونية أو عناوين .
{{HTMLElement("address")}}يعرف الجزء الذي يحتوي على معلومات للإتصال به.
{{HTMLElement("main")}}This element has been added in HTML5يحدد المحتوى الرئيسي أو مهم في الوثيقة. هناك واحد فقط <main> عنصر في الوثيقة.
+ +

جداول البيانات

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
العنصرنبذة عنه
{{HTMLElement("p")}}يحدد الجزء الذي يجب أن يتم عرض كفقرة .
{{HTMLElement("hr")}}يمثل خط فاصل بين موضوعين .
{{HTMLElement("pre")}}يحدد النص المكتوب كما هو بالسطر وافراغ .
{{HTMLElement("blockquote")}} +

يمثل المحتوى الذي يتم نقلا عن مصدر آخر.

+
{{HTMLElement("ol")}}يحدد قائمة مرتبة مرقمة من العناصر .
{{HTMLElement("ul")}}يحدد قائمة غير مرتبة من البنود.
{{HTMLElement("li")}}يحدد عنصر من قائمة التعداد.
{{HTMLElement("dl")}}تعرف على قائمة تعريف ، وهذا هو ، على قائمة المصطلحات والتعاريف المرتبطة بها .
{{HTMLElement("dt")}}يمثل مصطلح يعرفه القادم < DD > .<dd>.
{{HTMLElement("dd")}}يمثل تعريف المصطلحات الواردة فورا قبل ذلك.
{{HTMLElement("figure")}} This element has been added in HTML5يمثل الرقم يتضح كجزء من الوثيقة.
{{HTMLElement("figcaption")}} This element has been added in HTML5يمثل أسطورة شخصية .
{{HTMLElement("div")}}يمثل وعاء العامة مع عدم وجود معنى خاص .
+ +

عناصر النصوص

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
العنصرنبذة عنه
{{HTMLElement("a")}}يمثل الارتباط التشعبي   وربط إلى مورد آخر .
{{HTMLElement("em")}}يمثل خط مائل .
{{HTMLElement("strong")}} يمثل خط مشدد .
{{HTMLElement("small")}}يمثل خط نحيف .
{{HTMLElement("s")}}يمثل نص مشطوب او محذوف
{{HTMLElement("cite")}} +

يمثل عنوان العمل. .

+
{{HTMLElement("q")}}يمثل الاقتباس المضمنة. .
{{HTMLElement("dfn")}}يمثل مصطلح الذي يرد في أقرب محتوى الجد التعريف.
{{HTMLElement("abbr")}}يمثل اختصار أو اختصار . التوسع في اختصار يمكن أن تكون ممثلة في سمة العنوان.
{{HTMLElement("data")}} This element has been added in HTML5الزميلة ل محتواه ما يعادل المقروءة آليا . ( هذا العنصر فقط في إصدار WHATWG للمعيار HTML ، و ليس في الإصدار W3C من HTML5
{{HTMLElement("time")}} This element has been added in HTML5يمثل قيمة التاريخ والوقت . أي ما يعادل المقروءة آليا يمكن أن تكون ممثلة في سمة التاريخ والوقت .
{{HTMLElement("code")}}يمثل عنصر يكتب بداخله الكود
{{HTMLElement("var")}}يمثل المتغير ، وهذا هو ، تعبير أو البرمجة الرياضية السياق الفعلي ، معرف تمثل ثابت ، رمزا تحديد الكمية الفعلية ، معلمة وظيفة ، أو مجرد نائب في النثر .
{{HTMLElement("samp")}}يمثل الناتج من برنامج أو جهاز كمبيوتر .
{{HTMLElement("kbd")}}تمثل مدخلات المستخدمين، في كثير من الأحيان من لوحة المفاتيح ، ولكن ليس بالضرورة . قد تمثل المدخلات الأخرى ، مثل الأوامر الصوتية كتب .
{{HTMLElement("sub")}},{{HTMLElement("sup")}}يمثل نص منخفظ او مرتفع
{{HTMLElement("i")}}تمثل بعض النص في صوت بديل أو المزاج، أو على الأقل من نوعية مختلفة ، مثل تسمية التصنيف، مصطلح تقني ، عبارة اصطلاحية ، الفكر، أو اسم السفينة
{{HTMLElement("b")}}يمثل نص مشدد .
{{HTMLElement("u")}}يمثل annoatation غير النصية التي العرض التقليدية و التسطير ، واصفة هذا النص كما يجري أخطأ في الهجاء أو وصفها الاسم الصحيح في النص الصيني
{{HTMLElement("mark")}} This element has been added in HTML5يمثل نص مشار اليه بالون الاصفر
{{HTMLElement("ruby")}} This element has been added in HTML5يمثل المحتوى إلى أن تكون علامة مع شروح روبي ، المديين القصير من النص قدمت جنبا إلى جنب مع النص. وكثيرا ما يستخدم هذا بالتزامن مع لغة شرق آسيا حيث تعمل شروح كدليل للنطق ، مثل furigana الياباني . .
{{HTMLElement("rt")}} This element has been added in HTML5يمثل نص الشرح روبي .
{{HTMLElement("rp")}} This element has been added in HTML5يمثل قوسين حول الشرح روبي ، وتستخدم لعرض الشرح بطريقة بديلة من قبل المتصفحات لا تدعم العرض القياسية ل شروحه.
{{HTMLElement("bdi")}} This element has been added in HTML5يمثل النص الذي يجب أن تكون معزولة عن محيطها ل تنسيق النص ثنائي الاتجاه . لأنها تتيح تضمين فترة من النص مع مختلف أو غير معروف، الاتجاهية .
{{HTMLElement("bdo")}}يمثل اتجاهها من أبنائها ، من أجل تجاوز صراحة خوارزمية ثنائية الاتجاه يونيكود
{{HTMLElement("span")}}يمثل النص مع عدم وجود معنى محدد . هذا لابد من استخدامها عند ينقل أي عنصر النص الدلالي الآخرين معنى كاف، وهو ، في هذه الحالة، وغالبا ما رفعتها سمات عالمية مثل الطبقة ، لانج ، أو دير.
{{HTMLElement("br")}}يمثل سطر جديد
{{HTMLElement("wbr")}} This element has been added in HTML5يمثل فرصة كسر خط ، وهذا هو نقطة المقترحة لل التفاف النص من أجل تحسين إمكانية القراءة من تقسيم النص على عدة أسطر .
+ +

التعديلات

+ + + + + + + + + + + + + + + + + + +
العنصرنبذة عنه
{{HTMLElement("ins")}}عنصر مضاف او تم تعديله
{{HTMLElement("del")}}عنصر محذوف وهو مثيل العنصر {{HTMLElement("s")}}
+ +

التضمين و الميديا

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
العنصرنبذة عنه
{{HTMLElement("img")}}يستخدم لربط الصور بالوثيقه
{{HTMLElement("iframe")}}يمثل السياق تصفح متداخلة ، وهذا هو وثيقة HTML المضمنة.
{{HTMLElement("embed")}} This element has been added in HTML5تمثل نقطة التكامل ل خارجي ، في كثير من الأحيان غير HTML ، تطبيق أو المحتوى التفاعلي .
{{HTMLElement("object")}}تمثل الموارد الخارجية ، التي تعامل على أنها صورة، وثيقة الفرعية HTML ، أو الموارد الخارجية التي سيتم تجهيزها من قبل في المكونات .
{{HTMLElement("param")}}تعرف المعلمات للاستخدام من قبل المكونات الإضافية التي يحتج بها <كائن > العناصر.
{{HTMLElement("video")}} This element has been added in HTML5يمثل الفيديو ، والملفات المرتبطة به الصوت و تعليق عليها، مع واجهة اللازمة لتشغيله .
{{HTMLElement("audio")}} This element has been added in HTML5يمثل الصوت ، أو تيار الصوت.
{{HTMLElement("source")}} This element has been added in HTML5يسمح المؤلفين لتحديد الموارد وسائل الإعلام البديلة ل عناصر الوسائط مثل {{HTMLElement("video")}} or {{HTMLElement("audio")}}.
{{HTMLElement("track")}} This element has been added in HTML5يسمح المؤلفين لتحديد مسار النص توقيت ل عناصر الوسائط مثل {{HTMLElement("video")}}or {{HTMLElement("audio")}}.
{{HTMLElement("canvas")}} This element has been added in HTML5تمثل منطقة خريطة أبيت أن النصوص يمكن استخدامها ل تقديم الرسومات ، مثل الرسوم البيانية والرسوم البيانية لعبة ، أو أي الصور المرئية على الطاير .
{{HTMLElement("map")}}بالتزامن مع {{HTMLElement("area")}}, يحدد مخطط صورة.
{{HTMLElement("area")}}بالتزامن مع {{HTMLElement("map")}},يحدد مخطط صورة.
{{SVGElement("svg")}} This element has been added in HTML5تعرف على إد الإدارة الانتخابية دائرة التنمية الاقتصادية صورة اتجاهي .
{{MathMLElement("math")}} This element has been added in HTML5يحدد صيغة رياضية.
+ +

Tabular data

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
العنصرنبذة عنه
{{HTMLElement("table")}}تمثل البيانات مع أكثر من بعد واحد.
{{HTMLElement("caption")}}يمثل عنوان الجدول.
{{HTMLElement("colgroup")}}تمثل مجموعة من واحد أو أكثر من الأعمدة من الجدول.
{{HTMLElement("col")}}يمثل عمود من الجدول.
{{HTMLElement("tbody")}}يمثل كتلة من الصفوف التي تصف البيانات ملموسة من الجدول.
{{HTMLElement("thead")}}يمثل كتلة من الصفوف التي تصف التسميات عمود من الجدول.
{{HTMLElement("tfoot")}}يمثل كتلة من الصفوف التي تصف ملخصات عمود من الجدول.
{{HTMLElement("tr")}}يمثل صف من الخلايا في الجدول.
{{HTMLElement("td")}}يمثل خلية البيانات في الجدول.
{{HTMLElement("th")}}يمثل خلية رأس في الجدول.
+ +

 الاشكال

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
العنصرنبذة عنه
{{HTMLElement("form")}}عنصر تبادل المعلومات مع الخادم حيث يكون داخله مجموعه من العناصر تتيح لمستخدم التعديل والاضافه
{{HTMLElement("fieldset")}}مثل عنصار او ضوابط مرتبة
{{HTMLElement("legend")}}يمثل عنوان <fieldset> .
{{HTMLElement("label")}}يعتبر توضيح او اسم عنصر داخل <form>
{{HTMLElement("input")}}يمثل حقل من البينات مما يتحُيح للمستخدم استعمالها
{{HTMLElement("button")}}عباره عن وز .
{{HTMLElement("select")}} يمثل مجموعه من الخيارات المٌسدله المرتبة .
{{HTMLElement("datalist")}} This element has been added in HTML5يمثل  قائمة منسدله تحوي مجموعه من الخيارات المعدة مسبقاً اشبه باقائمة .
{{HTMLElement("optgroup")}}يمثل عنوان لمجموعه خيارات <option> الي تكون ادخل {{HTMLElement("optgroup")}} الي هي داخل {{HTMLElement("datalist")}}.
{{HTMLElement("option")}}يمثلخيارات داخل العنصر{{HTMLElement("select")}} أو اقتراح من{{HTMLElement("datalist")}}.
{{HTMLElement("textarea")}}مربع يكتب بداخله نص يمكن التحكم به .
{{HTMLElement("keygen")}} This element has been added in HTML5يمثل سطر مولد مفاتيح .
{{HTMLElement("output")}} This element has been added in HTML5سَحاب يمكن التحكم به .
{{HTMLElement("progress")}} This element has been added in HTML5يمثل شريط اخذ بالمتلاء يعني مثل الداون لود منيجر لما يكون ايحمل
{{HTMLElement("meter")}} This element has been added in HTML5يمثل قيمة مئويه اخذه بالمتلاء بشكل صغير .
+ +

العناصر التفاعلية

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
العنصرنبذة عنه
{{HTMLElement("details")}} This element has been added in HTML5يمثل قائمة مُنسدله من الخيارات
{{HTMLElement("summary")}} This element has been added in HTML5وهو يمثل عنوان لقائمة العنصر <details> .
{{HTMLElement("menuitem")}} This element has been added in HTML5يمثل الأوامر  التي تمكن المستخدم  من الاستدعاء.
{{HTMLElement("menu")}} This element has been added in HTML5يمثل قائمة من العناصر .
+ +

وهنُاك أيضاً

+ + diff --git a/files/ar/conflicting/web/html/index.html b/files/ar/conflicting/web/html/index.html new file mode 100644 index 0000000000..b228c2f893 --- /dev/null +++ b/files/ar/conflicting/web/html/index.html @@ -0,0 +1,88 @@ +--- +title: HTML (لغة ترميز النص الفائق) +slug: Web/HTML_لغة_ترميز_النص_الفائق +translation_of: Web/HTML +--- +
{{HTMLSidebar}}
+ +

HTML ( لغة ترميز النصوص التشعبية ) هي اللبنة الأساسية للويب. فهي تقوم بوصف و تعريف محتوى صفحة الويب. التقنيات الأخرى إلى جانب HTML تعمل عادةً على وصف مظهر صفحة الويب (CSS) أو تفاعلها مع المستخدم (الجافاسكربت).

+ +

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

+ +

تستخدم HTML "الوسوم" لوصف النصوص, الصور, وغيرها من المحتويات لعرضعها على متصفح الويب. وسوم HTML تتضمن "عناصر" خاصة مثل  {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, وغيرها الكثير.

+ +

المقالات أدناه ستساعدك على تعلم المزيد حول HTML.

+ +
+ + +
+
+

دورات للمبتدئين

+ +

منطقة تعلم HTML خاصتنا تتميز بوحدات متعددة و التي تقوم بتعليم HTML من الألف إلى الياء — لا تتطلب معرفة مسبقة.

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

مواضيع متقدمة

+ +
+
ادارة التركيز في HTML
+
الصفة activeElement و الدالة hasFocus() التي تساعدك على تتبع و التحكم بتفاعلات المستخدم مع عناصر صفحة الويب. 
+
استخدام ذاكرة التخزين المؤقت للتطبيق
+
ذاكرة التخزين المؤقت تسمح للتطبيقات المبنية على الويب بالعمل في وضع عدم الإتصال. يمكنك استخدام واجهة ذاكرة التخزين المؤقت للتطبيق (AppCache) لتحديد الموارد التي يجب على المتصفح تخزينها و إتاحتها للمستخدمين في وضع عدم الإتصال. التطبيقات التي يتم تحميلها مؤقتاً تعمل بشكل صحيح حتى و لو قام المستخدمون بالضغط على زر التحديث عندما يكونون في وضع عدم الإتصال. 
+
+
+ +
+

مراجع

+ +
+
مرجع HTML
+
تتألف HTML من عناصر, كل منها يمكن تعديلها بواسطة عدد من الصفات. وثائق HTML متلصة ببعضها البعض بواسطة روابط.
+
مرجع عناصر HTML
+
تصفح قائمة لجميع عناصر HTML.
+
مرجع صفات HTML
+
العناصر في HTML تمتلك صفات. تعد هذه الصفات قيم إضافية تقوم بتعديل العناصر أو تخصيص وظيفتها بطرق مختلفة.
+
الصفات الشاملة
+
الصفات الشاملة قد يمكن استخدامها على جميع عناصر HTML, حتى العناصر الغير معيارية. هذا يعني أنَّ أي عنصر غير معياري لا يزال يجب أن يسمح باستخدام هذه الصفات, على الرغم أنَّ هذه العناصر تجعل مستند HTML5 غير متوافق.
+
العناصر المضمنة و العناصر المستحوذة
+
العناصر في HTML عادةً إما "مضمنة" أو "مستحوذة". العنصر المضمن يأحذ المساحة المحصورة بواسطة الوسوم التي تحدده. أما العنصر المستحوذ فأنه يأخذ كامل مساحة العنصر الأب (الحاوي), وبالتالي فإنه ينشئ "كتلة".
+
أنواع الرابط
+
في HTML, أنواع روابط متنوعة يمكن استخدامها لإنشاء أو تعريف صلة بين وثيقتين. تتضمن عناصر الرابط التي يمكن استخدامها على <a>, <area>, و <link>.
+
صيغ الوسائط المدعومة في HTML و عناصر الصوت و الفيديو
+
عنصر <audio> و <video> يسمح لك بتشغيل وسائط الصوت و الفيديو. هذه العناصر توفر بدائل مشابهة للمتصفح كالتي موجودة في أدوبي فلاش و الإضافات الأخرى.
+
أنواع محتوى HTML
+
تتألف HTML من عدة أنواع من المحتوى, كل نوع يسمح لك باستخدام عدة سياقات و يمنعك استخدامها في أخرى. وبالمثل كل نوع يملك مجموعة من الفئات يمكن أن تحتوي على عناصر يمكن أو لا يمكن استخدامها. هذا دليل لهذه الفئات.
+
وضع المراوغة و الوضع المعياري
+
معلومات تاريخية عن وضع المراوغة و الوضع المعياري.
+
+ +

مواضيع متعلقة

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

رؤية المزيد..

+
diff --git a/files/ar/glossary/character/index.html b/files/ar/glossary/character/index.html new file mode 100644 index 0000000000..47443563a1 --- /dev/null +++ b/files/ar/glossary/character/index.html @@ -0,0 +1,20 @@ +--- +title: الحروف +slug: Glossary/الحروف +translation_of: Glossary/Character +--- +

الحرف هي إما "رمز" (حروف ، أرقام ، علامات ترقيم) أو "تحكم" غير طباعي (على سبيل المثال ، رمز الإرجاع أوخطّ وصل).

+ +

{{glossary ("UTF-8")}} هي مجموعة الأحرف الأكثر شيوعًا وتتضمن حروفًا لغوية من أشهر اللغات البشرية.

+ +

لمعرفة المزيد

+ +

معلومات عامة

+ + diff --git a/files/ar/glossary/first-class_function/index.html b/files/ar/glossary/first-class_function/index.html new file mode 100644 index 0000000000..405e49ea6b --- /dev/null +++ b/files/ar/glossary/first-class_function/index.html @@ -0,0 +1,14 @@ +--- +title: الدوال من الدرجة الأولى +slug: Glossary/الدوال_من_الدرجة_الأولى +translation_of: Glossary/First-class_Function +--- +

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

+ +

تعلم المزيد

+ +

معلومات عامة

+ + diff --git a/files/ar/glossary/object/index.html b/files/ar/glossary/object/index.html new file mode 100644 index 0000000000..01f15f9478 --- /dev/null +++ b/files/ar/glossary/object/index.html @@ -0,0 +1,24 @@ +--- +title: كائن +slug: Glossary/الكائنات +tags: + - كائن + - مسرد +translation_of: Glossary/Object +--- +

الكائِن (بالإنجليزيَّة: Object) يشير إلى هيكل بيانات يحوي بيانات وتعليمات للتعامل مع البيانات. تُشير الكائِنات أحيانًا إلى أشياء حقيقيَّة، كالكائِن car أو map المُعرَّف في لعبة سباق. تُعد لغة {{glossary("JavaScript", "الجافاسكربت")}} والجافا والسي++ وبايثون وروبي من الأمثلة على لغات {{glossary("OOP","البرمجة الكائنيَّة")}}.

+ +

المزيد من التفاصيل

+ +

معلومات عامة

+ + + +

مراجع تقنيَّة

+ + diff --git a/files/ar/glossary/property/index.html b/files/ar/glossary/property/index.html new file mode 100644 index 0000000000..3d197d0c39 --- /dev/null +++ b/files/ar/glossary/property/index.html @@ -0,0 +1,20 @@ +--- +title: الخاصية +slug: Glossary/الخاصية +translation_of: Glossary/property +--- +

يمكن أن يكون لمصطلح الخاصية عدة معاني حسب السياق. قد يشير إلى:

+ + + +

     الخاصية CSS هي خاصية مميزة (مثل اللون) تحدد القيمة المرتبطة بها جانبًا واحدًا من كيفية عرض المتصفح للعنصر.

+ + + +

     تعد خاصية JavaScript إحدى خصائص الكائن ، وغالبًا ما تصف السمات المرتبطة ببنية البيانات.

+ +

{{GlossaryDisambiguation}}

diff --git a/files/ar/glossary/scope/index.html b/files/ar/glossary/scope/index.html new file mode 100644 index 0000000000..b2c80924a5 --- /dev/null +++ b/files/ar/glossary/scope/index.html @@ -0,0 +1,43 @@ +--- +title: المجالات +slug: Glossary/المجالات +translation_of: Glossary/Scope +--- +

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

+ +

nested scopes intro in javascript

+ +

التوابع  ({{glossary("function")}}) في {{glossary("JavaScript")}} تستعمل لإنشاء مجالات جديدة (كل تابع يمثل مجال جديد خاص به) فعلى سبيل المثال,إن تعريف متغير داخل التابع لن يمكنك من استعماله داخل تابع آخر او من اي مجال خارج هذا التابع, وهذا مثال يوضح لك الفكرة:

+ +
function exampleFunction() {
+
+    // هذا المتغير لا يمكن استعماله إلا ضمن التابع الحالي فقط
+    // او أي تابع محتوى داخله
+    var x = "متغير داخل التابع";
+    console.log("داخل التابع");
+    console.log(x);
+}
+
+console.log(x);  // لا يمكن الوصول للمتغير من الخارج
+ +

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

+ +
var x = "انا متغير مُعرف خارج التابع";
+
+exampleFunction();
+
+function exampleFunction() {
+    console.log("انا داخل التابع");
+    console.log(x); // يمكن لمجال داخلي ابن ان يصل لمتغيرات مجال خارجي أب
+}
+
+console.log("انا خارج التابع في المجال العام");
+console.log(x);
+ +

Learn more

+ +

General knowledge

+ + diff --git "a/files/ar/glossary/\330\247\331\204\330\255\330\261\331\210\331\201/index.html" "b/files/ar/glossary/\330\247\331\204\330\255\330\261\331\210\331\201/index.html" deleted file mode 100644 index 47443563a1..0000000000 --- "a/files/ar/glossary/\330\247\331\204\330\255\330\261\331\210\331\201/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: الحروف -slug: Glossary/الحروف -translation_of: Glossary/Character ---- -

الحرف هي إما "رمز" (حروف ، أرقام ، علامات ترقيم) أو "تحكم" غير طباعي (على سبيل المثال ، رمز الإرجاع أوخطّ وصل).

- -

{{glossary ("UTF-8")}} هي مجموعة الأحرف الأكثر شيوعًا وتتضمن حروفًا لغوية من أشهر اللغات البشرية.

- -

لمعرفة المزيد

- -

معلومات عامة

- - diff --git "a/files/ar/glossary/\330\247\331\204\330\256\330\247\330\265\331\212\330\251/index.html" "b/files/ar/glossary/\330\247\331\204\330\256\330\247\330\265\331\212\330\251/index.html" deleted file mode 100644 index 3d197d0c39..0000000000 --- "a/files/ar/glossary/\330\247\331\204\330\256\330\247\330\265\331\212\330\251/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: الخاصية -slug: Glossary/الخاصية -translation_of: Glossary/property ---- -

يمكن أن يكون لمصطلح الخاصية عدة معاني حسب السياق. قد يشير إلى:

- - - -

     الخاصية CSS هي خاصية مميزة (مثل اللون) تحدد القيمة المرتبطة بها جانبًا واحدًا من كيفية عرض المتصفح للعنصر.

- - - -

     تعد خاصية JavaScript إحدى خصائص الكائن ، وغالبًا ما تصف السمات المرتبطة ببنية البيانات.

- -

{{GlossaryDisambiguation}}

diff --git "a/files/ar/glossary/\330\247\331\204\330\257\331\210\330\247\331\204_\331\205\331\206_\330\247\331\204\330\257\330\261\330\254\330\251_\330\247\331\204\330\243\331\210\331\204\331\211/index.html" "b/files/ar/glossary/\330\247\331\204\330\257\331\210\330\247\331\204_\331\205\331\206_\330\247\331\204\330\257\330\261\330\254\330\251_\330\247\331\204\330\243\331\210\331\204\331\211/index.html" deleted file mode 100644 index 405e49ea6b..0000000000 --- "a/files/ar/glossary/\330\247\331\204\330\257\331\210\330\247\331\204_\331\205\331\206_\330\247\331\204\330\257\330\261\330\254\330\251_\330\247\331\204\330\243\331\210\331\204\331\211/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: الدوال من الدرجة الأولى -slug: Glossary/الدوال_من_الدرجة_الأولى -translation_of: Glossary/First-class_Function ---- -

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

- -

تعلم المزيد

- -

معلومات عامة

- - diff --git "a/files/ar/glossary/\330\247\331\204\331\203\330\247\330\246\331\206\330\247\330\252/index.html" "b/files/ar/glossary/\330\247\331\204\331\203\330\247\330\246\331\206\330\247\330\252/index.html" deleted file mode 100644 index 01f15f9478..0000000000 --- "a/files/ar/glossary/\330\247\331\204\331\203\330\247\330\246\331\206\330\247\330\252/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: كائن -slug: Glossary/الكائنات -tags: - - كائن - - مسرد -translation_of: Glossary/Object ---- -

الكائِن (بالإنجليزيَّة: Object) يشير إلى هيكل بيانات يحوي بيانات وتعليمات للتعامل مع البيانات. تُشير الكائِنات أحيانًا إلى أشياء حقيقيَّة، كالكائِن car أو map المُعرَّف في لعبة سباق. تُعد لغة {{glossary("JavaScript", "الجافاسكربت")}} والجافا والسي++ وبايثون وروبي من الأمثلة على لغات {{glossary("OOP","البرمجة الكائنيَّة")}}.

- -

المزيد من التفاصيل

- -

معلومات عامة

- - - -

مراجع تقنيَّة

- - diff --git "a/files/ar/glossary/\330\247\331\204\331\205\330\254\330\247\331\204\330\247\330\252/index.html" "b/files/ar/glossary/\330\247\331\204\331\205\330\254\330\247\331\204\330\247\330\252/index.html" deleted file mode 100644 index b2c80924a5..0000000000 --- "a/files/ar/glossary/\330\247\331\204\331\205\330\254\330\247\331\204\330\247\330\252/index.html" +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: المجالات -slug: Glossary/المجالات -translation_of: Glossary/Scope ---- -

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

- -

nested scopes intro in javascript

- -

التوابع  ({{glossary("function")}}) في {{glossary("JavaScript")}} تستعمل لإنشاء مجالات جديدة (كل تابع يمثل مجال جديد خاص به) فعلى سبيل المثال,إن تعريف متغير داخل التابع لن يمكنك من استعماله داخل تابع آخر او من اي مجال خارج هذا التابع, وهذا مثال يوضح لك الفكرة:

- -
function exampleFunction() {
-
-    // هذا المتغير لا يمكن استعماله إلا ضمن التابع الحالي فقط
-    // او أي تابع محتوى داخله
-    var x = "متغير داخل التابع";
-    console.log("داخل التابع");
-    console.log(x);
-}
-
-console.log(x);  // لا يمكن الوصول للمتغير من الخارج
- -

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

- -
var x = "انا متغير مُعرف خارج التابع";
-
-exampleFunction();
-
-function exampleFunction() {
-    console.log("انا داخل التابع");
-    console.log(x); // يمكن لمجال داخلي ابن ان يصل لمتغيرات مجال خارجي أب
-}
-
-console.log("انا خارج التابع في المجال العام");
-console.log(x);
- -

Learn more

- -

General knowledge

- - diff --git a/files/ar/heesfoord007/index.html b/files/ar/heesfoord007/index.html deleted file mode 100644 index 18fb17ee5d..0000000000 --- a/files/ar/heesfoord007/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: heesfoord007 -slug: heesfoord007 -tags: - - Landing - - NeedsTranslation - - TopicStub - - Web ---- -
The open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find links to our Web technology documentation.
- -
-
-

Documentation for Web developers

- -
-
Web Developer Reference
-
A list of all references for Web technologies, including those for HTML, CSS, and so on.
-
Web Developer Guide
-
The Web Developer Guide provides useful how-to content to help you actually use Web technologies to do what you want or need to do.
-
Tutorials for Web developers
-
A list of tutorials to take you step-by-step through learning APIs, technologies, or broad topic areas.
-
Developing Web applications
-
Documentation for Web application developers; Web apps are true write-once, deploy anywhere apps for mobile, desktop, and Firefox OS.
-
Code snippets
-
This is a quick list of useful code snippets (small code samples) available for developers of extensions for the various Mozilla applications. Many of these samples can also be used in XULRunner applications, as well as in actual Mozilla code itself.
-
- -

View All...

-
- -
-

Web technology references

- -
-
Web APIs
-
Reference material for each of the interfaces that comprise the Web's APIs, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps.
-
HTML
-
HyperText Markup Language is the language used to describe and define the content of a Web page.
-
CSS
-
Cascading Style Sheets are used to describe the appearance of Web content.
-
SVG
-
Scalable Vector Graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.
-
MathML
-
The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.
-
-
-
- -

Temporary

- -

The stuff below here is temporary to help keep track of things while organization work is ongoing. Pay it no mind.

- -
{{ListSubpages}}
diff --git a/files/ar/html/element/article/index.html b/files/ar/html/element/article/index.html deleted file mode 100644 index 4ffbdbe80a..0000000000 --- a/files/ar/html/element/article/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: عنصر المقالة
-slug: HTML/Element/article -translation_of: Web/HTML/Element/article ---- -
{{HTMLRef}}
- -

عنصر الـ <article> الموجود في الـ html فهو مفهوم من عنوانه والذي يعني (مقال) ونعرف جميعنا ان المقالات بنية مستقلة بذاتها. وتوجد في الوثائق, الصفحات, التطبيقات او المواقع. ما نتحدث عنه اليوم هو كيف نكتب عناصر الـ html لصفحة تحتوي على مقالات مثل : منشور المنتديات, مقالات الصفحات و المجلات. حتى منشورات المدونات blogs تعتبر مقالة. 

- -

في حالة اردت ان تبرمج صفحة تختص بالمقالات لابد لك ان تقوم باستخدام تاك او عنصر <article>. المثال التالي يوضع استخدام المقالة بابسط صوره لها: 

- -
{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}
- -
- - - -

يمكن لصفحة الواحدة ان تحتوي على الكثير من المقالات. وهذا المثال دليل على ذلك. ليس هذا فحسب, فيمكن ان يكون عنصر المقالة يحتوي على عناصر مقالة بداخله ( تسمى nested element اي العناصر المتداخلة ).

- -

اليك معلومات خاطفة عن هذا العنصر:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
فئة المكون -

Flow content, sectioning content, palpable content

-
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts flow content. Note that an <article> element must not be a descendant of an {{HTMLElement("address")}} element.
Implicit ARIA rolearticle
Permitted ARIA roles{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}
DOM interface{{domxref("HTMLElement")}}
- -

الخصائص

- -

هذا العنصر يحتوي على الخصائص العامة فقط. يمكنك زيارتها من هنا

- -

ملاحظات الاستخدام

- -

انت حر في استخدام هذا العنصر. ولكننا نفضل ان تقوم بمراعات هذه النقاط على الاقل.

- - - -

المثال التالي يلخص لك هذه النقاط:

- -
<article class="film_review">
-  <header>
-    <h2>Jurassic Park</h2>
-  </header>
-  <section class="main_review">
-    <p>Dinos were great!</p>
-  </section>
-  <section class="user_reviews">
-    <article class="user_review">
-      <p>Way too scary for me.</p>
-      <footer>
-        <p>
-          Posted on
-          <time datetime="2015-05-16 19:00">May 16</time>
-          by Lisa.
-        </p>
-      </footer>
-    </article>
-    <article class="user_review">
-      <p>I agree, dinos are my favorite.</p>
-      <footer>
-        <p>
-          Posted on
-          <time datetime="2015-05-17 19:00">May 17</time>
-          by Tom.
-        </p>
-      </footer>
-    </article>
-  </section>
-  <footer>
-    <p>
-      Posted on
-      <time datetime="2015-05-15 19:00">May 15</time>
-      by Staff.
-    </p>
-  </footer>
-</article>
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5 W3C')}}
- -

Browser compatibility

- - - -

{{Compat("html.elements.article")}}

- -

يمكنك زيارة التالي:

- - diff --git a/files/ar/html/element/bdo/index.html b/files/ar/html/element/bdo/index.html deleted file mode 100644 index ee154b30c1..0000000000 --- a/files/ar/html/element/bdo/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: ': عنصر تجاوز النص ثنائي الاتجاه' -slug: HTML/Element/bdo -translation_of: Web/HTML/Element/bdo ---- -
{{HTMLRef}}
- -

HTML عنصر تجاوز النص ثنائي الاتجاه(<bdo>) يتجاوز الاتجاه الحالي للنص، بحيث يتم تقديم النص داخل في اتجاه مختلف. يتم رسم أحرف النص من نقطة البداية في الاتجاه المحدد. لا يتأثر اتجاه الحروف الفردية (حتى لا تحصل على أحرف إلى الوراء، على سبيل المثال).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
يحتوي الفئاتFlow content, phrasing content, palpable content.
المحتوى المسموح بهPhrasing content.
وسم الإقفال{{no_tag_omission}}
يسمح الآباءأي عنصر يقبل  صياغة المحتوى.
قواعد ARIA مسموحالكل
DOM واجهة{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
- -

السِمات

- -

تتضمن سمات هذه العناصر  السمات العامة.

- -
-
{{htmlattrdef("dir")}}
-
الاتجاه الذي يجب أن يظهر فيه النص في محتويات هذا العنصر.
-
القيم المحتملة هي:
-
-
    -
  • ltr: يشير إلى أن النص يجب أن يسير في الاتجاه من اليسار إلى اليمين.
    • -
  • rtl:يشير إلى أن النص يجب أن يكون في الاتجاه من اليمين إلى اليسار.
    • -
-
-
- -

الأمثلة

- -
<!-- Switch text direction -->
-<p>This text will go left to right.</p>
-<p><bdo dir="rtl">This text will go right
-to left.</bdo></p>
-
- -

النتيجة

- -

 

- -

{{EmbedLiveSample('Examples')}}

- -

 

- -

ملاحظات

- -

مواصفات HTML 4 لم تحدد أحداث لهذا العنصر؛ تمت إضافتها في XHTML. وهذا على الأرجح سهو.

- -

مميزات

- - - - - - - - - - - - - - - - - - - - - - - - - - -
المميزاتالحالةتعليق
{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}{{Spec2('HTML4.01')}} 
- -

التكامل(دعم) مع المتصفح

- - - -

{{Compat("html.elements.bdo")}}

diff --git a/files/ar/html/element/headings_elements/index.html b/files/ar/html/element/headings_elements/index.html deleted file mode 100644 index acd3267d37..0000000000 --- a/files/ar/html/element/headings_elements/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: '

–

: عناصر العناوين' -slug: HTML/Element/headings_elements -translation_of: Web/HTML/Element/Heading_Elements ---- -

 عناصر <h1>–<h6> تقدم لنا سته مستويات من عناوين الأقسام. حيث أن العنصر<h1> يمثل العنوان الأعلى مستوى في الأهمية بينما العنصر <h2> هو الأقل.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
فئات المحتوى Flow content, heading content, palpable content.
المحتوى المسموح بهPhrasing content.
إغفال الوسوملا شئ، كلاً من وسمّي الفتح والإقفال إجباري
الأباء المسموح بهم للعنصرAny element that accepts flow content; don't use an heading element as a child of the {{HTMLElement("hgroup")}} element — it is now deprecated.
Permitted ARIA roles{{ARIARole("tab")}}, {{ARIARole("presentation")}}
DOM interface{{domxref("HTMLHeadingElement")}}
- -

السمات

- -

هذه العناصر تتضمن السمات العامة.

- -
-

السمة align عفاء عنها الزمن، لا تستخدمها

-
- -

ملاحظات الإستخدام

- -
    -
  • يمكن إستخدام معلومات العناوين من قبل الـ user agents, على سبيل المثال لإنشاء جدول المحتويات لمستند بشكل تلقائي.
    • -
  • لا تستخدم عناوين بمستويات منخفضة لتقليل حجم خط العناوين: إستخدم خاصية لغة CSS المسؤولة عن التحكم بأحجام الخطوط font-size بدلاً من ذلك.
    • -
  •  تجنب تخطي مستويات العناوين: دائماً إبدا من <h1>، من ثم إستخدم <h2> وهكذا.
    • -
  • يجب أن تأخذ بعين الإعتبار تجنب إستخدام العنصر <h1> أكثر من مرة في الصفحة. إطلع على تعريف الأقسام في إستخدام الأقسام و وتسلسل العناوين في الـ HTML لمعلومات أكثر.
    • -
- -

أمثلة

- -

جميع العناوين

- -

الكود التالي يظهر كل مستويات العناوين، قيد الإستخدام.

- -
<h1>Heading level 1</h1>
-<h2>Heading level 2</h2>
-<h3>Heading level 3</h3>
-<h4>Heading level 4</h4>
-<h5>Heading level 5</h5>
-<h6>Heading level 6</h6>
-
- -

هنا نتيجة هذا الكود:

- -

{{ EmbedLiveSample('All_headings', '280', '300', '') }}

- -

مثال لصفحة

- -

الكود التالي يظهر بعض العناوين مع بعض المحتوى بأسفلها.

- -
<h1>Heading elements</h1>
-<h2>Summary</h2>
-<p>Some text here...</p>
-
-<h2>Examples</h2>
-<h3>Example 1</h3>
-<p>Some text here...</p>
-
-<h3>Example 2</h3>
-<p>Some text here...</p>
-
-<h2>See also</h2>
-<p>Some text here...</p>
-
- -

هنا نتيجة هذا الكود:

- -

{{ EmbedLiveSample('Example_page', '280', '480', '') }}

- -

سهولة الوصول

- -

التنقل بين الأجزاء والصفحات

- -

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

- -

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

- -

لا تقم بالتالي:

- -
<h1>Heading level 1</h1>
-<h3>Heading level 3</h3>
-<h4>Heading level 4</h4>
-
- -

قم بالتالي:

- -
<h1>Heading level 1</h1>
-<h2>Heading level 2</h2>
-<h3>Heading level 3</h3>
-
- -

تسلسل العناوين -  Nesting

- -

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

- -
    -
  1. h1 Beetles - -
      -
    1. h2 Etymology
      2. -
    2. h2 Distribution and Diversity
      3. -
    3. h2 Evolution -
        -
      1. h3 Late Paleozoic
        2. -
      2. h3 Jurassic
        3. -
      3. h3 Cretaceous
        4. -
      4. h3 Cenozoic
        5. -
      -
      4. -
    4. h2 External Morphology -
        -
      1. h3 Head -
          -
        1. h4 Mouthparts
          2. -
        -
        2. -
      2. h3 Thorax -
          -
        1. h4 Prothorax
          2. -
        2. h4 Pterothorax
          3. -
        -
        3. -
      3. h3 Legs
        4. -
      4. h3 Wings
        5. -
      5. h3 Abdomen
        6. -
      -
      5. -
    -
    2. -
- -

When headings are nested, heading levels may be "skipped" when closing a subsection.

- - - -

Labeling section content

- -

Another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout.

- -

Sectioning content can be labeled using a combination of the aria-labelledby and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.

- -

Example

- -
<header>
-  <nav aria-labelledby="primary-navigation">
-    <h2 id="primary-navigation">Primary navigation</h2>
-    <!-- navigation items -->
-  </nav>
-</header>
-
-<!-- page content -->
-
-<footer>
-  <nav aria-labelledby="footer-navigation">
-    <h2 id="footer-navigation">Footer navigation</h2>
-    <!-- navigation items -->
-  </nav>
-</footer>
-
- -

In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each nav element's contents to determine their purpose.

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML4.01')}} 
- -

Browser compatibility

- - - -

{{Compat("html.elements.h1")}}

- -

See also

- -
    -
  • {{HTMLElement("p")}}
    • -
  • {{HTMLElement("div")}}
    • -
  • {{HTMLElement("section")}}
    • -
- -
{{HTMLRef}}
diff --git a/files/ar/html/element/index.html b/files/ar/html/element/index.html deleted file mode 100644 index a2fb5187e7..0000000000 --- a/files/ar/html/element/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: HTML element reference -slug: HTML/Element -translation_of: Web/HTML/Element ---- -

يسرد مرجع HTML هذا جميع عناصر HTML ، المحددة في HTML5 أو في مواصفات سابقة. عند تضمينها داخل أقواس زاوية ، فإنها تشكل علامات HTML : <elementname>.العناصر عبارة عن كيانات تحدد كيفية إنشاء مستندات HTML ، ونوع المحتوى الذي يجب وضعه في أي جزء من مستند HTML .

- -

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

- -

في مستند HTML ، يتم تعريف عنصر بواسطة علامة البداية . إذا احتوى عنصر المحتويات الأخرى، وينتهي مع علامة إغلاق، حيث يسبق اسم العنصر بواسطة خط مائل: </elementname>. لا تحتاج إلى إغلاق بعض العناصر ، مثل عناصر الصورة.هذه هي المعروفة باسم العناصر باطلة . تحتوي مستندات HTML على شجرة من هذه العناصر. يدعى كل لتمثيل ما يفعله. على سبيل المثال ، <title>يمثل العنصر عنوان المستند. فيما يلي قائمة أبجدية بعناصر HTML.

- -

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

- -

يشير الرمز Ⓒ إلى أن العنصر معرف في مجموعة المواصفات Web Components.

- -
A - -
    -
  • {{ HTMLElement("a") }}
    • -
  • {{ HTMLElement("abbr") }}
    • -
  • {{ HTMLElement("acronym") }}
    • -
  • {{ HTMLElement("address") }}
    • -
  • {{ HTMLElement("applet") }}
    • -
  • {{ HTMLElement("area") }}
    • -
  • {{ HTMLElement("article") }}
    • -
  • {{ HTMLElement("aside") }}
    • -
  • {{ HTMLElement("audio") }}
    • -
-B - -
    -
  • {{ HTMLElement("b") }}
    • -
  • {{ HTMLElement("base") }}
    • -
  • {{ HTMLElement("basefont") }}
    • -
  • {{ HTMLElement("bdi") }}
    • -
  • {{ HTMLElement("bdo") }}
    • -
  • {{ HTMLElement("bgsound") }}
    • -
  • {{ HTMLElement("big") }}
    • -
  • {{ HTMLElement("blink") }}
    • -
  • {{ HTMLElement("blockquote") }}
    • -
  • {{ HTMLElement("body") }}
    • -
  • {{ HTMLElement("br") }}
    • -
  • {{ HTMLElement("button") }}
    • -
-C - -
    -
  • {{ HTMLElement("canvas") }}
    • -
  • {{ HTMLElement("caption") }}
    • -
  • {{ HTMLElement("center") }}
    • -
  • {{ HTMLElement("cite") }}
    • -
  • {{ HTMLElement("code") }}
    • -
  • {{ HTMLElement("col") }}
    • -
  • {{ HTMLElement("colgroup") }}
    • -
-D - -
    -
  • {{ HTMLElement("data") }}
    • -
  • {{ HTMLElement("datalist") }}
    • -
  • {{ HTMLElement("dd") }}
    • -
  • {{ HTMLElement("decorator")}}
    • -
  • {{ HTMLElement("del") }}
    • -
  • {{ HTMLElement("details") }}
    • -
  • {{ HTMLElement("dfn") }}
    • -
  • {{ HTMLElement("dir") }}
    • -
  • {{ HTMLElement("div") }}
    • -
  • {{ HTMLElement("dl") }}
    • -
  • {{ HTMLElement("dt") }}
    • -
-E - -
    -
  • {{HTMLElement("em") }}
    • -
  • {{ HTMLElement("embed") }}
    • -
-F - -
    -
  • {{ HTMLElement("fieldset") }}
    • -
  • {{ HTMLElement("figcaption") }}
    • -
  • {{ HTMLElement("figure") }}
    • -
  • {{ HTMLElement("font") }}
    • -
  • {{ HTMLElement("footer") }}
    • -
  • {{ HTMLElement("form") }}
    • -
  • {{ HTMLElement("frame") }}
    • -
  • {{ HTMLElement("frameset") }}
    • -
-G H - -
    -
  • {{ HTMLElement("h1") }}
    • -
  • {{ HTMLElement("h2") }}
    • -
  • {{ HTMLElement("h3") }}
    • -
  • {{ HTMLElement("h4") }}
    • -
  • {{ HTMLElement("h5") }}
    • -
  • {{ HTMLElement("h6") }}
    • -
  • {{ HTMLElement("head") }}
    • -
  • {{ HTMLElement("header") }}
    • -
  • {{ HTMLElement("hgroup") }}
    • -
  • {{ HTMLElement("hr") }}
    • -
  • {{ HTMLElement("html") }}
    • -
-I - -
    -
  • {{ HTMLElement("i") }}
    • -
  • {{ HTMLElement("iframe") }}
    • -
  • {{ HTMLElement("img") }}
    • -
  • {{ HTMLElement("input") }}
    • -
  • {{ HTMLElement("ins") }}
    • -
  • {{ HTMLElement("isindex") }}
    • -
-J K - -
    -
  • {{ HTMLElement("kbd") }}
    • -
  • {{ HTMLElement("keygen") }}
    • -
-L - -
    -
  • {{ HTMLElement("label") }}
    • -
  • {{ HTMLElement("legend") }}
    • -
  • {{ HTMLElement("li") }}
    • -
  • {{ HTMLElement("link") }}
    • -
  • {{ HTMLElement("listing") }}
    • -
-M - -
    -
  • {{HTMLElement("main")}}
    • -
  • {{ HTMLElement("map") }}
    • -
  • {{ HTMLElement("mark") }}
    • -
  • {{ HTMLElement("marquee") }}
    • -
  • {{ HTMLElement("menu") }}
    • -
  • {{ HTMLElement("menuitem") }}
    • -
  • {{ HTMLElement("meta") }}
    • -
  • {{ HTMLElement("meter") }}
    • -
-N - -
    -
  • {{ HTMLElement("nav") }}
    • -
  • {{ HTMLElement("nobr") }}
    • -
  • {{ HTMLElement("noframes") }}
    • -
  • {{ HTMLElement("noscript") }}
    • -
-O - -
    -
  • {{ HTMLElement("object") }}
    • -
  • {{ HTMLElement("ol") }}
    • -
  • {{ HTMLElement("optgroup") }}
    • -
  • {{ HTMLElement("option") }}
    • -
  • {{ HTMLElement("output") }}
    • -
-P - -
    -
  • {{ HTMLElement("p") }}
    • -
  • {{ HTMLElement("param") }}
    • -
  • {{ HTMLElement("plaintext") }}
    • -
  • {{ HTMLElement("pre") }}
    • -
  • {{ HTMLElement("progress") }}
    • -
-Q - -
    -
  • {{ HTMLElement("q") }}
    • -
-R - -
    -
  • {{ HTMLElement("rp") }}
    • -
  • {{ HTMLElement("rt") }}
    • -
  • {{ HTMLElement("ruby") }}
    • -
-S - -
    -
  • {{ HTMLElement("s") }}
    • -
  • {{ HTMLElement("samp") }}
    • -
  • {{ HTMLElement("script") }}
    • -
  • {{ HTMLElement("section") }}
    • -
  • {{ HTMLElement("select") }}
    • -
  • {{ HTMLElement("small") }}
    • -
  • {{ HTMLElement("source") }}
    • -
  • {{ HTMLElement("spacer") }}
    • -
  • {{ HTMLElement("span") }}
    • -
  • {{ HTMLElement("strike") }}
    • -
  • {{ HTMLElement("strong") }}
    • -
  • {{ HTMLElement("style") }}
    • -
  • {{ HTMLElement("sub") }}
    • -
  • {{ HTMLElement("summary") }}
    • -
  • {{ HTMLElement("sup") }}
    • -
-T - -
    -
  • {{ HTMLElement("table") }}
    • -
  • {{ HTMLElement("tbody") }}
    • -
  • {{ HTMLElement("td") }}
    • -
  • {{ HTMLElement("template")}}
    • -
  • {{ HTMLElement("textarea") }}
    • -
  • {{ HTMLElement("tfoot") }}
    • -
  • {{ HTMLElement("th") }}
    • -
  • {{ HTMLElement("thead") }}
    • -
  • {{ HTMLElement("time") }}
    • -
  • {{ HTMLElement("title") }}
    • -
  • {{ HTMLElement("tr") }}
    • -
  • {{ HTMLElement("track") }}
    • -
  • {{ HTMLElement("tt") }}
    • -
-U - -
    -
  • {{ HTMLElement("u") }}
    • -
  • {{ HTMLElement("ul") }}
    • -
-V - -
    -
  • {{ HTMLElement("var") }}
    • -
  • {{ HTMLElement("video") }}
    • -
-W - -
    -
  • {{ HTMLElement("wbr") }}
    • -
-X Y Z - -
    -
  • {{ HTMLElement("xmp") }}
    • -
-
- -

 

diff --git a/files/ar/html/element/span/index.html b/files/ar/html/element/span/index.html deleted file mode 100644 index 79a265b804..0000000000 --- a/files/ar/html/element/span/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: -slug: HTML/Element/span -translation_of: Web/HTML/Element/span ---- -

و HTML <span>العنصر هو حاوية مضمنة عامة لمحتوى الصيغة، التي لا تمثل في حد ذاتها أي شيء. يمكن استخدامه لتجميع العناصر لأغراض التصميم (باستخدام classأو idالسمات) ، أو لأنها تتشارك في قيم السمات ، مثل lang. يجب استخدامه فقط عندما يكون أي عنصر دلالي آخر مناسبًا. <span>تشبه إلى حد كبير على <div>عنصر، ولكن <div>هو عنصر على مستوى الكتلة في حين أن <span>هو عنصر المضمنة .

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - -
فئات المحتوى
- 		محتوى التدفق ، محتوى الصياغة .
المحتوى المسموح به - - - - - - -
محتوى الصياغة
-
إغفال العلامةالآباء المسموح بهم
أي عنصر يقبل محتوى الصياغة ، أو أي عنصر يقبل محتوى التدفق .
يسمح أدوار ARIAأي
واجهة DOMHTMLSpanElement(قبل HTML 5 ، كانت الواجهة HTMLElement)
- -

السمات

- -

هذا العنصر يشمل فقط السمات العالمية .

- -

المثال 1

- -
<p><span>Some text</span></p>
- -

نتيجة

- -

بعض النصوص

- -

 

- -

المثال 2

- -
<li><span>
-    <a href="portfolio.html" target="_blank">See my portfolio</a>
-</span></li>
-
- -

CSS:

- -
-

li span {
- background: gold;
- }

-
- -

مواصفات

- - - - - - - - - - - - - - - - - - - - - - - - - - -
تخصيصالحالةتعليق
{{SpecName('HTML WHATWG', 'semantics.html#the-span-element', '<span>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}}{{Spec2('HTML5 W3C')}}واجهة DOM هي الآن {{domxref("HTMLSpanElement")}}.
{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}{{Spec2('HTML4.01')}} 
- -

توافق التصفح

- - - -

{{Compat("html.elements.span")}}

- -

انظر أيضا

- -
    -
  • HTML {{HTMLElement("div")}} عنصر 
    • -
- -
{{HTMLRef}}
diff --git a/files/ar/html/element/tt/index.html b/files/ar/html/element/tt/index.html deleted file mode 100644 index 30cfcc09f9..0000000000 --- a/files/ar/html/element/tt/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: ': The Teletype Text element (obsolete)' -slug: HTML/Element/tt -translation_of: Web/HTML/Element/tt ---- -
{{ obsolete_header() }}
- -

وعفا عليها الزمن HTML المبرقة الكاتبة عنصر نص ( <tt>) بإنشاء النص المضمن الذي يقدم باستخدام وكيل المستخدم وجه الافتراضي أحادي المسافة الخط. تم إنشاء هذا العنصر لغرض تقديم نص كما سيتم عرضه على شاشة عرض ثابت مثل نمط teletype أو نص فقط أو طابعة خط

- -

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

- -

هذا العنصر عفا عليه الزمن ، ومع ذلك. يجب عليك استخدام أكثر مفيدة لغويا <code>، <kbd>، <var>، أو<samp>عناصر النص المضمن الذي يحتاج إلى أن تقدم في نوع أحادي المسافة، أو <pre>شعارا لالمحتوى الذي ينبغي أن تقدم ككتلة منفصل.

- -
إذا لم يكن أي من العناصر الدلالية مناسبًا لحالة الاستخدام الخاصة بك (على سبيل المثال ، إذا كنت تحتاج ببساطة إلى عرض بعض المحتوى بخط غير تناسبي) ، فيجب أن تفكر في استخدام <span>العنصر ، وأن تصممه كما تريد باستخدام CSS. و font-familyالخاصية هي مكان جيد للبدء
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
فئات المحتوى - - - - - - -
محتوى التدفق ، ومحتوى الصياغة ، ومحتوى واضح
-
المحتوى المسموح بهمحتوى الصياغة .
إغفال العلامةلا شيء ، كل من علامة البداية والنهاية إلزامية.
الآباء المسموح بهمي عنصر يقبل محتوى الصياغة
يسمح أدوار ARIAأي
- - - - - - -
واجهة DOM
- 		HTMLElement
- -

السمات

- -

هذا العنصر يشمل فقط السمات العالمية

- -

أمثلة

- -

المثال الأساسي

- -

يستخدم هذا المثال <tt>لإظهار النص الذي تم إدخاله والإخراج بواسطة تطبيق طرفي.

- -
<p>Enter the following at the telnet command prompt: <code>set localecho</code><br />
-
-The telnet client should display: <tt>Local Echo is on</tt></p>
-
- -

نتيجة

- -

{{EmbedLiveSample("Basic_example", 650, 80)}}

- -

تجاوز الخط الافتراضي

- -

يمكنك تجاوز الخط الافتراضي للمتصفح - إذا كان المتصفح يسمح لك بذلك ، وهو أمر غير مطلوب - باستخدام CSS:

- -

CSS

- -
tt {
-  font-family: "Lucida Console", "Menlo", "Monaco", "Courier",
-               monospace;
-}
- -

HTML

- -
<p>Enter the following at the telnet command prompt: <code>set localecho</code><br />
-
-The telnet client should display: <tt>Local Echo is on</tt></p>
- -

نتيجة

- -

{{EmbedLiveSample("Overriding_the_default_font", 650, 80)}}

- -

ملاحظات الاستخدام

- -

 

- -

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

- -

 

- -
-

 

- -

التغييرات التي تمت تهيئتها بواسطة المستخدم على إعداد خط أحادي المسافة الافتراضي قد تكون لها الأسبقية على CSS الخاص بك.

- -

 

-
- -

على الرغم من أن هذا العنصر لم يتم إهماله رسميًا في HTML 4.01 ، إلا أنه تم تثبيط استخدامه بسبب العناصر الدلالية و / أو CSS. و <tt>العنصر عفا عليه الزمن في HTML 5.

- -

مواصفات

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'obsolete.html#tt', '<tt>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'obsolete.html#elementdef-tt', '<tt>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<tt>')}}{{Spec2('HTML4.01')}} 
- -

التوافق المتصفح

- - - -

{{Compat("html.elements.tt")}}

- -

انظر أيضا

- -
    -
  • The semantic {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("kbd")}}, and {{HTMLElement("samp")}} elements
    • -
  • The {{HTMLElement("pre")}} element for displaying preformatted text blocks
    • -
- -
{{ HTMLRef }}
diff --git a/files/ar/learn/common_questions/how_does_the_internet_work/index.html b/files/ar/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..2a3cd7e46f --- /dev/null +++ b/files/ar/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,116 @@ +--- +title: كيف يعمل الإنترنت؟ +slug: Learn/Common_questions/كيفية_عمل +tags: + - الإنترنت + - درس + - دليل + - مبتدأ +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
+
{{LearnSidebar}}
+
+ +
+

يتحدث هذا المقال عن اﻹنترنت وكيفية عملها.

+
+ + + + + + + + + + + + +
+

لا يوجد، لكن حبذا لو تقرأ المقال الآتي أولا: كيف أبدأ بتصميم موقعي.

+ 		+

متطلبات:

+
+

سوف تتعلم الأساسيات التقنية للبنية التحتية للويب والفرق بين الشابكة (الإنترنت) والويب.

+ 		+

الهدف:

+
+ +

+ +

ملخص

+ +

الشابكة (الإنترنت) هي عماد الويب. والبنية التحتية التي جعلته ممكنا. وفي الأساس الإنترنت هي شبكة واسعة من الحواسيب التي تتواصل فيما بينها.

+ +

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

+ +

التعلم الفعال

+ + + +

نظرة أعمق

+ +

شبكة بسيطة

+ +

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

+ +
+

 فيما تبقى من المقال سنتحدث فقط عن الكابلات الفيزيائية، لكن الشبكات اللاسلكية تعمل بنفس المبدأ.

+
+ +

Two computers linked together

+ +

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

+ +

Ten computers all together

+ +

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

+ +

عند إضافة روتر إلى الشبكة من عشرة حواسيب، كل ما نحتاجه هو عشرة كابلات مع مقبس في كل حاسوب وروتر بعشرة مقابس.

+ +

Ten computers with a router

+ +

شبكة من الشبكات

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

Two routers linked together

+ +
    +
  • عن طريق توصيل أجهزة الكمبيوتر بأجهزة التوجيه (router)، ثم أجهزة التوجيه إلى أجهزة التوجيه، نحن قادرون على التوسع إلى ما لا نهاية.
    • +
+ +

Routers linked to routers

+ +

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 modem. This modem turns the information from our network into information manageable by the telephone infrastructure and vice versa.

+ +

A router linked to a modem

+ +

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 routers 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.

+ +

Full Internet stack

+ +

Finding computers

+ +

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 Internet Protocol). It's an address made of a series of four numbers separated by dots, for example: 192.168.2.10.

+ +

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 domain name. For example, google.com is the domain name used on top of the IP address 173.194.121.32. So using the domain name is the easiest way for us to reach a computer over the Internet.

+ +

Show how a domain name can alias an IP address

+ +

Internet and the web

+ +

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 Web servers) can send messages intelligible to web browsers. The Internet is an infrastructure, whereas the Web 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")}}.

+ +

Next steps

+ + diff --git "a/files/ar/learn/common_questions/\331\203\331\212\331\201\331\212\330\251_\330\271\331\205\331\204/index.html" "b/files/ar/learn/common_questions/\331\203\331\212\331\201\331\212\330\251_\330\271\331\205\331\204/index.html" deleted file mode 100644 index 2a3cd7e46f..0000000000 --- "a/files/ar/learn/common_questions/\331\203\331\212\331\201\331\212\330\251_\330\271\331\205\331\204/index.html" +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: كيف يعمل الإنترنت؟ -slug: Learn/Common_questions/كيفية_عمل -tags: - - الإنترنت - - درس - - دليل - - مبتدأ -translation_of: Learn/Common_questions/How_does_the_Internet_work ---- -
-
{{LearnSidebar}}
-
- -
-

يتحدث هذا المقال عن اﻹنترنت وكيفية عملها.

-
- - - - - - - - - - - - -
-

لا يوجد، لكن حبذا لو تقرأ المقال الآتي أولا: كيف أبدأ بتصميم موقعي.

- 		-

متطلبات:

-
-

سوف تتعلم الأساسيات التقنية للبنية التحتية للويب والفرق بين الشابكة (الإنترنت) والويب.

- 		-

الهدف:

-
- -

- -

ملخص

- -

الشابكة (الإنترنت) هي عماد الويب. والبنية التحتية التي جعلته ممكنا. وفي الأساس الإنترنت هي شبكة واسعة من الحواسيب التي تتواصل فيما بينها.

- -

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

- -

التعلم الفعال

- - - -

نظرة أعمق

- -

شبكة بسيطة

- -

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

- -
-

 فيما تبقى من المقال سنتحدث فقط عن الكابلات الفيزيائية، لكن الشبكات اللاسلكية تعمل بنفس المبدأ.

-
- -

Two computers linked together

- -

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

- -

Ten computers all together

- -

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

- -

عند إضافة روتر إلى الشبكة من عشرة حواسيب، كل ما نحتاجه هو عشرة كابلات مع مقبس في كل حاسوب وروتر بعشرة مقابس.

- -

Ten computers with a router

- -

شبكة من الشبكات

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

Two routers linked together

- -
    -
  • عن طريق توصيل أجهزة الكمبيوتر بأجهزة التوجيه (router)، ثم أجهزة التوجيه إلى أجهزة التوجيه، نحن قادرون على التوسع إلى ما لا نهاية.
    • -
- -

Routers linked to routers

- -

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 modem. This modem turns the information from our network into information manageable by the telephone infrastructure and vice versa.

- -

A router linked to a modem

- -

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 routers 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.

- -

Full Internet stack

- -

Finding computers

- -

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 Internet Protocol). It's an address made of a series of four numbers separated by dots, for example: 192.168.2.10.

- -

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 domain name. For example, google.com is the domain name used on top of the IP address 173.194.121.32. So using the domain name is the easiest way for us to reach a computer over the Internet.

- -

Show how a domain name can alias an IP address

- -

Internet and the web

- -

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 Web servers) can send messages intelligible to web browsers. The Internet is an infrastructure, whereas the Web 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")}}.

- -

Next steps

- - diff --git a/files/ar/learn/css/first_steps/how_css_is_structured/index.html b/files/ar/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..f65331a2bd --- /dev/null +++ b/files/ar/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,178 @@ +--- +title: Readable CSS +slug: Web/Guide/CSS/Getting_started/Readable_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}This is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.

+ +

معلومة: CSS مقروء (قابل للقراءة = سهل القراءة)

+ +

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

+ +

المساحة الفارغة

+ +

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

+ +

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

+ +

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

+ +

التخطيط دائما ما يكون شَخْصِـيًّا، ولكن إذا كان ملف النمط بين مجموعة من الأفراد بصفته جزءً من مشاريع مشتركة، من المحتمل أن تلك المشاريع تحمل اتفاقيات خاصة بها يتم الأعتماد عليها والعمل بها.

+ +

 

+ +
+
Examples
+ +

بعض الأشخاص يفضلون دمج الخصائص مع بعضها، فقط يقومون بتقسيم الخط عندما يصبح طويلا جدا:

+ +

.carrot {color: orange; text-decoration: underline; font-style: italic;}

+ +


+ بعض الناس يفضلون خاصية واحدة لكل سطر:

+ +
.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+ +

بعض الأشخاص يستخدمون مسافتين أو أربع أو علامة التبويب الشائعة:

+ +
.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+ +


+ (بعض الأشخاص يفضلون جعل كل شيء عموديا  (ولكن تخطيط مثل هذا من الصعب الحفاظ عليه.

+ +
.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+ +

بعض الأشخاص يستخدمون مزيج من المسافات الفارغة أو البيضاء لتعزيز سهولة القراءة.

+ +
.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+
+
+ +

بعض الأشخاص يستخدمون علامة التبويب والبعض الآخر يستخدم فقط المسافات البيضاء.

+ +

التعليقات
+  

+ +

التعليقات في ملف النمط تبدأ بـ «*/» وتنتهي بـ«/*».
+
+ يمكنك استخدام التعليقات في ملف النمط الخاص بك لكتابة تعليقات وتعليمات، وأيضا لكتابة تعليمات مؤقتة قد يكون الغرض منها هو اختبار العملية.
+
+ التعليق في جزء من النمط، ضع هذا الجزء في تعليق بحيث يتجاهله المتصفح عند قراءة الملف، وكن حذرا في بداية ونهاية التعليق. بقية الأنماط والخصائص يجب أن يكون لها البنية الصحيحة.

+ +
+
Example
+ +
/* style for initial letter C in first paragraph */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+ +

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

+ +

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

+ +
+
Example
+ +

This rule makes {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, and {{ HTMLElement("h3") }} elements the same color.

+ +

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

+ +
/* color for headings */
+h1, h2, h3 {color: navy;}
+
+
+ +

العمل: إضافة تعليقات و تحسين التخطيط

+ +
    +
  1. قم بتعديل ملف النمط الخاص بك، وقم بالتأكد أن لديها هذه القواعد في ذلك (في أي أمر): + 
    strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+
    +
    2. +
  2. جعلها أكثر قابلية للقراءة من خلال إعادة ترتيبها بطريقة منطقية، وذلك من خلال إضافة مساحات بيضاء أو فارغة وأيضا تعليقات مناسبة.
    3. +
  3. قم بحفظ التعديلات واذهب إلى المتصفح لتشاهد الصفحة للتَّـأكد أنه لا يوجد أي تأثير على ملف النمط من خلال عمله. + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    4. +
+ +
+
تحدي
+ +
 
+ +

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

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

(هناك العديد من الطرق لفعل ذلك)

+ +
+
Possible solution
+ +

One way to do this is to put comment delimiters around the rule for .carrot:

+ +
/*.carrot {
+  color: orange;
+}*/
+ +

Hide solution

+
+ +

See a solution for the challenge.

+
+ +

ما التالي؟

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to specify the appearance of text in your document.

diff --git a/files/ar/learn/css/styling_text/styling_lists/index.html b/files/ar/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..2b7fdeb726 --- /dev/null +++ b/files/ar/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,384 @@ +--- +title: القوائم +slug: Web/Guide/CSS/Getting_started/القوائم +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +

{{ CSSTutorialTOC() }}

+ +

 الصفحة السابقة هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") أما هذا الجزء فهو العاشِر في سلسلة  تعليم لغة CSS على هذا الموقع  CSS Getting Started، وهو يصف كيف يُمكن استخدام لغة الـCSS لتحديد مظهر القائمة. ستقوم بإنشاء مثال مستند يحتوي على قائمة بالـHTML  وملف تنسيق بلغة الـCSS والذي من خلاله سوف نقوم بتنسيق القائمة التي قمنا بإنشَائها. 

+ +

معلومات عن القوائم 

+ +

لو نظرت إلى الجزء السابق، سوف يتضح لك  كيف يمكن إضافة محتـوًى قبل أي عنصر بحيث يظهر وكأنّه عنصرٌ في قائمة.

+ +

تقدم لغة الـCSS بعض الخواص المُصَمَّـمَـة للقائمة، والتي يجب استخدامها دائما مع القوائم.

+ +

لتحديد نمط القائمة، عليك استخدام هذه الخاصية «list-style» وذلك لتحديد نوع  العلامة الموجودة قبل كل عنصر في القائمة. 

+ +
+

من الممكن أن يتم اختيار القائمة ككل بهذا الوسم «ul» أو اختيار عنصر بداخل القائمة من خلال هذا الوسم «li».  

+ +

وعند اختيار القائمة ككل فإنَّ هذا الوسم يسمى الأب للقائمة وهو«ul»، ويورث الخواص التى تٌطبق عليه لكُـلِّ عنصر في القائمة. 

+
+ +

القوائم غير المرتبة

+ +

 في القوائم غير المُرَتَّـبة، يكون كل عنصر من القائمة معَلَّــمًا بنفس الطريقة. 

+ +

 يوجد ثلاثة أنواع من العلامات، وأدناه هي كيفية عرض المتصفح لهذه العلامات:

+ +

• disc  قرص 

+ +

○ circle دائرة

+ +

◘ square مربع

+ +

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

+ +
+

مثال 

+ +

 هذه القواعد تُـوَضِّح علامات مختلفة لأصناف (classes) مختلفة من عناصر القائمة:

+ +
li.open {
+    list-style: circle;
+}
+li.closed {
+    list-style: disc;
+}
+
+ +

عندما يتم استعمال هذه الأصناف (classes) في قائمة، تقوم بالتمييز بين العناصر المفتوحة والمغلقة (مثلًا في قائمة مهامّ).

+ +
<ul>
+  <li class="open">Lorem ipsum</li>
+  <li class="closed">Dolor sit</li>
+  <li class="closed">Amet consectetuer</li>
+  <li class="open">Magna aliquam</li>
+  <li class="closed">Autem veleum</li>
+</ul>
+
+ +

وهكذا تبدو النتيجة: 

+ +
  ○ Lorem ipsum
+ +
  •  Dolor sit
+ +
  •  Amet consectetuer
+ +
  ○ Magna aliquam
+ +
  • Autem veleum
+ +
 
+
+ +

القوائم المُـرَتَّـبة 

+ +

في القوائم المُرتّبة، يكون لكل عنصر علامة مختلفة تُميّز موضعه في القائمة.

+ +

استخدم الخاصية «list-style» لتعيين نمط القائمة، لتحديد نوع العلامة التي تظهر قبل كل عنصرفي القائمة.

+ +
    +
  • decimal (تعداد بأرقام عشرية)
    • +
  • lower-roman (تعداد بحروف رومانية صغيرة)
    • +
  • upper-roman (تعداد بحروف رومانية كبيرة)
    • +
  • lower-latin (تعداد بحروف لاتيتنية صغيرة)
    • +
  • upper-latin (تعداد بحروف لاتينية كبيرة)
    • +
+ +
+
 
+ +

مثال                                                                                                                                              

+ +
القاعدة التّالية تجعل العناصر في القائمة المرتّبة <ol> والتي تٌميز بصنف .«info» مُرتبة بحروف لاتينية كبيرة.  
+ +
 
+ +
<ol class="info">
+  <li>Lorem ipsum</li>
+  <li>Dolor sit</li>
+  <li>Amet consectetuer</li>
+  <li>Magna aliquam</li>
+  <li>Autem veleum</li>
+</ol>
+ +
ol.info {
+    list-style: upper-latin;
+}
+
+ +
+

عند تطبيق خاصية النمط على الـ «ol»  يُوَرِّثُ هذه الخاصية إلى الأبناء وهم عناصر القائمة المرتبة وهي العناصر المسبوقة بوسم «li».

+
+ +

فتكون النتيجة كالتالي:

+ +
ِA. Lorem ipsum
+ +
B. Dolor sit
+ +
C. Amet consectetuer
+ +
D. Magna aliquam
+ +
E. Autem veleum
+
+ +
+
+

تفاصيل أكثر                                                                             

+ +
الخاصية «list-style» هي خاصية مختصرة أي أنه من الممكن استخدامها إذا أردت أن يكون نمط القائمة سواء كان 
+ +
 (صورة أو رقم أو شكل أو حرف )
+ +
       ولكن يمكن أن تستخدم خواص منفردة لكل شكل على حدة وليكن للصورة لها  خاصية محددة مثل «list-style-image»    
+ +

يمكنك مراجعة هذه الخاصية وما بها من تفاصيل من خلال هذه الصفحة  list style 

+ +
إن كنت تستخدم لغة HTML فإنها تُـوفر وسوما مُختلفة، فعلى سبيل المثال  للقوائم المرتبة يُستخدم هذا الوسم «ol»
+ +
والقوائم  الغير مرتبة «ul»
+ +
  فيفضّل استخدام هذه القوائم بحسب دلالتها ولكن من الممكن إذا أردت أن تجعل القوائم المرتبة كغير المرتبة شكلا 
+ +
والعكس، فذلك يتم من خلال الـCSS أيضا يتم كل هذا باستخدام الخواص المختلفة لتحصل على ما تريد من نتائج 
+ +
ولكن يُفَضَّـل أن تُسْتَخدم كل قائمة حسب وضعها والاستخدام الخاص بها. 
+ +
 
+ +

قد تختلف المتصفّحات في طرق عرضها لتنسيق القوائم، لا يُمكن أن تحصُل على نفس النتيجة في كل المتصفحات. 

+
+
+ +

العَـدَّادَات

+ +
+

ملاحظة هامّة:

+ +
  بعض المتصفحات لا تدعم العدّادات، تقدّم هذه الصّفحة CSS contents and browser comptability على موقع QuirksMode معلومات تفصيلية عن دعم  المتصفحات لهذه الميزة وميزات أخرى.
+ +
كما توفّر الصّفحات الفرديّة في CSS مرجعا للمعلومات عن دعم  المتصفحات أيضا لهذه الخاصية وغيرها.
+
+ +

 

+ +
يُمكن استخدام العدّادات لعدّ أيّة عناصر، وليس فقط عناصر القوائم، فمثلًا يمكن عدّ العناوين والفقرات في المستند.
+ +
تحتاج إلى إنشاء عدّاد counter باسم خاص بك لتستخدمه فى العّد.
+ +
 
+ +
 يمكن تهيئة العدّاد قبل البدء بالعدّ باستخدام الخاصية «counter-reset» واسم العدادَ الخاص بك الذي أنشأته. 
+ +
وعليك أن تعلم أن الأب للعنصر الذي تقوم بِعده هو المكان الأنسب لتهيئة العّداد، ولكن يمكن استخدام أي عنصر يأتي قبل العناصر المطلوب عدّها.
+ +
 
+ +
 في كلّ عنصر ترغب بعدّه، استخدم الخاصية «counter-increment» مع اسم العّداد الذي تٌريده.
+ +
 استخدم «befor» ،«:after:» لعرض العدّاد، مع استخدام هذه الخاصية «content» مع العنصر المٌحدد المُراد عّده (سيتم شرح ذلك لاحقاَ).
+ +
يمكنك معرفة معلومات أكثر عن هذه الخاصية في هذه الصفحة Content. 
+ +
 
+ +

استخدام ()counter مع اسم العّداد كقيمة لـcontent   

+ +
ويمكن كذلك استخدام نوع للعلامة فى العد. الأنواع المُتاحة هي التي تم عرضها في فقرة القوائم المرتّبة.
+ +

عادةً يزيد العنصر الّذي يعرض العدّاد من قيمته. 

+ +
+
          مثال                                                                                                                                            
+ +
 
+ +
    هذه القاعدة تُنشئ عدّادًا لكلّ عنصر<h3> له تصنيف (كلاس) «numbered»:                                          
+ +
h3.numbered {
+    counter-reset: mynum;
+}
+
+ +

 أما هذه القاعدة فهى تعرض عّداد الـ <p>  والتي لها تصنيف «numbered»

+ +
<p class="numbered">Lorem ipsum</p>
+<p class="numbered">Dolor sit</p>
+<p class="numbered">Amet consectetuer</p>
+<p class="numbered">Magna aliquam</p>
+<p class="numbered">Autem veleum</p>
+
+ +
body {
+   counter-reset: mynum;
+}
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+ +

والنتيجة ستبدُو هكذا:

+ +
1: Lorem ipsum
+ +
2: Dolor sit
+ +
3: Amet consectetuer
+ +
4: Magna aliquam
+ +
5:  Autem veleum
+ +
 
+
+ +
+
تفاصِيل أكثر                                                                                                                                 
+ +
 
+ +
   لا تستطيع استخدام العَدادات إلا إذا تيقنت من أنَ كل شخص يستخدم العدادات يستعمل  متصفحاً يُدعمها.  
+ +
  العًدادات بها مِيزات ويمكن تنسيقها منفصلة عن عنصر القَائمة المرافِقة لها كما في المثال السابق 
+ +
ترى أن العًدادات لها تنسيق خاص فهي بِخط عريض غير عناصر القّائمة.  
+ +
 
+ +
يمكن أيضًا استخدام العدّادات بطرق أكثر تعقيدًا؛ مثلًا: لعدّ الفقرات والعناوين والعناوين الفرعيّة والفقرات في المستندات الرسمية.
+ +
 ولتفاصِيل أكثر عليك الرجوع إلى هذِه الصفحة  Automatic counters and numbering.
+
+ +

تمرين: قوائم مُنسقة

+ +

   قم بإنشاء ملف  HTML  باسم doc2.html، انسخ والصق هذا المحتوى إلى الملف الخاص بك:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Sample document 2</title>
+    <link rel="stylesheet" href="style2.css">
+  </head>
+  <body>
+
+    <h3 id="oceans">The oceans</h3>
+    <ul>
+      <li>Arctic</li>
+      <li>Atlantic</li>
+      <li>Pacific</li>
+      <li>Indian</li>
+      <li>Southern</li>
+    </ul>
+
+    <h3 class="numbered">Numbered paragraphs</h3>
+    <p class="numbered">Lorem ipsum</p>
+    <p class="numbered">Dolor sit</p>
+    <p class="numbered">Amet consectetuer</p>
+    <p class="numbered">Magna aliquam</p>
+    <p class="numbered">Autem veleum</p>
+
+  </body>
+</html>
+
+ +

  قم بإنشاء ملف CSS وقُم بتسميته  style2.css، انسخ والصق هذه الشيفرة البرمجية إلى صفحتك:

+ +
/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+ +

قم بتغيير أسلوب  التعليقات كما تحبّ إن لم يعجبك هذا.

+ +

افتح الملف على المٌتصفح الخاص بِك. إذا كان متصفحط يَدعم العّدادات سوف ترى النتيجة كما هي موضحة أدناه، وإن لم يكُن يُدعمها فلن ترى إلاَّ الأرقام والنُقتطان قبل القائمة التي هي بعنوان «Numbered paragraphs» :

+ +

The oceans

+ +
Arctic
+ +
Atlantic
+ +
Pacific
+ +
Indian
+ +
Southern
+ +

Numbered paragraphs

+ +
1:Lorem ipsum
+ +
2:Dolor sit
+ +
3:Amet consectetuer
+ +
4:Magna aliquam
+ +
5:Autem veleum
+ +
+
 تمرين إضافي                                                                                                                                          
+ +
 أضِف قاعدة لملف التنسيق الخاص بك بحيث تجعل النمط قبل عناصِر القائِمة بحروف رومانية من i إلى v، بحيث تحصل على هذه النتيجة: 
+ +
 
+ + + + + + + +
+

The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

وقم بتغييرها مرة أُخرى إلى حروف لاتينية كبيرة قبل عناصرالقائمة، وستكون النتيجة هكذا: 

+ + + + + + + +
+

(A) The oceans

+ +

. . .

+ +

(B) Numbered paragraphs

+ +

. . .

+
+
+ +

See solutions to these challenges.

+ +

ما هو القادم ؟

+ +

الصفحة القادمو هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")

+ +

عندما يعرض المتصفّح مستند الخاص بك، فإِنه يُنشئ مساحات حول العناصر عندما يضعها في مواضعها في الصّفحة. الصفّحة القادِمة تصف كيف يُمكن استخدام لغة الـCSS لتَّعامل مع  هذه الأشكال من خلال الـboxes.

diff --git a/files/ar/learn/forms/index.html b/files/ar/learn/forms/index.html new file mode 100644 index 0000000000..3c8f449476 --- /dev/null +++ b/files/ar/learn/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 +--- +
{{LearnSidebar}}
+ +

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

+ +

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

+ +

قبل البدء في هذه الوحدة ، يجب أن تعمل على الأقل من خلال مقدمة إلى HTML. في هذه المرحلة ، يجب أن تجد {{anch ("Basic Guides")}} سهل الفهم ، كما يمكنك الاستفادة من دليل أدوات النماذج الأصلية.

+ +

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

+ +
+

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

+
+ +

أدلة أساسية

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

ما هو شكل الحاجيات المتاحة؟

+ + + +
حاجيات النموذج الأصلي
+ +
نحن الآن نلقي نظرة على وظائف أدوات النماذج المختلفة بالتفصيل ، وننظر في الخيارات المتاحة لجمع أنواع مختلفة من البيانات.
+ +

التحقق من صحة بيانات النموذج وإرسالها

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

أدلة متقدمة

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

أدلة تصميم النموذج

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

إقرأ أيضا

+ + diff --git a/files/ar/learn/getting_started_with_the_web/css_basics/index.html b/files/ar/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..70be221b32 --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/css_basics/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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

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

+
+ +

إذاً ماهي CSS عملياً؟

+ +

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

+ +
p {
+  color: red;
+}
+ +

دعنا ننسخ الثلاث سطور السابقة ونضعها في ملف جديد وبعدها نقوم بحفظ الملف باسم style.css داخل المجلد styles.

+ +

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

+ +
    +
  1. افتح الملف index.html والصق السطر أدناه في وسم head: + + 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. احفظ الملف وقم بفتح الصفحة في متصفحك. يجب أن ترى شيئاً من هذا القبيل:
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.

+ +

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

+ +

تشريح أمر السي إس إس

+ +

دعنا نأخذ نظرة مفصلة حول الثلاث سطور السابقة:

+ +

+ +

تدعى الثلاث سطور السابقة بمجموعة الأمر (rule set). لاحظ أيضاً أسماء كل جزئ من مجموعة الأوامر تلك:

+ +
+
المحدد (المنتقي)
+
هو اسم عنصر الأتش تي أم إل ويوضع في بداية مجموعة الأوامر. يقوم بتحديد العنصر/العناصر التي يراد تنسيقها (في حالتنا العناصر ذات الوسم p). لتقوم بتنسيق عنصر أخر ما عليك سوى تغيير المحدد.
+
الإعلان
+
هو أمر مفرد مثل color: red والذي يحدد الخاصية التي تريد استخدامها لتنسيق العنصر.
+
الخاصية
+
هي الطريقة التي تريد تنسيق العنصر فيها. (في حالتنا الخاصية color هي خاصية للعنصر {{htmlelement("p")}}). في السي إس إس أنت تقوم باختيار الخواص التي تريدها أن تأثر على عنصرك.
+
قيمة الخاصية
+
توضع على يمين اسم الخاصية بعد النقطتين، والتي تحدد واحدة من  العديد من الخيارات المتاحة (يوجد العديد من القيم الأخرى إلى جانب القيمة red للخاصية color).
+
+ +

انتبه للأجزاء المهمة الأخرى من البنية الكتابية لمجموعة الأمر:

+ +
    +
  • كل مجموعة أمر (بغض النظر عن المحدد) يجب أن تحاط بأقواس معقوفة ({}).
    • +
  • بداخل كل إعلان يجيب عليك استخدام نقطتين (:) للفصل بين الخاصية وقيمتها.
    • +
  • بداخل كل مجموعة أمر يجب عليك استخدام فاصلة منقوطة (;) للفصل بين كل إعلان والإعلان الذي يليه.
    • +
+ +

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

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

اختيار عدة عناصر

+ +

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

+ +
p,li,h1 {
+  color: red;
+}
+ +

أنواع مختلفة من المحدد

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
اسم المحددماذا يحددمثال
محدد العناصر (يسمى أحيانا بمحدد النوع أو الوسم)جميع العناصر التي من نفس النوعp
+ تحدد العناصر ذات الوسم <p>
محدد الهويةالعنصر الموجود في الصفحة والذي يملك تلك الهوية (في صفحة الأتش تي أم إل يُسمح لك بإعطاء هوية واحدة مميزة لكل عنصر)#my-id
+ تحدد العناصر ذات الهوية <p id="my-id"> أو <a id="my-id">
محدد الصنفالعنصر/العناصر الموجودة على الصفحة والتي تملك ذلك الصنف (يمكن استخدام الصنف نفسه على عدة عناصر).my-class
+ Selects <p class="my-class"> and <a class="my-class">
محدد السمةالعناصر في الصفحة والتي تملك السمة المحددةimg[src]
+ تحدد الصور ذات السمة <img src="myimage.png"> ولكن لا تحدد عنصر الصورة بدون السمة المذكورة <img>
محدد فئة الشبهعنصر/عناصر محدد ولكن عندما يكون بحالة معينة، مثال عندما يتم التحويم فوقه +

a:hover
+ تحدد العناصر <a>

+ +

ولكن فقط عندما يتم تحويم مؤشر الفأرة فوق الرابط

+
+ +

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

+ +

الخطوط والنصوص

+ +

والآن بعد أن تعرفنا على بعض أساسيات السي إس إس، دعنا نبدأ بإضافة بعد الأوامر والمعلومات لملف style.css لنجعل مثالنا يبدو أجمل. دعنا نبدأ بجعل الخطوط والنصوص التي نستخدمها تبدو أفضل.

+ +
    +
  1. بدايةً، قم بالحصول على مسار الخط الذي جلبته من موقع خطوط جوجل. أضف العنصر {{htmlelement("link")}} في الوسم <head>. كالتالي: + + 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    +
    2. +
  2. بعدها، قم بحذف التعليمة السابقة التي كتبناها في ملف style.css. لقد كانت تجربة جيدة، ولكن اللون الأحمر ليس ملائماً بما فيه الكفاية.
    3. +
  3. ضع السطور التالية في الملف، استبدل سطر placeholder بسطر عائلة الخط font-family التي حصلت عليها من موقع خطوط جوجل Google Fonts. (تعني font-family بالخطوط التي تريد استخدامها في النص.) تقوم هذه التعليمة بتعيين خط أساسي شامل و قياس للخط من أجل كامل الصفحة (طالما أن <html> يمثل العنصر الأب لكامل الصفحة, و جميع العناصر داخله ترث نفس ال font-size و الـ font-family): + 
    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
+}
    + +
    +

    ملاحظة: أي شيء يكتب في ملف الـ CSS بين */ و /* عبارة عن تعليق CSS, حيث أن المتصفح يقوم بتجاهله عندما يعالج التعليمات البرمجية. يمكنك الاستفادة من تعليقات الـ CSS لكتابة ملاحظات مفيدة عمّا تحاول فعله.

    +
    +
    4. +
  4. الآن سنقوم بتعيين قياسات الخطوط للعناصر التي تتضمن نصوص داخل جسد الـ HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, {{htmlelement("p")}}). بالإضافة إلى ذلك سنجعل النص الخاص بعنوان الصفحة في المركز, و سنغير ارتفاع الخط (line height) بالإَافة إلى المسافة بين الحروف (letter spacing) لمحتويات الـ body لجعلها أسهل للقراءة: + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

يمكنك تعديل قيم الـ px هذه إلى أي شيء تحبه لتحصل على التصميم الذي تريده, لكن بشكل عام يجب أن يبدو التصميم كالتالي:

+ +

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

+ +

صناديق الـ CSS

+ +

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

+ +

a big stack of boxes or crates sat on top of one another

+ +

Not surprisingly, CSS layout is based principally on the box model. Each of the blocks taking up space on your page has properties like this:

+ +
    +
  • padding, the space just around the content (e.g., around paragraph text)
    • +
  • border, the solid line that sits just outside the padding
    • +
  • margin, the space around the outside of the element
    • +
+ +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

In this section we also use:

+ +
    +
  • width (of an element)
    • +
  • background-color, the color behind an element's content and padding
    • +
  • color, the color of an element's content (usually text)
    • +
  • text-shadow: sets a drop shadow on the text inside an element
    • +
  • display: sets the display mode of an element (don't worry about this yet)
    • +
+ +

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.

+ +

Changing the page color

+ +
html {
+  background-color: #00539F;
+}
+ +

This rule sets a background color for the whole page. Change the color code above to whatever color you chose when planning your site.

+ +

Sorting the body out

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

Now for the {{htmlelement("body")}} element. There are quite a few declarations here, so let's go through them all one by one:

+ +
    +
  • width: 600px; — this forces the body to always be 600 pixels wide.
    • +
  • margin: 0 auto; — When you set two values on a property like margin or padding, the first value affects the element's top and bottom side (make it 0 in this case), and the second value the left and right side (here, auto 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 here.
    • +
  • background-color: #FF9500; — 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.
    • +
  • padding: 0 20px 20px 20px; — 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.
    • +
  • border: 5px solid black; — this simply sets a 5-pixel–wide, solid black border on all sides of the body.
    • +
+ +

Positioning and styling our main page title

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some default styling 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 margin: 0;.

+ +

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.

+ +

One rather interesting property we've used here is text-shadow, which applies a text shadow to the text content of the element. Its four values are as follows:

+ +
    +
  • The first pixel value sets the horizontal offset of the shadow from the text — how far it moves across: a negative value should move it to the left.
    • +
  • The second pixel value sets the vertical offset of the shadow from the text — how far it moves down, in this example; a negative value should move it up.
    • +
  • The third pixel value sets the blur radius of the shadow — a bigger value will mean a more blurry shadow.
    • +
  • The fourth value sets the base color of the shadow.
    • +
+ +

Again, try experimenting with different values to see what you can come up with!

+ +

Centering the image

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

Finally, we'll center the image to make it look better. We could use the margin: 0 auto trick again as we did earlier for the body, but we also need to do something else. The {{htmlelement("body")}} element is block level, 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 inline elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using display: block;.

+ +
+

Note: Don't worry if you don't yet understand display: block; 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 display reference page.

+
+ +

Conclusion

+ +

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 view our version here):

+ +

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.

+ +

If you get stuck, you can always compare your work with our finished example code on GitHub.

+ +

Here, we have only really scratched the surface of CSS. To find out more, go to our CSS Learning topic.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git "a/files/ar/learn/getting_started_with_the_web/\330\243\330\263\330\247\330\263\331\212\330\247\330\252_\330\265\331\201\330\255\330\247\330\252_\330\247\331\204\330\267\330\261\330\262_\330\247\331\204\331\205\330\252\330\261\330\247\330\265\330\251/index.html" "b/files/ar/learn/getting_started_with_the_web/\330\243\330\263\330\247\330\263\331\212\330\247\330\252_\330\265\331\201\330\255\330\247\330\252_\330\247\331\204\330\267\330\261\330\262_\330\247\331\204\331\205\330\252\330\261\330\247\330\265\330\251/index.html" deleted file mode 100644 index 70be221b32..0000000000 --- "a/files/ar/learn/getting_started_with_the_web/\330\243\330\263\330\247\330\263\331\212\330\247\330\252_\330\265\331\201\330\255\330\247\330\252_\330\247\331\204\330\267\330\261\330\262_\330\247\331\204\331\205\330\252\330\261\330\247\330\265\330\251/index.html" +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: أساسيات الـ CSS -slug: Learn/Getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة -tags: - - CSS - - تصميم - - تعلم - - مبتدأ - - ويب -translation_of: Learn/Getting_started_with_the_web/CSS_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
- -
-

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

-
- -

إذاً ماهي CSS عملياً؟

- -

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

- -
p {
-  color: red;
-}
- -

دعنا ننسخ الثلاث سطور السابقة ونضعها في ملف جديد وبعدها نقوم بحفظ الملف باسم style.css داخل المجلد styles.

- -

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

- -
    -
  1. افتح الملف index.html والصق السطر أدناه في وسم head: - - 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    -
    2. -
  2. احفظ الملف وقم بفتح الصفحة في متصفحك. يجب أن ترى شيئاً من هذا القبيل:
    3. -
- -

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.

- -

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

- -

تشريح أمر السي إس إس

- -

دعنا نأخذ نظرة مفصلة حول الثلاث سطور السابقة:

- -

- -

تدعى الثلاث سطور السابقة بمجموعة الأمر (rule set). لاحظ أيضاً أسماء كل جزئ من مجموعة الأوامر تلك:

- -
-
المحدد (المنتقي)
-
هو اسم عنصر الأتش تي أم إل ويوضع في بداية مجموعة الأوامر. يقوم بتحديد العنصر/العناصر التي يراد تنسيقها (في حالتنا العناصر ذات الوسم p). لتقوم بتنسيق عنصر أخر ما عليك سوى تغيير المحدد.
-
الإعلان
-
هو أمر مفرد مثل color: red والذي يحدد الخاصية التي تريد استخدامها لتنسيق العنصر.
-
الخاصية
-
هي الطريقة التي تريد تنسيق العنصر فيها. (في حالتنا الخاصية color هي خاصية للعنصر {{htmlelement("p")}}). في السي إس إس أنت تقوم باختيار الخواص التي تريدها أن تأثر على عنصرك.
-
قيمة الخاصية
-
توضع على يمين اسم الخاصية بعد النقطتين، والتي تحدد واحدة من  العديد من الخيارات المتاحة (يوجد العديد من القيم الأخرى إلى جانب القيمة red للخاصية color).
-
- -

انتبه للأجزاء المهمة الأخرى من البنية الكتابية لمجموعة الأمر:

- -
    -
  • كل مجموعة أمر (بغض النظر عن المحدد) يجب أن تحاط بأقواس معقوفة ({}).
    • -
  • بداخل كل إعلان يجيب عليك استخدام نقطتين (:) للفصل بين الخاصية وقيمتها.
    • -
  • بداخل كل مجموعة أمر يجب عليك استخدام فاصلة منقوطة (;) للفصل بين كل إعلان والإعلان الذي يليه.
    • -
- -

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

- -
p {
-  color: red;
-  width: 500px;
-  border: 1px solid black;
-}
- -

اختيار عدة عناصر

- -

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

- -
p,li,h1 {
-  color: red;
-}
- -

أنواع مختلفة من المحدد

- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
اسم المحددماذا يحددمثال
محدد العناصر (يسمى أحيانا بمحدد النوع أو الوسم)جميع العناصر التي من نفس النوعp
- تحدد العناصر ذات الوسم <p>
محدد الهويةالعنصر الموجود في الصفحة والذي يملك تلك الهوية (في صفحة الأتش تي أم إل يُسمح لك بإعطاء هوية واحدة مميزة لكل عنصر)#my-id
- تحدد العناصر ذات الهوية <p id="my-id"> أو <a id="my-id">
محدد الصنفالعنصر/العناصر الموجودة على الصفحة والتي تملك ذلك الصنف (يمكن استخدام الصنف نفسه على عدة عناصر).my-class
- Selects <p class="my-class"> and <a class="my-class">
محدد السمةالعناصر في الصفحة والتي تملك السمة المحددةimg[src]
- تحدد الصور ذات السمة <img src="myimage.png"> ولكن لا تحدد عنصر الصورة بدون السمة المذكورة <img>
محدد فئة الشبهعنصر/عناصر محدد ولكن عندما يكون بحالة معينة، مثال عندما يتم التحويم فوقه -

a:hover
- تحدد العناصر <a>

- -

ولكن فقط عندما يتم تحويم مؤشر الفأرة فوق الرابط

-
- -

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

- -

الخطوط والنصوص

- -

والآن بعد أن تعرفنا على بعض أساسيات السي إس إس، دعنا نبدأ بإضافة بعد الأوامر والمعلومات لملف style.css لنجعل مثالنا يبدو أجمل. دعنا نبدأ بجعل الخطوط والنصوص التي نستخدمها تبدو أفضل.

- -
    -
  1. بدايةً، قم بالحصول على مسار الخط الذي جلبته من موقع خطوط جوجل. أضف العنصر {{htmlelement("link")}} في الوسم <head>. كالتالي: - - 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    -
    2. -
  2. بعدها، قم بحذف التعليمة السابقة التي كتبناها في ملف style.css. لقد كانت تجربة جيدة، ولكن اللون الأحمر ليس ملائماً بما فيه الكفاية.
    3. -
  3. ضع السطور التالية في الملف، استبدل سطر placeholder بسطر عائلة الخط font-family التي حصلت عليها من موقع خطوط جوجل Google Fonts. (تعني font-family بالخطوط التي تريد استخدامها في النص.) تقوم هذه التعليمة بتعيين خط أساسي شامل و قياس للخط من أجل كامل الصفحة (طالما أن <html> يمثل العنصر الأب لكامل الصفحة, و جميع العناصر داخله ترث نفس ال font-size و الـ font-family): - 
    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
-}
    - -
    -

    ملاحظة: أي شيء يكتب في ملف الـ CSS بين */ و /* عبارة عن تعليق CSS, حيث أن المتصفح يقوم بتجاهله عندما يعالج التعليمات البرمجية. يمكنك الاستفادة من تعليقات الـ CSS لكتابة ملاحظات مفيدة عمّا تحاول فعله.

    -
    -
    4. -
  4. الآن سنقوم بتعيين قياسات الخطوط للعناصر التي تتضمن نصوص داخل جسد الـ HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, {{htmlelement("p")}}). بالإضافة إلى ذلك سنجعل النص الخاص بعنوان الصفحة في المركز, و سنغير ارتفاع الخط (line height) بالإَافة إلى المسافة بين الحروف (letter spacing) لمحتويات الـ body لجعلها أسهل للقراءة: - 
    h1 {
-  font-size: 60px;
-  text-align: center;
-}
-
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
    -
    5. -
- -

يمكنك تعديل قيم الـ px هذه إلى أي شيء تحبه لتحصل على التصميم الذي تريده, لكن بشكل عام يجب أن يبدو التصميم كالتالي:

- -

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

- -

صناديق الـ CSS

- -

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

- -

a big stack of boxes or crates sat on top of one another

- -

Not surprisingly, CSS layout is based principally on the box model. Each of the blocks taking up space on your page has properties like this:

- -
    -
  • padding, the space just around the content (e.g., around paragraph text)
    • -
  • border, the solid line that sits just outside the padding
    • -
  • margin, the space around the outside of the element
    • -
- -

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

- -

In this section we also use:

- -
    -
  • width (of an element)
    • -
  • background-color, the color behind an element's content and padding
    • -
  • color, the color of an element's content (usually text)
    • -
  • text-shadow: sets a drop shadow on the text inside an element
    • -
  • display: sets the display mode of an element (don't worry about this yet)
    • -
- -

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.

- -

Changing the page color

- -
html {
-  background-color: #00539F;
-}
- -

This rule sets a background color for the whole page. Change the color code above to whatever color you chose when planning your site.

- -

Sorting the body out

- -
body {
-  width: 600px;
-  margin: 0 auto;
-  background-color: #FF9500;
-  padding: 0 20px 20px 20px;
-  border: 5px solid black;
-}
- -

Now for the {{htmlelement("body")}} element. There are quite a few declarations here, so let's go through them all one by one:

- -
    -
  • width: 600px; — this forces the body to always be 600 pixels wide.
    • -
  • margin: 0 auto; — When you set two values on a property like margin or padding, the first value affects the element's top and bottom side (make it 0 in this case), and the second value the left and right side (here, auto 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 here.
    • -
  • background-color: #FF9500; — 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.
    • -
  • padding: 0 20px 20px 20px; — 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.
    • -
  • border: 5px solid black; — this simply sets a 5-pixel–wide, solid black border on all sides of the body.
    • -
- -

Positioning and styling our main page title

- -
h1 {
-  margin: 0;
-  padding: 20px 0;
-  color: #00539F;
-  text-shadow: 3px 3px 1px black;
-}
- -

You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some default styling 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 margin: 0;.

- -

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.

- -

One rather interesting property we've used here is text-shadow, which applies a text shadow to the text content of the element. Its four values are as follows:

- -
    -
  • The first pixel value sets the horizontal offset of the shadow from the text — how far it moves across: a negative value should move it to the left.
    • -
  • The second pixel value sets the vertical offset of the shadow from the text — how far it moves down, in this example; a negative value should move it up.
    • -
  • The third pixel value sets the blur radius of the shadow — a bigger value will mean a more blurry shadow.
    • -
  • The fourth value sets the base color of the shadow.
    • -
- -

Again, try experimenting with different values to see what you can come up with!

- -

Centering the image

- -
img {
-  display: block;
-  margin: 0 auto;
-}
- -

Finally, we'll center the image to make it look better. We could use the margin: 0 auto trick again as we did earlier for the body, but we also need to do something else. The {{htmlelement("body")}} element is block level, 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 inline elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using display: block;.

- -
-

Note: Don't worry if you don't yet understand display: block; 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 display reference page.

-
- -

Conclusion

- -

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 view our version here):

- -

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.

- -

If you get stuck, you can always compare your work with our finished example code on GitHub.

- -

Here, we have only really scratched the surface of CSS. To find out more, go to our CSS Learning topic.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/ar/learn/how_to_contribute/index.html b/files/ar/learn/how_to_contribute/index.html deleted file mode 100644 index e53fb8f34f..0000000000 --- a/files/ar/learn/how_to_contribute/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: كيف تساهم في قسم التعلم في الشبكة -slug: Learn/How_to_contribute -tags: - - توثيق - - دليل - - ساهم - - مبتدئين -translation_of: Learn/How_to_contribute ---- -
{{LearnSidebar}}
- -

إن كنت هنا لأوَّل مرَّة أو بعد بحثٍ طويل، فمن المُرجَح أنَّ هذا يرجع لكونك مُهتماً في المساهمة في قسم شبكة مطوري موزيلا للتعلم. إنَّ هذا لنبؤٌ سعيد!

- -

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

- -
-

ملاحظة: يمكنك إيجاد دليل إرشادي حول كتابة مقالة جديدة في قسم التعلم في مقالة "كيفيّة كتابة مقالة لمساعدة الناس على التعلُّم حول الويب".

-
- -

جِد مهمة محددة

- -

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

- -

المساهمة هي طريقة رائعة لاكتساب المتعة في حين تعلم أشياء جديدة. إن شعرت يوماً بالضياع أو كان لديك سؤالاً ما، فلا تتردد أبداً بالتواصل معنا على موضوع قسم التعلُّم في منصة ديسكورس، أو على قناة IRC (اطّلع على نهاية هذه الصفحة للمزيد من التفاصيل). كريس ميلز (Chris Mills) هو مدير المواضيع لهذا القسم، يمكنك أيضاً محاولة التواصل معه مباشرةً.

- -

توفِر الأقسام التاليّة بعض الأفكار العامة حول أنواع المهام التي يمكنك القيام بها.

- -

أنا مُبتدِئ

- -

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

- -

إليك بعض الاقتراحات حول الطرق التي يمكنك المساهمة فيها:

- -
-
إضافات الوسوم إلى المقالات (تستغرق العمليّة قرابة الخمس دقائق)
-
وسِم (tagging) محتوى الشبكة هو أحد أسهل الطرق التي يمكنك المساهمة فيها. في حين أنَّ العديد من المزايا لدينا تستخدم الوسوم (tags) لتساعدها في تقديم المعلومات بسياقها الصحيح، فيُعَد الوسِم مساهمة قيّمة جداً. ألقي نظرة على قائمة المصطلحات في المسرد والمقالات التعليميّة التي لا تحتوي على وسوم لتبدأ بالمساهمة.
-
قراءة ومراجعة المصطلحات في المسرد (تستغرق العمليّة قرابة الخمس دقائق)
-
كمبتدئ، نحتاج إلى أعين يقظة لمراجعة محتوانا. إذا وجدت مصطلحاً صعب الفهم، فهذا يعني أنَّ المسرد بحاجة ليُحسَن. لا تتردد بإجراء أي تغييرات تظنها ضروريّة. إذا كنت تظن أنَّك لا تملك المهارة الكافيّة لتعديل مصطلح بنفسك، يمكنك على الأقل إعلامنا بذلك على قائمتنا البريديّة.
-
كتابة مصطلح جديد في المسرد (تستغرق العمليّة قرابة العشرين دقيقة)
-
هذه أكثر الطرق فعاليّة لتتعلم شيئاً جديداً. اختر مفهوماً جديداً تريد فهمه، أقرأ عنه، واكتب شرحاً له في المسرد. الشرح للآخرين هي إحدى الطرق الرائعة "لتثبيت" المعرفة في ذهنك، وتساعدك على فهم الأشياء بنفسك، كل هذا في حين أنَّك تساعد الآخرين أيضاً. الجميع رابِح!
-
قراءة ومراجعة المقالات التعليميّة (تستغرق العمليّة قرابة الساعتين)
-
تشبه هذه المهمة كثيراً مراجعة المصطلحات في المسرد (انظر أعلاه). ولكن هذه المهمة تحتاج لوقتٍ أطول؛ بسبب أنَّ هذه المقالات عادةً ما تكون أطول قليلاً.
-
- -

أنا مُطوِّر

- -

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

- -
-
قراءة ومراجعة المصطلحات في المسرد (تستغرق العمليّة قرابة الخمس دقائق)
-
كمطوِّر، نحتاج لتتأكد أنَّ محتوانا دقيق تقنياً بدون أن يكون مُتحذلق بشكل مبالغ. لا تتردد عن إجراء أي تغييرات تظن أنَّها ضروريّة. إذا أردت مناقشة المحتوى قبل إجراء أيّة تغييرات، تواصل معنا على قائمتنا البريديّة أو على قناة IRC.
-
كتابة مصطلح جديد في المسرد (تستغرق العمليّة قرابة العشرين دقيقة)
-
توضيح المصطلحات التقنيّة هي طريقة جيدة جداً للتعلم ولتصبح دقيق تقنياً وبسيطاً في شرحك. سيشكرك المبتدئون على ذلك. لدينا العديد من المصطلحات الغير معرفة والتي تحتاج لاهتمامك. اختر واحداً وابدأ بشرحه.
-
قراءة ومراجعة المقالات التعليميّة (تستغرق العمليّة قرابة الساعتين)
-
هذه المهمة مماثلة لمراجعة المصطلحات في المسرد (انظر أعلاه). الفرق هو أنَّ هذه المقالات أطول قليلاً مما سيتطلب وقتاً أطول.
-
كتابة مقالة تعليميّة جديدة (تستغرق العمليّة قرابة الأربع ساعات أو أكثر)
-
تفتقر شبكة مطوري موزيلا إلى المقالات البسيطة حول استخدام تقنيات الويب (مثل لغة ترميز النص الفائق، صفحات الأنماط الانسيابية، الجافاسكربت ...إلخ). لدينا في الشبكة محتوى قديم يتطلب إعادة المراجعة والنشر. ادفع بمهاراتك إلى أقصى حد لتجعل تقنيات الويب قابلة للاستخدام من قبل المبتدئين.
-
إنشاء تمرينات، عينات برمجيّة، أو أدوات تعليم تفاعليّة (تستغرق العمليّة وقتاً غير محدد)
-
تحتاج جميع مقالاتنا التعليميّة إلى ما ندعوه بمواد "التعليم النشطة"، ﻷنَّ الناس يتعلمون الشيء بشكل أفضل عندما يقومون به بأنفسهم. هذه المواد هي تمرينات أو محتويات تفاعليّة تساعد المُستخدمين على تطبيق والتلاعب بالمفاهيم المشروحة في المقالة. يوجد العديد من الطرق الممكنة لصنع محتوى تفاعلي، من إنشاء عينات برمجيّة باستخدام JSFiddle أو أشباهه، إلى بناء محتوى تفاعلي مُتكامل بواسطة Thimble. أطلق العنان لإبداعك!
-
- -

أنا مُدرِس

- -

تملك شبكة مطوري موزيلا تاريخ طويل من النجاح التقني، ولكننا نفتقر للفهم العميق حول الطرق الفُضلى لتعليم المفاهيم للجدد. هنا حيث نحتاج إليك بصفتك مُدرِس. يمكنك مساعدتنا على الحرص على أنَّ موادنا التعليميّة توفِر مسار تعليمي جيد وعملي لقرائِنا.

- -
-
قراءة ومراجعة المصطلحات في المسرد (تستغرق العمليّة قرابة الخمس عشرة دقيقة)
-
تَفَقَد المصطلحات في المسرد ولا تتردد عن إجراء أيّة تغييرات تراها ضروريّة. إذا أردت مناقشة المحتوى قبل تعديله، تواصل معنا على قائمتنا البريديّة أو على قناة IRC.
-
كتابة مصطلح جديد في المسرد (تستغرق العمليّة قرابة الساعة)
-
تعريفات المصطلحات البسيطة والواضحة، واللمحات البسيطة عن المفاهيم في المسرد هو قطعاً ما يلبي احتياجات المبتدئِين. يمكن أن تساعد خبرتك كمُدرِس على إنشاء تعريفات ممتازة للمصطلحات. لدينا العديد من المصطلحات الغير معرفة والتي تحتاج لاهتمامك. اختر واحداً وابدأ بشرحه.
-
إضافة رسوم توضيحيّة ومخططات للمقالات (تستغرق العمليّة قرابة الساعة)
-
كما تعلم، الرسوم التوضيحيّة (illustrations) هي جزء لا يقدر بثمن في أي محتوى تعليمي. تلك هي إحدى الأمور التي نفتقدها في الشبكة ومهاراتك يمكن أن تُحدِث فرقاً. تفقد المقالات التي تحوي نقصاً في المحتوى التوضيحي واختر مقالة ترغَب بإنشاء رسماً توضيحياً يشرحها.
-
قراءة ومراجعة المقالات التعليميّة (تستغرق العمليّة قرابة الساعتين)
-
هذه المهمة مشابهة لمراجعة المصطلحات في المسرد (انظر أعلاه)، ولكنها تتطلب وقتاً أطول لكون المقالات بالعادة أطول قليلاً.
-
كتابة مقالات تعليميّة جديدة (تستغرق العمليّة قرابة الأربع ساعات)
-
نحتاج إلى مقالات بسيطة وواضحة حول النظام الشابكي (Web ecosystem) والمواضيع الأخرى المتعلقة به. في حين أنَّ المقالات التعليميّة من الضروري أن تكون تدريسيّة بدلاً من أن تقوم بتغطيّة كل شيء حرفياً، فخبرتك بمعرفة الأشياء التي يجب شرحها وكيفيّة القيام بذلك ستكون مساعدة رائعة!
-
إنشاء تمرينات، اختبارات، أو أدوات تعليم تفاعليّة (يستغرق الأمر وقتاً غير محدد)
-
تحتاج جميع مقالاتنا التعليميّة إلى مواد "التعليم النشط". هذه المواد هي تمرينات أو محتويات تفاعليّة تساعد المُستخدمين على تعلم استخدام والتوسع في المفاهيم المشروحة في المقالة. يوجد العديد من الأمور التي يمكنك القيام بها هنا، من إنشاء اختبارات (quizzes)، إلى بناء محتوى تفاعلي مُتكامل بواسطة Thimble. أطلق العنان لإبداعك!
-
إنشاء مسارات تعليميّة (تستغرق العمليّة وقتاً غير محدد)
-
بغرض توفير دورات شاملة وتدريجيّة، نحتاج إلى تهيئة محتوانا في مسارات. هذه طريقة لجمع المحتوى الحالي وإيجاد المفقود لإنشاء مقالات تعليميّة عنه.
-
diff --git a/files/ar/learn/html/forms/index.html b/files/ar/learn/html/forms/index.html deleted file mode 100644 index 3c8f449476..0000000000 --- a/files/ar/learn/html/forms/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: نماذج HTML -slug: Learn/HTML/Forms -tags: - - Beginner - - Featured - - Forms - - Guide - - HTML - - Landing - - Learn - - NeedsTranslation - - TopicStub - - Web -translation_of: Learn/Forms ---- -
{{LearnSidebar}}
- -

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

- -

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

- -

قبل البدء في هذه الوحدة ، يجب أن تعمل على الأقل من خلال مقدمة إلى HTML. في هذه المرحلة ، يجب أن تجد {{anch ("Basic Guides")}} سهل الفهم ، كما يمكنك الاستفادة من دليل أدوات النماذج الأصلية.

- -

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

- -
-

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

-
- -

أدلة أساسية

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

ما هو شكل الحاجيات المتاحة؟

- - - -
حاجيات النموذج الأصلي
- -
نحن الآن نلقي نظرة على وظائف أدوات النماذج المختلفة بالتفصيل ، وننظر في الخيارات المتاحة لجمع أنواع مختلفة من البيانات.
- -

التحقق من صحة بيانات النموذج وإرسالها

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

أدلة متقدمة

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

أدلة تصميم النموذج

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

إقرأ أيضا

- - diff --git a/files/ar/learn/html/tables/index.html b/files/ar/learn/html/tables/index.html new file mode 100644 index 0000000000..380e837a80 --- /dev/null +++ b/files/ar/learn/html/tables/index.html @@ -0,0 +1,36 @@ +--- +title: جداول HTML +slug: Learn/HTML/الجداول +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

خطوط إرشاد

+ +

تحتوي هذه الوحدة على المقالات التالية:

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

تقييم

+ +
+
هيكلة بيانات الكوكب
+
في تقييم الجدول الخاص بنا ، نوفر لك بعض البيانات حول الكواكب في نظامنا الشمسي ، ونجعلك تنظّمها في جدول HTML.
+
+ +
diff --git "a/files/ar/learn/html/\330\247\331\204\330\254\330\257\330\247\331\210\331\204/index.html" "b/files/ar/learn/html/\330\247\331\204\330\254\330\257\330\247\331\210\331\204/index.html" deleted file mode 100644 index 380e837a80..0000000000 --- "a/files/ar/learn/html/\330\247\331\204\330\254\330\257\330\247\331\210\331\204/index.html" +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: جداول HTML -slug: Learn/HTML/الجداول -translation_of: Learn/HTML/Tables ---- -
{{LearnSidebar}}
- -

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

- -

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

- -

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

- -
-

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

-
- -

خطوط إرشاد

- -

تحتوي هذه الوحدة على المقالات التالية:

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

تقييم

- -
-
هيكلة بيانات الكوكب
-
في تقييم الجدول الخاص بنا ، نوفر لك بعض البيانات حول الكواكب في نظامنا الشمسي ، ونجعلك تنظّمها في جدول HTML.
-
- -
diff --git "a/files/ar/learn/html/\330\250\330\263\331\212\330\267\330\251_html_\330\245\331\206\330\264\330\247\330\241_\330\265\331\201\330\255\330\251/index.html" "b/files/ar/learn/html/\330\250\330\263\331\212\330\267\330\251_html_\330\245\331\206\330\264\330\247\330\241_\330\265\331\201\330\255\330\251/index.html" deleted file mode 100644 index a6cdfdf6cf..0000000000 --- "a/files/ar/learn/html/\330\250\330\263\331\212\330\267\330\251_html_\330\245\331\206\330\264\330\247\330\241_\330\265\331\201\330\255\330\251/index.html" +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: إنشاء صفحة HTML بسيطة -slug: Learn/HTML/بسيطة_HTML_إنشاء_صفحة -tags: - - البداية -translation_of: Learn/Getting_started_with_the_web -translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML ---- -
-

فى هذا المقال سوف تتعلم كيق تنشئ صفحة ويب بسيطة باستخدام {{Glossary("HTML")}}

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

الملخص

- -

أن أبسط صفحة ويب هى فقط ملف {{Glossary("HTML")}} . فقط ملف HTML صحيح واحد موجود على حاسبك و متصفح ويب هى كل ما تحتاجه. سوف نرى كبف كيف يمكن استخدام HTML {{Glossary("Tag","tags")}} و سوف تكون فادر على عرض الصفحة التى أنشأتها فى متصفحك.

- -

التعلم النشط

- -

أول شئ؛ تأكد أنه يوجد لديك محرر نصوص تجيد استخدامه و متصفح ويب. على الأغلب أى محرر نصوص سوف يكون كافى؛ على سبيل المثال Notepad فى Windows أو TextEdit فى Mac ؛ ولكن تأكد أنك ستنشئ ملفات نصوص بسيطة (حروف فقط بدون تنسيق). إذا كنت تستخدم TextEdit فى Mac يمكنك اختيار "Make Plain Text" من قائمة "Format".

- -

الخطوة الأولى: ملف

- -

صفحة الويب الواحدة تتكون (على الأقل) من ملف HTML ؛ لذلك سنبدأ بإنشاء واحد. قم بفتح محرر النصوص و قم بإنشاء ملف نصى ؛ ثم اكتب شئ مثل هذا:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Hi there</title>
-</head>
-<body>
-  This is a page
-  a simple page
-</body>
-</html>
- -

يمكنك تعديل هذا كما تشاء؛ أنت حر فى أن تضيف أو تغير النص بين وسمى <title></title> و <body></body>. تأكد أن تعطى الملف اسم ينتهى بالإضافة ".html" . على سبيل المثال يمكنك تسميتها "my_page.html".

- -

الآن لديك ملف على حاسبك ؛ من الممكن أن يكون شكله يشبه هذا (هذا يتوقف على نظام التشغيل الذى تستخدمه) :

- -

Screenshot of a file explorer with a html file for local test

- -

إذا قمت فقط بالضغط مرتين على هذا الملف سوف يُفتح فى متصفحك. إذا أردت فتحه فى محرر النصوص لتعديله قم بالضغط عليه بزر الفأرة الأيمن و اختر فتح الملف فى محرر النصوص. (أو قم بسحبه و إفلاته فى المحرر؛ أو قم بفتح الملف باختيار "open" من قائمة "File" فى المحرر.) ,حسب محررك الملف سوف يبدو مثل هذا:

- -

Screenshot of a file explorer with a html file for local test

- -

الخطوة الثانية: متصفح ويب

- -

داخل متصفح الملفات الخاص بك(مثل Explorer فى Windows؛ أو Finder فى Mac أو Files فى Ubuntu)، اعثر على الملف الذى أنشأته و قم بفتحه فى متصفحك (بالضغط عليه مرتين؛ أو سحبه و إفلاته على أيقونة المتصفح) الآن المتصفح يعرض النص من ملف HTML الذى أنشأته والتبويب يعرض عنوان الصفحة. هذا يجب أن يشبه هذا؛ حسب نظام تشغيلك و متصفحك:

- -

Screenshot of a file explorer with a html file for local test

- -

يمكنك أن ترى محتوى جسم الصفحة (بين وسمى <body></body>)؛ و العنوان الذى اخترته (بين وسمى <title></title>) يظهر فى التبويب ولكن لا يوجد فاصل بين سطرى النص. شئ مثير للاهتمام.

- -

الخطوة الثالثة: التجربة والتعلم

- -

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

- -

 

- -

لشيء الذي يجب أن تلاحظه هو أن الشيء الوحيد الذي تراه معروضًا على الشاشة هو النص الذي ليس داخل أقواس الزاوية (والمعروف باسم الرموز الأكبر من وأقل من الرموز ، ولكننا نسميها أقواس معقوفة عند الحديث عن HTML). كل شيء داخل الأقواس الزاوية هو {{Glossary ("tag")}} ، والذي يمثل البنية أو الهيكل العظمي لصفحة الويب الخاصة بك. يظهر كل المحتوى المعروض بين العلامات.

- -

تحتوي صفحة HTML الخاصة بنا كمثال على قسمين رئيسيين: رأس ، ومضمون في كتلة {{HTMLElement ("head")}} ، وهيئة ، موجودة داخل {{HTMLElement ("body")}}. يحتوي النص على النص المعروض داخل الصفحة.

- -

لكل علامة معنى محدد ويجب استخدامها وفقًا لذلك ؛ على سبيل المثال ، يتم استخدام {{HTMLElement ("title")}} للإشارة إلى عنوان الصفحة ، والذي قد يختلف عن اسم الملف. لاحظ أيضًا أن العلامات يمكن أن تحدث داخل محتوى علامات أخرى. يتم تضمين {{HTMLElement ("title")}} داخل {@ HTMLElement ("head")}} ، على سبيل المثال.

- -

إذا كنت تريد إضافة شيء ما مثل صورة إلى صفحتك ، فستحتاج إلى إضافة علامة للصورة والصورة نفسها. فمثلا:

- -

 

- -
<!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>
- -

عدّل ملفك ليتضمن علامة {{HTMLElement ("img")}} ، على النحو التالي:

- -
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
- -

 

- -

يمكن أن تذهب إلى أي مكان داخل {{HTMLElement ("body")}}. لا تنس حفظ الصفحة التي تم تغييرها!

- -

ثم ضع ملفًا باسم "unicorn_pic.png" في المجلد نفسه كملف HTML. عند تحديث نافذة المتصفح (أو إعادة فتح ملف HTML في متصفحك) ، يجب أن تشاهد المحتوى الذي تم تغييره ، مع استكمال يونيكورن! (لا تنس حفظ صفحتك).

- -

 

- -

Original file for the unicorn image

- -
-

ملاحظة: يمكنك الحصول على نسخة من صورة يونيكورن لاستخدامها في تجاربك عن طريق النقر بزر الماوس الأيمن فوق الصورة واختيار خيار "حفظ الصورة باسم ..." من القائمة التي تظهر.

-
- -

The files needed for this page to work now look something like this in your desktop:

- -

Screenshot of the explorer with 2 files : a html file and a picture file

- -

تبدو الملفات المطلوبة لهذه الصفحة الآن تبدو كشيء من هذا القبيل في سطح المكتب الخاص بك:

- -

Screenshot for the example with a picture

- -

 

- -

ربما لاحظت أن علامة {{HTMLElement ("img")}} تحتوي على {{Glossary ("attribute"، "attributes")}} التي توفر معلومات إضافية مطلوبة لبناء الكائن المطلوب ، وفي هذه الحالة ، اسم الملف الصورة التي سيتم عرضها والنص البديل الذي سيتم عرضه عندما يتعذر تحميل الصورة.

- -

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

- -

 

- -

الغوص أعمق
- هذه ليست صفحة ويب جميلة جدا
- كما قد تكون لاحظت ، هذه الصفحة ليست معجزة بالتصميم والجمال. وذلك لأن HTML تدور حول المحتوى وما يعنيه المحتوى (من حيث السياق والعلاقات بين كتل المحتوى) ، بدلاً من التصميم.

- -

يمكّنك {{Glossary ("CSS")}} من جعل المحتوى يتألق ، وذلك بإضافة التخطيط واللون والخطوط وما إلى ذلك. إن HTML الخالص جيد بما يكفي لصنع صفحات ويب بسيطة ، لكن الصفحات الأكثر تعقيدًا (أو حتى الصفحات البسيطة ذات التصميمات الجذابة) تحتاج عادة إلى CSS وربما {{Glossary ("JavaScript")}}. ينشئ HTML المحتوى وأنماط CSS للمحتوى وجافا سكريبت يجعل المحتوى ديناميكيًا.

- -

دعونا نجرب قليلا مع CSS بجعل النص الأساسي للصفحة باللون الأزرق:
- alghaws 'aemaq
-  

- -

 

- -
<!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>
- -

 

- -

لاحظ إضافة عنصر {{HTMLElement ("style")}} إلى الصفحة {{HTMLElement ("head")}}. هذا يحدد CSS لتطبيقه على النص الأساسي.

- -

تريد أن يتم تسطير النص؟ حاول إضافة "زخرفة النص: تسطير ؛" حكم على أسلوبك:

- -

 

- -
body {
-  color: blue;
-  text-decoration: underline;
-}
- -

تريد أن يكون النص بحجم محدد؟ جرب إضافة "font-size: 42px؛" مثله:

- -
body {
-  color: blue;
-  text-decoration: underline;
-  font-size: 42px;
-}
- -

والنهاية ستكون هكذا:

- -
<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>
- -

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

- -

Screenshot of the browser with the page with some CSS

- -

ينمو إلى صفحتين
- عندما تتصفح الويب ، غالبًا ما تصادفك {{Glossary ("hyperlink" ، "links")}} ، وهي الطريقة الأكثر فائدة للانتقال من صفحة إلى أخرى. نظرًا لأن HTML عبارة عن محتوى وتعتبر الروابط نوعًا من المحتوى ، يمكنك إنشاء روابط بين الصفحات باستخدام HTML فقط.

- -

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

- -

في الملف الأول يمكنك الاحتفاظ بنفس البنية العامة كما كان من قبل. المهم هو إضافة علامة جديدة ، {{HTMLElement ("a")}} ، على النحو التالي:

- -

 

- -
<!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>
- -

يجب أن ترتبط الصفحة الثانية بالصفحة الأولى:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Page 2 :)</title>
-</head>
-<body>
-  This is a page 2.
-  <a href="page1.html" title="to page 1">Want to go back to page 1? Click here</a>
-</body>
-</html>
- -
-

ملاحظة: تأكد من تطابق أسماء الملفات المحددة في سمة href للعلامة {{HTMLElement ("a")} مع أسماء الملفات التي أنشأتها على جهاز الكمبيوتر.

-
- -

 

- -

يمكنك الآن التنقل بين اثنين من مستندات HTML. افتح الصفحة 1 في المستعرض الخاص بك وانقر فوق الارتباط لفتح الصفحة 2 ، والعكس. يمكنك أيضًا اختبار الزر "السابق" في متصفحك. ستعيدك إلى الصفحة الأخيرة التي كنت تبحث عنها.

- -

يجب أن يكون لمدير الملفات ملفي HTML في نفس المجلد ، على النحو التالي:

- -

Screenshot of the file explorer with two HTML documents in one directory/folder

- -

الصفحة الاولي تشبه هذه:

- -

Screenshot of a file explorer with a html file for local test

- -

والصفحة الثانية تشبهه هذه بعد الضغط علي link:

- -

Screenshot of the 2nd page of the 2 pages example in the browser

- -
-

- -

- -

- -

113/5000

- -

ملاحظة: يعتبر الارتباط مرة أخرى إلى الصفحة رقم 1 هو البنفسجي لأن المتصفح "يعلم" بأننا سبق أن زرنا الصفحة الأولى.

- -

 

-
- -

 

- -

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

- -

الربط بموقع آخر
- في هذا التمرين ، سنقوم بإضافة ارتباط إلى ملف 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">Want to go know more about unicorns? Wikipedia is right here</a>
-</body>
-</html>
- -

يجب أن يبدو هذا أكثر أو أقل مثل هذا في المتصفح:

- -

Screenshot of the example page with a link to Wikipedia in the browser

- -

قم بتحريك مؤشر الماوس فوق الرابط ؛ سترى السمة {{htmlattrxref ("title")}} المعروضة في تلميح أداة تحويم. يمكن استخدام هذا لتوفير مزيد من المعلومات حول الارتباط ، بحيث يمكن للمستخدم اتخاذ قرار مستنير حول ما إذا كان سيتم النقر عليه أم لا.

- -
-

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

-
- -

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

diff --git a/files/ar/mdn/at_ten/index.html b/files/ar/mdn/at_ten/index.html new file mode 100644 index 0000000000..1df4f8a024 --- /dev/null +++ b/files/ar/mdn/at_ten/index.html @@ -0,0 +1,37 @@ +--- +title: MDN at 10 +slug: MDN_at_ten +translation_of: MDN_at_ten +--- + + +
+
+

The history of MDN

+ +

In early 2005, a small team of idealists set out to create a new, free, community-built online resource for all Web developers. Their brilliant but offbeat idea grew into today’s Mozilla Developer Network—the premier resource for all open Web technologies. Ten years later, our global community is bigger than ever, and together we’re still creating documentation, sample code and learning resources for all open Web technologies, including CSS, HTML, JavaScript and everything else that makes the open Web as powerful as it is.

+ +

Learn more about the history

+ + +

Contributing to MDN

+ +

For ten years, the MDN community has been documenting the open Web. From fixing simple typos to writing entire suites of an entirely new API, everyone has something to offer and no contribution is too large or too small. We have over 90,000 pages of content that have been written or translated by members of our outstanding community of Mozillians. You can become one of them.

+ +

Learn more about contributing

+ +

 

+ +

 

+
+ +
{{TenthCampaignQuote}}
+ + + +
    +
  1. MDN at 10
    2. +
  2. The history of MDN
    3. +
  3. Contributing to MDN
    4. +
+
diff --git a/files/ar/mdn/community/index.html b/files/ar/mdn/community/index.html deleted file mode 100644 index 5870ddd218..0000000000 --- a/files/ar/mdn/community/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: انضم إلى مجتمع شبكة مطوري موزيلا -slug: MDN/Community -tags: - - حول الشبكة -translation_of: MDN/Community ---- -
{{MDNSidebar}}
{{IncludeSubNav("/ar/docs/MDN")}}
- -
-

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

-
- -

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

- -
    -
  1.  أنشئ حساب في شبكة مطوري موزيلا.
    2. -
  2. انضم إلى المحادثات.
    3. -
  3. تابع ما يحدث.
    4. -
- -

كيف يعمل المجتمع

- -

يوجد أدناه مقالات أكثر تصف مجتمع شبكة مطوري موزيلا.

- -
-
-
-
رُتب المجتمع
-
يوجد عدد من الرُتب في مجتمع شبكة مطوري موزيلا والتي تملك صلاحيات ومسؤوليات معينة.
-
سباقات التوثيق
-
تعد هذه المقالة دليل لتنظيم سباق توثيق. فهي تحتوي على نصائح من أناس قاموا بتنظيم سباقات توثيق، ليساعدوك على تنظيم واحد أيضاً.
-
تابع ما يحدث
-
يعمل مجتمع شبكة مطوري موزيلا على تقديم هذه الموسوعة لك. يوجد في هذه المقالة بعض الطرق لتبادل المعلومات حول ما نقوم به.  
-
-
- -
-
-
محادثات مجتمع شبكة مطورين موزيلا
-
تُقام علمية التوثيق على موقع شبكة مطوري موزيلا أما المجتمع فيعمل من خلال مناقشات ومحادثات ولقاءات على الإنترنت.
-
العمل في المجتمع
-
الجزء الرئيسي من المساهمة في وثائق شبكة مطوري موزيلا هو معرفة كيفية العمل كجزء من المجتمع. تقدم هذه المقالة نصائح لتساعدك على تحقيق أقصى استفادة من تفاعلك مع كل من الكتاب الآخرين وفرق التطوير.
-
-
-
diff --git a/files/ar/mdn/community/whats_happening/index.html b/files/ar/mdn/community/whats_happening/index.html deleted file mode 100644 index 818472e420..0000000000 --- a/files/ar/mdn/community/whats_happening/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: اتبع ما يحدث -slug: MDN/Community/Whats_happening -translation_of: MDN/Community/Whats_happening ---- -
{{MDNSidebar}}
- -

MDN is brought to you by the MDN community. Here are some ways to that we share information about what we're doing.

- -

المدونات

- -
-
Mozilla Hacks
-
-

أخبار حول وتغطية متعمقة لتقنيات وميزات الويب و Mozilla.

-
-
إشراك المطورين
-
تعزيز النشاط والمناقشة بين المجتمع المشترك في MDN في موزيلا.
-
- -

Streams of ephemera

- -
    -
  • @MozDevNet: صفحات مثيرة للاهتمام ، ودروس تعليمية ، وأدلة ، وطلبات التقديم ، وتحديثات هامة ، وغيرها من الأخبار حول شبكة مطور Mozilla.
    • -
  • @MozHacks: تغريدات حول تقنيات الويب الجديدة وتطبيقات HTML5 الرائعة وميزات Firefox.
    • -
  • Mozilla Hacks (YouTube)
    • -
- -

لوحات الحالة ولوحات المعلومات

- -

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

- -

اجتماعات MDN

- -

There are a number of regular meetings for tracking and sharing progress on various MDN-related projects and processes. These are described on the MDN meetings wiki page.

- -

To get a general sense of what's happening, the best meeting to attend is the MDN Community meeting, which occurs every two weeks on Wednesdays, 10:00 US Pacific time (UTC-0800 October-March, UTC-0700 in March-October), in the #mdn IRC channel. See the MDN community meetings wiki page for agendas and notes from past meetings.

- -

The Public MDN Events calendar contains MDN community meetings, doc sprints, and other MDN-related events. If you see a meeting which takes place in the "mdn" channel on our Vidyo videoconferencing system, you can join the conversation on the web.

- -
 
diff --git a/files/ar/mdn/contribute/howto/create_and_edit_pages/index.html b/files/ar/mdn/contribute/howto/create_and_edit_pages/index.html new file mode 100644 index 0000000000..c4ab1b2bcf --- /dev/null +++ b/files/ar/mdn/contribute/howto/create_and_edit_pages/index.html @@ -0,0 +1,179 @@ +--- +title: كيفية إنشاء وتحرير الصفحات +slug: MDN/Contribute/Howto/كيفية_إنشاء_وتحرير_الصفحات +translation_of: MDN/Contribute/Howto/Create_and_edit_pages +--- +
{{MDNSidebar}}
+ +

This article introduces new contributors to the process of editing existing pages and creating new ones.

+ +

Editing an existing page

+ +

To edit a page:

+ +
    +
  1. Click the Edit button near the top right corner of the page.
    2. +
  2. The page then reloads, with an editing interface where you can add or delete information directly.
    3. +
  3. Add paragraphs, delete text, insert headings, and perform more of the basic functions involved in writing and editing.
    4. +
+ +

See the guide to Editor UI elements in the MDN Editor guide for more information on using MDN's built-in editor.

+ +

Preview changes

+ +

To see what your changes look like:

+ +
    +
  • Click the Preview button, within the editing function at the top or bottom of the page.
    • +
  • This opens the preview page, showing your revisions in a new window, or tab.
    • +
  • Each time you click this button, it refreshes your preview page with the latest changes.
    • +
+ +

Be careful! Previewing a page does not save your progress. Don't close the editing tab until you've saved your work.

+ +

Revision comment

+ +

After previewing your changes, you will want to save your revision. Before you save, look for the revision comment box, below the editing box, leaving a comment to inform other contributors why you made changes. For example, you might have added a new section, changed some words to make the terminology more consistent, rewritten a paragraph to clarify the language, or removed information because it was redundant.

+ +

Table of Contents

+ +

The 'In this Article' section of an article, is an auto-generated list of links to the headings on the page. The wording of these can be edited via the headings. It's also possible to remove a table of contents, or decrease its number of links, by selecting 'Edit Page Title and Properties', changing the value of the "TOC" drop down.

+ +

Tags

+ +

You can add or remove tags, which describe the page content and purpose, below the editing section. See How to properly tag pages, for information on which tags to apply.

+ +

Review needed?

+ +

If an expert, or experienced contributor should review your edits, please request a technical review (for code, API's, or technologies), and/or an editorial review (for prose, grammar, and content), making sure the appropriate box is checked before you save.

+ +

Attach files

+ +

If you wish to attach a file to an existing page, or to add an illustration for further clarification, this can be added to the bottom of the page. When uploading an image, please be sure to use an image optimization tool to make the file as small to download as possible. This improves page load time and helps MDN's performance overall. You may use your preferred tool, if you have one. Otherwise, we suggest TinyPNG, a handy Web tool.

+ +

Publish, Discard, or Keep editing

+ +

When you finish editing, and are happy with your preview, publish your work and comments by clicking the green Publish button, to the right of the page title, or towards the bottom of the page. If you wish to continue working, click Publish and keep editing, which publishes your changes and keeps the edit interface open. 

+ +

If you change your mind, you can discard edits, by clicking the red Discard button. Note that discarding changes permanently discards them.

+ +

Pressing Enter in the Revision Comment field is equivalent to clicking Publish and Keep Editing.

+ +
+

Note: If attempting to save, but changes are rejected as invalid, and you feel the content is appropriate for MDN, email the MDN admin team for assistance.

+
+ +

Getting page-creation permissions

+ +

For security reasons, newly-created accounts don't have the ability to create new pages. If you try to do so, you'll see a page instructing you how to get the page created. There are two options:

+ +
    +
  • Ask for the page to be created for you. To do this, file a documentation request bug, with the subject "Create page: <page title>". Fill out the URL field with the location on MDN where you'd like the page to go, if you know where to place it. In the comment text, include information on why this page needs creating.
    • +
  • Request page creation privileges. If you request page creation privileges, and they're granted to you, you'll be able to add new pages by following the instructions here. To request these privileges, email the MDN admin team with your request. Include your username, why you would like to have the ability to create new pages. For instance, you're documenting a new API which involves many new pages, or you'd like to add new terms to the glossary. You should also have made useful contributions to this site's content, and been a contributor for some time. This length of time, and the other factors, are collectively considered.
    • +
+ +

Creating a new page

+ +

Once you have page-creation permission, you can begin creating pages.

+ +

If you do not know where to place a new article, do not worry. Put it anywhere, we will find it, move to where it belongs, or merge it into existing content. Whatever makes the most sense. Do not worry about making it perfect. We have happy helper gnomes who help making your content clean and rather luscious.

+ +

There are a few ways to create a new page:

+ + + +
+
+ + + +

As with most wikis, it is possible to create a link to a page that is yet to exist. For example, an author might create a list of all the members of an API, before creating the pages for those members. On MDN, links to non-existent pages are typically displayed in red.

+ +

To create a page from a 'missing page' link:

+ +
    +
  1. Log into MDN, and have page-creation permission. If not logged in, clicking a 'missing page' link results in a 404 (page not found) error.
    2. +
  2. Click the 'missing page' link. If you have page creation permission, the MDN Editor UI opens, ready for you to create the missing page.
    3. +
  3. Write the content of the page, and save it.
    4. +
+ +

New page without link

+ +

To create a new page without linking from another page, enter a unique page name in the URL field of your browser. For example, if you enter:

+ +
https://developer.mozilla.org/en-US/docs/FooBar
+ +

MDN creates a new page, with the title "FooBar", opening the editor for you to add new content. Refer to the Editing an existing page section of this article, for information on how to use the editor mode.

+ +

To create a new page without linking from another page:

+ +
    +
  1. Log in, and have page-creation permission.
    2. +
  2. Enter the following in the URL field of your browser:
    3. +
+ +
https://developer.mozilla.org/en-US/docs/new
+ +

MDN creates a new page, with a place for a title, opening the editor to add new content to this page. Refer to Editing an existing page, for information on using editor mode.

+ +

Subpage of an existing page

+ +

To create a page you want to be below an existing page, in the page hierarchy:

+ +
    +
  1. On the 'parent' page, click the Advanced menu (the gear icon in the toolbar), then click New sub-page.
    2. +
  2. An editor view opens for creating a new document.
    3. +
  3. Add a title for this document, in the Title field.
    4. +
  4. Change the Slug field, if needed. For example, if the title is long, and a shorter URL seems appropriate. This field is automatically filled by the editor, substituting underscores for spaces found in the title, changing only the last part of the URL.
    5. +
  5. In the TOC field, select heading levels you want to be displayed in the table of contents for the page. Or select 'No table of contents', if one is not needed.
    6. +
  6. Write content of the page in the editor pane, saving your changes. Refer to Editing an existing page, for further information on using editor mode.
    7. +
+ +

Clone of an existing page

+ +

If there is an existing page, whose format you wish to use as a base for your new page, you can 'clone' that page, and then change its content.

+ +
    +
  1. On the original page, click the Advanced menu (the gear icon in the toolbar), and click Clone this page. An editor view opens, for creating a new document.
    2. +
  2. Change the Title of the page, as appropriate for the new content. The Slug field is updated automatically as you change the Title field.
    3. +
  3. Change the path portion of the Slug field, as needed, to put the new document in a different location in the document hierarchy. In most cases, this is not needed. A cloned page often has similar content to its original, and need to be in a similar location.
    4. +
  4. In the TOC field, select the heading levels you want to be automatically displayed in the table of contents for this page. Or select 'No table of contents', if one is not needed.
    5. +
  5. Write your content in the editor pane, saving your changes. Refer to Editing an existing page, for more information on using editor mode.
    6. +
+ +

Link from an existing page

+ +

This is a bit of a hybrid. You can create a link on another page, then click the link you just inserted, to create the new page:

+ +
    +
  1. Enter the name of your new page, anywhere that makes sense in the text of an existing page.
    2. +
  2. Highlight this new name, and click the Link icon () in the editor's toolbar. The 'Update Link' dialog opens, with the highlighted text in the 'Link To' field.
    3. +
  3. "/en-US/docs/" is inserted by default, to the beginning of the URL field. Enter the name of the page after "/en-US/docs/". The page name does not have to be the same as the link text.
    4. +
  4. Click OK, to create and insert the link.
    5. +
+ +

If the page does not yet exist, the link is displayed in red. If the page does exist, the link is displayed blue. If you want to create a new page, but the page title you desire is already taken, check if it makes sense helping edit and improve the page already there. Otherwise, think of a unique title for your new page, and create a link for it. Refer to page naming guide for guidelines.

+ +

To add content to your new page, click on the red link you just created, after saving and closing the editor. The new page opens in editor mode, enabling you to start writing. Refer to Editing an existing page, for further information on using editor mode.

+ +

Refreshing page content

+ +

MDN support of KumaScript macros, and integration of content from other pages, can sometimes be hampered by the need for caching of pages, for performance reasons. Pages are built from their source, and this output is cached for future requests. From that moment on, any macros (templates), or integrations (using the macroPage), will not reflect later changes made to the macro, its output, or the contents of the integrated material.

+ +
    +
  • To manually update a page, force-refresh your Web browser. MDN detects this, triggering a page rebuild, pulling in updated macro output, and integrating page content.
    • +
  • You can also configure pages to periodically rebuild, automatically. This should not be done, unless you expect the page to update frequently. See Page regeneration, for detailed information.
    • +
+ +

See also

+ + diff --git a/files/ar/mdn/contribute/howto/do_a_technical_review/index.html b/files/ar/mdn/contribute/howto/do_a_technical_review/index.html deleted file mode 100644 index 72774721a9..0000000000 --- a/files/ar/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: كيفية القيام بمراجعة فنية -slug: MDN/Contribute/Howto/Do_a_technical_review -translation_of: MDN/Contribute/Howto/Do_a_technical_review ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

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

- -

توضح هذه المقالة كيفية إجراء مراجعة فنية ، مما يساعد على ضمان دقة محتوى MDN

- -

ما هي المهمة؟

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

    كيفية تحرير مقالة ويكي على MDN.

    -
    • -
-
-
-

ما هي خطوات القيام بذلك؟

-
-
-
    -
  1. اختيار مقال للمراجعة: -
      -
    1. انتقل إلى قائمة الصفحات التي تحتاج إلى مراجعات فنية. هذا يسرد جميع الصفحات التي طلبت مراجعة فنية لها.
      2. -
    2. اختر صفحة موضوعك مألوفة لديك.
      3. -
    3. انقر على رابط المقال لتحميل الصفحة.
      4. -
    -
    2. -
  2. اقرأ المقال ، مع إيلاء اهتمام وثيق للتفاصيل الفنية: هل المقال صحيح؟ هل هناك شيء مفقود؟ لا تتردد في التبديل إلى صفحة مختلفة إذا كانت أول صفحة تختارها لا تناسبك. -
      -
    -
    3. -
  3. إذا لم تكن هناك أخطاء ، فلن تحتاج إلى تعديل المقالة لوضع علامة عليها كمراجعة. ابحث عن مربع "المراجعة السريعة" في الشريط الجانبي الأيسر من الصفحة. يسرد هذا المربع الأصفر أي مراجعات معلقة ويسمح لك بمسح علامة طلب المراجعة. يبدو مثل هذا إذا تم طلب مراجعة فنية:
    - Screenshot of the sidebar's box listing reviews that have been requested and allowing the flags to be changed.
    4. -
  4. -

    ألغ تحديد مربع الاختيار الفني ، وانقر فوق "حفظ".

    -
    5. -
  5. -

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

    - -
      -
    1. لتحرير الصفحة ، انقر فوق الزر "تحرير" بالقرب من أعلى الصفحة ؛ هذا يضعك في محرر MDN.
      2. -
    2. إصلاح أي معلومات فنية غير صحيح ، و / أو إضافة أي معلومات مهمة مفقودة.
      3. -
    3. أدخل تعليق المراجعة في أسفل المقال. هذه رسالة مختصرة تصف ما قمت به ، مثل "إكمال المراجعة الفنية". إذا قمت بتصحيح المعلومات ، فقم بتضمينها في تعليقك ، على سبيل المثال "المراجعة الفنية وأوصاف المعلمات الثابتة". يساعد ذلك المساهمين الآخرين ومحرري الموقع في معرفة ما الذي قمت بتغييره ولماذا. يمكنك أيضًا ذكر ما إذا كانت هناك وحدات بت محددة لم تشعر أنها مؤهلة للمراجعة
      4. -
    4. ألغ تحديد المربع الفني تحت المراجعة المطلوبة؟ أسفل منطقة تعليق المراجعة بالصفحة.
      5. -
    5. انقر على زر نشر.
      6. -
    -
    6. -
- -

تهانينا! لقد أنهيت أول مراجعة فنية لك! شكرا لك على مساعدتك!

-
-
- -
 
diff --git a/files/ar/mdn/contribute/howto/do_an_editorial_review/index.html b/files/ar/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index 1ba5c000fd..0000000000 --- a/files/ar/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: كيفية القيام بمراجعة تحريرية -slug: MDN/Contribute/Howto/Do_an_editorial_review -translation_of: MDN/Contribute/Howto/Do_an_editorial_review ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

Editorial reviews consist of fixing typos, spelling, grammar, usage, or textual errors in an article. One does not have to be a writing expert to make valuable contributions to MDN's technical documentation, but articles still need copy-editing and proof-reading. This is done in an editorial review.

- -

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

- -
-
ما هي المهمة؟
-
-

تحرير النسخ وقراءة التجارب للمقالات التي تم تحديدها على أنها تتطلب مراجعة تحريرية.

-
-
-

أين يجب القيام به؟

-
-
-

ضمن مقالات محددة تم تعليمها على أنها تتطلب مراجعة افتتاحية.

-
-
ما الذي تحتاج إلى معرفته لأداء المهمة؟
-
You need to have good English grammar and spelling skills. An editorial review is about ensuring that the grammar, spelling, and wording are correct and make sense, and that the MDN writing style guide is followed.
-
-

ما هي خطوات القيام بذلك؟

-
-
-
    -
  1. Pick an article to review: -
      -
    1. Go to the list of articles needing editorial review. This lists all the pages for which an editorial review has been requested.
      2. -
    2. Click on the article link to load the page.
      - Note: This listing is generated automatically but infrequently, so some articles appear on the list that no longer need editorial review. If the article you picked does not display a banner that says "This article needs an editorial review", skip that article and pick a different one.
      3. -
    -
    2. -
  2. Read the article carefully, looking out for typos, spelling, grammar, or usage errors. Don't hesitate to switch to a different page if the first one you choose doesn't suit you.
    3. -
  3. If there are no errors, you don't need to edit the article to mark it as reviewed. Look for the "quick review" box in the left sidebar of the page:
    - Screenshot of the editorial review request sidebar box
    4. -
  4. Deselect the Editorial box and click Save.
    5. -
  5. If you find errors that need to be corrected: -
      -
    1. Click the Edit button near the top of the page; this brings you into the MDN editor.
      2. -
    2. Correct any typos and spelling, grammar, or usage errors you find. You don't have to fix everything to be useful, but be sure to leave the editorial review request in place if you don't feel reasonably sure that you've done a complete review of the entire article.
      3. -
    3. Enter a Revision Comment at the bottom of the article; something like 'Editorial review: fixed typos, grammar & spelling.' This lets other contributors and site editors know what you changed and why.
      4. -
    4. Deselect the Editorial box under Review Needed?. This is located just below the Revision Comment section of the page.
      5. -
    5. Click the Publish button.
      6. -
    -
    6. -
- -
-

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

-
-
-
diff --git a/files/ar/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/ar/mdn/contribute/howto/set_the_summary_for_a_page/index.html deleted file mode 100644 index 7f1598cb01..0000000000 --- a/files/ar/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: How to set the summary for a page -slug: MDN/Contribute/Howto/Set_the_summary_for_a_page -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

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

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

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

- - - -

الملخص الافتراضي

- -

تعتمد الصفحات التي لا تحتوي أي ملخص على الملخص الافتراضي.
- بشكل افتراضي يعتبر ملخص الصفحة هو أول قسم من الصفحة مكتوب ب 
- {{Glossary("HTML")}}
- لذلك من الممكن أي يكون الملخص عبارة عن نص وليس عنوان. 

- -

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

- -
    -
  • النص الأول يعتبر شيء جانبي أو ملاحظة ما, ولا يقدم أي مراجعة كاملة للصفحة
    • -
  • أول نص مكتوب يعتبر نص محتوى ولكن لا يقدم مراجعة كاملة لمحتوى المقالة
    • -
  • النص طويل أو قصير للغاية
    • -
- -

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

- -

Setting the summary

- -

Let's look at how to go about setting a page's summary.

- -
-
What is the task?
-
Marking the text within a page that should be used as its summary in other contexts; if appropriate text isn't already available, this task might include writing a small amount of appropriate text.
-
Where does it need to be done?
-
On pages that lack a summary, have a summary that isn't helpful, or have a summary that unnecessarily fails to meet recommended guidelines.
-
What do you need to know to do the task?
-
Ability to use the MDN editor; good English writing skills; enough familiarity with the topic of the page to write a good summary.
-
What are the steps to do it?
-
- -
    -
  • Pick a page on which to set the summary. If you already have one in mind, great! You can skip to step 2; otherwise, to find a page to fix: -
      -
    1. In the MDN documentation status page, click the link under Sections for a topic that you know something about (for example, HTML):
      -
      2. -
    2. On the topic's documentation status page, click the Pages header in the Summary table. This takes you to an index of all the pages in that topic section; it shows the page links in the left column, and the tags and summaries in the right column:
      -
      3. -
    3. Pick a page that is missing a summary, or that has a poor summary:
      -
      4. -
    4. Click the link to go to that page.
      5. -
    -
    • -
- -
-
-
    -
  1. Once on the page to which you wish to add a summary, click Edit to open the page in the MDN editor. See the Guide to the MDN editor if you need information about using the editor.
    2. -
  2. Look for a sentence or two that works as a summary, even if taken out of context. If needed, edit the existing content to create or modify the text until you can select a sentence or two that make a good summary. See {{anch("Crafting a good summary")}} for help selecting or creating an appropriate summary.
    3. -
  3. Select the text to be used as a summary.
    4. -
  4. In the Styles widget of the editor toolbar, select SEO Summary. In the page source, this creates a {{HTMLElement("span")}} element with class="seoSummary" around the selected text.
    -
    5. -
  5. Save your changes with a revision comment. The comment is optional, but we encourage you to provide one. It makes it easier for other people to track the changes. Something like "Set SEO summary" is enough.
    6. -
-
-
- -

Crafting a good summary

- -

The summary is used in many different scenarios, including these:

- -
    -
  • As the description of the article on search results pages on MDN as well as on Google and other search engines.
    • -
  • As the description of the article in menus and topic landing pages on MDN itself.
    • -
  • In contextual tooltips when the user hovers the cursor over links to articles on MDN.
    • -
- -

It's important to keep these scenarios in mind while composing a summary. In order to help ensure that the summary works well in all of these situations, please try to follow the guidelines below.

- -
-

Note: Unless otherwise specifically stated, these are guidelines, not hard and fast rules. While you should do what you can to meet these guidelines, sometimes there are exceptions that can't be  avoided.

-
- -
    -
  • The summary should indicate both the topic and the type of page. "In this guide, we'll learn to use the Intersection Observer API to create responsive web apps that only update animations that are currently visible on screen." is 160 characters, for example, and explains what technology is being covered, how the technology is being used, and that the article is a tutorial.
    • -
  • You can choose text from anywhere within any paragraph in the article, but it should ideally be within the first paragraph (or the second, in some cases). If the point of the article isn't made in those paragraphs, the introduction of the page probably needs rewriting.
    • -
  • The summary must still fit well within the context of the article's body, since it is in fact part of the article.
    • -
  • It's okay to have links to other pages within the summary. These are automatically removed before being given to search engines, and do not count against you. They're also removed before the summary is used as a tooltip. Links are not removed from the summary when used as a page description within menus and landing pages on MDN, which is really convenient as well.
    • -
  • The summary should include an appropriate selection of key terms likely to be searched for by someone looking for information contained on the page. In the example case about the Intersection Observer API, those keywords include the API name, "animations", "visible", "responsive", and "web apps", possibly among others.
    • -
  • To optimize the Search Engine Optimization (SEO) value gained from a summary, it should be no shorter than 150 characters long.
    • -
  • Since a search engine result page (SERP) typically doesn't show more than 160 characters of the summary, you should avoid summaries longer than that. Having your text unceremoniously chopped off can dissuade people from clicking the link.
    • -
  • It might be tempting to write a great summary that doesn't work on page, then hide the summary inside a block with the "hidden" class on it. But this doesn't work, because search engines ignore text that's not visible to the user.
    • -
- -

Think of the summary as being akin to the {{interwiki("wikipedia", "blurb")}} on the back or inside the front cover of a book. This short text has to catch the reader's attention quickly and encourage them to read on.

- -

It can be a little tricky to write an summary that works well both for search engine result pages and within the article text itself, but currently MDN doesn't offer a way to create an SEO summary separate from the page content, so do the best you can.

- -

See also

- - diff --git a/files/ar/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/ar/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html deleted file mode 100644 index 1c993c9677..0000000000 --- a/files/ar/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: كيفية كتابة مقال لمساعدة الناس على التعرف على شبكة الإنترنت -slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web ---- -
{{MDNSidebar}}
- -

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

- -

يشرح هذا المقال كيفية كتابة صفحات للمنطقة التعليمية.

- -

How to write a Learning Area article

- -

To start contributing your knowledge, simply click the big green button, then follow the five steps below. If you're looking for ideas, please take a look at the our team Trello board!

- - - -
Write a new learning article - -
-
- - - -

This article might not end up in exactly the right place, but at least it's on MDN. If you need to talk to someone about getting it moved to the right place, please  Contact us.

- -

Step 1: Write a two-liner

- -

Your article's first sentence needs to summarize what subject you're going to cover, and the second one should go into a few more specifics of the items that you'll put in the article. For example:

- -
-

Whereas {{glossary("HTML")}} files contain structured content, {{Glossary("CSS")}}, another major Web technology, makes the content look the way you want. In this article we are going to cover how this technology works, and how to write your own basic example.

-
- -

Note how the example briefly explains that CSS is a core Web technology used to style pages. That's enough for the reader to get a pretty good idea what the article covers.

- -

Because Learning Area articles primarily target beginners, each article should cover one straightforward topic so as not to overwhelm the reader with too much new information. If you can't summarize the article in one sentence, you might be trying to do too much in one article!

- -

Step 2: Add a top box

- -

Add a top box to help readers understand where they are in the learning process.  Here's an example of a top box from "Understanding URLs and their structure". You can use this article as an model when writing your own.

- - - - - - - - - - - - -
Prerequisites:You need to first know how the Internet works, what a Web server is, and the concepts behind links on the web.
Objective:You will learn what a URL is and how it works on the Web.
- -
-
Prerequisites
-
What must the reader already know to follow the article? When possible, make each prerequisite a link to another Learning Area article covering the concept (unless it's a really basic article that doesn't require prior knowledge).
-
Objectives
-
This section briefly states what the reader will learn over the course of the article. This is a bit different than the one-liner; the one-liner summarizes the topic of the article, while the objectives section specifically lays out what the reader can expect to accomplish over the course of the article.
-
- -
-

Note: To create this table, you can either copy and paste the example table above, or use MDN's editor's table tool. If you choose to use the table tool, you need to specifically add the learn-box CSS class in addition to the default standard-table class. To do this, when you create or edit the table's properties, go to the "Advanced" panel and set the Stylesheet Classes field to "standard-table learn-box".

-
- -

Step 3: Write a full description

- -

Next, write a longer description that provides a more thorough overview of the article highlighting the most important concepts. Don't forget to explain why the reader should take the time to learn this topic and read your article!

- -

Step 4: Dig deeper

- -

When you're done with all that, you can finally dive deeply into the topic. You can structure this part of your article however you like (although feel free to consult our style guide). This is your chance to shine! Go into detail explaining the topic you're writing about. Provide links to the full reference documentation, explain how the technology works in detail, provide syntax and usage details, and so forth. It's up to you!

- -

As a guide, here are some writing tips for beginners:

- -
    -
  • Focus on a single topic. If you feel like you need to cover other topics, it means either you're missing a prerequisite article, or you need to break up your article into more than one.
    • -
  • Use simple English. Avoid technical terms when you can, or at least define them and link to their glossary entries where applicable.
    • -
  • Include straightforward examples to make the theoretical concepts easier to grasp. Many people learn best by example. Rather than writing academic papers, we want beginners to follow the text readily.
    • -
  • Visual aids often can make things easier to digest and carry extra information, so feel free to use images, diagrams, videos, and tables. If you're using diagrams or charts that include text, we encourage you to use {{Glossary("SVG")}} so our translation teams can localize the text.
    • -
- -

Have a look at the first few sections of our Functions — reusable blocks of code article for some good descriptive sections.

- -

Step 5: Provide "active learning" material

- -

To illustrate the article and help the reader better understand what they're learning, be sure to provide exercises, tutorials, and tasks to accomplish. By having them actively and practically using and experimenting with the concepts your article explains, you can help "lock" the information into their brains.

- -

You can choose to include the examples directly in the page as live samples or link to them if they don't really work as a live sample. If you're interested in helping create these valuable materials, please read the article Create an interactive exercise to help learning the Web.

- -

If you can't provide links to existing active learning materials (you don't know of any or don't have time to create them), you should add the tag {{Tag("NeedsActiveLearning")}} to the article. That way other contributors can find articles that need active learning materials and help you come up with them.

- -

Have a look at Active learning: selecting different elements for a live interactive learning exercise, or Active learning: Playing with scope for a different style of exercise that calls upon them to download a template locally and modify it following the provided steps.

- -

Step 6: Get the article reviewed, and put into the Learning Area navigation menu

- -

After you've written your article, let us know so we can have a look at it, do a review, and suggest improvements. Again, see our Contact us section for the best ways to get in touch.

- -

The last step is adding your article to the Learning Area main navigation menu. This menu is generated by the LearnSidebar macro, and requires special editing privileges, so talk to one of our team about your contribution.

- -

For now, add the menu to your page by adding the macro call \{{LearnSidebar}} into a paragraph at the top of your page.

- -
    -
- -

Suggested articles

- -

So you want to contribute but you're not sure what to write about?

- -

The Learning Area team maintains a Trello board with ideas of articles to write. Feel free to pick one and get to work!

diff --git "a/files/ar/mdn/contribute/howto/\330\245\331\206\330\264\330\247\330\241_\330\255\330\263\330\247\330\250_\330\271\331\204\331\211_\330\264\330\250\331\203\330\251_\331\205\330\267\331\210\330\261\331\212_\331\205\331\210\330\262\331\212\331\204\330\247/index.html" "b/files/ar/mdn/contribute/howto/\330\245\331\206\330\264\330\247\330\241_\330\255\330\263\330\247\330\250_\330\271\331\204\331\211_\330\264\330\250\331\203\330\251_\331\205\330\267\331\210\330\261\331\212_\331\205\331\210\330\262\331\212\331\204\330\247/index.html" deleted file mode 100644 index 5a0a255b5d..0000000000 --- "a/files/ar/mdn/contribute/howto/\330\245\331\206\330\264\330\247\330\241_\330\255\330\263\330\247\330\250_\330\271\331\204\331\211_\330\264\330\250\331\203\330\251_\331\205\330\267\331\210\330\261\331\212_\331\205\331\210\330\262\331\212\331\204\330\247/index.html" +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: كيف تنشئ حساباً على شبكة MDN -slug: MDN/Contribute/Howto/إنشاء_حساب_على_شبكة_مطوري_موزيلا -tags: - - MDN Account - - إنشاء حساب MDN - - حساب MDN -translation_of: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{MDNSidebar}}
- -

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

- -
-
-

لما تحتاج الشبكة لعنوان البريد الإلكتروني؟

- -

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

- -
إذا قمت بتسجيل الدخول بالشبكة باستخدام GitHub و استخدمت "عدم الرد (noreply)" على بريد الغيت هاب، فلن تتلقى رسائل (بما فيها الإشعارات عندما تشترك بصفحة) من الشبكة.
-
-
- -
    -
  1. في أعلى كل صفحة ستجد زر تسجيل الدخول. اضغط على هذا الزر لعرض قائمة الخدمات التي ندعمها للمصادقة وتسجيل الدخول في الشبكة.
    2. -
  2. اختر إحدى تلك الخدمات. حالياً، غيت هاب هو الخيار الوحيد. لاحظ أنك إذا اخترت غيت هاب سيتم إضافة رابط لملفك الشخصي على الموقع في الشبكة.
    3. -
  3. اتبع الطلبات التي سيخبرك بها غيت هاب لتربط ملفك الشخصي بالشبكة.
    4. -
  4. حالما تعيدك خدمة المصادقة إلى الشبكة (والتي هي غيت هاب - إذا أخترتها -)، ستتمكن من إدخال اسم المستخدم وكلمة المرور، سيتم عرض اسم المستخدم خاصتك للعموم لشكرك على العمل الذي قمت به. فلا تستخدم البريد الإلكتروني كاسم مستخدم.
    5. -
  5. اضغط على إنشاء ملف شخصي خاص بي على الشبكة (أو ما يقابله بالمعنى).
    6. -
  6. إذا كان البريد الإلكتروني الذي حددته في الخطوة الرابعة ليس هو نفسه الذي استخدمته مع خدمة المصادقة، فيرجى التحقق من بريدك الإلكتروني والضغط على رابط التأكيد المُرسل إليك.
    7. -
- -

هذا كل شيء! والآن أصبح لديك حساب على الشبكة، ويمكنك القيام بتعديلات مباشرةً!

- -

يمكنك الضغط على اسمك في الشريط العلوي لرؤية ملفك الشخصي. من هناك، يمكنك الضغط على زرتحرير (أو ما يقابله بالمعنى) للقيام بتغييرات على ملفك الشخصي.

- -
-

اسماء المستخدمين الجدد لا يمكن أن يحتوا على مسافات أو المحرف "@". تذكر أن اسم المستخدم الخاص بك سيظهر للعموم ليحدد الأعمال التي قمت بها.

-
- -
 
diff --git "a/files/ar/mdn/contribute/howto/\331\203\331\212\331\201\331\212\330\251_\330\245\331\206\330\264\330\247\330\241_\331\210\330\252\330\255\330\261\331\212\330\261_\330\247\331\204\330\265\331\201\330\255\330\247\330\252/index.html" "b/files/ar/mdn/contribute/howto/\331\203\331\212\331\201\331\212\330\251_\330\245\331\206\330\264\330\247\330\241_\331\210\330\252\330\255\330\261\331\212\330\261_\330\247\331\204\330\265\331\201\330\255\330\247\330\252/index.html" deleted file mode 100644 index c4ab1b2bcf..0000000000 --- "a/files/ar/mdn/contribute/howto/\331\203\331\212\331\201\331\212\330\251_\330\245\331\206\330\264\330\247\330\241_\331\210\330\252\330\255\330\261\331\212\330\261_\330\247\331\204\330\265\331\201\330\255\330\247\330\252/index.html" +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: كيفية إنشاء وتحرير الصفحات -slug: MDN/Contribute/Howto/كيفية_إنشاء_وتحرير_الصفحات -translation_of: MDN/Contribute/Howto/Create_and_edit_pages ---- -
{{MDNSidebar}}
- -

This article introduces new contributors to the process of editing existing pages and creating new ones.

- -

Editing an existing page

- -

To edit a page:

- -
    -
  1. Click the Edit button near the top right corner of the page.
    2. -
  2. The page then reloads, with an editing interface where you can add or delete information directly.
    3. -
  3. Add paragraphs, delete text, insert headings, and perform more of the basic functions involved in writing and editing.
    4. -
- -

See the guide to Editor UI elements in the MDN Editor guide for more information on using MDN's built-in editor.

- -

Preview changes

- -

To see what your changes look like:

- -
    -
  • Click the Preview button, within the editing function at the top or bottom of the page.
    • -
  • This opens the preview page, showing your revisions in a new window, or tab.
    • -
  • Each time you click this button, it refreshes your preview page with the latest changes.
    • -
- -

Be careful! Previewing a page does not save your progress. Don't close the editing tab until you've saved your work.

- -

Revision comment

- -

After previewing your changes, you will want to save your revision. Before you save, look for the revision comment box, below the editing box, leaving a comment to inform other contributors why you made changes. For example, you might have added a new section, changed some words to make the terminology more consistent, rewritten a paragraph to clarify the language, or removed information because it was redundant.

- -

Table of Contents

- -

The 'In this Article' section of an article, is an auto-generated list of links to the headings on the page. The wording of these can be edited via the headings. It's also possible to remove a table of contents, or decrease its number of links, by selecting 'Edit Page Title and Properties', changing the value of the "TOC" drop down.

- -

Tags

- -

You can add or remove tags, which describe the page content and purpose, below the editing section. See How to properly tag pages, for information on which tags to apply.

- -

Review needed?

- -

If an expert, or experienced contributor should review your edits, please request a technical review (for code, API's, or technologies), and/or an editorial review (for prose, grammar, and content), making sure the appropriate box is checked before you save.

- -

Attach files

- -

If you wish to attach a file to an existing page, or to add an illustration for further clarification, this can be added to the bottom of the page. When uploading an image, please be sure to use an image optimization tool to make the file as small to download as possible. This improves page load time and helps MDN's performance overall. You may use your preferred tool, if you have one. Otherwise, we suggest TinyPNG, a handy Web tool.

- -

Publish, Discard, or Keep editing

- -

When you finish editing, and are happy with your preview, publish your work and comments by clicking the green Publish button, to the right of the page title, or towards the bottom of the page. If you wish to continue working, click Publish and keep editing, which publishes your changes and keeps the edit interface open. 

- -

If you change your mind, you can discard edits, by clicking the red Discard button. Note that discarding changes permanently discards them.

- -

Pressing Enter in the Revision Comment field is equivalent to clicking Publish and Keep Editing.

- -
-

Note: If attempting to save, but changes are rejected as invalid, and you feel the content is appropriate for MDN, email the MDN admin team for assistance.

-
- -

Getting page-creation permissions

- -

For security reasons, newly-created accounts don't have the ability to create new pages. If you try to do so, you'll see a page instructing you how to get the page created. There are two options:

- -
    -
  • Ask for the page to be created for you. To do this, file a documentation request bug, with the subject "Create page: <page title>". Fill out the URL field with the location on MDN where you'd like the page to go, if you know where to place it. In the comment text, include information on why this page needs creating.
    • -
  • Request page creation privileges. If you request page creation privileges, and they're granted to you, you'll be able to add new pages by following the instructions here. To request these privileges, email the MDN admin team with your request. Include your username, why you would like to have the ability to create new pages. For instance, you're documenting a new API which involves many new pages, or you'd like to add new terms to the glossary. You should also have made useful contributions to this site's content, and been a contributor for some time. This length of time, and the other factors, are collectively considered.
    • -
- -

Creating a new page

- -

Once you have page-creation permission, you can begin creating pages.

- -

If you do not know where to place a new article, do not worry. Put it anywhere, we will find it, move to where it belongs, or merge it into existing content. Whatever makes the most sense. Do not worry about making it perfect. We have happy helper gnomes who help making your content clean and rather luscious.

- -

There are a few ways to create a new page:

- - - -
-
- - - -

As with most wikis, it is possible to create a link to a page that is yet to exist. For example, an author might create a list of all the members of an API, before creating the pages for those members. On MDN, links to non-existent pages are typically displayed in red.

- -

To create a page from a 'missing page' link:

- -
    -
  1. Log into MDN, and have page-creation permission. If not logged in, clicking a 'missing page' link results in a 404 (page not found) error.
    2. -
  2. Click the 'missing page' link. If you have page creation permission, the MDN Editor UI opens, ready for you to create the missing page.
    3. -
  3. Write the content of the page, and save it.
    4. -
- -

New page without link

- -

To create a new page without linking from another page, enter a unique page name in the URL field of your browser. For example, if you enter:

- -
https://developer.mozilla.org/en-US/docs/FooBar
- -

MDN creates a new page, with the title "FooBar", opening the editor for you to add new content. Refer to the Editing an existing page section of this article, for information on how to use the editor mode.

- -

To create a new page without linking from another page:

- -
    -
  1. Log in, and have page-creation permission.
    2. -
  2. Enter the following in the URL field of your browser:
    3. -
- -
https://developer.mozilla.org/en-US/docs/new
- -

MDN creates a new page, with a place for a title, opening the editor to add new content to this page. Refer to Editing an existing page, for information on using editor mode.

- -

Subpage of an existing page

- -

To create a page you want to be below an existing page, in the page hierarchy:

- -
    -
  1. On the 'parent' page, click the Advanced menu (the gear icon in the toolbar), then click New sub-page.
    2. -
  2. An editor view opens for creating a new document.
    3. -
  3. Add a title for this document, in the Title field.
    4. -
  4. Change the Slug field, if needed. For example, if the title is long, and a shorter URL seems appropriate. This field is automatically filled by the editor, substituting underscores for spaces found in the title, changing only the last part of the URL.
    5. -
  5. In the TOC field, select heading levels you want to be displayed in the table of contents for the page. Or select 'No table of contents', if one is not needed.
    6. -
  6. Write content of the page in the editor pane, saving your changes. Refer to Editing an existing page, for further information on using editor mode.
    7. -
- -

Clone of an existing page

- -

If there is an existing page, whose format you wish to use as a base for your new page, you can 'clone' that page, and then change its content.

- -
    -
  1. On the original page, click the Advanced menu (the gear icon in the toolbar), and click Clone this page. An editor view opens, for creating a new document.
    2. -
  2. Change the Title of the page, as appropriate for the new content. The Slug field is updated automatically as you change the Title field.
    3. -
  3. Change the path portion of the Slug field, as needed, to put the new document in a different location in the document hierarchy. In most cases, this is not needed. A cloned page often has similar content to its original, and need to be in a similar location.
    4. -
  4. In the TOC field, select the heading levels you want to be automatically displayed in the table of contents for this page. Or select 'No table of contents', if one is not needed.
    5. -
  5. Write your content in the editor pane, saving your changes. Refer to Editing an existing page, for more information on using editor mode.
    6. -
- -

Link from an existing page

- -

This is a bit of a hybrid. You can create a link on another page, then click the link you just inserted, to create the new page:

- -
    -
  1. Enter the name of your new page, anywhere that makes sense in the text of an existing page.
    2. -
  2. Highlight this new name, and click the Link icon () in the editor's toolbar. The 'Update Link' dialog opens, with the highlighted text in the 'Link To' field.
    3. -
  3. "/en-US/docs/" is inserted by default, to the beginning of the URL field. Enter the name of the page after "/en-US/docs/". The page name does not have to be the same as the link text.
    4. -
  4. Click OK, to create and insert the link.
    5. -
- -

If the page does not yet exist, the link is displayed in red. If the page does exist, the link is displayed blue. If you want to create a new page, but the page title you desire is already taken, check if it makes sense helping edit and improve the page already there. Otherwise, think of a unique title for your new page, and create a link for it. Refer to page naming guide for guidelines.

- -

To add content to your new page, click on the red link you just created, after saving and closing the editor. The new page opens in editor mode, enabling you to start writing. Refer to Editing an existing page, for further information on using editor mode.

- -

Refreshing page content

- -

MDN support of KumaScript macros, and integration of content from other pages, can sometimes be hampered by the need for caching of pages, for performance reasons. Pages are built from their source, and this output is cached for future requests. From that moment on, any macros (templates), or integrations (using the macroPage), will not reflect later changes made to the macro, its output, or the contents of the integrated material.

- -
    -
  • To manually update a page, force-refresh your Web browser. MDN detects this, triggering a page rebuild, pulling in updated macro output, and integrating page content.
    • -
  • You can also configure pages to periodically rebuild, automatically. This should not be done, unless you expect the page to update frequently. See Page regeneration, for detailed information.
    • -
- -

See also

- - diff --git a/files/ar/mdn/kuma/index.html b/files/ar/mdn/kuma/index.html deleted file mode 100644 index 8ab5de16e5..0000000000 --- a/files/ar/mdn/kuma/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: برمجية الموسوعة كوما -slug: MDN/Kuma -tags: - - صفحة هبوط - - معلومات عن الشبكة -translation_of: MDN/Kuma ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/ar/docs/MDN")}}
- -

كوما (Kuma) هي برمجيّة موسوعة مبنيّة باستخدام جانغو، وهي البرمجيّة التي تعتمد عليها شبكة مطوري موزيلا في عملها.

- -

{{SubpagesWithSummaries}}

- -

شارك بتطوير المنصة

- -

للمشاركة في تطوير كوما:

- - diff --git a/files/ar/mdn/tools/deleting_pages/index.html b/files/ar/mdn/tools/deleting_pages/index.html deleted file mode 100644 index 14b1632e0a..0000000000 --- a/files/ar/mdn/tools/deleting_pages/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Deleting pages -slug: MDN/Tools/Deleting_pages -tags: - - Guide - - MDN Meta - - Page-level - - Tools -translation_of: MDN/Tools/Page_deletion ---- -
{{MDNSidebar}}

Only MDN administrators are able to delete pages. This article explains how to request that a page be removed from MDN.

- -

To arrange for a page to be deleted, you should do the following:

- -
    -
  1. Do not erase or change the page content. We want to have the record of the page as it was at deletion time.
    2. -
  2. Add the tag "junk" to the page. Do not remove other tags.
    3. -
  3. If the page is particularly urgently in need of deletion (for example, its content is inappropriate, offensive, or technically dangerous), notify an MDN administrator.
    4. -
- -

An administrator will delete the page when possible, after confirming that deletion is appropriate

diff --git a/files/ar/mdn/yari/index.html b/files/ar/mdn/yari/index.html new file mode 100644 index 0000000000..8ab5de16e5 --- /dev/null +++ b/files/ar/mdn/yari/index.html @@ -0,0 +1,25 @@ +--- +title: برمجية الموسوعة كوما +slug: MDN/Kuma +tags: + - صفحة هبوط + - معلومات عن الشبكة +translation_of: MDN/Kuma +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/ar/docs/MDN")}}
+ +

كوما (Kuma) هي برمجيّة موسوعة مبنيّة باستخدام جانغو، وهي البرمجيّة التي تعتمد عليها شبكة مطوري موزيلا في عملها.

+ +

{{SubpagesWithSummaries}}

+ +

شارك بتطوير المنصة

+ +

للمشاركة في تطوير كوما:

+ + diff --git a/files/ar/mdn_at_ten/index.html b/files/ar/mdn_at_ten/index.html deleted file mode 100644 index 1df4f8a024..0000000000 --- a/files/ar/mdn_at_ten/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: MDN at 10 -slug: MDN_at_ten -translation_of: MDN_at_ten ---- - - -
-
-

The history of MDN

- -

In early 2005, a small team of idealists set out to create a new, free, community-built online resource for all Web developers. Their brilliant but offbeat idea grew into today’s Mozilla Developer Network—the premier resource for all open Web technologies. Ten years later, our global community is bigger than ever, and together we’re still creating documentation, sample code and learning resources for all open Web technologies, including CSS, HTML, JavaScript and everything else that makes the open Web as powerful as it is.

- -

Learn more about the history

- - -

Contributing to MDN

- -

For ten years, the MDN community has been documenting the open Web. From fixing simple typos to writing entire suites of an entirely new API, everyone has something to offer and no contribution is too large or too small. We have over 90,000 pages of content that have been written or translated by members of our outstanding community of Mozillians. You can become one of them.

- -

Learn more about contributing

- -

 

- -

 

-
- -
{{TenthCampaignQuote}}
- - - -
    -
  1. MDN at 10
    2. -
  2. The history of MDN
    3. -
  3. Contributing to MDN
    4. -
-
diff --git a/files/ar/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/ar/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..b407fc48a7 --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,56 @@ +--- +title: ما هي الامتدادات؟ +slug: Mozilla/Add-ons/WebExtensions/ما_هي_امتدادات_الويب +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +
{{AddonSidebar}}
+ +

An extension adds features and functions to a browser. It’s created using familiar web-based technologies—HTML, CSS, and JavaScript. It can take advantage of the same web APIs as JavaScript on a web page, but an extension also has access to its own set of JavaScript APIs. This means that you can do a lot more in an extension than you can with code in a web page. Here are just a few examples of the things you can do:

+ +

Enhance or complement a website: Use an add-on to deliver additional in-browser features or information from your website. Allow users to collect details from pages they visit to enhance the service you offer.

+ +

+ +

Examples: Amazon Assistant for Firefox, OneNote Web Clipper, and Grammarly for Firefox

+ +

Let users show their personality: Browser extensions can manipulate the content of web pages; for example, letting users add their favorite logo or picture as a background to every page they visit. Extensions may also enable users to update the look of the Firefox UI, the same way standalone theme add-ons do.

+ +

+ +

Examples: MyWeb New Tab, Tabliss, and VivaldiFox

+ +

Add or remove content from web pages: You might want to help users block intrusive ads from web pages, provide access to a travel guide whenever a country or city is mentioned in a web page, or reformat page content to offer a consistent reading experience. With the ability to access and update both a page’s HTML and CSS, extensions can help users see the web the way they want to.

+ +

+ +

Examples: uBlock Origin, Reader, and Toolbox for Google Play Store™

+ +

Add tools and new browsing features: Add new features to a taskboard, or generate QR code images from URLs, hyperlinks, or page text. With flexible UI options and the power of the WebExtensions APIs you can easily add new features to a browser. And, you can enhance almost any website’s features or functionality, it doesn't have to be your website.

+ +

+ +

Examples: Swimlanes for Trello and Tomato Clock

+ +

Games: Offer traditional computer games with off-line play features, or explore new game possibilities; for example, by incorporating gameplay into everyday browsing.

+ +

 

+ +

Examples: Asteroids in Popup, Solitaire Card Game New Tab, and 2048 Prime.

+ +

Add development tools: You may provide web development tools as your business or have developed a useful technique or approach to web development that you want to share. Either way, you can enhance the built-in Firefox developer tools by adding a new tab to the developer toolbar.

+ +

+ +

Examples: Web Developer, Web React Developer Tools, and aXe Developer Tools

+ +

Extensions for Firefox are built using the WebExtensions APIs, a cross-browser system for developing extensions. To a large extent, the API is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few changes. The API is also fully compatible with multiprocess Firefox.

+ +

If you have ideas or questions, or need help migrating a legacy add-on to WebExtensions APIs, you can reach us on the dev-addons mailing list or in #addons on IRC.

+ +

What's next?

+ + diff --git "a/files/ar/mozilla/add-ons/webextensions/\331\205\330\247_\331\207\331\212_\330\247\331\205\330\252\330\257\330\247\330\257\330\247\330\252_\330\247\331\204\331\210\331\212\330\250/index.html" "b/files/ar/mozilla/add-ons/webextensions/\331\205\330\247_\331\207\331\212_\330\247\331\205\330\252\330\257\330\247\330\257\330\247\330\252_\330\247\331\204\331\210\331\212\330\250/index.html" deleted file mode 100644 index b407fc48a7..0000000000 --- "a/files/ar/mozilla/add-ons/webextensions/\331\205\330\247_\331\207\331\212_\330\247\331\205\330\252\330\257\330\247\330\257\330\247\330\252_\330\247\331\204\331\210\331\212\330\250/index.html" +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: ما هي الامتدادات؟ -slug: Mozilla/Add-ons/WebExtensions/ما_هي_امتدادات_الويب -translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions ---- -
{{AddonSidebar}}
- -

An extension adds features and functions to a browser. It’s created using familiar web-based technologies—HTML, CSS, and JavaScript. It can take advantage of the same web APIs as JavaScript on a web page, but an extension also has access to its own set of JavaScript APIs. This means that you can do a lot more in an extension than you can with code in a web page. Here are just a few examples of the things you can do:

- -

Enhance or complement a website: Use an add-on to deliver additional in-browser features or information from your website. Allow users to collect details from pages they visit to enhance the service you offer.

- -

- -

Examples: Amazon Assistant for Firefox, OneNote Web Clipper, and Grammarly for Firefox

- -

Let users show their personality: Browser extensions can manipulate the content of web pages; for example, letting users add their favorite logo or picture as a background to every page they visit. Extensions may also enable users to update the look of the Firefox UI, the same way standalone theme add-ons do.

- -

- -

Examples: MyWeb New Tab, Tabliss, and VivaldiFox

- -

Add or remove content from web pages: You might want to help users block intrusive ads from web pages, provide access to a travel guide whenever a country or city is mentioned in a web page, or reformat page content to offer a consistent reading experience. With the ability to access and update both a page’s HTML and CSS, extensions can help users see the web the way they want to.

- -

- -

Examples: uBlock Origin, Reader, and Toolbox for Google Play Store™

- -

Add tools and new browsing features: Add new features to a taskboard, or generate QR code images from URLs, hyperlinks, or page text. With flexible UI options and the power of the WebExtensions APIs you can easily add new features to a browser. And, you can enhance almost any website’s features or functionality, it doesn't have to be your website.

- -

- -

Examples: Swimlanes for Trello and Tomato Clock

- -

Games: Offer traditional computer games with off-line play features, or explore new game possibilities; for example, by incorporating gameplay into everyday browsing.

- -

 

- -

Examples: Asteroids in Popup, Solitaire Card Game New Tab, and 2048 Prime.

- -

Add development tools: You may provide web development tools as your business or have developed a useful technique or approach to web development that you want to share. Either way, you can enhance the built-in Firefox developer tools by adding a new tab to the developer toolbar.

- -

- -

Examples: Web Developer, Web React Developer Tools, and aXe Developer Tools

- -

Extensions for Firefox are built using the WebExtensions APIs, a cross-browser system for developing extensions. To a large extent, the API is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few changes. The API is also fully compatible with multiprocess Firefox.

- -

If you have ideas or questions, or need help migrating a legacy add-on to WebExtensions APIs, you can reach us on the dev-addons mailing list or in #addons on IRC.

- -

What's next?

- - diff --git a/files/ar/orphaned/heesfoord007/index.html b/files/ar/orphaned/heesfoord007/index.html new file mode 100644 index 0000000000..18fb17ee5d --- /dev/null +++ b/files/ar/orphaned/heesfoord007/index.html @@ -0,0 +1,54 @@ +--- +title: heesfoord007 +slug: heesfoord007 +tags: + - Landing + - NeedsTranslation + - TopicStub + - Web +--- +
The open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find links to our Web technology documentation.
+ +
+
+

Documentation for Web developers

+ +
+
Web Developer Reference
+
A list of all references for Web technologies, including those for HTML, CSS, and so on.
+
Web Developer Guide
+
The Web Developer Guide provides useful how-to content to help you actually use Web technologies to do what you want or need to do.
+
Tutorials for Web developers
+
A list of tutorials to take you step-by-step through learning APIs, technologies, or broad topic areas.
+
Developing Web applications
+
Documentation for Web application developers; Web apps are true write-once, deploy anywhere apps for mobile, desktop, and Firefox OS.
+
Code snippets
+
This is a quick list of useful code snippets (small code samples) available for developers of extensions for the various Mozilla applications. Many of these samples can also be used in XULRunner applications, as well as in actual Mozilla code itself.
+
+ +

View All...

+
+ +
+

Web technology references

+ +
+
Web APIs
+
Reference material for each of the interfaces that comprise the Web's APIs, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps.
+
HTML
+
HyperText Markup Language is the language used to describe and define the content of a Web page.
+
CSS
+
Cascading Style Sheets are used to describe the appearance of Web content.
+
SVG
+
Scalable Vector Graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.
+
MathML
+
The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.
+
+
+
+ +

Temporary

+ +

The stuff below here is temporary to help keep track of things while organization work is ongoing. Pay it no mind.

+ +
{{ListSubpages}}
diff --git a/files/ar/orphaned/learn/how_to_contribute/index.html b/files/ar/orphaned/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..e53fb8f34f --- /dev/null +++ b/files/ar/orphaned/learn/how_to_contribute/index.html @@ -0,0 +1,82 @@ +--- +title: كيف تساهم في قسم التعلم في الشبكة +slug: Learn/How_to_contribute +tags: + - توثيق + - دليل + - ساهم + - مبتدئين +translation_of: Learn/How_to_contribute +--- +
{{LearnSidebar}}
+ +

إن كنت هنا لأوَّل مرَّة أو بعد بحثٍ طويل، فمن المُرجَح أنَّ هذا يرجع لكونك مُهتماً في المساهمة في قسم شبكة مطوري موزيلا للتعلم. إنَّ هذا لنبؤٌ سعيد!

+ +

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

+ +
+

ملاحظة: يمكنك إيجاد دليل إرشادي حول كتابة مقالة جديدة في قسم التعلم في مقالة "كيفيّة كتابة مقالة لمساعدة الناس على التعلُّم حول الويب".

+
+ +

جِد مهمة محددة

+ +

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

+ +

المساهمة هي طريقة رائعة لاكتساب المتعة في حين تعلم أشياء جديدة. إن شعرت يوماً بالضياع أو كان لديك سؤالاً ما، فلا تتردد أبداً بالتواصل معنا على موضوع قسم التعلُّم في منصة ديسكورس، أو على قناة IRC (اطّلع على نهاية هذه الصفحة للمزيد من التفاصيل). كريس ميلز (Chris Mills) هو مدير المواضيع لهذا القسم، يمكنك أيضاً محاولة التواصل معه مباشرةً.

+ +

توفِر الأقسام التاليّة بعض الأفكار العامة حول أنواع المهام التي يمكنك القيام بها.

+ +

أنا مُبتدِئ

+ +

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

+ +

إليك بعض الاقتراحات حول الطرق التي يمكنك المساهمة فيها:

+ +
+
إضافات الوسوم إلى المقالات (تستغرق العمليّة قرابة الخمس دقائق)
+
وسِم (tagging) محتوى الشبكة هو أحد أسهل الطرق التي يمكنك المساهمة فيها. في حين أنَّ العديد من المزايا لدينا تستخدم الوسوم (tags) لتساعدها في تقديم المعلومات بسياقها الصحيح، فيُعَد الوسِم مساهمة قيّمة جداً. ألقي نظرة على قائمة المصطلحات في المسرد والمقالات التعليميّة التي لا تحتوي على وسوم لتبدأ بالمساهمة.
+
قراءة ومراجعة المصطلحات في المسرد (تستغرق العمليّة قرابة الخمس دقائق)
+
كمبتدئ، نحتاج إلى أعين يقظة لمراجعة محتوانا. إذا وجدت مصطلحاً صعب الفهم، فهذا يعني أنَّ المسرد بحاجة ليُحسَن. لا تتردد بإجراء أي تغييرات تظنها ضروريّة. إذا كنت تظن أنَّك لا تملك المهارة الكافيّة لتعديل مصطلح بنفسك، يمكنك على الأقل إعلامنا بذلك على قائمتنا البريديّة.
+
كتابة مصطلح جديد في المسرد (تستغرق العمليّة قرابة العشرين دقيقة)
+
هذه أكثر الطرق فعاليّة لتتعلم شيئاً جديداً. اختر مفهوماً جديداً تريد فهمه، أقرأ عنه، واكتب شرحاً له في المسرد. الشرح للآخرين هي إحدى الطرق الرائعة "لتثبيت" المعرفة في ذهنك، وتساعدك على فهم الأشياء بنفسك، كل هذا في حين أنَّك تساعد الآخرين أيضاً. الجميع رابِح!
+
قراءة ومراجعة المقالات التعليميّة (تستغرق العمليّة قرابة الساعتين)
+
تشبه هذه المهمة كثيراً مراجعة المصطلحات في المسرد (انظر أعلاه). ولكن هذه المهمة تحتاج لوقتٍ أطول؛ بسبب أنَّ هذه المقالات عادةً ما تكون أطول قليلاً.
+
+ +

أنا مُطوِّر

+ +

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

+ +
+
قراءة ومراجعة المصطلحات في المسرد (تستغرق العمليّة قرابة الخمس دقائق)
+
كمطوِّر، نحتاج لتتأكد أنَّ محتوانا دقيق تقنياً بدون أن يكون مُتحذلق بشكل مبالغ. لا تتردد عن إجراء أي تغييرات تظن أنَّها ضروريّة. إذا أردت مناقشة المحتوى قبل إجراء أيّة تغييرات، تواصل معنا على قائمتنا البريديّة أو على قناة IRC.
+
كتابة مصطلح جديد في المسرد (تستغرق العمليّة قرابة العشرين دقيقة)
+
توضيح المصطلحات التقنيّة هي طريقة جيدة جداً للتعلم ولتصبح دقيق تقنياً وبسيطاً في شرحك. سيشكرك المبتدئون على ذلك. لدينا العديد من المصطلحات الغير معرفة والتي تحتاج لاهتمامك. اختر واحداً وابدأ بشرحه.
+
قراءة ومراجعة المقالات التعليميّة (تستغرق العمليّة قرابة الساعتين)
+
هذه المهمة مماثلة لمراجعة المصطلحات في المسرد (انظر أعلاه). الفرق هو أنَّ هذه المقالات أطول قليلاً مما سيتطلب وقتاً أطول.
+
كتابة مقالة تعليميّة جديدة (تستغرق العمليّة قرابة الأربع ساعات أو أكثر)
+
تفتقر شبكة مطوري موزيلا إلى المقالات البسيطة حول استخدام تقنيات الويب (مثل لغة ترميز النص الفائق، صفحات الأنماط الانسيابية، الجافاسكربت ...إلخ). لدينا في الشبكة محتوى قديم يتطلب إعادة المراجعة والنشر. ادفع بمهاراتك إلى أقصى حد لتجعل تقنيات الويب قابلة للاستخدام من قبل المبتدئين.
+
إنشاء تمرينات، عينات برمجيّة، أو أدوات تعليم تفاعليّة (تستغرق العمليّة وقتاً غير محدد)
+
تحتاج جميع مقالاتنا التعليميّة إلى ما ندعوه بمواد "التعليم النشطة"، ﻷنَّ الناس يتعلمون الشيء بشكل أفضل عندما يقومون به بأنفسهم. هذه المواد هي تمرينات أو محتويات تفاعليّة تساعد المُستخدمين على تطبيق والتلاعب بالمفاهيم المشروحة في المقالة. يوجد العديد من الطرق الممكنة لصنع محتوى تفاعلي، من إنشاء عينات برمجيّة باستخدام JSFiddle أو أشباهه، إلى بناء محتوى تفاعلي مُتكامل بواسطة Thimble. أطلق العنان لإبداعك!
+
+ +

أنا مُدرِس

+ +

تملك شبكة مطوري موزيلا تاريخ طويل من النجاح التقني، ولكننا نفتقر للفهم العميق حول الطرق الفُضلى لتعليم المفاهيم للجدد. هنا حيث نحتاج إليك بصفتك مُدرِس. يمكنك مساعدتنا على الحرص على أنَّ موادنا التعليميّة توفِر مسار تعليمي جيد وعملي لقرائِنا.

+ +
+
قراءة ومراجعة المصطلحات في المسرد (تستغرق العمليّة قرابة الخمس عشرة دقيقة)
+
تَفَقَد المصطلحات في المسرد ولا تتردد عن إجراء أيّة تغييرات تراها ضروريّة. إذا أردت مناقشة المحتوى قبل تعديله، تواصل معنا على قائمتنا البريديّة أو على قناة IRC.
+
كتابة مصطلح جديد في المسرد (تستغرق العمليّة قرابة الساعة)
+
تعريفات المصطلحات البسيطة والواضحة، واللمحات البسيطة عن المفاهيم في المسرد هو قطعاً ما يلبي احتياجات المبتدئِين. يمكن أن تساعد خبرتك كمُدرِس على إنشاء تعريفات ممتازة للمصطلحات. لدينا العديد من المصطلحات الغير معرفة والتي تحتاج لاهتمامك. اختر واحداً وابدأ بشرحه.
+
إضافة رسوم توضيحيّة ومخططات للمقالات (تستغرق العمليّة قرابة الساعة)
+
كما تعلم، الرسوم التوضيحيّة (illustrations) هي جزء لا يقدر بثمن في أي محتوى تعليمي. تلك هي إحدى الأمور التي نفتقدها في الشبكة ومهاراتك يمكن أن تُحدِث فرقاً. تفقد المقالات التي تحوي نقصاً في المحتوى التوضيحي واختر مقالة ترغَب بإنشاء رسماً توضيحياً يشرحها.
+
قراءة ومراجعة المقالات التعليميّة (تستغرق العمليّة قرابة الساعتين)
+
هذه المهمة مشابهة لمراجعة المصطلحات في المسرد (انظر أعلاه)، ولكنها تتطلب وقتاً أطول لكون المقالات بالعادة أطول قليلاً.
+
كتابة مقالات تعليميّة جديدة (تستغرق العمليّة قرابة الأربع ساعات)
+
نحتاج إلى مقالات بسيطة وواضحة حول النظام الشابكي (Web ecosystem) والمواضيع الأخرى المتعلقة به. في حين أنَّ المقالات التعليميّة من الضروري أن تكون تدريسيّة بدلاً من أن تقوم بتغطيّة كل شيء حرفياً، فخبرتك بمعرفة الأشياء التي يجب شرحها وكيفيّة القيام بذلك ستكون مساعدة رائعة!
+
إنشاء تمرينات، اختبارات، أو أدوات تعليم تفاعليّة (يستغرق الأمر وقتاً غير محدد)
+
تحتاج جميع مقالاتنا التعليميّة إلى مواد "التعليم النشط". هذه المواد هي تمرينات أو محتويات تفاعليّة تساعد المُستخدمين على تعلم استخدام والتوسع في المفاهيم المشروحة في المقالة. يوجد العديد من الأمور التي يمكنك القيام بها هنا، من إنشاء اختبارات (quizzes)، إلى بناء محتوى تفاعلي مُتكامل بواسطة Thimble. أطلق العنان لإبداعك!
+
إنشاء مسارات تعليميّة (تستغرق العمليّة وقتاً غير محدد)
+
بغرض توفير دورات شاملة وتدريجيّة، نحتاج إلى تهيئة محتوانا في مسارات. هذه طريقة لجمع المحتوى الحالي وإيجاد المفقود لإنشاء مقالات تعليميّة عنه.
+
diff --git a/files/ar/orphaned/mdn/community/index.html b/files/ar/orphaned/mdn/community/index.html new file mode 100644 index 0000000000..5870ddd218 --- /dev/null +++ b/files/ar/orphaned/mdn/community/index.html @@ -0,0 +1,46 @@ +--- +title: انضم إلى مجتمع شبكة مطوري موزيلا +slug: MDN/Community +tags: + - حول الشبكة +translation_of: MDN/Community +--- +
{{MDNSidebar}}
{{IncludeSubNav("/ar/docs/MDN")}}
+ +
+

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

+
+ +

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

+ +
    +
  1.  أنشئ حساب في شبكة مطوري موزيلا.
    2. +
  2. انضم إلى المحادثات.
    3. +
  3. تابع ما يحدث.
    4. +
+ +

كيف يعمل المجتمع

+ +

يوجد أدناه مقالات أكثر تصف مجتمع شبكة مطوري موزيلا.

+ +
+
+
+
رُتب المجتمع
+
يوجد عدد من الرُتب في مجتمع شبكة مطوري موزيلا والتي تملك صلاحيات ومسؤوليات معينة.
+
سباقات التوثيق
+
تعد هذه المقالة دليل لتنظيم سباق توثيق. فهي تحتوي على نصائح من أناس قاموا بتنظيم سباقات توثيق، ليساعدوك على تنظيم واحد أيضاً.
+
تابع ما يحدث
+
يعمل مجتمع شبكة مطوري موزيلا على تقديم هذه الموسوعة لك. يوجد في هذه المقالة بعض الطرق لتبادل المعلومات حول ما نقوم به.  
+
+
+ +
+
+
محادثات مجتمع شبكة مطورين موزيلا
+
تُقام علمية التوثيق على موقع شبكة مطوري موزيلا أما المجتمع فيعمل من خلال مناقشات ومحادثات ولقاءات على الإنترنت.
+
العمل في المجتمع
+
الجزء الرئيسي من المساهمة في وثائق شبكة مطوري موزيلا هو معرفة كيفية العمل كجزء من المجتمع. تقدم هذه المقالة نصائح لتساعدك على تحقيق أقصى استفادة من تفاعلك مع كل من الكتاب الآخرين وفرق التطوير.
+
+
+
diff --git a/files/ar/orphaned/mdn/community/whats_happening/index.html b/files/ar/orphaned/mdn/community/whats_happening/index.html new file mode 100644 index 0000000000..818472e420 --- /dev/null +++ b/files/ar/orphaned/mdn/community/whats_happening/index.html @@ -0,0 +1,41 @@ +--- +title: اتبع ما يحدث +slug: MDN/Community/Whats_happening +translation_of: MDN/Community/Whats_happening +--- +
{{MDNSidebar}}
+ +

MDN is brought to you by the MDN community. Here are some ways to that we share information about what we're doing.

+ +

المدونات

+ +
+
Mozilla Hacks
+
+

أخبار حول وتغطية متعمقة لتقنيات وميزات الويب و Mozilla.

+
+
إشراك المطورين
+
تعزيز النشاط والمناقشة بين المجتمع المشترك في MDN في موزيلا.
+
+ +

Streams of ephemera

+ +
    +
  • @MozDevNet: صفحات مثيرة للاهتمام ، ودروس تعليمية ، وأدلة ، وطلبات التقديم ، وتحديثات هامة ، وغيرها من الأخبار حول شبكة مطور Mozilla.
    • +
  • @MozHacks: تغريدات حول تقنيات الويب الجديدة وتطبيقات HTML5 الرائعة وميزات Firefox.
    • +
  • Mozilla Hacks (YouTube)
    • +
+ +

لوحات الحالة ولوحات المعلومات

+ +

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

+ +

اجتماعات MDN

+ +

There are a number of regular meetings for tracking and sharing progress on various MDN-related projects and processes. These are described on the MDN meetings wiki page.

+ +

To get a general sense of what's happening, the best meeting to attend is the MDN Community meeting, which occurs every two weeks on Wednesdays, 10:00 US Pacific time (UTC-0800 October-March, UTC-0700 in March-October), in the #mdn IRC channel. See the MDN community meetings wiki page for agendas and notes from past meetings.

+ +

The Public MDN Events calendar contains MDN community meetings, doc sprints, and other MDN-related events. If you see a meeting which takes place in the "mdn" channel on our Vidyo videoconferencing system, you can join the conversation on the web.

+ +
 
diff --git a/files/ar/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/ar/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..5a0a255b5d --- /dev/null +++ b/files/ar/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,43 @@ +--- +title: كيف تنشئ حساباً على شبكة MDN +slug: MDN/Contribute/Howto/إنشاء_حساب_على_شبكة_مطوري_موزيلا +tags: + - MDN Account + - إنشاء حساب MDN + - حساب MDN +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}
+ +

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

+ +
+
+

لما تحتاج الشبكة لعنوان البريد الإلكتروني؟

+ +

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

+ +
إذا قمت بتسجيل الدخول بالشبكة باستخدام GitHub و استخدمت "عدم الرد (noreply)" على بريد الغيت هاب، فلن تتلقى رسائل (بما فيها الإشعارات عندما تشترك بصفحة) من الشبكة.
+
+
+ +
    +
  1. في أعلى كل صفحة ستجد زر تسجيل الدخول. اضغط على هذا الزر لعرض قائمة الخدمات التي ندعمها للمصادقة وتسجيل الدخول في الشبكة.
    2. +
  2. اختر إحدى تلك الخدمات. حالياً، غيت هاب هو الخيار الوحيد. لاحظ أنك إذا اخترت غيت هاب سيتم إضافة رابط لملفك الشخصي على الموقع في الشبكة.
    3. +
  3. اتبع الطلبات التي سيخبرك بها غيت هاب لتربط ملفك الشخصي بالشبكة.
    4. +
  4. حالما تعيدك خدمة المصادقة إلى الشبكة (والتي هي غيت هاب - إذا أخترتها -)، ستتمكن من إدخال اسم المستخدم وكلمة المرور، سيتم عرض اسم المستخدم خاصتك للعموم لشكرك على العمل الذي قمت به. فلا تستخدم البريد الإلكتروني كاسم مستخدم.
    5. +
  5. اضغط على إنشاء ملف شخصي خاص بي على الشبكة (أو ما يقابله بالمعنى).
    6. +
  6. إذا كان البريد الإلكتروني الذي حددته في الخطوة الرابعة ليس هو نفسه الذي استخدمته مع خدمة المصادقة، فيرجى التحقق من بريدك الإلكتروني والضغط على رابط التأكيد المُرسل إليك.
    7. +
+ +

هذا كل شيء! والآن أصبح لديك حساب على الشبكة، ويمكنك القيام بتعديلات مباشرةً!

+ +

يمكنك الضغط على اسمك في الشريط العلوي لرؤية ملفك الشخصي. من هناك، يمكنك الضغط على زرتحرير (أو ما يقابله بالمعنى) للقيام بتغييرات على ملفك الشخصي.

+ +
+

اسماء المستخدمين الجدد لا يمكن أن يحتوا على مسافات أو المحرف "@". تذكر أن اسم المستخدم الخاص بك سيظهر للعموم ليحدد الأعمال التي قمت بها.

+
+ +
 
diff --git a/files/ar/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/ar/orphaned/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..72774721a9 --- /dev/null +++ b/files/ar/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,67 @@ +--- +title: كيفية القيام بمراجعة فنية +slug: MDN/Contribute/Howto/Do_a_technical_review +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

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

+ +

توضح هذه المقالة كيفية إجراء مراجعة فنية ، مما يساعد على ضمان دقة محتوى MDN

+ +

ما هي المهمة؟

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

    كيفية تحرير مقالة ويكي على MDN.

    +
    • +
+
+
+

ما هي خطوات القيام بذلك؟

+
+
+
    +
  1. اختيار مقال للمراجعة: +
      +
    1. انتقل إلى قائمة الصفحات التي تحتاج إلى مراجعات فنية. هذا يسرد جميع الصفحات التي طلبت مراجعة فنية لها.
      2. +
    2. اختر صفحة موضوعك مألوفة لديك.
      3. +
    3. انقر على رابط المقال لتحميل الصفحة.
      4. +
    +
    2. +
  2. اقرأ المقال ، مع إيلاء اهتمام وثيق للتفاصيل الفنية: هل المقال صحيح؟ هل هناك شيء مفقود؟ لا تتردد في التبديل إلى صفحة مختلفة إذا كانت أول صفحة تختارها لا تناسبك. +
      +
    +
    3. +
  3. إذا لم تكن هناك أخطاء ، فلن تحتاج إلى تعديل المقالة لوضع علامة عليها كمراجعة. ابحث عن مربع "المراجعة السريعة" في الشريط الجانبي الأيسر من الصفحة. يسرد هذا المربع الأصفر أي مراجعات معلقة ويسمح لك بمسح علامة طلب المراجعة. يبدو مثل هذا إذا تم طلب مراجعة فنية:
    + Screenshot of the sidebar's box listing reviews that have been requested and allowing the flags to be changed.
    4. +
  4. +

    ألغ تحديد مربع الاختيار الفني ، وانقر فوق "حفظ".

    +
    5. +
  5. +

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

    + +
      +
    1. لتحرير الصفحة ، انقر فوق الزر "تحرير" بالقرب من أعلى الصفحة ؛ هذا يضعك في محرر MDN.
      2. +
    2. إصلاح أي معلومات فنية غير صحيح ، و / أو إضافة أي معلومات مهمة مفقودة.
      3. +
    3. أدخل تعليق المراجعة في أسفل المقال. هذه رسالة مختصرة تصف ما قمت به ، مثل "إكمال المراجعة الفنية". إذا قمت بتصحيح المعلومات ، فقم بتضمينها في تعليقك ، على سبيل المثال "المراجعة الفنية وأوصاف المعلمات الثابتة". يساعد ذلك المساهمين الآخرين ومحرري الموقع في معرفة ما الذي قمت بتغييره ولماذا. يمكنك أيضًا ذكر ما إذا كانت هناك وحدات بت محددة لم تشعر أنها مؤهلة للمراجعة
      4. +
    4. ألغ تحديد المربع الفني تحت المراجعة المطلوبة؟ أسفل منطقة تعليق المراجعة بالصفحة.
      5. +
    5. انقر على زر نشر.
      6. +
    +
    6. +
+ +

تهانينا! لقد أنهيت أول مراجعة فنية لك! شكرا لك على مساعدتك!

+
+
+ +
 
diff --git a/files/ar/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/ar/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..1ba5c000fd --- /dev/null +++ b/files/ar/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,58 @@ +--- +title: كيفية القيام بمراجعة تحريرية +slug: MDN/Contribute/Howto/Do_an_editorial_review +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

Editorial reviews consist of fixing typos, spelling, grammar, usage, or textual errors in an article. One does not have to be a writing expert to make valuable contributions to MDN's technical documentation, but articles still need copy-editing and proof-reading. This is done in an editorial review.

+ +

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

+ +
+
ما هي المهمة؟
+
+

تحرير النسخ وقراءة التجارب للمقالات التي تم تحديدها على أنها تتطلب مراجعة تحريرية.

+
+
+

أين يجب القيام به؟

+
+
+

ضمن مقالات محددة تم تعليمها على أنها تتطلب مراجعة افتتاحية.

+
+
ما الذي تحتاج إلى معرفته لأداء المهمة؟
+
You need to have good English grammar and spelling skills. An editorial review is about ensuring that the grammar, spelling, and wording are correct and make sense, and that the MDN writing style guide is followed.
+
+

ما هي خطوات القيام بذلك؟

+
+
+
    +
  1. Pick an article to review: +
      +
    1. Go to the list of articles needing editorial review. This lists all the pages for which an editorial review has been requested.
      2. +
    2. Click on the article link to load the page.
      + Note: This listing is generated automatically but infrequently, so some articles appear on the list that no longer need editorial review. If the article you picked does not display a banner that says "This article needs an editorial review", skip that article and pick a different one.
      3. +
    +
    2. +
  2. Read the article carefully, looking out for typos, spelling, grammar, or usage errors. Don't hesitate to switch to a different page if the first one you choose doesn't suit you.
    3. +
  3. If there are no errors, you don't need to edit the article to mark it as reviewed. Look for the "quick review" box in the left sidebar of the page:
    + Screenshot of the editorial review request sidebar box
    4. +
  4. Deselect the Editorial box and click Save.
    5. +
  5. If you find errors that need to be corrected: +
      +
    1. Click the Edit button near the top of the page; this brings you into the MDN editor.
      2. +
    2. Correct any typos and spelling, grammar, or usage errors you find. You don't have to fix everything to be useful, but be sure to leave the editorial review request in place if you don't feel reasonably sure that you've done a complete review of the entire article.
      3. +
    3. Enter a Revision Comment at the bottom of the article; something like 'Editorial review: fixed typos, grammar & spelling.' This lets other contributors and site editors know what you changed and why.
      4. +
    4. Deselect the Editorial box under Review Needed?. This is located just below the Revision Comment section of the page.
      5. +
    5. Click the Publish button.
      6. +
    +
    6. +
+ +
+

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

+
+
+
diff --git a/files/ar/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/ar/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html new file mode 100644 index 0000000000..7f1598cb01 --- /dev/null +++ b/files/ar/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -0,0 +1,116 @@ +--- +title: How to set the summary for a page +slug: MDN/Contribute/Howto/Set_the_summary_for_a_page +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

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

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

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

+ + + +

الملخص الافتراضي

+ +

تعتمد الصفحات التي لا تحتوي أي ملخص على الملخص الافتراضي.
+ بشكل افتراضي يعتبر ملخص الصفحة هو أول قسم من الصفحة مكتوب ب 
+ {{Glossary("HTML")}}
+ لذلك من الممكن أي يكون الملخص عبارة عن نص وليس عنوان. 

+ +

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

+ +
    +
  • النص الأول يعتبر شيء جانبي أو ملاحظة ما, ولا يقدم أي مراجعة كاملة للصفحة
    • +
  • أول نص مكتوب يعتبر نص محتوى ولكن لا يقدم مراجعة كاملة لمحتوى المقالة
    • +
  • النص طويل أو قصير للغاية
    • +
+ +

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

+ +

Setting the summary

+ +

Let's look at how to go about setting a page's summary.

+ +
+
What is the task?
+
Marking the text within a page that should be used as its summary in other contexts; if appropriate text isn't already available, this task might include writing a small amount of appropriate text.
+
Where does it need to be done?
+
On pages that lack a summary, have a summary that isn't helpful, or have a summary that unnecessarily fails to meet recommended guidelines.
+
What do you need to know to do the task?
+
Ability to use the MDN editor; good English writing skills; enough familiarity with the topic of the page to write a good summary.
+
What are the steps to do it?
+
+ +
    +
  • Pick a page on which to set the summary. If you already have one in mind, great! You can skip to step 2; otherwise, to find a page to fix: +
      +
    1. In the MDN documentation status page, click the link under Sections for a topic that you know something about (for example, HTML):
      +
      2. +
    2. On the topic's documentation status page, click the Pages header in the Summary table. This takes you to an index of all the pages in that topic section; it shows the page links in the left column, and the tags and summaries in the right column:
      +
      3. +
    3. Pick a page that is missing a summary, or that has a poor summary:
      +
      4. +
    4. Click the link to go to that page.
      5. +
    +
    • +
+ +
+
+
    +
  1. Once on the page to which you wish to add a summary, click Edit to open the page in the MDN editor. See the Guide to the MDN editor if you need information about using the editor.
    2. +
  2. Look for a sentence or two that works as a summary, even if taken out of context. If needed, edit the existing content to create or modify the text until you can select a sentence or two that make a good summary. See {{anch("Crafting a good summary")}} for help selecting or creating an appropriate summary.
    3. +
  3. Select the text to be used as a summary.
    4. +
  4. In the Styles widget of the editor toolbar, select SEO Summary. In the page source, this creates a {{HTMLElement("span")}} element with class="seoSummary" around the selected text.
    +
    5. +
  5. Save your changes with a revision comment. The comment is optional, but we encourage you to provide one. It makes it easier for other people to track the changes. Something like "Set SEO summary" is enough.
    6. +
+
+
+ +

Crafting a good summary

+ +

The summary is used in many different scenarios, including these:

+ +
    +
  • As the description of the article on search results pages on MDN as well as on Google and other search engines.
    • +
  • As the description of the article in menus and topic landing pages on MDN itself.
    • +
  • In contextual tooltips when the user hovers the cursor over links to articles on MDN.
    • +
+ +

It's important to keep these scenarios in mind while composing a summary. In order to help ensure that the summary works well in all of these situations, please try to follow the guidelines below.

+ +
+

Note: Unless otherwise specifically stated, these are guidelines, not hard and fast rules. While you should do what you can to meet these guidelines, sometimes there are exceptions that can't be  avoided.

+
+ +
    +
  • The summary should indicate both the topic and the type of page. "In this guide, we'll learn to use the Intersection Observer API to create responsive web apps that only update animations that are currently visible on screen." is 160 characters, for example, and explains what technology is being covered, how the technology is being used, and that the article is a tutorial.
    • +
  • You can choose text from anywhere within any paragraph in the article, but it should ideally be within the first paragraph (or the second, in some cases). If the point of the article isn't made in those paragraphs, the introduction of the page probably needs rewriting.
    • +
  • The summary must still fit well within the context of the article's body, since it is in fact part of the article.
    • +
  • It's okay to have links to other pages within the summary. These are automatically removed before being given to search engines, and do not count against you. They're also removed before the summary is used as a tooltip. Links are not removed from the summary when used as a page description within menus and landing pages on MDN, which is really convenient as well.
    • +
  • The summary should include an appropriate selection of key terms likely to be searched for by someone looking for information contained on the page. In the example case about the Intersection Observer API, those keywords include the API name, "animations", "visible", "responsive", and "web apps", possibly among others.
    • +
  • To optimize the Search Engine Optimization (SEO) value gained from a summary, it should be no shorter than 150 characters long.
    • +
  • Since a search engine result page (SERP) typically doesn't show more than 160 characters of the summary, you should avoid summaries longer than that. Having your text unceremoniously chopped off can dissuade people from clicking the link.
    • +
  • It might be tempting to write a great summary that doesn't work on page, then hide the summary inside a block with the "hidden" class on it. But this doesn't work, because search engines ignore text that's not visible to the user.
    • +
+ +

Think of the summary as being akin to the {{interwiki("wikipedia", "blurb")}} on the back or inside the front cover of a book. This short text has to catch the reader's attention quickly and encourage them to read on.

+ +

It can be a little tricky to write an summary that works well both for search engine result pages and within the article text itself, but currently MDN doesn't offer a way to create an SEO summary separate from the page content, so do the best you can.

+ +

See also

+ + diff --git a/files/ar/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/ar/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html new file mode 100644 index 0000000000..1c993c9677 --- /dev/null +++ b/files/ar/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html @@ -0,0 +1,111 @@ +--- +title: كيفية كتابة مقال لمساعدة الناس على التعرف على شبكة الإنترنت +slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +--- +
{{MDNSidebar}}
+ +

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

+ +

يشرح هذا المقال كيفية كتابة صفحات للمنطقة التعليمية.

+ +

How to write a Learning Area article

+ +

To start contributing your knowledge, simply click the big green button, then follow the five steps below. If you're looking for ideas, please take a look at the our team Trello board!

+ + + +
Write a new learning article + +
+
+ + + +

This article might not end up in exactly the right place, but at least it's on MDN. If you need to talk to someone about getting it moved to the right place, please  Contact us.

+ +

Step 1: Write a two-liner

+ +

Your article's first sentence needs to summarize what subject you're going to cover, and the second one should go into a few more specifics of the items that you'll put in the article. For example:

+ +
+

Whereas {{glossary("HTML")}} files contain structured content, {{Glossary("CSS")}}, another major Web technology, makes the content look the way you want. In this article we are going to cover how this technology works, and how to write your own basic example.

+
+ +

Note how the example briefly explains that CSS is a core Web technology used to style pages. That's enough for the reader to get a pretty good idea what the article covers.

+ +

Because Learning Area articles primarily target beginners, each article should cover one straightforward topic so as not to overwhelm the reader with too much new information. If you can't summarize the article in one sentence, you might be trying to do too much in one article!

+ +

Step 2: Add a top box

+ +

Add a top box to help readers understand where they are in the learning process.  Here's an example of a top box from "Understanding URLs and their structure". You can use this article as an model when writing your own.

+ + + + + + + + + + + + +
Prerequisites:You need to first know how the Internet works, what a Web server is, and the concepts behind links on the web.
Objective:You will learn what a URL is and how it works on the Web.
+ +
+
Prerequisites
+
What must the reader already know to follow the article? When possible, make each prerequisite a link to another Learning Area article covering the concept (unless it's a really basic article that doesn't require prior knowledge).
+
Objectives
+
This section briefly states what the reader will learn over the course of the article. This is a bit different than the one-liner; the one-liner summarizes the topic of the article, while the objectives section specifically lays out what the reader can expect to accomplish over the course of the article.
+
+ +
+

Note: To create this table, you can either copy and paste the example table above, or use MDN's editor's table tool. If you choose to use the table tool, you need to specifically add the learn-box CSS class in addition to the default standard-table class. To do this, when you create or edit the table's properties, go to the "Advanced" panel and set the Stylesheet Classes field to "standard-table learn-box".

+
+ +

Step 3: Write a full description

+ +

Next, write a longer description that provides a more thorough overview of the article highlighting the most important concepts. Don't forget to explain why the reader should take the time to learn this topic and read your article!

+ +

Step 4: Dig deeper

+ +

When you're done with all that, you can finally dive deeply into the topic. You can structure this part of your article however you like (although feel free to consult our style guide). This is your chance to shine! Go into detail explaining the topic you're writing about. Provide links to the full reference documentation, explain how the technology works in detail, provide syntax and usage details, and so forth. It's up to you!

+ +

As a guide, here are some writing tips for beginners:

+ +
    +
  • Focus on a single topic. If you feel like you need to cover other topics, it means either you're missing a prerequisite article, or you need to break up your article into more than one.
    • +
  • Use simple English. Avoid technical terms when you can, or at least define them and link to their glossary entries where applicable.
    • +
  • Include straightforward examples to make the theoretical concepts easier to grasp. Many people learn best by example. Rather than writing academic papers, we want beginners to follow the text readily.
    • +
  • Visual aids often can make things easier to digest and carry extra information, so feel free to use images, diagrams, videos, and tables. If you're using diagrams or charts that include text, we encourage you to use {{Glossary("SVG")}} so our translation teams can localize the text.
    • +
+ +

Have a look at the first few sections of our Functions — reusable blocks of code article for some good descriptive sections.

+ +

Step 5: Provide "active learning" material

+ +

To illustrate the article and help the reader better understand what they're learning, be sure to provide exercises, tutorials, and tasks to accomplish. By having them actively and practically using and experimenting with the concepts your article explains, you can help "lock" the information into their brains.

+ +

You can choose to include the examples directly in the page as live samples or link to them if they don't really work as a live sample. If you're interested in helping create these valuable materials, please read the article Create an interactive exercise to help learning the Web.

+ +

If you can't provide links to existing active learning materials (you don't know of any or don't have time to create them), you should add the tag {{Tag("NeedsActiveLearning")}} to the article. That way other contributors can find articles that need active learning materials and help you come up with them.

+ +

Have a look at Active learning: selecting different elements for a live interactive learning exercise, or Active learning: Playing with scope for a different style of exercise that calls upon them to download a template locally and modify it following the provided steps.

+ +

Step 6: Get the article reviewed, and put into the Learning Area navigation menu

+ +

After you've written your article, let us know so we can have a look at it, do a review, and suggest improvements. Again, see our Contact us section for the best ways to get in touch.

+ +

The last step is adding your article to the Learning Area main navigation menu. This menu is generated by the LearnSidebar macro, and requires special editing privileges, so talk to one of our team about your contribution.

+ +

For now, add the menu to your page by adding the macro call \{{LearnSidebar}} into a paragraph at the top of your page.

+ +
    +
+ +

Suggested articles

+ +

So you want to contribute but you're not sure what to write about?

+ +

The Learning Area team maintains a Trello board with ideas of articles to write. Feel free to pick one and get to work!

diff --git a/files/ar/orphaned/mdn/tools/page_deletion/index.html b/files/ar/orphaned/mdn/tools/page_deletion/index.html new file mode 100644 index 0000000000..14b1632e0a --- /dev/null +++ b/files/ar/orphaned/mdn/tools/page_deletion/index.html @@ -0,0 +1,21 @@ +--- +title: Deleting pages +slug: MDN/Tools/Deleting_pages +tags: + - Guide + - MDN Meta + - Page-level + - Tools +translation_of: MDN/Tools/Page_deletion +--- +
{{MDNSidebar}}

Only MDN administrators are able to delete pages. This article explains how to request that a page be removed from MDN.

+ +

To arrange for a page to be deleted, you should do the following:

+ +
    +
  1. Do not erase or change the page content. We want to have the record of the page as it was at deletion time.
    2. +
  2. Add the tag "junk" to the page. Do not remove other tags.
    3. +
  3. If the page is particularly urgently in need of deletion (for example, its content is inappropriate, offensive, or technically dangerous), notify an MDN administrator.
    4. +
+ +

An administrator will delete the page when possible, after confirming that deletion is appropriate

diff --git "a/files/ar/orphaned/\330\243\330\255\330\257\330\247\330\253_\331\205\331\203\330\252\330\250\330\251_jquery/index.html" "b/files/ar/orphaned/\330\243\330\255\330\257\330\247\330\253_\331\205\331\203\330\252\330\250\330\251_jquery/index.html" new file mode 100644 index 0000000000..bd2307f8ce --- /dev/null +++ "b/files/ar/orphaned/\330\243\330\255\330\257\330\247\330\253_\331\205\331\203\330\252\330\250\330\251_jquery/index.html" @@ -0,0 +1,63 @@ +--- +title: أحداث مكتبة jQuery +slug: أحداث_مكتبة_jQuery +--- +

تعريف

+

أحداث مكتبة jQuery تقوم بربط الدوال مع عنصر معين.

+

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

+

أحداث مكتبة jQuery

+

حدث blur()

+

يقوم الحدث blur() بمعالجة دالة ما عندما يفقد مربع إدخال النصوص المحدد إمكانيته على الإدخال,مثال:

+
<script src="http://code.jquery.com/jquery-latest.js"></script>
+<script>
+$(document).ready(function() {
+$("#text").blur(function() {
+$(this).css("background-color","orange");
+});
+});
+</script>
+<input type="text" id="text">
+
+

إنتقل إلى الرابط التالي لتشاهد كيف يعمل هذا الحدث: http://jsbin.com/tibequrucelu/1/edit

+
+

حدث change()

+

يقوم الحدث change() بمعالجة دالة ما عندما يتغير محتوى مربع إدخال النصوص,مثال:

+
<script src="http://code.jquery.com/jquery-latest.js"></script>
+<script>
+$(document).ready(function() {
+$("#text").change(function() {
+alert("
لقد تغير محتوى النص
");
+});
+});
+</script>
+<input type="text" id="text">
+
+

انتقل إلى الرابط التالي لتشاهد كيف يعمل هذا الحدث: http://jsbin.com/getigucoqeba/1/edit

+
+

حدث click()

+

يقوم حدث click() بمعالجة دالة ما عندما يتم الضغط بزر الفأرة الأيسر على العنصر المحدد,مثال:

+
<script src="http://code.jquery.com/jquery-latest.js"></script>
+<script>
+$(document).ready(function() {
+$("#button").click(function() {
+alert("
لقد تم ضغط الزر
");
+});
+});
+</script>
+<input type="button" id="button" value="
اضغط هنا
">
+
+

انتقل إلى الرابط التالي لتشاهد كيف يعمل هذا الحدث: http://jsbin.com/radepuyuwexe/1/edit

+
+

حدث dblclick()

+

يقوم حدث dblclick() بمعالجة دالة ما عندما يتم الضغط بشكل مزدوج بإستخدام زر الفأرة الأيسر على العنصر المحدد,مثال:

+
<script src="http://code.jquery.com/jquery-latest.js"></script>
+<script>
+$(document).ready(function() {
+$("#button").dblclick(function() {
+alert("
لقد تم ضغط الزر بشكل مزدوج
");
+});
+});
+</script>
+<input type="button" id="button" value="
اضغط هنا
">
+
+

انتقل إلى الرابط التالي لتشاهد كيف يعمل هذا الحدث: http://jsbin.com/delazakoloye/1/edit

diff --git "a/files/ar/orphaned/\331\205\331\203\330\252\330\250\330\251_\330\254\331\212_\331\203\331\210\331\212\330\261\331\212/index.html" "b/files/ar/orphaned/\331\205\331\203\330\252\330\250\330\251_\330\254\331\212_\331\203\331\210\331\212\330\261\331\212/index.html" new file mode 100644 index 0000000000..52d56021d4 --- /dev/null +++ "b/files/ar/orphaned/\331\205\331\203\330\252\330\250\330\251_\330\254\331\212_\331\203\331\210\331\212\330\261\331\212/index.html" @@ -0,0 +1,31 @@ +--- +title: مكتبة jQuery +slug: مكتبة_جي_كويري +--- +

مقدمة

+

jQuery هي عبارة عن مكتبة مكتوبة بلغة JavaScript.

+

تقوم مكتبة jQuery بإزالة التعقيدات من برمجة JavaScript.

+

أهمية مكتبة jQuery

+

تقوم مكتبة jQuery بإختصار شيفرات JavaScript الطويلة.

+

تخيل أنه عوضاً عن كتابة:

+
document.getElementById(Element_Id);
+
+

يمكنك الإكتفاء بكتابة:

+
$(Element_Id)
+
+

مكونات مكتبة jQuery

+

تتألف مكتبة jQuery من المكونات التالية:

+

النواة:

+

بما أن مكتبة jQuery مكتوبة بشكل كامل بلغة JavaScript,فإن نواتها مكونة من لغة JavaScript.

+

الأحداث:

+

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

+

التأثيرات:

+

تتمتع مكتبة jQuery بمجموعة كبيرة من التأثيرات كالإنزلاق و الإختفاء و التحريك...

+

الأجاكس:

+

تتمتع مكتبة jQuery بقدرة على تقليص كود الأجاكس مما يوفر الكثير من الوقت في كتابته.

+

مميزات مكتبة jQuery

+

تتمتع مكتبة jQuery بمجموعة كبيرة من المميزات مثل:الحجم الصغير,تقليص حجوم شيفرات JavaScript,مجانية و مفتوحة المصدر.

+

مشاكل مكتبة jQuery

+

لا تدعم مكتبة jQuery المتصفحات القديمة و لا تعمل جيداً مع الإتصالات البطيئة.

+

روابط ذات فائدة:

+

الموقع الرسمي

diff --git "a/files/ar/orphaned/\331\210\330\247\330\265\331\201\330\251_spellcheck_\330\247\331\204\330\254\330\257\331\212\330\257\330\251_\331\201\331\212_html5/index.html" "b/files/ar/orphaned/\331\210\330\247\330\265\331\201\330\251_spellcheck_\330\247\331\204\330\254\330\257\331\212\330\257\330\251_\331\201\331\212_html5/index.html" new file mode 100644 index 0000000000..2e2626d616 --- /dev/null +++ "b/files/ar/orphaned/\331\210\330\247\330\265\331\201\330\251_spellcheck_\330\247\331\204\330\254\330\257\331\212\330\257\330\251_\331\201\331\212_html5/index.html" @@ -0,0 +1,65 @@ +--- +title: واصفة SpellCheck الجديدة في HTML5 +slug: واصفة_SpellCheck_الجديدة_في_HTML5 +--- +
+

مقدمة.

+

تستخدم واصفة SpellCheck في التحقق من أن العنصر الذي يحتوي هذه الواصفة خالي من الأخطاء الإملائية و النحوية.

+

الإستعمال.

+

تستعمل واصفة SpellCheck لتحديد إذا ما كان مصحح الأخطاء الإملائية للعنصر فعال أو لا.

+

يمكن إستعمالها في الفقرات القابلة للتحرير,مربعات إدخال النصوص,أو مربعات الحوار.

+

التوافق مع العناصر.

+

إن واصفة SpellCheck متوافقة مع كافة العناصر,و يمكن إضافتها إلى أي عنصر داخل معايير HTML.

+
+ إن واصفة SpellCheck جديدة في HTML5.
+

التأثير الظاهري للواصفة على الصفحة.

+

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

+

الشكل العام لصيغة الواصفة.

+ 
<p spellcheck="true">This Is A Paragraph</p>
+
+<p spellcheck="false">This Is Another Paragraph</p>
+
+

إذا أخذت الواصفة القيمة المنطقية true,فإن مصحح الأخطاء الهجائية للعنصر سيعمل,و إذا أخذت الواصفة القيمة المنطقية false,فإن مصحح الأخطاء الهجائية للعنصر لن يعمل,و في هذه الحالة لا يوجد داعي لتضمين هذه الواصفة في العنصر

+
+ لا تدعم واصفة SpellCheck كل اللغات,من أمثلة اللغات غير المدعومة:اللغة العربية.
+

أمثلة:

+

في المثال التالي,سوف تتحقق واصفة SpellCheck من وجود أخطاء إملائية في مربع إدخال النصوص.

+

هذه هي الشيفرة:

+ 
<textarea rows="10" cols="40" spellcheck="true"></textarea>
+
+

الآن شاهد في الأسفل كيف أن الكلمات التي تحتوي أخطاء هجائية سيظهر تحتها خط أحمر:

+
+
+

التوافق مع المتصفحات.

+ + + + + + + + + + + + + + + + + + +
+ دعم المتصفحات لواصفة SpellCheck
Internet Explorer 10Google ChromeMozzila FirefoxOperaSafari
مدعومةمدعومةمدعومةمدعومةمدعومة
+

إستعمال الواصفة في JavaScript.

+

يمكن إستخدام هذه الواصفة في نصوص JavaScript.

+

الصيغة العامة لتشغيل أو إيقاف تشغيل واصفة SpellCheck بإستخدام JavaScript:

+ 
document.getElementById(Some_Id).spellCheck=true; //تشغيل مصحح الأخطاء الهجائية للعنصر المحدد.
+document.getElementById(Some_Id).spellCheck=false; //إيقاف تشغيل مصحح الأخطاء الهجائية للعنصر المحدد.
+
+

توافق الواصفة SpellCheck مع الكائنات الأخرى في JavaScript

+

بما أن الواصفة SpellCheck في JavaScript هي من النوع العام,فهي متوافقة مع كل الكائنات الأخرى في JavaScript.

+

روابط ذات صلة بالموضوع:

+ تخصيص واصفة SpellCheck في معايير منظمة W3C.
+

 

diff --git "a/files/ar/orphaned/\331\210\330\247\330\265\331\201\330\251_\330\247\331\204\330\271\331\206\331\210\330\247\331\206_\331\201\331\212_html/index.html" "b/files/ar/orphaned/\331\210\330\247\330\265\331\201\330\251_\330\247\331\204\330\271\331\206\331\210\330\247\331\206_\331\201\331\212_html/index.html" new file mode 100644 index 0000000000..5e2d92d2a0 --- /dev/null +++ "b/files/ar/orphaned/\331\210\330\247\330\265\331\201\330\251_\330\247\331\204\330\271\331\206\331\210\330\247\331\206_\331\201\331\212_html/index.html" @@ -0,0 +1,61 @@ +--- +title: واصفة العنوان في HTML +slug: واصفة_العنوان_في_HTML +--- +
+

مقدمة.

+

تستخدم واصفة العنوان في إظهار معلومات إضافية حول عنصر ما.

+

الإستعمال.

+

يمكن إستخدام واصفة العنوان في إضافة توضيحات حول عنصر ما.

+

التوافق مع العناصر.

+

إن واصفة العنوان متوافقة مع كافة العناصر في HTML.

+

التأثير الظاهري للواصفة على الصفحة.

+

معظم المتصفحات سوف تعرض هذه الأداة كمربع تلميحات يظهر عندما يتم تحريك مؤشر الفأرة فوق العنصر.

+

الشكل العام لصيغة الواصفة.

+
+ 
<element title="معلومات يتم إظهارها...">
+
+
+

أمثلة:

+

في المثال التالي,عندما يقوم المستخدم بتحريك مؤشر الفأرة فوق الرابط,سيظهر له تلميح.

+

هذه هي الشيفرة:

+
+ 
<a href="http://developer.mozzila.org" title="زوروا موقع شبكة مطوري موزيلا">Mozzila Developer Network</a>
+
+
+

الآن حرك مؤشر الفأرة فوق الرابط أدناه و شاهد ظهور مربع تلميح يحتوي الكتابة"زوروا موقع شبكة مطوري موزيلا.":

+ Mozzila Developer Network +

التوافق مع المتصفحات.

+
+ + + + + + + + + + + + + + + + + + +
+ دعم المتصفحات لواصفة title
Internet ExplorerGoogle ChromeMozzila FirefoxOperaSafari
مدعومةمدعومةمدعومةمدعومةمدعومة
+

إستعمال الواصفة في JavaScript.

+

يمكن إستخدام هذه الواصفة في JavaScript.

+

الصيغة العامة لإستخدام واصفة العنوان في JavaScript:

+
+
document.getElementById(Some_Id).title="Your Text Goes Here..."; //تعيين نص ما ليتم عرضه.
+document.getElementById(Some_Id).title=null; //عدم عرض أي نص.
+
+
+

توافق واصفة العنوان مع الكائنات الأخرى في JavaScript.

+

بما أن واصفة العنوان من النوع العام,فهي متوافقة مع جميع كائنات JavaScript.

+

روابط ذات صلة بالموضوع:

+تخصيص واصفة العنوان في معايير منظمة W3C. diff --git a/files/ar/web/api/geolocation/using_geolocation/index.html b/files/ar/web/api/geolocation/using_geolocation/index.html deleted file mode 100644 index a27275b2b5..0000000000 --- a/files/ar/web/api/geolocation/using_geolocation/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: Using geolocation -slug: Web/API/Geolocation/Using_geolocation -translation_of: Web/API/Geolocation_API ---- -

The geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.

- -

The geolocation object

- -

The geolocation API is published through the {{domxref("navigator.geolocation")}} object.

- -

If the object exists, geolocation services are available. You can test for the presence of geolocation thusly:

- -
if ("geolocation" in navigator) {
-  /* geolocation is available */
-} else {
-  /* geolocation IS NOT available */
-}
-
- -
-

Note: On Firefox 24 and older versions, "geolocation" in navigator always returned true even if the API was disabled. This has been fixed with Firefox 25 to comply with the spec. ({{bug(884921)}}).

-
- -

Getting the current position

- -

To obtain the user's current location, you can call the {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}} method. This initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date information. When the position is determined, the defined callback function is executed. You can optionally provide a second callback function to be executed if an error occurs. A third, optional, parameter is an options object where you can set the maximum age of the position returned, the time to wait for a request, and if you want high accuracy for the position.

- -
-

Note: By default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tries to answer as fast as possible with a low accuracy result. It is useful if you need a quick answer regardless of the accuracy. Devices with a GPS, for example, can take a minute or more to get a GPS fix, so less accurate data (IP location or wifi) may be returned to {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

-
- -
navigator.geolocation.getCurrentPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});
- -

The above example will cause the do_something() function to execute when the location is obtained.

- -

Watching the current position

- -

If the position data changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information. This is done using the {{domxref("Geolocation.watchPosition()","watchPosition()")}} function, which has the same input parameters as {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. The callback function is called multiple times, allowing the browser to either update your location as you move, or provide a more accurate location as different techniques are used to geolocate you. The error callback function, which is optional just as it is for {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, can be called repeatedly.

- -
-

Note: You can use {{domxref("Geolocation.watchPosition()","watchPosition()")}} without an initial {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} call.

-
- -
var watchID = navigator.geolocation.watchPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});
- -

The {{domxref("Geolocation.watchPosition()","watchPosition()")}} method returns an ID number that can be used to uniquely identify the requested position watcher; you use this value in tandem with the {{domxref("Geolocation.clearWatch()","clearWatch()")}} method to stop watching the user's location.

- -
navigator.geolocation.clearWatch(watchID);
-
- -

Fine tuning response

- -

Both {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()","watchPosition()")}} accept a success callback, an optional error callback, and an optional PositionOptions object.

- -

{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}

- -

A call to {{domxref("Geolocation.watchPosition()","watchPosition")}} could look like:

- -
function geo_success(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-}
-
-function geo_error() {
-  alert("Sorry, no position available.");
-}
-
-var geo_options = {
-  enableHighAccuracy: true,
-  maximumAge        : 30000,
-  timeout           : 27000
-};
-
-var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
- -

A demo of watchPosition in use: http://www.thedotproduct.org/experiments/geo/
- 

- -

Describing a position

- -

The user's location is described using a Position object referencing a Coordinates object.

- -

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}

- -

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}

- -

Handling errors

- -

The error callback function, if provided when calling getCurrentPosition() or watchPosition(), expects a PositionError object as its first parameter.

- -
function errorCallback(error) {
-  alert('ERROR(' + error.code + '): ' + error.message);
-};
-
- -

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}

- -

Geolocation Live Example

- - - -

HTML Content

- -
<p><button onclick="geoFindMe()">Show my location</button></p>
-<div id="out"></div>
-
- -

JavaScript Content

- -
function geoFindMe() {
-  var output = document.getElementById("out");
-
-  if (!navigator.geolocation){
-    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
-    return;
-  }
-
-  function success(position) {
-    var latitude  = position.coords.latitude;
-    var longitude = position.coords.longitude;
-
-    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
-
-    var img = new Image();
-    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
-
-    output.appendChild(img);
-  };
-
-  function error() {
-    output.innerHTML = "Unable to retrieve your location";
-  };
-
-  output.innerHTML = "<p>Locating…</p>";
-
-  navigator.geolocation.getCurrentPosition(success, error);
-}
-
- -

Live Result

- -

{{EmbedLiveSample('Geolocation_Live_Example', 350, 410)}}

- -

Prompting for permission

- -

Any add-on hosted on addons.mozilla.org which makes use of geolocation data must explicitly request permission before doing so. The following function will request permission in a manner similar to the automatic prompt displayed for web pages. The user's response will be saved in the preference specified by the pref parameter, if applicable. The function provided in the callback parameter will be called with a boolean value indicating the user's response. If true, the add-on may access geolocation data.

- -
function prompt(window, pref, message, callback) {
-    let branch = Components.classes["@mozilla.org/preferences-service;1"]
-                           .getService(Components.interfaces.nsIPrefBranch);
-
-    if (branch.getPrefType(pref) === branch.PREF_STRING) {
-        switch (branch.getCharPref(pref)) {
-        case "always":
-            return callback(true);
-        case "never":
-            return callback(false);
-        }
-    }
-
-    let done = false;
-
-    function remember(value, result) {
-        return function() {
-            done = true;
-            branch.setCharPref(pref, value);
-            callback(result);
-        }
-    }
-
-    let self = window.PopupNotifications.show(
-        window.gBrowser.selectedBrowser,
-        "geolocation",
-        message,
-        "geo-notification-icon",
-        {
-            label: "Share Location",
-            accessKey: "S",
-            callback: function(notification) {
-                done = true;
-                callback(true);
-            }
-        }, [
-            {
-                label: "Always Share",
-                accessKey: "A",
-                callback: remember("always", true)
-            },
-            {
-                label: "Never Share",
-                accessKey: "N",
-                callback: remember("never", false)
-            }
-        ], {
-            eventCallback: function(event) {
-                if (event === "dismissed") {
-                    if (!done) callback(false);
-                    done = true;
-                    window.PopupNotifications.remove(self);
-                }
-            },
-            persistWhileVisible: true
-        });
-}
-
-prompt(window,
-       "extensions.foo-addon.allowGeolocation",
-       "Foo Add-on wants to know your location.",
-       function callback(allowed) { alert(allowed); });
-
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatGeckoDesktop("1.9.1")}}[1]910.60
- {{CompatNo}} 15.0
- 16.0		5
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("4")}}1.0.1{{CompatUnknown}}10.60
- {{CompatNo}} 15.0
- 16.0		{{CompatUnknown}}
-
- -

[1] Firefox includes support for locating you based on your WiFi information using Google Location Services. In the transaction between Firefox and Google, data is exchanged including WiFi Access Point data, an access token (similar to a 2 week cookie), and the user's IP address. For more information, please check out Mozilla's Privacy Policy and Google's Privacy Policy covering how this data can be used.

- -

Firefox 3.6 (Gecko 1.9.2) added support for using the GPSD (GPS daemon) service for geolocation on Linux.

- -

See also

- - diff --git a/files/ar/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html b/files/ar/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html deleted file mode 100644 index d696d6c9f2..0000000000 --- a/files/ar/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Using the Geolocation API -slug: Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API -translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API ---- -
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
- -

The Geolocation API is used to retrieve the user's location, so that it can for example be used to display their position using a mapping API. This article explains the basics of how to use it.

- -

The geolocation object

- -

The Geolocation API is available through the {{domxref("navigator.geolocation")}} object.

- -

If the object exists, geolocation services are available. You can test for the presence of geolocation thusly:

- -
if ("geolocation" in navigator) {
-  /* geolocation is available */
-} else {
-  /* geolocation IS NOT available */
-}
-
- -

Getting the current position

- -

To obtain the user's current location, you can call the {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}} method. This initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date information. When the position is determined, the defined callback function is executed. You can optionally provide a second callback function to be executed if an error occurs. A third, optional, parameter is an options object where you can set the maximum age of the position returned, the time to wait for a request, and if you want high accuracy for the position.

- -
-

Note: By default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tries to answer as fast as possible with a low accuracy result. It is useful if you need a quick answer regardless of the accuracy. Devices with a GPS, for example, can take a minute or more to get a GPS fix, so less accurate data (IP location or wifi) may be returned to {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

-
- -
navigator.geolocation.getCurrentPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});
- -

The above example will cause the do_something() function to execute when the location is obtained.

- -

Watching the current position

- -

If the position data changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information. This is done using the {{domxref("Geolocation.watchPosition()","watchPosition()")}} function, which has the same input parameters as {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. The callback function is called multiple times, allowing the browser to either update your location as you move, or provide a more accurate location as different techniques are used to geolocate you. The error callback function, which is optional just as it is for {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, can be called repeatedly.

- -
-

Note: You can use {{domxref("Geolocation.watchPosition()","watchPosition()")}} without an initial {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} call.

-
- -
var watchID = navigator.geolocation.watchPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});
- -

The {{domxref("Geolocation.watchPosition()","watchPosition()")}} method returns an ID number that can be used to uniquely identify the requested position watcher; you use this value in tandem with the {{domxref("Geolocation.clearWatch()","clearWatch()")}} method to stop watching the user's location.

- -
navigator.geolocation.clearWatch(watchID);
-
- -

Fine tuning the response

- -

Both {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()","watchPosition()")}} accept a success callback, an optional error callback, and an optional PositionOptions object.

- -

This object allows you to specify whether to enable high accuracy, a maximum age for the returned position value (up until this age it will be cached and reused if the same position is requested again; after this the browser will request fresh position data), and a timeout value that dictates how long the browser should attempt to get the position data for, before it times out.

- -

A call to {{domxref("Geolocation.watchPosition()","watchPosition")}} could look like:

- -
function geo_success(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-}
-
-function geo_error() {
-  alert("Sorry, no position available.");
-}
-
-var geo_options = {
-  enableHighAccuracy: true,
-  maximumAge        : 30000,
-  timeout           : 27000
-};
-
-var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
- -

Describing a position

- -

The user's location is described using a {{domxref("GeolocationPosition")}} object instance, which itself contains a {{domxref("GeolocationCoordinates")}} object instance.

- -

The GeolocationPosition instance contains only two things, a coords property that contains the GeolocationCoordinates instance, and a timestamp property that contains a {{domxref("DOMTimeStamp")}} instance representing the time at which the position data was retrieved.

- -

The GeolocationCoordinates instance contains a number of properties, but the two you'll use most commonly are latitude and longitude, which are what you need to draw your position on a map. Hence many Geolocation success callbacks look fairly simple:

- -
function success(position) {
-  const latitude  = position.coords.latitude;
-  const longitude = position.coords.longitude;
-
-  // Do something with your latitude and longitude
-}
- -

You can however get a number of other bits of information from a GeolocationCoordinates object, including altitude, speed, what direction the device is facing, and an accuracy measure of the altitude, longitude, and latitude data.

- -

Handling errors

- -

The error callback function, if provided when calling getCurrentPosition() or watchPosition(), expects a GeolocationPositionError object instance as its first parameter. This object type contains two properties, a code indicating what type of error has been returned, and a human-readable message that describes what the error code means.

- -

You could use it like so:

- -
function errorCallback(error) {
-  alert('ERROR(' + error.code + '): ' + error.message);
-};
-
- -

Examples

- -

In the following example the Geolocation API is used to retrieve the user's latitude and longitude. If sucessful, the available hyperlink is populated with an openstreetmap.org URL that will show their location.

- - - -

HTML Content

- -
<button id = "find-me">Show my location</button><br/>
-<p id = "status"></p>
-<a id = "map-link" target="_blank"></a>
-
- -

JavaScript Content

- -
function geoFindMe() {
-
-  const status = document.querySelector('#status');
-  const mapLink = document.querySelector('#map-link');
-
-  mapLink.href = '';
-  mapLink.textContent = '';
-
-  function success(position) {
-    const latitude  = position.coords.latitude;
-    const longitude = position.coords.longitude;
-
-    status.textContent = '';
-    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
-    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
-  }
-
-  function error() {
-    status.textContent = 'Unable to retrieve your location';
-  }
-
-  if (!navigator.geolocation) {
-    status.textContent = 'Geolocation is not supported by your browser';
-  } else {
-    status.textContent = 'Locating…';
-    navigator.geolocation.getCurrentPosition(success, error);
-  }
-
-}
-
-document.querySelector('#find-me').addEventListener('click', geoFindMe);
-
- -

Live Result

- -

{{EmbedLiveSample('Examples', 350, 150, "", "", "", "geolocation")}}

diff --git a/files/ar/web/api/geolocation_api/index.html b/files/ar/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..a27275b2b5 --- /dev/null +++ b/files/ar/web/api/geolocation_api/index.html @@ -0,0 +1,294 @@ +--- +title: Using geolocation +slug: Web/API/Geolocation/Using_geolocation +translation_of: Web/API/Geolocation_API +--- +

The geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.

+ +

The geolocation object

+ +

The geolocation API is published through the {{domxref("navigator.geolocation")}} object.

+ +

If the object exists, geolocation services are available. You can test for the presence of geolocation thusly:

+ +
if ("geolocation" in navigator) {
+  /* geolocation is available */
+} else {
+  /* geolocation IS NOT available */
+}
+
+ +
+

Note: On Firefox 24 and older versions, "geolocation" in navigator always returned true even if the API was disabled. This has been fixed with Firefox 25 to comply with the spec. ({{bug(884921)}}).

+
+ +

Getting the current position

+ +

To obtain the user's current location, you can call the {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}} method. This initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date information. When the position is determined, the defined callback function is executed. You can optionally provide a second callback function to be executed if an error occurs. A third, optional, parameter is an options object where you can set the maximum age of the position returned, the time to wait for a request, and if you want high accuracy for the position.

+ +
+

Note: By default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tries to answer as fast as possible with a low accuracy result. It is useful if you need a quick answer regardless of the accuracy. Devices with a GPS, for example, can take a minute or more to get a GPS fix, so less accurate data (IP location or wifi) may be returned to {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

The above example will cause the do_something() function to execute when the location is obtained.

+ +

Watching the current position

+ +

If the position data changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information. This is done using the {{domxref("Geolocation.watchPosition()","watchPosition()")}} function, which has the same input parameters as {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. The callback function is called multiple times, allowing the browser to either update your location as you move, or provide a more accurate location as different techniques are used to geolocate you. The error callback function, which is optional just as it is for {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, can be called repeatedly.

+ +
+

Note: You can use {{domxref("Geolocation.watchPosition()","watchPosition()")}} without an initial {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} call.

+
+ +
var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

The {{domxref("Geolocation.watchPosition()","watchPosition()")}} method returns an ID number that can be used to uniquely identify the requested position watcher; you use this value in tandem with the {{domxref("Geolocation.clearWatch()","clearWatch()")}} method to stop watching the user's location.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

Fine tuning response

+ +

Both {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()","watchPosition()")}} accept a success callback, an optional error callback, and an optional PositionOptions object.

+ +

{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}

+ +

A call to {{domxref("Geolocation.watchPosition()","watchPosition")}} could look like:

+ +
function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Sorry, no position available.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
+ +

A demo of watchPosition in use: http://www.thedotproduct.org/experiments/geo/
+ 

+ +

Describing a position

+ +

The user's location is described using a Position object referencing a Coordinates object.

+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}

+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}

+ +

Handling errors

+ +

The error callback function, if provided when calling getCurrentPosition() or watchPosition(), expects a PositionError object as its first parameter.

+ +
function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+
+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}

+ +

Geolocation Live Example

+ + + +

HTML Content

+ +
<p><button onclick="geoFindMe()">Show my location</button></p>
+<div id="out"></div>
+
+ +

JavaScript Content

+ +
function geoFindMe() {
+  var output = document.getElementById("out");
+
+  if (!navigator.geolocation){
+    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
+    return;
+  }
+
+  function success(position) {
+    var latitude  = position.coords.latitude;
+    var longitude = position.coords.longitude;
+
+    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
+
+    var img = new Image();
+    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
+
+    output.appendChild(img);
+  };
+
+  function error() {
+    output.innerHTML = "Unable to retrieve your location";
+  };
+
+  output.innerHTML = "<p>Locating…</p>";
+
+  navigator.geolocation.getCurrentPosition(success, error);
+}
+
+ +

Live Result

+ +

{{EmbedLiveSample('Geolocation_Live_Example', 350, 410)}}

+ +

Prompting for permission

+ +

Any add-on hosted on addons.mozilla.org which makes use of geolocation data must explicitly request permission before doing so. The following function will request permission in a manner similar to the automatic prompt displayed for web pages. The user's response will be saved in the preference specified by the pref parameter, if applicable. The function provided in the callback parameter will be called with a boolean value indicating the user's response. If true, the add-on may access geolocation data.

+ +
function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Share Location",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Always Share",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Never Share",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on wants to know your location.",
+       function callback(allowed) { alert(allowed); });
+
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatGeckoDesktop("1.9.1")}}[1]910.60
+ {{CompatNo}} 15.0
+ 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("4")}}1.0.1{{CompatUnknown}}10.60
+ {{CompatNo}} 15.0
+ 16.0		{{CompatUnknown}}
+
+ +

[1] Firefox includes support for locating you based on your WiFi information using Google Location Services. In the transaction between Firefox and Google, data is exchanged including WiFi Access Point data, an access token (similar to a 2 week cookie), and the user's IP address. For more information, please check out Mozilla's Privacy Policy and Google's Privacy Policy covering how this data can be used.

+ +

Firefox 3.6 (Gecko 1.9.2) added support for using the GPSD (GPS daemon) service for geolocation on Linux.

+ +

See also

+ + diff --git a/files/ar/web/api/geolocation_api/using_the_geolocation_api/index.html b/files/ar/web/api/geolocation_api/using_the_geolocation_api/index.html new file mode 100644 index 0000000000..d696d6c9f2 --- /dev/null +++ b/files/ar/web/api/geolocation_api/using_the_geolocation_api/index.html @@ -0,0 +1,166 @@ +--- +title: Using the Geolocation API +slug: Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API +translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API +--- +
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
+ +

The Geolocation API is used to retrieve the user's location, so that it can for example be used to display their position using a mapping API. This article explains the basics of how to use it.

+ +

The geolocation object

+ +

The Geolocation API is available through the {{domxref("navigator.geolocation")}} object.

+ +

If the object exists, geolocation services are available. You can test for the presence of geolocation thusly:

+ +
if ("geolocation" in navigator) {
+  /* geolocation is available */
+} else {
+  /* geolocation IS NOT available */
+}
+
+ +

Getting the current position

+ +

To obtain the user's current location, you can call the {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}} method. This initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date information. When the position is determined, the defined callback function is executed. You can optionally provide a second callback function to be executed if an error occurs. A third, optional, parameter is an options object where you can set the maximum age of the position returned, the time to wait for a request, and if you want high accuracy for the position.

+ +
+

Note: By default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tries to answer as fast as possible with a low accuracy result. It is useful if you need a quick answer regardless of the accuracy. Devices with a GPS, for example, can take a minute or more to get a GPS fix, so less accurate data (IP location or wifi) may be returned to {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

The above example will cause the do_something() function to execute when the location is obtained.

+ +

Watching the current position

+ +

If the position data changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information. This is done using the {{domxref("Geolocation.watchPosition()","watchPosition()")}} function, which has the same input parameters as {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. The callback function is called multiple times, allowing the browser to either update your location as you move, or provide a more accurate location as different techniques are used to geolocate you. The error callback function, which is optional just as it is for {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, can be called repeatedly.

+ +
+

Note: You can use {{domxref("Geolocation.watchPosition()","watchPosition()")}} without an initial {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} call.

+
+ +
var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

The {{domxref("Geolocation.watchPosition()","watchPosition()")}} method returns an ID number that can be used to uniquely identify the requested position watcher; you use this value in tandem with the {{domxref("Geolocation.clearWatch()","clearWatch()")}} method to stop watching the user's location.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

Fine tuning the response

+ +

Both {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()","watchPosition()")}} accept a success callback, an optional error callback, and an optional PositionOptions object.

+ +

This object allows you to specify whether to enable high accuracy, a maximum age for the returned position value (up until this age it will be cached and reused if the same position is requested again; after this the browser will request fresh position data), and a timeout value that dictates how long the browser should attempt to get the position data for, before it times out.

+ +

A call to {{domxref("Geolocation.watchPosition()","watchPosition")}} could look like:

+ +
function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Sorry, no position available.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
+ +

Describing a position

+ +

The user's location is described using a {{domxref("GeolocationPosition")}} object instance, which itself contains a {{domxref("GeolocationCoordinates")}} object instance.

+ +

The GeolocationPosition instance contains only two things, a coords property that contains the GeolocationCoordinates instance, and a timestamp property that contains a {{domxref("DOMTimeStamp")}} instance representing the time at which the position data was retrieved.

+ +

The GeolocationCoordinates instance contains a number of properties, but the two you'll use most commonly are latitude and longitude, which are what you need to draw your position on a map. Hence many Geolocation success callbacks look fairly simple:

+ +
function success(position) {
+  const latitude  = position.coords.latitude;
+  const longitude = position.coords.longitude;
+
+  // Do something with your latitude and longitude
+}
+ +

You can however get a number of other bits of information from a GeolocationCoordinates object, including altitude, speed, what direction the device is facing, and an accuracy measure of the altitude, longitude, and latitude data.

+ +

Handling errors

+ +

The error callback function, if provided when calling getCurrentPosition() or watchPosition(), expects a GeolocationPositionError object instance as its first parameter. This object type contains two properties, a code indicating what type of error has been returned, and a human-readable message that describes what the error code means.

+ +

You could use it like so:

+ +
function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+
+ +

Examples

+ +

In the following example the Geolocation API is used to retrieve the user's latitude and longitude. If sucessful, the available hyperlink is populated with an openstreetmap.org URL that will show their location.

+ + + +

HTML Content

+ +
<button id = "find-me">Show my location</button><br/>
+<p id = "status"></p>
+<a id = "map-link" target="_blank"></a>
+
+ +

JavaScript Content

+ +
function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Unable to retrieve your location';
+  }
+
+  if (!navigator.geolocation) {
+    status.textContent = 'Geolocation is not supported by your browser';
+  } else {
+    status.textContent = 'Locating…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);
+
+ +

Live Result

+ +

{{EmbedLiveSample('Examples', 350, 150, "", "", "", "geolocation")}}

diff --git a/files/ar/web/api/history_api/example/index.html b/files/ar/web/api/history_api/example/index.html new file mode 100644 index 0000000000..1bcce72374 --- /dev/null +++ b/files/ar/web/api/history_api/example/index.html @@ -0,0 +1,416 @@ +--- +title: مثال تصفح آجاكس +slug: Web/API/History_API/مثال +translation_of: Web/API/History_API/Example +--- +

هذا مثال عن موقع واب يستعمل تقنية Ajax مُكَـوَّن فقط من ثلاث صفحات (first_page.php، second_page.php  و third_page.php). لرؤية كيفية اشتغالها، رجاء، قم بصنع الملفات التالية (أو git clone https://github.com/giabao/mdn-ajax-nav-example.git)

+ +
ملاحظة: لدمج كامل لعناصر{{HTMLElement("form")}} ضمن هذه الآلية، رجاء ألق نظرة على فقرة Submitting forms and uploading files.
+ +

first_page.php:

+ +
+
<?php
+    $page_title = "First page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>This is the content of <strong>first_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

second_page.php:

+ +
+
<?php
+    $page_title = "Second page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>This is the content of <strong>second_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

third_page.php:

+ +
+
<?php
+    $page_title = "Third page";
+    $page_content = "<p>This is the content of <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
+
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        echo json_encode(array("page" => $page_title, "content" => $page_content));
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php echo $page_content; ?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

css/style.css:

+ +
#ajax-loader {
+    position: fixed;
+    display: table;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#ajax-loader > div {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    background-color: #000000;
+    opacity: 0.65;
+}
+
+ +

include/after_content.php:

+ +
<p>This is the footer. It is shared between all ajax pages.</p>
+
+ +

include/before_content.php:

+ +
<p>
+[ <a class="ajax-nav" href="first_page.php">First example</a>
+| <a class="ajax-nav" href="second_page.php">Second example</a>
+| <a class="ajax-nav" href="third_page.php">Third example</a>
+| <a class="ajax-nav" href="unexisting.php">Unexisting page</a> ]
+</p>
+
+
+ +

include/header.php:

+ +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<script type="text/javascript" src="js/ajax_nav.js"></script>
+<link rel="stylesheet" href="css/style.css" />
+
+ +

js/ajax_nav.js:

+ +

(قبل تنفيذها في بيئة العمل، رجاءً اقرأ the note about the const statement compatibility)

+ +
+
"use strict";
+
+const ajaxRequest = new (function () {
+
+    function closeReq () {
+        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
+        bIsLoading = false;
+    }
+
+    function abortReq () {
+        if (!bIsLoading) { return; }
+        oReq.abort();
+        closeReq();
+    }
+
+    function ajaxError () {
+        alert("Unknown error.");
+    }
+
+    function ajaxLoad () {
+        var vMsg, nStatus = this.status;
+        switch (nStatus) {
+            case 200:
+                vMsg = JSON.parse(this.responseText);
+                document.title = oPageInfo.title = vMsg.page;
+                document.getElementById(sTargetId).innerHTML = vMsg.content;
+                if (bUpdateURL) {
+                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
+                    bUpdateURL = false;
+                }
+                break;
+            default:
+                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
+                switch (Math.floor(nStatus / 100)) {
+                    /*
+                    case 1:
+                        // Informational 1xx
+                        console.log("Information code " + vMsg);
+                        break;
+                    case 2:
+                        // Successful 2xx
+                        console.log("Successful code " + vMsg);
+                        break;
+                    case 3:
+                        // Redirection 3xx
+                        console.log("Redirection code " + vMsg);
+                        break;
+                    */
+                    case 4:
+                        /* Client Error 4xx */
+                        alert("Client Error #" + vMsg);
+                        break;
+                    case 5:
+                        /* Server Error 5xx */
+                        alert("Server Error #" + vMsg);
+                        break;
+                    default:
+                        /* Unknown status */
+                        ajaxError();
+                }
+        }
+        closeReq();
+    }
+
+    function filterURL (sURL, sViewMode) {
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+    }
+
+    function getPage (sPage) {
+        if (bIsLoading) { return; }
+        oReq = new XMLHttpRequest();
+        bIsLoading = true;
+        oReq.onload = ajaxLoad;
+        oReq.onerror = ajaxError;
+        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
+        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
+        oReq.send();
+        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
+    }
+
+    function requestPage (sURL) {
+        if (history.pushState) {
+            bUpdateURL = true;
+            getPage(sURL);
+        } else {
+            /* Ajax navigation is not supported */
+            location.assign(sURL);
+        }
+    }
+
+    function processLink () {
+        if (this.className === sAjaxClass) {
+            requestPage(this.href);
+            return false;
+        }
+        return true;
+    }
+
+    function init () {
+        oPageInfo.title = document.title;
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
+    }
+
+    const
+
+        /* customizable constants */
+        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
+
+        /* not customizable constants */
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
+        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
+        oPageInfo = {
+            title: null,
+            url: location.href
+        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
+            100: "Continue",
+            101: "Switching Protocols",
+            102: "Processing",
+            200: "OK",
+            201: "Created",
+            202: "Accepted",
+            203: "Non-Authoritative Information",
+            204: "No Content",
+            205: "Reset Content",
+            206: "Partial Content",
+            207: "Multi-Status",
+            208: "Already Reported",
+            226: "IM Used",
+            300: "Multiple Choices",
+            301: "Moved Permanently",
+            302: "Found",
+            303: "See Other",
+            304: "Not Modified",
+            305: "Use Proxy",
+            306: "Reserved",
+            307: "Temporary Redirect",
+            308: "Permanent Redirect",
+            400: "Bad Request",
+            401: "Unauthorized",
+            402: "Payment Required",
+            403: "Forbidden",
+            404: "Not Found",
+            405: "Method Not Allowed",
+            406: "Not Acceptable",
+            407: "Proxy Authentication Required",
+            408: "Request Timeout",
+            409: "Conflict",
+            410: "Gone",
+            411: "Length Required",
+            412: "Precondition Failed",
+            413: "Request Entity Too Large",
+            414: "Request-URI Too Long",
+            415: "Unsupported Media Type",
+            416: "Requested Range Not Satisfiable",
+            417: "Expectation Failed",
+            422: "Unprocessable Entity",
+            423: "Locked",
+            424: "Failed Dependency",
+            425: "Unassigned",
+            426: "Upgrade Required",
+            427: "Unassigned",
+            428: "Precondition Required",
+            429: "Too Many Requests",
+            430: "Unassigned",
+            431: "Request Header Fields Too Large",
+            500: "Internal Server Error",
+            501: "Not Implemented",
+            502: "Bad Gateway",
+            503: "Service Unavailable",
+            504: "Gateway Timeout",
+            505: "HTTP Version Not Supported",
+            506: "Variant Also Negotiates (Experimental)",
+            507: "Insufficient Storage",
+            508: "Loop Detected",
+            509: "Unassigned",
+            510: "Not Extended",
+            511: "Network Authentication Required"
+        };
+
+    var
+
+        oReq, bIsLoading = false, bUpdateURL = false;
+
+    oLoadingBox.id = "ajax-loader";
+    oCover.onclick = abortReq;
+    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
+    oCover.appendChild(oLoadingImg);
+    oLoadingBox.appendChild(oCover);
+
+    onpopstate = function (oEvent) {
+        bUpdateURL = false;
+        oPageInfo.title = oEvent.state.title;
+        oPageInfo.url = oEvent.state.url;
+        getPage();
+    };
+
+    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
+
+    // Public methods
+
+    this.open = requestPage;
+    this.stop = abortReq;
+    this.rebuildLinks = init;
+
+})();
+
+
+
+ +
ملاحظة: التنفيذ الحالي لـconst (تعليمة ثابتة) ليست جزءا من ECMAScript 5. هي مدعومة على متصفحات فايرفوكس وكروم (V8) ومدعومة جزئيا على أوبرا 9+ وسافاري. ليست مدعومة على Internet Explorer 6-9، ولا في معاينة Internet Explorer 10. - ستكون معرفة في ECMAScript 6، لكن بدلالات أخرى. على غرار المتغيرات المعرفة (declared) بـتعليمة let ، الثوابت المعرفة بـconst ستكون. نقوم باستعمالها لغرض تعليمي. إذا كنت تريد توافقا كاملا مع المتصفح، رجاء قم باستبدال تعليمات const بتعليمات var.
+ +

For more information, please see: Manipulating the browser history.

+ +

See also

+ +
    +
  • {{ domxref("window.history") }}
    • +
  • {{ domxref("window.onpopstate") }}
    • +
diff --git "a/files/ar/web/api/history_api/\331\205\330\253\330\247\331\204/index.html" "b/files/ar/web/api/history_api/\331\205\330\253\330\247\331\204/index.html" deleted file mode 100644 index 1bcce72374..0000000000 --- "a/files/ar/web/api/history_api/\331\205\330\253\330\247\331\204/index.html" +++ /dev/null @@ -1,416 +0,0 @@ ---- -title: مثال تصفح آجاكس -slug: Web/API/History_API/مثال -translation_of: Web/API/History_API/Example ---- -

هذا مثال عن موقع واب يستعمل تقنية Ajax مُكَـوَّن فقط من ثلاث صفحات (first_page.php، second_page.php  و third_page.php). لرؤية كيفية اشتغالها، رجاء، قم بصنع الملفات التالية (أو git clone https://github.com/giabao/mdn-ajax-nav-example.git)

- -
ملاحظة: لدمج كامل لعناصر{{HTMLElement("form")}} ضمن هذه الآلية، رجاء ألق نظرة على فقرة Submitting forms and uploading files.
- -

first_page.php:

- -
-
<?php
-    $page_title = "First page";
-
-    $as_json = false;
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        $as_json = true;
-        ob_start();
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php } ?>
-
-    <p>This is the content of <strong>first_page.php</strong>.</p>
-
-<?php
-    if ($as_json) {
-        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
-    } else {
-?>
-</div>
-
-<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

second_page.php:

- -
-
<?php
-    $page_title = "Second page";
-
-    $as_json = false;
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        $as_json = true;
-        ob_start();
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php } ?>
-
-    <p>This is the content of <strong>second_page.php</strong>.</p>
-
-<?php
-    if ($as_json) {
-        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
-    } else {
-?>
-</div>
-
-<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

third_page.php:

- -
-
<?php
-    $page_title = "Third page";
-    $page_content = "<p>This is the content of <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
-
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        echo json_encode(array("page" => $page_title, "content" => $page_content));
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php echo $page_content; ?>
-</div>
-
-<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

css/style.css:

- -
#ajax-loader {
-    position: fixed;
-    display: table;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-#ajax-loader > div {
-    display: table-cell;
-    width: 100%;
-    height: 100%;
-    vertical-align: middle;
-    text-align: center;
-    background-color: #000000;
-    opacity: 0.65;
-}
-
- -

include/after_content.php:

- -
<p>This is the footer. It is shared between all ajax pages.</p>
-
- -

include/before_content.php:

- -
<p>
-[ <a class="ajax-nav" href="first_page.php">First example</a>
-| <a class="ajax-nav" href="second_page.php">Second example</a>
-| <a class="ajax-nav" href="third_page.php">Third example</a>
-| <a class="ajax-nav" href="unexisting.php">Unexisting page</a> ]
-</p>
-
-
- -

include/header.php:

- -
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<script type="text/javascript" src="js/ajax_nav.js"></script>
-<link rel="stylesheet" href="css/style.css" />
-
- -

js/ajax_nav.js:

- -

(قبل تنفيذها في بيئة العمل، رجاءً اقرأ the note about the const statement compatibility)

- -
-
"use strict";
-
-const ajaxRequest = new (function () {
-
-    function closeReq () {
-        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
-        bIsLoading = false;
-    }
-
-    function abortReq () {
-        if (!bIsLoading) { return; }
-        oReq.abort();
-        closeReq();
-    }
-
-    function ajaxError () {
-        alert("Unknown error.");
-    }
-
-    function ajaxLoad () {
-        var vMsg, nStatus = this.status;
-        switch (nStatus) {
-            case 200:
-                vMsg = JSON.parse(this.responseText);
-                document.title = oPageInfo.title = vMsg.page;
-                document.getElementById(sTargetId).innerHTML = vMsg.content;
-                if (bUpdateURL) {
-                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
-                    bUpdateURL = false;
-                }
-                break;
-            default:
-                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
-                switch (Math.floor(nStatus / 100)) {
-                    /*
-                    case 1:
-                        // Informational 1xx
-                        console.log("Information code " + vMsg);
-                        break;
-                    case 2:
-                        // Successful 2xx
-                        console.log("Successful code " + vMsg);
-                        break;
-                    case 3:
-                        // Redirection 3xx
-                        console.log("Redirection code " + vMsg);
-                        break;
-                    */
-                    case 4:
-                        /* Client Error 4xx */
-                        alert("Client Error #" + vMsg);
-                        break;
-                    case 5:
-                        /* Server Error 5xx */
-                        alert("Server Error #" + vMsg);
-                        break;
-                    default:
-                        /* Unknown status */
-                        ajaxError();
-                }
-        }
-        closeReq();
-    }
-
-    function filterURL (sURL, sViewMode) {
-        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
-    }
-
-    function getPage (sPage) {
-        if (bIsLoading) { return; }
-        oReq = new XMLHttpRequest();
-        bIsLoading = true;
-        oReq.onload = ajaxLoad;
-        oReq.onerror = ajaxError;
-        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
-        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
-        oReq.send();
-        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
-    }
-
-    function requestPage (sURL) {
-        if (history.pushState) {
-            bUpdateURL = true;
-            getPage(sURL);
-        } else {
-            /* Ajax navigation is not supported */
-            location.assign(sURL);
-        }
-    }
-
-    function processLink () {
-        if (this.className === sAjaxClass) {
-            requestPage(this.href);
-            return false;
-        }
-        return true;
-    }
-
-    function init () {
-        oPageInfo.title = document.title;
-        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
-    }
-
-    const
-
-        /* customizable constants */
-        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
-
-        /* not customizable constants */
-        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
-        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
-        oPageInfo = {
-            title: null,
-            url: location.href
-        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
-            100: "Continue",
-            101: "Switching Protocols",
-            102: "Processing",
-            200: "OK",
-            201: "Created",
-            202: "Accepted",
-            203: "Non-Authoritative Information",
-            204: "No Content",
-            205: "Reset Content",
-            206: "Partial Content",
-            207: "Multi-Status",
-            208: "Already Reported",
-            226: "IM Used",
-            300: "Multiple Choices",
-            301: "Moved Permanently",
-            302: "Found",
-            303: "See Other",
-            304: "Not Modified",
-            305: "Use Proxy",
-            306: "Reserved",
-            307: "Temporary Redirect",
-            308: "Permanent Redirect",
-            400: "Bad Request",
-            401: "Unauthorized",
-            402: "Payment Required",
-            403: "Forbidden",
-            404: "Not Found",
-            405: "Method Not Allowed",
-            406: "Not Acceptable",
-            407: "Proxy Authentication Required",
-            408: "Request Timeout",
-            409: "Conflict",
-            410: "Gone",
-            411: "Length Required",
-            412: "Precondition Failed",
-            413: "Request Entity Too Large",
-            414: "Request-URI Too Long",
-            415: "Unsupported Media Type",
-            416: "Requested Range Not Satisfiable",
-            417: "Expectation Failed",
-            422: "Unprocessable Entity",
-            423: "Locked",
-            424: "Failed Dependency",
-            425: "Unassigned",
-            426: "Upgrade Required",
-            427: "Unassigned",
-            428: "Precondition Required",
-            429: "Too Many Requests",
-            430: "Unassigned",
-            431: "Request Header Fields Too Large",
-            500: "Internal Server Error",
-            501: "Not Implemented",
-            502: "Bad Gateway",
-            503: "Service Unavailable",
-            504: "Gateway Timeout",
-            505: "HTTP Version Not Supported",
-            506: "Variant Also Negotiates (Experimental)",
-            507: "Insufficient Storage",
-            508: "Loop Detected",
-            509: "Unassigned",
-            510: "Not Extended",
-            511: "Network Authentication Required"
-        };
-
-    var
-
-        oReq, bIsLoading = false, bUpdateURL = false;
-
-    oLoadingBox.id = "ajax-loader";
-    oCover.onclick = abortReq;
-    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
-    oCover.appendChild(oLoadingImg);
-    oLoadingBox.appendChild(oCover);
-
-    onpopstate = function (oEvent) {
-        bUpdateURL = false;
-        oPageInfo.title = oEvent.state.title;
-        oPageInfo.url = oEvent.state.url;
-        getPage();
-    };
-
-    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
-
-    // Public methods
-
-    this.open = requestPage;
-    this.stop = abortReq;
-    this.rebuildLinks = init;
-
-})();
-
-
-
- -
ملاحظة: التنفيذ الحالي لـconst (تعليمة ثابتة) ليست جزءا من ECMAScript 5. هي مدعومة على متصفحات فايرفوكس وكروم (V8) ومدعومة جزئيا على أوبرا 9+ وسافاري. ليست مدعومة على Internet Explorer 6-9، ولا في معاينة Internet Explorer 10. - ستكون معرفة في ECMAScript 6، لكن بدلالات أخرى. على غرار المتغيرات المعرفة (declared) بـتعليمة let ، الثوابت المعرفة بـconst ستكون. نقوم باستعمالها لغرض تعليمي. إذا كنت تريد توافقا كاملا مع المتصفح، رجاء قم باستبدال تعليمات const بتعليمات var.
- -

For more information, please see: Manipulating the browser history.

- -

See also

- -
    -
  • {{ domxref("window.history") }}
    • -
  • {{ domxref("window.onpopstate") }}
    • -
diff --git a/files/ar/web/api/navigator.battery/index.html b/files/ar/web/api/navigator.battery/index.html deleted file mode 100644 index 563c6d5288..0000000000 --- a/files/ar/web/api/navigator.battery/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Navigator.battery -slug: Web/API/Navigator.battery -tags: - - API - - batter - - navigator.battery - - المراجع - - كائن البطارية -translation_of: Web/API/Navigator/battery ---- -

{{ ApiRef() }}

-

الملخص

-

يقوم كائن battery بتقديم معلومات حول مستوى شحن بطارية النظام.

-

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

-

الشكل العام

-
var battery = window.navigator.battery;
-

القيمة

-

navigator.battery هو كائن {{domxref("لإدارة البطارية.")}}.

-

المواصفات

-

{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}

-

توافق المتصفحات

-

{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}

-

اقرأ أيضاً

- diff --git a/files/ar/web/api/navigator/battery/index.html b/files/ar/web/api/navigator/battery/index.html new file mode 100644 index 0000000000..563c6d5288 --- /dev/null +++ b/files/ar/web/api/navigator/battery/index.html @@ -0,0 +1,31 @@ +--- +title: Navigator.battery +slug: Web/API/Navigator.battery +tags: + - API + - batter + - navigator.battery + - المراجع + - كائن البطارية +translation_of: Web/API/Navigator/battery +--- +

{{ ApiRef() }}

+

الملخص

+

يقوم كائن battery بتقديم معلومات حول مستوى شحن بطارية النظام.

+

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

+

الشكل العام

+
var battery = window.navigator.battery;
+

القيمة

+

navigator.battery هو كائن {{domxref("لإدارة البطارية.")}}.

+

المواصفات

+

{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}

+

توافق المتصفحات

+

{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}

+

اقرأ أيضاً

+ diff --git a/files/ar/web/css/comments/index.html b/files/ar/web/css/comments/index.html new file mode 100644 index 0000000000..4fbf59d3f9 --- /dev/null +++ b/files/ar/web/css/comments/index.html @@ -0,0 +1,64 @@ +--- +title: التعليقات +slug: Web/CSS/التعليقات +tags: + - CSS + - تعليقات + - مرجع + - ملاحظات +translation_of: Web/CSS/Comments +--- +
{{CSSRef}}
+ +

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

+ +

طريقة الكتابة

+ +

يمكن كتابة التعليقات في أي مكان داخل ورقة الأنماط، سواء كانت بسطر واحد أو بعدة أسطر.

+ +
/* تعليق */
+ +

أمثلة

+ +
/* تعليق بسطر واحد */
+
+/*
+تعليق
+يمكن
+كتابته
+بأكثر
+من
+سطر
+*/
+
+/* التعليق أدناه جعل الخواص المذكروة للعنصر
+   Span
+   دون تأثير */
+/*
+span {
+  color: blue;
+  font-size: 1.5em;
+}
+*/
+
+ +

تنبيهات

+ +

الرمز /* */ يستخدم في كلا الحالتين سطر واحد أو متعدد الأسطر، لا يوجد أي طريقة أخرى من أجل كتابة تعليقات داخل ورقة الأنماط، عندما تستخدم عنصر {{htmlelement("style")}} فيمكنك استخدام <!-- --> من أجل إخفاء أكواد CSS عن المتصفحات القديمة، رغم أن ذلك غير مستحسن، معظم المبرمجين يستخدمون صيغة /* */.

+ +

لا يمكن كتابة التعليقات بشكل متداخل، بمعنى أن التعليقات ستبدأ عند كتابة /* وستغلق عند أول علامة */ تقابلها.

+ +

الخصائص

+ + + +

اقرأ أيضًا

+ + + +

 

diff --git a/files/ar/web/css/css_animated_properties/index.html b/files/ar/web/css/css_animated_properties/index.html new file mode 100644 index 0000000000..d9a0da44f2 --- /dev/null +++ b/files/ar/web/css/css_animated_properties/index.html @@ -0,0 +1,19 @@ +--- +title: العناصر التي يمكن تحريكها باستخدام CSS Transitions +slug: Web/CSS/العناصر_التي_يمكن_تحريكها_باستخدام_CSS_Transitions +tags: + - CSS + - CSS3 + - تحريك + - ترانزشن + - سلاسة + - نعومة +translation_of: Web/CSS/CSS_animated_properties +--- +

{{CSSRef}}

+ +

يمكن تحريك بعض عناصر CSS بشكل ناعم وسلس عندما تتغير قيم وخصائص العناصر، سواء باستخدام CSS Animations أو CSS Transitions.

+ +

هذه قائمة بالعناصر التي يمكن استخدام خاصية Transitions عليها:

+ +

{{CSSAnimatedProperties}}

diff --git a/files/ar/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ar/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..c30338c62b --- /dev/null +++ b/files/ar/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,233 @@ +--- +title: المفاهيم الأساسية للصندوق المرن +slug: Web/CSS/CSS_Flexible_Box_Layout/المفاهيم_الأساسية_للصندوق_المرن +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

يشار لوحدة الصندوق المرن عادةً  بالflexbox وقد تم تصميمها كنموذج تخطيط احادي البعد. وكطريقة يمكنها ان تعرض توزيع المسافات بين العناصر في واجهة وقدرات محاذاة (ترتيب) قوية. تقدم هذه المقالة الخطوط العريضة للميزات الرئيسية لفلكس بوكس (flexbox)، والتي سنكتشف تفاصيلها في بقية هذه الارشادات.

+ +

عندما نوصف الفلكس بوكس بأنه احادي البعد، نقوم بوصف الحقيقة ان الفلكس بوكس يتعامل مع المخطط في بعد واحد في ذات الوقت — إما كصف أو كعمود. وهذا يمكن أن يتناقض مع نموذج ثنائي الأبعاد الخاص بـتخطيط شبكة CSS Grid والذي يتحكم في الصفوف والاعمدة معاً.

+ +

مِحوَريّ الفلكس بوكس

+ +

عندما نشتغل بفلكس بوكس نحتاج للتفكير في محورين — المحور الاساشي او الرئيسي ومحور التقاطع (المتقاطع).
+ يتم تعريف المحور الرئيسي بإستخدام الخاصية {{cssxref("flex-direction")}}
+ ومن هناك يتم تعامد المحور المتقاطع بناءًا على المحور الرئيسي.
+ لذا يجدر فهم كيفية عملها منذ البداية.

+ +

المحور الرئيسي

+ +

يتم تعريف المحور الرئيسي عن طريق flex-direction  ، والتي لديها اربع قيم ممكنة هي:

+ +
    +
  • الصف row
    • +
  • الصف المعكوس row-reverse
    • +
  • العامود column
    • +
  • العامود المعكوس column-reverse
    • +
+ +

هل تختار الصف او الصف المعكوس؟ سيشتغل المحور الاساسي في اتجاه مضمَن مع الصف.

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

اختر العامود او العامود المعكوس وسيعمل المحور الاساسي من رأس الصفحة الى قاعها في اتجاه السد

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

محور التقاطع

+ +

يتعامد محور التقاطع على المحور الرئيسي الذي تم تعريفة مسبقا باستخدام flex-direction كصف row  او صف معكوس row-reverse  فيشغل دور الاعمدة.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

أما لو كان عامود column او عامود معكوس column-reverse  فيشغل محور التقاطع دور الصف.

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

من المهم فهم اي محور من الاخر عندما نبدأ في البحث عن الترتيب والاصطفاف لعانصر الفلكس، خصائص ميزات الفلكس بوكس التي ستقوم بإصطفافها وترتيب المحتوى على محور او الاخر.

+ +

خطوط البداية والنهاية

+ +

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

+ +

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

+ +

اذا كان الصف هو اتجاه فلكس،  flex-direction: row ونعمل باستخدام اللغة الانجليزية.
+ اذن ستكون حافة البداية للمحور الاساسي على اليسار ويقابلها على الجهة الاخرى علي اليمين حافة النهاية.

+ +

Working in English the start edge is on the left.

+ +

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

+ +

The start edge in a RTL language is on the right.

+ +

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

+ +

بعد فترة، التفكير في البداية والنهاية بدلا من الايمن والايسر سيصبح طبيعيا اكثر. وسيكون مفيدا عن التعامل مع وسائل التخطيط الاخرى مثل مخطط الشبكة CSS Grid Layout الذي يتبع النمط نفسه.

+ +

حاوية فلكس

+ +

An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area's container's {{cssxref("display")}} property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.

+ +
    +
  • Items display in a row (the flex-direction property's default is row).
    • +
  • The items start from the start edge of the main axis.
    • +
  • The items do not stretch on the main dimension, but can shrink.
    • +
  • The items will stretch to fill the size of the cross axis.
    • +
  • The {{cssxref("flex-basis")}} property is set to auto.
    • +
  • The {{cssxref("flex-wrap")}} property is set to nowrap.
    • +
+ +

The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the cross axis to fill its full size.

+ +

You can see in the live example below how this looks. Try editing the items or adding additional items in order to test the initial behavior of flexbox.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+ +

Changing flex-direction

+ +

Adding the {{cssxref("flex-direction")}} property to the flex container allows us to change the direction in which our flex items display. Setting flex-direction: row-reverse will keep the items displaying along the row, however the start and end lines are switched.

+ +

If we change flex-direction to column the main axis switches and our items now display in a column. Set column-reverse and the start and end lines are again switched.

+ +

The live example below has flex-direction set to row-reverse. Try the other values — row, column and column-reverse — to see what happens to the content.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Multi-line flex containers with flex-wrap

+ +

While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.

+ +

To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of wrap. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As flex-wrap is set to wrap, the items wrap. Set it to nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

Find out more about wrapping flex items in the guide Mastering Wrapping of Flex Items.

+ +

The flex-flow shorthand

+ +

You can combine the two properties flex-direction and flex-wrap into the {{cssxref("flex-flow")}} shorthand. The first value specified is flex-direction and the second value is flex-wrap.

+ +

In the live example below try changing the first value to one of the allowable values for flex-direction - row, row-reverse, column or column-reverse, and also change the second to wrap and nowrap.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Properties applied to flex items

+ +

To have more control over flex items we can target them directly. We do this by way of three properties:

+ +
    +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
+ +

We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide Controlling Ratios of Flex Items on the Main Axis.

+ +

Before we can make sense of these properties we need to consider the concept of available space. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.

+ +

If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.

+ +

This flex container has available space after laying out the items.

+ +

If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the flex properties that we apply to the items themselves, will do.

+ +

The flex-basis property

+ +

The flex-basis is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is auto — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the flex-basis.

+ +

If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.

+ +

The flex-grow property

+ +

With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

+ +

If we gave all of our items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

+ +

The flex-grow property can be used to distribute space in proportion. If we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).

+ +

The flex-shrink property

+ +

Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

+ +

The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.

+ +
+

Note that these values for flex-grow and flex-shrink are proportions. Typically if we had all of our items set to flex: 1 1 200px and then wanted one item to grow at twice the rate, we would set that item to flex: 2 1 200px. However you could use flex: 10 1 200px and flex: 20 1 200px if you wanted.

+
+ +

Shorthand values for the flex properties

+ +

You will very rarely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis.

+ +

The live example below allows you to test out the different values of the flex shorthand; remember that the first value is flex-grow. Giving this a positive value means the item can grow. The second is flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is flex-basis; this is the value the items are using as their base value to grow and shrink from.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

+ +

There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:

+ +
    +
  • flex: initial
    • +
  • flex: auto
    • +
  • flex: none
    • +
  • flex: <positive-number>
    • +
+ +

Setting flex: initial resets the item to the initial values of Flexbox. This is the same as flex: 0 1 auto. In this case the value of flex-grow is 0, so items will not grow larger than their flex-basis size. The value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of flex-basis is auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.

+ +

Using flex: auto is the same as using flex: 1 1 auto; everything is as with flex:initial but in this case the items can grow and fill the container as well as shrink if required.

+ +

Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.

+ +

The shorthand you often see in tutorials is flex: 1 or flex: 2 and so on. This is as if you used flex: 1 1 0. The items can grow and shrink from a flex-basis of 0.

+ +

Try these shorthand values in the live example below.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+ +

Alignment, justification and distribution of free space between items

+ +

A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.

+ +

align-items

+ +

The {{cssxref("align-items")}} property will align the items on the cross axis.

+ +

The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.

+ +

You could instead set align-items to flex-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or center to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:

+ +
    +
  • stretch
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-start which will line the items up at the start edge of the container, but you could also set the value to flex-end to line them up at the end, or center to line them up in the centre.

+ +

You can also use the value space-between to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value space-around. With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end.

+ +

Try the following values of justify-content in the live example:

+ +
    +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
  • space-around
    • +
  • space-between
    • +
  • space-evenly
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

In the article Aligning Items in a Flex Container we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.

+ +

Next steps

+ +

After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at how this specification relates to other parts of CSS.

diff --git "a/files/ar/web/css/css_flexible_box_layout/\330\247\331\204\331\205\331\201\330\247\331\207\331\212\331\205_\330\247\331\204\330\243\330\263\330\247\330\263\331\212\330\251_\331\204\331\204\330\265\331\206\330\257\331\210\331\202_\330\247\331\204\331\205\330\261\331\206/index.html" "b/files/ar/web/css/css_flexible_box_layout/\330\247\331\204\331\205\331\201\330\247\331\207\331\212\331\205_\330\247\331\204\330\243\330\263\330\247\330\263\331\212\330\251_\331\204\331\204\330\265\331\206\330\257\331\210\331\202_\330\247\331\204\331\205\330\261\331\206/index.html" deleted file mode 100644 index c30338c62b..0000000000 --- "a/files/ar/web/css/css_flexible_box_layout/\330\247\331\204\331\205\331\201\330\247\331\207\331\212\331\205_\330\247\331\204\330\243\330\263\330\247\330\263\331\212\330\251_\331\204\331\204\330\265\331\206\330\257\331\210\331\202_\330\247\331\204\331\205\330\261\331\206/index.html" +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: المفاهيم الأساسية للصندوق المرن -slug: Web/CSS/CSS_Flexible_Box_Layout/المفاهيم_الأساسية_للصندوق_المرن -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---- -
{{CSSRef}}
- -

يشار لوحدة الصندوق المرن عادةً  بالflexbox وقد تم تصميمها كنموذج تخطيط احادي البعد. وكطريقة يمكنها ان تعرض توزيع المسافات بين العناصر في واجهة وقدرات محاذاة (ترتيب) قوية. تقدم هذه المقالة الخطوط العريضة للميزات الرئيسية لفلكس بوكس (flexbox)، والتي سنكتشف تفاصيلها في بقية هذه الارشادات.

- -

عندما نوصف الفلكس بوكس بأنه احادي البعد، نقوم بوصف الحقيقة ان الفلكس بوكس يتعامل مع المخطط في بعد واحد في ذات الوقت — إما كصف أو كعمود. وهذا يمكن أن يتناقض مع نموذج ثنائي الأبعاد الخاص بـتخطيط شبكة CSS Grid والذي يتحكم في الصفوف والاعمدة معاً.

- -

مِحوَريّ الفلكس بوكس

- -

عندما نشتغل بفلكس بوكس نحتاج للتفكير في محورين — المحور الاساشي او الرئيسي ومحور التقاطع (المتقاطع).
- يتم تعريف المحور الرئيسي بإستخدام الخاصية {{cssxref("flex-direction")}}
- ومن هناك يتم تعامد المحور المتقاطع بناءًا على المحور الرئيسي.
- لذا يجدر فهم كيفية عملها منذ البداية.

- -

المحور الرئيسي

- -

يتم تعريف المحور الرئيسي عن طريق flex-direction  ، والتي لديها اربع قيم ممكنة هي:

- -
    -
  • الصف row
    • -
  • الصف المعكوس row-reverse
    • -
  • العامود column
    • -
  • العامود المعكوس column-reverse
    • -
- -

هل تختار الصف او الصف المعكوس؟ سيشتغل المحور الاساسي في اتجاه مضمَن مع الصف.

- -

If flex-direction is set to row the main axis runs along the row in the inline direction.

- -

اختر العامود او العامود المعكوس وسيعمل المحور الاساسي من رأس الصفحة الى قاعها في اتجاه السد

- -

If flex-direction is set to column the main axis runs in the block direction.

- -

محور التقاطع

- -

يتعامد محور التقاطع على المحور الرئيسي الذي تم تعريفة مسبقا باستخدام flex-direction كصف row  او صف معكوس row-reverse  فيشغل دور الاعمدة.

- -

If flex-direction is set to row then the cross axis runs in the block direction.

- -

أما لو كان عامود column او عامود معكوس column-reverse  فيشغل محور التقاطع دور الصف.

- -

If flex-direction is set to column then the cross axis runs in the inline direction.

- -

من المهم فهم اي محور من الاخر عندما نبدأ في البحث عن الترتيب والاصطفاف لعانصر الفلكس، خصائص ميزات الفلكس بوكس التي ستقوم بإصطفافها وترتيب المحتوى على محور او الاخر.

- -

خطوط البداية والنهاية

- -

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

- -

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

- -

اذا كان الصف هو اتجاه فلكس،  flex-direction: row ونعمل باستخدام اللغة الانجليزية.
- اذن ستكون حافة البداية للمحور الاساسي على اليسار ويقابلها على الجهة الاخرى علي اليمين حافة النهاية.

- -

Working in English the start edge is on the left.

- -

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

- -

The start edge in a RTL language is on the right.

- -

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

- -

بعد فترة، التفكير في البداية والنهاية بدلا من الايمن والايسر سيصبح طبيعيا اكثر. وسيكون مفيدا عن التعامل مع وسائل التخطيط الاخرى مثل مخطط الشبكة CSS Grid Layout الذي يتبع النمط نفسه.

- -

حاوية فلكس

- -

An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area's container's {{cssxref("display")}} property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.

- -
    -
  • Items display in a row (the flex-direction property's default is row).
    • -
  • The items start from the start edge of the main axis.
    • -
  • The items do not stretch on the main dimension, but can shrink.
    • -
  • The items will stretch to fill the size of the cross axis.
    • -
  • The {{cssxref("flex-basis")}} property is set to auto.
    • -
  • The {{cssxref("flex-wrap")}} property is set to nowrap.
    • -
- -

The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the cross axis to fill its full size.

- -

You can see in the live example below how this looks. Try editing the items or adding additional items in order to test the initial behavior of flexbox.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

- -

Changing flex-direction

- -

Adding the {{cssxref("flex-direction")}} property to the flex container allows us to change the direction in which our flex items display. Setting flex-direction: row-reverse will keep the items displaying along the row, however the start and end lines are switched.

- -

If we change flex-direction to column the main axis switches and our items now display in a column. Set column-reverse and the start and end lines are again switched.

- -

The live example below has flex-direction set to row-reverse. Try the other values — row, column and column-reverse — to see what happens to the content.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

- -

Multi-line flex containers with flex-wrap

- -

While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.

- -

To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of wrap. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As flex-wrap is set to wrap, the items wrap. Set it to nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

- -

Find out more about wrapping flex items in the guide Mastering Wrapping of Flex Items.

- -

The flex-flow shorthand

- -

You can combine the two properties flex-direction and flex-wrap into the {{cssxref("flex-flow")}} shorthand. The first value specified is flex-direction and the second value is flex-wrap.

- -

In the live example below try changing the first value to one of the allowable values for flex-direction - row, row-reverse, column or column-reverse, and also change the second to wrap and nowrap.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

- -

Properties applied to flex items

- -

To have more control over flex items we can target them directly. We do this by way of three properties:

- -
    -
  • {{cssxref("flex-grow")}}
    • -
  • {{cssxref("flex-shrink")}}
    • -
  • {{cssxref("flex-basis")}}
    • -
- -

We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide Controlling Ratios of Flex Items on the Main Axis.

- -

Before we can make sense of these properties we need to consider the concept of available space. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.

- -

If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.

- -

This flex container has available space after laying out the items.

- -

If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the flex properties that we apply to the items themselves, will do.

- -

The flex-basis property

- -

The flex-basis is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is auto — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the flex-basis.

- -

If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.

- -

The flex-grow property

- -

With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

- -

If we gave all of our items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

- -

The flex-grow property can be used to distribute space in proportion. If we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).

- -

The flex-shrink property

- -

Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

- -

The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.

- -
-

Note that these values for flex-grow and flex-shrink are proportions. Typically if we had all of our items set to flex: 1 1 200px and then wanted one item to grow at twice the rate, we would set that item to flex: 2 1 200px. However you could use flex: 10 1 200px and flex: 20 1 200px if you wanted.

-
- -

Shorthand values for the flex properties

- -

You will very rarely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis.

- -

The live example below allows you to test out the different values of the flex shorthand; remember that the first value is flex-grow. Giving this a positive value means the item can grow. The second is flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is flex-basis; this is the value the items are using as their base value to grow and shrink from.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

- -

There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:

- -
    -
  • flex: initial
    • -
  • flex: auto
    • -
  • flex: none
    • -
  • flex: <positive-number>
    • -
- -

Setting flex: initial resets the item to the initial values of Flexbox. This is the same as flex: 0 1 auto. In this case the value of flex-grow is 0, so items will not grow larger than their flex-basis size. The value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of flex-basis is auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.

- -

Using flex: auto is the same as using flex: 1 1 auto; everything is as with flex:initial but in this case the items can grow and fill the container as well as shrink if required.

- -

Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.

- -

The shorthand you often see in tutorials is flex: 1 or flex: 2 and so on. This is as if you used flex: 1 1 0. The items can grow and shrink from a flex-basis of 0.

- -

Try these shorthand values in the live example below.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

- -

Alignment, justification and distribution of free space between items

- -

A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.

- -

align-items

- -

The {{cssxref("align-items")}} property will align the items on the cross axis.

- -

The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.

- -

You could instead set align-items to flex-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or center to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:

- -
    -
  • stretch
    • -
  • flex-start
    • -
  • flex-end
    • -
  • center
    • -
- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

- -

justify-content

- -

The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-start which will line the items up at the start edge of the container, but you could also set the value to flex-end to line them up at the end, or center to line them up in the centre.

- -

You can also use the value space-between to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value space-around. With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end.

- -

Try the following values of justify-content in the live example:

- -
    -
  • flex-start
    • -
  • flex-end
    • -
  • center
    • -
  • space-around
    • -
  • space-between
    • -
  • space-evenly
    • -
- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

- -

In the article Aligning Items in a Flex Container we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.

- -

Next steps

- -

After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at how this specification relates to other parts of CSS.

diff --git a/files/ar/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ar/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..7ccf10282f --- /dev/null +++ b/files/ar/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,623 @@ +--- +title: العلاقة بين التنسيق الشبكي وطرق التنسيق الأخرى +slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout_arabic +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +

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

+ +

نظام الشبكة ونظام الأجزاء المرنة

+ +

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

+ +

النسق ذو بعد واحد مقارنة مع النسق ذو بعدين

+ +

سنستعمل مثالا بسيطا لإظاهر الإختلاف المتواجد بين النسق ذو بعد واحد والنسق ذو بعدين.

+ +

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

+ +

وقمنا كذلك بإعطاء القيمة wrap للخاصية  {{cssxref("flex-wrap")}}،  مما ينتج عنه انتقال العناصر إلى سطر جديد في حالة إن كانت مساحة الحاوية غير كافية لضمان قيمة المرونة الأساسية.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper > div {
+  flex: 1 1 200px;
+}
+
+
+ +

{{ EmbedLiveSample('onedtwod', '500', '230') }}

+ +

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

+ +

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

+ +

نفس التنسيق باستعمال نظام الشبكات

+ +

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

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

+
+ +

من بين الأسئلة البسيطة التي يتوجب على كل مصمم طرحها عند محاولة الاختيار بين نظام الأجزاء المرنة و نظام الشبكة هي:

+ +
    +
  • هل أريد فقط التحكم في التنسيق في اتجاه واحد، إما على مستوى سطر أو عمود ( أفقيا أو عموديا فقط) - لدى استعمل نظام الأجزاء المرنة.
    • +
  • هل أريد أن أتحكم في التنسيق في الإتجاهين معا، أي على مستوى سطر وعمود ( أفقيا وعموديا معا) - لدى استعمل نظام الشبكة.
    • +
+ +

المحتوى الخارجي أو النسق الداخلي؟

+ +

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

+ +

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

+ +

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

+ +

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

+ +

المحاذات بين الأجزاء

+ +

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

+ +

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

+ +

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

+ +

في المثال الأول والذي يستعمل نظام الأجزاء المرنة، نتوفر على حاوية (وعاء) بها ثلاثة عناصر. قمنا بتحديد ارتفاع هاته الحاوية المرنة من خلال إعطاء قيمة للخاصية {{cssxref("min-height")}} للفئة wrapper. ولكي نبدأ ترتيب العناصر داخل هاته الحاوية المرنة انطلاقا من النهاية قمنا بإعطاء القيمة flex-end للخاصية {{cssxref("align-items")}}. نريد كذلك إلغاء خاصية التمدد الإفتراضية للعنصر box1 وجعله يتمدد ليحتل كل ارتفاع هاته الحاوية بالإضافة لذلك قمنا بإعطاء القيمة stretch للخاصية {{cssxref("align-self")}} بالإضافة قمنا بإعطاء هاته الخاصية القيمة flex-start بالنسية للعنصر box2 لكي يقوم بوضع نفسه (يصطف) انطلاقا من نقطة بداية هاته الحاوية المرنة.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+
+ +

{{ EmbedLiveSample('Box_alignment', '300', '230') }}

+ +

 المحاذاة في نظام الشبكات

+ +

في هذا المثال الثاني استعملنا نظام الشبكة لإنشاء نفس التنسيق. حيث سنستعمل خاصيات محاذاة الأجزاء كما ثم تطبيقها في التنسق الشبكي. نقوم بمحاذاة باستعمال start و end عوضا عن flex-start  وflex-end. في حالة التنسيق الشبكي، يتم توزيع العناصر لتستقر في الحيز الشبكي الخاص بها في هاته الشبكة، والمتمثلة في خلية واحدة في هذا المثال، مع إمكانية تكونه من عدد كثير من الخلايا الشبكية.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+
+ +

{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}

+ +

الوحدة fr و flex-basis

+ +

لقد قمنا بالتعرف على الكيفية التي تقوم بها الوحدة fr لتحديد نسبة من المساحة المتوفرللمسارات الشبكية لشبكة حاوية. عند المزج بين الوحدة fr و بين الدالة {{cssxref("minmax", "minmax()")}} فإننا نحصل على نتيجة ( سلوك) مشابهة لخاصيات flex التي يمنحها نظام تنسيق الأجزاء المرنة مع منحنا إمكاينة إنشاء نسق ذو بعدين.

+ +

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

+ +

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

+ +

الملأ الآلي لمسارات الشبكة

+ +

يمكننا إنشاء تأثير مشابه لنظام الأجزاء المرنة، مع إمكانية المحافظة على تموضع المحتوى بإحكام في أسطر وأعمدة، وذلك باستعمال الدالة repeat و الخاصيتين auto-fill و auto-fit لإنشاء مجموع هاته المسارات.

+ +

في المثال التالي، استعملت الخاصية auto-fill عوضا عن القيم الرقيمة داخل الدالة repeat و تحديد قيمة 200 بيكسل لمجموع هاته المسارات. أي أن هاته الشبكة سوف تعمل على إنشاء العدد الكافي من أعمدة المسارات لتتناسب مع حجم الحاوية.

+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+
+ +

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

+ +

عدد المسارات المرنة

+ +

يختلف الوضع هنا بالنسبة لنظام الأجزاء المرنة. في المثال الخاص بنظام الأجزاء المرنة،  تنتقل العناصر إلى السطر الموالي عندما تتجاوز 200 بيكسل. ويمكننا الوصول إلى نفس النتيجة بنظام الشبكة باستعمال  auto-fill والدالة {{cssxref("minmax", "minmax()")}}. وفي المثال الموالي، قمت بإنشاء مسارات آلية الملأ باستعمال الدالة minmax. أريد من المسارات أن تأخذ عرضا لا يقل عن 200 بيكسل، وحددت الحد الأقصى في 1fr. بمجرد أن يقوم المتصفح بحساب عدد المرات المرات الكافية لملأ الحاوية بمسارات ذات قياس 200 بيكسل - مع الأخد بعين الإعتبار قياس الفجوات المتواجدة بين مسارات الشبكة- فإنه يقوم بالتعامل مع المساحة القصوية 1fr كوحدة لتوزيعها بين جميع العناصر المتبيقة.

+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+ +

{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}

+ +

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

+ +

Grid and absolutely positioned elements

+ +

Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.

+ +

A grid container as containing block

+ +

To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item position: absolute it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.

+ +

In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has position: relative and so becomes the positioning context of this item.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">
+   This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
+  </div>
+  <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+  position: relative;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+
+ +

{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}

+ +

You can see that the item is taking the area from grid row line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usually for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn’t cause the additional row to be created to span to row line 3.

+ +

If we remove position: absolute from the rules for .box3 you can see how it would display without the positioning.

+ +

A grid container as parent

+ +

If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove position: relative from the wrapper above, positioning context is from the viewport, as shown in this image.

+ +

Image of grid container as parent

+ +

Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.

+ +

With a grid area as the parent

+ +

If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside .box3 of the grid.

+ +

I have given .box3 position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three
+    <div class="abspos">
+     This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
+    </div>
+  </div>
+  <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+
+ +

{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}

+ +

Grid and display: contents

+ +

A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and display: contents. The contents value of the display property is a new value that is described in the Display specification as follows:

+ +
+

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”

+
+ +

If you set an item to display: contents the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example. In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+
+ +

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

+
+ +

If I now add display: contents to the rules for box1, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+
+ +

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

+
+ +

This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use display: contents in a similar way with flexbox to enable nested items to become flex items.

+ +

As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don’t be afraid to mix it with other methods of doing layout, to get the different effects you need.

+ + diff --git a/files/ar/web/css/css_grid_layout/relationship_of_grid_layout_arabic/index.html b/files/ar/web/css/css_grid_layout/relationship_of_grid_layout_arabic/index.html deleted file mode 100644 index 7ccf10282f..0000000000 --- a/files/ar/web/css/css_grid_layout/relationship_of_grid_layout_arabic/index.html +++ /dev/null @@ -1,623 +0,0 @@ ---- -title: العلاقة بين التنسيق الشبكي وطرق التنسيق الأخرى -slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout_arabic -translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout ---- -

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

- -

نظام الشبكة ونظام الأجزاء المرنة

- -

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

- -

النسق ذو بعد واحد مقارنة مع النسق ذو بعدين

- -

سنستعمل مثالا بسيطا لإظاهر الإختلاف المتواجد بين النسق ذو بعد واحد والنسق ذو بعدين.

- -

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

- -

وقمنا كذلك بإعطاء القيمة wrap للخاصية  {{cssxref("flex-wrap")}}،  مما ينتج عنه انتقال العناصر إلى سطر جديد في حالة إن كانت مساحة الحاوية غير كافية لضمان قيمة المرونة الأساسية.

- -
- - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: flex;
-  flex-wrap: wrap;
-}
-.wrapper > div {
-  flex: 1 1 200px;
-}
-
-
- -

{{ EmbedLiveSample('onedtwod', '500', '230') }}

- -

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

- -

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

- -

نفس التنسيق باستعمال نظام الشبكات

- -

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

- -
- - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- -

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

-
- -

من بين الأسئلة البسيطة التي يتوجب على كل مصمم طرحها عند محاولة الاختيار بين نظام الأجزاء المرنة و نظام الشبكة هي:

- -
    -
  • هل أريد فقط التحكم في التنسيق في اتجاه واحد، إما على مستوى سطر أو عمود ( أفقيا أو عموديا فقط) - لدى استعمل نظام الأجزاء المرنة.
    • -
  • هل أريد أن أتحكم في التنسيق في الإتجاهين معا، أي على مستوى سطر وعمود ( أفقيا وعموديا معا) - لدى استعمل نظام الشبكة.
    • -
- -

المحتوى الخارجي أو النسق الداخلي؟

- -

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

- -

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

- -

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

- -

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

- -

المحاذات بين الأجزاء

- -

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

- -

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

- -

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

- -

في المثال الأول والذي يستعمل نظام الأجزاء المرنة، نتوفر على حاوية (وعاء) بها ثلاثة عناصر. قمنا بتحديد ارتفاع هاته الحاوية المرنة من خلال إعطاء قيمة للخاصية {{cssxref("min-height")}} للفئة wrapper. ولكي نبدأ ترتيب العناصر داخل هاته الحاوية المرنة انطلاقا من النهاية قمنا بإعطاء القيمة flex-end للخاصية {{cssxref("align-items")}}. نريد كذلك إلغاء خاصية التمدد الإفتراضية للعنصر box1 وجعله يتمدد ليحتل كل ارتفاع هاته الحاوية بالإضافة لذلك قمنا بإعطاء القيمة stretch للخاصية {{cssxref("align-self")}} بالإضافة قمنا بإعطاء هاته الخاصية القيمة flex-start بالنسية للعنصر box2 لكي يقوم بوضع نفسه (يصطف) انطلاقا من نقطة بداية هاته الحاوية المرنة.

- - - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
- -
.wrapper {
-  display: flex;
-  align-items: flex-end;
-  min-height: 200px;
-}
-.box1 {
-  align-self: stretch;
-}
-.box2 {
-  align-self: flex-start;
-}
-
- -

{{ EmbedLiveSample('Box_alignment', '300', '230') }}

- -

 المحاذاة في نظام الشبكات

- -

في هذا المثال الثاني استعملنا نظام الشبكة لإنشاء نفس التنسيق. حيث سنستعمل خاصيات محاذاة الأجزاء كما ثم تطبيقها في التنسق الشبكي. نقوم بمحاذاة باستعمال start و end عوضا عن flex-start  وflex-end. في حالة التنسيق الشبكي، يتم توزيع العناصر لتستقر في الحيز الشبكي الخاص بها في هاته الشبكة، والمتمثلة في خلية واحدة في هذا المثال، مع إمكانية تكونه من عدد كثير من الخلايا الشبكية.

- - - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3,1fr);
-  align-items: end;
-  grid-auto-rows: 200px;
-}
-.box1 {
-  align-self: stretch;
-}
-.box2 {
-  align-self: start;
-}
-
- -

{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}

- -

الوحدة fr و flex-basis

- -

لقد قمنا بالتعرف على الكيفية التي تقوم بها الوحدة fr لتحديد نسبة من المساحة المتوفرللمسارات الشبكية لشبكة حاوية. عند المزج بين الوحدة fr و بين الدالة {{cssxref("minmax", "minmax()")}} فإننا نحصل على نتيجة ( سلوك) مشابهة لخاصيات flex التي يمنحها نظام تنسيق الأجزاء المرنة مع منحنا إمكاينة إنشاء نسق ذو بعدين.

- -

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

- -

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

- -

الملأ الآلي لمسارات الشبكة

- -

يمكننا إنشاء تأثير مشابه لنظام الأجزاء المرنة، مع إمكانية المحافظة على تموضع المحتوى بإحكام في أسطر وأعمدة، وذلك باستعمال الدالة repeat و الخاصيتين auto-fill و auto-fit لإنشاء مجموع هاته المسارات.

- -

في المثال التالي، استعملت الخاصية auto-fill عوضا عن القيم الرقيمة داخل الدالة repeat و تحديد قيمة 200 بيكسل لمجموع هاته المسارات. أي أن هاته الشبكة سوف تعمل على إنشاء العدد الكافي من أعمدة المسارات لتتناسب مع حجم الحاوية.

- - - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 200px);
-}
-
- -

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

- -

عدد المسارات المرنة

- -

يختلف الوضع هنا بالنسبة لنظام الأجزاء المرنة. في المثال الخاص بنظام الأجزاء المرنة،  تنتقل العناصر إلى السطر الموالي عندما تتجاوز 200 بيكسل. ويمكننا الوصول إلى نفس النتيجة بنظام الشبكة باستعمال  auto-fill والدالة {{cssxref("minmax", "minmax()")}}. وفي المثال الموالي، قمت بإنشاء مسارات آلية الملأ باستعمال الدالة minmax. أريد من المسارات أن تأخذ عرضا لا يقل عن 200 بيكسل، وحددت الحد الأقصى في 1fr. بمجرد أن يقوم المتصفح بحساب عدد المرات المرات الكافية لملأ الحاوية بمسارات ذات قياس 200 بيكسل - مع الأخد بعين الإعتبار قياس الفجوات المتواجدة بين مسارات الشبكة- فإنه يقوم بالتعامل مع المساحة القصوية 1fr كوحدة لتوزيعها بين جميع العناصر المتبيقة.

- - - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
- -

{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}

- -

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

- -

Grid and absolutely positioned elements

- -

Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.

- -

A grid container as containing block

- -

To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item position: absolute it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.

- -

In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has position: relative and so becomes the positioning context of this item.

- - - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">
-   This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
-  </div>
-  <div class="box4">Four</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4,1fr);
-  grid-auto-rows: 200px;
-  grid-gap: 20px;
-  position: relative;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  position: absolute;
-  top: 40px;
-  left: 40px;
-}
-
- -

{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}

- -

You can see that the item is taking the area from grid row line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usually for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn’t cause the additional row to be created to span to row line 3.

- -

If we remove position: absolute from the rules for .box3 you can see how it would display without the positioning.

- -

A grid container as parent

- -

If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove position: relative from the wrapper above, positioning context is from the viewport, as shown in this image.

- -

Image of grid container as parent

- -

Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.

- -

With a grid area as the parent

- -

If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside .box3 of the grid.

- -

I have given .box3 position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.

- - - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three
-    <div class="abspos">
-     This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
-    </div>
-  </div>
-  <div class="box4">Four</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4,1fr);
-  grid-auto-rows: 200px;
-  grid-gap: 20px;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  position: relative;
-}
-.abspos {
-  position: absolute;
-  top: 40px;
-  left: 40px;
-  background-color: rgba(255,255,255,.5);
-  border: 1px solid rgba(0,0,0,0.5);
-  color: #000;
-  padding: 10px;
-}
-
- -

{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}

- -

Grid and display: contents

- -

A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and display: contents. The contents value of the display property is a new value that is described in the Display specification as follows:

- -
-

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”

-
- -

If you set an item to display: contents the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example. In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.

- -
- - -
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Two</div>
-  <div class="box box3">Three</div>
-  <div class="box box4">Four</div>
-  <div class="box box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-}
-
-
- -

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

-
- -

If I now add display: contents to the rules for box1, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.

- -
- - -
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Two</div>
-  <div class="box box3">Three</div>
-  <div class="box box4">Four</div>
-  <div class="box box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  display: contents;
-}
-
- -

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

-
- -

This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use display: contents in a similar way with flexbox to enable nested items to become flex items.

- -

As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don’t be afraid to mix it with other methods of doing layout, to get the different effects you need.

- - diff --git a/files/ar/web/css/transform/index.html b/files/ar/web/css/transform/index.html new file mode 100644 index 0000000000..93ef2bb84e --- /dev/null +++ b/files/ar/web/css/transform/index.html @@ -0,0 +1,136 @@ +--- +title: التحول (transform) +slug: Web/CSS/التحول +tags: + - التحول + - التحول في صفحات الطرز المتراصة + - خواص صفحات الطرز المتراصة + - صفحات الطرز المتراصة + - مرجع +translation_of: Web/CSS/transform +--- +
{{CSSRef}}
+ +

تسمح لك خاصية التحويل transform في CSS بإدارة وتغيير إحداثيات وأبعاد العناصر وما إلى ذلك كما سنتعرف في هذه الوثيقة.

+ +

ويتم ذلك عن طريق تعديل الإحداثيات لنموذج التنسيق المرئي للـ CSS.

+ +

 

+ +
{{EmbedInteractiveExample("pages/css/transform.html")}}
+ + + +

إذا كانت الخاصية لها قيمة مختلفة عن none ، فسيتم إنشاء سياق تجميع. في هذه الحالة ، سيكون الكائن بمثابة كتلة تحتوي على position: fixed العناصر التي تحتوي عليها.

+ +

بناء الجملة

+ +
/* قيم رئيسية */
+transform: none;
+
+/* قيم وضيفية */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: translate(12px, 50%);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: scale(2, 0.5);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: rotate(0.5turn);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+transform: translate3d(12px, 50%, 3em);
+transform: translateZ(2px);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleZ(0.3);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: perspective(17px);
+
+/*  قيم وضيفية متعددة */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+
+/* قيمة عامة */
+transform: inherit;
+transform: initial;
+transform: unset;
+
+ +

التحويل يمكن أن يحدد بقيمة واحدة أو أكثر من وضيفة.

+ +

القيم

+ +
+
{{cssxref("<transform-function>")}}
+
يمكنك استعمال وظيفة واحد أو أكثر من وظائف تحويل CSS ليتم تطبيقها. يتم تطبيق التحويلات المركبة بشكل فعال بالترتيب من اليسار إلى اليمين.
+
noneيحدد بعدم تحديد أي تحويل.
+
+ +

البنية

+ +
{{csssyntax}}
+ +

أمثلة

+ +

HTML

+ +
<div>عنصر التحويل</div>
+ +

CSS

+ +
div {
+  border: solid red;
+  transform: translate(30px, 20px) rotate(20deg);
+  width: 140px;
+  height: 60px;
+}
+ +

النتيجة

+ +

{{EmbedLiveSample("Examples", "400", "160")}}

+ +

Please see Using CSS transforms and {{cssxref("<transform-function>")}} for more examples.

+ +

الميزات

+ + + + + + + + + + + + + + + + + + + + + +
الميزةالحالةالتعليق
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Adds 3D transform functions.
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}Initial definition.
+ +

{{cssinfo}}

+ +

توافق المتصفح

+ + + +

{{Compat("css.properties.transform")}}

+ +

قد يفيدك

+ + diff --git "a/files/ar/web/css/\330\247\331\204\330\252\330\255\331\210\331\204/index.html" "b/files/ar/web/css/\330\247\331\204\330\252\330\255\331\210\331\204/index.html" deleted file mode 100644 index 93ef2bb84e..0000000000 --- "a/files/ar/web/css/\330\247\331\204\330\252\330\255\331\210\331\204/index.html" +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: التحول (transform) -slug: Web/CSS/التحول -tags: - - التحول - - التحول في صفحات الطرز المتراصة - - خواص صفحات الطرز المتراصة - - صفحات الطرز المتراصة - - مرجع -translation_of: Web/CSS/transform ---- -
{{CSSRef}}
- -

تسمح لك خاصية التحويل transform في CSS بإدارة وتغيير إحداثيات وأبعاد العناصر وما إلى ذلك كما سنتعرف في هذه الوثيقة.

- -

ويتم ذلك عن طريق تعديل الإحداثيات لنموذج التنسيق المرئي للـ CSS.

- -

 

- -
{{EmbedInteractiveExample("pages/css/transform.html")}}
- - - -

إذا كانت الخاصية لها قيمة مختلفة عن none ، فسيتم إنشاء سياق تجميع. في هذه الحالة ، سيكون الكائن بمثابة كتلة تحتوي على position: fixed العناصر التي تحتوي عليها.

- -

بناء الجملة

- -
/* قيم رئيسية */
-transform: none;
-
-/* قيم وضيفية */
-transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
-transform: translate(12px, 50%);
-transform: translateX(2em);
-transform: translateY(3in);
-transform: scale(2, 0.5);
-transform: scaleX(2);
-transform: scaleY(0.5);
-transform: rotate(0.5turn);
-transform: skew(30deg, 20deg);
-transform: skewX(30deg);
-transform: skewY(1.07rad);
-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-transform: translate3d(12px, 50%, 3em);
-transform: translateZ(2px);
-transform: scale3d(2.5, 1.2, 0.3);
-transform: scaleZ(0.3);
-transform: rotate3d(1, 2.0, 3.0, 10deg);
-transform: rotateX(10deg);
-transform: rotateY(10deg);
-transform: rotateZ(10deg);
-transform: perspective(17px);
-
-/*  قيم وضيفية متعددة */
-transform: translateX(10px) rotate(10deg) translateY(5px);
-
-/* قيمة عامة */
-transform: inherit;
-transform: initial;
-transform: unset;
-
- -

التحويل يمكن أن يحدد بقيمة واحدة أو أكثر من وضيفة.

- -

القيم

- -
-
{{cssxref("<transform-function>")}}
-
يمكنك استعمال وظيفة واحد أو أكثر من وظائف تحويل CSS ليتم تطبيقها. يتم تطبيق التحويلات المركبة بشكل فعال بالترتيب من اليسار إلى اليمين.
-
noneيحدد بعدم تحديد أي تحويل.
-
- -

البنية

- -
{{csssyntax}}
- -

أمثلة

- -

HTML

- -
<div>عنصر التحويل</div>
- -

CSS

- -
div {
-  border: solid red;
-  transform: translate(30px, 20px) rotate(20deg);
-  width: 140px;
-  height: 60px;
-}
- -

النتيجة

- -

{{EmbedLiveSample("Examples", "400", "160")}}

- -

Please see Using CSS transforms and {{cssxref("<transform-function>")}} for more examples.

- -

الميزات

- - - - - - - - - - - - - - - - - - - - - -
الميزةالحالةالتعليق
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Adds 3D transform functions.
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}Initial definition.
- -

{{cssinfo}}

- -

توافق المتصفح

- - - -

{{Compat("css.properties.transform")}}

- -

قد يفيدك

- - diff --git "a/files/ar/web/css/\330\247\331\204\330\252\330\271\331\204\331\212\331\202\330\247\330\252/index.html" "b/files/ar/web/css/\330\247\331\204\330\252\330\271\331\204\331\212\331\202\330\247\330\252/index.html" deleted file mode 100644 index 4fbf59d3f9..0000000000 --- "a/files/ar/web/css/\330\247\331\204\330\252\330\271\331\204\331\212\331\202\330\247\330\252/index.html" +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: التعليقات -slug: Web/CSS/التعليقات -tags: - - CSS - - تعليقات - - مرجع - - ملاحظات -translation_of: Web/CSS/Comments ---- -
{{CSSRef}}
- -

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

- -

طريقة الكتابة

- -

يمكن كتابة التعليقات في أي مكان داخل ورقة الأنماط، سواء كانت بسطر واحد أو بعدة أسطر.

- -
/* تعليق */
- -

أمثلة

- -
/* تعليق بسطر واحد */
-
-/*
-تعليق
-يمكن
-كتابته
-بأكثر
-من
-سطر
-*/
-
-/* التعليق أدناه جعل الخواص المذكروة للعنصر
-   Span
-   دون تأثير */
-/*
-span {
-  color: blue;
-  font-size: 1.5em;
-}
-*/
-
- -

تنبيهات

- -

الرمز /* */ يستخدم في كلا الحالتين سطر واحد أو متعدد الأسطر، لا يوجد أي طريقة أخرى من أجل كتابة تعليقات داخل ورقة الأنماط، عندما تستخدم عنصر {{htmlelement("style")}} فيمكنك استخدام <!-- --> من أجل إخفاء أكواد CSS عن المتصفحات القديمة، رغم أن ذلك غير مستحسن، معظم المبرمجين يستخدمون صيغة /* */.

- -

لا يمكن كتابة التعليقات بشكل متداخل، بمعنى أن التعليقات ستبدأ عند كتابة /* وستغلق عند أول علامة */ تقابلها.

- -

الخصائص

- - - -

اقرأ أيضًا

- - - -

 

diff --git "a/files/ar/web/css/\330\247\331\204\330\271\331\206\330\247\330\265\330\261_\330\247\331\204\330\252\331\212_\331\212\331\205\331\203\331\206_\330\252\330\255\330\261\331\212\331\203\331\207\330\247_\330\250\330\247\330\263\330\252\330\256\330\257\330\247\331\205_css_transitions/index.html" "b/files/ar/web/css/\330\247\331\204\330\271\331\206\330\247\330\265\330\261_\330\247\331\204\330\252\331\212_\331\212\331\205\331\203\331\206_\330\252\330\255\330\261\331\212\331\203\331\207\330\247_\330\250\330\247\330\263\330\252\330\256\330\257\330\247\331\205_css_transitions/index.html" deleted file mode 100644 index d9a0da44f2..0000000000 --- "a/files/ar/web/css/\330\247\331\204\330\271\331\206\330\247\330\265\330\261_\330\247\331\204\330\252\331\212_\331\212\331\205\331\203\331\206_\330\252\330\255\330\261\331\212\331\203\331\207\330\247_\330\250\330\247\330\263\330\252\330\256\330\257\330\247\331\205_css_transitions/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: العناصر التي يمكن تحريكها باستخدام CSS Transitions -slug: Web/CSS/العناصر_التي_يمكن_تحريكها_باستخدام_CSS_Transitions -tags: - - CSS - - CSS3 - - تحريك - - ترانزشن - - سلاسة - - نعومة -translation_of: Web/CSS/CSS_animated_properties ---- -

{{CSSRef}}

- -

يمكن تحريك بعض عناصر CSS بشكل ناعم وسلس عندما تتغير قيم وخصائص العناصر، سواء باستخدام CSS Animations أو CSS Transitions.

- -

هذه قائمة بالعناصر التي يمكن استخدام خاصية Transitions عليها:

- -

{{CSSAnimatedProperties}}

diff --git a/files/ar/web/guide/css/getting_started/index.html b/files/ar/web/guide/css/getting_started/index.html deleted file mode 100644 index 2bfc5c76bb..0000000000 --- a/files/ar/web/guide/css/getting_started/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Getting started with CSS -slug: Web/Guide/CSS/Getting_started -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Guide - - Needs - - NeedsBeginnerUpdate - - NeedsTranslation - - NeedsUpdate - - TopicStub - - Web -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

This tutorial introduces you to the basic features and language (the syntax) for Cascading Style Sheets (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers.

-

The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page lists more advanced resources.

- -

What you need to get started

-
    -
  • A text editor
    • -
  • A modern browser
    • -
  • Some experience working with a text editor and browser
    • -
-

Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.

-

Note: The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.

-

How to use this tutorial

-

To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.

-

Part I: The Basics of CSS

-

On each page, use the Information section to understand how CSS works. Use the Action section to try using CSS on your own computer.

-

To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.

-

To understand CSS in more depth, read the information that you find in boxes captioned More details. Use the links there to find reference information about CSS.

-

Part II: The Scope of CSS

-

A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.

-
    -
  1. JavaScript
    2. -
  2. SVG graphics
    3. -
  3. XML data
    4. -
  4. XBL bindings
    5. -
  5. XUL user interfaces
    6. -
diff --git a/files/ar/web/guide/css/getting_started/readable_css/index.html b/files/ar/web/guide/css/getting_started/readable_css/index.html deleted file mode 100644 index f65331a2bd..0000000000 --- a/files/ar/web/guide/css/getting_started/readable_css/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Readable CSS -slug: Web/Guide/CSS/Getting_started/Readable_CSS -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}This is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.

- -

معلومة: CSS مقروء (قابل للقراءة = سهل القراءة)

- -

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

- -

المساحة الفارغة

- -

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

- -

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

- -

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

- -

التخطيط دائما ما يكون شَخْصِـيًّا، ولكن إذا كان ملف النمط بين مجموعة من الأفراد بصفته جزءً من مشاريع مشتركة، من المحتمل أن تلك المشاريع تحمل اتفاقيات خاصة بها يتم الأعتماد عليها والعمل بها.

- -

 

- -
-
Examples
- -

بعض الأشخاص يفضلون دمج الخصائص مع بعضها، فقط يقومون بتقسيم الخط عندما يصبح طويلا جدا:

- -

.carrot {color: orange; text-decoration: underline; font-style: italic;}

- -


- بعض الناس يفضلون خاصية واحدة لكل سطر:

- -
.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-
- -

بعض الأشخاص يستخدمون مسافتين أو أربع أو علامة التبويب الشائعة:

- -
.carrot {
-  color: orange;
-  text-decoration: underline;
-  font-style: italic;
-}
-
- -


- (بعض الأشخاص يفضلون جعل كل شيء عموديا  (ولكن تخطيط مثل هذا من الصعب الحفاظ عليه.

- -
.carrot
-    {
-    color           : orange;
-    text-decoration : underline;
-    font-style      : italic;
-    }
-
- -

بعض الأشخاص يستخدمون مزيج من المسافات الفارغة أو البيضاء لتعزيز سهولة القراءة.

- -
.vegetable         { color: green; min-height:  5px; min-width:  5px }
-.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
-.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
-
-
- -

بعض الأشخاص يستخدمون علامة التبويب والبعض الآخر يستخدم فقط المسافات البيضاء.

- -

التعليقات
-  

- -

التعليقات في ملف النمط تبدأ بـ «*/» وتنتهي بـ«/*».
-
- يمكنك استخدام التعليقات في ملف النمط الخاص بك لكتابة تعليقات وتعليمات، وأيضا لكتابة تعليمات مؤقتة قد يكون الغرض منها هو اختبار العملية.
-
- التعليق في جزء من النمط، ضع هذا الجزء في تعليق بحيث يتجاهله المتصفح عند قراءة الملف، وكن حذرا في بداية ونهاية التعليق. بقية الأنماط والخصائص يجب أن يكون لها البنية الصحيحة.

- -
-
Example
- -
/* style for initial letter C in first paragraph */
-.carrot {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
-
-
- -

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

- -

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

- -
-
Example
- -

This rule makes {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, and {{ HTMLElement("h3") }} elements the same color.

- -

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

- -
/* color for headings */
-h1, h2, h3 {color: navy;}
-
-
- -

العمل: إضافة تعليقات و تحسين التخطيط

- -
    -
  1. قم بتعديل ملف النمط الخاص بك، وقم بالتأكد أن لديها هذه القواعد في ذلك (في أي أمر): - 
    strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-
    -
    2. -
  2. جعلها أكثر قابلية للقراءة من خلال إعادة ترتيبها بطريقة منطقية، وذلك من خلال إضافة مساحات بيضاء أو فارغة وأيضا تعليقات مناسبة.
    3. -
  3. قم بحفظ التعديلات واذهب إلى المتصفح لتشاهد الصفحة للتَّـأكد أنه لا يوجد أي تأثير على ملف النمط من خلال عمله. - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    4. -
- -
-
تحدي
- -
 
- -

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

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -

(هناك العديد من الطرق لفعل ذلك)

- -
-
Possible solution
- -

One way to do this is to put comment delimiters around the rule for .carrot:

- -
/*.carrot {
-  color: orange;
-}*/
- -

Hide solution

-
- -

See a solution for the challenge.

-
- -

ما التالي؟

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to specify the appearance of text in your document.

diff --git "a/files/ar/web/guide/css/getting_started/\330\247\331\204\331\202\331\210\330\247\330\246\331\205/index.html" "b/files/ar/web/guide/css/getting_started/\330\247\331\204\331\202\331\210\330\247\330\246\331\205/index.html" deleted file mode 100644 index 2b7fdeb726..0000000000 --- "a/files/ar/web/guide/css/getting_started/\330\247\331\204\331\202\331\210\330\247\330\246\331\205/index.html" +++ /dev/null @@ -1,384 +0,0 @@ ---- -title: القوائم -slug: Web/Guide/CSS/Getting_started/القوائم -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -

{{ CSSTutorialTOC() }}

- -

 الصفحة السابقة هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") أما هذا الجزء فهو العاشِر في سلسلة  تعليم لغة CSS على هذا الموقع  CSS Getting Started، وهو يصف كيف يُمكن استخدام لغة الـCSS لتحديد مظهر القائمة. ستقوم بإنشاء مثال مستند يحتوي على قائمة بالـHTML  وملف تنسيق بلغة الـCSS والذي من خلاله سوف نقوم بتنسيق القائمة التي قمنا بإنشَائها. 

- -

معلومات عن القوائم 

- -

لو نظرت إلى الجزء السابق، سوف يتضح لك  كيف يمكن إضافة محتـوًى قبل أي عنصر بحيث يظهر وكأنّه عنصرٌ في قائمة.

- -

تقدم لغة الـCSS بعض الخواص المُصَمَّـمَـة للقائمة، والتي يجب استخدامها دائما مع القوائم.

- -

لتحديد نمط القائمة، عليك استخدام هذه الخاصية «list-style» وذلك لتحديد نوع  العلامة الموجودة قبل كل عنصر في القائمة. 

- -
-

من الممكن أن يتم اختيار القائمة ككل بهذا الوسم «ul» أو اختيار عنصر بداخل القائمة من خلال هذا الوسم «li».  

- -

وعند اختيار القائمة ككل فإنَّ هذا الوسم يسمى الأب للقائمة وهو«ul»، ويورث الخواص التى تٌطبق عليه لكُـلِّ عنصر في القائمة. 

-
- -

القوائم غير المرتبة

- -

 في القوائم غير المُرَتَّـبة، يكون كل عنصر من القائمة معَلَّــمًا بنفس الطريقة. 

- -

 يوجد ثلاثة أنواع من العلامات، وأدناه هي كيفية عرض المتصفح لهذه العلامات:

- -

• disc  قرص 

- -

○ circle دائرة

- -

◘ square مربع

- -

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

- -
-

مثال 

- -

 هذه القواعد تُـوَضِّح علامات مختلفة لأصناف (classes) مختلفة من عناصر القائمة:

- -
li.open {
-    list-style: circle;
-}
-li.closed {
-    list-style: disc;
-}
-
- -

عندما يتم استعمال هذه الأصناف (classes) في قائمة، تقوم بالتمييز بين العناصر المفتوحة والمغلقة (مثلًا في قائمة مهامّ).

- -
<ul>
-  <li class="open">Lorem ipsum</li>
-  <li class="closed">Dolor sit</li>
-  <li class="closed">Amet consectetuer</li>
-  <li class="open">Magna aliquam</li>
-  <li class="closed">Autem veleum</li>
-</ul>
-
- -

وهكذا تبدو النتيجة: 

- -
  ○ Lorem ipsum
- -
  •  Dolor sit
- -
  •  Amet consectetuer
- -
  ○ Magna aliquam
- -
  • Autem veleum
- -
 
-
- -

القوائم المُـرَتَّـبة 

- -

في القوائم المُرتّبة، يكون لكل عنصر علامة مختلفة تُميّز موضعه في القائمة.

- -

استخدم الخاصية «list-style» لتعيين نمط القائمة، لتحديد نوع العلامة التي تظهر قبل كل عنصرفي القائمة.

- -
    -
  • decimal (تعداد بأرقام عشرية)
    • -
  • lower-roman (تعداد بحروف رومانية صغيرة)
    • -
  • upper-roman (تعداد بحروف رومانية كبيرة)
    • -
  • lower-latin (تعداد بحروف لاتيتنية صغيرة)
    • -
  • upper-latin (تعداد بحروف لاتينية كبيرة)
    • -
- -
-
 
- -

مثال                                                                                                                                              

- -
القاعدة التّالية تجعل العناصر في القائمة المرتّبة <ol> والتي تٌميز بصنف .«info» مُرتبة بحروف لاتينية كبيرة.  
- -
 
- -
<ol class="info">
-  <li>Lorem ipsum</li>
-  <li>Dolor sit</li>
-  <li>Amet consectetuer</li>
-  <li>Magna aliquam</li>
-  <li>Autem veleum</li>
-</ol>
- -
ol.info {
-    list-style: upper-latin;
-}
-
- -
-

عند تطبيق خاصية النمط على الـ «ol»  يُوَرِّثُ هذه الخاصية إلى الأبناء وهم عناصر القائمة المرتبة وهي العناصر المسبوقة بوسم «li».

-
- -

فتكون النتيجة كالتالي:

- -
ِA. Lorem ipsum
- -
B. Dolor sit
- -
C. Amet consectetuer
- -
D. Magna aliquam
- -
E. Autem veleum
-
- -
-
-

تفاصيل أكثر                                                                             

- -
الخاصية «list-style» هي خاصية مختصرة أي أنه من الممكن استخدامها إذا أردت أن يكون نمط القائمة سواء كان 
- -
 (صورة أو رقم أو شكل أو حرف )
- -
       ولكن يمكن أن تستخدم خواص منفردة لكل شكل على حدة وليكن للصورة لها  خاصية محددة مثل «list-style-image»    
- -

يمكنك مراجعة هذه الخاصية وما بها من تفاصيل من خلال هذه الصفحة  list style 

- -
إن كنت تستخدم لغة HTML فإنها تُـوفر وسوما مُختلفة، فعلى سبيل المثال  للقوائم المرتبة يُستخدم هذا الوسم «ol»
- -
والقوائم  الغير مرتبة «ul»
- -
  فيفضّل استخدام هذه القوائم بحسب دلالتها ولكن من الممكن إذا أردت أن تجعل القوائم المرتبة كغير المرتبة شكلا 
- -
والعكس، فذلك يتم من خلال الـCSS أيضا يتم كل هذا باستخدام الخواص المختلفة لتحصل على ما تريد من نتائج 
- -
ولكن يُفَضَّـل أن تُسْتَخدم كل قائمة حسب وضعها والاستخدام الخاص بها. 
- -
 
- -

قد تختلف المتصفّحات في طرق عرضها لتنسيق القوائم، لا يُمكن أن تحصُل على نفس النتيجة في كل المتصفحات. 

-
-
- -

العَـدَّادَات

- -
-

ملاحظة هامّة:

- -
  بعض المتصفحات لا تدعم العدّادات، تقدّم هذه الصّفحة CSS contents and browser comptability على موقع QuirksMode معلومات تفصيلية عن دعم  المتصفحات لهذه الميزة وميزات أخرى.
- -
كما توفّر الصّفحات الفرديّة في CSS مرجعا للمعلومات عن دعم  المتصفحات أيضا لهذه الخاصية وغيرها.
-
- -

 

- -
يُمكن استخدام العدّادات لعدّ أيّة عناصر، وليس فقط عناصر القوائم، فمثلًا يمكن عدّ العناوين والفقرات في المستند.
- -
تحتاج إلى إنشاء عدّاد counter باسم خاص بك لتستخدمه فى العّد.
- -
 
- -
 يمكن تهيئة العدّاد قبل البدء بالعدّ باستخدام الخاصية «counter-reset» واسم العدادَ الخاص بك الذي أنشأته. 
- -
وعليك أن تعلم أن الأب للعنصر الذي تقوم بِعده هو المكان الأنسب لتهيئة العّداد، ولكن يمكن استخدام أي عنصر يأتي قبل العناصر المطلوب عدّها.
- -
 
- -
 في كلّ عنصر ترغب بعدّه، استخدم الخاصية «counter-increment» مع اسم العّداد الذي تٌريده.
- -
 استخدم «befor» ،«:after:» لعرض العدّاد، مع استخدام هذه الخاصية «content» مع العنصر المٌحدد المُراد عّده (سيتم شرح ذلك لاحقاَ).
- -
يمكنك معرفة معلومات أكثر عن هذه الخاصية في هذه الصفحة Content. 
- -
 
- -

استخدام ()counter مع اسم العّداد كقيمة لـcontent   

- -
ويمكن كذلك استخدام نوع للعلامة فى العد. الأنواع المُتاحة هي التي تم عرضها في فقرة القوائم المرتّبة.
- -

عادةً يزيد العنصر الّذي يعرض العدّاد من قيمته. 

- -
-
          مثال                                                                                                                                            
- -
 
- -
    هذه القاعدة تُنشئ عدّادًا لكلّ عنصر<h3> له تصنيف (كلاس) «numbered»:                                          
- -
h3.numbered {
-    counter-reset: mynum;
-}
-
- -

 أما هذه القاعدة فهى تعرض عّداد الـ <p>  والتي لها تصنيف «numbered»

- -
<p class="numbered">Lorem ipsum</p>
-<p class="numbered">Dolor sit</p>
-<p class="numbered">Amet consectetuer</p>
-<p class="numbered">Magna aliquam</p>
-<p class="numbered">Autem veleum</p>
-
- -
body {
-   counter-reset: mynum;
-}
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}
-
- -

والنتيجة ستبدُو هكذا:

- -
1: Lorem ipsum
- -
2: Dolor sit
- -
3: Amet consectetuer
- -
4: Magna aliquam
- -
5:  Autem veleum
- -
 
-
- -
-
تفاصِيل أكثر                                                                                                                                 
- -
 
- -
   لا تستطيع استخدام العَدادات إلا إذا تيقنت من أنَ كل شخص يستخدم العدادات يستعمل  متصفحاً يُدعمها.  
- -
  العًدادات بها مِيزات ويمكن تنسيقها منفصلة عن عنصر القَائمة المرافِقة لها كما في المثال السابق 
- -
ترى أن العًدادات لها تنسيق خاص فهي بِخط عريض غير عناصر القّائمة.  
- -
 
- -
يمكن أيضًا استخدام العدّادات بطرق أكثر تعقيدًا؛ مثلًا: لعدّ الفقرات والعناوين والعناوين الفرعيّة والفقرات في المستندات الرسمية.
- -
 ولتفاصِيل أكثر عليك الرجوع إلى هذِه الصفحة  Automatic counters and numbering.
-
- -

تمرين: قوائم مُنسقة

- -

   قم بإنشاء ملف  HTML  باسم doc2.html، انسخ والصق هذا المحتوى إلى الملف الخاص بك:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Sample document 2</title>
-    <link rel="stylesheet" href="style2.css">
-  </head>
-  <body>
-
-    <h3 id="oceans">The oceans</h3>
-    <ul>
-      <li>Arctic</li>
-      <li>Atlantic</li>
-      <li>Pacific</li>
-      <li>Indian</li>
-      <li>Southern</li>
-    </ul>
-
-    <h3 class="numbered">Numbered paragraphs</h3>
-    <p class="numbered">Lorem ipsum</p>
-    <p class="numbered">Dolor sit</p>
-    <p class="numbered">Amet consectetuer</p>
-    <p class="numbered">Magna aliquam</p>
-    <p class="numbered">Autem veleum</p>
-
-  </body>
-</html>
-
- -

  قم بإنشاء ملف CSS وقُم بتسميته  style2.css، انسخ والصق هذه الشيفرة البرمجية إلى صفحتك:

- -
/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}
-
- -

قم بتغيير أسلوب  التعليقات كما تحبّ إن لم يعجبك هذا.

- -

افتح الملف على المٌتصفح الخاص بِك. إذا كان متصفحط يَدعم العّدادات سوف ترى النتيجة كما هي موضحة أدناه، وإن لم يكُن يُدعمها فلن ترى إلاَّ الأرقام والنُقتطان قبل القائمة التي هي بعنوان «Numbered paragraphs» :

- -

The oceans

- -
Arctic
- -
Atlantic
- -
Pacific
- -
Indian
- -
Southern
- -

Numbered paragraphs

- -
1:Lorem ipsum
- -
2:Dolor sit
- -
3:Amet consectetuer
- -
4:Magna aliquam
- -
5:Autem veleum
- -
-
 تمرين إضافي                                                                                                                                          
- -
 أضِف قاعدة لملف التنسيق الخاص بك بحيث تجعل النمط قبل عناصِر القائِمة بحروف رومانية من i إلى v، بحيث تحصل على هذه النتيجة: 
- -
 
- - - - - - - -
-

The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

وقم بتغييرها مرة أُخرى إلى حروف لاتينية كبيرة قبل عناصرالقائمة، وستكون النتيجة هكذا: 

- - - - - - - -
-

(A) The oceans

- -

. . .

- -

(B) Numbered paragraphs

- -

. . .

-
-
- -

See solutions to these challenges.

- -

ما هو القادم ؟

- -

الصفحة القادمو هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")

- -

عندما يعرض المتصفّح مستند الخاص بك، فإِنه يُنشئ مساحات حول العناصر عندما يضعها في مواضعها في الصّفحة. الصفّحة القادِمة تصف كيف يُمكن استخدام لغة الـCSS لتَّعامل مع  هذه الأشكال من خلال الـboxes.

diff --git a/files/ar/web/guide/css/index.html b/files/ar/web/guide/css/index.html deleted file mode 100644 index 2bd34295c7..0000000000 --- a/files/ar/web/guide/css/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: CSS developer guide -slug: Web/Guide/CSS -tags: - - CSS - - Guide - - Landing - - NeedsTranslation - - TopicStub -translation_of: Learn/CSS -translation_of_original: Web/Guide/CSS ---- -

{{draft}}

-

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or other markup languages such as SVG. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media. The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.

-

CSS is one of the core languages of the open Web and has a standardized W3C specification.

-

{{LandingPageListSubpages}}

-

Pages elsewhere

-

Here are other pages related to CSS that should be linked to from here.

-

See also

- diff --git a/files/ar/web/guide/graphics/index.html b/files/ar/web/guide/graphics/index.html new file mode 100644 index 0000000000..9c8335471a --- /dev/null +++ b/files/ar/web/guide/graphics/index.html @@ -0,0 +1,47 @@ +--- +title: الرسومات على الويب +slug: Web/Guide/الرسومات +tags: + - رسومات + - رسوميات ثلاثية الأبعاد + - رسوميات ثنائية الأبعاد + - كانفاس +translation_of: Web/Guide/Graphics +--- +

غالباً ما تحتاج المواقع والتطبيقات لعرض الرسومات. الصور العاديّة يمكن عرضها بسهولة باستخدام العنصر {{HTMLElement("img")}}، أو بإعداد خلفيّة الصفحة باستخدام الخاصيّة {{cssxref("background-image")}}. تستطيع أيضاً إنشاء رسومات في الهواء (طافية)، أو يمكنك التلاعب بالصور بعد حدث ما. هذه المقالات توفر نظرة حول كيف يمكنك القيام بهذه الأشياء.

+ +
+
+

الرسوميات ثنائيّة الأبعاد

+ +
+
الكانفاس
+
عنصر <canvas> يوفر واجهات برمجيّة لرسم رسومات ثنائيّة الأبعاد باستخدام لغة الجافاسكربت.
+
الرسوميات المتجهيّة المتغيرة
+
تتيح الرسوميات المتجهيّة المتغيرة (SVG) لك استخدام الخطوط، المنحنيات، و غيرها من الأشكال الهندسيّة لتشكيل الرسومات. مع الفيكتور (vector) يمكنك إنشاء صور يمكن أن يتم تحجيمها بدون أن تفقد دقتها.
+
+ +

عرض المزيد...

+
+ +
+

الرسوميات ثلاثيّة الأبعاد

+ +
+
تقنيّة WebGL
+
دليلك للبدء مع تقنيّة WebGL، الواجهة البرمجيّة المخصصة للويب لرسم رسوميات ثلاثيّة الأبعاد. تسمح هذه التقنيّة باستخدام معايير OpenGL ES في محتوى الويب.
+
+ +

فيديو

+ +
+
استخدام ملفات الفيديو والصوت في لغة ترميز النص الفائق
+
تضمين ملفات الفيديو والصوت في صفحات الويب، والتحكم بتشغيلها.
+
+ +
+
تقنيّة WebRTC
+
تقنية RTC في الويب تعني الإتصال في الوقت الحالي (Real-Time Communications), وهي تقنيّة تسمح بتمكين تدفق الصوت والصورة ومشاركتها بين المُتصفحات.
+
+
+
diff --git a/files/ar/web/guide/html/html5/html5_element_list/index.html b/files/ar/web/guide/html/html5/html5_element_list/index.html deleted file mode 100644 index 4c2a85ac03..0000000000 --- a/files/ar/web/guide/html/html5/html5_element_list/index.html +++ /dev/null @@ -1,599 +0,0 @@ ---- -title: مجموعه عناصر لغة HTML5 -slug: Web/Guide/HTML/HTML5/HTML5_element_list -tags: - - اتش تي ام ال - - اتش تي ام ال 5 - - المبتدئين - - الويب - - انترنت - - دليل - - وسوم -translation_of: Web/HTML/Element -translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list ---- -

كل عناصر HTML5 المعتمدة مدرجة هنا، حيث أن اسماءها تصفها ومرتبة في مجموعات حسب وظائفها.

- -

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

- -

العلامة This element was added as part of HTML5 ترمز إلى أن العنصر قد تمت إضافته في HTML5، لاحظ أن العناصر الأخرى الموجودة هنا قد تكون ممددة أو معدلة في معانيها ضمن مواصفات HTML5.

- -

عنصر الجذر

- - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("html")}}وهو يمثل جذر الـ HTML أو مستند XHTML و يجب أن تكون جميع العناصر الأخرى من نسل هذا العنصر.
- -

البيانات الرئيسة للوثيقة

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("head")}}وهو يمثل مجموعة من البيانات الوصفية حول الوثيقة بما في ذلك الوصلات أو تعريفات و البرامج النصية والسكريبتات و انماط الـ CSS .
{{HTMLElement("title")}}يحدد عنوان الوثيقة  كما هو موضح في شريط عنوان المتصفح أو في علامة التبويب الصفحة ولابد أن يحتوي على نصوص فقط لا غير .
{{HTMLElement("base")}}وهو يحدد الرابط الفتراضي للوثيقة كي يتم من خلاله فرز الروابط المنتسبة لصفحة من الرابط التابعه لاجناس اخرى .
{{HTMLElement("link")}}وهو يستخدم لربط ملفات  ألـ CSS والـ Javascript الخارجي مع وثيقة HTML .
{{HTMLElement("meta")}}يستخدم لتعريف العناصر التي لايمكن تعريفها مثل الترميز وغير من الاستخدامات الاخرى .
{{HTMLElement("style")}}يستخدم لكتابة CSS داخل وثيقة HTML  .
- -

البرمجة

- - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("script")}}يستخدم لربط ملف نصي برمجي خارجي او تضمين ملف نص برمجي ويمكن الكتابة داخله بالغات متعدده مثل javascript او php و غيره .
{{HTMLElement("noscript")}}يحدد محتوى بديل لعرضه عندما لا يدعم المتصفح البرمجة .
{{HTMLElement("template")}}This element has been added in HTML5حاوية للمحتوى العميل أثناء وقت التشغيل باستخدام جافا سكريبت .
- -

اقسام التضمين

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("body")}} -
وهو يمثل محتوى وثيقة HTML ولابد ان تكون كل العناصر الضاهره في الجسم داخلة .
-
{{HTMLElement("section")}} This element has been added in HTML5يمثل قطعه في في المستند .
{{HTMLElement("nav")}} This element has been added in HTML5يحدد المقطع الذي يحتوي على ارتباطات التنقل .
{{HTMLElement("article")}} This element has been added in HTML5يحدد محتوى  منفصل بذاته والذي يمكن أن يوجد بشكل مستقل عن بقية المحتوى.
{{HTMLElement("aside")}} This element has been added in HTML5يعرف بعض المحتويات التي لها علاقة فضفاضة إلى محتوى الصفحة. إذا تم إزالته ، والمحتوى المتبقية لا يزال من المنطقي .
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>وهو يمثل 6 مستويات من عناوين النصية واكبرهم حجماً <h1> وعكسه <h6>
{{HTMLElement("header")}} This element has been added in HTML5يحدد محتوى بذاتها التي يمكن أن توجد بشكل مستقل عن بقية المحتوى . 
{{HTMLElement("footer")}} This element has been added in HTML5>يحدد تذييل للصفحة أو قسم  فإنه غالبا ما يحتوي على إشعار حقوق التأليف والنشر وبعض الروابط على المعلومات القانونية أو عناوين .
{{HTMLElement("address")}}يعرف الجزء الذي يحتوي على معلومات للإتصال به.
{{HTMLElement("main")}}This element has been added in HTML5يحدد المحتوى الرئيسي أو مهم في الوثيقة. هناك واحد فقط <main> عنصر في الوثيقة.
- -

جداول البيانات

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("p")}}يحدد الجزء الذي يجب أن يتم عرض كفقرة .
{{HTMLElement("hr")}}يمثل خط فاصل بين موضوعين .
{{HTMLElement("pre")}}يحدد النص المكتوب كما هو بالسطر وافراغ .
{{HTMLElement("blockquote")}} -

يمثل المحتوى الذي يتم نقلا عن مصدر آخر.

-
{{HTMLElement("ol")}}يحدد قائمة مرتبة مرقمة من العناصر .
{{HTMLElement("ul")}}يحدد قائمة غير مرتبة من البنود.
{{HTMLElement("li")}}يحدد عنصر من قائمة التعداد.
{{HTMLElement("dl")}}تعرف على قائمة تعريف ، وهذا هو ، على قائمة المصطلحات والتعاريف المرتبطة بها .
{{HTMLElement("dt")}}يمثل مصطلح يعرفه القادم < DD > .<dd>.
{{HTMLElement("dd")}}يمثل تعريف المصطلحات الواردة فورا قبل ذلك.
{{HTMLElement("figure")}} This element has been added in HTML5يمثل الرقم يتضح كجزء من الوثيقة.
{{HTMLElement("figcaption")}} This element has been added in HTML5يمثل أسطورة شخصية .
{{HTMLElement("div")}}يمثل وعاء العامة مع عدم وجود معنى خاص .
- -

عناصر النصوص

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("a")}}يمثل الارتباط التشعبي   وربط إلى مورد آخر .
{{HTMLElement("em")}}يمثل خط مائل .
{{HTMLElement("strong")}} يمثل خط مشدد .
{{HTMLElement("small")}}يمثل خط نحيف .
{{HTMLElement("s")}}يمثل نص مشطوب او محذوف
{{HTMLElement("cite")}} -

يمثل عنوان العمل. .

-
{{HTMLElement("q")}}يمثل الاقتباس المضمنة. .
{{HTMLElement("dfn")}}يمثل مصطلح الذي يرد في أقرب محتوى الجد التعريف.
{{HTMLElement("abbr")}}يمثل اختصار أو اختصار . التوسع في اختصار يمكن أن تكون ممثلة في سمة العنوان.
{{HTMLElement("data")}} This element has been added in HTML5الزميلة ل محتواه ما يعادل المقروءة آليا . ( هذا العنصر فقط في إصدار WHATWG للمعيار HTML ، و ليس في الإصدار W3C من HTML5
{{HTMLElement("time")}} This element has been added in HTML5يمثل قيمة التاريخ والوقت . أي ما يعادل المقروءة آليا يمكن أن تكون ممثلة في سمة التاريخ والوقت .
{{HTMLElement("code")}}يمثل عنصر يكتب بداخله الكود
{{HTMLElement("var")}}يمثل المتغير ، وهذا هو ، تعبير أو البرمجة الرياضية السياق الفعلي ، معرف تمثل ثابت ، رمزا تحديد الكمية الفعلية ، معلمة وظيفة ، أو مجرد نائب في النثر .
{{HTMLElement("samp")}}يمثل الناتج من برنامج أو جهاز كمبيوتر .
{{HTMLElement("kbd")}}تمثل مدخلات المستخدمين، في كثير من الأحيان من لوحة المفاتيح ، ولكن ليس بالضرورة . قد تمثل المدخلات الأخرى ، مثل الأوامر الصوتية كتب .
{{HTMLElement("sub")}},{{HTMLElement("sup")}}يمثل نص منخفظ او مرتفع
{{HTMLElement("i")}}تمثل بعض النص في صوت بديل أو المزاج، أو على الأقل من نوعية مختلفة ، مثل تسمية التصنيف، مصطلح تقني ، عبارة اصطلاحية ، الفكر، أو اسم السفينة
{{HTMLElement("b")}}يمثل نص مشدد .
{{HTMLElement("u")}}يمثل annoatation غير النصية التي العرض التقليدية و التسطير ، واصفة هذا النص كما يجري أخطأ في الهجاء أو وصفها الاسم الصحيح في النص الصيني
{{HTMLElement("mark")}} This element has been added in HTML5يمثل نص مشار اليه بالون الاصفر
{{HTMLElement("ruby")}} This element has been added in HTML5يمثل المحتوى إلى أن تكون علامة مع شروح روبي ، المديين القصير من النص قدمت جنبا إلى جنب مع النص. وكثيرا ما يستخدم هذا بالتزامن مع لغة شرق آسيا حيث تعمل شروح كدليل للنطق ، مثل furigana الياباني . .
{{HTMLElement("rt")}} This element has been added in HTML5يمثل نص الشرح روبي .
{{HTMLElement("rp")}} This element has been added in HTML5يمثل قوسين حول الشرح روبي ، وتستخدم لعرض الشرح بطريقة بديلة من قبل المتصفحات لا تدعم العرض القياسية ل شروحه.
{{HTMLElement("bdi")}} This element has been added in HTML5يمثل النص الذي يجب أن تكون معزولة عن محيطها ل تنسيق النص ثنائي الاتجاه . لأنها تتيح تضمين فترة من النص مع مختلف أو غير معروف، الاتجاهية .
{{HTMLElement("bdo")}}يمثل اتجاهها من أبنائها ، من أجل تجاوز صراحة خوارزمية ثنائية الاتجاه يونيكود
{{HTMLElement("span")}}يمثل النص مع عدم وجود معنى محدد . هذا لابد من استخدامها عند ينقل أي عنصر النص الدلالي الآخرين معنى كاف، وهو ، في هذه الحالة، وغالبا ما رفعتها سمات عالمية مثل الطبقة ، لانج ، أو دير.
{{HTMLElement("br")}}يمثل سطر جديد
{{HTMLElement("wbr")}} This element has been added in HTML5يمثل فرصة كسر خط ، وهذا هو نقطة المقترحة لل التفاف النص من أجل تحسين إمكانية القراءة من تقسيم النص على عدة أسطر .
- -

التعديلات

- - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("ins")}}عنصر مضاف او تم تعديله
{{HTMLElement("del")}}عنصر محذوف وهو مثيل العنصر {{HTMLElement("s")}}
- -

التضمين و الميديا

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("img")}}يستخدم لربط الصور بالوثيقه
{{HTMLElement("iframe")}}يمثل السياق تصفح متداخلة ، وهذا هو وثيقة HTML المضمنة.
{{HTMLElement("embed")}} This element has been added in HTML5تمثل نقطة التكامل ل خارجي ، في كثير من الأحيان غير HTML ، تطبيق أو المحتوى التفاعلي .
{{HTMLElement("object")}}تمثل الموارد الخارجية ، التي تعامل على أنها صورة، وثيقة الفرعية HTML ، أو الموارد الخارجية التي سيتم تجهيزها من قبل في المكونات .
{{HTMLElement("param")}}تعرف المعلمات للاستخدام من قبل المكونات الإضافية التي يحتج بها <كائن > العناصر.
{{HTMLElement("video")}} This element has been added in HTML5يمثل الفيديو ، والملفات المرتبطة به الصوت و تعليق عليها، مع واجهة اللازمة لتشغيله .
{{HTMLElement("audio")}} This element has been added in HTML5يمثل الصوت ، أو تيار الصوت.
{{HTMLElement("source")}} This element has been added in HTML5يسمح المؤلفين لتحديد الموارد وسائل الإعلام البديلة ل عناصر الوسائط مثل {{HTMLElement("video")}} or {{HTMLElement("audio")}}.
{{HTMLElement("track")}} This element has been added in HTML5يسمح المؤلفين لتحديد مسار النص توقيت ل عناصر الوسائط مثل {{HTMLElement("video")}}or {{HTMLElement("audio")}}.
{{HTMLElement("canvas")}} This element has been added in HTML5تمثل منطقة خريطة أبيت أن النصوص يمكن استخدامها ل تقديم الرسومات ، مثل الرسوم البيانية والرسوم البيانية لعبة ، أو أي الصور المرئية على الطاير .
{{HTMLElement("map")}}بالتزامن مع {{HTMLElement("area")}}, يحدد مخطط صورة.
{{HTMLElement("area")}}بالتزامن مع {{HTMLElement("map")}},يحدد مخطط صورة.
{{SVGElement("svg")}} This element has been added in HTML5تعرف على إد الإدارة الانتخابية دائرة التنمية الاقتصادية صورة اتجاهي .
{{MathMLElement("math")}} This element has been added in HTML5يحدد صيغة رياضية.
- -

Tabular data

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("table")}}تمثل البيانات مع أكثر من بعد واحد.
{{HTMLElement("caption")}}يمثل عنوان الجدول.
{{HTMLElement("colgroup")}}تمثل مجموعة من واحد أو أكثر من الأعمدة من الجدول.
{{HTMLElement("col")}}يمثل عمود من الجدول.
{{HTMLElement("tbody")}}يمثل كتلة من الصفوف التي تصف البيانات ملموسة من الجدول.
{{HTMLElement("thead")}}يمثل كتلة من الصفوف التي تصف التسميات عمود من الجدول.
{{HTMLElement("tfoot")}}يمثل كتلة من الصفوف التي تصف ملخصات عمود من الجدول.
{{HTMLElement("tr")}}يمثل صف من الخلايا في الجدول.
{{HTMLElement("td")}}يمثل خلية البيانات في الجدول.
{{HTMLElement("th")}}يمثل خلية رأس في الجدول.
- -

 الاشكال

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("form")}}عنصر تبادل المعلومات مع الخادم حيث يكون داخله مجموعه من العناصر تتيح لمستخدم التعديل والاضافه
{{HTMLElement("fieldset")}}مثل عنصار او ضوابط مرتبة
{{HTMLElement("legend")}}يمثل عنوان <fieldset> .
{{HTMLElement("label")}}يعتبر توضيح او اسم عنصر داخل <form>
{{HTMLElement("input")}}يمثل حقل من البينات مما يتحُيح للمستخدم استعمالها
{{HTMLElement("button")}}عباره عن وز .
{{HTMLElement("select")}} يمثل مجموعه من الخيارات المٌسدله المرتبة .
{{HTMLElement("datalist")}} This element has been added in HTML5يمثل  قائمة منسدله تحوي مجموعه من الخيارات المعدة مسبقاً اشبه باقائمة .
{{HTMLElement("optgroup")}}يمثل عنوان لمجموعه خيارات <option> الي تكون ادخل {{HTMLElement("optgroup")}} الي هي داخل {{HTMLElement("datalist")}}.
{{HTMLElement("option")}}يمثلخيارات داخل العنصر{{HTMLElement("select")}} أو اقتراح من{{HTMLElement("datalist")}}.
{{HTMLElement("textarea")}}مربع يكتب بداخله نص يمكن التحكم به .
{{HTMLElement("keygen")}} This element has been added in HTML5يمثل سطر مولد مفاتيح .
{{HTMLElement("output")}} This element has been added in HTML5سَحاب يمكن التحكم به .
{{HTMLElement("progress")}} This element has been added in HTML5يمثل شريط اخذ بالمتلاء يعني مثل الداون لود منيجر لما يكون ايحمل
{{HTMLElement("meter")}} This element has been added in HTML5يمثل قيمة مئويه اخذه بالمتلاء بشكل صغير .
- -

العناصر التفاعلية

- - - - - - - - - - - - - - - - - - - - - - - - - - -
العنصرنبذة عنه
{{HTMLElement("details")}} This element has been added in HTML5يمثل قائمة مُنسدله من الخيارات
{{HTMLElement("summary")}} This element has been added in HTML5وهو يمثل عنوان لقائمة العنصر <details> .
{{HTMLElement("menuitem")}} This element has been added in HTML5يمثل الأوامر  التي تمكن المستخدم  من الاستدعاء.
{{HTMLElement("menu")}} This element has been added in HTML5يمثل قائمة من العناصر .
- -

وهنُاك أيضاً

- - diff --git a/files/ar/web/guide/mobile/index.html b/files/ar/web/guide/mobile/index.html new file mode 100644 index 0000000000..cc288a9c45 --- /dev/null +++ b/files/ar/web/guide/mobile/index.html @@ -0,0 +1,18 @@ +--- +title: Mobile Web development +slug: Web_Development/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +--- +

Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.

+ diff --git "a/files/ar/web/guide/\330\247\331\204\330\261\330\263\331\210\331\205\330\247\330\252/index.html" "b/files/ar/web/guide/\330\247\331\204\330\261\330\263\331\210\331\205\330\247\330\252/index.html" deleted file mode 100644 index 9c8335471a..0000000000 --- "a/files/ar/web/guide/\330\247\331\204\330\261\330\263\331\210\331\205\330\247\330\252/index.html" +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: الرسومات على الويب -slug: Web/Guide/الرسومات -tags: - - رسومات - - رسوميات ثلاثية الأبعاد - - رسوميات ثنائية الأبعاد - - كانفاس -translation_of: Web/Guide/Graphics ---- -

غالباً ما تحتاج المواقع والتطبيقات لعرض الرسومات. الصور العاديّة يمكن عرضها بسهولة باستخدام العنصر {{HTMLElement("img")}}، أو بإعداد خلفيّة الصفحة باستخدام الخاصيّة {{cssxref("background-image")}}. تستطيع أيضاً إنشاء رسومات في الهواء (طافية)، أو يمكنك التلاعب بالصور بعد حدث ما. هذه المقالات توفر نظرة حول كيف يمكنك القيام بهذه الأشياء.

- -
-
-

الرسوميات ثنائيّة الأبعاد

- -
-
الكانفاس
-
عنصر <canvas> يوفر واجهات برمجيّة لرسم رسومات ثنائيّة الأبعاد باستخدام لغة الجافاسكربت.
-
الرسوميات المتجهيّة المتغيرة
-
تتيح الرسوميات المتجهيّة المتغيرة (SVG) لك استخدام الخطوط، المنحنيات، و غيرها من الأشكال الهندسيّة لتشكيل الرسومات. مع الفيكتور (vector) يمكنك إنشاء صور يمكن أن يتم تحجيمها بدون أن تفقد دقتها.
-
- -

عرض المزيد...

-
- -
-

الرسوميات ثلاثيّة الأبعاد

- -
-
تقنيّة WebGL
-
دليلك للبدء مع تقنيّة WebGL، الواجهة البرمجيّة المخصصة للويب لرسم رسوميات ثلاثيّة الأبعاد. تسمح هذه التقنيّة باستخدام معايير OpenGL ES في محتوى الويب.
-
- -

فيديو

- -
-
استخدام ملفات الفيديو والصوت في لغة ترميز النص الفائق
-
تضمين ملفات الفيديو والصوت في صفحات الويب، والتحكم بتشغيلها.
-
- -
-
تقنيّة WebRTC
-
تقنية RTC في الويب تعني الإتصال في الوقت الحالي (Real-Time Communications), وهي تقنيّة تسمح بتمكين تدفق الصوت والصورة ومشاركتها بين المُتصفحات.
-
-
-
diff --git a/files/ar/web/html/element/article/index.html b/files/ar/web/html/element/article/index.html new file mode 100644 index 0000000000..4ffbdbe80a --- /dev/null +++ b/files/ar/web/html/element/article/index.html @@ -0,0 +1,153 @@ +--- +title: عنصر المقالة
+slug: HTML/Element/article +translation_of: Web/HTML/Element/article +--- +
{{HTMLRef}}
+ +

عنصر الـ <article> الموجود في الـ html فهو مفهوم من عنوانه والذي يعني (مقال) ونعرف جميعنا ان المقالات بنية مستقلة بذاتها. وتوجد في الوثائق, الصفحات, التطبيقات او المواقع. ما نتحدث عنه اليوم هو كيف نكتب عناصر الـ html لصفحة تحتوي على مقالات مثل : منشور المنتديات, مقالات الصفحات و المجلات. حتى منشورات المدونات blogs تعتبر مقالة. 

+ +

في حالة اردت ان تبرمج صفحة تختص بالمقالات لابد لك ان تقوم باستخدام تاك او عنصر <article>. المثال التالي يوضع استخدام المقالة بابسط صوره لها: 

+ +
{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}
+ +
+ + + +

يمكن لصفحة الواحدة ان تحتوي على الكثير من المقالات. وهذا المثال دليل على ذلك. ليس هذا فحسب, فيمكن ان يكون عنصر المقالة يحتوي على عناصر مقالة بداخله ( تسمى nested element اي العناصر المتداخلة ).

+ +

اليك معلومات خاطفة عن هذا العنصر:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
فئة المكون +

Flow content, sectioning content, palpable content

+
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts flow content. Note that an <article> element must not be a descendant of an {{HTMLElement("address")}} element.
Implicit ARIA rolearticle
Permitted ARIA roles{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}
DOM interface{{domxref("HTMLElement")}}
+ +

الخصائص

+ +

هذا العنصر يحتوي على الخصائص العامة فقط. يمكنك زيارتها من هنا

+ +

ملاحظات الاستخدام

+ +

انت حر في استخدام هذا العنصر. ولكننا نفضل ان تقوم بمراعات هذه النقاط على الاقل.

+ +
    +
  • كل عنصر <article> يجب ان يتم تعريفه من خلال تضمين عناوين heading باستخدام h1-h6 وتكون هذه العناصر بداخل هذا العنصر
    • +
  • عندما تحاول ان تكتب عنصر <article> (اي عندما تحول كتابة nested element) عليك مراعاة ان يكون العنصر الداخلي متصل بالعنصر الخارجي. مثلا تعليقات المنشور يجب ان تكون article . 
    • +
  • معلومات مؤلف المنشور اذا امكن ان تكون في عنصر الـ <address> 
    • +
  • التواريخ الخاص بالمقالة مثل تاريخ النشر وغيرها يجب ان تكون من اختصاص العنصر <time> ويمكنك الاطلاع على هذا العنصر من هنا
    • +
+ +

المثال التالي يلخص لك هذه النقاط:

+ +
<article class="film_review">
+  <header>
+    <h2>Jurassic Park</h2>
+  </header>
+  <section class="main_review">
+    <p>Dinos were great!</p>
+  </section>
+  <section class="user_reviews">
+    <article class="user_review">
+      <p>Way too scary for me.</p>
+      <footer>
+        <p>
+          Posted on
+          <time datetime="2015-05-16 19:00">May 16</time>
+          by Lisa.
+        </p>
+      </footer>
+    </article>
+    <article class="user_review">
+      <p>I agree, dinos are my favorite.</p>
+      <footer>
+        <p>
+          Posted on
+          <time datetime="2015-05-17 19:00">May 17</time>
+          by Tom.
+        </p>
+      </footer>
+    </article>
+  </section>
+  <footer>
+    <p>
+      Posted on
+      <time datetime="2015-05-15 19:00">May 15</time>
+      by Staff.
+    </p>
+  </footer>
+</article>
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5 W3C')}}
+ +

Browser compatibility

+ + + +

{{Compat("html.elements.article")}}

+ +

يمكنك زيارة التالي:

+ +
    +
  • العناصر المرتبطة بهذا العنصر - او ربما تستخدمها معه: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
    • +
  • Using HTML sections and outlines
    • +
diff --git a/files/ar/web/html/element/bdo/index.html b/files/ar/web/html/element/bdo/index.html new file mode 100644 index 0000000000..ee154b30c1 --- /dev/null +++ b/files/ar/web/html/element/bdo/index.html @@ -0,0 +1,108 @@ +--- +title: ': عنصر تجاوز النص ثنائي الاتجاه' +slug: HTML/Element/bdo +translation_of: Web/HTML/Element/bdo +--- +
{{HTMLRef}}
+ +

HTML عنصر تجاوز النص ثنائي الاتجاه(<bdo>) يتجاوز الاتجاه الحالي للنص، بحيث يتم تقديم النص داخل في اتجاه مختلف. يتم رسم أحرف النص من نقطة البداية في الاتجاه المحدد. لا يتأثر اتجاه الحروف الفردية (حتى لا تحصل على أحرف إلى الوراء، على سبيل المثال).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
يحتوي الفئاتFlow content, phrasing content, palpable content.
المحتوى المسموح بهPhrasing content.
وسم الإقفال{{no_tag_omission}}
يسمح الآباءأي عنصر يقبل  صياغة المحتوى.
قواعد ARIA مسموحالكل
DOM واجهة{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
+ +

السِمات

+ +

تتضمن سمات هذه العناصر  السمات العامة.

+ +
+
{{htmlattrdef("dir")}}
+
الاتجاه الذي يجب أن يظهر فيه النص في محتويات هذا العنصر.
+
القيم المحتملة هي:
+
+
    +
  • ltr: يشير إلى أن النص يجب أن يسير في الاتجاه من اليسار إلى اليمين.
    • +
  • rtl:يشير إلى أن النص يجب أن يكون في الاتجاه من اليمين إلى اليسار.
    • +
+
+
+ +

الأمثلة

+ +
<!-- Switch text direction -->
+<p>This text will go left to right.</p>
+<p><bdo dir="rtl">This text will go right
+to left.</bdo></p>
+
+ +

النتيجة

+ +

 

+ +

{{EmbedLiveSample('Examples')}}

+ +

 

+ +

ملاحظات

+ +

مواصفات HTML 4 لم تحدد أحداث لهذا العنصر؛ تمت إضافتها في XHTML. وهذا على الأرجح سهو.

+ +

مميزات

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
المميزاتالحالةتعليق
{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}{{Spec2('HTML4.01')}} 
+ +

التكامل(دعم) مع المتصفح

+ + + +

{{Compat("html.elements.bdo")}}

diff --git a/files/ar/web/html/element/heading_elements/index.html b/files/ar/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..acd3267d37 --- /dev/null +++ b/files/ar/web/html/element/heading_elements/index.html @@ -0,0 +1,244 @@ +--- +title: '

–

: عناصر العناوين' +slug: HTML/Element/headings_elements +translation_of: Web/HTML/Element/Heading_Elements +--- +

 عناصر <h1>–<h6> تقدم لنا سته مستويات من عناوين الأقسام. حيث أن العنصر<h1> يمثل العنوان الأعلى مستوى في الأهمية بينما العنصر <h2> هو الأقل.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
فئات المحتوى Flow content, heading content, palpable content.
المحتوى المسموح بهPhrasing content.
إغفال الوسوملا شئ، كلاً من وسمّي الفتح والإقفال إجباري
الأباء المسموح بهم للعنصرAny element that accepts flow content; don't use an heading element as a child of the {{HTMLElement("hgroup")}} element — it is now deprecated.
Permitted ARIA roles{{ARIARole("tab")}}, {{ARIARole("presentation")}}
DOM interface{{domxref("HTMLHeadingElement")}}
+ +

السمات

+ +

هذه العناصر تتضمن السمات العامة.

+ +
+

السمة align عفاء عنها الزمن، لا تستخدمها

+
+ +

ملاحظات الإستخدام

+ +
    +
  • يمكن إستخدام معلومات العناوين من قبل الـ user agents, على سبيل المثال لإنشاء جدول المحتويات لمستند بشكل تلقائي.
    • +
  • لا تستخدم عناوين بمستويات منخفضة لتقليل حجم خط العناوين: إستخدم خاصية لغة CSS المسؤولة عن التحكم بأحجام الخطوط font-size بدلاً من ذلك.
    • +
  •  تجنب تخطي مستويات العناوين: دائماً إبدا من <h1>، من ثم إستخدم <h2> وهكذا.
    • +
  • يجب أن تأخذ بعين الإعتبار تجنب إستخدام العنصر <h1> أكثر من مرة في الصفحة. إطلع على تعريف الأقسام في إستخدام الأقسام و وتسلسل العناوين في الـ HTML لمعلومات أكثر.
    • +
+ +

أمثلة

+ +

جميع العناوين

+ +

الكود التالي يظهر كل مستويات العناوين، قيد الإستخدام.

+ +
<h1>Heading level 1</h1>
+<h2>Heading level 2</h2>
+<h3>Heading level 3</h3>
+<h4>Heading level 4</h4>
+<h5>Heading level 5</h5>
+<h6>Heading level 6</h6>
+
+ +

هنا نتيجة هذا الكود:

+ +

{{ EmbedLiveSample('All_headings', '280', '300', '') }}

+ +

مثال لصفحة

+ +

الكود التالي يظهر بعض العناوين مع بعض المحتوى بأسفلها.

+ +
<h1>Heading elements</h1>
+<h2>Summary</h2>
+<p>Some text here...</p>
+
+<h2>Examples</h2>
+<h3>Example 1</h3>
+<p>Some text here...</p>
+
+<h3>Example 2</h3>
+<p>Some text here...</p>
+
+<h2>See also</h2>
+<p>Some text here...</p>
+
+ +

هنا نتيجة هذا الكود:

+ +

{{ EmbedLiveSample('Example_page', '280', '480', '') }}

+ +

سهولة الوصول

+ +

التنقل بين الأجزاء والصفحات

+ +

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

+ +

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

+ +

لا تقم بالتالي:

+ +
<h1>Heading level 1</h1>
+<h3>Heading level 3</h3>
+<h4>Heading level 4</h4>
+
+ +

قم بالتالي:

+ +
<h1>Heading level 1</h1>
+<h2>Heading level 2</h2>
+<h3>Heading level 3</h3>
+
+ +

تسلسل العناوين -  Nesting

+ +

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

+ +
    +
  1. h1 Beetles + +
      +
    1. h2 Etymology
      2. +
    2. h2 Distribution and Diversity
      3. +
    3. h2 Evolution +
        +
      1. h3 Late Paleozoic
        2. +
      2. h3 Jurassic
        3. +
      3. h3 Cretaceous
        4. +
      4. h3 Cenozoic
        5. +
      +
      4. +
    4. h2 External Morphology +
        +
      1. h3 Head +
          +
        1. h4 Mouthparts
          2. +
        +
        2. +
      2. h3 Thorax +
          +
        1. h4 Prothorax
          2. +
        2. h4 Pterothorax
          3. +
        +
        3. +
      3. h3 Legs
        4. +
      4. h3 Wings
        5. +
      5. h3 Abdomen
        6. +
      +
      5. +
    +
    2. +
+ +

When headings are nested, heading levels may be "skipped" when closing a subsection.

+ + + +

Labeling section content

+ +

Another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout.

+ +

Sectioning content can be labeled using a combination of the aria-labelledby and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.

+ +

Example

+ +
<header>
+  <nav aria-labelledby="primary-navigation">
+    <h2 id="primary-navigation">Primary navigation</h2>
+    <!-- navigation items -->
+  </nav>
+</header>
+
+<!-- page content -->
+
+<footer>
+  <nav aria-labelledby="footer-navigation">
+    <h2 id="footer-navigation">Footer navigation</h2>
+    <!-- navigation items -->
+  </nav>
+</footer>
+
+ +

In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each nav element's contents to determine their purpose.

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML4.01')}} 
+ +

Browser compatibility

+ + + +

{{Compat("html.elements.h1")}}

+ +

See also

+ +
    +
  • {{HTMLElement("p")}}
    • +
  • {{HTMLElement("div")}}
    • +
  • {{HTMLElement("section")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/ar/web/html/element/index.html b/files/ar/web/html/element/index.html new file mode 100644 index 0000000000..a2fb5187e7 --- /dev/null +++ b/files/ar/web/html/element/index.html @@ -0,0 +1,239 @@ +--- +title: HTML element reference +slug: HTML/Element +translation_of: Web/HTML/Element +--- +

يسرد مرجع HTML هذا جميع عناصر HTML ، المحددة في HTML5 أو في مواصفات سابقة. عند تضمينها داخل أقواس زاوية ، فإنها تشكل علامات HTML : <elementname>.العناصر عبارة عن كيانات تحدد كيفية إنشاء مستندات HTML ، ونوع المحتوى الذي يجب وضعه في أي جزء من مستند HTML .

+ +

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

+ +

في مستند HTML ، يتم تعريف عنصر بواسطة علامة البداية . إذا احتوى عنصر المحتويات الأخرى، وينتهي مع علامة إغلاق، حيث يسبق اسم العنصر بواسطة خط مائل: </elementname>. لا تحتاج إلى إغلاق بعض العناصر ، مثل عناصر الصورة.هذه هي المعروفة باسم العناصر باطلة . تحتوي مستندات HTML على شجرة من هذه العناصر. يدعى كل لتمثيل ما يفعله. على سبيل المثال ، <title>يمثل العنصر عنوان المستند. فيما يلي قائمة أبجدية بعناصر HTML.

+ +

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

+ +

يشير الرمز Ⓒ إلى أن العنصر معرف في مجموعة المواصفات Web Components.

+ +
A + +
    +
  • {{ HTMLElement("a") }}
    • +
  • {{ HTMLElement("abbr") }}
    • +
  • {{ HTMLElement("acronym") }}
    • +
  • {{ HTMLElement("address") }}
    • +
  • {{ HTMLElement("applet") }}
    • +
  • {{ HTMLElement("area") }}
    • +
  • {{ HTMLElement("article") }}
    • +
  • {{ HTMLElement("aside") }}
    • +
  • {{ HTMLElement("audio") }}
    • +
+B + +
    +
  • {{ HTMLElement("b") }}
    • +
  • {{ HTMLElement("base") }}
    • +
  • {{ HTMLElement("basefont") }}
    • +
  • {{ HTMLElement("bdi") }}
    • +
  • {{ HTMLElement("bdo") }}
    • +
  • {{ HTMLElement("bgsound") }}
    • +
  • {{ HTMLElement("big") }}
    • +
  • {{ HTMLElement("blink") }}
    • +
  • {{ HTMLElement("blockquote") }}
    • +
  • {{ HTMLElement("body") }}
    • +
  • {{ HTMLElement("br") }}
    • +
  • {{ HTMLElement("button") }}
    • +
+C + +
    +
  • {{ HTMLElement("canvas") }}
    • +
  • {{ HTMLElement("caption") }}
    • +
  • {{ HTMLElement("center") }}
    • +
  • {{ HTMLElement("cite") }}
    • +
  • {{ HTMLElement("code") }}
    • +
  • {{ HTMLElement("col") }}
    • +
  • {{ HTMLElement("colgroup") }}
    • +
+D + +
    +
  • {{ HTMLElement("data") }}
    • +
  • {{ HTMLElement("datalist") }}
    • +
  • {{ HTMLElement("dd") }}
    • +
  • {{ HTMLElement("decorator")}}
    • +
  • {{ HTMLElement("del") }}
    • +
  • {{ HTMLElement("details") }}
    • +
  • {{ HTMLElement("dfn") }}
    • +
  • {{ HTMLElement("dir") }}
    • +
  • {{ HTMLElement("div") }}
    • +
  • {{ HTMLElement("dl") }}
    • +
  • {{ HTMLElement("dt") }}
    • +
+E + +
    +
  • {{HTMLElement("em") }}
    • +
  • {{ HTMLElement("embed") }}
    • +
+F + +
    +
  • {{ HTMLElement("fieldset") }}
    • +
  • {{ HTMLElement("figcaption") }}
    • +
  • {{ HTMLElement("figure") }}
    • +
  • {{ HTMLElement("font") }}
    • +
  • {{ HTMLElement("footer") }}
    • +
  • {{ HTMLElement("form") }}
    • +
  • {{ HTMLElement("frame") }}
    • +
  • {{ HTMLElement("frameset") }}
    • +
+G H + +
    +
  • {{ HTMLElement("h1") }}
    • +
  • {{ HTMLElement("h2") }}
    • +
  • {{ HTMLElement("h3") }}
    • +
  • {{ HTMLElement("h4") }}
    • +
  • {{ HTMLElement("h5") }}
    • +
  • {{ HTMLElement("h6") }}
    • +
  • {{ HTMLElement("head") }}
    • +
  • {{ HTMLElement("header") }}
    • +
  • {{ HTMLElement("hgroup") }}
    • +
  • {{ HTMLElement("hr") }}
    • +
  • {{ HTMLElement("html") }}
    • +
+I + +
    +
  • {{ HTMLElement("i") }}
    • +
  • {{ HTMLElement("iframe") }}
    • +
  • {{ HTMLElement("img") }}
    • +
  • {{ HTMLElement("input") }}
    • +
  • {{ HTMLElement("ins") }}
    • +
  • {{ HTMLElement("isindex") }}
    • +
+J K + +
    +
  • {{ HTMLElement("kbd") }}
    • +
  • {{ HTMLElement("keygen") }}
    • +
+L + +
    +
  • {{ HTMLElement("label") }}
    • +
  • {{ HTMLElement("legend") }}
    • +
  • {{ HTMLElement("li") }}
    • +
  • {{ HTMLElement("link") }}
    • +
  • {{ HTMLElement("listing") }}
    • +
+M + +
    +
  • {{HTMLElement("main")}}
    • +
  • {{ HTMLElement("map") }}
    • +
  • {{ HTMLElement("mark") }}
    • +
  • {{ HTMLElement("marquee") }}
    • +
  • {{ HTMLElement("menu") }}
    • +
  • {{ HTMLElement("menuitem") }}
    • +
  • {{ HTMLElement("meta") }}
    • +
  • {{ HTMLElement("meter") }}
    • +
+N + +
    +
  • {{ HTMLElement("nav") }}
    • +
  • {{ HTMLElement("nobr") }}
    • +
  • {{ HTMLElement("noframes") }}
    • +
  • {{ HTMLElement("noscript") }}
    • +
+O + +
    +
  • {{ HTMLElement("object") }}
    • +
  • {{ HTMLElement("ol") }}
    • +
  • {{ HTMLElement("optgroup") }}
    • +
  • {{ HTMLElement("option") }}
    • +
  • {{ HTMLElement("output") }}
    • +
+P + +
    +
  • {{ HTMLElement("p") }}
    • +
  • {{ HTMLElement("param") }}
    • +
  • {{ HTMLElement("plaintext") }}
    • +
  • {{ HTMLElement("pre") }}
    • +
  • {{ HTMLElement("progress") }}
    • +
+Q + +
    +
  • {{ HTMLElement("q") }}
    • +
+R + +
    +
  • {{ HTMLElement("rp") }}
    • +
  • {{ HTMLElement("rt") }}
    • +
  • {{ HTMLElement("ruby") }}
    • +
+S + +
    +
  • {{ HTMLElement("s") }}
    • +
  • {{ HTMLElement("samp") }}
    • +
  • {{ HTMLElement("script") }}
    • +
  • {{ HTMLElement("section") }}
    • +
  • {{ HTMLElement("select") }}
    • +
  • {{ HTMLElement("small") }}
    • +
  • {{ HTMLElement("source") }}
    • +
  • {{ HTMLElement("spacer") }}
    • +
  • {{ HTMLElement("span") }}
    • +
  • {{ HTMLElement("strike") }}
    • +
  • {{ HTMLElement("strong") }}
    • +
  • {{ HTMLElement("style") }}
    • +
  • {{ HTMLElement("sub") }}
    • +
  • {{ HTMLElement("summary") }}
    • +
  • {{ HTMLElement("sup") }}
    • +
+T + +
    +
  • {{ HTMLElement("table") }}
    • +
  • {{ HTMLElement("tbody") }}
    • +
  • {{ HTMLElement("td") }}
    • +
  • {{ HTMLElement("template")}}
    • +
  • {{ HTMLElement("textarea") }}
    • +
  • {{ HTMLElement("tfoot") }}
    • +
  • {{ HTMLElement("th") }}
    • +
  • {{ HTMLElement("thead") }}
    • +
  • {{ HTMLElement("time") }}
    • +
  • {{ HTMLElement("title") }}
    • +
  • {{ HTMLElement("tr") }}
    • +
  • {{ HTMLElement("track") }}
    • +
  • {{ HTMLElement("tt") }}
    • +
+U + +
    +
  • {{ HTMLElement("u") }}
    • +
  • {{ HTMLElement("ul") }}
    • +
+V + +
    +
  • {{ HTMLElement("var") }}
    • +
  • {{ HTMLElement("video") }}
    • +
+W + +
    +
  • {{ HTMLElement("wbr") }}
    • +
+X Y Z + +
    +
  • {{ HTMLElement("xmp") }}
    • +
+
+ +

 

diff --git a/files/ar/web/html/element/span/index.html b/files/ar/web/html/element/span/index.html new file mode 100644 index 0000000000..79a265b804 --- /dev/null +++ b/files/ar/web/html/element/span/index.html @@ -0,0 +1,122 @@ +--- +title: +slug: HTML/Element/span +translation_of: Web/HTML/Element/span +--- +

و HTML <span>العنصر هو حاوية مضمنة عامة لمحتوى الصيغة، التي لا تمثل في حد ذاتها أي شيء. يمكن استخدامه لتجميع العناصر لأغراض التصميم (باستخدام classأو idالسمات) ، أو لأنها تتشارك في قيم السمات ، مثل lang. يجب استخدامه فقط عندما يكون أي عنصر دلالي آخر مناسبًا. <span>تشبه إلى حد كبير على <div>عنصر، ولكن <div>هو عنصر على مستوى الكتلة في حين أن <span>هو عنصر المضمنة .

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
فئات المحتوى
+ 		محتوى التدفق ، محتوى الصياغة .
المحتوى المسموح به + + + + + + +
محتوى الصياغة
+
إغفال العلامةالآباء المسموح بهم
أي عنصر يقبل محتوى الصياغة ، أو أي عنصر يقبل محتوى التدفق .
يسمح أدوار ARIAأي
واجهة DOMHTMLSpanElement(قبل HTML 5 ، كانت الواجهة HTMLElement)
+ +

السمات

+ +

هذا العنصر يشمل فقط السمات العالمية .

+ +

المثال 1

+ +
<p><span>Some text</span></p>
+ +

نتيجة

+ +

بعض النصوص

+ +

 

+ +

المثال 2

+ +
<li><span>
+    <a href="portfolio.html" target="_blank">See my portfolio</a>
+</span></li>
+
+ +

CSS:

+ +
+

li span {
+ background: gold;
+ }

+
+ +

مواصفات

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
تخصيصالحالةتعليق
{{SpecName('HTML WHATWG', 'semantics.html#the-span-element', '<span>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}}{{Spec2('HTML5 W3C')}}واجهة DOM هي الآن {{domxref("HTMLSpanElement")}}.
{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}{{Spec2('HTML4.01')}} 
+ +

توافق التصفح

+ + + +

{{Compat("html.elements.span")}}

+ +

انظر أيضا

+ +
    +
  • HTML {{HTMLElement("div")}} عنصر 
    • +
+ +
{{HTMLRef}}
diff --git a/files/ar/web/html/element/tt/index.html b/files/ar/web/html/element/tt/index.html new file mode 100644 index 0000000000..30cfcc09f9 --- /dev/null +++ b/files/ar/web/html/element/tt/index.html @@ -0,0 +1,161 @@ +--- +title: ': The Teletype Text element (obsolete)' +slug: HTML/Element/tt +translation_of: Web/HTML/Element/tt +--- +
{{ obsolete_header() }}
+ +

وعفا عليها الزمن HTML المبرقة الكاتبة عنصر نص ( <tt>) بإنشاء النص المضمن الذي يقدم باستخدام وكيل المستخدم وجه الافتراضي أحادي المسافة الخط. تم إنشاء هذا العنصر لغرض تقديم نص كما سيتم عرضه على شاشة عرض ثابت مثل نمط teletype أو نص فقط أو طابعة خط

+ +

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

+ +

هذا العنصر عفا عليه الزمن ، ومع ذلك. يجب عليك استخدام أكثر مفيدة لغويا <code>، <kbd>، <var>، أو<samp>عناصر النص المضمن الذي يحتاج إلى أن تقدم في نوع أحادي المسافة، أو <pre>شعارا لالمحتوى الذي ينبغي أن تقدم ككتلة منفصل.

+ +
إذا لم يكن أي من العناصر الدلالية مناسبًا لحالة الاستخدام الخاصة بك (على سبيل المثال ، إذا كنت تحتاج ببساطة إلى عرض بعض المحتوى بخط غير تناسبي) ، فيجب أن تفكر في استخدام <span>العنصر ، وأن تصممه كما تريد باستخدام CSS. و font-familyالخاصية هي مكان جيد للبدء
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
فئات المحتوى + + + + + + +
محتوى التدفق ، ومحتوى الصياغة ، ومحتوى واضح
+
المحتوى المسموح بهمحتوى الصياغة .
إغفال العلامةلا شيء ، كل من علامة البداية والنهاية إلزامية.
الآباء المسموح بهمي عنصر يقبل محتوى الصياغة
يسمح أدوار ARIAأي
+ + + + + + +
واجهة DOM
+ 		HTMLElement
+ +

السمات

+ +

هذا العنصر يشمل فقط السمات العالمية

+ +

أمثلة

+ +

المثال الأساسي

+ +

يستخدم هذا المثال <tt>لإظهار النص الذي تم إدخاله والإخراج بواسطة تطبيق طرفي.

+ +
<p>Enter the following at the telnet command prompt: <code>set localecho</code><br />
+
+The telnet client should display: <tt>Local Echo is on</tt></p>
+
+ +

نتيجة

+ +

{{EmbedLiveSample("Basic_example", 650, 80)}}

+ +

تجاوز الخط الافتراضي

+ +

يمكنك تجاوز الخط الافتراضي للمتصفح - إذا كان المتصفح يسمح لك بذلك ، وهو أمر غير مطلوب - باستخدام CSS:

+ +

CSS

+ +
tt {
+  font-family: "Lucida Console", "Menlo", "Monaco", "Courier",
+               monospace;
+}
+ +

HTML

+ +
<p>Enter the following at the telnet command prompt: <code>set localecho</code><br />
+
+The telnet client should display: <tt>Local Echo is on</tt></p>
+ +

نتيجة

+ +

{{EmbedLiveSample("Overriding_the_default_font", 650, 80)}}

+ +

ملاحظات الاستخدام

+ +

 

+ +

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

+ +

 

+ +
+

 

+ +

التغييرات التي تمت تهيئتها بواسطة المستخدم على إعداد خط أحادي المسافة الافتراضي قد تكون لها الأسبقية على CSS الخاص بك.

+ +

 

+
+ +

على الرغم من أن هذا العنصر لم يتم إهماله رسميًا في HTML 4.01 ، إلا أنه تم تثبيط استخدامه بسبب العناصر الدلالية و / أو CSS. و <tt>العنصر عفا عليه الزمن في HTML 5.

+ +

مواصفات

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'obsolete.html#tt', '<tt>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'obsolete.html#elementdef-tt', '<tt>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<tt>')}}{{Spec2('HTML4.01')}} 
+ +

التوافق المتصفح

+ + + +

{{Compat("html.elements.tt")}}

+ +

انظر أيضا

+ +
    +
  • The semantic {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("kbd")}}, and {{HTMLElement("samp")}} elements
    • +
  • The {{HTMLElement("pre")}} element for displaying preformatted text blocks
    • +
+ +
{{ HTMLRef }}
diff --git "a/files/ar/web/html_\331\204\330\272\330\251_\330\252\330\261\331\205\331\212\330\262_\330\247\331\204\331\206\330\265_\330\247\331\204\331\201\330\247\330\246\331\202/index.html" "b/files/ar/web/html_\331\204\330\272\330\251_\330\252\330\261\331\205\331\212\330\262_\330\247\331\204\331\206\330\265_\330\247\331\204\331\201\330\247\330\246\331\202/index.html" deleted file mode 100644 index b228c2f893..0000000000 --- "a/files/ar/web/html_\331\204\330\272\330\251_\330\252\330\261\331\205\331\212\330\262_\330\247\331\204\331\206\330\265_\330\247\331\204\331\201\330\247\330\246\331\202/index.html" +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: HTML (لغة ترميز النص الفائق) -slug: Web/HTML_لغة_ترميز_النص_الفائق -translation_of: Web/HTML ---- -
{{HTMLSidebar}}
- -

HTML ( لغة ترميز النصوص التشعبية ) هي اللبنة الأساسية للويب. فهي تقوم بوصف و تعريف محتوى صفحة الويب. التقنيات الأخرى إلى جانب HTML تعمل عادةً على وصف مظهر صفحة الويب (CSS) أو تفاعلها مع المستخدم (الجافاسكربت).

- -

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

- -

تستخدم HTML "الوسوم" لوصف النصوص, الصور, وغيرها من المحتويات لعرضعها على متصفح الويب. وسوم HTML تتضمن "عناصر" خاصة مثل  {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, وغيرها الكثير.

- -

المقالات أدناه ستساعدك على تعلم المزيد حول HTML.

- -
-
    -
  • مقدمة عن HTMLإذا كنت جديداً على تطوير الويب, فاحرص على قراءة مقالتنا حول أساسيات HTML لتعرف ماهي HTML وكيف يمكنك استخدامها.
    • -
  • دورات عن HTMLللحصول على مقالات عن كيفية استخدام HTML, و كذلك على دورات و أمثلة شاملة, تفقد منطقة تعلم HTML خاصتنا.
    • -
  • مرجع HTML -

    في قسم مرجع HTML الشامل خاصتنا, ستجد تفاصيل حول كل عنصر و صِفة في HTML . 

    -
    • -
- -
-
-

دورات للمبتدئين

- -

منطقة تعلم HTML خاصتنا تتميز بوحدات متعددة و التي تقوم بتعليم HTML من الألف إلى الياء — لا تتطلب معرفة مسبقة.

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

مواضيع متقدمة

- -
-
ادارة التركيز في HTML
-
الصفة activeElement و الدالة hasFocus() التي تساعدك على تتبع و التحكم بتفاعلات المستخدم مع عناصر صفحة الويب. 
-
استخدام ذاكرة التخزين المؤقت للتطبيق
-
ذاكرة التخزين المؤقت تسمح للتطبيقات المبنية على الويب بالعمل في وضع عدم الإتصال. يمكنك استخدام واجهة ذاكرة التخزين المؤقت للتطبيق (AppCache) لتحديد الموارد التي يجب على المتصفح تخزينها و إتاحتها للمستخدمين في وضع عدم الإتصال. التطبيقات التي يتم تحميلها مؤقتاً تعمل بشكل صحيح حتى و لو قام المستخدمون بالضغط على زر التحديث عندما يكونون في وضع عدم الإتصال. 
-
-
- -
-

مراجع

- -
-
مرجع HTML
-
تتألف HTML من عناصر, كل منها يمكن تعديلها بواسطة عدد من الصفات. وثائق HTML متلصة ببعضها البعض بواسطة روابط.
-
مرجع عناصر HTML
-
تصفح قائمة لجميع عناصر HTML.
-
مرجع صفات HTML
-
العناصر في HTML تمتلك صفات. تعد هذه الصفات قيم إضافية تقوم بتعديل العناصر أو تخصيص وظيفتها بطرق مختلفة.
-
الصفات الشاملة
-
الصفات الشاملة قد يمكن استخدامها على جميع عناصر HTML, حتى العناصر الغير معيارية. هذا يعني أنَّ أي عنصر غير معياري لا يزال يجب أن يسمح باستخدام هذه الصفات, على الرغم أنَّ هذه العناصر تجعل مستند HTML5 غير متوافق.
-
العناصر المضمنة و العناصر المستحوذة
-
العناصر في HTML عادةً إما "مضمنة" أو "مستحوذة". العنصر المضمن يأحذ المساحة المحصورة بواسطة الوسوم التي تحدده. أما العنصر المستحوذ فأنه يأخذ كامل مساحة العنصر الأب (الحاوي), وبالتالي فإنه ينشئ "كتلة".
-
أنواع الرابط
-
في HTML, أنواع روابط متنوعة يمكن استخدامها لإنشاء أو تعريف صلة بين وثيقتين. تتضمن عناصر الرابط التي يمكن استخدامها على <a>, <area>, و <link>.
-
صيغ الوسائط المدعومة في HTML و عناصر الصوت و الفيديو
-
عنصر <audio> و <video> يسمح لك بتشغيل وسائط الصوت و الفيديو. هذه العناصر توفر بدائل مشابهة للمتصفح كالتي موجودة في أدوبي فلاش و الإضافات الأخرى.
-
أنواع محتوى HTML
-
تتألف HTML من عدة أنواع من المحتوى, كل نوع يسمح لك باستخدام عدة سياقات و يمنعك استخدامها في أخرى. وبالمثل كل نوع يملك مجموعة من الفئات يمكن أن تحتوي على عناصر يمكن أو لا يمكن استخدامها. هذا دليل لهذه الفئات.
-
وضع المراوغة و الوضع المعياري
-
معلومات تاريخية عن وضع المراوغة و الوضع المعياري.
-
- -

مواضيع متعلقة

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

رؤية المزيد..

-
diff --git a/files/ar/web/javascript/guide/functions/index.html b/files/ar/web/javascript/guide/functions/index.html new file mode 100644 index 0000000000..af934b397d --- /dev/null +++ b/files/ar/web/javascript/guide/functions/index.html @@ -0,0 +1,698 @@ +--- +title: الدوال +slug: Web/JavaScript/Guide/الدوال +tags: + - الدوال + - جافا سكريبت + - دليل +translation_of: Web/JavaScript/Guide/Functions +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
+ +

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

+ +
+

يمكنك القاء نظرة في مرجع مفصل عن دوال الجافاسكريبت حتى تتعرف على تفاصيل اكثر.

+ +

انشاء الدوال

+ +

الاعلان عن الدوال - الصيغة الافتراضية - Function declarations

+ +

تعريف الدالة: تتكون الدالة من الكلمة المحجوزة function، متبوعة بـ :

+ +
    +
  • إسم الدالة.
    • +
  • قائمة بارامترات الدالة، محصورة بين قوسين ويفصل بينها بفواصل.
    • +
  • تعليمات الجافاسكريبت التي تُعرف الدالة، داخل الأقواس المتعرجة {}.
    • +
+ +

على سبيل المثال، الكود التالي يعرف دالة بسيطة تسمى square :

+ +
function square(number) {
+  return number * number;
+}
+
+ +

الدالة square تمتلك بارامتر واحد، هو number. وتعليمة برمجية واحدة تقوم بإرجاع بارامتر الدالة number مضروباً في نفسه. والتعليمة return تحدد القيمة التي سترجعها الدالة.

+ +
return number * number;
+
+ +

يتم تمرير البارامترات الاولية primitives (كالسلاسل الحرفية، الاعداد...الخ) الى الدالة، بوسيلة تسمى، الاستدعاء بالقيمة، call by value وهي، ان يتم تحليل argument الدالة، والقيمة الناتجة سَتُرسل نسخة منها فقط إلى المتغير المستقبل (بارامتر الدالة)، بعد ذالك تقوم الدالة بتخزين هذه القيمة في الذاكرة، ثم، إذا كانت الدالة قادرة على تعيين القيم للبارامترات الخاصة بها، تبدا بالعمل على هذه النسخة فقط، دون تغيير اي شئ في قيمة المتغير الاصلي.

+ +

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

+ +
function square(number) { // parameter = recipient
+  return number * number;
+}
+var value = 10;
+square(value);   // argument = Sender
+document.write(value);  // log: 10
+
+ +

على عكس المثال السابق، اذا قمت بتمرير كائن (مثلا، قيمة غير اولية ك {{jsxref("Array")}} او كائن معرف من قبل المستخدم) كبارامتر، وقامت الدالة بتغيير خصائص الكائن، سيكون هذا التغيير مرئيا خارج الدالة:

+ +
function myFunc(theObject) {
+  theObject.make = "Toyota";
+}
+
+var mycar = {make: "Honda", model: "Accord", year: 1998};
+var x, y;
+
+x = mycar.make; // x gets the value "Honda"
+
+myFunc(mycar);
+y = mycar.make; // y gets the value "Toyota"
+                // (the make property was changed by the function)
+
+ +

الاعلان عن الدوال بصيغة ال Function expressions

+ +

في حين ان الدالة اعلاه تم الاعلان عنها بصيغة  function declaration، يمكن ايضا انشاء الدوال بصيغة ال function expression. كما يمكن ايضا للدوال ان تكون بصيغة ال anonymous (دوال مجهولة الاسم). على سبيل المثال، الدالة square يمكن تعريفها ايضا بصيغة ال function expression على النحو التالى:

+ +
var square = function(number) { return number * number };
+var x = square(4) // x gets the value 16
+ +

يمكن تعيين اسم للدوال بصيغة ال function expression، لجعل الدالة تعيد استدعاء ذاتها (الاستدعاء الداتي)، أو استخدامه في المنقح debugger. او لتعقب اخطاء الدالة من خلال stack traces.

+ +
var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) };
+
+console.log(factorial(3));
+
+ +

يمكنك تمرير دالة كبارامتر لدالة اخرى. يظهر المثال التالي الدالة map تستخدم دالة اخرى كبارامتر اول لها :

+ +
function map(f,a) {
+  var result = [], // Create a new Array
+      i;
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+
+ +

طريقة استخدامها مع الصيغة function expression:

+ +
var multiply = function(x) { return x * x * x; };
+map(multiply, [0, 1, 2, 5, 10]);
+
+ +

طريقة استخدامها مع الصيغة anonymous function مباشرة:

+ +
map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
+
+ +

returns [0, 1, 8, 125, 1000].

+ +

في الجافاسكريبت يمكن الاعلان عن دالة اعتمادا على شرط. على سبيل المثال، ستقوم التعليمة البرمجية التالية بالاعلان عن الدالة myFunc شرط ان يكون  num يساوي 0:

+ +
var myFunc;
+if (num === 0){
+  myFunc = function(theObject) {
+    theObject.make = "Toyota"
+  }
+}
+ +

بالإضافة إلى انشاء الدوال كما هو موضح اعلاه، يمكنك ايضا استخدام الصيغة {{jsxref("Function")}} constructor لانشاء دوال من خلال السلاسل النصية، تنفذ وقت التشغيل، تماما كما في  {{jsxref("eval", "()eval")}}.

+ +

هناك فرق بين الدوال (functions) والوظائف (methods)، الدوال هي ما نناقشه في هذا الفصل، والوظائف هي تلك المرتبطة بالكائنات (قيمة لخاصية في الكائن)، اقرأ المزيد حول الكائنات والوظائف العمل مع الكائنات [عربي].

+ +

إستدعاء الدوال

+ +

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

+ +
square(5);
+
+ +

تقوم التعليمة البرمجية اعلاه باستدعاء الدالة مع البارامتر 5. ثم تقوم بتنفيذ التعليمات البرمجية المرتبطة بها وترجع القيمة 25.

+ +

الدوال يجب ان تنتمي للنطاق الذي استدعيت فيه، ولان الدوال بصيغة function declaration ترفع اعلى النطاق، فمن الممكن أن تعرف في وقت لاحق، كما في المثال التالي:

+ +
console.log(square(5));
+/* ... */
+function square(n) { return n*n }
+
+ +

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

+ +
+

ملاحظة: سيعمل هذا فقط عندما يتم تعريف الدالة باستخدام الصيغة (مثل {}()function funcName). اما التعليمة البرمجية التالية فسوف لن تعمل، وهذا يعني ان الية الرفع (hoisting) بالنسبة للدوال تعمل فقط مع الدوال ذات الصيغة function declaration ولا تعمل مع الدوال ذات الصيغة function expression.

+
+ +
console.log(square); // square is hoisted with an initial value undefined.
+console.log(square(5)); // TypeError: square is not a function
+var square = function(n) {
+  return n * n;
+}
+
+ +

arguments الدالة لا تقتصر على الاعداد او السلاسل الحرفية فقط، يمكنك تمرير الكائنات ايضا. في القسم الخاص بالعمل مع الكائنات العمل مع الكائنات[عربي] توجد دالة باسم ()showProps توضح كيفية تمرير كائن ك argument للدالة.

+ +

يمكن للدالة أن تقوم بإستدعاء ذاتها. على سبيل المثال، هذه الدالة تقوم بحساب المضروب بشكل متكرر :

+ +
function factorial(n){
+  if ((n === 0) || (n === 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+
+ +

في كل مرة تقوم الدالة باستدعاء ذاتها، يتم خصم 1 من قيمة البرامتر الممرر، ويتم ضرب القيمة المحصلة في القيمة العائدة من جديد، فرضا، اذا كانت القيمة الممررة 5، الاستدعاء الاول سيكون 5، الاستدعاء الثاني سيكون 4، الاستدعاء الثالث سيكون 3، وهكذا، ويتم ضرب هذه القيم العائدة مع بعضها البعض. بهذا الشكل :  5 * 4 * 3 * 2 * 1 == 120

+ +

امثلة متنوعة:

+ +
var a, b, c, d, e;
+a = factorial(1); // a gets the value 1    // 1 * 1
+b = factorial(2); // b gets the value 2    // 2 * 1
+c = factorial(3); // c gets the value 6    // 3 * 2 * 1
+d = factorial(4); // d gets the value 24   // 4 * 3 * 2 * 1
+e = factorial(5); // e gets the value 120  // 5 * 4 * 3 * 2 * 1
+
+ +

هناك طرق أخرى لاستدعاء الدوال. غالبا ما تكون هناك حالات تحتاج الى دالة تُستدعى بشكل ديناميكي، حيث يمكن التعامل مع مجموعة من ال arguments، وحيث سياق (context) استدعاء الدالة يجب ان ينشا في وظيفة لكائن يحدد وقت التشغيل. وهذا يبين ان الدوال هي نفسها كائنات، وهذه الكائنات بدورها لديها وظائف ( شاهد {{jsxref("Function")}} object). من ضمن هذه الوظائف، الوظيفة {{jsxref("Function.apply", "()apply")}} يمكن استخدامها لتحقيق هذه الاهداف.

+ +

نطاق الدالة

+ +

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

+ +
// المتغيرات التالية معرفة في النطاق العام
+var num1 = 20,
+    num2 = 3,
+    name = "Chamahk";
+
+// هذه الدالة معرفة في النطاق العام
+function multiply() {
+  return num1 * num2;
+}
+
+multiply(); // Returns 60
+
+// مثال على دالة داخل دالة
+function getScore () {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + " scored " + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // Returns "Chamahk scored 5"
+
+ +

النطاق ومكدس الدوال

+ +

الاستدعاء الذاتي

+ +

يمكن للدالة ان تستدعي داتها بثلاثة طرق:

+ +
    +
  1. من خلال اسم الدالة
    2. +
  2. arguments.callee
    3. +
  3. من خلال المتغيرات التي تشير إلى الدالة
    4. +
+ +

على سبيل المثال، انظر الدالة التالية:

+ +
var foo = function bar() {
+   // statements go here
+};
+
+ +

تضمين الاستدعاء الذاتي داخل جسم الدالة bar:

+ +
    +
  1. ()bar
    2. +
  2. ()arguments.callee
    3. +
  3. ()foo
    4. +
+ +

الدوال التي تقوم باستدعاء نفسها تسمى recursive function. الاستدعاء الداتي يشبه آلِية الحلقات في بعض النواحي، كلاهما ينفذان التعليمات البرمجية نفسها عدة مرات، وايضا كلاهما يتطلبان تعبيرا شرطيا (لتجنب التكرار الى ما لا نهاية، او بالاحرى، الاستدعاء الذاتي الى ما لا نهاية في حالتنا هذه). على سبيل المثال، الحلقة التالية:

+ +
var x = 0;
+while (x < 10) { // "x < 10" is the loop condition
+   // do stuff
+   x++;
+}
+
+ +

المثال التالي يبين دالة تقوم بالاستدعاء الذاتي، يمكنها محاكات الحلقة :

+ +
function loop(x) {
+  if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)")
+    return;
+  // do stuff
+  loop(x + 1); // the recursive call
+}
+loop(0);
+
+ +

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

+ +
function walkTree(node) {
+  if (node == null) //
+    return;
+  // do something with node
+  for (var i = 0; i < node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}
+
+ +

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

+ +
var walkTree = function recycle( node, fn ) {
+	fn( node );
+	node = node .firstChild;
+	while( node ){
+		recycle( node, fn );
+		node = node.nextSibling;
+	}
+}
+
+walkTree( document.body , function( node ){
+	if( node.nodeType == 1 ){
+		// do something with [object HTMLElements]
+	}
+	if( node.nodeType == 3 ){
+		// do something with [object Text]
+	}
+});
+
+ +

كلا الدالتين اعلاه، تؤدي نفس الغرض، لا اختلاف بينهما، الفرق الوحيد هو شكل بناء الدالة، حيث بنيت الدالة الاولى على طريقة ال  function declaration  فيما بنيت الدالة الثانية على شكل، ال  function expression  وال  anonymous function، وكلاهما تنتهج اسلوب recursive function.

+ +

من الناحية النظرية، من الممكن تحويل أي خوارزمية الاستدعاء الذاتي الى خوارزمية الاستدعاء العادي (مع الحلقات، على سبيل المثال). عموما، المنطق الناتج أكثر تعقيداً ويتطلب استخدام  المكدس. الاستدعاء الذاتي أيضا يستخدم المكدس، مكدس الدالة function stack.

+ +

سلوك مكدس الذاكرة المؤقتة يمكن أن ينظر إليه كما في المثال التالي:

+ +
function foo(i) {
+  if (i < 0)
+    return;
+  console.log('begin:' + i);
+  foo(i - 1);
+  console.log('end:' + i);
+}
+foo(3);
+
+// Output:
+
+// begin:3
+// begin:2
+// begin:1
+// begin:0
+// end:0
+// end:1
+// end:2
+// end:3
+ +

الدوال المتداخلة  و الاغلاق (closures)

+ +

يمكن انشاء دالة داخل دالة اخرى. الدالة الداخلية هي دالة خاصة private بالدالة الخارجة. الدالة الداخلية تشكل الاغلاق closure، والإغلاق هو فقط تعبير (عموما الاغلاق هو دالة). والذي يمكنه الوصول إلى المتغيرات المجانية free variables (المصطلح free variable يشير الى المتغيرات المستخدمة في الدالة، وهي ليست متغيرات محلية او بارامترات لهذه الدالة. بمعنى اخر هي متغيرات معرفة خارج الدالة وتستفيد منها الدالة، وهذا هو سبب تسميتها بالمتغيرات المجانية)،  كما يمكنه ايضا، الوصول الى اي شئ في البيئة التي ترتبط بها هذه المتغيرات المجانية.

+ +

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

+ +

الخلاصة:

+ +
    +
  • لايمكن الوصول إلى الدالة الداخلية الا من خلال التعليمات البرمجية الخاصة بالدالة الخارجية.
    • +
  • الدالة الداخلية تشكل الاغلاق closure: الدالة الداخلية يمكنها استخدام البرامترات والمتغيرات الخاصة بالدالة الخارجية، فيما لا يمكن للدالة الخارجية استخدام البرامترات والمتغيرات الخاصة بالدالة الداخلية.
    • +
+ +

يظهر المثال التالي الدوال المتداخلة:

+ +
function addSquares(a,b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+a = addSquares(2,3); // returns 13
+b = addSquares(3,4); // returns 25
+c = addSquares(4,5); // returns 41
+
+ +

بما ان الدالة الداخلية تشكل closure. فمن الضروري استدعاء الدالة الخارجية أولا، بعد ذالك يمكنك تحديد ال  arguments لكل منهما :

+ +
function outside(x) {
+  function inside(y) {
+    return x + y;
+  }
+  return inside;
+}
+fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it
+result = fn_inside(5); // returns 8
+
+result1 = outside(3)(5); // returns 8
+
+ +

الحفاظ على المتغيرات

+ +

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

+ +

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

+ +

الدوال الاكثر تداخلا

+ +

الدوال يمكن ان تكون اكثر تداخلا، بمعنى، الدالة (A) تحتضن الدالة (B)، والدالة (B) تحتضن الدالة (C). هنا كل من الدالة B و C تشكل closures، وهكذا B يمكنها الوصول الى  A، و  C يمكنها الوصول الى B. بالاضافة الى ذالك، C يمكنها الوصول الى B و A، وبالتالي، الإغلاق يمكن أن يحتوي على عدة نطاقات. وهذا ما يسمى بسلسلة النطاق scope chaining. (سيتم شرح لماذا يطلق عليه "تسلسل" في وقت لاحق).

+ +

انظر في المثال التالي:

+ +
function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // logs 6 (1 + 2 + 3)
+
+ +

في هذا المثال C تصل الى y الخاصة ب B وايضا الى x الخاصة ب A، أصبح هذا ممكناً لأن:

+ +
    +
  1. B تشكل closure، وتمتلك A، بمعنى B يمكنها الوصول الى البارامترات والمتغيرات الخاصة ب A.
    2. +
  2. C تشكل closure، وتمتلك B.
    3. +
  3. بسبب ان B تمتلك A، فقد اصبح C يمتلك A، وعليه ف C يمكنه الوصول الى البارامترات والمتغيرات الخاصة ب B و A. بعبارات أخرى، C سلسلة نطاقات ل B و A في هذا الترتيب.
    4. +
+ +

العكس ليس صحيحاً. A لا يمكنها الوصول الى C، لان A لا يمكنها الوصول لاي من البارامترات او المتغيرات الخاصة ب B. (فيما C هي متغير لها). وهكذا، C ستصبح خاصة private فقط ب B.

+ +

تضارب الاسماء

+ +

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

+ +
function outside() {
+  var x = 10;
+  function inside(x) {
+    return x;
+  }
+  return inside;
+}
+result = outside()(20); // returns 20 instead of 10
+
+ +

يحدث تعارض الاسم  في التعليمة return x، وهو مابين الباراميتر x الخاص ب inside وبين المتغير x الخاص ب outside. سلسلة النطاق سترى الامر على هذا النحو {inside, outside, global object}. وبناءا عليه x الخاص ب inside سياخد الاسبقية على x الخاص ب outside، وبالتالي الناتج هو 20 (inside x) بدلا من 10 (outside x).

+ +

الاغلاقات - Closures

+ +

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

+ +
var pet = function(name) {   // The outer function defines a paramrter called "name"
+  var getName = function() {
+    return name;             // The inner function has access to the "name" paramrter of the outer function
+  }
+  return getName;            // Return the inner function, thereby exposing it to outer scopes
+},
+myPet = pet("Vivie");
+
+myPet();                     // Returns "Vivie"
+
+ +

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

+ +
var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex === "string" && (newSex.toLowerCase() === "male" || newSex.toLowerCase() === "female")) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet("Vivie");
+pet.getName();                  // Vivie
+
+pet.setName("Oliver");
+pet.setSex("male");
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+
+ +

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

+ +
var getCode = (function(){
+  var secureCode = "0]Eal(eh&2";    // A code we do not want outsiders to be able to modify...
+
+  return function () {
+    return secureCode;
+  };
+})();
+
+getCode();    // Returns the secureCode
+
+ +

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

+ +
var createPet = function(name) {  // Outer function defines a variable called "name"
+  return {
+    setName: function(name) {    // Enclosed function also defines a variable called "name"
+      name = name;               // ??? How do we access the "name" defined by the outer function ???
+    }
+  }
+}
+
+ +

الكلمة المحجوزة this (في بعض الاحيان تسمى بالمتغير العجيب)، ينبغي التعامل معها بحذر في حالات الإغلاق. احذر، ف this تشير إلى السياق حيث سيتم استدعاء الدالة وليس إلى المكان حيث تم تعريف الدالة.

+ +

استخدام الكائن arguments

+ +

يمكنك التعامل مع  arguments الدالة من الداخل، من خلال الكائن (arguments او الحجج). يمكنك معالجة ال  arguments الممررة الى الدالة على النحو التالي:

+ +
arguments[i]
+
+ +

حيث ان i هو الفهرس الرقمي لل arguments، ويبتدئ من 0، وبالتالي، ال argument الاول الممرر الى الدالة سيكون arguments[0]. لمعرفة عدد ال arguments الممررة نستخدم arguments.length.

+ +

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

+ +

على سبيل المثال، يمكننا انشاء دالة تقوم بوصل عدة سلاسل حرفية. ال argument الوحيد المحدد رسميا في الدالة، هو السلسلة الحرفية التي ستفصل بين باقي السلاسل الحرفية التي ستمرر ك arguments بعد ال argument الرسمي للدالة.  كما في المثال التالي:

+ +
function myConcat(separator) {
+   var result = "", // initialize list
+       i;
+   // iterate through arguments
+   for (i = 1; i < arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+
+ +

يمكنك تمرير اي عدد من ال arguments لهذه الدالة، وسترتبط ببعضها البعض من خلال ما سيمرر الى ال argument الرسمي:

+ +
// returns "red, orange, blue, "
+myConcat(", ", "red", "orange", "blue");
+
+// returns "elephant; giraffe; lion; cheetah; "
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// returns "sage. basil. oregano. pepper. parsley. "
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
+
+ +
+

ملاحظة: المتغير arguments هو شبه مصفوفة، ولكنه ليس مصفوفة. وانما يتصرف كالمصفوفة، يستخدم الفهرسة الرقمية، يستخدم الخاصية length، ومع ذالك، لا يمكنه استخدام الوظائف الخاصة بالمصفوفات مثل push او join ...الخ.

+
+ +

الفرق بين parameters و arguments

+ +

Function parameters او بارامترات الدالة، هي الأسماء المدرجة في تعريف الدالة. فيما Function arguments هي القيم الحقيقية التي تمرر إلى الدالة عند الاستدعاء (راجع التعريف والاستدعاء اعلى الصفحة). انظر المثال التالي:

+ +
function foo( param1, param2, ...) // parameters {
+    // Do things
+}
+foo(arg1, arg2, ...); // arguments
+
+ +
+

ملاحظة: ال parameter هو متغير باسم معين يمرر الى الدالة. تستخدم الباراميترات لجلب ال arguments داخل الدوال.

+
+ +

راجع الكائن {{jsxref("Function")}} في مرجع الجافا سكريبت لمزيد من المعلومات.

+ +

بارامترات الدالة

+ +

بدأً من ECMAScript 6، أصبح هناك نوعان من البارامترات: البارامترات الإفتراضية وبقية البارامترات.

+ +

البارامترات الإفتراضية

+ +

في الجافاسكريبت، القيمة الافتراضية لبرامترات الدوال هي undefined. ومع ذالك، في بعض الحالات، قد يكون من المفيد تعيين قيمة افتراضية مختلفة. البارامترات الافتراضية يمكنها تدارك الموقف.

+ +

قبل ECMAScript 2015، كانت الاستراتيجية العامة لوضع الافتراضات هي اختبار قيمة البارامتر في جسم الدالة وتعيين قيمة له اذا كانت قيمته undefined. على سبيل المثال، في التعليمة البرمجية التالية، لم يتم تحديد قيمة للبارامتر b في الاستدعاء، وبالتالي قيمتة ستساوي undefined، عند اختبار (a * b) ستعود الدالة multiply ب NaN. لتجنب هذا،  يقوم السطر الثاني في التعليمة البرمجية اسفله بتعيين قيمة افتراضية للبارامتر b:

+ +
function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a*b;
+}
+
+multiply(5); // 5
+
+ +

ابتداءا من ECMAScript 2015، اصبح من الممكن عمل اعدادات افتراضية على غرار (php)، والاختبار في جسم الدالة لم يعد ضروريا. الان، ببساطة يمكنك تعيين 1 كقيمة افتراضية للبارامتر b في تعريف الدالة:

+ +
function multiply(a, b = 1) {
+  return a*b;
+}
+
+multiply(5); // 5
+ +

لمزيد من التفاصيل، راجع  default parameters في مرجع الجافاسكريبت.

+ +

بقية البارامترات - rest parameter

+ +

الصيغة rest parameter تسمح بتمثيل عدد غير محدود من ال arguments كمصفوفة. في هذا المثال، نستخدم بقية البارامترات لتجميع ال arguments ابتداءا من البرامتر الثاني لغاية النهاية. ثم نقوم بضربها باول بارامتر. هذا المثال يستخدم دالة السهم، والتي سندرسها في القسم التالي.

+ +
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x => multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+ +

دوال السهم - Arrow functions

+ +

تعبيرات دوال السهم تسمح لك باستخدام تعبيرا أكثر إيجازاً من التعبير عن الوظائف الكلاسيكية. والقيمة this يتم ربطها بشكل نحوي. فيما تكون دوال السهم مجهولة الاسم anonymous. راجع ايضا هذه المدونة  ES6 In Depth: Arrow functions.

+ +

اثنين من العوامل التي أثرت في مقدمة دوال السهم: الدوال المختصرة و lexical this.

+ +

الدوال المختصرة

+ +

في بعض الأنماط الوظيفية، الدوال المختصرة هي موضع ترحيب. قارن التعليمات البرمجية التالية:

+ +
var a = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryl­lium"
+];
+
+var a2 = a.map(function(s){ return s.length });
+
+var a3 = a.map( s => s.length );
+ +

التعليمة Lexical this

+ +

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

+ +
function Person() {
+  // The Person() constructor defines 'this' as itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In nonstrict mode, the growUp() function defines 'this'
+    // as the global object, which is different from the 'this'
+    // defined by the Person() constructor.
+  this.age++;
+  }, 1000);
+}
+var p = new Person();
+ +

في ECMAScript 3/5، تم إصلاح هذه المشكلة عن طريق تخزير القيمة this في متغير اخر.

+ +
function Person() {
+  var self = this; // Some choose `that` instead of `self`.
+                   // Choose one and be consistent.
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `self` variable of which
+    // the value is the expected object.
+    self.age++;
+  }, 1000);
+}
+ +

بدلا من ذلك، يمكننا إنشاء دالة ملزمة bound function بحيث تكون "احسن"  قيمة this سيتم تمريرها إلى الدالة ()growUp.

+ +

دوال السهم تلتقط القيمة this من السياق المغلق (enclosing context)، لذا ستعمل التعليمة البرمجية التالية كما هو متوقع.

+ +
function Person(){
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();
+ +

دوال معرفة مسبقا

+ +

جافا سكريبت لديها العديد من الوظائف المدمجة ذات المستوى الاعلى top-level :

+ +
+
{{jsxref("Global_Objects/eval", "()eval")}}
+
+

الوظيفة ()eval تستخدم لاختبار شفرة الجافا سكريبت على شكل سلسلة حرفية.

+
+
{{jsxref("Global_Objects/uneval", "()uneval")}} {{non-standard_inline}}
+
+

الوظيفة ()uneval تستخدم لانشاء سلسلة حرفية عبارة عن مصدر كود الكائن {{jsxref("Object")}}.

+
+
{{jsxref("Global_Objects/isFinite", "()isFinite")}}
+
+

الدالة العامة () isFinite تقوم بتحديد ما إذا كانت القيمة التي تم تمريرها عدد محدود. إذا لزم الأمر، يتم تحويل البارامتر إلى رقم.

+
+
{{jsxref("Global_Objects/isNaN", "()isNaN")}}
+
+

تستخدم الدالة()isNaN للتاكد من ان القيمة ليست رقمية {{jsxref("Global_Objects/NaN", "NaN")}}  ملاحظة: يمكننا ايضا استخدام {{jsxref("Number.isNaN()")}}, الجديدة في ECMAScript 6 او استخدام التعليمة typeof. كلها تادي نفس الغرض.

+
+
{{jsxref("Global_Objects/parseFloat", "()parseFloat")}}
+
+

تستخدم الدالة ()parseFloat لتحويل سلسلة حرفية الى عدد كسري.

+
+
{{jsxref("Global_Objects/parseInt", "()parseInt")}}
+
+

تستخدم الدالة ()parseInt لتحويل سلسلة حرفية الى عدد صحيح (البارامتر الثاني خاص بالتعامل مع القاعدة في الأنظمة العددية الرياضية).

+
+
{{jsxref("Global_Objects/decodeURI", "()decodeURI")}}
+
+

تستخدم الدالة ()decodeURI لفك تشفير معرف الموارد الموحد (Uniform Resource Identifier (URI التي تم إنشاؤها مسبقا من طرف {{jsxref("Global_Objects/encodeURI", "encodeURI")}} او عن طريق نفس الروتين.

+
+
{{jsxref("Global_Objects/decodeURIComponent", "()decodeURIComponent")}}
+
+

تستخدم الوظيفة ()decodeURIComponent لفك تشفير معرف عناصر الموارد الموحدة (Uniform Resource Identifier (URI التي تم إنشاؤها مسبقا من طرف {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} او عن طريق نفس الروتين.

+
+
{{jsxref("Global_Objects/encodeURI", "()encodeURI")}}
+
+

تستخدم الوظيفة ()encodeURI لتشفير معرف الموارد الموحد (Uniform Resource Identifier (URI باستبدال كل مثيل من أحرف معينة بواحد، اثنان، ثلاثة، أو أربعة تهريبات متوالية تمثل ترميز الاحرف UTF-8 (لن يكون إلا أربع تهريبات متوالية لرموز تتألف من اثنين من الحروف "البديلة").

+
+
{{jsxref("Global_Objects/encodeURIComponent", "()encodeURIComponent")}}
+
+

تستخدم الوظيفة ()encodeURIComponent لتشفير معرف عناصر الموارد الموحدة (Uniform Resource Identifier (URI باستبدال كل مثيل من أحرف معينة بواحد، اثنان، ثلاثة، أو أربعة تهريبات متوالية تمثل ترميز الاحرف UTF-8 (لن يكون إلا أربع تهريبات متوالية لاحرف تتألف من اثنين من الحروف "البديلة").

+
+
{{jsxref("Global_Objects/escape", "()escape")}} {{deprecated_inline}}
+
+

الوظيفة ()escape الغير مرغوب فيها. تحتسب سلسلة جديدة من بعض الأحرف التي يجب استبدلها من قبل hexadecimal escape sequence. استخدم {{jsxref("Global_Objects/encodeURI", "encodeURI")}} او استخدم {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} بدلا عنها.

+
+
{{jsxref("Global_Objects/unescape", "()unescape")}} {{deprecated_inline}}
+
+

الوظيفة()unescape الغير مرغوب فيها. تحتسب سلسلة جديدة بحيث hexadecimal escape sequence. اسبدلت مع الرمز الذي يمثلها. متتالية التهريب يمكن ان تاتى من دالة مثل {{jsxref("Global_Objects/escape", "escape")}}. على العموم استخدم {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} او استخدم {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} بدلا عنها.

+
+
+ +

 

+
+ +

{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}

diff --git "a/files/ar/web/javascript/guide/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" "b/files/ar/web/javascript/guide/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" deleted file mode 100644 index af934b397d..0000000000 --- "a/files/ar/web/javascript/guide/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" +++ /dev/null @@ -1,698 +0,0 @@ ---- -title: الدوال -slug: Web/JavaScript/Guide/الدوال -tags: - - الدوال - - جافا سكريبت - - دليل -translation_of: Web/JavaScript/Guide/Functions ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
- -

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

- -
-

يمكنك القاء نظرة في مرجع مفصل عن دوال الجافاسكريبت حتى تتعرف على تفاصيل اكثر.

- -

انشاء الدوال

- -

الاعلان عن الدوال - الصيغة الافتراضية - Function declarations

- -

تعريف الدالة: تتكون الدالة من الكلمة المحجوزة function، متبوعة بـ :

- -
    -
  • إسم الدالة.
    • -
  • قائمة بارامترات الدالة، محصورة بين قوسين ويفصل بينها بفواصل.
    • -
  • تعليمات الجافاسكريبت التي تُعرف الدالة، داخل الأقواس المتعرجة {}.
    • -
- -

على سبيل المثال، الكود التالي يعرف دالة بسيطة تسمى square :

- -
function square(number) {
-  return number * number;
-}
-
- -

الدالة square تمتلك بارامتر واحد، هو number. وتعليمة برمجية واحدة تقوم بإرجاع بارامتر الدالة number مضروباً في نفسه. والتعليمة return تحدد القيمة التي سترجعها الدالة.

- -
return number * number;
-
- -

يتم تمرير البارامترات الاولية primitives (كالسلاسل الحرفية، الاعداد...الخ) الى الدالة، بوسيلة تسمى، الاستدعاء بالقيمة، call by value وهي، ان يتم تحليل argument الدالة، والقيمة الناتجة سَتُرسل نسخة منها فقط إلى المتغير المستقبل (بارامتر الدالة)، بعد ذالك تقوم الدالة بتخزين هذه القيمة في الذاكرة، ثم، إذا كانت الدالة قادرة على تعيين القيم للبارامترات الخاصة بها، تبدا بالعمل على هذه النسخة فقط، دون تغيير اي شئ في قيمة المتغير الاصلي.

- -

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

- -
function square(number) { // parameter = recipient
-  return number * number;
-}
-var value = 10;
-square(value);   // argument = Sender
-document.write(value);  // log: 10
-
- -

على عكس المثال السابق، اذا قمت بتمرير كائن (مثلا، قيمة غير اولية ك {{jsxref("Array")}} او كائن معرف من قبل المستخدم) كبارامتر، وقامت الدالة بتغيير خصائص الكائن، سيكون هذا التغيير مرئيا خارج الدالة:

- -
function myFunc(theObject) {
-  theObject.make = "Toyota";
-}
-
-var mycar = {make: "Honda", model: "Accord", year: 1998};
-var x, y;
-
-x = mycar.make; // x gets the value "Honda"
-
-myFunc(mycar);
-y = mycar.make; // y gets the value "Toyota"
-                // (the make property was changed by the function)
-
- -

الاعلان عن الدوال بصيغة ال Function expressions

- -

في حين ان الدالة اعلاه تم الاعلان عنها بصيغة  function declaration، يمكن ايضا انشاء الدوال بصيغة ال function expression. كما يمكن ايضا للدوال ان تكون بصيغة ال anonymous (دوال مجهولة الاسم). على سبيل المثال، الدالة square يمكن تعريفها ايضا بصيغة ال function expression على النحو التالى:

- -
var square = function(number) { return number * number };
-var x = square(4) // x gets the value 16
- -

يمكن تعيين اسم للدوال بصيغة ال function expression، لجعل الدالة تعيد استدعاء ذاتها (الاستدعاء الداتي)، أو استخدامه في المنقح debugger. او لتعقب اخطاء الدالة من خلال stack traces.

- -
var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) };
-
-console.log(factorial(3));
-
- -

يمكنك تمرير دالة كبارامتر لدالة اخرى. يظهر المثال التالي الدالة map تستخدم دالة اخرى كبارامتر اول لها :

- -
function map(f,a) {
-  var result = [], // Create a new Array
-      i;
-  for (i = 0; i != a.length; i++)
-    result[i] = f(a[i]);
-  return result;
-}
-
- -

طريقة استخدامها مع الصيغة function expression:

- -
var multiply = function(x) { return x * x * x; };
-map(multiply, [0, 1, 2, 5, 10]);
-
- -

طريقة استخدامها مع الصيغة anonymous function مباشرة:

- -
map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
-
- -

returns [0, 1, 8, 125, 1000].

- -

في الجافاسكريبت يمكن الاعلان عن دالة اعتمادا على شرط. على سبيل المثال، ستقوم التعليمة البرمجية التالية بالاعلان عن الدالة myFunc شرط ان يكون  num يساوي 0:

- -
var myFunc;
-if (num === 0){
-  myFunc = function(theObject) {
-    theObject.make = "Toyota"
-  }
-}
- -

بالإضافة إلى انشاء الدوال كما هو موضح اعلاه، يمكنك ايضا استخدام الصيغة {{jsxref("Function")}} constructor لانشاء دوال من خلال السلاسل النصية، تنفذ وقت التشغيل، تماما كما في  {{jsxref("eval", "()eval")}}.

- -

هناك فرق بين الدوال (functions) والوظائف (methods)، الدوال هي ما نناقشه في هذا الفصل، والوظائف هي تلك المرتبطة بالكائنات (قيمة لخاصية في الكائن)، اقرأ المزيد حول الكائنات والوظائف العمل مع الكائنات [عربي].

- -

إستدعاء الدوال

- -

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

- -
square(5);
-
- -

تقوم التعليمة البرمجية اعلاه باستدعاء الدالة مع البارامتر 5. ثم تقوم بتنفيذ التعليمات البرمجية المرتبطة بها وترجع القيمة 25.

- -

الدوال يجب ان تنتمي للنطاق الذي استدعيت فيه، ولان الدوال بصيغة function declaration ترفع اعلى النطاق، فمن الممكن أن تعرف في وقت لاحق، كما في المثال التالي:

- -
console.log(square(5));
-/* ... */
-function square(n) { return n*n }
-
- -

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

- -
-

ملاحظة: سيعمل هذا فقط عندما يتم تعريف الدالة باستخدام الصيغة (مثل {}()function funcName). اما التعليمة البرمجية التالية فسوف لن تعمل، وهذا يعني ان الية الرفع (hoisting) بالنسبة للدوال تعمل فقط مع الدوال ذات الصيغة function declaration ولا تعمل مع الدوال ذات الصيغة function expression.

-
- -
console.log(square); // square is hoisted with an initial value undefined.
-console.log(square(5)); // TypeError: square is not a function
-var square = function(n) {
-  return n * n;
-}
-
- -

arguments الدالة لا تقتصر على الاعداد او السلاسل الحرفية فقط، يمكنك تمرير الكائنات ايضا. في القسم الخاص بالعمل مع الكائنات العمل مع الكائنات[عربي] توجد دالة باسم ()showProps توضح كيفية تمرير كائن ك argument للدالة.

- -

يمكن للدالة أن تقوم بإستدعاء ذاتها. على سبيل المثال، هذه الدالة تقوم بحساب المضروب بشكل متكرر :

- -
function factorial(n){
-  if ((n === 0) || (n === 1))
-    return 1;
-  else
-    return (n * factorial(n - 1));
-}
-
- -

في كل مرة تقوم الدالة باستدعاء ذاتها، يتم خصم 1 من قيمة البرامتر الممرر، ويتم ضرب القيمة المحصلة في القيمة العائدة من جديد، فرضا، اذا كانت القيمة الممررة 5، الاستدعاء الاول سيكون 5، الاستدعاء الثاني سيكون 4، الاستدعاء الثالث سيكون 3، وهكذا، ويتم ضرب هذه القيم العائدة مع بعضها البعض. بهذا الشكل :  5 * 4 * 3 * 2 * 1 == 120

- -

امثلة متنوعة:

- -
var a, b, c, d, e;
-a = factorial(1); // a gets the value 1    // 1 * 1
-b = factorial(2); // b gets the value 2    // 2 * 1
-c = factorial(3); // c gets the value 6    // 3 * 2 * 1
-d = factorial(4); // d gets the value 24   // 4 * 3 * 2 * 1
-e = factorial(5); // e gets the value 120  // 5 * 4 * 3 * 2 * 1
-
- -

هناك طرق أخرى لاستدعاء الدوال. غالبا ما تكون هناك حالات تحتاج الى دالة تُستدعى بشكل ديناميكي، حيث يمكن التعامل مع مجموعة من ال arguments، وحيث سياق (context) استدعاء الدالة يجب ان ينشا في وظيفة لكائن يحدد وقت التشغيل. وهذا يبين ان الدوال هي نفسها كائنات، وهذه الكائنات بدورها لديها وظائف ( شاهد {{jsxref("Function")}} object). من ضمن هذه الوظائف، الوظيفة {{jsxref("Function.apply", "()apply")}} يمكن استخدامها لتحقيق هذه الاهداف.

- -

نطاق الدالة

- -

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

- -
// المتغيرات التالية معرفة في النطاق العام
-var num1 = 20,
-    num2 = 3,
-    name = "Chamahk";
-
-// هذه الدالة معرفة في النطاق العام
-function multiply() {
-  return num1 * num2;
-}
-
-multiply(); // Returns 60
-
-// مثال على دالة داخل دالة
-function getScore () {
-  var num1 = 2,
-      num2 = 3;
-
-  function add() {
-    return name + " scored " + (num1 + num2);
-  }
-
-  return add();
-}
-
-getScore(); // Returns "Chamahk scored 5"
-
- -

النطاق ومكدس الدوال

- -

الاستدعاء الذاتي

- -

يمكن للدالة ان تستدعي داتها بثلاثة طرق:

- -
    -
  1. من خلال اسم الدالة
    2. -
  2. arguments.callee
    3. -
  3. من خلال المتغيرات التي تشير إلى الدالة
    4. -
- -

على سبيل المثال، انظر الدالة التالية:

- -
var foo = function bar() {
-   // statements go here
-};
-
- -

تضمين الاستدعاء الذاتي داخل جسم الدالة bar:

- -
    -
  1. ()bar
    2. -
  2. ()arguments.callee
    3. -
  3. ()foo
    4. -
- -

الدوال التي تقوم باستدعاء نفسها تسمى recursive function. الاستدعاء الداتي يشبه آلِية الحلقات في بعض النواحي، كلاهما ينفذان التعليمات البرمجية نفسها عدة مرات، وايضا كلاهما يتطلبان تعبيرا شرطيا (لتجنب التكرار الى ما لا نهاية، او بالاحرى، الاستدعاء الذاتي الى ما لا نهاية في حالتنا هذه). على سبيل المثال، الحلقة التالية:

- -
var x = 0;
-while (x < 10) { // "x < 10" is the loop condition
-   // do stuff
-   x++;
-}
-
- -

المثال التالي يبين دالة تقوم بالاستدعاء الذاتي، يمكنها محاكات الحلقة :

- -
function loop(x) {
-  if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)")
-    return;
-  // do stuff
-  loop(x + 1); // the recursive call
-}
-loop(0);
-
- -

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

- -
function walkTree(node) {
-  if (node == null) //
-    return;
-  // do something with node
-  for (var i = 0; i < node.childNodes.length; i++) {
-    walkTree(node.childNodes[i]);
-  }
-}
-
- -

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

- -
var walkTree = function recycle( node, fn ) {
-	fn( node );
-	node = node .firstChild;
-	while( node ){
-		recycle( node, fn );
-		node = node.nextSibling;
-	}
-}
-
-walkTree( document.body , function( node ){
-	if( node.nodeType == 1 ){
-		// do something with [object HTMLElements]
-	}
-	if( node.nodeType == 3 ){
-		// do something with [object Text]
-	}
-});
-
- -

كلا الدالتين اعلاه، تؤدي نفس الغرض، لا اختلاف بينهما، الفرق الوحيد هو شكل بناء الدالة، حيث بنيت الدالة الاولى على طريقة ال  function declaration  فيما بنيت الدالة الثانية على شكل، ال  function expression  وال  anonymous function، وكلاهما تنتهج اسلوب recursive function.

- -

من الناحية النظرية، من الممكن تحويل أي خوارزمية الاستدعاء الذاتي الى خوارزمية الاستدعاء العادي (مع الحلقات، على سبيل المثال). عموما، المنطق الناتج أكثر تعقيداً ويتطلب استخدام  المكدس. الاستدعاء الذاتي أيضا يستخدم المكدس، مكدس الدالة function stack.

- -

سلوك مكدس الذاكرة المؤقتة يمكن أن ينظر إليه كما في المثال التالي:

- -
function foo(i) {
-  if (i < 0)
-    return;
-  console.log('begin:' + i);
-  foo(i - 1);
-  console.log('end:' + i);
-}
-foo(3);
-
-// Output:
-
-// begin:3
-// begin:2
-// begin:1
-// begin:0
-// end:0
-// end:1
-// end:2
-// end:3
- -

الدوال المتداخلة  و الاغلاق (closures)

- -

يمكن انشاء دالة داخل دالة اخرى. الدالة الداخلية هي دالة خاصة private بالدالة الخارجة. الدالة الداخلية تشكل الاغلاق closure، والإغلاق هو فقط تعبير (عموما الاغلاق هو دالة). والذي يمكنه الوصول إلى المتغيرات المجانية free variables (المصطلح free variable يشير الى المتغيرات المستخدمة في الدالة، وهي ليست متغيرات محلية او بارامترات لهذه الدالة. بمعنى اخر هي متغيرات معرفة خارج الدالة وتستفيد منها الدالة، وهذا هو سبب تسميتها بالمتغيرات المجانية)،  كما يمكنه ايضا، الوصول الى اي شئ في البيئة التي ترتبط بها هذه المتغيرات المجانية.

- -

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

- -

الخلاصة:

- -
    -
  • لايمكن الوصول إلى الدالة الداخلية الا من خلال التعليمات البرمجية الخاصة بالدالة الخارجية.
    • -
  • الدالة الداخلية تشكل الاغلاق closure: الدالة الداخلية يمكنها استخدام البرامترات والمتغيرات الخاصة بالدالة الخارجية، فيما لا يمكن للدالة الخارجية استخدام البرامترات والمتغيرات الخاصة بالدالة الداخلية.
    • -
- -

يظهر المثال التالي الدوال المتداخلة:

- -
function addSquares(a,b) {
-  function square(x) {
-    return x * x;
-  }
-  return square(a) + square(b);
-}
-a = addSquares(2,3); // returns 13
-b = addSquares(3,4); // returns 25
-c = addSquares(4,5); // returns 41
-
- -

بما ان الدالة الداخلية تشكل closure. فمن الضروري استدعاء الدالة الخارجية أولا، بعد ذالك يمكنك تحديد ال  arguments لكل منهما :

- -
function outside(x) {
-  function inside(y) {
-    return x + y;
-  }
-  return inside;
-}
-fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it
-result = fn_inside(5); // returns 8
-
-result1 = outside(3)(5); // returns 8
-
- -

الحفاظ على المتغيرات

- -

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

- -

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

- -

الدوال الاكثر تداخلا

- -

الدوال يمكن ان تكون اكثر تداخلا، بمعنى، الدالة (A) تحتضن الدالة (B)، والدالة (B) تحتضن الدالة (C). هنا كل من الدالة B و C تشكل closures، وهكذا B يمكنها الوصول الى  A، و  C يمكنها الوصول الى B. بالاضافة الى ذالك، C يمكنها الوصول الى B و A، وبالتالي، الإغلاق يمكن أن يحتوي على عدة نطاقات. وهذا ما يسمى بسلسلة النطاق scope chaining. (سيتم شرح لماذا يطلق عليه "تسلسل" في وقت لاحق).

- -

انظر في المثال التالي:

- -
function A(x) {
-  function B(y) {
-    function C(z) {
-      console.log(x + y + z);
-    }
-    C(3);
-  }
-  B(2);
-}
-A(1); // logs 6 (1 + 2 + 3)
-
- -

في هذا المثال C تصل الى y الخاصة ب B وايضا الى x الخاصة ب A، أصبح هذا ممكناً لأن:

- -
    -
  1. B تشكل closure، وتمتلك A، بمعنى B يمكنها الوصول الى البارامترات والمتغيرات الخاصة ب A.
    2. -
  2. C تشكل closure، وتمتلك B.
    3. -
  3. بسبب ان B تمتلك A، فقد اصبح C يمتلك A، وعليه ف C يمكنه الوصول الى البارامترات والمتغيرات الخاصة ب B و A. بعبارات أخرى، C سلسلة نطاقات ل B و A في هذا الترتيب.
    4. -
- -

العكس ليس صحيحاً. A لا يمكنها الوصول الى C، لان A لا يمكنها الوصول لاي من البارامترات او المتغيرات الخاصة ب B. (فيما C هي متغير لها). وهكذا، C ستصبح خاصة private فقط ب B.

- -

تضارب الاسماء

- -

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

- -
function outside() {
-  var x = 10;
-  function inside(x) {
-    return x;
-  }
-  return inside;
-}
-result = outside()(20); // returns 20 instead of 10
-
- -

يحدث تعارض الاسم  في التعليمة return x، وهو مابين الباراميتر x الخاص ب inside وبين المتغير x الخاص ب outside. سلسلة النطاق سترى الامر على هذا النحو {inside, outside, global object}. وبناءا عليه x الخاص ب inside سياخد الاسبقية على x الخاص ب outside، وبالتالي الناتج هو 20 (inside x) بدلا من 10 (outside x).

- -

الاغلاقات - Closures

- -

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

- -
var pet = function(name) {   // The outer function defines a paramrter called "name"
-  var getName = function() {
-    return name;             // The inner function has access to the "name" paramrter of the outer function
-  }
-  return getName;            // Return the inner function, thereby exposing it to outer scopes
-},
-myPet = pet("Vivie");
-
-myPet();                     // Returns "Vivie"
-
- -

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

- -
var createPet = function(name) {
-  var sex;
-
-  return {
-    setName: function(newName) {
-      name = newName;
-    },
-
-    getName: function() {
-      return name;
-    },
-
-    getSex: function() {
-      return sex;
-    },
-
-    setSex: function(newSex) {
-      if(typeof newSex === "string" && (newSex.toLowerCase() === "male" || newSex.toLowerCase() === "female")) {
-        sex = newSex;
-      }
-    }
-  }
-}
-
-var pet = createPet("Vivie");
-pet.getName();                  // Vivie
-
-pet.setName("Oliver");
-pet.setSex("male");
-pet.getSex();                   // male
-pet.getName();                  // Oliver
-
- -

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

- -
var getCode = (function(){
-  var secureCode = "0]Eal(eh&2";    // A code we do not want outsiders to be able to modify...
-
-  return function () {
-    return secureCode;
-  };
-})();
-
-getCode();    // Returns the secureCode
-
- -

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

- -
var createPet = function(name) {  // Outer function defines a variable called "name"
-  return {
-    setName: function(name) {    // Enclosed function also defines a variable called "name"
-      name = name;               // ??? How do we access the "name" defined by the outer function ???
-    }
-  }
-}
-
- -

الكلمة المحجوزة this (في بعض الاحيان تسمى بالمتغير العجيب)، ينبغي التعامل معها بحذر في حالات الإغلاق. احذر، ف this تشير إلى السياق حيث سيتم استدعاء الدالة وليس إلى المكان حيث تم تعريف الدالة.

- -

استخدام الكائن arguments

- -

يمكنك التعامل مع  arguments الدالة من الداخل، من خلال الكائن (arguments او الحجج). يمكنك معالجة ال  arguments الممررة الى الدالة على النحو التالي:

- -
arguments[i]
-
- -

حيث ان i هو الفهرس الرقمي لل arguments، ويبتدئ من 0، وبالتالي، ال argument الاول الممرر الى الدالة سيكون arguments[0]. لمعرفة عدد ال arguments الممررة نستخدم arguments.length.

- -

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

- -

على سبيل المثال، يمكننا انشاء دالة تقوم بوصل عدة سلاسل حرفية. ال argument الوحيد المحدد رسميا في الدالة، هو السلسلة الحرفية التي ستفصل بين باقي السلاسل الحرفية التي ستمرر ك arguments بعد ال argument الرسمي للدالة.  كما في المثال التالي:

- -
function myConcat(separator) {
-   var result = "", // initialize list
-       i;
-   // iterate through arguments
-   for (i = 1; i < arguments.length; i++) {
-      result += arguments[i] + separator;
-   }
-   return result;
-}
-
- -

يمكنك تمرير اي عدد من ال arguments لهذه الدالة، وسترتبط ببعضها البعض من خلال ما سيمرر الى ال argument الرسمي:

- -
// returns "red, orange, blue, "
-myConcat(", ", "red", "orange", "blue");
-
-// returns "elephant; giraffe; lion; cheetah; "
-myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
-
-// returns "sage. basil. oregano. pepper. parsley. "
-myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
-
- -
-

ملاحظة: المتغير arguments هو شبه مصفوفة، ولكنه ليس مصفوفة. وانما يتصرف كالمصفوفة، يستخدم الفهرسة الرقمية، يستخدم الخاصية length، ومع ذالك، لا يمكنه استخدام الوظائف الخاصة بالمصفوفات مثل push او join ...الخ.

-
- -

الفرق بين parameters و arguments

- -

Function parameters او بارامترات الدالة، هي الأسماء المدرجة في تعريف الدالة. فيما Function arguments هي القيم الحقيقية التي تمرر إلى الدالة عند الاستدعاء (راجع التعريف والاستدعاء اعلى الصفحة). انظر المثال التالي:

- -
function foo( param1, param2, ...) // parameters {
-    // Do things
-}
-foo(arg1, arg2, ...); // arguments
-
- -
-

ملاحظة: ال parameter هو متغير باسم معين يمرر الى الدالة. تستخدم الباراميترات لجلب ال arguments داخل الدوال.

-
- -

راجع الكائن {{jsxref("Function")}} في مرجع الجافا سكريبت لمزيد من المعلومات.

- -

بارامترات الدالة

- -

بدأً من ECMAScript 6، أصبح هناك نوعان من البارامترات: البارامترات الإفتراضية وبقية البارامترات.

- -

البارامترات الإفتراضية

- -

في الجافاسكريبت، القيمة الافتراضية لبرامترات الدوال هي undefined. ومع ذالك، في بعض الحالات، قد يكون من المفيد تعيين قيمة افتراضية مختلفة. البارامترات الافتراضية يمكنها تدارك الموقف.

- -

قبل ECMAScript 2015، كانت الاستراتيجية العامة لوضع الافتراضات هي اختبار قيمة البارامتر في جسم الدالة وتعيين قيمة له اذا كانت قيمته undefined. على سبيل المثال، في التعليمة البرمجية التالية، لم يتم تحديد قيمة للبارامتر b في الاستدعاء، وبالتالي قيمتة ستساوي undefined، عند اختبار (a * b) ستعود الدالة multiply ب NaN. لتجنب هذا،  يقوم السطر الثاني في التعليمة البرمجية اسفله بتعيين قيمة افتراضية للبارامتر b:

- -
function multiply(a, b) {
-  b = typeof b !== 'undefined' ?  b : 1;
-
-  return a*b;
-}
-
-multiply(5); // 5
-
- -

ابتداءا من ECMAScript 2015، اصبح من الممكن عمل اعدادات افتراضية على غرار (php)، والاختبار في جسم الدالة لم يعد ضروريا. الان، ببساطة يمكنك تعيين 1 كقيمة افتراضية للبارامتر b في تعريف الدالة:

- -
function multiply(a, b = 1) {
-  return a*b;
-}
-
-multiply(5); // 5
- -

لمزيد من التفاصيل، راجع  default parameters في مرجع الجافاسكريبت.

- -

بقية البارامترات - rest parameter

- -

الصيغة rest parameter تسمح بتمثيل عدد غير محدود من ال arguments كمصفوفة. في هذا المثال، نستخدم بقية البارامترات لتجميع ال arguments ابتداءا من البرامتر الثاني لغاية النهاية. ثم نقوم بضربها باول بارامتر. هذا المثال يستخدم دالة السهم، والتي سندرسها في القسم التالي.

- -
function multiply(multiplier, ...theArgs) {
-  return theArgs.map(x => multiplier * x);
-}
-
-var arr = multiply(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
- -

دوال السهم - Arrow functions

- -

تعبيرات دوال السهم تسمح لك باستخدام تعبيرا أكثر إيجازاً من التعبير عن الوظائف الكلاسيكية. والقيمة this يتم ربطها بشكل نحوي. فيما تكون دوال السهم مجهولة الاسم anonymous. راجع ايضا هذه المدونة  ES6 In Depth: Arrow functions.

- -

اثنين من العوامل التي أثرت في مقدمة دوال السهم: الدوال المختصرة و lexical this.

- -

الدوال المختصرة

- -

في بعض الأنماط الوظيفية، الدوال المختصرة هي موضع ترحيب. قارن التعليمات البرمجية التالية:

- -
var a = [
-  "Hydrogen",
-  "Helium",
-  "Lithium",
-  "Beryl­lium"
-];
-
-var a2 = a.map(function(s){ return s.length });
-
-var a3 = a.map( s => s.length );
- -

التعليمة Lexical this

- -

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

- -
function Person() {
-  // The Person() constructor defines 'this' as itself.
-  this.age = 0;
-
-  setInterval(function growUp() {
-    // In nonstrict mode, the growUp() function defines 'this'
-    // as the global object, which is different from the 'this'
-    // defined by the Person() constructor.
-  this.age++;
-  }, 1000);
-}
-var p = new Person();
- -

في ECMAScript 3/5، تم إصلاح هذه المشكلة عن طريق تخزير القيمة this في متغير اخر.

- -
function Person() {
-  var self = this; // Some choose `that` instead of `self`.
-                   // Choose one and be consistent.
-  self.age = 0;
-
-  setInterval(function growUp() {
-    // The callback refers to the `self` variable of which
-    // the value is the expected object.
-    self.age++;
-  }, 1000);
-}
- -

بدلا من ذلك، يمكننا إنشاء دالة ملزمة bound function بحيث تكون "احسن"  قيمة this سيتم تمريرها إلى الدالة ()growUp.

- -

دوال السهم تلتقط القيمة this من السياق المغلق (enclosing context)، لذا ستعمل التعليمة البرمجية التالية كما هو متوقع.

- -
function Person(){
-  this.age = 0;
-
-  setInterval(() => {
-    this.age++; // |this| properly refers to the person object
-  }, 1000);
-}
-
-var p = new Person();
- -

دوال معرفة مسبقا

- -

جافا سكريبت لديها العديد من الوظائف المدمجة ذات المستوى الاعلى top-level :

- -
-
{{jsxref("Global_Objects/eval", "()eval")}}
-
-

الوظيفة ()eval تستخدم لاختبار شفرة الجافا سكريبت على شكل سلسلة حرفية.

-
-
{{jsxref("Global_Objects/uneval", "()uneval")}} {{non-standard_inline}}
-
-

الوظيفة ()uneval تستخدم لانشاء سلسلة حرفية عبارة عن مصدر كود الكائن {{jsxref("Object")}}.

-
-
{{jsxref("Global_Objects/isFinite", "()isFinite")}}
-
-

الدالة العامة () isFinite تقوم بتحديد ما إذا كانت القيمة التي تم تمريرها عدد محدود. إذا لزم الأمر، يتم تحويل البارامتر إلى رقم.

-
-
{{jsxref("Global_Objects/isNaN", "()isNaN")}}
-
-

تستخدم الدالة()isNaN للتاكد من ان القيمة ليست رقمية {{jsxref("Global_Objects/NaN", "NaN")}}  ملاحظة: يمكننا ايضا استخدام {{jsxref("Number.isNaN()")}}, الجديدة في ECMAScript 6 او استخدام التعليمة typeof. كلها تادي نفس الغرض.

-
-
{{jsxref("Global_Objects/parseFloat", "()parseFloat")}}
-
-

تستخدم الدالة ()parseFloat لتحويل سلسلة حرفية الى عدد كسري.

-
-
{{jsxref("Global_Objects/parseInt", "()parseInt")}}
-
-

تستخدم الدالة ()parseInt لتحويل سلسلة حرفية الى عدد صحيح (البارامتر الثاني خاص بالتعامل مع القاعدة في الأنظمة العددية الرياضية).

-
-
{{jsxref("Global_Objects/decodeURI", "()decodeURI")}}
-
-

تستخدم الدالة ()decodeURI لفك تشفير معرف الموارد الموحد (Uniform Resource Identifier (URI التي تم إنشاؤها مسبقا من طرف {{jsxref("Global_Objects/encodeURI", "encodeURI")}} او عن طريق نفس الروتين.

-
-
{{jsxref("Global_Objects/decodeURIComponent", "()decodeURIComponent")}}
-
-

تستخدم الوظيفة ()decodeURIComponent لفك تشفير معرف عناصر الموارد الموحدة (Uniform Resource Identifier (URI التي تم إنشاؤها مسبقا من طرف {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} او عن طريق نفس الروتين.

-
-
{{jsxref("Global_Objects/encodeURI", "()encodeURI")}}
-
-

تستخدم الوظيفة ()encodeURI لتشفير معرف الموارد الموحد (Uniform Resource Identifier (URI باستبدال كل مثيل من أحرف معينة بواحد، اثنان، ثلاثة، أو أربعة تهريبات متوالية تمثل ترميز الاحرف UTF-8 (لن يكون إلا أربع تهريبات متوالية لرموز تتألف من اثنين من الحروف "البديلة").

-
-
{{jsxref("Global_Objects/encodeURIComponent", "()encodeURIComponent")}}
-
-

تستخدم الوظيفة ()encodeURIComponent لتشفير معرف عناصر الموارد الموحدة (Uniform Resource Identifier (URI باستبدال كل مثيل من أحرف معينة بواحد، اثنان، ثلاثة، أو أربعة تهريبات متوالية تمثل ترميز الاحرف UTF-8 (لن يكون إلا أربع تهريبات متوالية لاحرف تتألف من اثنين من الحروف "البديلة").

-
-
{{jsxref("Global_Objects/escape", "()escape")}} {{deprecated_inline}}
-
-

الوظيفة ()escape الغير مرغوب فيها. تحتسب سلسلة جديدة من بعض الأحرف التي يجب استبدلها من قبل hexadecimal escape sequence. استخدم {{jsxref("Global_Objects/encodeURI", "encodeURI")}} او استخدم {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} بدلا عنها.

-
-
{{jsxref("Global_Objects/unescape", "()unescape")}} {{deprecated_inline}}
-
-

الوظيفة()unescape الغير مرغوب فيها. تحتسب سلسلة جديدة بحيث hexadecimal escape sequence. اسبدلت مع الرمز الذي يمثلها. متتالية التهريب يمكن ان تاتى من دالة مثل {{jsxref("Global_Objects/escape", "escape")}}. على العموم استخدم {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} او استخدم {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} بدلا عنها.

-
-
- -

 

-
- -

{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}

diff --git a/files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html deleted file mode 100644 index 65ce0c788a..0000000000 --- a/files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html +++ /dev/null @@ -1,424 +0,0 @@ ---- -title: مدخل إلى جافاسكريبت كائنية التوجه -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -tags: - - الأفراد - - البرمجة الكائنية - - التغليف - - الجافاسكريبت - - المتوسط - - المجال - - المشيد - - ب.ك.ت - - كائن -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -
{{jsSidebar("Introductory")}}
- -

كائنية التوجه حتى النخاع، ميزات جافا سكريبت القوية، القدرات المرنة {{Glossary("OOP")}}. يبدأ هذا المقال بمقدمة إلى البرمجة الكائنية التوجه، ثم مراجعات لنموذج كائن جافا سكريبت، و أخيراً يوضح مفاهيم البرمجة الكائنية التوجه في جافا سكريبت. لا يصف هذا المقال البناء اللغوي الجديد للبرمجة الكائنية التوجه في ECMAScript 6.

- -
-

مراجعة جافا سكريبت

- -

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

- -

البرمجة الكائنية التوجه (Object-oriented programming)

- -

إن البرمجة الكائنية (OOP) ما هي إلا نمط برمجي يَستخدم التجريد في إنشاء نماذج/نسخ لتجسيد العالم الحقيقي، وتَستخدم البرمجة الكائنية في ذلك أساليب مُتعدّدة من هذا النمط، فهي تستخدم الوحدات module، وتعدديّة الأشكال polymorphism والتغليف encapsulation، وتجدر الإشارة إلى أن معظم لغات البرمجة تدعم مفهوم OOP أمثال اللغات البرمجية: جافا، بايثون، روبي، وطبعًا جافا سكريبت.

- -

يُعالج أو لنقل يَتصور مفهوم البرمجة الكائنية OOP البرنامج كتشكيلة من الأشياء/الكائنات المتعاونة/المترابطة بدلًا من يتصوّره كتشكيلة من الدوال (functions) أو كسرد من الأوامر. ففي مفهوم OOP، كل كائن/شيء له القدرة على استقبال الرسائل، ومعالجة البيانات، وإرسال الرسائل إلى باقي الكائنات، ويُمكن اعتبار أنه لكل كائن object كينونة خاصة به ودور/وظيفة مستقلة عن الكائن الآخر.

- -

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

- -

مصطلحات البرمجة الكائنية

- -
-
-

المجال في البرمجة الكائنية Namespace

- -

ما هو إلا عبارة عن حاوي تسمح للمطوّر بتحزيم جميع الوظائف تحت اسم محدد وفريد.

- -

الصنف أو الفئة Class في البرمجة الكائنية

- -

يعتني الصنف بكل ما يتعلّق بميزات وخصائص الكائن، والصنف ما هو إلا قالب template تعريفي بخاصيات properties وبطُرق/وظائف methods الكائن object.

- -

الكائن Object في البرمجة الكائنية

- -

الكائن ما هو إلا حالة/أمثولة instance من صنف class.

- -

الخاصية property في البرمجة الكائنية

- -

ما هي إلا مميزات وخصائص الكائن، كاللون مثلًا.

- -

الطريقة أو الوظيفة Method في البرمجة الكائنية

- -

تعتني الطريقة أو الوظيفة كما يُسميها البعض بقدرات الكائن، مثل قدرة المشي مثلًا، وهي دور أو وظيفة مرتبطة مع صنف class.

- -

المشيد Constructor في البرمجة الكائنية

- -

ما هو إلا طريقة method تُستدعى في لحظة استهلال instantiate الكائن، وعادةً ما يكون له نفس اسم الصنف الذي يحتويه.

- -

الوراثة Inheritance في البرمجة الكائنية

- -

يُمكن للصنف أن يرث مميزات من صنف آخر.

- -

التغليف Encapsulation في البرمجة الكائنية

- -

طريقة في تحزيم البيانات data والطُرق methods التي تستخدم البيانات.

- -

التجريد Abstraction في البرمجة الكائنية

- -

يجب على الاقتران الحاصل من: الوراثة والطُرق methods والخاصيات properties لكائن معقد وشائك التمثيل برمجيًا أن يعكس الواقع المراد محاكاته في البرمجة الكائنية.

- -

تعددية الأشكال Polymorphism في البرمجة الكائنية

- -

تحمل كلمة Poly بحد ذاتها المعنى "متعدد" وتحمل الكلمة morphism المعنى "أشكال، ويُشير المفهوم ككل إلى أن أكثر من صنف قد يُعرّف نفس الطريقة method أو الخاصية property.

-
-
- -

للحصول على وصف أكثر شمولية للبرمجة الكائنية التوجه، أنظر {{interwiki("wikipedia", "البرمجة كائنية التوجه")}} على ويكيبيديا.

- -

البرمجة المعتمدة على النموذج الأولي Prototype

- -

البرمجة المعتمدة على النموذج الأوّلي (Prototype-based programming) ما هي إلا نموذج من البرمجة الكائنية OOP ولكنها لا تستخدم الأصناف classes، بل تقوم أولًا بإعداد سلوك أي صنف class ما ومن ثم تُعيد استخدامه، ويُطلق البعض على هذا النموذج: البرمجة بلا أصناف classless، أو البرمجة المَبْدَئِية المنحى prototype-oriented، أو البرمجة المعتمدة على الأمثولة instance-based).

- -

يعود أصل اللغة المعتمدة على النموذج الأولي إلى لغة Self، والتي طوّرها David Ungar وRandall Smith، ولكن أسلوب البرمجة بدون أصناف class-less توسّع ونال شهرة كبيرة في العقد الأخير، واُعتمد من قبل العديد من اللغات البرمجية أشهرهم جافا سكريبت.

- -

 

- -

البرمجة الكائنية باستخدام جافا سكريبت

- -

المجال Namespace في جافا سكريبت

- -

المجال هو أشبه بمستوعب/بحاوية (container) تسمح للمطوّر في تحزيم وظائف تحت اسم فريد، أو اسم تطبيق محدد، ففي جافا سكريبت المجال هو مجرد كائن object كأي كائن آخر يحتوي على طُرق methods، وخاصيات properties، وحتى كائنات objects.

- -
-

ملاحظة هامة: من المهم جدًا الانتباه إلى أنه في جافا سكريبت، لا يوجد فرق بين الكائنات العادية والمجالات namespaces، وهذا يختلف عن اللغات الكائنية الأخرى، الأمر الذي قد يُربك المبرمجين المبتدئين في جافا سكريبت.

-
- -

إن إنشاء مجال namespace في جافا سكريبت بسيطٌ للغاية، فمن خلال إنشاء كائن عام/مشترك/شامل global، ستصبح جميع المُتغيّرات variables والطرق methods، والدوال functions خاصياتٍ لهذا الكائن، ويٌقلل استخدام المجالات namespaces أيضًا من احتمالية تضارب الأسماء في التطبيق، منذ أن كل كائن من كائنات التطبيق ما هي إلى خاصيات كائن شامل/عام معرّفة على مستوى التطبيق.

- -

سيُنشئ في الخطوة التالية كائنًا عامًا global وبالاسم MYAPP:

- -
// مجال عالمي
-var MYAPP = MYAPP || {};
- -

يُظهر المثال السابق، كيف تم التأكّد أولًا فيما إذا كان MYAPP معرفًا (سواء في نفس الملف أو في آخر)، ففي حال الإيجاب سيُستخدم الكائن العام MYAPP، وفي حال عدم تعريفه مُسبقًا سيُنشئ كائنًا خالٍ وبالاسمMYAPP والذي سيغلّف encapsulate الطرق methods والدوال functions والمتغيرات variables والكائنات objects.

- -

كما يُمكن أيضًا إنشاء مجال فرعي sub-namespaces:

- -
// مجال فرعي
-MYAPP.event = {};
- -

يوضّح المثال التالي الصيغة المستخدمة في إنشاء مجال namespace وإضافة متغيرات ودوال:

- -
// إنشاء حاوي يدعى MYAPP.commonMethod للوظائف و الخصائص الشائعة
-MYAPP.commonMethod = {
-  regExForName: "", // تعريف تعبير نظامي للتحقق من الإسم
-  regExForPhone: "", // تعريف تعبير نظامي للهاتف، لا يوجد تحقق من الصحة
-  validateName: function(name){
-    // إفعل شيئا ما بالإسم، يمكنك الوصول إلى المتغير regExForName
-    // بإستعمال "this.regExForName"
-  },
-
-  validatePhoneNo: function(phoneNo){
-    // إفعل شيئا ما برقم الهاتف
-  }
-}
-
-// تعريفات الكائن مع الزظيفة في نفس الوقت
-MYAPP.event = {
-    addListener: function(el, type, fn) {
-    // بعض الأكواد
-    },
-    removeListener: function(el, type, fn) {
-    // بعض الأكواد
-    },
-    getEvent: function(e) {
-    // بعض اﻷكواد
-    }
-
-    // يمكن إضافة وظائف و خصائص أخرى
-}
-
-// البناء اللغوي لإستعمال وظيفة addListener:
-MYAPP.event.addListener("yourel", "type", callback);
- -

 

- -

الكائنات الأساسية/القياسية المبنية داخل لغة جافا سكريبت (Standard built-in objects)

- -

تتضمن لغة جافا سكريبت العديد من الكائنات في تركيبتها، على سبيل المثال، يوجد كائنات مثل Math،Object، Array، String، ويُظهر المثال التالي كيفيّة استخدام الكائن Math للحصول على رقم عشوائي باستخدام أحد طُرق method هذا الكائن وهي الطريقة ()random.

- -
console.log(Math.random());
-
- -
-

ملاحظة: يَفترض المثال السابق وجميع الأمثلة التالية في المقال وجود دالة function بالاسم()console.log معرّفة تعريفًا عامًا (globally)، مع العلم أن هذه الدالة ليست جزء من اللغة نفسها، ولكنها دالة متوفّرة في العديد من متصفحات الإنترنت لأغراض تشخيص الشيفرة البرمجية debugging.

-
- -

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

- -

كل كائن في جافا سكريبت هو حالة/أمثولة instance من الكائن Object ويَرث كافة خاصياته properties وطُرقه methods.

- -

 

- -

الكائنات الخاصة
- الصنف (الفئة)

- -

لغة جافا سكريبت لغة من النوع prototype-based ولا تحتوي على العبارة class كما هو حال باقي لغات البرمجة الكائنية، كما في روبي أو بايثون، ويُربك هذا الأمر المبرمجين المعتادين على اللغات التي تعتمد على هذه العبارة أو المفهوم، وتستخدم جافا سكريبت بدلًا من ذلك الدوال functions لمحاكات مفهوم الأصناف classes، وتعريف صنف هو بسهولة تعريف أي دالّة:

- -
var Person = function () {};
-
- -

الكائن (أمثولة الصنف class instance)

- -

يتطلب إنشاء حالة/أمثولة instance جديدة من كائن obj استخدام العبارة new obj، وتعيين النتيجة إلى متغيّر بغرض الوصول إلى فيما بعد.

- -

عُرّف في الشيفرة السابقة صنف class بالاسم Person، وفي الشيفرة التالية، سيُنشئ حالتين/أمثولتين instances من هذا الصنف، الأولى بالاسم person1 والثانية بالاسم person2.

- -
var person1 = new Person();
-var person2 = new Person();
-
- -
فضلا أنظر {{jsxref("Object.create()")}} للحصول على وظيفة الإنشاء الجديدة الإضافية التي تنشأ حالة غير مهيأة
- -

المشيد The constructor

- -

يُستدعى المُشيّد constructor في لحظة الاستهلال instantiation (اللحظة التي يُنشئ فيها الكائن)، والمُشيّد ما هو إلا طريقة method من طُرق الصنف class، وفي جافا سكريبت تعمل الدالة على تشييد الكائن، ولذلك لا داعي إلى تعريف طريقة method من أجل عميلة التشييد، وكل إجراء مصرّح في الصنف class يُنفّذ في لحظة الاستهلال instantiation.

- -

يُستخدم المُشيّد في تعيين خاصيات properties الكائن، أو في استدعاء طُرق methods معينة لتحضير الكائن للاستخدام، وأما إضافة طُرق صنف وتعريفها يحدث باستخدام صيغة syntax مختلفة سنتطرّق إليها فيما بعد خلال المقال.

- -

تُظهر الشيفرة التالية كيف يُسجّل log (يُرسل رسالة نصية إلى طرفية المتصفح console) مُشيّد الصنفPerson رسالة نصية حينما يُستهل instantiated.

- -
var Person = function () {
-  console.log('تم إنشاء حالة');
-};
-
-var person1 = new Person();
-var person2 = new Person();
-
-
- -

الخاصية The property (خاصية الكائن object attribute)

- -

الخاصيات properties ما هي إلا متغيرات محتوات في الصنف class، وكل حالة/أمثولة من الكائن تمتلك هذه الخاصيات، وتُعيّن الخاصيات في دالة مُشيّد الصنف بحيثُ تُنشئ مع كل حالة/أمثولة instance.

- -

إن الكلمة المفتاحية this، والتي تُشير إلى الكائن الحالي، تسمح للمطوّر بالعمل مع الخاصيات من ضمن الصنف، والوصول (قراءةً وكتابةً) إلى الخاصية property من خارج الصنف يكون من خلال الصيغةInstanceName.Property كما هو الأمر في لغة C++ (سي بلس بلس) وJava والعديد من اللغات الأخرى، ومن داخل الصنف تُستخدم الصيغة this.Property للحصول على قيمة الخاصية أو لتعيين قيمتها.

- -

في الشيفرة التالية، عُرّفت الخاصية firstName للصنف Person وفي لحظة الاستهلال instantiation:

- -
var Person = function (firstName) {
-  this.firstName = firstName;
-  console.log('تم إنشاء حالة من Person');
-};
-
-var person1 = new Person('سفيان');
-var person2 = new Person('محمد');
-
-// Show the firstName properties of the objects
-console.log('الشخص1 هو ' + person1.firstName); // النتيجة ==> "الشخص1 هو سفيان"
-console.log('الشخص2 هو ' + person2.firstName); // النتيجة ==> "الشخص2 هو محمد"
-
- -

الطرق The methods

- -

الطرق methods ما هي إلا دوال (وتُعرّف كما تعرّف الدوال functions)، فيما عدا ذلك فهي تُشبه الخاصيات properties، واستدعاء طريقة method مشابه إلى الوصول إلى خاصيّة ما، ولكن مع إضافة () في نهاية اسم الطريقة، وربما مع مُعطيات arguments، ولتعريف طريقة، تُعيّن دالة إلى خاصيّة مُسمّات من خاصيّة الصنف prototype، ويُمكن فيما بعد استدعاء الطريقة على الكائن بنفس الاسم الذي عُيّن للدالة.

- -

في الشيفرة التالية، عُرّفت ومن ثم اُستخدِمت الطريقة ()sayHello للصنف Person.

- -
var Person = function (firstName) {
-  this.firstName = firstName;
-};
-
-Person.prototype.sayHello = function() {
-  console.log("مرحبا، أنا " + this.firstName);
-};
-
-var person1 = new Person("سفيان");
-var person2 = new Person("محمد");
-
-// إستدعاء طريقة Person sayHello.
-person1.sayHello(); // النتيجة ==>"مرحبا، أنا سفيان"
-person2.sayHello(); // النتيجة ==> "مرحبا، أنا محمد"
-
- -

إن الطُرق methods في جافا سكريبت ما هي إلا دالة كائن عادية مرتبطة مع كائن كخاصية property، وهذا يعني أنه يُمكن استدعاء الطُرق خارج السياق، كما في المثال التالي:

- -
var Person = function (firstName) {
-  this.firstName = firstName;
-};
-
-Person.prototype.sayHello = function() {
-  console.log("مرحبا، أنا " + this.firstName);
-};
-
-var person1 = new Person("سفيان");
-var person2 = new Person("محمد");
-var helloFunction = person1.sayHello;
-
-// النتيجة ==> "مرحبا، أنا سفيان"
-person1.sayHello();
-
-// النتيجة ==> "مرحبا، أنا محمد"
-person2.sayHello();
-
-// النتيجة ==> "مرحبا، أنا undefined" (أو أخطاء
-// TypeError في الوضع الصارم)
-helloFunction();
-
-// النتيجة ==> true
-console.log(helloFunction === person1.sayHello);
-
-// النتيجة ==> true
-console.log(helloFunction === Person.prototype.sayHello);
-
-// النتيجة ==> "مرحبا، أنا سفيان"
-helloFunction.call(person1);
- -

كما يُظهر المثال السابق، جميع الإحالات المستخدمة في استدعاء الدالة sayHello تُشير إلى نفس الدالةسواءً الاستدعاء الحاصل مع person1 أو Person.prototype أو حتى في المتغيّر helloFunctionوقيمة this خلال استدعاء الدالة يعتمد على الكيفية التي تُستدعى فيها، حيث تُشير الكلمة المفتاحيةthis إلى الكائن الحالي الذي تُستدعى عليه الطريقة method، بمعنى عندما تم استدعاء الطريقة()sayHello على الكائن person1 فإن this تُشير إلى الكائن person1، وعند استدعاء sayHelloعلى الكائن person2 فإن this تُشير إلى الكائن person2، ولكن إن تم الاستدعاء بطريقة مختلفة، فإنthis ستُعيّن تعينًا مختلفًا، فاستدعاء this من المتغيّر (كما في ()helloFunction) سيُعيّن this إلى الكائن العام global (والذي سيكون window في متصفح الإنترنت)، ومنذ أن هذا الكائن (على الأغلب) لا يملك الخاصّيّة firstName، ستكون النتيجة كما هو الحال في المثال السابق “Hello, I’m undefined”، كما يمكن دائمًا تعيين this صراحةً باستخدام Function#call (أو Function#apply) وهو كما كان في نهاية المثال.

- -
ملاحظة: أنظر المزيد حول this على call و apply
- -

الوراثة

- -

تُستخدم الوراثة في جافا سكريبت في إنشاء صنف class كمثيل مخصص لصنف أو أكثر (تدعم جافا سكريبت وراثة وحيدة فقط single inheritance)، ويُطلق على الصنف المخصص عادةً ابن (child)، ويطلق على الصنف الآخر عادةً  الأب (parent)، وفي جافا سكريبت يتمّ ذلك من خلال إسناد حالة/أمثولة من الصنف الأب إلى الصنف الابن، ومن ثم تخصيصه، وفي متصفحات الإنترنت الحديثة يُمكن استخدامObject.create في تحقيق الوراثة inheritance أيضًا.

- -
-

ملاحظة: لا تتفقد جافا سكريبت مُشيّد صنف الابن prototype.constructor (راجعObject.prototype)، وعليه يجب التصريح عن ذلك يدويًا، لمزيد من التفصيل راجع السؤال التالي علىStackoverflow.

-
- -

عُرّف في الشيفرة التالية الصنف Student كصنف ابن للصنف Person، ومن ثم أُعيد تعريف الطريقة()sayHello وأُضيفت الطريقة ()sayGoodBye علاوة على ذلك.

- -
// تعريف المشيد Person
-var Person = function(firstName) {
-  this.firstName = firstName;
-};
-
-// إضافة زوج من الطرق إلى Person.prototype
-Person.prototype.walk = function(){
-  console.log("أنا أتمشى!");
-};
-
-Person.prototype.sayHello = function(){
-  console.log("مرحبا، أنا " + this.firstName);
-};
-
-// تعريف مشيد Student
-function Student(firstName, subject) {
-  // إستدعاء المشيد اﻷب, التأكد (عن طريق الإستدعاء)
-  // من أن "this" وضعت بشكل صحيح أثناء اﻹستدعاء
-  Person.call(this, firstName);
-
-  // تهيئة خصائص الطالب المحددة
-  this.subject = subject;
-}
-
-// إنشاء كائن Student.prototype الذي يرث من Person.prototype.
-// ملاحظة: خطأ شائع أن يستعمل "new Person()" ﻹنشاء
-// Student.prototype. هذا غير صحيح لعدة أسباب،
-// ليس أقل أننا ليس لدينا أي شيء ﻹعطاء Person إلى المعامل "firstName".
-// الطريقة الصحيحة ﻹستدعاء Person هي في الأعلى حيث
-// إستدعيناه من Student.
-Student.prototype = Object.create(Person.prototype); // See note below
-
-// وضع الخاصية "constructor" للإشارة إلى Student
-Student.prototype.constructor = Student;
-
-// إستبدال الطريقة "sayHello"
-Student.prototype.sayHello = function(){
-  console.log("مرحبا، أنا " + this.firstName + ". أنا أدرس "
-              + this.subject + ".");
-};
-
-// إضافة الطريقة "sayGoodBye"
-Student.prototype.sayGoodBye = function(){
-  console.log("وداعا!");
-};
-
-// إستعمال المثال:
-var student1 = new Student("سفيان", "المناجم");
-student1.sayHello();   // "مرحبا، أنا سفيان. أنا أدرس المناجم."
-student1.walk();       // "أنا أتمشى!"
-student1.sayGoodBye(); // "وداعا!"
-
-// التحقق من أن instanceof يعمل بشكل صحيح
-console.log(student1 instanceof Person);  // true
-console.log(student1 instanceof Student); // true
-
- -

فيما يخص السطر ;(Student.prototype = Object.create(Person.prototype في الإصدارات القديمة من جافا سكريبت والتي لا تدعم Object.create يمكن إما استخدام بعض الحيل في خداع المتصفحات –هذه الخدع معروفة إما بالاسم polyfill أو shim—أو استخدام دالة تحقق نفس النتيجة كما في المثال التالي:

- -
function createObject(proto) {
-    function ctor() { }
-    ctor.prototype = proto;
-    return new ctor();
-}
-
-// الإستعمال:
-Student.prototype = createObject(Person.prototype);
-
- -
ملاحظة: أنظر Object.create للمزيد من المعلومات حول ما يقوم به, و الرقاقات للمحركات القديمة.
- -

التأكّد من أن this تُشير إلى الكائن المطلوب بغض النظر عن كيف للكائن أن يُستهل يمكن أن يكون صعبًا، ومع ذلك يوجد صياغة أبسط من شأنها أن تسهّل الأمر.

- -
var Person = function(firstName) {
-  if (this instanceof Person) {
-    this.firstName = firstName;
-  } else {
-    return new Person(firstName);
-  }
-}
-
- -

التغليف Encapsulation

- -

ليس بالضرورة أن يعلم الصنف Student كيف تمّ تنفيذ/تعريف الطريقة ()walk للصنف Person لكي يستطيع استخدام تلك الطريقة، ولا يحتاج الصنف Student إلى تعريف تلك الطريقة صراحةً إلا إذا كان المطلوب التعديل عليها، ويُطلق على هذا الإجراء مفهوم التغليف encapsulation، والذي فيه يَحزم كل صنف البيانات والطُرق methods داخل وحدة/كينونة وحيدة.

- -

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

- -

التجريد Abstraction

- -

التجرير ما هو إلا ميكانيكية تسمح للمطوّر في تجسيد جانب من المشكلة التي يُعمل عليها، إما من خلال الوراثة inheritance (التخصيص specialization) أو التركيب composition، وتُحقق جافا سكريبت التخصيص من خلال الوراثة، والتركيب من خلال السماح لحالات/أمثولات الصنف لتكون قيمًا لخاصيات attributes الكائنات الأخرى.

- -

الصنف Function في جافا سكريبت يرث من الصنف Object (وهذا يوضّح التخصيص في هذا النموذج) والخاصية Function.prototype ما هي إلا حالة/أمثولة من الصنف Object (وهذا يوضّح جزئية التركيب composition).

- -
var foo = function () {};
-
-// النتيجة ==> "foo عبارة عن وظيفة: true"
-console.log('foo عبارة عن وظيفة: ' + (foo instanceof Function));
-
-// النتيجة ==> "foo.prototype عبارة عن كائن: true"
-console.log('foo.prototype عبارة عن كائن: ' + (foo.prototype instanceof Object));
- -

تعددية الأشكال Polymorphism

- -

كما أن جميع الطُرق methods والخاصيات properties معرّفة ضمن الخاصية prototype، فيُمكن لبقية الأصناف أن تُعرِّف طُرقًا methods بنفس الاسم، وستكون الطُرق في نطاق الصنف الذي عُرفت به، إلا إذا كان الصنفان على علاقة من نوع أب وابن parent-child، بمعنى آخر أحد الصنفان يرث من الآخر
-
- هذه المقالة تُرجمة الي العربية بواسطة : محمد أبرص

- -

ملاحظات

- -

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

- -

هناك تقنيات أخرى تجعل البرمجة الكائنية التوجه أكثر تقدما لكنها خارج نطاق الهذه المقالة التمهيدية.

-
- -

المراجع

- -
    -
  1. ويكيبيديا - البرمجة الكائنية التوجه
    2. -
  2. ويكيبيديا - البرمجة القائمة على النوذج
    3. -
  3. ويكيبيديا - التغليف (البرمجة الكائنية التوجه)
    4. -
- -

أنظر أيضا

- -
    -
  • {{jsxref("Function.prototype.call()")}}
    • -
  • {{jsxref("Function.prototype.apply()")}}
    • -
  • {{jsxref("Object.create()")}}
    • -
  • الوضع الصارم
    • -
diff --git a/files/ar/web/javascript/reference/functions/get/index.html b/files/ar/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..d3789ba7bd --- /dev/null +++ b/files/ar/web/javascript/reference/functions/get/index.html @@ -0,0 +1,165 @@ +--- +title: getter +slug: Web/JavaScript/Reference/الدوال/get +translation_of: Web/JavaScript/Reference/Functions/get +--- +
{{jsSidebar("Functions")}}
+ +

The get صينطاكس طعمنيققbinds an object property to a function that will be called when that property is looked up.

+ +
{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
+ + + +

Syntax

+ +
{get prop() { ... } }
+{get [expression]() { ... } }
+ +

Parameters

+ +
+
prop
+
rty to bind to the given fun-tion.
+
expression
+
Starting with ECMAScript 2015, you can also use expressions for a computed property name to bind to the given function.
+
+ +

Description

+ +

احا الشبشب ضاع احا دا كان ةبصباع

+ +

It is not possible to simultaneously have a getter bound to a property and have that property actually hold a value, although it is possible to use a getter and a setter in conjunction to create a type of pseudo-property.

+ +

Note the following when working with the get syntax:

+ + + +

Examples

+ +

Defining a getter on new objects in object initializers

+ +

This will create a pseudo-property latest for object obj, which will return the last array item in log.

+ +
const obj = {
+  log: ['example','test'],
+  get latest() {
+    if (this.log.length === 0) return undefined;
+    return this.log[this.log.length - 1];
+  }
+}
+console.log(obj.latest); // "test"
+
+ +

Note that attempting to assign a value to latest will not change it.

+ +

Deleting a getter using the delete operator

+ +

If you want to remove the getter, you can just {{jsxref("Operators/delete", "delete")}} it:

+ +
delete obj.latest;
+
+ +

Defining a getter on existing objects using defineProperty

+ +

To append a getter to an existing object later at any time, use {{jsxref("Object.defineProperty()")}}.

+ +
const o = {a: 0};
+
+Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
+
+console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)
+ +

Using a computed property name

+ +
const expr = 'foo';
+
+const obj = {
+  get [expr]() { return 'bar'; }
+};
+
+console.log(obj.foo); // "bar"
+ +

Smart / self-overwriting / lazy getters

+ +

Getters give you a way to define a property of an object, but they do not calculate the property's value until it is accessed. A getter defers the cost of calculating the value until the value is needed. If it is never needed, you never pay the cost.

+ +

An additional optimization technique to lazify or delay the calculation of a property value and cache it for later access are smart (or "memoized") getters. The value is calculated the first time the getter is called, and is then cached so subsequent accesses return the cached value without recalculating it. This is useful in the following situations:

+ +
    +
  • If the calculation of a property value is expensive (takes much RAM or CPU time, spawns worker threads, retrieves remote file, etc).
    • +
  • If the value isn't needed just now. It will be used later, or in some case it's not used at all.
    • +
  • If it's used, it will be accessed several times, and there is no need to re-calculate that value will never be changed or shouldn't be re-calculated.
    • +
+ +
+

This means that you shouldn’t write a lazy getter for a property whose value you expect to change, because if the getter is lazy then it will not recalculate the value.

+ +

Note that getters are not “lazy” or “memozied” by nature; you must implement this technique if you desire this behavior.

+
+ +

In the following example, the object has a getter as its own property. On getting the property, the property is removed from the object and re-added, but implicitly as a data property this time. Finally, the value getsreturn this.notifier = document.getElementById('bookmarked-notification-anchor'); },

+ +

For Firefox code, see also the XPCOMUtils.jsm code module, which defines the defineLazyGetter() function.

+ +

get vs. defineProperty

+ +

While using the get keyword and {{jsxref("Object.defineProperty()")}} have similar results, there is a subtle difference between the two when used on {{jsxref("classes")}}.

+ +

When using get the property will be defined on the instance's prototype, while using {{jsxref("Object.defineProperty()")}} the property will be defined on the instance it is applied to.

+ +
class Example {
+  get hello() {
+    return 'world';
+  }
+}
+
+const obj = new Example();
+console.log(obj.hello);
+// "world"
+
+console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
+// undefined
+
+console.log(
+  Object.getOwnPropertyDescriptor(
+    Object.getPrototypeOf(obj), 'hello'
+  )
+);
+// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }
+ +

Specifications

+ + + + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.functions.get")}}

+ +

See also

+ +
    +
  • setter
    • +
  • {{jsxref("Operators/delete", "delete")}}
    • +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Object.defineGetter", "__defineGetter__")}}
    • +
  • {{jsxref("Object.defineSetter", "__defineSetter__")}}
    • +
  • Defining Getters and Setters in JavaScript Guide
    • +
diff --git a/files/ar/web/javascript/reference/functions/index.html b/files/ar/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..368d8af03d --- /dev/null +++ b/files/ar/web/javascript/reference/functions/index.html @@ -0,0 +1,645 @@ +--- +title: الدوال +slug: Web/JavaScript/Reference/الدوال +translation_of: Web/JavaScript/Reference/Functions +--- +
{{jsSidebar("Functions")}}
+ +

Generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the function body. Values can be passed to a function, and the function will return a value.

+ +

In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.

+ +

For more examples and explanations, see also the JavaScript guide about functions.

+ +

Description

+ +

Every function in JavaScript is a Function object. See {{jsxref("Function")}} for information on properties and methods of Function objects.

+ +

Functions are not the same as procedures. A function always returns a value, whereas a procedure might not.

+ +

To return a value other than the default, a function must have a return statement that specifies the value to return. A function without a return statement will return a default value. In the case of a constructor called with the new keyword, the default value is the value of its this parameter. For all other functions, the default return value is undefined.

+ +

The parameters of a function call are the function's arguments. Arguments are passed to functions by value. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:

+ +
/* Declare the function 'myFunc' */
+function myFunc(theObject) {
+   theObject.brand = "Toyota";
+ }
+
+ /*
+  * Declare variable 'mycar';
+  * create and initialize a new Object;
+  * assign reference to it to 'mycar'
+  */
+ var mycar = {
+   brand: "Honda",
+   model: "Accord",
+   year: 1998
+ };
+
+ /* Logs 'Honda' */
+ console.log(mycar.brand);
+
+ /* Pass object reference to the function */
+ myFunc(mycar);
+
+ /*
+  * Logs 'Toyota' as the value of the 'brand' property
+  * of the object, as changed to by the function.
+  */
+ console.log(mycar.brand);
+
+ +

The this keyword does not refer to the currently executing function, so you must refer to Function objects by name, even within the function body.

+ +

Defining functions

+ +

There are several ways to define functions:

+ +

The function declaration (function statement)

+ +

There is a special syntax for declaring functions (see function statement for details):

+ +
function name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
The function name.
+
+ +
+
param
+
The name of an argument to be passed to the function. A function can have up to 255 arguments.
+
+ +
+
statements
+
The statements comprising the body of the function.
+
+ +

The function expression (function expression)

+ +

A function expression is similar to and has the same syntax as a function declaration (see function expression for details):

+ +
function [name]([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
The function name. Can be omitted, in which case the function becomes known as an anonymous function.
+
+ +
+
param
+
The name of an argument to be passed to the function. A function can have up to 255 arguments.
+
statements
+
The statements comprising the body of the function.
+
+ +

The generator function declaration (function* statement)

+ +
+

Note: Generator functions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

+
+ +

There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):

+ +
function* name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
The function name.
+
+ +
+
param
+
The name of an argument to be passed to the function. A function can have up to 255 arguments.
+
+ +
+
statements
+
The statements comprising the body of the function.
+
+ +

The generator function expression (function* expression)

+ +
+

Note: Generator functions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

+
+ +

A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):

+ +
function* [name]([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
The function name. Can be omitted, in which case the function becomes known as an anonymous function.
+
+ +
+
param
+
The name of an argument to be passed to the function. A function can have up to 255 arguments.
+
statements
+
The statements comprising the body of the function.
+
+ +

The arrow function expression (=>)

+ +
+

Note: Arrow function expressions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

+
+ +

An arrow function expression has a shorter syntax and lexically binds its this value (see arrow functions for details):

+ +
([param[, param]]) => {
+   statements
+}
+
+param => expression
+
+ +
+
param
+
The name of an argument. Zero arguments need to be indicated with ().  For only one argument, the parentheses are not required. (like foo => 1)
+
statements or expression
+
Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.
+
+ +

The Function constructor

+ +
+

Note: Using the Function constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.

+
+ +

As all other objects, {{jsxref("Function")}} objects can be created using the new operator:

+ +
new Function (arg1, arg2, ... argN, functionBody)
+
+ +
+
arg1, arg2, ... argN
+
Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.
+
+ +
+
functionBody
+
A string containing the JavaScript statements comprising the function body.
+
+ +

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

+ +

The GeneratorFunction constructor

+ +
+

Note: Arrow function expressions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

+
+ +
+

Note: GeneratorFunction is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).

+
+ +
+

Note: Using the GeneratorFunction constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.

+
+ +

As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the new operator:

+ +
new GeneratorFunction (arg1, arg2, ... argN, functionBody)
+
+ +
+
arg1, arg2, ... argN
+
Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "x", "theValue", or "a,b".
+
+ +
+
functionBody
+
A string containing the JavaScript statements comprising the function definition.
+
+ +

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

+ +

Function parameters

+ +
+

Note: Default and rest parameters are experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

+
+ +

Default parameters

+ +

Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed. For more details, see default parameters.

+ +

Rest parameters

+ +

The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see rest parameters.

+ +

The arguments object

+ +

You can refer to a function's arguments within the function by using the arguments object. See arguments.

+ +
    +
  • arguments: An array-like object containing the arguments passed to the currently executing function.
    • +
  • arguments.callee {{Deprecated_inline}}: The currently executing function.
    • +
  • arguments.caller {{Obsolete_inline}} : The function that invoked the currently executing function.
    • +
  • arguments.length: The number of arguments passed to the function.
    • +
+ +

Defining method functions

+ +

Getter and setter functions

+ +

You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.

+ +
+
get
+
+

Binds an object property to a function that will be called when that property is looked up.

+
+
set
+
Binds an object property to a function to be called when there is an attempt to set that property.
+
+ +

Method definition syntax

+ +
+

Note: Method definitions are experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

+
+ +

Starting with ECMAScript 6, you are able to define own methods in a shorter syntax, similar to the getters and setters. See method definitions for more information.

+ +
var obj = {
+  foo() {},
+  bar() {}
+};
+ +

Function constructor vs. function declaration vs. function expression

+ +

Compare the following:

+ +

A function defined with the Function constructor assigned to the variable multiply:

+ +
function multiply(x, y) {
+   return x * y;
+}
+
+ +

A function expression of an anonymous function assigned to the variable multiply:

+ +
var multiply = function(x, y) {
+   return x * y;
+};
+
+ +

A function expression of a function named func_name assigned to the variable multiply:

+ +
var multiply = function func_name(x, y) {
+   return x * y;
+};
+
+ +

Differences

+ +

All do approximately the same thing, with a few subtle differences:

+ +

There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or undefined if the function name was previously declared via a var statement). For example:

+ +
var y = function x() {};
+alert(x); // throws an error
+
+ +

The function name also appears when the function is serialized via Function's toString method.

+ +

On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope where the function is declared in.

+ +

As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other.A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:

+ +

A function defined by 'new Function' does not have a function name. However, in the SpiderMonkey JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, alert(new Function()) outputs:

+ +
function anonymous() {
+}
+
+ +

Since the function actually does not have a name, anonymous is not a variable that can be accessed within the function. For example, the following would result in an error:

+ +
var foo = new Function("alert(anonymous);");
+foo();
+
+ +

Unlike functions defined by function expressions or by the Function constructor, a function defined by a function declaration can be used before the function declaration itself. For example:

+ +
foo(); // alerts FOO!
+function foo() {
+   alert('FOO!');
+}
+
+ +

A function defined by a function expression inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a Function constructor does not inherit any scope other than the global scope (which all functions inherit).

+ +

Functions defined by function expressions and function declarations are parsed only once, while those defined by the Function constructor are not. That is, the function body string passed to the Function constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "new Function(...)". Therefore the Function constructor should generally be avoided whenever possible.

+ +

It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a Function constructor 's string aren't parsed repeatedly. For example:

+ +
var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
+foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.
+ +

A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:

+ +
    +
  • becomes part of an expression
    • +
  • is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:
    • +
+ +
var x = 0;               // source element
+if (x == 0) {            // source element
+   x = 10;               // not a source element
+   function boo() {}     // not a source element
+}
+function foo() {         // source element
+   var y = 20;           // source element
+   function bar() {}     // source element
+   while (y == 10) {     // source element
+      function blah() {} // not a source element
+      y++;               // not a source element
+   }
+}
+
+ +

Examples

+ +
// function declaration
+function foo() {}
+
+// function expression
+(function bar() {})
+
+// function expression
+x = function hello() {}
+
+
+if (x) {
+   // function expression
+   function world() {}
+}
+
+
+// function declaration
+function a() {
+   // function declaration
+   function b() {}
+   if (0) {
+      // function expression
+      function c() {}
+   }
+}
+
+ +

Block-level functions

+ +

In strict mode, starting with ES2015 (ES6), functions inside blocks are now scoped to that block. Prior to ES6, block-level functions were forbidden in strict mode.

+ +
'use strict';
+
+function f() {
+  return 1;
+}
+
+{
+  function f() {
+    return 2;
+  }
+}
+
+f() === 1; // true
+
+// f() === 2 in non-strict mode
+
+ +

Block-level functions in non-strict code

+ +

In a word: Don't.

+ +

In non-strict code, function declarations inside blocks behave strangely. For example:

+ +
if (shouldDefineZero) {
+   function zero() {     // DANGER: compatibility risk
+      console.log("This is zero.");
+   }
+}
+
+ +

ES2015 says that if shouldDefineZero is false, then zero should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define zero whether the block executed or not.

+ +

In strict mode, all browsers that support ES2015 handle this the same way: zero is defined only if shouldDefineZero is true, and only in the scope of the if-block.

+ +

A safer way to define functions conditionally is to assign a function expression to a variable:

+ +
var zero;
+if (0) {
+   zero = function() {
+      console.log("This is zero.");
+   };
+}
+
+ +

Examples

+ +

Returning a formatted number

+ +

The following function returns a string containing the formatted representation of a number padded with leading zeros.

+ +
// This function returns a string padded with leading zeros
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // Initialize return value as string
+   var numZeros = totalLen - numStr.length; // Calculate no. of zeros
+   for (var i = 1; i <= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+
+ +

The following statements call the padZeros function.

+ +
var result;
+result = padZeros(42,4); // returns "0042"
+result = padZeros(42,2); // returns "42"
+result = padZeros(5,4);  // returns "0005"
+
+ +

Determining whether a function exists

+ +

You can determine whether a function exists by using the typeof operator. In the following example, a test is peformed to determine if the window object has a property called noFunc that is a function. If so, it is used; otherwise some other action is taken.

+ +
 if ('function' == typeof window.noFunc) {
+   // use noFunc()
+ } else {
+   // do something else
+ }
+
+ +

Note that in the if test, a reference to noFunc is used—there are no brackets "()" after the function name so the actual function is not called.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0
{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}}New: Arrow functions, Generator functions, default parameters, rest parameters.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator functions39{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow functions{{CompatNo}}{{CompatGeckoDesktop("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Block-level functions{{CompatUnknown}}{{CompatGeckoDesktop("46.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator functions{{CompatUnknown}}39{{CompatGeckoMobile("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow functions{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Block-level functions{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("46.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ +
    +
  • {{jsxref("Statements/function", "function statement")}}
    • +
  • {{jsxref("Operators/function", "function expression")}}
    • +
  • {{jsxref("Statements/function*", "function* statement")}}
    • +
  • {{jsxref("Operators/function*", "function* expression")}}
    • +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("GeneratorFunction")}}
    • +
  • {{jsxref("Functions/Arrow_functions", "Arrow functions")}}
    • +
  • {{jsxref("Functions/Default_parameters", "Default parameters")}}
    • +
  • {{jsxref("Functions/rest_parameters", "Rest parameters")}}
    • +
  • {{jsxref("Functions/arguments", "Arguments object")}}
    • +
  • {{jsxref("Functions/get", "getter")}}
    • +
  • {{jsxref("Functions/set", "setter")}}
    • +
  • {{jsxref("Functions/Method_definitions", "Method definitions")}}
    • +
  • Functions and function scope
    • +
diff --git a/files/ar/web/javascript/reference/global_objects/number/index.html b/files/ar/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..cb667fd3d8 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,12 @@ +--- +title: الارقام في الجافا سكربت +slug: Web/JavaScript/Reference/Global_Objects/الارقام +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +

 وهو كائن غلاف يستخدم لتمثيل ومعالجة الأرقام مثل  37  او 9.25 Numberمنشئ يحتوي على الثوابت وطرق للعمل مع الأرقام. يمكن تحويل قيم الأنواع الأخرى إلى أرقام باستخدام Number()الوظيفة.

+ +

جافا سكريبت رقم نوع عبارة عن قيمة مزدوجة الدقة بتنسيق IEEE 754 تنسيق ثنائي 64 بت ذات ، كما هو الحال doubleفي Java أو C #. هذا يعني أنه يمكن أن يمثل قيمًا كسرية ، ولكن هناك بعض الحدود لما يمكن تخزينه. يحتفظ فقط بحوالي   17 رقم  منزلاً عشريًا من الدقة ؛ الحساب يخضع للتقريب . أكبر قيمة يمكن أن يحملها رقم هي حوالي 1.8 × 10 308 . يتم استبدال الأعداد التي تتجاوز ذلك بثابت الرقم الخاص Infinity.

+ +

الرقم الحرفي مثل 37كود JavaScript هو قيمة فاصلة عائمة ، وليس عددًا صحيحًا. لا يوجد نوع عدد صحيح منفصل في الاستخدام اليومي الشائع. (يحتوي JavaScript الآن على BigIntنوع ، لكنه لم يتم تصميمه ليحل محل Number للاستخدامات اليومية. 37لا يزال رقمًا ، وليس BigInt.)

+ +

يمكن أيضًا التعبير عن الرقم بأشكال حرفية مثل 0b101، 0o13، 0x0A. تعرف على المزيد حول العددي قواعد المعجم هنا .

diff --git "a/files/ar/web/javascript/reference/global_objects/\330\247\331\204\330\247\330\261\331\202\330\247\331\205/index.html" "b/files/ar/web/javascript/reference/global_objects/\330\247\331\204\330\247\330\261\331\202\330\247\331\205/index.html" deleted file mode 100644 index cb667fd3d8..0000000000 --- "a/files/ar/web/javascript/reference/global_objects/\330\247\331\204\330\247\330\261\331\202\330\247\331\205/index.html" +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: الارقام في الجافا سكربت -slug: Web/JavaScript/Reference/Global_Objects/الارقام -translation_of: Web/JavaScript/Reference/Global_Objects/Number ---- -

 وهو كائن غلاف يستخدم لتمثيل ومعالجة الأرقام مثل  37  او 9.25 Numberمنشئ يحتوي على الثوابت وطرق للعمل مع الأرقام. يمكن تحويل قيم الأنواع الأخرى إلى أرقام باستخدام Number()الوظيفة.

- -

جافا سكريبت رقم نوع عبارة عن قيمة مزدوجة الدقة بتنسيق IEEE 754 تنسيق ثنائي 64 بت ذات ، كما هو الحال doubleفي Java أو C #. هذا يعني أنه يمكن أن يمثل قيمًا كسرية ، ولكن هناك بعض الحدود لما يمكن تخزينه. يحتفظ فقط بحوالي   17 رقم  منزلاً عشريًا من الدقة ؛ الحساب يخضع للتقريب . أكبر قيمة يمكن أن يحملها رقم هي حوالي 1.8 × 10 308 . يتم استبدال الأعداد التي تتجاوز ذلك بثابت الرقم الخاص Infinity.

- -

الرقم الحرفي مثل 37كود JavaScript هو قيمة فاصلة عائمة ، وليس عددًا صحيحًا. لا يوجد نوع عدد صحيح منفصل في الاستخدام اليومي الشائع. (يحتوي JavaScript الآن على BigIntنوع ، لكنه لم يتم تصميمه ليحل محل Number للاستخدامات اليومية. 37لا يزال رقمًا ، وليس BigInt.)

- -

يمكن أيضًا التعبير عن الرقم بأشكال حرفية مثل 0b101، 0o13، 0x0A. تعرف على المزيد حول العددي قواعد المعجم هنا .

diff --git "a/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/get/index.html" "b/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/get/index.html" deleted file mode 100644 index d3789ba7bd..0000000000 --- "a/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/get/index.html" +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: getter -slug: Web/JavaScript/Reference/الدوال/get -translation_of: Web/JavaScript/Reference/Functions/get ---- -
{{jsSidebar("Functions")}}
- -

The get صينطاكس طعمنيققbinds an object property to a function that will be called when that property is looked up.

- -
{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
- - - -

Syntax

- -
{get prop() { ... } }
-{get [expression]() { ... } }
- -

Parameters

- -
-
prop
-
rty to bind to the given fun-tion.
-
expression
-
Starting with ECMAScript 2015, you can also use expressions for a computed property name to bind to the given function.
-
- -

Description

- -

احا الشبشب ضاع احا دا كان ةبصباع

- -

It is not possible to simultaneously have a getter bound to a property and have that property actually hold a value, although it is possible to use a getter and a setter in conjunction to create a type of pseudo-property.

- -

Note the following when working with the get syntax:

- - - -

Examples

- -

Defining a getter on new objects in object initializers

- -

This will create a pseudo-property latest for object obj, which will return the last array item in log.

- -
const obj = {
-  log: ['example','test'],
-  get latest() {
-    if (this.log.length === 0) return undefined;
-    return this.log[this.log.length - 1];
-  }
-}
-console.log(obj.latest); // "test"
-
- -

Note that attempting to assign a value to latest will not change it.

- -

Deleting a getter using the delete operator

- -

If you want to remove the getter, you can just {{jsxref("Operators/delete", "delete")}} it:

- -
delete obj.latest;
-
- -

Defining a getter on existing objects using defineProperty

- -

To append a getter to an existing object later at any time, use {{jsxref("Object.defineProperty()")}}.

- -
const o = {a: 0};
-
-Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
-
-console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)
- -

Using a computed property name

- -
const expr = 'foo';
-
-const obj = {
-  get [expr]() { return 'bar'; }
-};
-
-console.log(obj.foo); // "bar"
- -

Smart / self-overwriting / lazy getters

- -

Getters give you a way to define a property of an object, but they do not calculate the property's value until it is accessed. A getter defers the cost of calculating the value until the value is needed. If it is never needed, you never pay the cost.

- -

An additional optimization technique to lazify or delay the calculation of a property value and cache it for later access are smart (or "memoized") getters. The value is calculated the first time the getter is called, and is then cached so subsequent accesses return the cached value without recalculating it. This is useful in the following situations:

- -
    -
  • If the calculation of a property value is expensive (takes much RAM or CPU time, spawns worker threads, retrieves remote file, etc).
    • -
  • If the value isn't needed just now. It will be used later, or in some case it's not used at all.
    • -
  • If it's used, it will be accessed several times, and there is no need to re-calculate that value will never be changed or shouldn't be re-calculated.
    • -
- -
-

This means that you shouldn’t write a lazy getter for a property whose value you expect to change, because if the getter is lazy then it will not recalculate the value.

- -

Note that getters are not “lazy” or “memozied” by nature; you must implement this technique if you desire this behavior.

-
- -

In the following example, the object has a getter as its own property. On getting the property, the property is removed from the object and re-added, but implicitly as a data property this time. Finally, the value getsreturn this.notifier = document.getElementById('bookmarked-notification-anchor'); },

- -

For Firefox code, see also the XPCOMUtils.jsm code module, which defines the defineLazyGetter() function.

- -

get vs. defineProperty

- -

While using the get keyword and {{jsxref("Object.defineProperty()")}} have similar results, there is a subtle difference between the two when used on {{jsxref("classes")}}.

- -

When using get the property will be defined on the instance's prototype, while using {{jsxref("Object.defineProperty()")}} the property will be defined on the instance it is applied to.

- -
class Example {
-  get hello() {
-    return 'world';
-  }
-}
-
-const obj = new Example();
-console.log(obj.hello);
-// "world"
-
-console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
-// undefined
-
-console.log(
-  Object.getOwnPropertyDescriptor(
-    Object.getPrototypeOf(obj), 'hello'
-  )
-);
-// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }
- -

Specifications

- - - - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}
- -

Browser compatibility

- - - -

{{Compat("javascript.functions.get")}}

- -

See also

- -
    -
  • setter
    • -
  • {{jsxref("Operators/delete", "delete")}}
    • -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Object.defineGetter", "__defineGetter__")}}
    • -
  • {{jsxref("Object.defineSetter", "__defineSetter__")}}
    • -
  • Defining Getters and Setters in JavaScript Guide
    • -
diff --git "a/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" "b/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" deleted file mode 100644 index 368d8af03d..0000000000 --- "a/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" +++ /dev/null @@ -1,645 +0,0 @@ ---- -title: الدوال -slug: Web/JavaScript/Reference/الدوال -translation_of: Web/JavaScript/Reference/Functions ---- -
{{jsSidebar("Functions")}}
- -

Generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the function body. Values can be passed to a function, and the function will return a value.

- -

In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.

- -

For more examples and explanations, see also the JavaScript guide about functions.

- -

Description

- -

Every function in JavaScript is a Function object. See {{jsxref("Function")}} for information on properties and methods of Function objects.

- -

Functions are not the same as procedures. A function always returns a value, whereas a procedure might not.

- -

To return a value other than the default, a function must have a return statement that specifies the value to return. A function without a return statement will return a default value. In the case of a constructor called with the new keyword, the default value is the value of its this parameter. For all other functions, the default return value is undefined.

- -

The parameters of a function call are the function's arguments. Arguments are passed to functions by value. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:

- -
/* Declare the function 'myFunc' */
-function myFunc(theObject) {
-   theObject.brand = "Toyota";
- }
-
- /*
-  * Declare variable 'mycar';
-  * create and initialize a new Object;
-  * assign reference to it to 'mycar'
-  */
- var mycar = {
-   brand: "Honda",
-   model: "Accord",
-   year: 1998
- };
-
- /* Logs 'Honda' */
- console.log(mycar.brand);
-
- /* Pass object reference to the function */
- myFunc(mycar);
-
- /*
-  * Logs 'Toyota' as the value of the 'brand' property
-  * of the object, as changed to by the function.
-  */
- console.log(mycar.brand);
-
- -

The this keyword does not refer to the currently executing function, so you must refer to Function objects by name, even within the function body.

- -

Defining functions

- -

There are several ways to define functions:

- -

The function declaration (function statement)

- -

There is a special syntax for declaring functions (see function statement for details):

- -
function name([param[, param[, ... param]]]) {
-   statements
-}
-
- -
-
name
-
The function name.
-
- -
-
param
-
The name of an argument to be passed to the function. A function can have up to 255 arguments.
-
- -
-
statements
-
The statements comprising the body of the function.
-
- -

The function expression (function expression)

- -

A function expression is similar to and has the same syntax as a function declaration (see function expression for details):

- -
function [name]([param[, param[, ... param]]]) {
-   statements
-}
-
- -
-
name
-
The function name. Can be omitted, in which case the function becomes known as an anonymous function.
-
- -
-
param
-
The name of an argument to be passed to the function. A function can have up to 255 arguments.
-
statements
-
The statements comprising the body of the function.
-
- -

The generator function declaration (function* statement)

- -
-

Note: Generator functions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

-
- -

There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):

- -
function* name([param[, param[, ... param]]]) {
-   statements
-}
-
- -
-
name
-
The function name.
-
- -
-
param
-
The name of an argument to be passed to the function. A function can have up to 255 arguments.
-
- -
-
statements
-
The statements comprising the body of the function.
-
- -

The generator function expression (function* expression)

- -
-

Note: Generator functions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

-
- -

A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):

- -
function* [name]([param[, param[, ... param]]]) {
-   statements
-}
-
- -
-
name
-
The function name. Can be omitted, in which case the function becomes known as an anonymous function.
-
- -
-
param
-
The name of an argument to be passed to the function. A function can have up to 255 arguments.
-
statements
-
The statements comprising the body of the function.
-
- -

The arrow function expression (=>)

- -
-

Note: Arrow function expressions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

-
- -

An arrow function expression has a shorter syntax and lexically binds its this value (see arrow functions for details):

- -
([param[, param]]) => {
-   statements
-}
-
-param => expression
-
- -
-
param
-
The name of an argument. Zero arguments need to be indicated with ().  For only one argument, the parentheses are not required. (like foo => 1)
-
statements or expression
-
Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.
-
- -

The Function constructor

- -
-

Note: Using the Function constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.

-
- -

As all other objects, {{jsxref("Function")}} objects can be created using the new operator:

- -
new Function (arg1, arg2, ... argN, functionBody)
-
- -
-
arg1, arg2, ... argN
-
Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.
-
- -
-
functionBody
-
A string containing the JavaScript statements comprising the function body.
-
- -

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

- -

The GeneratorFunction constructor

- -
-

Note: Arrow function expressions are an experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

-
- -
-

Note: GeneratorFunction is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).

-
- -
-

Note: Using the GeneratorFunction constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.

-
- -

As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the new operator:

- -
new GeneratorFunction (arg1, arg2, ... argN, functionBody)
-
- -
-
arg1, arg2, ... argN
-
Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "x", "theValue", or "a,b".
-
- -
-
functionBody
-
A string containing the JavaScript statements comprising the function definition.
-
- -

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

- -

Function parameters

- -
-

Note: Default and rest parameters are experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

-
- -

Default parameters

- -

Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed. For more details, see default parameters.

- -

Rest parameters

- -

The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see rest parameters.

- -

The arguments object

- -

You can refer to a function's arguments within the function by using the arguments object. See arguments.

- -
    -
  • arguments: An array-like object containing the arguments passed to the currently executing function.
    • -
  • arguments.callee {{Deprecated_inline}}: The currently executing function.
    • -
  • arguments.caller {{Obsolete_inline}} : The function that invoked the currently executing function.
    • -
  • arguments.length: The number of arguments passed to the function.
    • -
- -

Defining method functions

- -

Getter and setter functions

- -

You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.

- -
-
get
-
-

Binds an object property to a function that will be called when that property is looked up.

-
-
set
-
Binds an object property to a function to be called when there is an attempt to set that property.
-
- -

Method definition syntax

- -
-

Note: Method definitions are experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

-
- -

Starting with ECMAScript 6, you are able to define own methods in a shorter syntax, similar to the getters and setters. See method definitions for more information.

- -
var obj = {
-  foo() {},
-  bar() {}
-};
- -

Function constructor vs. function declaration vs. function expression

- -

Compare the following:

- -

A function defined with the Function constructor assigned to the variable multiply:

- -
function multiply(x, y) {
-   return x * y;
-}
-
- -

A function expression of an anonymous function assigned to the variable multiply:

- -
var multiply = function(x, y) {
-   return x * y;
-};
-
- -

A function expression of a function named func_name assigned to the variable multiply:

- -
var multiply = function func_name(x, y) {
-   return x * y;
-};
-
- -

Differences

- -

All do approximately the same thing, with a few subtle differences:

- -

There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or undefined if the function name was previously declared via a var statement). For example:

- -
var y = function x() {};
-alert(x); // throws an error
-
- -

The function name also appears when the function is serialized via Function's toString method.

- -

On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope where the function is declared in.

- -

As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other.A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:

- -

A function defined by 'new Function' does not have a function name. However, in the SpiderMonkey JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, alert(new Function()) outputs:

- -
function anonymous() {
-}
-
- -

Since the function actually does not have a name, anonymous is not a variable that can be accessed within the function. For example, the following would result in an error:

- -
var foo = new Function("alert(anonymous);");
-foo();
-
- -

Unlike functions defined by function expressions or by the Function constructor, a function defined by a function declaration can be used before the function declaration itself. For example:

- -
foo(); // alerts FOO!
-function foo() {
-   alert('FOO!');
-}
-
- -

A function defined by a function expression inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a Function constructor does not inherit any scope other than the global scope (which all functions inherit).

- -

Functions defined by function expressions and function declarations are parsed only once, while those defined by the Function constructor are not. That is, the function body string passed to the Function constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "new Function(...)". Therefore the Function constructor should generally be avoided whenever possible.

- -

It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a Function constructor 's string aren't parsed repeatedly. For example:

- -
var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
-foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.
- -

A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:

- -
    -
  • becomes part of an expression
    • -
  • is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:
    • -
- -
var x = 0;               // source element
-if (x == 0) {            // source element
-   x = 10;               // not a source element
-   function boo() {}     // not a source element
-}
-function foo() {         // source element
-   var y = 20;           // source element
-   function bar() {}     // source element
-   while (y == 10) {     // source element
-      function blah() {} // not a source element
-      y++;               // not a source element
-   }
-}
-
- -

Examples

- -
// function declaration
-function foo() {}
-
-// function expression
-(function bar() {})
-
-// function expression
-x = function hello() {}
-
-
-if (x) {
-   // function expression
-   function world() {}
-}
-
-
-// function declaration
-function a() {
-   // function declaration
-   function b() {}
-   if (0) {
-      // function expression
-      function c() {}
-   }
-}
-
- -

Block-level functions

- -

In strict mode, starting with ES2015 (ES6), functions inside blocks are now scoped to that block. Prior to ES6, block-level functions were forbidden in strict mode.

- -
'use strict';
-
-function f() {
-  return 1;
-}
-
-{
-  function f() {
-    return 2;
-  }
-}
-
-f() === 1; // true
-
-// f() === 2 in non-strict mode
-
- -

Block-level functions in non-strict code

- -

In a word: Don't.

- -

In non-strict code, function declarations inside blocks behave strangely. For example:

- -
if (shouldDefineZero) {
-   function zero() {     // DANGER: compatibility risk
-      console.log("This is zero.");
-   }
-}
-
- -

ES2015 says that if shouldDefineZero is false, then zero should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define zero whether the block executed or not.

- -

In strict mode, all browsers that support ES2015 handle this the same way: zero is defined only if shouldDefineZero is true, and only in the scope of the if-block.

- -

A safer way to define functions conditionally is to assign a function expression to a variable:

- -
var zero;
-if (0) {
-   zero = function() {
-      console.log("This is zero.");
-   };
-}
-
- -

Examples

- -

Returning a formatted number

- -

The following function returns a string containing the formatted representation of a number padded with leading zeros.

- -
// This function returns a string padded with leading zeros
-function padZeros(num, totalLen) {
-   var numStr = num.toString();             // Initialize return value as string
-   var numZeros = totalLen - numStr.length; // Calculate no. of zeros
-   for (var i = 1; i <= numZeros; i++) {
-      numStr = "0" + numStr;
-   }
-   return numStr;
-}
-
- -

The following statements call the padZeros function.

- -
var result;
-result = padZeros(42,4); // returns "0042"
-result = padZeros(42,2); // returns "42"
-result = padZeros(5,4);  // returns "0005"
-
- -

Determining whether a function exists

- -

You can determine whether a function exists by using the typeof operator. In the following example, a test is peformed to determine if the window object has a property called noFunc that is a function. If so, it is used; otherwise some other action is taken.

- -
 if ('function' == typeof window.noFunc) {
-   // use noFunc()
- } else {
-   // do something else
- }
-
- -

Note that in the if test, a reference to noFunc is used—there are no brackets "()" after the function name so the actual function is not called.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0
{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}}New: Arrow functions, Generator functions, default parameters, rest parameters.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator functions39{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow functions{{CompatNo}}{{CompatGeckoDesktop("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Block-level functions{{CompatUnknown}}{{CompatGeckoDesktop("46.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator functions{{CompatUnknown}}39{{CompatGeckoMobile("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow functions{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Block-level functions{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("46.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

See also

- -
    -
  • {{jsxref("Statements/function", "function statement")}}
    • -
  • {{jsxref("Operators/function", "function expression")}}
    • -
  • {{jsxref("Statements/function*", "function* statement")}}
    • -
  • {{jsxref("Operators/function*", "function* expression")}}
    • -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("GeneratorFunction")}}
    • -
  • {{jsxref("Functions/Arrow_functions", "Arrow functions")}}
    • -
  • {{jsxref("Functions/Default_parameters", "Default parameters")}}
    • -
  • {{jsxref("Functions/rest_parameters", "Rest parameters")}}
    • -
  • {{jsxref("Functions/arguments", "Arguments object")}}
    • -
  • {{jsxref("Functions/get", "getter")}}
    • -
  • {{jsxref("Functions/set", "setter")}}
    • -
  • {{jsxref("Functions/Method_definitions", "Method definitions")}}
    • -
  • Functions and function scope
    • -
diff --git a/files/ar/web/reference/index.html b/files/ar/web/reference/index.html new file mode 100644 index 0000000000..fc7fd86cda --- /dev/null +++ b/files/ar/web/reference/index.html @@ -0,0 +1,42 @@ +--- +title: مرجع تكنولوجيا الويب. +slug: Web/مرجع. +tags: + - مراجع +translation_of: Web/Reference +--- +

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

+ +
+
+

تقنيات الويب الأساسية

+ +

{{ Page ("Web", "Web technologies") }}

+
+ +

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

+ +
+

إذا كنت جديدًا في مجال تطوير الويب ، ففكر في البدء بمنطقة التعلم المليئة بالبرامج التعليمية خطوة بخطوة من شأنها أن ترشدك من مبتدئ webdev إلى شبه محترف على الأقل!

+ +
+
HTML - هيكلة الويب تُستخدم
+
HyperText Markup Language لتعريف ووصف محتوى صفحة الويب ( ) لصفحة الويب بتنسيق جيد التنظيم. يوفر HTML وسيلة لإنشاء مستندات منظمة مكونة من كتل تسمى عناصر HTML المحددة بواسطة العلامات ، مكتوبة باستخدام أقواس معقوفة. يقدم البعض المحتوى في الصفحة مباشرةً ، بينما يوفر البعض الآخر معلومات حول نص المستند وقد يتضمن علامات أخرى كعناصر فرعية. من الواضح أن المتصفحات لا تعرضها ، حيث يتم استخدامها لتفسير محتوى الصفحة.
+
+ مقدمة إلى HTML | تعلم HTML | HTML5 | دليل المطور | مرجع العنصر | المرجع
+
CSS - تصميم الويب تستخدم
+
أوراق الأنماط المتتالية لوصف مظهر محتوى الويب.
+
+ مقدمة إلى CSS | بدء استخدام CSS | تعلم CSS | أسئلة CSS الشائعة | المرجع
+
JavaScript - برمجة نصية ديناميكية من جانب العميل
+
تُستخدم لغة البرمجة JavaScript لإضافة التفاعل والميزات الديناميكية الأخرى إلى مواقع الويب.
+
تعلم JavaScript | دليل المطور | المرجع
+
+ +
+

{{draft()}}

+ +

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

+
+
+
diff --git a/files/ar/web/security/index.html b/files/ar/web/security/index.html new file mode 100644 index 0000000000..c9c30e8ca4 --- /dev/null +++ b/files/ar/web/security/index.html @@ -0,0 +1,16 @@ +--- +title: حماية الويب +slug: Web/حماية +tags: + - Landing + - Security + - Web +translation_of: Web/Security +--- +
+

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

+
+ +

{{LandingPageListSubpages}}{{QuickLinksWithSubpages}}

+ +
diff --git "a/files/ar/web/\330\255\331\205\330\247\331\212\330\251/index.html" "b/files/ar/web/\330\255\331\205\330\247\331\212\330\251/index.html" deleted file mode 100644 index c9c30e8ca4..0000000000 --- "a/files/ar/web/\330\255\331\205\330\247\331\212\330\251/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: حماية الويب -slug: Web/حماية -tags: - - Landing - - Security - - Web -translation_of: Web/Security ---- -
-

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

-
- -

{{LandingPageListSubpages}}{{QuickLinksWithSubpages}}

- -
diff --git "a/files/ar/web/\331\205\330\261\330\254\330\271/index.html" "b/files/ar/web/\331\205\330\261\330\254\330\271/index.html" deleted file mode 100644 index fc7fd86cda..0000000000 --- "a/files/ar/web/\331\205\330\261\330\254\330\271/index.html" +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: مرجع تكنولوجيا الويب. -slug: Web/مرجع. -tags: - - مراجع -translation_of: Web/Reference ---- -

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

- -
-
-

تقنيات الويب الأساسية

- -

{{ Page ("Web", "Web technologies") }}

-
- -

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

- -
-

إذا كنت جديدًا في مجال تطوير الويب ، ففكر في البدء بمنطقة التعلم المليئة بالبرامج التعليمية خطوة بخطوة من شأنها أن ترشدك من مبتدئ webdev إلى شبه محترف على الأقل!

- -
-
HTML - هيكلة الويب تُستخدم
-
HyperText Markup Language لتعريف ووصف محتوى صفحة الويب ( ) لصفحة الويب بتنسيق جيد التنظيم. يوفر HTML وسيلة لإنشاء مستندات منظمة مكونة من كتل تسمى عناصر HTML المحددة بواسطة العلامات ، مكتوبة باستخدام أقواس معقوفة. يقدم البعض المحتوى في الصفحة مباشرةً ، بينما يوفر البعض الآخر معلومات حول نص المستند وقد يتضمن علامات أخرى كعناصر فرعية. من الواضح أن المتصفحات لا تعرضها ، حيث يتم استخدامها لتفسير محتوى الصفحة.
-
- مقدمة إلى HTML | تعلم HTML | HTML5 | دليل المطور | مرجع العنصر | المرجع
-
CSS - تصميم الويب تستخدم
-
أوراق الأنماط المتتالية لوصف مظهر محتوى الويب.
-
- مقدمة إلى CSS | بدء استخدام CSS | تعلم CSS | أسئلة CSS الشائعة | المرجع
-
JavaScript - برمجة نصية ديناميكية من جانب العميل
-
تُستخدم لغة البرمجة JavaScript لإضافة التفاعل والميزات الديناميكية الأخرى إلى مواقع الويب.
-
تعلم JavaScript | دليل المطور | المرجع
-
- -
-

{{draft()}}

- -

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

-
-
-
diff --git a/files/ar/web_development/index.html b/files/ar/web_development/index.html deleted file mode 100644 index 051accb9a5..0000000000 --- a/files/ar/web_development/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Web Development -slug: Web_Development -tags: - - NeedsTranslation - - TopicStub - - Web Development -translation_of: Web/Guide -translation_of_original: Web_Development ---- -

Web development comprises all aspects of developing a web site or web application.

-

Learn how to create anything from a simple web site to complex, highly interactive web sites featuring the latest Web technologies by perusing the articles you'll find here.

- - - - - - - -
-

Documentation topics

-

Technologies

-
-
- Introduction to Web development
-
- A guide to learning how to develop for the Web.
-
- HTML
-
- HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.
-
- CSS
-
- Cascading Style Sheets make it possible to do advanced layout and page design on the Web.
-
- JavaScript
-
- JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.
-
- DOM
-
- The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.
-
- AJAX
-
- Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.
-
- XHTML
-
- Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.
-
- SVG
-
- Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.
-
-

Strategies

-
-
- Web standards
-
- Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.
-
- Responsive Web design
-
- Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.
-
- Writing forward-compatible websites
-
- Best practices for creating websites that do not break when browsers are updated.
-
- Mobile Web development
-
- Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.
-
- Mozilla Web developer FAQ
-
- Frequently asked questions from Web developers. With answers!
-
-

View All...

- 		-

Community

- -

Tools

- -

View All...

-
diff --git a/files/ar/web_development/mobile/index.html b/files/ar/web_development/mobile/index.html deleted file mode 100644 index cc288a9c45..0000000000 --- a/files/ar/web_development/mobile/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Mobile Web development -slug: Web_Development/Mobile -tags: - - Mobile - - NeedsTranslation - - TopicStub - - Web Development -translation_of: Web/Guide/Mobile -translation_of_original: Web_Development/Mobile ---- -

Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.

- diff --git "a/files/ar/\330\243\330\255\330\257\330\247\330\253_\331\205\331\203\330\252\330\250\330\251_jquery/index.html" "b/files/ar/\330\243\330\255\330\257\330\247\330\253_\331\205\331\203\330\252\330\250\330\251_jquery/index.html" deleted file mode 100644 index bd2307f8ce..0000000000 --- "a/files/ar/\330\243\330\255\330\257\330\247\330\253_\331\205\331\203\330\252\330\250\330\251_jquery/index.html" +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: أحداث مكتبة jQuery -slug: أحداث_مكتبة_jQuery ---- -

تعريف

-

أحداث مكتبة jQuery تقوم بربط الدوال مع عنصر معين.

-

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

-

أحداث مكتبة jQuery

-

حدث blur()

-

يقوم الحدث blur() بمعالجة دالة ما عندما يفقد مربع إدخال النصوص المحدد إمكانيته على الإدخال,مثال:

-
<script src="http://code.jquery.com/jquery-latest.js"></script>
-<script>
-$(document).ready(function() {
-$("#text").blur(function() {
-$(this).css("background-color","orange");
-});
-});
-</script>
-<input type="text" id="text">
-
-

إنتقل إلى الرابط التالي لتشاهد كيف يعمل هذا الحدث: http://jsbin.com/tibequrucelu/1/edit

-
-

حدث change()

-

يقوم الحدث change() بمعالجة دالة ما عندما يتغير محتوى مربع إدخال النصوص,مثال:

-
<script src="http://code.jquery.com/jquery-latest.js"></script>
-<script>
-$(document).ready(function() {
-$("#text").change(function() {
-alert("
لقد تغير محتوى النص
");
-});
-});
-</script>
-<input type="text" id="text">
-
-

انتقل إلى الرابط التالي لتشاهد كيف يعمل هذا الحدث: http://jsbin.com/getigucoqeba/1/edit

-
-

حدث click()

-

يقوم حدث click() بمعالجة دالة ما عندما يتم الضغط بزر الفأرة الأيسر على العنصر المحدد,مثال:

-
<script src="http://code.jquery.com/jquery-latest.js"></script>
-<script>
-$(document).ready(function() {
-$("#button").click(function() {
-alert("
لقد تم ضغط الزر
");
-});
-});
-</script>
-<input type="button" id="button" value="
اضغط هنا
">
-
-

انتقل إلى الرابط التالي لتشاهد كيف يعمل هذا الحدث: http://jsbin.com/radepuyuwexe/1/edit

-
-

حدث dblclick()

-

يقوم حدث dblclick() بمعالجة دالة ما عندما يتم الضغط بشكل مزدوج بإستخدام زر الفأرة الأيسر على العنصر المحدد,مثال:

-
<script src="http://code.jquery.com/jquery-latest.js"></script>
-<script>
-$(document).ready(function() {
-$("#button").dblclick(function() {
-alert("
لقد تم ضغط الزر بشكل مزدوج
");
-});
-});
-</script>
-<input type="button" id="button" value="
اضغط هنا
">
-
-

انتقل إلى الرابط التالي لتشاهد كيف يعمل هذا الحدث: http://jsbin.com/delazakoloye/1/edit

diff --git "a/files/ar/\331\205\331\203\330\252\330\250\330\251_\330\254\331\212_\331\203\331\210\331\212\330\261\331\212/index.html" "b/files/ar/\331\205\331\203\330\252\330\250\330\251_\330\254\331\212_\331\203\331\210\331\212\330\261\331\212/index.html" deleted file mode 100644 index 52d56021d4..0000000000 --- "a/files/ar/\331\205\331\203\330\252\330\250\330\251_\330\254\331\212_\331\203\331\210\331\212\330\261\331\212/index.html" +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: مكتبة jQuery -slug: مكتبة_جي_كويري ---- -

مقدمة

-

jQuery هي عبارة عن مكتبة مكتوبة بلغة JavaScript.

-

تقوم مكتبة jQuery بإزالة التعقيدات من برمجة JavaScript.

-

أهمية مكتبة jQuery

-

تقوم مكتبة jQuery بإختصار شيفرات JavaScript الطويلة.

-

تخيل أنه عوضاً عن كتابة:

-
document.getElementById(Element_Id);
-
-

يمكنك الإكتفاء بكتابة:

-
$(Element_Id)
-
-

مكونات مكتبة jQuery

-

تتألف مكتبة jQuery من المكونات التالية:

-

النواة:

-

بما أن مكتبة jQuery مكتوبة بشكل كامل بلغة JavaScript,فإن نواتها مكونة من لغة JavaScript.

-

الأحداث:

-

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

-

التأثيرات:

-

تتمتع مكتبة jQuery بمجموعة كبيرة من التأثيرات كالإنزلاق و الإختفاء و التحريك...

-

الأجاكس:

-

تتمتع مكتبة jQuery بقدرة على تقليص كود الأجاكس مما يوفر الكثير من الوقت في كتابته.

-

مميزات مكتبة jQuery

-

تتمتع مكتبة jQuery بمجموعة كبيرة من المميزات مثل:الحجم الصغير,تقليص حجوم شيفرات JavaScript,مجانية و مفتوحة المصدر.

-

مشاكل مكتبة jQuery

-

لا تدعم مكتبة jQuery المتصفحات القديمة و لا تعمل جيداً مع الإتصالات البطيئة.

-

روابط ذات فائدة:

-

الموقع الرسمي

diff --git "a/files/ar/\331\210\330\247\330\265\331\201\330\251_spellcheck_\330\247\331\204\330\254\330\257\331\212\330\257\330\251_\331\201\331\212_html5/index.html" "b/files/ar/\331\210\330\247\330\265\331\201\330\251_spellcheck_\330\247\331\204\330\254\330\257\331\212\330\257\330\251_\331\201\331\212_html5/index.html" deleted file mode 100644 index 2e2626d616..0000000000 --- "a/files/ar/\331\210\330\247\330\265\331\201\330\251_spellcheck_\330\247\331\204\330\254\330\257\331\212\330\257\330\251_\331\201\331\212_html5/index.html" +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: واصفة SpellCheck الجديدة في HTML5 -slug: واصفة_SpellCheck_الجديدة_في_HTML5 ---- -
-

مقدمة.

-

تستخدم واصفة SpellCheck في التحقق من أن العنصر الذي يحتوي هذه الواصفة خالي من الأخطاء الإملائية و النحوية.

-

الإستعمال.

-

تستعمل واصفة SpellCheck لتحديد إذا ما كان مصحح الأخطاء الإملائية للعنصر فعال أو لا.

-

يمكن إستعمالها في الفقرات القابلة للتحرير,مربعات إدخال النصوص,أو مربعات الحوار.

-

التوافق مع العناصر.

-

إن واصفة SpellCheck متوافقة مع كافة العناصر,و يمكن إضافتها إلى أي عنصر داخل معايير HTML.

-
- إن واصفة SpellCheck جديدة في HTML5.
-

التأثير الظاهري للواصفة على الصفحة.

-

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

-

الشكل العام لصيغة الواصفة.

- 
<p spellcheck="true">This Is A Paragraph</p>
-
-<p spellcheck="false">This Is Another Paragraph</p>
-
-

إذا أخذت الواصفة القيمة المنطقية true,فإن مصحح الأخطاء الهجائية للعنصر سيعمل,و إذا أخذت الواصفة القيمة المنطقية false,فإن مصحح الأخطاء الهجائية للعنصر لن يعمل,و في هذه الحالة لا يوجد داعي لتضمين هذه الواصفة في العنصر

-
- لا تدعم واصفة SpellCheck كل اللغات,من أمثلة اللغات غير المدعومة:اللغة العربية.
-

أمثلة:

-

في المثال التالي,سوف تتحقق واصفة SpellCheck من وجود أخطاء إملائية في مربع إدخال النصوص.

-

هذه هي الشيفرة:

- 
<textarea rows="10" cols="40" spellcheck="true"></textarea>
-
-

الآن شاهد في الأسفل كيف أن الكلمات التي تحتوي أخطاء هجائية سيظهر تحتها خط أحمر:

-
-
-

التوافق مع المتصفحات.

- - - - - - - - - - - - - - - - - - -
- دعم المتصفحات لواصفة SpellCheck
Internet Explorer 10Google ChromeMozzila FirefoxOperaSafari
مدعومةمدعومةمدعومةمدعومةمدعومة
-

إستعمال الواصفة في JavaScript.

-

يمكن إستخدام هذه الواصفة في نصوص JavaScript.

-

الصيغة العامة لتشغيل أو إيقاف تشغيل واصفة SpellCheck بإستخدام JavaScript:

- 
document.getElementById(Some_Id).spellCheck=true; //تشغيل مصحح الأخطاء الهجائية للعنصر المحدد.
-document.getElementById(Some_Id).spellCheck=false; //إيقاف تشغيل مصحح الأخطاء الهجائية للعنصر المحدد.
-
-

توافق الواصفة SpellCheck مع الكائنات الأخرى في JavaScript

-

بما أن الواصفة SpellCheck في JavaScript هي من النوع العام,فهي متوافقة مع كل الكائنات الأخرى في JavaScript.

-

روابط ذات صلة بالموضوع:

- تخصيص واصفة SpellCheck في معايير منظمة W3C.
-

 

diff --git "a/files/ar/\331\210\330\247\330\265\331\201\330\251_\330\247\331\204\330\271\331\206\331\210\330\247\331\206_\331\201\331\212_html/index.html" "b/files/ar/\331\210\330\247\330\265\331\201\330\251_\330\247\331\204\330\271\331\206\331\210\330\247\331\206_\331\201\331\212_html/index.html" deleted file mode 100644 index 5e2d92d2a0..0000000000 --- "a/files/ar/\331\210\330\247\330\265\331\201\330\251_\330\247\331\204\330\271\331\206\331\210\330\247\331\206_\331\201\331\212_html/index.html" +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: واصفة العنوان في HTML -slug: واصفة_العنوان_في_HTML ---- -
-

مقدمة.

-

تستخدم واصفة العنوان في إظهار معلومات إضافية حول عنصر ما.

-

الإستعمال.

-

يمكن إستخدام واصفة العنوان في إضافة توضيحات حول عنصر ما.

-

التوافق مع العناصر.

-

إن واصفة العنوان متوافقة مع كافة العناصر في HTML.

-

التأثير الظاهري للواصفة على الصفحة.

-

معظم المتصفحات سوف تعرض هذه الأداة كمربع تلميحات يظهر عندما يتم تحريك مؤشر الفأرة فوق العنصر.

-

الشكل العام لصيغة الواصفة.

-
- 
<element title="معلومات يتم إظهارها...">
-
-
-

أمثلة:

-

في المثال التالي,عندما يقوم المستخدم بتحريك مؤشر الفأرة فوق الرابط,سيظهر له تلميح.

-

هذه هي الشيفرة:

-
- 
<a href="http://developer.mozzila.org" title="زوروا موقع شبكة مطوري موزيلا">Mozzila Developer Network</a>
-
-
-

الآن حرك مؤشر الفأرة فوق الرابط أدناه و شاهد ظهور مربع تلميح يحتوي الكتابة"زوروا موقع شبكة مطوري موزيلا.":

- Mozzila Developer Network -

التوافق مع المتصفحات.

-
- - - - - - - - - - - - - - - - - - -
- دعم المتصفحات لواصفة title
Internet ExplorerGoogle ChromeMozzila FirefoxOperaSafari
مدعومةمدعومةمدعومةمدعومةمدعومة
-

إستعمال الواصفة في JavaScript.

-

يمكن إستخدام هذه الواصفة في JavaScript.

-

الصيغة العامة لإستخدام واصفة العنوان في JavaScript:

-
-
document.getElementById(Some_Id).title="Your Text Goes Here..."; //تعيين نص ما ليتم عرضه.
-document.getElementById(Some_Id).title=null; //عدم عرض أي نص.
-
-
-

توافق واصفة العنوان مع الكائنات الأخرى في JavaScript.

-

بما أن واصفة العنوان من النوع العام,فهي متوافقة مع جميع كائنات JavaScript.

-

روابط ذات صلة بالموضوع:

-تخصيص واصفة العنوان في معايير منظمة W3C. -- cgit v1.2.3-54-g00ecf