From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ar/web/accessibility/index.html | 55 + files/ar/web/api/attr/index.html | 157 + files/ar/web/api/canvas_api/index.html | 169 ++ files/ar/web/api/document/designmode/index.html | 110 + files/ar/web/api/document/index.html | 461 +++ files/ar/web/api/domtokenlist/index.html | 117 + files/ar/web/api/domtokenlist/length/index.html | 62 + files/ar/web/api/element/classname/index.html | 137 + files/ar/web/api/element/closest/index.html | 148 + files/ar/web/api/element/index.html | 656 +++++ .../web/api/element/insertadjacenthtml/index.html | 102 + files/ar/web/api/event/index.html | 136 + files/ar/web/api/geolocation/index.html | 118 + .../api/geolocation/using_geolocation/index.html | 294 ++ .../using_the_geolocation_api/index.html | 166 ++ files/ar/web/api/history_api/index.html | 262 ++ .../\331\205\330\253\330\247\331\204/index.html" | 416 +++ .../web/api/htmlelement/contenteditable/index.html | 75 + files/ar/web/api/htmlelement/index.html | 400 +++ files/ar/web/api/index.html | 15 + files/ar/web/api/navigator.battery/index.html | 31 + files/ar/web/api/navigator/index.html | 155 + files/ar/web/api/node/index.html | 381 +++ files/ar/web/api/node/removechild/index.html | 144 + files/ar/web/api/window/alert/index.html | 77 + .../api/window/domcontentloaded_event/index.html | 72 + files/ar/web/api/window/index.html | 708 +++++ .../web/api/xsltprocessor/basic_example/index.html | 57 + files/ar/web/api/xsltprocessor/index.html | 138 + files/ar/web/css/align-content/index.html | 294 ++ files/ar/web/css/attribute_selectors/index.html | 199 ++ .../ar/web/css/css_flexible_box_layout/index.html | 119 + .../index.html" | 233 ++ files/ar/web/css/css_grid_layout/index.html | 253 ++ .../relationship_of_grid_layout_arabic/index.html | 623 ++++ files/ar/web/css/css_writing_modes/index.html | 106 + files/ar/web/css/index.html | 91 + files/ar/web/css/order/index.html | 108 + files/ar/web/css/pointer-events/index.html | 148 + files/ar/web/css/reference/index.html | 179 ++ .../index.html" | 136 + .../index.html" | 64 + .../index.html" | 19 + files/ar/web/events/index.html | 2990 ++++++++++++++++++++ files/ar/web/guide/css/getting_started/index.html | 43 + .../css/getting_started/readable_css/index.html | 177 ++ .../index.html" | 383 +++ files/ar/web/guide/css/index.html | 23 + .../guide/html/html5/html5_element_list/index.html | 598 ++++ files/ar/web/guide/html/html5/index.html | 178 ++ files/ar/web/guide/index.html | 27 + .../index.html" | 47 + files/ar/web/html/element/input/index.html | 1380 +++++++++ files/ar/web/html/element/input/radio/index.html | 356 +++ files/ar/web/html/index.html | 91 + .../index.html" | 88 + files/ar/web/http/basics_of_http/index.html | 51 + .../mime_types/common_types/index.html | 360 +++ .../web/http/basics_of_http/mime_types/index.html | 382 +++ .../connection_management_in_http_1.x/index.html | 86 + files/ar/web/http/headers/index.html | 433 +++ files/ar/web/http/index.html | 79 + files/ar/web/http/overview/index.html | 167 ++ files/ar/web/index.html | 93 + .../ar/web/javascript/about_javascript/index.html | 61 + .../control_flow_and_error_handling/index.html | 467 +++ .../javascript/guide/grammar_and_types/index.html | 680 +++++ files/ar/web/javascript/guide/index.html | 116 + .../web/javascript/guide/introduction/index.html | 159 ++ .../guide/loops_and_iteration/index.html | 352 +++ .../guide/regular_expressions/index.html | 813 ++++++ .../guide/working_with_objects/index.html | 516 ++++ .../index.html" | 698 +++++ files/ar/web/javascript/index.html | 121 + .../index.html | 423 +++ .../reference/classes/constructor/index.html | 132 + .../ar/web/javascript/reference/classes/index.html | 380 +++ .../ar/web/javascript/reference/errors/index.html | 31 + .../reference/errors/unexpected_type/index.html | 68 + .../reference/global_objects/array/index.html | 481 ++++ .../global_objects/array/isarray/index.html | 146 + .../reference/global_objects/array/join/index.html | 143 + .../reference/global_objects/array/pop/index.html | 134 + .../global_objects/array/reverse/index.html | 124 + .../global_objects/array/slice/index.html | 151 + .../global_objects/date/getdate/index.html | 85 + .../reference/global_objects/date/index.html | 261 ++ .../reference/global_objects/date/now/index.html | 80 + .../reference/global_objects/date/parse/index.html | 182 ++ .../global_objects/date/setdate/index.html | 95 + .../reference/global_objects/date/utc/index.html | 133 + .../global_objects/function/call/index.html | 219 ++ .../reference/global_objects/function/index.html | 183 ++ .../javascript/reference/global_objects/index.html | 126 + .../reference/global_objects/json/index.html | 215 ++ .../reference/global_objects/map/index.html | 358 +++ .../reference/global_objects/math/index.html | 190 ++ .../global_objects/object/constructor/index.html | 152 + .../reference/global_objects/object/index.html | 182 ++ .../reference/global_objects/string/index.html | 314 ++ .../global_objects/string/startswith/index.html | 101 + .../index.html" | 12 + files/ar/web/javascript/reference/index.html | 50 + .../operators/destructuring_assignment/index.html | 428 +++ .../web/javascript/reference/operators/index.html | 302 ++ .../javascript/reference/operators/new/index.html | 178 ++ .../operators/object_initializer/index.html | 403 +++ .../operators/operator_precedence/index.html | 420 +++ .../javascript/reference/operators/this/index.html | 381 +++ .../web/javascript/reference/statements/index.html | 141 + .../reference/statements/return/index.html | 145 + .../get/index.html" | 165 ++ .../index.html" | 645 +++++ files/ar/web/mathml/index.html | 123 + files/ar/web/svg/attribute/index.html | 387 +++ files/ar/web/svg/index.html | 94 + files/ar/web/tutorials/index.html | 217 ++ .../index.html" | 16 + .../\331\205\330\261\330\254\330\271/index.html" | 42 + 119 files changed, 29644 insertions(+) create mode 100644 files/ar/web/accessibility/index.html create mode 100644 files/ar/web/api/attr/index.html create mode 100644 files/ar/web/api/canvas_api/index.html create mode 100644 files/ar/web/api/document/designmode/index.html create mode 100644 files/ar/web/api/document/index.html create mode 100644 files/ar/web/api/domtokenlist/index.html create mode 100644 files/ar/web/api/domtokenlist/length/index.html create mode 100644 files/ar/web/api/element/classname/index.html create mode 100644 files/ar/web/api/element/closest/index.html create mode 100644 files/ar/web/api/element/index.html create mode 100644 files/ar/web/api/element/insertadjacenthtml/index.html create mode 100644 files/ar/web/api/event/index.html create mode 100644 files/ar/web/api/geolocation/index.html create mode 100644 files/ar/web/api/geolocation/using_geolocation/index.html create mode 100644 files/ar/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html create mode 100644 files/ar/web/api/history_api/index.html create mode 100644 "files/ar/web/api/history_api/\331\205\330\253\330\247\331\204/index.html" create mode 100644 files/ar/web/api/htmlelement/contenteditable/index.html create mode 100644 files/ar/web/api/htmlelement/index.html create mode 100644 files/ar/web/api/index.html create mode 100644 files/ar/web/api/navigator.battery/index.html create mode 100644 files/ar/web/api/navigator/index.html create mode 100644 files/ar/web/api/node/index.html create mode 100644 files/ar/web/api/node/removechild/index.html create mode 100644 files/ar/web/api/window/alert/index.html create mode 100644 files/ar/web/api/window/domcontentloaded_event/index.html create mode 100644 files/ar/web/api/window/index.html create mode 100644 files/ar/web/api/xsltprocessor/basic_example/index.html create mode 100644 files/ar/web/api/xsltprocessor/index.html create mode 100644 files/ar/web/css/align-content/index.html create mode 100644 files/ar/web/css/attribute_selectors/index.html create mode 100644 files/ar/web/css/css_flexible_box_layout/index.html create 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/index.html create mode 100644 files/ar/web/css/css_grid_layout/relationship_of_grid_layout_arabic/index.html create mode 100644 files/ar/web/css/css_writing_modes/index.html create mode 100644 files/ar/web/css/index.html create mode 100644 files/ar/web/css/order/index.html create mode 100644 files/ar/web/css/pointer-events/index.html create mode 100644 files/ar/web/css/reference/index.html create mode 100644 "files/ar/web/css/\330\247\331\204\330\252\330\255\331\210\331\204/index.html" create 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" create 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" create mode 100644 files/ar/web/events/index.html create mode 100644 files/ar/web/guide/css/getting_started/index.html create mode 100644 files/ar/web/guide/css/getting_started/readable_css/index.html create 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" create mode 100644 files/ar/web/guide/css/index.html create mode 100644 files/ar/web/guide/html/html5/html5_element_list/index.html create mode 100644 files/ar/web/guide/html/html5/index.html create mode 100644 files/ar/web/guide/index.html create 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/input/index.html create mode 100644 files/ar/web/html/element/input/radio/index.html create mode 100644 files/ar/web/html/index.html create 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/http/basics_of_http/index.html create mode 100644 files/ar/web/http/basics_of_http/mime_types/common_types/index.html create mode 100644 files/ar/web/http/basics_of_http/mime_types/index.html create mode 100644 files/ar/web/http/connection_management_in_http_1.x/index.html create mode 100644 files/ar/web/http/headers/index.html create mode 100644 files/ar/web/http/index.html create mode 100644 files/ar/web/http/overview/index.html create mode 100644 files/ar/web/index.html create mode 100644 files/ar/web/javascript/about_javascript/index.html create mode 100644 files/ar/web/javascript/guide/control_flow_and_error_handling/index.html create mode 100644 files/ar/web/javascript/guide/grammar_and_types/index.html create mode 100644 files/ar/web/javascript/guide/index.html create mode 100644 files/ar/web/javascript/guide/introduction/index.html create mode 100644 files/ar/web/javascript/guide/loops_and_iteration/index.html create mode 100644 files/ar/web/javascript/guide/regular_expressions/index.html create mode 100644 files/ar/web/javascript/guide/working_with_objects/index.html create mode 100644 "files/ar/web/javascript/guide/\330\247\331\204\330\257\331\210\330\247\331\204/index.html" create mode 100644 files/ar/web/javascript/index.html create mode 100644 files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html create mode 100644 files/ar/web/javascript/reference/classes/constructor/index.html create mode 100644 files/ar/web/javascript/reference/classes/index.html create mode 100644 files/ar/web/javascript/reference/errors/index.html create mode 100644 files/ar/web/javascript/reference/errors/unexpected_type/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/array/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/date/getdate/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/date/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/date/parse/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/date/setdate/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/function/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/json/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/map/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/math/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/object/constructor/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/object/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/string/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/string/startswith/index.html create 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" create mode 100644 files/ar/web/javascript/reference/index.html create mode 100644 files/ar/web/javascript/reference/operators/destructuring_assignment/index.html create mode 100644 files/ar/web/javascript/reference/operators/index.html create mode 100644 files/ar/web/javascript/reference/operators/new/index.html create mode 100644 files/ar/web/javascript/reference/operators/object_initializer/index.html create mode 100644 files/ar/web/javascript/reference/operators/operator_precedence/index.html create mode 100644 files/ar/web/javascript/reference/operators/this/index.html create mode 100644 files/ar/web/javascript/reference/statements/index.html create mode 100644 files/ar/web/javascript/reference/statements/return/index.html create mode 100644 "files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/get/index.html" create 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/mathml/index.html create mode 100644 files/ar/web/svg/attribute/index.html create mode 100644 files/ar/web/svg/index.html create mode 100644 files/ar/web/tutorials/index.html create mode 100644 "files/ar/web/\330\255\331\205\330\247\331\212\330\251/index.html" create mode 100644 "files/ar/web/\331\205\330\261\330\254\330\271/index.html" (limited to 'files/ar/web') diff --git a/files/ar/web/accessibility/index.html b/files/ar/web/accessibility/index.html new file mode 100644 index 0000000000..de5fd7a935 --- /dev/null +++ b/files/ar/web/accessibility/index.html @@ -0,0 +1,55 @@ +--- +title: الإتاحة +slug: Web/Accessibility +tags: + - الإتاحة + - صفحة هبوط +translation_of: Web/Accessibility +--- +

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

+ +

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

+ +

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

+ +
+
+

دروس رئيسيّة

+ +

يحتوي قسم تعلم الإتاحة على دورات دائمة التحديث وعصريّة تُغطي جميع نقاط الإتاحة الأساسيّة:

+ +
+
ما هي الإتاحة؟
+
تُمثِل هذه المقالة بداية للوحدة، بحيث تعطيك لمحة عن ماهيّة الإتاحة، فهي تتضمن معلومات عن مجموعة الأشخاص الذين يشملهم هذا المصطلح ولماذا، الأدوات المُختلفة التي تُستخدَم للتعامل مع الويب، وكيف يمكننا جعل الإتاحة جزءً لا يتجزأ من عمليّة تطوير الويب.
+
أساسيات مهمة في لغة ترميز النص الفائق للعمل مع الإتاحة
+
يمكن جعل جزء كبير من محتوى الويب مُتاحاً؛ عبر التأكُّد من استخدام عناصر لغة ترميز النص الفائق الصحيحة في أماكنها الصحيحة وبالوقت المناسب. هذه المقالة تتعمق بالتفصيل في كيفيّة استخدام هذه اللغة لضمان الاستفادة بالحد الأقصى من الإتاحة.
+
أفضل الطرق لاستخدام صفحات الأنماط الانسيابية والجافاسكربت لإتاحة أفضل
+
يُمكِّن أيضاً الاستخدام الصحيح لهاتين اللغتين توفير تجربة ويب أفضل، أو يمكن أن يجعلها أسوء إذا أُسيءَ استخدام هاتِه اللغات. تُعَنوِن هذه المقالة بعض استخدامات صفحات الأنماط الانسيابية والجافاسكربت الفضلى التي يجب اخذها بعين الاعتبار لضمان جعل المحتوى المُعقَد مُتاحاً قدر الإمكان.
+
أساسيات تقنيّة WAI-ARIA
+
إكمالاً للمقالة السابقة، من الصعب في بعض الأحيان إنشاء عنصر تحكم رسوميّة تستخدم عناصر من لغة ترميز النص الفائق غير دلاليّة (أي وظيفتها غير واضحة من اسمها، مما يجعل تذكر العنصر وفهمه أصعب - unsemantic) ومحتوى جافاسكربت مُحدَث تلقائياً. يمكن لهذه التقنيّة المساعدة في حل هذه المشكلات عبر إضافة المزيد من العناصر الدلاليّة (semantic) التي يُمكِن للمتصفحات التعرُّف عليها واستخدامها لجعل المستخدمين يفهمون الأمور بشكل أوضح. سنشرح في هذه المقالة كيفيّة استخدام هذه التقنيّة لتحسين التجربة الإتاحيّة.
+
الوسائط المُتاحة
+
هناك فئة أخرى من المحتوى تُحدِث مشاكل إتاحيّة وهي الوسائط المتعددة (multimedia) - محتوى الفيديو، الصوت، والصورة يجب أن يُعطى نصاً بديلاً يشرحه؛ كي تتمكن التقنيات المعاونة (المساعدة - assistive) ومستخدميها من فهم المحتوى. تشرح هذه المقالة كيفيّة القيام بذلك.
+
الإتاحة الخلويّة (Mobile Accessibility)
+
نظراً لشيوع الوصول إلى محتوى الويب عبر الهواتف، ولامتلاك منصات الهواتف الشهيرة، مثل iOS والأندرويد، على أدوات لهذا الغرض، أصبح من المهم الاهتمام بإتاحة محتواك على هذه المنصات. تتعمق هذه المقالة في الاعتبارات التي يجب أن تؤخذ عند إتاحة محتوى الويب للهواتف.
+
+
+ +
+

توثيقات أخرى

+ +
+
دروس إرشاديّة لفهم إتاحة محتوى الويب
+
توفر مجموعة المقالات هذه شرح سريع لمساعدتك على فهم الخطوات التي يجب أن تؤخذ لتطبيق التوصيات المشروحة في أدلة (guidelines) W3C لإتاحة محتوى الويب 2.0 (إختصاراً WCAG).
+
عناصر الجافا سكربت القابلة للتنقل بلوحة المفاتيح
+
حتى الآن، يفتقر مطورو الويب الذين يقومون بصناعة عناصر رسوميّة (widgets) باستخدام العنصر <div> و <span> إلى التقنيات المناسبة. الوصوليّة بلوحة المفاتيح (Keyboard accessibility) هي من أقل متطلبات الإتاحة والتي يجب على المطورين الاهتمام بها.
+
تطبيقات الأنترنت سهلة الوصول (ARIA)
+
مجموعة من المقالات تشرح كيفيّة استخدام تقنيّة ARIA لجعل مستندات لغة ترميز النص الفائق سهلة الوصول بشكل أكبر.
+
تطوير التقنيات المعاونة (AT)
+
مجموعة من المقالات مخصصة لمطورين التقنيات المعاونة.
+
قائمة تقنيات الإتاحة للجوال
+
تهدف هذه المقالة إلى توفير قائمة مُختصرة لمتطلبات الإتاحة لمطورين تطبيقات الهواتف.
+
+ +

عرض المزيد...

+
+
diff --git a/files/ar/web/api/attr/index.html b/files/ar/web/api/attr/index.html new file mode 100644 index 0000000000..0b01877112 --- /dev/null +++ b/files/ar/web/api/attr/index.html @@ -0,0 +1,157 @@ +--- +title: Attr +slug: Web/API/Attr +translation_of: Web/API/Attr +--- +

{{APIRef("DOM")}}

+ +

The Attr interface represents one of a DOM element's attributes as an object. In most DOM methods, you will directly retrieve the attribute as a string (e.g., {{domxref("Element.getAttribute()")}}), but certain functions (e.g., {{domxref("Element.getAttributeNode()")}}) or means of iterating return Attr types.

+ +

{{InheritanceDiagram}}

+ +
Warning: Starting in Gecko 7.0 {{geckoRelease("7.0")}}, a number of deprecated properties and methods output warning messages to the console. You should revise your code accordingly. See Deprecated properties and methods for a complete list.
+ +

Properties

+ +
+
{{domxref("Attr.name", "name")}} {{readOnlyInline}}
+
The attribute's name.
+
{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}
+
A {{domxref("DOMString")}} representing the namespace URI of the attribute, or null if there is no namespace.
+
{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}
+
A {{domxref("DOMString")}} representing the local part of the qualified name of the attribute.
+
{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}
+
A {{domxref("DOMString")}} representing the namespace prefix of the attribute, or null if no prefix is specified.
+
{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}
+
+

The element holding the attribute.

+ +
+

Note: DOM Level 4 removed this property. The assumption was that since you get an Attr object from an {{domxref("Element")}}, you should already know the associated element.
+ As that doesn't hold true in cases like Attr objects being returned by {{domxref("Document.evaluate")}}, the DOM Living Standard reintroduced the property.

+ +

Gecko outputs a deprecation note starting from Gecko 7.0 {{geckoRelease("7.0")}}. This note was removed again in Gecko 49.0 {{geckoRelease("49.0")}}.

+
+
+
{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}
+
This property always returns true. Originally, it returned true if the attribute was explicitly specified in the source code or by a script, and false if its value came from the default one defined in the document's DTD.
+
{{domxref("Attr.value", "value")}}
+
The attribute's value.
+
+ +
+

Note: DOM Level 3 defined namespaceURI, localName and prefix on the {{domxref("Node")}} interface. In DOM4 they were moved to Attr.

+ +

This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.

+
+ +

Deprecated properties and methods

+ +

The following properties have been deprecated. Where available, the appropriate replacement is noted.

+ +
+
attributes
+
This property now always returns NULL.
+
childNodes {{obsolete_inline(14)}}
+
This property now always returns an empty {{domxref("NodeList")}}.
+
firstChild {{obsolete_inline(14)}}
+
This property now always returns NULL.
+
isId {{readOnlyInline}}
+
Indicates whether the attribute is an "ID attribute". An "ID attribute" being an attribute which value is expected to be unique across a DOM Document. In HTML DOM, "id" is the only ID attribute, but XML documents could define others. Whether or not an attribute is unique is often determined by a {{Glossary("DTD")}} or other schema description.
+
lastChild {{obsolete_inline(14)}}
+
This property now always returns NULL.
+
nextSibling
+
This property now always returns NULL.
+
nodeName
+
Use {{domxref("Attr.name")}} instead.
+
nodeType
+
This property now always returns 2 (ATTRIBUTE_NODE).
+
nodeValue
+
Use {{domxref("Attr.value")}} instead.
+
ownerDocument
+
You shouldn't have been using this in the first place, so you probably don't care that this is going away.
+
parentNode
+
This property now always returns NULL.
+
previousSibling
+
This property now always returns NULL.
+
schemaTypeInfo {{obsolete_inline}} {{readOnlyInline}}
+
The type information associated with this attribute. While the type information contained in this attribute is guaranteed to be correct after loading the document or invoking {{domxref("Document.normalizeDocument")}}, this property may not be reliable if the node was moved.
+
specified
+
This property now always returns true.
+
textContent
+
Use {{domxref("Attr.value")}} instead.
+
+ +

The following methods have been deprecated:

+ +
+
appendChild() {{obsolete_inline(14)}}
+
Modify the value of {{domxref("Attr.value")}} instead.
+
cloneNode()
+
You shouldn't have been using this in the first place, so you probably don't care that this is going away.
+
createAttribute()
+
Use {{domxref("Element.setAttribute()")}} instead.
+
createAttributeNS()
+
Use {{domxref("Element.setAttributeNS()")}} instead.
+
getAttributeNode()
+
Use {{domxref("Element.getAttribute()")}} instead.
+
getAttributeNodeNS()
+
Use {{domxref("Element.getAttributeNS()")}} instead.
+
hasAttributes() {{obsolete_inline("21.0")}}
+
This method now always returns false.
+
hasChildNodes()
+
This method now always returns false.
+
insertBefore()
+
Modify the value of {{domxref("Attr.value")}} instead.
+
isSupported()
+
You shouldn't have been using this in the first place, so you probably don't care that this is going away.
+
isEqualNode()
+
You shouldn't have been using this in the first place, so you probably don't care that this is going away.
+
normalize()
+
You shouldn't have been using this in the first place, so you probably don't care that this is going away.
+
removeAttributeNode()
+
Use {{domxref("Element.removeAttribute()")}} instead.
+
removeChild() {{obsolete_inline(14)}}
+
Modify the value of {{domxref("Attr.value")}} instead.
+
replaceChild() {{obsolete_inline(14)}}
+
Modify the value of {{domxref("Attr.value")}} instead.
+
setAttributeNode()
+
Use {{domxref("Element.setAttribute()")}} instead.
+
setAttributeNodeNS()
+
Use {{domxref("Element.setAttributeNS()")}} instead.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#interface-attr", "Attr")}}{{Spec2("DOM WHATWG")}}Added ownerElement property back
{{SpecName("DOM4", "#interface-attr", "Attr")}}{{Spec2("DOM4")}}Moved namespaceURI, prefix and localName from {{domxref("Node")}} to this API and removed ownerElement, schemaTypeInfo and isId.
{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}{{Spec2("DOM3 Core")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Attr")}}

diff --git a/files/ar/web/api/canvas_api/index.html b/files/ar/web/api/canvas_api/index.html new file mode 100644 index 0000000000..e28c5e7a96 --- /dev/null +++ b/files/ar/web/api/canvas_api/index.html @@ -0,0 +1,169 @@ +--- +title: الواجهة البرمجية لرقعة الرسم +slug: Web/API/Canvas_API +tags: + - API + - رقعة رسم + - مرجع + - نظرة عامة +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

في HTML5، أُضيف عنصر HTML ‏{{HTMLElement("canvas")}} والذي يمكن استخدامه لرسم الرسوميات ببرمجتها عبر جافاسكربت. فمثلا، يمكن استخدامها لرسم الرسوم البيانية، أو تراكبات الصور، أو إنشاء الحركات أو حتى معالجة الفديوهات آنيا وتصييرها.

+ +

حصلت تطبيقات موزيلا على دعم <canvas> بدءًا من إصدارة جيكو رقم ١٫٨ (أي فَيَرفُكس ١٫٥). طُوّر هذا العنصر على يد شركة آبل للوحة أوإس إكس وسفاري. يدعم إنترنت إكسبلورر <canvas> بدءًا من الإصدارة التاسعة فما فوق، بينما الإصدارات الأقدم منه تحتاج سكربتا ليعمل عنصر رقعة الرسم بكفاءة، هذا السكربت هو من مشروع جوجل باسم Explorer Canvas. يدعم جوجل كروم وأوبرا ٩ عتصر <canvas> أيضا.

+ +

يُستخدم عنصر <canvas> في تقنية WebGL أيضا لرسم الرسومات ثلاثية الأبعاد على صفحات الوب بتسريع عتادي.

+ +

مثال

+ +

هذه عيّنة مقتطفة من كود يستخدم طريقة {{domxref("CanvasRenderingContext2D.fillRect()")}}.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

جافاسكربت

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+ +

حرّر الكود أدناه لترى التغييرات تحدث آنيا في رقعة الرسم:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

المرجع

+ +
+ +
+ +

الواجهات المتعلقة بِ‍ WebGLRenderingContext مذكورة في مرجع WebGL.

+ +

واجهة {{domxref("CanvasCaptureMediaStream")}} لها علاقة أيضا.

+ +

الأدلة والدروس

+ +
+
درس رقعة الرسم
+
درس شامل يغطي كلا من الاستخدام البسيط لرقعة الرسم <canvas> وأيضا مزاياها المتقدمة.
+
مقتطفات من كود: رقعة الرسم
+
بعض المقتطفات المخصصة لمطوري الامتدادات والتي تستخدم  <canvas>.
+
Demo: A basic ray-caster
+
عرض لحركة تعقّب الأشعة باستخدام رقعة الرسم.
+
رسم كائنات DOM في رقعة رسم
+
طريقة رسم محتوى DOM (مثل عناصر HTML) في رقعة رسم.
+
التعديل على الفديو باستخدام رقعة الرسم
+
يمكنك بدمج {{HTMLElement("video")}} و{{HTMLElement("canvas")}} التلاعب والتعديل على الفديو آنيا.
+
+ +

الموارد

+ +

عامة

+ + + +

المكتبات

+ + + +

المواصفات

+ + + + + + + + + + + + + + + + +
المواصفةالحالةتعليق
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
+ +

طالع أيضا

+ + diff --git a/files/ar/web/api/document/designmode/index.html b/files/ar/web/api/document/designmode/index.html new file mode 100644 index 0000000000..2300a50dd1 --- /dev/null +++ b/files/ar/web/api/document/designmode/index.html @@ -0,0 +1,110 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +translation_of: Web/API/Document/designMode +--- +
{{ ApiRef() }}
+ +
 
+ +

نبذه مختصره

+ +

document.designMode

+ +

يتحكم بطبيعة عرض كامل المحتوى كـ قابل للتعديل. القيم التي يقبلها هي "off" معطل​ و "on" مشغل  .بحسب تخصيصه. القيمة الافتراضية لهذه الخاصية معطله "off". فايرفوكس يتبع هذا النمط. الاصدارات الحديثة من كروم و إنترنت اكسبلورر القيمة الافتراضية فيها "inherit". بدأً من الاصدار 43 لمتصفح كروم، القيمة الافتراضية هي "off" و "inherit" لم تعد مدعومه اكثر. في إنترنت اكسبلورر 6 حتى 10، القيمة هي مستثمرة

+ +

الصيغة

+ +
var mode = document.designMode;
+document.designMode = "on";
+document.designMode = "off";
+ +

مثال

+ +

جعل عنصر/عناصر ifram  قابله للتعديل:

+ +
iframeNode.contentDocument.designMode = "on";
+
+ +

التخصيص

+ + + + + + + + + + + + + + +
الخاصيةالحالةتعليق
{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

دعم المتصفحات

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
الدعمكرومايدجفايرفوكسإنترنت اكسبلورراوبراسفاري
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

شاهد ايضاً

+ + diff --git a/files/ar/web/api/document/index.html b/files/ar/web/api/document/index.html new file mode 100644 index 0000000000..38f38282d9 --- /dev/null +++ b/files/ar/web/api/document/index.html @@ -0,0 +1,461 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Document + - Interface + - NeedsTranslation + - Reference + - TopicStub + - whereas +translation_of: Web/API/Document +--- +
{{APIRef}}
+ +
 
+ +

The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree. The DOM tree includes elements such as {{HTMLElement("body")}} and {{HTMLElement("table")}}, among many others. It provides functionality globally to the document, like how to obtain the page's URL and create new elements in the document.

+ +

{{inheritanceDiagram}}

+ +

The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. HTML, XML, SVG, …), a larger API is available: HTML documents, served with the text/html content type, also implement the {{domxref("HTMLDocument")}} interface, whereas XML and SVG documents implement the {{domxref("XMLDocument")}} interface.

+ +

Constructor

+ +
+
{{domxref("Document.Document","Document()")}}{{non-standard_inline}}
+
Creates a new Document object.
+
+ +

Properties

+ +

This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.

+ +
+
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+
Provides access to all elements in the document. This is a legacy, non-standard interface and should not be used.
+
{{domxref("Document.async")}} {{Deprecated_inline}}
+
Used with {{domxref("Document.load")}} to indicate an asynchronous request.
+
{{domxref("Document.characterSet")}} {{readonlyinline}}
+
Returns the character set being used by the document.
+
{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}
+
Alias of {{domxref("Document.characterSet")}}. Use this property instead.
+
{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}
+
Indicates whether the document is rendered in quirks or strict mode.
+
{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}
+
Returns the Content-Type from the MIME Header of the current document.
+
{{domxref("Document.doctype")}} {{readonlyinline}}
+
Returns the Document Type Definition (DTD) of the current document.
+
{{domxref("Document.documentElement")}} {{readonlyinline}}
+
Returns the {{domxref("Element")}} that is a direct child of the document. For HTML documents, this is normally the {{HTMLElement("html")}} element.
+
{{domxref("Document.documentURI")}} {{readonlyinline}}
+
Returns the document location as a string.
+
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
+
Should return a {{domxref("DOMConfiguration")}} object.
+
{{domxref("Document.fullscreen")}} {{obsolete_inline}}
+
true when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.
+
{{domxref("Document.hidden")}} {{readonlyinline}}
+
…
+
{{domxref("Document.implementation")}} {{readonlyinline}}
+
Returns the DOM implementation associated with the current document.
+
{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}
+
Alias of {{domxref("Document.characterSet")}}. Use this property instead.
+
{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}
+
Returns the name of the style sheet set that was last enabled. Has the value null until the style sheet is changed by setting the value of {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
+
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
+
Returns a {{jsxref("Boolean")}} that is true only if this document is synthetic, such as a standalone image, video, audio file, or the like.
+
{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
The element that's currently in full screen mode for this document.
+
{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true if calling {{domxref("Element.mozRequestFullscreen()")}} would succeed in the curent document.
+
{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}
+
Returns the element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another document.
+
{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}
+
Returns the preferred style sheet set as specified by the page author.
+
{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}
+
Returns a reference to the {{domxref("Element")}} that scrolls the document.
+
{{domxref("Document.selectedStyleSheetSet")}}
+
Returns which style sheet set is currently in use.
+
{{domxref("Document.styleSheets")}} {{readonlyinline}}
+
Returns a list of the style sheet objects on the current document.
+
{{domxref("Document.styleSheetSets")}} {{readonlyinline}}
+
Returns a list of the style sheet sets available on the document.
+
{{domxref("Document.timeline")}} {{readonlyinline}}
+
…
+
{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}
+
…
+
{{domxref("Document.visibilityState")}} {{readonlyinline}}
+
+

Returns a string denoting the visibility state of the document. Possible values are visible,  hidden,  prerender, and unloaded.

+
+
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+
Returns the encoding as determined by the XML declaration.
+
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+
Returns true if the XML declaration specifies the document to be standalone (e.g., An external part of the DTD affects the document's content), else false.
+
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+
Returns the version number as specified in the XML declaration or "1.0" if the declaration is absent.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +

{{page("/en-US/docs/Web/API/ParentNode","Properties")}}

+ +

Extension for HTML document

+ +

The Document interface for HTML documents inherits from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents.

+ +
+
{{domxref("Document.activeElement")}} {{readonlyinline}}
+
Returns the currently focused element.
+
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+
Returns or sets the color of active links in the document body.
+
{{domxref("Document.anchors")}}
+
Returns a list of all of the anchors in the document.
+
{{domxref("Document.applets")}} {{Deprecated_inline}}
+
Returns an ordered list of the applets within a document.
+
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
+
Gets/sets the background color of the current document.
+
{{domxref("Document.body")}}
+
Returns the {{HTMLElement("body")}} element of the current document.
+
{{domxref("Document.cookie")}}
+
Returns a semicolon-separated list of the cookies for that document or sets a single cookie.
+
{{domxref("Document.defaultView")}} {{readonlyinline}}
+
Returns a reference to the window object.
+
{{domxref("Document.designMode")}}
+
Gets/sets the ability to edit the whole document.
+
{{domxref("Document.dir")}} {{readonlyinline}}
+
Gets/sets directionality (rtl/ltr) of the document.
+
{{domxref("Document.domain")}}
+
Gets/sets the domain of the current document.
+
{{domxref("Document.embeds")}} {{readonlyinline}}
+
Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.
+
{{domxref("document.fgColor")}} {{Deprecated_inline}}
+
Gets/sets the foreground color, or text color, of the current document.
+
{{domxref("Document.forms")}} {{readonlyinline}}
+
Returns a list of the {{HTMLElement("form")}} elements within the current document.
+
{{domxref("Document.head")}} {{readonlyinline}}
+
Returns the {{HTMLElement("head")}} element of the current document.
+
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+
Gets/sets the height of the current document.
+
{{domxref("Document.images")}} {{readonlyinline}}
+
Returns a list of the images in the current document.
+
{{domxref("Document.lastModified")}} {{readonlyinline}}
+
Returns the date on which the document was last modified.
+
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of hyperlinks in the document.
+
{{domxref("Document.links")}} {{readonlyinline}}
+
Returns a list of all the hyperlinks in the document.
+
{{domxref("Document.location")}} {{readonlyinline}}
+
Returns the URI of the current document.
+
{{domxref("Document.plugins")}} {{readonlyinline}}
+
Returns a list of the available plugins.
+
{{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}
+
Returns loading status of the document.
+
{{domxref("Document.referrer")}} {{readonlyinline}}
+
Returns the URI of the page that linked to this page.
+
{{domxref("Document.scripts")}} {{readonlyinline}}
+
Returns all the {{HTMLElement("script")}} elements on the document.
+
{{domxref("Document.title")}}
+
Sets or gets the title of the current document.
+
{{domxref("Document.URL")}} {{readonlyInline}}
+
Returns the document location as a string.
+
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of visited hyperlinks.
+
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+
Returns the width of the current document.
+
+ +

Event handlers

+ +
+
{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("afterscriptexecute")}} event.
+
{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("beforescriptexecute")}} event.
+
{{domxref("Document.oncopy")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("copy")}} event.
+
{{domxref("Document.oncut")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("cut")}} event.
+
{{domxref("Document.onfullscreenchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.
+
{{domxref("Document.onfullscreenerror")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.
+
{{domxref("Document.onpaste")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("paste")}} event.
+
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
+
Represents the event handling code for the {{event("pointerlockchange")}} event.
+
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
+
Represetnts the event handling code for the {{event("pointerlockerror")}} event.
+
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
+
Represents the event handling code for the {{event("readystatechange")}} event.
+
{{domxref("Document.onselectionchange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
+
{{domxref("Document.onvisibilitychange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("visibilitychange")}} event is raised.
+
{{domxref("Document.onwheel")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("wheel")}} event.
+
+ +

The Document interface is extended with the {{domxref("GlobalEventHandlers")}} interface:

+ +

{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}

+ +

Methods

+ +

This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.

+ +
+
{{domxref("Document.adoptNode()")}}
+
Adopt node from an external document.
+
{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}
+
See {{domxref("Window.captureEvents")}}.
+
{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}
+
Gets the {{domxref("CaretPosition")}} at or near the specified coordinates.
+
{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}
+
Gets a {{Domxref("Range")}} object for the document fragment under the specified coordinates.
+
{{domxref("Document.createAttribute()")}}
+
Creates a new {{domxref("Attr")}} object and returns it.
+
{{domxref("Document.createAttributeNS()")}}
+
Creates a new attribute node in a given namespace and returns it.
+
{{domxref("Document.createCDATASection()")}}
+
Creates a new CDATA node and returns it.
+
{{domxref("Document.createComment()")}}
+
Creates a new comment node and returns it.
+
{{domxref("Document.createDocumentFragment()")}}
+
Creates a new document fragment.
+
{{domxref("Document.createElement()")}}
+
Creates a new element with the given tag name.
+
{{domxref("Document.createElementNS()")}}
+
Creates a new element with the given tag name and namespace URI.
+
{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}
+
Creates a new entity reference object and returns it.
+
{{domxref("Document.createEvent()")}}
+
Creates an event object.
+
{{domxref("Document.createNodeIterator()")}}
+
Creates a {{domxref("NodeIterator")}} object.
+
{{domxref("Document.createProcessingInstruction()")}}
+
Creates a new {{domxref("ProcessingInstruction")}} object.
+
{{domxref("Document.createRange()")}}
+
Creates a {{domxref("Range")}} object.
+
{{domxref("Document.createTextNode()")}}
+
Creates a text node.
+
{{domxref("Document.createTouch()")}} {{Deprecated_inline}}
+
Creates a {{domxref("Touch")}} object.
+
{{domxref("Document.createTouchList()")}}
+
Creates a {{domxref("TouchList")}} object.
+
{{domxref("Document.createTreeWalker()")}}
+
Creates a {{domxref("TreeWalker")}} object.
+
{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}
+
Returns the topmost element at the specified coordinates. 
+
{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}
+
Returns an array of all elements at the specified coordinates.
+
{{domxref("Document.enableStyleSheetsForSet()")}}
+
Enables the style sheets for the specified style sheet set.
+
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+
Release the pointer lock.
+
{{domxref("Document.getAnimations()")}} {{experimental_inline}}
+
Returns an array of all {{domxref("Animation")}} objects currently in effect, whose target elements are descendants of the document.
+
{{domxref("Document.getElementsByClassName()")}}
+
Returns a list of elements with the given class name.
+
{{domxref("Document.getElementsByTagName()")}}
+
Returns a list of elements with the given tag name.
+
{{domxref("Document.getElementsByTagNameNS()")}}
+
Returns a list of elements with the given tag name and namespace.
+
{{domxref("Document.importNode()")}}
+
Returns a clone of a node from an external document.
+
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+
Replaces entities, normalizes text nodes, etc.
+
{{domxref("Document.registerElement()")}} {{experimental_inline}}
+
Registers a web component.
+
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Releases the current mouse capture if it's on an element in this document.
+
{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
See {{domxref("Window.releaseEvents()")}}.
+
{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+
See {{domxref("Window.routeEvent()")}}.
+
{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Allows you to change the element being used as the background image for a specified element ID.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +
+
{{domxref("document.getElementById","document.getElementById(String id)")}}
+
Returns an object reference to the identified element.
+
{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns the first Element node within the document, in document order, that matches the specified selectors.
+
{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns a list of all the Element nodes within the document that match the specified selectors.
+
+ +

The Document interface is extended with the {{domxref("XPathEvaluator")}} interface:

+ +
+
{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}
+
Compiles an XPathExpression which can then be used for (repeated) evaluations.
+
{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}
+
Creates an {{domxref("XPathNSResolver")}} object.
+
{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
+
Evaluates an XPath expression.
+
+ +

Extension for HTML documents

+ +

The Document interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents:

+ +
+
{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.
+
{{domxref("document.close()")}}
+
Closes a document stream for writing.
+
{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}
+
On an editable document, executes a formating command.
+
{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}
+
Returns a list of elements with the given name.
+
{{domxref("document.getSelection()")}}
+
Returns a {{domxref("Selection")}} object related to text selected in the document.
+
{{domxref("document.hasFocus()")}}
+
Returns true if the focus is currently located anywhere inside the specified document.
+
{{domxref("document.open()")}}
+
Opens a document stream for writing.
+
{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}
+
Returns true if the formating command can be executed on the current range.
+
{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}
+
Returns true if the formating command is in an indeterminate state on the current range.
+
{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}
+
Returns true if the formating command has been executed on the current range.
+
{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}
+
Returns true if the formating command is supported on the current range.
+
{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}
+
Returns the current value of the current range for a formating command.
+
{{domxref("document.write","document.write(String text)")}}
+
Writes text in a document.
+
{{domxref("document.writeln","document.writeln(String text)")}}
+
Writes a line of text in a document.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}{{Spec2('Page Visibility API')}}Adds onvisibilitychange.
{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}{{Spec2('Selection API')}}Adds onselectstart and onselectionchange.
{{SpecName('DOM1','#i-Document','Document')}}{{Spec2('DOM1')}}Initial definition for the interface
{{SpecName('DOM2 Core','#i-Document','Document')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','#i-Document','Document')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}{{Spec2('HTML WHATWG')}}Turn the {{domxref("HTMLDocument")}} interface into a Document extension.
{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}{{Spec2('DOM3 XPath')}}Define the {{domxref("XPathEvaluator")}} interface which extend document.
{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}{{Spec2('Page Visibility API')}}Extend the Document interface with the visibilityState and hidden attributes
{{SpecName('HTML Editing','#dom-document-getselection','Document')}}{{Spec2('HTML Editing')}}Extend the Document interface
{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM View')}}Extend the Document interface
{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM')}}Extend the Document interface
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Extend the Document interface
+ +

Browser compatibility notes

+ +

Firefox notes

+ +

Mozilla defines a set of non-standard properties made only for XUL content:

+ +
+
{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Returns the {{HTMLElement("script")}} element that is currently executing.
+
{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
+
(Mozilla add-ons only!) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).
+
{{domxref("document.popupNode")}}
+
Returns the node upon which a popup was invoked.
+
{{domxref("document.tooltipNode")}}
+
Returns the node which is the target of the current tooltip.
+
+ +

Mozilla also define some non-standard methods:

+ +
+
{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
+
This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}
+
Use the {{domxref("Element.getBoundingClientRect()")}} method instead.
+
{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}
+
Loads a XUL overlay dynamically. This only works in XUL documents.
+
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
+
This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
+ +

Internet Explorer notes

+ +

Microsoft defines some non-standard properties:

+ +
+
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
+
Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See MSDN.
+
Internet Explorer does not support all methods from the Node interface in the Document interface:
+
+ +
+
{{domxref("document.contains")}}
+
As a work-around, document.body.contains() can be used.
+
+ +

 

diff --git a/files/ar/web/api/domtokenlist/index.html b/files/ar/web/api/domtokenlist/index.html new file mode 100644 index 0000000000..a4981c8649 --- /dev/null +++ b/files/ar/web/api/domtokenlist/index.html @@ -0,0 +1,117 @@ +--- +title: DOMTokenList +slug: Web/API/DOMTokenList +tags: + - API + - DOM + - DOMTokenList + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/DOMTokenList +--- +
{{APIRef("DOM")}}
+ +

The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}}, {{domxref("HTMLAreaElement.relList")}}, {{domxref("HTMLIframeElement.sandbox")}}, or {{domxref("HTMLOutputElement.htmlFor")}}. It is indexed beginning with 0 as with JavaScript {{jsxref("Array")}} objects. DOMTokenList is always case-sensitive.

+ +

Properties

+ +
+
{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}
+
Is an integer representing the number of objects stored in the object.
+
{{domxref("DOMTokenList.value")}}
+
The value of the list as a {{domxref("DOMString")}}.
+
+ +

Methods

+ +
+
{{domxref("DOMTokenList.item()")}}
+
Returns an item in the list by its index (returns undefined if the number is greater than or equal to the length of the list).
+
{{domxref("DOMTokenList.contains()")}}
+
Returns true if the list contains the given token, otherwise false.
+
{{domxref("DOMTokenList.add()")}}
+
Adds the given token to the list.
+
{{domxref("DOMTokenList.remove()")}}
+
Removes the specified token from the list.
+
{{domxref("DOMTokenList.replace()")}}
+
Replaces an existing token with a new token.
+
{{domxref("DOMTokenList.supports()")}}
+
Returns true if a given token is in the associated attribute's supported tokens.
+
{{domxref("DOMTokenList.toggle()")}}
+
Removes a given token from the list and returns false. If token doesn't exist it's added and the function returns true.
+
{{domxref("DOMTokenList.entries()")}}
+
Returns an {{jsxref("Iteration_protocols","iterator")}} allowing you to go through all key/value pairs contained in this object.
+
{{domxref("DOMTokenList.forEach()")}}
+
Executes a provided function once per DOMTokenList element.
+
{{domxref("DOMTokenList.keys()")}}
+
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all keys of the key/value pairs contained in this object.
+
{{domxref("DOMTokenList.values()")}}
+
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all values of the key/value pairs contained in this object.
+
+ +

Examples

+ +

In the following simple example we retrieve the list of classes set on a {{htmlelement("p")}} element as a DOMTokenList using {{domxref("Element.classList")}}, add a class using {{domxref("DOMTokenList.add()")}}, and then update the {{domxref("Node.textContent")}} of the <p> to equal the DOMTokenList.

+ +

First, the HTML:

+ +
<p class="a b c"></p>
+ +

Now the JavaScript:

+ +
var para = document.querySelector("p");
+var classes = para.classList;
+para.classList.add("d");
+para.textContent = 'paragraph classList is "' + classes + '"';
+ +

The output looks like this:

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Trimming of whitespace and removal of duplicates

+ +

Methods that modify the DOMTokenList (such as {{domxref("DOMTokenList.add()")}}) automatically trim any excess whitespace and remove duplicate values from the list. For example:

+ +
<span class="    d   d e f"></span>
+ +
var span = document.querySelector("span");
+var classes = span.classList;
+span.classList.add("x");
+span.textContent = 'span classList is "' + classes + '"';
+ +

The output looks like this:

+ +

{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}{{Spec2("DOM WHATWG")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.DOMTokenList")}}

+ +

See Also

+ + diff --git a/files/ar/web/api/domtokenlist/length/index.html b/files/ar/web/api/domtokenlist/length/index.html new file mode 100644 index 0000000000..c65f931027 --- /dev/null +++ b/files/ar/web/api/domtokenlist/length/index.html @@ -0,0 +1,62 @@ +--- +title: DOMTokenList.length +slug: Web/API/DOMTokenList/length +translation_of: Web/API/DOMTokenList/length +--- +

{{APIRef("DOM")}}

+ +

The length read-only property of the {{domxref("DOMTokenList")}} interface is an integer representing the number of objects stored in the object.

+ +

بنية الجملة

+ +
tokenList.length;
+ +

القيمة العائدة

+ +

تُعيد رقم صحيح.

+ +

أمثلة

+ +

في المثال التالي نقوم بإسترداد قيمة الـ classes الموضوعة داخل {{htmlelement("span")}} element as a DOMTokenList using {{domxref("Element.classList")}}, then write the length of the list to the <span>'s {{domxref("Node.textContent")}}.

+ +

أولاً، الـ HTML:

+ +
<span class="a b c"></span>
+ +

الآن الـ JavaScript:

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+var length = classes.length;
+
+span.textContent = 'classList length = ' + length;
+
+ +

نتيجة الكود ستكون بالشكل التالي:

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

الخصائص

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#dom-domtokenlist-length','length')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

دعم المتصفحات

+ +
+ + +

{{Compat("api.DOMTokenList.length")}}

+
diff --git a/files/ar/web/api/element/classname/index.html b/files/ar/web/api/element/classname/index.html new file mode 100644 index 0000000000..cd37ae178e --- /dev/null +++ b/files/ar/web/api/element/classname/index.html @@ -0,0 +1,137 @@ +--- +title: Element.className سمة العنصر +slug: Web/API/Element/className +tags: + - API + - DOM + - Gecko + - Property + - Reference + - خاصية + - مرجع +translation_of: Web/API/Element/className +--- +
{{APIRef("DOM")}}
+ +

الخلاصة

+ +

تقوم className بجلب أو ضبط  قيمة سمة class الخاصة بالعنصر.

+ +

بنية الجملة

+ +
var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+
+ + + +

مثال

+ +
let elm = document.getElementById('item');
+
+if(elm.className === 'active'){
+    elm.className = 'inactive';
+} else {
+    elm.className = 'active';
+}
+ +

ملاحظات

+ +

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

+ +

يمكن استخدام className  في حالة {{domxref("SVGAnimatedString")}} إذا كان العنصر عبارة عن {{domxref("SVGElement")}}، من الأفضل أن تجلب قيمة className أو تضبطها باستخدام {{domxref("Element.getAttribute")}} و{{domxref("Element.setAttribute")}} إذا كنت تتعامل مع عنصر من نوع SVG.

+ +
elm.setAttribute('class', elm.getAttribute('class'))
+ +

 

+ +

الخواص

+ + + + + + + + + + + + + + + + + + + + + + + + +
الخاصيةالحالةتعليق
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Initial definition
+ +

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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

اقرأ ايضًا

+ + diff --git a/files/ar/web/api/element/closest/index.html b/files/ar/web/api/element/closest/index.html new file mode 100644 index 0000000000..5ad476bb9d --- /dev/null +++ b/files/ar/web/api/element/closest/index.html @@ -0,0 +1,148 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - دوم + - مرجع + - واجهة برمجة تطبيقات +translation_of: Web/API/Element/closest +--- +
{{APIRef('DOM')}}
+ +
ال closest() method تجتاز {{domxref ("Element")}} والأصل(يتجهون نحو جذر المستند) حتى يعثروا على عقدة تتطابق مع الstring المحدد. سيعود نفسه أو أسلاف مطابقة. إذا لم يكن هناك مثل هذا العنصر ، فإنه يعيد null.
+ +

تركيب الجملة

+ +
var closestElement = targetElement.closest(selectors);
+
+ +

المعاملات

+ + + +

القيمة المرجعة

+ + + +

استثناءات

+ + + +

مثال

+ +

HTML

+ +
<article>
+  <div id="div-01">Here is div-01
+    <div id="div-02">Here is div-02
+      <div id="div-03">Here is div-03</div>
+    </div>
+  </div>
+</article>
+ +

JavaScript

+ +
var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// returns the element with the id=div-02
+
+var r2 = el.closest("div div");
+// returns the closest ancestor which is a div in div, here it is the div-03 itself
+
+var r3 = el.closest("article > div");
+// returns the closest ancestor which is a div and has a parent article, here it is the div-01
+
+var r4 = el.closest(":not(div)");
+// returns the closest ancestor which is not a div, here it is the outmost article
+ +

Polyfill

+ +

بالنسبة للمتصفحات التي لا تدعم ()Element.closest ، ولكنها تدعم ال()element.matches (أو ما يعادله سابقًا ، بمعنى IE9 +) ، توجد تعبئة متعددة:

+ +
if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (Element.prototype.matches.call(el, s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}
+ +

ومع ذلك ، إذا كنت تحتاج بالفعل إلى دعم IE 8 ، فإن polyfill التالي سيقوم بالمهمة ببطء شديد ، ولكن في النهاية. ومع ذلك ، ستدعم فقط محددات CSS 2.1 في IE 8 ، ويمكن أن تسبب تأخر كبير في إنتاج المواقع .

+ +
if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i >= 0 && matches.item(i) !== el) {};
+    } while ((i < 0) && (el = el.parentElement));
+    return el;
+  };
+}
+
+ +

مواصفات

+ + + + + + + + + + + + + + + + +
مواصفاتالحالةتعليق
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}تعريف ابتدائي.
+ +

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

+ +
+ + +

{{Compat("api.Element.closest")}}

+ +

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

+ + +
+ +

إقرأ أيضا

+ + diff --git a/files/ar/web/api/element/index.html b/files/ar/web/api/element/index.html new file mode 100644 index 0000000000..070f2c26a5 --- /dev/null +++ b/files/ar/web/api/element/index.html @@ -0,0 +1,656 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - DOM Reference + - Element + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web API +translation_of: Web/API/Element +--- +

{{ APIRef("DOM") }}

+ +

Element is the most general base class from which all objects in a {{domxref("Document")}} inherit. It only has methods and properties common to all kinds of element. More specific classes inherit from Element. For example, the {{domxref("HTMLElement")}} interface is the base interface for HTML elements, while the {{domxref("SVGElement")}} interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.

+ +

Languages outside the realm of the Web platform, like XUL through the XULElement interface, also implement Element.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

Inherits properties from its parent interface, {{domxref("Node")}}, and by extension that interface's parent, {{domxref("EventTarget")}}. It implements the properties of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, and {{domxref("Animatable")}}.

+ +
+
{{ domxref("Element.assignedSlot")}} {{experimental_inline}} {{readOnlyInline}}
+
Returns the {{domxref("HTMLSlotElement")}} interface associated with the element.
+
{{ domxref("Element.attributes") }} {{readOnlyInline}}
+
Returns a {{ domxref("NamedNodeMap") }} object containing the assigned attributes of the corresponding HTML element.
+
{{ domxref("Element.classList") }} {{readOnlyInline}}
+
Returns a {{ domxref("DOMTokenList") }} containing the list of class attributes.
+
{{ domxref("Element.className") }}
+
Is a {{domxref("DOMString")}} representing the class of the element.
+
{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner height of the element.
+
{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the left border of the element.
+
{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the top border of the element.
+
{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner width of the element.
+
{{domxref("Element.computedName")}} {{readOnlyInline}}
+
Returns a {{domxref("DOMString")}} containing the label exposed to accessibility.
+
{{domxref("Element.computedRole")}} {{readOnlyInline}}
+
Returns a {{domxref("DOMString")}} containing the ARIA role that has been applied to a particular element. 
+
{{ domxref("Element.id") }}
+
Is a {{domxref("DOMString")}} representing the id of the element.
+
{{ domxref("Element.innerHTML") }}
+
Is a {{domxref("DOMString")}} representing the markup of the element's content.
+
{{ domxref("Element.localName") }} {{readOnlyInline}}
+
A {{domxref("DOMString")}} representing the local part of the qualified name of the element.
+
{{domxref("Element.namespaceURI")}} {{readonlyInline}}
+
The namespace URI of the element, or null if it is no namespace. +
+

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}

+
+
+
{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }} {{readOnlyInline}}
+
Is a {{ domxref("Element") }}, the element immediately following the given one in the tree, or null if there's no sibling node.
+
{{ domxref("Element.outerHTML") }} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.
+
{{ domxref("Element.prefix") }} {{readOnlyInline}}
+
A {{domxref("DOMString")}} representing the namespace prefix of the element, or null if no prefix is specified.
+
{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }} {{readOnlyInline}}
+
Is a {{ domxref("Element") }}, the element immediately preceding the given one in the tree, or null if there is no sibling element.
+
{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view height of an element.
+
{{ domxref("Element.scrollLeft") }} {{experimental_inline}}
+
Is a {{jsxref("Number")}} representing the left scroll offset of the element.
+
{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.
+
{{ domxref("Element.scrollTop") }} {{experimental_inline}}
+
Is a {{jsxref("Number")}} representing the top scroll offset the element.
+
{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.
+
{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view width of the element.
+
{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns the youngest shadow root that is hosted by the element.
+
{{domxref("Element.slot")}} {{experimental_inline}}
+
Returns the name of the shadow DOM slot attached to the element. A slot is a placeholder inside a web component that users can fill with their own markup.
+
{{domxref("Element.tabStop")}} {{non-standard_inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.
+
{{ domxref("Element.tagName") }} {{readOnlyInline}}
+
Returns a {{domxref("String")}} with the name of the tag for the given element.
+
{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}
+
Returns the {{domxref("UndoManager")}} associated with the element.
+
{{ domxref("Element.undoScope")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.
+
+ +
+

Note: DOM Level 3 defined namespaceURI, localName and prefix on the {{domxref("Node")}} interface. In DOM4 they were moved to Element.

+ +

This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.

+
+ +

Event handlers

+ +
+
{{ domxref("Element.ongotpointercapture") }}
+
Returns the event handler for the {{event("gotpointercapture")}} event type.
+
{{ domxref("Element.onlostpointercapture") }}
+
Returns the event handler for the {{event("lostpointercapture")}} event type.
+
+ +

Obsolete event handlers

+ +
+
{{ domxref("Element.onwheel") }}
+
Returns the event handling code for the wheel event. This is now implemented on {{domxref("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.
+
+ +

Methods

+ +

Inherits methods from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, and {{domxref("Animatable")}}.

+ +
+
{{ domxref("EventTarget.addEventListener()") }}
+
Registers an event handler to a specific event type on the element.
+
{{domxref("Element.attachShadow()")}} {{experimental_inline}}
+
Attatches a shadow DOM tree to the specified element and returns a reference to its {{domxref("ShadowRoot")}}.
+
{{domxref("Element.animate()")}} {{experimental_inline}}
+
A shortcut method to create and run an animation on an element. Returns the created Animation object instance.
+
{{ domxref("Element.closest()")}} {{experimental_inline}}
+
Returns the {{domxref("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.
+
{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}} {{deprecated_inline()}}
+
Creates a shadow DOM on on the element, turning it into a shadow host. Returns a {{domxref("ShadowRoot")}}.
+
{{ domxref("EventTarget.dispatchEvent()") }}
+
Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates that at least one handler has not canceled it.
+
{{domxref("Element.getAnimations()")}} {{experimental_inline}}
+
Returns an array of Animation objects currently active on the element.
+
{{ domxref("Element.getAttribute()") }}
+
Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNames()") }}
+
Returns an array of attribute names from the current element.
+
{{ domxref("Element.getAttributeNS()") }}
+
Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}
+
Retrieves the node representation of the named attribute from the current node and returns it as an {{ domxref("Attr") }}.
+
{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}
+
Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{ domxref("Attr") }}.
+
{{ domxref("Element.getBoundingClientRect()") }}
+
Returns the size of an element and its position relative to the viewport.
+
{{ domxref("Element.getClientRects()") }}
+
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
+
{{ domxref("Element.getElementsByClassName()") }}
+
Returns a live {{ domxref("HTMLCollection") }} that contains all descendants of the current element that possess the list of classes given in the parameter.
+
{{ domxref("Element.getElementsByTagName()") }}
+
Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name, from the current element.
+
{{ domxref("Element.getElementsByTagNameNS()") }}
+
Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name and namespace, from the current element.
+
{{ domxref("Element.hasAttribute()") }}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.
+
{{ domxref("Element.hasAttributeNS()") }}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.
+
{{ domxref("Element.hasAttributes()") }}
+
Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.
+
{{ domxref("Element.insertAdjacentElement") }} {{experimental_inline}}
+
Inserts a given element node at a given position relative to the element it is invoked upon.
+
{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}
+
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
+
{{ domxref("Element.insertAdjacentText") }} {{experimental_inline}}
+
Inserts a given text node at a given position relative to the element it is invoked upon.
+
{{ domxref("Element.matches()") }} {{experimental_inline}}
+
Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.
+
{{ domxref("Element.querySelector()") }}
+
Returns the first {{ domxref("Node") }} which matches the specified selector string relative to the element.
+
{{ domxref("Element.querySelectorAll") }}
+
Returns a {{ domxref("NodeList") }} of nodes which match the specified selector string relative to the element.
+
{{ domxref("Element.releasePointerCapture")}}
+
Releases (stops) pointer capture that was previously set for a specific {{domxref("PointerEvent","pointer event")}}.
+
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
+
Removes the element from the children list of its parent.
+
{{ domxref("Element.removeAttribute()") }}
+
Removes the named attribute from the current node.
+
{{ domxref("Element.removeAttributeNS()") }}
+
Removes the attribute with the specified name and namespace, from the current node.
+
{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}
+
Removes the node representation of the named attribute from the current node.
+
{{ domxref("EventTarget.removeEventListener()") }}
+
Removes an event listener from the element.
+
{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}
+
Asynchronously asks the browser to make the element full-screen.
+
{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}
+
Allows to asynchronously ask for the pointer to be locked on the given element.
+
+ +
+
{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}
+
Scrolls the page until the element gets into the view.
+
{{ domxref("Element.setAttribute()") }}
+
Sets the value of a named attribute of the current node.
+
{{ domxref("Element.setAttributeNS()") }}
+
Sets the value of the attribute with the specified name and namespace, from the current node.
+
{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}
+
Sets the node representation of the named attribute from the current node.
+
{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}
+
Setw the node representation of the attribute with the specified name and namespace, from the current node.
+
{{ domxref("Element.setCapture()") }} {{non-standard_inline}}
+
Sets up mouse event capture, redirecting all mouse events to this element.
+
{{domxref("Element.setPointerCapture()")}}
+
Designates a specific element as the capture target of future {{domxref("PointerEvent","pointer events")}}.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Added the getAnimations() method.
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Added the undoScope and undoManager properties.
{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events 2')}}Added the following event handlers: ongotpointercapture and onlostpointercapture.
+ Added the following methods: setPointerCapture() and releasePointerCapture().
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Added the following event handlers: ongotpointercapture and onlostpointercapture.
+ Added the following methods: setPointerCapture() and releasePointerCapture().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Added the following methods: querySelector() and querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Added the requestPointerLock() method.
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Added the requestFullscreen() method.
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Added the following properties: innerHTML, and outerHTML.
+ Added the following method: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Added the following properties: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
+ Added the following methods: getClientRects(), getBoundingClientRect(), and scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Added inheritance of the {{domxref("ElementTraversal")}} interface.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Removed the following methods: closest(), setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
+ Removed the schemaTypeInfo property.
+ Modified the return value of getElementsByTag() and getElementsByTagNS().
+ Moved hasAttributes() from the Node interface to this one.
+ Inserted insertAdjacentElement() and insertAdjacentText().
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Added the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). These methods were never implemented and have been removed in later specifications.
+ Added the schemaTypeInfo property. This property was never implemented and has been removed in later specifications.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}The normalize() method has been moved to {{domxref("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
children{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}7.0 with a significant bug [1]
+ 9.0 according to the spec		{{CompatVersionUnknown}}{{CompatNo}}
childElementCount, nextElementSibling, previousElementSibling{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
firstElementChild, lastElementChild{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
classList{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}} {{CompatVersionUnknown}}{{CompatVersionUnknown}}
outerHTML {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("11")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
clientLeft, clientTop {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getBoundingClientRect(), getClientRects() {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
querySelector(), querySelectorAll()1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}8.010.03.2 (525.3)
insertAdjacentHTML() {{experimental_inline}}1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("8")}}4.07.04.0 (527)
setCapture() {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("2")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
oncopy, oncut, onpaste {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}} {{CompatNo}}
onwheel {{non-standard_inline}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("17")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ongotpointercapture, onlostpointercapture, setPointerCapture(), and releasePointerCapture(){{CompatChrome(52.0)}} [4]{{CompatVersionUnknown}}{{CompatVersionUnknown}} [3]10.0{{CompatNo}}{{CompatNo}}
matches() {{experimental_inline}}{{CompatVersionUnknown}} with the non-standard name webkitMatchesSelector{{CompatVersionUnknown}} {{property_prefix("webkit")}} {{property_prefix("ms")}}{{CompatGeckoDesktop("1.9.2")}} with the non-standard name mozMatchesSelector
+ {{CompatGeckoDesktop("34")}} with the standard name		9.0 with the non-standard name msMatchesSelector11.5 with the non-standard name oMatchesSelector
+ 15.0 with the non-standard name webkitMatchesSelector		5.0 with the non-standard name webkitMatchesSelector
requestPointerLock()16.0 {{property_prefix("webkit")}}, behind an about:flags
+ 22.0 {{property_prefix("webkit")}} (with special cases, progressively lifted see [2])		{{CompatVersionUnknown}}{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
requestFullscreen()14.0 {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}11.0 {{property_prefix("ms")}}12.10
+ 15.0 {{property_prefix("webkit")}}		5.1 {{property_prefix("webkit")}}
undoManager and undoScope{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}} (behind the dom.undo_manager.enabled pref){{CompatNo}}{{CompatNo}}{{CompatNo}}
attributes{{CompatUnknown}}{{CompatNo}}{{CompatGeckoDesktop("22")}}
+ Before this it was available via the {{domxref("Node")}} interface that any element inherits.		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scrollTopMax() and scrollLeftMax(){{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("16")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
closest(){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hasAttributes(){{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("1.0")}} (on the {{domxref("Node")}} interface)
+ {{CompatGeckoDesktop("35")}} (on this interface		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
insertAdjacentElement(), insertAdjacentText(){{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("48.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
assignedSlot, attatchShadow, shadowRoot, and slot{{CompatChrome(53)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
computedRole and computedName{{CompatChrome(41)}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}28[4]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support1.0 {{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0 
scrollTopMax() and scrollLeftMax(){{CompatNo}} {{CompatNo}}{{CompatGeckoMobile("16")}}{{CompatNo}}{{CompatNo}}{{CompatNo}} 
closest(){{CompatUnknown}} {{CompatVersionUnknown}}{{CompatGeckoMobile("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} 
hasAttributes(){{CompatVersionUnknown}} {{CompatNo}}{{CompatGeckoMobile("1.0")}} (on the {{domxref("Node")}} interface)
+ {{CompatGeckoMobile("35")}} (on this interface		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} 
insertAdjacentElement(), insertAdjacentText(){{CompatVersionUnknown}} {{CompatVersionUnknown}}{{CompatGeckoMobile("48.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} 
assignedSlot, attatchShadow, shadowRoot, and slot{{CompatNo}}{{CompatChrome(53.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(53)}}
computedRole and computedName{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}28[4]{{CompatUnknown}}{{CompatNo}}
+
+ +

[1] Internet Explorer 7 and 8 incorrectly return the comments as part of the children of an Element. This is fixed in Internet Explorer 9 and later.

+ +

[2] Chrome 16 allowed webkitRequestPointerLock() only in fullscreen; Chrome 21 for trusted web site (permission asked); Chrome 22 allowed it by default for all same-origin document; Chrome 23 allowed it in sandboxed {{HTMLElement("iframe")}} if the non-standard value webkit-allow-pointer-lock is set to the {{htmlattrxref("sandbox", "iframe")}} attribute.

+ +

[3] Implementation withdrawn. See {{Bug("1166347")}}.

+ +

[4] Behind a flag.

diff --git a/files/ar/web/api/element/insertadjacenthtml/index.html b/files/ar/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..3b02d86986 --- /dev/null +++ b/files/ar/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,102 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - دوم + - عنصر إدخال +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

تعمل طريقة  ()insertAdjacentHTML ل {{domxref ("Element")}}

+ +

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

+ +

{{domxref ("Element.innerHTML","innerHTML")}}.

+ +

بناء الجملة

+ +
element.insertAdjacentHTML(position, text);
+ +

العوامل

+ +
+
position الموضع 
+
{{domxref ("DOMString")}} يمثل الموضع المتعلق بالعنصر element ؛ يجب أن يكون أحد السلاسل strings التالية:
+
+
    +
  • 'beforebegin':   قبل العنصر element نفسه.
    • +
  • 'afterbegin': داخل العنصر element, قبل التابع الأول له (child).
    • +
  • 'beforeend': داخل العنصر element, بعد آخر تابع له (child).
    • +
  • 'afterend': بعد العنصر element نفسه.
    • +
+
+
text النص
+
السلسلة (string) المطلوب تحليلها كـ HTML أو XML وإدراجها في الشجرة.
+
+ +

تصور مرئي لأسماء المواقع

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
ملحوظة: لا يعمل الوضع قبل البداية والنهاية إلا إذا كانت العقدة في شجرة DOM ولها عنصر أصل.
+ +

مثال

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+//
+ +
At this point, the new structure is:
+ +
// <div id="one">one</div><div id="two">two</div>
+ +

ملاحظات

+ +

إعتبارات أمنية

+ +

عند إدراج HTML في صفحة باستخدام insertAdjacentHTML () ، احرص على عدم استخدام إدخال المستخدم الذي لم يتم تجاوزه.

+ +

لا يُنصح باستخدام insertAdjacentHTML () عند إدراج نص عادي ؛ بدلاً من ذلك ، استخدم خاصية {{domxref ("Node.textContent")}} أو طريقة method {{domxref ("Element.insertAdjacentText ()")}}. هذا لا يفسر المحتوى الذي تم تمريره على أنه HTML ، ولكن بدلاً من ذلك يُدرجه كنص خام.

+ +

مواصفات

+ + + + + + + + + + + + + + + + +
مواصفاتالحالةتعليق
{{SpecName('DOM Parsing', '#dom-element-insertadjacenthtml', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }}
+ +

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

+ + + +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

شاهد أيضا

+ + diff --git a/files/ar/web/api/event/index.html b/files/ar/web/api/event/index.html new file mode 100644 index 0000000000..bd9bc76522 --- /dev/null +++ b/files/ar/web/api/event/index.html @@ -0,0 +1,136 @@ +--- +title: Event +slug: Web/API/Event +translation_of: Web/API/Event +--- +

{{APIRef("DOM")}}

+ +

The Event interface represents any event of the DOM. It contains common properties and methods to any event.

+ +

A lot of other interfaces inherits, directly or not, from this base interface:

+ +
+ +
+ +

Constructor

+ +
+
{{domxref("Event.Event", "Event()")}}
+
Creates an Event object.
+
+ +

Properties

+ +

This interface doesn't inherit any property.

+ +
+
{{domxref("Event.bubbles")}} {{readonlyinline}}
+
A boolean indicating whether the event bubbles up through the DOM or not.
+
{{domxref("Event.cancelable")}} {{readonlyinline}}
+
A boolean indicating whether the event is cancelable.
+
{{domxref("Event.currentTarget")}} {{readonlyinline}}
+
A reference to the currently registered target for the event.
+
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+
Indicates whether or not {{domxref("event.preventDefault()")}} has been called on the event.
+
{{domxref("Event.eventPhase")}} {{readonlyinline}}
+
Indicates which phase of the event flow is being processed.
+
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
The explicit original target of the event (Mozilla-specific).
+
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
The original target of the event, before any retargetings (Mozilla-specific).
+
{{domxref("Event.target")}} {{readonlyinline}}
+
A reference to the target to which the event was originally dispatched.
+
{{domxref("Event.timeStamp")}} {{readonlyinline}}
+
The time that the event was created.
+
{{domxref("Event.type")}} {{readonlyinline}}
+
The name of the event (case-insensitive).
+
{{domxref("Event.isTrusted")}} {{readonlyinline}}
+
Indicates whether or not the event was initiated by the browser (after a user click for instance) or by a script (using an event creation method, like event.initEvent)
+
+ +

Methods

+ +

This interface doesn't inherit any method.

+ +
+
{{domxref("Event.initEvent()")}} {{deprecated_inline}}
+
Initializes the value of an Event created. If the event has already being dispatched, this method does nothing.
+
{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Prevents the event from bubbling. Obsolete, use {{domxref("event.stopPropagation")}} instead.
+
{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Obsolete, use {{domxref("event.stopPropagation")}} instead.
+
{{domxref("Event.preventDefault()")}}
+
Cancels the event (if it is cancelable).
+
{{domxref("Event.stopImmediatePropagation()")}}
+
For this particular event, no other listener will be called. Neither those attached on the same element, nor those attached on elements which will be traversed later (in capture phase, for instance)
+
{{domxref("Event.stopPropagation()")}}
+
Stops the propagation of events further along in the DOM.
+
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
+
?
+
+ +

See also

+ + diff --git a/files/ar/web/api/geolocation/index.html b/files/ar/web/api/geolocation/index.html new file mode 100644 index 0000000000..81d4548549 --- /dev/null +++ b/files/ar/web/api/geolocation/index.html @@ -0,0 +1,118 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +tags: + - API + - Advanced + - Geolocation API + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Geolocation +--- +
{{APIRef("Geolocation API")}}
+ +

The Geolocation interface represents an object able to programmatically obtain the position of the device. It gives Web content access to the location of the device. This allows a Web site or app to offer customized results based on the user's location.

+ +

An object with this interface is obtained using the {{domxref("NavigatorGeolocation.geolocation")}} property implemented by the {{domxref("Navigator")}} object.

+ +
+

Note: For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.

+
+ +

Properties

+ +

The Geolocation interface neither implements, nor inherits any property.

+ +

Methods

+ +

The Geolocation interface doesn't inherit any method.

+ +
+
{{domxref("Geolocation.getCurrentPosition()")}}
+
Determines the device's current location and gives back a {{domxref("Position")}} object with the data.
+
{{domxref("Geolocation.watchPosition()")}}
+
Returns a long value representing the newly established callback function to be invoked whenever the device location changes.
+
{{domxref("Geolocation.clearWatch()")}}
+
Removes the particular handler previously installed using watchPosition().
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Removed in 15.0
+ Reintroduced in 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

See also

+ + diff --git a/files/ar/web/api/geolocation/using_geolocation/index.html b/files/ar/web/api/geolocation/using_geolocation/index.html new file mode 100644 index 0000000000..a27275b2b5 --- /dev/null +++ b/files/ar/web/api/geolocation/using_geolocation/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/using_geolocation/using_the_geolocation_api/index.html b/files/ar/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html new file mode 100644 index 0000000000..d696d6c9f2 --- /dev/null +++ b/files/ar/web/api/geolocation/using_geolocation/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/index.html b/files/ar/web/api/history_api/index.html new file mode 100644 index 0000000000..0db39b3b98 --- /dev/null +++ b/files/ar/web/api/history_api/index.html @@ -0,0 +1,262 @@ +--- +title: Manipulating the browser history +slug: Web/API/History_API +tags: + - Advanced + - DOM + - HTML5 + - History + - NeedsTranslation + - TopicStub +translation_of: Web/API/History_API +--- +

با استفاده از آبجکت {{ domxref("window") }} می توانید به تاریخچه مرورگر توسط آبجت {{ domxref("window.history", "history") }}  دسترسی داشته باشید . این آبجکت متد ها و ویژگی های بسیار کاربردی را در اختیار شما قرار میدهد تا بتوانید در تاریخچه مرورگر به عقب یا جلو بروید در واقع قادر خواهید بود تا عمل back و forward را انجام دهید

+ +

مرور در تاریخچه مرورگر

+ +

با استفاده از

+ +

Moving backward and forward through the user's history is done using the back(), forward(), and go() methods.

+ +

Moving forward and backward

+ +

To move backward through history, just do:

+ +
window.history.back();
+
+ +

This will act exactly like the user clicked on the Back button in their browser toolbar.

+ +

Similarly, you can move forward (as if the user clicked the Forward button), like this:

+ +
window.history.forward();
+
+ +

Moving to a specific point in history

+ +

You can use the go() method to load a specific page from session history, identified by its relative position to the current page (with the current page being, of course, relative index 0).

+ +

To move back one page (the equivalent of calling back()):

+ +
window.history.go(-1);
+
+ +

To move forward a page, just like calling forward():

+ +
window.history.go(1);
+
+ +

Similarly, you can move forward 2 pages by passing 2, and so forth.

+ +

You can determine the number of pages in the history stack by looking at the value of the length property:

+ +
var numberOfEntries = window.history.length;
+
+ +
Note: Internet Explorer supports passing string URLs as a parameter to go(); this is non-standard and not supported by Gecko.
+ +

Adding and modifying history entries

+ +

{{ gecko_minversion_header("2") }}

+ +

HTML5 introduced the history.pushState() and history.replaceState() methods, which allow you to add and modify history entries, respectively. These methods work in conjunction with the {{ domxref("window.onpopstate") }} event.

+ +

Using history.pushState() changes the referrer that gets used in the HTTP header for XMLHttpRequest objects created after you change the state. The referrer will be the URL of the document whose window is this at the time of creation of the XMLHttpRequest object.

+ +

Example of pushState() method

+ +

Suppose http://mozilla.org/foo.html executes the following JavaScript:

+ +
var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+
+ +

This will cause the URL bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists.

+ +

Suppose now that the user now navigates to http://google.com, then clicks back. At this point, the URL bar will display http://mozilla.org/bar.html, and the page will get a popstate event whose state object contains a copy of stateObj. The page itself will look like foo.html, although the page might modify its contents during the popstate event.

+ +

If we click back again, the URL will change to http://mozilla.org/foo.html, and the document will get another popstate event, this time with a null state object. Here too, going back doesn't change the document's contents from what they were in the previous step, although the document might update its contents manually upon receiving the popstate event.

+ +

The pushState() method

+ +

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL. Let's examine each of these three parameters in more detail:

+ + + +
Note: In Gecko 2.0 {{ geckoRelease("2.0") }} through Gecko 5.0 {{ geckoRelease("5.0") }}, the passed object is serialized using JSON. Starting in Gecko 6.0 {{ geckoRelease("6.0") }}, the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.
+ +

In a sense, calling pushState() is similar to setting window.location = "#foo", in that both will also create and activate another history entry associated with the current document. But pushState() has a few advantages:

+ + + +

Note that pushState() never causes a hashchange event to be fired, even if the new URL differs from the old URL only in its hash.

+ +

In a XUL document, it creates the specified XUL element.

+ +

In other documents, it creates an element with a null namespace URI.

+ +

The replaceState() method

+ +

history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one. Note that this doesn't prevent the creation of a new entry in the global browser history.

+ +

replaceState() is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.

+ +
Note: In Gecko 2.0 {{ geckoRelease("2.0") }} through Gecko 5.0 {{ geckoRelease("5.0") }}, the passed object is serialized using JSON. Starting in Gecko 6.0 {{ geckoRelease("6.0") }}, the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.
+ +

Example of replaceState() method

+ +

Suppose http://mozilla.org/foo.html executes the following JavaScript:

+ +
var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+
+ +

The explanation of these two lines above can be found at "Example of pushState() method" section. Then suppose http://mozilla.org/bar.html executes the following JavaScript:

+ +
history.replaceState(stateObj, "page 3", "bar2.html");
+
+ +

This will cause the URL bar to display http://mozilla.org/bar2.html, but won't cause the browser to load bar2.html or even check that bar2.html exists.

+ +

Suppose now that the user now navigates to http://www.microsoft.com, then clicks back. At this point, the URL bar will display http://mozilla.org/bar2.html. If the user now clicks back again, the URL bar will display http://mozilla.org/foo.html, and totally bypass bar.html.

+ +

The popstate event

+ +

A popstate event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to pushState or affected by a call to replaceState, the popstate event's state property contains a copy of the history entry's state object.

+ +

See {{ domxref("window.onpopstate") }} for sample usage.

+ +

Reading the current state

+ +

When your page loads, it might have a non-null state object.  This can happen, for example, if the page sets a state object (using pushState() or replaceState()) and then the user restarts their browser.  When your page reloads, the page will receive an onload event, but no popstate event.  However, if you read the history.state property, you'll get back the state object you would have gotten if a popstate had fired.

+ +

You can read the state of the current history entry without waiting for a popstate event using the history.state property like this:

+ +
var currentState = history.state;
+
+ +

Examples

+ +

For a complete example of AJAX web site, please see: Ajax navigation example.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
replaceState, pushState5{{CompatVersionUnknown}}{{ CompatGeckoDesktop("2.0") }}1011.505.0
history.state18{{CompatVersionUnknown}}{{ CompatGeckoDesktop("2.0") }}1011.506.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
replaceState, pushState{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
history.state{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ + + +

 

+ +

 

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" new file mode 100644 index 0000000000..1bcce72374 --- /dev/null +++ "b/files/ar/web/api/history_api/\331\205\330\253\330\247\331\204/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

+ + diff --git a/files/ar/web/api/htmlelement/contenteditable/index.html b/files/ar/web/api/htmlelement/contenteditable/index.html new file mode 100644 index 0000000000..aee7a4f1f2 --- /dev/null +++ b/files/ar/web/api/htmlelement/contenteditable/index.html @@ -0,0 +1,75 @@ +--- +title: HTMLElement.contentEditable +slug: Web/API/HTMLElement/contentEditable +tags: + - API + - المراجع + - خاصية contenteditable + - عناصر HTML +translation_of: Web/API/HTMLElement/contentEditable +--- +
+ {{APIRef}}
+

إن خاصية HTMLElement.contentEditable تستخدم لتحديد إذا ما كان العنصر قابل للتحرير أو لا.هذه الخاصية يمكن أن تأخذ إحدى القيم التالية:

+ +

الشكل العام

+
editable = element.contentEditable
+element.contentEditable = "true"
+
+

ملاحظات

+

بإمكانك إستعمال خاصية  {{domxref("HTMLElement.isContentEditable")}} لإختبارالقيمة المنطقية المحوسبة {{domxref("Boolean")}} من هذا العنصر.

+

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

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
الميزةChromeFirefox (Gecko)Internet ExplorerOperaSafari
الدعم الأساسي11{{CompatGeckoDesktop(1.9)}}610.63.2
+
+
+ + + + + + + + + + + + + + + + + + + +
الميزةAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
الدعم الأساسي3{{CompatGeckoMobile(1.9)}}6{{CompatNo}}5
+
+

المواصفات

+ diff --git a/files/ar/web/api/htmlelement/index.html b/files/ar/web/api/htmlelement/index.html new file mode 100644 index 0000000000..976b2b7017 --- /dev/null +++ b/files/ar/web/api/htmlelement/index.html @@ -0,0 +1,400 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +translation_of: Web/API/HTMLElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +
 
+ +

The HTMLElement interface represents any HTML element. Some elements directly implement this interface, others implement it via an interface that inherits it.

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.

+ +
+
{{domxref("HTMLElement.accessKey")}}
+
Is a {{domxref("DOMString")}} representing the access key assigned to the element.
+
{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the element's assigned access key.
+
{{domxref("HTMLElement.contentEditable")}}
+
Is a {{domxref("DOMString")}}, where a value of "true" means the element is editable and a value of "false" means it isn't.
+
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.
+
{{domxref("HTMLElement.contextMenu")}}
+
Is an {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be null
+
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}
+
Returns a {{domxref("DOMStringMap")}} that allows access to read and write the element custom data attributes (data-*) .
+
{{domxref("HTMLElement.dir")}}
+
Is a {{domxref("DOMString")}}, reflecting the dir global attribute, representing the directionality of the element. Possible values are "ltr", "rtl", and "auto".
+
{{domxref("HTMLElement.draggable")}}
+
Is a {{jsxref("Boolean")}} indicating if the element can be dragged.
+
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}
+
Returns a {{domxref("DOMSettableTokenList")}} reflecting the dropzone global attribute and describing the behavior of the element regarding a drop operation.
+
{{domxref("HTMLElement.hidden")}}
+
Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.
+
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}}…
+
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}
+
Is a {{domxref("DOMString")}}…
+
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}
+
Returns an {{jsxref("Object")}}…
+
{{domxref("HTMLElement.lang")}}
+
Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.
+
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a double containing the height of an element, relative to the layout.
+
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double, the distance from this element's left border to its offsetParent's left border.
+
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.
+
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double, the distance from this element's top border to its offsetParent's top border.
+
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double containing the width of an element, relative to the layout.
+
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("HTMLPropertiesCollection")}}…
+
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}
+
Is a {{jsxref("Boolean")}} that controls spell-checking. It is present on all HTML elements, though it hasn't an effect on all of them.
+
{{domxref("HTMLElement.style")}}
+
Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.
+
{{domxref("HTMLElement.tabIndex")}}
+
Is a long representing the position of the element in the tabbing order.
+
{{domxref("HTMLElement.title")}}
+
Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.
+
{{domxref("HTMLElement.translate")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}}
+
+ +

Event handlers

+ +

Most events properties, of the form onXYZ, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implemented by HTMLElement. A few more are specific to HTMLElement.

+ +
+
{{ domxref("HTMLElement.oncopy") }}  {{ non-standard_inline() }}
+
Returns the event handling code for the copy event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.oncut") }}  {{ non-standard_inline() }}
+
Returns the event handling code for the cut event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}
+
Returns the event handling code for the paste event ({{bug("280959")}}).
+
{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchstart")}} event.
+
{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchend")}} event.
+
{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchmove")}} event.
+
{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchenter")}} event.
+
{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchleave")}} event.
+
{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchcancel")}} event.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("Element")}}.

+ +
+
{{domxref("HTMLElement.blur()")}}
+
Removes keyboard focus from the currently focused element.
+
{{domxref("HTMLElement.click()")}}
+
Sends a mouse click event to the element.
+
{{domxref("HTMLElement.focus()")}}
+
Makes the element the current keyboard focus.
+
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}
+
Makes the spell checker runs on the element.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}Added the following properties: offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}Added the following properties: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, and itemValue.
+ Added the following method: forceSpellcheck().
+ Moved the onXYZ attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}Added the following properties: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, and all the onXYZ properties.
+ Moved the id and className properties to the {{domxref("Element")}} interface.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoDesktop("5.0")}}17.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.10)
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoDesktop("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{WebkitBug(72715)}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.24)
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}9.0{{CompatUnknown}}11.105.1
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.contentEditable", "contentEditable")}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}5.59{{CompatVersionUnknown}}
{{domxref("HTMLElement.spellcheck", "spellcheck")}}{{CompatGeckoDesktop("1.8.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.style", "style")}}{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}8.01111.106
{{domxref("HTMLElement.draggable", "draggable")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}12.0{{CompatUnknown}}
{{domxref("HTMLElement.dropzone", "dropzone")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}12.0{{CompatNo}}
{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatNo}}11.60
+ (Removed in Opera 15)		{{CompatNo}}
{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoDesktop("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support +

{{CompatGeckoMobile("1.0")}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoMobile("8.0")}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoMobile("6.0")}}
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoMobile("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/ar/web/api/index.html b/files/ar/web/api/index.html new file mode 100644 index 0000000000..62573a0945 --- /dev/null +++ b/files/ar/web/api/index.html @@ -0,0 +1,15 @@ +--- +title: واجهات الويب البرمجيّة +slug: Web/API +tags: + - DOM + - جافاسكربت + - مرجع + - واجهات برمجية +translation_of: Web/API +--- +

عندما تكتب نصوصاً برمجيّة للويب مُستخدِماً لغة الجافاسكرِبت، ستجد العديد من الواجهات البرمجيّة (API) المتوفرة. القائمة أدناه تسرد كل الواجهات (أي أنواع الكائنات) التي يمكنك استخدامها أثناء تطوير تطبيقات أو موقع الويب.

+ +
+
{{APIListAlpha}}
+
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/api/navigator/index.html b/files/ar/web/api/navigator/index.html new file mode 100644 index 0000000000..a2c4e0c815 --- /dev/null +++ b/files/ar/web/api/navigator/index.html @@ -0,0 +1,155 @@ +--- +title: Navigator +slug: Web/API/Navigator +tags: + - API + - DOM4 + - Interface + - Navigator + - NeedsBrowserCompatibility + - NeedsSpecTable + - NeedsTranslation + - Reference + - TopicStub + - Web + - Web Performance +translation_of: Web/API/Navigator +--- +

{{ APIRef("DOM4") }}

+ +

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

+ +

A Navigator object can be retrieved using the read-only {{domxref("window.navigator")}} property.

+ +

Properties

+ +

Doesn't inherit any properties, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorStorage")}}, {{domxref("NavigatorStorageUtils")}}, {{domxref("NavigatorCookies")}}, {{domxref("NavigatorConcurrentHardware")}}, {{domxref("NavigatorPlugins")}}, and {{domxref("NavigatorUserMedia")}}.

+ +

Standard

+ +
+
{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an array containing every {{domxref("VRDisplay")}} object that is currently presenting ({{domxref("VRDisplay.ispresenting")}} is true).
+
{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.
+
{{domxref("Navigator.battery")}} {{readonlyInline}}
+
Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.
+
{{domxref("Navigator.connection")}} {{readonlyInline}}{{experimental_inline}}
+
Provides a {{domxref("NetworkInformation")}} object containing information about the network connection of a device.
+
{{domxref("Navigator.geolocation")}} {{readonlyInline}}
+
Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.
+
{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readOnlyInline}}
+
Returns the number of logical processor cores available.
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the browser is working online.
+
{{domxref("Navigator.oscpu")}}
+
Returns a string that represents the current operating system.
+
{{domxref("Navigator.permissions")}} {{readonlyinline}}{{experimental_inline}}
+
Returns a {{domxref("Permissions")}} object that can be used to query and update permission status of APIs covered by the Permissions API.
+
{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.
+
{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}
+
Always returns 'Gecko', on any browser. This property is kept only for compatibility purpose.
+
{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}
+
Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the associated document.
+
{{domxref("Navigator.storage")}} {{readonlyinline}}
+
Returns the singleton {{domxref('StorageManager')}} object used for managing persistance permissions and estimating available storage on a site-by-site/app-by-app basis.
+
{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}
+
Returns the user agent string for the current browser.
+
+ +

Non-standard

+ +
+

Firefox OS devices adds more non-standard properties. You can consult them on the Firefox OS Navigator extensions article.

+
+ +

{{domxref("Navigator.buildID")}} {{non-standard_inline}}

+ +
+
Returns the build identifier of the browser (e.g., "2006090803").
+
{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}
+
Returns a boolean indicating whether cookies are enabled in the browser or not.
+
{{domxref("Navigator.credentials")}} {{non-standard_inline}}
+
Returns the {{domxref("CredentialsContainer")}} interface which exposes methods to request credentials and notify the user agent when interesting events occur such as successful sign in or sign out. 
+
{{domxref("Navigator.doNotTrack")}} {{non-standard_inline}}
+
Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.
+
{{domxref("Navigator.id")}} {{non-standard_inline}}
+
Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for BrowserID to your web site.
+
{{domxref("Navigator.mediaDevices")}} {{non-standard_inline}}
+
Returns a reference to a {{domxref("MediaDevices")}} object which can then be used to get information about available media devices ({{domxref("MediaDevices.enumerateDevices()")}}), find out what constrainable properties are supported for media on the user's computer and user agent ({{domxref("MediaDevices.getSupportedConstraints()")}}), and to request access to media using {{domxref("MediaDevices.getUserMedia()")}}.
+
{{domxref("Navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}
+ {{domxref("Navigator.webkitNotification")}}
+
Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.
+
{{domxref("Navigator.mozSocial")}} {{non-standard_inline}}
+
The Object, returned by the navigator.mozSocial property, is available within the social media provider's panel to provide functionality it may need.
+
{{domxref("Navigator.presentation")}} {{non-standard_inline}}
+
Returns a reference to the {{domxref("Presentation")}} API.
+
{{domxref("Navigator.productSub")}} {{non-standard_inline}}
+
Returns the build number of the current browser (e.g., "20060909").
+
{{domxref("Navigator.securitypolicy")}} {{non-standard_inline}}
+
Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".
+
{{domxref("Navigator.standalone")}} {{non-standard_inline}}
+
Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.
+
{{domxref("Navigator.storageQuota")}} {{readonlyinline}} {{experimental_inline}}
+
Returns a {{domxref('StorageQuota')}} interface which provides means to query and request storage usage and quota information.
+
{{domxref("Navigator.vendor")}} {{non-standard_inline}}
+
Returns the vendor name of the current browser (e.g., "Netscape6").
+
{{domxref("Navigator.vendorSub")}} {{non-standard_inline}}
+
Returns the vendor version number (e.g. "6.1").
+
{{domxref("Navigator.webkitPointer")}} {{non-standard_inline}}
+
Returns a PointerLock object for the Mouse Lock API.
+
+ +

Methods

+ +

Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NavigatorStorageUtils")}}.

+ +

Standard

+ +
+
{{domxref("Navigator.getVRDisplays()")}} {{experimental_inline}}
+
Returns a promise that resolves to an array of {{domxref("VRDisplay")}} objects representing any available VR devices connected to the computer.
+
{{domxref("Navigator.getUserMedia", "Navigator.getUserMedia()")}} {{experimental_inline}}
+
After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.
+
{{domxref("Navigator.registerContentHandler()")}}
+
Allows web sites to register themselves as a possible handler for a given MIME type.
+
{{domxref("Navigator.registerProtocolHandler()")}}
+
Allows web sites to register themselves as a possible handler for a given protocol.
+
{{domxref("Navigator.requestMediaKeySystemAccess()")}} {{experimental_inline}}
+
Returns a {{jsxref("Promise")}} for a MediaKeySystemAccess object.
+
{{domxref("Navigator.sendBeacon()")}}{{experimental_inline}}
+
Used to asynchronously transfer a small amount of data using {{Glossary("HTTP")}} from the User Agent to a web server.
+
{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}
+
Returns false. JavaScript taint/untaint functions removed in JavaScript 1.2.
+
{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}
+
Causes vibration on devices with support for it. Does nothing if vibration support isn't available.
+
+ +

Non-standard

+ +
+

Firefox OS devices adds more non-standard methods. You can consult them on the Firefox OS Navigator extensions article.

+
+ +

{{domxref("Navigator.mozIsLocallyAvailable()")}} {{non-standard_inline}}

+ +
+
Lets code check to see if the document at a given URI is available without using the network.
+
{{domxref("Navigator.mozPay()")}} {{non-standard_inline}}
+
Allows in-app payment.
+
diff --git a/files/ar/web/api/node/index.html b/files/ar/web/api/node/index.html new file mode 100644 index 0000000000..25375da985 --- /dev/null +++ b/files/ar/web/api/node/index.html @@ -0,0 +1,381 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Node + - Reference + - TopicStub +translation_of: Web/API/Node +--- +

{{APIRef("DOM")}}

+ +

The {{Glossary("DOM")}} Node interface is a key base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably. Key among the interfaces which inherit the features of Node are {{domxref("Document")}} and {{domxref("Element")}}. However, all of the following also inherit methods and properties from Node: {{DOMxRef("Attr")}}, {{DOMxRef("CharacterData")}} (which {{DOMxRef("Text")}}, {{DOMxRef("Comment")}}, and {{DOMxRef("CDATASection")}} are all based on), {{DOMxRef("ProcessingInstruction")}}, {{DOMxRef("DocumentFragment")}}, {{DOMxRef("DocumentType")}}, {{DOMxRef("Notation")}}, {{DOMxRef("Entity")}}, and {{DOMxRef("EntityReference")}}.

+ +

In some cases, a particular feature of Node may not apply to a particular interface based on it; in that case, the inheriting node may return null or throw an exception, depending on circumstances. For example, attempting to add children to a node type that cannot have children will throw an exception.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

Inherits properties from its parent, {{DOMxRef("EventTarget")}}.[1]

+ +
+
{{DOMxRef("Node.baseURI")}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} representing the base URL of the document containing the Node.
+
{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline}} {{ReadOnlyInline}}{{Fx_MinVersion_Inline("3")}}
+
(Not available to web content.) The {{ Interface("nsIURI") }} object representing the base URI for the element.
+
{{DOMxRef("Node.childNodes")}}{{ReadOnlyInline}}
+
Returns a live {{DOMxRef("NodeList")}} containing all the children of this node. {{DOMxRef("NodeList")}} being live means that if the children of the Node change, the {{DOMxRef("NodeList")}} object is automatically updated.
+
{{DOMxRef("Node.firstChild")}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("Node")}} representing the first direct child node of the node, or null if the node has no child.
+
{{DOMxRef("Node.isConnected")}}{{ReadOnlyInline}}
+
A boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{DOMxRef("Document")}} object in the case of the normal DOM, or the {{DOMxRef("ShadowRoot")}} in the case of a shadow DOM.
+
{{DOMxRef("Node.lastChild")}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("Node")}} representing the last direct child node of the node, or null if the node has no child.
+
{{DOMxRef("Node.nextSibling")}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("Node")}} representing the next node in the tree, or null if there isn't such node.
+
{{DOMxRef("Node.nodeName")}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the name of the Node. The structure of the name will differ with the node type. E.g. An {{DOMxRef("HTMLElement")}} will contain the name of the corresponding tag, like 'audio' for an {{DOMxRef("HTMLAudioElement")}}, a {{DOMxRef("Text")}} node will have the '#text' string, or a {{DOMxRef("Document")}} node will have the '#document' string.
+
{{DOMxRef("Node.nodeType")}}{{ReadOnlyInline}}
+
Returns an unsigned short representing the type of the node. Possible values are: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameValue
ELEMENT_NODE1
ATTRIBUTE_NODE {{Deprecated_Inline}}2
TEXT_NODE3
CDATA_SECTION_NODE4
ENTITY_REFERENCE_NODE {{Deprecated_Inline}}5
ENTITY_NODE {{Deprecated_Inline}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{Deprecated_Inline}}12
+
+
{{DOMxRef("Node.nodeValue")}}
+
Returns / Sets the value of the current node.
+
{{DOMxRef("Node.ownerDocument")}}{{ReadOnlyInline}}
+
Returns the {{DOMxRef("Document")}} that this node belongs to. If the node is itself a document, returns null.
+
{{DOMxRef("Node.parentNode")}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns null.
+
{{DOMxRef("Node.parentElement")}}{{ReadOnlyInline}}
+
Returns an {{DOMxRef("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{DOMxRef("Element")}}, this property returns null.
+
{{DOMxRef("Node.previousSibling")}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("Node")}} representing the previous node in the tree, or null if there isn't such node.
+
{{DOMxRef("Node.textContent")}}
+
Returns / Sets the textual content of an element and all its descendants.
+
+ +

Obsolete properties

+ +
+
{{DOMxRef("Node.localName")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} representing the local part of the qualified name of an element. +
+

Note: In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML.

+
+
+
{{DOMxRef("Node.namespaceURI")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
+
The namespace URI of this node, or null if it is no namespace. +
+

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml/ namespace in both HTML and XML trees.

+
+
+
{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}{{Fx_MinVersion_Inline("3")}}
+
A {{Interface("nsIPrincipal")}} representing the node principal.
+
{{DOMxRef("Node.prefix")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
+
Is a {{DOMxRef("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
+
{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
+
Returns a {{DOMxRef("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by {{DOMxRef("Node.getRootNode()")}}.
+
+ +

Methods

+ +

Inherits methods from its parent, {{DOMxRef("EventTarget")}}.[1]

+ +
+
{{DOMxRef("Node.appendChild()", "Node.appendChild(childNode)")}}
+
Adds the specified childNode argument as the last child to the current node.
+ If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.
+
{{DOMxRef("Node.cloneNode()")}}
+
Clone a {{DOMxRef("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.
+
{{DOMxRef("Node.compareDocumentPosition()")}}
+
Compares the position of the current node against another node in any other document.
+
{{DOMxRef("Node.contains()")}}
+
Returns a {{jsxref("Boolean")}} value indicating whether or not a node is a descendant of the calling node.
+
{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}
+
Returns a list of the node's CSS boxes relative to another node.
+
{{DOMxRef("Node.getRootNode()")}}
+
Returns the context object's root which optionally includes the shadow root if it is available. 
+
{{DOMxRef("Node.hasChildNodes()")}}
+
Returns a {{jsxref("Boolean")}} indicating whether or not the element has any child nodes.
+
{{DOMxRef("Node.insertBefore()")}}
+
Inserts a {{DOMxRef("Node")}} before the reference node as a child of a specified parent node.
+
{{DOMxRef("Node.isDefaultNamespace()")}}
+
Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of true if the namespace is the default namespace on the given node or false if not.
+
{{DOMxRef("Node.isEqualNode()")}}
+
Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.
+
{{DOMxRef("Node.isSameNode()")}}
+
Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).
+
{{DOMxRef("Node.lookupPrefix()")}}
+
Returns a {{DOMxRef("DOMString")}} containing the prefix for a given namespace URI, if present, and null if not. When multiple prefixes are possible, the result is implementation-dependent.
+
{{DOMxRef("Node.lookupNamespaceURI()")}}
+
Accepts a prefix and returns the namespace URI associated with it on the given node if found (and null if not). Supplying null for the prefix will return the default namespace.
+
{{DOMxRef("Node.normalize()")}}
+
Clean up all the text nodes under this element (merge adjacent, remove empty).
+
{{DOMxRef("Node.removeChild()")}}
+
Removes a child node from the current element, which must be a child of the current node.
+
{{DOMxRef("Node.replaceChild()")}}
+
Replaces one child {{DOMxRef("Node")}} of the current one with the second one given in parameter.
+
+ +

Obsolete methods

+ +
+
{{DOMxRef("Node.getFeature()")}} {{Obsolete_Inline}}
+
+
{{DOMxRef("Node.getUserData()")}} {{Obsolete_Inline}}
+
Allows a user to get some {{DOMxRef("DOMUserData")}} from the node.
+
{{DOMxRef("Node.hasAttributes()")}} {{Obsolete_Inline}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.
+
{{DOMxRef("Node.isSupported()")}} {{Obsolete_Inline}}
+
Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.
+
{{DOMxRef("Node.setUserData()")}} {{Obsolete_Inline}}
+
Allows a user to attach, or remove, {{DOMxRef("DOMUserData")}} to the node.
+
+ +

Examples

+ +

Remove all children nested within a node

+ +
function removeAllChildren(element) {
+  while (element.firstChild) {
+    element.removeChild(element.firstChild)
+  }
+}
+ +

Sample usage

+ +
/* ... an alternative to document.body.innerHTML = "" ... */
+removeAllChildren(document.body)
+ +

Recurse through child nodes

+ +

The following function recursively calls a callback function for each node contained by a root node (including the root itself):

+ +
function eachNode(rootNode, callback) {
+	if (!callback) {
+		const nodes = []
+		eachNode(rootNode, function(node) {
+			nodes.push(node)
+		})
+		return nodes
+	}
+
+	if (false === callback(rootNode)) {
+		return false
+    }
+
+	if (rootNode.hasChildNodes()) {
+		const nodes = rootNode.childNodes
+		for (let i = 0, l = nodes.length; i < l; ++i) {
+			if (false === eachNode(nodes[i], callback)) {
+				return
+            }
+        }
+	}
+}
+
+ +

Syntax

+ +
eachNode(rootNode, callback)
+ +

Description

+ +

Recursively calls a function for each descendant node of rootNode (including the root itself).

+ +

If callback is omitted, the function returns an {{jsxref("Array")}} instead, which contains rootNode and all nodes contained within.

+ +

If callback is provided, and it returns {{jsxref("Boolean")}} false when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node which contains a certain string).

+ +

Parameters

+ +
+
rootNode
+
The Node object whose descendants will be recursed through.
+
callback {{optional_inline}}
+
An optional callback function that receives a Node as its only argument. If omitted, eachNode returns an {{jsxref("Array")}} of every node contained within rootNode (including the root itself).
+
+ +

Sample usage

+ +

The following example prints the textContent properties of each <span> tag in a <div> element named "box":

+ +
<div id="box">
+  <span>Foo</span>
+  <span>Bar</span>
+  <span>Baz</span>
+</div>
+ +
const box = document.getElementById("box")
+eachNode(box, function(node) {
+  if (null != node.textContent) {
+    console.log(node.textContent)
+  }
+})
+ +

The above will result in the following strings printing to the user's console:

+ +
"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"
+ +
+

Note: Whitespace forms part of a {{DOMxRef("Text")}} node, meaning indentation and newlines form separate Text between the Element nodes.

+
+ +

Realistic usage

+ +

The following demonstrates a real-world use of the eachNode() function: searching for text on a web-page.

+ +

We use a wrapper function named grep to do the searching:

+ +
function grep(parentNode, pattern) {
+	const matches = []
+	let endScan = false
+
+	eachNode(parentNode, function(node){
+		if (endScan) {
+			return false
+        }
+
+		// Ignore anything which isn't a text node
+		if (node.nodeType !== Node.TEXT_NODE) {
+			return
+        }
+
+		if (typeof pattern === "string") {
+			if (-1 !== node.textContent.indexOf(pattern)) {
+				matches.push(node)
+            }
+		}
+		else if (pattern.test(node.textContent)) {
+			if (!pattern.global) {
+				endScan = true
+				matches = node
+			}
+			else {
+                matches.push(node)
+            }
+		}
+	})
+
+	return matches
+}
+ +

For example, to find {{DOMxRef("Text")}} nodes that contain typos:

+ +
const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"]
+const pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi")
+const mistakes = grep(document.body, pattern)
+console.log(mistakes)
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#interface-node", "Node")}}{{Spec2("DOM WHATWG")}}Added the following methods: getRootNode()
{{SpecName("DOM4", "#interface-node", "Node")}}{{Spec2("DOM4")}}Removed the following properties: attributes, namespaceURI, prefix, and localName.
+ Removed the following methods: isSupported(), hasAttributes(), getFeature(), setUserData(), and getUserData().
{{SpecName("DOM3 Core", "core.html#ID-1950641247", "Node")}}{{Spec2("DOM3 Core")}}The methods insertBefore(), replaceChild(), removeChild(), and appendChild() returns one more kind of error (NOT_SUPPORTED_ERR) if called on a {{DOMxRef("Document")}}.
+ The normalize() method has been modified so that {{DOMxRef("Text")}} node can also be normalized if the proper {{DOMxRef("DOMConfiguration")}} flag is set.
+ Added the following methods: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().
+ Added the following properties: baseURI and textContent.
{{SpecName("DOM2 Core", "core.html#ID-1950641247", "Node")}}{{Spec2("DOM2 Core")}}The ownerDocument property was slightly modified so that {{DOMxRef("DocumentFragment")}} also returns null.
+ Added the following properties: namespaceURI, prefix, and localName.
+ Added the following methods: normalize(), isSupported() and hasAttributes().
{{SpecName("DOM1", "level-one-core.html#ID-1950641247", "Node")}}{{Spec2("DOM1")}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Node")}}

diff --git a/files/ar/web/api/node/removechild/index.html b/files/ar/web/api/node/removechild/index.html new file mode 100644 index 0000000000..aea43247bd --- /dev/null +++ b/files/ar/web/api/node/removechild/index.html @@ -0,0 +1,144 @@ +--- +title: Node.removeChild() +slug: Web/API/Node/removeChild +translation_of: Web/API/Node/removeChild +--- +
{{APIRef("DOM")}}
+ +

و Node.removeChild()الأسلوب يزيل عقدة الطفل من DOM وإرجاع العقدة التي تمت إزالتها.

+ +

بناء الجملة

+ +
var oldChild = العقدة .removeChild ( child ) ؛
+أو 
+عقدة. إزالة الطفل ( طفل ) ؛
+
+ + + +

لا تزال العقدة الفرعية التي تمت إزالتها موجودة في الذاكرة ، ولكنها لم تعد جزءًا من DOM. مع عرض أول صيغة ، يمكنك إعادة استخدام العقدة التي تمت إزالتها لاحقًا في التعليمات البرمجية ، عبر oldChildمرجع الكائن.

+ +

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

+ +

إذا childلم يكن في الواقع تابع elementللعقدة ، فإن الطريقة تستثني. سيحدث هذا أيضًا إذا childكان في الواقع طفلًا elementفي وقت المكالمة ، ولكن تمت إزالته بواسطة معالج حدث تم استدعاؤه أثناء محاولة إزالة العنصر (على سبيل المثال ، {{Event("blur")}}.)

+ +

ألقيت أخطاء

+ +

تقدم الطريقة استثناءً بطريقتين مختلفتين:

+ +
    +
  1. +

    If the child was in fact a child of element and so existing on the DOM, but was removed the method throws the following exception:

    + +

    Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

    +
    2. +
  2. +

    If the child doesn't exist on the DOM of the page, the method throws the following exception:
    +
    + Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

    +
    3. +
+ +

Examples

+ +

Simple examples

+ +

Given this HTML:

+ +
<div id="top">
+  <div id="nested"></div>
+</div>
+
+ +

To remove a specified element when knowing its parent node:

+ +
let d = document.getElementById("top");
+let d_nested = document.getElementById("nested");
+let throwawayNode = d.removeChild(d_nested);
+
+ +

To remove a specified element without having to specify its parent node:

+ +
let node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+
+ +

To remove all children from an element:

+ +
let element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+
+ +

Causing a TypeError

+ +
<!--Sample HTML code-->
+<div id="top"> </div>
+
+<script type="text/javascript">
+  let top = document.getElementById("top");
+  let nested = document.getElementById("nested");
+
+  // Throws Uncaught TypeError
+  let garbage = top.removeChild(nested);
+</script>
+
+ +

Causing a NotFoundError

+ +
<!--Sample HTML code-->
+<div id="top">
+  <div id="nested"></div>
+</div>
+
+<script type="text/javascript">
+  let top = document.getElementById("top");
+  let nested = document.getElementById("nested");
+
+  // This first call correctly removes the node
+  let garbage = top.removeChild(nested);
+
+  // Throws Uncaught NotFoundError
+  garbage = top.removeChild(nested);
+</script>
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-node-removechild", "Node: removeChild")}}{{Spec2("DOM WHATWG")}}
+ +

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

+ + + +

{{Compat("api.Node.removeChild")}}

+ +

أنظر أيضا

+ + diff --git a/files/ar/web/api/window/alert/index.html b/files/ar/web/api/window/alert/index.html new file mode 100644 index 0000000000..11041a50a9 --- /dev/null +++ b/files/ar/web/api/window/alert/index.html @@ -0,0 +1,77 @@ +--- +title: Window.alert() +slug: Web/API/Window/alert +tags: + - تنبية + - تنبيه + - دالة تنبيه + - مستند HTML + - مصادر + - نافذة +translation_of: Web/API/Window/alert +--- +

{{ APIRef }}

+ +

دالة التنبية ()Window.alert هي وظيفة تقوم بإظهار رسالة مخصصة مع زر حسناً.

+ +

بناء الجملة

+ +
window.alert(message);
+ +

خصائص

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

مثال

+ +
window.alert("مرحبا بالعالم!");
+alert("مرحبا بالعالم!");
+ +

كلاهما ينتج:

+ +

Image:AlertHelloWorld.png

+ +

Notes

+ +

The alert dialog should be used for messages which do not require any response on the part of the user, other than the acknowledgement of the message.

+ +

The following text is shared between this article, DOM:window.prompt and DOM:window.confirm Dialog boxes are modal windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed. For this reason, you should not overuse any function that creates a dialog box (or modal window).

+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-alert', 'alert()')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.Window.alert")}}

+ +

See also

+ + + +
+
+
diff --git a/files/ar/web/api/window/domcontentloaded_event/index.html b/files/ar/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..d585930f1f --- /dev/null +++ b/files/ar/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,72 @@ +--- +title: 'Window: DOMContentLoaded event' +slug: Web/API/Window/DOMContentLoaded_event +translation_of: Web/API/Window/DOMContentLoaded_event +--- +
{{APIRef}}
+ +

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

+ + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableYes (although specified as a simple event that isn't cancelable)
Interface{{domxref("Event")}}
Event handler propertyNone
+ +

The original target for this event is the {{domxref("Document")}} that has loaded. You can listen for this event on the Window interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the Document: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} event.

+ +

A different event, {{domxref("Window/load_event", "load")}}, should be used only to detect a fully-loaded page. It is a common mistake to use load where DOMContentLoaded would be more appropriate.

+ +

Examples

+ +

Basic usage

+ +
window.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM fully loaded and parsed');
+});
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatus
{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.Window.DOMContentLoaded_event")}}

+ +

See also

+ + diff --git a/files/ar/web/api/window/index.html b/files/ar/web/api/window/index.html new file mode 100644 index 0000000000..aedbf1702b --- /dev/null +++ b/files/ar/web/api/window/index.html @@ -0,0 +1,708 @@ +--- +title: Window +slug: Web/API/Window +tags: + - API + - Browser + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - Tab + - TopicStub + - Window + - global + - global scope + - scope +translation_of: Web/API/Window +--- +
{{APIRef("DOM")}}
+ +

The Window interface represents a window containing a {{glossary("DOM")}} document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the {{domxref("document.defaultView")}} property.

+ +

A global variable, window, representing the window in which the script is running, is exposed to JavaScript code.

+ +

The Window interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window. However, the Window interface is a suitable place to include these items that need to be globally available. Many of these are documented in the JavaScript Reference and the DOM Reference.

+ +

In a tabbed browser, each tab is represented by its own Window object; the global window seen by JavaScript code running within a given tab always represents the tab in which the code is running. That said, even in a tabbed browser, some properties and methods still apply to the overall window that contains the tab, such as {{Domxref("Window.resizeTo", "resizeTo()")}} and {{Domxref("Window.innerHeight", "innerHeight")}}. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.

+ +

{{InheritanceDiagram}}

+ +

Constructors

+ +

See also the DOM Interfaces.

+ +
+
{{domxref("DOMParser")}}
+
DOMParser can parse XML or HTML source stored in a string into a DOM Document. DOMParser is specified in DOM Parsing and Serialization.
+
{{domxref("Image")}}
+
Used for creating an {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Used for creating an {{domxref("HTMLOptionElement")}}.
+
{{domxref("StaticRange")}} {{experimental_inline}} {{readonlyinline}}
+
Returns a {{domxref('StaticRange.StaticRange','StaticRange()')}} constructor which creates a {{domxref('StaticRange')}} object.
+
{{domxref("Worker")}}
+
Used for creating a Web worker.
+
{{domxref("XMLSerializer")}}
+
Converts a DOM tree into XML or HTML source.
+
+ +

Properties

+ +

This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.

+ +

Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.

+ +
+
{{domxref("Window.closed")}} {{Non-standard_inline}} {{readOnlyInline}}
+
This property indicates whether the current window is closed or not.
+
{{domxref("Window.console")}} {{ReadOnlyInline}}
+
Returns a reference to the console object which provides access to the browser's debugging console.
+
{{domxref("Window.controllers")}} {{non-standard_inline}} {{ReadOnlyInline}}
+
Returns the XUL controller objects for the current chrome window.
+
{{domxref("Window.customElements")}} {{ReadOnlyInline}}
+
returns a reference to the {{domxref("CustomElementRegistry")}} object, which can be used to register new custom elements and get information about previously registered custom elements.
+
{{domxref("Window.crypto")}} {{readOnlyInline}}
+
Returns the browser crypto object.
+
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}} {{ReadOnlyInline}}
+
Returns the ratio between physical pixels and device independent pixels in the current display.
+
{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}
+
Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.
+
{{domxref("Window.document")}} {{ReadOnlyInline}}
+
Returns a reference to the document that the window contains.
+
{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.
+
{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.
+
{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.
+
{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.
+
{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.
+
{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.
+
{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.
+
{{domxref("Window.event")}} {{ReadOnlyInline}}
+
Returns the current event, which is the event currently being handled by the JavaScript code's context, or undefined if no event is currently being handled. The {{domxref("Event")}} object passed directly to event handlers should be used instead whenever possible.
+
{{domxref("Window.frameElement")}} {{readOnlyInline}}
+
Returns the element in which the window is embedded, or null if the window is not embedded.
+
{{domxref("Window.frames")}} {{readOnlyInline}}
+
Returns an array of the subframes in the current window.
+
{{domxref("Window.fullScreen")}}
+
This property indicates whether the window is displayed in full screen or not.
+
{{domxref("Window.history")}} {{ReadOnlyInline}}
+
Returns a reference to the history object.
+
{{domxref("Window.innerHeight")}} {{readOnlyInline}}
+
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
+
{{domxref("Window.innerWidth")}} {{readOnlyInline}}
+
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
+
{{domxref("Window.isSecureContext")}} {{experimental_inline}} {{readOnlyInline}}
+
Indicates whether a context is capable of using features that require secure contexts.
+
{{domxref("Window.length")}} {{readOnlyInline}}
+
Returns the number of frames in the window. See also {{domxref("window.frames")}}.
+
{{domxref("Window.location")}}
+
Gets/sets the location, or current URL, of the window object.
+
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
+
Returns the locationbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.localStorage")}} {{readOnlyInline}}
+
Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
+
Returns the menubar object, whose visibility can be toggled in the window.
+
{{domxref("Window.messageManager")}}
+
Returns the message manager object for this window.
+
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}}
+
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}
+
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.name")}}
+
Gets/sets the name of the window.
+
{{domxref("Window.navigator")}} {{readOnlyInline}}
+
Returns a reference to the navigator object.
+
{{domxref("Window.opener")}}
+
Returns a reference to the window that opened this current window.
+
{{domxref("Window.orientation")}} {{non-standard_inline}} {{deprecated_inline}} {{readOnlyInline}}
+
Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.
+
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
+
Gets the height of the outside of the browser window.
+
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
+
Gets the width of the outside of the browser window.
+
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+
An alias for {{domxref("window.scrollX")}}.
+
{{domxref("Window.scrollY","Window.pageYOffset")}} {{readOnlyInline}}
+
An alias for {{domxref("window.scrollY")}}
+
{{domxref("Window.parent")}} {{readOnlyInline}}
+
Returns a reference to the parent of the current window or subframe.
+
{{domxref("Window.performance")}} {{readOnlyInline}}
+
Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing performance-related data. See also Using Navigation Timing for additional information and examples.
+
{{domxref("Window.personalbar")}} {{readOnlyInline}}
+
Returns the personalbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.screen")}} {{readOnlyInline}}
+
Returns a reference to the screen object associated with the window.
+
{{domxref("Window.screenX")}} and {{domxref("Window.screenLeft")}} {{readOnlyInline}}
+
Both properties return the horizontal distance from the left border of the user's browser viewport to the left side of the screen.
+
{{domxref("Window.screenY")}} and {{domxref("Window.screenTop")}} {{readOnlyInline}}
+
Both properties return the vertical distance from the top border of the user's browser viewport to the top side of the screen.
+
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
+
Returns the scrollbars object, whose visibility can be toggled in the window.
+
{{domxref("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
+
{{domxref("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
+
{{domxref("Window.scrollX")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled horizontally.
+
{{domxref("Window.scrollY")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled vertically.
+
{{domxref("Window.self")}} {{ReadOnlyInline}}
+
Returns an object reference to the window object itself.
+
{{domxref("Window.sessionStorage")}}
+
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.sidebar")}} {{non-standard_inline}} {{ReadOnlyInline}}
+
Returns a reference to the window object of the sidebar.
+
{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
+
Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using Web Speech API speech synthesis functionality.
+
{{domxref("Window.status")}}
+
Gets/sets the text in the statusbar at the bottom of the browser.
+
{{domxref("Window.statusbar")}} {{readOnlyInline}}
+
Returns the statusbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.toolbar")}} {{readOnlyInline}}
+
Returns the toolbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.top")}} {{readOnlyInline}}
+
Returns a reference to the topmost window in the window hierarchy. This property is read only.
+
{{domxref("Window.visualViewport")}} {{readOnlyInline}}
+
Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.
+
{{domxref("Window.window")}} {{ReadOnlyInline}}
+
Returns a reference to the current window.
+
window[0], window[1], etc.
+
Returns a reference to the window object in the frames. See {{domxref("Window.frames")}} for more details.
+
+ +

Properties implemented from elsewhere

+ +
+
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
+
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.
+
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
Returns a boolean indicating whether the current context is secure (true) or not (false).
+
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)
+
+ +

Obsolete properties

+ +
+
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}} {{ReadOnlyInline}}
+
Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.
+
{{domxref("Window.defaultStatus")}} {{obsolete_inline}}
+
Gets/sets the status bar text for the given window.
+
{{domxref("Window.directories")}} {{obsolete_inline}}
+
Synonym of {{domxref("window.personalbar")}}
+
{{domxref("Window.globalStorage")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Multiple storage objects that were used for storing data across multiple pages.
+
{{domxref("Window.mozAnimationStartTime")}} {{Non-standard_inline}} {{obsolete_inline}}
+
The time in milliseconds since epoch at which the current animation cycle began. Use {{domxref("Animation.startTime")}} instead.
+
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}} {{obsolete_inline}}
+
Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.
+
{{domxref("Window.pkcs11")}} {{obsolete_inline}}
+
Formerly provided access to install and remove PKCS11 modules.
+
{{domxref("Window.returnValue")}} {{obsolete_inline}}
+
The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.
+
+ +

Methods

+ +

This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.

+ +
+
{{domxref("Window.alert()")}}
+
Displays an alert dialog.
+
{{domxref("Window.blur()")}}
+
Sets focus away from the window.
+
{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}
+
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.
+
{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
+
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.
+
{{domxref("Window.clearImmediate()")}}
+
Cancels the repeated execution set using setImmediate.
+
{{domxref("Window.close()")}}
+
Closes the current window.
+
{{domxref("Window.confirm()")}}
+
Displays a dialog with a message that the user needs to respond to.
+
{{domxref("Window.dump()")}} {{Non-standard_inline}}
+
Writes a message to the console.
+
{{domxref("Window.find()")}}
+
Searches for a given string in a window.
+
{{domxref("Window.focus()")}}
+
Sets focus on the current window.
+
{{domxref("Window.getComputedStyle()")}}
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
+
Gets default computed style for the specified element, ignoring author stylesheets.
+
{{domxref("Window.getSelection()")}}
+
Returns the selection object representing the selected item(s).
+
{{domxref("Window.matchMedia()")}}
+
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
+
{{domxref("Window.maximize()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.minimize()")}} (top-level XUL windows only)
+
Minimizes the window.
+
{{domxref("Window.moveBy()")}}
+
Moves the current window by a specified amount.
+
{{domxref("Window.moveTo()")}}
+
Moves the window to the specified coordinates.
+
{{domxref("Window.open()")}}
+
Opens a new window.
+
{{domxref("Window.postMessage()")}}
+
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
+
{{domxref("Window.print()")}}
+
Opens the Print Dialog to print the current document.
+
{{domxref("Window.prompt()")}}
+
Returns the text entered by the user in a prompt dialog.
+
{{domxref("Window.requestAnimationFrame()")}}
+
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.
+
{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}
+
Enables the scheduling of tasks during a browser's idle periods.
+
{{domxref("Window.resizeBy()")}}
+
Resizes the current window by a certain amount.
+
{{domxref("Window.resizeTo()")}}
+
Dynamically resizes window.
+
{{domxref("Window.scroll()")}}
+
Scrolls the window to a particular place in the document.
+
{{domxref("Window.scrollBy()")}}
+
Scrolls the document in the window by the given amount.
+
{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}
+
Scrolls the document by the given number of lines.
+
{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}
+
Scrolls the current document by the specified number of pages.
+
{{domxref("Window.scrollTo()")}}
+
Scrolls to a particular set of coordinates in the document.
+
{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)
+
Changes the cursor for the current window
+
{{domxref("Window.setImmediate()")}}
+
Executes a function after the browser has finished other heavy tasks
+
{{domxref("Window.setResizable()")}} {{Non-standard_inline}}
+
Toggles a user's ability to resize a window.
+
{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}
+
Sizes the window according to its content.
+
{{domxref("Window.stop()")}}
+
This method stops window loading.
+
{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}
+
Updates the state of commands of the current chrome window (UI).
+
+ +

Methods implemented from elsewhere

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Register an event handler to a specific event type on the window.
+
{{domxref("EventTarget.dispatchEvent()")}}
+
Used to trigger an event.
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Starts the process of fetching a resource from the network.
+
{{domxref("EventTarget.removeEventListener")}}
+
Removes an event listener from the window.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Schedules a function to execute every time a given number of milliseconds elapses.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Schedules a function to execute in a given amount of time.
+
+ +

Obsolete methods

+ +
+
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves back one in the window history. This method is obsolete; you should instead use {{domxref("History.back", "window.history.back()")}}.
+
{{domxref("Window.captureEvents()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Registers the window to capture all events of the specified type.
+
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves the window one document forward in the history. This method is obsolete; you should instead use {{domxref("History.forward", "window.history.forward()")}}.
+
{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Flashes the application icon.
+
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Returns the browser to the home page.
+
{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Opens a new dialog window.
+
{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Releases the window from trapping events of a specific type.
+
{{domxref("Window.showModalDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Displays a modal dialog.
+
+ +

Event handlers

+ +

These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.

+ +

This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.

+ +
+

Note: Starting in {{Gecko("9.0")}}, you can now use the syntax if ("onabort" in window) to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See DOM event handlers for details.

+
+ +
+
{{domxref("Window.onappinstalled")}}
+
Called when the page is installed as a webapp. See {{domxref("Window/appinstalled_event", "appinstalled")}} event.
+
{{domxref("Window.onbeforeinstallprompt")}}
+
An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.
+
{{domxref("Window.ondevicelight")}}
+
An event handler property for any ambient light levels changes
+
{{domxref("Window.ondevicemotion")}}
+
Called if accelerometer detects a change (For mobile devices)
+
{{domxref("Window.ondeviceorientation")}}
+
Called when the orientation is changed (For mobile devices)
+
{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}}
+
An event handler property for any device orientation changes.
+
{{domxref("Window.ondeviceproximity")}}
+
An event handler property for device proximity event
+
{{domxref("Window.ongamepadconnected")}}
+
Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).
+
{{domxref("Window.ongamepaddisconnected")}}
+
Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).
+
{{domxref("Window.onmozbeforepaint")}}
+
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
+
{{domxref("Window.onpaint")}}
+
An event handler property for paint events on the window.
+
{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}
+
An event handler for handled {{jsxref("Promise")}} rejection events.
+
{{domxref("Window.onuserproximity")}}
+
An event handler property for user proximity events.
+
{{domxref("Window.onvrdisplayconnect")}}
+
Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).
+
{{domxref("Window.onvrdisplaydisconnect")}}
+
Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).
+
{{domxref("Window.onvrdisplayactivate")}}
+
Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
+
{{domxref("Window.onvrdisplaydeactivate")}}
+
Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
+
{{domxref("Window.onvrdisplayblur")}}
+
Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.
+
{{domxref("Window.onvrdisplayfocus")}}
+
Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).
+
{{domxref("Window.onvrdisplaypresentchange")}}
+
represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).
+
+ +

Event handlers implemented from elsewhere

+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Called when the print dialog box is closed. See {{event("afterprint")}} event.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Called when the print dialog box is opened. See {{event("beforeprint")}} event.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
An event handler property for before-unload events on the window.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Called after the window loses focus, such as due to a popup.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
An event handler property for change events on the window.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Called after the ANY mouse button is pressed & released
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Called when a double click is made with ANY mouse button.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Called after the window is closed
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Called when the RIGHT mouse button is pressed
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Called after the window receives or regains focus. See {{event("focus")}} events.
+
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
+
An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.
+
{{domxref("GlobalEventHandlers.oninput")}}
+
Called when the value of an <input> element changes
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Called when you begin pressing ANY key. See {{event("keydown")}} event.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Called when you finish releasing ANY key. See {{event("keyup")}} event.
+
{{domxref("WindowEventHandlers.onlanguagechange")}}
+
An event handler property for {{event("languagechange")}} events on the window.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Called when ANY mouse button is pressed.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Called continously when the mouse is moved inside the window.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Called when the pointer leaves the window.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Called when the pointer enters the window
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Called when ANY mouse button is released
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Called when network connection is lost. See {{event("offline")}} event.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Called when network connection is established. See {{event("online")}} event.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.
+
{{domxref("WindowEventHandlers.onpopstate")}}
+
Called when a back button is pressed.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Called when a form is reset
+
{{domxref("GlobalEventHandlers.onresize")}}
+
Called continuously as you are resizing the window.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked
+
{{domxref("GlobalEventHandlers.onwheel")}}
+
Called when the mouse wheel is rotated around any axis
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Called after text in an input field is selected
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Called when there is a change in session storage or local storage. See {{event("storage")}} event
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Called when a form is submitted
+
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
+
An event handler for unhandled {{jsxref("Promise")}} rejection events.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Called when the user navigates away from the page.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
{{domxref("Window/error_event", "error")}}
+
Fired when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.
+
{{domxref("Window/languagechange_event", "languagechange")}}
+
Fired at the global scope object when the user's preferred language changes.
+ Also available via the {{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}} property.
+
{{domxref("Window/orientationchange_event", "orientationchange")}}
+
Fired when the orientation of the device has changed.
+ Also available via the {{domxref("Window/onorientationchange", "onorientationchange")}} property.
+
{{domxref("Window/devicemotion_event", "devicemotion")}}
+
Fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if available.
+
{{domxref("Window/deviceorientation_event", "deviceorientation")}}
+
Fired when fresh data is available from the magnetometer orientation sensor about the current orientation of the device as compared to the Earth coordinate frame.
+
{{domxref("Document/defaultView/resize_event", "resize")}}
+
Fired when the window has been resized.
+ Also available via the {{domxref("GlobalEventHandlers/onresize", "onresize")}} property.
+
{{domxref("Document/defaultView/storage_event", "storage")}}
+
Fired when a storage area (localStorage or sessionStorage) has been modified in the context of another document.
+ Also available via the {{domxref("WindowEventHandlers/onstorage", "onstorage")}} property.
+
+ +

Animation events

+ +
+
{{domxref("Window/animationcancel_event", "animationcancel")}}
+
Fired when an animation unexpectedly aborts.
+ Also available via the {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} property.
+
{{domxref("Window/animationend_event", "animationend")}}
+
Fired when an animation has completed normally.
+ Also available via the {{domxref("GlobalEventHandlers/onanimationend", "onanimationend")}} property.
+
{{domxref("Window/animationiteration_event", "animationiteration")}}
+
Fired when an animation iteration has completed.
+ Also available via the {{domxref("GlobalEventHandlers/onanimationiteration", "onanimationiteration")}} property.
+
{{domxref("Window/animationstart_event", "animationstart")}}
+
Fired when an animation starts.
+ Also available via the {{domxref("GlobalEventHandlers/onanimationstart", "onanimationstart")}} property.
+
+ +

Clipboard events

+ +
+
{{domxref("Window/clipboardchange_event", "clipboardchange")}}
+
Fired when the system clipboard content changes.
+
{{domxref("Window/copy_event", "copy")}}
+
Fired when the user initiates a copy action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.
+
{{domxref("Window/cut_event", "cut")}}
+
Fired when the user initiates a cut action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.
+
{{domxref("Window/paste_event", "paste")}}
+
Fired when the user initiates a paste action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.
+
+ +

Connection events

+ +
+
{{domxref("Window/offline_event", "offline")}}
+
Fired when the browser has lost access to the network and the value of navigator.onLine has switched to false.
+ Also available via the {{domxref("WindowEventHandlers.onoffline", "onoffline")}} property.
+
{{domxref("Window/online_event", "online ")}}
+
Fired when the browser has gained access to the network and the value of navigator.onLine has switched to true.
+ Also available via the {{domxref("WindowEventHandlers.ononline", "ononline")}} property.
+
+ +

Focus events

+ +
+
{{domxref("Window/blur_event", "blur")}}
+
Fired when an element has lost focus.
+ Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.
+
{{domxref("Window/focus_event", "focus")}}
+
Fired when an element has gained focus.
+ Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property
+
+ +

Gamepad events

+ +
+
{{domxref("Window/gamepadconnected_event", "gamepadconnected")}}
+
Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.
+ Also available via the {{domxref("Window/ongamepadconnected", "ongamepadconnected")}} property.
+
{{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}}
+
Fired when the browser detects that a gamepad has been disconnected.
+ Also available via the {{domxref("Window/ongamepaddisconnected", "ongamepaddisconnected")}} property
+
+ +

History events

+ +
+
{{domxref("Window/hashchange_event", "hashchange")}}
+
Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the # symbol).
+ Also available via the {{domxref("WindowEventHandlers/onhashchange", "onhashchange")}} property.
+
{{domxref("Window/pagehide_event", "pagehide")}}
+
Sent when the browser hides the current document while in the process of switching to displaying in its place a different document from the session's history. This happens, for example, when the user clicks the Back button or when they click the Forward button to move ahead in session history.
+ Also available through the onpagehide event handler property.
+
{{domxref("Window/pageshow_event", "pageshow")}}
+
Sent when the browser makes the document visible due to navigation tasks, including not only when the page is first loaded, but also situations such as the user navigating back to the page after having navigated to another within the same tab.
+ Also available using the onpageshow event handler property.
+
{{domxref("Document/defaultView/popstate_event", "popstate")}}
+
Fired when the active history entry changes.
+ Also available using the {{domxref("WindowEventHandlers/onpopstate", "onpopstate")}} event handler property.
+
+ +

Load & unload events

+ +
+
{{domxref("Window/beforeunload_event", "beforeunload")}}
+
Fired when the window, the document and its resources are about to be unloaded.
+ Also available via the {{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}} property.
+
{{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}
+
Fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
+
{{domxref("Window/load_event", "load")}}
+
Fired when the whole page has loaded, including all dependent resources such as stylesheets images.
+ Also available via the {{domxref("GlobalEventHandlers/onload", "onload")}} property.
+
{{domxref("Window/unload_event", "unload")}}
+
Fired when the document or a child resource is being unloaded.
+ Also available via the {{domxref("WindowEventHandlers/onunload", "onunload")}} property.
+
+ +

Manifest events

+ +
+
{{domxref("Window/appinstalled_event", "appinstalled")}}
+
Fired when the browser has successfully installed a page as an application.
+ Also available via the {{domxref("Window/onappinstalled", "onappinstalled")}} property.
+
{{domxref("Window/beforeinstallprompt_event", "beforeinstallprompt")}}
+
Fired when a user is about to be prompted to install a web application.
+ Also available via the {{domxref("Window/onbeforeinstallprompt", "onbeforeinstallprompt")}} property.
+
+ +

Messaging events

+ +
+
{{domxref("Window/message_event", "message")}}
+
Fired when the window receives a message, for example from a call to {{domxref("Window/postMessage", "Window.postMessage()")}} from another browsing context.
+ Also available via the {{domxref("WindowEventHandlers/onmessage", "onmessage")}} property.
+
{{domxref("Window/messageerror_event", "messageerror")}}
+
Fired when a Window object receives a message that can't be deserialized.
+ Also available via the {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} property.
+
+ + + +
+
{{domxref("Window/afterprint_event", "afterprint")}}
+
Fired after the associated document has started printing or the print preview has been closed.
+ Also available via the {{domxref("WindowEventHandlers/onafterprint", "onafterprint")}} property.
+
{{domxref("Window/beforeprint_event", "beforeprint")}}
+
Fired when the associated document is about to be printed or previewed for printing.
+ Also available via the {{domxref("WindowEventHandlers/onbeforeprint", "onbeforeprint")}} property.
+
+ +

Promise rejection events

+ +
+
{{domxref("Window/rejectionhandled_event", "rejectionhandled")}}
+
Sent every time a JavaScript {{jsxref("Promise")}} is rejected, regardless of whether or not there is a handler in place to catch the rejection.
+ Also available through the {{domxref("WindowEventHandlers/onrejectionhandled", "onrejectionhandled")}} event handler property.
+
{{domxref("Window/unhandledrejection_event", "unhandledrejection")}}
+
Sent when a JavaScript {{jsxref("Promise")}} is rejected but there is no handler in place to catch the rejection.
+ Also available using the {{domxref("WindowEventHandlers/onunhandledrejection", "onunhandledrejection")}} event handler property.
+
+ +

Transition events

+ +
+
{{domxref("Window/transitioncancel_event", "transitioncancel")}}
+
Fired when a CSS transition is canceled.
+ Also available via the {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitioncancel")}} property.
+
{{domxref("Window/transitionend_event", "transitionend")}}
+
Fired when a CSS transition has completed.
+ Also available via the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} property.
+
{{domxref("Window/transitionrun_event", "transitionrun")}}
+
Fired when a CSS transition is first created.
+ Also available via the {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} property.
+
{{domxref("Window/transitionstart_event", "transitionstart")}}
+
Fired when a CSS transition has actually started.
+ Also available via the {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} property.
+
+ +

WebVR events

+ +
+
{{domxref("Window/vrdisplayactivate_event", "vrdisplayactivate")}}
+
Fired when a VR display becomes available to be presented to, for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
+ Also available via the {{domxref("Window/onvrdisplayactivate", "onvrdisplayactivate")}} property.
+
{{domxref("Window/vrdisplayblur_event", "vrdisplayblur")}}
+
Fired when presentation to a VR display has been paused for some reason by the browser, OS, or VR hardware.
+ Also available via the {{domxref("Window/onvrdisplayblur", "onvrdisplayblur")}} property.
+
{{domxref("Window/vrdisplayconnect_event", "vrdisplayconnect")}}
+
Fired when a compatible VR display is connected to the computer.
+ Also available via the {{domxref("Window/onvrdisplayconnect", "onvrdisplayconnect")}} property.
+
{{domxref("Window/vrdisplaydeactivate_event", "vrdisplaydeactivate")}}
+
Fired when a VR display can no longer be presented to, for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
+ Also available via the {{domxref("Window/onvrdisplaydeactivate", "onvrdisplaydeactivate")}} property.
+
{{domxref("Window/vrdisplaydisconnect_event", "vrdisplaydisconnect")}}
+
Fired when a compatible VR display is disconnected from the computer.
+ Also available via the {{domxref("Window/onvrdisplaydisconnect", "onvrdisplaydisconnect")}} property.
+
{{domxref("Window/vrdisplayfocus_event", "vrdisplayfocus")}}
+
Fired when presentation to a VR display has resumed after being blurred.
+ Also available via the {{domxref("Window/onvrdisplayfocus", "onvrdisplayfocus")}} property.
+
{{domxref("Window/vrdisplaypresentchange_event", "vrdisplaypresentchange")}}
+
Fired when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.
+ Also available via the {{domxref("Window/onvrdisplaypresentchange", "onvrdisplaypresentchange")}} property.
+
{{domxref("Window/vrdisplaypointerrestricted_event", "vrdisplaypointerrestricted")}}
+
Fired when the VR display's pointer input is restricted to consumption via a pointerlocked element.
+ Also available via the {{domxref("Window/onvrdisplaypointerrestricted", "onvrdisplaypointerrestricted")}} property.
+
{{domxref("Window/vrdisplaypointerunrestricted_event", "vrdisplaypointerunrestricted")}}
+
Fired when the VR display's pointer input is no longer restricted to consumption via a pointerlocked element.
+ Also available via the {{domxref("Window/onvrdisplaypointerunrestricted", "onvrdisplaypointerunrestricted")}} property.
+
+ +

Interfaces

+ +

See DOM Reference.

+ +

Browser compatibility

+ + + +

{{Compat("api.Window")}}

diff --git a/files/ar/web/api/xsltprocessor/basic_example/index.html b/files/ar/web/api/xsltprocessor/basic_example/index.html new file mode 100644 index 0000000000..19e3b75c8f --- /dev/null +++ b/files/ar/web/api/xsltprocessor/basic_example/index.html @@ -0,0 +1,57 @@ +--- +title: مثال XSLT أساسي +slug: Web/API/XSLTProcessor/Basic_Example +tags: + - XSLT + - xsl +translation_of: Web/API/XSLTProcessor/Basic_Example +--- +

مثال أساسي

+ +

يوضح المثال الأول أساسيات تفعيل محول XSLT في المتصفح. سوف يقوم المثال على ملف XML يحتوي على معلومات (العنوان - قائمة المؤلفين - المحتوى) عن مقال. ثم يقوم بعرضه بهيئة صالحة للقراءة.

+ +

يبين الشكل ١ مثال على شكل ملف المصدر الأساسي لـ XSLT. يحتوي ملف XML  (example.xml) على معلومات حول المقال. وباستخدام أمر المعالجة ?xml-stylesheet? يتم ربط ملف example.xml بملف XSLT عن طريق صفة href.

+ +

تبدأ صحيفة أنماط XSLT بالمكون xsl:stylesheet الذي يحوي كل القوالب المستخدمة في إنشاء المُخرَج المطلوب. يحتوي المثال في الشكل ١ على قالبين، أحدهما يُطَبَّق على عقدة التَفَرُّع الرئيسية والآخر يُطَبَّق على عقدة Author. يقوم القالب الذي يُطَبَّق على عقدة التَفَرُّع الرئيسية بإخراج عنوان المقال، ثم يقوم بعدها باستدعاء باقي القوالب (عن طريق apply-templates) التي تطابق عقدة Author وتكون فرعية عنها.

+ +

الشكل ١: مثال XSLT بسيط

+ +

ملف XML (example.xml):

+ +
<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="example.xsl"?>
+<Article>
+  <Title>مقالي</Title>
+  <Authors>
+    <Author>السيد أحمد</Author>
+    <Author>السيد محمد</Author>
+  </Authors>
+  <Body>هنا محتوي مقالي.</Body>
+</Article>
+ +

صحيفة أنماط XSL (example.xsl):

+ +
<?xml version="1.0"?>
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+
+  <xsl:output method="text"/>
+
+  <xsl:template match="/">
+    Article - <xsl:value-of select="/Article/Title"/>
+    Authors: <xsl:apply-templates select="/Article/Authors/Author"/>
+  </xsl:template>
+
+  <xsl:template match="Author">
+    - <xsl:value-of select="." />
+  </xsl:template>
+
+</xsl:stylesheet>
+ +

مُخرَج المتصفح:

+ +
+

مقال - مقالي
+ المؤلفون:
+ - السيد أحمد
+ - السيد محمد

+
diff --git a/files/ar/web/api/xsltprocessor/index.html b/files/ar/web/api/xsltprocessor/index.html new file mode 100644 index 0000000000..dbc44795da --- /dev/null +++ b/files/ar/web/api/xsltprocessor/index.html @@ -0,0 +1,138 @@ +--- +title: XSLTProcessor +slug: Web/API/XSLTProcessor +tags: + - API + - DOM + - DOM Reference + - NeedsTranslation + - Reference + - TopicStub + - XSLT +translation_of: Web/API/XSLTProcessor +--- +
{{Non-standard_header}}{{SeeCompatTable}}{{APIRef("XSLT")}}
+ +

An XSLTProcessor applies an XSLT stylesheet transformation to an XML document to produce a new XML document as output. It has methods to load the XSLT stylesheet, to manipulate <xsl:param> parameter values, and to apply the transformation to documents.

+ +

Syntax

+ +

The constructor has no parameters.

+ +
new XSLTProcessor()
+ +

Methods

+ +
+
[Throws] void {{domxref("XSLTProcessor.importStylesheet")}}({{domxref("Node")}} styleSheet)
+
Imports the XSLT stylesheet. If the given node is a document node, you can pass in a full XSL Transform or a literal result element transform; otherwise, it must be an <xsl:stylesheet> or <xsl:transform> element.
+
[Throws] {{domxref("DocumentFragment")}} {{domxref("XSLTProcessor.transformToFragment")}}({{domxref("Node")}} source, {{domxref("Document")}} owner)
+
Transforms the node source by applying the stylesheet imported using the {{domxref("XSLTProcessor.importStylesheet()")}} function. The owner document of the resulting document fragment is the owner node.
+
[Throws] {{domxref("Document")}} {{domxref("XSLTProcessor.transformToDocument")}}({{domxref("Node")}} source)
+
+

Transforms the node source applying the stylesheet given importing using the {{domxref("XSLTProcessor.importStylesheet()")}} function.

+ +

The resultant object depends on the output method of the stylesheet:

+ + + + + + + + + + + + + + + + + + + + + + +
Output methodResult type
html{{domxref("HTMLDocument")}}
xml{{domxref("XMLDocument")}}
text{{domxref("XMLDocument")}} with a single root element <transformiix:result> with the text as a child
+
+
[Throws] void {{domxref("XSLTProcessor.setParameter")}}({{jsxref("String")}} namespaceURI, {{jsxref("String")}} localName, any value)
+
Sets a parameter in the XSLT stylesheet that was imported. (Sets the value of an <xsl:param>.) A null value for namespaceURI is treated the same as an empty string.
+
[Throws] any {{domxref("XSLTProcessor.getParameter")}}({{jsxref("String")}} namespaceURI, {{jsxref("String")}} localName)
+
Gets the value of a parameter from the XSLT stylesheet. A null value for namespaceURI is treated the same as an empty string.
+
[Throws] void {{domxref("XSLTProcessor.removeParameter")}}({{jsxref("String")}} namespaceURI, {{jsxref("String")}} localName)
+
Removes the parameter if it was previously set. This will make the XSLTProcessor use the default value for the parameter as specified in the stylesheet. A null value for namespaceURI is treated the same as an empty string.
+
void {{domxref("XSLTProcessor.clearParameters()")}}
+
Removes all set parameters from the XSLTProcessor. The XSLTProcessor will then use the defaults specified in the XSLT stylesheet.
+
void {{domxref("XSLTProcessor.reset()")}}
+
Removes all parameters and stylesheets from the XSLTProcessor.
+
+ +

Properties

+ +

Non-Web-exposed properties

+ +

The following properties are [ChromeOnly] and not exposed to Web content:

+ +
+
[ChromeOnly] attribute unsigned long {{domxref("XSLTProcessor.flags")}}
+
+

Flags that tweak the behavior of the processor. Not reset by calling {{domxref("XSLTProcessor.reset()")}}. Default value: 0

+ +

Possible values are:

+ + + + + + + + + + + + + + + + + + + + + +
NameValueEffect
(None)0None
DISABLE_ALL_LOADS1Disable loading external documents (via e.g. <xsl:import> and document())
+
+
+ +

Examples

+ +
    +
  1. Basic example
    2. +
  2. Advanced example
    3. +
  3. Additional example
    4. +
+ +

Specifications

+ +

Not part of any specification. This is a proprietary interface that originated in Gecko.

+ +

Gecko IDL

+ + + +

Browser compatibility

+ + + +

{{Compat("api.XSLTProcessor")}}

+ +

See also

+ + diff --git a/files/ar/web/css/align-content/index.html b/files/ar/web/css/align-content/index.html new file mode 100644 index 0000000000..f3c5002b96 --- /dev/null +++ b/files/ar/web/css/align-content/index.html @@ -0,0 +1,294 @@ +--- +title: align-content +slug: Web/CSS/align-content +translation_of: Web/CSS/align-content +--- +

تحدد خاصية align-content CSS توزيع المساحة بين و حول محتوى العناصر على طول المحور العرضي لـ flexbox أو محور كتلة الشبكة.

+ +

The interactive example below use Grid Layout to demonstrate some of the values of this property.

+ +
{{EmbedInteractiveExample("pages/css/align-content.html")}}
+ + + +

This property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap).

+ +

Syntax

+ +
/* Basic positional alignment */
+/* align-content does not take left and right values */
+align-content: center;     /* Pack items around the center */
+align-content: start;      /* Pack items from the start */
+align-content: end;        /* Pack items from the end */
+align-content: flex-start; /* Pack flex items from the start */
+align-content: flex-end;   /* Pack flex items from the end */
+
+/* Normal alignment */
+align-content: normal;
+
+/* Baseline alignment */
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* Distributed alignment */
+align-content: space-between; /* Distribute items evenly
+                                 The first item is flush with the start,
+                                 the last is flush with the end */
+align-content: space-around;  /* Distribute items evenly
+                                 Items have a half-size space
+                                 on either end */
+align-content: space-evenly;  /* Distribute items evenly
+                                 Items have equal space around them */
+align-content: stretch;       /* Distribute items evenly
+                                 Stretch 'auto'-sized items to fit
+                                 the container */
+
+/* Overflow alignment */
+align-content: safe center;
+align-content: unsafe center;
+
+/* Global values */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+
+ +

Values

+ +
+
start
+
The items are packed flush to each other against the start edge of the alignment container in the cross axis.
+
end
+
The items are packed flush to each other against the end edge of the alignment container in the cross axis.
+
flex-start
+
The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-start side.
+ This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start.
+
flex-end
+
The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-end side.
+ This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.
+
center
+
The items are packed flush to each other in the center of the alignment container along the cross axis.
+
normal
+
The items are packed in their default position as if no align-content value was set.
+
baseline
+ first baseline
+ last baseline
+
the baseline is the line upon which most letters "sit" and below which descenders extend.
+
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+ The fallback alignment for first baseline is start, the one for last baseline is end.
+
space-between
+
The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the start edge of the alignment container in the cross axis, and the last item is flush with the end edge of the alignment container in the cross axis.
+
space-around
+
The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
+
space-evenly
+
The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items, the start edge and the first item, and the end edge and the last item, are all exactly the same.
+
stretch
+
If the combined size of the items along the cross axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}/{{cssxref("max-width")}} (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis.
+
safe
+
Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.
+
unsafe
+
Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.
+
+ +

Formal definition

+ +

{{CSSInfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  align-content: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div > div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+
+ +

HTML

+ +
<div id="container" class="flex">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+  <div id="item4">4</div>
+  <div id="item5">5</div>
+  <div id="item6">6</div>
+</div>
+
+<div class="row">
+  <label for="display">display: </label>
+  <select id="display">
+    <option value="flex">flex</option>
+    <option value="grid">grid</option>
+  </select>
+</div>
+
+<div class="row">
+  <label for="values">align-content: </label>
+  <select id="values">
+    <option value="normal">normal</option>
+    <option value="stretch">stretch</option>
+    <option value="flex-start">flex-start</option>
+    <option value="flex-end">flex-end</option>
+    <option value="center" selected>center</option>
+    <option value="space-between">space-between</option>
+    <option value="space-around">space-around</option>
+    <option value="space-evenly">space-evenly</option>
+
+    <option value="start">start</option>
+    <option value="end">end</option>
+    <option value="left">left</option>
+    <option value="right">right</option>
+
+    <option value="baseline">baseline</option>
+    <option value="first baseline">first baseline</option>
+    <option value="last baseline">last baseline</option>
+
+    <option value="safe center">safe center</option>
+    <option value="unsafe center">unsafe center</option>
+    <option value="safe right">safe right</option>
+    <option value="unsafe right">unsafe right</option>
+    <option value="safe end">safe end</option>
+    <option value="unsafe end">unsafe end</option>
+    <option value="safe flex-end">safe flex-end</option>
+    <option value="unsafe flex-end">unsafe flex-end</option>
+  </select>
+</div>
+
+ + + +

Result

+ +

{{EmbedLiveSample("Examples", 260, 290)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}{{Spec2("CSS3 Box Alignment")}}Adds the [ first | last ]? baseline, start, end, left, right, unsafe | safe values.
{{SpecName("CSS3 Flexbox", "#align-content-property", "align-content")}}{{Spec2("CSS3 Flexbox")}}Initial definition
+ +
{{cssinfo}}
+ +

Browser compatibility

+ +
+ + +

Support in Flex layout

+ +

{{Compat("css.properties.align-content.flex_context")}}

+ +

Support in Grid layout

+ +

{{Compat("css.properties.align-content.grid_context")}}

+
+ +

See also

+ + + +
{{CSSRef}}
diff --git a/files/ar/web/css/attribute_selectors/index.html b/files/ar/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..cc06083b09 --- /dev/null +++ b/files/ar/web/css/attribute_selectors/index.html @@ -0,0 +1,199 @@ +--- +title: Attribute selectors +slug: Web/CSS/Attribute_selectors +tags: + - Attribute + - Attribute selectors + - CSS + - CSS 3 + - CSS 3 Attribute selectors + - CSS Attributes + - Identifying Elements + - Identifying Nodes + - Selecting Elements + - Selectors + - محدد الخاصية + - محددات +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

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

+ +
/* <a> elements with a title attribute */
+a[title] {
+  color: purple;
+}
+
+/* <a> elements with an href matching "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* <a> elements with an href containing "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* <a> elements with an href ending ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+ +
+
[attr]
+
يمثل عناصر ذات اسم خاصية attr.
+
[attr=value]
+
يمثل العناصر التي تحتوي على اسم خاصية attr التي قيمتها هي ذات القيمة بالضبط.
+
[attr~=value]
+
يمثل العناصر التي تحتوي على اسم خاصية attr التي تكون قيمتها قائمة كلمات مفصولة بمسافات بيضاء ، واحدة منها هي القيمة بالضبط.
+
[attr|=value]
+
يمثل عناصر ذات اسم خاصية attr يمكن أن تكون قيمتها ذات قيمة بالضبط أو يمكن أن تبدأ بالقيمة مباشرة متبوعة بواصلة ، - (U + 002D).
+
وغالبًا ما يتم استخدامه لمطابقة اللغة الفرعية.
+
[attr^=value]
+
يمثل عناصر ذات اسم خاصية attr التي تكون قيمتة تماثل اول القيمة
+
(يبحث عن تماثل في بداية القيمة).
+
[attr$=value]
+
يمثل العناصر ذا اسم الخاصية attr التي تكون قيمته تماثل آخر القيمة
+
(يبحث عن تماثل في نهاية القيمة)
+
[attr*=value]
+
يمثل عناصر ذات اسم خاصية attr تحتوي قيمتها على تواجد واحد على الأقل للقيمة
+
داخل قيمة الخاصية.
+
[attr operator value i]
+
تؤدي إضافة حرف (i) أو (I) قبل قوس الإغلاق إلى مقارنة القيمة بحالة غير حساسة  (للأحرف ضمن نطاق ASCII).
+
+ +

أمثلة

+ +

روابط

+ +

CSS

+ +
a {
+  color: blue;
+}
+
+/*  "#" الروابط الداخلية ، تبدأ بـ*/
+a[href^="#"] {
+  background-color: gold;
+}
+
+/*  URL روابط مع "example" في أي مكان في عنوان */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* URL روابط "غير حساسة" في أي مكان في عنوان ،
+    بغض النظر عن الكتابة بحرف كبير*/
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* ".org"الروابط التي تنتهي بـ  */
+a[href$=".org"] {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Internal link</a></li>
+  <li><a href="http://example.com">Example link</a></li>
+  <li><a href="#InSensitive">Insensitive internal link</a></li>
+  <li><a href="http://example.org">Example org link</a></li>
+</ul>
+ +

Result

+ +

{{EmbedLiveSample('Links')}}

+ +

لغات

+ +

CSS

+ +
/* All divs with a `lang` attribute are bold. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* All divs in US English are blue. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* All divs in Portuguese are green. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* All divs in Chinese are red, whether
+   simplified (zh-CN) or traditional (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* All divs with a Traditional Chinese
+   `data-lang` are purple. */
+/* Note: You could also use hyphenated attributes
+   without double quotes */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">?世界您好！</div>
+
+ +

Result

+ +

{{EmbedLiveSample('Languages')}}

+ +

مواصفات

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
مواصفات الحالةتعليق
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}يضيف المعدل ل ASCII اختيار قيمة خاصية غير حساسة لحالة الأحرف
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}التعريف الأولي
+ +

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

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

See also

+ + diff --git a/files/ar/web/css/css_flexible_box_layout/index.html b/files/ar/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..9cb25b5221 --- /dev/null +++ b/files/ar/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,119 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - NeedsTranslation + - Overview + - Reference + - TopicStub + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +
{{CSSRef}}
+ +

CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

+ +

Basic Example

+ +

In the following example a container has been set to display: flex, which means that the three child items become flex items. The value of justify-content has been set to space-between in order to space the items out evenly on the main axis. An equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. You can also see that the items are stretching on the cross axis, due to the default value of align-items being stretch. The items stretch to the height of the flex container, making them each appear as tall as the tallest item.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

Alignment Properties

+ +

The properties align-content, align-self, align-items and justify-content initially appeared in the Flexbox specification, but are now defined in Box Alignment. The Flexbox spec now refers to the Box Alignment specification for up to date definitions. Also additional alignment properties are now defined in Box Alignment.

+ +
+ +
+ +

Glossary entries

+ +
+ +
+ +

Guides

+ +
+
Basic Concepts of Flexbox
+
An overview of the features of Flexbox
+
Relationship of Flexbox to other layout methods
+
How Flexbox relates to other layout methods, and other CSS specifications
+
Aligning items in a flex container
+
How the Box Alignment properties work with Flexbox.
+
Ordering flex items
+
Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.
+
Controlling Ratios of flex items along the main axis
+
Explaining the flex-grow, flex-shrink and flex-basis properties.
+
Mastering wrapping of flex items
+
How to create flex containers with multiple lines and control the display of the items in those lines.
+
Typical use cases of Flexbox
+
Common design patterns that are typical Flexbox use cases.
+
Backwards compatibility of Flexbox
+
Browser status of Flexbox, interoperability issues and supporting older browsers and versions of the spec
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.
+ +

See also

+ +
+
Flexbugs
+
a community-curated list of Flexbox browser bugs and workarounds
+
Cross-browser Flexbox mixins
+
This article provides a set of mixins for those who want to create cross-browser Flexbox experiences that even work in older browser that don't support the modern Flexbox syntax
+
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" new file mode 100644 index 0000000000..c30338c62b --- /dev/null +++ "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" @@ -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  ، والتي لديها اربع قيم ممكنة هي:

+ + + +

هل تختار الصف او الصف المعكوس؟ سيشتغل المحور الاساسي في اتجاه مضمَن مع الصف.

+ +

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.

+ + + +

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:

+ + + +

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:

+ + + +

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:

+ + + +

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

+ + + +

{{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/index.html b/files/ar/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..5509e745fa --- /dev/null +++ b/files/ar/web/css/css_grid_layout/index.html @@ -0,0 +1,253 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - Grid Layout + - Grids + - Layout + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Grid_Layout +--- +

CSS Grid Layout  أو شبكة تخطيط الصفحة هو مخطط لترتيب الصفحة و تصنيف العناصر الرئيسية أو الاختلافات من حيث الحجم أو الموضع أو الطبقة

+ +

Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

+ +

Basic example

+ +

The example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.

+ +
+ + +

HTML

+ +
<div class="wrapper">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+  <div class="five">Five</div>
+  <div class="six">Six</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+
+ +

{{ EmbedLiveSample('example', '500', '440') }}

+
+ +

Reference

+ +

CSS properties

+ +
+ +
+ +

CSS functions

+ +
+ +
+ +

CSS data types

+ +
+ +
+ +

Glossary entries

+ +
+ +
+ +

Guides

+ +
+ +
+ +

External resources

+ + + +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.
+ + 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 new file mode 100644 index 0000000000..7ccf10282f --- /dev/null +++ b/files/ar/web/css/css_grid_layout/relationship_of_grid_layout_arabic/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_writing_modes/index.html b/files/ar/web/css/css_writing_modes/index.html new file mode 100644 index 0000000000..7bfa9822b4 --- /dev/null +++ b/files/ar/web/css/css_writing_modes/index.html @@ -0,0 +1,106 @@ +--- +title: CSS Writing Modes +slug: Web/CSS/CSS_Writing_Modes +translation_of: Web/CSS/CSS_Writing_Modes +--- +
{{CSSRef}}
+ +

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

+ +

Reference

+ +

Properties

+ +
+ +
+ +

Guides

+ +

None.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Writing Modes')}}{{Spec2('CSS3 Writing Modes')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop(1.0)}}33.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0 (85)
+
diff --git a/files/ar/web/css/index.html b/files/ar/web/css/index.html new file mode 100644 index 0000000000..34e33dcf4f --- /dev/null +++ b/files/ar/web/css/index.html @@ -0,0 +1,91 @@ +--- +title: صفحات الأنماط الانسيابية +slug: Web/CSS +tags: + - CSS + - صفحات الأنماط الانسيابية + - صفحة هبوط + - مرجع +translation_of: Web/CSS +--- +

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

+ +

صفحات الأنماط الانسيابية هي أحد اللغات الأساسيّة للويب المفتوح، وهي لغة قياسيّة في جميع المتصفحات بناءً على معايير W3C. طوِّرت هذه اللغة في عدة إصدارا، الأول الآن مهجور، الثاني (2.1) موصى به، و الثالث، هو الآن منقسم إلى عدة وحدات، وهذا الإصدار على طريقه لصبح قياسياً في جميع المتصفحات.

+ +
+ + +
+
+

دورات

+ +

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

+ +
+
مقدمة في صفحات الأنماط الانسيابية
+
تبدأ هذه الوحدة معك بأساسيات عمل هذه التقنيّة، متضمنةً معلومات عن المحددات (selectors) الخواص (properties)، كتابة التعليمات، تطبيق التنسيقات المجراة على صفحة لغة ترميز النص الفائق، كيفيّة تحديد الطول واللون وأمور أخرى، التتالي (cascade)، الوراثة (inheritance)، أساسيات نموذج الصندوق (box model)، والتنقيح (debugging).
+
تنسيق النصوص
+
تحتوي هذه المقالة على شرح لأساسيات تنسيق النصوص. تتضمن المقالة أيضاً إعداد الخطوط الغامقة والمائلة، المسافات بين الحروف والسطور، الظلال، وغيرها من خواص النصوص. ننهي المقالة بشرح كيفيّة إضافة خطوط مخصصة لصفحتك، وتنسيق القوائم والروابط.
+
صناديق التصميم
+
سنأخذ في هذه الوحدة نظرة على صناديق التصميم (styling boxes)، والتي تعد واحدة من الخطوات الأساسيّة نحو تنظيم صفحة الويب. في هذه المقالة سنلخص نموذج الصندوق (box model)، وبعدها سنأخذ نظرة حول التحكم بنماذج الصندوق عن طريق إعداد الحشو (margin)، الحواف (border) الهوامش (padding)، وإعداد لون خلفية مخصصة، والصور وغيرها من الميزات. كما تشرح المقالة ميزات زخرفيّة، مثل استخدام الظلال (shadows) والمرشحات (filters) على الصناديق.
+
النماذج
+
في هذه المرحلة سنكون قد أخذنا نظرة حول أساسيات صفحات الأنماط الانسيابية، بدءً من كيفيّة تنسيق النصوص، إلى تنسيق والتلاعب بالصناديق التي يوجد بها محتواك. الآن حان الوقت لأخذ نظرة حول كيفيّة وضع صناديقك في المكان المناسب. قد غطينا في هذه المقالة المتطلبات الضروريّة اللازمة حتّى تتمكن من الغوص في عالم النمذجة (layout)، وتتمكن من تعلم إعدادات العرض المختلفة، وطرق النمذجة التقليديّة والتي تنطوي على التعويم (float)، التعيين (positioning)، وأدوات التخطيط الجديدة مثل الصندوق المرن (flexbox).
+
+
+ +
+

مراجع

+ + + +

أدوات تطوير

+ + + +

علل

+ +
    +
  • : {{bug(1323667)}}
    • +
+
+
+
+ +

انظر أيضاً

+ + diff --git a/files/ar/web/css/order/index.html b/files/ar/web/css/order/index.html new file mode 100644 index 0000000000..918eb9016a --- /dev/null +++ b/files/ar/web/css/order/index.html @@ -0,0 +1,108 @@ +--- +title: order +slug: Web/CSS/order +translation_of: Web/CSS/order +--- +
{{CSSRef}}
+ +

order عبارة عن خاصية CSS تضع الترتيب كقالب مرن او شبكة. العناصر في القالب تخزن بشكل تصاعدي القيمة و من ثم حسب ترتيب الكود المصدري.

+ +
{{EmbedInteractiveExample("pages/css/order.html")}}
+ + + +

النحو

+ +
/* <integer> values */
+order: 5;
+order: -5;
+
+/* Global values */
+order: inherit;
+order: initial;
+order: unset;
+ +
+

Note: order is only meant to affect the visual order of elements and not their logical or tab order. order must not be used on non-visual media such as speech.

+
+ +

القيم

+ +
+
{{cssxref("<integer>")}}
+
تمثل المجموعة المرتبة ليستخدمه العنصر
+
+ +

الصيغة النحوية

+ +
{{csssyntax}}
+ +

مثال

+ +

هنا مثال اساسي ل html chunk:

+ +
<header>...</header>
+<main>
+  <article>Article</article>
+  <nav>Nav</nav>
+  <aside>Aside</aside>
+</main>
+<footer>...</footer>
+
+ +

كود الcss التالي ينشأ زوجي sidebar كلاسيكي  الشكل  محيط بمحتوى الblock.نموذج تصميم الصندوق المرن يشكل blocks متساوي الحجم بشكل عمودي و يستخدم مساحة افقية حسب الامكانية.

+ +
main { display: flex;  text-align:center; }
+main > article { flex:1;        order: 2; }
+main > nav     { width: 200px;  order: 1; }
+main > aside   { width: 200px;  order: 3; }
+ +

النتيجة

+ +

{{ EmbedLiveSample('Example') }}

+ +

هواجز الوصول

+ +

استخدام خاصية الorder سينشأ فصل اتصال بين العرض المرئي للمحتوى  و ترتيب ال DOM. هذا سيؤثر عكسيا على تجربة المستخدمين ذي الرؤية المنخفضة للتصفح مع مساعدة التقنيات المساعدة مثل قارئ الشاشة. اذا كان ترتيب ال(CSS) المرئي مهم, اذاً لن يكون لمستخدمي قارئ الشاشة وصصول لقراءة الترتيب الصحيح.

+ + + +

مواصفات

+ + + + + + + + + + + + + + + + +
المواصفةالحالةالتعليق
{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

{{cssinfo}}

+ +

ملائمة المتصفح

+ + + +

{{Compat("css.properties.order")}}

+ +

انظر ايضا

+ + diff --git a/files/ar/web/css/pointer-events/index.html b/files/ar/web/css/pointer-events/index.html new file mode 100644 index 0000000000..7974b501d6 --- /dev/null +++ b/files/ar/web/css/pointer-events/index.html @@ -0,0 +1,148 @@ +--- +title: pointer-events +slug: Web/CSS/pointer-events +translation_of: Web/CSS/pointer-events +--- +
{{CSSRef}}
+ +

و CSS مجموعات الممتلكات تحت أي ظرف من الظروف (إن وجدت) لعنصر رسومي معين يمكن أن تصبح الهدف من الأحداث المؤشر. pointer-events

+ +
{{EmbedInteractiveExample("pages/css/pointer-events.html")}}
+ + + + +

عندما تكون هذه الخاصية غير محددة ، visiblePaintedتنطبق نفس خصائص القيمة على محتوى SVG.

+ +

بالإضافة إلى الإشارة إلى أن العنصر ليس هدفًا لأحداث المؤشر ، noneترشد القيمة حدث المؤشر إلى "استعراض" العنصر والهدف مهما كان "أسفل" هذا العنصر بدلاً من ذلك.

+ +

بناء الجملة

+ +
/ * قيم الكلمات الرئيسية * /
+أحداث مؤشر: السيارات.
+أحداث المؤشر: لا شيء ؛
+أحداث المؤشر: visualPainted؛ / * SVG فقط * /
+أحداث المؤشر: visualFill؛ / * SVG فقط * /
+أحداث المؤشر: visualStroke؛ / * SVG فقط * /
+أحداث مؤشر: مرئية. / * SVG فقط * /
+أحداث المؤشر: رسمت. / * SVG فقط * /
+أحداث المؤشر: ملء ؛ / * SVG فقط * /
+أحداث مؤشر: السكتة الدماغية. / * SVG فقط * /
+أحداث المؤشر: جميع ؛ / * SVG فقط * /
+
+/ * القيم العالمية * /
+أحداث المؤشر: ترث.
+أحداث المؤشر: الأولي ؛
+أحداث المؤشر: unset؛
+
+ +

و pointer-eventsيتم تحديد الممتلكات، كلمة رئيسية واحدة اختياره من قائمة القيم أدناه.

+ +

القيم

+ +
+
auto
+
يتصرف العنصر كما لو pointer-eventsلم يتم تحديد الخاصية. في محتوى SVG ، يكون لهذه القيمة والقيمة visiblePaintedنفس التأثير.
+
none
+
العنصر ليس هدفًا لأحداث المؤشر ؛ ومع ذلك ، قد تستهدف أحداث المؤشر عناصره التنازلي إذا كانت تلك النزول قد عيّنت pointer-eventsبعض القيمة الأخرى. في هذه الظروف ، ستؤدي أحداث المؤشر إلى تشغيل مستمعي الأحداث على هذا العنصر الرئيسي كما هو مناسب في طريقهم إلى / من السليل أثناء مراحل التقاط / فقاعة الحدث .
+
+ +

SVG فقط

+ +
+
visiblePainted
+
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عند visibilityتعيين الخاصية على visibleسبيل المثال عندما يكون مؤشر الماوس فوق الجزء الداخلي (أي ، "تعبئة") للعنصر وتعيين fillالخاصية على قيمة أخرى بخلاف none، أو عندما مؤشر الماوس فوق المحيط (أي ، "حد") للعنصر strokeويتم ضبط الخاصية على قيمة أخرى غير none.
+
visibleFill
+
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما visibilityيتم تعيين الخاصية إلى visibleوعندما على سبيل المثال ، يكون مؤشر الماوس فوق الجزء الداخلي (أي ، تعبئة) العنصر. fillلا تؤثر قيمة الخاصية على معالجة الحدث.
+
visibleStroke
+
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عند visibilityتعيين الخاصية على visibleسبيل المثال عندما يكون مؤشر الماوس فوق محيط العنصر (أي الحد). strokeلا تؤثر قيمة الخاصية على معالجة الحدث.
+
visible
+
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر عند visibilityتعيين الخاصية على visibleسبيل المثال ، يكون مؤشر الماوس على الجانب الداخلي (أي ، الحشو) أو المحيط (أي الحد) للعنصر. قيم fillو strokeلا تؤثر على معالجة الحدث.
+
painted
+
SVG فقط. يمكن أن يكون العنصر هو الهدف لحدث المؤشر فقط عندما يكون مؤشر الماوس فوق المنطقة الداخلية (على سبيل المثال ، "تعبئة") fillويتم ضبط الخاصية على قيمة أخرى بخلاف noneأو عندما يكون مؤشر الماوس فوق المحيط (أي ، "حد") للعنصر strokeوالممتلكات يتم تعيينها على قيمة غير none. visibilityلا تؤثر قيمة الخاصية على معالجة الحدث.
+
fill
+
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما يكون المؤشر فوق الجزء الداخلي (أي ، تعبئة) العنصر. قيم fillو visibilityخصائص لا تؤثر معالجة الحدث.
+
stroke
+
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما يكون المؤشر فوق محيط العنصر (أي الحد). قيم strokeو visibilityخصائص لا تؤثر معالجة الحدث.
+
all
+
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما يكون المؤشر فوق الجزء الداخلي (أي ، التعبئة) أو المحيط (أي الحد) للعنصر. قيم fill، strokeو visibilityخصائص لا تؤثر معالجة الحدث.
+
+ +

بناء الجملة الرسمي

+ +
{{csssyntax}}
+ +

أمثلة

+ +

مثال أساسي

+ +

يعطل هذا المثال أحداث المؤشر (النقر والسحب والتحويم وما إلى ذلك) على جميع الصور.

+ +
img
+  أحداث المؤشر: لا شيء ؛
+}
+ +

تعطيل الروابط

+ +

يعطل هذا المثال أحداث المؤشر على الرابط إلى http://example.com.

+ +
<UL>
+  <li> <a href="https://developer.mozilla.org"> MDN </a> </li>
+  <li> <a href="http://example.com"> example.com </a> </li>
+</ UL>
+ +
a [href = "http://example.com"] {
+  أحداث المؤشر: لا شيء ؛
+}
+ +
{{EmbedLiveSample("Disabling_links", "500", "100")}}
+ +

ملاحظات

+ +

لاحظ أن منع عنصر من كونها هدفا للأحداث المؤشر باستخدام pointer-eventsلا لا يعني بالضرورة أن المستمعين الحدث المؤشر على هذا العنصر لا يمكن أو لا يمكن تشغيلها. إذا كان أحد أطفال العنصر قد pointer-eventsحدد صراحة للسماح لهذا الطفل بأن يكون هدفًا لأحداث المؤشر ، فإن أي أحداث تستهدف هذا الطفل تمر عبر الوالد أثناء انتقال الحدث على طول سلسلة الوالدين ، وتحفيز مستمعي الحدث على الوالد كما هو مناسب. . بالطبع لن يتم القبض على أي نشاط مؤشر في نقطة على الشاشة يغطيه الوالد ولكن ليس من قِبل الطفل من قِبل الطفل أو الوالد (سوف يمر "الوالد" ويستهدف كل ما هو تحتها).

+ +

pointer-events: noneستظل العناصر التي تحتوي على التركيز من خلال التنقل المتسلسل للوحة المفاتيح باستخدام Tabالمفتاح.

+ +

نود أن نوفر تحكمًا محببًا دقيقًا (أكثر من مجرد autoو none) في HTML لأي أجزاء من العنصر ستؤدي إلى "التقاط" أحداث المؤشر ومتى. لمساعدتنا في تحديد الكيفية التي pointer-eventsينبغي بها تمديد HTML ، إذا كان لديك أي أشياء معينة ترغب في القيام بها مع هذه الخاصية ، يرجى إضافتها إلى قسم حالات الاستخدام في صفحة الويكي هذه (لا تقلق حول ابقائها مرتبة).

+ +

مواصفات

+ + + + + + + + + + + + + + + + + + + + + +
تخصيصالحالةتعليق
{{SpecName('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2 ( 'SVG2')}}
{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2 ( 'SVG1.1')}}التعريف الأولي
+ +

{{cssinfo}}

+ +

امتداده إلى عناصر HTML ، على الرغم من وجوده في المسودات المبكرة من CSS Basic User Interface Module المستوى 3 ، فقد تم دفعه إلى المستوى 4 .

+ +

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

+ + + +

{{Compat("css.properties.pointer-events")}}

+ +

أنظر أيضا

+ + diff --git a/files/ar/web/css/reference/index.html b/files/ar/web/css/reference/index.html new file mode 100644 index 0000000000..e0d134fb04 --- /dev/null +++ b/files/ar/web/css/reference/index.html @@ -0,0 +1,179 @@ +--- +title: CSS reference +slug: Web/CSS/Reference +translation_of: Web/CSS/Reference +--- +
{{CSSRef}}
+ +

Use this CSS reference to browse an alphabetical index of all the standard CSS properties, pseudo-classes, pseudo-elements, data types, and at-rules. You can also browse a list of all the CSS selectors organized by type and a list of key CSS concepts. Also included is a brief DOM-CSS / CSSOM reference.

+ +

Basic rule syntax

+ +

Style rule syntax

+ +
style-rule ::=
+    selectors-list {
+      properties-list
+    }
+
+ +

... where :

+ +
selectors-list ::=
+    selector[:pseudo-class] [::pseudo-element]
+    [, selectors-list]
+
+properties-list ::=
+    [property : value] [; properties-list]
+
+ +

See selector, pseudo-class, pseudo-element lists below. The syntax for each specified value depends on the data type defined for each specified property.

+ +

Style rule examples

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

For a beginner-level introduction to the syntax of CSS selectors, please see this tutorial. Be aware that any CSS syntax error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM (the rule management system) is object-based.

+ +

At-rule syntax

+ +

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

+ +

Keyword index

+ +
+

Note: The property names in this index do not include the JavaScript names where they differ from the CSS standard names.

+
+ +
{{CSS_Ref}}
+ +

Selectors

+ +

The following are the various selectors, which allow styles to be conditional based on various features of elements within the DOM.

+ +

Simple selectors

+ +

Simple selectors are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.

+ + + +

Combinators

+ +

Combinators are selectors that establish a relationship between two or more simple selectors, such as "A is a child of B" or "A is adjacent to B."

+ +
+
Adjacent sibling combinator A + B
+
Specifies that the elements selected by both A and B have the same parent and that the element selected by B immediately follows the element selected by A horizontally.
+
General sibling combinator A ~ B
+
Specifies that the elements selected by both A and B share the same parent and that the element selected by A comes before—but not necessarilyl immediately before—the element selected by B.
+
Child combinator A > B
+
Specifies that the element selected by B is the direct child of the element selected by A.
+
Descendant combinator A B
+
Specifies that the element selected by B is a descendant of the element selected by A, but is not necessarily a direct child.
+
Column combinator A || B {{Experimental_Inline}}
+
Specifies that the element selected by B is located within the table column specified by A. Elements which span multiple columns are considered to be a member of all of those columns.
+
+ +

Pseudo-classes

+ +
+ +
+ +

Pseudo-elements

+ +
+ +
+ +
+

See also: A complete list of selectors in the Selectors Level 3 specification.

+
+ +

Concepts

+ +

Syntax and semantics

+ + + +

Values

+ + + +

Layout

+ + + +

DOM-CSS / CSSOM

+ +

Major object types

+ + + +

Important methods

+ + + +

See also

+ + 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" new file mode 100644 index 0000000000..93ef2bb84e --- /dev/null +++ "b/files/ar/web/css/\330\247\331\204\330\252\330\255\331\210\331\204/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\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" new file mode 100644 index 0000000000..4fbf59d3f9 --- /dev/null +++ "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" @@ -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/\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" new file mode 100644 index 0000000000..d9a0da44f2 --- /dev/null +++ "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" @@ -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/events/index.html b/files/ar/web/events/index.html new file mode 100644 index 0000000000..95f1ffd4bb --- /dev/null +++ b/files/ar/web/events/index.html @@ -0,0 +1,2990 @@ +--- +title: مرجع للأحداث +slug: Web/Events +translation_of: Web/Events +--- +

يتم إرسال أحداث DOM Events لإبلاغ الكود أن أشياء مثيرة قد حدثت. يتم تمثيل كل حدث ب Object يعتمد على واجهة {{domxref ("Event")}} ، وقد يحتوي على حقول و / أو دوال مخصصة إضافية للحصول على معلومات إضافية حول ما حدث. يمكن أن تمثل الأحداث كل شيء بدءًا من تفاعلات المستخدم الأساسية إلى الإشعارات التلقائية للأشياء التي تحدث في نموذج العرض.

+ +

تقدم هذه المقالة قائمة بالأحداث التي يمكن إرسالها؛ بعضها أحداث قياسية محددة في المواصفات الرسمية ، والبعض الآخر أحداث تستخدم داخليًا بواسطة متصفحات محددة، على سبيل المثال، الأحداث الخاصة بـ Mozilla  مدرجة بحيث يمكن للإضافات add-ons استخدامها للتفاعل مع المستعرض.

+ +

الأقسام الأكثر شيوعا

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

أحداث المصادر

+
اسم الحدثيُطلق عندما
{{Event("error")}}فشل تحميل مصدر.
{{Event("abort")}}تم إلغاء تحميل مصدر.
{{Event("load")}}انتهى تحميل المصدر والمصادر التابعة له.
{{Event("beforeunload")}} +

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

+
{{Event("unload")}} يتم إلغاء تحميل المستند أو المصدر التابع له.
+ + + + + + + + + + + + + + + + + + + +
+

أحداث الشبكة

+
اسم الحدثيُطلق عندما
{{Event("online")}}حصل المتصفح على الوصول الى الشبكة.
{{Event("offline")}}فقد المتصفح الوصل الى الشبكة.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

أحداث التركيز

+
اسم الحدثيُطلق عندما
{{Event("focus")}}تلقى عنصر ما التركيز (بدون فقاعة).
{{Event("blur")}}فقد عنصر ما التركيز (بدون فقاعة).
{{Event("focusin")}}عنصر ما على وشك تقلي التركيز (بفقاعة).
{{Event("focusout")}}فقد عنصر ما التركيز (بفقاعة).
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

WebSocket أحداث

+
اسم الحدثيُطلق عندما
openتم إنشاء اتصال WebSocket.
messageيتم استلام رسالة من خلال WebSocket.
{{Event("error")}}تم إغلاق اتصال WebSocket مع ضرر (تعذر إرسال بعض البيانات على سبيل المثال).
closeتم إغلاق اتصال WebSocket.
+ + + + + + + + + + + + + + + + + + + + + + + +
+

أحداث سجل الجلسة

+
اسم الحدثيُطلق عندما
{{Event("pagehide")}}يتم قطع إدخال سجل الجلسة من.
{{Event("pageshow")}}يتم قطع إدخال محفوظات الجلسة إلى.
{{Event("popstate")}}يتم نقل إدخال محفوظات الجلسة إلى (في حالات معينة).
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

CSS Animation  أحداث الحركة

+
اسم الحدثيُطلق عندما
{{Event("animationstart")}}بدأ CSS animation .
{{Event("animationcancel")}}تم إيقاف CSS animation .
{{Event("animationend")}}اكتمل CSS animation .
{{Event("animationiteration")}} تم تكرارCSS animation .
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

أحداث CSS انتقالية 

+
اسم الحدثيُطلق عندما
{{Event("transitionstart")}}CSS transition بدأ بالفعل (يتم إطلاقه بعد أي تأخير)
{{Event("transitioncancel")}}CSS transition تم إلغائه.
{{Event("transitionend")}}CSS transition اكتمل.
{{Event("transitionrun")}}CSS transition بدأ تشغيله (تم إطلاقه قبل بدء أي تأخير).
+ + + + + + + + + + + + + + + + + + + +
+

أحداث النموذج

+
اسم الحدثيُطلق عندما
{{Event("reset")}}تم الضغط على زر "إعادة الضبط"
{{Event("submit")}}تم الضغط على زر "تسليم"
+ + + + + + + + + + + + + + + + + + + +
+

أحداث الطباعة

+
اسم الحدثيُطلق عندما
{{Event("beforeprint")}}تم فتح صندوق الطباعة.
{{Event("afterprint")}}تم إغلاق صندوق الطباعة.
+ + + + + + + + + + + + + + + + + + + + + + + +
+

أحداث تكوين النص

+
اسم الحدثيُطلق عندما
{{Event("compositionstart")}}يتم تحضير مقطع النص (مشابه لkeydown لإدخال لوحة المفاتيح ، ولكنها تعمل مع إدخالات أخرى مثل التعرف على الكلام).
{{Event("compositionupdate")}}تم إضافة حرف إلى مقطع من النص الذي يتم تكوينه.
{{Event("compositionend")}}تم الانتهاء من تكوين مقطع من النص أو إلغاؤه.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

أحداث العرض

+
اسم الحدثيُطلق عندما
{{Event("fullscreenchange")}}تم تبديل عنصر إلى وضع ملء الشاشة أو منه.
{{Event("fullscreenerror")}}كان من المستحيل التبديل إلى وضع ملء الشاشة لأسباب فنية أو بسبب رفض الإذن.
{{Event("resize")}}تم تغيير حجم عرض المستند.
{{Event("scroll")}}تم تمرير عرض المستند أو تمرير عنصر.
+ + + + + + + + + + + + + + + + + + + + + + + +
+

أحداث الحافظة

+
اسم الحدثيُطلق عندما
{{Event("cut")}}تم قص التحديد ونسخه إلى الحافظة.
{{Event("copy")}}تم نسخ التحديد إلى الحافظة.
{{Event("paste")}}تم لصق العنصر من الحافظة.
+ + + + + + + + + + + + + + + + + + + + + +
+

أحداث لوحة المفاتيح

+
اسم الحدثيُطلق عندما
{{Event("keydown")}}تم الضغط على أي مفتاح.
{{Event("keypress")}}أي مفتاح (ما عدا Shift, Fn, أو CapsLock) في حالة الضغط عليه. (يُطلق بالتزامن.)
{{Event("keyup")}}تم تحرير الضغط من على أي مفتاح
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

أحداث الماوس

+
اسم الحدثيُطلق عندما
{{Event("auxclick")}}تم الضغط على زر جهاز التأشير (أي زر غير أساسي) وتحريره على عنصر.
{{Event("click")}}تم الضغط على زر جهاز التأشير (أي زر ، وسيصبح قريباً زر أساسي فقط) وتحريره على عنصر.
{{Event("contextmenu")}}يتم الضغط على الزر الأيمن للماوس (قبل عرض قائمة السياق).
{{Event("dblclick")}}يتم الضغط على زر جهاز تأشير مرتين على عنصر.
{{Event("mousedown")}}يتم الضغط على زر جهاز التأشير على عنصر.
{{Event("mouseenter")}}يتم نقل جهاز تأشير على العنصر المرفق به المستمع.
{{Event("mouseleave")}}يتم نقل جهاز تأشير بعيدًا عن العنصر المرفق به المستمع.
{{Event("mousemove")}}يتم نقل جهاز تأشير فوق عنصر. (يتم تشغيله باستمرار أثناء تحريك الماوس.)
{{Event("mouseover")}}يتم نقل جهاز التأشير إلى العنصر الذي يحتوي على المستمع مرفقًا أو على أحد توابعه.
{{Event("mouseout")}}يتم نقل جهاز تأشير بعيدا عن العنصر الذي يحتوي على المستمع مرفقًا أو بعيدًا عن أحد توابعه.
{{Event("mouseup")}}تم تحرير زر جهاز التأشير فوق عنصر.
{{Event("pointerlockchange")}}تم قفل المؤشر أو تحريره.
{{Event("pointerlockerror")}}كان من المستحيل تأمين المؤشر لأسباب فنية أو بسبب رفض الإذن.
{{Event("select")}}يتم تحديد بعض النص.
{{Event("wheel")}}يتم تدوير الزر العجلة لجهاز التأشير في أي اتجاه.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

أحداث السحب و الإفلات

+
اسم الحدثيُطلق عندما
{{Event("drag")}}يتم سحب عنصر أو نص محدد. (يتم إطلاقه باستمرار كل 350 مللي ثانية)
{{Event("dragend")}}يتم إنهاء عملية السحب (عن طريق تحرير زر الماوس أو الضغط على مفتاح escape).
{{Event("dragenter")}}يدخل العنصر المسحوب أو تحديد النص في هدف إسقاط صالح.
{{Event("dragstart")}}يبدأ المستخدم في سحب عنصر أو تحديد نص.
{{Event("dragleave")}}العنصر المسحوب أو تحديد النص يترك هدف إفلات صالح.
{{Event("dragover")}}يتم سحب عنصر أو تحديد نص فوق هدف إفلات صالح. (يتم إطلاقه باستمرار كل 350 مللي ثانية)
{{Event("drop")}}يتم إسقاط عنصر على هدف إسقاط صالح.
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

أحداث الوسائط

+
اسم الحدثيُطلق عندما
{{Event("audioprocess")}}المخزن المؤقت للإدخال لـ {{DOMxRef ("ScriptProcessorNode")}} جاهز للمعالجة.
{{Event("canplay")}}يمكن للمتصفح تشغيل الوسائط ، ولكن التقدير يشير أنه لم يتم تحميل بيانات كافية لتشغيل الوسائط حتى نهايتها دون الحاجة إلى التوقف لمزيد من التخزين المؤقت للمحتوى.
{{Event("canplaythrough")}}يُقَدِّر المتصفح أنه يمكنه تشغيل الوسائط حتى نهايتها دون التوقف لتخزين المحتوى مؤقتًا.
{{Event("complete")}}يتم إنهاء عرض {{DOMxRef ("OfflineAudioContext")}}}.
{{Event("durationchange")}}تم تحديث خاصية المدة duration.
{{Event("emptied")}}أصبحت الوسائط فارغة؛ على سبيل المثال، يتم إرسال هذا الحدث إذا تم تحميل الوسائط بالفعل (أو تحميلها جزئيًا) ، ويتم استدعاء load () method لإعادة تحميلها.
{{Event("ended")}}توقف التشغيل لأنه تم الوصول إلى نهاية الوسائط.
{{Event("loadeddata")}}تم الانتهاء من تحميل الإطار الأول للوسائط.
{{Event("loadedmetadata")}}تم تحميل البيانات الوصفية metadata.
{{Event("pause")}}تم إيقاف التشغيل مؤقتا.
{{Event("play")}}بدأ التشغيل.
{{Event("playing")}}التشغيل جاهز للبدء بعد التوقف المؤقت أو التأخير بسبب نقص البيانات.
{{Event("ratechange")}}لقد تغير معدل التشغيل.
{{Event("seeked")}}اكتملت عملية البحث.
{{Event("seeking")}}بدأت عملية البحث.
{{Event("stalled")}}يحاول وكيل المستخدم جلب بيانات الوسائط، ولكن البيانات بشكل غير متوقع لا تستجيب.
{{Event("suspend")}}تم تعليق تحميل بيانات الوسائط.
{{Event("timeupdate")}}تم تحديث الوقت المشار إليه بواسطة خاصية currentTime.
{{Event("volumechange")}}تم تغيير مستوى الصوت.
{{Event("waiting")}}توقف التشغيل بسبب نقص مؤقت في البيانات.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

أحداث التقدم

+
اسم الحدث...يُطلق عندما
abortتم إنهاء التقدم (ليس بسبب خطأ).
{{Event("error")}}فشل التقدم.
loadتم التقدم بنجاح.
{{Event("loadend")}} توقف التقدم (بعد أن تم إرسال "error", "abort", أو "load" ).
{{Event("loadstart")}}بدأ التقدم.
{{Event("progress")}}جاري التقدم.
{{Event("timeout")}}تم إنهاء التقدم بسبب انتهاء الوقت المحدد مسبقا.
+ +

أحداث التخزين

+ +

{{Event("change")}} (see {{anch("Non-standard events")}})
+ {{Event("storage")}}

+ +

أحداث الترقية

+ +

{{Event("checking")}}
+ {{Event("downloading")}}
+ {{Event("error")}}
+ {{Event("noupdate")}}
+ {{Event("obsolete")}}
+ {{Event("updateready")}}

+ +

أحداث اغيير القيمة

+ +

{{Event("broadcast")}}
+ {{Event("CheckboxStateChange")}}
+ {{Event("hashchange")}}
+ {{Event("input")}}
+ {{Event("RadioStateChange")}}
+ {{Event("readystatechange")}}
+ {{Event("ValueChange")}}

+ +

أحداث غير مصنفة

+ +

{{Event("invalid")}}
+ message
+ message
+ open
+ show

+ +

أحداث أقل شيوعا وغير قياسية

+ +

Abortable Fetch events

+ + + + + + + + + + + + + + +
اسم الحدثيُطلق عندما
abortتم إحباط طلب DOM ، مثل استخدام {{DOMxRef("AbortController.abort()")}}.
+ +

WebVR events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
اسم الحدثيُطلق عندما
{{Event("vrdisplayactivate")}}عندما يكون من الممكن عرض شاشة VR ، على سبيل المثال إذا تم نقل HMD لإخراجها من وضع الاستعداد، أو إيقاظها من خلال تشغيلها.
{{Event("vrdisplayblur")}}عند إيقاف العرض إلى {{DOMxRef ("VRDisplay")}} مؤقتًا لسبب ما من قبل المتصفح أو نظام التشغيل أو جهاز VR - على سبيل المثال ، أثناء تفاعل المستخدم مع قائمة النظام أو المتصفح ، لمنع تجربة التتبع أو الفقد.
{{Event("vrdisplayconnect")}}عند توصيل {{DOMxRef ("VRDisplay")}} متوافق بالكمبيوتر.
{{Event("vrdisplaydeactivate")}}عندما يتعذر عرض {{DOMxRef ("VRDisplay")}} إلى ، على سبيل المثال إذا انتقل HMD إلى وضع الاستعداد أو وضع السكون بسبب فترة من عدم النشاط.
{{Event("vrdisplaydisconnect")}}عندما يتم فصل {{DOMxRef ("VRDisplay")}} المتوافق مع الكمبيوتر.
{{Event("vrdisplayfocus")}}عند استئناف العرض التقديمي على {{DOMxRef ("VRDisplay")}} بعد أن تم تشويشه.
{{Event("vrdisplaypresentchange")}}تغيير حالة العرض {{DOMxRef ("VRDisplay")}} - مثلا تنتقل من العرض إلى عدم العرض أو العكس.
+ +

SVG أحداث

+ +

{{Event("SVGAbort")}}
+ {{Event("SVGError")}}
+ {{Event("SVGLoad")}}
+ {{Event("SVGResize")}}
+ {{Event("SVGScroll")}}
+ {{Event("SVGUnload")}}
+ {{Event("SVGZoom")}}

+ +

أحداث قاعدة البيانات

+ +

abort
+ blocked
+ complete
+ {{Event("error")}}
+ success
+ upgradeneeded
+ versionchange

+ +

أحداث السكريبت

+ +

{{Event("afterscriptexecute")}}
+ {{Event("beforescriptexecute")}}

+ +

أحداث القائمة

+ +

{{Event("DOMMenuItemActive")}}
+ {{Event("DOMMenuItemInactive")}}

+ +

أحداث النافذة

+ +

close

+ +

أحداث منبثقة

+ +

{{Event("popuphidden")}}
+ {{Event("popuphiding")}}
+ {{Event("popupshowing")}}
+ {{Event("popupshown")}}

+ +

أحداث تبويب

+ +

{{Event("visibilitychange")}}

+ + + +

أحداث البطارية

+ +

{{Event("chargingchange")}}
+ {{Event("chargingtimechange")}}
+ {{Event("dischargingtimechange")}}
+ {{Event("levelchange")}}

+ +

أحداث الاستدعاء

+ +

{{Event("alerting")}}
+ {{Event("busy")}}
+ {{Event("callschanged")}}
+ {{Event("cfstatechange")}}
+ {{Event("connected")}}
+ {{Event("connecting")}}
+ {{Event("dialing")}}
+ {{Event("disconnected")}}
+ {{Event("disconnecting")}}
+ {{Event("error_(Telephony)","error")}}
+ {{Event("held")}}, {{Event("holding")}}
+ {{Event("incoming")}}
+ {{Event("resuming")}}
+ {{Event("statechange")}}
+ {{Event("voicechange")}}

+ +

 أحداث مستشعر

+ +

{{Event("compassneedscalibration")}}
+ {{Event("devicemotion")}}
+ {{Event("deviceorientation")}}
+ {{Event("orientationchange")}}

+ +

أحداث بطاقة ذكية

+ +

{{Event("icccardlockerror")}}
+ {{Event("iccinfochange")}}
+ {{Event("smartcard-insert")}}
+ {{Event("smartcard-remove")}}
+ {{Event("stkcommand")}}
+ {{Event("stksessionend")}}
+ {{Event("cardstatechange")}}

+ +

SMS و USSD أحداث

+ +

{{Event("delivered")}}
+ {{Event("received")}}
+ {{Event("sent")}}
+ {{Event("ussdreceived")}}

+ +

أحداث إطار المتصفح

+ +

{{Event("mozbrowserclose")}}
+ {{Event("mozbrowsercontextmenu")}}
+ {{Event("mozbrowsererror")}}
+ {{Event("mozbrowsericonchange")}}
+ {{Event("mozbrowserlocationchange")}}
+ {{Event("mozbrowserloadend")}}
+ {{Event("mozbrowserloadstart")}}
+ {{Event("mozbrowseropenwindow")}}
+ {{Event("mozbrowsersecuritychange")}}
+ {{Event("mozbrowsershowmodalprompt")}}
+ {{Event("mozbrowsertitlechange")}}

+ +

DOM أحداث معالجة

+ +

DOMAttributeNameChanged
+ DOMAttrModified
+ DOMCharacterDataModified
+ {{Event("DOMContentLoaded")}}
+ DOMElementNameChanged
+ DOMNodeInserted
+ DOMNodeInsertedIntoDocument
+ DOMNodeRemoved
+ DOMNodeRemovedFromDocument
+ DOMSubtreeModified

+ +

أحداث اللمس

+ +

{{Event("touchcancel")}}
+ {{Event("touchend")}}
+ {{Event("touchmove")}}
+ {{Event("touchstart")}}

+ +

أحداث الإشارة

+ +

{{Event("pointerover")}}
+ {{Event("pointerenter")}}
+ {{Event("pointerdown")}}
+ {{Event("pointermove")}}
+ {{Event("pointerup")}}
+ {{Event("pointercancel")}}
+ {{Event("pointerout")}}
+ {{Event("pointerleave")}}
+ {{Event("gotpointercapture")}}
+ {{Event("lostpointercapture")}}

+ +

أحداث قياسية

+ +

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

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
اسم الحدثنوع الحدثتخصيصيُطلق عندما...
{{Event("abort")}}{{DOMxRef("UIEvent")}}DOM L3تم إلغاء تحميل المصدر.
abort{{DOMxRef("ProgressEvent")}}Progress and XMLHttpRequestتم إنهاء التقدم (ليس بسبب خطأ).
abort{{DOMxRef("Event")}}IndexedDBتم إلغاء الإجراء.
{{Event("afterprint")}}{{DOMxRef("Event")}}HTML5بدأ المستند المرتبط في الطباعة أو تم إغلاق معاينة الطباعة.
{{Event("animationcancel")}}{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}CSS Animationsتم إلغاء CSS animation .
{{Event("animationend")}}{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}CSS Animationsتم إكمال CSS animation .
{{Event("animationiteration")}}{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}CSS Animations تم تكرار CSS animation.
{{Event("animationstart")}}{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}CSS Animationsبدأ CSS animation.
{{Event("appinstalled")}}{{DOMxRef("Event")}}Web App Manifestتم تثبيت تطبيق ويب بنجاح progressive web app.
{{Event("audioprocess")}}{{DOMxRef("AudioProcessingEvent")}} {{Deprecated_Inline}}{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}مخزن الإدخال المؤقت لـ {{DOMxRef ("ScriptProcessorNode")}} جاهز للمعالجة.
{{Event("audioend")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}انتهى وكيل المستخدم من التقاط الصوت للتعرف على الكلام.
{{Event("audiostart")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}بدأ وكيل المستخدم في التقاط الصوت للتعرف على الكلام.
{{Event("beforeprint")}}{{DOMxRef("Event")}}HTML5المستند المرتبط على وشك الطباعة أو المعاينة للطباعة.
{{Event("beforeunload")}}{{DOMxRef("BeforeUnloadEvent")}}HTML5النافذة والمستند ومصدره على وشك التفريغ.
{{Event("beginEvent")}}{{DOMxRef("TimeEvent")}}SVGيبدأ عنصر الرسوم المتحركة SMIL.
blockedIndexedDBيؤدي الاتصال المفتوح بقاعدة بيانات إلى حظر معاملة versionchange في نفس قاعدة البيانات.
{{Event("blur")}}{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}DOM L3العنصر فقد التركيز (لافقاعة).
{{Event("boundary")}} {{Experimental_Inline}}{{DOMxRef("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}يصل الكلام المنطوق الكلمة أو الجملة إلى حد
{{Event("canplay")}}{{DOMxRef("Event")}}HTML5 mediaيمكن لوكيل المستخدم تشغيل الوسائط ، لكنه قام بالتقدير أنه لم يتم تحميل بيانات كافية لتشغيل الوسائط حتى نهايتها دون الحاجة إلى التوقف لمزيد من التخزين المؤقت للمحتوى.
{{Event("canplaythrough")}}{{DOMxRef("Event")}}HTML5 mediaيمكن لوكيل المستخدم تشغيل الوسائط حتى نهايتها دون الحاجة إلى التوقف لمزيد من التخزين المؤقت للمحتوى.
{{Event("change")}}{{DOMxRef("Event")}}DOM L2, HTML5يتم تشغيل حدث التغيير لعناصر {{HTMLElement ("input")}} و {{HTMLElement ("select")}}} و {{HTMLElement ("textarea")}} عندما يتم الالتزام بتغيير قيمة العنصر بواسطة المستخدم.
{{Event("chargingchange")}}{{DOMxRef("Event")}}Battery statusتبدأ البطارية أو تتوقف عن الشحن.
{{Event("chargingtimechange")}}{{DOMxRef("Event")}}Battery statusتم تحديث السمة ChargingTime.
{{Event("click")}}{{DOMxRef("MouseEvent")}}DOM L3تم الضغط على زر جهاز تأشير وتحريره على عنصر.
close{{DOMxRef("Event")}}WebSocketتم إغلاق اتصال WebSocket.
completeIndexedDBتمت المعاملة بنجاح.
{{Event("complete")}}{{DOMxRef("OfflineAudioCompletionEvent")}} {{Deprecated_Inline}}{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}يتم إنهاء عرض {{DOMxRef ("OfflineAudioContext")}}}.
{{Event("compositionend")}}{{DOMxRef("CompositionEvent")}}DOM L3تم الانتهاء من تكوين مقطع من النص أو إلغاؤه.
{{Event("compositionstart")}}{{DOMxRef("CompositionEvent")}}DOM L3يتم إعداد تركيبة النص (مشابه لمفتاح الإدخال لإدخال لوحة المفاتيح ، ولكنها تعمل مع إدخالات أخرى مثل التعرف على الكلام).
{{Event("compositionupdate")}}{{DOMxRef("CompositionEvent")}}DOM L3تتم إضافة حرف إلى مقطع من النص الذي يتم تكوينه.
{{Event("contextmenu")}}{{DOMxRef("MouseEvent")}}HTML5يتم الضغط على الزر الأيمن للماوس (قبل عرض قائمة السياق).
{{Event("copy")}}{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}Clipboardتمت إضافة النص المحدد إلى الحافظة.
{{Event("cut")}}{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}Clipboardتمت إزالة تحديد النص من المستند وإضافته إلى الحافظة.
{{Event("dblclick")}}{{DOMxRef("MouseEvent")}}DOM L3يتم الضغط فوق زر جهاز تأشير مرتين على عنصر.
{{Event("devicechange")}}{{DOMxRef("Event")}}{{SpecName("Media Capture")}}يتم توصيل جهاز وسائط مثل الكاميرا أو الميكروفون أو مكبر الصوت أو إزالته من النظام.
{{Event("devicemotion")}}{{DOMxRef("DeviceMotionEvent")}} {{Experimental_Inline}}Device Orientation Eventsتتوفر بيانات حديثة من مستشعر الحركة.
{{Event("deviceorientation")}}{{DOMxRef("DeviceOrientationEvent")}} {{Experimental_Inline}}Device Orientation Eventsتتوفر بيانات حديثة من مستشعر الاتجاه.
{{Event("dischargingtimechange")}}{{DOMxRef("Event")}}Battery statusتم تحديث الخاصية dischargingTime.
DOMActivate {{Deprecated_Inline}}{{DOMxRef("UIEvent")}}DOM L3يتم تنشيط زر أو رابط أو عنصر تغيير الحالة (استخدم {{Event ("click")}} بدلاً من ذلك).
DOMAttributeNameChanged {{Deprecated_Inline}}{{DOMxRef("MutationNameEvent")}}DOM L3 Removedتغير اسم الخاصية (استخدم  mutation observers بدلاً من ذلك).
DOMAttrModified {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3تم تعديل قيمة الخاصية (استخدم mutation observers بدلا من ذلك).
DOMCharacterDataModified {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3تم تغيير نص أو CharacterData آخر (استخدم mutation observers بدلاً من ذلك).
{{Event("DOMContentLoaded")}}{{DOMxRef("Event")}}HTML5انتهى تحميل المستند (ولكن ليس مصادره التابعة).
DOMElementNameChanged {{Deprecated_Inline}}{{DOMxRef("MutationNameEvent")}}DOM L3 Removed +

تم تغيير اسم العنصر (استخدم mutation observers بدلاً من ذلك).

+
DOMFocusIn {{Deprecated_Inline}}{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}DOM L3تلقى عنصر التركيز (استخدم {{Event ("focus")}} أو {{Event ("focusin")}} بدلاً من ذلك).
DOMFocusOut {{Deprecated_Inline}}{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}DOM L3فقد العنصر التركيز (استخدم {{Event ("blur")}} أو {{Event ("focusout")}} بدلاً من ذلك).
DOMNodeInserted {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3تمت إضافة العقدة "node" كتابع لعقدة أخرى (استخدم mutation observers بدلاً من ذلك).
DOMNodeInsertedIntoDocument {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3 +

تم إدراج عقدة "node" في المستند (استخدم mutation observers بدلاً من ذلك).

+
DOMNodeRemoved {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3تمت إزالة العقدة "node" من العقدة الأصلية (استخدم mutation observers بدلاً من ذلك).
DOMNodeRemovedFromDocument {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3تمت إزالة عقدة "node" من المستند (استخدم mutation observers بدلاً من ذلك).
DOMSubtreeModified {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3حدث تغيير في المستند (استخدم mutation observers بدلاً من ذلك).
{{Event("drag")}}{{DOMxRef("DragEvent")}}HTML5يتم سحب عنصر أو نص محدد (كل 350 مللي ثانية).
{{Event("dragend")}}{{DOMxRef("DragEvent")}}HTML5يتم إنهاء عملية السحب (عن طريق تحرير زر الماوس أو الضغط على مفتاح escape).
{{Event("dragenter")}}{{DOMxRef("DragEvent")}}HTML5يدخل العنصر المسحوب أو تحديد النص في هدف إسقاط صالح.
{{Event("dragleave")}}{{DOMxRef("DragEvent")}}HTML5العنصر المسحوب أو تحديد النص يترك هدف إفلات صالح.
{{Event("dragover")}}{{DOMxRef("DragEvent")}}HTML5يتم سحب عنصر أو نص محدد فوق هدف إسقاط صالح (يتم تشغيله كل 350 مللي ثانية).
{{Event("dragstart")}}{{DOMxRef("DragEvent")}}HTML5يبدأ المستخدم في سحب عنصر أو تحديد نص.
{{Event("drop")}}{{DOMxRef("DragEvent")}}HTML5يتم إسقاط عنصر على هدف إسقاط صالح.
{{Event("durationchange")}}{{DOMxRef("Event")}}HTML5 mediaتم تحديث خاصية duration.
{{Event("emptied")}}{{DOMxRef("Event")}}HTML5 media +

أصبحت وسائل الإعلام فارغة. على سبيل المثال ، يتم تشغيل هذا الحدث إذا تم تحميل الوسائط بالفعل (أو تم تحميلها جزئيًا) ، وتم استدعاء load() method لإعادة تحميلها.

+
{{Event("end_(SpeechRecognition)","end")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}تم قطع خدمة التعرف على الكلام.
{{Event("end_(SpeechSynthesis)","end")}} {{Experimental_Inline}}{{DOMxRef("SpeechSynthesisEvent")}}{{SpecName("Web Speech API")}}تم الانتهاء من نطق الكلام.
{{Event("ended")}}{{DOMxRef("Event")}}HTML5 mediaتوقف التشغيل بسبب الوصول إلى نهاية الوسائط.
{{Event("ended_(Web_Audio)", "ended")}}{{DOMxRef("Event")}}{{SpecName("Web Audio API")}}توقف التشغيل بسبب الوصول إلى نهاية الوسائط.
{{Event("endEvent")}}{{DOMxRef("TimeEvent")}}SVGينتهي عنصر الحركة SMIL.
{{Event("error")}}{{DOMxRef("UIEvent")}}DOM L3فشل تحميل مصدر.
{{Event("error")}}{{DOMxRef("ProgressEvent")}}Progress and XMLHttpRequestفشل التقدم.
{{Event("error")}}{{DOMxRef("Event")}}WebSocketتم إغلاق اتصال WebSocket مع التحيز (تعذر إرسال بعض البيانات على سبيل المثال).
{{Event("error")}}{{DOMxRef("Event")}}Server Sent Eventsفشل اتصال مصدر الحدث.
{{Event("error")}}{{DOMxRef("Event")}}IndexedDBتسبب الطلب بخطأ وفشل.
{{Event("error_(SpeechRecognitionError)","error")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}يحدث خطأ في التعرف على الكلام.
{{Event("error_(SpeechSynthesisError)","error")}}{{DOMxRef("SpeechSynthesisErrorEvent")}}{{SpecName('Web Speech API')}}حدث خطأ يمنع نطق الكلام بنجاح.
{{Event("focus")}}{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}DOM L3تلقى عنصر ما التركيز (لا فقاعة).
{{Event("focusin")}}{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}DOM L3عنصر ما على وشك تلقي التركيز (فقاعات).
{{Event("focusout")}}{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}DOM L3عنصر ما على وشك فقدان التركيز (الفقاعات).
{{Event("fullscreenchange")}}{{gecko_minversion_inline("9")}}{{DOMxRef("Event")}}Full Screenتم تبديل عنصر إلى وضع ملء الشاشة أو منه.
{{Event("fullscreenerror")}}{{gecko_minversion_inline("9")}}{{DOMxRef("Event")}}Full Screenكان من المستحيل التبديل إلى وضع ملء الشاشة لأسباب فنية أو بسبب رفض الإذن.
{{Event("gamepadconnected")}}{{DOMxRef("GamepadEvent")}} {{Experimental_Inline}}Gamepadتم توصيل لوحة ألعاب.
{{Event("gamepaddisconnected")}}{{DOMxRef("GamepadEvent")}} {{Experimental_Inline}}Gamepadتم قطع اتصال لوحة الألعاب.
{{Event("gotpointercapture")}}{{DOMxRef("PointerEvent")}}Pointer Eventsيتلقى العنصر التقاط مؤشر.
{{Event("hashchange")}}{{DOMxRef("HashChangeEvent")}}HTML5تم تغيير جزء المعرف من عنوان URL (جزء عنوان URL الذي بعد #).
{{Event("lostpointercapture")}}{{DOMxRef("PointerEvent")}}Pointer Eventsفقد العنصر التقاط مؤشر.
{{Event("input")}}{{DOMxRef("Event")}}HTML5يتم تعديل قيمة عنصر ما أو تعديل محتوى عنصر ذو خاصية contenteditable.
{{Event("invalid")}}{{DOMxRef("Event")}}HTML5تم التحقق من عنصر قابل للإرسال ولا يستوفي قيوده.
{{Event("keydown")}}{{DOMxRef("KeyboardEvent")}}DOM L3تم الضغط على مفتاح.
{{Event("keypress")}} {{Deprecated_Inline}}{{DOMxRef("KeyboardEvent")}}DOM L3يتم الضغط على مفتاح، وينتج هذا المفتاح عادة قيمة حرفية (استخدم حدث input بدلاً من ذلك).
{{Event("keyup")}}{{DOMxRef("KeyboardEvent")}}DOM L3تم تحرير مفتاح.
{{Event("languagechange")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}تغيرت اللغات المفضلة للمستخدم.
{{Event("levelchange")}}{{DOMxRef("Event")}}Battery statusتم تحديث خاصية المستوى level.
{{Event("load")}}{{DOMxRef("UIEvent")}}DOM L3انتهى تحميل المصدر والمصادر التابعة له.
load{{DOMxRef("ProgressEvent")}}Progress and XMLHttpRequestكان التقدم ناجح.
{{Event("loadeddata")}}{{DOMxRef("Event")}}HTML5 mediaتم الانتهاء من تحميل الإطار الأول للوسائط.
{{Event("loadedmetadata")}}{{DOMxRef("Event")}}HTML5 mediaتم تحميل البيانات الوصفية.
{{Event("loadend")}}{{DOMxRef("ProgressEvent")}}Progress and XMLHttpRequest +

توقف التقدم (بعد إرسال "error" أو "abort" أو "load").

+
{{Event("loadstart")}}{{DOMxRef("ProgressEvent")}}Progress and XMLHttpRequestبدأ التقدم.
{{Event("mark")}} {{Experimental_Inline}}{{DOMxRef("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}يصل الكلام المنطوق إلى علامة "SSML "mark مسماة.
message{{DOMxRef("MessageEvent")}}WebSocketيتم استلام رسالة من خلال WebSocket.
message{{DOMxRef("MessageEvent")}}Web Workersيتم تلقي رسالة من Web Worker.
message{{DOMxRef("MessageEvent")}}Web Messaging +

يتم تلقي رسالة من إطار تابع (i) أو من نافذة أصل.

+
message{{DOMxRef("MessageEvent")}}Server Sent Eventsيتم تلقي رسالة من خلال مصدر الحدث.
{{Event("messageerror")}}{{DOMxRef("MessageEvent")}}{{DOMxRef("MessagePort")}}, Web Workers, Broadcast Channel, {{DOMxRef("Window")}}يظهر خطأ في الرسالة عندما يتم تلقي رسالة بواسطة Object.
{{Event("message_(ServiceWorker)","message")}} {{Experimental_Inline}}{{DOMxRef("ServiceWorkerMessageEvent")}} or {{DOMxRef("ExtendableMessageEvent")}}, depending on context.Service Workersيتم تلقي رسالة من عامل خدمة ، أو تلقي رسالة في عامل خدمة من سياق آخر.
{{Event("mousedown")}}{{DOMxRef("MouseEvent")}}DOM L3يتم الضغط على زر جهاز التأشير (عادة الماوس/الفأرة) على عنصر.
{{Event("mouseenter")}}{{DOMxRef("MouseEvent")}}DOM L3يتم نقل جهاز التأشير إلى العنصر المُرفق به المستمع.
{{Event("mouseleave")}}{{DOMxRef("MouseEvent")}}DOM L3يتم نقل جهاز التأشير بعيدا عن العنصر المرفق به المستمع.
{{Event("mousemove")}}{{DOMxRef("MouseEvent")}}DOM L3يتم نقل جهاز التأشير فوق عنصر.
{{Event("mouseout")}}{{DOMxRef("MouseEvent")}}DOM L3يتم تحريك جهاز التأشير بعيدا عن العنصر الذي يحتوي على المستمع مرفقا به أو بعيدا عن أحد تابعيه.
{{Event("mouseover")}}{{DOMxRef("MouseEvent")}}DOM L3يتم نقل جهاز التأشير إلى العنصر الذي يحتوي على المستمع مرفقا به أو على أحد تابعيه.
{{Event("mouseup")}}{{DOMxRef("MouseEvent")}}DOM L3يتم تحرير زر جهاز التأشير فوق عنصر.
{{Event("nomatch")}} {{Experimental_Inline}}{{DOMxRef("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}تقوم خدمة التعرف على الكلام بإرجاع نتيجة نهائية مع عدم التعرف بشكل ملحوظ.
{{Event("notificationclick")}}{{DOMxRef("NotificationEvent")}} {{Experimental_Inline}}{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}} إشعار النظام الذي تم إنتاجه بواسطة عندما تم الضغط على {{DOMxRef ("ServiceWorkerRegistration.showNotification ()")}}.
{{Event("offline")}}{{DOMxRef("Event")}}HTML5 offlineفقد المتصفح الوصول إلى الشبكة.
{{Event("online")}}{{DOMxRef("Event")}}HTML5 offlineلقد تمكن المتصفح من الوصول إلى الشبكة (ولكن قد يتعذر الوصول إلى مواقع ويب معينة).
open{{DOMxRef("Event")}}WebSocketتم إنشاء اتصال WebSocket.
open{{DOMxRef("Event")}}Server Sent Eventsتم إنشاء اتصال مصدر حدث.
{{Event("orientationchange")}}{{DOMxRef("Event")}}Screen Orientationتم تغيير اتجاه الجهاز (عمودي / أفقي).
{{Event("pagehide")}}{{DOMxRef("PageTransitionEvent")}}HTML5يتم قطع إدخال سجل الجلسة من.
{{Event("pageshow")}}{{DOMxRef("PageTransitionEvent")}}HTML5يتم قطع إدخال محفوظات الجلسة إلى.
{{Event("paste")}}{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}Clipboardتم نقل البيانات من حافظة النظام إلى المستند.
{{Event("pause")}}{{DOMxRef("Event")}}HTML5 mediaتم إيقاف التشغيل مؤقتًا.
{{Event("pause_(SpeechSynthesis)", "pause")}} {{Experimental_Inline}}{{DOMxRef("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}الكلام متوقف مؤقتا جزئيا.
{{Event("pointercancel")}}{{DOMxRef("PointerEvent")}}Pointer Eventsمن غير المحتمل أن ينتج عن المؤشر أي أحداث أخرى.
{{Event("pointerdown")}}{{DOMxRef("PointerEvent")}}Pointer Eventsيدخل المؤشر في حالة الأزرار النشطة.
{{Event("pointerenter")}}{{DOMxRef("PointerEvent")}}Pointer Eventsيتم نقل جهاز التأشير داخل حدود اختبار الهدف.
{{Event("pointerleave")}}{{DOMxRef("PointerEvent")}}Pointer Eventsيتم نقل جهاز التأشير خارج حدود اختبار الهدف.
{{Event("pointerlockchange")}}{{DOMxRef("Event")}}Pointer Lockتم قفل المؤشر أو تحريره.
{{Event("pointerlockerror")}}{{DOMxRef("Event")}}Pointer Lockكان من المستحيل قفل المؤشر لأسباب فنية أو بسبب رفض الإذن.
{{Event("pointermove")}}{{DOMxRef("PointerEvent")}}Pointer Eventsقام المؤشر بتغيير الإحداثيات.
{{Event("pointerout")}}{{DOMxRef("PointerEvent")}}Pointer Events +

انتقل جهاز التأشير خارج حدود اختبار الهدف أو يترك نطاق الهدف الذي يمكن التقاطه.

+
Pointer Eventsيتم نقل جهاز التأشير إلى حدود اختبار الهدف.
{{Event("pointerup")}}{{DOMxRef("PointerEvent")}}Pointer Eventsيترك المؤشر حالة الأزرار النشطة.
{{Event("play")}}{{DOMxRef("Event")}}HTML5 mediaبدأ التشغيل.
{{Event("playing")}}{{DOMxRef("Event")}}HTML5 mediaالتشغيل جاهز للبدء بعد توقفه أو تأجيله بسبب نقص البيانات.
{{Event("popstate")}}{{DOMxRef("PopStateEvent")}}HTML5يتم نقل إدخال محفوظات الجلسة إلى (في حالات معينة).
{{Event("progress")}}{{DOMxRef("ProgressEvent")}}Progress and XMLHttpRequestجاري العمل.
{{Event("push")}}{{DOMxRef("PushEvent")}} {{Experimental_Inline}}{{SpecName("Push API")}}تلقى Service Worker رسالة.
{{Event("pushsubscriptionchange")}}{{DOMxRef("PushEvent")}} {{Experimental_Inline}}{{SpecName("Push API")}}انتهت صلاحية PushSubscription .
{{Event("ratechange")}}{{DOMxRef("Event")}}HTML5 mediaتغير معدل التشغيل.
{{Event("readystatechange")}}{{DOMxRef("Event")}}HTML5 and XMLHttpRequestتم تغيير خاصية readyState للمستند.
{{Event("repeatEvent")}}{{DOMxRef("TimeEvent")}}SVGيتم تكرار عنصر الرسوم المتحركة SMIL animation .
{{Event("reset")}}{{DOMxRef("Event")}}DOM L2, HTML5يتم إعادة تعيين النموذج.
{{Event("resize")}}{{DOMxRef("UIEvent")}}DOM L3تم تغيير حجم عرض المستند.
{{Event("resourcetimingbufferfull")}}{{DOMxRef("Performance")}}Resource Timingالمخزن المؤقت لتوقيت مصدر المتصفح ممتلئ.
{{Event("result")}} {{Experimental_Inline}}{{DOMxRef("SpeechRecognitionEvent")}} {{Experimental_Inline}}{{SpecName('Web Speech API')}}تُعيد خدمة التعرف على الكلام نتيجة - تم التعرف بشكل إيجابي على كلمة أو عبارة وتم إعادة توصيلها إلى التطبيق.
{{Event("resume")}} {{Experimental_Inline}}{{DOMxRef("SpeechSynthesisEvent")}} {{Experimental_Inline}}{{SpecName('Web Speech API')}}يتم استئناف الكلام المتوقف مؤقتا.
{{Event("scroll")}}{{DOMxRef("UIEvent")}}DOM L3تم تمرير عرض المستند أو عنصر.
{{Event("seeked")}}{{DOMxRef("Event")}}HTML5 mediaاكتملت عملية البحث.
{{Event("seeking")}}{{DOMxRef("Event")}}HTML5 mediaبدأت عملية البحث.
{{Event("select")}}{{DOMxRef("UIEvent")}}DOM L3يتم تحديد بعض النص.
{{Event("selectstart")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{ SpecName('Selection API')}}بدأ الاختيار للتو.
{{Event("selectionchange")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{ SpecName('Selection API')}}تم تغيير التحديد في المستند.
{{Event("show")}}{{DOMxRef("MouseEvent")}}HTML5 +

تم إطلاق حدث contextmenu (أو تم عمل فقاعة) على عنصر له خاصية contextmenu.

+
{{Event("slotchange")}}{{DOMxRef("Event")}}{{ SpecName('DOM WHATWG')}}تم تغيير محتويات  "Node" العقدة  {{DOMxRef ("HTMLSlotElement")}} ({{htmlelement ("slot")}}).
{{Event("soundend")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}توقف اكتشاف أي صوت - سواء كان يمكن التعرف عليه أم لا.
{{Event("soundstart")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}تم اكتشاف أي صوت - سواء كان يمكن التعرف عليه أم لا .
{{Event("speechend")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}توقف التعرف على الكلام الذي يتم التعرف عليه بواسطة خدمة التعرف على الكلام.
{{Event("speechstart")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}الصوت الذي تتعرف عليه خدمة التعرف على الكلام عند التقاط الكلام.
{{Event("stalled")}}{{DOMxRef("Event")}}HTML5 mediaيحاول وكيل المستخدم جلب بيانات الوسائط ، ولكن البيانات لا تأتي بشكل غير متوقع.
{{Event("start_(SpeechRecognition)","start")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}بدأت خدمة التعرف على الكلام في الاستماع إلى الصوت الوارد بقصد التعرف على القواعد النحوية المرتبطة بSpeechRecognition.
{{Event("start_(SpeechSynthesis)","start")}}{{DOMxRef("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}بدأ نطق الكلام.
{{Event("storage")}}{{DOMxRef("StorageEvent")}}Web Storageتم تغيير مكان التخزين (localStorage or sessionStorage) .
{{Event("submit")}}{{DOMxRef("Event")}}DOM L2, HTML5تم تسليم نموذج.
success{{DOMxRef("Event")}}IndexedDBتم إكمال الطلب بنجاح.
{{Event("suspend")}}{{DOMxRef("Event")}}HTML5 mediaتم إيقاف تحميل بيانات الوسائط.
{{Event("SVGAbort")}}{{DOMxRef("SVGEvent")}}SVGتم إيقاف تحميل الصفحة قبل تحميل SVG .
{{Event("SVGError")}}{{DOMxRef("SVGEvent")}}SVGحدث خطأ قبل تحميل SVG.
{{Event("SVGLoad")}}{{DOMxRef("SVGEvent")}}SVGتم تحميل مستند SVG وتحليله .
{{Event("SVGResize")}}{{DOMxRef("SVGEvent")}}SVGيتم تغيير حجم مستند SVG.
{{Event("SVGScroll")}}{{DOMxRef("SVGEvent")}}SVGيتم تمرير وتصفح مستند  SVG.
{{Event("SVGUnload")}}{{DOMxRef("SVGEvent")}}SVGتمت إزالة مستند SVG من نافذة أو إطار.
{{Event("SVGZoom")}}{{DOMxRef("SVGZoomEvent")}}SVGيتم تكبير مستند SVG.
{{Event("timeout")}}{{DOMxRef("ProgressEvent")}}XMLHttpRequest
{{Event("timeupdate")}}{{DOMxRef("Event")}}HTML5 mediaتم تحديث الوقت المشار إليه بواسطة خاصية currentTime.
{{Event("touchcancel")}}{{DOMxRef("TouchEvent")}}Touch Eventsتم تعطيل نقطة اتصال بطريقة خاصة بالتنفيذ (الكثير من نقاط الاتصال ، على سبيل المثال).
{{Event("touchend")}}{{DOMxRef("TouchEvent")}}Touch Eventsتتم إزالة نقطة اتصال من سطح مساحة اللمس.
{{Event("touchmove")}}{{DOMxRef("TouchEvent")}}Touch Eventsيتم تحريك نقطة اتصال على طول سطح اللمس.
{{Event("touchstart")}}{{DOMxRef("TouchEvent")}}Touch Eventsيتم وضع نقطة اتصال على سطح اللمس.
{{Event("transitionend")}}{{DOMxRef("TransitionEvent")}} {{Experimental_Inline}}CSS Transitionsتم إكمال CSS transition .
{{Event("unload")}}{{DOMxRef("UIEvent")}}DOM L3يتم إلغاء تحميل المستند أو المصدر التابع.
upgradeneededIndexedDBجرت محاولة لفتح قاعدة بيانات برقم إصدار أعلى من نسختها الحالية. تم إنشاء معاملة تغيير الإصدار versionchange ..
{{Event("userproximity")}}{{DOMxRef("UserProximityEvent")}} {{Experimental_Inline}}{{SpecName("Proximity Events")}}تتوفر بيانات حديثة من مستشعر القرب (يشير إلى ما إذا كان ال Object  near بالقرب من الجهاز أم لا).
{{Event("voiceschanged")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}قائمة الأوبجكتس  {{DOMxRef ("SpeechSynthesisVoice")}} التي سيتم إرجاعها بواسطة method  {{DOMxRef ("SpeechSynthesis.getVoices ()")}} قد تغيرت (عندما يكون {{Event ("voiceschanged")}} الحدث قد تم إطلاقه.)
versionchangeIndexedDBاكتملت معاملة versionchange.
{{Event("visibilitychange")}}{{DOMxRef("Event")}}Page visibilityأصبح محتوى علامة التبويب مرئيًا أو تم إخفاؤه.
{{Event("volumechange")}}{{DOMxRef("Event")}}HTML5 mediaتم تغيير الصوت.
{{Event("waiting")}}{{DOMxRef("Event")}}HTML5 mediaتوقف التشغيل بسبب نقص مؤقت في البيانات.
{{Event("wheel")}}{{DOMxRef("WheelEvent")}}DOM L3يتم تدوير زر عجلة جهاز التأشير في أي اتجاه.
+
+ +

أحداث غير قياسية

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
اسم الحدثنوع الحدثتخصيصيُُطلق عندما...
{{Event("afterscriptexecute")}}{{DOMxRef("Event")}}Mozilla Specificتم تنفيذ نص.
{{Event("beforescriptexecute")}}{{DOMxRef("Event")}}Mozilla Specificالنص على وشك التنفيذ.
{{Event("beforeinstallprompt")}}{{DOMxRef("Event")}}Chrome specificتتم مطالبة من قبل المستخدم بحفظ موقع ويب على شاشة رئيسية على الهاتف الجوال.
{{Event("cardstatechange")}}Firefox OS specificتقوم الخاصية {{DOMxRef("MozMobileConnection.cardState")}} بتغيير قيمة.
{{Event("change")}}{{DOMxRef("DeviceStorageChangeEvent")}}Firefox OS specificيتم إطلاق هذا الحدث في كل مرة يتم فيها إنشاء ملف أو تعديله أو حذفه في منطقة تخزين معينة.
{{Event("connectionInfoUpdate")}}Firefox OS specificتم تحديث المعلومات حول قوة الإشارة وسرعة الارتباط.
{{Event("cfstatechange")}}Firefox OS specificتتغير حالة إعادة توجيه الاتصال.
{{Event("datachange")}}Firefox OS specificيقوم ال Object {{DOMxRef("MozMobileConnection.data")}} بتغيير قيمة.
{{Event("dataerror")}}Firefox OS specificيتلقى ال Object {{DOMxRef("MozMobileConnection.data")}} خطأ من RIL.
{{Event("DOMMouseScroll")}} {{Deprecated_Inline}}Mozilla specificيتم تدوير زر عجلة جهاز التأشير (detail الخاصية هي عدد من الأسطر). (استخدم بدلا {{Event("wheel")}})
dragdrop {{Deprecated_Inline}}DragEventMozilla specificتم إسقاط عنصر (استخدم بدلا {{Event("drop")}}).
dragexit {{Deprecated_Inline}}DragEventMozilla specificجاري إنهاء عملية السحب (استخدم بدلا {{Event("dragend")}}).
draggesture {{Deprecated_Inline}}DragEventMozilla specificيبدأ المستخدم في سحب عنصر أو تحديد نص (استخدم بدل {{Event("dragstart")}}).
{{Event("icccardlockerror")}}Firefox OS specificفشلت احدى ال methods هذه {{DOMxRef("MozMobileConnection.unlockCardLock()")}} أو {{DOMxRef("MozMobileConnection.setCardLock()")}} .
{{Event("iccinfochange")}}Firefox OS specificتغير ال Object {{DOMxRef("MozMobileConnection.iccInfo")}} .
{{Event("localized")}}Mozilla Specificتم تحديد موقع الصفحة باستخدام الخصائص data-l10n-* .
{{Event("mousewheel")}} {{Deprecated_Inline}}IE inventedيتم تدوير زر عجلة جهاز التأشير.
{{Event("MozAudioAvailable")}}{{DOMxRef("Event")}}Mozilla specificالمخزن المؤقت الصوتي ممتلئ وتتوفر العينات الخام المقابلة.
MozBeforeResize {{Obsolete_Inline}}Mozilla specificنافذة على وشك أن يتم تغييرحجمها.
{{Event("mozbrowseractivitydone")}}Firefox OS Browser API-specificيتم إرساله عند اكتمال بعض الأنشطة (الوصف الكامل سيتم تحديده لاحقًا TBD).
{{Event("mozbrowserasyncscroll")}}Firefox OS Browser API-specificيتم إرساله عند تغير موضع التمرير داخل متصفح {{HTMLElement("iframe")}}.
{{Event("mozbrowseraudioplaybackchange")}}Firefox OS Browser API-specificيتم إرساله عند بدء تشغيل الصوت أو إيقاف تشغيله داخل محتوى المتصفح{{HTMLElement("iframe")}}.
{{Event("mozbrowsercaretstatechanged")}}Firefox OS Browser API-specificيتم إرساله عندما يتغير النص المحدد داخل المتصفح{{HTMLElement("iframe")}} .
{{Event("mozbrowserclose")}}Firefox OS Browser API-specificيتم إرساله عند استدعاء ()window.close داخل المستعرض {{HTMLElement("iframe")}}.
{{Event("mozbrowsercontextmenu")}}Firefox OS Browser API-specificيتم إرساله عندما يحاول متصفح {{HTMLElement ("iframe")}} فتح قائمة سياق.
{{Event("mozbrowserdocumentfirstpaint")}}Firefox OS Browser API-specificيتم إرساله عند ظهور لون طلاء جديد على أي مستند في المستعرض {{HTMLElement("iframe")}}.
{{Event("mozbrowsererror")}}Firefox OS Browser API-specificيتم إرساله عند حدوث خطأ أثناء محاولة تحميل محتوى داخل متصفح {{HTMLElement("iframe")}}.
{{Event("mozbrowserfindchange")}}Firefox OS Browser API-specificيتم إرساله عند إجراء عملية بحث على محتوى المتصفح {{HTMLElement ("iframe")}} (انظر HTMLIFrameElement search methods.)
{{Event("mozbrowserfirstpaint")}}Firefox OS Browser API-specificيتم إرساله عندما قوم بتلوين {{HTMLElement ("iframe")}} المحتوى لأول مرة (لا يتضمن هذا الطلاء الأولي منabout:blank.)
{{Event("mozbrowsericonchange")}}Firefox OS Browser API-specificيتم إرساله عند تغيير الرمز المفضل للمتصفح {{HTMLElement ("iframe")}}.
{{Event("mozbrowserlocationchange")}}Firefox OS Browser API-specificيتم إرساله عندما يتغير موقع متصفح {{HTMLElement ("iframe")}}.
{{Event("mozbrowserloadend")}}Firefox OS Browser API-specificيتم إرساله عندما ينتهي المتصفح {{HTMLElement ("iframe")}} من تحميل جميع أصوله.
{{Event("mozbrowserloadstart")}}Firefox OS Browser API-specificيتم إرساله عندما يبدأ المتصفح {{HTMLElement ("iframe")}} في تحميل صفحة جديدة.
{{Event("mozbrowsermanifestchange")}}Firefox OS Browser API-specificيتم إرساله عندما يتغير مسار بيان التطبيق ، في حالة المتصفح {{HTMLElement ("iframe")}} مع تضمين تطبيق ويب مفتوح فيه.
{{Event("mozbrowsermetachange")}}Firefox OS Browser API-specificيتم إرساله عند إضافة عنصر {{htmlelement ("meta")}} إلى محتوى المتصفح {{HTMLElement ("iframe")}} أو إزالته منه أو تغييره.
{{Event("mozbrowseropensearch")}}Firefox OS Browser API-specificيتم إرساله عند العثور على رابط لمحرك بحث.
{{Event("mozbrowseropentab")}}Firefox OS Browser API-specificيتم إرساله عند فتح علامة تبويب جديدة داخل متصفح {{HTMLElement ("iframe")}} نتيجة قيام المستخدم بإصدار أمر لفتح هدف ارتباط في علامة تبويب جديدة (على سبيل المثال Ctrl/Cmd + click.)
{{Event("mozbrowseropenwindow")}}Firefox OS Browser API-specificيتم إرساله عند استدعاء {{DOMxRef ("window.open ()")}} داخل iframe للمتصفح.
{{Event("mozbrowserresize")}}Firefox OS Browser API-specificيتم إرساله عند تغيير حجم نافذة المتصفح {{HTMLElement ("iframe")}}.
{{Event("mozbrowserscroll")}}Firefox OS Browser API-specificيتم إرساله عند تمرير محتوى المتصفح {{HTMLElement ("iframe")}}.
{{Event("mozbrowserscrollareachanged")}}Firefox OS Browser API-specificيتم إرساله عندما تتغير منطقة التمرير المتاحة في المتصفح {{HTMLElement ("iframe")}}. يمكن أن يحدث هذا عند تغيير الحجم وعندما يتغير حجم الصفحة (أثناء التحميل على سبيل المثال.)
{{Event("mozbrowserscrollviewchange")}}Firefox OS Browser API-specificيتم إرساله عند بدء أو إيقاف التمرير غير المتزامن (أي APCZ).
{{Event("mozbrowsersecuritychange")}}Firefox OS Browser API-specificيتم إرساله عندما تتغير حالة SSL داخل متصفح {{HTMLElement ("iframe")}}.
{{Event("mozbrowserselectionstatechanged")}} {{deprecated_inline}}Firefox OS Browser API-specificيتم إرساله عندما يتغير النص المحدد داخل المتصفح {{HTMLElement ("iframe")}}. لاحظ أنه تم تجاهل هذا ، وتستخدم عمليات التنفيذ الأحدث {{Event ("mozbrowsercaretstatechanged")}} بدلاً من ذلك.
{{Event("mozbrowsershowmodalprompt")}}Firefox OS Browser API-specific +

Sent when {{DOMxRef("window.alert","alert()")}}, {{DOMxRef("window.confirm","confirm()")}} or {{DOMxRef("window.prompt","prompt()")}} are called within a browser {{HTMLElement("iframe")}}

+
{{Event("mozbrowsertitlechange")}}Firefox OS Browser API-specificيتم إرساله عندما يتغير عنوان document.title داخل متصفح iframe.
{{Event("mozbrowserusernameandpasswordrequired")}}Firefox OS Browser API-specificيتم إرساله عند طلب مصادقة HTTP.
{{Event("mozbrowservisibilitychange")}}Firefox OS Browser API-specificيتم إرساله عندما تتغير حالة الرؤية لمتصفح iframe الحالي {{HTMLElement("iframe")}} , على سبيل المثال بسبب استدعاء {{DOMxRef("HTMLIFrameElement.setVisible","setVisible()")}}.
{{Event("MozGamepadButtonDown")}}To be specifiedيتم الضغط على زر لوحة الألعاب لأسفل.
{{Event("MozGamepadButtonUp")}}To be specifiedيتم تحرير زر لوحة الألعاب.
{{Event("MozMousePixelScroll")}} {{Deprecated_Inline}}Mozilla specificيتم تدوير زر عجلة جهاز التأشير (خاصية التفاصيل هي عدد من البكسل). (استخدم العجلة بدلاً من ذلك)
{{Event("MozOrientation")}} {{Deprecated_Inline}}Mozilla specificالبيانات الحديثة متاحة من مستشعر التوجه (انظر توجيه الجهاز).
{{Event("MozScrolledAreaChanged")}}{{DOMxRef("UIEvent")}}Mozilla specificتم تمرير عرض المستند أو تغيير حجمه.
{{Event("moztimechange")}}Mozilla specificتم تغيير وقت الجهاز.
MozTouchDown {{Deprecated_Inline}}Mozilla specificيتم وضع نقطة اتصال على سطح اللمس (استخدم touchstart بدلاً من ذلك).
MozTouchMove {{Deprecated_Inline}}Mozilla specificيتم تحريك نقطة اتصال على طول سطح اللمس (استخدم touchmove بدلاً من ذلك).
MozTouchUp {{Deprecated_Inline}}Mozilla specificتتم إزالة نقطة اتصال من سطح اللمس (استخدم touchend بدلاً من ذلك).
{{Event("alerting")}}{{DOMxRef("CallEvent")}}To be specifiedيتم تنبيه المراسل (رنين هاتفه/ها).
{{Event("busy")}}{{DOMxRef("CallEvent")}}To be specifiedخط المراسل مشغول.
{{Event("callschanged")}}{{DOMxRef("CallEvent")}}To be specifiedتمت إضافة مكالمة أو إزالتها من قائمة المكالمات الحالية.
onconnected {{Event("connected")}}{{DOMxRef("CallEvent")}}To be specifiedتم توصيل مكالمة.
{{Event("connecting")}}{{DOMxRef("CallEvent")}}To be specifiedمكالمة على وشك الاتصال.
{{Event("delivered")}}{{DOMxRef("SMSEvent")}}To be specifiedتم تسليم رسالة SMS بنجاح.
{{Event("dialing")}}{{DOMxRef("CallEvent")}}To be specifiedتم طلب رقم المراسل.
{{Event("disabled")}}Firefox OS specificتم تعطيل WiFi على الجهاز.
{{Event("disconnected")}}{{DOMxRef("CallEvent")}}To be specifiedتم قطع اتصال المكالمة.
{{Event("disconnecting")}}{{DOMxRef("CallEvent")}}To be specifiedمكالمة على وشك قطع الاتصال.
{{Event("enabled")}}Firefox OS specificتم تمكين WiFi على الجهاز.
{{Event("error_(Telephony)","error")}}{{DOMxRef("CallEvent")}}To be specifiedحدث خطأ.
{{Event("held")}}{{DOMxRef("CallEvent")}}To be specifiedتم تعليق المكالمة.
{{Event("holding")}}{{DOMxRef("CallEvent")}}To be specifiedمكالمة على وشك أن تعقد.
{{Event("incoming")}}{{DOMxRef("CallEvent")}}To be specifiedيتم تلقي مكالمة.
{{Event("received")}}{{DOMxRef("SMSEvent")}}To be specifiedتم استلام رسالة نصية قصيرة.
{{Event("resuming")}}{{DOMxRef("CallEvent")}}To be specifiedمكالمة على وشك الاستئناف.
{{Event("sent")}}{{DOMxRef("SMSEvent")}}To be specifiedتم إرسال رسالة نصية قصيرة.
{{Event("statechange")}}{{DOMxRef("CallEvent")}}To be specifiedتغيرت حالة المكالمة.
{{Event("statuschange")}}Firefox OS specificتغيرت حالة اتصال Wifi.
{{Event("overflow")}}{{DOMxRef("UIEvent")}}Mozilla specificتم تجاوز عنصر ما من خلال محتواه أو تم عرضه لأول مرة في هذه الحالة (يعمل فقط مع العناصر التي تم تصميمها باستخدام overflow != visible).
{{Event("smartcard-insert")}}Mozilla specificتم إدخال البطاقة الذكية smartcard 
{{Event("smartcard-remove")}}Mozilla specificتمت إزالة البطاقة الذكية smartcard .
{{Event("stkcommand")}}Firefox OS specificيتم إصدار الأمر STK Proactive من ICC.
{{Event("stksessionend")}}Firefox OS specificتم إنهاء جلسة STK بحلول ICC.
{{Event("touchenter")}}{{DOMxRef("TouchEvent")}}Touch Events Removed
{{Event("touchleave")}}{{DOMxRef("TouchEvent")}}Touch Events Removed
{{Event("underflow")}}{{DOMxRef("UIEvent")}}Mozilla specificلم يعد العنصر يغمر من خلال محتواه (يعمل فقط مع العناصر التي تم تصميمها باستخدام overflow != visible).
uploadprogress {{Deprecated_Inline}}{{DOMxRef("ProgressEvent")}}Mozilla Specificالتحميل قيد التقدم (انظر {{Event("progress")}}).
+

{{Event("ussdreceived")}}

+ 		Firefox OS specificتم استلام رسالة USSD جديدة
{{Event("voicechange")}}Firefox OS specificيقوم ال Object  {{DOMxRef("MozMobileConnection.voice")}} بتغيير القيم.
{{Event("msContentZoom")}}Microsoft specific
{{Event("MSManipulationStateChanged")}}Microsoft specific
{{Event("MSPointerHover")}} {{Deprecated_Inline}}Microsoft specific
+
+ +

أحداث خاصة بموزيللا

+ +
+

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

+
+ +

XUL أحداث

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
اسم الحدث +

نوع الحدث

+ 		تخصيصيُطلق عندما...
{{Event("broadcast")}}XULلاحظ أحد ال observer تغييرا في خصائص المذيع المراقب..
{{Event("CheckboxStateChange")}}XULحالة ال checkbox تم تغييره إما عن طريق إجراء المستخدم أو عن طريق برنامج نصي (مفيد لإمكانية الوصول).
closeXULتم الضغط على زر الإغلاق للنافذة.
{{Event("command")}}XULتم تنشيط عنصر.
{{Event("commandupdate")}}XULحدث تحديث الأمر على عنصر .commandset 
{{Event("DOMMenuItemActive")}}XUL تحوم قائمة أو menuitem أو تم تمييزها.
{{Event("DOMMenuItemInactive")}}XULلم تعد القائمة أو menuitem تحوم أو يتم تمييزها.
{{Event("popuphidden")}}PopupEventXULتم إخفاء القائمة المنبثقة أو اللوحة أو تلميح الأدوات.
{{Event("popuphiding")}}PopupEventXULA menupopup، لوحة، أو تلميح الأدوات على وشك أن تكون مخفية.
{{Event("popupshowing")}}PopupEventXULA menupopup، لوحة، أو تلميح الأدوات هو على وشك أن تصبح مرئية.
{{Event("popupshown")}}PopupEventXULأصبحت القائمة المنبثقة أو اللوحة أو تلميح الأدوات مرئية.
{{Event("RadioStateChange")}}XULحالة ال radio تم تغييره إما عن طريق إجراء المستخدم أو عن طريق برنامج نصي (مفيد لإمكانية الوصول).
{{Event("ValueChange")}}XULتم تغيير قيمة عنصر (شريط تقدم ، على سبيل المثال ، مفيد لإمكانية الوصول).
+
+ +

Add-on-specific events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
اسم الحدث +

نوع

+ +

الحدث

+ 		تخصيصيُطلق عندما...
MozSwipeGestureAddons specificيتم تمرير نقطة اتصال عبر سطح اللمس.
MozMagnifyGestureStartAddons specificتبدأ نقطتا اللمس في الابتعاد عن بعضهما البعض.
MozMagnifyGestureUpdateAddons specificتتحرك نقطتا اللمس بعيدًا عن بعضهما البعض (بعدMozMagnifyGestureStart).
MozMagnifyGestureAddons specificابتعدت نقطتا اللمس عن بعضهما البعض (بعد تسلسلMozMagnifyGestureUpdate).
MozRotateGestureStartAddons specificتبدأ نقطتا اللمس في التناوب حول نقطة.
MozRotateGestureUpdateAddons specificتدور نقطتا اللمس حول نقطة (بعد MozRotateGestureStart).
MozRotateGestureAddons specificتدور نقطتا اللمس حول نقطة (بعد تسلسلMozRotateGestureUpdate).
MozTapGestureAddons specificيتم الضغط على نقطتي اتصال على سطح اللمس.
MozPressTapGestureAddons specific"press-tap" حدثت على سطح اللمس (الإصبع الأول لأسفل ، والإصبع الثاني لأسفل ، والإصبع الثاني لأعلى ، والإصبع الأول لأعلى).
MozEdgeUIGestureAddons specificيتم تمرير نقطة اتصال عبر سطح اللمس لاستدعاء Edge UI (Win8 فقط).
MozAfterPaintAddons specificتم إعادة رسم المحتوى.
DOMPopupBlockedAddons specificتم حظر نافذة منبثقة.
DOMWindowCreatedAddons specificتم إنشاء نافذة.
DOMWindowCloseAddons specificنافذة على وشك أن تكون مغلقة.
DOMTitleChangedAddons specificتم تغيير عنوان النافذة.
DOMLinkAddedAddons specificتم إضافة رابط مستند.
DOMLinkRemovedAddons specificتمت إزالة رابط بالداخل من مستند.
DOMMetaAddedAddons specificتمت إضافة العنصرmeta إلى مستند.
DOMMetaRemovedAddons specificتمت إزالة العنصر  meta من المستند.
DOMWillOpenModalDialogAddons specificمربع حوار شكلي على وشك الفتح.
DOMModalDialogClosedAddons specificمربع حوار شكلي تم إغلاقه.
DOMAutoCompleteAddons specificتم إكمال محتوى عنصر تلقائيًا.
DOMFrameContentLoadedAddons specificانتهى تحميل الإطار (ولكن ليس مصادره التابعة).
AlertActiveAddons specificتم إظهار عنصر تنبيه notification .
AlertCloseAddons specificتم إغلاق عنصر تنبيه notification .
fullscreenAddons specificتم تبديل وضع ملء الشاشة في المتصفح.
sizemodechangeAddons specificدخلت النافذة / تركت وضع ملء الشاشة ، أو تم تصغيرها / تصغيرها.
MozEnteredDomFullscreenAddons specificDOM fullscreen تم إدخال الوضع.
SSWindowClosingAddons specificسيتوقف مخزن الجلسة عن تتبع هذه النافذة.
SSTabClosingAddons specificسيتوقف مخزن الجلسة عن تتبع علامة التبويب هذه.
SSTabRestoringAddons specificعلامة التبويب على وشك الاستعادة.
SSTabRestoredAddons specificتمت استعادة علامة تبويب.
SSWindowStateReadyAddons specificتم تبديل حالة النافذة إلى "ready".
SSWindowStateBusyAddons specificتم تبديل حالة النافذة الى"مشغول".
TabOpenAddons specificتم فتح علامة تبويب.
TabCloseAddons specificتم إغلاق علامة تبويب.
TabSelectAddons specificتم تحديد علامة تبويب.
TabShowAddons specificتم عرض علامة تبويب.
TabHideAddons specificتم إخفاء علامة تبويب.
TabPinnedAddons specificتم تثبيت علامة تبويب.
TabUnpinnedAddons specificتم إلغاء تثبيت علامة تبويب.
+
+ +

Developer tool-specific events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
اسم الحدث +

نوع

+ +

الحدث

+ 		تخصيصيُطلق عندما...
CssRuleViewRefresheddevtools specificتم تحديث طريقة عرض "Rules" لعارض الستايل.
CssRuleViewChangeddevtools specificتم تغيير طريقة عرض "Rules" لعارض الستايل.
CssRuleViewCSSLinkClickeddevtools specificتم الضغط على رابط لملف CSS في عرض "Rules" في عارض الستايل.
+
+ +

انظر أيضا

+ + diff --git a/files/ar/web/guide/css/getting_started/index.html b/files/ar/web/guide/css/getting_started/index.html new file mode 100644 index 0000000000..2d395bee37 --- /dev/null +++ b/files/ar/web/guide/css/getting_started/index.html @@ -0,0 +1,43 @@ +--- +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 +--- +

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/web/guide/css/getting_started/readable_css/index.html b/files/ar/web/guide/css/getting_started/readable_css/index.html new file mode 100644 index 0000000000..f2b50b3cb7 --- /dev/null +++ b/files/ar/web/guide/css/getting_started/readable_css/index.html @@ -0,0 +1,177 @@ +--- +title: Readable CSS +slug: Web/Guide/CSS/Getting_started/Readable_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +

{{ 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" new file mode 100644 index 0000000000..5490b5d1a7 --- /dev/null +++ "b/files/ar/web/guide/css/getting_started/\330\247\331\204\331\202\331\210\330\247\330\246\331\205/index.html" @@ -0,0 +1,383 @@ +--- +title: القوائم +slug: Web/Guide/CSS/Getting_started/القوائم +translation_of: Learn/CSS/Styling_text/Styling_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» لتعيين نمط القائمة، لتحديد نوع العلامة التي تظهر قبل كل عنصرفي القائمة.

+ + + +
+
 
+ +

مثال                                                                                                                                              

+ +
القاعدة التّالية تجعل العناصر في القائمة المرتّبة <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 new file mode 100644 index 0000000000..20621b40b0 --- /dev/null +++ b/files/ar/web/guide/css/index.html @@ -0,0 +1,23 @@ +--- +title: CSS developer guide +slug: Web/Guide/CSS +tags: + - CSS + - Guide + - Landing + - NeedsTranslation + - TopicStub +translation_of: Learn/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/html/html5/html5_element_list/index.html b/files/ar/web/guide/html/html5/html5_element_list/index.html new file mode 100644 index 0000000000..141eb69ef0 --- /dev/null +++ b/files/ar/web/guide/html/html5/html5_element_list/index.html @@ -0,0 +1,598 @@ +--- +title: مجموعه عناصر لغة HTML5 +slug: Web/Guide/HTML/HTML5/HTML5_element_list +tags: + - اتش تي ام ال + - اتش تي ام ال 5 + - المبتدئين + - الويب + - انترنت + - دليل + - وسوم +translation_of: Web/HTML/Element +--- +

كل عناصر 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/html/html5/index.html b/files/ar/web/guide/html/html5/index.html new file mode 100644 index 0000000000..cfa45a9839 --- /dev/null +++ b/files/ar/web/guide/html/html5/index.html @@ -0,0 +1,178 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +tags: + - Guide + - HTML + - HTML5 + - NeedsTranslation + - Overview + - TopicStub + - Web + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5 هي أحدث تطور للمعاير الذي يعرف HTML. يمثل المصطلح مفهومين مختلفين:

+ + + +

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

+ + + +
+

Semantics

+ +
+
Sections and outlines in HTML5
+
A look at the new outlining and sectioning element in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.
+
أستخدام HTML5 audio and video
+
يتم تضمين عنصري {{HTMLElement ("audio")}} و {{HTMLElement ("video")}} والسماح بمعالجة محتوى الوسائط المتعددة الجديدة.
+
النماذج في HTML5
+
A look at improvements to web forms in HTML5: the constraint validation API, several new attributes, new values for the {{HTMLElement("input")}} attribute {{htmlattrxref("type", "input")}} and the new {{HTMLElement("output")}} element.
+
New semantic elements
+
Beside sections, media and forms elements, there are numerous new elements, like {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, or {{HTMLElement("meter")}} and {{HTMLElement("main")}}, increasing the amount of valid HTML5 elements.
+
Improvement in {{HTMLElement("iframe")}}
+
Using the {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe")}} attributes, authors can now be precise about the level of security and the wished rendering of an {{HTMLElement("iframe")}} element.
+
MathML
+
السماح بتضمين المعادلات الرياضية مباشرة.
+
مقدمة إلى HTML5
+
This article introduces how to indicate to the problem that you are using HTML5 in your web design or web application.
+
HTML5-compliant parser
+
The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.
+
+ +

Connectivity

+ +
+
Web Sockets
+
يسمح بإنشاء اتصال دائم بين الصفحة والخادم وتبادل البيانات بدون تنسيق HTML (Non-HTML) من خلال هذه الوسائل.
+
Server-sent events
+
Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.
+
WebRTC
+
This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.
+
+ +

Offline & storage

+ +
+
Offline resources: the application cache
+
Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.
+
Online and offline events
+
Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.
+
WHATWG client-side session and persistent storage (aka DOM Storage)
+
Client-side session and persistent storage allows web applications to store structured data on the client side.
+
IndexedDB
+
IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.
+
Using files from web applications
+
Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the {{HTMLElement("input")}} of type file HTML element's new multiple attribute. There also is FileReader.
+
+ +

Multimedia

+ +
+
Using HTML5 audio and video
+
The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.
+
WebRTC
+
This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.
+
Using the Camera API
+
Allows using, manipulating, and storing an image from the computer's camera.
+
Track and WebVTT
+
The {{HTMLElement("track")}} element allows subtitles and chapters. WebVTT is a text track format.
+
+ +

3D, graphics & effects

+ +
+
Canvas Tutorial
+
Learn about the new {{HTMLElement("canvas")}} element and how to draw graphs and other objects in Firefox.
+
HTML5 text API for <canvas> elements
+
The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.
+
WebGL
+
WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.
+
SVG
+
An XML-based format of vectorial images that can directly be embedded in the HTML.
+
+
+
+
+ +
+
+
+ +
+

Performance & integration

+ +
+
Web Workers
+
Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.
+
XMLHttpRequest Level 2
+
Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind Ajax.
+
JIT-compiling JavaScript engines
+
The new generation of JavaScript engines is much more powerful, leading to greater performance.
+
History API
+
Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.
+
The contentEditable attribute: transform your website to a wiki!
+
HTML5 has standardized the contentEditable attribute. Learn more about this feature.
+
Drag and drop
+
The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
+
Focus management in HTML
+
The new HTML5 activeElement and hasFocus attributes are supported.
+
Web-based protocol handlers
+
You can now register web applications as protocol handlers using the navigator.registerProtocolHandler() method.
+
requestAnimationFrame
+
Allows control of animations rendering to obtain optimal performance.
+
Fullscreen API
+
Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.
+
Pointer Lock API
+
Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.
+
Online and offline events
+
In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.
+
+ +

Device access

+ +
+
Using the Camera API
+
Allows using, manipulating, and storing an image from the computer's camera.
+
Touch events
+
Handlers to react to events created by a user pressing touch screens.
+
Using geolocation
+
Let browsers locate the position of the user using geolocation.
+
Detecting device orientation
+
Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).
+
Pointer Lock API
+
Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.
+
+ +

Styling

+ +

CSS has been extended to be able to style elements in a much more complex way. This is often referred as CSS3, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.

+ +
+
New background styling features
+
It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and multiple backgrounds can be set.
+
More fancy borders
+
Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.
+
Animating your style
+
Using CSS Transitions to animate between different states or using CSS Animations to animate parts of the page without a triggering event, you can now control mobile elements on your page.
+
Typography improvement
+
Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and hyphenation, but also can add a shadow to it or control more precisely its decorations. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.
+
New presentational layouts
+
In order to improve the flexibility of designs, two new layouts have been added: the CSS multi-column layout, and the CSS flexible box layout.
+
+
+
diff --git a/files/ar/web/guide/index.html b/files/ar/web/guide/index.html new file mode 100644 index 0000000000..8d89a9e619 --- /dev/null +++ b/files/ar/web/guide/index.html @@ -0,0 +1,27 @@ +--- +title: دليل مطور الويب +slug: Web/Guide +tags: + - الويب + - تعقيب لموضوع + - توجيهات +translation_of: Web/Guide +--- +

هذه المقالات توفر المعلومات التي تساعدك على الإستفادة من التقنيات الخصصة و APIs (واجهة برمجة التطبيقات).

+ +
+

تذكير: هذه الصفحة ستكون غير منسقة لبعض الوقت حتى ننتهي من عملية نقل المحتوى. نحن آسفون!

+
+ +
{{LandingPageListSubpages}}
+ +
+
الجافا سكربت
+
الجافا سكربت هي لغة برمجة نصية قوية تستخدم لإنشاء تطبيقات الويب.
+
+ +

أُنظر أيضا

+ + 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" new file mode 100644 index 0000000000..9c8335471a --- /dev/null +++ "b/files/ar/web/guide/\330\247\331\204\330\261\330\263\331\210\331\205\330\247\330\252/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/html/element/input/index.html b/files/ar/web/html/element/input/index.html new file mode 100644 index 0000000000..4d6726e1bf --- /dev/null +++ b/files/ar/web/html/element/input/index.html @@ -0,0 +1,1380 @@ +--- +title: ': The Input (Form Input) element' +slug: Web/HTML/Element/input +tags: + - Data entry + - Element + - Forms + - HTML + - HTML forms + - HTML input tag + - Input + - MakeBrowserAgnostic + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/HTML/Element/input +--- +
{{HTMLRef}}
+ +

The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and {{Glossary("user agent")}}. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

+ +
{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}
+ + + +

<input> types

+ +

How an <input> works varies considerably depending on the value of its {{htmlattrxref("type", "input")}} attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted is text.

+ +

The available types are as follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeDescriptionBasic ExamplesSpec
{{HTMLElement("input/button", "button")}}A push button with no default behavior displaying the value of the {{anch('htmlattrdefvalue', 'value')}} attribute, empty by default. + + {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}}
{{HTMLElement("input/checkbox", "checkbox")}}A check box allowing single values to be selected/deselected. + + {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}}
{{HTMLElement("input/color", "color")}}A control for specifying a color; opening a color picker when active in supporting browsers. + + {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/date", "date")}}A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers. + + {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/datetime-local", "datetime-local")}}A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. + + {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/email", "email")}}A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. + + {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/file", "file")}}A control that lets the user select a file. Use the {{anch('htmlattrdefaccept', 'accept')}} attribute to define the types of files that the control can select. + + {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}}
{{HTMLElement("input/hidden", "hidden")}}A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it's hidden!
{{HTMLElement("input/image", "image")}}A graphical submit button. Displays an image defined by the src attribute. The {{anch('htmlattrdefalt', 'alt')}} attribute displays if the image {{anch('htmlattrdefsrc', 'src')}} is missing. + + {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}}
{{HTMLElement("input/month", "month")}}A control for entering a month and year, with no time zone. + + {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/number", "number")}}A control for entering a number. Displays a spinner and adds default validation when supported. Displays a numeric keypad in some devices with dynamic keypads. + + {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/password", "password")}}A single-line text field whose value is obscured. Will alert user if site is not secure. + + {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}}
{{HTMLElement("input/radio", "radio")}}A radio button, allowing a single value to be selected out of multiple choices with the same {{anch('htmlattrdefname', 'name')}} value. + + {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}}
{{HTMLElement("input/range", "range")}}A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction {{anch('htmlattrdefmin', 'min')}} and {{anch('htmlattrdefmax', 'max')}} to define the range of acceptable values. + + {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/reset", "reset")}}A button that resets the contents of the form to default values. Not recommended. + + {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}}
{{HTMLElement("input/search", "search")}}A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads. + + {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/submit", "submit")}}A button that submits the form. + + {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}}
{{HTMLElement("input/tel", "tel")}}A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads. + + {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/text", "text")}}The default value. A single-line text field. Line-breaks are automatically removed from the input value. + + {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}}
{{HTMLElement("input/time", "time")}}A control for entering a time value with no time zone. + + {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/url", "url")}}A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. + + {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/week", "week")}}A control for entering a date consisting of a week-year number and a week number with no time zone. + + {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
Obsolete values
{{HTMLElement("input/datetime", "datetime")}}{{deprecated_inline}} {{obsolete_inline}} A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. + + {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}{{HTMLVersionInline("5")}}
+ +

Attributes

+ +

The <input> element is so powerful because of its attributes; the {{htmlattrxref("type", "input")}} attribute, described with examples above, being the most important. Since every <input> element, regardless of type, is based on the {{domxref("HTMLInputElement")}} interface, they technically share the exact same set of attributes. However, in reality, most attributes have an effect on only a specific subset of input types. In addition, the way some attributes impact an input depends on the input type, impacting different input types in different ways.

+ +

This section provides a table listing all the attributes with a brief description. This table is followed by a list describing each attribute in greater detail, along with which input types they are associated with.Those that are common to most or all input types are defined in greater detail below. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages. This element includes the global attributes. Those with extra importance as it relates to <input> are highlighted.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attributes for the {{htmlelement('input')}} element include global HTML attributes and:
AttributeType or TypesDescription
{{anch('htmlattrdefaccept', 'accept')}}fileHint for expected file type in file upload controls
{{anch('htmlattrdefalt', 'alt')}}imagealt attribute for the image type. Required for accessibility
{{anch('htmlattrdefautocomplete', 'autocomplete')}}allHint for form autofill feature
{{anch('htmlattrdefautofocus', 'autofocus')}}allAutomatically focus the form control when the page is loaded
{{anch('htmlattrdefcapture', 'capture')}}fileMedia capture input method in file upload controls
{{anch('htmlattrdefchecked', 'checked')}}radio, checkboxWhether the command or control is checked
{{anch('htmlattrdefdirname', 'dirname')}}text, searchName of form field to use for sending the element's directionality in form submission
{{anch('htmlattrdefdisabled', 'disabled')}}allWhether the form control is disabled
{{anch('htmlattrdefform', 'form')}}allAssociates the control with a form element
{{anch('htmlattrdefformaction', 'formaction')}}image, submitURL to use for form submission
{{anch('htmlattrdefformenctype', 'formenctype')}}image, submitForm data set encoding type to use for form submission
{{anch('htmlattrdefformmethod', 'formmethod')}}image, submitHTTP method to use for form submission
{{anch('htmlattrdefformnovalidate', 'formnovalidate')}}image, submitBypass form control validation for form submission
{{anch('htmlattrdefformtarget', 'formtarget')}}image, submitBrowsing context for form submission
{{anch('htmlattrdefheight', 'height')}}imageSame as height attribute for {{htmlelement('img')}}; vertical dimension
{{anch('htmlattrdeflist', 'list')}}almost allValue of the id attribute of the {{htmlelement('datalist')}} of autocomplete options
{{anch('htmlattrdefmax', 'max')}}numeric typesMaximum value
{{anch('htmlattrdefmaxlength', 'maxlength')}}password, search, tel, text, urlMaximum length (number of characters) of value
{{anch('htmlattrdefmin', 'min')}}numeric typesMinimum value
{{anch('htmlattrdefminlength', 'minlength')}}password, search, tel, text, urlMinimum length (number of characters) of value
{{anch('htmlattrdefmultiple', 'multiple')}}email, fileBoolean. Whether to allow multiple values
{{anch('htmlattrdefname', 'name')}}allName of the form control. Submitted with the form as part of a name/value pair.
{{anch('htmlattrdefpattern', 'pattern')}}password, text, telPattern the value must match to be valid
{{anch('htmlattrdefplaceholder', 'placeholder')}}password, search, tel, text, urlText that appears in the form control when it has no value set
readonlyalmost allBoolean. The value is not editable
requiredalmost allBoolean. A value is required or must be check for the form to be submittable
{{anch('htmlattrdefsize', 'size')}}email, password, tel, textSize of the control
{{anch('htmlattrdefsrc', 'src')}}imageSame as src attribute for {{htmlelement('img')}}; address of image resource
{{anch('htmlattrdefstep', 'step')}}numeric typesIncremental values that are valid.
{{anch('htmlattrdeftype', 'type')}}allType of form control
{{anch('htmlattrdefvalue', 'value')}}allCurrent value of the form control. Submitted with the form as part of a name/value pair.
{{anch('htmlattrdefwidth', 'width')}}imageSame as width attribute for {{htmlelement('img')}}
+ +

A few additional non-standard attributes are listed following the descriptions of the standard attributes.

+ +

Individual attributes

+ +
+
{{htmlattrdef("accept")}}
+
+

Valid for the file input type only, the accept attribute defines which file types are selectable in a file upload control. See the {{HTMLElement("input/file", "file")}} input type.

+
+
{{htmlattrdef("alt")}}
+
+

Valid for the image button only, the alt attribute provides alternative text for the image, displaying the value of the attribute if the image src is missing or otherwise fails to load. See the {{HTMLElement("input/image", "image")}} input type.

+
+
{{htmlattrdef("autocomplete")}}
+
+

(Not a Boolean attribute!) The autocomplete attribute takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete simply recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device's contacts list to autocomplete email addresses in an email input field. See {{SectionOnPage("/en-US/docs/Web/HTML/Attributes/autocomplete", "Values")}} for permitted values.

+ +

The autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color, and password. This attribute has no effect on input types that do not return numeric or text data, being valid for all input types except checkbox, radio, file, or any of the button types.

+ +

See The HTML autocomplete attribute for additional information, including information on password security and how autocomplete is slightly different for hidden than for other input types.

+
+
{{htmlattrdef("autofocus")}}
+
+

A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the {{HTMLElement("dialog")}} containing the element has been displayed).

+ +
+

Note: An element with the autofocus attribute may gain focus before the {{domxref("DOMContentLoaded")}} event is fired.

+
+ +

No more than one element in the document may have the autofocus attribute. If put on more than one element, the first one with the attribute receives focus.

+ +

The autofocus attribute cannot be used on inputs of type hidden, since hidden inputs cannot be focused.

+ +
+

Warning: Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.

+
+ +

Use careful consideration for accessibility when applying the autofocus attribute. Automatically focusing on a control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.

+
+
{{htmlattrdef("capture")}}
+
+

Introduced in the HTML Media Capture specification and valid for the file input type only, the capture attribute defines which media—microphone, video, or camera—should be used to capture a new file for upload with file upload control in supporting scenarios. See the {{HTMLElement("input/file", "file")}} input type.

+
+
{{htmlattrdef("checked")}}
+
+

Valid for both radio and checkbox types, checked is a Boolean attribute. If present on a radio type, it indicates that that radio button is the currently selected one in the group of same-named radio buttons. If present on a checkbox type, it indicates that the checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement’s checked IDL attribute is updated.)

+ +
+

Note: Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently checked. If they are, the name and the value(s) of the checked controls are submitted.

+ +

For example, if a checkbox whose name is fruit has a value of cherry, and the checkbox is checked, the form data submitted will include fruit=cherry. If the checkbox isn't active, it isn't listed in the form data at all. The default value for checkboxes and radio buttons is on.

+
+
+
{{htmlattrdef("dirname")}}
+
+

Valid for text and search input types only, the dirname attribute enables the submission of the directionality of the element. When included, the form control will submit with two name/value pairs: the first being the name and value, the second being the value of the dirname as the name with the value of ltr or rtl being set by the browser.

+ + 
<form action="page.html" method="post">
+  <label>Fruit: <input type="text" name="fruit" dirname="fruit.dir" value="cherry"></label>
+  <input type="submit"/>
+</form>
+<!-- page.html?fruit=cherry&fruit.dir=ltr -->
+
+ +

When the form above is submitted, the input cause both the name / value pair of fruit=cherry and the dirname / direction pair of fruit.dir=ltr to be sent.

+
+
{{htmlattrdef("disabled")}}
+
+

A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.

+ +

Specifically, disabled inputs do not receive the {{domxref("Element/click_event", "click")}} event, and disabled inputs are not submitted with the form.

+ +
+

Note: Although not required by the specification, Firefox will by default persist the dynamic disabled state of an <input> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.

+
+
+
{{htmlattrdef("form")}}
+
+

A string specifying the {{HTMLElement("form")}} element with which the input is associated (that is, its form owner). This string's value, if present, must match the {{htmlattrxref("id")}} of a <form> element in the same document. If this attribute isn't specified, the <input> element is associated with the nearest containing form, if any.

+ +

The form attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.

+ +
+

Note: An input can only be associated with one form.

+
+
+
{{htmlattrdef('formaction')}}
+
+

Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.

+
+
{{htmlattrdef('formenctype')}}
+
+

Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.

+
+
{{htmlattrdef('formmethod')}}
+
+

Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.

+
+
{{htmlattrdef('formnovalidate')}}
+
+

Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.

+
+
{{htmlattrdef('formtarget')}}
+
+

Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.

+
+
{{htmlattrdef("height")}}
+
+

Valid for the image input button only, the height is the height of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.

+
+
{{htmlattrdef("id")}}
+
+

Global attribute valid for all elements, including all the input types, it defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking. The value is used as the value of the {{htmlelement('label')}}'s for attribute to link the label with the form control. See {{htmlelement('label')}}.

+
+
{{htmlattrdef("inputmode")}}
+
+

Global value valid for all elements, it provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Values include none, text, tel, url, email, numeric, decimal, and search.

+
+
{{htmlattrdef("list")}}
+
+

The value given to the list attribute should be. the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the {{htmlattrxref("type", "input")}} are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

+ + + +

{{EmbedLiveSample("datalist",400,275,"","", "nobutton")}}

+ +

It is valid on text, search, url, tel, email, date, month, week, time, datetime-local, number, range, and color.

+ +

Per the specifications, the list attribute is not supported by the hidden, password, checkbox, radio, file, or any of the button types.

+ +

Depending on the browser, the user may see a custom color palette suggested, tic marks along a range, or even a input that opens like a {{HTMLElement("select")}} but allows for non-listed values. Check out the browser compatibility table for the other input types.

+ +

See the {{htmlelement('datalist')}} element.

+
+
{{htmlattrdef("max")}}
+
+

Valid for date, month, week, time, datetime-local, number, and range, it defines the greatest value in the range of permitted values. If the {{htmlattrxref("value", "input")}} entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a number, then the element has no maximum value.

+ +

There is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 PM to 4 AM.

+
+
{{htmlattrdef("maxlength")}}
+
+

Valid for text, search, url, tel, email, and password, it defines the maximum number of characters (as UTF-16 code units) the user can enter into the field. This must be an integer value 0 or higher. If no maxlength is specified, or an invalid value is specified, the field has no maximum length. This value must also be greater than or equal to the value of minlength.

+ +

The input will fail constraint validation if the length of the text entered into the field is greater than maxlength UTF-16 code units long. By default, browsers prevent users from entering more characters than allowed by the maxlength attribute. See {{anch("Client-side validation")}} for more information.

+
+
{{htmlattrdef("min")}}
+
+

Valid for date, month, week, time, datetime-local, number, and range, it defines the most negative value in the range of permitted values. If the {{htmlattrxref("value", "input")}} entered into the element is less than this this, the element fails constraint validation. If the value of the min attribute isn't a number, then the element has no minimum value.

+ +

This value must be less than or equal to the value of the max attribute. If the min attribute is present but is not specified or is invalid, no min value is applied. If the min attribute is valid and a non-empty value is less than the minimum allowed by the min attribute, constraint validation will prevent form submission. See {{anch("Client-side validation")}} for more information.

+ +

There is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 PM to 4 AM.

+
+
{{htmlattrdef("minlength")}}
+
+

Valid for text, search, url, tel, email, and password, it defines the minimum number of characters (as UTF-16 code units) the user can enter into the entry field. This must be an non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the input has no minimum length.

+ +

The input will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long, preventing form submission. See {{anch("Client-side validation")}} for more information.

+
+
{{htmlattrdef("multiple")}}
+
+

The Boolean multiple attribute, if set, means the user can enter comma separated email addresses in the email widget or can choose more than one file with the file input. See the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/file", "file")}} input type.

+
+
{{htmlattrdef("name")}}
+
+

A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted.

+ +
What's in a name
+ +

Consider the name a required attribute (even though it's not). If an input has no name specified, or name is empty, the input's value is not submitted with the form! (Disabled controls, unchecked radio buttons, unchecked checkboxes, and reset buttons are also not sent.)

+ +

There are two special cases:

+ +
    +
  1. _charset_ : If used as the name of an <input> element of type {{HTMLElement("input/hidden", "hidden")}}, the input's value is automatically set by the {{Glossary("user agent")}} to the character encoding being used to submit the form.
    2. +
  2. isindex: For historical reasons, the name isindex is not allowed.
    3. +
+ +
name and radio buttons
+ +

The name attribute creates a unique behavior for radio buttons.

+ +

Only one radio button in a same-named group of radio buttons can be checked at a time. Selecting any radio button in that group automatically deselects any currently-selected radio button in the same group. The value of that one checked radio button is sent along with the name if the form is submitted,

+ +

When tabbing into a series of same-named group of radio buttons, if one is checked, that one will receive focus. If they aren't grouped together in source order, if one of the group is checked, tabbing into the group starts when the first one in the group is encountered, skipping all those that aren't checked. In other words, if one is checked, tabbing skips the unchecked radio buttons in the group. If none are checked, the radio button group receives focus when the first button in the same name group is reached.

+ +

Once one of the radio buttons in a group has focus, using the arrow keys will navigate through all the radio buttons of the same name, even if the radio buttons are not grouped together in the source order.

+ +
HTMLFormElement.elements
+ +

When an input element is given a name, that name becomes a property of the owning form element's {{domxref("HTMLFormElement.elements")}} property. If you have an input whose name is set to guest and another whose name is hat-size, the following code can be used:

+ + 
let form = document.querySelector("form");
+
+let guestName = form.elements.guest;
+let hatSize = form.elements["hat-size"];
+
+ +

When this code has run, guestName will be the {{domxref("HTMLInputElement")}} for the guest field, and hatSize the object for the hat-size field.

+ +
+

Warning: Avoid giving form elements a name that corresponds to a built-in property of the form, since you would then override the predefined property or method with this reference to the corresponding input.

+
+
+
{{htmlattrdef("pattern")}}
+
+
+

The pattern attribute, when specified, is a regular expression that the input's {{htmlattrxref("value")}} must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

+ +

If the pattern attribute is present but is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. If the pattern attribute is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission.

+ +
+

Tip: If using the pattern attribute, inform the user about the expected format by including explanatory text nearby. You can also include a {{htmlattrxref("title", "input")}} attribute to explain what the requirements are to match the pattern; most browsers will display this title as a tooltip. The visible explanation is required for accessibility. The tooltip is an enhancement.

+
+
+ +

See {{anch("Client-side validation")}} for more information.

+
+
{{htmlattrdef("placeholder")}}
+
+

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that provides a hint as to the expected type of data, rather than an explanation or prompt. The text must not include carriage returns or line feeds. So for example if a field is expected to capture a user's first name, and its label is "First Name", a suitable placeholder might be "e.g. Mustafa".

+ +
+

Note: The placeholder attribute is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels")}} for more information.

+
+
+
{{htmlattrdef("readonly")}}
+
+

A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input. The readonly attribute is supported text, search, url, tel, email, date, month, week, time, datetime-local, number, and password input types.

+ +

See the HTML attribute: readonly for more information.

+
+
{{htmlattrdef("required")}}
+
+

required is a Boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. The required attribute is supported text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, and file.

+ +

See {{anch("Client-side validation")}} and the HTML attribute: required for more information.

+
+
{{htmlattrdef("size")}}
+
Valid for email, password, tel, and text input types only. Specifies how much of the input is shown. Basically creates same result as setting CSS width property with a few specialities. The actual unit of the value depends on the input type. For password and text, it is a number of characters (or em units) with a default value of 20, and for others, it is pixels. CSS width takes precedence over size attribute.
+
{{htmlattrdef("src")}}
+
+

Valid for the image input button only, the src is string specifying the URL of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.

+
+
{{htmlattrdef("step")}}
+
+
+

Valid for the numeric input types, including number, date/time input types, and range, the step attribute is a number that specifies the granularity that the value must adhere to.

+ +

If not explicitly included, step defaults to 1 for number and range, and 1 unit type (second, week, month, day) for the date/time input types. The value can must be a positive number—integer or float—or the special value any, which means no stepping is implied, and any value is allowed (barring other constraints, such as {{anch("min")}} and {{anch("max")}}).

+ +

If any is not explicity set, valid values for the number, date/time input types, and range input types are equal to the basis for stepping - the {{anch("min")}} value and increments of the step value, up to the {{anch("max")}} value, if specified.

+ +

For example, if you have <input type="number" min="10" step="2">, then any even integer, 10 or greater, is valid. If omitted, <input type="number">, any integer is valid, but floats (like 4.2) are not valid, because step defaults to 1. For 4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="number" min="-5.2">

+ +
+

Note: When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid pseudoclass.

+
+
+ +

The step attribute is expressed in seconds. The step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms). The default step is 60 seconds.

+ +

See {{anch("Client-side validation")}} for more information.

+
+
{{htmlattrdef("tabindex")}}
+
+

Global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. As all input types except for input of type hidden are focusable, this attribute should not be used on form controls, because doing so would require the management of the focus order for all elements within the document with the risk of harming usability and accessibility if done incorrectly.

+
+
{{htmlattrdef('title')}}
+
+

Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the {{htmlelement('label')}} element with a for attribute set to the form control's {{htmlattrdef('id')}} attribute. See {{anch("Labels")}} below.

+
+
{{htmlattrdef("type")}}
+
+

A string specifying the type of control to render. For example, to create a checkbox, a value of checkbox is used. If omitted (or an unknown value is specified), the input type text is used, creating a plaintext input field.

+ +

Permitted values are listed in {{anch("<input> types", "<input> types")}} above.

+
+
{{htmlattrdef("value")}}
+
+

The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective {{domxref("HTMLInputElement")}} object's value property. The value attribute is always optional, though should be considered mandatory for checkbox, radio, and hidden.

+
+
{{htmlattrdef("width")}}
+
+

Valid for the image input button only, the width is the width of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.

+
+
+ +

Non-standard attributes

+ +

The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeDescription
{{anch("autocorrect")}}A string indicating whether or not autocorrect is on or off. Safari only.
{{anch("incremental")}}Whether or not to send repeated {{domxref("HTMLInputElement/search_event", "search")}} events to allow updating live search results while the user is still editing the value of the field. WebKit and Blink only (Safari, Chrome, Opera, etc.).
{{anch("mozactionhint")}}A string indicating the type of action that will be taken when the user presses the Enter or Return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. Firefox for Android only.
{{anch("orient")}}Sets the orientation of the range slider. Firefox only.
{{anch("results")}}The maximum number of items that should be displayed in the drop-down list of previous search queries. Safari only.
{{anch("webkitdirectory")}}A Boolean indicating whether or not to only allow the user to choose a directory (or directories, if {{anch("multiple")}} is also present)
+ +
+
{{htmlattrdef("autocorrect")}} {{non-standard_inline}}
+
{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}
+
{{htmlattrdef("incremental")}} {{non-standard_inline}}
+
{{page("/en-US/docs/Web/HTML/Element/input/search", "incremental-include")}}
+
{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
+
{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}
+
{{htmlattrdef("orient")}} {{non-standard_inline}}
+
{{page("/en-US/docs/Web/HTML/Element/input/range", "orient-include")}}
+
{{htmlattrdef("results")}} {{non-standard_inline}}
+
{{page("/en-US/docs/Web/HTML/Element/input/search", "results-include")}}
+
{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}
+
{{page("/en-US/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}
+
+ +

Methods

+ +

The following methods are provided by the {{domxref("HTMLInputElement")}} interface which represents <input> elements in the DOM. Also available are those methods specified by the parent interfaces, {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, and {{domxref("EventTarget")}}.

+ +
+
{{domxref("HTMLInputElement.checkValidity", "checkValidity()")}}
+
Immediately runs the validity check on the element, triggering the document to fire the {{domxref("HTMLInputElement.invalid_event", "invalid")}} event at the element if the value isn't valid.
+
{{domxref("HTMLFormElement.reportValidity", "reportValidity()")}}
+
Returns true if the element's value passes validity checks; otherwise, returns false.
+
{{domxref("HTMLInputElement.select", "select()")}}
+
Selects the entire content of the <input> element, if the element's content is selectable. For elements with no selectable text content (such as a visual color picker or calendar date input), this method does nothing.
+
{{domxref("HTMLInputElement.setCustomValidity", "setCustomValidity()")}}
+
Sets a custom message to display if the input element's value isn't valid.
+
{{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}
+
Sets the contents of the specified range of characters in the input element to a given string. A selectMode parameter is available to allow controlling how the existing content is affected.
+
{{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}
+
Selects the specified range of characters within a textual input element. Does nothing for inputs which aren't presented as text input fields.
+
{{domxref("HTMLInputElement.stepDown", "stepDown()")}}
+
Decrements the value of a numeric input by one, by default, or by the specified number of units.
+
{{domxref("HTMLInputElement.stepUp", "stepUp()")}}
+
Increments the value of a numeric input by one or by the specified number of units.
+
+ +

CSS

+ +

Inputs, being replaced elements, have a few features not applicable to non form elements. There are CSS selectors that can specification target form controls based on their UI features, also known as UI pseudo-classes. The input element can also be targeted by type with attribute selectors. There are some properties that are especially useful as well.

+ +

UI pseudo-classes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Captions super relevant to the {{htmlelement("input")}} element:
Pseudo-classDescription
{{Cssxref(":enabled")}}Any currently enabled element that can be activated (selected, clicked on, typed into, etc.) or accept focus and also has a disabled state, in which it can't be activated or accept focus.
{{Cssxref(":disabled")}}Any currently disabled element that has an enabled state, meaing it otherwise could be activated (selected, clicked on, typed into, etc.) or accept focus were it not disabled.
{{Cssxref(":read-only")}}Element not editable by the user
{{Cssxref(":read-write")}}Element that is editable by the user.
{{Cssxref(":placeholder-shown")}}Element that is currently displaying placeholder text, including {{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements with the {{anch('htmlattrdefplaceholder', 'placeholder')}} attribute present that has, as of yet, no value.
{{Cssxref(":default")}}Form elements that are the default in a group of related elements. Matches {{HTMLElement("input/checkbox", "checkbox")}} and {{HTMLElement("input/radio", "radio")}} input types that were checked on page load or render.
{{Cssxref(":checked")}}Matches {{HTMLElement("input/checkbox", "checkbox")}} and {{HTMLElement("input/radio", "radio")}} input types that are currently checked (and the ({{HTMLElement("option")}} in a {{HTMLElement("select")}} that is currently selected).
{{Cssxref(":indeterminate")}}{{HTMLElement("input/checkbox", "checkbox")}} elements whose indeterminate property is set to true by JavaScript, {{HTMLElement("input/radio", "radio")}} elements, when all radio buttons with the same name value in the form are unchecked, and {{HTMLElement("progress")}} elements in an indeterminate state
{{Cssxref(":valid")}}Form controls that can have constraint validation applied and are currently valid.
{{Cssxref(":invalid")}}Form controls that have constraint validation applied and are currently not valid. Matches a form control whose value doesn't match the constraints set on it by it's attributes, such as {{anch('htmlattrdefrequired', 'required')}}, {{anch('htmlattrdefpattern', 'pattern')}} , {{anch('htmlattrdefstep', 'step')}} and {{anch('htmlattrdefmax', 'max')}}.
{{Cssxref(":in-range")}}A non-empty input whose current value is within the range limits specified by the {{anch('htmlattrdefmin', 'min')}} and {{anch('htmlattrdefmax', 'max')}} attributes and the {{anch('htmlattrdefstep', 'step')}} .
{{Cssxref(":out-of-range")}}A non-empty input whose current value is NOT within the range limits specified by the {{anch('htmlattrdefmin', 'min')}} and {{anch('htmlattrdefmax', 'max')}} attributes or does not adher to the {{anch('htmlattrdefstep', 'step')}} constraint.
{{Cssxref(":required")}}{{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element that has the {{ htmlattrxref("required", "input")}} attribute set on it. Only matches elements that can be required. The attribute included on a non-requirable element will not make for a match.
{{Cssxref(":optional")}}{{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element that does NOT have the {{ htmlattrxref("required", "input")}} attribute set on it. Does not match elements that can't be required.
{{Cssxref(":blank")}}{{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements that currently have no value.
{{Cssxref(":user-invalid")}}Similar to :invalid, but is activated on blur. Matches invalid input but only after the user interaction, such as by focusing on the control, leaving the control, or attempting to submit the form containing the invalid control.
+ +

Examples

+ +

We can style a checkbox label based on whether the checkbox is checked or not. In this example, we are styling the {{cssxref('color')}} and {{cssxref('font-weight')}} of the {{htmlelement('label')}} that comes immediately after a checked input. We haven't applied any styles if the input is not checked.

+ +
+ + +
input:checked + label {
+  color: red;
+  font-weight: bold;
+}
+
+ +

{{EmbedLiveSample('checkbox_label', 500, 80)}}

+
+ +

Attribute selectors

+ +

It is possible to target different types of form controls based on their {{anch('htmlattrdeftype', 'type')}} using attribute selectors. CSS attribute selectors match elements based on either just the presence of a attribute or the value of a given attribute.

+ +
/* matches a password input */
+input[type="password"] {}
+
+/* matches a form control whose valid values are limited to a range of values*/
+input[min][max] {}
+
+/* matches a form control with with a pattern attribute */
+ input[pattern] {}
+ +

::placeholder

+ +

By default, the appearance of placeholder text is a translucent or light gray. The {{cssxref('::placeholder')}} pseudo-element is the input's placeholder text. It can be styled with a limited subset of CSS properties.

+ +
::placeholder {
+  color: blue;
+}
+ +

Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using ::placeholder in its selector.

+ +

appearance

+ +

The {{cssxref("appearance")}} property enables the displaying of (almost) any element as a platform-native style based on the operating system's theme as well as the removal of any platform-native styling with the none value.

+ +

You could make a <div> look like a radio button with div {appearance: radio;} or a radio look like a checkbox with [type="checkbox] {appearance: checkbox;}, but don't.

+ +

Setting appearance: none removes platform native borders, but not functionality.

+ +

caret-color

+ +

A property specific to text entry-related elements is the CSS {{cssxref("caret-color")}} property, which lets you set the color used to draw the text input caret:

+ +

HTML

+ +
<label for="textInput">Note the red caret:</label>
+<input id="textInput" class="custom" size="32">
+
+ +

CSS

+ +
input.custom {
+  caret-color: red;
+  font: 16px "Helvetica", "Arial", "sans-serif"
+}
+
+ +

Result

+ +

{{EmbedLiveSample('caret-color', 500, 80)}}

+ +

object-position and object-fit

+ +

In certain cases (typically involving non-textual inputs and specialized interfaces), the <input> element is a replaced element. When it is, the position and size of the element's size and positioning within its frame can be adjusted using the CSS {{cssxref("object-position")}} and {{cssxref("object-fit")}} properties

+ +

Styling

+ +

For more information about adding color to elements in HTML, see:

+ + + +

Also see:

+ + + +

Additional features

+ +

Labels

+ +

Labels are needed to associate assistive text with an <input>. The {{HTMLElement("label")}} element provides explanatory information about a form field that is always appropriate (aside from any layout concerns you have). It's never a bad idea to use a <label> to explain what should be entered into an <input> or {{HTMLElement("textarea")}}.

+ +

Associated labels

+ +

The semantic pairing of <input> and <label> elements is useful for assistive technologies such as screen readers. By pairing them using the <label>'s {{htmlattrxref("for", "label")}} attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.

+ +

It does not suffice to have plain text adjacent to the <input> element,. Rather, usability and accessibility requires the inclusion of either implicit or explicit {{HTMLElement("label")}}:

+ +
<!-- inaccessible -->
+<p>Enter your name: <input id="name" type="text" size="30"></p>
+
+<!-- implicit label -->
+<p><label>Enter your name: <input id="name" type="text" size="30"></label></p>
+
+<!-- explicit label -->
+<p><label for="name">Enter your name: </label><input id="name" type="text" size="30"></p>
+ +

The first example is inaccessible: no relationship exists between the prompt and the <input> element.

+ +

In addition to an accessible name, the label provides a larger 'hit' area for mouse and touch screen users to click on or touch. By pairing a <label> with an <input>, clicking on either one will focus the <input>. If you use plain text to "label" your input, this won't happen. Having the prompt part of the activation area for the input is helpful for people with motor control conditions.

+ +

As web developers, it's important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your web site—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.

+ +

Placeholders are not accessible

+ +

The {{htmlattrxref("placeholder", "input")}} attribute lets you specify text that appears within the <input> element's content area itself when it is empty. The placeholder should never be required in order to understand your forms. It is not a label, and should not be used as a substitute, because it isn't. The placeholder is used to provide a hint as to what an inputted value should look like, not an explanation or prompt.

+ +

Not only is the placeholder not accessible to screen readers, but once the user enters any text into the form control, or if the form control already has a value, the placeholder disappears. Browsers with automatic page translation features may skip over attributes when translating, meaning the placeholder may not get translated.

+ +
+

Don't use the {{htmlattrxref("placeholder", "input")}} attribute if you can avoid it. If you need to label an <input> element, use the {{HTMLElement("label")}} element.

+
+ +

Client-side validation

+ +
+

Warning: Client-side validation is useful, but it does not guarantee that the server will receive valid data. If the data must be in a specific format, always verify it also on the server-side, and return a 400 HTTP response if the format is invalid.

+
+ +

In addition to using CSS to style inputs based on the {{cssxref(":valid")}} or {{cssxref(":invalid")}} UI states based on the current state of each input, as noted in the {{anch('UI pseudo-classes')}} section above, the browser provides for client-side validation on (attempted) form submission. On form submission, if there is a form control that fails constraint validation, supporting browsers will display an error message on the first invalid form control; displaying a default message based on the error type, or a message set by you.

+ +

Some input types and other attributes place limits on what values are valid for a given input. For example, <input type="number" min="2" max="10" step="2"> means only the number 2, 4, 6, 8, or 10 are valid. Several errors could occur, including a rangeUnderflow error if the value is less than 2, rangeOverflow if greater than 10, stepMismatch if the value is a number between 2 and 10, but not an even integer (does not match the requirements of the step attribute), or typeMismatch if the value is not a number.

+ +

For the input types whose domain of possible values is periodic (that is, at the highest possible value, the values wrap back around to the beginning rather than ending), it's possible for the values of the {{htmlattrxref("max")}} and {{htmlattrxref("min")}} properties to be reversed, which indicates that the range of permitted values starts at min, wraps around to the lowest possible value, then continues on until max is reached. This is particularly useful for dates and times, such as when you want to allow the range to be from 8 PM to 8 AM:

+ +
<input type="time" min="20:00" max="08:00" name="overnight">
+ +

Specific attributes and their values can lead to a specific error {{domxref('ValidityState')}}:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Validity object errors depend on the {{htmlelement('input')}} attributes and their values:
AttributeRelevent propertyDescription
{{anch('htmlattrdefmax', 'max')}}{{domxref('validityState.rangeOverflow')}}Occurs when the value is greater than the maximum value as defined by the max attribute
{{anch('htmlattrdefmaxlength', 'maxlength')}}{{domxref('validityState.tooLong')}}Occurs when the number of characters is greater than the number allowed by the maxlength property
{{anch('htmlattrdefmin', 'min')}}{{domxref('validityState.rangeUnderflow')}}Occurs when the value is less than the minimum value as defined by the min attribute
{{anch('htmlattrdefminlength', 'minlength')}}{{domxref('validityState.tooShort')}}Occurs when the number of characters is less than the number required by the minlength property
{{anch('htmlattrdefpattern', 'pattern')}}{{domxref('validityState.patternMismatch')}}Occurs when a pattern attribute is included with a valid regular expression and the value does not match it.
{{anch('htmlattrdefrequired', 'required')}}{{domxref('validityState.valueMissing')}}Occurs when the required attribute is present but the value is null or radio or checkbox is not checked.
{{anch('htmlattrdefstep', 'step')}}{{domxref('validityState.stepMismatch')}}The value doesn't match the step increment. Increment default is 1, so only integers are valid on type="number" is step is not included. step="any" will never throw this error.
{{anch('htmlattrdeftyoe', 'type')}}{{domxref('validityState.typeMismatch')}}Occurs when the value is not of the correct type, for example a email does not contain an @ or a url doesn't contain a protocol.
+ +

If a form control doesn't have the required attribute, no value, or an empty string, is not invalid. Even if the above attributes are present, with the exception of required, and empty string will not lead to an error.

+ +

We can set limits on what values we accept, and supporting browsers will natively validate these form values and alert the user if there is a mistake when the form is submitted.

+ +

In addition to the errors described in the table above, the validityState interface contains the badInput, valid, and customError boolean readonly properties. The validity object includes:

+ + + +

For each of these Boolean properties, a value of true indicates that the specified reason validation may have failed is true, with the exception of the valid property, which is true if the element's value obeys all constraints.

+ +

If there is an error, supporting browsers will both alert the user and prevent the form from being submitted. A word of caution: if a custom error is set to a truthy value (anything other than the empty string or null), the form will be be prevented from being submitted. If there is no custom error message, and none of the other properties return true, valid will be true, and the form can be submitted.

+ +
function validate(input) {
+  let validityState_object = input.validity;
+  if(validityState_object.valueMissing) {
+     input.setCustomValidity('A value is required');
+  } else if (input.rangeUnderflow) {
+    input.setCustomValidity('Your value is too low');
+  } else if (input.rangeOverflow) {
+    input.setCustomValidity('Your value is too high');
+  } else {
+    input.setCustomValidity('');
+  }
+}
+ +

The last line, setting the custom validity message to the error string is vital. If the user makes an error, and the validity is set, it will fail to submit, even if all of the values are valid, until the message is null.

+ +

Example

+ +

If you want to present a custom error message when a field fails to validate, you need to use the Constraint validation features available on <input> (and related) elements. Take the following form:

+ +
<form>
+  <label for="name">Enter username (upper and lowercase letters): </label>
+  <input type="text" name="name" id="name" required pattern="[A-Za-z]+">
+  <button>Submit</button>
+</form>
+ +

The basic HTML form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the pattern.

+ +

If you wanted to instead display custom error messages, you could use JavaScript like the following:

+ +
const nameInput = document.querySelector('input');
+const form = document.querySelector('form');
+
+nameInput.addEventListener('input', () => {
+  nameInput.setCustomValidity('');
+  nameInput.checkValidity();
+});
+
+nameInput.addEventListener('invalid', () => {
+  if(nameInput.value === '') {
+    nameInput.setCustomValidity('Enter your username!');
+  } else {
+    nameInput.setCustomValidity('Usernames can only contain upper and lowercase letters. Try again!');
+  }
+});
+ +

The example renders like so:

+ +

{{EmbedLiveSample('Client-side_validation')}}

+ +

In brief:

+ + + +
+

Note: Always validate input constraints both client side and server side. Constraint validation doesn't remove the need for validation on the server side. Invalid values can still be sent by older browsers or by bad actors.

+
+ +
+

Note: Firefox supported a proprietary error attribute — x-moz-errormessage — for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (see {{bug(1513890)}}).

+
+ +

Localization

+ +

The allowed inputs for certain <input> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.

+ +

Firefox uses the following heuristics to determine the locale to validate the user's input (at least for type="number"):

+ + + +

Technical summary

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, listed, submittable, resettable, form-associated element, phrasing content. If the {{htmlattrxref("type", "input")}} is not hidden, then labelable element, palpable content.
Permitted contentNone, it is an {{Glossary("empty element")}}.
Tag omissionMust have a start tag and must not have an end tag.
Permitted parentsAny element that accepts phrasing content.
Implicit ARIA role +
    +
  • type=button: button
    • +
  • type=checkbox: checkbox
    • +
  • type=email +
      +
    • with no list attribute: textbox
      • +
    • with list attribute: {{ARIARole("combobox")}}
      • +
    +
    • +
  • type=image: button
    • +
  • type=number: {{ARIARole("spinbutton")}}
    • +
  • type=radio: {{ARIARole("radio")}}
    • +
  • type=range: {{ARIARole("slider")}}
    • +
  • type=reset: button
    • +
  • type=search +
      +
    • with no list attribute: {{ARIARole("searchbox")}}
      • +
    • with list attribute: {{ARIARole("combobox")}}
      • +
    +
    • +
  • type=submit: button
    • +
  • type=tel +
      +
    • with no list attribute: textbox
      • +
    • with list attribute: {{ARIARole("combobox")}}
      • +
    +
    • +
  • type=text +
      +
    • with no list attribute: textbox
      • +
    • with list attribute: {{ARIARole("combobox")}}
      • +
    +
    • +
  • type=url +
      +
    • with no list attribute: textbox
      • +
    • with list attribute: {{ARIARole("combobox")}}
      • +
    +
    • +
  • type=color|date|datetime-local|file|hidden|month|password|time|week: no corresponding role
    • +
+
Permitted ARIA roles +
    +
  • type=button: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}
    • +
  • type=checkbox: {{ARIARole("button")}} when used with aria-pressed, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}
    • +
  • type=image: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}
    • +
  • type=radio: {{ARIARole("menuitemradio")}}
    • +
  • type=text with no list attribute: {{ARIARole("combobox")}}, {{ARIARole("searchbox")}}, {{ARIARole("spinbutton")}}
    • +
  • type=color|date|datetime|datetime-local|email|file|hidden|month|number|password|range|reset|search|submit|tel|url|week or text with list attribute: no role permitted
    • +
+
DOM interface{{domxref("HTMLInputElement")}}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '<input>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}{{Spec2('HTML Media Capture')}}Adds the capture attribute
{{SpecName('HTML5 W3C', 'sec-forms.html#the-input-element', '<input>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}{{Spec2('HTML4.01')}}
+ +

Accessibility concerns

+ +

Labels

+ +

When including inputs, it is an accessibilty requirement to add labels along side. This is needed so those who use assistive technologies can tell what the input is for. Also, clicking or touching a label gives focus to the label's associated form control. This improves the accessibility and usability for sighted users, increases the area a user can click or touch to activate the form control. this is especially useful (and even needed) for radio buttons and checkboxes, which are tiny. For more information about labels in general see {{anch("Labels")}} .

+ +

The following is an example of how to associate the <label> with an <input> element in the above style. You need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id.

+ +
<label for="peas">Do you like peas?</label>
+<input type="checkbox" name="peas" id="peas">
+
+ +

Size

+ +

Interactive elements such as form input should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 CSS pixels is recommended.

+ + + +

Browser compatibility

+ + + +
{{Compat("html.elements.input")}}
+ +

See also

+ + diff --git a/files/ar/web/html/element/input/radio/index.html b/files/ar/web/html/element/input/radio/index.html new file mode 100644 index 0000000000..cad8bda10b --- /dev/null +++ b/files/ar/web/html/element/input/radio/index.html @@ -0,0 +1,356 @@ +--- +title: +slug: Web/HTML/Element/input/radio +translation_of: Web/HTML/Element/input/radio +--- +
{{HTMLRef}}
+ +

{{htmlelement("input")}} عناصر من النوعradio تستخدم بشكل عام فيradio groups—مجموعات من أزرار الاختيار تصف مجموعة من الخيارات ذات الصلة. يمكن تحديد زر اختيار واحد فقط في مجموعة معينة في نفس الوقت. عادةً ما يتم عرض أزرار الاختيار على شكل دوائر صغيرة ، يتم تعبئتها أو إبرازها عند تحديدها.

+ +
{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}
+ + + +
+

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

+ +

Shows what radio buttons looked like in the olden days.

+
+ +
+

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

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("Value")}}A {{domxref("DOMString")}} representing the value of the radio button.
Events{{event("change")}} and {{event("input")}}
Supported common attributeschecked and value
IDL attributes{{anch("checked")}} and {{anch("value")}}
Methods{{domxref("HTMLInputElement.select", "select()")}}
+ +

Value

+ +

The value attribute is a {{domxref("DOMString")}} containing the radio button's value. The value is never shown to the user by their {{Glossary("user agent")}}. Instead, it's used to identify which radio button in a group is selected.

+ +

Defining a radio group

+ +

A radio group is defined by giving each of radio buttons in the group the same {{htmlattrxref("name", "input")}}. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.

+ +

You can have as many radio groups on a page as you like, as long as each has its own unique name.

+ +

For example, if your form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the name property set to contact but one with the {{htmlattrxref("value", "input")}} email, one with the value phone, and one with the value mail. The user never sees the value or the name (unless you expressly add code to display it).

+ +

The resulting HTML looks like this:

+ +
<form>
+  <p>Please select your preferred contact method:</p>
+  <div>
+    <input type="radio" id="contactChoice1"
+     name="contact" value="email">
+    <label for="contactChoice1">Email</label>
+
+    <input type="radio" id="contactChoice2"
+     name="contact" value="phone">
+    <label for="contactChoice2">Phone</label>
+
+    <input type="radio" id="contactChoice3"
+     name="contact" value="mail">
+    <label for="contactChoice3">Mail</label>
+  </div>
+  <div>
+    <button type="submit">Submit</button>
+  </div>
+</form>
+ +

Here you see the three radio buttons, each with the name set to contact and each with a unique value that uniquely identifies that individual radio button within the group. They each also have a unique {{domxref("Element.id", "id")}}, which is used by the {{HTMLElement("label")}} element's {{htmlattrxref("for", "label")}} attribute to associate the labels with the radio buttons.

+ +

You can try out this example here:

+ +

{{EmbedLiveSample('Defining_a_radio_group', 600, 130)}}

+ +

Data representation of a radio group

+ +

When the above form is submitted with a radio button selected, the form's data includes an entry in the form contact=value. For example, if the user clicks on the "Phone" radio button then submits the form, the form's data will include the line contact=phone.

+ +

If you omit the value attribute in the HTML, the submitted form data assigns the value on to the group. In this scenario, if the user clicked on the "Phone" option and submitted the form, the resulting form data would be contact=on, which isn't helpful. So don't forget to set your value attributes!

+ +
+

Note: If no radio button is selected when the form is submitted, the radio group is not included in the submitted form data at all, since there is no value to report.

+
+ +

It's fairly uncommon to actually want to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually wise to have one default to the checked state. See {{anch("Selecting a radio button by default")}} below.

+ +

Let's add a little bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a {{HTMLElement("pre")}} block to output the form data into:

+ +
<form>
+  <p>Please select your preferred contact method:</p>
+  <div>
+    <input type="radio" id="contactChoice1"
+           name="contact" value="email">
+    <label for="contactChoice1">Email</label>
+    <input type="radio" id="contactChoice2"
+           name="contact" value="phone">
+    <label for="contactChoice2">Phone</label>
+    <input type="radio" id="contactChoice3"
+           name="contact" value="mail">
+    <label for="contactChoice3">Mail</label>
+  </div>
+  <div>
+    <button type="submit">Submit</button>
+  </div>
+</form>
+<pre id="log">
+</pre>
+
+ +

Then we add some JavaScript to set up an event listener on the {{domxref("HTMLFormElement/submit_event", "submit")}} event, which is sent when the user clicks the "Submit" button:

+ +
var form = document.querySelector("form");
+var log = document.querySelector("#log");
+
+form.addEventListener("submit", function(event) {
+  var data = new FormData(form);
+  var output = "";
+  for (const entry of data) {
+    output = output + entry[0] + "=" + entry[1] + "\r";
+  };
+  log.innerText = output;
+  event.preventDefault();
+}, false);
+ +

Try this example out and see how there's never more than one result for the contact group.

+ +

{{EmbedLiveSample("Data_representation_of_a_radio_group", 600, 130)}}

+ +

Additional attributes

+ +

In addition to the common attributes shared by all {{HTMLElement("input")}} elements, radio inputs support the following attributes:

+ + + + + + + + + + + + + + + + + + +
AttributeDescription
{{anch("checked")}}A Boolean indicating whether or not this radio button is the currently-selected item in the group
{{anch("value")}}The string to use as the value of the radio when submitting the form, if the radio is currently toggled on
+ +

{{htmlattrdef("checked")}}

+ +

A Boolean attribute which, if present, indicates that this radio button is the currently selected one in the group.

+ +

Unlike other browsers, Firefox by default persists the dynamic checked state of an <input> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.

+ +

{{htmlattrdef("value")}}

+ +

The value attribute is one which all {{HTMLElement("input")}}s share; however, it serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted to the server, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is demonstrated in the section {{anch("Value")}} above.

+ +

Using radio inputs

+ +

We already covered the fundamentals of radio buttons above. Let's now look at the other common radio-button-related features and techniques you may need to know about.

+ +

Selecting a radio button by default

+ +

To make a radio button selected by default, you simply include checked attribute, as shown in this revised version of the previous example:

+ +
<form>
+  <p>Please select your preferred contact method:</p>
+  <div>
+    <input type="radio" id="contactChoice1"
+     name="contact" value="email" checked>
+    <label for="contactChoice1">Email</label>
+
+    <input type="radio" id="contactChoice2"
+     name="contact" value="phone">
+    <label for="contactChoice2">Phone</label>
+
+    <input type="radio" id="contactChoice3"
+     name="contact" value="mail">
+    <label for="contactChoice3">Mail</label>
+  </div>
+  <div>
+    <button type="submit">Submit</button>
+  </div>
+</form>
+ +

{{EmbedLiveSample('Selecting_a_radio_button_by_default', 600, 130)}}

+ +

In this case, the first radio button is now selected by default.

+ +
+

Note: If you put the checked attribute on more than one radio button, later instances will override earlier ones; that is, the last checked radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.

+
+ +

Providing a bigger hit area for your radio buttons

+ +

In the above examples, you may have noticed that you can select a radio button by clicking on its associated {{htmlelement("label")}} element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.

+ +

Beyond accessibility, this is another good reason to properly set up <label> elements on your forms.

+ +

Validation

+ +

Radio buttons don't participate in constraint validation; they have no real value to be constrained.

+ +

Styling radio inputs

+ +

The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:

+ +
<form>
+  <fieldset>
+    <legend>Please select your preferred contact method:</legend>
+    <div>
+      <input type="radio" id="contactChoice1"
+       name="contact" value="email" checked>
+      <label for="contactChoice1">Email</label>
+
+      <input type="radio" id="contactChoice2"
+       name="contact" value="phone">
+      <label for="contactChoice2">Phone</label>
+
+      <input type="radio" id="contactChoice3"
+       name="contact" value="mail">
+      <label for="contactChoice3">Mail</label>
+    </div>
+    <div>
+      <button type="submit">Submit</button>
+    </div>
+  </fieldset>
+</form>
+ +

There's not much new to note here except for the addition of {{htmlelement("fieldset")}} and {{htmlelement("legend")}} elements, which help to group the functionality nicely and in a semantic way.

+ +

The CSS involved is a bit more significant:

+ +
html {
+  font-family: sans-serif;
+}
+
+div:first-of-type {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 5px;
+}
+
+label {
+  margin-right: 15px;
+  line-height: 32px;
+}
+
+input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+
+  border: 2px solid #999;
+  transition: 0.2s all linear;
+  margin-right: 5px;
+
+  position: relative;
+  top: 4px;
+}
+
+input:checked {
+  border: 6px solid black;
+}
+
+button,
+legend {
+  color: white;
+  background-color: black;
+  padding: 5px 10px;
+  border-radius: 0;
+  border: 0;
+  font-size: 14px;
+}
+
+button:hover,
+button:focus {
+  color: #999;
+}
+
+button:active {
+  background-color: white;
+  color: black;
+  outline: 1px solid black;
+}
+ +

Most notable here is the use of the {{cssxref("-moz-appearance")}} property (with prefixes needed to support some browsers). By default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. By specifying appearance: none, you can remove the native styling altogether, and create your own styles for them. Here we've used a {{cssxref("border")}} along with {{cssxref("border-radius")}} and a {{cssxref("transition")}} to create a nice animating radio selection. Notice also how the {{cssxref(":checked")}} pseudo-class is used to specify the styles for the radio button's appearance when selected.

+ +
+

Compatibility note: If you wish to use the {{cssxref("appearance")}} property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword none does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

+
+ +

{{EmbedLiveSample('Styling_radio_inputs', 600, 120)}}

+ +

Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you'd want in a real web application, but it definitely shows off the possibilities.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatus
{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}{{Spec2('HTML5 W3C')}}
+ +

Browser compatibility

+ + + +

{{Compat("html.elements.input.input-radio")}}

+ +

See also

+ + diff --git a/files/ar/web/html/index.html b/files/ar/web/html/index.html new file mode 100644 index 0000000000..398297a1a0 --- /dev/null +++ b/files/ar/web/html/index.html @@ -0,0 +1,91 @@ +--- +title: لغة ترميز النص الفائق +slug: Web/HTML +tags: + - HTML + - Landing + - Web +--- +
{{HTMLSidebar}}
+ +

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

+ +

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

+ +

تستخدم لغة ترميز النص الفائقة تقنيّة "الترميز (markup)" لوصف النصوص، والصور، وغيرها من المحتويات؛ لعرضعها على المتصفح. وسوم اللغة تتضمن "عناصر (elements)" خاصة مثل {{HTMLElement("head")}}، {{HTMLElement("title")}}، {{HTMLElement("body")}}، {{HTMLElement("header")}}، {{HTMLElement("footer")}}، {{HTMLElement("article")}}، {{HTMLElement("section")}}، {{HTMLElement("p")}}، {{HTMLElement("div")}}، {{HTMLElement("span")}}، {{HTMLElement("img")}}، وغيرها الكثير.

+ +

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

+ +
+ + +
+
+

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

+ +

تمتاز منطقة تعلم لغة ترميز النص الفائق بوحدات متعددة تقوم بتعليم اللغة من الألف إلى الياء، ولا تتطلب معرفة مُسبقة.

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

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

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

مراجع

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

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

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

عرض المزيد...

+
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" new file mode 100644 index 0000000000..b228c2f893 --- /dev/null +++ "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" @@ -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/web/http/basics_of_http/index.html b/files/ar/web/http/basics_of_http/index.html new file mode 100644 index 0000000000..237dda5f72 --- /dev/null +++ b/files/ar/web/http/basics_of_http/index.html @@ -0,0 +1,51 @@ +--- +title: Basics of HTTP +slug: Web/HTTP/Basics_of_HTTP +tags: + - Guide + - HTTP + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/HTTP/Basics_of_HTTP +--- +
{{HTTPSidebar}}
+ +

HTTP is a pretty extensible protocol. It relies on a few basic concepts like the notion of resources and URIs, a simple structure of messages, and a client-server structure for the communication flow. On top of these basic concepts, numerous extensions have appeared over the years, adding new functionality and new semantics by creating new HTTP methods or headers.

+ +

Articles

+ +
+
Overview of HTTP
+
Describes what HTTP is and its role in the Web architecture, its position in the protocol stack.
+
Evolution of HTTP
+
HTTP was created in the early 1990s and has been extended several times. This article goes through its history and describes HTTP/0.9, HTTP/1.0, HTTP/1.1, and the modern HTTP/2 as well as minor novelties introduced over the years.
+
Negotiating an HTTP version
+
Explains how a client and a server can negotiate a specific HTTP version and eventually upgrade the protocol version used.
+
Resources and URIs
+
A brief introduction of the notion of resources, identifiers, and locations on the Web.
+
Identifying resources on the Web
+
Describes how Web resources are referenced and how to locate them.
+
Data URIs
+
A specific kind of URIs that directly embeds the resource it represents. Data URIs are very convenient, but have some caveats.
+
Resource URLs {{Non-standard_Inline}}
+
Resource URLs, URLs prefixed with the resource: scheme, are used by Firefox and Firefox browser extensions to load resources internally, but some of the information is available to sites the browser connects to as well.
+
Separating identity and location of a resource: the Alt-Svc HTTP header
+
Most of the time identity and location of a Web resource are shared, this can be changed with the {{HTTPHeader("Alt-Svc")}} header.
+
MIME types
+
Since HTTP/1.0, different types of content can be transmitted. This article explains how this is done using the {{HTTPHeader("Content-Type")}} header and the MIME standard.
+
Choosing between www and non-www URLs
+
Advice on using a www-prefixed domain or not, this article explains the consequences of the choice as well as how to make it.
+
Flow of an HTTP session
+
This fundamental article describes a typical HTTP session: what happens under the hood when you click on a link in your browser…
+
HTTP Messages
+
HTTP Messages transmitted during requests or responses have a very clear structure; this introductory article describes this structure, its purpose and its possibilities.
+
Frame and message structure in HTTP/2
+
HTTP/2 encapsulates and represents HTTP/1.x messages in a binary frame. This article explains the frame structure, its purpose and the way it is encoded.
+
Connection management in HTTP/1.x
+
HTTP/1.1 was the first version of HTTP to support persistent connection and pipelining. This article explains these two concepts.
+
Connection management in HTTP/2
+
HTTP/2 completely revisited how connections are created and maintained: this article explains how HTTP frames allow multiplexing and solve the 'head-of-line' blocking problem of former HTTP versions.
+
Content Negotiation
+
HTTP introduces a set of headers, starting with Accept- as a way for a browser to announce the format, language, or encoding it prefers. This article explains how this advertisement happens, how the server is expected to react and how it will choose the most adequate response.
+
diff --git a/files/ar/web/http/basics_of_http/mime_types/common_types/index.html b/files/ar/web/http/basics_of_http/mime_types/common_types/index.html new file mode 100644 index 0000000000..dbc40bc983 --- /dev/null +++ b/files/ar/web/http/basics_of_http/mime_types/common_types/index.html @@ -0,0 +1,360 @@ +--- +title: Incomplete list of MIME types +slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types +translation_of: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types +--- +
{{HTTPSidebar}}
+ +

في ما يلي قائمة بأنواع MIME ، المرتبطة بنوع المستندات ، مرتبة حسب الإضافات الشائعة.

+ +

هناك نوعان رئيسيان من MIME مهمان لدور الأنواع الافتراضية:

+ + + +

IANA هو السجل الرسمي لأنواع وسائط MIME ويحافظ على قائمة بجميع أنواع MIME الرسمية . يسرد هذا الجدول بعض أنواع MIME المهمة للويب:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
تمديدنوع الوثيقةنوع التمثيل الصامت
.aacصوت AACaudio/aac
.abwوثيقة أبي وردapplication/x-abiword
.arcوثيقة الأرشيف (ملفات متعددة مدمجة)application/octet-stream
.aviAVI: تداخل الصوت والفيديوvideo/x-msvideo
.azwتنسيق Amazon Kindle eBookapplication/vnd.amazon.ebook
.binأي نوع من البيانات الثنائيةapplication/octet-stream
.bmpنظام التشغيل Windows OS / 2 Bitmap Graphicsimage/bmp
.bzأرشيف BZipapplication/x-bzip
.bz2أرشيف BZip2application/x-bzip2
.cshنص C-Shellapplication/x-csh
.cssأوراق الأنماط المتتالية (CSS)text/css
.csvقيم مفصولة بفواصل (CSV)text/csv
.docمايكروسوفت ووردapplication/msword
.docxMicrosoft Word (OpenXML)application/vnd.openxmlformats-officedocument.wordprocessingml.document
.eotMS Embedded OpenType fontsapplication/vnd.ms-fontobject
.epubالمنشور الالكتروني (EPUB)application/epub+zip
.esECMAScript (IANA Specification) (RFC 4329 Section 8.2)application/ecmascript
.gifGraphics Interchange Format (GIF)image/gif
.htm
+ .html		HyperText Markup Language (HTML)text/html
.icoIcon formatimage/x-icon
.icsiCalendar formattext/calendar
.jarJava Archive (JAR)application/java-archive
.jpeg
+ .jpg		JPEG imagesimage/jpeg
.jsJavaScript (IANA Specification) (RFC 4329 Section 8.2)application/javascript
.jsonJSON formatapplication/json
.mid
+ .midi		Musical Instrument Digital Interface (MIDI)audio/midi audio/x-midi
.mpegMPEG Videovideo/mpeg
.mpkgApple Installer Packageapplication/vnd.apple.installer+xml
.odpOpenDocument presentation documentapplication/vnd.oasis.opendocument.presentation
.odsOpenDocument spreadsheet documentapplication/vnd.oasis.opendocument.spreadsheet
.odtOpenDocument text documentapplication/vnd.oasis.opendocument.text
.ogaOGG audioaudio/ogg
.ogvOGG videovideo/ogg
.ogxOGGapplication/ogg
.otfOpenType fontfont/otf
.pngPortable Network Graphicsimage/png
.pdfAdobe Portable Document Format (PDF)application/pdf
.pptMicrosoft PowerPointapplication/vnd.ms-powerpoint
.pptxMicrosoft PowerPoint (OpenXML)application/vnd.openxmlformats-officedocument.presentationml.presentation
.rarRAR archiveapplication/x-rar-compressed
.rtfRich Text Format (RTF)application/rtf
.shBourne shell scriptapplication/x-sh
.svgScalable Vector Graphics (SVG)image/svg+xml
.swfتنسيق ويب صغير (SWF) أو مستند Adobe Flashapplication/x-shockwave-flash
.tarأرشيف الشريط (TAR)application/x-tar
.tif
+ .tiff		تنسيق ملفات الصور ذات العلامات (TIFF)image/tiff
.tsملف التوليفapplication/typescript
.ttfخط تروتايبfont/ttf
.txtنص ، (بشكل عام ASCII أو ISO 8859- n )text/plain
.vsdمايكروسوفت فيزيوapplication/vnd.visio
.wavشكل الصوت الموجيaudio/wav
.webaWEBM الصوتaudio/webm
.webmWEBM الفيديوvideo/webm
.webpصورة الويبimage/webp
.woffتنسيق خط مفتوح على الويب (WOFF)font/woff
.woff2تنسيق خط مفتوح على الويب (WOFF)font/woff2
.xhtmlXHTMLapplication/xhtml+xml
.xlsمايكروسوفت اكسلapplication/vnd.ms-excel
.xlsxMicrosoft Excel (OpenXML)application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xmlXMLapplication/xml
.xulXULالتطبيق / vnd.mozilla.xul + أكس
.zipأرشيف ZIPapplication/zip
.3gpحاوية الصوت / الفيديو 3GPPvideo/3gpp
+ audio/3gpp إذا لم يكن يحتوي على فيديو
.3g2حاوية الصوت / الفيديو 3GPP2video/3gpp2
+ audio/3gpp2 إذا لم يكن يحتوي على فيديو
.7zأرشيف 7-zipapplication/x-7z-compressed
diff --git a/files/ar/web/http/basics_of_http/mime_types/index.html b/files/ar/web/http/basics_of_http/mime_types/index.html new file mode 100644 index 0000000000..15f265d1cf --- /dev/null +++ b/files/ar/web/http/basics_of_http/mime_types/index.html @@ -0,0 +1,382 @@ +--- +title: MIME types +slug: Web/HTTP/Basics_of_HTTP/MIME_types +tags: + - Content-Type + - Guide + - HTTP + - MIME Types + - Meta + - NeedsTranslation + - Request header + - Response Header + - TopicStub + - application/javascript + - application/json + - application/xml +translation_of: Web/HTTP/Basics_of_HTTP/MIME_types +--- +

A Multipurpose Internet Mail Extensions (MIME) type is a standard that indicates the nature and format of a document, file, or assortment of bytes. It is defined and standardized in IETF RFC 6838.

+ +

The Internet Assigned Numbers Authority (IANA) is responsible for all official MIME types, and you can find the most up-to-date and complete list at their Media Types page.

+ +
+

Browsers use the MIME type, not the file extension, to determine how to process a URL — it is important that servers send the correct MIME type in the response's Content-Type header.

+
+ +

Syntax

+ +

General structure

+ +
type/subtype
+ +

A MIME type consists of a type and a subtype — two strings separated by /. No whitespace is allowed. The type represents the category and can be a discrete or a multipart type. The subtype is specific to each type.

+ +

MIME types are case-insensitive but traditionally written in lowercase.

+ +

Discrete types

+ +
text/plain
+text/html
+text/javascript
+text/css
+image/jpeg
+image/png
+audio/mpeg
+audio/ogg
+audio/*
+video/mp4
+application/*
+application/json
+application/ecmascript
+application/octet-stream
+…
+ +

Discrete types indicate the category of the document. They can be one of the following:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeDescriptionExample of typical subtypes
textAny document that contains text and is theoretically human readabletext/plain, text/html, text/css, text/javascript, text/markdown
imageAny kind of image. Videos are not included, though animated images (like animated GIF) are described with an image type.image/gif, image/png, image/jpeg, image/bmp, image/webp, image/vnd.microsoft.icon
audioAny kind of audio fileaudio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
videoAny kind of video filevideo/webm, video/ogg
application +

Any kind of binary data, especially data that will be executed or interpreted somehow.

+ 		application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf
+ +

For text documents without a specific subtype, text/plain should be used.

+ +

Similarly, for binary documents without a specific or known subtype, application/octet-stream should be used.

+ +

Multipart types

+ +
multipart/form-data
+multipart/byteranges
+ +

Multipart types indicate a category of document broken into pieces, often with different MIME types. They represent a composite document. With the exception of multipart/form-data, used in the {{HTTPMethod("POST")}} method of HTML Forms, and multipart/byteranges, used with {{HTTPStatus("206")}} Partial Content to send part of a document, HTTP doesn't handle multipart documents in a special way: the message is transmitted to the browser (which will likely show a "Save As" window if it doesn't know how to display the document.)

+ +

Important MIME types for Web developers

+ +

application/octet-stream

+ +

This is the default for binary files. As it means unknown binary file, browsers usually don't execute it, or even ask if it should be executed. They treat it as if the {{HTTPHeader("Content-Disposition")}} header was set to attachment, and propose a "Save As" dialog.

+ +

text/plain

+ +

This is the default for textual files. Even if it really means unknown textual file, browsers assume they can display it.

+ +
+

Note that text/plain does not mean any kind of textual data. If they expect a specific kind of textual data, they will likely not consider it a match. Specifically if they download a text/plain file from a {{HTMLElement("link")}} element declaring a CSS files, they will not recognize it as a valid CSS files if presented with text/plain. The CSS mime type text/css must be used.

+
+ +

text/css

+ +

CSS files used to style a Web page must be sent with text/css. If a server doesn't recognize the .css suffix for CSS files, it may send them with text/plain or application/octet-stream MIME types. If so, they won't be recognized as CSS by most browsers and will be ignored.

+ +

text/html

+ +

All HTML content should be served with this type. Alternative MIME types for XHTML (like application/xhtml+xml) are mostly useless nowadays.

+ +
+

Note: Use application/xml or application/xhtml+xml if you want XML’s strict parsing rules, <![CDATA[…]]> sections, or elements that aren't from HTML/SVG/MathML namespaces.

+
+ +

text/javascript

+ +

The Scripting languages section of the HTML Standard states:

+ +
+

Servers should use text/javascript for JavaScript resources. Servers should not use other JavaScript MIME types for JavaScript resources, and must not use non-JavaScript MIME types.

+
+ +

The other JavaScript MIME types that should not be used are defined in the MIME Sniffing Standard as follows:

+ + + +

Image types

+ +

Only a few image types are widely recognized enough to be safe for use in a Web page:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MIME typeImage type
image/gifGIF images (lossless compression, superseded by PNG)
image/jpegJPEG images
image/pngPNG images
image/svg+xmlSVG images (vector images)
image/x-icon, image/vnd.microsoft.icon[1]Windows icons
+ +

There is a discussion to add WebP (image/webp) to this list, but browser vendors are cautious in accepting it.

+ +

Other kinds of images can be found in Web documents. For example, many browsers support ICO images for favicons with the image/x-icon MIME type.

+ +
+
Footnote 1
+
Despite image/vnd.microsoft.icon being registered with IANA, it is largely unsupported, and image/x-icon is being used instead.
+
+ +

Audio and video types

+ +

Like images, HTML doesn't define supported types for the {{HTMLElement("audio")}} and{{HTMLElement("video")}} elements, so only some can be used on the Web. Media formats supported by the HTML audio and video elements explains both the codecs and container formats which can be used.

+ +

The MIME type of audiovisual files mostly indicate the container formats. The most common ones on the Web are:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MIME typeAudio or video type
audio/wave
+ audio/wav
+ audio/x-wav
+ audio/x-pn-wav		An audio file in the WAVE container format. The PCM audio codec (WAVE codec "1") is often supported, but other codecs have limited support (if any).
audio/webmAn audio file in the WebM container format. Vorbis and Opus are the most common audio codecs.
video/webmA video file, possibly with audio, in the WebM container format. VP8 and VP9 are the most common video codecs; Vorbis and Opus the most common audio codecs.
audio/oggAn audio file in the OGG container format. Vorbis is the most common audio codec used in such a container.
video/oggA video file, possibly with audio, in the OGG container format. Theora is the usual video codec used within it; Vorbis is the usual audio codec.
application/oggAn audio or video file using the OGG container format. Theora is the usual video codec used within it; Vorbis is the usual audio codec.
+ +

multipart/form-data

+ +

The multipart/form-data type can be used when sending the values of a completed HTML Form from browser to server.

+ +

As a multipart document format, it consists of different parts, delimited by a boundary (a string starting with a double dash '--'). Each part is its own entity with its own HTTP headers, {{HTTPHeader("Content-Disposition")}}, and {{HTTPHeader("Content-Type")}} for file uploading fields.

+ +
Content-Type: multipart/form-data; boundary=aBoundaryString
+(other headers associated with the multipart document as a whole)
+
+--aBoundaryString
+Content-Disposition: form-data; name="myFile"; filename="img.jpg"
+Content-Type: image/jpeg
+
+(data)
+--aBoundaryString
+Content-Disposition: form-data; name="myField"
+
+(data)
+--aBoundaryString
+(more subparts)
+--aBoundaryString--
+
+
+ +

The following <form>:

+ +
<form action="http://localhost:8000/" method="post" enctype="multipart/form-data">
+  <label>Name: <input name="myTextField" value="Test"></label>
+  <label><input type="checkbox" name="myCheckBox"> Check</label>
+  <label>Upload file: <input type="file" name="myFile" value="test.txt"></label>
+  <button>Send the file</button>
+</form>
+ +

will send this message:

+ +
POST / HTTP/1.1
+Host: localhost:8000
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate
+Connection: keep-alive
+Upgrade-Insecure-Requests: 1
+Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
+Content-Length: 465
+
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myTextField"
+
+Test
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myCheckBox"
+
+on
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myFile"; filename="test.txt"
+Content-Type: text/plain
+
+Simple file.
+-----------------------------8721656041911415653955004498--
+
+
+ +

multipart/byteranges

+ +

The multipart/byteranges MIME type is used to send partial responses to the browser.

+ +

When the {{HTTPStatus("206")}} Partial Content status code is sent, this MIME type indicates that the document is composed of several parts, one for each of the requested ranges. Like other multipart types, the {{HTTPHeader("Content-Type")}} uses a boundary to separate the pieces. Each piece has a {{HTTPHeader("Content-Type")}} header with its actual type and a {{HTTPHeader("Content-Range")}} of the range it represents.

+ +
HTTP/1.1 206 Partial Content
+Accept-Ranges: bytes
+Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
+Content-Length: 385
+
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 100-200/1270
+
+eta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="vieport" content
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 300-400/1270
+
+-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+        font-family: "Open Sans", "Helvetica
+--3d6b6a416f9b5--
+ +

Importance of setting the correct MIME type

+ +

Most web servers send unrecognized resources as the application/octet-stream MIME type. For security reasons, most browsers do not allow setting a custom default action for such resources, forcing the user to save it to disk to use it.

+ +

Some common incorrect server configurations:

+ + + +

MIME sniffing

+ +

In the absence of a MIME type, or in certain cases where browsers believe they are incorrect, browsers may perform MIME sniffing — guessing the correct MIME type by looking at the bytes of the resource.

+ +

Each browser performs MIME sniffing differently and under different circumstances. (For example, Safari will look at the file extension in the URL if the sent MIME type is unsuitable.) There are security concerns as some MIME types represent executable content. Servers can prevent MIME sniffing by sending the {{HTTPHeader("X-Content-Type-Options")}} header.

+ +

Other methods of conveying document type

+ +

MIME types are not the only way to convey document type information:

+ + + +

See also

+ + + +
{{HTTPSidebar}}
diff --git a/files/ar/web/http/connection_management_in_http_1.x/index.html b/files/ar/web/http/connection_management_in_http_1.x/index.html new file mode 100644 index 0000000000..de95b35122 --- /dev/null +++ b/files/ar/web/http/connection_management_in_http_1.x/index.html @@ -0,0 +1,86 @@ +--- +title: Connection management in HTTP/1.x +slug: Web/HTTP/Connection_management_in_HTTP_1.x +translation_of: Web/HTTP/Connection_management_in_HTTP_1.x +--- +
{{HTTPSidebar}}
+ +

Connection management is a key topic in HTTP: opening and maintaining connections largely impacts the performance of Web sites and Web applications. In HTTP/1.x, there are several models: short-lived connections, persistent connections, and HTTP pipelining.

+ +

HTTP mostly relies on TCP for its transport protocol, providing a connection between the client and the server. In its infancy, HTTP used a single model to handle such connections. These connections were short-lived: a new one created each time a request needed sending, and closed once the answer had been received.

+ +

This simple model held an innate limitation on performance: opening each TCP connection is a resource-consuming operation. Several messages must be exchanged between the client and the server. Network latency and bandwidth affect performance when a request needs sending. Modern Web pages require many requests (a dozen or more) to serve the amount of information needed, proving this earlier model inefficient.

+ +

Two newer models were created in HTTP/1.1. The persistent-connection model keeps connections opened between successive requests, reducing the time needed to open new connections. The HTTP pipelining model goes one step further, by sending several successive requests without even waiting for an answer, reducing much of the latency in the network.

+ +

Compares the performance of the three HTTP/1.x connection models: short-lived connections, persistent connections, and HTTP pipelining.

+ +
+

HTTP/2 adds additional models for connection management.

+
+ +

It's important point to note that connection management in HTTP applies to the connection between two consecutive nodes, which is hop-by-hop and not end-to-end. The model used in connections between a client and its first proxy may differ from the model between a proxy and the destination server (or any intermediate proxies). The HTTP headers involved in defining the connection model, like {{HTTPHeader("Connection")}} and {{HTTPHeader("Keep-Alive")}}, are hop-by-hop headers with their values able to be changed by intermediary nodes.

+ +

A related topic is the concept of HTTP connection upgrades, wherein an HTTP/1.1 connection is upgraded to a different protocol, such as TLS/1.0, WebSocket, or even HTTP/2 in cleartext. This protocol upgrade mechanism is documented in more detail elsewhere.

+ +

Short-lived connections

+ +

The original model of HTTP, and the default one in HTTP/1.0, is short-lived connections. Each HTTP request is completed on its own connection; this means a TCP handshake happens before each HTTP request, and these are serialized.

+ +

The TCP handshake itself is time-consuming, but a TCP connection adapts to its load, becoming more efficient with more sustained (or warm) connections. Short-lived connections do not make use of this efficiency feature of TCP, and performance degrades from optimum by persisting to transmit over a new, cold connection.

+ +

This model is the default model used in HTTP/1.0 (if there is no {{HTTPHeader("Connection")}} header, or if its value is set to close). In HTTP/1.1, this model is only used when the {{HTTPHeader("Connection")}} header is sent with a value of close.

+ +
+

Unless dealing with a very old system, which doesn't support a persistent connection, there is no compelling reason to use this model.

+
+ +

Persistent connections

+ +

Short-lived connections have two major hitches: the time taken to establish a new connection is significant, and performance of the underlying TCP connection gets better only when this connection has been in use for some time (warm connection). To ease these problems, the concept of a persistent connection has been designed, even prior to HTTP/1.1. Alternatively this may be called a keep-alive connection.

+ +

A persistent connection is one which remains open for a period of time, and can be reused for several requests, saving the need for a new TCP handshake, and utilizing TCP's performance enhancing capabilities. This connection will not stay open forever: idle connections are closed after some time (a server may use the {{HTTPHeader("Keep-Alive")}} header to specify a minimum time the connection should be kept open).

+ +

Persistent connections also have drawbacks; even when idling they consume server resources, and under heavy load, {{glossary("DoS attack", "DoS attacks")}} can be conducted. In such cases, using non-persistent connections, which are closed as soon as they are idle, can provide better performance.

+ +

HTTP/1.0 connections are not persistent by default. Setting {{HTTPHeader("Connection")}} to anything other than close, usually retry-after, will make them persistent.

+ +

In HTTP/1.1, persistence is the default, and the header is no longer needed (but it is often added as a defensive measure against cases requiring a fallback to HTTP/1.0).

+ +

HTTP pipelining

+ +
+

HTTP pipelining is not activated by default in modern browsers:

+ + + +

For these reasons, pipelining has been superseded by a better algorithm, multiplexing, that is used by HTTP/2.

+
+ +

By default, HTTP requests are issued sequentially. The next request is only issued once the response to the current request has been received. As they are affected by network latencies and bandwidth limitations, this can result in significant delay before the next request is seen by the server.

+ +

Pipelining is the process to send successive requests, over the same persistent connection, without waiting for the answer. This avoids latency of the connection. Theoretically, performance could also be improved if two HTTP requests were to be packed into the same TCP message. The typical MSS (Maximum Segment Size), is big enough to contain several simple requests, although the demand in size of HTTP requests continues to grow.

+ +

Not all types of HTTP requests can be pipelined: only {{glossary("idempotent")}} methods, that is {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}} and {{HTTPMethod("DELETE")}}, can be replayed safely: should a failure happen, the pipeline content can simply be repeated.

+ +

Today, every HTTP/1.1-compliant proxy and server should support pipelining, though many have limitations in practice: a significant reason no modern browser activates this feature by default.

+ +

Domain sharding

+ +
+

Unless you have a very specific immediate need, don't use this deprecated technique; switch to HTTP/2 instead. In HTTP/2, domain sharding is no longer useful: the HTTP/2 connection is able to handle parallel unprioritized requests very well. Domain sharding is even detrimental to performance. Most HTTP/2 implementations use a technique called connection coalescing to revert eventual domain sharding.

+
+ +

As an HTTP/1.x connection is serializing requests, even without any ordering, it can't be optimal without large enough available bandwidth. As a solution, browsers open several connections to each domain, sending parallel requests. Default was once 2 to 3 connections, but this has now increased to a more common use of 6 parallel connections. There is a risk of triggering DoS protection on the server side if attempting more than this number.

+ +

If the server wishes a faster Web site or application response, it is possible for the server to force the opening of more connections. For example, Instead of having all resources on the same domain, say www.example.com, it could split over several domains, www1.example.com, www2.example.com, www3.example.com. Each of these domains resolve to the same server, and the Web browser will open 6 connections to each (in our example, boosting the connections to 18). This technique is called domain sharding.

+ +

+ +

Conclusion

+ +

Improved connection management allows considerable boosting of performance in HTTP. With HTTP/1.1 or HTTP/1.0, using a persistent connection – at least until it becomes idle – leads to the best performance. However, the failure of pipelining has lead to designing superior connection management models, which have been incorporated into HTTP/2.

diff --git a/files/ar/web/http/headers/index.html b/files/ar/web/http/headers/index.html new file mode 100644 index 0000000000..b9b35f84dc --- /dev/null +++ b/files/ar/web/http/headers/index.html @@ -0,0 +1,433 @@ +--- +title: HTTP headers +slug: Web/HTTP/Headers +tags: + - HTTP + - HTTP Header + - Headers + - NeedsTranslation + - Networking + - Overview + - Reference + - TopicStub +translation_of: Web/HTTP/Headers +--- +
{{HTTPSidebar}}
+ +

HTTP headers let the client and the server pass additional information with an HTTP request or response. An HTTP header consists of its case-insensitive name followed by a colon (:), then by its value. Whitespace before the value is ignored.

+ +

Custom proprietary headers have historically been used with an X- prefix, but this convention was deprecated in June 2012 because of the inconveniences it caused when nonstandard fields became standard in RFC 6648; others are listed in an IANA registry, whose original content was defined in RFC 4229. IANA also maintains a registry of proposed new HTTP headers.

+ +

Headers can be grouped according to their contexts:

+ + + +

Headers can also be grouped according to how proxies handle them:

+ + + +
+
End-to-end headers
+
These headers must be transmitted to the final recipient of the message: the server for a request, or the client for a response. Intermediate proxies must retransmit these headers unmodified and caches must store them.
+
Hop-by-hop headers
+
These headers are meaningful only for a single transport-level connection, and must not be retransmitted by proxies or cached. Note that only hop-by-hop headers may be set using the {{ httpheader("Connection") }} general header.
+
+ +

Authentication

+ +
+
{{HTTPHeader("WWW-Authenticate")}}
+
Defines the authentication method that should be used to access a resource.
+
{{HTTPHeader("Authorization")}}
+
Contains the credentials to authenticate a user-agent with a server.
+
{{HTTPHeader("Proxy-Authenticate")}}
+
Defines the authentication method that should be used to access a resource behind a proxy server.
+
{{HTTPHeader("Proxy-Authorization")}}
+
Contains the credentials to authenticate a user agent with a proxy server.
+
+ +

Caching

+ +
+
{{HTTPHeader("Age")}}
+
The time, in seconds, that the object has been in a proxy cache.
+
{{HTTPHeader("Cache-Control")}}
+
Directives for caching mechanisms in both requests and responses.
+
{{HTTPHeader("Clear-Site-Data")}}
+
Clears browsing data (e.g. cookies, storage, cache) associated with the requesting website.
+
{{HTTPHeader("Expires")}}
+
The date/time after which the response is considered stale.
+
{{HTTPHeader("Pragma")}}
+
Implementation-specific header that may have various effects anywhere along the request-response chain. Used for backwards compatibility with HTTP/1.0 caches where the Cache-Control header is not yet present.
+
{{HTTPHeader("Warning")}}
+
General warning information about possible problems.
+
+ +

Client hints

+ +

HTTP Client hints are a work in progress. Actual documentation can be found on the website of the HTTP working group.

+ +
+
{{HTTPHeader("Accept-CH")}} {{experimental_inline}}
+
Servers can advertise support for Client Hints using the Accept-CH header field or an equivalent HTML <meta> element with http-equiv attribute ([HTML5]).
+
{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}
+
Servers can ask the client to remember the set of Client Hints that the server supports for a specified period of time, to enable delivery of Client Hints on subsequent requests to the server’s origin ([RFC6454]).
+
{{HTTPHeader("Early-Data")}} {{experimental_inline}}
+
Indicates that the request has been conveyed in early data.
+
{{HTTPHeader("Content-DPR")}} {{experimental_inline}}
+
A number that indicates the ratio between physical pixels over CSS pixels of the selected image response.
+
{{HTTPHeader("DPR")}} {{experimental_inline}}
+
A number that indicates the client’s current Device Pixel Ratio (DPR), which is the ratio of physical pixels over CSS pixels (Section 5.2 of [CSSVAL]) of the layout viewport (Section 9.1.1 of [CSS2]) on the device.
+
{{HTTPHeader("Device-Memory")}} {{experimental_inline}}
+
Technically a part of Device Memory API, this header represents an approximate amount of RAM client has.
+
{{HTTPHeader("Save-Data")}} {{experimental_inline}}
+
A boolean that indicates the user agent's preference for reduced data usage.
+
{{HTTPHeader("Viewport-Width")}} {{experimental_inline}}
+
+
+

A number that indicates the layout viewport width in CSS pixels. The provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value).

+
+ +
+

If Viewport-Width occurs in a message more than once, the last value overrides all previous occurrences.

+
+
+
{{HTTPHeader("Width")}} {{experimental_inline}}
+
+
+

The Width request header field is a number that indicates the desired resource width in physical pixels (i.e. intrinsic size of an image). The provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value).

+
+ +
+

If the desired resource width is not known at the time of the request or the resource does not have a display width, the Width header field can be omitted. If Width occurs in a message more than once, the last value overrides all previous occurrences

+
+
+
+ +

Conditionals

+ +
+
{{HTTPHeader("Last-Modified")}}
+
The last modification date of the resource, used to compare several versions of the same resource. It is less accurate than {{HTTPHeader("ETag")}}, but easier to calculate in some environments. Conditional requests using {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Unmodified-Since")}} use this value to change the behavior of the request.
+
{{HTTPHeader("ETag")}}
+
A unique string identifying the version of the resource. Conditional requests using {{HTTPHeader("If-Match")}} and {{HTTPHeader("If-None-Match")}} use this value to change the behavior of the request.
+
{{HTTPHeader("If-Match")}}
+
Makes the request conditional, and applies the method only if the stored resource matches one of the given ETags.
+
{{HTTPHeader("If-None-Match")}}
+
Makes the request conditional, and applies the method only if the stored resource doesn't match any of the given ETags. This is used to update caches (for safe requests), or to prevent to upload a new resource when one already exists.
+
{{HTTPHeader("If-Modified-Since")}}
+
Makes the request conditional, and expects the entity to be transmitted only if it has been modified after the given date. This is used to transmit data only when the cache is out of date.
+
{{HTTPHeader("If-Unmodified-Since")}}
+
Makes the request conditional, and expects the entity to be transmitted only if it has not been modified after the given date. This ensures the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents.
+
{{HTTPHeader("Vary")}}
+
Determines how to match request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.
+
+ +

Connection management

+ +
+
{{HTTPHeader("Connection")}}
+
Controls whether the network connection stays open after the current transaction finishes.
+
{{HTTPHeader("Keep-Alive")}}
+
Controls how long a persistent connection should stay open.
+
+ +

Content negotiation

+ +
+
{{HTTPHeader("Accept")}}
+
Informs the server about the types of data that can be sent back.
+
{{HTTPHeader("Accept-Charset")}}
+
Which character encodings the client understands.
+
{{HTTPHeader("Accept-Encoding")}}
+
The encoding algorithm, usually a compression algorithm, that can be used on the resource sent back.
+
{{HTTPHeader("Accept-Language")}}
+
Informs the server about the human language the server is expected to send back. This is a hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language from a dropdown).
+
+ +

Controls

+ +
+
{{HTTPHeader("Expect")}}
+
Indicates expectations that need to be fulfilled by the server to properly handle the request.
+
{{HTTPHeader("Max-Forwards")}}
+
+ +

Cookies

+ +
+
{{HTTPHeader("Cookie")}}
+
Contains stored HTTP cookies previously sent by the server with the {{HTTPHeader("Set-Cookie")}} header.
+
{{HTTPHeader("Set-Cookie")}}
+
Send cookies from the server to the user-agent.
+
{{HTTPHeader("Cookie2")}} {{obsolete_inline}}
+
Contains an HTTP cookie previously sent by the server with the {{HTTPHeader("Set-Cookie2")}} header, but has been obsoleted. Use {{HTTPHeader("Cookie")}} instead.
+
{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}
+
Sends cookies from the server to the user-agent, but has been obsoleted. Use {{HTTPHeader("Set-Cookie")}} instead.
+
+ +

CORS

+ +

Learn more about CORS here.

+ +
+
{{HTTPHeader("Access-Control-Allow-Origin")}}
+
Indicates whether the response can be shared.
+
{{HTTPHeader("Access-Control-Allow-Credentials")}}
+
Indicates whether the response to the request can be exposed when the credentials flag is true.
+
{{HTTPHeader("Access-Control-Allow-Headers")}}
+
Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.
+
{{HTTPHeader("Access-Control-Allow-Methods")}}
+
Specifies the methods allowed when accessing the resource in response to a preflight request.
+
{{HTTPHeader("Access-Control-Expose-Headers")}}
+
Indicates which headers can be exposed as part of the response by listing their names.
+
{{HTTPHeader("Access-Control-Max-Age")}}
+
Indicates how long the results of a preflight request can be cached.
+
{{HTTPHeader("Access-Control-Request-Headers")}}
+
Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.
+
{{HTTPHeader("Access-Control-Request-Method")}}
+
Used when issuing a preflight request to let the server know which HTTP method will be used when the actual request is made.
+
{{HTTPHeader("Origin")}}
+
Indicates where a fetch originates from.
+
{{HTTPHeader("Service-Worker-Allowed")}}
+
Used to remove the path restriction by including this header in the response of the Service Worker script.
+
{{HTTPHeader("Timing-Allow-Origin")}}
+
Specifies origins that are allowed to see values of attributes retrieved via features of the Resource Timing API, which would otherwise be reported as zero due to cross-origin restrictions.
+
{{HTTPHeader("X-Permitted-Cross-Domain-Policies")}}
+
Specifies if a cross-domain policy file (crossdomain.xml) is allowed. The file may define a policy to grant clients, such as Adobe's Flash Player, Adobe Acrobat, Microsoft Silverlight, or Apache Flex, permission to handle data across domains that would otherwise be restricted due to the Same-Origin Policy. See the Cross-domain Policy File Specification for more information.
+
+ +

Do Not Track

+ +
+
{{HTTPHeader("DNT")}}
+
Expresses the user's tracking preference.
+
{{HTTPHeader("Tk")}}
+
Indicates the tracking status of the corresponding response.
+
+ +

Downloads

+ +
+
{{HTTPHeader("Content-Disposition")}}
+
Indicates if the resource transmitted should be displayed inline (default behavior without the header), or if it should be handled like a download and the browser should present a “Save As” dialog.
+
+ +

Message body information

+ +
+
{{HTTPHeader("Content-Length")}}
+
The size of the resource, in decimal number of bytes.
+
{{HTTPHeader("Content-Type")}}
+
Indicates the media type of the resource.
+
{{HTTPHeader("Content-Encoding")}}
+
Used to specify the compression algorithm.
+
{{HTTPHeader("Content-Language")}}
+
Describes the human language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.
+
{{HTTPHeader("Content-Location")}}
+
Indicates an alternate location for the returned data.
+
+ +

Proxies

+ +
+
{{HTTPHeader("Forwarded")}}
+
Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.
+
{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}
+
Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.
+
{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}
+
Identifies the original host requested that a client used to connect to your proxy or load balancer.
+
{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}
+
Identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.
+
{{HTTPHeader("Via")}}
+
Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.
+
+ +

Redirects

+ +
+
{{HTTPHeader("Location")}}
+
Indicates the URL to redirect a page to.
+
+ +

Request context

+ +
+
{{HTTPHeader("From")}}
+
Contains an Internet email address for a human user who controls the requesting user agent.
+
{{HTTPHeader("Host")}}
+
Specifies the domain name of the server (for virtual hosting), and (optionally) the TCP port number on which the server is listening.
+
{{HTTPHeader("Referer")}}
+
The address of the previous web page from which a link to the currently requested page was followed.
+
{{HTTPHeader("Referrer-Policy")}}
+
Governs which referrer information sent in the {{HTTPHeader("Referer")}} header should be included with requests made.
+
{{HTTPHeader("User-Agent")}}
+
Contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. See also the Firefox user agent string reference.
+
+ +

Response context

+ +
+
{{HTTPHeader("Allow")}}
+
Lists the set of HTTP request methods support by a resource.
+
{{HTTPHeader("Server")}}
+
Contains information about the software used by the origin server to handle the request.
+
+ +

Range requests

+ +
+
{{HTTPHeader("Accept-Ranges")}}
+
Indicates if the server supports range requests, and if so in which unit the range can be expressed.
+
{{HTTPHeader("Range")}}
+
Indicates the part of a document that the server should return.
+
{{HTTPHeader("If-Range")}}
+
Creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. Used to prevent downloading two ranges from incompatible version of the resource.
+
{{HTTPHeader("Content-Range")}}
+
Indicates where in a full body message a partial message belongs.
+
+ +

Security

+ +
+
{{HTTPHeader("Cross-Origin-Opener-Policy")}} ({{Glossary("COOP")}})
+
Prevents other domains from opening/controlling a window.
+
{{HTTPHeader("Cross-Origin-Resource-Policy")}} ({{Glossary("CORP")}})
+
Prevents other domains from reading the response of the resources to which this header is applied.
+
{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})
+
Controls resources the user agent is allowed to load for a given page.
+
{{HTTPHeader("Content-Security-Policy-Report-Only")}}
+
Allows web developers to experiment with policies by monitoring, but not enforcing, their effects. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP POST request to the specified URI.
+
{{HTTPHeader("Expect-CT")}}
+
Allows sites to opt in to reporting and/or enforcement of Certificate Transparency requirements, which prevents the use of misissued certificates for that site from going unnoticed. When a site enables the Expect-CT header, they are requesting that Chrome check that any certificate for that site appears in public CT logs.
+
{{HTTPHeader("Feature-Policy")}}
+
Provides a mechanism to allow and deny the use of browser features in its own frame, and in iframes that it embeds.
+
{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})
+
Associates a specific cryptographic public key with a certain web server to decrease the risk of {{Glossary("MITM")}} attacks with forged certificates.
+
{{HTTPHeader("Public-Key-Pins-Report-Only")}}
+
Sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated.
+
{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})
+
Force communication using HTTPS instead of HTTP.
+
{{HTTPHeader("Upgrade-Insecure-Requests")}}
+
Sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the {{CSP("upgrade-insecure-requests")}} directive.
+
{{HTTPHeader("X-Content-Type-Options")}}
+
Disables MIME sniffing and forces browser to use the type given in {{HTTPHeader("Content-Type")}}.
+
{{HTTPHeader("X-Download-Options")}}
+
The X-Download-Options HTTP header indicates that the browser (Internet Explorer) should not display the option to "Open" a file that has been downloaded from an application, to prevent phishing attacks as the file otherwise would gain access to execute in the context of the application. (Note: related MS Edge bug).
+
{{HTTPHeader("X-Frame-Options")}} (XFO)
+
Indicates whether a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} or {{HTMLElement("object")}}.
+
{{HTTPHeader("X-Powered-By")}}
+
May be set by hosting environments or other frameworks and contains information about them while not providing any usefulness to the application or its visitors. Unset this header to avoid exposing potential vulnerabilities.
+
{{HTTPHeader("X-XSS-Protection")}}
+
Enables cross-site scripting filtering.
+
+ +

Server-sent events

+ +
+
{{HTTPHeader("Last-Event-ID")}}
+
...
+
{{HTTPHeader("NEL")}} {{experimental_inline}}
+
Defines a mechanism that enables developers to declare a network error reporting policy.
+
{{HTTPHeader("Ping-From")}}
+
...
+
{{HTTPHeader("Ping-To")}}
+
...
+
{{HTTPHeader("Report-To")}}
+
Used to specify a server endpoint for the browser to send warning and error reports to.
+
+ +

Transfer coding

+ +
+
{{HTTPHeader("Transfer-Encoding")}}
+
Specifies the form of encoding used to safely transfer the entity to the user.
+
{{HTTPHeader("TE")}}
+
Specifies the transfer encodings the user agent is willing to accept.
+
{{HTTPHeader("Trailer")}}
+
Allows the sender to include additional fields at the end of chunked message.
+
+ +

WebSockets

+ +
+
{{HTTPHeader("Sec-WebSocket-Key")}}
+
...
+
{{HTTPHeader("Sec-WebSocket-Extensions")}}
+
...
+
{{HTTPHeader("Sec-WebSocket-Accept")}}
+
...
+
{{HTTPHeader("Sec-WebSocket-Protocol")}}
+
...
+
{{HTTPHeader("Sec-WebSocket-Version")}}
+
...
+
+ +

Other

+ +
+
{{HTTPHeader("Accept-Push-Policy")}} {{experimental_inline}}
+
A client can express the desired push policy for a request by sending an Accept-Push-Policy header field in the request.
+
{{HTTPHeader("Accept-Signature")}} {{experimental_inline}}
+
A client can send the Accept-Signature header field to indicate intention to take advantage of any available signatures and to indicate what kinds of signatures it supports.
+
{{HTTPHeader("Alt-Svc")}}
+
Used to list alternate ways to reach this service.
+
{{HTTPHeader("Date")}}
+
Contains the date and time at which the message was originated.
+
{{HTTPHeader("Large-Allocation")}}
+
Tells the browser that the page being loaded is going to want to perform a large allocation.
+
{{HTTPHeader("Link")}}
+
The Link entity-header field provides a means for serialising one or more links in HTTP headers. It is semantically equivalent to the HTML {{HTMLElement("link")}} element.
+
{{HTTPHeader("Push-Policy")}} {{experimental_inline}}
+
A Push-Policy defines the server behaviour regarding push when processing a request.
+
{{HTTPHeader("Retry-After")}}
+
Indicates how long the user agent should wait before making a follow-up request.
+
{{HTTPHeader("Signature")}} {{experimental_inline}}
+
The Signature header field conveys a list of signatures for an exchange, each one accompanied by information about how to determine the authority of and refresh that signature.
+
{{HTTPHeader("Signed-Headers")}} {{experimental_inline}}
+
The Signed-Headers header field identifies an ordered list of response header fields to include in a signature.
+
{{HTTPHeader("Server-Timing")}}
+
Communicates one or more metrics and descriptions for the given request-response cycle.
+
{{HTTPHeader("SourceMap")}}
+
Links generated code to a source map.
+
{{HTTPHeader("Upgrade")}}
+
The relevant RFC document for the Upgrade header field is RFC 7230, section 6.7. The standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection. For example, this header standard allows a client to change from HTTP 1.1 to HTTP 2.0, assuming the server decides to acknowledge and implement the Upgrade header field. Neither party is required to accept the terms specified in the Upgrade header field. It can be used in both client and server headers. If the Upgrade header field is specified, then the sender MUST also send the Connection header field with the upgrade option specified. For details on the Connection header field please see section 6.1 of the aforementioned RFC.
+
{{HTTPHeader("X-DNS-Prefetch-Control")}}
+
Controls DNS prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth.
+
{{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}}
+
...
+
{{HTTPHeader("X-Pingback")}} {{non-standard_inline}}
+
...
+
{{HTTPHeader("X-Requested-With")}}
+
...
+
{{HTTPHeader("X-Robots-Tag")}}{{non-standard_inline}}
+
The X-Robots-Tag HTTP header is used to indicate how a web page is to be indexed within public search engine results. The header is effectively equivalent to <meta name="robots" content="...">.
+
{{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}}
+
Used by Internet Explorer to signal which document mode to use.
+
+ +

Contributing

+ +

You can help by writing new entries or improving the existing ones.

+ +

See also

+ + diff --git a/files/ar/web/http/index.html b/files/ar/web/http/index.html new file mode 100644 index 0000000000..8d346f4b21 --- /dev/null +++ b/files/ar/web/http/index.html @@ -0,0 +1,79 @@ +--- +title: HTTP +slug: Web/HTTP +tags: + - مرجع + - ميثاق نقل النص الفائق + - ويب +translation_of: Web/HTTP +--- +
{{HTTPSidebar}}
+ +

ہائپر ٹیکسٹ ٹرانسفر پروٹوکول (ایچ ٹی ٹی پی) ہائپرمیڈیا دستاویزات ، جیسے ایچ ٹی ایم ایل کو منتقل کرنے کے لئے ایپلیکیشن لیئر پروٹوکول ہے۔

+ +

بروتوكول نقل النص التشعبي (Hypertext Transfer Protocol) هو عبارة عن ميثاق (protocol) في طبقة التطبيقات (application-layer) مهمّته نقل مستندات الوسائط الفائقة، مثل وثائق لغة ترميز النص الفائق. صُمّمَ هذا الميثاق للتواصل فيما بين متصفّحات الويب، وخوادم الويب، لكن أيضاً يُمكن استخدامه لأغراضٍ أُخرى. يَتبِع الميثاق ما يُعرف بنموذج العميل/الخادم (client-server model)، حيث يقوم بإرسال طلب (request)، ومن ثم ينتظر ليتلقّى الإجابة (response) على هذا الطلب. بروتوكول نقل النص التشعبي عديم الحالة (stateless protocol) هذا يعني أنَّ الخادم لن يحتفظ بأيّ بيانات (حالة) بين الطلبين. بالرغم من أنَّ هذا الميثاق مبني على طبقة TCP/IP إلّا أنّه يمكن استخدامه على أي طبقة نقل موثوقة؛ أي مثياق لا يفقد الرسائل بصمت كما يفعل مثياق UDP.

+ +
+
+

دروس

+ +

تعلم استخدام HTTP مع الدورات والدروس الإرشاديّة التالية.

+ +
+
لمحة عن HTTP
+
الميزات الأساسيّة لميثاق طرفي العميل والخادم (client-server protocole): ماذا يُمكِن أن يفعل، وما استخداماته.
+
ذاكرة التخزين المؤقت ل HTTP
+
تقنيّة التخزين المؤقت مهمة جداً لصفحات ويب أسرع. تشرح هذه المقالة الفرق بين طرق الخزين المؤقت، وكيفيّة استخدام ترويسات (headers) الميثاق للتحكم بها.
+
كعكات HTTP
+
آلية عمل الكعكات (ملفات تعريف الإرتباط) مشروحة في هذا المقال. عندما يتعامل الميثاق مع طلب، يُمكِن للخادم إرسالة الترويسة Set-Cookie مع الرد. ثم يقوم العميل بإعادة قيمة الكعكة مع كل طلب لنفس الخادم باستخدام الترويسة Cookie. يُمكِن أن تُضبَط الكعكات أيضاً لتنتهي صلاحيتها في تاريخ معين، أو لِتُحصَر فعاليتها في نطاق ومسار معين.
+
+ +
+
تطور HTTP
+
وصف موجز للتغيّرات التي طرأت منذ الإصدارات الأولى من الميثاق، إلى الإصدارات الحديثة (الإصدار HTTP/2 وما بعده).
+
إرشادات أمان الويب من موزيلا
+
مجموعة من النصائح لتساعد المطورين على بناء تطبيقات ويب آمنة.
+
+ +
+
رسائل ميثاق نقل النص الفائق
+
تشرح المقالة نوع وبنيّة أنواع الرسائل المختلفة في الإصدار الأول والثاني من الميثاق.
+
طريقة عمل جلسة ميثاق نقل النص الفائق النموذجيّة
+
تُظهِر المقالة وتشرح الكيفيّة التي تجري فيها جلسة الميثاق الإعتياديّة.
+
إدارة الإتصال في الإصدار الأول من الميثاق
+
تشرح المقالة نماذج إدارة الإتصال الثلاثة المتوفرة في الإصدار الأول، مغطيةً نقاط قوتهم وضعفهم.
+
+
+ +
+

مراجع

+ +

تصفَّح وثائق بروتوكول نقل النص التشعبي المرجعيَّة المُفصَّلة.

+ +
+
ترويسات لغة ترميز النص الفائق
+
تُستخدم رسائل ترويسات الميثاق لوصف مورد، أو سلوك الخادم أو العميل. يمكن إضافة ترويسات مخصصة بواسطة البادِئة -X، الترويسات الأخرى مُعرفة في سجل IANA، والتي عُرِفَ محتواهاً بالأصل في RFC 4229. تعمل IANA أيضاً على إدارة سجل رسائل الترويسات الجديدة المُقترحة.
+
طرق الطلب في ميثاق نقل النص الفائق
+
العمليات المُختلفة التي يُمكِن أن تتم بواسطة الميثاق: {{HTTPMethod("GET")}}، {{HTTPMethod("POST")}}، ويوجد أيضاً طلبات أقل شيوعاً مثل {{HTTPMethod("OPTIONS")}}، {{HTTPMethod("DELETE")}}، أو {{HTTPMethod("TRACE")}}.
+
رموز الحالة
+
تشير رموز الحالة إلى ما إذا كان طلب معين قد تمَّ بنجاح. رموز الاستجابة مجموعة في خمس فئات: استجابة معلوماتية، استجابة ناجحة، إعادة توجيه، خطأ من جهة العميل، خطأ من جهة الخادم.
+
+ +

أدوات وموارد

+ +

أدوات وموارد مفيدة لفهم وتنقيح عمل HTTP.

+ +
+
أدوات مطورين فايرفوكس
+
مُراقب الشبكة
+
مرقب موزيلا (Mozilla Observatory)
+
مشروع صُمِمَ ليساعد المطورين، مدراء النظام، والمختصين في الحماية على إعداد مواقعهم بشكل آمن.
+
أداة RedBot
+
أداة تساعد على التحقق من الترويسات المتعلقة بالتخزين المؤقت.
+
كيف تعمل المتصفحات
+
مقالة شاملة عن الأجزاء الداخليّة للمتصفحات وتدفق الطلبات في ميثاق نقل النص الفائق. على كل مطوِّر ويب أن يكون على دراية بمعلومات هذه المقالة.
+
+
+
+ +
diff --git a/files/ar/web/http/overview/index.html b/files/ar/web/http/overview/index.html new file mode 100644 index 0000000000..d727b8cc7f --- /dev/null +++ b/files/ar/web/http/overview/index.html @@ -0,0 +1,167 @@ +--- +title: نظرة عامة عن HTTP +slug: Web/HTTP/Overview +translation_of: Web/HTTP/Overview +--- +
بروتكول ال HTTP هو {{Glossary("protocol")}} يسمح بجلب الموارد, مثل مستندات HTML. انه الأساس لتبادل أي بيانات على الويب بالأضافة من أنه يعمل كبروتوكول خادم-عميل, والذي يعني من أن الطلبات تبدأ من قبل العميل نفسه باستخدام المتصفح. يتم إعادة بناء المستند الكامل من مختلف الملفات الفرعية  المجلوبة. على سبيل المثال, النص و و صف التنسيق و الصور و مقاطع الفيديو و الملفات النصية و الكثير... 
+ +

A Web document is the composition of different resources

+ +

العملاء و الخادم يتواصلون من خلال تبادل الرسائل الفردية  (على عكس تدفق البيانات). يتم إرسال الرسائل من العميل نفسه, باستخدام متصفح الإنترنت على سبيل المثال, و يتم استدعاء البيانات التي تم ارسالها الى الخادم كجواب عن تلك الرسائل التي ارسلت من العميل.

+ +

HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer.تم تصميم HTTP في أوائل التسعينيات ، وهو بروتوكول قابل للتوسيع تطور بمرور الوقت. إنه بروتوكول يعمل من خلال طبقة التطبيقات يتم إرساله عبر {{Glossary("TCP")}}, ، أو عبر اتصال TCP مشفر بواسطة {{Glossary("TLS")}}- ، على الرغم من أنه يمكن نظريًا استخدام أي بروتوكول نقل موثوق. نظرًا لقابليته للتوسعة ، فإنه لا يستخدم فقط لجلب مستندات النص التشعبي ، ولكن أيضًا الصور ومقاطع الفيديو أو لنشر المحتوى على الخوادم ، كما هو الحال مع نتائج نماذج HTML. يمكن أيضًا استخدام HTTP لجلب أجزاء من المستندات لتحديث صفحات الويب عند الطلب.

+ +

  مكونات الأنظمة المستندة إلى الأنظمةHTTP

+ +

HTTP هو بروتوكول خادم عميل: يتم إرسال الطلبات بواسطة كيان واحد أو وكيل المستخدم (أو وكيل نيابة عنه). في معظم الأحيان يكون وكيل المستخدم مستعرض ويب ، ولكن يمكن أن يكون أي شيء ، على سبيل المثال روبوت يزحف إلى الويب لملء فهرس محرك البحث والحفاظ عليه.

+ +

يتم إرسال كل طلب فردي إلى الخادم الذي يتعامل معه ويقدم إجابة تسمى الاستجابة. بين العميل والخادم ، هناك العديد من الكيانات ، التي تسمى مجتمعة {{Glossary("Proxy_server", "proxies")}} ، والتي تؤدي عمليات مختلفة وتعمل كبوابات أو {{Glossary("Cache", "caches")}} ، على سبيل المثال.

+ +

Client server chain

+ +

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

+ +

العميل: وكيل المستخدم

+ +

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

+ +

المستعرض هو دائمًا الكيان الذي يبدأ الطلب. إنه ليس الخادم أبدًا (على الرغم من إضافة بعض الآليات على مر السنين لمحاكاة الرسائل التي يبدأها الخادم).

+ +

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

+ +

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

+ +

The Web server

+ +

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

+ +

ليس بالضرورة أن يكون الخادم جهازًا واحدًا ، ولكن يمكن استضافة العديد من مثيلات برنامج الخادم على نفس الجهاز. باستخدام HTTP / 1.1 ورأس {{HTTPHeader ("Host")}} ، يمكنهم أيضًا مشاركة عنوان IP نفسه.

+ +

Proxies

+ +

HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer.بين متصفح الويب والخادم ، تقوم العديد من أجهزة الكمبيوتر والآلات بنقل رسائل HTTP.. نظرًا للهيكل متعدد الطبقات لمكدس الويب ، يعمل معظمها على مستوى النقل أو الشبكة أو المستوى المادي ، وتصبح شفافة في طبقة HTTP ويحتمل أن يكون لها تأثير كبير على الأداء. تسمى تلك التي تعمل في طبقات التطبيق عمومًا الوكلاء(proxies). يمكن أن تكون هذه شفافة ، حيث يتم إعادة توجيه الطلبات التي يتلقونها دون تغييرها بأي شكل من الأشكال ، أو غير شفافة ، وفي هذه الحالة سوف يقومون بتغيير الطلب بطريقة ما قبل تمريره إلى الخادم. قد تؤدي الوكلاء وظائف عديدة:

+ + + +

الجوانب الأساسية لـ HTTP

+ +

HTTP بسيط

+ +

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

+ +

HTTP قابل للتوسيع

+ +

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

+ +

HTTP عديم الحالة ، ولكن ليس بدون جلسات

+ +

HTTP is stateless: there is no link between two requests being successively carried out on the same connection. This immediately has the prospect of being problematic for users attempting to interact with certain pages coherently, for example, using e-commerce shopping baskets. But while the core of HTTP itself is stateless, HTTP cookies allow the use of stateful sessions. Using header extensibility, HTTP Cookies are added to the workflow, allowing session creation on each HTTP request to share the same context, or the same state.

+ +

HTTP والاتصالات

+ +

على الرغم من أن HTTP لا يتطلب أن يكون بروتوكول النقل الأساسي قائمًا على الاتصال ؛ فقط تتطلب أن تكون موثوقة ، أو لا تفقد الرسائل (لذلك على الأقل تقديم خطأ). من بين بروتوكولي النقل الأكثر شيوعًا على الإنترنت ، يعتبر TCP موثوقًا و UDP ليس كذلك. لذلك يعتمد HTTP على معيار TCP ، الذي يعتمد على التوصيل.

+ +

قبل أن يتمكن العميل والخادم من تبادل زوج طلب / استجابة HTTP ، يجب عليهم إنشاء اتصال TCP ، وهي عملية تتطلب عدة رحلات ذهابًا وإيابًا. السلوك الافتراضي لـ HTTP / 1.0 هو فتح اتصال TCP منفصل لكل زوج من طلبات / استجابة HTTP. هذا أقل كفاءة من مشاركة اتصال TCP واحد عندما يتم إرسال طلبات متعددة في تتابع قريب.

+ +

من أجل التخفيف من هذا الخلل ، قدم HTTP / 1.1 خطوط الأنابيب (التي ثبت صعوبة تنفيذها) والتوصيلات المستمرة: يمكن التحكم في اتصال TCP الأساسي جزئيًا باستخدام الرأس {{HTTPHeader ("Connection")}}. تقدمت HTTP / 2 خطوة إلى الأمام من خلال تعدد إرسال الرسائل عبر اتصال واحد ، مما يساعد في الحفاظ على الاتصال دافئًا وأكثر كفاءة.

+ +

التجارب جارية لتصميم بروتوكول نقل أفضل أكثر ملاءمة لـ HTTP. على سبيل المثال ، تقوم Google بالتجربة مع QUIC الذي يعتمد على UDP لتوفير بروتوكول نقل أكثر موثوقية وفعالية.

+ +

ما يمكن التحكم فيه عن طريق HTTP

+ +

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

+ +

فيما يلي قائمة بالميزات الشائعة التي يمكن التحكم فيها باستخدام HTTP.

+ + + +

HTTP flow

+ +

When a client wants to communicate with a server, either the final server or an intermediate proxy, it performs the following steps:

+ +
    +
  1. Open a TCP connection: The TCP connection is used to send a request, or several, and receive an answer. The client may open a new connection, reuse an existing connection, or open several TCP connections to the servers.
    2. +
  2. Send an HTTP message: HTTP messages (before HTTP/2) are human-readable. With HTTP/2, these simple messages are encapsulated in frames, making them impossible to read directly, but the principle remains the same. For example: + 
    GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr
    +
    3. +
  3. Read the response sent by the server, such as: + 
    HTTP/1.1 200 OK
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+<!DOCTYPE html... (here comes the 29769 bytes of the requested web page)
    +
    4. +
  4. Close or reuse the connection for further requests.
    5. +
+ +

If HTTP pipelining is activated, several requests can be sent without waiting for the first response to be fully received. HTTP pipelining has proven difficult to implement in existing networks, where old pieces of software coexist with modern versions. HTTP pipelining has been superseded in HTTP/2 with more robust multiplexing requests within a frame.

+ +

HTTP Messages

+ +

HTTP messages, as defined in HTTP/1.1 and earlier, are human-readable. In HTTP/2, these messages are embedded into a binary structure, a frame, allowing optimizations like compression of headers and multiplexing. Even if only part of the original HTTP message is sent in this version of HTTP, the semantics of each message is unchanged and the client reconstitutes (virtually) the original HTTP/1.1 request. It is therefore useful to comprehend HTTP/2 messages in the HTTP/1.1 format.

+ +

There are two types of HTTP messages, requests and responses, each with its own format.

+ +

Requests

+ +

An example HTTP request:

+ +

A basic HTTP request

+ +

Requests consists of the following elements:

+ + + +

Responses

+ +

An example response:

+ +

+ +

Responses consist of the following elements:

+ + + +

APIs based on HTTP

+ +

The most commonly used API based on HTTP is the {{domxref("XMLHttpRequest")}} API, which can be used to exchange data between a {{Glossary("user agent")}} and a server. The modern {{domxref("Fetch API")}} provides the same features with a more powerful and flexible feature set.

+ +

Another API, server-sent events, is a one-way service that allows a server to send events to the client, using HTTP as a transport mechanism. Using the {{domxref("EventSource")}} interface, the client opens a connection and establishes event handlers. The client browser automatically converts the messages that arrive on the HTTP stream into appropriate {{domxref("Event")}} objects, delivering them to the event handlers that have been registered for the events' {{domxref("Event.type", "type")}} if known, or to the {{domxref("EventSource.onmessage", "onmessage")}} event handler if no type-specific event handler was established.

+ +

Conclusion

+ +

HTTP is an extensible protocol that is easy to use. The client-server structure, combined with the ability to simply add headers, allows HTTP to advance along with the extended capabilities of the Web.

+ +

Though HTTP/2 adds some complexity, by embedding HTTP messages in frames to improve performance, the basic structure of messages has stayed the same since HTTP/1.0. Session flow remains simple, allowing it to be investigated, and debugged with a simple HTTP message monitor.

diff --git a/files/ar/web/index.html b/files/ar/web/index.html new file mode 100644 index 0000000000..9f0c72c4c9 --- /dev/null +++ b/files/ar/web/index.html @@ -0,0 +1,93 @@ +--- +title: تقنيات الويب للمطورين +slug: Web +tags: + - تطوير الويب + - صفحة هبوط + - ويب +translation_of: Web +--- +

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

+ +
+
+

الأساسيات

+ +
+
لغة ترميز النص الفائق
+
تستخدم لغة ترميز النص الفائق (HTML) لوصف وتعريف محتوى صفحة الويب.
+
بروتوكول نقل النص الفائق
+
يستخدم بروتوكول نقل النص الفائق (HTTP) لتوصيل وثائق لغة ترميز النص الفائق، وغيرها من الوثائق الفائقة على الويب.
+
+ +

البرمجة

+ +
+
الجافاسكربت
+
تعد الجافاسكربت لغة برمجة تعمل على المتصفح، تستطيع استخدامها لإضافة مزايا تفاعليّة ومزايا ديناميكيّة أخرى لموقعك أو تطبيقك.
+
واجهات البرمجيّة للويب
+
تستخدم  واجهات التطبيقات البرمجيّة للويب (Web APIs) للقيام بمهام متنوعة، كالتلاعب بـ DOM، تشغيل الملفات الصوتيّة والفيديوهات، أو توليد رسومات ثلاثيّة الأبعاد.
+
+ + + +

الرسومات

+ +
+
الكانفاس
+
عنصر <canvas> يوفر واجهات برمجيّة لرسم رسومات ثنائيّة الأبعاد باستخدام لغة الجافاسكربت.
+
الرسوميات المتجهية المتغيرة
+
تتيح الرسوميات المتجهيّة المتغيرة (SVG) لك استخدام الخطوط، المنحنيات، و غيرها من الأشكال الهندسيّة لتشكيل الرسومات. مع الفيكتور (vector) يمكنك إنشاء صور يمكن أن يتم تحجيمها بدون أن تفقد دقتها.
+
تقنيّة WebGL
+
دليلك للبدء مع تقنيّة WebGL، الواجهة البرمجيّة المخصصة للويب لرسم رسوميات ثلاثيّة الأبعاد. تسمح هذه التقنيّة باستخدام معايير OpenGL ES في محتوى الويب.
+
+ +

الصوت، الفيديو، والوسائط المتعددة

+ +
+
تقنيات وسائط الويب
+
قائمة بالواجهات البرمجيّة المتعلقة بالوسائط مع روابط لوثائق ستحتاجها.
+
لمحة عن تقنية الوسائط في الويب
+
لمحة عامة على تقنيات الويب المفتوحة والواجهات البرمجيّة التي توفر دعم لتشغيل الصوت والفيديو، التلاعب والتسجيل. إذا لم تكن تعلم أي واجهة برمجيّة يجب أن تستخدم، فهنا حيث يجب أن تبدأ.
+
واجهة برمجيّة لالتقاط الوسائط والتدفقات
+
مرجع لواجهة برمجية التي تجعل من الممكن دفق، تسجيل، والتلاعب بالوسائط محلياً وعلى الشبكة في آنٍ واحد. هذا يتضمن استخدام الكاميرا المحليّة والميكروفون للالتقاط الفيديو، الصوت، والصور.
+
+
استخدام ملفات الفيديو والصوت في لغة ترميز النص الفائق
+
تضمين ملفات الفيديو والصوت في صفحات الويب، والتحكم بتشغيلها.
+
تقنيّة WebRTC
+
تقنية RTC في الويب تعني الإتصال في الوقت الحالي (Real-Time Communications), وهي تقنيّة تسمح بتمكين تدفق الصوت والصورة ومشاركتها بين المُتصفحات.
+
+

أُخرى

+
+
لغة الترميز الرياضية
+
تتيح لغة الترميز الرياضية (MathML) لك تمثيل صيغ المعادلات الرياضيّة المعقدة.
+
+
+ +
+
+
+

قسم التعلم

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

مواضيع أُخرى

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

قراءة المزيد ...

+ +
diff --git a/files/ar/web/javascript/about_javascript/index.html b/files/ar/web/javascript/about_javascript/index.html new file mode 100644 index 0000000000..4a6fa9739e --- /dev/null +++ b/files/ar/web/javascript/about_javascript/index.html @@ -0,0 +1,61 @@ +--- +title: About JavaScript +slug: Web/JavaScript/About_JavaScript +tags: + - جافا سكريبت + - مبتدئ + - مقدمة +translation_of: Web/JavaScript/About_JavaScript +--- +
{{JsSidebar}}
+ +

ماهي جافا سكريبت

+ +

جافا سكريبت® (غالبا ما تختصر بـ JS) هي لغة خفيفة الوزن، مفسّرة، كائنية التوجه مع دوال من الدرجة الأولى، وهي معروفة باسم لغة البرمجة النصية لصفحات الويب، ولكنها تستخدم في العديد من البيئات غير المتصفّح أيضًا. وهي لغة برمجة مبنية على نماذج أولية ومتعددة النماذج تتسم بالديناميكية و تدعم أنماط البرمجة الكائنية التوجه و اﻷساسية و الوظيفية.

+ +

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

+ +

على عكس الاعتقاد الخاطئ الشائع ، فإن جافا سكريبت ليست "جافا المفسرة". باختصار ، جافا سكريبت هي لغة برمجة ديناميكية تدعم بناء الكائن المعتمد على النماذج. التركيب اﻷساسي مشابه -بشكل مقصود- لجافا و سي++ لتقليل عدد المفاهيم الجديدة المطلوبة لتعلم اللغة. إن تركيبات اللغة مثل عبارات if و حلقات for و while ، و الكتل switch and try ... catch تعمل بالمثل كما في هذه اللغات (أو أقرب إلى ذلك)

+ +

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

+ +

تتضمن الإمكانات الديناميكية لجافا سكريبت بناء الكائن وقت التشغيل ، وقوائم المعاملات المتغيرة ، ومتغيرات الوظيفة ، وإنشاء النص البرمجي الديناميكي (عن طريق eval) ، واستبطان الكائن (عن طريق for ... in)، واستعادة الكود المصدري (يمكن لبرامج جافا سكريبت تفكيك هيئات\أجسام الوظائف رجوعا إلى نصها المصدري).

+ +

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

+ +

ما هي تطبيقات جافا سكريبت المتاحة؟

+ +

The Mozilla project provides two JavaScript implementations. The first ever JavaScript was created by Brendan Eich at Netscape, and has since been updated to conform to ECMA-262 Edition 5 and later versions. This engine, code named SpiderMonkey, is implemented in C/C++. The Rhino engine, created primarily by Norris Boyd (also at Netscape) is a JavaScript implementation written in Java. Like SpiderMonkey, Rhino is ECMA-262 Edition 5 compliant.

+ +

Several major runtime optimizations such as TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) and IonMonkey were added to the SpiderMonkey JavaScript engine over time. Work is always ongoing to improve JavaScript execution performance.

+ +

Besides the above implementations, there are other popular JavaScript engines such as:-

+ + + +

Each of Mozilla's JavaScript engines expose a public API which application developers can use to integrate JavaScript into their software. By far, the most common host environment for JavaScript is web browsers. Web browsers typically use the public API to create host objects responsible for reflecting the DOM into JavaScript.

+ +

Another common application for JavaScript is as a (Web) server side scripting language. A JavaScript web server would expose host objects representing a HTTP request and response objects, which could then be manipulated by a JavaScript program to dynamically generate web pages. Node.js is a popular example of this.

+ +

مصادر جافا سكريبت

+ +
+
SpiderMonkey
+
Information specific to Mozilla's implementation of JavaScript in C/C++ engine (aka SpiderMonkey), including how to embed it in applications.
+
+ +
+
Rhino
+
Information specific to the JavaScript implementation written in Java (aka Rhino).
+
Language resources
+
Pointers to published JavaScript standards.
+
A re-introduction to JavaScript
+
JavaScript guide and JavaScript reference.
+
+ +

JavaScript® is a trademark or registered trademark of Oracle in the U.S. and other countries.

diff --git a/files/ar/web/javascript/guide/control_flow_and_error_handling/index.html b/files/ar/web/javascript/guide/control_flow_and_error_handling/index.html new file mode 100644 index 0000000000..d87ef2f7e9 --- /dev/null +++ b/files/ar/web/javascript/guide/control_flow_and_error_handling/index.html @@ -0,0 +1,467 @@ +--- +title: التحكم فى التدفق وامساك الاخطاء +slug: Web/JavaScript/Guide/Control_flow_and_error_handling +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
+ +

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

+ +
+

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

+ +
+

ملحوظة: برامج الجافاسكريبت وبيانات الجافاسكريبت، غالباً ما تسمى تعليمات برمجية.

+
+ +

أي تعبير جافا سكريبت، هو  أيضا تعليمة برمجية. راجع Expressions and operators  للحصول على معلومات كاملة حول التعبيرات.

+ +

Block statement

+ +

ابسط تعليمة برمجية هي التعليمة البرمجية بلوك  block، التي تستخدم لاحتواء مجموعة من التعليمات البرمجية. البلوك محدد بواسطة الاقواس المتعرجة:

+ +
{
+  statement_1;
+  statement_2;
+  .
+  .
+  .
+  statement_n;
+}
+
+ +

مثال

+ +

اغلب استخدامات البلوك، تكون مع تعليمات التحكم في التدفق ( مثل if, for, while )

+ +
while (x < 10) {
+  x++;
+}
+
+ +

لدينا هنا، { ;++x } التعليمة البرمجة block.

+ +

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

+ +

في جافا سكريبت، البلوكات "المستقلة"  يمكن أن ينتج  عنها نتائج مختلفة تماما عما كان سينتج في C أو جافا. فمثلا

+ +
var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // outputs 2
+
+ +

مخرجات التعليمة البرمجية اعلاه، ستكون 2 وذالك لان المتغير x المتواجد داخل البلوك والمتغير x المتواجد خارج البلوك لديهما نفس النطاق، او بمعنى اصح، كلاهما في النطاق العام وهو السكريببت. في C أو جافا. المخرجات ستكون 1.

+ +

ابتداءا من ECMAScript2015. استخدام المتغير let داخل البلوك سينتج عنه سلوك مغاير. راجع {{jsxref("Statements/let", "let")}} صفحة المرجع للحصول على مزيد من المعلومات.

+ +

التعليمات الشرطية

+ +

التعليمة الشرطية هي مجموعة من الأوامر التي ستنفذ إذا تحقق شرطا معيناً. تدعم الجافاسكريبت اثنين من التعليمات الشرطية: هما if...else و switch.

+ +

التعليمة if...else

+ +

ستنفذ التعليمة البرمجية المرتبطة بالتعليمة if اذا كان الشرط المنطقي يساوي true. وكذالك ستنفذ التعليمة البرمجية المرتبطة بالتعليمة else اذا كان الشرط المنطقي يساوي false. استخدام التعليمة else اختياري. فيما تكون التعليمة if على الشكل التالي،

+ +
if (condition) {
+  statement_1;
+} else {
+  statement_2;
+}
+ +

الشرط condition، يمكن ان يكون اي تعبير لإختبار ما اذا كان الشرط true او false راجع Boolean. لتوضيح ما الذي سيتم تنفيذه: في حالة ما اذا كان الشرط صحيح  سيتم تنفيذ statement_1، اما اذا كان الشرط غير صحيح سيتم تنفيذ statement_2، يمكن ل statement_1 و statement_2 ان تكون اي تعليمات برمجية، بما فيها تعليمة if اخرى.

+ +

يمكنك أيضا توسيع مجال التعليمات الشرطية باستخدام else if لاختبار شروط متعددة في تسلسل، كما يلي:

+ +
if (condition_1) {
+  statement_1;
+} else if (condition_2) {
+  statement_2;
+} else if (condition_n) {
+  statement_n;
+} else {
+  statement_last;
+}
+
+
+ +

في حالة وجود شروط متعددة سيتم تنفيذ شرط واحد فقط، وهو الشرط المنطقي الذي سيتم اختباره ب true. لتنفيذ عدة تعليمات برمجية، قم بتضمينها في التعليمة بلوك ({ ... }). من الجيد دائماً استخدام التعليمة بلوك، لا سيما عند استخدام التعليمات الشرطية المتداخلة :

+ +
if (condition) {
+  statement_1_runs_if_condition_is_true;
+  statement_2_runs_if_condition_is_true;
+} else {
+  statement_3_runs_if_condition_is_false;
+  statement_4_runs_if_condition_is_false;
+}
+
+ +
من المستحسن عدم استخدام التعيينات البسيطة في التعبير الشرطي، لأنه يمكن الخلط بين التعيين والمساواة، على سبيل المثال، لا تستخدم التالي:
+ +
 
+ +
if (x = y) {
+  /* statements here */
+}
+
+ +

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

+ +
if ((x = y)) {
+  /* statements here */
+}
+
+ +

القيم  Falsy

+ +

القيم التالية تُقَيًم إلى false عند اختباها في تعليمة شرطية (وتعرف ايضا بالقيم {{Glossary("Falsy")}}):

+ + + +

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

+ +

لا تخلط بين القيم المنطقية الاولية true و false مع القيم true و false للكائن {{jsxref("Boolean")}}. على سبيل المثال:

+ +
var b = new Boolean(false);
+if (b) // this condition evaluates to true
+if (b == true) // this condition evaluates to false
+
+ +

مثال

+ +

فى المثال التالى, الدالة checkData ستعود ب true ادا كان عدد الحروف في الكائن Text يساوي ثلاثة، بخلاف ذالك، سيظهر التنبيه (alert) وتعود ب false.

+ +
function checkData() {
+  if (document.form1.threeChar.value.length == 3) {
+    return true;
+  } else {
+    alert('Enter exactly three characters. ' +
+    document.form1.threeChar.value + ' is not valid.');
+    return false;
+  }
+}
+
+ +

التعليمة switch

+ +

التعليمة switch تسمح للبرنامج باختبار التعبير، وذالك من خلال مطابقة قيمة التعبير مع الحالة case. إذا تم العثور على تطابق، البرنامج سينفذ التعليمة البرمجية المرتبطة بها. التعليمة switch تكون على الشكل التالي:

+ +
switch (expression) {
+  case label_1:
+    statements_1
+    [break;]
+  case label_2:
+    statements_2
+    [break;]
+    ...
+  default:
+    statements_def
+    [break;]
+}
+
+ +

بداية يقوم البرنامج بالبحث عن الحالة case التي تطابق قيمتها قيمة ال expression، اذا وجدت، يقوم البرنامج بتنفيذ التعليمة البرمجية المرتبطة بها، اذا لم يجد ما يبحث عنه في اي من الحالات case، سيقوم البرنامج بتنفيذ التعليمات البرمجية المرتبطة بالحالة default اذا وجدت، لان وجود الحالة default في التعليمة switch اختياري. اذا لم يجد البرنامج اي حالة case متطابقة ولا الحالة default سيقوم بتنفيذ التعليمات البرمجية التي تلي التعليمة switch.

+ +

التعليمة break مرتبطة مع كل حالة case، مهمتها جعل البرنامج يقفز خارج التعليمة switch بمجرد تنفيذ التعليمة البرمجية، واستكمال تنفيذ التعليمات البرمجية التي تلي التعليمة switch. بما ان وجود التعليمة break اختياري، ففي حالة عدم وجودها سيقوم البرنامج بتنفيذ التعليمة التالية في switch.

+ +

مثال

+ +

في المثال التالي، اذا كان fruittype يساوي "Bananas"،  سيقوم البرنامج بتنفيذ  التعليمات البرمجية المرتبطة بالحالة 'case: 'Banana. عندما سسيجد break، سيقوم بايقاف switch وينفذ التعليمات البرمجية التي تليها. اذا لم يجد break سينفذ التعليمة البرمجية المرتبطة بالحالة 'case: 'Cherries ايضا. 

+ +
switch (fruittype) {
+  case 'Oranges':
+    console.log('Oranges are $0.59 a pound.');
+    break;
+  case 'Apples':
+    console.log('Apples are $0.32 a pound.');
+    break;
+  case 'Bananas':
+    console.log('Bananas are $0.48 a pound.');
+    break;
+  case 'Cherries':
+    console.log('Cherries are $3.00 a pound.');
+    break;
+  case 'Mangoes':
+    console.log('Mangoes are $0.56 a pound.');
+    break;
+  case 'Papayas':
+    console.log('Mangoes and papayas are $2.79 a pound.');
+    break;
+  default:
+   console.log('Sorry, we are out of ' + fruittype + '.');
+}
+console.log("Is there anything else you'd like?");
+ +
+

ملاحظة : لمزيد من التفاصيل حول التعليمة  switch.

+
+ +

التعليمات المعالجة للاستثناءات

+ +
+

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

+ +

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

+ +

 

+
+ +

يمكنك قذف (توليد)  الاستثناءات من خلال التعليمة throw والتعامل معها باستخدام التعليمة try...catch

+ + + +

انواع الاستثناءات

+ +

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

+ + + +

التعليمة throw

+ +

التعليمة throw تقذف الاخطاء. عند حدوث خطأ، عادة سوف تتوقف جافا سكريبت، وستولد رسالة للاعلان عن الخطأ. المصطلح التقني لهذه العملية هو : الجافاسكريبت ستقذف (throw) الخطأ. التعليمة throw تمكتك من انشاء خطأ حسب رغبتك. المصطلح التقني لهذه العملية هو: اقذف استثناءا (throw an exception).

+ +

إستخدِم التعليمة throw لقذف الإستثناء، عنما تريد قذف إستثناءا، عليك تحديد التعبير (expression) الذي سيحتوي على القيمة التي ستقذف:

+ +
throw expression;
+
+ +

يمكنك قذف اي استثناء، وليس مجرد تعبيرات من نوع معين. التعليمة البرمجية التالية تقذف استثناءات لمختلف انواع البيانات:

+ +
throw 'Error2';   // String type
+throw 42;         // Number type
+throw true;       // Boolean type
+throw {toString: function() { return "I'm an object!"; } };
+
+ +
ملحوظة : يمكنك تحديد كائن عندما ستقوم بقذف الاستثناء. يمكنك بعد ذالك الاشارة إلى خصائص الكائن في البلوك catch. يقوم المثال التالي بإنشاء الكائن myUserException من النوع UserException واستحدامه في التعليمة throw.
+ +
// Create an object type UserException
+function UserException(message) {
+  this.message = message;
+  this.name = 'UserException';
+}
+
+// Make the exception convert to a pretty string when used as a string
+// (e.g. by the error console)
+UserException.prototype.toString = function() {
+  return this.name + ': "' + this.message + '"';
+}
+
+// Create an instance of the object type and throw it
+throw new UserException('Value too high');
+ +
+

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

+
+ +

التعليمة try...catch

+ +

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

+ +

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

+ +


+ المثال التالى يستخدم التعليمة try...catch. ويقوم باستدعاء دالة تعود باسم الشهر من مصفوفة بناء على القيمة التي تم تمريرها إلى الدالة. إذا كانت القيمة لا تتوافق مع رقم الشهر (1-12)، سيولّد استثناء مع القيمة "InvalidMonthNo" فيما تقوم التعليمة البرمجية في البلوك catch بتعين القيمة unknown إلى المتغير monthName.

+ +
function getMonthName(mo) {
+  mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec)
+  var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
+                'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  if (months[mo]) {
+    return months[mo];
+  } else {
+    throw 'InvalidMonthNo'; //throw keyword is used here
+  }
+}
+
+try { // statements to try
+  monthName = getMonthName(myMonth); // function could throw exception
+}
+catch (e) {
+  monthName = 'unknown';
+  logMyErrors(e); // pass exception object to error handler -> your own function
+}
+
+ +

The catch block

+ +

يمكنك استخدام البلوك  catch للامساك بجميع الاستثناءات التي سيتم قذفها من البلوك try.

+ +
catch (catchID) {
+  statements
+}
+
+ +

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

+ +

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

+ +
try {
+  throw 'myException'; // generates an exception
+}
+catch (e) {
+  // statements to handle any exceptions
+  logMyErrors(e); // pass exception object to error handler
+}
+
+ +

The finally block

+ +

البلوك finally سيحتوي على التعليمات البرمجية التي سيقوم بتنفيذها بعدما تنفذ البلوكات try و catch، وايضا سينفذ قبل تنفيذ التعليمات البرمجية التي تلي التعليمة try...catch. سينفذ البلوك finally سواء تم قذف الاستثناء ام لا، اذا تم قذف الاستثناء، ستنفذ التعليمات البرمجية في البلوك finally حتى وان لم يتم معالجة الاستثناء في البلوك catch.

+ +

يمكنك استخدام البلوك finally لجعل السكريبت الخاص بك يفشل بأمان عند حدوث استثناء، على سبيل المثال، اذا كنت في حاجة إلى تحرير مورد، او لغلق ال flux، الخ. المثال التالي يفتح ملف ثم ينفذ التعليمات البرمجية لهذا ملف (server-side JavaScript يسمح لك بالوصول الى الملفات). اذا تم قذف استثناء في حين أن الملف مفتوح، البلوك finally ستغلق هذا الملف قبل فشل السكريبت.

+ +
openMyFile();
+try {
+  writeMyFile(theData); //This may throw a error
+} catch(e) {
+  handleError(e); // If we got a error we handle it
+} finally {
+  closeMyFile(); // always close the resource
+}
+
+ +

عندما سيقوم البلوك finally بارجاع قيمة، تصبح هذه القيمة قيمة الإرجاع من كامل المجموعة  try-catch-finally بغض النظر عن التعليمات البرمجية العائدة من البلوكات  try و catch.

+ +
function f() {
+  try {
+    console.log(0);
+    throw 'bogus';
+  } catch(e) {
+    console.log(1);
+    return true; // this return statement is suspended
+                 // until finally block has completed
+    console.log(2); // not reachable
+  } finally {
+    console.log(3);
+    return false; // overwrites the previous "return"
+    console.log(4); // not reachable
+  }
+  // "return false" is executed now
+  console.log(5); // not reachable
+}
+f(); // console 0, 1, 3; returns false
+
+ +

الكتابة فوق القيم العائدة من قبل البلوك finally ينطبق أيضا على قذف الاستثناءات او اعادة القذف داخل البلوك catch:

+ +
function f() {
+  try {
+    throw 'bogus';
+  } catch(e) {
+    console.log('caught inner "bogus"');
+    throw e; // this throw statement is suspended until
+             // finally block has completed
+  } finally {
+    return false; // overwrites the previous "throw"
+  }
+  // "return false" is executed now
+}
+
+try {
+  f();
+} catch(e) {
+  // this is never reached because the throw inside
+  // the catch is overwritten
+  // by the return in finally
+  console.log('caught outer "bogus"');
+}
+
+// OUTPUT
+// caught inner "bogus"
+ +

التعليمات try...catch المتداخلة

+ +

يمكن عمل واحدة او اكثر من التعليمات try...catch المتداخلة.  شرط عدم توفر try...catch الداخلية على البلوك catch، تتطلب وجود البلوك finally والتعليمة try...catch الخارجية سوف تستخدم البلوك catch ليتم التحقق من المطابقة. راجع nested try-blocks في صفحة المرجع الخاص بالتعليمة try...catch.

+ +

باستخدام الكائنات Error

+ +

اعتماداً على نوع الخطأ، من الممكن استخدام الخصائص name و message للحصول على رسالة أكثر دقة. عموما لدينا الخاصية name التي ستعرض نوع الخطا الذي حدث (مثلا: DOMException او Error). والخاصية message التي ستعرض رسالة الخطأ لوصف هذا الخطا (تستخدم عادة عندما نريد تحويل او عرض نص الخطأ). على سبيل المثال:

+ +
try {
+  throw new Error('Whoops!');
+} catch (e) {
+	if( e.message === 'Whoops!'){
+		e.message = "Costume message";
+	}
+  console.log(e.name + ': ' + e.message); // Error: Costume message
+}
+ +

اذا كنت ترغب في انشاء اخطاء خاصة بك، يمكتك استخدام المنشئ Error من أجل الاستفادة من خصائصه. على سبيل المثال:

+ +
function doSomethingErrorProne() {
+  if (ourCodeMakesAMistake()) {
+    throw (new Error('The message'));
+  } else {
+    doSomethingToGetAJavascriptError();
+  }
+}
+....
+try {
+  doSomethingErrorProne();
+} catch (e) {
+  console.log(e.name); // logs 'Error'
+  console.log(e.message); // logs 'The message' or a JavaScript error message)
+}
+ +

Promises

+ +

ابتداءا من ECMAScript2015. اصبح لجافاسكريبت الكائن Promise والذي يسمح لك بالتحكم في التدفق والعمليات المتزامنة.

+ +

Promise هو احد هذه الحالات:

+ + + +

+ +

تحميل صورة ب XHR

+ +

مثال بسيط باستخدام Promise و XMLHttpRequest في مستودع الاكواد MDN GitHub. راجع المثال js-examples. يمكنك ايضا مراجعة see it in action. تم التعليق على كل خطوة لتمكينك من متابعة سير عملية Promise و XHR. هذا الإصدار من دون تعليقات، يعرض تدفق ال Promise:

+ +
function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+    request.onload = function() {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:'
+                     + request.statusText));
+      }
+    };
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+    request.send();
+  });
+}
+ +

للحصول على معلومات أكثر تفصيلاً، راجع {{jsxref("Promise")}} في صفحة المرجع.

+ +
+
{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
+
+
diff --git a/files/ar/web/javascript/guide/grammar_and_types/index.html b/files/ar/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..be90ff189a --- /dev/null +++ b/files/ar/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,680 @@ +--- +title: قواعد اللغة وأنواع البيانات +slug: Web/JavaScript/Guide/Grammar_and_types +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
+ +

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

+ +

الأساسيات

+ +
+

معظم التعبيرات الخاصة بجافا سكريبت مشتقة من Java، ولكنها تاثرت أيضا ب Awk، بيرل وبايثون.

+ +

الجافاسكريبت حساسة لحالة الاحرف myName ليس نفسه myname، الجافاسكريبت تستخدم مجموعة من رموز ال Unicode.

+ +

في الجافاسكريبت، التعليمات البرمجية تسمى {{Glossary("Statement", "statements")}}  وتكون مفصولة بفاصلة منقوطة (؛).  الفراغات، وعلامات التبويب (tabs) والأسطر الجديدة تسمى مساحة خالية.  يتم تحليل نص شيفرة المصدر لجافا سكريبت من اليسار إلى اليمين ويتم تحويلها إلى سلسلة من العناصر والمدخلات، وهي الرموز المميزة (tokens)، رموز التحكم (control characters)، ونهايات الاسطر (line terminators)، والتعليقات والمسافات الخالية، ECMAScript تحدد ايضا الكلمات المحجوزة مثل (if او var او return الخ)  والبيانات الحرفية، كما لها قواعد للإدراج التلقائي للفاصلة المنقوطة (ASI) لانهاء التعليمة البرمجية. ومع ذالك، من المستحسن دائماً إضافة الفاصلة المنقوطة (;) نهاية التعليمة البرمجية الخاصة بك لتجنب الاثار الجانبية، للحصول على مزيد من المعلومات، راجع قاموس جافا سكريبت.

+ +

التعليقات

+ +

صيغة التعليقات هي نفسها كما هو الحال في ++C و في العديد من اللغات الأخرى:

+ +
// a one line comment
+
+/* this is a longer,
+   multi-line comment
+ */
+
+/* You can't, however, /* nest comments */ SyntaxError */
+ +

الاعلانات

+ +

هناك ثلاثة أنواع من الإعلانات في جافا سكريبت.

+ +
+
{{jsxref("Statements/var", "var")}}
+
الاعلان عن متغير (اي، الكلمة المحجوزة var متبوعة باسم المتغير var x)، تهيئته (اي، اسناد قيمة اولية له var x = value ) / اختياري.
+
{{jsxref("Statements/let", "let")}}
+
الاعلان عن متغير محلي ضمن نطاق الكتلة (ال block هو مجموعة من التعليمات البرمجية بين اقواس متعرجة {})، تهيئته / اختياري.
+
{{jsxref("Statements/const", "const")}}
+
الاعلان عن ثابت قابل للقراءة فقط.
+
+ +

المتغيرات

+ +

يمكنك استخدام المتغيرات كأسماء رمزية للقيم في التطبيق الخاص بك. أسماء المتغيرات، تسمى {{Glossary("Identifier", "identifiers")}}, وتخضع لقواعد معينة.

+ +

المتغير في جافاسكريبت، يجب أن يبدأ بحرف، أو رمز (_)، أو علامة الدولار ($). يمكن أيضا أن تكون الأحرف اللاحقة أرقاما (0-9). ولأن الجافاسكريبت حساسة لحالة الأحرف، فإن الحروف تشمل الأحرف من "A" الى "Z" (أحرف كبيرة) او أحرف من  "a" الى "z" (أحرف صغيرة).

+ +

يمكنك استخدام معظم أحرف ال ISO 8859-1 أو Unicode مثل å و ü في المتغيرات. لمزيد من المعلومات راجع مذه المدونة كما يمكنك أيضا استخدام  Unicode escape sequences كرموز مع المتغيرات.

+ +

بعض الامثلة عن اسماء المتغيرات الجائزة :  Number_hits, temp99, $credit, and_name.

+ +

الاعلان عن المتغيرات

+ +

يمكنك تعريف متغير بثلاث طرق:

+ + + +

اختبار المتغيرات

+ +

الاعلان عن متغير باستخدام var او let من دون تهيئته، سيتم تهيئته بالقيمة {{jsxref("undefined")}} (بشكل تلقائي من قبل الجافاسكريبت).

+ +
+

ملاحظة: جافا سكريبت في الوضع الصارم ("use strict") لا تسمح باستخدام المتغيرات إذا لم يتم الإعلان عنها

+
+ +

محاولة الوصول إلى متغير غير معلن عنه سيؤدي الى ال {{jsxref("ReferenceError")}}. وايضا محاولة الوصول الى متغير لم يتم تهيئته بعد سيعود ب undefined :

+ +
var a;
+console.log("The value of a is " + a); // logs "The value of a is undefined"
+console.log("The value of b is " + b); // throws ReferenceError exception
+
+ +

يمكنك استخدام undefined لاختبار ما إذا كان المتغير مهيأ ام لا. في التعليمة البرمجية التالية، المتغير input غير مهيأ، ستقوم التعليمة if باختبار ما اذا كان فعلا المتغير input غير مهيأ، بمعنى اخر (هل صحيح/true ان المتغير input غير مهيأ).

+ +
var input;
+if(input === undefined){
+  doThis();
+} else {
+  doThat();
+}
+
+ +

القيمة undefined تتصرف ك false عندما تستخدم في السياق المنطقي. على سبيل المثال، التعليمة البرمجية التالية ستقوم بتنفيذ الدالة myFunction بسبب ان العنصر الاول في المصفوفة myArray غير مهيأ:

+ +
var myArray = [];
+if (!myArray[0]) myFunction();
+ +
+

تذكير:  تذكر ان "المتغير الغير مهيأ يتم تهيئته بشكل تلقائي بالقيمة undefined" كما ذكرنا اعلاه.

+
+ +

القيمة undefined تتحول الى NaN (ليسا رقما) عندما تستخدم في السياق الرقمي.

+ +
var a;
+a + 2 = NaN
+ +

عند اختبار متغير يحمل القيمة {{jsxref("null")}} ستتصرف القيمة null ك 0 في السياق الرقمي وك false في السياق المنطقي على سبيل المثال:

+ +
var n = null;
+console.log(n * 32); // Will log 0 to the console
+
+ +

نطاق المتغيرات - Variable scope

+ +

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

+ +

في جافاسكريبت قبل ECMAScript 2015، لم يكن للتعليمة البرمجية block statement نطاق (scope) خاص بها، المتغير الذي يتم تعريفه داخل block هو اما متغير محلى للدالة او متغير محلي للنطاق العام حسب تواجد هذا البلوك.

+ +

يبين المثال التالى كيف ان ال block ليس له نطاق خاص به، مخرجات التعليمة البرمجية التالية ستكون 5، بسبب ان المتغير x تم تعريفه في النطاق العام وليس في نطاق ال block، وفي هذه الحالة ال block هي التعليمة if.

+ +
if (true) {
+  var x = 5;
+}
+console.log(x);  // 5
+
+ +

يتغير هذا السلوك، عند الاعلان عن متغير باستخدام let المعتمدة في ECMAScript 6، الان اصبح لل block نطاقا خاصا به: 

+ +
if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y is not defined
+
+ +

رفع المتغيرات - Variable hoisting

+ +

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

+ +

لو تاملت قليلا في التعليمة البرمجة التالية، ستتسائل ما الذي جعل المتغير x يعود ب undefined وليس ب ReferenceError. السبب هو ان الجافاسكريبت ترفع الاعلان (var x) فقط، ولا ترفع التهيئة (3=). وبالتالي وبسبب الرفع الذي حدث "في الخفاء"، x اعلن عنه قبل استخدامه، لكن بسبب ان التهيئة لم ترفع، فقيمة x ستعود ب undefined. ونفس الشئ حصل مع المتغير myvar، بحيث تم رفعه الى اعلى نطاق الدالة. فيما تم رفع المتغير x الى اعلى النطاق العام.

+ +
/*---Example 1---*/
+
+console.log(x === undefined); // logs "true"
+var x = 3;
+
+
+/*---Example 2---*/
+
+// will return a value of undefined
+var myvar = "my value";
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = "local value";
+})();
+
+ +

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

+ +
/*---Example 1---*/
+
+var x;
+console.log(x === undefined); // logs "true"
+x = 3;
+
+
+/*---Example 2---*/
+
+var myvar = "my value";
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = "local value";
+})();
+
+ +

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

+ +

في ECMAScript 2015، المتغير let سوف لن يتم رفعه الى اعلى نطاق ال block. واستخدام متغير داخل block قبل الاعلان عنه سينتج عنه ReferenceError. لان المتغير يعتبر في "منطقة زمنية ميتة" من بداية ال block حتى يتم معالجته بالإعلان.

+ +
console.log(x); // ReferenceError
+let x = 3;
+ +

رفع  الدوال - Function hoisting

+ +

بالنسبة للدوال، فقط ال function declaration هي التي سترفع الى الاعلى وليست ال function expression.

+ +
/* Function declaration */
+
+foo(); // "bar"
+
+function foo() {
+  console.log('bar');
+}
+
+
+/* Function expression */
+
+baz(); // TypeError: baz is not a function
+
+var baz = function() {
+  console.log('bar2');
+};
+
+ +

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

+ +

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

+ +

كما يمكنك ايضا الوصول إلى المتغيرات العامة المعلن عنها في نافذة أو frame من نافذة اخرى او frame عن طريق تحديد النافذة او اسم ال frame. على سبيل المثال، اذا كان لدينا متغير معلن عنه في الوثيقة، واسمه phoneNumber,  يمكنك الوصول الى هذا المتغير من ال iframe باستخدام الصيغة parent.phoneNumber

+ +

الثوابت - Constants

+ +

يمكنك إنشاء ثابت للقراءة فقط، والمسمى بالكلمة المحجوزة {{jsxref("Statements/const", "const")}} طريقة التعبير عن الثابت هي نفسها طريقة التعبير عن المتغير: يجب ان يبدا بحرف او underscore او ($)dollar sign  ويمكن يحتوي على alphabetic، ارقام، او underscore او رموز. 

+ +
const prefix = '212';
+
+ +

الثابت، لا يمكن تغيير قيمته من خلال الاحالة او باعادة الاعلان عنه اثناء تشغيل السكريبت. ولا بد من تهيئته.

+ +

قواعد نطاق الثابت هي نفسها قواعد المتغير let فيما يخص نطاق ال block. اذا لم يتم تعيين الكلمة المحجوزة const سيتم معاملته معاملة المتغير.

+ +

اسم الثابت لا يجب ان يكون هو نفسه اسم دالة او متغير في نفس النطاق. على سبيل المثال:

+ +
// THIS WILL CAUSE AN ERROR
+function f() {};
+const f = 5;
+
+// THIS WILL CAUSE AN ERROR ALSO
+function f() {
+  const g = 5;
+  var g;
+
+  //statements
+}
+
+ +

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

+ +
const MY_OBJECT = {'key': 'value'};
+MY_OBJECT.key = 'otherValue';
+ +

هياكل البيانات والأنواع - Data structures and types

+ +

أنواع البيانات

+ +

المعيار الاحدث ل ECMAScript يحدد سبعة من انواع البيانات:

+ + + +

على الرغم من أن هذه الكمية من أنواع البيانات صغيرة نسبيا، الا أنها تتيح لك القيام بمهام مفيدة مع التطبيقات الخاصة بك. الكائنات {{jsxref("Object", "Objects")}} والدوال {{jsxref("Function", "functions")}} هي العناصر الأساسية الأخرى في اللغة، يمكنك اعتبار الكائنات كحاويات لمجموعة من المتغرات المرتبطة بالكائن، والدوال هي الوظائف التي سيقوم التطبيق الخاص بك بتنفيذها.

+ +

تحويل نوع البيانات - Data type conversion

+ +

الجافاسكريبت لغة حيوية، وهذا يعني انك لست بحاجة لتحديد نوع البيانات للمتغير اثناء تعريفه، على غرار لغات برمجة اخرى (جافا مثلا)، لانه سيتم تحويل أنواع البيانات تلقائياً حسب الحاجة أثناء تنفيذ السكريبت. على سبيل المثال، يمكنك تعريف متغير كالتالي:

+ +
var answer = 42;
+
+ +

وفي وقت لاحق، يمكنك تغيير نوع البيانات، من النوع Number الى النوع String، عن طريق تعيين سلسلة حرفية لنفس المتغير، على سبيل المثال:

+ +
answer = "Thanks for all the fish...";
+
+ +

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

+ +

اثناء الجمع بين القيم الرقمية والسلاسل الحرفية باستخدام عامل التشغيل (+)، فجافاسكريب تحول القيم الرقمية الى سلاسل حرفية. على سبيل المثال، انظر في التعليمات البرمجية التالية:

+ +
x = "The answer is " + 42 // "The answer is 42"
+y = 42 + " is the answer" // "42 is the answer"
+
+ +

في التعبيرات التي تحتوي على عوامل أخرى، جافا سكريبت لا تقوم بتحويل القيم الرقمية إلى سلاسل حرفية. على سبيل المثال:

+ +
"37" - 7 // 30
+"37" + 7 // "377"
+
+ +

تحويل القيم النصية إلى أرقام

+ +

في حالة أن لدينا قيمة تمثل عدد في الذاكرة وهي على شكل سلسلة حرفية ("10")، ونريد تحويلها الى قيمة رقمية، سنحتاج الى وظائف جاهزة في الجافاسكريبت تقوم بعملية التحويل.

+ + + +

المثال التالي يبين كيفية استخدام الوظيفة parseInt ببارامتر واحد، لمزيد من المعلومات حول البرامتر الثاني واشياء اخرى، راجع {{jsxref("parseInt", "()parseInt")}}:

+ +
var str = "10";
+console.log( typeof str ) // string
+var parse = parseInt(str)
+console.log( typeof parse ) // number.
+ +

المثال التالي يبين كيفية استخدام الوظيفة parseFloat، لمزيد من المعلومات، راجع {{jsxref("parseFloat", "()parseFloat")}}

+ +
var str = "3.14";
+console.log( typeof str ) // string
+var parse = parseInt(str)
+console.log( typeof parse ) // number.
+ +

طريقة بديلة لتحويل قيمة رقمية على شكل سلسلة حرفية، باستخدام العامل (unary plus)+

+ +
"1.1" + "1.1" = "1.11.1"
+(+"1.1") + (+"1.1") = 2.2
+// Note: the parentheses are added for clarity, not required.
+ +

البيانات الحرفية - Literals

+ +

المقصود بالبيانات الحرفية، هو استخددام الكائن بالصيغة الاسهل، مثلا، بدلا من استخدام الكائن new Array(elm1,elm2...) نستخدم [...elm1,elm2] وهكذا مع جميع الكائنات الاخرى.

+ +

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

+ + + +

بيانات المصفوفة الحرفية - Array literals

+ +

بيانات المصفوفة الحرفية، هي قائمة تتكون من صفر او اكثر من التعبيرات، كل تعبير فيها يمثل عنصر المصفوفة، محاطة بأقواس مربعة ([]). عندما تقوم بإنشاء مصفوفة باستخدام البيانات الحرفية ، ستقوم بتهيئتها بقيم محددة لتكوين عناصرها، طول المصفوفة هو عدد البارامترات/العناصر المحددة لها.

+ +

ينشئ المثال التالي مصفوفة القهوة مع ثلاثة عناصر وطولها ثلاثة:

+ +
var coffees = ["French Roast", "Colombian", "Kona"];
+
+ +
+

ملاحظة: بيانات المصفوفة الحرفية هي نوع من مهيئ الكائن.  Using Object Initializers.

+
+ +

إذا تم إنشاء مصفوفة باستخدام البيانات الحرفية في سكريبت على أعلى مستوى (top-level script)، فجافاسكريبت ستفسر هذه المصفوفة في كل مرة يتم اختبار التعبير الذي يحتوي على المصفوفة. بالإضافة الى ذالك، البيانات الحرفية المستخدمة في دالة يتم إنشاءها كل مرة يتم فيها استدعاء الدالة. 

+ +

 البيانات الحرفية هي كذالك Array objects راجع {{jsxref("Array")}} و Indexed collections لمعرفة تفاصيل ال Array objects.

+ +

فواصل إضافية في ال array literals

+ +

لست بحاجة لتحديد جميع العناصر في بيانات المصفوفة الحرفية. اذا قمت بوضع فاصلتات متتاليتان سيم انشاء المصفوفة مع undefined مكان العنصر الغير محدد.

+ +
var fish = ["Lion", , "Angel"];
+
+ +

تحتوي هذه المصفوفة على عنصرين بقيم، وعنصر واحد فارغ (fish[0] هو "Lion"، و fish[1] هو undefined، و fish[2] هو "Angel").

+ +

إذا قمت بتضمين فاصلة زائدة في نهاية قائمة العناصر، سيتم تجاهل تلك الفاصلة. في المثال التالي، طول المصفوفة هو ثلاثة. وليس هناك myList[3]. جميع الفواصل الأخرى في القائمة تشير الى عنصر جديد.

+ +
var myList = ['home', , 'school', ];
+
+ +

في المثال التالي، طول المصفوفة هو أربعة، و myList[0] و myList[2] في عداد المفقودين.

+ +
var myList = [ , 'home', , 'school'];
+
+ +

في المثال التالي، طول المصفوفة أربعة، myList[1] و myList[3] في عداد المفقودين. وسيتم تجاهل الفاصلة الأخيرة فقط.

+ +
var myList = ['home', , 'school', , ];
+
+ +

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

+ +
+

ملاحظة: يمكن للفواصل الزائدة ان تخلق أخطاءا في الاصدارات القديمة من المتصفحات. من الافضل إزالتها.

+
+ +

Boolean literals

+ +

النوع Boolean يتكون من بيانين حرفيين وهما :  true و false.

+ +

لا ينبغي الخلط بين القيم المنطقية الاولية true و false مع القيم true و false لل Boolean object. الكائن Boolean هو من يحتضن انوع البيانات المنطقية الاولية. راجع {{jsxref("Boolean")}} لمزيد من المعلومات.

+ +

الأعداد الصحيحة - Integers

+ +

يمكن التعبير عن الأعداد الصحيحة بالنسبة لكل من العدد الصحيح العشري ب (base 10)، ونظام العد السداسي عشر ب (base 16) والرقم الثماني ب (base 8) والثنائي ب (base 2)  .

+ + + +

بعض الأمثلة عن البيانات الحرفية لعدد صحيح :

+ +
0, 117 and -345 (decimal, base 10)
+015, 0001 and -077 (octal, base 8)
+0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16)
+
+ +

لمزيد من المعلومات، راجع Numeric literals in the Lexical grammar reference.

+ +

بيانات العدد الكسري الحرفي

+ +

البيانات الحرفية لعدد كسري  يمكن أن تتكون من الأجزاء التالية:

+ + + +

الأس هو "e" أو "E" متبوعاً بعدد صحيح، والذي يمكن توقيعه (يسبقه "+" أو "-"). يجب أن يكون قيمة حرفية floating-point ويجب ان يحتوي على رقم واحد على الأقل والنقطة العشرية أو "e"  (أو "E").

+ +
[(+|-)][digits][.digits][(E|e)[(+|-)]digits]
+
+ +

على سبيل المثال:

+ +
3.14
+2345.789
+.3333333333333333333
+-.283185307179586
+
+ +

بيانات الكائن الحرفي - Object literals

+ +

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

+ +

في المثال التالي. العنصر الاول للكائن car يمثل الخاصية  myCar، تحمل القيمة النصية "Saturn"، العنصر الثاني هي الخاصية getCar، قيمتها هو ناتج الدالة carTypes("Honda")، العنصر الثالث، هي الخاصية special، قيمتها متغير خارجي وهو  sales.

+ +
var Sales = "Toyota";
+
+function CarTypes(name) {
+  if (name == "Honda") {
+    return name;
+  } else {
+    return "Sorry, we don't sell " + name + ".";
+  }
+}
+
+var car = { myCar: "Saturn", getCar: CarTypes("Honda"), special: Sales };
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota
+
+ +

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

+ +
var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+
+ +

أسماء خصائص الكائن يمكن أن تكون أي سلسلة حرفية، بما في ذالك السلسلة الحرفية الفارغة, اذا كان اسم الخاصية عبارة عن احد المعرفات identifier، الغير مسموح بها (ما لا يمكن استخدامه كاسم للمتغر مثلا) او ان يكون اسم الخاصية عبارة عن رقم، فيجب إحاطتها بعلامات الاقتباس. اسماء الخاصية الغير مسموح بها كمعرفات لا يمكن الوصول اليها بطريقة نقطة التدوين (.)، وانما تستخدم طريقة الاقواس المربعة ("[]") للوصول اليها او التعديل عليها.

+ +
var unusualPropertyNames = {
+  "": "An empty string",
+  "!": "Bang!"
+}
+console.log(unusualPropertyNames."");   // SyntaxError: Unexpected string
+console.log(unusualPropertyNames[""]);  // An empty string
+console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
+console.log(unusualPropertyNames["!"]); // Bang!
+ +

ابتداءا من ES2015، اصبح من الممكن : تعيين ال prototype  أثناء إنشاء الكائن. استخدام التعيين المختصر ك  foo: foo، تعيين الوظائف، استدعاء وظائف الكائن الاب بواسطة super، استخدام أسماء الخصائص المحوسبة مع التعبيرات.

+ +
var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Shorthand for ‘handler: handler’
+    handler,
+    // Methods
+    toString() {
+     // Super calls
+     return 'd ' + super.toString();
+    },
+    // Computed (dynamic) property names
+    [ 'prop_' + (() => 42)() ]: 42
+};
+ +

يبين المثال التالي الطرق الصحيحة لكيفية الوصول الى الكائن:

+ +
var foo = {a: "alpha", 2: "two"};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a is not defined
+console.log(foo["a"]); // alpha
+console.log(foo["2"]); // two
+
+ +

بيانات التعبير القياسي الحرفي - RegExp literals

+ +

Regex هو نمط (pattern) محصور بين خطوط مائلة. يبين المثال التالي كيفبة التعبير عن بيانات التعبيرات القياسية الحرفية.

+ +
var re = /ab+c/;
+ +

بيانات السلاسل النصية الحرفية - String literals

+ +

السلسلة النصية، هي عبارة عن صفر أو أكثر من الأحرف محاطة بعلامات اقتباس اما منفردة (') أو مزدوجة ("). يبين المثال التالي كيفية استخدام كل من الاقتباسات المنفردة والمزدوجة:

+ +
'foo'
+"bar"
+'1234'
+'one line \n another line'
+"John's cat"
+
+ +

من الممكن استدعاء وظائف الكائن String على السلاسل الحرفية. تقوم الجافاسكريبت بتحويل السلاسل الحرفية الى الكائن String بشكل مؤقت، بعدما تستدعى الوظائف، يتم استبعاد/تدمير الكائن String المؤقت، يمكنك ايضا استخدام  الخاصية String.length مع القيم النصية:

+ +
console.log("John's cat".length)
+// Will print the number of symbols in the string including whitespace.
+// In this case, 10.
+
+ +

ابتداءا من ES2015، يمكنك استخدام البيانات الحرفية كقوالب  (template literals)، هذه القوالب النصية هي نفسها المستخدمة في  Perl ،Python، الخ. يمكنك استخدامها لانشاء سلسلة حرفية واحدة على عدة اسطر دون الحاجة لاستخدام اسلوب التهريب (اضافة "\" في نهاية كل سطر). يمكن من خلالها ايضا إنشاء سلاسل حرفية جديدة اعتمادا على مجموعة متقطعة من السلاسل الحرفية المحددة سلفا وذالك من خلال هذه الصيغة الجديدة { result }$، القيمة الممرة result هي القيمة التي ستظهر مع السلسلة الحرفية الجديدة،  وهي عبارة عن مخرجات لاي تعليمة برمجية اخرى مثل (function, literal object, var...).  وايضا يمكنك من خلالها تجنب هجمات الحقن (injection attacks). 

+ +
// Basic literal string creation
+`In JavaScript '\n' is a line-feed.`
+
+// Multiline strings
+`In JavaScript template strings can run
+ over multiple lines, but double and single
+ quoted strings cannot.`
+
+// String interpolation
+var name = 'Bob', time = 'today';
+`Hello ${name}, how are you ${time}?`
+
+// Construct an HTTP request prefix is used to interpret the replacements and construction
+POST`http://foo.org/bar?a=${a}&b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);
+ +

من الأفضل استخدام السلاسل الحرفية قدر الامكان، الا اذا كنت في حاجة ماسة لاستخدام الكائن String، وقتها يمكنك استخدامه ايضا. راجع الكائن {{jsxref("String")}} للاطلاع على كافة التفاصيل.

+ +

استخدام الرموز الخاصة مع السلاسل النصية

+ +

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

+ +
"one line \n another line"
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
جدول الرموز الخاصة لجافاسكريبت
CharacterMeaning
0\Null Byte  - بايت فارغ
b\Backspace  - مسافة للخلف
f\Form feed  -  نموذج تغذية
n\New line  -  سطر جديد
r\Carriage return  -  حرف الإرجاع
t\Tab  -  علامة التبويب
v\Vertical tab - علامة التبويب العمودي
'\single quote  -  علامة اقتباس مفردة
"\Double quote  -  علامة اقتباس مزدوجة
\\Backslash character  -  حرف الخط المائل العكسي
XXX\  الحرف مع Latin-1 لتحديد ترميز من خلال الرجوع الى الوراء بثلاثة ارقام ثمانية XXX ما بين 0 و 377. على سبيل المثال, 251\ هو تسلسل ثماني لرمز حقوق النشر.  
xXX\الحرف مع Latin-1 لتحديد ترميز  من خلال ارقام نظام العد السداسي عشر  XX بين 00 و FF. على سبيل المثال , xA9\ هو تسلسل نظام العد السداسي عشر لرمز حقوق النشر.
uXXXX\الحرف Unicode محدد من خلال اربعة ارقام من نظام العد السداسي عشر  XXXX. على سبيل المثال , u00A9\ هو تسلسل Unicode لرمز حقوق النشر. راجع {{anch("Unicode escape sequences")}}.
u{XXXXX}\كود ال Unicode لتهريب النقطة، على سبيل المثال، u{2F804}\ هي تماما مثل  تهريب اليونيكود نفسه  uD87E\uDC04\
+ +

تهريب الرموز - Escaping characters

+ +

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

+ +

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

+ +
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+
+ +

ونتيجة لذالك سنحصل على السلسلة الحرفية التالية:

+ +
He read "The Cremation of Sam McGee" by R.W. Service.
+
+ +

لتضمين الرمز  backslash نفسه  في سلسلة حرفية، يجب  عليك تهريبه ايضا ب backslash ثانية. وبالتالي سيتحول الى رمز عادي، قابل للقراءة. على سبيل المثال، لتعيين مسار الملف c:\temp الى سلسلة حرفية، استخدم التالي:

+ +
var home = "c:\\temp";
+
+ +

يمكنك ايضا تهريب فواصل الأسطر (line breaks)، وذالك من خلال اضافة backslash في نهاية كل جزء من اجزاء السلسلة الحرفية. الغرض هذه العملية هو الحد من طول التعليمة البرمجية فقط، ولهذا فالسلسلة الحرفية الجديدة، لن تتضمن اي من هذه السلاشات، وكذالك لن تتضمن اية فواصل الأسطر (<line break = <br) المخفية.

+ +
var str = "this string \
+is broken \
+across multiple\
+lines."
+console.log(str);   // this string is broken across multiplelines.
+
+ +

على الرغم من ان جافاسكريبت لا تتوفر عل التعبير "heredoc" المستخدم في كثير من لغات البرمجة الاخرى (php مثلا) والذي يمكتك من التعامل مع السلاسل الحرفية بطريقة مميزة. الا انه من من الممكن تحقيق ما يشبهها من خلال التعبير التالي:

+ +
var poem =
+"Roses are red,\n\
+Violets are blue.\n\
+I'm schizophrenic,\n\
+And so am I."
+
+ +

للمزيد من المعلومات

+ +

تم التركيز في هذا الفصل على اساسيات صياغة الاعلانات والانواع. لدراسة المزيد حول JavaScript language constructs. راجع أيضا الفصول التالية في هذا الدليل:

+ + + +

في الفصل التالي ان شاء الله، سنلقي نظرة على كيفية السيطرة على تدفق البيانات ( control flow constructs ) ومعالجه الأخطاء.

+
+ +

{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

diff --git a/files/ar/web/javascript/guide/index.html b/files/ar/web/javascript/guide/index.html new file mode 100644 index 0000000000..8a2410f634 --- /dev/null +++ b/files/ar/web/javascript/guide/index.html @@ -0,0 +1,116 @@ +--- +title: دليل جافا سكريبت +slug: Web/JavaScript/Guide +tags: + - جافا سكربيت + - دليل +translation_of: Web/JavaScript/Guide +--- +
{{jsSidebar("JavaScript Guide")}}
+ +

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

+ +

الفصول

+ +

هذا الدليل مقسم إلى عدة فصول:

+ + + + + +

{{Next("Web/JavaScript/Guide/Introduction")}}

diff --git a/files/ar/web/javascript/guide/introduction/index.html b/files/ar/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..681bb0276a --- /dev/null +++ b/files/ar/web/javascript/guide/introduction/index.html @@ -0,0 +1,159 @@ +--- +title: تقديم +slug: Web/JavaScript/Guide/Introduction +tags: + - جافا سكربيت + - مرشد +translation_of: Web/JavaScript/Guide/Introduction +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
+ +

يقوم هذا الفصل بتقديم جافا سكريبت ويناقش بعض مفاهيمها الأساسية.

+ +

ما يجب أن تعرفه مسبقا

+ +
+

يفترض أن تكون لديك خلفية حول المكونات التالية:

+ + + +

أين تجد المعلومات عن الجافا سكربيت

+ +

وثائق جافا سكربيت على MDN تشتمل على مايلي:

+ + + +

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

+ +

ما هي جافاسكريبت؟

+ +

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

+ +

تحتوي جافاسكريبت على مكتبة قياسية من الكائنات، مثل Array، Date، وMath، ومجموعة أساسية من العناصر اللغوية مثل العوامل، بنى التحكم، والتصريحات. جوهر جافا سكريبت هو قابليتها للتعامل مع مجموعة متنوعة من الكائنات التي تكون مكملة مع كائنات إضافية. على سبيل المثال:

+ + + +

جافا سكريبت وجافا

+ +

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

+ +

على عكس جافا التي لها نظام المترجم الزمني  compile-time system للاعلان عن الكلاسات، فجافا سكريبت تدعم نظام وقت التشغيل  runtime system ولها بعض أنواع البيانات لتمثيل الأرقام، القيم المنطقية، والسلاسل النصية (و أمور أخرى). تعتمد جافاسكريبت على النموذج الأولي  prototype-based object model لعمل رابط بين الكائنات بينما تستخدم جافا نموذجا أكثر شيوعا يستند إلى الكلاسات class-based object model.  النماذج-البروتوتايبس تسمح بخلق ديناميكية عالية فيما يخص الوراثة. وبالتالي، فإن الخصائص التي يرثها كائن ما، قد تختلف مع مرور الوقت. كما تدعم جافاسكريبت الوظائف دون متطلبات إعلانية خاصة. الوظائف يمكن أن تكون خصائص لكائن،

+ +

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

+ +

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

+ +

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

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

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

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

لمزيد من المعلومات حول الاختلافات بين جافا سكريبت وجافا، انظر الفصل تفاصيل عن الكائن.

+ +

جافا سكريبت والمواصفات ECMAScript

+ +

 جافا سكريبت موحدة عن طريق Ecma International - الجمعية الأوروبية لتوحيد النظم المعلوماتية والاتصالات (ECMA اختصارا لجمعية مصنعي الكمبيوتر الأوروبية تاريخيا) والتي تنص على لغة برمجة موحدة، هذا الإصدار القياسي من جافا سكريبت، يسمى  ECMAScript. هذا الاصدار، يتصرف بشكل متطابق في جميع التطبيقات المتوافقة مع المعايير. يمكن للشركات استخدام هذه اللغة القياسية لتطوير طريقة تنفيذ جافا سكريبت. يتم توثيق ECMAScript القياسية مع ECMA-262. انظر رؤية جديد جافا سكريبت لمعرفة المزيد عن الاصدارات المختلفة من جافا سكريبت وطبعات مختلفة من مواصفات ECMAScript.

+ +

كما إعتُمِدت ECMA-262 من قبل ISO  المنظمة الدولية للتوحيد القياسي ك ISO-16262.  كما يمكنك أيضا العثور على المواصفات على موقع Ecma International. مواصفات ECMAScript  لا تصف نموذج الكائن المستند  (DOM)، الذي يتم توحيده من قبل اتحاد شبكة الويب العالمية (W3C). وDOM يحدد الطريقة التي تعرض بها كائنات المستند HTML في السكريبت الخاص بك. للحصول على فكرة أفضل حول التقنيات المختلفة التي يتم استخدامها عند البرمجة مع جافا سكريبت، راجع مقالة جافا سكريبت نظرة عامة التكنولوجيات.

+ +

وثائق جافا سكريبت مقابل المواصفات ECMAScript

+ +
+
مواصفات ECMAScript هي مجموعة من المتطلبات لتنفيذ ECMAScript. من المفيد إذا كنت ترغب في تنفيذ ميزات اللغة المتوافقة مع المعايير القياسية في تنفيذ ECMAScript  أو في احدى المحركات (ك SpiderMonkey في فايرفوكس، أو V8 في كروم).
+ +
 
+
+ +

ليس المقصود من مواصفات ال ECMAScript هو دعم برمجة السكريبت. توفر وثائق جافا سكريبت معلومات لكتابة النصوص البرمجية.

+ +

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

+ +

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

+ +

الشروع في العمل مع جافا سكريبت

+ +

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

+ +

هناك أداتان هما جزءا من فايرفوكس، وهي مفيدة لتجربة واختبار شفرة جافا سكريبت، هما: وحدة تحكم الويب Console وقائمة جافاسكريبت Scratchpad .

+ +

وحدة تحكم ويب

+ +

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

+ +

لفتح وحدة تحكم الويب (Ctrl+Shift+K) او F12،  في وحدة التحكم، هناك سطر الأوامر الذي يمكنك استخدامه لادخال اكواد جافا سكريبت، ويظهر الناتج في الجزء أعلاه:

+ +

+ +

المسودة

+ +

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

+ +

لفتح المسودة (Shift+F4)، او حدد "المسودة" من القائمة اختر "المطور"، وهي ضمن القائمة في فايرفوكس. ستفتح في نافذة منفصلة، يمكنك استخدامها لكتابة وتنفيذ جافا سكريبت في المتصفح. يمكنك أيضا حفظ النصوص إلى القرص وتحميلها من القرص.

+ +

+ +

مرحبا بالعالم

+ +

لتبدأ بكتابة جافا سكريبت، افتح المسودة واكتب "مرحبا بالعالم". كما يلي:

+ +
function greetMe(yourName) {
+  alert("Hello " + yourName);
+}
+
+greetMe("World");
+
+ +

من قائمة "تنفيذ" واضغط على تنفيذ او  Ctrl + R لمشاهدة ناتج الكود في المتصفح الخاص بك!

+ +

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

+
+ +

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git a/files/ar/web/javascript/guide/loops_and_iteration/index.html b/files/ar/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..3bc05c57a7 --- /dev/null +++ b/files/ar/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,352 @@ +--- +title: الحلقات والتكرار +slug: Web/JavaScript/Guide/Loops_and_iteration +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
+ +

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

+ +
+

يمكنك التفكير في الحلقة كنسخة من لعبة في الكمبيوتر، حيث ستقوم بتحريك السوبر ماريو X من الخطوات الى الامام، على سبيل المثال، امر التحريك، " تَحرًك ب 5 خطوات إلى الامام". يمكن تطبيق مثل هذه الفكرة باستخدام الحلقة:

+ +
var step;
+for (step = 0; step < 5; step++) {
+  // Runs 5 times, with values of step 0 through 4.
+  console.log('Walking east one step');
+}
+
+ +

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

+ +

الحلقات المتوفرة في جافاسكريبت وهي :

+ + + +

الحلقة for

+ +

الحلقة {{jsxref("statements/for","for loop")}} لاتتوقف عن التكرار حتى يتم تحقق الشرط المحدد ب false. الحلقة for لجافاسكريبت مشابه للحلقة for الخاصة ب Java و C. يوضح الشكل التالي التركيبة الاساسية للحلقة for:

+ +
for ([initialExpression]; [condition]; [incrementExpression])
+  statement
+
+ +

عند تنفيذ الحلقة، يحدث ما يلي:

+ +
    +
  1.  initialExpression : التعبير المستخدم لتهيئة الحلقة، سيتم تنفيذه، إذا كان موجوداً. يقوم هذا التعبير بتهيئة عداد حلقة واحدة أو أكثر، من الممكن استخدام تعبيرات أكثر تعقيدا  إذا لزم الأمر. يمكن ايضا أن يتم تعريف المتغيرات في هذا التعبير.
    2. +
  2. condition : تعبير الشرط الذي تتمحور حوله الحلقة. اذا كانت قيمته تساوي true، ستنفذ الحلقة من جديد، عندما ستصبح قيمته تساوي false، ستنتهي الحلقة، إذا تم حذف تعبير الشرط تماما. سيعتبر الشرط صحيحاً true.
    3. +
  3. statement : التعليمة البرمجية التي ستنفذ ما دام الشرط يساوي true. لتنفيذ تعليمات برمجية متعددة، استخد التعليمة بلوك ({ ... }).
    4. +
  4. incrementExpression : تحديث التعبير، إذا كان موجودا، ينفذ، ويعود التحكم إلى الخطوة رقم 2.
    5. +
+ +

مثال

+ +

تحتوي الدالة التالية على التعليمة for التي تقوم باحصاء عدد العناصر options المحددة في العنصر {{HTMLElement("select")}}. التعليمة for تعلن عن المتغير i وتقوم بتهيئته ب 0. وتتحقق من ان i اصغر من عدد العناصر في العنصر <select>. ستنفذ التعليمة if  بنجاح، وستزيد قيمة i بواحد ما دامت الحلقة مستمرة بالتكرار.

+ +
<form name="selectForm">
+  <p>
+    <label for="musicTypes">Choose some music types, then click the button below:</label>
+    <select id="musicTypes" name="musicTypes" multiple="multiple">
+      <option selected="selected">R&B</option>
+      <option>Jazz</option>
+      <option>Blues</option>
+      <option>New Age</option>
+      <option>Classical</option>
+      <option>Opera</option>
+    </select>
+  </p>
+  <p><input id="btn" type="button" value="How many are selected?" /></p>
+</form>
+
+<script>
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i < selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById('btn');
+btn.addEventListener('click', function() {
+  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes));
+});
+</script>
+
+
+ +

الحلقة do...while

+ +

الحلقة {{jsxref("statements/do...while", "do...while")}} لاتتوقف عن التكرار حتى يتم تحقق الشرط المحدد ب false . يوضح الشكل التالي التركيبة الاساسية للحلقة do...while

+ +
do
+  statement
+while (condition);
+
+ +

statement: تنفذ مرة واحدة قبل أن تبدا عملية التحقق من الشرط. عند البدا بعملية التحقق، اذا كان الشرط (condition) يساوي true، تنفذ التعليمة البرمجية (statement) مرة اخرى. بعد انهاء التنفيذ، يتم التحقق مرة اخرى من الشرط. الى ان يصبح الشرط يساوي false، عندها يتوقف التنفيذ ويتم انتقال التحكم الى التعليمة البرمجية التي تلي do...while. لتنفيذ تعليمات برمجية متعددة، استخدم التعليمة بلوك ({ ... }).

+ +

مثال

+ +

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

+ +
var i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i < 5);
+ +

الحلقة while

+ +

الحلقة {{jsxref("statements/while","while")}} ستستمر بتنفيذ التعليمة البرمجية المرتبطة بها طالما الشرط المحدد يساوي true. يوضح الشكل التالي التركيبة الاساسية للحلقة while

+ +
while (condition)
+  statement
+
+ +

عندما سيصبح الشرط يساوي false، ستتوقف التعليمة البرمجية (statement) المرتبطة بالحلقة  عن التنفيذ وسينتقل التحكم الى التعليمة البرمجية التي تلي الحلقة while.

+ +

يتم التحقق من شرط الاختبار قبل تنفيذ statement. كلما عاد الشرط ب true، ستنفذ statement ويتم الرجوع الى الشرط للتحقق منه مرة اخرى. عندما سيعود الشرط ب false سيتوقف التنفيذ وسينتقل التحكم الى التعليمة البرمجية التي تلي الحلقة while.  لتنفيذ تعليمات برمجية متعددة، استخدم التعليمة بلوك ({ ... }).

+ +

المثال الاول

+ +

الحلقة while ستستمر بالتكرار طالما n أقل من ثلاثة:

+ +
var n = 0;
+var x = 0;
+while (n < 3) {
+  n++;
+  x += n;
+}
+
+ +

مع كل تكرار، ستقوم الحلقة بالزيادات على n وتضيف قيمته إلى x. لذالك  x و n ستمتلك القيم التالية:

+ + + +

بعد الانتهاء من المرور الثالث، الشرط ( n < 3 ) لم يعد يساوي true، لذالك ستنتهي الحلقة.

+ +

المثال الثاني

+ +

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

+ +
while (true) {
+  console.log('Hello, world!');
+}
+ +
+

تحذير: استمرار تكرار الحلقة الى ما لا نهاية سيتسبب في توقف المتصفحات عن العمل.

+
+ +

التعليمة label

+ +

تستخدم التعليمة {{jsxref("statements/label","label")}}  لتوفير معرف (id) للتعليمة البرمجية المراد الرجوع اليها من موقع آخر في البرنامج. على سبيل المثال، يمكنك استخدام label لتحديد حلقة، ثم استخدام التعليمة break او continue للإشارة إلى ما إذا كان البرنامج ينبغي أن يوقف الحلقة أو الاستمرار في تنفيذها.

+ +

التعبير الخاص بالتعليمة  label يشبه ما يلي:

+ +
label :
+   statement
+
+ +

قيمة label  يمكن ان تكون أي معرف جافاسكريبت باستثناء الكلمات المحجوزة. التعليمة البرمجية (statement) التي سيشار اليها من طرف label يمكن ان تكون اي تعليمة برمجية.

+ +

مثال

+ +

في هذا المثال، label markLoop يعرف الحلقة while.

+ +
markLoop:
+while (theMark == true) {
+   doSomething();
+}
+ +
+

ملاحظة: لمزيد من التفاصيل حول التعليمة label، راجع صفحة مرجع الجافا سكريبت

+
+ +

التعليمة break

+ +

تستخدم التعليمة {{jsxref("statements/break","break")}} لانهاء الحلقة، او switch، أو بالتزامن مع االتعليمة label.

+ + + +

يمكن التعبير عن  التعليمة break من خلال طريقتين:

+ +
break;
+break label;
+
+ +

تستخدم الطريقة الأولى لانهاء الحلقة المتواجدة بها، او لانهاء switch. الطريقة الثانية لانهاء تنفيذ التعليمات التي تم تحديدها من قبل label.

+ +

المثال الاول

+ +

يقوم المثال التالي بالتكرار على عناصر المصفوفة، وبمجرد الوصول الى العنصر المحدد في الشرط وهو theValue سيتم انهاء الحلقة،

+ +
for (var i = 0; i < a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}
+ +

المثال الثاني

+ +

المثال التالي، يبين كيفية استخدام التعليمة break بكلا الطريقتين:

+ +
var x = 0;
+var z = 0;
+labelCancelLoops: while (true) {
+  console.log('Outer loops: ' + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log('Inner loops: ' + z);
+    z += 1;
+    if (z === 10 && x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+
+ +

التعليمة continue

+ +

يمكن استخدام التعليمة {{jsxref("statements/continue","continue")}} لاستئناف الحلقة while) do-while ،for ، مع labe)، بعد توقفها لغرض معين.

+ + + +

يمكن التعبير عن  التعليمة continue من خلال طريقتين:

+ +
continue;
+continue label;
+
+ +

المثال الاول

+ +

في المثال التالي، لدينا الحلقة while مع التعليمة continue التي ستنفذ حينما تصبح i تساوي 3. ولدينا n الذي سيحتوي على القيم التالية:  1, 3, 7 و 12.

+ +
var i = 0;
+var n = 0;
+while (i < 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+
+ +

المثال الثاني

+ +

التعليمة label checkiandj تحتوي على التعليمة label checkj. عند مصادفة continue سيقوم البرنامج بانهاء التكرار الحالي ل checkj ويبدأ التكرار من جديد. وفي كل مرة يتم مصادفة continue، تستمر checkj بالتكرار حتى يعود الشرط ب false. عندما سيتم العودة ب false،  ما تبقى من التعليمة checkiandj سيكتمل، و checkiandj ستستمر بالتكرار حتى يعود الشرط ب false. عندما سيتم العودة ب false، سينتقل البرنامج الى التعليمة البرمجية التي تلي checkiandj.

+ +
var i = 0;
+var j = 10;
+checkiandj:
+  while (i < 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j > 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + ' is odd.');
+      }
+      console.log('i = ' + i);
+      console.log('j = ' + j);
+  }
+ +

عموما: التعليمة break تقوم بانهاء الحلقة نهائيا عندما يتم تحقق الشرط المحدد، فيما تقوم التعليمة continue بتوقيف الحلقة للتحقق من الشرط المحدد، وعندما يتم تنفيذ الشرط، يتم استئناف الحلقة.

+ +

التعليمة for...in

+ +

تستخدم الحلقة {{jsxref("statements/for...in","for...in")}} للتكرار على جميع خصائص الكائن القابلة للتكرار enumerable properties.  مقابل كل خاصية مميزة، ستنفذ الجافا سكريبت تعليمات برمجية محددة. يوضح الشكل التالي التركيبة الاساسية للحلقة for...in

+ +
for (variable in object) {
+  statements
+}
+
+ +

مثال

+ +

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

+ +
function dump_props(obj, obj_name) {
+  var result = '';
+  for (var i in obj) {
+    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
+  }
+  result += '<hr>';
+  return result;
+}
+ +

بالنسبة للكائن car مع الخصائص make و model، الناتج سيكون على الشكل التالي:

+ +
car.make = Ford
+car.model = Mustang
+
+ +

for...in و المصفوفات

+ +

على الرغم من كونه مغريا استخدام الحلقة for...in للتكرار على عناصر المصفوفة {{jsxref("Array")}}  الا انها، يمكن أن تقوم بسلوك غير متوقع. في الواقع، الحلقة for...in ستقوم بإرجاع اسماء الخصائص المعرفة من قبل المستخدم بالإضافة إلى الفهارس الرقمية. فمثلا، إذا قمت بالتعديل على Array object، كإضافة خصائص او وظائف جديدة. فستقوم الحلقة for...in بالتكرار على هذه الخصائص او الوظائف بالإضافة إلى عناصر المصفوفة، وبالتالي فمن الأفضل استخدام الحلقة التقليدية {{jsxref("statements/for","for")}} لارجاع الفهارس الرقمية بشكل صحيح عند التكرار على المصفوفة.  يبين المثال التالي كيفية حصول ذالك.

+ +
var myArray = [0, 1, 2, , , 5];
+myArray.foo = "hello";
+
+for (var i in myArray) {
+  	console.log(i);  // Outputs 0, 1, 2, 5, hello.
+}
+
+for (var i = 0; i < myArray.length; ++i) {
+  	console.log(i);  // Outputs 0, 1, 2, 3, 4, 5
+}
+ +

الحلقة for...of

+ +

التعليمة {{jsxref("statements/for...of","for...of")}} نوع جديد من الحلقات تم إضافتها الى الإصدار السادس  من جافا سكربت ، وتستخدم للتكرار على العناصر الموجودة في أي مجموعة أو iterable objects (مثل {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}} والكائن {{jsxref("functions/arguments","arguments")}} الخ.), كما أن هذا الأسلوب يمكننا من تنفيذ تعليمة برمجية معينة على كل عنصر تم جلبه على حدة للتعديل على أي من خصائصه. يوضح الشكل التالي التركيبة الاساسية للحلقة for...of

+ +
for (variable of object) {
+  statement
+}
+ +

المثال التالي، يوضح الفرق بين الحلقة for...of والحلقة  {{jsxref("statements/for...in","for...in")}} الحلقة for...in تقوم بارجاع اسماء الخصائص فيما الحلقة for...of تقوم بارجاع قيم الخصائص:

+ +
let arr = [3, 5, 7];
+arr.foo = 'hello';
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs 3, 5, 7
+}
+
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/ar/web/javascript/guide/regular_expressions/index.html b/files/ar/web/javascript/guide/regular_expressions/index.html new file mode 100644 index 0000000000..96928196f8 --- /dev/null +++ b/files/ar/web/javascript/guide/regular_expressions/index.html @@ -0,0 +1,813 @@ +--- +title: التعبيرات القياسية +slug: Web/JavaScript/Guide/Regular_Expressions +translation_of: Web/JavaScript/Guide/Regular_Expressions +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
+ +

التعبيرات القياسية (Regular Expressions)، هي أنماط (patterns) تُستخدم لمطابقة مجموعة من الأحرف في السلاسل النصية. التعبيرات القياسية في جافاسكربت كائنات أيضا. تُستخدم هذه الأنماط مع الوظائف {{jsxref("RegExp.exec", "exec")}} و{{jsxref("RegExp.test", "test")}} للكائن {{jsxref("RegExp")}}، ومع الوظائف {{jsxref("String.match", "match")}}، و {{jsxref("String.replace", "replace")}}، و{{jsxref("String.search", "search")}} و {{jsxref("String.split", "split")}} للكائن {{jsxref("String")}}. يتناول هذا الفصل  تعبيرات جافاسكربت القياسية.

+ +
+

انشاء تعبير قياسي او ريجكس

+ +

يمكنك انشاء ريجكس من خلال احدى الطرق التالية:

+ +

الطريقة الاولى، باستخدام التعبير القياسى الحرفي regular expression literal، ويتضمن الباترن pattern بين سلاشين، كما يلي:

+ +
var re = /ab+c/;
+ +

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

+ +

الطريقة الثانية، من خلال استدعاء constructor الكائن RegExp، كما يلي:

+ +
var re = new RegExp('ab+c');
+ +

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

+ +

انشاء باترن الريجكس

+ +

يتكون الباترن البسيط اما من رموز عادية، مثل /abc/، او خليط من الرموز العادية والرموز الخاصة، مثل /ab*c/ او /Chapter (\d+)\.\d*/. يحتوي هذا الباترن على اقواس هلالية، هذه الاقواس ستقوم بدور ذاكرة الجهاز، بحيث ستقوم بتخزين قيمة المطابقة الناتجة عن هذا الجزء من الباترن وفهرستها ليتم استدعاؤها لاحقا. للمزيد من التفاصيل حول مطابقة السلسلة النصية الجزئية بين قوسين.

+ +

استخدام الباتر البسيط

+ +

تتكون الباترنز البسيطة، من رموز صريحة ومباشرة، تصف فيها ما تريد مقارنته مباشرة. مثلا، الباترن /abc/ سيطابق مجموعة من الرموز في سلسلة نصية، شرط تواجد هذه الرموز جنبا الى جنب بشكل مرتب. لذالك، ستنجح المطابقة في هذه السلسلة النصية "Hi, do you know your abc's?"  وكذالك في السلسلة النصية التالية "The latest airplane designs evolved from slabcraft."، نجحت المطابقة في كلتا الحالتين لان السلسلة الفرعية 'abc' هي المطلوبة. وهذا لايتطابق مع هذه السلسلة النصية 'Grab crab' لانها تحتوي على سلسلة نصية غير تلك المطلوبة  'ab c'.

+ +

استخدام الرموز الخاصة

+ +

عندما يتطلب الامر عملية بحث، أكثر من مطابقة صريحة ومباشرة، مثل البحث عن واحد او اكثر من ال 'b'، او البحث عن مسافة فارغة، عندها سيتوجب على الباترن ان يحتوي على الرموز الخاصة. مثلا، الباترن /ab*c/ سيطابق مجموعة من الرموز، حيث ستكون 'a' متبوعة بصفر او اكثر من ال 'b'، الرمز الخاص نجمة * يرصد وجود العنصر المطلوب صفر او اكثر من المرات، متبوعا مباشرة ب 'c'. بعد فحص السلسلة النصية "cbbabbbbcdebc," قام الباترن بمطابقة السلسلة الجزئية 'abbbbc'.

+ +

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

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

الرموز الخاصة بالريجكس.

+
الرمزشرح الاستخدام
\ +

 

+ +

مطابقات وفقا للقواعد التالية:
+
+ الباكسلاش الذي يسبق الرمز العادي يشير الى ان الرمز التالي هو رمز من الرموز الخاصة ولا ينبغي تفسيره حرفيا. مثلا 'b' من دون باكسلاش \ ، ستطابق 'b' بحروف صغيرة. لكن \b في حد داتها لا تطابق اي حرف، لانها من الرموز الخاصة وتعني حصر او تحديد حدود للرموز المطلوبة word boundary character.
+
+ الباكسلاش الذي يسبق الرموز الخاصة، يشير الى ان الرمز التالي هو ليس من الرموز الخاصة وينبغي تفسيره حرفيا. مثلا، الباترن /a*/ يحتوي على احد الرموز الخاصة * وهو لمطابقة صفر او اكثر من a، بعد اضافة الباكسلاش له، كما في  الباترن /a\*/ تم الغاء رمزيتة، وبالتالي اصبح الباترن  /a\*/ يطابق السلسلة الحرفية 'a*'.
+
+ لا تنس تهريب الباكسلاش نفسه، بينما تستخدم الكونستراكتر RegExp( "\\s", "g" )، لانه يعمل ايضا، كمهرب للرموز الخاصة في السلسلة النصية.

+ +

 

+
^ +

 

+ +

مطابقة بداية المدخلات. ادا كان البند multiline ب true، اي ان m موجودة في الباترن /^a/gm سيبدا البحث عن المطابقة في بداية اي سطر جديد.
+
+ مثلا الباترن  /^a/gm  سيطابق اثنان من 'a'، في "a special char\nacter"، لاحظ وجود السطر الجديد \n في السلسلة النصية.
+
+ الرمز ^ سيصبح له معنى اخر عندما يستخدم مع المجموعة. توجه الى مجموعة الرموز لمعرفة المزيد من التفاصيل.

+ +

 

+
$ +

 

+ +

مطابقة نهاية المدخلات. ادا كان البند multiline  ب true، اي ان m موجودة في الباترن /r$/gm سيبدا البحث عن المطابقة في نهاية اي سطر جديد.
+
+ مثلا الباترن /r$/gm سيطابق اثنان من 'r'، في "a special char\nacter"، لاحظ وجود السطر الجديد \n في السلسلة النصية.

+
* +

 

+ +

مطابقة التعبير الذي سيسبق الرمز * صفر او اكثر من المرات، وهو مكافئ ل {0,}.

+ +

مثلا، /bo*/ سيطابق 'boooo' في "A ghost booooed" و 'b' في "A bird warbled" لكن لا شئ بالنسبة ل "A goat grunted".

+ +

 

+
+ +

 

+ +

مطابقة التعبير الذي سيسبق الرمز + مرة واحدة على الاقل او اكثر من المرات، وهو مكافئ ل {1,}.

+ +

مثلا، /a+/ ستطابق 'a' في "candy" ومجموعة ال  'a' في "caaaaaaandy" لكن لا شئ بالنسبة ل "cndy".

+ +

 

+
? +

 

+ +

مطابقة التعبير الذي سيسبق الرمز ? صفر او واحد من المرات، وهو مكافئ ل {0,1}.
+
+ مثلا، الباترن /e?le?/ سيطابق 'el' في "angel" و 'le' في "angle" وكذالك 'l' في "also".
+
+ اذا استخدم الرمز ? مباشرة بعد احد هذه المحددات *، +، ?، او {}، سيؤثر على سلوكها الافتراضي، فيجعلها غير طماعة non-greedy او غير جشعة (تطابق عدد محدود من الاحرف) بخلاف سلوكها الافتراضي، وهو التصرف بجشع (تطابق اكثر عدد ممكن من الاحرف)، مثلا، باستخدام الباترن الجشع، /\d+/ ستطابق كل السلسلة "123" في "123abc" . اما باستخدام الباترن الغير جشع، /\d+?/ وعلى نفس السلسلة ستطابق "1" فقط.
+
+ مثال اكثر دقة حول non-greedy و greedy، فرضا، نريد مطابقة تاجات الاتش تي ام ال، باستخدام الباترن الجشع /<(.+)>/g سيتم مطابقة كل السلسلة النصية "<div>fCh<p>elema</p>lCh</div>"، اما باستخدام الباترن الغير شجع /<(.+?)>/g فسيتم مطابقة التاجات ومحتواها فقط. بمعنى، ان العملية ستسير بالشكل التالي: مع بداية البحث، عندما سيجد التاج الاول '<div>' سييكتفي به ولا يطمع في ما يليه، ثم ينتقل مباشرة نحو الهدف الثاني '<p>' فيطابقه ويكتفي به دون ان يطمع في ما يليه، وهكذا. مع العلم ان الباترن عبارة عن البحث (.+?) في كل شئ، لكن من دون طمع.
+ الرمز ? يصبح له معنى اخر مع lookahead assertions، النظر الى الامام x(?=y) ومنع النظر الى الامام x(?!y) سيتم شرحها في هذا الجدول.

+ +

 

+
. +

 

+ +

النقطة الكسرية تطابق اي شئ، ما عدا السطر الجديد

+ +

مثلا، /.n/ ستطابق 'an' و 'on' في "nay, an apple is on the tree", لكن ليس 'nay'.

+ +

 

+
(x) +

 

+ +

مطابقة 'x' وانشاء فهرسة جزئية. كما يبين المثال التالى. اقواس المجموعة المفهرسة تسمى capturing parentheses.
+
+ مثلا،'(foo)' و '(bar)' في الباترن /(foo) (bar) \1 \2/ تطابق وتفهرس الكلمة الاولى والكلمة الثانية في السلسلة الحرفية "foo bar foo bar". والفهرسة الرقمية \1 و \2  تولد الكلمة الثالثة والكلمة الرابعة بناءا على الاقواس المحيطة بكل منهما. تذكر ان هذه الفهرسة الرقمية تستخدم داخل الباترن فقط. فيما تستخدم المتغيرات السحررية $1, $2, ..., $n خارج الباترن، وتستخدم في عملية الاستبدال فقط، مثلا، 'bar foo'.replace(/(...) (...)/, '$2 $1').  $& يطابق هذا المتغير السحري $& السلسلة النصية بالكامل، او بمعنى اصح، ينقل ناتج الباترن بالكامل.

+ +

 

+
(x:?) +

 

+ +

مطابقة ال 'x' لكن دون انشاء جزئية مفهرسة، اقواس المجموعة هنا تسمى non-capturing parentheses

+ +

انشاء جزئية مفهرسة وعدم استخدامها، يبطئ من سرعة محرك الريجكس، لانه يتسبب له في عمل زائد، يمكنك جعل محرك الريجكس اسرع قليلا باستخدام non-capturing.

+ +

علامة الاستفهام والنقطتين بعد قوس الافتتاح هما من الرموز الخاصة، استخدامهما جنبا الى جنب يخبر محرك الريجكس بان هذه المجموعة لا ينبغي ان تعامل كجزئية مفهرسة. وبالتالي لا يمكن، استدعاء المطابقة من خلال الفهرسة الرقمية\1... او عناصر المصفوفة [1]... او اعادة استخدام المطابقة من خلال المتغيرات السحرية $1...$9.

+ +

 

+
=? +

 

+ +

مطابقة ال 'x' فقط اذا كانت 'x' متبوعة ب 'y'. وهذا يسمى النظر الى الامام lookahead.

+ +

مثلا، /Jack(?=Sprat)/ سيطابق 'Jack' فقط اذا كان متبوعا ب 'Sprat'. وكذالك بالنسبة ل /Jack(?=Sprat|Frost)/ سيطابق 'Jack' فقط اذا كان متبوعا ب 'Sprat' او 'Frost'. ومع ذالك، لا 'Sprat' ولا 'Frost' جزء من ناتج المطابقة.

+ +

 

+
!? +

 

+ +

مطابقة ال 'x' فقط اذا كانت 'x' غير متبوعة ب 'y'. وهذا يسمى منع او ابطال النظر الى الامام negated lookahead.

+ +

مثلا، /\d+(?!\.)/ سيطابق عدد فقط اذا كان غير متبوعا بفاصلة كسرية. الريجكس /\d+(?!\.)/.exec("3.141") سيطابق '141' لكن لن يطابق '3.141'.

+ +

 

+
x|y +

 

+ +

مطابقة 'x' أو 'y'.

+ +

مثلا، /green|red/ سيطابق 'green' في "green apple" و 'red' في "red apple.".

+ +

 

+
{n} +

 

+ +

مطابقة n تحديدا، بناءا على التعبير الذي سيسبقه. n يجب ان يكون عددا صحيحا.
+
+ مثلا، /a{2}/ لن يطابق 'a'في "candy," لكنه سيطابق جميع ال a في "caandy," كما سيطابق اثنان من ال a الاولى في "caaandy.".

+ +

 

+
{n,} +

 

+ +

مطابقة n او اكثر، بناءا على التعبير الذي سيسبقه. n يجب ان يكون عددا صحيحا.

+ +

مثلا، /a{2,}/ سيطابق "aa" ، "aaaa" و "aaaaa" لكن ليس "a".

+ +

 

+
{n,m} +

 

+ +

حيث ان n و m من الاعداد الصحيحة الموجبة، و n <= m. فستكون المطابقة من n الى m، بناءا على التعبير الذي سيسبقها.

+ +

مثلا، /a{1,3}/ لن يطابق شئ في "cndy" لكنه سيطابق 'a' في "candy," وكذاك اثنان من ال 'a' الاولى في "caandy," وايضا الثلاثة "a" الاولى في "caaaaaaandy". لاحظ عند مطابقة "caaaaaaandy" تم مطابقة "aaa" فقط، بالرغم من احتواء السلسة النصية على اكثر من ذالك.

+ +

 

+
[xyz] +

 

+ +

المجموعة، او مجموعة الرموز، هذا النوع من الباترن يطابق اي رموز داخل الاقواس المعقوفة، بما فيها المهربات المتتالية escape sequences. الرموز الخاصة مثل النقطة (.) والنجمة (*) تصبح رموز عادية شانها شان اي حرف في سلسلة نصية، لذالك فهي لا تحتاج لباكسلاش. يمكنك تحديد منظم الرموز وفصله بشرطة، كما يبين المثال التالي:
+
+ الباترن [a-d] سيطابق نفس ما سيطابقه الباترن [abcd] سيطابقان 'b' في "brisket" و 'c' في "city". وكذالك بالنسبة للباترن /[a-z.]+/ و /[\w.]+/ بامكانهما مطابقة كامل السلسلة النصية "test.i.ng".

+ +

 

+
[xyz^] +

 

+ +

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

+ +

مثلا، الباترن [^abc] هو نفسه [^a-c]. سيطابقان 'r' في "brisket" و 'h' في "chop."

+ +

 

+
[b\] +

 

+ +

سيطابق backspace (U+0008). اذا كنت ترغب بمطابقة الرمز النصي: رجوع الى الخلف literal backspace character. فمن الضروري استخدام الاقواس المعقوفة، حتى لا تتعارض مع \b.

+ +

 

+
b\ +

 

+ +

مطابقة حدود الكلمة word boundary.

+ +

\b، ستطابق الكلمة التي لايسبقها ولا يليها اي من، ما ورد في هذه المجموعة [A-Za-z0-9_] او في مثيلتها \w، بمعنى ادق، ستقبل بوجود المسافة الفارغة والرموز النصية الخاصة مثل "&=)é'?*-" ، اي، كل ما يمكن ان ينتج عن هذه المجموعة [^A-Za-z0-9_] او عن مثيلتها \W، اما من قبل او من بعد المطابقة، او من كلا الجانبين، او ان تكون في بداية السلسلة او نهايتها. لاحظ ان ال \b ليست جزءا من المطابقة. بل للدلالة فقط. وايضا لا تتعارض مع [\b].

+ +

امثلة مختلفة:
+
+ /\bm/ ستطابق 'm' في "moon".
+ /oo\b/ لن تطابق 'oo' في "moon" لان 'oo' متبوعة بالكلمة الرمزية 'n'.
+ /oon\b/ ستطابق 'oon' في "moon"، لان 'oon' هو نهاية السلسلة النصية، وبالتالي ليست متبوعة باية كلمة رمزية.
+ /\w\b\w/ لن يطابق اي شئ، لان \w لايمكنها ابدا ان تكون متبوعة ب \b و \w.

+ +
+

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

+ +

 

+
+
B\ +

 

+ +

ال non-word boundary\B. عكس ما يمكن لل \b ان تقوم به.

+ +

مثلا، /\B../ ستطابق 'oo' في "noonday"، /y\B./ ستطابق 'ye' في "possibly yesterday".

+ +

 

+
cX\ +

 

+ +

حيث ان X هو منظم الرموز من A الى Z. يطابق رمز عنصر التحكم في سلسلة نصية. مثلا،

+ +

مثلا، /\cM/ سيطابق control-M (U+000D) في السلسلة النصية.

+ +

 

+
d\ +

 

+ +

مطابقة الاعداد. ويكافئ الباترن [0-9].

+ +

مثلا، /\d/ او /[0-9]/ ستطابق '2' في "B2 is the suite number.".

+ +

 

+
D\ +

 

+ +

مطابقة كل شئ ما عدا الاعداد. ويكافئ الباترن [^0-9].

+ +

مثلا، /\D/ او /[^0-9]/ سيطابق 'B' في "B2 is the suite number.".

+ +

 

+
f\سيطابق نموذج التلقيم form feed (U+000C).
n\سيطابق سطر التلقيم line feed (U+000A).
r\ +

سيطابق carriage return (U+000D).

+
s\ +

 

+ +

مطابقة رمز المسافة الفارغة، بما في ذالك المسافة، التاب، نمودج التلقيم، سطر التلقيم، ويكافئ [ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

+ +

مثلا، /\s\w*/ سيطابق ' bar' في "foo bar."

+ +

 

+
S\ +

 

+ +

مطابقة اي شئ ما عدا رمز المسافة الفارغة، ويكافئ [^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

+ +

مثلا، /\S*/ سيطابق 'foo' في "foo bar."

+ +

 

+
t\سيطابق tab (U+0009).
v\ +

سيطابق vertical tab (U+000B).

+
w\ +

 

+ +

مطابقة الحروف الابجدية بما في ذالك ال underscore. ويكافي [A-Za-z0-9_].

+ +

مثلا، /\w/ سيطابق 'a'في "apple," و '5' في "$5.28," و '3' في "3D."

+
W\ +

 

+ +

مطابقة اي شئ غير الحروف الابجدية والاندرسكور، ويكافئ [^A-Za-z0-9_].

+ +

مثلا، /\W/ او /[^A-Za-z0-9_]/ سيطابق '%' في "50%.".

+ +

 

+
n\ +

 

+ +

حيث ان n عدد صحيح موجب، سيشير الى المجموعة المفهرسة capturing parentheses .

+ +

مثلا، /apple(,)\sorange\1/ سيطابق 'apple, orange,' في "apple, orange, cherry, peach.".

+ +

 

+
0\ +

 

+ +

مطابقة الرمز NULL (U+0000). لا تتبع هذا برقم آخر، بسبب ان \0<digits> هو تسلسل التهريب الثماني استخدم \x00 بدلا منه.

+ +

 

+
xhh\مطابقة الرمز مع الكود hh (two hexadecimal digits).
uhhhh\مطابقة الرمز مع الكود hhhh (four hexadecimal digits).
u{hhhh}( فقط عندما يستخدم u flag ) سيطابق الرمز مع ال Unicode بالقيمة hhhh (hexadecimal digits).
+ +

  لتهريب تعابير الريجكس في المدخلات النصية، يمكنك  استخدام دالة الاستبدال التالية:

+ +
function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
+ +

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

+ +

استخدام الاقواس

+ +

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

+ +

مثلا، الباترن /Chapter (\d+)\.\d*/ يطابق بدقة، الرموز 'Chapter ' متبوعة بواحد او اكثر من الارقام (\d تشير الى اي رقم و + تشير الى واحد او اكثر من المرات، بالاضافة الى الاقواس المستخدمة خصيصا لتخزين وفهرسة ما سينتج عنه )، متبوعا بنقطة او فاصلة عشرية التي هي نفسها من الرموز الخاصة، يسبقها الباكسلاش \ الذي بدوه يخبر الباترن بان يعاملها كنقطة عادية، متبوعا باي رقم يكرر صفر او اكثر من المرات (\d تشير الى اي رقم والنجمة * تشير الى صفر او اكثر من المرات).

+ +

هذا الباترن سيطابق "Chapter 4.3" في "Open Chapter 4.3, paragraph 6"، وايضا سيقوم بتخزين وفهرسة الجزئية '4'. بينما الباترن لا يطابق شئ في "Chapter 3 and 4" بسبب ان السلسلة الحرفية لاتحتوي على النقطة بعد الرقم '3'.

+ +

لمطابقة سلسلة فرعية من دون التسبب في فهرسة الجزء المتطابق (راجع non-capturing)، ضمن الاقواس ابدا الباترن ب ?:. مثلا (?:\d+) ستطابق واحد او اكثر من الارقام من دون ان تفهرس الرموز المتطابقة.

+ +

العمل مع الريجكس

+ +

تستخدم التعابير القياسية مع اثنين من الاوبجكت. الاوبجكت الاول هو RegExp ويحتوي على الوظيفتين test و exec والاوبجكت الثاني وهو String ويحتوي على الوظائف التالية: match، replace، search، و split.  تم شرح هذه الوظائف بالتفصيل في JavaScript reference.

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

الوظائف المملوكة للكائن RegExp

+
الوظيفةوصفها
exec تقوم هذه الوظيفة بتنفيذ بحث لمطابقة سلسلة نصية. وتعود بمصفوفة تحتوي على نتيجة البحث، او تعود ب null في حالة عدم المطابقة.
test تقوم هذه الوظيفة بعمل فحص لمطابقة سلسلة نصية. وتعود اما ب true او false.
match تقوم هذه الوظيفة بتنفيذ بحث لمطابقة سلسلة نصية. وتعود بمصفوفة تحتوي على نتيجة البحث، او تعود ب null في حالة عدم المطابقة. (نفس ما تقوم به الوظيفة exec).
search تقوم هذه الوظيفة بعمل فحص لمطابقة سلسلة نصية. وتعود برقم المكان الذي يتواجد فيه ما تمت مطابقته. او ب -1 في حالة لم يتم العثور على المطلوب.
replace تقوم هذه الوظيفة بتنفيذ بحث لمطابقة سلسلة نصية. ويحل محل السلسلة الجزئية المتطابقة، السلسلة الجزئية البديلة.
split هذه الوظيفة تستخدم الريجكس او سلسلة نصية ثابتة لتقسيم السلسلة الى مصفوفة من السلاسل الجزئية.
+ +

عندما تريد معرفة ما اذا كان الباترن موجود في سلسلة نصية ام لا، استخدم اما الوظيفة test او الوظيفة search ، اما لمعرفة المزيد من المعلومات (ولكن أبطأ قليلا في التنفيذ)، استخدم اما الوظيفة exec او الوظيفة match اذا استخدمت exec او match ونجحت المطابقة، فان هاتان الوظيفتان ستعود بمصفوفة، وفي نفس الوقت ستقوم بتحديث خصائص الريجكس المرتبطة به وكذلك خصائص الريجكس RegExp. اذا فشلت المطابقة, ستعود الوظيفة exec ب null ( التي تفرض : false).

+ +

في المثال التالي، السكريبت يستخدم الوظيفة exec للبحث عن مطابقة في السلسلة النصية:

+ +
var myRe = /d(b+)d/g;
+var myArray = myRe.exec('cdbbdbsbz');
+ +

إذا كنت لا تحتاج إلى الوصول إلى خصائص الريجكس، هناك طريقة بديلة لإنشاء myArray، كالتلي:

+ +
var myArray = /d(b+)d/g.exec('cdbbdbsbz'); // similar to "cdbbdbsbz".match(/d(b+)d/g); however,
+    // the latter outputs Array [ "dbbd" ], while
+    // /d(b+)d/g.exec('cdbbdbsbz') outputs Array [ "dbbd", "bb" ].
+    // See below for further info (CTRL+F "The behavior associated with the".)
+ +

إذا كنت ترغب في بناء ريجكس من سلسلة نصية، هناك بديل آخر، كالتالي:

+ +
var myRe = new RegExp('d(b+)d', 'g');
+var myArray = myRe.exec('cdbbdbsbz');
+ +

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

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

نتائج تنفيذ الريجكس

+
الكائنالخاصية او الفهرسالوصففي هذا المثال
myArray السلسلة النصية التي جرى مطابقتها وجميع السلاسل النصية الجزئية المفهرسة.['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']
indexفهرس بداية المُطابَقة في السلسلة النصية، والفهرسة تبتدئ من 0.1
inputالسلسلة النصية الأصلية."cdbbdbsbz"
[0]الرموز الاخيرة التي جرى مطابقتها"dbbd"
myRelastIndexالفهرس الذي ستبدأ عنده عملية البحث عن المطابقة التالية. وإذا لم يتم ضبط البند "g" فستبقى قيمته مساويةً للصفر. للمزيد حول البحث المتقدم باستخدام البنود.5
sourceنص الباترن. تم تحديثه في الوقت الذي تم فيه إنشاء الريجكس، وليس وقت تنفيذه."d(b+)d"
+ +

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

+ +
var myRe = /d(b+)d/g;
+var myArray = myRe.exec('cdbbdbsbz');
+console.log('The value of lastIndex is ' + myRe.lastIndex);
+
+// "The value of lastIndex is 5"
+ +

بينما يوضح المثال التالي كيفية الوصول الى خصائص الكائن بالطريقة الخاطئة:

+ +
var myArray = /d(b+)d/g.exec('cdbbdbsbz');
+console.log('The value of lastIndex is ' + /d(b+)d/g.lastIndex);
+
+// "The value of lastIndex is 0"
+ +

حاصل الباترن /d(b+)d/g في كلتا التعليمات البرمجية، عبارة عن كائنان مختلفان، لذالك هما مختلفان في قيمة الخاصية lastIndex اذا كنت ترغب في الوصول الى خصائص الريجكس المنشا من طرف معد او مهيئ الاوبجكت، يلزمك اولا اسناده لمتغير.

+ +

Using parenthesized substring matches

+ +

بمجرد تضمين جزء من الباترن داخل الاقواس الهلالية، سيصبح جزءا مفهرسا قابل لاعادة الاستخدام، مثلا،  الباترن /a(b)c/ سيطابق 'abc' في  "abcd" ويفهرس المطابقة الجزئية (b) برقم 1، ناتج المطابقة الجزئية (b) هو السلسلة الحرفية الجزئية 'b'. لاستدعاء هذا الجزء المفهرس خارج الباترن، استخدم عناصر المصفوفة [1].... ولاعادة استخدامها داخل الباترن استخدم الفهرسة الرقمية \1 ....
+ - كيفية استدعائها خارج الباترن:

+ +
var myRe = /a(b)c/;
+var myArray = myRe.exec('abcb');
+console.log('The result of submatch N1: ' + myArray[1] );
+
+// log: The result of submatch N1: b
+ +

يمكنك استخدام عدد لا متناهي من هذه الاجزاء المفهرسة، تبتدئ الفهرسة من واحد، عائد المصفوفة سيتضمن جميع الاجزاء المفهرسة في الباترن.
+ كيفية اعادة استخدامها داخل الباترن:

+ +
var myRe = /a(b)c\s\1/g;
+var myArray = myRe.exec('abc b');
+console.log('The result of submatch N1: ' + myArray[1] );
+
+// log: The result of submatch N1: b
+ +

يستخدم السكريبت التالي الوظيفة ()replace لعكس الكلمتين John و Smith في السلسلة النصية 'John Smith'. ويستخدم في نص الاستبدال، المتغيرات السحرية $1 و $2 لاستدعاء المطابقة الجزئية المفهرسة الاولى والثانية. مثال:

+ +
var re = /(\w+)\s(\w+)/;
+var str = 'John Smith';
+var newstr = str.replace(re, '$2, $1');
+console.log(newstr);
+
+// "Smith, John"
+ +
+

ملاحظة: يسمح باستخدام المتغيرات السحرية، 9 مرات فقط، في العملية الواحدة.

+
+ +

البحث المتقدم باستخدام البنود

+ +

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

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

بنود الريجكس

+
FlagDescription
gبحث عام، عدم وجوده = النتيجة الاولى فقط.
iعدم مراعاة حالة الاحرف، سواء كانت صغيرة او كبيرة.
mالبحث في السطور المتعدد = كامل النص.
uسلسلة يونيكود، أي معاملة الباترن على أنه سلسلة من رموز يونيكود (Unicode code points).
yالمطابقة ستبدأ من الفهرس المُشار إليه بالخاصية lastIndex لكائن التعابير النمطية في السلسلة الهدف، ولن تتم محاولة مطابقة ما قبل هذا الفهرس. للمزيد من المعلومات sticky
+ +

لتضمين بند مع الريجكس استخدم التعبير التالي:

+ +
var re = /pattern/flags;
+ +

او

+ +
var re = new RegExp('pattern', 'flags');
+ +

البنود، جزء لا يتجزأ من الريجكس. لا يمكن إزالتها أو إضافتها لاحقا.

+ +

مثلا، re = /\w+\s/g يقوم بانشاء ريجكس يبحث على واحد او اكثر من الرموز متبوعة بمسافة واحدة، يقوم بتنفيذ هذا الاجراء على السلسلة الحرفية (كاملة = g):

+ +
var re = /\w+\s/g;
+var str = 'fee fi fo fum';
+var myArray = str.match(re);
+console.log(myArray);
+
+// ["fee ", "fi ", "fo "]
+ +

يمكنك استبدال هذا السطر:

+ +
var re = /\w+\s/g;
+ +

ب:

+ +
var re = new RegExp('\\w+\\s', 'g');
+ +

وستحصل على نفس النتيجة.

+ +

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

+ +
var re = /^Multi\s*line$/gm;
+var str = 'Multi line\n or \nMultiline';
+var myArray = str.match( re );
+
+console.log( myArray );
+// log: [ "Multi line", "Multiline" ]
+ +

 

+ +

امثلة

+ +

تبين الامثلة التالية بعض استخدامات الريجكس

+ +

اعادة صياغة المدخلات النصية.

+ +

يوضح المثال التالي كيف يمكن للريجكس ان يتلاعب في بنية السلسلة النصية، وايضا كيفية استخدام ()string.split و ()string.replace. سيقوم السكريبت التالي بتنظيف واعادة صياغة السلسلة النصية، التي تحتوي على اسماء مفصولة بمسافات فارغة، تابات، وبالظبط فاصلة منقوطة واحدة. واخيرا سيقوم بعكس هذه الاسماء وترتيبها من a الى z.

+ +
// The name string contains multiple spaces and tabs,
+// and may have multiple spaces between first and last names.
+var names = 'Orange Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ';
+
+var output = ['---------- Original String\n', names + '\n'];
+
+// Prepare two regular expression patterns and array storage.
+// Split the string into array elements.
+
+// pattern: possible white space then semicolon then possible white space
+var pattern = /\s*;\s*/;
+
+// Break the string into pieces separated by the pattern above and
+// store the pieces in an array called nameList
+var nameList = names.split(pattern);
+
+// new pattern: one or more characters then spaces then characters.
+// Use parentheses to "memorize" portions of the pattern.
+// The memorized portions are referred to later.
+pattern = /(\w+)\s+(\w+)/;
+
+// Below is the new array for holding names being processed.
+var bySurnameList = [];
+
+// Display the name array and populate the new array
+// with comma-separated names, last first.
+//
+// The replace method removes anything matching the pattern
+// and replaces it with the memorized string—the second memorized portion
+// followed by a comma, a space and the first memorized portion.
+//
+// The variables $1 and $2 refer to the portions
+// memorized while matching the pattern.
+
+output.push('---------- After Split by Regular Expression');
+
+var i, len;
+for (i = 0, len = nameList.length; i < len; i++) {
+  output.push(nameList[i]);
+  bySurnameList[i] = nameList[i].replace(pattern, '$2, $1');
+}
+
+// Display the new array.
+output.push('---------- Names Reversed');
+for (i = 0, len = bySurnameList.length; i < len; i++) {
+  output.push(bySurnameList[i]);
+}
+
+// Sort by last name, then display the sorted array.
+bySurnameList.sort();
+output.push('---------- Sorted');
+for (i = 0, len = bySurnameList.length; i < len; i++) {
+  output.push(bySurnameList[i]);
+}
+
+output.push('---------- End');
+
+console.log(output.join('\n'));
+ +

استخدام الرموز الخاصة للتحقق من صحة المدخلات.

+ +

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

+ +

بعد non-capturing parentheses (?: سينظر الريجكس الى الثلاثة ارقام \d{3} او | الى القوس اليساري \( متبوعا بثلاثة ارقام \d{3} متبوعة بقوس الاغلاق \), (نهاية non-capturing parenthesis ))، متبوعة بشرطة واحدة تليها الباكسلاش او النقطة الكسرية، اذا وجدت قم بفهرستها ([-\/\.])، متبوعة بثلاث ارقام \d{3}، متبوعة باستدعاء الجزء المفهرس \1, متبوعا باربعة ارقام \d{4}.

+ +

يتم تنشيط حدث التغيير عندما يقوم المستخدم بالضغط على إنتر وملأ القيمة RegExp.input.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+    <meta http-equiv="Content-Script-Type" content="text/javascript">
+    <script type="text/javascript">
+      var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
+      function testInfo(phoneInput) {
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(phoneInput.value + ' isn\'t a phone number with area code!');
+        else
+          window.alert('Thanks, your phone number is ' + OK[0]);
+      }
+    </script>
+  </head>
+  <body>
+    <p>Enter your phone number (with area code) and then click "Check".
+        <br>The expected format is like ###-###-####.</p>
+    <form action="#">
+      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button>
+    </form>
+  </body>
+</html>
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}

diff --git a/files/ar/web/javascript/guide/working_with_objects/index.html b/files/ar/web/javascript/guide/working_with_objects/index.html new file mode 100644 index 0000000000..83f3390467 --- /dev/null +++ b/files/ar/web/javascript/guide/working_with_objects/index.html @@ -0,0 +1,516 @@ +--- +title: العمل مع الكائنات +slug: Web/JavaScript/Guide/Working_with_Objects +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
+ +

تم تصميم جافا سكريبت على نموذج بسيط يستند إلى الكائنات. الكائن هو عبارة عن مجموعة من الخصائص، كل خاصية لها اسم وقيمة key/value يمكن أن تكون قيمة هذه الخاصية عبارة عن دالة، وفي هذه الحالة يمكن ان تسمى بالوظيفة « method ». بالإضافة إلى الكائنات الأصلية التي توفرها بيئة المتصفحات، يمكنك انشاء كائنات خاصة بك. يصف هذا الفصل كيفية استخدام الكائنات، والخصائص والدوال او الوظائف، وايضا كيفية إنشاء الكائنات الخاصة بك.

+ +

نظرة عامة حول الكائنات

+ +
+

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

+ +

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

+ +

الكائنات والخصائص

+ +

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

+ +
objectName.propertyName
+
+ +

ككل متغيرات جافاسكريبت،  اسم الكائن واسم الخاصية حساسة تجاه الاحرف (case sensitive). يمكنك تعيين خاصية ومنحها قيمة اولية. على سبيل المثال، لنقم بانشاء كائن باسم myCar وتعين خصائص له بالاسماء التالية : make, model و year كما في المثال التالي :

+ +
var myCar = new Object();
+myCar.make = 'Ford';
+myCar.model = 'Mustang';
+myCar.year = 1969;
+
+ +

خصائص الكائن الغير معرفة هي {{jsxref("undefined")}} (وليست {{jsxref("null")}}).

+ +
myCar.color; // undefined
+ +

يمكن الوصول الى خصائص الكائنات عن طريق الاقواس المربعة بدلا من نقطة التدوين، في بعض الاحيان يكون من الضروري استخدام الاقواس المربعة للوصول الى خصائص الكائن (لمزيد من المعلومات شاهد property accessors).  في بعض الاحيان تسمى الكائننات بمصفوفات مترابطة (associative arrays)، نظرا للشبه الكبير بينهما، حيث يمكن استخدام اسم الخاصية للوصول إلى قيمتها، الامر الذي تعتمده ايضا المصفوفات الترابطية. على سبيل المثال  يمكن الوصول إلى خصائص الكائن myCar على النحو التالي:

+ +
myCar['make'] = 'Ford';
+myCar['model'] = 'Mustang';
+myCar['year'] = 1969;
+
+ +

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

+ +
// four variables are created and assigned in a single go,
+// separated by commas
+var myObj = new Object(),
+    str = 'myString',
+    rand = Math.random(),
+    obj = new Object();
+
+myObj.type              = 'Dot syntax';
+myObj['date created']   = 'String with space';
+myObj[str]              = 'String value';
+myObj[rand]             = 'Random Number';
+myObj[obj]              = 'Object';
+myObj['']               = 'Even an empty string';
+
+console.log(myObj);
+
+ +

يرجى ملاحظة أن كافة المفاتيح في الاقواس المربعة تم تحويلها إلى سلسلة نصية (string type)، لان الكائنات في جافاسكريبت تتطلب بان يكون نوع المفتاح سلسلة نصية فقط، على سبيل المثال، في المثال اعلاه، عندما تم اضافة المفتاح rand الى ال myObj، الجافاسكريبت استدعت الوظيفة ()obj.toString بشكل اوتوماتيكي، واستخدمت ناتج السلسلة النصية كمفتاح جديد.  
+ مع العلم ان ("typeof rand === "number ).

+ +

يمكنك أيضا الوصول إلى الخصائص باستخدام قيمة نصية تم تخزينها في متغير :

+ +
var propertyName = 'make';
+myCar[propertyName] = 'Ford';
+
+propertyName = 'model';
+myCar[propertyName] = 'Mustang';
+
+ +

يمكنك استخدام for...in لعمل تكرار على خصائص الكائن القابلة للتصفح ( لمزيد من المعلومات حول enumerable properties ). لتوضيح ما نعنيه : تقوم الدالة التالية باظهار خصائص الكائن، عندما سيمرر لها الكائن واسم الكائن كبارامترات :

+ +
function showProps(obj, objName) {
+  var result = '';
+  for (var i in obj) {
+    // obj.hasOwnProperty() is used to filter out properties from the object's prototype chain
+    if (obj.hasOwnProperty(i)) {
+      result += objName + '.' + i + ' = ' + obj[i] + '\n';
+    }
+  }
+  return result;
+}
+
+ +

وهكذا، باستدعاء الدالة على هذا النحو showProps(myCar, "myCar") سينتج عنها النتائج التالية :

+ +
myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969
+ +

تصفح خصائص الكائن

+ +

ابتداءا من ECMAScript 5، هناك ثلاثة طرق لتصفح/المرور على خصائص الكائن :

+ + + +

قبل ECMAScript 5، لم يكن هناك أية طريقة لتصفح كافة خصائص الكائن. الا انه، يمكن تحقيق ذلك باستخدام الدالة التالية:

+ +
function listAllProperties(o) {
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
+      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+	}
+
+	return result;
+}
+
+ +

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

+ +

إنشاء كائنات جديدة

+ +

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

+ +

كما يمكنك ايضا انشاء كائن بواسطة منشئ الوظيفة ( constructor function ) ومن ثم انشاء مثيل/نسخة له، من خلال الكلمة المحجوزة new.

+ +

استخدام object initializers

+ +

بالإضافة إلى إنشاء كائنات باستخدام constructor function، يمكنك إنشاء كائنات باستخدام مهيئ الكائن. هذا النوع من الكائنات  يشار إليه في بعض الأحيان ب object literal notation . وهو يتسق مع المصطلحات المستخدمة من قبل ++C.

+ +

التعبير عن كائن باستخدام object initializers:

+ +
var obj = { property_1:   value_1,   // property_# may be an identifier...
+            2:            value_2,   // or a number...
+            // ...,
+            'property n': value_n }; // or a string
+
+ +

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

+ +

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

+ +
var value_1 = 600,
+value_2 = 400;
+({
+    property_1: value_1,
+    2: value_2,
+    "property n": "Measurement",
+    init: function(){
+        console.log( this["property n"] +": "+ this.property_1 + "x" + this[2]);
+    }
+}).init(); // Measurement: 600x400
+
+
+ +

مهيئات الكائن، هي تعليمات برمجية، وكل مهئ سيخلق كائن جديد في التعليمة البرمجية التي سيتم تنفيذها. مهيآت الكائنات المتطابقة تنشئ كائنات مميزة والتي لا يمكن مقارنتها ببعضها البعض. يتم إنشاء الكائنات بنفس طريقة انشاء كائن جديد ()new Object، الكائنات المنشاة من خلال ال object literal هي مثيلات الكائن Object.

+ +

تقوم التعليمة البرمجية التالية، بانشاء كائن وتعيينه للمتغير x في حالة ما اذا كان الشرط صحيح:

+ +
if (cond) var x = {greeting: 'hi there'};
+
+ +

ينشئ المثال التالي، الكائن myHonda مع ثلاث خصائص. لاحظ أن الخاصية engine هي أيضا كائن له خصائصه.

+ +
var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
+
+ +

يمكنك أيضا استخدام مهيئات الكائن لإنشاء المصفوفات. شاهد array literals.

+ +

استخدام ال constructor function

+ +

كبديل، يمكنك إنشاء كائن مع هاتين الخطوتين:

+ +
    +
  1. تعريف نوع الكائن بانشاء constructor function. هناك عرف متفق عليه، وهو كتابة الحرف الاول من اسم الكائن بحروف كبيرة Capital.  بهدف تمييزه عن باقي الاسماء.
    2. +
  2. انشاء مثيل/نسخة للكائن بواسطة الكلمة المحجوزة new.
    3. +
+ +

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

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+ +

لاحظ اننا استخدمنا this لتعيين قيم لخصائص الكائن استناداً إلى القيم التي سيتم تمريرها إلى بارامترات الدالة.

+ +

الآن يمكنك إنشاء كائن باسم mycar على النحو التالي:

+ +
var mycar = new Car('Eagle', 'Talon TSi', 1993);
+
+ +

تقوم هذه التعليمة البرمجية بانشاء mycar، واسناد القيم المحددة لخصائصه. وبالتالي قيمة  mycar.make هي قيمة نصية "Eagle"، و mycar.year قيمة رقمية 1993، وهلم جرا.

+ +

يمكنك إنشاء اي عدد من الكائنات من النوع Car واستدعاؤها عن طريق الكلمة المحجوزة new. مثال:

+ +
var kenscar = new Car('Nissan', '300ZX', 1992);
+var vpgscar = new Car('Mazda', 'Miata', 1990);
+
+ +

يمكن للكائن ان يحتوي على خاصية تكون هي نفسها كائن اخر، على سبيل المثال، فرضا انك تريد انشاء كائن تحت الاسم person كما يلي:

+ +
function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+
+ +

ومن ثم إنشاء مثيلين/نسختين للكائن person كما يلي:

+ +
var rand = new Person('Rand McKinnon', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+
+ +

ثم، يمكنك إعادة تعريف ال Car لتضمين الخاصية owner التي ستمتلك الكائن person كما يلي:

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+
+ +

بعد ذلك يمكنك إنشاء مثيلات/نسخ للكائنات الجديدة، باستخدام ما يلي:

+ +
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+
+ +

لاحظ أنه بدلاً من تمرير سلسلة نصية أو قيمة رقمية عند إنشاء الكائنات الجديدة، في البيانات الواردة أعلاه تم تمرير الكائنان rand و ken كبرامترات خاصة بال owner. إذا كنت ترغب في معرفة الاسم الخاص ب car2، يمكنك الوصول إلى الخاصية بالطريقة التالية:

+ +
car2.owner.name
+
+ +

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

+ +
car1.color = 'black';
+
+ +

قمنا باضافة الخاصية color لل car1، وقمنا بتعيين القيمة "black." لها، ومع ذالك فهذا لن يجعلها متاحة لجميع الكائنات من النوع Car. لإضافة خاصية جديدة لكافة الكائنات من نفس النوع Car، يتوجب عليك اضافة هذه الخاصية لل constructor. الخاص بالكائن Car.

+ +

استخدام الوظيفة Object.create

+ +

يمكن أيضا إنشاء كائنات باستخدام الوظيفة {{jsxref("()Object.create")}} هذه الوظيفة يمكن أن تكون مفيدة للغاية، لأنها تتيح لك أن تختار ال prototype object للكائن الذي تريد إنشاء، دون الحاجة إلى تعريف ال constructor function (بواسطة new).

+ +
// Animal properties and method encapsulation
+var Animal = {
+  type: 'Invertebrates', // Default value of properties
+  displayType: function() {  // Method which will display type of Animal
+    console.log(this.type);
+  }
+};
+
+// Create new animal type called animal1
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Output:Invertebrates
+
+// Create new animal type called Fishes
+var fish = Object.create(Animal);
+fish.type = 'Fishes';
+fish.displayType(); // Output:Fishes
+ +

الوراثة

+ +

في جافا سكريبت جميع الكائنات ترث من كائن واحد على الأقل. الكائن الذي ترث منه يسمى prototype، والخصائص الموروثة يمكن العثور عليها في ال prototype object لل constructor. شاهد Inheritance and the prototype chain  لمزيد من المعلومات.

+ +

فهرسة خصائص الكائن

+ +

يمكنك الاشارة/الوصول إلى خاصية الكائن إما عن طريق الاسم الخاص بها أو عن طريق المؤشر الترتيبي لها (index). إذا قمت في البداية بتعريف خاصية باسمها، سيتوجب عليك دائما الاشارة اليها باسمها، وكذالك اذا قمت في البداية بتعريف خاصية بمؤشرها الترتيبي، ايضا سيتوجب عليك الاشارة اليها بمؤشرها الترتيبي.

+ +

ينطبق هذا الشرط عند إنشاء الكائن وخصائصه داخل ال constructor (كما فعلنا سابقا مع  الكائن من النوع Car) وكذالك عند تحديد خصائص فردية بشكل واضح (على سبيل المثال، "myCar.color = "red). اذا قمت في البداية بتعريف خاصية بمؤشرها الترتيبي، مثل "myCar[5] = "25 mpg، وتريد بعد ذالك الوصول اليها سيتوجب عليك استخدام المؤشر الترتيبي على هذا النحو  myCar[5].

+ +

والاستثناء لهذه القاعدة هي كائنات ال HTML، مثل forms array. يمكنك الاشارة دائما إلى الكائنات في هذه المصفوفات إما عن طريق مؤشرهم الترتيبي (حسب وجودها في الوثيقة) او عن طريق اسمائها (إذا كانت معرفة). فمثلا، اذا كان الوسم الثاني <FORM> في الوثيقة له السمة (attribute ) باسم "myForm"، يمكنك الاشارة الى هذا الفورم ب document.forms[1] او ب document.forms["myForm"] او ب document.forms.myForm.

+ +

التحكم في خصائص الكائن

+ +

يمكنك إضافة خاصية إلى كائن محدد سابقا باستخدام الخاصية prototype. هذا النمط سيجعل هذه الخاصية متاحة لكافة الكائنات من النوع المحدد، بدلاً من تحديدها لمثيل واحد فقط. التعليمة البرمجية التالية تضيف الخاصية color الى جميع الكائنات من نوع Car، وبعد ذالك تقوم بتعيين القيمة الجديدة للخاصية color الخاصة بالكائن car1.

+ +
Car.prototype.color = null;
+car1.color = 'black';
+
+ +

شاهد  prototype property  لل Function object وايضا JavaScript reference لمزيد من المعلومات.

+ +

تعريف الوظائف

+ +

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

+ +
objectName.methodname = function_name;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...do something
+  }
+
+  // OR THIS WORKS TOO
+
+  myOtherMethod(params) {
+    // ...do something else
+  }
+};
+
+ +

حيث ان ال objectName كائن موجود، وال methodname هو الاسم المعين إلى الوظيفة، و function_name هو اسم الدالة.

+ +

ثم يمكنك استدعاء الوظيفة في سياق الكائن كما يلي:

+ +
object.methodname(params);
+
+ +

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

+ +
function displayCar() {
+  var result = 'A Beautiful ' + this.year + ' ' + this.make
+    + ' ' + this.model;
+  pretty_print(result);
+}
+
+ +

يمكنك استخدام الدالة pretty_print لاظهار الناتج على شكل نص افقي، تذكر ايضا على ان الكلمة المحجوزة this ستشير الى السياق الذي تنتمي اليه الدالة نفسها وفي هذه الحالة هو ال constructur Car

+ +

 يمكننا بعد ذالك تعيين هذه الدالة كوظيفة في ال constructeur Car على النحو التالي:

+ +
this.displayCar = displayCar;
+
+ +

التعليمة البرمجية النهائية:

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+
+ +

الان يمكنك استدعاء الوظيفة displayCar لكلا الكائنين على النحو التالي:

+ +
car1.displayCar();
+car2.displayCar();
+
+ +

استخدام this كمرجع للكائنات

+ +

جافاسكريبت لديها الكلمة المحجوزة لها this، يمكنك استخدامها مع الوظائف للرجوع/الاشارة إلى الكائن الحالي. على سبيل المثال، لنفترض ان لديك دالة تسمى validate تقوم بالتحقق من صحة المدخلات:

+ +
function validate(obj, lowval, hival) {
+  if ((obj.value < lowval) || (obj.value > hival)) {
+    alert('Invalid Value!');
+  }
+}
+
+ +

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

+ +
<input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)">
+
+ +

بشكل عام this تشير الى الكائن الذي يطلب الوظيفة.

+ +

يمكن ايضا استخدام this مع معالج الحدث بشكل مباشر، كما في المثال التالي:

+ +
<form name="myForm">
+<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
+<p><input name="button1" type="button" value="Show Form Name"
+     onclick="this.form.text1.value = this.form.name">
+</p>
+</form>
+ +

Defining getters and setters

+ +

 getter هي الوظيفة التي تقوم بجلب قيمة خاصية معينة. setter هي الوظيفة التي تقوم بتعيين قيمة لخاصية معينة. يمكنك تعيينها سواء للكائنات الاساسية المعرفة مسبقا أو الى الكائنات المعرف من قبل المستخدم والتي تدعم إضافة خصائص جديدة. وتستخدم مع ال object literal.

+ +

يبين المثال التالي كيفية انشاء getters و setters من طرف المستخدم :

+ +
var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25
+
+ +

خصائص الكائن هي :

+ + + +

يمكنك استخدام  getters و setters مع الوظائف المنشاة مسبقا، لتحقيق ذالك يمكننا استخدام الوظيفة Object.defineProperty او الوظيفة القديمة Object.prototype.__defineGetter__

+ +

يبين الكود التالي كيف ان  getters و setters بامكانها ان ترث ال  {{jsxref("Date")}} prototype لاضافة الخاصية year الى جميع ال instances الخاص بالكائن Date المنشا مسبقا، ولهذا سنقوم باستخدام بعض الوظائف الخاصة ب Date ك getFullYear و setFullYear :

+ +
var d = Date.prototype;
+Object.defineProperty(d, 'year', {
+  get: function() { return this.getFullYear(); },
+  set: function(y) { this.setFullYear(y); }
+});
+
+ +

تبين التعليمة البرمجية التالية كيفية استخدام الخاصية year الجديدة التي تم انشاؤها عن طريق getters و setters:

+ +
var now = new Date();
+console.log(now.year); // 2000
+now.year = 2001; // 987617605170
+console.log(now);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+
+ +

بصفة عامة،  getters و setters يمكن ان تكون:

+ + + +

عندما سنقوم بانشاء getters و setters باستخدام ال استخدام object initializers كل ما عليك القيام به هو البذء بانشاء الوظيفة getter اولا ومن تم تعريفها ب get وتليها الوظيفة setter وتعريفها ب set، وبالطبع، الوظيفة getter لا تحتاج الى اي باراميتر، فيما ستحتاج الوظيفة setter لبراميتر واحد وهو القيمة الجديدة ل set. فعلى سبيل المثال:

+ +
var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+
+ +

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

+ +
var o = { a: 0 };
+
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.b); // Runs the getter, which yields a + 1 or 6
+
+ +

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

+ +

حذف الخصائص

+ +

يمكنك حذف الخصائص الغير موروثة باستخدام الكلمة المحجوزة delete التعليمة البرمجية التالية توضح كيف يتم ذالك:

+ +
// Creates a new object, myobj, with two properties, a and b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// Removes the a property, leaving myobj with only the b property.
+delete myobj.a;
+console.log ('a' in myobj); // yields "false"
+
+ +

يمكنك ايضا استخدام delete لحذف متغير عام، شرط ان لا يكون هذا المتغير معرف بواسطة الكلمة المحجوزة var.

+ +
g = 17;
+delete g;
+
+ +

مقارنة الكائنات

+ +

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

+ +
// Two variables, two distinct objects with the same properties
+var fruit = {name: 'apple'};
+var fruitbear = {name: 'apple'};
+
+fruit == fruitbear; // return false
+fruit === fruitbear; // return false
+ +
// Two variables, a single object
+var fruit = {name: 'apple'};
+var fruitbear = fruit;  // assign fruit object reference to fruitbear
+
+// here fruit and fruitbear are pointing to same object
+fruit == fruitbear; // return true
+fruit === fruitbear; // return true
+
+ +
fruit.name = 'grape';
+console.log(fruitbear);    // yields { name: "grape" } instead of { name: "apple" }
+
+ +

لمزيد من المعلومات حول عوامل المقارنة، شاهد Comparison operators.

+
+ +

See also

+ + + +

{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}

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" new file mode 100644 index 0000000000..af934b397d --- /dev/null +++ "b/files/ar/web/javascript/guide/\330\247\331\204\330\257\331\210\330\247\331\204/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. فهذا يعني انها تستطيع ان ترث البرامترات والمتغيرات من الدالة الخارجية. بمعنى اخر، الدالة الداخلية تمتلك النطاق الخاص بالدالة الخارجية.

+ +

الخلاصة:

+ + + +

يظهر المثال التالي الدوال المتداخلة:

+ +
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/index.html b/files/ar/web/javascript/index.html new file mode 100644 index 0000000000..9c99dab71c --- /dev/null +++ b/files/ar/web/javascript/index.html @@ -0,0 +1,121 @@ +--- +title: جافاسكربت +slug: Web/JavaScript +tags: + - جافاسكربت + - صفحة هبوط +translation_of: Web/JavaScript +--- +

{{JsSidebar}}

+ +

جافاسكربت (JavaScript®) (إختصاراً JS) هي لغة برمجة خفيفة، مُفسرة، وشيئيّة ذات دوال من الدرجة الأولى، وهي مشهورة خصوصاً بكونها لغة البرمجة النصيّة لصفحات الويب، لكنها تستعمل في بيئات أخرى غير المتصفحات مثل node.js أو Apache CouchDB. فهي لغة برمجة نصيّة ديناميكيّة مبنية على النماذج و متعددة النماذج، وهي تدعم نمطي البرمجة الحتمي (imperative) الوظيفي (functional). اقرأ المزيد عن جافا سكربت.

+ +

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

+ +

يسمى معيار الجافا سكربت ECMAScript. بدءً من عام 2012، جميع المتصفحات الحديثة تدعم بشكل كامل ECMAScript 5.1. المتصفحات القديمة تدعم على الأقل ECMAScript 3. في 17 يونيو 2015، تم نشر النسخة الرئيسيّة السادسة من ECMAScript. ويسمى هذا الإصدار رسمياً ECMAScript 2015، ولكن يشار إليه عادةً باسم ECMAScript 6 أو ES6. تشير هذه الوثائق إلى الإصدار الأحدث من اللغة، والذي هو ECMAScript 2018.

+ +

لا ينبغي الخلط بين الجافاسكربت ولغة البرمجة جافا. يعد كلاً من الأسمين "جافا" و "جافاسكربت" علامات تجاريّة مُسجلة لشركة أوراكل في الولايات المتحدة الأمريكيّة وغيرها من البلدان. كلتا اللغتين تملكان بنيّة كتابيّة مختلفة، ودلالة مختلفة، وكذلك استخدامات مختلفة.

+ +
+
+

دورات

+ +

تعلم البرمجة باستخدام الجافاسكربت من خلال الدورات والدروس الإرشاديّة التالية.

+ +

للمبتدئين

+ +

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

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

دليل لغة جافا سكربت

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

مقالات لذوي الخبرة المتوسطة

+ +
+
مقدمة إلى الكائنات
+
من المهم فهم البرمجة الشيئيّة في اللغة إذا أردت زيادة معرفتك والتمكن من كتابة شيفرة برمجيّة أكثر فعاليّة، من أجل ذلك قمنا بتوفير هذه الوحدة لك.
+
واجهات التصميم (جهة العميل) البرمجيّة
+
لن تستطيع العمل جيداً عند تطوير جهة المستخدم (client-side) باستخدام الجافاسكربت من دون تعلمك للواجهات البرمجيّة المتخصصة، فهي واجهات للتلاعب بأجزاء مختلفة من المُتصفِح ونظام التشغيل الذي يعمل عليه الموقع، أو حتى التلاعب بحقول بيانات مواقع أو خدمات أخرى. في هذه الوحدة سنستكشف ماهيّة هذه الواجهات، وكيف تستخدم بعض من أكثر تلك الواجهات شيوعاً والتي ستحتاجها غالباً في عملك.
+
+ +
+
نظرة عامة على الجافاسكربت
+
مقالة تقدم نظرة عامة للذين يظنون أنهم يعرفون الجافاسكربت.
+
+ +
+
هياكل بيانات الجافاسكربت
+
نظرة عامة على هياكل البيانات المتوفرة في اللغة.
+
عبارات المساواة والتطابق
+
توفر الجافاسكربت ثلاثة عمليات مساواة مختلفة: المساواة الصارمة باستخدام === والمساواة المتساهلة باستخدام == والدالة  {{jsxref("Global_Objects/Object/is", "Object.is()")}}.
+
+ +

مقالات متقدمة

+ +
+
الميراث وسلسلة النموذج الأولي
+
شرح الميراث القائم على النموذج الأولي الذي يساء فهمه على نطاق واسع.
+
الوضع الصارم
+
في الوضع الصارم (strict mode)، لا يمكنك استخدام أي متغيّر قبل تعريفه. فيعد الوضع الصارم البديل المحدود لـ ECMAScript 5، لأداء أسرع وأكثر سهولة في التنقيح.
+
مصفوفات الجافاسكربت المكتوبة
+
+
+
+
توفر مصفوفات الجافاسكربت المكتوبة (typed arrays) آلية للوصول إلى البيانات الثنائيّة.
+
+
+
+
إدارة الذاكرة
+
دورة حياة الذاكرة وجمع القمامة (garbage collection) في لغة الجافاسكربت.
+
نموذج التزامن وحلقة الحدث
+
تمتلك لغة الجافاسكربت نموذج تزامن قائم على مفهوم "حلقة الحدث (event loop)".
+
+
+ +
+

مرجع اللغة

+ +

تصفح مرجع لغة الجافاسكربت الشامل.

+ +
+
الكائنات القياسيّة
+
تعرف على الكائنات القياسيّة المبنيّة في اللغة {{jsxref("Array")}}، {{jsxref("Boolean")}}، {{jsxref("Date")}}، {{jsxref("Error")}}، {{jsxref("Function")}}، {{jsxref("JSON")}}، {{jsxref("Math")}}، {{jsxref("Number")}}، {{jsxref("Object")}}، {{jsxref("RegExp")}}، {{jsxref("String")}}، {{jsxref("Map")}}، {{jsxref("Set")}}، {{jsxref("WeakMap")}}، {{jsxref("WeakSet")}}، وغيرها الكثير.
+
التعابير والعمليات
+
تعلم المزيد حول وظيفة العمليات (operators) في الجافاسكربت {{jsxref("Operators/instanceof", "instanceof")}}، {{jsxref("Operators/typeof", "typeof")}}، {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}، وغيرها الكثير.
+
الدوال
+
تعلم كيفيّة العمل مع الدوال في لغة الجافاسكربت لتطوير برمجياتك.
+
+ +

أدوات ومراجع

+ +

أدوات مفيدة لكتابة وتنقيح شيفرات الجافاسكربت.

+ +
+
أدوات مطورين فايرفوكس
+
أداة Scratchpad ،Web Console ،JavaScript Profiler ،Debugger، وغيرها الكثير.
+
صدفات الجافاسكربت
+
تسمح لك هذه الصدفات (shells) بالتجريب السريع لشيفرات الجافاسكربت.
+
أداة TogetherJS
+
التعاون يجعل الأمر سهلاً. بإضافة هذه الأداة لموقعك، سيتمكن المستخدمون من مساعدة بعضهم البعض على موقعك بشكل حي!
+
موقع Stack Overflow
+
الأسئلة الموسومة بالوسم "JavaScript" الموجودة على موقع Stack Overflow.
+
ملاحظات إصدار الجافاسكربت
+
تصفح سجل ميزات الجافاسكربت وحالة التقدم في التطوير.
+
أداة JSFiddle
+
قم بتعديل شيفرات الجافاسكربت، ولغة ترميز النص الفائق، وصفحات الأنماط الانسيابية واحصل على النتائج بشكل حي. استخدم موارد خارجيّة وتعاون مع أفراد فريقك على الأنترنت.
+
أداة Plunker
+
مجتمع على الإنترنت لإنشاء، والتعاون، ومشاركة أفكار تطوير الويب. قم بتعديل ملفات الجافاسكربت وغيرها من الملفات واحصل على النتائج بشكل حي.
+
+
+
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 new file mode 100644 index 0000000000..eab6c1edec --- /dev/null +++ b/files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html @@ -0,0 +1,423 @@ +--- +title: مدخل إلى جافاسكريبت كائنية التوجه +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +tags: + - الأفراد + - البرمجة الكائنية + - التغليف + - الجافاسكريبت + - المتوسط + - المجال + - المشيد + - ب.ك.ت + - كائن +translation_of: Learn/JavaScript/Objects +--- +
{{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/web/javascript/reference/classes/constructor/index.html b/files/ar/web/javascript/reference/classes/constructor/index.html new file mode 100644 index 0000000000..135948c80b --- /dev/null +++ b/files/ar/web/javascript/reference/classes/constructor/index.html @@ -0,0 +1,132 @@ +--- +title: المنشئ (constructor) +slug: Web/JavaScript/Reference/Classes/constructor +tags: + - جافاسكريبت +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +
{{jsSidebar("Classes")}}
+ +

الـ constructor  هي ميثود خاصة لإنشاء وتهيئة الاوبجكت(كائن) داخل (فئة)class.

+ +
{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}
+ + + +

بناء الجملة

+ +
constructor([arguments]) { ... }
+ +

الوصف

+ +

يمكننا إستخدام تلك الميثود لمرة واحده فقط ، وفي حال إستخدمنا constructor ﻷكثر من مرة في نفس الفئة الـ class سيحدث {{jsxref("SyntaxError")}} إيرور .

+ +

A constructor can use the super keyword to call the constructor of a parent class.

+ +

إذا لم تحدد ميثود إنشاء سيتم تحديد منشئ بشكل تلقائي.

+ +


+ If you do not specify a constructor method, a default constructor is used.

+ +

أمثلة

+ +

إٍستخدام الميثود (اسلوب) الـconstructor

+ +

ذلك الكود تم أخذه ولصقة من classes sample (live demo)

+ +
class Square extends Polygon {
+  constructor(length) {
+    // Here, it calls the parent class' constructor with lengths
+    // provided for the Polygon's width and height
+    super(length, length);
+    // Note: In derived classes, super() must be called before you
+    // can use 'this'. Leaving this out will cause a reference error.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}
+ +

مثال آخر

+ +

إنظر إلى ذلك الكود

+ +
class Polygon {
+    constructor() {
+        this.name = "Polygon";
+    }
+}
+
+class Square extends Polygon {
+    constructor() {
+        super();
+    }
+}
+
+class Rectangle {}
+
+Object.setPrototypeOf(Square.prototype, Rectangle.prototype);
+
+console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false
+console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true
+
+let newInstance = new Square();
+console.log(newInstance.name); //Polygon
+ +

هنا البروتوتيب فئة الـ Square تغيرت ولكن الكونستركتور (المنشئ) مبني على فئة الـPolygon والتي تطلب عندما نقوم بإنشاء حالة مماثلة للـ Square مرة أخرى

+ +

الإنشاء الإفتراضي

+ +

ذكرنا سابقا أنه في حال عدم تحديدك لكونستركتور (منشئ) سيتم تحديد الكونستركتور بشكل إفتراضي ، وبالنسبة للكلاسز (الفئات) الاولية يكون الكونستركتور الخاص بها كما يلي :-

+ +
constructor() {}
+
+ +

أما الفئات المشتقة فتكون بالشكل التالي

+ +
constructor(...args) {
+  super(...args);
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ESDraft')}} 
+ +

دعم المتصفحات

+ + + +

{{Compat("javascript.classes.constructor")}}

+ +

أنظر أيضا

+ + diff --git a/files/ar/web/javascript/reference/classes/index.html b/files/ar/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..d6f0143148 --- /dev/null +++ b/files/ar/web/javascript/reference/classes/index.html @@ -0,0 +1,380 @@ +--- +title: Classes +slug: Web/JavaScript/Reference/Classes +tags: + - Classes + - Constructors + - ECMAScript 2015 + - Inheritance + - Intermediate + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Classes +--- +
{{JsSidebar("Classes")}}
+ +

JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.

+ +

Defining classes

+ +

Classes are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.

+ +

Class declarations

+ +

One way to define a class is using a class declaration. To declare a class, you use the class keyword with the name of the class ("Rectangle" here).

+ +
class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+ +

Hoisting

+ +

An important difference between function declarations and class declarations is that function declarations are {{Glossary("Hoisting", "hoisted")}} and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw a {{jsxref("ReferenceError")}}:

+ +
var p = new Rectangle(); // ReferenceError
+
+class Rectangle {}
+
+ +

Class expressions

+ +

A class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body. (it can be retrieved through the class's (not an instance's) .name property, though)

+ +
// unnamed
+var Rectangle = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// output: "Rectangle"
+
+// named
+var Rectangle = class Rectangle2 {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// output: "Rectangle2"
+
+ +

Note: Class expressions also suffer from the same hoisting issues mentioned for Class declarations.

+ +

Class body and method definitions

+ +

The body of a class is the part that is in curly brackets {}. This is where you define class members, such as methods or constructor.

+ +

Strict mode

+ +

The bodies of class declarations and class expressions are executed in strict mode i.e. constructor, static and prototype methods, getter and setter functions are executed in strict mode.

+ +

Constructor

+ +

The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name "constructor" in a class. A {{jsxref("SyntaxError")}} will be thrown if the class contains more than one occurrence of a constructor method.

+ +

A constructor can use the super keyword to call the constructor of the super class.

+ +

Prototype methods

+ +

See also method definitions.

+ +
class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+  // Getter
+  get area() {
+    return this.calcArea();
+  }
+  // Method
+  calcArea() {
+    return this.height * this.width;
+  }
+}
+
+const square = new Rectangle(10, 10);
+
+console.log(square.area); // 100
+ +

Static methods

+ +

The static keyword defines a static method for a class. Static methods are called without instantiating their class and cannot be called through a class instance. Static methods are often used to create utility functions for an application.

+ +
class Point {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  static distance(a, b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+
+    return Math.hypot(dx, dy);
+  }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+
+console.log(Point.distance(p1, p2)); // 7.0710678118654755
+ +

Boxing with prototype and static methods

+ +

When a static or prototype method is called without a value for this, the this value will be undefined inside the method. This behavior will be the same even if the "use strict" directive isn't present, because code within the class syntax is always executed in strict mode.

+ +
class Animal {
+  speak() {
+    return this;
+  }
+  static eat() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+obj.speak(); // Animal {}
+let speak = obj.speak;
+speak(); // undefined
+
+Animal.eat() // class Animal
+let eat = Animal.eat;
+eat(); // undefined
+ +

If the above is written using traditional function–based syntax, then autoboxing in method calls will happen in non–strict mode based on the initial this value. If the inital value is undefined, this will be set to the global object.

+ +

Autoboxing will not happen in strict mode, the this value remains as passed.

+ +
function Animal() { }
+
+Animal.prototype.speak = function() {
+  return this;
+}
+
+Animal.eat = function() {
+  return this;
+}
+
+let obj = new Animal();
+let speak = obj.speak;
+speak(); // global object
+
+let eat = Animal.eat;
+eat(); // global object
+
+ +

Instance properties

+ +

Instance properties must be defined inside of class methods:

+ +
class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+ +

Static class-side properties and prototype data properties must be defined outside of the ClassBody declaration:

+ +
Rectangle.staticWidth = 20;
+Rectangle.prototype.prototypeWidth = 25;
+
+ +

 

+ +

Sub classing with extends

+ +

The extends keyword is used in class declarations or class expressions to create a class as a child of another class.

+ +
class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(this.name + ' barks.');
+  }
+}
+
+var d = new Dog('Mitzie');
+d.speak(); // Mitzie barks.
+
+ +

If there is a constructor present in subclass, it needs to first call super() before using "this".

+ +

One may also extend traditional function-based "classes":

+ +
function Animal (name) {
+  this.name = name;
+}
+
+Animal.prototype.speak = function () {
+  console.log(this.name + ' makes a noise.');
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(this.name + ' barks.');
+  }
+}
+
+var d = new Dog('Mitzie');
+d.speak(); // Mitzie barks.
+
+ +

Note that classes cannot extend regular (non-constructible) objects. If you want to inherit from a regular object, you can instead use {{jsxref("Object.setPrototypeOf()")}}:

+ +
var Animal = {
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+};
+
+class Dog {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// If you do not do this you will get a TypeError when you invoke speak
+Object.setPrototypeOf(Dog.prototype, Animal);
+
+var d = new Dog('Mitzie');
+d.speak(); // Mitzie makes a noise.
+
+ +

Species

+ +

You might want to return {{jsxref("Array")}} objects in your derived array class MyArray. The species pattern lets you override default constructors.

+ +

For example, when using methods such as {{jsxref("Array.map", "map()")}} that returns the default constructor, you want these methods to return a parent Array object, instead of the MyArray object. The {{jsxref("Symbol.species")}} symbol lets you do this:

+ +
class MyArray extends Array {
+  // Overwrite species to the parent Array constructor
+  static get [Symbol.species]() { return Array; }
+}
+
+var a = new MyArray(1,2,3);
+var mapped = a.map(x => x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true
+
+ +

Super class calls with super

+ +

The super keyword is used to call corresponding methods of super class.

+ +
class Cat {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Lion extends Cat {
+  speak() {
+    super.speak();
+    console.log(this.name + ' roars.');
+  }
+}
+
+var l = new Lion('Fuzzy');
+l.speak();
+// Fuzzy makes a noise.
+// Fuzzy roars.
+
+
+ +

Mix-ins

+ +

Abstract subclasses or mix-ins are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.

+ +

A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:

+ +
var calculatorMixin = Base => class extends Base {
+  calc() { }
+};
+
+var randomizerMixin = Base => class extends Base {
+  randomize() { }
+};
+
+ +

A class that uses these mix-ins can then be written like this:

+ +
class Foo { }
+class Bar extends calculatorMixin(randomizerMixin(Foo)) { }
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2016')}} 
{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2017')}} 
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ + + +

{{Compat("javascript.classes")}}

+ +

Running in Scratchpad

+ +

A class can't be redefined. If you're playing with code in Scratchpad (Firefox menu Tools > Web Developer > Scratchpad) and you 'Run' a definition of a class with the same name twice, you'll get a confusing SyntaxError: redeclaration of let <class-name>.

+ +

To re-run a definition, use Scratchpad's menu Execute > Reload and Run.
+ Please vote for bug #1428672.

+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/errors/index.html b/files/ar/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..c295fccea6 --- /dev/null +++ b/files/ar/web/javascript/reference/errors/index.html @@ -0,0 +1,31 @@ +--- +title: JavaScript error reference +slug: Web/JavaScript/Reference/Errors +tags: + - Debugging + - Error + - Errors + - Exception + - JavaScript + - NeedsTranslation + - TopicStub + - exceptions +translation_of: Web/JavaScript/Reference/Errors +--- +

{{jsSidebar("Errors")}}

+ +

Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the {{jsxref("Error")}} object, and has a name and a message.

+ +

Errors displayed in the Web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code.

+ +

List of errors

+ +

In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!

+ +

{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}

+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/errors/unexpected_type/index.html b/files/ar/web/javascript/reference/errors/unexpected_type/index.html new file mode 100644 index 0000000000..085dc8a167 --- /dev/null +++ b/files/ar/web/javascript/reference/errors/unexpected_type/index.html @@ -0,0 +1,68 @@ +--- +title: 'TypeError: "x" is (not) "y"' +slug: Web/JavaScript/Reference/Errors/Unexpected_type +tags: + - الأخطاء + - جافاسكربت + - نوع الخطأ +translation_of: Web/JavaScript/Reference/Errors/Unexpected_type +--- +
{{jsSidebar("Errors")}}
+ +

الرسالة

+ +
TypeError: Unable to get property {x} of undefined or null reference (Edge)
+TypeError: "x" is (not) "y" (Firefox)
+
+Examples:
+TypeError: "x" is undefined
+TypeError: "x" is null
+TypeError: "undefined" is not an object
+TypeError: "x" is not an object or null
+TypeError: "x" is not a symbol
+
+ +

نوع الخطأ

+ +

{{jsxref("TypeError")}}.

+ +

 ماذا حصل؟

+ +

خطأ غير متوقع، يحدث كثيرا مع {{jsxref("undefined")}} أو قيم {{jsxref("null")}} .

+ +

أيضا في بعض الوضائف مثل {{jsxref("Object.create()")}} أو {{jsxref("Symbol.keyFor()")}}, تحتاج تقديد أنواع محددة.

+ +

أمثلة

+ +

حالات غير صحيحة

+ +
// undefined and null cases on which the substring method won't work
+var foo = undefined;
+foo.substring(1); // TypeError: foo is undefined
+
+var foo = null;
+foo.substring(1); // TypeError: foo is null
+
+
+// Certain methods might require a specific type
+var foo = {}
+Symbol.keyFor(foo); // TypeError: foo is not a symbol
+
+var foo = 'bar'
+Object.create(foo); // TypeError: "foo" is not an object or null
+
+ +

حل المشكلة

+ +

لإصلاح مؤشر null إلى قيم undefined أو null ، يمكنك استخدام عامل التشغيل typeof ، على سبيل المثال.

+ +
if (typeof foo !== 'undefined') {
+  // الآن نعلم أن القيمة المدخلة غير محددة، نستطيع القيام بأي إجراء بدون خطأ.
+}
+ +

شاهد أيضاً

+ + diff --git a/files/ar/web/javascript/reference/global_objects/array/index.html b/files/ar/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..1e00adcf73 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,481 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +
{{JSRef}}
+ +
كائن Array في جافاسكربت  هو كائن عام، يستخدم في إنشاء المصفوفات، وهي تشبه قائمة من الكائنات عالية المستوى.
+ +
 
+ +

إنشاء مصفوفة

+ +
var fruits = ["Apple", "Banana"];
+
+console.log(fruits.length);
+// 2
+
+ +

الوصول إلى عنصر محدد في المصفوفة

+ +
var first = fruits[0];
+// Apple
+
+var last = fruits[fruits.length - 1];
+// Banana
+
+ +

تنفيذ حلقة تكرار على مصفوفة

+ +
fruits.forEach(function (item, index, array) {
+  console.log(item, index);
+});
+// Apple 0
+// Banana 1
+
+ +

إلحاق عنصر بآخر المصفوفة

+ +
var newLength = fruits.push("Orange");
+// ["Apple", "Banana", "Orange"]
+
+ +

حذف عنصر من نهاية المصفوفة

+ +
var last = fruits.pop(); // remove Orange (from the end)
+// ["Apple", "Banana"];
+
+ +

حذف عنصر من بداية المصفوفة

+ +
var first = fruits.shift(); // remove Apple from the front
+// ["Banana"];
+
+ +

إضافة عنصر إلى بداية المصفوفة

+ +
var newLength = fruits.unshift("Strawberry") // add to the front
+// ["Strawberry", "Banana"];
+
+ +

الوصول إلى ترتيب عنصر معينة في المصفوفة

+ +
fruits.push("Mango");
+// ["Strawberry", "Banana", "Mango"]
+
+var pos = fruits.indexOf("Banana");
+// 1
+
+ +

حذف عنصر عن طريق ترتيبه في المصفوفة

+ +
var removedItem = fruits.splice(pos, 1); // this is how to remove an item
+// ["Strawberry", "Mango"]
+
+ +

نسخة مصفوفة

+ +
var shallowCopy = fruits.slice(); // this is how to make a copy
+// ["Strawberry", "Mango"]
+
+ +

Syntax

+ +
[element0, element1, ..., elementN]
+new Array(element0, element1[, ...[, elementN]])
+new Array(arrayLength)
+ +

Parameters

+ +
+
elementN
+
A JavaScript array is initialized with the given elements, except in the case where a single argument is passed to the Array constructor and that argument is a number (see the arrayLength parameter below).Note that this special case only applies to JavaScript arrays created with the Array constructor, not array literals created with the bracket syntax.
+
arrayLength
+
If the only argument passed to the Array constructor is an integer between 0 and 232-1 (inclusive), this returns a new JavaScript array with length set to that number. If the argument is any other number, a {{jsxref("RangeError")}} exception is thrown.
+
+ +

الوصف

+ +

Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.

+ +

Some people think that you shouldn't use an array as an associative array. In any case, you can use plain {{jsxref("Global_Objects/Object", "objects")}} instead, although doing so comes with its own caveats. See the post Lightweight JavaScript dictionaries with arbitrary keys as an example.

+ +

الوصول إلى عناصر المصفوفة

+ +

JavaScript arrays are zero-indexed: the first element of an array is at index 0, and the last element is at the index equal to the value of the array's {{jsxref("Array.length", "length")}} property minus 1.

+ +
var arr = ['this is the first element', 'this is the second element'];
+console.log(arr[0]);              // logs 'this is the first element'
+console.log(arr[1]);              // logs 'this is the second element'
+console.log(arr[arr.length - 1]); // logs 'this is the second element'
+
+ +

Array elements are object properties in the same way that toString is a property, but trying to access an element of an array as follows throws a syntax error, because the property name is not valid:

+ +
console.log(arr.0); // a syntax error
+
+ +

There is nothing special about JavaScript arrays and the properties that cause this. JavaScript properties that begin with a digit cannot be referenced with dot notation; and must be accessed using bracket notation. For example, if you had an object with a property named '3d', it can only be referenced using bracket notation. E.g.:

+ +
var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
+console.log(years.0);   // a syntax error
+console.log(years[0]);  // works properly
+
+ +
renderer.3d.setTexture(model, 'character.png');     // a syntax error
+renderer['3d'].setTexture(model, 'character.png');  // works properly
+
+ +

Note that in the 3d example, '3d' had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., years['2'] instead of years[2]), although it's not necessary. The 2 in years[2] is coerced into a string by the JavaScript engine through an implicit toString conversion. It is for this reason that '2' and '02' would refer to two different slots on the years object and the following example could be true:

+ +
console.log(years['2'] != years['02']);
+
+ +

Similarly, object properties which happen to be reserved words(!) can only be accessed as string literals in bracket notation(but it can be accessed by dot notation in firefox 40.0a2 at least):

+ +
var promise = {
+  'var'  : 'text',
+  'array': [1, 2, 3, 4]
+};
+
+console.log(promise['array']);
+
+ +

Relationship between length and numerical properties

+ +

A JavaScript array's {{jsxref("Array.length", "length")}} property and numerical properties are connected. Several of the built-in array methods (e.g., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, etc.) take into account the value of an array's {{jsxref("Array.length", "length")}} property when they're called. Other methods (e.g., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, etc.) also result in updates to an array's {{jsxref("Array.length", "length")}} property.

+ +
var fruits = [];
+fruits.push('banana', 'apple', 'peach');
+
+console.log(fruits.length); // 3
+
+ +

When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's {{jsxref("Array.length", "length")}} property accordingly:

+ +
fruits[5] = 'mango';
+console.log(fruits[5]); // 'mango'
+console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
+console.log(fruits.length); // 6
+
+ +

Increasing the {{jsxref("Array.length", "length")}}.

+ +
fruits.length = 10;
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 10
+
+ +

Decreasing the {{jsxref("Array.length", "length")}} property does, however, delete elements.

+ +
fruits.length = 2;
+console.log(Object.keys(fruits)); // ['0', '1']
+console.log(fruits.length); // 2
+
+ +

This is explained further on the {{jsxref("Array.length")}} page.

+ +

Creating an array using the result of a match

+ +

The result of a match between a regular expression and a string can create a JavaScript array. This array has properties and elements which provide information about the match. Such an array is returned by {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. To help explain these properties and elements, look at the following example and then refer to the table below:

+ +
// Match one d followed by one or more b's followed by one d
+// Remember matched b's and the following d
+// Ignore case
+
+var myRe = /d(b+)(d)/i;
+var myArray = myRe.exec('cdbBdbsbz');
+
+ +

The properties and elements returned from this match are as follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Property/ElementDescriptionExample
inputA read-only property that reflects the original string against which the regular expression was matched.cdbBdbsbz
indexA read-only property that is the zero-based index of the match in the string.1
[0]A read-only element that specifies the last matched characters.dbBd
[1], ...[n]Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.[1]: bB
+ [2]: d
+ +

الخصائص

+ +
+
Array.length
+
The Array constructor's length property whose value is 1.
+
{{jsxref("Array.@@species", "get Array[@@species]")}}
+
The constructor function that is used to create derived objects.
+
{{jsxref("Array.prototype")}}
+
Allows the addition of properties to all array objects.
+
+ +

الدوال

+ +
+
{{jsxref("Array.from()")}}
+
Creates a new Array instance from an array-like or iterable object.
+
{{jsxref("Array.isArray()")}}
+
Returns true if a variable is an array, if not false.
+
{{jsxref("Array.of()")}}
+
Creates a new Array instance with a variable number of arguments, regardless of number or type of the arguments.
+
+ +

Array instances

+ +

All Array instances inherit from {{jsxref("Array.prototype")}}. The prototype object of the Array constructor can be modified to affect all Array instances.

+ +

الخصائص

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}
+ +

الدوال

+ +

Mutator methods

+ +
{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}
+ +

Accessor methods

+ +
{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}
+ +

Iteration methods

+ +
{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}
+ +

Array generic methods

+ +
+

Array generics are non-standard, deprecated and will get removed near future. Note that you can not rely on them cross-browser. However, there is a shim available on GitHub.

+
+ +

Sometimes you would like to apply array methods to strings or other array-like objects (such as function {{jsxref("Functions/arguments", "arguments", "", 1)}}). By doing this, you treat a string as an array of characters (or otherwise treat a non-array as an array). For example, in order to check that every character in the variable str is a letter, you would write:

+ +
function isLetter(character) {
+  return character >= 'a' && character <= 'z';
+}
+
+if (Array.prototype.every.call(str, isLetter)) {
+  console.log("The string '" + str + "' contains only letters!");
+}
+
+ +

This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:

+ +
if (Array.every(str, isLetter)) {
+  console.log("The string '" + str + "' contains only letters!");
+}
+
+ +

{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("String")}}.

+ +

These are not part of ECMAScript standards (though the ES6 {{jsxref("Array.from()")}} can be used to achieve this). The following is a shim to allow its use in all browsers:

+ +
// Assumes Array extras already present (one may use polyfills for these as well)
+(function() {
+  'use strict';
+
+  var i,
+    // We could also build the array of methods with the following, but the
+    //   getOwnPropertyNames() method is non-shimable:
+    // Object.getOwnPropertyNames(Array).filter(function(methodName) {
+    //   return typeof Array[methodName] === 'function'
+    // });
+    methods = [
+      'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
+      'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
+      'forEach', 'map', 'reduce', 'reduceRight', 'filter',
+      'some', 'every', 'find', 'findIndex', 'entries', 'keys',
+      'values', 'copyWithin', 'includes'
+    ],
+    methodCount = methods.length,
+    assignArrayGeneric = function(methodName) {
+      if (!Array[methodName]) {
+        var method = Array.prototype[methodName];
+        if (typeof method === 'function') {
+          Array[methodName] = function() {
+            return method.call.apply(method, arguments);
+          };
+        }
+      }
+    };
+
+  for (i = 0; i < methodCount; i++) {
+    assignArrayGeneric(methods[i]);
+  }
+}());
+
+ +

أمثلة

+ +

إنشاء مصفوفة

+ +

The following example creates an array, msgArray, with a length of 0, then assigns values to msgArray[0] and msgArray[99], changing the length of the array to 100.

+ +
var msgArray = [];
+msgArray[0] = 'Hello';
+msgArray[99] = 'world';
+
+if (msgArray.length === 100) {
+  console.log('The length is 100.');
+}
+
+ +

إنشاء مصفوفة ذات بعدين

+ +

The following creates a chess board as a two dimensional array of strings. The first move is made by copying the 'p' in (6,4) to (4,4). The old position (6,4) is made blank.

+ +
var board = [
+  ['R','N','B','Q','K','B','N','R'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['r','n','b','q','k','b','n','r'] ];
+
+console.log(board.join('\n') + '\n\n');
+
+// Move King's Pawn forward 2
+board[4][4] = board[6][4];
+board[6][4] = ' ';
+console.log(board.join('\n'));
+
+ +

هذه هي النتيجة (الخرج):

+ +
R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+r,n,b,q,k,b,n,r
+
+R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+r,n,b,q,k,b,n,r
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.4', 'Array')}}{{Spec2('ES5.1')}}New methods added: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}
{{SpecName('ES6', '#sec-array-objects', 'Array')}}{{Spec2('ES6')}}New methods added: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}
{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}{{Spec2('ESDraft')}}New method added: {{jsxref("Array.prototype.includes()")}}
+ +

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

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

إقرأ أيضا

+ + diff --git a/files/ar/web/javascript/reference/global_objects/array/isarray/index.html b/files/ar/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..f78eb1574d --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,146 @@ +--- +title: ()Array.isArray +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +
{{JSRef}}
+ +

()Array.isArray تفحص القيمة التي تم تمريرها هل هي {{jsxref("Array")}} أم ﻻ.

+ +

بنية الجملة

+ +
Array.isArray(value)
+ +

المعلمات

+ +
+
value
+
القيمة التي سيتم فحصها.
+
+ +

القيمة العائدة

+ +

تكون القيمة العائدة true إذا كانت {{jsxref("Array")}}؛ وتكون false إذا كانت غير ذلك.

+ +

الوصف

+ +

إذا كانت القيمة {{jsxref("Array")}}, true ستكون القيمة العائدة؛ غير ذلك ستكون false.

+ +

لمزيد من التفاصيل، راجع هذا المقال “Determining with absolute accuracy whether or not a JavaScript object is an array” .

+ +

أمثلة

+ +
//true جميع الأمثلة التالية ترجع
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+//هي نفسها مصفوفة Array.prototype حقيقة معروفة أن
+Array.isArray(Array.prototype);
+
+//false جميع الأمثلة التالية ترجع
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray('Array');
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray({ __proto__: Array.prototype });
+
+ +

Polyfill

+ +

Running the following code before any other code will create Array.isArray() if it's not natively available.

+ +
if (!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+
+ +

المواصفات

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}{{Spec2('ES5.1')}}Initial definition. Implemented in JavaScript 1.8.5.
{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ESDraft')}}
+ +

التكامل مع المتصفحات

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("5")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("9")}}{{CompatOpera("10.5")}}{{CompatSafari("5")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

إقرأ أيضا

+ + diff --git a/files/ar/web/javascript/reference/global_objects/array/join/index.html b/files/ar/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..427509f1ec --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,143 @@ +--- +title: ()Array.prototype.join +slug: Web/JavaScript/Reference/Global_Objects/Array/join +tags: + - Prototype + - جافاسكربت + - دالة + - دمج Array + - دمج المصفوفات + - مرجع +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +
{{JSRef}}
+ +

دالة ()join تقوم بدمج جميع عناصر المصفوفة في نص واحد.

+ +
var a = ['Wind', 'Rain', 'Fire'];
+a.join();    // 'Wind,Rain,Fire'
+a.join('-'); // 'Wind-Rain-Fire'
+ +

صيغة الكتابة

+ +
str = arr.join([separator = ','])
+ +

المعاملات

+ +
+
separator
+
اختياري. يحدد النص الذي سيقوم بفصل عناصر المصفوفة عن بعضهم البعض. الـ separator سيتحول إلى جزء من النص الناتج. إذا لم يتم تمريره، سيتم الفصل بين عناصر المصفوفة بالـ comma. إذا كان الـseparator عبارة عن نص فارغ، سيتم ضم عناصر المصفوفة دون أي فاصل
+
+ +

القيمة العائدة

+ +

عناصر المصفوفة مضمومين في هيئة نص.

+ +

الوصف

+ +

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

+ +

أمثلة

+ +

ضم عناصر المصفوفة بأربعة طرق مختلفة

+ +

المثال التالي يقوم بإنشاء مصفوفة a ، بها ثلاثة عناصر، ثم يقوم بضم هذه العناصر الثلاثة، ثم يقوم بضم هذه العناصر الثلاثة إلى نص واحد بأربعة طرق: استخدام الـ separator الإفتراضي، ثم باستخدام الـ comma والمسافة، ثم باستخدام علامة الجمع وأخيرا باستخدام نص فارغ.

+ +
var a = ['Wind', 'Rain', 'Fire'];
+var myVar1 = a.join();      // myVar1 إلى 'Wind,Rain,Fire' تسند
+var myVar2 = a.join(', ');  // myVar2 إلى 'Wind, Rain, Fire' تسند
+var myVar3 = a.join(' + '); // myVar3 إلى 'Wind + Rain + Fire' تسند
+var myVar4 = a.join('');    // myVar4 إلى 'WindRainFire' تسند
+
+ +

المواصفات

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
الصفةالحالةتعليق
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ESDraft')}} 
+ +

التكامل مع المتصفحات

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

إقرأ أيضا

+ + diff --git a/files/ar/web/javascript/reference/global_objects/array/pop/index.html b/files/ar/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..247f45fc14 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,134 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +
{{JSRef}}
+   دالة pop() هي دالة تقوم بمسح أخر عنصر من المصفوفة وإرجاعه
+ +
 
+ +

Syntax

+ +
arr.pop()
+ +

قيمة الإرجاع

+ +

تعيد أخر عنصر من المصفوفة و تعيد {{jsxref("undefined")}}  في حال  كانت المصفوفة فارغة

+ +

وصف

+ +

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

+ +

pop is intentionally generic; this method can be {{jsxref("Function.call", "called", "", 1)}} or {{jsxref("Function.apply", "applied", "", 1)}} to objects resembling arrays. Objects which do not contain a length property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.

+ +

 في حالة استدعائك لدالة POP على مصفوفة فارغة فسيتم إرجاع  {{jsxref("undefined")}} 

+ +

أمثلة

+ +

إزالة العنصر الأخير من المصفوفة

+ +

التعليمة البرمجية التالية : تقوم بإنشاء مصفوفة(myFish )   تحتوي على أربعة  عناصر ثم تقوم بمسح أخر عنصر   

+ +
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+
+console.log(myFish); // ['angel', 'clown', 'mandarin', 'sturgeon']
+
+var popped = myFish.pop();
+
+console.log(myFish); // ['angel', 'clown', 'mandarin' ]
+
+console.log(popped); // 'sturgeon'
+ +

مواصفات

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
مواصفاتالحالةتعليق
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/global_objects/array/reverse/index.html b/files/ar/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..b179e52bc1 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,124 @@ +--- +title: ()Array.prototype.reverse +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +
{{JSRef}}
+ +

دالة الـ ()reverse تقوم بعكس ترتيبا عناصر المصفوفة مكانيا، بحيث يصبح العنصر الأول في المصفوفة في آخر المصفوفة، ويكون آخر عنصر فيها في أول المصفوفة.

+ +

صيغة الكتابة

+ +
arr.reverse()
+ +

القيمة العائدة

+ +

المصفوفة المعكوسة.

+ +

الوصف

+ +

The reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array.

+ +

أمثلة

+ +

عكس العناصر في مصفوفة

+ +

المثال التالي يقوم بإنشاء مصفوفة myArray تحتوي على ثلاثة عناصر، ثم يوم بعكس المصفوفة.

+ +
var myArray = ['one', 'two', 'three'];
+myArray.reverse();
+
+console.log(myArray) // ['three', 'two', 'one']
+
+ +

المواصفات

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
المواصفةالحالةتعليق
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}{{Spec2('ESDraft')}} 
+ +

التكامل مع المتصفحات

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

إقرأ أيضا

+ + diff --git a/files/ar/web/javascript/reference/global_objects/array/slice/index.html b/files/ar/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..c0e4bde2c2 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,151 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +tags: + - المصفوفات + - جافا سكريبت +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +
{{JSRef}}
+ +

ال slice() method إرجاع نسخة ضئيلة من جزء من مصفوفة إلى object مصفوفة جديد تم تحديده من start إلى end (end غير مضمنة) بينما start و end تمثلان مؤشر العناصر في هذه المصفوفة. لن يتم تعديل المصفوفة الأصلية.

+ +
{{EmbedInteractiveExample("pages/js/array-slice.html")}}
+ + + +

تركيب الجملة

+ +
arr.slice([start[, end]])
+
+ +

المعاملات

+ +
+
start {{optional_inline}}
+
مؤشر ذو أساس صفري يبدأ فيه الاستخراج.
+
يمكن استخدام مؤشر سلبي يشير إلى إزاحة من نهاية التسلسل. slice(-2) يستخرج آخر عنصرين في التسلسل.
+
إذا كانت start غير محددة, تبدأslice من المؤشر 0.
+
إذا كانت start is أكبر من نطاق فهرس التسلسل ، يتم إرجاع صفيف فارغ.
+
end {{optional_inline}}
+
مؤشر ذو أساس صفري قبل أن ينتهي الاستخراج. slice مستخرجات إلى ولا تشمل end. على سبيل المثال, slice(1,4) يستخرج العنصر الثاني من خلال العنصر الرابع (العناصر المفهرسة 1 و 2 و 3).
+
يمكن استخدام مؤشر سلبي يشير إلى إزاحة من نهاية التسلسل. slice(2,-1) يستخرج العنصر الثالث من خلال العنصر الثاني إلى الأخير في التسلسل.
+
إذا تم حذف end, slice مستخرجات من خلال نهاية التسلسل(arr.length).
+
اذا كانت end أكبر من طول التسلسل,  فإنslice تستخرج حتى نهاية التسلسل(arr.length).
+
+ +

القيمة العائدة

+ +

مصفوفة جديدة تحتوي على العناصر المستخرجة.

+ +

الوصف

+ +

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

+ + + +

إذا تمت إضافة عنصر جديد إلى أي مصفوفة ، فلن تتأثر المصفوفة الآخرى.

+ +

أمثلة

+ +

إعادة جزء من من مصفوفة موجودة

+ +
let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
+let citrus = fruits.slice(1, 3)
+
+// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
+// citrus contains ['Orange','Lemon']
+
+ +

باستخدام slice

+ +

في المثال التالي, تقومslice بإنشاء مصفوفة جديدة newCar, من myCar. كلاهما يتضمن إشارة إلى الobject myHonda. عندما يتغير لون myHonda إلى الأرجواني, تعكس كلا المصفوفتان التغيير.

+ +
// Using slice, create newCar from myCar.
+let myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }
+let myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']
+let newCar = myCar.slice(0, 2)
+
+// Display the values of myCar, newCar, and the color of myHonda
+//  referenced from both arrays.
+console.log('myCar = ' + JSON.stringify(myCar))
+console.log('newCar = ' + JSON.stringify(newCar))
+console.log('myCar[0].color = ' + myCar[0].color)
+console.log('newCar[0].color = ' + newCar[0].color)
+
+// Change the color of myHonda.
+myHonda.color = 'purple'
+console.log('The new color of my Honda is ' + myHonda.color)
+
+// Display the color of myHonda referenced from both arrays.
+console.log('myCar[0].color = ' + myCar[0].color)
+console.log('newCar[0].color = ' + newCar[0].color)
+
+ +

This script writes:

+ +
myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
+         'cherry condition', 'purchased 1997']
+newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2]
+myCar[0].color = red
+newCar[0].color = red
+The new color of my Honda is purple
+myCar[0].color = purple
+newCar[0].color = purple
+
+ +

Array-like objects

+ +

slice method يمكن أيضًا استدعاؤها لتحويل  Array-like objects / مجموعات إلى مصفوفة جديدة. انت فقط {{jsxref("Function.prototype.bind", "bind")}} the method لل object. The {{jsxref("Functions/arguments", "arguments")}}داخل دالة هو مثال على 'array-like object'.

+ +
function list() {
+  return Array.prototype.slice.call(arguments)
+}
+
+let list1 = list(1, 2, 3) // [1, 2, 3]
+
+ +

البناء يمكن أن يتم ب {{jsxref("Function.prototype.call", "call()")}} method of {{jsxref("Function.prototype")}} ويمكن تقليلها باستخدام [].slice.call(arguments) بدلا منArray.prototype.slice.call.

+ +

على أي حال يمكن تبسيطها باستخدام {{jsxref("Function.prototype.bind", "bind")}}.

+ +
let unboundSlice = Array.prototype.slice
+let slice = Function.prototype.call.bind(unboundSlice)
+
+function list() {
+  return slice(arguments)
+}
+
+let list1 = list(1, 2, 3) // [1, 2, 3]
+ +

المواصفات

+ + + + + + + + + + + + +
مواصفات
{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}
+ +

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

+ + + +

{{Compat("javascript.builtins.Array.slice")}}

+ +

انظر أيضا

+ + diff --git a/files/ar/web/javascript/reference/global_objects/date/getdate/index.html b/files/ar/web/javascript/reference/global_objects/date/getdate/index.html new file mode 100644 index 0000000000..6a39d68196 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/date/getdate/index.html @@ -0,0 +1,85 @@ +--- +title: Date.prototype.getDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/getDate +tags: + - النموذج المبدئي + - تاريخ + - جافاسكربت + - طريقة + - مرجع +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate +--- +
{{JSRef}}
+ +

دالة getDate() تقوم بإرجاع يوم من تاريخ الشهر المحدد وفقاً للوقت المحلي.

+ +
{{EmbedInteractiveExample("pages/js/date-getdate.html")}}
+ + + +

بنية الجملة

+ +
dateObj.getDate()
+
+ +

القيمة العائدة

+ +

رقم صحيح ما بين 1 و31 يمثل يوم محدد من تاريخ الشهر المحدد وفقاً للوقت المحلي.

+ +

أمثلة

+ +

استخدام getDate()

+ +

البيان الثاني قام بتعيين قيمة المتغير day، علي أساس قيمة تاريخ المتغير Xmas95.

+ +
var Xmas95 = new Date('December 25, 1995 23:15:30');
+var day = Xmas95.getDate();
+
+console.log(day); // 25
+
+ +

الخصائص

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
+ +

دعم المتصفحات

+ + + +

{{Compat("javascript.builtins.Date.getDate")}}

+ +

اقرأ أيضًا

+ + diff --git a/files/ar/web/javascript/reference/global_objects/date/index.html b/files/ar/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..efaa40ce31 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,261 @@ +--- +title: Date | التاريخ +slug: Web/JavaScript/Reference/Global_Objects/Date +tags: + - Date + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +
{{JSRef}}
+ +

Creates a JavaScript Date instance that represents a single moment in time. Date objects are based on a time value that is the number of milliseconds since 1 January, 1970 UTC.

+ +

البنيه

+ +
new Date();
+new Date(value);
+new Date(dateString);
+new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);
+
+ +
+

Note: JavaScript Date objects can only be instantiated by calling JavaScript Date as a constructor: calling it as a regular function (i.e. without the {{jsxref("Operators/new", "new")}} operator) will return a string rather than a Date object; unlike other JavaScript object types, JavaScript Date objects have no literal syntax.

+
+ +

Parameters

+ +
+

Note: Where Date is called as a constructor with more than one argument, if values are greater than their logical range (e.g. 13 is provided as the month value or 70 for the minute value), the adjacent value will be adjusted. E.g. new Date(2013, 13, 1) is equivalent to new Date(2014, 1, 1), both create a date for 2014-02-01 (note that the month is 0-based). Similarly for other values: new Date(2013, 2, 1, 0, 70) is equivalent to new Date(2013, 2, 1, 1, 10) which both create a date for 2013-03-01T01:10:00.

+
+ +
+

Note: Where Date is called as a constructor with more than one argument, the specifed arguments represent local time. If UTC is desired, use new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}}) with the same arguments.

+
+ +
+
value
+
Integer value representing the number of milliseconds since 1 January 1970 00:00:00 UTC (Unix Epoch).
+
dateString
+
String value representing a date. The string should be in a format recognized by the {{jsxref("Date.parse()")}} method (IETF-compliant RFC 2822 timestamps and also a version of ISO8601). +
+

Note: parsing of date strings with the Date constructor (and Date.parse, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.

+
+
+
year
+
Integer value representing the year. Values from 0 to 99 map to the years 1900 to 1999. See the {{anch("Example:_Two_digit_years_map_to_1900_-_1999", "example below")}}.
+
month
+
Integer value representing the month, beginning with 0 for January to 11 for December.
+
day
+
Optional. Integer value representing the day of the month.
+
hour
+
Optional. Integer value representing the hour of the day.
+
minute
+
Optional. Integer value representing the minute segment of a time.
+
second
+
Optional. Integer value representing the second segment of a time.
+
millisecond
+
Optional. Integer value representing the millisecond segment of a time.
+
+ +

Description

+ + + +

Properties

+ +
+
{{jsxref("Date.prototype")}}
+
Allows the addition of properties to a JavaScript Date object.
+
Date.length
+
The value of Date.length is 7. This is the number of arguments handled by the constructor.
+
+ +

Methods

+ +
+
{{jsxref("Date.now()")}}
+
Returns the numeric value corresponding to the current time - the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC.
+
{{jsxref("Date.parse()")}}
+
Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00, UTC. +
+

Note: Parsing of strings with Date.parse is strongly discouraged due to browser differences and inconsistencies.

+
+
+
{{jsxref("Date.UTC()")}}
+
Accepts the same parameters as the longest form of the constructor (i.e. 2 to 7) and returns the number of milliseconds since 1 January, 1970, 00:00:00 UTC.
+
+ +

JavaScript Date instances

+ +

All Date instances inherit from {{jsxref("Date.prototype")}}. The prototype object of the Date constructor can be modified to affect all Date instances.

+ +

Date.prototype Methods

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}
+ +

Examples

+ +

Several ways to create a Date object

+ +

The following examples show several ways to create JavaScript dates:

+ +
+

Note: parsing of date strings with the Date constructor (and Date.parse, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.

+
+ +
var today = new Date();
+var birthday = new Date('December 17, 1995 03:24:00');
+var birthday = new Date('1995-12-17T03:24:00');
+var birthday = new Date(1995, 11, 17);
+var birthday = new Date(1995, 11, 17, 3, 24, 0);
+
+ +

Two digit years map to 1900 - 1999

+ +

In order to create and get dates between the years 0 and 99 the {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}} methods should be used.

+ +
var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+// Deprecated method, 98 maps to 1998 here as well
+date.setYear(98);           // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+date.setFullYear(98);       // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
+
+ +

Calculating elapsed time

+ +

The following examples show how to determine the elapsed time between two JavaScript dates in millisconds.

+ +

Due to the differing lengths of days (due to daylight saving changeover), months and years, expressing elapsed time in units greater than hours, minutes and seconds requires addressing a number of issues and should be thoroughly researched before being attempted.

+ +
// using Date objects
+var start = Date.now();
+
+// the event to time goes here:
+doSomethingForALongTime();
+var end = Date.now();
+var elapsed = end - start; // elapsed time in milliseconds
+
+ +
// using built-in methods
+var start = new Date();
+
+// the event to time goes here:
+doSomethingForALongTime();
+var end = new Date();
+var elapsed = end.getTime() - start.getTime(); // elapsed time in milliseconds
+
+ +
// to test a function and get back its return
+function printElapsedTime(fTest) {
+  var nStartTime = Date.now(),
+      vReturn = fTest(),
+      nEndTime = Date.now();
+
+  console.log('Elapsed time: ' + String(nEndTime - nStartTime) + ' milliseconds');
+  return vReturn;
+}
+
+yourFunctionReturn = printElapsedTime(yourFunction);
+
+ +
+

Note: In browsers that support the {{domxref("window.performance", "Web Performance API", "", 1)}}'s high-resolution time feature, {{domxref("Performance.now()")}} can provide more reliable and precise measurements of elapsed time than {{jsxref("Date.now()")}}.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-date-objects', 'Date')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-15.9', 'Date')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}} [2]{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Some browsers can have issues when parsing dates: 3/14/2012 blog from danvk Comparing FF/IE/Chrome on Parsing Date Strings

+ +

[2] ISO8601 Date Format is not supported in Internet Explorer 8, and other version can have issues when parsing dates

diff --git a/files/ar/web/javascript/reference/global_objects/date/now/index.html b/files/ar/web/javascript/reference/global_objects/date/now/index.html new file mode 100644 index 0000000000..ff6379db60 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/date/now/index.html @@ -0,0 +1,80 @@ +--- +title: Date.now() | دالة الوقت الآن +slug: Web/JavaScript/Reference/Global_Objects/Date/now +tags: + - Date + - التاريخ + - الوقت + - جافاسكربت + - دالة + - دليل + - طريقة بديلة + - مرجع +translation_of: Web/JavaScript/Reference/Global_Objects/Date/now +--- +
{{JSRef}}
+ +

تقوم دالة  Date.now() بعرض عدد الثواني التي مضت منذ بداية احتساب الوقت بطريقة Timestamp وهو الأول من يناير عام 1970 الساعة الثانية عشر منتصف الليل تمامًا (First of January 1970 00:00:00)  بتوقيت UTC.

+ +

بنية الجملة

+ +
var timeInMs = Date.now();
+ +

القيمة الراجعة

+ +

القيمة الراجعة من هذه الدالة ستكون عبارة عن رقم  {{jsxref("Number")}}، هذا الرقم يشير إلى عدد الثواني التي انقضت منذ بداية احتساب الوقت بطريقة TimeStamp بالأنظمة التي تستند إلى UNIX.

+ +

الوصف

+ +

لإن دالة  now() تقوم بإرجاع قيمة ثابتة من الوقت {{jsxref("Date")}} فيجب عليك استخدامها بهذا الشكل   Date.now() .

+ +

طريقة احتياطية (Polyfill)

+ +

تم اعتماد هذه الدالة  في  إصدار ECMA-262 5th المحركات التي لم يتم تحديثها لتدعم هذه الدالة يمكنها أن تحاكي دالة Date.now() عبر استخدام هذه الشيفرة البرمجية، هذه الشيفرة ستسمح للمتصفحات بأن تحاكي وظيفة هذه الدالة في حالة عدم دعمها لها :

+ +
if (!Date.now) { // إذا لم تكن الدالة موجودة
+  Date.now = function now() { // قم بإنشاء الدالة
+    return new Date().getTime(); // واربطها بالوقت الحالي
+  };
+}
+
+ +

الخصائص

+ + + + + + + + + + + + + + + + + + + + + + + + +
الخاصيةالحالةتعليقات
{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}{{Spec2('ES5.1')}}Initial definition. Implemented in JavaScript 1.5.
{{SpecName('ES6', '#sec-date.now', 'Date.now')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}{{Spec2('ESDraft')}} 
+ +

دعم المتصفحات

+ + + +

{{Compat("javascript.builtins.Date.now")}}

+ +

اقرأ أيضًا

+ + diff --git a/files/ar/web/javascript/reference/global_objects/date/parse/index.html b/files/ar/web/javascript/reference/global_objects/date/parse/index.html new file mode 100644 index 0000000000..133b751cd6 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/date/parse/index.html @@ -0,0 +1,182 @@ +--- +title: Date.parse() | دالة تحليل الوقت +slug: Web/JavaScript/Reference/Global_Objects/Date/parse +tags: + - Date + - التاريخ + - جافاسكربت + - طريقة + - مرجع +translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse +--- +
{{JSRef}}
+ +

تقوم دالة Date.parse() بتوزيع سلسلة من التاريخ، وإرجاع قيمتها إلي مللي ثانية من بداية تاريخ (1 يناير, 1970, 00:00:00 UTC) إلي التاريخ المحدد داخل الأقواس مثل Date.parse("التاريخ") أو NaN (ليس رقم) إذا كانت السلسلة غير معترف بها (غير صحيحة)، أو في بعض الحالات التي يكون فيها قيم التاريخ غير شرعية (مكتوبة بشكل خاطيء). علي سبيل المثال (2015-02-31).

+ +

It is not recommended to use Date.parse as until ES5, parsing of strings was entirely implementation dependent. There are still many differences in how different hosts parse date strings, therefore date strings should be manually parsed (a library can help if many different formats are to be accommodated).

+ +
{{EmbedInteractiveExample("pages/js/date-parse.html")}}
+ + + +

بنية الجملة

+ +

استدعاء مباشر:

+ +
Date.parse(dateString)
+ +

استدعاء ضمني:

+ +
new Date(dateString)
+ +

المعاملات

+ +
+
dateString
+
النص يمثل RFC2822 أو (a variant of) تاريخ ISO 8601 (قد يتم استخدام تنسيقات أخري، ولكن ربما قد تكون النتائج غير متوقعة).
+
+ +

القيمة الراجعة

+ +

A number representing the milliseconds elapsed since January 1, 1970, 00:00:00 UTC and the date obtained by parsing the given string representation of a date. If the argument doesn't represent a valid date, {{jsxref("NaN")}} is returned.

+ +

الوصف

+ +

تقوم دالة parse() بأخذ سلسلة التاريخ مثل ("Des 25, 1995") وتقوم بإرجاع القيمة إلي المللي ثانية منذ بداية احتساب الوقت وهو الأول من يناير عام 1970 الساعة الثانية عشر منتصف الليل تماماً (First of January 1970 00:00:00)  بتوقيت UTC، حتي الوقت التي قمت بتحديده. وهذه الدالة مفيدة لتعيين قيمة التاريخ استناداً الي قيمة السلسلة، علي سبيل المثال الدمج مع طريقة  {{jsxref("Date.prototype.setTime()", "setTime()")}} و {{jsxref("Global_Objects/Date", "Date")}} .

+ +

Given a string representing a time, parse() returns the time value. It accepts the RFC2822 / IETF date syntax (RFC2822 Section 3.3), e.g. "Mon, 25 Dec 1995 13:30:00 GMT". It understands the continental US time zone abbreviations, but for general use, use a time zone offset, for example, "Mon, 25 Dec 1995 13:30:00 +0430" (4 hours, 30 minutes east of the Greenwich meridian).

+ +

GMT and UTC are considered equivalent. The local time zone is used to interpret arguments in RFC2822 Section 3.3 format that do not contain time zone information.

+ +

Because of the variances in parsing of date strings, it is recommended to always manually parse strings as results are inconsistent, especially across different ECMAScript implementations where strings like "2015-10-12 12:00:00" may be parsed to as NaN, UTC or local timezone.

+ +

ECMAScript 5 دعم تنسيق ISO-8601

+ +

The date time string may be in a simplified ISO 8601 format. For example, "2011-10-10" (just date) or "2011-10-10T14:48:00" (date and time) can be passed and parsed. Where the string is ISO 8601 date only, the UTC time zone is used to interpret arguments. If the string is date and time in ISO 8601 format, it will be treated as local.

+ +

While time zone specifiers are used during date string parsing to interpret the argument, the value returned is always the number of milliseconds between January 1, 1970 00:00:00 UTC and the point in time represented by the argument or NaN.

+ +

Because parse() is a static method of {{jsxref("Date")}}, it is called as Date.parse() rather than as a method of a {{jsxref("Date")}} instance.

+ +

الاختلافات في المنطقة الزمنية المفترضة

+ +

Given a date string of "March 7, 2014", parse() assumes a local time zone, but given an ISO format such as "2014-03-07" it will assume a time zone of UTC (ES5 and ECMAScript 2015). Therefore {{jsxref("Date")}} objects produced using those strings may represent different moments in time depending on the version of ECMAScript supported unless the system is set with a local time zone of UTC. This means that two date strings that appear equivalent may result in two different values depending on the format of the string that is being converted.

+ +

Fall-back to implementation-specific date formats

+ +

The ECMAScript specification states: If the String does not conform to the standard format the function may fall back to any implementation–specific heuristics or implementation–specific parsing algorithm. Unrecognizable strings or dates containing illegal element values in ISO formatted strings shall cause Date.parse() to return {{jsxref("NaN")}}.

+ +

However, invalid values in date strings not recognized as simplified ISO format as defined by ECMA-262 may or may not result in {{jsxref("NaN")}}, depending on the browser and values provided, e.g.:

+ +
// سلسلة ليست أيزو مع قيم تاريخ صالحة
+new Date('23/25/2014');
+
+ +

will be treated as a local date of 25 November, 2015 in Firefox 30 and an invalid date in Safari 7. However, if the string is recognized as an ISO format string and it contains invalid values, it will return {{jsxref("NaN")}} in all browsers compliant with ES5 and later:

+ +
// سلسلة أيزو مع قيمة غير صالحة
+new Date('2014-25-23').toISOString();
+// يُعيد "RangeError: invalid date" في جميع المتصفحات المتوافقة مع es5
+
+ +

SpiderMonkey's implementation-specific heuristic can be found in jsdate.cpp. The string "10 06 2014" is an example of a non–conforming ISO format and thus falls back to a custom routine. See also this rough outline on how the parsing works.

+ +
new Date('10 06 2014');
+
+ +

will be treated as a local date of 6 October, 2014 and not 10 June, 2014. Other examples:

+ +
new Date('foo-bar 2014').toString();
+// يُعيد: "Invalid Date" *تاريخ غير صالح*
+
+Date.parse('foo-bar 2014');
+// يُعيد: NaN *ليس رقم*
+
+ +

أمثلة

+ +

استخدام Date.parse()

+ +

إذا كان IPOdate هو كائن {{jsxref("Date")}} موجود، فيمكن تعيينه إلي 9 أغسطس، 1995 (بالتوقيت المحلي) كما يلي:

+ +
IPOdate.setTime(Date.parse('Aug 9, 1995'));
+ +

بعض الأمثلة الأخرى على تحليل سلاسل التاريخ غير القياسية:

+ +
Date.parse('Aug 9, 1995');
+ +

يٌعيد 807937200000 في المنطقة الزمنية GMT-0300، ويٌعيد قيم أخري في المناطق الزمنية الأخري، حيث أن السلسلة لا تحدد المناطق الزمنية وهي ليست بتنسيق ISO، وبالتالي فإن المنطقة الزمنية الافتراضية بدون تنسيق ISO هي المنطقة الزمنية المحلية الخاصة بالدولة الموجود بها. وتختلف من دولة إلي آخري.

+ +
Date.parse('Wed, 09 Aug 1995 00:00:00 GMT');
+ +

يٌعيد 807926400000 بغض النظر عن المنطقة الزمنية المحلية مثل GMT (UTC).

+ +
Date.parse('Wed, 09 Aug 1995 00:00:00');
+
+ +

يٌعيد 807937200000 في المنطقة الزمنية GMT-0300، ويٌعيد قيم أخري في المناطق الزمنية الأخري، حيث أن السلسلة لا تحدد المناطق الزمنية وهي ليست بتنسيق ISO، وبالتالي فإن المنطقة الزمنية الافتراضية بدون تنسيق ISO هي المنطقة الزمنية المحلية الخاصة بالدولة الموجود بها. وتختلف من دولة إلي آخري.

+ +
Date.parse('Thu, 01 Jan 1970 00:00:00 GMT');
+
+ +

يٌعيد 0 بغض النظر عن المنطقة الزمنية المحلية مثل GMT (UTC).

+ +
Date.parse('Thu, 01 Jan 1970 00:00:00');
+
+ +

يٌعيد 14400000 في المنطقة الزمنية GMT-0400، ويٌعيد قيم أخري في المناطق الزمنية الأخري، حيث أن السلسلة لا تحدد المناطق الزمنية وهي ليست بتنسيق ISO، وبالتالي فإن المنطقة الزمنية الافتراضية بدون تنسيق ISO هي المنطقة الزمنية المحلية الخاصة بالدولة الموجود بها. وتختلف من دولة إلي آخري.

+ +
Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400');
+
+ +

يٌعيد 14400000 بغض النظر عن المنطقة الزمنية المحلية مثل GMT (UTC).

+ +

الخصائص

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.4.2', 'Date.parse')}}{{Spec2('ES5.1')}}Simplified ISO 8601 format added.
{{SpecName('ES6', '#sec-date.parse', 'Date.parse')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.parse', 'Date.parse')}}{{Spec2('ESDraft')}} 
+ +

دعم المتصفحات

+ + + +

{{Compat("javascript.builtins.Date.parse")}}

+ +

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

+ + + +

اقرأ أيضًا

+ + diff --git a/files/ar/web/javascript/reference/global_objects/date/setdate/index.html b/files/ar/web/javascript/reference/global_objects/date/setdate/index.html new file mode 100644 index 0000000000..ca5d89a63e --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/date/setdate/index.html @@ -0,0 +1,95 @@ +--- +title: Date.prototype.setDate() | دالة تعيين التاريخ +slug: Web/JavaScript/Reference/Global_Objects/Date/setDate +tags: + - التاريخ + - النموذج المبدئي + - جافاسكربت + - طريقة + - مرجع +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate +--- +
{{JSRef}}
+ +

دالة setDate() تقوم بتعين يوم من الـ {{jsxref("Date")}} المحدد نسبه إلي الشهر المحدد.

+ +
{{EmbedInteractiveExample("pages/js/date-setdate.html")}}
+ + + +

بنية الجملة

+ +
dateObj.setDate(dayValue [رقم اليوم])
+ +

المعاملات (Parameters)

+ +
+
dayValue
+
يجب أن يكون عدد صحيح يمثل يوم من الشهر. علي سبيل المثال setDate(15) .
+
+ +

القيمة العائدة

+ +

عدد المللي ثانية بين تاريخ 1 يناير 1970 00:00:00 UTC والتاريخ المحدد (يتغير الـ {{jsxref("Date")}} أيضا بتغير المكان [المنطقة الزمنية]).

+ +

الوصف

+ +

إذا كان dayValue [رقم اليوم] خارج نطاق قيم الشهر المحدد لهذا التاريخ، فأن دالة setDate() ستقوم بتحديد الـ {{jsxref("Date")}} [اليوم] وفقاً لذلك. علي سبيل المثال، إذا تم تحديد dayValue [رقم اليوم] إلي 0 فسيتم تعيين التاريخ إلي أخر يوم في الشهر السابق.

+ +

أمثلة

+ +

استخدام setDate()

+ +
var theBigDay = new Date(1962, 6, 7); // 1962-07-07
+theBigDay.setDate(24);  // 1962-07-24
+theBigDay.setDate(32);  // 1962-08-01
+theBigDay.setDate(22);  // 1962-08-22
+theBigDay.setDate(0); // 1962-06-30
+theBigDay.setDate(98); // 1962-10-06
+theBigDay.setDate(-50); // 1962-08-09
+
+ +

الخصائص

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}{{Spec2('ESDraft')}} 
+ +

دعم المتصفحات

+ + + +

{{Compat("javascript.builtins.Date.setDate")}}

+ +

اقرأ أيضًا

+ + diff --git a/files/ar/web/javascript/reference/global_objects/date/utc/index.html b/files/ar/web/javascript/reference/global_objects/date/utc/index.html new file mode 100644 index 0000000000..2d1400af0e --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/date/utc/index.html @@ -0,0 +1,133 @@ +--- +title: Date.UTC() +slug: Web/JavaScript/Reference/Global_Objects/Date/UTC +tags: + - تاريخ + - جافاسكربت + - طريقة + - مرجع +translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC +--- +
{{JSRef}}
+ +

دالة Date.UTC() تقبل نفس المُعاملات parameters علي الرغم من طول تكوين المنشيء، ويٌعيد التاريخ إلي المللي ثانية من بداية تاريخ 1 يناير, 1970, 00:00:00, التوقيت العالمي.

+ +
{{EmbedInteractiveExample("pages/js/date-utc.html")}}
+ + + +

بنية الجملة

+ +
Date.UTC(year, month[, day[, hour[, minute[, second[, millisecond]]]]])
+ +

المعاملات (Parameters)

+ +
+
year
+
سنة كاملة.
+
month
+
رقم صحيح ما بين 0 و11 يمثل الشهر.
+
day
+
اختياري. رقم صحيح ما بين 1 و31 يمثل يوم من الشهر.
+
hour
+
اختياري. رقم صحيح ما بين 0 و23 يمثل الساعات.
+
minute
+
اختياري. رقم صحيح ما بين 0 و59 يمثل الدقائق.
+
second
+
اختياري. رقم صحيح ما بين 0 و59 يمثل الثواني.
+
millisecond
+
اختياري. رقم صحيح ما بين 0 و999 يمثل الميلي ثانية.
+
+ +

القيمة العائدة

+ +

رقم يمثل عدد المللي ثانية في التاريخ المحدد منذ 1 يناير, 1970, 00:00:00، التوقيت العالمي.

+ +

الوصف

+ +

تقوم دالة UTC() بأخذ معاملات (parameters) التاريخ المحددة بفاصلة ثم تُعيدها إلي مللي ثانية بين 1 يناير 1970، 00:00:00 التوقيت العالمي، والوقت الذي حددته.

+ +

يجب عليك تحديد السنة كاملة؛ علي سبيل المثال, 1998. إذا كانت السنة محددة ما بين عام 0 و99، تقوم هذه الطريقة بتحويل السنه إلي سنه في القرن العشرين (1900 + سنة)؛ علي سبيل المثال، إذا حددت 95، فسيتم أستخدام 1995.

+ +

تختلف طريقة UTC() عن منشيء التاريخ بطريقتين.

+ + + +

If a parameter you specify is outside of the expected range, the UTC() method updates the other parameters to allow for your number. For example, if you use 15 for month, the year will be incremented by 1 (year + 1), and 3 will be used for the month.

+ +

Because UTC() is a static method of {{jsxref("Date")}}, you always use it as Date.UTC(), rather than as a method of a {{jsxref("Date")}} object you created.

+ +

أمثلة

+ +

استخدام Date.UTC()

+ +

في المثال التالي يقوم بإنشاء التاريخ بإستخدام UTC بدلاً من التوقيت المحلي:

+ +
var utcDate = new Date(Date.UTC(2018, 11, 1, 0, 0, 0));
+
+ +

الخصائص

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
+ +

دعم المتصفحات

+ + + +

{{Compat("javascript.builtins.Date.UTC")}}

+ +

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

+ +

Date.UTC with fewer than two arguments

+ +

When providing less than two arguments to Date.UTC, {{jsxref("NaN")}} is returned. This behavior is specified in ECMAScript 2017. Engines who weren't supporting this behavior, have been updated (see {{bug(1050755)}}, ecma-262 #642).

+ +
Date.UTC();
+Date.UTC(1);
+
+// Safari: NaN
+// Chrome/Opera/V8: NaN
+
+// Firefox <54: non-NaN
+// Firefox 54+: NaN
+
+// IE: non-NaN
+// Edge: NaN
+
+ +

اقرأ أيضاً

+ + diff --git a/files/ar/web/javascript/reference/global_objects/function/call/index.html b/files/ar/web/javascript/reference/global_objects/function/call/index.html new file mode 100644 index 0000000000..f3c83f04ac --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/function/call/index.html @@ -0,0 +1,219 @@ +--- +title: ()Function.prototype.call +slug: Web/JavaScript/Reference/Global_Objects/Function/call +translation_of: Web/JavaScript/Reference/Global_Objects/Function/call +--- +
{{JSRef}}
+ +
+

تُستدعَى الوظيفة ()call على دالة، أول argument لهذه الوظيفة هو قيمة this الخاصة بالدالة، وال arguments المتبقية (إن وُجدت)، هي  arguments الدالة.

+ +
+

ملاحظة :   صيغة هذه الوظيفة مماثلة تقريبًا  للصيغة الخاصة بـ {{jsxref("Function.prototype.apply", "apply")}} الفرق الوحيد هو ان  ()call تاخذ قائمة من ال arguments  محددة بشكل فردي فيما تاخذ ()apply مصفوفة واحدة من ال arguments.

+
+ +
{{EmbedInteractiveExample("pages/js/function-call.html")}}
+ + + +

صيغة الوظيفة call

+ +
function.call(thisArg, arg1, arg2, ...)
+ +

Parameters

+ +
+
thisArg
+
اختياري. وهو قيمة this المتوفرة في استدعاء الدالة function. لاحظ أن this قد لا تكون القيمة الفعلية التي تراها الوظيفة: اذا كانت هذه الوظيفة دالة في  {{jsxref("Strict_mode", "non-strict mode", "", 1)}} سيتم استبدال  {{jsxref("Global_Objects/null", "null")}} و {{jsxref("Global_Objects/undefined", "undefined")}} بالكائن العام والقيم الاولية ستحول الى كائنات.  
+
...,arg1, arg2
+
 arguments الدالة function.
+
+ +

Return value

+ +

تُرجع نتيجة استدعاء الدالة مع قيمة  this المحددة و ال arguments.

+ +

وصف

+ +

تسمح الوظيفة ()call لدالة او وظيفة خاصة بكائن واحد بان يتم استدعاؤها وتعيينها من قبل كائن مختلف.

+ +

تمنح الوظيفة ()call قيمة this الجديدة الى الدالة/الوظيفة. مع الـ call  يمكنك كتابة الوظيفة مرة واحدة ومن ثم تقوم بتوريثها لكائن آخر دون الحاجة إلى إعادة كتابة الوظيفة للكائن الجديد.

+ +

تحليل الجزء الغامض في الوظيفة ()call

+ +

نظرا لعدم وجود شرح كاف حول هذه الجزئية فقد ارتايت ان اظيف هذه الفقرة التوضيحية لعلها تزيح بعض الغموض عن قيمة ال this التي تمثل ال argument الاول لهذه الوظيفة.

+ +

اذا نظرنا بتمعن في هذا الجزء من داخل الوظيفة call. سنجد ان thisArg ستساوي الكائن العام في حالة undefined او null، والا ستساوي ناتج الكائن Object، تساوي thisArg كائنا في كلتا الحالتين. وعليه فقد اصبحت كائنا، اذن فمن الطبيعي ان تمتلك خصائص. تم تحديد الخاصية _callTemp_ قيمتها this و this تمثل الدالة التي ستستدعى عليها الوظيفة call. واخيرا يتم تنفيذ هذه الدالة:

+ +
Function.prototype.call_like = function( thisArg, args ){
+    thisArg = ( thisArg === undefined || thisArg === null ) ? window : Object( thisArg );
+    thisArg._callTemp_ = this;
+    thisArg._callTemp_();
+}
+ +

في حالة عدم وجود thisArg ستتصرف الدالة fn بشكل طبيعي و this ستساوي الكائن العام:

+ +
var fn = function () {
+    console.log( this ); // [object Window]
+}
+fn.call_like();
+
+
+ +

في حالة وجود thisArg بقيمة اولية ك undefined او null ف this ستساوي ايضا الكائن العام، خلاف ذالك سيتم تمرير قيمتها الى الكائن ()Object، اذا كانت هذه القيمة من القيم الاولية-primitive value سيقوم الكائن بتحويلها الى الكائن المناسب لها، واما اذا كانت هذه القيمة كائنا فلا حاجة لتحويلها و this ستساوي كائنا.

+ +

وهذا يفسر كيف قام الكائن Object بتحويل القيمة الاولية "Youssef belmeskine" الى الكائن String:   

+ +
var fn = function () {
+    console.log( this ); // "Youssef belmeskine"
+    console.log( this === "Youssef belmeskine" ); // false
+    console.log( String(this) === "Youssef belmeskine" ); // true
+}
+fn.call_like( "Youssef belmeskine" );
+
+
+ +

من المهم دائما ذكر المصدر:

+ +
+

بالنسبة لى شخصيا لم اتمكن من فهم هذه الوظيفة وشقيقتها apply بشكل واضح الا عندما قمت بالاطلاع على الكود الداخلى لها. قمت باستخدام هذا الجزء من الكود لتوضيح الفكرة فقط. ستجد ال Polyfill كاملا في هذا الموقع hexmen.com.

+
+ +

أمثلة

+ +

استخدام ال call لِسَلسَلة منشئات الكائن

+ +

تستطيع إستخدام call  لعمل تسلسل لمنشئات-constructors الكائن، وذلك على غرار جافا. في المثال التالي، تم تحديد منشئ الكائن Product مع اثنين من البارامترات name و price. والدالتات Food و Toy  تستدعيان  Product  ممرر لها this و name و price. تقوم Product بتهيئة الخاصيتان name و price فيما تقوم كلا الدالتان المتخصصتان بتحديد ال category.

+ +
function Product(name, price) {
+  this.name = name;
+  this.price = price;
+}
+
+function Food(name, price) {
+  Product.call(this, name, price);
+  this.category = 'food';
+}
+
+function Toy(name, price) {
+  Product.call(this, name, price);
+  this.category = 'toy';
+}
+
+var cheese = new Food('feta', 5);
+var fun = new Toy('robot', 40);
+
+ +

إستخدام ال call لإستدعاء الدالة المجهولة الاسم-anonymous function 

+ +

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

+ +
var animals = [
+  { species: 'Lion', name: 'King' },
+  { species: 'Whale', name: 'Fail' }
+];
+
+for (var i = 0; i < animals.length; i++) {
+  (function(i) {
+    this.print = function() {
+      console.log('#' + i + ' ' + this.species
+                  + ': ' + this.name);
+    }
+    this.print();
+  }).call(animals[i], i);
+}
+
+ +

استخدام call لاستدعاء دالة وتحديد السياق-context ل   this

+ +

في المثال أدناه، عندما سنقوم باستدعاء greet سترتبط قيمة this  بالكائن obj.

+ +
function greet() {
+  var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
+  console.log(reply);
+}
+
+var obj = {
+  animal: 'cats', sleepDuration: '12 and 16 hours'
+};
+
+greet.call(obj);  // cats typically sleep between 12 and 16 hours
+
+ +

إستخدام الـcall لاستدعاء دالة وبدون تحديد البرامتر الاول

+ +

في المثال أدناه ،قمنا باستدعاء الدالة display من دون تمرير البرامتر الاول. إذا لم يتم تمرير قيمة this في البرامتر الاول فسترتبط بالكائن العام-global object.

+
+ +
var sData = 'Wisen';
+
+function display(){
+  console.log('sData value is %s ', this.sData);
+}
+
+display.call();  // sData value is Wisen
+
+ +
+

تذكر ان قيمة this ستكون  ب undefined في الوضع الصارم. انظر ادناه:

+
+ +
'use strict';
+
+var sData = 'Wisen';
+
+function display() {
+  console.log('sData value is %s ', this.sData);
+}
+
+display.call(); // Cannot read the property of 'sData' of undefined
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}{{Spec2('ESDraft')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.Function.call")}}

+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/global_objects/function/index.html b/files/ar/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..878d8776b3 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,183 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - Constructor + - Function + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +
{{JSRef}}
+ +

The Function constructor creates a new Function object. Calling the constructor directly can create functions dynamically, but suffers from security and similar (but far less significant) performance issues similar to {{jsxref("eval")}}. However, unlike eval, the Function constructor allows executing code in the global scope, prompting better programming habits and allower for more efficient code minification.

+ +
{{EmbedInteractiveExample("pages/js/function-constructor.html")}}
+ + + +

Every JavaScript function is actually a Function object. This can be seen with the code (function(){}).constructor === Function which returns true.

+ +

Syntax

+ +
new Function ([arg1[, arg2[, ...argN]],] functionBody)
+ +

Parameters

+ +
+
arg1, arg2, ... argN
+
Names to be used by the function as formal argument names. Each must be a string that corresponds to 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.
+
+ +

Description

+ +

Function objects created with the Function constructor are parsed when the function is created. This is less efficient than declaring a function with a function expression or function statement and calling it within your code because such functions are parsed with the rest of the code.

+ +

All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.

+ +

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor. However, getting rid of the new operator allows for a smaller minified code size (4 bytes smaller), so it is best to not use new with Function.

+ +

Properties and Methods of Function

+ +

The global Function object has no methods or properties of its own. However, since it is a function itself, it does inherit some methods and properties through the prototype chain from {{jsxref("Function.prototype")}}.

+ +

Function prototype object

+ +

Properties

+ +
{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}
+ +

Methods

+ +
{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}
+ +

Function instances

+ +

Function instances inherit methods and properties from {{jsxref("Function.prototype")}}. As with all constructors, you can change the constructor's prototype object to make changes to all Function instances.

+ +

Examples

+ +

Specifying arguments with the Function constructor

+ +

The following code creates a Function object that takes two arguments.

+ +
// Example can be run directly in your JavaScript console
+
+// Create a function that takes two arguments and returns the sum of those arguments
+var adder = new Function('a', 'b', 'return a + b');
+
+// Call the function
+adder(2, 6);
+// > 8
+
+ +

The arguments "a" and "b" are formal argument names that are used in the function body, "return a + b".

+ +

Difference between Function constructor and function declaration

+ +

Functions created with the Function constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the Function constructor was called. This is different from using {{jsxref("eval")}} with code for a function expression.

+ +
var x = 10;
+
+function createFunction1() {
+    var x = 20;
+    return new Function('return x;'); // this |x| refers global |x|
+}
+
+function createFunction2() {
+    var x = 20;
+    function f() {
+        return x; // this |x| refers local |x| above
+    }
+    return f;
+}
+
+var f1 = createFunction1();
+console.log(f1());          // 10
+var f2 = createFunction2();
+console.log(f2());          // 20
+
+ +

The "proper" way to execute external code with Function (for maximum minifyability).

+ +
function makeFunction(code){
+    return Function('"use strict";return ' + code)();
+}
+var add = makeFunction(
+  "" + function(a, b, c){ return a + b + c } // move this to a separate file in the production release
+);
+console.log( add(1, 2, 3) ); // will log six
+ +

Please note that the above code by itself is completely impractical. You should never abuse Function like that. Instead, the above code is meant only to be a simplified example of something like a module loader where there is a base script, then there are hundreads of big optionally loaded modules. Then, instead of the user waiting while they all download, the clients computer only downloads modules as needed so the page loads super fast. Also, it is reccomended that when evaluating many functions, the functions are evaluated together in bulk instead of separatly.

+ +
function bulkMakeFunctions(){
+    var str = "", i = 1, Len = arguments.length;
+    if (Len) {
+        str = arguments[0];
+        while (i !== Len) str += "," + arguments[i], ++i;
+    }
+    return Function('"use strict";return[' + str + ']')();
+}
+const [
+    add,                        sub,                        mul,                        div
+] = bulkMakeFunctions(
+    "function(a,b){return a+b}","function(a,b){return a-b}","function(a,b){return a*b}","function(a,b){return a/b}"
+);
+console.log(sub(add(mul(4,3), div(225,5)), 7))
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.3', 'Function')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-objects', 'Function')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +
+ + +

{{Compat("javascript.builtins.Function")}}

+
+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/global_objects/index.html b/files/ar/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..0e46a82c09 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/index.html @@ -0,0 +1,126 @@ +--- +title: Standard built-in objects +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects +--- +
+ {{jsSidebar("Objects")}}
+

Summary

+

This chapter documents all the JavaScript standard built-in objects, along with their methods and properties.

+
+

The term "global objects" (or standard built-in objects) here is not to be confused with the global object. Here, global objects refer to objects in the global scope (but only if ECMAScript 5 strict mode is not used! Otherwise it returns undefined). The global object itself can be accessed by the {{jsxref("Operators/this", "this")}} operator in the global scope. In fact, the global scope consists of the properties of the global object (including inherited properties, if any).

+

Other objects in the global scope are either created by the user script or provided by the host application. The host objects available in browser contexts are documented in the API reference. For more information about the distinction between the DOM and core JavaScript, see JavaScript technologies overview.

+

Standard objects (by category)

+

Value properties

+

Global properties returning a simple value.

+ +

Function properties

+

Global functions returning the result of a specific routine.

+ +

Fundamental objects

+

General language objects, functions and errors.

+ +

Numbers and dates

+

Objects dealing with numbers, dates and mathematical calculations.

+ +

Text processing

+

Objects for manipulating texts.

+ +

Indexed collections

+

Collections ordered by an index. Array-type objects.

+ +

Keyed collections

+

Collections of objects as keys. Elements iterable in insertion order.

+ +

Structured data

+

Data buffers and JavaScript Object Notation.

+ +

Control abstraction objects

+ +

Reflection

+ +

Internationalization

+

Additions to the ECMAScript core for language-sensitive functionalities.

+ +

Other

+ +
+

 

diff --git a/files/ar/web/javascript/reference/global_objects/json/index.html b/files/ar/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..60305cbd07 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,215 @@ +--- +title: JSON +slug: Web/JavaScript/Reference/Global_Objects/JSON +tags: + - JSON + - JavaScript + - NeedsTranslation + - Object + - Reference + - TopicStub + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +
{{JSRef("Global_Objects", "JSON")}}
+ +

Summary

+

The JSON object contains methods for parsing JavaScript Object Notation ({{glossary("JSON")}}) and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own.

+ +

Description

+ +

JavaScript Object Notation

+

JSON is a syntax for serializing objects, arrays, numbers, strings, booleans, and {{jsxref("null")}}. It is based upon JavaScript syntax but is distinct from it: some JavaScript is not JSON, and some JSON is not JavaScript. See also JSON: The JavaScript subset that isn't.

+ + + + + + + + + + + + + + + + + + + + + + +
JavaScript and JSON differences
JavaScript typeJSON differences
Objects and ArraysProperty names must be double-quoted strings; trailing commas are forbidden.
NumbersLeading zeros are prohibited; a decimal point must be followed by at least one digit.
Strings +

Only a limited sets of characters may be escaped; certain control characters are prohibited; the Unicode line separator (U+2028) and paragraph separator (U+2029) characters are permitted; strings must be double-quoted. See the following example where {{jsxref("JSON.parse()")}} works fine and a {{jsxref("SyntaxError")}} is thrown when evaluating the code as JavaScript:

+
+var code = '"\u2028\u2029"';
+JSON.parse(code); // works fine
+eval(code); // fails
+
+
+

The full JSON syntax is as follows:

+
JSON = null
+    or true or false
+    or JSONNumber
+    or JSONString
+    or JSONObject
+    or JSONArray
+
+JSONNumber = - PositiveNumber
+          or PositiveNumber
+PositiveNumber = DecimalNumber
+              or DecimalNumber . Digits
+              or DecimalNumber . Digits ExponentPart
+              or DecimalNumber ExponentPart
+DecimalNumber = 0
+             or OneToNine Digits
+ExponentPart = e Exponent
+            or E Exponent
+Exponent = Digits
+        or + Digits
+        or - Digits
+Digits = Digit
+      or Digits Digit
+Digit = 0 through 9
+OneToNine = 1 through 9
+
+JSONString = ""
+          or " StringCharacters "
+StringCharacters = StringCharacter
+                or StringCharacters StringCharacter
+StringCharacter = any character
+                  except " or \ or U+0000 through U+001F
+               or EscapeSequence
+EscapeSequence = \" or \/ or \\ or \b or \f or \n or \r or \t
+              or \u HexDigit HexDigit HexDigit HexDigit
+HexDigit = 0 through 9
+        or A through F
+        or a through f
+
+JSONObject = { }
+          or { Members }
+Members = JSONString : JSON
+       or Members , JSONString : JSON
+
+JSONArray = [ ]
+         or [ ArrayElements ]
+ArrayElements = JSON
+             or ArrayElements , JSON
+
+

Insignificant whitespace may be present anywhere except within a JSONNumber (numbers must contain no whitespace) or JSONString (where it is interpreted as the corresponding character in the string, or would cause an error). The tab character (U+0009), carriage return (U+000D), line feed (U+000A), and space (U+0020) characters are the only valid whitespace characters.

+ +

Methods

+
+
{{jsxref("JSON.parse()")}}
+
Parse a string as JSON, optionally transform the produced value and its properties, and return the value.
+
{{jsxref("JSON.stringify()")}}
+
Return a JSON string corresponding to the specified value, optionally including only certain properties or replacing property values in a user-defined manner.
+
+ +

Polyfill

+

The JSON object is not supported in older browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing use of JSON object in implementations which do not natively support it (like Internet Explorer 6).

+

The following algorithm is an imitation of the native JSON object:

+
if (!window.JSON) {
+  window.JSON = {
+    parse: function(sJSON) { return eval('(' + sJSON + ')'); },
+    stringify: function(vContent) {
+      if (vContent instanceof Object) {
+        var sOutput = '';
+        if (vContent.constructor === Array) {
+          for (var nId = 0; nId < vContent.length; sOutput += this.stringify(vContent[nId]) + ',', nId++);
+          return '[' + sOutput.substr(0, sOutput.length - 1) + ']';
+        }
+        if (vContent.toString !== Object.prototype.toString) {
+          return '"' + vContent.toString().replace(/"/g, '\\$&') + '"';
+        }
+        for (var sProp in vContent) {
+          sOutput += '"' + sProp.replace(/"/g, '\\$&') + '":' + this.stringify(vContent[sProp]) + ',';
+        }
+        return '{' + sOutput.substr(0, sOutput.length - 1) + '}';
+     }
+     return typeof vContent === 'string' ? '"' + vContent.replace(/"/g, '\\$&') + '"' : String(vContent);
+    }
+  };
+}
+
+

More complex well-known polyfills for the JSON object are JSON2 and JSON3.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-json-object', 'JSON')}}{{Spec2('ES6')}} 
+ +

Browser compatibility

+
{{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("8.0")}}{{CompatOpera("10.5")}}{{CompatSafari("4.0")}}
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+

Based on Kangax's compat table.

+ +

See also

+ diff --git a/files/ar/web/javascript/reference/global_objects/map/index.html b/files/ar/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..ba5bc93804 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,358 @@ +--- +title: Map +slug: Web/JavaScript/Reference/Global_Objects/Map +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +
{{JSRef}}
+ +

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and {{glossary("Primitive", "primitive values")}}) may be used as either a key or a value.

+ +

Description

+ +

A Map object iterates its elements in insertion order — a {{jsxref("Statements/for...of", "for...of")}} loop returns an array of [key, value] for each iteration.

+ +

Key equality

+ + + +

Objects vs. Maps

+ +

{{jsxref("Object")}} is similar to Map—both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. For this reason (and because there were no built-in alternatives), Objects have been used as Maps historically.

+ +

However, there are important differences that make Map preferable in certain cases:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MapObject
Accidental KeysA Map does not contain any keys by default. It only contains what is explicitly put into it. +

An Object has a prototype, so it contains default keys that could collide with your own keys if you're not careful.

+ +
+

Note: As of ES5, this can be bypassed by using {{jsxref("Object.create", "Object.create(null)")}}, but this is seldom done.

+
+
Key TypesA Map's keys can be any value (including functions, objects, or any primitive).The keys of an Object must be either a {{jsxref("String")}} or a {{jsxref("Symbol")}}.
Key Order +

The keys in Map are ordered. Thus, when iterating over it, a Map object returns keys in order of insertion.

+ 		+

The keys of an Object are not ordered.

+ +
+

Note: Since ECMAScript 2015, objects do preserve creation order for string and Symbol keys. In JavaScript engines that comply with the ECMAScript 2015 spec, iterating over an object with only string keys will yield the keys in order of insertion.

+
+
SizeThe number of items in a Map is easily retrieved from its {{jsxref("Map.prototype.size", "size")}} property.The number of items in an Object must be determined manually.
IterationA Map is an iterable, so it can be directly iterated.Iterating over an Object requires obtaining its keys in some fashion and iterating over them.
Performance +

Performs better in scenarios involving frequent additions and removals of key-value pairs.

+ 		+

Not optimized for frequent additions and removals of key-value pairs.

+
+ +

Setting object properties

+ +

Setting Object properties works for Map objects as well, and can cause considerable confusion.

+ +

Therefore, this appears to work in a way:

+ +
let wrongMap = new Map()
+wrongMap['bla'] = 'blaa'
+wrongMap['bla2'] = 'blaaa2'
+
+console.log(wrongMap)  // Map { bla: 'blaa', bla2: 'blaaa2' }
+
+ +

But that way of setting a property does not interact with the Map data structure. It uses the feature of the generic object. The value of 'bla' is not stored in the Map for queries. Othere operations on the data fail:

+ +
wrongMap.has('bla')    // false
+wrongMap.delete('bla') // false
+console.log(wrongMap)  // Map { bla: 'blaa', bla2: 'blaaa2' }
+ +

The correct usage for storing data in the Map is through the set(key, value) method.

+ +
let contacts = new Map()
+contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"})
+contacts.has('Jessie') // true
+contacts.get('Hilary') // undefined
+contacts.set('Hilary', {phone: "617-555-4321", address: "321 S 2nd St"})
+contacts.get('Jessie') // {phone: "213-555-1234", address: "123 N 1st Ave"}
+contacts.delete('Raymond') // false
+contacts.delete('Jessie') // true
+console.log(contacts.size) // 1
+
+
+ +

Constructor

+ +
+
{{jsxref("Map/Map", "Map()")}}
+
Creates a new Map object.
+
+ +

Static properties

+ +
+
{{jsxref("Map.@@species", "get Map[@@species]")}}
+
The constructor function that is used to create derived objects.
+
+ +

Instance properties

+ +
+
{{jsxref("Map.prototype.size")}}
+
Returns the number of key/value pairs in the Map object.
+
+ +

Instance methods

+ +
+
{{jsxref("Map.prototype.clear()")}}
+
Removes all key-value pairs from the Map object.
+
{{jsxref("Map.delete", "Map.prototype.delete(key)")}}
+
Returns true if an element in the Map object existed and has been removed, or false if the element does not exist. Map.prototype.has(key) will return false afterwards.
+
{{jsxref("Map.prototype.entries()")}}
+
Returns a new Iterator object that contains an array of [key, value] for each element in the Map object in insertion order.
+
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
+
Calls callbackFn once for each key-value pair present in the Map object, in insertion order. If a thisArg parameter is provided to forEach, it will be used as the this value for each callback.
+
{{jsxref("Map.get", "Map.prototype.get(key)")}}
+
Returns the value associated to the key, or undefined if there is none.
+
{{jsxref("Map.has", "Map.prototype.has(key)")}}
+
Returns a boolean asserting whether a value has been associated to the key in the Map object or not.
+
{{jsxref("Map.prototype.keys()")}}
+
Returns a new Iterator object that contains the keys for each element in the Map object in insertion order.
+
{{jsxref("Map.set", "Map.prototype.set(key, value)")}}
+
Sets the value for the key in the Map object. Returns the Map object.
+
{{jsxref("Map.prototype.values()")}}
+
Returns a new Iterator object that contains the values for each element in the Map object in insertion order.
+
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
+
Returns a new Iterator object that contains an array of [key, value] for each element in the Map object in insertion order.
+
+ +

Examples

+ +

Using the Map object

+ +
let myMap = new Map()
+
+let keyString = 'a string'
+let keyObj    = {}
+let keyFunc   = function() {}
+
+// setting the values
+myMap.set(keyString, "value associated with 'a string'")
+myMap.set(keyObj, 'value associated with keyObj')
+myMap.set(keyFunc, 'value associated with keyFunc')
+
+myMap.size              // 3
+
+// getting the values
+myMap.get(keyString)    // "value associated with 'a string'"
+myMap.get(keyObj)       // "value associated with keyObj"
+myMap.get(keyFunc)      // "value associated with keyFunc"
+
+myMap.get('a string')    // "value associated with 'a string'"
+                         // because keyString === 'a string'
+myMap.get({})            // undefined, because keyObj !== {}
+myMap.get(function() {}) // undefined, because keyFunc !== function () {}
+
+ +

Using NaN as Map keys

+ +

{{jsxref("NaN")}} can also be used as a key. Even though every NaN is not equal to itself (NaN !== NaN is true), the following example works because NaNs are indistinguishable from each other:

+ +
let myMap = new Map()
+myMap.set(NaN, 'not a number')
+
+myMap.get(NaN)
+// "not a number"
+
+let otherNaN = Number('foo')
+myMap.get(otherNaN)
+// "not a number"
+
+ +

Iterating Map with for..of

+ +

Maps can be iterated using a for..of loop:

+ +
let myMap = new Map()
+myMap.set(0, 'zero')
+myMap.set(1, 'one')
+
+for (let [key, value] of myMap) {
+  console.log(key + ' = ' + value)
+}
+// 0 = zero
+// 1 = one
+
+for (let key of myMap.keys()) {
+  console.log(key)
+}
+// 0
+// 1
+
+for (let value of myMap.values()) {
+  console.log(value)
+}
+// zero
+// one
+
+for (let [key, value] of myMap.entries()) {
+  console.log(key + ' = ' + value)
+}
+// 0 = zero
+// 1 = one
+
+ +

Iterating Map with forEach()

+ +

Maps can be iterated using the {{jsxref("Map.prototype.forEach", "forEach()")}} method:

+ +
myMap.forEach(function(value, key) {
+  console.log(key + ' = ' + value)
+})
+// 0 = zero
+// 1 = one
+
+ +

Relation with Array objects

+ +
let kvArray = [['key1', 'value1'], ['key2', 'value2']]
+
+// Use the regular Map constructor to transform a 2D key-value Array into a map
+let myMap = new Map(kvArray)
+
+myMap.get('key1') // returns "value1"
+
+// Use Array.from() to transform a map into a 2D key-value Array
+console.log(Array.from(myMap)) // Will show you exactly the same Array as kvArray
+
+// A succinct way to do the same, using the spread syntax
+console.log([...myMap])
+
+// Or use the keys() or values() iterators, and convert them to an array
+console.log(Array.from(myMap.keys())) // ["key1", "key2"]
+
+ +

Cloning and merging Maps

+ +

Just like Arrays, Maps can be cloned:

+ +
let original = new Map([
+  [1, 'one']
+])
+
+let clone = new Map(original)
+
+console.log(clone.get(1))       // one
+console.log(original === clone) // false (useful for shallow comparison)
+ +
+

Important: Keep in mind that the data itself is not cloned.

+
+ +

Maps can be merged, maintaining key uniqueness:

+ +
let first = new Map([
+  [1, 'one'],
+  [2, 'two'],
+  [3, 'three'],
+])
+
+let second = new Map([
+  [1, 'uno'],
+  [2, 'dos']
+])
+
+// Merge two maps. The last repeated key wins.
+// Spread operator essentially converts a Map to an Array
+let merged = new Map([...first, ...second])
+
+console.log(merged.get(1)) // uno
+console.log(merged.get(2)) // dos
+console.log(merged.get(3)) // three
+ +

Maps can be merged with Arrays, too:

+ +
let first = new Map([
+  [1, 'one'],
+  [2, 'two'],
+  [3, 'three'],
+])
+
+let second = new Map([
+  [1, 'uno'],
+  [2, 'dos']
+])
+
+// Merge maps with an array. The last repeated key wins.
+let merged = new Map([...first, ...second, [1, 'eins']])
+
+console.log(merged.get(1)) // eins
+console.log(merged.get(2)) // dos
+console.log(merged.get(3)) // three
+ +

Specifications

+ + + + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.Map")}}

+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/global_objects/math/index.html b/files/ar/web/javascript/reference/global_objects/math/index.html new file mode 100644 index 0000000000..dd3196e0ac --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/math/index.html @@ -0,0 +1,190 @@ +--- +title: رياضيات +slug: Web/JavaScript/Reference/Global_Objects/Math +translation_of: Web/JavaScript/Reference/Global_Objects/Math +--- +
{{JSRef}}
+ +

Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object.

+ +

Description

+ +

Unlike the other global objects, Math is not a constructor. All properties and methods of Math are static. You refer to the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is the method's argument. Constants are defined with the full precision of real numbers in JavaScript.

+ +

Properties

+ +
+
{{jsxref("Math.E")}}
+
Euler's constant and the base of natural logarithms, approximately 2.718.
+
{{jsxref("Math.LN2")}}
+
Natural logarithm of 2, approximately 0.693.
+
{{jsxref("Math.LN10")}}
+
Natural logarithm of 10, approximately 2.303.
+
{{jsxref("Math.LOG2E")}}
+
Base 2 logarithm of E, approximately 1.443.
+
{{jsxref("Math.LOG10E")}}
+
Base 10 logarithm of E, approximately 0.434.
+
{{jsxref("Math.PI")}}
+
Ratio of the circumference of a circle to its diameter, approximately 3.14159.
+
{{jsxref("Math.SQRT1_2")}}
+
Square root of 1/2; equivalently, 1 over the square root of 2, approximately 0.707.
+
{{jsxref("Math.SQRT2")}}
+
Square root of 2, approximately 1.414.
+
+ +

Methods

+ +
+

Note that the trigonometric functions (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) expect or return angles in radians. To convert radians to degrees, divide by (Math.PI / 180), and multiply by this to convert the other way.

+
+ +
+

Note that many math functions have a precision that's implementation-dependent. This means that different browsers can give a different result, and even the same JS engine on a different OS or architecture can give different results.

+
+ +
+
{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}
+
Returns the absolute value of a number.
+
{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}
+
Returns the arccosine of a number.
+
{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}
+
Returns the hyperbolic arccosine of a number.
+
{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}
+
Returns the arcsine of a number.
+
{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}
+
Returns the hyperbolic arcsine of a number.
+
{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}
+
Returns the arctangent of a number.
+
{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}
+
Returns the hyperbolic arctangent of a number.
+
{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}
+
Returns the arctangent of the quotient of its arguments.
+
{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}
+
Returns the cube root of a number.
+
{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}
+
Returns the smallest integer greater than or equal to a number.
+
{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}
+
Returns the number of leading zeroes of a 32-bit integer.
+
{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}
+
Returns the cosine of a number.
+
{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}
+
Returns the hyperbolic cosine of a number.
+
{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}
+
Returns Ex, where x is the argument, and E is Euler's constant (2.718…), the base of the natural logarithm.
+
{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}
+
Returns subtracting 1 from exp(x).
+
{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}
+
Returns the largest integer less than or equal to a number.
+
{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}
+
Returns the nearest single precision float representation of a number.
+
{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}}
+
Returns the square root of the sum of squares of its arguments.
+
{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}}
+
Returns the result of a 32-bit integer multiplication.
+
{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}
+
Returns the natural logarithm (loge, also ln) of a number.
+
{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}
+
Returns the natural logarithm (loge, also ln) of 1 + x for a number x.
+
{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}
+
Returns the base 10 logarithm of a number.
+
{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}
+
Returns the base 2 logarithm of a number.
+
{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}
+
Returns the largest of zero or more numbers.
+
{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}
+
Returns the smallest of zero or more numbers.
+
{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}
+
Returns base to the exponent power, that is, baseexponent.
+
{{jsxref("Global_Objects/Math/random", "Math.random()")}}
+
Returns a pseudo-random number between 0 and 1.
+
{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}
+
Returns the value of a number rounded to the nearest integer.
+
{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}
+
Returns the sign of the x, indicating whether x is positive, negative or zero.
+
{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}
+
Returns the sine of a number.
+
{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}
+
Returns the hyperbolic sine of a number.
+
{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}
+
Returns the positive square root of a number.
+
{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}
+
Returns the tangent of a number.
+
{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}
+
Returns the hyperbolic tangent of a number.
+
Math.toSource() {{non-standard_inline}}
+
Returns the string "Math".
+
{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}
+
Returns the integer part of the number x, removing any fractional digits.
+
+ +

Extending the Math object

+ +

As with most of the built-in objects in JavaScript, the Math object can be extended with custom properties and methods. To extend the Math object, you do not use prototype. Instead, you directly extend Math:

+ +
Math.propName = propValue;
+Math.methodName = methodRef;
+ +

For instance, the following example adds a method to the Math object for calculating the greatest common divisor of a list of arguments.

+ +
/* Variadic function -- Returns the greatest common divisor of a list of arguments */
+Math.gcd = function() {
+    if (arguments.length == 2) {
+        if (arguments[1] == 0)
+            return arguments[0];
+        else
+            return Math.gcd(arguments[1], arguments[0] % arguments[1]);
+    } else if (arguments.length > 2) {
+        var result = Math.gcd(arguments[0], arguments[1]);
+        for (var i = 2; i < arguments.length; i++)
+            result = Math.gcd(result, arguments[i]);
+        return result;
+    }
+};
+ +

Try it:

+ +
console.log(Math.gcd(20, 30, 15, 70, 40)); // `5`
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.8', 'Math')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math-object', 'Math')}}{{Spec2('ES6')}}New methods {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} and {{jsxref("Math.clz32()", "clz32()")}} added.
{{SpecName('ESDraft', '#sec-math-object', 'Math')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.Math")}}

+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/global_objects/object/constructor/index.html b/files/ar/web/javascript/reference/global_objects/object/constructor/index.html new file mode 100644 index 0000000000..140d95a732 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/object/constructor/index.html @@ -0,0 +1,152 @@ +--- +title: Object.prototype.constructor +slug: Web/JavaScript/Reference/Global_Objects/Object/constructor +translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor +--- +
{{JSRef}}
+ +

بالرجوع إلى {{jsxref("Object")}}constructor ووظيفتها إنشاء حالات من الاوبجكت (الكائن) .نذكرك بأن قيمة الخصائص التي تشير إليها تلك الفانكشان تشير لنفسها ولا تشير إلى سلسة تحتوي على إسم الفانكشان القيمة تقرأ فقط قيم بدائية مثل 1, true و "test".

+ +

الوصف

+ +

جميع الاوبجكت ( مع بعض الاستثائات نشأت مع Object.create(null)  ) وستملك وقتها جميعا خاصية الـ constructor . اما  الكائنات المنشأة بدون إستخدام الكونستراكتور بشكل صريح ( مثل  object & array literals )  ستملك أيضا خصائص الكونستركتور بشكل أساسي

+ +
var o = {};
+o.constructor === Object; // true
+
+var o = new Object;
+o.constructor === Object; // true
+
+var a = [];
+a.constructor === Array; // true
+
+var a = new Array;
+a.constructor === Array; // true
+
+var n = new Number(3);
+n.constructor === Number; // true
+
+ +

أمثلة

+ +

عرض الكونستركتور للأوبجكت

+ +

في المثال التالي قمنا بإنشاء بروتوتيب Tree و اوبجكت بإسم theTree  المثال هنا يعرض خصائص الـconstructor للكائن theTree

+ +
function Tree(name) {
+  this.name = name;
+}
+
+var theTree = new Tree('Redwood');
+console.log('theTree.constructor is ' + theTree.constructor);
+
+ +

عندما تقوم بكتابة الكود بعالية  ستحصل على النتيجة الاتية ليوضح لك أكثر  :-

+ +
theTree.constructor is function Tree(name) {
+  this.name = name;
+}
+
+ +

تغير الكونستركتور الخاص بالاوبجكت

+ +

The following example shows how to modify constructor value of generic objects. Only true, 1 and "test" will not be affected as they have read-only native constructors. This example shows that it is not always safe to rely on the constructor property of an object.

+ +
function Type () {}
+
+var types = [
+  new Array(),
+  [],
+  new Boolean(),
+  true,             // remains unchanged
+  new Date(),
+  new Error(),
+  new Function(),
+  function () {},
+  Math,
+  new Number(),
+  1,                // remains unchanged
+  new Object(),
+  {},
+  new RegExp(),
+  /(?:)/,
+  new String(),
+  'test'            // remains unchanged
+];
+
+for (var i = 0; i < types.length; i++) {
+  types[i].constructor = Type;
+  types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()];
+}
+
+console.log(types.join('\n'));
+
+ +

This example displays the following output:

+ +
function Type() {},false,
+function Type() {},false,
+function Type() {},false,false
+function Boolean() {
+    [native code]
+},false,true
+function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600
+function Type() {},false,Error
+function Type() {},false,function anonymous() {
+
+}
+function Type() {},false,function () {}
+function Type() {},false,[object Math]
+function Type() {},false,0
+function Number() {
+    [native code]
+},false,1
+function Type() {},false,[object Object]
+function Type() {},false,[object Object]
+function Type() {},false,/(?:)/
+function Type() {},false,/(?:)/
+function Type() {},false,
+function String() {
+    [native code]
+},false,test
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}{{Spec2('ESDraft')}} 
+ +

دعم  المتصفحات

+ +
+ + +

{{Compat("javascript.builtins.Object.constructor")}}

+
diff --git a/files/ar/web/javascript/reference/global_objects/object/index.html b/files/ar/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..2eb7c3bb18 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,182 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - NeedsTranslation + - Object + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +
{{JSRef}}
+ +

The Object constructor creates an object wrapper.

+ +

Syntax

+ +
// Object initialiser or literal
+{ [ nameValuePair1[, nameValuePair2[, ...nameValuePairN] ] ] }
+
+// Called as a constructor
+new Object([value])
+ +

Parameters

+ +
+
nameValuePair1, nameValuePair2, ... nameValuePairN
+
Pairs of names (strings) and values (any value) where the name is separated from the value by a colon.
+
value
+
Any value.
+
+ +

Description

+ +

The Object constructor creates an object wrapper for the given value. If the value is {{jsxref("null")}} or {{jsxref("undefined")}}, it will create and return an empty object, otherwise, it will return an object of a Type that corresponds to the given value. If the value is an object already, it will return the value.

+ +

When called in a non-constructor context, Object behaves identically to new Object().

+ +

See also the object initializer / literal syntax.

+ +

Properties of the Object constructor

+ +
+
Object.length
+
Has a value of 1.
+
{{jsxref("Object.prototype")}}
+
Allows the addition of properties to all objects of type Object.
+
+ +

Methods of the Object constructor

+ +
+
{{jsxref("Object.assign()")}}
+
Copies the values of all enumerable own properties from one or more source objects to a target object.
+
{{jsxref("Object.create()")}}
+
Creates a new object with the specified prototype object and properties.
+
{{jsxref("Object.defineProperty()")}}
+
Adds the named property described by a given descriptor to an object.
+
{{jsxref("Object.defineProperties()")}}
+
Adds the named properties described by the given descriptors to an object.
+
{{jsxref("Object.entries()")}}
+
Returns an array containing all of the [key, value] pairs of a given object's own enumerable string properties.
+
{{jsxref("Object.freeze()")}}
+
Freezes an object: other code can't delete or change any properties.
+
{{jsxref("Object.getOwnPropertyDescriptor()")}}
+
Returns a property descriptor for a named property on an object.
+
{{jsxref("Object.getOwnPropertyDescriptors()")}}
+
Returns an object containing all own property descriptors for an object.
+
{{jsxref("Object.getOwnPropertyNames()")}}
+
Returns an array containing the names of all of the given object's own enumerable and non-enumerable properties.
+
{{jsxref("Object.getOwnPropertySymbols()")}}
+
Returns an array of all symbol properties found directly upon a given object.
+
{{jsxref("Object.getPrototypeOf()")}}
+
Returns the prototype of the specified object.
+
{{jsxref("Object.is()")}}
+
Compares if two values are the same value. Equates all NaN values (which differs from both Abstract Equality Comparison and Strict Equality Comparison).
+
{{jsxref("Object.isExtensible()")}}
+
Determines if extending of an object is allowed.
+
{{jsxref("Object.isFrozen()")}}
+
Determines if an object was frozen.
+
{{jsxref("Object.isSealed()")}}
+
Determines if an object is sealed.
+
{{jsxref("Object.keys()")}}
+
Returns an array containing the names of all of the given object's own enumerable string properties.
+
{{jsxref("Object.preventExtensions()")}}
+
Prevents any extensions of an object.
+
{{jsxref("Object.seal()")}}
+
Prevents other code from deleting properties of an object.
+
{{jsxref("Object.setPrototypeOf()")}}
+
Sets the prototype (i.e., the internal [[Prototype]] property).
+
{{jsxref("Object.values()")}}
+
Returns an array containing the values that correspond to all of a given object's own enumerable string properties.
+
+ +

Object instances and Object prototype object

+ +

All objects in JavaScript are descended from Object; all objects inherit methods and properties from {{jsxref("Object.prototype")}}, although they may be overridden. For example, other constructors' prototypes override the constructor property and provide their own toString() methods. Changes to the Object prototype object are propagated to all objects unless the properties and methods subject to those changes are overridden further along the prototype chain.

+ +

Properties

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}
+ +

Methods

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}
+ +

Deleting a property from an object

+ +

There isn't any method in an Object itself to delete its own properties (e.g. like Map.prototype.delete()). To do so one has to use the delete operator.

+ +

Examples

+ +

Using Object given undefined and null types

+ +

The following examples store an empty Object object in o:

+ +
var o = new Object();
+
+ +
var o = new Object(undefined);
+
+ +
var o = new Object(null);
+
+ +

Using Object to create Boolean objects

+ +

The following examples store {{jsxref("Boolean")}} objects in o:

+ +
// equivalent to o = new Boolean(true);
+var o = new Object(true);
+
+ +
// equivalent to o = new Boolean(false);
+var o = new Object(Boolean());
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.2', 'Object')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object-objects', 'Object')}}{{Spec2('ES6')}}Added Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is
{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}{{Spec2('ESDraft')}}Added Object.entries, Object.values and Object.getOwnPropertyDescriptors.
+ +

Browser compatibility

+ +
+ + +

{{Compat("javascript.builtins.Object")}}

+
+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/global_objects/string/index.html b/files/ar/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..4dd72a6601 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,314 @@ +--- +title: خيط +slug: Web/JavaScript/Reference/Global_Objects/String +tags: + - ECMAScript 2015 + - JavaScript + - NeedsTranslation + - Reference + - String + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +
{{JSRef}}
+ +

The String global object is a constructor for strings, or a sequence of characters.

+ +

Syntax

+ +

String literals take the forms:

+ +
'string text'
+"string text"
+"中文 español deutsch English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ் עברית"
+ +

Strings can also be created using the String global object directly:

+ +
String(thing)
+ +

Parameters

+ +
+
thing
+
Anything to be converted to a string.
+
+ +

Template literals

+ +

Starting with ECMAScript 2015, string literals can also be so-called Template literals:

+ +
`hello world`
+`hello!
+ world!`
+`hello ${who}`
+escape `<a>${who}</a>`
+ +
+
+ +

Escape notation

+ +

Beside regular, printable characters, special characters can be encoded using escape notation:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CodeOutput
\0the NULL character
\'single quote
\"double quote
\\backslash
\nnew line
\rcarriage return
\vvertical tab
\ttab
\bbackspace
\fform feed
\uXXXXunicode codepoint
\u{X} ... \u{XXXXXX}unicode codepoint {{experimental_inline}}
\xXXthe Latin-1 character
+ +
+

Unlike some other languages, JavaScript makes no distinction between single-quoted strings and double-quoted strings; therefore, the escape sequences above work in strings created with either single or double quotes.

+
+ +
+
+ +

Long literal strings

+ +

Sometimes, your code will include strings which are very long. Rather than having lines that go on endlessly, or wrap at the whim of your editor, you may wish to specifically break the string into multiple lines in the source code without affecting the actual string contents. There are two ways you can do this.

+ +

You can use the + operator to append multiple strings together, like this:

+ +
let longString = "This is a very long string which needs " +
+                 "to wrap across multiple lines because " +
+                 "otherwise my code is unreadable.";
+
+ +

Or you can use the backslash character ("\") at the end of each line to indicate that the string will continue on the next line. Make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. That form looks like this:

+ +
let longString = "This is a very long string which needs \
+to wrap across multiple lines because \
+otherwise my code is unreadable.";
+
+ +

Both of these result in identical strings being created.

+ +

Description

+ +

Strings are useful for holding data that can be represented in text form. Some of the most-used operations on strings are to check their {{jsxref("String.length", "length")}}, to build and concatenate them using the + and += string operators, checking for the existence or location of substrings with the {{jsxref("String.prototype.indexOf()", "indexOf()")}} method, or extracting substrings with the {{jsxref("String.prototype.substring()", "substring()")}} method.

+ +

Character access

+ +

There are two ways to access an individual character in a string. The first is the {{jsxref("String.prototype.charAt()", "charAt()")}} method:

+ +
return 'cat'.charAt(1); // returns "a"
+
+ +

The other way (introduced in ECMAScript 5) is to treat the string as an array-like object, where individual characters correspond to a numerical index:

+ +
return 'cat'[1]; // returns "a"
+
+ +

For character access using bracket notation, attempting to delete or assign a value to these properties will not succeed. The properties involved are neither writable nor configurable. (See {{jsxref("Object.defineProperty()")}} for more information.)

+ +

Comparing strings

+ +

C developers have the strcmp() function for comparing strings. In JavaScript, you just use the less-than and greater-than operators:

+ +
var a = 'a';
+var b = 'b';
+if (a < b) { // true
+  console.log(a + ' is less than ' + b);
+} else if (a > b) {
+  console.log(a + ' is greater than ' + b);
+} else {
+  console.log(a + ' and ' + b + ' are equal.');
+}
+
+ +

A similar result can be achieved using the {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} method inherited by String instances.

+ +

Distinction between string primitives and String objects

+ +

Note that JavaScript distinguishes between String objects and primitive string values. (The same is true of {{jsxref("Boolean")}} and {{jsxref("Global_Objects/Number", "Numbers")}}.)

+ +

String literals (denoted by double or single quotes) and strings returned from String calls in a non-constructor context (i.e., without using the {{jsxref("Operators/new", "new")}} keyword) are primitive strings. JavaScript automatically converts primitives to String objects, so that it's possible to use String object methods for primitive strings. In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup.

+ +
var s_prim = 'foo';
+var s_obj = new String(s_prim);
+
+console.log(typeof s_prim); // Logs "string"
+console.log(typeof s_obj);  // Logs "object"
+
+ +

String primitives and String objects also give different results when using {{jsxref("Global_Objects/eval", "eval()")}}. Primitives passed to eval are treated as source code; String objects are treated as all other objects are, by returning the object. For example:

+ +
var s1 = '2 + 2';             // creates a string primitive
+var s2 = new String('2 + 2'); // creates a String object
+console.log(eval(s1));        // returns the number 4
+console.log(eval(s2));        // returns the string "2 + 2"
+
+ +

For these reasons, code may break when it encounters String objects when it expects a primitive string instead, although generally authors need not worry about the distinction.

+ +

A String object can always be converted to its primitive counterpart with the {{jsxref("String.prototype.valueOf()", "valueOf()")}} method.

+ +
console.log(eval(s2.valueOf())); // returns the number 4
+
+ +
Note: For another possible approach to strings in JavaScript, please read the article about StringView — a C-like representation of strings based on typed arrays.
+ +

Properties

+ +
+
{{jsxref("String.prototype")}}
+
Allows the addition of properties to a String object.
+
+ +

Methods

+ +
+
{{jsxref("String.fromCharCode()")}}
+
Returns a string created by using the specified sequence of Unicode values.
+
{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}
+
Returns a string created by using the specified sequence of code points.
+
{{jsxref("String.raw()")}} {{experimental_inline}}
+
Returns a string created from a raw template string.
+
+ +

String generic methods

+ +
+

String generics are non-standard, deprecated and will get removed near future.

+
+ +

The String instance methods are also available in Firefox as of JavaScript 1.6 (not part of the ECMAScript standard) on the String object for applying String methods to any object:

+ +
var num = 15;
+console.log(String.replace(num, /5/, '2'));
+
+ +

For migrating away from String generics, see also Warning: String.x is deprecated; use String.prototype.x instead.

+ +

{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}} are also available on {{jsxref("Array")}} methods.

+ +

String instances

+ +

Properties

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}
+ +

Methods

+ +

Methods unrelated to HTML

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}
+ +

HTML wrapper methods

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}
+ +

Examples

+ +

String conversion

+ +

It's possible to use String as a "safer" {{jsxref("String.prototype.toString()", "toString()")}} alternative, although it still normally calls the underlying toString(). It also works for {{jsxref("null")}}, {{jsxref("undefined")}}, and for {{jsxref("Symbol", "symbols")}}. For example:

+ +
var outputStrings = [];
+for (var i = 0, n = inputValues.length; i < n; ++i) {
+  outputStrings.push(String(inputValues[i]));
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.5', 'String')}}{{Spec2('ES5.1')}}
{{SpecName('ES2015', '#sec-string-objects', 'String')}}{{Spec2('ES2015')}}
{{SpecName('ESDraft', '#sec-string-objects', 'String')}}{{Spec2('ESDraft')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.String.String")}}

+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/global_objects/string/startswith/index.html b/files/ar/web/javascript/reference/global_objects/string/startswith/index.html new file mode 100644 index 0000000000..94b059d593 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/string/startswith/index.html @@ -0,0 +1,101 @@ +--- +title: String.prototype.startsWith() +slug: Web/JavaScript/Reference/Global_Objects/String/startsWith +translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith +--- +
{{JSRef}}
+ +

startsWith()
+ .طريقة يمكنك تحقق بها إن كان نص يبدء بالعبارة ما و تعيد لك صحيح أو خطأ

+ +
{{EmbedInteractiveExample("pages/js/string-startswith.html")}}
+ + + +

تركيب الجملة | Syntax

+ +
str.startsWith(searchString[, position])
+ +

المعاملات | Parameters

+ +
+
searchString
+
العبارة المبحوث عنها فيالنص.
+
position {{optional_inline}}
+
مكان الذي يبدأ البحث منه فيالنص   الإفتراضي 0
+
+ +

القيمة العائدة | Return value

+ +

العائد يكون صحيح إذا وجد تطابق
+ و إن لم يجيد تطابق يعيد لك خطأ

+ +

الوصف | Description

+ +

هذه الطريقة حساسة إتجاه الحروف
+ case-sensitive

+ +

أمثلة | Examples

+ +

Using startsWith()

+ +
//startswith
+var str = 'To be, or not to be, that is the question.';
+
+console.log(str.startsWith('To be'));         // true
+console.log(str.startsWith('not to be'));     // false
+console.log(str.startsWith('not to be', 10)); // true
+
+ +

Polyfill

+ +

This method has been added to the ECMAScript 2015 specification and may not be available in all JavaScript implementations yet. However, you can polyfill String.prototype.startsWith() with the following snippet:

+ +
if (!String.prototype.startsWith) {
+    Object.defineProperty(String.prototype, 'startsWith', {
+        value: function(search, pos) {
+            pos = !pos || pos < 0 ? 0 : +pos;
+            return this.substring(pos, pos + search.length) === search;
+        }
+    });
+}
+
+ +

A more robust (fully ES2015 specification compliant), but less performant and compact, Polyfill is available on GitHub by Mathias Bynens.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}{{Spec2('ESDraft')}}
+ +

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

+ + + +

{{Compat("javascript.builtins.String.startsWith")}}

+ +

ذات صلة

+ + 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" new file mode 100644 index 0000000000..cb667fd3d8 --- /dev/null +++ "b/files/ar/web/javascript/reference/global_objects/\330\247\331\204\330\247\330\261\331\202\330\247\331\205/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/index.html b/files/ar/web/javascript/reference/index.html new file mode 100644 index 0000000000..db41d77223 --- /dev/null +++ b/files/ar/web/javascript/reference/index.html @@ -0,0 +1,50 @@ +--- +title: مرجع جافا سكريبت +slug: Web/JavaScript/Reference +tags: + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference +--- +
{{JsSidebar}}
+ +

This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more about this reference.

+ +

Global Objects

+ +

This chapter documents all the JavaScript standard built-in objects, along with their methods and properties.

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}
+ +

Statements

+ +

This chapter documents all the JavaScript statements and declarations.

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}
+ +

Expressions and operators

+ +

This chapter documents all the JavaScript expressions and operators.

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}
+ +

Functions

+ +

This chapter documents how to work with JavaScript functions to develop your applications.

+ + + +

Additional reference pages

+ + diff --git a/files/ar/web/javascript/reference/operators/destructuring_assignment/index.html b/files/ar/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..d926351173 --- /dev/null +++ b/files/ar/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,428 @@ +--- +title: Destructuring assignment +slug: Web/JavaScript/Reference/Operators/Destructuring_assignment +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +
{{jsSidebar("Operators")}}
+ +
الإسناد بالتفكيك هو تعبير جافاسكربت يجعل من الممكن فك القيم من المصفوفات ( Arrays ) أو الخصائص من الكائنات ( Objects ) إلى متغيرات مميزة.
+ +
+ +
{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html", "taller")}}
+ + + +

Syntax

+ +
let a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // [30, 40, 50]
+
+({ a, b } = { a: 10, b: 20 });
+console.log(a); // 10
+console.log(b); // 20
+
+
+// Stage 4(finished) proposal
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // {c: 30, d: 40}
+
+ +

التفاصيل

+ +

توفر تعبيرات الكائن (Object) والمصفوفة (Array) طريقة سهلة لإنشاء حزم بيانات مخصصة.

+ +
const x = [1, 2, 3, 4, 5];
+
+ +

يَستخدِم الإسناد بالتفكيك (destructuring assignment) بنية مماثلة، ولكن على الجانب الأيسر من المهمة لتحديد القيم التي يجب فكها من مصدر المتغير الأساسي.

+ +
const x = [1, 2, 3, 4, 5];
+const [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+
+ +

تشبه هذه الإمكانية الميزات الموجودة بلغات مثل Perl و Python.

+ +

+ +

تفكيك المصفوفات

+ +

تعيين المتغير الأساسي

+ +
const foo = ['one', 'two', 'three'];
+
+const [red, yellow, green] = foo;
+console.log(red); // "one"
+console.log(yellow); // "two"
+console.log(green); // "three"
+
+ +

Assignment separate from declaration

+ +

A variable can be assigned its value via destructuring separate from the variable's declaration.

+ +
let a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+
+ +

Default values

+ +

A variable can be assigned a default, in the case that the value unpacked from the array is undefined.

+ +
let a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+
+ +

Swapping variables

+ +

Two variables values can be swapped in one destructuring expression.

+ +

Without destructuring assignment, swapping two values requires a temporary variable (or, in some low-level languages, the XOR-swap trick).

+ +
let a = 1;
+let b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+
+const arr = [1,2,3];
+[arr[2], arr[1]] = [arr[1], arr[2]];
+console.log(arr); // [1,3,2]
+
+
+ +

Parsing an array returned from a function

+ +

It's always been possible to return an array from a function. Destructuring can make working with an array return value more concise.

+ +

In this example, f() returns the values [1, 2] as its output, which can be parsed in a single line with destructuring.

+ +
function f() {
+  return [1, 2];
+}
+
+let a, b;
+[a, b] = f();
+console.log(a); // 1
+console.log(b); // 2
+
+ +

Ignoring some returned values

+ +

You can ignore return values that you're not interested in:

+ +
function f() {
+  return [1, 2, 3];
+}
+
+const [a, , b] = f();
+console.log(a); // 1
+console.log(b); // 3
+
+const [c] = f();
+console.log(c); // 1
+
+ +

You can also ignore all returned values:

+ +
[,,] = f();
+
+ +

Assigning the rest of an array to a variable

+ +

When destructuring an array, you can unpack and assign the remaining part of it to a variable using the rest pattern:

+ +
const [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]
+ +

Be aware that a {{jsxref("SyntaxError")}} will be thrown if a trailing comma is used on the left-hand side with a rest element:

+ +
const [a, ...b,] = [1, 2, 3];
+
+// SyntaxError: rest element may not have a trailing comma
+// Always consider using rest operator as the last element
+
+ +

Unpacking values from a regular expression match

+ +

When the regular expression exec() method finds a match, it returns an array containing first the entire matched portion of the string and then the portions of the string that matched each parenthesized group in the regular expression. Destructuring assignment allows you to unpack the parts out of this array easily, ignoring the full match if it is not needed.

+ +
function parseProtocol(url) {
+  const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+  if (!parsedURL) {
+    return false;
+  }
+  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
+
+  const [, protocol, fullhost, fullpath] = parsedURL;
+  return protocol;
+}
+
+console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
+
+ +

Object destructuring

+ +

Basic assignment

+ +
const user = {
+    id: 42,
+    is_verified: true
+};
+
+const {id, is_verified} = user;
+
+console.log(id); // 42
+console.log(is_verified); // true
+
+ +

Assignment without declaration

+ +

A variable can be assigned its value with destructuring separate from its declaration.

+ +
let a, b;
+
+({a, b} = {a: 1, b: 2});
+ +
+

Notes: The parentheses ( ... ) around the assignment statement are required when using object literal destructuring assignment without a declaration.

+ +

{a, b} = {a: 1, b: 2} is not valid stand-alone syntax, as the {a, b} on the left-hand side is considered a block and not an object literal.

+ +

However, ({a, b} = {a: 1, b: 2}) is valid, as is const {a, b} = {a: 1, b: 2}

+ +

Your ( ... ) expression needs to be preceded by a semicolon or it may be used to execute a function on the previous line.

+
+ +

Assigning to new variable names

+ +

A property can be unpacked from an object and assigned to a variable with a different name than the object property.

+ +
const o = {p: 42, q: true};
+const {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true
+ +

Here, for example, const {p: foo} = o takes from the object o the property named p and assigns it to a local variable named foo.

+ +

Default values

+ +

A variable can be assigned a default, in the case that the value unpacked from the object is undefined.

+ +
const {a = 10, b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5
+ +

Assigning to new variables names and providing default values

+ +

A property can be both 1) unpacked from an object and assigned to a variable with a different name and 2) assigned a default value in case the unpacked value is undefined.

+ +
const {a: aa = 10, b: bb = 5} = {a: 3};
+
+console.log(aa); // 3
+console.log(bb); // 5
+
+ +

Unpacking fields from objects passed as function parameter

+ +
const user = {
+  id: 42,
+  displayName: 'jdoe',
+  fullName: {
+    firstName: 'John',
+    lastName: 'Doe'
+  }
+};
+
+function userId({id}) {
+  return id;
+}
+
+function whois({displayName, fullName: {firstName: name}}) {
+  return `${displayName} is ${name}`;
+}
+
+console.log(userId(user)); // 42
+console.log(whois(user));  // "jdoe is John"
+ +

This unpacks the id, displayName and firstName from the user object and prints them.

+ +

Setting a function parameter's default value

+ +
function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) {
+  console.log(size, coords, radius);
+  // do some chart drawing
+}
+
+drawChart({
+  coords: {x: 18, y: 30},
+  radius: 30
+});
+ +
+

In the function signature for drawChart above, the destructured left-hand side is assigned to an empty object literal on the right-hand side: {size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}. You could have also written the function without the right-hand side assignment. However, if you leave out the right-hand side assignment, the function will look for at least one argument to be supplied when invoked, whereas in its current form, you can simply call drawChart() without supplying any parameters. The current design is useful if you want to be able to call the function without supplying any parameters, the other can be useful when you want to ensure an object is passed to the function.

+
+ +

Nested object and array destructuring

+ +
const metadata = {
+  title: 'Scratchpad',
+  translations: [
+    {
+      locale: 'de',
+      localization_tags: [],
+      last_edit: '2014-04-14T08:43:37',
+      url: '/de/docs/Tools/Scratchpad',
+      title: 'JavaScript-Umgebung'
+    }
+  ],
+  url: '/en-US/docs/Tools/Scratchpad'
+};
+
+let {
+  title: englishTitle, // rename
+  translations: [
+    {
+       title: localeTitle, // rename
+    },
+  ],
+} = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"
+ +

For of iteration and destructuring

+ +
const people = [
+  {
+    name: 'Mike Smith',
+    family: {
+      mother: 'Jane Smith',
+      father: 'Harry Smith',
+      sister: 'Samantha Smith'
+    },
+    age: 35
+  },
+  {
+    name: 'Tom Jones',
+    family: {
+      mother: 'Norah Jones',
+      father: 'Richard Jones',
+      brother: 'Howard Jones'
+    },
+    age: 25
+  }
+];
+
+for (const {name: n, family: {father: f}} of people) {
+  console.log('Name: ' + n + ', Father: ' + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"
+
+ +

Computed object property names and destructuring

+ +

Computed property names, like on object literals, can be used with destructuring.

+ +
let key = 'z';
+let {[key]: foo} = {z: 'bar'};
+
+console.log(foo); // "bar"
+
+ +

Rest in Object Destructuring

+ +

The Rest/Spread Properties for ECMAScript proposal (stage 4) adds the rest syntax to destructuring. Rest properties collect the remaining own enumerable property keys that are not already picked off by the destructuring pattern.

+ +
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
+a; // 10
+b; // 20
+rest; // { c: 30, d: 40 }
+ +

Invalid JavaScript identifier as a property name

+ +

Destructuring can be used with property names that are not valid JavaScript {{glossary("Identifier", "identifiers")}} by providing an alternative identifier that is valid.

+ +
const foo = { 'fizz-buzz': true };
+const { 'fizz-buzz': fizzBuzz } = foo;
+
+console.log(fizzBuzz); // "true"
+
+ +

Combined Array and Object Destructuring

+ +

Array and Object destructuring can be combined. Say you want the third element in the array props below, and then you want the name property in the object, you can do the following:

+ +
const props = [
+  { id: 1, name: 'Fizz'},
+  { id: 2, name: 'Buzz'},
+  { id: 3, name: 'FizzBuzz'}
+];
+
+const [,, { name }] = props;
+
+console.log(name); // "FizzBuzz"
+
+ +

The prototype chain is looked up when the object is deconstructed 

+ +

When deconstructing an object, if a property is not accessed in itself, it will continue to look up along the prototype chain.

+ +
let obj = {self: '123'};
+obj.__proto__.prot = '456';
+const {self, prot} = obj;
+// self "123"
+// prot "456"（Access to the prototype chain）
+ +

Specifications

+ + + + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("javascript.operators.destructuring")}}

+
+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/operators/index.html b/files/ar/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..a5dc098a4f --- /dev/null +++ b/files/ar/web/javascript/reference/operators/index.html @@ -0,0 +1,302 @@ +--- +title: Expressions and operators +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - NeedsTranslation + - Operators + - TopicStub +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

This chapter documents all the JavaScript language operators, expressions and keywords.

+ +

Expressions and operators by category

+ +

For an alphabetical listing see the sidebar on the left.

+ +

Primary expressions

+ +

Basic keywords and general expressions in JavaScript.

+ +
+
{{jsxref("Operators/this", "this")}}
+
The this keyword refers to the function's execution context.
+
{{jsxref("Operators/function", "function")}}
+
The function keyword defines a function expression.
+
{{jsxref("Operators/class", "class")}}
+
The class keyword defines a class expression.
+
{{jsxref("Operators/function*", "function*")}}
+
The function* keyword defines a generator function expression.
+
{{jsxref("Operators/yield", "yield")}}
+
Pause and resume a generator function.
+
{{jsxref("Operators/yield*", "yield*")}}
+
Delegate to another generator function or iterable object.
+
{{experimental_inline}} {{jsxref("Operators/async_function", "async function*")}}
+
The async function defines an async function expression.
+
{{experimental_inline}} {{jsxref("Operators/await", "await")}}
+
Pause and resume an async function and wait for the promise's resolution/rejection.
+
{{jsxref("Global_Objects/Array", "[]")}}
+
Array initializer/literal syntax.
+
{{jsxref("Operators/Object_initializer", "{}")}}
+
Object initializer/literal syntax.
+
{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}
+
Regular expression literal syntax.
+
{{jsxref("Operators/Grouping", "( )")}}
+
Grouping operator.
+
+ +

Left-hand-side expressions

+ +

Left values are the destination of an assignment.

+ +
+
{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}
+
Member operators provide access to a property or method of an object
+ (object.property and object["property"]).
+
{{jsxref("Operators/new", "new")}}
+
The new operator creates an instance of a constructor.
+
new.target
+
In constructors, new.target refers to the constructor that was invoked by {{jsxref("Operators/new", "new")}}.
+
{{jsxref("Operators/super", "super")}}
+
The super keyword calls the parent constructor.
+
{{jsxref("Operators/Spread_operator", "...obj")}}
+
The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.
+
+ +

Increment and decrement

+ +

Postfix/prefix increment and postfix/prefix decrement operators.

+ +
+
{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}
+
Postfix increment operator.
+
{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}
+
Postfix decrement operator.
+
{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}
+
Prefix increment operator.
+
{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}
+
Prefix decrement operator.
+
+ +

Unary operators

+ +

A unary operation is operation with only one operand.

+ +
+
{{jsxref("Operators/delete", "delete")}}
+
The delete operator deletes a property from an object.
+
{{jsxref("Operators/void", "void")}}
+
The void operator discards an expression's return value.
+
{{jsxref("Operators/typeof", "typeof")}}
+
The typeof operator determines the type of a given object.
+
{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}
+
The unary plus operator converts its operand to Number type.
+
{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}
+
The unary negation operator converts its operand to Number type and then negates it.
+
{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}
+
Bitwise NOT operator.
+
{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}
+
Logical NOT operator.
+
+ +

Arithmetic operators

+ +

Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.

+ +
+
{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}
+
Addition operator.
+
{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}
+
Subtraction operator.
+
{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}
+
Division operator.
+
{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}
+
Multiplication operator.
+
{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}
+
Remainder operator.
+
+ +
+
{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}
+
Exponentiation operator.
+
+ +

Relational operators

+ +

A comparison operator compares its operands and returns a Boolean value based on whether the comparison is true.

+ +
+
{{jsxref("Operators/in", "in")}}
+
The in operator determines whether an object has a given property.
+
{{jsxref("Operators/instanceof", "instanceof")}}
+
The instanceof operator determines whether an object is an instance of another object.
+
{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}
+
Less than operator.
+
{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}
+
Greater than operator.
+
{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}
+
Less than or equal operator.
+
{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}
+
Greater than or equal operator.
+
+ +
+

Note: => is not an operator, but the notation for Arrow functions.

+
+ +

Equality operators

+ +

The result of evaluating an equality operator is always of type Boolean based on whether the comparison is true.

+ +
+
{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}
+
Equality operator.
+
{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}
+
Inequality operator.
+
{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}
+
Identity operator.
+
{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}
+
Nonidentity operator.
+
+ +

Bitwise shift operators

+ +

Operations to shift all bits of the operand.

+ +
+
{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}
+
Bitwise left shift operator.
+
{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}
+
Bitwise right shift operator.
+
{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}
+
Bitwise unsigned right shift operator.
+
+ +

Binary bitwise operators

+ +

Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.

+ +
+
{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}
+
Bitwise AND.
+
{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}
+
Bitwise OR.
+
{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}
+
Bitwise XOR.
+
+ +

Binary logical operators

+ +

Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.

+ +
+
{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}
+
Logical AND.
+
{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}
+
Logical OR.
+
+ +

Conditional (ternary) operator

+ +
+
{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}
+
+

The conditional operator returns one of two values based on the logical value of the condition.

+
+
+ +

Assignment operators

+ +

An assignment operator assigns a value to its left operand based on the value of its right operand.

+ +
+
{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}
+
Assignment operator.
+
{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}
+
Multiplication assignment.
+
{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}
+
Division assignment.
+
{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}
+
Remainder assignment.
+
{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}
+
Addition assignment.
+
{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}
+
Subtraction assignment
+
{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}
+
Left shift assignment.
+
{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}
+
Right shift assignment.
+
{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}
+
Unsigned right shift assignment.
+
{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}
+
Bitwise AND assignment.
+
{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}
+
Bitwise XOR assignment.
+
{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}
+
Bitwise OR assignment.
+
{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}
+ {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}
+
+

Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.

+
+
+ +

Comma operator

+ +
+
{{jsxref("Operators/Comma_Operator", ",")}}
+
The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.
+
+ +

Non-standard features

+ +
+
{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}
+
The function keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contains at least one {{jsxref("Operators/yield", "yield")}} expression.
+
{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}
+
The expression closure syntax is a shorthand for writing simple function.
+
{{non-standard_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}
+
Array comprehensions.
+
{{non-standard_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}
+
Generator comprehensions.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1', '#sec-11', 'Expressions')}}{{Spec2('ES1')}}Initial definition
{{SpecName('ES5.1', '#sec-11', 'Expressions')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}{{Spec2('ES6')}}New: Spread operator, destructuring assignment, super keyword.
{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}{{Spec2('ESDraft')}} 
+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/operators/new/index.html b/files/ar/web/javascript/reference/operators/new/index.html new file mode 100644 index 0000000000..3b39e0cf4e --- /dev/null +++ b/files/ar/web/javascript/reference/operators/new/index.html @@ -0,0 +1,178 @@ +--- +title: new operator +slug: Web/JavaScript/Reference/Operators/new +tags: + - HTTP + - OpenPractices + - البروتوكولات + - بحث + - لغة البرمجة +translation_of: Web/JavaScript/Reference/Operators/new +--- +
9 9090 jsSidebar ("عوامل التشغيل")}}
+ +

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

+ +
{{EmbedInteractiveExample ("pages / js / expressions-newoperator.html")}}
+ +

بناء الجملة

+ +
new constructor[([arguments])]
+ +

المعلمات

+ +
+
constructor
+
فئة أو وظيفة تحدد نوع مثيل الكائن.
+
+ +
+
arguments
+
قائمة القيم التي constructorسيتم الاتصال بها.
+
+ +

وصف

+ +

تقوم newالكلمة الرئيسية بالأشياء التالية:

+ +
    +
  1. ينشئ كائن JavaScript عاديًا فارغًا ؛
    2. +
  2. روابط (تحدد منشئ) هذا الكائن إلى كائن آخر ؛
    3. +
  3. يمر كائن تم إنشاؤه حديثا من الخطوة 1 كما في thisالسياق؛
    4. +
  4. يعود thisإذا لم الدالة بإرجاع كائن.
    5. +
+ +

يتطلب إنشاء كائن معرف من قبل المستخدم خطوتين:

+ +
    +
  1. حدد نوع الكائن عن طريق كتابة دالة.
    2. +
  2. إنشاء مثيل للكائن باستخدام new.
    3. +
+ +

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

+ +

عند تنفيذ الكود ، تحدث الأشياء التالية:new Foo(...)

+ +
    +
  1. يتم إنشاء كائن جديد ، وراثة من Foo.prototype.
    2. +
  2. Fooيتم استدعاء دالة المُنشئ بالوسيطات المحددة ، وتكون thisمرتبطة بالكائن الذي تم إنشاؤه حديثًا. يكافئ ، على سبيل المثال ، إذا لم يتم تحديد قائمة وسيطة ، يتم استدعاؤه بدون وسيطات.new Foonew Foo()Foo
    3. +
  3. يصبح الكائن (ليس فارغًا ، أو خطأ ، أو 3.1415 أو أنواعًا أولية أخرى) التي تُرجعها دالة المُنشئ نتيجة newالتعبير بالكامل . إذا لم تُرجع دالة المُنشئ كائنًا بشكل صريح ، فسيتم استخدام الكائن الذي تم إنشاؤه في الخطوة 1 بدلاً من ذلك. (عادةً لا تُرجع المنشئات قيمة ، لكن يمكنهم اختيار القيام بذلك إذا كانوا يريدون تجاوز عملية إنشاء الكائن العادية.)
    4. +
+ +

يمكنك دائمًا إضافة خاصية إلى كائن محدد مسبقًا. على سبيل المثال ، car1.color = "black"تضيف العبارة خاصية colorإلى car1، وتخصص لها قيمة " black". ومع ذلك ، هذا لا يؤثر على أي كائنات أخرى. لإضافة الخاصية الجديدة إلى جميع الكائنات من نفس النوع ، يجب إضافة الخاصية إلى تعريف Carنوع الكائن.

+ +

يمكنك إضافة خاصية مشتركة إلى نوع كائن محدد مسبقًا باستخدام Function.prototypeالخاصية. يحدد هذا الخاصية التي يتم مشاركتها بواسطة جميع الكائنات التي تم إنشاؤها باستخدام هذه الوظيفة ، بدلاً من مثيل واحد فقط من نوع الكائن. تضيف التعليمة البرمجية التالية خاصية لون مع قيمة "original color"لكل كائنات النوع Car، ثم تكتب فوق تلك القيمة بالسلسلة " black" فقط في كائن المثيل car1. لمزيد من المعلومات ، انظر النموذج الأولي .

+ +
function Car() {}
+car1 = new Car();
+car2 = new Car();
+
+console.log(car1.color);    // undefined
+
+Car.prototype.color = 'original color';
+console.log(car1.color);    // 'original color'
+
+car1.color = 'black';
+console.log(car1.color);    // 'black'
+
+console.log(Object.getPrototypeOf(car1).color); // 'original color'
+console.log(Object.getPrototypeOf(car2).color); // 'original color'
+console.log(car1.color);   // 'black'
+console.log(car2.color);   // 'original color'
+
+ +
+

إذا لم تكتب newعامل التشغيل ، فسيتم استدعاء دالة الباني مثل أي دالة عادية ، دون إنشاء كائن. في هذه الحالة ، قيمة thisمختلفة أيضًا.

+
+ +

أمثلة

+ +

نوع الكائن ومثيل الكائن

+ +

لنفترض أنك تريد إنشاء نوع كائن للسيارات. تريد أن يتم استدعاء هذا النوع من الكائنات Car، وتريد أن يكون لها خصائص لـ make و model و year. للقيام بذلك ، يمكنك كتابة الوظيفة التالية:

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+ +

الآن يمكنك إنشاء كائن يسمى على myCarالنحو التالي:

+ +
var myCar = new Car('Eagle', 'Talon TSi', 1993);
+
+ +

تقوم هذه العبارة بإنشاء myCarوتعيين القيم المحددة لخصائصها. ثم قيمة myCar.makeالسلسلة "النسر" ، myCar.yearهو العدد الصحيح 1993 ، وهلم جرا.

+ +

يمكنك إنشاء أي عدد من carالكائنات عن طريق المكالمات إلى new. فمثلا:

+ +
var kensCar = new Car('Nissan', '300ZX', 1992);
+
+ +

خاصية الكائن التي هي نفسها كائن آخر

+ +

لنفترض أنك قمت بتعريف كائن يسمى على PersSexonالنحو التالي:

+ +
function Person(name, age, sex) {XxxXxx
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+
+ +

ثم قم بإنشاء كائنين جديدين على Personالنحو التالي:

+ +
var rand = new Person('Rand McNally', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+
+ +

ثم يمكنك إعادة كتابة تعريف Carلتضمين ownerخاصية تأخذ Personكائنًا ، على النحو التالي:

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+
+ +

لإنشاء كائنات جديدة ، يمكنك بعد ذلك استخدام ما يلي:

+ +
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+
+ +

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

+ +
car2.owner.name
+
+ +

مواصفات

+ + + + + + + + + + + + +
تخصيص
{{SpecName ('ESDraft'، '# sec-new-worker'، 'The new Operator')}}
+ +

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

+ + + +

{{Compat ("javascript.operators.new")}}

+ +

أنظر أيضا

+ + diff --git a/files/ar/web/javascript/reference/operators/object_initializer/index.html b/files/ar/web/javascript/reference/operators/object_initializer/index.html new file mode 100644 index 0000000000..b6df949722 --- /dev/null +++ b/files/ar/web/javascript/reference/operators/object_initializer/index.html @@ -0,0 +1,403 @@ +--- +title: Object initializer تهيئة الكائن +slug: Web/JavaScript/Reference/Operators/Object_initializer +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +
{{JsSidebar("Operators")}}
+ +

 

+ +
+

يمكن تهيئة الكائنات باستخدام ()new Object او ()Object.create او باستخدام مهيئ الكائن (Object initializer). مهيئ الكائن هو عبارة عن قائمة من الخصائص، وكل خاصية من هذه الخصائص عبارة عن زوجين وهما، اسم الخاصية وقيمة الخاصية، يفصل بين كل زوجين بفاصلة، يمكن لهذه القائمة ان تحتوي على صفر او اكثر من هذه الازواج، محاطة بأقواس متعرجة ({}).

+ +

Syntax

+ +
var o = {};
+var o = {a: 'foo', b: 42, c: {}};
+
+var a = 'foo', b = 42, c = {};
+var o = {a: a, b: b, c: c};
+
+var o = {
+  property: function ([parameters]) {},
+  get property() {},
+  set property(value) {}
+};
+
+ +

New notations in ECMAScript 2015

+ +

يرجى الاطلاع على جدول التوافق اسفل الصفحة. هذه التعليمات البرمجية ستؤدي إلى أخطاء syntax errors، في البيئات الغير الداعمة.

+ +
// Shorthand property names (ES2015)
+var a = 'foo', b = 42, c = {};
+var o = {a, b, c};
+
+// Shorthand method names (ES2015)
+var o = {
+  property([parameters]) {},
+  get property() {},
+  set property(value) {}
+};
+
+// Computed property names (ES2015)
+var prop = 'foo';
+var o = {
+  [prop]: 'hey',
+  ['b' + 'ar']: 'there'
+};
+ +

الوصف

+ +

مهيئ الكائن هو تعبير عن كيفية وصف وتهيئة الكائن {{jsxref("Object")}}. تتكون الكائنات من الخصائص، والتي يتم استخدامها لوصف الكائن. قيمة خاصية الكائن يمكن أن تحتوي على أنواع البيانات الأولية {{Glossary("primitive")}} كما يمكنها ايضا ان تحتوي على كائنات اخرى.

+ +

إنشاء الكائنات

+ +

يمكن إنشاء كائن فارغ بدون خصائص هكذا:

+ +
var object = {};
+ +

ميزة هذا literal او المهئ هي انه يمكنك سريعا من انشاء الكائنات وخصائصها داخل الأقواس المتعرجة. يمكنك ببساطة انشاء قائمة مكونة من زوجين key: value مفصولة بفاصلة. تقوم التعليمة البرمجية التالية بانشاء كائن مع ثلاثة خصائص والمفاتيح هي "foo", "age" و "baz". وقيم هذه المفاتيح هي string "bar", a number 42، فيما قيمة المفتاح "baz" عبارة عن كائن هو ايضا له مفتاح وقيمة.

+ +
var object = {
+  foo: 'bar',
+  age: 42,
+  baz: {myProp: 12}
+}
+ +

الوصول إلى الخصائص

+ +

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

+ +
object.foo; // "bar"
+object['age']; // 42
+
+object.foo = 'baz';
+
+ +

تعريف الخصائص

+ +

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

+ +
var a = 'foo',
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};
+ +

ECMAScript 2015، جاءت بطريقة مختصرة لتحقيق نفس الغرض:

+ +
var a = 'foo',
+    b = 42,
+    c = {};
+
+// Shorthand property names (ES2015)
+var o = {a, b, c};
+
+// In other words,
+console.log((o.a === {a}.a)); // true
+
+ +

أسماء الخصائص المكررة

+ +

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

+ +
var a = {x: 1, x: 2};
+console.log(a); // {x: 2}
+
+ +

في ECMAScript 5 strict mode تكرار اسماء الخصائص سينتج عنها اخطاء {{jsxref("SyntaxError")}}.

+ +
function haveES2015DuplicatePropertySemantics() {
+  'use strict';
+  try {
+    ({prop: 1, prop: 2});
+
+    // No error thrown, duplicate property names allowed in strict mode
+    return true;
+  } catch(e) {
+    // Error thrown, duplicates prohibited in strict mode
+    return false;
+  }
+}
+ +

تعريف الوظائف

+ +

خاصية الكائن يمكن أن تشير أيضا إلى الوظائف function او getter او setter.

+ +
var o = {
+  property: function ([parameters]) {},
+  get property() {},
+  set property(value) {}
+};
+ +

في ECMAScript 2015، اصبح الاختصار متاحا، حيث أن الكلمة المحجوزة function لم تعد ضرورية.

+ +
// Shorthand method names (ES2015)
+var o = {
+  property([parameters]) {},
+  get property() {},
+  set property(value) {},
+  * generator() {}
+};
+
+ +

في ECMAScript 2015، هناك طريقة لاختصار تعريف الخصائص التي قيمها generator functions :

+ +
var o = {
+  * generator() {
+    ...........
+  }
+};
+ +

في ECMAScript 5، سوف تكتب هكذا (لكن لاحظ أن ES5 قد لا توجد مولدات):

+ +
var o = {
+  generator: function *() {
+    ...........
+  }
+};
+ +

لمزيد من المعلومات والأمثلة حول الوظائف، راجع method definitions.

+ +

أسماء الخصائص المحوسبة

+ +

ابتداءا من ECMAScript 2015، مهئ الكائن اصبح يدعم اسماء الخصائص المحوسبة. والتي تسمح لك بوضع التعبير بين أقواس مربعة []، والتي ستعتمد كاسم للخاصية. وهي متسقة مع الاقواس المربعة التي تستخدم للوصول الى الخصائص، property accessor والتي قد تستخدم بالفعل لقراءة وتعيين الخصائص. الآن يمكنك استخدام نفس التعبير المستخدم في object literals، هكذا:

+ +
// Computed property names (ES2015)
+var i = 0;
+var a = {
+  ['foo' + ++i]: i,
+  ['foo' + ++i]: i,
+  ['foo' + ++i]: i
+};
+
+console.log(a.foo1); // 1
+console.log(a.foo2); // 2
+console.log(a.foo3); // 3
+
+var param = 'size';
+var config = {
+  [param]: 12,
+  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // {size: 12, mobileSize: 4}
+ +

Prototype mutation

+ +

الخاصية المعرفة على هذا الشكل  proto__: value__ او proto__": value__" لا تقوم بإنشاء خاصية جديدة باسم  __proto__. بل تقوم  بتغيير [[Prototype]] الكائن نفسه، وذالك من خلال اسناد قيمة له تكون عبارة عن كائن اخر او null. (إذا كانت القيمة المسندة ليست كائن أو null، فلا يتم تغيير شئ في الكائن) على سبيل المثال:

+ +
var obj1 = {x: 10};
+
+var obj2 = {
+	y: 20,
+    __proto__: obj1
+};
+console.log( obj2.x ); // log: 10
+ +

تبين التعليمة البرمجية التالية، بعض التحققات من بعض انواع التغييرات:

+ +
var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);  // true
+
+var obj2 = {__proto__: null};
+assert(Object.getPrototypeOf(obj2) === null);              // true
+
+var protoObj = {};
+var obj3 = {'__proto__': protoObj};
+assert(Object.getPrototypeOf(obj3) === protoObj);          // true
+
+var obj4 = {__proto__: 'not an object or null'};
+assert(Object.getPrototypeOf(obj4) === Object.prototype);  // true
+assert(!obj4.hasOwnProperty('__proto__'));                 // true
+
+ +

لا يسمح بتغيير ال prototype الا مرة واحدة في object literal، واكثر من تغيير في ال prototype سيؤدي الى syntax error.

+ +

الخواص التي لا تستخدم النقطتين (:) تصبح خواص عادية وتتصرف كاي اسم اخر، وليس لها علاقة بتغيير ال prototype:

+ +
var __proto__ = 'variable';
+
+var obj1 = {__proto__};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty('__proto__'));
+assert(obj1.__proto__ === 'variable');
+
+var obj2 = {__proto__() { return 'hello'; }};
+assert(obj2.__proto__() === 'hello');
+
+var obj3 = {['__prot' + 'o__']: 17};
+assert(obj3.__proto__ === 17);
+
+ +

Object literal notation vs JSON

+ +

ال object literal notation ليس هو نفسه JavaScript Object Notation (JSON). على الرغم من أنها تبدو مشابهة، الا ان هنالك اختلافات كبيرة بينهما:

+ + +
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}initial definition.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}getter and setter added.
{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES2015')}}Shorthand method/property names and computed property names added.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(1.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}111
Computed property names{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34")}}{{CompatNo}}347.1
Shorthand property names{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("33")}}{{CompatNo}}349
Shorthand method names{{CompatChrome(42.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34")}}{{CompatNo}}349
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}111{{CompatChrome(1.0)}}
Computed property names{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34")}}{{CompatNo}}347.1{{CompatNo}}
Shorthand property names{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("33")}}{{CompatNo}}349{{CompatNo}}
Shorthand method names{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoMobile("34")}}{{CompatNo}}349{{CompatChrome(42.0)}}
+
+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/operators/operator_precedence/index.html b/files/ar/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..8b71a69143 --- /dev/null +++ b/files/ar/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,420 @@ +--- +title: أسبقية العوامل +slug: Web/JavaScript/Reference/Operators/Operator_Precedence +tags: + - أسبقية العوامل + - جافا سكربت + - عوامل رياضية +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +
{{jsSidebar("Operators")}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}
+ + + +

الترابطات 

+ +

تحدد الترابطات الطريقة التي يتم بها تحليل العوامل التي لها نفس الأسبقية. على سبيل المثال، لنقل أن:

+ +
a OP b OP c
+
+ +

تعني كلمة رابط - يسار (من اليسار إلى اليمين) أنها تتم معالجتها كـ a OP b) OP c) ، بينما تعني رابط - يمين (من اليمين إلى اليسار) أنها تُفسَّر على أنها (a OP (b OP c. عوامل التعيين هي رابط-يمين، حيث يمكنك كتابة:

+ +
a = b = 5;
+
+ +

مع النتيجة المتوقعة أن تحصل a و b على القيمة 5. وذلك لأن عامل التعيين يُرجع القيمة التي تم تعيينها. أولاً، يتم تعيين b على 5. ثم يتم تعيين a أيضًا على 5 ، قيمة الإرجاع b = 5 ، ويعرف أيضًا باسم المعامل الأيمن للتعيين.

+ +

أمثلة:

+ +
3 > 2 && 2 > 1
+// returns true تعيد لنا صح
+
+3 > 2 > 1
+// returns false because 3 > 2 is true, and true > 1 is false تعيد خطأ لأن 3>2 هي صحيحة، وصح > 1 هو خطأ
+// Adding parentheses makes things clear: (3 > 2) > 1 إضافة الأقواس تجعل كل شيء واضح: (3>2) 1
+ +

الجدول

+ +

الجدول التالي مرتب من (20) الأعلى أسبقية إلى الأقل وهو (1).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrecedenceOperator typeAssociativityIndividual operators
21{{jsxref("Operators/Grouping", "Grouping", "", 1)}} تجميعn/a( … )
20{{jsxref("Operators/Property_Accessors", "Member Access", "#Dot_notation", 1)}} الوصول الى عنصر +

left-to-right

+ +

من اليسار الى اليمين

+ 		… . …
{{jsxref("Operators/Property_Accessors", "Computed Member Access","#Bracket_notation", 1)}} الوصول لعنصر محسوب +

left-to-right

+ +

من اليسار الى اليمين

+ 		… [ … ]
{{jsxref("Operators/new","new")}} (with argument list) جديد مع (قائمة معاملات)n/anew … ( … )
Function Call استدعاء دالة +

left-to-right

+ +

من اليسار الى اليمين

+ 		… ( … )
Optional chaining تسلسل اختياري +

left-to-right

+ +

من اليسار الى اليمين

+ 		?.
19{{jsxref("Operators/new","new")}} (without argument list) جديد .. بدون قائمة معاملات +

right-to-left

+ +

من اليمين الى اليسار

+ 		new …
18{{jsxref("Operators/Arithmetic_Operators","Postfix Increment","#Increment", 1)}} إضافة بعد إعادة النتيجة n/a… ++
{{jsxref("Operators/Arithmetic_Operators","Postfix Decrement","#Decrement", 1)}} طرح بعد إعادة النتيجة… --
17Logical NOT نفي منطقي +

right-to-left

+ +

من اليمين الى اليسار

+ 		! …
Bitwise NOT نفي بالبت~ …
Unary Plus + أحادي+ …
Unary Negation - أحادي- …
Prefix Increment إضافة قبل إعادة النتيجة++ …
Prefix Decrement طرح قبل إعادة النتيجة-- …
{{jsxref("Operators/typeof", "typeof")}} نوع الtypeof …
{{jsxref("Operators/void", "void")}} مجموعة خاليةvoid …
{{jsxref("Operators/delete", "delete")}} حذفdelete …
{{jsxref("Operators/await", "await")}} انتظارawait …
16Exponentiation أُس (الرفع الى قوة) +

right-to-left

+ +

من اليمين الى اليسار

+ 		… ** …
15Multiplication الضرب +

left-to-right

+ +

من اليسار الى اليمين

+ 		… * …
Division القسمة… / …
Remainder الباقي… % …
14Addition الجمع +

left-to-right

+ +

من اليسار الى اليمين

+ 		… + …
Subtraction الطرح… - …
13Bitwise Left Shift إزاحة لليسار بالبت +

left-to-right

+ +

من اليسار الى اليمين

+ 		… << …
Bitwise Right Shift إزاحة لليمين بالبت… >> …
Bitwise Unsigned Right Shift… >>> …
12Less Than أصغر من +

left-to-right

+ +

من اليسار الى اليمين

+ 		… < …
Less Than Or Equal أصغر من أو يساوي… <= …
Greater Than أكبر من… > …
Greater Than Or Equal أكبر من أو يساوي… >= …
{{jsxref("Operators/in", "in")}} في… in …
{{jsxref("Operators/instanceof", "instanceof")}} مشتق من … instanceof …
11Equality يساوي +

left-to-right

+ +

من اليسار الى اليمين

+ 		… == …
Inequality لا يساوي… != …
Strict Equality مساواة قطعية… === …
Strict Inequality لا يساوي قطعيا… !== …
10Bitwise AND و بالبت +

left-to-right

+ +

من اليسار الى اليمين

+ 		… & …
9Bitwise XOR  +

left-to-right

+ +

من اليسار الى اليمين

+ 		… ^ …
8Bitwise OR أو بالبت +

left-to-right

+ +

من اليسار الى اليمين

+ 		… | …
7Nullish coalescing operator +

left-to-right

+ +

من اليسار الى اليمين

+ 		… ?? …
6Logical AND و المنطقية +

left-to-right

+ +

من اليسار الى اليمين

+ 		… && …
5Logical OR أو المنطقية +

left-to-right

+ +

من اليسار الى اليمين

+ 		… || …
4Conditional الشرطية +

right-to-left

+ +

من اليمين الى اليسار

+ 		… ? … : …
3Assignment التعيين +

right-to-left

+ +

من اليمين الى اليسار

+ 		… = …
… += …
… -= …
… **= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
2{{jsxref("Operators/yield", "yield")}} +

right-to-left

+ +

من اليمين الى اليسار

+ 		yield …
{{jsxref("Operators/yield*", "yield*")}}yield* …
1Comma / Sequence فاصلة / تسلسل +

left-to-right

+ +

من اليسار الى اليمين

+ 		… , …
diff --git a/files/ar/web/javascript/reference/operators/this/index.html b/files/ar/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..4e86b7e937 --- /dev/null +++ b/files/ar/web/javascript/reference/operators/this/index.html @@ -0,0 +1,381 @@ +--- +title: this +slug: Web/JavaScript/Reference/Operators/this +translation_of: Web/JavaScript/Reference/Operators/this +--- +
{{jsSidebar ("عوامل التشغيل")}}
+ +

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

+ +

في معظم الحالات ، thisيتم تحديد القيمة من خلال كيفية استدعاء دالة (ربط وقت التشغيل). لا يمكن تعيينه عن طريق التعيين أثناء التنفيذ ، وقد يكون مختلفًا في كل مرة يتم استدعاء الوظيفة. قدم ES5 طريقة {{jsxref ("Function.prototype.bind ()"، "bind ()")}} إلى {{jsxref ('Operators / this'، ") تعيين قيمة الوظيفة thisبغض النظر عن كيفية تسميتها" قدم كل من "The_bind_method" و 1)}} و ES2015 دالات الأسهم التي لا توفر ربطًا خاصًا بها this(فهي تحتفظ thisبقيمة السياق المعجم المرفق).

+ +
{{EmbedInteractiveExample ("pages / js / expressions-this.html")}}
+ + + +

بناء الجملة

+ +
هذه
+ +

القيمة

+ +

خاصية سياق التنفيذ (عام ، أو وظيفة ، أو تقييم) التي ، في الوضع غير الصارم ، تكون دائمًا مرجعًا إلى كائن وفي الوضع الصارم يمكن أن تكون أي قيمة.

+ +

السياق العالمي

+ +

في سياق التنفيذ العام (خارج أي وظيفة) ، thisيشير إلى الكائن العام سواء في الوضع الصارم أم لا.

+ +
// في متصفحات الويب ، يكون كائن النافذة أيضًا هو الكائن العام:
+console.log (هذه النافذة ===) ؛ // صحيح
+
+أ = 37 ؛
+console.log (window.a) ؛ // 37
+
+this.b = "MDN" ؛
+console.log (window.b) // "MDN"
+console.log (ب) // "MDN"
+
+ +
+

ملاحظة: يمكنك دائمًا الحصول بسهولة على الكائن العام باستخدام خاصية {{jsxref ("globalThis")}} العمومية ، بغض النظر عن السياق الحالي الذي تعمل فيه التعليمات البرمجية الخاصة بك.

+
+ +

سياق الوظيفة

+ +

داخل الدالة ، thisتعتمد القيمة على كيفية استدعاء الوظيفة.

+ +

مكالمة بسيطة

+ +

نظرًا لأن الشفرة التالية ليست في وضع صارم ، ولأن القيمة thisلم يتم تعيينها بواسطة المكالمة ، thisفسيتم تعيينها افتراضيًا على الكائن العام ، وهو {{domxref ("Window"، "window")}} في المتصفح.

+ +
الدالة f1 () {
+  أعد هذا ؛
+}}
+
+// في متصفح:
+f1 () === نافذة ؛ // صحيح
+
+// في العقدة:
+f1 () === عام ؛ // صحيح
+ +

ومع ذلك ، في الوضع الصارم ، إذا thisلم يتم تعيين القيمة عند إدخال سياق التنفيذ ، فإنها تظل كما undefinedهو موضح في المثال التالي:

+ +
الدالة f2 () {
+  "استخدام صارم" ؛ // انظر الوضع الصارم
+  أعد هذا ؛
+}}
+
+f2 () === غير معرّف ؛ // صحيح
+
+ +
في المثال الثاني ، thisيجب أن يكون {{jsxref ("undefined")}} ، لأنه f2تم استدعاؤه مباشرةً وليس كطريقة أو خاصية لكائن (مثل window.f2()). لم يتم تنفيذ هذه الميزة في بعض المتصفحات عندما بدأوا في دعم الوضع الصارم لأول مرة . ونتيجة لذلك ، أعادوا windowالكائن بشكل غير صحيح .
+ +

لتعيين قيمة thisإلى قيمة معينة عند استدعاء دالة ، استخدم {{jsxref ("Function.prototype.call ()" أو "call ()")}} أو {{jsxref ("Function.prototype.apply ( ) "،" Apply () ")}} كما في الأمثلة التالية.

+ +

مثال 1

+ +
// يمكن تمرير كائن باعتباره الوسيطة الأولى للاتصال أو التطبيق وهذا سوف يرتبط به.
+var obj = {a: 'Custom'} ؛
+
+// تم تعيين هذه الخاصية على الكائن العام
+var a = 'Global'؛
+
+الدالة whatsThis () {
+  أعد هذا. // تعتمد قيمة هذا على كيفية استدعاء الوظيفة
+}}
+
+ما هذا()؛ // "عالمي"
+whatsThis.call (obj) ؛ // 'مخصص'
+whatsThis.apply (obj) ؛ // 'مخصص'
+
+ +

مثال 2

+ +
إضافة دالة (ج ، د) {
+  إرجاع هذا. a + this.b + c + d ؛
+}}
+
+var o = {a: 1، b: 3} ؛
+
+// المعلمة الأولى هي الكائن المطلوب استخدامه كـ
+// 'this' ، يتم تمرير المعلمات اللاحقة كـ 
+// الوسيطات في استدعاء الوظيفة
+add.call (س ، 5 ، 7) ؛ // 16
+
+// المعلمة الأولى هي الكائن المطلوب استخدامه كـ
+// 'this' ، والثاني عبارة عن مصفوفة
+يتم استخدام // members كوسيطة في استدعاء دالة
+add.apply (س ، [10 ، 20]) ؛ // 34
+
+ +

علما بأن في الوضع غير صارمة، مع callو apply، إذا كانت القيمة التي تم تمريرها كما thisليست كائن، سيتم إجراء محاولة لتحويله إلى كائن باستخدام الداخلية ToObjectالعملية. لذا ، إذا كانت القيمة التي تم تمريرها بدائية مثل 7أو 'foo'، سيتم تحويلها إلى كائن باستخدام المُنشئ ذي الصلة ، لذلك 7يتم تحويل الرقم البدائي إلى كائن كما لو كان بواسطة new Number(7)والسلسلة 'foo'إلى كائن كما لو كان new String('foo')، على سبيل المثال

+ +
شريط الوظائف () {
+  console.log (Object.prototype.toString.call (this)) ؛
+}}
+
+bar.call (7) ؛ // [رقم الكائن]
+bar.call ('foo') ؛ // [سلسلة الكائن]
+
+ +

على bindطريقة

+ +

قدم ECMAScript 5 {{jsxref ("Function.prototype.bind ()")}}}. f.bind(someObject)يؤدي الاستدعاء إلى إنشاء وظيفة جديدة بنفس الجسم والنطاق f، ولكن thisفي حالة حدوثها في الوظيفة الأصلية ، في الوظيفة الجديدة ، يتم ربطها بشكل دائم بالحجة الأولى bind، بغض النظر عن كيفية استخدام الوظيفة.

+ +
دالة f () {
+  أعد هذا.
+}}
+
+var g = f.bind ({a: 'azerty'}) ؛
+console.log (g ()) ؛ // azerty
+
+var h = g.bind ({a: 'yoo'}) ؛ // bind يعمل مرة واحدة فقط!
+console.log (h ()) ؛ // azerty
+
+var o = {a: 37، f: f، g: g، h: h} ؛
+console.log (oa، of ()، og ()، oh ())؛ // 37،37، azerty، azerty
+
+ +

وظائف السهم

+ +

في دوال السهم ، thisيحتفظ بقيمة السياق المعجم المتضمن this. في الكود العام ، سيتم تعيينه على الكائن العام:

+ +
var globalObject = هذا ؛
+var foo = (() => this) ؛
+console.log (foo () === globalObject) ؛ // صحيح
+ +
+

ملاحظة: إذا thisتم تمرير الوسيطة إلى call، bindأو applyعند استدعاء وظيفة السهم ، فسيتم تجاهلها. لا يزال بإمكانك إضافة وسيطات إلى المكالمة ، ولكن thisArgيجب ضبط الوسيطة الأولى ( ) على null.

+
+ +
// Call كطريقة لكائن
+var obj = {func: foo} ؛
+console.log (obj.func () === globalObject) ؛ // صحيح
+
+// محاولة تعيين هذا باستخدام المكالمة
+console.log (foo.call (obj) === globalObject) ؛ // صحيح
+
+// جرت محاولة ضبط ذلك باستخدام الربط
+foo = foo.bind (obj) ؛
+console.log (foo () === globalObject) ؛ // صحيح
+ +

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

+ +
// إنشاء كائن بشريط أسلوب يقوم بإرجاع دالة
+// يعيد هذا. يتم إنشاء الدالة التي تم إرجاعها كـ
+// دالة سهم ، لذا فهي مرتبطة بشكل دائم بـ
+// هذه الدالة المرفقة. يمكن تعيين قيمة الشريط
+// في المكالمة ، والتي تحدد بدورها قيمة 
+// عادت الدالة.
+var obj = {
+  شريط: الوظيفة () {
+    var x = (() => this) ؛
+    العودة س ؛
+  }}
+} ؛
+
+// Call bar كطريقة للهدف ، وضبط هذا الأمر على obj
+// تعيين مرجع للدالة التي تم إرجاعها إلى fn
+var fn = obj.bar () ،
+
+// Call fn دون تعيين هذا ، سيكون الوضع الافتراضي عادةً
+// إلى الكائن العام أو غير محدد في الوضع الصارم
+console.log (fn () === obj) ؛ // صحيح
+
+// لكن احذر إذا رجعت إلى طريقة الكائن بدون تسميتها
+var fn2 = obj.bar ،
+// استدعاء وظيفة السهم هذا من داخل طريقة الشريط ()
+// سيعود الآن النافذة ، لأنه يتبع هذا من fn2.
+console.log (fn2 () () == window) ؛ // صحيح
+
+ +

في أعلاه ، تم تعيين الوظيفة (يطلق عليها الوظيفة المجهولة أ) obj.barلإرجاع وظيفة أخرى (يطلق عليها الوظيفة المجهولة ب) التي تم إنشاؤها كدالة سهم. ونتيجة لذلك، وظيفة B في thisتعيين دائم لل thisمن obj.bar(وظيفة A) عندما دعا. عندما يتم استدعاء الدالة التي تم إرجاعها (الوظيفة B) ، thisستكون دائمًا ما تم تعيينها عليه في البداية. في المثال رمز أعلاه، وظيفة باء thisمن المقرر أن وظيفة A و thisالذي هو obj، لذلك لا يزال المقرر أن objحتى عندما دعا بطريقة من شأنها أن تحدد عادة في thisل undefinedأو الكائن العالمي (أو أي طريقة أخرى كما في المثال السابق في عالمي سياق التنفيذ).

+ +

كطريقة كائن

+ +

عندما يتم استدعاء دالة كطريقة لكائن ما ، thisيتم تعيينها على الكائن الذي يتم استدعاء الطريقة.

+ +

في المثال التالي ، عندما o.f()يتم استدعاء ، داخل الوظيفة thisمنضمة إلى oالكائن.

+ +
var o = {
+  الدعامة: 37 ،
+  و: الوظيفة () {
+    أعد هذا. prop؛
+  }}
+} ؛
+
+console.log (من ()) ؛ // 37
+
+ +

لاحظ أن هذا السلوك لا يتأثر على الإطلاق بكيفية أو مكان تعريف الوظيفة. في المثال السابق ، قمنا بتعريف الوظيفة المضمنة fكعضو أثناء تعريف o. ومع ذلك ، كان بإمكاننا تحديد الوظيفة بسهولة ثم إرفاقها بها لاحقًا o.f. يؤدي القيام بذلك إلى نفس السلوك:

+ +
var o = {prop: 37} ؛
+
+وظيفة مستقلة () {
+  أعد هذا. prop؛
+}}
+
+of = مستقل ؛
+
+console.log (من ()) ؛ // 37
+
+ +

يوضح هذا أنه من المهم فقط أن يتم استدعاء الوظيفة من fعضو o.

+ +

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

+ +
ob = {g: Independent، prop: 42} ؛
+console.log (obg ()) ؛ // 42
+
+ +

this في سلسلة النموذج الأولي للكائن

+ +

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

+ +
var o = {f: function () {return this.a + this.b؛ }} ؛
+var p = Object.create (o) ؛
+السلطة الفلسطينية = 1 ؛
+pb = 4 ؛
+
+console.log (pf ()) ؛ // 5
+
+ +

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

+ +

this مع مُدرب أو مُدرب

+ +

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

+ +
الدالة () {
+  إرجاع this.a + this.b + this.c ؛
+}}
+
+var o = {
+  أ: 1 ،
+  ب: 2 ،
+  ج: 3 ،
+  الحصول على المتوسط ​​() {
+    العودة (this.a + this.b + this.c) / 3 ؛
+  }}
+} ؛
+
+Object.defineProperty (o، 'sum'، {
+    get: sum، enumerable: true، configurable: true})؛
+
+console.log (o. avage، o.sum) ؛ // 2 ، 6
+
+ +

كمنشئ

+ +

عند استخدام دالة كمنشئ (باستخدام الكلمة الرئيسية {{jsxref ("Operators / new"، "new")}}) ، thisفإنها مرتبطة بالعنصر الجديد الذي يتم إنشاؤه.

+ +
+

على الرغم من أن الإعداد الافتراضي للمنشئ هو إرجاع الكائن المشار إليه this، فإنه يمكنه بدلاً من ذلك إرجاع كائن آخر (إذا لم تكن القيمة المرجعة كائنًا ، فسيتم thisإرجاع الكائن).

+
+ +
/ *
+ * يعمل المنشئ على النحو التالي:
+ *
+ * وظيفة MyConstructor () {
+ * // كود الجسم للوظيفة الفعلية يظهر هنا.  
+ * // إنشاء خصائص على | هذا | مثل
+ * // مرغوب من خلال التنازل عنها. على سبيل المثال ،
+ * this.fum = "nom" ؛
+ * // إلى آخره...
+ *
+ * // إذا كانت الوظيفة تحتوي على بيان إرجاع ذلك
+ * // يقوم بإرجاع كائن ، سيكون هذا الكائن هو
+ * // نتيجة | جديد | التعبير. غير ذلك،
+ * // نتيجة التعبير هي الكائن
+ * // مرتبط حاليًا بـ | this |
+ * // (أي الحالة الشائعة التي تُرى عادةً).
+ *}
+ * /
+
+الدالة C () {
+  this.a = 37 ؛
+}}
+
+var o = new C () ،
+Console.log (oa) ؛ // 37
+
+
+الدالة C2 () {
+  this.a = 37 ؛
+  العودة {أ: 38} ؛
+}}
+
+o = C2 () جديد ؛
+Console.log (oa) ؛ // 38
+
+ +

في المثال الأخير ( C2) ، لأنه تم إرجاع كائن أثناء البناء ، thisيتم التخلص من الكائن الجديد الذي كان مرتبطًا به ببساطة. (هذا يجعل العبارة " this.a = 37;" رمزًا ميتًا بشكل أساسي . ليس ميتًا تمامًا لأنه يتم تنفيذه ، ولكن يمكن إزالته بدون أي تأثيرات خارجية.)

+ +

كمعالج حدث DOM

+ +

عند استخدام دالة كمعالج للأحداث ، thisيتم تعيينها على العنصر الذي يتم وضع المستمع عليه (بعض المتصفحات لا تتبع هذا الاصطلاح للمستمعين المضافين ديناميكيًا بأساليب أخرى غير {{domxref ("EventTarget / addEventListener"، "addEventListener" () ")}}).

+ +
// عند الاتصال كمستمع ، يحول العنصر ذي الصلة إلى اللون الأزرق
+دالة bluify (e) {
+  // دائما صحيح او صادق
+  console.log (هذا === e.currentTarget) ؛
+  // true عندما يكون currentTarget والهدف هما نفس الكائن
+  console.log (هذا === e.target) ؛
+  this.style.backgroundColor = '# A5D9F3' ؛
+}}
+
+// احصل على قائمة بكل عنصر في المستند
+var Elements = document.getElementsByTagName ('*') ؛
+
+// أضف bluify كمستمع فوق حتى عندما
+تم النقر على عنصر // ، ويتحول إلى اللون الأزرق
+for (var i = 0؛ i <element.length؛ i ++) {
+  العناصر [i] .addEventListener ('click'، bluify، false) ؛
+}}
+ +

في معالج حدث مضمن

+ +

عندما يتم استدعاء الرمز من معالج مضمّن في الحدث ، thisيتم تعيينه على عنصر DOM الذي يتم وضع المستمع عليه:

+ +
<button onclick = "alert (this.tagName.toLowerCase ())؛">
+  تظهر هذه
+</button>
+
+ +

يظهر التنبيه أعلاه button. لاحظ أن الكود الخارجي فقط هو الذي تم thisضبطه بهذه الطريقة:

+ +
<button onclick = "alert ((function () {return this؛}) ())؛">
+  أظهر هذا الداخلية
+</button>
+
+ +

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

+ +

مواصفات

+ + + + + + + + + + + + +
تخصيص
{{SpecName ('ESDraft'، '# sec-this-keyword'، 'The this keyword')}}
+ +

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

+ + + +

{{Compat ("javascript.operators.this")}}

+ +

أنظر أيضا

+ + diff --git a/files/ar/web/javascript/reference/statements/index.html b/files/ar/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..b9fd7f94a0 --- /dev/null +++ b/files/ar/web/javascript/reference/statements/index.html @@ -0,0 +1,141 @@ +--- +title: Statements and declarations +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - statements +translation_of: Web/JavaScript/Reference/Statements +--- +
{{jsSidebar("Statements")}}
+ +

JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.

+ +

Statements and declarations by category

+ +

For an alphabetical listing see the sidebar on the left.

+ +

Control flow

+ +
+
{{jsxref("Statements/block", "Block")}}
+
A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.
+
{{jsxref("Statements/break", "break")}}
+
Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.
+
{{jsxref("Statements/continue", "continue")}}
+
Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.
+
{{jsxref("Statements/Empty", "Empty")}}
+
An empty statement is used to provide no statement, although the JavaScript syntax would expect one.
+
{{jsxref("Statements/if...else", "if...else")}}
+
Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.
+
{{jsxref("Statements/switch", "switch")}}
+
Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.
+
{{jsxref("Statements/throw", "throw")}}
+
Throws a user-defined exception.
+
{{jsxref("Statements/try...catch", "try...catch")}}
+
Marks a block of statements to try, and specifies a response, should an exception be thrown.
+
+ +

Declarations

+ +
+
{{jsxref("Statements/var", "var")}}
+
Declares a variable, optionally initializing it to a value.
+
{{jsxref("Statements/let", "let")}}
+
Declares a block scope local variable, optionally initializing it to a value.
+
{{jsxref("Statements/const", "const")}}
+
Declares a read-only named constant.
+
+ +

Functions and classes

+ +
+
{{jsxref("Statements/function", "function")}}
+
Declares a function with the specified parameters.
+
{{jsxref("Statements/function*", "function*")}}
+
Generators functions enable writing iterators more easily.
+
{{jsxref("Statements/return", "return")}}
+
Specifies the value to be returned by a function.
+
{{jsxref("Statements/class", "class")}}
+
Declares a class.
+
+ +

Iterations

+ +
+
{{jsxref("Statements/do...while", "do...while")}}
+
Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.
+
{{jsxref("Statements/for", "for")}}
+
Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.
+
{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}
+
Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.
+
{{jsxref("Statements/for...in", "for...in")}}
+
Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.
+
{{jsxref("Statements/for...of", "for...of")}}
+
Iterates over iterable objects (including {{jsxref("Global_Objects/Array","arrays","","true")}}, array-like objects, iterators and generators), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
+
{{jsxref("Statements/while", "while")}}
+
Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.
+
+ +

Others

+ +
+
{{jsxref("Statements/debugger", "debugger")}}
+
Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.
+
{{jsxref("Statements/export", "export")}}
+
Used to export functions to make them available for imports in external modules, another scripts.
+
{{jsxref("Statements/import", "import")}}
+
Used to import functions exported from an external module, another script.
+
{{jsxref("Statements/label", "label")}}
+
Provides a statement with an identifier that you can refer to using a break or continue statement.
+
+ +
+
{{deprecated_inline}} {{jsxref("Statements/with", "with")}}
+
Extends the scope chain for a statement.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1', '#sec-12', 'Statements')}}{{Spec2('ES1')}}Initial definition
{{SpecName('ES3', '#sec-12', 'Statements')}}{{Spec2('ES3')}} 
{{SpecName('ES5.1', '#sec-12', 'Statements')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ES6')}}New: function*, let, for...of, yield, class
{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ESDraft')}} 
+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/statements/return/index.html b/files/ar/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..191ab5296c --- /dev/null +++ b/files/ar/web/javascript/reference/statements/return/index.html @@ -0,0 +1,145 @@ +--- +title: return +slug: Web/JavaScript/Reference/Statements/return +translation_of: Web/JavaScript/Reference/Statements/return +--- +
{{jsSidebar("Statements")}}
+ +

ال return ينهي البيان تنفيذ الوظيفة ويحدد قيمة ليتم ارجاعها الى دالة الاستدعاء

+ +
{{EmbedInteractiveExample("pages/js/statement-return.html")}}
+ + + +

بناء الجملة

+ +
return [expression];
+ +
+
expression
+
التعبير المراد استرجاع قيمتة. اذا تم حذفه, فسيتم ارجاع undefined بدلاً من ذالك
+
+ +

الوصف

+ +

عند استخدام عبارة return في جسم الدالة,يتم ايقاف تنفيذ الوظيفة.اذا تم تحديد ذالك,يتم ارجاع قيمة معينة الى دالة الاستدعاء.على سبيل المثال,تعرض الدالة التالية مربع سعتها , x,حيث x هي رقم.

+ +
function square(x) {
+   return x * x;
+}
+var demo = square(3);
+// demo will equal 9
+
+ +

اذا تم حذف القيمة,يتم ارجاع undefined بدلاُ من ذالك

+ +

تعطل عبارات الارجاع التالية تنفيذ الوظيفة

+ +
return;
+return true;
+return false;
+return x;
+return x + y / 3;
+
+ +

الادراج التلقائي للفاصلة المنقوطة (Semicolon)

+ +

تتاثر عبارة الارجاع بادراج الفاصلة المنقوطة تلقائياُُ (ASI) .

+ +

لا يُسمح بفاصل سطر بين الكلمة الاساسية return  و التعبير

+ +
return
+a + b;
+
+ +

is transformed by ASI into:

+ +
return;
+a + b;
+
+ +

The console will warn "unreachable code after return statement".

+ +
Starting with Firefox 40, a warning is shown in the console if unreachable code is found after a return statement.
+ +

To avoid this problem (to prevent ASI), you could use parentheses:

+ +
return (
+  a + b
+);
+
+ +

Examples

+ +

Interrupt a function

+ +

A function immediately stops at the point where return is called.

+ +
function counter() {
+  for (var count = 1; ; count++) {  // infinite loop
+    console.log(count + 'A'); // until 5
+      if (count === 5) {
+        return;
+      }
+      console.log(count + 'B');  // until 4
+    }
+  console.log(count + 'C');  // never appears
+}
+
+counter();
+
+// Output:
+// 1A
+// 1B
+// 2A
+// 2B
+// 3A
+// 3B
+// 4A
+// 4B
+// 5A
+
+ +

Returning a function

+ +

See also the article about Closures.

+ +
function magic() {
+  return function calc(x) { return x * 42; };
+}
+
+var answer = magic();
+answer(1337); // 56154
+
+ +

Specifications

+ + + + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.statements.return")}}

+ +

See also

+ + + +
+
+
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" new file mode 100644 index 0000000000..d3789ba7bd --- /dev/null +++ "b/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/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:

+ + + +
+

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

+ + 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" new file mode 100644 index 0000000000..368d8af03d --- /dev/null +++ "b/files/ar/web/javascript/reference/\330\247\331\204\330\257\331\210\330\247\331\204/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.

+ + + +

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:

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

+ + diff --git a/files/ar/web/mathml/index.html b/files/ar/web/mathml/index.html new file mode 100644 index 0000000000..314c7d113f --- /dev/null +++ b/files/ar/web/mathml/index.html @@ -0,0 +1,123 @@ +--- +title: لغة الترميز الرياضية +slug: Web/MathML +tags: + - صفحة هبوط + - لغة الترميز الرياضية + - لغة الترميز القابلة للامتداد + - مراجع + - ويب +translation_of: Web/MathML +--- +

لغة الترميز الرياضية (MathML) هي نكهة من لغة الترميز القابلة للامتداد (XML) لوصف الرموز الرياضية وتمثيل هيكلها ومحتواها.

+ +

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

+ +
+
+

مرجع لغة الترميز الرياضية

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

عرض المزيد...

+
+ +
+

الحصول على المساعدة من المجتمع

+ + + +

أدوات

+ + + +

 

+ +

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

+ + +
+
+ +

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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}} [1]{{CompatGeckoDesktop("1.8")}}{{CompatNo}} [2]{{CompatNo}} [3]{{CompatSafari(5.1)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatUnknown}}{{CompatUnknown}}5.1
+
+ +

[1] متوفر مع إضاف(ة/ات).

+ +

[2] متوفر مع إضاف(ة/ات).

+ +

[3] متوفر مع إضاف(ة/ات).

diff --git a/files/ar/web/svg/attribute/index.html b/files/ar/web/svg/attribute/index.html new file mode 100644 index 0000000000..67cc97d9ac --- /dev/null +++ b/files/ar/web/svg/attribute/index.html @@ -0,0 +1,387 @@ +--- +title: SVG Attribute reference +slug: Web/SVG/Attribute +tags: + - NeedsHelp + - NeedsTranslation + - SVG + - SVG Attribute + - SVG Reference + - TopicStub +translation_of: Web/SVG/Attribute +--- +

« SVG / SVG Element reference »

+

SVG Attributes

+
+

A

+ +

B

+ +

C

+ +

D

+ +

E

+ +

F

+ +

G

+ +

H

+ +

I

+ +

K

+ +

L

+ +

M

+ +

N

+ +

O

+ +

P

+ +

R

+ +

S

+ +

T

+ +

U

+ +

V

+ +

W

+ +

X

+ +

Y

+ +

Z

+ +
+

Categories

+

Animation event attributes

+

{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}

+

Animation attribute target attributes

+

{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}

+

Animation timing attributes

+

{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}

+

Animation value attributes

+

{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}

+

Animation addition attributes

+

{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}

+

Conditional processing attributes

+

{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.

+

Core attributes

+

{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}

+

Document event attributes

+

{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}

+

Filter primitive attributes

+

{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}

+

Graphical event attributes

+

{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}

+

Presentation attributes

+
+ Note that all SVG presentation attributes can be used as CSS properties.
+

{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}

+

Transfer function attributes

+

{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}

+ +

{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}

diff --git a/files/ar/web/svg/index.html b/files/ar/web/svg/index.html new file mode 100644 index 0000000000..a1a48347e6 --- /dev/null +++ b/files/ar/web/svg/index.html @@ -0,0 +1,94 @@ +--- +title: SVG +slug: Web/SVG +tags: + - 2D Graphics + - NeedsTranslation + - References + - SVG + - TopicStub +translation_of: Web/SVG +--- +
+ Getting Started
+ This tutorial will help get you started using SVG.
+

Scalable Vector Graphics (SVG) is an XML {{Glossary("markup language")}} for describing two-dimensional {{Glossary("vector graphics")}}. SVG is essentially to graphics what {{Glossary("XHTML")}} is to text.

+

SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a W3C recommendation (i.e., a standard) and that it is {{Glossary("XML")}}-based as opposed to a closed binary format. It is explicitly designed to work with other W3C standards such as CSS, DOM and SMIL.

+
+
+

Documentation

+
+
+ SVG element reference
+
+ Get details about each SVG element.
+
+ SVG attribute reference
+
+ Get details about each SVG attribute.
+
+ SVG DOM interface reference
+
+ Get details about the whole SVG DOM API.
+
+ Enhance HTML content
+
+ SVG works together with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}. Use SVG to enhance a regular HTML page or web application.
+
+ SVG in Mozilla
+
+ Notes and information on how SVG is implemented in Mozilla. + +
+
+

View All...

+

Community

+
    +
  • View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
    • +
+

Tools

+ +
+
+ + +

Animation and interactions

+

Like HTML, SVG has a document model (DOM), events and is accessible from JavaScript. This allows developers to create rich animations and interactive images.

+ +

Mapping, charting, games & 3D experiments

+

While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.

+ +
+
+

 

diff --git a/files/ar/web/tutorials/index.html b/files/ar/web/tutorials/index.html new file mode 100644 index 0000000000..a552f18f6b --- /dev/null +++ b/files/ar/web/tutorials/index.html @@ -0,0 +1,217 @@ +--- +title: دروس +slug: Web/Tutorials +tags: + - CSS + - HTML + - MDN + - أساسيات الويب + - تدريب + - تصميم الويب + - تعليمات برمجية + - جافاسكربت JavaScript + - دليل + - مبتدئين +translation_of: Web/Tutorials +--- +

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

+ +

للجدد على الويب

+ +
+
البدء مع الويب
+
+

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

+
+
+ +

دروس عن لغة ترميز النص الفائق (HTML)

+ +

مستوى مُبتدئ

+ +
+
+
+
مقدمة إلى لغة ترميز النص الفائق (HTML)
+
تُعَد هذه الوحدة تمهيداً للطريق حيث تُهيِئُك لتعلم الصيغة الكتابيّة والمفاهيم الأساسيّة في اللغة، مغطيةً مواضيع مثل التعامل مع النصوص، إنشاء روابط تشعيبيّة (hyperlinks)، وكيفيّة استخدام اللغة لهيكلة صفحة ويب.
+
مرجع MDN لعناصر لغة ترميز النص الفائق HTML
+
مرجع شامل لعناصر لغة ترميز النص الفائق، ودعم المتصفحات المختلفة لكلٍ منها.
+
إنشاء صفحة بسيطة باستخدام لغة ترميز النص الفائق HTML (موقع The Blog Starter)
+
دليل لغة ترميز النص الفائق للمبتدئين يتضمن شروحات للوسوم الشائعة، ولوسوم الإصدار الخامس من اللغة. يتضمن هذا المرجع أيضاً دليل تدريجي لبناء صفحة ويب بسيطة.
+
تحديات في لغة ترميز النص الفائق HTML (موقع Wikiversity)
+
استخدم هذه التحديات لتشحذ مهاراتك (على سبيل المثال، "هل يجب أن استخدم العنصر <h2> أم العنصر <strong>؟")، ولتُركِز على مهارة التنسيق الدقيق (استخدام العنصر الصحيح في الوقت الصحيح وبالشكل الصحيح).
+
+
+
+ +

مستوى متوسط

+ +
+
+
+
الوسائط المتعددة (Multimedia) و التضمين (Embedding)
+
نستكشف في هذه الوحدة كيفيّة استخدام لغة ترميز النص الفائق لتضمين الوسائط المتعددة (multimedia) المختلفة في مواقع الويب، كما ونغطي الطرق المُختلفة التي يمكن استخدامها لتضمين الصور، وإضافة ملفات الفيديو والصوت، أو حتى تضمين موقع آخر بأكمله.
+
الجداول في لغة ترميز النص الفائق HTML
+
يُشكِل تقديم البيانات المجدولة في الموقع بشكل مفهوم، ومُتاح (accessible) تحدياً. تغطي هذه الوحدة مبادئ هيكلة الجداول، كما تغطي مزايا أكثر تعقيداً مثل التعليقات (captions) والخلاصات (summaries) الجدوليّة.
+
+
+
+ +

مستوى متقدم

+ +
+
+
+
الاستمارات (Forms) في لغة ترميز النص الفائق HTML
+
الاستمارات (Forms) هي جزء مهم جداً من الويب، فهي توفر آليّة للتفاعل مع المواقع (على سبيل المثال، التسجيل وتسجيل الدخول، وإرسال التعليقات، وشراء المنتجات، وغيرها من الأمور). تُهيئك هذه الوحدة على إنشاء أجزاء الاستمارات المتعلقة بجهة العميل (client-side).
+
نصائح لكتابة صفحات HTML سريعة التحميل
+
تعطي المقالة نصائح لكتابة صفحات ويب توفِر استجابة أكبر للزوار وتُقلل من الحمل على خادم والويب وإتصال الإنترنت.
+
+
+
+ +

دروس عن تقنيّة صفحات الأنماط الانسيابية (CSS)

+ +

مستوى مبتدئ

+ +
+
+
+
أساسيات صفحات الأنماط الانسيابية CSS
+
تُستخدم هذه التقنيّة (CSS) لتصميم مظهر صفحتك. تبدأ معك هذه المقالة من ما ستحتاجه لتبدأ العمل. سنجيب عن أسئلة مثل: كيف يمكنني جعل لون نصي أسود أو أحمر؟ كيف يمكنني جعل محتواي يظهر في المكان الفلاني على الشاشة؟ كيف أُزخرِف صفحتي بصورة أو بلون في الخلفيّة؟
+
مقدمة في صفحات الأنماط الانسيابية CSS
+
تبدأ هذه الوحدة معك بأساسيات عمل هذه التقنيّة، متضمنةً معلومات عن المحددات (selectors) والخواص (properties)، وكتابة التعليمات، وتطبيق التنسيقات المجراة على صفحة لغة ترميز النص الفائق، وكيفيّة تحديد الطول واللون وأمور أخرى، والتتالي (cascade)، والوراثة (inheritance)، وأساسيات نموذج الصندوق (box model)، والتنقيح (debugging).
+
صناديق التصميم
+
سنأخذ في هذه الوحدة نظرة على صناديق التصميم (styling boxes)، والتي تعد واحدة من الخطوات الأساسيّة نحو تنظيم صفحة الويب. في هذه المقالة سنلخص نموذج الصندوق (box model)، وبعدها سنأخذ نظرة حول التحكم بنماذج الصندوق عن طريق إعداد الحشو (margin)، والحواف (border)، والهوامش (padding)، وإعداد لون خلفية مخصصة، والصور وغيرها من الميزات. كما تشرح المقالة ميزات زخرفيّة، مثل استخدام الظلال (shadows) والمرشحات (filters) على الصناديق.
+
تنسيق النصوص
+
تحتوي هذه المقالة على شرح لأساسيات تنسيق النصوص. تتضمن المقالة أيضاً معلومات عن كيفيّة إعداد الخطوط الغامقة والمائلة، والمسافات بين الحروف والسطور، والظلال، وغيرها من خواص النصوص. ننهي المقالة بشرح كيفيّة إضافة خطوط مخصصة لصفحتك، وتنسيق القوائم والروابط.
+
الأسئلة الشائعة حول تقنيّة CSS
+
الأسئلة الشائعة المطروحة من المبتدئين حول اللغة وأجوبتها.
+
+
+
+ +

مستوى متوسط

+ +
+
+
+
نظام الترتيب للـ CSS
+
في هذه المرحلة سنكون قد أخذنا نظرة حول أساسيات صفحات الأنماط الانسيابية، بدءً من كيفيّة تنسيق النصوص، إلى تنسيق والتلاعب بالصناديق التي يوجد بها محتواك. الآن حان الوقت لأخذ نظرة حول كيفيّة وضع صناديقك في المكان المناسب. قد غطينا في هذه المقالة المتطلبات الضروريّة اللازمة حتّى تتمكن من الغوص في عالم النمذجة (layout)، وتتمكن من تعلم إعدادات العرض المختلفة، وطرق النمذجة التقليديّة والتي تنطوي على التعويم (float)، والتعيين (positioning)، وأدوات التخطيط الجديدة مثل الصندوق المرن (flexbox).
+
مرجع صفحات الأنماط الانسيابية CSS
+
مرجع شامل للتقنيّة، مع تفاصيل دعم خواصها من مُتصفح فايرفوكس وغيره من المتصفحات.
+
+
+ +
+
+
شبكات التخطيط السلسة (Fluid Grids) (موقع A List Apart)
+
تصميم نماذج تتحجم بسلاسة مع نافذة المتصفح باستخدام الشبكة الطباعيّة (typographic grid).
+
تحديات في صفحات الأنماط الانسيابية CSS (موقع Wikiversity)
+
اشحذ مهاراتك، واكتشف نقاط الضعف لديك لتتمرن أكثر مع هذه التمرينات العمليّة.
+
+
+
+ +

مستوى متقدم

+ +
+
+
+
استخدام التحويلات الهندسيّة في صفحات الأنماط الانسيابية CSS
+
تطبيق التدوير (rotation)، والميلان (skewing)، والتحجيم (scaling)، والإزاحة (translation) باستخدام صفحات الأنماط الانسيابية.
+
تقنيّة الانتقالات (المقطع الانتقالي) في CSS
+
توفر تقنيّة الانتقالات (أو المقطع الانتقالي - transitions)، التي تعد جزءً من مسودة الإصدار الثالث من صفحات الأنماط الانسيابية، وسيلة لإحياء (animate) التغييرات في خصائص اللغة، بدلاً من تنفيذها فورياً.
+
الدليل السريع لاستخدام الخطوط (Fonts) باستخدام الخاصية font-face@ (موقع HTML5 Rocks)
+
تتيح لك الخاصيّة font-face@ في الإصدار الثالث من صفحات الأنماط الانسيابية استخدام الخطوط المُخصصة في مواقع الويب بطريقة سهلة الوصول إليها، سهلة الاستخدام، وقابلة للتوسع.
+
+
+
+ +
+
+
دورة كانفاس (Canvas)
+
تعلم طريقة رسم الرسومات برمجياً باستخدام عنصر الكانفاس (canvas).
+
+
+ +

دروس عن لغة الجافاسكربت JavaScript

+ +

مستوى مبتدئ

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

مستوى متوسط

+ +
+
مقدمة إلى الكائنات في الجافاسكربت
+
من المهم فهم البرمجة الشيئيّة في اللغة إذا أردت زيادة معرفتك والتمكن من كتابة شيفرة برمجيّة أكثر فعاليّة، من أجل ذلك قمنا بتوفير هذه الوحدة لك.
+
+ +
+
+
+
واجهات التصميم البرمجيّة (APIs) لجهة المستخدم (Client-side)
+
لن تستطيع العمل جيداً عند تطوير جهة المستخدم (client-side) باستخدام الجافاسكربت من دون تعلمك للواجهات البرمجيّة المتخصصة، فهي واجهات للتلاعب بأجزاء مختلفة من المُتصفِح ونظام التشغيل الذي يعمل عليه الموقع، أو حتى التلاعب بحقول بيانات مواقع أو خدمات أخرى. في هذه الوحدة سنستكشف ماهيّة هذه الواجهات، وكيف تستخدم بعض من أكثر تلك الواجهات شيوعاً والتي ستحتاجها غالباً في عملك.
+
+
+ +
+
+
إعادة تقديم لغة الجافاسكربت
+
ملخص للغة الجافاسكربت يستهدف المطورين متوسطي الخبرة.
+
الجافاسكربت الفصيح (Eloquent JavaScript)
+
دليل شامل للمنهجيات (methodologies) المتقدمة والمتوسطة للغة الجافاسكربت .
+
+
+
+ +

مستوى متقدم

+ +
+
+
+
دليل لغة الجافاسكربت
+
دليل شامل ومُحدَث باستمرار للغة الجافاسكربت لجميع المستويات من المبتدئ إلى المحترف.
+
أنت لا تعرف لغة الجافاسكربت (Kyle Simpson)
+
سلسلة من الكِتُب تتعمق في آليات لغة الجافاسكربت الجوهريّة.
+
كيف تعمل المتصفحات
+
+
+
مقالة بحثيّة تفصيليّة تشرح المتصفحات الحديثة المختلفة ومحركاتها وآلية عرضها للصفحات ...إلخ.
+
+
+
فيديوهات عن لغة الجافاسكربت (جيتهاب)
+
مجموعة من الفيديوهات عن لغة الجافاسكربت.
+
+
+
+ +

تطوير إضافات المتصفح

+ +
+
+
+
تقنيّة WebExtensions
+
نظام عابر للمتصفحات (cross-browser) لتطوير الإضافات. يتوافق النظام إلى حدٍ كبير مع واجهة الإضافات البرمجيّة المدعومة بواسطة متصفخ جوجل وكروم وأوبرا، كما يتوافق مع مسودة W3C المجتمعيّة. الإضافات المكتوبة لتلك المتصفحات ستعمل على فايرفوكس ومايكروسوفت أيدج في معظم الحالات بتغييرات طفيفة. الواجهة البرمجيّة متوافقة أيضاً مع فايرفوكس متعدد العمليات (multiprocess firefox).
+
+
+
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" new file mode 100644 index 0000000000..c9c30e8ca4 --- /dev/null +++ "b/files/ar/web/\330\255\331\205\330\247\331\212\330\251/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/\331\205\330\261\330\254\330\271/index.html" "b/files/ar/web/\331\205\330\261\330\254\330\271/index.html" new file mode 100644 index 0000000000..fc7fd86cda --- /dev/null +++ "b/files/ar/web/\331\205\330\261\330\254\330\271/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()}}

+ +

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

+
+
+
-- cgit v1.2.3-54-g00ecf